/* ==========================================================================
   CLOSET OYSTER — shared tokens + components
   Extracted from tailoredcloset.com (The Tailored Closet, a Home Franchise
   Concepts brand; captured 2026-08-28). Episerver/Optimizely CMS behind a CDN,
   BEM component classes, Swiper carousels, Bootstrap 4.1.3 residue, OneTrust.

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

   1. #906a6f IS NOT THE ACCENT. The homepage button census ranks
      rgb(144,106,111) first, on 3 of 8 buttons. Resolving each one live shows
      all three are the icon-only zip-locator submit squares, ~40px, carrying
      no text. It is the shared Home Franchise Concepts theme default that this
      brand's per-page skin overrides everywhere a visitor reads a button.
      Every button with a label on it is #7b96b0. Taking the census at face
      value would have shipped a mauve system.

   2. THE 675,600 px2 "HERO SCRIM" IS A HOVER OVERLAY. rgba(81,96,113,.88)
      ranks fourth by painted area and is .inspiration-board__inspiration-inner,
      the mosaic's hover layer, which computes its background at rest with
      opacity 0. The hero has no scrim: the slide paints rgba(0,0,0,0) over a
      photograph and the white headline is carried entirely by
      text-shadow: 0 0 3px #292929. See the DECLARED DEVIATIONS block.

   3. TWELVE DECLARED COLOURS PAINT NOTHING, including #8fa4b8 (234
      declarations) and #b98d93 (84). A whole teal set from a sister brand's
      skin is declared on every page and renders on none of it. None are
      carried here. #b98d93 survives only as an SVG fill on social icons and
      the active swiper dot; it is an icon colour, not a token.

   FONTS. Nunito Sans is the only face that renders on any brand surface
   (146 / 379 / 440 elements across three probed pages). The shared HFC Google
   Fonts request also pulls Lora, Cormorant, DM Serif Display, Lexend Deca,
   Merriweather, Open Sans and Oswald: all render on zero elements and none are
   requested here. No paid font is involved, so there is no substitution and no
   display metrics to re-tune. The source's own leading is carried verbatim.

   THE SIGNATURE IS THE WEIGHT RANGE, NOT THE SIZE RANGE. A 200-weight overlay
   label and 300-weight body against 700-weight uppercase buttons is what makes
   this read as refined rather than corporate, and it is only available because
   Nunito Sans is variable.

   GEOMETRY IS SQUARE. 72 of 87 rendered elements compute border-radius 0px;
   8 compute 50% (circular photography, and the slider's 12px pagination
   bullets, which the source also draws as full circles); every button computes
   0px, INCLUDING the two controls in the shared mobile call bar, which are
   squared here. There is no pill and no soft card. Elevation is a 1px ink
   hairline plus one 8/16 shadow, not a radius.

   TWO SIGNATURE SHAPES, both the source's. The slate triangle notch welded to
   the top edge of the consultation card where it overlaps the hero, and the
   hairline card itself: white, 1px solid ink, radius 0, where most systems in
   this library would reach for a radius or a heavier shadow.

   DECLARED DEVIATIONS (transcribe, don't clone). Recorded in full in
   brand-spec.md.
     a. The hero carries a solid --accent-deep base colour and a
        bottom-weighted wash under the photograph. The source paints white
        50px type on a bare photo. A painted base is what survives a slow
        image load and what the Phase 5 contrast walker can resolve.
     b. --accent-strong #5b7997 carries every accent surface that holds text.
        White on the canonical #7b96b0 measures 3.07:1, below AA. #5b7997
        holds the hue at 209.4 and the saturation at .25 and measures 4.54:1.
        #7b96b0 is kept for borders, dots, rules and quiet marks.
     c. .link-arrow is rebuilt in flow. The source parks it absolutely at
        bottom: -20px, which puts the READ MORE control outside its card at
        rest the moment a label wraps.
     d. The credibility seal is not shipped. It is a raster with a service
        claim baked into pixels, which no gate can read.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..700;1,6..12,200..700&display=swap');

:root {
  /* COLOR — ink. 76 / 86 / 144 / 191 text elements across four probed pages
     compute rgb(61,61,61). It is the body ink and the heading ink both. */
  --ink: #3d3d3d;
  --ink-deep: #292929;               /* form prompts and the hero text-shadow */
  --ink-soft: #4a4a4a;
  --ink-muted: #5c5d60;              /* 5.94:1 on paper — safe for body copy */
  --ink-quiet: #6f7073;              /* doc chrome only, never body copy */

  /* COLOR — brand. --accent is the extracted CTA colour and stays the
     identity; --accent-strong is the same hue carrying text at AA. */
  --accent: #7b96b0;
  --accent-strong: #5b7997;
  --accent-deep: #3f4c5b;
  --accent-mid: #516071;             /* .link-arrow, the offer-callout wash */
  --accent-soft: rgba(123, 150, 176, .16);

  /* COLOR — grounds. The bone ground is the system. */
  --paper: #f5f3ee;
  --paper-warm: #f1eee6;
  --paper-hi: #faf9f6;
  --surface: #ffffff;
  --blush: #d3c1c3;                  /* the newsletter row and the utility pill */
  --utility-bar: #303a43;            /* the brand-switcher rail, 1440 x 70 */

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

  /* COLOR — rules */
  --border: #3d3d3d;                 /* the hairline card's 1px ink rule */
  --border-soft: rgba(61, 61, 61, .18);
  --rule: rgba(61, 61, 61, .12);

  /* TYPE. One family, variable, 200 to 700. No substitution. */
  --font: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* TYPE — fluid ramp. Desktop targets measured at 1440:
     display 50/53 · h2 40/50 · sub-h2 36/51 · overlay 34/38 · card h3 18
     lede 20 · body 16/27 · nav 14.4 · footer link 13 · fine 11. */
  --text-display: clamp(1.9rem, 2.4vw + 1.1rem, 3.125rem);
  --text-h2: clamp(1.6rem, 1.7vw + 1.05rem, 2.5rem);
  --text-h2-sub: clamp(1.45rem, 1.4vw + 1rem, 2.25rem);
  --text-overlay: clamp(1.3rem, 1.5vw + .85rem, 2.125rem);
  --text-h3: 1.125rem;
  --text-lede: clamp(1.0625rem, .35vw + .95rem, 1.25rem);
  --text-body: 1rem;
  --text-small: .875rem;
  --text-fine: .6875rem;
  --lead-display: 1.06;              /* the source's 50/53 */
  --lead-h2: 1.26;                   /* the source's 40/50 */
  --lead-body: 1.7;                  /* the source's 16/27 */

  /* SPACE */
  --gap: 24px;
  --gutter: 1.75rem;
  --section: 80px;
  --section-sm: 52px;
  --section-lg: 108px;
  --maxw: 1200px;
  --maxw-wide: 1440px;

  /* SHAPE. Radius is zero. The only curve in the system is a full circle. */
  --radius: 0;
  --radius-disc: 50%;
  --shadow-card: 0 8px 16px rgba(0, 0, 0, .15);
  --shadow-soft: 0 3px 6px rgba(0, 0, 0, .16);

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

  /* Opt into the shared sticky mobile call bar. Hiding .nav .actions at burger
     width deletes the tap-to-call rather than relocating it; mobile-nav.js
     clones the row into a thumb-height bar instead. */
  --ds-callbar: 1;
}

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

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

h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display {
  font-family: var(--font);
  color: var(--ink);
  margin: 0 0 .5em;
  line-height: var(--lead-h2);
  font-weight: 600;
  letter-spacing: 0;
}
h1, .h1, .display { font-size: var(--text-display); font-weight: 700; line-height: var(--lead-display); }
h2, .h2 { font-size: var(--text-h2); }
h2.sub, .h2.sub { font-size: var(--text-h2-sub); font-weight: 400; }
h3, .h3 { font-size: var(--text-h3); font-weight: 700; }
h4, .h4 { font-size: 1rem; font-weight: 700; }
h1, h2, h3, h4 { overflow-wrap: break-word; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

.lede { font-size: var(--text-lede); font-weight: 550; color: var(--ink-deep); line-height: 1.55; }
.small { font-size: var(--text-small); }
.fine { font-size: var(--text-fine); color: var(--ink-muted); line-height: 1.7; }
.muted { color: var(--ink-muted); }

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

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: .4em; }

/* The source ships no distinct focus ring: it reuses hover, and Bootstrap's
   stock focus blue is dead on every crawled page. This ring is authored. */
:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }
.on-dark :focus-visible { outline-color: var(--on-dark); }

.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 verbatim-audit.py 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); font-style: italic; }

/* ==== 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); }
.container-wide { width: 100%; max-width: var(--maxw-wide); margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: var(--section) 0; background: var(--paper); }
.section.tight { padding: var(--section-sm) 0; }
.section.wide { padding: var(--section-lg) 0; }
.section.warm { background: var(--paper-warm); }
.section.surface { background: var(--surface); }
.section.flush { padding-top: 0; }

.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); }

/* Dark register. The descendant rules below reach into anything nested,
   INCLUDING components that paint their 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 rather than weakening these. */
.on-dark { background-color: var(--accent-deep); color: var(--on-dark-muted); }
.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-muted); }
.on-dark .lede { color: var(--on-dark); }

/* ==== buttons ===========================================================
   Extracted: 48px tall, 3px solid border in the fill colour, radius 0,
   uppercase 700 at 1.1px tracking, transition all .15s linear. Hover empties
   the fill and inverts the label. The accent hover empties to --surface, not
   --paper: the same --accent-strong label measures 4.09:1 on the bone ground
   and 4.54:1 on white, and at 18px/700 the AA floor is 4.5 (WCAG large text
   starts at 18.66px bold), so the bone ground fails and white passes. Hover is
   now the exact inversion of the resting pair, which is also 4.54:1. The
   source's own hover label is --accent at 2.77:1; see deviation (b). */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 5px 35px;
  border: 3px solid transparent; border-radius: var(--radius);
  font-family: var(--font); font-weight: 700; font-size: 1.125rem;
  line-height: 1.15; text-transform: uppercase; letter-spacing: 1.1px;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: all var(--t) var(--ease);
}
.btn-sm { min-height: 40px; padding: 5px 20px; font-size: .9375rem; letter-spacing: 1.1px; }
.btn-lg { padding: 5px 53px; }
.btn-block { display: flex; width: 100%; }

.btn-accent { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-dark); }
.btn-accent:hover { background: var(--surface); border-color: var(--accent-strong); color: var(--accent-strong); }

.btn-navy { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--on-dark); }
.btn-navy:hover { background: var(--surface); border-color: var(--accent-deep); color: var(--accent-deep); }

.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* A DARK GROUND IS NOT ALWAYS .on-dark. An outline control inheriting
   color: var(--ink) on a dark band renders ink-on-ink. Name every dark-ground
   selector the kit actually has, not just the class. */
.on-dark .btn-outline,
.slider-hero .btn-outline,
.inner-hero .btn-outline,
.utility-bar .btn-outline,
.featured-reviews .btn-outline,
.offer-callout .btn-outline { border-color: var(--on-dark); color: var(--on-dark); }
.on-dark .btn-outline:hover,
.slider-hero .btn-outline:hover,
.inner-hero .btn-outline:hover,
.utility-bar .btn-outline:hover,
.featured-reviews .btn-outline:hover,
.offer-callout .btn-outline:hover { background: var(--on-dark); color: var(--ink); }

/* The uppercase arrow link, rebuilt IN FLOW. See deviation (c). */
.link-arrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--accent-mid); text-decoration: none;
  transition: color var(--t) var(--ease);
}
.link-arrow::after { content: ''; width: 22px; height: 1px; background: currentColor; transition: width var(--t) var(--ease); }
.link-arrow:hover { color: var(--ink); }
.link-arrow:hover::after { width: 30px; }

/* ==== 01 brand-switcher rail ============================================ */
.brand-switcher { background: var(--utility-bar); min-height: 70px; display: flex; align-items: center; }
.brand-switcher__list { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 5vw, 64px); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.brand-switcher__item a { display: inline-flex; align-items: center; padding: 5px 20px; text-decoration: none; color: var(--on-dark); font-weight: 600; font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; opacity: .9; transition: opacity var(--t) var(--ease); }
.brand-switcher__item a:hover { opacity: 1; }
.brand-switcher__item img { height: 34px; width: auto; }

/* ==== 02 site header / nav (house Pattern D) ============================ */
.nav { background: var(--surface); border-bottom: 1px solid var(--rule); position: relative; z-index: 40; }
.nav > .container { display: flex; align-items: center; gap: 14px 18px; padding-top: 14px; padding-bottom: 10px; flex-wrap: wrap; }
.nav .brand-mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; order: 1; }
.nav .brand-mark img { height: 46px; width: auto; }
/* The source's header is a lockup row over a full-width nav row. Order the three children
   rather than restructuring the markup, so the house Pattern D shape (and the burger the
   shared layer injects into it) is untouched. */
.nav .links { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.6vw, 26px); flex-wrap: wrap; order: 3; flex-basis: 100%; }
.nav .links > a { font-size: .9rem; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; text-decoration: none; color: var(--ink); padding: 6px 0; transition: color var(--t) var(--ease); }
.nav .links > a:hover { color: var(--accent-strong); }
.nav .actions { display: flex; align-items: center; gap: 12px; flex: none; order: 2; margin-left: auto; }
.nav .actions .u-phone { font-weight: 700; font-size: .9rem; letter-spacing: .04em; text-decoration: none; color: var(--ink); white-space: nowrap; }
.nav .actions .u-phone:hover { color: var(--accent-strong); }
@media (max-width: 768px) { .nav .actions { display: none; } }

/* Centred stacked variant, which is what the source actually ships. */
.nav.stacked > .container { flex-direction: column; text-align: center; gap: 12px; }
.nav.stacked .links { margin-left: 0; justify-content: center; }

/* ==== 03 mega subnav ==================================================== */
.subnav { background: var(--surface); border-bottom: 1px solid var(--rule); padding: 34px 0 40px; }
.subnav__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 28px; }
.subnav__grid > * { min-width: 0; }
.subnav__group h3 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); font-weight: 700; margin-bottom: .9em; }
.subnav__group ul { list-style: none; margin: 0; padding: 0; }
.subnav__group li { margin-bottom: .55em; }
.subnav__group a { font-size: .9375rem; font-weight: 400; text-decoration: none; color: var(--ink); }
.subnav__group a:hover { color: var(--accent-strong); text-decoration: underline; }

/* ==== 04 utility pill ================================================== */
.util-bar { background: var(--paper); border-bottom: 1px solid var(--rule); }
.util-bar > .container { display: flex; align-items: center; justify-content: flex-end; gap: 18px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.util-pill { display: inline-flex; align-items: center; background: var(--blush); color: var(--ink); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 9px 20px; text-decoration: none; transition: background-color var(--t) var(--ease); }
.util-pill:hover { background: #c6b1b4; }
.util-link { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; color: var(--ink); }
.util-link:hover { color: var(--accent-strong); }

/* ==== 05 slider hero ====================================================
   Photo under white 50px display type. The container carries a SOLID
   --accent-deep base plus a bottom-weighted wash: see deviation (a). */
.slider-hero { background-color: var(--accent-deep); position: relative; }
.slider-hero__rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.slider-hero__rail::-webkit-scrollbar { display: none; }
.slider-hero__slide {
  position: relative; scroll-snap-align: start;
  background-color: var(--accent-deep);
  background-size: cover; background-position: center;
  min-height: clamp(300px, 30vw, 440px);
  display: grid; place-items: center;
  padding: 48px var(--gutter);
}
.slider-hero__slide::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(41, 41, 41, .22) 0%, rgba(41, 41, 41, .30) 45%, rgba(41, 41, 41, .62) 100%);
}
.slider-hero__headline {
  position: relative; z-index: 2; margin: 0; text-align: center;
  color: var(--on-dark); font-weight: 700;
  font-size: var(--text-display); line-height: var(--lead-display);
  text-shadow: 0 0 3px var(--ink-deep);
  max-width: 900px;
}
/* Pagination is an OVERLAY on the photograph, not a band under it. Source:
   `.slider-hero .swiper-pagination { position: absolute }` with 12px bullets,
   `border-radius: 50%`, white, `box-shadow: 1px 1px 3px #00000080`. The dots
   are the second full-circle in the system, after the circular photography.
   The source's active bullet is #906a6f, the shared-theme default this kit
   does not carry, so the current dot is solid white against translucent white. */
.slider-hero__dots {
  position: absolute; left: 0; right: 0; bottom: 10px; z-index: 4;
  display: flex; justify-content: center; gap: 10px;
}
/* Raised to clear the consultation card that overlaps the hero, exactly as the
   source does it: `.slider-hero.has-form .swiper-pagination { bottom: 60px }`.
   Without this the card's paper ground paints straight over the dots. */
.slider-hero.has-form .slider-hero__dots { bottom: 60px; }
.slider-hero__dots span {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
}
.slider-hero__dots span.is-current { background: var(--on-dark); }

/* Prev / next controls. The source's are 41 x 62 white glyphs held at
   left/right 32px (24px narrow) at .75 opacity, served as an <img> that is not
   mirrored here. The arrowhead is rebuilt with the source's own CSS-triangle
   device (`.reviews-slider-layout .swiper-button-prev:before`), which is also
   the shape the consultation notch is cut from. */
.slider-hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 41px; height: 62px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: none; cursor: pointer;
  opacity: .75; transition: opacity var(--t) var(--ease);
}
.slider-hero__arrow:hover { opacity: 1; }
.slider-hero__arrow::before {
  content: ''; display: block; width: 0; height: 0; border-style: solid;
  filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, .5));
}
.slider-hero__arrow--prev { left: 32px; }
.slider-hero__arrow--prev::before { border-width: 20px 20px 20px 0; border-color: transparent var(--on-dark) transparent transparent; }
.slider-hero__arrow--next { right: 32px; }
.slider-hero__arrow--next::before { border-width: 20px 0 20px 20px; border-color: transparent transparent transparent var(--on-dark); }
@media (max-width: 768px) {
  .slider-hero__arrow--prev { left: 24px; }
  .slider-hero__arrow--next { right: 24px; }
  /* At phone width the 41px control and the 1rem gutter both want the same
     pixels, and the display line runs straight under the arrowhead. Give the
     slide the arrow column back as padding rather than shrinking the control. */
  .slider-hero__slide { padding-left: 72px; padding-right: 72px; }
}

/* ==== 06 inner-page hero ================================================ */
.inner-hero {
  background-color: var(--accent-deep);
  background-size: cover; background-position: center;
  position: relative; display: grid; place-items: center;
  min-height: clamp(220px, 20vw, 300px); padding: 44px var(--gutter);
}
.inner-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(41, 41, 41, .30), rgba(41, 41, 41, .58)); }
.inner-hero__headline { position: relative; z-index: 2; margin: 0; text-align: center; color: var(--on-dark); text-shadow: 0 0 3px var(--ink-deep); font-size: var(--text-h2); font-weight: 700; }

/* ==== 07 title-only page banner ========================================= */
.page-banner { background: var(--paper-warm); padding: 54px 0 44px; text-align: center; }
.page-banner h1 { margin-bottom: .2em; }
.page-banner .banner-sup { font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); margin: 0 0 .8em; }

/* ==== 08 breadcrumb ===================================================== */
.breadcrumb { border-bottom: 1px solid var(--rule); background: var(--paper); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .5em; list-style: none; margin: 0; padding: 14px 0; font-size: .8125rem; color: var(--ink-muted); }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: '/'; margin-right: .5em; color: var(--ink-quiet); }
.breadcrumb a { color: var(--ink-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }

/* ==== 09 consultation card (hairline card + slate notch) ================
   The system's one true signature shape. 80 x 50 downward triangle in
   --accent-deep welded to the top edge of a white card with a 1px ink rule,
   pulled up over the hero. */
.form-offer { background: var(--paper); padding: 0 0 var(--section-sm); }
.form-offer.overlap { margin-top: -40px; position: relative; z-index: 5; }
.form-offer__inner {
  position: relative; background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-card);
  padding: 46px 18px 34px; max-width: 940px; margin: 0 auto; text-align: center;
}
.form-offer__notch {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 40px solid transparent; border-right: 40px solid transparent;
  border-top: 50px solid var(--accent-deep);
}
.form-offer__prompt { font-size: var(--text-h2-sub); font-weight: 600; color: var(--ink-deep); margin: 0 0 .5em; }
.form-offer__description { max-width: 620px; margin: 0 auto 1.6em; color: var(--ink); }
.form-offer__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; margin-bottom: 20px; text-align: left; }
.form-offer__fields > * { min-width: 0; }
.form-offer__step { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-muted); font-weight: 700; margin: 0 0 1.2em; }
.form-offer__phone { display: block; margin-top: 1.2em; font-weight: 700; color: var(--ink-deep); text-decoration: none; }
.form-offer__phone:hover { color: var(--accent-strong); }

/* ==== forms ============================================================= */
.field { display: block; }
.field label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--ink-muted); margin-bottom: .4em; }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; font-family: var(--font); font-size: 1rem; font-weight: 400;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--ink-muted); border-radius: var(--radius);
  padding: 11px 13px; min-height: 44px;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-strong); }

/* ==== 10 zip locator ==================================================== */
.zip-locator { background: var(--paper-warm); padding: var(--section) 0; text-align: center; }
.zip-locator__form { display: flex; gap: 12px; justify-content: center; align-items: flex-end; flex-wrap: wrap; max-width: 560px; margin: 1.8rem auto 0; }
.zip-locator__form .field { flex: 1 1 240px; min-width: 0; text-align: left; }

/* ==== 11 review strip =================================================== */
.review-strip { background: var(--surface); padding: var(--section-sm) 0; }
.review-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(340px, 82vw);
  gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 10px;
}
.review-card { scroll-snap-align: start; background: var(--surface); border: 1px solid var(--border-soft); padding: 26px 24px; min-width: 0; }
.review-card .stars { display: flex; gap: 3px; margin-bottom: .9em; color: var(--accent-strong); }
.review-card .stars span { width: 14px; height: 14px; background: currentColor; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.review-card h3 { font-size: 1rem; margin-bottom: .6em; }
.review-card .quote { font-size: .9375rem; color: var(--ink); margin-bottom: 1em; }
.review-card .name { font-size: .8125rem; font-weight: 700; color: var(--ink-muted); }

/* ==== 12 circular intro grid =========================================== */
.circle-grid { padding: var(--section) 0; background: var(--paper); }
.circle-grid__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 34px 26px; }
.circle-grid__cards > * { min-width: 0; }
.circle-card { text-align: center; }
.circle-card__img { width: min(200px, 70%); aspect-ratio: 1 / 1; border-radius: var(--radius-disc); background: var(--paper-warm) center/cover no-repeat; margin: 0 auto 1.1rem; display: block; }
.circle-card h3 { font-size: 1.125rem; margin-bottom: .5em; }
.circle-card p { font-size: .9375rem; color: var(--ink); }
.circle-card a { color: var(--accent-mid); }

/* ==== 13 inspiration mosaic ============================================
   Hover-reveal 200-weight labels. The overlay is the source's: a FULL-COVER
   slate panel, `background-color: #516071e0` on
   .inspiration-board__inspiration-inner, flex column, centred on both axes,
   with the 34px/200 title centred over a small bold sub-label. The only
   deviation is that the layer is painted at rest rather than at opacity 0,
   which is what the source's own `.in-view` state does. */
.mosaic { background: var(--paper); padding: var(--section) 0; }
.mosaic__lede { max-width: 940px; margin: 0 auto 2.4rem; text-align: center; }
/* 420px minimum rather than 300: the source composes this as a 2 x 2 mosaic of large and
   small pairs, and a 300px track resolves to three columns at 1280 and breaks the pairing. */
.mosaic__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; }
.mosaic__grid > * { min-width: 0; }
.mosaic__tile {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  min-height: clamp(230px, 22vw, 320px); padding: 26px 24px;
  background-color: var(--accent-deep); background-size: cover; background-position: center;
  text-decoration: none;
}
.mosaic__tile::before { content: ''; position: absolute; inset: 0; background-color: rgba(81, 96, 113, .88); transition: background-color var(--t) var(--ease); }
.mosaic__tile > * { position: relative; z-index: 2; }
.mosaic__tile h3 { color: var(--on-dark); font-weight: 200; font-size: var(--text-overlay); line-height: 1.12; margin-bottom: .3em; }
.mosaic__tile p { color: var(--on-dark); font-weight: 600; font-size: .8125rem; margin: 0; }
.mosaic__tile.tall { min-height: clamp(280px, 28vw, 400px); }

/* ==== 14 before / after ================================================ */
.before-after { background: var(--paper-warm); padding: var(--section) 0; }
.before-after__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.before-after__pair > * { min-width: 0; }
.before-after__frame { position: relative; background: var(--paper); }
.before-after__frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.before-after__frame .tag { position: absolute; top: 0; left: 0; background: var(--ink-deep); color: var(--on-dark); font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; }
.before-after__foot { text-align: center; margin-top: 1.6rem; }
@media (max-width: 880px) { .before-after__pair { grid-template-columns: 1fr; } }

/* ==== 15 centred rich-text lede ======================================== */
.rtf-lede { background: var(--paper); padding: var(--section-sm) 0; text-align: center; }
.rtf-lede p { max-width: 940px; margin-left: auto; margin-right: auto; }

/* ==== 16 blog card rail ================================================ */
.blog-rail { background: var(--paper); padding: var(--section) 0; }
.blog-rail__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(320px, 82vw);
  gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px;
}
.blog-card { scroll-snap-align: start; min-width: 0; display: flex; flex-direction: column; }
.blog-card__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--paper-warm); }
.blog-card h3 { font-size: 1.0625rem; margin: 1.1em 0 .5em; }
.blog-card h3 a { text-decoration: none; }
.blog-card h3 a:hover { color: var(--accent-strong); }
.blog-card p { font-size: .9375rem; color: var(--ink); }
.blog-card .link-arrow { margin-top: auto; padding-top: .8em; }

/* ==== 17 split feature with circular portrait ========================== */
.split-feature { background: var(--paper-warm); padding: var(--section) 0; }
.split-feature__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split-feature__inner > * { min-width: 0; }
.split-feature__portrait { width: min(320px, 100%); aspect-ratio: 1 / 1; border-radius: var(--radius-disc); object-fit: cover; margin: 0 auto; }
@media (max-width: 880px) { .split-feature__inner { grid-template-columns: 1fr; gap: 30px; } }

/* ==== 18 newsletter band + social row ================================== */
.newsletter-band { background: var(--blush); padding: 44px 0; }
.newsletter-band__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
.newsletter-band__inner > * { min-width: 0; }
.newsletter-band h2 { font-size: var(--text-h2-sub); margin-bottom: 0; }
.newsletter-band__form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.newsletter-band__form .field { flex: 1 1 220px; min-width: 0; }
.social-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 1.4rem; }
.social-row h3 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em; margin: 0; color: var(--ink); }
.social-row a { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; font-size: .75rem; font-weight: 700; }
.social-row a:hover { background: var(--ink); color: var(--blush); }
@media (max-width: 880px) { .newsletter-band__inner { grid-template-columns: 1fr; } }

/* ==== 19 footer ======================================================== */
.footer { background: var(--paper); padding: var(--section-sm) 0 28px; border-top: 1px solid var(--rule); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 28px; padding-bottom: 26px; }
.footer-grid > * { min-width: 0; }
.footer h4 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); margin-bottom: 1em; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .5em; }
.footer a { font-size: .8125rem; line-height: 2; color: var(--ink); text-decoration: none; }
.footer a:hover { color: var(--accent-strong); text-decoration: underline; }
.footer-utility { display: flex; flex-wrap: wrap; gap: 6px 20px; border-top: 1px solid var(--rule); padding-top: 18px; }
.footer-utility a { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.footer .legal { margin-top: 16px; }
.footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 22px; }
.footer .cols > * { min-width: 0; }
.footer .cols h4 { margin-bottom: .4em; }
.footer .cols p { font-size: .875rem; color: var(--ink-muted); margin: 0; }

/* ==== 20 alternating module ============================================ */
.alt-module { background: var(--paper); }
.alt-module__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.alt-module__inner > * { min-width: 0; }
.alt-module__img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; background: var(--paper-warm); }
.alt-module__content { padding: clamp(28px, 4vw, 64px); }
.alt-module__content h2 { margin-bottom: .5em; }
.alt-module.flip .alt-module__img { order: 2; }
@media (max-width: 880px) {
  .alt-module__inner { grid-template-columns: 1fr; }
  .alt-module.flip .alt-module__img { order: 0; }
}

/* ==== 21 enhanced alternating module (offset image) ==================== */
.alt-module.enhanced { background: var(--paper-warm); padding: var(--section) 0; }
.alt-module.enhanced .alt-module__inner { gap: 0 clamp(24px, 4vw, 60px); align-items: center; }
.alt-module.enhanced .alt-module__img { min-height: 380px; margin-top: -34px; margin-bottom: 34px; box-shadow: var(--shadow-soft); }
.alt-module.enhanced .alt-module__content { padding: clamp(20px, 2vw, 32px) 0; }
@media (max-width: 880px) { .alt-module.enhanced .alt-module__img { margin-top: 0; margin-bottom: 0; } }

/* ==== 22 room index grid =============================================== */
.room-grid { background: var(--paper); padding: var(--section) 0; }
.room-grid__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 26px; }
.room-grid__cards > * { min-width: 0; }
.room-card { background: var(--surface); border: 1px solid var(--border-soft); display: flex; flex-direction: column; }
.room-card__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--paper-warm); }
.room-card__body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.room-card h3 { font-size: 1.125rem; margin-bottom: .5em; }
.room-card p { font-size: .9375rem; }
.room-card .link-arrow { margin-top: auto; padding-top: 1em; }

/* ==== 23 product gallery carousel ====================================== */
.prod-gallery { background: var(--paper-warm); padding: var(--section) 0; }
.prod-gallery__inner { display: grid; grid-template-columns: 1.35fr 1fr; gap: 34px; align-items: center; }
.prod-gallery__inner > * { min-width: 0; }
.prod-gallery__stage img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper); }
.prod-gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(84px, 30%), 1fr)); gap: 10px; margin-top: 12px; }
.prod-gallery__thumbs > * { min-width: 0; }
.prod-gallery__thumbs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 2px solid transparent; }
.prod-gallery__thumbs img.is-current { border-color: var(--accent-strong); }
@media (max-width: 880px) { .prod-gallery__inner { grid-template-columns: 1fr; } }

/* ==== 24 filterable project gallery ==================================== */
.proj-gallery { background: var(--paper); padding: var(--section) 0; }
.proj-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 2rem; }
.proj-chip { border: 1px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--font); font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 9px 18px; cursor: pointer; transition: all var(--t) var(--ease); }
.proj-chip:hover, .proj-chip.is-current { background: var(--ink); color: var(--paper); }
.proj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.proj-grid > * { min-width: 0; }
.proj-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--paper-warm); }

/* ==== 25 spec accordion ================================================ */
.accordion { background: var(--paper); padding: var(--section) 0; }
.accordion__item { border-bottom: 1px solid var(--border-soft); }
.accordion__item:first-child { border-top: 1px solid var(--border-soft); }
.accordion__header { margin: 0; }
.accordion__header button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: transparent; border: 0; padding: 22px 4px; cursor: pointer; text-align: left;
  font-family: var(--font); font-size: 1.125rem; font-weight: 700; color: var(--ink);
}
.accordion__header button::after { content: ''; width: 12px; height: 12px; border-right: 2px solid var(--accent-mid); border-bottom: 2px solid var(--accent-mid); transform: rotate(45deg); flex: none; }
.accordion__body { padding: 0 4px 24px; max-width: 900px; }
.accordion__body ul { padding-left: 1.1em; }
.accordion__body li { font-size: .9375rem; }

/* ==== 26 tab module ==================================================== */
.tab-module { background: var(--paper-warm); padding: var(--section) 0; }
.tab-module__tablist { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--border-soft); margin-bottom: 2.2rem; }
.tab-module__tab {
  background: transparent; border: 0; border-bottom: 3px solid transparent;
  font-family: var(--font); font-size: .9375rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted);
  padding: 14px 20px; cursor: pointer; transition: all var(--t) var(--ease);
}
.tab-module__tab:hover { color: var(--ink); }
.tab-module__tab.is-current { color: var(--ink); border-bottom-color: var(--accent-strong); }
.tab-module__panel { max-width: 940px; }

/* ==== 27 swatch gallery ================================================ */
.swatch-gallery { background: var(--paper); padding: var(--section) 0; }
.swatch-gallery__swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(128px, 100%), 1fr)); gap: 16px; list-style: none; margin: 2rem 0 0; padding: 0; }
.swatch-gallery__swatches > * { min-width: 0; margin-bottom: 0; }
.swatch-tile { display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--paper-warm); border: 1px solid var(--border-soft); }
.swatch-name { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink); margin-top: .5em; }

/* ==== 28 four-column detail cards over a photo wash ==================== */
.four-col {
  position: relative; padding: var(--section) 0;
  background-color: var(--paper-warm);
  background-size: cover; background-position: center;
}
.four-col::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(245, 243, 238, .97), rgba(245, 243, 238, .88)); }
.four-col > * { position: relative; z-index: 2; }
.four-col__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 22px; }
.four-col__cards > * { min-width: 0; }
.four-col__card { background: var(--surface); border: 1px solid var(--border-soft); padding: 26px 24px; }
.four-col__card h3 { font-size: 1.0625rem; margin-bottom: .6em; }
.four-col__card p { font-size: .9375rem; margin-bottom: 0; }

/* ==== 29 two-column body / aside ====================================== */
.two-col { background: var(--paper); padding: var(--section) 0; }
.two-col__inner { display: grid; grid-template-columns: 1.7fr 1fr; gap: 48px; align-items: start; }
.two-col__inner > * { min-width: 0; }
.two-col__aside { background: var(--surface); border: 1px solid var(--border-soft); padding: 28px 26px; }
.two-col__aside h3 { font-size: 1.0625rem; }
@media (max-width: 880px) { .two-col__inner { grid-template-columns: 1fr; gap: 30px; } }

/* ==== 30 featured reviews carousel (dark slate) ======================= */
.featured-reviews { background: var(--accent-deep); padding: var(--section) 0; color: var(--on-dark-muted); }
.featured-reviews h2 { color: var(--on-dark); }
.featured-reviews__rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(360px, 82vw);
  gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px;
}
.featured-review { scroll-snap-align: start; background: var(--surface); padding: 28px 26px; min-width: 0; }
.featured-reviews__foot { text-align: center; margin-top: 2.2rem; }

/* ==== 31 reviews list + load more ===================================== */
.reviews-list { background: var(--paper); padding: var(--section) 0; }
.reviews-list__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 22px; }
.reviews-list__grid > * { min-width: 0; }
.reviews-list__foot { text-align: center; margin-top: 2.4rem; }
.add-review { background: var(--surface); border: 1px solid var(--border); padding: 28px 26px; text-align: center; margin-top: 2.4rem; }

/* ==== 32 offer callout (photo under a slate wash) ===================== */
.offer-callout {
  position: relative; padding: var(--section) 0;
  background-color: var(--accent-mid);
  background-size: cover; background-position: center;
  color: var(--on-dark);
}
.offer-callout::before { content: ''; position: absolute; inset: 0; background-color: rgba(81, 96, 113, .88); }
.offer-callout > * { position: relative; z-index: 2; }
.offer-callout h2, .offer-callout h3 { color: var(--on-dark); }
.offer-callout p { color: var(--on-dark); }
.offer-callout__inner { text-align: center; max-width: 820px; margin: 0 auto; }
.offer-callout__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }

/* ==== 33 local intro with owner pull-quote ============================ */
.local-intro { background: var(--paper); padding: var(--section) 0; }
.local-intro__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.local-intro__inner > * { min-width: 0; }
.local-intro__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-warm); }
.local-quote { background: var(--paper-hi); border-left: 3px solid var(--accent); padding: 22px 24px; margin: 0 0 1.6rem; }
.local-quote p { font-size: var(--text-lede); font-weight: 550; color: var(--ink-deep); margin-bottom: .6em; }
.local-quote .name { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }
@media (max-width: 880px) { .local-intro__inner { grid-template-columns: 1fr; gap: 28px; } }

/* ==== 34 local info bar =============================================== */
.local-info { background: var(--paper-warm); padding: var(--section-sm) 0; border-top: 1px solid var(--rule); }
.local-info__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 30px; }
.local-info__grid > * { min-width: 0; }
.local-info h3 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); margin-bottom: .8em; }
.local-info p, .local-info li { font-size: .9375rem; margin-bottom: .3em; }
.local-info ul { list-style: none; padding: 0; margin: 0; }
.local-info a { color: var(--ink); }
.local-info .territory { border-top: 1px solid var(--rule); margin-top: 26px; padding-top: 22px; }
.local-info .territory p { font-size: .8125rem; color: var(--ink-muted); }

/* ==== 35 blog listing (filter + load more) ============================ */
.blog-listing { background: var(--paper); padding: var(--section) 0; }
.blog-listing__filter { display: flex; justify-content: flex-end; margin-bottom: 1.6rem; }
.blog-listing__filter-toggle {
  background: var(--surface); border: 1px solid var(--ink); color: var(--ink);
  font-family: var(--font); font-size: .875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; padding: 11px 20px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 12px;
}
.blog-listing__filter-toggle::after { content: ''; width: 9px; height: 9px; border-right: 2px solid var(--accent-mid); border-bottom: 2px solid var(--accent-mid); transform: rotate(45deg) translate(-2px, -2px); }
.blog-listing__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 30px; list-style: none; margin: 0; padding: 0; }
.blog-listing__items > * { min-width: 0; margin-bottom: 0; }
.blog-listing__load-more { text-align: center; margin-top: 2.6rem; }
.blog-cat { display: inline-block; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-muted); margin-top: .6em; }

/* ==== 36 featured blog cards ========================================== */
.featured-blogs { background: var(--paper-warm); padding: var(--section) 0; }
.featured-blogs__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 34px; }
.featured-blogs__inner > * { min-width: 0; }
.featured-blog { display: flex; flex-direction: column; }
.featured-blog__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--paper); }
.featured-blog h2 { font-size: var(--text-h2-sub); margin: 1em 0 .5em; }
.featured-blog h2 a { text-decoration: none; }
.featured-blog h2 a:hover { color: var(--accent-strong); }

/* ==== 37 blog detail ================================================== */
.blog-detail { background: var(--paper); padding: var(--section-sm) 0 var(--section); }
.blog-detail__header { max-width: 860px; margin: 0 auto 2.2rem; text-align: center; }
.blog-detail__meta { font-size: .8125rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .08em; }
.blog-detail__inner { display: grid; grid-template-columns: 1.9fr 1fr; gap: 52px; align-items: start; }
.blog-detail__inner > * { min-width: 0; }
.blog-detail__content h2 { font-size: var(--text-h2-sub); margin-top: 1.6em; }
.blog-detail__content h3 { margin-top: 1.4em; }
.blog-detail__content img { width: 100%; margin: 1.6em 0; }
.blog-detail__sidebar { background: var(--surface); border: 1px solid var(--border-soft); padding: 26px 24px; }
.blog-detail__sidebar h3 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); }
.blog-detail__sidebar ul { list-style: none; padding: 0; margin: 0; }
.blog-detail__sidebar li { margin-bottom: .5em; }
.blog-detail__sidebar a { font-size: .9375rem; text-decoration: none; }
.blog-detail__sidebar a:hover { text-decoration: underline; }
.blog-social { border-top: 1px solid var(--rule); margin-top: 2.6rem; padding-top: 1.6rem; }
.blog-social h2 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); margin-bottom: .9em; }
@media (max-width: 880px) { .blog-detail__inner { grid-template-columns: 1fr; gap: 34px; } }

/* ==== 38 related posts =============================================== */
.related-posts { background: var(--paper-warm); padding: var(--section) 0; }
.related-posts__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 30px; }
.related-posts__inner > * { min-width: 0; }
.related-post__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--paper); }
.related-post h3 { font-size: 1.0625rem; margin: 1em 0 .4em; }
.related-post h3 a { text-decoration: none; }
.related-post h3 a:hover { color: var(--accent-strong); }
.related-post .publishing-info { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); margin-bottom: .7em; }
.related-post .teaser { font-size: .9375rem; color: var(--ink); text-decoration: none; display: block; }

/* ==== 39 meet the team =============================================== */
.meet-team { background: var(--paper); padding: var(--section) 0; }
.meet-team__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 36px; }
.meet-team__grid > * { min-width: 0; }
.team-member { text-align: center; }
.team-member__img { width: min(220px, 70%); aspect-ratio: 1 / 1; border-radius: var(--radius-disc); object-fit: cover; margin: 0 auto 1.2rem; background: var(--paper-warm); }
.team-member h3 { font-size: 1.125rem; margin-bottom: .2em; }
/* The role line belongs to the name, not the bio: it takes the card's centring
   rather than the left alignment the body copy below it sets. */
.team-member .role { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--ink-muted); margin-bottom: 1em; text-align: center; }
.team-member p { font-size: .9375rem; text-align: left; }

/* ==== 40 accolades ===================================================
   The source's own card and type: `.content-slider__slide { background-color:
   #fff; box-shadow: 0 1px 9px #00000029 }` carrying a 28px/400 CENTRED title.
   The elevation device is that soft shadow, not a hairline border, and the
   title is the system's one light-weight heading. */
.accolades { background: var(--paper-warm); padding: var(--section) 0; }
.accolades__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 22px; }
.accolades__grid > * { min-width: 0; }
.accolade { background: var(--surface); box-shadow: 0 1px 9px rgba(0, 0, 0, .16); padding: 26px 24px; text-align: center; }
.accolade h3 { font-size: 1.75rem; font-weight: 400; line-height: 1.14; margin-bottom: .5em; }
.accolade p { font-size: .9375rem; margin-bottom: 0; }

/* ==== shared page furniture ========================================== */
.cta-closer { background: var(--paper-warm); padding: var(--section) 0; text-align: center; }
.cta-closer__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }

/* ==== LIGHT-GROUND REGISTER ==========================================
   .on-dark p / .featured-reviews / .offer-callout are descendant rules, so
   they reach into any nested component that paints its own LIGHT ground.
   Each such component reasserts its ink here at higher specificity. Never
   weaken the band rule instead. REGISTER NEW LIGHT-GROUND COMPONENTS HERE. */
.featured-reviews .featured-review p,
.featured-reviews .featured-review .quote,
.on-dark .review-card p,
.on-dark .review-card .quote,
.on-dark .four-col__card p,
.on-dark .accolade p { color: var(--ink); }
.featured-reviews .featured-review h3,
.featured-reviews .featured-review h4,
.on-dark .review-card h3,
.on-dark .four-col__card h3,
.on-dark .accolade h3 { color: var(--ink); }
.featured-reviews .featured-review .name,
.on-dark .review-card .name { color: var(--ink-muted); }
.featured-reviews .featured-review .stars { color: var(--accent-strong); }
/* The blush band is light but not white: the muted ink token measures 3.82:1 on it,
   so field labels there take full ink (6.30:1) instead. */
.newsletter-band .field label { color: var(--ink); }
/* THE INVERSE CASE, and it is the one that bit. A DARK component nested inside a LIGHT
   doc-chrome container: `.anchor-tile p` (0,1,1) ties `.mosaic__tile p` (0,1,1) and wins on
   source order, which put ink on the slate tile at 1.24:1 in the design-system kitchen
   sink. Reassert the dark-ground component at (0,2,1). Register new ones here. */
.anchor-tile .mosaic__tile h3,
.anchor-tile .mosaic__tile p { color: var(--on-dark); }

/* A BUTTON IS A LIGHT-GROUND COMPONENT TOO. `.footer a` (0,1,1) outranks
   `.btn-accent` (0,1,0), so a footer CTA would take the footer's link colour.
   Reassert each variant at (0,2,1). Register new variants here. */
.footer a.btn-accent, .on-dark a.btn-accent,
.footer a.btn-navy, .on-dark a.btn-navy { color: var(--on-dark); }
.footer a.btn-outline { color: var(--ink); }
.footer a.btn-accent:hover { color: var(--accent-strong); }
.footer a.btn-navy:hover { color: var(--accent-deep); }
.local-info a.btn-accent { color: var(--on-dark); }

/* ==== ds chrome ====================================================== */
.ds-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface); border-bottom: 1px solid var(--border-soft);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .9rem var(--gutter);
}
.ds-nav .lockup-text { font-weight: 700; margin: 0; color: var(--ink); font-size: 1rem; letter-spacing: .02em; }
.ds-nav .lockup-text small { display: block; font-weight: 400; 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: 700; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; color: var(--ink-muted); padding: .5em 1em; transition: all var(--t) var(--ease); }
.ds-nav .tab:hover { background: var(--paper); color: var(--ink); }
.ds-nav .tab.active { background: var(--ink); color: var(--on-dark); }

.ds-hero { padding: 4rem 0 3rem; background: var(--paper); border-bottom: 1px solid var(--border-soft); }
.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-soft); }
.meta-strip > * { min-width: 0; }
.meta-strip .k { display: block; font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); margin-bottom: .3em; }
.meta-strip .v { display: block; font-weight: 700; 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; background: var(--surface); border: 1px solid var(--border-soft); padding: 1.6rem; text-decoration: none; transition: all var(--t) var(--ease); }
.door:hover { border-color: var(--ink); }
.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 { background: var(--surface); border: 1px solid var(--border-soft); padding: 1.6rem; }
.anchor-tile h3 { font-size: 1.0625rem; margin-bottom: .5em; }
.anchor-tile p { font-size: .9rem; color: var(--ink); margin: 0; }

.files-list { display: grid; gap: .1rem; }
.files-list > div { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 1.5rem; padding: .7rem 0; border-bottom: 1px solid var(--border-soft); align-items: baseline; }
.files-list > div > * { min-width: 0; }
.files-list code { font-family: var(--font-mono); 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 { background: var(--surface); border: 1px solid var(--border-soft); }
.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: var(--font-mono); }

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

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.chip-tag { border: 1px solid var(--border-soft); background: var(--surface); padding: .5em 1.1em; font-size: .8125rem; color: var(--ink); }

/* sections.html chrome */
.sx-main { display: block; }
.sx-header { padding: 3.5rem 0 2.5rem; background: var(--paper); border-bottom: 1px solid var(--border-soft); }
.sx-index { padding: 2.5rem 0; background: var(--surface); border-bottom: 1px solid var(--border-soft); }
.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); text-decoration: none; display: block; padding: .3rem 0; }
.sx-index a:hover { color: var(--accent-strong); text-decoration: underline; }

.sx-pattern { border-bottom: 1px solid var(--border-soft); padding: 3rem 0; background: var(--surface); }
.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; }
.pattern-meta .id { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: .75rem; color: var(--ink-muted); }
.pattern-meta .num { font-weight: 700; color: var(--ink); }
.pattern-meta .signature { background: var(--accent-strong); color: var(--on-dark); font-family: var(--font); font-weight: 700; font-size: .625rem; letter-spacing: .12em; padding: .3em .7em; }
.pattern-meta .name { font-weight: 700; color: var(--ink); margin: 0 0 .3em; }
.pattern-meta .purpose { font-size: .9rem; color: var(--ink-muted); margin: 0; }
@media (max-width: 880px) { .pattern-meta { grid-template-columns: 1fr; gap: .5rem; } }

.sx-demo { position: relative; border-top: 1px solid var(--border-soft); }
.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; }

/* The catalog nests each demo inside .sx-pattern > .sx-demo > the section's own
   .container, which is a third padding layer. On a phone that renders a pattern
   in ~197px of a 305px viewport and manufactures overflow that exists nowhere
   else. Zero the horizontal padding under 600px and give it back to the meta
   block alone. The body prefix is the +1 specificity the shared layer needs. */
@media (max-width: 600px) {
  body .sx-pattern { padding-left: 0; padding-right: 0; }
  body .sx-demo { padding-left: 0; padding-right: 0; }
  body .pattern-meta { padding-left: 16px; padding-right: 16px; }
}

/* pages gallery */
.pages-gallery { padding: 3rem 0; background: var(--paper); }
.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 { background: var(--surface); border: 1px solid var(--border-soft); overflow: hidden; }
.page-card .frame { height: 380px; overflow: hidden; background: var(--paper-warm); }
.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-soft); }
.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: 700; color: var(--accent-mid); }

/* ==== kit responsive =================================================
   Every fixed multi-column track above ships its own 880px collapse in the
   same block. These are the remaining width rules. */
@media (max-width: 880px) {
  .prod-gallery__inner,
  .local-intro__inner,
  .split-feature__inner,
  .two-col__inner,
  .blog-detail__inner,
  .alt-module__inner,
  .newsletter-band__inner,
  .before-after__pair { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  :root { --gutter: 1rem; --section: 56px; --section-sm: 38px; --section-lg: 76px; }
  .nav.stacked > .container { flex-direction: row; text-align: left; }
  .form-offer__inner { padding: 42px 16px 28px; }
  .brand-switcher__list { gap: 14px; }

  /* The shared call bar ships its two controls as 999px pills. This system has
     no pill: every control computes radius 0. mobile-responsive.css loads
     AFTER this file, so the override needs the +1 specificity of the `body`
     prefix or the shared rule wins. Border weight matches .btn (3px) so the
     bar's outline control reads as the kit's own button, not a foreign chip. */
  body .ds-callbar > a { border-radius: var(--radius); border-width: 3px; }
  /* Same reason, same shared layer: the burger arrives with a 10px radius and
     is the only other rounded element the kit renders. */
  body .nav-burger { border-radius: var(--radius); }
}