/* REXO. Palette sampled directly from the hero warehouse footage.
   steel and haze are the two dominant tones in the frame analysis,
   red sits at 0.5% of sampled pixels, which is where it stays. */

:root{
  --void:#000000;
  --concrete:#101010;
  --steel-lo:#12171D;
  --steel:#303C48;
  --haze:#8AA3BC;
  --grey:#B5B5B5;
  --white:#FFFFFF;
  --red:#FF1A1A;
  --red-deep:#D6271F;
  --red-fill:#C81A16;
  --line:#232323;
  --dim:#949CA3;

  --display:'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  --body:'IBM Plex Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --col:1120px;
  --read:64ch;
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--void);
  color:var(--grey);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,video{max-width:100%;display:block;}

.shell{width:100%;max-width:var(--col);margin:0 auto;padding:0 28px;}
.narrow{max-width:var(--read);}

.skip{position:absolute;left:-9999px;color:var(--white);background:var(--red-fill);text-decoration:none;}
.skip:focus{left:16px;top:16px;z-index:999;background:var(--red-fill);color:var(--white);padding:15px 20px;min-height:44px;display:inline-flex;align-items:center;font-family:var(--mono);font-size:14px;}

:focus-visible{outline:2px solid var(--red);outline-offset:3px;}

/* ---------------- type ---------------- */

h1,h2,h3{font-family:var(--display);color:var(--white);font-weight:700;margin:0;}

h1{
  font-size:clamp(2.4rem,6.4vw,5.4rem);
  line-height:1.02;
  letter-spacing:-.025em;
  text-transform:uppercase;
}

h2{
  font-size:clamp(1.7rem,3.6vw,2.9rem);
  line-height:1.08;
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin-bottom:22px;
}

h3{font-size:1.05rem;line-height:1.3;letter-spacing:.01em;}

p{margin:0 0 20px;max-width:var(--read);}
p:last-child{margin-bottom:0;}
.hi{color:var(--white);}

.kicker{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 20px;
}
.kicker.mute{color:var(--dim);}

/* ---------------- nav ---------------- */

.nav{
  position:sticky;top:0;z-index:100;
  transition:background .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav[data-scrolled="true"]{background:rgba(0,0,0,.92);border-bottom-color:var(--line);backdrop-filter:blur(8px);}
.nav .shell{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px;}

.mark{
  font-family:var(--display);
  font-weight:700;
  font-size:1.35rem;
  letter-spacing:.3em;
  color:var(--white);
  text-decoration:none;
  text-transform:uppercase;
}
.mark i{color:var(--red);font-style:normal;}

.navlinks{display:flex;align-items:center;gap:30px;}
.navlinks a{
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--grey);
  text-decoration:none;
  padding:15px 0;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  transition:color .2s ease;
}
.navlinks a:hover{color:var(--white);}
.navlinks a.now{color:var(--red);}

/* ---------------- buttons ---------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 32px;
  font-family:var(--mono);font-size:.82rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  background:var(--red-fill);color:var(--white);
  border:1px solid var(--red-fill);
  transition:background .18s ease,color .18s ease;
}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--red);}
.btn.ghost{background:transparent;color:var(--white);border-color:var(--steel);}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--white);color:var(--white);}

.note{font-family:var(--mono);font-size:.76rem;color:var(--dim);margin:14px 0 0;letter-spacing:.04em;}

/* ---------------- hero ---------------- */

.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;}
.hero-veil{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.62) 34%, rgba(0,0,0,.22) 62%, rgba(0,0,0,.10) 100%),
    linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.06) 42%, rgba(0,0,0,.34) 100%);
}
.hero .shell{position:relative;z-index:2;padding-top:120px;padding-bottom:56px;}

.hero h1{max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.9);}
.hero p.sub{
  max-width:52ch;margin:26px 0 34px;
  color:var(--white);font-size:1.06rem;
  text-shadow:0 1px 16px rgba(0,0,0,.9);
}

/* ---------------- sequencer signature ----------------
   16 steps. Lit cells are the call, half cells the response.
   This is the offbeat pattern taught in the lessons, not decoration. */

.seq{display:flex;gap:4px;width:100%;height:12px;margin:0;padding:0;list-style:none;}
.seq li{flex:1 1 0;background:var(--line);position:relative;overflow:hidden;}
.seq li.call{background:var(--red);}
.seq li.resp{background:#4A1418;}
.seq b{position:absolute;inset:0;background:var(--white);opacity:0;display:block;}

@keyframes step{0%,5%{opacity:.9;}11%,100%{opacity:0;}}
.seq.run b{animation:step 2.6s linear infinite;}
.seq.run li:nth-child(1) b{animation-delay:0s;}
.seq.run li:nth-child(2) b{animation-delay:.1625s;}
.seq.run li:nth-child(3) b{animation-delay:.325s;}
.seq.run li:nth-child(4) b{animation-delay:.4875s;}
.seq.run li:nth-child(5) b{animation-delay:.65s;}
.seq.run li:nth-child(6) b{animation-delay:.8125s;}
.seq.run li:nth-child(7) b{animation-delay:.975s;}
.seq.run li:nth-child(8) b{animation-delay:1.1375s;}
.seq.run li:nth-child(9) b{animation-delay:1.3s;}
.seq.run li:nth-child(10) b{animation-delay:1.4625s;}
.seq.run li:nth-child(11) b{animation-delay:1.625s;}
.seq.run li:nth-child(12) b{animation-delay:1.7875s;}
.seq.run li:nth-child(13) b{animation-delay:1.95s;}
.seq.run li:nth-child(14) b{animation-delay:2.1125s;}
.seq.run li:nth-child(15) b{animation-delay:2.275s;}
.seq.run li:nth-child(16) b{animation-delay:2.4375s;}

.seqwrap{padding:0;}
.seqwrap .cap{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:12px 0 0;}

/* ---------------- proof row ---------------- */

.proof{
  background:var(--concrete);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.proof .shell{display:flex;flex-wrap:wrap;gap:32px 60px;padding-top:34px;padding-bottom:34px;}
.proof div{min-width:130px;}
.proof .fig{display:block;font-family:var(--display);font-weight:700;font-size:2.2rem;line-height:1;color:var(--white);letter-spacing:-.02em;}
.proof .fig em{color:var(--red);font-style:normal;}
.proof .cap{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-top:9px;}

/* ---------------- sections ---------------- */

.band{padding:104px 0;}
.band.tone{background:var(--concrete);}
.band.deep{background:var(--steel-lo);}
.band.tight{padding:76px 0;}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:60px;align-items:start;}
.split.flip{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);}

/* ---------------- steps ---------------- */

.steps{list-style:none;margin:0;padding:0;}
.steps > li{display:grid;grid-template-columns:58px minmax(0,1fr);gap:22px;padding:28px 0;border-top:1px solid var(--line);}
.steps > li:first-child{border-top:0;padding-top:0;}
.steps .n{font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--red);letter-spacing:.08em;padding-top:5px;}
.steps h3{margin-bottom:9px;}
.steps p{font-size:.96rem;margin:0;}

.qbox{border:1px solid var(--line);background:var(--void);padding:30px 30px 12px;margin-top:34px;}
.qbox ol{margin:0;padding-left:22px;}
.qbox li{font-size:.96rem;margin-bottom:18px;padding-left:6px;}
.qbox li::marker{color:var(--red);font-family:var(--mono);font-size:.85rem;}

/* ---------------- record ---------------- */

.record{list-style:none;margin:0;padding:0;}
.record li{
  padding:18px 0 18px 26px;
  border-top:1px solid rgba(255,255,255,.09);
  position:relative;
  color:var(--white);
  font-size:1rem;
}
.record li:first-child{border-top:0;}
.record li::before{content:"";position:absolute;left:0;top:27px;width:10px;height:2px;background:var(--red);}
.record li span{display:block;color:var(--haze);font-size:.88rem;margin-top:4px;}

/* ---------------- covers ---------------- */

.covers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 40px;}
.covers li{padding:14px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.86rem;letter-spacing:.02em;color:var(--grey);}
.covers li::before{content:"/";color:var(--red);margin-right:12px;}

/* ---------------- pricing ---------------- */

.rate{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 28px;align-items:baseline;padding:26px 0;border-top:1px solid var(--line);}
.rate:first-of-type{border-top:0;}
.rate.lead{border-left:2px solid var(--red);padding-left:24px;}
.rate .name{font-family:var(--display);font-weight:700;font-size:1.35rem;color:var(--white);text-transform:uppercase;letter-spacing:-.01em;}
.rate .desc{grid-column:1/2;font-size:.94rem;margin:0;}
.rate .amt{grid-row:1/2;grid-column:2/3;font-family:var(--mono);font-weight:500;font-size:1.5rem;color:var(--red);white-space:nowrap;}
.rate .per{grid-column:2/3;font-family:var(--mono);font-size:.74rem;color:var(--dim);text-align:right;white-space:nowrap;letter-spacing:.06em;}

/* ---------------- faq ---------------- */

.faq{border-top:1px solid var(--line);padding:26px 0;}
.faq:first-of-type{border-top:0;}
.faq h3{margin-bottom:10px;}
.faq p{font-size:.96rem;margin:0;}

/* ---------------- soon + capture ---------------- */

.soon{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 44px;}
.soon article{border-top:2px solid var(--red);padding-top:22px;}
.soon .tagline{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin:0 0 10px;}
.soon h3{margin-bottom:10px;}
.soon p{font-size:.94rem;}

.capture{margin-top:52px;border:1px solid var(--line);padding:32px;background:var(--void);}
.capture form{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;}
.capture label{position:absolute;left:-9999px;}
.capture input{
  flex:1 1 260px;min-height:52px;padding:0 18px;
  background:var(--concrete);border:1px solid var(--line);color:var(--white);
  font-family:var(--mono);font-size:.88rem;
}
.capture input::placeholder{color:var(--dim);}
.capture input:focus{border-color:var(--red);outline:none;}
.capture .msg{font-family:var(--mono);font-size:.78rem;color:var(--red);margin:14px 0 0;min-height:1em;}

/* ---------------- close ---------------- */

.close{padding:120px 0;}
.close h2{max-width:18ch;}

/* ---------------- footer ---------------- */

.foot{border-top:1px solid var(--line);padding:64px 0 48px;background:var(--void);}
.foot .top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:34px;margin-bottom:48px;}
.foot .wordmark{font-family:var(--display);font-weight:700;font-size:clamp(3rem,11vw,7rem);line-height:.86;letter-spacing:-.02em;color:var(--white);text-transform:uppercase;}
.foot .wordmark i{color:var(--red);font-style:normal;}
.foot nav{display:flex;flex-direction:column;gap:2px;}
.foot nav a{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;}
.foot nav a:hover{color:var(--white);}
.foot .base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding-top:26px;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);}

/* ---------------- legal pages ---------------- */

.doc{padding:140px 0 110px;}
.doc h2{margin-top:52px;}
.doc h2:first-of-type{margin-top:34px;}
.doc ul{padding-left:20px;max-width:var(--read);}
.doc li{margin-bottom:12px;}
.doc li::marker{color:var(--red);}

/* ---------------- reveal ---------------- */

[data-reveal]{opacity:1;}
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;}
.js [data-reveal].seen{opacity:1;transform:none;}

/* ---------------- responsive ---------------- */

@media (max-width:900px){
  .split,.split.flip{grid-template-columns:minmax(0,1fr);gap:38px;}
  .band{padding:74px 0;}
  .navlinks{gap:18px;}
  .navlinks a.hide-sm{display:none;}
}

@media (max-width:560px){
  body{font-size:16px;}
  .shell{padding:0 20px;}
  .hero{min-height:76vh;}
  .hero .shell{padding-top:100px;padding-bottom:44px;}
  .proof .shell{gap:26px 40px;}
  .proof .fig{font-size:1.8rem;}
  .steps > li{grid-template-columns:38px minmax(0,1fr);gap:14px;}
  .qbox{padding:24px 22px 8px;}
  .rate{grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;}
  .rate .amt{font-size:1.3rem;}
  .capture{padding:24px 20px;}
  .btn{width:100%;padding:0 20px;}
  .close{padding:84px 0;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js [data-reveal]{opacity:1;transform:none;}
}

/* ============ added for v3: logo, texture, cards, footage ============ */

/* fine grain over dark sections. costs nothing, reads like film */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.05;mix-blend-mode:screen;
  background:url("../img/grain.png") repeat;
  background-size:96px 96px;
}

/* scroll progress, sits on the nav underline */
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--red);transition:width .1s linear;}

/* nav logo */
.mark{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:44px;min-width:44px;}
.mark picture{display:block;line-height:0;}
.mark img{height:30px;width:auto;display:block;}
.mark .wordtype{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:.3em;color:var(--white);}

/* hero logo lockup */
.hero .lockup{display:flex;align-items:center;gap:18px;margin-bottom:26px;}
.hero .lockup picture{line-height:0;}
.hero .lockup img{height:52px;width:auto;display:block;filter:drop-shadow(0 2px 18px rgba(0,0,0,.7));}
.hero .lockup span{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--white);}

/* level cards, one per experience level */
.levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:14px;}
.level{
  border:1px solid var(--line);background:var(--void);padding:28px 26px;
  transition:border-color .25s ease,background .25s ease,transform .25s ease;
}
.level:hover{border-color:var(--red);transform:translateY(-3px);}
.level .tier{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin:0 0 14px;}
.level h3{margin-bottom:10px;}
.level p{font-size:.94rem;margin:0;}

/* footage grid */
.reel{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:8px;}
.reel figure{margin:0;position:relative;overflow:hidden;border:1px solid var(--line);background:var(--concrete);}
.reel video{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;display:block;filter:saturate(1.05);}
.reel figcaption{
  position:absolute;left:0;bottom:0;right:0;
  padding:26px 16px 12px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--white);
  background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,0));
}

/* big faint logo behind a section */
.watermark{position:relative;overflow:hidden;}
.watermark::before{
  content:"";position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  width:min(560px,52vw);aspect-ratio:1235/1704;
  background:url("../img/logo-mark.webp") center/contain no-repeat;
  opacity:.05;pointer-events:none;
}
.watermark > *{position:relative;}

/* product placeholder cards */
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;}
.product{
  border:1px solid var(--line);background:var(--void);padding:32px 30px;
  display:flex;flex-direction:column;gap:14px;
  transition:border-color .25s ease,transform .25s ease;
}
.product:hover{border-color:var(--red-deep);transform:translateY(-3px);}
.product .flag{
  align-self:flex-start;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);border:1px solid var(--red);padding:5px 11px;
}
.product h3{font-size:1.5rem;text-transform:uppercase;letter-spacing:-.01em;margin:0;}
.product p{font-size:.94rem;margin:0;}
.product .strip{display:flex;gap:4px;height:6px;margin-top:6px;}
.product .strip i{flex:1;background:var(--line);}
.product .strip i:nth-child(3n+1){background:var(--red-deep);}

/* closing band with the hero film behind it */
.finale{position:relative;overflow:hidden;padding:130px 0;}
.finale-media{position:absolute;inset:0;z-index:0;}
.finale-media video{width:100%;height:100%;object-fit:cover;}
.finale-veil{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(95deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.54) 38%, rgba(0,0,0,.16) 72%, rgba(0,0,0,.06) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,.04) 45%, rgba(0,0,0,.5) 100%);
}
.finale .shell{position:relative;z-index:2;}
.finale h2{text-shadow:0 2px 26px rgba(0,0,0,.85);max-width:20ch;}
.finale p{color:var(--white);text-shadow:0 1px 14px rgba(0,0,0,.9);}
.finale .logo-lg{height:74px;width:auto;margin-bottom:30px;filter:drop-shadow(0 2px 20px rgba(0,0,0,.7));}

/* footer logo */
.foot .brandblock{display:flex;align-items:flex-end;gap:24px;}
.foot .brandblock picture{line-height:0;}
.foot .brandblock img{height:clamp(74px,15vw,124px);width:auto;display:block;}

@media (max-width:620px){
  .navlinks{gap:14px;}
  .navlinks a{font-size:.7rem;letter-spacing:.1em;}
  .navlinks a.cta{padding:0 13px;min-height:40px;}
  .mark .wordtype{display:none;}
}

@media (max-width:430px){
  .shell{padding:0 16px;}
  .navlinks{gap:11px;}
  .navlinks a{font-size:.66rem;letter-spacing:.06em;}
  .navlinks a.cta{padding:0 11px;}
}

@media (max-width:560px){
  .hero .lockup img{height:40px;}
  .finale{padding:88px 0;}
  .finale .logo-lg{height:56px;}
  .level{padding:24px 20px;}
  .product{padding:26px 22px;}
  .watermark::before{opacity:.035;right:-18%;}
}

/* ============ motion layer: everything on one 150 BPM clock ============
   the sequencer was the seed. rather than scattering unrelated effects,
   every moving thing on the page is driven by the same transport, so the
   page reads as one running machine instead of a pile of tricks. */

/* logo pulses on the beat, barely */
.beat{transition:transform .09s cubic-bezier(.2,.8,.2,1),filter .09s ease;}
.beat.hit{transform:scale(1.045);}

/* VU meter strip, sits under the proof figures */
.vu{display:flex;align-items:flex-end;gap:3px;height:34px;width:100%;margin-top:6px;}
.vu i{
  flex:1 1 0;background:var(--line);height:12%;
  transition:height .1s ease-out,background .22s ease-out;
}
.vu i.lit{background:var(--red-deep);}
.vu i.peak{background:var(--red);}

/* credential ticker */
.ticker{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--void);overflow:hidden;padding:16px 0;
}
.ticker-track{display:flex;width:max-content;will-change:transform;}
.ticker-track span{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:1.1rem;letter-spacing:.06em;color:var(--white);
  padding:0 26px;white-space:nowrap;display:flex;align-items:center;gap:26px;
}
.ticker-track span::after{content:"";width:7px;height:7px;background:var(--red);flex:none;}
.ticker-track span:nth-child(even){color:var(--dim);}

/* waveform rule that draws itself in when a section arrives */
.wave{display:block;width:100%;height:42px;overflow:visible;}
.wave path{
  fill:none;stroke:var(--red);stroke-width:1.6;
  stroke-dasharray:2400;stroke-dashoffset:2400;
  transition:stroke-dashoffset 1.5s cubic-bezier(.55,.1,.25,1);
}
.wave.drawn path{stroke-dashoffset:0;}
.wave .base{stroke:var(--line);stroke-dasharray:none;stroke-dashoffset:0;stroke-width:1;}

/* mini step readout on each level card, running on the same clock */
.level .mini{display:flex;gap:3px;height:5px;margin-top:20px;}
.level .mini i{flex:1;background:var(--line);transition:background .1s ease;}
.level .mini i.on{background:var(--red);}

/* covers list: a red step block slides in on hover */
.covers li{position:relative;transition:color .2s ease,padding-left .22s ease;}
.covers li:hover{color:var(--white);padding-left:10px;}
.covers li::after{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);
  width:3px;height:60%;background:var(--red);transition:transform .22s ease;
}
.covers li:hover::after{transform:translateY(-50%) scaleY(1);}

/* pricing rows fill from the left on hover */
.rate{position:relative;transition:padding-left .25s ease;}
.rate::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,rgba(255,26,26,.10),rgba(255,26,26,0));
  transition:width .35s cubic-bezier(.2,.8,.2,1);pointer-events:none;
}
.rate:hover::before{width:100%;}
.rate:hover{padding-left:14px;}
.rate.lead:hover{padding-left:34px;}

/* buttons get a wipe rather than a colour swap */
.btn{position:relative;overflow:hidden;isolation:isolate;}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--void);
  transform:translateX(-101%);transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(0);}
.btn:hover,.btn:focus-visible{background:var(--red-fill);color:var(--red-fill);}
.btn.ghost::before{background:var(--white);}
.btn.ghost:hover,.btn.ghost:focus-visible{color:var(--void);background:transparent;}

/* kickers resolve from noise into text as they arrive */
.kicker[data-scramble]{font-variant-ligatures:none;}

/* product strips animate their lit cells */
.product .strip i{transition:background .18s ease;}
.product:hover .strip i:nth-child(3n+2){background:var(--red-deep);}

/* level and product cards lift with a red edge rather than a glow */
.level,.product{position:relative;}
.level::after,.product::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.level:hover::after,.product:hover::after{transform:scaleX(1);}

@media (prefers-reduced-motion:reduce){
  .beat.hit{transform:none;}
  .ticker-track{transform:none !important;}
  .wave path{stroke-dashoffset:0;}
  .vu i{transition:none;}
}

/* ============ supports: the proof section ============
   150 cells, one per support video. The number is the visual rather than
   a stat in a row, because it is the strongest thing on the page. */

.supports{padding:112px 0;background:var(--concrete);border-top:1px solid var(--line);}

.supports .headline{
  display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap;margin-bottom:10px;
}
.supports .bignum{
  font-family:var(--display);font-weight:700;
  font-size:clamp(4.6rem,15vw,11rem);line-height:.82;letter-spacing:-.04em;
  color:var(--red);
}
.supports .bignum small{font-size:.42em;letter-spacing:-.02em;vertical-align:.32em;}
.supports .bigcap{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.3rem,3.2vw,2.2rem);line-height:1.05;letter-spacing:-.01em;
  color:var(--white);max-width:12ch;padding-bottom:.5rem;
}

.supports .cols{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;margin-top:44px;align-items:start;}

/* the wall of cells */
.wall{display:grid;grid-template-columns:repeat(25,1fr);gap:4px;}
.wall i{
  aspect-ratio:1;background:var(--line);
  transition:background .28s ease,transform .28s ease;
}
.wall i.on{background:var(--red-deep);}
.wall i.hot{background:var(--red);transform:scale(1.14);}
.wall-meta{
  display:flex;justify-content:space-between;gap:16px;margin-top:16px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.wall-meta b{color:var(--red);font-weight:500;}

/* second proof block under the wall */
.chart{
  margin-top:34px;border-top:1px solid var(--line);padding-top:26px;
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
}
.chart .pos{font-family:var(--display);font-weight:700;font-size:2.6rem;line-height:1;color:var(--red);}
.chart .txt{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--white);}
.chart .sub{font-size:.9rem;color:var(--grey);width:100%;margin:0;}

@media (max-width:900px){
  .supports .cols{grid-template-columns:minmax(0,1fr);gap:38px;}
  .wall{grid-template-columns:repeat(25,1fr);max-width:520px;}
}
@media (max-width:560px){
  .supports{padding:76px 0;}
  .wall{grid-template-columns:repeat(25,1fr);gap:2px;max-width:100%;}
  .supports .headline{gap:14px;}
}
@media (prefers-reduced-motion:reduce){
  .wall i.on,.wall i.hot{transform:none;}
}

/* ============ booking page ============ */

.bookhead{padding:140px 0 44px;}
.bookhead h1{font-size:clamp(2rem,5vw,3.6rem);max-width:18ch;}
.bookhead .lede{color:var(--grey);max-width:56ch;margin:20px 0 0;font-size:1.02rem;}

.tzline{
  display:inline-flex;align-items:center;gap:12px;margin-top:26px;
  border:1px solid var(--line);padding:12px 18px;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;color:var(--grey);
}
.tzline b{color:var(--red);font-weight:500;}

/* option selector */
.picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:0 0 34px;}
.pick,.calfallback .btn{min-height:44px;}
.pick{
  appearance:none;cursor:pointer;text-align:left;
  background:var(--void);border:1px solid var(--line);color:var(--grey);
  padding:20px 20px 18px;font-family:var(--body);font-size:.94rem;
  transition:border-color .2s ease,transform .2s ease,background .2s ease;
  min-height:44px;
}
.pick:hover{border-color:var(--steel);transform:translateY(-2px);}
.pick[aria-pressed="true"]{border-color:var(--red);background:var(--concrete);}
.pick .t{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.1rem;color:var(--white);letter-spacing:-.01em;}
.pick .pr{display:block;font-family:var(--mono);font-size:1.05rem;color:var(--red);margin:8px 0 6px;}
.pick .d{display:block;font-size:.84rem;color:var(--dim);line-height:1.45;}

/* embed frame */
.calwrap{border:1px solid var(--line);background:var(--concrete);min-height:640px;position:relative;}
.calwrap #cal-embed{width:100%;min-height:640px;overflow:auto;}
.calfallback{
  position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:40px;text-align:center;
}
.calwrap[data-failed="true"] .calfallback{display:flex;}
.calfallback p{max-width:44ch;margin:0;}

.prep{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;margin-top:56px;}
.prep article{border-top:2px solid var(--red);padding-top:20px;}
.prep h3{margin-bottom:10px;}
.prep p{font-size:.94rem;margin:0;}

@media (max-width:560px){
  .bookhead{padding:110px 0 32px;}
  .calwrap,.calwrap #cal-embed{min-height:560px;}
}

/* nav: book is the action, so it reads as a button not a link */
.navlinks a.cta{
  border:1px solid var(--red-fill);color:var(--white);background:var(--red-fill);
  padding:0 20px;min-height:44px;display:inline-flex;align-items:center;
  transition:background .18s ease,color .18s ease;
}
.navlinks a.cta:hover,.navlinks a.cta:focus-visible{background:transparent;color:var(--red);}
.navlinks a.cta.now{background:var(--red-fill);color:var(--white);}
.navlinks a.now{color:var(--red);}

/* page intro used by the inner pages */
.pagehead{padding:150px 0 10px;}
.pagehead h1{font-size:clamp(2.1rem,5.4vw,4rem);max-width:17ch;}
.pagehead .lede{color:var(--grey);max-width:58ch;margin:22px 0 0;font-size:1.04rem;}

/* next step block at the foot of every inner page */
.nextup{border-top:1px solid var(--line);padding:56px 0;}
.nextup .row{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;}
.nextup p{margin:0;max-width:46ch;}
.nextup .lbl{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:10px;}

@media (max-width:560px){
  .pagehead{padding:116px 0 6px;}
  .navlinks a.cta{padding:0 14px;}
}

/* single feature clip, replaces the three up reel */
.reelone{margin:56px 0 0;position:relative;overflow:hidden;border:1px solid var(--line);background:var(--concrete);}
.reelone video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;filter:saturate(1.05);}
.reelone figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:44px 22px 16px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--white);
  background:linear-gradient(to top,rgba(0,0,0,.86),rgba(0,0,0,0));
}

/* about page header, portrait sits beside the intro */
.abouthead{padding:150px 0 0;}
.abouthead .cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px;align-items:end;}
.abouthead h1{font-size:clamp(2rem,4.8vw,3.5rem);max-width:16ch;}
.abouthead .lede{color:var(--grey);max-width:52ch;margin:22px 0 0;font-size:1.04rem;}
.portrait{margin:0;position:relative;border:1px solid var(--line);overflow:hidden;}
.portrait img{width:100%;height:auto;display:block;}
.portrait::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red);
}
@media (max-width:820px){
  .abouthead .cols{grid-template-columns:minmax(0,1fr);gap:34px;}
  .portrait{max-width:340px;}
}
@media (max-width:560px){
  .abouthead{padding:116px 0 0;}
}

/* ============ support clip mosaic ============
   Six tiles on a twelve column grid with uneven spans and small vertical
   offsets. Ordered enough to read as a grid, uneven enough not to look
   like a stock gallery. All muted, all looping, nothing to press. */

.played{padding:104px 0;background:var(--concrete);border-top:1px solid var(--line);}
.played .intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;margin-bottom:48px;}
.played h2{max-width:16ch;}

.mosaic{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
  align-items:start;
}
.mosaic figure{
  margin:0;position:relative;overflow:hidden;
  border:1px solid var(--line);background:var(--void);
}
.mosaic video,.mosaic img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.mosaic figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}

/* the uneven bit. spans and offsets are fixed, not random, so it holds
   its shape at every width instead of reflowing into a mess. */
.mosaic .t1{grid-column:span 5;aspect-ratio:4/3;}
.mosaic .t2{grid-column:span 3;aspect-ratio:3/4;margin-top:34px;}
.mosaic .t3{grid-column:span 4;aspect-ratio:1/1;}
.mosaic .t4{grid-column:span 4;aspect-ratio:4/3;margin-top:-18px;}
.mosaic .t5{grid-column:span 3;aspect-ratio:3/4;margin-top:26px;}
.mosaic .t6{grid-column:span 5;aspect-ratio:16/10;}

.playednote{margin-top:34px;font-size:.9rem;color:var(--dim);max-width:58ch;}

@media (max-width:900px){
  .played .intro{grid-template-columns:minmax(0,1fr);gap:26px;}
  .mosaic{grid-template-columns:repeat(6,1fr);gap:10px;}
  .mosaic .t1{grid-column:span 4;}
  .mosaic .t2{grid-column:span 2;margin-top:22px;}
  .mosaic .t3{grid-column:span 3;}
  .mosaic .t4{grid-column:span 3;margin-top:-10px;}
  .mosaic .t5{grid-column:span 2;margin-top:16px;}
  .mosaic .t6{grid-column:span 4;}
}
@media (max-width:560px){
  .played{padding:74px 0;}
  .mosaic{grid-template-columns:repeat(4,1fr);gap:8px;}
  .mosaic .t1{grid-column:span 4;}
  .mosaic .t2{grid-column:span 2;margin-top:0;}
  .mosaic .t3{grid-column:span 2;}
  .mosaic .t4{grid-column:span 4;margin-top:0;}
  .mosaic .t5{grid-column:span 2;margin-top:0;}
  .mosaic .t6{grid-column:span 2;aspect-ratio:3/4;}
}

/* ============ pricing hierarchy ============ */
.rate.lead{position:relative;}
.rate .flagpill{
  position:absolute;top:-11px;left:24px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  background:var(--red-fill);color:var(--white);padding:3px 9px;
}

/* ============ homepage about teaser ============ */
.teaser{padding:104px 0;}
.teaser .cols{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center;}
.teaser .shot{margin:0;border:1px solid var(--line);overflow:hidden;position:relative;}
.teaser .shot img{width:100%;height:auto;display:block;}
.teaser .shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red);}
@media (max-width:820px){
  .teaser .cols{grid-template-columns:minmax(0,1fr);gap:32px;}
  .teaser .shot{max-width:320px;}
}

/* ============ sticky mobile booking bar ============ */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  background:rgba(0,0,0,.94);border-top:1px solid var(--line);
  padding:10px 16px;
  transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.stickybar[data-show="true"]{transform:translateY(0);}
.stickybar .in{display:flex;align-items:center;gap:14px;justify-content:space-between;}
.stickybar .lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);line-height:1.3;}
.stickybar .lbl b{display:block;color:var(--white);font-weight:500;}
.stickybar .btn{min-height:46px;padding:0 20px;font-size:.74rem;flex:none;}
@media (max-width:820px){
  .stickybar{display:block;}
  body{padding-bottom:0;}
}
@media (prefers-reduced-motion:reduce){
  .stickybar{transition:none;}
  .rail{scroll-behavior:auto;}
}

/* ============ film fallback ============
   If autoplay is refused, which happens on iOS low power mode and inside some
   in app browsers, the video element is removed from view entirely and the
   poster frame becomes the hero background. A visitor never sees a stalled
   video with a play button over it. */
.hero-media[data-film="still"] video,
.finale-media[data-film="still"] video{display:none;}
.hero-media[data-film="still"],
.finale-media[data-film="still"]{
  background-image:var(--still, url("../video/hero-poster-sm.jpg"));
  background-size:cover;
  background-position:center;
}
/* also hide the native controls chrome iOS can inject */
.hero-media video::-webkit-media-controls,
.finale-media video::-webkit-media-controls,
.rail video::-webkit-media-controls{display:none !important;}
.hero-media video::-webkit-media-controls-start-playback-button,
.finale-media video::-webkit-media-controls-start-playback-button,
.rail video::-webkit-media-controls-start-playback-button{display:none !important;-webkit-appearance:none;}

/* sticky bar must not sit on top of the last section */
@media (max-width:820px){
  body[data-bar="true"]{padding-bottom:74px;}
}

/* ============ mobile navigation ============
   Below 620px the inline links were rendering at around 10px, which is under
   any sensible reading size and well under a 44px tap target. They move into a
   proper disclosure menu instead of being shrunk further. */

.menubtn{
  display:none;align-items:center;justify-content:center;gap:6px;
  min-width:52px;min-height:44px;padding:0 12px;
  background:transparent;border:1px solid var(--line);color:var(--white);cursor:pointer;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
}
.menubtn:hover,.menubtn:focus-visible{border-color:var(--red);}
.menubtn i{display:block;width:16px;height:1px;background:currentColor;position:relative;}
.menubtn i::before,.menubtn i::after{content:"";position:absolute;left:0;width:16px;height:1px;background:currentColor;}
.menubtn i::before{top:-5px;} .menubtn i::after{top:5px;}

.menu{
  position:fixed;inset:0;z-index:200;display:none;
  background:var(--void);padding:88px 24px 40px;overflow-y:auto;
}
.menu[data-open="true"]{display:block;}
.menu a{
  display:flex;align-items:center;min-height:60px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:1.6rem;letter-spacing:-.01em;color:var(--white);text-decoration:none;
  border-bottom:1px solid var(--line);
}
.menu a.now{color:var(--red);}
.menu .close{
  position:absolute;top:18px;right:20px;
  min-width:52px;min-height:44px;background:transparent;border:1px solid var(--line);
  color:var(--white);font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;
}
.menu .close:focus-visible{border-color:var(--red);}
.menu .legal{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:32px;}
.menu .legal a{
  font-family:var(--mono);font-size:.8rem;font-weight:400;letter-spacing:.1em;
  color:var(--grey);border:0;min-height:44px;text-transform:none;
}
body[data-menu="open"]{overflow:hidden;}

/* readable minimums on small screens */
@media (max-width:620px){
  .navlinks a:not(.cta){display:none;}
  .menubtn{display:inline-flex;}
  .navlinks{gap:10px;}
  .navlinks a.cta{font-size:.74rem;min-height:44px;padding:0 16px;letter-spacing:.12em;}
  .mark{min-height:44px;}
  .mark img{height:26px;}
  .kicker{font-size:.75rem;}
  .proof .cap,.seqwrap .cap,.railtop .count,.rail figcaption,.soon .tagline,.level .tier{font-size:.72rem;}
  .note,.foot .base{font-size:.75rem;}
  .foot nav a{font-size:.8rem;}
}
@media (max-width:430px){
  .navlinks a.cta{font-size:.72rem;padding:0 14px;}
  .menubtn{min-width:46px;padding:0 10px;font-size:.68rem;}
}
.skip:focus{min-height:44px;display:inline-flex;align-items:center;}

/* ============ mobile reading floor ============
   Nothing below 12px on a phone. Small mono labels are fine on a desktop
   monitor and unreadable in one hand on a train. */
@media (max-width:620px){
  .navlinks a.cta,
  .menubtn,
  .menu .close,
  .stickybar .lbl,
  .rate .per,
  .rate .desc,
  .product .flag,
  .nextup .lbl,
  .soon .tagline,
  .level .tier,
  .pick .d,
  .capture .msg,
  .wall-meta,
  .tzline,
  .mark .wordtype{font-size:.78rem !important;letter-spacing:.1em;}
  .foot .base span{font-size:.76rem;}
  .railnote{font-size:.88rem;}
}
@media (max-width:430px){
  .navlinks a.cta{font-size:.76rem !important;padding:0 13px;}
  .menubtn{font-size:.76rem !important;min-width:44px;padding:0 9px;}
  .menubtn span{display:none;}
}

@media (max-width:620px){
  .proof .cap,.seqwrap .cap,.rail figcaption,.railtop .count{font-size:.78rem !important;}
  .btn{font-size:.82rem !important;}
  .railctl button{font-size:.82rem;min-height:46px;}
  .railctl button[data-sound]{font-size:.76rem;}
  .kicker{font-size:.78rem !important;}
}

@media (max-width:620px){
  .hero .lockup span{font-size:.78rem !important;}
  .rate .flagpill{font-size:.78rem !important;padding:4px 11px;top:-14px;}
}

/* ============ discovery gate ============
   The calendar stays hidden until the three questions are answered, so no
   session is ever walked into cold. Answers are passed straight through to
   the Cal.com booking form rather than being asked for twice. */

.gate{border:1px solid var(--line);background:var(--concrete);padding:34px;margin-bottom:34px;}
.gate .steplabel{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin:0 0 14px;
}
.gate h2{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:12px;}
.gate .why{font-size:.96rem;margin-bottom:30px;max-width:60ch;}

.q{margin-bottom:26px;}
.q label{display:block;font-family:var(--body);font-size:1rem;color:var(--white);margin-bottom:6px;}
.q .hint{display:block;font-size:.86rem;color:var(--dim);margin-bottom:10px;}
.q textarea{
  width:100%;min-height:104px;resize:vertical;
  background:var(--void);border:1px solid var(--line);color:var(--white);
  font-family:var(--body);font-size:.96rem;line-height:1.55;padding:14px 16px;
}
.q textarea::placeholder{color:#5C646B;}
.q textarea:focus{border-color:var(--red);outline:none;}
.q .meter{
  display:flex;justify-content:space-between;gap:12px;margin-top:7px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--dim);
}
.q .meter b{font-weight:500;color:var(--dim);}
.q[data-ok="true"] textarea{border-color:#3A6B4A;}
.q[data-ok="true"] .meter b{color:#7FCF9B;}

.gate .go{margin-top:6px;}
.gate .go .btn[disabled]{opacity:.4;pointer-events:none;}
.gate .gatemsg{
  font-family:var(--mono);font-size:.76rem;color:var(--dim);margin:14px 0 0;letter-spacing:.04em;
}

.gated{display:none;}
.gated[data-open="true"]{display:block;}

.answered{
  border:1px solid var(--line);background:var(--concrete);
  padding:18px 22px;margin-bottom:26px;
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
}
.answered p{margin:0;font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);}
.answered p b{color:var(--white);font-weight:500;}
.answered button{
  background:transparent;border:1px solid var(--line);color:var(--grey);cursor:pointer;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  padding:0 16px;min-height:44px;transition:border-color .2s ease,color .2s ease;
}
.answered button:hover,.answered button:focus-visible{border-color:var(--red);color:var(--red);}

@media (max-width:560px){
  .gate{padding:24px 20px;}
  .q textarea{min-height:120px;}
}

/* gate: name and email sit side by side, honeypot stays out of sight */
.q2col{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;}
.q input[type="text"],.q input[type="email"]{
  width:100%;background:var(--void);border:1px solid var(--line);color:var(--white);
  font-family:var(--body);font-size:.96rem;padding:0 16px;min-height:52px;
}
.q input::placeholder{color:#5C646B;}
.q input:focus{border-color:var(--red);outline:none;}
.q[data-ok="true"] input{border-color:#3A6B4A;}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden;}
@media (max-width:560px){ .q2col{grid-template-columns:1fr;} }

/* ============ the fork ============
   Two ways in, stated once, near the top. Everything downstream is
   detail on one of these two paths. */
.fork{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px;}
.fork article{
  border:1px solid var(--line);background:var(--void);padding:34px 30px;
  display:flex;flex-direction:column;gap:14px;position:relative;
  transition:border-color .25s ease,transform .25s ease;
}
.fork article:hover{border-color:var(--red);transform:translateY(-3px);}
.fork .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin:0;}
.fork h3{font-size:clamp(1.3rem,2.6vw,1.8rem);text-transform:uppercase;letter-spacing:-.01em;margin:0;}
.fork p{font-size:.96rem;margin:0;}
.fork .from{font-family:var(--mono);font-size:.8rem;color:var(--dim);margin:0;}
.fork .from b{color:var(--white);font-weight:500;}
.fork .btn{margin-top:6px;align-self:flex-start;}
@media (max-width:760px){ .fork{grid-template-columns:1fr;} }

/* ============ enquiry forms ============ */
.enq{border:1px solid var(--line);background:var(--concrete);padding:34px;}
.enq h3{font-size:clamp(1.2rem,2.4vw,1.6rem);margin-bottom:10px;}
.enq .why{font-size:.94rem;margin-bottom:26px;max-width:58ch;}
.enq .row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;}
.enq .f{margin-bottom:22px;}
.enq label{display:block;font-size:.96rem;color:var(--white);margin-bottom:8px;}
.enq .hint{display:block;font-size:.84rem;color:var(--dim);margin:-4px 0 10px;}
.enq input,.enq textarea,.enq select{
  width:100%;background:var(--void);border:1px solid var(--line);color:var(--white);
  font-family:var(--body);font-size:.96rem;padding:0 16px;min-height:52px;
}
.enq textarea{min-height:110px;padding:14px 16px;line-height:1.55;resize:vertical;}
.enq select{appearance:none;padding-right:44px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--grey) 50%),linear-gradient(135deg,var(--grey) 50%,transparent 50%);
  background-position:calc(100% - 22px) 24px,calc(100% - 16px) 24px;background-size:6px 6px;background-repeat:no-repeat;}
.enq input::placeholder,.enq textarea::placeholder{color:#5C646B;}
.enq input:focus,.enq textarea:focus,.enq select:focus{border-color:var(--red);outline:none;}
.enq .enqmsg{font-family:var(--mono);font-size:.78rem;color:var(--dim);margin:14px 0 0;letter-spacing:.04em;min-height:1.2em;}
.enq[data-sent="true"] form{display:none;}
.enq .done{display:none;}
.enq[data-sent="true"] .done{display:block;}
.enq .done h3{color:var(--red);}
@media (max-width:560px){ .enq{padding:24px 20px;} .enq .row{grid-template-columns:1fr;} }

/* pricing group headings, so it is obvious which column is which */
.grouphead{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:1.35rem;letter-spacing:-.01em;color:var(--white);
  margin:0 0 22px;padding-bottom:14px;border-bottom:2px solid var(--red);
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.grouphead span{
  font-family:var(--mono);font-weight:400;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);
}

/* ============ founding rate markers ============
   Honest scarcity only. The anchor is the future price, which Dan controls
   and can honour, not an invented past price he never charged. */

.foundtag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);border:1px solid var(--red);padding:5px 10px;
  margin-bottom:16px;
}
.foundtag i{width:6px;height:6px;background:var(--red);flex:none;font-style:normal;}

.foundnote{
  border-left:2px solid var(--red);padding:14px 0 14px 18px;margin-top:26px;
  font-size:.92rem;color:var(--grey);
}
.foundnote b{color:var(--white);font-weight:500;}

.rate .later{
  grid-column:2/3;font-family:var(--mono);font-size:.68rem;
  color:var(--dim);text-align:right;white-space:nowrap;letter-spacing:.04em;
}

.seatline{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-top:20px;
}
.seatline b{color:var(--red);font-weight:500;}
.seatbar{flex:1 1 120px;height:4px;background:var(--line);min-width:100px;position:relative;overflow:hidden;}
.seatbar i{position:absolute;left:0;top:0;bottom:0;background:var(--red);width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1);}
.seatbar.filled i{width:var(--fill,15%);}

/* ============ loudness explainer ============ */
.loud{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;}
.loudpoints{list-style:none;margin:0;padding:0;}
.loudpoints li{
  padding:22px 0 22px 0;border-top:1px solid var(--line);
}
.loudpoints li:first-child{border-top:0;padding-top:0;}
.loudpoints h3{font-size:1.05rem;margin:0 0 8px;}
.loudpoints p{font-size:.94rem;margin:0;}

/* two rows of bars showing a quiet master losing to a loud one in a DJ mix */
.meters{margin-top:8px;}
.meterrow{margin-bottom:26px;}
.meterrow .lab{
  display:flex;justify-content:space-between;gap:14px;margin-bottom:9px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.meterrow .lab b{color:var(--white);font-weight:500;}
.meterbar{display:flex;gap:3px;height:44px;align-items:flex-end;}
.meterbar i{flex:1;background:var(--line);transition:height .5s cubic-bezier(.2,.8,.2,1);height:12%;}
.meterrow.weak i{background:var(--steel);}
.meterrow.strong i{background:var(--red-deep);}
.meterrow.strong i.pk{background:var(--red);}
.meternote{font-size:.88rem;color:var(--dim);margin:0;}

@media (max-width:900px){ .loud{grid-template-columns:minmax(0,1fr);gap:34px;} }

/* ============ consultation steps ============ */
.consult{counter-reset:cs;list-style:none;margin:0;padding:0;}
.consult li{
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:20px;
  padding:24px 0;border-top:1px solid var(--line);
}
.consult li:first-child{border-top:0;padding-top:0;}
.consult .n{font-family:var(--mono);font-size:.78rem;color:var(--red);padding-top:4px;letter-spacing:.08em;}
.consult h3{font-size:1.05rem;margin:0 0 8px;}
.consult p{font-size:.94rem;margin:0;}
.consult .free{
  display:inline-block;margin-top:9px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);border:1px solid var(--red);padding:4px 9px;
}

/* guide pricing, since a quote follows the listen */
.guide{border:1px solid var(--line);background:var(--void);padding:28px 30px;}
.guide .grow{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;
  padding:18px 0;border-top:1px solid var(--line);align-items:baseline;
}
.guide .grow:first-of-type{border-top:0;padding-top:0;}
.guide .gname{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.1rem;color:var(--white);}
.guide .gprice{font-family:var(--mono);font-size:1.05rem;color:var(--red);white-space:nowrap;}
.guide .gdesc{grid-column:1/3;font-size:.9rem;color:var(--grey);margin:0;}
.guide .foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:.9rem;color:var(--dim);}
@media (max-width:560px){ .guide{padding:22px 20px;} }