/* Ardoven Digital. Plain CSS, no build step. */

/* 1. Fonts */
@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/BricolageGrotesque-latin.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/BricolageGrotesque-latin-ext.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/HankenGrotesk-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/HankenGrotesk-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica Neue"),local("Helvetica");ascent-override:93%;descent-override:27%;line-gap-override:0%;size-adjust:102%}
@font-face{font-family:"Hanken Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica Neue"),local("Helvetica");ascent-override:100%;descent-override:30.3%;line-gap-override:0%;size-adjust:99%}

/* 2. Tokens */
:root{
  --graphite:#16151A;--surface:#1D1C23;--ink:#EDE7E0;--muted:#9A938C;
  --ember:#E2631C;--ember-b:#FF7F3D;--on-ember:#140F0A;
  --paper:#F7F4F0;--paper-ink:#16151A;--paper-muted:#6B645E;--paper-accent:#B04A10;
  --hair:rgba(237,231,224,.13);--hair-strong:rgba(237,231,224,.4);--paper-hair:rgba(22,21,26,.12);
  --pad:clamp(20px,5vw,120px);--max:1680px;--gut:clamp(16px,2vw,32px);
  --block:clamp(88px,9vw,152px);--inner:clamp(28px,3vw,48px);
  --r:4px;--bar:64px;--dock:calc(48px + 20px + 1px);
  --f-head:"Bricolage Grotesque","Bricolage Fallback",Arial,sans-serif;
  --f-text:"Hanken Grotesk","Hanken Fallback",Arial,sans-serif;
  --s-display:min(calc(1.6rem + 4.6vw),calc(8vh + 1rem),100px);
  --s-signage:clamp(64px,calc(5vw + 1rem),120px);
  --s-h2:clamp(32px,calc(2.2vw + 1rem),56px);
  --s-large:clamp(24px,calc(1.2vw + .75rem),32px);
  --s-number:34px;--s-body:18px;--s-nav:16px;--s-small:15px;
}
@media (min-width:390px){:root{--s-number:40px}}
@media (min-width:1024px){:root{--s-number:clamp(40px,calc(40px + (100vw - 1024px) / 32),53px)}}
@media (min-width:1440px){:root{--s-number:clamp(53px,calc(53px + (100vw - 1440px) / 43.6),64px)}}
@media (min-width:1920px){:root{--s-number:64px}}

/* 3. Base */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--graphite);color:var(--ink);font:400 var(--s-body)/1.5 var(--f-text);-webkit-text-size-adjust:100%;hyphens:none;-webkit-hyphens:none;scroll-padding-top:calc(var(--bar) + var(--inner))}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;min-height:100vh;padding-top:var(--bar);background:var(--graphite);color:var(--ink)}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--ember-b);text-decoration-color:rgba(255,127,61,.45);text-underline-offset:.14em;transition:color 150ms,text-decoration-color 150ms,background-color 150ms}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--ember-b);outline-offset:3px;border-radius:2px}
svg{display:inline-block}
.wrap{width:min(var(--max),100% - 2*var(--pad));margin-inline:auto}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.lede{font-size:var(--s-body);color:var(--ink);max-width:34rem}
h2{font:600 var(--s-h2)/1.08 var(--f-head);text-wrap:balance;letter-spacing:-.01em}
p,li,dd{text-wrap:pretty}
.small{font-size:var(--s-small);line-height:1.45;color:var(--muted)}
.tab{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:var(--pad);top:-100px;z-index:100;padding:10px 14px;background:var(--ember);color:var(--on-ember);border-radius:var(--r);font:500 var(--s-nav)/1 var(--f-text);text-decoration:none}
.skip:focus{top:calc(var(--bar) + 12px)}
.block{margin-top:var(--block)}

/* The ring mark: the dot and two arcs. */
.mark{width:1em;height:1em;color:var(--ember);flex:none}
.mark .arc{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-dasharray:40;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  a[href^="tel:"]:hover .mark .arc,a[href^="tel:"]:focus-visible .mark .arc{animation:arc-draw 420ms cubic-bezier(.3,.6,.3,1) both}
  a[href^="tel:"]:hover .mark .a2,a[href^="tel:"]:focus-visible .mark .a2{animation-delay:70ms}
}
@keyframes arc-draw{from{stroke-dashoffset:40}to{stroke-dashoffset:0}}

/* 4. Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:var(--r);background:var(--ember);color:var(--on-ember);font:500 var(--s-nav)/1.2 var(--f-text);text-decoration:none;text-align:center;transition:background-color 150ms}
.btn:hover{background:var(--ember-b);color:var(--on-ember)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair-strong)}
.btn-ghost:hover{background:rgba(237,231,224,.06);color:var(--ink)}

/* 5. Top bar */
.bar{position:fixed;top:0;left:0;right:0;height:var(--bar);background:var(--surface);border-bottom:1px solid var(--hair);z-index:50}
.bar-in{height:100%;display:flex;align-items:center;gap:var(--gut)}
.wordmark{display:inline-flex;align-items:baseline;gap:3px;min-height:44px;padding-top:11px;color:var(--ink);text-decoration:none;font:700 22px/1 var(--f-head);letter-spacing:-.01em}
.wordmark .mark{width:17px;height:17px;margin-left:-5.5px;transform:translateY(7px)}
.bar-nav{display:flex;gap:30px;margin-inline:auto}
.bar-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none;font:500 var(--s-nav)/1 var(--f-text);transition:color 150ms}
.bar-nav a:hover{color:var(--ember-b)}
.bar-nav a::before{content:"";position:absolute;left:0;bottom:-10px;width:2px;height:10px;background:var(--ember);opacity:0;transition:opacity 150ms}
.bar-nav a[aria-current]::before{opacity:1}
.bar-act{display:flex;align-items:center;gap:22px}
.bar-call{display:inline-flex;align-items:center;gap:9px;min-height:44px;color:var(--ink);text-decoration:none;font:500 var(--s-nav)/1 var(--f-text)}
.bar-call .num{font:700 var(--s-body)/1 var(--f-head);font-variant-numeric:tabular-nums;color:var(--ember-b)}
.bar-call .mark{width:14px;height:14px}
.bar-call:hover{color:var(--ember-b)}
@media (min-width:1024px){.bar-in{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr)}.wordmark{justify-self:start}.bar-nav{margin:0;justify-self:center}.bar-act{justify-self:end}}
@media (min-width:1024px) and (max-width:1365px){.bar-nav{gap:22px}.bar-act{gap:16px}.btn-bar{padding:0 16px}}
@media (min-width:1366px) and (max-width:1439px){.bar-nav{gap:24px}.bar-act{gap:16px}}
@media (max-width:1023px){.bar-nav,.bar-call{display:none}.bar-act{margin-left:auto}.btn-bar{min-height:40px;padding:0 16px}}

/* 6. Bottom bar on phones */
.dock{display:none}
@media (max-width:1023px){
  .dock{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--hair)}
  body{padding-bottom:calc(var(--dock) + env(safe-area-inset-bottom))}
  html{scroll-padding-bottom:calc(var(--dock) + 16px)}
}
@media (max-width:389px){.dock{gap:8px}.dock .btn{padding:0 10px;font-size:var(--s-small)}}

/* 7. Hero */
.hero{
  position:relative;display:grid;grid-template-columns:100%;grid-template-rows:1fr auto;
  min-height:calc(100vh - var(--bar));min-height:calc(100svh - var(--bar));overflow:hidden;
  --ph-w:clamp(190px,min(29vh,22vw),380px);--ph-h:calc(var(--ph-w) * 2.06);--ph-r:calc(var(--ph-w) * .12);
  --ph-x:calc(min(22vw,var(--max) / 4) + max(0px,(1440px - 100vw) * .1));--ph-y:0px;--wave-max:2.5;
  /* camera, start of the take (low, close, almost edge on) */
  --rx0:0px;--ry0:12vh;--rz0:260px;--cx0:82deg;--cz0:-30deg;
  /* camera, resting frame (reading height, turned to face the phone) */
  --rx1:0px;--ry1:-2vh;--rz1:0px;--cx1:38deg;--cz1:-8deg;
  --pe-rest:.1;--pp-rest:1;--miss-shift:-62%;
}
.scene{grid-area:1/1/3/2;position:relative;perspective:1300px;perspective-origin:66% 44%;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 60% 64% at 66% 50%,#000 38%,transparent 100%),linear-gradient(to right,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 5%,#000 93%,transparent 100%);-webkit-mask-composite:source-in;mask-image:radial-gradient(ellipse 60% 64% at 66% 50%,#000 38%,transparent 100%),linear-gradient(to right,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 5%,#000 93%,transparent 100%);mask-composite:intersect}
.hero-words{grid-area:1/1/2/2;position:relative;z-index:1;align-self:center;padding-block:var(--inner)}
.hero-words > *{grid-column:1/7}
.hero h1{font:700 var(--s-display)/.98 var(--f-head);letter-spacing:-.025em;text-wrap:balance}
.hero .lede{max-width:34rem;margin-top:1rem;text-wrap:balance}
.call-group{margin-top:var(--inner);padding-top:var(--inner);border-top:1px solid var(--hair)}
.call-cue{color:var(--muted);font-size:var(--s-body);margin-bottom:.5rem}
.call-num{display:inline-flex;align-items:center;gap:.22em;color:var(--ember-b);text-decoration:none;font:700 var(--s-number)/1.05 var(--f-head);font-variant-numeric:tabular-nums;letter-spacing:-.015em;white-space:nowrap;margin-left:-.06em}
.call-num:hover{color:var(--ember-b);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:rgba(255,127,61,.55)}
.call-num .mark{width:.8em;height:.8em;transform:none}
.call-ai{margin-top:.5rem;color:var(--muted);font-size:var(--s-body);max-width:32rem}
.hero-actions{margin-top:var(--inner)}
.hero-foot{grid-area:2/1/3/2;position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--gut);padding-bottom:var(--inner)}
.facts{display:flex;flex-wrap:wrap;gap:.4em 1.8em;font:500 var(--s-body)/1.4 var(--f-text);color:var(--ink)}
.scene-label{font-size:var(--s-small);line-height:1.45;color:var(--muted);white-space:nowrap}
.scene-meta{display:flex;align-items:center;gap:1rem;min-height:44px}
@media (min-width:1024px){.hero-foot{align-items:last baseline}}
.scene-toggle{min-height:44px;min-width:44px;text-align:right;padding:0 2px;background:none;border:0;border-radius:var(--r);font:500 var(--s-small)/1 var(--f-text);color:var(--ink);text-decoration:underline;text-decoration-color:var(--hair-strong);text-underline-offset:.25em;cursor:pointer;transition:color 150ms,text-decoration-color 150ms}
.scene-toggle:hover{color:var(--ember-b);text-decoration-color:currentColor}
.scene-toggle[hidden]{display:none}

/* The scene. Everything between the rig and the slabs keeps overflow visible, opacity 1, no filter, no mask. */
.cam{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--lean-y,0deg)) rotateY(var(--lean-x,0deg));transition:transform 520ms cubic-bezier(.2,.6,.2,1)}
.rig{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:translate3d(var(--rx1),var(--ry1),var(--rz1)) rotateX(var(--cx1)) rotateZ(var(--cz1))}
.table{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.spot{position:absolute;left:var(--ph-x);top:var(--ph-y);width:0;height:0;transform-style:preserve-3d}
.pool,.shadow,.wave{position:absolute;border-radius:50%}
.pool{--d:calc(var(--ph-w) * 3.6);width:var(--d);height:var(--d);left:calc(var(--d) / -2);top:calc(var(--d) / -2)}
.pool-ember{background:radial-gradient(circle,rgba(226,99,28,.62) 0%,rgba(226,99,28,.24) 30%,rgba(226,99,28,.06) 56%,rgba(226,99,28,0) 70%);opacity:var(--pe-rest)}
.pool-paper{--d:calc(var(--ph-w) * 2.8);top:calc(var(--d) / -2 - var(--ph-h) * .3);background:radial-gradient(circle,rgba(247,244,240,.42) 0%,rgba(247,244,240,.14) 26%,rgba(247,244,240,.04) 50%,rgba(247,244,240,0) 68%);opacity:var(--pp-rest)}
.shadow{width:calc(var(--ph-w) * 1.18);height:calc(var(--ph-h) * 1.06);left:calc(var(--ph-w) * -.59);top:calc(var(--ph-h) * -.53);background:radial-gradient(ellipse,rgba(0,0,0,.8) 30%,rgba(0,0,0,0) 72%);transform:translateZ(.2px)}
.wave{--d:calc(var(--ph-w) * 1.7);width:var(--d);height:var(--d);left:calc(var(--d) / -2);top:calc(var(--d) / -2);background:radial-gradient(circle closest-side,transparent calc(100% - 4px),rgba(255,127,61,.8) calc(100% - 3px),rgba(255,127,61,.8) calc(100% - 1px),transparent 100%);box-shadow:0 0 18px 3px rgba(226,99,28,.32),inset 0 0 14px rgba(226,99,28,.22);opacity:0;transform:translateZ(.4px) scale(.5)}
.phone{position:absolute;left:calc(var(--ph-x) - var(--ph-w) / 2);top:calc(var(--ph-y) - var(--ph-h) / 2);width:var(--ph-w);height:var(--ph-h);transform-style:preserve-3d;transform:rotateZ(var(--ph-rot,0deg))}
.buzz{position:absolute;inset:0;transform-style:preserve-3d}
.slab{position:absolute;inset:0;border-radius:var(--ph-r);background:var(--c,#101014);border:1px solid transparent;transform:translateZ(calc(.6px + var(--i) * 2.2px))}
.s1{--i:0;--c:#0C0C10;border-color:rgba(255,255,255,.05)}.s2{--i:1;--c:#0E0E12}.s3{--i:2;--c:#0F0F13}.s4{--i:3;--c:#111115}.s5{--i:4;--c:#17171C}.s6{--i:5;--c:#1E1E25}.s7{--i:6;--c:#26262E}
.s8{--i:7;--c:#2E2E37;border-color:rgba(255,255,255,.22)}
.glass{position:absolute;inset:0;border-radius:var(--ph-r);overflow:hidden;background:#0A0A0D;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transform:translateZ(16.8px)}
.glass::after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.02) 28%,rgba(255,255,255,0) 42%)}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center}
.scr-ring{justify-content:center;gap:calc(var(--ph-w) * .07);opacity:0}
.scr-ring .bigdot{width:calc(var(--ph-w) * .4);height:calc(var(--ph-w) * .4);color:var(--ember)}
.scr-ring span{font:500 calc(var(--ph-w) * .095)/1.2 var(--f-text);color:rgba(237,231,224,.86)}
.scr-cards{justify-content:flex-start;padding:calc(var(--ph-w) * .14) calc(var(--ph-w) * .065) 0;gap:calc(var(--ph-w) * .05)}
.card{width:100%;border-radius:calc(var(--ph-w) * .028);padding:calc(var(--ph-w) * .06) calc(var(--ph-w) * .065)}
.card-mail{background:var(--paper);color:var(--paper-ink)}
.card-from{display:block;font:500 calc(var(--ph-w) * .058)/1.3 var(--f-text);color:var(--paper-muted);margin-bottom:calc(var(--ph-w) * .035)}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5em;margin-bottom:calc(var(--ph-w) * .03)}
.card-title{font:600 calc(var(--ph-w) * .085)/1.15 var(--f-head);letter-spacing:-.01em}
.card-urgent{font:600 calc(var(--ph-w) * .058)/1.3 var(--f-text);color:var(--paper-accent)}
.card-line{display:block;font:400 calc(var(--ph-w) * .064)/1.4 var(--f-text)}
.card-line.tab{font-family:var(--f-head);font-weight:600}
.card-missed{background:#1D1C23;color:var(--muted)}
.card-missed .card-title{font:500 calc(var(--ph-w) * .07)/1.2 var(--f-text);color:rgba(237,231,224,.8);display:block;margin-bottom:calc(var(--ph-w) * .012)}
.scr-cards > *{flex:none}
.tx{width:100%;opacity:0}
.tx-head{display:block;font:500 calc(var(--ph-w) * .056)/1.3 var(--f-text);color:rgba(237,231,224,.8);padding:0 calc(var(--ph-w) * .02);margin-bottom:calc(var(--ph-w) * .02)}
.tx-win{height:var(--tx-h,0px);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent calc(var(--ph-w) * .035),#000 calc(var(--ph-w) * .1));mask-image:linear-gradient(to bottom,transparent 0,transparent calc(var(--ph-w) * .035),#000 calc(var(--ph-w) * .1))}
.tx-col{position:relative;padding:calc(var(--ph-w) * .1) calc(var(--ph-w) * .02) 0}
.tl.note .ts{color:var(--muted)}
.tl + .tl{margin-top:calc(var(--ph-w) * .04)}
.tw{display:block;font:500 calc(var(--ph-w) * .048)/1.3 var(--f-text);color:var(--muted)}
.ts{display:block;font:400 calc(var(--ph-w) * .062)/1.35 var(--f-text);color:rgba(237,231,224,.9)}

/* The take. The camera move is a CSS animation that plays once: armed holds it on its first frame, play runs it.
   Everything on the table and on the screen is one looping timeline built in site.js with element.animate,
   so a single Pause button can stop all of it. Without JavaScript or with reduced motion the resting frame shows. */
.scene.armed .rig{animation:take-cam 5600ms linear both paused}
.scene.play .rig{animation-play-state:running}
@keyframes take-cam{
  0%{transform:translate3d(var(--rx0),var(--ry0),var(--rz0)) rotateX(var(--cx0)) rotateZ(var(--cz0));animation-timing-function:cubic-bezier(.33,0,.67,1)}
  44%{transform:translate3d(var(--rx0),var(--ry0),calc(var(--rz0) + 24px)) rotateX(var(--cx0)) rotateZ(calc(var(--cz0) + 2deg));animation-timing-function:cubic-bezier(.35,0,.25,1)}
  100%{transform:translate3d(var(--rx1),var(--ry1),var(--rz1)) rotateX(var(--cx1)) rotateZ(var(--cz1))}
}

@media (min-width:1024px){:root{--s-display:min(calc(1.6rem + 4.6vw),calc(8vh + 1rem),calc((100vw - 2 * var(--pad)) * .078),100px)}}
@media (min-height:1000px) and (min-width:1024px){
  .hero{grid-template-rows:auto auto;align-content:center;row-gap:var(--inner)}
  .scene{position:absolute;inset:0;grid-area:auto}
  .hero-words,.hero-foot{align-self:auto}
  .hero-words{padding-bottom:0}
  .hero-foot{padding-bottom:0}
}
@media (min-width:1024px) and (max-height:800px){
  :root{--s-display:min(calc(1.6rem + 4.6vw),calc(7vh + 1rem),calc((100vw - 2 * var(--pad)) * .078),100px)}
  .hero{--inner:clamp(20px,3vh,48px)}
}
@media (max-height:999px),(max-width:1023px){.hero{margin-bottom:calc(-1 * var(--inner))}}
@media (max-width:1023px){
  .hero{grid-template-rows:auto auto auto;min-height:0}
  .hero{--ph-w:200px;--ph-x:0px;--ph-y:-30px;--wave-max:2.2;--rx0:0px;--ry0:-60px;--rz0:40px;--cx0:70deg;--cz0:-22deg;--rx1:0px;--ry1:-16px;--rz1:-70px;--cx1:38deg;--cz1:-8deg}
  .hero-words{grid-row:1;align-self:start;padding-top:var(--inner);padding-bottom:var(--inner)}
  .hero-words > *{grid-column:1/-1}
  .hero{--band:420px}
  .scene{grid-row:2;grid-column:1;height:var(--band);perspective:1000px;perspective-origin:50% 34%;
    -webkit-mask-image:radial-gradient(ellipse 62% 70% at 50% 50%,#000 44%,transparent 100%),linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);-webkit-mask-composite:source-in;mask-image:radial-gradient(ellipse 62% 70% at 50% 50%,#000 44%,transparent 100%),linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);mask-composite:intersect}
  .hero-foot{grid-row:3;align-items:flex-start;flex-direction:column-reverse;gap:0;margin-top:calc(-1 * var(--inner));padding-top:0}
  .scene-meta{position:absolute;right:0;top:calc(var(--inner) - var(--band) - 28px)}
  .facts{padding-top:var(--inner)}
  .hero-actions{display:none}
  .call-group{margin-top:var(--inner)}
}
@media (max-width:639px){
  .hero{--ph-w:184px;--ry0:-90px;--band:390px}
  .ts{font-size:calc(var(--ph-w) * .076)}
  .tw{font-size:calc(var(--ph-w) * .06)}
  .facts{display:grid;grid-template-columns:max-content max-content;gap:.4em var(--gut)}
}
@media (max-width:349px){.facts{grid-template-columns:1fr}.hero{--ph-w:168px}}
@media (prefers-reduced-motion:reduce){
  .cam{transition:none}
  .scene.armed .rig{animation:none}
}

/* 8. Block 2, the call */
.call-head{max-width:40rem}
.call-head .lede{margin-top:1rem;max-width:32rem}
.call-grid{margin-top:var(--inner)}
.transcript-col{grid-column:1/8}
.sheet-col{grid-column:9/13;position:relative}
@media (min-width:1024px) and (max-width:1279px){.sheet-col{grid-column:8/13}}
.label{font-size:var(--s-small);color:var(--muted);line-height:1.45;margin-bottom:1rem}
.transcript{position:relative;padding-left:6.4rem}
.transcript::before{content:"";position:absolute;left:4.6rem;top:0;bottom:0;width:1px;background:var(--hair)}
.line{position:relative;display:grid;grid-template-columns:5.6rem 1fr;column-gap:.6rem;padding:.75rem 0 .75rem 1rem;min-height:3rem}
.line::before{content:"";position:absolute;left:-2.4rem;top:1.45rem;width:.9rem;height:1px;background:var(--hair-strong);transition:background-color 150ms,height 150ms}
.line .t{position:absolute;left:-6.4rem;top:.72rem;width:3.4rem;font:600 var(--s-small)/1.5 var(--f-head);font-variant-numeric:tabular-nums;color:var(--muted);text-align:right;transition:color 150ms}
.line .who{color:var(--muted)}
.line .say{color:var(--ink)}
.line.note{grid-template-columns:1fr}
.line.note .say{color:var(--muted)}
.line.current::before{background:var(--ember);height:2px}
.line.current .t{color:var(--ember-b)}
@media (min-width:1024px){
  .transcript-col{padding-bottom:max(0px,calc(470px - 50vh))}
  .transcript{padding-left:calc((100% - 6 * var(--gut)) / 7 + var(--gut))}
  .transcript::before{left:calc((100% - 6 * var(--gut)) / 7 + var(--gut) / 2 - .5px)}
  .line{padding-left:0}
  .line::before{left:calc(-1 * var(--gut) / 2 - .5px - .6rem)}
  .line .t{left:calc(-1 * ((100% - 5 * var(--gut)) / 6 + var(--gut)));width:calc((100% - 5 * var(--gut)) / 6 + var(--gut) / 2 - 1.2rem)}
}
.sheet{position:sticky;top:calc(var(--bar) + var(--inner));background:var(--paper);color:var(--paper-ink);border-radius:var(--r);padding:1.5rem;box-shadow:0 30px 50px -28px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.35);transform:perspective(1100px) rotateX(calc(5deg * (1 - var(--k,1)))) rotateY(calc(-7deg * (1 - var(--k,1))));transform-origin:100% 40%;transition:transform 700ms cubic-bezier(.2,.7,.2,1)}
.sheet-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-bottom:.9rem;border-bottom:1px solid var(--paper-hair)}
.sheet-title{font:600 var(--s-large)/1.15 var(--f-head);letter-spacing:-.01em}
.sheet-urgent{font:600 var(--s-small)/1.4 var(--f-text);color:var(--paper-accent)}
.sheet-rows .row{display:grid;grid-template-columns:5.6rem 1fr;gap:.6rem;padding:.8rem 0;border-bottom:1px solid var(--paper-hair)}
.sheet-rows dt{font-size:var(--s-small);color:var(--paper-muted);padding-top:.15rem}
.sheet-rows dd{font-size:var(--s-body);line-height:1.4}
.sheet-rows dd.tab{font-family:var(--f-head);font-weight:600;white-space:nowrap}
.sheet-foot{margin-top:.9rem;font-size:var(--s-small);line-height:1.45;color:var(--paper-muted)}
.call-grid.live .sheet-urgent,.call-grid.live .sheet-rows dd{opacity:0;clip-path:inset(0 100% 0 0);transition:opacity 260ms,clip-path 420ms cubic-bezier(.2,.7,.2,1)}
.call-grid.live .sheet-urgent.on,.call-grid.live .row.on dd{opacity:1;clip-path:inset(0 0 0 0)}
.call-note{margin-top:1rem}
.facts3{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);margin-top:var(--inner);border-top:1px solid var(--hair)}
.facts3 li{grid-column:span 4;padding-top:1rem;color:var(--ink);position:relative}
.facts3 li + li::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--gut) / -2 - .5px);width:1px;background:var(--hair)}
@media (max-width:1023px){
  .transcript-col,.sheet-col{grid-column:1/-1}
  .sheet{position:static;margin-top:var(--inner);transform:none}
  .transcript{padding-left:3.6rem}
  .transcript::before{left:0;width:2px;background:var(--hair-strong)}
  .line::before{display:none}
  .line .t{left:-3.6rem;width:2.6rem;text-align:left;padding-left:.7rem}
  .facts3{grid-template-columns:1fr;border-top:0}
  .facts3 li{grid-column:auto;display:grid;grid-template-columns:minmax(0,31rem);padding:1rem 0;border-top:1px solid var(--hair)}
  .facts3 li + li::before{display:none}
}
@media (max-width:639px){
  .line{grid-template-columns:1fr;row-gap:.1rem}
  .line .who{font-size:var(--s-small)}
  .sheet-rows .row{grid-template-columns:4.4rem 1fr}
}
@media (max-width:359px){
  .transcript{padding-left:1.1rem}
  .line{grid-template-columns:auto 1fr;column-gap:.6rem;padding-left:0;row-gap:.1rem}
  .line .t{position:static;width:auto;padding:0;text-align:left}
  .line .say{grid-column:1/-1}
  .line.note{grid-template-columns:1fr}
}

/* 9. Block 3, the math */
.math-head{max-width:40rem}
.math-head .lede{margin-top:1rem;max-width:34rem}
.calc{margin-top:var(--inner)}
.calc-in{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.field{padding-bottom:var(--inner);position:relative}
.field:first-child{grid-column:1/7}
.field + .field{grid-column:7/13}
.field + .field::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--gut) / -2 - .5px);width:1px;background:var(--hair)}
.field-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.field-head label{font:500 var(--s-body)/1.4 var(--f-text);color:var(--ink)}
.readout{font:600 var(--s-large)/1 var(--f-head);font-variant-numeric:tabular-nums;color:var(--ink)}
.slider{position:relative;height:56px;margin-top:.4rem}
.ticks{position:absolute;left:0;top:28px;width:100%;height:15px;overflow:visible;border-top:1px solid var(--hair-strong)}
.ticks path{stroke:var(--hair-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.range{position:relative;z-index:1;width:calc(100% + 18px);height:56px;margin:0 0 0 -9px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.range::-webkit-slider-runnable-track{height:1px;background:transparent}
.range::-moz-range-track{height:1px;background:transparent}
.range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:34px;margin-top:-17px;border-radius:var(--r);background:var(--ember);border:0;transition:background-color 150ms}
.range::-moz-range-thumb{width:18px;height:34px;border-radius:var(--r);background:var(--ember);border:0}
.range:hover::-webkit-slider-thumb{background:var(--ember-b)}
.range:focus-visible{outline:none}
.range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--ember-b);outline-offset:3px}
.range:focus-visible::-moz-range-thumb{outline:2px solid var(--ember-b);outline-offset:3px}
.help{margin-top:.2rem;font-size:var(--s-small);line-height:1.45;color:var(--muted)}
.calc-out{grid-column:1/-1;border-top:1px solid var(--hair)}
.results{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);border-bottom:1px solid var(--hair)}
.result{padding:var(--inner) 0;position:relative}
.result:first-child{grid-column:1/7}
.result + .result{grid-column:7/13}
.result + .result::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--gut) / -2 - .5px);width:1px;background:var(--hair)}
.big{display:block;font:700 var(--s-signage)/1 var(--f-head);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)}
.result-text{display:block;margin-top:.5rem;font-size:var(--s-body);color:var(--ink);max-width:26rem}
.bridge{padding-top:var(--inner);font:500 var(--s-large)/1.3 var(--f-text);color:var(--ink);text-wrap:balance}
.calc-out .n{font-family:var(--f-head);font-weight:600;font-variant-numeric:tabular-nums}
.unit{margin-top:var(--inner);font:400 var(--s-small)/1.45 var(--f-text);color:var(--muted)}
.month-labels .unit{position:absolute;left:0;top:0;margin:0;transform:none;display:none}
@media (min-width:640px){.unit{display:none}.month-labels .unit{display:block}.months{margin-top:var(--inner)}}
.months{position:relative;margin-top:.5rem;height:30px;display:flex;justify-content:space-between;align-items:flex-end}
.mt{display:block;width:2px;height:22px;background:var(--hair-strong);border-radius:1px;transition:background-color 60ms;transition-delay:calc(var(--i) * 8ms)}
.mt.on{background:var(--ember);height:30px}
.mt{transition-property:background-color,height}
.months.parts .mt:first-child{width:8px;height:30px;background:repeating-linear-gradient(to bottom,var(--ember) 0 calc(100% / var(--j,2) - 2px),transparent calc(100% / var(--j,2) - 2px) calc(100% / var(--j,2)))}
.months.parts .mt:not(:first-child){background:var(--hair-strong);height:22px}
.month-labels{position:relative;height:1.6rem;margin-top:.35rem;font:400 var(--s-small)/1.4 var(--f-head);font-variant-numeric:tabular-nums;color:var(--muted)}
.month-labels span{position:absolute;top:0;transform:translateX(calc(-100% - 5px))}
.month-labels .ml6{left:calc(5 / 29 * 100%)}.month-labels .ml12{left:calc(11 / 29 * 100%)}.month-labels .ml18{left:calc(17 / 29 * 100%)}.month-labels .ml24{left:calc(23 / 29 * 100%)}.month-labels .ml30{left:100%}
.calc-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--gut);margin-top:var(--inner)}
.disclaim{font-size:var(--s-small);line-height:1.45;color:var(--muted);max-width:34rem}
.disclaim span{display:block;text-wrap:balance}
@media (min-width:640px){.disclaim br{display:none}}
@media (max-width:639px){
  .calc-in,.results{grid-template-columns:1fr}
  .field:first-child,.field + .field,.result:first-child,.result + .result{grid-column:auto}
  .field + .field{padding-top:var(--inner);border-top:1px solid var(--hair)}
  .field + .field::before,.result + .result::before{display:none}
  .result + .result{border-top:1px solid var(--hair)}
  .calc-foot{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .mt{transition:none}
  .sheet{transition:none}
  .call-grid.live .sheet-urgent,.call-grid.live .sheet-rows dd{transition:none}
}

/* 10. Block 4, price: one plate on hairlines, two equal columns, the fine print under them */
.plate{margin-top:0;padding-block:var(--inner);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);row-gap:var(--inner)}
.plate-left{grid-column:1/7}
.plate-right{grid-column:7/13;position:relative}
.plate-right::before{content:"";position:absolute;top:calc(-1 * var(--inner));bottom:calc(-1 * var(--inner));left:calc(var(--gut) / -2 - .5px);width:1px;background:var(--hair)}
h2.price-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .3em;font:700 var(--s-signage)/1 var(--f-head);letter-spacing:-.02em}
.price-num{font-variant-numeric:tabular-nums}
.price-unit{font:600 var(--s-large)/1.1 var(--f-head);letter-spacing:-.01em}
.price-line{margin-top:1rem;font:500 var(--s-body)/1.5 var(--f-text);color:var(--ink)}
.plate-left .btn{margin-top:var(--inner)}
.get-title{font:600 var(--s-large)/1.15 var(--f-head);letter-spacing:-.01em;margin-bottom:.4rem}
.get-list li{padding:.85rem max(0px,calc(100% - 31rem)) .85rem 0;color:var(--ink);text-wrap:balance}
.get-list li + li{border-top:1px solid var(--hair)}
.fine{margin-top:1rem}
.fine p{grid-column:span 6;max-width:30em;font-size:var(--s-small);line-height:1.5;color:var(--muted)}
@media (max-width:767px){
  .plate-left,.plate-right,.fine p{grid-column:1/-1}
  .plate-right{padding-top:var(--inner);border-top:1px solid var(--hair)}
  .plate-right::before{display:none}
  .fine p + p{margin-top:.5rem}
}

/* 11. Block 5, how it starts: three numerals on one ruler line, a tick at each step */
.steps{margin-top:var(--inner);border-top:1px solid var(--hair-strong)}
.step{grid-column:span 4;position:relative;padding-top:var(--inner)}
.step::before{content:"";position:absolute;left:0;top:-9px;width:2px;height:17px;background:var(--ember)}
.step-n{display:block;font:700 var(--s-signage)/1 var(--f-head);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)}
.step p{margin-top:1rem;max-width:24rem;color:var(--ink);text-wrap:balance}
@media (max-width:767px){
  .steps{border-top:0;border-left:1px solid var(--hair-strong);padding-left:var(--gut);row-gap:var(--inner)}
  .step{grid-column:1/-1;padding-top:0}
  .step::before{left:calc(-1 * var(--gut) - 8px);top:0;width:17px;height:2px}
}

/* 12. Block 6, straight answers: the heading on the left, and on the right one list of twelve questions that open
   like the owner's earlier site. A closed row is a small number, the question and a chevron; open, the chevron turns
   and the answer appears under the question, starting with the short answer in bold. The first row starts open.
   Every row is open in the markup, so all twelve answers read without JavaScript; site.js closes all but the first
   and animates each open and close. From 1024 the heading holds columns 1 to 5 and stays in view; the list holds
   columns 7 to 12. Below 1024 the heading sits on top. */
.faq-head{display:grid;gap:1.25rem;justify-items:start;align-content:start}
.faq-book{display:inline-flex;align-items:center;min-height:44px;font:500 var(--s-nav)/1 var(--f-text);color:var(--ink);text-decoration:underline;text-decoration-color:var(--ember);text-decoration-thickness:1px;text-underline-offset:8px}
@media (hover:hover){.faq-book:hover{color:var(--ember-b)}}
.qas{margin-top:var(--inner);border-bottom:1px solid var(--hair)}
.qa{border-top:1px solid var(--hair)}
.qd.anim{overflow:clip}
.qs{display:block;padding-block:calc(var(--inner) * .75);cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.qs::-webkit-details-marker{display:none}
.qs:focus-visible{outline:none}
.qs:focus-visible .q{outline:2px solid var(--ember-b);outline-offset:4px;border-radius:2px}
.qs-in{display:grid;grid-template-columns:2.25rem minmax(0,1fr) 18px;column-gap:1rem;align-items:baseline}
.qn{font:500 var(--s-small)/1 var(--f-text);font-variant-numeric:tabular-nums;color:var(--ember-b)}
.q{font:600 var(--s-body)/1.35 var(--f-head);color:var(--ink);text-wrap:balance;transition:color 150ms}
.chev{position:relative;align-self:center;width:18px;height:18px;color:var(--muted);transition:color 150ms}
/* The chevron turns only during a click driven open or close (class anim), never while site.js closes rows on load. */
.qd.anim .chev{transition:transform 380ms cubic-bezier(.2,.7,.2,1),color 150ms}
.qas.still .chev{transition:none}
.chev::before{content:"";position:absolute;left:4px;top:3px;width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
@media (hover:hover){.qs:hover .chev{color:var(--ink)}.qs:hover .q{color:var(--ember-b)}}
.qd[open]:not(.shut) .chev{transform:rotate(180deg);color:var(--ink)}
.ans{margin-left:calc(2.25rem + 1rem);margin-right:calc(18px + 1rem);margin-top:calc(-.25 * var(--inner));padding-bottom:calc(var(--inner) * .75);max-width:31rem;color:var(--muted)}
/* Where supported, the row is closed as soon as a close begins (so assistive technology hears it at once) while its answer stays painted until the animation ends. */
.qd.shut::details-content{content-visibility:visible}
.ans .a{font-weight:600;color:var(--ink)}
@media (min-width:1024px){
  .faq-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start}
  .faq-head{grid-column:1/6;position:sticky;top:calc(var(--bar) + var(--inner))}
  .faq-head h2{font:700 var(--s-signage)/1 var(--f-head);letter-spacing:-.02em}
  .qas{grid-column:7/13;margin-top:0}
}
@media (max-width:479px){
  .qs-in{grid-template-columns:1.75rem minmax(0,1fr) 18px;column-gap:.75rem}
  .ans{margin-left:calc(1.75rem + .75rem);margin-right:calc(18px + .75rem)}
}
@media (prefers-reduced-motion:reduce){.chev,.qd.anim .chev,.q{transition:none}}

/* 13. Block 7, close: the hero's call group again, with one static warm light behind the number */
.close{overflow-x:clip}
.close-call{position:relative;isolation:isolate;margin-top:var(--inner)}
.close-call::before{content:"";position:absolute;z-index:-1;left:calc(var(--s-number) * 3.75);top:calc(var(--s-number) * .55);width:calc(var(--s-number) * 10);height:calc(var(--s-number) * 5.5);transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(closest-side,rgba(226,99,28,.31) 0%,rgba(226,99,28,.12) 30%,rgba(226,99,28,.03) 56%,rgba(226,99,28,0) 100%)}
.close-p{margin-top:var(--inner);max-width:31rem}
.close-actions{margin-top:var(--inner);display:flex;flex-wrap:wrap;gap:1rem}
.close .call-ai{text-wrap:balance}
/* From 1024 the hero's 6 and 6: heading and call group on the left, paragraph and buttons on the right. */
@media (min-width:1024px){
  .close-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
  .close-in h2{grid-column:1/7;grid-row:1}
  .close-call{grid-column:1/7;grid-row:2;margin-top:0;padding-top:var(--inner)}
  .close-call::before{top:calc(var(--inner) + var(--s-number) * .55)}
  .close-p{grid-column:7/13;grid-row:2;align-self:start;margin:0;padding-top:var(--inner);max-width:30rem}
  .close-actions{grid-column:7/13;grid-row:3}
}
@media (max-width:479px){.close-actions{display:grid}}

/* 14. Footer */
.foot{margin-top:var(--block);border-top:1px solid var(--hair);padding-block:var(--inner) calc(var(--inner) * 1.5)}
/* Wordmark, then the two legal lines on the 6 and 6 axis, then Privacy and the last line on the same axis. */
.foot-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:1.25rem;align-items:start}
.foot .wordmark{grid-column:1/-1;justify-self:start;padding-block:9px;margin-block:-9px;min-height:0;line-height:1.2}
.legal,.foot-side{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:.75rem}
.legal p{max-width:33em;font-size:var(--s-small);line-height:1.5;color:var(--muted);text-wrap:balance}
.legal p:first-child,.foot-links{grid-column:1/7}
.legal p:last-child,.foot-copy{grid-column:7/13}
.legal a{white-space:nowrap}
.foot-side{align-items:baseline}
.foot-links{display:flex;flex-wrap:wrap;column-gap:1.75rem}
.foot-link{display:inline-flex;align-items:center;min-height:44px;font:500 var(--s-nav)/1 var(--f-text)}
.foot-copy{font-size:var(--s-small);line-height:1.5;color:var(--muted)}
@media (max-width:1023px){
  .legal p:first-child,.legal p:last-child,.foot-links,.foot-copy{grid-column:1/-1}
}
/* Phones: the four footer links sit two by two, so no link is left alone on a row. */
@media (max-width:479px){
  .foot-links{display:grid;grid-template-columns:repeat(2,max-content);justify-content:start;justify-items:start}
}

/* 15. Privacy page and page not found */
.doc{padding-block:var(--block) 0}
.doc-col{max-width:31rem}
.doc h1{font:600 var(--s-h2)/1.08 var(--f-head);letter-spacing:-.01em;text-wrap:balance}
.doc-date{margin-top:1rem;color:var(--muted)}
.doc h2{margin-top:calc(var(--inner) * 1.25);font:600 var(--s-large)/1.2 var(--f-head);letter-spacing:-.01em;text-wrap:balance}
.doc p,.doc ul{margin-top:1rem}
.doc ul{list-style:disc;padding-left:1.15em}
.doc li + li{margin-top:.5rem}
.doc li::marker{color:var(--muted)}
@media (min-width:1024px){
  .doc-col{max-width:none;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:baseline}
  .doc-col > *{grid-column:7/13;max-width:31rem}
  .doc-col > h1,.doc-col > .doc-date,.doc-col > h2{grid-column:1/7}
  .doc h2 + p,.doc h2 + ul{margin-top:calc(var(--inner) * 1.25)}
}
/* Short pages (legal, page not found) keep their footer at the bottom of the screen. */
body.sub{display:flex;flex-direction:column}
body.sub>main{flex:1 0 auto}
.nf-in{padding-block:var(--block) 0}
.nf h1{font:600 var(--s-h2)/1.08 var(--f-head);letter-spacing:-.01em;text-wrap:balance}
.nf-link{display:inline-flex;align-items:center;min-height:44px;margin-top:1rem;font:500 var(--s-body)/1 var(--f-text)}

/* month tick stagger order */
.mt:nth-child(1){--i:0}.mt:nth-child(2){--i:1}.mt:nth-child(3){--i:2}.mt:nth-child(4){--i:3}.mt:nth-child(5){--i:4}.mt:nth-child(6){--i:5}.mt:nth-child(7){--i:6}.mt:nth-child(8){--i:7}.mt:nth-child(9){--i:8}.mt:nth-child(10){--i:9}.mt:nth-child(11){--i:10}.mt:nth-child(12){--i:11}.mt:nth-child(13){--i:12}.mt:nth-child(14){--i:13}.mt:nth-child(15){--i:14}.mt:nth-child(16){--i:15}.mt:nth-child(17){--i:16}.mt:nth-child(18){--i:17}.mt:nth-child(19){--i:18}.mt:nth-child(20){--i:19}.mt:nth-child(21){--i:20}.mt:nth-child(22){--i:21}.mt:nth-child(23){--i:22}.mt:nth-child(24){--i:23}.mt:nth-child(25){--i:24}.mt:nth-child(26){--i:25}.mt:nth-child(27){--i:26}.mt:nth-child(28){--i:27}.mt:nth-child(29){--i:28}.mt:nth-child(30){--i:29}