/* ==========================================================================
   midwestelectricalbuyers.com — stylesheet
   STRUCTURE is the layout the owner approved on the Texas site: dark photo hero
   with a scrim, quote form as a card inside the hero, promise strip beneath,
   ONE round floating call button, SQUARE corners everywhere — no border-radius.
   Do not change it.
   IDENTITY is "Great Lakes Foundry" (see ideas.md), deliberately NOT the Texas
   palette and NOT the Southeast one. Iron grey #23262B ground + safety yellow
   #E8A319 on cool concrete #F1F1EF. Oswald display, Barlow Condensed
   subheads, Lora body, Roboto Mono for data and eyebrow labels.
   Three sibling sites sharing a trade, a layout AND a palette read as
   near-duplicates, and Google ranks one of a duplicate set, not all three.
   Real job photos only, never AI. ZERO JavaScript — the call button is CSS.
   ========================================================================== */

:root{
  /* GREAT LAKES FOUNDRY — iron grey ground, cool concrete paper, safety
     yellow accent. The colourway of mill signage, crane hooks and machine
     guarding. Deliberately distinct from both sibling sites: a visitor who
     lands on two of them should never think they are the same company's
     template twice. See ideas.md. */
  --paper:#F1F1EF;          /* cool concrete page ground */
  --paper-2:#FFFFFF;        /* card surface */
  --paper-3:#E2E3E1;        /* alternating band */
  --shell:#23262B;          /* iron grey: masthead, dark bands, footer */
  --shell-2:#2F343A;        /* raised surface on dark */
  --navy:#23262B;
  --ink:#1B1D21;            /* headings on light */
  --ink-2:#3A3E44;          /* body copy */
  --ink-3:#6E737A;          /* muted / meta */
  /* SAFETY YELLOW — the signature. Warm amber rather than lemon so it holds
     contrast against white as well as against the iron shell, and so the
     buttons still read as buttons rather than as highlighter pen. */
  --copper:#E8A319;         /* the signature accent */
  --copper-lt:#F5B93F;      /* hover */
  --copper-dk:#B87C08;      /* pressed */
  /* Link colour on LIGHT ground must not be the accent — yellow on white fails
     contrast badly. Links use a deep iron-teal that belongs to the same
     industrial family and passes AA. */
  --verdigris:#1F5560;
  --verdigris-lt:#2C7080;
  --brass:#B87C08;          /* eyebrow label on light ground */
  --badge:#FBF0D8;          /* tinted callout fill */
  --rule:#C7C8C4;           /* hairline on light */
  --rule-2:#ABACA7;         /* stronger border */
  --card-line:#C7C8C4;
  --ease:cubic-bezier(0.23,1,0.32,1);
  --wrap:1240px;
  --rail:184px;
  --r-sm:0px;               /* SQUARE — the approved reference uses no rounding */
  --r-md:0px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--paper)}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:"Lora",Georgia,"Times New Roman",serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* ---------- type ---------- */
h1,h2,h3,h4{
  font-family:"Oswald","Barlow Condensed",Impact,system-ui,sans-serif;letter-spacing:.005em;
  color:var(--ink);
  margin:0 0 .5em;
  font-weight:700;
  letter-spacing:-.01em;
  text-transform:uppercase;
  text-wrap:balance;
}
h1{font-size:clamp(2.1rem,4.2vw,3.75rem);line-height:1.05;font-weight:400}
h2{font-size:clamp(1.5rem,2.5vw,2.1rem);line-height:1.12;margin-top:0}
h3{font-size:1.2rem;line-height:1.22;color:var(--ink)}
h4{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
   color:var(--copper-dk)}

p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

a{color:var(--verdigris);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(232,163,25,.42);
  transition:text-decoration-thickness 140ms var(--ease),color 140ms var(--ease)}
a:hover{color:var(--copper-lt);text-decoration-thickness:2px;text-decoration-color:var(--copper-lt)}
a:focus-visible{outline:2px solid var(--copper);outline-offset:2px;border-radius:0}

strong{font-weight:600;color:var(--ink)}

.mono{font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace}

/* eyebrow / plate label — SIGNATURE ELEMENT 1 */
.plate{
  font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.17em;
  color:var(--copper);display:block;margin:0 0 12px;
}
.plate::after{content:none}
.plate--copper{color:var(--copper)}
/* Roboto Mono sets wider than the mono face the sibling site used, so the hero
   eyebrow ("Six states · Direct buyer · No brokers") wrapped to two lines on a
   390px phone. Step the size and tracking down there rather than shortening the
   line — the three-part phrase is doing real work. */
@media (max-width:520px){
  .plate{font-size:.64rem;letter-spacing:.12em}
}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.wrap-narrow{max-width:940px;margin:0 auto;padding:0 26px}

section{padding:64px 0}
section.tight{padding:44px 0}
.band-paper2{background:var(--paper-3);border-top:0;border-bottom:0}
.band-paper2 h3{color:var(--ink)}
.band-ink{background:var(--shell);color:rgba(255,255,255,.80);
  border-top:0;border-bottom:0}
.band-ink h2,.band-ink h1,.band-ink h3{color:#ffffff}
.band-ink h4{color:var(--copper-dk)}
.band-ink p,.band-ink li,.band-ink dd{color:rgba(255,255,255,.80)}
.band-ink a{color:var(--copper)}
.band-ink a:hover{color:var(--copper-lt)}
.band-ink .plate{color:var(--copper-lt)}
.band-ink .plate::after{background:var(--rule)}

/* left-rail spine — SIGNATURE LAYOUT */
.spine{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0 44px;align-items:start}
.spine__rail{
  font-family:"Lora",Georgia,"Times New Roman",serif;font-size:.85rem;
  color:var(--ink-3);
  border-right:1px solid var(--rule);padding-right:22px;line-height:1.6;
  position:sticky;top:22px;
}
.spine__rail dt{color:var(--ink-3);font-weight:500;margin-top:14px;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em}
.spine__rail dt:first-child{margin-top:0}
.spine__rail dd{margin:0;color:var(--ink);font-size:.95rem;font-weight:500}
.spine__body{min-width:0}
@media(max-width:900px){
  .spine{grid-template-columns:1fr;gap:26px}
  .spine__rail{border-right:0;border-left:3px solid var(--copper);padding:0 0 0 16px;position:static}
}

/* ---------- header ---------- */
.masthead{background:var(--shell);border-bottom:0;position:sticky;top:0;z-index:50}
.masthead__top{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:18px 0 16px;flex-wrap:wrap}
.masthead__top{align-items:center;padding:16px 0 14px}
.masthead__top>*{align-self:center}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;
  flex:0 1 auto;min-width:0}
.brand:hover{text-decoration:none}
.brand img{width:44px;height:44px;display:block;flex:none}

/* Wordmark lockup: SOUTHEAST / ELECTRICAL BUYERS stacked, coverage line under.
   Stacked rather than set on one line because Oswald is a tall narrow face and
   the full name on one line overflows a 390px viewport. Line height is pulled
   under 1 so the two lines read as one block rather than two sentences. */
.brand__wm{line-height:1.02;letter-spacing:0;min-width:0}
.brand__wm b{display:block;
  font-family:"Oswald","Barlow Condensed",Impact,system-ui,sans-serif;letter-spacing:.005em;
  font-size:1.22rem;font-weight:700;color:#ffffff;text-transform:uppercase;
  letter-spacing:-.005em;white-space:nowrap;line-height:1.02}
/* Second line in copper: the signature colour appears in the wordmark itself,
   not only in buttons. */
.brand__wm .brand__wm2{color:var(--copper)}
/* Coverage line. Translucent white rather than grey, since the ground is the
   dark shell. */
.brand__wm span{display:block;font-size:.66rem;color:rgba(255,255,255,.60);
  letter-spacing:.10em;margin-top:5px;line-height:1.3;text-transform:none;
  white-space:nowrap;
  font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
@media(max-width:700px){
  .brand img{width:38px;height:38px}
  .brand__wm b{font-size:1.04rem}
  .brand__wm span{font-size:.58rem;letter-spacing:.06em;margin-top:4px}
}
@media(max-width:400px){
  .brand__wm b{font-size:.95rem}
  .brand__wm span{display:none}
}

.hcontact{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  font-family:"Lora",Georgia,"Times New Roman",serif;font-size:.78rem;letter-spacing:.04em;
  color:rgba(255,255,255,.66)}
.hcontact__lines{display:block;line-height:1.3}
.hcontact__cta{flex:0 0 auto}
@media(max-width:620px){
  .hcontact{gap:12px;width:100%;justify-content:space-between}
}
.hcontact a{text-decoration:none;color:#ffffff}
.hcontact a:hover{color:var(--copper)}
.hcontact .tel{font-family:"Oswald","Barlow Condensed",Impact,system-ui,sans-serif;letter-spacing:.005em;font-size:1.12rem;font-weight:700;color:#ffffff;letter-spacing:.02em}

nav.nav{border-top:1px solid rgba(255,255,255,.10);background:var(--shell)}
/* OWNER REQUIREMENT (2026-08-08): the five nav links MUST sit on one line.
   They wrapped to a second row on a phone, which doubled the header height and
   looked broken. nowrap keeps them in one row; if a viewport is narrower than
   the labels need, the row scrolls sideways instead of wrapping. */
nav.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  -ms-overflow-style:none}
nav.nav ul::-webkit-scrollbar{display:none}
nav.nav li{flex:0 0 auto}
nav.nav a{display:block;padding:14px 18px;text-decoration:none;color:#ffffff;
  font-family:"Oswald","Barlow Condensed",Impact,system-ui,sans-serif;letter-spacing:.005em;font-size:.92rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;
  white-space:nowrap;
  transition:background 130ms var(--ease),color 130ms var(--ease)}
nav.nav a:hover{background:rgba(255,255,255,.07);color:var(--copper)}
/* Step the padding, size and tracking down so all five labels fit a 390px
   iPhone viewport on one line without needing to scroll at all. */
/* These steps are tighter than the sister site's because Oswald sets
   much wider than a condensed face at the same size. Shrinking type alone was
   not enough — at .5rem the labels were still clipping AND had become too small
   to read, so the labels themselves were shortened instead (see NAV in
   layout.py). Don't lengthen them again without re-checking 390px. */
@media(max-width:820px){nav.nav a{padding:12px 9px;font-size:.74rem;
  letter-spacing:.02em}}
@media(max-width:680px){nav.nav a{padding:11px 7px;font-size:.66rem;
  letter-spacing:.01em}}
@media(max-width:430px){nav.nav a{padding:10px 6px;font-size:.6rem;
  letter-spacing:0}}

/* ---------- hero: dark photo band, copy left, form card right ---------- */
.hero{position:relative;background:var(--shell);color:#ffffff;overflow:hidden;
  border-bottom:0}
.hero__bg{position:absolute;inset:0;z-index:0}
/* <picture> is inline by default and would not fill the band, so stretch both
   the wrapper and the img. The phone-specific crop is selected by a <source
   media> rule — pure HTML, no JavaScript. */
.hero__bg picture{display:block;width:100%;height:100%}
.hero__bg img{width:100%;height:100%;object-fit:cover;display:block}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(35,38,43,.94) 0%,rgba(35,38,43,.86) 46%,rgba(35,38,43,.70) 100%)}
/* On a phone the hero stacks, so the LEFT-to-right gradient above put its
   heaviest 94% ink over the whole width — the photo read as a near-black
   texture and looked blurry rather than dark. Below the stack breakpoint,
   switch to a top-to-bottom gradient that is light where the photo is and
   only darkens behind the text block. */
/* ---- mobile hero: photo as its own band, NOT a backdrop ----
   Owner feedback: on a phone the hero photo looked blurry and unreadable. Two
   real causes, both geometric rather than a quality problem with the file:

   1. At 390px the hero band measures 390x1956 (aspect 0.199) while the photo is
      1206x1704 (aspect 0.708). `object-fit:cover` matches the HEIGHT and throws
      away ~70% of the WIDTH — a hugely magnified vertical sliver. That is what
      read as "blurry".
   2. Whatever survived sat behind ~500px of white body copy, so the subject was
      never legible anyway.

   Fix: stop treating the photo as a full-bleed backdrop on phones. Let it be a
   normal 4:3 image band at the top of the section, at close to 1:1 pixel scale,
   with the text on solid dark beneath it. The photo is then sharp and fully
   visible, and the copy gets guaranteed contrast. */
@media(max-width:1000px){
  /* The 64px black band above the photo was `section{padding:64px 0}` inherited
     by .hero — measured: hero top 132, photo top 196. Zero it here; the photo
     supplies the visual top edge and .hero__grid supplies the copy padding. */
  .hero{background:var(--shell);display:flex;flex-direction:column;padding:0}
  /* `order:-1` moved the photo ahead of the .wrap in flex order, but the .wrap
     kept its own top padding, leaving a black gap between nav and photo. Put
     the photo first in normal order and zero the gap instead. */
  .hero__bg{position:relative;inset:auto;width:100%;
    aspect-ratio:4/3;overflow:hidden;flex:none}
  .hero__bg picture,.hero__bg img{width:100%;height:100%}
  .hero__bg img{object-fit:cover;object-position:50% 82%}
  /* Only a soft bottom fade so the photo meets the dark copy band cleanly.
     No heavy ink over the image itself — nothing is read on top of it now. */
  .hero__bg::after{
    background:linear-gradient(180deg,
      rgba(35,38,43,0) 62%,
      rgba(35,38,43,.55) 88%,
      rgba(35,38,43,1) 100%)}
  .hero__grid{padding:30px 0 44px}
}
.hero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;
  padding:66px 0 72px}
.hero__text{padding:0;display:flex;flex-direction:column;justify-content:center}
.hero__text h1{color:#ffffff;margin-bottom:.4em}
.hero__text h1 em{font-style:normal;color:var(--copper)}
.hero__lede{font-size:1.12rem;color:rgba(255,255,255,.82);max-width:52ch}
.hero__fig{display:none}
.hero__stamp{display:none}
.hero__trust{display:flex;flex-wrap:wrap;gap:22px;margin-top:26px;
  font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.12em;color:rgba(255,255,255,.66)}
.hero__trust span{display:inline-flex;align-items:center;gap:8px}
.hero__trust span::before{content:"";width:7px;height:7px;background:var(--copper);
  display:inline-block}
@media(max-width:1000px){
  .hero__grid{grid-template-columns:1fr;gap:32px;padding:44px 0 48px}
}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;align-items:center}

/* Quote form as a white card inside the hero — the reference's key structural
   move. It must stay readable on the dark band and must not run taller than the
   viewport on a phone, so the fields tighten up here. */
.hero__form .rfq{margin:0}
.hero__form .rfq h2{font-size:1.5rem}
.hero__form .rfq__lede{font-size:.92rem;margin-bottom:18px}
.hero__form .fld{margin-bottom:12px}
.hero__form .fld input,.hero__form .fld select,.hero__form .fld textarea{
  padding:10px 12px;font-size:.96rem}
.hero__form .fld textarea{min-height:86px}
.hero__form .frow{gap:12px}
.hero__form .fnote{margin-top:11px}
@media(max-width:1000px){
  .hero__form{margin-top:6px}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:"Oswald","Barlow Condensed",Impact,system-ui,sans-serif;letter-spacing:.005em;font-size:.95rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:15px 28px;text-decoration:none;cursor:pointer;border-radius:0;
  background:var(--copper);color:#ffffff;border:2px solid var(--copper);box-shadow:none;
  transition:transform 120ms var(--ease),box-shadow 120ms var(--ease),background 120ms var(--ease);
}
.btn:hover{background:var(--copper-lt);color:#ffffff;text-decoration:none}
.btn:active{transform:scale(.98)}
.btn--ink{background:var(--copper-dk);color:#ffffff;border-color:var(--copper-dk);box-shadow:none}
.btn--ink:hover{background:var(--shell-2);color:#ffffff}
.btn--ghost{background:transparent;color:#ffffff;box-shadow:none;
  border:2px solid rgba(255,255,255,.42);padding:15px 28px}
.btn--ghost:hover{background:rgba(255,255,255,.10);color:#ffffff;border-color:#ffffff}
.btn--ghost:active{transform:translateY(1px);box-shadow:none}
.btn--sm{padding:8px 14px;font-size:.8rem;letter-spacing:.01em}
.btn--lg{font-size:.86rem;padding:16px 32px}
.btn--block{display:block;width:100%;text-align:center}

/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);
  border:0;border-radius:0;background:var(--shell-2)}
.stats>div{padding:26px 26px;border-right:1px solid rgba(255,255,255,.10)}
.stats>div:last-child{border-right:0}
.stats b{display:block;font-family:"Oswald","Barlow Condensed",Impact,system-ui,sans-serif;letter-spacing:.005em;
  font-size:2.1rem;font-weight:700;color:var(--copper);line-height:1;letter-spacing:-.01em}
.stats span{display:block;font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;
  color:rgba(255,255,255,.62);margin-top:9px}

/* Promise cells (owner request 2026-08-08): the strip now carries four service
   promises instead of vanity counts. No numeral, so the sentence itself takes
   the display size and an orange leading rule replaces the big figure. */
.stats__promise b{
  display:block;
  font-family:"Oswald","Barlow Condensed",Impact,system-ui,sans-serif;letter-spacing:.005em;
  font-size:1.28rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:1.16;
  color:#ffffff;
  padding-top:14px;
  border-top:4px solid var(--copper);
}
@media(max-width:640px){
  .stats__promise b{font-size:1.08rem}
}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}
  .stats>div:nth-child(2){border-right:0}
  .stats>div:nth-child(1),.stats>div:nth-child(2){border-bottom:1px solid rgba(255,255,255,.10)}}

/* ---------- category / link grids ---------- */
.grid{display:grid;gap:20px;background:transparent;border:0}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:940px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid--3,.grid--4,.grid--2{grid-template-columns:1fr}}

.card{background:#ffffff;padding:0;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:0;overflow:hidden;
  text-decoration:none;color:var(--ink-2);position:relative;
  transition:background 140ms var(--ease)}
.card:hover{border-color:var(--copper);text-decoration:none;box-shadow:none}
.card::before{content:none}

.card__fig{aspect-ratio:16/10;overflow:hidden;background:#e9e9e9}
.card__fig img{width:100%;height:100%;object-fit:cover;display:block}
.card__body{padding:20px 22px 24px}
.card__body h3{margin:0 0 8px;font-family:"Lora",Georgia,"Times New Roman",serif;font-family:"Oswald","Barlow Condensed",Impact,system-ui,sans-serif;letter-spacing:.005em;font-weight:700;font-size:1.2rem;text-transform:uppercase;letter-spacing:-.005em;color:var(--ink)}
.card__body p{font-size:.94rem;color:var(--ink-2);margin:0}
.card__more{font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--copper);margin-top:14px;display:block}

/* ---------- ledger table — SIGNATURE ELEMENT 2 ---------- */
.ledger{width:100%;border-collapse:collapse;font-size:.95rem;margin:0 0 8px;color:var(--ink-2)}
.ledger caption{text-align:left;font-family:"Lora",Georgia,"Times New Roman",serif;
  font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);
  padding-bottom:10px}
.ledger thead th{text-align:left;font-family:"Lora",Georgia,"Times New Roman",serif;
  font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;
  color:var(--ink);padding:11px 12px;border-bottom:2px solid var(--rule-2)}
.ledger tbody td{padding:11px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.ledger tbody tr:nth-child(even){background:#fafafa}
.ledger tbody tr{transition:background 120ms var(--ease)}
.ledger tbody tr:hover{background:var(--badge)}
.ledger td.fig,.ledger th.fig{text-align:right;font-family:"Lora",Georgia,"Times New Roman",serif;
  font-size:.9rem;white-space:nowrap}
.ledger td:first-child{font-weight:600;color:var(--ink)}
.tscroll{overflow-x:auto}

/* ---------- prose blocks ---------- */
.prose{max-width:74ch}
.prose h2{margin-top:2em}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:1.7em;color:var(--copper-lt)}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.35em}
.prose li{margin-bottom:.45em}
.prose ul{list-style:none;padding-left:0}
.prose ul li{position:relative;padding-left:1.5em}
.prose ul li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:2px;
  background:var(--copper)}

blockquote{margin:1.6em 0;padding:4px 0 4px 26px;border-left:3px solid var(--copper);
  font-size:1.06rem;color:var(--ink-2);font-style:italic}
blockquote p:last-child{margin-bottom:0}

/* pull figure */
.figure{margin:30px 0;border:2px solid var(--card-line);background:#ffffff;padding:0;border-radius:0;overflow:hidden}
.figure img{width:100%;display:block}
.figure figcaption{font-family:"Lora",Georgia,"Times New Roman",serif;font-size:.68rem;
  text-transform:uppercase;letter-spacing:.13em;color:var(--ink-3);padding:10px 14px}

/* ---------- FAQ (pure CSS, details/summary) ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:17px 40px 17px 0;position:relative;
  font-family:"Lora",Georgia,"Times New Roman",serif;font-weight:500;font-size:1.08rem;letter-spacing:-.005em;color:var(--ink);
  list-style:none;transition:color 130ms var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:14px;
  font-family:"Lora",Georgia,"Times New Roman",serif;font-size:1.3rem;font-weight:400;color:var(--copper);
  transition:transform 160ms var(--ease)}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--copper)}
.faq__a{padding:0 40px 20px 0;color:var(--ink-2);font-size:.98rem}
.faq__a p:last-child{margin-bottom:0}

/* ---------- quote form — SIGNATURE ELEMENT 3 (corner brackets) ---------- */
.rfq{position:relative;background:#ffffff;padding:28px 28px 30px;
  border:0;border-top:5px solid var(--copper);border-radius:0;box-shadow:0 18px 44px rgba(0,0,0,.22)}
.rfq::before,.rfq::after{content:none}
.rfq::before{top:-1px;left:-1px;border-top:3px solid var(--copper);border-left:3px solid var(--copper)}
.rfq::after{bottom:-1px;right:-1px;border-bottom:3px solid var(--copper);border-right:3px solid var(--copper)}
.rfq__inner{position:relative}
.rfq__inner::before,.rfq__inner::after{content:none}
.rfq__inner::before{top:-35px;right:-35px;border-top:3px solid var(--copper);border-right:3px solid var(--copper)}
.rfq__inner::after{bottom:-37px;left:-35px;border-bottom:3px solid var(--copper);border-left:3px solid var(--copper)}
.rfq h2,.rfq h3{margin-bottom:.35em;color:var(--ink)}
.rfq__lede{color:var(--ink-2);font-size:.98rem;margin-bottom:22px}

.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.frow{grid-template-columns:1fr}}
.fld{display:block;margin-bottom:16px}
.fld>span{display:block;font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-3);margin-bottom:7px}
.fld input,.fld select,.fld textarea{
  width:100%;font-family:"Lora",Georgia,"Times New Roman",serif;font-size:1rem;color:var(--ink);
  background:#ffffff;border:1px solid var(--rule-2);border-radius:0;
  padding:12px 14px;transition:border-color 130ms var(--ease),box-shadow 130ms var(--ease)}
.fld input::placeholder,.fld textarea::placeholder{color:#8A8F96}
.fld textarea{min-height:118px;resize:vertical;line-height:1.6}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--copper);
  box-shadow:0 0 0 3px rgba(232,163,25,.20)}
.fld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--copper) 50%),
  linear-gradient(135deg,var(--copper) 50%,transparent 50%);
  background-position:calc(100% - 18px) 1.15em,calc(100% - 13px) 1.15em;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.fld select option{background:#ffffff;color:var(--ink)}
.fnote{font-family:"Lora",Georgia,"Times New Roman",serif;font-size:.66rem;
  letter-spacing:.08em;color:var(--ink-3);margin-top:14px;line-height:1.6}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- breadcrumbs ---------- */
.crumbs{font-family:"Lora",Georgia,"Times New Roman",serif;font-size:.85rem;
  color:var(--ink-3);
  padding:14px 0;border-bottom:1px solid var(--rule);background:#ffffff}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--copper)}
.crumbs span{margin:0 8px;color:var(--rule-2)}

/* ---------- link columns (city lists, no orphans) ---------- */
.cols{column-count:4;column-gap:32px;font-size:.93rem}
@media(max-width:940px){.cols{column-count:3}}
@media(max-width:700px){.cols{column-count:2}}
@media(max-width:440px){.cols{column-count:1}}
.cols a{display:block;padding:4px 0;text-decoration:none;color:var(--verdigris);
  break-inside:avoid;border-bottom:1px solid transparent}
.cols a:hover{color:var(--copper-lt);border-bottom-color:var(--rule-2)}

.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.chips a{display:inline-block;padding:8px 15px;background:var(--paper-3);
  border:1px solid var(--rule-2);text-decoration:none;color:var(--ink-2);border-radius:0;
  font-family:"Lora",Georgia,"Times New Roman",serif;font-size:.86rem;letter-spacing:.005em;
  transition:background 130ms var(--ease),border-color 130ms var(--ease),color 130ms var(--ease)}
.chips a:hover{background:var(--copper);border-color:var(--copper);color:#ffffff}

/* ---------- callout ---------- */
.callout{border-left:3px solid var(--copper);background:var(--badge);
  padding:20px 24px;margin:26px 0;color:var(--ink-2)}
.callout p:last-child{margin-bottom:0}
.callout h4{margin-bottom:8px;color:var(--copper-lt)}

/* ---------- CTA band ---------- */
.cta{background:var(--copper);color:#ffffff;padding:52px 0;border:0}
.cta__grid{display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:center}
@media(max-width:860px){.cta__grid{grid-template-columns:1fr;gap:26px}}
.cta h2{color:#ffffff;margin-bottom:.4em}
.cta p{color:rgba(255,255,255,.92);margin-bottom:0}
.cta__tel{font-family:"Lora",Georgia,"Times New Roman",serif;font-size:2rem;font-weight:700;
  color:#ffffff;text-decoration:none;display:block;letter-spacing:-.02em;line-height:1.2}
.cta__tel:hover{color:var(--shell);text-decoration:none}
.cta__meta{font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;
  color:rgba(255,255,255,.86);margin-top:10px}

/* ---------- footer ---------- */
footer.foot{background:var(--shell);border-top:5px solid var(--copper);
  padding:48px 0 30px;font-size:.94rem;color:#c7c7c7}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
@media(max-width:900px){.foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot__grid{grid-template-columns:1fr}}
.foot h4{margin-bottom:12px;color:#ffffff}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:7px}
.foot a{color:#c7c7c7;text-decoration:none}
.foot a:hover{color:var(--copper)}
.foot__brand p{color:#9b9b9b;font-size:.94rem;max-width:40ch}
.foot__tel{font-family:"Oswald","Barlow Condensed",Impact,system-ui,sans-serif;letter-spacing:.005em;font-size:1.36rem;font-weight:700;
  color:var(--copper);text-decoration:none;display:block;margin-bottom:4px}
.colophon{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:20px;
  text-align:center;font-family:"Lora",Georgia,"Times New Roman",serif;
  font-size:.66rem;text-transform:uppercase;letter-spacing:.13em;color:var(--ink-3);line-height:1.9}
.colophon a{color:var(--ink-3);text-decoration:none}
.colophon a:hover{color:var(--copper)}

/* ---------- misc ---------- */
.hr-copper{height:5px;background:var(--copper);border:0;margin:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.two{display:grid;grid-template-columns:1.6fr 1fr;gap:46px;align-items:start}
@media(max-width:940px){.two{grid-template-columns:1fr;gap:34px}}
.sticky{position:sticky;top:22px}
@media(max-width:940px){.sticky{position:static}}

.pager{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:26px;
  font-family:"Lora",Georgia,"Times New Roman",serif;font-size:.9rem}
.pager a,.pager span{padding:8px 13px;border:1px solid var(--rule-2);text-decoration:none;
  color:var(--ink-2);border-radius:0}
.pager a:hover{background:var(--copper);color:#ffffff;border-color:var(--copper)}
.pager .cur{background:var(--copper);color:#ffffff;border-color:var(--copper)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms !important;animation-duration:1ms !important}
  html{scroll-behavior:auto}
}

@media print{
  nav.nav,.rfq,.cta{display:none}
  body{background:#fff;color:#111;font-size:11pt}
  h1,h2,h3,h4{color:#111}
}

/* ================================================================= *
 * FLOATING CALL BUTTON — owner request 2026-08-08: drop the two-button
 * bar, use ONE round button that dials the cell. CSS-only, no JS.
 * Emitted by layout.sticky(), appended after the footer in build.page().
 * This is the ONLY intentional circle in the design — everything else is
 * square per the reference — which is precisely why it reads as a button.
 * ================================================================= */
.callfab{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:60;
  width:62px;
  height:62px;
  border-radius:50%;
  background:var(--copper);
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:0 8px 22px rgba(0,0,0,.30);
  transition:background 140ms var(--ease),transform 140ms var(--ease),
             box-shadow 140ms var(--ease);
}
.callfab:hover{
  background:var(--copper-lt);
  color:#ffffff;
  text-decoration:none;
  box-shadow:0 10px 26px rgba(0,0,0,.34);
}
.callfab:active{transform:scale(.94)}
.callfab:focus-visible{outline:3px solid #ffffff;outline-offset:3px}
.callfab svg{display:block}

/* Faint ring so the button still reads as a button on a white section. */
.callfab::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:2px solid rgba(232,163,25,.28);
}

@media (min-width:900px){
  .callfab{right:26px;bottom:26px;width:66px;height:66px}
}

@media (prefers-reduced-motion:reduce){
  .callfab{transition:none}
}


/* ---------------------------------------------------------------- BLUE RIDGE
   Heading hierarchy. Oswald carries H1 and the wordmark only; H2/H3 drop
   to Barlow Condensed 700 so the levels remain distinct from each other. */
h2,h3,.h2b__h{
  font-family:"Barlow Condensed","Oswald",Impact,system-ui,sans-serif;
  font-weight:700;
  letter-spacing:-.01em;
}

/* The copper eyebrow rule — the one motif that repeats on every page. */
.plate::after{background:var(--copper)}

/* Ledger figure columns are instrument readouts: monospaced and aligned. */
.ledger td.fig,.ledger th.fig{
  font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;
}