/* ============================================================================
   SIDEHILL PLUMBING & HEATING — one stylesheet for every page of the template.
   All brand decisions live in the :root tokens (section 2).

   HOW THIS FILE LOADS
   The first part, between "@critical:start" and "@critical:end", styles the
   first screen: status strip, header, hero, the ZIP check and the phone call
   bar. serve.py copies that part (and fonts.css) into index.html so the first
   screen paints without waiting for this file. Everything after the end
   marker loads a moment later. Edit here, reload the local preview, and the
   copy in index.html is refreshed for you.
   ============================================================================ */

/* @critical:start — everything from here to "@critical:end" is inlined into index.html by serve.py */

/* ==========================================================================
   1. FONTS — declared in fonts.css (see the note there). The family names
   used in the tokens below must match the ones in that file.
   ========================================================================== */

/* ==========================================================================
   2. TOKENS — the entire brand system. Change here, changes everywhere.
   ========================================================================== */
:root{
  /* — Colour ————————————————————————————————————————————————
     Blue and yellow. Blue carries the brand: big blocks of it, headings,
     links. Yellow is kept for the things you act on (the call buttons) and
     for small highlights. Yellow is only ever a fill behind navy lettering,
     or lettering on blue or navy. It is never lettering on white.          */
  --navy:        #0A2A5E;   /* dark bands, headings: white on it is 14:1    */
  --blue:        #1048A8;   /* the brand blue: white on it is 8.4:1         */
  --blue-bright: #1A63D6;   /* gradients and hover only                      */
  --tint:        #EEF4FC;   /* the pale-blue section ground                  */
  --tint-2:      #DCE8F9;   /* lines and fills on the tint                   */
  --white:       #FFFFFF;

  --yellow:      #FFC72C;   /* navy on it is 8.9:1; on blue it is 5.4:1     */
  --yellow-deep: #F2B200;   /* the call button under the pointer             */
  --yellow-pale: #FFF4CC;   /* coupons                                       */

  --ink:         #0C1B33;   /* body text                                     */
  --text-2:      #4A5672;   /* 7.3:1 on white, 6.6:1 on the tint            */
  --on-dark:     #FFFFFF;
  --on-dark-2:   #C5D2EC;   /* 9.2:1 on navy, 5.5:1 on blue                 */

  --line:        #D5DFEF;   /* hairlines on light                            */
  --line-dark:   rgba(197,210,236,.28);
  --field:       #7C8AA5;   /* form-field outlines: 3.5:1 on white           */
  --slot:        #8A5A00;   /* placeholder tags: 5.9:1 on white              */

  --ok:          #1B6B3A;   /* "yes, we cover you": 6.5:1 on white           */
  --err:         #C62828;   /* errors, and the hot-water line in the drawing */

  /* — Type ——————————————————————————————————————————————————— */
  --ff-display: 'Montserrat','Montserrat Fallback',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --ff-body:    'Archivo','Archivo Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* — Space and shape ———————————————————————————————————————— */
  --gutter: clamp(1rem, 4vw, 2.5rem);     /* page edge inset          */
  --max:    1200px;                       /* content width            */
  --pad:    clamp(3.25rem, 7vw, 5.5rem);  /* vertical section rhythm  */
  --hdr:    72px;                         /* header height            */
  --bar:    4.25rem;                      /* phone call bar height    */
  --hang:   3.25rem;                      /* how far the ZIP check hangs below the hero */
  --r:      14px;                         /* cards                    */
  --r-sm:   8px;                          /* buttons and fields       */
  --shadow:    0 14px 34px rgba(10,42,94,.14);
  --shadow-sm: 0 2px 10px rgba(10,42,94,.08);

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ==========================================================================
   3. RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
/* Class rules like .done{display:grid} otherwise beat the browser's own
   [hidden]{display:none}, and "hidden" elements still render. */
[hidden]{display:none!important}
html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
  scroll-behavior:smooth;
  scroll-padding-top:.75rem;
}
body{
  background:var(--white);color:var(--ink);
  font-family:var(--ff-body);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* room for the call bar pinned to the bottom of phone screens */
  padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom));
}
img,svg{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
h1,h2,h3{font-size:inherit;font-weight:inherit;text-wrap:balance}
p{text-wrap:pretty}

/* Grounds. "dark" is anything set on navy or blue: the status strip, the
   hero, the first five minutes, the quote band, the footer and the call bar.
   "light" marks a white card sitting inside one of those, and puts the dark
   lettering and the blue focus ring back. */
.dark{background:var(--navy);color:var(--on-dark)}
.light{color:var(--ink)}

/* Visible focus ring everywhere: blue on light grounds, yellow on dark. */
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.dark :focus-visible{outline-color:var(--yellow)}
.dark .light :focus-visible{outline-color:var(--blue)}

.skip{
  position:absolute;left:1rem;top:-6rem;z-index:100;
  background:var(--yellow);color:var(--navy);padding:.75rem 1.25rem;border-radius:var(--r-sm);
  font-family:var(--ff-display);font-weight:700;
}
.skip:focus{top:1rem}
/* Read aloud, not shown. After hours with no emergency line, the call bar's
   call button keeps its name this way while shrinking to its icon. */
.vh,html[data-shop="closed"] #bar-call-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.sprite{position:absolute}
.ico{width:1.15em;height:1.15em;flex:none}

.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}

/* Small capital lettering: section labels, table headings, fine print heads. */
.label,.eyebrow{font-family:var(--ff-display);font-weight:700;font-size:.8125rem;line-height:1.4;letter-spacing:.09em;text-transform:uppercase}
/* The label over a heading, led by a short yellow bar. */
.eyebrow{display:flex;align-items:center;gap:.65rem;color:var(--blue)}
.eyebrow::before{content:"";flex:none;width:1.75rem;height:4px;border-radius:2px;background:var(--yellow)}
.dark .eyebrow{color:var(--yellow)}

/* Until styles.css arrives, keep the sections below the first screen out of
   sight rather than letting them flash unstyled, and keep their photographs
   from being fetched while the unstyled page is still short enough to put
   them "near" the screen. The <head> adds "css" when the stylesheet lands
   (or after four seconds regardless), and without JavaScript nothing is
   ever hidden. */
html.js:not(.css) .wait{visibility:hidden}
html.js:not(.css) .wait img{display:none}

/* ==========================================================================
   4. BUTTONS — rounded rectangles. Yellow means "call".
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:3rem;padding:.6rem 1.35rem;
  border:2px solid transparent;border-radius:var(--r-sm);
  font-family:var(--ff-display);font-weight:700;font-size:1rem;line-height:1.15;text-align:center;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease);
}
.btn--lg{min-height:3.5rem;padding:.75rem 1.6rem;font-size:1.0625rem}
/* the darker lower edge gives the yellow button a shape on a white ground */
.btn--call{background:var(--yellow);border-color:var(--yellow);color:var(--navy);box-shadow:inset 0 -3px 0 rgba(10,42,94,.2)}
.btn--call:hover{background:var(--yellow-deep);border-color:var(--yellow-deep)}
.btn--blue{background:var(--blue);border-color:var(--blue);color:var(--white)}
.btn--blue:hover{background:var(--navy);border-color:var(--navy)}
.btn--line{border-color:currentColor}
.btn--line:hover{background:rgba(16,72,168,.08)}
.dark .btn--line:hover{background:rgba(255,255,255,.14)}
.dark .light .btn--line:hover{background:rgba(16,72,168,.08)}

/* ==========================================================================
   5. STATUS STRIP + HEADER
   ========================================================================== */
.strip{font-family:var(--ff-display);font-weight:600;font-size:.8125rem;color:var(--on-dark-2)}
.strip__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:2.5rem}
.strip p{display:inline-flex;align-items:center;gap:.45rem}
.strip .ico{color:var(--yellow)}
.strip .strip__lic{display:none}
.status{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--white)}
.status__dot{flex:none;width:.55rem;height:.55rem;border-radius:50%;background:var(--yellow)}
html[data-shop="closed"] .status__dot{background:none;box-shadow:inset 0 0 0 2px currentColor}

.hdr{position:relative;z-index:50;background:var(--white);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--hdr)}
.brand{display:grid;grid-template-columns:auto auto;column-gap:.65rem;align-items:center;justify-content:start;line-height:1}
.brand__mark{grid-row:1 / span 2;width:2.6rem;height:2.6rem}
.brand__name{align-self:end;font-family:var(--ff-display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;color:var(--navy)}
.brand__sub{align-self:start;margin-top:.22rem;font-family:var(--ff-display);font-weight:700;font-size:.625rem;letter-spacing:.11em;text-transform:uppercase;color:var(--blue)}

.nav{display:none;align-items:center;gap:clamp(1rem,1.9vw,1.75rem)}
.nav a{
  font-family:var(--ff-display);font-weight:600;font-size:.9375rem;color:var(--navy);
  padding:.4rem 0;border-bottom:3px solid transparent;
  transition:border-color .15s var(--ease),color .15s var(--ease);
}
.nav a:hover,.nav a[aria-current="true"]{color:var(--blue);border-bottom-color:var(--yellow)}

.hdr__act{display:flex;align-items:center;gap:.9rem}
.hdr__tel{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--ff-display);line-height:1.15;white-space:nowrap}
.hdr__tel-ico{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--yellow);color:var(--navy)}
.hdr__tel-l{display:block;font-weight:700;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.hdr__tel-n{display:block;font-weight:800;font-size:1.125rem;font-variant-numeric:tabular-nums;color:var(--blue);transition:color .15s var(--ease)}
.hdr__tel:hover .hdr__tel-n{color:var(--navy)}
.hdr__quote{display:none;min-height:2.75rem;padding:.45rem 1.1rem;white-space:nowrap}

.menu-btn{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;margin-right:-.5rem;color:var(--navy)}
.menu-btn .ico{width:1.6rem;height:1.6rem}
.menu-btn .ico--shut,.menu-btn[aria-expanded="true"] .ico--open{display:none}
.menu-btn[aria-expanded="true"] .ico--shut{display:block}
html:not(.js) .menu-btn{display:none}   /* the footer carries the same links */
.menu{
  position:absolute;left:0;right:0;top:100%;display:grid;
  padding:.25rem var(--gutter) 1rem;background:var(--white);border-bottom:1px solid var(--line);box-shadow:var(--shadow);
}
.menu a{display:flex;align-items:center;min-height:3.25rem;font-family:var(--ff-display);font-weight:700;font-size:1.0625rem;color:var(--navy);border-bottom:1px solid var(--line)}
.menu a:last-child{border-bottom:0}

/* On phones the call bar pinned to the bottom of the screen (section 7) is
   the call button, and it carries the open-or-closed status. So the strip
   and the header's own phone number stay out of the way until the bar goes,
   at 860px: nothing is said twice on a small screen. Pages marked "plain"
   have no call bar, and keep the number in their header at every width
   (down to its round button where there isn't room for the digits). */
@media (max-width:859px){
  .strip{display:none}
  body:not(.plain) .hdr__tel{display:none}
}
@media (max-width:479px){
  .plain .hdr__tel-txt{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (min-width:860px){
  html{scroll-padding-top:calc(var(--hdr) + .75rem)}
  .hdr{position:sticky;top:0}
}
@media (min-width:960px){
  .nav{display:flex}
  .menu-btn,.menu{display:none!important}
}
@media (min-width:1060px){
  .strip .strip__lic{display:inline-flex}
}
@media (min-width:1180px){
  .hdr__quote{display:inline-flex}
}

/* ==========================================================================
   6. HERO — a block of brand blue with the headline, the call button and,
   on wide screens, a photograph cut on the diagonal. The ZIP check is a
   white card that hangs off its bottom edge.
   ========================================================================== */
.hero{
  position:relative;isolation:isolate;
  background:linear-gradient(120deg,var(--navy) 0%,var(--blue) 70%);
}
.hero__media{display:none}
/* its own formatting context, so the ZIP check's negative margin pulls the
   hero's bottom edge up under the card instead of collapsing away */
.hero > .wrap{display:flow-root}
.hero__copy{padding-block:clamp(2rem,6vw,4rem) clamp(1.75rem,4vw,2.5rem)}
.hero__h{
  font-family:var(--ff-display);font-weight:800;
  /* 9.2vw keeps "A plumber today." on one line down to the narrowest phone */
  font-size:clamp(1.75rem,9.2vw,3.5rem);line-height:1.06;letter-spacing:-.02em;
  margin:.85rem 0 1rem;
}
/* each sentence is its own block, so each one wraps (and balances) by itself */
.hero__h span{display:block}
.hero__h .hl{color:var(--yellow)}
.hero__sub{font-size:clamp(1.0625rem,1.3vw,1.1875rem);line-height:1.55;max-width:36rem}
.hero__act{display:flex;flex-wrap:wrap;gap:.75rem;max-width:36rem;margin-top:1.5rem}
.hero__act .btn{flex:1 1 15rem}
.ticks{display:flex;flex-wrap:wrap;gap:.45rem 1.5rem;max-width:40rem;margin-top:1.4rem;font-weight:600;font-size:.9375rem}
.ticks li{display:flex;align-items:flex-start;gap:.5rem}
.ticks .ico{margin-top:.2rem;color:var(--yellow)}

/* ZIP check: a white card. In the hero it hangs half out of the blue. */
.zip{
  display:grid;gap:.75rem;padding:1rem 1.1rem;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
}
.zip--hero{position:relative;z-index:2;margin-bottom:calc(-1 * var(--hang))}
.zip__q{display:flex;align-items:center;gap:.75rem}
.zip__ico{flex:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--tint);color:var(--blue)}
.zip__ico .ico{width:1.3rem;height:1.3rem}
.zip__label{display:block;font-family:var(--ff-display);font-weight:800;font-size:1.0625rem;line-height:1.25;color:var(--navy)}
.zip__hint{display:block;font-size:.875rem;line-height:1.4;color:var(--text-2)}
.zip__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem}
.zip__in{
  width:100%;min-height:3rem;padding:.4rem .8rem;
  background:var(--white);border:2px solid var(--field);border-radius:var(--r-sm);
  font-family:var(--ff-display);font-weight:700;font-size:1.125rem;letter-spacing:.12em;color:var(--ink);
  transition:border-color .15s var(--ease);
}
.zip__in:hover,.zip__in:focus{border-color:var(--blue)}
.zip__in::placeholder{color:var(--text-2);opacity:.75}
.zip__out{min-height:1.5rem;line-height:1.45;color:var(--text-2)}
.zip__out.is-yes{font-weight:700;color:var(--ok)}
.zip__out.is-no{font-weight:600;color:var(--ink)}
.zip__out.is-bad{font-weight:600;color:var(--err)}
.zip__out a{font-weight:700;text-decoration:underline;text-underline-offset:.2em}
html:not(.js) .zip{display:none}

@media (min-width:700px){
  /* the question beside the field, the answer underneath */
  .zip--hero{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.75rem 1.5rem;padding:1.2rem 1.5rem}
  .zip--hero .zip__out{grid-column:1 / -1;min-height:0}
}
@media (min-width:1100px){
  /* one row: the question, the field, the answer */
  .zip--hero{grid-template-columns:auto minmax(15rem,19rem) minmax(0,1fr);gap:1.5rem}
  .zip--hero .zip__out{grid-column:auto}
}
@media (min-width:960px){
  .hero__copy{width:52%}
  .hero__h{font-size:clamp(2.5rem,4.2vw,3.5rem)}
  /* The photograph fills the right-hand side, edge to edge, and is cut on a
     slant with a yellow stripe along the cut. */
  .hero__media{display:block;position:absolute;z-index:-1;inset:0 0 0 55%}
  .hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:45% 50%;clip-path:polygon(calc(15% + 14px) 0,100% 0,100% 100%,14px 100%)}
  .hero__stripe{position:absolute;inset:0;background:var(--yellow);clip-path:polygon(15% 0,calc(15% + 14px) 0,14px 100%,0 100%)}
}

/* ==========================================================================
   7. CALL BAR — pinned to the bottom of phone screens
   ========================================================================== */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:center;gap:.5rem;
  min-height:calc(var(--bar) + env(safe-area-inset-bottom));
  padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-dark);box-shadow:0 -6px 20px rgba(6,25,58,.22);
  transition:transform .2s var(--ease);
}
/* The status takes whatever room is left, so the buttons hold the right-hand
   edge and nothing moves when the quote button comes or goes. */
.callbar__status{
  display:flex;align-items:center;gap:.55rem;flex:1 1 auto;min-width:0;margin-right:.25rem;
  font-family:var(--ff-display);font-weight:700;font-size:.8125rem;line-height:1.3;
}
/* the status is written as two short lines ("Open now" / "until 6 PM"), one above the other */
.callbar__lines span{display:block}
.callbar__lines span + span{font-weight:600;color:var(--on-dark-2)}
.callbar .btn{flex:none;min-height:2.875rem;padding:.45rem 1rem;white-space:nowrap}
.btn--bar{order:3;background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.btn--barline{order:2;border-color:var(--line-dark);color:var(--white)}
/* after hours, with an emergency line: the whole bar turns yellow */
html[data-shop="emergency"] .callbar{background:var(--yellow);border-top-color:var(--yellow);color:var(--navy)}
html[data-shop="emergency"] .callbar .status__dot{background:var(--navy)}
html[data-shop="emergency"] .callbar__lines span + span{color:var(--navy)}
html[data-shop="emergency"] .callbar :focus-visible{outline-color:var(--navy)}
html[data-shop="emergency"] .btn--bar{background:var(--navy);border-color:var(--navy);color:var(--white)}
html[data-shop="emergency"] .btn--barline{display:none}
/* closed, no emergency line: the quote button takes the right-hand edge, the call button steps back */
html[data-shop="closed"] .btn--bar{order:2;background:none;border-color:var(--line-dark);color:var(--white)}
html[data-shop="closed"] .btn--barline{order:3;background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
/* ...down to its icon, so the opening time has room (its label is hidden by the .vh rule in section 3) */
html[data-shop="closed"] .btn--bar{padding-inline:.8rem}
/* the narrowest phones: the status needs the room more than the second button does */
@media (max-width:359px){html:not([data-shop="closed"]) .btn--barline{display:none}}
/* slid away while someone is typing in the quote form */
.callbar.is-away{transform:translateY(110%)}
@media (min-width:860px){
  body{padding-bottom:0}
  .callbar{display:none}
}

/* @critical:end */

/* ==========================================================================
   8. SECTIONS — shared scaffolding
   ========================================================================== */
.sect{padding-block:var(--pad)}
/* Anchor landings skip the section's own top padding, so a heading always
   lands the same short distance from the top. */
.sect[id]{scroll-margin-top:calc(1rem - var(--pad))}
/* The section the ZIP check hangs into makes room for it, unless there is
   no ZIP check: JavaScript is off, or config.js lists no ZIP codes. */
.sect--under-hero{padding-top:calc(var(--pad) + var(--hang))}
.sect--under-hero[id]{scroll-margin-top:calc(1rem - var(--pad) - var(--hang))}
html:not(.js) .sect--under-hero,
.hero:has(.zip--hero[hidden]) + .wait .sect--under-hero{padding-top:var(--pad)}
html:not(.js) .sect--under-hero[id],
.hero:has(.zip--hero[hidden]) + .wait .sect--under-hero[id]{scroll-margin-top:calc(1rem - var(--pad))}
.tint{background:var(--tint)}

.sect__head{max-width:44rem;margin-bottom:clamp(1.5rem,4vw,2.5rem)}
.sect__head--center{margin-inline:auto;text-align:center}
.sect__head--center .eyebrow{justify-content:center}
.sect__head--center .lede{margin-inline:auto}

.h2{font-family:var(--ff-display);font-weight:800;font-size:clamp(1.7rem,5.6vw,2.6rem);line-height:1.1;letter-spacing:-.02em;color:var(--navy);margin:.8rem 0 .8rem}
.h3{font-family:var(--ff-display);font-weight:800;font-size:1.1875rem;line-height:1.2;letter-spacing:-.01em;color:var(--navy)}
.dark .h2,.dark .h3{color:var(--white)}
.dark .light .h3{color:var(--navy)}
.lede{font-size:clamp(1.0625rem,1.3vw,1.1875rem);line-height:1.55;color:var(--text-2);max-width:40rem}
.lede a{font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:.2em;white-space:nowrap}
.dark .lede{color:var(--on-dark-2)}
.dark .lede a{color:var(--white)}

/* A marked gap: content the demo refuses to invent. */
.slot{
  display:inline-block;padding:.05rem .5rem;margin-right:.35rem;vertical-align:.08em;
  background:var(--yellow-pale);border:1.5px dashed var(--slot);border-radius:4px;color:var(--slot);
  font-family:var(--ff-display);font-weight:700;font-size:.6875rem;letter-spacing:.07em;text-transform:uppercase;line-height:1.5;
}
.slot--dark{background:none;border-color:var(--yellow);color:var(--yellow);margin:0 0 0 .2rem}

/* ==========================================================================
   9. SERVICES & PRICES — photo cards on top; with JavaScript each card is a
   tab that shows its group's prices in the panel underneath.
   ========================================================================== */
/* Phones: three cards, then two wider ones. Any number of cards works: a
   row takes three, and a short last row grows to fill. */
.svcs{display:flex;flex-wrap:wrap;gap:.6rem}
.svc{
  flex:1 1 calc((100% - 1.2rem) / 3);min-width:6.25rem;
  position:relative;display:flex;flex-direction:column;
  background:var(--white);border:2px solid var(--white);border-radius:var(--r);box-shadow:var(--shadow-sm);
  text-align:left;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease);
}
.svc__img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--tint-2);border-radius:calc(var(--r) - 2px) calc(var(--r) - 2px) 0 0}
.svc__body{position:relative;display:flex;flex-direction:column;gap:.3rem;flex:1;padding:1.5rem .7rem .8rem}
.svc__ico{
  position:absolute;left:.6rem;top:-1.3rem;display:grid;place-items:center;width:2.6rem;height:2.6rem;
  background:var(--blue);border:3px solid var(--white);border-radius:50%;color:var(--white);
  transition:background .15s var(--ease),color .15s var(--ease);
}
.svc__ico .ico{width:1.2rem;height:1.2rem}
.svc__t{font-family:var(--ff-display);font-weight:800;font-size:.9375rem;line-height:1.2;color:var(--navy)}
.svc__d{display:none;font-size:.875rem;line-height:1.45;color:var(--text-2)}
.svc__from{margin-top:auto;padding-top:.15rem;font-family:var(--ff-display);font-weight:700;font-size:.8125rem;color:var(--blue)}
.svc--plain .svc__body{padding-top:3.4rem}
.svc--plain .svc__ico{top:.7rem}
a.svc:hover{border-color:var(--tint-2);box-shadow:var(--shadow)}
.svc[aria-selected="true"]{border-color:var(--blue);box-shadow:var(--shadow)}
.svc[aria-selected="true"] .svc__ico{background:var(--yellow);color:var(--navy)}
.svcs__hint{margin:1.1rem 0 0;text-align:center;font-size:.9375rem;color:var(--text-2)}
@media (min-width:600px){
  /* room to spare: every card in one row */
  .svcs{flex-wrap:nowrap;gap:.9rem}
  .svc{flex:1 1 0;min-width:0}
  .svc__body{padding-inline:.9rem}
  .svc__ico{left:.8rem}
}
@media (min-width:960px){
  .svc__t{font-size:1.0625rem}
  .svc__d{display:block}
  .svc__body{padding:1.6rem 1.1rem 1rem}
  .svc__ico{left:1rem}
}

.prices{margin-top:1.1rem}
.grp{background:var(--white);border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden}
.grp + .grp{margin-top:1rem}                 /* only ever seen in print, where every group shows */
.grp__t{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.95rem 1.1rem;border-bottom:1px solid var(--line)}
.grp__t .label{color:var(--text-2);white-space:nowrap}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem 1rem;align-items:baseline;padding:.85rem 1.1rem;border-bottom:1px solid var(--line);break-inside:avoid}
.row:last-child{border-bottom:0}
.row__name{font-weight:700;line-height:1.35}
.row__inc{grid-column:1;font-size:.875rem;line-height:1.45;color:var(--text-2)}
.row__price{grid-column:2;grid-row:1;font-family:var(--ff-display);font-weight:800;font-size:1.125rem;font-variant-numeric:tabular-nums;color:var(--blue);white-space:nowrap}
.row__price span{margin-right:.4rem;font-weight:700;font-size:.6875rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-2)}
.sheet__note{margin-top:1.1rem;text-align:center;font-size:.875rem;color:var(--text-2)}
.sheet__fallback{max-width:44rem;margin-inline:auto;padding:1.25rem;background:var(--white);border:1px solid var(--line);border-radius:var(--r);font-size:1.0625rem}
.sheet__fallback a{font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:.2em}
@media (min-width:860px){
  /* Wide screens: the lines of a group run down two columns. Every line keeps
     its rule underneath, so the two columns end alike. */
  .grp ul{columns:2;column-gap:0;column-rule:1px solid var(--line)}
  .row:last-child{border-bottom:1px solid var(--line)}
  .grp ul{margin-bottom:-1px}
}

/* ==========================================================================
   10. OFFERS — coupons, from config.js
   ========================================================================== */
.coupons{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr));max-width:62rem;margin-inline:auto}
.coupon{
  display:flex;flex-direction:column;gap:.35rem;padding:1.4rem 1.25rem 1.2rem;
  background:var(--yellow-pale);border:2px dashed var(--navy);border-radius:var(--r);
}
.coupon__big{font-family:var(--ff-display);font-weight:900;font-size:clamp(2.2rem,7vw,2.9rem);line-height:1;letter-spacing:-.02em;color:var(--blue)}
.coupon__line{font-family:var(--ff-display);font-weight:700;font-size:1.0625rem;line-height:1.3;color:var(--navy)}
.coupon__fine{margin-top:.25rem;font-size:.8125rem;line-height:1.45;color:var(--text-2)}
.coupon__exp{margin-top:auto;padding-top:.7rem;font-size:.6875rem;color:var(--navy)}
.offers__act{display:flex;justify-content:center;margin-top:1.75rem}

/* ==========================================================================
   11. RIGHT NOW — first five minutes
   ========================================================================== */
.now{position:relative}
.now__grid{display:grid;gap:1.75rem}
.now__grid > *{min-width:0}
.now__tabs{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:1.5rem}
.now__tab{
  display:flex;align-items:center;gap:.7rem;min-height:3.5rem;padding:.55rem .8rem;
  border:2px solid var(--line-dark);border-radius:var(--r-sm);text-align:left;
  font-family:var(--ff-display);font-weight:700;font-size:.9375rem;line-height:1.25;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease);
}
.now__key{flex:none;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--yellow);color:var(--navy);font-size:.8125rem;font-weight:800}
.now__tab:hover{border-color:var(--on-dark-2)}
.now__tab[aria-selected="true"]{background:var(--white);border-color:var(--white);color:var(--navy)}
html:not(.js) .now__tabs{display:none}   /* no JS: all four sets of steps show, stacked */
@media (max-width:339px){.now__tabs{grid-template-columns:1fr}}

.now__panels{padding:clamp(1.25rem,3vw,2rem);background:rgba(255,255,255,.07);border:1px solid var(--line-dark);border-radius:var(--r)}
.now__panel + .now__panel{margin-top:2.25rem}
.now__t{font-family:var(--ff-display);font-weight:800;font-size:1.375rem;line-height:1.15;letter-spacing:-.01em;margin-bottom:1.1rem}
.steps{counter-reset:s;display:grid;gap:1.15rem}
.steps li{counter-increment:s;position:relative;min-height:2.25rem;padding-left:3.1rem;line-height:1.55;color:var(--on-dark-2)}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:.05rem;display:grid;place-items:center;width:2.25rem;height:2.25rem;
  border:2px solid var(--yellow);border-radius:50%;
  font-family:var(--ff-display);font-weight:800;font-size:.9375rem;color:var(--yellow);
}
.steps b{font-weight:700;color:var(--white)}
.now__call{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--line-dark)}
.now__call .label{color:var(--on-dark-2)}
@media (min-width:960px){
  .now__grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
  .now__tabs{grid-template-columns:1fr}
}

/* ==========================================================================
   12. KNOW YOUR HOME — the cutaway drawing — and the service-area map
   ========================================================================== */
.house__grid{display:grid;gap:1.5rem}
.house__grid > *{min-width:0}
.house__head{margin-bottom:0}
.dwg{margin:0;background:var(--tint);border:1px solid var(--tint-2);border-radius:var(--r);overflow:hidden}
.dwg__svg{width:100%;height:auto}
.d-house{fill:none;stroke:var(--navy);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.d-thin{stroke-width:1.25}
.d-tank{fill:var(--white)}
.d-earth{fill:none;stroke:var(--navy);stroke-width:1;opacity:.5}
.d-cold{fill:none;stroke:var(--blue);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.d-hot{fill:none;stroke:var(--err);stroke-width:3.5;stroke-dasharray:8 5}
.d-drain{fill:none;stroke:var(--text-2);stroke-width:2.75;stroke-dasharray:.5 6.5;stroke-linecap:round}
.d-valve{fill:var(--white);stroke:var(--navy);stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round}
.d-lead{fill:none;stroke:var(--navy);stroke-width:1;opacity:.55}
.d-num circle{fill:var(--navy)}
.d-num text{font-family:var(--ff-display);font-weight:800;font-size:13px;fill:var(--white)}
/* On a phone the drawing is about half size, so its numbers are drawn half as big again. */
@media (max-width:559px){.d-num g{transform-box:fill-box;transform-origin:center;transform:scale(1.5)}}
.dwg__legend{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.25rem;padding:.7rem 1rem;background:var(--white);border-top:1px solid var(--tint-2);font-size:.8125rem;font-weight:600;color:var(--text-2)}
.dwg__legend span{display:inline-flex;align-items:center;gap:.45rem}
.dwg__legend svg{width:2.1rem;height:.5rem}
.dwg__nts{margin-left:auto}
.k-cold{fill:none;stroke:var(--blue);stroke-width:3.5;stroke-linecap:round}
.k-hot{fill:none;stroke:var(--err);stroke-width:3.5;stroke-dasharray:8 5}
.k-drain{fill:none;stroke:var(--text-2);stroke-width:2.75;stroke-dasharray:.5 6.5;stroke-linecap:round}
.dwg__key{counter-reset:k;display:grid;gap:1rem 1.5rem}
.dwg__key li{counter-increment:k;display:grid;grid-template-columns:2rem minmax(0,1fr);column-gap:.75rem;align-content:start}
.dwg__key li::before{
  content:counter(k);grid-row:1 / span 2;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;
  background:var(--navy);color:var(--white);font-family:var(--ff-display);font-weight:800;font-size:.875rem;line-height:1;
}
.dwg__key b,.dwg__key span{grid-column:2}
.dwg__key b{font-family:var(--ff-display);font-weight:700;color:var(--navy)}
.dwg__key span{font-size:.9375rem;line-height:1.45;color:var(--text-2)}
@media (min-width:560px){.dwg__key{grid-template-columns:1fr 1fr}}
@media (min-width:960px){
  /* wide screens: the drawing on the left, the heading and the key beside it */
  .house__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-rows:auto 1fr;gap:1.75rem clamp(2rem,5vw,4rem);align-items:start}
  .house__fig{grid-column:1;grid-row:1 / span 2}
  .house__head,.house__key{grid-column:2}
}

.m-rings circle{fill:none;stroke:var(--blue);stroke-width:1;stroke-dasharray:3 6;opacity:.45}
.m-roads{fill:none;stroke:var(--blue);stroke-width:1.75;stroke-linejoin:round;opacity:.55}
.m-towns circle{fill:var(--white);stroke:var(--navy);stroke-width:2;transition:fill .2s var(--ease)}
.m-towns .m-hub circle{fill:var(--navy)}
.m-towns text{font-family:var(--ff-display);font-weight:700;font-size:16px;letter-spacing:.02em;fill:var(--navy)}
.m-towns .is-hit circle{fill:var(--yellow);stroke:var(--navy)}
.m-north{fill:none;stroke:var(--navy);stroke-width:1.5;stroke-linecap:round}
.m-north text{font-family:var(--ff-display);font-weight:800;font-size:16px;fill:var(--navy);stroke:none}

/* ==========================================================================
   13. WHAT HAPPENS WHEN YOU CALL — five numbered steps on one line
   ========================================================================== */
.riser{--gap:1.6rem;counter-reset:r;display:grid;gap:var(--gap);max-width:40rem;margin-inline:auto}
.riser li{counter-increment:r;position:relative;padding-left:4.25rem}
.riser li::before{
  content:counter(r);position:absolute;z-index:1;left:0;top:-.2rem;display:grid;place-items:center;width:3rem;height:3rem;
  background:var(--blue);border:4px solid var(--white);border-radius:50%;box-shadow:var(--shadow-sm);
  font-family:var(--ff-display);font-weight:800;font-size:1.125rem;color:var(--white);
}
/* the line: from under each number to the next one, so it ends at the last step */
.riser li:not(:last-child)::after{
  content:"";position:absolute;left:calc(1.5rem - 2px);top:2.4rem;bottom:calc(-1 * var(--gap));width:4px;background:var(--yellow);
}
.riser h3{font-family:var(--ff-display);font-weight:800;font-size:1.0625rem;line-height:1.3;color:var(--navy)}
.riser p{margin-top:.3rem;color:var(--text-2)}
@media (min-width:1000px){
  /* wide screens: the steps sit side by side and the line runs across */
  .riser{--gap:1.75rem;grid-template-columns:repeat(5,minmax(0,1fr));max-width:none;align-items:start}
  .riser li{padding:4.1rem 0 0;text-align:center}
  .riser li::before{left:50%;top:0;margin-left:-1.5rem}
  .riser li:not(:last-child)::after{left:calc(50% + 1.5rem);right:calc(-50% - var(--gap) + 1.5rem);top:calc(1.5rem - 2px);bottom:auto;width:auto;height:4px}
  .riser p{font-size:.9375rem;line-height:1.5}
}

/* ==========================================================================
   14. WHY SIDEHILL — the story, the reasons, then the license block
   ========================================================================== */
.about__grid{display:grid;gap:2.25rem}
.about__grid > *{min-width:0}
/* the photograph sits on a blue block that shows at its left and bottom */
.about__media{position:relative;isolation:isolate;margin:0 0 1rem 1rem}
.about__media::before{content:"";position:absolute;z-index:-1;inset:1rem 1rem -1rem -1rem;background:var(--blue);border-radius:var(--r)}
.about__media img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--tint-2);border-radius:var(--r)}
.about__cap{position:absolute;left:.75rem;top:.75rem;padding:.25rem .6rem;background:rgba(10,42,94,.82);border-radius:4px;color:var(--white);font-size:.75rem;font-weight:600}
.about__badge{
  position:absolute;right:-.5rem;bottom:1.25rem;display:grid;justify-items:center;gap:.1rem;width:7.75rem;padding:.75rem .5rem .7rem;
  background:var(--yellow);border-radius:var(--r);box-shadow:var(--shadow);text-align:center;color:var(--navy);
}
.about__badge b{order:2;font-family:var(--ff-display);font-weight:900;font-size:1.9rem;line-height:1}
.about__badge span{font-family:var(--ff-display);font-weight:700;font-size:.625rem;line-height:1.3;letter-spacing:.06em;text-transform:uppercase}
.about__copy > p:not(.eyebrow){color:var(--text-2);max-width:36rem}
.about__copy > p + p{margin-top:.8rem}
.reasons{display:grid;gap:.65rem 1.5rem;margin-top:1.5rem;font-weight:600}
.reasons li{display:flex;align-items:flex-start;gap:.65rem;line-height:1.4}
.reasons .ico{flex:none;width:1.5rem;height:1.5rem;padding:.3rem;border-radius:50%;background:var(--blue);color:var(--white)}
@media (min-width:560px){.reasons{grid-template-columns:1fr 1fr}}
@media (min-width:960px){
  .about__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,6vw,5rem);align-items:center}
}

.creds{margin-top:clamp(2.5rem,6vw,4rem);padding-top:clamp(2rem,5vw,3rem);border-top:1px solid var(--line);scroll-margin-top:calc(var(--hdr) + 1rem)}
.creds__head{display:grid;gap:.4rem;max-width:44rem;margin-bottom:1.25rem}
.creds__head .h3{display:flex;align-items:center;gap:.55rem;font-size:1.375rem}
.creds__head .ico{color:var(--blue)}
.creds__head p{color:var(--text-2)}
.block{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.block > div{padding:.85rem 1.1rem;background:var(--white)}
.block dt{font-family:var(--ff-display);font-weight:700;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.block dd{margin-top:.25rem;font-weight:600;line-height:1.45}
.block dd:has(.slot){font-weight:400;color:var(--text-2)}
.block .block__foot{background:var(--tint)}
.block a{display:inline-flex;align-items:center;gap:.4rem;color:var(--blue);text-decoration:underline;text-underline-offset:.2em}
@media (min-width:620px){
  .block{grid-template-columns:1fr 1fr}
  .block__wide{grid-column:1 / -1}
}
@media (min-width:1000px){
  /* four across: the company and the office each take two, and so does the lookup link beside the office */
  .block{grid-template-columns:repeat(4,1fr)}
  .block__wide{grid-column:span 2}
}

/* ==========================================================================
   15. REVIEWS — placeholders, laid out where the real ones will go
   ========================================================================== */
.slotbox{display:grid;gap:.5rem;align-content:start;justify-items:start;padding:1.5rem;background:rgba(255,255,255,.6);border:2px dashed var(--field);border-radius:var(--r)}
.slotbox p:last-child{color:var(--text-2)}
.slotbox--wide{justify-items:center;max-width:40rem;margin-inline:auto;text-align:center}
.stars{display:flex;gap:.2rem;color:var(--field)}
.stars .ico{width:1.6rem;height:1.6rem}
.slotrow{display:grid;gap:1rem;margin-top:1rem}
@media (min-width:760px){.slotrow{grid-template-columns:repeat(3,1fr)}}

/* ==========================================================================
   16. SERVICE AREA
   ========================================================================== */
.area__grid{display:grid;gap:2rem}
.area__grid > *{min-width:0}
.zip--big{box-shadow:var(--shadow-sm)}
.zip--big .zip__in{min-height:3.5rem;font-size:1.375rem}
.zip--big .btn{min-height:3.5rem;padding-inline:1.5rem}
.area__label{margin:1.75rem 0 .6rem;color:var(--text-2)}
.towns{display:flex;flex-wrap:wrap;gap:.4rem}
.towns li{padding:.3rem .8rem;background:var(--tint);border:1px solid var(--tint-2);border-radius:999px;font-weight:600;font-size:.9375rem;color:var(--navy);transition:background .2s var(--ease),border-color .2s var(--ease)}
.towns li.is-hit{background:var(--yellow);border-color:var(--yellow)}
@media (min-width:960px){
  .area__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
}

/* ==========================================================================
   17. QUESTIONS
   ========================================================================== */
.faq__grid{display:grid;gap:.5rem}
.faq__grid > *{min-width:0}
.qas{display:grid;gap:.6rem}
.qa{background:var(--white);border:1px solid var(--tint-2);border-radius:var(--r-sm);box-shadow:var(--shadow-sm)}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.1rem;font-family:var(--ff-display);font-weight:700;font-size:1rem;line-height:1.3;color:var(--navy);cursor:pointer;list-style:none;
  border-radius:var(--r-sm);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ico{width:1.3rem;height:1.3rem;color:var(--blue);transition:transform .2s var(--ease)}
.qa[open] summary .ico{transform:rotate(180deg)}
.qa__a{padding:0 1.1rem 1.15rem;color:var(--text-2);max-width:44rem}
@media (min-width:960px){
  .faq__grid{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(2rem,6vw,5rem);align-items:start}
  /* the heading keeps the questions company as they scroll past */
  .faq__grid .sect__head{position:sticky;top:calc(var(--hdr) + 2rem)}
}

/* ==========================================================================
   18. QUOTE + FORMS — a band of brand blue with a white card on it
   ========================================================================== */
.quote{background:linear-gradient(120deg,var(--navy) 0%,var(--blue) 75%)}
.quote__grid{display:grid;gap:2rem}
.quote__grid > *{min-width:0}
.quote__urgent{margin-top:1.25rem;padding:.9rem 1rem;border-left:4px solid var(--yellow);border-radius:0 var(--r-sm) var(--r-sm) 0;background:rgba(255,255,255,.1);color:var(--on-dark-2)}
.quote__urgent b{color:var(--white)}
.status--quote{margin-top:1.25rem;font-family:var(--ff-display);font-size:.875rem}

.quote__panel{padding:clamp(1.25rem,3vw,2rem);background:var(--white);border-radius:var(--r);box-shadow:0 22px 50px rgba(6,25,58,.38)}
.quote__panel .label{color:var(--text-2)}
.bignum{
  display:inline-block;margin:.5rem 0 .6rem;
  font-family:var(--ff-display);font-weight:800;font-size:clamp(1.7rem,8.4vw,3.1rem);line-height:1.05;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--blue);transition:color .15s var(--ease);
}
.bignum:hover{color:var(--navy)}
.mode__big{font-family:var(--ff-display);font-weight:800;font-size:clamp(1.5rem,5vw,2.2rem);line-height:1.1;letter-spacing:-.02em;color:var(--navy);margin:.5rem 0 .6rem}
.mode__note{color:var(--text-2);max-width:34rem}
.mode__act{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.4rem}
.mode__act .btn--line{color:var(--blue)}

/* Setup notes — only ever unhidden on a local machine */
.devnote{margin-top:1.4rem;padding:.75rem 1rem;background:var(--yellow-pale);border:1.5px dashed var(--slot);border-radius:var(--r-sm);font-size:.8125rem;line-height:1.55;color:var(--ink)}

.form{display:grid;gap:1rem}
.form__row{display:grid;gap:1rem}
.field{display:grid;gap:.35rem;min-width:0;align-content:start}
.field label{font-family:var(--ff-display);font-size:.875rem;font-weight:700;color:var(--navy)}
.req{margin-left:.2em;color:var(--err)}
.opt{font-family:var(--ff-body);font-weight:400;color:var(--text-2)}
.field input,.field select,.field textarea{
  width:100%;min-height:3rem;padding:.6rem .8rem;
  background:var(--white);border:2px solid var(--field);border-radius:var(--r-sm);color:var(--ink);font-size:1rem;
  transition:border-color .15s var(--ease);
}
.field textarea{min-height:6.5rem;line-height:1.5;resize:vertical}
.field textarea::placeholder{color:var(--text-2);opacity:.8}
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.5rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231048A8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right .8rem center;
}
.field input:hover,.field select:hover,.field textarea:hover,
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue)}
.field__err{display:none;align-items:center;gap:.4rem;font-size:.8125rem;font-weight:600;color:var(--err)}
.field.is-err .field__err{display:flex}
.field.is-err input,.field.is-err select,.field.is-err textarea{border-color:var(--err)}
.field__hint{font-size:.8125rem;line-height:1.4;color:var(--text-2)}
.field__hint:empty{display:none}
.field__hint.is-yes{font-weight:600;color:var(--ok)}
.field__hint.is-no{font-weight:600;color:var(--err)}
.form__urgent{display:flex;align-items:flex-start;gap:.65rem;padding:.8rem 1rem;border-left:4px solid var(--yellow);border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--yellow-pale)}
.form__urgent .ico{margin-top:.2rem;color:var(--navy)}
.form__urgent a{font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:.2em;white-space:nowrap}
.form__alert{padding:.75rem 1rem;border-left:4px solid var(--err);border-radius:0 var(--r-sm) var(--r-sm) 0;background:#FDECEC;font-size:.9375rem}
.form__alert a{font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:.2em}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:.25rem}
.form__fine{font-size:.8125rem;line-height:1.5;color:var(--text-2);max-width:22rem}
.btn[aria-busy="true"]{opacity:.7;cursor:progress}

.done{display:grid;gap:.75rem;justify-items:start}
.done__mark{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--ok);color:var(--white)}
.done__mark .ico{width:1.5rem;height:1.5rem}
.done__t{font-family:var(--ff-display);font-weight:800;font-size:clamp(1.6rem,5vw,2.2rem);line-height:1.1;letter-spacing:-.02em;color:var(--navy)}
.done p{color:var(--text-2);max-width:34rem}
.done a{font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:.2em}
.done .btn--line{color:var(--blue)}

@media (min-width:560px){.form__row{grid-template-columns:1fr 1fr}}
@media (min-width:960px){
  .quote__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,5rem);align-items:start}
}

/* ==========================================================================
   19. FOOTER
   ========================================================================== */
.ftr{padding-block:clamp(3rem,6vw,4.5rem) 1.5rem}
.ftr__grid{display:grid;gap:2rem}
.ftr .brand__name{color:var(--white)}
.ftr .brand__sub{color:var(--yellow)}
.brand--lg .brand__name{font-size:1.7rem}
.brand--lg .brand__mark{width:3rem;height:3rem}
.ftr__tag{margin:1rem 0 1.25rem;font-size:.9375rem;color:var(--on-dark-2);max-width:22rem}
.ftr__h{margin-bottom:.8rem;font-family:var(--ff-display);font-weight:700;font-size:.8125rem;letter-spacing:.09em;text-transform:uppercase;color:var(--yellow)}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding:.28rem 0;font-size:.9375rem;color:var(--on-dark-2)}
.hours .t{font-variant-numeric:tabular-nums;white-space:nowrap}
.hours li.is-today{font-weight:700;color:var(--white)}
.ftr__em{margin-top:.8rem;font-family:var(--ff-display);font-weight:700;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--yellow)}
.ftr__list li{font-size:.9375rem;line-height:1.5;color:var(--on-dark-2)}
.ftr__list li + li{margin-top:.55rem}
.ftr__list a{display:inline-block;padding-block:.1rem}
.ftr__list a:hover{color:var(--white);text-decoration:underline;text-underline-offset:.2em}
.ftr__base{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;
  padding-top:1.25rem;border-top:1px solid var(--line-dark);font-size:.8125rem;color:var(--on-dark-2);
}
.ftr__base a{text-decoration:underline;text-underline-offset:.2em}
.ftr__base a:hover{color:var(--white)}
.ftr__demo{flex-basis:100%;color:var(--white)}
@media (min-width:640px){.ftr__grid{grid-template-columns:1fr 1fr}.ftr__brand,.ftr__base{grid-column:1 / -1}}
@media (min-width:1000px){
  .ftr__grid{grid-template-columns:1.25fr 1.15fr 1.1fr .8fr;gap:2.5rem}
  .ftr__brand{grid-column:auto}
}

/* ==========================================================================
   20. SECONDARY PAGES — privacy, accessibility, 404
   ========================================================================== */
.page{padding-block:clamp(2.5rem,7vw,5rem) var(--pad);min-height:70vh}
.prose{max-width:44rem}
.prose h1{font-family:var(--ff-display);font-weight:800;font-size:clamp(1.7rem,5.6vw,2.6rem);line-height:1.1;letter-spacing:-.02em;color:var(--navy);margin:.8rem 0 1.1rem}
.prose h2{font-family:var(--ff-display);font-weight:800;font-size:1.25rem;line-height:1.2;letter-spacing:-.01em;color:var(--navy);margin:2.4rem 0 .7rem}
.prose p + p,.prose p + ul,.prose ul + p{margin-top:.9rem}
.prose ul{list-style:disc;padding-left:1.2rem}
.prose li::marker{color:var(--blue)}
.prose li + li{margin-top:.45rem}
.prose a{font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:.2em}
.prose .updated{margin-top:2.5rem;padding-top:1.1rem;border-top:1px solid var(--line);color:var(--text-2)}
.page-ftr{padding-block:1.5rem}
.page-ftr .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;font-size:.8125rem;color:var(--on-dark-2)}
.page-ftr a{text-decoration:underline;text-underline-offset:.2em}
.page-ftr a:hover{color:var(--white)}
.page-ftr .ftr__demo{flex-basis:100%;color:var(--white)}
/* pages without the call bar don't need room for it */
.plain{padding-bottom:0}

.lost{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:2rem var(--gutter);background:linear-gradient(120deg,var(--navy) 0%,var(--blue) 75%)}
.lost > div{max-width:38rem}
.lost__n{font-family:var(--ff-display);font-weight:900;font-size:clamp(4.5rem,22vw,8rem);line-height:.9;letter-spacing:-.03em;color:var(--yellow)}
.lost h1{font-family:var(--ff-display);font-weight:800;font-size:clamp(1.9rem,7vw,3rem);line-height:1.08;letter-spacing:-.02em;margin:.8rem 0 1rem}
.lost__act{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

/* ==========================================================================
   21. MOTION — almost none, and off entirely when the visitor asks
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ==========================================================================
   22. PRINT — the price sheet on paper
   ========================================================================== */
@media print{
  .strip,.hdr,.callbar,.zip,.hero__media,.svcs,.svcs__hint,.now__tabs,.dwg,.about__media,.btn,.reviews{display:none!important}
  body,.dark,.tint,.hero,.quote{background:#fff!important;color:#000!important}
  .dark .h2,.dark .h3,.hero__h .hl,.dark .eyebrow,.steps li,.steps b,.dark .lede{color:#000!important}
  body{padding-bottom:0}
  .now__panel[hidden],.grp[hidden]{display:block!important}
  .grp{break-inside:avoid}
}