:root{
    --black:#0B0A0A;--jet:#000;--surface:#100E0E;
    --ruby:#6B1226;--glow:#7A1428;--oxblood:#4A0E1A;--rose:#D64D59;
    --gold:#E6B657;--gold-deep:#B8862F;--gold-pale:#F7DFA6;--on-gold:#1A0A0E;
    --cream:#F6E7D9;
    --body:rgba(246,231,217,.88);
    --soft:rgba(246,231,217,.62);
    --faint:rgba(246,231,217,.38);
    --line:rgba(246,231,217,.11);--line2:rgba(246,231,217,.22);
    --sans:"Helvetica Neue",Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    --mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,monospace;
    --ar:"Geeza Pro","Al Nile","Damascus","Noto Naskh Arabic",serif;
    --leaf:linear-gradient(118deg,#B8862F 0%,#F2CE7C 22%,#D9A845 44%,#F7DFA6 62%,#C9973F 82%,#E6B657 100%);
    --nav-h:64px;
    --ease:cubic-bezier(.19,.86,.28,1);
  }
  *{box-sizing:border-box;}
  html{background:var(--black);scroll-behavior:smooth;}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
  body{margin:0;background:var(--black);color:var(--cream);font-family:var(--sans);
    -webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden;}
  ::selection{background:var(--ruby);color:var(--cream);}
  a{color:inherit;text-decoration:none;}
  :focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

  .grain::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.5;z-index:1;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");}

  .wrap{max-width:1120px;margin:0 auto;padding:0 clamp(18px,4vw,36px);position:relative;z-index:3;}
  .narrow{max-width:780px;}

  h1{font-size:clamp(40px,7.6vw,78px);font-weight:800;letter-spacing:-.05em;line-height:.98;margin:0;text-wrap:balance;}
  h2{font-size:clamp(28px,4.6vw,46px);font-weight:800;letter-spacing:-.045em;line-height:1.05;margin:0 0 18px;text-wrap:balance;}
  h3{font-size:clamp(18px,2.3vw,21px);font-weight:750;letter-spacing:-.03em;margin:0 0 9px;color:var(--cream);}
  p{margin:0 0 15px;color:var(--body);font-size:clamp(15.5px,1.65vw,17.5px);max-width:64ch;line-height:1.68;}
  p:last-child{margin-bottom:0;}
  p b,li b,td b{color:var(--cream);font-weight:700;}
  .lead{font-size:clamp(17px,2.15vw,21.5px);color:var(--body);max-width:52ch;line-height:1.5;}
  .ar{font-family:var(--ar);}

  section{position:relative;padding:clamp(76px,10vw,146px) 0;overflow:hidden;}

  .sec-head{display:flex;align-items:center;gap:16px;margin-bottom:26px;}
  .sec-head .no{font-family:var(--mono);font-size:clamp(13px,1.6vw,16px);color:var(--gold-deep);font-weight:700;letter-spacing:.04em;}
  .sec-head .lbl{font-family:var(--mono);font-size:clamp(14px,1.7vw,18px);letter-spacing:.14em;text-transform:uppercase;
    color:var(--gold);font-weight:700;white-space:nowrap;}
  .sec-head .rl{flex:1;height:1px;background:linear-gradient(90deg,rgba(230,182,87,.5),rgba(246,231,217,.08) 40%,rgba(246,231,217,.04));}

  /* ══ progress bar ══ */
  .prog{position:fixed;top:0;left:0;height:2px;background:var(--leaf);z-index:120;width:0;transition:width .1s linear;}

  /* ══ ANIMATION ══ */
  [data-anim]{opacity:0;will-change:transform,opacity;}
  @media (prefers-reduced-motion:no-preference){
    [data-anim]{transition:opacity 1.15s var(--ease),transform 1.15s var(--ease),filter 1.15s var(--ease);}
    [data-anim="up"]{transform:translateY(42px);}
    [data-anim="down"]{transform:translateY(-36px);}
    [data-anim="left"]{transform:translateX(-58px);}
    [data-anim="right"]{transform:translateX(58px);}
    [data-anim="pop"]{transform:scale(.84) translateY(24px);}
    [data-anim="blur"]{transform:translateY(26px);filter:blur(9px);}
    [data-anim="tilt"]{transform:perspective(1000px) rotateX(11deg) translateY(34px);transform-origin:top;}
    /* The horizon reveal: content rises out of a hidden edge, the brand's core motion.
       Masked, never clip-path: clip-path zeroes the IntersectionObserver ratio, so a
       clipped element never reports as visible and its own reveal never fires. */
    [data-anim="rise"],[data-anim="wipe"]{
      -webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);
      -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
    [data-anim="rise"]{transform:translateY(54px);
      -webkit-mask-position:0 100%;mask-position:0 100%;
      -webkit-mask-size:100% 0%;mask-size:100% 0%;
      transition:opacity 1.3s var(--ease),transform 1.3s var(--ease),
        -webkit-mask-size 1.35s var(--ease),mask-size 1.35s var(--ease);}
    [data-anim="rise"].seen{-webkit-mask-size:100% 200%;mask-size:100% 200%;}
    [data-anim="wipe"]{transform:translateX(-30px);
      -webkit-mask-position:0 0;mask-position:0 0;
      -webkit-mask-size:0% 100%;mask-size:0% 100%;
      transition:opacity .95s var(--ease),transform 1.2s var(--ease),
        -webkit-mask-size 1.25s var(--ease),mask-size 1.25s var(--ease);}
    [data-anim="wipe"].seen{-webkit-mask-size:200% 100%;mask-size:200% 100%;}
    [data-anim="swing"]{transform:perspective(1400px) rotateY(-13deg) translateX(46px);transform-origin:right center;}
    [data-anim="drop"]{transform:translateY(-52px) rotate(-2.5deg);}
    /* no !important here: hover tilt and magnetic pull are inline transforms and must still win */
    .seen{opacity:1;transform:none;filter:none;}
  }
  @media (prefers-reduced-motion:reduce){[data-anim]{opacity:1;transform:none;clip-path:none;}}
  /* ══ headlines rise a line at a time ══
     Words used to arrive one by one with a 2.5deg rotate, which at h1 sizes read as the
     words wobbling in at slightly different angles and made the line breaks look
     accidental. Words are still split — that split is what lets us find the lines at all —
     but they now share a delay per laid-out line, so a line rises as one piece.
     Words are NOT re-parented into line wrappers: an <em> can straddle a line break, and
     moving its words out would drop the gold-leaf gradient. Instead each word keeps its
     place and is given the delay of the line it landed on, so a line moves as one piece. */
  .w{display:inline-block;opacity:0;transform:translateY(.42em);}
  @media (prefers-reduced-motion:no-preference){
    .w{transition:opacity .85s var(--ease),transform 1s var(--ease),filter .85s var(--ease);
      filter:blur(5px);}}
  .w.on{opacity:1;transform:none;filter:none;}
  @media (prefers-reduced-motion:reduce){.w{opacity:1;transform:none;filter:none;}}
  .band .big em .w{background:var(--leaf);-webkit-background-clip:text;background-clip:text;color:transparent;}
  /* gold leaf catches the light every so often, the way real gilding does */
  @media (prefers-reduced-motion:no-preference){
    .band .big em,.band .big em .w,.bignum,.metric .n,.aw-body .mean em{
      background-size:230% 100%;background-position:0% 0;animation:gild 7.5s var(--ease) infinite;}
    @keyframes gild{0%,58%{background-position:0% 0;}82%,100%{background-position:100% 0;}}}

  /* ══ the arc draws itself, then the dot lands ══ */
  @media (prefers-reduced-motion:no-preference){
    .drw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);}
    .drw.ink{transition:stroke-dashoffset 1.5s var(--ease);stroke-dashoffset:0;}
    .dotdrop{opacity:0;transform:scale(0) translateY(-16px);transform-box:fill-box;transform-origin:center;}
    .dotdrop.ink{transition:opacity .5s ease .55s,transform .8s cubic-bezier(.24,1.5,.42,1) .55s;
      opacity:1;transform:none;}
  }

  /* ══ characters of the mono eyebrows arrive one at a time ══ */
  .ch{display:inline-block;white-space:pre;opacity:0;transform:translateY(.42em);}
  @media (prefers-reduced-motion:no-preference){.ch{transition:opacity .5s var(--ease),transform .5s var(--ease);}}
  .ch.on{opacity:1;transform:none;}
  @media (prefers-reduced-motion:reduce){.ch{opacity:1;transform:none;}}

  /* ══ the section rule draws left to right when its head arrives ══ */
  .sec-head .rl{transform:scaleX(0);transform-origin:left;}
  @media (prefers-reduced-motion:no-preference){.sec-head .rl{transition:transform 1.5s var(--ease) .22s;}}
  .sec-head.lit .rl,.sec-head.seen .rl{transform:none;}
  @media (prefers-reduced-motion:reduce){.sec-head .rl{transform:none;}}

  /* ══ scroll velocity: the page leans into the direction of travel ══ */
  @media (prefers-reduced-motion:no-preference) and (min-width:821px){
    .velo{transform:skewY(var(--vel,0deg));transition:transform .28s cubic-bezier(.2,.9,.3,1);}
  }

  /* ══ hovering one card quiets the rest ══ */
  @media (hover:hover) and (min-width:821px){
    .g.focusable:hover > *{opacity:.42;filter:saturate(.55);transition:opacity .45s var(--ease),filter .45s var(--ease);}
    .g.focusable:hover > *:hover{opacity:1;filter:none;}
  }

  /* ══ a light passes along the top edge of a section as you reach it ══ */
  .sweep{position:relative;}
  /* background-position, not translateX: nothing ever leaves the box, so no stray horizontal scroll */
  .sweep::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:3;pointer-events:none;
    background:linear-gradient(90deg,transparent 40%,rgba(230,182,87,.95) 50%,transparent 60%);
    background-size:260% 100%;background-position:100% 0;background-repeat:no-repeat;opacity:0;}
  @media (prefers-reduced-motion:no-preference){
    .sweep.lit::before{animation:sweepx 1.9s var(--ease) .12s;}
    @keyframes sweepx{0%{background-position:100% 0;opacity:0;}
      16%{opacity:1;}84%{opacity:1;}100%{background-position:0% 0;opacity:0;}}}

  /* ══ CURSOR ══ */
  .spot{position:fixed;top:0;left:0;width:520px;height:520px;margin:-260px 0 0 -260px;pointer-events:none;z-index:2;
    border-radius:50%;opacity:0;transition:opacity .6s ease;
    background:radial-gradient(circle, rgba(230,182,87,.09) 0%, rgba(230,182,87,.035) 38%, transparent 68%);}
  .spot.on{opacity:1;}
  @media (max-width:820px),(prefers-reduced-motion:reduce){.spot{display:none;}}
  .mag{will-change:transform;}
  .tiltc{transform-style:preserve-3d;will-change:transform;}

  .ros-decor{position:absolute;pointer-events:none;z-index:0;}
  @media (prefers-reduced-motion:no-preference){
    .spin{transform-origin:50% 50%;animation:rot 95s linear infinite;}
    .spin-r{transform-origin:50% 50%;animation:rot 75s linear infinite reverse;}
    @keyframes rot{to{transform:rotate(360deg);}}}
  .patt{position:absolute;inset:0;z-index:0;pointer-events:none;}

  /* ── nav ── */
  header.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
    background:rgba(11,10,10,.68);backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:background .3s,border-color .3s;}
  header.nav.solid{background:rgba(11,10,10,.95);border-bottom-color:var(--line);}
  header.nav .in{max-width:1120px;margin:0 auto;padding:0 clamp(18px,4vw,36px);height:100%;display:flex;align-items:center;gap:24px;}
  .brand{display:flex;align-items:center;gap:12px;cursor:pointer;background:none;border:0;padding:0;font-family:inherit;}
  .brand .wm{font-size:27px;font-weight:800;letter-spacing:-.038em;color:var(--cream);line-height:1;}
  .brand svg{transition:transform .5s cubic-bezier(.3,1.6,.5,1);overflow:visible;}
  .brand:hover svg{transform:translateY(-4px) rotate(-5deg);}
  /* the mark blinks: the lid drops, the iris shrinks, both come back */
  @media (prefers-reduced-motion:no-preference){
    .brand .lid{transform-origin:50px 56px;}
    .brand.blink .lid{animation:lidblink .46s var(--ease);}
    .brand.blink .iris{animation:irisblink .46s var(--ease);}
    @keyframes lidblink{0%,100%{transform:scaleY(1);}45%{transform:scaleY(.06) translateY(9px);}}
    @keyframes irisblink{0%,100%{transform:scale(1);opacity:1;}45%{transform:scale(.15);opacity:.25;}}
    .brand .iris{transform-box:fill-box;transform-origin:center;}}
  @media (max-width:520px){.brand .wm{font-size:23px;}}
  /* These are <a> elements. They were styled as `button` for a while, which is why they
     rendered as bare words with no padding and only the flex gap between them. */
  /* position:relative so both the links' offsetLeft and the iris dot resolve
     against the same box — otherwise the dot lands using the header's coordinates */
  nav.links{display:flex;gap:2px;margin-left:auto;align-items:center;position:relative;}
  nav.links a{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--soft);
    padding:9px 15px;transition:color .18s var(--ease);letter-spacing:-.005em;position:relative;white-space:nowrap;}
  nav.links a::after{content:"";position:absolute;left:15px;right:15px;bottom:3px;height:1px;background:var(--gold);
    transform:scaleX(0);transform-origin:left;transition:transform .34s var(--ease);}
  nav.links a:hover::after,nav.links a.on::after{transform:scaleX(1);}
  nav.links a:hover,nav.links a.on{color:var(--cream);}
  /* the iris travels to whichever link is current, so the nav tracks the page as you scroll */
  nav.links .iris-dot{position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--gold);
    opacity:0;pointer-events:none;box-shadow:0 0 9px rgba(230,182,87,.8);}
  @media (prefers-reduced-motion:no-preference){
    nav.links .iris-dot{transition:left .46s var(--ease),opacity .3s var(--ease);}}
  header.nav .cta{margin-left:16px;flex:none;}
  @media (max-width:980px){nav.links{display:none;} header.nav .cta{margin-left:auto;}}
  /* On a phone the brand, the CTA and the burger together are wider than the screen and
     the row overflows. The menu carries a full-width CTA of its own, so drop this one. */
  @media (max-width:620px){header.nav .cta{display:none;} .burger{margin-left:auto;}}

  /* ── mobile nav ── */
  /* Below 980px there was previously no navigation of any kind: the links were simply
     hidden and nothing replaced them, so phones could not reach the product page. */
  .burger{display:none;margin-left:14px;width:42px;height:42px;flex:none;align-items:center;justify-content:center;
    background:none;border:1px solid var(--line);border-radius:2px;cursor:pointer;padding:0;
    transition:border-color .22s,background .22s;}
  .burger:hover{border-color:var(--line2);background:rgba(246,231,217,.03);}
  .burger .bl{display:block;width:17px;height:1.5px;background:var(--cream);position:relative;
    transition:transform .34s var(--ease),background .2s;}
  .burger .bl::before,.burger .bl::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--cream);
    transition:transform .34s var(--ease),opacity .2s;}
  .burger .bl::before{top:-6px;} .burger .bl::after{top:6px;}
  .burger[aria-expanded="true"] .bl{background:transparent;}
  .burger[aria-expanded="true"] .bl::before{transform:translateY(6px) rotate(45deg);}
  .burger[aria-expanded="true"] .bl::after{transform:translateY(-6px) rotate(-45deg);}
  @media (max-width:980px){.burger{display:flex;}}

  .msheet{position:fixed;inset:var(--nav-h) 0 0;z-index:99;background:rgba(11,10,10,.97);backdrop-filter:blur(20px);
    display:flex;flex-direction:column;padding:clamp(22px,6vw,40px);gap:2px;
    visibility:hidden;opacity:0;pointer-events:none;overflow-y:auto;}
  @media (prefers-reduced-motion:no-preference){
    .msheet{transition:opacity .34s var(--ease),visibility .34s;}}
  .msheet.open{visibility:visible;opacity:1;pointer-events:auto;}
  .msheet a.ml{display:flex;align-items:center;justify-content:space-between;gap:16px;
    font-size:clamp(23px,6vw,30px);font-weight:750;letter-spacing:-.04em;color:var(--cream);
    padding:20px 0;border-bottom:1px solid var(--line);
    opacity:0;transform:translateY(18px);}
  @media (prefers-reduced-motion:no-preference){
    .msheet a.ml{transition:opacity .5s var(--ease),transform .5s var(--ease);}}
  .msheet.open a.ml{opacity:1;transform:none;}
  .msheet.open a.ml:nth-of-type(1){transition-delay:.05s;}
  .msheet.open a.ml:nth-of-type(2){transition-delay:.11s;}
  .msheet.open a.ml:nth-of-type(3){transition-delay:.17s;}
  .msheet.open a.ml:nth-of-type(4){transition-delay:.23s;}
  .msheet.open a.ml:nth-of-type(5){transition-delay:.29s;}
  .msheet a.ml .ix{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none;opacity:0;
    transition:opacity .3s var(--ease);}
  .msheet a.ml.on .ix,.msheet a.ml:hover .ix{opacity:1;}
  .msheet a.ml.on{color:var(--gold);}
  .msheet .mfoot{margin-top:auto;padding-top:34px;}
  .msheet .mfoot .btn{width:100%;justify-content:center;}
  @media (min-width:981px){.msheet{display:none;}}
  body.nav-open{overflow:hidden;}

  /* ── button ── */
  .btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--sans);font-weight:700;font-size:16px;
    letter-spacing:-.015em;border-radius:2px;padding:16px 30px;border:1px solid transparent;cursor:pointer;
    background:var(--gold);color:var(--on-gold);white-space:nowrap;position:relative;overflow:hidden;
    transition:transform .16s var(--ease),box-shadow .26s var(--ease);}
  .btn::before{content:"";position:absolute;inset:0;background:var(--gold-pale);transform:translateY(101%);
    transition:transform .36s var(--ease);z-index:0;}
  .btn:hover::before{transform:translateY(0);}
  .btn > *{position:relative;z-index:1;}
  .btn:hover{transform:translateY(-3px);box-shadow:0 14px 44px -12px rgba(230,182,87,.68);}
  .btn:active{transform:translateY(-1px);}
  .btn .arw{transition:transform .24s var(--ease);}
  .btn:hover .arw{transform:translateX(5px);}
  .btn-sm{font-size:13.5px;padding:11px 18px;gap:8px;}
  .btnrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
  .sec-cta{margin-top:42px;}

  /* ── hero ── */
  .hero{min-height:min(94vh,880px);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
    padding-top:calc(var(--nav-h) + 40px);padding-bottom:clamp(160px,23vw,290px);
    background:radial-gradient(85% 85% at 92% -8%, #7A1428 0%, rgba(122,20,40,0) 55%),
      radial-gradient(60% 60% at 104% -5%, rgba(230,182,87,.22), transparent 60%), #0B0A0A;}
  .hero .wm-ar{position:absolute;right:4%;top:7%;width:min(40vw,490px);height:auto;
    opacity:.06;pointer-events:none;user-select:none;z-index:0;will-change:transform;}
  @media (max-width:760px){.hero .wm-ar{right:-16%;top:8%;width:96vw;opacity:.055;}}
  /* The hero break is written into the markup, so no ch cap and no balancing here —
     both would fight the <br> and reintroduce the odd splits. */
  .hero h1{max-width:none;text-wrap:initial;}
  @media (max-width:520px){.hero h1 br{display:none;}}   /* let it wrap naturally when narrow */
  .hero .lead{margin-top:26px;}
  .hero .btnrow{margin-top:38px;}
  .sun{position:absolute;left:0;right:0;bottom:0;height:min(48vh,400px);z-index:1;pointer-events:none;}
  .sunG{transform:translateY(50px);opacity:0;}
  @media (prefers-reduced-motion:no-preference){.sunG{transition:transform 1.9s cubic-bezier(.16,.8,.24,1),opacity 1.3s ease;}}
  .sunG.up{transform:none;opacity:1;}
  @media (prefers-reduced-motion:reduce){.sunG{transform:none;opacity:1;}}

  /* ── logos ── */
  /* No top border and no colour step: the horizon curve above IS the edge between these two,
     so this strip has to sit on exactly the hero's ground colour, not on jet. */
  .logos{border-bottom:1px solid var(--line);background:#0B0A0A;
    padding:34px 0;overflow:hidden;position:relative;}
  .logos::before,.logos::after{content:"";position:absolute;top:0;bottom:0;width:150px;z-index:2;pointer-events:none;}
  .logos::before{left:0;background:linear-gradient(90deg,#0B0A0A,rgba(11,10,10,0));}
  .logos::after{right:0;background:linear-gradient(270deg,#0B0A0A,rgba(11,10,10,0));}
  .track{display:flex;width:max-content;align-items:center;}
  @media (prefers-reduced-motion:no-preference){.track{animation:slide 44s linear infinite;}
    @keyframes slide{to{transform:translateX(-50%);}}
    .logos:hover .track{animation-play-state:paused;}}
  .track .set{display:flex;align-items:center;gap:clamp(56px,8vw,110px);padding-right:clamp(56px,8vw,110px);}
  .track img{opacity:.55;transition:opacity .45s var(--ease),transform .45s var(--ease);flex:none;
    height:auto;display:block;filter:drop-shadow(0 0 0 transparent);}
  .track img:hover{opacity:1;transform:scale(1.05);}
  .lg-nudefoot{width:clamp(120px,13vw,168px);}
  .lg-goprimal{width:clamp(120px,13vw,168px);}
  .lg-runder{width:clamp(104px,11vw,140px);}
  .lg-gingham{width:clamp(100px,11vw,136px);}
  .lg-catthrone{width:clamp(120px,13vw,164px);}

  /* ── band ── */
  .band{background:var(--jet);border-bottom:1px solid var(--line);padding:clamp(56px,7.5vw,96px) 0;position:relative;overflow:hidden;}
  .band .big{font-size:clamp(30px,5.4vw,58px);font-weight:800;letter-spacing:-.05em;line-height:1.02;margin:0;max-width:17ch;}
  .band .big em{font-style:normal;background:var(--leaf);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .band p{margin-top:22px;font-size:clamp(16px,2vw,19px);max-width:48ch;}

  .s-flat{background:var(--surface);}
  .s-first{background:radial-gradient(96% 88% at 88% 106%, #4A0E1A 0%, rgba(74,14,26,0) 62%), #0B0A0A;}
  .s-night{background:radial-gradient(120% 90% at 50% 128%, #1C0810 0%, rgba(28,8,16,0) 64%), #000;}
  .s-risen{background:radial-gradient(70% 92% at 50% 116%, rgba(230,182,87,.22) 0%, rgba(230,182,87,0) 58%),
    radial-gradient(110% 100% at 50% 128%, #7A1428 0%, rgba(122,20,40,0) 62%), #0B0A0A;}

  .g{display:grid;gap:18px;}
  .g2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .g3{grid-template-columns:repeat(3,minmax(0,1fr));}
  @media (max-width:820px){.g3{grid-template-columns:1fr;}}
  @media (max-width:660px){.g2{grid-template-columns:1fr;}}
  .card{border:1px solid var(--line);background:var(--surface);padding:30px 32px;border-radius:2px;position:relative;
    transition:border-color .3s var(--ease),transform .3s var(--ease);overflow:hidden;}
  .card::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(230,182,87,.7),transparent);transform:scaleX(0);
    transition:transform .55s var(--ease);}
  .card:hover::after{transform:scaleX(1);}
  .card:hover{border-color:var(--line2);transform:translateY(-6px);}
  .card.glow{background:radial-gradient(120% 110% at 100% 0%, rgba(122,20,40,.5) 0%, rgba(122,20,40,0) 58%),
      radial-gradient(80% 80% at 108% -6%, rgba(230,182,87,.12), transparent 60%), var(--surface);border-color:var(--line2);}
  .card p{font-size:15.5px;}
  .card .ico{margin-bottom:18px;display:block;transition:transform .45s var(--ease);}
  .card:hover .ico{transform:translateY(-4px) scale(1.1) rotate(-4deg);}

  .ben{display:flex;gap:22px;align-items:flex-start;padding:30px 0;border-bottom:1px solid var(--line);transition:padding-left .38s var(--ease);}
  .ben:first-of-type{border-top:1px solid var(--line);}
  .ben:hover{padding-left:12px;}
  .ben .ic{flex:none;width:56px;height:56px;border:1px solid rgba(230,182,87,.3);display:flex;align-items:center;justify-content:center;
    background:rgba(230,182,87,.06);transition:transform .42s var(--ease),border-color .3s,background .3s;}
  .ben:hover .ic{transform:translateY(-5px) rotate(-8deg) scale(1.06);border-color:rgba(230,182,87,.7);background:rgba(230,182,87,.14);}
  .ben h3{font-size:clamp(19px,2.4vw,23px);letter-spacing:-.032em;margin-bottom:7px;}
  .ben p{margin:0;}

  .machine{border:1px solid var(--line);background:var(--surface);padding:32px;border-radius:2px;position:relative;
    display:flex;flex-direction:column;transition:border-color .3s,transform .3s var(--ease);overflow:hidden;min-height:280px;}
  .machine:hover{transform:translateY(-6px);}
  .machine.live{border-color:rgba(230,182,87,.34);
    background:radial-gradient(130% 110% at 100% 0%, rgba(122,20,40,.44) 0%, rgba(122,20,40,0) 60%),
      radial-gradient(80% 80% at 108% -6%, rgba(230,182,87,.14), transparent 62%), var(--surface);}
  .machine.live:hover{border-color:rgba(230,182,87,.64);}
  .machine.empty{align-items:center;justify-content:center;text-align:center;border-style:dashed;}
  .machine.empty .badge{margin:0;}
  .badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;
    letter-spacing:.15em;text-transform:uppercase;font-weight:700;padding:6px 12px;border-radius:2px;align-self:flex-start;margin-bottom:20px;}
  .badge-live{background:rgba(230,182,87,.14);color:var(--gold);border:1px solid rgba(230,182,87,.36);}
  .badge-soon{background:rgba(246,231,217,.04);color:var(--faint);border:1px solid var(--line);}
  .dotp{width:6px;height:6px;border-radius:50%;background:var(--rose);flex:none;}
  @media (prefers-reduced-motion:no-preference){
    .dotp{animation:pulse 2.4s ease-out infinite;}
    @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(214,77,89,.6);}70%{box-shadow:0 0 0 8px rgba(214,77,89,0);}100%{box-shadow:0 0 0 0 rgba(214,77,89,0);}}}
  .machine h3{font-size:clamp(21px,2.7vw,26px);letter-spacing:-.035em;margin-bottom:10px;}
  .machine .for{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 14px;}
  .machine p{font-size:15px;flex:1;}
  .machine .go{margin-top:24px;}
  .machine .bgic{position:absolute;right:-20px;top:-20px;opacity:.13;pointer-events:none;}

  .steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;position:relative;}
  .steps::before{content:"";position:absolute;left:clamp(30px,4vw,49px);top:40px;bottom:40px;width:1px;
    background:linear-gradient(180deg,rgba(230,182,87,.4),rgba(230,182,87,.08));}
  @media (max-width:640px){.steps::before{display:none;}}
  .steps li{display:flex;gap:clamp(22px,4vw,52px);padding:clamp(30px,4vw,44px) 0;border-bottom:1px solid var(--line);
    transition:background .35s,padding-left .35s var(--ease);position:relative;}
  .steps li:first-child{border-top:1px solid var(--line);}
  .steps li:hover{background:rgba(246,231,217,.018);padding-left:12px;}
  .steps .sn{flex:none;width:clamp(62px,8vw,100px);position:relative;z-index:2;}
  .steps .sn .n{font-family:var(--mono);font-size:clamp(30px,4.4vw,46px);color:var(--gold);font-weight:600;line-height:.9;
    letter-spacing:-.03em;display:block;font-variant-numeric:tabular-nums;transition:transform .42s var(--ease);
    background:var(--surface);padding-bottom:4px;}
  .steps li:hover .sn .n{transform:translateY(-5px);}
  .steps .sn .ar{display:block;font-size:clamp(20px,2.7vw,28px);color:var(--faint);margin-top:8px;line-height:1;background:var(--surface);}
  .steps h3{font-size:clamp(21px,3.1vw,30px);letter-spacing:-.038em;margin-bottom:11px;}
  .steps li.final{background:linear-gradient(90deg, rgba(230,182,87,.06), transparent 72%);}
  .steps li.final:hover{background:linear-gradient(90deg, rgba(230,182,87,.1), transparent 72%);}
  .steps li.final h3,.steps li.final .sn .n{background:var(--leaf);-webkit-background-clip:text;background-clip:text;color:transparent;}

  .tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:2px;background:var(--surface);}
  table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:720px;}
  th,td{text-align:left;padding:18px 22px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--body);}
  thead th{font-size:clamp(17px,2.2vw,23px);font-weight:800;letter-spacing:-.035em;color:var(--soft);
    border-bottom:1px solid var(--line2);padding-bottom:20px;font-family:var(--sans);text-transform:none;}
  thead th.us{color:var(--gold);}
  tbody th{font-weight:700;color:var(--cream);font-size:15.5px;font-family:var(--sans);letter-spacing:-.012em;text-transform:none;}
  tbody tr{transition:background .25s;}
  tbody tr:hover{background:rgba(246,231,217,.022);}
  tbody tr:last-child td,tbody tr:last-child th{border-bottom:0;}
  td.us,th.us{background:rgba(230,182,87,.06);color:var(--cream);}

  .bul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px;}
  .bul li{display:flex;gap:15px;font-size:16.5px;color:var(--body);line-height:1.6;}
  .bul li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none;margin-top:9px;}

  .quote{border:1px solid var(--line);background:var(--surface);padding:30px 32px;border-radius:2px;
    display:flex;flex-direction:column;transition:border-color .3s,transform .3s var(--ease);position:relative;}
  .quote:hover{border-color:var(--line2);transform:translateY(-6px);}
  .quote .lens{width:34px;height:34px;margin-bottom:20px;transition:transform .48s var(--ease);}
  .quote:hover .lens{transform:scale(1.14) rotate(-6deg);}
  .quote blockquote{margin:0 0 auto;font-size:clamp(16.5px,1.95vw,19px);line-height:1.5;letter-spacing:-.02em;
    color:var(--cream);font-weight:500;}
  .quote .by{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);}
  .quote .by .nm{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--cream);}
  .quote .by .rl{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-top:5px;}
  .quote.pending{border-style:dashed;border-color:rgba(230,182,87,.3);}
  .quote .tag{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--gold-deep);border:1px solid rgba(184,134,47,.5);padding:3px 7px;}
  .metric{display:flex;gap:24px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);}
  .metric div{display:flex;flex-direction:column;gap:4px;}
  .metric .n{font-size:23px;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;
    background:var(--leaf);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .metric .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);}
  .bignum{font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;
    background:var(--leaf);-webkit-background-clip:text;background-clip:text;color:transparent;}

  .faq{border-top:1px solid var(--line);}
  .faq details{border-bottom:1px solid var(--line);}
  .faq summary{cursor:pointer;list-style:none;padding:26px 0;display:flex;justify-content:space-between;gap:22px;align-items:flex-start;
    font-size:clamp(17px,2.1vw,20px);font-weight:700;letter-spacing:-.028em;color:var(--cream);transition:color .2s,padding-left .3s var(--ease);}
  .faq summary:hover{color:var(--gold);padding-left:8px;}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary .pm{flex:none;width:18px;height:18px;position:relative;margin-top:6px;}
  .faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--gold);transition:transform .32s var(--ease);}
  .faq summary .pm::before{left:0;top:8px;width:18px;height:1.5px;}
  .faq summary .pm::after{left:8px;top:0;width:1.5px;height:18px;}
  .faq details[open] summary .pm::after{transform:scaleY(0) rotate(90deg);}
  .faq .a{padding:0 0 28px;max-width:68ch;}
  @media (prefers-reduced-motion:no-preference){
    .faq details[open] .a{animation:fadeDown .45s var(--ease);}
    @keyframes fadeDown{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:none;}}}

  /* ── awakening (compact) ── */
  .awake{position:relative;overflow:hidden;background:var(--jet);border-top:1px solid var(--line);padding:clamp(58px,7.5vw,96px) 0;}
  .aw-card{max-width:840px;border:1px solid var(--line);background:var(--surface);border-radius:2px;overflow:hidden;}
  .aw-top{padding:clamp(24px,3.4vw,34px);display:flex;align-items:center;gap:clamp(18px,3.4vw,34px);flex-wrap:wrap;
    border-bottom:1px solid var(--line);}
  .aw-arb{font-family:var(--ar);font-size:clamp(40px,6.4vw,68px);color:var(--gold);line-height:1.15;}
  .aw-lat{font-size:clamp(15px,1.8vw,18px);color:var(--soft);font-family:var(--mono);letter-spacing:.05em;}
  .aw-lat b{color:var(--cream);font-weight:600;}
  .aw-say{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:14px;color:var(--body);
    border:1px solid var(--line);padding:8px 13px;border-radius:2px;}
  .aw-say b{color:var(--gold);font-weight:600;}
  .aw-say button{width:26px;height:26px;border:1px solid var(--line2);background:transparent;color:var(--gold);
    cursor:pointer;border-radius:2px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex:none;}
  .aw-say button:hover{border-color:var(--gold);background:rgba(230,182,87,.12);transform:scale(1.1);}
  .aw-body{padding:clamp(24px,3.4vw,34px);}
  .aw-body .mean{font-size:clamp(18px,2.4vw,23px);color:var(--cream);font-weight:600;letter-spacing:-.028em;margin:0 0 14px;}
  .aw-body .mean em{font-style:normal;background:var(--leaf);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .aw-body p{margin:0;}

  /* ── booking ── */
  .book{position:relative;overflow:hidden;}
  .book .in{position:relative;z-index:3;}
  .cal{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);border:1px solid var(--line2);
    background:rgba(16,14,14,.92);backdrop-filter:blur(12px);border-radius:2px;overflow:hidden;max-width:940px;margin:0 auto;}
  @media (max-width:800px){.cal{grid-template-columns:1fr;}}
  .cal .side{padding:clamp(26px,3.4vw,38px);border-right:1px solid var(--line);}
  @media (max-width:800px){.cal .side{border-right:0;border-bottom:1px solid var(--line);}}
  .cal .side .who{display:flex;align-items:center;gap:11px;margin-bottom:20px;}
  .cal .side .who .nm{font-size:13.5px;color:var(--soft);}
  .cal .side h3{font-size:clamp(22px,2.8vw,28px);letter-spacing:-.038em;margin-bottom:16px;}
  .cal .meta{display:flex;flex-direction:column;gap:11px;margin-bottom:22px;}
  .cal .meta div{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--body);}
  .cal .meta svg{flex:none;}
  .cal .side p{font-size:14.5px;margin:0;}
  .cal .main{padding:clamp(26px,3.4vw,38px);}
  .cal .mhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
  .cal .mhead .mo{font-size:16px;font-weight:700;letter-spacing:-.025em;}
  .cal .mhead .nv{display:flex;gap:7px;}
  .cal .mhead button{width:32px;height:32px;border:1px solid var(--line);background:transparent;color:var(--soft);
    cursor:pointer;border-radius:2px;font-size:15px;line-height:1;transition:all .18s;}
  .cal .mhead button:hover:not(:disabled){color:var(--gold);border-color:rgba(230,182,87,.45);transform:scale(1.1);}
  .cal .mhead button:disabled{opacity:.3;cursor:default;}
  .dow{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:7px;}
  .dow span{text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:4px 0;}
  .days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
  .day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:14px;border-radius:2px;
    border:1px solid transparent;background:transparent;color:var(--faint);cursor:default;font-family:var(--sans);
    font-variant-numeric:tabular-nums;transition:all .18s var(--ease);padding:0;}
  .day.free{color:var(--cream);background:rgba(230,182,87,.09);border-color:rgba(230,182,87,.22);cursor:pointer;font-weight:600;}
  .day.free:hover{background:rgba(230,182,87,.24);border-color:var(--gold);transform:scale(1.12);}
  .day.sel{background:var(--gold);color:var(--on-gold);border-color:var(--gold);font-weight:700;transform:scale(1.06);}
  .slots{margin-top:22px;border-top:1px solid var(--line);padding-top:20px;}
  .slots .st{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);margin:0 0 13px;}
  .slotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px;}
  .slot{padding:12px 6px;border:1px solid var(--line2);background:transparent;color:var(--cream);font-size:14px;
    font-family:var(--sans);font-weight:600;cursor:pointer;border-radius:2px;transition:all .18s var(--ease);font-variant-numeric:tabular-nums;
    opacity:0;transform:translateY(12px);animation:slotIn .42s var(--ease) forwards;}
  @media (prefers-reduced-motion:reduce){.slot{opacity:1;transform:none;animation:none;}}
  @keyframes slotIn{to{opacity:1;transform:none;}}
  .slot:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px);}
  .slot.sel{background:var(--gold);border-color:var(--gold);color:var(--on-gold);}
  .confirm{margin-top:18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
  .booked{text-align:center;padding:44px 20px;}
  .booked .tick{width:52px;height:52px;margin:0 auto 18px;}
  .booked h4{font-size:23px;font-weight:800;letter-spacing:-.035em;margin:0 0 10px;color:var(--cream);}

  /* ── blog ── */
  .pmeta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;
    letter-spacing:.12em;text-transform:uppercase;color:var(--faint);}
  .pmeta .sep{opacity:.5;}

  .plist{grid-template-columns:1fr;gap:0;}
  /* A list, not a card grid: posts arrive one at a time and a three-up grid would sit
     mostly empty for a long while. Rows read fine at one post and at forty. */
  .pcard{display:block;padding:clamp(28px,3.6vw,40px) 0;border-bottom:1px solid var(--line);
    position:relative;transition:padding-left .4s var(--ease);}
  .pcard:first-child{border-top:1px solid var(--line);}
  .pcard:hover{padding-left:14px;}
  .pcard h2{font-size:clamp(23px,3.2vw,33px);letter-spacing:-.04em;margin:13px 0 12px;
    transition:color .25s var(--ease);max-width:28ch;}
  .pcard:hover h2{color:var(--gold);}
  .pcard p{font-size:16px;color:var(--soft);max-width:62ch;margin:0;}
  .pcard .pgo{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-size:14px;font-weight:700;
    color:var(--gold);letter-spacing:-.015em;}
  .pcard .pgo .arw{transition:transform .26s var(--ease);}
  .pcard:hover .pgo .arw{transform:translateX(6px);}

  .pback{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--faint);transition:color .2s;}
  .pback:hover{color:var(--gold);}
  .pback .arw{transition:transform .26s var(--ease);}
  .pback:hover .arw{transform:translateX(-5px);}

  /* Reading column. Wider leading and a real measure — a post is read, not scanned. */
  .post{margin-top:clamp(34px,4.4vw,52px);}
  .post > *:first-child{margin-top:0;}
  .post p{font-size:clamp(16.5px,1.8vw,18.5px);line-height:1.75;max-width:68ch;margin:0 0 22px;}
  .post h2{font-size:clamp(23px,3.1vw,31px);letter-spacing:-.038em;margin:clamp(40px,4.6vw,58px) 0 14px;}
  .post h3{font-size:clamp(18.5px,2.3vw,22px);letter-spacing:-.03em;margin:34px 0 10px;}
  .post h4{font-size:16.5px;letter-spacing:-.02em;margin:26px 0 8px;color:var(--soft);}
  .post b{color:var(--cream);}
  .post a{color:var(--gold);border-bottom:1px solid rgba(230,182,87,.32);transition:border-color .2s;}
  .post a:hover{border-bottom-color:var(--gold);}
  .post .bul,.post .onum{margin:0 0 22px;max-width:66ch;}
  .post .onum{padding-left:22px;color:var(--body);display:flex;flex-direction:column;gap:13px;}
  .post .onum li{font-size:16.5px;line-height:1.65;padding-left:6px;}
  .post .onum li::marker{color:var(--gold);font-family:var(--mono);font-size:14px;}
  .post .pq{margin:30px 0;padding:22px 26px;border-left:2px solid var(--gold);
    background:rgba(230,182,87,.05);font-size:clamp(17px,2vw,20px);line-height:1.5;
    letter-spacing:-.02em;color:var(--cream);font-weight:500;}
  .post .pq p{margin:0;}
  .post .prule{border:0;height:1px;background:linear-gradient(90deg,rgba(230,182,87,.45),rgba(246,231,217,.05));
    margin:clamp(38px,4.6vw,56px) 0;}
  .post pre{background:var(--surface);border:1px solid var(--line);border-radius:2px;
    padding:20px 22px;overflow-x:auto;margin:0 0 22px;}
  .post pre code{font-family:var(--mono);font-size:13.5px;line-height:1.6;color:var(--body);background:none;padding:0;}
  .post code{font-family:var(--mono);font-size:.9em;background:rgba(246,231,217,.07);
    border:1px solid var(--line);border-radius:2px;padding:2px 6px;color:var(--gold-pale);}
  .post img{max-width:100%;height:auto;border-radius:2px;display:block;margin:0 0 22px;}
  .post .tblwrap{margin:0 0 26px;}
  .post table{min-width:560px;font-size:15px;}
  .post thead th{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--gold);
    text-transform:none;padding-bottom:14px;}
  .post th,.post td{padding:14px 18px;}
  .post tbody td:first-child{color:var(--cream);}

  .pend{margin-top:clamp(46px,5.4vw,68px);padding-top:clamp(28px,3.4vw,38px);border-top:1px solid var(--line);}
  .pend p{font-size:15.5px;color:var(--soft);max-width:56ch;margin:0 0 22px;}

  footer{background:var(--jet);border-top:1px solid var(--line);padding:60px 0 36px;}
  footer .top{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;margin-bottom:44px;}
  footer .cols{display:flex;gap:clamp(32px,6vw,76px);flex-wrap:wrap;}
  footer .col h5{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0 0 14px;font-weight:700;}
  footer .col button,footer .col a{display:block;font-size:14.5px;color:var(--body);background:none;border:0;padding:0 0 10px;
    cursor:pointer;font-family:var(--sans);text-align:left;transition:color .16s,transform .24s var(--ease);}
  footer .col button:hover,footer .col a:hover{color:var(--gold);transform:translateX(5px);}
  footer .base{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;
    border-top:1px solid var(--line);padding-top:24px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--faint);}

  /* The horizon sits BETWEEN two sections and only the path paints the ground under the curve.
     Everything above the curve is transparent and falls through to the body colour, so the sky
     has to be set to the colour of the section directly above or the strip shows 78px of body
     black against it. Rule: --sky = the section above, path fill = the section below. */
  /* z-index 1, NOT 4: the strip is opaque, so anything above the cursor spotlight (z-index 2)
     would cut the glow off at the strip's edges and the horizon would read as a box punched
     out of the light. At 1 it still paints over the section backgrounds (z-index auto) but the
     spotlight washes across it, so the light crosses the seam in one piece. */
  .horizon{display:block;width:100%;height:78px;margin-bottom:-1px;position:relative;z-index:1;
    background:var(--sky,var(--black));}
  [data-page]{display:none;}
  [data-page].active{display:block;}
  .draft{position:fixed;left:14px;bottom:14px;z-index:200;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--faint);background:rgba(0,0,0,.72);border:1px solid var(--line);padding:5px 9px;backdrop-filter:blur(6px);}