/* ==========================================================================
   HVAC FORGE — shared tokens + components
   Extracted from 5starhomeservicesinc.com (captured 2026-07-26; WordPress,
   ThemeForest "Homefort" by Like Themes, class prefix lte-, + Elementor +
   Revolution Slider + Contact Form 7). Las Vegas HVAC and plumbing, family
   owned, residential and commercial.

   PHASE 2 CORRECTION, and it is a large one. The css-extract declaration
   ranking put #f35d22 (574 declarations), #0f2c49 (434) and #ea4a34 (412) at
   the top of the table. All three paint on ZERO elements. They are the
   Homefort vendor's stock palette, shipped inline in a :root block on every
   page and overridden by the client in the same block. #ff6900 also appears
   89 times and is WordPress core's Gutenberg preset, painting nothing. That
   is 1,509 declarations of colour that does not exist on screen. The real
   palette was read off the live DOM at 1440px: orange, black, cream, plus two
   colours the client hand-added in a "MY CSS" block appended to the theme
   stylesheet (the utility blue and the navy form panel).

   The identity is hot orange on black with zero rounded corners anywhere.
   Grounds run white to cream to black. There is no soft edge in the system:
   the radius census over every painted box returns 0px x67 and 50% x17, and
   the 50% is icon discs only. Shadows are ambient and nearly invisible.

   THE SOURCE IS A LIGHTLY CUSTOMISED THEME DEMO. A large amount of Homefort's
   original demo content is still live: /about-us/ and /faq/ are lorem ipsum,
   /home-conditioning/ sells a fictional "Air Conditioner Homefort AC-250
   Multicool" for $349, and WooCommerce plus LearnPress demo pages are still
   published. None of it is catalogued. Every pattern below is transcribed
   from a section carrying the company's own written copy. See brand-spec.md
   for the full omission list with reasons.

   Fonts: Barlow and Open Sans are the only two faces that render (the theme
   also enqueues Roboto and Roboto Slab via Elementor, which paint zero
   elements and are dropped). Both are free Google faces and are the same
   families the source requests, so no substitution and no metric re-tuning.
   One real correction: the source requests Barlow 600,700 and then declares
   font-weight 800 on its 64px display headings, so the browser synthesises a
   faux bold that smears at display size. This kit loads 800 properly.

   TYPE — the source ramp is genuinely steep and stays that way: display 64px
   Barlow 800 at -1px tracking, section heads 48px Barlow 600, body 16px Open
   Sans. Tracking is expressed in em here rather than px so it tracks the
   clamp ramp instead of staying -1px at phone sizes, where it would be far
   too tight. That is execution; the proportions are the source's.

   THREE DELIBERATE CONTRAST DEVIATIONS, all documented at their rules below.
   The source paints white text on the orange accent (2.26:1), orange stat
   numerals on white (2.26:1), and orange nav-link hover on white (2.26:1).
   Orange against black is 9.31:1 and against white is 2.26:1, so in this kit
   the accent is a GROUND that carries ink, and it only becomes a text colour
   on dark bands. That is not a redesign: it is what the source already does
   everywhere the colour works, applied consistently.
   ========================================================================== */

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

:root {
  /* COLOR — ink. The source body and heading ink is pure #000000; 101 of the
     homepage's text leaves compute to rgb(0,0,0). Kept, with softened
     derivatives for long-form body copy. */
  --ink: #000000;
  --ink-soft: rgba(0, 0, 0, .78);
  --ink-muted: rgba(0, 0, 0, .60);
  --ink-quiet: rgba(0, 0, 0, .42);   /* doc chrome only — never body copy */

  /* COLOR — brand. Orange is the whole identity: 7 of 7 buttons, every icon
     disc, the nav underline, the stat numerals. --accent-deep is the navy the
     client hand-added for the translucent form panel over photography.
     --utility is the blue of the top rail and the CF7 submit button, also
     hand-added. Neither is a Homefort token. */
  --accent: #f8951d;
  --accent-deep: #0c233a;
  --utility: #0075bf;
  --accent-soft: rgba(248, 149, 29, .12);

  /* COLOR — grounds */
  --paper: #ffffff;
  --paper-alt: #f7f2ed;
  --band-dark: #000000;

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

  /* COLOR — rules */
  --border: #e6e0d9;
  --border-mid: #c9c1b8;

  /* TYPE — two families, both matching the source */
  --font-display: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Open Sans', system-ui, -apple-system, sans-serif;

  /* TYPE — steep fluid ramp. Desktop targets at 1440:
     display 64 / h2 48 / h3 30 / h4 20 / stat 64 / body 16 */
  --text-display: clamp(2.25rem, 3.6vw + 1.05rem, 4rem);
  --text-h2: clamp(1.75rem, 2.4vw + 1rem, 3rem);
  --text-h3: clamp(1.3rem, .95vw + 1.05rem, 1.875rem);
  --text-h4: 1.25rem;
  --text-stat: clamp(2.6rem, 3.2vw + 1.3rem, 4rem);
  --text-lede: clamp(1rem, .3vw + .95rem, 1.125rem);
  --track-display: -.016em;   /* the source's -1px at 64px, made proportional */

  /* SPACE */
  --gap: 24px;
  --gutter: 2rem;
  --section: 96px;
  --section-sm: 64px;
  --section-lg: 128px;
  --maxw: 1200px;

  /* SHAPE — there is no radius in this system. The census over every painted
     box on the live page returns 0px x67 and 50% x17, and every one of the 17
     is a circular icon disc. The CSS declares border-radius:9999px 105 times
     and not one pill renders; those declarations belong to Swiper and
     WooCommerce vendor sheets. */
  --radius: 0px;
  --radius-disc: 50%;

  /* The source's only two box-shadows, both ambient and un-offset. */
  --shadow: 0 0 3px rgba(0, 0, 0, .15);
  --shadow-lg: 0 0 25px rgba(0, 0, 0, .075);

  --t-fast: 200ms;
  --t-wipe: 250ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: ease-out;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
  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);
  color: var(--ink);
  margin: 0 0 18px;
}
.display, h1 { font-size: var(--text-display); font-weight: 800; line-height: 1.1; letter-spacing: var(--track-display); }
h2, .h2      { font-size: var(--text-h2);      font-weight: 600; line-height: 1.1; letter-spacing: var(--track-display); }
h3, .h3      { font-size: var(--text-h3);      font-weight: 600; line-height: 1.25; }
h4, .h4      { font-size: var(--text-h4);      font-weight: 600; line-height: 1.4; }

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

.lede { font-size: var(--text-lede); line-height: 1.7; color: var(--ink-soft); }
.small { font-size: .875rem; }
.fine { font-size: .8rem; line-height: 1.6; color: var(--ink-muted); }

/* Focus. The source strips the outline from every form control and replaces
   it with a 1px bottom-border colour change, which is not a sufficient focus
   indicator. The orange bottom rule is kept as the signature and a real ring
   is added on top of it. Execution, not drift. */
:focus-visible { outline: 3px solid var(--utility); outline-offset: 2px; }

/* ==== 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 h4,
.section.dark .h2, .section.dark .h3, .section.dark .h4 { color: var(--on-dark); }
.section.dark p, .section.dark .lede { color: var(--on-dark-muted); }

.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(290px, 100%), 1fr)); gap: var(--gap); }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: var(--gap); }
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }

/* ==== section head + label + watermark ================================== */
/* SIGNATURE 1 — the giant outline watermark. The source sets a single word
   behind its section heading blocks at 250px Barlow 800 in ink at roughly 8%
   opacity, absolutely positioned and centre-translated, dropping to 120px at
   small breakpoints. 55 uses across the corpus. It is rendered here as a
   pseudo-element from a data attribute rather than a real text node: it is
   purely decorative, so it should not reach the accessibility tree, and a
   0.08-opacity text node would read to the contrast walker as a genuine
   failure rather than as the intended ghost. */
.section-head { position: relative; max-width: 760px; margin: 0 0 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head > * { position: relative; z-index: 1; }
.section-head[data-watermark]::before {
  content: attr(data-watermark);
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(72px, 17vw, 250px); line-height: 1; letter-spacing: -.02em;
  /* The source's construction exactly: a transparent fill with a hairline
     stroke, so the word reads as an outline rather than a solid ghost.
     Measured on the live node: -webkit-text-stroke 1px #000,
     -webkit-text-fill-color transparent, opacity .08. A first pass here used a
     solid ink fill at 8% and the visual diff caught it. The stroke is widened
     to 2px and the opacity lifted to .14: at 1px/.08 the outline all but
     vanishes on anything but a large bright display, and weight is execution
     while the outline device is the extraction. */
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  -webkit-text-fill-color: transparent;
  opacity: .14; white-space: nowrap; pointer-events: none;
  z-index: 0;
}
.section.dark .section-head[data-watermark]::before { -webkit-text-stroke-color: var(--on-dark); opacity: .12; }

/* The source's section label. It is genuine structural page grammar, above
   nearly every heading on the site, so it is kept — but the source ships two
   variants and the second one, .lte-style-header-subheader-dash, prefixes the
   label with a 50px accent rule (27 uses). That is exactly the mono-caps
   kicker with an accent dash the house format bans, so the dash is dropped
   and only the plain label survives. Ink on light rather than orange: a 12px
   label in #f8951d on white measures 2.26:1. */
.sec-label {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .25em;
  color: var(--ink-muted); margin: 0 0 14px;
}
.section.dark .sec-label, .hero-band .sec-label, .page-header .sec-label { color: var(--accent); }

/* ==== buttons =========================================================== */
/* SIGNATURE 2 — the black wipe. Every button on the source carries a black
   pseudo-element pinned to its bottom edge that grows from height 0% to 100%
   over 250ms ease-out, wiping the orange out from below. It is the strongest
   interaction on the site. Reproduced here as an animated background-size on
   a linear-gradient layer, which needs no extra markup and keeps a solid
   background-color floor under it (a gradient with no colour floor reads as
   unpainted to the contrast walker).

   DELIBERATE DEVIATION: the source sets the label white on the orange, which
   is 2.26:1 and fails at any size. The label is ink here, which is 9.31:1 on
   the same orange, and it transitions to white as the black wipe rises. The
   mechanic is the source's; only the label colour is corrected. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  text-decoration: none; line-height: 1.2;
  padding: 18px 30px; border: 0; border-radius: var(--radius); cursor: pointer;
  color: var(--ink);
  background-color: var(--accent);
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0;
  transition: background-size var(--t-wipe) var(--ease-out), color var(--t-wipe) var(--ease-out);
}
.btn:hover, .btn:focus-visible { background-size: 100% 100%; color: var(--paper); }

/* The utility blue submit, straight off the source's CF7 rule. White on
   #0075bf is 4.89:1 and passes, so this one keeps its label colour. */
.btn-utility {
  background-color: var(--utility); color: var(--paper);
  background-image: linear-gradient(var(--ink), var(--ink));
}
.btn-utility:hover, .btn-utility:focus-visible { color: var(--paper); }

.btn-outline {
  background-color: transparent; background-image: none;
  color: var(--ink); border: 2px solid var(--ink); padding: 16px 28px;
}
.btn-outline:hover, .btn-outline:focus-visible { background-color: var(--ink); color: var(--paper); }

.btn-on-dark {
  background-color: transparent; background-image: none;
  color: var(--paper); border: 2px solid rgba(255, 255, 255, .7); padding: 16px 28px;
}
.btn-on-dark:hover, .btn-on-dark:focus-visible { background-color: var(--paper); color: var(--ink); }

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

/* ==== utility bar ======================================================= */
/* Pattern 01. The client hand-added this rail in a "MY CSS" block:
   .lte-topbar-block.inited { background: #0075bf; } */
.utility-bar { background: var(--utility); color: var(--on-dark); font-size: .875rem; }
.utility-bar .container { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; padding-top: 13px; padding-bottom: 13px; }
.utility-bar a { color: var(--on-dark); text-decoration: none; }
/* `.utility-bar a` (0,1,1) outranks `.btn` (0,1,0) and was painting the Call
   back label white on the orange ground at 2.26:1. Reassert the button's ink at
   (0,2,0). Same specificity trap as the dark-section rule reaching into cards. */
.utility-bar .btn { color: var(--ink); }
.utility-bar .btn:hover, .utility-bar .btn:focus-visible { color: var(--paper); }
.utility-bar a:hover { text-decoration: underline; }
.utility-bar .item { display: inline-flex; align-items: center; gap: 8px; }
.utility-bar .spacer { margin-left: auto; }
.utility-bar .follow { color: rgba(255, 255, 255, .88); }
.utility-bar .socials { display: inline-flex; gap: 14px; }

/* ==== nav =============================================================== */
/* SIGNATURE 3 — the nav underline draws left to right. The source rule is
   `border-bottom: 2px solid var(--second); width: 0; transition: all .2s ease`
   growing to width 100% on hover. Link colour stays ink: the source shifts it
   to orange, which is 2.26:1 on the white nav. The underline is decoration,
   not text, so it keeps the brand colour and does the work. */
.nav { background: var(--paper); position: sticky; top: 0; z-index: 60; box-shadow: var(--shadow); }
.nav > .container { display: flex; align-items: center; gap: 30px; min-height: 92px; }
.nav .brand-mark { display: flex; align-items: center; flex-shrink: 0; }
.nav .brand-mark img { height: 62px; width: auto; }
.nav .links { display: flex; gap: 26px; margin-left: auto; }
.nav .links a {
  position: relative; color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem; padding: 6px 0;
}
.nav .links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--accent); transition: width var(--t-fast) ease;
}
.nav .links a:hover::after, .nav .links a:focus-visible::after, .nav .links a.active::after { width: 100%; }
.nav .actions { display: flex; align-items: center; gap: 18px; }
.nav .actions .phone { color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1rem; }

/* ==== hero ============================================================== */
/* Pattern 06. Two full-bleed photo slides with a display headline and a
   Read more. Rendered as a scroll-snap rail so it degrades to swipe on
   phones rather than depending on a slider script.

   The wrapper is `.hero-band`, deliberately NOT `.hero`. The shared
   mobile-responsive.css layer applies `.hero { padding: 88px 16px 72px }` at
   phone widths, which is right for a normal padded hero band and wrong for a
   full-bleed slider: it inset the whole rail by 16px a side and turned the
   edge-to-edge photograph into a floating card. That layer is linked after
   this file, so an equal-specificity override would lose on source order.
   Renaming sidesteps the collision entirely rather than fighting it, and every
   rule the shared layer would have supplied is defined here instead. */
.hero-band { position: relative; background: var(--band-dark); }
.hero-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.hero-rail::-webkit-scrollbar { display: none; }
.hero-slide {
  position: relative; scroll-snap-align: start; min-width: 0;
  display: flex; align-items: center;
  background-color: var(--band-dark);
  padding: clamp(88px, 11vw, 190px) 0;
}
.hero-slide .slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-slide::before { content: ""; position: absolute; inset: 0; background: var(--band-dark); opacity: .5; z-index: 1; }
.hero-slide > .container { position: relative; z-index: 2; }
.hero-slide h1, .hero-slide .display { color: var(--on-dark); max-width: 15ch; margin-bottom: 28px; }
.hero-dots { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 3; display: flex; justify-content: center; gap: 10px; }
.hero-dots span { width: 34px; height: 3px; background: rgba(255, 255, 255, .4); }
.hero-dots span.on { background: var(--accent); }

/* ==== entry cards ======================================================= */
/* Pattern 07. Three service doors that overlap the hero's lower edge. The
   source inverts the middle card to solid orange. Ink labels on the orange
   card: 9.31:1. */
.entry-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 0; margin-top: -78px; position: relative; z-index: 5; }
.entry-cards > * { min-width: 0; }
.entry-card {
  display: flex; align-items: center; gap: 20px; text-decoration: none;
  background: var(--paper); padding: 34px 30px; box-shadow: var(--shadow-lg);
  transition: background-color var(--t-fast) var(--ease);
}
.entry-card .icon { flex-shrink: 0; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.entry-card .icon svg { width: 100%; height: 100%; }
.entry-card h3 { margin: 0 0 4px; font-size: 1.375rem; }
.entry-card .sub { margin: 0; font-size: .875rem; color: var(--ink-muted); }
.entry-card.is-active { background: var(--accent); }
.entry-card.is-active .icon { color: var(--ink); }
.entry-card.is-active h3 { color: var(--ink); }
.entry-card.is-active .sub { color: rgba(0, 0, 0, .72); }
.entry-card:hover { background: var(--accent); }
.entry-card:hover .icon, .entry-card:hover h3 { color: var(--ink); }
.entry-card:hover .sub { color: rgba(0, 0, 0, .72); }

/* ==== year plate split ================================================== */
/* Pattern 08. "15 years / of experience" set as a slab beside the heading. */
.year-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 52px; align-items: center; }
.year-split > * { min-width: 0; }
/* Measured on the live node, not guessed. `.lte-heading.lte-style-year` is a
   BLACK plate at padding 16px 46px 24px carrying "15 years" at 36px Barlow 600
   in the orange and "of experience" at 18px 600 in white. A first pass here
   inverted it to an orange plate with ink text; the visual diff caught it.
   Orange on black is 9.31:1 and white on black is 21:1, so the source's own
   treatment passes contrast unchanged and is transcribed as-is. */
.year-plate { background: var(--band-dark); color: var(--on-dark); padding: 28px 46px 32px; text-align: center; align-self: start; justify-self: start; }
.year-plate .num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 2.2vw + 1.3rem, 2.25rem); line-height: 1.1; color: var(--accent); }
.year-plate .cap { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; color: var(--on-dark); margin-top: 2px; }

/* ==== plain link list =================================================== */
/* Pattern 09. A two-column list of service links, no cards, no icons. */
.link-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 48px; }
.link-list li { break-inside: avoid; border-bottom: 1px solid var(--border); }
.link-list a {
  display: block; padding: 12px 0; text-decoration: none; color: var(--ink);
  font-weight: 600; font-size: .98rem; border-bottom: 2px solid transparent;
  transition: border-color var(--t-fast) var(--ease);
}
.link-list a:hover, .link-list a:focus-visible { border-bottom-color: var(--accent); }
.link-list .last { color: var(--ink-muted); font-weight: 600; padding: 12px 0; }

/* ==== service card grid ================================================= */
/* Pattern 10. Six icon cards on the cream ground. */
.svc-card {
  background: var(--paper); padding: 36px 30px 34px; text-align: center;
  box-shadow: var(--shadow); text-decoration: none; display: block;
  transition: box-shadow var(--t-fast) var(--ease);
}
.svc-card:hover { box-shadow: var(--shadow-lg); }
.svc-card .disc {
  width: 78px; height: 78px; border-radius: var(--radius-disc);
  background: var(--accent); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.svc-card .disc svg { width: 42px; height: 42px; }
.svc-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.svc-card p { color: var(--ink-muted); font-size: .92rem; margin: 0; }

/* ==== feature band + checklist ========================================== */
/* Pattern 11. */
.feature-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 56px; align-items: center; }
.feature-split > * { min-width: 0; }
.feature-split .media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.checklist { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 2px 28px; }
.checklist > * { min-width: 0; }
.checklist li { position: relative; padding: 9px 0 9px 28px; font-size: .95rem; border-bottom: 1px solid var(--border); }
/* Ink tick on light grounds: the orange measures 2.26:1 against white. */
.checklist li::before { content: "\2713"; position: absolute; left: 0; top: 9px; color: var(--ink); font-weight: 700; }
.section.dark .checklist li { border-bottom-color: rgba(255, 255, 255, .18); color: var(--on-dark-muted); }
.section.dark .checklist li::before { color: var(--accent); }

/* ==== stat counters ===================================================== */
/* Pattern 12. The source runs these at 64px Barlow 600 in orange on white,
   which is 2.26:1 and fails even the large-text floor. Ink on light grounds,
   orange on dark where it measures 9.31:1 and is what the source uses there.
   The numerals are placeholders by design: the source's own four are theme
   demo data whose first label reads "Insulation", which is not a countable
   unit, so no figure here is transcribed as a claim. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--gap); }
.stats > * { min-width: 0; }
.stat { text-align: center; }
.stat .num { font-family: var(--font-display); font-weight: 600; font-size: var(--text-stat); line-height: 1; color: var(--ink); }
.stat .label { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink-soft); margin-top: 10px; }
.section.dark .stat .num { color: var(--accent); }
.section.dark .stat .label { color: var(--on-dark-muted); }

/* ==== numbered steps + navy form panel ================================== */
/* Pattern 13. The source's steps are 01/02/03 beside a translucent navy
   panel. The panel colour is the client's own: .form5star { background:
   #0c233adb } — #0c233a at 86%. The solid colour is declared under the
   translucency so the panel is never an unpainted ground. */
.step-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 56px; align-items: start; }
.step-split > * { min-width: 0; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { display: flex; gap: 22px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--border); }
.step:last-child { border-bottom: 0; }
/* Ink on light grounds: the accent numeral measures 2.26:1 on white and
   2.03:1 on the warm band, under the large-text floor in both cases. */
.step .n { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--ink); flex-shrink: 0; }
.step .t { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.section.dark .step { border-bottom-color: rgba(255, 255, 255, .18); }
.section.dark .step .n { color: var(--accent); }
.section.dark .step .t { color: var(--on-dark); }

.form-panel {
  background-color: var(--accent-deep);
  background-image: linear-gradient(rgba(12, 35, 58, .86), rgba(12, 35, 58, .86));
  color: var(--on-dark); padding: 40px 36px 42px;
}
.form-panel h3 { color: var(--on-dark); text-align: center; font-size: 1.8rem; margin-bottom: 24px; }
.form-panel .field { margin-bottom: 16px; }
.form-panel label { display: block; font-size: .8rem; font-weight: 600; color: var(--on-dark-muted); margin-bottom: 6px; }
.form-panel input[type="text"], .form-panel input[type="tel"], .form-panel input[type="email"], .form-panel textarea, .form-panel select {
  width: 100%; padding: 13px 20px; border: 0; border-bottom: 2px solid transparent;
  border-radius: var(--radius); background: var(--paper); color: var(--ink); font: inherit; font-size: .95rem;
}
/* The source's focus treatment: border-bottom-color turns orange. Kept, with
   a real ring added by the global :focus-visible rule above. */
.form-panel input:focus, .form-panel textarea:focus, .form-panel select:focus { border-bottom-color: var(--accent); }
.form-panel textarea { min-height: 110px; resize: vertical; }
.form-panel .fine { color: var(--on-dark-quiet); }

/* ==== dark photo CTA band =============================================== */
/* Pattern 14. */
.cta-dark { position: relative; background-color: var(--band-dark); color: var(--on-dark); padding: var(--section) 0; overflow: hidden; }
.cta-dark .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .38; }
.cta-dark > .container { position: relative; z-index: 2; }
.cta-dark h2, .cta-dark h3 { color: var(--on-dark); }
.cta-dark p { color: var(--on-dark-muted); }
.cta-dark .phone-lockup { margin: 26px 0 22px; }
.cta-dark .phone-lockup .k { font-family: var(--font-display); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: .16em; color: var(--accent); display: block; margin-bottom: 8px; }
.cta-dark .phone-lockup .v { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3.4vw + 1rem, 3.25rem); line-height: 1; color: var(--on-dark); text-decoration: none; letter-spacing: var(--track-display); }

/* ==== reviews =========================================================== */
/* Pattern 15 and 27. Cards paint their own white ground inside a cream or
   dark band, so their ink is reasserted at higher specificity than any
   section-level colour rule. Register every new light-ground component here
   as it is written — a dark-band `p` rule reaches into any descendant that
   paints its own light ground. */
.review-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(400px, 82vw); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.review-rail > * { scroll-snap-align: start; min-width: 0; }
.review-card { background: var(--paper); padding: 32px 30px 30px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--gap); }
.review-grid > * { min-width: 0; }
.review-card .quote { color: var(--ink-soft); font-size: .95rem; margin: 0 0 20px; flex: 1; }
.review-card .who { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); margin: 0; }
.section.dark .review-card .quote { color: var(--ink-soft); }
.section.dark .review-card .who { color: var(--ink); }

/* ==== facts row ========================================================= */
/* Pattern 16. Four icon-and-copy items, on every page above the footer. */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 36px var(--gap); }
.facts > * { min-width: 0; }
.fact { text-align: center; }
.fact .disc { width: 66px; height: 66px; border-radius: var(--radius-disc); background: var(--accent); color: var(--ink); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.fact .disc svg { width: 34px; height: 34px; }
.fact h4 { font-size: 1.125rem; margin-bottom: 8px; line-height: 1.3; }
.fact p { font-size: .9rem; color: var(--ink-muted); margin: 0; }
.section.dark .fact p { color: var(--on-dark-muted); }

/* ==== inner page header ================================================= */
/* SIGNATURE 4 — the parallax page header. Every inner page on the source
   opens with a full-bleed photo at background-attachment:fixed carrying a
   white h1 and a breadcrumb trail. It is the only per-page variable in the
   whole inner-page template: ~30 service pages share one byte-identical
   stylesheet and differ only in this image. A solid dark background-color
   sits under the photo so the white text is never on an unpainted ground. */
.page-header {
  position: relative; background-color: var(--band-dark);
  background-size: cover; background-position: center; background-attachment: fixed;
  color: var(--on-dark); padding: clamp(96px, 10vw, 168px) 0 clamp(72px, 8vw, 120px);
}
.page-header::before { content: ""; position: absolute; inset: 0; background: var(--band-dark); opacity: .58; }
.page-header > .container { position: relative; z-index: 2; }
.page-header h1 { color: var(--on-dark); font-weight: 600; letter-spacing: 0; margin-bottom: 14px; }
.breadcrumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; font-size: .9rem; color: var(--on-dark-muted); }
.breadcrumbs a { color: var(--on-dark-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--on-dark); }
.breadcrumbs li + li::before { content: "/"; margin-right: 10px; color: var(--on-dark-quiet); }

/* ==== long-form content blocks ========================================== */
/* Pattern 20. Alternating heading-and-paragraph blocks. The source's headings
   break onto a second line on a geographic phrase. */
.qa-stack > .qa { padding: 32px 0; border-bottom: 1px solid var(--border); }
.qa-stack > .qa:last-child { border-bottom: 0; }
.qa-stack h2 { margin-bottom: 14px; }
.qa-stack .place { display: block; font-weight: 600; font-size: .82em; }

/* Pattern 22. Bold term, dash, explanation. */
.deliverables { list-style: none; margin: 0; padding: 0; }
.deliverables li { padding: 16px 0; border-bottom: 1px solid var(--border); font-size: .98rem; color: var(--ink-soft); }
.deliverables li:last-child { border-bottom: 0; }
.deliverables strong { font-family: var(--font-display); font-weight: 700; color: var(--ink); }

/* ==== why-choose grid =================================================== */
/* Pattern 21. Closes every service page on the source. */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 4px; }
.why-grid > * { min-width: 0; }
.why-item { display: flex; align-items: center; gap: 14px; background: var(--paper); padding: 22px 20px; box-shadow: var(--shadow); }
.why-item .disc { width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--radius-disc); background: var(--accent); color: var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.why-item .disc svg { width: 22px; height: 22px; }
.why-item .t { font-family: var(--font-display); font-weight: 600; font-size: .98rem; color: var(--ink); line-height: 1.3; }

/* ==== team ============================================================== */
/* Patterns 23 and 24. */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--gap); }
.team-grid > * { min-width: 0; }
.team-card { background: var(--paper); box-shadow: var(--shadow); text-decoration: none; display: block; }
.team-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.team-card .body { padding: 22px 22px 24px; text-align: center; }
.team-card h3 { font-size: 1.25rem; margin-bottom: 4px; }
.team-card .role { font-size: .875rem; color: var(--ink-muted); margin: 0; }

.team-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 48px; align-items: start; }
.team-detail > * { min-width: 0; }
.team-detail img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.spec-rows { list-style: none; margin: 0 0 26px; padding: 0; }
.spec-rows li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: .95rem; }
.spec-rows .k { font-family: var(--font-display); font-weight: 700; color: var(--ink); min-width: 140px; }

/* ==== contact =========================================================== */
/* Pattern 25. */
.contact-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--gap); }
.contact-cols > * { min-width: 0; }
.contact-col .disc { width: 58px; height: 58px; border-radius: var(--radius-disc); background: var(--accent); color: var(--ink); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.contact-col .disc svg { width: 28px; height: 28px; }
.contact-col h3 { font-size: 1.15rem; margin-bottom: 10px; }
.contact-col p, .contact-col a { color: var(--ink-soft); font-size: .95rem; text-decoration: none; margin: 0; }
.contact-col a:hover { border-bottom: 2px solid var(--accent); }
.map-slot { width: 100%; aspect-ratio: 21 / 9; background: var(--paper-alt); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--ink-muted); font-size: .9rem; }

/* A white form card for light bands; the navy .form-panel is the dark one. */
.form-card { background: var(--paper); box-shadow: var(--shadow); padding: 34px 32px 36px; }
.form-card .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-card .field { margin-bottom: 18px; }
.form-card label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.form-card input[type="text"], .form-card input[type="tel"], .form-card input[type="email"], .form-card textarea, .form-card select {
  width: 100%; padding: 13px 16px; border: 1px solid var(--border-mid); border-bottom: 2px solid var(--border-mid);
  border-radius: var(--radius); background: var(--paper); color: var(--ink); font: inherit; font-size: .95rem;
}
.form-card input:focus, .form-card textarea:focus, .form-card select:focus { border-bottom-color: var(--accent); }
.form-card textarea { min-height: 120px; resize: vertical; }

/* ==== job posting ======================================================= */
/* Pattern 26. */
.job-post h3 { margin-bottom: 18px; }
.req-list { list-style: none; margin: 0 0 26px; padding: 0; }
.req-list li { position: relative; padding: 12px 0 12px 28px; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--ink); }
.req-list li::before { content: ""; position: absolute; left: 0; top: 20px; width: 14px; height: 2px; background: var(--accent); }

/* ==== blog ============================================================== */
/* Pattern 28. */
.post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--gap); }
.post-grid > * { min-width: 0; }
.post-card { background: var(--paper); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.post-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.post-card .body { padding: 24px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.post-card .meta { font-size: .8rem; color: var(--ink-muted); margin-bottom: 10px; display: flex; gap: 14px; flex-wrap: wrap; }
.post-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.post-card p { color: var(--ink-soft); font-size: .93rem; margin-bottom: 18px; }
.post-card .more { margin-top: auto; font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--accent); align-self: flex-start; padding-bottom: 2px; }

/* ==== gallery =========================================================== */
/* Pattern 29. The source hover is a straight opacity drop to .75. */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.gallery > * { min-width: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: opacity var(--t-fast) var(--ease); }
.gallery a:hover img { opacity: .75; }

/* ==== footer ============================================================ */
/* Patterns 03 and 04. The source footer carries no logo, only four labelled
   contact columns on black, so the lockup here is text. */
.footer { background: var(--band-dark); color: var(--on-dark-muted); padding: var(--section-sm) 0 0; }
.footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 36px var(--gap); padding-bottom: 46px; }
.footer .cols > * { min-width: 0; }
.footer h4 { color: var(--on-dark); font-family: var(--font-display); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .2em; margin-bottom: 14px; }
.footer p, .footer a { color: var(--on-dark-muted); font-size: .95rem; text-decoration: none; line-height: 1.8; }
.footer a:hover { color: var(--on-dark); }
.footer .big { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--on-dark); }
.legal-bar { background: var(--band-dark); border-top: 1px solid rgba(255, 255, 255, .16); }
.legal-bar .container { padding-top: 20px; padding-bottom: 24px; }
.legal-bar p { margin: 0; font-size: .82rem; color: var(--on-dark-muted); }

/* ==== back to top ======================================================= */
/* Pattern 05. */
.to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 70;
  width: 48px; height: 48px; border-radius: var(--radius-disc);
  background: var(--accent); color: var(--ink); border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--t-fast) var(--ease);
}
.to-top:hover { transform: translateY(-3px); }
.to-top svg { width: 20px; height: 20px; }

/* ==========================================================================
   SHOWCASE CHROME — ds-nav, sections catalog, pages gallery. Kept 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: var(--on-dark);
  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); font-weight: 700; font-size: 1rem; color: var(--on-dark); }
.ds-nav .lockup-text small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .78rem; 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: var(--on-dark); }

.ds-hero { background: var(--paper-alt); padding: 58px 0 50px; }
.ds-hero h1 { margin-bottom: 14px; }

.meta-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 20px; margin-top: 34px; }
.meta-strip > * { min-width: 0; }
.meta-strip .k { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); margin-bottom: 4px; }
.meta-strip .v { font-weight: 600; color: var(--ink); font-size: .95rem; }

.door-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--gap); }
.door-cards > * { min-width: 0; }
.door { display: block; text-decoration: none; background: var(--paper); border: 1px solid var(--border); padding: 28px 26px 30px; transition: border-color var(--t-fast) var(--ease); }
.door:hover { border-color: var(--accent); }
.door h3 { margin-bottom: 8px; font-size: 1.25rem; }
.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 > div > * { min-width: 0; }
.files-list code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86rem; color: var(--ink); word-break: break-word; }
.files-list .what { color: var(--ink-soft); }

.char-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--gap); }
.char-grid > * { min-width: 0; }

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 16px; }
.swatch-grid > * { min-width: 0; }
.swatch .chip { height: 92px; border: 1px solid var(--border); }
.swatch .name { font-family: var(--font-display); font-weight: 700; font-size: .88rem; margin-top: 10px; color: var(--ink); }
.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: 24px 0; border-bottom: 1px solid var(--border); align-items: baseline; }
.type-spec > * { min-width: 0; }
.type-spec .note { font-size: .82rem; color: var(--ink-muted); line-height: 1.55; }

.chip-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.chip-tag { background: var(--paper); border: 1px solid var(--border-mid); padding: 6px 14px; font-size: .78rem; font-weight: 600; color: var(--ink); }
.anchor-tile { background: var(--paper-alt); 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: var(--on-dark); padding: 22px 32px 20px; }
.sx-header h1 { color: var(--on-dark); margin: 0 0 6px; font-size: 1.2rem; letter-spacing: 0; }
/* 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 is not the one exception. */
.sx-header h1 small { font-family: var(--font-body); font-weight: 400; font-size: .82rem; margin-left: 10px; }
.sx-header p { margin: 0; font-size: .88rem; color: var(--on-dark-muted); }
.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; letter-spacing: 0; }
.sx-index .grid { display: flex; flex-direction: column; gap: 2px; }
.sx-index a { color: var(--ink-soft); text-decoration: none; font-size: .84rem; padding: 6px 0; border-bottom: 1px solid var(--border); }
.sx-index a:hover { color: var(--ink); border-bottom-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); }
.pattern-meta .id .signature { background: var(--accent-soft); color: var(--accent-deep); padding: 3px 8px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; }
.pattern-meta .name { font-family: var(--font-display); font-weight: 700; color: var(--ink); 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); padding: 28px; overflow: hidden; }
.sx-demo.flush { padding: 0; }
.sx-demo .demo-label { position: absolute; top: 8px; right: 12px; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-quiet); z-index: 20; }

/* 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; }
.pages-gallery .grid > * { min-width: 0; }
.page-card { border: 1px solid var(--border); 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 { font-family: var(--font-display); font-weight: 700; text-decoration: none; font-size: .88rem; color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }

/* ==========================================================================
   RESPONSIVE — descending width order. Equal-specificity rules resolve by
   source order, so 880 must precede 768 must precede 560.
   ========================================================================== */
@media (max-width: 880px) {
  .year-split, .feature-split, .step-split, .team-detail, .sx-body { grid-template-columns: 1fr; }
  .year-split, .feature-split, .step-split, .team-detail { gap: 34px; }
  .entry-cards { margin-top: -40px; }
  .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); }
  .link-list { columns: 1; }
}

@media (max-width: 768px) {
  /* +1 specificity is required, not optional: mobile-responsive.css is linked
     after this file, so a bare `.hero-slide h1` ties the shared rule and loses
     on source order. Barlow 800 at 45 characters ran to five lines at 375px
     and pushed the CTA off-screen. */
  .hero-slide .container h1, .hero-slide .container .display { font-size: clamp(26px, 7.4vw, 52px); line-height: 1.12; }
  .page-header .container h1 { font-size: clamp(26px, 7.4vw, 48px); }
  .nav .actions { display: none; }
  .nav > .container { min-height: 70px; }
  .nav .brand-mark img { height: 46px; }
  .utility-bar .container { justify-content: center; text-align: center; }
  .utility-bar .spacer { margin-left: 0; }
  .entry-cards { margin-top: 0; }
  /* Fixed attachment is a known iOS Safari failure mode and repaints badly on
     any touch device; the photo stays, the parallax does not. */
  .page-header { background-attachment: scroll; }
  .form-panel { padding: 30px 24px 32px; }
  .form-card { padding: 26px 22px 28px; }
  .sx-main { padding: 24px 20px 72px; }
  .sx-demo { padding: 18px; }
  .pages-gallery { padding: 28px 20px 72px; }
}

@media (max-width: 560px) {
  .form-card .row { grid-template-columns: 1fr; }
  .checklist { grid-template-columns: 1fr; }
  .ds-nav { padding: 14px 20px; }
  .sx-header { padding: 18px 20px 16px; }
}