/* Innerworks V2. Deep Water shell (concept 04), band order per #1624.
   Type floors are hard: body 19px, detail 14px, nothing under 14px. */

:root{
  --deep:#04222A; --deeper:#02171D; --card:#083039;
  --paper:#F4EFE4; --dim:#A9C2C4;
  --gold:#E3A93C; --copper:#E4693B; --jade:#2FD3A5; --rose:#F2668C;
  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter','Segoe UI',-apple-system,sans-serif;
  --wrap:1180px; --gutter:28px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
html,body{overflow-x:hidden}
/* Sept 10: overflow-x:hidden on body forces its overflow-y to auto, which makes body a scroll
   box that never scrolls, so nothing on the page could stick (the topbar included). clip
   stops the sideways scroll without creating that box. */
@supports (overflow:clip){html,body{overflow-x:clip}}
body{font-family:var(--sans);font-size:19px;line-height:1.64;color:var(--paper);background:var(--deep);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2}
.wrap.narrow{max-width:780px}
.ribbon{background:var(--copper);color:#1B0803;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:8px 16px}

/* ---- topbar ---- */
.topbar{position:sticky;top:0;z-index:40;background:rgba(2,23,29,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(227,169,60,.28)}
.bar{display:flex;align-items:center;gap:24px;min-height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.wordmark{font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:.22em;text-transform:uppercase}
.brandtag{font-family:var(--display);font-style:italic;font-size:16px;color:var(--dim);white-space:nowrap;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;padding-left:18px;border-left:1px solid rgba(227,169,60,.28)}
.links{display:flex;gap:22px;margin-left:auto;font-size:16px}
/* Sept 10: with Blog in the nav the links wrapped to two lines at 1440 and the brand tagline
   truncated. Links never wrap; the tagline steps aside where it would otherwise be cut off. */
.links a{white-space:nowrap}
@media(max-width:1180px){.brandtag{display:none}}
.links a{color:var(--dim);text-decoration:none}
.links a:hover{color:var(--gold)}
@media(max-width:1180px){.brandtag{display:none}}
.navtoggle{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.navtoggle span{display:block;width:22px;height:2px;background:var(--paper)}
.drawer{display:none;flex-direction:column;gap:4px;padding:8px 20px 18px;border-top:1px solid rgba(227,169,60,.2)}
.drawer a{color:var(--paper);text-decoration:none;font-size:18px;padding:12px 0;border-bottom:1px solid rgba(169,194,196,.14)}
.drawer.open{display:flex}

/* ---- buttons ---- */
/* Chef Sept 10: button option C from the Sept 9 study (#1760). Squared to 3px and set in the
   display face; almost nobody sets button labels in a serif, and the headlines already live in it. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:17px 34px 13px;border:0;border-radius:3px;font-family:var(--display);font-size:19px;font-weight:500;letter-spacing:.012em;text-decoration:none;background:var(--gold);color:#12240A;transition:filter .16s ease,transform .16s ease}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
/* Sept 10: Newsreader caps carry empty descent space, so a label with no descenders rode
   1.5 to 2.5px above centre (measured on the rendered ink). Padding shifts it 2px down. */
.btn.small{min-height:44px;padding:12px 22px 8px;font-size:16px;flex:0 0 auto}
.btn.ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px rgba(227,169,60,.55)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--gold);color:var(--gold);filter:none}
:focus-visible{outline:2px solid var(--jade);outline-offset:3px}

/* ---- shared type ---- */
.kick{font-size:14px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.kick.copper{color:var(--copper)}
h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,5.6vw,74px);line-height:1.04;letter-spacing:-.02em}
h2{font-family:var(--display);font-weight:400;font-size:clamp(32px,4vw,50px);line-height:1.1;letter-spacing:-.014em}
h3{font-family:var(--display);font-weight:500;font-size:25px;line-height:1.24}
.lede{font-size:21px;line-height:1.58;color:var(--dim);max-width:56ch;margin-top:26px}
.intro{color:var(--dim);max-width:62ch;margin-top:20px}
.subhead{font-family:var(--display);font-weight:400;font-size:clamp(21px,2.1vw,27px);line-height:1.3;
  color:var(--paper);max-width:34ch;margin-top:18px;text-wrap:balance}
section{padding:112px 0;position:relative;overflow:hidden}
/* Sept 10: composition changes between bands. Heading left and its companion line right,
   bottoms aligned, so a band does not open on the same stacked block as its neighbours.
   The set's intro takes the gold hairline its proof lines already use; the testimonials'
   display line sits flush right. One column below 900px, in reading order. */
.bandhead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:22px 64px;align-items:end}
.bandhead .intro,.bandhead .subhead{margin-top:0}
.bandhead .intro{border-left:2px solid rgba(227,169,60,.55);padding-left:20px;max-width:40ch}
.bandhead.flip{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.bandhead.flip .subhead{text-align:right;justify-self:end}
@media(max-width:900px){.bandhead,.bandhead.flip{grid-template-columns:1fr}.bandhead.flip .subhead{text-align:left;justify-self:start}}
.tlink{color:var(--jade);text-decoration:none;box-shadow:inset 0 -1px 0 rgba(47,211,165,.5);font-size:17px}

/* ---- hero, with the approved ring (#1591) ---- */
.hero{position:relative;overflow:hidden;min-height:86vh;display:flex;align-items:center;padding:110px 0 100px;background:var(--deep)}
.hero::before{content:"";position:absolute;inset:-20% -10%;pointer-events:none;
  background:radial-gradient(52% 60% at 78% 42%, rgba(227,169,60,.20), transparent 68%),
             radial-gradient(46% 54% at 88% 62%, rgba(47,211,165,.13), transparent 70%);
  animation:drift 74s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2.2%,1.6%,0) scale(1.05)}}
.ring{position:absolute;right:-16vw;top:50%;translate:0 -50%;width:min(112vh,1080px);aspect-ratio:1;pointer-events:none;z-index:1}
.ring svg{width:100%;height:100%;overflow:visible}
.pulse{animation:sonar 16s cubic-bezier(.24,.6,.3,1) infinite backwards}
@keyframes sonar{0%{r:34px;opacity:0}8%{opacity:.42}100%{r:340px;opacity:0}}
.hero h1{max-width:18ch;margin-top:20px;text-wrap:balance}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.cta-sub{font-size:16px;color:var(--dim);margin-top:18px}
.cta-sub a{color:var(--jade);text-decoration:none}
.rise{opacity:0;transform:translateY(14px);animation:rise .82s cubic-bezier(.2,.7,.3,1) forwards}
.rv{opacity:0;transform:translateY(14px);
  transition:opacity .82s cubic-bezier(.2,.7,.3,1) var(--rvd,0ms),
             transform .82s cubic-bezier(.2,.7,.3,1) var(--rvd,0ms)}
.rv-in{opacity:1;transform:none}
.rise:nth-child(1){animation-delay:.06s}.rise:nth-child(2){animation-delay:.15s}.rise:nth-child(3){animation-delay:.26s}.rise:nth-child(4){animation-delay:.37s}.rise:nth-child(5){animation-delay:.46s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---- quiet ---- */
.quiet{background:var(--deeper)}
.quiet-rings{position:absolute;left:-260px;bottom:-300px;width:700px;height:700px;pointer-events:none;z-index:1}
.rings circle{vector-effect:non-scaling-stroke}
.quiet p{max-width:58ch;margin-top:20px;font-size:21px;line-height:1.62;color:var(--dim)}
.quiet h2{max-width:15ch}
/* #1710: the situation h2 became two sentences, and 15ch broke it across five lines. */
#situation h2{max-width:25ch;text-wrap:balance}
/* Chef Sept 9: the closing question was breaking across two lines at 26ch. */
#situation .pull{max-width:44ch !important}
.work{background:var(--deeper);padding:96px 0}
/* Chef Sept 9. Third weave on the page and deliberately its own angle and pitch, so the
   work band, the visual set and the bio read as three surfaces rather than one repeat. */
.work::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.62;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='36' viewBox='0 0 21 36'%3E%3Cpath d='M10.5 0L21 6V18L10.5 24L0 18V6Z M10.5 24V36' fill='none' stroke='rgb(244,239,228)' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E");
  /* Sept 10: hexagon replaces the weave (#1761) */
  -webkit-mask-image:radial-gradient(95% 115% at 80% 28%, #000 35%, rgba(0,0,0,.55) 100%);
          mask-image:radial-gradient(95% 115% at 80% 28%, #000 35%, rgba(0,0,0,.55) 100%);
  background-size:28px 48px}
.work .wrap{position:relative;z-index:1}
.work-txt p:not(.kick){margin-top:20px;max-width:66ch;font-size:19px;line-height:1.62;color:var(--dim)}
.work-txt h2{max-width:16ch}
.incl{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:52px}
.incl li{position:relative;min-width:0;background:var(--card);border-radius:4px;padding:26px 24px 26px;
  box-shadow:inset 3px 0 0 var(--gold);color:var(--paper);font-size:17px;line-height:1.5;
  display:flex;align-items:center;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, background .28s ease}
.incl li:hover{transform:translateY(-6px);background:#0A3843}
.incl li:nth-child(2){box-shadow:inset 3px 0 0 var(--jade)}
.incl li:nth-child(3){box-shadow:inset 3px 0 0 var(--copper)}
.incl li:nth-child(4){box-shadow:inset 3px 0 0 var(--dim)}
.work .guarantee{margin-top:34px;max-width:none}
@media(max-width:1000px){.incl{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.work{padding:72px 0}}
@media(max-width:640px){.incl{grid-template-columns:1fr;gap:14px;margin-top:38px}}
/* Sept 10, Chef: "the visual hierarchy looks like it's all centered in the center of the
   page." The work band splits: the argument left, the four inclusions as an even 2x2 right,
   the guarantee full width under both. Equal cards on one grid, never staggered. */
.work-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 64px;align-items:center}
.work-split .incl{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;margin-top:0}
@media(max-width:1000px){.work-split{grid-template-columns:1fr}.work-split .incl{margin-top:8px}}
@media(max-width:640px){.work-split .incl{grid-template-columns:1fr;grid-auto-rows:auto}}
/* Sept 10: Who This Is For was a narrow column dead centre. Now the heading holds the left
   5/12 and stays put while the recognition list scrolls past it on the right. */
.sit-split{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:901px){
  .sit-split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
  .sit-head{position:sticky;top:120px}
  .sit-body .recog{margin-top:22px}
  /* overflow:hidden makes the section a scroll box that never scrolls, which pins sticky
     in place. clip still clips the rings without creating one. */
  #situation{overflow:clip}
}
.recog{list-style:none;margin-top:36px}
.recog li{position:relative;padding:17px 0 17px 32px;border-bottom:1px solid rgba(169,194,196,.15)}
.recog li:last-child{border-bottom:0}
.recog li::before{content:"";position:absolute;left:6px;top:28px;width:7px;height:7px;border-radius:50%;background:var(--copper)}
.turn{margin-top:30px;color:var(--dim);max-width:62ch}
.quiet .pull{margin-top:38px !important;font-family:var(--display);font-style:italic;font-size:clamp(24px,2.5vw,32px) !important;line-height:1.28;color:var(--gold) !important;max-width:26ch !important;text-wrap:balance}

/* ---- the visual set (#1601) ---- */
.vset{background:var(--deep);padding-bottom:96px}
.vset::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  /* the weave only. The jade radial that used to sit here read as a stray oval glow
     beside the heading, which is exactly what Chef asked about. */
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='36' viewBox='0 0 21 36'%3E%3Cpath d='M10.5 0L21 6V18L10.5 24L0 18V6Z M10.5 24V36' fill='none' stroke='rgb(244,239,228)' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E");
  /* Sept 10: hexagon replaces the weave (#1761) */
  -webkit-mask-image:radial-gradient(95% 115% at 80% 28%, #000 35%, rgba(0,0,0,.55) 100%);
          mask-image:radial-gradient(95% 115% at 80% 28%, #000 35%, rgba(0,0,0,.55) 100%)}
.vset .wrap{position:relative;z-index:1}
.vtabs{display:flex;align-items:center;gap:14px;margin-top:40px}
@media(min-width:901px){.vtabrow{flex-wrap:nowrap}}
.vtabrow{display:flex;flex-wrap:wrap;gap:0 30px;flex:1;min-width:0}
.vtab{font-family:var(--display);font-size:clamp(14px,1.15vw,17px);font-weight:400;color:var(--dim);background:transparent;border:0;border-bottom:2px solid transparent;padding:10px 2px;cursor:pointer;white-space:normal;text-align:left;line-height:1.28;opacity:.5;transition:opacity .35s ease,color .35s ease,border-color .35s ease}
.vtab[aria-pressed="true"]{color:var(--paper);opacity:1;border-bottom-color:var(--gold)}
/* Auto-cycle progress: while the set cycles, the open tab's underline fills in gold across
   its two loops, so the switch arrives expected. Gone for good once the visitor takes over. */
.vtab{position:relative}
.vset.cycling .vtab[aria-pressed="true"]{border-bottom-color:rgba(227,169,60,.26)}
.vset.cycling .vtab[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--gold);transform-origin:left center;transform:scaleX(var(--vprog,0))}
.varrow{width:44px;height:44px;border-radius:999px;border:1px solid rgba(169,194,196,.3);background:transparent;color:var(--paper);font-size:18px;cursor:pointer;flex:0 0 auto}
.varrow:hover{border-color:var(--jade);color:var(--jade)}
.vwin{overflow:hidden}
.vproofs{margin-top:22px;min-height:2px}
.vproof{display:none;font-size:17px;line-height:1.6;color:var(--dim);max-width:74ch;border-left:2px solid var(--gold);padding-left:18px}
.vproof.on{display:block;animation:vin .4s ease}
/* Chef Sept 9: an accentuating frame around the stage where the work is illustrated.
   Gold hairline, a lifted ground and a deep drop, so the three visuals read as one
   framed exhibit rather than as a bare iframe sitting in the page. */
.vtrack{display:block;position:relative;width:100%;margin-top:26px;border-radius:16px;overflow:hidden;
  height:var(--hd);transition:height .45s cubic-bezier(.2,.7,.3,1);
  background:var(--deeper);
  /* one hairline and one even shadow. The 7px gold spread ring that used to sit between
     them tracked the 16px radius unevenly and read as a misshapen halo. */
  box-shadow:0 0 0 1px rgba(227,169,60,.30), 0 24px 60px -28px rgba(0,0,0,.55)}
/* Every panel is absolute and full-bleed now, so the two involved in a switch overlap
   and cross-fade. Hidden panels keep visibility:hidden and full width: display:none
   gives the SOP frame a zero-width viewport and it draws negative rects every frame. */
.vpanel{position:absolute;inset:0;width:100%;height:100%;min-width:0;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .42s ease,visibility 0s linear .42s}
.vpanel.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .42s ease}
@keyframes vin{from{opacity:0}to{opacity:1}}
.vpanel iframe{width:100%;height:100%;border:0;display:block;background:var(--deeper)}

/* ---- examples ---- */
.examples{background:var(--deeper)}
.exgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px}
.ex{background:var(--card);border-radius:4px;padding:32px 30px 30px;min-width:0;display:flex;flex-direction:column;box-shadow:inset 3px 0 0 var(--gold)}
.ex:nth-child(2){box-shadow:inset 3px 0 0 var(--jade)}
.ex:nth-child(3){box-shadow:inset 3px 0 0 var(--copper)}
.exwho{font-size:15px;color:var(--dim);margin-top:8px;letter-spacing:.01em}
.ex p:not(.exwho){color:var(--dim);margin-top:16px;font-size:17.5px;flex:1}
.ex .tlink{margin-top:22px;align-self:flex-start}

/* ---- steps ---- */
.start{background:var(--deep)}
.start-rings{position:absolute;left:-250px;top:-210px;width:700px;height:700px;pointer-events:none;z-index:0;
  -webkit-mask-image:radial-gradient(circle at 26% 26%, #000 0 34%, transparent 72%);
  mask-image:radial-gradient(circle at 26% 26%, #000 0 34%, transparent 72%)}
.pulse2{animation:sonar2 16s cubic-bezier(.24,.6,.3,1) infinite backwards}
@keyframes sonar2{0%{r:20px;opacity:0}8%{opacity:.55}100%{r:196px;opacity:0}}
.start-cta{margin-top:56px;justify-content:center}
/* Chef Sept 9, option 3: a gold hairline drawing through 01, 02 and 03 as the band is
   scrolled. The line IS the sequence, which is why it earns its place over decoration.
   Horizontal across the three columns; vertical once they stack. Everything below is
   scoped to .steps.lined, a class only the script adds, so with JS off the numerals
   render fully lit and there is no line at all. */
.steps{position:relative}
/* Chef Sept 9: the scroll-driven draw is gone. Everything stays gold, and a spark runs
   01 to 02 to 03 on the hero's cadence: a 16s cycle with two sparks 8s apart, the same
   interval as the hero's sonar pulses. */
.steps-line{position:absolute;background:rgba(227,169,60,.42);pointer-events:none;z-index:0}
.spark{position:absolute;width:7px;height:7px;border-radius:999px;background:var(--gold);
  box-shadow:0 0 11px 2px rgba(227,169,60,.7);opacity:0}
.steps-line.h .spark{top:50%;margin-top:-3.5px;margin-left:-3.5px;animation:sparkh 16s cubic-bezier(.45,0,.55,1) infinite}
.steps-line.v .spark{left:50%;margin-left:-3.5px;margin-top:-3.5px;animation:sparkv 16s cubic-bezier(.45,0,.55,1) infinite}
/* travel condensed from 26% of the cycle to 12%, so each spark is a quick run rather
   than a slow crawl, and the four never overlap. */
@keyframes sparkh{0%{left:0%;opacity:0}2%{opacity:1}12%{left:100%;opacity:1}15%{opacity:0}100%{left:100%;opacity:0}}
@keyframes sparkv{0%{top:0%;opacity:0}2%{opacity:1}12%{top:100%;opacity:1}15%{opacity:0}100%{top:100%;opacity:0}}
/* the line is appended after the numerals, so without a stacking order it paints over
   them and reads as a strikethrough through 01, 02 and 03. */
.num{background:var(--deep);border-radius:999px;z-index:1}
.start .wrap{position:relative;z-index:1}
/* the column count follows the content: three steps or four, same rules. */
.steps{display:grid;grid-template-columns:repeat(var(--stepcols,3),1fr);gap:26px;margin-top:56px}
@media(max-width:1080px){.steps{grid-template-columns:repeat(2,1fr);gap:34px 26px}}
.step{min-width:0;position:relative;padding-left:0}
.num{position:relative;width:48px;height:48px;display:block;margin-bottom:30px}
.num svg{width:48px;height:48px;display:block}
.step h3{color:var(--paper)}
.step p{color:var(--dim);margin-top:12px;font-size:18px}
.guarantee{margin-top:60px;background:var(--card);border-radius:4px;padding:32px 34px;max-width:74ch;box-shadow:inset 3px 0 0 var(--copper)}
.glabel{font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--copper);margin-bottom:12px}
.guarantee p:last-child{font-family:var(--display);font-size:21px;line-height:1.5}

/* ---- voices ---- */
.voices{background:var(--deeper)}
.voices-rings{position:absolute;right:-250px;top:-180px;width:640px;height:640px;pointer-events:none;z-index:0;
  -webkit-mask-image:radial-gradient(circle at 72% 28%, #000 0 34%, transparent 74%);
  mask-image:radial-gradient(circle at 72% 28%, #000 0 34%, transparent 74%)}
.voices .wrap{position:relative;z-index:1}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:54px}
.voice{background:var(--card);border-radius:4px;overflow:hidden;min-width:0;display:flex;flex-direction:column}
.vvid{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;display:block}
.vslot{aspect-ratio:16/9;background:radial-gradient(70% 60% at 50% 40%, rgba(227,169,60,.26), transparent 70%), #06272F;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.vplay{width:64px;height:64px;border-radius:999px;border:1.5px solid var(--gold);position:relative;display:block}
.vplay::after{content:"";position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);border-left:17px solid var(--gold);border-top:11px solid transparent;border-bottom:11px solid transparent}
.vnote{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.voice blockquote{padding:26px 26px 0;font-family:var(--display);font-size:19px;line-height:1.5;flex:1;min-height:0}
.voice blockquote.ph{color:var(--dim);font-style:italic;font-size:17px}
.attr{padding:20px 26px 26px;margin-top:auto}
.attr strong{display:block;font-size:17px}
.attr span{display:block;font-size:15px;color:var(--dim);margin-top:3px}
.attr .tlink{display:inline-block;margin-top:12px;font-size:15px}

/* ---- the ask ---- */
.close{text-align:center;padding:124px 0 130px;overflow:hidden;
  background:radial-gradient(50% 70% at 20% 8%, rgba(47,211,165,.40), transparent 66%),
             radial-gradient(52% 74% at 84% 92%, rgba(228,105,59,.42), transparent 66%),
             radial-gradient(40% 56% at 56% 40%, rgba(227,169,60,.30), transparent 70%),var(--deep)}
.close-rings{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1100px;height:1100px;pointer-events:none;z-index:1}
.close .lede{margin-left:auto;margin-right:auto}
.close .cta-row{justify-content:center}

/* ---- faq (Chef Sept 9) ---- */
.faq{background:var(--deep)}
.faq-rings{position:absolute;right:-300px;bottom:-320px;width:780px;height:780px;pointer-events:none;z-index:0;
  -webkit-mask-image:radial-gradient(circle at 74% 72%, #000 0 34%, transparent 74%);
  mask-image:radial-gradient(circle at 74% 72%, #000 0 34%, transparent 74%)}
/* Chef Sept 9: a second, static mark top left to balance the pulsing one bottom right. */
.faq-rings-tl{position:absolute;left:-280px;top:-260px;width:640px;height:640px;pointer-events:none;z-index:0;
  -webkit-mask-image:radial-gradient(circle at 26% 26%, #000 0 32%, transparent 72%);
  mask-image:radial-gradient(circle at 26% 26%, #000 0 32%, transparent 72%)}
.faq .wrap{position:relative;z-index:1}
.faq h2{max-width:20ch}
.qas{margin-top:52px;border-top:1px solid rgba(169,194,196,.16)}
.qa{padding:28px 0;border-bottom:1px solid rgba(169,194,196,.16);
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:start}
.qa h3{font-size:23px;color:var(--paper);max-width:22ch}
.qa p{color:var(--dim);font-size:18px;line-height:1.62;max-width:60ch}
@media(max-width:900px){.qa{grid-template-columns:1fr;gap:12px;padding:24px 0}.qa h3{max-width:none}}

.faqpage{padding-top:78px}
.faqpage h1{max-width:16ch}
.faqgroup{margin-top:64px}
.faqgroup .qas{margin-top:26px}
.faqpage-cta{margin-top:64px}

/* ---- who ---- */
.who{background:var(--card);padding-bottom:120px;
  border-top:1px solid rgba(227,169,60,.22);border-bottom:1px solid rgba(227,169,60,.22)}
.who::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='36' viewBox='0 0 21 36'%3E%3Cpath d='M10.5 0L21 6V18L10.5 24L0 18V6Z M10.5 24V36' fill='none' stroke='rgb(244,239,228)' stroke-opacity='.085' stroke-width='1'/%3E%3C/svg%3E"),
             radial-gradient(58% 70% at 84% 22%, rgba(227,169,60,.10), transparent 66%);
  /* Sept 10: hexagon replaces the weave (#1761) */
  -webkit-mask-image:radial-gradient(95% 115% at 80% 28%, #000 35%, rgba(0,0,0,.55) 100%);
          mask-image:radial-gradient(95% 115% at 80% 28%, #000 35%, rgba(0,0,0,.55) 100%)}
.who .wrap{position:relative;z-index:1}
.split{display:grid;grid-template-columns:.78fr 1fr;gap:62px;align-items:center}
.who-txt{min-width:0}
.who-txt p.who-micro{font-family:var(--display);font-size:23px;line-height:1.28;color:var(--gold);margin-top:16px;max-width:30ch}
.who-txt p{color:var(--dim);margin-top:18px;font-size:20px;max-width:50ch}
.who-fig{position:relative;min-width:0;overflow:hidden;border-radius:999px 999px 4px 4px}
.who-fig img{aspect-ratio:3/4;object-fit:cover;width:100%;height:auto;filter:saturate(1.04);
  display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1), filter .5s ease}
.who-fig{box-shadow:0 24px 60px -30px rgba(0,0,0,.8);transition:box-shadow .5s ease}
.who-fig:hover img{transform:scale(1.045);filter:saturate(1.12)}
.who-fig:hover{box-shadow:0 34px 80px -28px rgba(0,0,0,.9)}

/* ---- footer ---- */
.foot{background:var(--deeper);border-top:1px solid rgba(227,169,60,.22);padding:50px 0 32px;font-size:17px}
.foot .dimline{color:var(--dim);margin-top:6px}
.foot .dimline a{color:var(--jade);text-decoration:none}
.foot .tag{font-family:var(--display);font-style:italic;color:var(--gold);margin-top:20px;font-size:19px;max-width:32ch}
/* Chef Sept 10: brand left, Explore centred on the page, contact flush right, so the three
   blocks balance instead of crowding the left half. */
.foot-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:48px;align-items:start}
.foot-contact{justify-self:end;text-align:right}
.foot-contact .foot-h{margin-right:-.2em}
.foot-brand .brand{margin-bottom:4px}
.foot-brand .wordmark{font-size:21px}
.foot-who{color:var(--dim);margin-top:14px;font-size:16px}
.foot-h{font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
/* Chef Sept 10: the four links stood in one column and set the footer's height, leaving
   empty space under the other two. A 2x2 under the Explore title brings the three
   columns to about one height. */
.foot-nav{display:grid;grid-template-columns:repeat(2,max-content);column-gap:34px;align-content:start;justify-content:center;text-align:center}
/* letter-spacing trails the last letter, so a centred spaced title sits left without this */
.foot-nav .foot-h{grid-column:1 / -1;padding-left:.2em}
/* an odd last link (five once Blog is live) takes the whole row, centred */
.foot-nav a:last-child:nth-child(even){grid-column:1 / -1}
.foot-nav a{color:var(--dim);text-decoration:none;padding:6px 0;font-size:16px}
.foot-nav a:hover{color:var(--gold)}
.foot-contact .btn.small{margin-bottom:14px}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  margin-top:34px;padding-top:20px;border-top:1px solid rgba(169,194,196,.16)}
.foot-base .dimline{margin-top:0;font-size:15px}
.foot-base a{color:var(--jade);text-decoration:none}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr;gap:30px}.foot{padding:44px 0 28px}
  .foot-brand,.foot-nav,.foot-contact{justify-self:center;text-align:center}
  .foot-brand .brand{justify-content:center}.foot .tag{margin-left:auto;margin-right:auto}
  .foot-contact .foot-h{margin-right:0;padding-left:.2em}.foot-base{justify-content:center;text-align:center}}

/* ---- responsive ---- */
@media (max-width:1000px){
  .exgrid,.vgrid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:40px}
  .who-fig{max-width:440px}
}
@media (max-width:900px){
  .ring{right:-46vw;top:auto;bottom:-14vh;translate:none;width:150vw}
  .hero{min-height:78vh;padding:84px 0 60px}
}
@media (max-width:760px){
  :root{--gutter:20px}
  section{padding:78px 0}
  .links{display:none}
  .navtoggle{display:flex;margin-left:auto}
  .bar .btn.small{margin-left:auto}
  .navtoggle{margin-left:0}
  .bar{gap:12px}
  .btn.small{padding:11px 14px 7px;font-size:16px;min-height:42px}
  .wordmark{font-size:15px;letter-spacing:.16em}
  .steps{grid-template-columns:1fr !important}
  /* Sept 10: the steps line runs vertical on phones (#1737), and with each title and body
     stacked under its numeral it cut straight through every one of them. The numeral now
     has its own lane and the text sits beside it, so the line runs down clear space. */
  .step{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:20px;align-items:start}
  .step .num{grid-row:1 / span 2;margin-bottom:0}
  .step h3{grid-column:2;margin-top:9px}
  .step p{grid-column:2}
  .vtrack{height:var(--hp)}
  /* one tab per row on a phone. Wrapping alone let them shrink into three narrow
     columns of stacked words instead of stacking as three lines. */
  .vtab{font-size:17px;flex:1 0 100%}
  .vtabrow{gap:0}
  .varrow{display:none}
  .vtabs{align-items:flex-start}
  .brandtag{display:none}
  .vproof{font-size:16px;padding-left:14px}
  .close-rings{width:760px;height:760px}
}
@media (prefers-reduced-motion:reduce){
  .hero::before,.pulse,.pulse2,.spark{animation:none !important}
  .rv{opacity:1;transform:none;transition:none}
  .incl li:hover,.who-fig:hover img{transform:none}
  .rise{animation:none;opacity:1;transform:none}
}