/* ==========================================================================
   ACE COOLING, HEATING, PLUMBING & ELECTRICAL — shared tokens + components
   Extracted from acehomeaz.com (captured 2026-07-24; WordPress, Hello
   Elementor child + Elementor Pro + UAEL + FluentForms). Arizona home
   services: HVAC, plumbing, electrical, two regions.

   PHASE 2 CORRECTION — the Phase 1 css-extract pass named #ff6900 the brand
   accent with "62 rendered uses". It is not brand at all: it is WordPress
   core's --wp--preset--color--luminous-vivid-orange, declared once per page
   by Gutenberg and painted ZERO times. The real palette lives in the
   Elementor kit CSS (custom-frontend.min.css / post-3712.css) which the
   crawler never fetched, so it had to be read off the live DOM. Everything
   below is measured from rendered computed styles.

   The identity is a red / navy / sky aviation livery — the logo is a
   saluting flying ace, the voice is "Piloting First-Class Comfort Since '94".
   Grounds run a hard band rhythm: white → red → photo → navy → white →
   #F0F2F3 → navy → blue → red → navy. Nothing is subtle and nothing fades.

   TWO SIGNATURE SHAPES, both invisible to the Phase 1 audit (it looked for
   clip-path/mask/filter and found none, so it reported "zero signature
   shapes" — but both of these are built from gradient and radius):
     1. the two-tone hard-stop button (see .btn)
     2. the capsule card with a welded foot (see .capsule)

   Fonts: Alfa Slab One and Figtree are the two faces that actually render
   (Montserrat is enqueued by the theme and paints zero elements — dropped).
   Both are free Google faces and are the same families the source
   self-hosts, so no substitution and no metric re-tuning.

   TYPE — the one deliberate elevation. The source runs a collapsed ramp:
   h1 23px, h2 24px, h3 18px, all Alfa Slab One 400 uppercase. h2 is LARGER
   than h1, so hierarchy is carried by colour and band position rather than
   size. That flatness is genuinely characteristic, so the ramp below stays
   shallow — but it is scaled to a usable desktop size instead of shipping
   23px headings. Structure and voice transcribed; the scale is ours.
   ========================================================================== */

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

:root {
  /* COLOR — ink. The source body ink is #333 and heading ink is the brand
     navy; 167 of the page's text leaves compute to the navy. */
  --ink: #333333;
  --ink-head: #0d1f43;
  --ink-soft: rgba(51, 51, 51, .78);
  --ink-muted: rgba(51, 51, 51, .62);
  --ink-quiet: rgba(51, 51, 51, .45);   /* doc chrome only — never body copy */

  /* COLOR — brand. Red is the CTA colour and paints ~1.33M px² of the
     homepage; navy paints an all-but-identical 1.33M px². They are equal
     partners, not accent-and-ground. --accent-deep is the dark fifth of the
     signature button; --accent-sky and --accent-blue run the reviews band,
     the stat numerals and the secondary button. */
  --accent: #ee292a;
  --accent-deep: #8f0405;
  --accent-sky: #2fa2da;
  --accent-blue: #155d98;
  --accent-soft: rgba(238, 41, 42, .10);

  /* COLOR — grounds */
  --paper: #ffffff;
  --paper-alt: #f0f2f3;
  --band-dark: #0d1f43;

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

  /* COLOR — rules */
  --border: #e2e5e7;
  --border-mid: #c9ced2;

  /* TYPE — two families, both matching the source */
  --font-display: 'Alfa Slab One', Georgia, serif;
  --font-body: 'Figtree', system-ui, -apple-system, sans-serif;

  /* TYPE — shallow fluid ramp (see header note). Desktop targets at 1440:
     display 54 / h2 38 / h3 26 / h4 20 / stat 50 / body 16 */
  --text-display: clamp(2.05rem, 2.9vw + 1.05rem, 3.375rem);
  --text-h2: clamp(1.6rem, 1.5vw + 1.05rem, 2.375rem);
  --text-h3: clamp(1.25rem, .7vw + 1rem, 1.625rem);
  --text-h4: 1.25rem;
  --text-stat: clamp(2.4rem, 2.4vw + 1.3rem, 3.125rem);
  --text-lede: clamp(1rem, .3vw + .95rem, 1.125rem);

  /* SPACE — the source's dominant grid gap is 24px */
  --gap: 24px;
  --gutter: 2rem;
  --section: 96px;
  --section-sm: 64px;
  --section-lg: 128px;
  --maxw: 1200px;

  /* SHAPE — buttons and inputs are 3px; the capsule card is 40px. There is
     no pill anywhere on the site: a radius census of every painted box
     returns 0px ×57, 50% ×7 (icon discs), 40px ×6, 8px ×4. */
  --radius: 3px;
  --radius-card: 8px;
  --radius-capsule: 40px;

  --shadow: 0 0 5px rgba(0, 0, 0, .2);   /* the source's only box-shadow */

  --t-fast: 140ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

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

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4, .display, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: 400;               /* Alfa Slab One ships a single weight */
  text-transform: uppercase;      /* every heading on the source is uppercase */
  color: var(--ink-head);
  margin: 0 0 18px;
  letter-spacing: 0;
}
.display { font-size: var(--text-display); line-height: 1.12; }
h1        { font-size: var(--text-display); line-height: 1.12; }
h2, .h2   { font-size: var(--text-h2); line-height: 1.2; }
h3, .h3   { font-size: var(--text-h3); line-height: 1.28; }
h4, .h4   { font-size: var(--text-h4); line-height: 1.35; }

p { margin: 0 0 18px; }
p:last-child { margin-bottom: 0; }

.lede { font-size: var(--text-lede); line-height: 1.6; color: var(--ink-soft); }
.lede-lg { font-size: clamp(1.05rem, .45vw + .98rem, 1.25rem); line-height: 1.55; color: var(--ink-soft); }
.small { font-size: .85rem; }
.fine { font-size: .78rem; line-height: 1.5; color: var(--ink-muted); }

/* SIGNATURE — the source's single heading accent: the closing word of
   "Elevated Services For Your Home" is a sky-blue <span> inside an otherwise
   black Alfa Slab heading. It appears exactly once per region homepage and is
   the only coloured word in any heading on the site. Mirrored verbatim and
   registered in the browser-qc ACCENT_ALLOW list as `ace-hl`.

   ONE DEVIATION: the source paints this word in sky #2FA2DA on a white ground,
   which measures 2.88:1 — under the 3.0 floor even for large text. That is a
   source accessibility flaw, and this kit is a template that gets sprinkled
   onto client sites, so the light-ground case uses the brand blue (#155D98,
   5.6:1) and the extracted sky is kept for dark grounds, where it reads
   correctly and is what the source actually uses there. */
.ace-hl { color: var(--accent-blue); }
.hero .ace-hl, .section.dark .ace-hl, .inner-hero .ace-hl,
.campaign-hero .ace-hl, .cta-band.dark .ace-hl { color: var(--accent-sky); }

/* ==== layout ============================================================ */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { width: 100%; max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: var(--section) 0; }
.section.tight { padding: var(--section-sm) 0; }
.section.alt { background: var(--paper-alt); }
.section.dark { background: var(--band-dark); color: var(--on-dark); }
.section.dark h2, .section.dark h3, .section.dark .h2, .section.dark .h3 { color: var(--on-dark); }
.section.dark .lede, .section.dark p { color: var(--on-dark-muted); }

.section-head { max-width: 740px; margin: 0 0 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--gap); }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: var(--gap); }

/* ==== buttons =========================================================== */
/* SIGNATURE — every CTA on the source is a two-tone hard-stop gradient:
   `linear-gradient(90deg, <deep> 20%, <bright> 20%)`. The first fifth of the
   button is a darker block with a razor edge at exactly 20%, reading as a
   painted flag panel welded to the button's left end. Two liveries exist —
   red (#8F0405 / #EE292A) for primary and blue (#155D98 / #2FA2DA) for the
   secondary "Find my location" CTA. Radius is 3px; the label is Alfa Slab
   One 400 uppercase, not the body face. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 400; font-size: 1rem;
  text-transform: uppercase; text-decoration: none; line-height: 1.15;
  padding: 18px 26px; border-radius: var(--radius); border: 0; cursor: pointer;
  color: #fff; background: var(--accent);
  transition: filter var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }

.btn-primary { background-color: var(--accent); background-image: linear-gradient(90deg, var(--accent-deep) 20%, var(--accent) 20%); }
.btn-secondary { background-color: var(--accent-blue); background-image: linear-gradient(90deg, var(--accent-blue) 20%, var(--accent-sky) 20%); }
.btn-ghost {
  background: transparent; background-image: none; color: var(--ink-head);
  border: 2px solid var(--ink-head); padding: 16px 24px;
}
.btn-ghost:hover { background: var(--ink-head); color: #fff; filter: none; }
.btn-on-dark {
  background: transparent; background-image: none; color: #fff;
  border: 2px solid rgba(255, 255, 255, .7);
}
.btn-on-dark:hover { background: #fff; color: var(--ink-head); filter: none; }

.btn-sm { padding: 13px 20px; font-size: .875rem; }
.btn-lg { padding: 21px 34px; font-size: 1.125rem; }
.btn-block { display: flex; width: 100%; }

/* ==== utility bar + red strip + nav ===================================== */
/* The source stacks three bars above the page: a white utility rail with
   both regional numbers, a red textured CTA strip, and the nav proper. */
.utility-bar {
  background: var(--paper); border-bottom: 1px solid var(--border);
  font-size: .875rem; color: var(--ink);
}
.utility-bar .container { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-top: 11px; padding-bottom: 11px; }
.utility-bar .region { display: inline-flex; gap: 6px; }
.utility-bar .region .label { color: var(--ink-soft); }
.utility-bar .region a { color: var(--ink-head); font-weight: 700; text-decoration: none; }
.utility-bar .spacer { margin-left: auto; }
.utility-bar .plan-link { color: var(--accent); font-weight: 600; text-decoration: none; }

.red-strip {
  background-color: var(--accent);
  background-image: url('assets/ace-home-brand/ace-home-band-texture.png');
  color: #fff;
}
.red-strip .container {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px 24px; padding-top: 16px; padding-bottom: 16px; text-align: center;
}
/* The CTA on this band is a plain white link on the source, NOT a filled
   button — and it has to be, because a red button on a red ground shows only
   its dark gradient fifth and reads as a floating block. */
.red-strip .strip-cta {
  font-family: var(--font-display); font-weight: 400; font-size: 1rem;
  text-transform: uppercase; text-decoration: none; color: #fff;
  border-bottom: 2px solid rgba(255, 255, 255, .55); padding-bottom: 2px;
}
.red-strip .strip-cta:hover { border-bottom-color: #fff; }
.red-strip .nums { font-weight: 600; font-size: .95rem; }
.red-strip .nums a { color: #fff; text-decoration: none; }
.red-strip .nums .sep { color: rgba(255, 255, 255, .6); margin: 0 8px; }

.nav { background: var(--paper); position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--border); }
.nav > .container { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.nav .brand-mark { display: flex; align-items: center; flex-shrink: 0; }
.nav .brand-mark img { height: 46px; width: auto; }
.nav .links { display: flex; gap: 22px; margin-right: auto; }
.nav .links a {
  color: var(--ink-head); text-decoration: none; font-weight: 600; font-size: .9rem;
  transition: color var(--t-fast) var(--ease);
}
.nav .links a:hover { color: var(--accent); }
.nav .actions { display: flex; align-items: center; gap: 16px; }
.nav .actions .phone { color: var(--ink-head); text-decoration: none; font-weight: 700; font-size: .95rem; }

/* ==== hero ============================================================== */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background-color: var(--band-dark);
  padding: clamp(72px, 8vw, 132px) 0 clamp(80px, 9vw, 148px);
}
.hero .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--band-dark); opacity: .62; z-index: 1; }
.hero > .container { position: relative; z-index: 2; }
.hero h1 { color: #fff; max-width: 16ch; }
.hero .lede { color: var(--on-dark-muted); max-width: 60ch; margin-bottom: 30px; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* The source pins a star-rating lockup under the hero copy and a shaped SVG
   rule between the hero and the band below it. */
.rating-badge { display: flex; align-items: center; gap: 12px; margin-top: 30px; }
.rating-badge img { height: 34px; width: auto; }
.rating-badge .stars { color: var(--accent-sky); font-size: 1.1rem; letter-spacing: 2px; }
.rating-badge .txt { font-size: .9rem; color: var(--on-dark-muted); }
.hero-divider { position: relative; z-index: 2; margin: 34px 0 0; height: 42px; width: min(360px, 80%); }

/* Inner pages use a shorter navy hero with a shaped pre-head rule. */
.inner-hero { background: var(--band-dark); color: #fff; padding: clamp(56px, 6vw, 92px) 0 clamp(56px, 6vw, 92px); }
.inner-hero h1 { color: #fff; }
.inner-hero .lede { color: var(--on-dark-muted); max-width: 62ch; }
/* The source puts a pill badge reading "24/7 EMERGENCY SERVICE AVAILABLE"
   above every inner-page h1, shipped as an SVG with the text baked in. It is
   dropped: it is the eyebrow/kicker device the house format bans outright, and
   because the copy lives inside the SVG it is invisible to the verbatim gate —
   an unaudited service claim riding onto every page as an image. The claim
   itself survives verbatim in the capability-checklist pattern. */

/* ==== lead form band ==================================================== */
.form-band { background: var(--band-dark); color: #fff; padding: var(--section) 0; }
.form-band .inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 48px; align-items: start; }
.form-band h2 { color: #fff; }
.form-band .lede { color: var(--on-dark-muted); }

.form-card { background: var(--paper); color: var(--ink); border-radius: var(--radius-card); padding: 32px 30px 34px; }
.form-card .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-card label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
.form-card .field { margin-bottom: 16px; }
.form-card input[type="text"], .form-card input[type="tel"], .form-card input[type="email"],
.form-card select, .form-card textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--border-mid); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font: inherit; font-size: .95rem;
}
.form-card textarea { min-height: 108px; resize: vertical; }
.form-card .consent { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 18px; }
.form-card .consent input { accent-color: var(--accent); margin: 4px 0 0; width: auto; flex-shrink: 0; }
.form-card .consent .fine a { color: var(--accent); }

/* ==== capsule cards ===================================================== */
/* SIGNATURE — the service card is a 40px-radius white capsule with a
   full-bleed CTA welded to its bottom edge. The button carries
   `border-radius: 0 0 40px 40px` so its lower corners finish the card's
   curve exactly; there is no gap and no shadow. The card head sits on a
   repeating star motif lifted from the source. */
.capsule {
  background: var(--paper); border-radius: var(--radius-capsule);
  overflow: hidden; display: flex; flex-direction: column;
}
.capsule .head {
  background-image: url('assets/ace-home-brand/ace-home-stars-head.png');
  background-repeat: repeat-x; background-position: center top; background-size: auto 100%;
  background-color: var(--band-dark);
  padding: 26px 30px; text-align: center;
}
.capsule .head h3 { color: #fff; margin: 0; }
.capsule .body { padding: 26px 30px 30px; flex: 1; }
.capsule .body ul { list-style: none; margin: 0; padding: 0; }
.capsule .body li { padding: 7px 0; border-bottom: 1px solid var(--border); font-size: .95rem; }
.capsule .body li:last-child { border-bottom: 0; }
.capsule .body li a { color: var(--ink-head); text-decoration: none; font-weight: 600; }
.capsule .body li a:hover { color: var(--accent); }
.capsule .foot {
  display: flex; align-items: center; justify-content: center; text-align: center;
  /* the solid colour is the floor, the gradient is the signature on top of it —
     without the fallback this is white text on no painted ground at all */
  background-color: var(--accent);
  background-image: linear-gradient(90deg, var(--accent-deep) 20%, var(--accent) 20%);
  color: #fff; font-family: var(--font-display); font-weight: 400; font-size: .95rem;
  text-transform: uppercase; text-decoration: none; padding: 18px 20px;
  border-radius: 0 0 var(--radius-capsule) var(--radius-capsule);
  transition: filter var(--t-fast) var(--ease);
}
.capsule .foot:hover { filter: brightness(1.08); }

/* ==== plain cards ======================================================= */
.card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 28px 26px 30px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-soft); margin: 0; }
.card.on-alt { border-color: transparent; box-shadow: var(--shadow); }

/* ==== stat counters ===================================================== */
/* The source's counters are Alfa Slab One 50px in the brand blue, with the
   label above the numeral rather than below it. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--gap); }
.stat { text-align: center; }
.stat .label { font-size: .95rem; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.stat .num { font-family: var(--font-display); font-weight: 400; font-size: var(--text-stat); line-height: 1; color: var(--accent-blue); }

/* ==== bands ============================================================= */
/* Three distinct CTA bands run the source: a light one on the alt ground, a
   navy one carrying the secondary blue button, and the red city-list band. */
.cta-band { background: var(--paper-alt); padding: var(--section-sm) 0; }
.cta-band .inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.cta-band h2 { margin: 0; }
.cta-band.dark { background: var(--band-dark); }
.cta-band.dark h2 { color: #fff; }

.reviews-band { background: var(--accent-blue); color: #fff; padding: 42px 0; }
.reviews-band .inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.reviews-band h2 { color: #fff; margin: 0; }

.cities-band { background: var(--accent); color: #fff; padding: var(--section-sm) 0; }
.cities-band h2 { color: #fff; }
.cities-band .city-cols { columns: 4; column-gap: 32px; list-style: none; margin: 0; padding: 0; }
.cities-band .city-cols li { padding: 5px 0; font-weight: 600; font-size: .95rem; break-inside: avoid; }
.cities-band .city-cols li a { color: #fff; text-decoration: none; }
.cities-band .city-cols li a:hover { text-decoration: underline; }

/* ==== media split ======================================================= */
.media-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 52px; align-items: center; }
.media-split .media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-card); aspect-ratio: 3 / 2; }
.media-split.flip .media { order: 2; }

/* ==== region split ====================================================== */
.region-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 30px 28px 32px; }
.region-card h3 { margin-bottom: 12px; }
.region-card p { color: var(--ink-soft); margin-bottom: 20px; }

/* ==== service rail (inner-page sidebar) ================================= */
.rail { background: var(--paper-alt); border-radius: var(--radius-card); padding: 26px 24px 28px; }
.rail h3 { font-size: 1.15rem; margin-bottom: 14px; }
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail li { border-bottom: 1px solid var(--border-mid); }
.rail li:last-child { border-bottom: 0; }
.rail li a { display: block; padding: 11px 0; color: var(--ink-head); text-decoration: none; font-weight: 600; font-size: .95rem; }
.rail li a:hover { color: var(--accent); }

/* ==== offer card ======================================================== */
/* Variable-value by design: the source renders this same card as "$100 Off +
   Free Estimate", "$49 A/C Repair Diagnostic" and "$63 Drain Clear" depending
   on page. The value block is the slot, never a hardcoded number. */
.offer-card { background: var(--band-dark); color: #fff; border-radius: var(--radius-card); padding: 28px 26px 30px; text-align: center; }
.offer-card .value { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.6rem; line-height: 1.15; color: var(--accent-sky); margin-bottom: 10px; }
.offer-card .terms { color: var(--on-dark-muted); font-size: .95rem; margin-bottom: 20px; }
.offer-card .disclaimer { font-size: .72rem; line-height: 1.45; color: var(--on-dark-quiet); margin: 16px 0 0; }

/* ==== checklists ======================================================== */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 4px 28px; }
.checklist li { position: relative; padding: 8px 0 8px 26px; font-size: .95rem; border-bottom: 1px solid var(--border); }
.checklist li::before { content: "\2713"; position: absolute; left: 0; top: 8px; color: var(--accent); font-weight: 700; }
.checklist.on-dark li { border-bottom-color: rgba(255, 255, 255, .18); color: var(--on-dark-muted); }
.checklist.on-dark li::before { color: var(--accent-sky); }

/* ==== FAQ accordion ===================================================== */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: 1.05rem; line-height: 1.35; color: var(--ink-head);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 8px; top: 16px; font-size: 1.6rem; color: var(--accent); line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq .answer { padding: 0 40px 22px 0; color: var(--ink-soft); }

/* ==== Q&A long-form stack =============================================== */
.qa-stack > .qa { padding: 30px 0; border-bottom: 1px solid var(--border); }
.qa-stack > .qa:last-child { border-bottom: 0; }
.qa-stack h2 { margin-bottom: 14px; }
.qa-stack ul { color: var(--ink-soft); padding-left: 20px; }
.qa-stack li { margin-bottom: 8px; }

/* ==== blog ============================================================== */
.post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--gap); }
.post-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; }
.post-card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.post-card .body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.post-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.post-card .date { font-size: .82rem; color: var(--ink-muted); margin-bottom: 10px; }
.post-card p { color: var(--ink-soft); font-size: .95rem; margin-bottom: 16px; }
.post-card .more { margin-top: auto; color: var(--accent); font-weight: 700; text-decoration: none; font-size: .9rem; }

.article { max-width: 760px; }
.article .meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .88rem; color: var(--ink-muted); margin-bottom: 26px; }
.article img { border-radius: var(--radius-card); margin-bottom: 28px; }
.article h2 { margin-top: 36px; }
.article ul { color: var(--ink-soft); padding-left: 20px; }
.article li { margin-bottom: 10px; }

/* ==== gallery =========================================================== */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); width: 100%; }

/* ==== partner logo rail ================================================= */
.partner-rail { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px 44px; }
.partner-slot {
  display: flex; align-items: center; justify-content: center;
  min-width: 140px; height: 76px; padding: 12px 18px;
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-card);
  color: var(--ink-muted); font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-align: center;
}

/* ==== campaign landing ================================================== */
.campaign-hero { background: var(--band-dark); color: #fff; padding: clamp(64px, 7vw, 108px) 0; text-align: center; }
.campaign-hero h1 { color: #fff; }
/* Sits BELOW the h1, not above it — both because the source orders it that way
   and because a small line above a heading is the eyebrow/kicker device the
   house format bans outright. */
.campaign-hero .campaign-sub { font-family: var(--font-display); text-transform: uppercase; color: var(--accent-sky); font-size: 1.1rem; margin: 0; }
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--gap); }
.steps .step { position: relative; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 28px 26px 30px; }
.steps .step::before {
  counter-increment: step; content: counter(step);
  font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--accent);
  display: block; margin-bottom: 12px;
}

/* ==== interactive tool ================================================== */
.tool-card { background: var(--paper-alt); border-radius: var(--radius-card); padding: 34px 30px 36px; text-align: center; }
.tool-card .q { font-family: var(--font-display); text-transform: uppercase; font-size: 1.25rem; line-height: 1.3; color: var(--ink-head); margin-bottom: 10px; }
.tool-card .hint { color: var(--ink-soft); margin-bottom: 26px; }
.tool-card .choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 18px; align-items: center; }
.tool-card .choice { background: var(--paper); border: 1px solid var(--border-mid); border-radius: var(--radius-card); padding: 24px 20px 26px; }
.tool-card .choice h3 { font-size: 1.05rem; margin-bottom: 14px; }
.tool-card .or { font-weight: 700; color: var(--ink-muted); }

/* ==== contact block ===================================================== */
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { padding: 12px 0; border-bottom: 1px solid var(--border); font-size: .98rem; }
.contact-list li:last-child { border-bottom: 0; }
.contact-list a { color: var(--ink-head); font-weight: 700; text-decoration: none; }

/* ==== footer ============================================================ */
.footer { background: var(--band-dark); color: var(--on-dark-muted); padding: var(--section-sm) 0 0; }
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 44px; }
.footer .brand img { height: 74px; width: auto; margin-bottom: 18px; }
.footer .new-look { font-family: var(--font-display); text-transform: uppercase; color: #fff; font-size: 1.1rem; margin-bottom: 14px; }
.footer .roc { font-size: .82rem; line-height: 1.7; color: var(--on-dark-quiet); }
.footer h4 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { padding: 5px 0; font-size: .92rem; }
.footer a { color: var(--on-dark-muted); text-decoration: none; }
.footer a:hover { color: #fff; }
.footer .addr { font-size: .85rem; line-height: 1.7; color: var(--on-dark-muted); }
.footer .legal {
  border-top: 1px solid rgba(255, 255, 255, .16); padding: 20px 0 24px;
  font-size: .82rem; color: var(--on-dark-quiet);
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
}
.footer .legal a { color: var(--on-dark-quiet); }
.ada-note { background: var(--band-dark); color: var(--on-dark-quiet); padding: 0 0 40px; font-size: .8rem; line-height: 1.7; }
.ada-note h4 { color: var(--on-dark-muted); font-size: .95rem; margin-bottom: 10px; }
.ada-note a { color: var(--on-dark-muted); }

/* ==========================================================================
   SHOWCASE CHROME — ds-nav, sections catalog, pages gallery. Kept visually
   quiet so the brand sections are the only loud thing on the page.
   ========================================================================== */
.ds-nav {
  position: sticky; top: 0; z-index: 90; background: var(--band-dark); color: #fff;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 14px; padding: 16px 32px; border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.ds-nav .lockup-text { margin: 0; font-family: var(--font-display); text-transform: uppercase; font-size: 1rem; color: #fff; }
.ds-nav .lockup-text small { display: block; font-family: var(--font-body); text-transform: none; font-size: .78rem; font-weight: 500; color: var(--on-dark-muted); margin-top: 3px; }
.ds-nav .tabs { display: flex; flex-wrap: wrap; gap: 20px; }
.ds-nav .tab { color: var(--on-dark-muted); text-decoration: none; font-size: .88rem; font-weight: 600; }
.ds-nav .tab:hover, .ds-nav .tab.active { color: #fff; }

.ds-hero { background: var(--paper-alt); padding: 56px 0 48px; }
.ds-hero h1 { margin-bottom: 14px; }
.ds-landing-hero { position: relative; overflow: hidden; background-color: var(--band-dark); padding: 92px 0; }
.ds-landing-hero .photo { position: absolute; inset: 0; opacity: .3; }
.ds-landing-hero .photo img { width: 100%; height: 100%; object-fit: cover; }
.ds-landing-hero .container { position: relative; z-index: 2; }
.ds-landing-hero .display { color: #fff; }
.ds-landing-hero .lede { color: var(--on-dark-muted); max-width: 76ch; }
.ds-landing-hero .meta-strip .k { color: var(--on-dark-quiet); }
.ds-landing-hero .meta-strip .v { color: #fff; }

.spec-list { margin: 0; }
.spec-list dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); margin-top: 18px; }
.spec-list dt:first-child { margin-top: 0; }
.spec-list dd { margin: 5px 0 0; color: var(--ink-soft); font-size: .95rem; }
.chip-tag { background: var(--paper); border: 1px solid var(--border-mid); border-radius: 999px; padding: 5px 13px; font-size: .78rem; font-weight: 600; color: var(--ink-head); }
.meta-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 20px; margin-top: 34px; }
.meta-strip .k { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); margin-bottom: 4px; }
.meta-strip .v { font-weight: 600; color: var(--ink-head); font-size: .95rem; }

.door-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--gap); }
.door {
  display: block; text-decoration: none; background: var(--paper);
  border: 1px solid var(--border); border-radius: var(--radius-card); padding: 28px 26px 30px;
  transition: border-color var(--t-fast) var(--ease);
}
.door:hover { border-color: var(--accent); }
.door h3 { margin-bottom: 8px; }
.door p { color: var(--ink-soft); font-size: .93rem; margin: 0; }

.files-list { border-top: 1px solid var(--border); }
.files-list > div { display: grid; grid-template-columns: 260px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: .92rem; }
.files-list code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88rem; color: var(--ink-head); }
.files-list .what { color: var(--ink-soft); }

/* 340px, not 260px: Alfa Slab One is wide, and a single long word set in it at
   h3 size ("characterizations") has a 321px min-content. A 260px track let two
   columns survive to 600px and the heading punched straight out of its column. */
.char-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: var(--gap); }

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 16px; }
.swatch .chip { height: 92px; border-radius: var(--radius-card); border: 1px solid var(--border); }
.swatch .name { font-weight: 700; font-size: .88rem; margin-top: 10px; color: var(--ink-head); }
.swatch .hex { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; color: var(--ink-muted); }

.type-spec { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--border); align-items: baseline; }
.type-spec .note { font-size: .82rem; color: var(--ink-muted); line-height: 1.5; }

.chip-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.anchor-tile { background: var(--paper-alt); border-radius: var(--radius-card); padding: 26px 24px 28px; }
.anchor-tile h3 { font-size: 1.05rem; margin-bottom: 10px; }
.anchor-tile p { font-size: .92rem; color: var(--ink-soft); margin: 0; }

/* sections.html catalog shell */
.sx-header { position: sticky; top: 0; z-index: 80; background: var(--band-dark); color: #fff; padding: 22px 32px 20px; }
.sx-header h1 { color: #fff; margin: 0 0 6px; font-size: 1.2rem; }
/* The sublabel differentiates by family, weight and size — never by colour. A
   differently-coloured span inside a heading is the exact thing the heading-
   accent gate exists to catch, and chrome should not be the one exception. */
.sx-header h1 small { font-family: var(--font-body); text-transform: none; font-weight: 500; font-size: .82rem; margin-left: 10px; }
.sx-header p { margin: 0; font-size: .88rem; color: var(--on-dark-muted); }
/* `min-width: 0` on the grid children is load-bearing, not defensive. Grid
   items default to `min-width: auto`, so a track sized `1fr` still inflates to
   its item's min-content — the catalog's monospace pattern ids pushed the
   collapsed single track to 420px inside a 375px viewport, and every
   descendant inherited that width. Letting the items shrink below min-content
   is what keeps the phone layout inside the frame. */
.sx-body { display: grid; grid-template-columns: 280px 1fr; align-items: start; }
.sx-body > * { min-width: 0; }
.sx-pattern, .pattern-meta, .pattern-meta > *, .sx-demo, .sx-index .grid { min-width: 0; }
.sx-index { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; padding: 24px; border-right: 1px solid var(--border); }
.sx-index h2 { font-size: .95rem; margin-bottom: 12px; }
.sx-index .grid { display: flex; flex-direction: column; gap: 2px; }
.sx-index a { color: var(--ink-soft); text-decoration: none; font-size: .84rem; padding: 5px 0; border-bottom: 1px solid var(--border); }
.sx-index a:hover { color: var(--accent); }
.sx-main { padding: 28px 32px 96px; }
.sx-pattern { padding: 34px 0 42px; border-bottom: 1px solid var(--border); }
.pattern-meta { display: grid; grid-template-columns: 220px 1fr; gap: 20px; margin-bottom: 20px; align-items: start; }
.pattern-meta .id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pattern-meta .id .num { font-weight: 700; color: var(--ink-head); }
.pattern-meta .id .signature { background: var(--accent-soft); color: var(--accent-deep); border-radius: 3px; padding: 3px 7px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; }
.pattern-meta .name { font-weight: 700; color: var(--ink-head); margin: 0 0 4px; }
.pattern-meta .purpose { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.sx-demo { position: relative; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 28px; overflow: hidden; }
.sx-demo .demo-label { position: absolute; top: 8px; right: 12px; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-quiet); }

/* pages.html gallery */
.pages-gallery { padding: 40px 32px 96px; }
.pages-gallery .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 32px; }
.page-card { border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: var(--paper); }
.page-card .frame { height: 420px; overflow: hidden; border-bottom: 1px solid var(--border); }
.page-card iframe { width: 1280px; height: 1600px; border: 0; transform: scale(.42); transform-origin: 0 0; }
.page-card .cap { padding: 18px 20px 20px; }
.page-card .cap h3 { font-size: 1.05rem; margin-bottom: 6px; }
.page-card .cap p { font-size: .9rem; color: var(--ink-soft); margin: 0 0 12px; }
.page-card .cap a { color: var(--accent); font-weight: 700; text-decoration: none; font-size: .88rem; }

/* ==========================================================================
   RESPONSIVE — descending width order. Equal-specificity rules resolve by
   source order, so 880 must precede 768 must precede 560.
   ========================================================================== */
@media (max-width: 880px) {
  .form-band .inner, .media-split, .sx-body, .footer .cols { grid-template-columns: 1fr; }
  .form-band .inner { gap: 32px; }
  .media-split { gap: 32px; }
  .media-split.flip .media { order: 0; }
  .footer .cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .cities-band .city-cols { columns: 3; }
  .pattern-meta, .type-spec, .files-list > div { grid-template-columns: 1fr; gap: 8px; }
  .sx-index { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--border); }
  .page-card .frame { height: 320px; }
  .page-card iframe { transform: scale(.32); }
}

@media (max-width: 768px) {
  /* The shared parent sets `.hero h1 { clamp(34px, 9vw, 52px) }`, which is right
     for a short headline. This one is 45 characters of heavy uppercase slab and
     ran to five lines at 375, pushing the lede and the CTA off-screen. Alfa Slab
     One is far wider per character than the sans faces that rule was tuned on.
     `.hero .container h1` (0,2,1) is required — a bare `.hero h1` ties the
     shared rule on specificity and loses on source order, because
     mobile-responsive.css is linked after this file. */
  .hero .container h1 { font-size: clamp(25px, 6.6vw, 52px); line-height: 1.1; }
  .nav .actions { display: none; }
  .nav > .container { min-height: 68px; }
  .nav .brand-mark img { height: 38px; }
  .utility-bar .container { justify-content: center; text-align: center; }
  .utility-bar .spacer { margin-left: 0; }
  .form-card { padding: 24px 22px 26px; }
  .capsule .body, .capsule .head { padding-left: 22px; padding-right: 22px; }
  .cta-band .inner, .reviews-band .inner { flex-direction: column; align-items: flex-start; }
  .cities-band .city-cols { columns: 2; }
}

@media (max-width: 560px) {
  .form-card .row { grid-template-columns: 1fr; }
  .footer .cols { grid-template-columns: 1fr; gap: 28px; }
  .cities-band .city-cols { columns: 2; }
  .partner-slot { min-width: 118px; height: 66px; }
}