/* ==========================================================================
   westelectricalbuyers.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 "Pacific Substation" (see ideas.md), deliberately NOT the Texas,
   Southeast, Midwest or Northeast palette. West Coast engineering modernism:
   bone-white daylight ground #F7F6F2, deep Pacific teal shell #123A42, signal
   teal #0F7F8C signature, structural blue #175C7A for links. Saira Condensed
   display, Saira subheads, Public Sans body, Roboto Mono for data and eyebrows.

   Note the inversion: ALL FOUR sibling sites are dark shell + WARM accent
   (Texas orange, Southeast copper-red, Midwest safety yellow, Northeast brick
   red). This is the only one with a COLD signature, and it trades the
   Northeast's heavy brick mass for hairline precision. Five siblings sharing a
   trade, a layout AND a palette read as near-duplicates, and Google ranks one
   of a duplicate set, not all five. Do not harmonise with a sibling.

   Real job photos only, never AI. ZERO JavaScript — the call button is CSS.
   ========================================================================== */

:root{
  /* PACIFIC SUBSTATION — see ideas.md. West Coast engineering modernism: a
     substation drawing set read as a page. Bright bone ground, deep teal
     structure, one cold signal accent. This deliberately inverts the
     warm-accent pattern shared by all four sibling sites. A visitor landing on
     two of the five must never think they are looking at one company's template
     twice. Do not "harmonise" these values with a sibling site. */
  --paper:#F7F6F2;          /* bone-white daylight page ground */
  --paper-2:#FFFFFF;        /* card surface */
  --paper-3:#EAE8E1;        /* alternating band */
  --shell:#123A42;          /* deep Pacific teal: masthead, dark bands, footer */
  --shell-2:#1B4C55;        /* raised surface on dark */
  --navy:#123A42;
  --ink:#101E22;            /* headings on light */
  --ink-2:#2C3D42;          /* body copy */
  --ink-3:#5E7076;          /* muted / meta */
  /* SIGNAL TEAL — the signature, and the only COLD accent in the network.
     Texas orange, Southeast copper-red #B54A28, Midwest safety yellow and
     Northeast brick red #9C3A24 are all warm; this cannot be mistaken for any
     of them. */
  --copper:#0F7F8C;         /* the signature accent */
  --copper-lt:#149AA8;      /* hover */
  --copper-dk:#0A6270;      /* pressed */
  /* Links on LIGHT ground use a deeper structural blue, not the accent: signal
     teal on a bone ground is bright enough to read as emphasis rather than as a
     link, and two teals competing on one page muddies the signature. This
     passes AA on --paper. */
  --verdigris:#175C7A;
  --verdigris-lt:#1F7397;
  --brass:#8A6A3B;          /* eyebrow label on light ground — dry grass */
  --badge:#E2EFF0;          /* tinted callout fill */
  --rule:#D3D6D2;           /* hairline on light */
  --rule-2:#AEB5B3;         /* stronger border */
  --card-line:#D3D6D2;
  --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:"Public Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* ---------- type ---------- */
h1,h2,h3,h4{
  font-family:"Saira Condensed","Saira",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(15,127,140,.40);
  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:"Public Sans","Helvetica Neue",Arial,system-ui,sans-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}
/* SIGNATURE ELEMENT: the DATUM RULE. A 2px signal-teal hairline directly under
   the masthead with a short solid tick at its left end, the way a datum line
   sits on an engineering drawing sheet. Full width, on every page. This is the
   single most recognisable mark on the site and the fastest way a returning
   visitor knows which of the five regional properties they are on.
   Deliberately the OPPOSITE weight of the Northeast site's 6px brick band —
   that site is about mass, this one is about precision. Do not thicken it into
   a band. */
.masthead::after{content:"";display:block;height:2px;
  background:linear-gradient(90deg,
    var(--copper) 0,var(--copper) 74px,
    rgba(15,127,140,.34) 74px,rgba(15,127,140,.34) 100%)}
.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: WEST / ELECTRICAL BUYERS stacked, coverage line under.
   Kept stacked even though "WEST" is short and Saira Condensed is narrow: the
   two-line lockup with the coverage line beneath is the shape the owner has
   approved across the network, and it leaves room for the six-state line.
   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:"Saira Condensed","Saira",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 the accent: the signature colour appears in the wordmark,
   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:"Public Sans","Helvetica Neue",Arial,system-ui,sans-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:"Saira Condensed","Saira",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:"Saira Condensed","Saira",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. */
/* Saira Condensed is a genuinely condensed face, so these steps have more
   headroom than the Northeast build had with Archivo Black. The shortened nav
   labels from that build are kept anyway (see NAV in layout.py) — they fit
   comfortably now rather than marginally. Don't lengthen them 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(18,58,66,.94) 0%,rgba(18,58,66,.86) 46%,rgba(18,58,66,.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(18,58,66,0) 62%,
      rgba(18,58,66,.55) 88%,
      rgba(18,58,66,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:"Saira Condensed","Saira",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:"Saira Condensed","Saira",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:"Saira Condensed","Saira",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:"Public Sans","Helvetica Neue",Arial,system-ui,sans-serif;font-family:"Saira Condensed","Saira",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:"Public Sans","Helvetica Neue",Arial,system-ui,sans-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:"Public Sans","Helvetica Neue",Arial,system-ui,sans-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:"Public Sans","Helvetica Neue",Arial,system-ui,sans-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:"Public Sans","Helvetica Neue",Arial,system-ui,sans-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:"Public Sans","Helvetica Neue",Arial,system-ui,sans-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:"Public Sans","Helvetica Neue",Arial,system-ui,sans-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:"Public Sans","Helvetica Neue",Arial,system-ui,sans-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:"Public Sans","Helvetica Neue",Arial,system-ui,sans-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:"Public Sans","Helvetica Neue",Arial,system-ui,sans-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:"Public Sans","Helvetica Neue",Arial,system-ui,sans-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:"Public Sans","Helvetica Neue",Arial,system-ui,sans-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:"Saira Condensed","Saira",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:"Public Sans","Helvetica Neue",Arial,system-ui,sans-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:"Public Sans","Helvetica Neue",Arial,system-ui,sans-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}
}


/* ------------------------------------------------------------ PACIFIC SUBSTATION
   Heading hierarchy. Saira Condensed 800 carries H1 and the wordmark only; H2/H3
   drop to Saira 600 so the levels stay distinct from each other. */
h2,h3,.h2b__h{
  font-family:"Saira","Saira Condensed",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;
}