:root{
  --yellow:#FFD21A;
  --yellow-deep:#E6B800;
  --ink:#0D0B07;
  --ink-2:#141009;
  --cell:#1C170D;
  --paper:#FAF5EA;
  --graphite:#4A463E;
  --stone:#948E81;
  --stone-deep:#5D584E;
  --line-w:rgba(250,245,234,.13);
  --line-i:rgba(13,11,7,.13);
  --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --cond:'Anton',Impact,sans-serif;
  --wrap:1180px;
  --pad:clamp(20px,3.4vw,52px);   /* edge gutter for full-bleed chrome */
  --topbar-h:5px;                 /* the yellow rule above the header */
  --nav-h:72px;                   /* drives .nav height, never hardcode it twice */
  --chrome-h:calc(var(--topbar-h) + var(--nav-h) + 1px);  /* +1px header border-bottom */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* Lenis drives scrolling once JS is live, and native smooth scrolling fights
   it on anchor jumps. Kept as the no-JS fallback only. */
html.js{scroll-behavior:auto}
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--paper);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}

/* LAYOUT */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
/* Chrome runs to the viewport edges; content does not. */
.wrap-full{width:100%;max-width:none;margin:0;padding:0 var(--pad)}
section{position:relative}
.band{padding:clamp(64px,9vw,118px) 0}
.paper{background:var(--paper);color:var(--ink)}
.glow{background:radial-gradient(ellipse 65% 55% at 50% 30%,rgba(255,210,26,.10),transparent 62%),var(--ink)}
.topbar{height:5px;background:var(--yellow)}

/* TYPE */
.h1,.h2,.h3{font-family:var(--cond);text-transform:uppercase;font-weight:400;letter-spacing:.5px;line-height:.98}
.h1{font-size:clamp(2.5rem,7.6vw,5.3rem)}
.h2{font-size:clamp(2rem,4.6vw,3.4rem)}
.h3{font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.05}
.eyebrow{
  font-weight:700;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--yellow);display:flex;align-items:center;gap:14px;margin-bottom:16px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,210,26,.45),transparent)}
.paper .eyebrow{color:var(--ink)}
.paper .eyebrow::after{background:linear-gradient(90deg,var(--yellow),transparent)}
.lead{font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.6;color:#e6e0d2;max-width:60ch}
.paper .lead{color:#3a352c}
.body{color:#d8d2c4}
.paper .body{color:#454037}
.small{font-size:.82rem;letter-spacing:.02em}
.kick{font-weight:700;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}

/* THE ONE ACCENT */
.hl{
  display:inline-block;background:var(--yellow);color:var(--ink);
  padding:.02em .1em 0;line-height:.86;border-radius:2px;
}
.yel{color:var(--yellow)}
.paper .yel{color:var(--yellow-deep)}

/* WORDMARK */
.wm{display:block;height:26px;width:auto}
.wm-lg{height:34px}

/* HEADER */
header.site{
  position:sticky;top:0;z-index:60;
  background:rgba(13,11,7,.94);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line-w);
}
.nav{display:flex;align-items:center;gap:28px;height:var(--nav-h)}
/* Wordmark pinned to the left edge, links and CTA pushed to the right edge. */
.nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin-left:auto}
.nav-links a{
  text-decoration:none;font-weight:600;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:#d8d2c4;padding:6px 0;border-bottom:2px solid transparent;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--paper);border-bottom-color:var(--yellow)}
/* Current page marker, driven by aria-current so the markup carries the
   state rather than a per-page CSS class. */
.nav-links a[aria-current="page"]{color:var(--paper);border-bottom-color:var(--yellow)}
footer.site .foot-links a[aria-current="page"]{color:var(--paper)}

/* BUTTONS */
.btn{
  display:inline-block;text-decoration:none;font-weight:700;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;padding:14px 22px;border-radius:6px;
  background:var(--yellow);color:var(--ink);border:2px solid var(--yellow);
  transition:transform .15s ease,background .15s ease;
}
.btn:hover,.btn:focus-visible{background:var(--yellow-deep);border-color:var(--yellow-deep);transform:translateY(-1px)}
.btn-sm{padding:11px 16px;font-size:11.5px}
.btn-ghost{background:transparent;color:var(--paper);border-color:rgba(250,245,234,.28)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:transparent;border-color:var(--yellow);color:var(--yellow)}
.paper .btn-ghost{color:var(--ink);border-color:rgba(13,11,7,.24)}
.paper .btn-ghost:hover{color:var(--ink);border-color:var(--yellow)}
a:focus-visible,button:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* HERO */
/* Full-viewport hero. min-height rather than height so long content still
   grows. svh (not vh) so mobile browser chrome does not push the bottom off. */
.hero{
  min-height:calc(100svh - var(--chrome-h));
  display:flex;align-items:center;
  padding:clamp(48px,7vw,80px) 0;
}
@supports not (height:100svh){ .hero{min-height:calc(100vh - var(--chrome-h))} }
.hero .h1{margin:6px 0 24px;max-width:17ch}
.hero .lead{max-width:52ch}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* CARDS */
.card{
  background:var(--cell);border:1px solid var(--line-w);border-left:3px solid var(--yellow);
  border-radius:10px;padding:22px 24px;
}
.paper .card{background:#fff;border:1px solid var(--line-i);border-left:3px solid var(--yellow)}
.card .h3{margin-bottom:8px}
.card p{font-size:.95rem;line-height:1.55}

.label{font-weight:700;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow-deep);margin-bottom:7px}


/* METHOD */
.moves{list-style:none;display:flex;flex-direction:column}
.move{display:flex;align-items:center;gap:20px;padding:18px 4px;border-top:1px solid var(--line-w)}
.move:last-child{border-bottom:1px solid var(--line-w)}
.paper .move{border-color:var(--line-i)}
.mn{
  font-family:var(--cond);font-size:15px;letter-spacing:.06em;
  background:var(--yellow);color:var(--ink);border-radius:5px;
  min-width:38px;text-align:center;padding:6px 0;flex:none;
}
.move h3{font-size:1.02rem;font-weight:700;line-height:1.25;letter-spacing:-.1px}

/* LADDER */
.ladder{display:flex;flex-direction:column;gap:14px}
.rung{
  display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.25fr);gap:20px;align-items:center;
  background:var(--cell);border:1px solid var(--line-w);border-left:3px solid var(--yellow);
  border-radius:10px;padding:20px 24px;
}
.rung .step{font-family:var(--cond);font-size:26px;color:var(--yellow);line-height:1}
.rung .free{font-family:var(--cond);font-size:13px;letter-spacing:.1em;color:var(--yellow);display:block;margin-top:4px}
.rung p{font-size:.95rem;color:#d8d2c4}
.paper .rung{background:#fff;border-color:var(--line-i);border-left-color:var(--yellow)}
.paper .rung .step,.paper .rung .free{color:var(--yellow-deep)}
.paper .rung p{color:#454037}

/* TEAM */
.person{display:flex;flex-direction:column;gap:6px}
.person .role{font-family:var(--cond);text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:var(--yellow-deep)}
.quote{
  font-family:var(--cond);text-transform:uppercase;font-size:clamp(1.4rem,2.6vw,2rem);
  line-height:1.06;letter-spacing:.4px;
}

/* WHO IT IS FOR */
.who{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px;list-style:none}
.who li{
  font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line-i);border-radius:999px;padding:8px 15px;color:#4a453c;
}
.paper .who li{border-color:var(--line-i)}

.paper 
/* STAGES */
.stages{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.stage{
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;
  background:var(--cell);border:1px solid var(--line-w);border-left:3px solid var(--yellow);
  border-radius:10px;padding:24px 26px;
}
.stage>div{min-width:0}
.stage .step{font-family:var(--cond);font-size:26px;color:var(--yellow);line-height:1}
.stage .tag{
  font-family:var(--cond);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--yellow);display:block;margin-top:3px;
}
.stage>div>p{font-size:.95rem;color:#d8d2c4;margin-top:10px}
.incl{
  list-style:none;margin-top:15px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:7px 28px;
}
.incl li{font-size:.9rem;line-height:1.5;color:#d8d2c4;padding-left:15px;position:relative}
.incl li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--yellow)}
.price{
  margin-top:17px;padding-top:14px;border-top:1px solid var(--line-w);
  font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);
}
.paper .stage{background:#fff;border-color:var(--line-i);border-left-color:var(--yellow)}
.paper .stage .step,.paper .stage .tag{color:var(--yellow-deep)}
.paper .stage>div>p,.paper .incl li{color:#454037}
.paper .incl li::before{background:var(--yellow-deep)}
.paper .price{border-top-color:var(--line-i);color:var(--stone-deep)}

/* OWNERSHIP */
.own{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:18px;margin-top:34px}


.scarce{
  font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--yellow);margin-top:18px;
}

/* TEAM PHOTO */
.person .photo{
  width:62px;height:62px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line-w);margin-bottom:6px;background:var(--cell);
}

/* FOOTER SOCIAL */
.social{display:flex;flex-wrap:wrap;gap:16px;list-style:none;margin-top:9px}
.social a{font-size:.82rem;letter-spacing:.02em}

/* CTA BAND */
.ctaband{text-align:center;border-top:1px solid var(--line-w)}
.ctaband .h2{max-width:20ch;margin:0 auto 22px}
.ctaband .lead{margin:0 auto;text-align:center}
.ctaband .cta-row{justify-content:center}

/* FOOTER */
footer.site{background:var(--ink-2);border-top:1px solid var(--line-w);padding:52px 0 38px}
/* Default footer link. NOTE: this is 0,1,2, so anything meant to override it
   must also be scoped with footer.site or it silently loses on specificity.
   That is what washed out the Contact us button. */
footer.site a{text-decoration:none;color:#d8d2c4}
footer.site a:hover{color:var(--yellow)}
.foot-top{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.foot-h{font-family:var(--cond);text-transform:uppercase;font-weight:400;letter-spacing:.5px;
  font-size:clamp(1.6rem,3vw,2.3rem);line-height:1;color:var(--paper)}
footer.site .foot-btn{
  font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:var(--yellow);border:2px solid var(--yellow);
  padding:12px 24px;border-radius:6px;display:inline-block;white-space:nowrap;
  transition:transform .15s ease,background .15s ease;
}
footer.site .foot-btn:hover,footer.site .foot-btn:focus-visible{
  background:var(--yellow-deep);border-color:var(--yellow-deep);color:var(--ink);transform:translateY(-1px)
}
.foot-right{display:flex;flex-direction:column;align-items:flex-end;gap:14px;text-align:right}
.foot-id{display:flex;align-items:center;gap:14px}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;justify-content:flex-end;list-style:none}
footer.site .foot-links a{font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
footer.site .foot-links a:hover,footer.site .foot-links a:focus-visible{color:var(--yellow)}
.foot-base{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:34px;padding-top:18px;border-top:1px solid var(--line-w);
}
.fcopy{font-size:11.5px;letter-spacing:.06em;color:var(--stone)}
footer.site a.fcopy{color:var(--stone)}
footer.site a.fcopy:hover{color:var(--yellow)}
.legal{font-size:11px;letter-spacing:.06em;color:var(--stone);line-height:1.9}
@media (max-width:700px){
  .foot-top{flex-direction:column;gap:26px}
  .foot-right{align-items:flex-start;text-align:left}
  .foot-links{justify-content:flex-start}
}

@media (max-width:880px){
  /* Was display:none, which left mobile with no navigation at all once the
     site went multi-page. The links wrap to their own row under the wordmark
     instead of disappearing. */
  :root{--nav-h:112px}          /* two rows on mobile; verified by measurement */
  .nav{height:var(--nav-h);flex-wrap:wrap;padding:14px 0;row-gap:10px;align-content:center}
  .nav-links{order:3;width:100%;gap:20px;justify-content:flex-start;margin-left:0}
  .nav-links a{font-size:11px;letter-spacing:.1em}
    .rung{grid-template-columns:44px 1fr;row-gap:8px}
  .rung p{grid-column:1/-1}
  .stage{grid-template-columns:1fr;row-gap:2px}
  .stage .step{line-height:1.1}
}
@media (max-width:520px){
  .hero{align-items:flex-start}
  .wm{height:22px}
  .btn{padding:13px 16px;font-size:11.5px}
  }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}

/* INNER PAGE HEADER
   Inner pages open on an h1 rather than the hero, so they need hero-like air
   above the fold without the glow. */
.pagetop{padding-top:clamp(56px,8vw,96px)}
.pagetop .h1{font-size:clamp(2.2rem,5.6vw,4rem)}


/* ============ TEAM CARDS ============
   Ported from aurelian.fund: name and role sit ABOVE the portrait, hover or
   keyboard focus reveals a frosted panel. Enter 260ms, exit 170ms, movement
   only on transform and opacity. */
.gp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;margin-top:44px}
.gp .gpname{font-family:var(--cond);text-transform:uppercase;font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.05;color:var(--paper)}
.gp .gprole{font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin-top:9px}
.gp-card{
  position:relative;overflow:hidden;border-radius:10px;margin-top:18px;
  border:1px solid var(--line-w);background:var(--cell);
}
.gp-photo{
  /* height:auto is required. The width/height attrs are kept for CLS and would
     otherwise beat aspect-ratio and render the portrait stretched. */
  width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;
  filter:saturate(.9);transition:transform 420ms var(--ease-out);
}
.gp-veil{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;gap:18px;
  padding:22px;
  background:linear-gradient(180deg,rgba(13,11,7,.52) 0%,rgba(13,11,7,.82) 100%);
  -webkit-backdrop-filter:blur(13px) saturate(.9);backdrop-filter:blur(13px) saturate(.9);
  opacity:0;pointer-events:none;
  transition:opacity 170ms var(--ease-out);   /* exit is quicker than enter */
}
.gp-field{opacity:0;transform:translateY(7px);transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
.gp-k{display:block;font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin-bottom:7px}
.gp-v{display:block;font-size:14px;color:var(--paper);line-height:1.6}
/* Bio paragraph inside the veil. Sized so three cards of unequal bio
   length still fit the square without the LinkedIn button being pushed out. */
.gp-bio{font-size:13px;line-height:1.5;color:#ded8ca}
.gp-go{
  width:42px;height:42px;border-radius:50%;flex:none;align-self:flex-start;
  background:var(--yellow);color:var(--ink);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(7px);
  transition:opacity 200ms var(--ease-out),transform 160ms var(--ease-out),background 160ms ease;
}
.gp-go svg{display:block}
.gp-go:hover{background:var(--yellow-deep)}
.gp-go:active{transform:scale(.97)}

@media (hover:hover) and (pointer:fine){
  .gp-card:hover .gp-veil,.gp-card:focus-within .gp-veil{opacity:1;pointer-events:auto;transition-duration:260ms}
  .gp-card:hover .gp-photo,.gp-card:focus-within .gp-photo{transform:scale(1.03)}
  .gp-card:hover .gp-field,.gp-card:focus-within .gp-field,
  .gp-card:hover .gp-go,.gp-card:focus-within .gp-go{opacity:1;transform:none}
  .gp-card:hover .gp-field:nth-child(1){transition-delay:55ms}
  .gp-card:hover .gp-field:nth-child(2){transition-delay:95ms}
  .gp-card:hover .gp-go{transition-delay:150ms}
}

/* Touch and narrow: no hover to discover, so the panel is just always open
   below the portrait rather than covering it. */
@media (hover:none),(pointer:coarse),(max-width:860px){
  .gp-veil{
    position:static;opacity:1;pointer-events:auto;background:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;padding:20px 0 0;gap:16px;
  }
  .gp-field,.gp-go{opacity:1;transform:none}
  .gp-card{background:none;border:0;border-radius:0}
  .gp-photo{border-radius:10px;border:1px solid var(--line-w)}
}
@media (max-width:1000px){.gp-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:620px){.gp-grid{grid-template-columns:1fr;gap:40px}}
@media (prefers-reduced-motion:reduce){
  .gp-field,.gp-go,.gp-photo{transform:none!important}
}

/* ============ MOTION ============
   Reveal on scroll. The hidden state is applied only when JS is running (the
   .js class), so if the script fails or is blocked nothing is ever invisible. */
.js [data-reveal],
.js [data-reveal-group] > *{
  opacity:0;transform:translateY(16px);
  transition:opacity 520ms var(--ease-out),transform 520ms var(--ease-out);
}
.js [data-reveal].in,
.js [data-reveal-group].in > *{opacity:1;transform:none}
/* stagger the children of a group */
.js [data-reveal-group].in > *:nth-child(2){transition-delay:70ms}
.js [data-reveal-group].in > *:nth-child(3){transition-delay:140ms}
.js [data-reveal-group].in > *:nth-child(4){transition-delay:210ms}
.js [data-reveal-group].in > *:nth-child(5){transition-delay:280ms}
.js [data-reveal-group].in > *:nth-child(6){transition-delay:350ms}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-reveal-group] > *{opacity:1;transform:none;transition:none}
}

/* ============ METHOD, EXPANDING ROWS ============
   grid-template-rows 0fr -> 1fr is the one way to transition to auto height.
   The inner div must own the overflow:hidden or the text spills while closed. */
.move{display:block;padding:0;border-top:1px solid var(--line-w);cursor:default}
.move:last-child{border-bottom:1px solid var(--line-w)}
.paper .move{border-color:var(--line-i)}
.move-top{
  display:flex;align-items:center;gap:20px;padding:20px 4px;
  transition:padding-left 320ms var(--ease-out);
}
.move .mn{transition:transform 320ms var(--ease-out),background 200ms ease}
.move h3{flex:1}
.move-cue{
  width:11px;height:11px;flex:none;position:relative;opacity:.5;
  transition:opacity 260ms var(--ease-out),transform 380ms var(--ease-out);
}
.move-cue::before,.move-cue::after{
  content:"";position:absolute;background:var(--yellow);
  left:50%;top:50%;transform:translate(-50%,-50%);
}
.move-cue::before{width:11px;height:1.5px}
.move-cue::after{width:1.5px;height:11px;transition:transform 380ms var(--ease-out)}
.move-body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 380ms var(--ease-out);
}
.move-body > div{overflow:hidden}
.move-body p{
  font-size:.95rem;line-height:1.6;color:#c9c3b6;max-width:62ch;
  padding:0 4px 22px 62px;
  opacity:0;transition:opacity 300ms var(--ease-out) 60ms;
}
.move:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}

/* Open on hover, and on keyboard focus so it is reachable without a mouse. */
@media (hover:hover) and (pointer:fine){
  .move:hover,.move:focus-within{background:rgba(255,210,26,.035)}
  .move:hover .move-top,.move:focus-within .move-top{padding-left:10px}
  .move:hover .mn,.move:focus-within .mn{transform:scale(1.08)}
  .move:hover .move-body,.move:focus-within .move-body{grid-template-rows:1fr}
  .move:hover .move-body p,.move:focus-within .move-body p{opacity:1}
  .move:hover .move-cue,.move:focus-within .move-cue{opacity:1}
  .move:hover .move-cue::after,.move:focus-within .move-cue::after{transform:translate(-50%,-50%) rotate(90deg)}
}
/* Touch has no hover to discover, so the detail is simply always open. */
@media (hover:none),(pointer:coarse){
  .move-body{grid-template-rows:1fr}
  .move-body p{opacity:1}
  .move-cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  .move-top,.move .mn,.move-body,.move-body p,.move-cue,.move-cue::after{transition:none}
}

/* ============ HERO LIGHTBULB ============
   Tab's mark, painted through a CSS mask so it takes --yellow exactly instead
   of the PNG's own yellow, and so the off/on states are a colour swap. */
.hero{position:relative;overflow:hidden}
.hero-bulb{
  position:absolute;right:calc(var(--pad) + 11vw);top:50%;
  transform:translateY(-50%);
  width:clamp(160px,19vw,280px);aspect-ratio:303/465;
  -webkit-mask:url(/bulb.png) center/contain no-repeat;
          mask:url(/bulb.png) center/contain no-repeat;
  background:#2E2717;              /* off: cold, unlit filament */
  opacity:.85;pointer-events:none;
  transition:background-color 800ms var(--ease-out),
             filter 800ms var(--ease-out),
             opacity 800ms var(--ease-out);
}
/* lit, set by the first scroll */
.lit .hero-bulb{
  background:var(--yellow);opacity:1;
  filter:drop-shadow(0 0 34px rgba(255,210,26,.42))
         drop-shadow(0 0 96px rgba(255,210,26,.22));
}
/* the hero's ambient glow warms with it */
.hero{transition:background 900ms var(--ease-out)}
.lit .hero.glow{
  background:radial-gradient(ellipse 62% 55% at 72% 46%,rgba(255,210,26,.15),transparent 60%),
             radial-gradient(ellipse 65% 55% at 50% 30%,rgba(255,210,26,.10),transparent 62%),
             var(--ink);
}
/* Below this the hero is tight and the mark would sit under the headline. */
@media (max-width:900px){ .hero-bulb{display:none} }
@media (prefers-reduced-motion:reduce){
  .hero-bulb,.hero{transition:none}
}

/* Hero eyebrow carries no trailing rule. Other eyebrows keep theirs. */
.hero .eyebrow::after{display:none}
.hero .eyebrow{gap:0}

/* Home summary rows reuse .move for layout but have nothing to expand, so they
   opt out of the hover affordances the methodology rows carry. */
.move--flat:hover,.move--flat:focus-within{background:none}
.move--flat:hover .move-top,.move--flat:focus-within .move-top{padding-left:4px}
.move--flat:hover .mn,.move--flat:focus-within .mn{transform:none}

/* Hero copy sits in from the gutter, toward the middle. Only above the
   breakpoint where the bulb shows; on phones it keeps the normal gutter. */
@media (min-width:901px){
  .hero .wrap-full{padding-left:calc(var(--pad) + 7vw)}
}

/* Between the bulb appearing and a comfortably wide desktop the headline is at
   its widest relative to the viewport, so the inset eases off and the mark
   shrinks. Without this the two collide around 1080. */
@media (min-width:901px) and (max-width:1240px){
  .hero .wrap-full{padding-left:calc(var(--pad) + 3vw)}
  .hero-bulb{width:clamp(130px,14vw,180px);right:calc(var(--pad) + 4vw)}
}

/* detail, collapsed to nothing until the card opens */
.work-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows 300ms var(--ease-out)}
.work-more-in{overflow:hidden;display:flex;flex-direction:column;gap:7px;opacity:0;
  transition:opacity 220ms var(--ease-out)}
.work-k{font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);padding-top:14px}
.work-p{font-size:.92rem;line-height:1.55;color:#d8d2c4}

.work-item.is-open{
  position:fixed;inset:0;margin:auto;z-index:120;
  width:min(760px,92vw);height:fit-content;max-height:86vh;
  background:var(--ink-2);border:1px solid var(--line-w);
  padding:22px;overflow:auto;cursor:default;
}
.work-item.is-open .work-more{grid-template-rows:1fr}
.work-item.is-open .work-more-in{opacity:1;transition-delay:120ms}
.work-item.is-open .work-slot{border-color:rgba(255,210,26,.4)}

.work-scrim{
  position:fixed;inset:0;z-index:110;background:rgba(13,11,7,.74);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity 300ms var(--ease-out);
}
.work-scrim.on{opacity:1}

@media (prefers-reduced-motion:reduce){
  .work-more,.work-more-in,.work-scrim,.work-slot{transition:none}
}

/* ============ 25 AUG REVISION ============
   Nav dropdown, the belief and mission sections, the clarity-to-growth rail,
   the four pathways, and the client films. Everything below reuses the tokens
   above rather than introducing new colors or type sizes. */

/* --- chevron that replaces the arrow glyphs in Tab's CTA copy ------------- */
/* Tab writes the trademark inline. At display size the glyph reads as another
   word unless it is set as a true superscript. */
.h1 .tm,.h2 .tm,.h3 .tm{font-size:.34em;vertical-align:super;letter-spacing:0;line-height:1}

.chev{margin-left:8px;flex:none;transition:transform 220ms var(--ease-out)}
.btn:hover .chev,.btn:focus-visible .chev{transform:translateX(3px)}
.btn{display:inline-flex;align-items:center}

/* --- nav dropdown --------------------------------------------------------
   The parent stays a real link, so the menu is an enhancement and never the
   only route. Opens on hover and on focus-within, which is what lets a
   keyboard reach the children by tabbing. */
.has-sub{position:relative}
.sub-cue{
  display:inline-block;width:5px;height:5px;margin-left:7px;vertical-align:middle;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.7;
  transition:transform 220ms var(--ease-out);
}
.subnav{
  position:absolute;top:100%;left:50%;transform:translate(-50%,6px);
  min-width:250px;padding:8px;margin:0;list-style:none;
  background:var(--cell);border:1px solid var(--line-w);border-radius:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out),visibility 200ms;
  z-index:90;
}
.subnav li{display:block}
.subnav a{
  display:block;padding:9px 12px;border-radius:7px;white-space:nowrap;
  font-size:12.5px;letter-spacing:.06em;
}
.subnav a:hover,.subnav a:focus-visible{background:rgba(255,210,26,.11);color:var(--yellow)}
.has-sub:focus-within .subnav{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.has-sub:focus-within .sub-cue{transform:translateY(0) rotate(225deg)}
@media (hover:hover) and (pointer:fine){
  .has-sub:hover .subnav{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
  .has-sub:hover .sub-cue{transform:translateY(0) rotate(225deg)}
}
/* Tab's labels are long enough that five of them plus the wordmark and the CTA
   cannot share one row on a phone. Below the breakpoint the bar becomes two
   rows, wordmark and CTA above, links wrapping underneath, and --nav-h grows to
   match. --chrome-h is a calc over --nav-h, so the full-height hero follows
   without a second place setting the height.
   The dropdown is dropped here rather than inlined: How We Work still scrolls
   to the section, and that section already lists all four pathways. */
@media (max-width:900px){
  :root{--nav-h:118px}
  .nav{flex-wrap:wrap;align-content:center;row-gap:12px;padding:12px 0}
  .nav-links{order:3;width:100%;margin-left:0;flex-wrap:wrap;gap:9px 17px}
  .nav-links a{font-size:11px;letter-spacing:.08em}
  .subnav,.sub-cue{display:none}
}

/* --- hero: headline, subhead, supporting copy ----------------------------- */
.hero .h1{margin:0 0 20px}
.hero-sub{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.5px;line-height:1.1;
  font-size:clamp(1.05rem,1.9vw,1.45rem);color:var(--yellow);max-width:38ch;
}
.hero-copy{
  margin-top:18px;max-width:56ch;
  font-size:clamp(.98rem,1.35vw,1.08rem);line-height:1.62;color:#cfc9bb;
}

/* --- beliefs -------------------------------------------------------------- */
.belief{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(30px,5vw,64px);align-items:start;margin-top:16px;
}
.belief-fig{margin:0;display:flex;flex-direction:column;gap:14px}
.belief-fig img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;
  border-radius:10px;border:1px solid var(--line-i);background:#fff;
}
.belief-fig figcaption{display:flex;flex-direction:column;gap:7px}
.belief-q{
  font-family:var(--cond);text-transform:uppercase;line-height:1;
  font-size:clamp(1.35rem,2.4vw,1.85rem);color:var(--ink);
}
.belief-by{
  font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stone-deep);
}
/* Tab's three parallel lines are deliberate anaphora. Set as their own block so
   the repetition reads as cadence rather than as padding. */
.echo{
  list-style:none;margin:24px 0;padding-left:20px;
  border-left:2px solid var(--yellow);
  display:flex;flex-direction:column;gap:9px;
}
.echo li{font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.4;color:#3a352c}
.echo-end{
  margin-top:26px;font-family:var(--cond);text-transform:uppercase;line-height:1;
  font-size:clamp(1.5rem,3vw,2.2rem);color:var(--ink);
}
@media (max-width:860px){
  .belief{grid-template-columns:1fr;gap:28px}
  .belief-fig{max-width:330px}
}

/* --- mission -------------------------------------------------------------- */
.mission-copy{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(20px,3vw,44px);margin-top:28px;
}
.pull{
  margin-top:38px;padding-top:26px;border-top:1px solid var(--line-w);
  font-family:var(--cond);text-transform:uppercase;line-height:1.06;
  font-size:clamp(1.25rem,2.5vw,1.9rem);max-width:30ch;
}

/* --- the clarity to growth rail ------------------------------------------
   Tab wrote this as CLARITY -> POSITIONING -> PLAYBOOK -> GROWTH. Drawn as a
   numbered rail on a hairline so it reads as a sequence without arrow glyphs,
   which the house voice treats as a tell. */
.rail{
  list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 22px;margin-top:46px;border-top:1px solid var(--line-i);
}
.rail li{position:relative;padding:22px 0 0}
.rail li::before{
  content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--yellow);
  transform:scaleX(0);transform-origin:left;transition:transform 520ms var(--ease-out);
}
.rail.in li::before{transform:scaleX(1)}
.rail li:nth-child(2)::before{transition-delay:90ms}
.rail li:nth-child(3)::before{transition-delay:180ms}
.rail li:nth-child(4)::before{transition-delay:270ms}
.rail-n{
  display:block;font-family:var(--cond);font-size:12px;letter-spacing:.1em;
  color:var(--yellow-deep);margin-bottom:9px;
}
.rail-k{
  font-family:var(--cond);text-transform:uppercase;line-height:1;font-weight:400;
  letter-spacing:.5px;font-size:clamp(1.1rem,1.9vw,1.45rem);color:var(--ink);
  margin-bottom:11px;
}
.rail p{font-size:.9rem;line-height:1.55;color:#454037}
@media (max-width:860px){
  .rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
  .rail li{padding-bottom:26px}
}
@media (max-width:520px){.rail{grid-template-columns:minmax(0,1fr)}}

/* --- the four pathways ---------------------------------------------------
   The Playbook is the one that carries a page of its own, so it is the lead
   card. Emphasis is a filled ground plus a heavier rule, staying inside the
   one-accent rule rather than adding a second hue. */
.paths{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:40px;
}
.path{
  display:flex;flex-direction:column;justify-content:space-between;gap:20px;
  background:#fff;border:1px solid var(--line-i);border-left:3px solid var(--line-i);
  border-radius:10px;padding:24px 22px;
}
.path h3{margin-bottom:12px}
.path p{font-size:.9rem;line-height:1.55;color:#454037;margin-bottom:9px}
.path p:last-child{margin-bottom:0}
.path-foot .btn{width:100%;justify-content:center;text-align:center;font-size:10.5px;letter-spacing:.07em;padding:12px 12px}
.path.is-lead{
  background:var(--ink);border-color:rgba(255,210,26,.3);border-left:3px solid var(--yellow);
}
.path.is-lead h3{color:var(--paper)}
.path.is-lead p{color:#cfc9bb}
.path.is-lead .btn-ghost{color:var(--yellow);border-color:rgba(255,210,26,.42)}
.path.is-lead .btn-ghost:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.is-soon{opacity:.45;cursor:default;pointer-events:none}
@media (max-width:1080px){.paths{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.paths{grid-template-columns:minmax(0,1fr)}}

/* --- client films --------------------------------------------------------- */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.case{margin:0;display:flex;flex-direction:column;gap:12px}
.film-v,.promo-v{
  width:100%;display:block;border-radius:10px;
  border:1px solid var(--line-w);background:var(--cell);
}
/* No aspect-ratio on the real player. These promos may be vertical, square or
   wide, and the browser already knows which from the file. The cap stops a tall
   vertical cut from taking over the section. */
video.film-v{height:auto;max-height:74vh;object-fit:contain}
video.promo-v{height:auto;max-height:78vh;margin:0 auto;max-width:900px}
.promo-v{max-width:900px;margin:0 auto}
.paper .film-v,.paper .promo-v{border-color:var(--line-i)}
/* Shown until the mp4 lands. A labelled empty frame, never a broken player. */
.film-pending{aspect-ratio:4/5}
.promo-pending{aspect-ratio:16/9}
.film-pending,.promo-pending{display:flex;align-items:center;justify-content:center}
.film-pending span,.promo-pending span{
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,210,26,.45);
}
.paper .film-pending span,.paper .promo-pending span{border-color:var(--yellow-deep)}
.case-cap{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.06em;
  font-size:14px;line-height:1.15;color:var(--paper);
}
.paper .case-cap{color:var(--ink)}
@media (max-width:900px){.cases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cases{grid-template-columns:minmax(0,1fr)}}

/* --- closing cta ---------------------------------------------------------- */
.ctaband .h2{max-width:22ch;margin:0 auto}
.ctacopy{margin:22px auto 0;max-width:58ch}
.ctacopy + .ctacopy{margin-top:14px}

/* ---- footer index -------------------------------------------------------
   Was one flat ten-item row that wrapped raggedly. Grouped into columns that
   mirror the header nav, so the footer reads as a site index. */
.foot-index{
  display:grid;grid-template-columns:repeat(3,minmax(140px,auto));
  gap:clamp(24px,4vw,56px);text-align:left;
}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot-col a{font-size:13px;line-height:1.25}
.foot-k{
  display:block;font-weight:700;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--yellow);margin-bottom:13px;
}
@media (max-width:760px){
  .foot-right{align-items:flex-start;text-align:left}
  .foot-index{grid-template-columns:repeat(2,minmax(130px,1fr));gap:26px}
}
@media (max-width:420px){ .foot-index{grid-template-columns:1fr} }