:root{
  --void:#050506;--ink:#0b0b0d;--ink-2:#101013;
  --orange:#FF6F20;--orange-2:#C9541F;--ember:#ff9450;--deep:#2b1004;
  --cream:#FBF3EA;--muted:#8d8880;--line:rgba(251,243,234,.10);
  --maxw:1240px;--gutter:clamp(20px,4vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--void)}
html{-webkit-tap-highlight-color:rgba(255,111,32,.25)}
a:active,a:focus{color:var(--orange)}
body{margin:0;background:var(--void);color:var(--cream);font-family:"Heebo",system-ui,sans-serif;font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.num{font-family:"Barlow Condensed",sans-serif;letter-spacing:.22em;font-weight:700}

/* ambient spotlight that follows the cursor */
#glow{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(420px at var(--mx,50%) var(--my,40%),rgba(255,111,32,.10),transparent 70%);
  transition:opacity .4s ease;mix-blend-mode:screen}

/* scroll spine */
#spine{position:fixed;top:0;right:0;width:2px;height:100vh;z-index:60;background:rgba(251,243,234,.07)}
#spine i{display:block;width:100%;height:0;background:linear-gradient(var(--ember),var(--orange));box-shadow:0 0 14px rgba(255,111,32,.7)}

.mark{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:clamp(20px,2.6vw,26px);letter-spacing:.14em}
.mark span{color:var(--orange)}
.btn{display:inline-block;background:var(--orange);color:var(--deep);font-weight:700;font-size:clamp(15px,1.5vw,17px);padding:clamp(12px,1.5vw,17px) clamp(24px,3vw,38px);border-radius:999px;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(255,111,32,.35)}
.btn.sm{padding:9px 20px;font-size:14px}
.btn.ghost{background:transparent;color:var(--cream);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--orange);box-shadow:none}

/* ACT 1, opening film */
.opening{position:relative;height:min(74svh,660px);min-height:500px;overflow:hidden;display:flex;align-items:center}
.opening .film{position:absolute;inset:0;z-index:0}
.opening .film img,.opening .film video{width:100%;height:100%;object-fit:cover;opacity:.92;transform:scale(1.08);transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.opening.ready .film img,.opening.ready .film video{transform:scale(1)}
.opening .film::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to top,rgba(5,5,6,.92) 2%,rgba(5,5,6,.30) 42%,rgba(5,5,6,.20) 100%)}
.opening .wrap{position:relative;z-index:3;width:100%;padding-bottom:clamp(48px,9vh,110px)}
.kicker{font-size:clamp(14px,1.6vw,18px);letter-spacing:.26em;color:var(--orange-2);margin:0 0 clamp(14px,2vw,22px)}
h1{font-size:clamp(26px,8.6vw,104px);line-height:1.02;font-weight:900;letter-spacing:-.03em;margin:0 0 clamp(16px,2.4vw,26px);white-space:nowrap}
h1 .l{display:block;overflow:hidden}
body.js h1 .l b{display:block;font-weight:900;transform:translateY(105%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
body.js .opening.ready h1 .l b{transition-delay:.15s;transform:none}
h1 em{font-style:normal;color:var(--orange)}
.lede{font-size:clamp(16px,1.9vw,21px);color:#cdc7bf;max-width:40ch;margin:0 0 clamp(22px,3vw,34px);font-weight:200}
.cue{position:absolute;bottom:clamp(18px,3vh,34px);left:50%;transform:translateX(-50%);z-index:3;font-size:11px;letter-spacing:.3em;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:10px}
.cue i{display:block;width:1px;height:44px;background:linear-gradient(var(--orange-2),transparent);animation:drop 2.2s infinite}
/* The cue is absolutely positioned at the bottom of the hero, so on a short
   hero it can reach the button row above it.

   Under 760px it is simply gone: on a phone the two buttons already sit at
   the fold and nobody needs to be told to scroll.

   Above 760px it stays exactly as it was, unless the measured gap to the CTA
   row falls under 40px, in which case the script adds .is-tight and it hides
   there too. Hidden beats overlapping. */
@media (max-width:760px){
  /* On a phone the cue joins the flow under the buttons instead of being
     pinned to the bottom of the hero, which is what used to put it on top of
     them. The hero becomes auto height with its old height as a floor, so it
     grows to make room rather than squeezing anything above. The wrap's bottom
     padding moves to the section, so the 28px above the cue is exactly 28px
     and the rhythm at the bottom of the hero is unchanged. */
  .opening{
    flex-direction:column;justify-content:center;
    height:auto;min-height:min(74svh,660px);
    padding-bottom:clamp(48px,9vh,110px);
  }
  .opening .wrap{padding-bottom:0}
  .cue{
    position:static;transform:none;align-self:center;
    margin:28px 0 0;
    font-size:10px;gap:8px;
  }
  .cue i{height:28px}
}
.cue.is-tight{display:none}
@keyframes drop{0%{opacity:0;transform:scaleY(.2)}40%{opacity:1}100%{opacity:0;transform:scaleY(1)}}

/* ACT 2, the manifesto, huge type on black */
.manifesto{padding:clamp(48px,8vh,96px) 0;background:var(--void)}
.manifesto p > .mline{white-space:nowrap;max-width:100%}
.manifesto p{font-size:clamp(18px,5.4vw,48px);line-height:1.2;font-weight:200;letter-spacing:-.02em;max-width:none;margin:0}
.manifesto p b{font-weight:700;color:var(--orange)}
body.js .mline{display:block;opacity:0;filter:blur(10px);transform:translateY(26px);transition:opacity .9s ease,filter .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
body.js .mline.in{opacity:1;filter:none;transform:none}

/* ACT 3, the four stages, numbered rows */
.steps{padding:clamp(70px,12vh,150px) 0;background:linear-gradient(var(--void),var(--ink) 50%,var(--void))}
.steps .lead{color:var(--muted);font-weight:200;max-width:56ch;margin:0 0 clamp(30px,5vw,60px);font-size:clamp(15px,1.8vw,17.5px)}
.step-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,4vw,60px);align-items:center;
  padding:clamp(28px,5vw,56px) 0;border-top:1px solid var(--line)}
.step-row:last-child{border-bottom:1px solid var(--line)}
.step-row .media{border-radius:16px;overflow:hidden;background:var(--ink-2);aspect-ratio:4/3;order:2}
.step-row.flip .media{order:0}
.step-row .media img,.step-row .media video{width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),opacity .6s ease}
.step-row:hover .media img,.step-row:hover .media video{transform:scale(1.05);opacity:1}
.step-copy{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.4vw,32px);align-items:start}
.step-n{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:clamp(46px,8vw,104px);line-height:.78;
  color:transparent;-webkit-text-stroke:1px var(--orange-2);letter-spacing:.02em}
.step-copy h3{margin:0 0 12px;font-size:clamp(26px,4.4vw,48px);font-weight:900;letter-spacing:-.025em;line-height:1}
.step-copy p{margin:0 0 14px;color:#c7c1b9;font-weight:200;font-size:clamp(15px,1.8vw,17.5px);max-width:52ch}
.step-tag{display:inline-block;font-size:12px;letter-spacing:.14em;color:var(--orange-2);border:1px solid rgba(201,84,31,.45);
  border-radius:999px;padding:5px 14px;font-family:"Barlow Condensed",sans-serif;font-weight:700}
body.js .rev{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
body.js .rev.in{opacity:1;transform:none}

/* ACT 4, the six abilities as a light grid */
.grid-act{padding:clamp(54px,8vh,100px) 0;background:linear-gradient(var(--void),var(--ink) 30%,var(--void))}
.eyebrow{font-size:clamp(15px,1.7vw,19px);letter-spacing:.22em;color:var(--orange-2);margin:0 0 18px}
.h2{font-size:clamp(26px,4.4vw,52px);line-height:1.05;font-weight:900;letter-spacing:-.025em;margin:0 0 clamp(18px,2.6vw,30px);max-width:20ch}
.abs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
.ab{background:var(--void);padding:clamp(24px,3.4vw,44px);position:relative;overflow:hidden;transition:background .4s ease}
.ab::before{content:"";position:absolute;inset:auto 0 0 auto;width:0;height:1px;background:var(--orange-2);transition:width .5s ease}
.ab:hover{background:var(--ink-2)}
.ab:hover::before{width:100%}
.ab .num{font-size:11px;color:var(--muted);display:block;margin-bottom:14px}
.ab h3{margin:0 0 10px;font-size:clamp(19px,2.2vw,26px);font-weight:500}
.ab p{margin:0;color:var(--muted);font-size:clamp(14px,1.6vw,16px);font-weight:200}

/* components row, one horizontal line */
.comps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.comp{background:var(--void);border:0;color:var(--cream);font-family:inherit;text-align:right;cursor:pointer;
  padding:clamp(16px,2vw,26px) clamp(10px,1.4vw,20px);transition:background .35s ease;position:relative}
.comp:hover{background:var(--ink-2)}
.comp .num{display:block;font-size:11px;color:var(--muted);margin-bottom:10px}
.comp h3{margin:0;font-size:clamp(15px,1.6vw,19px);font-weight:500;line-height:1.25}
.comp::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:right;transition:transform .4s ease}
.comp[aria-selected="true"]{background:var(--ink-2)}
.comp[aria-selected="true"] h3{color:var(--orange)}
.comp[aria-selected="true"]::after{transform:scaleX(1)}
.panels{padding-top:clamp(28px,4vw,52px)}
.panel{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(20px,3vw,48px);align-items:start}
body.js .panel{display:none}
body.js .panel.on{display:grid;animation:fade .5s ease}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.panel h4{margin:0 0 14px;font-size:clamp(22px,3vw,34px);font-weight:900;letter-spacing:-.02em}
.panel p{margin:0 0 14px;color:#c7c1b9;font-weight:200;font-size:clamp(15px,1.8vw,17.5px);max-width:62ch}
.meta{border-top:1px solid var(--line);padding-top:18px}
.meta dt{font-size:11px;letter-spacing:.2em;color:var(--orange-2);font-family:"Barlow Condensed",sans-serif;font-weight:700;margin-bottom:6px}
.meta dd{margin:0 0 16px;color:var(--muted);font-size:15px;font-weight:200}

/* faq */
.faq{padding:clamp(48px,7vh,92px) 0}
.faq details{border-top:1px solid var(--line);padding:20px 0}
.faq details[open]{background:linear-gradient(rgba(255,111,32,.04),transparent)}
.faq summary{cursor:pointer;list-style:none;font-size:clamp(17px,2.1vw,22px);font-weight:500;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--orange-2);font-weight:300;font-size:24px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:14px 0 0;color:var(--muted);font-weight:200;font-size:clamp(15px,1.7vw,17px);max-width:70ch}

/* ACT 5, wide statement */
.statement{position:relative;height:clamp(420px,70svh,720px);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.statement img,.statement video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
.statement::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 50%,rgba(5,5,6,.35),rgba(5,5,6,.92))}
.statement .wrap{position:relative;z-index:2}
.statement h2{font-size:clamp(26px,5.4vw,64px);line-height:1.1;font-weight:200;letter-spacing:-.02em;margin:0;max-width:20ch;margin-inline:auto}
.statement h2 b{font-weight:900;color:var(--orange)}

/* ACT 6, who it fits */
.who{padding:clamp(54px,8vh,100px) 0}
.who-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.w{padding-top:24px;border-top:1px solid var(--line);transition:border-color .4s ease}
.w:hover{border-top-color:var(--orange-2)}
.w h3{margin:0 0 12px;font-size:clamp(19px,2.2vw,24px);font-weight:500}
.w p{margin:0;color:var(--muted);font-weight:200;font-size:clamp(15px,1.7vw,16.5px)}

/* ACT 7, proof */
.proof{padding:clamp(70px,12vh,140px) 0;background:var(--ink)}
.rate{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:clamp(28px,5vw,52px)}
.rate .big{font-size:clamp(52px,9vw,110px);font-weight:900;color:var(--orange);line-height:.9;letter-spacing:-.04em}
.rate .stars{color:var(--orange-2);letter-spacing:.24em;font-size:15px}
.rate .txt{color:var(--muted);font-size:15px}
.qs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.q{border-top:1px solid var(--line);padding-top:22px}
.q blockquote{margin:0 0 14px;font-size:clamp(15px,1.8vw,18px);color:#ddd6cd;font-weight:200}
.q .name{font-size:13px;color:var(--muted);letter-spacing:.06em}

/* ACT 8, closing */
.finale{position:relative;padding:clamp(56px,9vh,110px) 0;text-align:center;overflow:hidden}
.finale::before{content:"";position:absolute;inset:auto 50% -30% auto;transform:translateX(50%);width:min(900px,120vw);height:600px;background:radial-gradient(closest-side,rgba(255,111,32,.22),transparent 70%);pointer-events:none}
.finale .wrap{position:relative;z-index:2}
.finale h2{font-size:clamp(30px,6vw,74px);line-height:1;font-weight:900;letter-spacing:-.03em;margin:0 0 18px}
.finale p{color:#c7c1b9;font-weight:200;font-size:clamp(16px,1.9vw,19px);max-width:44ch;margin:0 auto clamp(26px,4vw,40px)}
.alt-row{margin-top:clamp(34px,5vw,56px);padding-top:24px;border-top:1px solid var(--line);display:flex;gap:14px;justify-content:center;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.alt-row a{color:var(--orange-2)}

footer{padding:clamp(30px,5vw,52px) 0;border-top:1px solid var(--line)}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted);align-items:center}
.foot a:hover{color:var(--cream)}

@media (max-width:760px){
    #glow{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  body.js .mline,body.js .rev,body.js .reveal,body.js h1 .l b{opacity:1;filter:none;transform:none}
  body.js .panel{display:grid}
}


.session{padding:clamp(48px,7vh,92px) 0;background:var(--ink-2)}
.timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:clamp(16px,2.4vw,28px);
  border-top:2px solid rgba(201,84,31,.55)}
.slot{display:block;padding:clamp(14px,1.6vw,20px) clamp(10px,1.2vw,16px);border-left:1px solid var(--line);
  transition:background .35s ease}
.slot:last-child{border-left:0}
.slot:hover{background:var(--ink-3)}
.slot .mins{display:block;margin-bottom:10px}
.slot .lbl{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.16em;
  font-size:clamp(11px,1.2vw,13px);color:var(--orange-2);margin-bottom:6px}
.slot .stage{display:block;font-size:clamp(16px,1.7vw,19px);font-weight:500;color:var(--cream);margin-bottom:10px;line-height:1.2}
.slot .slot:hover .slot h3{margin:0 0 8px;font-size:clamp(15px,1.6vw,17px);font-weight:500;color:#e6e0d8}
.slot p{margin:10px 0 0;color:var(--muted);font-weight:200;font-size:clamp(13px,1.3vw,14.5px);line-height:1.55}

.tracks{padding:clamp(48px,7vh,92px) 0}
.track-grid{display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(16px,2.4vw,28px);border-top:2px solid var(--orange-2)}
.track{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) auto;gap:clamp(18px,3vw,44px);
  align-items:center;background:var(--void);padding:clamp(18px,2.4vw,30px) 0;border-bottom:1px solid var(--line);
  transition:background .35s ease,padding .35s ease}
.track:hover{background:var(--ink-2);padding-right:10px}
.track .tag{display:inline-block;font-family:"Barlow Condensed",sans-serif;font-size:12px;letter-spacing:.2em;
  color:var(--orange-2);border:1px solid rgba(255,111,32,.4);border-radius:999px;padding:4px 12px;margin-bottom:10px}
.track h3{margin:0;font-size:clamp(19px,2.2vw,26px);font-weight:500;line-height:1.2}
.track p{margin:8px 0 0;color:var(--muted);font-weight:200;font-size:clamp(14px,1.6vw,16px)}
.track ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.track li{color:#c7c1b9;font-weight:200;font-size:clamp(13.5px,1.5vw,15px);padding-right:14px;position:relative}
.track li::before{content:"";position:absolute;right:0;top:.7em;width:6px;height:1px;background:var(--orange-2)}
.track a.go{white-space:nowrap;color:var(--orange-2);font-size:15px;border-bottom:1px solid rgba(255,111,32,.4)}

/* Park photo closing the tracks. A place, not a cutout, so it keeps a frame:
   12px corners, section width, one fixed height at every breakpoint and a
   cover crop biased upwards so the tops of the bars survive the trim. */
.track-photo{margin:clamp(22px,3vw,34px) 0 0;border-radius:12px;overflow:hidden;background:var(--ink-2);line-height:0}
.track-photo img{display:block;width:100%;height:clamp(200px,26vw,340px);object-fit:cover;object-position:center 40%}

/* The way out for anyone the distance rules out. A hairline above and nothing
   else, no card and no panel, so it reads as a door and not as an ad. */
.track-away{margin-top:clamp(20px,2.6vw,30px);padding-top:clamp(16px,2vw,22px);border-top:1px solid var(--line)}
.track-away h3{margin:0;font-size:clamp(16px,1.7vw,19px);font-weight:500;line-height:1.3}
.track-away p{margin:6px 0 0;color:var(--muted);font-weight:200;font-size:clamp(14px,1.6vw,16px)}
.track-away a.go{color:var(--orange-2);border-bottom:1px solid rgba(255,111,32,.4);white-space:nowrap;margin-inline-start:10px}

.principles{padding:clamp(48px,7vh,92px) 0;background:var(--ink)}
.pr{position:relative}
.pr-n{display:block;font-size:clamp(22px,2.6vw,34px);color:transparent;-webkit-text-stroke:1px var(--orange-2);
  line-height:1;margin-bottom:12px;font-weight:700}
.pr-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:clamp(16px,2.4vw,28px);
  border-top:2px solid var(--orange-2)}
.pr{padding:clamp(18px,2vw,26px) clamp(12px,1.4vw,20px);border-left:1px solid var(--line)}
.pr:last-child{border-left:0}
.pr h3{margin:0 0 10px;font-size:clamp(16px,1.7vw,19px);font-weight:500;line-height:1.25}
.pr p{margin:0;color:var(--muted);font-weight:200;font-size:clamp(13.5px,1.4vw,15px);line-height:1.6}

@media (max-width:1100px){
  .pr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pr{border-bottom:1px solid var(--line)}
  .pr:nth-child(3n){border-left:0}
  .pr:last-child{border-left:1px solid var(--line)}
}
@media (max-width:640px){
  .pr-grid{grid-template-columns:1fr}
  .pr{border-left:0!important;border-bottom:1px solid var(--line)}
}
@media (max-width:900px){
  .track{grid-template-columns:1fr;gap:14px;align-items:start;padding:20px 0}
  .track a.go{justify-self:start}
  .pr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr{border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
  .pr:nth-child(2n){border-left:0}
  .timeline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slot{border-bottom:1px solid var(--line)}
  .slot:nth-child(2n){border-left:0}
}
@media (max-width:520px){
  .timeline{grid-template-columns:1fr}
  .slot{border-left:0;padding:14px 0}
  .slot }


#grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>")}

.ember{position:relative;overflow:hidden}
.ember::before{content:"";position:absolute;z-index:0;inset:auto auto -160px -180px;width:460px;height:360px;
  background:radial-gradient(closest-side,rgba(255,111,32,.07),transparent 72%);pointer-events:none}
.ember .wrap{position:relative;z-index:1}

.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(14px,2vw,22px) 0;overflow:hidden;background:var(--void)}
.marquee-in{display:flex;gap:0;width:max-content;animation:slide 38s linear infinite}
.marquee span{font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.14em;
  font-size:clamp(18px,2.4vw,30px);color:var(--muted);padding:0 clamp(16px,2vw,28px);white-space:nowrap}
.marquee span b{color:var(--orange-2);font-weight:600}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* The band lost its photograph on 2026-08-30, but the height stays exactly
   where the picture left it, clamp(340px,47vw,760px), so the sections below
   keep their offsets. Do not tune this to the text: the text is far shorter
   than the box and the whitespace is the point. */
.strip{position:relative;padding:clamp(54px,8vh,100px) 0;text-align:center;overflow:hidden;min-height:clamp(340px,47vw,760px);display:flex;align-items:center}
.strip .wrap{position:relative;z-index:2;width:100%}
.strip h2{max-width:22ch;margin:0 auto;font-size:clamp(24px,4.4vw,46px)}
/* The home band puts the emphasised word in brand orange. This band was
   leaving it white, so the two read as different designs. Same rule here. */
.strip h2 b{font-weight:900;color:var(--orange)}
/* The one thing kept from the photo treatment: a faint orange wash across the
   corner, so the empty band still reads as part of the page and not as a gap. */
.strip::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(120deg,rgba(255,111,32,.10),transparent 55%);mix-blend-mode:screen}

.track{transition:background .35s ease,transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease}
.track:hover{transform:translateY(-6px)}
.track .tag{display:inline-block;border:1px solid rgba(255,111,32,.4);border-radius:999px;padding:4px 12px}


.pr{transition:background .35s ease}
.pr:hover{background:var(--ink-2)}
.pr:hover .pr-n{-webkit-text-stroke:1px var(--ember)}

.faq details{transition:padding .3s ease}
.faq details[open]{padding-right:12px}

@media (prefers-reduced-motion:reduce){
  .marquee-in{animation:none}
  .track:hover,.slot:hover{transform:none;padding-right:0}
}

.skills{padding:clamp(48px,7vh,92px) 0;background:var(--ink)}
/* Three families, one wide row each, stacked. The nine equal cards did not
   say which skill belonged to which world; the row header does that now, and
   the chips carry the level so the sorting is inside the family rather than
   across the whole section. Nothing is hidden behind a tap. */
.fam-list{display:grid;gap:1px;background:var(--line);margin-top:clamp(18px,2.6vw,32px);
  border-block:1px solid var(--line)}
.fam{background:var(--void);padding:clamp(22px,3vw,38px) clamp(18px,2.4vw,34px);
  transition:background .35s ease}
.fam:hover{background:var(--ink-2)}
.fam-head{display:flex;align-items:baseline;gap:14px;margin:0 0 10px}
.fam-n{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:clamp(24px,3vw,38px);
  line-height:1;color:transparent;-webkit-text-stroke:1px var(--orange-2);letter-spacing:.02em}
.fam h3{margin:0;font-size:clamp(20px,2.6vw,30px);font-weight:900;letter-spacing:-.02em}
.fam-what{margin:0 0 16px;color:#c7c1b9;font-weight:200;line-height:1.6;
  font-size:clamp(15px,1.7vw,17.5px);max-width:58ch}

.fam-chips{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:baseline;gap:9px;
  border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;text-decoration:none;color:var(--cream);
  transition:border-color .25s ease,background .25s ease}
.chip b{font-weight:500;font-size:clamp(14px,1.5vw,15.5px)}
.chip .lvl{font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.14em;
  font-size:11px;color:var(--orange-2)}
.chip:hover,.chip:focus-visible{border-color:rgba(255,111,32,.55);background:rgba(255,111,32,.06)}
.chip:target{border-color:var(--orange);background:rgba(255,111,32,.10)}

.fam-gear,.fam-when{margin:0;color:var(--muted);font-weight:200;
  font-size:clamp(13.5px,1.45vw,15px);line-height:1.65}
.fam-gear{margin-bottom:6px}
.fam-gear b,.fam-when b{font-family:"Barlow Condensed",sans-serif;font-weight:700;
  letter-spacing:.14em;font-size:11.5px;color:var(--orange-2);margin-inline-end:8px}
.fam-gear a{color:var(--cream);border-bottom:1px solid rgba(255,111,32,.55);
  text-decoration:none;transition:color .2s ease,border-color .2s ease}
.fam-gear a:hover{color:var(--orange);border-color:var(--orange)}
.includes{padding:clamp(48px,7vh,92px) 0}
.inc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,30px);margin-top:clamp(16px,2.4vw,28px)}
.inc{border-top:2px solid var(--orange-2);padding-top:16px}
.inc h3{margin:0 0 8px;font-size:clamp(16px,1.8vw,19px);font-weight:500}
.inc p{margin:0;color:var(--muted);font-weight:200;font-size:clamp(14px,1.5vw,15.5px);line-height:1.6}
@media (max-width:900px){.inc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.inc-grid{grid-template-columns:1fr}}
@media (max-width:520px){.fam-head{gap:10px}.fam-chips{gap:7px}.chip{padding:6px 13px}}

@media (max-width:760px){
  .manifesto{padding:clamp(28px,5vh,48px) 0}
  .principles,.session,.tracks,.skills,.includes,.faq{padding:clamp(34px,5.5vh,60px) 0}
  .strip{min-height:clamp(260px,38svh,360px);padding:clamp(36px,6vh,64px) 0}
  .finale{padding:clamp(44px,7vh,80px) 0}
}


/* ---------------------------------------------------------------------
   Extra ways into the intake dialog.
   --------------------------------------------------------------------- */

/* One button at the end of a section, centred, with air either side. It sits
   inside the section's own wrap so it inherits that background and there is no
   seam between bands. */
.mid-cta{display:flex;justify-content:center;margin:32px 0 0;padding:0}
.session .mid-cta,.skills .mid-cta,.includes .mid-cta{margin-block:32px 0}

/* The phone bar. Docked to the bottom edge, above the grain overlay, under the
   dialog, which lives in the top layer anyway. */
.cta-bar{
  position:fixed;inset:auto 0 0 0;z-index:40;
  display:none;
  align-items:center;justify-content:space-between;gap:14px;
  padding:12px clamp(14px,4vw,20px);
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(5,5,6,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(110%);opacity:0;visibility:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility 0s linear .3s;
}
.cta-bar.on{transform:none;opacity:1;visibility:visible;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility 0s}
.cta-bar-t{color:var(--cream);font-size:15px;font-weight:300;letter-spacing:.01em}
.cta-bar .btn{flex:0 0 auto;padding:11px 20px;font-size:15px;white-space:nowrap}
.cta-bar-t{flex:1 1 auto;min-width:0}

@media (max-width:760px){
  .cta-bar{display:flex}
  /* the accessibility button rides up by exactly the bar's height while the
     bar is out, so nothing is ever covered */
  body.atg-bar-on .userway_buttons_wrapper,
  body.atg-bar-on #ast-scroll-top{
    transform:translateY(calc(-1 * var(--atg-bar-h,76px))) !important;
    transition:transform .3s cubic-bezier(.2,.8,.2,1) !important;
  }
}
@media (prefers-reduced-motion:reduce){
  .cta-bar,body.atg-bar-on .userway_buttons_wrapper,body.atg-bar-on #ast-scroll-top{transition:none !important}
}


/* A cutout photograph, placed straight on the black with the same warm glow
   the founder portrait carries. No frame, no card, no background. */
.cutout{position:relative;margin:0;padding:0;line-height:0}
.cutout::before{content:"";position:absolute;inset:6% -8% -6% -8%;
  background:radial-gradient(closest-side,rgba(255,111,32,.18),transparent 72%);
  pointer-events:none}
.cutout img{position:relative;width:100%;height:auto;object-fit:contain;
  filter:drop-shadow(0 22px 54px rgba(0,0,0,.6))}

/* The family row gets a second column only above 1200px. Below that the chips
   would be pushed onto a second line, so the picture goes under the copy
   instead, centred and smaller. */
.fam-cut{max-width:220px;margin:22px auto 0}
@media (min-width:1201px){
  /* The column widens as far as the chips allow it to, and the figure
     fills it and stands on the row's lower edge instead of hovering in
     the middle of it. The chips stay on one line at every width from
     1201 up, which is what caps the column. */
  .fam:has(.fam-cut){display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,clamp(300px,26vw,400px));
    gap:clamp(24px,2.6vw,40px);align-items:center}
  .fam:has(.fam-cut) > :not(.fam-cut){grid-column:1}
  .fam-cut{
    grid-column:2;grid-row:1 / span 6;align-self:end;
    max-width:none;width:100%;
    margin:0 0 calc(-1 * clamp(22px,3vw,38px));
    position:relative;z-index:2;
  }
  .fam-cut img{z-index:1}

  .fam-cut::before{
    inset:auto -8% -4% -8%;height:56%;
    background:radial-gradient(closest-side,rgba(255,111,32,.10),transparent 74%);
  }

  .fam-cut::after{
    content:"";position:absolute;z-index:0;pointer-events:none;
    left:16%;right:16%;bottom:-1%;height:12%;border-radius:50%;
    background:radial-gradient(50% 50% at 50% 50%,
      rgba(0,0,0,.78),rgba(0,0,0,.42) 58%,transparent 80%);
    filter:blur(9px);
  }
}