/*
Theme Name: Ogden Water Heater Experts
Theme URI: https://ogdenwaterheaterexperts.com
Author: Oliver Web Guy LLC
Description: Editorial Serif authority theme for Ogden Water Heater Experts. Built to a locked Design DNA (Editorial Serif via E-Ink/Paper + Editorial Grid), Newsreader + Mulish, paper ground, hairline rules. Anti-slop pre-flight enforced.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: owhe
Tags: editorial, authority, local-business, accessible
*/

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=Mulish:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   1. TOKENS  (from .factory/config/design-dna.json)
   ============================================================ */
:root{
  /* palette: sourced from client logo */
  --paper:#F7F5F0;
  --paper-alt:#FFFFFF;
  --ink:#1B1912;
  --ink-soft:#3E392E;
  --ink-muted:#5C5648;
  --rule:#C9C2B4;
  --rule-soft:#DDD7C9;
  --navy:#0E3A6E;
  --navy-deep:#09274B;
  --blue:#1668C7;
  --orange:#F26522;
  --orange-dark:#D9541A;
  --copper:#B5651D;
  --good:#1F7A4D;
  --warn:#B5651D;
  --danger:#B3261E;

  /* type */
  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --body:'Mulish',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;

  /* layout */
  --container:1200px;
  --measure:760px;
  --gutter:clamp(20px,5vw,56px);
  --section-y:clamp(64px,9vw,140px);

  /* shape */
  --radius:2px;
  --radius-box:4px;

  /* motion */
  --m-fast:240ms;
  --m-base:520ms;
  --m-slow:780ms;
  --m-ease:cubic-bezier(.22,.61,.36,1);
  --m-stagger:70ms;
  --m-distance:14px;
}

/* ============================================================
   2. RESET + BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink-soft);
  font-family:var(--body);font-size:17px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--display);color:var(--ink);font-weight:500;margin:0}
h1{font-size:clamp(40px,5.6vw,68px);line-height:1.02;letter-spacing:-.022em}
h2{font-size:clamp(30px,3.6vw,42px);line-height:1.1;letter-spacing:-.018em}
h3{font-size:clamp(22px,2.2vw,27px);line-height:1.2;font-weight:600;letter-spacing:-.012em}
h4{font-family:var(--body);font-size:19px;font-weight:700;color:var(--ink);margin:0;line-height:1.35}
p{margin:0 0 1.15em}
strong{font-weight:700;color:var(--ink)}
em{font-style:italic}
::selection{background:var(--navy);color:#fff}

/* focus: instant, never animated */
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:1px}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.measure{max-width:var(--measure)}
.section{padding:var(--section-y) 0}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--navy);color:#fff;padding:12px 20px;font-weight:700}
.skip-link:focus{left:0}

/* ============================================================
   3. TYPE UTILITIES
   ============================================================ */
.kicker{
  font-family:var(--body);font-size:12.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--copper);
  margin:0 0 14px;display:block;
}
.deck{
  font-size:clamp(17px,2vw,20px);line-height:1.5;color:var(--ink-soft);
  border-left:3px solid var(--orange);padding-left:18px;max-width:var(--measure);
}
.prose{max-width:var(--measure)}
.prose p{margin-bottom:1.15em}
.prose h2{margin:2.2em 0 .6em}
.prose h3{margin:1.9em 0 .5em}
.prose ul,.prose ol{padding-left:1.15em;margin:0 0 1.3em}
.prose li{margin-bottom:.5em}
.prose a{border-bottom:1px solid var(--rule);text-decoration:none}
.prose a:hover{border-bottom-color:var(--blue);text-decoration:none}
.dropcap::first-letter{
  font-family:var(--display);font-size:3.05em;line-height:.82;font-weight:500;
  float:left;padding:.06em .1em 0 0;color:var(--navy);
}
.meta{font-size:13.5px;color:var(--ink-muted);line-height:1.5}
.num{font-family:var(--display);font-variant-numeric:tabular-nums;font-weight:600}

/* ============================================================
   4. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-size:15px;font-weight:700;letter-spacing:.01em;
  padding:14px 28px;border-radius:var(--radius);border:2px solid transparent;
  cursor:pointer;transition:background-color var(--m-fast) var(--m-ease),
    border-color var(--m-fast) var(--m-ease),color var(--m-fast) var(--m-ease),
    transform var(--m-fast) var(--m-ease);
  text-decoration:none;min-height:48px;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--orange);color:#fff;border-color:var(--orange)}
.btn-primary:hover{background:var(--orange-dark);border-color:var(--orange-dark);transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-secondary:hover{background:var(--navy);color:#fff}
.btn-onnavy{background:var(--orange);color:#fff;border-color:var(--orange)}
.btn-onnavy:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
.link-ed{
  font-family:var(--body);font-weight:700;font-size:15px;color:var(--navy);
  display:inline-block;position:relative;padding-bottom:4px;text-decoration:none;
}
.link-ed::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--orange);transform:scaleX(.4);transform-origin:left;
  transition:transform var(--m-fast) var(--m-ease);
}
.link-ed:hover{text-decoration:none}
.link-ed:hover::after{transform:scaleX(1)}
.btn-group{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ============================================================
   5. HEADER + AUTHORITY BAR
   ============================================================ */
.site-header{background:var(--paper);border-bottom:1px solid var(--rule);position:relative;z-index:40}
.header-inner{display:flex;align-items:center;gap:30px;height:118px}
.site-logo img{height:92px;width:auto}
.main-nav{margin-left:auto}
.main-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.main-nav a{
  font-family:var(--body);font-size:15px;font-weight:600;color:var(--ink);
  text-decoration:none;padding:6px 0;display:inline-block;position:relative;
}
.main-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;transition:transform var(--m-fast) var(--m-ease);
}
.main-nav a:hover::after,.main-nav .current-menu-item>a::after{transform:scaleX(1)}
.main-nav a:hover{text-decoration:none}
.header-phone{
  font-family:var(--display);font-size:20px;font-weight:600;color:var(--navy);
  text-decoration:none;white-space:nowrap;
}
.header-phone:hover{text-decoration:none;color:var(--blue)}
.nav-toggle{display:none;background:none;border:1px solid var(--rule);border-radius:var(--radius);
  padding:10px;cursor:pointer;margin-left:auto;min-width:46px;min-height:46px;align-items:center;justify-content:center}
.nav-toggle svg{stroke:var(--ink)}

.authority-bar{background:var(--navy);color:#CFE0F5}
.authority-bar .container{
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  padding-top:10px;padding-bottom:10px;
  font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
}
.authority-bar span{display:inline-flex;align-items:center;gap:8px}
.authority-bar svg{stroke:var(--orange);flex:none}

/* ============================================================
   6. HERO  (family: asymmetric split)
   ============================================================ */
.hero{padding:clamp(44px,6vw,76px) 0 clamp(52px,7vw,88px);border-bottom:1px solid var(--rule)}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,5vw,68px);align-items:start}
.hero h1 .turn{font-style:italic;color:var(--navy)}
.hero .deck{margin-top:22px}

/* Decision Guide: the signature component */
.decision-guide{
  background:var(--paper-alt);border:1px solid var(--rule);
  border-top:4px solid var(--navy);border-radius:var(--radius-box);
  padding:26px 26px 22px;
}
.dg-head{
  font-family:var(--body);font-size:12.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--navy);margin:0 0 4px;
}
.dg-sub{font-size:13.5px;color:var(--ink-muted);margin:0 0 18px;line-height:1.5}
.dg-list{list-style:none;margin:0;padding:0}
.dg-list li{
  display:flex;align-items:flex-start;gap:13px;padding:13px 0;
  border-bottom:1px solid var(--rule-soft);
}
.dg-list li:first-child{padding-top:0}
.dg-list .dg-i{flex:none;width:24px;height:24px;margin-top:1px}
.dg-list .dg-i svg{stroke:var(--navy)}
.dg-list b{display:block;font-family:var(--body);font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.4}
.dg-list span{display:block;font-size:13.5px;color:var(--ink-muted);line-height:1.5;margin-top:2px}
.dg-out{
  margin-top:18px;padding:16px 18px;background:var(--paper);
  border:1px solid var(--rule);border-left:3px solid var(--orange);border-radius:var(--radius);
}
.dg-out .dg-arrow{
  font-family:var(--body);font-size:11.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--copper);display:block;margin-bottom:5px;
}
.dg-out p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-soft)}
.dg-out p strong{color:var(--ink)}

/* ============================================================
   7. PROMISE BAND  (family: rule band, NOT cards)
   ============================================================ */
.promise-band{border-bottom:1px solid var(--rule);background:var(--paper)}
.promise-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.promise{padding:clamp(30px,4vw,44px) clamp(22px,3vw,38px);border-right:1px solid var(--rule)}
.promise:first-child{padding-left:0}
.promise:last-child{border-right:0;padding-right:0}
.promise-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.promise-top svg{stroke:var(--navy);flex:none}
.promise h3{font-family:var(--body);font-size:18px;font-weight:700;letter-spacing:0}
.promise p{margin:0;font-size:15px;line-height:1.62;color:var(--ink-muted)}

/* ============================================================
   8. EDITORIAL SECTION  (family: prose + verdict rail)
   ============================================================ */
.editorial-grid{display:grid;grid-template-columns:1fr .82fr;gap:clamp(34px,5vw,72px);align-items:start}
.verdict-rail{border-left:1px solid var(--rule);padding-left:clamp(22px,3vw,34px)}
.verdict{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--rule-soft)}
.verdict:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.verdict-tag{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--body);
  font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;margin-bottom:8px;
}
.verdict-tag.repair{color:var(--good)}
.verdict-tag.replace{color:var(--danger)}
.verdict-tag.watch{color:var(--warn)}
.verdict-tag i{width:7px;height:7px;border-radius:50%;background:currentColor;display:block;flex:none}
.verdict h4{margin-bottom:6px}
.verdict p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-muted)}

/* ============================================================
   9. DIAGRAM FIGURE  (family: figure + labelled index)
   ============================================================ */
.diagram-section{background:var(--paper-alt);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.diagram-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,64px);align-items:center}
.diagram-figure{margin:0}
.diagram-figure svg{width:100%;height:auto;max-width:340px;margin:0 auto}
.diagram-figure figcaption{
  font-size:13px;color:var(--ink-muted);text-align:center;margin-top:16px;
  padding-top:12px;border-top:1px solid var(--rule-soft);max-width:340px;margin-left:auto;margin-right:auto;
}
.part-list{list-style:none;margin:24px 0 0;padding:0}
.part-list li{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:15px 0;border-bottom:1px solid var(--rule-soft)}
.part-list li:last-child{border-bottom:0}
.part-n{
  font-family:var(--display);font-size:17px;font-weight:600;color:var(--copper);
  font-variant-numeric:tabular-nums;line-height:1.5;
}
.part-list b{display:block;font-family:var(--body);font-size:16.5px;font-weight:700;color:var(--ink);margin-bottom:3px}
.part-list p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-muted)}

/* ============================================================
   10. SERVICE ROWS  (family: rule list, NOT cards)
   ============================================================ */
.service-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.service-row{border-bottom:1px solid var(--rule)}
.service-row a{
  display:grid;grid-template-columns:56px 1fr auto;gap:clamp(18px,3vw,38px);align-items:center;
  padding:clamp(22px,3vw,32px) 0;text-decoration:none;color:inherit;
  transition:background-color var(--m-fast) var(--m-ease),padding-left var(--m-fast) var(--m-ease);
}
.service-row a:hover{background:rgba(14,58,110,.032);padding-left:14px;text-decoration:none}
.service-row .sr-n{font-family:var(--display);font-size:16px;font-weight:600;color:var(--copper);font-variant-numeric:tabular-nums}
.service-row h3{margin-bottom:5px}
.service-row p{margin:0;font-size:15.5px;color:var(--ink-muted);line-height:1.6;max-width:640px}
.service-row .sr-go{color:var(--navy);flex:none;transition:transform var(--m-fast) var(--m-ease)}
.service-row a:hover .sr-go{transform:translateX(5px)}

/* ============================================================
   11. COMPARISON TABLE  (family: data table)
   ============================================================ */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:34px}
table.cmp{width:100%;border-collapse:collapse;min-width:620px;font-size:15.5px}
table.cmp caption{text-align:left;font-size:13.5px;color:var(--ink-muted);padding-bottom:14px}
table.cmp th,table.cmp td{padding:16px 18px;text-align:left;vertical-align:top;line-height:1.55}
table.cmp thead th{
  font-family:var(--body);font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy);border-bottom:2px solid var(--navy);background:transparent;
}
table.cmp tbody tr{border-bottom:1px solid var(--rule-soft)}
table.cmp tbody th{font-weight:700;color:var(--ink);width:30%}
table.cmp td:first-of-type{background:rgba(31,122,77,.045)}
table.cmp .v-good{color:var(--good);font-weight:700}
table.cmp .v-bad{color:var(--danger);font-weight:700}

/* stat callouts */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:44px;padding-top:34px;border-top:1px solid var(--rule)}
.stat .num{display:block;font-size:clamp(38px,4.4vw,50px);line-height:1;color:var(--navy)}
.stat p{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-muted)}

/* ============================================================
   12. AREA INDEX  (family: index grid)
   ============================================================ */
.area-index{list-style:none;margin:30px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0;
  border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.area-index li{border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
.area-index a{
  display:block;padding:15px 18px;font-size:15.5px;font-weight:600;color:var(--ink);
  text-decoration:none;transition:background-color var(--m-fast) var(--m-ease),color var(--m-fast) var(--m-ease);
}
.area-index a:hover{background:var(--navy);color:#fff;text-decoration:none}
.area-index .ai-county{display:block;font-size:12px;font-weight:500;color:var(--ink-muted);margin-top:2px}
.area-index a:hover .ai-county{color:#B6CDEA}

/* ============================================================
   13. CTA BAND  (family: inverted band)
   ============================================================ */
.cta-band{background:var(--navy-deep);color:#DCE7F5;padding:var(--section-y) 0}
.cta-band h2{color:#fff;max-width:19ch}
.cta-band p{color:#B6CDEA;max-width:60ch;font-size:17.5px;margin-top:18px}
.cta-band .cta-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,5vw,64px);align-items:center}
.cta-phone{border-left:1px solid rgba(255,255,255,.19);padding-left:clamp(24px,3vw,38px)}
.cta-phone .kicker{color:#8FB4DE}
.cta-phone a{font-family:var(--display);font-size:clamp(28px,3.4vw,38px);font-weight:600;color:#fff;text-decoration:none;display:block;line-height:1.2}
.cta-phone a:hover{color:var(--orange);text-decoration:none}
.cta-phone .meta{color:#8FB4DE;margin-top:10px}

/* ============================================================
   14. FOOTER
   ============================================================ */
.site-footer{background:var(--paper);border-top:1px solid var(--rule);padding:clamp(48px,6vw,72px) 0 32px;font-size:15px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(26px,4vw,54px)}
.site-footer img.f-logo{height:104px;margin-bottom:22px}
.site-footer h4{font-size:12.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--navy);margin-bottom:16px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:9px}
.site-footer a{color:var(--ink-soft);text-decoration:none}
.site-footer a:hover{color:var(--blue);text-decoration:underline}
.site-footer p{color:var(--ink-muted);font-size:14.5px;line-height:1.65}
.footer-bottom{margin-top:44px;padding-top:22px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;font-size:13.5px;color:var(--ink-muted)}

/* ============================================================
   15. MOTION  (see MOTION-PROFILE.md)
   Base state is FINISHED. JS opts elements into the pre-state.
   ============================================================ */
.js-motion .sonic-fade-on-scroll{opacity:0;transform:translateY(var(--m-distance))}
.js-motion .sonic-fade-on-scroll.is-in{
  opacity:1;transform:none;
  transition:opacity var(--m-base) var(--m-ease),transform var(--m-base) var(--m-ease);
}
.js-motion .sonic-stagger-children>*{opacity:0;transform:translateY(var(--m-distance))}
.js-motion .sonic-stagger-children.is-in>*{
  opacity:1;transform:none;
  transition:opacity var(--m-base) var(--m-ease),transform var(--m-base) var(--m-ease);
}
/* headline lines are block level regardless of JS */
.sonic-hero-reveal .rl{display:block}
.js-motion .sonic-hero-reveal .rl{opacity:0;transform:translateY(var(--m-distance))}
.js-motion .sonic-hero-reveal.is-in .rl{
  opacity:1;transform:none;
  transition:opacity var(--m-slow) var(--m-ease),transform var(--m-slow) var(--m-ease);
}
.js-motion .sonic-draw path,.js-motion .sonic-draw line,
.js-motion .sonic-draw polyline,.js-motion .sonic-draw circle,.js-motion .sonic-draw rect{
  stroke-dasharray:var(--dash,1000);stroke-dashoffset:var(--dash,1000);
}
.js-motion .sonic-draw.is-in path,.js-motion .sonic-draw.is-in line,
.js-motion .sonic-draw.is-in polyline,.js-motion .sonic-draw.is-in circle,.js-motion .sonic-draw.is-in rect{
  stroke-dashoffset:0;transition:stroke-dashoffset var(--m-slow) var(--m-ease);
}
.js-motion .sonic-draw .dg-label{opacity:0}
.js-motion .sonic-draw.is-in .dg-label{opacity:1;transition:opacity var(--m-base) var(--m-ease) 200ms}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js-motion .sonic-fade-on-scroll,.js-motion .sonic-stagger-children>*,
  .js-motion .sonic-hero-reveal .rl{opacity:1 !important;transform:none !important}
  .js-motion .sonic-draw path,.js-motion .sonic-draw line,.js-motion .sonic-draw polyline,
  .js-motion .sonic-draw circle,.js-motion .sonic-draw rect{stroke-dashoffset:0 !important}
  .js-motion .sonic-draw .dg-label{opacity:1 !important}
}

/* ============================================================
   16. RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .hero-grid,.editorial-grid,.diagram-grid,.cta-band .cta-grid{grid-template-columns:1fr}
  .verdict-rail{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:30px}
  .cta-phone{border-left:0;border-top:1px solid rgba(255,255,255,.19);padding-left:0;padding-top:26px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .diagram-figure svg{max-width:290px}
}
@media (max-width:820px){
  .main-nav{position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--rule);padding:8px var(--gutter) 20px;display:none;box-shadow:0 14px 24px -18px rgba(20,25,18,.3)}
  .main-nav.is-open{display:block}
  .main-nav ul{flex-direction:column;gap:0}
  .main-nav li{border-bottom:1px solid var(--rule-soft)}
  .main-nav a{padding:14px 0;display:block;font-size:16px}
  .main-nav a::after{display:none}
  .nav-toggle{display:inline-flex}
  .header-phone{display:none}
  .promise-grid{grid-template-columns:1fr}
  .promise{border-right:0;border-bottom:1px solid var(--rule);padding-left:0;padding-right:0}
  .promise:last-child{border-bottom:0}
  .stat-row{grid-template-columns:1fr;gap:26px}
  .stat-row .stat{padding-bottom:22px;border-bottom:1px solid var(--rule-soft)}
  .stat-row .stat:last-child{border-bottom:0;padding-bottom:0}
  .service-row a{grid-template-columns:34px 1fr;gap:14px}
  .service-row .sr-go{display:none}
  .service-row a:hover{padding-left:0}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .header-inner{height:88px}
  .site-logo img{height:62px}
  body{font-size:16px}
}

/* ============================================================
   17. PRICE LEDGER  (family: ledger)  Stage 3 addendum
   Client-supplied pricing, .sonic/business-data.json
   ============================================================ */
.ledger-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,68px);align-items:start}
.ledger{margin:0;padding:0;list-style:none;border-top:2px solid var(--navy)}
.ledger li{
  display:flex;align-items:baseline;gap:14px;padding:17px 0;
  border-bottom:1px solid var(--rule-soft);
}
.ledger .l-name{font-weight:700;color:var(--ink);font-size:16.5px;flex:none;max-width:56%}
.ledger .l-dots{flex:1 1 auto;border-bottom:1px dotted var(--rule);min-width:18px;transform:translateY(-5px)}
.ledger .l-price{
  font-family:var(--display);font-size:19px;font-weight:600;color:var(--navy);
  font-variant-numeric:tabular-nums;white-space:nowrap;flex:none;
}
.ledger li.is-repair .l-price{color:var(--good)}
.ledger li.is-repair .l-name{color:var(--good)}
.ledger-note{
  background:var(--paper-alt);border:1px solid var(--rule);border-left:3px solid var(--orange);
  border-radius:var(--radius);padding:24px 26px;
}
.ledger-note h3{font-size:22px;margin-bottom:12px}
.ledger-note p{font-size:15.5px;line-height:1.65;color:var(--ink-muted);margin-bottom:1em}
.ledger-note p:last-child{margin-bottom:0}
.gap-callout{
  display:flex;align-items:baseline;gap:14px;padding:18px 0 16px;margin-bottom:16px;
  border-bottom:1px solid var(--rule-soft);
}
.gap-callout .num{font-size:46px;color:var(--orange);line-height:1}
.gap-callout span{font-size:14.5px;line-height:1.5;color:var(--ink-muted)}
@media (max-width:1024px){.ledger-grid{grid-template-columns:1fr}}
@media (max-width:560px){
  .ledger .l-name{max-width:none}
  .ledger li{flex-wrap:wrap;gap:4px 14px}
  .ledger .l-dots{display:none}
  .ledger .l-price{font-size:17.5px}
}

/* ============================================================
   18. PHOTOGRAPHY  (STYLE-GUIDE section 3)
   Documentary images sit below the fold. The hero stays the
   Decision Guide, per the locked DNA.
   ============================================================ */

/* contained feature figure. Not full bleed: a letterbox crop of a 3:2 photo
   across 1440px shows a strip of an image instead of an image. */
.photo-band{margin:0;padding:0}
.photo-band .pb-inner{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.photo-band img{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  border:1px solid var(--rule);border-radius:var(--radius);
}
.photo-band figcaption{padding:0}
.photo-band figcaption .pb-cap{
  max-width:var(--container);margin:0 auto;padding:12px var(--gutter) 0;
  display:flex;gap:10px 20px;flex-wrap:wrap;align-items:baseline;
  font-size:13.5px;color:var(--ink-muted);line-height:1.55;
}
.photo-band figcaption b{
  font-family:var(--body);font-size:11.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--copper);flex:none;
}
.photo-band figcaption span{max-width:74ch}

/* inline editorial figure */
figure.ed-fig{margin:34px 0;padding:0}
figure.ed-fig img{
  width:100%;height:auto;display:block;border:1px solid var(--rule);
  border-radius:var(--radius);
}
figure.ed-fig figcaption{
  font-size:13.5px;line-height:1.6;color:var(--ink-muted);
  padding-top:11px;margin-top:11px;border-top:1px solid var(--rule-soft);
}
figure.ed-fig figcaption b{color:var(--ink);font-weight:700}

/* side by side figure + text */
.fig-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,54px);align-items:center;margin-top:36px}
.fig-split figure{margin:0}
.fig-split img{
  width:100%;height:clamp(240px,26vw,340px);object-fit:cover;display:block;
  border:1px solid var(--rule);border-radius:var(--radius);
}
.fig-split figcaption{
  font-size:13px;line-height:1.55;color:var(--ink-muted);
  padding-top:10px;margin-top:10px;border-top:1px solid var(--rule-soft);
}
@media (max-width:820px){
  .fig-split{grid-template-columns:1fr;gap:26px}
  .photo-band img{height:clamp(220px,52vw,300px)}
}

/* ============================================================
   19. SONIC BOOM — conversion layer
   ============================================================ */

/* --- availability dot in the authority bar (real semantic state) --- */
.avail{display:inline-flex;align-items:center;gap:8px;color:#BFE0C8}
.avail i{width:8px;height:8px;border-radius:50%;background:#4ADE80;display:block;flex:none;
  box-shadow:0 0 0 3px rgba(74,222,128,.24)}

/* --- header call button (visible on mobile) --- */
.header-call{
  display:none;background:var(--orange);color:#fff;border-radius:var(--radius);
  padding:11px 16px;font-weight:800;font-size:14.5px;align-items:center;gap:8px;
  min-height:44px;text-decoration:none;
}
.header-call:hover{background:var(--orange-dark);text-decoration:none;color:#fff}

/* --- sticky mobile call bar --- */
.sticky-call{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:var(--paper-alt);border-top:1px solid var(--rule);
  box-shadow:0 -8px 22px -14px rgba(20,25,18,.4);
  padding:10px calc(env(safe-area-inset-left) + 12px) calc(env(safe-area-inset-bottom) + 10px);
  gap:10px;
}
.sticky-call a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;border-radius:var(--radius);font-weight:800;font-size:15.5px;text-decoration:none;
}
.sticky-call .sc-call{background:var(--orange);color:#fff}
.sticky-call .sc-form{background:transparent;color:var(--navy);border:2px solid var(--navy)}
.sticky-call a:hover{text-decoration:none}

/* --- proof: reviews --- */
.proof-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 24px;margin-bottom:8px}
.rating{display:inline-flex;align-items:center;gap:9px;font-size:15.5px;color:var(--ink)}
.rating .stars{color:var(--orange);letter-spacing:.09em;font-size:17px}
.reviews{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--rule);margin-top:30px;
}
.review{padding:28px clamp(20px,2.6vw,32px) 26px;border-right:1px solid var(--rule)}
.review:first-child{padding-left:0}
.review:last-child{border-right:0;padding-right:0}
.review blockquote{
  margin:0 0 16px;font-family:var(--display);font-size:19px;line-height:1.45;
  color:var(--ink);font-weight:400;
}
.review cite{
  font-style:normal;font-size:14px;color:var(--ink-muted);display:block;line-height:1.5;
}
.review cite b{display:block;color:var(--ink);font-weight:700;font-size:14.5px}
.sample-flag{
  display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#8A6A1F;background:#FFF3D6;border:1px solid #E8CE8E;border-radius:2px;
  padding:3px 7px;margin-bottom:12px;
}

/* --- named process --- */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:34px;
  border-top:2px solid var(--navy)}
.process-step{padding:26px clamp(18px,2.4vw,30px) 24px;border-right:1px solid var(--rule)}
.process-step:first-child{padding-left:0}
.process-step:last-child{border-right:0;padding-right:0}
.process-step .ps-n{
  font-family:var(--display);font-size:15px;font-weight:600;color:var(--copper);
  display:block;margin-bottom:8px;
}
.process-step h3{font-family:var(--body);font-size:18px;font-weight:700;margin-bottom:7px}
.process-step p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-muted)}
.process-step .ps-out{
  display:block;margin-top:11px;padding-top:11px;border-top:1px solid var(--rule-soft);
  font-size:13.5px;color:var(--good);font-weight:700;
}

/* --- guarantee strip --- */
.guarantee{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  background:var(--paper-alt);border:1px solid var(--rule);border-left:3px solid var(--good);
  border-radius:var(--radius);padding:24px 26px;margin-top:38px;
}
.guarantee svg{stroke:var(--good);flex:none;margin-top:2px}
.guarantee h3{font-family:var(--body);font-size:18px;font-weight:700;margin-bottom:7px}
.guarantee p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-muted)}

/* --- multi-step form --- */
.form-wrap{
  background:var(--paper-alt);border:1px solid var(--rule);border-top:4px solid var(--orange);
  border-radius:var(--radius-box);padding:clamp(24px,3vw,34px);
}
.form-progress{
  display:flex;align-items:center;gap:10px;margin-bottom:6px;
  font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--copper);
}
.form-progress .fp-bar{flex:1;height:4px;background:var(--rule-soft);border-radius:3px;overflow:hidden}
.form-progress .fp-bar i{display:block;height:100%;background:var(--orange);width:33.33%;
  transition:width var(--m-base) var(--m-ease)}
.form-wrap h3{font-size:24px;margin:12px 0 6px}
.form-wrap .fw-sub{font-size:15px;color:var(--ink-muted);margin-bottom:22px;line-height:1.6}
.fstep{display:none}
.fstep.is-active{display:block}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:13px 14px;min-height:48px;
}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:3px solid rgba(22,104,199,.22);outline-offset:0}
.choice-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.choice{
  display:flex;align-items:center;gap:10px;padding:13px 14px;min-height:48px;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);
  cursor:pointer;font-size:15px;font-weight:600;color:var(--ink);
}
.choice:hover{border-color:var(--navy)}
.choice input{width:18px;height:18px;min-height:0;flex:none;margin:0}
.choice.is-on{border-color:var(--orange);background:#FFF6F1}
.form-nav{display:flex;gap:10px;margin-top:22px;align-items:center;flex-wrap:wrap}
.form-note{font-size:13px;color:var(--ink-muted);margin-top:14px;line-height:1.55}
.btn-ghost{background:transparent;border:2px solid var(--rule);color:var(--ink-muted)}
.btn-ghost:hover{border-color:var(--navy);color:var(--navy)}

/* --- action section grid --- */
.action-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,5vw,64px);align-items:start}
.contact-block .cb-row{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--rule-soft);align-items:flex-start}
.contact-block .cb-row:last-child{border-bottom:0}
.contact-block svg{stroke:var(--navy);flex:none;margin-top:3px}
.contact-block b{display:block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--copper);margin-bottom:4px}
.contact-block .cb-big{font-family:var(--display);font-size:30px;font-weight:600;color:var(--navy);text-decoration:none;line-height:1.15;display:block}
.contact-block .cb-big:hover{color:var(--orange);text-decoration:none}
.contact-block p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft)}

@media (max-width:1024px){
  .reviews{grid-template-columns:1fr;border-left:0}
  .review{border-right:0;border-bottom:1px solid var(--rule);padding-left:0;padding-right:0}
  .review:last-child{border-bottom:0}
  .process{grid-template-columns:repeat(2,1fr)}
  .process-step{border-bottom:1px solid var(--rule)}
  .process-step:nth-child(2){border-right:0;padding-right:0}
  .process-step:nth-child(3){padding-left:0}
  .process-step:nth-child(3),.process-step:nth-child(4){border-bottom:0}
  .action-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  body{padding-bottom:78px}
  .sticky-call{display:flex}
  .header-call{display:inline-flex}
  .process{grid-template-columns:1fr}
  .process-step{border-right:0;padding-left:0;padding-right:0}
  .choice-row{grid-template-columns:1fr}
}

/* ============================================================
   20. PHOTO SCALE CORRECTION
   A full width 16:9 photo of a person reads as stock template.
   Photography here supports the type, it does not lead. The tank
   diagram stays the largest visual on the page.
   ============================================================ */
.proc-head{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,56px);align-items:end}
.proc-fig{margin:0}
.proc-fig img{
  width:100%;aspect-ratio:5/4;object-fit:cover;object-position:62% 50%;
  border:1px solid var(--rule);border-radius:var(--radius);display:block;
}

/* narrow landscape strip. Deliberately letterboxed: it is scene setting, not a subject */
figure.strip{margin:0}
figure.strip img{
  width:100%;aspect-ratio:32/9;object-fit:cover;object-position:50% 62%;
  border:1px solid var(--rule);border-radius:var(--radius);display:block;
}

/* Pull the remaining figures back so none of them dominate a section */
figure.ed-fig{max-width:520px}
figure.ed-fig img{aspect-ratio:4/3;object-fit:cover}
.fig-split{grid-template-columns:.72fr 1.28fr}
.fig-split img{height:auto;aspect-ratio:4/3;object-fit:cover}

@media (max-width:1024px){
  .proc-head{grid-template-columns:1fr}
  .proc-fig{max-width:420px}
}
@media (max-width:820px){
  figure.strip img{aspect-ratio:21/9}
  figure.ed-fig{max-width:none}
}

/* ============================================================
   21. FUNNEL RESTRUCTURE
   Hero Decision Guide becomes the live entry to the lead flow.
   Seven sections, a CTA block at each decision moment.
   ============================================================ */

/* --- hero: live symptom picker --- */
.dg-start{
  display:block;font-family:var(--body);font-size:11.5px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--orange);margin-bottom:6px;
}
.dg-q{font-family:var(--display);font-size:25px;line-height:1.2;color:var(--ink);margin:0 0 5px;font-weight:600}
.symptoms{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:16px 0 0}
.symptom{
  display:flex;align-items:center;gap:10px;text-align:left;width:100%;
  min-height:52px;padding:12px 14px;cursor:pointer;
  font-family:var(--body);font-size:15px;font-weight:600;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  transition:border-color var(--m-fast) var(--m-ease),background-color var(--m-fast) var(--m-ease),
    transform var(--m-fast) var(--m-ease);
}
.symptom svg{stroke:var(--navy);flex:none}
.symptom:hover{border-color:var(--orange);background:#FFF6F1;transform:translateY(-1px)}
.symptom:hover svg{stroke:var(--orange)}
.dg-after{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--rule-soft);
  font-size:13.5px;line-height:1.55;color:var(--ink-muted);
}
.dg-after b{color:var(--ink)}
.dg-or{
  display:flex;align-items:center;gap:12px;margin-top:14px;font-size:14px;color:var(--ink-muted);
}
.dg-or a{font-family:var(--display);font-size:21px;font-weight:600;color:var(--navy);text-decoration:none;white-space:nowrap}
.dg-or a:hover{color:var(--orange);text-decoration:none}

/* --- CTA block: the repeating decision-moment prompt --- */
.cta-block{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--paper-alt);margin-top:clamp(44px,6vw,72px);
}
.cta-block .cb-in{
  display:grid;grid-template-columns:1.2fr auto auto;gap:clamp(20px,3vw,40px);
  align-items:center;padding:clamp(24px,3vw,34px) 0;
}
.cta-block h3{font-family:var(--display);font-size:clamp(21px,2.3vw,27px);line-height:1.24;
  font-weight:600;color:var(--ink);margin:0;max-width:30ch}
.cta-block .cb-ph{text-align:right}
.cta-block .cb-ph span{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--copper);margin-bottom:3px}
.cta-block .cb-ph a{font-family:var(--display);font-size:25px;font-weight:600;color:var(--navy);
  text-decoration:none;white-space:nowrap}
.cta-block .cb-ph a:hover{color:var(--orange);text-decoration:none}

@media (max-width:900px){
  .cta-block .cb-in{grid-template-columns:1fr;gap:18px;text-align:left}
  .cta-block .cb-ph{text-align:left}
  .cta-block .btn{width:100%}
}
@media (max-width:520px){
  .symptoms{grid-template-columns:1fr}
}

/* ============================================================
   22. BEFORE / AFTER  (Sonic Boom home services requirement)
   Framed as an install-quality comparison, not a customer case
   study, because these are not photographs of a real client job.
   ============================================================ */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,34px);margin-top:32px}
.ba figure{margin:0}
.ba img{
  width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  border:1px solid var(--rule);border-radius:var(--radius);
}
.ba-tag{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:11px;
  font-family:var(--body);font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.ba-tag i{width:8px;height:8px;border-radius:50%;background:currentColor;display:block;flex:none}
.ba-tag.bad{color:var(--danger)}
.ba-tag.good{color:var(--good)}
.ba figcaption{
  font-size:14px;line-height:1.6;color:var(--ink-muted);
  padding-top:11px;margin-top:11px;border-top:1px solid var(--rule-soft);
}
.ba figcaption b{color:var(--ink);font-weight:700}
.ba-list{list-style:none;margin:12px 0 0;padding:0}
.ba-list li{display:flex;gap:9px;font-size:14px;line-height:1.55;color:var(--ink-muted);padding:5px 0}
.ba-list li svg{flex:none;margin-top:3px}
.ba-list.bad li svg{stroke:var(--danger)}
.ba-list.good li svg{stroke:var(--good)}
@media (max-width:760px){.ba-grid{grid-template-columns:1fr}}

/* ============================================================
   23. WPFORMS, styled to the theme
   Lite renders a single page form. Pagebreak and Phone are Pro
   fields, so the multi step flow is not available on Lite.
   ============================================================ */
.form-wrap .wpforms-container{margin:0!important}
.form-wrap .wpforms-form{margin:0}
.form-wrap .wpforms-field{padding:0 0 16px!important}
.form-wrap .wpforms-field-label{
  font-family:var(--body)!important;font-size:14px!important;font-weight:700!important;
  color:var(--ink)!important;margin-bottom:7px!important;display:block;
}
.form-wrap .wpforms-required-label{color:var(--orange)!important}
.form-wrap .wpforms-field-sublabel,
.form-wrap .wpforms-field-description{
  font-family:var(--body)!important;font-size:13px!important;color:var(--ink-muted)!important;
  font-style:normal!important;margin-top:6px!important;
}
.form-wrap .wpforms-form input[type=text],
.form-wrap .wpforms-form input[type=email],
.form-wrap .wpforms-form input[type=tel],
.form-wrap .wpforms-form select,
.form-wrap .wpforms-form textarea{
  width:100%!important;max-width:none!important;
  font-family:var(--body)!important;font-size:16px!important;color:var(--ink)!important;
  background:var(--paper)!important;border:1px solid var(--rule)!important;
  border-radius:var(--radius)!important;padding:13px 14px!important;min-height:48px!important;
  box-shadow:none!important;
}
.form-wrap .wpforms-form textarea{min-height:96px!important}
.form-wrap .wpforms-form input:focus,
.form-wrap .wpforms-form select:focus,
.form-wrap .wpforms-form textarea:focus{
  border-color:var(--blue)!important;outline:3px solid rgba(22,104,199,.22)!important;outline-offset:0!important;
}
.form-wrap .wpforms-submit-container{padding:6px 0 0!important}
.form-wrap button.wpforms-submit{
  background:var(--orange)!important;color:#fff!important;border:2px solid var(--orange)!important;
  border-radius:var(--radius)!important;font-family:var(--body)!important;
  font-size:15px!important;font-weight:700!important;padding:14px 28px!important;min-height:48px;
  box-shadow:none!important;width:100%;
}
.form-wrap button.wpforms-submit:hover{background:var(--orange-dark)!important;border-color:var(--orange-dark)!important}
.form-wrap .wpforms-error,.form-wrap label.wpforms-error{
  color:var(--danger)!important;font-size:13px!important;font-family:var(--body)!important;
}
.form-wrap .wpforms-confirmation-container-full{
  background:var(--paper)!important;border:1px solid var(--rule)!important;
  border-left:3px solid var(--good)!important;border-radius:var(--radius)!important;
  color:var(--ink-soft)!important;padding:20px 22px!important;
}
@media (max-width:520px){
  .form-wrap .wpforms-field-radio ul{grid-template-columns:1fr!important}
}

/* ============================================================
   24. WPFORMS CHOICE CONTROL, rebuilt
   WPForms renders <input> as a SIBLING BEFORE <label>, so styling
   the label alone leaves a native radio floating outside the box
   and the box shrink wrapping to its text. The input is taken out
   of flow instead and the indicator drawn inside the label.
   ============================================================ */
.form-wrap .wpforms-field-radio .wpforms-field-label{margin-bottom:4px!important}
.form-wrap .wpforms-field-radio .wpforms-field-description{
  margin:0 0 12px!important;order:-1;
}
.form-wrap .wpforms-field-radio{display:flex!important;flex-direction:column}
.form-wrap .wpforms-field-radio .wpforms-field-label{order:-2}

.form-wrap .wpforms-field-radio ul{
  list-style:none!important;margin:0!important;padding:0!important;
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;
}
.form-wrap .wpforms-field-radio ul li{
  margin:0!important;padding:0!important;position:relative;display:block!important;
}

/* input out of flow, still focusable and screen reader visible */
.form-wrap .wpforms-field-radio ul li input[type=radio]{
  position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;
  min-height:0!important;margin:0!important;padding:0!important;pointer-events:none;
}

.form-wrap .wpforms-field-radio ul li label{
  display:flex!important;align-items:center!important;
  width:100%!important;min-height:56px;margin:0!important;
  padding:14px 16px 14px 46px!important;position:relative;cursor:pointer;
  font-family:var(--body)!important;font-size:15.5px!important;font-weight:600!important;
  line-height:1.3!important;color:var(--ink)!important;
  background:var(--paper);border:1.5px solid var(--rule);border-radius:var(--radius);
  transition:border-color var(--m-fast) var(--m-ease),background-color var(--m-fast) var(--m-ease),
    box-shadow var(--m-fast) var(--m-ease);
}

/* the indicator, drawn inside the box */
.form-wrap .wpforms-field-radio ul li label::before{
  content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;border-radius:50%;
  border:1.5px solid var(--rule);background:#fff;transition:border-color var(--m-fast) var(--m-ease);
}
.form-wrap .wpforms-field-radio ul li label::after{
  content:"";position:absolute;left:21.5px;top:50%;transform:translateY(-50%) scale(0);
  width:10px;height:10px;border-radius:50%;background:var(--orange);
  transition:transform var(--m-fast) var(--m-ease);
}

.form-wrap .wpforms-field-radio ul li label:hover{
  border-color:var(--navy);background:#fff;
}
.form-wrap .wpforms-field-radio ul li label:hover::before{border-color:var(--navy)}

.form-wrap .wpforms-field-radio ul li input[type=radio]:checked + label{
  border-color:var(--orange);background:#FFF6F1;box-shadow:inset 0 0 0 1px var(--orange);
}
.form-wrap .wpforms-field-radio ul li input[type=radio]:checked + label::before{border-color:var(--orange)}
.form-wrap .wpforms-field-radio ul li input[type=radio]:checked + label::after{transform:translateY(-50%) scale(1)}

/* keyboard focus must remain obvious with the native control hidden */
.form-wrap .wpforms-field-radio ul li input[type=radio]:focus-visible + label{
  outline:3px solid var(--blue);outline-offset:2px;
}

/* selects: normal height, real dropdown affordance */
.form-wrap .wpforms-form select{
  min-height:52px!important;padding:13px 42px 13px 14px!important;
  border:1.5px solid var(--rule)!important;background-color:var(--paper)!important;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%230E3A6E' stroke-width='1.8'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 15px center!important;
}
.form-wrap .wpforms-form input[type=text],
.form-wrap .wpforms-form input[type=email],
.form-wrap .wpforms-form input[type=tel],
.form-wrap .wpforms-form textarea{
  border:1.5px solid var(--rule)!important;min-height:52px!important;
}
.form-wrap .wpforms-field{padding:0 0 20px!important}

@media (max-width:520px){
  .form-wrap .wpforms-field-radio ul{grid-template-columns:1fr!important}
}

/* description belongs under the question, not stranded below the choices */
.form-wrap .wpforms-field-radio > .wpforms-field-label{order:0!important}
.form-wrap .wpforms-field-radio > .wpforms-field-description{order:1!important;margin:0 0 12px!important}
.form-wrap .wpforms-field-radio > ul{order:2!important}

/* WPForms wraps radio fields in a fieldset, so that is the flex container */
.form-wrap .wpforms-field-radio{display:block!important}
.form-wrap .wpforms-field-radio fieldset{
  display:flex!important;flex-direction:column!important;
  border:0!important;margin:0!important;padding:0!important;
}
.form-wrap .wpforms-field-radio fieldset > legend.wpforms-field-label{order:0!important;margin-bottom:4px!important;padding:0!important}
.form-wrap .wpforms-field-radio fieldset > .wpforms-field-description{order:1!important;margin:0 0 12px!important}
.form-wrap .wpforms-field-radio fieldset > ul{order:2!important}

/* ============================================================
   25. SERVICE PAGE
   ============================================================ */
.crumbs{font-size:13.5px;color:var(--ink-muted)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.crumbs li + li::before{content:"/";margin-right:8px;color:var(--rule)}
.crumbs a{color:var(--ink-muted);text-decoration:none;border-bottom:1px solid var(--rule)}
.crumbs a:hover{color:var(--blue);text-decoration:none}
.crumbs li[aria-current]{color:var(--ink);font-weight:600}

.faq{margin-top:30px;border-top:1px solid var(--rule);max-width:840px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-family:var(--display);font-size:20px;line-height:1.32;font-weight:600;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;
  border-right:1.8px solid var(--navy);border-bottom:1.8px solid var(--navy);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--m-fast) var(--m-ease);
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq summary:hover{color:var(--navy)}
.faq summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.faq .faq-a{padding:0 0 22px}
.faq .faq-a p{margin:0;font-size:16.5px;line-height:1.7;color:var(--ink-soft);max-width:72ch}
@media (max-width:560px){.faq summary{font-size:17.5px}}
/* ============================================================
   26. BLOG
   Lead item then a compact list. No card grid, per the DNA.
   The earlier version put five identical full width rows down
   the page, each with dead space to the right of a 62ch column.
   ============================================================ */

/* --- lead item --- */
.post-lead{margin:0 0 clamp(40px,5vw,64px)}
.post-lead a{
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(26px,3.6vw,52px);
  align-items:center;text-decoration:none;color:inherit;
}
.post-lead a:hover{text-decoration:none}
.pl-img{margin:0}
.pl-img img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border:1px solid var(--rule);border-radius:var(--radius);
}
.post-lead h2{
  font-size:clamp(28px,3.5vw,42px);line-height:1.1;letter-spacing:-.018em;
  margin:0 0 14px;color:var(--ink);
}
.post-lead a:hover h2{color:var(--navy)}
.post-lead p{margin:0;font-size:17.5px;line-height:1.65;color:var(--ink-soft);max-width:46ch}

.pr-date{
  display:block;font-family:var(--body);font-size:11.5px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--copper);margin-bottom:10px;
}
.pr-more{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-family:var(--body);font-size:15px;font-weight:700;color:var(--navy);
}
.pr-more svg{stroke:var(--navy);transition:transform var(--m-fast) var(--m-ease)}
.post-lead a:hover .pr-more svg{transform:translateX(5px)}

/* --- compact list --- */
.post-more-head{
  font-family:var(--body);font-size:12px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--navy);margin:0 0 4px;
}
.post-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.post-row{border-bottom:1px solid var(--rule)}
.post-row a{
  display:grid;grid-template-columns:132px 1fr auto;gap:clamp(18px,2.4vw,30px);
  align-items:center;padding:20px 0;text-decoration:none;color:inherit;
  transition:background-color var(--m-fast) var(--m-ease),padding-left var(--m-fast) var(--m-ease);
}
.post-row a:hover{background:rgba(14,58,110,.032);padding-left:14px;text-decoration:none}
.pr-thumb{display:block}
.pr-thumb img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  border:1px solid var(--rule);border-radius:var(--radius);
}
.pr-thumb-empty{display:block;aspect-ratio:1/1;background:var(--paper-alt);
  border:1px solid var(--rule);border-radius:var(--radius)}
.pr-body .pr-date{margin-bottom:6px}
.post-row h2{font-size:clamp(19px,2vw,23px);line-height:1.24;margin:0 0 6px;letter-spacing:-.01em}
.post-row a:hover h2{color:var(--navy)}
.post-row p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-muted)}
.pr-go{color:var(--navy);flex:none}
.pr-go svg{stroke:var(--navy);transition:transform var(--m-fast) var(--m-ease)}
.post-row a:hover .pr-go svg{transform:translateX(5px)}

/* --- single post hero --- */
figure.post-hero{margin:0}
figure.post-hero img{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  border:1px solid var(--rule);border-radius:var(--radius);
}

/* --- pagination --- */
.navigation.pagination{border-top:1px solid var(--rule);padding-top:26px}
.nav-links{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  padding:0 12px;border:1px solid var(--rule);border-radius:var(--radius);
  font-family:var(--body);font-weight:700;font-size:15px;color:var(--ink);text-decoration:none;
}
.page-numbers:hover{border-color:var(--navy);text-decoration:none}
.page-numbers.current{background:var(--navy);border-color:var(--navy);color:#fff}

@media (max-width:900px){
  .post-lead a{grid-template-columns:1fr;gap:20px}
  .post-lead p{max-width:none}
}
@media (max-width:620px){
  .post-row a{grid-template-columns:88px 1fr;gap:14px}
  .post-row a:hover{padding-left:0}
  .pr-go{display:none}
  .post-row p{display:none}
}