/* ============================================================================
   JEM Construction — "Precision Framed" design system
   Window-frame geometry used structurally: thin silver rules, offset frames,
   mullion grids and corner brackets. Square corners, one accent colour,
   hierarchy from borders and spacing rather than shadows and pills.
   ========================================================================== */

:root {
  /* Brand palette */
  --navy: #243247;          /* header, footer, dark sections, headings */
  --navy-panel: #1D2A3C;    /* navy card panel */
  --navy-strip: #1A2534;    /* deepest navy */
  --navy-divider: #3B4B62;  /* dividers on navy */
  --navy-border: #6C7C93;   /* secondary button border on navy */
  --sky: #6FAFD8;           /* primary CTA, accents, step markers, focus */
  --sky-hover: #5A9DC8;     /* primary hover */
  --sky-on: #12202F;        /* text on sky */
  --sky-mid: #9CC7E2;       /* secondary bar fill */
  --link: #2F7BA8;          /* links (AA on white) */
  --eyebrow: #4E8CB5;       /* eyebrow / direct-answer label */
  --white: #FFFFFF;
  --silver: #DDE3E8;        /* borders, dividers, frame lines, tables */
  --hair: #E3E7EC;          /* light hairline */
  --hair-2: #EDF0F3;        /* lightest hairline */
  --sky-tint: #EAF3F9;      /* sky tint section */
  --sky-tint-bd: #CFE1EE;   /* sky tint border */
  --mist: #F4F6F8;          /* mist section */
  --fog: #FAFBFC;           /* zebra / footnote surface */
  --amber: #B05A2A;         /* unverified-fact notice ONLY */
  --amber-bd: #E0C0AC;
  --amber-bg: #FDF6F2;

  /* Text */
  --ink: #243247;           /* primary text */
  --ink-2: #566474;         /* secondary text */
  --muted: #566474;         /* secondary text */
  --muted-2: #7B8798;       /* captions, min on white */
  --muted-3: #8E9BAC;       /* muted on navy */
  --muted-4: #AFBAC8;       /* body on navy */

  --font-head: 'Manrope', 'Inter', Arial, sans-serif;
  --font-body: 'Inter', Arial, sans-serif;

  --wrap: 1240px;
  --gutter: 32px;
}

/* ------------------------------------------------------------------ Reset */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.7;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); }
a:hover { color: var(--navy); }
h1, h2, h3, h4 { font-family: var(--font-head); }
summary::-webkit-details-marker { display: none; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--navy); color: var(--white); font-family: var(--font-head); font-weight: 700; padding: 12px 18px; text-decoration: none; }
.skip-link:focus { left: 8px; top: 8px; color: var(--white); }
[hidden] { display: none !important; }

/* --------------------------------------------------------------- Layout */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 88px 0; }
.section--tight { padding: 60px 0; }
.section--band { padding: 52px 0; }
.bg-white { background: var(--white); }
.bg-mist  { background: var(--mist); }
.bg-sky   { background: var(--sky-tint); }
.bg-navy  { background: var(--navy); color: var(--white); }
.bd-t { border-top: 1px solid var(--hair); }
.bd-b { border-bottom: 1px solid var(--hair); }
.bg-sky.bd-t, .bg-sky.bd-b { border-color: var(--sky-tint-bd); }

.grid { display: grid; gap: 32px; }
.split { display: grid; gap: 60px; align-items: center; }
.split--top { align-items: start; }
/* Prevent grid/flex children from forcing horizontal overflow (min-width:auto). */
.split > *, .grid > *, .g2 > *, .g3 > *, .g4 > *, .g5 > *, .hairgrid > * { min-width: 0; }

/* ------------------------------------------------------------ Typography */
.eyebrow {
  font-family: var(--font-head); font-weight: 700; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--eyebrow);
  margin: 0 0 14px;
}
.eyebrow--sky { color: var(--sky); }
.kicker {
  font-family: var(--font-head); font-weight: 700; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2);
}
.h1 { font-family: var(--font-head); font-weight: 800; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.1; letter-spacing: -.03em; color: var(--navy); margin: 0 0 20px; text-wrap: balance; }
.h1--xl { font-size: clamp(36px, 5vw, 58px); line-height: 1.08; }
.h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(27px, 3.4vw, 38px); line-height: 1.15; letter-spacing: -.02em; color: var(--navy); margin: 0 0 12px; }
.h2--lg { font-size: clamp(28px, 3.6vw, 40px); }
.h3 { font-family: var(--font-head); font-weight: 700; font-size: clamp(20px, 1.8vw, 25px); line-height: 1.25; color: var(--navy); margin: 0; }
.bg-navy .h1, .bg-navy .h2, .bg-navy .h3 { color: var(--white); }
.lead { font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.6; color: var(--ink-2); margin: 0 0 26px; max-width: 620px; text-wrap: pretty; }
.prose { font-size: 17px; line-height: 1.7; color: var(--ink-2); max-width: 660px; }
.prose p { margin: 0 0 18px; }
.prose p:last-child { margin-bottom: 0; }
.muted { color: var(--muted); }
.on-navy { color: var(--muted-4); }
.max-620 { max-width: 620px; }
.max-680 { max-width: 680px; }
.max-700 { max-width: 700px; }

/* --------------------------------------------------------------- Buttons */
.btn {
  display: inline-block; font-family: var(--font-head); font-weight: 700;
  font-size: 15.5px; padding: 15px 24px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; text-align: center;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.btn--primary { background: var(--sky); color: var(--sky-on); border-color: var(--sky); }
.btn--primary:hover { background: var(--sky-hover); border-color: var(--sky-hover); color: var(--sky-on); }
.btn--secondary { background: var(--white); color: var(--navy); border-color: var(--navy); }
.btn--secondary:hover { background: #F1F5F9; color: var(--navy); }
.btn--secondary-navy { background: transparent; color: var(--white); border-color: var(--navy-border); }
.btn--secondary-navy:hover { border-color: var(--sky); color: var(--sky); }
.btn--ghost-sky { background: transparent; color: var(--sky); border-color: var(--sky); }
.btn--ghost-sky:hover { background: var(--sky); color: var(--sky-on); }
.btn--dark { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn--dark:hover { background: var(--navy-strip); color: var(--white); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.textlink {
  display: inline-block; font-family: var(--font-head); font-weight: 700;
  font-size: 15px; color: var(--link); text-decoration: none;
}
.textlink--underline { border-bottom: 2px solid var(--sky); padding-bottom: 3px; }
.textlink:hover { color: var(--navy); }

/* --------------------------------------------------------------- Icons */
.ic { flex: none; vertical-align: middle; }

/* ------------------------------------------------------------- Header */
/* display:contents so the sticky .mainbar's containing block is the page
   (not the short header box) — otherwise it un-sticks when the header scrolls out. */
.site-header { display: contents; }

/* Top bar — trust + click-to-call (scrolls away) */
.topbar { background: var(--navy); color: var(--muted-4); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 40px; font-size: 13px; }
.topbar-item { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-item .ic { color: var(--sky); }
.topbar-trust { font-weight: 600; color: #fff; }
.topbar-phone { display: flex; align-items: center; }
.tphone { display: inline-flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-family: var(--font-head); }
.tphone .ic { color: var(--sky); }
.tphone-label { color: var(--muted-3); font-weight: 600; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.tphone-num { font-weight: 700; font-size: 15px; }
.tphone:hover .tphone-num { color: var(--sky); }
.tcall { display: none; align-items: center; gap: 7px; color: var(--sky-on); background: var(--sky); font-family: var(--font-head); font-weight: 700; font-size: 13px; padding: 7px 13px; text-decoration: none; }

/* Main bar — sticky */
.mainbar { background: #fff; border-bottom: 1px solid var(--silver); position: sticky; top: 0; z-index: 45; transition: box-shadow .18s ease; }
.site-header.scrolled .mainbar { box-shadow: 0 6px 22px rgba(36,50,71,.10); }
.mainbar-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }

.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.brand-mark { width: 44px; height: 44px; border: 2px solid var(--navy); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; padding: 3px; flex: none; }
.brand-mark span { display: block; }
.brand-mark span:nth-child(1), .brand-mark span:nth-child(4) { background: var(--navy); }
.brand-mark span:nth-child(2), .brand-mark span:nth-child(3) { background: var(--sky); }
.brand-name { font-family: var(--font-head); font-weight: 800; font-size: 22px; color: var(--navy); letter-spacing: -.01em; line-height: 1; }
.brand-sub { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin-top: 5px; font-weight: 600; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }

.nav { display: flex; align-items: center; gap: 2px; font-family: var(--font-body); font-weight: 600; font-size: 15.5px; }
.nav > a, .nav-trigger { padding: 10px 15px; color: var(--navy); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; display: flex; align-items: center; gap: 7px; border-bottom: 2px solid transparent; }
.nav > a:hover, .nav-trigger:hover { color: var(--eyebrow); }
.nav > a[aria-current="page"], .nav-trigger[aria-current="page"] { color: var(--navy); border-bottom-color: var(--sky); }
.nav .has-menu { position: relative; }
.caret { width: 7px; height: 7px; border-right: 1.5px solid var(--sky); border-bottom: 1.5px solid var(--sky); transform: rotate(45deg); display: block; margin-top: -4px; }
.menu {
  position: absolute; top: 100%; left: 0; background: var(--white);
  border: 1px solid var(--silver); border-top: 2px solid var(--sky);
  min-width: 300px; padding: 8px; box-shadow: 0 18px 40px rgba(36,50,71,.13);
  display: none;
}
.has-menu.open .menu, .has-menu:hover .menu, .has-menu:focus-within .menu { display: block; }
.menu a { display: block; padding: 11px 14px; text-decoration: none; color: var(--navy); font-size: 14.5px; }
.menu a:hover { background: var(--sky-tint); }

.header-actions { display: flex; align-items: center; gap: 14px; }
.burger { display: none; }

/* --------------------------------------------------------------- Footer */
.site-footer { font-family: var(--font-body); background: var(--navy); color: var(--silver); }
.footer-cta { border-bottom: 1px solid #35455C; }
.footer-cta .wrap { padding: 48px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer-cta h2 { font-family: var(--font-head); font-weight: 800; font-size: 30px; line-height: 1.2; color: var(--white); margin: 0 0 10px; letter-spacing: -.015em; }
.footer-cta p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted-4); max-width: 640px; }
.footer-main { max-width: var(--wrap); margin: 0 auto; padding: 64px var(--gutter) 44px; display: grid; grid-template-columns: 1.7fr 1fr 0.9fr 1.3fr; gap: 40px 44px; }
.footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.footer-mark { width: 34px; height: 34px; border: 2px solid var(--sky); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; padding: 3px; flex: none; }
.footer-mark span { display: block; }
.footer-mark span:nth-child(1), .footer-mark span:nth-child(4) { background: var(--white); }
.footer-mark span:nth-child(2), .footer-mark span:nth-child(3) { background: var(--sky); }
.footer-brand b { font-family: var(--font-head); font-weight: 800; font-size: 19px; color: var(--white); }
.footer-lede { margin: 0 0 20px; font-size: 14.5px; line-height: 1.65; color: var(--muted-4); max-width: 330px; }
.footer-box { border: 1px solid var(--navy-divider); padding: 14px 16px; max-width: 330px; }
.footer-box .lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #7E8DA1; font-weight: 600; margin-bottom: 6px; }
.footer-box .val { font-size: 14.5px; color: var(--white); }
.footer-col h3 { font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--white); margin: 0 0 16px; }
.footer-links { display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; }
.footer-links a { color: var(--silver); text-decoration: none; }
.footer-links a:hover { color: var(--sky); }
.footer-contact { display: flex; flex-direction: column; gap: 14px; font-size: 14.5px; color: var(--silver); }
.footer-contact .phone { color: var(--white); text-decoration: none; font-family: var(--font-head); font-weight: 700; font-size: 19px; }
.footer-contact .note { color: var(--muted-3); font-size: 13.5px; line-height: 1.6; }
.footer-social { display: flex; gap: 8px; margin-top: 2px; }
.footer-social span { width: 34px; height: 34px; border: 1px solid var(--navy-divider); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted-3); }
.footer-legal { border-top: 1px solid #35455C; }
.footer-legal .wrap { padding: 22px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted-3); }
.footer-legal a { color: var(--muted-3); text-decoration: none; }
.footer-legal a:hover { color: var(--sky); }
.footer-legal .links { display: flex; gap: 22px; }

/* ------------------------------------------------------- Breadcrumb */
.crumb { border-bottom: 1px solid var(--hair); background: var(--fog); }
.crumb .wrap { padding: 14px var(--gutter); font-size: 13.5px; color: var(--muted-2); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.crumb a { color: var(--muted-2); text-decoration: none; }
.crumb a:hover { color: var(--navy); }
.crumb .here { color: var(--navy); }

/* ------------------------------------------------------- Direct answer */
.answer { border-left: 3px solid var(--sky); padding: 4px 0 4px 22px; max-width: 840px; }
.answer p { margin: 0; font-size: 20px; line-height: 1.62; color: var(--navy); text-wrap: pretty; }
.bg-navy .answer p { color: var(--white); }
.answer--boxed { border: 2px solid var(--navy); border-left-width: 2px; padding: 28px 26px; max-width: none; }
.answer--boxed p { font-size: 17.5px; line-height: 1.6; }
.answer-strip { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.answer-strip .lbl { font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--eyebrow); white-space: nowrap; border-right: 1px solid var(--sky-tint-bd); padding-right: 28px; }
.bg-navy .answer-strip .lbl { color: var(--sky); border-color: var(--navy-divider); }
.answer-strip p { margin: 0; font-size: 19px; line-height: 1.6; color: var(--navy); max-width: 900px; }
.bg-navy .answer-strip p { color: var(--white); }

/* ------------------------------------------------------- Fact notice */
.fact { border: 1px solid var(--silver); background: var(--white); }
.fact--navy { border-color: var(--navy-divider); background: var(--navy-panel); }
.fact-head { padding: 18px 22px; border-bottom: 1px solid var(--hair); display: flex; align-items: center; gap: 10px; }
.fact--navy .fact-head { border-color: var(--navy-divider); }
.fact-head i { width: 8px; height: 8px; background: var(--sky); display: block; }
.fact-head b { font-family: var(--font-head); font-weight: 700; font-size: 12.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--navy); }
.fact--navy .fact-head b { color: var(--white); }
.fact-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; font-size: 14.5px; }
.fact-row { display: grid; grid-template-columns: 118px 1fr; gap: 14px; }
.fact-row span:first-child { color: var(--muted-2); }
.fact--navy .fact-row span:first-child { color: var(--muted-3); }
.fact-row span:last-child { color: var(--navy); }
.fact--navy .fact-row span:last-child { color: var(--white); }
.fact-row .src { color: var(--link); }
.fact--navy .fact-row .src { color: var(--sky); }
.fact-row .unverified { color: var(--amber); }
.fact--navy .fact-row .unverified { color: #E0B48F; }
.fact-note { border-top: 1px solid var(--hair); padding-top: 14px; font-size: 13.5px; color: var(--muted); }
.fact--navy .fact-note { border-color: var(--navy-divider); color: var(--muted-3); }

/* ------------------------------------------------------- Cards + grids */
.hairgrid { display: grid; gap: 1px; background: var(--silver); border: 1px solid var(--silver); }
.hairgrid > * { background: var(--white); }
.card { background: var(--white); border: 1px solid var(--silver); padding: 28px 26px; }
.card--hover { text-decoration: none; display: block; transition: background .16s ease; }
.card--hover:hover { background: var(--sky-tint); }
.card--top { border-top: 3px solid var(--sky); }
.card--bracket { position: relative; }
.card--bracket .bracket { position: absolute; top: -1px; left: -1px; width: 22px; height: 22px; border-top: 2px solid var(--sky); border-left: 2px solid var(--sky); }
.card-title { font-family: var(--font-head); font-weight: 700; font-size: 19px; color: var(--navy); margin: 0 0 12px; }
.card-num { font-family: var(--font-head); font-weight: 800; font-size: 13px; color: var(--sky); margin-bottom: 18px; }
.card p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); }
.card-arrow { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--link); margin-top: 14px; }

/* stat / spec / cost blocks */
.stat .lbl { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; margin-bottom: 10px; }
.stat .big { font-family: var(--font-head); font-weight: 800; font-size: 40px; color: var(--navy); line-height: 1; }
.stat p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.bg-navy .stat .lbl { color: var(--muted-3); }
.bg-navy .stat .big { color: var(--white); }
.bg-navy .stat p { color: var(--muted-4); }
.stat--sky .big { color: var(--sky); }

/* section heading row */
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 32px; flex-wrap: wrap; }
.note-chip { font-size: 13.5px; color: var(--muted); border: 1px solid var(--silver); padding: 8px 12px; background: var(--white); }

/* ------------------------------------------------------- Data tables */
.dtable { width: 100%; border-collapse: collapse; border: 1px solid var(--silver); background: var(--white); }
.dtable thead th { background: var(--navy); color: var(--white); font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: 16px 18px; }
.dtable thead th:first-child { padding-left: 22px; }
.dtable th.hl { background: var(--link); }
.dtable td { padding: 17px 18px; font-size: 15px; color: var(--muted); border-bottom: 1px solid var(--hair); vertical-align: top; }
.dtable td:first-child { padding-left: 22px; font-weight: 600; color: var(--navy); }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr:nth-child(even) td { background: var(--fog); }
.dtable td.hl { background: #F7FAFC; }
.dtable td.pos { color: var(--link); font-weight: 600; }
.dtable td.big { font-family: var(--font-head); font-weight: 800; font-size: 20px; color: var(--navy); }
.dtable td.big.sky { color: var(--link); }
.dtable td.money { font-family: var(--font-head); font-weight: 700; color: var(--navy); }
.table-foot { border: 1px solid var(--silver); border-top: 0; background: var(--fog); padding: 16px 22px; font-size: 13.5px; color: var(--muted); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.table-foot strong { color: var(--navy); }
.table-note { margin: 16px 0 0; font-size: 13.5px; color: var(--muted-2); }

/* ------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--silver); }
.faq details { border-bottom: 1px solid var(--silver); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--navy); position: relative; }
.faq summary .chev { position: absolute; right: 6px; top: 26px; width: 11px; height: 11px; border-right: 2px solid var(--sky); border-bottom: 2px solid var(--sky); transform: rotate(45deg); transition: transform .16s ease; }
.faq details[open] summary .chev { transform: rotate(-135deg); }
.faq p { margin: 0; padding: 0 0 20px; font-size: 16px; line-height: 1.7; color: var(--ink-2); max-width: 660px; }
.faq--lg summary { padding: 22px 40px 22px 0; font-size: 17.5px; }
.faq--lg summary .chev { top: 30px; }
.faq--lg p { padding-bottom: 22px; }

/* ------------------------------------------------------- Process rails */
.rail { display: grid; border-top: 2px solid var(--silver); }
.rail--accent { border-top-color: var(--sky); }
.rail .step { padding: 26px 22px 0; border-right: 1px solid var(--hair); position: relative; }
.bg-navy .rail .step { border-right-color: var(--navy-divider); }
.rail .step:last-child { border-right: 0; }
.rail .step .node { position: absolute; top: -7px; left: 22px; width: 12px; height: 12px; background: var(--sky); display: block; }
.rail .step .node--dim { top: -6px; width: 10px; height: 10px; background: var(--silver); }
.bg-navy .rail .step .node--dim { background: #4A5A70; }
.rail .step .n { font-family: var(--font-head); font-weight: 800; font-size: 13px; color: var(--sky); margin-bottom: 10px; }
.rail .step h4 { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--navy); margin: 0 0 8px; }
.bg-navy .rail .step h4 { color: var(--white); }
.rail .step p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.bg-navy .rail .step p { color: var(--muted-4); }

/* checklist rows */
.checkrow { display: flex; gap: 12px; align-items: flex-start; }
.checkrow .box { width: 17px; height: 17px; border: 2px solid var(--sky); display: block; flex: none; margin-top: 3px; }
.checkrow span:last-child { font-size: 15.5px; line-height: 1.6; color: var(--ink); }

/* stacked hairline list (label/value pairs) */
.stack { display: flex; flex-direction: column; gap: 2px; background: var(--silver); border: 1px solid var(--silver); }
.stack > div { background: var(--white); padding: 20px 24px; }

/* ------------------------------------------------------- Image slot */
.imgslot {
  background: var(--mist); border: 1px dashed #B7C0CC; color: var(--muted-2);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 22px; font-size: 13.5px; line-height: 1.5; position: relative;
}
.imgslot::before {
  content: ""; position: absolute; inset: 8px; border: 1px solid #D5DBE2; pointer-events: none;
}
.imgslot span { position: relative; max-width: 80%; }
.frame-offset { position: relative; }
.frame-offset .ghost { position: absolute; width: 100%; height: 100%; border: 1px solid var(--silver); }
.frame-offset .ghost--br { top: -14px; right: -14px; }
.frame-offset .ghost--tl { top: -14px; left: -14px; }
.frame-offset .inner { position: relative; background: var(--mist); padding: 10px; }

/* ------------------------------------------------------- Forms */
.form { background: var(--white); border: 1px solid var(--silver); padding: 34px 32px; display: flex; flex-direction: column; gap: 18px; }
.form--onnavy { border: 0; }
.field { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--navy); }
.field input, .field textarea {
  border: 1px solid var(--silver); padding: 14px 15px; font-size: 15.5px;
  font-family: inherit; color: var(--navy); background: var(--white);
  width: 100%; min-width: 0; box-sizing: border-box;
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--sky); outline-offset: 1px; border-color: var(--sky); }
.field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-title { font-family: var(--font-head); font-weight: 800; font-size: 22px; color: var(--navy); }
.form-fine { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted-2); }
.field--error input { border-color: var(--amber); background: var(--amber-bg); }
.err { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--amber); font-weight: 400; }
.err i { width: 14px; height: 14px; border: 2px solid var(--amber); display: block; flex: none; }
.email-field .err { display: none; }
form.show-error .email-field input { border-color: var(--amber); background: var(--amber-bg); }
form.show-error .email-field .err { display: flex; }

/* Guides filter chips + filtering */
.chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--silver); padding-bottom: 20px; margin-bottom: 32px; }
.chips .lbl { font-size: 13px; letter-spacing: .11em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; margin-right: 8px; }
.chip { font-family: var(--font-head); font-weight: 600; font-size: 14px; padding: 10px 15px; cursor: pointer; border: 1px solid var(--silver); background: var(--white); color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
@media (max-width: 767px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; border-bottom: 0; padding-bottom: 8px; }
  .chips .lbl { display: none; }
  .chip { white-space: nowrap; }
}

/* ------------------------------------------------------- CTA band */
.cta-band .wrap { padding: 52px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-band h2 { font-family: var(--font-head); font-weight: 800; font-size: 28px; line-height: 1.2; margin: 0 0 8px; color: var(--navy); }
.bg-navy.cta-band h2 { color: var(--white); }
.cta-band p { margin: 0; font-size: 16px; color: var(--ink-2); }
.bg-navy.cta-band p { color: var(--muted-4); }

/* ------------------------------------------------------- Trust bars */
.trustbar .wrap { padding: 26px var(--gutter); display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; }
.trustbar .item { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.trustbar .item i { width: 3px; height: 26px; background: var(--sky); display: block; flex: none; }
.trust-badge { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--silver); padding: 7px 12px; font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; color: var(--ink-2); }
.trust-badge i { width: 7px; height: 7px; background: var(--sky); display: block; }
.star { width: 12px; height: 12px; background: var(--sky); display: block; }

/* small helpers */
.stat-row { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--silver); padding-top: 22px; gap: 22px; max-width: 560px; }
.stat-row .t { font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--navy); margin-bottom: 5px; }
.stat-row .d { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.bar { height: 10px; background: #33445C; }
.bar > span { display: block; height: 10px; background: var(--sky); }
.bar > span.mid { background: var(--sky-mid); }
.pill { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: 4px 8px; }
.pill--ok { color: var(--link); border: 1px solid var(--sky); }
.pill--warn { color: var(--muted-2); border: 1px solid var(--silver); }
.pill--alert { color: var(--amber); border: 1px solid var(--amber-bd); }
.pill--solid { background: var(--sky); color: var(--sky-on); }

/* Legal template: index collapses above content on small screens */
@media (max-width: 900px) {
  .legal-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .legal-index { position: static !important; border-left: 0 !important; padding-left: 0 !important; border-bottom: 1px solid var(--hair); padding-bottom: 20px; }
}

/* ------------------------------------------------------- Mobile chrome */
.mobile-cta { display: none; }
.mobile-menu { display: none; }
.no-scroll { overflow: hidden; }

/* ======================================================================
   Homepage sections (redesign)
   ====================================================================== */
.sec-head { max-width: 720px; margin: 0 0 40px; }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head p { margin: 12px 0 0; font-size: 17px; line-height: 1.6; color: var(--muted); }
.btn--icon { display: inline-flex; align-items: center; gap: 9px; }
.btn--icon .ic { width: 18px; height: 18px; }

/* Hero */
.winart { display: block; overflow: hidden; }
.hero { background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FB 100%); border-bottom: 1px solid var(--hair); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .92fr; gap: 56px; align-items: center; padding: 60px 0 64px; }
.hero-copy h1 { margin: 0 0 20px; }
.hero-figure { position: relative; }
.hero-figure::before { content: ""; position: absolute; top: 18px; right: -16px; width: 100%; height: 100%; border: 2px solid var(--sky-tint-bd); }
.hero-figure .winart { position: relative; z-index: 1; width: 100%; height: 470px; border: 1px solid var(--silver); display: block; }
.hero-figure .fig-tag { position: absolute; z-index: 2; left: 16px; bottom: 16px; background: var(--navy); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 13px; padding: 10px 15px; display: flex; align-items: center; gap: 9px; }
.hero-figure .fig-tag .ic { color: var(--sky); width: 18px; height: 18px; }

/* Trust strip */
.tstrip { background: var(--white); }
.tstrip-inner { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--silver); border: 1px solid var(--silver); }
.tstrip .item { background: #fff; display: flex; align-items: center; gap: 13px; padding: 22px 20px; }
.tstrip .item .ic { color: var(--sky); width: 28px; height: 28px; }
.tstrip .item b { font-family: var(--font-head); font-weight: 700; font-size: 14.5px; color: var(--navy); display: block; line-height: 1.25; }
.tstrip .item span { font-size: 12.5px; color: var(--muted); }

/* Services */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--silver); padding: 28px 26px; text-decoration: none; min-height: 232px; transition: border-color .16s, box-shadow .16s, background .16s; }
.svc-card:hover { border-color: var(--sky); background: var(--sky-tint); box-shadow: 0 12px 30px rgba(36,50,71,.08); }
.svc-ico { width: 52px; height: 52px; border: 1px solid var(--silver); display: flex; align-items: center; justify-content: center; color: var(--navy); margin-bottom: 18px; background: #fff; }
.svc-card:hover .svc-ico { border-color: var(--sky); color: var(--link); }
.svc-ico .ic { width: 26px; height: 26px; }
.svc-card h3 { font-family: var(--font-head); font-weight: 700; font-size: 18.5px; color: var(--navy); margin: 0 0 9px; }
.svc-card p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.svc-more { margin-top: auto; display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--link); }
.svc-more .ic { width: 16px; height: 16px; transition: transform .16s; }
.svc-card:hover .svc-more .ic { transform: translateX(3px); }
.svc-card--cta { background: var(--navy); border-color: var(--navy); }
.svc-card--cta h3 { color: #fff; }
.svc-card--cta p { color: var(--muted-4); }
.svc-card--cta .svc-ico { border-color: var(--navy-divider); color: var(--sky); background: transparent; }
.svc-card--cta .svc-more { color: var(--sky); }
.svc-card--cta:hover { background: var(--navy-strip); border-color: var(--navy); box-shadow: 0 12px 30px rgba(36,50,71,.16); }
.svc-card--cta:hover .svc-ico { border-color: var(--sky); color: var(--sky); }

/* Local-to-Tallahassee cards (on navy) */
.local-cards { display: flex; flex-direction: column; gap: 14px; }
.local-card { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--navy-divider); padding: 20px 22px; }
.local-card > .ic { color: var(--sky); flex: none; margin-top: 2px; }
.local-card b { font-family: var(--font-head); font-weight: 700; font-size: 16.5px; color: #fff; display: block; margin-bottom: 5px; }
.local-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted-4); }

.svc-mini-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 34px 0 18px; }
.svc-mini-head .lbl { font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.svc-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.svc-mini { display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid var(--silver); padding: 16px 18px; text-decoration: none; transition: border-color .16s, background .16s; }
.svc-mini:hover { border-color: var(--sky); background: var(--sky-tint); }
.svc-mini .ic { color: var(--link); width: 22px; height: 22px; }
.svc-mini b { font-family: var(--font-head); font-weight: 700; font-size: 14.5px; color: var(--navy); display: block; line-height: 1.2; }
.svc-mini span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* Benefits */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.benefit { border: 1px solid var(--silver); padding: 26px 24px; background: #fff; }
.benefit .ic { color: var(--sky); width: 30px; height: 30px; margin-bottom: 16px; }
.benefit h3 { font-family: var(--font-head); font-weight: 700; font-size: 17.5px; color: var(--navy); margin: 0 0 8px; }
.benefit p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* Energy education */
.energy-split { display: grid; grid-template-columns: .92fr 1.08fr; gap: 56px; align-items: center; }
.energy-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.energy-card { border: 1px solid var(--silver); border-top: 3px solid var(--sky); padding: 26px 24px; background: #fff; }
.energy-card .ic { color: var(--link); width: 30px; height: 30px; margin-bottom: 14px; }
.energy-card h3 { font-family: var(--font-head); font-weight: 800; font-size: 19px; color: var(--navy); margin: 0 0 8px; }
.energy-card p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--muted); }

/* Service areas */
.areas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--silver); border: 1px solid var(--silver); }
.area-col { background: #fff; padding: 24px 22px; }
.area-col h3 { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--navy); margin: 0 0 3px; display: flex; align-items: center; gap: 9px; }
.area-col h3 .ic { color: var(--sky); width: 18px; height: 18px; }
.area-col .cty { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; margin: 0 0 14px 27px; }
.area-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.area-col li { font-size: 14.5px; color: var(--ink-2); display: flex; align-items: center; gap: 9px; }
.area-col li::before { content: ""; width: 5px; height: 5px; background: var(--sky); flex: none; }

/* Process */
.process-steps { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.process-steps::before { content: ""; position: absolute; top: 27px; left: 10%; right: 10%; height: 2px; background: var(--silver); z-index: 0; }
.pstep { padding: 0 16px; position: relative; z-index: 1; }
.pnum { width: 54px; height: 54px; border: 2px solid var(--sky); color: var(--navy); font-family: var(--font-head); font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; background: #fff; }
.pstep:last-child .pnum { background: var(--sky); border-color: var(--sky); color: var(--sky-on); }
.pstep h3 { margin: 18px 0 8px; font-family: var(--font-head); font-weight: 700; font-size: 16.5px; color: var(--navy); }
.pstep p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* Project showcase */
.showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.proj { border: 1px solid var(--silver); background: #fff; overflow: hidden; }
.proj .winart { width: 100%; height: 240px; display: block; border-bottom: 1px solid var(--silver); }
.proj .meta { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.proj .meta b { font-family: var(--font-head); font-weight: 700; font-size: 15.5px; color: var(--navy); }
.proj .tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--link); border: 1px solid var(--sky); padding: 4px 9px; white-space: nowrap; }

/* Assurance / warranty */
.assure-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.assure { border: 1px solid var(--silver); padding: 26px 24px; background: #fff; }
.assure .ic { color: var(--sky); width: 28px; height: 28px; margin-bottom: 14px; }
.assure h3 { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--navy); margin: 0 0 8px; }
.assure p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--muted); }

/* Service-page helpers */
.verified { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: 12.5px; letter-spacing: .04em; color: var(--muted-2); }
.verified .dot { width: 8px; height: 8px; background: var(--sky); flex: none; }
.fact--navy .verified { color: var(--muted-3); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--silver); border: 1px solid var(--silver); }
.related-card { background: #fff; padding: 26px 24px; text-decoration: none; display: flex; flex-direction: column; gap: 10px; transition: background .16s; }
.related-card:hover { background: var(--sky-tint); }
.related-card .ic { color: var(--link); width: 26px; height: 26px; }
.related-card b { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--navy); }
.related-card span { font-size: 14px; line-height: 1.55; color: var(--muted); }
.related-card .go { margin-top: auto; display: flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 700; font-size: 13.5px; color: var(--link); padding-top: 6px; }
.spec-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.info-list { display: flex; flex-direction: column; gap: 14px; }
.info-list .row { display: flex; gap: 14px; align-items: flex-start; }
.info-list .row .ic { color: var(--sky); flex: none; margin-top: 2px; width: 24px; height: 24px; }
.info-list .row b { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--navy); display: block; margin-bottom: 3px; }
.bg-navy .info-list .row b { color: #fff; }
.info-list .row p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.bg-navy .info-list .row p { color: var(--muted-4); }

/* Final CTA */
.final-cta { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.final-cta::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--navy-divider) 1px, transparent 1px), linear-gradient(90deg, var(--navy-divider) 1px, transparent 1px); background-size: 64px 64px; opacity: .25; }
.final-cta .wrap { padding: 76px var(--gutter); text-align: center; position: relative; z-index: 1; }
.final-cta h2 { font-family: var(--font-head); font-weight: 800; font-size: 38px; line-height: 1.12; letter-spacing: -.02em; color: #fff; margin: 0 auto 16px; max-width: 760px; }
.final-cta p { font-size: 17px; line-height: 1.6; color: var(--muted-4); margin: 0 auto 30px; max-width: 600px; }
.final-cta .btn-row { justify-content: center; }

/* ======================================================================
   Service pages — premium system (scenes, intro, media, related, form)
   ====================================================================== */
.scene { display: block; width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--silver); background: #F4F6F8; }

/* Hero image (distinct scene, offset accent frame from .hero-figure::before) */
.hero-figure--svc .scene { aspect-ratio: auto; height: 460px; position: relative; z-index: 1; }

/* Overview section: heading + paragraph + image, with a facts strip beneath */
.intro-sec { padding: 64px 0; }
.intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.intro-copy .eyebrow { margin-bottom: 12px; }
.intro-figure .scene { aspect-ratio: 4 / 3; }
.intro-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--silver); border: 1px solid var(--silver); margin-top: 40px; }
.fact-item { display: flex; gap: 14px; align-items: center; background: #fff; padding: 20px 22px; }
.fact-item > .ic { color: var(--sky); flex: none; }
.fact-item b { font-family: var(--font-head); font-weight: 700; font-size: 15.5px; color: var(--navy); display: block; }
.fact-item span { font-size: 13.5px; color: var(--muted); }

/* Alternating media + text sections */
.media-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
.media-figure { position: relative; }
.media-figure .scene { aspect-ratio: 4 / 3; }
.media-figure--frame::before { content: ""; position: absolute; bottom: -14px; right: -14px; width: 100%; height: 100%; border: 2px solid var(--sky-tint-bd); z-index: 0; }
.media-figure--frame .scene { position: relative; z-index: 1; }
.media-figure .fig-tag, .hero-figure .fig-tag { position: absolute; z-index: 2; left: 14px; bottom: 14px; background: var(--navy); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 12.5px; padding: 9px 13px; display: flex; align-items: center; gap: 8px; }
.media-figure .fig-tag .ic { color: var(--sky); }

/* Before / after */
.ba-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: stretch; }
.ba-main .scene { aspect-ratio: 16 / 10; height: 100%; }
.ba-side { display: flex; flex-direction: column; gap: 2px; background: var(--silver); border: 1px solid var(--silver); }
.ba-point { background: #fff; padding: 20px 22px; display: flex; gap: 14px; align-items: flex-start; flex: 1; }
.ba-point > .ic { color: var(--sky); flex: none; margin-top: 2px; }
.ba-point b { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--navy); display: block; margin-bottom: 4px; }
.ba-point span { font-size: 14px; line-height: 1.55; color: var(--muted); }

/* Redesigned related cards (scene thumbnail + hover) */
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rel-card { display: flex; flex-direction: column; border: 1px solid var(--silver); background: #fff; text-decoration: none; transition: border-color .16s, box-shadow .16s, transform .16s; overflow: hidden; }
.rel-card:hover { border-color: var(--sky); box-shadow: 0 14px 34px rgba(36,50,71,.10); transform: translateY(-3px); }
.rel-media { position: relative; }
.rel-media .scene { aspect-ratio: 16 / 9; border: 0; border-bottom: 1px solid var(--silver); }
.rel-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.rel-body b { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--navy); }
.rel-body span { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.rel-body .go { margin-top: auto; display: flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--link); padding-top: 8px; }
.rel-card:hover .go .ic { transform: translateX(3px); }
.rel-body .go .ic { transition: transform .16s; }

/* ========================================================================
   Real project photography (WebP) — fills the existing figure wrappers
   ======================================================================== */
.ph { display: block; width: 100%; height: auto; object-fit: cover; background: #E7EEF4; border: 1px solid var(--silver); }
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--4x3 { aspect-ratio: 4 / 3; }
.ph--3x2 { aspect-ratio: 3 / 2; }
.ph--16x10 { aspect-ratio: 16 / 10; }
.ph--contain { object-fit: contain; background: #F7F9FB; }
.ph--cover { height: 100%; aspect-ratio: auto; }

/* Hero photo fills the figure at a content-matched height */
.hero-figure > .ph { position: relative; z-index: 1; height: 100%; aspect-ratio: auto; }
.hero-figure:has(> .ph) { height: 430px; }

/* Section / intro / related / before-after / showcase photos */
.media-figure > .ph, .intro-figure > .ph { position: relative; z-index: 1; }
.rel-media > .ph { border: 0; border-bottom: 1px solid var(--silver); }
.ba-main:has(> .ph) { align-self: start; }
.ba-main > .ph { height: auto; }
.proj > .ph { border: 0; border-bottom: 1px solid var(--silver); }

/* Homepage service-card photo thumbnails */
.svc-card--photo { padding: 0; overflow: hidden; }
.svc-thumb { display: block; overflow: hidden; border-bottom: 1px solid var(--silver); }
.svc-thumb .ph { border: 0; transition: transform .35s ease; }
.svc-card--photo:hover .svc-thumb .ph { transform: scale(1.045); }
.svc-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1 1 auto; }

/* Two-up project showcase (completed + before/after) */
.showcase-2 { grid-template-columns: 1fr 1fr; }

/* About-page project figure (full width, height-capped) */
.about-figure { height: 460px; overflow: hidden; position: relative; }
.about-figure > .ph { height: 100%; aspect-ratio: auto; }

/* Image-free content bands (full-width text + optional card grid) */
.intro-grid--solo { grid-template-columns: 1fr; }
.intro-grid--solo .intro-copy { max-width: 860px; }
.band-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 4px; }
.bg-navy .benefit { background: var(--navy-panel); border-color: var(--navy-divider); }
.bg-navy .benefit h3 { color: #FFFFFF; }
.bg-navy .benefit p { color: var(--muted-4); }

/* Embedded estimate form section (on navy) */
.estimate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.estimate-grid > * { min-width: 0; }
.estimate-copy .estimate-points { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 24px; }
.estimate-copy .estimate-points .row { display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: var(--silver); }
.estimate-copy .estimate-points .row .ic { color: var(--sky); flex: none; }
.estimate-call { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--navy-border); padding: 13px 18px; text-decoration: none; }
.estimate-call:hover { border-color: var(--sky); }
.estimate-call .ic { color: var(--sky); }
.estimate-call small { display: block; font-size: 12px; color: var(--muted-4); }
.estimate-call strong { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: #fff; }
.estimate-sec .form { grid-column: 2; }
.estimate-sec .form-success { grid-column: 2; background: #fff; border: 1px solid var(--silver); padding: 40px 34px; }
.success-tick { width: 46px; height: 46px; border: 2px solid var(--sky); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.success-tick span { width: 17px; height: 9px; border-left: 3px solid var(--link); border-bottom: 3px solid var(--link); transform: rotate(-45deg); display: block; margin-top: -5px; }

/* ========================================================================
   Responsive
   ======================================================================== */
@media (max-width: 1200px) {
  .split { gap: 44px; }
}

/* Tablet: 4-up grids -> 2-up, mobile nav + sticky CTA (desktop chrome
   does not fit below ~1024) */
@media (max-width: 1023px) {
  .g4 { grid-template-columns: repeat(2, 1fr) !important; }
  .g3 { grid-template-columns: repeat(2, 1fr) !important; }
  .g5 { grid-template-columns: repeat(2, 1fr) !important; }
  .rail { grid-template-columns: repeat(2, 1fr) !important; }
  .rail .step { border-bottom: 1px solid var(--hair); }
  .bg-navy .rail .step { border-bottom-color: var(--navy-divider); }

  /* homepage sections */
  .hero-grid { gap: 40px; }
  .hero-figure:has(> .ph) { height: 420px; }
  .svc-grid, .benefit-grid, .assure-grid, .showcase-grid, .areas-grid,
  .svc-mini-grid, .tstrip-inner, .spec-cards, .related-grid, .rel-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .energy-split { grid-template-columns: 1fr !important; gap: 36px; }
  .process-steps { grid-template-columns: 1fr !important; gap: 2px; background: var(--silver); border: 1px solid var(--silver); }
  .process-steps::before { display: none; }
  .pstep { background: #fff; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 20px 22px; }
  .pstep .pnum { grid-column: 1; grid-row: 1; }
  .pstep h3 { grid-column: 2; grid-row: 1; margin: 0; }
  .pstep p { grid-column: 1 / -1; grid-row: 2; margin-top: 14px; min-width: 0; }
  .pnum { width: 48px; height: 48px; font-size: 18px; }

  /* estimate form stacks on tablet (2-col cell is too tight for the fields) */
  .estimate-grid { grid-template-columns: 1fr !important; gap: 32px; }
  .estimate-sec .form, .estimate-sec .form-success { grid-column: auto; max-width: 560px; }

  .footer-main { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-contact span, .footer-brand ~ .footer-lede { word-break: break-word; }
  .trustbar .wrap { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  /* header: hide desktop nav + CTA, show burger */
  .mainbar-inner { min-height: 66px; }
  .nav, .header-estimate { display: none; }
  .header-actions { gap: 8px; }
  .burger { display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--silver); background: var(--white); cursor: pointer; }
  .burger span { width: 18px; height: 2px; background: var(--navy); display: block; }

  /* sticky CTA bar */
  /* Clearance for the fixed mobile CTA lives on the (navy) footer, not on the
     white body — otherwise the reserved space shows as a white gap between the
     navy footer and the navy CTA bar. */
  .site-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .mobile-cta { display: grid; grid-template-columns: 1fr 1.3fr; position: fixed; bottom: 0; left: 0; right: 0; background: var(--navy); border-top: 1px solid var(--navy-divider); z-index: 60; padding-bottom: env(safe-area-inset-bottom); }
  .mobile-cta a { padding: 15px 10px; min-height: 48px; box-sizing: border-box; text-align: center; text-decoration: none; font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--white); display: flex; align-items: center; justify-content: center; }
  .mobile-cta a.est { background: var(--sky); color: var(--sky-on); }

  /* full-screen mobile menu panel */
  .mobile-menu { display: block; position: fixed; inset: 0; background: var(--navy); z-index: 70; overflow: auto; transform: translateY(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s; }
  .mobile-menu.open { transform: translateY(0); visibility: visible; }
  .mobile-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
  .mobile-menu-head b { font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--white); }
  .mobile-menu-close { width: 44px; height: 44px; border: 1px solid var(--navy-border); background: none; color: var(--white); font-size: 22px; cursor: pointer; line-height: 1; }
  .mobile-menu-list { display: flex; flex-direction: column; padding: 8px 16px 22px; max-width: 520px; }
  .mobile-menu-list a { padding: 16px 0; border-bottom: 1px solid var(--navy-divider); color: var(--white); text-decoration: none; font-family: var(--font-head); font-weight: 600; font-size: 17px; }
  .mobile-menu-list .grouplbl { padding: 16px 0; border-bottom: 1px solid var(--navy-divider); color: var(--sky); font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
  .mobile-menu-list a.sub { padding: 14px 0 14px 16px; color: var(--silver); font-family: var(--font-body); font-weight: 400; font-size: 16px; }
  .mobile-menu-list a.est { margin-top: 14px; background: var(--sky); color: var(--sky-on); padding: 16px; text-align: center; border: 0; border-radius: var(--r-sm); }
  .mobile-menu-list a.mob-call { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--navy-border); border-radius: var(--r-sm); padding: 15px; color: #fff; text-align: center; }
  .mobile-menu-list a.mob-call .ic { color: var(--sky); }
}

/* Tablet portrait: stack the hero so the copy + figure aren't cramped side-by-side */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: 34px; padding: 44px 0 48px; }
  .hero-figure { max-width: 620px; }
  .hero-figure::before { display: none; }
  .hero-figure .winart { height: 380px; }
  .hero-figure--svc .scene { height: 360px; }
  .hero-figure:has(> .ph) { height: 380px; }
  .about-figure { height: 360px; }
}

/* Data tables collapse to cards below 900px */
@media (max-width: 900px) {
  .dtable, .dtable tbody, .dtable tr, .dtable td { display: block; width: 100%; }
  .dtable thead { display: none; }
  .dtable { border: 0; }
  .dtable tr { border: 1px solid var(--silver); margin-bottom: 12px; background: var(--white); }
  .dtable tbody tr:nth-child(even) td { background: transparent; }
  .dtable td { border: 0; border-top: 1px solid var(--hair-2); padding: 12px 16px !important; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; text-align: right; overflow-wrap: anywhere; }
  .dtable td:first-child { border-top: 0; background: var(--fog); font-family: var(--font-head); text-align: left; }
  .dtable td::before { content: attr(data-label); font-weight: 600; color: var(--muted-2); text-align: left; font-family: var(--font-body); font-size: 13px; }
  .dtable td:first-child::before { content: none; }
  .dtable td.big { font-size: 16px; }
}

/* Mobile: single column, tighter gutters + type */
@media (max-width: 767px) {
  :root { --gutter: 18px; }
  body { font-size: 16.5px; }
  .h3 { font-size: 21px; }

  /* Every page hero gets exactly 15px left/right padding on mobile — applied
     once on the hero's own .wrap (the single container). This covers the
     homepage & service heroes, whose .hero-grid otherwise zeroes horizontal
     padding, and the About/Contact/Legal/Thank-you/404 heroes on plain .wrap. */
  main > section:first-of-type > .wrap { padding-left: 18px; padding-right: 18px; }
  .section { padding: 54px 0; }
  .section--tight { padding: 44px 0; }
  .section--band { padding: 34px 0; }
  .split, .grid, .g2, .g3, .g4, .g5, .field-2,
  .trustbar .wrap, .footer-main, .rail { grid-template-columns: 1fr !important; }
  .split { gap: 28px; }
  .grid { gap: 16px; }
  .rail { border-top: 0; }
  .rail .step { border-right: 0; border-bottom: 1px solid var(--hair); border-top: 2px solid var(--silver); padding: 22px 0 22px 22px; }
  .rail .step .node, .rail .step .node--dim { left: 0; }
  .h1, .h1--xl { line-height: 1.14; }
  .answer p { font-size: 17px; }
  .answer-strip { grid-template-columns: 1fr; gap: 12px; }
  .answer-strip .lbl { border-right: 0; border-bottom: 1px solid var(--sky-tint-bd); padding: 0 0 10px; }
  .head-row { margin-bottom: 22px; }
  .fact-row { grid-template-columns: 100px 1fr; }
  .field input, .field textarea { font-size: 16px; } /* prevent iOS zoom */
  .form { padding: 24px 20px; }

  /* compact top bar: trust truncates, Call Now button (never wraps) */
  .topbar-inner { height: 44px; gap: 10px; }
  .topbar-mid { display: none; }
  .topbar-trust { font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .topbar-trust span { overflow: hidden; text-overflow: ellipsis; }
  .tphone { display: none; }
  .tcall { display: inline-flex; }

  /* homepage sections — single column */
  .hero-grid { grid-template-columns: 1fr !important; gap: 28px; padding: 30px 0 44px; }
  .hero-figure::before { display: none; }
  .hero-figure .winart { height: 300px; }
  .hero-figure:has(> .ph) { height: 300px; }
  .about-figure { height: 280px; }
  .hero-copy .btn-row .btn, .final-cta .btn-row .btn { flex: 1 1 100%; }
  .svc-grid, .benefit-grid, .assure-grid, .showcase-grid, .areas-grid,
  .svc-mini-grid, .tstrip-inner, .energy-cards, .spec-cards, .related-grid,
  .rel-grid, .intro-grid, .media-grid, .estimate-grid, .ba-grid, .intro-facts { grid-template-columns: 1fr !important; }
  .svc-card { min-height: 0; }
  .hero-figure--svc .scene { height: 300px; }
  .media-figure--frame::before { display: none; }
  .intro-lead p { font-size: 20px; }
  .intro-facts { margin-top: 4px; }
  .estimate-grid { gap: 28px; }
  .estimate-sec .form, .estimate-sec .form-success { grid-column: auto; }
  .ba-main .scene { aspect-ratio: 16 / 10; }
  .final-cta h2 { font-size: 26px; }
  .final-cta p { font-size: 16px; }
  .final-cta .wrap { padding: 44px 0; }
}

/* Larger desktop cap */
@media (min-width: 1440px) {
  .section { padding: 96px 0; }
}

/* ============================================================================
   Modernization layer (2026 refresh) — soft premium surfaces
   Rounded corners, subtle layered shadows, crisper interaction and tasteful
   entrance motion. Brand palette unchanged; the thin silver frames are kept
   underneath the shadow for a layered, architectural-but-modern feel.
   ========================================================================== */
:root {
  --r: 14px;        /* cards & panels */
  --r-sm: 10px;     /* buttons, inputs, small chips */
  --r-lg: 18px;     /* large media, hero image, form panel */
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(36,50,71,.05), 0 6px 18px rgba(36,50,71,.06);
  --shadow-md: 0 12px 28px rgba(36,50,71,.11);
  --shadow-lg: 0 22px 48px rgba(36,50,71,.14);
}

/* ---- rounded surfaces ---- */
.card, .benefit, .assure, .energy-card, .local-card, .stat, .fact,
.footer-box, .answer, .answer--boxed, .menu, .tstrip-inner, .imgslot { border-radius: var(--r); }
.svc-card, .rel-card, .proj { border-radius: var(--r); overflow: hidden; }
.form, .form-success, .about-figure { border-radius: var(--r-lg); }
.btn, .header-estimate, .tcall, .chip { border-radius: var(--r-sm); }
.field input, .field textarea, .form input, .form textarea, select { border-radius: var(--r-sm); }
.pnum, .svc-ico, .trust-badge, .pill, .fig-tag, .tag, .star, .trust-badge i { border-radius: 8px; }
.mobile-menu-list a.est { border-radius: var(--r-sm); }

/* media images: standalone ones round; card-top images stay square (the card
   already rounds them via overflow) so the image meets the card body cleanly */
.media-figure > .ph, .intro-figure > .ph, .hero-figure > .ph, .ba-main > .ph { border-radius: var(--r-lg); }
.media-figure--frame::before { border-radius: var(--r-lg); }
.svc-thumb .ph, .rel-media .ph, .proj .ph { border-radius: 0; }

/* ---- subtle depth (borders retained) ---- */
.card, .svc-card, .benefit, .assure, .energy-card, .local-card, .rel-card,
.proj, .form, .stat { box-shadow: var(--shadow-sm); }
.menu { box-shadow: var(--shadow-lg); }

/* ---- refined hover lift ---- */
.svc-card, .rel-card, .proj, .card, .benefit, .assure {
  transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease, background-color .18s ease;
}
.svc-card:hover, .rel-card:hover, .proj:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.benefit:hover, .assure:hover, .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ---- buttons: crisper interaction + soft primary glow ---- */
.btn { transition: transform .12s ease, box-shadow .18s ease, background-color .16s ease, color .16s ease, border-color .16s ease; }
.btn--primary { box-shadow: 0 6px 16px rgba(111,175,216,.35); }
.btn--primary:hover { box-shadow: 0 10px 24px rgba(111,175,216,.46); transform: translateY(-1px); }
.btn--dark:hover, .btn--ghost-sky:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* ---- input focus polish (keeps the visible outline for a11y) ---- */
.field input:focus, .field textarea:focus, .form input:focus, .form textarea:focus {
  box-shadow: 0 0 0 3px rgba(111,175,216,.20);
}

/* ---- homepage funnel: verify row + signs checklist ---- */
.verify-row { display: flex; flex-direction: column; gap: 12px; }
.verify-item { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--silver); border-radius: var(--r); padding: 15px 18px; background: #fff; text-decoration: none; box-shadow: var(--shadow-sm); }
a.verify-item:hover { border-color: var(--sky); box-shadow: var(--shadow-md); }
.verify-item .ic { color: var(--sky); flex: none; margin-top: 2px; }
.verify-item b { display: block; font-family: var(--font-head); font-weight: 700; font-size: 15.5px; color: var(--navy); }
.verify-item span { display: block; font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 3px; }
.sign-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
.sign-list li { position: relative; padding-left: 30px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.sign-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border: 2px solid var(--sky); border-radius: 6px; }
@media (max-width: 767px) { .sign-list { grid-template-columns: 1fr; } }

/* ============================================================================
   Homepage rebuild (2026) — 5-card service grid, factor grid, unified signs
   section, slim CTA band, button-based FAQ accordion.
   ========================================================================== */

/* Section 3 — five service cards: 3 centered on row one, 2 centered on row two */
.svc-grid5 { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.svc-grid5 > .svc-card { flex: 0 1 calc((100% - 44px) / 3); max-width: calc((100% - 44px) / 3); min-height: 0; }

/* Slim CTA banner beneath the cards — deliberately unlike a service card */
.svc-cta-band { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 22px 40px; flex-wrap: wrap; background: var(--sky-tint); border: 1px solid var(--sky-tint-bd); border-radius: var(--r-lg); padding: 26px 34px; box-shadow: var(--shadow-sm); }
.svc-cta-band .txt { max-width: 660px; }
.svc-cta-band h3 { font-family: var(--font-head); font-weight: 800; font-size: 20px; color: var(--navy); margin: 0 0 6px; letter-spacing: -.01em; }
.svc-cta-band p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.svc-cta-band .btn { flex: none; }

/* Section 5 — installation-quality 2x2 information blocks (no large images) */
.factor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.factor { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--silver); border-radius: var(--r); padding: 24px 24px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease; }
.factor:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.factor-ic { width: 46px; height: 46px; flex: none; border: 1px solid var(--silver); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--link); background: #fff; }
.factor-ic .ic { width: 24px; height: 24px; }
.factor h3 { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--navy); margin: 0 0 6px; }
.factor p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--muted); }

/* Section 4 — unified signs section: image column + single content column.
   Grid areas give the exact mobile order: heading -> image -> list -> closing. */
.signs-grid { display: grid; grid-template-columns: 0.74fr 1fr; gap: 0 48px; grid-template-areas: "media head" "media list" "media close"; align-items: start; }
.signs-media { grid-area: media; align-self: start; }
.signs-head { grid-area: head; }
.signs-list { grid-area: list; margin: 8px 0 0; }
.signs-close { grid-area: close; margin: 22px 0 0; max-width: 640px; }

/* Section 8 — accessible button-based FAQ accordion */
.faq-ac { border-top: 1px solid var(--silver); }
.faq-item { border-bottom: 1px solid var(--silver); }
.faq-q { margin: 0; }
.faq-btn { width: 100%; display: block; text-align: left; background: none; border: 0; cursor: pointer; font-family: var(--font-head); font-weight: 700; font-size: 17.5px; line-height: 1.35; color: var(--navy); padding: 22px 44px 22px 0; position: relative; }
.faq-btn:hover { color: var(--eyebrow); }
.faq-btn .chev { position: absolute; right: 6px; top: 28px; width: 11px; height: 11px; border-right: 2px solid var(--sky); border-bottom: 2px solid var(--sky); transform: rotate(45deg); transition: transform .18s ease; }
.faq-btn[aria-expanded="true"] .chev { transform: rotate(-135deg); }
.faq-a { animation: faq-in .18s ease; }
.faq-a p { margin: 0; padding: 0 44px 24px 0; font-size: 16px; line-height: 1.7; color: var(--ink-2); max-width: 680px; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .faq-a { animation: none; } }

/* Homepage rebuild — responsive */
@media (max-width: 1023px) {
  .svc-grid5 > .svc-card { flex-basis: calc((100% - 22px) / 2); max-width: calc((100% - 22px) / 2); }
}
@media (max-width: 900px) {
  .signs-grid { grid-template-columns: 1fr; gap: 0; grid-template-areas: "head" "media" "list" "close"; }
  .signs-media { margin: 8px 0 4px; }
  .signs-list { margin-top: 4px; }
}
@media (max-width: 767px) {
  .svc-grid5 > .svc-card { flex-basis: 100%; max-width: 100%; }
  .factor-grid { grid-template-columns: 1fr; }
  .svc-cta-band { padding: 22px 20px; }
  .svc-cta-band .btn { width: 100%; }
  .faq-btn { font-size: 16.5px; padding-right: 38px; }
}

/* Service-page subsection cards (faithful rewrite layout) */
.topic-grid { display: grid; gap: 22px; margin-top: 8px; }
.topic-card { background: #fff; border: 1px solid var(--silver); border-radius: var(--r); padding: 26px 26px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .22s ease; }
.bg-mist .topic-card, .bg-sky .topic-card { background: #fff; }
.topic-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.topic-card h3 { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--navy); margin: 0 0 9px; }
.topic-card p { margin: 0; font-size: 15px; line-height: 1.66; color: var(--muted); }
.topic-note { margin: 24px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted-2); max-width: 760px; }
@media (max-width: 767px) { .topic-grid { grid-template-columns: 1fr !important; } }

/* ============================================================================
   2026 visual refinement layer — premium polish on the existing system.
   Brand palette unchanged; adds hero pill eyebrow, a layered hero image panel,
   check-mark signal lists, a takeaway callout, and local callout chips.
   ========================================================================== */

/* Hero: keep it light, add a touch more depth + a pill eyebrow */
.hero { background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FB 100%); }
.hero .hero-copy > .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--sky-tint); color: var(--eyebrow);
  border: 1px solid var(--sky-tint-bd); border-radius: var(--r-pill);
  padding: 7px 14px 7px 12px; margin: 0 0 18px;
}
.hero .hero-copy > .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); flex: none; }
/* Layered sky panel behind the framed hero image (was a thin border) */
.hero-figure::before { background: var(--sky-tint); border-color: var(--sky-tint-bd); }

/* Check-mark signal list (replaces the empty square marker) */
.sign-list li { padding-left: 32px; }
.sign-list li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px;
  border: 0; border-radius: 50%; background-color: var(--sky);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 12px 12px;
}

/* Takeaway callout — highlights one key existing sentence, not new content */
.callout { border-left: 4px solid var(--sky); background: var(--sky-tint); border-radius: 0 var(--r) var(--r) 0; padding: 16px 20px; margin: 0 0 14px; max-width: 560px; }
.callout p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--navy); font-weight: 600; }

/* Local-planning callout chips (summarize existing points) */
.callout-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.callout-chips .chip2 { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--sky-tint-bd); border-radius: var(--r-pill); padding: 9px 15px; font-family: var(--font-head); font-weight: 600; font-size: 13.5px; color: var(--navy); box-shadow: var(--shadow-sm); }
.callout-chips .chip2 .ic { color: var(--sky); width: 17px; height: 17px; flex: none; }

/* AEO answer card — the extractable answer-first block */
.answer-card { border: 1px solid var(--sky-tint-bd); background: var(--sky-tint); border-left: 4px solid var(--sky); border-radius: var(--r); padding: 20px 24px; margin: 0 0 8px; max-width: 820px; }
.answer-card-lbl { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 8px; }
.answer-card-lbl .ic { color: var(--sky); }
.answer-card p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--navy); }

/* GEO / AI-retrieval summary line */
.geo-summary { font-size: 15px; line-height: 1.7; color: var(--muted); max-width: 820px; border-top: 1px solid var(--hair); padding-top: 16px; margin: 22px 0 0; }

/* Checklist / decision card (information-gain asset) */
.check-card { border: 1px solid var(--silver); border-radius: var(--r); background: #fff; padding: 24px 26px; box-shadow: var(--shadow-sm); max-width: 860px; }
.bg-mist .check-card, .bg-sky .check-card { background: #fff; }
.check-card-head { display: flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: .04em; color: var(--navy); margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
.check-card-head .ic { color: var(--sky); }
.check-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.check-rows li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.check-rows .cbox { width: 22px; height: 22px; flex: none; border-radius: 6px; background: var(--sky-tint); border: 1px solid var(--sky-tint-bd); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.check-rows .cbox .ic { color: var(--link); width: 13px; height: 13px; }
.check-rows li b { color: var(--navy); }

/* Form select — match inputs */
.field select { border: 1px solid var(--silver); padding: 14px 15px; font-size: 15.5px; font-family: inherit; color: var(--navy); background: var(--white); width: 100%; min-width: 0; box-sizing: border-box; border-radius: var(--r-sm); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23243247' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 40px; }
.field select:focus { outline: 2px solid var(--sky); outline-offset: 1px; border-color: var(--sky); }
@media (max-width: 767px) { .field select { font-size: 16px; } }

/* Simple help link below the service grid (kept separate from the cards) */
.svc-help { margin: 34px auto 0; padding-top: 24px; border-top: 1px solid var(--silver); max-width: 640px; text-align: center; font-size: 16px; color: var(--ink-2); }
.svc-help a { font-family: var(--font-head); font-weight: 700; color: var(--link); text-decoration: none; border-bottom: 2px solid var(--sky); padding-bottom: 2px; }
.svc-help a:hover { color: var(--navy); }

/* Tallahassee condition → decision cards (2x2 beside an image) */
.cond-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cond-card { background: #fff; border: 1px solid var(--silver); border-radius: var(--r); padding: 20px 20px; box-shadow: var(--shadow-sm); }
.cond-card .ic { color: var(--sky); width: 24px; height: 24px; margin-bottom: 10px; }
.cond-card b { display: block; font-family: var(--font-head); font-weight: 700; font-size: 15.5px; color: var(--navy); margin-bottom: 5px; }
.cond-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
@media (max-width: 767px) { .cond-grid { grid-template-columns: 1fr; } }

/* 3-up options decision selector (reuses .guide-card) */
.opt3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .opt3 { grid-template-columns: 1fr; } }

/* Compact trust strip (below hero) with the verified license */
.trust-bar { background: #fff; border-bottom: 1px solid var(--hair); }
.trust-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 26px; padding: 16px var(--gutter); }
.trust-bar .ti { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--navy); }
.trust-bar .ti .ic { color: var(--sky); width: 18px; height: 18px; flex: none; }
.trust-bar .ti.lic { background: var(--sky-tint); border: 1px solid var(--sky-tint-bd); border-radius: var(--r-pill); padding: 7px 15px; }
.trust-bar .ti.lic b { color: var(--eyebrow); font-weight: 800; }
@media (max-width: 767px) { .trust-bar .wrap { justify-content: flex-start; gap: 11px 16px; padding: 14px 18px; } .trust-bar .ti { font-size: 13px; } }

/* Repair-vs-replace two-path cards */
.path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.path-card { display: flex; flex-direction: column; border: 1px solid var(--silver); border-radius: var(--r-lg); background: #fff; padding: 30px 30px; box-shadow: var(--shadow-sm); }
.path-card.repair { border-top: 4px solid var(--sky); }
.path-card.replace { border-top: 4px solid var(--navy); }
.path-card h3 { display: flex; align-items: center; gap: 11px; font-family: var(--font-head); font-weight: 800; font-size: 21px; color: var(--navy); margin: 0 0 6px; }
.path-card h3 .ic { color: var(--sky); }
.path-card .path-lead { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; }
.path-card ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 11px; }
.path-card li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.path-card li .ic { color: var(--sky); flex: none; margin-top: 2px; width: 17px; height: 17px; }
.path-card .btn { margin-top: auto; width: 100%; }
@media (max-width: 767px) { .path-grid { grid-template-columns: 1fr; } }

/* License credential panel (proof) */
.cred-panel { display: flex; align-items: center; gap: 18px; border: 1px solid var(--sky-tint-bd); background: var(--sky-tint); border-radius: var(--r-lg); padding: 22px 26px; flex-wrap: wrap; }
.cred-panel .cred-ic { width: 52px; height: 52px; border-radius: 12px; background: #fff; border: 1px solid var(--sky-tint-bd); display: flex; align-items: center; justify-content: center; color: var(--link); flex: none; }
.cred-panel .lbl { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--eyebrow); font-weight: 700; margin-bottom: 2px; }
.cred-panel .num { font-family: var(--font-head); font-weight: 800; font-size: 22px; color: var(--navy); letter-spacing: .02em; }
.cred-panel .cred-verify { margin-left: auto; font-family: var(--font-head); font-weight: 700; font-size: 13.5px; color: var(--link); text-decoration: none; }
.cred-panel .cred-verify:hover { color: var(--navy); }
@media (max-width: 767px) { .cred-panel .cred-verify { margin-left: 0; width: 100%; } }

/* Split footer credential/service-area box */
.footer-box--split { display: flex; gap: 26px; }
.footer-box--split .val { font-family: var(--font-head); font-weight: 700; }

/* Process stage list — numbered vertical timeline */
.stage-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; max-width: 860px; }
.stage { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; background: #fff; border: 1px solid var(--silver); border-radius: var(--r); padding: 18px 22px; box-shadow: var(--shadow-sm); }
.stage-n { width: 42px; height: 42px; border: 2px solid var(--sky); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--navy); background: var(--sky-tint); }
.stage b { font-family: var(--font-head); font-weight: 700; font-size: 16.5px; color: var(--navy); display: block; margin-bottom: 4px; }
.stage p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* Guides hub */
.guide-group { margin-top: 44px; }
.guide-group-h { font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--eyebrow); margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.guide-card { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--silver); border-radius: var(--r); background: #fff; padding: 24px 26px; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease; }
.guide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--sky); }
.guide-card b { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--navy); }
.guide-card span { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.guide-card .go { margin-top: auto; display: flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--link); padding-top: 6px; }
.guide-card .go .ic { transition: transform .16s; }
.guide-card:hover .go .ic { transform: translateX(3px); }
@media (max-width: 767px) { .guide-grid { grid-template-columns: 1fr; } .stage { grid-template-columns: 40px 1fr; gap: 12px; padding: 16px 16px; } }

/* Cost Factors — price-driver bullet list */
.cost-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 15px; max-width: 840px; }
.cost-list li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.cost-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 9px; height: 9px; background: var(--sky); border-radius: 3px; }
.cost-list li b { color: var(--navy); font-family: var(--font-head); font-weight: 700; }

/* ---- entrance motion (added by main.js only, so no-JS shows everything) ---- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.reveal.reveal-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.reveal-in { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================================
   Site-wide redesign layer: tablet spacing, article (guide) template,
   guide-index cards, compact service heroes.
   ========================================================================== */

/* Tablet gutters + section rhythm */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --gutter: 24px; }
  .section { padding: 68px 0; }
  .section--tight { padding: 52px 0; }
}

/* ---- Article template (guide pages) ---- */
.article-page .wrap { max-width: 860px; }
.article-page .section { padding: 56px 0; }
.article-page .split,
.article-page .split--top { grid-template-columns: 1fr !important; gap: 28px; }
.article-page .prose,
.article-page .sec-head { max-width: 780px; }
.article-page .sec-head { margin-bottom: 20px; }
.article-page .info-list,
.article-page .check-card,
.article-page .cost-list,
.article-page .stage-list { max-width: 780px; }
.article-page .rel-grid { grid-template-columns: repeat(3, 1fr); }
.article-page .estimate-sec .wrap,
.article-page .rel-grid { max-width: 860px; }
.article-page .faq-ac { max-width: 780px; }

/* Compact article hero */
.article-hero { background: var(--mist); border-bottom: 1px solid var(--silver); }
.article-hero .wrap { padding-top: 44px; padding-bottom: 44px; max-width: 860px; }
.article-hero .eyebrow { margin-bottom: 12px; }
.article-hero h1 { margin: 0 0 16px; }
.article-hero .lead { margin: 0 0 22px; max-width: 780px; }
.article-hero .article-fig { margin-top: 26px; }
.article-hero .article-fig .ph { border-radius: var(--r-lg); }

/* ---- Guides index cards get imagery ---- */
.guide-grid { grid-template-columns: repeat(3, 1fr); }
.guide-card { padding: 0; overflow: hidden; gap: 0; }
.guide-card .gc-media { display: block; border-bottom: 1px solid var(--silver); }
.guide-card .gc-media .ph { border-radius: 0; border: 0; }
.guide-card .gc-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
@media (max-width: 1023px) { .guide-grid, .article-page .rel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .guide-grid, .article-page .rel-grid { grid-template-columns: 1fr; } }

/* Compact service hero (no trust row) */
.hero--svc .hero-grid { padding: 52px 0 56px; }
.hero--svc .hero-figure:has(> .ph) { height: 400px; }
@media (max-width: 900px) { .hero--svc .hero-figure:has(> .ph) { height: 320px; } }

/* ============================================================================
   Homepage CTA system: one shared pair of buttons (Get a Quote / Give us a Call)
   Reuses existing brand variables: --link (brand blue) and --navy (dark).
   ========================================================================== */
.cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; }
.cta-row .btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-head); font-weight: 700; font-size: 16px; padding: 14px 26px; border-radius: 9px; text-align: center; min-width: 186px; }
.btn--quote { background: var(--link); color: #fff; border: 1px solid var(--link); box-shadow: 0 6px 16px rgba(47,123,168,.28); }
.btn--quote:hover { background: #24638A; border-color: #24638A; color: #fff; box-shadow: 0 10px 24px rgba(47,123,168,.38); transform: translateY(-1px); }
.btn--call { background: var(--navy); color: #fff; border: 1px solid var(--navy); }
.btn--call:hover { background: var(--navy-strip); border-color: var(--navy-strip); color: #fff; transform: translateY(-1px); }
.btn--quote:focus-visible, .btn--call:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
/* On the navy estimate section the dark call button needs a visible edge */
.bg-navy .btn--call { border-color: var(--navy-border); }
.bg-navy .btn--call:hover { border-color: var(--sky); }
/* Centered CTA groups under centered section heads */
.cta-row--center { justify-content: center; }
@media (max-width: 480px) {
  .cta-row { gap: 12px; }
  .cta-row .btn { flex: 1 1 100%; min-width: 0; }
}

/* Common-problems CTA sits below the conclusion, inside the signs grid */
.signs-grid { grid-template-areas: "media head" "media list" "media close" "media cta"; }
.signs-cta { grid-area: cta; margin-top: 4px; }
@media (max-width: 900px) {
  .signs-grid { grid-template-areas: "head" "media" "list" "close" "cta"; }
}

/* ============================================================================
   FAQ + final estimate: image-left / content-right layouts (design feedback)
   ========================================================================== */
/* FAQ: image left, accordion right. Heading sits above the grid. */
.faq-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 48px; align-items: start; }
.faq-figure { align-self: start; position: sticky; top: 96px; }
.faq-figure > .ph { border-radius: var(--r-lg); }
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; gap: 26px; }
  .faq-figure { position: static; }
}

/* Final estimate: image left, white form card right */
.estimate-grid { grid-template-columns: .85fr 1.15fr; align-items: stretch; }
.estimate-figure { display: flex; }
.estimate-figure > .ph { border-radius: var(--r-lg); width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; min-height: 420px; }
.estimate-sec .form { grid-column: auto; }
.estimate-sec .form-success { grid-column: 2; }
@media (max-width: 1023px) {
  .estimate-grid { grid-template-columns: 1fr !important; }
  .estimate-figure > .ph { min-height: 260px; }
  .estimate-sec .form-success { grid-column: auto; }
}

/* Enlarged form card heading */
.form-title--xl { font-size: clamp(28px, 3.1vw, 42px); line-height: 1.12; letter-spacing: -.02em; margin-bottom: 6px; }

/* Secondary call button inside the form card */
.btn--call-form { width: 100%; margin-top: -4px; }

/* ==========================================================================
   About page — three-card service overview and approach blocks
   ========================================================================== */

.about-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.about-cards > .svc-card { min-height: 0; }
.about-cards .svc-card p { font-size: 16px; line-height: 1.65; }

/* Third card is not a link (it holds three option links), so it stays static */
.svc-card--static { cursor: default; }
.svc-card--static:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--silver); background: #fff; }
.svc-card--static:hover .svc-thumb .ph { transform: none; }

.opt-links { margin-top: auto; display: flex; flex-direction: column; gap: 9px; padding-top: 2px; }
.opt-links a { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--link); text-decoration: none; }
.opt-links a:hover { color: var(--navy); }
.opt-links .ic { width: 15px; height: 15px; transition: transform .16s; }
.opt-links a:hover .ic { transform: translateX(3px); }

/* Approach blocks keep body copy at readable size */
.about-steps .pstep p { font-size: 16px; line-height: 1.65; }

@media (max-width: 900px) {
  .about-cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Service-page funnel components (compact blocks, stages, slim CTA strip)
   ========================================================================== */

/* Compact information blocks — a thin rule, a heading and short copy.
   Intentionally not cards: no box, no shadow, no pill label. */
.blk-grid { display: grid; gap: 30px 40px; }
.blk-grid--2 { grid-template-columns: repeat(2, 1fr); }
.blk-grid--3 { grid-template-columns: repeat(3, 1fr); }
.blk-grid--4 { grid-template-columns: repeat(4, 1fr); }
.blk { border-top: 2px solid var(--sky-tint-bd); padding-top: 16px; }
.blk h3 { font-family: var(--font-head); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--navy); margin: 0 0 9px; }
.blk p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.blk-note { margin: 30px 0 0; font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: 760px; }

/* Tighter band for the slim mid-page CTA strip */
.section--tight { padding-top: 40px; padding-bottom: 40px; }
.svc-cta-band .cta-row { margin-top: 0; flex: none; }

/* Service pages keep body copy at a readable size in shared components */
.svc-page .check-rows li { font-size: 16px; line-height: 1.65; }
.svc-page .rel-body span { font-size: 16px; line-height: 1.6; }
.svc-page .info-list .row p { font-size: 16px; line-height: 1.65; }
.svc-page .stage-row .pstep p { font-size: 16px; line-height: 1.65; }
.svc-page .sec-head p { font-size: 17px; }

/* Supporting line inside the estimate form card */
.form-sub { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: var(--muted); }

@media (max-width: 1023px) {
  .blk-grid--3, .blk-grid--4 { grid-template-columns: repeat(2, 1fr); }
  /* four stages read as two-by-two on tablet rather than a single column */
  .svc-page .stage-row { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 767px) {
  .blk-grid--2, .blk-grid--3, .blk-grid--4 { grid-template-columns: 1fr; }
  .svc-page .stage-row { grid-template-columns: 1fr !important; }
  .svc-cta-band .cta-row { width: 100%; }
  .svc-cta-band .cta-row .btn { flex: 1 1 100%; }
}
.svc-page .svc-cta-band p { font-size: 16px; }

/* ==========================================================================
   Installation & Replacement page — service-fit grid, option blocks,
   quote-factor cards. Each is a distinct treatment from its neighbours.
   ========================================================================== */

/* --- Service fit: image beside a two-by-two issue grid --- */
.fit-layout {
  display: grid;
  grid-template-columns: 44% 1fr;
  column-gap: 36px;
  grid-template-areas:
    "fig head"
    "fig intro"
    "fig items";
  align-items: start;
}
.fit-figure { grid-area: fig; align-self: center; }
/* 4:3, matching every other image on the page */
.fit-figure > .ph { width: 100%; aspect-ratio: 4 / 3; }
.fit-head { grid-area: head; }
.fit-intro { grid-area: intro; margin: 14px 0 26px; max-width: 620px; }
.fit-grid { grid-area: items; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 18px; }

/* White card, hairline border, very subtle shadow — matches the quote factors */
.fit-item { background: #fff; border: 1px solid var(--silver); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 22px 22px 24px; display: flex; flex-direction: column; }
.fit-item .ic { color: var(--link); width: 22px; height: 22px; display: block; margin-bottom: 12px; }
.fit-item h3 { font-family: var(--font-head); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--navy); margin: 0 0 8px; }
.fit-item p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* --- Installation options: two icon blocks, no table, no pros and cons --- */
.opt-blocks { display: flex; flex-direction: column; gap: 22px; max-width: 580px; }
.opt-block { display: flex; gap: 16px; align-items: flex-start; }
.opt-block > .ic { color: var(--link); flex: none; width: 26px; height: 26px; margin-top: 3px; }
.opt-block h3 { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--navy); margin: 0 0 8px; }
.opt-block p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-2); }

/* --- Quote factors: heading + two-by-two cards beside a supporting image --- */
.quote-layout {
  display: grid;
  grid-template-columns: 58% 1fr;
  column-gap: 32px;
  grid-template-areas:
    "head fig"
    "intro fig"
    "cards fig"
    "close fig";
  align-items: start;
}
.quote-head { grid-area: head; }
.quote-intro { grid-area: intro; margin: 14px 0 26px; max-width: 640px; }
.quote-figure { grid-area: fig; align-self: center; }
.quote-figure > .ph { width: 100%; aspect-ratio: 4 / 3; }
/* auto-rows 1fr keeps all four factor cards the same height, not just per row */
.factor-grid { grid-area: cards; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 18px; align-items: stretch; }
.quote-close { grid-area: close; margin: 24px 0 0; max-width: 640px; }

.factor-card { background: #fff; border: 1px solid var(--silver); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 22px 22px 24px; display: flex; flex-direction: column; }
.factor-card .ic { color: var(--link); width: 22px; height: 22px; display: block; margin-bottom: 12px; }
.factor-card h3 { font-family: var(--font-head); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--navy); margin: 0 0 8px; }
.factor-card p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* Stacks at 1100 rather than 1023: below that the copy column is so tall that a
   side-by-side image crops to a narrow strip. */
@media (max-width: 1100px) {
  .fit-layout, .quote-layout { grid-template-columns: 1fr; column-gap: 0; }
  /* stacked order: heading, intro, image, items, closing */
  .fit-layout { grid-template-areas: "head" "intro" "fig" "items"; }
  .quote-layout { grid-template-areas: "head" "intro" "fig" "cards" "close"; }
  .fit-intro, .quote-intro { margin-bottom: 26px; }
  .fit-figure, .quote-figure { margin-bottom: 26px; display: block; }
}
@media (max-width: 767px) {
  .fit-grid, .factor-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Installation & Replacement page — tightened section rhythm and alignment.
   Scoped to .install-page so other service pages keep their current spacing.
   ========================================================================== */

.install-page .section, .energy-page .section, .vinyl-page .section, .impact-page .section, .repair-page .section { padding: 76px 0; }
.install-page .section--tight, .energy-page .section--tight, .vinyl-page .section--tight, .impact-page .section--tight, .repair-page .section--tight { padding: 44px 0; }
/* the CTA strip is the only thing in its band, so it needs no extra offset */
.install-page .section--tight .svc-cta-band,
.energy-page .section--tight .svc-cta-band { margin-top: 0; }

/* No >=1440 override needed: the base rule above already outranks the global
   96px large-desktop rule, and adding one here would undo .section--tight. */
@media (min-width: 768px) and (max-width: 1023px) {
  .install-page .section, .energy-page .section, .vinyl-page .section, .impact-page .section, .repair-page .section { padding: 60px 0; }
  .install-page .section--tight, .energy-page .section--tight, .vinyl-page .section--tight, .impact-page .section--tight, .repair-page .section--tight { padding: 38px 0; }
}
@media (max-width: 767px) {
  .install-page .section, .energy-page .section, .vinyl-page .section, .impact-page .section, .repair-page .section { padding: 48px 0; }
  .install-page .section--tight, .energy-page .section--tight, .vinyl-page .section--tight, .impact-page .section--tight, .repair-page .section--tight { padding: 32px 0; }
}

/* Installation options: image tracks the top of the copy, no gap under block 2 */
.opt-layout { align-items: start; }
.opt-figure { align-self: start; }
.opt-blocks { gap: 24px; }
.opt-block { align-items: flex-start; }

/* Energy page — the two performance-rating blocks (icon beside title + copy).
   Bordered panels stacked vertically, so they read differently from the
   two-by-two card grids in the sections above and below. */
.rate-blocks { display: grid; grid-auto-rows: 1fr; gap: 18px; max-width: 580px; }
.rate-block { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--silver); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 22px 22px 24px; }
.rate-block > .ic { color: var(--link); flex: none; width: 24px; height: 24px; margin-top: 2px; }
.rate-block h3 { font-family: var(--font-head); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--navy); margin: 0 0 8px; }
.rate-block p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-2); }

/* ==========================================================================
   Energy page refinements — the service-fit cards and the recommendation
   blocks deliberately use different treatments so the page does not read as
   the same card repeated down the page.
   ========================================================================== */

/* Service fit: compact cards, circular icon badge, tighter grid */
.energy-page .fit-grid { gap: 14px; }
.energy-page .fit-item { padding: 18px 18px 20px; }
.energy-page .fit-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--sky-tint); border: 1px solid var(--sky-tint-bd); display: flex; align-items: center; justify-content: center; color: var(--link); margin-bottom: 12px; }
.energy-page .fit-ic .ic { width: 18px; height: 18px; display: block; margin: 0; }
.energy-page .fit-item h3 { font-size: 16.5px; margin: 0 0 7px; }
.energy-page .fit-item p { font-size: 16px; line-height: 1.55; }

/* Recommendation factors: flat blocks with a left accent line, no shadow */
.energy-page .factor-grid { gap: 18px 24px; }
.fac-block { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--silver); border-left: 3px solid var(--sky); border-radius: 12px; padding: 18px 20px 20px; box-shadow: none; }
.fac-block > .ic { color: var(--link); flex: none; width: 20px; height: 20px; margin-top: 3px; }
.fac-block h3 { font-family: var(--font-head); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--navy); margin: 0 0 7px; }
.fac-block p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* Process: larger step titles and more room between number, title and copy */
.energy-page .stage-row .pstep h3 { font-size: 19px; margin: 20px 0 10px; }
.energy-page .stage-row .pstep p { font-size: 16.5px; line-height: 1.65; }

/* Ratings: two equal blocks sitting closer together beside the image */
.energy-page .rate-blocks { gap: 16px; }

/* Final form heading scale */
@media (min-width: 768px) and (max-width: 1023px) {
  .energy-page .form-title--xl { font-size: 34px; }
}
@media (max-width: 767px) {
  .energy-page .form-title--xl { font-size: 30px; }
}

/* Ratings section: the image matches the copy-column height so no blank band
   is left beside the two rating blocks. Applies only while the split is
   two-column (it stacks at 767px). */
@media (min-width: 1101px) {
  .energy-page .opt-layout { align-items: stretch; }
  .energy-page .opt-figure { align-self: stretch; display: flex; }
  .energy-page .opt-figure > .ph { width: 100%; height: 100%; aspect-ratio: auto; }
}
/* Below that the copy column is tall enough that a side-by-side image would
   crop to a narrow strip, so the section stacks and the image keeps 4:3. */
@media (max-width: 1100px) {
  .energy-page .opt-layout { grid-template-columns: 1fr !important; gap: 28px; }
}

/* Desktop form heading stays in the 38-44px band (the shared clamp drops to
   ~32px at 1024, which is below target for this page). */
@media (min-width: 1024px) {
  .energy-page .form-title--xl { font-size: clamp(38px, 3.1vw, 42px); }
}

/* ==========================================================================
   Vinyl Windows page — numbered specification rows and the ratings-style
   split. Scoped to .vinyl-page so no other route is affected.
   ========================================================================== */

/* Section 3: stacked spec rows separated by a hairline, no card shadow */
.vinyl-page .spec-rows { display: grid; gap: 0; max-width: 580px; border-top: 1px solid var(--silver); }
.vinyl-page .spec-row { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--silver); }
.vinyl-page .spec-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--sky-tint); border: 1px solid var(--sky-tint-bd); color: var(--link); font-family: var(--font-head); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.vinyl-page .spec-row h3 { font-family: var(--font-head); font-weight: 700; font-size: 17.5px; line-height: 1.3; color: var(--navy); margin: 0 0 7px; }
.vinyl-page .spec-row p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* Section 3 image matches the copy-column height above the stacking point */
@media (min-width: 1101px) {
  .vinyl-page .opt-layout { align-items: stretch; }
  .vinyl-page .opt-figure { align-self: stretch; display: flex; }
  .vinyl-page .opt-figure > .ph { width: 100%; height: 100%; aspect-ratio: auto; }
}
@media (max-width: 1100px) {
  .vinyl-page .opt-layout { grid-template-columns: 1fr !important; gap: 28px; }
}

/* Three-step process reads as three equal columns down to tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .vinyl-page .stage-row { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ==========================================================================
   Vinyl Windows page — final refinement. All rules scoped to .vinyl-page.
   ========================================================================== */

/* Section 4: flat information rows on one continuous accent line.
   Deliberately not the card grid used in section 2. */
.vinyl-page .factor-grid.qrows {
  display: block;
  border-left: 3px solid var(--sky-tint-bd);
  padding-left: 22px;
  gap: 0;
}
.vinyl-page .qrow { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--silver); box-shadow: none; background: none; }
.vinyl-page .qrow:first-child { padding-top: 0; }
.vinyl-page .qrow:last-child { border-bottom: 0; padding-bottom: 0; }
.vinyl-page .qrow > .ic { color: var(--link); flex: none; width: 20px; height: 20px; margin-top: 3px; }
.vinyl-page .qrow h3 { font-family: var(--font-head); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--navy); margin: 0 0 7px; }
.vinyl-page .qrow p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* Section 2: cards size to their content instead of a forced uniform row */
.vinyl-page .fit-grid { grid-auto-rows: auto; }
.vinyl-page .fit-item .ic { width: 20px; height: 20px; }

/* Process: every marker uses the same light-blue fill with navy numerals */
.vinyl-page .stage-row .pnum,
.vinyl-page .stage-row .pstep:last-child .pnum {
  background: var(--sky-tint);
  border: 2px solid var(--sky);
  color: var(--navy);
}
.vinyl-page .stage-row .pstep h3 { font-size: 19px; margin: 20px 0 10px; }
.vinyl-page .stage-row .pstep p { font-size: 16.5px; line-height: 1.65; }

/* CTA reads as a transition rather than a full standalone band */
.vinyl-page .section--tight { padding: 38px 0; }
@media (max-width: 767px) { .vinyl-page .section--tight { padding: 28px 0; } }

/* Final form heading scale */
@media (min-width: 1024px) { .vinyl-page .form-title--xl { font-size: clamp(38px, 3.1vw, 42px); } }
@media (min-width: 768px) and (max-width: 1023px) { .vinyl-page .form-title--xl { font-size: 34px; } }
@media (max-width: 767px) { .vinyl-page .form-title--xl { font-size: 30px; } }

/* ==========================================================================
   Impact Windows page. All rules scoped to .impact-page.
   ========================================================================== */

/* Section 3: three numbered assembly rows separated by hairlines */
.impact-page .asm-rows { display: grid; gap: 0; max-width: 580px; border-top: 1px solid var(--silver); }
.impact-page .asm-row { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--silver); }
.impact-page .asm-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--sky-tint); border: 1px solid var(--sky-tint-bd); color: var(--link); font-family: var(--font-head); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.impact-page .asm-row h3 { font-family: var(--font-head); font-weight: 700; font-size: 17.5px; line-height: 1.3; color: var(--navy); margin: 0 0 7px; }
.impact-page .asm-row p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* Section 3 image matches the copy-column height above the stacking point */
@media (min-width: 1101px) {
  .impact-page .opt-layout { align-items: stretch; }
  .impact-page .opt-figure { align-self: stretch; display: flex; }
  .impact-page .opt-figure > .ph { width: 100%; height: 100%; aspect-ratio: auto; }
}
@media (max-width: 1100px) {
  .impact-page .opt-layout { grid-template-columns: 1fr !important; gap: 28px; }
}

/* Section 4: flat rows on one continuous accent line, not the card grid above */
.impact-page .factor-grid.qrows { display: block; border-left: 3px solid var(--sky-tint-bd); padding-left: 22px; gap: 0; }
.impact-page .qrow { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--silver); box-shadow: none; background: none; }
.impact-page .qrow:first-child { padding-top: 0; }
.impact-page .qrow:last-child { border-bottom: 0; padding-bottom: 0; }
.impact-page .qrow > .ic { color: var(--link); flex: none; width: 20px; height: 20px; margin-top: 3px; }
.impact-page .qrow h3 { font-family: var(--font-head); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--navy); margin: 0 0 7px; }
.impact-page .qrow p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* Service-fit cards size to content rather than a forced uniform row */
.impact-page .fit-grid { grid-auto-rows: auto; }

/* Every process marker uses the same light-blue fill with navy numerals */
.impact-page .stage-row .pnum,
.impact-page .stage-row .pstep:last-child .pnum {
  background: var(--sky-tint);
  border: 2px solid var(--sky);
  color: var(--navy);
}
.impact-page .stage-row .pstep h3 { font-size: 19px; margin: 20px 0 10px; }
.impact-page .stage-row .pstep p { font-size: 16.5px; line-height: 1.65; }

/* Three steps stay three-across on tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .impact-page .stage-row { grid-template-columns: repeat(3, 1fr) !important; }
}

/* CTA reads as a transition band */
.impact-page .section--tight { padding: 38px 0; }
@media (max-width: 767px) { .impact-page .section--tight { padding: 28px 0; } }

/* Final form heading scale */
@media (min-width: 1024px) { .impact-page .form-title--xl { font-size: clamp(38px, 3.1vw, 42px); } }
@media (min-width: 768px) and (max-width: 1023px) { .impact-page .form-title--xl { font-size: 34px; } }
@media (max-width: 767px) { .impact-page .form-title--xl { font-size: 30px; } }

/* ==========================================================================
   Window Repair page. All rules scoped to .repair-page.
   ========================================================================== */

/* Section 3: component rows with a small icon and a hairline divider */
.repair-page .cmp-rows { display: grid; gap: 0; max-width: 580px; border-top: 1px solid var(--silver); }
.repair-page .cmp-row { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--silver); }
.repair-page .cmp-row > .ic { color: var(--link); flex: none; width: 20px; height: 20px; margin-top: 3px; }
.repair-page .cmp-row h3 { font-family: var(--font-head); font-weight: 700; font-size: 17.5px; line-height: 1.3; color: var(--navy); margin: 0 0 7px; }
.repair-page .cmp-row p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* Section 3 image matches the copy-column height above the stacking point */
@media (min-width: 1101px) {
  .repair-page .opt-layout { align-items: stretch; }
  .repair-page .opt-figure { align-self: stretch; display: flex; }
  .repair-page .opt-figure > .ph { width: 100%; height: 100%; aspect-ratio: auto; }
}
@media (max-width: 1100px) {
  .repair-page .opt-layout { grid-template-columns: 1fr !important; gap: 28px; }
}

/* Section 4: flat rows on one continuous accent line, not the card grid above */
.repair-page .factor-grid.qrows { display: block; border-left: 3px solid var(--sky-tint-bd); padding-left: 22px; gap: 0; }
.repair-page .qrow { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--silver); box-shadow: none; background: none; }
.repair-page .qrow:first-child { padding-top: 0; }
.repair-page .qrow:last-child { border-bottom: 0; padding-bottom: 0; }
.repair-page .qrow > .ic { color: var(--link); flex: none; width: 20px; height: 20px; margin-top: 3px; }
.repair-page .qrow h3 { font-family: var(--font-head); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--navy); margin: 0 0 7px; }
.repair-page .qrow p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* Issue cards size to their content instead of a forced uniform row */
.repair-page .fit-grid { grid-auto-rows: auto; }

/* Every process marker uses the same light-blue fill with navy numerals */
.repair-page .stage-row .pnum,
.repair-page .stage-row .pstep:last-child .pnum {
  background: var(--sky-tint);
  border: 2px solid var(--sky);
  color: var(--navy);
}
.repair-page .stage-row .pstep h3 { font-size: 19px; margin: 20px 0 10px; }
.repair-page .stage-row .pstep p { font-size: 16.5px; line-height: 1.65; }

@media (min-width: 768px) and (max-width: 1023px) {
  .repair-page .stage-row { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Section rhythm. Tightened from the shared service-page scale (76/60/48) to the
   low end of the approved range, so adjacent sections stack into a smaller band
   while each section keeps enough breathing room. This must stay ABOVE the
   .section--tight rules below: those carry equal specificity, so if this came
   later it would win the cascade and inflate the CTA band back to full height. */
.repair-page .section { padding: 72px 0; }
@media (max-width: 1023px) { .repair-page .section { padding: 58px 0; } }
@media (max-width: 767px) { .repair-page .section { padding: 46px 0; } }

/* CTA reads as a transition band */
.repair-page .section--tight { padding: 34px 0; }
@media (max-width: 767px) { .repair-page .section--tight { padding: 26px 0; } }

/* Final form heading scale */
@media (min-width: 1024px) { .repair-page .form-title--xl { font-size: clamp(38px, 3.1vw, 42px); } }
@media (min-width: 768px) and (max-width: 1023px) { .repair-page .form-title--xl { font-size: 34px; } }
@media (max-width: 767px) { .repair-page .form-title--xl { font-size: 30px; } }

/* Related services. Between 768px and 1023px the grid drops to two columns, so
   the third of three cards lands alone on the second row and hangs against the
   left edge with an empty column beside it. Span the row and centre it at one
   column's width instead. Nothing is added to the DOM, so no placeholder cell
   reaches assistive technology. Above and below this band the row is complete
   (three columns) or single-column, and neither needs the rule. */
@media (min-width: 768px) and (max-width: 1023px) {
  .repair-page .rel-grid > .rel-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 12px);
    justify-self: center;
  }
}

/* ==========================================================================
   Contact page. All rules scoped to .contact-page.
   ========================================================================== */

/* Two columns, with the form taking the larger share (≈44% / ≈56%). */
.contact-page .contact-grid { display: grid; grid-template-columns: .79fr 1fr; gap: 48px; align-items: start; }
.contact-page .contact-grid > * { min-width: 0; }
.contact-page .contact-h1 { margin: 10px 0 16px; }
.contact-page .contact-lede { margin: 0 0 26px; max-width: 46ch; }

/* Two contact cards, same card language as the rest of the site. */
.contact-page .contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-page .contact-card {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--silver); border-radius: var(--r); background: var(--white);
  padding: 18px 20px; text-decoration: none;
  transition: border-color .16s, box-shadow .16s;
}
.contact-page .contact-card:hover { border-color: var(--sky); box-shadow: 0 10px 24px rgba(36,50,71,.08); }
.contact-page .contact-card-label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
.contact-page .contact-card-value { font-family: var(--font-head); font-weight: 800; font-size: 22px; color: var(--navy); }
.contact-page .contact-card-value--sm { font-family: var(--font-body); font-weight: 600; font-size: 15px; word-break: break-word; }
.contact-page .contact-area { margin: 14px 0 0; font-size: 15px; color: var(--muted); }

/* Three-step follow-up: three equal cards side by side in their own full-width
   band. Grid rather than flex so the cards stretch to a common height whatever
   the copy length, keeping the bottom edges on one line. */
.contact-page .contact-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.contact-page .contact-step {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--silver); border-radius: var(--r);
  padding: 28px 26px 30px;
}
.contact-page .contact-step-n {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--sky-tint); border: 2px solid var(--sky); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 16px;
  margin-bottom: 18px;
}
.contact-page .contact-step h3 { font-family: var(--font-head); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--navy); margin: 0 0 9px; }
.contact-page .contact-step p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

@media (max-width: 900px) {
  .contact-page .contact-steps { grid-template-columns: 1fr; gap: 16px; }
}

/* The success panel picks up the background, border and padding that the
   .estimate-sec wrapper supplies on the service pages. Same values, so the
   card reads identically in both places. */
.contact-page .form-success { background: #fff; border: 1px solid var(--silver); padding: 40px 34px; }

/* Form heading scale matches the service pages. */
@media (min-width: 1024px) { .contact-page .form-title--xl { font-size: clamp(38px, 3.1vw, 42px); } }
@media (min-width: 768px) and (max-width: 1023px) { .contact-page .form-title--xl { font-size: 34px; } }
@media (max-width: 767px) { .contact-page .form-title--xl { font-size: 30px; } }

/* Single column below the two-column breakpoint. Source order already puts the
   intro, contact details and process ahead of the form, so the stack is right. */
@media (max-width: 1023px) {
  .contact-page .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .contact-page .contact-lede { max-width: none; }
}
@media (max-width: 560px) {
  .contact-page .contact-cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Homepage content migration (client-approved copy) — additive only.
   Every value below reuses the existing design tokens: same surface, border,
   radius, shadow, type scale and colours as the rest of the site. Nothing
   here changes an existing component; the rules are either new classes or
   scoped to .home-page.
   ========================================================================== */

/* Price blocks reuse .stat typography on the standard card surface */
.home-page .stat { background: var(--white); border: 1px solid var(--silver); padding: 26px; }

/* 4-across and 3-across topic grids need two columns on tablet (homepage only).
   Bounded below at 768px so the sitewide single-column mobile rule still wins. */
@media (min-width: 768px) and (max-width: 1023px) {
  .home-page .topic-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Frame colour and grid-pattern options.
   Rendered as owned CSS swatches — the supplied file hotlinked third-party
   product photography for these, which we deliberately do not reuse. */
.opt-swatches { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 0; padding: 0; list-style: none; }
.opt-swatches li { width: 86px; text-align: center; font-size: 13px; line-height: 1.4; color: var(--muted); }
.opt-swatches .sw {
  position: relative; display: block; width: 86px; height: 86px; margin-bottom: 8px;
  border: 1px solid var(--silver); border-radius: var(--r); box-shadow: var(--shadow-sm);
  background-color: #EAF3F9; background-repeat: no-repeat;
}
.opt-swatches .sw--colonial {
  background-image:
    linear-gradient(90deg, transparent 31%, var(--navy) 31%, var(--navy) 34%, transparent 34%, transparent 65%, var(--navy) 65%, var(--navy) 68%, transparent 68%),
    linear-gradient(0deg, transparent 31%, var(--navy) 31%, var(--navy) 34%, transparent 34%, transparent 65%, var(--navy) 65%, var(--navy) 68%, transparent 68%);
}
.opt-swatches .sw--prairie {
  background-image:
    linear-gradient(90deg, transparent 19%, var(--navy) 19%, var(--navy) 22%, transparent 22%, transparent 77%, var(--navy) 77%, var(--navy) 80%, transparent 80%),
    linear-gradient(0deg, transparent 19%, var(--navy) 19%, var(--navy) 22%, transparent 22%, transparent 77%, var(--navy) 77%, var(--navy) 80%, transparent 80%);
}
.opt-swatches .sw--perimeter::after {
  content: ""; position: absolute; inset: 14px; border: 2px solid var(--navy);
}
@media (max-width: 479px) {
  .opt-swatches li, .opt-swatches .sw { width: 72px; }
  .opt-swatches .sw { height: 72px; }
}

/* Footer: five-column variant carrying the client's footer structure.
   Breakpoints mirror the existing .footer-main rules; the <=767px collapse is
   already handled by the sitewide !important rule. */
.footer-main--5 { grid-template-columns: 1.5fr .95fr 1.05fr .95fr 1fr; }
@media (max-width: 1200px) { .footer-main--5 { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (max-width: 1023px) { .footer-main--5 { grid-template-columns: 1fr 1fr; } }

/* --- Hero proof row: three restrained credential lines, not a banner ------ */
.hero-proof { list-style: none; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid var(--silver); display: flex; flex-wrap: wrap; gap: 12px 30px; }
.hero-proof li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--ink-2); }
.hero-proof .ic { color: var(--sky); flex: none; }
@media (max-width: 560px) { .hero-proof { flex-direction: column; gap: 12px; } }

/* --- Options: swatch selector panel ------------------------------------- */
.opt-panel { background: var(--fog); border: 1px solid var(--silver); border-radius: var(--r-lg); padding: 28px 30px; box-shadow: var(--shadow-sm); }
.opt-swatches { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 0; padding: 0; list-style: none; }
.opt-swatches li { width: 86px; text-align: center; font-size: 13px; line-height: 1.4; color: var(--muted); }
.opt-swatches .sw {
  position: relative; display: block; width: 86px; height: 86px; margin-bottom: 8px;
  border: 1px solid var(--silver); border-radius: var(--r); box-shadow: var(--shadow-sm);
  background-color: #EAF3F9; background-repeat: no-repeat;
}
.opt-swatches .sw--colonial {
  background-image:
    linear-gradient(90deg, transparent 31%, var(--navy) 31%, var(--navy) 34%, transparent 34%, transparent 65%, var(--navy) 65%, var(--navy) 68%, transparent 68%),
    linear-gradient(0deg, transparent 31%, var(--navy) 31%, var(--navy) 34%, transparent 34%, transparent 65%, var(--navy) 65%, var(--navy) 68%, transparent 68%);
}
.opt-swatches .sw--prairie {
  background-image:
    linear-gradient(90deg, transparent 19%, var(--navy) 19%, var(--navy) 22%, transparent 22%, transparent 77%, var(--navy) 77%, var(--navy) 80%, transparent 80%),
    linear-gradient(0deg, transparent 19%, var(--navy) 19%, var(--navy) 22%, transparent 22%, transparent 77%, var(--navy) 77%, var(--navy) 80%, transparent 80%);
}
.opt-swatches .sw--perimeter::after { content: ""; position: absolute; inset: 14px; border: 2px solid var(--navy); }
@media (max-width: 479px) {
  .opt-panel { padding: 22px 18px; }
  .opt-swatches li, .opt-swatches .sw { width: 72px; }
  .opt-swatches .sw { height: 72px; }
}

/* --- Price blocks reuse .stat typography on the standard card surface ---- */
.home-page .stat, .svc-page .stat { background: var(--white); border: 1px solid var(--silver); padding: 26px; }

/* 3-across and 4-across topic grids drop to two columns on tablet.
   Bounded below at 768px so the sitewide single-column mobile rule wins. */
@media (min-width: 768px) and (max-width: 1023px) {
  .home-page .topic-grid, .svc-page .topic-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* --- What the quote covers: numbered 4x2 grid --------------------------- */
.incl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 8px; }
.incl-card { background: var(--white); border: 1px solid var(--silver); border-radius: var(--r); padding: 22px 22px 24px; box-shadow: var(--shadow-sm); }
.incl-n { display: block; font-family: var(--font-head); font-weight: 800; font-size: 13px; letter-spacing: .08em; color: var(--sky); margin-bottom: 12px; }
.incl-card h3 { font-family: var(--font-head); font-weight: 700; font-size: 16.5px; color: var(--navy); margin: 0 0 7px; }
.incl-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
@media (max-width: 1023px) { .incl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .incl-grid { grid-template-columns: 1fr; gap: 14px; } }

/* --- Financing: compact navy band --------------------------------------- */
.fin-band { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start; max-width: 900px; }
.fin-ic { width: 62px; height: 62px; flex: none; border-radius: var(--r); background: rgba(111,175,216,.14); border: 1px solid var(--navy-divider); display: flex; align-items: center; justify-content: center; color: var(--sky); }
@media (max-width: 640px) { .fin-band { grid-template-columns: 1fr; gap: 18px; } }

/* --- Seven-step project timeline ---------------------------------------- */
.timeline { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 25px; top: 12px; bottom: 12px; width: 2px; background: var(--silver); }
.tl-step { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 24px; align-items: start; padding: 0 0 26px; }
.tl-step:last-child { padding-bottom: 0; }
.tl-n {
  position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--navy);
  background: var(--white); border: 2px solid var(--sky); box-shadow: var(--shadow-sm);
}
.tl-step:last-child .tl-n { background: var(--sky); border-color: var(--sky); color: var(--sky-on); }
.tl-body { background: var(--white); border: 1px solid var(--silver); border-radius: var(--r); padding: 20px 24px; box-shadow: var(--shadow-sm); }
.tl-body h3 { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--navy); margin: 0 0 6px; }
.tl-body p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted); max-width: 68ch; }
@media (min-width: 1024px) { .timeline { max-width: 940px; } }
@media (max-width: 640px) {
  .timeline::before { left: 20px; }
  .tl-step { grid-template-columns: 42px 1fr; gap: 16px; padding-bottom: 20px; }
  .tl-n { width: 42px; height: 42px; font-size: 13px; }
  .tl-body { padding: 16px 18px; }
}

/* --- About: licence / registration panel -------------------------------- */
.cred-panel { background: var(--white); border: 1px solid var(--silver); border-left: 3px solid var(--sky); border-radius: var(--r); padding: 22px 26px; box-shadow: var(--shadow-sm); max-width: 60ch; }
.cred-head { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); margin-bottom: 12px; }
.cred-head .ic { color: var(--sky); }
.cred-panel p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
.cred-panel a { color: var(--link); }

/* --- Guide hub cards carry a photo above the body ----------------------- */
.guide-card .gc-media { display: block; }

/* --- Footer: five-column variant ---------------------------------------- */
.footer-main--5 { grid-template-columns: 1.5fr .95fr 1.05fr .95fr 1fr; }
@media (max-width: 1200px) { .footer-main--5 { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (max-width: 1023px) { .footer-main--5 { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Homepage Section 2 — builder grade vs forever windows.
   Compact intro, one contained comparison zone holding two equal 50/50 cards
   and the utility callout, so the whole thing reads as a single comparison
   rather than a stack of article paragraphs. Existing JEM tokens only.
   ========================================================================== */

/* Intro: controlled measure, not a blog-width paragraph run */
.cmp-intro { max-width: 880px; margin: 0 0 36px; }
.cmp-intro .h2 { margin: 0 0 16px; }
.cmp-intro p { margin: 0 0 14px; max-width: 70ch; font-size: 17px; line-height: 1.7; color: var(--muted); }
.cmp-intro p:last-child { margin-bottom: 0; }

/* The zone visually contains both cards and the callout as one unit */
.cmp-zone { background: var(--fog); border: 1px solid var(--silver); border-radius: var(--r-lg); padding: 28px; }

/* Two cards, exactly half each, equal height via grid stretch */
.cmp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: stretch; }

.cmp-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--white); border: 1px solid var(--silver); border-radius: var(--r);
  padding: 32px; box-shadow: var(--shadow-sm);
}
/* JEM's option: same size and structure, one restrained sky accent */
.cmp-card--ours { border-top: 3px solid var(--sky); box-shadow: var(--shadow-md); }

.cmp-head { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--silver); }
.cmp-ic {
  width: 44px; height: 44px; flex: none; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: #EFF2F5; border: 1px solid var(--silver); color: var(--muted-2);
}
.cmp-card--ours .cmp-ic { background: var(--sky-tint); border-color: var(--sky-tint-bd); color: var(--link); }
.cmp-kicker { display: block; font-family: var(--font-head); font-weight: 700; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 7px; }
.cmp-card--ours .cmp-kicker { color: var(--sky); }
.cmp-head h3 { font-family: var(--font-head); font-weight: 800; font-size: 30px; line-height: 1.15; letter-spacing: -.015em; color: var(--navy); margin: 0; }

.cmp-lede { margin: 0 0 22px; font-size: 16.5px; line-height: 1.72; color: var(--muted); }

/* Feature rows: light dividers, no browser bullets, comfortable rhythm */
.cmp-list { list-style: none; margin: 0; padding: 0; }
.cmp-list li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--hair); font-size: 16.5px; line-height: 1.72; color: var(--ink-2); }
.cmp-list li:first-child { border-top: 0; padding-top: 0; }
.cmp-list li:last-child { padding-bottom: 0; }
.cmp-mark { width: 20px; height: 20px; flex: none; margin-top: 5px; border-radius: 6px; background: #E4E8ED; border: 1px solid var(--silver); display: flex; align-items: center; justify-content: center; }
.cmp-mark--check { background: var(--sky-tint); border-color: var(--sky-tint-bd); color: var(--link); }

/* Utility paragraph: attached to the comparison, not floating beneath it */
.cmp-callout {
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start;
  margin-top: 28px; padding: 26px 30px;
  background: var(--sky-tint); border: 1px solid var(--sky-tint-bd); border-radius: var(--r);
}
.cmp-callout-ic { width: 52px; height: 52px; flex: none; border-radius: var(--r-sm); background: var(--white); border: 1px solid var(--sky-tint-bd); display: flex; align-items: center; justify-content: center; color: var(--link); }
.cmp-callout p { margin: 0; max-width: 70ch; font-size: 16.5px; line-height: 1.75; color: var(--ink-2); }
.cmp-callout strong { color: var(--navy); }

/* Two columns while the measure stays readable; stacked once it does not.
   Five long bullets in a ~340px column is cramped, so the switch is at 900px
   rather than 768px. */
@media (max-width: 900px) {
  .cmp-grid { grid-template-columns: 1fr; gap: 22px; }
  .cmp-head h3 { font-size: 27px; }
}
@media (max-width: 640px) {
  .cmp-intro { margin-bottom: 28px; }
  .cmp-zone { padding: 18px; border-radius: var(--r); }
  .cmp-card { padding: 24px 20px; }
  .cmp-head { gap: 12px; }
  .cmp-head h3 { font-size: 24px; }
  .cmp-callout { grid-template-columns: 1fr; gap: 16px; padding: 22px 20px; margin-top: 22px; }
}
@media (max-width: 400px) {
  .cmp-zone { padding: 14px; }
  .cmp-card { padding: 20px 16px; }
  .cmp-list li, .cmp-lede, .cmp-callout p { font-size: 16px; }
}

/* ==========================================================================
   Homepage pricing cards ("What it costs") — typography only.
   Scoped to #cost so no other .stat block on the site is affected.

   The base .stat scale was a flat 40px/800 at every width, which overran the
   ~325px of usable card width and wrapped "$1,500 to $2,000" onto two lines at
   every breakpoint, including 1920. The price comes down, the label and body
   come up slightly, and the card reads as a balanced unit again. Card width,
   the 3-column grid, colours, borders and radius are untouched.
   ========================================================================== */

#cost .stat { padding: 28px; }

/* Price. Sized so the longest value fits one line wherever the card is wide
   enough; the slight negative tracking is what buys the last few pixels. */
#cost .stat .big {
  font-size: 32px;          /* mobile + tablet */
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0 0 14px;
}

/* Label */
#cost .stat .lbl {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .09em;
  line-height: 1.3;
  margin-bottom: 16px;
}

/* Description */
#cost .stat p {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.55;
}

@media (min-width: 1024px) {
  #cost .stat .big { font-size: 34px; }
  #cost .stat .lbl { font-size: 13.5px; }
  #cost .stat p { font-size: 16.5px; }
}

@media (min-width: 1200px) {
  #cost .stat .big { font-size: 38px; }
}

/* Below 400px the card loses ~50px of measure, so ease the padding rather than
   shrink the type any further. */
@media (max-width: 400px) {
  #cost .stat { padding: 24px 22px; }
}