/* ==========================================================================
   WINDOWS-OXBLOOD — shared design tokens + components
   Extracted from mastercraftsmenlv.com (captured 2026-08-13, live DOM + raw CSS).
   Premium Las Vegas windows and doors: white paper, near-black ink, a deep
   oxblood accent used sparingly, slate as the workhorse control colour.
   Type is the whole personality: one family, every heading uppercase at
   weight 800 with tracking set to exactly 10% of its own font size.
   Face: Montserrat, self-hosted by the source, free on Google Fonts, so it
   is used directly with no substitution.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  /* COLOR — brand (extracted from theme MCLV assets/css/general/defaults.css,
     every value confirmed painting by the live-DOM probe at 1440) */
  --accent: #5e1717;              /* oxblood — 90,804 px², 25 text elements */
  --accent-deep: #3d0f0f;         /* derived: pressed / deep ground */
  --accent-soft: rgba(94, 23, 23, .12);
  --accent-line: rgba(94, 23, 23, .32);

  --slate: #59697a;               /* 278,201 px²; 9 of 25 buttons */
  --slate-deep: #43505e;
  --slate-soft: rgba(89, 105, 122, .12);

  /* COLOR — ink */
  --ink: #1c1c1c;                 /* theme --black */
  --ink-soft: rgba(28, 28, 28, .74);
  --ink-muted: rgba(28, 28, 28, .58);
  --ink-quiet: rgba(28, 28, 28, .40);   /* doc chrome only, never body copy */

  /* COLOR — grounds */
  --paper: #ffffff;
  --grey-lt: #f2f2f2;             /* band alternation, 2,926,640 px² */
  --grey-md: #cbcbcb;             /* --graphic-color: hairline rules */
  --ground-dark: #1c1c1c;
  --ground-darker: #101010;

  /* COLOR — on-dark */
  --on-dark: #ffffff;
  --on-dark-soft: rgba(255, 255, 255, .78);
  --on-dark-quiet: rgba(255, 255, 255, .58);
  --accent-on-dark: #e6b3b3;      /* lightness-inverted oxblood, matches logo-light */

  /* COLOR — rules + scrim */
  --border: #e3e3e3;
  --border-mid: var(--grey-md);
  --scrim: rgba(0, 0, 0, .7);     /* extracted: 1,296,000 px² hero overlay */
  --scrim-soft: rgba(0, 0, 0, .45);

  /* TYPE */
  --font: 'Montserrat', 'Helvetica Neue', system-ui, sans-serif;

  /* TYPE — fluid scale. Source sizes: hero 84 / h1 60 / h2 48 / h3 36 /
     h4 24 / h5 18 / body 16 / body-large 22. */
  --text-hero: clamp(2.25rem, 4.4vw + 1rem, 5.25rem);
  --text-h1: clamp(1.95rem, 2.6vw + 1rem, 3.75rem);
  --text-h2: clamp(1.65rem, 2vw + .9rem, 3rem);
  --text-h3: clamp(1.35rem, 1.2vw + .85rem, 2.25rem);
  --text-h4: clamp(1.15rem, .5vw + .95rem, 1.5rem);
  --text-h5: 1.125rem;
  --text-body-lg: clamp(1.05rem, .5vw + .95rem, 1.375rem);
  --text-body: 1rem;
  --text-meta: .875rem;

  /* TYPE — the extracted rule: tracking is 10% of font size on every heading */
  --track-heading: .1em;
  --track-btn: .1em;

  /* LAYOUT — source --container-width: 1630px */
  --container: 1440px;
  --container-wide: 1630px;
  --container-narrow: 880px;
  --gutter-sm: 32px;              /* source --gutter-sm */
  --gutter-lg: 96px;              /* source --gutter-lg */
  --section: clamp(56px, 6vw, 104px);

  /* RADII — extracted: 5px and 7px. The declared 9999px pill renders on 6
     elements only (slider arrows), so it is not the button system. */
  --radius-sm: 5px;
  --radius-lg: 7px;
  --radius-circle: 50%;

  /* SHADOW — the source paints only two on its homepage. Restraint is the
     character, so the kit ships exactly these. */
  --shadow-menu: 0 6px 15px rgba(0, 0, 0, .086);
  --shadow-float: 2px 2px 10px rgba(0, 0, 0, .4);

  /* SIGNATURE — brand stamp watermark (source --stamp-opacity: .35) */
  --stamp-opacity: .35;
  --stamp-color: var(--accent);
  /* SIGNATURE — hairline graphics (source --graphic-stroke-width: 1px) */
  --graphic-stroke-width: 1px;
  --graphic-color: var(--grey-md);
}

/* ==========================================================================
   RESET + BASE
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.56;
  letter-spacing: .4px;             /* extracted body tracking */
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); }

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5, .hero-text {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-heading);
  overflow-wrap: break-word;
}

.hero-text { font-size: var(--text-hero); line-height: 1.21; }
h1, .h1 { font-size: var(--text-h1); line-height: 1.17; }
h2, .h2 { font-size: var(--text-h2); line-height: 1.21; }
h3, .h3 { font-size: var(--text-h3); line-height: 1.28; }
h4, .h4 { font-size: var(--text-h4); line-height: 1.25; }
h5, .h5 { font-size: var(--text-h5); font-weight: 700; line-height: 1.33; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.body-large { font-size: var(--text-body-lg); line-height: 1.64; letter-spacing: 0; }
.meta-text { font-size: var(--text-meta); color: var(--ink-muted); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter-sm);
}
.container.wide { max-width: var(--container-wide); }
.container.narrow { max-width: var(--container-narrow); }

section { padding: var(--section) 0; }        /* source: section { padding: 64px 0 } */

.bg-grey { background: var(--grey-lt); }
.bg-white { background: var(--paper); }

/* Section roots, named after the source theme's own block vocabulary so a
   pattern lifted out of this kit keeps the name it carries on the live site.
   Each establishes the positioning context its pattern's absolutely-placed
   children rely on (date chips, decoration labels, edge fades, modals). */
.accordion,
.blog-posts,
.form,
.gallery-grid,
.gallery-slider,
.image-cards,
.location-cards,
.logo-image-card-slider,
.single-post,
.step-cards,
.testimonial-slider { position: relative; }

.on-dark {
  background: var(--ground-dark);
  color: var(--on-dark);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5,
.on-dark .h1, .on-dark .h2, .on-dark .h3, .on-dark .h4, .on-dark .hero-text { color: var(--on-dark); }
.on-dark p { color: var(--on-dark-soft); }

/* Light-ground components sitting inside a dark section must reassert their
   own ink at higher specificity. Register every new one HERE as it is written:
   .on-dark p (0,2,1) beats a bare component rule and turns pale cards grey. */
.on-dark .card p,
.on-dark .icon-card p,
.on-dark .step-card p,
.on-dark .review-card p,
.on-dark .loc-card p,
.on-dark .faq-item p,
.on-dark .tab-panel p { color: var(--ink-soft); }
.on-dark .card h3, .on-dark .icon-card h3, .on-dark .step-card h3,
.on-dark .loc-card h3, .on-dark .faq-item h3 { color: var(--ink); }

/* ==========================================================================
   PRE-TITLE — the source's structural label above nearly every heading.
   Extracted verbatim treatment (uppercase 18px/700, tracking .1em, 30px rule
   via ::before). Named .pre-title after the source's own class, never
   eyebrow/kicker. Documented as the carve-out in brand-spec.md.
   ========================================================================== */

.pre-title {
  display: block;
  margin: 0 0 14px;
  font-size: var(--text-h5);
  font-weight: 700;
  line-height: 1.33;
  letter-spacing: var(--track-heading);
  text-transform: uppercase;
  color: var(--accent);
}
.pre-title--line { font-size: 1rem; display: flex; align-items: center; gap: 12px; }
.pre-title--line::before {
  content: "";
  width: 30px;
  height: var(--graphic-stroke-width);
  background: currentColor;
  flex: none;
}
.section__titles { text-align: center; }
.section__titles .pre-title--line { justify-content: center; }
.on-dark .pre-title { color: var(--accent-on-dark); }

.section-head { margin-bottom: clamp(28px, 3vw, 48px); }
.section-head.center { text-align: center; }
.section-head.center .pre-title--line { justify-content: center; }
.section-head p { color: var(--ink-soft); max-width: 62ch; }
.section-head.center p { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   BUTTONS — extracted: 5px radius, Montserrat 700 16px uppercase, tracking
   .1em. Three grounds (slate, white, oxblood) plus two link forms. Hover
   behaviour transcribed from the source's live selectors, not invented.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 32px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--track-btn);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.btn--slate { background: var(--slate); color: var(--paper); border-color: var(--slate); }
.btn--slate:hover { background: var(--paper); color: var(--slate-deep); border-color: var(--slate); }

.btn--red { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.btn--red:hover { background: var(--paper); color: var(--accent); border-color: var(--accent); }

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

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

.btn--link {
  padding: 10px 0;
  background: none;
  border: none;
  color: var(--accent);
}
.btn--link:hover { color: var(--accent-deep); text-decoration: underline; }

.btn--red-link {
  padding: 10px 0;
  background: none;
  border: none;
  color: var(--accent);
}
.btn--red-link:hover { transform: translateX(5px); }   /* extracted verbatim */

.btn--sm { padding: 11px 22px; font-size: .875rem; }

/* An outline control on ANY dark ground, not just .on-dark: a hero or CTA
   card that paints --ink on itself gets no class, and an inherited ink
   colour then renders ink-on-ink at 1.00:1. */
.on-dark .btn--outline,
.hero .btn--outline,
.cta-band .btn--outline,
.internal-hero .btn--outline { color: var(--paper); border-color: var(--paper); }
.on-dark .btn--outline:hover,
.hero .btn--outline:hover,
.cta-band .btn--outline:hover,
.internal-hero .btn--outline:hover { background: var(--paper); color: var(--ink); }
.on-dark .btn--link, .hero .btn--link, .cta-band .btn--link { color: var(--accent-on-dark); }
.on-dark .btn--link:hover, .cta-band .btn--link:hover { color: var(--paper); }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.btn-row.center { justify-content: center; }

/* ==========================================================================
   BRAND NAV — two tiers, transcribed from the source's own header.
   Tier 1 (.nav, white) carries the logo and the secondary links; on the live
   site it collapses to max-height 0 on scroll. Tier 2 (.primary-menu) is a
   full-width OXBLOOD bar holding the primary service navigation, and it is the
   single largest painted use of the accent anywhere in the system.
   ========================================================================== */

.nav {
  position: relative;
  z-index: 20;
  background: var(--paper);
}
.nav > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.nav .brand-mark { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav .brand-mark img { height: 62px; width: auto; }
.nav .nav-links { display: flex; gap: 40px; list-style: none; margin: 0; padding: 0; }
.nav .nav-links a {
  color: var(--ink);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.nav .nav-links a:hover { color: var(--accent); }
.nav .actions { display: flex; align-items: center; gap: 16px; }
.nav .actions .tel {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .04em;
  white-space: nowrap;
}
.nav .actions .tel:hover { color: var(--accent); }

.primary-menu {
  position: relative;
  z-index: 19;
  background: var(--accent);
}
.primary-menu > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.primary-menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 64px);
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  justify-content: space-between;
}
.primary-menu a {
  color: var(--paper);
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: var(--track-heading);
  text-transform: uppercase;
  white-space: nowrap;
}
.primary-menu a:hover { color: var(--accent-on-dark); }

/* ==========================================================================
   HERO — home. Photo ground with the extracted rgba(0,0,0,.7) scrim.
   The container declares a solid dark background-color floor so the contrast
   walker resolves a real ground and a slow image never leaves text unpainted.
   ========================================================================== */

/* The source builds this ground in THREE layers, not one scrim, and the
   difference is the whole look: a flat black wash at 10%, then a black
   gradient over the bottom half at 85%, so the photograph stays bright at the
   top and the bottom-anchored copy still lands on near-black. A single flat
   .7 scrim reads as a different, much darker brand. */
.hero {
  position: relative;
  min-height: 75vh;
  background-color: var(--ground-dark);
  background-size: cover;
  background-position: center;
  color: var(--on-dark);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 56px;
}
.hero::before {                       /* flat wash, extracted at opacity .1 */
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: .1;
}
.hero::after {                        /* bottom-half gradient, extracted at .85 */
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%);
  opacity: .85;
}
.hero > * { position: relative; z-index: 2; }

/* The trust strip is INSIDE the hero, on the slate ground, with the source's
   own tight box-shadow. It is not an announcement bar and not part of the nav. */
.hero-banner {
  background: var(--slate);
  padding: 15px 20px;
  text-align: center;
  box-shadow: var(--shadow-float);
}
.hero-banner h2 {
  margin: 0;
  font-size: clamp(.875rem, 1.4vw, 1.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--track-heading);
  color: var(--paper);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: center;
  align-items: center;
}
/* The pipes inherit the banner's white. Dimming them was an invention: the
   source sets no colour on span.home-hero__banner__pipe, and a differently
   coloured node inside a heading is the accent device this system forbids.
   The source drops them below 992px and stacks the three claims instead. */
.hero-banner .pipe { display: inline; }
@media (max-width: 992px) {
  .hero-banner .pipe { display: none; }
  .hero-banner h2 { flex-direction: column; gap: 10px; }
}

.hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  color: var(--on-dark);
  padding: 64px 0 15px;
}
.hero .hero-text { color: var(--on-dark); }
.hero .hero-sub {
  font-size: clamp(1.125rem, 2vw + .5rem, 2.25rem);
  font-weight: 800;
  letter-spacing: var(--track-heading);
  text-transform: uppercase;
  color: var(--on-dark);
  margin: 0;
}

/* Vertical hairline descender, centred on the bottom edge. */
.hero-descender {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5px;
  height: 40px;
  background: var(--paper);
  z-index: 3;
}

/* Internal hero — 75 of 81 pages open with this. Overlay is .45 here, with
   the same bottom-half gradient, and the content is bottom-aligned and centred
   exactly as the home hero is. */
.internal-hero {
  position: relative;
  min-height: 52vh;
  background-color: var(--ground-dark);
  background-size: cover;
  background-position: center;
  color: var(--on-dark);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.internal-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: .45;
}
.internal-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  background-color: transparent;
  background-image: linear-gradient(0deg, rgba(0,0,0,.53), transparent);
}
.internal-hero > .container {
  position: relative;
  z-index: 2;
  padding-top: clamp(64px, 8vw, 120px);
  padding-bottom: 25px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  text-align: center;
}
.internal-hero h1 { color: var(--on-dark); max-width: 24ch; }
/* Both heroes centre their content, so the control row has to centre too.
   Without this the buttons wrap to separate lines at 375 and hang left of a
   centred headline, which no DOM gate can see. */
.internal-hero .btn-row,
.hero-content .btn-row { justify-content: center; }
.breadcrumbs {
  font-size: 1.125rem;
  color: var(--on-dark-soft);
  letter-spacing: .04em;
}
.breadcrumbs a { color: var(--on-dark); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* ==========================================================================
   STAMP — the source's brand watermark device (--stamp-opacity: .35)
   ========================================================================== */

.stamp-wrap { position: relative; overflow: hidden; }
.stamp {
  position: absolute;
  right: -40px;
  bottom: -30px;
  width: min(340px, 46%);
  opacity: var(--stamp-opacity);
  pointer-events: none;
  z-index: 0;
}
.stamp-wrap > .container { position: relative; z-index: 1; }

/* Hairline rule graphic */
.hairline {
  height: var(--graphic-stroke-width);
  background: var(--graphic-color);
  border: 0;
  margin: 0;
}

/* ==========================================================================
   CONTENT + IMAGE SLIDER (homepage 02)
   ========================================================================== */

.content-img-slider .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.content-img-slider .grid > * { min-width: 0; }
.content-img-slider .media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--grey-lt);
}
.content-img-slider .media img { width: 100%; height: 100%; object-fit: cover; }
.content-img-slider .media .decoration-label {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--accent);
  color: var(--paper);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: var(--track-heading);
  text-transform: uppercase;
  padding: 10px 20px;
}
.content-img-slider .copy p { color: var(--ink-soft); }
@media (max-width: 880px) {
  .content-img-slider .grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   HORIZONTAL CARDS (homepage 03) — big photo tiles with a copy block
   ========================================================================== */

.horizontal-cards .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.horizontal-cards .cards > * { min-width: 0; }
.h-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--ground-dark);
  min-height: 420px;
  display: flex;
  align-items: flex-end;
}
.h-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.82) 100%);
  background-color: transparent;
}
.h-card .body { position: relative; z-index: 2; padding: clamp(24px, 3vw, 40px); }
.h-card h3 { color: var(--paper); }
.h-card p { color: var(--on-dark-soft); margin: 12px 0 20px; max-width: 46ch; }

/* ==========================================================================
   LOGO SLIDER (homepage 04) — hard-stop gradient edge fade, extracted
   ========================================================================== */

.logo-slider .rail-wrap { position: relative; overflow: hidden; }
.logo-slider .rail-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: transparent;
  background-image: linear-gradient(to right,
    var(--grey-lt) 0%, rgba(242,242,242,0) 8%,
    rgba(242,242,242,0) 92%, var(--grey-lt) 100%);
}
.bg-white .logo-slider .rail-wrap::after,
.logo-slider.bg-white .rail-wrap::after {
  background-image: linear-gradient(to right,
    var(--paper) 0%, rgba(255,255,255,0) 8%,
    rgba(255,255,255,0) 92%, var(--paper) 100%);
}
.logo-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(220px, 60vw);
  gap: clamp(24px, 4vw, 64px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.logo-rail::-webkit-scrollbar { display: none; }
.logo-rail .slot {
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 12px 8px;
  border: var(--graphic-stroke-width) solid var(--graphic-color);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}

/* ==========================================================================
   ICON CARDS (homepage 05)
   ========================================================================== */

.icon-cards .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.icon-cards .cards > * { min-width: 0; }
.icon-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2.6vw, 40px);
}
.icon-card .mark {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 20px;
}
.icon-card h3 { font-size: var(--text-h4); margin-bottom: 12px; }
.icon-card p { color: var(--ink-soft); margin: 0; }

/* ==========================================================================
   TESTIMONIAL SLIDER (homepage 06)
   ========================================================================== */

.review-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(420px, 82vw);
  gap: clamp(20px, 2.4vw, 32px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: none;
}
.review-rail::-webkit-scrollbar { display: none; }
.review-card {
  scroll-snap-align: start;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2.6vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.review-card .quote { color: var(--ink-soft); font-size: var(--text-body-lg); line-height: 1.64; margin: 0; }
.review-card .quote strong { color: var(--ink); font-weight: 700; }
.review-card .name {
  margin-top: auto;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: var(--track-heading);
  text-transform: uppercase;
  color: var(--ink);
}
.stars { color: var(--accent); letter-spacing: 4px; font-size: 1rem; }

/* ==========================================================================
   SPLIT CONTENT (homepage 07) + background-image variant
   ========================================================================== */

.split-content .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.split-content .grid > * { min-width: 0; }
.split-content .media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--grey-lt);
}
.split-content .media img { width: 100%; height: 100%; object-fit: cover; }
.split-content .copy p { color: var(--ink-soft); }
.split-list { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 16px; }
.split-list li {
  padding-left: 42px;
  position: relative;
  color: var(--ink-soft);
}
.split-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 30px;
  height: var(--graphic-stroke-width);
  background: var(--accent);
}
.split-list li strong { color: var(--ink); font-weight: 700; }
@media (max-width: 880px) {
  .split-content .grid { grid-template-columns: 1fr; }
}

.split-bg {
  position: relative;
  background-color: var(--ground-dark);
  background-size: cover;
  background-position: center;
  color: var(--on-dark);
}
.split-bg::before { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.split-bg > .container { position: relative; z-index: 2; }
.split-bg .panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(28px, 3vw, 44px);
}
.split-bg .panel-grid > * { min-width: 0; }
.split-bg .panel {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2.6vw, 36px);
}
.split-bg .panel h3 { color: var(--ink); font-size: var(--text-h4); margin-bottom: 12px; }
.split-bg .panel p { color: var(--ink-soft); margin: 0; }

/* ==========================================================================
   GALLERY — slider (homepage 08) and grid
   ========================================================================== */

.gallery-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(524px, 82vw);
  gap: clamp(16px, 2vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: none;
}
.gallery-rail::-webkit-scrollbar { display: none; }
.gallery-rail figure { margin: 0; scroll-snap-align: start; }
.gallery-rail img,
.gallery-grid-wrap img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 524 / 360;          /* extracted */
  object-fit: cover;
  background: var(--grey-lt);
}
.gallery-grid-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.gallery-grid-wrap > * { min-width: 0; }
.gallery-grid-wrap figure { margin: 0; }
.gallery-grid-wrap img { aspect-ratio: 524 / 384; }   /* extracted */

/* ==========================================================================
   ACCORDION / FAQ (homepage 09)
   ========================================================================== */

.faq-list { display: grid; gap: 14px; max-width: 980px; margin: 0 auto; }
.faq-item {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.2vw, 30px);
}
/* The chevron is a control affordance, not heading content, so it sits as a
   SIBLING of the h3 rather than inside it. Keeping it inside would put an
   oxblood-coloured node in a heading, which is the accent device this system
   forbids, and the source draws it as an icon beside the question anyway. */
.faq-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}
.faq-item h3 { font-size: var(--text-h4); }
.faq-item .chev {
  color: var(--accent);
  flex: none;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.25;
}
.faq-item p { color: var(--ink-soft); margin: 14px 0 0; }

/* ==========================================================================
   CTA BAND (homepage 10)
   ========================================================================== */

.cta-band {
  position: relative;
  background-color: var(--ground-dark);
  background-size: cover;
  background-position: center;
  color: var(--on-dark);
  text-align: center;
}
.cta-band::before { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.cta-band > .container { position: relative; z-index: 2; }
.cta-band h2 { color: var(--on-dark); }
.cta-band .btn-row { margin-top: 32px; justify-content: center; }

/* ==========================================================================
   STEP CARDS
   ========================================================================== */

.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.step-grid > * { min-width: 0; }
.step-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2.6vw, 40px);
}
.step-card .step-number {
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 16px;
}
.step-card h3 { font-size: 1.875rem; margin-bottom: 12px; }
.step-card p { color: var(--ink-soft); margin: 0; }

/* ==========================================================================
   LOGO IMAGE CARD SLIDER — brand tiles, extracted aspect-ratio 1/1 and the
   dark hard-stop gradient over the image.
   ========================================================================== */

.brand-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(320px, 74vw);
  gap: clamp(16px, 2vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: none;
}
.brand-rail::-webkit-scrollbar { display: none; }
.brand-tile {
  position: relative;
  scroll-snap-align: start;
  aspect-ratio: 1 / 1;                 /* extracted */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--ground-dark);
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  transition: padding-bottom .25s ease;
}
.brand-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.brand-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}
.brand-tile .body { position: relative; z-index: 2; padding: 24px; }
.brand-tile .body h3 { color: var(--paper); font-size: var(--text-h4); }
.brand-tile .body span { color: var(--accent-on-dark); font-weight: 700; letter-spacing: var(--track-heading); text-transform: uppercase; font-size: .8125rem; }
.brand-tile:hover { padding-bottom: 10px; }     /* extracted hover */

/* ==========================================================================
   IMAGE CARDS — product style grid
   ========================================================================== */

.image-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.image-card-grid > * { min-width: 0; }
.image-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.image-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--grey-lt); }
.image-card .body { padding: clamp(20px, 2.2vw, 28px); }
.image-card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.image-card p { color: var(--ink-soft); margin: 0; font-size: .9375rem; }

/* ==========================================================================
   OVERLAP IMAGE + TEXT
   ========================================================================== */

.overlap .grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.overlap .grid > * { min-width: 0; }
.overlap .media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--grey-lt);
}
.overlap .media img { width: 100%; height: 100%; object-fit: cover; }
.overlap .claims { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.overlap .claims li {
  border-top: var(--graphic-stroke-width) solid var(--graphic-color);
  padding-top: 14px;
  font-size: var(--text-h5);
  font-weight: 700;
  letter-spacing: var(--track-heading);
  text-transform: uppercase;
  color: var(--ink);
}
@media (max-width: 880px) {
  .overlap .grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   LOCATION CARDS
   ========================================================================== */

.loc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.loc-grid > * { min-width: 0; }
.loc-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.loc-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--grey-lt); }
.loc-card .body { padding: clamp(20px, 2.2vw, 30px); display: flex; flex-direction: column; gap: 14px; flex: 1; }
.loc-card h3 { font-size: var(--text-h4); }
.loc-card .btn-row { margin-top: auto; }

/* ==========================================================================
   SIDE TABS
   ========================================================================== */

.side-tabs .grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.side-tabs .grid > * { min-width: 0; }
.tab-list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.tab-list button {
  width: 100%;
  text-align: left;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: var(--text-h5);
  font-weight: 700;
  letter-spacing: var(--track-heading);
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.tab-list button[aria-selected="true"] { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.tab-list button:hover { border-color: var(--accent); }
.tab-panel {
  background: var(--grey-lt);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 44px);
}
.tab-panel h3 { font-size: var(--text-h4); margin-bottom: 14px; }
.tab-panel p { color: var(--ink-soft); margin: 0; }
@media (max-width: 880px) {
  .side-tabs .grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BASIC CONTENT (legal / long form)
   ========================================================================== */

.basic-content { max-width: var(--container-narrow); margin: 0 auto; }
.basic-content h2 { font-size: var(--text-h3); margin: 40px 0 16px; }
.basic-content h3 { font-size: var(--text-h4); margin: 28px 0 12px; }
.basic-content p, .basic-content li { color: var(--ink-soft); }
.basic-content ul { padding-left: 22px; display: grid; gap: 8px; }

/* ==========================================================================
   BLOG — index cards and the single-post template
   ========================================================================== */

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.post-grid > * { min-width: 0; }
.post-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.post-card .thumb { position: relative; }
.post-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--grey-lt); }
.post-card .date {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: var(--accent);
  color: var(--paper);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  text-align: center;
  line-height: 1.1;
}
.post-card .date strong { display: block; font-size: 1.375rem; font-weight: 800; }
.post-card .date span { font-size: .75rem; font-weight: 700; letter-spacing: var(--track-heading); text-transform: uppercase; }
.post-card .body { padding: clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.post-card h3 { font-size: 1.25rem; }
.post-card p { color: var(--ink-soft); font-size: .9375rem; margin: 0; }
.post-card .btn-row { margin-top: auto; }

.post-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start;
}
.post-layout > * { min-width: 0; }
.post-toc {
  background: var(--grey-lt);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.2vw, 28px);
  position: sticky;
  top: 24px;
}
.post-toc h2 { font-size: 1.625rem; font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1; margin-bottom: 14px; }
.post-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.post-toc a { font-size: 1.25rem; color: var(--ink-soft); text-decoration: none; }
.post-toc a:hover { color: var(--accent); }
.post-body h2 { font-size: var(--text-h3); margin: 36px 0 14px; }
.post-body p { color: var(--ink-soft); }
.post-pagination {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-top: var(--graphic-stroke-width) solid var(--graphic-color);
  margin-top: 44px;
  padding-top: 24px;
}
.post-pagination a { font-size: 1.125rem; color: var(--accent); text-decoration: none; font-weight: 700; }
.post-pagination a:hover { text-decoration: underline; }
@media (max-width: 880px) {
  .post-layout { grid-template-columns: 1fr; }
  .post-toc { position: static; }
}

/* ==========================================================================
   FORM
   ========================================================================== */

.form-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 48px);
  max-width: 840px;
  margin: 0 auto;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-grid > * { min-width: 0; }
.field { display: grid; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: var(--track-heading);
  text-transform: uppercase;
  color: var(--ink);
}
.field .req { color: var(--accent); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 150px;
  padding: 14px 16px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.radio-row { display: flex; gap: 24px; flex-wrap: wrap; }
.radio-row label { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: .04em; font-weight: 600; }
.form-note { font-size: var(--text-meta); color: var(--ink-muted); margin-bottom: 20px; }
@media (max-width: 880px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  background: var(--ground-darker);
  color: var(--on-dark);
  padding: clamp(48px, 5vw, 80px) 0 32px;
}
.site-footer .cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(28px, 3vw, 48px);
}
.site-footer .cols > * { min-width: 0; }
.site-footer img.mark { height: 68px; width: auto; margin-bottom: 20px; }
.site-footer h4 { font-size: var(--text-h5); margin-bottom: 16px; color: var(--on-dark); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: var(--on-dark-soft); text-decoration: none; }
.site-footer a:hover { color: var(--paper); text-decoration: underline; }
.site-footer address { font-style: normal; color: var(--on-dark-soft); }
.site-footer .tel { color: var(--paper); font-weight: 700; font-size: var(--text-h5); text-decoration: none; }
.site-footer .legal {
  border-top: var(--graphic-stroke-width) solid rgba(255, 255, 255, .18);
  margin-top: clamp(32px, 3vw, 48px);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  font-size: var(--text-meta);
  color: var(--on-dark-quiet);
}
.site-footer .legal a { color: var(--on-dark-quiet); }

/* ==========================================================================
   DS CHROME — ds-nav, sx catalog, doc pages
   ========================================================================== */

.ds-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 3vw, 40px);
}
.ds-nav .lockup-text {
  margin: 0;
  font-weight: 800;
  letter-spacing: var(--track-heading);
  text-transform: uppercase;
  font-size: 1rem;
  color: var(--ink);
}
.ds-nav .lockup-text small {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-muted);
  text-transform: none;
}
.ds-nav .tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-nav .tab {
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
}
.ds-nav .tab:hover { background: var(--grey-lt); color: var(--ink); }
.ds-nav .tab.active { background: var(--ink); color: var(--paper); }

.sx-header { background: var(--grey-lt); padding: clamp(44px, 5vw, 84px) 0; }
.sx-header .display { font-size: var(--text-h1); max-width: 22ch; }
.sx-header .lede { margin-top: 20px; max-width: 78ch; color: var(--ink-soft); font-size: var(--text-body-lg); }
.sx-header .meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 20px;
  margin-top: 36px;
  border-top: var(--graphic-stroke-width) solid var(--graphic-color);
  padding-top: 24px;
}
.sx-header .meta > * { min-width: 0; }
.sx-header .meta > div {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.sx-header .meta strong {
  display: block;
  margin-top: 6px;
  font-size: .9375rem;
  letter-spacing: .02em;
  color: var(--ink);
  text-transform: none;
}

.sx-index { background: var(--paper); border-bottom: 1px solid var(--border); padding: 28px clamp(16px, 3vw, 40px); }
.sx-index .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 8px;
}
.sx-index .grid > * { min-width: 0; }
.sx-index a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 600;
}
.sx-index a:hover { border-color: var(--accent); color: var(--accent); }
.sx-index .num { color: var(--ink-quiet); font-variant-numeric: tabular-nums; }

.sx-pattern { padding: clamp(32px, 3.4vw, 56px) clamp(16px, 3vw, 40px); border-bottom: 1px solid var(--border); }
.pattern-meta {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  margin-bottom: 24px;
  align-items: start;
}
.pattern-meta > * { min-width: 0; }
.pattern-meta .id {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.pattern-meta .num { color: var(--ink-quiet); font-variant-numeric: tabular-nums; }
.pattern-meta .signature {
  background: var(--accent);
  color: var(--paper);
  border-radius: var(--radius-sm);
  padding: 4px 9px;
  font-size: .625rem;
  letter-spacing: .1em;
}
.pattern-meta .name { margin: 0; font-weight: 700; color: var(--ink); }
.pattern-meta .purpose { margin: 6px 0 0; color: var(--ink-soft); font-size: .9375rem; max-width: 74ch; }
.sx-demo { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.sx-demo .demo-label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  background: var(--ink);
  color: var(--paper);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-bottom-right-radius: var(--radius-sm);
}
@media (max-width: 880px) {
  .pattern-meta { grid-template-columns: 1fr; }
}

/* The catalog nests .sx-pattern > .sx-demo > .container, so a phone renders
   each demo inside three padding layers and manufactures overflow that exists
   nowhere else. Zero the outer two under 600px, give it back to the meta. */
@media (max-width: 600px) {
  body .sx-pattern { padding-left: 0; padding-right: 0; }
  body .sx-demo { border-left: 0; border-right: 0; border-radius: 0; }
  body .pattern-meta { padding: 0 16px; }
  body .sx-index { padding-left: 16px; padding-right: 16px; }
}

/* Doc pages — index / design-system / pages */
.doc-hero { background: var(--grey-lt); padding: clamp(44px, 5vw, 84px) 0; }
.doc-hero h1 { max-width: 20ch; }
.doc-hero .lede { margin-top: 18px; max-width: 74ch; color: var(--ink-soft); font-size: var(--text-body-lg); }
.doc-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 20px;
  margin-top: 34px;
  border-top: var(--graphic-stroke-width) solid var(--graphic-color);
  padding-top: 24px;
}
.doc-meta > * { min-width: 0; }
.doc-meta > div { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.doc-meta strong { display: block; margin-top: 6px; font-size: .9375rem; letter-spacing: .02em; color: var(--ink); text-transform: none; }

.door-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.door-grid > * { min-width: 0; }
.door {
  display: block;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
}
.door:hover { border-color: var(--accent); }
.door h3 { font-size: var(--text-h4); margin-bottom: 10px; }
.door p { color: var(--ink-soft); font-size: .9375rem; margin: 0; }

.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); border-radius: var(--radius-lg); overflow: hidden; }
.swatch .chip { height: 96px; }
.swatch .info { padding: 14px 16px; font-size: .8125rem; }
.swatch .info strong { display: block; color: var(--ink); }
.swatch .info code { color: var(--ink-muted); font-size: .75rem; }

.spec-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.spec-table th, .spec-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.spec-table th { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.table-scroll { overflow-x: auto; }

.page-card { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); }
.page-card .frame { height: 420px; background: var(--grey-lt); }
.page-card iframe { width: 100%; height: 100%; border: 0; }
.page-card .body { padding: 18px 20px; display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; }
.page-card h3 { font-size: 1.125rem; }
.page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.page-grid > * { min-width: 0; }

.kit-note { color: var(--ink-muted); font-size: .8125rem; font-style: italic; }

/* ==========================================================================
   RESPONSIVE — nav actions hide at burger width. The shared mobile-nav.js
   clones .nav-links only, so this kit opts into the sticky call bar to keep
   the tap-to-call alive on a phone.
   ========================================================================== */

:root { --ds-callbar: 1; }

/* The oxblood bar is desktop-only, exactly as on the source, which folds the
   service nav into its burger below 992px. The shared mobile-nav.js clones
   `.nav .nav-links` and nothing else, so the five service items are carried
   there as well and hidden on desktop, where the oxblood bar already shows
   them. Without that the burger would open onto the utility links alone and
   the site's primary navigation would simply be gone on a phone. */
.nav .nav-links .nav-primary-item { display: none; }

@media (max-width: 992px) {
  .primary-menu { display: none; }
  .nav .nav-links .nav-primary-item { display: block; }
  .nav .actions { display: none; }
  .nav .nav-links { display: none; }
}