/* ══════════════════════════════════
   MINDFUL NUTRITION ROUTE — COMMON STYLESHEET
   Used by all pages: index, about, contact,
   newsletter, unsubscribe, terms, privacy
   ══════════════════════════════════ */

/* TOKENS — OBSIDIAN × ALABASTER × PLATINUM BRASS */
:root {
    --obsidian: #0B0B0C;
    --obsidian-muted: #161618;
    --obsidian-card: #1C1C1E;
    --alabaster: #F9F8F6;
    --alabaster-muted: #EAE8E3;
    --brass: #D4AF37;
    --brass-bright: #F3E5AB;
    --brass-glow: rgba(212, 175, 55, 0.1);
    --crimson: #9B2C2C;
    --crimson-glow: rgba(155, 44, 44, 0.15);
    --border-white: rgba(255, 255, 255, 0.06);
    --border-white-heavy: rgba(255, 255, 255, 0.15);
    --border-dark: rgba(11, 11, 12, 0.08);

    --ff-heading: 'Playfair Display', serif;
    --ff-body: 'Plus Jakarta Sans', sans-serif;
    --ff-mono: 'Syncopate', sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; background: var(--obsidian); }

body {
    font-family: var(--ff-body);
    background: var(--obsidian);
    color: var(--alabaster);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* METICULOUS CUSTOM SCROLLBAR */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--obsidian); }
::-webkit-scrollbar-thumb { background: var(--border-white-heavy); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--brass); }

/* FINE SILK GRAPHIC OVERLAY */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: .018;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* PREMIUM INTERACTIVE FLUID CURSOR */
#fluid-cursor {
    position: fixed;
    width: 8px;
    height: 8px;
    background: var(--brass);
    border-radius: 50%;
    pointer-events: none;
    z-index: 100000;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, background 0.3s;
}

#fluid-cursor-aura {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    transition: transform 0.08s ease-out, width 0.3s, height 0.3s, border-color 0.3s;
}

/* ARCHITECTURAL HEADER */
#luxury-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 900;
    height: 90px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-white);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#luxury-nav.scrolled {
    height: 70px;
    background: rgba(11, 11, 12, 0.85);
    backdrop-filter: blur(30px);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.nav-container {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60px;
}

.brand-signature {
    font-family: var(--ff-heading);
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-signature span {
    font-family: var(--ff-body);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--brass);
    border: 1px solid var(--brass);
    padding: 2px 6px;
    margin-top: 4px;
}

.nav-monolith { display: flex; align-items: center; gap: 48px; }

.nav-item-link {
    font-family: var(--ff-mono);
    font-size: 0.65rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(249, 248, 246, 0.6);
    transition: color 0.4s;
    position: relative;
    padding: 10px 0;
}

.nav-item-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background: var(--brass);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateX(-50%);
}

.nav-item-link:hover,
.nav-item-link.active { color: var(--alabaster); }

.nav-item-link:hover::after,
.nav-item-link.active::after { width: 100%; }

.action-gate {
    font-family: var(--ff-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 14px 32px;
    border: 1px solid var(--brass);
    color: var(--brass);
    position: relative;
    z-index: 1;
    transition: color 0.4s;
    background: transparent;
    cursor: pointer;
}

.action-gate::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--brass);
    transform: scaleY(0);
    transform-origin: bottom;
    z-index: -1;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.action-gate:hover { color: var(--obsidian); }
.action-gate:hover::before { transform: scaleY(1); }

.kinetic-hamburger { display: none; flex-direction: column; gap: 6px; width: 24px; cursor: pointer; background: transparent; border: none; padding: 0; }
.kinetic-hamburger span { width: 100%; height: 1px; background: var(--alabaster); transition: transform 0.4s; }

.mobile-flyout {
    position: fixed;
    inset: 0;
    background: var(--obsidian);
    z-index: 899;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px 40px;
    gap: 24px;
    transform: translateX(100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-flyout.active { transform: translateX(0); }

.mobile-flyout a {
    font-family: var(--ff-heading);
    font-size: 3rem;
    border-bottom: 1px solid var(--border-white);
    padding-bottom: 12px;
}

/* HERO — ASYMMETRICAL CINEMATIC MONOLITH */
#luxury-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 140px 60px 80px;
    position: relative;
    background: radial-gradient(circle at 80% 20%, #171512 0%, var(--obsidian) 70%);
}

.hero-structural-grid {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 80px;
    align-items: center;
}

.hero-textual-column { position: relative; z-index: 5; }

.architectural-tag {
    font-family: var(--ff-mono);
    font-size: 0.6rem;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.architectural-tag::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 1px solid var(--brass);
    border-radius: 50%;
}

.hero-monumental-heading {
    font-family: var(--ff-heading);
    font-size: clamp(3.5rem, 6.5vw, 6rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin-bottom: 40px;
}

.hero-monumental-heading span {
    display: block;
    font-style: italic;
    color: transparent;
    -webkit-text-stroke: 1px rgba(249, 248, 246, 0.4);
}

.hero-editorial-summary {
    font-family: var(--ff-body);
    font-size: 1.15rem;
    font-weight: 300;
    line-height: 1.85;
    color: rgba(249, 248, 246, 0.6);
    max-width: 580px;
    margin-bottom: 48px;
}

.hero-interactive-triggers { display: flex; align-items: center; gap: 32px; margin-bottom: 64px; }

.btn-monolith-primary {
    font-family: var(--ff-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 20px 44px;
    background: var(--alabaster);
    color: var(--obsidian);
    display: inline-flex;
    align-items: center;
    gap: 16px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s;
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.btn-monolith-primary:hover { background: var(--brass); transform: translateY(-4px); }

.btn-monolith-textual {
    font-family: var(--ff-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--alabaster);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(249, 248, 246, 0.2);
    padding-bottom: 6px;
    transition: border-color 0.4s, color 0.4s;
    text-decoration: none;
}

.btn-monolith-textual:hover { border-color: var(--brass); color: var(--brass); }

.hero-canvas-column { position: relative; }

.sculptural-frame {
    width: 100%;
    aspect-ratio: 4/5;
    overflow: hidden;
    border: 1px solid var(--border-white);
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5);
    background: var(--obsidian-muted);
}

.sculptural-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.1) brightness(0.85) grayscale(0.2);
    transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sculptural-frame:hover img { transform: scale(1.05); }

.floating-stat-card {
    position: absolute;
    bottom: -30px;
    left: -40px;
    background: var(--obsidian-card);
    border: 1px solid var(--border-white);
    padding: 32px;
    min-width: 240px;
    backdrop-filter: blur(20px);
}

.floating-stat-card .value {
    font-family: var(--ff-heading);
    font-size: 3rem;
    color: var(--brass);
    line-height: 1;
}

.floating-stat-card .label {
    font-family: var(--ff-body);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(249, 248, 246, 0.4);
    margin-top: 8px;
}

/* LINEAR MARQUEE MATRIX */
.matrix-marquee {
    border-top: 1px solid var(--border-white);
    border-bottom: 1px solid var(--border-white);
    background: #000;
    padding: 24px 0;
    overflow: hidden;
    display: flex;
}

.marquee-infinite-stream {
    display: flex;
    white-space: nowrap;
    animation: streamLinear 30s linear infinite;
}

@keyframes streamLinear {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

.matrix-node {
    font-family: var(--ff-mono);
    font-size: 0.6rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(249, 248, 246, 0.3);
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 40px;
}

.matrix-node i { color: var(--brass); font-size: 0.4rem; }

/* ABOUT — CHRONICLE EXHIBIT LAYOUT */
#luxury-about {
    padding: 16px 0;
    background: var(--alabaster);
    color: var(--obsidian);
}

.about-exhibit-blueprint {
    max-width: 1800px;
    margin: 0 auto;
    padding: 120px 60px;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 120px;
    align-items: start;
}

.blueprint-sticky-panel { position: sticky; top: 150px; }

.blueprint-sticky-panel h2 {
    font-family: var(--ff-heading);
    font-size: clamp(3rem, 5vw, 5.5rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-top: 16px;
}

.blueprint-narrative-panel { padding-top: 40px; }

.narrative-lead-paragraph {
    font-family: var(--ff-heading);
    font-size: 1.8rem;
    line-height: 1.6;
    font-style: italic;
    color: var(--obsidian);
    margin-bottom: 40px;
}

.narrative-body-text {
    font-family: var(--ff-body);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.95;
    color: rgba(11, 11, 12, 0.65);
    margin-bottom: 64px;
}

.architectural-spec-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    border-top: 1px solid var(--border-dark);
    padding-top: 48px;
}

.spec-node { display: flex; flex-direction: column; }

.spec-node-icon { font-size: 1.2rem; color: var(--brass); margin-bottom: 16px; }

.spec-node-title {
    font-family: var(--ff-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.spec-node-desc {
    font-family: var(--ff-body);
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(11, 11, 12, 0.55);
}

/* SERVICES — MONOLITHIC GRID PATTERN */
#luxury-services {
    padding: 160px 60px;
    background: var(--obsidian);
    position: relative;
}

.services-top-bar {
    max-width: 1800px;
    margin: 0 auto 80px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid var(--border-white);
    padding-bottom: 40px;
}

.services-top-bar h2 {
    font-family: var(--ff-heading);
    font-size: clamp(3rem, 5vw, 5.5rem);
    font-weight: 300;
    line-height: 1.1;
}

.services-top-bar p {
    max-width: 420px;
    font-family: var(--ff-body);
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(249, 248, 246, 0.5);
}

.monolithic-services-matrix {
    max-width: 1800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border-white);
}

.matrix-service-cell {
    background: var(--obsidian);
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    min-height: 480px;
    position: relative;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.matrix-service-cell::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--obsidian) 0%, rgba(212, 175, 55, 0.03) 100%);
    opacity: 0;
    transition: opacity 0.5s;
}

.matrix-service-cell:hover::before { opacity: 1; }

.cell-index {
    font-family: var(--ff-mono);
    font-size: 0.6rem;
    color: rgba(249, 248, 246, 0.2);
    margin-bottom: 48px;
}

.cell-glyph { font-size: 1.5rem; color: var(--brass); margin-bottom: 32px; }

.cell-title {
    font-family: var(--ff-heading);
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 16px;
    z-index: 2;
    position: relative;
}

.cell-description {
    font-family: var(--ff-body);
    font-size: 0.9rem;
    line-height: 1.8;
    color: rgba(249, 248, 246, 0.45);
    margin-bottom: 40px;
    flex-grow: 1;
    z-index: 2;
    position: relative;
}

.cell-sub-tags {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 32px;
    z-index: 2;
    position: relative;
}

.cell-sub-tags li {
    font-family: var(--ff-body);
    font-size: 0.75rem;
    color: rgba(249, 248, 246, 0.3);
    display: flex;
    align-items: center;
    gap: 10px;
}

.cell-sub-tags li::before {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--brass);
    border-radius: 50%;
}

.cell-hyperlink {
    font-family: var(--ff-mono);
    font-size: 0.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brass);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    z-index: 2;
    position: relative;
}

.cell-hyperlink i { transition: transform 0.3s; }
.matrix-service-cell:hover .cell-hyperlink i { transform: translateX(6px); }

/* Ecosystem manifest block */
.ecosystem-manifest-container {
    max-width: 1800px;
    margin: 100px auto 0;
    border: 1px solid var(--border-white);
    padding: 80px;
    background: radial-gradient(circle at 0% 100%, #1c1a16 0%, var(--obsidian) 50%);
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 80px;
    align-items: center;
}

.manifest-title {
    font-family: var(--ff-heading);
    font-size: 2.5rem;
    line-height: 1.3;
    font-style: italic;
}

.manifest-details {
    font-family: var(--ff-body);
    font-size: 1.1rem;
    line-height: 2;
    color: rgba(249, 248, 246, 0.55);
    border-left: 1px solid var(--brass);
    padding-left: 48px;
}

/* STORIES — KINETIC EXPANSION GRID */
#luxury-stories {
    padding: 160px 60px;
    background: var(--alabaster);
    color: var(--obsidian);
}

.stories-header-layout {
    max-width: 1800px;
    margin: 0 auto 80px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.stories-header-layout h2 {
    font-family: var(--ff-heading);
    font-size: clamp(3rem, 5vw, 5.5rem);
    font-weight: 400;
}

.kinetic-story-deck {
    max-width: 1800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.kinetic-card {
    background: #fff;
    border: 1px solid var(--alabaster-muted);
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 440px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.kinetic-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 40px 80px rgba(11, 11, 12, 0.06);
    border-color: var(--brass);
}

.card-rating-row { color: var(--brass); font-size: 0.75rem; margin-bottom: 40px; display: flex; gap: 4px; }

.card-quote-content {
    font-family: var(--ff-heading);
    font-size: 1.4rem;
    line-height: 1.6;
    font-style: italic;
    color: var(--obsidian);
    margin-bottom: 48px;
    flex-grow: 1;
}

.card-profile-signature { display: flex; align-items: center; gap: 16px; }

.profile-glyph-placeholder {
    width: 48px;
    height: 48px;
    background: var(--obsidian);
    color: var(--brass);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-heading);
    font-size: 1.1rem;
}

.profile-identity .name { font-family: var(--ff-body); font-size: 0.95rem; font-weight: 600; }

.profile-identity .meta {
    font-family: var(--ff-body);
    font-size: 0.75rem;
    color: rgba(11, 11, 12, 0.45);
    margin-top: 2px;
}

/* Inline Metrics Banner */
.embedded-metrics-strip {
    max-width: 1800px;
    margin: 100px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--border-dark);
    padding-top: 60px;
    gap: 40px;
}

.strip-metric-node .num {
    font-family: var(--ff-heading);
    font-size: 3.5rem;
    color: var(--obsidian);
    line-height: 1;
}

.strip-metric-node .lbl {
    font-family: var(--ff-mono);
    font-size: 0.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(11, 11, 12, 0.4);
    margin-top: 12px;
}

/* FAQ — LINEAR DISCLOSURE ARCHITECTURE */
#luxury-faq { padding: 160px 60px; background: var(--obsidian-muted); }

.faq-asymmetrical-layout {
    max-width: 1800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 100px;
}

.faq-meta-panel { position: sticky; top: 150px; height: fit-content; }

.faq-meta-panel h2 {
    font-family: var(--ff-heading);
    font-size: clamp(3rem, 5vw, 5.5rem);
    font-weight: 300;
    line-height: 1.1;
    margin-bottom: 32px;
}

.faq-meta-panel p {
    font-family: var(--ff-body);
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(249, 248, 246, 0.4);
    margin-bottom: 40px;
}

.disclosure-monolith { display: flex; flex-direction: column; }

.disclosure-row {
    border-bottom: 1px solid var(--border-white);
    padding: 32px 0;
}

.disclosure-trigger-button {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    font-family: var(--ff-heading);
    font-size: 1.35rem;
    color: var(--alabaster);
    cursor: pointer;
    transition: color 0.3s;
    gap: 16px;
}

.disclosure-trigger-button:hover,
.disclosure-trigger-button.active { color: var(--brass); }

.disclosure-state-indicator {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-white-heavy);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--brass);
    transition: all 0.4s;
    flex-shrink: 0;
}

.disclosure-trigger-button.active .disclosure-state-indicator {
    transform: rotate(45deg);
    background: var(--brass);
    color: var(--obsidian);
    border-color: var(--brass);
}

.disclosure-hidden-canvas {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.disclosure-hidden-canvas p {
    font-family: var(--ff-body);
    font-size: 0.95rem;
    line-height: 1.9;
    color: rgba(249, 248, 246, 0.5);
    padding-top: 20px;
    max-width: 800px;
}

/* CONTACT — HIGH-CONTRAST MONOLITH FORM */
#luxury-contact {
    background: var(--obsidian);
    padding: 160px 60px;
    border-top: 1px solid var(--border-white);
}

.contact-monolith-grid {
    max-width: 1800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 120px;
}

.form-sculpture h2 {
    font-family: var(--ff-heading);
    font-size: clamp(3rem, 5vw, 5.5rem);
    font-weight: 300;
    line-height: 1.1;
    margin-bottom: 24px;
}

.form-sculpture p {
    font-family: var(--ff-body);
    font-size: 1.05rem;
    color: rgba(249, 248, 246, 0.4);
    margin-bottom: 64px;
    max-width: 540px;
}

.sculpted-form-field-wrapper { margin-bottom: 40px; position: relative; }

.sculpted-form-field-wrapper label {
    font-family: var(--ff-mono);
    font-size: 0.55rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(249, 248, 246, 0.4);
    display: block;
    margin-bottom: 12px;
    transition: color 0.3s;
}

.sculpted-form-field-wrapper input,
.sculpted-form-field-wrapper select,
.sculpted-form-field-wrapper textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-white-heavy);
    outline: none;
    padding: 12px 0;
    font-family: var(--ff-heading);
    font-size: 1.2rem;
    color: var(--alabaster);
    transition: border-color 0.4s;
}

.sculpted-form-field-wrapper input:focus,
.sculpted-form-field-wrapper select:focus,
.sculpted-form-field-wrapper textarea:focus { border-bottom-color: var(--brass); }

.sculpted-form-field-wrapper select option { background: var(--obsidian-muted); color: var(--alabaster); }

.sculpted-form-field-wrapper.field-invalid label { color: var(--crimson); }

.sculpted-form-field-wrapper.field-invalid input,
.sculpted-form-field-wrapper.field-invalid select,
.sculpted-form-field-wrapper.field-invalid textarea { border-bottom-color: var(--crimson); }

.field-error-text {
    font-family: var(--ff-body);
    font-size: 0.7rem;
    color: var(--crimson);
    position: absolute;
    bottom: -20px;
    left: 0;
    display: none;
}

.sculpted-form-field-wrapper.field-invalid .field-error-text { display: block; }

.form-submission-trigger { margin-top: 24px; }

.directory-sculpture {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    border-left: 1px solid var(--border-white);
    padding-left: 80px;
}

.directory-node-group { display: flex; flex-direction: column; gap: 48px; margin-top: 20px; }

.directory-node-item { display: flex; align-items: flex-start; gap: 24px; }

.directory-node-icon {
    width: 48px;
    height: 48px;
    border: 1px solid var(--border-white-heavy);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brass);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.directory-node-details .label {
    font-family: var(--ff-mono);
    font-size: 0.55rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(249, 248, 246, 0.3);
    margin-bottom: 6px;
}

.directory-node-details .value {
    font-family: var(--ff-heading);
    font-size: 1.25rem;
    line-height: 1.5;
}

.hours-monolith-card {
    background: var(--obsidian-muted);
    border: 1px solid var(--border-white);
    padding: 40px;
    margin-top: 60px;
}

.hours-monolith-card h4 {
    font-family: var(--ff-heading);
    font-size: 1.25rem;
    color: var(--brass);
    margin-bottom: 8px;
}

.hours-monolith-card p {
    font-family: var(--ff-body);
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(249, 248, 246, 0.4);
}

/* NEWSLETTER — MODERN SEGMENTED PANEL */
#luxury-newsletter {
    padding: 120px 60px;
    background: var(--brass);
    color: var(--obsidian);
}

.newsletter-panel-container {
    max-width: 1800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
}

.newsletter-branding-side h3 {
    font-family: var(--ff-heading);
    font-size: clamp(2.5rem, 4vw, 4.5rem);
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 24px;
}

.newsletter-branding-side p {
    font-family: var(--ff-body);
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(11, 11, 12, 0.7);
    max-width: 540px;
}

.newsletter-interactive-side {
    background: rgba(11, 11, 12, 0.04);
    border: 1px solid rgba(11, 11, 12, 0.1);
    padding: 60px;
}

.newsletter-tab-row {
    display: flex;
    gap: 32px;
    border-bottom: 1px solid rgba(11, 11, 12, 0.1);
    margin-bottom: 40px;
}

.newsletter-tab-button {
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--ff-mono);
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding-bottom: 12px;
    color: rgba(11, 11, 12, 0.4);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1.5px;
}

.newsletter-tab-button.active { color: var(--obsidian); border-bottom-color: var(--obsidian); }

.newsletter-panel-section { display: none; }
.newsletter-panel-section.active { display: block; }

.light-form-field { margin-bottom: 28px; }

.light-form-field label {
    font-family: var(--ff-mono);
    font-size: 0.55rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(11, 11, 12, 0.6);
    display: block;
    margin-bottom: 8px;
}

.light-form-field input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(11, 11, 12, 0.2);
    outline: none;
    padding: 10px 0;
    font-family: var(--ff-heading);
    font-size: 1.1rem;
    color: var(--obsidian);
}

.light-form-field input:focus { border-bottom-color: var(--obsidian); }

.light-form-field.field-invalid input { border-bottom-color: var(--crimson); }

.light-form-field .field-error-text {
    position: relative;
    bottom: auto;
    margin-top: 6px;
}

.architectural-checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.architectural-checkbox-wrapper input[type=checkbox] {
    width: 16px;
    height: 16px;
    accent-color: var(--obsidian);
    margin-top: 2px;
    flex-shrink: 0;
}

.architectural-checkbox-wrapper label {
    font-family: var(--ff-body);
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(11, 11, 12, 0.7);
}

.architectural-checkbox-wrapper label a {
    text-decoration: underline;
    color: var(--obsidian);
}

/* FOOTER — SCHEMATIC DOSSIER GRID */
#schematic-footer {
    background: var(--obsidian);
    border-top: 1px solid var(--border-white);
    color: var(--alabaster);
    position: relative;
}

.schematic-grid-container {
    max-width: 1800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1.8fr;
    border-bottom: 1px solid var(--border-white);
    padding: 0 60px;
}

.schematic-brand-sector {
    padding: 80px 60px 80px 0;
    border-right: 1px solid var(--border-white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.schematic-brand-sector .brand-monolith {
    font-family: var(--ff-heading);
    font-size: 2.5rem;
    line-height: 1.1;
    margin-bottom: 40px;
}

.schematic-brand-sector .brand-monolith span {
    font-family: var(--ff-mono);
    font-size: 0.65rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--brass);
    display: block;
    margin-top: 16px;
}

.dossier-nav-matrix { display: grid; grid-template-columns: repeat(2, 1fr); }

.dossier-column {
    padding: 80px 40px;
    border-right: 1px solid var(--border-white);
    display: flex;
    flex-direction: column;
}

.dossier-column:last-child { border-right: none; padding-right: 0; }

.dossier-header {
    font-family: var(--ff-mono);
    font-size: 0.6rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.dossier-header::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--brass);
}

.dossier-list { list-style: none; display: flex; flex-direction: column; gap: 20px; }

.dossier-list a {
    font-family: var(--ff-body);
    font-size: 1.05rem;
    color: rgba(249, 248, 246, 0.5);
    display: inline-flex;
    align-items: center;
    transition: all 0.3s;
}

.dossier-list a::before {
    content: '—';
    margin-right: 12px;
    color: transparent;
    transition: color 0.3s, margin-right 0.3s;
}

.dossier-list a:hover { color: var(--alabaster); }
.dossier-list a:hover::before { color: var(--brass); margin-right: 16px; }

.schematic-terminal-bar {
    max-width: 1800px;
    margin: 0 auto;
    padding: 32px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--ff-mono);
    font-size: 0.55rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(249, 248, 246, 0.3);
}

.terminal-status { display: flex; align-items: center; gap: 12px; }

.status-dot {
    width: 6px;
    height: 6px;
    background: #4CAF50;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.4);
    animation: pulseData 2s infinite;
}

@keyframes pulseData {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

/* INTERIOR PAGE HEADER (about/contact/newsletter/unsubscribe/terms/privacy) */
.interior-page-header {
    min-height: 60vh;
    display: flex;
    align-items: center;
    padding: 160px 60px 80px;
    background: radial-gradient(circle at 80% 20%, #171512 0%, var(--obsidian) 70%);
    position: relative;
}

.interior-page-header .inner {
    max-width: 1800px;
    margin: 0 auto;
    width: 100%;
}

.interior-page-header h1 {
    font-family: var(--ff-heading);
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin-bottom: 24px;
}

.interior-page-header h1 span {
    display: block;
    font-style: italic;
    color: transparent;
    -webkit-text-stroke: 1px rgba(249, 248, 246, 0.4);
}

.interior-page-header .lead {
    font-family: var(--ff-body);
    font-size: 1.15rem;
    font-weight: 300;
    line-height: 1.85;
    color: rgba(249, 248, 246, 0.6);
    max-width: 680px;
}

/* LEGAL PAGE LAYOUT (terms.html / privacy.html) */
.legal-page { padding: 100px 60px 120px; background: var(--obsidian); }

.legal-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.document-node {
    background: var(--obsidian-card);
    border: 1px solid var(--border-white);
    padding: 36px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.document-node:hover {
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-3px);
}

.document-node h5 {
    font-family: var(--ff-heading);
    font-size: 1.4rem;
    margin-bottom: 12px;
    font-weight: 400;
    color: var(--brass);
    display: flex;
    align-items: center;
    gap: 14px;
}

.document-node h5::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--brass);
}

.document-node p {
    font-family: var(--ff-body);
    font-size: 0.92rem;
    line-height: 1.85;
    color: rgba(249, 248, 246, 0.55);
}

/* OVERLAYS, TOASTS & DYNAMIC SYSTEMS */
.sculpted-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(5, 5, 6, 0.8);
    backdrop-filter: blur(20px);
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.sculpted-modal-overlay.active { display: flex; }

.sculpted-modal-box {
    background: var(--obsidian-muted);
    border: 1px solid var(--border-white);
    max-width: 700px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: modalLaunch 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalLaunch {
    from { opacity: 0; transform: scale(0.95) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header-architecture {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 40px;
    border-bottom: 1px solid var(--border-white);
    background: var(--obsidian);
}

.modal-header-architecture h3 {
    font-family: var(--ff-mono);
    font-size: 0.65rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--brass);
}

.modal-close-trigger {
    background: transparent;
    border: 1px solid var(--border-white-heavy);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: rgba(249, 248, 246, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.modal-close-trigger:hover { background: var(--brass); color: var(--obsidian); border-color: var(--brass); }

.modal-scrollable-body { padding: 40px; overflow-y: auto; }

.modal-scrollable-body::-webkit-scrollbar { width: 2px; }
.modal-scrollable-body::-webkit-scrollbar-thumb { background: var(--brass); }

/* Ask-FAQ modal document-node styling (reused on FAQ modal) */
.modal-scrollable-body .document-node {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 32px;
}

.modal-scrollable-body .document-node:hover {
    transform: none;
    border-color: transparent;
}

/* Toast notifications */
#architectural-toast {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 9999;
    background: var(--obsidian-card);
    border: 1px solid var(--border-white);
    border-left: 4px solid var(--brass);
    padding: 20px 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    transform: translate3d(0, 150%, 0);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    max-width: 90vw;
}

#architectural-toast.active { transform: translate3d(0, 0, 0); opacity: 1; }
#architectural-toast i { color: var(--brass); }
#architectural-toast span { font-family: var(--ff-body); font-size: 0.85rem; font-weight: 500; }

/* RESPONSIVE COMPRESSION */
@media(max-width: 1400px) {
    .monolithic-services-matrix { grid-template-columns: repeat(2, 1fr); }
    .kinetic-story-deck { grid-template-columns: 1fr 1fr; }
    .embedded-metrics-strip { grid-template-columns: 1fr 1fr; gap: 40px; }
    .legal-grid { grid-template-columns: 1fr; }
}

@media(max-width: 1200px) {
    .schematic-grid-container { grid-template-columns: 1fr; }
    .schematic-brand-sector { border-right: none; border-bottom: 1px solid var(--border-white); padding: 60px 0; }
}

@media(max-width: 1100px) {
    .nav-monolith, .nav-container .action-gate { display: none; }
    .kinetic-hamburger { display: flex; }
    .hero-structural-grid,
    .about-exhibit-blueprint,
    .faq-asymmetrical-layout,
    .contact-monolith-grid,
    .newsletter-panel-container { grid-template-columns: 1fr; gap: 60px; }
    .blueprint-sticky-panel, .faq-meta-panel { position: static; }
    .directory-sculpture { border-left: none; padding-left: 0; }
}

@media(max-width: 800px) {
    .dossier-nav-matrix { grid-template-columns: 1fr; }
    .schematic-grid-container { padding: 0 24px; }
    .schematic-terminal-bar { padding: 32px 24px; flex-direction: column; gap: 16px; align-items: flex-start; }
    .dossier-column { border-right: none; border-bottom: 1px solid var(--border-white); padding: 40px 0; }
    .dossier-column:last-child { border-bottom: none; }
}

@media(max-width: 768px) {
    .nav-container { padding: 0 24px; }
    #luxury-hero, #luxury-services, #luxury-stories, #luxury-faq, #luxury-contact, #luxury-newsletter,
    .interior-page-header, .legal-page { padding: 100px 24px; }
    .monolithic-services-matrix, .kinetic-story-deck, .embedded-metrics-strip { grid-template-columns: 1fr; }
    .ecosystem-manifest-container { grid-template-columns: 1fr; padding: 40px 24px; gap: 32px; }
    .ecosystem-manifest-container .manifest-details { border-left: none; border-top: 1px solid var(--brass); padding-left: 0; padding-top: 24px; }
    .newsletter-interactive-side { padding: 32px 24px; }
    .floating-stat-card { left: 24px; bottom: 24px; }
    .mobile-flyout a { font-size: 2rem; }
}