/* ==========================================================================
   ARIZONA ROOFERS — shared design tokens + components
   Extracted from arizonaroofers.com (captured 2026-07-24; WordPress, Astra +
   Spectra/UAGB, self-hosted /cf-fonts/). Phoenix roofing contractor.

   The typographic signature is Archivo run at BOTH axis extremes: weight 100
   for the 72px hero display, weight 800 for the stat numerals. The hero
   hierarchy is inverted — the semantic h1 is an 18px Work Sans label with
   -1px tracking, and the visual headline is an h2.

   Grounds are white / near-white with exactly two accent bands: the solid
   #FE0000 "GET A FREE QUOTE!" marquee and the #1F0A0C mission band above the
   footer. Buttons are 6px, cards square-to-6px. There are no pills anywhere:
   the declared 9999px radius renders zero times on the live site.

   Fonts: Archivo, Work Sans and Inter are all free Google faces and are the
   same families the source self-hosts, so no metric re-tuning was needed.
   ========================================================================== */

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

:root {
  /* COLOR — ink. Two inks: body ink and a near-black with a red cast used
     for every heading. Both extracted from rendered computed styles. */
  --ink: #1c1b1b;
  --ink-head: #1f0a0c;
  --ink-soft: rgba(28, 27, 27, .78);
  --ink-muted: rgba(28, 27, 27, .62);
  --ink-quiet: rgba(28, 27, 27, .42);   /* doc chrome only — never body copy */

  /* COLOR — brand red. #E11B14 paints all 14 rendered buttons; #FE0000 is
     Astra's --ast-global-color-5 and paints only the marquee band. */
  --accent: #e11b14;
  --accent-deep: #c00802;
  --accent-hot: #fe0000;
  --accent-soft: rgba(225, 27, 20, .10);

  /* COLOR — grounds */
  --paper: #ffffff;
  --paper-alt: #f9f9f9;
  --band-dark: #1f0a0c;

  /* COLOR — on-dark text */
  --on-dark: #ffffff;
  --on-dark-soft: #f2e9e9;              /* the hero label's extracted colour */
  --on-dark-muted: rgba(255, 255, 255, .80);

  /* COLOR — rules */
  --border: #e6e4e4;
  --border-mid: #d2cfcf;

  /* TYPE — three families, all matching the source */
  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-head: 'Work Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* TYPE — fluid scale. Desktop targets measured at 1440:
     display 72 / h2 48 / stat 48 / h3 24 / label 18 / body 16 */
  --text-display: clamp(2.6rem, 4.6vw + 1rem, 4.5rem);
  --text-h2: clamp(1.85rem, 2.2vw + 1.1rem, 3rem);
  --text-h3: clamp(1.2rem, .8vw + 1rem, 1.5rem);
  --text-stat: clamp(2.2rem, 2.4vw + 1.2rem, 3rem);
  --text-label: 1.125rem;
  --text-body-lg: clamp(1.02rem, .35vw + .95rem, 1.15rem);
  --text-body: 1rem;
  --text-meta: .85rem;

  /* LAYOUT */
  --container: 1220px;
  --container-narrow: 860px;
  --gutter: 32px;
  --section: 96px;
  --gap: 24px;

  /* RADII — buttons 6px, cards square-to-6px. No pill token exists. */
  --radius-sm: 3px;
  --radius: 6px;

  /* SHADOW */
  --shadow-card: 0 1px 2px rgba(31, 10, 12, .05), 0 14px 32px -18px rgba(31, 10, 12, .28);
  --shadow-card-hover: 0 2px 4px rgba(31, 10, 12, .07), 0 26px 48px -22px rgba(31, 10, 12, .36);

  /* MOTION */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: 150ms;
  --t-base: 280ms;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--font-head); font-weight: 400; color: var(--ink-head);
  line-height: 1.3; margin: 0 0 .5em;
}
h2, .h2 { font-size: var(--text-h2); line-height: 1.3; }
h3, .h3 { font-size: var(--text-h3); font-weight: 600; line-height: 1.35; }
h4 { font-size: 1.05rem; font-weight: 600; }

/* SIGNATURE — the ultra-thin Archivo display. 72px at weight 100 is the
   single loudest thing on the source site. */
.display {
  font-family: var(--font-display); font-weight: 100;
  font-size: var(--text-display); line-height: 1.02;
  letter-spacing: -.01em; margin: 0 0 .34em; color: var(--ink-head);
  text-wrap: balance;
}
/* SIGNATURE — the source emphasises the lead phrase with <strong> INSIDE the
   weight-100 display ("<strong>Top 1%</strong> of North American Roofers"),
   putting Archivo's two axis extremes on one line. Weight, never colour. */
.display strong { font-weight: 700; }

/* SIGNATURE — the inverted hero hierarchy: the semantic h1 is a small
   18px Work Sans label with -1px tracking sitting ABOVE the display h2. */
.hero-label {
  font-family: var(--font-head); font-weight: 400; font-size: var(--text-label);
  line-height: 1.1; letter-spacing: -1px; color: var(--on-dark-soft);
  margin: 0 0 18px; text-transform: uppercase;
}
.hero-label.on-light { color: var(--accent-deep); }
/* The shared parent mobile-responsive.css carries `.hero h1 { font-size:
   clamp(34px, 9vw, 52px) }` — correct for every other kit, where the h1 IS the
   hero headline. This brand inverts that: the h1 is the small label ABOVE the
   display. Left alone, the label rendered at 34px against a 41px display at
   375px (ratio .82 vs the intended .25) and the inversion collapsed. `.hero
   .hero-label` (0,2,0) outranks `.hero h1` (0,1,1) regardless of load order. */
.hero .hero-label { font-size: var(--text-label); line-height: 1.1; }

.lede { font-size: var(--text-body-lg); color: var(--ink-soft); max-width: 66ch; margin: 0 0 1.3em; }
.fine { font-size: .78rem; line-height: 1.6; color: var(--ink-muted); margin: 14px 0 0; }

.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 20px; }
.mt-lg { margin-top: 48px; }

/* ==== buttons — 6px, never pills ====================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 500; font-size: 1rem; line-height: 1;
  padding: 18px 28px; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); color: #fff; }
.btn-dark { background: var(--band-dark); color: #fff; }
.btn-dark:hover { background: var(--accent-deep); }
.btn-outline { background: transparent; color: var(--ink-head); border-color: var(--border-mid); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn-outline.on-dark { color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-outline.on-dark:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .1); }
.btn-sm { padding: 12px 20px; font-size: .92rem; }
.btn-block { width: 100%; }

.textlink {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
  font-size: .95rem; color: var(--accent-deep); text-decoration: none;
}
.textlink:hover { text-decoration: underline; }

/* ==== nav — dark bar. The logo wordmark is white-on-transparent, so it
   never goes on a light ground. Pattern D shape for the shared mobile layer. */
.nav {
  background: var(--band-dark); position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.nav > .container { display: flex; align-items: center; gap: 30px; min-height: 78px; }
.nav .brand-mark { display: flex; align-items: center; flex-shrink: 0; }
.nav .brand-mark img { height: 34px; width: auto; }
.nav .links { display: flex; gap: 24px; margin-right: auto; }
.nav .links a {
  color: var(--on-dark-muted); text-decoration: none; font-weight: 500; font-size: .95rem;
  transition: color var(--t-fast) var(--ease);
}
.nav .links a:hover { color: #fff; }
.nav .actions { display: flex; align-items: center; gap: 18px; }
.nav .actions .phone { color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem; }

/* ==== sections ========================================================== */
.section { padding: var(--section) 0; }
.section.tight { padding: 64px 0; }
.section.alt { background: var(--paper-alt); }

/* Dark band. Scoped narrowly on purpose: a broad `.band-dark p` rule reaches
   into any light-ground descendant (card, pill, callout) and turns its copy
   white on white. Register every light-ground component placed inside a dark
   band in the override block at the bottom of this file. */
.band-dark { background-color: var(--band-dark); color: var(--on-dark-muted); }
.band-dark > .container > h2,
.band-dark > .container > .display,
.band-dark > .container > p { color: #fff; }

/* ==== 01 hero — full-bleed photo + .3 scrim + inline lead form ========= */
/* The solid background-color is load-bearing: the contrast walker resolves
   painted grounds only, and a gradient/photo paints nothing. */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background-color: var(--band-dark);
  padding: clamp(72px, 9vw, 140px) 0 clamp(88px, 11vw, 180px);
}
.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: #000; opacity: .3; z-index: 1; }
.hero > .container { position: relative; z-index: 2; }
.hero .display { color: #fff; }
.hero .lede { color: rgba(255, 255, 255, .88); max-width: 54ch; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 52px; align-items: center; }

/* the WPForms step-1 card that sits in the hero */
.lead-card {
  background: var(--paper); color: var(--ink); border-radius: var(--radius);
  padding: 30px 30px 32px; box-shadow: var(--shadow-card);
}
.lead-card h2 { font-size: 1.5rem; margin: 0 0 6px; color: var(--ink-head); }
.lead-card .step-label { font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-muted); margin: 0 0 16px; }
.lead-card form { display: grid; gap: 12px; }
.lead-card .opt {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: .95rem; color: var(--ink); cursor: pointer;
}
.lead-card .opt:hover { border-color: var(--accent); }
.lead-card .opt input { accent-color: var(--accent); width: auto; margin: 0; }
/* the warranty/estimate lead cards use bare text fields, not the .form-card shell —
   without these they fall back to the UA default width (147px at 375, under the 150px floor) */
.lead-card form > div > label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
.lead-card input[type="text"], .lead-card input[type="tel"], .lead-card input[type="email"],
.lead-card select, .lead-card textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font: inherit; font-size: .95rem;
}
.lead-card input[type="text"]:focus, .lead-card input[type="tel"]:focus,
.lead-card input[type="email"]:focus, .lead-card select:focus, .lead-card textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.lead-card .reassure { font-size: .82rem; color: var(--ink-soft); margin: 4px 0 0; text-align: center; }
.lead-card .fine { border-top: 1px solid var(--border); padding-top: 14px; }

/* SIGNATURE — in the hero the lead card is NOT a white panel: the source paints
   it rgba(28,9,11,.77) directly over the team photo, square corners, 20px pad.
   Alpha .77 is above the contrast walker's .5 "painted" threshold, so white
   text on it resolves correctly without a second solid base. */
.hero .lead-card {
  background: rgba(28, 9, 11, .77); border-radius: 0; box-shadow: none; padding: 20px;
  color: #fff;
}
.hero .lead-card h2 { color: #fff; }
.hero .lead-card .step-label { color: var(--on-dark-muted); }
.hero .lead-card .opt { border-color: rgba(255, 255, 255, .26); color: #fff; }
.hero .lead-card .opt:hover { border-color: var(--accent); }
.hero .lead-card .reassure { color: var(--on-dark-muted); }
.hero .lead-card .fine { border-top-color: rgba(255, 255, 255, .2); color: var(--on-dark-muted); }

/* Site chrome the source runs above the nav and pinned to the foot of the page. */
.sticky-utility {
  background: var(--paper); color: var(--ink); font-size: .88rem;
  padding: 13px 0; text-align: center; border-bottom: 1px solid var(--border);
}
.sticky-utility a { color: var(--ink); font-weight: 600; text-decoration: none; }
.sticky-utility .sep { color: var(--ink-soft); margin: 0 10px; }
.sticky-cta {
  position: sticky; bottom: 0; z-index: 40;
  background: var(--accent-hot); color: #fff;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 20px; padding: 14px 20px; text-align: center;
}
.sticky-cta .label { font-weight: 600; }
.sticky-cta .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ==== 02 trust-badge strip ============================================ */
.badge-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 44px; }
.badge-slot {
  display: grid; place-items: center; min-width: 128px; height: 76px; padding: 10px 18px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper);
}
.badge-slot span { font-size: .82rem; font-weight: 600; color: var(--ink-muted); text-align: center; }

/* ==== 04 stats bar — Archivo 800, the other axis extreme =============== */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: var(--gap); }
.stat { padding: 8px 0; }
.stat .num {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-stat); line-height: 1.05; color: var(--ink); letter-spacing: -.02em;
}
.stat .lbl { display: block; margin-top: 6px; font-size: .95rem; color: var(--ink-soft); }
.band-dark .stat .num { color: #fff; }
.band-dark .stat .lbl { color: var(--on-dark-muted); }

/* ==== 05 services grid ================================================ */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--gap); }
.svc-card {
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.svc-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.svc-card .media { aspect-ratio: 4/3; overflow: hidden; background: var(--paper-alt); }
.svc-card .media img { width: 100%; height: 100%; object-fit: cover; }
.svc-card .body { padding: 24px 26px 28px; }
.svc-card h3 { margin: 0 0 8px; }
.svc-card p { margin: 0 0 14px; font-size: .95rem; color: var(--ink-soft); }

/* ==== 06 service areas ================================================ */
.areas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.city-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.city-list a {
  display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 14px; font-size: .88rem; font-weight: 500; color: var(--ink);
  text-decoration: none; background: var(--paper);
}
.city-list a:hover { border-color: var(--accent); color: var(--accent-deep); }

/* ==== 07 residential / commercial split =============================== */
.split-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.solution-card {
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--paper); display: flex; flex-direction: column;
}
.solution-card .media { aspect-ratio: 16/9; overflow: hidden; background: var(--paper-alt); }
.solution-card .media img { width: 100%; height: 100%; object-fit: cover; }
.solution-card .body { padding: 30px 32px 34px; }
.solution-card h3 { margin: 0 0 10px; }
.solution-card p { color: var(--ink-soft); margin: 0 0 18px; }
.tick-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.tick-list li { position: relative; padding-left: 26px; font-size: .95rem; color: var(--ink); }
.tick-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.band-dark .tick-list li { color: var(--on-dark-muted); }

/* ==== 08 process — literal circled unicode numerals, not CSS counters == */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: var(--gap); }
.step { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 28px; }
.step .glyph {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: 2.4rem; line-height: 1; color: var(--accent); margin-bottom: 14px;
}
.step h3 { margin: 0 0 8px; }
.step p { margin: 0 0 16px; font-size: .95rem; color: var(--ink-soft); }
.step .sub { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.step .sub li { font-size: .88rem; color: var(--ink-muted); padding-left: 18px; position: relative; }
.step .sub li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--accent); }

/* ==== 09 CTA band ===================================================== */
.cta-band {
  background: var(--paper-alt); border-radius: var(--radius); padding: 52px 48px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px;
}
.cta-band h2 { margin: 0; max-width: 26ch; }

/* ==== 10 SIGNATURE — GET A FREE QUOTE! marquee band ==================== */
.marquee { background-color: var(--accent-hot); overflow: hidden; padding: 0; }
.marquee-track { display: flex; width: max-content; animation: marquee-slide 30s linear infinite; }
.marquee-track span {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 3vw + .5rem, 2.5rem); line-height: 1;
  color: #fff; padding: 18px 26px; white-space: nowrap;
}
@keyframes marquee-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ==== 11 why-choose — white copy over a photo ground =================== */
.why-photo { position: relative; overflow: hidden; background-color: var(--band-dark); color: var(--on-dark-muted); }
.why-photo .why-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.why-photo::before { content: ""; position: absolute; inset: 0; background: #1f0a0c; opacity: .78; z-index: 1; }
.why-photo > .container { position: relative; z-index: 2; }
.why-photo h2 { color: #fff; }
.why-photo .lede { color: rgba(255, 255, 255, .86); }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--gap); }
.why-item { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius); padding: 26px 24px; }
.why-item h3 { color: #fff; margin: 0 0 8px; font-size: 1.1rem; }
.why-item p { margin: 0; font-size: .92rem; color: rgba(255, 255, 255, .84); }

/* ==== 12 finance + insurance ========================================== */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.duo-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 34px 38px; background: var(--paper); }
.duo-card h3 { margin: 0 0 12px; }
.duo-card p { color: var(--ink-soft); margin: 0 0 18px; }

/* ==== 13 reviews ====================================================== */
.reviews-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-bottom: 34px; }
.reviews-head .brand { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; color: var(--ink-head); }
.reviews-head .score { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; color: var(--ink); line-height: 1; }
.reviews-head .basis { font-size: .9rem; color: var(--ink-soft); }
.reviews-head .stars { color: var(--accent); letter-spacing: 2px; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: var(--gap); }
.review-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 26px 28px; }
.review-card .stars { color: var(--accent); letter-spacing: 2px; font-size: .9rem; }
.review-card .quote { margin: 12px 0 16px; font-size: .98rem; color: var(--ink); }
.review-card .name { font-size: .88rem; font-weight: 600; color: var(--ink-head); }

/* ==== 14 team teaser / 15 contact CTA ================================= */
.media-split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.media-split .media { border-radius: var(--radius); overflow: hidden; }
.media-split .media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.media-split.flip .media { order: 2; }
.center-cta { text-align: center; max-width: 58ch; margin: 0 auto; }
.center-cta .lede { margin-left: auto; margin-right: auto; }

/* ==== 16 resources / 31 archive — 4/3 post thumbnails ================== */
.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);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow var(--t-base) var(--ease);
}
.post-card:hover { box-shadow: var(--shadow-card-hover); }
.post-card .media { aspect-ratio: 4/3; overflow: hidden; background: var(--paper-alt); }
.post-card .media img { width: 100%; height: 100%; object-fit: cover; }
.post-card .body { padding: 22px 24px 26px; }
.post-card .meta { font-size: .78rem; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: 6px 14px; }
.post-card h3 { margin: 10px 0 8px; font-size: 1.12rem; }
.post-card p { margin: 0 0 14px; font-size: .92rem; color: var(--ink-soft); }

/* ==== 17 tools ======================================================== */
.tool-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 32px 34px; background: var(--paper); }
.tool-card h3 { margin: 0 0 10px; }
.tool-card p { margin: 0 0 16px; color: var(--ink-soft); font-size: .95rem; }

/* ==== 18 FAQ ========================================================== */
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; font-family: var(--font-head); font-weight: 600; font-size: 1.08rem;
  color: var(--ink-head); padding: 20px 40px 20px 0; list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--accent); font-size: 1.6rem; font-weight: 400; line-height: 1;
  transition: transform var(--t-fast) var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0 0 22px; color: var(--ink-soft); max-width: 74ch; }

/* ==== 19 / 25 interior hero (service + city) ========================== */
.hero-interior {
  position: relative; overflow: hidden; color: #fff;
  background-color: var(--band-dark); padding: clamp(64px, 7vw, 108px) 0 clamp(64px, 7vw, 108px);
}
.hero-interior .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-interior::before { content: ""; position: absolute; inset: 0; background: #000; opacity: .42; z-index: 1; }
.hero-interior > .container { position: relative; z-index: 2; }
.hero-interior h1 { color: #fff; font-size: var(--text-h2); max-width: 22ch; }
.hero-interior .lede { color: rgba(255, 255, 255, .88); }

/* ==== 20 benefits grid / 23 when-to-replace / 24 reasons =============== */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: var(--gap); }
.feature { border-top: 2px solid var(--accent); padding: 22px 0 0; }
.feature h3 { margin: 0 0 8px; font-size: 1.12rem; }
.feature p { margin: 0; font-size: .94rem; color: var(--ink-soft); }

/* ==== 22 comparison table ============================================= */
.cmp-wrap { overflow-x: auto; }
.cmp { width: 100%; min-width: 640px; border-collapse: collapse; }
.cmp th, .cmp td { text-align: left; padding: 18px 20px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: .93rem; }
.cmp thead th { background: var(--paper-alt); color: var(--ink-head); font-family: var(--font-head); font-weight: 600; font-size: 1rem; }
.cmp tbody th { width: 130px; color: var(--ink-head); font-weight: 600; }
.cmp td { color: var(--ink-soft); }

/* ==== 24 why-choose-for-service ======================================= */
.reason-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.reason-list li { border-left: 2px solid var(--accent); padding-left: 20px; }
.reason-list h3 { margin: 0 0 6px; font-size: 1.08rem; }
.reason-list p { margin: 0; font-size: .94rem; color: var(--ink-soft); }

/* ==== 26 / 30 long-form prose ========================================= */
.prose { max-width: 74ch; }
.prose p { color: var(--ink-soft); margin: 0 0 1.2em; }
.prose h2 { margin-top: 1.6em; }

/* ==== 27 city services / 28 neighbourhoods ============================ */
.stack-list { display: grid; gap: 28px; }
.stack-item { border-bottom: 1px solid var(--border); padding-bottom: 26px; }
.stack-item:last-child { border-bottom: 0; }
.stack-item h3 { margin: 0 0 8px; }
.stack-item p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

/* ==== 29 city star quotes ============================================= */
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--gap); }
.star-quote { background: var(--paper-alt); border-radius: var(--radius); padding: 28px 30px; }
.star-quote .stars { color: var(--accent); letter-spacing: 2px; font-size: .95rem; }
.star-quote .quote { margin: 12px 0 14px; color: var(--ink); font-size: .98rem; }
.star-quote .name { font-size: .88rem; font-weight: 600; color: var(--ink-head); }

/* ==== 30 article body / related ======================================= */
.article-meta { font-size: .85rem; color: var(--ink-muted); margin: 0 0 28px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--gap); }

/* ==== 32 about story + pull quote ===================================== */
.pullquote { border-left: 3px solid var(--accent); padding: 6px 0 6px 26px; margin: 32px 0 0; }
.pullquote p { font-family: var(--font-head); font-size: var(--text-h3); line-height: 1.45; color: var(--ink-head); margin: 0 0 12px; }
.pullquote .name { font-size: .9rem; font-weight: 600; color: var(--ink-muted); }

/* ==== 33 core values H.U.S.T.L.E. ===================================== */
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--gap); }
.value-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 28px 30px; background: var(--paper); }
.value-card h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; letter-spacing: .04em; color: var(--accent-deep); }
.value-card p { margin: 0; font-size: .94rem; color: var(--ink-soft); }

/* ==== 34 team roster ================================================== */
.dept { margin-bottom: 44px; }
.dept > h3 { font-family: var(--font-display); font-weight: 800; font-size: .95rem; letter-spacing: .16em; color: var(--ink-muted); margin: 0 0 20px; }
.roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--gap); }
.person { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; background: var(--paper); }
.person .who { font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--ink-head); }
.person .role { font-size: .84rem; color: var(--ink-muted); margin-top: 2px; }

/* ==== 35 contact + map ================================================ */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
.contact-block { border-bottom: 1px solid var(--border); padding: 18px 0; }
.contact-block h3 { margin: 0 0 4px; font-size: 1rem; }
.contact-block p { margin: 0; color: var(--ink-soft); }
.map-frame { border-radius: var(--radius); overflow: hidden; min-height: 380px; border: 1px solid var(--border); background: var(--paper-alt); }
.map-frame iframe, .map-frame img { width: 100%; height: 100%; min-height: 380px; border: 0; object-fit: cover; display: block; }

/* ==== 36 careers ====================================================== */
.form-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 32px 34px; background: var(--paper); }
.form-card h3 { margin: 0 0 18px; }
.form-card form { display: grid; gap: 14px; }
.form-card .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-card label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
.form-card input, .form-card select, .form-card textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font: inherit; font-size: .95rem;
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.form-card .drop {
  border: 1px dashed var(--border-mid); border-radius: var(--radius); padding: 22px;
  text-align: center; font-size: .88rem; color: var(--ink-muted);
}

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

/* ==== 38 / 39 offer banner (warranty + estimate) ====================== */
.offer {
  position: relative; overflow: hidden; color: #fff;
  background-color: var(--band-dark); padding: clamp(64px, 8vw, 112px) 0;
}
.offer .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.offer::before { content: ""; position: absolute; inset: 0; background: #000; opacity: .55; z-index: 1; }
.offer > .container { position: relative; z-index: 2; }
.offer h2 { color: #fff; max-width: 20ch; }
.offer .lede { color: rgba(255, 255, 255, .88); }
.offer .tick-list li { color: rgba(255, 255, 255, .92); }
.offer-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
/* light-ground component inside a dark band — ink reasserted at higher
   specificity than the band rule. Register new ones here. */
.offer .lead-card h2, .offer .form-card h3 { color: var(--ink-head); }
.offer .lead-card .reassure, .offer .form-card label { color: var(--ink-soft); }
.offer .lead-card .sub { color: var(--ink-muted); font-size: .85rem; margin: 0 0 16px; }

/* ==== 40 cost calculator ============================================== */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.calc-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 32px 34px; background: var(--paper-alt); }
.calc-card h3 { margin: 0 0 20px; }
.calc-card .field { margin-bottom: 16px; }
.calc-card label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
.calc-card input, .calc-card select {
  width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font: inherit; font-size: .95rem;
}
.calc-card .result { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border-mid); }
.calc-card .result .k { font-size: .95rem; font-weight: 600; color: var(--ink-head); }
.numbered { display: grid; gap: 22px; }
.numbered .n { font-family: var(--font-display); font-weight: 800; font-size: .95rem; color: var(--accent); letter-spacing: .06em; }
.numbered h3 { margin: 4px 0 6px; font-size: 1.08rem; }
.numbered p { margin: 0; font-size: .94rem; color: var(--ink-soft); }

/* ==== 42 static Spectra testimonial =================================== */
.spectra-quote { text-align: center; max-width: 52ch; margin: 0 auto; }
.spectra-quote .stars { color: var(--accent); letter-spacing: 4px; font-size: 1.1rem; }
.spectra-quote .quote { font-family: var(--font-head); font-size: var(--text-h3); line-height: 1.45; color: var(--ink-head); margin: 16px 0 14px; }
.spectra-quote .name { font-size: .9rem; font-weight: 600; color: var(--ink-muted); }

/* ==== mission band + footer ========================================== */
.mission { background-color: var(--band-dark); padding: 40px 0; }
.mission p { margin: 0; color: rgba(255, 255, 255, .9); font-size: var(--text-body-lg); max-width: 78ch; }
.footer { background-color: var(--band-dark); color: var(--on-dark-muted); padding: 62px 0 30px; }
.footer .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 44px; }
.footer .brand-block img { height: 34px; margin-bottom: 16px; }
.footer .brand-block p { font-size: .88rem; color: var(--on-dark-muted); max-width: 34ch; }
.footer h4 { color: #fff; font-size: .92rem; margin-bottom: 12px; }
.footer a { color: var(--on-dark-muted); text-decoration: none; display: block; padding: 3px 0; font-size: .9rem; }
.footer a:hover { color: #fff; }
.footer .city-cols { columns: 2; column-gap: 20px; }
.footer .legal {
  margin-top: 42px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; font-size: .8rem;
}

/* ==== DS doc chrome ================================================== */
.ds-nav {
  background: var(--band-dark); padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  position: sticky; top: 0; z-index: 70;
}
.ds-nav .lockup-text { margin: 0; color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 1rem; }
.ds-nav .lockup-text small { display: block; font-weight: 500; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-muted); }
.ds-nav .tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ds-nav .tab { color: var(--on-dark-muted); text-decoration: none; font-size: .88rem; font-weight: 500; padding: 8px 14px; border-radius: var(--radius); }
.ds-nav .tab:hover { color: #fff; }
.ds-nav .tab.active { background: var(--accent); color: #fff; }

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

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

.sx-index { border-bottom: 1px solid var(--border); background: var(--paper); }
.sx-index .grid {
  max-width: var(--container); margin: 0 auto; padding: 20px var(--gutter);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 4px;
}
.sx-index a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink-soft); font-size: .78rem; font-weight: 500; }
.sx-index a:hover { background: var(--paper-alt); color: var(--accent-deep); }
.sx-index a .num { color: var(--ink-quiet); }

.sx-pattern { border-bottom: 1px solid var(--border); }
.pattern-meta { max-width: var(--container); margin: 0 auto; padding: 40px var(--gutter) 18px; display: flex; gap: 28px; align-items: baseline; flex-wrap: wrap; }
.pattern-meta .id { font-size: .8rem; color: var(--ink-quiet); display: flex; gap: 10px; align-items: baseline; white-space: nowrap; font-weight: 500; }
.pattern-meta .id .num { font-weight: 800; font-family: var(--font-display); color: var(--accent); }
.pattern-meta .id .signature { background: var(--accent); color: #fff; font-size: .62rem; letter-spacing: .14em; padding: 3px 8px; border-radius: var(--radius-sm); font-weight: 700; }
.pattern-meta .name { margin: 0; font-family: var(--font-head); font-weight: 600; color: var(--ink-head); }
.pattern-meta .purpose { margin: 2px 0 0; font-size: .88rem; color: var(--ink-muted); max-width: 70ch; }

.sx-demo { position: relative; border-top: 1px dashed var(--border-mid); }
.sx-demo .demo-label {
  position: absolute; top: 0; right: var(--gutter); transform: translateY(-50%);
  background: var(--paper); border: 1px solid var(--border-mid); color: var(--ink-muted);
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  padding: 3px 10px; border-radius: var(--radius-sm); z-index: 5;
}
.sx-demo.no-pad { padding: 0; }
.sx-demo:not(.no-pad) { padding: 8px 0; }

/* ==== pages gallery ================================================== */
.pages-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.page-card {
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--paper); box-shadow: var(--shadow-card); text-decoration: none; color: inherit;
  display: flex; flex-direction: column; transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.page-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.page-card .preview { aspect-ratio: 16/10; overflow: hidden; background: var(--paper-alt); position: relative; }
.page-card .preview iframe { width: 200%; height: 200%; transform: scale(.5); transform-origin: 0 0; border: 0; pointer-events: none; }
.page-card .preview::after { content: ""; position: absolute; inset: 0; }
.page-card .body { padding: 20px 24px 24px; }
.page-card .body h3 { margin: 0 0 6px; }
.page-card .body p { margin: 0 0 10px; font-size: .92rem; color: var(--ink-soft); }
.page-card .page-cta { font-weight: 600; color: var(--accent-deep); font-size: .9rem; }

/* ==== design-system.html chrome ====================================== */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 16px; }
.swatch { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.swatch .chip-color { height: 72px; }
.swatch .meta { padding: 10px 12px; }
.swatch .meta .t { font-size: .74rem; color: var(--ink-head); font-weight: 700; }
.swatch .meta .v { font-size: .68rem; color: var(--ink-muted); }

.type-spec { border-bottom: 1px solid var(--border); padding: 22px 0; display: grid; grid-template-columns: 210px 1fr; gap: 24px; align-items: baseline; }
.type-spec .spec { font-size: .72rem; color: var(--ink-muted); line-height: 1.8; font-weight: 500; }

.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 20px; }
.asset-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.asset-card .thumb { aspect-ratio: 16/10; background: var(--paper-alt); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.asset-card .thumb.dark { background: var(--band-dark); }
.asset-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.asset-card .thumb img.contain { object-fit: contain; width: 76%; height: auto; }
.asset-card .meta { padding: 12px 14px; font-size: .7rem; color: var(--ink-muted); }
.asset-card .meta strong { display: block; color: var(--ink-head); font-size: .78rem; }

.ds-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; }
.ds-card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 26px;
  text-decoration: none; color: inherit; background: var(--paper); box-shadow: var(--shadow-card);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.ds-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.ds-card h3 { margin: 0 0 6px; }
.ds-card p { margin: 0; font-size: .9rem; color: var(--ink-soft); }

.char-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.char-block dl { margin: 0; }
.char-block dt { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); margin-top: 18px; font-weight: 700; }
.char-block dd { margin: 6px 0 0; color: var(--ink); }
.files-list { display: grid; gap: 10px; }
.files-list > div { display: grid; grid-template-columns: 260px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.files-list .name { font-size: .78rem; color: var(--accent-deep); font-weight: 700; font-family: ui-monospace, Menlo, monospace; }
.files-list .desc { color: var(--ink-soft); }
.chip-tag { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; font-size: .82rem; }

code.token { font-size: .8em; background: var(--paper-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1px 7px; color: var(--accent-deep); font-family: ui-monospace, Menlo, monospace; }

/* ==== responsive — widest first, then 768, then 560. Equal-specificity
   rules resolve by source order, so a narrower block must come LAST. ==== */
@media (max-width: 880px) {
  .hero-grid, .areas-grid, .split-cards, .duo, .media-split, .media-split.flip,
  .contact-grid, .calc, .offer-grid, .pages-gallery, .char-grid {
    grid-template-columns: 1fr; gap: 32px;
  }
  .media-split.flip .media { order: 0; }
  .footer .cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .type-spec { grid-template-columns: 1fr; gap: 8px; }
  .files-list > div { grid-template-columns: 1fr; gap: 2px; }
  .cta-band { padding: 36px 28px; }
  .form-card .row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .nav .actions { display: none; }
  .lead-card { padding: 24px 22px 26px; }
  .solution-card .body, .duo-card, .tool-card, .form-card, .calc-card { padding: 24px 22px 28px; }
}
@media (max-width: 560px) {
  .footer .cols { grid-template-columns: 1fr; gap: 28px; }
  .footer .city-cols { columns: 2; }
  .badge-strip { gap: 14px 20px; }
  .badge-slot { min-width: 110px; height: 66px; }
}