/* ==========================================================================
   New Orleans Electrical Services
   Mood: industrial trust, storm-ready reliability.

   Palette rationale (not a template default):
     slate      storm sky and conduit steel
     amber      safety amber -- lockout/tagout tags, hazard labelling
     verdigris  oxidised copper: NOLA roofs, gutters, and old conductor
   Signature element: the "conductor rule", a segmented amber trace used as
   the section divider and under prose H2s, reading as a wire run.
   ========================================================================== */

/* ---------- fonts: self-hosted, no network request --------------------- */
@font-face {
  font-family: "Big Shoulders";
  src: url("/fonts/bigshoulders-700.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("/fonts/worksans-400.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("/fonts/worksans-400i.woff") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("/fonts/worksans-700.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/fonts/plexmono-400.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- tokens ------------------------------------------------------ */
:root {
  /* sampled from the supplied logo: navy #01204A, gold #EBA701 */
  --slate-900:#01204A; --slate-800:#0A2C5C; --slate-700:#173A6E;
  --slate-500:#3D5B85; --slate-400:#7086A8;
  --amber:#EBA701; --amber-600:#C08600; --amber-100:#FDF1D4;
  /* no third brand colour: "included / verified" uses navy at lower weight */
  --verdigris:#0A2C5C; --verdigris-100:#E3E9F2;
  --danger:#B2261D; --danger-100:#FBE6E4;
  --mist:#EEF1F6; --mist-200:#DDE3ED; --rule:#C7D0DE; --white:#FFFFFF;

  --font-display:"Big Shoulders", "Arial Narrow", sans-serif;
  --font-body:"Work Sans", system-ui, sans-serif;
  --font-mono:"Plex Mono", ui-monospace, monospace;

  --container:1280px;
  --measure:68ch;
  --pad:clamp(1rem, 4vw, 2rem);
  --section-y:clamp(3rem, 7vw, 5.5rem);
  --radius:3px;                    /* near-square: industrial, not pill */
  --shadow:0 1px 2px rgba(19,28,38,.06), 0 4px 14px rgba(19,28,38,.07);
  --shadow-lift:0 2px 4px rgba(19,28,38,.08), 0 12px 28px rgba(19,28,38,.13);
  --callbar-h:64px;
}

/* ---------- reset ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;font-family:var(--font-body);font-size:17px;line-height:1.65;
  color:var(--slate-800);background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
svg{display:block}
a{color:var(--slate-900);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--amber-600)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
hr{border:0;border-top:1px solid var(--rule);margin:2rem 0}
table{border-collapse:collapse;width:100%}

/* ---------- type scale -------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--font-display);font-weight:700;line-height:1.04;
  letter-spacing:.005em;color:var(--slate-900);margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(2.6rem,6.4vw,4.6rem)}
h2{font-size:clamp(2rem,4vw,2.9rem)}
h3{font-size:clamp(1.55rem,2.6vw,2rem)}
h4{font-size:clamp(1.25rem,2vw,1.5rem)}
p{margin:0 0 1.15em}
.lede{font-size:1.22rem;line-height:1.55;color:var(--slate-700)}

/* eyebrow: a <p>/<span>, never a heading tag */
.eyebrow{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--amber-600);margin:0 0 .7rem;font-weight:400;
}
.eyebrow--light{color:var(--amber)}

/* ---------- signature: the ridgeline rule -------------------------------
   A low angular mountain profile in gold, echoing the logo mark. Replaces the
   segmented "conductor" trace used in the New Orleans build. Drawn as an
   inline SVG data URI so it scales without an extra request. */
.conductor{
  height:14px;border:0;margin:0;width:100%;
  background-repeat:repeat-x;background-position:left bottom;
  background-size:auto 14px;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'>\
<path d='M0 14 L18 4 L28 9 L44 0 L60 11 L74 5 L88 12 L104 3 L120 14 Z' fill='%23EBA701'/>\
</svg>");
}
.conductor--short{width:104px}

/* ---------- layout ------------------------------------------------------ */
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--section-y)}
.section--mist{background:var(--mist)}
.section--dark{background:var(--slate-900);color:#DCE4EC}
.section--dark h2,.section--dark h3{color:var(--white)}
.section--dark a{color:var(--amber)}
.grid{display:grid;gap:1.5rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.stack>*+*{margin-top:1rem}
.section-head{max-width:60ch;margin-bottom:2.25rem}
.section-head .conductor{margin-bottom:1.1rem}

/* ---------- buttons ----------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-display);font-size:1.18rem;font-weight:700;
  letter-spacing:.02em;text-decoration:none;text-align:center;
  padding:.85rem 1.5rem;border-radius:var(--radius);border:2px solid transparent;
  min-height:52px;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--call{
  background:var(--amber);color:var(--slate-900);
  box-shadow:0 3px 0 var(--amber-600);
}
.btn--call:hover{background:#FFB01A;color:var(--slate-900)}
.btn--ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{background:rgba(255,255,255,.1);color:var(--white)}
.btn--dark{background:var(--slate-900);color:var(--white)}
.btn--dark:hover{background:var(--slate-700);color:var(--white)}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem}

/* ---------- header ------------------------------------------------------ */
.site-header{
  position:sticky;top:0;z-index:60;background:var(--slate-900);color:var(--white);
  transition:box-shadow .18s ease;
}
.site-header.is-stuck{box-shadow:0 6px 22px rgba(0,0,0,.3)}
.header-bar{display:flex;align-items:center;gap:1rem;min-height:74px}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;flex:0 0 auto}
.brand img{height:48px;width:auto}
.header-spacer{flex:1 1 auto}
.nav{display:none}
.nav ul{display:flex;list-style:none;margin:0;padding:0;gap:.15rem;align-items:center}
.nav a{
  color:#D7E0E8;text-decoration:none;font-size:.93rem;font-weight:400;
  padding:.55rem .68rem;border-radius:var(--radius);display:inline-block;white-space:nowrap;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--white);background:rgba(255,255,255,.09)}
.has-sub{position:relative}
.subnav{
  position:absolute;top:100%;left:0;min-width:260px;background:var(--white);
  border:1px solid var(--rule);border-top:3px solid var(--amber);
  box-shadow:var(--shadow-lift);padding:.4rem;display:none;flex-direction:column;
}
.has-sub:hover .subnav,.has-sub:focus-within .subnav{display:flex}
.subnav a{color:var(--slate-800);padding:.55rem .7rem;font-size:.95rem}
.subnav a:hover{background:var(--mist);color:var(--slate-900)}
.header-phone{
  display:none;font-family:var(--font-mono);font-size:1.02rem;color:var(--white);
  text-decoration:none;white-space:nowrap;padding:.4rem .5rem;
}
.header-phone:hover{color:var(--amber)}
.header-phone span{display:block;font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--amber);line-height:1.3}
.header-cta{display:none}
.burger{
  margin-left:auto;background:transparent;border:1px solid rgba(255,255,255,.35);
  color:var(--white);width:46px;height:46px;border-radius:var(--radius);
  display:grid;place-items:center;cursor:pointer;
}
.burger svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.mobile-nav{display:none;border-top:1px solid rgba(255,255,255,.14);padding:.6rem 0 1.1rem}
.mobile-nav.is-open{display:block}
.mobile-nav ul{list-style:none;margin:0;padding:0}
.mobile-nav a{display:block;color:#D7E0E8;text-decoration:none;padding:.72rem .25rem;border-bottom:1px solid rgba(255,255,255,.08);font-size:1.02rem}
.mobile-nav .sub a{padding-left:1.25rem;font-size:.95rem;color:var(--slate-400)}
@media (min-width:1080px){
  .nav{display:block}
  .header-phone{display:block}
  .header-cta{display:inline-flex}
  .burger{display:none}
  .mobile-nav{display:none!important}
}

/* ---------- ticker ------------------------------------------------------ */
.ticker{background:var(--slate-800);color:#C8D4DE;border-bottom:1px solid rgba(255,255,255,.08)}
.ticker ul{
  display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;list-style:none;margin:0;padding:.7rem 0;
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.05em;
}
.ticker li{display:flex;align-items:center;gap:.5rem}
.ticker li::before{content:"";width:6px;height:6px;background:var(--amber);flex:0 0 auto}

/* ---------- hero -------------------------------------------------------- */
.hero{background:var(--slate-900);color:#DAE2EA;position:relative;overflow:hidden}
.hero-grid{
  display:grid;gap:clamp(1.75rem,4vw,3rem);align-items:center;
  padding-block:clamp(2.5rem,6vw,4.5rem);
}
@media (min-width:960px){.hero-grid{grid-template-columns:1.05fr .95fr}}
.hero h1{color:var(--white);margin-bottom:.35em}
.hero .lede{color:#BCCAD6;font-size:1.24rem;max-width:56ch}
.badge{
  display:inline-flex;align-items:center;gap:.5rem;background:var(--amber);
  color:var(--slate-900);font-family:var(--font-mono);font-size:.74rem;
  letter-spacing:.13em;text-transform:uppercase;padding:.4rem .75rem;margin-bottom:1.1rem;
}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--danger)}
.hero-media{position:relative}
.hero-media img{width:100%;border-radius:var(--radius);border:1px solid rgba(255,255,255,.12)}
.trust-tiles{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14);margin-top:2rem;
}
@media (min-width:640px){.trust-tiles{grid-template-columns:repeat(4,1fr)}}
.trust-tiles div{background:var(--slate-900);padding:.9rem .85rem}
.trust-tiles strong{
  display:block;font-family:var(--font-display);font-size:1.16rem;color:var(--white);line-height:1.15;
}
.trust-tiles span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}

/* ---------- cards ------------------------------------------------------- */
.card{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.4rem;box-shadow:var(--shadow);transition:transform .14s ease, box-shadow .14s ease;
  display:flex;flex-direction:column;
}
a.card{text-decoration:none;color:inherit}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--slate-400)}
.card h3{margin-bottom:.35em;font-size:1.5rem}
.card p{color:var(--slate-700);font-size:.98rem;margin-bottom:.9rem}
.card .card-meta{
  margin-top:auto;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--verdigris);
}
.card--pain{border-left:3px solid var(--danger);background:var(--white)}
.card--pain h3{font-size:1.35rem}
.card-flag{
  position:absolute;top:.75rem;right:.75rem;background:var(--amber);color:var(--slate-900);
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;padding:.22rem .5rem;
}
.card--img{padding:0;overflow:hidden;position:relative}
.card--img .card-body{padding:1.3rem;display:flex;flex-direction:column;flex:1}
.card--img img{aspect-ratio:16/10;object-fit:cover;width:100%}

/* ---------- process ----------------------------------------------------- */
.steps{counter-reset:step;display:grid;gap:1.5rem}
@media (min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;padding-top:2.6rem;border-top:3px solid var(--slate-900)}
.step::before{
  counter-increment:step;content:"0" counter(step);
  position:absolute;top:.6rem;left:0;font-family:var(--font-mono);
  font-size:.95rem;color:var(--amber-600);letter-spacing:.08em;
}
.step h3{font-size:1.32rem;margin-bottom:.3em}
.step p{font-size:.96rem;color:var(--slate-700);margin:0}

/* ---------- checks / lists ---------------------------------------------- */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
@media (min-width:700px){.checks--2{grid-template-columns:1fr 1fr;gap:.75rem 2rem}}
.checks li{position:relative;padding-left:1.9rem;font-size:1rem}
.checks li::before{
  content:"";position:absolute;left:0;top:.38em;width:1.05rem;height:.58rem;
  border-left:2.5px solid var(--verdigris);border-bottom:2.5px solid var(--verdigris);
  transform:rotate(-45deg);
}
.warn-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.warn-list li{position:relative;padding-left:1.6rem;font-size:1rem}
.warn-list li::before{
  content:"";position:absolute;left:0;top:.55em;width:.62rem;height:.62rem;
  background:var(--danger);transform:rotate(45deg);
}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.chips li{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--radius);
  padding:.4rem .8rem;font-size:.92rem;
}
.chips--dark li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#D2DCE5}

/* ---------- pricing ----------------------------------------------------- */
.price-band{display:grid;gap:1.25rem}
@media (min-width:760px){.price-band{grid-template-columns:repeat(3,1fr)}}
.price-card{
  background:var(--white);border:1px solid var(--rule);border-top:4px solid var(--amber);
  padding:1.4rem;border-radius:var(--radius);
}
.price-card .price-label{font-family:var(--font-mono);font-size:.73rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-500);margin:0 0 .5rem}
.price-card .price-figure{font-family:var(--font-display);font-size:2.15rem;line-height:1.05;color:var(--slate-900);margin:0 0 .6rem}
.price-card .price-basis{font-size:.9rem;color:var(--slate-700);margin:0}
.price-card cite{display:block;font-style:normal;font-size:.8rem;margin-top:.7rem}
.price-note{
  margin-top:1.5rem;padding:1rem 1.2rem;background:var(--amber-100);
  border-left:3px solid var(--amber);font-size:.96rem;
}
.price-note p{margin:0}

/* ---------- comparison table -------------------------------------------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);border-radius:var(--radius)}
.cmp{min-width:720px;background:var(--white);font-size:.95rem}
.cmp th,.cmp td{padding:.85rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.cmp thead th{
  background:var(--slate-900);color:var(--white);font-family:var(--font-mono);
  font-size:.73rem;letter-spacing:.09em;text-transform:uppercase;font-weight:400;
}
.cmp thead th:last-child{background:var(--verdigris)}
.cmp tbody th{
  font-family:var(--font-body);font-weight:700;background:var(--mist);
  width:20%;font-size:.93rem;
}
.cmp td:last-child{background:var(--verdigris-100)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}

/* ---------- FAQ --------------------------------------------------------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.1rem 2.5rem 1.1rem 0;position:relative;
  font-family:var(--font-display);font-size:1.32rem;color:var(--slate-900);line-height:1.2;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:1.45rem;width:.7rem;height:.7rem;
  border-right:2.5px solid var(--amber-600);border-bottom:2.5px solid var(--amber-600);
  transform:rotate(45deg);transition:transform .16s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .faq-a{padding:0 0 1.2rem;max-width:var(--measure)}
.faq .faq-a p{margin:0}

/* ---------- prose (guides, blog, service articles) ---------------------- */
/* Calibrated up from a default scale: the reference site's articles render
   headings small and tight, which is the thing to beat. */
.prose{max-width:var(--measure);font-size:1.09rem;line-height:1.72}
.prose > *:first-child{margin-top:0}
.prose h2{
  font-size:clamp(1.95rem,3.4vw,2.55rem);margin:2.6em 0 .55em;
  padding-bottom:.32em;border-bottom:1px solid var(--rule);position:relative;
}
.prose h2::after{
  content:"";position:absolute;left:0;bottom:-1px;width:104px;height:3px;
  background:var(--amber);
}
.prose h3{font-size:clamp(1.5rem,2.5vw,1.95rem);margin:2em 0 .45em}
.prose h4{font-size:clamp(1.2rem,1.9vw,1.42rem);margin:1.7em 0 .4em}
.prose p{margin:0 0 1.25em}
.prose ul,.prose ol{margin:0 0 1.4em;padding-left:1.3rem}
.prose li{margin-bottom:.55em}
.prose li::marker{color:var(--amber-600)}
.prose strong{color:var(--slate-900)}
.prose blockquote{
  margin:1.8em 0;padding:.2em 0 .2em 1.3rem;border-left:4px solid var(--amber);
  color:var(--slate-700);font-size:1.06em;
}
.prose table{margin:1.8em 0;font-size:.97rem;border:1px solid var(--rule)}
.prose th,.prose td{padding:.7rem .9rem;border-bottom:1px solid var(--rule);text-align:left}
.prose thead th{background:var(--mist);font-family:var(--font-body);font-weight:700}
.prose a{color:var(--slate-900);text-decoration:underline;text-decoration-color:var(--amber)}
.prose a:hover{color:var(--amber-600)}

/* answer-first block */
.answer-box{
  background:var(--slate-900);color:#E4EAF0;padding:1.5rem 1.6rem;border-radius:var(--radius);
  border-left:5px solid var(--amber);margin-bottom:2rem;
}
.answer-box p{margin:0;font-size:1.14rem;line-height:1.6}
.answer-box .eyebrow{margin-bottom:.5rem}

/* ---------- article layout w/ sidebar ----------------------------------- */
.article-grid{display:grid;gap:clamp(2rem,4vw,3.25rem)}
@media (min-width:1000px){.article-grid{grid-template-columns:minmax(0,1fr) 320px}}
.sidebar{display:flex;flex-direction:column;gap:1.25rem}
@media (min-width:1000px){.sidebar{position:sticky;top:98px;align-self:start}}
.side-card{border:1px solid var(--rule);border-radius:var(--radius);padding:1.25rem;background:var(--white)}
.side-card--urgent{background:var(--slate-900);color:#D8E1E9;border-color:var(--slate-900)}
.side-card--urgent h3,.side-card--urgent .side-title{color:var(--white)}
.side-title{
  font-family:var(--font-mono);font-size:.73rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--amber-600);margin:0 0 .75rem;
}
.side-card--urgent .side-title{color:var(--amber)}
.side-card ul{margin:0;padding-left:1.1rem;font-size:.93rem}
.side-card li{margin-bottom:.4rem}
.side-links{list-style:none;padding:0;margin:0}
.side-links li{border-bottom:1px solid var(--rule);padding:.55rem 0}
.side-links li:last-child{border-bottom:0}
.side-links a{font-size:.95rem;text-decoration:none}
.side-links a:hover{text-decoration:underline}
.standards-list{font-family:var(--font-mono);font-size:.8rem;line-height:1.5;color:var(--slate-700)}
.standards-list li{margin-bottom:.5rem}

/* ---------- breadcrumbs ------------------------------------------------- */
.crumbs{font-size:.86rem;color:var(--slate-500);padding-block:1rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.crumbs li::after{content:"/";margin-left:.4rem;color:var(--rule)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--slate-500)}

/* ---------- CTA band ---------------------------------------------------- */
.cta-band{background:var(--slate-900);color:#DCE4EC;padding-block:clamp(2.5rem,5vw,3.75rem)}
.cta-band h2{color:var(--white);margin-bottom:.3em}
.cta-inner{display:grid;gap:1.5rem;align-items:center}
@media (min-width:860px){.cta-inner{grid-template-columns:1.4fr auto}}
.cta-band p{color:#B9C7D4;margin-bottom:0;max-width:52ch}
.phone-xl{
  font-family:var(--font-display);font-size:clamp(2.1rem,5vw,3.1rem);color:var(--amber);
  text-decoration:none;line-height:1;display:inline-block;
}
.phone-xl:hover{color:#FFB01A}

/* ---------- forms ------------------------------------------------------- */
.form-card{background:var(--white);border:1px solid var(--rule);border-radius:var(--radius);padding:clamp(1.25rem,3vw,2rem);box-shadow:var(--shadow)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:700;font-size:.94rem;margin-bottom:.35rem}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:1rem;padding:.75rem .85rem;
  border:1px solid var(--slate-400);border-radius:var(--radius);background:var(--white);color:var(--slate-900);
  min-height:48px;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--amber);outline:2px solid var(--amber-100)}
.field .hint{font-size:.85rem;color:var(--slate-500);margin-top:.3rem}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-steps{display:flex;gap:.5rem;margin-bottom:1.25rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.form-steps span{flex:1;padding:.4rem 0;border-top:3px solid var(--rule);color:var(--slate-400)}
.form-steps span.is-active{border-top-color:var(--amber);color:var(--slate-900)}
.form-msg{padding:.9rem 1rem;border-radius:var(--radius);margin-bottom:1rem;font-size:.95rem}
.form-msg--ok{background:var(--verdigris-100);border-left:3px solid var(--verdigris)}
.form-msg--err{background:var(--danger-100);border-left:3px solid var(--danger)}

/* ---------- tools (calculator, quiz) ------------------------------------ */
.tool{background:var(--white);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.tool-head{background:var(--slate-900);color:var(--white);padding:1.1rem 1.4rem}
.tool-head p{margin:0;color:#B9C7D4;font-size:.95rem}
.tool-body{padding:clamp(1.25rem,3vw,1.9rem)}
.tool-out{background:var(--mist);border-top:1px solid var(--rule);padding:clamp(1.25rem,3vw,1.9rem)}
.out-figure{font-family:var(--font-display);font-size:clamp(2.4rem,7vw,3.6rem);line-height:1;color:var(--slate-900);margin:.2rem 0}
.out-range{font-family:var(--font-mono);font-size:.85rem;color:var(--slate-500);letter-spacing:.05em}
.opt-row{display:grid;gap:.6rem;margin-bottom:1.3rem}
@media (min-width:560px){.opt-row{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
.opt{
  border:1px solid var(--slate-400);border-radius:var(--radius);padding:.8rem .9rem;
  cursor:pointer;background:var(--white);font-size:.95rem;text-align:left;
  display:flex;flex-direction:column;gap:.15rem;min-height:48px;
}
.opt:hover{border-color:var(--amber-600)}
.opt[aria-pressed="true"]{border-color:var(--amber);background:var(--amber-100);box-shadow:inset 0 0 0 1px var(--amber)}
.opt strong{font-size:1rem}
.opt small{color:var(--slate-500)}
.q-progress{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-500);margin-bottom:.6rem}
.result-tier{display:inline-block;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .7rem;margin-bottom:.8rem}
.tier-urgent{background:var(--danger);color:#fff}
.tier-soon{background:var(--amber);color:var(--slate-900)}
.tier-plan{background:var(--verdigris);color:#fff}
.noscript-note{padding:1rem 1.2rem;background:var(--amber-100);border-left:3px solid var(--amber);font-size:.95rem}

/* ---------- static map -------------------------------------------------- */
.static-map{display:block;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;text-decoration:none}
.static-map img,.static-map svg{width:100%;display:block}
.static-map .map-cap{padding:.7rem 1rem;font-size:.88rem;background:var(--white);color:var(--slate-700);border-top:1px solid var(--rule)}

/* ---------- gallery ----------------------------------------------------- */
.gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.gallery figure{margin:0}
.gallery img{border-radius:var(--radius);border:1px solid var(--rule);aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{font-size:.85rem;color:var(--slate-500);margin-top:.45rem}

/* ---------- footer ------------------------------------------------------ */
.site-footer{background:var(--slate-900);color:#AFBECB;padding-block:clamp(2.5rem,5vw,3.75rem) 0;font-size:.95rem}
.footer-grid{display:grid;gap:2rem}
@media (min-width:860px){.footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.site-footer .foot-title{
  font-family:var(--font-mono);font-size:.73rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber);margin:0 0 .9rem;
}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.5rem}
.site-footer a{color:#C3D0DB;text-decoration:none}
.site-footer a:hover{color:var(--amber)}
.site-footer img.foot-logo{height:132px;width:auto;margin-bottom:1.1rem}
.nap{font-style:normal;line-height:1.7}
.nap .nap-name{color:var(--white);font-weight:700;display:block}
.foot-phone{font-family:var(--font-mono);font-size:1.15rem;color:var(--amber)!important;display:inline-block;margin-top:.5rem}
.footer-legal{
  border-top:1px solid rgba(255,255,255,.12);margin-top:2.5rem;padding-block:1.4rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;font-size:.85rem;color:var(--slate-400);
}
.footer-legal a{color:var(--slate-400)}
.disclaimer{font-size:.82rem;color:var(--slate-500);max-width:70ch;margin-top:1.2rem;line-height:1.6}

/* ---------- sticky mobile call bar (HTML-rendered, CLS-safe) ------------ */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;height:var(--callbar-h);
  background:var(--amber);border-top:2px solid var(--amber-600);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:var(--slate-900);gap:.6rem;
  font-family:var(--font-display);font-size:1.3rem;
  box-shadow:0 -4px 18px rgba(19,28,38,.22);
}
.callbar small{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;font-weight:400}
.callbar svg{width:22px;height:22px;fill:currentColor}
.callbar-spacer{height:var(--callbar-h)}
@media (min-width:768px){
  .callbar,.callbar-spacer{display:none}
}

/* ---------- misc -------------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--amber);color:var(--slate-900);padding:.75rem 1.2rem;z-index:100}
.skip:focus{left:0}
.updated{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;color:var(--slate-500);text-transform:uppercase}
.pagination{display:flex;gap:.5rem;flex-wrap:wrap;list-style:none;padding:0;margin:2.5rem 0 0}
.pagination a,.pagination span{display:inline-block;padding:.5rem .85rem;border:1px solid var(--rule);border-radius:var(--radius);text-decoration:none;font-size:.95rem}
.pagination .is-current{background:var(--slate-900);color:var(--white);border-color:var(--slate-900)}
.error-code{font-family:var(--font-mono);font-size:1rem;letter-spacing:.3em;color:var(--amber-600)}

/* small-screen logo: two-line wordmark needs a floor, not the full 48px */
@media (max-width:480px){.brand img{height:40px}}

/* ---- third-party operator disclosure ---------------------------------- */
/* Legal text is only useful if it is actually readable: 13px floor, and a
   contrast ratio comfortably past 4.5:1 on the slate footer. Not hidden. */
.footer-disclosure{
  border-top:1px solid rgba(255,255,255,.12);
  padding-block:1.35rem 2rem;
}
.footer-disclosure p{
  margin:0;max-width:105ch;font-size:.813rem;line-height:1.65;color:#9FB0BF;
}
.footer-disclosure strong{color:#C3D0DB;display:block;margin-bottom:.3rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase}

/* ---- hero with the quote form in it ------------------------------------ */
/* The form is the primary conversion path, so it sits beside the H1 rather
   than at the foot of the page. On mobile it stacks under the phone block,
   which keeps the call the first tappable action. */
.hero--form .hero-grid{align-items:start}
@media (min-width:960px){
  .hero--form .hero-grid{grid-template-columns:1.08fr .92fr;gap:clamp(2rem,4vw,3.5rem)}
}
.hero-call{
  margin:1.75rem 0 0;padding:1.1rem 1.25rem;
  background:rgba(242,161,4,.1);border-left:3px solid var(--amber);
  border-radius:var(--radius);
}
.hero-call-label{
  margin:0 0 .2rem;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--amber);
}
.phone-hero{
  display:inline-block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.5rem,6.5vw,3.5rem);line-height:1;color:var(--white);
  text-decoration:none;letter-spacing:.01em;
}
.phone-hero:hover{color:var(--amber)}
.hero-call-sub{margin:.45rem 0 0;font-size:.9rem;color:#9FB0BF}
.hero-form .form-card{box-shadow:0 18px 44px rgba(0,0,0,.32)}
.hero-form .form-card h3{font-size:1.65rem}
@media (max-width:959px){
  .hero-form{margin-top:2rem}
}

/* ---- homepage hero: Boise skyline behind the headline ------------------ */
/* Overlay strength was measured against the actual image, not guessed. At the
   left edge (0.86) worst-case white-on-background contrast is ~10:1; the
   lighter right edge (0.70, ~6:1) sits behind the white form card. Scoped to
   .hero--form so only the homepage carries it. */
.hero--form{
  background-color:var(--slate-900);
  background-image:
    linear-gradient(100deg,
      rgba(1,32,74,.90) 0%,
      rgba(1,32,74,.82) 45%,
      rgba(1,32,74,.72) 100%),
    url("/img/hero-boise-skyline.webp");
  background-size:cover;
  background-position:center 45%;
  background-repeat:no-repeat;
}
@media (max-width:900px){
  /* Text stacks full-width on mobile, so the overlay has to cover the whole
     frame rather than fading to one side. Smaller file, too. */
  .hero--form{
    background-image:
      linear-gradient(180deg,
        rgba(1,32,74,.88) 0%,
        rgba(1,32,74,.94) 55%,
        rgba(1,32,74,.97) 100%),
      url("/img/hero-boise-skyline-mobile.webp");
    background-position:center top;
  }
}