/* ==========================================================================
   REMODELER GILT — shared tokens + components
   Extracted from vipremodelingaz.com (captured 2026-07-28; WordPress, custom
   "vipremodelingaz" theme, Contact Form 7, Trustindex, Bootstrap 5 and Font
   Awesome linked but painting nothing). Chandler, Arizona luxury remodeler.

   FOUR RULINGS CARRIED INTO THIS FILE.

   1. GOLD IS A GROUND AND A LINE, NEVER A TEXT COLOUR.
      #d4af37 measures 2.10:1 on white and 6.38:1 against the navy ink. The
      source sets 11px uppercase labels and 40px numerals in it, which is a
      real contrast defect. Here --accent paints the marquee band, the corner
      brackets, the offset frame and every hairline, and --accent-ink (a
      luminance-matched deepening of the same hue, 4.77:1 on white) carries
      every gold-coloured word. That preserves the metal and loses nothing
      readable. Its whole painted area in the source is one 1440x85 band.

   2. HEADLINES ARE INK ONLY.
      The source ends every h2 in a gold italic word: "Bespoke Expertise",
      "Selected Works", "Let's Talk." It is the most recognisable move on the
      site and it is a banned device here, so there is no .gold-italic class
      in this file and nothing registers in ACCENT_ALLOW. The system reads
      quieter than its source. That is the intended trade.

   3. THE SIGNATURE IS OPACITY, NOT GEOMETRY.
      css-extract found no clip-path, no mask and no gradient in brand CSS,
      and reporting "no signature shapes" would have been wrong. The device is
      .watermark: Playfair Display 600 at 18vw (259px at 1440) in the navy ink
      at 3% opacity, behind 55 sections across all 20 source pages, plus a
      12vw brand name on the footer floor. Everything else is hairline
      geometry: a 1px gold frame offset behind the hero photo, a 50px gold
      corner bracket that unfolds to a full frame on card hover, a 45px gold
      circle around the first word of a section label.

   4. NO SOURCE PHOTOGRAPHY AND NO SOURCE REVIEWS.
      The media library mixes Unsplash stock re-uploaded as project work, Wix
      migrated assets and a named commercial photographer's files, and the
      review widget names real private individuals. Neither is mirrored. Photo
      slots and review slots ship as labelled placeholders (.photo-slot,
      .kit-note) so the geometry is real and the content is honestly empty.

   TWO INVENTIONS, both declared. The source ships no focus ring anywhere and
   sets outline:none on its form fields, and its accordion and dropdowns open
   on :hover only. Focus rings are authored below and the accordion is built
   on <details>/<summary> so it works from the keyboard. Everything else is
   transcribed or is house execution (spacing scale, clamp() ramp, tokens).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* COLOR — ink. #082e5f carries 40 text elements and both button grounds in
     the live census. #4a5568 carries 29 and measures 7.53:1 on white, so it
     is the body-safe muted token. Three near-duplicate navies in the source
     (082E5C, 072E5C) are eyedropper drift and are normalised away. */
  --ink: #082e5f;
  --ink-body: #4a5568;
  --ink-quiet: #7b8394;          /* doc chrome and placeholder ink only */
  --field-ink: #6b7280;

  /* COLOR — gold. --accent is a GROUND and a LINE. --accent-ink is the same
     hue deepened to 4.77:1 on white and is the only gold that carries text.
     Three near-duplicate golds in the source (D4AF34, D3AF32) normalised. */
  --accent: #d4af37;
  --accent-ink: #89701e;
  --accent-soft: rgba(212, 175, 55, .4);
  --accent-wash: rgba(212, 175, 55, .05);

  /* COLOR — grounds, ranked by rendered painted area on the source. */
  --paper: #ffffff;
  --paper-warm: #fcfbf9;
  --paper-warmer: #fcfbf4;
  --band-gold: #d4af37;
  --band-ink: #082e5f;

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

  /* COLOR — rules and hairlines */
  --rule: rgba(0, 0, 0, .05);
  --border-soft: rgba(8, 46, 95, .08);
  --border-quiet: rgba(8, 46, 95, .05);
  --field-line: #d6ddea;
  --field-line-focus: #2f5ea8;
  --error: #dc2626;

  /* COLOR — the signature watermark tint */
  --watermark-opacity: .03;

  /* TYPE — both families are the source's own, self-hosted TTF under the SIL
     Open Font License, so nothing is substituted and no display metrics are
     re-tuned. The source also names Cormorant Garamond at 64px on its mobile
     menu with no @font-face anywhere, so it silently falls back to a generic
     serif. That bug is not reproduced: the menu is set in Playfair Display. */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* TYPE — fluid ramp. Desktop targets measured at 1440: home h1 86 /
     inner h1 72 / h2 48 / sticky h2 40 / h3 22 / lede 18 / body 16 /
     small 14 / label 11. */
  --text-display: clamp(2.375rem, 5.2vw, 5.4rem);
  --text-h1: clamp(2.25rem, 4.4vw, 4.5rem);
  --text-h2: clamp(1.875rem, 2.6vw, 3rem);
  --text-h2-sticky: clamp(1.625rem, 2.1vw, 2.5rem);
  --text-h3: 1.375rem;
  --text-lede: clamp(1rem, .4vw + .9rem, 1.125rem);
  --text-body: 1rem;
  --text-small: .875rem;
  --text-label: .6875rem;
  --lead-display: 1.1;

  /* SPACE — the source's own rhythm is 90px on 12 of 12 padded bands. The
     scale below is ours; 90 and 160 are its numbers. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 30px; --s7: 40px; --s8: 60px;
  --section: 90px;
  --section-sm: 50px;
  --section-lg: 160px;
  --gap: 30px;
  --gutter: 20px;
  --maxw: 1240px;

  /* SHAPE — the rendered radius census is 0px on 28 elements, 50% on 9,
     2px on 7 and 4px on 2. pillCount is zero: there are no pills on this
     site whatever Bootstrap declares. */
  --radius-0: 0;
  --radius-sm: 2px;
  --radius: 4px;
  --radius-disc: 50%;

  /* SHADOW — the system is near-shadowless. Depth is hairlines and brackets. */
  --shadow-lift: 0 15px 30px rgba(0, 0, 0, .04);
  --shadow-menu: 0 15px 35px rgba(0, 0, 0, .05);

  --t: .3s;
  --t-slow: .4s;
  --ease: cubic-bezier(.25, 1, .5, 1);
  --ease-reveal: cubic-bezier(.19, 1, .22, 1);
}

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

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

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

.display { font-size: var(--text-display); font-weight: 500; line-height: var(--lead-display); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.lede { font-size: var(--text-lede); line-height: 1.6; color: var(--ink-body); }
.small { font-size: var(--text-small); }
.fine { font-size: var(--text-small); color: var(--ink-body); }

/* INVENTION 1. The source has no focus ring anywhere, and sets outline:none
   on every form field. Authored here. */
:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.on-dark :focus-visible { outline-color: var(--accent); }

.sr-only {
  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;
}

/* Copy the kit authors rather than transcribes. Declared in the markup so the
   verbatim gate skips it and a reader sees the exemption where it is used. */
.kit-note {
  font-size: var(--text-small);
  color: var(--ink-body);
  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); }

/* Every band is a positioning + clipping context, because the watermark is a
   full-bleed absolutely positioned word that must never widen the page. */
.sec {
  position: relative;
  overflow: hidden;
  padding: var(--section) 0;
  background: var(--paper);
}
.sec > .container,
.sec > .container-narrow { position: relative; z-index: 1; }
.sec.tight { padding: var(--section-sm) 0; }
.sec.warm { background: var(--paper-warm); }
.sec.warmer { background: var(--paper-warmer); }
.sec.ruled { border-top: 1px solid var(--rule); }

.on-dark { background: var(--band-ink); color: var(--on-dark-muted); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--on-dark); }
.on-dark p { color: var(--on-dark-muted); }

/* Two-column splits. Fixed tracks, so each carries its own collapse. */
.split, .split-wide, .split-sticky {
  display: grid;
  gap: var(--s8);
  align-items: center;
}
.split { grid-template-columns: 1fr 1fr; }
.split-wide { grid-template-columns: 1fr 1.15fr; }
.split-sticky { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: start; gap: var(--s8); }
.split > *, .split-wide > *, .split-sticky > * { min-width: 0; }
@media (max-width: 880px) {
  .split, .split-wide, .split-sticky { grid-template-columns: 1fr; gap: var(--s7); }
}

/* ==== SIGNATURE S1 — the giant parallax watermark word =================
   Playfair Display 600 at 18vw, navy at 3%, centred, never selectable and
   never a scroll target. 55 instances across all 20 source pages. */
.watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18vw;
  line-height: 1;
  color: var(--ink);
  opacity: var(--watermark-opacity);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.watermark.high { top: 28%; }
.watermark.low { top: 68%; }

/* ==== SIGNATURE S6 — the circle-token section label =====================
   45px gold-outlined circle around the FIRST WORD, then the rest in 11px
   uppercase at 6px tracking. 28 instances across 16 source pages: genuine
   page grammar, not decoration. Named .sec-label deliberately — no dash, no
   stripe, no mono rule, and never the words kicker or eyebrow. */
.sec-label {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  margin: 0 0 var(--s5);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-label);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 6px;
  color: var(--accent-ink);
}
.sec-label .token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  flex: none;
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-disc);
  letter-spacing: .12em;
  text-indent: .12em;
}

.sec-head { margin-bottom: var(--s7); }
.sec-head.center { text-align: center; }
.sec-head.center .sec-label { justify-content: center; }
.sec-head p { color: var(--ink-body); max-width: 62ch; }
.sec-head.center p { margin-left: auto; margin-right: auto; }

/* ==== photo slots ======================================================
   The source's media library cannot be mirrored (Unsplash stock presented as
   project work, Wix-era migrated files, and a named commercial photographer's
   images). Every image in this kit is a labelled slot, so the geometry is the
   source's and the content is honestly empty. */
.photo-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s6);
  text-align: center;
  background-color: var(--paper-warmer);
  background-image: linear-gradient(160deg, rgba(8, 46, 95, .05), rgba(212, 175, 55, .07));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.photo-slot.sq { aspect-ratio: 1 / 1; }
.photo-slot.r43 { aspect-ratio: 4 / 3; }
.photo-slot.r34 { aspect-ratio: 3 / 4; }
.photo-slot.r1610 { aspect-ratio: 16 / 10; }
.photo-slot.r169 { aspect-ratio: 16 / 9; }
.photo-slot.tall { aspect-ratio: 5 / 6; }
.photo-slot .kit-note { max-width: 34ch; }

/* ==== buttons ==========================================================
   Extracted. The source's primary is navy ground, white label, 2px radius,
   16px/40px padding, Manrope 600 13px uppercase at 2px tracking, and it flips
   the WHOLE button navy to gold on hover. Gold carrying a white label is
   2.10:1, so the hover here flips the label to navy ink instead. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .8125rem;
  line-height: 1;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 40px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--on-dark);
  cursor: pointer;
  transition: background-color var(--t) ease, border-color var(--t) ease, color var(--t) ease;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }

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

/* A dark ground is not always .on-dark. Name every dark-ground selector the
   kit actually has, or an outline button inherits ink and renders 1.00:1. */
.on-dark .btn-outline,
.lightbox .btn-outline {
  color: var(--on-dark);
  border-color: rgba(255, 255, 255, .5);
  background: transparent;
}
.on-dark .btn-outline:hover,
.lightbox .btn-outline:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }

.btn-sm { padding: 11px 24px; font-size: var(--text-label); letter-spacing: .12em; }
.btn-block { width: 100%; }

.actions { display: flex; flex-wrap: wrap; gap: var(--s4); }
.actions.center { justify-content: center; }

/* The arrow link that closes every service card and article card. */
.arrow-link {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: color var(--t) ease;
}
.arrow-link:hover { color: var(--accent-ink); }

/* ==== P01 — glass fixed header ========================================
   .nav is the house root so ../mobile-nav.js finds it and injects the burger.
   Pattern D shape: .nav > .container > .brand-mark + .links + .actions. */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(252, 251, 249, .95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav > .container {
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding-top: 15px;
  padding-bottom: 15px;
}
.nav .brand-mark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.nav .brand-mark img { width: 168px; }
.nav .links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s6);
  flex: 1;
  min-width: 0;
}
.nav .links > a,
.nav .has-menu > a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  transition: color var(--t) ease;
}
.nav .links > a:hover,
.nav .has-menu > a:hover { color: var(--accent-ink); }
.nav .links > a.active { color: var(--accent-ink); }

/* S9 — the asymmetric dropdown, 0 0 4px 4px with a 2px gold top rule. */
.nav .has-menu { position: relative; display: flex; align-items: center; }
.nav .menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(15px);
  min-width: 290px;
  padding: var(--s3) 0;
  background: var(--paper);
  border-top: 2px solid var(--accent);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-menu);
  opacity: 0;
  visibility: hidden;
  transition: all var(--t) ease;
  z-index: 5;
}
.nav .has-menu:hover .menu,
.nav .has-menu:focus-within .menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav .menu a {
  display: block;
  padding: 10px 25px;
  font-size: .75rem;
  letter-spacing: .08em;
  text-decoration: none;
  color: var(--ink);
  transition: all var(--t) ease;
}
.nav .menu a:hover { color: var(--accent-ink); background: var(--accent-wash); padding-left: 32px; }

.nav .actions { display: flex; align-items: center; gap: var(--s5); flex: none; }
.nav .actions .phone {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
@media (max-width: 1080px) { .nav .links { gap: var(--s5); } }
@media (max-width: 768px) { .nav .actions { display: none; } }

/* ==== P02 — fullscreen menu ============================================
   Shown statically in the catalog only. On the demo pages the shared
   ../mobile-nav.js drawer does this job, so the kit does not ship two
   competing drawers. Set in Playfair Display, not the source's unloaded
   Cormorant Garamond. */
.fs-menu {
  position: relative;
  background: var(--paper-warm);
  padding: var(--s8) var(--gutter);
  border: 1px solid var(--rule);
}
.fs-menu .fs-links { display: flex; flex-direction: column; gap: var(--s4); }
.fs-menu .fs-links > a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.1;
  color: #163a70;
  text-decoration: none;
  transition: color var(--t) ease;
}
.fs-menu .fs-links > a:hover { color: var(--accent-ink); }
.fs-menu .fs-sub { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); margin: var(--s2) 0 var(--s4); }
.fs-menu .fs-sub a {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.875rem);
  color: var(--ink-body);
  text-decoration: none;
}
.fs-menu .fs-sub a:hover { color: var(--accent-ink); }
.fs-menu .fs-info { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--rule); }
.fs-menu .fs-info a { color: var(--ink); text-decoration: none; font-weight: 600; }

/* ==== P03 — breadcrumb line ============================================ */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s5);
  font-size: var(--text-small);
  color: var(--ink-body);
}
.crumbs a { text-decoration: none; color: var(--ink-body); }
.crumbs a:hover { color: var(--accent-ink); }
.crumbs .sep { color: var(--ink-quiet); }
.crumbs .current { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.crumbs.center { justify-content: center; }

/* ==== P04 — split hero with framed photo ==============================
   S5: a 1px gold frame offset -20/-20 behind the photo, plus a navy hairline
   at left -40px. Both are decoration and both retire below 992px. */
.hero { padding: var(--section-lg) 0 var(--section) 0; }
.hero .display { margin-bottom: var(--s5); }
.hero .lede { max-width: 46ch; margin-bottom: var(--s7); }

.hero-visual { position: relative; }
.hero-visual .photo-slot { position: relative; z-index: 1; }
.deco-frame {
  position: absolute;
  inset: -20px -20px auto auto;
  width: 100%;
  height: 100%;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  z-index: 0;
  pointer-events: none;
}
.deco-rule {
  position: absolute;
  top: 10%;
  left: -40px;
  width: 1px;
  height: 80%;
  background: var(--ink);
  opacity: .15;
  z-index: 0;
}
@media (max-width: 992px) { .deco-frame, .deco-rule { display: none; } }

/* ==== P05 — SIGNATURE S3, the gold claim marquee ======================
   The one place gold is a ground. The source sets the claims in white, which
   measures 2.10:1; here they carry the navy ink at 6.38:1. */
.marquee {
  background: var(--band-gold);
  border-bottom: 1px solid var(--rule);
  padding: 25px 0;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  gap: var(--s8);
  width: max-content;
  animation: marqueeMove 20s linear infinite;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}
.marquee-item .dot { color: var(--ink); opacity: .6; }
@keyframes marqueeMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ==== P06 — numbered service card grid ================================
   S4: the gold corner bracket sits at 50x50 with zero opacity and unfolds to
   a full frame on hover. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--gap);
}
.card-grid > * { min-width: 0; }

.svc-card {
  position: relative;
  display: block;
  padding: var(--s6);
  background: var(--paper);
  border: 1px solid var(--border-soft);
  text-decoration: none;
  transition: border-color var(--t-slow) ease, box-shadow var(--t-slow) ease;
}
.svc-card:hover { border-color: var(--accent-soft); box-shadow: var(--shadow-lift); }
/* The service-card numeral is Playfair italic at 16px on the source; the
   40px italic numeral belongs to the process step, not here. */
.svc-card .num {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  line-height: 1;
  color: var(--accent-ink);
  margin-bottom: 15px;
}
.svc-card .photo-slot { border-radius: var(--radius-sm); margin-bottom: var(--s5); }
.svc-card h3 { transition: color var(--t) ease; }
.svc-card:hover h3 { color: var(--accent-ink); }
.svc-card p { font-size: var(--text-small); color: var(--ink-body); }
.svc-card .arrow-link { margin-top: var(--s3); }

.bracket {
  position: absolute;
  top: 0; right: 0;
  width: 50px; height: 50px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  opacity: 0;
  transition: all .5s ease;
  pointer-events: none;
}
.svc-card:hover .bracket { opacity: 1; width: 100%; height: 100%; }
.bracket.static { opacity: 1; width: 60px; height: 60px; border-width: 3px; top: -14px; right: -14px; }

/* ==== P07 — horizontal portfolio rail ================================= */
.rail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s6);
  flex-wrap: wrap;
  margin-bottom: var(--s7);
}
.rail-head .sec-head { margin-bottom: 0; }
.rail-controls { display: flex; gap: var(--s3); }
.rail-btn {
  width: 50px; height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-disc);
  color: var(--ink);
  font-size: 1.125rem;
  cursor: pointer;
  transition: all var(--t) ease;
}
.rail-btn:hover { border-color: var(--accent-soft); color: var(--accent-ink); }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(420px, 82vw);
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s5);
  scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }
.rail-item .photo-slot { margin-bottom: var(--s3); }
.rail-item .caption {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ==== P08 — two-column story block ==================================== */
.story-text p { color: var(--ink-body); }

/* ==== P09 — review rail =============================================== */
.rating-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3) var(--s5);
  margin-bottom: var(--s6);
}
.rating-line .grade {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: .1em;
  color: var(--ink);
}
.rating-line .count { font-size: var(--text-small); color: var(--ink-body); }

.review-card {
  padding: var(--s6);
  background: var(--paper);
  border: 1px solid var(--border-soft);
}
.review-card .src {
  font-size: var(--text-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-body);
  margin-bottom: var(--s4);
}
.review-card .slot-line {
  height: 1px;
  background: var(--border-soft);
  margin: var(--s4) 0;
}

/* ==== P10 — minimal FAQ accordion =====================================
   INVENTION 2. The source opens this on a click handler with no keyboard
   path; built here on <details>/<summary> so it works without JS and from
   the keyboard. Hairline rules only, no card, no border box. */
.faq { border-top: 1px solid var(--rule); }
.acc-item { border-bottom: 1px solid var(--rule); }
.acc-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding: 25px 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color var(--t) ease;
}
.acc-item > summary::-webkit-details-marker { display: none; }
.acc-item > summary:hover { color: var(--accent-ink); }
.acc-item > summary .plus {
  flex: none;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--ink);
  transition: transform var(--t-slow) ease, color var(--t) ease;
}
.acc-item[open] > summary { color: var(--accent-ink); }
.acc-item[open] > summary .plus { transform: rotate(45deg); color: var(--accent-ink); }
.acc-body { padding: 0 0 25px; max-width: 76ch; }
.acc-body p { color: var(--ink-body); }

/* ==== P11 — sticky-heading long-form block ============================
   S12: a position:sticky Playfair heading in the left column against a 1px
   left rule at 40px padding on the right. The rule retires below 992px. */
.lf-heading { font-size: var(--text-h2-sticky); position: sticky; top: 120px; }
.lf-body { padding-left: var(--s7); border-left: 1px solid var(--rule); }
.lf-body h3 { margin: var(--s7) 0 var(--s5); }
.lf-body h3:first-child { margin-top: 0; }
.lf-body p, .lf-body li { font-size: var(--text-body); line-height: 1.8; color: var(--ink-body); }
.lf-body ul { padding-left: 1.15em; margin: 0 0 1.1em; }
.lf-body li { margin-bottom: .5em; }
.lf-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.lf-body a:hover { color: var(--accent-ink); }
.lf-links { display: grid; gap: var(--s2); padding: 0; margin: 0; list-style: none; }
@media (max-width: 992px) {
  .lf-body { padding-left: 0; border-left: 0; }
  .lf-heading { position: static; }
}

/* ==== P12 — contact split with underline form ========================= */
.contact-text .display { font-size: clamp(2.25rem, 4.4vw, 4.6875rem); }
.contact-text p { max-width: 40ch; color: var(--ink-body); }

.form-card {
  background: var(--paper);
  border: 1px solid var(--border-soft);
  padding: var(--s7);
}
.line-form { display: grid; gap: var(--s6); }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s6);
}
.form-row > * { min-width: 0; }
@media (max-width: 880px) { .form-row { grid-template-columns: 1fr; } }

.line-form label {
  display: block;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-body);
  margin-bottom: var(--s2);
}
.line-form input,
.line-form select,
.line-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--field-line);
  border-radius: var(--radius-0);
  background: transparent;
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--field-ink);
  transition: border-bottom-color var(--t) ease;
}
.line-form textarea { min-height: 96px; resize: vertical; }
.line-form input:focus,
.line-form select:focus,
.line-form textarea:focus { border-bottom-color: var(--field-line-focus); }
.line-form input::placeholder,
.line-form textarea::placeholder { color: var(--ink-quiet); }
.btn-submit {
  min-width: 200px;
  height: 54px;
  border: 0;
  border-radius: var(--radius-0);
  background: #123c7a;
  color: var(--on-dark);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--t) ease;
}
.btn-submit:hover { background: #0f3267; }

/* ==== P13 — footer with the giant wordmark ============================ */
.brand-footer {
  position: relative;
  overflow: hidden;
  background: var(--paper-warm);
  border-top: 1px solid var(--rule);
  padding: var(--section) 0 0;
}
.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--s8);
}
.footer-grid > * { min-width: 0; }
.footer-brand .name {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  color: var(--ink);
  margin-bottom: var(--s4);
}
.footer-brand p { font-size: var(--text-small); color: var(--ink-body); max-width: 40ch; }
.footer-col h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s5);
}
.footer-col a {
  display: block;
  font-size: var(--text-small);
  color: var(--ink-body);
  text-decoration: none;
  padding: 4px 0;
  transition: color var(--t) ease;
}
.footer-col a:hover { color: var(--accent-ink); }

/* S2 — the same watermark device at 12vw, as the footer floor. */
.footer-wordmark {
  position: relative;
  margin-top: var(--s7);
  overflow: hidden;
  text-align: center;
  pointer-events: none;
}
.footer-wordmark span {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12vw;
  line-height: .8;
  color: var(--ink);
  opacity: var(--watermark-opacity);
  white-space: nowrap;
  user-select: none;
}
.footer-legal {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--rule);
  padding: var(--s5) 0;
  text-align: center;
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-body);
}

/* ==== P14 — service hero with bracket photo =========================== */
.service-hero { padding: var(--section-lg) 0 var(--section); }
.service-hero h1 { margin-bottom: var(--s5); }
.service-hero .lede { max-width: 52ch; margin-bottom: var(--s7); }
.service-hero .hero-visual .photo-slot { border-radius: var(--radius); }

/* ==== P16 — numbered process step grid ================================ */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--gap);
}
.process-grid > * { min-width: 0; }
.process-step {
  padding: var(--s6);
  background: var(--paper-warm);
  border: 1px solid var(--border-quiet);
  border-radius: var(--radius);
  transition: all var(--t-slow) ease;
}
.process-step:hover { border-color: var(--accent-soft); box-shadow: var(--shadow-lift); transform: translateY(-5px); }
.process-step .num {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--accent-ink);
  margin-bottom: 15px;
}
.process-step h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 15px; }
.process-step p { font-size: var(--text-small); color: var(--ink-body); }

/* ==== P17 — premium gallery grid ======================================
   The overlay declares a SOLID ink background and animates opacity, so the
   contrast walker resolves a painted ground under the label instead of the
   slot beneath it. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--s5);
}
.gallery-grid > * { min-width: 0; }
.g-item { position: relative; overflow: hidden; }
.g-item.featured { grid-column: span 2; }
@media (max-width: 720px) { .g-item.featured { grid-column: span 1; } }
.g-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--band-ink);
  opacity: 0;
  transition: opacity var(--t-slow) ease;
}
.g-item:hover .g-overlay,
.g-item:focus-within .g-overlay { opacity: .55; }
.g-expand {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--on-dark);
  transform: translateY(20px);
  transition: transform .35s ease;
}
.g-item:hover .g-expand,
.g-item:focus-within .g-expand { transform: translateY(0); }

/* ==== P18 — gallery lightbox ========================================== */
.lightbox {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--s5);
  padding: var(--s8) var(--s6);
  background: var(--band-ink);
  color: var(--on-dark-muted);
}
.lightbox .lb-stage { width: min(680px, 100%); }
.lightbox .lb-bar { display: flex; align-items: center; gap: var(--s5); }
.lb-btn {
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--radius-disc);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--on-dark);
  font-size: 1.125rem;
  cursor: pointer;
  transition: all var(--t) ease;
}
.lb-btn:hover { border-color: var(--accent); color: var(--accent); }
.lb-counter {
  font-family: var(--font-body);
  font-size: var(--text-label);
  letter-spacing: .2em;
  color: var(--on-dark);
}

/* ==== P19 — category anchor chips ===================================== */
.cat-anchors { display: flex; flex-wrap: wrap; gap: var(--s3); }
.cat-anchors a {
  display: inline-flex;
  padding: 11px 22px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: all var(--t) ease;
}
.cat-anchors a:hover { border-color: var(--accent-soft); color: var(--accent-ink); }

/* ==== P20 — category rail with CTA ==================================== */
.cat-rail-foot { margin-top: var(--s6); }

/* ==== P21 — contact details plus estimate form ======================== */
.details-box {
  display: grid;
  gap: var(--s6);
  padding: var(--s7);
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
}
.info-item .label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-body);
  margin-bottom: var(--s2);
}
.info-item .value {
  font-family: var(--font-body);
  font-size: 1.125rem;
  color: var(--ink);
  margin: 0;
}
.info-item .value a { text-decoration: none; }
.info-item .value a:hover { color: var(--accent-ink); }
.info-item .value.small { font-size: var(--text-body); }

.form-card .form-title { margin-bottom: var(--s6); }

/* ==== P22 — map band ================================================== */
.map-band { padding: 0; }
.map-slot {
  min-height: 380px;
  background-color: var(--paper-warmer);
  background-image:
    linear-gradient(0deg, rgba(8, 46, 95, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 46, 95, .06) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* ==== P23 — founder card ============================================== */
.founder-card {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: var(--s8);
  align-items: center;
}
.founder-card > * { min-width: 0; }
@media (max-width: 880px) { .founder-card { grid-template-columns: 1fr; gap: var(--s6); } }
.founder-info .role {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-body);
  margin-bottom: var(--s5);
}
.founder-info p { color: var(--ink-body); }

/* ==== P24 — featured post split card ================================== */
.featured-post {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--s8);
  align-items: center;
  border: 1px solid var(--border-soft);
  background: var(--paper);
}
.featured-post > * { min-width: 0; }
@media (max-width: 880px) { .featured-post { grid-template-columns: 1fr; gap: 0; } }
.featured-post .fp-content { padding: var(--s7); }
.featured-post .photo-slot { border: 0; border-radius: 0; height: 100%; }
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-body);
  margin-bottom: var(--s4);
}
.post-meta .dot { opacity: .6; }
.featured-post p { color: var(--ink-body); }

/* ==== P25 — post grid ================================================= */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--s7);
}
.post-grid > * { min-width: 0; }
.post-card { border: 1px solid var(--border-soft); background: var(--paper); }
.post-card .photo-slot { border: 0; border-radius: 0; }
.post-card .pc-body { padding: var(--s6); }
.post-card h3 { font-size: 1.25rem; }
.post-card p { font-size: var(--text-small); color: var(--ink-body); }
.post-card.is-empty { display: grid; place-items: center; min-height: 260px; padding: var(--s6); text-align: center; }

/* ==== P26 to P28 — article ============================================ */
.article-hero { padding: var(--section-lg) 0 var(--section-sm); text-align: center; }
.article-hero .post-meta { justify-content: center; }
.article-title { font-size: clamp(2.25rem, 5vw, 4.0625rem); line-height: 1.15; max-width: 22ch; margin-left: auto; margin-right: auto; }
.article-media { padding: 0 0 var(--section-sm); }
.article-body { padding: 0 0 var(--section); }
.article-content { max-width: 76ch; margin: 0 auto; }
.article-content p { font-size: var(--text-body); line-height: 1.8; color: var(--ink-body); }
.article-content h2 { font-size: 2rem; margin: var(--s7) 0 var(--s5); }
.article-content blockquote {
  margin: var(--s7) 0;
  padding: var(--s5) var(--s6);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--paper-warm);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink);
}
.article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}
.article-tags { display: flex; flex-wrap: wrap; gap: var(--s2); }
.article-share {
  display: flex;
  align-items: center;
  gap: var(--s4);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-body);
}
.article-share a { color: var(--ink); text-decoration: none; }
.article-share a:hover { color: var(--accent-ink); }

/* ==== LIGHT-GROUND REGISTER ===========================================
   .on-dark p (0,2,1) outranks .review-card p (0,2,0), so any component that
   paints its own light ground inside a dark band must reassert its ink at
   higher specificity. Register every new one HERE as it is written. */
.on-dark .form-card,
.on-dark .review-card,
.on-dark .details-box,
.on-dark .process-step,
.on-dark .post-card,
.on-dark .svc-card { color: var(--ink-body); }
.on-dark .form-card p,
.on-dark .review-card p,
.on-dark .details-box p,
.on-dark .process-step p,
.on-dark .post-card p,
.on-dark .svc-card p { color: var(--ink-body); }
.on-dark .form-card h1, .on-dark .form-card h2, .on-dark .form-card h3, .on-dark .form-card h4,
.on-dark .review-card h3,
.on-dark .details-box h3,
.on-dark .process-step h3,
.on-dark .post-card h3,
.on-dark .svc-card h3 { color: var(--ink); }

/* ==== ds chrome ======================================================== */
.ds-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  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-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  color: var(--ink);
  font-size: 1.0625rem;
}
.ds-nav .lockup-text small {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .75rem;
  color: var(--ink-body);
}
.ds-nav .tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.ds-nav .tab {
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-body);
  padding: .5em 1em;
  border-radius: var(--radius-sm);
  transition: background-color var(--t) ease, color var(--t) ease;
}
.ds-nav .tab:hover { background: var(--paper-warm); color: var(--ink); }
.ds-nav .tab.active { background: var(--ink); color: var(--on-dark); }

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

.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: var(--text-label); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-quiet); margin-bottom: .3em; }
.meta-strip .v { display: block; font-weight: 600; color: var(--ink); font-size: .9375rem; }

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

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

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

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

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

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

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

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

.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's own nesting is a third padding layer: .sx-pattern >
   .sx-demo > the section's .container leaves ~197px of a 305px viewport.
   Zero it on phones and give the padding back to .pattern-meta alone. */
@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: var(--gutter); padding-right: var(--gutter); }
}

/* pages gallery */
.pages-gallery { padding: 3rem 0; }
.pages-gallery .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 26px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.pages-gallery .grid > * { min-width: 0; }
.page-card { border: 1px solid var(--border-soft); border-radius: var(--radius); 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: var(--text-small); color: var(--ink-body); }
.page-card .cap a { font-size: var(--text-small); font-weight: 600; color: var(--ink); }

/* doc-chrome footer */
.footer { background: var(--band-ink); color: var(--on-dark-muted); padding: 3rem 0; }
.footer .cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1.5rem;
}
.footer .cols > * { min-width: 0; }
.footer .cols h4 {
  color: var(--on-dark);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: .6em;
}
.footer .cols p { color: var(--on-dark-muted); margin: 0; font-size: .9375rem; }
.footer .cols .kit-note { color: var(--on-dark-muted); }