/* @font-face rules injected by scripts/fetch-fonts.mjs (Task 0.3) */
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/caveat-400-700-normal-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/caveat-400-700-normal-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/caveat-400-700-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/caveat-400-700-normal-latin.woff2') format('woff2');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:'Hanken Grotesk';font-style:normal;font-weight:300 800;font-display:swap;src:url('/assets/fonts/hanken-grotesk-300-800-normal-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 800;font-display:swap;src:url('/assets/fonts/hanken-grotesk-300-800-normal-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 800;font-display:swap;src:url('/assets/fonts/hanken-grotesk-300-800-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 800;font-display:swap;src:url('/assets/fonts/hanken-grotesk-300-800-normal-latin.woff2') format('woff2');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:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-400-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-400-italic-latin.woff2') format('woff2');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:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-400-normal-latin.woff2') format('woff2');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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jetbrains-mono-400-normal-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jetbrains-mono-400-normal-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jetbrains-mono-400-normal-greek.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jetbrains-mono-400-normal-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jetbrains-mono-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jetbrains-mono-400-normal-latin.woff2') format('woff2');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:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jetbrains-mono-500-normal-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jetbrains-mono-500-normal-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jetbrains-mono-500-normal-greek.woff2') format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jetbrains-mono-500-normal-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jetbrains-mono-500-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jetbrains-mono-500-normal-latin.woff2') format('woff2');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:'Newsreader';font-style:italic;font-weight:300 700;font-display:swap;src:url('/assets/fonts/newsreader-300-700-italic-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 700;font-display:swap;src:url('/assets/fonts/newsreader-300-700-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 700;font-display:swap;src:url('/assets/fonts/newsreader-300-700-italic-latin.woff2') format('woff2');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:'Newsreader';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/newsreader-300-700-normal-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/newsreader-300-700-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/newsreader-300-700-normal-latin.woff2') format('woff2');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;}


    /* ─── Tokens ─────────────────────────────────────────────────── */
    :root{
      /* Brand palette — Cinematic Dark (default) */
      --ink-0: #07050f;     /* deepest */
      --ink-1: #0e0a1f;
      --ink-2: #1a132f;
      --ink-3: #2a2042;
      --navy:  #012351;
      --purple:#6f1c8c;
      --purple-soft:#a25dc4;
      --purple-glow:#d6a9f0;
      --warm:  #ffd9a8;
      --warm-soft:#fff4e0;
      --cream: #f5f1ea;
      --paper: #ffffff;
      --text:  #f1ece3;     /* on dark */
      --text-mute: #c3bad6;
      --line:  rgba(255,255,255,.10);
      --line-strong: rgba(255,255,255,.22);

      --bg: var(--ink-0);
      --fg: var(--text);
      --accent: var(--purple-glow);

      --serif: 'Instrument Serif', 'Newsreader', Georgia, serif;
      --sans:  'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
      --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
      --script:'Caveat', cursive;

      --maxw: 1280px;
      --pad-x: clamp(24px, 5vw, 88px);
      --section-y: clamp(80px, 11vw, 160px);

      --radius: 14px;
      --radius-lg: 22px;

      --ease: cubic-bezier(.22,.61,.36,1);
    }

    /* Warm Editorial palette */
    [data-palette="warm"]{
      --ink-0:#1a1024; --ink-1:#241432; --ink-2:#2f1c40; --ink-3:#3d2552;
      --warm:#ffc987; --warm-soft:#ffe8c8;
      --purple-glow:#e6b8ff;
      --text:#f4ecdf; --text-mute:#cbbcd6;
      --accent: var(--warm);
    }
    /* Light Premium palette */
    [data-palette="light"]{
      --bg:#f3eee5; --fg:#1a1230;
      --ink-0:#f3eee5; --ink-1:#ebe4d6; --ink-2:#e1d8c5; --ink-3:#d6cab2;
      --text:#1a1230; --text-mute:#4a3f63;
      --line:rgba(26,18,48,.12); --line-strong:rgba(26,18,48,.28);
      --purple-glow:#6f1c8c;
      --accent:#6f1c8c;
    }

    /* ─── Reset / base ───────────────────────────────────────────── */
    *,*::before,*::after{box-sizing:border-box}
    html,body{margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      background: var(--bg);
      color: var(--fg);
      font-family: var(--sans);
      font-weight: 400;
      font-size: 16.5px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
    }
    img{display:block;max-width:100%}
    a{color:inherit;text-decoration:none}
    button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

    /* ─── Layout ─────────────────────────────────────────────────── */
    .wrap{max-width: var(--maxw); margin:0 auto; padding: 0 var(--pad-x)}
    section{position:relative}

    /* ─── Type ───────────────────────────────────────────────────── */
    .display{
      font-family: var(--serif);
      font-weight: 400;
      letter-spacing: -.015em;
      line-height: 1.02;
      text-wrap: balance;
      font-feature-settings: "ss01","liga";
    }
    .display em{font-style: italic; color: var(--accent); font-weight: 400}
    .eyebrow{
      font-family: var(--mono);
      font-size: 11.5px;
      font-weight: 500;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--text-mute);
    }
    .eyebrow .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);vertical-align:middle;margin-right:10px;box-shadow:0 0 12px var(--accent)}
    .lede{
      font-size: clamp(17px, 1.4vw, 20px);
      line-height: 1.55;
      color: var(--text-mute);
      max-width: 56ch;
      text-wrap: pretty;
    }

    /* ─── Buttons ────────────────────────────────────────────────── */
    .btn{
      display:inline-flex; align-items:center; gap:10px;
      padding:14px 22px;
      border-radius: 999px;
      font-family: var(--sans); font-weight:500; font-size:14.5px;
      letter-spacing:.01em;
      transition: all .25s var(--ease);
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .btn-primary{
      background: var(--paper); color: #07050f;
      box-shadow: 0 0 0 0 rgba(214,169,240,0);
    }
    .btn-primary:hover{transform: translateY(-1px); box-shadow: 0 18px 40px -12px rgba(214,169,240,.45)}
    .btn-ghost{
      color: var(--fg); border-color: var(--line-strong);
      background: rgba(255,255,255,.02);
      backdrop-filter: blur(6px);
    }
    .btn-ghost:hover{background: rgba(255,255,255,.06); border-color: var(--accent); color: var(--accent)}
    .btn .arrow{transition: transform .25s var(--ease)}
    .btn:hover .arrow{transform: translateX(3px)}

    [data-palette="light"] .btn-primary{background:#1a1230; color:#f3eee5}
    [data-palette="light"] .btn-ghost{background:rgba(26,18,48,.03); color:var(--fg)}
    [data-palette="light"] .btn-ghost:hover{background:rgba(26,18,48,.06); border-color:var(--accent); color:var(--accent)}

    /* ─── Nav ────────────────────────────────────────────────────── */
    .nav{
      position: sticky; top:0; z-index: 50;
      padding: 18px 0;
      backdrop-filter: blur(14px) saturate(160%);
      -webkit-backdrop-filter: blur(14px) saturate(160%);
      background: color-mix(in oklab, var(--bg) 70%, transparent);
      border-bottom: 1px solid transparent;
      transition: border-color .3s var(--ease), background .3s var(--ease);
    }
    .nav.scrolled{border-bottom-color: var(--line)}
    .nav-inner{display:flex; align-items:center; justify-content:space-between; gap: 32px}
    .brand{display:flex; align-items:center; gap:12px; min-width: 0}
    .brand svg{width:28px; height:auto; flex:none}
    /* Logo glow — cold white, constant hue */
    .brand img{
      filter: drop-shadow(0 0 14px #ffffff)
              drop-shadow(0 0 30px #e6f0ff)
              drop-shadow(0 0 52px #d4e6ff);
      transition: filter .35s var(--ease);
    }
    @media (prefers-reduced-motion: no-preference){
      .brand img{animation: logoGlow 4.5s var(--ease) infinite}
    }
    @keyframes logoGlow{
      0%, 100%{filter: drop-shadow(0 0 12px #ffffff)
                       drop-shadow(0 0 24px #e6f0ff)
                       drop-shadow(0 0 40px #d4e6ff)}
      50%{filter: drop-shadow(0 0 24px #ffffff)
                  drop-shadow(0 0 50px #eaf3ff)
                  drop-shadow(0 0 78px #d4e6ff)}
    }
    .brand:hover img{
      filter: drop-shadow(0 0 28px #ffffff)
              drop-shadow(0 0 58px #eaf3ff)
              drop-shadow(0 0 92px #d4e6ff);
      animation-play-state: paused;
    }
    [data-palette="light"] .brand img{
      filter: drop-shadow(0 0 8px color-mix(in oklab, var(--purple) 22%, transparent));
      animation: none;
    }
    .brand .name{font-family: var(--serif); font-size: 22px; letter-spacing:.02em; font-weight: 500}
    .brand .name em{font-style: italic; color: var(--accent)}
    .nav-links{display:flex; align-items:center; gap: 32px}
    .nav-links a{
      font-size: 14px; color: var(--text-mute);
      position: relative; padding: 4px 0;
      transition: color .2s var(--ease);
    }
    .nav-links a:hover{color: var(--fg)}
    .nav-links a::after{
      content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
      background: var(--accent); transform: scaleX(0); transform-origin: left;
      transition: transform .3s var(--ease);
    }
    .nav-links a:hover::after{transform: scaleX(1)}
    @media (max-width: 820px){
      .nav-links{display:none}
    }

    /* ─── Hero ───────────────────────────────────────────────────── */
    .hero{padding: clamp(48px, 7vw, 90px) 0 clamp(80px, 9vw, 140px); position:relative; overflow:hidden}
    .hero::before{
      content:""; position:absolute; inset:auto -10% -40% -10%; height: 60%;
      background: radial-gradient(ellipse at 70% 100%, color-mix(in oklab, var(--purple-glow) 25%, transparent), transparent 60%);
      pointer-events:none; z-index:0;
    }
    .hero-grid{
      display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 5vw, 80px);
      align-items: center; position: relative; z-index: 1;
    }
    .hero[data-layout="full"] .hero-grid{grid-template-columns: 1fr; text-align: left}
    .hero[data-layout="full"] .hero-image-col{display:none}
    .hero[data-layout="full"] .hero-bg-image{display:block}
    @media (max-width: 900px){
      .hero-grid{grid-template-columns: 1fr}
      .hero-image-col{order:-1}
    }

    .hero h1{
      font-size: clamp(48px, 7.2vw, 104px);
      margin: 18px 0 28px;
    }
    .hero .lede{margin: 0 0 36px}
    .hero-ctas{display:flex; gap: 14px; flex-wrap: wrap}

    .hero-pillars{
      margin-top: clamp(56px, 7vw, 96px);
      display:grid; grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border-top: 1px solid var(--line);
      position: relative; z-index: 1;
    }
    .pillar{
      padding: 22px 22px 22px 0;
      border-right: 1px solid var(--line);
      display:flex; flex-direction: column; gap: 8px;
    }
    .pillar:last-child{border-right: 0}
    .pillar .num{
      font-family: var(--mono); font-size: 11px; letter-spacing: .15em;
      color: var(--accent);
    }
    .pillar .label{font-family: var(--serif); font-size: 21px; line-height: 1.15}
    @media (max-width: 720px){
      .hero-pillars{grid-template-columns: 1fr 1fr}
      .pillar:nth-child(2){border-right:0}
    }

    /* Hero image with luminous treatment */
    .hero-image-col{position: relative}
    .hero-image-frame{
      position:relative;
      aspect-ratio: 3/4;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--ink-2);
      box-shadow:
        0 1px 0 rgba(255,255,255,.06) inset,
        0 60px 120px -40px rgba(0,0,0,.6),
        0 0 80px -20px color-mix(in oklab, var(--purple-glow) 40%, transparent);
    }
    .hero-image-frame img{
      width: 100%; height: 122%; object-fit: cover; object-position: 60% 40%;
      position: relative; top: -11%;
      filter: contrast(1.02) saturate(1.05);
      will-change: transform;
    }
    /* Luminous overlay accent — staircase glow boost */
    .hero-image-frame::after{
      content:""; position:absolute; inset: 0;
      background:
        radial-gradient(ellipse 50% 35% at 78% 18%, color-mix(in oklab, var(--warm) 35%, transparent), transparent 70%),
        linear-gradient(180deg, transparent 60%, color-mix(in oklab, var(--ink-0) 50%, transparent));
      pointer-events:none;
      mix-blend-mode: screen;
    }
    /* Caption tag floating over the image */
    .hero-tag{
      position:absolute; left: 18px; bottom: 18px;
      display:inline-flex; align-items:center; gap: 8px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(10,7,25,.55);
      backdrop-filter: blur(10px);
      border: 1px solid var(--line-strong);
      font-family: var(--mono); font-size: 11px; letter-spacing:.14em; text-transform: uppercase;
      color: var(--text);
    }
    .hero-tag .pulse{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation: pulse 2.2s var(--ease) infinite}
    @keyframes pulse{
      0%{box-shadow:0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent)}
      70%{box-shadow:0 0 0 10px transparent}
      100%{box-shadow:0 0 0 0 transparent}
    }

    /* Full-bleed variant */
    .hero-bg-image{
      display:none;
      position:absolute; inset: 0; z-index: 0;
      overflow:hidden;
    }
    .hero-bg-image img{
      width:100%; height:100%; object-fit: contain; object-position: right center;
      opacity:.6;
    }
    @media (max-width: 900px){
      .hero-bg-image img{object-fit: cover; object-position: 70% 30%; opacity:.35}
    }
    .hero-bg-image::after{
      content:""; position:absolute; inset:0;
      background: linear-gradient(90deg, var(--bg) 30%, color-mix(in oklab, var(--bg) 50%, transparent) 55%, transparent 80%),
                  linear-gradient(180deg, transparent 70%, var(--bg) 100%);
    }
    .hero[data-layout="full"] .hero-grid{min-height: 78vh; align-items: end; padding-bottom: 40px}
    .hero[data-layout="full"]::before{display:none}

    /* ─── Section header ─────────────────────────────────────────── */
    .section{padding: var(--section-y) 0; position: relative}
    .section-head{display:grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 5vw, 80px); align-items:end; margin-bottom: clamp(48px, 6vw, 72px)}
    @media (max-width: 820px){.section-head{grid-template-columns: 1fr; gap: 18px}}
    .section-head h2{
      font-size: clamp(36px, 5vw, 64px);
      margin: 14px 0 0;
    }
    .section-head .intro{color: var(--text-mute); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; max-width: 60ch; text-wrap: pretty}

    /* ─── Services ───────────────────────────────────────────────── */
    .services{background: var(--ink-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
    [data-palette="light"] .services{background: var(--ink-1)}
    .svc-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line)}
    @media (max-width: 920px){.svc-grid{grid-template-columns: 1fr}}
    .svc{
      background: var(--ink-1);
      padding: clamp(28px, 3vw, 40px);
      display:flex; flex-direction: column; gap: 22px;
      position: relative; transition: background .35s var(--ease);
    }
    .svc:hover{background: color-mix(in oklab, var(--ink-1) 88%, var(--purple) 12%)}
    .svc-head{display:flex; align-items: baseline; justify-content: space-between; gap: 12px}
    .svc-num{font-family: var(--mono); font-size: 11px; letter-spacing:.18em; color: var(--accent); text-transform: uppercase}
    .svc-mark{
      width: 38px; height: 38px; flex: none;
      border-radius: 50%;
      border: 1px solid var(--line-strong);
      display:flex; align-items:center; justify-content:center;
      transition: all .3s var(--ease);
    }
    .svc:hover .svc-mark{border-color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, transparent); transform: rotate(45deg)}
    .svc-mark svg{width:14px; height:14px; transition: transform .3s var(--ease)}
    .svc:hover .svc-mark svg{transform: rotate(-45deg)}
    .svc h3{font-family: var(--serif); font-size: clamp(26px, 2.6vw, 34px); margin: 0; line-height: 1.1; font-weight: 400; letter-spacing: -.01em}
    .svc p{margin: 0; color: var(--text-mute); font-size: 16px; line-height: 1.6}
    .svc-tags{display:flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px}
    .svc-tag{
      font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
      padding: 6px 10px; border-radius: 999px;
      background: rgba(255,255,255,.04); border: 1px solid var(--line);
      color: var(--text-mute);
    }
    [data-palette="light"] .svc-tag{background: rgba(26,18,48,.04); border-color: var(--line)}

    /* ─── Approach (path diagram) ────────────────────────────────── */
    .approach{padding: var(--section-y) 0}
    .approach-body{display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center}
    @media (max-width: 920px){.approach-body{grid-template-columns: 1fr}}
    .approach-list{display:flex; flex-direction: column; gap: 20px}
    .step{
      display:grid; grid-template-columns: 56px 1fr; gap: 22px; align-items: start;
      padding: 20px 0; border-bottom: 1px solid var(--line);
    }
    .step:last-child{border-bottom: 0}
    .step-num{
      font-family: var(--serif); font-size: 42px; line-height: 1; font-style: italic;
      color: var(--accent);
    }
    .step h3{font-family: var(--serif); font-size: 22px; margin: 0 0 6px; font-weight: 400; letter-spacing:-.005em}
    .step p{margin: 0; color: var(--text-mute); font-size: 15px}

    .stairs{
      position: relative;
      aspect-ratio: 4/5;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: linear-gradient(180deg, var(--ink-3), var(--ink-1));
      border: 1px solid var(--line);
    }
    .stairs svg{position:absolute; inset:0; width:100%; height:100%}
    /* Lights climbing the stairs — a glow that travels upward */
    @media (prefers-reduced-motion: no-preference){
      .stair-light{animation: stairClimb 3.4s var(--ease) infinite; transform-box: fill-box; transform-origin: center}
    }
    @keyframes stairClimb{
      0%, 100%{opacity: .7}
      50%{opacity: 1}
    }
    .stairs-caption{
      position:absolute; left: clamp(20px, 3vw, 32px); bottom: clamp(56px, 8vw, 76px);
      right: clamp(20px, 3vw, 32px);
      display:flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
      z-index: 2;
      text-shadow: 0 2px 24px rgba(0,0,0,.5);
    }
    .stairs-caption h3{
      font-size: clamp(22px, 2.4vw, 30px); margin: 0; font-weight: 400; line-height: 1.1;
      max-width: 18ch;
    }

    /* ─── Mission / Vision ───────────────────────────────────────── */
    .mv{padding: var(--section-y) 0; border-top: 1px solid var(--line)}
    .mv-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden}
    @media (max-width: 820px){.mv-grid{grid-template-columns: 1fr}}
    .mv-cell{
      background: var(--ink-1);
      padding: clamp(32px, 4vw, 56px);
      display:flex; flex-direction: column; gap: 18px;
    }
    .mv-cell .mv-label{
      font-family: var(--serif); font-style: italic; color: var(--accent);
      font-size: clamp(28px, 3vw, 40px); line-height: 1;
    }
    .mv-cell p{margin: 0; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.5; color: var(--fg); font-family: var(--serif); font-weight: 400; text-wrap: pretty}
    .mv-cell .mv-tag{font-family: var(--mono); font-size: 11px; letter-spacing:.16em; text-transform: uppercase; color: var(--text-mute)}

    /* ─── Impact ─────────────────────────────────────────────────── */
    .impact{background: var(--ink-0); padding: var(--section-y) 0; position: relative; overflow: hidden}
    .impact::before{
      content:""; position:absolute; left: 50%; top: 20%; width: 80vw; height: 80vw; transform: translate(-50%, -30%);
      background: radial-gradient(circle, color-mix(in oklab, var(--purple) 22%, transparent), transparent 55%);
      pointer-events:none;
    }
    .impact-inner{position: relative; z-index: 1; text-align: center}
    .impact h2{font-size: clamp(44px, 7vw, 96px); margin: 16px 0 26px; max-width: 18ch; margin-inline: auto}
    .impact .lede{margin-inline: auto; text-align:center}
    .impact-grid{
      margin-top: clamp(60px, 7vw, 96px);
      display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
      background: var(--line); border:1px solid var(--line); border-radius: var(--radius-lg);
      overflow: hidden;
    }
    @media (max-width: 820px){.impact-grid{grid-template-columns: 1fr 1fr}}
    .metric{
      background: var(--ink-1);
      padding: 32px 28px;
      text-align: left;
      display:flex; flex-direction: column; gap: 8px;
    }
    .metric .k{font-family: var(--serif); font-size: clamp(36px, 4vw, 52px); line-height: 1; font-style: italic; color: var(--accent)}
    .metric .v{font-family: var(--serif); font-size: 19px; line-height: 1.2}
    .metric .d{font-size: 13.5px; color: var(--text-mute); margin-top: 4px}

    /* ─── Contact ────────────────────────────────────────────────── */
    .contact{padding: var(--section-y) 0; position: relative}
    .contact-grid{display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(48px, 6vw, 96px); align-items: start}
    @media (max-width: 920px){.contact-grid{grid-template-columns: 1fr}}
    .contact h2{font-size: clamp(40px, 6vw, 80px); margin: 14px 0 24px}
    .contact-details{display:flex; flex-direction: column; gap: 14px; margin-top: 32px}
    .contact-row{
      display:grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: baseline;
      padding: 14px 0; border-top: 1px solid var(--line);
    }
    .contact-row:last-child{border-bottom: 1px solid var(--line)}
    .contact-row .k{font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute)}
    .contact-row .v{font-size: 16px}

    /* Form */
    .form{
      background: color-mix(in oklab, var(--ink-1) 80%, transparent);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: clamp(24px, 3vw, 36px);
      display:flex; flex-direction: column; gap: 16px;
      backdrop-filter: blur(8px);
    }
    [data-palette="light"] .form{background: rgba(255,255,255,.5); border-color: rgba(26,18,48,.12)}
    .field{display:flex; flex-direction: column; gap: 6px}
    .field label{font-family: var(--mono); font-size: 10.5px; letter-spacing:.16em; text-transform: uppercase; color: var(--text-mute)}
    .field input, .field textarea{
      font: inherit; color: var(--fg); width: 100%;
      background: transparent;
      border: 0; border-bottom: 1px solid var(--line-strong);
      padding: 10px 0 12px;
      transition: border-color .2s var(--ease);
      outline: none;
      font-size: 16px;
      font-family: var(--sans);
    }
    .field textarea{min-height: 110px; resize: vertical; line-height: 1.5}
    .field input:focus, .field textarea:focus{border-bottom-color: var(--accent)}
    .field.row-2{display:grid; grid-template-columns: 1fr 1fr; gap: 20px}
    .field.row-2 > div{display:flex; flex-direction: column; gap: 6px}
    @media (max-width: 560px){.field.row-2{grid-template-columns: 1fr}}
    .field-error{color: #ff9a8b; font-size: 12px; min-height: 1em; font-family: var(--mono); letter-spacing: .04em}
    .field input.invalid, .field textarea.invalid{border-bottom-color: #ff9a8b}
    .form-actions{display:flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px}
    .form-actions .small{font-size: 12.5px; color: var(--text-mute)}

    .form-success{
      text-align: center; padding: 30px 10px;
      display:flex; flex-direction: column; gap: 14px; align-items: center;
    }
    .form-success .check{
      width: 52px; height: 52px; border-radius: 50%;
      background: color-mix(in oklab, var(--accent) 20%, transparent);
      border: 1px solid var(--accent);
      display: grid; place-items:center;
      color: var(--accent);
    }
    .form-success h3{font-family: var(--serif); font-size: 26px; margin: 0; font-weight: 400}
    .form-success p{margin: 0; color: var(--text-mute)}

    /* ─── Footer ─────────────────────────────────────────────────── */
    footer{
      padding: 64px 0 40px;
      border-top: 1px solid var(--line);
    }
    .foot{display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; align-items: start}
    @media (max-width: 820px){.foot{grid-template-columns: 1fr 1fr; gap: 32px}}
    .foot h3{font-family: var(--mono); font-size: 10.5px; letter-spacing:.16em; text-transform: uppercase; color: var(--text-mute); margin: 0 0 14px; font-weight: 500}
    .foot ul{list-style: none; padding: 0; margin: 0; display:flex; flex-direction: column; gap: 10px}
    .foot ul a{color: var(--fg); font-size: 14.5px; transition: color .2s var(--ease)}
    .foot ul a:hover{color: var(--accent)}
    .foot .salute{font-family: var(--script); font-size: 36px; color: var(--accent); line-height: 1; transform: rotate(-3deg) translateY(-2px); display:inline-block; margin-top: 14px}
    .foot-bottom{
      margin-top: 60px; padding-top: 22px;
      border-top: 1px solid var(--line);
      display:flex; align-items: center; justify-content: space-between; gap: 16px;
      color: var(--text-mute); font-size: 12.5px; font-family: var(--mono); letter-spacing:.06em
    }
    @media (max-width: 560px){.foot-bottom{flex-direction:column; align-items: flex-start}}

    /* ─── Reveal animation ──────────────────────────────────────── */
    .reveal{opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease)}
    .reveal.in{opacity: 1; transform: none}
    .reveal-delay-1{transition-delay: .08s}
    .reveal-delay-2{transition-delay: .16s}
    .reveal-delay-3{transition-delay: .24s}

    /* ─── Font variants from tweaks ─────────────────────────────── */
    [data-serif="instrument"]{--serif:'Instrument Serif', Georgia, serif}
    [data-serif="newsreader"]{--serif:'Newsreader', Georgia, serif}
    [data-serif="cormorant"]{--serif:'Cormorant Garamond', Georgia, serif}

    /* Selection */
    ::selection{background: color-mix(in oklab, var(--accent) 60%, transparent); color: var(--bg)}

    /* ═══ Bilingual rebuild additions ═══════════════════════════════ */

    /* Capability pillars: borders removed per requirements, spacing preserved */
    .hero-pillars.is-borderless{border-top:0}
    .hero-pillars.is-borderless .pillar{border-right:0}
    /* Capability intro line above the pillars */
    .capabilities-intro{font-family:var(--serif);font-size:clamp(18px,1.6vw,22px);color:var(--text-mute);margin:clamp(40px,5vw,64px) 0 -8px}

    /* Nav: language selector */
    .nav-actions{display:flex;align-items:center;gap:18px}
    .lang-switch{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute);transition:color .2s var(--ease)}
    .lang-switch:hover{color:var(--fg)}
    @media (max-width:820px){.nav-links{display:none}}

    /* Service-page infographic (spec §7) */
    .service-infographic{width:100%;max-width:1400px;margin:clamp(40px,5vw,64px) auto;display:block}
    .service-infographic img{display:block;width:100%;height:auto;border-radius:var(--radius-lg)}
    .service-infographic figcaption{text-align:center;color:var(--text-mute);font-size:14px;margin-top:12px;font-family:var(--serif);font-style:italic}
    .infographic-heading{font-family:var(--serif);font-size:clamp(26px,3vw,38px);text-align:center;margin:0 0 8px;font-weight:400}
    .infographic-steps{list-style:none;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:0;margin:18px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)}
    .infographic-steps li{padding:6px 12px;border:1px solid var(--line);border-radius:999px}
    @media (min-width:721px){.infographic-steps{display:none}} /* mobile-only text summary */

    /* Staircase raster image replacing the SVG (spec §6.5) */
    .stairs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

    /* Cookie banner */
    .cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;padding:16px var(--pad-x);
      background:color-mix(in oklab,var(--ink-1) 88%,transparent);backdrop-filter:blur(12px);
      border-top:1px solid var(--line);box-shadow:0 -20px 50px -30px rgba(0,0,0,.7)}
    .cookie-banner.is-visible{display:block}
    .cookie-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
    .cookie-text{font-size:13.5px;color:var(--text-mute);max-width:70ch}
    .cookie-text a{color:var(--accent);text-decoration:underline}
    .cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
    .cookie-actions .btn{padding:10px 20px;font-size:13px}

    /* ═══ Service-page block redesign (v2) ═══════════════════════════ */
    .section--tight{padding:clamp(44px,6vw,84px) 0}

    /* Service hero — centered, bounded (no lonely left column) */
    .svc-hero{padding:clamp(56px,8vw,110px) 0 clamp(32px,4vw,56px);text-align:center;position:relative;overflow:hidden}
    .svc-hero::before{content:"";position:absolute;inset:auto -10% -60% -10%;height:80%;background:radial-gradient(ellipse at 50% 100%,color-mix(in oklab,var(--purple-glow) 20%,transparent),transparent 62%);pointer-events:none}
    .svc-hero .wrap{max-width:900px;position:relative;z-index:1}
    .svc-hero .eyebrow{justify-content:center;display:inline-flex}
    .svc-hero h1{font-size:clamp(40px,6.5vw,88px);margin:16px 0 24px}
    .svc-hero .lede{margin:0 auto 18px;text-align:center}
    .svc-hero .hero-ctas{justify-content:center;margin-top:28px}

    /* Real service cards — flow with any count, no empty grid cells */
    .svc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
    .svc-card{background:var(--ink-1);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:12px;transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease)}
    .svc-card:hover{border-color:color-mix(in oklab,var(--accent) 55%,var(--line));transform:translateY(-3px);background:color-mix(in oklab,var(--ink-1) 88%,var(--purple) 12%)}
    .svc-card .num{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--accent)}
    .svc-card h3{font-family:var(--serif);font-size:clamp(20px,2vw,25px);margin:0;font-weight:400;line-height:1.15}
    .svc-card p{margin:0;color:var(--text-mute);font-size:15px;line-height:1.6}
    .svc-card .detail{font-size:13.5px;color:color-mix(in oklab,var(--text-mute) 82%,transparent);padding-top:6px;border-top:1px solid var(--line);margin-top:2px}
    [data-palette="light"] .svc-card{background:var(--ink-1)}

    /* Split header: heading left, prose right — fills the width */
    .prose-split{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(32px,5vw,72px);align-items:start}
    @media (max-width:860px){.prose-split{grid-template-columns:1fr;gap:16px}}
    .prose-split .ph-head h2{font-size:clamp(30px,3.6vw,48px);margin:12px 0 0}
    .prose-split .ph-body p{color:var(--text-mute);font-size:clamp(16px,1.2vw,18px);line-height:1.65;margin:0 0 16px;text-wrap:pretty}
    .prose-split .ph-body p:last-child{margin-bottom:0}

    /* Feature list: bordered rows that flow in columns — clean for ANY item count
       (no enclosing box, so trailing empty space is invisible) */
    .feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));column-gap:clamp(28px,4vw,60px);border-top:1px solid var(--line);margin-top:28px}
    .feature{padding:18px 2px;display:flex;gap:14px;align-items:flex-start;font-size:15.5px;line-height:1.5;border-bottom:1px solid var(--line)}
    .feature .mk{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--accent);font-family:var(--mono);font-size:11px;margin-top:1px}

    /* Numbered steps as a process row that fills the width */
    .step-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
    .step-cell{background:var(--ink-1);padding:26px 24px;display:flex;flex-direction:column;gap:10px}
    .step-cell .sn{font-family:var(--serif);font-style:italic;font-size:34px;line-height:1;color:var(--accent)}
    .step-cell h3{font-family:var(--serif);font-size:19px;margin:0;font-weight:400}
    .step-cell p{margin:0;color:var(--text-mute);font-size:14px;line-height:1.55}

    /* ═══ Mobile nav + hero fixes ═══════════════════════════════════ */
    /* Logo must never distort: keep it out of flex-shrink in a tight nav */
    .brand{flex:0 0 auto}
    .brand img{flex:0 0 auto;max-width:none;width:auto}
    @media (max-width:820px){
      /* the added bilingual language switch + CTA overflowed the narrow nav and
         crushed the logo — drop the header CTA on mobile, keep the language switch */
      .nav-actions .btn{display:none}
    }
    /* Hero headline: long Dutch words overflowed at the clamp minimum on small phones */
    @media (max-width:560px){
      .hero h1{font-size:clamp(34px,9vw,48px)}
    }

    /* Legal / prose pages (privacy, cookies) */
    .legal-body h2{font-family:var(--serif);font-weight:400;color:var(--fg);font-size:clamp(20px,2.2vw,26px);margin:36px 0 12px;line-height:1.2}
    .legal-body p{margin:0 0 14px}
    .legal-body ul{margin:0 0 16px;padding-left:22px}
    .legal-body li{margin:5px 0}
    .legal-body a{color:var(--accent);text-decoration:underline}
    .legal-body strong{color:var(--fg)}
    .legal-body code{font-family:var(--mono);font-size:.9em;background:rgba(255,255,255,.05);padding:2px 6px;border-radius:6px}