:root{
  --paper:#F4E9D3; --paper-hi:#FCF5E7; --paper-lo:#EADEC4;
  --edge:#DCCFB4; --edge-2:#C9BB9C;
  --ink:#232019; --ink-2:#4A453B; --grey:#8E887A;
  --case:#39332B; --face:#221E17; --face-2:#2C2721;
  --amber:#FFBB3F; --orange:#E8571F; --sage:#C3CABF;
  --sans:"IBM Plex Sans",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",Consolas,monospace;
  --case-hi:#494237; --case-lo:#211E18;
  --cap-hi:#524839; --cap-mid:#3A322A; --cap-lo:#241F18; --cap-wall:#191510;
  --face-hi:#1C1811; --face-lo:#262019;
  --btn-hi:#FDF7EA; --btn-lo:#EFE3CB;
  --disp:#F8F2E4; --disp-dim:#D3C8B3; --disp-dim2:#A99F8D; --disp-dim3:#8E8676;
  --amber-hi:#FFCC63; --or-hi:#F2712F; --or-lo:#DE4E14; --or-edge:#C9450F;
  --sh:60,52,36;
  --cbl-blue:#2C8FD0; --cbl-cyan:#3FB6D8; --cbl-green:#57A96B;
  --cbl-amber:#E8A33D; --cbl-violet:#8B7BB8; --led:#5ED07A;
  --r:14px; --r-sm:7px;
}

/* ── PALETTES ── */
body.p2{ --paper:#F7F5F0; --paper-hi:#FFFFFF; --paper-lo:#ECE8E0;
  --edge:#DBD6CB; --edge-2:#C6C0B3; --ink:#1F2124; --ink-2:#4B5057; --grey:#8A9098;
  --case:#2A2D32; --face:#16181B; --face-2:#212429; --amber:#FFB524; --orange:#E8571F;
  --case-hi:#3D4147; --case-lo:#191C20;
  --cap-hi:#454A52; --cap-mid:#2E3339; --cap-lo:#1B1E23; --cap-wall:#111317;
  --face-hi:#15181C; --face-lo:#1E2227;
  --btn-hi:#FFFFFF; --btn-lo:#EDE9E1;
  --disp:#F3F5F7; --disp-dim:#C6CCD3; --disp-dim2:#939AA2; --disp-dim3:#7A8189;
  --amber-hi:#FFC95C; --or-hi:#F2712F; --or-lo:#DE4E14; --or-edge:#C9450F;
  --sh:55,52,45; }

body.p3{ --paper:#F1F4F6; --paper-hi:#FDFEFE; --paper-lo:#E3E9EC;
  --edge:#D2D9DD; --edge-2:#BAC4CA; --ink:#131820; --ink-2:#465059; --grey:#7E8A94;
  --case:#232B33; --face:#11161B; --face-2:#1B2229; --amber:#F4F9FC; --orange:#F1512A;
  --case-hi:#38424C; --case-lo:#151B21;
  --cap-hi:#3E4952; --cap-mid:#28313A; --cap-lo:#161C22; --cap-wall:#0D1217;
  --face-hi:#10151A; --face-lo:#1A2027;
  --btn-hi:#FFFFFF; --btn-lo:#E4EBEE;
  --disp:#F6FAFC; --disp-dim:#BCC7D0; --disp-dim2:#8B98A3; --disp-dim3:#71808B;
  --amber-hi:#FFFFFF; --or-hi:#FF6337; --or-lo:#E8431A; --or-edge:#CE3813;
  --sh:26,42,55; }

body.p4{ --paper:#E7EBEE; --paper-hi:#F9FBFC; --paper-lo:#D5DCE1;
  --edge:#B7C2C9; --edge-2:#96A4AD; --ink:#07090C; --ink-2:#262E36; --grey:#5F6B74;
  --case:#12181D; --face:#060A0D; --face-2:#10161B; --amber:#3DF59F; --orange:#FF4D1F;
  --case-hi:#28323B; --case-lo:#080C10;
  --cap-hi:#2A353E; --cap-mid:#171F26; --cap-lo:#0A0F14; --cap-wall:#000306;
  --face-hi:#05080B; --face-lo:#0E1418;
  --btn-hi:#FDFEFE; --btn-lo:#D8DFE4;
  --disp:#F2FBF6; --disp-dim:#B2C6BC; --disp-dim2:#84958D; --disp-dim3:#6E7E77;
  --amber-hi:#8AFFC8; --or-hi:#FF6B2E; --or-lo:#F03D00; --or-edge:#D63500;
  --led:#2BF287;
  --sh:8,16,24; }

body.p2, body.p3, body.p4 { background-image:none }
body.p3 .rnum, body.p4 .rnum{ text-shadow:0 0 22px rgba(255,255,255,.10) }
body.p3{ --amber:#5FD3F5 } body.p2{ --amber:#FFC24A }
body.p3 .logo .cap i, body.p4 .logo .cap i{ text-shadow:none }
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden}
body{overflow-x:hidden;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.5;
  background-image:radial-gradient(circle at 22% 0%,var(--paper-hi) 0%,transparent 58%)}
.wrap{max-width:1140px;margin:0 auto;padding:0 30px}
.ann{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.1em;
  color:var(--orange);text-transform:uppercase;line-height:1}
.ann.g{color:var(--grey)}

/* moulded plastic surface */
.plastic{
  background:linear-gradient(180deg,var(--paper-hi) 0%,var(--paper) 42%,var(--paper-lo) 100%);
  border:1px solid var(--edge);border-radius:var(--r);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
             inset 0 -1px 0 rgba(0,0,0,.035),
             0 1px 2px rgba(var(--sh),.05),
             0 10px 26px -14px rgba(var(--sh),.22);
}

/* ── TOP RAIL ── */
.rail{padding:14px 0 0}
.railin{display:flex;align-items:stretch;height:42px;overflow:hidden}
.railin>div{display:flex;align-items:center;padding:0 16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.railin>div+div{border-left:1px solid var(--edge)}
.railin .grow{flex:1;justify-content:flex-end;color:var(--orange)}
.stripe{width:48px;padding:0!important;
  background:repeating-linear-gradient(45deg,var(--orange) 0 5px,transparent 5px 11px)}

/* ── HEADER ── */
.hin{display:flex;align-items:center;gap:24px;padding:24px 0 30px}
.logo{display:inline-flex;align-items:center;font-family:var(--mono);font-weight:700;
  font-size:31px;letter-spacing:-1.2px;text-decoration:none;color:var(--ink);line-height:1;
  padding:4px 0 9px}
.logo .lt{font-weight:400;padding-left:11px;color:var(--ink)}
.logo .cap{position:relative;display:inline-block;padding:4px;border-radius:11px;line-height:1;
  background:linear-gradient(180deg,var(--cap-hi) 0%,var(--cap-mid) 55%,var(--cap-lo) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),
             0 5px 0 var(--cap-wall),
             0 10px 15px -5px rgba(var(--sh),.48);
  transition:transform .06s ease,box-shadow .06s ease}
.logo .cap i{display:block;border-radius:7px;padding:5px 11px 7px;font-style:normal;
  color:var(--amber);text-shadow:0 0 14px rgba(255,187,63,.28);
  background:linear-gradient(180deg,var(--face-hi),var(--face-lo));
  box-shadow:inset 0 2px 6px rgba(0,0,0,.75),inset 0 -1px 0 rgba(255,255,255,.07)}
.logo:hover .cap{transform:translateY(2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 3px 0 var(--cap-wall),0 6px 10px -4px rgba(var(--sh),.45)}
.logo:active .cap{transform:translateY(5px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 var(--cap-wall),0 3px 6px -3px rgba(var(--sh),.5)}
.nav{margin-left:auto;display:flex;gap:7px}
.nav a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-2);padding:10px 15px;border-radius:9px;
  background:linear-gradient(180deg,var(--btn-hi),var(--btn-lo));border:1px solid var(--edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 1px rgba(var(--sh),.06)}
.nav a:hover{color:var(--ink);transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.nav a.hot{background:linear-gradient(180deg,var(--or-hi),var(--or-lo));color:#fff;border-color:var(--or-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 1px 2px rgba(150,60,10,.28)}

/* ── HERO ── */
.hgrid{display:grid;grid-template-columns:1fr 452px;gap:56px;align-items:start;padding-top:26px}
h1{font-size:60px;font-weight:700;letter-spacing:-2.6px;line-height:1.02;margin:14px 0 0;
  padding-top:18px;border-top:2px solid var(--ink)}
h1 em{font-style:normal;color:var(--orange)}

.subhead{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);margin-top:20px;display:flex;gap:0;border-top:1px solid var(--edge);
  border-bottom:1px solid var(--edge);max-width:520px}
.subhead span{padding:11px 0;flex:1;display:flex;align-items:center;gap:8px}
.subhead span::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--cbl-blue);flex:none}
.subhead span:nth-child(2)::before{background:var(--cbl-green)}
.subhead span:nth-child(3)::before{background:var(--orange)}
.blurb{font-size:18px;max-width:41ch;margin-top:24px;line-height:1.55;color:var(--ink-2)}
.blurb b{color:var(--ink);font-weight:600}


/* ── THE UNIT (light housing, one lit display) ── */
.unit{background:linear-gradient(180deg,var(--paper-hi) 0%,var(--paper) 45%,var(--paper-lo) 100%);
  border:1px solid var(--edge);border-radius:20px;padding:12px;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.04),
             0 2px 3px rgba(var(--sh),.06),0 20px 40px -22px rgba(var(--sh),.35)}
.unitlabel{position:absolute;top:-7px;left:20px;background:var(--paper);padding:0 8px;border-radius:4px}
.face{background:transparent;border-radius:12px;overflow:visible;box-shadow:none}

/* function keys, light caps */
.fstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:2px 2px 10px}
.fstrip div{padding:8px 4px;border-radius:7px;
  background:linear-gradient(180deg,var(--btn-hi),var(--btn-lo));border:1px solid var(--edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 1px rgba(var(--sh),.07);
  font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;color:var(--ink-2);
  text-transform:uppercase;text-align:center;position:relative}
.fstrip div.on{color:var(--ink);border-color:var(--cbl-blue)}
.fstrip div.on::after{content:"";position:absolute;top:4px;right:5px;width:5px;height:5px;
  border-radius:50%;background:var(--led);box-shadow:0 0 5px var(--led)}

/* the one dark thing: the display */
.readout{padding:27px 20px 25px;border-radius:11px;
  background:linear-gradient(180deg,var(--face-hi),var(--face));
  box-shadow:inset 0 2px 7px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.06)}
.rlabel{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;color:var(--disp-dim2);
  text-transform:uppercase;margin-bottom:8px}
.rnum{font-family:var(--mono);font-size:47px;font-weight:600;color:var(--amber);
  letter-spacing:-1.5px;line-height:1;display:block;text-decoration:none}
.rsub{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--disp-dim);
  text-transform:uppercase;margin-top:12px}

/* days, light pills */
.days{display:flex;gap:5px;padding:10px 2px 2px}
.days span{flex:1;text-align:center;padding:6px 0;border-radius:6px;
  background:var(--paper-lo);border:1px solid var(--edge);
  font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--grey)}
.days span.a{color:var(--ink);background:linear-gradient(180deg,var(--btn-hi),var(--btn-lo));
  border-color:var(--edge-2)}

/* prices, light rows on rails */
.prices{padding:10px 2px 2px}
.prow{display:flex;align-items:center;justify-content:space-between;
  padding:12px 13px;border-radius:8px;background:transparent;margin-top:3px;
  border-bottom:1px solid var(--edge)}
.prow:last-child{border-bottom:none}
.prow .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--ink-2);text-transform:uppercase;display:flex;align-items:center;gap:9px}
.prow .k::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--cbl-blue);flex:none}
.prow:nth-child(2) .k::before{background:var(--cbl-green)}
.prow:nth-child(3) .k::before{background:var(--cbl-amber)}
.prow .v{font-family:var(--mono);font-size:21px;font-weight:600;color:var(--ink);letter-spacing:-.5px}
.prow .v em{font-style:normal;font-size:9px;color:var(--grey);letter-spacing:.06em}
.unitfoot{display:flex;justify-content:space-between;padding:12px 4px 2px;
  border-top:1px solid var(--edge);margin-top:8px}

.caption{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);margin-top:13px;text-align:center}

/* ── KNOLL ── */
.knoll{margin-top:70px}
.knollframe{padding:10px;border-radius:18px}
.knollbox{border-radius:10px;overflow:hidden;background:#EFECE2;aspect-ratio:21/9;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:30px;box-shadow:inset 0 0 0 1px var(--edge)}
.knollbox img{width:100%;height:100%;object-fit:cover;display:block}
.knollbox h4{font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--orange);margin-bottom:10px}
.knollbox p{font-size:14.5px;color:var(--ink-2);max-width:54ch}

.bleed{width:100vw;max-width:100%;margin-left:calc(50% - 50vw);margin-top:0}
.bleed img{width:100%;display:block}


.pal{display:inline-flex;gap:5px;padding-right:14px;align-items:center}
.pal b{width:15px;height:15px;border-radius:5px;cursor:pointer;display:block;
  border:1px solid rgba(0,0,0,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.pal b[data-p=""]{background:var(--paper)}
.pal b[data-p="p2"]{background:#F7F5F0}
.pal b[data-p="p3"]{background:#DDE6EA}
.pal b[data-p="p4"]{background:#C3CDD4}
.pal b.on{outline:2px solid var(--orange);outline-offset:2px}
.sndtog{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);background:linear-gradient(180deg,var(--btn-hi),var(--btn-lo));border:1px solid var(--edge);
  border-radius:7px;padding:6px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 1px rgba(var(--sh),.06)}
.sndtog:hover{color:var(--ink)}
.sndtog:active{transform:translateY(1px);box-shadow:inset 0 1px 2px rgba(var(--sh),.18)}
.sndtog .led{width:7px;height:7px;border-radius:50%;background:#C9BB9C;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.sndtog[aria-pressed="true"]{color:var(--ink)}
.sndtog[aria-pressed="true"] .led{background:var(--orange);box-shadow:0 0 7px rgba(232,87,31,.85)}
.nav a:active{transform:translateY(1px);box-shadow:inset 0 1px 2px rgba(var(--sh),.2)}
.fstrip div{cursor:default}

/* ── FIGURE HEADER ── */
.fighead{display:flex;align-items:center;gap:16px;margin:78px 0 0;padding-bottom:14px;
  border-bottom:1px solid var(--edge)}
.fighead i{flex:1;height:1px;background:var(--edge)}
.fighead .fno{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange);font-weight:600}
.fighead .ftitle{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);font-weight:600;white-space:nowrap}
.fighead .frange{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  color:var(--grey);white-space:nowrap}
@media(max-width:700px){.fighead .frange,.fighead i:last-of-type{display:none}}
/* ── HORIZONTAL TIMELINE ── */
.tlband{margin:52px auto 0;padding-bottom:16px;max-width:760px}
.tlitems{display:flex;align-items:flex-end;justify-content:center;gap:64px;padding:0 26px}
.tli{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}
.tli img{width:100%;max-width:104px;height:auto;display:block;mix-blend-mode:multiply;filter:contrast(1.15);opacity:.9}
.tli i{display:block;width:1px;height:16px;background:currentColor;opacity:.3;margin-top:14px}
.tlaxis{position:relative;display:flex;align-items:center;gap:14px;margin-top:-1px}
.tlaxis .ticks{flex:1;height:11px;position:relative;
  border-top:1px solid rgba(var(--sh),.55);
  background-image:repeating-linear-gradient(90deg,rgba(var(--sh),.45) 0 1px,transparent 1px 28px);
  background-size:100% 6px;background-repeat:no-repeat;background-position:0 0}
.tlaxis .yl,.tlaxis .yr2{font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.06em;color:var(--ink);white-space:nowrap;transform:translateY(-1px)}
.tlaxis .yr2{color:var(--orange)}
@media(max-width:880px){
  .tlitems{gap:12px;padding:0 6px}
  .tli img{max-width:120px}
  .tli i{height:14px}
}
/* ── SPEC TABLE ── */
.spec{margin-top:70px;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--edge);box-shadow:0 10px 26px -16px rgba(var(--sh),.28)}
.spechead{display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,var(--case-hi),var(--case));color:var(--paper);padding:13px 18px}
.spechead b{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase}
.spechead span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--amber)}
.specbody{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--edge)}
.cell{background:linear-gradient(180deg,var(--paper-hi),var(--paper-lo));padding:20px 18px 20px;position:relative}
.cell b{display:block;font-size:18.5px;font-weight:600;letter-spacing:-.35px;margin-bottom:6px}
.cell .st{display:block;font-size:14px;line-height:1.42;letter-spacing:0;color:var(--ink-2);text-transform:none}
.cell .idx{position:absolute;top:12px;right:14px;font-family:var(--mono);font-size:9.5px;color:var(--orange);opacity:.8}
.footnote{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);margin-top:12px}
.pad{height:90px}
@media(max-width:960px){
  .hgrid{grid-template-columns:1fr;gap:40px}
  h1{font-size:56px;letter-spacing:-2.4px}
  .specbody{grid-template-columns:repeat(2,1fr)}
  .railin>div:nth-child(4){display:none}
  /* nav becomes a wrapped keycap grid rather than disappearing */
  .hin{flex-direction:column;align-items:stretch;gap:16px;padding:22px 0 26px}
  .logo{align-self:flex-start}
  .nav{margin-left:0;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:100%}
  .nav a{text-align:center;padding:12px 8px}
  .nav a.hot{grid-column:1 / -1}
}
/* ═══════════════ SITE-WIDE ADDITIONS ═══════════════ */

/* generic page header */
.pagehead{padding:54px 0 0}
.pagehead h1{font-size:52px;letter-spacing:-2.2px;line-height:1.03;border-top:2px solid var(--ink);
  padding-top:18px;margin:14px 0 0;max-width:20ch}
.pagehead .sub{font-size:18px;color:var(--ink-2);max-width:56ch;margin-top:20px;line-height:1.55}
.pagehead .sub b{color:var(--ink);font-weight:600}

/* section shell */
.sec{padding:64px 0 0}
.sec h2{font-size:33px;font-weight:700;letter-spacing:-1.2px;line-height:1.1;margin:12px 0 14px;max-width:24ch}
.sec p.lede{font-size:17px;color:var(--ink-2);max-width:62ch;line-height:1.55}
.sec p.lede+p.lede{margin-top:14px}
.sec p.lede b{color:var(--ink);font-weight:600}

/* panels */
.panel{background:linear-gradient(180deg,var(--paper-hi) 0%,var(--paper) 45%,var(--paper-lo) 100%);
  border:1px solid var(--edge);border-radius:var(--r);padding:28px 30px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 26px -18px rgba(var(--sh),.28)}
.panel h3{font-size:21px;font-weight:600;letter-spacing:-.4px;margin-bottom:9px}
.panel p{font-size:15.5px;color:var(--ink-2);line-height:1.55}

/* two / three / four column */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.g2w{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start}

/* numbered steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--edge);
  border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;margin-top:26px}
.step{background:linear-gradient(180deg,var(--paper-hi),var(--paper-lo));padding:24px 20px 26px}
.step .sn{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--orange);
  font-weight:600;display:block;margin-bottom:12px}
.step b{display:block;font-size:17.5px;font-weight:600;letter-spacing:-.3px;margin-bottom:7px}
.step p{font-size:14px;color:var(--ink-2);line-height:1.45}

/* big tier cards */
.tierrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--edge);
  border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;margin-top:30px}
.tierc{background:linear-gradient(180deg,var(--paper-hi),var(--paper-lo));padding:28px 24px 30px;
  display:flex;flex-direction:column}
.tierc.mid{background:linear-gradient(180deg,#fff,var(--paper-lo))}
.tierc .tl{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.tierc .tl::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--cbl-blue)}
.tierc:nth-child(2) .tl::before{background:var(--cbl-green)}
.tierc:nth-child(3) .tl::before{background:var(--cbl-amber)}
.tierc .tp{font-family:var(--mono);font-size:46px;font-weight:600;color:var(--ink);letter-spacing:-2px;line-height:1}
.tierc .tp em{font-style:normal;font-size:12px;color:var(--grey);letter-spacing:.08em;
  display:block;margin-top:6px;text-transform:uppercase}
.tierc h3{font-size:19px;font-weight:600;margin:20px 0 8px;letter-spacing:-.3px}
.tierc>p{font-size:14.5px;color:var(--ink-2);margin-bottom:18px;line-height:1.5}
.tierc ul{list-style:none;margin-top:auto;padding-top:8px;border-top:1px solid var(--edge)}
.tierc li{font-size:14px;color:var(--ink-2);padding:7px 0 7px 18px;position:relative}
.tierc li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:1px;background:var(--orange)}

/* FAQ */
.faq{margin-top:26px;border-top:1px solid var(--edge)}
.faq details{border-bottom:1px solid var(--edge)}
.faq summary{cursor:pointer;padding:19px 0;font-size:17.5px;font-weight:600;letter-spacing:-.3px;
  list-style:none;display:flex;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font-family:var(--mono);color:var(--orange);font-weight:600;
  font-size:19px;flex:none;width:14px}
.faq details[open] summary::before{content:"\2212"}
.faq p{font-size:15.5px;color:var(--ink-2);line-height:1.6;padding:0 0 22px 28px;max-width:70ch}

/* contact + form */
.formwrap{background:linear-gradient(180deg,var(--paper-hi),var(--paper-lo));
  border:1px solid var(--edge);border-radius:var(--r);padding:30px 30px 32px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 26px -18px rgba(var(--sh),.28)}
.fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{display:block;margin-bottom:14px}
.fld span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);margin-bottom:7px}
.fld input,.fld select,.fld textarea{width:100%;font-family:var(--sans);font-size:15.5px;
  color:var(--ink);background:var(--paper-hi);border:1px solid var(--edge);border-radius:9px;
  padding:12px 13px;box-shadow:inset 0 1px 3px rgba(var(--sh),.08)}
.fld textarea{min-height:112px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--cbl-blue);
  box-shadow:inset 0 1px 3px rgba(var(--sh),.08),0 0 0 3px rgba(44,143,208,.16)}
.subm{background:linear-gradient(180deg,var(--or-hi),var(--or-lo));color:#fff;border:1px solid var(--or-edge);
  border-radius:9px;padding:14px 26px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 2px 3px rgba(var(--sh),.2)}
.subm:active{transform:translateY(1px)}
.formnote{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--grey);margin-top:14px}

/* contact detail block */
.cdet{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge);
  border-radius:var(--r);overflow:hidden}
.cdet div{background:linear-gradient(180deg,var(--paper-hi),var(--paper-lo));padding:20px 22px}
.cdet .cl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);display:block;margin-bottom:7px}
.cdet .cv{font-size:17px;font-weight:600;letter-spacing:-.2px;color:var(--ink);line-height:1.45}
.cdet .cv a{color:var(--ink);text-decoration:none}
.cdet .cv a:hover{color:var(--orange)}
.cdet .cv.num{font-family:var(--mono);font-size:23px;letter-spacing:-.8px}

/* town grid */
.towngrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--edge);
  border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;margin-top:26px}
.towngrid div{background:linear-gradient(180deg,var(--paper-hi),var(--paper-lo));padding:16px 18px}
.towngrid b{display:block;font-size:16px;font-weight:600;letter-spacing:-.2px}
.towngrid span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--grey);
  text-transform:uppercase}

/* testimonial */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.qc{background:linear-gradient(180deg,var(--paper-hi),var(--paper-lo));border:1px solid var(--edge);
  border-radius:var(--r);padding:28px 28px 24px;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 26px -18px rgba(var(--sh),.28)}
.qc p{font-size:18px;line-height:1.5;letter-spacing:-.2px;color:var(--ink)}
.qc .who{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);margin-top:18px;padding-top:14px;border-top:1px solid var(--edge)}
.qc .who b{color:var(--ink-2);font-weight:600}

/* placeholder slots */
.slot{border:1px dashed var(--edge-2);border-radius:var(--r);background:rgba(255,255,255,.35);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:30px 26px;min-height:190px}
.slot .sl{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orange);margin-bottom:9px}
.slot p{font-size:13.5px;color:var(--grey);max-width:34ch;line-height:1.45}

/* final CTA */
.cta{margin-top:76px;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,var(--case-hi),var(--case));padding:52px 46px 54px;
  box-shadow:0 20px 40px -24px rgba(var(--sh),.5)}
.cta h2{color:var(--disp);font-size:38px;letter-spacing:-1.6px;margin:0 0 12px;max-width:20ch}
.cta p{color:var(--disp-dim);font-size:17px;max-width:52ch;margin-bottom:26px;line-height:1.5}
.cta .row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cta .num{font-family:var(--mono);font-size:31px;font-weight:600;color:var(--amber);
  letter-spacing:-1.2px;text-decoration:none}
.btnhot{display:inline-block;background:linear-gradient(180deg,var(--or-hi),var(--or-lo));color:#fff;
  border:1px solid var(--or-edge);border-radius:9px;padding:14px 26px;text-decoration:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 2px 3px rgba(var(--sh),.24)}
.btnhot:active{transform:translateY(1px)}
.btnghost{display:inline-block;border:1px solid var(--edge);border-radius:9px;padding:13px 24px;
  text-decoration:none;font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);
  background:linear-gradient(180deg,var(--btn-hi),var(--btn-lo))}

/* footer */
.sitefoot{margin-top:80px;border-top:1px solid var(--edge);padding:46px 0 40px}
.footgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px}
.footgrid h5{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey);margin-bottom:14px}
.footgrid a{display:block;font-size:14.5px;color:var(--ink-2);text-decoration:none;padding:4px 0}
.footgrid a:hover{color:var(--orange)}
.footgrid address{font-style:normal;font-size:14.5px;color:var(--ink-2);line-height:1.7}
.footbot{margin-top:38px;padding-top:20px;border-top:1px solid var(--edge);display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;color:var(--grey);text-transform:uppercase}
.footbot a{color:var(--grey);text-decoration:none}
.footbot a:hover{color:var(--orange)}

/* legal pages */
.legal{max-width:76ch;padding-top:10px}
.legal h3{font-size:19px;font-weight:600;margin:34px 0 10px;letter-spacing:-.3px}
.legal p{font-size:15.5px;color:var(--ink-2);line-height:1.65;margin-bottom:12px}
.legal ul{margin:0 0 14px 0;padding-left:20px}
.legal li{font-size:15.5px;color:var(--ink-2);line-height:1.6;margin-bottom:6px}

/* held banner */
.held{background:repeating-linear-gradient(45deg,rgba(232,87,31,.10) 0 12px,transparent 12px 24px);
  border:2px dashed var(--orange);border-radius:var(--r);padding:22px 26px;margin-bottom:34px}
.held b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--orange);margin-bottom:8px}
.held p{font-size:15px;color:var(--ink-2);line-height:1.55;max-width:76ch}

@media(max-width:900px){
  .g2,.g3,.g2w,.fgrid2,.quotes{grid-template-columns:1fr;gap:18px}
  .steps,.tierrow,.towngrid{grid-template-columns:1fr 1fr}
  .footgrid{grid-template-columns:1fr 1fr}
  .pagehead h1{font-size:34px;letter-spacing:-1.2px}
  .sec h2{font-size:26px}
  .cta{padding:36px 26px 38px}
  .cta h2{font-size:28px}
}

.nav a.cur{background:linear-gradient(180deg,var(--paper-lo),var(--paper-lo));
  color:var(--ink);border-color:var(--edge-2);box-shadow:inset 0 1px 3px rgba(var(--sh),.14)}

/* ── Fig. — signal path schematic ─────────────────────────────────── */
.schem{margin:26px auto 0;max-width:1000px;padding:0 10px}
.schem svg{width:100%;height:auto;display:block;overflow:visible}
.schem .wire{stroke:var(--edge-2);stroke-width:1.25;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.schem .jn{fill:var(--orange);stroke:none}
.schem .tag{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;
  fill:var(--grey);text-transform:uppercase}
.schem .nl{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;
  fill:var(--ink);text-transform:uppercase}
.schem .nl.hot{fill:var(--orange)}
.schem .ns{font-family:var(--sans);font-size:11px;fill:var(--grey);letter-spacing:0}
.schem-m{display:none}

/* ── About: Joe ───────────────────────────────────────────────────── */
.pagehead h1.sm{font-size:40px;letter-spacing:-1.6px}
.photo{margin:0;border-radius:var(--r);overflow:hidden;position:relative;
  background:linear-gradient(180deg,var(--paper-hi),var(--paper-lo));
  border:1px solid var(--edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 30px -20px rgba(var(--sh),.42)}
.photo img{display:block;width:100%;height:auto}
.photo figcaption{font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);padding:11px 14px 12px;
  border-top:1px solid var(--edge);background:var(--paper-hi)}
@media(max-width:900px){.pagehead h1.sm{font-size:31px}}

/* ── Full-width screenshot figure ─────────────────────────────────── */
.shot{margin:34px 0 0;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,var(--paper-hi),var(--paper-lo));
  border:1px solid var(--edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 20px 44px -28px rgba(var(--sh),.45)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);padding:12px 16px 13px;
  border-top:1px solid var(--edge);background:var(--paper-hi)}

/* ══════════════════════════════════════════════════════════════════
   PHONE
   Everything below 620px. This layer did not exist before and its
   absence is what broke the site on a handset.
   ══════════════════════════════════════════════════════════════════ */

/* Stacked signal path — replaces the wide diagram, never overflows */
.schem-m{list-style:none;margin:30px 0 0;padding:0}
.schem-m li{position:relative;display:flex;align-items:center;gap:15px;
  padding:0 0 30px 0}
.schem-m li.last{padding-bottom:0}
/* the cable, drawn between one step and the next */
.schem-m li::before{content:"";position:absolute;left:23px;top:52px;bottom:-2px;
  width:1.25px;background:var(--edge-2)}
.schem-m li.last::before{display:none}
.schem-m .si{flex:none;width:48px;height:48px;display:block}
.schem-m .si svg{width:100%;height:100%;display:block;overflow:visible}
.schem-m .st{display:block;min-width:0}
.schem-m .st b{display:block;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.schem-m li.hot .st b{color:var(--orange)}
.schem-m .st em{display:block;font-style:normal;font-size:13px;color:var(--grey);
  margin-top:3px;line-height:1.35}
.schem-m .sw{position:absolute;left:60px;bottom:7px;font-family:var(--mono);
  font-size:8.5px;letter-spacing:.16em;color:var(--grey);text-transform:uppercase}

@media(max-width:620px){
  .schem{display:none}
  .schem-m{display:block}

  /* ── the top rail: was one un-wrapping row, clipped at the right ── */
  .railin{height:auto;flex-wrap:wrap;overflow:visible;padding:0}
  .railin>div{padding:9px 12px;font-size:9.5px;letter-spacing:.1em}
  .railin>div+div{border-left:none}
  .stripe{width:100%;height:9px;padding:0!important;border-radius:9px 9px 0 0}
  .railin .grow{flex:1 1 100%;justify-content:flex-start;gap:12px;
    border-top:1px solid var(--edge);padding:9px 12px}
  .railin .grow>span:last-child{display:none}   /* hours live in the footer */

  /* ── navigation ── */
  .hin{padding:20px 0 22px}
  .logo{font-size:27px}
  .nav{grid-template-columns:1fr 1fr}
  .nav a{padding:13px 8px;font-size:10px}

  /* ── one column, everywhere ── */
  .g2,.g3,.g2w,.fgrid2,.quotes,.steps,.tierrow,.towngrid,.specbody,.footgrid,
  .hgrid,.tiles{grid-template-columns:1fr!important}
  .towngrid,.specbody{gap:1px}

  /* ── type that was overrunning its box ── */
  h1{font-size:37px;letter-spacing:-1.5px;line-height:1.06}
  h1 br{display:none}
  .pagehead h1{font-size:30px;letter-spacing:-1px}
  .pagehead h1.sm{font-size:28px}
  .sec h2{font-size:23px;letter-spacing:-.7px}
  .subhead{flex-wrap:wrap;gap:8px 16px}
  .blurb,.sec p.lede,.sub{font-size:15.5px}

  /* ── figure headers: the title used to run off the edge ── */
  .fighead{flex-wrap:wrap;gap:8px;margin-top:54px}
  .fighead i{display:none}
  .fighead .ftitle{font-size:11px;letter-spacing:.1em;white-space:normal}
  .fighead .frange{display:none}
  .caption{letter-spacing:.1em;line-height:1.6}

  /* ── the unit ── */
  .rnum{font-size:30px;letter-spacing:-.5px}
  .fstrip{grid-template-columns:1fr 1fr}
  .days span{font-size:8px;padding:5px 0}
  .prow .v{font-size:18px}
  .unitfoot{flex-wrap:wrap;gap:6px 14px}

  /* ── everything else that was set in wide-screen units ── */
  .wrap{padding:0 18px}
  .sec{padding:44px 0 0}
  .spechead{flex-direction:column;align-items:flex-start;gap:5px}
  .cta{padding:30px 20px 32px}
  .cta h2{font-size:23px}
  .cta .row{flex-wrap:wrap;gap:12px}
  .num{font-size:24px}
  .footbot{flex-direction:column;gap:8px;align-items:flex-start}
  .tierc{padding:24px 20px}
  .shot figcaption,.photo figcaption{font-size:8.5px;letter-spacing:.1em}
}

/* very small handsets */
@media(max-width:380px){
  h1{font-size:32px}
  .rnum{font-size:26px}
  .nav{grid-template-columns:1fr}
}

/* four-up grids — a class, not an inline style, so breakpoints can win */
.towngrid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.towngrid.four{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.towngrid.four{grid-template-columns:1fr}}
.shot a{display:block}

/* ══ P4 "EXTREME" — the shipped palette. Near-black housings, green display,
   hotter orange, darker linework. Joe's notes, Aug 2026. ══ */
body.p4 .rnum{text-shadow:0 0 28px rgba(61,245,159,.45),0 0 7px rgba(61,245,159,.30)}
body.p4 .logo .cap i{text-shadow:0 0 15px rgba(61,245,159,.38)}
body.p4 .cta .num{text-shadow:0 0 22px rgba(61,245,159,.35)}
body.p4 .fstrip div.on::after{box-shadow:0 0 6px var(--led),0 0 12px rgba(43,242,135,.5)}
body.p4 .sndtog[aria-pressed="true"] .led{background:var(--led);box-shadow:0 0 8px rgba(43,242,135,.9)}
body.p4 .schem .wire{stroke:var(--ink-2);stroke-width:1.4}
body.p4 .schem .tag{fill:var(--ink-2)}
body.p4 .schem .ns{fill:var(--ink-2)}
body.p4 .schem-m li::before{background:var(--ink-2)}
body.p4 .schem-m .st em,body.p4 .schem-m .sw{color:var(--ink-2)}
body.p4 .unit,body.p4 .qc,body.p4 .panel,body.p4 .formwrap{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.05),
             0 3px 5px rgba(var(--sh),.10),0 26px 48px -22px rgba(var(--sh),.55)}
body.p4 .cta{box-shadow:0 26px 52px -24px rgba(var(--sh),.75)}
body.p4 .readout{box-shadow:inset 0 3px 9px rgba(0,0,0,.8),inset 0 0 0 1px rgba(61,245,159,.10)}

/* hero "every plan includes" checklist */
.inc{margin-top:10px;max-width:520px;list-style:none;border-top:1px solid var(--edge)}
.inc li{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--edge);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.inc li::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--led);flex:none;
  box-shadow:0 0 6px rgba(94,208,122,.55)}
body.p4 .inc li::before{box-shadow:0 0 7px rgba(43,242,135,.7)}

/* p4: darker ground so the housings float, green structural accents */
body.p4{background-color:#D2DAE0;
  background-image:radial-gradient(circle at 22% 0%,rgba(255,255,255,.5) 0%,transparent 55%)}
body.p4 h1,body.p4 .pagehead h1{border-top-color:var(--amber)}
body.p4 .plastic{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.05),
  0 2px 3px rgba(var(--sh),.10),0 14px 30px -14px rgba(var(--sh),.40)}
body.p4 .towngrid,body.p4 .spec,body.p4 .steps,body.p4 .tierrow,body.p4 .cdet,
body.p4 .shot,body.p4 .photo{box-shadow:0 24px 46px -24px rgba(var(--sh),.55)}

/* ── Fig. 2 — client ticker (the names scroll like a message board) ── */
.ticker{margin:26px 0 0;background:linear-gradient(180deg,var(--paper-hi) 0%,var(--paper) 45%,var(--paper-lo) 100%);
  border:1px solid var(--edge);border-radius:16px;padding:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.04),
             0 2px 3px rgba(var(--sh),.06),0 20px 40px -22px rgba(var(--sh),.35)}
.tickface{border-radius:10px;overflow:hidden;position:relative;
  background:linear-gradient(180deg,var(--face-hi),var(--face));
  box-shadow:inset 0 2px 7px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.06)}
.tickrun{display:flex;width:max-content}
.tickseq{display:flex;align-items:center;white-space:nowrap;padding:20px 0;
  animation:tickmove 60s linear infinite}
.ticker:hover .tickseq{animation-play-state:paused}
.tickseq b{font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--amber)}
.tickseq em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--disp-dim2);padding-left:10px}
.tickseq i{display:inline-block;width:6px;height:6px;transform:rotate(45deg);
  background:var(--orange);margin:0 26px;flex:none}
@keyframes tickmove{from{transform:translateX(0)}to{transform:translateX(-100%)}}
body.p4 .tickseq b{text-shadow:0 0 14px rgba(61,245,159,.35)}
@media(prefers-reduced-motion:reduce){
  .tickrun{width:auto}
  .tickseq{animation:none;flex-wrap:wrap;white-space:normal;padding:14px 16px;gap:10px 0}
  .tickseq[aria-hidden="true"]{display:none}
}
@media(max-width:620px){
  .tickseq b{font-size:12.5px}
  .tickseq{padding:15px 0}
  .tickseq i{margin:0 16px}
}

/* ── Fig. 5 animation — the call travels the wire. Starts when the figure
   scrolls into view (.live added by site.js); still image for reduced motion. ── */
.schem .pulse{fill:var(--led);opacity:0;filter:drop-shadow(0 0 6px rgba(61,245,159,.9))}
@media (prefers-reduced-motion: no-preference){
  .schem.live .n-caller{animation:sp-ring 7.5s linear infinite;transform-box:fill-box;transform-origin:center}
  .schem.live .n-cloud{animation:sp-cloud 7.5s linear infinite}
  .schem.live .n-rack{animation:sp-rack 7.5s linear infinite}
  .schem.live .n-bldg{animation:sp-bldg 7.5s linear infinite}
  .schem.live .n-comp,.schem.live .n-desk,.schem.live .n-mob{animation:sp-end 7.5s linear infinite}
  .schem.live .p-main{animation:sp-main 7.5s linear infinite}
  .schem.live .p-up{animation:sp-up 7.5s linear infinite}
  .schem.live .p-mid{animation:sp-mid 7.5s linear infinite}
  .schem.live .p-dn{animation:sp-dn 7.5s linear infinite}
}
@keyframes sp-ring{0%,1%{transform:translateX(0)}2%{transform:translateX(-1.6px)}3%{transform:translateX(1.6px)}4%{transform:translateX(-1.4px)}5%{transform:translateX(1.2px)}6%,100%{transform:translateX(0)}}
@keyframes sp-main{
  0%,8%{transform:translate(100px,96px);opacity:0}
  9%{opacity:1}
  20%{transform:translate(232px,96px);opacity:1}
  21%{opacity:0}
  24%{transform:translate(304px,96px);opacity:0}
  25%{opacity:1}
  36%{transform:translate(432px,96px);opacity:1}
  37%{opacity:0}
  40%{transform:translate(504px,96px);opacity:0}
  41%{opacity:1}
  50%{transform:translate(632px,96px);opacity:1}
  51%{opacity:0}
  54%{transform:translate(704px,96px);opacity:0}
  55%{opacity:1}
  62%{transform:translate(792px,96px);opacity:1}
  63%,100%{transform:translate(792px,96px);opacity:0}
}
@keyframes sp-up{0%,62%{transform:translate(792px,96px);opacity:0}63%{opacity:1}68%{transform:translate(792px,-50px)}74%{transform:translate(864px,-50px);opacity:1}76%,100%{transform:translate(864px,-50px);opacity:0}}
@keyframes sp-mid{0%,62%{transform:translate(792px,96px);opacity:0}63%{opacity:1}74%{transform:translate(864px,96px);opacity:1}76%,100%{transform:translate(864px,96px);opacity:0}}
@keyframes sp-dn{0%,62%{transform:translate(792px,96px);opacity:0}63%{opacity:1}68%{transform:translate(792px,236px)}74%{transform:translate(864px,236px);opacity:1}76%,100%{transform:translate(864px,236px);opacity:0}}
@keyframes sp-cloud{0%,18%,27%,100%{stroke:var(--ink-2);filter:drop-shadow(0 0 0 rgba(61,245,159,0))}21%{stroke:var(--led);filter:drop-shadow(0 0 7px rgba(61,245,159,.85))}}
@keyframes sp-rack{0%,33%,52%,100%{stroke:var(--orange);filter:drop-shadow(0 0 0 rgba(61,245,159,0))}39%,45%{stroke:var(--led);filter:drop-shadow(0 0 10px rgba(61,245,159,.9))}}
@keyframes sp-bldg{0%,47%,57%,100%{stroke:var(--ink-2);filter:drop-shadow(0 0 0 rgba(61,245,159,0))}51%{stroke:var(--led);filter:drop-shadow(0 0 8px rgba(61,245,159,.85))}}
@keyframes sp-end{0%,71%,88%,100%{stroke:var(--ink-2);filter:drop-shadow(0 0 0 rgba(61,245,159,0))}76%,82%{stroke:var(--led);filter:drop-shadow(0 0 8px rgba(61,245,159,.85))}}

/* ═══════════ VERSION A — signal up, noise down ═══════════ */

/* header phone number, old-site style but ours */
.nav a.hnum{font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:-.3px;
  color:var(--amber);background:linear-gradient(180deg,var(--face-hi),var(--face));
  border:1px solid rgba(61,245,159,.25);text-shadow:0 0 10px rgba(61,245,159,.35);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.6);padding:9px 14px}
.nav a.hnum:hover{transform:none;color:var(--amber)}

/* mobile-only nav links + sticky call bar (hidden on desktop) */
.mnav{display:none}
.callbar{display:none}

/* ── PHONE, REBUILT ── */
@media(max-width:620px){
  /* the rail (and its stripe) is gone on phones */
  .rail{display:none}

  /* compact header: logo left, quote key right, slim text links under */
  .hin{flex-direction:row;align-items:center;gap:10px;padding:14px 0 8px}
  .logo{font-size:24px;align-self:center}
  .nav{display:flex;margin-left:auto;width:auto;gap:6px}
  .nav a{display:none}
  .nav a.hot{display:inline-block;padding:11px 14px;font-size:10px;text-align:center}
  .mnav{display:flex;flex-wrap:wrap;gap:2px 16px;padding:0 0 12px;
    font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}
  .mnav a{color:var(--ink-2);text-decoration:none;padding:5px 0}

  /* the unit (number + prices) comes FIRST; keys/days rows hidden for speed */
  .hgrid{display:flex;flex-direction:column;gap:26px;padding-top:6px}
  .hgrid>div:first-child{order:2}
  .fstrip,.days{display:none}
  .unit{padding:9px}
  .rnum{font-size:34px;letter-spacing:-.5px}
  .caption{margin-top:9px}

  h1{font-size:29px !important;letter-spacing:-1px !important;padding-top:12px}
  .blurb{font-size:15px;margin-top:14px}
  .inc li{padding:8px 0;font-size:10px}

  /* sticky call bar — the whole point */
  .callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg,var(--case-hi),var(--case));
    box-shadow:0 -10px 26px rgba(0,0,0,.5)}
  .callbar a{flex:1;text-align:center;text-decoration:none;border-radius:9px;
    font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.04em;padding:13px 6px}
  .cb-call{color:var(--amber);background:linear-gradient(180deg,var(--face-hi),var(--face));
    border:1px solid rgba(61,245,159,.3);text-shadow:0 0 12px rgba(61,245,159,.4);
    box-shadow:inset 0 1px 4px rgba(0,0,0,.6)}
  .cb-quote{color:#fff;background:linear-gradient(180deg,var(--or-hi),var(--or-lo));
    border:1px solid var(--or-edge);letter-spacing:.1em;text-transform:uppercase;font-size:11px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
  body{padding-bottom:76px}

  /* denser info grids so the scroll is shorter */
  .specbody{grid-template-columns:1fr 1fr !important;}
  .cell{padding:12px 12px}
  .cell b{font-size:14px;margin-bottom:3px}
  .cell .st{font-size:11px;line-height:1.35}
  .towngrid.four{grid-template-columns:1fr 1fr !important}
  .towngrid div{padding:11px 12px}
  .towngrid b{font-size:13.5px}
  .towngrid span{font-size:8px}
  .sec{padding:36px 0 0}
  .sec h2{font-size:21px}
  .tickseq{padding:12px 0}
  .tickseq b{font-size:11.5px}
}

/* ═══ BACKGROUND EXPLORATIONS (add class to <body> alongside p4) ═══ */

/* warm cream ground */
body.bg-cream{background:#EFE8D9;background-image:radial-gradient(circle at 22% 0%,#F8F3E6 0%,transparent 55%)}

/* near-white ground */
body.bg-white{background:#F4F6F8;background-image:radial-gradient(circle at 22% 0%,#FFFFFF 0%,transparent 55%)}

/* DARK ground — light housings float on near-black, text outside housings lightens */
body.bg-dark{background-color:#161D24;background-image:linear-gradient(180deg,#242D35 0%,#161D24 40%,#0C1218 100%);background-attachment:fixed;color:#E8EEF2}
body.bg-dark h1{color:#F2F6F9;border-top-color:var(--amber)}
body.bg-dark .blurb{color:#B9C6CF}
body.bg-dark .blurb b{color:#FFFFFF}
body.bg-dark .inc{border-top-color:#3A4650}
body.bg-dark .inc li{color:#C6D2DA;border-bottom-color:#333F49}
body.bg-dark .sec h2{color:#F2F6F9}
body.bg-dark .sec p.lede{color:#B9C6CF}
body.bg-dark .sec p.lede b{color:#fff}
body.bg-dark .caption,body.bg-dark .footnote{color:#93A4B0}
body.bg-dark .fighead{border-bottom-color:#3A4650}
body.bg-dark .fighead i{background:#3A4650}
body.bg-dark .fighead .ftitle{color:#E8EEF2}
body.bg-dark .fighead .frange{color:#93A4B0}
body.bg-dark .mnav a{color:#B9C6CF}
body.bg-dark .g2w .panel p{color:var(--ink-2)}
body.bg-dark .sitefoot{border-top-color:#3A4650}
body.bg-dark .footgrid a{color:#B9C6CF}
body.bg-dark .footgrid address{color:#B9C6CF}
body.bg-dark .footgrid h5{color:#7E8E9A}
body.bg-dark .footbot{border-top-color:#3A4650;color:#7E8E9A}
body.bg-dark .footbot a{color:#7E8E9A}
body.bg-dark .logo .lt{color:#F2F6F9}
body.bg-dark .caption{color:#93A4B0}

body.bg-dark .cta{border:1px solid #3A4650;box-shadow:0 26px 52px -24px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06)}
body.bg-dark .ticker{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 26px 48px -22px rgba(0,0,0,.8)}

/* ═══ ACCENT EXPLORATIONS — swap every orange via the variables ═══ */
body.acc-cyan{--orange:#22B8E6;--or-hi:#3FD0FF;--or-lo:#0EA5D6;--or-edge:#0B8DB8}
body.acc-violet{--orange:#8E7BFF;--or-hi:#A895FF;--or-lo:#7A63F2;--or-edge:#6650E0}
body.acc-amber{--orange:#FFB324;--or-hi:#FFC44E;--or-lo:#F0A000;--or-edge:#D18C00}

/* bg-dark coverage for inner pages */
body.bg-dark .pagehead h1{color:#F2F6F9;border-top-color:var(--amber)}
body.bg-dark .pagehead .sub{color:#B9C6CF}
body.bg-dark .pagehead .sub b{color:#FFFFFF}
body.bg-dark .faq{border-top-color:#3A4650}
body.bg-dark .faq details{border-bottom-color:#3A4650}
body.bg-dark .faq summary{color:#E8EEF2}
body.bg-dark .faq p{color:#B9C6CF}
body.bg-dark .legal h3{color:#F2F6F9}
body.bg-dark .legal p,body.bg-dark .legal li{color:#B9C6CF}
body.bg-dark .fld span{color:#93A4B0}
body.bg-dark .formnote{color:#8FA0AC}
body.bg-dark .schem,body.bg-dark .schem-m{--ink:#EDF3F7;--ink-2:#A9BAC6;--grey:#8FA0AC;--edge-2:#4A5864}
body.bg-dark .schem-m .st b{color:#EDF3F7}
body.bg-dark .schem-m li.hot .st b{color:var(--orange)}
body.bg-dark .schem-m .st em,body.bg-dark .schem-m .sw{color:#A9BAC6}
body.bg-dark .schem-m li::before{background:#4A5864}
body.bg-dark .photo figcaption,body.bg-dark .shot figcaption{color:var(--grey)}

/* ── DARK GROUND FIX (Aug 13): text inside LIGHT housings must stay dark ink.
   body.bg-dark sets a light page colour and headings/bold with no colour of their
   own were inheriting it inside the light plastic (town names, "Who it suits",
   step titles, tier names, panel headings). Zero-specificity so any explicit
   colour rule (orange annotations, grey labels) still wins. ── */
:where(body.bg-dark) :where(.plastic,.unit,.cell,.panel,.step,.tierc,.formwrap,.cdet div,.towngrid div,.qc,.photo,.shot,.ticker,.knollbox){color:var(--ink)}

/* Contact: the form column and the direct column end on the same line */
@media(min-width:901px){
  .g2w.cols-even{align-items:stretch}
  .g2w.cols-even>div{display:flex;flex-direction:column}
  .g2w.cols-even .formwrap,.g2w.cols-even .panel{flex:1}
}

/* Contact form result banners */
.formok,.formerr{margin-top:6px;border-radius:12px;padding:18px 20px;border:1px solid var(--edge);
  background:linear-gradient(180deg,var(--paper-hi),var(--paper-lo))}
.formok{border-left:3px solid var(--green)}
.formerr{border-left:3px solid var(--orange)}
.formok b,.formerr b{display:block;font-size:17px;letter-spacing:-.3px;margin:6px 0 6px;color:var(--ink)}
.formok p,.formerr p{font-size:14.5px;color:var(--ink-2);margin:0}
.formok a,.formerr a{color:var(--ink);font-weight:600}
#quote-form.sent .fgrid2,#quote-form.sent .fld,#quote-form.sent .subm{display:none}