/* =========================================================================
   solarIQ360 — Concept 1 "Clarity System"
   Round 2 refinement. Concept C's visual language (palette, blue, gradients,
   contemporary sans, spaciousness) carrying Concept A's information sections.

   Design argument: a calm, modern product surface. Centered rhythm, generous
   air, one accent used sparingly, gradients in CSS only.

   No webfonts. No frameworks. No third-party requests.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root {
  /* --- Brand continuity --- */
  --brand-amber:    #FDB913;   /* retained from the existing brand */

  /* Concept C's palette, KEPT (owner ruling 2026-08-13, CLAUDE.md §8.1).
     The blue/navy treatment, gradients and colour sophistication are the
     approved direction. The legacy charcoal #353740 is REFERENCE ONLY and is
     deliberately NOT used as the dark — an earlier pass had neutralised these
     greys toward it, which is reverted here. The palette may expand and evolve
     around the amber; it is not constrained by the legacy assets. */
  --ink:       #17202F;   /* Concept C navy — do not neutralise to charcoal */
  --ink-2:     #2C3A4F;
  --muted:     #5D6B7F;
  /* Was #8A97A8 — measured 2.97:1 on white, below the 4.5:1 minimum, and it
     carried real microcopy (the not-a-confirmed-appointment line, form hints,
     table headers). Darkened to 4.53:1 while staying visually secondary. */
  --muted-2:   #68727F;   /* 4.63:1 on --ground, 4.88:1 on white */
  --ground:    #F7F9FC;
  --white:     #FFFFFF;
  --ground-2:  #EDF1F7;
  --accent:    #FDB913;
  --accent-dk: #8A6300;   /* amber dark enough for text on light */
  --accent-sf: #FFF6DE;
  --blue:      #2657C4;
  --blue-dk:   #1E48A8;
  --blue-sf:   #EAF0FC;
  --line:      #E0E3E9;
  --line-2:    #C7CBD4;

  /* status colours — used only in the illustrative report preview */
  --flag:      #B4460E;
  --flag-sf:   #FDEEE6;
  --ok:        #15803D;
  --ok-sf:     #E7F5EC;

  --ring: 0 0 0 3px rgba(38, 87, 196, .38);

  --radius:    16px;
  --radius-sm: 11px;
  --radius-lg: 26px;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --shadow-sm: 0 0 0 1px rgba(23,32,47,.05), 0 1px 3px rgba(23,32,47,.05);
  --shadow-md: 0 0 0 1px rgba(23,32,47,.06), 0 6px 18px -4px rgba(23,32,47,.10);
  --shadow-lg: 0 0 0 1px rgba(23,32,47,.07), 0 20px 48px -16px rgba(23,32,47,.20);

  --wrap: 1140px;
  --gut: clamp(1.25rem, 4vw, 2.5rem);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--ground); color: var(--ink-2);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--ink); margin: 0; font-weight: 750; line-height: 1.15; letter-spacing: -.02em; }
p { margin: 0; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { margin: 0; padding: 0; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none; box-shadow: var(--ring); border-radius: 8px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 900px; }
.center { text-align: center; }
.measure { max-width: 66ch; margin-inline: auto; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip {
  position: absolute; left: -9999px; z-index: 200; background: var(--ink); color: #fff;
  padding: .8rem 1.2rem; font-weight: 700; text-decoration: none; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; top: 0; }

/* ---------------------------------------------------------------- eyebrow */
.eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue);
  background: var(--blue-sf); padding: .4rem .85rem; border-radius: 999px; margin-bottom: 1.1rem;
}
.sec--ink .eyebrow { background: rgba(255,255,255,.10); color: #CFE0FF; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 700; font-size: 1rem;
  padding: .95rem 1.7rem; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; min-height: 50px;
  transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.btn--primary { background: var(--blue); color: #fff; box-shadow: 0 4px 14px -4px rgba(38,87,196,.5); }
.btn--primary:hover { background: var(--blue-dk); transform: translateY(-1px); }
.btn--accent { background: var(--accent); color: #4A3400; }
.btn--accent:hover { background: #FFC633; transform: translateY(-1px); }
.btn--ghost { background: var(--white); color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--quiet { background: transparent; color: var(--blue); padding-inline: .4rem; min-height: 44px; }
.btn--quiet:hover { text-decoration: underline; }
.btn--lg { padding: 1.1rem 2.1rem; font-size: 1.05rem; min-height: 58px; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ---------------------------------------------------------------- header */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,249,252,.9); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.hdr__in { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }

/* Real solarIQ360 wordmark (owner-supplied vector, inlined).
   Two colour roles: .siq-t = wordmark, .siq-a = the "IQ" accent. */
.brand { display: inline-flex; align-items: center; text-decoration: none; min-height: 44px; }
.siq-logo { width: 158px; height: auto; display: block; }
.siq-t { fill: var(--logo-text, var(--ink)); }
.siq-a { fill: var(--logo-accent, var(--brand-amber)); }
/* On dark grounds the wordmark knocks out to white, accent stays amber. */
.ftr .siq-logo, .sec--ink .siq-logo { --logo-text: #FFFFFF; }
.siq-logo--ftr { width: 168px; margin-bottom: .9rem; }
@media (max-width: 380px) { .siq-logo { width: 126px; } }

.nav { margin-left: auto; display: flex; gap: .15rem; }
.nav a {
  text-decoration: none; font-weight: 600; font-size: .94rem; color: var(--ink-2);
  padding: .6rem .8rem; border-radius: 999px; white-space: nowrap;
}
.nav a:hover { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); }
.hdr__cta { display: flex; gap: .5rem; align-items: center; }
.hdr__cta .btn { padding: .68rem 1.25rem; font-size: .92rem; min-height: 44px; white-space: nowrap; }
.hdr__tel { text-decoration: none; font-weight: 700; font-size: .93rem; color: var(--ink); white-space: nowrap; padding: .5rem; }
.hdr__tel:hover { color: var(--blue); }

/* Mobile header: wordmark | compact CTA | burger.
   The compact CTA is deliberately NOT the hero CTA and NOT the sticky-bar CTA. */
.hdr__mcta { display: none; }
.burger {
  display: none; background: var(--white); border: 1px solid var(--line-2); border-radius: 12px;
  width: 46px; height: 46px; align-items: center; justify-content: center; cursor: pointer; flex: none;
}
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); border-radius: 2px;
}
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .nav, .hdr__cta { display: none; }
  .burger { display: inline-flex; }
  .hdr__in { gap: .6rem; }
  .hdr__mcta {
    display: inline-flex; margin-left: auto; align-items: center; justify-content: center;
    background: var(--blue); color: #fff; text-decoration: none; font-weight: 700;
    font-size: .85rem; padding: .6rem 1rem; border-radius: 999px; min-height: 44px;
    white-space: nowrap; box-shadow: 0 4px 12px -4px rgba(38,87,196,.5);
  }
  .hdr__mcta:hover { background: var(--blue-dk); }
}
@media (max-width: 380px) {
  .brand { font-size: 1.12rem; }
  .hdr__mcta { font-size: .78rem; padding: .55rem .75rem; }
  .burger { width: 42px; height: 42px; }
}

/* mobile drawer */
.mnav { display: none; background: var(--ground); border-bottom: 1px solid var(--line); padding: .5rem 0 1.6rem; }
.mnav[data-open="true"] { display: block; }
.mnav h4 { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2);
           margin: 1.3rem 0 .4rem; font-weight: 800; }
.mnav a { display: block; text-decoration: none; font-weight: 600; padding: .8rem .2rem;
          border-bottom: 1px solid var(--line); color: var(--ink-2); }
.mnav a:hover { color: var(--blue); }
.mnav .btn { width: 100%; margin-top: 1.2rem; }
.mnav__tel { display: block; margin-top: .6rem; text-align: center; font-weight: 700; color: var(--ink); text-decoration: none; padding: .8rem; }

/* ---------------------------------------------------------------- hero */
.hero { padding: clamp(3rem, 7vw, 5.4rem) 0 clamp(2rem, 4vw, 3rem); position: relative; overflow: hidden; text-align: center; }
.hero::before {
  content: ""; position: absolute; top: -34%; left: 50%; transform: translateX(-50%);
  width: min(1180px, 138%); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at center, rgba(38,87,196,.11), rgba(253,185,19,.075) 42%, rgba(247,249,252,0) 68%);
  pointer-events: none; z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2.35rem, 5.8vw, 4.05rem); max-width: 17ch; margin: 0 auto 1.3rem; }
.hero h1 .grad {
  background: linear-gradient(96deg, var(--blue) 12%, #4C7BE0 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub { font-size: clamp(1.06rem, 1.9vw, 1.22rem); color: var(--muted); max-width: 58ch; margin: 0 auto 2rem; }
/* Homepage hero lede. Had no rule of its own, so it rendered at body size and
   sat too close to the CTAs. Short measure, generous space below. */
.hero__lede {
  font-size: clamp(1.08rem, 2.1vw, 1.3rem); line-height: 1.6; color: var(--muted);
  max-width: 56ch; margin: 0 auto clamp(2rem, 4vw, 2.8rem);
}
.hero__cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; align-items: center; }
.hero__fine { margin-top: 1.1rem; font-size: .86rem; color: var(--muted-2); }

/* ------------------------------------------------- trust strip (from A) */
.trust { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.trust__row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.trust__row > div { padding: 1.5rem 1.4rem; border-left: 1px solid var(--line); }
.trust__row > div:first-child { border-left: 0; }
.trust dt { font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
            color: var(--muted-2); margin-bottom: .45rem; }
.trust dd { margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 800;
            color: var(--ink); letter-spacing: -.025em; line-height: 1.2; }
.trust dd small { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-top: .2rem; }
@media (max-width: 860px) {
  .trust__row { grid-template-columns: 1fr 1fr; border-radius: var(--radius); }
  .trust__row > div:nth-child(odd) { border-left: 0; }
  .trust__row > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------------------------------------------------------------- sections */
.sec { padding: clamp(3.5rem, 7.5vw, 5.75rem) 0; }
.sec--white { background: var(--white); }
.sec--ink { background: var(--ink); color: #AEBCCE; }
.sec--ink h2, .sec--ink h3, .sec--ink h4 { color: #fff; }
.sec--ink .sec__head p { color: #94A6BC; }
.sec--tint { background: linear-gradient(180deg, var(--ground) 0%, var(--blue-sf) 100%); }

.sec__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.sec__head h2 { font-size: clamp(1.8rem, 4vw, 2.85rem); margin-bottom: 1rem; }
.sec__head p { color: var(--muted); font-size: 1.06rem; }
.sec__head--center { text-align: center; }
.sec__head--center p { max-width: 66ch; margin-inline: auto; }

/* ------------------------------------------------ the gap (question grid) */
.qgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.1rem; }
.q {
  background: var(--white); border-radius: var(--radius); padding: 1.6rem 1.7rem;
  box-shadow: var(--shadow-sm); border-top: 3px solid transparent;
  background-image: linear-gradient(var(--white), var(--white)), linear-gradient(90deg, var(--blue), #6E9BF0);
  background-origin: border-box; background-clip: padding-box, border-box;
}
.q h3 { font-size: 1.08rem; margin-bottom: .55rem; }
.q p { color: var(--muted); font-size: .96rem; }

/* ------------------------------------------------ who we help (audience) */
.aud { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 1.1rem; }
.aud a {
  display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius);
  padding: 1.6rem 1.7rem; text-decoration: none; box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, transform .18s ease;
}
.aud a:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .aud a:hover { transform: none; } }
.aud h3 { font-size: 1.08rem; margin-bottom: .5rem; }
.aud p { color: var(--muted); font-size: .95rem; flex: 1; }
.aud .more { margin-top: .95rem; font-size: .86rem; font-weight: 700; color: var(--blue); }
.aud .more::after { content: " \2192"; }

/* ---------------------------------------------------------------- scope */
.scope { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.1rem; }
.scope-card { background: var(--white); border-radius: var(--radius); padding: 1.6rem 1.7rem; box-shadow: var(--shadow-sm); }
.sec--white .scope-card { background: var(--ground); box-shadow: none; border: 1px solid var(--line); }
.scope-card h3 { font-size: 1.05rem; margin-bottom: .9rem; display: flex; align-items: center; gap: .6rem; }
.scope-card h3 svg { flex: none; color: var(--blue); }
.scope-card li { list-style: none; position: relative; padding-left: 1.25rem; font-size: .93rem;
                 color: var(--muted); margin-bottom: .45rem; }
.scope-card li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--accent);
}
.scope-card .lnk { display: inline-block; margin-top: .8rem; font-size: .85rem; font-weight: 700;
                   color: var(--blue); text-decoration: none; }
.scope-card .lnk:hover { text-decoration: underline; }

.note { background: var(--accent-sf); border-radius: var(--radius); padding: 1.25rem 1.5rem;
        font-size: .94rem; color: #6B5100; margin-top: 1.1rem; }
.note strong { color: #4A3400; }
.note--quiet { background: var(--ground-2); color: var(--muted); }
.note--quiet strong { color: var(--ink); }

/* ---------------------------------------------------------------- philosophy */
.philo { text-align: center; }
.philo h2 { font-size: clamp(1.95rem, 4.8vw, 3.3rem); max-width: 22ch; margin: 0 auto 1.4rem; }
.philo p { max-width: 62ch; margin-inline: auto; font-size: 1.07rem; }

/* --------------------------------------------- process rail (B, restyled) */
.rail { position: relative; }
.rail__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.rail article { position: relative; }
/* Connector belongs to each step, so the run stops cleanly at the last node
   instead of trailing off the end of the row. */
.rail article::after {
  content: ""; position: absolute; top: 21px; left: 44px; right: -1rem; height: 2px;
  background: var(--blue); border-radius: 2px;
}
.rail article:nth-child(3)::after { background: #6D9AEA; }
.rail article:nth-child(4)::after { background: #A9C3F3; }
.rail article:last-child::after { display: none; }
.rail .n {
  position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--blue); color: var(--blue);
  display: grid; place-items: center; font-weight: 800; font-size: .95rem;
  margin-bottom: 1.1rem; box-shadow: 0 0 0 5px var(--ground);
}
.sec--white .rail .n { box-shadow: 0 0 0 5px var(--white); }
.rail article:last-child .n { border-color: var(--line-2); color: var(--muted); }
.rail h3 { font-size: 1.02rem; margin-bottom: .45rem; }
.rail p { font-size: .92rem; color: var(--muted); }
@media (max-width: 980px) {
  .rail__list { grid-template-columns: 1fr; gap: 0; }
  .rail article { display: grid; grid-template-columns: 44px 1fr; gap: .3rem 1.1rem; padding-bottom: 1.7rem; }
  .rail .n { margin-bottom: 0; grid-row: span 2; }
  .rail h3, .rail p { grid-column: 2; }
  /* Vertical connector between stacked steps. */
  .rail article::after {
    top: 44px; bottom: 0; left: 21px; right: auto; width: 2px; height: auto;
  }
}

/* --------------------------------------- report preview (document surface) */
.doc {
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.doc__bar {
  display: flex; align-items: center; gap: .6rem; padding: .85rem 1.2rem;
  background: linear-gradient(180deg, #FBFCFE, var(--ground));
  border-bottom: 1px solid var(--line);
}
.doc__dots { display: flex; gap: .32rem; }
.doc__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); display: block; }
.doc__title { font-size: .82rem; font-weight: 700; color: var(--ink); }
.doc__tag {
  margin-left: auto; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-dk); background: var(--accent-sf); padding: .3rem .6rem; border-radius: 999px;
}
.doc__body { padding: 1.3rem 1.4rem .3rem; }
.find { display: grid; grid-template-columns: auto 1fr; gap: .9rem; padding-bottom: 1.1rem; margin-bottom: 1.1rem;
        border-bottom: 1px solid var(--line); }
.find:last-of-type { border-bottom: 0; }
/* Fixed width so the finding titles align down the left edge. */
.chip { font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
        padding: .32rem .5rem; border-radius: 6px; white-space: nowrap; height: fit-content;
        min-width: 7rem; text-align: center; }
.chip--flag { background: var(--flag-sf); color: var(--flag); }
.chip--info { background: var(--blue-sf); color: var(--blue); }
.chip--ok   { background: var(--ok-sf);   color: var(--ok); }
.find h4 { font-size: .96rem; margin-bottom: .28rem; }
.find p { font-size: .89rem; color: var(--muted); }
.doc__foot { padding: 1rem 1.4rem 1.3rem; border-top: 1px solid var(--line); background: var(--ground); }
.doc__foot p { font-size: .82rem; color: var(--muted); }
.doc__foot strong { color: var(--ink); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 3.4rem); align-items: center; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; } }
.checklist li { list-style: none; position: relative; padding-left: 1.9rem; margin-bottom: .8rem; font-size: 1rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .3em; width: 1.15rem; height: 1.15rem;
                        border-radius: 50%; background: var(--blue-sf); }
.checklist li::after { content: ""; position: absolute; left: .335rem; top: .56em; width: .44rem; height: .22rem;
                       border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }

/* ---------------------------------------------------------------- pricing */
.price-card { background: var(--white); border-radius: var(--radius-lg); padding: clamp(1.8rem, 4vw, 2.6rem);
              box-shadow: var(--shadow-lg); max-width: 880px; margin-inline: auto; }
.price-top { display: flex; align-items: baseline; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.price-top .num { font-size: clamp(3rem, 7.5vw, 4.5rem); font-weight: 800; letter-spacing: -.045em;
                  color: var(--ink); line-height: 1; }
.price-top .lbl { color: var(--muted); font-weight: 600; }
.price-list { margin: 1.6rem 0 0; }
.price-list li { list-style: none; display: flex; justify-content: space-between; gap: 1rem;
                 padding: .9rem 0; border-top: 1px solid var(--line); font-size: .96rem; }
.price-list b { color: var(--ink); }
.price-list span { color: var(--muted); text-align: right; }

/* ------------------------------------- solar transaction support (service) */
.svc { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.5rem, 3.5vw, 2.6rem);
       background: var(--white); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3.5vw, 2.5rem);
       box-shadow: var(--shadow-lg); align-items: start; }
@media (max-width: 900px) { .svc { grid-template-columns: 1fr; } }
.svc h3 { font-size: clamp(1.2rem, 2.4vw, 1.55rem); margin-bottom: .9rem; }
.svc__body p { color: var(--muted); font-size: 1rem; margin-bottom: .9rem; }
.svc__bound { background: var(--ground); border-left: 3px solid var(--accent);
              border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: .9rem 1.1rem;
              font-size: .93rem; }
.svc__bound strong { color: var(--ink); }
.svc__body .btn { margin-top: .5rem; }
.svc__aside { background: var(--blue-sf); border-radius: var(--radius); padding: 1.4rem 1.5rem; }
.svc__aside p { font-size: .93rem; color: var(--ink-2); margin-bottom: .8rem; }
.svc__tag { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
            color: var(--blue); margin-bottom: .7rem !important; }
.svc__note { font-size: .86rem !important; color: var(--muted) !important; }

/* ------------------------------------------ manufacturer certification */
.certs { display: grid; gap: 1.1rem; }
.cert-group { background: var(--white); border-radius: var(--radius); padding: 1.5rem 1.6rem; box-shadow: var(--shadow-sm); }
.sec--white .cert-group { background: var(--ground); box-shadow: none; border: 1px solid var(--line); }
.cert-group h3 { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue);
                 margin-bottom: 1.1rem; font-weight: 800; }
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: .7rem; }
/* Each cell is a slot sized for a real supplied logo asset (approx 2.4:1), and
   is labelled as a placeholder so it can never be mistaken for final artwork. */
.logos li {
  list-style: none; aspect-ratio: 2.4 / 1; background: var(--white);
  border: 1px dashed var(--line-2); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15rem; padding: .5rem; text-align: center;
}
.logos b { font-weight: 700; font-size: .92rem; color: var(--ink-2); letter-spacing: -.01em; }
.logos span { font-size: .56rem; font-weight: 700; letter-spacing: .08em;
              text-transform: uppercase; color: var(--muted-2); }
.sec--white .logos li { background: var(--white); }

/* --------------------------------------------- brokerage logo wall */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; margin-bottom: 1.3rem; }
.wall li {
  list-style: none; aspect-ratio: 2.6 / 1; border: 1px dashed var(--line-2); border-radius: var(--radius-sm);
  display: grid; place-items: center; background: var(--white);
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-2);
}
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.quote {
  background: var(--white); border: 1px dashed var(--line-2); border-radius: var(--radius);
  padding: 1.5rem 1.6rem; color: var(--muted-2);
}
.quote .slotmark { font-size: .66rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
                   color: var(--accent-dk); background: var(--accent-sf); padding: .3rem .6rem;
                   border-radius: 999px; display: inline-block; margin-bottom: .9rem; }
.quote p { font-size: .93rem; }

.ph { border: 2px dashed var(--line-2); border-radius: var(--radius-lg);
      padding: clamp(1.6rem, 4vw, 2.6rem); background: var(--white); }
.ph__tag { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .11em;
           text-transform: uppercase; color: var(--accent-dk); background: var(--accent-sf);
           padding: .35rem .75rem; border-radius: 999px; margin-bottom: 1rem; }
.ph p { color: var(--muted); font-size: .94rem; max-width: 68ch; }

/* ---------------------------------------------------------------- tools */
.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 1rem; }
.tool { background: var(--white); border-radius: var(--radius); padding: 1.4rem 1.5rem;
        text-decoration: none; display: block; box-shadow: var(--shadow-sm); transition: box-shadow .18s ease; }
.tool:hover { box-shadow: var(--shadow-lg); }
.tool .k { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.tool h3 { font-size: 1.02rem; margin: .45rem 0 .3rem; }
.tool p { font-size: .89rem; color: var(--muted); }

/* ---------------------------------------------------------------- area */
.area { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.8rem, 4vw, 3rem); align-items: start; }
@media (max-width: 900px) { .area { grid-template-columns: 1fr; } }
.area-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.area-list li { list-style: none; }
.area-list a { display: inline-block; padding: .45rem 1rem; border-radius: 999px;
               background: rgba(255,255,255,.09); font-size: .92rem; text-decoration: none; color: #DCE6F2; }
.area-list a:hover { background: rgba(255,255,255,.18); color: #fff; }

/* ---------------------------------------------------------------- faq */
.faq { max-width: 820px; margin-inline: auto; }
.faq details { background: var(--white); border-radius: var(--radius); margin-bottom: .65rem;
               box-shadow: var(--shadow-sm); overflow: hidden; }
.faq summary { cursor: pointer; padding: 1.15rem 1.4rem; font-weight: 700; color: var(--ink);
               font-size: 1rem; list-style: none; display: flex; justify-content: space-between;
               align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; color: var(--blue); font-weight: 400; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq .a { padding: 0 1.4rem 1.3rem; }
.faq .a p { font-size: .96rem; color: var(--muted); margin-bottom: .7rem; }
/* Standalone link, not inline prose — sized as a real tap target. */
.faq .a a { color: var(--blue); font-weight: 700; text-decoration: none; font-size: .9rem;
            display: inline-flex; align-items: center; min-height: 44px; }
.faq .a a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- final cta */
.cta-final { text-align: center; }
.cta-final h2 { font-size: clamp(1.95rem, 4.8vw, 3.2rem); margin-bottom: 1rem; }
.cta-final p { color: var(--muted); font-size: 1.08rem; max-width: 54ch; margin: 0 auto 1.8rem; }
.cta-final .row { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.4rem; }
.fine { font-size: .86rem; color: var(--muted-2); }

/* ---------------------------------------------------------------- footer */
.ftr { background: var(--ink); color: #94A6BC; padding: clamp(3rem, 6vw, 4.2rem) 0 2rem; font-size: .93rem; }
/* FIVE children, not four: the brand block plus Inspections, Who We Help,
   Resources and Company. The grid was 1.6fr + 3, so Company wrapped onto a
   second row on its own with three empty columns beside it — the same stranded
   -orphan shape the Area Guides row had. Found at 1280 in the Phase 14 visual
   pass; a section count never sees it. */
.ftr__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2.4rem; margin-bottom: 2.6rem; }
/* Between 861 and 1099 five columns squeeze "Request an Inspection" to three
   lines, so drop to three: brand + two, then two. One empty trailing cell, and
   no item alone on a row. */
@media (max-width: 1099px) { .ftr__grid { grid-template-columns: 1.4fr repeat(2, 1fr); } }
@media (max-width: 860px) { .ftr__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ftr__grid { grid-template-columns: 1fr; } }
.ftr h3 { color: #fff; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
          margin-bottom: 1rem; font-weight: 800; }
.ftr li { list-style: none; margin-bottom: .5rem; }
.ftr a { text-decoration: none; }
.ftr a:hover { color: #fff; text-decoration: underline; }
.ftr__brand { display: block; }
.ftr__bot { border-top: 1px solid rgba(255,255,255,.13); padding-top: 1.4rem; display: flex;
            justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; }

/* ---------------------------------------------------------------- mobile bar */
.mobile-bar { display: none; }
@media (max-width: 720px) {
  .mobile-bar {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: .5rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  }
  /* Both labels must hold one line down to 320px, so the bar keeps a fixed
     height and never reflows the page under it. */
  .mobile-bar .btn { width: 100%; padding: .8rem .4rem; font-size: .86rem; white-space: nowrap; }
  body { padding-bottom: 5rem; }
}
@media (max-width: 400px) {
  .mobile-bar { grid-template-columns: 1.35fr 1fr; gap: .4rem; padding-inline: .55rem; }
  .mobile-bar .btn { font-size: .8rem; letter-spacing: -.01em; }
}

/* ------------------------------------------------- prototype-only notice */
.proto-toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 6rem; z-index: 300;
  background: var(--ink); color: #fff; padding: .8rem 1.2rem; border-radius: 12px;
  font-size: .88rem; font-weight: 600; box-shadow: var(--shadow-lg); max-width: min(92vw, 460px);
}
.proto-toast[hidden] { display: none; }

/* =========================================================================
   PHASE 3 ADDITIONS
   Multi-page architecture, larger header wordmark, wordmark exploration,
   and the request-inspection flow. Concept 1's design system is unchanged —
   these are additions, not overrides of the approved visual language.
   ========================================================================= */

/* ------------------------------------------------- larger header wordmark
   Owner: the Concept 1 header logo was too small. Increased presence at every
   breakpoint while keeping the header height stable. */
.siq-logo    { width: 208px; }
.siq-logo--ftr { width: 190px; }
@media (max-width: 1180px) { .siq-logo { width: 190px; } }
@media (max-width: 1080px) { .siq-logo { width: 176px; } }
@media (max-width: 420px)  { .siq-logo { width: 152px; } }
@media (max-width: 360px)  { .siq-logo { width: 138px; } }

/* Interim header wordmark (typographic Option A).
   NOT an approved mark — the four options live on wordmarks.html and the
   decision is the owner's. Used here so the prototype reads as a real site
   and so header presence can be judged in context. */
.brand .wm { font-size: 1.62rem; letter-spacing: -.024em; }
@media (max-width: 1080px) { .brand .wm { font-size: 1.5rem; } }
@media (max-width: 420px)  { .brand .wm { font-size: 1.3rem; } }
@media (max-width: 360px)  { .brand .wm { font-size: 1.18rem; } }
.ftr .brand .wm, .ftr .wm { --wm-text: #FFFFFF; font-size: 1.5rem; }
.sec--ink .wm { --wm-text: #FFFFFF; }

/* Three-stage rail on the homepage. A modifier rather than an inline style —
   inline styles beat media queries, which previously kept three columns at
   320px and forced the document to overflow. */
.rail__list--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .rail__list--3 { grid-template-columns: 1fr; } }

/* Independence line in the hero — the positioning the owner wants prominent,
   sitting under the lede rather than competing with the H1. */
/* Standalone independence statement. Deliberately quiet and wide-margined —
   it is a breath between two dense sections, not another card. */
.statement { padding: clamp(3rem, 7vw, 5.5rem) 0; text-align: center; }
.statement__line {
  font-size: clamp(1.6rem, 4.2vw, 2.6rem); font-weight: 800; letter-spacing: -.025em;
  color: var(--ink); line-height: 1.15; margin: 0 auto .9rem; max-width: 20ch;
}
.statement__line span { color: var(--blue); }
.statement__sub { color: var(--muted); max-width: 52ch; margin: 0 auto; font-size: 1.02rem; }

/* Inline "read on" link used to route from a homepage summary to the page
   that owns the topic. */
.lnk--light { color: #9DC0FF; }
.lnk--light:hover { color: #FFFFFF; }

/* ------------------------------------------------- takeaway band
   Three short statements, scannable in seconds. Used where a visitor needs the
   answer before the explanation. */
.takeaway { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
            border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.takeaway > div { padding: 1.8rem 1.6rem; border-left: 1px solid var(--line); }
.takeaway > div:first-child { border-left: 0; }
.takeaway b { display: block; font-size: 1.06rem; color: var(--ink); margin-bottom: .4rem; letter-spacing: -.015em; }
.takeaway span { color: var(--muted); font-size: .95rem; }
@media (max-width: 800px) {
  .takeaway { grid-template-columns: 1fr; }
  .takeaway > div { border-left: 0; border-top: 1px solid var(--line); padding: 1.3rem 0; }
  .takeaway > div:first-child { border-top: 0; }
}

/* ------------------------------------------------- horizontal timeline
   Where the inspection sits in the contingency period. A visual device, not
   another paragraph. */
.tline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.6rem 0 0; }
.tline > div { position: relative; padding-top: 1.5rem; }
.tline > div::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--blue); border-radius: 999px;
}
.tline > div:nth-child(3)::before { background: #6D9AEA; }
.tline > div:last-child::before { background: var(--line-2); }
.tline b { display: block; font-size: .96rem; color: var(--ink); margin-bottom: .25rem; }
.tline span { font-size: .88rem; color: var(--muted); }
@media (max-width: 760px) { .tline { grid-template-columns: 1fr 1fr; gap: 1.2rem 1rem; } }
@media (max-width: 420px) { .tline { grid-template-columns: 1fr; } }

/* ------------------------------------------------- breadcrumbs */
.crumbs { font-size: .84rem; color: var(--muted); padding: .5rem 0 0; }
/* Breadcrumbs are navigation controls, not inline prose, so they get a real
   tap target rather than relying on the WCAG 2.5.8 inline-link exemption. */
.crumbs a { color: var(--muted); text-decoration: none;
            display: inline-flex; align-items: center; min-height: 44px; padding: 0 .15rem; }
.crumbs a:hover { color: var(--blue); text-decoration: underline; }
.crumbs span { color: var(--muted-2); padding: 0 .4rem; }

/* ------------------------------------------------- page hero (interior) */
.phero { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem); }
.phero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); max-width: 20ch; margin-bottom: 1.1rem; }
.phero__lede { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--muted); max-width: 62ch; margin-bottom: 1.8rem; }
.phero__cta { display: flex; gap: .7rem; flex-wrap: wrap; }

/* ------------------------------------------------- answer block (AEO)
   A short, directly extractable answer near the top of a page. Deliberately
   plain markup so an answer engine can lift it cleanly. */
.answer {
  background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--blue);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 1.3rem 1.5rem; margin: 1.6rem 0;
  box-shadow: var(--shadow-sm);
}
.answer h2, .answer h3 { font-size: 1.02rem; margin-bottom: .5rem; }
.answer p { color: var(--ink-2); font-size: 1rem; }
.answer p + p { margin-top: .7rem; }

/* ------------------------------------------------- definition rows */
.deflist { border-top: 1px solid var(--line); margin: 1.4rem 0; }
.deflist > div { display: grid; grid-template-columns: 15rem 1fr; gap: 1.4rem;
                 padding: 1rem 0; border-bottom: 1px solid var(--line); }
.deflist dt { font-weight: 700; color: var(--ink); font-size: .98rem; }
.deflist dd { margin: 0; color: var(--muted); font-size: .97rem; }
@media (max-width: 720px) { .deflist > div { grid-template-columns: 1fr; gap: .3rem; } }

/* ------------------------------------------------- visible Q&A (AEO)
   Deliberately visible prose rather than collapsed accordions, so the answers
   are extractable and any FAQPage markup describes what a visitor actually sees. */
.qa { max-width: 76ch; }
.qa h3 { font-size: 1.08rem; margin: 1.5rem 0 .45rem; }
.qa h3:first-child { margin-top: 0; }
.qa p { color: var(--muted); font-size: .99rem; }

/* ------------------------------------------------- comparison grid */
.gap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 1.4rem; }
.gap-item { padding-top: 1.1rem; border-top: 2px solid var(--ink); }
.gap-item h3 { font-size: 1.06rem; margin-bottom: .45rem; }
.gap-item p { color: var(--muted); font-size: .95rem; }

/* ------------------------------------------------- source/answer table */
.scope-tbl { width: 100%; border-collapse: collapse; margin: 1.2rem 0; }
.scope-tbl th {
  text-align: left; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 800; padding: 0 1rem .7rem 0; border-bottom: 2px solid var(--ink);
}
.scope-tbl td { padding: .9rem 1rem .9rem 0; border-bottom: 1px solid var(--line);
                vertical-align: top; font-size: .96rem; color: var(--muted); }
.scope-tbl td:first-child { color: var(--ink); font-weight: 600; width: 52%; }
@media (max-width: 700px) {
  .scope-tbl, .scope-tbl tbody, .scope-tbl tr, .scope-tbl td { display: block; width: 100%; }
  .scope-tbl thead { display: none; }
  .scope-tbl tr { padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .scope-tbl td { border: 0; padding: .15rem 0; }
  .scope-tbl td:first-child { width: auto; margin-bottom: .2rem; }
}

/* ------------------------------------------------- report specimen
   Illustrative structure of a finding. Never real report content — labelling
   as illustrative is mandatory wherever this appears. */
.specimen { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
            overflow: hidden; box-shadow: var(--shadow-md); margin: 1.4rem 0; }
.specimen__bar {
  background: var(--ink); color: #fff; padding: .85rem 1.25rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 800;
}
.specimen__bar .tag { background: var(--accent); color: #4A3400; padding: .2rem .6rem;
                      border-radius: 999px; letter-spacing: .05em; }
.specimen__body { padding: .6rem 1.4rem 1.2rem; }
.specimen__note { background: var(--ground); border-top: 1px solid var(--line);
                  padding: .9rem 1.25rem; font-size: .84rem; color: var(--muted); }

.finding { display: grid; grid-template-columns: 6.6rem 1fr; gap: 1rem;
           padding: 1rem 0; border-bottom: 1px solid var(--line); align-items: start; }
.finding:last-child { border-bottom: 0; }
.finding .chip { margin-top: .2rem; justify-self: start; }
.finding h3, .finding h4 { font-size: .99rem; font-weight: 700; color: var(--ink); margin: 0 0 .25rem; }
.finding p { font-size: .93rem; color: var(--muted); line-height: 1.6; }
@media (max-width: 460px) { .finding { grid-template-columns: 1fr; gap: .45rem; } }

/* ------------------------------------------------- next-steps router */
.router { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.router a {
  display: block; text-decoration: none; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.3rem 1.4rem; transition: box-shadow .18s ease, transform .18s ease;
}
.router a:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .router a:hover { transform: none; } }
.router b { display: block; font-size: 1.03rem; color: var(--ink); margin-bottom: .35rem; }
.router span { font-size: .92rem; color: var(--muted); }
.router em { display: block; font-style: normal; margin-top: .7rem; font-size: .85rem;
             font-weight: 700; color: var(--blue); }

/* =========================================================================
   WORDMARK EXPLORATION (wordmarks.html only)
   Typographic options. No icon, no sun, no solar clichés — refinement is
   through weight, spacing, capitalisation and the solar / IQ / 360 relation.
   ========================================================================= */
.wm-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0 1.6rem; }
@media (max-width: 800px) { .wm-stage { grid-template-columns: 1fr; } }
.wm-panel { border-radius: var(--radius); padding: 2.4rem 1.6rem; display: grid; place-items: center; min-height: 132px; }
.wm-panel--light { background: var(--white); border: 1px solid var(--line); }
.wm-panel--dark  { background: var(--ink); }
.wm-panel--mono  { background: var(--ground-2); border: 1px solid var(--line); }

/* Shared wordmark type treatment. Colour is driven by two variables so every
   option supports light, dark and monochrome without duplicated rules. */
.wm {
  --wm-text: var(--ink);
  --wm-accent: var(--brand-amber);
  font-weight: 400; line-height: 1; color: var(--wm-text);
  display: inline-flex; align-items: baseline; white-space: nowrap;
}
.wm i { font-style: normal; color: var(--wm-accent); }
.wm-panel--dark .wm { --wm-text: #FFFFFF; }
.wm-panel--mono .wm { --wm-text: var(--ink); --wm-accent: var(--ink); }

/* --- Option A: Refined Legacy — weight contrast, optical spacing fixes --- */
.wm--a { font-size: 2.6rem; letter-spacing: -.022em; }
.wm--a .s { font-weight: 300; }
.wm--a .iq { font-weight: 800; letter-spacing: -.01em; padding-left: .045em; } /* r→I optical gap */
.wm--a .n { font-weight: 500; padding-left: .055em; }                          /* Q→3 optical gap */

/* --- Option B: Technical Caps — single weight, engineered tracking --- */
.wm--b { font-size: 2.1rem; text-transform: uppercase; letter-spacing: .085em; font-weight: 600; }
.wm--b .iq { font-weight: 700; }
.wm--b .n { font-weight: 500; }

/* --- Option C: Precision Rule — hairline divider isolates the IQ360 unit --- */
.wm--c { font-size: 2.5rem; letter-spacing: -.018em; align-items: center; }
.wm--c .s { font-weight: 300; }
.wm--c .rule {
  width: 1.5px; height: 1.35em; background: currentColor; opacity: .28;
  margin: 0 .42em; display: inline-block; flex: none;
}
.wm--c .iq { font-weight: 700; }
.wm--c .n { font-weight: 700; padding-left: .04em; }

/* --- Option D: Compact Stack — two-line lockup, strongest favicon path --- */
.wm--d { flex-direction: column; align-items: flex-start; line-height: .92; }
.wm--d .top { font-size: 2.5rem; letter-spacing: -.03em; font-weight: 300; }
.wm--d .top .iq { font-weight: 800; padding-left: .045em; }
.wm--d .n {
  font-size: .92rem; font-weight: 700; letter-spacing: .42em;
  padding-left: .12em; margin-top: .34em; color: var(--wm-text); opacity: .85;
}

/* --- header mock (shows each option in the real header context) --- */
.hdr-mock { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 1rem; }
.hdr-mock__bar {
  background: var(--white); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 1.5rem; padding: 0 1.25rem; min-height: 76px;
}
.hdr-mock__nav { margin-left: auto; display: flex; gap: 1.1rem; font-size: .86rem; color: var(--muted); }
.hdr-mock__cta {
  background: var(--blue); color: #fff; font-size: .82rem; font-weight: 700;
  padding: .6rem 1rem; border-radius: 999px; white-space: nowrap;
}
.hdr-mock--mobile .hdr-mock__bar { min-height: 62px; gap: .6rem; padding: 0 .8rem; }
/* min() so the 390px mock never exceeds a narrower viewport. */
.hdr-mock--mobile { max-width: min(390px, 100%); }
.hdr-mock__burger { width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 9px;
                    display: grid; place-items: center; flex: none; }
.hdr-mock__burger span { width: 15px; height: 1.8px; background: var(--ink); display: block; position: relative; }
.hdr-mock__burger span::before, .hdr-mock__burger span::after {
  content: ""; position: absolute; left: 0; width: 15px; height: 1.8px; background: var(--ink); }
.hdr-mock__burger span::before { top: -5px; } .hdr-mock__burger span::after { top: 5px; }
/* Header-scale wordmarks */
.hdr-mock .wm--a { font-size: 1.5rem; }
.hdr-mock .wm--b { font-size: 1.16rem; }
.hdr-mock .wm--c { font-size: 1.45rem; }
.hdr-mock .wm--d .top { font-size: 1.3rem; }
.hdr-mock .wm--d .n { font-size: .52rem; letter-spacing: .36em; margin-top: .2em; }
.hdr-mock--mobile .wm--a { font-size: 1.24rem; }
.hdr-mock--mobile .wm--b { font-size: .95rem; letter-spacing: .06em; }
.hdr-mock--mobile .wm--c { font-size: 1.2rem; }
.hdr-mock--mobile .wm--d .top { font-size: 1.08rem; }

.wm-notes { font-size: .93rem; color: var(--muted); }
.wm-notes li { margin-bottom: .45rem; }
.wm-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
           padding: clamp(1.4rem, 3vw, 2rem); margin-bottom: 1.6rem; }
.wm-card h2 { font-size: 1.35rem; margin-bottom: .3rem; }
.wm-card__tag { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
                color: var(--blue); margin-bottom: .9rem; }

/* =========================================================================
   REQUEST INSPECTION FLOW
   Mobile-first, progressive disclosure, large tap targets, minimal typing.
   ========================================================================= */
.flow { max-width: 680px; margin-inline: auto; }
.flow__steps { display: flex; gap: .4rem; margin-bottom: 2rem; }
.flow__steps li { flex: 1; list-style: none; }
.flow__steps b {
  display: block; height: 4px; border-radius: 999px; background: var(--ground-2); margin-bottom: .5rem;
}
.flow__steps li[data-state="done"] b, .flow__steps li[data-state="current"] b { background: var(--blue); }
.flow__steps span { font-size: .72rem; font-weight: 700; letter-spacing: .06em;
                    text-transform: uppercase; color: var(--muted-2); }
.flow__steps li[data-state="current"] span { color: var(--blue); }
@media (max-width: 520px) { .flow__steps span { font-size: .62rem; } }

/* Scoped to the flow form only. Without this, `.step` would hide content on
   every other page that happens to use the word. Also means that with JS off
   every step stays visible and the form degrades to one long page. */
#flow .step { display: block; }
#flow.js-on .step { display: none; }
#flow.js-on .step[data-active="true"] { display: block; }
#flow .step h2 { font-size: clamp(1.4rem, 3.2vw, 1.9rem); margin-bottom: .5rem; }
.step__hint { color: var(--muted); font-size: .97rem; margin-bottom: 1.6rem; }

/* Numbered rows (transaction support "how it works") */
.step-row { display: grid; grid-template-columns: 3rem 1fr; gap: 1.3rem; padding: 1.4rem 0;
            border-bottom: 1px solid var(--line); }
.step-row:first-child { border-top: 1px solid var(--line); }
.step-row__n { font-size: .8rem; font-weight: 800; letter-spacing: .06em; color: var(--blue);
               padding-top: .25rem; }
.step-row h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.step-row p { color: var(--muted); font-size: .96rem; }
@media (max-width: 600px) { .step-row { grid-template-columns: 1fr; gap: .35rem; } }

.field { margin-bottom: 1.3rem; }
/* Fieldsets carry a default browser border and inline margins — reset so a
   grouped choice set looks identical to a labelled input. */
fieldset.field { border: 0; padding: 0; margin-inline: 0; min-inline-size: 0; }
.field > label, .field > legend {
  display: block; font-weight: 700; font-size: .95rem; color: var(--ink); margin-bottom: .5rem; padding: 0;
}
.field .opt { font-weight: 500; color: var(--muted-2); font-size: .86rem; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="date"], .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--white);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: .85rem 1rem; min-height: 52px;
}
.field textarea { min-height: 108px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--blue); }

/* Choice buttons — large tap targets, no typing */
.choices { display: flex; flex-wrap: wrap; gap: .6rem; border: 0; padding: 0; margin: 0; }
.choices label {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: .8rem 1.25rem; border: 1.5px solid var(--line-2);
  border-radius: 999px; background: var(--white); font-weight: 600; font-size: .96rem;
  color: var(--ink-2); cursor: pointer; transition: border-color .14s ease, background-color .14s ease;
}
.choices input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; }
.choices label:hover { border-color: var(--blue); }
.choices input:checked + span { color: var(--blue); }
.choices label:has(input:checked) { border-color: var(--blue); background: var(--blue-sf); color: var(--blue); }
.choices label:has(input:focus-visible) { box-shadow: var(--ring); }

.flow__nav { display: flex; gap: .7rem; align-items: center; margin-top: 2rem;
             padding-top: 1.5rem; border-top: 1px solid var(--line); }
.flow__nav .btn { min-width: 8.5rem; }
.flow__back { background: none; border: 0; font: inherit; font-weight: 700; color: var(--muted);
              cursor: pointer; padding: .8rem .4rem; min-height: 48px; }
.flow__back:hover { color: var(--ink); }
.flow__note { font-size: .86rem; color: var(--muted-2); margin-top: 1.1rem; }

.flow__done { display: none; text-align: center; padding: 2rem 0; }
.flow__done[data-active="true"] { display: block; }
.flow__done .tick {
  width: 64px; height: 64px; border-radius: 50%; background: var(--blue-sf);
  display: grid; place-items: center; margin: 0 auto 1.4rem;
}
.flow__done h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin-bottom: .8rem; }
.flow__done p { color: var(--muted); max-width: 46ch; margin: 0 auto 1rem; }

.err { color: var(--flag); font-size: .88rem; font-weight: 600; margin-top: .45rem; display: none; }
.field[data-invalid="true"] .err { display: block; }
.field[data-invalid="true"] input { border-color: var(--flag); }

/* =========================================================================
   PHASE 3.2 — EDITORIAL REFINEMENT LAYER
   Owner feedback: the site read like a book. This is an art-direction pass on
   Concept 1, not a redesign. Three levers only — more air between ideas,
   shorter measures so nothing reads as a wall, and fewer boxes so whitespace
   does the separating instead of borders.
   Appended as a layer so every Phase-3 value above stays visible and diffable.
   ========================================================================= */

/* --- 1. AIR. Substantially more room between major ideas. ---------------- */
.sec            { padding: clamp(4.5rem, 10vw, 8rem) 0; }
.sec__head      { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.phero          { padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 3.5rem); }
.statement      { padding: clamp(4.5rem, 10vw, 8.5rem) 0; }

/* --- 2. MEASURE. Nothing reads as a wall of text. ----------------------- */
/* 66ch is the readability ceiling; section intros sit tighter still. */
.sec__head p    { max-width: 58ch; font-size: 1.08rem; line-height: 1.65; }
.phero__lede    { max-width: 54ch; line-height: 1.6; }
.answer p       { max-width: 68ch; }
.qa p           { max-width: 68ch; }
.gap-item p, .scope-card li, .router span, .takeaway span { max-width: 46ch; }

/* --- 3. FEWER BOXES. Whitespace separates; borders are the exception. --- */
/* Scope cards lose their fill and shadow and become quiet ruled columns.
   Same information, far less visual noise. */
.scope { gap: clamp(1.75rem, 3.5vw, 2.75rem); }
.scope-card {
  background: transparent; box-shadow: none; border: 0;
  border-top: 2px solid var(--ink); border-radius: 0; padding: 1.25rem 0 0;
}
.sec--white .scope-card { background: transparent; }
.scope-card h3 { font-size: 1.04rem; margin-bottom: .8rem; }
.scope-card li { font-size: .95rem; }

/* Notes stop looking like alerts and read as quiet asides. */
.note {
  background: transparent; border: 0; border-left: 2px solid var(--line-2);
  padding: .35rem 0 .35rem 1.35rem; border-radius: 0;
  color: var(--muted); font-size: .96rem; max-width: 72ch;
}
.note strong { color: var(--ink-2); }

/* The answer block keeps its emphasis but sheds the heavy card. */
.answer {
  background: transparent; border: 0; border-left: 3px solid var(--blue);
  box-shadow: none; border-radius: 0; padding: .25rem 0 .25rem 1.6rem;
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
}
.answer h2, .answer h3 { font-size: 1.15rem; margin-bottom: .6rem; }

/* Definition rows: airier, and the term column no longer shouts. */
.deflist > div { padding: 1.35rem 0; gap: 2rem; }
.deflist dd { max-width: 62ch; }

/* --- 4. HEADER. Larger wordmark, closer to the Concept 2 scale. --------- */
.brand .wm { font-size: 1.92rem; }
@media (max-width: 1180px) { .brand .wm { font-size: 1.76rem; } }
@media (max-width: 1080px) { .brand .wm { font-size: 1.62rem; } }
@media (max-width: 420px)  { .brand .wm { font-size: 1.34rem; } }
@media (max-width: 360px)  { .brand .wm { font-size: 1.2rem; } }
.hdr__in { min-height: 88px; }
@media (max-width: 1080px) { .hdr__in { min-height: 74px; } }

/* --- 5. HERO. Let the statement dominate. ------------------------------- */
.hero { padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero h1 { letter-spacing: -.032em; }
.hero__cta { gap: 1rem; }

/* Trust strip: no card, just a quiet ruled row that supports the hero. */
.trust { padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.trust__row {
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
  border-top: 1px solid var(--line);
}
.trust__row > div { border-left: 0; padding: 1.6rem 1.4rem 0 0; }
.trust dd { font-size: clamp(1.2rem, 2.3vw, 1.55rem); }

/* --- 6. RHYTHM. Adjacent same-tone sections get a hairline, not a jolt. - */
.sec--white + .sec--white { border-top: 1px solid var(--line); }

/* --- 7. FOOTER. Lighter, less dense. ----------------------------------- */
.ftr { padding-top: clamp(3.5rem, 7vw, 5rem); }
.ftr__grid { gap: 2.5rem 2rem; margin-bottom: 3.5rem; }

/* --- 8. Four-item grids sit 2x2, not 3+1 orphan. ------------------------ */
/* auto-fit was leaving a single stranded card on the second row, which reads
   as a mistake rather than as rhythm. Balanced pairs, wider gutters. */
.gap-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.25rem) clamp(2.5rem, 5vw, 4.5rem);
  max-width: 1000px;
}
@media (max-width: 720px) { .gap-grid { grid-template-columns: 1fr; } }
.gap-item h3 { min-height: 2.6em; }
@media (max-width: 720px) { .gap-item h3 { min-height: 0; } }

/* Router cards: three across reads better than auto-fit's uneven rows. */
.router { gap: clamp(1.25rem, 2.5vw, 1.75rem); }

/* Scope: three balanced columns rather than auto-fit. */
@media (min-width: 900px) { .scope { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 620px) and (max-width: 899px) { .scope { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =========================================================================
   PHASE 4 — LANDING PAGE + CITY PAGE TEMPLATES
   Campaign landing pages have no navigation and one conversion goal, so they
   need a distinct header and an inline form. City pages reuse the standard
   chrome and add local-context devices.
   ========================================================================= */

/* ------------------------------------------------- landing header (no nav) */
.lp-hdr { background: var(--white); border-bottom: 1px solid var(--line); }
.lp-hdr__in { display: flex; align-items: center; gap: 1rem; min-height: 76px; }
.lp-hdr__tel {
  margin-left: auto; text-decoration: none; font-weight: 700; font-size: 1rem;
  color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 .25rem;
}
.lp-hdr__tel:hover { color: var(--blue); }
@media (max-width: 420px) { .lp-hdr__tel { font-size: .9rem; } }

/* ------------------------------------------------- landing hero + form */
.lp-hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem); }
.lp-hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
@media (max-width: 940px) { .lp-hero__grid { grid-template-columns: 1fr; } }
.lp-hero h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); max-width: 17ch; margin-bottom: 1.1rem; }
.lp-hero__lede { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--muted); max-width: 50ch; margin-bottom: 1.8rem; }
.lp-points { list-style: none; margin: 0 0 1.8rem; padding: 0; }
.lp-points li { position: relative; padding-left: 1.9rem; margin-bottom: .8rem; font-size: 1.02rem; color: var(--ink-2); }
.lp-points li::before {
  content: ""; position: absolute; left: 0; top: .34em; width: 1.1rem; height: 1.1rem;
  border-radius: 50%; background: var(--blue-sf);
}
.lp-points li::after {
  content: ""; position: absolute; left: .33rem; top: .58em; width: .42rem; height: .2rem;
  border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg);
}

/* The form card is the page's single conversion surface — it gets the weight. */
.lp-form {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.1rem); box-shadow: var(--shadow-lg);
}
.lp-form h2 { font-size: 1.3rem; margin-bottom: .4rem; }
.lp-form__hint { font-size: .93rem; color: var(--muted); margin-bottom: 1.4rem; }
.lp-form .field { margin-bottom: 1rem; }
.lp-form .field > label, .lp-form .field > legend { font-size: .9rem; margin-bottom: .4rem; }
.lp-form input, .lp-form textarea, .lp-form select { min-height: 48px; }
.lp-form textarea { min-height: 84px; }
.lp-form .choices label { min-height: 46px; padding: .6rem 1rem; font-size: .92rem; }
.lp-form .btn { width: 100%; margin-top: .4rem; }
.lp-form__fine { font-size: .84rem; color: var(--muted-2); margin-top: .9rem; text-align: center; }

/* Compact repeat form near the foot of the page. */
.lp-form--repeat { max-width: 720px; margin-inline: auto; }
.lp-form--repeat .lp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 620px) { .lp-form--repeat .lp-grid2 { grid-template-columns: 1fr; } }

/* ------------------------------------------------- landing footer (minimal) */
.lp-ftr { background: var(--ink); color: #9FB1C6; padding: 2.5rem 0; font-size: .9rem; }
.lp-ftr a { color: #C6D6EC; }
.lp-ftr__in { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------- city page devices */
.local-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0;
               border-top: 1px solid var(--line); }
.local-facts > div { padding: 1.5rem 1.5rem 1.5rem 0; }
.local-facts dt { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
                  color: var(--muted-2); margin-bottom: .4rem; }
.local-facts dd { margin: 0; font-size: 1.06rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.local-facts dd small { display: block; font-size: .86rem; font-weight: 500; color: var(--muted);
                        letter-spacing: 0; margin-top: .25rem; }

.src { font-size: .82rem; color: var(--muted-2); margin-top: 1.2rem; }
.src a { color: var(--muted); }

/* =========================================================================
   PHASE 4.1 — VISUAL RHYTHM SYSTEM
   Owner: pages read as "headline / text / thin rule / large white area",
   repeated — wireframe-like. The fix is a repeatable grammar of section
   TYPES with different weights, not random background alternation and not
   card soup. Documented in research/visual-rhythm-system.md.
   ========================================================================= */

/* ---- Amber signature. Restrained: editorial punctuation and markers only. */
.pd { color: var(--accent); }              /* the amber full stop */
.sec--ink .pd, .statement--ink .pd { color: var(--accent); }

/* ================================ SECTION TYPES ==========================
   Six weights. A page alternates between them; two of the same weight never
   sit adjacent. This is the grammar.
   ========================================================================= */

/* T1 OPEN — light ground, generous. The default resting state. */
.s-open { background: var(--ground); padding: clamp(4.5rem, 9vw, 7.5rem) 0; }

/* T2 RAISED — white panel, subtle lift. Content that deserves containment. */
.s-raised { background: var(--white); padding: clamp(4.5rem, 9vw, 7.5rem) 0;
            border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* T3 TINTED — soft blue wash. Signals a change of subject without shouting. */
.s-tint {
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
  background:
    radial-gradient(120% 100% at 12% 0%, rgba(38,87,196,.07), rgba(38,87,196,0) 62%),
    linear-gradient(180deg, var(--blue-sf) 0%, var(--ground) 100%);
}

/* T4 DEEP — navy. Reserved for statements and the service-area moment. */
.s-deep {
  background:
    radial-gradient(90% 120% at 88% 0%, rgba(38,87,196,.30), rgba(38,87,196,0) 60%),
    var(--ink);
  color: #B9C7D9; padding: clamp(4.5rem, 9vw, 7.5rem) 0;
}
.s-deep h1, .s-deep h2, .s-deep h3, .s-deep b, .s-deep dt { color: #fff; }
.s-deep .eyebrow { background: rgba(255,255,255,.10); color: #CFE0FF; }
.s-deep .lnk { color: #9DC0FF; }
.s-deep .lnk:hover { color: #fff; }

/* T5 STATEMENT — a held breath. One idea, nothing else on screen. */
.s-say { padding: clamp(5.5rem, 12vw, 10rem) 0; text-align: center; }

/* T6 CLOSE — the conversion moment. Warmer, denser, terminal. */
.s-close {
  padding: clamp(4.5rem, 9vw, 7.5rem) 0; text-align: center;
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(253,185,19,.10), rgba(253,185,19,0) 55%),
    linear-gradient(180deg, var(--ground) 0%, var(--blue-sf) 100%);
}

/* ---- Transitions. A soft edge between adjacent light sections so the eye
   registers a boundary without a hard rule. */
.s-open + .s-open { border-top: 1px solid var(--line); }
.edge-fade { height: 1px; background: linear-gradient(90deg,
             rgba(0,0,0,0), var(--line) 18%, var(--line) 82%, rgba(0,0,0,0)); }

/* ================================ VISUAL OBJECTS =========================
   Things to look at, so a section is not always heading + paragraph.
   ========================================================================= */

/* Numbered editorial marker — replaces yet another eyebrow pill. */
.marker { display: flex; align-items: baseline; gap: .9rem; margin-bottom: 1.1rem; }
.marker b { font-size: .78rem; font-weight: 800; letter-spacing: .14em;
            color: var(--accent-dk); font-variant-numeric: tabular-nums; }
.marker span { font-size: .74rem; font-weight: 800; letter-spacing: .14em;
               text-transform: uppercase; color: var(--muted-2); }
.marker::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Split responsibility board — "you handle X, we handle Y". */
.board { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1.5rem, 4vw, 3rem);
         align-items: stretch; }
@media (max-width: 820px) { .board { grid-template-columns: 1fr; } }
.board__col { background: var(--white); border: 1px solid var(--line);
              border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.1rem); }
.board__col--ours { background: var(--ink); border-color: var(--ink); color: #B9C7D9; }
.board__col--ours h3, .board__col--ours li { color: #fff; }
.board__col h3 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
                 color: var(--muted-2); margin-bottom: 1.1rem; }
.board__col--ours h3 { color: #8FB4FF; }
.board__col ul { list-style: none; margin: 0; padding: 0; }
.board__col li { padding: .55rem 0; border-bottom: 1px solid var(--line);
                 font-size: 1.02rem; color: var(--ink-2); }
.board__col--ours li { border-bottom-color: rgba(255,255,255,.13); }
.board__col li:last-child { border-bottom: 0; }
.board__mid { display: grid; place-items: center; }
.board__mid span { font-size: .74rem; font-weight: 800; letter-spacing: .12em;
                   text-transform: uppercase; color: var(--muted-2);
                   writing-mode: vertical-rl; transform: rotate(180deg); }
@media (max-width: 820px) { .board__mid span { writing-mode: horizontal-tb; transform: none; } }
.board__foot { text-align: center; margin-top: 1.8rem; font-size: 1.05rem; color: var(--ink-2); }

/* Image placeholder — shows WHERE imagery belongs and WHY. Never a stock photo. */
.imgph {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background:
    linear-gradient(135deg, var(--blue-sf) 0%, var(--ground-2) 100%);
  border: 1px dashed var(--line-2); display: grid; place-items: center;
  padding: clamp(2rem, 5vw, 3.5rem); text-align: center; min-height: 220px;
}
.imgph b { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .12em;
           text-transform: uppercase; color: var(--blue); margin-bottom: .5rem; }
.imgph span { font-size: .93rem; color: var(--muted); max-width: 40ch; display: block; }
.imgph--wide { min-height: 260px; }
.imgph--tall { min-height: 340px; }

/* Report proof surface — conceptual, clearly labelled, never real content. */
.rproof { position: relative; background: var(--white); border: 1px solid var(--line);
          border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.rproof__top { background: var(--ink); color: #fff; padding: .9rem 1.3rem; display: flex;
               justify-content: space-between; align-items: center; gap: 1rem;
               font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; }
.rproof__top em { font-style: normal; background: var(--accent); color: #4A3400;
                  padding: .2rem .6rem; border-radius: 999px; letter-spacing: .05em; }
.rproof__body { padding: 1.3rem; display: grid; gap: .9rem; }
.rproof__row { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start;
               padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.rproof__row:last-child { border-bottom: 0; padding-bottom: 0; }
.rproof__row b { font-size: .95rem; color: var(--ink); display: block; margin-bottom: .2rem; }
.rproof__row p { font-size: .9rem; color: var(--muted); }
.rproof__foot { background: var(--ground); border-top: 1px solid var(--line);
                padding: .85rem 1.3rem; font-size: .82rem; color: var(--muted); }

/* Testimonial placeholder — labelled, never invented. */
.tph { background: var(--white); border: 1px dashed var(--line-2); border-radius: var(--radius-lg);
       padding: clamp(1.5rem, 3vw, 2.2rem); }
.tph__tag { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
            color: var(--accent-dk); background: var(--accent-sf); padding: .3rem .7rem;
            border-radius: 999px; display: inline-block; margin-bottom: 1rem; }
.tph p { color: var(--muted); font-size: .96rem; max-width: 60ch; }

/* Weekend / availability callout. */
.avail { display: flex; gap: 1.1rem; align-items: flex-start; background: var(--white);
         border: 1px solid var(--line); border-left: 3px solid var(--accent);
         border-radius: 0 var(--radius) var(--radius) 0; padding: 1.3rem 1.5rem; }
.avail b { display: block; color: var(--ink); margin-bottom: .25rem; }
.avail p { color: var(--muted); font-size: .96rem; }

/* ---- Desktop composition for the independence statement.
   Owner: the browser orphaned "it." on its own line. Fixed by composing the
   two clauses as explicit blocks rather than letting text reflow decide. */
.say__a, .say__b { display: block; }
.say__b { color: var(--blue); }
.statement__line { max-width: none; }
@media (min-width: 900px) {
  /* Deliberate two-line composition — never a reflow accident. */
  .say--two .say__a, .say--two .say__b { display: block; }
  /* Single-line variant where the measure genuinely allows it. */
  .say--one .say__a, .say--one .say__b { display: inline; }
}

/* ---- FIXES found in visual QA (Phase 4.1) ------------------------------- */

/* 1. Dark board column: `.board__col li` was declared AFTER
   `.board__col--ours li` at equal specificity, so it won and put dark grey
   text on navy — a genuine contrast failure. Raised specificity so the
   inverted column wins regardless of source order. */
.board .board__col--ours h3 { color: #8FB4FF; }
.board .board__col--ours li { color: #FFFFFF; }
.board .board__col--ours li { border-bottom-color: rgba(255,255,255,.15); }

/* 2. Trust strip used outside a `.trust` parent lost its block rule, so the
   caption ran inline against the value ("$399Residential, typical system").
   Bind the rule to the row itself. */
.trust__row dd small { display: block; font-size: .8rem; font-weight: 600;
                       color: var(--muted); letter-spacing: 0; margin-top: .25rem; }
.trust__row dt { font-size: .68rem; font-weight: 800; letter-spacing: .13em;
                 text-transform: uppercase; color: var(--muted-2); margin-bottom: .3rem; }
.trust__row dd { margin: 0; font-size: clamp(1.2rem, 2.3vw, 1.5rem); font-weight: 800;
                 color: var(--ink); letter-spacing: -.02em; }

/* =========================================================================
   PHASE 4.2 — HOMEPAGE ART DIRECTION
   Owner: the page became too systematic — every section resolving into
   "eyebrow → heading → grey paragraph → rectangles → link → whitespace".
   The fix is compositions that differ by CONTENT TYPE, not more backgrounds.
   Shared by variations A, B and C; each page uses a different subset.
   ========================================================================= */

/* ---- Amber signature: terminal punctuation on H1 and major H2 only ------ */
.pd { color: var(--accent); }

/* ---- MOTION. Reveals on entry; disabled wholesale for reduced-motion.
   No transforms that could shift layout, so no CLS. ---------------------- */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.rv.in { opacity: 1; transform: none; }
.rv--d1 { transition-delay: .08s; } .rv--d2 { transition-delay: .16s; }
.rv--d3 { transition-delay: .24s; } .rv--d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .rv, .rv--d1, .rv--d2, .rv--d3, .rv--d4 {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .seq__line::after { transition: none !important; height: 100% !important; }
}

/* ---- PHOTOGRAPHY -------------------------------------------------------- */
.ph-band { position: relative; overflow: hidden; }
.ph-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-band--wide { aspect-ratio: 21 / 9; border-radius: var(--radius-lg); }
.ph-band--tall { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); }
.ph-band--sq   { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
@media (max-width: 720px) { .ph-band--wide { aspect-ratio: 3 / 2; } }
.ph-cap { font-size: .8rem; color: var(--muted-2); margin-top: .6rem; }

/* Photo with numbered inspection callouts laid over it. */
.ph-callout { position: relative; }
.ph-callout .dot {
  position: absolute; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: #3D2B00; font-size: .78rem; font-weight: 800;
  display: grid; place-items: center; box-shadow: 0 0 0 5px rgba(253,185,19,.28);
}
.ph-callout .dot span { pointer-events: none; }
@media (max-width: 620px) { .ph-callout .dot { width: 25px; height: 25px; font-size: .68rem; } }

/* ---- ASYMMETRIC EDITORIAL (variation A) -------------------------------- */
.asym { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.asym--flip { grid-template-columns: .85fr 1.15fr; }
@media (max-width: 900px) { .asym, .asym--flip { grid-template-columns: 1fr; } }

/* Four questions as a ruled editorial row, not four cards. */
.qrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--ink); }
.qrow > div { padding: 1.5rem 1.5rem 0 0; border-right: 1px solid var(--line); }
.qrow > div:last-child { border-right: 0; padding-right: 0; }
.qrow h3 { font-size: 1.02rem; margin-bottom: .5rem; }
.qrow p { font-size: .93rem; color: var(--muted); }
@media (max-width: 900px) { .qrow { grid-template-columns: 1fr 1fr; } .qrow > div:nth-child(2n) { border-right: 0; } }
@media (max-width: 560px) { .qrow { grid-template-columns: 1fr; }
  .qrow > div { border-right: 0; border-bottom: 1px solid var(--line); padding: 1.2rem 0; } }

/* ---- AUDIENCE HIERARCHY — Realtors dominant ---------------------------- */
.aud-lead {
  display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(1.5rem, 4vw, 3rem);
  background: var(--ink); border-radius: var(--radius-lg); overflow: hidden;
  color: #B9C7D9; align-items: center;
}
@media (max-width: 880px) { .aud-lead { grid-template-columns: 1fr; } }
.aud-lead__body { padding: clamp(2rem, 4vw, 3.2rem); }
.aud-lead h3 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .8rem; letter-spacing: -.02em; }
.aud-lead p { color: #A9BAD0; margin-bottom: 1.6rem; max-width: 44ch; }
.aud-lead .ph-band { height: 100%; min-height: 260px; border-radius: 0; }
@media (max-width: 880px) { .aud-lead .ph-band { min-height: 200px; } }

.aud-second { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 1.1rem; }
@media (max-width: 720px) { .aud-second { grid-template-columns: 1fr; } }
.aud-second a { display: block; text-decoration: none; background: var(--white);
                border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.6rem;
                transition: border-color .18s ease, box-shadow .18s ease; }
.aud-second a:hover { border-color: var(--blue); box-shadow: var(--shadow-md); }
.aud-second b { display: block; font-size: 1.1rem; color: var(--ink); margin-bottom: .3rem; }
.aud-second span { font-size: .94rem; color: var(--muted); }

/* Tertiary audiences: a quiet inline row, not cards. */
.aud-third { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 1.6rem;
             padding-top: 1.4rem; border-top: 1px solid var(--line); }
.aud-third a { font-size: .96rem; color: var(--ink-2); text-decoration: none;
               border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.aud-third a:hover { color: var(--blue); border-bottom-color: var(--blue); }

/* ---- INSPECTION SEQUENCE (variation B centrepiece) --------------------- */
.seq { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 940px) { .seq { grid-template-columns: 1fr; } }
.seq__list { position: relative; padding-left: 2.6rem; }
.seq__line { position: absolute; left: .78rem; top: .6rem; bottom: .6rem; width: 2px; background: var(--line); }
.seq__line::after { content: ""; position: absolute; inset: 0 0 auto 0; width: 2px; height: 0;
                    background: linear-gradient(180deg, var(--blue), var(--accent));
                    transition: height 1.4s ease .2s; }
.seq.in .seq__line::after { height: 100%; }
.seq__item { position: relative; padding: .9rem 0 1.4rem; }
.seq__item::before {
  content: ""; position: absolute; left: -2.6rem; top: 1.15rem; width: 1.6rem; height: 1.6rem;
  border-radius: 50%; background: var(--white); border: 2px solid var(--line-2);
  transition: border-color .4s ease, background-color .4s ease;
}
.seq.in .seq__item::before { border-color: var(--blue); }
.seq.in .seq__item:last-child::before { border-color: var(--accent-dk); background: var(--accent); }
.seq__item b { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .12em;
               color: var(--muted-2); margin-bottom: .2rem; font-variant-numeric: tabular-nums; }
.seq__item h3 { font-size: 1.08rem; margin-bottom: .25rem; }
.seq__item p { font-size: .94rem; color: var(--muted); max-width: 42ch; }

/* ---- STORY SPINE (variation C) ----------------------------------------- */
.spine { position: relative; }
.spine__step { display: grid; grid-template-columns: 5.5rem 1fr; gap: clamp(1.2rem, 3vw, 2.4rem);
               padding: clamp(1.8rem, 4vw, 2.8rem) 0; border-bottom: 1px solid var(--line); }
.spine__step:last-child { border-bottom: 0; }
@media (max-width: 700px) { .spine__step { grid-template-columns: 1fr; gap: .5rem; } }
.spine__n { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -.04em;
            color: var(--line-2); line-height: 1; font-variant-numeric: tabular-nums; }
.spine__step.in .spine__n { color: var(--blue); transition: color .6s ease; }
.spine__step:last-child.in .spine__n { color: var(--blue); }
.spine__step h3 { font-size: clamp(1.15rem, 2.4vw, 1.5rem); margin-bottom: .45rem; }
.spine__step p { color: var(--muted); max-width: 56ch; }

/* ---- NAVY EDITORIAL INTERRUPTION (transaction support) ----------------- */
.interrupt {
  background:
    radial-gradient(80% 120% at 85% 10%, rgba(38,87,196,.34), rgba(38,87,196,0) 60%),
    var(--ink);
  color: #B9C7D9; padding: clamp(4.5rem, 9vw, 8rem) 0;
}
.interrupt h2, .interrupt h3 { color: #fff; }
.interrupt .eyebrow { background: rgba(255,255,255,.10); color: #CFE0FF; }
.interrupt .lnk { color: #9DC0FF; }
.interrupt .lnk:hover { color: #fff; }
.interrupt__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .interrupt__grid { grid-template-columns: 1fr; } }
.doc-stack { display: grid; gap: .7rem; }
.doc-row { display: flex; align-items: center; gap: .9rem; background: rgba(255,255,255,.05);
           border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: .95rem 1.15rem; }
.doc-row b { color: #fff; font-size: .96rem; }
.doc-row span { margin-left: auto; font-size: .74rem; font-weight: 800; letter-spacing: .08em;
                text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; }
.doc-row .ok { background: rgba(21,128,61,.25); color: #86E5A6; }
.doc-row .miss { background: rgba(180,70,14,.28); color: #FFB891; }
.doc-row .qq { background: rgba(253,185,19,.2); color: #FFD97A; }

/* ---- LOGO BAND (equipment) --------------------------------------------- */
.band { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
        gap: .6rem 2.4rem; padding: 1.4rem 0; }
.band li { list-style: none; font-size: 1.02rem; font-weight: 700; color: var(--muted-2);
           letter-spacing: -.01em; }
.band--slots li { border: 1px dashed var(--line-2); border-radius: var(--radius);
                  padding: .7rem 1.2rem; font-size: .92rem; }

/* ---- REVIEW / TRUST ----------------------------------------------------- */
.rev { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 880px) { .rev { grid-template-columns: 1fr; } }
.rev__quote { border-left: 3px solid var(--accent); padding-left: 1.6rem; }
.rev__quote p { font-size: clamp(1.1rem, 2.3vw, 1.4rem); color: var(--ink); line-height: 1.5; }
.rev__meta { margin-top: 1rem; font-size: .9rem; color: var(--muted-2); }

/* ---- FAIL-SAFE REVEALS (fix) -------------------------------------------
   .rv previously started at opacity:0 unconditionally, so any failure of the
   observer — or a stalled load — left content permanently invisible. Content
   must never depend on JS to be readable. Elements are now visible by default
   and only hidden once JS has confirmed it can reveal them, via .js-rv on
   <html> set by an inline script in <head>. */
.rv { opacity: 1; transform: none; }
.js-rv .rv { opacity: 0; transform: translateY(14px); }
.js-rv .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-rv .rv { opacity: 1 !important; transform: none !important; }
}

/* ═══ VERTICAL RHYTHM ═══════════════════════════════════════════════════════
   Every section previously carried the same clamp(4.5rem, 9vw, 7.5rem) top and
   bottom padding. Because the sections alternate ground tone, that produced an
   identical ~240px gap at every single boundary on the page — the metronome
   that made the homepage read as a repeating template.

   Rhythm needs unequal intervals, so spacing is now a three-step scale applied
   per section according to what the section is doing, not applied globally:

     sp-lg  the two or three sections carrying the argument — room to land
     sp-md  supporting material — the working default
     sp-sm  ribbons, short statements, closers — dense on purpose

   A tone change is already a visible boundary; where the tone does not change
   there is nothing to articulate, so those pairs share one gap instead of two. */
.sp-lg { padding-block: clamp(5rem, 10vw, 8.5rem) !important; }
.sp-md { padding-block: clamp(3.5rem, 7vw, 5.5rem) !important; }
.sp-sm { padding-block: clamp(2.25rem, 4.5vw, 3.25rem) !important; }

/* Asymmetric openings and closings: a section may want room above and little
   below, or the reverse, when it reads as a pair with its neighbour. */
.sp-top-0   { padding-top: 0 !important; }
.sp-bot-sm  { padding-bottom: clamp(2rem, 4vw, 3rem) !important; }

.s-open + .s-open,
.s-raised + .s-raised,
.s-tint + .s-tint { padding-top: clamp(2rem, 4vw, 3.25rem) !important; }
.s-open + .s-open { border-top: 0; }

/* Full-bleed colour blocks separate themselves and need less gap than a
   same-ground section does. */
.interrupt { padding-block: clamp(3.25rem, 6vw, 5rem); }
.sp-bot-0 { padding-bottom: 0 !important; }

/* ═══ ACCESSIBILITY CORRECTIONS ═════════════════════════════════════════════
   Findings from the Phase 4.2 automated audit, at 390px.

   1. Amber punctuation. The signature full stop was set in --accent (#FDB913),
      which is 1.64:1 on --ground. A full stop is still text. It now uses a
      deeper amber on light grounds — 3.36:1 on --ground, 3.55:1 on white,
      clearing the 3:1 large-text threshold (every element carrying .pd is an
      H1 or major H2, all well above 24px). On the navy interrupt block the
      bright accent already measures 9.44:1 and is kept, because that is where
      the colour has the most room to be itself. */
/* SUPERSEDED by the Phase 4.3 brand-yellow block at the end of this file.
   The darkened amber is gone: the punctuation is decorative brand marking and
   is now solved with aria-hidden rather than by changing the colour. */

/* 2. Target size (WCAG 2.2 SC 2.5.8, AA). Standalone links sat at 18–20px
      high. Inline links inside a sentence are exempt; these are not inline —
      they are discrete calls to action — so they are padded to 24px. */
.lnk, .aud-third a, .ftr a, .tool a {
  display: inline-flex; align-items: center; min-height: 24px;
}

/* ═══ VARIATION A — SPLIT HERO ══════════════════════════════════════════════
   Variation A is the editorial and photographic direction, but its hero was
   centred, which made it read identically to Variation C at the one moment
   that matters most. It is now an asymmetric split: the headline holds the
   left measure, and the drone photograph runs off the right edge of the
   viewport rather than sitting inside a tidy card. The three heroes now
   differ from each other by composition — split (A), left-aligned typographic
   (B), centred (C) — not by background colour. */
.hero--split { overflow: hidden; }
.hero--split__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero--split__text { text-align: left; }
.hero--split .hero__cta { justify-content: flex-start; }
.hero--split h1 { max-width: 15ch; }
.hero--split .hero__lede { max-width: 46ch; margin-left: 0; }

/* The photograph bleeds past the container to the viewport edge. calc keeps it
   tied to the real gutter rather than a guessed pixel value. */
.hero--split__media {
  margin: 0;
  margin-right: calc(50% - 50vw);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(23, 32, 47, .45);
}
/* The array sits in the upper right of the source frame. Left centred, the
   crop fills with lawn and pool and the photograph reads as a listing shot
   rather than an inspection. object-position pulls the roof into frame. */
.hero--split__media img {
  display: block; width: 100%; height: clamp(20rem, 42vw, 34rem);
  object-fit: cover; object-position: 82% 18%;
}

/* Below the split point the photograph moves under the text, full-bleed both
   sides, and stops competing with the headline for the first screen. */
@media (max-width: 880px) {
  .hero--split__grid { grid-template-columns: 1fr; gap: clamp(1.75rem, 5vw, 2.5rem); }
  .hero--split__media {
    margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); border-radius: 0;
  }
  .hero--split__media img { height: clamp(13rem, 46vw, 20rem); }
}

/* The spine's copy is capped at 56ch for readability, which at desktop widths
   left an empty third of the container to its right — an unfinished column
   rather than deliberate margin. Narrowing the spine itself turns that space
   back into margin. */
.spine { max-width: 62rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 4.3 — CONSOLIDATED HOMEPAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- 1. BRAND YELLOW ------------------------------------------------------
   Owner ruling, 2026-08-15: the coloured full stops exist to tie the page back
   to the yellow in the solarIQ360 logo. Phase 4.2 darkened them to #B87C00 to
   clear a text-contrast threshold, which produced a gold/brown that no longer
   read as the brand colour. That was the wrong trade.

   The punctuation is now the real logo yellow everywhere, and the
   accessibility question is solved properly instead of chromatically: every
   .pd span carries aria-hidden="true". It is decorative brand marking, not
   text conveying information — removing it changes no meaning, and the heading
   still reads correctly to assistive technology. WCAG 1.4.3 governs text that
   conveys information, and 1.4.11 governs meaningful graphics; a decorative
   mark is outside both.

   Where yellow needs to carry actual information it is used on a dark ground,
   where #FDB913 measures 9.44:1 — see .indep below. Amber *text* on light
   grounds still uses --accent-dk, which is a different job from this one. */
.pd { color: var(--accent); }

/* ---- 2. "THE GAP" FOUR-COLUMN ROW ----------------------------------------
   The columns were set to `padding: 1.5rem 1.5rem 0 0` — padding on the right
   but *zero on the left* — so every column's text sat flush against the
   divider rule belonging to the column before it. Gutters are now symmetric,
   and only the outer edges run flush to the container so the row still aligns
   with the rest of the page. */
.qrow > div {
  padding: 1.6rem 1.9rem 0;
  border-right: 1px solid var(--line);
}
.qrow > div:first-child { padding-left: 0; }
.qrow > div:last-child  { padding-right: 0; border-right: 0; }

/* Two columns: the gutter rules have to follow the new column edges, not the
   original four-column ones, or the first item in each row loses its inset. */
@media (max-width: 900px) {
  .qrow > div { padding: 1.5rem 1.6rem 1.5rem; }
  .qrow > div:nth-child(2n+1) { padding-left: 0; }
  .qrow > div:nth-child(2n)   { padding-right: 0; border-right: 0; }
  .qrow > div:nth-child(-n+2) { padding-top: 1.6rem; }
}

/* Single column: no vertical rules to crowd, so the inset would only cost
   measure. Horizontal padding returns to zero and the rules become dividers. */
@media (max-width: 560px) {
  .qrow > div,
  .qrow > div:nth-child(2n+1),
  .qrow > div:nth-child(2n) {
    padding: 1.25rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .qrow > div:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* ---- 3. INDEPENDENCE ------------------------------------------------------
   Previously a centred pull-quote floating in a tall empty band, which read as
   unfinished on both desktop and mobile. It is the most important sentence on
   the site, so it now gets a composition rather than whitespace: the statement
   holds the left measure at display size, and the three commitments sit
   opposite it as ruled rows — deliberately not a three-card row.

   The dark ground does real work here. It separates the brand claim from the
   surrounding argument, and it is the one place the full logo yellow can carry
   emphasis at 9.44:1 rather than merely decorate. */
.indep {
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(56,96,168,.34) 0%, transparent 62%),
    linear-gradient(135deg, #131C29 0%, #1D2B40 52%, #141E2C 100%);
  color: #E6EDF7;
  padding-block: clamp(3.75rem, 7.5vw, 6.25rem);
}
.indep__grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.indep .eyebrow { background: rgba(255,255,255,.10); color: #CFE0FF; }

.indep__say {
  font-size: clamp(2rem, 5vw, 3.35rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.08;
  margin: 1.1rem 0 0; text-wrap: balance;
}
.indep__say b { display: block; font-weight: 800; color: #FFFFFF; }
.indep__say b + b { color: var(--accent); }   /* 9.44:1 on this ground */

.indep__lede { color: #A9BAD0; max-width: 42ch; margin: 1.2rem 0 0; font-size: 1.02rem; }

.indep__list { display: block; }
.indep__row {
  position: relative;
  padding: 1.15rem 0 1.15rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,.15);
}
.indep__row:last-child { border-bottom: 1px solid rgba(255,255,255,.15); }
.indep__row::before {
  content: ""; position: absolute; left: 0; top: 1.55rem;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.indep__row b { display: block; color: #FFFFFF; font-size: 1.02rem; margin-bottom: .25rem; }
.indep__row p { color: #A9BAD0; font-size: .95rem; margin: 0; }

@media (max-width: 880px) {
  .indep__grid { grid-template-columns: 1fr; gap: clamp(1.75rem, 5vw, 2.5rem); }
  .indep__lede { max-width: none; }
}

/* ---- 4. NO STRAY GOLD ------------------------------------------------------
   The section-marker numbers were the last elements still rendering in
   --accent-dk (#8A6300). Beside the restored logo yellow they read as a
   second, muddier yellow — exactly the gold the owner flagged.

   They are not decorative: they are small informational labels, so they cannot
   take #FDB913, which measures 1.64:1 on light. Making them blue instead means
   yellow now does exactly one job on this page — decorative brand punctuation,
   plus emphasis on dark grounds where it measures 9.44:1. Amber-on-pale-amber
   chips keep --accent-dk; that is a self-contained tinted component, not a
   stray accent. */
.marker b { color: var(--blue); }

/* ---- 5. SEQUENCE WITHOUT A PHOTOGRAPH -------------------------------------
   The sequence's left column held a third copy of the one approved drone
   photograph, about a screen below its identical crop in "The Gap". With the
   duplicate removed the column carries only the scope caveat, so it narrows to
   a genuine sidebar rather than sitting as a half-empty image column.

   The grid is unchanged in kind — restoring the <figure> and dropping this
   modifier returns the original composition, so real inspection photography
   can be swapped in without redesigning the section. */
.seq--noimg { grid-template-columns: .72fr 1.28fr; }
.seq__aside { align-self: start; }
@media (max-width: 940px) { .seq--noimg { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 5 — SITE COMPONENTS
   Appended to the approved Phase 4.3 stylesheet at build time. Additive only:
   no Phase 4.3 rule is altered, so the approved homepage is untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

.proto-flag {
  background: var(--accent); color: #3D2B00; text-align: center;
  padding: .5rem; font-size: .82rem; font-weight: 700;
}

/* ---- Breadcrumbs ----------------------------------------------------------
   Visible, because BreadcrumbList schema must describe something a visitor can
   actually see. */
.crumbs {
  padding-top: 1.1rem; font-size: .84rem; color: var(--muted-2);
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
}
.crumbs a { color: var(--muted-2); text-decoration: none; }
.crumbs a:hover { color: var(--blue); text-decoration: underline; }
.crumbs__sep { color: var(--line-2); }
.crumbs [aria-current] { color: var(--ink-2); font-weight: 600; }

/* ---- Left-aligned hero ----------------------------------------------------
   Service and audience pages open left-aligned rather than centred, so they
   read as a different page type from the homepage without leaving the design
   language. */
.hero--left { text-align: left; }
.hero--left .hero__lede { margin-left: 0; max-width: 54ch; }
.hero--left .hero__cta { justify-content: flex-start; }
.hero--left h1 { max-width: 20ch; }

/* ---- Single-column editorial hero -----------------------------------------
   `text-align: left` only aligns text INSIDE a box. The base `.hero h1` rule
   carries `margin: 0 auto` with a max-width, so on the single-column variant
   the headline block itself stayed centred while its text ran left — the
   "partially centered" look the owner rejected on /realtors/ and
   /request-inspection/. Every block in this hero now starts on the same left
   edge, and the measure is preserved by capping width rather than by
   centring.

   Scoped to .hero--solo deliberately. The homepage hero and the two-column
   .hero--duo variant are approved as they are and must not inherit this. */
.hero--solo > div { max-width: 62rem; }
.hero--solo h1,
.hero--solo .hero__lede,
.hero--solo .hero__sub,
.hero--solo .eyebrow { margin-inline: 0; }
.hero--solo .hero__cta { justify-content: flex-start; }

.hero--duo { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .hero--duo { grid-template-columns: 1fr; } }

/* At-a-glance panel: the facts a visitor to a service page wants first. */
.glance {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.4rem 1.5rem;
  box-shadow: 0 18px 40px -30px rgba(23,32,47,.35);
}
.glance dl { margin: 0; }
.glance .dl__row { padding: .7rem 0; }
.glance .dl__row:first-child { padding-top: 0; }
.glance .dl__row:last-child { padding-bottom: 0; border-bottom: 0; }

/* ---- Specification list ---------------------------------------------------
   Rows, not cards. Used where the content genuinely is a specification. */
.dl { margin: 0; }
.dl__row {
  display: grid; grid-template-columns: minmax(min(9rem, 100%), .8fr) 1.2fr;
  gap: .5rem 1.5rem; padding: .95rem 0; border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.dl__row:last-child { border-bottom: 0; }
.dl dt { font-size: .8rem; font-weight: 800; letter-spacing: .07em;
         text-transform: uppercase; color: var(--muted-2); margin: 0; }
.dl dd { margin: 0; color: var(--ink-2); }
@media (max-width: 620px) { .dl__row { grid-template-columns: 1fr; gap: .2rem; } }

/* ---- FAQ ------------------------------------------------------------------
   Visible prose, never collapsed. FAQPage schema is only emitted where this
   component renders, so the markup always matches the visible content. */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq__item { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.faq__item h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.faq__item p { color: var(--muted); max-width: 72ch; }

/* ---- Related links --------------------------------------------------------
   Contextual, descriptive, and small in number. Never an SEO link dump. */
/* Related links. Three of them, so a two-column tablet grid strands the third
   alone at the far left with a third of the row empty beside it — on eight
   pages. Centred flex instead, so a trailing partial row sits in the middle of
   the measure. Same defect and same fix as .qrow--balanced. */
.rel { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.rel > * { flex: 1 1 15rem; max-width: calc(33.333% - .67rem); }
@media (max-width: 900px) { .rel > * { max-width: calc(50% - .5rem); } }
@media (max-width: 620px) { .rel > * { max-width: 100%; flex-basis: 100%; } }
.rel__item {
  display: block; padding: 1.2rem 1.3rem; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; transition: border-color .2s ease, transform .2s ease;
}
.rel__item:hover { border-color: var(--blue); transform: translateY(-2px); }
.rel__item b { display: block; color: var(--ink); margin-bottom: .25rem; }
.rel__item span { display: block; color: var(--muted); font-size: .92rem; }

/* ---- Photography slot -----------------------------------------------------
   A correctly proportioned reservation for photography that does not exist
   yet. It states what belongs there instead of showing a stand-in, so nothing
   here can be mistaken for a real inspection photograph. Dropping an <img> in
   and removing .ph-slot restores an ordinary figure — no redesign. */
/* An empty photography slot renders NOTHING and takes no space. It used to
   draw a labelled panel stating what belonged there — useful to a designer,
   and shown to customers, which is why it is gone. */
.ph-slot { display: none; }

/* …and the layouts that pair prose with a photograph close up around it, so a
   page without photography reads as finished rather than half-built. Scoped
   with :has() so nothing changes the moment a real image is added. */
.hero--duo:not(:has(figure.ph-band)):not(:has(img)) { grid-template-columns: 1fr; }
.aud-lead:not(:has(figure.ph-band)):not(:has(img))  { grid-template-columns: 1fr; }

/* Sequence with no aside at all — the list takes the full measure. */
.seq--solo { display: block; }
.seq--solo .seq__list { max-width: 62rem; }

/* ---- Report specimen ------------------------------------------------------
   Used only on the sample-report page. Presents report structure as a web
   experience; it is not a facsimile of the deliverable. */
.spec-doc {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(23,32,47,.4);
}
.spec-doc__bar {
  display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center;
  padding: .9rem 1.4rem; background: var(--ink); color: #fff; font-size: .86rem;
}
.spec-doc__bar .tag {
  background: var(--accent); color: #4A3400; padding: .18rem .6rem;
  border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .08em;
}
.spec-doc__body { padding: clamp(1.4rem, 3vw, 2.4rem); }
.spec-doc h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.rpt-find h3 { font-size: 1.02rem; margin: 0 0 .3rem; }

/* Finding rows: severity is carried by a coloured rail plus a text label, so
   it never depends on colour alone. */
.rpt-find { border-left: 4px solid var(--line-2); padding: .3rem 0 .3rem 1.2rem; margin-bottom: 1.6rem; }
.rpt-find--high { border-left-color: #B3261E; }
.rpt-find--med  { border-left-color: #B87C00; }
.rpt-find--ok   { border-left-color: #1E7A46; }
.rpt-find__tag {
  display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; padding: .18rem .55rem; border-radius: 999px; margin-bottom: .4rem;
}
.rpt-find--high .rpt-find__tag { background: #FDECEA; color: #8C1D18; }
.rpt-find--med  .rpt-find__tag { background: var(--accent-sf); color: var(--accent-dk); }
.rpt-find--ok   .rpt-find__tag { background: #E6F4EC; color: #14532D; }

.rpt-find p { color: var(--muted); margin: 0; font-size: .95rem; }

/* Watermark strip for the sample. Text, not an image overlay, so it survives
   copy/paste and screen readers announce it. */
.samp-mark {
  background: repeating-linear-gradient(45deg, var(--accent-sf) 0 14px, #FFFBEF 14px 28px);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: .8rem 1.1rem; font-size: .84rem; color: var(--accent-dk);
  font-weight: 700; text-align: center;
}

/* ---- Request flow ---------------------------------------------------------
   Single-screen form. Without JS every field is visible and it still submits. */
.form-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: 0 24px 50px -38px rgba(23,32,47,.4);
}
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
@media (max-width: 700px) { .fgrid { grid-template-columns: 1fr; } }
/* Grid and flex children default to min-width:auto, so an item refuses to
   shrink below its own intrinsic width. The property-state <select> lists all
   fifty states, and "District of Columbia" sets that intrinsic width — which
   pushed the form to 489px inside a 390px viewport and dragged the whole
   two-column request layout 165px off-screen. The prototype never showed it
   because its request page is a static mock with no state select. */
.fgrid, .field, .hero--duo > * { min-width: 0; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .84rem; font-weight: 700; color: var(--ink-2); }
/* TEXT CONTROLS ONLY. This applied to every input inside .field, radios and
   checkboxes included, so the savings calculator's two radios were being given
   a 44px min-height, a border, a background and 0.7rem of padding. A radio does
   not stretch: it stayed 13px wide and 44px tall, its dot centred in that box
   while the label text sat on the box's baseline — so on screen the label read
   as sitting BELOW its radio rather than beside it, at every width. */
.field input:not([type="radio"]):not([type="checkbox"]),
.field select, .field textarea {
  font: inherit; padding: .7rem .85rem; border: 1px solid var(--line-2);
  border-radius: var(--radius); background: var(--white); color: var(--ink);
  min-height: 44px; max-width: 100%;
}
/* The choice controls themselves: intrinsic size, and the accent colour so a
   selected option reads as brand rather than as the OS default blue. */
.field input[type="radio"], .field input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem; min-height: 0; flex: 0 0 auto;
  margin: 0; padding: 0; accent-color: var(--blue);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid rgba(38,87,196,.35); outline-offset: 1px; border-color: var(--blue);
}
.field .hint { font-size: .8rem; color: var(--muted-2); }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select { border-color: #B3261E; }
.field[data-invalid="true"]::after {
  content: "This one we do need."; font-size: .78rem; color: #B3261E;
}

/* ---- Service-status panel -------------------------------------------------
   Full-width, under the City/State row, because "do you even come to my area?"
   is the question most visitors arrive with. It used to be a grey .hint beside
   the state selector, where it read as incidental helper text next to the thing
   it was actually answering.

   Status is carried three ways and never by colour alone: a marker glyph, the
   wording of the heading, and the border/ground. The panel is a live region, so
   a screen reader hears the change without focus moving.

   Nothing here can block submission. Out-of-area changes the message, not the
   form — see forms.php. */
.areastat {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .95rem 1.05rem;
  border: 1px solid var(--line-2); border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--ground);
}
.areastat__mark {
  flex: 0 0 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .95rem; font-weight: 800; line-height: 1;
  background: var(--white); border: 1px solid currentColor;
}
.areastat__body { display: block; }
.areastat__head { display: block; font-size: .95rem; line-height: 1.35; }
.areastat__text {
  display: block; margin-top: .25rem;
  font-size: .85rem; line-height: 1.5; color: var(--muted);
}

/* Waiting for input. Deliberately neutral — it is a prompt, not a verdict. */
.areastat--ask       { border-color: var(--line-2); background: var(--ground); }
.areastat--ask .areastat__mark  { color: var(--muted-2); }
.areastat--ask .areastat__head  { color: var(--ink-2); }

/* Served. --ok is 5.44:1 on --ok-sf, so the heading passes AA on its own
   ground rather than relying on the surrounding card. */
.areastat--yes       { border-color: var(--ok); background: var(--ok-sf); }
.areastat--yes .areastat__mark  { color: var(--ok); }
.areastat--yes .areastat__head  { color: #10632F; }
.areastat--yes .areastat__text  { color: #2C4A38; }

/* Limited / Confirm. Amber is the brand accent and is far too light for text,
   so the ink is --accent-dk and the amber is confined to the rule and ground.
   The rule is #B98400 rather than the brand #FDB913: measured on --accent-sf
   the brand amber is 1.61:1 and simply disappears, where this is 3.06:1. The
   brand amber stays where it belongs — decorative punctuation on light, and
   full strength on navy. Status here is carried by the glyph and the wording
   too, so the rule is reinforcement rather than the only signal. */
.areastat--maybe     { border-color: #B98400; background: var(--accent-sf); }
.areastat--maybe .areastat__mark { color: var(--accent-dk); }
.areastat--maybe .areastat__head { color: var(--accent-dk); }
.areastat--maybe .areastat__text { color: #55442A; }

/* Not served — and Planned, which must be indistinguishable from it. Blue,
   not red: this is information, not an error, and the visitor is being invited
   to continue rather than warned off. */
.areastat--no        { border-color: var(--blue); background: var(--blue-sf); }
.areastat--no .areastat__mark { color: var(--blue-dk); }
.areastat--no .areastat__head { color: var(--blue-dk); }
.areastat--no .areastat__text { color: #3A4A66; }

@media (prefers-reduced-motion: no-preference) {
  .areastat { transition: background-color .18s ease, border-color .18s ease; }
}

/* ---- City page ------------------------------------------------------------ */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) { .stat-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .stat-row { grid-template-columns: 1fr; } }
.stat {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
}
.stat b { display: block; font-size: 1.5rem; letter-spacing: -.02em; color: var(--ink); }
.stat span { display: block; font-size: .86rem; color: var(--muted); margin-top: .2rem; }
.stat cite { display: block; font-size: .74rem; color: var(--muted-2); font-style: normal; margin-top: .5rem; }

/* ---- Article --------------------------------------------------------------
   A measure-controlled reading column, distinct from every marketing page. */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 2.4rem 0 .7rem; }
.prose h3 { font-size: 1.12rem; margin: 1.8rem 0 .5rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose p { margin-bottom: 1rem; }
.prose ul, .prose ol { margin: 0 0 1.2rem 1.1rem; }
.prose li { margin-bottom: .45rem; }
.prose a { color: var(--blue); }
.answer {
  background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--blue); border-radius: var(--radius);
  padding: 1.2rem 1.4rem; margin-bottom: 1.8rem;
}
.answer p { margin: 0; font-size: 1.06rem; color: var(--ink); }
.art-meta { color: var(--muted-2); font-size: .88rem; margin-bottom: 1.6rem; }
.src { font-size: .88rem; color: var(--muted); }
.src li { margin-bottom: .4rem; }

/* ---- Inherited-rule resets ------------------------------------------------
   .faq, .field, .answer, .crumbs and .src already exist in the Phase 4.3
   stylesheet for different components. Appending later wins on the properties
   we redeclare, but geometry we don't redeclare still leaks through — a
   centred 820px cap on .faq, and a bottom margin on .field that fights the
   grid gap. Reset those explicitly rather than relying on source order. */
.faq   { max-width: none; margin-inline: 0; }
.field { margin-bottom: 0; }

/* ---- Target size, WCAG 2.2 SC 2.5.8 ---------------------------------------
   Two discrete targets sat at 20px high in the WordPress build: the phone link
   in an at-a-glance panel, and the city links on the service-areas index.
   Neither is an inline link inside a sentence, so neither qualifies for that
   exemption. Padded to 24px at the component level rather than per page. */
.dl dd a,
.qrow h3 a,
.stat a { display: inline-flex; align-items: center; min-height: 24px; }

/* ═══════════════════════════════════════════════ Resource Hub tools ═══════
   Four interactive tools share one shell: a form on the left, a live result
   panel on the right, and the same field styling as the request flow. The
   result panel is the only part that moves, so the page never reflows around
   the reader while they type. */
.calc {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 2.75rem); align-items: start;
}
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }

/* A full-width variant: inputs across the top, results beneath. The NEM
   comparison needs it — three input fields and three result columns cannot both
   live in half the measure, and squeezed into the standard two-column shell the
   form wrapped 2 + 1 with the third field stranded beside an empty half-row. */
.calc--wide { grid-template-columns: 1fr; }

.calc__form {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex; flex-direction: column; gap: 1.1rem;
}
/* min(11rem, 100%) rather than a bare 11rem, and min-width:0 on the grid
   items. A bare minmax() track floor becomes the container's min-content width,
   which a CSS grid item respects by default — so at 390px the calculator form
   measured 414px and the page scrolled sideways by 44px. auto-fit cannot rescue
   it; the floor has to be able to shrink. */
.calc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: 1.1rem; }
.calc > *, .calc__grid > * { min-width: 0; }
.calc__grid[hidden] { display: none; }
/* Three fields in a row that is three wide, so they never wrap 2 + 1 and leave
   the third stranded beside a third of a row of nothing. The auto-fit default
   is right for variable field counts and wrong for a fixed three. */
.calc__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .calc__grid--3 { grid-template-columns: 1fr; } }

/* Radio pair reads as a choice, not as two stray controls. */
.opt-inline {
  display: inline-flex; align-items: center; gap: .45rem; margin-right: 1.1rem;
  font-size: .95rem; min-height: 24px;
}

/* Result panel. Navy so the answer is visibly the output, not another input. */
.calc__out {
  background: var(--ink); color: #fff; border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.calc__out[data-empty="true"] .calc__figures { display: none; }
.calc__out:not([data-empty="true"]) .calc__empty { display: none; }
.calc__empty { color: #A9BAD0; margin: 0; }

.calc__figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 420px) { .calc__figures { grid-template-columns: 1fr; } }
.calc__figures dt {
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #8FA3BA; margin-bottom: .3rem;
}
.calc__figures dd {
  margin: 0; font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 800;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

/* ── Balanced ruled row ──────────────────────────────────────────────────
   .qrow is a hard four-column grid. With five items — the five Area Guides —
   the fifth lands alone at the far left of a second row and the whole section
   reads as a mistake rather than a layout.

   This variant is a centred flex row instead of a grid, so a trailing partial
   row sits in the middle of the measure rather than hugging the left edge. The
   vertical rules go with it: a divider between two centred items points at
   nothing, so each item carries its own top rule and the section keeps its
   ruled character without pretending to be a table.

   Three per row rather than four, because these carry a sentence each and four
   columns of prose at this width is a squeeze. */
.qrow--balanced {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0 clamp(1.4rem, 3vw, 2.6rem);
  border-top: 0;
}
.qrow--balanced > div {
  flex: 1 1 clamp(15rem, 26%, 20rem); max-width: 32%;
  padding: 1.15rem 0 1.4rem; border-right: 0;
  border-top: 2px solid var(--ink);
}
@media (max-width: 900px) {
  .qrow--balanced > div { max-width: 46%; flex-basis: 14rem; }
}
@media (max-width: 560px) {
  .qrow--balanced { gap: 0; }
  .qrow--balanced > div { max-width: 100%; flex-basis: 100%; }
}

/* ── NEM 1 / 2 / 3 comparison ────────────────────────────────────────────
   Three columns of the same shape, because the whole point is that they are
   the same system under three rules. Collapses to one column on a phone rather
   than squeezing three unreadable ones. */
.nemcmp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1.4rem; }
.nemcmp__col {
  padding: 1rem .9rem; border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); background: rgba(255,255,255,.04);
}
.nemcmp__h {
  margin: 0 0 .55rem; font-size: .7rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: #A9BAD0;
}
.nemcmp__v { margin: 0; font-size: clamp(1.3rem, 3.2vw, 1.7rem); font-weight: 800; color: #fff; line-height: 1.1; }
.nemcmp__m { margin: .2rem 0 0; font-size: .84rem; color: #A9BAD0; }
@media (max-width: 620px) { .nemcmp { grid-template-columns: 1fr; } }

/* ── Transaction impact summary ──────────────────────────────────────────
   The legacy tool leads with ONE figure and supports it with two. That order
   is the argument: a realtor wants the answer before the workings. A grid of
   equal statistics reads as a dashboard and buries it. */
.calc__big {
  font-size: clamp(2.1rem, 5.5vw, 3.1rem); font-weight: 800; line-height: 1.05;
  letter-spacing: -.02em; color: #fff; margin: .2rem 0 .3rem;
}
.calc__biglbl {
  font-size: .92rem; color: #A9BAD0; margin: 0 0 1.5rem; max-width: 46ch;
}
/* Two supporting stats, not three — matching the legacy layout. */
.calc__figures--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Total battery capacity, echoed back as the inputs are typed. */
.calc__pill {
  grid-column: 1 / -1; margin: 0; padding: .55rem .85rem;
  background: var(--tint); border: 1px solid var(--line); border-radius: 999px;
  font-size: .86rem; color: var(--ink-2); font-weight: 600;
}
.calc__pill span + span { color: var(--muted-2); font-weight: 500; }

.calc__kicker {
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-amber); margin: 0 0 .6rem;
}
.calc__lead { font-size: 1.05rem; line-height: 1.55; margin: 0 0 1.2rem; }
.calc__h3 {
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #8FA3BA; margin: 0 0 .6rem;
}
.calc__list { margin: 0 0 1.1rem; padding-left: 1.1rem; color: #D6DFEA; }
.calc__list li { margin-bottom: .5rem; line-height: 1.5; }
.calc__note { font-size: .88rem; color: #A9BAD0; margin: 0; line-height: 1.55; }
.calc__warn {
  font-size: .92rem; line-height: 1.55; margin: 0 0 1.2rem;
  border-left: 3px solid var(--brand-amber); padding-left: .9rem; color: #E4EAF2;
}
.calc__warn[hidden] { display: none; }

/* ---- Transaction checklist ---------------------------------------------- */
.calc[data-tool="checklist"] { grid-template-columns: 1fr; }
.tx__bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.tx__barfill { height: 100%; width: 0; background: var(--blue); transition: width .2s ease; }
.tx__count {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: .7rem 0 1.75rem; font-size: .88rem; font-weight: 700; color: var(--muted);
}
.btn--sm { padding: .35rem .9rem; font-size: .82rem; min-height: 24px; }

#tx-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 1.75rem; }
#tx-checklist > * { min-width: 0; }
.tx__group h3 {
  font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue); margin: 0 0 .8rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
.tx__list { list-style: none; margin: 0; padding: 0; }
.tx__list li { margin-bottom: .55rem; }
.tx__list label {
  display: flex; gap: .6rem; align-items: flex-start; cursor: pointer;
  line-height: 1.5; font-size: .95rem; min-height: 24px;
}
.tx__list input { margin-top: .25rem; flex: 0 0 auto; width: 1rem; height: 1rem; }


/* Checklist item: title, explanation, and the amber rule that marks the items
   which stop a closing rather than merely inform it. The explanation is most of
   the value — "check title for a UCC-1" means nothing to an agent who has not
   met one before. */
.tx__sub { margin: -.4rem 0 .7rem; font-size: .86rem; color: var(--muted-2); }
.tx__list b { display: block; font-weight: 700; color: var(--ink); }
.tx__list em {
  display: block; margin-top: .15rem; font-style: normal;
  font-size: .84rem; line-height: 1.45; color: var(--muted-2);
}
.tx__list li.tx__flag { position: relative; }
.tx__list li.tx__flag::before {
  content: ""; position: absolute; left: -.7rem; top: .35rem;
  width: 3px; height: 1.05rem; background: var(--accent); border-radius: 2px;
}
.tx__list input:checked + span b { color: var(--muted-2); text-decoration: line-through; }
.tx__list input:checked + span em { opacity: .6; }

/* Printing the checklist is a real workflow — agents work from paper. */
@media print {
  .siq-header, .ftr, .crumbs, .hero, .cta-close, .tx__bar, .tx__count, .note { display: none !important; }
  #tx-checklist { grid-template-columns: repeat(2, 1fr); }
  .tx__list input { -webkit-appearance: none; appearance: none;
                    border: 1px solid #666; border-radius: 2px; }

  /* The sample report is meant to be handed to someone, so printing it is the
     download. The owner decision (R2) was "web + print route" — this is the
     print route. A separately hosted PDF would be a second artefact that can
     drift from the page, which is the failure that decision was written to
     avoid; if one is ever produced it should be generated from this. */
  .rpt, .rpt-find, .rpt__row, .spec-doc, .evid__row, .faq__item, .dl__row {
    break-inside: avoid; page-break-inside: avoid;
  }
  h2, h3 { break-after: avoid; page-break-after: avoid; }
  /* Severity is carried by a label as well as a colour, but the colour is still
     information — keep it when the printer can. */
  .rpt-find--high, .rpt-find--med, .rpt-find--ok {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* Reveal animations are a screen affordance; on paper they can only hide
     content. Belt and braces alongside the no-JS default. */
  .rv, .rv--d1, .rv--d2, .rv--d3 { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; word-break: break-all; }
  a[href^="/"]::after, a[href^="#"]::after, a[href^="tel"]::after,
  a[href^="mailto"]::after { content: ""; }
}

/* ═══════════════════════════════════════════ Typed resource index ═════════
   Replaces the card grid on the Resource Hub. A card grid forces every entry
   to the same height, wastes the horizontal measure on a short description,
   and leaves a ragged final row whenever the count is not a multiple of the
   column count. A list does none of those things, and it scales to any number
   of resources.

   The type chip is the hierarchy: a reader scanning for "a calculator" can
   find one without reading a single description. Interactive resources carry a
   visible verb, so the difference between using something and reading
   something is legible before the click. */
.rix { display: grid; gap: 0; border-top: 1px solid var(--line); }
.rix__group { margin-top: 2.25rem; }
.rix__group:first-child { margin-top: 0; }
.rix__grouphead {
  font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-2); margin: 0 0 .2rem;
}

.rix__item {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  gap: 0 1.5rem; align-items: baseline;
  padding: 1.15rem 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background-color .18s ease, padding-left .18s ease;
}
.rix__item:hover, .rix__item:focus-visible {
  background: var(--white); padding-left: .9rem;
}
.rix__type {
  font-size: .66rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  color: var(--blue); padding-top: .2rem;
}
/* Type is carried by the label itself, never by colour alone. */
.rix__type--read { color: var(--muted-2); }

.rix__body { min-width: 0; }
.rix__title { display: block; font-size: 1.06rem; font-weight: 700; color: var(--ink); margin: 0 0 .2rem; }
.rix__desc  { display: block; font-size: .94rem; color: var(--muted); margin: 0; max-width: 62ch; }
.rix__go {
  font-size: .86rem; font-weight: 700; color: var(--blue); white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 24px;
}
.rix__item:hover .rix__go { text-decoration: underline; }

@media (max-width: 700px) {
  .rix__item { grid-template-columns: 1fr; gap: .35rem; padding: 1.1rem 0; }
  .rix__type { padding-top: 0; }
  .rix__go { margin-top: .15rem; }
}

/* ---- Two-line statement headline ------------------------------------------
   "We inspect solar. We don't sell it." wrapped to leave "it." alone on a line
   at desktop — the two most important words in the positioning, broken across
   a line with three characters on the second. Setting it as two deliberate
   lines is stronger than the accidental wrap AND cannot re-break badly, because
   each clause is its own block with its own measure. No manual <br>. */
.hero__say { display: block; }
.hero__say b { display: block; font-weight: inherit; text-wrap: balance; }

/* ---- Note aligned to a document grid --------------------------------------
   `.note` carries its own left rule and a 72ch measure. Placed directly in
   `.wrap` after a `.spec-doc` — a card with its own internal padding — the
   rule sits outside the document's text edge and the note reads as floating
   rather than annotating. Inset it to the card's text edge instead of nudging
   one note with a margin. */
.note--inset { margin-left: clamp(1.4rem, 3vw, 2.4rem); }

/* A disclosure that qualifies the whole page belongs in the reading column,
   centred and bounded, not stranded at a section edge. */
.note--center {
  margin-inline: auto; max-width: 64ch; text-align: left;
  border-left: 0; border-top: 2px solid var(--line-2);
  padding: 1rem 0 0;
}

/* ═══════════════════════════════════════════ Transaction timeline ═════════
   The audience pages were the worst offenders in the Phase 10 audit: four
   pages, one shape, only the nouns changed. This is the component that makes
   them legible at a glance, because it shows the SAME transaction from four
   different seats and marks where the inspection lands in each.

   It is a real ordered list. Screen readers get "step 3 of 5"; the current
   step is marked with text as well as colour, so state never depends on hue. */
.tl { margin: 0; padding: 0; list-style: none; counter-reset: tl; }
.tl__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: .75rem; align-items: stretch;
}
.tl__step {
  position: relative; padding: 1.1rem 1.1rem 1.2rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); border-top: 3px solid var(--line-2);
}
.tl__step[data-here="true"] {
  border-top-color: var(--blue);
  box-shadow: 0 18px 40px -30px rgba(23,32,47,.4);
}
.tl__n {
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); display: block; margin-bottom: .4rem;
}
.tl__step[data-here="true"] .tl__n { color: var(--blue); }
.tl__title { font-size: .99rem; font-weight: 700; margin: 0 0 .3rem; color: var(--ink); }
.tl__text { font-size: .88rem; color: var(--muted); margin: 0; line-height: 1.5; }
/* State in words, not only in colour — WCAG 1.4.1. */
.tl__here {
  display: inline-block; margin-top: .6rem; font-size: .68rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--blue);
}
.tl__cap { margin-top: 1rem; font-size: .88rem; color: var(--muted-2); }

@media (max-width: 900px) {
  /* Below the split the track becomes a vertical list with a drawn rule — a
     timeline still reads as a sequence, which a wrapped grid would not. */
  .tl__track { grid-auto-flow: row; gap: 0; position: relative; padding-left: 1.4rem; }
  .tl__track::before {
    content: ""; position: absolute; left: .32rem; top: .6rem; bottom: .6rem;
    width: 2px; background: var(--line);
  }
  .tl__step {
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
    padding: .8rem 0 1.1rem;
  }
  .tl__step::before {
    content: ""; position: absolute; left: -1.4rem; top: 1.15rem;
    width: .68rem; height: .68rem; border-radius: 50%;
    background: var(--line-2); box-shadow: 0 0 0 4px var(--ground);
  }
  .tl__step[data-here="true"]::before { background: var(--blue); }
}

/* ═══════════════════════════════════════════════ Article head ═════════════
   Articles opened straight into `prose` with no head at all, which is why all
   ten were structurally identical and why they read as service pages with the
   marketing stripped out. This is an editorial masthead: kicker, title, dek,
   byline rail — deliberately NOT the oversized conversion hero used elsewhere.
   Smaller type, tighter measure, no buttons. It signals "read this" before a
   word is read. */
.ahead { padding: clamp(2.5rem, 5vw, 4rem) 0 0; }
.ahead__kicker {
  font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--blue); margin: 0 0 .9rem;
}
.ahead h1 {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem); max-width: 22ch; margin: 0 0 1rem;
  letter-spacing: -.022em; text-wrap: balance;
}
.ahead__dek {
  font-size: clamp(1.04rem, 1.9vw, 1.18rem); line-height: 1.6; color: var(--muted);
  max-width: 58ch; margin: 0 0 1.6rem;
}
.ahead__rail {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; align-items: center;
  padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-size: .84rem; color: var(--muted-2);
}
.ahead__rail b { color: var(--ink-2); font-weight: 700; }

/* Reading column. Articles are read, not scanned — narrower than the site's
   general measure, and larger than its body size. */
.artbody { max-width: 68ch; }
.artbody h2 { font-size: clamp(1.32rem, 2.6vw, 1.65rem); margin: 2.4rem 0 .7rem; }
.artbody h3 { font-size: 1.1rem; margin: 1.7rem 0 .5rem; }
.artbody p  { font-size: 1.04rem; line-height: 1.72; margin-bottom: 1.15rem; }
.artbody ul, .artbody ol { font-size: 1.04rem; line-height: 1.72; margin: 0 0 1.15rem 1.15rem; }

/* Pull quote — internal texture for a long read, and a place for the sentence
   that actually matters. */
.pquote {
  margin: 2.2rem 0; padding: 0 0 0 1.4rem; border-left: 3px solid var(--brand-amber);
  font-size: clamp(1.14rem, 2.3vw, 1.38rem); line-height: 1.5; color: var(--ink-2);
  font-weight: 600; max-width: 46ch;
}

/* ═══════════════════════════════════════════════ Comparison ═══════════════
   A real <table> for genuinely comparable things — included vs not, ownership
   type vs what transfers. Used ONLY where two or more things are being weighed
   against the same criteria, which is the discipline that keeps it from
   becoming another universal grid. */
.cmp { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cmp caption { text-align: left; color: var(--muted-2); font-size: .88rem; padding-bottom: .8rem; }
.cmp th, .cmp td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th {
  font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); border-bottom: 2px solid var(--line-2); white-space: nowrap;
}
.cmp tbody th { font-weight: 700; color: var(--ink); width: 34%; }
.cmp td { color: var(--muted); }
.cmp .yes b { color: #1E7A46; }
.cmp .no  b { color: var(--muted-2); }
/* Never colour alone — every cell states its answer in words. */
.cmp__wrap { overflow-x: auto; }
@media (max-width: 620px) {
  /* `caption` was missing from this list. Once the table itself is display:
     block the caption keeps display: table-caption, so the browser wraps it in
     an anonymous table box that shrinks to min-content — the sentence rendered
     one word per line down a 40px column at 390px. Found by looking at the
     page; a section count and a DOM diff both call it correct. */
  .cmp, .cmp caption, .cmp tbody, .cmp tr, .cmp td, .cmp th { display: block; }
  .cmp thead { display: none; }
  .cmp tr { padding: .9rem 0; border-bottom: 1px solid var(--line); }
  /* `.cmp tbody th { width: 34% }` outranks `.cmp th { width: auto }` — one
     more element in the selector — so the row headers kept a 34% track after
     the table went to block layout. At 390 that is ~119px, and every row title
     wrapped every one or two words ("A second, / separately / installed /
     system") while the answer beneath it ran the full column. Same media query,
     same root cause as the caption above: desktop table sizing surviving into a
     layout that no longer has a table in it. */
  .cmp th, .cmp td, .cmp tbody th { border: 0; padding: .15rem 0; width: auto; }
  .cmp td::before { content: attr(data-label) " — "; font-weight: 700; color: var(--ink-2); }
}

/* ═══════════════════════════════════════════════ Evidence band ════════════
   Service pages needed something that says "this is what the work produces"
   without another card grid. A dark full-bleed band with a short statement and
   a set of hard facts — the service equivalent of the independence band. */
/* Tool qualification. Sits under the result, quiet enough not to compete with
   it and legible enough to actually read — the point is that somebody about to
   act on a number can see what it assumed, not that a disclaimer exists. */
.calc__fine {
  margin: 1.1rem 0 0; padding-top: .9rem;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .78rem; line-height: 1.5; color: #9FB1C6;
}

/* ── Verified reviews ────────────────────────────────────────────────────
   The base `.rev` is a two-column layout built for ONE quote beside the
   brokerage rail. With several reviews the quotes need to sit together, so
   `.revs` stacks them inside the first column and the rail keeps the second.

   Stars render only when the reviewer actually gave a rating, and there is no
   average and no count anywhere — see the schema note in EDITORIAL-MODEL. */
.revs { display: grid; gap: 1.6rem; }
.rev__stars { margin: 0 0 .5rem; color: var(--accent-dk); font-size: 1rem; letter-spacing: .12em; }
.rev__src { margin: .3rem 0 0; font-size: .82rem; color: var(--muted-2); }
.rev__src a { color: var(--muted-2); }
.rev__src a:hover { color: var(--blue); }
@media (max-width: 880px) { .revs { gap: 1.3rem; } }

/* ── Dark surfaces: headings, in ONE place ───────────────────────────────
   ROOT CAUSE of the unreadable "A report your client can act on."

   The base sheet sets `h1, h2, h3, h4 { color: var(--ink) }` as a direct
   element rule. A direct rule on the element beats an inherited colour no
   matter what the ancestor sets, so `.evid { color: #fff }` never reached its
   own heading — the heading stayed near-black on a near-black band.

   Three earlier dark components each solved this privately: .sec--ink, .s-deep
   and .interrupt all carry their own `h2 { color: #fff }`. That is a pattern
   somebody has to remember for every new dark surface, and .evid is the one
   where it was forgotten. Listing every dark surface here once means the next
   one inherits the fix instead of repeating the bug.

   .calc__out is included because its result panel is navy and its headings are
   emitted by an editable component. */
.evid h1, .evid h2, .evid h3, .evid h4,
.calc__out h1, .calc__out h2, .calc__out h3, .calc__out h4,
.indep h1, .indep h2, .indep h3, .indep h4,
.ftr h1, .ftr h2, .ftr h3, .ftr h4 { color: #fff; }

/* The eyebrow is a PILL, not bare text — pale blue ground, blue label. On a
   dark band the existing rule recoloured the label amber and left the pale pill
   behind it, which measured 1.51:1. Amber on near-white is unreadable, and it
   sat directly above the heading the owner reported. On dark surfaces the pill
   takes a tinted ground so the amber has something to sit on. */
.evid .eyebrow,
.indep .eyebrow,
.calc__out .eyebrow {
  background: rgba(253, 185, 19, .13);
  border: 1px solid rgba(253, 185, 19, .28);
  color: var(--brand-amber);
}

.evid { background: var(--ink); color: #fff; padding: clamp(3rem, 6vw, 4.5rem) 0; }
.evid__grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(2rem,5vw,4rem); align-items: start; }
@media (max-width: 860px) { .evid__grid { grid-template-columns: 1fr; } }
.evid h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin: .6rem 0 0; max-width: 18ch; }
.evid .eyebrow { color: var(--brand-amber); }
.evid__rows { display: grid; gap: 0; }
.evid__row { padding: 1.05rem 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.evid__row:last-child { border-bottom: 0; }
.evid__row b { display: block; font-size: 1rem; margin-bottom: .22rem; }
.evid__row p { margin: 0; color: #A9BAD0; font-size: .92rem; line-height: 1.55; }

/* ═══════════════════════════════════════════ Brokerage trust rail ═════════
   Names, not logos. A brokerage logo is a trademark whose use implies a
   relationship we do not have and cannot document, and waiting weeks for
   permissions would hold up launch for no proportionate gain. A typographic
   rail carries the same social proof — these are transactions we actually
   worked in — without borrowing anyone's brand.

   Set in the site's own type at a weight and tracking that reads as
   deliberate rather than as unstyled text, and specifically NOT imitating any
   brokerage's own logo typography. If approved logo files arrive later they
   drop into the same <li> without restructuring the component. */
.brail { margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; }
.brail li {
  background: var(--white); display: flex; align-items: center; justify-content: center;
  padding: 1.15rem .9rem; text-align: center;
  font-size: .95rem; font-weight: 700; letter-spacing: .015em; color: var(--ink-2);
}
.brail li img { max-height: 1.6rem; width: auto; }
.brail__note { margin-top: .9rem; font-size: .84rem; color: var(--muted-2); max-width: 74ch; }


/* ═══════════════════════════════════════════ Brokerage trust band ═════════
   Names set in the site's own typeface. It must NOT read as a row of facsimile
   logos: no drop shadows, no coloured plates, no attempt at anyone's brand
   lettering. Reproducing a brokerage's logotype in CSS would be the same claim
   as reproducing the logo file, made worse by being an imitation.

   Two variants, doing two different jobs:
     .brok--rail       restrained, homepage, beside a review — must not shout
     .brok--editorial  two-row typographic band on /realtors/, where the social
                       proof is the point of the section and has room to carry
                       weight                                                */
.brok__eyebrow {
  font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 1rem;
}
.brok__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.brok__rows img { max-height: 34px; width: auto; display: block; }
.brok__note {
  font-size: .8rem; line-height: 1.55; color: var(--muted-2);
  margin-top: 1rem; max-width: 62ch;
}

/* Restrained rail — a quiet line of names. */
.brok--rail .brok__rows { gap: .55rem .9rem; }
.brok--rail .brok__rows li {
  font-size: .95rem; font-weight: 700; color: var(--ink-2);
  padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--white);
}

/* Editorial band — larger type, ruled rows, generous air. The rule sits on the
   list items rather than between two hardcoded rows, so six names or nine both
   look deliberate and nothing has to be re-authored when the list changes. */
.brok--editorial .brok__rows {
  gap: 0; border-top: 1px solid var(--line-2);
}
.brok--editorial .brok__rows li {
  flex: 1 1 clamp(9rem, 30%, 16rem);
  font-size: clamp(1.05rem, 2.1vw, 1.45rem);
  font-weight: 700; letter-spacing: -.01em; color: var(--ink);
  padding: 1.15rem 1.2rem 1.15rem 0;
  border-bottom: 1px solid var(--line-2);
}
.brok--editorial .brok__eyebrow { margin-bottom: 1.4rem; }

/* The empty state is a labelled placeholder, never a fabricated name. It reads
   as unfinished on purpose — that is preferable to reading as finished and
   being false. */
.brok__slot { color: var(--muted-2) !important; font-weight: 600 !important; font-style: italic; }

@media (max-width: 640px) {
  .brok--editorial .brok__rows li { flex-basis: 100%; font-size: 1.05rem; }
}


/* ═══════════════════════════════════════════ Focus in forced colours ══════
   The base stylesheet indicates focus with `outline: none; box-shadow: var(--ring)`.
   A box-shadow ring is perfectly visible normally — but Windows High Contrast /
   forced-colors mode DISCARDS box-shadow, and `outline: none` then leaves a
   keyboard user with no focus indicator at all on every control on the site.

   A transparent outline is invisible normally and is forced to a system colour
   in forced-colors mode, so the ring survives. This is additive: nothing about
   the normal appearance changes. */
@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}


/* ═══════════════════════════════════ Two measured contrast failures ═══════
   Both found by measuring rendered colour on the built pages rather than by
   reading the palette, which is why neither had been noticed.

   1. THE MOBILE CTA.  `.mnav a { color: var(--ink-2) }` styles every anchor in
      the mobile navigation panel — including the primary button, whose white
      text it overrides on specificity. The result is #2C3A4F on #2657C4:
      1.78:1, on the site's primary call to action, at the width where most
      realtors will see it. The desktop header button is unaffected and was
      always correct, which is exactly why this survived review.

   2. THE PROCESS NUMERALS.  `.spine__n` starts at --line-2 (#C7CBD4, 1.54:1 on
      white) and is repainted --blue when the reveal observer adds `.in`. With
      JavaScript unavailable the observer never runs and the step numbers stay
      at 1.54:1 permanently. CLAUDE.md already records the rule this breaks:
      content must never depend on JavaScript succeeding. The accessible colour
      is now the DEFAULT and the pale state is applied only once JS has
      confirmed itself, so the animation is an enhancement rather than a
      precondition.                                                          */
.mnav a.btn--primary,
.mnav a.btn--primary:hover { color: #fff; }

/* PHASE 14: the Phase 11 fix above was correct about the cascade and still did
   not reach the screen. `.spine__step.in .spine__n` declares BOTH the blue and
   `transition: color .6s ease`, and when a value and its transition arrive in
   the same style change the paint stays at the start colour — so on a live page
   the numerals sat at #C7CBD4, 1.63:1, permanently. Measured in a real visible
   tab, not an offscreen frame: killing transitions flipped them to blue
   instantly, which is what proved the cascade was never the problem.

   The lesson is the same one Phase 11 wrote down and this rule half-learned:
   legibility must not be the end state of an animation. The numerals are now
   simply blue, at rest, in every state. `.rv` still fades the step in — an
   enhancement that changes opacity, not whether the content can be read. */
.spine__n,
.spine__step.in .spine__n,
.js-rv .spine__step:not(.in) .spine__n {
  color: var(--blue);
  transition: none;
}


/* Leased vs. Owned — the figure grid now carries real computed numbers, so a
   secondary note occasionally rides inside a value (a buyout compared against
   the full obligation). Kept quiet so it reads as a footnote to the figure
   rather than a second figure. */
.calc__delta {
  display: block; margin-top: .2rem;
  font-size: .78rem; font-weight: 600; color: var(--muted-2);
}
/* REMOVED: a SECOND definition of .calc__grid, 540 lines below the first.
   It set a fixed two-column grid and, being later in the file, silently won
   everywhere — which is why .calc__grid--3 had no effect and the NEM
   comparison's three fields kept wrapping 2 + 1. The build's collision guard
   only compares the appended sheet against the base one, so a class colliding
   with ITSELF inside phase5.css sailed past it.

   Nothing needed the two-column version that the auto-fit default above does
   not already do, so it is deleted rather than renamed. */


/* ═══════════════════════════════════ Commitments (trust, no testimonials) ══
   Occupies the trust slot when there are no published testimonials, so the
   section carries substance rather than an explanation of what is missing.
   Three facts, evenly weighted — deliberately not cards, because these are
   statements rather than things to click. */
.commit { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); }
.commit__item { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.commit__item h3 {
  font-size: clamp(1.02rem, 1.9vw, 1.2rem); line-height: 1.3; margin-bottom: .5rem;
}
.commit__item p { color: var(--muted); font-size: .95rem; line-height: 1.6; }
@media (max-width: 860px) { .commit { grid-template-columns: 1fr; gap: 1.6rem; } }

/* The brokerage rail sits under the commitments when both are shown. */
.commit + .brok { margin-top: clamp(2rem, 4vw, 3rem); }


/* ═══════════════════════════════════════════ Locality directory ═══════════
   Every Served locality on /service-areas/. A compact multi-column list, not
   cards: this has to read well at 29 names and still work at 200, and cards
   would be a wall at either. Localities with a guide are links; the rest are
   plain text and no less served for it. */
.locs {
  list-style: none; margin: 0; padding: 0;
  columns: 4; column-gap: clamp(1.2rem, 3vw, 2.4rem);
}
.locs__item {
  break-inside: avoid;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .98rem;
  color: var(--ink-2);
}
.locs__item a { color: var(--blue); text-decoration: none; font-weight: 600; }
.locs__item a:hover { text-decoration: underline; }
/* A guide exists for this one — marked quietly, because the distinction is
   editorial and must never read as a difference in service. */
.locs__item--guide::after {
  content: "guide";
  margin-left: .5rem;
  font-size: .66rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted-2); vertical-align: .1em;
}
/* Limited / Confirm is usually two or three names. In a four-column ruled grid
   two names with underlines read as empty form fields, so this variant drops
   the columns and the rules and sets them inline. */
.locs--edge { columns: auto; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.locs--edge .locs__item { border: 0; padding: .25rem 0; color: var(--ink-2); }

@media (max-width: 1000px) { .locs { columns: 3; } }
@media (max-width: 720px)  { .locs { columns: 2; } }
@media (max-width: 430px)  { .locs { columns: 1; } }

/* ---- Portrait photograph inside a prose/photo pair -------------------------
   .aud-lead .ph-band stretches to the height of the prose column, which is
   right for a landscape crop and wrong for a 4:5 one: below 880px the layout
   collapses to a single column, the figure takes the full measure, and the
   aspect ratio turned a 720px-wide tablet into a 900px-tall photograph — taller
   than the viewport, with the prose it belongs to pushed off screen.

   Capping the width rather than the height keeps the crop intact; a max-height
   would fight aspect-ratio and hand the cropping back to object-fit. */
@media (max-width: 880px) {
  .aud-lead .ph-band--tall { max-width: 420px; margin-inline: auto; }
}