/* =====================================================================
   TIER1 MARKETER — assets/css/site.css
   V3 Heavyweight design system (black #0a0a0a / gold #d4a955).
   Base blocks carried over verbatim from the approved website/ build.
   The new craft on top of this lives in assets/css/elevate.css.
   ===================================================================== */

/* ===== 00 BASE tokens, globals, type, buttons ===== */
  :root{
    --bg: #0a0a0a;
    --bg-alt: #111111;
    --ink: #f4f7f8;
    --ink-dim: rgba(244,247,248,.75);
    --ink-faint: rgba(244,247,248,.54);
    --hairline: rgba(244,247,248,.12);
    --hairline-hi: rgba(244,247,248,.24);
    --accent: #d4a955;
    --accent-dim: rgba(212,169,85,.45);
    --accent-glow: rgba(212,169,85,.18);
    --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
    --serif: "Cormorant Garamond", Georgia, serif;
    --pad: clamp(20px, 4vw, 64px);
    --nav-h: 64px;
  }

  *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  html,body{ overflow-x:hidden; }
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  ::selection{ background:var(--accent); color:var(--bg); }

  .shell{
    width:100%;
    max-width:1520px;
    margin:0 auto;
    padding-left:var(--pad);
    padding-right:var(--pad);
  }

  section{ scroll-margin-top:calc(var(--nav-h) + 16px); }

  .sr-only{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  /* ---------- focus rings ---------- */
  a:focus-visible,
  button:focus-visible,
  summary:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
  }

  /* ---------- skip link ---------- */
  .skip-link{
    position:absolute; left:16px; top:-64px;
    z-index:1200;
    font-family:var(--mono);
    font-size:.75rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--bg);
    background:var(--accent);
    text-decoration:none;
    padding:12px 20px;
    transition:top .25s ease;
  }
  .skip-link:focus{ top:0; }


/* ===== 00a GLOBAL scroll-progress + grain ===== */
  /* =====================================================
     GLOBAL · scroll-progress bar
  ===================================================== */
  .scroll-progress{
    position:fixed; top:0; left:0;
    height:2px; width:100%;
    z-index:1100;
    transform-origin:0 50%;
    transform:scaleX(0);
    background:linear-gradient(90deg, var(--accent), #f0cf8e);
    box-shadow:0 0 12px var(--accent-glow);
    pointer-events:none;
    will-change:transform;
  }

  /* film-grain overlay (subtle, fixed, very low opacity) */
  .grain{
    position:fixed; inset:0;
    z-index:1; pointer-events:none;
    opacity:.04;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- reveal on scroll ---------- */
  .reveal{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
    transition-delay:var(--d, 0ms);
  }
  .reveal.in-view{
    opacity:1;
    transform:translateY(0);
  }

  /* ---------- shared type ---------- */
  .eyebrow{
    font-family:var(--mono);
    font-size:clamp(.66rem, 1vw, .78rem);
    font-weight:500;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--ink-dim);
    display:flex; align-items:center; gap:16px;
  }
  .eyebrow::before{
    content:"";
    width:40px; height:1px;
    background:var(--accent);
    flex:none;
    transform-origin:0 50%;
  }

  h1{
    font-family:var(--sans);
    font-weight:700;
    font-size:clamp(3rem, 8.6vw, 6.6rem);
    line-height:.98;
    letter-spacing:-.03em;
    max-width:16ch;
    text-wrap:balance;
  }
  h2{
    font-family:var(--sans);
    font-weight:700;
    font-size:clamp(2.4rem, 6vw, 4.5rem);
    line-height:1;
    letter-spacing:-.03em;
    text-wrap:balance;
  }
  h1 .ital,
  h2 .ital{
    font-family:var(--serif);
    font-style:italic;
    font-weight:500;
    letter-spacing:-.01em;
    color:var(--accent);
  }
  .section-head{
    position:relative; z-index:2;
    max-width:880px;
    display:flex; flex-direction:column;
    gap:clamp(20px, 2.5vw, 32px);
    margin-bottom:clamp(48px, 7vw, 96px);
  }
  .section-lead{
    font-size:clamp(.95rem, 1.4vw, 1.125rem);
    line-height:1.65;
    color:var(--ink-dim);
    max-width:54ch;
  }

  /* oversized faint section numeral */
  .sec-ghost{
    position:absolute;
    top:clamp(8px, 2vw, 32px);
    right:0;
    z-index:0;
    font-weight:700;
    font-size:clamp(9rem, 22vw, 20rem);
    line-height:.8;
    letter-spacing:-.05em;
    color:transparent;
    -webkit-text-stroke:1px rgba(244,247,248,.05);
    user-select:none;
    pointer-events:none;
  }
  @supports not (-webkit-text-stroke: 1px white){
    .sec-ghost{ color:rgba(244,247,248,.04); }
  }

  /* ---------- buttons ---------- */
  .btn{
    display:inline-block;
    font-family:var(--sans);
    font-weight:600;
    font-size:.9rem;
    letter-spacing:.01em;
    color:var(--ink);
    background:transparent;
    border:1px solid var(--ink);
    padding:15px 30px;
    text-decoration:none;
    cursor:pointer;
    transition:background .22s ease, color .22s ease, border-color .22s ease;
    white-space:nowrap;
  }
  .btn:hover,
  .btn:focus-visible{
    background:var(--accent);
    border-color:var(--accent);
    color:#0a0a0a;
  }
  /* gold pill — primary front-door CTA */
  .btn--gold{
    position:relative;
    background:var(--accent);
    border-color:var(--accent);
    color:#0a0a0a;
    border-radius:999px;
    box-shadow:0 0 0 0 var(--accent-glow);
    transition:box-shadow .3s ease, transform .12s ease;
    will-change:transform;
  }
  .btn--gold:hover,
  .btn--gold:focus-visible{
    background:var(--accent);
    border-color:var(--accent);
    color:#0a0a0a;
    box-shadow:0 0 36px var(--accent-glow);
  }
  /* magnetic wrapper keeps layout stable while inner translates */
  .magnetic{ display:inline-block; will-change:transform; }
  .btn--nav{ padding:10px 20px; font-size:.8rem; }

  /* underline-draw link */
  .link-secondary{
    position:relative;
    font-family:var(--mono);
    font-size:.78rem;
    letter-spacing:.04em;
    color:var(--ink-dim);
    text-decoration:none;
    padding-bottom:4px;
    transition:color .2s ease;
    white-space:nowrap;
  }
  .link-secondary::after{
    content:"";
    position:absolute; left:0; bottom:0;
    width:100%; height:1px;
    background:var(--accent);
    transform:scaleX(0);
    transform-origin:0 50%;
    transition:transform .4s cubic-bezier(.22,1,.36,1);
  }
  .link-secondary:hover::after,
  .link-secondary:focus-visible::after{ transform:scaleX(1); }
  .link-secondary:hover,
  .link-secondary:focus-visible{ color:var(--accent); }

/* ===== 00b NAV ===== */
  /* =====================================================
     0 · NAV  (hide on scroll-down, reveal on scroll-up)
  ===================================================== */
  .nav{
    position:sticky; top:0; z-index:50;
    border-bottom:1px solid var(--hairline);
    background:rgba(10,10,10,.55);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    transition:background .35s ease, transform .4s cubic-bezier(.22,1,.36,1), border-color .35s ease;
  }
  .nav.is-scrolled{
    background:rgba(10,10,10,.85);
    border-bottom-color:var(--hairline-hi);
  }
  .nav.is-hidden{ transform:translateY(-101%); }
  .nav__inner{
    display:flex; align-items:center; justify-content:space-between;
    gap:24px;
    min-height:var(--nav-h);
    padding-top:10px; padding-bottom:10px;
  }
  .nav__wordmark{
    display:inline-flex; align-items:center; gap:9px;
    font-weight:700;
    font-size:1rem;
    letter-spacing:-.02em;
    color:var(--ink);
    text-decoration:none;
    white-space:nowrap;
  }
  .nav__links{
    display:flex;
    gap:clamp(20px, 3vw, 44px);
    list-style:none;
  }
  .nav__links a{
    position:relative;
    font-family:var(--mono);
    font-size:.72rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--ink-dim);
    padding-bottom:3px;
    transition:color .2s ease;
  }
  .nav__links a::after{
    content:"";
    position:absolute; left:0; bottom:0;
    width:100%; height:1px;
    background:var(--accent);
    transform:scaleX(0);
    transform-origin:0 50%;
    transition:transform .35s cubic-bezier(.22,1,.36,1);
  }
  .nav__links a:hover::after,
  .nav__links a:focus-visible::after{ transform:scaleX(1); }
  .nav__links a:hover,
  .nav__links a:focus-visible{ color:var(--accent); }
  @media (max-width: 980px){
    .nav__links{ display:none; }
  }
  @media (max-width: 480px){
    .nav__inner{ gap:12px; }
    .nav__wordmark{ font-size:.875rem; }
    .btn--nav{ padding:8px 14px; font-size:.7rem; }
  }

  /* logo lockup */
  .nav__mark{ display:block; height:26px; width:19px; flex:none; background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAABCCAYAAAAoj+QWAAANmUlEQVR4nNVaW3CV1RX+9v7/858QcgK5kRuEkEC4BBAQiYICcvFSixWtVjuDL04fbPugfbAvnb740hlm7HSm6gs+FKcjzHQQR4sKFgHljlIu4Q4Jd0IukMsh5/LvvTtr7f+kCTmJOUEUF4QcTvLv//vXXutb31r7iLr5dfgpWXZWCEX5kRwXPxELuRKza0pfePaJWeub22O773ngAsCE8tG1zy2bdrTuvhKEHI3mb9seuqeBj8wK4clHJmxb8XDVoryRgNBRaEgIYXBPApcCmDutbNUvl01eO2mcB6ESgJYwAIwBjMa9B7yiODJp5dIpp+ZPL4DnJiFVEkIIGGOgyd9uCO1dySP3DPBIdhhPL67Ztqxu7KKIl4Bj4oCvIYQLAwMfQEyF8OmOC0c2fnlm5o8O3HUkHpk99i/PLK76Y+loCUfcgtSAprDQBkr4UE4W9h+/iQ+3nprecOVmvdY/coxPLB+18Nc/q90+rSIbrvAhoCApiGGBCyeExqY4/vnZwZcPn255X2l619qPAjwv4nlPP1J9eem88kJPJOFCQRgBiuIkZZ6U6EqGsWHruXWb9zS+lEiqfmu4P3QRmT+z9K2Viye8PmaUhDQJCAjQ1hsBGEgYOQI7D1/Hus/3FrS0x9sGWusHAS6loLBY9vzSmi2Tx4UhjQ+TVNDCQAgJbQS0dNHQFMP6zYdX1p9r2zjYesQydx34mPzsnMfqxh9ZNGdMZdgkIDV5meJYQBmKY4n2hItPd11ct2VP40vxNGGRMi/kYk7t2GX5oyOldw14VtjFI/eV/uOJByteLsoFhInDGA3NyUeh4aBbhbD/yI34p7sbK680R68NtJYjJaZVFS189rHa7dOqR+ObEy1x927Q2/TqglVPPlixdmK5B2ESML4g5PxzKiSUjueuKny04/hTxxpaNwVEktbGFUfGP7VoyraFs0oqw54P5UeR7I6H3e9TDI0rzql9vK7i6Nya0fBcBWgFKegntlYbASgRwqad145s2nNxZixBZWVg+bp03vgPViyqfrEg14U0SeZIRSGm0fG9AC8YFc5ZMLPsk4UzCxflZRv2MpQAJAGW9qmIm41BHC72nWheMRBoSuS5U0teWblk0prK0jAcWMCcE8TjUiLhq647Ah5yJOZNLXpr2dyy10tHO1xEoCiCBQx52jiQIfANKSGNIPCSKnlruvWK80eUrFxcfXXBzCKWr8JPAsw6Pq9pw43oUw+fVSaW5y57cl75luqyMDzpAzoJLYiVqYwICMdDU1sCvh9DVXmE32Ojb8HL3vbA1OJXf7V8wjslVPZ1DIYLEu2W4OIkhcM0CAfQGpl7PD/Xy1kyq+zk3MmRsixHI6QT/L4txgZGOuhIhLD14LUte+uv//z5JdXx8SXsOPtzG+72ol7h8Vhd2TtjcjSM0lAElhQh4XQ99rAMrocmXZtBAXIdgfkzSv6+aEb+7/JG0gIJGC34JsQU5EUjs7DvWDs2f3Mm0noz1mWJj6oh4AhhvZ6Gph0BuNLAN5ocCsEXOLjRJfHl7hPm8YerREGuw96nG9H9hgS8ZmzkhccfKF1fNsrAlTHCzBWPFL9PDpAOrrQa/HtPw8qTl9o39qY3IaSBkEIbzR6kaxwhPKCX14lxtGHPUofjizA++/ry9s/3nl+ck+WMf+LRqY2pNQm0Uv7AwOnhxuSNKFkyp+RKbbknSB877NZgAX7hIBp38cXBlg27jrU851MpvH0damf4hV1U868Yr+8v0cNLCG8kDtS34V9bjxY034yxTskOyzg/lCGSIi+ZgT2eneViwYyizfNqcpdnSWqbYgyTgHGCEDUJD4dOR83WQ02FrR2JAcWQfUgyDlI4ttz3iXFijNNXkp9s3HH8vaNnW/rsGOWD8jW3a5z00iCpdGcf4J4rMa0y90+Pzsp/sygHUH43X8D0xvpYQosQGpp8bD3Q+NT5ltimwQAHt2aXS2E4vO1O9TVyyLrPjq4Y4KETtJHscVqJnR54nJw4vnjkwkfvK9xeVRKCG5C+KyUUxRSDl7jWBnx19Oobx853rrZbPkSjG9OCQnLTm6nxDmjKEQFB3432XC/kYPGs4s0PTMxePsJNwjFJS7PMFuxmdCaAvcc71+0/1fZSLKEyvakxSgnjWF8r4vnBxEk646Q1kMyEDDzs1lYVvvDglJzlrorxrpKHSY1RTMaVwJHz3fi6vq2y6Ubs/EDr2h3LrW3tjNd3RuO3IxcUbwTb0Et+kr48/p0PH/SfVkLw9XEZdlCj/IRNOk48iSQcXLghsH5H88sbd10Vg4EuHBXO/8VD4xpWLa84Oq4o+5l+zjKIc4dDxVXzTS3vZwKcPE7jCQ4TS50u8St5mjBz9EkH/z3bhU/2t4jBwiIckri/pvCtBdPzXi/KJo8m4EhT2g84TNwYE6adNFSwMkqOPvAtSRBemLCrtImzowPwChrnm+NvDwSaMru2avSri2eOeacsT3AbRvxKsidtCBiRIG/Z+ASU0Uj4JB+HZgLwODw4N2DXIVaxMZdKGHoiiaQyaXm5OD9r/LL7ixsnl3kICR9Ss9zj1bXQ/QtL4CdfK4RobelAGIOQg76VcxAjOmRsAWryOIcKeYlkLrMUgyD6M529LybmWTBjzAcLpkRezHZ9cMCmdCBVPVaFnDj9gNN7WmnQMyrtgF5n7PEgzvl/QSVmj1Oca6qKjrRaQJsuvkgAk8eOembp7MIPiyPE5Imeks/fU+WctXb62CXqouyhWgCpeJSWrgh9B3hbACm5KUHRK1Toj1IKRrjwfdNVnJc1fumcsoapYz0BFe8BTKMEasfI2/bhqJqm2CLd9ou40iZM12ietHI1Q+bIjZWR/JfGE7SYsh7joYz2MbsivLZybDEoLHSiu2daakND4pb2cL0lionjcrmkpFBTPKa9b1DMDAsO+5BDN+NRjKe4XDs9ysd41FolfcU/IF/WjM1GWCQC71jeJDq70QVsOxLd/e7HjZG9Z2OvQbqsZQLRNoCzAtC27oPZUGQAW4su8ujt4eVCCKo+Vn3RP9x9kI4n4c+XojsBHGqMNR440zGjrTPB8V8GdJEniCXAjEJrpEHP6wd6RVg6zChUpPFSoIORjI1xGB2himbVAG2B4EJETa1WAhfaFHafaF/Z0HSrj9zUBp0sD4wNFXqdDpCtktTw2vVNGs0+mAmdYizbylk5L+JUNTwOkaDi0418Y9Bxy+DgueiaQ40dv4kndX9ACgneJW1YsvLMBP1pLlWiWVLoYSQm1wZbK7jrstlJJR+d2tAAUvOOK0icupLAgbPRmqab8dMDLUcguTCktk9yT96Pxyk0jHGsx80A4TSICYmw9XlKjNv3XQEToYkTrdfUbvDtuegbp5u6VzPvDrYgg7Q0alsFWl6kTS5jUGgJ1GTu8ICVeu5qqTHsQsjOtqjE4XPRv5681v2HBHW/Q7FezSvzMxegNJUzoDE7ljBBBcwEvogzEZF3graRzD15qWv1qUtYHRtkvDsAbpYKAaHYSdNtvaR9MCQ4QTk5pWWVDI13MlU+A3MHm0cPCjxVcbkXDEJmIE8GssIwFXqZETlMOHW+STrKshSxyp0YJTtTUc+Mql+osPjXNim1sFSbSagYIM6KsEe9clEc/phZCNLJQWXlUuVAU5W7/cYs2nTPaRoCFsrEOEe4WbahSQ8zfI+ThA1Cxca45drbjSUtU6BNYo0MI4VrRdAsW7XJHs98VtAbO7uOFrKeT6fHU96yogbBNRkgJzXFsZjqN1Mlf9hGKszwAD841UmrDrXhntM2u9L2jRkZFUU+O6KzCOqg2Ene8GPcUOEKPsowSHNg5bAdKKHna+jGDlGGGx0pqV9gXZ8YvscF6WQ7rLGnDTJtObcjCRJIwaOZDHmcfaM4zpnRqdcV5g4+2mR0DsWulbW0nQzstmkQq8guewxCZURmfhtKaq3s+U+g0e7oQwjcZAfDJY51IRCS6D9X4cQMmglBMEg4Z4TcUiGBp6spZABv+KyidU6PTrHBgvKCEa+EqC+8nQ4D2hT/F5OZIA+Tx7VKQvvUSiZp1cjwgRsT5pjmJoJAacyqGjHj2fmlpnLMyIUpQedrGmfQo1n2GZZOIY/7BF4hqR00d6g1ww4VLeTVuNLwiKakjV8aX1TkuSity9t+oWWU2XmsZYZMJmshsnrUIUj3Z3If6rSUgnYFLrQYbDt87benrkbfHTbwiy3x9040RtdMqQjD08oC4gZFw5MG1cWuqCwqP9oVjfLvW9Cidy8wJIsptDXdBHZcurVhz8m2nuOaYQOnY4It9R3i2GVnVV1NztpxRR6PxUgpEkCaJ7rSR9YoL8gAElp+MKobulHb+N7mxn6bdIclX+DSTf3+xv3tYsuhW2+2dIeghBuwDB222S97IhwcpJjM9Xg6uyPgKVNGoP7SrT9v2Hk9su9kx6lbdN7FTEI0RiLL0pkJ5jQZToTuHvCUdcR011cnOiZ/uKd1+ZmrST7R4MJEyUUnxsqHTtK5/D0G3JrA5RvJLz7a1yw+3t/62sVWojD78SWlFIP/HnDfDeDWiOJPX4397V+7WsR/Dne93RqVfCyolIEX4pPlexN4ymhqcLCh8/cbdjVVHjqfaIlr+rxJZodX6ewH+/heW1Sd317fUXTqmj8pPsgng4Zq/wNVagtj9Sb2AgAAAABJRU5ErkJggg==') center/contain no-repeat; }
  .wm-text{ font-weight:700; letter-spacing:-.01em; }
  .wm-1{ color:var(--ink); }
  .wm-2{ color:var(--accent); }

/* ===== 01 HERO ===== */
  /* =====================================================
     1 · HERO  (cinematic, layered, line-by-line reveal)
  ===================================================== */
  .hero{
    position:relative;
    min-height:calc(100svh - var(--nav-h));
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding-top:clamp(48px, 8vh, 104px);
    padding-bottom:clamp(40px, 6vh, 72px);
    background:var(--bg);
    overflow:hidden;
  }
  .hero::after{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    z-index:1;
    background:radial-gradient(ellipse 120% 90% at 50% 35%, transparent 55%, rgba(0,0,0,.5) 100%);
  }
  /* SIGNATURE: a slow-drifting gold aurora behind the H1 */
  .hero__aurora{
    position:absolute; inset:-10% -10% -10% -10%;
    z-index:0; pointer-events:none;
    background:
      radial-gradient(38vw 38vw at 32% 30%, var(--accent-glow), transparent 60%),
      radial-gradient(30vw 30vw at 70% 58%, rgba(212,169,85,.10), transparent 62%),
      radial-gradient(26vw 26vw at 52% 80%, rgba(212,169,85,.06), transparent 64%);
    filter:blur(14px);
    animation:auroraDrift 22s ease-in-out infinite alternate;
    will-change:transform;
  }
  @keyframes auroraDrift{
    0%{ transform:translate3d(-3%, 2%, 0) scale(1.02); }
    50%{ transform:translate3d(2%, -2%, 0) scale(1.08); }
    100%{ transform:translate3d(4%, 3%, 0) scale(1.03); }
  }
  .hero__ghost{
    position:absolute;
    top:50%;
    right:-.06em;
    transform:translateY(-58%);
    font-weight:700;
    font-size:clamp(16rem, 42vw, 38rem);
    line-height:1;
    letter-spacing:-.05em;
    color:transparent;
    -webkit-text-stroke:1px rgba(244,247,248,.055);
    user-select:none;
    pointer-events:none;
    z-index:0;
    will-change:transform;
  }
  @supports not (-webkit-text-stroke: 1px white){
    .hero__ghost{ color:rgba(244,247,248,.04); }
  }
  .hero__index{
    position:absolute;
    top:clamp(24px, 5vh, 56px);
    right:var(--pad);
    font-family:var(--mono);
    font-size:clamp(.8rem, 1.2vw, 1rem);
    letter-spacing:.12em;
    color:var(--accent);
    z-index:2;
  }
  .hero__inner{
    position:relative; z-index:2;
    display:flex;
    flex-direction:column;
    gap:clamp(28px, 4.5vh, 56px);
  }
  /* line-by-line clip reveal */
  .hero h1{ margin:0; }
  .line-mask{ display:block; overflow:hidden; }
  .line-mask > span{
    display:block;
    transform:translateY(110%);
    transition:transform .9s cubic-bezier(.22,1,.36,1);
    transition-delay:var(--ld, 0ms);
  }
  .hero.is-lit .line-mask > span{ transform:translateY(0); }

  /* staggered fade-up for eyebrow / deck / cta */
  .hero-stagger{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
    transition-delay:var(--d, 0ms);
  }
  .hero.is-lit .hero-stagger{ opacity:1; transform:translateY(0); }

  .hero__floor{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    justify-content:space-between;
    gap:clamp(28px, 4vw, 64px);
    padding-top:clamp(20px, 3vh, 36px);
    border-top:1px solid var(--hairline);
  }
  .hero__deck{
    font-size:clamp(.95rem, 1.4vw, 1.125rem);
    line-height:1.6;
    color:var(--ink-dim);
    max-width:52ch;
  }
  .hero__cta-row{
    display:flex;
    align-items:center;
    gap:clamp(18px, 2.5vw, 32px);
    flex-wrap:wrap;
  }
  /* scroll cue */
  .scroll-cue{
    position:absolute;
    left:50%; bottom:clamp(14px, 3vh, 28px);
    transform:translateX(-50%);
    z-index:2;
    display:flex; flex-direction:column; align-items:center; gap:9px;
    font-family:var(--mono);
    font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
    color:var(--ink-faint);
    pointer-events:none;
  }
  .scroll-cue .track{
    width:1px; height:40px;
    background:var(--hairline-hi);
    position:relative; overflow:hidden;
  }
  .scroll-cue .track::after{
    content:"";
    position:absolute; left:0; top:0;
    width:100%; height:40%;
    background:var(--accent);
    animation:cueRun 2.4s cubic-bezier(.6,0,.4,1) infinite;
  }
  @keyframes cueRun{
    0%{ transform:translateY(-110%); }
    60%,100%{ transform:translateY(260%); }
  }
  @media (max-width: 560px){
    .hero__ghost{ font-size:19rem; right:-.1em; }
    .hero__floor{ flex-direction:column; align-items:flex-start; }
    .hero__cta-row{ flex-direction:column; align-items:flex-start; }
    .btn{ padding:14px 24px; white-space:normal; text-align:center; }
    .scroll-cue{ display:none; }
  }

  /* inner-page hero modifier (shorter, wider measure) */
  .hero--page{ min-height:calc(86svh - var(--nav-h)); }
  .hero--page h1{ max-width:18ch; }
  .hero--page .hero__deck{ max-width:56ch; }

/* ===== 02 PROOF BAND / marquee ===== */
  /* =====================================================
     2 · PROOF BAND (dual ghost-stroke marquee)
  ===================================================== */
  .brands{
    background:var(--bg);
    border-top:1px solid var(--hairline);
    padding-top:clamp(56px, 8vw, 104px);
    padding-bottom:clamp(56px, 8vw, 104px);
  }
  .brands__head{
    display:flex; justify-content:center;
    margin-bottom:clamp(32px, 5vw, 56px);
  }
  .brands__head .eyebrow::after{
    content:"";
    width:40px; height:1px;
    background:var(--accent);
    flex:none;
  }
  .marquee{
    overflow:hidden;
    cursor:default;
  }
  .marquee--top{ border-top:1px solid var(--hairline); padding-top:clamp(22px, 3.4vw, 42px); }
  .marquee--bot{ border-bottom:1px solid var(--hairline); padding-bottom:clamp(22px, 3.4vw, 42px); }
  .marquee__track{
    display:flex;
    width:max-content;
    animation:marquee-scroll 48s linear infinite;
    will-change:transform;
  }
  .marquee--bot .marquee__track{ animation-direction:reverse; animation-duration:56s; }
  .marquee:hover .marquee__track{ animation-play-state:paused; }
  .marquee__chunk{
    flex:none;
    white-space:nowrap;
    font-weight:700;
    font-size:clamp(4rem, 11vw, 9.5rem);
    line-height:1.06;
    letter-spacing:-.02em;
    text-transform:uppercase;
    color:transparent;
    -webkit-text-stroke:1.5px rgba(244,247,248,.30);
    padding-right:.45em;
    transition:-webkit-text-stroke-color .3s ease, color .3s ease;
    user-select:none;
  }
  .marquee--bot .marquee__chunk{ -webkit-text-stroke-color:rgba(244,247,248,.16); }
  .marquee:hover .marquee__chunk{
    -webkit-text-stroke-color:var(--accent);
    color:var(--accent);
  }
  @supports not (-webkit-text-stroke: 1px white){
    .marquee__chunk{ color:var(--ink-faint); }
    .marquee:hover .marquee__chunk{ color:var(--accent); }
  }
  @keyframes marquee-scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  .brands-caption{
    margin:clamp(32px, 5vw, 56px) auto 0;
    max-width:58ch;
    text-align:center;
    font-size:.95rem;
    line-height:1.7;
    color:var(--ink-faint);
  }

/* ===== 03 MANIFESTO ===== */
  /* =====================================================
     3 · MANIFESTO (scroll-highlight — SIGNATURE MOMENT)
  ===================================================== */
  .manifesto{
    position:relative;
    background:var(--bg);
    border-top:1px solid var(--hairline);
    padding-top:clamp(120px, 22vh, 280px);
    padding-bottom:clamp(120px, 22vh, 280px);
    overflow:hidden;
  }
  .manifesto .eyebrow{ justify-content:center; margin-bottom:clamp(40px, 7vw, 80px); }
  .manifesto-statement{
    position:relative; z-index:2;
    max-width:24ch;
    margin:0 auto;
    text-align:left;
    font-weight:700;
    font-size:clamp(1.7rem, 4.6vw, 3.5rem);
    line-height:1.22;
    letter-spacing:-.02em;
    text-wrap:balance;
  }
  .manifesto-statement .w{
    color:rgba(244,247,248,.20);
    transition:color .18s linear;
  }
  .manifesto-statement .w.is-lit{ color:var(--ink); }
  .manifesto-statement .w.is-gold{ color:var(--accent); }
  /* faint guide glow */
  .manifesto::before{
    content:"";
    position:absolute; left:50%; top:50%;
    width:min(70vw,820px); height:min(70vw,820px);
    transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(212,169,85,.05), transparent 62%);
    pointer-events:none; z-index:0;
  }

/* ===== 04 STATS ROW ===== */
  /* =====================================================
     4 · STATS ROW (count-up + drawing underline)
  ===================================================== */
  .proof-stats{
    position:relative;
    background:var(--bg-alt);
    border-top:1px solid var(--hairline);
    padding-top:clamp(64px, 9vw, 120px);
    padding-bottom:clamp(64px, 9vw, 120px);
    overflow:hidden;
  }
  .stats{
    position:relative; z-index:2;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    border-top:1px solid var(--hairline);
    border-left:1px solid var(--hairline);
  }
  .stat{
    position:relative;
    border-right:1px solid var(--hairline);
    border-bottom:1px solid var(--hairline);
    padding:clamp(28px, 3.5vw, 52px) clamp(20px, 2.5vw, 40px);
    display:flex; flex-direction:column; justify-content:space-between;
    gap:clamp(28px, 4vw, 64px);
    min-height:clamp(200px, 22vw, 300px);
    transition:background .3s ease;
  }
  .stat:hover{ background:rgba(244,247,248,.015); }
  .stat-num{
    font-weight:700;
    font-size:clamp(3.25rem, 5.5vw, 6rem);
    line-height:.95;
    letter-spacing:-.04em;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
    color:var(--ink);
  }
  .stat--accent .stat-num{ color:var(--accent); }
  /* drawing underline under the numeral */
  .stat-rule{
    height:2px; width:clamp(40px, 5vw, 72px);
    background:var(--accent);
    transform:scaleX(0);
    transform-origin:0 50%;
    transition:transform .9s cubic-bezier(.22,1,.36,1);
    transition-delay:var(--d, 0ms);
    margin-top:-12px;
  }
  .stat.in-view .stat-rule{ transform:scaleX(1); }
  .stat-label{
    font-family:var(--mono);
    font-size:.7rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    line-height:1.7;
    color:var(--ink-dim);
    max-width:24ch;
  }
  .stat--accent .stat-label{ color:var(--ink); }
  @media (max-width: 980px){
    .stats{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width: 560px){
    .stats{ grid-template-columns:1fr; }
    .stat{ min-height:0; gap:24px; }
  }

/* ===== 05 SERVICE PILLARS ===== */
  /* =====================================================
     5 · WHAT I RUN (rich art-directed cards)
  ===================================================== */
  .engine{
    position:relative;
    background:var(--bg);
    border-top:1px solid var(--hairline);
    padding-top:clamp(72px, 11vw, 150px);
    padding-bottom:clamp(72px, 11vw, 150px);
    overflow:hidden;
  }
  .pillar-grid{
    position:relative; z-index:2;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:clamp(16px, 1.8vw, 26px);
  }
  .pillar{
    position:relative;
    border:1px solid var(--hairline);
    background:var(--bg-alt);
    padding:clamp(26px, 3vw, 40px);
    display:flex; flex-direction:column;
    gap:clamp(20px, 2.4vw, 30px);
    overflow:hidden;
    transition:transform .45s cubic-bezier(.22,1,.36,1), background .45s ease;
  }
  .pillar:hover{ transform:translateY(-6px); background:#141414; }
  /* gold border-draw on hover (two animated edges) */
  .pillar::before,
  .pillar::after{
    content:"";
    position:absolute;
    background:var(--accent);
    transition:transform .5s cubic-bezier(.22,1,.36,1);
    pointer-events:none;
    z-index:3;
  }
  .pillar::before{ left:0; top:0; height:1px; width:100%; transform:scaleX(0); transform-origin:0 50%; }
  .pillar::after{ left:0; top:0; width:1px; height:100%; transform:scaleY(0); transform-origin:50% 0; }
  .pillar:hover::before{ transform:scaleX(1); }
  .pillar:hover::after{ transform:scaleY(1); transition-delay:.12s; }
  .pillar-top{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:16px;
  }
  .pillar-index{
    font-family:var(--mono);
    font-size:clamp(2.2rem, 4vw, 3.4rem);
    line-height:1;
    letter-spacing:-.02em;
    color:var(--ink-faint);
  }
  /* CSS-drawn brand motif */
  .pillar-motif{
    width:64px; height:64px; flex:none;
    position:relative;
    opacity:.85;
  }
  .pillar-motif svg{ width:100%; height:100%; display:block; overflow:visible; }
  .pillar-motif [data-stroke]{
    fill:none;
    stroke:var(--accent);
    stroke-width:1.4;
    vector-effect:non-scaling-stroke;
    transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .5s ease;
    transform-box:fill-box;
    transform-origin:center;
  }
  .pillar:hover .m-grow{ transform:scaleY(1) translateY(0); }
  .pillar .m-grow{ transform-origin:50% 100%; }
  .pillar:hover .m-spin{ transform:rotate(45deg); }
  .pillar:hover .m-pulse{ transform:scale(1.12); }
  .pillar h3{
    font-family:var(--mono);
    font-weight:500;
    font-size:.75rem;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--ink);
  }
  .pillar-intro{
    font-size:.95rem;
    line-height:1.6;
    color:var(--ink-dim);
    max-width:30ch;
  }
  .pillar-caps{
    list-style:none;
    margin-top:auto;
    border-top:1px solid var(--hairline);
  }
  .pillar-caps li{
    display:flex; align-items:center; gap:12px;
    font-family:var(--mono);
    font-size:.74rem;
    letter-spacing:.06em;
    color:var(--ink-dim);
    padding:12px 0;
    border-bottom:1px solid var(--hairline);
    opacity:0;
    transform:translateX(-10px);
    transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
    transition-delay:var(--cd, 0ms);
  }
  .pillar.in-view .pillar-caps li{ opacity:1; transform:translateX(0); }
  .pillar-caps li::before{
    content:"";
    width:5px; height:5px; flex:none;
    background:var(--accent-dim);
    transition:background .3s ease, transform .3s ease;
  }
  .pillar:hover .pillar-caps li::before{ background:var(--accent); transform:rotate(45deg); }
  @media (max-width: 860px){
    .pillar-grid{ grid-template-columns:1fr; }
  }
  .engine-cta{
    position:relative; z-index:2;
    margin-top:clamp(40px, 6vh, 64px);
    display:flex; align-items:center; gap:clamp(18px, 2.5vw, 32px); flex-wrap:wrap;
  }

/* ===== 06 WORK PREVIEW ===== */
  /* =====================================================
     6 · THE WORK preview (3D tilt + zoom + slide affordance)
  ===================================================== */
  .work{
    position:relative;
    background:var(--bg-alt);
    border-top:1px solid var(--hairline);
    padding-top:clamp(72px, 11vw, 150px);
    padding-bottom:clamp(72px, 11vw, 150px);
    overflow:hidden;
  }
  .work-landers{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:8px; position:relative; z-index:2; }
  .work-lander{
    position:relative;
    margin:0; border:1px solid var(--hairline); border-radius:12px; overflow:hidden; background:var(--bg);
    transform-style:preserve-3d;
    transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .4s ease;
    will-change:transform;
  }
  .work-lander:hover{ border-color:var(--accent); box-shadow:0 30px 70px rgba(0,0,0,.5); }
  .work-lander .browser{ display:flex; align-items:center; gap:9px; padding:9px 13px; border-bottom:1px solid var(--hairline); }
  .work-lander .dots{ display:inline-flex; gap:5px; }
  .work-lander .dots i{ width:8px; height:8px; border-radius:50%; background:var(--hairline-hi); }
  .work-lander .addr{ font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; color:var(--ink-faint); }
  .work-frame{ position:relative; overflow:hidden; }
  .work-lander img,
  .work-ad img{ display:block; width:100%; height:auto; transition:transform .6s cubic-bezier(.22,1,.36,1); }
  .work-lander:hover .work-frame img{ transform:scale(1.045); }
  .work-ad:hover .work-frame img{ transform:scale(1.06); }
  .work-lander figcaption{ font-family:var(--mono); font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-dim); padding:13px 15px; border-top:1px solid var(--hairline); display:flex; align-items:center; justify-content:space-between; gap:12px; }
  /* slide-in View affordance */
  .work-view{
    font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--accent);
    opacity:0; transform:translateX(8px);
    transition:opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1);
  }
  .work-lander:hover .work-view,
  .work-ad:hover .work-view{ opacity:1; transform:translateX(0); }
  .work-subhead{ font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin:46px 0 18px; position:relative; z-index:2; }
  .work-ads{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; position:relative; z-index:2; }
  .work-ad{
    position:relative;
    margin:0; border:1px solid var(--hairline); border-radius:10px; overflow:hidden; background:var(--bg);
    transform-style:preserve-3d;
    transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .4s ease;
    will-change:transform;
  }
  .work-ad:hover{ border-color:var(--accent); box-shadow:0 22px 50px rgba(0,0,0,.5); }
  .work-ad .work-frame img{ aspect-ratio:4/5; object-fit:cover; }
  .work-ad figcaption{ font-family:var(--mono); font-size:.6rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); padding:9px 11px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .work-cta{
    position:relative; z-index:2;
    margin-top:clamp(40px, 6vh, 64px);
    display:flex; align-items:center; gap:clamp(18px, 2.5vw, 32px); flex-wrap:wrap;
  }
  @media(max-width:980px){ .work-ads{ grid-template-columns:repeat(3,1fr); } }
  @media(max-width:640px){ .work-landers{ grid-template-columns:1fr; } .work-ads{ grid-template-columns:repeat(2,1fr); gap:14px; } }

/* ===== 07 ABOUT TEASER ===== */
  /* =====================================================
     7 · ABOUT teaser (parallax/scale headshot)
  ===================================================== */
  .about{
    position:relative;
    background:var(--bg);
    border-top:1px solid var(--hairline);
    padding-top:clamp(72px, 11vw, 150px);
    padding-bottom:clamp(72px, 11vw, 150px);
    overflow:hidden;
  }
  .about-grid{
    position:relative; z-index:2;
    display:grid;
    grid-template-columns:minmax(0, .85fr) 1fr;
    gap:clamp(32px, 5vw, 80px);
    align-items:center;
  }
  .about-photo{
    position:relative;
    border:1px solid var(--hairline-hi);
    aspect-ratio:4 / 5;
    overflow:hidden;
    background:var(--bg-alt);
  }
  .about-photo img{
    width:100%; height:114%; object-fit:cover; object-position:center 20%; display:block;
    will-change:transform;
  }
  .about-photo::after{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    background:linear-gradient(to bottom, transparent 62%, rgba(10,10,10,.55) 100%);
  }
  .about-photo .photo-tag{
    position:absolute; left:0; bottom:0; z-index:2;
    font-family:var(--mono);
    font-size:.625rem;
    font-weight:500;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:var(--ink-faint);
    background:rgba(10,10,10,.55);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
    padding:8px 14px;
  }
  .about-copy{ display:flex; flex-direction:column; gap:clamp(20px, 2.5vw, 30px); }
  .about-statement{
    font-weight:700;
    font-size:clamp(1.75rem, 3.4vw, 2.8rem);
    line-height:1.1;
    letter-spacing:-.02em;
    color:var(--ink);
    text-wrap:balance;
    max-width:18ch;
  }
  .about-statement em{
    font-family:var(--serif);
    font-style:italic;
    font-weight:500;
    letter-spacing:-.01em;
    color:var(--accent);
  }
  .about-copy p{
    font-size:clamp(.95rem, 1.4vw, 1.0625rem);
    line-height:1.7;
    color:var(--ink-dim);
    max-width:48ch;
  }
  .about-principles{
    list-style:none;
    display:flex; flex-direction:column;
    border-top:1px solid var(--hairline);
    margin-top:4px;
  }
  .about-principles li{
    font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-dim);
    padding:12px 0; border-bottom:1px solid var(--hairline);
    display:flex; align-items:center; gap:12px;
  }
  .about-principles li::before{ content:"\2014"; color:var(--accent); }
  .about-cta{ margin-top:clamp(8px, 1.5vw, 16px); }
  @media (max-width: 760px){
    .about-grid{ grid-template-columns:1fr; gap:36px; }
    .about-photo{ max-width:320px; }
  }

/* ===== 08 THE MODEL / retainer ===== */
  /* =====================================================
     8 · THE MODEL (animated retainer bar + reveal points)
  ===================================================== */
  .model{
    position:relative;
    background:var(--bg-alt);
    border-top:1px solid var(--hairline);
    padding-top:clamp(72px, 11vw, 150px);
    padding-bottom:clamp(72px, 11vw, 150px);
    overflow:hidden;
  }
  .model-layout{
    position:relative; z-index:2;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:clamp(36px, 5vw, 80px);
    align-items:start;
  }
  @media(max-width:900px){ .model-layout{ grid-template-columns:1fr; gap:48px; } }

  .retainer{ position:relative; }
  .retainer-caption{
    font-family:var(--mono);
    font-size:.625rem;
    font-weight:500;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:var(--ink-faint);
    display:flex; align-items:baseline; justify-content:space-between; gap:16px;
    padding-bottom:14px;
    border-bottom:1px solid var(--hairline);
  }
  .retainer-caption .rc-ref{ letter-spacing:.12em; color:var(--accent); }
  .retainer-bar{
    display:flex;
    height:clamp(56px, 8vw, 92px);
    margin-top:clamp(20px, 3vw, 32px);
    border:1px solid var(--hairline-hi);
    overflow:hidden;
  }
  .retainer-seg{
    width:0;
    border-right:1px solid rgba(10,10,10,.9);
    transition:width 1.1s cubic-bezier(.22,1,.36,1);
    transition-delay:var(--sd, 0ms);
  }
  .retainer-seg:last-child{ border-right:none; }
  .seg-1{ background:rgba(244,247,248,.16); }
  .seg-2{ background:rgba(244,247,248,.10); }
  .seg-3{ background:rgba(244,247,248,.05); }
  .seg-4{ background:var(--accent); box-shadow:0 0 28px var(--accent-glow); }
  .retainer.in-view .seg-1{ width:36%; }
  .retainer.in-view .seg-2{ width:24%; }
  .retainer.in-view .seg-3{ width:28%; }
  .retainer.in-view .seg-4{ width:12%; }
  .retainer-legend{
    list-style:none;
    margin-top:clamp(18px, 2.5vw, 28px);
    border-top:1px solid var(--hairline);
  }
  .retainer-legend li{
    display:flex; align-items:center; gap:16px;
    padding:13px 0;
    border-bottom:1px solid var(--hairline);
    font-family:var(--mono);
    font-size:clamp(.66rem, 1vw, .75rem);
    font-weight:500;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--ink-faint);
  }
  .retainer-legend .swatch{ width:14px; height:14px; flex:none; border:1px solid var(--hairline-hi); }
  .retainer-legend .sw-1{ background:rgba(244,247,248,.16); }
  .retainer-legend .sw-2{ background:rgba(244,247,248,.10); }
  .retainer-legend .sw-3{ background:rgba(244,247,248,.05); }
  .retainer-legend .sw-4{ background:var(--accent); border-color:var(--accent); }
  .retainer-legend li.legend-accent{ color:var(--accent); }

  /* the $0 punch */
  .model-punch{
    margin-top:clamp(28px, 4vw, 44px);
    border:1px solid var(--accent-dim);
    padding:clamp(20px, 2.5vw, 30px);
    display:flex; align-items:baseline; gap:18px;
  }
  .model-punch .punch-num{
    font-weight:700; font-size:clamp(2.2rem, 4vw, 3.2rem); line-height:1;
    letter-spacing:-.03em; color:var(--accent); font-variant-numeric:tabular-nums;
  }
  .model-punch .punch-label{
    font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink-dim); line-height:1.6;
  }

  /* what this model buys */
  .model-buys h3{
    font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.24em;
    text-transform:uppercase; color:var(--accent);
    padding-bottom:16px; border-bottom:1px solid var(--hairline);
  }
  .model-buys ul{ list-style:none; }
  .model-buys li{
    padding:clamp(16px, 2vw, 22px) 0;
    border-bottom:1px solid var(--hairline);
    display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  }
  .model-buys .by-key{
    font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
    color:var(--ink-faint); padding-top:4px; white-space:nowrap;
  }
  .model-buys .by-val{ font-size:.95rem; line-height:1.55; color:var(--ink-dim); }
  .model-buys .by-val strong{ color:var(--ink); font-weight:600; }

  /* variant used on inner pages: sits on the base bg, not the alt */
  .model--plain{ background:var(--bg); }

/* ===== 09 OUTRO / FINAL CTA ===== */
  /* =====================================================
     9 · FINAL CTA (oversized scroll-highlight + magnetic CTA)
  ===================================================== */
  .outro{
    position:relative;
    background:var(--bg);
    border-top:1px solid var(--hairline);
    padding-top:clamp(96px, 16vh, 200px);
    padding-bottom:clamp(72px, 11vw, 150px);
    overflow:hidden;
  }
  .outro__ghost{
    position:absolute;
    top:clamp(16px, 4vw, 56px);
    right:-.04em;
    z-index:0;
    font-weight:700;
    font-size:clamp(10rem, 26vw, 24rem);
    line-height:.8;
    letter-spacing:-.05em;
    color:transparent;
    -webkit-text-stroke:1px rgba(244,247,248,.045);
    user-select:none;
    pointer-events:none;
  }
  @supports not (-webkit-text-stroke: 1px white){
    .outro__ghost{ color:rgba(244,247,248,.035); }
  }
  .outro-statement{
    position:relative; z-index:2;
    font-weight:700;
    font-size:clamp(2.2rem, 5.6vw, 4.5rem);
    line-height:1.08;
    letter-spacing:-.03em;
    max-width:20ch;
    text-wrap:balance;
  }
  .outro-statement .w{ color:rgba(244,247,248,.24); transition:color .18s linear; }
  .outro-statement .w.is-lit{ color:var(--ink); }
  .outro-statement .w em{
    font-family:var(--serif); font-style:italic; font-weight:500; letter-spacing:-.01em;
    color:inherit;
  }
  .outro-statement .w.is-lit em{ color:var(--accent); }
  .cta-bar{
    position:relative; z-index:2;
    margin-top:clamp(56px, 8vw, 110px);
    border:1px solid var(--hairline);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:clamp(20px, 3vw, 40px);
    padding:clamp(28px, 3.5vw, 48px) clamp(24px, 3.5vw, 56px);
    transition:border-color .4s ease;
  }
  .cta-bar:hover{ border-color:var(--accent-dim); }
  .outro-tag{
    font-family:var(--mono);
    font-size:clamp(.7rem, 1vw, .8rem);
    font-weight:500;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--ink-dim);
  }
  @media (max-width: 560px){
    .cta-bar{ flex-direction:column; align-items:flex-start; }
  }

/* ===== 10 FOOTER ===== */
  /* =====================================================
     10 · FOOTER
  ===================================================== */
  .footer{
    background:var(--bg);
    border-top:1px solid var(--hairline);
    padding-top:clamp(48px, 7vh, 72px);
    padding-bottom:clamp(36px, 5vh, 56px);
  }
  .footer-top{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap;
    gap:24px 40px;
    padding-bottom:32px;
    border-bottom:1px solid var(--hairline);
  }
  .footer-links{
    display:flex; align-items:center; flex-wrap:wrap;
    gap:14px 28px;
    list-style:none;
  }
  .footer-links a{
    font-family:var(--mono);
    font-size:.72rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-faint);
    text-decoration:none;
    transition:color .25s ease;
  }
  .footer-links a:hover{ color:var(--accent); }
  .footer-bottom{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap;
    gap:14px 40px;
    padding-top:28px;
  }
  .footer-bottom p,
  .footer-legal a{
    font-family:var(--mono);
    font-size:.6875rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--ink-faint);
  }
  .footer-legal{
    display:flex; gap:24px;
    list-style:none;
  }
  .footer-legal a{
    text-decoration:none;
    transition:color .25s ease;
  }
  .footer-legal a:hover{ color:var(--accent); }

/* ===== 11 STORY (sticky portrait) ===== */
  /* =====================================================
     2 · STORY (sticky parallax portrait + narrative)
  ===================================================== */
  .story{
    position:relative;
    background:var(--bg);
    border-top:1px solid var(--hairline);
    padding-top:clamp(72px, 11vw, 150px);
    padding-bottom:clamp(72px, 11vw, 150px);
    overflow:hidden;
  }
  .story-grid{
    position:relative; z-index:2;
    display:grid;
    grid-template-columns:minmax(0, .82fr) 1fr;
    gap:clamp(40px, 6vw, 96px);
    align-items:start;
  }
  /* portrait: LIGHT office image — clean framed card, subtle border, bottom scrim only */
  .story-figure{
    position:sticky;
    top:calc(var(--nav-h) + 28px);
    margin:0;
  }
  .story-photo{
    position:relative;
    border:1px solid var(--hairline-hi);
    border-radius:14px;
    overflow:hidden;
    background:var(--bg-alt);
    aspect-ratio:896 / 1152;
    box-shadow:0 24px 60px rgba(0,0,0,.45);
  }
  .story-photo img{
    width:100%; height:108%; object-fit:cover; object-position:center top; display:block;
    will-change:transform;
  }
  /* gentle bottom scrim ONLY — never fade the light image to black */
  .story-photo::after{
    content:"";
    position:absolute; inset:0;
    pointer-events:none;
    background:linear-gradient(to bottom, transparent 70%, rgba(10,10,10,.42) 100%);
  }
  .story-photo .photo-tag{
    position:absolute; left:0; bottom:0; z-index:2;
    font-family:var(--mono);
    font-size:.625rem;
    font-weight:500;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:var(--ink);
    background:rgba(10,10,10,.5);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
    padding:9px 15px;
  }
  .story-blocks{ display:flex; flex-direction:column; gap:clamp(36px, 5vw, 64px); }
  .story-block{ display:flex; flex-direction:column; gap:14px; }
  .story-block h2{
    font-size:clamp(1.55rem, 3vw, 2.4rem);
    line-height:1.08;
    letter-spacing:-.025em;
    max-width:20ch;
  }
  .story-block h2 em{
    font-family:var(--serif);
    font-style:italic;
    font-weight:500;
    letter-spacing:-.01em;
    color:var(--accent);
  }
  .story-kicker{
    font-family:var(--mono);
    font-size:.7rem;
    font-weight:500;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--accent);
  }
  .story-block p{
    font-size:clamp(.95rem, 1.4vw, 1.0625rem);
    line-height:1.72;
    color:var(--ink-dim);
    max-width:54ch;
  }
  @media (max-width: 860px){
    .story-grid{ grid-template-columns:1fr; gap:48px; }
    .story-figure{ position:static; max-width:380px; }
  }

/* ===== 12 PRINCIPLE CARDS ===== */
  /* =====================================================
     5 · PRINCIPLES / HOW I WORK (designed cards)
  ===================================================== */
  .principles{
    position:relative;
    background:var(--bg);
    border-top:1px solid var(--hairline);
    padding-top:clamp(72px, 11vw, 150px);
    padding-bottom:clamp(72px, 11vw, 150px);
    overflow:hidden;
  }
  .principle-grid{
    position:relative; z-index:2;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:clamp(16px, 1.8vw, 26px);
  }
  .principle{
    position:relative;
    border:1px solid var(--hairline);
    background:var(--bg-alt);
    padding:clamp(26px, 3vw, 40px);
    display:flex; flex-direction:column;
    gap:clamp(20px, 2.4vw, 30px);
    overflow:hidden;
    min-height:clamp(240px, 26vw, 300px);
    transition:transform .45s cubic-bezier(.22,1,.36,1), background .45s ease;
  }
  .principle:hover{ transform:translateY(-6px); background:#141414; }
  /* gold border-draw on hover (two animated edges) */
  .principle::before,
  .principle::after{
    content:"";
    position:absolute;
    background:var(--accent);
    transition:transform .5s cubic-bezier(.22,1,.36,1);
    pointer-events:none;
    z-index:3;
  }
  .principle::before{ left:0; top:0; height:1px; width:100%; transform:scaleX(0); transform-origin:0 50%; }
  .principle::after{ left:0; top:0; width:1px; height:100%; transform:scaleY(0); transform-origin:50% 0; }
  .principle:hover::before{ transform:scaleX(1); }
  .principle:hover::after{ transform:scaleY(1); transition-delay:.12s; }
  .principle-top{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:16px;
  }
  .principle-index{
    font-family:var(--mono);
    font-size:clamp(2.2rem, 4vw, 3.4rem);
    line-height:1;
    letter-spacing:-.02em;
    color:var(--ink-faint);
  }
  /* CSS-drawn brand motif */
  .principle-motif{
    width:64px; height:64px; flex:none;
    position:relative;
    opacity:.85;
  }
  .principle-motif svg{ width:100%; height:100%; display:block; overflow:visible; }
  .principle-motif [data-stroke]{
    fill:none;
    stroke:var(--accent);
    stroke-width:1.4;
    vector-effect:non-scaling-stroke;
    transition:transform .6s cubic-bezier(.22,1,.36,1), opacity .5s ease;
    transform-box:fill-box;
    transform-origin:center;
  }
  .principle:hover .m-spin{ transform:rotate(45deg); }
  .principle:hover .m-pulse{ transform:scale(1.14); }
  .principle .m-grow{ transform-origin:50% 100%; }
  .principle:hover .m-grow{ transform:scaleY(1); }
  .principle h3{
    font-weight:700;
    font-size:clamp(1.25rem, 2.2vw, 1.65rem);
    line-height:1.12;
    letter-spacing:-.02em;
    color:var(--ink);
    max-width:20ch;
  }
  .principle p{
    font-size:.95rem;
    line-height:1.65;
    color:var(--ink-dim);
    max-width:40ch;
    margin-top:auto;
  }
  @media (max-width: 760px){
    .principle-grid{ grid-template-columns:1fr; }
  }

/* ===== 13 FILTER TABS ===== */
  /* =====================================================
     2 · FILTER TABS
  ===================================================== */
  .filter-sec{
    position:relative;
    background:var(--bg);
    border-top:1px solid var(--hairline);
    padding-top:clamp(40px, 6vw, 72px);
    padding-bottom:clamp(28px, 4vw, 44px);
  }
  .filter-bar{
    position:relative; z-index:2;
    display:flex; flex-wrap:wrap;
    gap:clamp(10px, 1.4vw, 16px);
    align-items:center;
  }
  .filter-label{
    font-family:var(--mono);
    font-size:.66rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--ink-faint);
    margin-right:8px;
  }
  .chip{
    position:relative;
    font-family:var(--mono);
    font-size:.72rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-dim);
    background:transparent;
    border:1px solid var(--hairline-hi);
    border-radius:999px;
    padding:10px 20px;
    cursor:pointer;
    transition:color .25s ease, border-color .25s ease, background .25s ease;
  }
  .chip:hover{ color:var(--accent); border-color:var(--accent-dim); }
  .chip[aria-pressed="true"]{
    color:#0a0a0a;
    background:var(--accent);
    border-color:var(--accent);
  }
  .chip .chip-count{ opacity:.6; margin-left:7px; }

/* ===== 14 GALLERY ===== */
  /* =====================================================
     3 · GALLERY (landers + ads) — elevated cards
  ===================================================== */
  .work-sec{
    position:relative;
    border-top:1px solid var(--hairline);
    padding-top:clamp(56px, 9vw, 120px);
    padding-bottom:clamp(56px, 9vw, 120px);
    overflow:hidden;
  }
  .work-sec--landers{ background:var(--bg-alt); }
  .work-sec--ads{ background:var(--bg); }

  /* filtered-out items collapse */
  .gallery-item{
    transition:opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1);
  }
  .gallery-item.is-filtered{ display:none !important; }
  /* empty-state note when a section has no visible items */
  .work-empty{
    display:none;
    font-family:var(--mono);
    font-size:.74rem;
    letter-spacing:.06em;
    color:var(--ink-faint);
    padding:8px 0;
  }
  .work-sec.is-empty .work-empty{ display:block; }
  .work-sec.is-empty .work-landers,
  .work-sec.is-empty .work-ads{ display:none; }

  .work-landers{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:8px; position:relative; z-index:2; }
  .work-lander{
    position:relative;
    margin:0; border:1px solid var(--hairline); border-radius:12px; overflow:hidden; background:var(--bg);
    transform-style:preserve-3d;
    transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .4s ease, opacity .4s ease;
    will-change:transform;
  }
  .work-lander:hover{ border-color:var(--accent); box-shadow:0 30px 70px rgba(0,0,0,.5); }
  .work-lander .browser{ display:flex; align-items:center; gap:9px; padding:9px 13px; border-bottom:1px solid var(--hairline); }
  .work-lander .dots{ display:inline-flex; gap:5px; }
  .work-lander .dots i{ width:8px; height:8px; border-radius:50%; background:var(--hairline-hi); }
  .work-lander .addr{ font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; color:var(--ink-faint); }
  .work-frame{ position:relative; overflow:hidden; cursor:zoom-in; padding:0; border:none; background:none; width:100%; display:block; }
  .work-lander img,
  .work-ad img{ display:block; width:100%; height:auto; transition:transform .6s cubic-bezier(.22,1,.36,1); }
  .work-lander:hover .work-frame img{ transform:scale(1.045); }
  .work-ad:hover .work-frame img{ transform:scale(1.06); }
  .work-lander figcaption{ font-family:var(--mono); font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-dim); padding:13px 15px; border-top:1px solid var(--hairline); display:flex; align-items:center; justify-content:space-between; gap:12px; }
  /* slide-in View affordance */
  .work-view{
    font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--accent);
    opacity:0; transform:translateX(8px);
    transition:opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1);
  }
  .work-lander:hover .work-view,
  .work-ad:hover .work-view,
  .work-frame:focus-visible + figcaption .work-view{ opacity:1; transform:translateX(0); }
  .work-ads{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; position:relative; z-index:2; }
  .work-ad{
    position:relative;
    margin:0; border:1px solid var(--hairline); border-radius:10px; overflow:hidden; background:var(--bg);
    transform-style:preserve-3d;
    transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .4s ease, opacity .4s ease;
    will-change:transform;
  }
  .work-ad:hover{ border-color:var(--accent); box-shadow:0 22px 50px rgba(0,0,0,.5); }
  .work-ad .work-frame img{ aspect-ratio:4/5; object-fit:cover; }
  .work-ad figcaption{ font-family:var(--mono); font-size:.6rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); padding:9px 11px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
  @media(max-width:980px){ .work-ads{ grid-template-columns:repeat(3,1fr); } }
  @media(max-width:640px){ .work-landers{ grid-template-columns:1fr; } .work-ads{ grid-template-columns:repeat(2,1fr); gap:14px; } }

/* ===== 15 RANGE PILLARS ===== */
  /* =====================================================
     4 · THE RANGE (capability note + pillars)
  ===================================================== */
  .range{
    position:relative;
    background:var(--bg-alt);
    border-top:1px solid var(--hairline);
    padding-top:clamp(72px, 11vw, 150px);
    padding-bottom:clamp(72px, 11vw, 150px);
    overflow:hidden;
  }
  .range-pillars{
    position:relative; z-index:2;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    border-top:1px solid var(--hairline);
    border-left:1px solid var(--hairline);
    margin-top:clamp(8px, 2vw, 24px);
  }
  .range-pillar{
    border-right:1px solid var(--hairline);
    border-bottom:1px solid var(--hairline);
    padding:clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 40px);
    transition:background .3s ease;
  }
  .range-pillar:hover{ background:rgba(244,247,248,.02); }
  .range-pillar .range-index{
    font-family:var(--mono);
    font-size:clamp(2.2rem, 4vw, 3.4rem);
    line-height:1;
    letter-spacing:-.02em;
    color:var(--ink-faint);
    display:block;
    margin-bottom:clamp(24px, 4vw, 40px);
  }
  .range-pillar h3{
    font-family:var(--mono);
    font-weight:500;
    font-size:.75rem;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--ink);
    margin-bottom:14px;
  }
  .range-pillar p{
    font-size:.9375rem;
    line-height:1.6;
    color:var(--ink-dim);
    max-width:30ch;
  }
  @media (max-width: 860px){
    .range-pillars{ grid-template-columns:1fr; }
    .range-pillar .range-index{ margin-bottom:18px; font-size:2rem; }
  }
  .range-note{
    position:relative; z-index:2;
    margin-top:clamp(40px, 6vw, 72px);
    font-family:var(--mono);
    font-size:clamp(.72rem, 1vw, .82rem);
    letter-spacing:.06em;
    line-height:1.8;
    color:var(--ink-faint);
    max-width:62ch;
  }

/* ===== 16 LIGHTBOX ===== */
  /* =====================================================
     LIGHTBOX (built on the booking-modal close pattern)
  ===================================================== */
  .lightbox{ position:fixed; inset:0; z-index:1050; display:none; align-items:center; justify-content:center; padding:clamp(16px,4vw,48px); }
  .lightbox.is-open{ display:flex; }
  .lightbox__backdrop{ position:absolute; inset:0; background:rgba(6,7,9,.88); backdrop-filter:blur(6px); cursor:zoom-out; }
  .lightbox__stage{ position:relative; z-index:2; max-width:min(1200px, 94vw); max-height:90vh; display:flex; flex-direction:column; gap:14px; }
  .lightbox__imgwrap{ position:relative; display:flex; align-items:center; justify-content:center; max-height:80vh; }
  .lightbox__img{ max-width:100%; max-height:80vh; width:auto; height:auto; display:block; border:1px solid var(--hairline-hi); border-radius:8px; box-shadow:0 40px 100px rgba(0,0,0,.7); background:var(--bg-alt); }
  .lightbox__cap{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); text-align:center; }
  .lightbox__close{ position:absolute; top:clamp(8px,2vw,20px); right:clamp(8px,2vw,24px); z-index:4; background:none; border:none; color:var(--ink); font-size:34px; line-height:1; cursor:pointer; opacity:.7; transition:opacity .2s, color .2s; }
  .lightbox__close:hover,.lightbox__close:focus-visible{ opacity:1; color:var(--accent); }
  .lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; background:rgba(10,10,10,.5); border:1px solid var(--hairline-hi); color:var(--ink); width:48px; height:48px; border-radius:50%; font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s, color .2s, border-color .2s; }
  .lightbox__nav:hover,.lightbox__nav:focus-visible{ background:var(--accent); color:#0a0a0a; border-color:var(--accent); }
  .lightbox__nav--prev{ left:clamp(8px,2vw,28px); }
  .lightbox__nav--next{ right:clamp(8px,2vw,28px); }
  body.lightbox-open{ overflow:hidden; }
  @media (max-width:560px){ .lightbox__nav{ width:40px; height:40px; font-size:18px; } }

/* ===== 17 AUDIENCE PANELS ===== */
  /* =====================================================
     3 · WHO IT'S FOR (two large bordered panels)
  ===================================================== */
  .audience{
    position:relative;
    background:var(--bg);
    border-top:1px solid var(--hairline);
    padding-top:clamp(72px, 11vw, 150px);
    padding-bottom:clamp(72px, 11vw, 150px);
    overflow:hidden;
  }
  .aud-grid{
    position:relative; z-index:2;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:clamp(20px, 2.5vw, 28px);
  }
  .aud-card{
    position:relative;
    border:1px solid var(--hairline);
    background:var(--bg-alt);
    padding:clamp(28px, 3.5vw, 48px);
    display:flex; flex-direction:column; gap:20px;
    overflow:hidden;
    transition:border-color .3s ease, transform .45s cubic-bezier(.22,1,.36,1), background .45s ease;
  }
  .aud-card:hover{ border-color:var(--accent-dim); transform:translateY(-6px); background:#141414; }
  .aud-card .aud-tag{
    font-family:var(--mono);
    font-size:.66rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--accent);
  }
  .aud-card h3{
    font-weight:700;
    font-size:clamp(1.4rem, 2.4vw, 1.95rem);
    line-height:1.08;
    letter-spacing:-.02em;
  }
  .aud-card p{
    font-size:.9875rem;
    line-height:1.65;
    color:var(--ink-dim);
  }
  .aud-card ul{ list-style:none; margin-top:auto; border-top:1px solid var(--hairline); }
  .aud-card li{
    font-family:var(--mono);
    font-size:.78rem;
    letter-spacing:.04em;
    color:var(--ink-dim);
    padding:13px 0;
    border-bottom:1px solid var(--hairline);
    display:flex; gap:12px; align-items:center;
  }
  .aud-card li:last-child{ border-bottom:none; }
  .aud-card li::before{ content:"\2192"; color:var(--accent); flex:none; }
  .aud-note{
    position:relative; z-index:2;
    margin-top:clamp(28px, 4vw, 40px);
    font-family:var(--mono);
    font-size:.74rem;
    letter-spacing:.06em;
    color:var(--ink-faint);
    display:flex; align-items:center; gap:14px;
  }
  .aud-note::before{ content:""; width:34px; height:1px; background:var(--accent); flex:none; }
  .aud-note b{ color:var(--accent); font-weight:500; }
  @media (max-width: 680px){
    .aud-grid{ grid-template-columns:1fr; }
  }

/* ===== 18 THREE-STEP MODEL ===== */
  /* =====================================================
     4 · THE MODEL (3-step animated)
  ===================================================== */
  .howto{
    position:relative;
    background:var(--bg-alt);
    border-top:1px solid var(--hairline);
    padding-top:clamp(72px, 11vw, 150px);
    padding-bottom:clamp(72px, 11vw, 150px);
    overflow:hidden;
  }
  .steps{
    position:relative; z-index:2;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    border-top:1px solid var(--hairline);
    border-left:1px solid var(--hairline);
  }
  .step{
    position:relative;
    border-right:1px solid var(--hairline);
    border-bottom:1px solid var(--hairline);
    padding:clamp(28px, 3.5vw, 48px) clamp(24px, 3vw, 40px);
    display:flex; flex-direction:column; gap:18px;
    transition:background .3s ease;
  }
  .step:hover{ background:rgba(244,247,248,.02); }
  /* drawing top-rule per step on view */
  .step::before{
    content:"";
    position:absolute; left:0; top:-1px;
    height:2px; width:100%;
    background:var(--accent);
    transform:scaleX(0);
    transform-origin:0 50%;
    transition:transform .9s cubic-bezier(.22,1,.36,1);
    transition-delay:var(--d, 0ms);
  }
  .step.in-view::before{ transform:scaleX(1); }
  .step__num{
    font-family:var(--mono);
    font-size:clamp(2.2rem, 4vw, 3.4rem);
    line-height:1;
    letter-spacing:-.02em;
    color:var(--ink-faint);
  }
  .step__kicker{
    font-family:var(--mono);
    font-size:.66rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--accent);
  }
  .step h3{
    font-weight:700;
    font-size:clamp(1.25rem, 2vw, 1.55rem);
    line-height:1.1;
    letter-spacing:-.02em;
  }
  .step p{
    font-size:.95rem;
    line-height:1.65;
    color:var(--ink-dim);
  }
  @media (max-width: 820px){
    .steps{ grid-template-columns:1fr; }
  }

/* ===== 19 FAQ ACCORDION ===== */
  /* =====================================================
     7 · FAQ (native <details> accordion)
  ===================================================== */
  .faq{
    position:relative;
    background:var(--bg);
    border-top:1px solid var(--hairline);
    padding-top:clamp(72px, 11vw, 150px);
    padding-bottom:clamp(72px, 11vw, 150px);
    overflow:hidden;
  }
  .faq-list{
    position:relative; z-index:2;
    border-top:1px solid var(--hairline);
    max-width:980px;
  }
  .faq-item{
    border-bottom:1px solid var(--hairline);
  }
  .faq-item summary{
    list-style:none;
    cursor:pointer;
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:24px;
    padding:clamp(22px, 3vw, 32px) 0;
    font-weight:600;
    font-size:clamp(1.05rem, 2vw, 1.45rem);
    line-height:1.25;
    letter-spacing:-.015em;
    color:var(--ink);
    transition:color .25s ease;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary:hover{ color:var(--accent); }
  .faq-item .faq-mark{
    flex:none;
    width:24px; height:24px;
    position:relative;
    margin-top:4px;
  }
  .faq-item .faq-mark::before,
  .faq-item .faq-mark::after{
    content:"";
    position:absolute;
    background:var(--accent);
    transition:transform .3s ease, opacity .3s ease;
  }
  .faq-item .faq-mark::before{ top:11px; left:2px; width:20px; height:1.5px; }
  .faq-item .faq-mark::after{ top:2px; left:11px; width:1.5px; height:20px; }
  .faq-item[open] .faq-mark::after{ transform:scaleY(0); opacity:0; }
  .faq-answer{
    overflow:hidden;
    color:var(--ink-dim);
    font-size:clamp(.95rem, 1.4vw, 1.0625rem);
    line-height:1.7;
    max-width:62ch;
    padding-bottom:clamp(22px, 3vw, 32px);
  }
  .faq-answer p + p{ margin-top:14px; }
  @media (prefers-reduced-motion: no-preference){
    .faq-item[open] .faq-answer{ animation:faqReveal .4s ease; }
    @keyframes faqReveal{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
  }

/* ===== 98 BOOKING MODAL ===== */


/* ===== 99 REDUCED MOTION ===== */
  /* =====================================================
     reduced motion  (everything static and visible)
  ===================================================== */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation:none !important; transition:none !important; }
    html{ scroll-behavior:auto; }
    .reveal{ opacity:1; transform:none; }
    .marquee__track{ animation:none !important; }
    .hero__aurora{ animation:none !important; }
    .scroll-progress{ display:none; }
    .grain{ display:none; }
    .hero .line-mask > span{ transform:none !important; }
    .hero-stagger{ opacity:1 !important; transform:none !important; }
    .stat-rule{ transform:scaleX(1) !important; }
    .pillar-caps li{ opacity:1 !important; transform:none !important; }
    .retainer-seg{ transition:none !important; }
    .retainer .seg-1{ width:36%; } .retainer .seg-2{ width:24%; }
    .retainer .seg-3{ width:28%; } .retainer .seg-4{ width:12%; }
    .manifesto-statement .w,
    .outro-statement .w{ color:var(--ink) !important; }
    .manifesto-statement .w.is-gold{ color:var(--accent) !important; }
    .outro-statement .w em{ color:var(--accent) !important; }
    .pillar::before{ transform:scaleX(1); }
    .pillar::after{ transform:scaleY(1); }
  }

  /* ---------- booking modal ---------- */
  .book-modal{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:24px; }
  .book-modal.is-open{ display:flex; }
  .book-modal__backdrop{ position:absolute; inset:0; background:rgba(6,7,9,.80); backdrop-filter:blur(4px); }
  .book-modal__dialog{ position:relative; z-index:2; width:100%; max-width:760px; max-height:92vh; overflow:auto; background:var(--bg-alt); border:1px solid var(--hairline-hi); border-radius:16px; padding:26px 26px 22px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
  .book-modal__close{ position:absolute; top:12px; right:16px; background:none; border:none; color:var(--ink); font-size:30px; line-height:1; cursor:pointer; opacity:.65; transition:opacity .2s, color .2s; }
  .book-modal__close:hover,.book-modal__close:focus-visible{ opacity:1; color:var(--accent); outline:none; }
  .book-modal__eyebrow{ font-family:var(--mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
  .book-modal__title{ font-weight:700; font-size:1.55rem; margin:8px 0 4px; letter-spacing:-.02em; }
  .book-modal__sub{ font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--ink-faint); margin-bottom:18px; }
  .book-modal__frame{ position:relative; min-height:690px; }
  .book-modal__skeleton{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
  .book-modal.is-loaded .book-modal__skeleton{ display:none; }
  #book-iframe{ width:100%; min-height:690px; border:none; opacity:0; transition:opacity .4s ease; }
  .book-modal.is-loaded #book-iframe{ opacity:1; }
  body.book-open{ overflow:hidden; }
  @media(max-width:640px){ .book-modal{ padding:0; } .book-modal__dialog{ max-width:100%; height:100vh; max-height:100vh; border-radius:0; } .book-modal__frame,#book-iframe{ min-height:78vh; } }