/* =============================================================================
   MASTER trades-genzryan-static, concept preview by PXLNorth.
   Recreated from templates/blueprints/trades/genzryan (genzryan.com: heating, cooling,
   plumbing and electrical, captured 2026-08-08) and built first for Clutch-Pro, Calgary
   (the source build, runs/clutch-pro-trades.test). Structure and energy come from the
   blueprint: a promo strip over the nav, a hero with a plate eyebrow, a heavy headline and
   proof lines, a service quad of offer cards, a heritage ribbon with a founding-year badge,
   dashed coupons, the process beside the quote form, reviews, the service area on a map,
   their questions, and a final photo band. Every colour and font below is a slot the
   tailor pass fills per business.

   TYPE (voice "workshop"): Barlow Condensed 700/800 for display, set in capitals like truck
   lettering and shop signage; Barlow 400/500/600/700 for everything read. Chosen for a trade
   that sells speed and straight talk: condensed capitals carry an offer at poster size and
   still fit a phone, the body face stays plain and legible. Never Fraunces.

   COLOUR (paletteMode pro, site-first, signalPalette). Three jobs, never mixed:
     --panel / --panel-2   the dark ground (hero, service quad, quote band, footer), derived
                           from their brand hue so a navy shop reads navy and a yellow shop
                           reads warm charcoal;
     --signal              their colour AS THEIR PAGE PAINTS IT, used only as a FILL (plates,
                           the primary button, the ribbon badge ring, highlighter headlines)
                           with --signal-ink on it; --signal-on-dark is the same hue lifted to
                           4.5:1 for the one accent word on the panel;
     --hot                 their second colour (a red button, a teal link), the quote
                           buttons and the ribbon, with --hot-ink on it.
   Text on light grounds is --ink / --ink-2 / --brand (the text-safe brand).
   ========================================================================= */

:root {
  --ink: #242319;
  --ink-2: #4b493a;
  --ink-3: #6f6d60;
  --brand: #7e7316;
  --brand-deep: #534b0e;
  --canvas: #ffffff;
  --paper: #fbfbfb;
  --paper-2: #F1F0EE;
  --line: #e7e6dc;
  --line-strong: color-mix(in srgb, var(--ink) 22%, var(--line));
  --panel: #333124;
  --panel-2: #1C1B14;
  --footer: #1E1E16;
  --signal: #FDE202;
  --signal-ink: #10151A;
  --signal-on-dark: #FDE202;
  --hot: #E50606;
  --hot-ink: #FFFFFF;
  --on-dark: #ffffff;
  --on-dark-2: rgba(255, 255, 255, .82);
  --on-dark-line: rgba(255, 255, 255, .22);

  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --sans: "Barlow", "Segoe UI", system-ui, sans-serif;

  --wrap: 1200px;
  --pad: clamp(16px, 4vw, 40px);
  --band: clamp(56px, 6.5vw, 96px);
  --radius: 14px;
  --mh-h: 108px;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
/* No scroll-behavior: smooth. It buried anchor targets under late font/image shifts on the clinical
   master (memory smooth-scroll-verdict) and, here, made the proof capture photograph the map's slot
   before the scroll had arrived: the phone read "repeated the whole page" after the map. */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 17px/1.6 var(--sans); }
img { display: block; max-width: 100%; }
picture { display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--canvas); color: var(--ink); padding: 10px 14px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--hot); outline-offset: 3px; }
[id] { scroll-margin-top: 24px; }
.wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.display { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .005em; line-height: .98; font-size: clamp(36px, 4.6vw, 60px); }
.eyebrow { font: 700 14px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; }
.plate { display: inline-block; background: var(--signal); color: var(--signal-ink); font: 800 15px/1.25 var(--display); letter-spacing: .07em; text-transform: uppercase; padding: 8px 14px 7px; margin-bottom: 18px; }
.band-head { margin-bottom: clamp(28px, 4vw, 48px); max-width: 760px; }
.band-head .display + .band-lede { margin-top: 16px; }
.band-lede { font-size: 18px; color: var(--ink-2); max-width: 640px; }
.band-note { margin-top: 24px; color: var(--ink-2); font-size: 15px; }

/* buttons: one shape, three fills */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 24px; border-radius: 999px; border: 2px solid transparent; font: 700 16.5px/1.1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.btn-sm { min-height: 42px; padding: 9px 16px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-signal { background: var(--signal); color: var(--signal-ink); }
.btn-hot { background: var(--hot); color: var(--hot-ink); }
.btn-ghost { border-color: rgba(255, 255, 255, .6); color: var(--on-dark); background: rgba(0, 0, 0, .12); }
.btn-line { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.ico-go { margin-left: 2px; }

/* -------------------------------------------------------------- masthead */
.masthead { position: relative; z-index: 20; background: var(--canvas); }
.mh-bar { background: var(--paper); border-bottom: 3px solid var(--signal); font-size: 14px; }
.mh-bar-row { display: flex; align-items: stretch; justify-content: space-between; height: 34px; }
.mh-offer { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--brand-deep); font-weight: 700; text-decoration: none; }
.mh-offer-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-offer-ico { display: inline-flex; color: var(--hot); }
a.mh-offer:hover .mh-offer-text { text-decoration: underline; }
.mh-contact { display: flex; align-items: center; gap: 22px; padding-left: 22px; background: var(--panel); color: var(--on-dark); box-shadow: 0 0 0 100vmax var(--panel); clip-path: inset(0 -100vmax 0 0); }
.mh-today, .mh-phone { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 600; }
.mh-phone { text-decoration: none; font-weight: 700; }
.mh-row { display: flex; align-items: center; gap: 28px; height: 71px; }
.mh-brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; min-width: 0; }
.mh-logo { max-height: 52px; height: auto; width: auto; max-width: 220px; min-width: 0; object-fit: contain; }
.mh-word { font: 800 26px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.mh-nav { margin-left: auto; }
.mh-nav ul { display: flex; gap: 26px; }
.mh-nav a { font: 600 16px/1 var(--sans); text-decoration: none; white-space: nowrap; padding: 8px 0; border-bottom: 2px solid transparent; }
.mh-nav a:hover { border-bottom-color: var(--signal); }
.mh-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.mh-quote-short { display: none; }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; overflow: hidden; background: var(--panel); color: var(--on-dark); }
.hero-inner { position: relative; z-index: 2; display: grid; align-items: center; min-height: 700px; padding-block: 88px 96px; }
.hero-copy { max-width: 640px; }
.hero-title { font: 800 clamp(46px, 6.3vw, 88px)/.94 var(--display); text-transform: uppercase; letter-spacing: .003em; text-wrap: balance; }
.h1-accent { color: var(--signal-on-dark); }
.hero-sub { margin-top: 22px; font-size: 19px; line-height: 1.55; color: var(--on-dark-2); max-width: 560px; }
.proofs { margin-top: 26px; display: grid; gap: 12px; }
.proofs li { position: relative; padding-left: 36px; font-weight: 600; font-size: 18px; line-height: 1.4; }
.proofs li::before { content: ""; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: var(--signal); }
.proofs li::after { content: ""; position: absolute; left: 8px; top: 6px; width: 7px; height: 12px; border: solid var(--signal-ink); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

/* bleed: their frame fills the band; the scrim darkens the copy side only, the photograph stays visible */
.hero--bleed .hero-photo { position: absolute; inset: 0; margin: 0; }
/* The scrim holds the copy column (up to ~46% of the band) near the panel colour, so the accent word
   reads over a bright sky, then opens fast: the right half of their photograph stays visible. */
.hero--bleed .hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--panel) 92%, transparent) 0%, color-mix(in srgb, var(--panel) 84%, transparent) 34%, color-mix(in srgb, var(--panel) 40%, transparent) 54%, color-mix(in srgb, var(--panel) 6%, transparent) 76%, transparent 100%); }
.hero--bleed .hero-photo picture { height: 100%; }
/* split: a frame that is not hero-worthy takes the right half, never sits behind the headline */
.hero--split .hero-photo { position: absolute; top: 0; bottom: 0; right: 0; width: 50%; margin: 0; border-left: 6px solid var(--signal); }
.hero--split .hero-photo picture { height: 100%; }
/* A storefront's sign sits in the upper part of the frame; the crop favours it over the lot. */
.hero--split .hero-photo img { object-position: 50% 38%; }
/* The copy column is the left half itself (gutter included), so the band reads as copy beside
   photograph edge to edge (audit-hero-coverage counts a copy column that overlaps no photograph). */
.hero--split .hero-inner { width: 50%; margin: 0; padding-left: max(var(--pad), (100vw - var(--wrap)) / 2); padding-right: clamp(28px, 4vw, 56px); }
.hero--split .hero-copy { max-width: 560px; }
/* window: a smaller frame, inside the margins beside the copy */
.hero--window .hero-photo { position: absolute; z-index: 2; top: 50%; right: max(var(--pad), (100% - var(--wrap)) / 2); transform: translateY(-50%); width: min(520px, 40%); margin: 0; border: 6px solid var(--canvas); border-radius: 6px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.hero--window .hero-photo img { aspect-ratio: 4 / 3; }
.hero--window .hero-copy { max-width: min(600px, 52%); }
/* type: no frame, the panel colour with one signal rule */
.hero--type .hero-inner { min-height: 560px; }
.hero--type::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--signal); }

/* ------------------------------------------------------------- services */
.services { padding-block: var(--band); background: var(--panel-2); color: var(--on-dark); }
.services .band-lede { color: var(--on-dark-2); }
.services[data-band-as="type"] { background: var(--paper); color: var(--ink); }
.services[data-band-as="type"] .band-lede { color: var(--ink-2); }
.svc-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.svc-card { flex: 1 1 250px; max-width: 380px; display: flex; flex-direction: column; background: var(--canvas); color: var(--ink); border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, .22); }
.services[data-band-as="type"] .svc-card { border: 1px solid var(--line); box-shadow: 0 10px 26px rgba(0, 0, 0, .06); }
.svc-offer { display: flex; align-items: flex-start; gap: 8px; padding: 13px 18px; background: var(--paper-2); border-bottom: 1px solid var(--line); font-weight: 700; font-size: 15px; line-height: 1.35; }
.svc-offer-ico { display: inline-flex; color: var(--hot); margin-top: 1px; }
.svc-body { flex: 1 0 auto; padding: 22px 22px 20px; }
.services .eyebrow, .story-panel .eyebrow { color: var(--signal-on-dark); }
.services[data-band-as="type"] .eyebrow, [data-band-as="type"].story .story-panel .eyebrow { color: var(--brand); }
/* Titles reserve two lines in a row of cards, so every card's body starts at the same height. */
.svc-title { font: 800 30px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; min-height: 2em; }
.svc-blurb { margin-top: 12px; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 12px; font-size: 14px; font-weight: 500; line-height: 1.3; }
/* The per-card ask is a quiet link along the card's foot, not a fourth identical button: the page
   has one filled action colour, and a row of four filled buttons read as noise (round 1 reader). */
.svc-go { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 15px 22px; border-top: 1px solid var(--line); color: var(--brand-deep); font-weight: 700; font-size: 15px; text-decoration: none; }
.svc-go:hover { background: var(--paper); }
.svc-go .ico { color: var(--hot); }

/* ---------------------------------------------------------------- story */
.story { background: var(--canvas); }
/* The ribbon is their colour (the one action colour), the badge a ring of the panel colour. */
.ribbon { background: var(--signal); color: var(--signal-ink); }
.ribbon-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 120px; }
.ribbon-text { font: 800 clamp(28px, 3.6vw, 48px)/1.02 var(--display); text-transform: uppercase; letter-spacing: .01em; padding-block: 30px; }
.badge { flex: none; width: 140px; height: 140px; margin-block: -18px; border-radius: 50%; background: var(--canvas); color: var(--ink); border: 7px solid var(--panel); box-shadow: 0 10px 28px rgba(0, 0, 0, .25); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 2; }
.badge-est { font: 700 14px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.badge-year { font: 800 44px/1 var(--display); }
.story-grid { display: grid; }
/* No ribbon authored: the founding year is a stamp in the story card instead of a band of its own. */
.stamp { float: right; margin: 0 0 18px 22px; width: 116px; height: 116px; border-radius: 50%; border: 5px solid var(--signal); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-6deg); }
.stamp .badge-est { color: var(--on-dark-2); }
[data-band-as="type"].story .stamp .badge-est { color: var(--ink-2); }
.story-panel { background: var(--panel); color: var(--on-dark); }
.story-copy { padding: var(--band) clamp(24px, 5vw, 72px); max-width: 720px; }
.story-copy .display { font-size: clamp(34px, 4vw, 54px); }
.story-quote { margin-top: 24px; padding-left: 22px; border-left: 5px solid var(--signal); }
.story-quote p { font: 700 clamp(22px, 2.2vw, 28px)/1.3 var(--sans); }
.story-quote footer { margin-top: 12px; font-weight: 600; color: var(--on-dark-2); }
.story-p { margin-top: 18px; color: var(--on-dark-2); }
.facts { margin-top: 28px; display: grid; gap: 10px; }
.facts li { position: relative; padding-left: 26px; font-weight: 700; }
.facts li::before { content: ""; position: absolute; left: 0; top: .42em; width: 12px; height: 12px; background: var(--signal); }
.story-photo { margin: 0; }
.story-photo img { width: 100%; height: 100%; object-fit: cover; }
.story-photo picture { height: 100%; }
[data-band-as="bleed"].story .story-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
[data-band-as="bleed"].story .story-photo { min-height: 560px; }
[data-band-as="bleed"].story .story-copy { padding-right: max(var(--pad), (100vw - var(--wrap)) / 2); }
/* Photo and story card share their top edge (round 1: a smaller photo centred beside a taller card
   read as floating). Print box at 1440 ~574x430 (photoFit story.photo print 600x450). */
[data-band-as="contained"].story .story-grid { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; padding-block: var(--band); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 52px); align-items: start; }
/* The print runs the height of the story card beside it (capped at 640px, photoFit print 600x640),
   so no white void opens under a shorter photograph (round 2, all three strict readers). */
[data-band-as="contained"].story .story-grid:has(.story-photo--print) { align-items: stretch; }
[data-band-as="contained"].story .story-photo { border-radius: var(--radius); overflow: hidden; }
[data-band-as="contained"].story .story-photo img { aspect-ratio: 4 / 3; }
[data-band-as="contained"].story .story-photo--print img { aspect-ratio: auto; min-height: 420px; max-height: 640px; }
/* A wide banner (a small site's 900x400 slider frame) sits ABOVE the story as one wide print, the
   card under it, instead of a short strip beside a tall card. */
[data-band-as="contained"].story .story-grid:has(.story-photo--wide) { grid-template-columns: minmax(0, 900px); justify-content: center; }
/* A wide shop banner (a small site's 900x400 slider frame) keeps its own shape as a wide print. */
[data-band-as="contained"].story .story-photo--wide img { aspect-ratio: 16 / 7; }
[data-band-as="contained"].story .story-panel { border-radius: var(--radius); }
[data-band-as="contained"].story .story-copy { padding: clamp(32px, 4vw, 56px); }
[data-band-as="type"].story .story-grid, [data-band-as="inverse"].story .story-grid { padding-block: var(--band); }
[data-band-as="type"].story .story-panel { background: transparent; color: var(--ink); }
[data-band-as="type"].story .story-p, [data-band-as="type"].story .story-quote footer { color: var(--ink-2); }
[data-band-as="type"].story .story-copy, [data-band-as="inverse"].story .story-copy { padding: 0; margin-inline: auto; width: min(100% - 2 * var(--pad), 760px); max-width: none; }
[data-band-as="inverse"].story { background: var(--panel); }

/* --------------------------------------------------------------- offers */
.offers { padding-block: var(--band); background: var(--paper); }
.coupons { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.coupon { flex: 1 1 300px; max-width: 580px; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; border: 3px dashed var(--line-strong); border-radius: var(--radius); background: var(--canvas); padding: 32px 28px; text-align: center; }
.coupon-head { font: 800 clamp(28px, 2.8vw, 38px)/1.04 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.coupon-head { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--signal) 70%, transparent) 58%); display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 4px; }
.coupon-line { margin-top: 14px; font-weight: 600; font-size: 17px; }
.coupon-fine { margin-top: 10px; font-size: 14.5px; color: var(--ink-2); }
[data-band-as="inverse"].offers { background: var(--panel); color: var(--on-dark); }
[data-band-as="inverse"].offers .coupon { background: transparent; border-color: color-mix(in srgb, var(--signal-on-dark) 70%, transparent); }
[data-band-as="inverse"].offers .coupon-head { background: none; color: var(--signal-on-dark); }
[data-band-as="inverse"].offers .coupon-fine, [data-band-as="inverse"].offers .band-note { color: var(--on-dark-2); }

/* ---------------------------------------------------------------- quote */
.quote { padding-block: var(--band); background: var(--panel); color: var(--on-dark); }
.quote-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
/* No published process: the left column is the other ways to reach them, real channels only. */
.reach { margin-top: 30px; display: grid; gap: 12px; }
.reach-row { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--on-dark-line); border-radius: var(--radius); background: rgba(255, 255, 255, .04); text-decoration: none; }
.reach-row:hover { background: rgba(255, 255, 255, .09); }
.reach-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--signal); color: var(--signal-ink); }
.reach-k { display: block; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2); }
.reach-v { display: block; margin-top: 2px; font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
[data-band-as="type"].quote .reach-row { border-color: var(--line); background: var(--canvas); }
[data-band-as="type"].quote .reach-k { color: var(--ink-2); }
.process .band-lede { margin-top: 14px; color: var(--on-dark-2); }
.steps { margin-top: 30px; counter-reset: step; display: grid; gap: 14px; }
.step { position: relative; counter-increment: step; padding: 20px 22px 20px 84px; border: 1px solid var(--on-dark-line); border-radius: var(--radius); background: rgba(255, 255, 255, .04); }
.step::before { content: counter(step, decimal-leading-zero); position: absolute; left: 22px; top: 16px; font: 800 38px/1 var(--display); color: var(--signal-on-dark); }
.step-title { font-weight: 700; font-size: 19px; line-height: 1.3; }
.step-text { margin-top: 6px; color: var(--on-dark-2); font-size: 16px; line-height: 1.55; }
.form-card { background: var(--canvas); color: var(--ink); border-radius: calc(var(--radius) + 4px); padding: clamp(24px, 3vw, 36px); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.form-plate { display: inline-block; margin-bottom: 14px; border: 2px dashed var(--hot); color: var(--ink); padding: 6px 12px; font-weight: 700; font-size: 14px; }
.form-plate:empty { display: none; }
.form-title { font: 800 clamp(30px, 3vw, 40px)/1 var(--display); text-transform: uppercase; }
.form-intro { margin-top: 10px; color: var(--ink-2); font-size: 16px; }
.qform { margin-top: 22px; display: grid; gap: 14px; }
.qrow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qfield { display: grid; gap: 6px; font-weight: 600; font-size: 14.5px; }
.qfield input, .qfield select, .qfield textarea { width: 100%; font: 400 16px/1.4 var(--sans); color: var(--ink); background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: 10px; padding: 12px 14px; }
.qfield textarea { resize: vertical; min-height: 110px; }
.qfield input:focus, .qfield select:focus, .qfield textarea:focus { outline: 3px solid color-mix(in srgb, var(--hot) 40%, transparent); outline-offset: 1px; border-color: var(--hot); }
.qform .btn { margin-top: 4px; }
.qdone { margin-top: 22px; padding: 22px; border-radius: var(--radius); background: var(--paper); border-left: 6px solid var(--signal); }
.qdone[hidden] { display: none; }
.qdone-title { font: 800 26px/1.05 var(--display); text-transform: uppercase; margin-bottom: 8px; }
.qdone p + p { margin-top: 8px; }
.qdone a { font-weight: 700; color: var(--brand-deep); }
.qform[hidden] { display: none; }
[data-band-as="type"].quote { background: var(--paper); color: var(--ink); }
[data-band-as="type"].quote .process .band-lede, [data-band-as="type"].quote .step-text { color: var(--ink-2); }
[data-band-as="type"].quote .step { border-color: var(--line); background: var(--canvas); }
[data-band-as="type"].quote .step::before { color: var(--brand); }
[data-band-as="type"].quote .form-card { box-shadow: 0 16px 40px rgba(0, 0, 0, .1); border: 1px solid var(--line); }

/* -------------------------------------------------------------- gallery */
.gallery { padding-block: var(--band); background: var(--paper); }
.band-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; max-width: none; }
.band-head--row .band-lede { max-width: 440px; }
.strip-wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
/* ONE ROW, count-fitted: every frame is 300px tall and shares the row, the lead 1.8x the width of
   the others, so any count fills the row with no hole, and a small shop's wide 900px banner photos
   still carry their boxes. Largest boxes at 1440 (photoFit gallery.images): the lead 780x300 in the
   margins (860x300 when the strip runs to the edge), a supporting frame 430x300 (two frames). */
.strip { display: flex; gap: 12px; height: 300px; }
.shot { flex: 1 1 0; min-width: 0; margin: 0; overflow: hidden; border-radius: 10px; background: var(--paper-2); }
.shot picture, .shot img { width: 100%; height: 100%; }
.shot img { object-fit: cover; }
.strip > .shot:first-child { flex-grow: 1.8; }
.strip > .shot:only-child { flex: 0 1 780px; margin-inline: auto; }
/* One photograph: the heading beside it, not a lone frame centred in an empty band (round 2). */
.gallery:has(.shot:only-child) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; column-gap: clamp(28px, 4vw, 56px); padding-inline: max(var(--pad), (100% - var(--wrap)) / 2); }
.gallery:has(.shot:only-child) > .wrap, .gallery:has(.shot:only-child) .strip-wrap { width: auto; margin: 0; }
.gallery:has(.shot:only-child) .band-head--row { display: block; margin: 0; }
.gallery:has(.shot:only-child) .strip > .shot:only-child { flex: 1 1 auto; margin: 0; }
[data-band-as="bleed"].gallery .strip-wrap { width: auto; margin-left: max(var(--pad), (100% - var(--wrap)) / 2); margin-right: 0; }
[data-band-as="bleed"].gallery .shot { border-radius: 0; }

/* -------------------------------------------------------------- reviews */
.reviews { padding-block: var(--band); background: var(--canvas); }
.rev-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 44px); }
.rev-agg { display: grid; justify-items: end; gap: 6px; }
.rating-line { font-size: 16px; color: var(--ink-2); }
.rating-line strong { font: 800 28px/1 var(--display); color: var(--ink); margin-right: 4px; }
.rev-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; color: var(--brand-deep); }
/* Rating stars are the conventional amber everywhere (a rating glyph, not a brand surface): a
   quiet neutral brand drew them grey (rennieautomotive.ca, round 1 owner reader). */
.stars { display: inline-flex; gap: 3px; color: #f2a900; }
.stars svg { width: 18px; height: 18px; fill: currentColor; stroke: rgba(120, 80, 0, .55); stroke-width: .8; }
.stars-agg { position: relative; display: inline-block; }
.stars-agg .stars-row { display: flex; flex-wrap: nowrap; gap: 4px; }
.stars-agg svg { flex: none; width: 26px; height: 26px; }
.stars-agg .stars-base { color: var(--line); }
.stars-agg .stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: #f2a900; }
.stars-agg.sf-5 .stars-fill { width: 100%; }
.stars-agg.sf-4 .stars-fill { width: calc(4 * 30px); }
.stars-agg.sf-3 .stars-fill { width: calc(3 * 30px); }
.stars-agg.sf-2 .stars-fill { width: calc(2 * 30px); }
.stars-agg.sf-1 .stars-fill { width: calc(1 * 30px); }
.stars-agg.sf-4.sq-1 .stars-fill { width: calc(4 * 30px + 7px); }
.stars-agg.sf-4.sq-2 .stars-fill { width: calc(4 * 30px + 13px); }
.stars-agg.sf-4.sq-3 .stars-fill { width: calc(4 * 30px + 19px); }
.stars-agg.sf-3.sq-1 .stars-fill { width: calc(3 * 30px + 7px); }
.stars-agg.sf-3.sq-2 .stars-fill { width: calc(3 * 30px + 13px); }
.stars-agg.sf-3.sq-3 .stars-fill { width: calc(3 * 30px + 19px); }
.stars[data-n="4"] svg:nth-child(n+5), .stars[data-n="3"] svg:nth-child(n+4), .stars[data-n="2"] svg:nth-child(n+3), .stars[data-n="1"] svg:nth-child(n+2) { fill: none; stroke: currentColor; stroke-width: 1.4; }
.rev-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.rev-card { flex: 1 1 260px; max-width: 390px; display: flex; flex-direction: column; background: var(--canvas); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: 0 10px 26px rgba(0, 0, 0, .05); }
.rev-quote { font-size: 16.5px; line-height: 1.6; color: var(--ink); }
/* The lead review (bandRhythm leadReviewFirst: a top-rated one of ten words or more) is set as the
   band's pull quote across the row; the rest are cards under it. Round 2: equal cards with half
   of them empty read as a template. */
.rev-grid > .rev-card:first-child:not(:only-child) { flex-basis: 100%; max-width: none; padding: clamp(24px, 3vw, 40px); border-left: 6px solid var(--signal); }
.rev-grid > .rev-card:first-child:not(:only-child) .rev-quote { font: 700 clamp(22px, 2.3vw, 30px)/1.3 var(--sans); max-width: 900px; }
.rev-card .stars { margin-top: auto; padding-top: 18px; }
.rev-name { margin-top: 8px; font-weight: 700; }
.rev-date { margin-top: 2px; font-size: 13px; color: var(--ink-2); }
[data-band-as="inverse"].reviews { background: var(--panel); color: var(--on-dark); }
[data-band-as="inverse"].reviews .rating-line { color: var(--on-dark-2); }
[data-band-as="inverse"].reviews .rating-line strong { color: var(--on-dark); }
[data-band-as="inverse"].reviews .rev-link { color: var(--signal-on-dark); }
[data-band-as="inverse"].reviews .stars-agg .stars-fill { color: #f2a900; }
[data-band-as="inverse"].reviews .stars-agg .stars-base { color: rgba(255, 255, 255, .28); }
[data-band-as="inverse"].reviews .rev-card { border-color: transparent; }

/* ----------------------------------------------------------------- area */
.area { padding-block: var(--band); background: var(--paper); }
.area-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: stretch; }
.area:not(.area--map) .area-grid { grid-template-columns: minmax(0, 760px); justify-content: center; }
.area-copy .band-lede { margin-top: 14px; }
.places { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.places li { background: var(--canvas); border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 13px; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.visit { margin-top: 30px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding-top: 26px; border-top: 2px solid var(--line); }
.visit-lines { display: grid; gap: 12px; align-content: start; }
.line { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; font-size: 16px; line-height: 1.4; }
.line a { text-decoration: none; }
.line a:hover { text-decoration: underline; }
.line-ico { display: inline-flex; color: var(--brand); padding-top: 2px; }
.hours-title { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 8px; }
.hours-list { display: grid; gap: 2px; font-size: 15.5px; }
.hours-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 8px 4px 0; border-radius: 6px; }
.hours-row[data-today="true"] { padding-left: 10px; margin-left: -10px; }
.hours-time { color: var(--ink-2); white-space: nowrap; }
.hours-row[data-today="true"] { background: var(--canvas); font-weight: 700; box-shadow: inset 4px 0 0 var(--signal); }
.hours-row[data-today="true"] .hours-time { color: var(--ink); }
.hours-row[data-today="true"] .hours-day::after { content: "Today"; margin-left: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.area-map { min-height: 440px; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.area-map iframe { display: block; width: 100%; height: 100%; min-height: 440px; border: 0; }
[data-band-as="bleed"].area .area-grid { width: auto; margin-left: max(var(--pad), (100% - var(--wrap)) / 2); margin-right: 0; }
[data-band-as="bleed"].area .area-map { border-radius: 0; }
[data-band-as="inverse"].area { background: var(--panel); color: var(--on-dark); }
[data-band-as="inverse"].area .band-lede, [data-band-as="inverse"].area .hours-time { color: var(--on-dark-2); }
[data-band-as="inverse"].area .places li { background: transparent; border-color: var(--on-dark-line); }
[data-band-as="inverse"].area .line-ico, [data-band-as="inverse"].area .hours-row[data-today="true"] .hours-day::after { color: var(--signal-on-dark); }
[data-band-as="inverse"].area .visit { border-top-color: var(--on-dark-line); }
[data-band-as="inverse"].area .hours-row[data-today="true"] { background: rgba(255, 255, 255, .08); }
[data-band-as="inverse"].area .hours-row[data-today="true"] .hours-time { color: var(--on-dark); }

/* ------------------------------------------------------------------ faq */
.faq { padding-block: var(--band); background: var(--canvas); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq-ask { margin-top: 28px; padding: 22px; border-radius: var(--radius); background: var(--paper); border-left: 6px solid var(--signal); display: grid; gap: 14px; justify-items: start; }
.faq-ask p { font-weight: 700; font-size: 18px; }
[data-band-as="inverse"].faq .faq-ask { background: rgba(255, 255, 255, .06); }
.qa { border-bottom: 2px solid var(--line); }
.qa:first-child { border-top: 2px solid var(--line); }
.qa summary { position: relative; cursor: pointer; list-style: none; padding: 20px 48px 20px 0; font-weight: 700; font-size: 18px; line-height: 1.4; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 4px; top: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--signal); color: var(--signal-ink); font: 700 22px/32px var(--sans); text-align: center; }
.qa[open] summary::after { content: "\2212"; }
.qa p { padding: 0 48px 22px 0; color: var(--ink-2); }
[data-band-as="inverse"].faq { background: var(--panel); color: var(--on-dark); }
[data-band-as="inverse"].faq .qa, [data-band-as="inverse"].faq .qa:first-child { border-color: var(--on-dark-line); }
[data-band-as="inverse"].faq .qa p { color: var(--on-dark-2); }

/* ------------------------------------------------------------------ cta */
.cta { position: relative; overflow: hidden; background: var(--panel); color: var(--on-dark); }
.cta-photo { position: absolute; inset: 0; margin: 0; }
.cta-photo picture, .cta-photo img { width: 100%; height: 100%; }
.cta-photo img { object-fit: cover; }
.cta-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--panel) 30%, transparent) 0%, color-mix(in srgb, var(--panel) 82%, transparent) 50%, color-mix(in srgb, var(--panel) 96%, transparent) 100%); }
.cta-inner { position: relative; z-index: 2; padding-block: clamp(80px, 10vw, 136px); display: grid; justify-items: start; }
.cta--photo .cta-inner { justify-items: end; text-align: right; }
.cta--photo .cta-actions { justify-content: flex-end; }
.cta-title { max-width: 720px; font-size: clamp(40px, 5.4vw, 72px); text-wrap: balance; }
.cta-text { margin-top: 18px; max-width: 560px; font-size: 19px; color: var(--on-dark-2); }
.cta-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
/* Contained (the band above already reaches the edge): their photograph as a framed panel beside
   the ask, inside the margins, never hidden. */
[data-band-as="contained"].cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding: var(--band) max(var(--pad), (100% - var(--wrap)) / 2); }
[data-band-as="contained"].cta .cta-photo { position: relative; inset: auto; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
[data-band-as="contained"].cta .cta-photo::after { display: none; }
[data-band-as="contained"].cta .cta-inner { width: auto; margin: 0; padding: 0; justify-items: start; text-align: left; }
[data-band-as="contained"].cta .cta-actions { justify-content: flex-start; }
/* With no photograph the call band is centred: a left-aligned block left the right half an empty
   navy field (round 1, rennieautomotive.ca). */
.cta:not(.cta--photo) .cta-inner, [data-band-as="inverse"].cta .cta-inner { justify-items: center; text-align: center; }
.cta:not(.cta--photo) .cta-actions, [data-band-as="inverse"].cta .cta-actions { justify-content: center; }
.cta:not(.cta--photo) .cta-title { max-width: 900px; }
[data-band-as="type"].cta { background: var(--paper); color: var(--ink); }
[data-band-as="type"].cta .cta-text { color: var(--ink-2); }
[data-band-as="type"].cta .btn-ghost { color: var(--ink); border-color: var(--line-strong); background: transparent; }

/* --------------------------------------------------------------- footer */
.site-footer { background: var(--footer); color: var(--on-dark-2); padding: 56px 0 72px; font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.foot-logo { margin-bottom: 14px; }
.foot-logo-plate { display: inline-flex; padding: 14px 18px; border-radius: 10px; }
.foot-logo-plate img { max-height: 64px; height: auto; width: auto; max-width: 220px; object-fit: contain; }
.foot-logo-plate--light { background: #fff; }
.foot-logo-plate--dark, .foot-logo-plate--self { background: transparent; padding: 0; }
.foot-logo-plate--self img { max-height: 110px; }
.foot-name { font: 800 26px/1 var(--display); text-transform: uppercase; color: var(--on-dark); }
.foot-contact { display: grid; gap: 8px; }
.foot-contact a, .foot-nav a { text-decoration: none; color: var(--on-dark); }
.foot-contact a:hover, .foot-nav a:hover { text-decoration: underline; }
.foot-nav ul { display: grid; gap: 8px; }
.foot-legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--on-dark-line); display: grid; gap: 8px; font-size: 14px; }
.licence { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--on-dark); font-weight: 600; }
.colophon a { color: var(--on-dark); }

/* -------------------------------------------------------- preview badge */
.preview-badge { position: fixed; left: 12px; bottom: 12px; z-index: 40; display: flex; gap: 6px; align-items: center; background: rgba(15, 17, 20, .9); color: #fff; font: 600 12.5px/1.2 var(--sans); padding: 6px 6px 6px 12px; border-radius: 999px; }
.preview-badge a { color: #fff; text-decoration: none; }
.preview-badge-cta { background: #fff; color: #111 !important; padding: 6px 10px; border-radius: 999px; }

/* ------------------------------------------------------------- tablet */
@media (max-width: 1100px) {
  .mh-nav ul { gap: 18px; }
  .mh-nav a { font-size: 15px; }
}
@media (max-width: 980px) {
  .mh-nav { display: none; }
  .mh-actions { margin-left: auto; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

/* -------------------------------------------------------------- phone */
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .mh-bar { background: var(--panel); }
  .mh-offer { display: none; }
  .mh-bar-row { justify-content: flex-start; }
  .mh-contact { width: 100%; justify-content: space-between; padding-left: 0; gap: 12px; box-shadow: none; clip-path: none; }
  .mh-today { min-width: 0; overflow: hidden; }
  .mh-today span { overflow: hidden; text-overflow: ellipsis; }
  .mh-row { height: 62px; gap: 12px; }
  .mh-logo { max-height: 42px; max-width: 150px; }
  .mh-word { font-size: 21px; }
  .mh-call-label, .mh-quote-long { display: none; }
  .mh-quote-short { display: inline; }
  .mh-call { width: 42px; padding: 0; }

  .hero-inner, .hero--split .hero-inner { min-height: 0; padding-block: 30px 48px; width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; padding-inline: 0; }
  [data-band-as="contained"].cta { grid-template-columns: 1fr; gap: 22px; }
  /* The ask comes before the detail on a phone: the quote button sits above the fold
     (blueprint-gate hero-cta-reachable), the line and the proofs follow it. */
  .hero-copy, .hero--split .hero-copy, .hero--window .hero-copy { max-width: none; display: flex; flex-direction: column; }
  .hero-copy .plate { align-self: flex-start; order: 1; }
  .hero-title { order: 2; }
  .hero-actions { order: 3; margin-top: 24px; }
  .hero-sub { order: 4; margin-top: 28px; }
  .proofs { order: 5; }
  .hero-title { font-size: clamp(42px, 12.6vw, 60px); }
  .hero-sub { font-size: 17.5px; }
  .proofs li { font-size: 16.5px; }
  .hero-actions .btn { width: 100%; }
  .hero--bleed .hero-photo, .hero--split .hero-photo { position: relative; inset: auto; width: auto; height: 300px; border-left: 0; }
  .hero--split .hero-photo { border-bottom: 6px solid var(--signal); }
  .hero--bleed .hero-photo::after { background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--panel) 70%, transparent) 100%); }
  .hero--window .hero-photo { position: relative; top: auto; right: auto; transform: none; width: auto; margin: 16px var(--pad) 0; }
  .hero--window .hero-photo img { height: 268px; aspect-ratio: auto; }
  .hero--type .hero-inner { min-height: 0; padding-block: 56px 64px; }

  .display { font-size: clamp(34px, 10vw, 46px); }
  .svc-card { max-width: none; flex-basis: 100%; }
  .svc-title { font-size: 28px; min-height: 0; }
  .site-footer { padding-bottom: 96px; }
  .gallery:has(.shot:only-child) { display: block; padding-inline: 0; }
  .gallery:has(.shot:only-child) > .wrap, .gallery:has(.shot:only-child) .strip-wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }
  .gallery:has(.shot:only-child) .band-head--row { margin-bottom: 20px; }

  .ribbon-row { gap: 14px; min-height: 0; }
  .ribbon-text { font-size: 25px; }
  .badge { width: 96px; height: 96px; margin-block: -16px; border-width: 5px; }
  .badge-year { font-size: 32px; }
  .badge-est { font-size: 12px; }
  [data-band-as="bleed"].story .story-grid, [data-band-as="contained"].story .story-grid { grid-template-columns: 1fr; }
  [data-band-as="bleed"].story .story-photo { min-height: 0; height: 300px; }
  [data-band-as="bleed"].story .story-copy { padding: 48px var(--pad) 56px; }
  [data-band-as="contained"].story .story-grid { gap: 20px; }
  /* photoFit may keep the 4:3 print at 1440 and give a phone the wide print (a 404px-tall banner
     cannot fill 270px at 2x): the phone follows fitPhone. */
  [data-band-as="contained"].story .story-photo[data-fit-phone="wide"] img { aspect-ratio: 16 / 7; }
  [data-band-as="contained"].story .story-photo--print img { min-height: 0; max-height: none; aspect-ratio: 4 / 3; }
  [data-band-as="contained"].story .story-grid:has(.story-photo--wide) { grid-template-columns: 1fr; }
  .stamp { width: 92px; height: 92px; }
  [data-band-as="contained"].story .story-copy { padding: 28px 22px; }

  .quote-grid { grid-template-columns: 1fr; }
  .qrow { grid-template-columns: 1fr; }
  .reach-v { font-size: 16.5px; }
  .step { padding: 18px 18px 18px 70px; }
  .step::before { left: 18px; font-size: 32px; }

  .band-head--row { display: block; }
  .band-head--row .band-lede { margin-top: 12px; }
  /* Phone: the lead takes the first row whole, the rest pair up below; an odd last frame takes a
     row of its own. Largest boxes: the lead 390x200, a lone supporting frame 390x150. */
  .strip { display: grid; height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: 200px; grid-auto-rows: 150px; gap: 8px; }
  .strip > .shot:first-child { grid-column: 1 / -1; }
  .strip > .shot:last-child:nth-child(even) { grid-column: 1 / -1; }
  [data-band-as="bleed"].gallery .strip-wrap { width: 100%; margin: 0; }

  .rev-agg { justify-items: start; }
  .rev-card { max-width: none; flex-basis: 100%; }

  .area-grid { grid-template-columns: 1fr; }
  .visit { grid-template-columns: 1fr; }
  .area-map, .area-map iframe { min-height: 320px; }
  [data-band-as="bleed"].area .area-grid { margin-left: 0; }
  [data-band-as="bleed"].area .area-copy { padding-inline: var(--pad); }

  .faq-grid { grid-template-columns: 1fr; }
  .qa summary { font-size: 17px; }

  .cta--photo .cta-inner { justify-items: start; text-align: left; padding-top: 40px; }
  .cta--photo .cta-actions { justify-content: flex-start; }
  .cta-photo { position: relative; inset: auto; height: 240px; }
  .cta-photo::after { background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--panel) 80%, transparent) 100%); }
  .cta-actions .btn { width: 100%; }

  .foot-grid { grid-template-columns: 1fr; }
}