/* WEB-1013 header refinement — single true sticky header (W23) — 2026-10-30.
   STATIC-header adaptation of the fleet pattern (pattern of record:
   ~/workspace/kv-astro/STICKY-HEADER-REQUIREMENT-20261026.md).
   Founder direction (2026-10-26 ~10:35, Rulebook W23): ONE true sticky
   header per site.
   Unlike the seven dual-header Brizy sites, this build has a SINGLE
   static header: one <section class="brz-section brz-section__header
   brz-section__header-type--static"> (id aeadbbed10dc8b9a9731185be95a84fde_…)
   holding logo / nav / phone CTA. There is no animated wrapper, no
   sticky-item div and no duplicate to hide — sticky behavior is ADDED
   to the one header, per the requirement document's own classification
   of this site ("Single static header only — no sticky behavior.
   Sticky must be ADDED, not deduplicated").
   MECHANISM — chosen by probe, not assumed (Playwright, file://,
   pristine tree, 2026-10-30; mechanism-results.json):
   (a) position:sticky on the header section — REJECTED. Computed
       position applied, but the header scrolled away completely
       (viewport y = -900 at scrollY 900 and -3000 at scrollY 3000, at
       1280 / 800 / 390): an ancestor confines the section to its own
       height, the same failure the pattern document records for the
       dual-header sites (its point 7). WEB-1000 should expect the
       same result and start from (b).
   (b) position:fixed on the header section + body padding-top equal
       to the measured header height per breakpoint — CHOSEN. Probe:
       header at y=0 at scrollY 0 / 900 / 3000 at all three widths;
       hero document-top exactly the padding (114 / 141 / 287);
       no horizontal overflow; zero page errors; the mobile menu
       still opens on a fresh-page click (body gains
       brz-mm-wrapper_opened).
   z-index 2000: Brizy's content sections carry z-index 1055 on their
   menu-item divs, which otherwise paint over a low-z-index header
   (pattern document point 5, measured on WEB-1017).
   NO JAVASCRIPT: the dual-header pattern's refine JS exists only to
   strip inert + aria-hidden from Brizy's animated wrapper. A static
   header carries neither attribute (verified on the section tag) and
   Brizy's JS never toggles them here, so a CSS-only build is the
   complete mechanism. Nothing about the header's own styling is
   changed — no colors, sizes or layout rules are touched.
   Brand tokens — 1013's OWN Brizy globals (--brz-global-color*),
   recorded for the file's provenance; the mechanism needs no color
   rules: global-color1 #242020 (charcoal — the phone CTA's rendered
   background), global-color2 #CF8D1F (gold — CTA text / accents),
   global-color3 #FFFFFF (header background as rendered),
   global-color4 #C99040, global-color5 #141210, global-color6
   #F9F4D5 (cream), global-color8 #C48A39. Rendered baseline
   (Playwright screenshots, 2026-10-30): white header, black nav,
   charcoal CTA with gold number, dark hamburger on white (clearly
   visible — no visibility pin arises, cf. WEB-1016), prominent CTA
   (no treatment pin arises, cf. WEB-1018).
   Header height (measured from the rendered pristine tree):
   113.78px at >=992px, 140.77px at 768–991px, 286.95px at <=767px
   (Brizy's stacked, centered mobile layout — the site's own design,
   preserved, not normalized). Body padding-top is the ceiling of
   each measurement so the hero is never covered.
   LA VERKIN DEDUPE (disclosed divergence): one page —
   concrete-repair-and-resurfacing-in-la-verkin-ut.html — carries a
   SECOND, page-local copy of the header section
   (id m7toyBen9qnz_m7toyBen9qnz) after the global one. The pristine
   rendered baseline shows BOTH stacked and visible (two full
   navigations; hero pushed down by exactly one extra header height:
   227.56px desktop / 573.91px mobile) — a pre-existing duplicate
   header, exactly what W23 requirement 1 forbids. Rule 3 below hides
   the surplus copy (the global header, first in the DOM and identical
   to every other page's, is kept). CSS-only and reversible like the
   rest of this file; no markup is edited. */

/* ---------- the one header, made persistent ---------- */
.brz .brz-section__header-type--static {
  /* Brizy's own static header section, fixed to the viewport top.
     !important beats Brizy's generated position:relative. Once fixed,
     the section leaves the flow; body padding-top (below) restores
     the space so nothing shifts and the hero is never covered. */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2000 !important;
}

/* ---------- the space the fixed header vacates ---------- */
body {
  /* Equals the measured header height per breakpoint band
     (113.78 / 140.77 / 286.95, ceilings). Brizy's own breakpoints:
     desktop >=992px, tablet 768–991px, mobile <=767px. */
  padding-top: 114px !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  body {
    padding-top: 141px !important;
  }
}
@media (max-width: 767px) {
  body {
    padding-top: 287px !important;
  }
}

/* ---------- La Verkin: hide the surplus duplicate header ---------- */
.brz .brz-section__header[id="m7toyBen9qnz_m7toyBen9qnz"] {
  /* The page-local second copy only (this id occurs on no other
     page). The global header above it stays the one header. */
  display: none !important;
}

/* =====================================================================
   WEB-1013 CORRECTION PASS — site-wide presentation layer (2026-11-06).
   Founder review items E (type), F (paragraph rhythm), G/N5 (form
   integration), U (nav states), Y (heading presence), and the item-B
   locations-hub classes. This file is linked on every content page,
   which is why the site-wide layer lives here. Palette: ink
   rgb(36,32,32), bronze rgb(196,138,57), cream rgb(249,244,213).
   ===================================================================== */

/* ---- E: two-family type system. Headings keep the display serif
   (DM Serif Text); every body family Brizy rotated through (Lato,
   Roboto, Palanquin, Work Sans, Noto Serif) resolves to the ONE body
   family, Overpass — already the site's nav/button/hero family and
   loaded by every fonts stylesheet on the site. ---- */
.brz.brz .brz-ff-lato, .brz.brz .brz-ff-roboto, .brz.brz .brz-ff-palanquin,
.brz.brz .brz-ff-work_sans, .brz.brz .brz-ff-noto_serif {
  font-family: 'Overpass', sans-serif !important;
}
.brz.brz .brz-ff-dm_serif_text, .brz.brz .brz-ff-libre_baskerville {
  font-family: 'DM Serif Text', serif !important;
}
.brz.brz .brz-rich-text p, .brz.brz .brz-rich-text li {
  font-family: 'Overpass', sans-serif;
}

/* ---- F: paragraph rhythm — real space between paragraphs ---- */
.brz.brz .brz-rich-text p { margin-bottom: 1.05rem !important; }
.brz.brz .brz-rich-text p:last-child { margin-bottom: 0 !important; }

/* ---- Y: headings stand out — a bronze rule under section headings
   (the founder's "little lines or separators" device) and honest
   space above them, so a heading reads as the start of a lesson. ---- */
.brz.brz .brz-rich-text h2 {
  border-bottom: 2px solid rgba(196, 138, 57, 0.45);
  padding-bottom: 0.4rem;
  margin-top: 2.3rem !important;
}
.brz.brz .brz-rich-text h3 { margin-top: 1.7rem !important; }

/* ---- U: nav states — bronze hover/focus, a settled dropdown ---- */
.brz.brz .brz-menu__item > .brz-a { transition: color 0.18s ease; }
.brz.brz .brz-menu__item > .brz-a:hover,
.brz.brz .brz-menu__item > .brz-a:focus-visible { color: rgb(196, 138, 57); }
.brz.brz .brz-menu__sub-menu {
  box-shadow: 0 14px 34px rgba(36, 32, 32, 0.18);
  border-radius: 0 0 10px 10px;
}

/* ---- G + N5: the form sits IN the design — inner padding so nothing
   runs to the edge, rounded panel and fields, the site's body font
   carried in through --kv-font (the per-page config set radius 0 and
   Lato; the pass unifies both). Consent and spam behaviour are the
   form script's, untouched. ---- */
.kv-form.kv-form {
  --kv-font: 'Overpass', system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  --kv-radius: 12px !important;
  padding: 26px 26px 20px !important;
  border-radius: 16px;
  box-shadow: 0 10px 34px rgba(36, 32, 32, 0.14);
}
@media (max-width: 560px) {
  .kv-form.kv-form { padding: 20px 16px 16px !important; }
}

/* ---- B: locations hub — service-area story, two featured towns,
   then the quiet key-town list. No link wall. ---- */
.hz-hub { max-width: 72rem; margin: 0 auto; padding: 2.6rem 1.1rem 1.2rem; color: rgb(36, 32, 32); font-family: 'Overpass', sans-serif; }
.hz-hub h2 { font-family: 'DM Serif Text', serif; font-weight: 400; font-size: 1.9rem; line-height: 1.2; margin: 0 0 0.9rem; border-bottom: 2px solid rgba(196, 138, 57, 0.45); padding-bottom: 0.45rem; }
.hz-hub > p { font-size: 1.06rem; line-height: 1.65; max-width: 52rem; margin: 0 0 1rem; }
.hz-hub-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1.8rem 0 0.6rem; }
@media (max-width: 720px) { .hz-hub-feats { grid-template-columns: 1fr; } }
.hz-hub-feat { margin: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 14px rgba(36, 32, 32, 0.22); background: #fff; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.hz-hub-feat:hover { transform: translateY(-5px); box-shadow: 0 12px 28px rgba(36, 32, 32, 0.28); }
.hz-hub-feat a { color: inherit; text-decoration: none; display: block; }
.hz-hub-feat img { display: block; width: 100%; height: auto; }
.hz-hub-feat figcaption { padding: 1rem 1.1rem 1.15rem; }
.hz-hub-feat h3 { font-family: 'DM Serif Text', serif; font-weight: 400; font-size: 1.35rem; margin: 0 0 0.45rem; }
.hz-hub-feat p { margin: 0; line-height: 1.6; font-size: 1rem; }
.hz-hub-feat .hz-hub-go { color: rgb(196, 138, 57); font-weight: 700; }
.hz-hub-towns { margin: 1.6rem 0 0; }
.hz-hub-towns h3 { font-size: 1.05rem; letter-spacing: 0.02em; margin: 0 0 0.7rem; }
.hz-hub-towns ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2.5rem; }
@media (max-width: 560px) { .hz-hub-towns ul { columns: 1; } }
.hz-hub-towns li { padding: 0.32rem 0; break-inside: avoid; }
.hz-hub-towns a { color: rgb(36, 32, 32); text-decoration: none; border-bottom: 1px solid rgba(196, 138, 57, 0.4); }
.hz-hub-towns a:hover, .hz-hub-towns a:focus-visible { color: rgb(196, 138, 57); }

/* WEB-1013 correction pass — hub repair rules (2026-11-06, post-screenshot fixes: class-role alignment) */
ul.hz-hub-towns{list-style:none;padding:0;columns:2;column-gap:2.5rem}
@media (max-width:560px){ul.hz-hub-towns{columns:1}}
.hz-hub-towns li a{font-weight:700}
.hz-hub-towns li span{margin-left:.55rem;color:rgba(36,32,32,.72)}
a.hz-hub-feat{display:block;color:rgb(36,32,32);text-decoration:none}
.hz-hub-feat-body{display:block;padding:1rem 1.1rem 1.15rem}
.hz-hub-feat-name{display:block;font-family:'DM Serif Text',serif;font-size:1.35rem;line-height:1.25;margin:0 0 .45rem}
.hz-hub-feat-line{display:block;line-height:1.6;font-size:1rem}
a.hz-hub-feat:hover .hz-hub-feat-name{color:rgb(196,138,57)}