/* =====================================================================================================
   site.css - "Daylight Canopy", the Clifton Eye Center redesign (docs/DESIGN-SPEC.md, docs/COMPONENTS.md).
   Lifted from the winning lab (tmp/lab/canopy/lab.css) with the spec's grafts and must-fixes applied.

   Rules this file keeps:
   - Every colour, shadow and translucent fill is a token from tokens.css: this file carries var() only
     (gate C13 counts raw colour literals here). Alpha variants use tokens or color-mix(var(), transparent).
   - Nothing here MOVES. Transitions, hover lifts, tilt, parallax translate, reveals and loops live in
     motion.css inside @media (prefers-reduced-motion: no-preference), so reduced motion is still by
     construction. Static tilts (rotate) and state styling (colour, underline, shadow) live here.
   - Sections carry no overflow property; side-spilling decoration lives only in .deco, which clips
     (DESIGN-SPEC 4.3). Protrusion offsets are bounded by the gutter.
   - Glass: -webkit- prefix on every backdrop-filter, the combined @supports-not fallback, is-flat (never
     blurred) and is-solid (not blurred below 700px) per the glass budget (DESIGN-SPEC 2.7).
   ===================================================================================================== */

/* ---------- 1. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ground); }
/* the sticky header's clearance sits on what scrolls into view (anchor targets, keyboard focus in the page), never on the
   scroller: an html scroll-padding-top also applied to the header's own controls, so closing the drawer (focus back to the
   menu button) or focusing a nav link scrolled the page up ~440px (found by the neoclassical QA, 2026-09-29).
   :where() keeps it at specificity 0, so the explicit scroll-margin-top of headings still wins. */
:where(main, .page-aside, .site-footer) :where(a[href], button, input, select, textarea, summary, iframe, [tabindex], [id]), :where(main) { scroll-margin-top: 110px; }
body {
  margin: 0; min-height: 100vh; background: var(--ground); color: var(--ink-700);
  font-family: var(--ff-body); font-size: var(--fs-base); line-height: var(--lh-body); font-weight: 400;
  font-optical-sizing: auto; font-variation-settings: var(--fv-display);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; }
img { display: block; height: auto; }
a { color: var(--green-700); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:is(:hover, :focus-visible) { color: var(--green-800); }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; color: var(--ink-900); }
p { margin: 0 0 1em; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#main:focus { outline: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { display: inline-block; width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.page { position: relative; z-index: 1; }
html.is-locked { overflow: hidden; }

.skip { position: absolute; left: 16px; top: -80px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 12px;
  background: var(--paper); color: var(--green-800); font-weight: 800; text-decoration: none; box-shadow: var(--e-2); }
.skip:focus { top: 12px; }

/* ---------- 2. plane 0: the fixed light field, section pools ---------- */
/* the contract uses the class "field" for this P0 layer AND for form fields (E.2): the light field is always
   the direct child of <body>, so it is addressed as body > .field and never matches a form field */
body > .field { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--field-bg); }
.blob { position: absolute; border-radius: 50%; }
.blob--sun  { width: 46vw; height: 46vw; left: 58%; top: -12vw; background: radial-gradient(closest-side, var(--sun-95), var(--sun-0)); }
.blob--lime { width: 52vw; height: 52vw; left: -18vw; top: 28%; background: radial-gradient(closest-side, var(--lime-80), var(--lime-0)); }
.blob--teal { width: 44vw; height: 44vw; right: -14vw; top: 55%; background: radial-gradient(closest-side, var(--teal-80), var(--teal-0)); }
.blob--leaf { width: 38vw; height: 38vw; left: 30%; top: 80%; background: radial-gradient(closest-side, var(--g5-12), var(--g5-0)); }

/* decorations only; the one wrapper allowed to clip, so it can never cut a protrusion */
.deco { position: absolute; inset: -160px 0; z-index: 0; overflow: hidden; overflow: clip; pointer-events: none; }
.orb { position: absolute; border-radius: 42% 58% 63% 37% / 45% 38% 62% 55%; filter: blur(42px); }
.orb--lime { background: var(--field-lime); }
.orb--teal { background: var(--field-teal); }
.orb--mint { background: var(--pool-mint); }
.orb--sun  { background: var(--pool-sun); }
.welcome__orb-a { width: min(46vw, 640px); height: 520px; left: -8%; top: 30%; }
.welcome__orb-b { width: min(40vw, 560px); height: 440px; right: -6%; top: 16%; }
.welcome__orb-c { width: min(30vw, 420px); height: 300px; right: 22%; bottom: 22%; }
.reviews__orb-a { width: min(36vw, 480px); height: 400px; left: 0; top: 34%; }
.reviews__orb-b { width: min(40vw, 540px); height: 420px; right: -4%; top: 22%; }
.reviews__orb-c { width: min(30vw, 420px); height: 320px; left: 36%; bottom: 24%; }
.help__orb-a { width: min(44vw, 600px); height: 440px; right: 2%; top: 18%; }
.help__orb-b { width: min(30vw, 400px); height: 320px; left: -4%; top: 16%; }
.visit__orb-a { width: min(46vw, 620px); height: 400px; left: 4%; top: 34%; }
.visit__orb-b { width: min(22vw, 320px); height: 340px; right: 0; top: 40%; }
section { position: relative; }
:is(.welcome, .reviews, .help, .visit) > .wrap { position: relative; z-index: 1; }

.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--scroll, 0)); background: var(--progress-bg); border-radius: 0 3px 3px 0; }

/* ---------- 3. glass recipes (BRAND-SYSTEM 7, DESIGN-SPEC 2.7) ---------- */
.glass { position: relative; isolation: isolate; }
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: var(--rim-light);
  -webkit-mask: linear-gradient(var(--mask) 0 0) content-box, linear-gradient(var(--mask) 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(var(--mask) 0 0) content-box exclude, linear-gradient(var(--mask) 0 0); }
/* QA r2 VIB-R2-03: the sheen sits at z-index -1. Every .glass is its own stacking context (isolation: isolate), so it
   still paints over the glass's own background, but now UNDER the glass's in-flow text: at z-index 0 it washed a bare
   text node (the form notice "This form is not connected yet ...") to 4.0-4.6:1 while focused. Element children were
   already above it (.glass > * z-index 2), so nothing else changes. */
.glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 30%) var(--my, 0%), var(--spec-hi), var(--spec-lo) 60%); }
.glass:is(:hover, :focus-visible, :focus-within)::after { opacity: 1; }
.glass > * { position: relative; z-index: 2; }

.glass--image { background: var(--ga-bg); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); border: 1px solid var(--ga-border); box-shadow: var(--ga-shadow); }
.glass--light { background: var(--gb-bg); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); border: 1px solid var(--gb-border); box-shadow: var(--gb-shadow); }
.glass--leaf { background: var(--gc1-bg); -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8); border: 1px solid var(--gc1-border); box-shadow: var(--gc1-shadow); }
.glass--leaf-deep { background: var(--gc2-bg); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border: 1px solid var(--gc2-border); box-shadow: var(--gc2-shadow); color: var(--paper); }
.glass--dark { background: var(--gd-bg); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); border: 1px solid var(--gd-border); box-shadow: var(--gd-shadow); color: var(--paper); }
.glass--dark::before, .glass--leaf-deep::before { background: var(--rim-dark); }
.glass--dark::after, .glass--leaf-deep::after { background: radial-gradient(420px circle at var(--mx, 30%) var(--my, 0%), var(--spec-dark), transparent 60%); }
:is(.glass--dark, .glass--leaf-deep) :focus-visible { outline-color: var(--focus-on-dark); }

/* is-flat: long interior sheets use the fallback fill at every width (no blur layer thousands of px tall) */
.glass.is-flat { -webkit-backdrop-filter: none; backdrop-filter: none; }
.glass--light.is-flat { background: var(--gb-flat); }
/* is-solid: the glass budget below 700px (at most 10 blurred surfaces on the home at 390) */
@media (max-width: 699px) {
  .is-solid { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .glass--image.is-solid { background: var(--ga-solid); }
  .glass--light.is-solid { background: var(--gb-solid); }
  .glass--leaf.is-solid { background: var(--green-50); }
  .glass--leaf-deep.is-solid { background: var(--green-700); }
  .glass--dark.is-solid { background: var(--green-950); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass--image { background: var(--ga-solid); }
  .glass--light { background: var(--gb-solid); }
  .glass--leaf { background: var(--green-50); }
  .glass--leaf-deep { background: var(--green-700); }
  .glass--dark { background: var(--green-950); }
  .brand, .smile { background: var(--paper); }
}
/* tex-frosted-glass (DESIGN-SPEC 6.4): the build derives the file with its alpha baked in (6% over the top
   half, fading to 0 at the bottom edge) and defines --tex-frost in the shipped tokens.css; without it the
   layer is `none` and the recipe fill is unchanged. Only the hero statement (while real blur is available;
   the @supports-not fallback keeps its solid fill) and the long interior sheets carry it. */
.sheet.glass--light.is-flat { background: var(--tex-frost, none) 50% 0 / 100% auto no-repeat, var(--gb-flat); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .hero__copy.glass--image { background: var(--tex-frost, none) 50% 0 / cover no-repeat, var(--ga-bg); }
}

/* ---------- 4. base controls (3.0) ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 44px; padding: .9em 1.5em; border: 0; border-radius: var(--r-pill);
  font-family: var(--ff-body); font-size: var(--fs-base); font-weight: 800; line-height: 1.2; letter-spacing: .01em; text-decoration: none; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: -20% auto -20% 0; width: 45%; z-index: -1; pointer-events: none; background: var(--glimmer-light); transform: translateX(-160%) skewX(-18deg); }
.btn--primary { color: var(--paper); background: var(--btn-primary-bg); box-shadow: var(--btn-primary-shadow); }
.btn--primary:is(:hover, :focus-visible) { color: var(--paper); background: var(--green-800); box-shadow: var(--btn-primary-shadow-hover); }
.btn--alert { color: var(--alert); background: var(--paper); box-shadow: var(--btn-alert-shadow); }
.btn--alert:is(:hover, :focus-visible) { color: var(--alert); background: var(--alert-50); }
.btn--alert::after { background: var(--glimmer-alert); }
.btn--invert { color: var(--green-800); background: var(--paper); box-shadow: var(--btn-invert-shadow); }
.btn--invert:is(:hover, :focus-visible) { color: var(--green-900); background: var(--green-50); }
.btn--invert::after { background: var(--glimmer-green); }

.more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 800; text-decoration: none; color: var(--green-700); }
.more:is(:hover, :focus-visible) { color: var(--green-800); text-decoration: underline; text-underline-offset: .2em; }

.round-btn { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--g4-45); cursor: pointer;
  background: var(--c1-btn-bg); color: var(--green-800); box-shadow: var(--round-btn-shadow); }
.round-btn:is(:hover, :focus-visible) { color: var(--green-900); background: var(--green-100); }
.round-btn .ico { width: 22px; height: 22px; }
.round-btn--menu { background: var(--btn-primary-bg); color: var(--paper); border-color: transparent; }
.round-btn--menu:is(:hover, :focus-visible) { color: var(--paper); background: var(--green-800); }

/* ---------- 5. top bar (3.1) ---------- */
/* RA-06: the top bar and the header bar sit in one <header class="masthead"> (the banner landmark), so the address,
   "Make an Appointment" and the Call pill are inside a landmark. display: contents: the wrapper draws no box, so
   the header bar stays sticky against the page, not against a wrapper as short as the two bars. */
.masthead { display: contents; }
.topbar { position: relative; z-index: 5; color: var(--green-950); background: var(--topbar-bg); }
.topbar::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--sh-12); }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 56px; padding-block: 6px; }
.topbar__addr { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--green-950); font-size: var(--fs-sm); line-height: 1.35; text-decoration: none; }
.topbar__addr strong { font-weight: 700; text-wrap: balance; }   /* VH-09: at 1024 the address needs 2 lines; balanced, never a lone "71111." */
.topbar__addr:is(:hover, :focus-visible) { color: var(--green-950); }
.topbar__addr:is(:hover, :focus-visible) strong { text-decoration: underline; text-underline-offset: .2em; }
.topbar__actions { display: flex; gap: 10px; flex: none; }
.band-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--w-90); color: var(--green-800); border: 1px solid var(--w-90); font-size: var(--fs-sm); font-weight: 800; line-height: 1.2; text-decoration: none; box-shadow: var(--pill-shadow); }
.band-pill::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; pointer-events: none; background: var(--glimmer-green); transform: translateX(-150%) skewX(-18deg); }
.band-pill:is(:hover, :focus-visible) { background: var(--w-82); color: var(--green-800); }
.topbar :focus-visible { outline-color: var(--focus-on-band); }
@media (max-width: 1023px) {
  .topbar .band-pill--appt { display: none; }
}
@media (max-width: 719px) {
  .topbar__addr { display: none; }
  .topbar__in { justify-content: center; }
}

/* ---------- 6. header, primary nav, drawer (3.2) ---------- */
/* The logo sits IN the glass bar, with no plate and no white ground (operator 2026-09-29): a transparent derivative
   of the logo JPEG (tools/logo-alpha.mjs, 288 x 189, aspect 1.524). The bar is taller than before (92px, was 72) so
   the wordmark stays legible without the old hanging plate; the bar reserves the logo's width + 20px. */
.site-header { --logo-left: 22px; --logo-h: 72px;
  position: sticky; top: 12px; z-index: 50; margin-top: 12px; }
.site-header__bar { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 16px; height: 92px; border-radius: 28px;
  padding: 0 12px 0 calc(var(--logo-left) + var(--logo-h) * 1.524 + 20px); }
.site-header .site-header__glass { position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: var(--header-glass-bg); }
/* CG-04 (a recorded change to spec 3.2 "the glass gains --e-2"): stuck over the page, the stacked --gb-shadow +
   --e-2 drop shadows (reaching ~40px down at up to .28 alpha) darkened whatever text scrolled just under the bar:
   green-700 links read 4.13-4.34 at +0..+3px at 1024/1440 (6.2 at rest). The stuck bar and plate get one short,
   tight shadow instead (it ends ~8px below the edge), so reading surfaces keep their contrast. */
.site-header.is-scrolled .site-header__glass { box-shadow: inset 0 1px 0 rgb(255 255 255 / .90), 0 0 0 1px rgb(68 102 0 / .10), 0 1px 2px rgb(var(--shade) / .12), 0 4px 10px -6px rgb(var(--shade) / .30); }
.site-header__bar > .mainnav, .site-header__bar > .mobile-actions { position: relative; z-index: 1; }
/* scoped to the header: the footer logo shares .site-logo but must stay in the footer's flow (an unscoped rule first
   pulled it out of flow onto the address text - caught by the footer screenshot, 2026-09-29) */
.site-header .site-logo { position: absolute; z-index: 2; top: 50%; left: var(--logo-left); translate: 0 -50%; display: block; line-height: 0; border-radius: 8px; }
.site-header .site-logo img { display: block; width: auto; height: var(--logo-h); }

.mainnav__list { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mainnav__item { position: relative; }
.mainnav__link { position: relative; display: flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: var(--r-pill);
  color: var(--green-800); font-size: 1rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.mainnav__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--green-700); transform: scaleX(0); transform-origin: 50% 50%; }
.mainnav__link:is(:hover, :focus-visible) { color: var(--green-900); background: var(--g1-90); }
.mainnav__link:is(:hover, :focus-visible, .is-section, [aria-current="page"])::after { transform: scaleX(1); }
.mainnav__link[aria-current="page"] { color: var(--green-800); background: var(--gc1-bg); box-shadow: inset 0 0 0 1px var(--g4-45); }
/* dormant disclosure pattern (DESIGN-SPEC 3.2): renders only if the operator approves sub-menus */
.mainnav__toggle { display: inline-grid; place-items: center; width: 32px; height: 44px; padding: 0; border: 0; background: none; color: var(--green-800); }
.mainnav__panel { position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; padding: 8px; border-radius: 18px; }
.mainnav__panel a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 12px; color: var(--green-900); text-decoration: none; font-weight: 700; }
.mainnav__panel a:is(:hover, :focus-visible) { background: var(--green-100); }

.mobile-actions { display: none; gap: 8px; }
@media (min-width: 1024px) and (max-width: 1199px) {
  .mainnav__link { font-size: .9375rem; padding-inline: 10px; }
  .mainnav__link::after { left: 10px; right: 10px; }
}
/* Phones/tablets: a 64px bar (was 56 + a hanging plate) with a 50px-tall logo (76px wide). The bar reserves
   14 + 76 + 20 = 110px, so the three 44px round buttons (148px with gaps) still fit at 320px (content box ~172px);
   QA r2 VHR2-01's shrinking plate is no longer needed. */
@media (max-width: 1023px) {
  .site-header { --logo-left: 14px; --logo-h: 50px; top: 8px; margin-top: 8px; }
  .site-header__bar { height: 64px; border-radius: 22px; padding-right: 6px; }
  .mainnav { display: none; }
  .mobile-actions { display: flex; }
}

.drawer { position: fixed; z-index: 70; top: 12px; right: 12px; bottom: 12px; width: min(86vw, 380px); padding: 76px 20px 24px; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 28px; }
.drawer.glass--image { background: var(--drawer-bg); }
.drawer > .drawer__close { position: absolute; top: 16px; right: 16px; }
.drawer__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.drawer__link { display: flex; align-items: center; min-height: 52px; padding: 10px 16px; border-radius: 16px; color: var(--green-800); font-size: var(--fs-lead); font-weight: 800; line-height: 1.25; text-decoration: none; }
.drawer__link:is(:hover, :focus-visible) { color: var(--green-900); background: var(--g1-95); }
.drawer__link[aria-current="page"], .drawer__link.is-section { background: var(--gc1-bg); box-shadow: inset 0 0 0 1px var(--g4-45); }
.drawer__actions { display: grid; gap: 10px; margin-top: 22px; }
.drawer__actions .band-pill { width: 100%; background: var(--paper); box-shadow: var(--pill-shadow), inset 0 0 0 1px var(--g4-45); }
.scrim { position: fixed; inset: 0; z-index: 65; background: var(--scrim); }

/* ---------- 7. section headers (3.5) ---------- */
.section-title { font-family: var(--ff-display); font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); color: var(--slate-700); text-wrap: balance; }
.section-title--center { text-align: center; max-width: 22ch; margin-inline: auto; }
/* the iris ornament (lens 335-338): one emblem, the logo's own green iris */
.section-title--center::before { content: ""; display: block; width: 22px; height: 22px; margin: 0 auto 16px; border-radius: 50%;
  background: radial-gradient(circle, var(--slate-900) 0 26%, transparent 27%), radial-gradient(circle, var(--green-400), var(--green-600));
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--green-500); }
h1.section-title { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); max-width: 24ch; }
.tag-title { font-size: var(--fs-tag); line-height: 1; letter-spacing: -.01em; }
.tag-title .hash { color: var(--green-600); margin-right: .04em; }
.title-link { display: inline-block; padding-block: 8px; color: inherit; text-decoration: none; }   /* 44px target (G11) */
.title-link .ico { width: .72em; height: .72em; margin-left: .3em; vertical-align: -.02em; color: var(--green-600); }
.title-link:is(:hover, :focus-visible) { color: var(--slate-900); }

/* ---------- 8. home: hero (3.3) and quick actions (3.4) ---------- */
.hero { z-index: 3; padding-top: 18px; }
.hero__grid { --cut: 70px; position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-rows: auto auto;
  padding: clamp(40px, 5vw, 76px) clamp(20px, 4.4vw, 64px) 0; }
.hero__stage { position: absolute; inset: 0 0 var(--cut) 0; z-index: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--stage-bg); box-shadow: var(--stage-shadow); }
.hero__scene { position: absolute; inset: -16px; width: calc(100% + 32px); max-width: none; height: calc(100% + 32px); object-fit: cover; filter: blur(6px); opacity: .55; }
.hero__veil { position: absolute; inset: 0; background: var(--stage-veil); }
.hero__sun { position: absolute; width: 60%; aspect-ratio: 1; right: -14%; top: -30%; border-radius: 50%; background: var(--stage-sun); }
.hero__beams { position: absolute; inset: -30%; pointer-events: none; opacity: .9; background: var(--stage-beams);
  -webkit-mask: radial-gradient(55% 60% at 78% 18%, var(--mask), transparent 72%); mask: radial-gradient(55% 60% at 78% 18%, var(--mask), transparent 72%); }
@media (max-width: 699px) { .hero__beams { display: none; } }

.hero__copy { grid-column: 1; grid-row: 1; align-self: center; z-index: 4; margin-right: -170px; padding: clamp(28px, 3.6vw, 52px) clamp(26px, 3.6vw, 56px); border-radius: var(--r-lg); }
.hero__statement { margin: 0; font-family: var(--ff-display); font-weight: 500; font-size: var(--fs-display); line-height: 1.04; letter-spacing: var(--ls-display); color: var(--slate-900); }
.hero__line { display: block; }
.hero__line--accent { position: relative; width: max-content; max-width: 100%; padding-bottom: .34em; font-style: italic; color: var(--green-800); }
/* the swash sits fully below the glyph box (spec 3.3 must-fix: it read 3.11 inside the text box) */
.swash { position: absolute; left: 0; bottom: 0; width: 100%; height: .3em; overflow: visible; fill: none; stroke: var(--green-500); stroke-width: 5; stroke-linecap: round; }

/* bottom-aligned: 150px below the stage (cut 70 + 80) and 80px past the section, the table values of spec 4.1 */
.hero__photo { position: relative; grid-column: 2; grid-row: 1 / span 2; align-self: end; z-index: 2; height: clamp(420px, 38vw, 560px); margin: 0 0 -80px;
  border-radius: var(--r-arch); overflow: hidden; background: var(--stage-2); box-shadow: var(--e-arch); }
.hero__photo-in { display: block; width: 100%; height: 100%; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
/* the generated PNG carries wide transparent margins (frames at y 36-65%): the box crops them in CSS
   (file untouched) so the glasses themselves hang across the photo's bottom edge near its right corner */
.hero__cut { position: relative; grid-column: 2; grid-row: 2; justify-self: end; align-self: end; z-index: 5; width: clamp(270px, 21vw, 320px); height: auto;
  aspect-ratio: 1184 / 256; object-fit: cover; object-position: 50% 50.3%;
  margin: 0 -24px -112px 0; rotate: -6deg; filter: drop-shadow(var(--cut-shadow)); pointer-events: none; }

.dock { display: grid; gap: 14px; }
.hero .dock { grid-column: 1 / span 2; grid-row: 2; align-self: start; z-index: 4; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 820px); margin-top: clamp(28px, 4vw, 48px); }
.dock__tile { display: grid; justify-items: center; align-content: start; gap: 12px; min-height: 44px; padding: 20px 12px 18px; border-radius: 24px; text-align: center; text-decoration: none;
  color: var(--ink-900); font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; }
.dock__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; color: var(--paper); background: var(--icon-tile-bg); box-shadow: var(--icon-tile-shadow); }
.dock__icon .ico { width: 24px; height: 24px; }
.dock__tile:is(:hover, :focus-visible) { color: var(--slate-900); box-shadow: var(--ga-shadow-hover); }
.dock__tile--primary { color: var(--paper); border-color: var(--g3-60); }
.dock__tile--primary .dock__icon { background: var(--paper); color: var(--green-800); box-shadow: var(--icon-tile-shadow-light); }
.dock__tile--primary:is(:hover, :focus-visible) { color: var(--paper); background: var(--gc2-bg-hover); box-shadow: var(--gc2-shadow-hover); }
/* aside variant: a vertical list of the same four links */
.dock--aside { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.dock--aside .dock__tile { grid-template-columns: 40px minmax(0, 1fr); justify-items: start; align-items: center; align-content: center; gap: 14px; min-height: 56px; padding: 8px 14px 8px 10px; border-radius: 18px; text-align: left; font-size: var(--fs-base); }
.dock--aside .dock__icon { width: 40px; height: 40px; border-radius: 12px; }
.dock--aside .dock__icon .ico { width: 20px; height: 20px; }
.dock--aside .dock__tile--primary .dock__icon { box-shadow: none; }
/* row variant: the in-main badge set of a builder page */
.dock--row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 14px; }

@media (min-width: 860px) and (max-width: 1099px) { .hero__copy { margin-right: -96px; } }
/* VH-01 (G5, face never covered): from 860 to 1279px the photo is at its 420-486px height floor while the dock's
   4th tile reaches under it, and the tile's top edge crossed the woman's chin by 28-30px. The photo (and the
   eyeglasses that cross its bottom edge) sit 46px higher here, so the tile top clears the chin line by 16px or
   more; the photo still breaks the stage bottom and the section (recorded change to spec 3.3 margin-bottom). */
@media (min-width: 860px) and (max-width: 1279px) {
  .hero__photo { margin-bottom: -34px; }
  .hero__cut { margin-bottom: -82px; }
}
@media (max-width: 859px) {
  .hero { padding-top: 12px; }
  /* padding-top 36px (was 22): the hanging logo plate (bottom at y 156) touched the statement glass (top 154);
     now a 12px gap separates the two frames (VH-07) */
  .hero__grid { --cut: 96px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; padding: 36px 16px 0; }
  .hero__copy { grid-column: 1; grid-row: 1; margin: 0; padding: 22px 24px; }
  .hero__photo { grid-column: 1; grid-row: 2; width: 82%; justify-self: end; align-self: start; height: clamp(300px, 78vw, 420px); margin: -32px 0 0; }
  .hero__cut { grid-column: 1; grid-row: 2; justify-self: start; align-self: end; width: clamp(197px, 57vw, 254px); margin: 0 0 -14px -4px; }
  .hero .dock { grid-column: 1; grid-row: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; margin-top: 20px; }
}
@media (max-width: 560px) {
  /* keep the source's three statement lines on every phone: "Your Community" is 7.76em wide in Fraunces 500 */
  .hero__grid { padding-inline: 12px; }
  .hero__copy { padding: 20px 18px; }
  .hero__statement { font-size: min(var(--fs-display), calc((100vw - 2 * var(--gutter) - 24px - 36px) / 7.9)); }
  :is(.hero, .dock--row) .dock__tile { padding: 16px 8px 14px; gap: 10px; }
  :is(.hero, .dock--row) .dock__icon { width: 48px; height: 48px; border-radius: 15px; }
}

/* ---------- 9. home: welcome (3.7) ---------- */
.welcome { z-index: 2; padding: var(--s-9) 0 clamp(64px, 7vw, 110px); }
.welcome__place { font-style: italic; color: var(--green-700); }
@media (min-width: 768px) { .welcome__place { display: block; } }
/* the hanging eyeglasses end 126px below the hero seam: the Welcome h1 (with its ornament) starts below them (G5) */
@media (min-width: 860px) { .welcome { padding-top: max(var(--s-9), 140px); } }
.welcome__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3vw, 40px); align-items: start; margin-top: clamp(40px, 5vw, 72px); }
.welcome__side { display: grid; gap: clamp(24px, 3vw, 36px); min-width: 0; }
/* the promo photo pops out of the card's top-left corner; --over never exceeds the room outside the wrap */
.promo { --over: clamp(10px, calc((100vw - var(--wrap)) / 2 - 4px), 48px); --promo-pad: clamp(22px, 2.6vw, 34px); padding: 0 var(--promo-pad) clamp(22px, 2.6vw, 30px); border-radius: var(--r-lg); margin-top: 48px;
  margin-left: max(0px, calc(36px - max(var(--gutter), (100vw - var(--wrap)) / 2)));   /* rotated photo corner stays >= 16px inside the viewport */ }
/* the overhang is measured from the CARD edge: the card's own padding is added back */
.promo > .promo__img { z-index: 3; display: block; margin: -52px 18px 24px calc(-1 * (var(--promo-pad) + var(--over))); aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: var(--paper); box-shadow: var(--e-pop); rotate: -2.5deg; }
.promo__img-in { display: block; width: 100%; height: 100%; }
.promo__img img { width: 100%; height: 100%; object-fit: cover; }
.promo__title { margin: 0 0 .6em; font-family: var(--ff-body); font-size: var(--fs-h4); font-weight: 800; line-height: var(--lh-h4); color: var(--green-700); }
.promo p { margin: 0; font-size: var(--fs-sm); color: var(--ink-700); }
.news { padding: clamp(24px, 2.8vw, 36px); border-radius: var(--r-lg); }
.news__h { margin: 0 0 16px; font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--slate-700); }
.news__title { margin: 0 0 12px; font-family: var(--ff-body); font-size: var(--fs-h4); font-weight: 800; line-height: var(--lh-h4); }
.news__title a { color: var(--ink-900); text-decoration: none; background: linear-gradient(var(--green-400), var(--green-400)) 0 100% / 0 2px no-repeat; }
.news__title a:is(:hover, :focus-visible) { color: var(--green-800); background-size: 100% 2px; }
.news__excerpt { font-size: var(--fs-sm); color: var(--ink-700); }
.date-pill { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin: 0 0 12px; padding: 4px 12px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 800; line-height: 1.4; color: var(--green-900); background: var(--gc1-bg); border: 1px solid var(--g4-45); }
.date-pill .ico { width: 1.1em; height: 1.1em; }
.welcome__main { padding: clamp(26px, 3.6vw, 52px); border-radius: var(--r-lg); }
.welcome__main > * { max-width: var(--measure); }
.welcome__main > p { color: var(--ink-700); }
.welcome__main > .lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-900); }
.lead::first-letter { font-family: var(--ff-display); font-weight: 600; color: var(--green-700); font-size: 1.35em; }
.feature-list { display: grid; gap: .75em; margin: 26px 0 30px; padding: 0; list-style: none; }
.feature-list li { position: relative; padding-left: 30px; color: var(--ink-700); }
/* iris-dot markers (lens 363-369) */
.feature-list li::before { content: ""; position: absolute; left: 0; top: .38em; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle, var(--green-600) 0 3px, transparent 3.5px); box-shadow: inset 0 0 0 1.5px var(--green-500), 0 0 0 3px var(--g4-16); }
.feature-list strong { font-weight: 800; color: var(--ink-900); }
.offer-h { margin: 0 0 12px; font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--slate-700); }
.offer-list { margin: 0 0 26px; padding-left: 1.3em; display: grid; gap: .35em; }
.offer-list li::marker { color: var(--green-600); }
.welcome__main > .closing { margin: 0; font-weight: 600; color: var(--ink-900); }
.closing a { font-weight: 800; }
/* left: from about 1440px the services band stops growing (--wrap-wide) and moves inward, so the sprig follows its
   left edge (band edge + 38px, the 1440 composition) and keeps crossing the band's top edge at 1920 (VH-06) */
.sprig { position: absolute; z-index: 6; left: max(clamp(8px, 4vw, 70px), calc((100% - var(--wrap-wide)) / 2 + 38px)); bottom: -150px; width: clamp(90px, 9vw, 130px); height: auto; pointer-events: none;
  aspect-ratio: 900 / 2752; object-fit: cover; object-position: 50.3% 50%;
  transform-origin: 50% 100%; filter: drop-shadow(var(--sprig-shadow)); }
/* CG-02: from 561 to 859px (the sprig shows; one-column layout) the Welcome copy card spans the full width, so the
   sprig (125px above the seam at rest, up to 24px higher with parallax, rotating 12deg) reached into the closing
   line's link. The section ends 68px further below the card (132px, was 64px): the sprig clears the text at every pose. */
@media (min-width: 561px) and (max-width: 859px) { .welcome { padding-bottom: 132px; } }
@media (max-width: 859px) {
  .welcome__grid { grid-template-columns: minmax(0, 1fr); }
  .promo { margin-top: 76px; }
  .promo > .promo__img { margin: -44px 10px 20px calc(-1 * (var(--promo-pad) + var(--over))); }
}
@media (max-width: 560px) { .sprig { display: none; } }

/* ---------- 10. home: services (3.6) ---------- */
:root { --band-tail: 150px; }
@media (max-width: 560px) { :root { --band-tail: 130px; } }
.services { z-index: 1; padding: clamp(64px, 7vw, 104px) 0 var(--band-tail); }
.services__band { position: absolute; inset: 0 max(0px, calc((100% - var(--wrap-wide)) / 2)); z-index: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--svc-band-bg); box-shadow: var(--svc-band-shadow); }
.services__in { position: relative; z-index: 2; }
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin: clamp(72px, 7.5vw, 104px) 0 0; padding: 0; list-style: none; }
.svc-grid > li { display: flex; min-width: 0; }
.svc { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 0 14px 16px; border-radius: 28px; text-decoration: none; color: var(--ink-900); }
.svc > .svc__frame { z-index: 3; display: block; margin: -56px -4px 16px; aspect-ratio: 4 / 4.7; border-radius: 22px; overflow: hidden; background: var(--paper); box-shadow: var(--e-pop); }
.svc__frame img { width: 100%; height: 100%; object-fit: cover; }
.svc__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 4px 6px 2px; }
/* h3.svc__name (VH-03: the source captions are headings; h3 under the section's h2), styled as the former span */
.svc__name { margin: 0; font-family: var(--ff-body); font-size: var(--fs-sm); font-weight: 800; letter-spacing: .04em; line-height: 1.35; color: var(--ink-900); }
.svc__go { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; color: var(--green-800); background: var(--c1-btn-bg); border: 1px solid var(--g4-50); }
.svc__go .ico { width: 20px; height: 20px; }
.svc:is(:hover, :focus-visible) { color: var(--ink-900); box-shadow: var(--e-4); }
.svc:is(:hover, :focus-visible) .svc__frame { box-shadow: var(--e-pop-hover); }
.svc:is(:hover, :focus-visible) .svc__go { background: var(--green-700); color: var(--paper); border-color: var(--green-700); }
.svc:focus-visible { outline-offset: 4px; }
@media (max-width: 1023px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 72px; } }
@media (max-width: 560px) {
  .svc-grid { gap: 14px; row-gap: 60px; margin-top: 70px; }
  .svc { padding: 0 8px 12px; border-radius: 22px; }
  .svc > .svc__frame { margin: -40px -2px 12px; border-radius: 18px; }
  .svc__go { width: 32px; height: 32px; }
  .svc__foot { padding-inline: 2px; gap: 6px; }
}
/* VH-02: below 440px "COMPREHENSIVE" (an unbreakable 132px word) plus the chip is wider than the card, and the chip
   left the card (11px at 390, 46px at 320). The chip takes its own line at the card's right; the label spans the
   card. QA r2 VHR2-02: "COMPREHENSIVE" (133.7px at 14.5px) still did not fit the 115px / 125px label at 320 / 340
   and broke inside the word with no hyphen. The foot is an inline-size container and the label's size follows it
   (10.4cqi: the word is ~96% of the label width), capped at --fs-sm, so a word never splits; from ~366px it is
   --fs-sm as before. */
@media (max-width: 439px) {
  .svc__foot { flex-direction: column; align-items: stretch; container-type: inline-size; }
  .svc__name { font-size: min(var(--fs-sm), 10.4cqi); }
  .svc__go { align-self: flex-end; }
}

/* ---------- 11. home: reviews (3.8, 5.6) ---------- */
.reviews { z-index: 3; display: flow-root; padding: 0 0 var(--s-7); }
/* the cluster starts 30px below the cards and crosses the services band seam (derived from the tail) */
.smiles { position: relative; z-index: 4; width: 300px; height: 190px; margin: calc(-1 * var(--band-tail) + 30px) auto 18px; }
.smile { position: absolute; display: block; padding: 6px; border-radius: 50%; background: var(--smile-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--smile-shadow); }
.smile img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.smile--a { width: 120px; height: 120px; left: 0; top: 56px; rotate: -6deg; }
.smile--b { width: 150px; height: 150px; left: 76px; top: 0; z-index: 2; }
.smile--c { width: 116px; height: 116px; right: 0; top: 64px; rotate: 7deg; }
@media (max-width: 699px) { .smile.is-solid { background: var(--paper); } }
.reviews__stage { position: relative; margin-top: clamp(32px, 4vw, 56px); padding: var(--s-7) clamp(14px, 4vw, 64px); border-radius: var(--r-xl); background: var(--rev-stage-bg); box-shadow: var(--rev-stage-shadow); }
.rev-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); align-items: start; }
.rev-slide { min-width: 0; }
.review { margin: 0; padding: clamp(26px, 2.6vw, 36px); border-radius: var(--r-lg); }
.review > .review__q { position: absolute; top: 18px; right: 22px; z-index: 1; width: 56px; height: 56px; fill: var(--green-300); opacity: .75; }
.stars { display: flex; gap: 4px; margin: 0 0 16px; color: var(--green-600); }
.stars .ico { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.review__text { margin: 0 0 18px; }
.review__text p { margin: 0; font-family: var(--ff-display); font-weight: 500; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-900); }
.review__by { font-weight: 800; color: var(--green-800); letter-spacing: .02em; }
.rev-nav { display: none; }
.reviews__more { margin: clamp(28px, 3vw, 44px) 0 0; text-align: center; }
@media (max-width: 1023px) {
  .rev-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; overscroll-behavior-x: contain; touch-action: pan-x pan-y;
    padding: 8px 4px 28px; margin: -8px -4px -28px; scrollbar-width: none; }
  .rev-track::-webkit-scrollbar { display: none; }
  /* QA r2 VHR2-05 (a recorded change to spec 5.6 "min(86%, 420px)"): capped at 420px, a tablet track (700-1023px)
     showed the first card plus ~60% of the second, so no track height fitted both (143px of stage under the first
     card at 768). Capped at 640px, at most ~44% of the next card is in view below 1024, it still peeks, and the track
     follows the one card being read (site.js fit); the quote sets ~50-60 characters a line at 640px. */
  .rev-slide { flex: 0 0 min(86%, 640px); scroll-snap-align: start; }
  /* QA r2 VHR2-05: the track was as tall as its TALLEST card (458px at 390), so under the first card (296px) the stage
     sat empty for 180-244px before the buttons. site.js sets the track's height to the card in view (plus the track's
     padding) on load, on every slide change and on resize; overflow-y is clipped so a taller neighbour's peeking
     edge ends at the track instead of pushing the buttons down. Without JS the height stays auto (nothing clipped). */
  .rev-track { overflow-y: hidden; }
  .rev-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
  .rev-nav__btn--prev .ico { scale: -1 1; }
  .rev-nav__btn[aria-disabled="true"] { opacity: .45; cursor: default; }
  .rev-nav__btn:is(:hover, :focus-visible):not([aria-disabled="true"]) { background: var(--green-700); color: var(--paper); }
}
@media (max-width: 560px) {
  .smiles { width: 250px; height: 160px; }
  .smile--a { width: 100px; height: 100px; top: 48px; }
  .smile--b { width: 124px; height: 124px; left: 64px; }
  .smile--c { width: 96px; height: 96px; top: 56px; }
}
/* testimonial pages: the same card, one per row. The 2-column auto-fit grid left a ~380px void under the
   short first card beside the long second one (/contact-us/testimonials/ at 1440), and 3 columns in the
   ~810px main column would set the Fraunces quotes at ~200px lines. One column, text at the prose measure. */
.rev-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; margin: 0; padding: 0; list-style: none; }
.rev-grid .review__text, .rev-grid .review__by { max-width: var(--measure); }

/* ---------- 12. home: #HeretoHelp (3.9) and the iris ---------- */
.help { z-index: 2; padding: clamp(24px, 4vw, 48px) 0 clamp(96px, 10vw, 150px); }
.help__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--help-gap); align-items: center; --help-gap: clamp(28px, 4vw, 64px); }
.help__side { position: relative; z-index: 3; display: grid; justify-items: start; gap: 28px; min-width: 0; }
.help__tag { margin: 0; }
.help__iris { justify-self: end; width: 220px; margin-right: calc(-1 * var(--help-gap) - 36px); }
.iris { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, var(--w-85) 0 5%, transparent 6%), radial-gradient(circle, var(--slate-900) 0 26%, transparent 27%),
    repeating-conic-gradient(from 0deg, var(--iris-a) 0 3deg, var(--iris-b) 3deg 7deg), radial-gradient(circle, var(--green-400), var(--green-600));
  box-shadow: 0 0 0 8px var(--paper), 0 0 0 9px var(--green-500), var(--e-2); outline: 1px solid var(--g5-25); outline-offset: 24px; }
.qa { padding: clamp(26px, 3.6vw, 48px); border-radius: var(--r-lg); min-width: 0; }
.qa__h { margin: 0 0 22px; font-family: var(--ff-display); font-style: italic; font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--slate-900); }
.qa__list, .accordion { display: grid; gap: 12px; }
.qa__item { border-radius: 20px; }
.qa__q { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 16px; align-items: center; min-height: 64px; padding: 20px 22px; border-radius: 20px; cursor: pointer; list-style: none;
  font-size: var(--fs-lead); font-weight: 700; line-height: 1.4; color: var(--ink-900); }
.qa__q::-webkit-details-marker { display: none; }
.qa__q::marker { content: ""; }
.qa__q:focus-visible { outline-offset: -3px; }
.qa__icon { position: relative; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--green-600); }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--green-800); }
.qa__icon::after { transform: rotate(90deg); }
.qa__q:is(:hover, :focus-visible) .qa__icon { background: var(--green-100); }
.qa__item[open] .qa__icon { background: var(--green-700); box-shadow: none; }
.qa__item[open] .qa__icon::before, .qa__item[open] .qa__icon::after { background: var(--paper); }
.qa__item[open] .qa__icon::after { transform: rotate(0deg); }
.qa__item:is(:hover, :focus-within) { box-shadow: var(--gc1-shadow-hover); }
.qa__a { padding: 0 22px 22px; font-size: var(--fs-base); color: var(--ink-700); }
.qa__a > * { max-width: var(--measure); }
.qa__a p { margin: 0 0 .6em; }
.qa__a > :last-child { margin-bottom: 0; }
.qa__a a { font-weight: 800; color: var(--green-800); }
.qa__a p > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }   /* a stand-alone link, not running text: 44px target */
@media (min-width: 1024px) { .qa { padding-left: 84px; } }
@media (min-width: 1100px) { .help { padding-bottom: 176px; } }
@media (max-width: 1023px) {
  .help__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* flex-wrap (RA-01): below about 390px "#HeretoHelp" (220px min-content) + 20px + the 104px iris + 12px is wider
     than the column, and the iris pushed the page 40px wide at 320; it now drops under the title, still at the right */
  .help__side { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: -40px; }
  .help__tag { margin-bottom: 56px; }   /* only the iris crosses the panel's top edge; the title stays above it */
  .help__iris { width: 104px; flex: none; margin: 0 12px 0 auto; }
  .help__iris .iris { box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px var(--green-500), var(--e-2); outline-offset: 12px; }
  .qa { padding-top: 80px; }   /* 40px under the iris + 40px clearance to the heading (G5; spec 3.9 said 64) */
}
@media (max-width: 560px) { .qa__q { padding: 16px 16px 16px 18px; gap: 12px; } .qa__a { padding: 0 18px 18px; } }

/* ---------- 13. home: designer optical (3.11) ---------- */
/* The band box includes the protrusion zones; the green is its ::before, inset by exactly the rise and
   the hang, so the crossings hold at any plate height. */
.designer { z-index: 3; }
/* overflow-x: clip (never hidden, which would turn overflow-y into a scroller and cut the plates): the band's
   own decoration can never widen the page; the plates protrude vertically only */
.designer__band { --rise: 0px; --hang: 96px; position: relative; padding: clamp(40px, 5vw, 64px) 0 0; overflow-x: clip; }
.designer__band::before { content: ""; position: absolute; inset: var(--rise) 0 var(--hang); z-index: 0; background: var(--green-500); box-shadow: var(--band-top-hl); }
.designer__grid { position: relative; z-index: 1; display: grid; gap: 66px 40px; justify-items: center; }
.designer__title { position: relative; z-index: 1; margin: 0; text-align: center; color: var(--paper); font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-h2); text-shadow: var(--title-shadow); }
/* one radial pool behind the white title: 3.98 instead of 3.24 on the bare band (spec 3.11) */
/* measured 3.40 with a plain closest-side fade (the outer letters sat on bare band): a solid core to 62% and
   100px of horizontal reach keep every glyph on the pool (gate: 3.5 or more) */
.designer__title::before { content: ""; position: absolute; inset: -60px -100px; z-index: -1; background: radial-gradient(closest-side, var(--band-pool) 62%, var(--band-pool-0)); }
.brands { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 250px)); justify-content: center; align-items: start; gap: clamp(14px, 2vw, 24px); width: 100%; margin: 0; padding: 0; list-style: none; }
.brands > li { min-width: 0; }
.brand { display: block; padding: 0 12px 14px; border-radius: 26px; text-decoration: none; color: var(--ink-900);
  background: var(--brand-plate-bg); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid var(--w-90); box-shadow: var(--brand-shadow); }
.brand__img { display: block; max-width: 250px; margin: -42px auto 12px; border-radius: 12px; overflow: hidden; background: var(--paper); box-shadow: var(--brand-img-shadow); }
.brand__img img { width: 100%; height: auto; }
.brand__name { display: block; text-align: center; font-size: var(--fs-sm); font-weight: 800; letter-spacing: .04em; line-height: 1.3; color: var(--ink-900); }
.brand:is(:hover, :focus-visible) { color: var(--ink-900); box-shadow: var(--brand-shadow-hover); }
.brand:is(:hover, :focus-visible) .brand__img { box-shadow: var(--brand-img-shadow-hover); }
.designer :focus-visible { outline-color: var(--focus-on-band); }
@media (max-width: 699px) { .brand.is-solid { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper); } }
@media (min-width: 1100px) {
  /* odd plates rise 96px above the green, even plates hang 72px below it */
  /* padding 42px = the ad's lift above its plate; the green starts 96px below the odd plates' tops */
  .designer__band { --rise: calc(42px + 96px); --hang: 72px; padding: 42px 0 0; }
  .designer__grid { grid-template-columns: 290px minmax(0, 1fr); align-items: center; justify-items: stretch; }
  .designer__title { text-align: left; margin-top: 24px; }
  .brands > li:nth-child(even) { margin-top: 140px; }
}
@media (max-width: 767px) {
  .designer__band { --hang: 64px; }
  .designer__title::before { inset: -48px -28px; }   /* the centred one-line title: the pool stays inside the viewport */
  .brands { grid-template-columns: repeat(2, minmax(0, 250px)); row-gap: 56px; }
}
@media (max-width: 560px) {
  .brands { gap: 14px; row-gap: 48px; }
  .brand { padding: 0 8px 10px; border-radius: 20px; }
  .brand__img { margin-top: -34px; }
}

/* ---------- 14. visit: map, NAP and hours, emergency (3.12) ---------- */
/* the block lays out by its OWN width (container query): full-bleed on the home, a 980px column inside
   /hours-location/ and /location/*, so the overlap composition never crushes the NAP card */
.visit { z-index: 1; padding: clamp(64px, 7vw, 110px) 0 clamp(70px, 8vw, 110px); container: visit / inline-size; }
.page-main > .visit { padding: 0; }
.page-main > .visit > .wrap { width: 100%; }
.visit__grid { display: grid; gap: 20px; }
.map { position: relative; z-index: 1; min-height: 280px; border-radius: var(--r-lg); overflow: hidden; background: var(--stone); box-shadow: var(--e-2); }
/* --map-tray (VH-04, VIB-02): where the NAP / emergency cards overlap the map panel's bottom, the embed stops at the
   cards' top edge and the panel continues under them as a tray. The embed's own bottom strip (Google logo,
   Street View thumbnail, "Keyboard shortcuts / Map data / Terms", the camera control) is never covered; the cards
   still sit over the map panel. Only the visit block sets it (the aside map has no overlap). */
.map__frame { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - var(--map-tray, 0px)); border: 0; }
.map__link { margin: 0; }
.map__link a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; }
.visit :is(.nap, .sos) { z-index: 2; }   /* both cards overlap the map (P2 over the embed) */
.nap { padding: clamp(20px, 2.2vw, 28px); border-radius: var(--r-lg); }
.nap__title { margin: -10px 0 2px; font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; }
.nap__title a { display: inline-block; padding-block: 10px; color: var(--slate-900); text-decoration: none; background: linear-gradient(var(--green-400), var(--green-400)) 0 calc(100% - 8px) / 0 2px no-repeat; }
.nap__title a:is(:hover, :focus-visible) { color: var(--slate-900); background-size: 100% 2px; }
.nap__sub { margin: 14px 0 6px; font-size: var(--fs-sm); font-weight: 800; color: var(--ink-900); }
.nap__addr, .nap__phone { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; font-size: var(--fs-sm); color: var(--ink-700); }
.nap__addr .ico, .nap__phone .ico { margin-top: .12em; color: var(--green-700); }
.nap__phone strong { color: var(--ink-900); }
/* RA-08 (G11): the tel link stands on its own line; inline padding grows its hit box to 44px tall without moving a line */
.nap__phone a { font-weight: 800; color: var(--green-800); padding-block: 12px; }
.hours { display: grid; gap: 2px; margin: 16px 0 0; font-size: var(--fs-sm); }
/* VH-05: a value never breaks ("8:30 AM - 4:30" / "PM" in the 3-column NAP at 1280). The value is one unbreakable
   run; in a narrow card the row tightens (container query below), and if it still cannot fit (320px) the whole
   value moves under its day name instead of splitting. */
.hours__row { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 12px; padding: 6px 12px; border-radius: 12px; }
.hours dt { font-weight: 700; color: var(--ink-900); }
.hours dd { margin: 0 0 0 auto; color: var(--ink-700); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.nap { container: nap / inline-size; }
@container nap (max-width: 340px) { .hours__row { padding-inline: 8px; column-gap: 8px; } }
/* QA r2 VHR2-04: at 320 the card's content box is 224px and "Wednesday:" + 8px + "8:30 AM - 4:30 PM" need 215.4px
   against the row's 206px, so the value dropped under its day (a 60px row among 36px rows). Below a 232px content box
   the list reaches 8px into the card's side padding: every row is 16px wider, so each value sits level with its day. */
@container nap (max-width: 235px) { .hours { margin-inline: -8px; } }
.hours__row.is-today { background: var(--gc1-bg); box-shadow: inset 0 0 0 1px var(--g4-50); }
.hours__row.is-today :is(dt, dd) { color: var(--green-900); }
.sos { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-lg); }
.sos__head { display: flex; align-items: center; gap: 14px; }
.icon-tile { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--alert); color: var(--paper); box-shadow: var(--alert-shadow); }
.icon-tile .ico { width: 26px; height: 26px; }
.sos__h { margin: 0; font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; color: var(--paper); }
.sos p { margin: 0; font-size: var(--fs-sm); color: var(--green-200); }
.sos strong { color: var(--paper); }
.sos .btn { align-self: flex-start; margin-top: auto; }
/* 720-1239px and below 720px: the cards overlap the panel's bottom by 120px / 48px (spec 3.12), which is exactly the
   tray: the panel grows by it and the embed keeps its 360px / 280px (VH-04, VIB-02). The emergency card starts on
   the same line as the NAP card (was -60px): with a tray, a staggered start would leave an empty strip of panel. */
/* QA r2 VHR2-03: the emergency card is start-aligned (align-self: start), not stretched to the NAP card's height:
   stretched, its button (margin-top: auto) dropped to the bottom and left a 41-116px dark band above it at 768-1239.
   It still covers the tray under it (the card is far taller than the 120px tray).
   QA r2 VIB-R2-01: a visit block WITHOUT an emergency card (/hours-location/, /location/clifton-eye-center/) left
   the tray right of the half-width NAP card as an empty 375-500 x 120px stone slab. There the NAP card spans the
   block (24px in from each side, like the two cards on the home), so it covers the whole tray, and it lays its
   content out in two columns: contact lines left, the hours list right. The grid's last row is 1fr, so the hours
   list (spanning every row) never stretches the rows of the left column. */
@container visit (min-width: 720px) {
  .visit__grid { --map-tray: 120px; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
  .visit__grid > .map { grid-column: 1 / 13; min-height: calc(360px + var(--map-tray)); }
  .visit__grid > .nap { grid-column: 1 / 7; margin: -140px 0 0 24px; }   /* 120px over the map panel, net of the 20px gap */
  .visit__grid > .sos { grid-column: 7 / 13; margin: -140px 24px 0 0; align-self: start; }
}
@container visit (min-width: 720px) and (max-width: 1239.98px) {
  .visit__grid:not(:has(> .sos)) > .nap { grid-column: 1 / 13; margin: -140px 24px 0; display: grid; align-content: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(5, auto) 1fr; column-gap: clamp(28px, 4vw, 56px); }
  .visit__grid:not(:has(> .sos)) > .nap > * { grid-column: 1; }
  .visit__grid:not(:has(> .sos)) > .nap > .hours { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
  .visit__grid:not(:has(> .sos)) > .nap > .nap__sub:has(+ .hours) { grid-column: 2; grid-row: 1; }
  .visit__grid:not(:has(> .sos)) > .nap > .nap__sub:has(+ .hours) + .hours { grid-row: 2 / -1; }
}
/* from 1240px the cards overlap the map's right edge, mid-height: no card covers the embed's bottom strip, but the
   embed now reaches the panel's bottom corners, so those corners stay small (8px) - a --r-lg corner (27-32px here)
   clipped the end of Google's attribution ("Terms" read "Term"; final verification 2026-09-29) */
@container visit (min-width: 1240px) {
  .visit__grid { --map-tray: 0px; }
  .visit__grid > .map { grid-column: 1 / 8; grid-row: 1 / 3; min-height: 520px; border-radius: var(--r-lg) var(--r-lg) 8px 8px; }
  .visit__grid > .nap { grid-column: 7 / 10; grid-row: 1; margin: 56px 0 0 -24px; }
  .visit__grid > .sos { grid-column: 10 / 13; grid-row: 1 / 3; margin: 150px 0 0 12px; align-self: stretch; }
}
@container visit (max-width: 719.98px) {
  .visit__grid { --map-tray: 48px; }
  .visit__grid > .map { min-height: calc(280px + var(--map-tray)); }
  .visit__grid > .nap { margin: -68px 12px 0; }   /* 48px over the map panel, net of the gap */
}

/* ---------- 15. footer (3.13): the page ends on the lime field ---------- */
.site-footer { position: relative; padding: clamp(56px, 6vw, 90px) 0 clamp(28px, 3vw, 40px); background: var(--footer-field); }
.footer__panel { display: grid; gap: clamp(24px, 4vw, 56px); padding: clamp(28px, 4vw, 56px); border-radius: var(--r-xl); color: var(--green-200); }
/* no paper plate (operator 2026-09-29): the reversed logo (grey ink -> paper, greens kept) sits on the dark glass */
.site-logo--footer { display: inline-block; line-height: 0; border-radius: 8px; }
.site-logo--footer img { display: block; width: auto; height: 92px; }
.footer__nap { margin: 18px 0 16px; max-width: 38ch; font-size: var(--fs-sm); color: var(--green-200); }
.footer__nap strong { color: var(--paper); }
.footer__nap a { color: var(--paper); font-weight: 700; padding-block: 12px; }   /* 44px hit box, no layout change (RA-08) */
.social { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--green-950); background: var(--green-400); }
.social .ico { fill: currentColor; stroke: none; width: 22px; height: 22px; }
.social:is(:hover, :focus-visible) { color: var(--green-950); background: var(--green-300); }
.footer__h { margin: 0 0 14px; font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-h4); line-height: 1.3; color: var(--green-400); }
.footer__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.footer__list a { position: relative; display: inline-flex; align-items: center; min-height: 36px; color: var(--green-100); font-size: var(--fs-sm); text-decoration: none; }
.footer__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--green-400); transform: scaleX(0); transform-origin: 0 50%; }
.footer__list a:is(:hover, :focus-visible) { color: var(--paper); }
.footer__list a:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding-top: 18px; border-top: 1px solid var(--g2-14); font-size: var(--fs-xs); color: var(--ink-200); }
.footer__legal-list { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; }
.footer__legal a { display: inline-flex; align-items: center; min-height: 24px; color: var(--ink-200); text-decoration: none; }
.footer__legal a:is(:hover, :focus-visible) { color: var(--paper); text-decoration: underline; }
@media (min-width: 960px) { .footer__panel { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (min-width: 600px) and (max-width: 959px) { .footer__panel { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 767px) { .footer__list a, .footer__legal a { min-height: 44px; } .footer__list a { min-width: 44px; } }   /* "Home" was 39px wide (RA-08, G11) */

/* ---------- 16. interior frame (C.1): the band spans full width, the aside sits beside the column ---------- */
.page-grid, .page-body { padding-bottom: var(--s-8); }
:is(.page-grid, .page-body) > main > :is(.page-main, .rail), .page-aside { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
main > .page-main { margin-top: var(--s-7); }
main > .rail { margin-top: var(--s-6); }
/* below 1024 the rail (a <details>) follows the band directly: a cut-out crossing the band edge by 40-54px
   (rotated box) lay over the rail summary's right end, where its chevron is (tmp/orch/collide.mjs, 390/768) */
@media (max-width: 1023px) { main:has(> .band .band__cut:not(.band__cut--rise)) > .rail { margin-top: 64px; } }
.page-aside { margin-top: var(--s-7); }
.is-solo main > .page-main { width: min(100% - 2 * var(--gutter), 980px); }
@media (min-width: 1024px) {
  .has-aside :is(.page-grid, .page-body) { --col-gap: clamp(24px, 1rem + 2.5vw, 56px); display: grid;
    grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [main-start] minmax(0, calc(var(--wrap) - var(--aside) - var(--col-gap))) [main-end] var(--col-gap) [aside-start] var(--aside) [aside-end] minmax(var(--gutter), 1fr) [full-end];
    grid-template-rows: auto auto 1fr; }
  .has-aside :is(.page-grid, .page-body) > main { grid-column: full; grid-row: 1 / 4; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
  .has-aside main > .band { grid-column: full; grid-row: 1; }
  .has-aside main > .rail { grid-column: aside; grid-row: 2; width: auto; margin: var(--s-7) 0 0; align-self: start; }
  .has-aside main > .page-main { grid-column: main; grid-row: 2 / 4; width: auto; margin: var(--s-7) 0 0; }
  .has-aside .page-aside { grid-column: aside; grid-row: 3; width: auto; margin: var(--s-5) 0 0; align-self: start; }
  .has-aside main:not(:has(> .rail)) ~ .page-aside { grid-row: 2 / 4; margin-top: var(--s-7); }
  .page-aside.is-sticky { position: sticky; top: 124px; }   /* 12px margin + 92px bar + 20px (was 104 with the 72px bar) */
  /* the band cut-out crosses into the content column, never onto the rail heading in the aside column */
  .has-aside .band__cut { bottom: -40px; }
}
.page-main { display: grid; gap: var(--s-6); align-content: start; min-width: 0; }
/* interior composed-section heading (a heading whose content is a logo grid, dock row or cards): it sits
   closer to what it introduces than to what precedes it */
.page-main > .section-title { margin: var(--s-4) 0 calc(-1 * var(--s-3)); scroll-margin-top: 110px; }
/* a run of source headings with no prose between them (VIA-04: "SEE BETTER / DESIGNER EYEWEAR / LIVE BETTER"):
   the first keeps .section-title, the ones after it are the smaller sub-title, levels as in the source */
.page-main > .section-head { display: grid; gap: 6px; margin: var(--s-4) 0 calc(-1 * var(--s-3)); }
.section-head > .section-title { margin: 0; scroll-margin-top: 110px; }
.section-title--sub { font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: 0; color: var(--slate-700); text-wrap: balance; }   /* QA r2 R2-VIA-09: balanced like .section-title ("... IN Bossier" / "City" at 390) */
/* keeps a run of letter-spaced capitals ("E Y E W E A R .") on one line: breaks fall only between the source's
   dot-separated words (VIA-05); also keeps a phone number whole inside a button label (VIB-04) */
.nobr { white-space: nowrap; }
/* inside a flex button the span would be its own flex item ("Give Us a / Call" beside the number): display: contents
   keeps the label one text run, so it wraps only between "Call" and the number, which stays whole (VIB-04) */
.btn .nobr { display: contents; }

/* ---------- 17. interior title band and breadcrumbs (C.2, 3.14) ---------- */
.band { z-index: 3; min-height: 220px; padding-block: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px); display: grid; align-items: center; }
.band__stage { position: absolute; top: 12px; bottom: 0; left: max(var(--gutter), (100% - var(--wrap-wide)) / 2); right: max(var(--gutter), (100% - var(--wrap-wide)) / 2); z-index: 0;
  border-radius: var(--r-xl); overflow: hidden; background: var(--band-stage-bg); box-shadow: var(--stage-shadow); }
.band__scene { position: absolute; inset: -16px; width: calc(100% + 32px); max-width: none; height: calc(100% + 32px); object-fit: cover; filter: blur(8px); opacity: .5; }
.band__veil { position: absolute; inset: 0; background: var(--band-veil); }
.band--photo .band__veil { background: var(--band-veil-photo); }
.band__rings { position: absolute; right: 6%; top: 50%; width: clamp(160px, 22vw, 320px); aspect-ratio: 1; margin-top: calc(clamp(160px, 22vw, 320px) / -2); border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--g5-25); outline: 1px solid var(--g5-25); outline-offset: 22px; }
.band__grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 12px 12px 0; }
.band__title { z-index: 2; min-width: 0; padding: clamp(22px, 3vw, 44px); border-radius: var(--r-lg); }
.band__h { margin: 0; max-width: 22ch; font-family: var(--ff-display); font-weight: 500; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); color: var(--slate-900); text-wrap: balance; }
.band__title .date-pill { margin: 16px 0 0; }
.band__visual { position: relative; z-index: 1; margin: -32px 12px 0; border-radius: var(--r-lg); overflow: hidden; background: var(--paper); box-shadow: var(--e-arch); }
/* the source header photos are 2:1 to 4.8:1 banners: a floor keeps the frame substantial on phones (spec: max 320px) */
.band__visual img { width: 100%; height: clamp(180px, 22vw, 320px); object-fit: cover; object-position: 50% 40%; }
/* VIA-02: a banner whose people stand in its left half (glasses-contacts-hero: faces at 20-54% of the width, a flat
   grey text field on the right) is cropped from the left, so the faces stay in frame and clear of the 48px title
   glass overlap; the build sets the modifier per file (src/build.mjs BAND_FOCUS). The file is unchanged. */
.band__visual--left img { object-position: 10% 40%; }
/* QA r2 R2-VIA-04: the mirror case, glasses-hero-1 (/eyeglasses-contacts/eyeglasses/): the woman stands at 57-86% of
   the width beside a flat grey field; centred, the frame cut her face (390) and hair (1440). Cropped from the right. */
.band__visual--right img { object-position: 90% 40%; }
/* the build ships band cut-outs TRIMMED to their opaque box (src/build.mjs trimmedGen), so the box is the
   object: a compact object (prism, phoropter, contact lens, about 1:1) crosses the band edge by the spec 4.2
   offset; a wide flat one (.band__cut--wide: eyeglasses 3.1:1, kids 3.0:1, sunglasses 2.4:1) is wider and
   crosses by 24px, because an 86px offset would carry its whole 90px height below the band (recorded change) */
.band__cut { position: absolute; z-index: 5; right: max(8px, 4%); bottom: calc(-1 * clamp(40px, 6vw, 96px)); width: clamp(120px, 13vw, 200px); height: auto;
  rotate: -8deg; filter: drop-shadow(var(--cut-shadow)); pointer-events: none; }
@media (min-width: 1024px) {
  .band { min-height: 300px; }
  .band__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); padding: 12px 0 0; }
  .band__title { grid-column: 1; }
  .band__visual { grid-column: 2; margin: 0 0 0 -48px; }
}
@media (max-width: 767px) {
  /* right 20px (spec: 8px): the -8deg rotation widens the box by up to ~13px, which must stay inside the viewport */
  .band__cut { width: clamp(120px, 34vw, 150px); right: 20px; bottom: -40px; }
}
/* below 1024 the title panel is full width: clearance so the cut-out crosses the band edge below the panel,
   never over the h1 (a compact object stands ~150px tall, a wide one ~55-70px) */
@media (max-width: 1023px) {
  .band__grid:has(> .band__cut) { padding-bottom: 92px; }
  .band__grid:has(> .band__cut--wide) { padding-bottom: 44px; }
  /* on a photo band the photo sits between the h1 and the cut-out: the cut-out may cross the photo's
     lower corner (P3 over the framed photo), so the empty stage tail under the photo shrinks */
  .band--photo .band__grid:has(> .band__cut) { padding-bottom: 48px; }
}
.band__cut.band__cut--wide { width: clamp(170px, 19vw, 280px); bottom: -24px; }
@media (max-width: 767px) { .band__cut.band__cut--wide { width: clamp(150px, 42vw, 190px); bottom: -20px; } }
/* the flat-cut fingertip (cut-contact-lens) rises from INSIDE the clipped stage: mirrored so both cut edges
   sit flush on the stage's bottom-right corner, never rotated, shadowed or moved (a lifted edge would show);
   below 1024 the band keeps room under the full-width title panel so the finger is not hidden behind it */
.band__stage > .band__cut--rise { right: 0; bottom: 0; width: clamp(104px, 11vw, 170px); rotate: none; scale: -1 1; filter: none; z-index: 1; }
/* QA r2 R2-VIA-03: 64px of grid padding plus the band's own bottom padding (28-40px) left 92-104px under the title
   panel, but the rising finger is 1.02 x its width tall (106-115px): the panel covered the contact lens on the
   fingertip (92 x 11-14px at 390-768). The clearance is now the cut's height + 12px, net of the band's padding. */
@media (max-width: 1023px) { .band:has(.band__cut--rise) .band__grid { padding-bottom: calc(1.022 * clamp(104px, 11vw, 170px) + 12px - clamp(28px, 4vw, 56px)); } }
.crumbs { margin: 0 0 14px; }
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); line-height: 1.3; }
.crumbs__item { display: inline-flex; align-items: center; gap: 6px; }
.crumbs__link { display: inline-flex; align-items: center; min-height: 32px; color: var(--green-800); font-weight: 700; text-decoration: none; }
a.crumbs__link:is(:hover, :focus-visible) { color: var(--green-800); text-decoration: underline; text-underline-offset: .2em; }
.crumbs__sep { color: var(--green-600); }
.crumbs__current { color: var(--ink-900); font-weight: 700; }
@media (max-width: 767px) { .crumbs__link, .crumbs__current { min-height: 44px; display: inline-flex; align-items: center; } a.crumbs__link { min-width: 44px; } }   /* "Home" was 40px wide (RA-08) */

/* ---------- 18. section rail (B.17) and aside (B.15) ---------- */
.rail { border-radius: var(--r-lg); }
.rail__summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 18px; border-radius: inherit; cursor: pointer; list-style: none;
  font-weight: 800; color: var(--ink-900); }
.rail__summary::-webkit-details-marker { display: none; }
.rail__summary::marker { content: ""; }
.rail__summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px; border-right: 2px solid var(--green-700); border-bottom: 2px solid var(--green-700); rotate: 45deg; }
.rail[open] > .rail__summary::after { rotate: -135deg; }
.rail__nav { padding: 2px 12px 14px; }
.rail__h { margin: 4px 0 8px; padding: 0 6px; font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-h4); line-height: 1.3; }
.rail__h a, .aside-card__h a { display: inline-flex; align-items: center; min-height: 44px; }
.rail__h a { color: var(--slate-700); text-decoration: none; }
.rail__h a:is(:hover, :focus-visible) { color: var(--slate-900); text-decoration: underline; }
.rail__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rail__link { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 14px; color: var(--ink-700); font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; text-decoration: none; }
.rail__link:is(:hover, :focus-visible) { color: var(--green-800); background: var(--g1-90); }
.rail__link[aria-current="page"] { color: var(--green-900); background: var(--gc1-bg); box-shadow: inset 0 0 0 1px var(--g4-45); }
@media (min-width: 1024px) {
  .rail[open] > .rail__summary { display: none; }
  .rail__nav { padding: 18px 14px; }
}
.page-aside { display: grid; gap: 20px; align-content: start; min-width: 0; }
.aside-card { padding: 22px; border-radius: var(--r-lg); font-size: var(--fs-sm); }
.aside-card__h { margin: 0 0 12px; font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-h4); line-height: 1.3; color: var(--slate-700); }
.aside-card__h a { color: var(--slate-700); text-decoration: none; }
.aside-card__h a:is(:hover, :focus-visible) { color: var(--slate-900); text-decoration: underline; }
.aside-card p { margin: 0 0 10px; }
.aside-card .nap__addr .ico, .aside-card .nap__phone .ico { color: var(--green-600); }
.map--aside { min-height: 200px; margin: 14px 0 6px; border-radius: 18px; box-shadow: var(--e-1); }

/* ---------- 19. sheets and long-form prose (C.4, D) ---------- */
.sheet { min-width: 0; padding: clamp(22px, 1rem + 2vw, 44px); border-radius: var(--r-xl); }
/* QA r2 R2-VIA-06: on a solo page (no aside, the 980px column) a text-only sheet around a 51ch measure left 38-44% of
   its glass empty at 1024-1440 (VIA-01 brought the measure from 66ch to 51ch). From 900px such a sheet is as wide as
   its measure plus its padding and keeps the column's left edge (shared with the section titles, CTA bands, docks
   and cards); a sheet holding a picture, table, embed, logo wall or form keeps the full column width. */
@media (min-width: 900px) {
  .is-solo .page-main > .sheet:not(:has(figure, img, iframe, table, .table-scroll, .embed, .logo-grid, .pay-row, .qr-plate, form)) {
    justify-self: start; width: 100%; max-width: calc(var(--measure) + 2 * clamp(22px, 1rem + 2vw, 44px)); }
}
.prose { display: flow-root; font-size: var(--fs-base); line-height: 1.7; color: var(--ink-700); overflow-wrap: anywhere; }
.prose > * { max-width: var(--measure); margin-block: 0; }
.prose > * + * { margin-top: .9em; }
.prose > :is(figure, .table-scroll, .embed, .fig-grid, .logo-grid, .pay-row, .qr-plate) { max-width: none; }
.prose h2 { margin-top: 1.6em; font-family: var(--ff-display); font-weight: 500; font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.2rem); line-height: 1.2; letter-spacing: -.01em; color: var(--slate-700); text-wrap: balance; }
.prose h3 { margin-top: 1.4em; font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--slate-700); }
.prose :is(h4, h5, h6) { margin-top: 1.3em; font-family: var(--ff-body); font-weight: 700; font-size: 1.1rem; line-height: 1.35; color: var(--ink-900); }
.prose > :is(h2, h3, h4, h5, h6):first-child { margin-top: 0; }
.prose :is(h2, h3, h4, h5, h6) + * { margin-top: .55em; }
.prose :is(h2, h3, h4, h5, h6) { scroll-margin-top: 110px; }
.prose :is(ul, ol) { display: grid; gap: .45em; padding-left: 1.3em; }
.prose ul li::marker { color: var(--green-600); }
.prose ol li::marker { color: var(--ink-900); font-weight: 700; }
.prose li > :is(ul, ol) { margin-top: .45em; }
.prose a { color: var(--green-700); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prose a:is(:hover, :focus-visible) { color: var(--green-800); }
/* RA-08 (G11: inline prose links 24px or more): a running-text link's box was its 20-22px line; 3px of inline
   padding makes the hit box 26-28px tall without moving a line (inline padding never changes line height) */
:is(.prose, .welcome__main, .promo, .news__excerpt, .qa__a, .sos, .field__help, .form__intro, .form__notice) a:not([class]) { padding-block: 3px; }
.prose :is(strong, b) { font-weight: 700; color: var(--ink-900); }
.prose :is(p, li, td, th, a) > img { display: inline-block; vertical-align: middle; }
.prose blockquote { margin-inline: 0; padding: 14px 20px; border-left: 4px solid var(--green-600); border-radius: 0 14px 14px 0; background: var(--gc1-bg); font-style: italic; color: var(--ink-700); }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose hr { height: 0; border: 0; border-top: 1px solid var(--ink-100); margin-block: 1.6em; }
.prose dl { display: grid; gap: .3em; }
.prose dt { font-weight: 700; color: var(--ink-900); }
.prose dd { margin: 0 0 .5em; }
.prose code, .prose pre { font-family: ui-monospace, Consolas, monospace; font-size: .9em; }
.prose pre { overflow-x: auto; padding: 14px; border-radius: 12px; background: var(--ink-50); }
.prose .linkrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.prose .linkrow--toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--gc1-bg); border: 1px solid var(--g4-45);
  color: var(--green-900); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; }
.prose .linkrow--toc a:is(:hover, :focus-visible) { color: var(--green-900); background: var(--green-100); }
.prose .attribution { font-size: var(--fs-sm); color: var(--ink-600); }

/* tables: the wrapper scrolls, the page never does */
.table-scroll { overflow-x: auto; border-radius: 14px; border: 1px solid var(--ink-100); background: var(--paper); }
.table-scroll table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.5; }
.table-scroll caption { padding: 10px 12px; text-align: left; font-weight: 700; color: var(--ink-900); }
.table-scroll :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--ink-100); text-align: left; vertical-align: top; }
.table-scroll th { background: var(--green-50); font-weight: 700; color: var(--ink-900); }
.table-scroll tr:last-child > :is(th, td) { border-bottom: 0; }

.embed { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--ink-900); box-shadow: var(--e-2); }
.embed--map { aspect-ratio: 4 / 3; background: var(--stone); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* figures (D.3): the CSS reads only the role class. No margin here (VIA-03): `.fig { margin: 0 }` has the same
   specificity as `.prose > * + *` and came later, so a figure after a paragraph sat on its descenders (-1 to 2px);
   the base `figure { margin: 0 }` already zeroes figures outside prose. */
.fig__media { display: block; }
.fig img { display: block; max-width: 100%; height: auto; }
/* CS-02: a source image link (the EyeGlass Guide logo -> the tool) keeps its <a> inside fig__media: the link is the
   image's box (no inline padding, no baseline gap) and shows the focus ring around it */
.fig .fig__media > a:not([class]) { display: block; padding: 0; border-radius: inherit; }
.fig .fig__media > a > img { display: block; }
/* QA r2 RA2-01 / CG2-01: the link's box is exactly fig__media's box, whose overflow: hidden (the rounded clip of the
   plate, photo and brand roles) cut away the whole 3px ring drawn 2px outside it: a keyboard user saw no focus at all.
   A media box holding a link does not clip; the image is rounded itself (inherited through the link). */
.fig .fig__media:has(> a) { overflow: visible; }
.fig .fig__media > a > img { border-radius: inherit; }
/* QA r2 R2-VIA-07: the linked plate had no hover state. Like the linked logo chip (spec 5.5), it gains --e-2 on hover
   and keyboard focus (the -6px lift is in motion.css, with its :focus-within partner). */
.fig--plate:has(> .fig__media > a):is(:hover, :focus-within) { box-shadow: var(--e-2); }
.fig figcaption { margin-top: 10px; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-600); }
.fig--photo { --bo: clamp(8px, 2.4vw, 36px); position: relative; z-index: 3; width: fit-content; max-width: calc(100% + var(--bo)) !important; }
.fig--photo .fig__media { border-radius: 22px; overflow: hidden; background: var(--paper); box-shadow: var(--e-pop); }
.fig--start { margin-left: calc(-1 * var(--bo)); rotate: -.6deg; }
.fig--end { margin-left: auto; margin-right: calc(-1 * var(--bo)); rotate: .6deg; }
.fig--feature { width: calc(100% + var(--bo)); }
/* two photos in a row tilt in opposite directions (-.6 / +.6deg): at the default .9em their corners met
   (dry-eye, eye-exams, kids-optical: the svc feature above the source lead photo) */
.prose > .fig + .fig--photo, .prose > .fig--photo + .fig { margin-top: clamp(24px, 1rem + 1.5vw, 40px); }
.fig--feature img { width: 100%; }
.fig--plate { width: fit-content; max-width: min(100%, var(--measure)) !important; padding: 12px; border-radius: 18px; background: var(--paper); box-shadow: var(--e-1); }
.fig--plate .fig__media { border-radius: 10px; overflow: hidden; }
.fig--portrait { width: fit-content; max-width: min(100%, 360px) !important; }
.fig--portrait .fig__media { border-radius: 999px 999px 22px 22px; overflow: hidden; box-shadow: var(--e-arch); }
.fig--diagram { width: fit-content; padding: 14px; border-radius: 18px; background: var(--paper); box-shadow: var(--e-1); }
.fig--brand { width: fit-content; }
.fig--brand .fig__media { border-radius: 12px; overflow: hidden; }
@media (min-width: 900px) {
  .prose > .fig--plate { float: right; clear: right; max-width: 44% !important; margin: .3em 0 1em 1.6em; }
  /* VIA-06: a plate that ENDS its prose block has no text to wrap around it (spec 3.16 floats a plate so text wraps);
     floated, it sat alone in the sheet's right corner beside 570-670px of blank. It stays in flow, as below 900px. */
  .prose > .fig--plate:last-child { float: none; margin: 0; max-width: min(100%, var(--measure)) !important; }
  /* QA r2 VIB-R2-04: a post picture now opens the sheet of the text it stood beside; floated there, the heading or
     paragraph beside it starts at the sheet's top with it, not 1.6em lower */
  .prose > .fig--plate:first-child:not(:last-child) + * { margin-top: 0; }
  .prose > * + .fig--plate:last-child { margin-top: .9em; }
  .prose > :is(h2, h3, h4, h5, h6) + .fig--plate:last-child { margin-top: .55em; }
}
.fig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; align-items: start; }
.fig-grid[data-count="2"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.fig-grid > .fig { width: auto; max-width: 100% !important; margin: 0; rotate: none; float: none; }

/* ---------- 20. cards: index, post, team, docs (F.1, F.2, F.4) ---------- */
.index-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.index-cards:has(.index-card__thumb) { padding-top: 32px; row-gap: 52px; }
.index-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px 22px 20px; border-radius: var(--r-lg); }
/* VIA-09: the frame fits its image and the image is never drawn wider than its file (spec 6.4/6.5): the one
   250 x 167 thumbnail was stretched to 309-312px (1.25x) by width: 100%. 325px files render as before. */
/* QA r2 R2-VIA-05: fit-content made the one 250px thumbnail's frame 39px shorter than its row neighbours' (768), so
   its title and summary started 39px higher. Every thumbnail file is 3:2 (325 x 217 or 250 x 167), so the frame is one
   3:2 slot as wide as the card allows (max 325px); the image sits centred in it at no more than its file size, on the
   frame's paper (a mat around the 250px file), and titles line up across a row. */
.index-card > .index-card__thumb { display: grid; place-items: center; width: 100%; max-width: min(100%, 325px); aspect-ratio: 325 / 217; margin: -54px 0 4px; border-radius: 16px; overflow: hidden; background: var(--paper); box-shadow: var(--e-pop); }
.index-card__thumb img { width: auto; max-width: 100%; height: auto; border-radius: 10px; }
.index-card > .index-card__title { position: static; margin: 0; font-size: var(--fs-h4); font-weight: 800; line-height: var(--lh-h4); }
.index-card__link { color: var(--ink-900); text-decoration: none; }
.index-card__link::after, .post-card__link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.index-card__link:focus-visible, .post-card__link:focus-visible { outline: none; }
.index-card__link:focus-visible::after, .post-card__link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
.index-card:is(:hover, :focus-within) .index-card__link { color: var(--green-800); }
.index-card__summary { margin: 0; max-width: var(--measure-narrow); font-size: var(--fs-sm); color: var(--ink-700); }
.index-card > .index-card__go { display: grid; place-items: center; width: 36px; height: 36px; margin-top: auto; align-self: flex-end; border-radius: 50%; color: var(--green-800); background: var(--c1-btn-bg); border: 1px solid var(--g4-50); }
.index-card__go .ico { width: 18px; height: 18px; }
.index-card:is(:hover, :focus-within) { box-shadow: var(--e-4); }
.index-card:is(:hover, :focus-within) .index-card__go { background: var(--green-700); color: var(--paper); border-color: var(--green-700); }

.post-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
/* No content-visibility (VIB-05, a recorded change to spec 3.18): one intrinsic estimate cannot match a grid row whose
   height is its tallest card (median 469px in 3 columns), so /whats-new/ grew by up to 4,300px while scrolling and
   End / the scrollbar landed short. The 151 cards now lay out once; the document height is stable. */
.post-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 24px; border-radius: var(--r-lg); }
.post-card > .date-pill { order: -1; margin: 0; }
.post-card > .post-card__title { position: static; margin: 0; font-family: var(--ff-body); font-size: var(--fs-h4); font-weight: 800; line-height: var(--lh-h4); }
.post-card__link { color: var(--ink-900); text-decoration: none; }
.post-card:is(:hover, :focus-within) .post-card__link { color: var(--green-800); }
.post-card__excerpt { margin: 0; max-width: var(--measure-narrow); font-size: var(--fs-sm); color: var(--ink-700); }
.post-card > .more { z-index: 4; margin-top: auto; align-self: flex-start; }
.post-card:is(:hover, :focus-within) { box-shadow: var(--e-4); }

.team-card { display: grid; justify-items: start; align-items: center; gap: 14px 32px; padding: clamp(22px, 3vw, 40px); border-radius: var(--r-xl); }
.team-card__photo { max-width: 225px; border-radius: 999px 999px 22px 22px; overflow: hidden; box-shadow: var(--e-arch); }
.team-card__photo img { max-width: 100%; }   /* width/height attributes reserve the box before the lazy load */
.team-card__name { margin: 0; font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--slate-700); }
/* the name and its link sit together, centred beside the portrait (1fr rows above and below absorb the height) */
@media (min-width: 768px) {
  .team-card { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; row-gap: 10px; }
  .team-card > .team-card__photo { grid-column: 1; grid-row: 1 / -1; }
  .team-card > :not(.team-card__photo) { grid-column: 2; }
  .team-card > .team-card__name { grid-row: 2; }
  .team-card > .team-card__name + * { grid-row: 3; }
}

.doc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.doc-card { display: flex; align-items: center; gap: 6px; padding-right: 20px; border-radius: var(--r-lg); font-size: var(--fs-sm); color: var(--ink-700); }
.doc-card > .doc-card__link { flex: 1; min-width: 0; }
.doc-card__link { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 16px 20px; border-radius: inherit; color: var(--ink-900); font-weight: 800; text-decoration: none; }
.doc-card__link > .ico { flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 14px; color: var(--paper); background: var(--icon-tile-bg); }
.doc-card__link:is(:hover, :focus-visible) { color: var(--green-800); }
.doc-card__link:is(:hover, :focus-visible) .doc-card__label { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- 21. logo grids, payment row, QR plate (B.21) ---------- */
/* VIA-07: the logo files are 133 x 110 and the source drew them at that size; the former 70px height cap drew every
   one at 64% (thin wordmarks 3-6px tall). Logos now render at intrinsic size (spec 3.21 "shown at intrinsic size";
   its 70px cap is dropped, a recorded change), and the column minimum is 161px = 133 + the chip's 2 x 14px padding,
   so a 133px logo is never scaled down on a grid. Never upscaled: width/height auto, capped at 100%. */
.logo-grid { --logo-col: 161px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--logo-col)), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.logo-chip { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 104px; padding: var(--logo-pad, 14px); border-radius: 18px; background: var(--paper); box-shadow: var(--e-1); text-align: center; }
/* QA r2 R2-VIA-01: the 161px minimum needs a 334px grid for two columns, so from 324 to 365px every wall collapsed to
   one column (the 31 designer logos stacked 4,638px tall at 360, +2,290px of page). Below 400px the minimum is 140px
   (round 1's) and the chip padding 12px: two columns from 324px, and at 360 a 158px chip draws a 133px logo at its
   full size (134px of room). From 366 to 399px the grid was already two columns and stays so. */
@media (max-width: 399px) { .logo-grid { --logo-col: 140px; --logo-pad: 12px; } }
/* the attributes reserve the box (no shift on lazy load); contain keeps a narrow-column logo undistorted */
.logo-chip img { max-width: 100%; height: auto; object-fit: contain; }
.logo-chip__name { font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; color: var(--ink-900); }
.logo-chip--link { padding: 0; }
.logo-chip__link { display: grid; place-items: center; width: 100%; height: 100%; min-height: 104px; padding: var(--logo-pad, 14px); border-radius: inherit; }
.logo-chip--link:is(:hover, :focus-within) { box-shadow: var(--e-2); }
.pay-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pay-row__item img { max-width: none; }   /* intrinsic 51 x 32, from the attributes */
.qr-plate { width: fit-content; padding: 16px; border-radius: 18px; background: var(--paper); box-shadow: var(--e-1); }
.qr-plate img { width: 250px; height: 250px; max-width: none; }

/* ---------- 22. CTA band (3.22) ---------- */
.cta-band { display: grid; gap: 18px; justify-items: start; padding: clamp(28px, 4vw, 56px); border-radius: var(--r-xl); overflow: hidden; }
.cta-band > .cta-band__rings { position: absolute; z-index: 1; right: -40px; top: 50%; width: 260px; aspect-ratio: 1; margin-top: -130px; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--w-20); outline: 1px solid var(--w-12); outline-offset: 24px; }
.cta-band__h { margin: 0; max-width: 24ch; font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--paper); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* ---------- 23. forms (E) ---------- */
.sheet--form { padding: clamp(22px, 1rem + 2vw, 44px); border-radius: var(--r-xl); }
.form { display: grid; gap: 26px; }
.form__intro > * { max-width: var(--measure); }
.form__intro p:last-child { margin-bottom: 0; }
.form__grid { display: grid; gap: 22px; }
.field { display: grid; align-content: start; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.field { min-inline-size: 0; }
/* a rendered legend is not a grid item, so the fieldset's gap never reaches it: space it explicitly */
fieldset.field > legend { padding: 0 0 8px; }
.field__label { padding: 0; font-size: var(--fs-base); font-weight: 700; line-height: 1.35; color: var(--ink-900); }
.field__req { margin-left: .2em; color: var(--alert); }
.field__control { width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--ink-500); border-radius: var(--r-sm); background: var(--paper); color: var(--ink-900);
  font-size: max(16px, var(--fs-base)); line-height: 1.4; }
textarea.field__control { min-height: 150px; resize: vertical; }
select.field__control { -webkit-appearance: none; appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--green-700) 50%), linear-gradient(135deg, var(--green-700) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.field__control::placeholder { color: var(--ink-500); opacity: 1; }
.field__control:hover { border-color: var(--green-600); }
.field__control:focus { border-color: var(--green-700); outline: 3px solid var(--focus); outline-offset: 2px; }
.field__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 12px; }
.field__sub { display: grid; gap: 6px; min-width: 0; }
.field__sublabel { font-size: var(--fs-sm); color: var(--ink-600); }
.field__help { margin: 0; max-width: var(--measure-narrow); font-size: var(--fs-sm); color: var(--ink-600); }
.field__error { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 10px; border-radius: 10px; background: var(--alert-50); font-size: var(--fs-sm); font-weight: 700; color: var(--alert); }
.field.is-invalid .field__control { border-color: var(--alert); background-color: var(--alert-50); }
.choice { position: relative; display: flex; align-items: center; min-height: 44px; }
.choice__input { position: absolute; left: 0; top: 50%; width: 22px; height: 22px; margin: -11px 0 0; opacity: 0; }
.choice__label { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding-left: 34px; cursor: pointer; font-size: var(--fs-base); color: var(--ink-900); }
.choice__label::before { content: ""; position: absolute; left: 0; top: 50%; width: 22px; height: 22px; margin-top: -11px; border: 1.5px solid var(--ink-500); border-radius: 50%; background: var(--paper); }
.choice__input[type="checkbox"] + .choice__label::before { border-radius: 6px; }
.choice__input:hover + .choice__label::before { border-color: var(--green-600); }
.choice__input:checked + .choice__label::before { border-color: var(--green-700); background: radial-gradient(circle, var(--green-700) 0 5px, var(--paper) 5.5px); }
.choice__input[type="checkbox"]:checked + .choice__label::before { background: var(--green-700); }
.choice__input[type="checkbox"]:checked + .choice__label::after { content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 11px; margin-top: -7px; border-right: 2px solid var(--paper); border-bottom: 2px solid var(--paper); rotate: 45deg; }
.choice__input:focus-visible + .choice__label::before { outline: 3px solid var(--focus); outline-offset: 2px; }
.field.is-invalid .choice__label::before { border-color: var(--alert); }
.form__foot { display: grid; justify-items: start; gap: 16px; }
.form__notice { margin: 0; max-width: var(--measure); padding: 14px 18px; border-radius: 16px; font-weight: 700; color: var(--ink-900); }
.form__notice a { color: var(--green-800); font-weight: 800; }
@media (min-width: 768px) {
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .form__grid > :is(.field--wide, .field--group, .field--choice) { grid-column: 1 / -1; }
}

/* ---------- 24. 404 (F.7) ---------- */
.sheet--404 { position: relative; margin-top: 24px; }
.sheet > .sheet__cut { position: absolute; z-index: 5; top: -48px; right: clamp(8px, 3vw, 32px); width: clamp(110px, 14vw, 170px); height: auto; rotate: 8deg; filter: drop-shadow(var(--cut-shadow)); pointer-events: none; }

/* ---------- 25. print basics ---------- */
@media print {
  body > .field, .progress, .skip, .topbar, .site-header, .drawer, .scrim, .deco, .sprig, .hero__stage, .hero__cut, .band__stage, .band__cut, .rev-nav, .map, .smiles, .sheet__cut { display: none !important; }
  html, body { background: var(--paper); }
  .glass { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--paper) !important; box-shadow: none !important; border: 1px solid var(--ink-100); }
  .glass::before, .glass::after { display: none; }
  .glass--dark, .glass--leaf-deep, .glass--dark :is(p, a, strong, h3), .glass--leaf-deep :is(p, a, h2) { color: var(--ink-900) !important; }
  .site-footer { background: none; }
  .rev-track { display: block; overflow: visible; }
  .rev-slide { margin-bottom: 12px; break-inside: avoid; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  .sheet, .review, .qa__item, .index-card, .post-card { break-inside: avoid; }
}