/* Mold Zero Services LLC - design tokens (v4, premium design-build)
   Anchored to statelydesign.com (remodeling champion, chosen by eye over a conversion
   heuristic that scores it 45). Revs 1-3 were anchored to the restoration champion,
   which is the weakest reference in a 330-site corpus: restoration is franchise
   dominated and has no flagship tier at all. We were modelling the floor.

   THE THESIS. Mold Zero's finished work is invisible on purpose, so this page cannot be
   carried by result photography the way Stately's portfolio carries Stately. Type and
   evidence carry it. The largest moments are bare display sentences on empty ground, the
   one hero photograph is a lived-in Craftsman room that was never opened, and
   section-to-section material variety does the job a project gallery would normally do.

   ONE FACE. Chivo, weights 300 to 900, carries the entire page. Chosen by Josh off a
   seven-face specimen on 2026-08-17, not off a comp, which is the point: the three prior
   revisions each took typography from somewhere other than the mark and each got rejected.
     rev 1  Space Grotesk + IBM Plex Mono eyebrows   -> "too AI"
     rev 2  Archivo 800 uppercase + Public Sans      -> "typography is shit"
     rev 4a Instrument Serif + Figtree               -> "straight up AI"
   Instrument Serif came from a type menu and is now the default premium serif of
   AI-generated landing pages. Nunito Sans was briefly applied because it is
   statelydesign.com's measured display face, but it reads soft where the two sites Josh
   actually rated (owlroofing.com, hoffmannbros.com) read confident.
   Chivo is a neo-grotesk that hits hard at 900 without a personality quirk to date, and
   nine weights mean one family carries display, UI and body. A single-face page with real
   weight contrast reads authored; a display-plus-body pairing is what a generator reaches
   for. Archivo, Public Sans, Newsreader, Instrument Serif, Figtree and Nunito Sans are all
   deleted.

   VARIETY IS IN MATERIAL, NEVER IN TYPE SCALE. Owl Roofing varies ground, geometry and
   container width across 9,000px while every H2 stays 40px. One H2 size here, no
   escalation anywhere, including the conversion section. */

:root {
  /* ---- colour roles. Each has jobs and non-jobs; see site.css section comments. ---- */
  --mz-navy: #0F3A62;        /* grounds, statement page, footer, card fill, buttons.
                                Hue 210, inside the van wrap's own 209-214 family, so it
                                agrees with the logo grey instead of fighting it. */
  --mz-navy-deep: #092B4A;   /* the one darker navy, for the footer's inner rules */
  --mz-red: #E12627;         /* the EXACT logo red, measured as the pixel mode of the mark.
                                An earlier revision shipped #E02020 from a quantised read. */
  --mz-charcoal: #3F4141;    /* the EXACT logo grey: hue 180 at 2% saturation, i.e. neutral.
                                #304040 was 14% and read visibly teal beside the navy. */
  --mz-charcoal-2: #4C4F4F;  /* charcoal card interior rules only */
  --mz-white: #FFFFFF;
  --mz-wash: #EBF1F7;        /* derived from navy. Nav capsule, process ground, FAQ, form */
  --mz-hair: #D2DEEA;        /* the only hairline colour on the page */
  --mz-ink-60: rgba(63, 65, 65, .64);
  --mz-white-70: rgba(255, 255, 255, .72);
  --mz-white-45: rgba(255, 255, 255, .45);

  /* Nothing gold, cream, teal, mint, olive, sage or green appears anywhere. Stately's
     #E3A631, Charleene's #B2CE23, Owl's #666B53 and Myles' #F5AC23 stay with their
     owners. A previous build lifted a comp's palette wholesale; that is why this rule
     is written down. */

  /* ---- type ---- */
  --mz-display: "Chivo", "Helvetica Neue", Arial, sans-serif;
  --mz-text: "Chivo", "Helvetica Neue", Arial, sans-serif;

  /* rank order, which must hold:
     numerals 100 > statement 76/72 > h1 48 > one h2 40 = face-switch 40
     > card h3 26 > step h3 24 > lede 20 > body 17 > cost 16 > nav 15 > eyebrow 13
   WEIGHT does the work a second face used to: 900 for statement lines, the ghosted
   numerals and h1; 700 for h2, card titles and buttons; 600 for UI and labels; 400 for
   body; 300 for the founder quote and the one mid-sentence emphasis shift. Italic exists
   only on the persistent cost slot. */
  --mz-statement: clamp(2.25rem, 5.4vw, 4.75rem);  /* 76px desktop, 36px at 390 */
  --mz-statement-2: clamp(2.125rem, 5vw, 4.5rem);  /* 72px */
  --mz-numeral: clamp(4rem, 7vw, 6.25rem);         /* 100px, largest glyphs on the page */
  --mz-h1: clamp(2.25rem, 3.3vw, 3rem);            /* 48px */
  --mz-switch: clamp(1.875rem, 2.9vw, 2.5rem);     /* 40px, used exactly once */
  --mz-h2: clamp(2rem, 3vw, 2.5rem);             /* 40px. ONE size, every section. */
  --mz-h3-card: 1.625rem;                          /* 26px */
  --mz-h3: 1.5rem;                                 /* 24px */
  --mz-lede: 1.25rem;                              /* 20px */
  --mz-body: 1.0625rem;                            /* 17px */
  --mz-cost: 1rem;                                 /* 16px, italic, smaller than body */
  --mz-ui: 0.9375rem;                              /* 15px */
  --mz-eyebrow: 0.8125rem;                         /* 13px, the only place caps live */

  /* ---- space ---- */
  --mz-s1: .5rem;
  --mz-s2: 1rem;
  --mz-s3: 1.5rem;
  --mz-s4: 2.25rem;
  --mz-s5: 3.5rem;
  --mz-s6: 6rem;
  --mz-section-y: clamp(3.5rem, 2.4rem + 4.4vw, 6rem);

  /* ---- one container, one gutter ---- */
  --mz-container: 1300px;
  --mz-gutter: 20px;

  /* ---- chrome ---- */
  --mz-radius: 20px;   /* every card and panel on the page */
  --mz-radius-s: 8px;
  /* buttons are SQUARE-ish and chunky. All four named comps run rectangular CTAs
     (Designer's navy CALL NOW, Bone Dry's square GET A FREE QUOTE, Hawkins' bordered
     rectangles); the rounded pill was the last default-AI tell on the page. */
  --mz-btn-radius: 7px;
  --mz-pill: 999px;
  --mz-utility-h: 44px;
  --mz-header-h: 84px;
}

@media (min-width: 640px) { :root { --mz-gutter: 28px; } }
@media (min-width: 1024px) { :root { --mz-gutter: 40px; } }
@media (min-width: 1400px) { :root { --mz-gutter: 70px; } }