/* ==========================================================================
   PLUMBER NOVA — shared design tokens + components
   Extracted from bearsplumbing.net (captured 2026-07-25, live DOM + raw source
   + Elementor global kit post-7.css).
   Heavy condensed uppercase on white, near-black bands, one hot red.
   Signature devices: double-rule borders and shape dividers between bands.
   Faces render as-is: Roboto Condensed and Anton are both free Google fonts,
   so no substitution and no metric re-tuning (see brand-spec.md).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700;800&family=Anton&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  /* COLOR — brand. Both reds extracted or derived from the extracted red.
     --accent is the large-area ground (form card, icon tiles, bands).
     --accent-deep is the TEXT-SAFE red: any small white label sitting on red
     uses it, because white on --accent is 3.88:1 and fails AA. The source
     ships the failing combination; we keep the colour and fix the craft. */
  --accent: #ef3e33;           /* extracted — Elementor --e-global-color-primary */
  --accent-deep: #c22c23;      /* derived — text-safe red, white on it is 5.71:1 */
  --accent-soft: rgba(239, 62, 51, .26);
  --accent-pale: #fdecea;

  /* COLOR — ink */
  --ink-deep: #171415;         /* derived — deepest band, footer ground */
  --ink: #231f20;              /* extracted — body ink, dark bands, 824 rendered */
  --ink-soft: rgba(35, 31, 32, .74);
  --ink-muted: rgba(35, 31, 32, .58);
  --ink-quiet: rgba(35, 31, 32, .40);   /* doc chrome only, never body copy */

  /* COLOR — grounds */
  --bg: #ffffff;
  --bg-pure: #ffffff;
  --bg-warm: #f2f2f2;          /* derived — softer step above --surface */
  --bg-soft: #f8f8f8;
  --surface: #e3e3e3;          /* extracted — card pads, divider fill */
  --steel: #a7a9ac;            /* extracted — frame rule, legal bar, button hover */
  --bg-dark: #231f20;
  --bg-deepest: #171415;

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

  /* COLOR — rules */
  --border: #dcdcdc;
  --border-mid: #a7a9ac;

  /* TYPE — both faces render on the source; nothing substituted */
  --font-display: 'Roboto Condensed', 'Helvetica Neue Condensed', Arial, sans-serif;
  --font-body: 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
  --font-label: 'Anton', 'Roboto Condensed', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* TYPE — fluid scale. Source ramp is 55/40/26/22 desktop stepping to
     33/28/23/18 mobile; the clamps below land on those endpoints. */
  --text-display: clamp(2.06rem, 3.6vw + 1.1rem, 3.44rem);   /* 33 → 55 */
  --text-h1: clamp(2.06rem, 3.6vw + 1.1rem, 3.44rem);
  --text-h2: clamp(1.75rem, 1.6vw + 1.2rem, 2.5rem);         /* 28 → 40 */
  --text-h3: clamp(1.44rem, .4vw + 1.3rem, 1.63rem);         /* 23 → 26 */
  --text-h4: clamp(1.13rem, .4vw + 1rem, 1.38rem);           /* 18 → 22 */
  --text-body-lg: 1.125rem;
  --text-body: 1.0625rem;                                     /* 17px, extracted */
  --text-meta: .875rem;

  /* LAYOUT */
  --container: 1240px;
  --container-narrow: 860px;
  --gutter: 32px;
  --section: 96px;
  --frame-inset: 50px;         /* extracted — the hero's gutter each side */

  /* RADII — extracted census: 3 inputs, 7 buttons, 8 media, 10 panels */
  --radius-sm: 3px;
  --radius: 7px;
  --radius-media: 8px;
  --radius-lg: 10px;

  /* SHADOW — the source paints exactly one box-shadow site-wide. Elevation is
     not part of this system; surfaces separate with rules, grounds, dividers. */
  --shadow-card: 0 2px 5px rgba(0, 0, 0, .10);
  --shadow-none: none;

  /* SIGNATURE — double-rule borders */
  --rule-double-btn: 3px double #ffffff;
  --rule-double-frame: 7px double var(--steel);

  /* MOTION — extracted: .3s on every interactive element, no transform lift */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: 150ms;
  --t-base: 300ms;
}

/* ==== base ============================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-deep); }

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

h1, h2, h3, h4 {
  font-family: var(--font-display); color: var(--ink);
  font-weight: 800; text-transform: uppercase; line-height: 1.2;
  margin: 0 0 .5em; letter-spacing: 0;
}
.display { font-size: var(--text-display); text-wrap: balance; }
h1, .h1 { font-size: var(--text-h1); }
h2, .h2 { font-size: var(--text-h2); }
h3, .h3 { font-size: var(--text-h3); }
h4, .h4 { font-size: var(--text-h4); }

.lede { font-size: var(--text-body-lg); color: var(--ink-soft); max-width: 64ch; margin: 0 0 1.2em; }
p { max-width: 70ch; }

.mt-md { margin-top: 1rem; }
.mt-48 { margin-top: 48px; }

/* ==== buttons ===========================================================
   Extracted: 16px/700 uppercase, 16px 32px pad, radius 7px, and the
   3px double white rule that is this system's defining device. Hover moves
   red to steel with ink text, which is the source's own rule and not the
   usual darken. Fill is --accent-deep so the 16px label clears AA. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .01em;
  padding: 16px 32px; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; border: var(--rule-double-btn);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}
.btn-primary { background: var(--accent-deep); color: #fff; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--steel); color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover, .btn-dark:focus-visible { background: var(--steel); color: var(--ink); }
.btn-outline { background: transparent; color: var(--ink); border: 3px double var(--ink); }
.btn-outline:hover, .btn-outline:focus-visible { background: var(--ink); color: #fff; }
.btn-outline.on-dark { color: #fff; border-color: #fff; }
.btn-outline.on-dark:hover, .btn-outline.on-dark:focus-visible { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn-sm { padding: 11px 22px; font-size: .9375rem; }
.btn:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ==== shape dividers ====================================================
   SIGNATURE. The source separates nearly every band with an Elementor shape
   divider: one 450px "curve" under the hero, six 50px "mountains" below the
   bands that follow. Reproduced faithfully as inline SVG per Jarrett,
   2026-07-25. Set fill on the svg to the colour of the band BELOW. */
.divider { display: block; width: 100%; line-height: 0; }
.divider svg { display: block; width: 100%; height: 100%; }
.divider-mountains { height: 50px; }
.divider-curve { height: clamp(90px, 12vw, 170px); }

/* ==== announcement + nav =============================================== */
.announcement-bar {
  background: var(--bg-pure); color: var(--ink);
  border-bottom: 1px solid var(--border);
  font-size: .875rem; padding: 10px var(--gutter);
}
.announcement-bar .container { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; }
.announcement-bar .item { display: flex; align-items: center; gap: 8px; }
.announcement-bar .item::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-deep); flex: none; }

.nav { background: var(--bg-pure); position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--border); }
.nav > .container { display: flex; align-items: center; gap: 32px; min-height: 92px; }
.nav .brand-mark { display: flex; align-items: center; flex-shrink: 0; }
.nav .brand-mark img { height: 58px; width: auto; }
.nav .links { display: flex; gap: 24px; margin-right: auto; }
.nav .links a {
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1rem;
  text-transform: uppercase; transition: color var(--t-base) var(--ease);
}
.nav .links a:hover { color: var(--accent-deep); }
.nav .actions { display: flex; gap: 12px; flex-shrink: 0; }

/* ==== sections ========================================================== */
.section { padding: var(--section) 0; }
.section.tight { padding: 64px 0; }
.section.bg-soft { background: var(--bg-soft); }
.section.bg-warm { background: var(--bg-warm); }
.section.bg-surface { background: var(--surface); }
.section.on-dark { background: var(--bg-dark); }
.section.on-dark h1, .section.on-dark h2, .section.on-dark h3, .section.on-dark h4 { color: #fff; }
.section.on-dark .lede, .section.on-dark p { color: var(--text-on-dark-muted); }
.section.on-deepest { background: var(--bg-deepest); }
.section.on-deepest h1, .section.on-deepest h2, .section.on-deepest h3 { color: #fff; }
.section.on-deepest p, .section.on-deepest .lede { color: var(--text-on-dark-muted); }

/* Light-ground components that sit INSIDE a dark section must reassert their
   own ink at higher specificity, or `.section.on-dark p` (0,2,1) reaches in
   and paints their body copy white on a light card. Register every new
   light-ground component here as you write it. */
.section.on-dark .review-card p,
.section.on-dark .review-card cite,
.section.on-dark .service-card p,
.section.on-dark .offer-card p,
.section.on-dark .plan-tile p,
.section.on-dark .plan-tile li { color: var(--ink-soft); }
.section.on-dark .review-card h3,
.section.on-dark .service-card h3,
.section.on-dark .offer-card h3,
.section.on-dark .plan-tile h3 { color: var(--ink); }
/* Dark-ground components: link lists paint their own ink and must be lifted,
   or they render dark-on-dark. Register new ones here as you write them. */
.section.on-dark .link-columns a,
.section.on-dark .area-grid a { color: var(--text-on-dark-muted); }
.section.on-dark .link-columns a:hover,
.section.on-dark .area-grid a:hover { color: #fff; }

/* ==== framed hero =======================================================
   SIGNATURE. The source insets the hero photo 50px on each side and rules it
   with a 7px double steel border at radius 10 — a panel floating on white,
   not a full-bleed band. --ink base under the photo so text stays legible
   before the image lands and so the contrast walker resolves a real ground. */
.hero-frame { background: var(--bg-pure); padding: 0 var(--frame-inset); }
.hero-frame .panel {
  position: relative; min-height: 630px; display: flex; align-items: center;
  border: var(--rule-double-frame); border-radius: var(--radius-lg);
  background-color: var(--ink); overflow: hidden;
}
.hero-frame .panel > .bg-image-abs {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.hero-frame .panel::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(23,20,21,.88) 0%, rgba(23,20,21,.62) 46%, rgba(23,20,21,.18) 100%);
}
.hero-frame .panel .container { position: relative; z-index: 2; padding: 72px var(--gutter); }
.hero-frame h1 { color: #fff; max-width: 15ch; }
.hero-frame .lede { color: rgba(255,255,255,.90); max-width: 42ch; }
.hero-frame .rating-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.hero-frame .rating {
  display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.96);
  border-radius: var(--radius); padding: 8px 14px; font-size: .8125rem;
  font-weight: 700; color: var(--ink); text-transform: uppercase;
}
.hero-frame .rating .stars { color: var(--accent-deep); letter-spacing: 1px; }

/* inner-page banner — same frame, shorter */
.page-banner .panel { min-height: 340px; }
.page-banner h1 { max-width: 20ch; }

/* ==== trust strip =======================================================
   Extracted two-tier lockup: red icon tile, condensed uppercase word, Anton
   subline. Anton is kept because it is what makes the two tiers read. */
.trust-strip { background: var(--bg-pure); padding: 40px 0; }
.trust-strip .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 28px; }
.trust-strip .item { display: flex; align-items: center; gap: 16px; min-width: 0; }
.trust-strip .tile {
  width: 54px; height: 54px; flex: none; border-radius: var(--radius);
  background: var(--accent-deep); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.trust-strip .tile svg { width: 26px; height: 26px; }
.trust-strip .item > span:last-child { display: block; min-width: 0; }
.trust-strip .word { display: block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; line-height: 1.1; color: var(--ink); }
.trust-strip .sub { display: block; font-family: var(--font-label); font-size: 1rem; color: var(--ink-muted); line-height: 1.2; }

/* ==== cards ============================================================= */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.card-grid > * { min-width: 0; }

/* Full-width band sections centre their heading and their action row on the
   source. Split layouts stay left-aligned. */
.band-center > .container > h2,
.band-center > .container > .lede { text-align: center; margin-left: auto; margin-right: auto; }
.band-center > .container > .btn-row { justify-content: center; }

.service-card { background: var(--bg-pure); border: 1px solid var(--border); border-radius: var(--radius-media); display: flex; flex-direction: column; overflow: hidden; }
.service-card .media { aspect-ratio: 16/11; overflow: hidden; }
.service-card .media img { width: 100%; height: 100%; object-fit: cover; }
.service-card .body { background: var(--surface); padding: 35px; display: flex; flex-direction: column; gap: 10px; flex: 1; text-align: center; }
.service-card .body h3 { margin: 0; }
.service-card .body p { margin: 0 auto; color: var(--ink-soft); font-size: 1rem; }
.service-card .body .btn { margin-top: auto; align-self: center; }

.offer-card { background: var(--bg-pure); border: 1px solid var(--steel); border-radius: var(--radius-media); overflow: hidden; display: flex; flex-direction: column; text-align: center; }
.offer-card .media { aspect-ratio: 16/11; overflow: hidden; background: var(--surface); }
.offer-card .media img { width: 100%; height: 100%; object-fit: cover; }
.offer-card .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.offer-card .body h3 { margin: 0; }
.offer-card .body p { margin: 0 auto; font-size: .9375rem; color: var(--ink-soft); }
.offer-card .amount { font-family: var(--font-display); font-weight: 800; font-size: 2.25rem; line-height: 1; color: var(--accent-deep); }

/* review card — red header block, quote beneath. Header uses --accent-deep
   because the reviewer name is small white text on red. */
.review-card { background: var(--bg-pure); border: 1px solid var(--border); display: flex; flex-direction: column; height: 100%; }
.review-card .head { background: var(--accent-deep); color: #fff; padding: 22px 26px 18px; }
.review-card .head .rname { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.25rem; line-height: 1.2; }
.review-card .head .stars { letter-spacing: 3px; font-size: 1rem; margin-top: 4px; }
.review-card .body { padding: 24px 26px 28px; flex: 1; }
.review-card p { margin: 0; color: var(--ink-soft); font-size: 1rem; }

.plan-tile { background: var(--bg-pure); border: 1px solid var(--border); padding: 32px 30px; display: flex; flex-direction: column; }
.plan-tile h3 { margin: 0 0 10px; }
.plan-tile .price { font-family: var(--font-display); font-weight: 800; font-size: 2.75rem; line-height: 1; color: var(--accent-deep); margin-bottom: 14px; }
.plan-tile > p { margin: 0 0 18px; color: var(--ink-soft); font-size: 1rem; }
.plan-tile ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; flex: 1; }
.plan-tile li { font-size: 1rem; color: var(--ink); padding-left: 26px; position: relative; }
.plan-tile li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 2px; background: var(--accent-deep); }

.article-card { display: block; background: var(--bg-pure); border: 1px solid var(--border); padding: 30px 28px; text-decoration: none; color: inherit; }
.article-card h3 { margin: 0 0 10px; font-size: var(--text-h4); }
.article-card p { margin: 0 0 16px; font-size: 1rem; color: var(--ink-soft); }
.article-card .go { font-family: var(--font-label); font-size: .9375rem; color: var(--accent-deep); }
.article-card:hover { border-color: var(--ink); }

/* ==== split, lists, chips =============================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split .media { border-radius: var(--radius-media); overflow: hidden; }
.split .media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.split.flip .media { order: 2; }

.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tick-list li { position: relative; padding-left: 30px; color: var(--ink); }
.tick-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 16px; height: 3px; background: var(--accent-deep); }
.section.on-dark .tick-list li { color: var(--text-on-dark-muted); }

.link-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 32px 24px; }
.link-columns > div { min-width: 0; }
.link-columns h3 { margin: 0 0 12px; font-size: var(--text-h4); }
.link-columns a { display: block; padding: 5px 0; text-decoration: none; color: var(--ink-soft); font-size: 1rem; }
.link-columns a:hover { color: var(--accent-deep); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px;
  border-radius: var(--radius); background: var(--surface); color: var(--ink);
  font-size: .8125rem; font-weight: 700; text-transform: uppercase;
}
.chip.red { background: var(--accent-deep); color: #fff; }
.chip.dark { background: var(--ink); color: #fff; }

/* ==== steps ============================================================= */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 24px; counter-reset: step; }
.steps > * { min-width: 0; }
.steps .step { counter-increment: step; background: var(--bg-pure); border: 1px solid var(--border); padding: 30px 28px; }
.steps .step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-weight: 800; font-size: 1.75rem;
  color: var(--accent-deep); display: block; line-height: 1;
}
.steps .step h3 { margin: 12px 0 8px; font-size: var(--text-h4); }
.steps .step p { margin: 0; font-size: 1rem; color: var(--ink-soft); }
.section.on-dark .steps .step p { color: var(--ink-soft); }
.section.on-dark .steps .step h3 { color: var(--ink); }

/* ==== faq =============================================================== */
.faq details { border-bottom: 1px solid var(--border); padding: 4px 0; }
.faq summary {
  cursor: pointer; font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; font-size: var(--text-h4); color: var(--ink);
  padding: 20px 40px 20px 0; position: relative; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--accent-deep); font-size: 1.6rem; transition: transform var(--t-base) var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0 0 20px; color: var(--ink-soft); max-width: 70ch; }

/* ==== quote form ========================================================
   SIGNATURE composition: the red card on the near-black band. */
.quote-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.quote-card { background: var(--accent-deep); border-radius: var(--radius); padding: 40px 38px 42px; }
.quote-card h2 { color: #fff; margin: 0 0 24px; }
.quote-card form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.quote-card .field.full { grid-column: 1 / -1; }
.quote-card label { display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase; color: #fff; margin-bottom: 6px; }
.quote-card input[type="text"], .quote-card input[type="email"], .quote-card input[type="tel"], .quote-card textarea {
  width: 100%; min-width: 0; padding: 12px 16px; font-family: var(--font-body); font-size: 1rem;
  color: var(--ink); background: #fff; border: 1px solid var(--steel); border-radius: var(--radius-sm);
}
.quote-card textarea { min-height: 118px; resize: vertical; }
.quote-card input:focus, .quote-card textarea:focus { outline: 3px solid var(--ink); outline-offset: 1px; }
.quote-card .consent { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: .8125rem; color: #fff; line-height: 1.5; }
.quote-card .consent input { margin-top: 3px; flex: none; accent-color: var(--ink); }
.quote-card .consent a { color: #fff; }
.quote-card .submit { grid-column: 1 / -1; }
.quote-card .submit .btn { width: 100%; background: var(--ink); }
.quote-card .submit .btn:hover { background: var(--steel); color: var(--ink); }

/* ==== directions ======================================================== */
.directions { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.directions .map { aspect-ratio: 4/3; background: var(--surface); border-radius: var(--radius-media); overflow: hidden; }
.directions .map img { width: 100%; height: 100%; object-fit: cover; }
.directions dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0 0 24px; }
.directions dt { font-weight: 700; color: var(--ink); }
.directions dd { margin: 0; color: var(--ink-soft); }
.directions ol { margin: 0; padding-left: 22px; color: var(--ink-soft); display: grid; gap: 8px; }

/* ==== area grid ========================================================= */
.area-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 30px 24px; }
.area-grid > div { min-width: 0; }
.area-grid h3 { margin: 0 0 10px; font-size: var(--text-h4); }
.area-grid a { display: block; padding: 4px 0; color: var(--ink-soft); text-decoration: none; font-size: .9375rem; }
.area-grid a:hover { color: var(--accent-deep); }

/* ==== logo wall ========================================================= */
.logo-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 28px; align-items: center; }
.logo-wall > div { min-width: 0; display: flex; align-items: center; justify-content: center; height: 74px; padding: 10px 14px; background: var(--bg-pure); border: 1px solid var(--border); }
.logo-wall span { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.0625rem; color: var(--ink-muted); text-align: center; }

/* ==== cta band ========================================================== */
.cta-band { background: var(--ink); padding: 56px 48px; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; border-radius: var(--radius-lg); }
.cta-band h2 { color: #fff; margin: 0; max-width: 22ch; }
.cta-band p { color: var(--text-on-dark-muted); margin: 8px 0 0; }

/* ==== slider ============================================================ */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(400px, 82vw); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; }
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 99px; }

/* ==== footer ============================================================ */
.footer { background: var(--bg-deepest); color: var(--text-on-dark-muted); padding: 80px 0 0; }
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
.footer > .container > .cols > div { min-width: 0; }
.footer .brand-block img { height: 66px; margin-bottom: 18px; }
.footer .brand-block p { color: var(--text-on-dark-muted); margin: 0 0 6px; font-size: 1rem; }
.footer h4 { color: #fff; font-size: 1.0625rem; margin: 0 0 14px; }
.footer a { color: var(--text-on-dark-muted); text-decoration: none; display: block; padding: 4px 0; font-size: .9375rem; }
.footer a:hover { color: #fff; }
.footer .socials { display: flex; gap: 14px; margin-top: 18px; }
.footer .socials a { padding: 0; }
.footer .legal { margin-top: 64px; background: var(--steel); color: var(--ink); padding: 16px 0; }
.footer .legal .container { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; font-size: .875rem; }
.footer .legal a { color: var(--ink); display: inline; padding: 0; font-size: .875rem; }
.footer .legal a:hover { color: var(--accent-deep); }
.footer .legal .links { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ==== DS doc chrome ===================================================== */
.ds-nav { background: var(--ink); padding: 14px var(--gutter); display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.ds-nav .lockup-text { margin: 0; color: #fff; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.0625rem; }
.ds-nav .lockup-text small { display: block; font-family: var(--font-mono); font-weight: 500; text-transform: none; font-size: .7rem; color: var(--text-on-dark-muted); letter-spacing: .08em; }
.ds-nav .tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-nav .tab { color: var(--text-on-dark-muted); text-decoration: none; font-size: .875rem; font-weight: 700; text-transform: uppercase; padding: 8px 16px; border-radius: var(--radius); }
.ds-nav .tab:hover { color: #fff; }
.ds-nav .tab.active { background: var(--accent-deep); color: #fff; }

.ds-hero { padding: 72px 0 48px; }
.ds-section { padding: 56px 0; border-top: 1px solid var(--border); }

/* ==== sections.html catalog chrome ===================================== */
.sx-header { background: var(--surface); padding: 72px 0 48px; }
.sx-header .meta { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 28px; }
.sx-header .meta > div { font-size: .8125rem; color: var(--ink-muted); }
.sx-header .meta strong { display: block; color: var(--ink); font-size: 1rem; }

.sx-index { border-bottom: 1px solid var(--border); background: var(--bg-pure); }
.sx-index .grid { max-width: var(--container); margin: 0 auto; padding: 20px var(--gutter); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 2px 14px; }
.sx-index a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; font-size: .8125rem; text-decoration: none; color: var(--ink-soft); min-width: 0; }
.sx-index a:hover { background: var(--accent-pale); color: var(--accent-deep); }
.sx-index a .num { color: var(--ink-quiet); font-family: var(--font-mono); }
.sx-index a em.sig { font-style: normal; color: var(--accent-deep); font-size: .68rem; }

.sx-pattern { border-bottom: 1px solid var(--border); }
.pattern-meta { max-width: var(--container); margin: 0 auto; padding: 40px var(--gutter) 18px; display: grid; grid-template-columns: 300px 1fr; gap: 20px; }
.pattern-meta > * { min-width: 0; }
.pattern-meta .id { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-quiet); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pattern-meta .id .num { font-weight: 600; color: var(--accent-deep); }
.pattern-meta .id .signature { background: var(--ink); color: #fff; padding: 3px 9px; border-radius: var(--radius-sm); font-size: .62rem; letter-spacing: .1em; }
.pattern-meta .name { margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; color: var(--ink); font-size: 1.0625rem; }
.pattern-meta .purpose { margin: 3px 0 0; font-size: .9375rem; color: var(--ink-muted); }

.sx-demo { position: relative; border-top: 1px dashed var(--border-mid); }
.sx-demo .demo-label { position: absolute; top: 0; right: var(--gutter); transform: translateY(-50%); background: var(--bg-pure); color: var(--ink-quiet); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; padding: 2px 10px; z-index: 5; }
.sx-demo.on-dark { background: var(--bg-dark); }
.sx-demo.on-dark .demo-label { background: var(--bg-dark); color: var(--text-on-dark-muted); }

/* ==== pages gallery ==================================================== */
.pages-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.pages-gallery > * { min-width: 0; }
.page-card { border: 1px solid var(--border); border-radius: var(--radius-media); overflow: hidden; display: block; text-decoration: none; color: inherit; background: var(--bg-pure); }
.page-card:hover { border-color: var(--ink); }
.page-card .preview { aspect-ratio: 16/10; overflow: hidden; background: var(--surface); position: relative; }
.page-card .preview iframe { width: 200%; height: 200%; transform: scale(.5); transform-origin: 0 0; border: 0; pointer-events: none; }
.page-card .preview::after { content: ""; position: absolute; inset: 0; }
.page-card .body { padding: 22px 24px 26px; }
.page-card .body h3 { margin: 0 0 8px; }
.page-card .body p { margin: 0 0 12px; font-size: .9375rem; color: var(--ink-soft); }
.page-card .page-cta { font-weight: 700; color: var(--accent-deep); font-size: .9375rem; text-transform: uppercase; }

/* ==== design-system.html chrome ======================================== */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 16px; }
.swatch { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-pure); min-width: 0; }
.swatch .chip-color { height: 78px; }
.swatch .meta { padding: 12px 14px; }
.swatch .meta .name { font-weight: 700; font-size: .875rem; color: var(--ink); text-transform: uppercase; }
.swatch .meta .hex { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-muted); }
.swatch .meta .role { font-size: .75rem; color: var(--ink-muted); margin-top: 4px; }
.type-row { border-bottom: 1px solid var(--border); padding: 22px 0; display: grid; grid-template-columns: 190px 1fr; gap: 20px; align-items: baseline; }
.type-row > * { min-width: 0; }
.type-row .spec { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-muted); }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 18px; }
.asset-grid figure { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-media); overflow: hidden; background: var(--bg-pure); min-width: 0; }
.asset-grid img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.asset-grid figcaption { padding: 10px 12px; font-family: var(--font-mono); font-size: .68rem; color: var(--ink-muted); overflow-wrap: anywhere; }

/* ==== responsive ========================================================
   Every fixed multi-column grid collapses here. Written with the layout,
   not retrofitted. */
@media (max-width: 980px) {
  .footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  :root { --section: 64px; --frame-inset: 16px; --gutter: 20px; }
  .split, .quote-split, .directions, .pages-gallery, .char-grid { grid-template-columns: 1fr; }
  .split.flip .media { order: 0; }
  .pattern-meta { grid-template-columns: 1fr; }
  .type-row { grid-template-columns: 1fr; }
  .hero-frame .panel { min-height: 520px; }
  .hero-frame .panel::after { background: linear-gradient(180deg, rgba(23,20,21,.72) 0%, rgba(23,20,21,.86) 100%); }
  .cta-band { padding: 40px 28px; }
  .quote-card { padding: 30px 24px 32px; }
}
@media (max-width: 768px) {
  .nav .actions { display: none; }
  .nav .links { display: none; }
  .footer .cols { grid-template-columns: 1fr; }
  .quote-card form { grid-template-columns: 1fr; }
  .divider-mountains { height: 32px; }
}