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

/* roofer-meridian — Stonecreek Roofing (stonecreekroofingaz.com)
 *
 * The source is React + Vite + Tailwind v4. Its character is flat colour, ONE
 * radius (8px), ONE shadow step, and pill CTAs. No clip-path, mask, gradient,
 * blend mode or border-image renders anywhere on the public site: the button
 * census returns flat rgb(234,212,0) for 21 of 31 buttons and flat colours or
 * alpha tints for the rest. Do not add a gradient here; it would not be an
 * execution difference, it would be a different brand.
 *
 * Both faces are the source's own and both are OFL, so metrics carry verbatim
 * with no substitution and no display re-tuning.
 */

:root {
  /* COLOR — brand. Ranked by rendered painted area from the live-DOM probe,
     not by declaration count. Blue paints 10.4M px2 across 54 flat-fill
     elements; yellow 416k across 55. Both are also declared as :root custom
     properties on the source (--color-primary / --color-secondary). */
  --accent: #028ecb;              /* brand blue — card grounds, icon chips, stat numerals */
  --accent-deep: #027cb1;         /* blue hover. Renders 0 at rest: hover-only, not dead */
  --accent-soft: rgba(2, 142, 203, .20);   /* tinted secondary button on dark */
  --cta: #ead400;                 /* CTA yellow — every primary pill, always with black label */
  --cta-deep: #c9b400;            /* CTA hover — 128 uses of hover:bg-(--color-secondary-hover) */
  --cta-soft: rgba(234, 212, 0, .15);      /* yellow icon tiles */

  /* COLOR — ink and grounds */
  --ink: #1a1a1a;                 /* hero ground, mid-page CTA band, footer */
  --ink-soft: rgba(26, 26, 26, .80);
  --ink-muted: rgba(26, 26, 26, .64);
  --ink-quiet: rgba(26, 26, 26, .48);      /* doc chrome only, never body copy */
  --paper: #ffffff;               /* dominant ground, 20.4M px2 */
  --paper-alt: #fafafa;           /* blog index and blog post body only */

  /* COLOR — on dark */
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, .82);
  --on-dark-quiet: rgba(255, 255, 255, .64);
  --scrim: rgba(0, 0, 0, .75);    /* the hero overlay. A flat layer, NOT a gradient */
  --glass: rgba(255, 255, 255, .10);       /* trust chip ground, with backdrop-blur */
  --glass-line: rgba(255, 255, 255, .10);

  /* COLOR — rules */
  --border: rgba(0, 0, 0, .10);
  --border-hover: rgba(2, 142, 203, .20);  /* 82 uses of the blue card hover border */

  /* TYPE — the source's own faces, both OFL, no substitution.
     Only Oswald 600 and 700 ever render, so only those are requested. */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Open Sans', system-ui, -apple-system, sans-serif;

  /* GEOMETRY — 8px is the system radius: 93 painted elements. Pills are real
     here (22 of 31 buttons); 12px appears twice and is not promoted. */
  --radius: 8px;
  --radius-pill: 9999px;
  --shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .05);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .05);
  --shadow-chip: 0 2px 8px rgba(0, 0, 0, .15);
  --container: 1280px;
  --speed: 300ms;                 /* effectively universal: 4,552 uses vs 146 at 500ms */
}

/* ── base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.625;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 .5em;
  color: var(--ink);
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem); }   /* source h1 renders 60px */
h2 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem); } /* 36px */
h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.55; }
p { margin: 0 0 1rem; }
a { color: inherit; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .container { padding: 0 24px; } }
@media (min-width: 1024px) { .container { padding: 0 32px; } }
.section { padding: 40px 0; }
@media (min-width: 640px) { .section { padding: 56px 0; } }
@media (min-width: 1024px) { .section { padding: 64px 0; } }
.section.alt { background: var(--paper-alt); }
.on-dark { background: var(--ink); color: var(--on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--on-dark); }
.on-dark p { color: var(--on-dark-muted); }
.lede { font-size: 1.125rem; line-height: 1.625; color: var(--ink-muted); max-width: 68ch; }
.on-dark .lede { color: var(--on-dark-muted); }
.small { font-size: .875rem; }
.fine { font-size: .8125rem; color: var(--ink-muted); }
.on-dark .fine { color: var(--on-dark-quiet); }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }

/* Section label. The source sets a two-tone uppercase label above nearly every
 * h2 (first word blue, remainder black) roughly 120 times across the corpus:
 * genuine structural page grammar, not decoration. Carried under the SKILL.md
 * Phase 5 carve-out pending Jarrett's ruling on the house-format ban, with the
 * hero's flanking yellow hairlines dropped and no dash, stripe or mono face.
 * Named .sec-label, never kicker/eyebrow. Documented in brand-spec.md. */
.sec-label {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 .5rem;
}
.sec-label b { color: var(--accent); font-weight: 700; }

/* A dark ground is not always .on-dark. The hero, the inner hero and the CTA
 * band each paint --ink on themselves, so a rule keyed only to .on-dark leaves
 * every inherited-ink component rendering ink-on-ink at 1.00:1. The 375px and
 * class gates both pass while the text is invisible; only the contrast walker
 * sees it. Name every dark-ground selector this kit actually has. */
.on-dark .sec-label, .hero .sec-label, .inner-hero .sec-label, .cta-band .sec-label { color: var(--on-dark); }
.on-dark .sec-label b, .hero .sec-label b, .inner-hero .sec-label b, .cta-band .sec-label b { color: var(--cta); }
.hero .lede, .inner-hero .lede, .cta-band .lede { color: var(--on-dark-muted); }
.hero .fine, .inner-hero .fine, .cta-band .fine { color: var(--on-dark-quiet); }
.hero .check-list li, .inner-hero .check-list li, .cta-band .check-list li { color: var(--on-dark-muted); }
.hero .check-list li::before, .inner-hero .check-list li::before, .cta-band .check-list li::before { border-color: var(--cta); }
.hero p, .inner-hero p, .cta-band p { color: var(--on-dark-muted); }
.hero h1, .hero h2, .hero h3, .inner-hero h1, .inner-hero h2, .cta-band h2, .cta-band h3 { color: var(--on-dark); }

/* LIGHT-GROUND COMPONENTS INSIDE A DARK SECTION — register new ones HERE.
 * The rules directly above are section-scoped, so they reach into any
 * descendant that paints its own light ground: the hero's white quote card
 * rendered white-on-white at 1.00:1 the moment the .hero h2 rule was added.
 * Re-assert the component's ink at +1 specificity; never weaken the section
 * rule. A comment alone is not enough (guardian-roofing had one and still
 * shipped a pale pill at 1.14:1), so add the selector as you add the
 * component and let the contrast gate be the check. */
.hero .form-card h2, .hero .form-card h3, .hero .form-card label,
.cta-band .card h3, .cta-band .panel h3, .cta-band .address-card .city,
.inner-hero .card h3 { color: var(--ink); }
.hero .form-card p, .hero .form-card .fine,
.cta-band .card p, .cta-band .panel p, .cta-band .address-card p,
.inner-hero .card p { color: var(--ink-muted); }
.hero .form-card .check-list li, .cta-band .card .check-list li, .cta-band .panel .check-list li { color: var(--ink-soft); }
.hero .form-card .check-list li::before, .cta-band .card .check-list li::before, .cta-band .panel .check-list li::before { border-color: var(--accent); }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-size: .75rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  padding: .875rem 1.75rem; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--speed) ease-in-out, color var(--speed) ease-in-out,
              border-color var(--speed) ease-in-out, transform var(--speed) ease-in-out;
}
.btn-cta { background: var(--cta); color: #000; }        /* 11.53:1 — the source pairing */
.btn-cta:hover { background: var(--cta-deep); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-deep); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-lg { font-size: .875rem; padding: 1rem 2rem; }
.btn-sm { font-size: .6875rem; padding: .625rem 1.125rem; }
.btn-block { width: 100%; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent); }

/* A dark ground is not always .on-dark — the hero and CTA bands paint --ink on
 * themselves. Name every dark-ground selector the kit actually has, or a ghost
 * button inherits ink and renders ink-on-ink at 1.00:1 (roofer-vector shipped
 * exactly that on four pages). */
.on-dark .btn-ghost,
.hero .btn-ghost,
.inner-hero .btn-ghost,
.cta-band .btn-ghost {
  background: var(--glass); color: var(--on-dark);
  border-color: rgba(255, 255, 255, .28);
  backdrop-filter: blur(8px);
}
.on-dark .btn-ghost:hover,
.hero .btn-ghost:hover,
.inner-hero .btn-ghost:hover,
.cta-band .btn-ghost:hover { background: rgba(255, 255, 255, .20); }
.on-dark .btn-outline,
.cta-band .btn-outline { color: var(--on-dark); border-color: rgba(255, 255, 255, .35); }
.on-dark .btn-outline:hover,
.cta-band .btn-outline:hover { color: var(--cta); border-color: var(--cta); }

/* ── site chrome (demo pages) ─────────────────────────────────────────── */
.utility-bar { background: var(--ink); color: var(--on-dark-muted); font-size: .8125rem; }
.utility-bar .container { display: flex; align-items: center; gap: 1.5rem; padding-top: .5rem; padding-bottom: .5rem; flex-wrap: wrap; }
.utility-bar a { color: var(--on-dark-muted); text-decoration: none; transition: color var(--speed); }
.utility-bar a:hover { color: var(--cta); }
.utility-bar .sep { color: var(--on-dark-quiet); }
@media (max-width: 1023px) { .utility-bar { display: none; } }

.nav { background: var(--ink); color: var(--on-dark); }
.nav > .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 1rem; padding-bottom: 1rem; }
.nav .brand-mark { display: flex; align-items: center; gap: .625rem; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--on-dark); text-decoration: none; }
.nav .brand-mark img { height: 44px; width: auto; }
.nav .menu { display: flex; align-items: center; gap: 1.5rem; }
.nav .menu a { font-size: .875rem; font-weight: 600; color: var(--on-dark); text-decoration: none; transition: color var(--speed); }
.nav .menu a:hover { color: var(--cta); }   /* 1,779 uses — the site's most common interaction */
.nav .actions { display: flex; align-items: center; gap: 1rem; }
.nav .actions .phone { font-weight: 700; color: var(--on-dark); text-decoration: none; white-space: nowrap; }
.nav .actions .phone:hover { color: var(--cta); }
@media (max-width: 1023px) { .nav .menu { display: none; } }
@media (max-width: 768px) { .nav .actions { display: none; } }

.footer { background: var(--ink); color: var(--on-dark-muted); padding: 56px 0 24px; }
.footer h4 { color: var(--on-dark); font-size: 1rem; margin-bottom: .75rem; }
.footer a { color: var(--on-dark-muted); text-decoration: none; transition: color var(--speed); }
.footer a:hover { color: var(--cta); }
.footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 2rem; }
.footer .cols > * { min-width: 0; }
.footer li { margin-bottom: .375rem; font-size: .875rem; }
.footer .legal { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 2rem; padding-top: 1.25rem; font-size: .8125rem; color: var(--on-dark-quiet); }

/* ── hero ─────────────────────────────────────────────────────────────── */

/* The source's header is TRANSPARENT and sits over the hero photo; the utility
 * bar and nav are not bands above it. `.hero-wrap` paints --ink so the header
 * has a painted ancestor: without it the contrast walker resolves white nav
 * text against the white body and reports 1.00:1 INVISIBLE, which is a false
 * failure caused by absolute positioning rather than a real defect. */
.hero-wrap { position: relative; background: var(--ink); }
.hero-wrap .site-head { position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
.hero-wrap .utility-bar, .hero-wrap .nav { background: transparent; }

.hero { position: relative; background: var(--ink); color: var(--on-dark); overflow: hidden; min-height: 100vh; display: flex; align-items: center; }
.hero .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .scrim { position: absolute; inset: 0; background: var(--scrim); }  /* flat 75%, no gradient */
.hero > .container { position: relative; width: 100%; padding-top: 132px; padding-bottom: 64px; }
@media (min-width: 1024px) { .hero > .container { padding-top: 160px; } }

/* In the catalog each pattern renders in its own box, where a 100vh hero would
   swamp the page. Cap it there only; the built pages keep the source height. */
.sx-demo .hero { min-height: 0; }
.hero h1 { color: var(--on-dark); max-width: 20ch; }
.hero .lede { color: var(--on-dark-muted); max-width: 60ch; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: start; }
.hero-grid > * { min-width: 0; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* Glass trust chip: rgba white .1 + blur + a 2px yellow left border and 1px
   white on the other three sides. Six of them in the hero. */
.chip-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: .75rem; margin-top: 2rem; }
.chip-row > * { min-width: 0; }
.trust-chip {
  display: flex; align-items: center; gap: .5rem;
  background: var(--glass); backdrop-filter: blur(8px);
  border: 1px solid var(--glass-line); border-left: 2px solid var(--cta);
  border-radius: var(--radius); padding: .75rem 1rem;
  font-size: .8125rem; font-weight: 600; color: var(--on-dark);
}
.hero .actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* hero quote form — white 95% card over the photo */
.form-card { background: rgba(255, 255, 255, .95); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.75rem; color: var(--ink); }
.form-card h2 { font-size: 1.5rem; margin-bottom: .25rem; }
.form-card .fine { margin-bottom: 1.25rem; }
.field { margin-bottom: .875rem; }
.field label { display: block; font-size: .8125rem; font-weight: 600; margin-bottom: .3125rem; }
.field label .req { color: var(--accent); }
.field input, .field select {
  width: 100%; min-width: 150px; font-family: var(--font-body); font-size: .9375rem;
  padding: .6875rem .875rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); transition: border-color var(--speed), box-shadow var(--speed);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--cta); box-shadow: 0 0 0 2px rgba(234, 212, 0, .5); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .875rem; }
.form-grid > * { min-width: 0; }
@media (max-width: 880px) { .form-grid { grid-template-columns: 1fr; } }

/* ── inner hero + breadcrumb ──────────────────────────────────────────── */
.inner-hero { background: var(--ink); color: var(--on-dark); padding: 88px 0 48px; }
.inner-hero h1 { color: var(--on-dark); }
.inner-hero .lede { color: var(--on-dark-muted); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .8125rem; color: var(--on-dark-quiet); margin-bottom: 1rem; }
.breadcrumb a { color: var(--on-dark-quiet); text-decoration: none; }
.breadcrumb a:hover { color: var(--cta); }

/* ── cards + grids ────────────────────────────────────────────────────── */
.grid { display: grid; gap: 1.5rem; }
.grid > * { min-width: 0; }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

.card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; transition: box-shadow var(--speed) ease-in-out, border-color var(--speed) ease-in-out, transform var(--speed) ease-in-out; }
.card:hover { box-shadow: var(--shadow-lg); border-color: var(--border-hover); transform: translateY(-4px); }
.card h3 { margin-bottom: .375rem; }
.card p { color: var(--ink-muted); font-size: .9375rem; margin-bottom: 0; }

/* the blue solid card — flat --accent, white text, the 9-up Difference grid */
.card-blue { background: var(--accent); color: #fff; border-color: transparent; }
.card-blue h3, .card-blue p { color: #fff; }
.card-blue p { color: rgba(255, 255, 255, .90); }

/* The tile ground is the yellow 15% tint; its glyph takes ink, not yellow.
   Yellow on the tint measures 2.10:1 and yellow on paper 1.51:1, which is why
   the source never sets yellow text on a light ground and the kit must not. */
.icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius); background: var(--cta-soft); color: var(--ink); margin-bottom: .875rem; font-weight: 700; }
.card-blue .icon-tile { background: rgba(255, 255, 255, .18); color: #fff; }

.photo-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--speed), transform var(--speed); }
.photo-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.photo-card img { width: 100%; height: 208px; object-fit: cover; }
.photo-card .body { padding: 1.5rem; display: flex; flex-direction: column; gap: .625rem; flex: 1; }
.photo-card .sub { font-style: italic; color: var(--ink-muted); font-size: .9375rem; }
.photo-card .btn { margin-top: auto; align-self: flex-start; }

/* checklist / bullets */
.check-list li { position: relative; padding-left: 1.75rem; margin-bottom: .625rem; font-size: .9375rem; color: var(--ink-soft); }
.check-list li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.on-dark .check-list li { color: var(--on-dark-muted); }
.on-dark .check-list li::before { border-color: var(--cta); }

/* numbered cards 01–08 */
.num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--accent); line-height: 1; }
.badge { display: inline-block; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--cta-soft); color: var(--ink); padding: .25rem .625rem; border-radius: var(--radius-pill); }

/* ── about split + floating stat card ─────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.split > * { min-width: 0; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 2rem; } }
.collage { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.collage > * { min-width: 0; }
.collage img { border-radius: var(--radius); width: 100%; height: 100%; object-fit: cover; }
.collage .tall { grid-row: span 2; height: 100%; min-height: 280px; }
.stat-float { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.125rem 1.5rem; }
.stat-float .n { font-family: var(--font-body); font-size: 2.25rem; font-weight: 700; color: var(--accent); line-height: 1; }
.stat-float .l { font-weight: 700; font-size: .9375rem; }
@media (min-width: 881px) { .stat-float { position: absolute; right: -12px; bottom: -20px; } }
@media (max-width: 880px) { .stat-float { margin-top: 1rem; } }

.benefit-list li { margin-bottom: 1.25rem; }
.benefit-list h3 { margin-bottom: .25rem; }
.benefit-list p { color: var(--ink-muted); font-size: .9375rem; margin: 0; }

/* ── stat row ─────────────────────────────────────────────────────────── */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 1.5rem; }
.stat-row > * { min-width: 0; }
.stat { text-align: center; }
.stat .n { font-family: var(--font-body); font-size: 2.25rem; font-weight: 700; line-height: 1; color: var(--accent); }
.on-dark .stat .n, .cta-band .stat .n { color: var(--cta); }
.stat .l { font-size: .875rem; color: var(--ink-muted); }
.on-dark .stat .l, .cta-band .stat .l { color: var(--on-dark-muted); }

/* ── logo marquee — full colour on the source, NOT grayscale ──────────── */
.marquee { overflow: hidden; }
.marquee-track { display: flex; gap: 3rem; align-items: center; animation: meridian-marquee 32s linear infinite; width: max-content; }
.marquee-track .mark { height: 80px; display: flex; align-items: center; justify-content: center; padding: 0 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper); font-weight: 700; color: var(--ink-quiet); white-space: nowrap; min-width: 160px; }
@keyframes meridian-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ── FAQ accordion ────────────────────────────────────────────────────── */
.faq-stack { display: grid; gap: 1rem; }
.faq-item { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem 1.5rem; transition: border-color var(--speed); }
.faq-item:hover { border-color: var(--border-hover); }
.faq-item summary { display: flex; gap: 1rem; align-items: baseline; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { margin: .875rem 0 0; color: var(--ink-muted); font-size: .9375rem; }

/* ── reviews ──────────────────────────────────────────────────────────── */
/* The rating header sits on a BLUE ground on the source, not on paper. Probed
   live: the star glyphs compute fill rgb(234,212,0) against a painted
   rgb(2,142,203) ancestor. Rendering this block on white instead would put
   yellow stars on paper at 1.51:1, which the source never does. */
.rating-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-bottom: 2rem; background: var(--accent); color: #fff; border-radius: var(--radius); padding: 1.25rem 1.5rem; }
.rating-head .score { font-family: var(--font-body); font-size: 2.25rem; font-weight: 700; color: #fff; line-height: 1; }
.rating-head .small, .rating-head b { color: #fff; }
.rating-head .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .55); }
.rating-head .btn-outline:hover { color: var(--ink); background: #fff; border-color: #fff; }
.stars { color: var(--cta); letter-spacing: .08em; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.5rem; }
.review-grid > * { min-width: 0; }
.review-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.review-card .quote { color: var(--ink-soft); font-size: .9375rem; margin: 0; }
.review-card .who { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.review-card .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto; }
.review-card .name { font-weight: 700; font-size: .9375rem; }
.review-card .when { font-size: .8125rem; color: var(--ink-muted); }

/* ── CTA band + offices ───────────────────────────────────────────────── */
.cta-band { background: var(--ink); color: var(--on-dark); padding: 56px 0; }
.cta-band h2, .cta-band h3 { color: var(--on-dark); }
.cta-band p { color: var(--on-dark-muted); }
.office-card { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius); padding: 1.25rem; }
.office-card .city { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--on-dark); }
.office-card a { color: var(--cta); text-decoration: none; font-weight: 700; }
.address-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; }
.address-card .city { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin-bottom: .5rem; }
.address-card a { color: var(--accent); font-weight: 700; text-decoration: none; }

/* ── region index ─────────────────────────────────────────────────────── */
.region-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 2rem; }
.region-cols > * { min-width: 0; }
.region-cols h4 { font-family: var(--font-display); font-size: 1rem; margin-bottom: .625rem; }
.city-list li { margin-bottom: .375rem; font-size: .9375rem; }
.city-list a { color: var(--ink-soft); text-decoration: none; transition: color var(--speed); }
.city-list a:hover { color: var(--accent); }

/* ── process steps ────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1.5rem; counter-reset: step; }
.steps > * { min-width: 0; }
.step .n { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; margin-bottom: .75rem; }

/* ── cost band + takeaways ────────────────────────────────────────────── */
.cost-figure { font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); font-weight: 700; color: var(--accent); }
.panel { background: var(--paper-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; }
.panel h3 { margin-bottom: .75rem; }
.panel-accent { background: var(--accent); color: #fff; border-color: transparent; }
.panel-accent h3, .panel-accent li { color: #fff; }

/* ── blog ─────────────────────────────────────────────────────────────── */
.post-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.post-card .body { padding: 1.375rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.post-card .meta { font-size: .8125rem; color: var(--ink-muted); }
.post-card .read-more { margin-top: auto; font-weight: 700; font-size: .875rem; color: var(--accent); text-decoration: none; }
.post-body { max-width: 72ch; }
.post-body h3 { margin-top: 2rem; }

/* ── kit note (author's own copy — exempt from the verbatim gate) ─────── */
.kit-note { color: var(--ink-quiet); font-size: .8125rem; font-style: italic; }
.on-dark .kit-note { color: var(--on-dark-quiet); }
.slot { border: 1px dashed var(--border); border-radius: var(--radius); padding: 1.25rem; text-align: center; }

/* ── doc chrome: ds-nav, catalog, gallery ─────────────────────────────── */
.ds-nav { background: var(--ink); color: var(--on-dark); padding: 1rem 0; }
.ds-nav .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.lockup-text { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; margin: 0; color: var(--on-dark); }
.lockup-text small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .75rem; color: var(--on-dark-quiet); letter-spacing: .08em; text-transform: uppercase; }
.ds-nav .tabs { display: flex; gap: .5rem; flex-wrap: wrap; }
.ds-nav .tab { font-size: .8125rem; font-weight: 600; padding: .5rem 1rem; border-radius: var(--radius-pill); color: var(--on-dark-muted); text-decoration: none; transition: background-color var(--speed), color var(--speed); }
.ds-nav .tab:hover { color: var(--cta); }
.ds-nav .tab.active { background: var(--cta); color: #000; }

.ds-hero { padding: 56px 0 40px; border-bottom: 1px solid var(--border); }
.meta-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 1.5rem; margin-top: 2rem; }
.meta-strip > * { min-width: 0; }
.meta-strip dt { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-quiet); }
.meta-strip dd { margin: .25rem 0 0; font-weight: 600; font-size: .9375rem; }

.door-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1.5rem; }
.door-cards > * { min-width: 0; }
.door { display: block; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; text-decoration: none; color: var(--ink); transition: box-shadow var(--speed), transform var(--speed), border-color var(--speed); }
.door:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--border-hover); }
.door h3 { color: var(--accent); }
.files-list li { padding: .625rem 0; border-bottom: 1px solid var(--border); font-size: .9375rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.files-list .f { font-weight: 700; min-width: 190px; }
.files-list .d { color: var(--ink-muted); }

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 1rem; }
.swatch-grid > * { min-width: 0; }
.swatch { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.swatch .chip { height: 84px; }
.swatch .meta { padding: .625rem .75rem; font-size: .8125rem; }
.swatch .meta b { display: block; }
.type-spec { border-bottom: 1px solid var(--border); padding: 1.25rem 0; }
.type-spec .label { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-quiet); margin-bottom: .375rem; }
.anchor-tile { background: var(--paper-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }

.sx-header { padding: 48px 0 32px; border-bottom: 1px solid var(--border); }
.sx-index { padding: 32px 0; border-bottom: 1px solid var(--border); }
.sx-index .grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: .5rem 1.5rem; }
.sx-index a { font-size: .875rem; color: var(--ink-soft); text-decoration: none; display: block; padding: .25rem 0; }
.sx-index a:hover { color: var(--accent); }
.sx-pattern { padding: 40px 16px; border-bottom: 1px solid var(--border); }
.pattern-meta { max-width: var(--container); margin: 0 auto 1.25rem; display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; }
.pattern-meta > * { min-width: 0; }
@media (max-width: 880px) { .pattern-meta { grid-template-columns: 1fr; gap: .5rem; } }
.pattern-meta .id { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-quiet); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pattern-meta .num { color: var(--accent); }
.pattern-meta .signature { background: var(--cta); color: #000; border-radius: var(--radius-pill); padding: .125rem .5rem; font-size: .625rem; }
.pattern-meta .name { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; margin: 0; }
.pattern-meta .purpose { margin: .25rem 0 0; color: var(--ink-muted); font-size: .9375rem; }
.sx-demo { max-width: var(--container); margin: 0 auto; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; position: relative; padding: 0; }
.demo-label { position: absolute; top: 8px; right: 12px; z-index: 5; font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-quiet); background: rgba(255, 255, 255, .9); border-radius: var(--radius-pill); padding: .125rem .5rem; }

/* The catalog's own nesting is a third padding layer: .sx-pattern > .sx-demo >
   the section's .container renders a pattern in ~197px of a 305px viewport and
   manufactures overflow that exists nowhere else. Zero it under 600px and give
   the padding back to .pattern-meta alone. body prefix = +1 specificity. */
@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-left: 16px; padding-right: 16px; }
  body .sx-header .container, body .sx-index .container { padding-left: 16px; padding-right: 16px; }
}

.pages-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 2rem; }
.pages-gallery > * { min-width: 0; }
.page-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--paper); }
.page-card .frame { height: 420px; overflow: hidden; border-bottom: 1px solid var(--border); }
.page-card iframe { width: 1440px; height: 1400px; border: 0; transform: scale(.3); transform-origin: 0 0; }
.page-card .body { padding: 1.25rem; }
.page-card .body h3 { margin-bottom: .25rem; }
.page-card .body p { color: var(--ink-muted); font-size: .9375rem; margin: 0 0 .875rem; }