/* commercialroofinghoustontexas.com
   Modern layout language (dark utility strip, white masthead, eyebrow labels
   above every heading, split blocks, dark CTA bands, details-FAQ, map over a
   dark footer) but a palette and type pairing that share nothing with any other
   site in the portfolio.

   Rosharon = gulf navy / teal / amber, Archivo + Public Sans, pill buttons.
   This = graphite / oxide red / steel, Chivo + IBM Plex Sans + IBM Plex Mono,
   squared buttons, mono eyebrows and mono figures. The register is a spec
   sheet, which is what a facilities manager buying a 40,000 sf roof reads all
   day anyway. */

:root{
  --graphite:#16181D;
  --graphite-2:#1F232A;
  --oxide:#B23A17;
  --oxide-dk:#8E2C0F;
  --oxide-lt:#D9754F;
  --steel:#4C5D6B;
  --steel-dk:#33424E;
  --ink:#14171C;
  --body:#43505C;
  --line:#DEDAD3;
  --line-2:#E9E5DE;
  --concrete:#EFECE7;
  --concrete-2:#F7F5F2;
  --white:#fff;
  --maxw:1150px;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.7;
  color:var(--body);
  background:var(--white);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--oxide-dk)}
a:hover{color:var(--oxide)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--oxide);color:#fff;padding:10px 16px}

h1,h2,h3,h4,.fname,.mtext strong,.cb-h{
  font-family:Chivo,"IBM Plex Sans",Helvetica,Arial,sans-serif;
  color:var(--ink);
  letter-spacing:-.02em;
  font-weight:700;
  line-height:1.14;
}
h1{font-size:clamp(2rem,4.3vw,3.05rem);margin:0 0 .5em;font-weight:900}
h2{font-size:clamp(1.5rem,2.85vw,2.1rem);margin:0 0 .6em}
h3{font-size:1.18rem;margin:1.9em 0 .5em;line-height:1.32}
h4{font-size:1.02rem;margin:1.6em 0 .4em}
p{margin:0 0 1.15em}
strong{color:var(--ink);font-weight:600}

/* The signature move: a mono, letterspaced label above every section heading,
   prefixed with a short rule so it reads as a drawing callout rather than as a
   generic kicker. */
.eyebrow{
  font-family:var(--mono);
  font-size:.685rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--oxide);
  margin:0 0 1em;
  display:flex;
  align-items:center;
  gap:11px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--oxide);flex:0 0 auto}
.callband .eyebrow,.hero .eyebrow,.stats .eyebrow{color:var(--oxide-lt)}
.callband .eyebrow::before,.hero .eyebrow::before,.stats .eyebrow::before{background:var(--oxide-lt)}

/* --------------------------------------------------------------- buttons */
/* Squared, not pills. Different silhouette from every other portfolio site. */
.btn{
  display:inline-block;
  background:var(--oxide);
  color:#fff;
  font-weight:700;
  font-family:Chivo,sans-serif;
  letter-spacing:.005em;
  text-decoration:none;
  padding:14px 28px;
  border-radius:3px;
  border:2px solid var(--oxide);
  transition:background .14s,border-color .14s;
}
.btn:hover{background:var(--oxide-dk);border-color:var(--oxide-dk);color:#fff}
.btn-lg{padding:17px 40px;font-size:1.12rem}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:#fff;border-color:#fff;color:var(--graphite)}
.btn-hd{padding:11px 22px;font-size:.94rem;white-space:nowrap}

/* --------------------------------------------------- utility strip + header */
.ustrip{background:var(--graphite);color:#A9B2BC;font-size:.79rem}
.ustrip-in{display:flex;align-items:center;gap:26px;min-height:40px;flex-wrap:wrap}
.us-item{white-space:nowrap}
.us-mid{margin-right:auto;white-space:normal}
.us-tel{color:#fff;font-family:var(--mono);font-weight:600;text-decoration:none;letter-spacing:.03em}
.us-tel:hover{color:var(--oxide-lt)}

.mast{background:var(--white);border-bottom:1px solid var(--line);position:relative;z-index:40}
.masti{display:flex;align-items:center;gap:28px;min-height:84px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.mtext{display:flex;flex-direction:column;line-height:1.08}
.mtext strong{font-size:1.2rem;color:var(--graphite);font-weight:900}
.mtext em{font-family:var(--mono);font-style:normal;font-size:.64rem;letter-spacing:.19em;text-transform:uppercase;color:var(--oxide);font-weight:500;margin-top:4px}

/* Nav. Only `.nav ul.lvl1` is ever flexed and only `.nav ul.sub` is ever
   hidden/positioned. There is deliberately no bare `.nav ul{}` rule in this
   file, which is the specificity trap that left a dropdown stuck open once. */
.nav{margin-left:auto}
.nav ul.lvl1{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav ul.lvl1>li{position:relative}
.nav ul.lvl1>li>a{
  display:block;padding:12px 12px;text-decoration:none;
  color:var(--ink);font-weight:600;font-size:.92rem;border-radius:3px;
}
.nav ul.lvl1>li>a:hover,.nav ul.lvl1>li>a.on{background:var(--concrete);color:var(--oxide-dk)}
.car{font-size:.6em;opacity:.5;margin-left:2px}

.nav ul.sub{
  display:none;position:absolute;top:100%;left:0;z-index:60;
  min-width:290px;list-style:none;margin:0;padding:8px 0;
  background:var(--white);border:1px solid var(--line);border-top:3px solid var(--oxide);
  box-shadow:0 18px 40px rgba(22,24,29,.16);
}
.nav li.has-sub:hover>ul.sub,.nav li.has-sub:focus-within>ul.sub{display:block}
.nav ul.sub li{margin:0}
.nav ul.sub a{
  display:block;padding:8px 20px;text-decoration:none;color:var(--body);
  font-size:.885rem;line-height:1.4;
}
.nav ul.sub a:hover,.nav ul.sub a.on{background:var(--concrete);color:var(--oxide-dk)}
.nav ul.sub li.keyitem>a{color:var(--ink);font-weight:600}
.nav ul.sub li.sublast{border-top:1px solid var(--line-2);margin-top:7px;padding-top:5px}
.nav ul.sub li.sublast a{color:var(--oxide-dk);font-weight:600}
.nav ul.sub.sub-city{column-count:2;column-gap:0;min-width:420px}

/* ------------------------------------------------------------------- hero */
.hero{position:relative;background:var(--graphite);color:#C9D0D8;overflow:hidden}
.hero .hbg{position:absolute;inset:0}
.hero .hbg img{width:100%;height:100%;object-fit:cover;opacity:.4}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(78deg,rgba(22,24,29,.95) 0%,rgba(22,24,29,.84) 52%,rgba(22,24,29,.34) 100%);
}
.hero .wrap{position:relative;z-index:2;padding-top:76px;padding-bottom:0}
.hero h1{color:#fff;max-width:17ch}
.hero .lede{font-size:1.13rem;max-width:60ch;color:#BAC4CE;margin-bottom:1.7em}
.hero .hcta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:32px}
.hero .hnote{font-size:.89rem;color:#93A0AC}
.hclaims{list-style:none;margin:0 0 20px;padding:0;display:flex;gap:32px;flex-wrap:wrap}
.hclaims li{font-family:Chivo,sans-serif;font-weight:700;color:#fff;font-size:.97rem;position:relative;padding-left:20px}
.hclaims li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;background:var(--oxide)}
.hrate{font-size:.91rem;color:#93A0AC;border-top:1px solid rgba(255,255,255,.13);padding-top:18px;margin:0 0 0}

/* Spec strip: a mono band of the systems we install, welded to the bottom of
   the hero. Reads like the legend on a roof plan. */
.specstrip{
  position:relative;z-index:2;margin-top:44px;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;
}
.specstrip span{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:#93A0AC;padding:16px 26px 16px 0;
}
.specstrip span b{color:var(--oxide-lt);font-weight:500}

/* -------------------------------------------------------------- sections */
.sec{padding:76px 0}
.sec-panel{background:var(--concrete)}
.sec-soft{background:var(--concrete-2)}
.sec-tight{padding:52px 0}
.lead-in{max-width:64ch}

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev .sp-txt{order:2}
.sp-txt>*:last-child{margin-bottom:0}

figure.shot{margin:0}
figure.shot img{border-radius:4px;width:100%}
figure.wide img{width:100%;max-height:420px;object-fit:cover;border-radius:4px}
figcaption{font-family:var(--mono);font-size:.73rem;letter-spacing:.06em;color:#7E8B96;margin-top:9px;line-height:1.5}

.crumbs{background:var(--concrete);border-bottom:1px solid var(--line);font-size:.82rem;padding:11px 0;color:#75828D;font-family:var(--mono);letter-spacing:.03em}
.crumbs a{color:var(--oxide-dk);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{opacity:.45;margin:0 4px}

/* ------------------------------------------------------------ pain grid */
.pains{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 34px;align-items:start}
.pains li{position:relative;padding-left:28px;font-size:.98rem}
.pains li::before{
  content:"";position:absolute;left:0;top:.6em;width:11px;height:11px;
  border:3px solid var(--oxide);
}
.pains li strong{display:block;color:var(--ink)}

/* ------------------------------------------------- service grid (two-up) */
/* align-items:start is load-bearing. Without it every card stretches to the
   tallest in its row and the section becomes a wall of identical rectangles,
   which is the uniform-card tell. Copy lengths stay deliberately uneven. */
.svcgrid{display:grid;grid-template-columns:1fr 1fr;gap:52px 46px;align-items:start}
.svcblock{margin:0}
.svcblock img{height:200px;width:100%;object-fit:cover;border-radius:4px;margin-bottom:18px}
.svcblock h2{font-size:1.2rem;margin:0 0 .45em}
.svcblock h2 a{color:var(--ink);text-decoration:none}
.svcblock h2 a:hover{color:var(--oxide-dk)}
.svcblock p{font-size:.975rem;margin-bottom:.85em}
.svcblock p:last-child{margin-bottom:0}
.svcblock ul{margin:.2em 0 1em;padding-left:19px;font-size:.95rem}
.svcblock ol{margin:.2em 0 1em;padding-left:21px;font-size:.95rem}
.svcblock li{margin-bottom:.28em}
.more{font-weight:600;font-size:.92rem}

/* ------------------------------------------------------------ how it works */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;align-items:start}
.steps li{counter-increment:s;position:relative;padding-top:54px}
.steps li::before{
  content:"0" counter(s);position:absolute;top:0;left:0;
  font-family:var(--mono);font-weight:600;font-size:1.05rem;letter-spacing:.06em;
  color:var(--oxide);
  border-bottom:2px solid var(--oxide);padding-bottom:5px;
}
.steps h3{margin:0 0 .45em;font-size:1.06rem}
.steps p{font-size:.955rem;margin-bottom:.7em}
.steps p:last-child{margin-bottom:0}

/* ------------------------------------------------------------ before/after */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.ba-panel h3{margin:0 0 .5em;font-size:1.1rem}
.ba-panel .tag{
  display:inline-block;font-family:var(--mono);font-weight:500;font-size:.68rem;
  letter-spacing:.17em;text-transform:uppercase;padding:5px 11px;margin-bottom:14px;
}
.ba-panel.before .tag{background:#F2DED8;color:#8E2C0F}
.ba-panel.after .tag{background:#DCE4E2;color:#2C4A43}
.ba-panel img{border-radius:4px;margin-bottom:18px;height:270px;width:100%;object-fit:cover}
.ba-panel ul{margin:.5em 0 0;padding-left:19px;font-size:.95rem}
.ba-panel li{margin-bottom:.35em}

/* ---------------------------------------------------------------- stats */
.stats{background:var(--graphite-2);color:#fff;padding:46px 0}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.stat{display:flex;flex-direction:column;gap:6px;border-left:2px solid var(--oxide);padding-left:18px}
.sfig{font-family:var(--mono);font-size:1.85rem;font-weight:600;color:#fff;line-height:1.1;letter-spacing:-.01em}
.slab{font-size:.84rem;color:#A9B2BC;line-height:1.45}

/* ------------------------------------------------------------- call band */
.callband{background:var(--graphite);color:#BAC4CE;padding:64px 0;text-align:center}
.cb-in{display:flex;flex-direction:column;align-items:center}
.cb-in .eyebrow{justify-content:center}
.cb-h{font-size:clamp(1.38rem,2.5vw,1.82rem);color:#fff;margin:0 0 .5em;line-height:1.22}
.cb-sub{max-width:62ch;margin:0 auto 1.7em;font-size:1.01rem}
.cb-badges{list-style:none;margin:26px 0 0;padding:0;display:flex;justify-content:center;gap:14px 32px;flex-wrap:wrap;font-size:.86rem;color:#93A0AC}
.cb-badges li{position:relative;padding-left:18px}
.cb-badges li::before{content:"";position:absolute;left:0;top:.56em;width:7px;height:7px;background:var(--oxide)}

/* ---------------------------------------------------------------- tables */
/* Spec-sheet ruling: heavy rule top and under the head, hairlines between
   rows, no vertical borders, figures in mono. Deliberately unlike the boxed
   grid tables on the other portfolio sites. */
.tablewrap{overflow-x:auto;margin:2em 0}
table.dt,table.wide{width:100%;border-collapse:collapse;font-size:.93rem;background:transparent}
table caption{
  text-align:left;font-family:Chivo,sans-serif;font-weight:700;color:var(--ink);
  font-size:1.01rem;padding:0 0 12px;line-height:1.4;
}
table.dt th,table.dt td,table.wide th,table.wide td{
  padding:11px 16px 11px 0;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-2);
}
table.dt thead th,table.wide thead th{
  font-family:var(--mono);font-weight:500;color:var(--graphite);
  font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  border-top:2px solid var(--graphite);border-bottom:2px solid var(--graphite);
  padding-top:10px;padding-bottom:10px;
}
table.dt tbody th,table.wide tbody th{color:var(--ink);font-weight:600;width:26%}
table.dt tbody td,table.wide tbody td{font-family:var(--mono);font-size:.86rem;color:var(--body);letter-spacing:-.01em}
table.dt tbody td.tx,table.wide tbody td.tx{font-family:inherit;font-size:.93rem}
.sec-panel table.dt tbody tr:hover td,.sec-panel table.dt tbody tr:hover th{background:rgba(178,58,23,.05)}
.tnote{font-size:.845rem;color:#75828D;margin:.8em 0 0;line-height:1.6}

/* ------------------------------------------------------------- key boxes */
.keybox{
  background:var(--concrete);border-left:4px solid var(--graphite);
  padding:26px 30px;margin:2em 0;
}
.keybox h3{margin-top:0;font-size:1.06rem}
.keybox>*:last-child{margin-bottom:0}
.keybox ul{padding-left:19px;margin:.6em 0 1em}
.keybox li{margin-bottom:.4em}

.warnbox{
  background:#FAEDE8;border-left:4px solid var(--oxide);
  padding:26px 30px;margin:2em 0;
}
.warnbox>*:last-child{margin-bottom:0}

/* Spec list: label/value pairs in mono, used on system pages */
.speclist{list-style:none;margin:1.4em 0;padding:0;border-top:2px solid var(--graphite)}
.speclist li{
  display:flex;gap:20px;flex-wrap:wrap;padding:10px 0;
  border-bottom:1px solid var(--line-2);margin:0;font-size:.93rem;
}
.speclist li b{
  font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--steel);flex:0 0 190px;padding-top:3px;
}

/* ---------------------------------------------------------- testimonials */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:start}
.rev{background:var(--white);border:1px solid var(--line);padding:26px 28px}
.rev p{font-size:.95rem;margin-bottom:1em}
.rev p strong{color:var(--ink)}
.rev .who{display:flex;align-items:center;gap:11px;margin:0;font-size:.85rem;color:#75828D}
.rev .who img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.rev .who b{display:block;color:var(--ink);font-size:.93rem;font-weight:600}
.stars{color:var(--oxide);letter-spacing:.12em;font-size:.88rem;margin:0 0 .7em}

/* ------------------------------------------------------------------- faq */
.faq{background:var(--concrete);padding:76px 0}
details.fq{border-bottom:1px solid var(--line);padding:6px 0}
details.fq summary{cursor:pointer;list-style:none;padding:16px 34px 16px 0;position:relative}
details.fq summary::-webkit-details-marker{display:none}
details.fq summary h3{display:inline;margin:0;font-size:1.04rem;color:var(--ink)}
details.fq summary::after{
  content:"+";position:absolute;right:4px;top:13px;
  font-family:var(--mono);font-size:1.35rem;color:var(--oxide);line-height:1;
}
details.fq[open] summary::after{content:"\2013"}
.fqa{padding:0 34px 20px 0;font-size:.975rem}
.fqa>*:last-child{margin-bottom:0}
.fqa ul{padding-left:19px}

/* ------------------------------------------------------------------- map */
.mapbox{margin:0;line-height:0}
.mapbox iframe{width:100%;height:400px;border:0;display:block;filter:grayscale(.35)}

/* --------------------------------------------------------------- listing */
.linkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 34px;align-items:start;list-style:none;margin:0;padding:0}
.linkgrid li{margin:0}
.linkgrid h3{margin:0 0 .35em;font-size:1.03rem}
.linkgrid h3 a{color:var(--ink);text-decoration:none}
.linkgrid h3 a:hover{color:var(--oxide-dk)}
.linkgrid p{font-size:.92rem;margin:0}

.avail{background:var(--concrete);padding:30px 32px;margin:2.4em 0;border-top:3px solid var(--graphite)}
.avail h3{margin-top:0}
.avail p:last-child{margin-bottom:0}

/* ----------------------------------------------------------- calculator */
.calc{background:var(--graphite);color:#BAC4CE;padding:34px 36px;margin:2.4em 0}
.calc h3{color:#fff;margin-top:0}
.calc label{display:block;font-family:var(--mono);font-size:.71rem;letter-spacing:.12em;text-transform:uppercase;color:var(--oxide-lt);margin:16px 0 6px;font-weight:500}
.calc input,.calc select{
  width:100%;padding:11px 13px;border-radius:3px;border:1px solid #39414B;
  background:#0F1115;color:#fff;font-family:var(--mono);font-size:.98rem;
}
.calcout{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.calcout .big{font-family:var(--mono);font-weight:600;font-size:1.8rem;color:#fff;display:block;line-height:1.2}
.calcnote{font-size:.84rem;color:#93A0AC;margin:.7em 0 0}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--graphite);color:#A9B2BC;padding:64px 0 0;font-size:.91rem}
.footgrid{display:grid;grid-template-columns:1.55fr 1fr 1fr 1fr;gap:44px}
.fbiz{max-width:38ch}
.fname{font-size:1.12rem;color:#fff;margin:0 0 .45em}
.fadr{margin:0 0 .5em;line-height:1.6;font-family:var(--mono);font-size:.86rem}
.fphone a{color:#fff;font-family:var(--mono);font-weight:600;font-size:1.24rem;text-decoration:none;letter-spacing:-.01em}
.fphone a:hover{color:var(--oxide-lt)}
.fhrs{font-size:.85rem;margin:.8em 0 1em}
.fver{font-size:.81rem;line-height:1.65;color:#8B949E}
.fver a{color:#C2CAD2}
.fh{font-family:var(--mono);font-weight:500;color:#fff;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 1.1em}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol li{margin-bottom:.55em;line-height:1.45}
.fcol a{color:#A9B2BC;text-decoration:none;font-size:.89rem}
.fcol a:hover{color:var(--oxide-lt)}
.footbot{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.1);margin-top:52px;padding-top:22px;padding-bottom:26px;
  font-size:.82rem;
}
.footbot p{margin:0}
.legal{list-style:none;display:flex;gap:22px;margin:0;padding:0}

/* ------------------------------------------------------------ sticky bar */
.sticky{display:none}

/* -------------------------------------------------------------- prose bits */
main ul,main ol{padding-left:21px}
main li{margin-bottom:.4em}
.sec .wrap>p,.sec .wrap>ul,.sec .wrap>ol,.sec .wrap>h3,.sec .wrap>h4{max-width:76ch}
.wide-body .wrap>p,.wide-body .wrap>ul{max-width:none}
.smallprint{font-size:.85rem;color:#75828D}
.srcnote{font-size:.84rem;color:#75828D;border-top:1px solid var(--line);padding-top:16px;margin-top:2.4em}

/* -------------------------------------------------------------- responsive */
@media (max-width:1020px){
  .footgrid{grid-template-columns:1fr 1fr}
  .fbiz{grid-column:1/-1;max-width:none}
  .statgrid{grid-template-columns:1fr 1fr;gap:30px}
  .linkgrid{grid-template-columns:1fr 1fr}
  .revs{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:26px}
  .nav{display:none}
  .masti{min-height:70px}
  .us-mid{display:none}
}
@media (max-width:860px){
  body{font-size:16px}
  .sec{padding:52px 0}
  .faq{padding:52px 0}
  .split{grid-template-columns:1fr;gap:32px}
  .split.rev .sp-txt{order:0}
  .ba{grid-template-columns:1fr;gap:34px}
  .hero .wrap{padding-top:52px}
  .hclaims{gap:8px 24px}
  .speclist li b{flex:0 0 100%}
}
@media (max-width:760px){
  /* Two columns of 150px is unreadable. Drop to one column and shrink the
     photo rather than keeping the grid; vertical scroll on a phone is cheap. */
  .svcgrid{grid-template-columns:1fr;gap:40px}
  .svcblock img{height:172px}
  .pains{grid-template-columns:1fr;gap:12px}
  .linkgrid{grid-template-columns:1fr}
  .footgrid{grid-template-columns:1fr;gap:34px}
  .btn-hd{display:none}
  .footbot{flex-direction:column;align-items:flex-start}
  body{padding-bottom:62px}
  .sticky{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:var(--oxide);align-items:center;justify-content:center;
    flex-direction:column;padding:8px 12px;
    box-shadow:0 -3px 14px rgba(22,24,29,.24);
  }
  .sticky a{color:#fff;font-family:var(--mono);font-weight:600;font-size:1.05rem;text-decoration:none;line-height:1.2}
  .sticky-note{font-size:.71rem;color:#F6D9CF;letter-spacing:.03em}
}
@media (max-width:520px){
  .statgrid{grid-template-columns:1fr;gap:20px}
  .ustrip-in{justify-content:center;gap:14px}
  .calc{padding:24px 22px}
  .keybox,.warnbox{padding:20px 22px}
  .specstrip span{padding:12px 20px 12px 0;font-size:.68rem}
}