/* ===========================================================================
   sellmyhousefasthouston.net — below-the-fold styles.
   Palette (Houston Astros navy/orange) lives in critical.css :root.

   Layout is built to the brain's above-the-fold doctrine, which gives hard
   numbers rather than opinions:
     - sticky chrome <=48px mobile / <=64px desktop, with a CTA inside it
     - value prop + one social proof + one CTA inside the first 600px on mobile
     - trust badges BELOW the primary CTA, never above
     - >=40-60px padding around the primary CTA on desktop, >=24px mobile
     - max 3 interactive choices above the fold (Hick's Law)
     - tap targets >=48x48px
   tools/check-layout.ps1 measures these against the rendered page.
   =========================================================================== */

/* ---------- bands + rhythm -------------------------------------------------
   SECTION SEPARATION. The homepage read as one undifferentiated pale field and
   the client called it out: "there is still too much white space, we need to
   break up the sections somehow."

   Three causes, all fixed here rather than by hand-editing every template --
   band classes are assigned in ~20 places across home/city/situation/post, so a
   per-page fix would drift immediately.

   1. ADJACENT BANDS SHARING A BACKGROUND MERGED. The offer formula, its inline
      CTA and the situations grid were three consecutive tinted blocks, so ~1400px
      of page had no visible boundary at all. Same for areas (white) next to
      reviews (#FBFCFE "paper", which is 1% off white and invisible).
      -> Any two neighbouring bands of the same tone now get a hairline rule.
         Neighbours that already differ get nothing, because they don't need it.
   2. THE TINT WAS TOO WEAK to register as alternation at #F1F5FA.
      -> --band-tint is a separate, deeper token. --tint stays as-is for chips,
         table headers, callouts and definitions, which sit ON these bands and
         would disappear if the two moved together.
   3. PADDING DID THE WORK A BOUNDARY SHOULD DO. 3.25rem top and bottom = 104px
      of dead gap between sections, which reads as "unfinished", not "airy".
      -> Tightened, now that the boundary is explicit.
   =========================================================================== */
.band{padding:2.6rem 0}
.band--tint{background:var(--band-tint)}
.band--paper{background:#fff}       /* was #FBFCFE -- indistinguishable from white */
.band--tldr{padding:1.75rem 0 0}
.band--tldr + .band{padding-top:1.75rem}

/* Hairline only between same-tone neighbours. .band--navy is excluded: a dark
   band is already a hard boundary and a rule on it would look like a seam. */
.band:not(.band--tint):not(.band--navy) + .band:not(.band--tint):not(.band--navy){
  border-top:1px solid var(--line)}
.band--tint + .band--tint{border-top:1px solid #D7E3F2}

.section-head{text-align:center;max-width:52rem;margin-inline:auto;margin-bottom:1.6rem}
.section-head .lede{color:#41566F;font-size:1.03rem;margin:0 auto}
.section-head h2{text-wrap:balance;margin-bottom:0}

/* Accent rule under every centred section heading. Cheap, and it gives each
   section a visible starting mark instead of text floating in space. */
.section-head h2::after{content:"";display:block;width:52px;height:3px;
  background:var(--orange);border-radius:2px;margin:.8rem auto 0}
.section-head .lede{margin-top:1rem}
/* --orange-text, not --orange: at .72rem this is normal-size text and needs
   4.5:1. Brand orange gives 3.10:1 on white and 2.67:1 on a tinted band.
   Also duplicated in critical.css, because this element is above the fold and
   restyling it after paint moved the whole hero. The .hero override there
   switches to the light orange, since #B8480A on navy is only 2.56:1. */
.eyebrow{text-transform:uppercase;letter-spacing:.11em;font-size:.72rem;font-weight:800;
  color:var(--orange-text);margin:0 0 .55rem}
.hero .eyebrow{color:var(--orange-on-dark)}

/* ---------- article layout -------------------------------------------------
   Long-form pages used to render as a bare .wrap.prose, which picks up
   margin-inline:auto from .wrap and max-width:70ch from .prose. The result was
   a narrow column floating dead centre in a 1180px wrap with ~330px of empty
   space either side and nothing in it. The client called it: "on service pages
   the body text is all centered content, we need to design those pages better."

   Now it is a two-column article: measure-limited prose on the left, a sticky
   rail on the right carrying the offer card. That fixes three things at once.
   The dead space becomes useful, the reader always has the form in view on a
   2,000-word page, and the layout itself supplies the structure the alternating
   band backgrounds were straining to provide.
   =========================================================================== */
.article{display:grid;gap:2.5rem}
.article > *{min-width:0}
.article-body{max-width:70ch}
.article-aside{display:none}          /* single column until there is room */

@media (min-width:1040px){
  .article{grid-template-columns:minmax(0,1fr) 330px;gap:3.5rem;align-items:start}
  .article-body{max-width:none}
  .article-aside{display:block;position:sticky;top:76px}
}

.aside-card{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:1.35rem 1.4rem;box-shadow:0 10px 30px rgba(0,26,59,.09)}
.aside-card h3{font-size:1.05rem;margin:0 0 .3rem}
.aside-card .lede{font-size:.9rem;color:var(--muted);margin:0 0 1rem}
.aside-card .btn{width:100%}
.aside-facts{list-style:none;padding:0;margin:1.1rem 0 0;font-size:.86rem;
  border-top:1px solid var(--line);padding-top:.9rem;display:grid;gap:.5rem}
.aside-facts li{display:flex;gap:.5rem;align-items:flex-start;color:#22374F}
.aside-facts b{color:var(--navy)}
.aside-call{display:block;text-align:center;margin-top:.75rem;font-weight:700;
  font-size:.95rem}

/* Section rhythm inside one continuous article, now that the sections are not
   separate coloured bands. */
.article-body > section{padding:0 0 2.2rem}
.article-body > section + section{border-top:1px solid var(--line);padding-top:2.2rem}
.article-body > section > h2:first-child{margin-top:0}

.prose{max-width:70ch}
.prose h2{margin-top:2rem;text-wrap:balance}
.prose h3{margin-top:1.5rem}
.prose ul,.prose ol{padding-left:1.25rem}
.prose li{margin-bottom:.4rem}
.more-link{margin-top:1.1rem;font-weight:700}

/* ---------- trust bar ------------------------------------------------------
   Sits BELOW the hero and therefore below the primary CTA, per the trust-badge
   doctrine. Putting it above would push the form down and cost more than the
   badges earn. */
.trustbar{background:#fff;border-bottom:1px solid var(--line);padding:1.15rem 0}
.trustbar-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 1.5rem}
.trustbar-grid > *{min-width:0}
.trustbar-item{display:flex;gap:.65rem;align-items:center}
.trustbar-item strong{display:block;font-size:.92rem;color:var(--navy);line-height:1.25}
.trustbar-item span{display:block;font-size:.79rem;color:var(--muted);line-height:1.3}
.tb-icon{flex:0 0 auto;width:34px;height:34px;border-radius:8px;background:var(--tint);
  display:grid;place-items:center;font-size:1rem;line-height:1}

/* ---------- split (media + copy) ------------------------------------------ */
.split{display:grid;gap:1.75rem;align-items:center}
.split > *{min-width:0}
.split-media .map-block{display:block}
.split-media .map-frame{aspect-ratio:4/3;border-radius:14px;box-shadow:0 10px 30px rgba(0,26,59,.12)}
.split-caption{font-size:.85rem;color:var(--muted);margin:.6rem 0 0}

/* Story photo. The reference site's equivalent slot is a real photograph of
   sellers holding a SOLD sign, so this is framed as a photo, not a decorative
   panel — square-ish crop, hard shadow, caption strip. */
.story-photo{margin:0;position:relative;border-radius:14px;overflow:hidden;
  box-shadow:0 14px 36px rgba(0,26,59,.18)}
.story-photo img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.story-photo figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:1.6rem .9rem .55rem;font-size:.8rem;font-weight:600;color:#fff;
  letter-spacing:.02em;display:flex;justify-content:space-between;
  align-items:flex-end;gap:.75rem;flex-wrap:wrap;
  background:linear-gradient(to top,rgba(0,45,98,.82),rgba(0,45,98,0))}
/* Unsplash licence condition, not decoration: photographer credit must be
   visible. Quiet enough not to compete with the caption, legible enough to
   count as attribution. */
.photo-credit{font-weight:400;font-size:.68rem;opacity:.82;text-align:right}
.photo-credit a{color:#fff;text-decoration:underline}

/* ---------- steps ---------------------------------------------------------- */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:1.5rem}
.steps > *{min-width:0}
.steps li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.6rem 1.35rem 1.35rem;
  box-shadow:0 1px 2px rgba(0,26,59,.04)}
.steps h3{margin:0 0 .35rem;font-size:1.06rem}
.steps p{margin:0;color:#41566F;font-size:.96rem}
.steps--badge li{text-align:center;padding-top:2.5rem;position:relative;margin-top:20px}
.steps-note{text-align:center;margin:1.4rem auto 0;max-width:62ch;color:#41566F;font-size:.95rem}
.steps-note a{color:var(--navy);font-weight:600}
.steps-note a:hover{color:var(--orange)}
.step-badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;background:var(--orange);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:1.08rem;
  box-shadow:0 0 0 6px #fff,0 3px 10px rgba(235,110,31,.32)}
.band--tint .step-badge{box-shadow:0 0 0 6px var(--band-tint),0 3px 10px rgba(235,110,31,.32)}
.steps--numbered li{padding-left:3.6rem;position:relative;text-align:left;margin-top:0}
.step-n{position:absolute;left:1.15rem;top:1.35rem;width:2.1rem;height:2.1rem;border-radius:50%;
  background:var(--orange);color:#fff;display:grid;place-items:center;font-weight:800}

/* ---------- tables --------------------------------------------------------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.25rem;
  border-radius:12px;border:1px solid var(--line)}
.stat-table,.compare-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem;
  background:#fff}
.compare-table{min-width:640px}
.stat-table{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.stat-table th,.stat-table td,.compare-table th,.compare-table td{
  text-align:left;padding:.82rem .95rem;border-bottom:1px solid var(--line);vertical-align:top}
.stat-table tr:last-child td,.stat-table tr:last-child th,
.compare-table tbody tr:last-child td,.compare-table tbody tr:last-child th{border-bottom:0}
.stat-table thead th,.compare-table thead th{background:var(--tint);color:var(--navy);
  font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.compare-table tbody th{width:24%;font-weight:700;color:var(--navy)}
.compare-table td{color:#41566F}
.compare-table thead th.is-us{background:var(--navy);color:#fff}
.compare-table td.is-us{background:rgba(0,45,98,.05);color:var(--navy);font-weight:700}
.source-note{font-size:.86rem;color:var(--muted)}
.verified-on{color:var(--muted);font-size:.86rem}
.stat-caveat{background:#FFF6E9;border-left:3px solid var(--orange);padding:.7rem .9rem;
  border-radius:0 8px 8px 0;font-size:.92rem;color:#6B4A22;margin:.75rem 0}
.callout{background:var(--tint);border:1px solid var(--line);border-left:4px solid var(--orange);
  border-radius:0 12px 12px 0;padding:1.05rem 1.25rem}
.callout p{margin:0;color:#334A66;font-size:.97rem}

/* ---------- answer layer --------------------------------------------------- */
.tldr{border:1px solid var(--line);border-left:4px solid var(--orange);background:#fff;
  padding:1.05rem 1.3rem;border-radius:0 12px 12px 0;box-shadow:0 2px 10px rgba(0,26,59,.05)}
.tldr-label{text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;font-weight:800;
  color:var(--orange-text);margin:0 0 .3rem}
.tldr-body{margin:0;font-size:1.04rem}
.definition{background:var(--tint);border-radius:10px;padding:.85rem 1rem;margin:1.25rem 0}
.definition p{margin:0}
.verdict{font-weight:600;border-top:1px solid var(--line);padding-top:.9rem;margin-top:1.25rem;color:var(--navy)}

/* ---------- cards ---------------------------------------------------------- */
.cards{list-style:none;padding:0;margin:0;display:grid;gap:1.15rem}
.cards > *{min-width:0}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.35rem;
  box-shadow:0 1px 2px rgba(0,26,59,.04);transition:box-shadow .16s,transform .16s}
.card:hover{box-shadow:0 10px 26px rgba(0,26,59,.10);transform:translateY(-2px)}
.card h2,.card h3{margin:0 0 .4rem;font-size:1.08rem}
.card p{margin:0 0 .4rem;color:#41566F;font-size:.95rem}
.card-q{font-style:italic;color:var(--muted)}
.badge{display:inline-block;background:var(--tint);color:var(--navy);border-radius:99px;
  padding:.15rem .6rem;font-size:.76rem;font-weight:700}
.cards--media{gap:1.25rem}
.card--media{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card-img{display:block;line-height:0;background:#E8EEF5}
.card-img img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:transform .35s ease}
.card--media:hover .card-img img{transform:scale(1.03)}
.card-body{padding:1rem 1.15rem 1.2rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.card-body h2,.card-body h3{margin:0;font-size:1.05rem}
.card-body h2 a,.card-body h3 a{color:var(--navy);text-decoration:none}
.card-body h2 a:hover,.card-body h3 a:hover{color:var(--orange)}
.card-body p{margin:0}
.card-more{margin-top:auto!important;padding-top:.4rem;font-weight:700;font-size:.92rem}

/* ---------- offer formula -------------------------------------------------- */
.formula{list-style:none;padding:0;margin:1.5rem 0;display:grid;gap:.7rem}
.formula > *{min-width:0}
.formula li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem 1.15rem;display:grid;gap:.2rem}
.formula-op{text-transform:uppercase;letter-spacing:.09em;font-size:.7rem;font-weight:800;color:var(--muted)}
.formula strong{font-size:1.04rem;color:var(--navy)}
.formula-note{font-size:.9rem;color:#41566F}
.formula-result{border-color:var(--orange);border-width:2px;background:#FFF7F1}
.tradeoff{background:#fff;border:1px solid var(--line);border-left:4px solid var(--navy);
  border-radius:0 12px 12px 0;padding:1.1rem 1.3rem}
.tradeoff h3{margin-top:0;font-size:1.05rem}

/* ---------- reviews --------------------------------------------------------
   Google reviews are wildly uneven in length -- ours run 180 to 520 characters
   -- which broke the original 3-across grid two ways at once: every card in a
   row stretched to match the tallest, so short reviews ended in 150px of empty
   card, and five reviews left the sixth slot blank. Both read as holes.

   Fix is a fixed number of cards per row (see reviews_section's $limit) plus a
   line clamp, so the row is uniform by construction. The full review text stays
   in the DOM -- the clamp is visual only -- so Googlebot and any AI crawler
   still sees complete review text, which is what the AggregateRating in schema
   is required to be backed by.
   =========================================================================== */
.reviews{list-style:none;padding:0;margin:0;display:grid;gap:1.15rem}
.reviews > *{min-width:0}
.review{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.35rem;
  box-shadow:0 1px 2px rgba(0,26,59,.04);display:flex;flex-direction:column}
.review blockquote{margin:.5rem 0 .8rem;font-size:.97rem;color:#22374F;flex:1 1 auto;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;overflow:hidden}
.review cite{font-style:normal;font-weight:700;font-size:.92rem;display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.review-date{font-weight:400;color:var(--muted);font-size:.85rem}
.reviews-more{margin-top:1.4rem;font-weight:700;text-align:center}
.review-badge{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;color:inherit;font-size:.93rem}

/* ---------- map ------------------------------------------------------------ */
/* align-items:center — the NAP column is roughly half the height of the map,
   so top-aligning it left a tall empty block on the right of the section. */
.map-block{display:grid;gap:1.25rem;align-items:center}
.map-block > *{min-width:0}
.map-frame{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--tint);
  box-shadow:0 10px 28px rgba(0,26,59,.10)}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Card the NAP so the right-hand column is a deliberate block rather than text
   floating in the middle of a tinted band. */
.band--tint .map-nap{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:1.35rem 1.5rem;box-shadow:0 6px 18px rgba(0,26,59,.06)}
.map-nap address{font-style:normal;line-height:1.6}
.map-phone{font-size:1.15rem;font-weight:800;margin:.5rem 0 .25rem}
.map-hours,.map-directions{font-size:.92rem;margin:.25rem 0}
.phone-link{text-decoration:none;font-weight:800;color:var(--navy)}

/* ---------- pill links ----------------------------------------------------- */
.pill-links{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.pill-links li a{display:inline-flex;align-items:center;min-height:40px;background:#fff;
  border:1px solid var(--line);border-radius:99px;padding:.5rem 1rem;text-decoration:none;
  font-size:.92rem;color:var(--navy);font-weight:600}
.pill-links li a:hover{border-color:var(--orange);color:var(--orange)}
.pill-links--compact li a{font-size:.86rem;padding:.4rem .8rem;min-height:36px}
.regions .region{margin-bottom:1.9rem}
.regions h3{font-size:1.02rem;margin-bottom:.4rem;color:var(--navy)}
.region-intro{color:var(--muted);font-size:.92rem;margin:0}

/* ---------- FAQ ------------------------------------------------------------ */
.faqs{display:grid;gap:1rem;max-width:78ch;margin-inline:auto}
.faq{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.35rem}
.faq h3{margin:0 0 .4rem;font-size:1.05rem}
.faq p{margin:0;color:#22374F}

/* ---------- posts ---------------------------------------------------------- */
.post-header{padding:2.5rem 0 1rem}
.post-header .wrap{width:min(820px,92vw)}
.post-meta{color:var(--muted);font-size:.9rem;display:flex;gap:1rem;flex-wrap:wrap}
.post-hero{width:min(820px,92vw);margin:0 auto 2rem}
.post-hero img{width:100%;aspect-ratio:16/9;max-height:380px;object-fit:cover;border-radius:14px}
.post-body{width:min(760px,92vw);margin-inline:auto}
.takeaways{background:var(--tint);border-radius:14px;padding:1.15rem 1.4rem;margin:0 0 2rem}
.takeaways h2{font-size:1.1rem;margin-top:0}
.takeaways ul{margin:0;padding-left:1.1rem}
.post-body figure{margin:1.75rem 0}
/* Inline SVG charts in post bodies. The blog standard is charts and tables, not
   stock photography: a bar chart of real days-on-market data is worth more to a
   seller than a picture of a house, and it cannot be mistaken for a stock image.
   height:auto is load-bearing. The SVGs carry width and height attributes so
   they reserve space and contribute no layout shift, but without height:auto the
   global max-width:100% squashes the aspect ratio on narrow screens. */
.chart{margin:1.9rem 0}
.chart svg{display:block;width:100%;height:auto;max-width:100%}
.chart figcaption{font-size:.82rem;color:var(--muted);margin-top:.7rem;line-height:1.5}

.sources{border-top:1px solid var(--line);padding-top:1.25rem;font-size:.92rem}
.sources h2{font-size:1rem}
.source-date{color:var(--muted)}
.source-date{color:var(--muted)}
.notice{background:#FFF6E9;border:1px solid #F3DCC0;border-radius:12px;padding:1rem 1.25rem}
.legal-note{font-size:.9rem}

/* ---------- lead form ------------------------------------------------------ */
.lead-form{display:grid;gap:.85rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lf-progress{list-style:none;display:flex;gap:.4rem;padding:0;margin:0 0 .35rem}
.lf-progress li{flex:1;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;font-weight:800;
  color:var(--muted);border-top:3px solid var(--line);padding-top:.4rem;min-width:0}
.lf-progress li.is-active{color:var(--orange);border-top-color:var(--orange)}
.lf-progress li.is-done{color:var(--good);border-top-color:var(--good)}
.lf-step{border:0;padding:0;margin:0;display:grid;gap:.75rem}
.lf-step[hidden]{display:none}
.lf-legend{font-weight:700;font-size:.98rem;padding:0;margin:0;color:var(--navy)}
.lf-row{display:grid;grid-template-columns:1fr;gap:.75rem}
.lf-row > *{min-width:0}
.lf-field{display:grid;gap:.28rem}
.lf-field label{font-size:.83rem;font-weight:700;color:#22374F}
/* 48px min height on inputs and buttons — the doctrine's tap-target floor. */
.lf-field input{width:100%;min-height:48px;padding:.78rem .8rem;border:1px solid #C6D2E0;
  border-radius:9px;font-size:1rem;font-family:inherit;background:#fff;color:var(--navy-ink)}
.lf-field input:focus{border-color:var(--navy);outline:2px solid rgba(0,45,98,.2)}
.lf-field.has-error input{border-color:#B3261E;background:#FFF6F5}
.lf-error{color:#B3261E;font-size:.82rem;margin:.15rem 0 0}
.lf-suggest{list-style:none;margin:.25rem 0 0;padding:.25rem;border:1px solid var(--line);border-radius:9px;
  background:#fff;box-shadow:0 8px 20px rgba(0,26,59,.14);max-height:230px;overflow:auto}
.lf-suggest li{padding:.6rem .65rem;border-radius:6px;cursor:pointer;font-size:.93rem;min-height:44px;display:flex;align-items:center}
.lf-suggest li:hover,.lf-suggest li:focus{background:var(--tint);outline:none}
.lf-consent{display:grid;gap:.4rem}
.lf-check{display:flex;gap:.6rem;align-items:flex-start;font-size:.89rem;line-height:1.45;font-weight:400}
.lf-check input{margin-top:.2rem;width:22px;height:22px;flex:0 0 auto}
/* CONSENT PARAGRAPH. Genuinely visible, because CallRail reads the label text and
   the InvestorFuse mapping depends on it. Scrolled rather than hidden: a 599-char
   legal wall above the submit button hurts completion, but display:none or
   height:0 risks CallRail not capturing it, which is how the mapping broke.
   max-height keeps it to about four lines with the rest available by scroll. */
/* max-height is an exact multiple of line-height (3 x 1.4em) so it clips on a
   line boundary instead of slicing one in half. The faint bottom border hints
   that there is more to scroll. */
.lf-consent-text{font-size:.72rem;line-height:1.4;color:var(--muted);
  max-height:4.2em;overflow-y:auto;padding-right:.4rem;
  border-bottom:1px dashed var(--line)}
.lf-consent-link{margin:.3rem 0 0;font-size:.78rem}
.lf-disclosure summary{font-size:.81rem;color:var(--muted);cursor:pointer;min-height:32px;display:flex;align-items:center}
.lf-disclosure p{font-size:.79rem;color:var(--muted);margin:.5rem 0 0;line-height:1.5}
.lf-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.lf-actions .btn{flex:1 1 auto}
.lf-next,.btn--submit{width:100%}
.lf-reassure{font-size:.82rem;color:var(--muted);text-align:center;margin:.15rem 0 0}

/* ---------- CTA band ------------------------------------------------------- */
.cta-band{background:linear-gradient(135deg,var(--navy-deep),var(--navy) 55%,#013B7A);
  color:#fff;padding:3.25rem 0;text-align:center}
.cta-band h2{color:#fff;text-wrap:balance;margin-bottom:.6rem}
/* DIRECT CHILD ONLY. As `.cta-band p` this leaked into the full lead form nested
   inside the navy CTA band: that form sits on a WHITE card, so the reassurance
   lines under the submit button rendered #C9DAEC on white at 1.42:1, effectively
   invisible, on all 130 city pages. `.cta-band p` (0,1,1) also out-specifies
   `.lf-reassure` (0,1,0), so the form's own colour never stood a chance. The band's
   own paragraph is a direct child of .wrap, so scoping to that fixes the leak
   without changing the band's appearance. */
.cta-band > .wrap > p{color:#C9DAEC;max-width:58ch;margin-inline:auto}
.cta-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem}
.cta-band .lead-form{background:#fff;border-radius:14px;padding:1.35rem;max-width:560px;
  margin-inline:auto;color:var(--navy-ink);text-align:left}
.risk-reversal{text-align:center}

/* ---------- mobile CTA bar ------------------------------------------------- */
.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:120;display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:var(--line);box-shadow:0 -4px 16px rgba(0,26,59,.16);padding-bottom:env(safe-area-inset-bottom)}
.mobile-cta a{min-height:52px;display:flex;align-items:center;justify-content:center;
  text-align:center;font-weight:800;text-decoration:none;font-size:.96rem}
.mobile-cta__call{background:var(--navy);color:#fff}
.mobile-cta__offer{background:var(--orange);color:#fff}
.mobile-cta.is-hidden{transform:translateY(110%);transition:transform .2s ease}
body{padding-bottom:56px}

/* ---------- footer ---------------------------------------------------------
   Rebuilt after "footer is sloppy". What was actually wrong:

   1. EVERY LINK WAS UNDERLINED. The global underline-all-links rule (good for
      in-body prose, where an underline is the affordance) applied here too, so
      the footer was ~25 underlined strings stacked in four columns. That alone
      accounted for most of the mess.
   2. NO BOUNDARY ABOVE IT. The dark CTA band sat directly on top of the dark
      footer -- ~750px of unbroken navy with the join invisible. Half of that is
      fixed by moving the banner up the page (see home.php); the accent rule
      below handles the rest, for pages that still end on a dark section.
   3. RAGGED COLUMNS. 32px min-height on every link -- a mobile tap-target rule
      -- was inflating desktop row spacing to nearly double the text size, and
      the two-column city list left "See every area" hanging under column one.
   =========================================================================== */
.site-footer{background:var(--navy-deep);color:#B9CBE4;padding:2.9rem 0 1.4rem;
  border-top:3px solid var(--orange)}
.footer-grid{display:grid;gap:2.25rem}
.footer-grid > *{min-width:0}
.footer-logo{max-width:250px;margin-bottom:.9rem}
.footer-name{font-weight:800;color:#fff;font-size:1.02rem;margin:0 0 .55rem;letter-spacing:.01em}
.site-footer address{font-style:normal;line-height:1.7;font-size:.93rem}
.site-footer p{margin:.45rem 0}

/* No underline in the footer. It is a navigational block, not prose. */
.site-footer a{color:#A9D2FB;text-decoration:none}
.site-footer a:hover,.site-footer a:focus-visible{color:#fff;text-decoration:underline}
.site-footer .phone-link{color:#fff;font-weight:700;font-size:1.05rem}

.footer-h{font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;font-weight:800;
  color:#7FA6D4;margin:0 0 .9rem}
.footer-col ul{list-style:none;padding:0;margin:0;display:grid;gap:.1rem;font-size:.93rem}
/* 32px tap target stays on touch; on desktop it just padded the rows out. */
.footer-col ul a{display:block;padding:.28rem 0}
.footer-cities{grid-template-columns:1fr 1fr;column-gap:1rem}
.footer-more{margin-top:.85rem !important;font-size:.9rem}
.footer-more a{font-weight:700}
.footer-hours{font-size:.88rem;color:#8FA8C6}
.footer-legal{border-top:1px solid rgba(255,255,255,.12);margin-top:2.2rem;padding-top:1.1rem;
  font-size:.79rem;color:#7E96B4;line-height:1.6}
.footer-legal p{max-width:92ch;margin:0}
.site-footer .review-badge{color:#DCE8F6;margin-top:.85rem}

@media (hover:none){
  .footer-col ul a{padding:.42rem 0}   /* restore the 32px-ish tap target */
}

/* ---------- mobile nav ----------------------------------------------------- */
@media (max-width:959px){
  .nav{display:block;margin-left:0}
  .nav-menu{display:none}
  .nav-menu.is-open{display:grid;position:absolute;left:0;right:0;top:100%;background:#fff;
    border-bottom:1px solid var(--line);padding:1rem 4vw;gap:.9rem;box-shadow:0 10px 24px rgba(0,26,59,.14)}
  .nav-menu a{min-height:44px;display:flex;align-items:center}
  .header-inner{position:relative}
}

@media (min-width:640px){
  .trustbar-grid{grid-template-columns:repeat(4,1fr)}
  .cards,.cards--media{grid-template-columns:repeat(2,1fr)}
  .lf-row{grid-template-columns:2fr .62fr .9fr}
  .lf-row:has(> :nth-child(2):last-child){grid-template-columns:1fr 1fr}
  /* align-items:center, not start -- the NAP column is about half the height of
     the map and top-aligning it left a tall void on the right. */
  .map-block{grid-template-columns:1.4fr 1fr;align-items:center}
  .split-media .map-block{grid-template-columns:1fr}
  .mobile-cta{display:none}
  body{padding-bottom:0}
  .steps{grid-template-columns:repeat(3,1fr)}
  .steps--timeline{grid-template-columns:repeat(2,1fr)}
  .reviews{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:960px){
  /* 4rem = 64px top AND bottom, so 128px of dead gap between every pair of
     sections. That is what "too much white space" was. The bands now carry a
     visible boundary, so the padding does not have to do that job. */
  .band{padding:3.1rem 0}
  .split{grid-template-columns:1fr 1.05fr;gap:3rem}
  /* GRID HOLE. blocks.php sets .split--copyonly when story_photo() returns no
     photo, which happens on the pages whose stock frame was defective and could
     not be replaced. Without this rule the block keeps both desktop columns and
     the copy sits in column 1 with the whole right half blank -- which reads as
     a broken layout, not as a design choice. One column, and capped at a
     readable measure so the text does not run the full 1200px. */
  .split--copyonly{grid-template-columns:1fr}
  .split--copyonly .split-copy{max-width:62ch;margin-inline:auto;text-align:center}
  .split--copyonly .split-copy .eyebrow{margin-inline:auto}
  .cards{grid-template-columns:repeat(3,1fr)}
  .cards--media{grid-template-columns:repeat(4,1fr)}
  .steps--numbered,.steps--timeline{grid-template-columns:repeat(3,1fr)}
  .reviews{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1.35fr 1fr 1.2fr 1fr}
  .formula{grid-template-columns:repeat(4,1fr)}
  .compare-table{min-width:0}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* Trust-bar marks drawn in CSS rather than an icon font — one less request and
   no tofu risk if the font fails. */
.tb-icon--star::before{content:"";width:0;height:0;border-left:7px solid transparent;
  border-right:7px solid transparent;border-bottom:11px solid var(--star)}
.tb-icon--pin::before{content:"";width:12px;height:12px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);background:var(--orange)}
.tb-icon--zero::before{content:"";width:14px;height:14px;border:3px solid var(--good);border-radius:50%}
.tb-icon--clock::before{content:"";width:14px;height:14px;border:2.5px solid var(--navy);
  border-radius:50%;box-shadow:inset 0 -5px 0 -3.5px var(--navy)}

/* Inline CTAs at decision points, per pillar-page-conversion-architecture.
   Centred and given real breathing room so they read as a deliberate pause in
   the page rather than a stray button. */
/* Continuation of the offer-formula band, so it must carry that band's
   background or it punches a white stripe through the middle of the section. */
.inline-cta{text-align:center;margin:0;padding:0 0 2.6rem;background:var(--band-tint)}
.cta-band--mid{padding:2.75rem 0}
.cta-band--mid h2{font-size:clamp(1.4rem,2.4vw,1.9rem)}