/* THE TURN v2 (1 Nov 2026, late): the dark studio. Scoped to .tn2 so v1 (?turn=1, turn.css) and the v3 fallback keep their own look.
   The section is six screens tall; the host sticks while the camera cuts between close and wide.
   First paint: the dark set and the HTML headline. When the stage is up (.tn-gl) the same words live in the back wall of the
   3D studio, so the HTML copy turns transparent but stays in place for search, screen readers and text selection. */
.tn2{height:calc(var(--wh,100svh) * 6)}
.tn2 .fr-host{background:#0A0B0D radial-gradient(ellipse 80% 70% at 50% 50%,#1B1A19,#0A0B0D 100%);background-image:radial-gradient(ellipse 80% 70% at 50% 50%,#1B1A19,#0A0B0D 100%)}
.tn2 .fr95-hud,.tn2 .fr95-head,html[data-theme=dark] .tn2 .fr95-hud,html[data-theme=dark] .tn2 .fr95-head{color:#F2F0EF}
.tn2 .fr95-hud{--fr95-act:#A2CFE7;--fr95-act-ink:#0A0B0D}
.tn2 .fr95-head::before{content:none}
.tn2 .fr95-head{top:50%;transform:translateY(-54%);opacity:1}
.tn2 .fr95-h1{font-size:min(9.4vw,20vh);line-height:.9;letter-spacing:-.02em;transition:color .5s}
.tn2 .tn-gl .fr95-h1{color:transparent}
.tn2 .tn2-sub{font:500 clamp(15px,1.2vw,20px)/1.4 Switzer,system-ui,sans-serif;letter-spacing:0;text-transform:none;margin:clamp(18px,3vh,34px) 0 0;
  opacity:var(--tn-sub,1);transform:translateY(calc((1 - var(--tn-sub,1)) * -18px));text-shadow:0 1px 18px rgb(10 11 13 / .6)}
.tn2 .tn-label{color:#F2F0EF;background:rgb(27 26 25 / .55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgb(242 240 239 / .14)}
@media (max-width:699px){
  .tn2 .fr95-head{transform:translateY(-62%)}
  .tn2 .fr95-h1{font-size:min(15.5vw,64px)}
  .tn2 .tn2-sub{font-size:15px;max-width:22ch;margin-left:auto;margin-right:auto}}
@media (prefers-reduced-motion:reduce){.tn2{height:auto}.tn2 .fr95-h1{transition:none}}
/* 2 Nov (Jacob 8:14 AM, "the logo can animate to the next with a button"): the NEXT pill sits beside the counter, above it on
   phones. A hairline pill, never the Ice fill (the Ice filled pill means Book a call). The tip follows the cursor over the M. */
.tn2 .tn-bar{position:absolute;z-index:3;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:10px;opacity:var(--tn-head,1)}
.tn2 .tn-bar .tn-label{position:static;transform:none;opacity:1}
.tn2 .tn-next{display:inline-flex;align-items:center;height:34px;padding:0 16px;margin:0;border-radius:999px;border:1px solid rgb(242 240 239 / .42);
  background:rgb(10 11 13 / .3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#F2F0EF;
  font:500 12px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;cursor:pointer;
  transition:border-color .2s,opacity .3s}
.tn2 .tn-next:empty{display:none}
.tn2 .tn-next:hover{border-color:rgb(242 240 239 / .85)}
.tn2 .tn-next:focus-visible{outline:1px solid #A2CFE7;outline-offset:3px}
.tn2 .tn-next[aria-disabled=true]{opacity:.5;cursor:progress}
.tn2 .tn-tip{position:absolute;z-index:4;left:0;top:0;pointer-events:none;padding:7px 11px;border-radius:999px;border:1px solid rgb(242 240 239 / .5);
  background:rgb(10 11 13 / .35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#F2F0EF;
  font:500 11px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .18s}
.tn2 .tn-tip.on{opacity:1}
.tn2.tn-hot .fr-host,.tn2.tn-hot .fr95-head,.tn2.tn-hot .fr95-head *{cursor:pointer}
@media (max-width:699px){
  .tn2 .tn-bar{flex-direction:column-reverse;gap:8px}
  .tn2 .tn-next{height:44px;padding:0 20px}}