/* About: the dark room. Same page shell, the figures and instruments from the homepage. */
body.inner .scene{z-index:-1}
body.inner main{z-index:auto}
body.inner .nav ul a{color:#fff;opacity:.9}body.inner .nav ul a:hover{opacity:1}
body.inner .btn.dark{background:var(--mint);border-color:var(--mint);color:#000}
body.inner .btn.dark:hover{background:#fff;border-color:#fff;color:#000}
body.inner .btn.ghost.dark{background:transparent;color:var(--mint);border-color:var(--mint)}
body.inner .btn.ghost.dark:hover{background:var(--mint);color:#000}
body.inner .blk .in{max-width:none}

/* ---- get in touch, centred ---- */
body.inner .touch .in{text-align:center}
body.inner .touch p{margin-left:auto;margin-right:auto}
body.inner .touch .btns{justify-content:center}

/* ---- hero: name in the middle, Carly left, Jack right ---- */
.ahero{position:relative;min-height:72vh;padding:calc(var(--navh) + 8vh) var(--gut) 8vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.ahero .in{position:relative;z-index:3;max-width:min(52vw,760px);margin:0 auto}
.ahero h1{font-size:clamp(46px,7vw,124px)}
.ahero .lead{font-size:15px;line-height:2.05;max-width:56ch;margin:26px auto 0}
.ahero .btns{margin-top:4vh;justify-content:center}
.ahero .fig{position:absolute;z-index:1;pointer-events:none;mix-blend-mode:screen}
.ahero .fig video{height:100%;width:auto;display:block}
.ahero .fig.carly{left:2vw;top:12vh;height:min(70vh,26vw)}
.ahero .fig.jack{right:2vw;bottom:-8vh;height:min(84vh,32vw)}
.ahero .hov{position:absolute;z-index:4}
.ahero .hov[data-who="Carly"]{left:2vw;top:12vh;height:min(70vh,26vw);width:calc(min(70vh,26vw) * .556)}
.ahero .hov[data-who="Jack"]{right:2vw;bottom:0;height:min(76vh,29vw);width:calc(min(84vh,32vw) * .535)}
/* gauges band */
.gband{padding:5vh var(--gut) 6vh;border-top:1px solid #1a1a1a}
.gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:4vw;max-width:720px;margin:0 auto;text-align:center}
.gauges svg{width:min(100%,170px);height:auto;display:block;overflow:visible;margin:0 auto 8px}
.gauges svg *{fill:none;stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round}
.gauges svg .mint{stroke:#FF6F52;stroke-width:1.6}
.gauges svg .fill{fill:#fff;stroke:none}
.gauges svg .nd,.gauges svg .nd2{transform-origin:60px 70px;transform:rotate(-90deg)}
.gauges b{display:block;font-family:var(--label);font-variation-settings:'wdth' 150;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8a8a8a;font-weight:400}
.gauges span{display:block;font-family:var(--disp);font-variation-settings:'wdth' 100;text-transform:uppercase;font-size:clamp(18px,1.6vw,26px);color:#fff;line-height:1.1;margin-top:2px}
/* x-ray */
#xray{position:absolute;z-index:5;width:min(22vw,300px);aspect-ratio:1;pointer-events:none;opacity:0;transform:translate(-50%,-50%)}
#xrayInv{position:absolute;z-index:3;width:min(22vw,300px);aspect-ratio:1;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;opacity:0;transform:translate(-50%,-50%)}
#xray svg{position:absolute;inset:-6%;width:112%;height:112%;overflow:visible}
#xray svg *{fill:none;stroke:#FF6F52;stroke-width:1;vector-effect:non-scaling-stroke}
#xray .ring{stroke-dasharray:4 7;transform-origin:50% 50%;animation:turn 16s linear infinite}
#xray .ring2{stroke-opacity:.5;transform-origin:50% 50%;animation:turn 10s linear infinite reverse}
#xray .scan{stroke-opacity:.8;animation:xscan 2.2s ease-in-out infinite alternate}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes xscan{from{transform:translateY(-38%)}to{transform:translateY(38%)}}
#xray .lbl{position:absolute;left:104%;top:50%;transform:translateY(-50%);display:block;white-space:nowrap;background:#FF6F52;color:#161616;padding:12px 16px 13px;box-shadow:0 12px 34px rgba(0,0,0,.38);font-family:var(--label);font-variation-settings:'wdth' 150;font-size:10px;letter-spacing:.2em;text-transform:uppercase}
#xray .lbl b{display:block;font-weight:400}
#xray .lbl small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:none;color:rgba(22,22,22,.8);margin-top:5px}
#xray .lbl .vit{display:block;position:static;inset:auto;margin-top:9px;width:110px;height:18px;overflow:visible}
#xray .lbl .vit *{stroke:#161616;stroke-width:1.4;fill:none}
#xray.flip .lbl{left:auto;right:104%;text-align:right}
#xray.flip .lbl .vit{margin-left:auto}

/* ---- section heads ---- */
.head2{display:flex;align-items:flex-end;justify-content:space-between;gap:4vw;margin-bottom:5vh}
.head2 h2{margin:0}.head2 p{margin:0 0 6px;max-width:38ch;font-size:12px;color:#8a8a8a}
.blk{padding:10vh var(--gut)}

/* ---- profiles ---- */
.profiles{display:grid;grid-template-columns:1fr 1fr;gap:3vw}
.prof{position:relative;display:grid;grid-template-columns:clamp(150px,15vw,240px) 1fr;gap:2.4vw;align-items:start;padding:3vw;border:1px solid #2b2b2b;background:rgba(0,0,0,.55);transition:border-color .5s,background .5s;overflow:hidden}
.prof:hover{border-color:#6a6a6a;background:rgba(0,0,0,.8)}
.prof .inst{position:relative;width:100%;aspect-ratio:1}
.prof .inst svg{width:100%;height:100%;display:block;overflow:visible}
.hs *{fill:none;stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round}
.hs .fill{fill:#fff;stroke:none}.hs .mintLn{stroke:#FF6F52;stroke-width:1.4}
.hs .spin{animation:turn 90s linear infinite}.hs .spinBack{animation:turn 60s linear infinite reverse}.hs .spinSlow{animation:turn 120s linear infinite}
.prof:hover .hs .spin{animation-duration:14s}.prof:hover .hs .spinBack{animation-duration:9s}
.prof h3{font-size:clamp(26px,2.6vw,42px)}
.prof .role{display:block;font-family:var(--label);font-variation-settings:'wdth' 150;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8a8a8a;margin:6px 0 18px}
.prof p{font-size:12.5px;line-height:1.95;margin:0 0 18px}
.does{list-style:none;margin:0;padding:0;border-top:1px solid #2b2b2b}
.does li{padding:9px 0;border-bottom:1px solid #232323;font-family:var(--mono);font-size:11px;letter-spacing:.06em;display:flex;align-items:center;gap:12px;color:#fff}
.does li::before{content:'';width:18px;height:1px;background:#fff;transition:width .4s,background .4s}
.prof:hover .does li::before{width:30px;background:#FF6F52}

/* ---- the track ---- */
.track.dark{background:#0a0a0a;color:#fff;border-top:1px solid #2b2b2b;border-bottom:1px solid #2b2b2b;position:relative;overflow:hidden}
.track.dark::before{content:'';position:absolute;inset:0;background:url('../assets/bg/lift-steel.webp') center/calc(100vw / 6) calc(100vw / 6) repeat;opacity:.22}
.track.dark::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.9),rgba(10,10,10,.5) 50%,rgba(10,10,10,.9))}
.track .in{position:relative;z-index:1}
.track.dark h2{color:#fff}.track p{color:#9a9a9a}.track .head2 p{color:#7a7a7a}
.track .line{position:relative;height:1px;margin:0 0 36px}
.track .rail{position:absolute;inset:0;background:#3a3a3a}
.track .lit{position:absolute;left:0;top:0;height:1px;width:0;background:#FF6F52;box-shadow:0 0 12px rgba(255,111,82,.6)}
.track .car{position:absolute;left:0;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border:1px solid #FF6F52;border-radius:50%;background:#0a0a0a}
.track .car i{position:absolute;inset:4px;border-radius:50%;background:#FF6F52}
.track .car::before{content:'';position:absolute;inset:-8px;border-radius:50%;border:1px dashed rgba(255,111,82,.45);animation:turn 12s linear infinite}
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:1.6vw}
.st{position:relative;padding-top:18px}
.st .pin{position:absolute;left:0;top:-36px;width:1px;height:30px;background:#3a3a3a;transition:background .4s}
.st::before{content:'';position:absolute;left:-3px;top:-40px;width:7px;height:7px;border-radius:50%;border:1px solid #3a3a3a;background:#0a0a0a;transition:border-color .4s,background .4s}
.st h3{color:#5a5a5a;font-size:clamp(17px,1.4vw,22px);transition:color .4s}
.st p{font-size:11.5px;line-height:1.85;color:#5a5a5a;transition:color .4s}
.st.on .pin{background:#FF6F52}.st.on::before{border-color:#FF6F52;background:#FF6F52}.st.on h3{color:#fff}.st.on p{color:#9a9a9a}

/* ---- why ---- */
.whys{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.why{border:1px solid #2b2b2b;background:rgba(0,0,0,.55);padding:28px;min-height:220px;display:flex;flex-direction:column;transition:border-color .4s,background .4s}
.why:hover{border-color:#6a6a6a;background:rgba(0,0,0,.8)}
.why .ic{display:block;width:44px;height:44px;margin-bottom:18px}
.why .ic svg{width:100%;height:100%;display:block;overflow:visible}
.why .ic svg *{fill:none;stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.why h3{font-size:clamp(19px,1.7vw,26px)}
.why p{font-size:12px;line-height:1.9;margin:0}

/* ---- ruler ---- */
.rl{position:relative;height:110px;border-bottom:1px solid #fff;margin:2vh 0 34px}
.rl .ticks{position:absolute;left:0;right:0;bottom:0;height:100%}
.rl .t{position:absolute;bottom:0;width:1px;height:14px;background:#fff}
.rl .t.y{height:30px}
.rl .t.y b{position:absolute;left:0;top:calc(100% + 10px);transform:translateX(-50%);font-family:var(--label);font-variation-settings:'wdth' 150;font-size:10px;letter-spacing:.14em;color:#8a8a8a;font-weight:400;white-space:nowrap}
.rl .needle{position:absolute;bottom:0;left:0;width:1px;height:110px;background:#FF6F52;box-shadow:0 0 10px rgba(255,111,82,.7)}
.rl .needle::after{content:'';position:absolute;left:-4px;bottom:-5px;width:9px;height:9px;border-radius:50%;background:#FF6F52}
.rl .needle b{position:absolute;left:14px;top:-6px;font-family:var(--disp);font-variation-settings:'wdth' 100;font-weight:400;font-size:clamp(28px,3vw,48px);line-height:1;color:#fff;white-space:nowrap}
.rl .needle small{position:absolute;left:14px;top:calc(clamp(28px,3vw,48px) + 2px);font-family:var(--label);font-variation-settings:'wdth' 150;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8a8a8a;white-space:nowrap}
.rl .needle.flip b,.rl .needle.flip small{left:auto;right:14px;text-align:right}


@media (max-width:1100px){.steps{grid-template-columns:repeat(3,1fr);row-gap:40px}.st{padding-top:0}.st .pin,.st::before,.track .line{display:none}}
@media (max-width:900px){
  .ahero{min-height:0;padding-top:calc(var(--navh) + 8vh);padding-bottom:8vh}
  .ahero .in{max-width:none}
  .ahero .fig,.ahero .hov,#xray,#xrayInv{display:none}
  .gauges{gap:3vw}.gauges span{font-size:16px}
  .head2{flex-direction:column;align-items:flex-start}
  .profiles,.whys{grid-template-columns:1fr}
  .prof{grid-template-columns:1fr;padding:6vw}.prof .inst{width:48vw;margin:0 auto}
  .steps{grid-template-columns:1fr;row-gap:24px}
  .rl{height:90px}.rl .needle{height:90px}
  .why{min-height:0}
}
/* plain hero: no figures, short, for support and the legal pages */
.ahero.plain{min-height:0;padding:calc(var(--navh) + 9vh) var(--gut) 5vh;text-align:left;align-items:flex-start}
.ahero.plain .in{margin:0;max-width:none;width:100%;align-self:stretch}
.ahero.plain h1{font-size:clamp(40px,5.6vw,92px)}
.ahero.plain .lead{font-size:15px;margin-left:0;max-width:62ch}
/* one-section pages: the scene shows through more */
body.inner .scene{opacity:.8}
body.one .scene::after{background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.45) 40%,rgba(0,0,0,.55) 100%)}
.blk.one{min-height:100vh;padding-top:calc(var(--navh) + 8vh);position:relative}
.blk.one .head2{margin-bottom:5vh}
.blk.one .head2 h1{font-size:clamp(40px,5.6vw,92px);margin:0}
.blk.one .head2 p{max-width:44ch}