:root{
    --paper:#ECEAE0;
    --paper-2:#E2DED1;
    --ink:#141310;
    --ink-2:#2A2722;
    --line:rgba(20,19,16,0.14);
    --accent:#ffdfb3;
    --accent-ink:#1A1612;
    --moss:#6C8C6A;
    --panel:#0E0D0B;
    --panel-fg:#EEEAE0;

    /* Scroll-driven scalars, written by App() on scroll. Declared here so the
       backdrop gradients and scroll hint resolve correctly on first paint,
       before React mounts. Numeric, not colours — see calc() uses below. */
    --dim:0;
    --hintOp:1;
  }
  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  html,body{ margin:0; padding:0; background:#000; color:var(--ink);
    font-family:'Geist','Helvetica Neue',Helvetica,system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  body{ overflow-x:hidden; }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; }

  /* ===== Global scroll-driven video backdrop ===== */
  .video-backdrop{
    position:fixed; inset:0; z-index:0; overflow:hidden;
    background:#0a0806;
  }
  .video-backdrop::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(ellipse 90% 70% at 50% 55%, transparent 30%, rgba(0,0,0, calc(0.25 + var(--dim, 0) * 0.55)) 100%),
      linear-gradient(180deg, rgba(0,0,0, calc(0.15 + var(--dim, 0) * 0.4)) 0%, transparent 18%, transparent 70%, rgba(0,0,0, calc(0.35 + var(--dim, 0) * 0.45)) 100%);
    transition: background .2s;
  }
  .video-backdrop .grain-overlay{
    position:absolute; inset:0; pointer-events:none; opacity:.18; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  }

  /* Page stack sits above backdrop */
  .page{ position:relative; z-index:1; }

  .mono{ font-family:'JetBrains Mono',ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
  .serif-i{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; letter-spacing:-.01em; }

  /* Grain. The design ships with grain OFF (it was toggled off in the design
     session and the prototype hid these with an injected stylesheet). The rules
     are kept intact — delete the block below to turn grain back on. */
  .grain::after, .grain-lite::after, .video-backdrop .grain-overlay{ display:none; }

  .grain::after{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
  }
  .grain-lite::after{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.12; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  }

  /* word reveal */
  .reveal{ overflow:hidden; display:inline-block; vertical-align:bottom; }
  .reveal > span{
    display:inline-block; transform:translateY(105%); opacity:0;
    transition:transform 900ms cubic-bezier(.16,1,.3,1), opacity 700ms ease;
    transition-delay: calc(var(--i,0) * 70ms);
  }
  .in .reveal > span{ transform:translateY(0); opacity:1; }

  /* generic fade-up */
  .fade{ opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .9s cubic-bezier(.16,1,.3,1); transition-delay:var(--d,0ms); }
  .in .fade{ opacity:1; transform:none; }

  /* scroll-revealed letters (fallback: just show all) */
  .letters span{ opacity:.22; transition:opacity .25s ease; }
  .in .letters span{ opacity:1; }
  @supports (animation-timeline: view()){
    .letters span{
      animation: letter-fade linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 40%;
      opacity:.22;
    }
    @keyframes letter-fade{ to{ opacity:1; } }
  }

  /* buttons */
  .btn-pill{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--ink); color:var(--paper);
    border:none; border-radius:999px;
    padding:6px 6px 6px 22px;
    font-size:15px; font-weight:500; letter-spacing:-.01em;
    cursor:pointer; transition:gap .2s ease, background .2s ease;
  }
  .btn-pill:hover{ gap:14px; }
  .btn-pill .dot{
    width:38px; height:38px; border-radius:999px;
    background:var(--accent); color:var(--ink);
    display:flex; align-items:center; justify-content:center;
    transition:transform .25s ease;
  }
  .btn-pill:hover .dot{ transform:rotate(-45deg); }
  .btn-pill.on-video{ background:var(--paper); color:var(--ink); }
  .btn-pill.on-video .dot{ background:var(--ink); color:var(--paper); }

  .btn-ghost{
    display:inline-flex; align-items:center; gap:8px;
    background:transparent; border:1px solid var(--line); color:var(--ink);
    border-radius:999px; padding:8px 16px; font-size:13px; cursor:pointer;
    transition:background .2s ease;
  }
  .btn-ghost:hover{ background:rgba(20,19,16,0.06); }

  /* Hero common */
  .hero-wrap{ padding:14px; height:100vh; min-height:720px; }

  /* ===== Intro overlay: pinned scroll-driven cinematic dolly ===== */
  .intro-scene{
    position:relative; height: 400vh;   /* 4 viewports of scroll driven by the frame sequence */
    pointer-events:none;
  }
  .intro-pin{
    position:sticky; top:0; height:100vh; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
  }
  .intro-prompt{
    position:absolute; top:42%; left:50%; transform:translate(-50%, -50%);
    text-align:center; pointer-events:none;
    opacity: var(--promptOp, 1);
  }
  .intro-prompt .k{
    font-family:'JetBrains Mono',monospace;
    font-size:11px; letter-spacing:.4em; text-transform:uppercase;
    color:rgba(255,255,255,.6); margin-bottom:20px;
  }
  .intro-prompt .q{
    font-family:'Instrument Serif', serif; font-style:italic; font-weight:400;
    font-size:clamp(34px, 4.2vw, 64px); line-height:1.08; letter-spacing:-.015em;
    color:#fff; max-width:22ch; margin:0 auto;
  }

  .hi-wave{
    position:absolute;
    /* positioned where the subject's raised hand would appear in the final close-up framing */
    top: 38%; left: 56%;
    transform: translate(-50%, -50%) scale(var(--waveScale, 0.6));
    opacity: var(--waveOp, 0);
    transform-origin: 50% 90%;
    pointer-events:none;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,.45));
    z-index: 4;
  }
  .hi-wave .hand{
    animation: waveRot 1.4s ease-in-out infinite;
    transform-origin: 50% 100%;
    display:inline-block;
  }
  @keyframes waveRot{
    0%,100% { transform: rotate(-16deg); }
    25%     { transform: rotate(18deg); }
    50%     { transform: rotate(-10deg); }
    75%     { transform: rotate(22deg); }
  }
  .hi-text{
    position:absolute;
    top: 36%; left: 70%;
    transform: translate(-50%, -50%) scale(var(--hiScale, 0.8));
    opacity: var(--hiOp, 0);
    font-family:'Instrument Serif',serif; font-style:italic;
    font-size: clamp(72px, 11vw, 180px); letter-spacing:-.025em;
    color:#fff;
    text-shadow:0 4px 40px rgba(0,0,0,.5);
    pointer-events:none;
  }
  .hi-text .ex{ color:var(--accent); }

  /* Name reveal — fills bottom of intro */
  .intro-name{
    position:absolute; bottom: 40px; left: 40px; right: 40px;
    display:grid; grid-template-columns: 1fr auto; gap:40px; align-items:flex-end;
    color:#fff;
    opacity: var(--nameOp, 0);
    transform: translateY(calc((1 - var(--nameOp, 0)) * 40px));
  }
  .intro-name h1{
    margin:0;
    font-family:'Geist', sans-serif; font-weight:500;
    font-size: clamp(96px, 15vw, 260px); line-height:.85; letter-spacing:-.05em;
  }
  .intro-name h1 .i{
    font-family:'Instrument Serif',serif; font-style:italic; font-weight:400;
    color:var(--accent);
  }
  .intro-name .side{
    max-width: 320px; padding-bottom: 20px;
    display:flex; flex-direction:column; gap:16px;
  }
  .intro-name .side .tag{ font-size:14px; line-height:1.5; color:rgba(255,255,255,.82); }
  .intro-name .side .cta{
    display:inline-flex; align-items:center; gap:10px; align-self:flex-start;
    padding:5px 5px 5px 20px;
    background: rgba(255,255,255,0.12); backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.25);
    border-radius:999px; color:#fff; cursor:pointer;
    font-size:14px; pointer-events:auto;
  }
  .intro-name .side .cta .dot{
    width:34px; height:34px; border-radius:999px;
    background:#fff; color:var(--ink); display:flex; align-items:center; justify-content:center;
  }

  /* Intro centered title block (over the scroll-driven frames) */
  .intro-title{
    position:absolute; left:50%; top:42%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
    text-align: center;
    color: var(--paper);
    opacity: var(--introTitleOp, 1);
    transition: opacity .15s linear;
    width: 100%;
    padding: 0 24px;
  }
  /* The type lands on the brightest part of the frame — the sunlit cloud bank —
     where cream-on-cream loses almost all contrast. This is a soft scrim that
     sits behind the words only. Localised and heavily feathered, so it buys
     legibility without flattening the rest of the shot. */
  .intro-title::before{
    content:"";
    position:absolute; left:50%; top:50%;
    transform:translate(-50%, -50%);
    width: min(1500px, 130%);
    height: 320%;
    z-index:-1;
    pointer-events:none;
    background: radial-gradient(ellipse 50% 50% at 50% 50%,
      rgba(6,6,8,.58) 0%,
      rgba(6,6,8,.44) 38%,
      rgba(6,6,8,.20) 62%,
      rgba(6,6,8,0)   78%);
  }
  .intro-title .eyebrow{
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(255,255,255,.94);
    text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.5);
    margin-bottom: 22px;
    display: inline-flex; align-items: center; gap: 10px;
  }
  .intro-title .eyebrow::before,
  .intro-title .eyebrow::after{
    content:""; width: 24px; height: 1px;
    background: rgba(255,255,255,.7);
  }
  .intro-title h1{
    font-family: 'Instrument Serif', serif;
    font-weight: 400; font-style: italic;
    font-size: clamp(52px, 7.6vw, 120px);
    line-height: 1.05;
    letter-spacing: -.015em;
    margin: 0;
    color: #fff;
    /* Layered: a tight shadow for edge definition against the clouds, a wide
       one to lift the whole word off the background. */
    text-shadow:
      0 1px 2px rgba(0,0,0,.5),
      0 3px 14px rgba(0,0,0,.5),
      0 10px 60px rgba(0,0,0,.4);
  }
  .intro-title h1 em{
    /* "Scroll to meet" — about half size, italic serif */
    font-size: .52em;
    font-style: italic;
    display: inline-block;
    vertical-align: baseline;
    margin-right: .08em;
    color: rgba(255,255,255,.96);
    letter-spacing: 0;
  }
  .intro-title h1 .n{
    /* "Madhu." — large sans */
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 500;
    letter-spacing: -.02em;
  }

  /* Scroll hint */
  .scroll-hint{
    position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
    color:rgba(255,255,255,.7); font-family:'JetBrains Mono',monospace;    font-size:10px; letter-spacing:.3em; text-transform:uppercase;
    opacity: var(--hintOp, 1);
    display:flex; align-items:center; gap:10px;
  }
  .scroll-hint::after{ content:""; width:1px; height:22px; background:currentColor; display:inline-block;
    animation: scrollTickBlink 1.6s ease-in-out infinite; }
  @keyframes scrollTickBlink{
    0%,100% { opacity:.3; } 50% { opacity:1; }
  }
  .hero{
    position:relative; width:100%; height:100%;
    border-radius:22px; overflow:hidden; background:#111;
  }
  .hero video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  }
  .hero .scrim-t{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, transparent 30%, transparent 55%, rgba(0,0,0,.62) 100%); pointer-events:none; }

  /* Nav (shared). Gap, padding and size scale with the viewport: at its natural
     28px gap the five items measure ~405px, which overflowed a 390px phone and
     got silently clipped by body{overflow-x:hidden}. clamp() keeps the desktop
     proportions and shrinks it to fit rather than cutting "Story" and
     "Connect" off the ends. */
  .nav-pill{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    background:var(--ink); color:var(--paper);
    border-radius:0 0 18px 18px;
    padding:10px clamp(13px, 3vw, 26px) 12px;
    display:flex; gap:clamp(12px, 3.2vw, 28px); z-index:5;
    font-size:clamp(11px, 2.6vw, 13px);
    max-width:calc(100vw - 12px);
    /* .intro-scene is pointer-events:none so the scrubber never eats scroll;
       the nav has to opt back in or its links are unclickable. */
    pointer-events:auto;
  }
  .nav-pill a{ color:inherit; text-decoration:none; cursor:pointer; }
  .nav-pill a:hover{ color:var(--accent); }
  .nav-pill a{ color:rgba(242,238,229,.74); transition:color .2s; letter-spacing:-.005em; }
  .nav-pill a:hover{ color:var(--paper); }
  .nav-pill .dot-sep{ width:4px; height:4px; border-radius:2px; background:var(--accent); align-self:center; }
  .nav-pill .book{
    display:inline-flex; align-items:center; padding:5px 12px; margin:-2px 0;
    border-radius:999px; background:var(--accent); color:var(--ink); font-weight:600;
    transition:filter .2s ease;
  }
  .nav-pill .book:hover{ color:var(--ink); filter:brightness(1.06); }
  .nav-pill .book .short{ display:none; }
  @media (max-width: 560px){
    .nav-pill{ gap:clamp(8px, 2.4vw, 14px); }
    .nav-pill .book .long{ display:none; }
    .nav-pill .book .short{ display:inline; }
  }

  /* corner labels */
  .corner{ position:absolute; font-size:11px; color:rgba(242,238,229,.78); z-index:4; }
  .corner.tl{ top:20px; left:24px; }
  .corner.tr{ top:20px; right:24px; text-align:right; }
  .corner.bl{ bottom:20px; left:24px; }
  .corner.br{ bottom:20px; right:24px; text-align:right; }

  /* ===== Hero A: Full-bleed Prisma-style ===== */
  .heroA{ position:relative; overflow:hidden; background:#0a0806; }
  .heroA > video{
    position:absolute; inset:-6%;
    width:112%; height:112%; object-fit:cover;
    animation: kenburns 18s ease-in-out infinite alternate;
    will-change: transform;
  }

  /* Frame scrubber — swaps for the video in Hero A */
  .frame-scrub{ position:absolute; inset:0; overflow:hidden; }
  .frame-scrub .stage{
    position:absolute; inset:0;
    background:#0a0806;
  }
  .frame-scrub .stage img,
  .frame-scrub .stage canvas{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
    transform: translateZ(0);
    backface-visibility: hidden;
    user-select:none; pointer-events:none;
    -webkit-user-drag:none;
  }
  /* The canvas is opaque, so it stays hidden while the sequence is parked on
     frame 1 — that leaves the full-resolution poster visible, and means the
     canvas never flashes black before its first paint. `.live` is toggled from
     paint() as soon as the sequence moves off frame 1. */
  .frame-scrub .stage canvas{ opacity:0; transition:opacity .28s ease; }
  .frame-scrub .stage.live canvas{ opacity:1; }
  .frame-scrub .loader{
    position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
    color:var(--paper);
    font-family:'Geist Mono', monospace; font-size:11px; letter-spacing:.12em;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    z-index:2;
  }
  .frame-scrub .loader .track{
    width:140px; height:1px; background:rgba(242,238,229,.2); overflow:hidden;
  }
  .frame-scrub .loader .fill{
    height:100%; background:var(--paper); width:0%;
    transition: width .15s linear;
  }
  .heroA .scrim{
    position:absolute; inset:0; pointer-events:none;
    background:
      linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 50%, rgba(0,0,0,.72) 100%),
      radial-gradient(ellipse at 25% 100%, rgba(0,0,0,.55) 0%, transparent 55%);
  }
  .heroA .bottom{
    position:absolute; left:0; right:0; bottom:0;
    padding: 0 40px 40px;
    display:grid; grid-template-columns: 1fr auto; gap:40px;
    align-items:flex-end;
    z-index:3;
  }
  .heroA .wordmark{
    position:relative;
    font-family:'Instrument Serif', serif;
    font-style:normal; font-weight:400;
    font-size: clamp(120px, 19vw, 340px);
    line-height:.82; letter-spacing:-.03em;
    color:var(--paper); margin:0;
    white-space:nowrap;
  }
  .heroA .wordmark .aster{
    position:absolute; top:.18em; font-size:.26em;
    margin-left:.04em; color:var(--paper);
    font-family:'Geist',sans-serif; font-weight:400;
  }
  .heroA .right-block{
    max-width:360px; padding-bottom: 14px;
    display:flex; flex-direction:column; gap:18px;
    color:var(--paper);
  }
  .heroA .right-block .tag{
    font-size:14px; line-height:1.5;
    color:rgba(242,238,229,.85);
  }
  .heroA .right-block .tag .i{
    font-family:'Instrument Serif',serif; font-style:italic; color:var(--accent);
  }
  .heroA .right-block .cta{
    display:inline-flex; align-items:center; gap:10px;
    align-self:flex-start;
    padding: 5px 5px 5px 20px;
    background:rgba(14,13,11,.55); backdrop-filter: blur(10px);
    border:1px solid rgba(242,238,229,.25);
    border-radius:999px; color:var(--paper); cursor:pointer;
    font-family:'Geist',sans-serif; font-size:14px; font-weight:400;
    transition: background .2s ease, gap .2s ease;
  }
  .heroA .right-block .cta:hover{ background:rgba(14,13,11,.75); gap:14px; }
  .heroA .right-block .cta .dot{
    width:34px; height:34px; border-radius:999px;
    background:var(--paper); color:var(--ink);
    display:flex; align-items:center; justify-content:center;
  }
  @keyframes kenburns{
    0%   { transform: scale(1.04) translate3d(-1.2%, 0.6%, 0); }
    50%  { transform: scale(1.14) translate3d(1.8%, -1.4%, 0); }
    100% { transform: scale(1.08) translate3d(-0.6%, 1.6%, 0); }
  }
  @keyframes kenburns-full{
    0%   { transform: scale(1.05) translate3d(0.5%, -0.8%, 0); }
    50%  { transform: scale(1.18) translate3d(-1.8%, 1.2%, 0); }
    100% { transform: scale(1.09) translate3d(1.4%, 0.5%, 0); }
  }

  /* Marquee ticker */
  .ticker{
    position:absolute; left:0; right:0; bottom:0;
    overflow:hidden; z-index:3;
    background:var(--accent);
    border-top:1px solid rgba(0,0,0,.15);
    padding:14px 0;
    color:var(--ink);
  }
  .ticker.dark{ background:var(--ink); color:var(--paper); }
  .ticker .track{
    display:flex; gap:48px; white-space:nowrap; width:max-content;
    animation: marquee 36s linear infinite;
    font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
    font-weight:500;
  }
  .ticker .track span.dot{
    width:8px; height:8px; border-radius:4px; background:currentColor;
    align-self:center; opacity:.5;
  }
  @keyframes marquee{
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }

  /* Parallax controller — JS writes --scrollY */
  .hero video.parallax{
    transform: translate3d(0, calc(var(--scrollY, 0px) * 0.35), 0) scale(1.06);
  }

  /* Coffee cup prop */
  .coffee{
    position:absolute; z-index:4;
    right:24px; bottom:84px;
    width:130px; height:150px;
    filter: drop-shadow(0 18px 24px rgba(0,0,0,.35));
    animation: coffeeBob 5.5s ease-in-out infinite;
    transform-origin:50% 90%;
  }
  .coffee .steam{
    position:absolute; left:50%; top:-6px;
    width:4px; height:38px;
    background:linear-gradient(to top, rgba(255,255,255,.55), rgba(255,255,255,0));
    border-radius:4px;
    filter: blur(2.5px);
    opacity:.75;
    animation: steam 2.6s ease-in infinite;
  }
  .coffee .steam.s2{ left:calc(50% - 14px); animation-delay:.7s; height:30px; }
  .coffee .steam.s3{ left:calc(50% + 12px); animation-delay:1.2s; height:34px; }
  @keyframes coffeeBob{
    0%,100% { transform: translateY(0) rotate(-1.5deg); }
    50%     { transform: translateY(-6px) rotate(1.5deg); }
  }
  @keyframes steam{
    0%   { transform: translate(-50%, 8px) scaleY(.6); opacity:0; }
    30%  { opacity:.8; }
    100% { transform: translate(calc(-50% + 8px), -32px) scaleY(1.1); opacity:0; }
  }

  /* Float badge over hero */
  .float-badge{
    position:absolute; z-index:3;
    background:rgba(14,13,11,.7); backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.1);
    color:var(--paper);
    border-radius:14px;
    padding:12px 16px;
    display:flex; gap:12px; align-items:center;
    font-size:12px;
  }
  .float-badge .pulse{
    width:8px; height:8px; border-radius:4px; background:#7ed957;
    position:relative;
    box-shadow:0 0 0 0 rgba(126,217,87,.7);
    animation: pulseDot 1.8s ease-out infinite;
  }
  @keyframes pulseDot{
    0%   { box-shadow:0 0 0 0 rgba(126,217,87,.6); }
    70%  { box-shadow:0 0 0 14px rgba(126,217,87,0); }
    100% { box-shadow:0 0 0 0 rgba(126,217,87,0); }
  }

  /* ===== Hero B: Scroll-driven cinematic ===== */
  .heroB-scroll{ position:relative; height: 320vh; background:#000; }
  .heroB-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; }
  .heroB{ position:relative; width:100%; height:100%; overflow:hidden; }
  .heroB > video{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
    transform-origin: var(--vox, 85%) var(--voy, 42%);
    transform: scale(var(--vscale, 1.6));
    will-change: transform, transform-origin;
  }
  .heroB .vignette{
    position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,calc(var(--vig, 0.55))) 100%),
      linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 20%, transparent 60%, rgba(0,0,0,.7) 100%);
  }
  .heroB .intro-label{
    position:absolute; top:48%; left:50%; transform:translate(-50%,-50%);
    color:#fff; text-align:center; z-index:4;
    opacity: var(--introOp, 1);
    transition:opacity .2s;
  }
  .heroB .intro-label .k{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.3em; opacity:.7; margin-bottom:18px;}
  .heroB .intro-label .q{ font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(40px, 5vw, 76px); line-height:1.1; letter-spacing:-.01em; max-width:18ch; margin:0 auto; }

  /* Hand wave */
  .hand-wave{
    position:absolute; z-index:5;
    top: 50%; left: 66%;
    transform: translate(-50%,-50%) scale(var(--handScale, .2));
    opacity: var(--handOp, 0);
    transform-origin:center 80%;
    pointer-events:none;
  }
  .hand-wave.waving{ animation: wave 1.6s ease-in-out infinite; }
  @keyframes wave{
    0%,100% { transform: translate(-50%,-50%) scale(var(--handScale,1)) rotate(-12deg); }
    25%     { transform: translate(-50%,-50%) scale(var(--handScale,1)) rotate(18deg); }
    50%     { transform: translate(-50%,-50%) scale(var(--handScale,1)) rotate(-8deg); }
    75%     { transform: translate(-50%,-50%) scale(var(--handScale,1)) rotate(22deg); }
  }

  .hi-bubble{
    position:absolute; z-index:6;
    top: 36%; left: 72%;
    font-family:'Instrument Serif',serif; font-style:italic;
    font-size: clamp(64px, 8vw, 128px);
    color:#fff; letter-spacing:-.02em;
    opacity: var(--hiOp, 0);
    transform: translate(-50%,-50%) scale(var(--hiScale, .85));
    transform-origin:left bottom;
    text-shadow:0 4px 32px rgba(0,0,0,.4);
  }
  .hi-bubble .excl{ color:var(--accent); }

  .heroB .final-block{
    position:absolute; left:40px; bottom:40px; right:40px;
    z-index:4; color:#fff;
    opacity: var(--finalOp, 0);
    transform: translateY(calc((1 - var(--finalOp, 0)) * 30px));
    display:grid; grid-template-columns: 1fr auto; gap:32px; align-items:flex-end;
  }
  .heroB .final-block h1{
    margin:0; font-family:'Geist',sans-serif; font-weight:500;
    font-size: clamp(80px, 14vw, 220px); line-height:.85; letter-spacing:-.05em;
  }
  .heroB .final-block h1 .i{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; color:var(--accent); }
  .heroB .final-block .side{ max-width:320px; padding-bottom: 16px; }
  .heroB .final-block .side .tag{ font-size:14px; line-height:1.5; color:rgba(255,255,255,.8); margin-bottom:18px; }

  /* Scroll hint */
  .scroll-hint{
    position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
    z-index:4; color:rgba(255,255,255,.7);
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em;
    opacity: var(--hintOp, 1);
    display:flex; align-items:center; gap:10px;
  }
  .scroll-hint::before{ content:""; width:1px; height:28px; background:currentColor; animation: scrollTick 1.8s ease-in-out infinite; }
  @keyframes scrollTick{
    0%   { transform:scaleY(0); transform-origin:top; }
    50%  { transform:scaleY(1); transform-origin:top; }
    51%  { transform-origin:bottom; }
    100% { transform:scaleY(0); transform-origin:bottom; }
  }

  /* Legacy B extras removed — fixed video now fills the whole page */

  /* ===== Hero C: Type-spec grid ===== */
  .heroC .grid-name{
    position:absolute; inset:24px;
    display:grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr);
    pointer-events:none;
  }
  .heroC .cell{
    border:1px solid rgba(242,238,229,0.18);
    padding:14px 16px;
    color:#fff; position:relative;
  }
  .heroC .cell .ix{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; opacity:.5; }
  .heroC .letter{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    font-family:'Geist',sans-serif; font-weight:700; letter-spacing:-.06em;
    font-size:clamp(80px, 14vw, 220px); line-height:.78; color:#fff;
  }
  .heroC .letter.i{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; color:var(--accent); }
  .heroC .foot{
    position:absolute; left:40px; right:40px; bottom:40px;
    display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
    color:var(--paper);
  }
  .heroC .foot .tag{ max-width:36ch; font-size:15px; line-height:1.4; }

  /* ===== Name Page: standalone hero-style section =====
     Scroll choreography:
       phase A (prog 0.00 → 0.35): plain full-bleed hero, no frame, no zoom
       phase B (prog 0.35 → 0.65): cream frame pops IN, content zooms in
       phase C (prog 0.65 → 1.00): frame pops OUT / disappears, content zooms back to 1
     --frame-vis  (0..1)  : how visible the frame is (bell curve)
     --zoom-k     (0..1)  : content zoom intensity (same bell curve)
     --frame-inset-extra  : extra inward push as frame pops in
  */
  .name-page{
    position:relative;
    min-height: 130vh;   /* enough scroll for frame to pop in, then about follows immediately */
    color:#fff;
    --frame-color: #f1ede4;
    --frame-vis: 0;      /* set by JS, bell 0→1→0 */
    --zoom-k:   0;      /* set by JS, bell 0→1→0 */
    /* when vis=1 the frame is 38px; when vis=0 the frame collapses to 0 (invisible) */
    --frame-inset: calc( 38px * var(--frame-vis) );
    --window-radius: calc( 32px * var(--frame-vis) );
  }
  .name-pin{
    position: sticky; top: 0;
    height: 100vh;
    display:flex; flex-direction:column;
    padding: calc(var(--frame-inset) + 34px) calc(var(--frame-inset) + 36px) calc(var(--frame-inset) + 30px);
  }

  /* Cream frame surround — 4 bars. Fully invisible until vis>0. */
  .name-pin::before,
  .name-pin::after,
  .name-pin > .frame-l,
  .name-pin > .frame-r{
    content:"";
    position:absolute;
    background: var(--frame-color);
    z-index: 3;
    pointer-events:none;
    opacity: var(--frame-vis);
    will-change: width, height, opacity;
  }
  .name-pin::before{ top:0; left:0; right:0; height: var(--frame-inset); }
  .name-pin::after { bottom:0; left:0; right:0; height: var(--frame-inset); }
  .name-pin > .frame-l{ top:0; bottom:0; left:0;  width: var(--frame-inset); }
  .name-pin > .frame-r{ top:0; bottom:0; right:0; width: var(--frame-inset); }

  /* Depth shadow around the video window — also gated by --frame-vis */
  .name-pin > .frame-shadow{
    position:absolute;
    inset: var(--frame-inset);
    z-index: 2;
    pointer-events: none;
    border-radius: var(--window-radius);
    opacity: 0;
    /* shadow removed — section connects seamlessly to the next */
  }
  /* Rounded inner corners — only render when frame is visible */
  .name-pin > .frame-corner{
    position:absolute;
    width: calc(var(--window-radius) + 1px);
    height: calc(var(--window-radius) + 1px);
    background:
      radial-gradient(circle at var(--cx) var(--cy),
        transparent calc(var(--window-radius) - 0.5px),
        var(--frame-color) var(--window-radius));
    z-index: 3;
    opacity: var(--frame-vis);
    pointer-events:none;
  }
  .name-pin > .frame-corner.tl{ top: var(--frame-inset); left: var(--frame-inset); --cx:100%; --cy:100%; }
  .name-pin > .frame-corner.tr{ top: var(--frame-inset); right: var(--frame-inset); --cx:0;    --cy:100%; }
  .name-pin > .frame-corner.bl{ bottom: var(--frame-inset); left: var(--frame-inset); --cx:100%; --cy:0;   }
  .name-pin > .frame-corner.br{ bottom: var(--frame-inset); right: var(--frame-inset); --cx:0;    --cy:0;  }

  /* Corner stamps — tied to frame visibility so they appear/disappear with the frame */
  .name-pin .corner{
    position:absolute;
    font-family:'JetBrains Mono', monospace;
    font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    color: rgba(255,255,255,.82);
    z-index: 4;
    opacity: var(--frame-vis);
  }
  .name-pin .corner.tl{ top: calc(var(--frame-inset) + 22px); left: calc(var(--frame-inset) + 26px); }
  .name-pin .corner.tr{ top: calc(var(--frame-inset) + 22px); right: calc(var(--frame-inset) + 26px); }

  /* Name stack — small zoom in (1 → 1.08) only during the framed interlude; returns to 1 */
  .name-title-wrap{
    flex:1;
    position: relative;
    z-index: 4;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    padding: 0 40px;
    transform: translateY(8vh) scale( calc( 1 + 0.08 * var(--zoom-k) ) );
    transform-origin: center center;
    will-change: transform;
  }
  .name-pin > .name-bar{
    /* footer fades in only with the frame */
    opacity: var(--frame-vis);
  }
  .name-title{
    margin:0;
    color:#fff;
    font-weight: 600;
    line-height: 0.86;
    letter-spacing: -0.045em;
    text-shadow: 0 6px 50px rgba(0,0,0,.35);
  }
  .name-title .l1{
    display:block;
    font-family: 'Geist', 'Helvetica Neue', sans-serif;
    font-weight: 600;
    font-size: clamp(92px, 14vw, 240px);
    letter-spacing: -0.05em;
  }
  .name-title .greet{
    display:block;
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(26px, 3vw, 48px);
    letter-spacing: 0;
    line-height: 1;
    color: rgba(255,255,255,.85);
    margin-bottom: 8px;
    text-align: left;
    padding-left: 2%;
  }
  .name-title .l2{
    display:block;
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(40px, 6vw, 96px);  /* ~45% of Madhu */
    letter-spacing: -0.01em;
    line-height: 1;
    text-align: right;
    padding-left: 0;
    margin-top: -0.22em;
  }
  .name-title .l2 .dot{ color: var(--accent); }
  .name-title .l2 .aster{
    display: inline-block;
    font-size: .35em;
    vertical-align: super;
    color: var(--accent);
    margin-left: .18em;
  }

  /* Bottom info bar — tagline + CTA, tucked INSIDE the cream frame */
  .name-bar{
    position: absolute;
    left: var(--frame-inset);
    right: var(--frame-inset);
    bottom: var(--frame-inset);
    z-index: 4;
    display:grid; grid-template-columns: 1.4fr 1.4fr auto;
    gap: 32px; align-items: center;
    padding: 10px 22px;
    background: linear-gradient(to top, rgba(10,8,6,.78), rgba(10,8,6,.35));
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom-left-radius: var(--window-radius);
    border-bottom-right-radius: var(--window-radius);
  }
  .name-bar .mini{
    font-family:'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing:.2em; text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-bottom: 4px;
  }
  .name-bar .col p{ margin: 0; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.85); max-width: 46ch; }
  .name-bar .col p .i{ font-family:'Instrument Serif', serif; font-style: italic; color: var(--accent); }
  .name-bar .cta{
    display:inline-flex; align-items:center; gap:8px;
    padding: 3px 3px 3px 16px;
    background: #fff; color: var(--ink);
    border: none; border-radius: 999px;
    font-family: 'Geist', sans-serif; font-weight: 500; font-size: 12px;
    cursor: pointer;
    transition: gap .2s ease;
  }
  .name-bar .cta:hover{ gap: 12px; }
  .name-bar .cta .dot{
    width: 28px; height: 28px; border-radius: 999px;
    background: var(--ink); color: #fff;
    display:flex; align-items:center; justify-content:center;
  }

  /* Scroll line hint below hero footer */
  .name-scroll-line{
    display:flex; align-items:center; justify-content:center; gap: 14px;
    margin-top: 22px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
    color: rgba(255,255,255,.55);
  }
  .name-scroll-line .rule{
    flex:1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
    max-width: 38%;
  }
  .name-scroll-line .tick{
    width: 1px; height: 14px; background: currentColor;
    animation: scrollTickBlink 1.6s ease-in-out infinite;
  }
  section.about{ padding:120px 24px; background: var(--paper); color:#fff; }
  .about-inner{
    max-width:1280px; margin:0 auto;
    background: #0A0907;
    border: 1px solid rgba(255,255,255,.06);
    color:#fff;
    border-radius:28px; padding:100px 48px 120px;
    position:relative; overflow:hidden;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 30px 60px -20px rgba(20, 17, 12, 0.45),
      0 80px 120px -40px rgba(20, 17, 12, 0.35),
      0 2px 6px rgba(20, 17, 12, 0.18);
  }
  .about-inner .eyebrow{ text-align:center; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em; color: rgba(255,255,255,.55); margin-bottom:28px; }
  .about-inner .eyebrow::before, .about-inner .eyebrow::after{ content:""; display:inline-block; width:28px; height:1px; background: rgba(255,255,255,.4); vertical-align:middle; margin:0 12px 3px; }
  .about-head{
    font-size:clamp(36px, 5.4vw, 86px); line-height:.98; letter-spacing:-.035em; font-weight:500;
    text-align:center; max-width:1040px; margin:0 auto; color:#fff;
  }
  .about-head .i{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; letter-spacing:-.015em; }
  .about-head .hi{ color:var(--accent); }
  .about-body{
    max-width:640px; margin:64px auto 0; text-align:center;
    font-size:17px; line-height:1.6; color: rgba(255,255,255,.85);
  }
  .about-stats{
    margin-top:72px; max-width:880px; margin-left:auto; margin-right:auto;
    display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
    border-top:1px solid rgba(255,255,255,.15); padding-top:28px;
  }
  .about-stats .s{ text-align:left; }
  .about-stats .k{ font-family:'Geist',sans-serif; font-weight:600; font-size:40px; letter-spacing:-.04em; line-height:1; margin-bottom:8px; color:#fff; }
  .about-stats .k .i{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; color:var(--accent); }
  .about-stats .l{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.55); }

  /* ============ FEATURES ============ */
  section.features{ padding:100px 24px 160px; background: var(--paper); position:relative; color:#fff; }
  .features .head{ max-width:1280px; margin:0 auto 56px; text-align:center; }
  .features .head h2{
    font-size:clamp(28px, 3.8vw, 56px); line-height:1.02; letter-spacing:-.025em; font-weight:500;
    max-width:900px; margin:0 auto; color:var(--ink);
  }
  .features .head h2 .dim{ color: rgba(20,19,16,.42); }
  .features .head h2 .i{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; }
  .cards{
    max-width:1280px; margin:0 auto;
    display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;
  }
  .card{
    background: linear-gradient(160deg, rgba(18,16,13,.92) 0%, rgba(10,9,7,.95) 100%);
    backdrop-filter: blur(28px) saturate(130%);
    -webkit-backdrop-filter: blur(28px) saturate(130%);
    border: 1px solid rgba(255,255,255,.07);
    color:var(--panel-fg);
    border-radius:22px; padding:22px 20px 20px;
    display:flex; flex-direction:column;
    min-height:460px;
    position:relative; overflow:hidden;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.09),
      inset 0 -1px 0 rgba(0,0,0,.5),
      0 2px 4px rgba(20,17,12,.28),
      0 12px 24px -8px rgba(20,17,12,.34),
      0 34px 60px -20px rgba(20,17,12,.44),
      0 80px 120px -50px rgba(20,17,12,.42);
    transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s cubic-bezier(.2,.7,.2,1), border-color .35s ease;
    will-change: transform;
  }
  /* soft specular sheen across the glass */
  .card::after{
    content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
    background: linear-gradient(150deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.02) 32%, transparent 58%);
  }
  .card:hover{
    transform: translateY(-12px);
    border-color: rgba(255,255,255,.16);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -1px 0 rgba(0,0,0,.5),
      0 3px 6px rgba(20,17,12,.3),
      0 18px 34px -10px rgba(20,17,12,.4),
      0 48px 80px -22px rgba(20,17,12,.5),
      0 110px 150px -55px rgba(20,17,12,.46);
  }
  .card .num{ position:absolute; top:18px; right:22px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; color:rgba(238,234,224,.5); }
  .card .icon{
    width:44px; height:44px; border-radius:10px;
    background:linear-gradient(135deg, var(--accent), #8a4d2f);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:28px;
    color:#fff;
  }
  .card h3{ margin:0 0 18px; font-size:21px; font-weight:500; letter-spacing:-.015em; line-height:1.15; max-width:16ch; }
  .card ul{ list-style:none; padding:0; margin:0; flex:1; display:flex; flex-direction:column; justify-content:space-evenly; gap:8px; }
  .card li{ font-size:13.5px; line-height:1.4; color:rgba(238,234,224,.7); display:flex; gap:10px; align-items:flex-start; }
  .card li::before{
    content:""; width:14px; height:14px; border-radius:50%; flex-shrink:0;
    border:1px solid rgba(238,234,224,.35); margin-top:3px;
    background: radial-gradient(circle at center, var(--accent) 0 3px, transparent 3.5px);
  }
  .card .more{
    margin-top:22px; display:inline-flex; gap:8px; align-items:center;
    font-size:13px; color:var(--paper-2); opacity:.85;
    transition:gap .2s ease;
  }
  .card:hover .more{ gap:12px; }
  .card .more .arrow{ transform:rotate(-45deg); display:inline-block; }

  .card.video{ padding:0; background:#111; min-height:460px; border-radius:22px; }
  .card.video::after{ display:none; }
  .card.video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .card.video .over{
    position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 30%, rgba(0,0,0,.78));
  }
  .card.video .cap{
    position:absolute; left:22px; right:22px; bottom:22px;
    font-size:20px; font-weight:500; letter-spacing:-.015em; line-height:1.15;
    color:#fff;
  }
  .card.video .cap .i{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; color:var(--accent); }
  .card.video .chip{
    position:absolute; top:20px; left:20px;
    background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.14);
    font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
    color:#fff; padding:6px 10px; border-radius:999px;
  }

  /* ============ FOOTER ============ */
  /* Compact footer — roughly a fifth of its original height. The display type
     was 180px over 80px of top padding, which cost a whole viewport of scroll
     to say goodbye. Same content, one band. */
  /* ───── Book ───── */
  section.book{ padding:0 24px 140px; background:var(--paper); color:var(--ink); position:relative; }
  .book .head{ max-width:1280px; margin:0 auto 40px; text-align:center; }
  .book .head .eyebrow{ margin-bottom:14px; }
  .book .head h2{
    font-family:'Geist',sans-serif; font-weight:500; letter-spacing:-.03em;
    font-size:clamp(26px, 3.4vw, 46px); line-height:1.05; margin:0; color:var(--ink);
  }
  .book .head h2 .dim{ color: rgba(20,19,16,.42); }
  .book .head h2 .i{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; }
  .book .head .sub{ max-width:60ch; margin:18px auto 0; font-size:16px; line-height:1.6; color:rgba(20,19,16,.7); }
  .cal-card{
    max-width:1100px; margin:0 auto; min-height:720px; position:relative;
    background:#0A0907; border:1px solid rgba(255,255,255,.06); border-radius:28px; overflow:hidden;
    box-shadow: 0 30px 60px -20px rgba(20,17,12,.45), 0 80px 120px -40px rgba(20,17,12,.35);
  }
  .cal-host{ min-height:720px; }
  .cal-fallback{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    display:inline-flex; gap:8px; align-items:center; color:var(--paper-2); font-size:14px; text-decoration:none; opacity:.85;
  }
  .cal-fallback .arrow{ transform:rotate(-45deg); display:inline-block; }
  .cal-card.on .cal-fallback{ display:none; }
  @media (max-width: 640px){ .cal-card, .cal-host{ min-height:640px; } .cal-card{ border-radius:20px; } }

  /* ───── Watch ───── */
  section.watch{ padding:0 24px 140px; background:var(--paper); color:var(--ink); position:relative; }
  .watch .head{ max-width:1280px; margin:0 auto 40px; text-align:center; }
  .watch .head .eyebrow{ margin-bottom:14px; }
  .watch .head h2{
    font-family:'Geist',sans-serif; font-weight:500; letter-spacing:-.03em;
    font-size:clamp(26px, 3.4vw, 46px); line-height:1.05; margin:0; color:var(--ink);
  }
  .watch .head h2 .dim{ color: rgba(20,19,16,.42); }
  .watch .head h2 .i{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; }
  .watch .videos{
    max-width:1280px; margin:0 auto;
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px;
  }
  .watch .embed{ margin:0; }
  .watch .ratio{
    position:relative; padding-bottom:56.25%; height:0; overflow:hidden;
    background:#111; border-radius:22px; border:1px solid var(--line);
  }
  .watch .ratio iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  .watch figcaption{
    display:flex; align-items:baseline; gap:14px; margin-top:14px; padding:0 4px;
    font-family:'Geist',sans-serif; font-size:14px; color:var(--ink);
  }
  .watch figcaption .tag{
    font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
    color:rgba(20,19,16,.55); flex:none;
  }
  .watch figcaption .t{ font-weight:500; letter-spacing:-.01em; }
  @media (max-width: 860px){ .watch .videos{ grid-template-columns:1fr; } }

  /* Reduced motion: no letter reveals, no eased scrub; content is just there. */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
    .fade, .reveal > span, .letters span{ opacity:1 !important; transform:none !important; }
  }

  footer{
    background: var(--ink);
    border-top: 1px solid rgba(255,255,255,.08);
    color:var(--paper);
    padding:14px 32px 12px; position:relative; overflow:hidden;
  }
  .foot-inner{ max-width:1280px; margin:0 auto; }
  .foot-big{
    font-family:'Geist',sans-serif; font-weight:500; letter-spacing:-.02em;
    font-size:clamp(24px, 2.6vw, 38px); line-height:1.05; color:var(--paper);
  }
  .foot-top{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:14px 0 18px; }
  .foot-cta{
    display:inline-flex; align-items:center; gap:10px; flex:none;
    padding:5px 5px 5px 20px; border-radius:999px;
    background:var(--paper); color:var(--ink); text-decoration:none;
    font-family:'Geist',sans-serif; font-weight:500; font-size:14px;
    transition:gap .2s ease;
  }
  .foot-cta:hover{ gap:14px; }
  .foot-cta .dot{
    width:34px; height:34px; border-radius:999px;
    background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center;
  }
  .foot-big .i{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; color:var(--accent); }
  .foot-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-top:10px; padding-top:8px; border-top:1px solid rgba(242,238,229,.15); font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(242,238,229,.6); }
  .foot-row a{ color:var(--paper); }

  /* responsive */
  @media (max-width: 900px){
    .heroA .bottom{ grid-template-columns:1fr; gap:24px; padding: 0 24px 28px; }
    .heroA .wordmark{ font-size: clamp(84px, 22vw, 180px); }
    .heroC .grid-name{ grid-template-columns:repeat(4, 1fr); grid-template-rows:repeat(3, 1fr); }
    .cards{ grid-template-columns:1fr 1fr; }
    .about-stats{ grid-template-columns:1fr 1fr; }
  }
  /* Name page on phones: the two corner stamps stack instead of colliding, the bottom bar becomes
     one column with the button full width, and the title keeps clear of the bar. */
  @media (max-width: 640px){
    .name-pin{ padding-left: calc(var(--frame-inset) + 18px); padding-right: calc(var(--frame-inset) + 18px); }
    .name-pin .corner{ font-size:10px; letter-spacing:.16em; white-space:nowrap; }
    .name-pin .corner.tl{ left: calc(var(--frame-inset) + 18px); }
    .name-pin .corner.tr{ right:auto; left: calc(var(--frame-inset) + 18px); top: calc(var(--frame-inset) + 42px); }
    /* the name sits low, just above the bar, so the face stays clear; layered shadow gives the letters depth */
    .name-title-wrap{ align-items: flex-end; padding: 0 14px 178px; transform: translateY(0) scale( calc( 1 + 0.04 * var(--zoom-k) ) ); transform-origin: center bottom; }
    .name-title{ text-shadow: 0 1px 0 rgba(0,0,0,.25), 0 3px 6px rgba(0,0,0,.35), 0 14px 28px rgba(0,0,0,.45), 0 40px 80px rgba(0,0,0,.5); }
    .name-title .l1{ font-size: clamp(76px, 22vw, 120px); }
    .name-title .l2{ font-size: clamp(34px, 9vw, 56px); padding-right: 4px; }
    .name-title .greet{ font-size: 24px; }
    .name-bar{ grid-template-columns: 1fr; gap: 10px; padding: 14px 18px 16px; }
    .name-bar .col:nth-child(2){ display:none; }
    .name-bar .col p{ font-size: 13px; max-width: none; }
    .name-bar .cta{ justify-content: space-between; width: 100%; padding: 4px 4px 4px 16px; font-size: 13px; }
  }
  @media (max-width: 560px){
    .cards{ grid-template-columns:1fr; }
    .heroA .wordmark{ font-size:26vw; }
    /* Story block on phones: tighter frame, headline sized for 8 words a line, stats two-up */
    section.about{ padding: 56px 12px; }
    .about-inner{ padding: 56px 22px 64px; border-radius: 22px; }
    .about-head{ font-size: clamp(30px, 8.6vw, 40px); line-height: 1.04; letter-spacing: -.03em; }
    .about-body{ margin-top: 32px; font-size: 16px; }
    .about-stats{ grid-template-columns: 1fr 1fr; gap: 22px 16px; margin-top: 44px; padding-top: 32px; }
    .about-stats .k{ font-size: 32px; }
  }