/* Mold Zero Services LLC - component layer (v4, premium design-build)

   FIFTEEN MATERIAL TREATMENTS across seventeen sections. No two ADJACENT sections share a
   treatment; no treatment appears more than twice; both repeats (T5 statement page, T6
   occlusion pair) are re-grounded, mirrored and re-proportioned rather than pasted.
   Treatment IDs are marked in the section comments so the discipline survives editing.

   HOUSE RULES, all of them earned from a rejection:
     - Variety lives in ground, geometry and container width. NEVER in type scale.
       Exactly one H2 size on the whole page, no escalation anywhere.
     - No uniform image overlay. Scrim depth scales with how much type sits on the photo.
       A single flat gradient across every image is the loudest template tell there is.
     - One card component, a fill token and a mirror flag. Consecutive cards never share
       a fill. Four "bespoke" cards is a token decision, not four design decisions.
     - All-caps is banned at 24px and above, banned in the header, banned in every button.
     - Nothing in the header is uppercase and nothing in the header is red.
     - No stars anywhere. No BBB. No aggregate rating. No stat dashboard. No pill eyebrow.
     - No em dashes. No emoji. Icons are one-weight red line pictograms at one stroke. */

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip; /* seatbelt only. Always verify scrollWidth vs clientWidth. */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--mz-header-h) + 16px);
}

body {
  margin: 0;
  background: var(--mz-white);
  color: var(--mz-charcoal);
  font-family: var(--mz-text);
  font-size: var(--mz-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
/* form controls do NOT inherit font-family, so the FAQ toggles and the submit button
   were silently falling back to Arial. Caught by enumerating computed families. */
button, input, textarea, select { font: inherit; color: inherit; }
figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 var(--mz-s2); }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-underline-offset: 3px; }

/* one face, Chivo, so WEIGHT carries the hierarchy. Statement lines, ghosted numerals and
   h1 at 900; h2, card titles and buttons at 700; UI at 600; body at 400; the founder quote
   and the one emphasis shift at 300. */
h1, h2, h3, .u-display {
  font-family: var(--mz-display);
  font-weight: 700;
  letter-spacing: -.022em;
  color: var(--mz-charcoal);
  margin: 0 0 var(--mz-s2);
  text-wrap: balance;
}
h1 { font-size: var(--mz-h1); line-height: 1.1; font-weight: 900; letter-spacing: -.032em; }
h2 { font-size: var(--mz-h2); line-height: 1.18; }   /* ONE size. Never escalated. */
h3 { font-size: var(--mz-h3); line-height: 1.3; font-weight: 700; letter-spacing: -.018em; }

/* focus rings live in T28, consolidated; see the note there */
.u-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 999; background: var(--mz-navy); color: #fff; padding: 10px 16px; border-radius: var(--mz-radius-s); }
.skip-link:focus { top: 8px; }

/* ============================================================ container */

.container { width: 100%; max-width: var(--mz-container); margin-inline: auto; padding-inline: var(--mz-gutter); }
.section { padding-block: var(--mz-section-y); }

/* ---- shared micro-components. Repeated deliberately, as system. ---- */

/* the 100x2 red rule appears ONLY above a left-aligned h2 */
.rule { display: block; width: 100px; height: 2px; background: var(--mz-red); margin-bottom: var(--mz-s3); }

/* 13px is the only size where caps are permitted. No container, ever. */
.eyebrow { font-family: var(--mz-text); font-size: var(--mz-eyebrow); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mz-ink-60); margin: 0 0 var(--mz-s2); }
.eyebrow--light { color: var(--mz-white-70); }

.lede { font-size: var(--mz-lede); line-height: 1.5; }
.measure { max-width: 62ch; }

/* one accent WORD inside a centred h2. Hard maximum of one per heading. */
.accent { color: var(--mz-red); }
/* the ONE red h2 on the page. Light grounds only: red on navy fails contrast. */
.h2--red { color: var(--mz-red); }

/* buttons are Title Case, never uppercase, never letterspaced. Square and chunky per the
   comps; the 3px slab under the filled variants is what makes them read pressable. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-weight: 800; font-size: 1.0625rem;
  letter-spacing: .005em; line-height: 1; text-decoration: none; white-space: nowrap;
  padding: 1.05em 1.6em; border: 1px solid transparent; border-radius: var(--mz-btn-radius);
  cursor: pointer; transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--red:hover { box-shadow: 0 8px 20px rgba(225,38,39,.32); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }
.btn--navy { background: var(--mz-navy); color: #fff; box-shadow: 0 3px 0 rgba(9,43,74,.45); }
/* the loud filled CTA every one of the four named comps pins to the header and repeats in
   the hero. Charcoal Title Case did not register as a call to action. */
.btn--red { background: var(--mz-red); color: #fff; box-shadow: 0 3px 0 rgba(122,15,16,.55); }
.btn--red:hover { background: #C21F20; color: #fff; }
.btn--navy:hover { background: var(--mz-navy-deep); }
.btn--charcoal { background: var(--mz-charcoal); color: #fff; }
.btn--charcoal:hover { background: var(--mz-navy); }
.btn--white { background: #fff; color: var(--mz-navy); }
.btn--white:hover { background: var(--mz-wash); }
.btn--hair { background: transparent; border-color: var(--mz-hair); color: var(--mz-charcoal); }
.btn--hair:hover { border-color: var(--mz-charcoal); }
.btn--hair-light { background: transparent; border-color: var(--mz-white-45); color: #fff; }
.btn--hair-light:hover { border-color: #fff; }
.btn--wide { width: 100%; }
.btn--lg { font-size: 1.15rem; padding: 1.1em 2rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* one-weight red line pictograms, one stroke weight shared across every set */
.ico { width: 48px; height: 48px; stroke: var(--mz-red); stroke-width: 1.25; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ico--sm { width: 20px; height: 20px; }

/* ============================================================ T1  top strip
   Modeled on hawkinsserviceco.com and bonedry.com, both of which put the phone and the
   service area in a dark strip ABOVE the white header so the header itself carries one
   loud CTA and nothing else. Josh named those two comps directly. */

.topstrip { background: var(--mz-navy-deep); color: rgba(255,255,255,.8); font-size: .875rem; }
.topstrip .container { display: flex; align-items: center; justify-content: space-between; gap: var(--mz-s3); min-height: 46px; }
.topstrip__left { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.topstrip__left svg { width: 15px; height: 15px; color: var(--mz-red); flex: none; }
.topstrip__left b { color: #fff; font-weight: 700; }
.topstrip__right { display: inline-flex; align-items: center; gap: 1.1rem; white-space: nowrap; }
.topstrip__right span { text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; font-weight: 600; }
.topstrip__tel { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; color: #fff; font-weight: 900; font-size: 1.35rem; letter-spacing: -.02em; }
.topstrip__tel svg { width: 17px; height: 17px; color: var(--mz-red); }
.topstrip__tel:hover { color: #fff; text-decoration: underline; }
@media (max-width: 1099px) { .topstrip__left, .topstrip__right span { display: none; } .topstrip .container { justify-content: center; } }

/* ============================================================ T2  header
   Logo left, nav centre, ONE filled brand-red CTA pinned right. All four named comps do
   exactly this: designerwindowsandsiding (gold), hawkinsserviceco (orange), Anchor
   (green), bonedry (red). The rev-4 charcoal Title-Case pill was too quiet to register. */

.header { position: sticky; top: 0; z-index: 80; background: #fff; box-shadow: 0 1px 0 rgba(15,58,98,.1); transition: box-shadow .2s ease; }
.header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--mz-s3); min-height: var(--mz-header-h); transition: min-height .2s ease; }
.brand { display: block; flex: none; line-height: 0; }
.brand img { width: 152px; transition: width .2s ease; }
/* condensing header: full presence at the top, quieter once the page is moving */
.header.is-condensed { --mz-header-h: 62px; box-shadow: 0 2px 14px rgba(9,43,74,.14); }
.header.is-condensed .brand img { width: 116px; }
.nav { display: flex; align-items: center; gap: .25rem; }
.nav a, .nav__dropbtn { padding: .6rem .65rem; border-radius: var(--mz-radius-s); font-size: .9rem; font-weight: 700; letter-spacing: .01em; color: var(--mz-charcoal); text-decoration: none; white-space: nowrap; }
.nav > a:hover, .nav__dropbtn:hover { color: var(--mz-red-ink); background: var(--mz-wash); }

/* dropdowns: a real company's nav, not a landing page's. White card panels with a title
   and a one-line description per item, the red slash appearing on hover. Open on hover,
   focus, or click (JS toggles .is-open for touch and for keyboard). */
.nav__drop { position: relative; }
.nav__dropbtn { display: inline-flex; align-items: center; gap: .45rem; background: none; border: 0; cursor: pointer; }
.nav__chev { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform .18s ease; }
.nav__drop.is-open .nav__chev, .nav__drop:hover .nav__chev { transform: rotate(225deg) translateY(-1px); }
.nav__panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 14px; width: 350px; opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s; z-index: 95; }
.nav__drop:hover .nav__panel, .nav__drop:focus-within .nav__panel, .nav__drop.is-open .nav__panel { opacity: 1; visibility: visible; }
.nav__panelin { background: #fff; border: 1px solid var(--mz-hair); border-top: 3px solid var(--mz-red); border-radius: 12px; box-shadow: 0 20px 48px rgba(9,43,74,.16); padding: .55rem; }
.nav__panelin a { position: relative; display: block; padding: .7rem .85rem .7rem 1.7rem; border-radius: 8px; white-space: normal; }
.nav__panelin a:hover { background: var(--mz-wash); color: inherit; }
.nav__panelin b { display: block; font-weight: 700; font-size: .95rem; color: var(--mz-charcoal); }
/* the hover slash lives in its own gutter so titles and descriptions share a left edge */
.nav__panelin b::before { content: "/"; position: absolute; left: .8rem; color: var(--mz-red); font-weight: 900; opacity: 0; transition: opacity .14s ease; }
.nav__panelin a:hover b::before { opacity: 1; }
.nav__panelin span { display: block; font-size: var(--mz-eyebrow); font-weight: 400; color: var(--mz-ink-60); margin-top: 1px; }
.header__act { display: flex; align-items: center; gap: .6rem; flex: none; }
.burger { display: none; align-items: center; gap: .5rem; padding: .7rem 1rem; flex: none; background: var(--mz-navy); border: 0; border-radius: var(--mz-btn-radius); cursor: pointer; color: #fff; font-weight: 800; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.burger__box { position: relative; width: 17px; height: 11px; flex: none; }
.burger__box span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: #fff; transition: transform .2s ease, opacity .16s ease, top .2s ease; }
.burger__box span:nth-child(1) { top: 0; }
.burger__box span:nth-child(2) { top: 4.5px; }
.burger__box span:nth-child(3) { top: 9px; }
body.is-locked .burger__box span:nth-child(1) { top: 4.5px; transform: rotate(45deg); }
body.is-locked .burger__box span:nth-child(2) { opacity: 0; }
body.is-locked .burger__box span:nth-child(3) { top: 4.5px; transform: rotate(-45deg); }
/* the six-item company nav needs 1240px; below that the burger takes over */
@media (max-width: 1279px) { .nav { display: none; } .burger { display: inline-flex; } }
@media (max-width: 1099px) { :root { --mz-header-h: 68px; } .brand img { width: 128px; } }
@media (max-width: 719px) { .header__act .btn { font-size: .9rem; padding: .85em 1.05em; } }
/* below 520 the burger owns the header action: the CTA plus burger measured 385px inside a
   375px viewport. The phone is already in the top strip and the quote panel is one screen
   down, so nothing is lost. */
@media (max-width: 519px) { .header__act .btn { display: none; } .brand img { width: 118px; } }

/* ============================================================ seams
   THE INTERSECTION SYSTEM. Every comp Josh named cuts its sections with a curve or
   bridges them with an object: Designer's grey ellipse into the quote form, Anchor's
   repeated wave, Hawkins' arcs with the van straddling the hero seam, Bone Dry's form
   panel straddling into the red band. Nothing butt-joints. Here the curve is not
   borrowed: it is the logo's own swoosh geometry, cut as a full-bleed divider at every
   white-to-navy transition, same arc every time, rising to the right like the mark. */

.seam { display: block; width: 100%; height: clamp(44px, 7vw, 100px); margin-bottom: -1px; }
.seam svg { display: block; width: 100%; height: 100%; }
/* pasadena's seam into the statement sits under the wash breadcrumb bar, not white */
.seam--onwash { background: var(--mz-wash); }
/* the footer's seam sits on the red exit band, not white */
.seam--onred { background: var(--mz-red); }

/* ============================================================ T16  red exit band
   Bone Dry closes its hero sandwich with a full-bleed red offer band; every comp closes
   the page with a loud CTA band. This is both, in the logo's red, entered and exited on
   the swoosh seam. The one place on the page where red is the GROUND, not the accent. */

.exit { background: var(--mz-red); color: #fff; padding-block: clamp(3rem, 2.2rem + 3vw, 5rem); }
.exit__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--mz-s4); align-items: center; }
.exit__line { font-family: var(--mz-display); font-weight: 900; font-size: clamp(2rem, 1.4rem + 2.3vw, 3.25rem); line-height: 1.08; letter-spacing: -.03em; margin: 0; color: #fff; }
.exit__act { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; justify-self: end; }
.exit .btn--white { color: var(--mz-red); }
.exit .btn--white:hover { background: #fff; color: #C21F20; }
.exit__tel { display: inline-flex; align-items: baseline; gap: .5rem; text-decoration: none; color: #fff; font-weight: 700; }
.exit__tel span { text-transform: uppercase; font-size: .82rem; letter-spacing: .1em; color: rgba(255,255,255,.75); }
.exit__tel strong { font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; border-bottom: 3px solid #fff; }
@media (max-width: 899px) { .exit__grid { grid-template-columns: 1fr; } .exit__act { justify-self: start; } }

/* ============================================================ T3  hero
   Full-bleed photograph of the work actually happening. All four named comps let the
   photo READ: Hawkins' techs, Bone Dry's family, Designer's lit house are bright and
   legible. The old uniform ~.9 navy tint drowned the one thing the comps lead with,
   so the scrim is now a hard left-to-right gradient: deep navy behind the type only,
   nearly clear over the tech. The hero's bottom edge is the swoosh arc, cut in white,
   with the charcoal lead panel straddling it (Bone Dry's move through Designer's curve). */

.hero { position: relative; isolation: isolate; background: var(--mz-navy); overflow: hidden; }
.hero__ph { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: 50% 32%; filter: brightness(1.04) saturate(1.03); animation: heroSettle 14s ease-out both; }
/* one slow settle on load, then still. Cinema, not a screensaver. */
@keyframes heroSettle { from { transform: scale(1.07); } to { transform: scale(1); } }
.hero__in > * { animation: riseIn .65s ease-out both; }
.hero__in > *:nth-child(2) { animation-delay: .08s; }
.hero__in > *:nth-child(3) { animation-delay: .16s; }
.hero__in > *:nth-child(4) { animation-delay: .24s; }
.hero__in > *:nth-child(5) { animation-delay: .32s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero__ph, .hero__in > * { animation: none; } }
.hero__scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(92deg, rgba(15,58,98,.94) 0%, rgba(15,58,98,.86) 30%, rgba(15,58,98,.5) 54%, rgba(15,58,98,.16) 76%, rgba(15,58,98,.06) 100%); }
/* on a phone the type spans the full width, so the left-to-right gradient leaves the
   sub-copy over the bright porch; the scrim goes vertical and deeper, photo still reads
   at the bottom where the tech and fogger sit. */
@media (max-width: 767px) {
  .hero__scrim { background: linear-gradient(180deg, rgba(15,58,98,.92) 0%, rgba(15,58,98,.8) 52%, rgba(15,58,98,.42) 100%); }
  .hero__ph { background-position: 64% 30%; }
}
.hero__seam { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 0; height: clamp(44px, 7vw, 100px); }
.hero__seam svg { display: block; width: 100%; height: 100%; }
.hero .container { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-height: clamp(540px, 74vh, 800px); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(8rem, 6rem + 7vw, 11.5rem); }
.hero__in { max-width: 780px; }
.hero__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; margin: 0 0 1rem; font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #9DC2E4; }
.hero__eyebrow span { white-space: nowrap; }
.hero__eyebrow i { font-style: normal; color: var(--mz-red); }

/* uppercase display returns. All four named comps set the hero in heavy caps at 56 to 66px;
   the rev-4 ban on caps above 24px was an overcorrection from rev 2's Archivo problem.
   66px at the top of the clamp, the comps' upper bound, still under the 76px statement. */
/* the BND hero pattern: the SMALL keyword line is the H1 (styled by .hero__eyebrow), and
   this big persuasive display line is a <p>. The h1..h3 element rules never see it, which
   is exactly the Anderson trap the pattern notes warn about, so it takes the full display
   spec explicitly. */
.hero__display { font-family: var(--mz-display); font-weight: 900; text-wrap: balance; font-size: clamp(2.6rem, 1.55rem + 3.9vw, 4.125rem); line-height: 1.0; letter-spacing: -.035em; text-transform: uppercase; color: #fff; margin: 0 0 1.1rem; }
/* Hawkins' brush underline, redrawn as the brand's own red swoosh: the one form Mold Zero
   owns (the arc under "Zero" in the mark), traced as an SVG background so it lives at the
   page's largest moment. Same background-image mechanics as the old gradient bar because
   box-decoration-break makes it follow line breaks, so the clause can wrap on a phone. The
   ::after version needed white-space:nowrap and blew the 375px viewport out to 446px. */
.hero__display em {
  font-style: normal;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 26' preserveAspectRatio='none'%3E%3Cpath d='M5 7Q110 30 215 5' fill='none' stroke='%23E12627' stroke-width='6.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% .26em; background-position: 0 101%; background-repeat: no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-bottom: .16em;
}
.hero__sub { font-size: var(--mz-lede); line-height: 1.5; color: #D6E6F4; max-width: 50ch; margin: 0 0 1.6rem; }
.hero__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.4rem; }
.hero__or { display: inline-flex; align-items: baseline; gap: .5rem; font-size: 1.05rem; font-weight: 700; color: #fff; text-decoration: none; }
.hero__or span { color: #9DC2E4; text-transform: uppercase; font-size: .82rem; letter-spacing: .1em; }
.hero__or strong { font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; border-bottom: 3px solid var(--mz-red); }
.hero__or:hover strong { color: #fff; border-bottom-color: #fff; }

/* Anchor Environmental's cert-badge row, in the only honest form available here: no BBB,
   no rating, no review count. Certifications and the written guarantee only. */
.herotrust { display: flex; flex-wrap: wrap; gap: .5rem 2.25rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.22); }
.herotrust div { display: inline-flex; align-items: baseline; gap: .5rem; font-size: 1rem; font-weight: 700; color: #fff; }
.herotrust b { color: var(--mz-red); font-weight: 900; }
@media (max-width: 767px) { .herotrust div { display: inline-flex; align-items: baseline; gap: .5rem; font-size: .95rem; font-weight: 700; color: #fff; } }

/* ============================================================ T4  quote panel
   Bone Dry Roofing's in-hero lead panel: a dark form block straddling the hero's bottom
   edge, so lead capture is IN the first screen rather than below it. */

.quote { position: relative; z-index: 3; margin-top: clamp(-9.5rem, -6.5rem - 5vw, -6.5rem); }
.quote__box { background: var(--mz-charcoal); border-radius: var(--mz-radius); padding: clamp(1.5rem, 1rem + 1.8vw, 2.25rem); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.quote__box h2 { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); text-transform: none; margin: 0 0 .5rem; }
.quote__box p { color: rgba(255,255,255,.75); font-size: .95rem; margin: 0; }
.quote__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; align-items: end; }
.quote__form .field { margin: 0; }
.quote__form .field label { color: rgba(255,255,255,.82); }
.quote__form input, .quote__form select { background: #fff; border-color: transparent; }
.quote__form .btn { grid-column: 1 / -1; }
.quote__fine { grid-column: 1 / -1; margin: 0; font-size: .78rem; color: rgba(255,255,255,.55); }
@media (max-width: 1023px) { .quote__box { grid-template-columns: 1fr; } }
@media (max-width: 639px) { .quote__form { grid-template-columns: 1fr; } }

/* ============================================================ T5  statement page */
/* used twice, at two grounds and two geometries. The typographic climax of the page
   arrives ~2400px below the fold, not in the hero. */

.stmt { position: relative; overflow: hidden; padding-block: clamp(4rem, 3rem + 4vw, 7rem); }
.stmt .container { position: relative; z-index: 1; }
.stmt--navy { background: var(--mz-navy); color: rgba(255,255,255,.8); }
/* the brand swoosh, drawn once at architectural scale under the page's biggest claim.
   Heavier than the origin fog hairlines so it reads as the mark's own form, and the arc
   sits low so it sweeps beneath the type instead of crossing through it. */
.stmt__swoosh { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55; }
.stmt__swoosh svg { width: 100%; height: 100%; }
.stmt__pad { height: clamp(1.5rem, 5vh, 3rem); }
.stmt__line { font-family: var(--mz-display); font-weight: 900; font-size: var(--mz-statement); line-height: 1.05; letter-spacing: -.035em; text-align: center; margin: 0 auto; max-width: 980px; text-wrap: balance; }
.stmt--navy .stmt__line { color: #fff; }
.stmt__foot { margin-top: 1.6rem; max-width: 60ch; margin-inline: auto; text-align: center; }
.stmt--navy .stmt__foot { margin-top: 1.6rem; max-width: 60ch; margin-inline: auto; text-align: center; }
/* second use: white ground, right-aligned paragraph in the left half, wider measure */
.stmt--white { background: #fff; }
.stmt--white .stmt__line { max-width: 1100px; font-size: var(--mz-statement-2); color: var(--mz-charcoal); }


/* the one mid-sentence face shift on the page. Emphasis moves without a bold, a colour
   or an italic. */
/* the one emphasis shift mid-sentence. Dropping 900 to 300 inside one line is a
   bigger move than a bold or a colour change, and it needs no second face. */
.switchface { font-weight: 300; }
@media (max-width: 767px) {   }

/* ============================================================ T6  occlusion pair */
/* depth from occlusion alone: no shadow anywhere on this page. Used twice, mirrored and
   re-proportioned, eight sections apart. */

.occl { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--mz-s3); align-items: stretch; }
.occl__panel { background: var(--mz-wash); border-radius: var(--mz-radius); padding: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.occl__card { background: var(--mz-navy); color: rgba(255,255,255,.85); border-radius: var(--mz-radius); padding: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem); display: flex; flex-direction: column; justify-content: center; }
.occl__card h2, .occl__card h3 { color: #fff; }
/* the card's phone line, matching the hero's or-call pattern. Without this the two spans
   rendered as one underlined run with no gap: "Or call or text(626) 671-8885". */
.utility__call { display: inline-flex; align-items: baseline; gap: .5rem; text-decoration: none; color: #fff; font-weight: 700; }
.utility__call strong { font-size: 1.35rem; font-weight: 900; letter-spacing: -.02em; border-bottom: 3px solid var(--mz-red); }
.utility__call:hover strong { border-bottom-color: #fff; }

/* mirrored second use: panel right, card left, card top-offset rather than centred */
.occl--mirror { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: stretch; }
.occl--mirror .occl__card { grid-column: 1; grid-row: 1; }
.occl--mirror .occl__panel { grid-column: 2; grid-row: 1; }
@media (max-width: 1023px) {
  /* minmax(0,1fr), not a bare 1fr: a bare track is min-content-floored, so a nowrap child
     expands it past the container. This override collapses BOTH occlusion pairs to one
     column; an unbounded regex once overwrote it with the desktop two-column rule and the
     inspection form ended up 458px wide inside a 375px viewport. */
  .occl, .occl--mirror { grid-template-columns: minmax(0, 1fr); gap: var(--mz-s3); align-items: stretch; }
  .occl__card, .occl--mirror .occl__card { grid-column: auto; grid-row: auto; }
  .occl--mirror .occl__panel { grid-column: auto; grid-row: auto; }
}

/* line items with no dollars on either side. The cost story is the SHAPE of the invoice. */
.items { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mz-s4); }
.items h3 { font-size: var(--mz-h3); margin-bottom: var(--mz-s2); }
.items li { padding: .55rem 0; border-top: 1px solid var(--mz-hair); font-size: var(--mz-body); }
.items li:first-of-type { border-top: 0; }
.items--out li { color: var(--mz-ink-60); }
.items__none { font-style: italic; color: var(--mz-ink-60); padding-top: .55rem; }
@media (max-width: 559px) { .items { grid-template-columns: 1fr; gap: var(--mz-s3); } }

/* ============================================================ T7  process
   Saturated navy band carrying five white step cards: the Hawkins move (white cards on
   a loud brand ground). This also fixes the page's dead middle, which ran four viewports
   of type-on-white between the statement and the services stack. Red numerals carry the
   sequence; the cards are the only white on the band. */

.proc { background: var(--mz-navy); color: rgba(255,255,255,.85); }
.proc h2 { color: #fff; }
.proc .lede { color: rgba(255,255,255,.85); }
.proc__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.proc__row { background: #fff; border-radius: var(--mz-radius); padding: 1.5rem 1.3rem 1.6rem; display: flex; flex-direction: column; }
.proc__n { font-family: var(--mz-display); font-weight: 900; font-size: 2.6rem; line-height: 1; color: var(--mz-red); letter-spacing: -.04em; margin-bottom: .85rem; }
.proc__row h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: -.018em; margin: 0 0 .45rem; color: var(--mz-charcoal); }
.proc__row p { margin: 0; font-size: .95rem; line-height: 1.55; color: rgba(63,65,65,.82); }
.proc__foot { margin-top: var(--mz-s4); font-size: var(--mz-lede); max-width: 68ch; color: rgba(255,255,255,.85); }
@media (max-width: 1199px) { .proc__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .proc__list {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--mz-gutter);
    margin-inline: calc(var(--mz-gutter) * -1); padding-inline: var(--mz-gutter);
    gap: 12px; padding-bottom: .75rem; -webkit-overflow-scrolling: touch;
  }
  .proc__row { flex: 0 0 min(280px, 78vw); scroll-snap-align: start; }
}

/* ============================================================ T8  four-fill stack */
/* ONE component, four times. Two variables only: the fill token and the image side.
   The four fills are the four grounds the page already uses. Consecutive cards never
   share a fill. This is a token decision, not four design decisions. */

.stack { display: grid; gap: var(--mz-s3); }
.svc { border-radius: var(--mz-radius); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.svc__body { padding: clamp(1.75rem, 1.2rem + 2vw, 4rem); display: flex; flex-direction: column; justify-content: center; }
.svc__media { min-height: 340px; background-size: cover; background-position: center; }
.svc h3 { font-size: var(--mz-h3-card); font-weight: 700; margin-bottom: .6rem; }
.svc p { margin-bottom: var(--mz-s2); }
/* the persistent cost slot. Never omitted, italic, deliberately smaller than body. */
.svc__cost { font-size: var(--mz-cost); font-style: italic; margin: 0 0 var(--mz-s3); }
.svc__link { font-weight: 700; font-size: 1rem; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; align-self: flex-start; }
/* fill tokens */
.svc--navy { background: var(--mz-navy); color: rgba(255,255,255,.82); }
.svc--navy h3 { color: #fff; } .svc--navy .svc__cost { color: rgba(255,255,255,.6); }
.svc--charcoal { background: var(--mz-charcoal); color: rgba(255,255,255,.82); }
.svc--charcoal h3 { color: #fff; } .svc--charcoal .svc__cost { color: rgba(255,255,255,.6); }
.svc--wash { background: var(--mz-wash); }
.svc--wash .svc__cost, .svc--white .svc__cost { color: var(--mz-ink-60); }
/* white needs a hairline to have an edge the other three do not need */
.svc--white { background: #fff; border: 1px solid var(--mz-hair); }
/* mirror flag */
.svc--flip .svc__body { order: 2; }
.svc--flip .svc__media { order: 1; }
/* one of the four carries no photograph at all */
.svc--noimg { grid-template-columns: 1fr; }
.svc--noimg .svc__body { padding-block: clamp(2.25rem, 1.5rem + 3vw, 4.5rem); }
.svc--noimg .svc__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mz-s4); align-items: start; }
@media (max-width: 899px) {
  .svc { grid-template-columns: 1fr; }
  .svc--flip .svc__body { order: 2; } .svc--flip .svc__media { order: 1; }
  .svc:not(.svc--flip) .svc__media { order: 2; }
  .svc__media { min-height: 240px; }
  .svc--noimg .svc__inner { grid-template-columns: 1fr; gap: var(--mz-s2); }
}

/* ============================================================ T9  origin */
/* white ground carrying a hairline drifting-fog curve field at 4%. Asymmetric split that
   breaks the container on ONE side only. */

.origin { position: relative; background: #fff; overflow: hidden; }
.origin__field { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .04; }
.origin__field svg { width: 100%; height: 100%; }
.origin .container { position: relative; z-index: 1; }
.origin__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.origin__media { margin-right: calc(var(--mz-gutter) * -1); }
.origin__media img { width: 100%; border-radius: var(--mz-radius); }
.origin__cap { margin-top: .6rem; font-size: var(--mz-eyebrow); color: var(--mz-ink-60); }
.origin__quote { font-family: var(--mz-display); font-weight: 300; font-size: clamp(1.5rem, 1rem + 1.9vw, 2.125rem); line-height: 1.35; letter-spacing: -.022em; margin: 0 0 var(--mz-s3); }
.origin__who { display: flex; align-items: center; gap: .85rem; padding-top: var(--mz-s2); }
/* the placeholder portrait ships at 56px, inline, never as a section image */
.origin__who img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.origin__who b { display: block; font-weight: 600; }
.origin__who span { font-size: var(--mz-eyebrow); color: var(--mz-ink-60); }
@media (max-width: 899px) { .origin__grid { grid-template-columns: 1fr; } .origin__media { margin-right: 0; } }

/* ============================================================ T10  clearance */
/* the ONE full-red h2 on the page lives here. Photograph under a flat heavy navy scrim
   with translucent navy panels as windows onto it. Heavy scrim is correct here because
   this section carries the most type over an image of anything on the page. */

.clear { position: relative; background: var(--mz-navy); color: rgba(255,255,255,.82); isolation: isolate; }
.clear__ph { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
/* near-solid at the top so the flat navy seam arc above blends into the photo texture */
.clear__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(15,58,98,.97) 0, rgba(15,58,98,.78) 300px); }
.clear h2 { color: #fff; }
/* copy + stacked windows left, the report document right and spanning both rows */
.clear__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); grid-template-areas: "copy report" "wins report"; column-gap: clamp(2rem, 4vw, 4.5rem); row-gap: var(--mz-s4); align-items: start; }
.clear__copy { grid-area: copy; }
.clear__win { grid-area: wins; display: grid; grid-template-columns: 1fr; gap: var(--mz-s2); }
.clear__win > div { background: rgba(15,58,98,.52); border: 1px solid rgba(255,255,255,.14); border-radius: var(--mz-radius); padding: 1.2rem 1.35rem; }
.clear__win h3 { color: #fff; margin-bottom: .4rem; }
.clear__win p { margin: 0; font-size: var(--mz-body); }

/* the clearance report itself, drawn rather than photographed. It is the one artifact a
   dry fog job produces, so it renders as a document: white paper, redaction bars where a
   real report carries the lab's numbers, and the caption does the honesty work. */
.report { grid-area: report; align-self: center; margin: 0; }
.report__paper { background: #fff; border-radius: var(--mz-radius); border-top: 6px solid var(--mz-red); padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); color: var(--mz-charcoal); }
.report__head { padding-bottom: .9rem; border-bottom: 1px solid var(--mz-hair); }
.report__lab { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: var(--mz-eyebrow); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mz-ink-60); margin: 0 0 .75rem; }
.report__lab span { letter-spacing: .02em; text-transform: none; font-weight: 400; white-space: nowrap; }
.report h3 { font-size: 1.35rem; letter-spacing: -.015em; margin: 0 0 .3rem; }
.report__meta { font-size: .875rem; color: var(--mz-ink-60); margin: 0; }
.report__meta i { font-style: normal; color: var(--mz-red); padding-inline: .3em; }
.report__tbl { width: 100%; border-collapse: collapse; font-size: .95rem; }
.report__tbl th { text-align: left; font-size: var(--mz-eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mz-ink-60); padding: .85rem .6rem .5rem 0; }
.report__tbl td { padding: .6rem .6rem .6rem 0; border-top: 1px solid var(--mz-hair); }
.report__tbl tbody tr:first-child td { border-top: 0; }
.report__tbl th:last-child, .report__tbl td:last-child { padding-right: 0; }
.report__pass { font-weight: 700; color: var(--mz-navy); }
.report__pass::before { content: "/ "; color: var(--mz-red); font-weight: 900; }
.redact { display: inline-block; width: 4.2em; height: .8em; vertical-align: -.06em; border-radius: 2px; background: var(--mz-charcoal); opacity: .82; }
.redact--s { width: 3em; height: .72em; }
.report__verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .85rem; margin-top: 1rem; padding-top: 1rem; border-top: 2px solid var(--mz-charcoal); }
.report__verdict b { font-size: 1.1rem; font-weight: 900; letter-spacing: -.01em; }
.report__verdict b::before { content: "/ "; color: var(--mz-red); }
.report__verdict span { font-size: .875rem; color: var(--mz-ink-60); }
.report__cap { margin-top: .75rem; font-size: var(--mz-eyebrow); color: rgba(255,255,255,.72); max-width: 60ch; }

@media (max-width: 899px) { .clear__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "report" "wins"; } }

/* ============================================================ T11  faq */
/* cool wash carrying WHITE rows: a deliberate figure/ground inversion of T8's wash card
   on white. Answers render OUTSIDE the row, on the wash. First row open by default so the
   cost answer is readable with zero interaction. */

.faq { background: var(--mz-wash); }
.faq__list { max-width: 900px; }
.faq__item + .faq__item { margin-top: .6rem; }
.faq__q { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mz-s3); background: #fff; border: 0; border-radius: var(--mz-radius-s); cursor: pointer; text-align: left; padding: 1.15rem 1.35rem; font-weight: 700; font-size: 1.25rem; letter-spacing: -.018em; line-height: 1.35; color: var(--mz-charcoal); }
.faq__q:hover { color: var(--mz-navy); }
.faq__pm { position: relative; width: 16px; height: 16px; flex: none; margin-top: .42em; }
.faq__pm::before, .faq__pm::after { content: ""; position: absolute; background: var(--mz-red); transition: transform .18s ease, opacity .18s ease; }
.faq__pm::before { left: 0; top: 7px; width: 16px; height: 2px; }
.faq__pm::after { left: 7px; top: 0; width: 2px; height: 16px; }
.faq__q[aria-expanded="true"] .faq__pm::after { transform: rotate(90deg); opacity: 0; }
.faq__a { display: none; padding: 1rem 1.35rem 1.4rem; max-width: 76ch; }
.faq__a.is-open { display: block; }

/* ============================================================ T12  reviews */
/* three near-touching bare cards on the SAME continuous white as the statement page above,
   separated from it by clear space rather than by a ground change. 11px gap. No stars. */

.revs { background: #fff; padding-top: clamp(3rem, 18vh, 9rem); }
.revs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.rev { background: var(--mz-wash); border-radius: var(--mz-radius); padding: 1.75rem 1.75rem 1.6rem; display: flex; flex-direction: column; }
.rev p { font-size: var(--mz-body); }
.rev__who { margin-top: auto; padding-top: var(--mz-s3); display: flex; align-items: center; gap: .75rem; }
.rev__who .rev__mono { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--mz-charcoal); color: #fff; display: grid; place-items: center; font-size: var(--mz-eyebrow); font-weight: 600; letter-spacing: .04em; }
.rev__who b { display: block; font-weight: 600; }
.rev__who span { font-size: var(--mz-eyebrow); color: var(--mz-ink-60); }
.revs__note { margin-top: var(--mz-s3); font-size: var(--mz-eyebrow); color: var(--mz-ink-60); max-width: 92ch; }
@media (max-width: 899px) { .revs__grid { grid-template-columns: 1fr; } }

/* ============================================================ T13  conditions band */
/* full-bleed zero-gutter four-column band that slices through the page. No radius, no
   shadow, seams touching. Alternating flat darks. */

.cond { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cond > div { padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); min-height: 420px; display: flex; flex-direction: column; justify-content: space-between; }
/* space-between pins the icon to the top of every panel and the copy to the bottom.
   flex-end pushed the whole group down, so icon height varied with paragraph length and
   the four icons landed on four different lines, 64px apart. */
.cond > div > *:last-child { margin-top: auto; }
.cond h3 { margin-top: auto; }
.cond h3 { font-size: var(--mz-h3-card); font-weight: 700; margin-bottom: .5rem; }
.cond p { margin: 0; font-size: var(--mz-body); }
.cond__a { background: var(--mz-navy); color: rgba(255,255,255,.8); }
.cond__a h3 { color: #fff; }
.cond__b { background: var(--mz-wash); }
.cond__c { background: var(--mz-charcoal); color: rgba(255,255,255,.8); }
.cond__c h3 { color: #fff; }
.cond__d { background: #fff; border: 1px solid var(--mz-hair); border-left: 0; }
.cond .ico { margin-bottom: var(--mz-s3); }
.cond__a .ico, .cond__c .ico { stroke: #fff; }
@media (max-width: 1023px) { .cond { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cond > div { min-height: 300px; } }
@media (max-width: 599px) { .cond { grid-template-columns: 1fr; } .cond > div { min-height: 0; } .cond__d { border-left: 1px solid var(--mz-hair); } }

/* ============================================================ form */

.form { display: grid; gap: .7rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.field label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .02em; color: var(--mz-charcoal); margin-bottom: .3rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: .78rem .85rem; border: 1px solid var(--mz-hair); border-radius: var(--mz-radius-s);
  font-family: var(--mz-text); font-size: var(--mz-body); color: var(--mz-charcoal); background: #fff;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--mz-navy); box-shadow: 0 0 0 3px rgba(15,58,98,.18); }
/* a 12% navy glow was the ONLY focus indicator on every form control, and it
   out-specified the global ring. Keyboard users got almost nothing on the one
   element on the page that actually needs it. */
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 3px solid var(--mz-red); outline-offset: 2px; }
.quote__form .field input:focus-visible { outline-color: #fff; }
.form__fine { font-size: var(--mz-eyebrow); color: var(--mz-ink-60); }
/* the commercial/HOA branch: revealed by JS when that select option is chosen. The
   explicit rule matters because .form__row's display:grid would beat the UA's [hidden]. */
.form__biz[hidden] { display: none; }
@media (max-width: 559px) { .form__row { grid-template-columns: 1fr; } }

/* ============================================================ T14/T15  footer
   T15 is the legal terminal: the only white band that sits under a dark section. */

.footer { background: var(--mz-navy); color: rgba(255,255,255,.74); }
.footer a { color: rgba(255,255,255,.74); text-decoration: none; }
/* .footer a is 0,1,1 and was beating .btn--white at 0,1,0, so the footer's primary CTA
   rendered white on white at contrast 1.0. Measured, not noticed. */
.footer a.btn--white { color: var(--mz-navy); }
.footer a.btn--hair-light { color: #fff; }

.footer a:hover { color: #fff; }
.footer .container { padding-block: var(--mz-s5); }
/* trust strip opens the footer: the same slash grammar as the hero, on one rule */
.footer__truststrip { display: flex; flex-wrap: wrap; gap: .6rem 2.5rem; padding-bottom: var(--mz-s3); margin-bottom: var(--mz-s4); border-bottom: 1px solid rgba(255,255,255,.16); }
.footer__truststrip div { display: inline-flex; align-items: baseline; gap: .5rem; font-size: .95rem; font-weight: 700; color: #fff; }
.footer__truststrip b { color: var(--mz-red); font-weight: 900; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--mz-s4); }
.footer h3 { color: #fff; font-weight: 700; font-size: var(--mz-eyebrow); letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--mz-s2); }
.footer__brand img { width: 190px; margin-bottom: var(--mz-s3); }
.footer__tel { display: inline-block; margin-top: var(--mz-s2); font-family: var(--mz-display); font-weight: 900; font-size: 1.75rem; letter-spacing: -.02em; color: #fff !important; border-bottom: 3px solid var(--mz-red); }
.footer__telsub { display: block; margin-top: .4rem; font-size: var(--mz-eyebrow); color: rgba(255,255,255,.6); }
.footer__links li { margin-bottom: .55rem; }
.footer__nap { display: grid; gap: .5rem; }
.footer__nap strong { color: #fff; font-weight: 600; font-size: 1.35rem; }
.footer__sub { display: flex; flex-wrap: wrap; gap: .7rem; padding-top: var(--mz-s3); margin-top: var(--mz-s3); border-top: 1px solid rgba(255,255,255,.16); }
.footer__sub .btn { flex: 1 1 auto; min-width: 190px; white-space: nowrap; }
/* coverage band closes the footer grid: their own published service area, LA County side */
.footer__cover { margin: var(--mz-s4) 0 0; padding-top: var(--mz-s3); border-top: 1px solid rgba(255,255,255,.16); font-size: .9rem; line-height: 1.7; color: rgba(255,255,255,.66); }
.footer__cover b { color: #fff; font-weight: 700; }
/* the only white band below a dark section, producing the page's largest scale step */
.legal { background: #fff; }
.legal .container { padding-block: 1.5rem; display: grid; gap: .5rem; font-size: .8rem; color: var(--mz-muted); }

@media (max-width: 899px) { .footer__grid { grid-template-columns: 1fr; } .footer__sub { grid-template-columns: 1fr; } }

/* ============================================================ fixed affordances */
/* desktop gets ONE pill. Mobile gets a bottom bar with a raised phone button breaking its
   top edge. One CTA per breakpoint plus the phone. No modal, no chat, no edge tab. */

.dockpill { display: none; }  /* removed: it collided with the seam card and duplicated the sticky header CTA */

.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; background: var(--mz-navy-deep); box-shadow: 0 -6px 24px rgba(7,26,40,.45); padding-bottom: env(safe-area-inset-bottom); }
.dock__in { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: .7rem .9rem; }
.dock a { display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .85rem .5rem; border-radius: var(--mz-radius-s); text-decoration: none; font-weight: 800; font-size: .95rem; }
.dock__call { background: rgba(255,255,255,.14); color: #fff; }
.dock__book { background: var(--mz-red); color: #fff; }
.dock a svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
/* the FAB breaks the dock's top edge by 26px, so body padding has to clear the dock
   AND the FAB, or the last element on the page sits under the phone button. */
/* The sticky call/book bar. The base rule above hides it; THIS is the rule that
   shows it below 1100px. It used to re-declare the whole base rule including
   `display: none`, so the bar never rendered at any width, while `body` kept
   reserving 112px at the bottom for it. The reserved space is what gives the
   defect away: nothing reserves room for something it meant to hide. Override
   only what changes. */
@media (max-width: 1099px) { .dock { display: block; } body { padding-bottom: 112px; } }

/* ============================================================ mobile flyout */

.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(9,43,74,.5); opacity: 0; visibility: hidden; transition: opacity .24s ease, visibility .24s; }
body.is-locked .scrim { opacity: 1; visibility: visible; }
.drawer { position: fixed; inset: 0; z-index: 95; background: var(--mz-navy); display: flex; flex-direction: column; transform: translateY(-100%); visibility: hidden; transition: transform .3s cubic-bezier(.4,0,.2,1), visibility .3s; }
body.is-locked .drawer { transform: translateY(0); visibility: visible; }
.drawer__head { background: #fff; display: flex; align-items: center; justify-content: space-between; padding: .9rem var(--mz-gutter); flex: none; }
.drawer__head img { width: 116px; }
.drawer__close { width: 44px; height: 44px; border: 1px solid var(--mz-hair); border-radius: 50%; background: none; color: var(--mz-charcoal); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--mz-s3) var(--mz-gutter); display: grid; gap: .6rem; align-content: start; }
.drawer__body > a, .acc__btn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 68px; padding: 0 1.25rem; background: rgba(255,255,255,.07); border: 0; border-radius: var(--mz-radius-s); color: #fff; text-decoration: none; font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; text-align: left; cursor: pointer; }
.drawer__body > a::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--mz-red); border-bottom: 1.5px solid var(--mz-red); transform: rotate(-45deg); }
/* accordion groups: Services and Service Areas expand in place, one at a time (site.js) */
.acc__chev { width: 9px; height: 9px; border-right: 2px solid var(--mz-red); border-bottom: 2px solid var(--mz-red); transform: rotate(45deg); transition: transform .2s ease; }
.acc__btn[aria-expanded="true"] .acc__chev { transform: rotate(225deg); }
.acc__panel { display: none; }
.acc__panel.is-open { display: grid; gap: 4px; padding: 6px 0 2px; }
.acc__panel a { display: flex; align-items: center; min-height: 52px; padding: 0 1.25rem 0 1.9rem; background: rgba(255,255,255,.04); border-radius: var(--mz-radius-s); color: rgba(255,255,255,.92); text-decoration: none; font-weight: 600; font-size: 1.02rem; }
.acc__panel a::before { content: "/ "; color: var(--mz-red); font-weight: 900; margin-right: .5rem; }
.drawer__foot { flex: none; padding: var(--mz-s3) var(--mz-gutter) var(--mz-s4); display: grid; gap: .75rem; border-top: 1px solid rgba(255,255,255,.16); }
.drawer__trust { margin: 0 0 .2rem; font-size: var(--mz-eyebrow); font-weight: 600; color: rgba(255,255,255,.8); }
.drawer__trust b { color: var(--mz-red); font-weight: 900; }
.drawer__foot .meta { font-size: var(--mz-eyebrow); color: rgba(255,255,255,.62); }

/* ============================================================ service-page detail bands
   Prose never sits alone on a full-width white void: every content band pairs the text
   with a designed object (a photo figure, a paper sheet, a card) on the other half. */

.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.split .prose { max-width: none; }
.split__fig { margin: 0; }
.split__fig img { width: 100%; border-radius: var(--mz-radius); }
.split__cap { margin-top: .6rem; font-size: var(--mz-eyebrow); color: var(--mz-ink-60); }
@media (max-width: 899px) { .split { grid-template-columns: minmax(0, 1fr); gap: var(--mz-s3); } }

/* the paper sheet: the clearance report's document language, generalized. White paper,
   red top rule, red-slash rows. Used for findings sheets and board packets. */
.sheet { background: #fff; border-radius: var(--mz-radius); border-top: 6px solid var(--mz-red); padding: clamp(1.4rem, 1rem + 1.4vw, 2rem); }
.sheet h3 { font-size: 1.35rem; letter-spacing: -.015em; margin: 0 0 .5rem; }
.sheet ul { margin: 0; }
.sheet li { position: relative; padding: .65rem 0 .65rem 1.4rem; border-top: 1px solid var(--mz-hair); font-size: var(--mz-body); }
.sheet li:first-of-type { border-top: 0; }
.sheet li::before { content: "/"; position: absolute; left: .1rem; color: var(--mz-red); font-weight: 900; }

/* trigger grid: reasons-to-book as compact wash cards, not a paragraph */
.trigger { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; }
.trigger > div { background: var(--mz-wash); border-radius: var(--mz-radius-s); padding: 1.1rem 1.2rem; }
.trigger b { display: block; font-weight: 700; margin-bottom: .25rem; color: var(--mz-charcoal); }
.trigger b::before { content: "/ "; color: var(--mz-red); font-weight: 900; }
.trigger p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--mz-ink-60); }
@media (max-width: 599px) { .trigger { grid-template-columns: 1fr; } }

/* ============================================================ local page */

.crumbs { background: var(--mz-wash); font-size: var(--mz-eyebrow); color: var(--mz-ink-60); }
.crumbs .container { padding-block: .9rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.crumbs li::after { content: "/"; margin-left: .45rem; color: var(--mz-hair); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { text-decoration: none; }

.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--mz-s5); }
.prose h2:first-child { margin-top: 0; }
.prose li { padding: .5rem 0 .5rem 1.35rem; position: relative; border-top: 1px solid var(--mz-hair); }
.prose li:first-of-type { border-top: 0; }
.prose li::before { content: ""; position: absolute; left: 0; top: 1.1em; width: 4px; height: 4px; border-radius: 50%; background: var(--mz-red); }

/* ============================================================ reveal */

.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
/* reveals must degrade to visible: two reference sites lost whole sections in capture
   because their content depended on a reveal firing. */
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }
.no-js .reveal { opacity: 1; transform: none; }


/* ============================================================ mobile density

   Measured at 375px before this block: 19,264px tall, 23.7 viewports of scrolling,
   1,741 body words, and every section collapsing to the same shape (heading, then
   full-width paragraphs). The desktop material variety did not survive the collapse,
   which is the one thing Charleene's gets right and we did not.

   Three moves, in order of measured impact:
     1. Horizontal snap strips for the reviews and the conditions band, so two sections
        break the vertical rhythm instead of adding eight stacked text blocks.
     2. Progressive disclosure on the two longest prose blocks (the founder story and the
        legal note). Visible on desktop, visible with no JS, collapsed on the mobile first
        read only.
     3. Shorter photo bands and less deliberate emptiness, since 22vh of clear space twice
        costs 358px on a phone but only reads as confidence on a desktop.                */

.more__btn {
  display: none; margin-top: var(--mz-s2); padding: .7rem 1.1rem;
  background: none; border: 1px solid var(--mz-hair); border-radius: var(--mz-pill);
  font-size: var(--mz-ui); font-weight: 600; color: var(--mz-charcoal); cursor: pointer;
}
.more__btn:hover { border-color: var(--mz-charcoal); }

@media (max-width: 899px) {
  /* --- 1. two sections become horizontal strips --- */
  .revs__grid, .cond {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--mz-gutter);
    padding-inline: var(--mz-gutter);
    gap: 12px; padding-bottom: .75rem; -webkit-overflow-scrolling: touch;
  }
  /* .revs__grid sits INSIDE a .container so it needs the negative margin to reach the page
     edge. .cond is full-bleed with no container, so the same negative margin pushed the
     document 20px wider than the viewport at every width below 900. Two different parents,
     two different rules. Caught by the overflow sweep, invisible in a screenshot. */
  .revs__grid { margin-inline: calc(var(--mz-gutter) * -1); }
  .rev, .cond > div {
    flex: 0 0 min(300px, 82vw); scroll-snap-align: start; min-height: 0;
  }
  .cond > div { border-radius: var(--mz-radius); padding: 1.5rem 1.4rem; justify-content: flex-start; }
  .cond__d { border-left: 1px solid var(--mz-hair); }
  .cond .ico { width: 38px; height: 38px; margin-bottom: var(--mz-s2); }

  /* --- 2. progressive disclosure --- */
  .more { display: none; }
  .more.is-open { display: block; }
  .more__btn { display: inline-block; }

  /* the clearance windows become the third strip, so three of the page's sections break
     the vertical rhythm instead of stacking more text blocks */
  .clear__win {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--mz-gutter);
    margin-inline: calc(var(--mz-gutter) * -1); padding-inline: var(--mz-gutter);
    gap: 12px; padding-bottom: .5rem; -webkit-overflow-scrolling: touch;
  }
  .clear__win > div { flex: 0 0 min(280px, 78vw); scroll-snap-align: start; }

  /* a phone form asks for four things. Email and free-text notes are desktop only:
     shorter form, less wall, and a better mobile conversion rate. */
  .field--desk { display: none; }

  /* --- 3. less height for the same information --- */
  .svc__media { min-height: 196px; }
  .stmt__pad { height: clamp(1.5rem, 5vh, 3rem); }
  .stmt { padding-block: clamp(4rem, 3rem + 4vw, 7rem); }
  .legal .container { padding-block: 1.5rem; display: grid; gap: .5rem; font-size: .8rem; color: var(--mz-muted); }
  .footer .container { padding-block: var(--mz-s4); }
  .footer__grid { gap: var(--mz-s3); }
}


/* the two direction-intake commitments rev 4 dropped: an owner-authorization qualifier and
   a photo upload, on a page that asks for a photo three times in copy. */
.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset legend { font-size: .78rem; font-weight: 700; letter-spacing: .02em; color: var(--mz-charcoal); margin-bottom: .35rem; padding: 0; }
.chips { display: flex; gap: .5rem; }
.chip { flex: 1 1 auto; position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span { display: block; text-align: center; padding: .55rem; font-size: .9rem; font-weight: 700; background: #fff; border: 1px solid var(--mz-hair); border-radius: var(--mz-radius-s); cursor: pointer; }
.chip input:checked + span { background: var(--mz-navy); border-color: var(--mz-navy); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--mz-red); outline-offset: 2px; }
.upload { display: flex; align-items: center; gap: .65rem; padding: .7rem .85rem; border: 1px dashed var(--mz-hair); border-radius: var(--mz-radius-s); background: #fff; font-size: var(--mz-ui); color: var(--mz-ink-60); cursor: pointer; }
.upload:hover { border-color: var(--mz-navy); color: var(--mz-charcoal); }
.upload svg { width: 20px; height: 20px; flex: none; color: var(--mz-red); }
.upload input { position: absolute; opacity: 0; width: 0; height: 0; }


/* the terminal legal block shipped as three raw stacked paragraphs. It is fine print, so
   it should read as one tidy rule-separated unit, not as body copy that ran out of styling. */
.legal__row { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; justify-content: space-between; font-weight: 600; color: var(--mz-charcoal); }
.legal__note { max-width: 100%; line-height: 1.55; padding-top: .7rem; border-top: 1px solid var(--mz-line-soft); margin: 0; }
.legal .more__btn { margin-top: .3rem; padding: .5rem .9rem; font-size: .8rem; }

/* ============================================================ T17  mega panels
   The six-page build could carry a 350px single-column dropdown. A 49-page estate
   cannot: ten services in one column reads as a dump, and 23 cities in one column is
   unusable. Both panels become columned cards on the same white/red-rule material as
   the original dropdown, so this is a wider panel, not a new visual language.

   The areas panel is position:fixed, centred on the viewport rather than on its
   trigger. A 1100px panel anchored to a nav item that sits near the middle of the bar
   overflows one side or the other depending on viewport; anchoring to the viewport is
   the only version that cannot. top follows --mz-header-h, which .is-condensed
   redefines, so the panel stays welded to the header as it shrinks. */

.nav__panel--wide { width: 700px; }
/* The areas panel is anchored to the HEADER CONTAINER, not to the viewport and
   not to its own trigger. Viewport-fixed with top:--mz-header-h was 44px too
   high, because the utility strip sits above the header and the variable only
   describes the header itself; the panel covered the logo and the CTA. Its own
   trigger is the wrong anchor too: a 1200px panel centred on a nav item that
   sits right of centre runs off one edge. The container is the only ancestor
   whose box is already the right width and the right height. */
.header .container { position: relative; }
.nav__drop--wide { position: static; }
.nav__panel--areas { position: absolute; top: 100%; left: 0; right: 0; width: auto; transform: none; padding-top: 0; }
.nav__panel--wide .nav__cols, .nav__panel--areas .nav__cols { display: grid; gap: var(--mz-s3); background: #fff; border: 1px solid var(--mz-hair); border-top: 3px solid var(--mz-red); border-radius: 12px; box-shadow: 0 20px 48px rgba(9,43,74,.16); padding: var(--mz-s3); }
.nav__panel--wide .nav__cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
/* Six regions, six columns, one row. Three columns over two rows sized every
   row to its tallest group and left a dead band across the middle of the panel. */
.nav__panel--areas .nav__cols { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--mz-s2); align-items: start; border-radius: 0 0 12px 12px; }
@media (max-width: 1379px) { .nav__panel--areas .nav__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nav__panel--wide .nav__panelin { border: 0; border-radius: 0; box-shadow: none; padding: 0; }
/* Two of the six region names wrap to two lines. Without a two-line floor the
   rules under the headings land at two different heights and the columns read
   as misaligned. The floor is stated in terms of this element's OWN
   line-height, because the inherited body leading (1.7) made 2.4em short of
   a single wrapped heading. The page is box-sizing: border-box, so the floor has
   to carry the padding and the rule as well as the two lines: 2.7em alone left
   the single-line columns 9px short, measured. */
.nav__col h4 { margin: 0 0 .55rem; line-height: 1.35; min-height: calc(2.7em + .5rem + 1px); padding-bottom: .5rem; border-bottom: 1px solid var(--mz-hair); font-size: var(--mz-eyebrow); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mz-navy); }
.nav__col ul { list-style: none; margin: 0; padding: 0; }
.nav__col li a { position: relative; display: block; padding: .38rem .5rem .38rem 1.2rem; border-radius: 6px; font-size: .9rem; font-weight: 600; color: var(--mz-charcoal); text-decoration: none; white-space: normal; }
.nav__col li a::before { content: "/"; position: absolute; left: .35rem; color: var(--mz-red); font-weight: 900; opacity: 0; transition: opacity .14s ease; }
.nav__col li a:hover { background: var(--mz-wash); }
.nav__col li a:hover::before { opacity: 1; }
/* the panel's own footer link: the hub is a destination, not a leftover */
.nav .nav__all { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: -1px; padding: .8rem 1rem; background: var(--mz-navy); border-radius: 0 0 12px 12px; color: #fff; font-size: .85rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.nav .nav__all:hover { background: var(--mz-navy-deep); color: #fff; }
.nav__all i { width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.nav__panel--areas .nav__all { position: relative; z-index: 1; }

/* drawer: 23 cities need grouping on a phone too */
.drawer__grp { margin: var(--mz-s2) 0 .2rem; font-size: var(--mz-eyebrow); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mz-white-45); }
.drawer__grp:first-child { margin-top: 0; }
.drawer__more { font-weight: 800 !important; color: #fff !important; }

/* ============================================================ T18  footer coverage
   Every city linked, grouped the way the nav groups them. This band is the crawl path
   of last resort: a page reachable only from a hover-dropdown is a page one JS failure
   away from being an orphan. */

.footer__coverage { margin-top: var(--mz-s5); padding-top: var(--mz-s4); border-top: 1px solid rgba(255,255,255,.14); }
.footer__coverage h3 { margin: 0 0 var(--mz-s3); }
.footer__covgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mz-s3) var(--mz-s4); }
.footer__cov b { display: block; margin-bottom: .3rem; font-size: var(--mz-eyebrow); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--mz-white-45); }
.footer__cov p { margin: 0; font-size: .9rem; line-height: 1.9; color: var(--mz-white-70); }
.footer__cov a { color: var(--mz-white-70); text-decoration: none; }
.footer__cov a:hover { color: #fff; text-decoration: underline; }
.footer__cov a::after { content: " /"; color: rgba(255,255,255,.28); }
.footer__cov a:last-child::after { content: ""; }
@media (max-width: 899px) { .footer__covgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .footer__covgrid { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================ T19  hub index
   Card grid for the services, resources and category hubs. Same 20px radius and hairline
   as every other card on the page; the red rule is the only decoration, because the hub's
   job is to get out of the way. */

.index { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: var(--mz-s3); }
.index__card { display: flex; flex-direction: column; padding: var(--mz-s4); background: #fff; border: 1px solid var(--mz-hair); border-top: 3px solid var(--mz-red); border-radius: var(--mz-radius); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.index__card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(9,43,74,.13); }
.index__card h3, .index__card .index__h { margin: 0 0 .5rem; font-size: var(--mz-h3-card); font-weight: 700; letter-spacing: -.018em; color: var(--mz-navy); }
.index__card p { margin: 0; color: var(--mz-ink-60); font-size: var(--mz-body); }
/* margin-top:auto, not a fixed gap: the card is a flex column and a fixed gap
   leaves the call to action floating at a different height in every card. */
.index__go { margin-top: auto; padding-top: var(--mz-s3); font-weight: 800; font-size: .9rem; color: var(--mz-red-ink); }
.index__go::after { content: " /"; }
.index__card--wash { background: var(--mz-wash); }

/* ============================================================ T20  area list
   The service-areas hub. Region is the organising unit, not the alphabet: somebody in
   Sierra Madre recognises "San Gabriel Valley" faster than they scan 23 names. */

.arealist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--mz-s4); }
.arealist__grp { padding: var(--mz-s4); background: var(--mz-wash); border-radius: var(--mz-radius); }
.arealist__grp h3 { margin: 0 0 .3rem; font-size: var(--mz-h3); font-weight: 700; letter-spacing: -.018em; color: var(--mz-navy); }
.arealist__note { margin: 0 0 var(--mz-s3); font-size: var(--mz-cost); font-style: italic; color: var(--mz-ink-60); }
.arealist__grp ul { list-style: none; margin: 0; padding: 0; }
.arealist__grp li { border-top: 1px solid var(--mz-hair); }
.arealist__grp li:first-child { border-top: 0; }
.arealist__grp a { position: relative; display: block; padding: .6rem 0 .6rem 1.25rem; font-weight: 700; color: var(--mz-charcoal); text-decoration: none; }
.arealist__grp a::before { content: "/"; position: absolute; left: 0; color: var(--mz-red); font-weight: 900; }
.arealist__grp a:hover { color: var(--mz-red-ink); }
.arealist__grp a span { display: block; font-size: var(--mz-eyebrow); font-weight: 400; color: var(--mz-ink-60); }

/* ============================================================ T21  article
   Long-form body for the resources layer. Measure is capped at 68ch like .prose; the
   only additions are the devices long-form needs and nothing else on the site has:
   a dateline, an inline contents list, and a pull quote. */

.article { max-width: 68ch; }
.article > * + * { margin-top: var(--mz-s3); }
.article h2 { margin-top: var(--mz-s5); }
.article h3 { font-size: var(--mz-h3); font-weight: 700; letter-spacing: -.018em; color: var(--mz-navy); }
.article ul, .article ol { padding-left: 0; list-style: none; }
.article li { position: relative; padding: .5rem 0 .5rem 1.35rem; border-top: 1px solid var(--mz-hair); }
.article li:first-of-type { border-top: 0; }
.article li::before { content: ""; position: absolute; left: 0; top: 1.1em; width: 4px; height: 4px; border-radius: 50%; background: var(--mz-red); }
.dateline { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin: 0 0 var(--mz-s3); font-size: var(--mz-eyebrow); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mz-ink-60); }
.dateline b { color: var(--mz-red); font-weight: 900; }
.toc { padding: var(--mz-s3) var(--mz-s4); background: var(--mz-wash); border-radius: var(--mz-radius); }
.toc h4, .toc .toc__h { margin: 0 0 .6rem; font-size: var(--mz-eyebrow); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mz-navy); }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { position: relative; padding: .32rem 0 .32rem 1.7rem; border: 0; counter-increment: toc; }
.toc li::before { content: counter(toc) "."; position: absolute; left: 0; top: .32rem; width: auto; height: auto; border-radius: 0; background: none; color: var(--mz-red); font-weight: 900; }
.toc a { color: var(--mz-charcoal); text-decoration: none; font-weight: 600; }
.toc a:hover { color: var(--mz-red-ink); }
.pull { margin-block: var(--mz-s4); padding-left: var(--mz-s3); border-left: 3px solid var(--mz-red); font-size: var(--mz-lede); font-weight: 300; line-height: 1.45; color: var(--mz-navy); }

/* ============================================================ T22  related
   Cross-links at the end of a page. Destinations are rotated per page by the build, so
   no page ends up reachable only from the nav with zero inbound body links. */

.related { padding-block: var(--mz-section-y); background: var(--mz-wash); }
.related h2 { margin-bottom: var(--mz-s3); }
.related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--mz-s2); }
.related__grid a { position: relative; display: block; padding: var(--mz-s3) var(--mz-s3) var(--mz-s3) 2.1rem; background: #fff; border: 1px solid var(--mz-hair); border-radius: var(--mz-radius-s); font-weight: 700; color: var(--mz-charcoal); text-decoration: none; }
.related__grid a::before { content: "/"; position: absolute; left: 1.1rem; color: var(--mz-red); font-weight: 900; }
.related__grid a:hover { border-color: var(--mz-red); color: var(--mz-red-ink); }
.related__grid a span { display: block; font-size: var(--mz-eyebrow); font-weight: 400; color: var(--mz-ink-60); }

/* ============================================================ T23  contact
   NAP, hours and a drawn service-area map. The map is inline SVG in brand colour rather
   than an embed: no API key, no third-party request on a page whose whole argument is
   that somebody independent checks the work. */

.napgrid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--mz-s5); align-items: start; }
.napcard { padding: var(--mz-s4); background: var(--mz-wash); border-radius: var(--mz-radius); }
.napcard h3, .napcard .napcard__h { margin: 0 0 var(--mz-s2); font-size: var(--mz-h3); font-weight: 700; letter-spacing: -.018em; color: var(--mz-navy); }
.napcard + .napcard { margin-top: var(--mz-s3); }
.naprow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--mz-s2); padding: .55rem 0; border-top: 1px solid var(--mz-hair); font-size: var(--mz-body); }
.naprow:first-of-type { border-top: 0; }
.naprow b { font-weight: 700; color: var(--mz-charcoal); }
.naprow span { color: var(--mz-ink-60); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.napbig { display: block; margin-bottom: .2rem; font-size: 1.75rem; font-weight: 900; letter-spacing: -.02em; color: var(--mz-navy); text-decoration: none; border-bottom: 3px solid var(--mz-red); }
.mapwrap { padding: var(--mz-s4); background: var(--mz-navy); border-radius: var(--mz-radius); }
.mapwrap svg { display: block; width: 100%; height: auto; }
.mapwrap figcaption { margin-top: var(--mz-s2); font-size: var(--mz-eyebrow); color: var(--mz-white-45); }
@media (max-width: 899px) { .napgrid { grid-template-columns: minmax(0, 1fr); gap: var(--mz-s4); } }

/* ============================================================ T24  state pages
   Thank-you and 404. One message, one way onward, on the wash ground so the page does
   not read as an error in the design as well as in the routing. */

.state { padding-block: clamp(4rem, 3rem + 6vw, 8rem); background: var(--mz-wash); text-align: center; }
.state__line { max-width: 22ch; margin: 0 auto var(--mz-s3); font-family: var(--mz-display); font-weight: 900; font-size: var(--mz-statement-2); line-height: 1.04; letter-spacing: -.035em; color: var(--mz-navy); }
.state p { max-width: 56ch; margin: 0 auto var(--mz-s4); font-size: var(--mz-lede); color: var(--mz-ink-60); }
.state__act { display: flex; flex-wrap: wrap; gap: var(--mz-s2); justify-content: center; }

/* ============================================================ T25  sitemap
   Every URL in one list. Cheap to build, and the one page that makes an orphan obvious
   to a human rather than only to a crawler. */

.sitemap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: var(--mz-s4); }
.sitemap h3, .sitemap .sitemap__h { margin: 0 0 .5rem; padding-bottom: .5rem; border-bottom: 2px solid var(--mz-navy); font-size: var(--mz-eyebrow); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mz-navy); }
.sitemap ul { list-style: none; margin: 0; padding: 0; }
.sitemap li { padding: .3rem 0; }
.sitemap a { font-size: .92rem; font-weight: 600; color: var(--mz-charcoal); text-decoration: none; }
.sitemap a:hover { color: var(--mz-red-ink); text-decoration: underline; }

/* ============================================================ T26  page head
   Utility and legal pages have no hero. They still need the keyword h1 the SEO
   pattern requires, so it gets the h2 size rather than the 66px display size:
   the rank order in tokens.css holds, and nothing on the page pretends to be a
   landing page it is not. */

.pagehead { padding-top: var(--mz-s5); }
.pagehead h1 { margin: 0 0 var(--mz-s2); font-size: var(--mz-h2); font-weight: 700; letter-spacing: -.022em; color: var(--mz-navy); }
.pagehead h1 em { font-style: normal; color: var(--mz-red); }
.pagehead .lede { margin-bottom: var(--mz-s4); }
/* the short hero: hubs and company pages carry the chrome but not the 74vh height */
.hero--short { min-height: 0; }
.hero--short .hero__in { padding-block: clamp(2.5rem, 2rem + 4vw, 5rem); }

/* ============================================================ T27  article rail
   The first cut of the article template was a 68ch column alone on a 1440px
   screen, which is the exact composition Josh rejected on the service pages
   ("This lacks detail and design", 2026-08-18). The fix there was to pair prose
   with a designed object; here it is a sticky rail carrying the contents and the
   one CTA, so the measure stays readable and the page is not half empty. */

.articlewrap { display: grid; grid-template-columns: minmax(0, 68ch) minmax(0, 300px); gap: var(--mz-s5); align-items: start; }
.articlewrap .article { max-width: none; }
.rail { position: sticky; top: calc(var(--mz-header-h) + var(--mz-s2)); display: grid; gap: var(--mz-s3); }
.rail .toc { margin: 0; }
.railcta { padding: var(--mz-s4); background: var(--mz-navy); border-radius: var(--mz-radius); color: #fff; }
.railcta h4, .railcta .railcta__h { margin: 0 0 .5rem; font-size: var(--mz-h3); font-weight: 700; letter-spacing: -.018em; color: #fff; }
.railcta p { margin: 0 0 var(--mz-s3); font-size: var(--mz-cost); color: var(--mz-white-70); }
.railcta .btn { width: 100%; }
.railcta__tel { display: block; margin-top: var(--mz-s2); font-size: var(--mz-eyebrow); color: var(--mz-white-45); text-align: center; }
.railcta__tel a { color: #fff; font-weight: 800; text-decoration: none; }
/* Below the breakpoint the rail is not a rail: contents belong above the article
   it indexes, and a sticky CTA on a phone fights the mobile dock. */
@media (max-width: 1023px) {
  .articlewrap { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
  .articlewrap .article { order: 2; }
  .rail { order: 1; }
  .railcta { display: none; }
}


/* ============================================================ T28  focus
   OFI 2, corrected. The first reading of this was wrong: a :focus-visible rule
   already existed and most controls did draw a ring. The detection used
   element.focus(), which does not match :focus-visible in Chromium, so it
   reported every control as bare. The REAL defect was narrower and worse: form
   controls carried `outline: none` with a 12% navy glow as their only indicator,
   at a specificity that beat the global rule. This block consolidates the two
   definitions and adds the white variant for dark grounds.

   :focus-visible rather than :focus, so a mouse click does not leave a ring
   behind, and a two-tone outline so it reads on both the white and navy grounds. */

:focus-visible {
  outline: 3px solid var(--mz-red);
  outline-offset: 2px;
  border-radius: 3px;
}
.stmt :focus-visible, .footer :focus-visible, .exit :focus-visible,
.drawer :focus-visible, .occl__card :focus-visible, .quote__box :focus-visible,
.mapwrap :focus-visible, .railcta :focus-visible {
  outline-color: #fff;
}
/* the skip link is 1x1 until focused, by design; give it a real box when it is */
.skip-link:focus-visible { outline-offset: 0; }

/* ============================================================ T29  tap targets
   OFI 11. Three non-inline controls measured under the 24px minimum (WCAG 2.2
   SC 2.5.8): the home page service links at 22px, the footer email at 20px, and
   back-to-top at 22px. Inline links inside a sentence are exempt and are left
   alone. */

.svc__link, .footer__nap a, .legal__row a, .more__btn { min-height: 24px; display: inline-flex; align-items: center; }

/* ============================================================ T30  print
   OFI 14. Somebody prints an inspection page or a clearance explainer; chrome,
   forms and decoration are noise on paper, and link targets are invisible. */

@media print {
  .topstrip, .header, .drawer, .scrim, .dock, .exit, .seam, .hero__seam,
  .quote, .related, form, .btn, .nav, .burger { display: none !important; }
  .hero { min-height: 0; color: #000; }
  .hero__ph, .hero__scrim, .stmt__swoosh { display: none !important; }
  .hero__display, .hero__sub, .hero__eyebrow { color: #000 !important; }
  .stmt, .stmt--navy, .footer, .occl__card { background: #fff !important; color: #000 !important; }
  .stmt__line, .occl__card h3, .occl__card p { color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .faq__a { display: block !important; height: auto !important; }
  a[href^="http"]::after, a[href^="/"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
  body { font-size: 11pt; }
}