/* =========================================================================
   site.css — the component layer.

   Structure of this file mirrors the structure of a page, top to bottom:
   reset, masthead, hero, section rhythm, spec tables, data blocks, dark
   bands, forms, footer, mobile.

   THE ONE RULE. Every measurement, temperature, price and code on this site
   is set in the mono family and letterspaced. Every label above a section is
   mono, uppercase and small. That contrast — a plain grotesk for prose, a
   monospace for anything measured — is what makes the site read as an
   instrument rather than a brochure, and it is the thing to preserve if any
   of this is ever edited.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--sans);
  font-size:var(--t-base);
  line-height:var(--lh-body);
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto}
a{color:var(--teal-600);text-underline-offset:.16em;text-decoration-thickness:1px}
a:hover{color:var(--teal-500)}
:focus-visible{outline:var(--focus);outline-offset:2px}

h1,h2,h3,h4{
  font-family:var(--sans);
  color:var(--ink);
  letter-spacing:var(--track-tight);
  line-height:var(--lh-tight);
  font-weight:700;
  margin:0 0 var(--s4);
}
h1{font-size:clamp(2rem,5.4vw,var(--t-3xl));font-weight:800}
h2{font-size:clamp(1.5rem,3.4vw,var(--t-xl))}
h3{font-size:var(--t-md);line-height:var(--lh-snug)}
p{margin:0 0 var(--s4);max-width:var(--measure)}
ul,ol{max-width:var(--measure)}
strong{color:var(--ink);font-weight:600}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s4);top:var(--s4);z-index:99;background:var(--gr-900);color:#fff;padding:.6rem 1rem}

/* ---- the mono voice ---------------------------------------------------- */
.mono,.lbl,.kv__k,.spec th,.readout__k,.crumb,.tag{
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:var(--track-mono);
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:500;
}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* =========================================================================
   1. STATUS BAR + MASTHEAD
   The masthead is a fixed-height rule-bounded band, not a floating header.
   ========================================================================= */
.status{
  background:var(--gr-950);
  color:var(--on-dark-2);
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:var(--track-mono);
  text-transform:uppercase;
}
.status__in{
  max-width:var(--wrap);margin-inline:auto;padding:.5rem var(--s5);
  display:flex;gap:var(--s5);align-items:center;flex-wrap:wrap;
}
.status__in span{display:inline-flex;align-items:center;gap:.5rem}
.status__dot{width:6px;height:6px;background:var(--teal-500);display:inline-block}
.status a{color:var(--teal-300);text-decoration:none}
.status__tail{color:var(--gr-600)}

.mast{
  background:var(--gr-900);
  border-bottom:1px solid var(--gr-800);
}
.mast__in{
  max-width:var(--wrap);margin-inline:auto;padding:var(--s4) var(--s5);
  display:flex;align-items:center;gap:var(--s5);
}
/* THE BRAND BLOCK MUST BE ABLE TO SHRINK.
   "Toms River Commercial Refrigeration", set uppercase and unwrapped, is 383px
   wide. With `flex:none` it pushed the masthead to 566px on a 390px handset
   and every page on the site scrolled sideways — measured, not guessed.
   flex:0 1 auto plus min-width:0 lets it wrap instead of shoving. */
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;flex:0 1 auto;min-width:0}
.brand__mk{
  width:38px;height:38px;flex:none;
  border:1px solid var(--teal-500);
  display:grid;place-items:center;
}
.brand__t{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.brand__n{
  color:#fff;font-weight:800;font-size:1.02rem;letter-spacing:-.02em;
  text-transform:uppercase;
}
.brand__s{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-300);margin-top:.22rem;
}

.nav{margin-left:auto;display:flex;align-items:center;gap:var(--s5)}
.nav a{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--on-dark);text-decoration:none;
  padding:.35rem 0;border-bottom:1px solid transparent;
}
.nav a:hover{color:#fff;border-bottom-color:var(--teal-500)}
.nav .btn{border-bottom:none}

.hdr__act{margin-left:auto;display:none;align-items:center;gap:var(--s3)}
.hdr__tel{
  display:inline-grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--gr-700);color:var(--teal-300);
}
.burger{
  display:inline-flex;align-items:center;gap:.55rem;background:none;
  border:1px solid var(--gr-700);color:#fff;padding:.5rem .8rem;cursor:pointer;
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--track-mono);
  text-transform:uppercase;
}
.burger__bars{display:grid;gap:3px}
.burger__bars i{display:block;width:16px;height:1.5px;background:#fff}

/* =========================================================================
   2. BUTTONS — square, bordered, no shadow
   ========================================================================= */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--teal-500);color:var(--teal-ink);
  font-family:var(--mono);font-size:var(--t-sm);letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;
  padding:.85rem 1.4rem;text-decoration:none;border:1px solid var(--teal-500);
}
.btn:hover{background:var(--teal-600);border-color:var(--teal-600);color:#fff}
.btn--line{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn--line:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--sm{padding:.55rem 1rem;font-size:var(--t-xs)}
.btn--call{background:transparent;color:var(--teal-300);border-color:var(--teal-500)}
.btn--call:hover{background:var(--teal-500);color:var(--teal-ink)}
.on-dark .btn--line{color:#fff;border-color:var(--on-dark-rule)}
.on-dark .btn--line:hover{border-color:#fff;color:#fff}

/* =========================================================================
   3. HERO — full width, left aligned, readout strip beneath
   ========================================================================= */
.hero{background:var(--gr-900);color:var(--on-dark);padding:var(--s8) 0 0}
.hero .wrap{max-width:var(--wrap)}
.hero h1{color:#fff;max-width:19ch;margin-bottom:var(--s5)}
.hero h1 em{font-style:normal;color:var(--teal-300)}
.hero__lede{font-size:var(--t-md);color:var(--on-dark);max-width:56ch;line-height:1.55}
.hero__lbl{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--teal-300);margin:0 0 var(--s4);
}
.hero__cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}

.readout{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--on-dark-rule);margin-top:var(--s8);
}
.readout__c{padding:var(--s5) var(--s5) var(--s6) 0;border-right:1px solid var(--on-dark-rule)}
.readout__c:last-child{border-right:none}
.readout__c:not(:first-child){padding-left:var(--s5)}
.readout__k{display:block;color:var(--on-dark-2);margin-bottom:.5rem}
.readout__v{
  font-family:var(--mono);font-size:1.6rem;color:#fff;font-weight:600;
  letter-spacing:-.02em;display:block;line-height:1.1;
}
.readout__n{font-size:var(--t-sm);color:var(--on-dark-2);display:block;margin-top:.4rem;line-height:1.4}

/* =========================================================================
   4. SECTION RHYTHM — numbered, rule-topped, documentary
   ========================================================================= */
.sec{border-top:1px solid var(--rule);padding:var(--s8) 0}
.sec--first{border-top:none}
.sec__hd{display:flex;gap:var(--s5);align-items:baseline;margin-bottom:var(--s6);flex-wrap:wrap}
.sec__n{
  font-family:var(--mono);font-size:var(--t-sm);color:var(--teal-600);
  letter-spacing:.1em;flex:none;padding-top:.3rem;
}
.sec__t{flex:1 1 340px;min-width:0}
.sec__t h2{margin-bottom:var(--s3)}
.sec__t p{margin:0;color:var(--ink-2)}
.sec--dark{background:var(--gr-900);color:var(--on-dark);border-top:none}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark .sec__n{color:var(--teal-300)}
.sec--dark .sec__t p{color:var(--on-dark)}
.sec--band{background:var(--paper-2)}

/* =========================================================================
   5. SPEC TABLE — the primary way this site lists anything
   ========================================================================= */
.spec-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.spec{width:100%;border-collapse:collapse;min-width:520px}
.spec th{
  text-align:left;padding:0 var(--s4) .6rem 0;
  border-bottom:1px solid var(--rule-strong);white-space:nowrap;
}
.spec th:last-child,.spec td:last-child{text-align:right;padding-right:0}
.spec td{
  padding:var(--s4) var(--s4) var(--s4) 0;
  border-bottom:1px solid var(--rule);vertical-align:top;
}
.spec tr:hover td{background:rgba(0,179,154,.05)}
.spec__n{font-weight:600;color:var(--ink);text-decoration:none;display:block}
.spec__n:hover{color:var(--teal-600)}
.spec__d{font-size:var(--t-sm);color:var(--ink-2);margin:.35rem 0 0;max-width:56ch}
.spec__v{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.spec__u{display:block;font-size:var(--t-xs);color:var(--ink-3);margin-top:.25rem;text-transform:none;letter-spacing:0}
.sec--dark .spec th{border-bottom-color:var(--on-dark-rule);color:var(--on-dark-2)}
.sec--dark .spec td{border-bottom-color:var(--on-dark-rule)}
.sec--dark .spec__n{color:#fff}
.sec--dark .spec__d{color:var(--on-dark)}
.sec--dark .spec__v{color:var(--teal-300)}

.tag{
  display:inline-block;border:1px solid var(--rule-strong);
  padding:.16rem .5rem;color:var(--ink-3);white-space:nowrap;
}
.tag--emergency{border-color:var(--amber-500);color:#9A5C13}
.tag--planned{border-color:var(--rule-strong)}
.tag--project{border-color:var(--teal-600);color:var(--teal-600)}

/* =========================================================================
   6. KEY/VALUE DATA BLOCK — the town "site profile", the service header
   ========================================================================= */
.kv{border-top:1px solid var(--rule);margin:0 0 var(--s6)}
.kv__r{
  display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:var(--s4);
  padding:.75rem 0;border-bottom:1px solid var(--rule);
}
.kv__k{padding-top:.15rem}
.kv__v{margin:0;color:var(--ink);max-width:none}
.sec--dark .kv,.sec--dark .kv__r{border-color:var(--on-dark-rule)}
.sec--dark .kv__v{color:#fff}

/* =========================================================================
   7. INDEX COLUMNS — town lists, service groups
   ========================================================================= */
.idx{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s6)}
.idx__c h3{font-size:var(--t-base);margin-bottom:var(--s2)}
.idx__c p{font-size:var(--t-sm);color:var(--ink-2);margin-bottom:var(--s3)}
.idx__c ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.idx__c li{border-bottom:1px solid var(--rule)}
.idx__c li a{
  display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline;
  padding:.5rem 0;text-decoration:none;color:var(--ink);font-size:var(--t-sm);
}
.idx__c li a:hover{color:var(--teal-600)}
.idx__c li a span{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-3);
  letter-spacing:.05em;text-transform:uppercase;text-align:right}
.sec--dark .idx__c ul,.sec--dark .idx__c li{border-color:var(--on-dark-rule)}
.sec--dark .idx__c li a{color:#fff}
.sec--dark .idx__c p{color:var(--on-dark)}

/* =========================================================================
   8. PROSE BLOCK — body copy inside a section, kept narrow
   ========================================================================= */
.prose{max-width:var(--measure)}
.prose h3{margin-top:var(--s6)}
.prose ul{padding-left:1.1rem}
.prose li{margin-bottom:.4rem}
.prose>:first-child{margin-top:0}

.note{
  border-left:2px solid var(--teal-500);padding:var(--s4) 0 var(--s4) var(--s5);
  background:var(--paper-2);margin:var(--s6) 0;max-width:var(--measure);
}
.note p{margin:0 0 var(--s3);font-size:var(--t-sm)}
.note p:last-child{margin-bottom:0}
.note--warn{border-left-color:var(--amber-500)}

/* =========================================================================
   9. STEPS — numbered procedure, not cards
   ========================================================================= */
.steps{list-style:none;padding:0;margin:0;max-width:none;counter-reset:st}
.steps li{
  display:grid;grid-template-columns:3.2rem 1fr;gap:var(--s4);
  padding:var(--s5) 0;border-bottom:1px solid var(--rule);counter-increment:st;
}
.steps li::before{
  content:counter(st,decimal-leading-zero);
  font-family:var(--mono);font-size:var(--t-sm);color:var(--teal-600);letter-spacing:.06em;
}
.steps h3{margin:0 0 .35rem}
.steps p{margin:0;font-size:var(--t-sm)}
.sec--dark .steps li{border-color:var(--on-dark-rule)}
.sec--dark .steps li::before{color:var(--teal-300)}
.sec--dark .steps p{color:var(--on-dark)}

/* =========================================================================
   10. THE DISPATCH BLOCK — the site's CTA, styled as a work order
   ========================================================================= */
.dispatch{
  background:var(--gr-900);color:var(--on-dark);
  border-left:3px solid var(--teal-500);
  padding:var(--s6);margin:var(--s7) 0 0;
}
.dispatch__k{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--teal-300);margin:0 0 var(--s3);
}
.dispatch h2,.dispatch h3{color:#fff;margin-bottom:var(--s3)}
.dispatch p{color:var(--on-dark);max-width:58ch}
.dispatch__cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5)}

/* =========================================================================
   11. THE SCHEMATIC — signature graphic
   ========================================================================= */
.schem{background:var(--gr-950);padding:var(--s7) 0;border-top:1px solid var(--gr-800)}
.schem__hd{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--teal-300);margin:0 0 var(--s5);
}
.schem svg{display:block;width:100%;height:auto}
.schem__key{
  list-style:none;padding:0;margin:var(--s5) 0 0;max-width:none;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--s4) var(--s5);border-top:1px solid var(--on-dark-rule);padding-top:var(--s5);
}
.schem__key li{font-size:var(--t-sm);color:var(--on-dark);line-height:1.5}
.schem__key b{
  display:block;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--teal-300);
  font-weight:500;margin-bottom:.25rem;
}
/* The animation is decorative. Anything a reader must understand is in the
   labels and the key, so reduced-motion loses nothing. */
.flow{stroke-dasharray:5 9;animation:flow 2.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-28}}
.pulse{animation:pulse 2.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.climb{animation:climb 6s ease-in-out infinite}
@keyframes climb{0%,18%{opacity:0}30%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .flow,.pulse,.climb{animation:none}
  .climb{opacity:1}
}

/* =========================================================================
   12. FAQ — a definition list, not an accordion of cards
   ========================================================================= */
.faq{border-top:1px solid var(--rule);max-width:var(--measure)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;padding:var(--s4) 0;font-weight:600;color:var(--ink);
  list-style:none;display:flex;justify-content:space-between;gap:var(--s4);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--teal-600);flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq__a{padding:0 0 var(--s4)}
.faq__a p{margin:0;font-size:var(--t-sm)}

/* =========================================================================
   13. FORMS
   ========================================================================= */
.fs{border:1px solid var(--rule);border-top:2px solid var(--ink);padding:var(--s5);margin:0 0 var(--s5);background:var(--white)}
.fs legend{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--ink);padding:0 .5rem;margin-left:-.5rem;
}
.fs label{display:block;margin-bottom:var(--s4);font-weight:600;color:var(--ink);font-size:.94rem}
.fs label[hidden]{display:none}
.fs label.chk{font-weight:400;display:flex;gap:.6rem;align-items:flex-start;color:var(--ink-2)}
.fs input[type=checkbox]{margin-top:.3rem;flex:none;width:17px;height:17px;accent-color:var(--teal-600)}
.fs input,.fs select,.fs textarea{
  display:block;width:100%;margin-top:.35rem;padding:.65rem;
  border:1px solid var(--rule-strong);border-radius:0;font:inherit;font-weight:400;
  background:var(--white);color:var(--ink);
}
.fs input:focus,.fs select:focus,.fs textarea:focus{border-color:var(--teal-600);outline:none}
.opt{font-weight:400;color:var(--ink-3);font-size:var(--t-xs)}
.svcgrp{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--teal-600);margin:var(--s5) 0 var(--s3);
}
.errline{font-size:var(--t-sm);color:#9A2A1C;font-weight:600;margin:.4rem 0 0}

.callfirst{
  border:1px solid var(--teal-600);border-left-width:3px;padding:var(--s5);
  margin:0 0 var(--s6);display:flex;gap:var(--s5);flex-wrap:wrap;align-items:center;
  background:var(--white);
}
.callfirst__k{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--ink-3);margin:0 0 .25rem}
.callfirst__n{font-family:var(--mono);font-size:1.4rem;margin:0;font-weight:600}
.callfirst__n a{text-decoration:none}
.callfirst__s{font-size:var(--t-sm);margin:.3rem 0 0;color:var(--ink-2)}
.callfirst__or{
  margin:0 0 0 auto;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--ink-3);
}

/* =========================================================================
   14. BREADCRUMB
   ========================================================================= */
.crumb{padding:var(--s5) 0 0;color:var(--ink-3)}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--teal-600)}
.crumb span{color:var(--ink)}

/* =========================================================================
   15. FOOTER
   ========================================================================= */
.ftr{background:var(--gr-950);color:var(--on-dark-2);padding:var(--s8) 0 var(--s6);margin-top:var(--s8)}
.ftr__g{
  display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:var(--s6);
  padding-bottom:var(--s6);border-bottom:1px solid var(--on-dark-rule);
}
.ftr h4{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--track-mono);
  text-transform:uppercase;color:var(--teal-300);font-weight:500;margin:0 0 var(--s4);
}
.ftr p{font-size:var(--t-sm);color:var(--on-dark-2);margin:0;max-width:40ch}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin-bottom:.5rem}
.ftr li a{color:var(--on-dark);text-decoration:none;font-size:var(--t-sm)}
.ftr li a:hover{color:#fff}
.ftr__legal{
  font-size:var(--t-xs);color:var(--gr-600);margin:var(--s5) 0 0;max-width:none;
  line-height:1.6;
}

/* =========================================================================
   16. MOBILE CALL BAR
   ========================================================================= */
.callbar{display:none}

/* =========================================================================
   17. RESPONSIVE
   Everything above is desktop-first because the tables and the readout strip
   are the parts that need real width. Below 900px the nav collapses, the
   readout stacks two-up, and the key/value rows go single column.
   ========================================================================= */
@media (max-width:1040px){
  .readout{grid-template-columns:repeat(2,1fr)}
  .readout__c{border-bottom:1px solid var(--on-dark-rule)}
  .readout__c:nth-child(2n){border-right:none}
  .ftr__g{grid-template-columns:1fr 1fr}
}

@media (max-width:900px){
  /* The nav links are ALWAYS in the DOM — the panel is hidden with CSS, never
     built by JavaScript, so a crawler that does not run scripts still sees
     every internal link. And only the data-jsnav attribute set in <head>
     allows the hiding, so with scripting off the nav renders in full. */
  html[data-jsnav] .nav{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:40;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--gr-900);border-bottom:1px solid var(--gr-800);
    padding:var(--s3) var(--s5) var(--s5);
  }
  html[data-jsnav] .nav.is-open{display:flex}
  html[data-jsnav] .nav a{padding:.85rem 0;border-bottom:1px solid var(--gr-800)}
  html[data-jsnav] .nav .btn{margin-top:var(--s4);justify-content:center}
  html[data-jsnav] .hdr__act{display:flex}
  .mast{position:relative}
  .mast__in{padding:var(--s3) var(--s5);gap:var(--s3)}
  /* Two lines rather than one long one — see the note on .brand above. */
  .brand__n{font-size:.85rem;line-height:1.18;white-space:normal;overflow-wrap:anywhere}
  .brand__s{font-size:.6rem}
  .brand__mk{width:32px;height:32px}
  body.nav-open{overflow:hidden}
}

@media (max-width:720px){
  :root{--s8:3rem;--s9:4rem}
  .hero{padding-top:var(--s7)}
  .readout{grid-template-columns:1fr}
  .readout__c{border-right:none;padding-left:0!important}
  .readout__c:last-child{border-bottom:none}
  .kv__r{grid-template-columns:1fr;gap:.2rem}
  .ftr__g{grid-template-columns:1fr;gap:var(--s5)}
  /* The status bar is three lines on a handset if everything stays, which
     pushes the h1 most of a screen down. Keep the two segments that say
     WHERE and WHAT WE ARE NOT; drop the rest. */
  .status__tail,.status__mid{display:none}
  .status__in{gap:var(--s4);font-size:.68rem;padding:.4rem var(--s5)}
  .callfirst__or{margin-left:0}
  .steps li{grid-template-columns:2.4rem 1fr}

  /* The sticky call bar only exists on a handset, and only when a number is
     configured. It carries BOTH actions on purpose: somebody with a walk-in
     climbing right now calls, somebody pricing a maintenance agreement at
     11pm fills the form in. */
  .callbar{
    display:grid;grid-template-columns:1.6fr 1fr;position:fixed;left:0;right:0;bottom:0;
    z-index:50;background:var(--gr-950);border-top:1px solid var(--teal-600);
  }
  .callbar a{text-decoration:none;padding:.7rem var(--s4);display:block}
  .callbar__call{color:#fff}
  .callbar__lbl{
    display:block;font-family:var(--mono);font-weight:600;font-size:.95rem;color:var(--teal-300);
  }
  .callbar__sub{display:block;font-size:.7rem;color:var(--on-dark-2);margin-top:.1rem}
  .callbar__form{
    color:var(--teal-ink);background:var(--teal-500);display:grid;place-items:center;
    font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;
    font-weight:600;text-align:center;
  }
  body{padding-bottom:0}
  body:has(.callbar){padding-bottom:3.6rem}
}