/* Fonts, self-hosted (eng audit P2-9): Inter Tight (variable, 400 to 600) and Zilla Slab 400, latin + latin-ext, from Google Fonts (OFL). */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter-tight-latin-a807ee.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter-tight-latin-ext-17cab1.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/zilla-slab-latin-ext-ea59d4.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/zilla-slab-latin-1aa419.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* acegotchu.com. Tokens mirror the Figma variables (F / color, F / space, F / motion). */
:root{
  --ground:#FFFFFF;--stone:#ECEAE6;--ink:#111111;--label:#6F6B65;--ember:#9C4A2B;--bone:#F2EEE6;--cta:var(--ember);--on-accent:#FFFFFF;
  --scrim:rgba(17,17,17,.62);
  --clip:linear-gradient(160deg,#EEF0EE 0%,#D9D3C8 38%,#B89F88 70%,#6F5646 100%);
  --sky:linear-gradient(180deg,#E9EDF0 0%,#F3EEE7 35%,#EADFD2 60%,#CFC6BB 100%);
  --g:20px;--side:64px;
  --dur-instant:100ms;--dur-quick:200ms;--dur-base:320ms;--dur-slow:600ms;--dur-breathe:1200ms;
  --ease-out:cubic-bezier(.2,0,0,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--ease-exit:cubic-bezier(.4,0,1,1);
  --rise:8px;--stagger:60ms;
  color-scheme:light;
}
/* Light only by design (His Grace, Nov 9). */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font:400 15px/21px "Inter Tight",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.01em;transition:background-color var(--dur-quick),color var(--dur-quick)}
h1,h2,h3,p,dl,dd,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:var(--ground);padding:10px 14px;text-decoration:none}
.skip:focus{top:12px}

/* type */
.lab{font-size:13px;line-height:18px;color:var(--label);letter-spacing:0}
.num{font-weight:600;letter-spacing:-.06em;font-size:96px;line-height:92px}
.num--case{font-size:76px;line-height:72px;letter-spacing:-.05em}
.line{font-size:19px;line-height:25px;font-weight:400;letter-spacing:-.01em}
.h2{font-size:48px;line-height:48px;font-weight:600;letter-spacing:-.05em}
.caps{font-size:11px;line-height:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.mark{color:var(--label)}

/* button: the one ridge button per screen */
.btn{display:flex;align-items:center;justify-content:center;min-height:54px;padding:0 32px;background:var(--cta);color:var(--on-accent);text-decoration:none;font-weight:500;font-size:16px;letter-spacing:-.01em;transition:transform var(--dur-quick) var(--ease-out),filter var(--dur-quick)}
.btn:active{transform:scale(.98);filter:brightness(.94);transition-duration:var(--dur-instant)}
.btn--book{min-height:58px}
.textlink{font-size:15px;text-decoration:underline;text-underline-offset:3px;padding:12px 0;display:inline-block}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 var(--g);transition:background-color var(--dur-quick),color var(--dur-quick)}
.top__name{font-weight:600;font-size:16px;letter-spacing:-.02em;text-decoration:none}
.top__right{display:flex;align-items:center;gap:20px}
.top__cta{font-size:14px;font-weight:500;text-decoration:none;opacity:0;pointer-events:none;transition:opacity var(--dur-quick);display:none}
.top.is-past{background:rgba(255,255,255,.92);background:color-mix(in srgb,var(--ground) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;font-size:15px;padding:12px 0;min-width:44px;text-align:right}
.menu summary::-webkit-details-marker{display:none}
.menu__panel{position:absolute;right:-14px;top:42px;width:max-content;background:#FFFFFF;color:#111111;border:1px solid #ECEAE6;box-shadow:0 8px 24px rgba(17,17,17,.06);padding:4px 14px}
.menu[open] .menu__panel{animation:menuin var(--dur-quick) var(--ease-out)}
@keyframes menuin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.menu__panel a{display:block;padding:10px 0;text-decoration:none;font-size:15px;border-top:1px solid #ECEAE6}
.menu__panel a:hover{text-decoration:underline;text-underline-offset:3px}
.menu__panel a[aria-current]{color:#6F6B65}
.menu__panel li:first-child a{border-top:0}

/* footage slot: a real tagged slot; placeholder until his clip drops in */
.slot{position:relative;overflow:hidden;background:var(--clip);isolation:isolate}
.slot--sky{background:var(--sky)}
.slot img,.slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot video{opacity:0;transition:opacity var(--dur-slow) var(--ease-in-out)}
.slot video.is-on{opacity:1}
.slot svg.ridges{position:absolute;inset:0;width:100%;height:100%}
.shot{position:absolute;left:14px;bottom:14px;z-index:2;display:flex;flex-direction:column;gap:2px;padding:9px 12px 10px;max-width:min(420px,calc(100% - 28px));background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#111;font-size:13px;line-height:18px;border-left:2px solid #9C4A2B}
.shot .caps{color:#9C4A2B}
.slot.has-clip .shot{display:none}
.sound{position:absolute;z-index:3;right:14px;top:14px;font-size:13px;color:#fff;background:rgba(17,17,17,.4);padding:8px 12px;display:none}
.slot.has-clip .sound{display:block}
.slot .play{display:none}
.no-auto .slot.has-clip .play{display:flex;position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:rgba(17,17,17,.55);color:#fff;align-items:center;justify-content:center;z-index:3}

/* screens */
main{display:block}
.screen{position:relative;padding:96px var(--g) 56px;display:flex;flex-direction:column;gap:28px}
.pa,.pb{display:flex;flex-direction:column;gap:14px}

/* reveal: number, then line +60, then CTA +120. Once only. */
.js [data-r]{opacity:0;transform:translateY(var(--rise));transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.js [data-r="2"]{transition-delay:var(--stagger)}
.js [data-r="3"]{transition-delay:calc(var(--stagger)*2)}
.js .is-in [data-r]{opacity:1;transform:none}

/* HERO: the approved Figma frame ("F / hero, desktop 1440x900"). Full bleed footage, big number low, one line, one button. */
.hero{min-height:100svh;padding:0 0 28px;gap:0;justify-content:flex-end;color:#fff}
.hero .slot{position:absolute;inset:0}
.hero .slot::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.32) 0,rgba(17,17,17,0) 140px),linear-gradient(180deg,rgba(17,17,17,0) 42%,var(--scrim) 80%);z-index:1}
.hero .shot{top:96px;bottom:auto}
.hero__copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px;padding:0 var(--g)}
.hero .num{font-size:104px;line-height:96px}
.hero__cta{position:relative;z-index:2;display:flex;flex-direction:column;gap:12px;padding:20px var(--g) 0}
.hero .lab{color:rgba(255,255,255,.85)}
.hero__cue{display:none}
.top:not(.is-past){color:#fff}

/* iPhone first screen prototypes (?hero=1|2|3), all in the frame's spirit */
@media (max-width:1023px){
  /* 4 (default) merges 2 and 3: the footage fades into the page with the number on the seam (2), and the button is the floor (3). */
  /* 2. the footage fades into the page and the number sits on the seam */
  [data-hero="4"] .hero{color:var(--ink)}
  [data-hero="4"] .hero .slot{bottom:auto;height:66svh}
  [data-hero="4"] .hero .slot::before{background:linear-gradient(180deg,rgba(17,17,17,.32) 0,rgba(17,17,17,0) 140px),linear-gradient(180deg,transparent 52%,var(--ground) 100%)}
  [data-hero="4"] .hero .lab{color:var(--label)}
  [data-hero="4"] .hero .num{font-size:120px;line-height:108px}
  /* 3. the button is the floor of the screen, edge to edge */
  [data-hero="4"] .hero{padding-bottom:0}
  [data-hero="4"] .hero__cta{padding:20px 0 0;flex-direction:column-reverse;gap:16px}
  [data-hero="4"] .hero__cta .lab,[data-hero="4"] .hero__cta .hero__brands{padding:0 var(--g)}
  [data-hero="4"] .hero__cta .btn{min-height:calc(72px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);font-size:17px}
}

/* BREATHER */
.breather{min-height:100svh;padding:0;justify-content:flex-end}
.breather .slot{position:absolute;inset:0}
.breather .shot{top:96px;bottom:auto}
.breather__line{position:relative;z-index:2;color:#fff;padding:0 var(--g) 48px;font-size:19px;line-height:25px}
.js .breather__line{opacity:0;transition:opacity var(--dur-breathe) var(--ease-out)}
.js .breather.is-in .breather__line{opacity:1}

/* WORK */
.work .slot{aspect-ratio:7/6}
.work .shot{font-size:12px;line-height:16px}
.cases{border-top:1px solid var(--stone)}
details.more>summary,details.fold>summary{display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:14px 0;list-style:none;cursor:pointer;font-size:15px}
details.more>summary::-webkit-details-marker,details.fold>summary::-webkit-details-marker{display:none}
details>summary .chev{color:var(--label);transition:transform var(--dur-base) var(--ease-in-out)}
details[open]>summary .chev{transform:rotate(45deg)}
details[open] .fold__body,details[open] .more__body{animation:fadein var(--dur-base) var(--ease-in-out) 60ms both}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.case{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--stone)}
.case b{font-weight:400}
.case span{color:var(--label);text-align:right;flex-shrink:0}

/* OFFER */
.rows{border-top:1px solid var(--ink)}
.rows>div{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--stone)}
.rows dt{width:104px;flex-shrink:0;font-size:13px;line-height:21px;color:var(--label)}
.rows dd{flex:1}

/* START + footer disclosures */
.folds{border-bottom:1px solid var(--stone)}
details.fold{border-top:1px solid var(--stone)}
.fold__body{padding:0 0 20px;display:flex;flex-direction:column;gap:12px}
.fold__body h3{font-size:15px;font-weight:600;letter-spacing:-.01em}
.linkrow{display:flex;justify-content:space-between;align-items:center;min-height:52px;border-top:1px solid var(--stone);text-decoration:none;font-size:15px}
.linkrow span{color:var(--label)}
.ex{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--stone)}
.ex:first-child{border-top:0}
.ex__name{flex:1}
.ex__act{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.chip{font-size:13px;font-weight:500;min-height:36px;padding:0 12px;border:1px solid var(--stone);display:inline-flex;align-items:center;text-decoration:none;transition:border-color var(--dur-quick)}
.chip:hover{border-color:var(--ink)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.stats b{display:block;font-size:24px;line-height:28px;font-weight:600;letter-spacing:-.03em}
.faq dt{font-weight:600;margin-top:10px}
.faq dd{color:var(--ink)}
.foot{padding:28px var(--g) 120px;display:flex;flex-direction:column;gap:6px}
.foot a{text-decoration:none}

/* sticky bar (mobile): appears once the hero CTA is gone, hides on the start screen */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:15;padding:12px var(--g) calc(12px + env(safe-area-inset-bottom));background:var(--ground);border-top:1px solid var(--stone);transform:translateY(16px);opacity:0;pointer-events:none;transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out)}
.sticky.is-on{transform:none;opacity:1;pointer-events:auto}

/* prototype switcher, only with ?hero= in the URL */






/* copy feedback swaps the label, no toast */
[data-copied]{position:relative}

/* tablet, not foldable: keep the phone layout, centered */
@media (min-width:700px) and (max-width:1023px){
  .screen:not(.hero):not(.breather),.foot{max-width:600px;margin:0 auto;width:100%}
}

/* DESKTOP: faithful to the approved hero; other screens as two panes */
@media (min-width:1024px){
  :root{--g:64px}
  .top{height:72px;padding-top:8px}
  .top__cta{display:block}
  .top.is-past .top__cta{opacity:1;pointer-events:auto}
  html .top:not(.is-past){color:#fff}
  .hero{min-height:max(100vh,720px);justify-content:space-between;gap:48px;color:#fff;padding:0 var(--side) 64px;flex-direction:row;align-items:flex-end}
  :root[data-hero] .hero .slot{position:absolute;inset:0;height:auto;margin:0;aspect-ratio:auto}
  :root[data-hero] .hero .slot::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.32) 0,rgba(17,17,17,0) 160px),linear-gradient(180deg,rgba(17,17,17,0) 44%,var(--scrim));z-index:1}
  :root[data-hero] .hero .shot{top:120px;bottom:auto;left:auto;right:160px;width:420px}
  :root[data-hero] .hero__copy{position:relative;z-index:2;padding:0;flex:1;max-width:760px}
  :root[data-hero] .hero .num{display:block;font-size:184px;line-height:164px}
  :root[data-hero] .hero__copy>.lab{display:block;color:rgba(255,255,255,.85)}
  :root[data-hero] .hero .line{position:static;width:auto;height:auto;clip:auto;font-size:28px;line-height:34px;letter-spacing:-.02em;max-width:640px}
  :root[data-hero] .hero__cta{position:relative;z-index:2;padding:0;align-items:flex-end;text-align:right}
  :root[data-hero] .hero__cta .lab{color:rgba(255,255,255,.85)}
  .hero__cta .btn{min-height:58px}
  .screen:not(.hero):not(.breather){max-width:1440px;margin:0 auto;padding:140px var(--side) 120px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
  .breather{min-height:90vh}
  .breather__line{font-size:28px;line-height:34px;padding:0 var(--side) 64px;max-width:900px}
  .work .slot{aspect-ratio:4/5}
  .work .pb{padding-top:40px}
  .offer .pa,.start .pa{position:sticky;top:120px}
  .h2{font-size:72px;line-height:68px}
  .foot{max-width:1440px;margin:0 auto;padding:40px var(--side) 64px;flex-direction:row;justify-content:space-between;flex-wrap:wrap;gap:12px 32px}
  .sticky{display:none}
}

/* FOLDABLE open: two panes. Real dual-screen via viewport segments; near-square foldables by aspect ratio. */
@media (min-width:680px) and (max-width:1023px) and (min-aspect-ratio:5/6) and (max-aspect-ratio:6/5) and (pointer:coarse),
       (horizontal-viewport-segments:2){
  :root{--pane-a:env(viewport-segment-width 0 0,50vw);--hinge:calc(env(viewport-segment-left 1 0,50vw) - env(viewport-segment-right 0 0,50vw))}
  .screen,.screen:not(.hero):not(.breather){max-width:none;margin:0;display:grid;grid-template-columns:var(--pane-a) 1fr;column-gap:var(--hinge);padding:0;min-height:100svh;align-items:stretch}
  .screen>.pa,.screen>.pb{padding:88px 28px 40px;justify-content:center}
  :root[data-hero] .hero{padding:0;display:grid;grid-template-columns:var(--pane-a) 1fr;column-gap:var(--hinge);align-items:end;color:#fff}
  :root[data-hero] .hero .slot{position:absolute;inset:0;height:auto}
  :root[data-hero] .hero .slot::before{background:linear-gradient(180deg,rgba(17,17,17,.32) 0,rgba(17,17,17,0) 140px),linear-gradient(180deg,rgba(17,17,17,0) 42%,var(--scrim) 80%)}
  :root[data-hero] .hero .lab{color:rgba(255,255,255,.85)}
  :root[data-hero] .hero__copy{grid-column:1;padding:0 28px 40px}
  :root[data-hero] .hero__cta{grid-column:2;padding:0 28px 40px;flex-direction:column;align-items:flex-start;gap:12px}
  :root[data-hero] .hero__cta .lab{padding:0}
  :root[data-hero] .hero__cta .btn{min-height:58px;padding:0 32px;font-size:16px;background:var(--ember);color:#FFFFFF}
  :root[data-hero] .hero .num{font-size:112px;line-height:104px}
  .hero .shot{top:96px;bottom:auto}
  .breather{display:block;min-height:100svh}
  .breather__line{position:absolute;left:calc(var(--pane-a) + var(--hinge));right:0;bottom:0}
  .work .slot{aspect-ratio:auto;flex:1;min-height:60svh}
  .foot{padding-left:calc(var(--pane-a) + var(--hinge) + 28px)}
  .sticky{left:calc(var(--pane-a) + var(--hinge))}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;scroll-snap-type:none!important}
  .js [data-r]{transform:none;transition:opacity 150ms linear}
  .js .breather__line{transition:opacity 150ms linear}
  .sticky{transform:none;transition:none}
  .slot video{transition:none}
  details[open] .fold__body,details[open] .more__body{animation:none}
}
@media (max-width:699px){html{scroll-snap-type:y proximity}.screen{scroll-snap-align:start}.foot{scroll-snap-align:end}}

/* print: the site prints clean; the designed one-pager lives at ./one-pager/ */
@media print{.top,.sticky,.slot .shot,.menu{display:none!important}.screen{min-height:0!important;break-inside:avoid}body{color:#111;background:#fff}}

/* Hero ground: the soft gradient from the approved frame shows until his clip drops into the empty slot. Other empty slots hide. */
.slot.is-empty:not(.slot--hero):not(.slot--keep){display:none}

/* OFFER: three partnership structures, sold like plans, without prices. Partner is the featured card. */
.offer__head{display:flex;flex-direction:column;gap:12px;max-width:640px}
.offer__sub{font-size:17px;line-height:23px}
.offer__urgency{font-size:14px;line-height:20px;font-weight:500;color:var(--ink)}
.offer__urgency mark{background:#FFF2B8;color:#111;padding:1px 4px}
.deals{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--g) * -1);padding:4px var(--g) 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.deals::-webkit-scrollbar{display:none}
.deal{flex:0 0 84%;scroll-snap-align:center;display:flex;flex-direction:column;gap:12px;padding:24px 20px 20px;border:1px solid var(--stone);background:var(--ground)}
.deal.is-featured{border:2px solid var(--cta);box-shadow:0 12px 32px rgba(156,74,43,.12)}
.deal__tag{font-size:11px;line-height:14px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--label)}
.deal.is-featured .deal__tag{color:var(--cta)}
.deal__name{font-size:32px;line-height:34px;font-weight:600;letter-spacing:-.04em}
.deal__what{font-size:15px;line-height:21px}
.deal__inc{display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--stone);padding-top:14px;flex:1}
.deal__inc li{display:flex;gap:10px;font-size:14px;line-height:20px}
.deal__inc li::before{content:"";flex:none;width:14px;height:14px;margin-top:3px;background:var(--ember);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat}
.deal__who{margin-top:2px}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.offer__proof{max-width:760px}
@media (min-width:680px){
  .screen:not(.hero):not(.breather).offer{display:flex;flex-direction:column;gap:28px}
  .deal{flex-basis:46%}
}
@media (min-width:1024px){
  .screen:not(.hero):not(.breather).offer{min-height:100vh;justify-content:center;padding:112px var(--side) 72px;gap:32px}
  .deals{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;overflow:visible;margin:0;padding:12px 0 0;align-items:stretch}
  .deal{padding:28px 26px 24px}
  .deal--test{order:1}.deal--partner{order:2;transform:translateY(-12px)}.deal--bundle{order:3}
  .offer__head{max-width:none;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:32px}
  .offer__head .lab{flex-basis:100%}
}
.deal .btn{padding:0 14px;font-size:15px}

/* Platform toggle: LinkedIn | TikTok + IG. Swaps the cards, proof line and email subjects with a 200ms crossfade. */
.seg{display:inline-flex;align-self:flex-start;padding:3px;border:1px solid var(--stone);background:var(--ground);gap:2px}
.seg__opt{min-height:40px;padding:0 18px;font-size:14px;font-weight:500;color:var(--label);transition:background-color var(--dur-quick),color var(--dur-quick)}
.seg__opt[aria-selected="true"]{background:var(--ink);color:var(--ground)}
.seg__opt:hover:not([aria-selected="true"]){color:var(--ink)}
.deals-panel{display:flex;flex-direction:column;gap:20px}
.deals-panel[hidden]{display:none}
.deals-panel.is-entering{animation:panelin var(--dur-quick) var(--ease-in-out)}
@keyframes panelin{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.deals-panel.is-entering{animation:none}}

/* Hero: "See the work" sits beside the one button, quieter */
.hero__btns{display:flex;align-items:center;gap:24px}
.hero__more{font-size:16px;font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;padding:14px 0;color:inherit}
@media (max-width:1023px){
  .hero__btns{flex-direction:column;align-items:stretch;gap:4px}
  .hero__more{text-align:center}
}

/* The fork: tech or skincare. Each whole card is the link; the media slot waits for a short clip per side. */
.fork{gap:24px}
.fork__head{display:flex;flex-direction:column;gap:12px}
.fork__grid{display:grid;grid-template-columns:1fr;gap:16px}
.fork__card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);border:1px solid var(--stone);background:var(--ground);transition:border-color var(--dur-quick)}
.fork__card .slot{position:relative;aspect-ratio:16/9;overflow:hidden}
.fork__card--tech .slot{background:linear-gradient(170deg,#EEF1F3 0%,#D3D9DE 45%,#8C959C 100%)}
.fork__card--lifestyle .slot{background:linear-gradient(160deg,#F3EEE7 0%,#E3D3C2 45%,#B89F88 80%,#8A6A55 100%)}
.fork__card .slot::before{content:"";position:absolute;inset:0;background:inherit;transform:scale(1);transition:transform var(--dur-slow) var(--ease-out)}
.fork__body{display:flex;flex-direction:column;gap:8px;padding:22px 20px 20px}
.fork__num{font-size:76px;line-height:72px;font-weight:600;letter-spacing:-.05em;margin-top:6px}
.fork__list{display:flex;flex-direction:column;margin:10px 0 6px;border-top:1px solid var(--stone)}
.fork__list li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--stone);font-size:14px;line-height:20px}
.fork__list b{font-weight:400}
.fork__list span{color:var(--label);text-align:right;flex-shrink:0}
.fork__go{display:flex;align-items:center;gap:8px;font-weight:500;font-size:16px;padding-top:6px}
.fork__arrow{transition:transform var(--dur-quick) var(--ease-out)}
.fork__card:hover{border-color:var(--ink)}
.fork__card:hover .slot::before{transform:scale(1.04)}
.fork__card:hover .fork__arrow,.fork__card:focus-visible .fork__arrow{transform:translateX(4px)}
.crosslink{display:inline-flex;gap:6px;font-size:14px;color:var(--label);text-decoration:none;padding:12px 0}
.crosslink:hover{color:var(--ink)}
@media (min-width:680px){.fork__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){
  .screen:not(.hero):not(.breather).fork{display:flex;flex-direction:column;min-height:100vh;justify-content:center;padding:112px var(--side) 72px;gap:32px}
  .fork__grid{gap:24px}
  .fork__body{padding:28px 28px 26px}
  .fork__num{font-size:96px;line-height:90px}
}
@media (min-width:680px) and (max-width:1023px) and (min-aspect-ratio:5/6) and (max-aspect-ratio:6/5) and (pointer:coarse),(horizontal-viewport-segments:2){
  .screen:not(.hero):not(.breather).fork{display:flex;flex-direction:column;padding:88px 0 40px;gap:20px}
  .fork__head{padding:0 28px}
  .fork__grid{grid-template-columns:var(--pane-a) 1fr;column-gap:var(--hinge)}
  .fork__card{border-left:0;border-right:0}
}
@media (prefers-reduced-motion:reduce){.fork__card .slot::before,.fork__arrow{transition:none}}
@media (min-width:1024px){.screen:not(.hero):not(.breather).fork,.screen:not(.hero):not(.breather).offer{align-items:stretch}}
@media (max-width:679px){.fork__list li{flex-direction:column;gap:2px}.fork__list span{text-align:left}}
@media (min-width:1024px){.fork__card .slot{aspect-ratio:12/5}}

/* Buttons (His Grace, Nov 9): Ember with white label everywhere, including the hero (a hairline Bone edge and a soft shadow lift it off the dark gradient). Bone is kept for the avatar ground only. */
.hero .btn{background:var(--ember);color:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(242,238,230,.55),0 10px 28px rgba(17,17,17,.28)}
@media (max-width:1023px){[data-hero="4"] .hero .btn{box-shadow:none}}
@media (min-width:680px) and (max-width:1023px) and (min-aspect-ratio:5/6) and (max-aspect-ratio:6/5) and (pointer:coarse),(horizontal-viewport-segments:2){:root[data-hero] .hero .btn{background:var(--ember);color:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(242,238,230,.55),0 10px 28px rgba(17,17,17,.28)}}
.top__cta{color:var(--ember)}

/* Home hero: follower first glance. Platform rows, not a sentence. */
.hero__plat-unused{display:flex;flex-wrap:wrap;gap:6px 22px}
.hero__plat li{display:flex;align-items:baseline;gap:6px}
.hero__plat span{font-size:13px;line-height:18px;opacity:.85}
.hero__plat b{font-size:20px;line-height:24px;font-weight:600;letter-spacing:-.02em}
.hero__brands{font-size:13px;line-height:18px;opacity:.9}
.hero__brands span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-right:8px;opacity:.8}
.hero__brands i{font-style:normal;opacity:.45;margin:0 4px}
@media (min-width:1024px){.hero__plat b{font-size:26px;line-height:30px}.hero__plat-unused{gap:8px 32px}}

/* A note from Ace on the offer: the one soft, human element (round avatar, rounded bubble with a tail). */
.note{display:flex;gap:12px;align-items:flex-end;max-width:520px}
.note__avatar{width:44px;height:44px;border-radius:50%;flex:none;object-fit:cover;background:var(--bone)}
.note__body{display:flex;flex-direction:column}
.bubble{position:relative;background:#ECEAE6;color:#111111;border-radius:18px 18px 18px 4px;padding:10px 14px;font-size:15px;line-height:21px}
.bubble::before{content:"";position:absolute;left:-5px;bottom:0;width:12px;height:12px;background:#ECEAE6;clip-path:polygon(100% 0,100% 100%,0 100%)}
.note__meta{font-size:12px;line-height:16px;color:var(--label);margin:6px 0 0 4px}
.bubble__typing{position:absolute;left:14px;top:50%;transform:translateY(-50%);display:flex;gap:4px;opacity:0}
.bubble__typing i{width:6px;height:6px;border-radius:50%;background:#9A958E;animation:dot 600ms infinite}
.bubble__typing i:nth-child(2){animation-delay:100ms}.bubble__typing i:nth-child(3){animation-delay:200ms}
@keyframes dot{0%,100%{opacity:.35}50%{opacity:1}}
.js .offer .bubble__text{opacity:0;transform:translateY(4px)}
.js .offer.is-in .bubble__typing{animation:typing 600ms linear forwards}
.js .offer.is-in .bubble__text{animation:bubin var(--dur-base) var(--ease-out) 600ms forwards}
@keyframes typing{0%,95%{opacity:1}100%{opacity:0}}
@keyframes bubin{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .offer .bubble__text{opacity:1;transform:none;animation:none}.js .offer.is-in .bubble__typing{animation:none;opacity:0}}
@media (min-width:1024px){.offer__head .note{flex-basis:100%;margin-top:4px}}

/* /offer page: no hero, ink header, the offer is the page */
.page-offer .top{color:var(--ink)}
.page-offer .offer{min-height:100svh}
@media (max-width:1023px){.page-offer .screen.offer{padding-top:88px}}
html body.page-offer .top:not(.is-past),html body.page-offer .top{color:var(--ink)}

/* Home glance, 3 tiers: the number, one quiet line, the sentence. Brands sit just above the button. */
.hero__copy{gap:0}
.hero .num{margin-bottom:18px}
.hero__meta{font-size:15px;line-height:21px;letter-spacing:0}
.hero .line{margin-top:28px;font-size:17px;line-height:24px;max-width:520px}
.hero__brands{font-size:11px;line-height:16px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
@media (min-width:1024px){
  :root[data-hero] .hero .line{font-size:22px;line-height:30px;max-width:540px;letter-spacing:-.01em}
  .hero__meta{font-size:16px;line-height:22px}
  .hero .num{margin-bottom:22px}
  .hero__brands--cta{order:-1;margin-bottom:6px}
}
/* Empty footage frames: clean stone panels until his clips drop in */
.slot--frame{background:#F1EFEB}
.slot--frame::before{display:none}

/* Chooser (home #work): Tech first and primary, Lifestyle second */
.fork__card .slot{aspect-ratio:16/9}
.fork__name{font-size:48px;line-height:48px;font-weight:600;letter-spacing:-.05em}
.fork__line{font-size:15px;line-height:21px;margin-top:6px}
.fork__num{font-size:56px;line-height:54px;margin-top:18px}
.fork__card.is-primary{border:2px solid var(--ember)}
.fork__card.is-primary .fork__go{color:var(--ember)}
@media (min-width:1024px){.fork__grid{grid-template-columns:1.15fr 1fr}.fork__name{font-size:64px;line-height:62px}.fork__num{font-size:72px;line-height:68px}.fork__card .slot{aspect-ratio:21/9}}

/* Portfolio pages (/tech, /lifestyle) */
.hero--short{min-height:76svh}
.hero__path{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;opacity:.9}
@media (min-width:1024px){.hero--short{min-height:78vh}}
.pwork{gap:24px}
.pwork__head{display:flex;flex-direction:column;gap:12px}
.pgrid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--g) * -1);padding:4px var(--g) 10px;scrollbar-width:none}
.pgrid::-webkit-scrollbar{display:none}
.pcard{flex:0 0 66%;scroll-snap-align:start;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);border:1px solid var(--stone);background:var(--ground);transition:border-color var(--dur-quick)}
.pcard:hover{border-color:var(--ink)}
.pcard .slot{position:relative;aspect-ratio:9/16}
.pcard--post .slot{aspect-ratio:4/5}
.pcard__body{display:flex;flex-direction:column;gap:6px;padding:14px 14px 16px}
.pcard__top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pcard__brand{font-size:16px;line-height:20px;font-weight:600;letter-spacing:-.01em}
.pcard__kind{font-size:11px;line-height:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--label);flex:none}
.pcard--tall .pcard__kind,.pcard .pcard__kind{color:var(--label)}
.pcard__num{font-size:32px;line-height:34px;font-weight:600;letter-spacing:-.04em;margin-top:4px}
.pcard__num small{font-size:13px;font-weight:400;letter-spacing:0;color:var(--label)}
.pcard__what{font-size:14px;line-height:20px}
@media (min-width:680px){.pcard{flex-basis:40%}}
@media (min-width:1024px){
  .screen:not(.hero):not(.breather).pwork{display:flex;flex-direction:column;align-items:stretch;padding:120px var(--side) 96px;gap:32px}
  .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;overflow:visible;margin:0;padding:0;align-items:start}
  .pcard.is-lead{grid-column:span 2}
  .pcard .slot{aspect-ratio:4/5}.pcard--post .slot{aspect-ratio:1/1}.pcard.is-lead .slot{aspect-ratio:16/10}
  .pcard.is-lead .pcard__num{font-size:56px;line-height:56px}
  .screen.start[data-folds]{grid-template-columns:1fr;max-width:840px}
}
.reach .stats{grid-template-columns:1fr 1fr}

/* Case detail: a side panel on desktop, a full sheet on the phone. Opens via #case-id, works without JS. */
.case{position:fixed;inset:0;z-index:40;display:none}
.case:target{display:block}
.case__scrim{position:absolute;inset:0;background:rgba(17,17,17,.45)}
.case__panel{position:absolute;top:0;right:0;bottom:0;width:min(520px,100%);overflow:auto;background:var(--ground);color:var(--ink);padding:20px 28px 40px;display:flex;flex-direction:column;gap:14px;animation:casein var(--dur-base) var(--ease-out)}
@keyframes casein{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.case__close{align-self:flex-end;font-size:14px;text-decoration:underline;text-underline-offset:3px;padding:10px 0;color:var(--ink)}
.case .caps{color:var(--label)}
.case__brand{font-size:40px;line-height:42px;font-weight:600;letter-spacing:-.04em}
.case__num{font-size:56px;line-height:56px;font-weight:600;letter-spacing:-.05em}
.case__num small{font-size:15px;font-weight:400;letter-spacing:0;color:var(--label)}
.case__media{aspect-ratio:9/16;width:min(100%,300px)}
.case__rows{border-top:1px solid var(--ink)}
.case__rows>div{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--stone)}
.case__rows dt{width:104px;flex:none;font-size:13px;line-height:21px;color:var(--label)}
.case .btn{margin-top:8px}
@media (prefers-reduced-motion:reduce){.case__panel{animation:none}}
@media (max-width:1023px){.pcard .slot{aspect-ratio:4/5}.pcard--post .slot{aspect-ratio:1/1}}

/* Chooser cards: soft gradient posters until his clips exist; the clip plays on hover or focus (desktop) or when 60% in view (touch). */
.slot--hoverplay video{opacity:0;transition:opacity 200ms var(--ease-in-out)}
.fork__card.is-playing .slot--hoverplay video{opacity:1;transition-duration:300ms}
.fork__card:not(.is-playing) .slot--hoverplay video.is-on{opacity:0}  /* out of hover: back to the poster, even once the clip has loaded */
.fork__label{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:2px;transition:background-size var(--dur-quick) var(--ease-out)}
.fork__card:hover .fork__label,.fork__card:focus-visible .fork__label{background-size:100% 1px}
.fork__go{transition:transform var(--dur-instant)}
.fork__card:active .fork__go{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){.fork__label{transition:none}.slot--hoverplay video{display:none}}
/* sound chip: below the header on the hero; hidden on cards (a tap opens the case), shown in case panels */
.hero .sound{top:auto;bottom:auto;top:76px;right:var(--g)}
.pcard .sound,.pcard .play,.fork__card .sound,.fork__card .play,.hero .play{display:none!important}  /* hero and chooser loops: reduced motion shows the poster only */
@media (min-width:1024px){.hero .sound{right:var(--side);top:84px}}

/* Nov 9 (His Grace): no orange outline on Tech, both choices equal; the note bubble is static */
.fork__card.is-primary{border:1px solid var(--stone)}
.fork__card.is-primary .fork__go{color:inherit}
@media (min-width:1024px){.fork__grid{grid-template-columns:1fr 1fr}}
.js .offer .bubble__text{opacity:1;transform:none;animation:none}
.bubble__typing{display:none}

/* ---- Motion fixes (His Grace approved 1, 4, 5, 6, 7 on Nov 9). Once only, transform and opacity only, off under reduced motion. ---- */
/* 4. Offer cards enter: Test and Launch bundle rise first, Partner arrives ~120ms later and settles into its raised spot. No orange outline. */
.deal.is-featured{border:1px solid var(--ink);box-shadow:0 12px 32px rgba(17,17,17,.08)}
.deal.is-featured .deal__tag{color:var(--ink)}
.deal{--rest:0px;transform:translateY(var(--rest))}
@media (min-width:1024px){.deal--partner{--rest:-12px}}
.js .offer:not(.is-in) .deal{opacity:0}
.js .offer.is-in .deal{animation:dealin var(--dur-base) var(--ease-out) backwards}
.js .offer.is-in .deal--partner{animation-delay:120ms}
@keyframes dealin{from{opacity:0;transform:translateY(calc(var(--rest) + 8px))}to{opacity:1;transform:translateY(var(--rest))}}
/* 5. Hover (desktop only): 2px lift and a darker border */
@media (hover:hover){
  .deal{transition:transform var(--dur-quick) var(--ease-out),border-color var(--dur-quick) var(--ease-out)}
  .deal:hover{transform:translateY(calc(var(--rest) - 2px));border-color:#8A857E}
  .deal.is-featured:hover{border-color:#111111}
}
/* 6. Checkmarks draw in once as the cards enter, ~40ms apart */
.deal__inc li::before{display:none}
.chk{width:14px;height:14px;flex:none;margin-top:3px;fill:none;stroke:var(--ember);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chk path{stroke-dasharray:16;stroke-dashoffset:0}
.js .offer:not(.is-in) .chk path{stroke-dashoffset:16}
.js .offer.is-in .chk path{animation:chkdraw 280ms var(--ease-out) backwards;animation-delay:calc(200ms + var(--i, 0) * 40ms)}
.js .offer.is-in .deal--partner .chk path{animation-delay:calc(320ms + var(--i, 0) * 40ms)}
@keyframes chkdraw{from{stroke-dashoffset:16}to{stroke-dashoffset:0}}
/* 7. Platform switch: incoming cards slide ~8px from the side of the tapped tab with a 200ms crossfade; the panel height eases so the page doesn't jump */
.deals-wrap{transition:height var(--dur-quick) var(--ease-in-out)}
.deals-panel.is-entering{animation:panelslide var(--dur-quick) var(--ease-in-out)}
@keyframes panelslide{from{opacity:0;transform:translateX(var(--dx, 0px))}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js .offer .deal,.js .offer.is-in .deal{animation:none;opacity:1}
  .js .offer .chk path,.js .offer.is-in .chk path{animation:none;stroke-dashoffset:0}
  .deal,.deal:hover{transition:none}
  .deals-wrap{transition:none}
  .deals-panel.is-entering{animation:none}
}

/* Portfolio heroes: no button; the title line closes the left stack */
.hero--short .hero__title{margin-top:18px;opacity:.85}
@media (min-width:1024px){.hero--short .hero__copy{max-width:900px}}
/* Case panels with more than one video: side by side, each labelled with its number */
.case__clips{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.case__clip{display:flex;flex-direction:column;gap:6px;margin:0}
.case__clips .case__media{width:100%}

/* Logo: his crayon "Ace" signature, 30px tall in the header */
.logo{display:block;height:30px;width:auto}
.top__name{display:inline-flex;align-items:center;padding:8px 0}

/* The note texts in (His Grace, Nov 12: "the ... and then typing out what needs to be typed").
   JS drives it once, when the note itself is 60% on screen: dots ~1.3s, then the message types out character by character, then the reply line.
   The bubble keeps its final size the whole time (untyped letters are present but invisible), so nothing jumps. Reduced motion: text shows at once. */
.note__body{position:relative}
.typing{position:absolute;left:0;top:0;display:none;gap:4px;align-items:center;height:41px;padding:0 14px;background:#ECEAE6;border-radius:18px 18px 18px 4px}
.typing i{width:7px;height:7px;border-radius:50%;background:#8A857E;display:block;animation:typingdot 900ms var(--ease-in-out) infinite}
.typing i:nth-child(2){animation-delay:150ms}.typing i:nth-child(3){animation-delay:300ms}
@keyframes typingdot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-3px);opacity:1}}
.js .note.is-waiting .bubble,.js .note.is-waiting .note__meta,.js .note.is-dots .bubble,.js .note.is-dots .note__meta,.js .note.is-typing .note__meta{visibility:hidden}
.js .note.is-dots .typing{display:flex}
.bubble__text .ghost{visibility:hidden}
.js .note.is-done .note__meta{animation:metain 200ms var(--ease-out) both}
@keyframes metain{from{opacity:0}to{opacity:1}}

/* Spotted (/lifestyle): where Ace sits relative to brands. One line, two names, one cropped repost. */
.spotted__line{font-size:24px;line-height:31px;letter-spacing:-.02em;max-width:560px;margin-top:10px}
.spotted__list{margin-top:22px;border-top:1px solid var(--stone)}
.spotted__list li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--stone);font-size:15px}
.spotted__list a{font-weight:600;text-decoration:none}
.spotted__list a:hover{text-decoration:underline;text-underline-offset:3px}
.spotted__list span{color:var(--label);text-align:right}
.spotted__shot{margin:0;display:flex;flex-direction:column;gap:8px;max-width:300px}
.spotted__shot img{width:100%;height:auto;display:block;border:1px solid var(--stone)}
@media (min-width:1024px){.spotted__line{font-size:32px;line-height:40px}.spotted .pb{display:flex;justify-content:flex-end}}
@media (max-width:679px){.spotted__list li{flex-direction:column;gap:2px}.spotted__list span{text-align:left}}

/* Spotted: reposts side by side */
.spotted__shots{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:560px;width:100%}
.spotted__shots .spotted__shot{max-width:none}
.spotted__shots img{aspect-ratio:auto}
.spotted__shots img{aspect-ratio:460/720;object-fit:cover;object-position:50% 0;height:auto}

/* while typing, the bubble hugs the typed text and grows like a real message; its box is reserved by JS */
.note__body{align-items:flex-start}
.note.is-typing .bubble__text .ghost{display:none}
.note.is-typing .bubble{align-self:flex-start}
.note.is-typing .note__body{justify-content:flex-end}
.typing{top:auto;bottom:22px}
/* "Coming soon" card: signed partnership, not live yet. Not a link; no numbers, no clip. */
.pcard.is-soon{cursor:default}
.pcard.is-soon:hover{border-color:var(--stone)}
.pcard.is-soon .pcard__kind{color:var(--ember)}
/* Partner logo in a card frame (official lockup, ink version; no brand green, per Direction F) */
.pcard__logo{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:#F1EFEB;padding:18%}
.pcard__logo img{width:100%;height:auto;display:block}
@media (min-width:1024px){.pcard--post .pcard__logo{aspect-ratio:1/1}}
/* Platform mark on case media: LinkedIn "in" bug, top right, 24px (LinkedIn's minimum on screen is 21px) */
.pcard__media{position:relative;display:block}
.pcard__img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:#F1EFEB}
.pbadge{position:absolute;top:10px;right:10px;z-index:2;width:24px;height:24px;line-height:0;filter:drop-shadow(0 1px 2px rgba(17,17,17,.18))}
.pbadge svg{display:block;width:24px;height:24px}
/* Card with a post URL: stretched link opens the case panel; the LinkedIn bug on top links to the post (44px hit area) */
.pcard{position:relative}
.pcard__open{position:absolute;inset:0;z-index:1}
.pcard__open:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pbadge--link{z-index:3;top:0;right:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;transition:transform var(--dur-quick) var(--ease-out),filter var(--dur-quick)}
.pbadge--link svg{width:24px;height:24px}
.pbadge--link:hover,.pbadge--link:focus-visible{transform:scale(1.08);filter:drop-shadow(0 2px 6px rgba(17,17,17,.28))}
.pbadge--link:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
@media (prefers-reduced-motion:reduce){.pbadge--link{transition:none}.pbadge--link:hover{transform:none}}
.pcard__media picture{display:block}
.case__still{width:min(100%,360px)}
.case__img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}

/* Granola note card: a page from Granola's notes app (His Grace: "use their exact design language").
   Tokens from granola.ai CSS: oats-neutral-50/100 paper, neutral-500 meta, neutral-800 ink, oats-green-500 accent. */
.gnote{display:flex;flex-direction:column;aspect-ratio:1/1;background:#f7f7f2;color:#292929;font-family:"Inter Tight",Inter,system-ui,sans-serif;overflow:hidden}
.gnote__bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid #eaebe5;background:#fcfcf8}
.gnote__logo{height:15px;width:auto;display:block}
.gnote__kind{font-size:11px;line-height:14px;color:#818179;letter-spacing:.01em}
.gnote__page{display:flex;flex-direction:column;gap:6px;padding:18px 20px 16px}
.gnote__title{font-family:"Zilla Slab",Georgia,serif;font-weight:400;font-size:26px;line-height:30px;letter-spacing:-.01em;color:#1e1e1e}
.gnote__meta{display:flex;align-items:center;gap:6px;font-size:13px;line-height:18px;color:#72726e}
.gnote__meta svg{width:14px;height:14px;fill:none;stroke:#818179;stroke-width:1.3}
.gnote__h{margin-top:12px;font-size:14px;line-height:20px;font-weight:600;color:#1e1e1e}
.gnote__h b{font-weight:400;color:#acada8;margin-right:4px}
.gnote__list{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.gnote__list li{display:flex;align-items:center;gap:9px;font-size:14px;line-height:20px;color:#4e4d4b}
.gnote__box{flex:none;width:15px;height:15px;border:1.5px solid #acada8;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;background:#fcfcf8}
.gnote__list li.is-done .gnote__box{background:#5b6f00;border-color:#5b6f00}
.gnote__box svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gnote__list li.is-done a{color:#1e1e1e;text-decoration:underline;text-underline-offset:3px;position:relative;z-index:2}
@media (min-width:1024px){.gnote__title{font-size:24px;line-height:28px}}

/* Hero sequence: clips stack over the poster and crossfade 700ms; the scrim (.hero .slot::before) keeps the number readable. */
/* Real foldables (dual-pane): the scrolling rows stay inside their pane, no bleed past the screen edge. */
@media (min-width:680px) and (max-width:1023px) and (min-aspect-ratio:5/6) and (max-aspect-ratio:6/5) and (pointer:coarse),(horizontal-viewport-segments:2){
  .screen>*{min-width:0}
  .pgrid,.deals{margin-left:0;margin-right:0;max-width:100%}
}
/* Mouse-only windows between phone and desktop (a half-screen Mac window): no swipe rows, since a mouse wheel can't scroll sideways. Cards sit in a grid. */
@media (min-width:600px) and (max-width:1023px) and (pointer:fine){
  .pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;overflow:visible;margin:0;padding:0;align-items:start}
  .pcard{flex:none}
  .deals{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;overflow:visible;margin:0;padding:4px 0 0}
  .deal{flex:none}
}

/* Granola card: live transcript that resolves into the note. Final note is the resting state (no JS, reduced motion).
   With JS the card gets .ga (armed); the timeline adds .is-live, .is-gen, .is-notes, .is-end. The note box never changes size. */
.gnote{position:relative}
.gnote__body{position:relative;flex:1;min-height:0}
.gnote__live{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:16px 18px 14px;background:#f7f7f2;opacity:0;visibility:hidden;pointer-events:none}
.gnote__lines{display:flex;flex-direction:column;gap:10px}
.gt{display:flex;flex-direction:column;gap:1px}
.gt__who{font-size:11px;line-height:14px;font-weight:600;color:#292929;letter-spacing:.01em}
.gt--them .gt__who{color:#788c15}
.gt__say{font-size:14px;line-height:20px;color:#4e4d4b}
.gt .w{opacity:0;transition:opacity 180ms ease-out}
.gt .w.on{opacity:1}
.gt{opacity:0}
.gt.on{opacity:1}
.gpills{display:grid;place-items:center;grid-template-areas:"p"}
.gpill{grid-area:p;display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 14px;border-radius:999px;font-size:12px;letter-spacing:.01em;transition:opacity 250ms ease,transform 250ms ease}
.gpill--rec{background:#fff;border:1px solid #47432a33;color:#72726e;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}
.gpill--gen{background:#292929;color:#fff;font-weight:500;gap:6px;opacity:0;transform:scale(.96);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}
.gpill--gen svg{width:14px;height:14px;fill:currentColor}
.gbars{display:flex;align-items:center;gap:3px}
.gbar{position:relative;width:3px}
.gbar i{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;border-radius:999px;background:#292929;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:paused}
.gnote.is-live .gbar i{animation-play-state:running}
@keyframes gbar-top-1{0%{transform:translateY(0)}to{transform:translateY(-4px)}}
@keyframes gbar-bottom-1{0%{transform:translateY(0)}to{transform:translateY(4px)}}
@keyframes gbar-top-2{0%{transform:translateY(0)}to{transform:translateY(-2.5px)}}
@keyframes gbar-bottom-2{0%{transform:translateY(0)}to{transform:translateY(2.5px)}}
@keyframes gbar-top-3{0%{transform:translateY(0)}to{transform:translateY(-5px)}}
@keyframes gbar-bottom-3{0%{transform:translateY(0)}to{transform:translateY(5px)}}
/* armed: the note waits under the transcript */
.gnote.ga .gnote__page>*{opacity:0}
.gnote.ga .gnote__live{opacity:1;visibility:visible;transition:opacity 350ms ease,transform 350ms ease,visibility 0s linear 0s}
.gnote.ga.is-gen .gpill--rec{opacity:0;transform:scale(.96)}
.gnote.ga.is-gen .gpill--gen{opacity:1;transform:scale(1)}
.gnote.ga.is-press .gpill--gen{transform:scale(.95)}
.gnote.ga.is-notes .gnote__live{opacity:0;transform:translateY(-6px);visibility:hidden;transition:opacity 350ms ease,transform 350ms ease,visibility 0s linear 350ms}
.gnote.ga.is-notes .gnote__page>*{opacity:1;transition:opacity 300ms ease}
/* Granola's enhanced-notes sweep: text slides in through their colors and settles to ink */
.gnote.ga.is-notes .gx{color:transparent;-webkit-text-fill-color:transparent;background-image:linear-gradient(90deg,var(--gc,#4e4d4b) 0 33.33%,#febe29 40%,#ff91e0 45%,#cebef8 50%,#d2e4f8 55%,#d1e043 60%,#0000 66.67%,#0000);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;animation:gsweep 900ms cubic-bezier(.25,.1,.25,1) both}
.gnote__title.gx{--gc:#1e1e1e}.gnote__h .gx{--gc:#1e1e1e}.gnote__meta .gx{--gc:#72726e}
.gnote.ga.is-notes .gnote__page>:nth-child(2) .gx,.gnote.ga.is-notes .gnote__page>:nth-child(2){animation-delay:120ms;transition-delay:120ms}
.gnote.ga.is-notes .gnote__page>:nth-child(3){animation-delay:240ms;transition-delay:240ms}
.gnote.ga.is-notes .gnote__list li:nth-child(1) .gx{animation-delay:360ms}
.gnote.ga.is-notes .gnote__list li:nth-child(2) .gx{animation-delay:480ms}
.gnote.ga.is-notes .gnote__list li .gnote__box{opacity:0;transition:opacity 300ms ease 400ms}
.gnote.ga.is-notes .gnote__list li .gnote__box{opacity:1}
@keyframes gsweep{from{background-position:100% 0}to{background-position:0 0}}
.gnote.ga.is-end .gx{background:none;color:inherit;-webkit-text-fill-color:currentColor;animation:none}
/* the slow pulse on "coming soon": Granola's accent green */
.gdot{flex:none;width:6px;height:6px;border-radius:50%;background:#788c15;margin-left:-3px}
.gnote.ga .gdot{opacity:0;transition:opacity 400ms ease}
.gnote.ga.is-end .gdot{opacity:1}
.gnote.is-end .gdot,.gnote:not(.ga) .gdot{animation:gpulse 2s ease-in-out infinite}
@keyframes gpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.gdot{animation:none!important}.gbar i{animation:none!important}}

/* Homepage "Now": the Granola card as a compact moment between the hero and the chooser. Below the fold, so it never competes with 178K. */
.now{padding:56px var(--g) 8px}
.now__in{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.now__lab{display:flex;align-items:center;gap:8px}
.now__dot{width:7px;height:7px;border-radius:50%;background:var(--ember)}
.now__card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);border:1px solid var(--stone);background:var(--ground);transition:border-color var(--dur-quick)}
.now__card:hover{border-color:#cfcbc4}
.now__card .gnote{aspect-ratio:auto;height:290px}
.now__cap{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;padding:14px 16px;font-size:14px;line-height:20px;color:var(--label)}
.now__cap b{color:var(--ink);font-weight:600}
@media (min-width:1024px){
  .now{padding:96px var(--side) 0}
  .now__in{display:grid;grid-template-columns:200px minmax(0,440px);column-gap:40px;align-items:start;max-width:none;margin:0}
  .now__lab{padding-top:4px}
}
/* comparison only (ACE_NOW=beside): the card as a third column in the chooser row */
.fork--now .fork__grid{grid-template-columns:1fr 1fr minmax(0,.8fr)}
.fork__nowcol{display:flex;flex-direction:column;gap:12px}
.fork__nowcol .gnote{aspect-ratio:auto;height:300px}
:target.pcard,.pcard:target{scroll-margin-top:96px}
#card-granola{scroll-margin-top:96px}
.events .spotted__list b{font-weight:600}
.events{min-height:auto}
/* soft loop seam (slot--seamfade): the video dips to its poster for about 0.3s at the loop point */
.slot--seamfade video{transition:opacity 280ms var(--ease-in-out)}
.fork__card.is-playing .slot--seamfade video.is-dip,.slot--seamfade video.is-dip{opacity:0}
/* Hero over real footage (desktop): a soft shade pooled behind the 178K block, no hard band. Measured over the brightest rooftop frames: 178K holds 4.5:1+. */
@media (min-width:1024px){
  .hero--clip .slot--hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 58% 52% at 14% 76%,rgba(17,17,17,.42) 0,rgba(17,17,17,.22) 45%,rgba(17,17,17,0) 75%)}
}

/* Hero sequence v2 (His Grace, Nov 12): clip layers, wider framing, three transition styles to compare (?t=1, 2, 3).
   The incoming clip always arrives over an opaque outgoing one, so there is never a muddy half-and-half frame. */
.slot--seq{isolation:isolate}
:root .hero .slot.slot--seq::before,.hero--clip .slot--hero.slot--seq::after{z-index:3}
.seq__clip{position:absolute;inset:0;overflow:hidden;opacity:0;z-index:0}
.seq__clip.is-on{opacity:1}
.seq__clip.is-top{z-index:1}
.slot--seq .seq__clip video,.slot--seq .seq__clip .seq__still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);opacity:1;transition:none}
.slot--seq .seq__clip video{opacity:0}
.slot--seq .seq__clip video.is-on{opacity:1}
.seq__bg{display:none;position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(30px) brightness(.62) saturate(.85)}
/* uncropped compositions: phone shows the wide clips whole, desktop shows the vertical clip whole */
@media (max-width:1023px){
  .seq__clip--wide .seq__bg{display:block}
  .slot--seq .seq__clip--wide video,.slot--seq .seq__clip--wide .seq__still{object-fit:contain;object-position:50% 34%}
}
@media (min-width:1024px){
  .seq__clip--tall .seq__bg{display:block}
  .slot--seq .seq__clip--tall video,.slot--seq .seq__clip--tall .seq__still{object-fit:contain;object-position:50% 50%}
}
/* t=1 slow drift dissolve: 1.4s fade in over the outgoing clip, each clip eases from 1.00 to 1.06 while it plays */
/* 01 matched-light dissolve (His Grace, Nov 12). 1.6s. Opacity follows smootherstep (6t^5-15t^4+10t^3), sampled every 10%.
   The brightness match stands in for the linear-light blend: outgoing rises to +14% by the midpoint, incoming starts at -12% and settles.
   No zoom: the clips play static ("i guess i dont like drift"). */
.seq__clip.is-in{animation:seq-in 1600ms linear both}
.seq__clip.is-out{animation:seq-out 1600ms linear both}
@keyframes seq-in{
  0%{opacity:0;filter:brightness(.88)}10%{opacity:.0086;filter:brightness(.881)}20%{opacity:.0579;filter:brightness(.887)}
  30%{opacity:.1631;filter:brightness(.9)}40%{opacity:.3174;filter:brightness(.918)}50%{opacity:.5;filter:brightness(.94)}
  60%{opacity:.6826;filter:brightness(.962)}70%{opacity:.8369;filter:brightness(.98)}80%{opacity:.9421;filter:brightness(.993)}
  90%{opacity:.9914;filter:brightness(.999)}100%{opacity:1;filter:brightness(1)}}
@keyframes seq-out{
  0%{filter:brightness(1)}10%{filter:brightness(1.008)}20%{filter:brightness(1.046)}30%{filter:brightness(1.089)}
  40%{filter:brightness(1.126)}50%{filter:brightness(1.14)}100%{filter:brightness(1.14)}}
@media (prefers-reduced-motion:reduce){.seq__clip{transition:none!important;animation:none!important;filter:none!important}}

/* Press-badge wall (/tech Events, His Grace Nov 12): each event is a conference pass. Top: event wordmark, city and year.
   Middle: role band(s) like a badge strip. Bottom: what he made there. A hole-punch slot at the top. 3 across on desktop, stacked on phone. */
.events{display:block}
.events__head{max-width:720px}
.events__cta{display:flex;flex-direction:column;gap:20px;align-items:flex-start;margin-top:64px;padding-top:28px;border-top:1px solid var(--stone)}
.events__cta .btn{display:inline-flex;width:auto;align-self:flex-start}  /* a normal button, never a full-width bar */
.events__cta p{font-size:17px;max-width:520px}
.passes{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:28px}
@media (min-width:700px){.passes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.events__cta{flex-direction:row;align-items:center;justify-content:flex-start;gap:32px}}
@media (min-width:1100px){.passes{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}  /* 4 across: one row of passes, no orphan */
/* the badge wall is full width (not the two-column screen grid), bands line up across cards */
.screen.events:not(.hero):not(.breather){display:block}
/* Hero v3 (Video lane diagnosis, Nov 12): the grade should reach the screen.
   1) Desktop: wide 16:9 clips play uncropped (contain), the blurred copy only fills spare edges when the window is not 16:9.
   2) No full-frame darkening: a faint top fade for the menu, and two soft pools only behind the text blocks. Contrast measured. */
@media (min-width:1024px){
  .seq__clip--wide .seq__bg{display:block;filter:blur(30px) brightness(.78) saturate(.9)}
  .seq__clip--tall .seq__bg{filter:blur(34px) brightness(.48) saturate(.85)}  /* side panels beside the vertical clip sit under the text */
  .slot--seq .seq__clip--wide video,.slot--seq .seq__clip--wide .seq__still{object-fit:contain;object-position:50% 50%}
  :root .hero .slot.slot--seq::before,:root[data-hero] .hero .slot.slot--seq::before{background:linear-gradient(180deg,rgba(17,17,17,.2) 0,rgba(17,17,17,0) 110px)}
  .hero--clip .slot--hero.slot--seq::after{background:
    radial-gradient(ellipse 46% 42% at 16% 84%,rgba(17,17,17,.54) 0,rgba(17,17,17,.34) 50%,rgba(17,17,17,0) 100%),
    radial-gradient(ellipse 32% 28% at 87% 87%,rgba(17,17,17,.54) 0,rgba(17,17,17,.3) 55%,rgba(17,17,17,0) 100%)}
}
/* Hero band fix (His Grace, Nov 12: "there was also rhis", the blurred strip under the hero). Cause: wide clips were shown uncropped
   (object-fit:contain) inside a box that isn't 16:9, and the blurred poster copy (.seq__bg) filled the leftover strip.
   Desktop: the clip fills the hero (cover). Phone/tablet: the hero frame is exactly 16:9, so the clip shows whole with nothing around it. */
@media (min-width:1024px){
  .slot--seq .seq__clip--wide .seq__bg{display:none}
  .slot--seq .seq__clip--wide video,.slot--seq .seq__clip--wide .seq__still{object-fit:cover;object-position:var(--pos,50% 50%)}
}
@media (max-width:1023px){
  :root[data-hero] .hero.hero--clip{min-height:0;padding-top:calc(100vw * 9 / 16 + 28px)}
  :root[data-hero] .hero.hero--clip .slot.slot--seq{bottom:auto;height:auto;aspect-ratio:16/9}
  .slot--seq .seq__clip--wide .seq__bg{display:none}
  .slot--seq .seq__clip--wide video,.slot--seq .seq__clip--wide .seq__still{object-fit:cover;object-position:50% 50%}
  :root[data-hero] .hero.hero--clip .slot.slot--seq::before{background:linear-gradient(180deg,rgba(17,17,17,.32) 0,rgba(17,17,17,0) 96px)}
}
/* Badge wall with 5 passes (His Grace's final list, Nov 12): never a lone card on its own row.
   Phone: 1 column. 700-1023: 2 columns, the 5th spans both. 1024-1279: 2 over 3. 1280+: 5 across. (4 passes keep the 2 / 4-across grid above.) */
@media (min-width:700px) and (max-width:1023px){.passes--n5 .pass:nth-child(5){grid-column:1 / -1}}
@media (min-width:1024px) and (max-width:1279px){
  .passes--n5{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
  .passes--n5 .pass{grid-column:span 2}.passes--n5 .pass:nth-child(-n+2){grid-column:span 3}
}
@media (min-width:1280px){.passes--n5{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}}
/* "about 50K" (Nov 12 review): the qualifier sits small before the big number, so the number keeps its size */
.about{font-size:.26em;letter-spacing:0;font-weight:500;vertical-align:.9em;margin-right:.18em;opacity:.85}
/* Homepage v4 (His Grace, Nov 12; research/homepage-hero-nov12.md): the hero is the video only. No number, no copy over the footage.
   The H1 is for screen readers and search (.vh). A thin line at the bottom is the scroll cue; the pause button sits bottom right. */
.hero--video .hero__copy,.hero--video .hero__cta{display:none}
.hero--video .slot--hero::after{display:none!important}
.hero__down{position:absolute;left:50%;bottom:18px;z-index:5;width:44px;height:44px;margin-left:-22px;display:grid;place-items:center}
.hero__downline{display:block;width:1px;height:28px;background:rgba(255,255,255,.85);transform-origin:top;animation:downline 2.4s cubic-bezier(.22,.61,.36,1) infinite}
@keyframes downline{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.hero__downline{animation:none}}
.hero__down:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:1023px){
  :root[data-hero] .hero.hero--video{padding:calc(100vw * 9 / 16) 0 0}
  .hero--video .hero__down{display:none}  /* the next section already shows under the 16:9 frame */
}
.fork__total{margin-top:20px}
.start--home .pb{display:flex;flex-direction:column;justify-content:flex-end}
@media (min-width:1024px){.pgrid--n4{grid-template-columns:repeat(5,minmax(0,1fr))}}  /* 4 cards (lead spans 2): one row, no card alone on a second row */

/* Press passes v3 (His Grace, Nov 12: "use the colors of the company for the band, add the info as a animation on the back whenever
   you hover over it and add motion"). Each pass turns over: front = logo + role band(s) in the event's colors, back = role, proof, city.
   Both faces share one grid cell, so the card is as tall as its taller face. Motion is transform/opacity only. */
.pass{position:relative;display:block;perspective:1100px;outline:none;-webkit-tap-highlight-color:transparent;cursor:default}
.pass__inner{display:grid;height:100%;transform-style:preserve-3d;transition:transform 720ms cubic-bezier(.22,.61,.36,1) 110ms}
.pass__face{grid-area:1/1;display:flex;flex-direction:column;min-height:262px;background:#fff;border:1px solid #d9d5ce;
  box-shadow:0 1px 0 rgba(17,17,17,.04),0 12px 28px -18px rgba(17,17,17,.28);overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.pass__back{transform:rotateY(180deg);padding:40px 22px 22px;gap:14px;border-top:4px solid var(--accent)}
.pass__punch{position:absolute;top:12px;left:50%;width:44px;height:9px;margin-left:-22px;border-radius:999px;background:var(--stone);box-shadow:inset 0 1px 2px rgba(17,17,17,.18)}
.pass__logoarea{flex:1;display:flex;align-items:center;justify-content:center;padding:44px 22px 26px}
.pass__mark{font-size:30px;line-height:1;font-weight:600;letter-spacing:-.045em}
.pass__mark--logo{display:flex;flex-direction:column;align-items:center;gap:8px}
.pass__logo{display:block;width:auto;max-width:100%;height:var(--logo-h,36px);object-fit:contain;object-position:center}
.pass__logo--mono{filter:brightness(0)}  /* light-on-dark logos (Rolling Loud) shown one-colour black on the white front */
.pass__sub{font-size:16px;line-height:1.1;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.pass__bands{display:flex;flex-direction:column}
.pass__band{display:block;padding:10px 22px;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.pass__backtop{display:flex;flex-direction:column;gap:6px}
.pass__name{font-size:20px;line-height:1.15;font-weight:600;letter-spacing:-.03em}
.pass__role{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.pass__line{font-size:16px;line-height:1.4;color:var(--ink);text-decoration:none}
a.pass__line:hover{text-decoration:underline;text-underline-offset:3px}
.pass__where{margin-top:auto;padding-top:12px;border-top:1px solid var(--stone);font-size:13px;color:var(--label)}
/* lift first, then turn (the turn waits 110ms) */
.pass .pass__face{transition:box-shadow 320ms cubic-bezier(.2,0,0,1)}
.pass{transition:transform 320ms cubic-bezier(.2,0,0,1)}
@media (hover:hover){
  .pass:hover{transform:translateY(-4px)}
  .pass:hover .pass__face{box-shadow:0 1px 0 rgba(17,17,17,.04),0 22px 40px -22px rgba(17,17,17,.38)}
  .pass:hover .pass__inner{transform:rotateY(180deg)}
}
.pass:focus-visible{transform:translateY(-4px)}
.pass:focus-visible .pass__inner,.pass.is-flipped .pass__inner{transform:rotateY(180deg)}
.pass:focus-visible .pass__face{outline:2px solid var(--ink);outline-offset:2px}
/* staggered entrance as the wall scrolls in (JS adds .passes--wait, then .is-in); without JS the passes simply show */
.js .passes--wait .pass{opacity:0;transform:translateY(18px)}
.js .passes--wait.is-in .pass{opacity:1;transform:none;transition:opacity 700ms cubic-bezier(.2,0,0,1) calc(var(--i) * 80ms),transform 700ms cubic-bezier(.2,0,0,1) calc(var(--i) * 80ms)}
.js .passes--wait.is-in.is-done .pass{transition:transform 320ms cubic-bezier(.2,0,0,1)}
.js .passes--wait.is-in.is-done .pass:hover{transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){
  .pass,.pass:hover,.pass:focus-visible{transform:none!important}
  .pass__inner,.pass:hover .pass__inner,.pass:focus-visible .pass__inner,.pass.is-flipped .pass__inner{transform:none!important;transition:none}
  .pass__back{transform:none;opacity:0;transition:opacity 240ms linear}
  .pass__front{transition:opacity 240ms linear}
  .pass:hover .pass__back,.pass:focus-visible .pass__back,.pass.is-flipped .pass__back{opacity:1}
  .pass:hover .pass__front,.pass:focus-visible .pass__front,.pass.is-flipped .pass__front{opacity:0}
  .js .passes--wait .pass{opacity:1;transform:none}
}
/* Walls of 3 (/tech) and 2 (/lifestyle) passes (His Grace, Nov 12: "move rolling loud and twitch con to life style").
   3: one row of three from 700px up. 2: a pair side by side from 700px up, held to two pass widths so it reads as a pair, not a half row. */
@media (min-width:700px){
  .passes--n3{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .passes--n2{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:880px}
}

/* Greeting 3 (His Grace, Nov 12: "lets do that"), resized (His Grace: "text is wayyy play with the size so isn't overwhelming
   the video so much"). One line at every width, about 86px at 1440, scaling with the window. The title sits right beside it,
   vertically centered, with clear space under the video. Phone: one line under the 16:9 strip. Fades up 400ms after load. */
.greet{position:relative;padding:24px var(--g) 4px;color:var(--ink);display:flex;flex-direction:column;gap:8px}
.greet__h{margin:0;font-weight:600;letter-spacing:-.055em;white-space:nowrap;font-size:clamp(34px,10.4vw,64px);line-height:1}
.greet__sub{margin:0;font-size:15px;line-height:20px;color:var(--label)}
.greet>*{animation:greet-in 520ms cubic-bezier(.2,0,0,1) 400ms both}
.greet>.greet__sub{animation-delay:480ms}
@keyframes greet-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.greet>*{animation:none}}
@media (max-width:1023px){
  :root[data-hero] .hero.hero--greet{display:block;padding:calc(100vw * 9 / 16) 0 0;min-height:0}
}
@media (min-width:700px) and (max-width:1023px){
  .greet{flex-direction:row;align-items:center;gap:32px;padding:32px var(--g) 8px}
  .greet__h{font-size:clamp(44px,6.6vw,64px)}
  .greet__sub{max-width:24ch;color:var(--ink);font-size:16px;line-height:1.35}
}
@media (min-width:1024px){
  :root[data-hero] .hero.hero--greet{--band:clamp(132px,11.5vw,176px);display:block;padding:0;min-height:max(100vh,720px);background:var(--ground)}
  :root[data-hero] .hero.hero--greet .slot{bottom:var(--band)}
  .greet{position:absolute;left:0;right:0;bottom:0;height:var(--band);padding:0 var(--side);flex-direction:row;align-items:center;gap:clamp(28px,3.4vw,52px)}
  .greet__h{font-size:clamp(56px,6vw,96px);line-height:1;padding-bottom:.06em}
  .greet__sub{color:var(--ink);font-size:clamp(16px,1.3vw,19px);line-height:1.35;max-width:24ch;padding-top:.2em}
}

/* Who I am, concept 3 + copy B: portrait beside a numbered stack and two figures. Flat, sharp corners, grain on the photo only. */
.screen.who3{display:block}
.who3__grid{display:grid;grid-template-columns:1fr;gap:28px}
.who3__ph{position:relative;margin:0 calc(var(--g) * -1);aspect-ratio:4/5;overflow:hidden;background:var(--stone)}
.who3__ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.who3__ph::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.who3__txt{display:flex;flex-direction:column}
.who3__disp{font-weight:600;letter-spacing:-.05em;font-size:44px;line-height:42px;max-width:15ch;margin:12px 0 28px;text-wrap:balance}
.who3__stack{list-style:none;margin:0;padding:18px 0 0;display:grid;grid-template-columns:1fr;gap:18px;border-top:1px solid var(--ink)}
.who3__stack>li{display:grid;grid-template-columns:40px 1fr;gap:0 8px;font-size:14px;line-height:20px}
.who3__stack .n{color:var(--label);font-variant-numeric:tabular-nums}
.who3__stack .h{margin:0;font-weight:600}
.who3__stack p{margin:0}
.who3__stack ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.who3__stack ul li{display:flex;align-items:center;gap:8px}
.who3__stack .plats b{font-weight:600}
.pm{width:16px;height:16px;flex:none;fill:var(--ink)}
.who3__stack .bl{display:inline-flex;align-items:center;width:96px;height:20px;flex:none}
.who3__stack .bl img{display:block;width:auto;max-width:96px}
.who3__figs{list-style:none;margin:28px 0 0;padding:20px 0 0;border-top:1px solid var(--stone);display:grid;grid-template-columns:1fr 1fr;gap:20px}
.who3__figs b{display:block;font-size:40px;line-height:38px;font-weight:600;letter-spacing:-.05em}
.who3__figs span{display:block;font-size:12px;line-height:16px;color:var(--label);margin-top:6px}
.who3__asof{font-size:12px;line-height:16px;color:var(--label);margin:14px 0 0}
@media (min-width:1024px){
  .screen.who3:not(.hero):not(.breather){display:block;padding:168px var(--side)}
  .who3__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;align-items:stretch}
  .who3__ph{grid-column:1 / span 5;margin:0;aspect-ratio:auto;min-height:100%}
  .who3__txt{grid-column:7 / span 6}
  .who3__disp{font-size:88px;line-height:82px;margin:20px 0 56px}
  .who3__stack{grid-template-columns:1fr 1fr;gap:28px 20px;padding-top:24px}
  .who3__figs{grid-template-columns:repeat(4,1fr);margin-top:56px;padding-top:24px}
  .who3__figs b{font-size:56px;line-height:52px}
}
@media (max-width:1023px){.screen.who3{padding-top:40px}}  /* sits close under the greeting on phones */
/* Now: two active partnerships as a pair (Based Bodyworks ongoing, Granola signed). Same height, same caption row. */
.now__pair{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:700px){.now__pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (min-width:1024px){.now__in{grid-template-columns:200px minmax(0,900px)}}
.now__card{transition:transform 320ms cubic-bezier(.2,0,0,1),border-color var(--dur-quick)}
@media (hover:hover){.now__card:hover{transform:translateY(-4px)}}
/* Based Bodyworks card in their own look (based.com): black #0A0A0A, off-white #ECECEC, gold #BBA04D, their light wordmark */
.bbw{position:relative;isolation:isolate;height:290px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:#0A0A0A;color:#ECECEC;overflow:hidden}
.bbw__clip{position:absolute;inset:0;z-index:-1;opacity:.55}
.bbw__top{position:absolute;left:16px;right:16px;top:14px;display:flex;justify-content:space-between;align-items:center}
.bbw__live{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#BBA04D}
.bbw__live i{width:7px;height:7px;border-radius:50%;background:#BBA04D;box-shadow:0 0 0 0 rgba(187,160,77,.55);animation:bbw-pulse 2.4s cubic-bezier(.2,0,0,1) infinite}
@keyframes bbw-pulse{0%{box-shadow:0 0 0 0 rgba(187,160,77,.55)}70%,100%{box-shadow:0 0 0 9px rgba(187,160,77,0)}}
.bbw__plats{display:inline-flex;gap:10px}
.bbw .pm{fill:#ECECEC;width:15px;height:15px}
.bbw__mark{display:block;width:clamp(150px,44%,210px);height:auto}
.bbw__cat{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#ECECEC;opacity:.72}
.bbw__line{position:absolute;left:0;bottom:0;height:2px;width:100%;background:#BBA04D;transform:scaleX(.18);transform-origin:left;transition:transform 600ms cubic-bezier(.2,0,0,1)}
@media (hover:hover){.now__card--bbw:hover .bbw__line{transform:scaleX(1)}}
.now__card--bbw:focus-visible .bbw__line{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.bbw__live i{animation:none}.now__card,.bbw__line{transition:none}.now__card:hover{transform:none}}
/* Phone hero: a tall 4:5 frame cropped on him (His Grace, Nov 12: "the taller crop"), instead of the 16:9 strip. Each clip sets
   its own focus (--ppos in clips.json): subway on him, rooftop on him at the table. Tablet and desktop unchanged. */
@media (max-width:699px){
  :root[data-hero] .hero.hero--greet{padding-top:125vw}
  :root[data-hero] .hero.hero--clip .slot.slot--seq{aspect-ratio:4/5}
  .slot--seq .seq__clip--wide video,.slot--seq .seq__clip--wide .seq__still{object-position:var(--ppos,50% 50%)}
}
/* Phone: "Who I am" label first, then the portrait, so the top of the section peeks into the first screen under the greeting */
@media (max-width:1023px){
  .who3__grid{display:flex;flex-direction:column;gap:0}
  .who3__txt{display:contents}
  .who3__txt>.lab{order:-2;margin-bottom:12px}
  .who3__ph{order:-1;margin-bottom:28px}
}
/* /tech and /lifestyle heroes with video (His Grace, Nov 13: "time to fix these with vids"). Same rules as the homepage:
   his grade untouched, fixed frame, no controls, darkening only behind the stat block.
   Desktop: the clip fills the hero; a soft pool sits behind the bottom-left text, plus a faint fade under the menu.
   Phone: a tall 4:5 frame cropped on him (--ppos), the stat in ink on white under it. Tablet: a 16:9 frame, text under. */
.hero--short.hero--clip .slot .play,.hero--short.hero--clip .slot .sound{display:none}
@media (min-width:1024px){
  :root .hero--short.hero--clip .slot::before,:root[data-hero] .hero--short.hero--clip .slot::before{background:linear-gradient(180deg,rgba(17,17,17,.24) 0,rgba(17,17,17,0) 120px)}
  .hero--short.hero--clip .slot--hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(ellipse 50% 66% at 18% 64%,rgba(17,17,17,.6) 0,rgba(17,17,17,.42) 50%,rgba(17,17,17,0) 100%)}
}
@media (max-width:1023px){
  :root[data-hero] .hero.hero--short.hero--clip{min-height:0;padding-top:calc(100vw * 9 / 16 + 28px);color:var(--ink)}
  :root[data-hero] .hero.hero--short.hero--clip .slot{bottom:auto;height:auto;aspect-ratio:16/9}
  :root[data-hero] .hero.hero--short.hero--clip .slot::before{background:linear-gradient(180deg,rgba(17,17,17,.32) 0,rgba(17,17,17,0) 96px)}
  .hero--short.hero--clip .slot--hero::after{display:none}
  .hero--short.hero--clip .slot img,.hero--short.hero--clip .slot video{object-fit:cover}
}
@media (max-width:699px){
  :root[data-hero] .hero.hero--short.hero--clip{padding-top:calc(125vw + 24px)}
  :root[data-hero] .hero.hero--short.hero--clip .slot{aspect-ratio:4/5}
  .hero--short.hero--clip .slot img,.hero--short.hero--clip .slot video{object-position:var(--ppos,50% 50%)!important}
}
/* the small page label sits over sky on /lifestyle: a soft shade only behind the label itself (measured AA) */
@media (min-width:1024px){
  .hero--short.hero--clip .hero__path{position:relative;z-index:0;display:inline-block;align-self:flex-start}
  .hero--short.hero--clip .hero__path::before{content:"";position:absolute;z-index:-1;left:-36px;right:-44px;top:-16px;bottom:-16px;
    background:radial-gradient(closest-side,rgba(17,17,17,.8),rgba(17,17,17,.62) 60%,rgba(17,17,17,0));pointer-events:none}
}
/* hero posters inside <picture> (phone 4:5 crop, eng audit P1-7): the picture box must not change the layout */
.slot picture{display:contents}
/* keyboard focus never lands under the fixed header or the sticky bar (eng audit P2-17, WCAG 2.4.11) */
html{scroll-padding-top:84px}
@media (max-width:1023px){html:has(.sticky){scroll-padding-bottom:92px}}

/* ===== Design + agency audit fixes (Nov 13, His Grace's decisions) ===== */
/* brands list: 16px one-colour ink marks in a fixed 96px slot, then the name; Granola keeps an empty slot */
.who3__stack .brands li{gap:12px}
.who3__stack .bl{width:96px;height:16px}
.who3__stack .bl img{height:16px!important;width:auto;max-width:96px;object-fit:contain;object-position:left center;filter:brightness(0)}

/* lane heroes match home: the clip clean, the lane name and one line on a band under it (S3) */
.hero--lane .slot img,.hero--lane .slot video{object-fit:cover}
@media (max-width:1023px){
  :root[data-hero] .hero.hero--lane .slot{bottom:auto;height:auto;aspect-ratio:16/9}
}
@media (max-width:699px){
  :root[data-hero] .hero.hero--lane{padding-top:125vw}
  :root[data-hero] .hero.hero--lane .slot{aspect-ratio:4/5}
  .hero--lane .slot img,.hero--lane .slot video{object-position:var(--ppos,50% 50%)!important}
}
/* the lane number now opens screen 2, beside "My work" */
.pwork__head{display:flex;flex-direction:column;gap:20px}
.lanestat .num{font-size:clamp(64px,9vw,112px);line-height:1;font-weight:600;letter-spacing:-.06em;color:var(--ink)}
.lanestat .lab{margin-top:8px;max-width:34ch}
@media (min-width:1024px){.pwork__head{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:48px}.lanestat{text-align:right}.lanestat .lab{margin-left:auto}}

/* light logo over the dark /tech footage, like "Menu" already turns white (S2) */
.logo--light{display:none}
[data-dark-hero] .top:not(.is-past) .logo:not(.logo--light){display:none}
[data-dark-hero] .top:not(.is-past) .logo--light{display:block}

/* one grid from the 64px edge: the footer accordion left-aligned, the "Now" label above its cards (S2) */
@media (min-width:1024px){
  .screen.start[data-folds]{max-width:1440px;margin:0 auto}
  .screen.start[data-folds] .pb{max-width:840px}
  .now__in{display:flex;flex-direction:column;gap:16px;max-width:1440px;margin:0 auto}
  .now__pair{max-width:900px}
}
/* one section gap: the same vertical rhythm between every content section */
:root{--sec:72px}
@media (min-width:1024px){:root{--sec:112px}}
.screen:not(.hero):not(.breather){padding-top:var(--sec);padding-bottom:var(--sec)}
@media (min-width:1024px){.screen:not(.hero):not(.breather).pwork,.screen.who3:not(.hero):not(.breather){padding-top:var(--sec);padding-bottom:var(--sec)}}
.now{padding-top:var(--sec);padding-bottom:0}
@media (max-width:1023px){.screen.who3{padding-top:40px}}

/* small type: a 3-step scale (display / body 15 / label 13) */
.lab,.who3__figs span,.who3__asof,.now__cap,.pass__place,.fork .lab,.offer__proof{font-size:13px;line-height:18px}
.pcard__what,.who3__stack>li,.who3__stack .brands li{font-size:15px;line-height:21px}

/* sticky bar steps aside while any in-page primary button is on screen (S3); JS sets .is-hidden */
.sticky{transition:transform 260ms cubic-bezier(.2,0,0,1),opacity 260ms cubic-bezier(.2,0,0,1)}
.sticky.is-hidden{transform:translateY(110%);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.sticky{transition:none}}
/* lane heroes end cleanly on the frame like home (no fade into white on phone); the lane line gets room for two lines */
@media (max-width:1023px){:root[data-hero] .hero.hero--lane .slot::before{background:linear-gradient(180deg,rgba(17,17,17,.32) 0,rgba(17,17,17,0) 96px)}}
.hero--lane .greet__sub{max-width:46ch}
/* Booking form A (His Grace picked "A, two columns", Nov 13; Concepts mock form-tier-nov13): headline left, underline fields right. */
.bk{display:grid;gap:40px}
.bk__l{display:flex;flex-direction:column;gap:16px}
.bk__l p:not(.lab){font-size:17px;line-height:25px;max-width:40ch}
.bf{display:grid;grid-template-columns:1fr;gap:22px}
@media (min-width:1024px){
  .bk{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px}
  .bk__l{grid-column:1 / span 5}
  .bk__r{grid-column:7 / span 6}
  .bf{grid-template-columns:1fr 1fr;column-gap:20px;row-gap:24px}
  .bf .wide{grid-column:1 / -1}
}
.screen.book:not(.hero):not(.breather),.screen.start--home:not(.hero):not(.breather){display:block}
.bf .f{display:flex;flex-direction:column;gap:6px}
.bf .f label{font-size:13px;line-height:18px;color:var(--label)}
.bf .opt{color:var(--label)}
.bf input,.bf select,.bf textarea{font:400 16px/22px "Inter Tight",Inter,sans-serif;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:10px 0;border-radius:0;width:100%;min-height:44px;-webkit-appearance:none;appearance:none}
.bf input::placeholder,.bf textarea::placeholder{color:#8f8a83}
.bf select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.5'/%3E%3C/svg%3E") right 4px center/12px no-repeat;padding-right:24px}
.bf textarea{min-height:88px;resize:vertical}
.bf input:focus,.bf select:focus,.bf textarea:focus{outline:0;border-bottom-width:2px;padding-bottom:9px}
.bf input:focus-visible,.bf select:focus-visible,.bf textarea:focus-visible{outline:0}
.bf .err{display:none;font-size:13px;line-height:18px;color:#9C2B2B}
.bf .f.is-bad input,.bf .f.is-bad select,.bf .f.is-bad textarea{border-bottom-color:#9C2B2B}
.bf .f.is-bad .err{display:block}
.bf .actions{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.bf .btn{min-width:200px}
@media (max-width:1023px){.bf .btn{width:100%}}
.bf .btn:disabled{opacity:.6;cursor:progress}
.fallback{font-size:13px;line-height:18px;color:var(--label);margin:0}
.fallback a{color:var(--ink);text-underline-offset:3px}
.bf__banner{padding:14px 16px;background:#F6E9E4;color:#9C2B2B;font-size:15px;line-height:21px;margin-bottom:22px}
.bf__banner a{color:inherit;text-underline-offset:3px}
.bf__done{display:flex;flex-direction:column;gap:12px;padding:28px 0;border-top:1px solid var(--ink);outline:0}
.bf__done[hidden]{display:none}
.bf__done .big{font-weight:600;font-size:32px;line-height:34px;letter-spacing:-.04em;margin:0}
.bf__done p{margin:0}
.bf__ts{min-height:65px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* Lane stat, fixed (His Grace, Nov 13: "this is messy"): the number sits under the heading on the left, "about" inline on the
   number's baseline, the caption left-aligned under it at about 40 characters. */
.pwork__head{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
@media (min-width:1024px){.pwork__head{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:32px}.lanestat{text-align:left}.lanestat .lab{margin-left:0}}
.lanestat{display:flex;flex-direction:column;gap:10px}
.lanestat .num{display:flex;align-items:baseline;gap:.12em;margin:0}
.lanestat .num .about{font-size:.3em;vertical-align:baseline;margin:0;opacity:1;font-weight:500;letter-spacing:-.01em;color:var(--label)}
.lanestat .lab{max-width:40ch;margin:0;text-align:left}
.nw{white-space:nowrap}
/* iPhone fix (Nov 13, His Grace: "iphone web has bugs"): WebKit flattened the badge flip, so the back face drew on top, mirrored,
   and the front never showed. Each face is now hidden outright at the midpoint of the turn (visibility, swapped with a delay),
   so the badge reads correctly whether or not the browser honours backface-visibility. */
.pass__back{visibility:hidden;transition:visibility 0s linear .47s}
.pass__front{visibility:visible;transition:visibility 0s linear .47s}
.pass:focus-visible .pass__back,.pass.is-flipped .pass__back{visibility:visible}
.pass:focus-visible .pass__front,.pass.is-flipped .pass__front{visibility:hidden}
@media (hover:hover){.pass:hover .pass__back{visibility:visible}.pass:hover .pass__front{visibility:hidden}}
@media (prefers-reduced-motion:reduce){.pass__back,.pass__front{transition:visibility 0s linear .12s}}
/* header clears the notch in landscape */
.top{padding-left:max(var(--g),env(safe-area-inset-left));padding-right:max(var(--g),env(safe-area-inset-right))}
@media (min-width:1024px){.top{padding-left:max(var(--side),env(safe-area-inset-left));padding-right:max(var(--side),env(safe-area-inset-right))}}