/* =============================================================
   Grand Vision Perspective:Shared Stylesheet
   Editorial luxury meets technical craft.

   Structure:
   00. Self-hosted variable fonts
   01. Reset & base
   02. Design tokens
   03. Typography
   04. Layout utilities
   05. Buttons
   06. Nav
   07. Hero variants
   08. Section tones
   09. Cards
   10. Stats callouts
   11. Case items
   12. Tech grid
   13. Testimonials
   14. Method list
   15. Capability blocks
   16. Engagement cards
   17. Footer
   18. Motion
   19. Responsive
============================================================= */


/* === 00. SELF-HOSTED VARIABLE FONTS ========================
   Fraunces (opsz + wght axes) and Manrope (wght axis) shipped as
   subsetted Latin WOFF2 from Fontsource. Eliminates Google Fonts
   third-party dependency and locks CLS at 0. */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('fonts/fraunces-latin-opsz-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-display: swap;
    font-weight: 100 900;
    src: url('fonts/fraunces-latin-opsz-italic.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url('fonts/manrope-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


/* === 01. RESET & BASE ====================================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.7;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, svg, picture, video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s var(--ease);
}

button {
    font: inherit;
    cursor: pointer;
    background: none;
    border: none;
}

ul, ol {
    list-style: none;
}


/* === 02. DESIGN TOKENS ===================================== */
:root {
    /* Fonts */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Palette:warm whites */
    --paper: #fdfcf8;
    --cream: #f5f2ea;
    --cream-deep: #ebe7dc;

    /* Palette:neutrals */
    --white: #ffffff;
    --grey-50: #f8f9fa;
    --grey-100: #e8e8ec;
    --grey-200: #d0d0d6;

    /* Semantic token: text on dark surfaces (nav, footer, mobile menu) */
    --text-on-dark: #d8d4cc;

    /* Palette:ink */
    --ink: #2d2d3a;
    --ink-heading: #1a1a2e;
    --ink-muted: #6b6b7b;
    --ink-subtle: #9a9aa5;

    /* Palette:signature gold */
    --gold: #c9a84c;
    --gold-hover: #b8953f;
    --gold-hi: #e0c06a;
    --gold-tint: rgba(201, 168, 76, 0.08);
    --gold-border: rgba(201, 168, 76, 0.2);

    /* Palette:dark */
    --navy: #1a1a2e;
    --navy-deep: #0d0d1a;

    /* Elevation scale */
    --shadow-xs: 0 1px 2px rgba(26, 26, 46, 0.04);
    --shadow-sm: 0 2px 8px rgba(26, 26, 46, 0.04), 0 1px 3px rgba(26, 26, 46, 0.03);
    --shadow-md: 0 4px 16px rgba(26, 26, 46, 0.06), 0 2px 6px rgba(26, 26, 46, 0.04);
    --shadow-lg: 0 12px 32px rgba(26, 26, 46, 0.08), 0 4px 12px rgba(26, 26, 46, 0.05);
    --shadow-xl: 0 24px 48px rgba(26, 26, 46, 0.12), 0 8px 20px rgba(26, 26, 46, 0.06);
    --shadow-gold: 0 8px 24px rgba(201, 168, 76, 0.25);

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 40px;
    --space-6: 64px;
    --space-7: 96px;
    --space-8: 128px;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-q: cubic-bezier(0.165, 0.84, 0.44, 1); /* locked brand-moment easing per docs/brand/03-visual-system.md */
    --duration-fast: 0.2s;
    --duration-base: 0.3s;
    --duration-slow: 0.6s;

    /* Layout */
    --container: 1080px;
    --container-wide: 1200px;
    --container-narrow: 760px;
    --gutter: 24px;
    --gutter-desktop: 40px;

    /* Nav */
    --nav-height: 72px;

    /* Canvas-spec deep dark scale (for cinematic dark surfaces) */
    --c-bg-0: #08080b;
    --c-bg-1: #14141a;
    --c-bg-2: #1c1c25;

    /* Hairline rules on dark surfaces */
    --c-line: rgba(255, 255, 255, 0.07);
    --c-line-strong: rgba(255, 255, 255, 0.15);

    /* Ink mutations on dark */
    --c-ink-faint: rgba(255, 255, 255, 0.32);

    /* Atmosphere overlays: SVG noise tiled via data URI.
       Per docs/brand/03-visual-system.md Section IV.4: grain overlay is
       a brand surface signature. baseFrequency 0.85 = soft printed grain,
       1.4 = tighter cinematic grain for hero / section emphasis. */
    --grain-soft: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    --grain-tight: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

    /* Cinematic shadows (deep, multi-layer) */
    --shadow-deep: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
    --shadow-cinematic: 0 30px 60px -12px rgba(0, 0, 0, 0.45), 0 12px 24px -8px rgba(0, 0, 0, 0.3);
}


/* === 02b. CINEMATIC ATMOSPHERE FOUNDATION ==================
   Per docs/brand/03-visual-system.md Section IV. The brand has four
   signature motion / surface behaviours: italic-gold glow, vantage rise,
   ambient gold drift, grain overlay. This section installs the surface
   atmosphere (grain + vignette) and motion keyframes used site-wide. */

/* Subtle SVG noise grain across the entire viewport.
   z-index below nav (1000) and above content. pointer-events none so
   it never blocks interaction. mix-blend overlay preserves underlying
   colour while adding the printed-feel texture. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.35;
    background-image: var(--grain-soft);
}

/* Subtle radial vignette darkens the corners just enough to focus the eye.
   Layered on top of grain (z-index 99 in canvases; here we keep both at
   layer 100 because the underlying surface is light by default and a
   strong vignette would feel heavy. Light-touch only on light surfaces). */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 99;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(26, 26, 46, 0.06) 100%);
}


/* === 02c. CINEMATIC MOTION KEYFRAMES ====================== */

/* Ambient gold blob drift. Behind hero marks and atmospheric heroes.
   Locked spec: 6s ease-in-out infinite, scale 1 to 1.15, opacity 0.5 to 1. */
@keyframes ambient-pulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.15); }
}

/* Vantage mark rise loop. Used on hero mark elements. 4s, gold drop-shadow
   pulse synced with vertical translation. */
@keyframes vantage-rise-loop {
    0%, 100% { transform: translateY(0);    filter: drop-shadow(0 0 28px rgba(224, 192, 106, 0.4)); }
    50%      { transform: translateY(-6px); filter: drop-shadow(0 0 40px rgba(224, 192, 106, 0.6)); }
}

@media (prefers-reduced-motion: reduce) {
    /* Grain stays (static), vignette stays (static). Disable animated ambient. */
    .hero--dark::before,
    .has-ambient-glow::before,
    .hero-mark--rise {
        animation: none !important;
    }
}


/* === 03. TYPOGRAPHY ======================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--ink-heading);
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.01em;
    /* Fraunces is a variable font with an optical-size axis. Set a sane
       default; individual heading levels override below.
       Per docs/brand/03-visual-system.md Section II (Type scale).  */
    font-variation-settings: "opsz" 48;
}

/* Brand signature: italic-gold emphasis inside display contexts.
   Per docs/brand/03-visual-system.md, italic Fraunces in Gold (or
   Gold Hi on dark surfaces) is the locked GVP visual signature. */
h1 em, h2 em, h3 em, .hero em, .lead em, .display em {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: var(--gold);
}

/* Dark surfaces use Gold Hi for stronger contrast against Navy */
.section--navy h1 em, .section--navy h2 em, .section--navy h3 em,
.section--deep h1 em, .section--deep h2 em, .section--deep h3 em,
.hero h1 em, .hero h2 em, .media-hero h1 em {
    color: var(--gold-hi);
}

/* Gentle gold-glow pulse on hero italic accents (signature motion). */
.hero h1 em, .media-hero h1 em {
    animation: gold-glow 4s ease-in-out infinite;
}

/* Wave 16 amp: italic-gold accents now carry a permanent soft halo
   plus a stronger midpoint flare. The brand signature lands harder. */
@keyframes gold-glow {
    0%, 100% { text-shadow: 0 0 12px rgba(224, 192, 106, 0.22); }
    50%      { text-shadow: 0 0 36px rgba(224, 192, 106, 0.65), 0 0 88px rgba(224, 192, 106, 0.28); }
}

@media (prefers-reduced-motion: reduce) {
    .hero h1 em, .media-hero h1 em {
        animation: none;
    }
}

/* H1: editorial display level. Opsz 96 pulls Fraunces toward its display
   cut for sharper editorial weight. Letterspacing locked tight. */
h1 {
    font-size: clamp(36px, 5.5vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-variation-settings: "opsz" 96;
    font-weight: 500;
}

/* H2: section headline. Opsz 64. */
h2 {
    font-size: clamp(26px, 3.6vw, 40px);
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-variation-settings: "opsz" 64;
    font-weight: 500;
}

/* H3: card title / sub-section. Opsz 36. */
h3 {
    font-size: clamp(19px, 2.1vw, 22px);
    line-height: 1.22;
    letter-spacing: -0.012em;
    font-variation-settings: "opsz" 36;
    font-weight: 500;
}

h4 {
    font-size: 17px;
    line-height: 1.3;
    font-variation-settings: "opsz" 24;
    font-weight: 500;
}

p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--ink);
}

.lead {
    font-size: clamp(17px, 1.8vw, 20px);
    line-height: 1.65;
    color: var(--ink-muted);
    max-width: 680px;
}

/* Eyebrow: caption-scale caps with a hairline rule prefix.
   The hairline (via ::before) is the canvas-spec editorial signature.
   For places where the leading rule is unwanted, use .eyebrow--bare. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    /* Bumped 11px to 12px so eyebrow stays legible on phones; the
       0.22em letter-spacing was making 11px sub-comfortable below 480px. */
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 18px;
    line-height: 1.4;
}

.eyebrow::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 24px;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}

.eyebrow--bare::before { display: none; }
.eyebrow--muted { color: var(--ink-muted); }

/* Centered eyebrows (inside .section-header--center) keep the flex
   contents centred via the parent text-align: center context. */
.section-header--center .eyebrow { justify-content: center; }

/* Caption: brand-spec technical metadata. Manrope 11px 600 0.22em caps.
   Per docs/brand/03-visual-system.md Section II type scale level 6. */
.caption {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1.45;
    color: var(--ink-muted);
}

.caption--gold { color: var(--gold); }
.caption--faint { color: var(--c-ink-faint); }

/* Gold rule: the inline accent under section headers. Default keeps the
   marketing rhythm (48 x 3 gold bar). --hair variant is the canvas-spec
   editorial hairline for cinematic moments. */
.gold-rule {
    display: block;
    width: 48px;
    height: 3px;
    background: var(--gold);
    border-radius: 2px;
    margin: 0 0 28px;
}

.gold-rule--center {
    margin-inline: auto;
}

.gold-rule--hair {
    width: 80px;
    height: 1px;
    background: var(--gold);
    border-radius: 0;
    opacity: 0.6;
}

.italic-display {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
}


/* === 04. LAYOUT UTILITIES ================================== */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.container--wide {
    max-width: var(--container-wide);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.text-center {
    text-align: center;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}


/* === 05. BUTTONS =========================================== */
/* Buttons run on the locked --ease-out-q for brand-moment feedback.
   Primary hover gains a stronger gold halo. Ghost-light gains a soft
   gold-tint backdrop instead of plain rgba white. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 14px 28px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: background 0.4s var(--ease-out-q),
                border-color 0.4s var(--ease-out-q),
                color 0.4s var(--ease-out-q),
                transform 0.4s var(--ease-out-q),
                box-shadow 0.4s var(--ease-out-q);
    cursor: pointer;
    white-space: nowrap;
}

/* Navy on Gold is the locked WCAG-AA paired-use rule per docs/brand/03-visual-system.md
   Section I. Navy #1a1a2e on Gold #c9a84c gives 6.7:1 contrast (AA pass).
   White on Gold would fail (2.4:1) and breaks the brand pair rule.
   Hover darkens the gold so navy text remains compliant. */
.btn-primary {
    background: var(--gold);
    color: var(--ink-heading);
    border-color: var(--gold);
    box-shadow: 0 4px 14px rgba(201, 168, 76, 0.18);
}

.btn-primary:hover {
    background: var(--gold-hover);
    border-color: var(--gold-hover);
    color: var(--ink-heading);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(201, 168, 76, 0.32), 0 4px 10px rgba(201, 168, 76, 0.2);
}

.btn-secondary {
    background: transparent;
    color: var(--ink-heading);
    border: 1px solid var(--ink-heading);
}

.btn-secondary:hover {
    background: var(--ink-heading);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-ghost-light {
    background: transparent;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.btn-ghost-light:hover {
    background: rgba(201, 168, 76, 0.08);
    border-color: var(--gold);
    color: var(--gold-hi);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.btn-sm {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 22px;
}

.btn-arrow::after {
    content: '→';
    display: inline-block;
    transition: transform var(--duration-base) var(--ease);
    font-size: 16px;
    margin-left: 2px;
}

.btn-arrow:hover::after {
    transform: translateX(4px);
}


/* === 06. NAV =============================================== */
.nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(26, 26, 46, 0.92);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border-bottom: 1px solid rgba(201, 168, 76, 0.15);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    gap: 22px;
}

.nav-logo {
    height: 40px;
    width: auto;
    transition: opacity var(--duration-base) var(--ease);
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--paper);
    transition: opacity var(--duration-base) var(--ease);
}
.nav-brand:hover {
    opacity: 0.85;
}
.nav-brand svg {
    width: 36px;
    height: 29px;
    color: var(--gold);
    display: block;
    flex-shrink: 0;
}
.nav-brand .wordmark {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--paper);
    line-height: 1;
    font-variation-settings: "opsz" 36;
    white-space: nowrap;
}
.nav-brand .wordmark em {
    font-style: italic;
    font-weight: 400;
    color: var(--gold);
}

.nav-logo:hover {
    opacity: 0.8;
}

.nav-links {
    display: none;
    align-items: center;
    gap: 36px;
}

.nav-links a {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-on-dark);
    position: relative;
    padding: 6px 0;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--duration-base) var(--ease);
}

.nav-links a:hover {
    color: var(--gold-hi);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    transform: scaleX(1);
}

.nav-links a.active {
    color: var(--gold);
}

.nav-cta {
    display: none;
}

.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
    background: none;
    border: none;
}

/* Hide the top-bar lang-toggle on mobile (the mobile drawer has its own).
   Without this, .lang-toggle remains inline-flex inside .nav-inner and
   pushes the hamburger past the viewport edge on narrow phones. */
@media (max-width: 1023px) {
    .nav-inner > .lang-toggle {
        display: none;
    }
}

/* On the smallest phones, hide just the wordmark text from the nav-brand
   so the Vantage mark + hamburger fit comfortably inside the viewport.
   The wordmark is still rendered in the footer of every page. */
@media (max-width: 479px) {
    .nav-brand .wordmark {
        display: none;
    }
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text-on-dark);
    border-radius: 2px;
    transition: transform var(--duration-base) var(--ease),
                opacity var(--duration-base) var(--ease);
}

.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

.nav-mobile {
    display: none;
    position: fixed;
    top: var(--nav-height);
    inset-inline: 0;
    bottom: 0;
    /* Explicit fill so the menu paints over the full viewport area, not
       just the content height. Some Chromium versions collapse a flex
       container to content-height when only top/bottom inset is set. */
    height: calc(100dvh - var(--nav-height));
    min-height: calc(100vh - var(--nav-height));
    background: rgb(13, 13, 26);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 999;
    padding: 48px 24px;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    overflow-y: auto;
}

.nav-mobile.active {
    display: flex;
}

.nav-mobile a {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-on-dark);
}

.nav-mobile a:hover {
    color: var(--gold);
}


/* === 07. HERO VARIANTS =====================================
   Heroes are the brand's first impression. Each variant gets:
   - layered radial gradients for atmospheric depth (not flat colour)
   - ambient pulse blob behind the headline (dark variants)
   - grain overlay scoped to the hero surface
   - content layered above via .hero-inner { z-index: 1 }
   The canvas-spec atmosphere lives here. Per docs/brand/03-visual-system.md
   Section IV (motion principles) + Section I (palette paired-use rules). */
.hero {
    position: relative;
    overflow: hidden;
    padding: 80px 0 100px;
}

.hero--dark {
    background:
        radial-gradient(ellipse 60% 50% at 50% 30%, rgba(201, 168, 76, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(91, 122, 140, 0.10) 0%, transparent 50%),
        linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 60%, #1f1f33 100%);
    color: var(--white);
}

.hero--dark::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 720px;
    height: 720px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(201, 168, 76, 0.18) 0%, transparent 60%);
    filter: blur(40px);
    animation: ambient-pulse 6s ease-in-out infinite;
    z-index: 0;
}

.hero--dark::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--grain-tight);
    opacity: 0.4;
    mix-blend-mode: overlay;
    z-index: 0;
}

.hero--dark-image {
    background:
        linear-gradient(135deg, rgba(26, 26, 46, 0.72) 0%, rgba(13, 13, 26, 0.85) 100%);
    background-size: cover;
    background-position: center;
    color: var(--white);
}

.hero--dark-image::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 720px;
    height: 720px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(201, 168, 76, 0.14) 0%, transparent 60%);
    filter: blur(50px);
    animation: ambient-pulse 6s ease-in-out infinite;
    z-index: 0;
}

.hero--dark-image::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--grain-tight);
    opacity: 0.35;
    mix-blend-mode: overlay;
    z-index: 0;
}

.hero--cream {
    background:
        radial-gradient(ellipse 60% 50% at 100% 0%, rgba(201, 168, 76, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 0% 100%, rgba(235, 231, 220, 0.45) 0%, transparent 50%),
        linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
    color: var(--ink-heading);
}

.hero--cream::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -10%;
    width: 70%;
    height: 130%;
    background: radial-gradient(ellipse at top right, rgba(201, 168, 76, 0.12) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}

/* Lock content above all atmosphere layers. */
.hero .hero-inner {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .hero--dark::before,
    .hero--dark-image::before {
        animation: none;
    }
}

.hero-inner {
    position: relative;
    max-width: 820px;
}

.hero--center .hero-inner {
    margin-inline: auto;
    text-align: center;
}

.hero h1 {
    color: inherit;
    margin-bottom: 24px;
    font-weight: 600;
}

.hero--dark h1, .hero--dark-image h1 {
    color: var(--white);
}

.hero-lead {
    font-size: clamp(17px, 2vw, 20px);
    line-height: 1.65;
    max-width: 620px;
    margin-bottom: 36px;
}

.hero--dark .hero-lead,
.hero--dark-image .hero-lead,
.hero-home .hero-lead,
.hero-services .hero-lead,
.hero-howework .hero-lead {
    color: rgba(255, 255, 255, 0.78);
}

.hero--cream .hero-lead {
    color: var(--ink-muted);
}

.hero--center .hero-lead {
    margin-inline: auto;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero--center .hero-actions {
    justify-content: center;
}

.hero-scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    animation: pulse 2.5s ease-in-out infinite;
}

.hero-credentials {
    margin-top: 36px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 20px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--gold);
}

.hero-credentials span {
    display: inline-flex;
    align-items: center;
}

.hero-credentials span:not(:last-child)::after {
    content: '·';
    margin-left: 20px;
    color: rgba(201, 168, 76, 0.5);
    font-size: 22px;
    line-height: 1;
}

.hero--center .hero-credentials {
    justify-content: center;
}


/* === 08. SECTION TONES =====================================
   Every section gets atmospheric layering. Light variants get a barely
   perceptible warm radial; dark variants get the full cinematic treatment
   (multi-layer radials + grain overlay + locked dark gradient).
   Per docs/brand/03-visual-system.md Section IV.3 (ambient glow). */
.section {
    padding: 88px 0 96px;
    position: relative;
}

/* Light variants: subtle warm atmosphere, almost imperceptible.
   Keeps the reading surface calm but never flat. */
.section--paper {
    background:
        radial-gradient(ellipse 90% 50% at 50% 0%, rgba(201, 168, 76, 0.035) 0%, transparent 55%),
        var(--paper);
}

/* Wave 17: stronger cream warmth so the cadence (paper to cream to cream-deep)
   reads as distinct surfaces, not a continuous beige wash. */
.section--cream {
    background:
        radial-gradient(ellipse 70% 50% at 100% 30%, rgba(201, 168, 76, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse 60% 60% at 0% 100%, rgba(235, 231, 220, 0.5) 0%, transparent 55%),
        var(--cream);
}

.section--cream-deep {
    background:
        radial-gradient(ellipse 70% 50% at 0% 0%, rgba(26, 26, 46, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 80% 50% at 100% 100%, rgba(201, 168, 76, 0.06) 0%, transparent 55%),
        var(--cream-deep);
}

.section--white { background: var(--white); }
.section--grey  { background: var(--grey-50); }

/* Dark variants: full cinematic atmosphere. Multi-layer radials, grain
   overlay via ::before, ensure descendants stack via .container { z-index }
   so the atmosphere never obscures content. Wave 16 bump: stronger
   gold + slate radials for the magic the canvases promised. */
.section--navy {
    background:
        radial-gradient(ellipse 60% 50% at 20% 30%, rgba(201, 168, 76, 0.16) 0%, transparent 60%),
        radial-gradient(ellipse 70% 60% at 80% 70%, rgba(91, 122, 140, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(13, 13, 26, 0.35) 100%),
        linear-gradient(180deg, var(--navy) 0%, #1f1f33 100%);
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
}

.section--navy::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--grain-tight);
    opacity: 0.4;
    mix-blend-mode: overlay;
    z-index: 0;
}

/* Wave 21: bottom edge lifted from near-black (#08080b) to navy so the
   transition into the footer reads as an editorial step down, not as
   two near-identical dark slabs stacked. Padding also tightened so the
   content density (headline + lead + buttons) earns the section height. */
.section--deep {
    background:
        radial-gradient(ellipse 70% 80% at 50% 50%, rgba(201, 168, 76, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 0% 0%, rgba(91, 122, 140, 0.16) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 100% 100%, rgba(201, 168, 76, 0.12) 0%, transparent 55%),
        linear-gradient(180deg, #15151c 0%, var(--navy-deep) 50%, var(--navy) 100%);
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    padding: clamp(72px, 9vw, 112px) 0;
}

/* Animated ambient blob inside deep sections (the cinematic moment).
   Sits behind content via the section's stacking context. */
.section--deep::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 700px;
    height: 700px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at center, rgba(201, 168, 76, 0.16) 0%, transparent 60%);
    filter: blur(60px);
    pointer-events: none;
    animation: ambient-pulse 8s ease-in-out infinite;
    z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
    .section--deep::after { animation: none; }
}

.section--deep::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--grain-tight);
    opacity: 0.4;
    mix-blend-mode: overlay;
    z-index: 0;
}

/* Lock section content above the atmospheric ::before layers. */
.section--navy > .container,
.section--deep > .container {
    position: relative;
    z-index: 1;
}

.section--navy h1, .section--navy h2, .section--navy h3,
.section--deep h1, .section--deep h2, .section--deep h3 {
    color: var(--white);
}

.section--navy .lead,
.section--deep .lead {
    color: rgba(255, 255, 255, 0.65);
}

.section-header {
    max-width: 720px;
    margin-bottom: 56px;
}

.section-header--center {
    margin-inline: auto;
    text-align: center;
}

.section-header h2 {
    margin-bottom: 16px;
}


/* === 09. CARDS =============================================
   Light cards get a subtle paper-to-cream gradient (never flat), hover
   lift uses the locked --ease-out-q with multi-layer cinematic shadow.
   Dark cards (.card--dark) use a deep linear gradient bg-1 to bg-0.
   Per docs/brand/03-visual-system.md Section IV (motion principles). */
.card {
    position: relative;
    background: linear-gradient(180deg, var(--white) 0%, #fbfaf5 100%);
    border-radius: var(--radius-md);
    padding: 28px 28px 30px;
    transition: box-shadow 0.45s var(--ease-out-q),
                transform 0.45s var(--ease-out-q),
                border-color 0.45s var(--ease-out-q);
    border: 1px solid rgba(26, 26, 46, 0.06);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--shadow-cinematic);
    transform: translateY(-4px);
    border-color: var(--gold-border);
}

.card--accent {
    border-left: 4px solid var(--gold);
}

/* Editorial left-accent: hairline gold rule fading down. The canvas
   swarm-lane pattern (3px gold gradient from top to transparent). */
.card--rule-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--gold) 0%, transparent 100%);
}

.card--dark {
    background: linear-gradient(180deg, var(--c-bg-1) 0%, var(--c-bg-0) 100%);
    border: 1px solid var(--c-line);
    color: rgba(255, 255, 255, 0.85);
    box-shadow: none;
}

.card--dark:hover {
    background: linear-gradient(180deg, var(--c-bg-2) 0%, var(--c-bg-1) 100%);
    border-color: var(--gold-border);
    transform: translateY(-3px);
    box-shadow: var(--shadow-deep);
}

/* Italic-gold inside dark cards reads as Gold Hi for contrast. */
.card--dark em, .card--dark .italic-display { color: var(--gold-hi); }

.card-number {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.card h3 {
    font-size: 22px;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.card--dark h3 {
    color: var(--gold);
}

.card p {
    font-size: 15px;
    color: var(--ink-muted);
    line-height: 1.7;
}

.card--dark p {
    color: rgba(255, 255, 255, 0.72);
}

.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.card-grid--3 {
    grid-template-columns: 1fr;
    gap: 20px;
}


/* === 10. STATS CALLOUTS ==================================== */
.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
}

.stats--4 {
    grid-template-columns: repeat(2, 1fr);
}

.stat {
    text-align: center;
    position: relative;
}

.stat-number {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 500;
    color: var(--ink-heading);
    line-height: 1;
    letter-spacing: -0.025em;
    margin-bottom: 8px;
    font-variation-settings: "opsz" 96;
}

.section--navy .stat-number,
.section--deep .stat-number,
.section--dark .stat-number {
    color: var(--gold);
}

.stat-label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--ink-muted);
    line-height: 1.5;
}

.section--navy .stat-label,
.section--deep .stat-label,
.section--dark .stat-label {
    color: rgba(255, 255, 255, 0.6);
}

.stat--accent .stat-number {
    color: var(--gold);
}


/* === 11. CASE ITEMS ======================================== */
.case-item {
    padding: 32px 0;
    border-bottom: 1px solid rgba(26, 26, 46, 0.08);
}

.case-item:first-child {
    padding-top: 8px;
}

.case-item:last-child {
    border-bottom: none;
}

.case-meta {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

.case-item h3 {
    font-size: clamp(20px, 2.4vw, 26px);
    margin-bottom: 14px;
    letter-spacing: -0.01em;
}

.case-item p {
    font-size: 16px;
    color: var(--ink);
    line-height: 1.75;
    max-width: 780px;
}

.case-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 14px;
    background: var(--gold-tint);
    border-radius: var(--radius-sm);
    border: 1px solid var(--gold-border);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-heading);
}

.case-stat strong {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--gold);
}


/* === 12. TECH GRID ========================================= */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 32px 28px;
}

.tech-category h4 {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

.tech-category p {
    font-size: 14px;
    color: var(--ink-muted);
    line-height: 1.7;
}

.capability-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: var(--ink-muted);
    background: var(--gold-tint);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gold-border);
    transition: all var(--duration-base) var(--ease);
}

.capability-tag:hover {
    background: var(--gold);
    color: var(--white);
    border-color: var(--gold);
}

.capability-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 20px;
}


/* === 13. TESTIMONIALS ====================================== */
.testimonial {
    max-width: 780px;
    margin-inline: auto;
    text-align: center;
    padding: 16px;
}

.testimonial-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(22px, 3.2vw, 30px);
    line-height: 1.5;
    color: var(--ink-heading);
    margin-bottom: 32px;
    position: relative;
}

.section--navy .testimonial-quote,
.section--deep .testimonial-quote {
    color: var(--white);
}

.testimonial-quote::before {
    content: '\201C';
    display: block;
    font-size: 80px;
    color: var(--gold);
    line-height: 0.5;
    margin-bottom: 20px;
}

.testimonial-attribution {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.section--navy .testimonial-attribution,
.section--deep .testimonial-attribution {
    color: rgba(255, 255, 255, 0.55);
}


/* === 14. METHOD LIST ======================================= */
.method-list {
    max-width: 760px;
}

.method-list li {
    position: relative;
    padding: 20px 0 20px 44px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink);
    border-bottom: 1px solid rgba(26, 26, 46, 0.06);
}

.method-list li:last-child {
    border-bottom: none;
}

.method-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 30px;
    width: 24px;
    height: 2px;
    background: var(--gold);
}

.method-list strong {
    color: var(--ink-heading);
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: -0.01em;
}


/* === 15. CAPABILITY BLOCKS ================================= */
.capability-block {
    padding: 32px 0;
    border-bottom: 1px solid rgba(26, 26, 46, 0.08);
}

.capability-block:last-child {
    border-bottom: none;
}

.capability-block h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.capability-block p {
    font-size: 16px;
    color: var(--ink);
    line-height: 1.75;
    max-width: 780px;
}


/* === 16. ENGAGEMENT CARDS (dark bg) ========================
   Cinematic gradient bg + cinematic motion. Used on dark sections.
   Gold-Hi accents on h3 (locked rule for italic-gold on Navy). */
.engagement-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.engagement-card {
    position: relative;
    padding: 28px 30px;
    background: linear-gradient(180deg, var(--c-bg-1) 0%, var(--c-bg-0) 100%);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-md);
    transition: background 0.45s var(--ease-out-q),
                border-color 0.45s var(--ease-out-q),
                transform 0.45s var(--ease-out-q),
                box-shadow 0.45s var(--ease-out-q);
    overflow: hidden;
}

.engagement-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--gold) 0%, transparent 100%);
    opacity: 0.7;
    transition: opacity 0.45s var(--ease-out-q);
}

.engagement-card:hover {
    background: linear-gradient(180deg, var(--c-bg-2) 0%, var(--c-bg-1) 100%);
    border-color: var(--gold-border);
    transform: translateY(-3px);
    box-shadow: var(--shadow-deep);
}

.engagement-card:hover::before { opacity: 1; }

.engagement-card h3 {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--gold-hi);
    margin-bottom: 8px;
    letter-spacing: -0.005em;
    font-variation-settings: "opsz" 36;
}

.engagement-card h3 em { color: var(--paper); font-style: italic; }

.engagement-card p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.7;
}


/* === 17. FOOTER ============================================
   Cinematic close: layered radial atmosphere + grain overlay + subtle
   ambient gold blob behind content. Top border becomes a gradient
   hairline (gold fade) instead of a flat 2px rule. */
/* Wave 21: footer starts at navy-deep (deeper than the CTA above which
   ends at navy) so the seam reads as a step down into the colophon.
   The horizon line below adds an explicit gold hairline at the boundary. */
.footer {
    position: relative;
    border-top: 1px solid rgba(201, 168, 76, 0.28);
    background:
        radial-gradient(ellipse 70% 80% at 50% 0%, rgba(201, 168, 76, 0.28) 0%, transparent 65%),
        radial-gradient(ellipse 80% 60% at 100% 100%, rgba(91, 122, 140, 0.14) 0%, transparent 50%),
        radial-gradient(ellipse 40% 40% at 0% 50%, rgba(201, 168, 76, 0.10) 0%, transparent 55%),
        linear-gradient(180deg, var(--navy-deep) 0%, #08080b 100%);
    padding: 64px 0 48px;
    color: var(--ink-subtle);
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--grain-tight);
    opacity: 0.35;
    mix-blend-mode: overlay;
    z-index: 0;
}

/* Ambient gold blob behind centred footer content, slow pulse. */
.footer::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -120px;
    width: 800px;
    height: 400px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.22) 0%, transparent 65%);
    filter: blur(30px);
    pointer-events: none;
    z-index: 0;
    animation: ambient-pulse-slow 10s ease-in-out infinite;
}

@keyframes ambient-pulse-slow {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1;   }
}

@media (prefers-reduced-motion: reduce) {
    .footer::after { animation: none; }
}

/* Top accent hairline (gradient gold fade) draws the eye to footer. */
.footer > .container {
    position: relative;
    z-index: 1;
}

/* Wave 21: extended horizon hairline. Was 320px clipped; now spans the
   container width with a tighter peak so the seam reads as an editorial
   horizon, not a tucked-away tick mark. */
.footer > .container::before {
    content: '';
    position: absolute;
    top: -54px;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(201, 168, 76, 0.4) 20%, var(--gold) 50%, rgba(201, 168, 76, 0.4) 80%, transparent 100%);
    opacity: 0.85;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.footer-logo {
    height: 32px;
    width: auto;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
}

.footer-links a {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-on-dark);
}

.footer-links a:hover {
    color: var(--gold);
}

.footer-email {
    font-size: 14px;
    color: var(--text-on-dark);
}

.footer-email a {
    color: var(--gold);
}

.footer-email a:hover {
    color: var(--gold-hi);
}

.footer-copy {
    font-size: 12px;
    color: var(--ink-muted);
    margin-top: 8px;
}

/* Locked brand footer ritual stamp. Per docs/brand/01-foundation.md
   Section V (Tagline System), this is the ceremonial sign-off mark
   applied to every deliverable. 2023 is the founding year. */
.footer-ritual {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 6px;
}

.footer-ritual-dot {
    color: var(--gold);
    margin: 0 6px;
    font-weight: 700;
}


/* === 17a. HERO ATMOSPHERE (cinematic surface utility) =====
   Inject <div class="hero-atmosphere"> as the first child of any hero
   (or section) to add the tight grain texture overlay. Add modifier
   --with-blob for the animated ambient gold blob behind the headline.
   --warm uses a warm tint blob (light heroes); --slate uses a cool
   slate tint blob (for layered dark heroes). z-index 0 keeps it behind
   the .hero-inner content (which is locked to z-index 1).
   Per docs/brand/03-visual-system.md Section IV.3 + IV.4. */
.hero-atmosphere {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: var(--grain-tight);
    mix-blend-mode: overlay;
    opacity: 0.5;
}

/* Primary ambient blob: stronger gold radial. Positioned 35% from the
   left so it sits behind the italic-gold accent on most hero copy
   alignments (left-aligned, the italic word usually lands centre-left). */
.hero-atmosphere--with-blob::before {
    content: '';
    position: absolute;
    left: 35%;
    top: 50%;
    width: 820px;
    height: 820px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at center, rgba(201, 168, 76, 0.32) 0%, rgba(201, 168, 76, 0.08) 35%, transparent 65%);
    filter: blur(50px);
    animation: ambient-pulse 6s ease-in-out infinite;
    mix-blend-mode: normal;
}

/* Secondary slate blob: cool counterpoint, sits opposite the gold so the
   hero gets compositional depth. Add via .hero-atmosphere--dual. */
.hero-atmosphere--dual::after {
    content: '';
    position: absolute;
    right: 8%;
    top: 18%;
    width: 580px;
    height: 580px;
    background: radial-gradient(circle at center, rgba(91, 122, 140, 0.22) 0%, transparent 60%);
    filter: blur(60px);
    animation: ambient-pulse 8s ease-in-out infinite;
    animation-delay: 1.5s;
    mix-blend-mode: normal;
    pointer-events: none;
}

.hero-atmosphere--warm::before {
    background: radial-gradient(circle at center, rgba(201, 168, 76, 0.12) 0%, transparent 65%);
    filter: blur(60px);
}

.hero-atmosphere--slate::before {
    background: radial-gradient(circle at center, rgba(91, 122, 140, 0.18) 0%, transparent 60%);
}

@media (prefers-reduced-motion: reduce) {
    .hero-atmosphere--with-blob::before,
    .hero-atmosphere--warm::before,
    .hero-atmosphere--slate::before,
    .hero-atmosphere--dual::after {
        animation: none;
    }
}


/* === 17b. HERO MARK (vantage motion utility) ===============
   Use on inline Vantage SVGs at hero scale. Default state has a soft gold
   drop-shadow halo; .hero-mark--rise adds the 4s rise/glow loop.
   Per docs/brand/03-visual-system.md Section IV.2 (vantage rise). */
.hero-mark {
    display: inline-block;
    color: var(--gold);
    filter: drop-shadow(0 0 28px rgba(224, 192, 106, 0.35));
    transition: filter 0.6s var(--ease-out-q);
}

.hero-mark svg {
    display: block;
    width: 100%;
    height: auto;
    color: currentColor;
}

.hero-mark--rise {
    animation: vantage-rise-loop 4s ease-in-out infinite;
}

.hero-mark--white { color: var(--paper); }
.hero-mark--navy  { color: var(--navy); }


/* === 18. MOTION ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--ease-out),
                transform 0.7s var(--ease-out);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s var(--ease-out),
                transform 0.7s var(--ease-out);
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.15s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.25s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.35s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.45s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.55s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(7) { transition-delay: 0.65s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(8) { transition-delay: 0.75s; opacity: 1; transform: translateY(0); }

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal, .reveal-stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* === 19. RESPONSIVE ======================================== */
@media (min-width: 600px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .engagement-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 768px) {
    .hero {
        padding: 112px 0 128px;
    }
    .section {
        padding: 112px 0 120px;
    }
    .card-grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .engagement-grid {
        gap: 24px;
    }
}

@media (min-width: 1024px) {
    .nav-links {
        display: flex;
    }
    .nav-cta {
        display: block;
    }
    .nav-toggle {
        display: none;
    }
    .container {
        padding: 0 var(--gutter-desktop);
    }
}

@media (max-width: 480px) {
    body {
        font-size: 15px;
    }
    .hero {
        padding: 64px 0 72px;
    }
    .section {
        padding: 64px 0 72px;
    }
    .btn {
        padding: 13px 24px;
    }
}


/* === 20. LANGUAGE TOGGLE (Edition Marker) ================= */
.lang-toggle {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 14px;
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid rgba(201, 168, 76, 0.4);
    border-radius: 999px;
    background: rgba(201, 168, 76, 0.07);
    transition: border-color var(--duration-base) var(--ease), background var(--duration-base) var(--ease);
}

.lang-toggle:hover {
    border-color: rgba(201, 168, 76, 0.65);
    background: rgba(201, 168, 76, 0.12);
}

.lang-btn {
    display: inline-block;
    position: relative;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    padding: 2px 3px;
    transition: color var(--duration-base) var(--ease);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.lang-btn:hover {
    color: rgba(255, 255, 255, 0.95);
}

.lang-btn:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 4px;
    border-radius: 2px;
}

.lang-btn--active {
    color: var(--gold);
    font-style: italic;
    font-weight: 600;
    cursor: default;
}

.lang-btn--active:hover {
    color: var(--gold);
}

.lang-btn--active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 2px;
    right: 2px;
    height: 1px;
    background: var(--gold);
    transform-origin: left center;
    animation: lang-swell 0.5s var(--ease-out);
}

@keyframes lang-swell {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.lang-divider {
    color: rgba(201, 168, 76, 0.45);
    font-size: 16px;
    line-height: 1;
    user-select: none;
    transform: translateY(-1px);
}

.nav-mobile .lang-toggle {
    margin-top: 24px;
    align-self: center;
    font-size: 15px;
}