/* ==========================================================================
   ROOFER EMBER — shared design tokens + components
   Extracted from lyonsroofing.com (captured 2026-07-26, live DOM census at
   1440px + raw source + 9 linked stylesheets).
   Brick red on white, pale grey alternating bands, near-black ink.
   Signature devices: the blur-free red underglow (0 3px 1px) used for both
   card hover and accordion active, and the welded red header bar on list
   panels. Both were invisible to the clip-path/mask sweep and were read out
   of the component rules directly. See brand-spec.md.
   Face substituted: brother-1816 (Adobe Fonts, paid) to Archivo, with
   re-tuned metrics. Source body leading of 1.15 corrected to 1.6.
   ========================================================================== */

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

:root {
  /* COLOR — brand. The theme declares exactly one brand custom property
     across all nine stylesheets: --red-color. Everything the declaration
     ranking put above it (#020381, #2874fc, #dddddd) paints on zero
     elements. Ranked here by rendered painted area instead. */
  --accent: #c72f33;           /* extracted — 1,062,926px2, 5 of 8 buttons */
  --accent-deep: #9d2427;      /* derived — hover/press; source has no darker red */
  --accent-soft: rgba(199, 47, 51, .26);
  --accent-pale: #fbecec;

  /* COLOR — ink */
  --ink: #020303;              /* extracted — 45 elements */
  --ink-strong: #000000;       /* extracted — 77 text elements, heading colour */
  --ink-soft: rgba(2, 3, 3, .78);
  --ink-muted: #423f46;        /* extracted — 46 elements, body/secondary */
  --ink-quiet: rgba(2, 3, 3, .42);   /* doc chrome only, never body copy */

  /* COLOR — grounds */
  --bg: #ffffff;               /* extracted — 9,303,608px2 */
  --bg-pure: #ffffff;
  --band: #f3f5f5;             /* extracted — 2,686,125px2, the alternating band */
  --list-ground: #f2f5fb;      /* extracted — .list-box panel ground */
  --bg-dark: #020303;

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

  /* COLOR — rules */
  --hairline: #cccccc;         /* extracted — form input borders, 18 elements */
  --card-border: #dadadb;      /* extracted — .service-block */
  --card-border-2: #bec9d1;    /* extracted — .faqs-single, 1.5px */

  /* TYPE — Archivo substitutes brother-1816 across the whole system. The
     source runs one family for display and body; we keep that. */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* TYPE — fluid scale. Source renders 48/36/24/20 desktop; the clamps land
     on those endpoints. Leading re-tuned for Archivo's taller x-height. */
  /* Mobile floors are deliberately below the source's 48px h1: these headlines
     are long (the homepage h1 is 11 words, verbatim) and at a 36px floor it ran
     five lines on a 375px screen and crowded the CTA against the fold. */
  --text-display: clamp(2.125rem, 2.9vw + 1.4rem, 3.5rem);  /* 34 -> 56 */
  --text-h1: clamp(1.9rem, 2.6vw + 1.2rem, 3rem);           /* 30 -> 48 */
  --text-h2: clamp(1.875rem, 1.1vw + 1.4rem, 2.375rem);     /* 30 -> 38 */
  --text-h3: 1.375rem;                                       /* 22 */
  --text-h4: 1.125rem;                                       /* 18 */
  --text-body-lg: 1.125rem;
  --text-body: 1rem;                                         /* 16, extracted */
  --text-small: .9375rem;                                    /* 15, extracted */
  --text-meta: .8125rem;

  /* LAYOUT — source gap census: 20 / 15 / 75 / 10 / 45 / 5 */
  --container: 1240px;
  --container-narrow: 820px;
  --gutter: 20px;
  --section: 75px;

  /* RADII — rendered census: 0 x48, 12 x30, 9 x8, 7 x6, 8 x6 */
  --radius-input: 0px;         /* extracted — form fields are square */
  --radius-btn: 7px;           /* extracted — every .btn variant */
  --radius-tile: 8px;          /* extracted — .service-block */
  --radius-card: 12px;         /* extracted — .faqs-single, dominant radius */
  --radius-panel: 22px;        /* extracted — .list-box */

  /* SHADOW — rendered census. The card shadow is near-flat by design. */
  --shadow-card: 0 20px 30px rgba(16, 27, 38, .02);
  --shadow-float: 0 3px 11px rgba(0, 0, 0, .25);

  /* SIGNATURE — the red underglow. Zero blur is the whole point: it reads as
     a printed offset, not a soft elevation. Used identically for card hover
     and accordion active, which is what makes it a system. */
  --underglow: 0 3px 1px var(--accent);
  /* SIGNATURE — the button lift, directional shadow to the lower right. */
  --btn-lift-shadow: 10px 10px 5px -5px rgba(0, 0, 0, .25);

  /* MOTION — extracted: .3s on buttons, .2s/.3s ease elsewhere */
  --ease: ease;
  --t-fast: 200ms;
  --t-base: 300ms;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink-strong);
  font-weight: 700;
  margin: 0 0 .5em;
}
.display { font-size: var(--text-display); line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }
h1, .h1 { font-size: var(--text-h1); line-height: 1.08; letter-spacing: -.015em; }
h2, .h2 { font-size: var(--text-h2); line-height: 1.12; letter-spacing: -.01em; }
h3, .h3 { font-size: var(--text-h3); line-height: 1.25; }
h4, .h4 { font-size: var(--text-h4); line-height: 1.3; }
p { margin: 0 0 1em; }
.lede { font-size: var(--text-body-lg); color: var(--ink-muted); }
.mt-24 { margin-top: 24px; } .mt-48 { margin-top: 48px; }

/* Focus. The source defines no focus styling at all outside its vendor
   sliders, so this is authored rather than extracted (approved at Gate A). */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ==== buttons ===========================================================
   Extracted whole: 1px red border, white ground, red text, 7px radius,
   10px 25px padding, bold. The declared .cta-button 50px pill renders on
   zero elements site-wide and is deliberately not carried. */
.btn {
  display: inline-block;
  border: 1px solid var(--accent);
  background: var(--bg-pure);
  color: var(--accent-deep);
  padding: 10px 25px;
  border-radius: var(--radius-btn);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.btn:hover { box-shadow: var(--btn-lift-shadow); transform: translateY(-5px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-dark { background: var(--bg-pure); border-color: #222424; color: #222424; }
.btn-large { font-size: 1.375rem; padding: 12px 45px; }
.btn-sm { font-size: .9375rem; padding: 7px 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
/* On a dark or red ground the outline button needs a light frame to survive. */
.on-dark .btn:not(.btn-primary):not(.btn-dark),
.on-accent .btn:not(.btn-primary):not(.btn-dark) {
  background: transparent; border-color: #fff; color: #fff;
}
.on-accent .btn-primary { background: #fff; border-color: #fff; color: var(--accent-deep); }

/* ==== announcement + nav ===============================================
   Source chrome: red super-header (tagline, dual-market phones, quote link)
   above a white nav bar with mega-menu dropdowns and an outlined red CTA. */
.super-header {
  background: var(--accent); color: #fff;
  font-size: var(--text-meta);
}
.super-header .container { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; justify-content: space-between; padding-top: 8px; padding-bottom: 8px; }
.super-header a { color: #fff; text-decoration: none; font-weight: 600; }
.super-header a:hover { text-decoration: underline; }
.super-header .phones { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.super-header .sep { opacity: .55; }

.nav { background: var(--bg-pure); border-bottom: 1px solid var(--hairline); }
.nav > .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; padding-bottom: 14px; }
.nav .brand-mark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink-strong); font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.05; min-width: 0; }
.nav .brand-mark img { width: 38px; height: 38px; }
.nav .brand-mark small { display: block; font-size: .625rem; font-weight: 500; color: var(--ink-muted); letter-spacing: .06em; }
.nav .links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.nav .links a { color: var(--ink-strong); text-decoration: none; font-size: var(--text-body); padding: 6px 2px; }
/* Scoped to desktop ONLY. As flex items the row and its labels shrink below
   content width by default, which wrapped the eight-link row onto a second
   line at 1280. But the shared mobile layer reuses .links as the stacked
   burger menu, so an unscoped nowrap overflows the phone. This kit's IA has
   eight top-level links, so the row genuinely needs ~1215px; the burger takes
   over below that rather than letting it squeeze. */
@media (min-width: 1241px) {
  .nav .links { flex-wrap: nowrap; }
  .nav .links a { white-space: nowrap; }
  .nav .brand-mark { white-space: nowrap; flex: none; }
}
.nav .links a:hover { color: var(--accent-deep); }
.nav .actions { display: flex; gap: 12px; align-items: center; flex: none; }
.nav .actions .btn { white-space: nowrap; }

/* ==== sections ========================================================== */
.section { padding: var(--section) 0; background: var(--bg); }
.section.band { background: var(--band); }
.section.on-dark { background: var(--bg-dark); color: var(--text-on-dark-muted); }
.section.on-dark h1, .section.on-dark h2, .section.on-dark h3, .section.on-dark h4 { color: #fff; }
.section.on-accent { background: var(--accent); color: #fff; }
.section.on-accent h1, .section.on-accent h2, .section.on-accent h3, .section.on-accent h4 { color: #fff; }
.section-head { max-width: 900px; margin-bottom: 45px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p:last-child { margin-bottom: 0; }

/* Light-ground components that sit inside dark or red bands re-assert their
   own ink here. A section rule like `.section.on-dark p` (0,2,1) outranks a
   bare component rule (0,2,0) and will otherwise reach into any card that
   paints its own light ground. REGISTER NEW LIGHT-GROUND COMPONENTS HERE
   as they are written; the comment alone has not been enough on past kits,
   so trust the contrast gate over this list. */
.section.on-dark .faq-item, .section.on-accent .faq-item,
.section.on-dark .service-tile, .section.on-accent .service-tile,
.section.on-dark .review-card, .section.on-accent .review-card,
.section.on-dark .offer-card, .section.on-accent .offer-card,
.section.on-dark .article-card, .section.on-accent .article-card,
.section.on-dark .team-card, .section.on-accent .team-card,
.section.on-dark .info-box, .section.on-accent .info-box,
.section.on-dark .list-box, .section.on-accent .list-box,
.section.on-dark .award-card, .section.on-accent .award-card { color: var(--ink-muted); }
.section.on-dark .faq-item h3, .section.on-accent .faq-item h3,
.section.on-dark .service-tile h3, .section.on-accent .service-tile h3,
.section.on-dark .review-card .quote, .section.on-accent .review-card .quote,
.section.on-dark .offer-card h3, .section.on-accent .offer-card h3,
.section.on-dark .article-card h3, .section.on-accent .article-card h3,
.section.on-dark .team-card h3, .section.on-accent .team-card h3,
.section.on-dark .info-box h3, .section.on-accent .info-box h3,
.section.on-dark .award-card h3, .section.on-accent .award-card h3 { color: var(--ink-strong); }

/* ==== hero ==============================================================
   Source: single photo layer, background-size cover, position center top,
   #fff base, 150px band padding, white text, and NO scrim of any kind. On
   first paint the headline is white on white and unreadable. We keep the
   composition and add the solid ink base plus a scrim, per Gate A. */
.hero { position: relative; background: var(--ink); background-size: cover; background-position: center top; padding: 150px 0; color: #fff; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,3,3,.82) 0%, rgba(2,3,3,.62) 46%, rgba(2,3,3,.28) 100%); z-index: 0; }
.hero > .container { position: relative; z-index: 1; }
.hero .hero-inner { max-width: 650px; }   /* extracted — .fh-inner.narrow */
.hero .container h1 { color: #fff; margin-bottom: 16px; }
.hero .hero-sub { font-size: 1.5rem; color: #fff; margin: 0 0 14px; }  /* extracted 24px subhead */
/* +1 specificity on purpose. mobile-responsive.css is linked AFTER this file
   and sets `.hero h1 { font-size: clamp(34px, 9vw, 52px) }` (0,2,0), so an
   equal-specificity rule here loses on source order. `.hero .container h1` is
   (0,2,1) and wins. Without this the 375px hero ran five lines and pushed the
   CTA to the fold. */
.hero .container h1 { font-size: clamp(1.75rem, 6.4vw + .4rem, 3rem); line-height: 1.08; }
.hero .container .hero-sub { font-size: clamp(1.125rem, 1.6vw + .8rem, 1.5rem); }
.hero .container p { color: rgba(255,255,255,.92); }
.hero .container .lede { color: rgba(255,255,255,.92); }

/* hero with an inline lead form beside the copy */
.hero-form-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 45px; align-items: start; }
.hero-form-grid > * { min-width: 0; }

/* ==== forms ============================================================= */
.form-card { background: var(--bg-pure); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: 28px 26px 30px; color: var(--ink-muted); }
.form-card h3 { color: var(--ink-strong); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid > * { min-width: 0; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: block; }
.field span { display: block; font-size: var(--text-meta); font-weight: 600; color: var(--ink-muted); margin-bottom: 5px; }
input[type=text], input[type=email], input[type=tel], select, textarea {
  width: 100%; min-width: 0;
  background: var(--bg-pure);
  border: 1px solid var(--hairline);   /* extracted */
  border-radius: var(--radius-input);  /* extracted — square */
  padding: 10px;                        /* extracted */
  font-family: var(--font-body); font-size: var(--text-body); color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { min-height: 108px; resize: vertical; }
.fine-print { font-size: var(--text-meta); color: var(--ink-muted); }

/* ==== contact split: form + dual-market location cards ================== */
.contact-split { display: grid; grid-template-columns: 4fr 6fr; gap: 20px 100px; align-items: center; }  /* extracted 4/6 flex */
.contact-split > * { min-width: 0; }
.location-list { display: grid; gap: 24px; }
.location-card h3 { margin-bottom: 6px; }
.location-card p { margin: 0 0 4px; }
.location-card .tel { font-weight: 700; color: var(--accent-deep); text-decoration: none; font-size: 1.125rem; }
.location-card .roc { font-size: var(--text-meta); color: var(--ink-muted); margin-top: 10px; }

/* ==== split: image and content ========================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 45px; align-items: center; }
.split > * { min-width: 0; }
.split .media img { width: 100%; border-radius: var(--radius-tile); object-fit: cover; aspect-ratio: 4/3; }
.split.flip .media { order: 2; }

/* ==== service grid ======================================================
   SIGNATURE: the red underglow on hover. Extracted from .service-block. */
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; }
.service-grid > * { min-width: 0; }
.service-tile {
  background: var(--bg-pure);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-tile);
  padding: 25px; min-height: 150px;
  text-align: center; text-decoration: none;
  color: var(--ink-muted); display: block;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.service-tile:hover { border-color: var(--accent); box-shadow: var(--underglow); }
.service-tile:hover h3 { color: var(--accent-deep); }
.service-tile .icon { width: 65px; height: 65px; margin: 0 auto 12px; color: var(--accent); }
.service-tile h3 { font-size: var(--text-h4); margin: 0 0 6px; color: var(--ink-strong); }
.service-tile p { margin: 0; font-size: var(--text-small); }

/* ==== guarantee strip =================================================== */
.guarantee-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 20px; text-align: center; }
.guarantee-grid > * { min-width: 0; }
.guarantee-item .icon { width: 56px; height: 56px; margin: 0 auto 12px; color: var(--accent); }
.guarantee-item p { margin: 0; font-weight: 600; color: var(--ink-strong); font-size: var(--text-small); }

/* ==== awards ============================================================ */
.award-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(340px, 82vw); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
.award-rail > * { scroll-snap-align: start; min-width: 0; }
.award-card { background: var(--bg-pure); border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 20px; display: flex; gap: 20px; align-items: flex-start; }
.award-card img { width: 92px; flex: none; }
.award-card h3 { font-size: var(--text-h4); margin: 0 0 6px; }
.award-card p { margin: 0; font-size: var(--text-small); }
.award-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.award-grid > * { min-width: 0; }

/* ==== reviews ===========================================================
   The source's own section is two Birdeye iframes with no transcribable
   text, keeping only the Phoenix / Tucson split as page grammar. The quotes
   below come verbatim from inner service and city pages. */
.market-split { display: grid; grid-template-columns: 1fr 1fr; gap: 45px; }
.market-split > * { min-width: 0; }
.market-split > div > h3 { text-align: center; margin-bottom: 20px; }
.review-list { display: grid; gap: 20px; }
.review-card { background: var(--bg-pure); border: 1px solid var(--card-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 24px; }
.review-card .quote { margin: 0 0 12px; color: var(--ink-strong); font-size: var(--text-body-lg); line-height: 1.5; }
.review-card .who { margin: 0; font-size: var(--text-meta); font-weight: 700; color: var(--accent-deep); }
.stars { display: flex; gap: 3px; color: var(--accent); margin-bottom: 10px; }
.stars svg { width: 16px; height: 16px; }

/* ==== faq ===============================================================
   SIGNATURE: same red underglow, here on the active state. Extracted from
   .faqs-single.active. */
.faq { display: grid; gap: 20px; }
.faq-item {
  border-radius: var(--radius-card);        /* extracted 12px */
  border: 1.5px solid var(--card-border-2); /* extracted */
  background: var(--bg-pure);
  box-shadow: var(--shadow-card);           /* extracted near-flat */
  padding: 20px;
  color: var(--ink-muted);
}
/* The open/closed indicator is a sibling of the heading, never a child of it.
   A coloured <span> inside an <h3> is indistinguishable from an accent word to
   the heading-accent gate, and the gate is right to refuse to tell them apart. */
.faq-q { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; cursor: pointer; }
.faq-q h3 { font-size: var(--text-h4); margin: 0; }
.faq-item .a { margin: 15px 0 0; font-size: var(--text-small); }
.faq-item.active { border-color: var(--accent); box-shadow: var(--underglow); }
.faq-item.active .faq-q h3 { color: var(--accent-deep); }
.faq-item .sign { color: var(--accent); font-weight: 700; flex: none; font-size: var(--text-h4); line-height: 1.3; }

/* ==== why blocks ======================================================== */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 45px; }
.why-grid > * { min-width: 0; }
.tick-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tick-list li { position: relative; padding-left: 28px; font-size: var(--text-small); line-height: 1.55; }
.tick-list li::before { content: ""; position: absolute; left: 0; top: .42em; width: 14px; height: 8px; border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(-45deg); }

/* ==== prose, list-box, info-box =========================================
   SIGNATURE 2: the welded red header bar. .list-box clips a full-bleed red
   h2 into its own 22px top curve via overflow hidden. */
.prose { max-width: 72ch; }
.prose h3 { margin-top: 1.4em; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 12px; line-height: 1.55; font-size: var(--text-small); }
.prose-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 45px; }
.prose-duo > * { min-width: 0; }

.list-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 30px; }
.list-boxes > * { min-width: 0; }
.list-box { border-radius: var(--radius-panel); overflow: hidden; background: var(--list-ground); padding-bottom: 30px; color: var(--ink-muted); }
.list-box h2 { background: var(--accent); color: #fff; font-weight: 400; font-size: 1.4375rem; padding: 15px 30px; margin: 0 0 25px; letter-spacing: 0; }
.list-box > ul { padding-left: 45px; padding-right: 24px; margin: 0; }
.list-box li { margin-bottom: 12px; line-height: 1.55; font-size: var(--text-small); color: var(--ink); }
.list-box li::marker { color: var(--ink-strong); }
.list-box p { padding: 0 30px; font-size: var(--text-small); }

.info-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 25px; }
.info-boxes > * { min-width: 0; }
.info-box { background: var(--bg-pure); border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 26px 30px; text-align: center; color: var(--ink-muted); }
.info-box .icon { width: 58px; height: 58px; margin: 0 auto 14px; color: var(--accent); }
.info-box h3 { margin-bottom: 12px; font-size: var(--text-h4); }
.info-box p { margin: 12px 0 0; font-size: var(--text-small); }

/* ==== link columns ====================================================== */
.link-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px 45px; }
.link-columns > * { min-width: 0; }
.link-columns ul { list-style: none; padding: 0; margin: 0; }
.link-columns li { margin-bottom: 8px; }
.link-columns a { color: var(--ink); text-decoration: none; font-size: var(--text-small); }
.link-columns a:hover { color: var(--accent-deep); text-decoration: underline; }

/* ==== offers ============================================================ */
.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.offer-grid > * { min-width: 0; }
.offer-card { background: var(--bg-pure); border: 1.5px dashed var(--accent); border-radius: var(--radius-card); padding: 28px 26px; text-align: center; color: var(--ink-muted); }
.offer-card .amount { font-family: var(--font-display); font-weight: 700; font-size: 2.25rem; color: var(--accent-deep); line-height: 1; margin-bottom: 8px; }
.offer-card h3 { margin: 0 0 10px; font-size: var(--text-h4); }
.offer-card .terms { font-size: var(--text-meta); color: var(--ink-muted); margin: 0 0 18px; }

/* ==== tool hero + steps ================================================= */
.tool-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 45px; align-items: start; }
.tool-hero > * { min-width: 0; }
.widget-slot { background: var(--band); border: 1px dashed var(--hairline); border-radius: var(--radius-card); min-height: 320px; display: grid; place-items: center; text-align: center; padding: 30px; color: var(--ink-muted); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 30px; counter-reset: step; }
.steps > * { min-width: 0; }
.step { text-align: center; }
.step .num { counter-increment: step; width: 54px; height: 54px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; margin: 0 auto 14px; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; }
.step .num::before { content: counter(step); }
.step h3 { font-size: var(--text-h4); margin-bottom: 8px; }
.step p { margin: 0; font-size: var(--text-small); }

/* ==== videos ============================================================ */
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.video-grid > * { min-width: 0; }
.video-card { border: 1px solid var(--card-border); border-radius: var(--radius-card); overflow: hidden; background: var(--bg-pure); }
.video-card .thumb { position: relative; aspect-ratio: 16/9; background: var(--ink); overflow: hidden; }
.video-card .thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.video-card .play { position: absolute; inset: 0; display: grid; place-items: center; }
.video-card .play span { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.video-card .play svg { width: 20px; height: 20px; color: #fff; margin-left: 3px; }
.video-card p { margin: 0; padding: 14px 18px; font-weight: 600; color: var(--ink-strong); font-size: var(--text-small); }

/* ==== blog index + article ============================================== */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.chip { border: 1px solid var(--hairline); border-radius: 999px; padding: 6px 16px; font-size: var(--text-meta); color: var(--ink-muted); text-decoration: none; background: var(--bg-pure); }
.chip:hover, .chip.active { border-color: var(--accent); color: var(--accent-deep); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.card-grid > * { min-width: 0; }
.article-card { background: var(--bg-pure); border: 1px solid var(--card-border); border-radius: var(--radius-card); overflow: hidden; text-decoration: none; color: var(--ink-muted); display: block; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.article-card:hover { border-color: var(--accent); box-shadow: var(--underglow); }
.article-card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.article-card .body { padding: 20px 22px 24px; }
.article-card h3 { font-size: var(--text-h4); margin: 0 0 8px; }
.article-card p { margin: 0; font-size: var(--text-small); }

.article-banner { background: var(--ink); color: #fff; padding: 60px 0; }
.article-banner h1 { color: #fff; margin: 0; }
.article-layout { display: grid; grid-template-columns: 1fr 320px; gap: 45px; align-items: start; }
.article-layout > * { min-width: 0; }
.article-layout .body img { border-radius: 10px 10px 0 0; }   /* extracted .single-post img */
.recent-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 15px; }
.recent-list a { color: var(--ink); text-decoration: none; font-size: var(--text-small); font-weight: 600; }
.recent-list a:hover { color: var(--accent-deep); }
.sidebar-panel { background: var(--band); border-radius: var(--radius-card); padding: 24px; }
.sidebar-panel h3 { font-size: var(--text-h4); }

/* ==== team ============================================================== */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 20px; }
.team-grid > * { min-width: 0; }
.team-card { text-align: center; background: var(--bg-pure); border: 1px solid var(--card-border); border-radius: var(--radius-card); overflow: hidden; color: var(--ink-muted); }
.team-card img { aspect-ratio: 1/1; object-fit: cover; width: 100%; }
.team-card .body { padding: 16px 14px 20px; }
.team-card h3 { font-size: var(--text-h4); margin: 0 0 4px; }
.team-card p { margin: 0; font-size: var(--text-meta); }
.team-single { display: grid; grid-template-columns: 300px 1fr; gap: 45px; align-items: start; }
.team-single > * { min-width: 0; }
.team-single img { border-radius: var(--radius-card); width: 100%; aspect-ratio: 1/1; object-fit: cover; }

/* ==== cta band ========================================================== */
.cta-band { background: var(--accent); color: #fff; border-radius: var(--radius-card); padding: 45px; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.94); }
.cta-band .btn-row { justify-content: center; }

/* ==== footer ============================================================ */
.footer { background: var(--ink); color: var(--text-on-dark-muted); padding: var(--section) 0 30px; }
.footer h3 { color: #fff; font-size: var(--text-h4); }
.footer a { color: var(--text-on-dark-muted); text-decoration: none; font-size: var(--text-small); }
.footer a:hover { color: #fff; }
.footer .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 45px; }
.footer .cols > * { min-width: 0; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer .locations { display: grid; grid-template-columns: 1fr 1fr; gap: 45px; margin-top: 45px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.16); }
.footer .locations > * { min-width: 0; }
.footer .tel { color: #fff; font-weight: 700; font-size: 1.125rem; }
.footer .legal { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); font-size: var(--text-meta); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }

/* ==== DS doc chrome ===================================================== */
.ds-nav { background: var(--ink); padding: 14px var(--gutter); display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.ds-nav .lockup-text { margin: 0; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; }
.ds-nav .lockup-text small { display: block; font-family: var(--font-mono); font-weight: 500; font-size: .7rem; color: var(--text-on-dark-muted); letter-spacing: .08em; }
.ds-nav .tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-nav .tab { color: var(--text-on-dark-muted); text-decoration: none; font-size: .875rem; font-weight: 700; padding: 8px 16px; border-radius: var(--radius-btn); }
.ds-nav .tab:hover { color: #fff; }
.ds-nav .tab.active { background: var(--accent); color: #fff; }
.ds-hero { padding: 72px 0 48px; }
.ds-section { padding: 56px 0; border-top: 1px solid var(--card-border); }
.meta-strip { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 28px; }
.meta-strip > div { font-size: var(--text-meta); color: var(--ink-muted); }
.meta-strip strong { display: block; color: var(--ink-strong); font-size: 1rem; }
.door-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; }
.door-grid > * { min-width: 0; }
.door-card { border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 26px 24px; text-decoration: none; color: var(--ink-muted); background: var(--bg-pure); display: block; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.door-card:hover { border-color: var(--accent); box-shadow: var(--underglow); }
.door-card h3 { font-size: var(--text-h4); margin: 0 0 8px; }
.door-card p { margin: 0; font-size: var(--text-small); }
.file-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.file-list li { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--ink-muted); overflow-wrap: anywhere; }
.char-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 24px; }
.char-grid > * { min-width: 0; }

/* ==== sections.html catalog chrome ===================================== */
.sx-header { background: var(--band); padding: 72px 0 48px; }
.sx-index { border-bottom: 1px solid var(--card-border); background: var(--bg-pure); }
.sx-index .grid { max-width: var(--container); margin: 0 auto; padding: 20px var(--gutter); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 2px 14px; }
.sx-index a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; font-size: var(--text-meta); text-decoration: none; color: var(--ink-soft); min-width: 0; }
.sx-index a:hover { background: var(--accent-pale); color: var(--accent-deep); }
.sx-index a .num { color: var(--ink-quiet); font-family: var(--font-mono); }
.sx-index a em.sig { font-style: normal; color: var(--accent-deep); font-size: .68rem; }
.sx-pattern { border-bottom: 1px solid var(--card-border); }
.pattern-meta { max-width: var(--container); margin: 0 auto; padding: 40px var(--gutter) 18px; display: grid; grid-template-columns: 300px 1fr; gap: 20px; }
.pattern-meta > * { min-width: 0; }
.pattern-meta .id { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-quiet); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pattern-meta .id .num { font-weight: 600; color: var(--accent-deep); }
.pattern-meta .id .signature { background: var(--ink); color: #fff; padding: 3px 9px; border-radius: 3px; font-size: .62rem; letter-spacing: .1em; }
.pattern-meta .name { margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--ink-strong); font-size: 1.0625rem; }
.pattern-meta .purpose { margin: 3px 0 0; font-size: var(--text-small); color: var(--ink-muted); }
.sx-demo { position: relative; border-top: 1px dashed var(--hairline); }
.sx-demo .demo-label { position: absolute; top: 0; right: var(--gutter); transform: translateY(-50%); background: var(--bg-pure); color: var(--ink-quiet); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; padding: 2px 10px; z-index: 5; }
.sx-demo.on-dark { background: var(--bg-dark); }
.sx-demo.on-dark .demo-label { background: var(--bg-dark); color: var(--text-on-dark-muted); }

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

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

/* ==== responsive ========================================================
   Every fixed multi-column grid collapses here, written with the layout
   rather than retrofitted. */
@media (max-width: 980px) {
  .footer .cols { grid-template-columns: 1fr 1fr; }
  .article-layout { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  :root { --section: 56px; --gutter: 18px; }
  .split, .contact-split, .hero-form-grid, .market-split, .prose-duo,
  .tool-hero, .team-single, .pages-gallery, .pattern-meta, .type-row { grid-template-columns: 1fr; }
  .split.flip .media { order: 0; }
  .hero .container { max-width: 100%; }
  .hero { padding: 75px 0; }              /* extracted mobile padding */
  .cta-band { padding: 32px 22px; }
  .footer .locations { grid-template-columns: 1fr; }
  .award-card { flex-direction: column; }
}
/* Burger takes over at 1240px, not 768px. The eight-link row plus the brand
   lockup and CTA measures ~1215px unwrapped, so anything narrower either
   wraps to a second line or squeezes; the shared hamburger layer is the
   better answer across that whole range. */
@media (max-width: 1240px) {
  .nav .actions { display: none; }
  .nav .links { display: none; }
}
@media (max-width: 768px) {
  .super-header .container { justify-content: center; text-align: center; }
  .footer .cols { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}