/* ==========================================================================
   GARAGE VOLTAGE — shared tokens + components
   Extracted from premiergarage.com (captured 2026-08-28; Optimizely/EPiServer
   CMS, EPiServer Forms, Swiper, a Bootstrap 4.1.3 fork, served through a Home
   Franchise Concepts multi-brand bundle). Garage flooring, cabinets, wall and
   overhead storage; a national brand with 195 franchise territories.

   PHASE 2 CORRECTIONS. Four, all from the gap between declared and rendered.

   1. THE BRAND LIVES IN AN INLINE <style> BLOCK, NOT THE LINKED CSS. All four
      linked stylesheets are shared HFC infrastructure. PremierGarage's own
      identity, the electric blue, the lime hovers, the Oswald override, the
      parallelogram clip, the 4px heading underline and the blue CTA flood, is
      a 13.3 KB override injected into every page body. Downloading the linked
      CSS was necessary and not sufficient; the page bodies carried it.

   2. A HIDDEN MEGA-MENU PANEL RANKED 5TH BY PAINTED AREA on all three probed
      pages, 371,514 px2 on the homepage. It is not a ground: 1440 x 258 is
      exactly that number and the selector is .primary-nav__subnav, which sits
      at visibility:hidden. The probe's own backdrop guard did not fire because
      the panel is a quarter of the viewport rather than the whole of it. Not
      carried as a token.

   3. A COHERENT TEAL PALETTE IS DECLARED 66 TO 147 TIMES EACH AND PAINTS ZERO
      TIMES. #336972 / #223e42 / #2d5b60 / #1a2e30 / #aadddd belong to The
      Tailored Closet, a sister brand sharing the same bundle. A declaration
      count read alone would have put a teal in this kit.

   4. HOMEPAGE-ONLY DEAD-COLOUR CHECKING WOULD HAVE KILLED FOUR LIVE TOKENS,
      including the site's own body ground #f0f0f0, which the homepage's
      full-bleed bands cover entirely. Three pages were probed instead of one.

   THE IDENTITY is electric blue on white over a warm near-black, with lime as
   an interaction colour only. The lime is declared 2,725 times and paints
   10,922 px2 on 2 elements: it belongs in :hover, in the nav underline and on
   the social icons, and nowhere at rest. Treating it as a section ground would
   be wrong in a way every mechanical gate would pass.

   GEOMETRY is square by default. The rendered radius census returns 0px on 87
   boxes, 50px on 5 and 50% on 4: pill on buttons, disc on avatars, square
   everywhere else. There are no gradients in this system. Every button
   background on every probed page is a flat fill.

   FIVE SIGNATURE SHAPES, all the source's own and all transcribed:
   the parallelogram clip on card images, the underlined uppercase heading, the
   3px-border pill that flips to lime on hover, the oversized quote glyph, and
   a photo under a 90% blue flood.

   ONE FIDELITY CORRECTION, declared. The source requests Oswald 600 only and
   then forces font-weight:700 on every h2 and h3, so every section heading on
   the live site is browser-synthesised faux bold. This kit loads real Oswald
   700. Real 700 is narrower and tighter than the synthesised weight, so the
   source's measured leading does not transfer: h2/h3 leading is re-tuned to
   1.1 here. The underlined heading keeps line-height 2, which is load-bearing
   for the 4px underline at .4rem offset.
   ========================================================================== */

/* Lexend Deca 500 is requested because .banner__headline resolves to weight 500
   (see pattern 05); the source's own font request carries 300;400;500;600;700. */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Lexend+Deca:wght@300;400;500;600;700&family=Nunito+Sans:wght@400;600;700&display=swap');

:root {
  /* COLOR — grounds. #ffffff is the page and card ground; #f0f0f0 is the
     source's own body background and every soft interior band. */
  --paper: #ffffff;
  --paper-soft: #f0f0f0;
  --paper-warm: #fdfcfc;          /* .local-info, franchise pages only */

  /* COLOR — ink. The warm near-black is the most-rendered colour on every page
     probed (89 / 93 / 112 text elements). #221f20 is the title ink. */
  --ink: #221f20;
  --ink-body: #372f29;
  --ink-soft: #292929;
  --ink-slab: #000000;            /* .slider-hero wrapper ground */
  --ink-muted: rgba(34, 31, 32, .72);
  --ink-quiet: rgba(34, 31, 32, .55);   /* doc chrome only, never body copy */

  /* COLOR — brand. The blue paints every full-bleed band, every button border
     and every heading underline. The lime is a hover, never a ground. */
  --accent: #2f3ff3;
  --accent-deep: #19238e;
  --accent-lift: #4452f4;         /* form-input fill inside the blue card */
  --volt: #d8f852;

  /* COLOR — on dark */
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, .86);

  /* COLOR — rules */
  --border: rgba(34, 31, 32, .16);
  --border-strong: rgba(34, 31, 32, .3);
  --rule: #d0d0d0;

  /* TYPE — all three families render on the source and all three are free
     Google faces, so nothing is substituted. Only the display weight changed:
     real 700 instead of the source's synthesised bold over a 600 file. */
  --font-display: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Lexend Deca', system-ui, -apple-system, sans-serif;
  --font-utility: 'Nunito Sans', system-ui, -apple-system, sans-serif;

  /* TYPE — fluid ramp. Desktop targets measured live at 1440:
     hero 50/53, h2+h3 40 (36 under 64em), banner 50/53, card heading 19,
     button 18/24, body 16, small 13. Oswald is condensed, so the low ends can
     sit closer to the desktop value than a normal-width face would allow. */
  --text-display: clamp(2rem, 3.1vw + 1rem, 3.125rem);
  --text-h2: clamp(1.75rem, 2.1vw + .95rem, 2.5rem);
  --text-h3: clamp(1.375rem, 1.1vw + 1rem, 1.75rem);
  --text-h4: 1.1875rem;
  --text-lede: clamp(1.0625rem, .45vw + .9rem, 1.25rem);
  --text-small: .8125rem;
  --lead-display: 1.1;            /* re-tuned for real Oswald 700 */
  --lead-underline: 2;            /* kept: the 4px underline needs the room */

  /* SPACE */
  --gap: 24px;
  --gutter: 1.75rem;
  --section: 84px;
  --section-sm: 52px;
  --section-lg: 116px;
  --maxw: 1280px;

  /* SHAPE. Square is the default; the pill is the one exception. */
  --radius-pill: 50px;
  --radius-sm: 2px;
  --radius-disc: 50%;

  /* The house shadow: rgba(0,0,0,.16) 0 3px 6px, 7 rendered occurrences. */
  --shadow: 0 3px 6px rgba(0, 0, 0, .16);
  --shadow-panel: 0 1px 9px rgba(0, 0, 0, .16);

  --t-fast: 150ms;                /* the source's transition: all .15s linear */
  --ease: linear;

  /* Opt in to the shared sticky call bar. The nav actions row carries the
     national tel: link, and hiding it at 768px would delete the one control a
     phone visitor came for. Recorded in brand-spec.md as an addition. */
  --ds-callbar: 1;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 .5em;
  font-weight: 700;
  line-height: var(--lead-display);
  text-transform: uppercase;
  overflow-wrap: break-word;
}
h1, .h1, .display { font-size: var(--text-display); }
h2, .h2 { font-size: var(--text-h2); }
h3, .h3 { font-size: var(--text-h3); }
h4, .h4 { font-size: var(--text-h4); }

/* SIGNATURE 2 — the underlined uppercase heading, the system's main hierarchy
   device. Transcribed from .grid__heading / .who-we-are__title. line-height 2
   is not decoration: the 4px underline sits .4rem below the baseline and needs
   the descender room. */
.h-underline {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 4px;
  text-underline-offset: .4rem;
  line-height: var(--lead-underline);
  /* 700, not the component rule's 600: the source's own `h2,h3 { font-weight: 700
     !important }` is unscoped in the inline style of all 1,069 corpus pages, and
     every element this class lands on (.grid__heading, .who-we-are__title,
     .featured-reviews__title) is an h2 there, so the override wins and the source
     paints these bold. 600 read as a subhead one rank down. */
  font-weight: 700;
}
.on-dark .h-underline { text-decoration-color: var(--on-dark); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: .4em; }

.lede { font-size: var(--text-lede); line-height: 1.5; color: var(--ink-muted); }
.small { font-size: var(--text-small); }
.fine { font-size: var(--text-small); color: var(--ink-muted); }
.center { text-align: center; }

img { max-width: 100%; height: auto; display: block; }

/* The source ships no distinct focus ring, only a hover state. This is the one
   invention in the file and it is declared as such. */
:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }
.on-dark :focus-visible { outline-color: var(--volt); }

/* ==== layout ============================================================ */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: var(--section) 0; }
.section.tight { padding: var(--section-sm) 0; }
.section.wide { padding: var(--section-lg) 0; }
.section.alt { background: var(--paper-soft); }
.section.warm { background: var(--paper-warm); }

.section-head { max-width: 820px; margin: 0 auto 2.5rem; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.section-head p { color: var(--ink-muted); }

/* Dark register. The descendant rules below reach into ANY descendant that
   paints its own light ground, so every such component reasserts its ink in
   the LIGHT-GROUND REGISTER near the end of this file. Add new ones there. */
.on-dark { background: var(--ink-body); color: var(--on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--on-dark); }
.on-dark p, .on-dark li { color: var(--on-dark); }
.on-dark .lede { color: var(--on-dark); }

.on-accent { background: var(--accent); color: var(--on-dark); }
.on-accent h1, .on-accent h2, .on-accent h3, .on-accent h4 { color: var(--on-dark); }
.on-accent p, .on-accent li { color: var(--on-dark); }

.stack-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.stack-actions.center { justify-content: center; }

/* ==== buttons ===========================================================
   SIGNATURE 3, transcribed value for value from .btn-rounded: a 48px pill with
   a 3px border, Lexend Deca 700 18px/24px, the house shadow, and a .15s linear
   transition. The source's variant NAMES lie (--orange and --light-orange are
   both lime, --dark-blue is white-on-black), so the names here describe the
   rendered values instead. Every variant flips to lime on hover. */
.btn-rounded {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 5px 35px;
  text-align: center;
  text-decoration: none;
  color: var(--ink-body);
  border: 3px solid var(--accent);
  border-radius: var(--radius-pill);
  background-color: var(--paper);
  box-shadow: var(--shadow);
  transition: all var(--t-fast) var(--ease);
  cursor: pointer;
}
.btn-rounded:hover,
.btn-rounded:focus-visible {
  background-color: var(--volt);
  border-color: var(--ink-slab);
  color: var(--ink-slab);
}
/* the source's .btn-rounded--orange: lime border at rest, warm-black ink */
.btn-rounded--volt { border-color: var(--volt); color: var(--ink-body); }
/* the source's .btn-rounded--dark-blue: white fill, black ink, for blue bands */
.btn-rounded--white { border-color: var(--paper); background-color: var(--paper); color: var(--ink-slab); }
/* the source's .financing-button-blue: solid blue fill, white ink */
.btn-rounded--solid { border-color: var(--ink-slab); background-color: var(--accent); color: var(--on-dark); }
.btn-rounded--solid:hover,
.btn-rounded--solid:focus-visible { background-color: var(--volt); color: var(--ink-body); border-color: var(--ink-slab); }
.btn-rounded--sm { min-height: 40px; padding: 4px 22px; font-size: 1rem; }
.btn-rounded--wide { padding: 5px 53px; }

/* .link-arrow: the source's inline text CTA, uppercase, deep blue. */
.link-arrow {
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-deep);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 4px;
}
.link-arrow:hover { color: var(--accent); }
.link-arrow svg { width: 26px; height: 14px; fill: currentColor; flex-shrink: 0; }

/* ==== 01 utility bar ==================================================== */
.utility-bar { background: var(--paper); border-bottom: 1px solid var(--border); font-family: var(--font-utility); }
.utility-bar .container { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: flex-end; padding-top: 8px; padding-bottom: 8px; }
.utility-link { font-size: .8125rem; font-weight: 700; text-transform: uppercase; text-decoration: none; color: var(--ink-body); }
.utility-link:hover { color: var(--accent); }
.utility-featured-link { border: 2px solid var(--accent); border-radius: var(--radius-pill); padding: 5px 16px; color: var(--ink-body); text-decoration: none; font-size: .8125rem; font-weight: 700; }
.utility-featured-link:hover { background: var(--volt); border-color: var(--ink-slab); color: var(--ink-slab); }
/* The source's own rule is `.utility-phone{display:flex;align-items:center}` at
   20px/24px bold, and it paints on ONE line everywhere. In this kit the number
   is also carried in .nav .actions, which is a shrinkable flex item, so without
   these two declarations it compressed to 86px and broke after "(888)" and
   after "770-" on every built page at every desktop width. Nothing overflows,
   so the responsive gate cannot see it. */
.utility-phone { font-family: var(--font-body); font-weight: 700; font-size: 1.25rem; line-height: 24px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.utility-phone:hover { color: var(--accent-deep); }

.brand-switcher { background: var(--paper-soft); border-bottom: 1px solid var(--border); }
.brand-switcher .container { display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: center; padding-top: 9px; padding-bottom: 9px; }
.brand-switcher__label { font-family: var(--font-utility); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.brand-switcher__item { font-family: var(--font-utility); font-size: .8125rem; color: var(--ink-body); text-decoration: none; }
.brand-switcher__item:hover { color: var(--accent); }

/* ==== 02 primary nav (house Pattern D) ================================== */
.nav { background: var(--paper); border-bottom: 1px solid var(--border); position: relative; }
.nav > .container { display: flex; align-items: center; gap: 18px; padding-top: 14px; padding-bottom: 14px; }
.nav .brand-mark { display: block; flex-shrink: 0; }
.nav .brand-mark img { width: 200px; max-width: 46vw; }
.nav .links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-left: auto; align-items: center; }
.nav .links > a {
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 400;
  text-decoration: none;
  color: var(--ink-body);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav .links > a:hover { color: var(--ink-slab); border-bottom-color: var(--volt); }
.nav .links > a.is-accent { color: var(--accent); }
.nav .actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.nav-item { position: relative; }
.subnav { background: var(--paper-soft); border-top: 1px solid var(--border); }
.subgroup { margin: 5px 0 0; }
.subnav .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 22px; padding-top: 26px; padding-bottom: 26px; }
.subnav .container > * { min-width: 0; }
.subgroup__title { font-family: var(--font-body); font-size: 1.2em; font-weight: 600; text-transform: none; color: var(--ink); margin: 0 0 .5em; }
.subgroup__link { display: block; font-size: .875rem; font-weight: 300; line-height: 1.6em; color: var(--ink-body); text-decoration: none; padding: 3px 0; border-bottom: 2px solid transparent; width: fit-content; }
.subgroup__link:hover { color: var(--ink-slab); border-bottom-color: var(--volt); }
.subgroup__view-all { font-weight: 700; text-transform: uppercase; font-size: .8125rem; color: var(--accent-deep); }

/* ==== 03 rotating hero ==================================================
   The wrapper paints solid black under the photo. That is not belt and braces:
   the contrast walker resolves painted backgrounds only, and so does a slow
   connection before the image arrives. */
.slider-hero { background: var(--ink-slab); position: relative; }
.hero-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  background-color: var(--ink-slab);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.hero-content { max-width: 900px; text-align: center; }
.hero-headline {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 700;
  line-height: 1.06;
  text-transform: uppercase;
  color: var(--on-dark);
  text-shadow: 0 0 3px var(--ink-soft);
  margin: 0;
}
.hero-headline .line { display: block; color: inherit; }
.hero-teaser { color: var(--on-dark); text-shadow: 0 0 3px var(--ink-soft); margin: .8em 0 0; font-size: var(--text-lede); }
.hero-dots { display: flex; gap: 16px; justify-content: center; padding: 16px 0; background: var(--ink-slab); margin: 0; list-style: none; }
.hero-dot { width: 12px; height: 12px; border-radius: var(--radius-disc); background: var(--paper); opacity: 1; margin: 0; }
.hero-dot.is-current { background: var(--accent); }

/* ==== 04 inner hero ===================================================== */
.inner-hero { background-color: var(--ink-slab); background-size: cover; background-position: 50% 50%; }
.inner-hero__inner { min-height: 260px; display: flex; align-items: center; justify-content: center; padding: 44px 20px; }
.inner-hero__content { max-width: 900px; text-align: center; }
.inner-hero__headline { font-family: var(--font-display); font-size: var(--text-display); font-weight: 700; line-height: 1.06; text-transform: uppercase; color: var(--on-dark); text-shadow: 0 0 3px var(--ink-soft); margin: 0; }
.inner-hero__teaser { color: var(--on-dark); text-shadow: 0 0 3px var(--ink-soft); font-size: var(--text-lede); margin: .7em 0 0; }

/* ==== 05 flat banner ====================================================
   The one place the source sets a headline in the body face rather than the
   display face, and the family comes from the LATER of two rules, not from the
   one you find first. The linked stylesheet says
   `.banner__headline{font-family:Oswald,sans-serif;font-weight:500;...}`; every
   page body then re-declares `.banner__headline{font-size:3.125rem;
   line-height:53px;font-family:'Lexend Deca';color:#372f29}` in its inline
   block — equal specificity, later in the document, so Lexend Deca wins. The
   inline block does NOT re-declare the weight, so the linked rule's 500 still
   applies; this kit had 600. It is an <h1>, so the h2,h3 uppercase override
   does not reach it and the source paints sentence case. */
.flat-banner { background: var(--paper-soft); }
.flat-banner__content { max-width: 500px; margin: 0 auto; padding: 34px 28px; text-align: center; }
.banner__headline { font-family: var(--font-body); font-size: var(--text-display); font-weight: 500; line-height: 1.06; text-transform: none; color: var(--ink-body); margin: 0; }

/* ==== 06 breadcrumb ===================================================== */
.breadcrumb-nav { padding: 22px 0; }
.breadcrumb-nav ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .8125rem; }
.breadcrumb-nav li { margin: 0; color: var(--ink-muted); }
.breadcrumb-nav li + li::before { content: '/'; margin-right: 6px; color: var(--ink-quiet); }
.breadcrumb-nav a { color: var(--accent-deep); text-decoration: none; }
.breadcrumb-nav a:hover { color: var(--accent); }

/* ==== 07 consultation form card ========================================= */
.form-offer { padding: 0 var(--gutter); }
.form-offer__inner { max-width: 720px; margin: 0 auto; background: var(--accent); border: 1px solid var(--accent); padding: 28px 30px 24px; color: var(--on-dark); }
.form-offer__prompt { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--on-dark); text-align: center; margin: 0 0 .35em; font-size: var(--text-h3); }
.form-offer__description { color: var(--on-dark); text-align: center; margin: 0 0 1.2em; }
.form-offer__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 14px; border: 0; margin: 0 0 18px; padding: 0; }
.form-offer__fields > * { min-width: 0; }
.callout-field { display: block; }
.callout-field__label { display: block; font-size: .75rem; font-weight: 600; color: var(--on-dark); margin-bottom: 5px; }
.callout-field__field-text,
.callout-field__field-textarea,
.callout-field__field-dropdown {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--on-dark);
  background-color: var(--accent-lift);
  border: 1px solid var(--accent-lift);
  border-radius: 0;
}
.callout-field__field-textarea { min-height: 92px; }
.callout-field__field-text::placeholder { color: var(--on-dark); opacity: .8; font-size: .75rem; }
.form-offer__step { font-family: var(--font-utility); font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--on-dark); margin: 0 0 12px; }
.form-offer__submit { display: flex; justify-content: center; margin-bottom: 14px; }
.form-offer__disclaimer { font-size: .75rem; line-height: 1.5; color: var(--on-dark); margin: 0; }
.form-offer__disclaimer a { color: var(--on-dark); }
.form-offer__disclaimer a:hover { color: var(--volt); }
.form-offer__phone { display: block; text-align: center; margin-top: 14px; font-weight: 700; color: var(--on-dark); text-decoration: none; }
.form-offer__phone:hover { color: var(--volt); }

/* ==== 08 interest survey step =========================================== */
.survey-step { padding: 0 var(--gutter); }
.survey-step__inner { max-width: 720px; margin: 0 auto; background: var(--accent); padding: 28px 30px 26px; color: var(--on-dark); }
.survey-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; margin: 0 0 18px; padding: 0; list-style: none; }
.survey-options > * { min-width: 0; }
.survey-option { display: flex; align-items: center; gap: 10px; background: var(--accent-lift); border: 1px solid var(--accent-lift); padding: 12px 14px; margin: 0; color: var(--on-dark); font-weight: 600; }
.survey-decline { display: block; text-align: center; margin-top: 14px; color: var(--on-dark); font-size: .875rem; }

/* ==== 09 review carousel ================================================ */
.review-slider { padding: var(--section-sm) 0; }
.review-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(340px, 82vw); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
.review-rail > * { scroll-snap-align: start; min-width: 0; }
.review-card { background: var(--paper); border: 1px solid var(--border); padding: 26px 24px; }
.review-stars { display: flex; gap: 3px; margin-bottom: 14px; }
.review-stars svg { width: 17px; height: 17px; fill: var(--accent); }
.review-card .review-title { font-size: 1.0625rem; margin-bottom: .55em; color: var(--ink); }
.review-card .quote { font-size: .9375rem; line-height: 1.55; color: var(--ink-body); margin-bottom: 1em; }
.review-card .name { font-family: var(--font-utility); font-size: .8125rem; font-weight: 700; color: var(--ink); }

/* ==== 10 service card grid ==============================================
   SIGNATURE 1 — the parallelogram clip on every card image, the system's one
   geometric device. It lives in the site-wide inline block, not the linked CSS. */
.service-grid { padding: var(--section) 0; }
.grid__heading { text-align: center; margin-bottom: 1.6em; }
.grid__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 30px; }
.grid__cards > * { min-width: 0; }
.grid__card { text-align: center; }
.grid__card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-color: var(--paper-soft);
  clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
}
.grid__card-heading { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700; text-transform: uppercase; line-height: 1.2; color: var(--ink-body); margin: 26px 0 9px; }
.grid__card-description { font-size: .9rem; line-height: 1.5; color: var(--ink); margin-bottom: 18px; text-align: left; }

/* ==== 11 featured reviews, dark band ==================================== */
.featured-reviews { padding: 0 var(--gutter); }
.featured-reviews__inner { max-width: var(--maxw); margin: 0 auto; background: var(--ink-body); color: var(--on-dark); padding: 42px 30px 30px; }
.featured-reviews__title { text-align: center; color: var(--on-dark); margin-bottom: 1.2em; }
.featured-reviews__rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(420px, 82vw); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
.featured-reviews__rail > * { scroll-snap-align: start; min-width: 0; }
.featured-review { color: var(--on-dark); }
.featured-review .quote { font-size: .9375rem; line-height: 1.6; color: var(--on-dark); }
.featured-review .name { font-family: var(--font-utility); font-size: .8125rem; font-weight: 700; color: var(--volt); }
.featured-reviews__dots { display: flex; gap: 16px; justify-content: center; margin: 22px 0 0; padding: 0; list-style: none; }
.featured-reviews__dot { width: 12px; height: 12px; border-radius: var(--radius-disc); background: #8f8f93; margin: 0; }
.featured-reviews__dot.is-current { background: var(--volt); }
.featured-reviews__cta { display: flex; justify-content: center; margin-top: 26px; }

/* ==== 12 inspiration board ==============================================
   The tile is a photo. The blue is a FULL-TILE FLOOD that is not there at rest:
   .inspiration-board__inspiration-inner is position:absolute / inset 0 /
   height:100% at opacity 0, and opacity goes to 1 on :hover at >=64em and via
   the source's own .in-view class below it. The label is centred inside that
   flood under a 42px icon, not a bar welded to the bottom edge. Flood colour is
   the homepage's inline override
   `.inspiration-board__inspiration-inner{background-color:#2f3ff3}`; the shared
   stylesheet's base is #19238ee0. The source ships .in-view in the markup, so
   this kit does too.
   TITLE FACE, corrected. The linked stylesheet declares
   `.inspiration-board__inspiration-title{font-family:Lexend Deca;font-weight:200}`
   and reading that rule alone is wrong: the element is an <h3>, and every page
   body carries `h2,h3{font-family:Oswald,sans-serif!important;font-weight:700
   !important;text-transform:uppercase}`. !important beats the class on family
   and weight, and the class declares no text-transform, so the source paints
   OUR APPROACH in Oswald 700 uppercase. Only font-size, line-height and colour
   survive from the class rule, and those are kept verbatim below.
   Tile heights are the source's: 165 / 200 / 300px, and the second row is
   .board__row--sm-lg: 35/65 at >=40em, and 250px over 136px below it. The
   two axes of that asymmetry are the shape; a uniform tile is a different
   component. */
.inspiration-board { padding: var(--section-sm) var(--gutter); }
.board__inner { max-width: var(--maxw); margin: 0 auto; background: var(--paper); padding: 30px 3px 14px; }
.board__title { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 700; line-height: 1.15; text-transform: uppercase; text-align: center; color: var(--ink-body); margin: 0 auto 15px; padding: 0 20px; }
.board__subtitle { max-width: 769px; margin: 0 auto 32px; padding: 0 20px; text-align: center; color: var(--ink-body); }
.board__rows { padding: 0 17px; }
.board__row > * { min-width: 0; }
.board__tile { position: relative; overflow: hidden; height: 165px; margin-bottom: 8px; background-color: var(--ink-body); background-size: cover; background-position: 50% 50%; flex-grow: 1; flex-shrink: 1; }
.board__row--sm-lg .board__tile:first-child { height: 250px; }
.board__row--sm-lg .board__tile:last-child { height: 136px; }
.board__tile-inner { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; width: 100%; height: 100%; padding: 10px; opacity: 0; transition: opacity .3s cubic-bezier(.455, .03, .515, .955); text-decoration: none; background-color: var(--accent); align-items: center; justify-content: center; }
.board__tile-icon { width: 42px; height: 42px; margin-bottom: 13px; fill: none; stroke: var(--on-dark); stroke-width: 2; flex-shrink: 0; }
.board__tile-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; line-height: 36px; margin: 0 0 10px; text-align: center; text-transform: uppercase; color: var(--on-dark); }
.board__tile-note { font-family: var(--font-body); font-size: .75rem; font-weight: 600; line-height: 16px; margin: 0; text-align: center; color: var(--on-dark); }
@media (min-width: 40em) {
  .board__inner { padding: 28px 3px; }
  .board__rows { padding: 0 41px; }
  .board__row { display: flex; margin: 0 -5px; }
  .board__tile { height: 200px; margin: 0 5px 9px; }
  .board__row--sm-lg .board__tile:first-child { height: 200px; flex-basis: 35%; }
  .board__row--sm-lg .board__tile:last-child { height: 200px; flex-basis: 65%; }
  .board__tile-icon { width: 26px; height: 26px; margin-bottom: 14px; }
  .board__tile-title { font-size: 1.125rem; line-height: 18px; }
}
@media (max-width: 63.99em) {
  .board__tile.in-view .board__tile-inner { opacity: 1; }
}
@media (min-width: 64em) {
  .board__inner { padding: 41px 5px 19px; }
  .board__rows { padding: 0 28px; }
  .board__row { margin: 0 -10px; }
  .board__tile { height: 300px; margin: 0 10px 18px; }
  .board__row--sm-lg .board__tile:first-child,
  .board__row--sm-lg .board__tile:last-child { height: 300px; }
  .board__tile:hover .board__tile-inner { opacity: 1; }
  .board__tile-icon { width: 42px; height: 42px; margin-bottom: 23px; }
  .board__tile-title { font-size: 2.125rem; line-height: 38px; }
  .board__tile-note { font-size: .8125rem; line-height: 18px; }
}

/* ==== 13 franchise module, blue full bleed ============================== */
.generic-module { background: var(--accent); color: var(--on-dark); box-shadow: var(--shadow-panel); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 44px 40px; }
.generic-module > * { min-width: 0; }
.generic-module__content { order: 1; }
.generic-module__title { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 700; text-transform: uppercase; color: var(--on-dark); margin: 0 0 .5em; }
.generic-module__description { color: var(--on-dark); font-size: 1.125rem; line-height: 1.5; margin-bottom: 24px; }
.generic-module__img { width: 100%; }
@media (max-width: 880px) {
  .generic-module { grid-template-columns: 1fr; padding: 32px 24px; }
}

/* ==== 14 CTA band, photo under a 90% blue flood =========================
   SIGNATURE 5. Photo + flat flood, NOT a gradient scrim: the source overrides
   both the theme colour and its opacity. The base colour under the flood is a
   real painted ground, which is also what keeps the text resolvable. */
.offer-callout { position: relative; background-color: var(--accent-deep); }
.offer-callout-bg { position: absolute; inset: 0; background-color: var(--accent); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
.offer-callout-bg::after { content: ''; position: absolute; inset: 0; background-color: var(--accent); opacity: .9; }
.offer-callout__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; padding: 40px 50px 34px; color: var(--on-dark); max-width: var(--maxw); margin: 0 auto; }
.offer-callout__inner > * { min-width: 0; }
.offer-callout__content { max-width: 750px; }
.offer-callout__tagline { font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: .62px; text-transform: uppercase; line-height: 1.4; color: var(--on-dark); margin: 0 0 10px; }
.offer-callout__title { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 700; text-transform: uppercase; color: var(--on-dark); margin: 0 0 .4em; }
.offer-callout__description p { color: var(--on-dark); font-size: 1.125rem; line-height: 1.4; margin: 0; }
.offer-callout__actions { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 880px) {
  .offer-callout__inner { grid-template-columns: 1fr; padding: 32px 24px; }
}

/* ==== 15 alternating image / text rows ==================================
   The row gap has to be declared on the element whose CHILDREN are the rows.
   .alt-rows' only child is .container, so a gap declared on .alt-rows never
   reached .alt-row: every row butted the next at 0px while the media/content
   gap INSIDE a row stayed 40px, which inverts the reading pairs on a phone. */
.alt-rows { padding: var(--section) 0; }
.alt-rows > .container { display: grid; gap: 56px; }
.alt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.alt-row > * { min-width: 0; }
.alt-row.flip .alt-row__media { order: 2; }
.alt-row__media img { width: 100%; }
.alt-row__title { color: var(--ink); margin-bottom: .5em; }
.alt-row__content p { color: var(--ink); font-size: .95rem; line-height: 1.6; }
@media (max-width: 880px) {
  .alt-row, .alt-row.flip { grid-template-columns: 1fr; }
  .alt-row.flip .alt-row__media { order: 0; }
}

/* ==== 16 rich text block ================================================ */
.rtf-block { padding: var(--section-sm) 0; }
.rtf-block h2 { line-height: 1.15; }
.rtf-block p, .rtf-block li { font-size: 1rem; line-height: 1.5; font-weight: 300; color: var(--ink); }
.rtf-block ul { padding-left: 1.15em; }

/* ==== 17 product gallery with thumbnails ================================ */
.prod-gallery { padding: var(--section-sm) var(--gutter); background: var(--paper-soft); }
.prod-gallery__wrapper { max-width: var(--maxw); margin: 0 auto; }
.prod-gallery__title { text-align: center; color: var(--ink); margin-bottom: 1em; }
.prod-gallery__stage { background: var(--paper); border: 1px solid var(--border); padding: 16px; }
.prod-gallery__stage img { width: 100%; }
.prod-gallery__caption { font-size: .875rem; color: var(--ink-muted); margin: 12px 0 0; text-align: center; }
.prod-gallery__thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: min(140px, 32vw); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 16px; padding-bottom: 8px; }
.prod-gallery__thumbs > * { scroll-snap-align: start; min-width: 0; }
.prod-gallery__thumb { border: 2px solid transparent; background: var(--paper); padding: 0; cursor: pointer; }
.prod-gallery__thumb.is-current { border-color: var(--accent); }

/* ==== 18 FAQ accordion ================================================== */
.accordion { padding: var(--section-sm) 0; }
.accordion__item { border-bottom: 1px solid var(--border); }
.accordion__q { display: flex; gap: 14px; align-items: center; justify-content: space-between; width: 100%; text-align: left; background: transparent; border: 0; padding: 20px 0; cursor: pointer; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; text-transform: uppercase; color: var(--ink); }
.accordion__q svg { width: 17px; height: 17px; fill: var(--accent); flex-shrink: 0; }
.accordion__a { padding: 0 0 22px; }
.accordion__a p, .accordion__a li { font-size: 1rem; color: var(--ink); }

/* ==== 19 four-column link cards ========================================= */
.four-col { padding: var(--section-sm) 0; }
.four-col__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px; }
.four-col__items > * { min-width: 0; }
.four-col__item { background: var(--paper); border: 1px solid var(--border); padding: 26px 24px; }
.four-col__item-title { font-size: 1.5rem; line-height: 1.25; color: var(--ink); margin-bottom: .5em; }
.four-col__item p { font-size: .9375rem; color: var(--ink); margin: 0; }

/* ==== 20 column grid / column listing ===================================
   ONE component, not two. On the source .col-listing is the section wrapper,
   a centred header of title + description, and .col-grid.col-grid--3col is
   the grid it wraps. The grid's cell is a LINKED PRODUCT CARD: an <a> around a
   photo header and an <h2>, with a teaser paragraph underneath. It is not a
   colour-swatch grid; `col-grid__item-swatch` exists nowhere in the corpus.
   The title's #f0f0f0 ground and Oswald face are the page's own inline
   overrides; opacity .7 lifting to 1 on hover is the shared stylesheet's. */
.col-listing { padding: var(--section-sm) 0; }
.col-listing__header { padding: 0 24px 15px; text-align: center; }
.col-listing__title { color: var(--ink); line-height: 1.13; margin: 0 0 15px; }
.col-listing__description { color: var(--ink-body); }
.col-listing__description p:last-child { margin-bottom: 0; }

.col-grid { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
.col-grid--3col .col-grid__item { width: calc((100% - 10px) / 2); }
.col-grid__item-link { display: block; text-decoration: none; }
.col-grid__item-header { position: relative; overflow: hidden; }
.col-grid__item-img { display: block; width: 100%; height: 124px; background-color: var(--ink-body); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; }
/* <h2>, so the site-wide h2,h3{...!important} block supplies Oswald 700 and the
   uppercase; the class rule declares no text-transform of its own. Family is
   also re-declared as Oswald by the page's inline block, and that block sets
   the ground to #f0f0f0 (= --paper-soft), not the linked stylesheet's #fff. */
.col-grid__item-title { font-family: var(--font-display); font-size: .875rem; line-height: 1.07; width: 100%; margin: 0; padding: 18px 12px 0; text-align: center; text-transform: uppercase; opacity: .7; transition: opacity .25s linear; color: var(--ink-body); background-color: var(--paper-soft); }
.col-grid__item-link:hover .col-grid__item-title { opacity: 1; }
.col-grid__item-teaser { font-family: var(--font-body); font-size: .75rem; line-height: 1.25; margin: 0; padding: 16px 11px; text-align: center; color: var(--ink-body); }
.col-grid__item-teaser p { font: inherit; margin: 0; }
@media (min-width: 40em) {
  .col-listing__header { padding: 0 64px 30px; }
  .col-grid--3col .col-grid__item { width: calc((100% - 15px) / 2); }
  .col-grid__item-img { height: 320px; }
  .col-grid__item-title { font-size: 1.75rem; line-height: 38px; }
  .col-grid__item-teaser { font-size: .875rem; line-height: 19px; padding: 17px 40px 27px; }
}
@media (min-width: 64em) {
  .col-grid--3col { justify-content: flex-start; }
  .col-grid--3col .col-grid__item { width: calc((100% - 40px) / 3); margin-right: 20px; }
  .col-grid--3col .col-grid__item:nth-child(3n) { margin-right: 0; }
  .col-grid__item-img { height: 346px; }
}

/* ==== 21 two-column callout split =======================================
   TWO SEPARATE BLOCK ROOTS on two different pages, so they carry two
   citations. `two-col` is the key-features split on the commercial page: a
   centred title and subtitle over two rtf columns divided by a 4px #f0f0f0
   rule. `twocol-content` is the financing template's callout pair, divided by
   the same rule vertically at >=64em and stacked under a 4px #cccfd2 border
   below it. NEITHER callout carries a panel fill on the source: the grey
   panel this kit used to ship was an invention, and the divider rule is the
   whole separating device. */
.two-col { padding: var(--section-sm) 0; }
/* 700, not the component rule's 400: this class is on an h2 in the source, where
   the unscoped `h2,h3 { font-weight: 700 !important }` beats it. */
.two-col__title { font-weight: 700; line-height: 1.17; text-align: center; margin: 0 0 23px; }
.two-col__subtitle { padding-bottom: 15px; text-align: center; color: var(--ink-body); }
.two-col__subtitle p:last-child { margin-bottom: 0; }
.two-col__wrapper { padding: 0 8px; }
.two-col__column > *:last-child { margin-bottom: 10px; }
.two-col__column ul { list-style: outside; }
.two-col__column li { font-family: var(--font-body); color: var(--ink-body); }

.twocol-content { padding: 0 20px; }
.twocol-content__callout:first-child { margin-bottom: 23px; padding-bottom: 23px; border-bottom: 4px solid #cccfd2; }
.twocol-content__header { text-align: center; }
.twocol-content__title { font-size: 2rem; font-weight: 300; line-height: 36px; margin: 0; }
.twocol-content__description { text-align: center; }
.twocol-content__description p { font-family: var(--font-body); font-size: .9375rem; font-weight: 400; line-height: 1.33; margin: 0 auto 1.1em; color: var(--ink-body); }
@media (min-width: 40em) {
  .two-col__wrapper { display: flex; flex-wrap: wrap; margin-bottom: 15px; }
  .two-col__column { width: 50%; }
  .two-col__left { position: relative; padding-right: 40px; }
  .two-col__left::after { position: absolute; bottom: 0; right: -2px; width: 4px; height: calc(80% - 20px); content: ''; background-color: var(--paper-soft); }
  .two-col__right { padding-left: 40px; }
  .twocol-content { padding: 0 60px; }
  .twocol-content__callout:first-child { margin-bottom: 25px; padding-bottom: 25px; }
  .twocol-content__header { padding: 0 28px; }
  .twocol-content__title { font-size: 2.75rem; line-height: 51px; margin-bottom: 10px; }
  .twocol-content__description { padding: 0 28px; }
  .twocol-content__description p { font-size: 1rem; line-height: 1.44; }
}
@media (min-width: 64em) {
  .two-col__title { font-size: 2.5rem; line-height: 53px; margin-bottom: 28px; }
  .two-col__subtitle { padding-bottom: 40px; }
  .two-col__wrapper { padding: 0 25px; }
  .two-col__column li { font-size: 18px; line-height: 27px; }
  .twocol-content { position: relative; display: flex; justify-content: space-between; padding: 0 20px; }
  .twocol-content::before { position: absolute; top: 45%; left: 50%; width: 4px; height: calc(80% - 70px); content: ''; transform: translate(-50%, -50%); background-color: var(--paper-soft); }
  .twocol-content__callout { width: calc((100% - 76px) / 2); }
  .twocol-content__callout:first-child { position: relative; margin: 0; padding-bottom: 0; border-bottom: 0; }
  .twocol-content__header { margin-bottom: 20px; }
  .twocol-content__title { font-size: 1.875rem; line-height: 53px; margin-bottom: 10px; }
  .twocol-content__description p { font-size: 1.125rem; line-height: 27px; }
}

/* ==== 22 zip locator ==================================================== */
.zip-locator { background: var(--paper-soft); padding: var(--section-sm) 0; }
.zip-locator__title { text-align: center; margin-bottom: 1em; }
.form-zip { display: grid; grid-template-columns: minmax(min(260px, 100%), 1fr) auto; gap: 14px; max-width: 620px; margin: 0 auto; align-items: end; }
.form-zip > * { min-width: 0; }
.form-zip label { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.form-zip input { width: 100%; min-height: 48px; padding: 10px 14px; font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--paper); border: 2px solid var(--border-strong); border-radius: 0; }
@media (max-width: 880px) { .form-zip { grid-template-columns: 1fr; } }

/* ==== 23 content slider ================================================= */
.content-slider { padding: var(--section-sm) 0; }
.content-slider__rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(400px, 82vw); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
.content-slider__rail > * { scroll-snap-align: start; min-width: 0; }
.content-slide { background: var(--paper); border: 1px solid var(--border); }
.content-slide__img { aspect-ratio: 16 / 9; background: var(--paper-soft); background-size: cover; background-position: 50% 50%; }
.content-slide__body { padding: 22px 24px 26px; }
.content-slide__title { font-size: 1.25rem; color: var(--ink); margin-bottom: .5em; }
.content-slide__body p { font-size: .9375rem; color: var(--ink); }
.content-slider__dots { display: flex; gap: 12px; justify-content: center; margin: 20px 0 0; padding: 0; list-style: none; }
.content-slider__dot { width: 10px; height: 10px; border-radius: var(--radius-disc); background: var(--rule); margin: 0; }
.content-slider__dot.is-current { background: var(--accent); }

/* ==== 24 who we are, with the oversized quote glyph =====================
   SIGNATURE 4. The source parks a 10rem left double-quote at -15px tracking
   above the testimonial. Reproduced at the source's own size and colour. */
.who-we-are { padding: var(--section-sm) var(--gutter); background: var(--paper-soft); }
.who-we-are__inner { max-width: var(--maxw); margin: 0 auto; background: var(--paper); padding: 24px 30px 48px; }
.who-we-are__title { text-align: center; margin: 0 auto 1.1em; max-width: 1000px; }
.who-we-are__testimonial { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--paper); margin-bottom: 34px; overflow: hidden; }
.who-we-are__testimonial > * { min-width: 0; }
.who-we-are__image { background-color: var(--ink-body); background-size: cover; background-position: 50% 50%; min-height: 240px; }
.who-we-are__quote { padding: 74px 40px 30px 56px; }
.who-we-are__quote-inner { position: relative; margin: 0 0 14px; }
.who-we-are__quote-inner::before {
  content: '\2018\2018';
  position: absolute;
  top: -52px;
  left: -30px;
  display: block;
  height: 1px;                    /* see the note under SIGNATURE 4 below */
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 8.5rem;
  line-height: 1;
  letter-spacing: -13px;
  color: var(--ink-body);
}
/* DISCLOSED WORKAROUND, NOT A DESIGN DECISION. Flagged by audit 2026-08-28.
   The source's own rule (.who-we-are__testimonial__quote-inner:before) declares
   no height: the glyph is a 160px mark absolutely positioned over an ~84px box,
   and the overlap IS the device. The resting-intrusion gate cannot tell that
   from a decorative flood layer, because its "does this layer paint?" guard
   reads `!parse(cs.backgroundColor)` and parse() returns a truthy object for
   `rgba(0,0,0,0)`, so a fully transparent text pseudo passes the guard
   and is measured as a flood. `height: 1px` is what keeps the gate green; it
   changes nothing on screen, because the glyph overflows it. So the gate's
   `restingIntrusions: clean` is NOT independent evidence for this kit.
   Removing the 1px fails the gate at exit 1 with the render unchanged. The
   real fix is in the gate (alpha > 0, or exempt pseudos whose content is text),
   which is out of scope here: flagged for Jarrett and for the retro. */
.who-we-are__quote-inner p { font: italic 700 20px/28px var(--font-body); color: var(--ink-body); margin: 0; }
.who-we-are__attrib { font-family: var(--font-utility); font-size: .8125rem; font-weight: 700; color: var(--ink); margin: 0; }
.who-we-are__content p { font-size: .9rem; line-height: 1.5; color: var(--ink); }
@media (min-width: 64em) {
  .who-we-are__quote-inner::before { font-size: 10rem; letter-spacing: -15px; }
}
@media (max-width: 880px) {
  .who-we-are__testimonial { grid-template-columns: 1fr; }
  .who-we-are__quote { padding: 66px 26px 24px 40px; }
}

/* ==== 25 local franchise info card ====================================== */
.local-info { background: var(--paper-warm); padding: var(--section-sm) 0; }
.local-info__franchise-name { text-transform: uppercase; margin-bottom: .6em; }
.local-info__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 26px; }
.local-info__cols > * { min-width: 0; }
.local-info__owner-name { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; text-transform: uppercase; color: var(--ink); margin: 0 0 .4em; }
.local-info__section-info { color: var(--ink); font-size: .9375rem; }
.local-info__cols a { color: var(--ink); }
.local-info__hours { list-style: none; padding: 0; margin: 0; font-size: .9375rem; }
.local-info__hours li { border-bottom: 1px solid var(--border); padding: 6px 0; margin: 0; }

/* ==== 26 local featured content rail ==================================== */
.featured-content { padding: var(--section-sm) 0; }
.featured-content__title { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 700; text-transform: uppercase; text-align: center; color: var(--ink); margin-bottom: 1em; }
.featured-content__rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(340px, 82vw); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
.featured-content__rail > * { scroll-snap-align: start; min-width: 0; }
.featured-content__slide { background: var(--paper); border: 1px solid var(--border); padding: 24px 22px; }
.featured-content__slide-title h3 { color: var(--ink-body); font-size: 1.125rem; margin-bottom: .55em; }
.featured-content__slide p { font-size: .9rem; color: var(--ink); }

/* ==== 27 meet the team ================================================== */
.meet-team { background: var(--paper-soft); padding: var(--section-sm) 0; }
.meet-team__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 24px; }
.meet-team__inner > * { min-width: 0; }
.team-member { background: var(--paper); border: 1px solid var(--border); padding: 24px 20px; text-align: center; }
.team-member__photo { width: 116px; height: 116px; border-radius: var(--radius-disc); background: var(--paper-soft); margin: 0 auto 16px; background-size: cover; background-position: 50% 50%; }
.team-member__name { font-size: 1.0625rem; color: var(--ink); margin-bottom: .3em; }
.team-member__role { font-family: var(--font-utility); font-size: .8125rem; font-weight: 700; text-transform: uppercase; color: var(--ink-muted); margin: 0; }

/* ==== 28 reviews listing + submission modal ============================= */
.reviews-list { padding: var(--section-sm) 0; }
.reviews-list__inner { background-image: none; }
.reviews-list__header { text-align: center; margin-bottom: 2rem; }
.reviews-list__title { color: var(--ink); margin-bottom: .4em; }
.reviews-list__teaser p { color: var(--ink); }
.reviews-list__reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.reviews-list__reviews > * { min-width: 0; }
.reviews-list__review { background: var(--paper); border: 1px solid var(--border); padding: 26px 24px; }
.reviews-list__review-testimonial { position: relative; padding-top: 6px; }
.reviews-list__review-testimonial::before {
  content: '\2018\2018';
  position: absolute;
  top: -46px;
  left: -14px;
  height: 1px;                    /* same reason as .who-we-are__quote-inner */
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 7rem;
  line-height: 1;
  letter-spacing: -19px;
  color: var(--ink-body);
  opacity: .18;
}
.reviews-list__review .quote { font-size: .9375rem; line-height: 1.6; color: var(--ink); }
.reviews-list__review .name { font-family: var(--font-utility); font-size: .8125rem; font-weight: 700; color: var(--ink); }
.reviews-list__load-more { display: flex; justify-content: center; margin-top: 32px; }
.add-review { background: var(--paper-soft); padding: 30px 28px; margin-top: 34px; }
.add-review__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; border: 0; margin: 0 0 16px; padding: 0; }
.add-review__fields > * { min-width: 0; }
.add-review label { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.add-review input, .add-review textarea { width: 100%; min-height: 44px; padding: 10px 12px; font-family: var(--font-body); font-size: .9375rem; color: var(--ink); background: var(--paper); border: 1px solid var(--border-strong); border-radius: 0; }
.add-review textarea { min-height: 100px; }
.file-field { grid-column: 1 / -1; }

/* ==== 29 filterable project gallery ===================================== */
.proj-gallery { padding: var(--section-sm) var(--gutter); background: var(--paper-soft); }
.proj-gallery__inner { max-width: var(--maxw); margin: 0 auto; }
.proj-gallery__filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.proj-gallery__filter { font-family: var(--font-utility); font-size: .8125rem; font-weight: 700; text-transform: uppercase; padding: 8px 18px; border: 2px solid var(--accent); border-radius: var(--radius-pill); background: var(--paper); color: var(--ink-body); cursor: pointer; }
.proj-gallery__filter.is-current { background: var(--accent); color: var(--on-dark); }
.proj-gallery__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; }
.proj-gallery__items > * { min-width: 0; }
.proj-gallery__item { aspect-ratio: 4 / 3; background-color: var(--ink-body); background-size: cover; background-position: 50% 50%; }
.featured-video { position: relative; aspect-ratio: 16 / 9; background-color: var(--ink-slab); background-size: cover; background-position: 50% 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.featured-video__play { width: 74px; height: 74px; border-radius: var(--radius-disc); background: var(--accent); border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.featured-video__play svg { width: 24px; height: 24px; fill: var(--on-dark); }

/* ==== 30 blog listing, article and related posts ======================== */
.blog-listing { padding: var(--section-sm) 0; }
.featured-blog { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; margin-bottom: 44px; }
.featured-blog > * { min-width: 0; }
.featured-blog__img { aspect-ratio: 16 / 10; background-color: var(--ink-body); background-size: cover; background-position: 50% 50%; }
.category-select { display: grid; grid-template-columns: auto minmax(min(220px, 100%), 1fr); gap: 12px; align-items: center; margin-bottom: 26px; }
.category-select > * { min-width: 0; }
.category-select__label { font-family: var(--font-display); font-size: .9375rem; font-weight: 700; text-transform: uppercase; color: var(--ink); }
.category-select select { width: 100%; min-height: 44px; padding: 8px 12px; font-family: var(--font-body); font-size: .9375rem; color: var(--ink); background: var(--paper); border: 1px solid var(--border-strong); border-radius: 0; }
.blog-listing__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 26px; }
.blog-listing__items > * { min-width: 0; }
.blog-listing__item { border: 1px solid var(--border); background: var(--paper); }
.blog-listing__item-img { aspect-ratio: 16 / 9; background-color: var(--ink-body); background-size: cover; background-position: 50% 50%; }
.blog-listing__item-body { padding: 22px 22px 26px; }
.blog-listing__item-title { font-size: 1.125rem; line-height: 1.25; color: var(--ink); margin-bottom: .5em; }
.blog-listing__item-teaser { font-weight: 300; font-size: .9375rem; color: var(--ink); }
.blog-listing__item-category { position: relative; display: inline-block; font-family: var(--font-utility); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-body); padding-bottom: 5px; }
.blog-listing__item-category::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background-color: var(--volt); }

.blog-detail-main { padding: var(--section-sm) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 44px; }
.blog-detail-main > * { min-width: 0; }
.blog-detail__meta { font-family: var(--font-utility); font-size: .8125rem; font-weight: 700; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 1.2em; }
.blog-detail__body p, .blog-detail__body li { font-size: 1rem; line-height: 1.6; color: var(--ink); }
.related-posts { border-top: 1px solid var(--border); padding-top: 30px; margin-top: 36px; }
.related-post { border-bottom: 1px solid var(--border); padding: 14px 0; }
.related-post a { color: var(--ink); text-decoration: none; font-weight: 600; }
.related-post a:hover { color: var(--accent); }
@media (max-width: 880px) {
  .featured-blog { grid-template-columns: 1fr; }
  .blog-detail-main { grid-template-columns: 1fr; gap: 30px; }
}

/* ==== 31 swatch gallery with modal picker ===============================
   THE SWATCH IS A PHOTOGRAPH, not a colour chip. The source's swatch is a
   `swatch-gallery-swatch__button` carrying an aria-label of the finish name and
   an inline background-image pointing at that finish's own -sml.jpg, holding a
   hidden img that gives the button its height, with the name in a span
   underneath. (Written out in prose rather than quoted as markup on purpose:
   asset-audit scans CSS comments too, so a literal url reference written out
   here is read as a live one and fails the dangling-reference check.) The
   finishes are photographed epoxy and tile samples: no hex is ever declared for
   any of them anywhere on the source, so this kit declares none either. The
   crawl captured markup and CSS but no image binaries, so the button ships as
   an EMPTY photo slot: one neutral ground for every swatch, flagged by the
   kit-note beside it. An invented hex under a real product name would be a
   fabricated fact about the client's product line.
   Ratio is the source's own preview geometry (slider 232px / image 274px);
   the small swatches carry no declared dimensions anywhere in the corpus. */
.swatch-gallery { padding: var(--section-sm) 0; }
.tab-module__panel .swatch-gallery { padding: 0; }
.swatch-gallery__title { text-align: center; margin: 0 auto 16px; }
.swatch-gallery__columns { margin-top: 30px; }
.swatch-gallery__swatches { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.swatch-gallery-swatch { display: flex; flex-direction: column; width: calc(50% - 7.5px); margin: 0 15px 24px 0; padding: 0; }
.swatch-gallery-swatch:nth-child(2n) { margin-right: 0; }
.swatch-gallery-swatch__button { position: relative; display: flex; width: 100%; aspect-ratio: 232 / 274; margin-bottom: 6px; padding: 0; cursor: pointer; border: 1px solid #5c5d60; background-color: var(--paper-soft); background-position: center; background-size: cover; box-shadow: var(--shadow); }
.swatch-gallery-swatch__button:focus { border-color: var(--accent); outline-color: var(--accent); }
.swatch-gallery-swatch__name { font-family: var(--font-body); font-size: 1rem; font-weight: 300; color: var(--ink-body); }
.swatch-gallery-preview { display: none; }
.swatch-gallery-preview__slider { width: 232px; }
.swatch-gallery-preview__image { position: relative; display: flex; height: 274px; background-color: var(--paper-soft); background-position: center; background-size: cover; align-items: center; justify-content: center; box-shadow: var(--shadow); }
/* Same <h3> correction as the board title: the class declares Lexend Deca 600,
   the site-wide h2,h3{...!important} block wins on family and weight and
   supplies the uppercase. Size, leading and colour are the class rule's. */
.swatch-gallery-preview__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; line-height: 24px; text-transform: uppercase; margin: 12px 0 0; color: var(--ink-body); }
.swatch-gallery-preview__description { font-family: var(--font-body); font-size: 1.125rem; font-weight: 400; line-height: 27px; margin-top: 5px; color: var(--ink-body); }
.swatch-gallery-preview__description p { font: inherit; margin: 0; }
@media (min-width: 40em) {
  .swatch-gallery__columns { display: flex; justify-content: space-between; align-items: flex-start; }
  /* The swatch list only yields room when the sticky preview sits beside it. */
  .swatch-gallery__columns > .swatch-gallery__swatches { min-width: calc(100% - 252px); max-width: calc(100% - 252px); }
  .swatch-gallery-swatch { width: calc(25% - 11.25px); margin-right: 15px; }
  .swatch-gallery-swatch:nth-child(2n) { margin-right: 15px; }
  .swatch-gallery-swatch:nth-child(4n) { margin-right: 0; }
  .swatch-gallery-preview { display: block; position: sticky; top: 103px; }
}
@media (min-width: 64em) {
  .swatch-gallery__columns > .swatch-gallery__swatches { min-width: calc(100% - 442px); max-width: calc(100% - 442px); }
  .swatch-gallery-swatch { width: calc(25% - 18.75px); margin-right: 25px; margin-bottom: 33px; }
  .swatch-gallery-swatch:nth-child(2n) { margin-right: 25px; }
  .swatch-gallery-swatch:nth-child(4n) { margin-right: 0; }
  .swatch-gallery-preview { top: 201px; }
  .swatch-gallery-preview__slider { width: 380px; }
  .swatch-gallery-preview__image { height: 450px; }
}
.swatch-gallery-modal { border: 1px solid var(--border-strong); background: var(--paper); padding: 22px 24px; margin-top: 22px; box-shadow: var(--shadow-panel); }
.swatch-gallery-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.swatch-gallery-modal__close { background: transparent; border: 0; font-family: var(--font-utility); font-size: .8125rem; font-weight: 700; text-transform: uppercase; color: var(--accent-deep); cursor: pointer; padding: 4px 0; }

/* ==== 32 tabbed product module ==========================================
   NOT a file-folder tab widget. The source's tabs carry no chrome at all:
   `.tab-module__tab{font-size:1.25rem;background-color:transparent;border:0;
   color:#221f20;font-family:Lexend Deca,sans-serif;font-weight:600;
   padding:6px 24px 6px 32px;text-transform:uppercase}`, and at >=40em they
   become equal-width flex cells sitting on ONE shared hairline,
   `{border-bottom:1px solid rgba(112,112,112,.6);flex-grow:1;
   padding:40px 0 33px}`. The current tab is marked three ways and none of them
   is a box: the button goes #2f3ff3, its .tab-module__label span goes 700 in
   #19238e, and a 9x10px downward caret in #19238e hangs off that span at
   bottom:-34px / left:calc(50% - 7.5px), which lands it exactly on the hairline
   the row sits on. The panel has no border either:
   `.tab-module__tabcontent{padding:30px 20px;width:100%}` — it takes flex-grow
   and order:1 inside the same flex container, which is how the panels fall
   below every tab in source order.
   Under 40em the row is an accordion instead: each tab becomes a full-width
   #f3f3f3 bar with 1px horizontal rules in #d0d0d066, overlapped -1px, the
   label pushed left and the arrow icon revealed at the right. */
.tab-module { padding: var(--section-sm) 0; }
.tab-module__tabs { display: flex; flex-wrap: wrap; width: 100%; height: auto; margin: 0; padding: 0; list-style: none; }
.tab-module__tab { font-family: var(--font-body); font-size: 1.25rem; font-weight: 600; text-transform: uppercase; text-align: center; text-decoration: none; padding: 6px 24px 6px 32px; margin: 0; background-color: transparent; border: 0; color: var(--ink); cursor: pointer; }
.tab-module__tab.is-current { color: var(--accent); }
.tab-module__label { position: relative; }
.tab-module__tab.is-current .tab-module__label { font-weight: 700; color: var(--accent-deep); }
.tab-module__arrow-icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--accent-deep); stroke-width: 2; transform: rotate(90deg); transition: transform .2s ease; }
.tab-module__tab.is-current .tab-module__arrow-icon { transform: rotate(-90deg); }
@media (max-width: 39.99em) {
  /* #f3f3f3 and #d0d0d066 are the source's literals; neither is a system token
     and neither appears anywhere else, so they are written out rather than
     rounded onto --paper-soft / --rule. */
  .tab-module__tab { display: flex; width: 100%; align-items: center; justify-content: space-between; background-color: #f3f3f3; border-style: solid; border-width: 1px 0; border-color: rgba(208, 208, 208, .4); }
  .tab-module__tab:not(:first-child) { margin-top: -1px; }
}
@media (min-width: 40em) {
  .tab-module__tab { flex-grow: 1; padding: 40px 0 33px; border-bottom: 1px solid rgba(112, 112, 112, .6); }
  .tab-module__arrow-icon { display: none; }
  .tab-module__tab.is-current .tab-module__label::after {
    content: ''; position: absolute; bottom: -34px; left: calc(50% - 7.5px);
    width: 0; height: 0; border-style: solid; border-width: 0 9px 10px 9px;
    border-color: transparent transparent var(--accent-deep);
  }
}
.tab-module__panel { width: 100%; padding: 30px 20px; }
.tab-module__panel h3 { color: var(--ink); }
.tab-module__panel p { font-size: .95rem; color: var(--ink); }

/* ==== 33 site footer ==================================================== */
.footer-subscribe { background: var(--accent); color: var(--on-dark); padding: 36px 0; }
.footer-subscribe .container { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
.footer-subscribe .container > * { min-width: 0; }
.form__subscribe-title { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 700; text-transform: uppercase; color: var(--on-dark); margin: 0 0 .6em; }
.form__subscribe-form { display: grid; grid-template-columns: minmax(min(220px, 100%), 1fr) auto; gap: 12px; align-items: end; }
.form__subscribe-form > * { min-width: 0; }
.form__subscribe-form label { display: block; font-size: .75rem; font-weight: 600; color: var(--on-dark); margin-bottom: 5px; }
.form__subscribe-form input { width: 100%; min-height: 48px; padding: 10px 14px; font-family: var(--font-body); font-size: 1rem; color: var(--on-dark); background: var(--accent-lift); border: 1px solid var(--accent-lift); border-radius: 0; }
.social-links { display: block; }
.social-links__title { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 700; text-transform: uppercase; color: var(--on-dark); margin: 0 0 .6em; }
.social-links__list { display: flex; gap: 16px; padding: 0; margin: 0; list-style: none; }
.social-links__list li { margin: 0; }
.social-links__list-icon svg { width: 30px; height: 30px; fill: var(--volt); transition: fill .2s ease-in-out; }
.social-links__list-icon:hover svg { fill: var(--on-dark); }
@media (max-width: 880px) {
  .footer-subscribe .container { grid-template-columns: 1fr; }
  .form__subscribe-form { grid-template-columns: 1fr; }
}

.site-footer { background: var(--paper); border-top: 1px solid var(--border); padding: 46px 0 34px; }
.footer-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 30px; }
.footer-nav > * { min-width: 0; }
.footer-col h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; text-transform: uppercase; color: var(--ink); margin-bottom: .9em; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin: 0 0 .55em; }
.footer-nav__link { font-size: .9375rem; color: var(--ink-body); text-decoration: none; }
.footer-nav__link:hover { color: var(--accent); }
.footer-utility-nav { border-top: 2px solid rgba(105, 105, 105, .15); margin-top: 34px; padding-top: 22px; }
.footer-utility__list { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; padding: 0; margin: 0; justify-content: center; }
.footer-utility__list li { margin: 0; }
.footer-utility__link { font-size: .8125rem; color: var(--ink-body); text-decoration: none; }
.footer-utility__link:hover { color: var(--accent); }
.footer-legal { text-align: center; margin-top: 22px; }
.footer-legal p { font-size: .75rem; color: var(--ink-muted); }

/* ==== LIGHT-GROUND REGISTER =============================================
   .on-dark p (0,1,1) and .on-accent p reach into ANY descendant that paints
   its own light ground, so each of those components re-asserts its ink here at
   higher specificity. Register a new light-ground component the moment you
   write it: guardian-roofing had this note in place and still shipped a pale
   pill at 1.14:1 in the very next pass. Trust the gate, not the comment. */
.on-dark .btn-rounded,
.on-accent .btn-rounded { color: var(--ink-body); }
.on-dark .btn-rounded--white,
.on-accent .btn-rounded--white { color: var(--ink-slab); }
.on-dark .btn-rounded:hover,
.on-accent .btn-rounded:hover { color: var(--ink-slab); }
.on-dark .review-card .quote,
.on-accent .review-card .quote { color: var(--ink-body); }
.on-dark .review-card .review-title,
.on-accent .review-card .review-title { color: var(--ink); }
.on-dark .review-card .name,
.on-accent .review-card .name { color: var(--ink); }
.featured-reviews__inner .btn-rounded { color: var(--ink-body); }
.featured-reviews__inner .btn-rounded:hover { color: var(--ink-slab); }
.offer-callout__inner .btn-rounded { color: var(--ink-body); }
.offer-callout__inner .btn-rounded--white { color: var(--ink-slab); }
.generic-module .btn-rounded { color: var(--ink-body); }
.generic-module .btn-rounded--white { color: var(--ink-slab); }
.form-offer__inner .btn-rounded { color: var(--ink-body); }
.form-offer__inner .btn-rounded--white { color: var(--ink-slab); }
.survey-step__inner .btn-rounded { color: var(--ink-body); }
.footer-subscribe .btn-rounded { color: var(--ink-body); }
.footer-subscribe .btn-rounded--white { color: var(--ink-slab); }

/* ==== ds chrome ========================================================= */
.ds-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem var(--gutter);
}
.ds-nav .lockup-text { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; margin: 0; color: var(--ink); font-size: 1rem; }
.ds-nav .lockup-text small { display: block; font-family: var(--font-body); font-weight: 400; text-transform: none; font-size: .75rem; color: var(--ink-muted); }
.ds-nav .tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.ds-nav .tab { font-size: .8125rem; font-weight: 600; text-decoration: none; color: var(--ink-muted); padding: .5em 1em; border-radius: var(--radius-pill); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.ds-nav .tab:hover { background: var(--paper-soft); color: var(--ink); }
.ds-nav .tab.active { background: var(--ink); color: var(--on-dark); }

.ds-hero { padding: 4rem 0 3rem; border-bottom: 1px solid var(--border); }
.ds-hero h1 { margin-bottom: .35em; }
.ds-hero .lede { max-width: 780px; }

.meta-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1.25rem; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--border); }
.meta-strip > * { min-width: 0; }
.meta-strip .k { display: block; font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-quiet); margin-bottom: .3em; }
.meta-strip .v { display: block; font-weight: 600; color: var(--ink); font-size: .9375rem; }

.door-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 18px; }
.door-cards > * { min-width: 0; }
.door { display: block; border: 1px solid var(--border); padding: 1.6rem; text-decoration: none; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.door:hover { border-color: var(--accent); background: var(--paper-soft); }
.door h3 { font-size: 1.0625rem; margin-bottom: .4em; }
.door p { font-size: .875rem; color: var(--ink-muted); margin: 0; }

.char-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 20px; }
.char-grid > * { min-width: 0; }
.anchor-tile { border: 1px solid var(--border); padding: 1.6rem; background: var(--paper); }
.anchor-tile h3 { font-size: 1.0625rem; margin-bottom: .5em; }
.anchor-tile p { font-size: .9rem; color: var(--ink-body); margin: 0; }

.files-list { display: grid; gap: .1rem; }
.files-list > div { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 1.5rem; padding: .7rem 0; border-bottom: 1px solid var(--border); align-items: baseline; }
.files-list > div > * { min-width: 0; }
.files-list code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; color: var(--ink); word-break: break-all; }
.files-list .what { font-size: .875rem; color: var(--ink-muted); }
@media (max-width: 880px) { .files-list > div { grid-template-columns: 1fr; gap: .25rem; } }

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 16px; }
.swatch-grid > * { min-width: 0; }
.swatch { border: 1px solid var(--border); overflow: hidden; }
.swatch .chip { height: 92px; }
.swatch .meta { padding: .8rem 1rem; }
.swatch .meta b { display: block; font-size: .875rem; color: var(--ink); }
.swatch .meta code { font-size: .75rem; color: var(--ink-muted); font-family: ui-monospace, monospace; }

.type-spec { border-bottom: 1px solid var(--border); padding: 1.5rem 0; }
.type-spec .note { font-size: .75rem; color: var(--ink-quiet); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; }

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-tag { border: 1px solid var(--border); border-radius: var(--radius-pill); padding: .4em 1em; font-size: .8125rem; color: var(--ink-body); }

.show-for-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Scaffolding copy the kit authors rather than transcribes. Declared in the
   markup so the verbatim gate can skip it and a reader can see the exemption
   at the point of use. */
.kit-note { font-size: var(--text-small); color: var(--ink-muted); }
/* --ink-muted, not --ink-quiet: a kit-note is prose the reader has to read to
   know why a slot is empty, and --ink-quiet renders it at 3.73:1 on paper and
   3.59:1 on the soft grey, both under AA. The contrast gate cannot see this,
   because its ratio() ignores the colour's alpha and scores the token as if it
   were solid #221f20 at 16.34:1. --ink-muted measures 6.46:1 and 6.05:1.
   The four remaining --ink-quiet uses are chrome labels, left as approved. */

/* sections.html chrome */
.sx-main { display: block; }
.sx-header { padding: 3.5rem 0 2.5rem; border-bottom: 1px solid var(--border); }
.sx-index { padding: 2.5rem 0; border-bottom: 1px solid var(--border); }
.sx-index .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 8px 20px; }
.sx-index .grid > * { min-width: 0; }
.sx-index a { font-size: .875rem; color: var(--ink-body); text-decoration: none; display: block; padding: .3rem 0; }
.sx-index a:hover { color: var(--accent); text-decoration: underline; }

.sx-pattern { border-bottom: 1px solid var(--border); padding: 3rem 0; }
.pattern-meta { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 1.5rem; margin: 0 auto 1.75rem; padding: 0 var(--gutter); max-width: var(--maxw); }
.pattern-meta > * { min-width: 0; }
@media (max-width: 880px) { .pattern-meta { grid-template-columns: 1fr; gap: .5rem; } }
.pattern-meta .id { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-family: ui-monospace, monospace; font-size: .75rem; color: var(--ink-quiet); }
.pattern-meta .num { font-weight: 700; color: var(--ink); }
.pattern-meta .signature { background: var(--accent); color: var(--on-dark); font-family: var(--font-utility); font-weight: 700; font-size: .625rem; letter-spacing: .1em; padding: .25em .7em; border-radius: var(--radius-pill); }
.pattern-meta .name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ink); margin: 0 0 .3em; }
.pattern-meta .purpose { font-size: .9rem; color: var(--ink-muted); margin: 0; }

.sx-demo { position: relative; border-top: 1px solid var(--border); }
.sx-demo .demo-label { position: absolute; top: 0; left: 0; z-index: 20; background: var(--ink); color: var(--on-dark); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; padding: .3em .8em; }

.pages-gallery { padding: 3rem 0; }
.pages-gallery .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 26px; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.pages-gallery .grid > * { min-width: 0; }
.page-card { border: 1px solid var(--border); overflow: hidden; }
.page-card .frame { height: 380px; overflow: hidden; background: var(--paper-soft); }
.page-card iframe { width: 1400px; height: 1520px; border: 0; transform: scale(.29); transform-origin: 0 0; }
.page-card .cap { padding: 1.4rem; border-top: 1px solid var(--border); }
.page-card .cap h3 { font-size: 1.0625rem; margin-bottom: .4em; }
.page-card .cap p { font-size: .875rem; color: var(--ink-muted); }
.page-card .cap a { font-size: .875rem; font-weight: 600; color: var(--accent-deep); }

.footer { background: var(--ink-body); color: var(--on-dark); padding: 2.5rem 0; }
.footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1.5rem; }
.footer .cols > * { min-width: 0; }
.footer .cols h4 { color: var(--on-dark); font-size: .8125rem; letter-spacing: .08em; margin-bottom: .5em; }
.footer .cols p { color: var(--on-dark); margin: 0; font-size: .9375rem; }

/* ==== DARK-GROUND REGISTER ==============================================
   The light-ground register above handles dark bands reaching INTO light
   components. This is the mirror case, and it is the one that actually bit:
   doc chrome reaches into a brand demo. `.anchor-tile p` (0,2,0) outranks
   `.offer-callout__tagline` (0,1,0), so dropping the CTA band into a
   design-system anchor tile repainted its white type in body ink and the
   contrast gate read it at 1.04 on a blue ground. Fixed by re-asserting the
   band's own ink at (0,3,0) rather than by weakening the chrome rule, and
   placed after the chrome block so source order can never decide it.
   Register any new on-dark component demoed inside doc chrome here. */
.offer-callout .offer-callout__inner .offer-callout__tagline,
.offer-callout .offer-callout__inner .offer-callout__title,
.offer-callout .offer-callout__inner .offer-callout__description p,
.featured-reviews .featured-reviews__inner .quote,
.generic-module .generic-module__content .generic-module__description,
.form-offer .form-offer__inner .form-offer__description,
.form-offer .form-offer__inner .form-offer__disclaimer { color: var(--on-dark); }

/* ==== responsive ========================================================
   Every kit rule that must beat the shared layer carries +1 specificity:
   mobile-responsive.css is linked AFTER this file, so an equal-specificity
   rule loses on source order. .hero-slide cannot override a shared
   .hero-slide; .slider-hero .hero-slide can. */
@media (max-width: 768px) {
  .nav .actions { display: none; }
  .nav > .container { flex-wrap: wrap; }
  .nav .links { margin-left: 0; }
}

@media (max-width: 880px) {
  .slider-hero .hero-slide { min-height: 320px; padding: 36px 16px; }
  .offer-callout .offer-callout__inner { text-align: left; }
  .who-we-are .who-we-are__inner { padding: 22px 18px 34px; }
  .featured-reviews .featured-reviews__inner { padding: 28px 20px 24px; }
  .generic-module .generic-module__title { font-size: var(--text-h3); }
}

@media (max-width: 600px) {
  /* The catalog's own nesting is a third padding layer: .sx-pattern > .sx-demo >
     the section's own .container puts a pattern in about 197px of a 305px
     viewport and manufactures overflow that exists nowhere the section will
     actually be used. Zero both here and give the inset back to .pattern-meta
     alone. The `body` prefix is the +1 specificity the shared layer needs. */
  body .sx-pattern { padding: 2.25rem 0; }
  body .sx-demo { padding-left: 0; padding-right: 0; }
  body .pattern-meta { padding: 0 1.1rem; }
  body .container, body .container-narrow { padding: 0 1.1rem; }
  body .form-offer, body .survey-step, body .featured-reviews,
  body .inspiration-board, body .who-we-are, body .proj-gallery,
  body .prod-gallery { padding-left: 0; padding-right: 0; }
  body .offer-callout .offer-callout__inner { padding: 26px 18px; }
  body .generic-module { padding: 26px 18px; }
  body .form-offer .form-offer__inner { padding: 22px 18px 20px; }
  body .survey-step .survey-step__inner { padding: 22px 18px 20px; }
  body .featured-reviews .featured-reviews__inner { padding: 24px 16px 20px; }
  body .board__inner { padding: 24px 0 14px; }
  body .board__rows { padding: 0 10px; }
  body .btn-rounded { padding: 5px 22px; font-size: 1rem; }
  body .btn-rounded--wide { padding: 5px 26px; }
}