/* 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-visible { outline: 2px solid var(--mz-red); outline-offset: 3px; }
.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); 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 label { color: rgba(255,255,255,.7); }
.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,.12); }
.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 */

.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. */
@media (max-width: 1099px) { .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); } 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; }