/* ==========================================================================
   Eye Source — "Lens & Light" design system
   Glass surfaces floating over a refracting light field, with images that
   break out of their frames. Every colour below resolves to the measured
   brand tokens in tokens.css (sr-tokens, computed from live browser capture)
   through color-mix(); only three tints for the light field are literals.

   Depth model (back to front):
     L0  the light field      body::before / ::after  — fixed, refracted by all glass
     L1  stages               .stage                   — sections, some night (slate-ink)
     L2  glass                .glass                   — panels, cards, nav, forms
     L3  frames + cutouts     .frame / .cutout         — photos and objects that overlap edges
     L4  floating chips       .chip / .float-card      — small glass notes in front
   ========================================================================== */

@font-face { font-family: "Raleway"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/raleway-300.ttf") format("truetype"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/raleway-400.ttf") format("truetype"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/raleway-700.ttf") format("truetype"); }
@font-face { font-family: "Raleway"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/raleway-400-italic.ttf") format("truetype"); }

:root {
  /* brand — measured */
  --paper: var(--c-1);
  --ink: var(--c-2);
  --mauve: var(--c-3);
  --lilac: var(--c-4);
  --mist: var(--c-5);
  --slate: var(--c-6);
  --gold: var(--c-7);
  --muted: var(--c-8);
  --alert: var(--c-9);

  /* light-field tints — the only literals: glass needs colour behind it to refract */

  /* derived */
  --night: color-mix(in oklab, var(--slate) 58%, var(--ink));
  --night-2: color-mix(in oklab, var(--slate) 78%, var(--ink));
  --plum: color-mix(in oklab, var(--mauve) 45%, var(--night));
  --rose: color-mix(in oklab, var(--mauve) 55%, var(--paper));
  --blush: color-mix(in oklab, var(--mauve) 16%, var(--lilac));
  --text: color-mix(in oklab, var(--slate) 88%, var(--ink));
  --text-soft: color-mix(in oklab, var(--slate) 82%, var(--lilac));
  --on-night: var(--paper);
  --on-night-soft: color-mix(in oklab, var(--paper) 78%, var(--lilac));
  --line: color-mix(in oklab, var(--slate) 16%, transparent);
  --focus: var(--mauve);

  /* type — the source's own face */
  --ff: var(--font-body), "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lead: clamp(1.08rem, 1rem + 0.45vw, 1.3rem);
  --fs-h1: clamp(2.35rem, 1.6rem + 3.4vw, 4.6rem);
  --fs-h2: clamp(1.8rem, 1.35rem + 2vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.12rem + 0.6vw, 1.6rem);
  --fs-small: var(--fs-9);

  /* space & shape — on the measured scale where it fits */
  --s-1: var(--sp-7);
  --s-2: var(--sp-13);
  --s-3: var(--sp-17);
  --s-4: var(--sp-19);
  --s-5: var(--sp-21);
  --s-6: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --s-7: clamp(5rem, 3.5rem + 6vw, 9rem);
  --r-sm: var(--radius-1);
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: var(--radius-4);
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 76px;

  /* glass recipe */
  --glass: color-mix(in srgb, var(--paper) 62%, transparent);
  --glass-hi: color-mix(in srgb, var(--paper) 80%, transparent);
  --glass-lo: color-mix(in srgb, var(--paper) 36%, transparent);
  --glass-rim: color-mix(in srgb, var(--paper) 72%, transparent);
  --glass-night: color-mix(in srgb, var(--night) 58%, transparent);
  --glass-night-rim: color-mix(in srgb, var(--paper) 16%, transparent);
  --blur: blur(22px) saturate(1.7);
  --blur-soft: blur(12px) saturate(1.4);
  --sheen: inset 0 1px 0 color-mix(in srgb, var(--paper) 92%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--mauve) 10%, transparent);
  --shade-1: 0 1px 2px color-mix(in srgb, var(--night) 10%, transparent), 0 8px 24px -10px color-mix(in srgb, var(--night) 22%, transparent);
  --shade-2: 0 2px 4px color-mix(in srgb, var(--night) 8%, transparent), 0 18px 40px -14px color-mix(in srgb, var(--plum) 28%, transparent), 0 48px 90px -40px color-mix(in srgb, var(--night) 34%, transparent);
  --shade-3: 0 4px 10px color-mix(in srgb, var(--night) 10%, transparent), 0 30px 60px -18px color-mix(in srgb, var(--plum) 36%, transparent), 0 80px 140px -50px color-mix(in srgb, var(--night) 48%, transparent);
  --drop: drop-shadow(0 24px 30px color-mix(in srgb, var(--night) 34%, transparent)) drop-shadow(0 6px 8px color-mix(in srgb, var(--night) 22%, transparent));

  --ease: cubic-bezier(.2, .7, .15, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0;
  font-family: var(--ff);
  font-size: var(--fs-body);
  line-height: 1.68;
  color: var(--text);
  background: var(--lilac);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p, ul, ol, dl, blockquote, table { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 300; line-height: 1.12; letter-spacing: -0.018em; color: var(--ink); text-wrap: balance; }
strong, b { font-weight: 700; }
::selection { background: color-mix(in srgb, var(--mauve) 30%, var(--paper)); color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 1000;
  padding: 12px 18px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper); font-weight: 700; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip:focus { top: 12px; }

/* ---------- L0: the light field ---------------------------------------- */
body::before, body::after { content: ""; position: fixed; inset: -12vmax; z-index: -2; pointer-events: none; }
body::before {
  background:
    radial-gradient(42vmax 34vmax at 12% 8%, color-mix(in srgb, var(--tint-violet) 46%, transparent), transparent 70%),
    radial-gradient(38vmax 32vmax at 92% 22%, color-mix(in srgb, var(--tint-sky) 34%, transparent), transparent 70%),
    radial-gradient(46vmax 40vmax at 78% 96%, color-mix(in srgb, var(--rose) 46%, transparent), transparent 72%),
    radial-gradient(40vmax 36vmax at 6% 88%, color-mix(in srgb, var(--tint-peach) 34%, transparent), transparent 70%),
    var(--lilac);
  animation: field-drift 38s ease-in-out infinite alternate;
}
body::after {
  z-index: -1;
  /* concentric lens rings — the optical motif, barely there */
  background: repeating-radial-gradient(circle at 76% 18%, transparent 0 46px, color-mix(in srgb, var(--paper) 42%, transparent) 46px 47px, transparent 47px 96px);
  -webkit-mask-image: radial-gradient(60vmax 50vmax at 76% 18%, var(--ink) 0%, transparent 72%);
          mask-image: radial-gradient(60vmax 50vmax at 76% 18%, var(--ink) 0%, transparent 72%);
  opacity: .55;
}
@keyframes field-drift {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  to   { transform: translate3d(-2.5vmax, 1.5vmax, 0) rotate(4deg) scale(1.06); }
}

/* ---------- layout ------------------------------------------------------ */
.container { width: min(100%, var(--wrap)); margin-inline: auto; padding-inline: var(--gutter); }
.stage { position: relative; isolation: isolate; }
.stage--night { color: var(--on-night-soft); background: var(--night); }
.stage--night h1, .stage--night h2, .stage--night h3 { color: var(--on-night); }
.section { padding-block: var(--s-6); position: relative; }
.section-head { max-width: 760px; margin-bottom: var(--s-5); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--fs-h2); }
.section-head p:not(.eyebrow) { margin-top: var(--s-2); font-size: var(--fs-lead); color: var(--text-soft); }
.section-head h2 a, .post-card h3 a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--ease), color .3s; }
.section-head h2 a:hover, .post-card h3 a:hover { background-size: 100% 2px; color: var(--mauve); }

/* ---------- type -------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mauve); margin-bottom: var(--s-2);
}
.eyebrow::before {
  content: ""; width: 34px; height: 12px; flex: none;
  background: currentColor;
  -webkit-mask: url("../img/arc.svg") center / contain no-repeat;
          mask: url("../img/arc.svg") center / contain no-repeat;
}
.stage--night .eyebrow { color: var(--rose); }
.lead { font-size: var(--fs-lead); line-height: 1.6; }
.h-accent { font-style: italic; font-weight: 300; color: var(--mauve); }
.stage--night .h-accent {
  color: transparent;
  background: linear-gradient(100deg, var(--rose), var(--tint-violet) 55%, var(--tint-sky));
  -webkit-background-clip: text; background-clip: text;
}

/* ---------- glass ------------------------------------------------------- */
.glass {
  position: relative;
  background: linear-gradient(140deg, var(--glass-hi), var(--glass-lo));
  -webkit-backdrop-filter: var(--blur);
          backdrop-filter: var(--blur);
  border: 1px solid var(--glass-rim);
  border-radius: var(--r-lg);
  box-shadow: var(--sheen), var(--shade-2);
}
/* specular highlight — follows the pointer where the device has one (site.js sets --mx/--my) */
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 18%) var(--my, -10%), color-mix(in srgb, var(--paper) 55%, transparent), transparent 60%);
  opacity: .7; mix-blend-mode: soft-light; transition: opacity .4s var(--ease);
}
.glass--night {
  background: linear-gradient(150deg, color-mix(in srgb, var(--night-2) 62%, transparent), color-mix(in srgb, var(--night) 72%, transparent));
  border-color: var(--glass-night-rim);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper) 22%, transparent), var(--shade-3);
  color: var(--on-night-soft);
}
.glass--night::after { opacity: .35; }
.glass--thin { background: var(--glass-lo); -webkit-backdrop-filter: var(--blur-soft); backdrop-filter: var(--blur-soft); box-shadow: var(--sheen), var(--shade-1); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass { background: color-mix(in srgb, var(--paper) 94%, var(--lilac)); }
  .glass--night { background: color-mix(in srgb, var(--night) 94%, var(--slate)); }
  .glass--thin { background: color-mix(in srgb, var(--paper) 90%, var(--lilac)); }
}

/* ---------- buttons ----------------------------------------------------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--paper);
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: .8em 1.5em;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 700 .95rem/1.1 var(--ff); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--paper) 18%, transparent) inset, var(--shade-1);
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn::before { /* light sweep */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--paper) 42%, transparent) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--paper) 22%, transparent) inset, 0 14px 30px -10px color-mix(in srgb, var(--plum) 60%, transparent), 0 0 0 4px color-mix(in srgb, var(--mauve) 22%, transparent); }
.btn:hover::before { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--primary { --btn-bg: var(--ink); }
.btn--mauve { --btn-bg: var(--mauve); }
.btn--light { --btn-bg: var(--paper); --btn-fg: var(--ink); }
.btn--glass {
  --btn-bg: var(--glass); --btn-fg: var(--ink);
  border-color: var(--glass-rim);
  -webkit-backdrop-filter: var(--blur-soft); backdrop-filter: var(--blur-soft);
}
.stage--night .btn--glass, .glass--night .btn--glass { --btn-bg: color-mix(in srgb, var(--paper) 12%, transparent); --btn-fg: var(--paper); border-color: color-mix(in srgb, var(--paper) 28%, transparent); }
.btn--lg { min-height: 56px; padding: 1em 1.8em; font-size: 1rem; }
.btn--sm { min-height: 40px; padding: .6em 1.1em; font-size: .85rem; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45em;
  font-weight: 700; color: var(--ink); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size .45s var(--ease), gap .35s var(--ease), color .3s;
}
.link-arrow::after { content: "\2192"; transition: transform .35s var(--ease-spring); }
.link-arrow:hover { background-size: 100% 1.5px; color: var(--mauve); }
.link-arrow:hover::after { transform: translateX(4px); }
.stage--night .link-arrow, .glass--night .link-arrow { color: var(--paper); }

/* ---------- announcement ------------------------------------------------ */
.announce {
  position: relative; z-index: 60;
  background: var(--ink); color: var(--alert);
  font-size: .9rem; font-weight: 700; text-align: center;
}
.announce__inner { display: flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 40px; padding: 8px 52px; }
.announce b { color: var(--paper); }
.announce a { color: var(--alert); text-decoration: underline; text-underline-offset: 3px; }
.announce a:hover { color: var(--paper); }
.announce__close {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: transparent; color: var(--paper); display: grid; place-items: center;
}
.announce__close:hover { background: color-mix(in srgb, var(--paper) 14%, transparent); }
.announce__close svg { width: 16px; height: 16px; }
.announce[hidden] { display: none; }

/* ---------- header ------------------------------------------------------ */
/* every page opens on a night stage, so the strip above the nav is part of it */
.strip { position: relative; z-index: 55; font-size: .86rem; color: var(--on-night-soft); background: var(--night); }
.strip .strip__phone { color: var(--paper); }
.strip .strip__phone:hover { color: var(--rose); }
.strip__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 38px; padding-block: 6px; }
.strip__h { font-size: inherit; font-weight: 400; letter-spacing: 0; color: inherit; line-height: 1.4; display: flex; align-items: center; gap: .55em; }
.strip__h svg { width: 16px; height: 16px; color: var(--rose); flex: none; }
.strip__phone { color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.strip__phone:hover { color: var(--mauve); }

.site-header { position: sticky; top: 10px; z-index: 50; padding-inline: var(--gutter); margin-top: 4px; }
.nav-shell {
  width: min(100%, 1340px); margin-inline: auto;
  display: flex; align-items: center; gap: var(--s-2);
  min-height: var(--header-h); padding: 8px 10px 8px 22px;
  border-radius: var(--r-pill);
  background: linear-gradient(140deg, color-mix(in srgb, var(--paper) 90%, transparent), color-mix(in srgb, var(--paper) 70%, transparent));
  transition: box-shadow .4s var(--ease), background .4s var(--ease), min-height .4s var(--ease);
}
.site-header.is-scrolled .nav-shell { min-height: 64px; background: linear-gradient(140deg, color-mix(in srgb, var(--paper) 86%, transparent), color-mix(in srgb, var(--paper) 64%, transparent)); box-shadow: var(--sheen), var(--shade-3); }
.brand { display: inline-flex; align-items: center; flex: none; border-radius: 12px; }
/* the logo file carries ~1/6 transparent padding top and bottom; a 1.95:1 cover box trims it
   without touching the ink (measured: ink spans y 75-375 of 455) */
.brand img, .drawer__top img, .footer__brand img { aspect-ratio: 1.95; object-fit: cover; height: auto; }
.brand img { width: clamp(112px, 9vw, 128px); transition: width .4s var(--ease); }
.site-header.is-scrolled .brand img { width: clamp(100px, 8vw, 112px); }

.nav { margin-left: auto; }
.menu { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
.menu > li { position: relative; display: flex; align-items: center; }
.menu a, .menu__parent {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  padding: 10px 11px; border-radius: var(--r-pill);
  font-size: .92rem; font-weight: 400; color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s;
}
.menu > li > a::after { /* the logo's eye-arc, drawn in on hover */
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 7px;
  background: var(--mauve);
  -webkit-mask: url("../img/arc.svg") center / 100% 100% no-repeat; mask: url("../img/arc.svg") center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--ease);
}
.menu > li > a:hover::after, .menu > li > a[aria-current="page"]::after, .menu > li:focus-within > a::after { clip-path: inset(0 0 0 0); }
.menu a:hover { background: color-mix(in srgb, var(--paper) 55%, transparent); }
.submenu-toggle {
  width: 30px; height: 30px; margin-left: -8px; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  display: inline-grid; place-items: center; color: var(--ink); vertical-align: middle;
}
.submenu-toggle svg { width: 12px; height: 12px; transition: transform .3s var(--ease); }
.has-children:hover .submenu-toggle svg, .has-children.is-open .submenu-toggle svg { transform: rotate(180deg); }
.submenu {
  list-style: none; margin: 0; padding: 8px; position: absolute; left: 0; top: calc(100% + 10px); min-width: 240px;
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98); transform-origin: top left;
  transition: opacity .3s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.has-children:hover > .submenu, .has-children:focus-within > .submenu, .has-children.is-open > .submenu {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.submenu a { display: flex; width: 100%; border-radius: 14px; padding: 12px 14px; }
.header-cta { display: flex; align-items: center; gap: 8px; flex: none; }
.icon-btn {
  width: 48px; height: 48px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  color: var(--ink); background: color-mix(in srgb, var(--paper) 60%, transparent); border: 1px solid var(--glass-rim);
  text-decoration: none; cursor: pointer; transition: transform .35s var(--ease-spring), background .3s;
}
.icon-btn:hover { transform: translateY(-2px) rotate(-6deg); background: var(--paper); }
.icon-btn svg { width: 20px; height: 20px; }
.nav-toggle { display: none; }

/* the hamburger is for phones and portrait tablets only; from 1024px the full nav shows (compacted
   below 1340px - see "Desktop nav tiers" at the end of this file) */
@media (max-width: 1023px) {
  .nav, .header-cta .btn { display: none; }
  .nav-toggle { display: inline-grid; }
  .header-cta { margin-left: auto; }
}
@media (max-width: 640px) {
  .strip__phone { display: none; }
  .strip__h { font-size: .8rem; }
  .nav-shell { padding-left: 16px; }
}

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 200; display: grid; justify-items: end;
  visibility: hidden; pointer-events: none;
}
.drawer__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--night) 40%, transparent); opacity: 0; transition: opacity .4s var(--ease); }
.drawer__panel {
  position: relative; width: min(420px, 100%); height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 22px 32px; border-radius: 0; border-left: 1px solid var(--glass-rim);
  transform: translateX(104%); transition: transform .5s var(--ease);
  display: flex; flex-direction: column; gap: 18px;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; }
.drawer__top img { width: 130px; }
.drawer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.drawer__menu a { display: flex; padding: 14px 16px; border-radius: 16px; text-decoration: none; font-size: 1.15rem; color: var(--ink); }
.drawer__menu a:hover { background: color-mix(in srgb, var(--paper) 70%, transparent); }
.drawer__menu .drawer__sub a { padding-left: 34px; font-size: 1rem; color: var(--text-soft); }
.drawer__actions { display: grid; gap: 10px; margin-top: auto; }
.drawer__actions .btn { width: 100%; }
body.drawer-open { overflow: hidden; }

/* scroll progress */
.progress { position: fixed; left: 0; top: 0; z-index: 300; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--scroll, 0)); background: linear-gradient(90deg, var(--mauve), var(--tint-violet), var(--tint-sky)); pointer-events: none; }

/* ---------- L3: frames & cutouts --------------------------------------- */
.frame {
  position: relative; margin: 0; overflow: hidden; border-radius: var(--r-lg);
  box-shadow: var(--shade-3);
  background: var(--mist);
}
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.frame::after { /* glass rim + top sheen over the photo */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 45%, transparent), inset 0 1px 0 color-mix(in srgb, var(--paper) 70%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--paper) 18%, transparent), transparent 42%);
}
.frame--lens { border-radius: 48% 48% var(--r-lg) var(--r-lg) / 32% 32% var(--r-lg) var(--r-lg); }
.frame--arch { border-radius: 999px 999px var(--r-lg) var(--r-lg); }
.frame--pill { border-radius: 999px; }
a:hover .frame img, .frame:hover img { transform: scale(1.05); }

.cutout { position: absolute; pointer-events: none; filter: var(--drop); z-index: 5; }
.cutout img { width: 100%; height: auto; }
.float-card { position: absolute; z-index: 6; }
.chip {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .55em 1em; border-radius: var(--r-pill); font-size: .88rem; font-weight: 700; color: var(--ink); text-decoration: none;
}
.chip svg { width: 18px; height: 18px; flex: none; color: var(--mauve); }
.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.stars svg { width: 16px; height: 16px; filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--ink) 25%, transparent)); }

/* ---------- home: hero -------------------------------------------------- */
.hero-home { padding-block: 0; overflow: visible; z-index: 3; margin-top: calc(-1 * (var(--header-h) + 20px)); padding-top: calc(var(--header-h) + clamp(2rem, 1rem + 3vw, 3.75rem)); }
.hero-home::before { /* night stage with its own light pools */
  content: ""; position: absolute; inset: 0 0 90px; z-index: -1; border-radius: 0 0 var(--r-xl) var(--r-xl);
  background:
    radial-gradient(60% 70% at 85% 30%, color-mix(in srgb, var(--tint-violet) 34%, transparent), transparent 70%),
    radial-gradient(50% 60% at 10% 90%, color-mix(in srgb, var(--mauve) 42%, transparent), transparent 72%),
    radial-gradient(40% 50% at 45% 0%, color-mix(in srgb, var(--tint-sky) 22%, transparent), transparent 70%),
    var(--night);
}
.hero-home__rings { position: absolute; inset: 0 0 90px; z-index: -1; overflow: hidden; border-radius: 0 0 var(--r-xl) var(--r-xl); pointer-events: none; }
.hero-home__rings svg { position: absolute; right: -12%; top: -18%; width: min(1100px, 110vw); height: auto; opacity: .5; }
.hero-home__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.hero-home__copy { padding: clamp(1.6rem, 1.2rem + 2vw, 3rem); max-width: 640px; z-index: 4; }
.hero-home__copy h1 { font-size: clamp(2.3rem, 1.3rem + 2.9vw, 4rem); line-height: 1.04; letter-spacing: -0.03em; }
.hero-home__copy .lead { margin-top: var(--s-3); color: var(--on-night-soft); max-width: 46ch; }
.hero-home__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-4); }
.hero-home__meta .chip { color: var(--paper); background: color-mix(in srgb, var(--paper) 10%, transparent); border: 1px solid color-mix(in srgb, var(--paper) 18%, transparent); }
.hero-home__meta .chip svg { color: var(--rose); }

.hero-visual { position: relative; min-height: clamp(420px, 36vw, 600px); }
.hero-visual .frame--main { position: absolute; right: 0; top: 0; width: 86%; aspect-ratio: 4 / 5; }
.hero-visual .frame--main img { object-position: 38% 30%; }
.hero-visual .frame--b { position: absolute; left: 0; top: 6%; width: 34%; aspect-ratio: 1; border-radius: 50%; border: 6px solid color-mix(in srgb, var(--paper) 22%, transparent); z-index: 3; }
.hero-visual .frame--b img { object-position: 50% 30%; }
.hero-visual .cutout--hero { width: 66%; left: -12%; bottom: -19%; z-index: 7; transform: rotate(-9deg); }
.hero-visual .float-card--review { right: -4%; bottom: 20%; width: min(290px, 64%); padding: 16px 18px; z-index: 8; }
.float-card--review p { font-size: .92rem; line-height: 1.45; color: var(--ink); font-style: italic; margin-top: 6px; }
.float-card--review cite { display: block; font-style: normal; font-weight: 700; font-size: .82rem; margin-top: 8px; color: var(--mauve); }
.hero-visual .ring-orbit { position: absolute; inset: -6% -4% auto auto; width: 92%; aspect-ratio: 1; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); z-index: -1; }
.hero-visual .ring-orbit::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; top: 12%; left: 12%; background: var(--rose); box-shadow: 0 0 24px 6px color-mix(in srgb, var(--rose) 60%, transparent); }

/* quick-action dock — overlaps the hero's lower edge */
.dock { position: relative; z-index: 9; margin-top: clamp(2.5rem, 1rem + 4vw, 4.5rem); }
.dock__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 12px; border-radius: var(--r-xl); }
.dock__item {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 16px 18px;
  border-radius: calc(var(--r-xl) - 12px); text-decoration: none; color: var(--ink); font-weight: 700; line-height: 1.25;
  background: color-mix(in srgb, var(--paper) 55%, transparent); border: 1px solid var(--glass-rim);
  transition: transform .45s var(--ease-spring), background .3s var(--ease), box-shadow .4s var(--ease);
}
.dock__item:hover { transform: translateY(-6px); background: var(--paper); box-shadow: var(--shade-2); }
.dock__icon { width: 48px; height: 48px; flex: none; border-radius: 16px; display: grid; place-items: center; color: var(--paper); background: linear-gradient(145deg, var(--mauve), var(--plum)); box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--plum) 70%, transparent); transition: transform .5s var(--ease-spring); }
.dock__item:hover .dock__icon { transform: rotate(-8deg) scale(1.08); }
.dock__icon svg { width: 22px; height: 22px; }

/* ---------- home: welcome + appointment -------------------------------- */
.welcome { padding-top: clamp(5rem, 3rem + 6vw, 8rem); z-index: 2; }
.welcome__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.welcome__copy .prose { font-size: var(--fs-lead); }
.welcome__stack { position: relative; margin-top: var(--s-5); height: clamp(280px, 26vw, 380px); }
.welcome__stack .frame--a { position: absolute; left: 0; top: 0; width: 72%; height: 82%; transform: rotate(-2.5deg); z-index: 2; }
.welcome__stack .frame--b { position: absolute; right: 0; bottom: 0; width: 52%; height: 62%; transform: rotate(3deg); z-index: 3; border: 6px solid var(--paper); }
.welcome__stack .cutout { width: 34%; right: 6%; top: -16%; z-index: 4; }
.form-card { padding: clamp(1.4rem, 1rem + 1.5vw, 2.4rem); position: sticky; top: calc(var(--header-h) + 36px); }

/* ---------- forms ------------------------------------------------------- */
.form__title { font-size: var(--fs-h3); font-weight: 400; margin-bottom: var(--s-3); }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 14px; }
.form__grid > * { grid-column: 1 / -1; }
.form__grid > .field:not(.field--wide):not(.field--check) { grid-column: auto; }
.form__grid > .field--check { grid-column: auto; }
.field { display: grid; gap: 6px; }
.field label { font-size: .85rem; font-weight: 700; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 14px;
  font: 400 1rem/1.4 var(--ff); color: var(--ink);
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--slate) 22%, transparent);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--night) 8%, transparent);
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { background: var(--paper); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--mauve); background: var(--paper); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mauve) 22%, transparent); }
.field--check { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border-radius: 14px; background: color-mix(in srgb, var(--paper) 50%, transparent); border: 1px solid color-mix(in srgb, var(--slate) 14%, transparent); }
.field--check input { width: 20px; height: 20px; min-height: 0; accent-color: var(--mauve); box-shadow: none; }
.field--check label { font-weight: 400; font-size: .95rem; }
.field-legend { font-size: .85rem; margin-top: 4px; }
.form-sub { font-size: 1.1rem; font-weight: 700; margin-top: 10px; }
.req { color: var(--alert); }
.form-note { font-size: .82rem; color: var(--text-soft); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: var(--s-3); }
.form-offline { margin-top: var(--s-2); padding: 12px 14px; border-radius: 14px; font-size: .9rem; background: color-mix(in srgb, var(--alert) 10%, var(--paper)); border: 1px solid color-mix(in srgb, var(--alert) 30%, transparent); color: var(--ink); }
.form-offline a { font-weight: 700; }

/* ---------- home: doctor + reviews ------------------------------------- */
.doctor__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.doctor__portrait { position: relative; max-width: 460px; justify-self: center; width: 100%; }
.doctor__portrait .frame--arch { aspect-ratio: 3 / 4; z-index: 2; }
.doctor__portrait .frame--arch img { object-position: 50% 20%; }
.doctor__portrait .ghost { position: absolute; inset: 7% -7% -7% 7%; border-radius: 999px 999px var(--r-lg) var(--r-lg); border: 1.5px solid color-mix(in srgb, var(--mauve) 50%, transparent); z-index: 1; }
.doctor__portrait .ghost--fill { inset: -6% 8% 10% -8%; border: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--tint-violet) 50%, transparent), color-mix(in srgb, var(--rose) 40%, transparent)); filter: blur(2px); z-index: 0; }
.doctor__portrait .cutout { width: 74%; left: -22%; bottom: -5%; transform: rotate(-12deg); }
.doctor__portrait .float-card { right: -8%; top: 12%; padding: 12px 16px; }
.doctor__bio { padding: clamp(1.6rem, 1.2rem + 2vw, 3rem); }
.doctor__bio h2 { font-size: var(--fs-h2); }
.doctor__bio h3 { font-size: var(--fs-h3); margin-top: var(--s-3); font-weight: 400; }
.doctor__bio h3 a { text-decoration: none; }
.doctor__bio h3 a:hover { color: var(--mauve); }
.doctor__bio p { margin-top: var(--s-2); }

.reviews { margin-top: var(--s-6); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.reviews h3 { font-size: var(--fs-h2); font-weight: 300; }
.deck { position: relative; display: grid; perspective: 1400px; padding: 0 70px 60px 0; }
.deck__card {
  grid-area: 1 / 1; position: relative; width: 100%; max-width: 560px; min-height: 250px; padding: 28px 30px 26px;
  display: flex; flex-direction: column; gap: 12px;
  transform-origin: 50% 110%;
  transition: transform .8s var(--ease), opacity .6s var(--ease), filter .6s var(--ease);
}
.deck__card { align-self: start; }
/* cards behind the front one are cropped to a tidy stack; the full text is on the front card */
.deck__card:not([data-pos="0"]) { max-height: 250px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, var(--ink) 55%, transparent); mask-image: linear-gradient(180deg, var(--ink) 55%, transparent); }
.deck__card blockquote { font-size: 1.05rem; line-height: 1.55; color: var(--ink); }
.deck__card figcaption { margin-top: auto; font-weight: 700; color: var(--mauve); }
.deck__card[data-pos="0"] { transform: translate3d(0, 0, 0) rotate(0); z-index: 5; }
.deck__card[data-pos="1"] { transform: translate3d(24px, 18px, -60px) rotate(3deg); z-index: 4; opacity: .9; }
.deck__card[data-pos="2"] { transform: translate3d(46px, 34px, -120px) rotate(6deg); z-index: 3; opacity: .7; filter: blur(.5px); }
.deck__card[data-pos="3"] { transform: translate3d(64px, 46px, -180px) rotate(8deg); z-index: 2; opacity: .45; filter: blur(1px); }
.deck__card[data-pos="-1"] { transform: translate3d(-120%, -10px, 0) rotate(-12deg); opacity: 0; z-index: 6; }
.deck__card[data-pos="far"] { transform: translate3d(70px, 54px, -220px) rotate(9deg); opacity: 0; z-index: 1; }
.deck__nav { display: flex; align-items: center; gap: 10px; margin-top: var(--s-3); }
.deck__count { font-size: .9rem; font-weight: 700; color: var(--text-soft); min-width: 4ch; }

/* a section's own source photograph, kept as a faint back layer */
.stage__photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.stage__photo img { width: 100%; height: 115%; object-fit: cover; opacity: .16; filter: saturate(.7); -webkit-mask-image: linear-gradient(180deg, transparent, var(--ink) 25%, var(--ink) 70%, transparent); mask-image: linear-gradient(180deg, transparent, var(--ink) 25%, var(--ink) 70%, transparent); }

/* ---------- home: services trio (images pop out of the card top) ------- */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, .6rem + 1.6vw, 2rem); margin-top: calc(var(--s-5) + 40px); }
.pop-card { position: relative; display: flex; flex-direction: column; padding: 0 22px 26px; text-decoration: none; color: inherit; transition: transform .6s var(--ease-spring), box-shadow .5s var(--ease); transform-style: preserve-3d; }
.pop-card .frame { margin: -44px -8px 0; aspect-ratio: 4 / 3; border-radius: calc(var(--r-lg) - 4px); transform: translateZ(40px) rotate(-1.2deg); transition: transform .7s var(--ease-spring), box-shadow .5s var(--ease); }
.pop-card:nth-child(2) .frame { transform: translateZ(40px) rotate(1.2deg); }
.pop-card h3 { font-size: var(--fs-h3); font-weight: 400; margin-top: 22px; }
.pop-card p { margin-top: 10px; color: var(--text-soft); }
.pop-card .link-arrow { margin-top: auto; padding-top: 16px; }
.pop-card:hover { transform: translateY(-8px); box-shadow: var(--sheen), var(--shade-3); }
.pop-card:hover .frame { transform: translateY(-14px) rotate(0) scale(1.03); }

/* ---------- home: featured technology ---------------------------------- */
.feature__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(1.2rem, 1rem + 2vw, 3rem); align-items: center; }
.feature__plinth { position: relative; padding: 18px; transform: perspective(1400px) rotateY(-4deg) rotateX(2deg); transform-origin: 30% 50%; transition: transform .8s var(--ease); }
.feature__plinth:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.feature__plinth .frame { border-radius: calc(var(--r-lg) - 8px); }
.feature__plinth .cutout { width: 38%; right: -9%; top: -34%; }
.feature__side { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; transition: transform .5s var(--ease-spring); }
.feature__side:hover { transform: translateY(-6px); }
.feature__side .frame { border-radius: 0; box-shadow: none; aspect-ratio: 16 / 9; }
.feature__side .body { padding: 22px 24px 26px; display: grid; gap: 10px; }
.feature__side h3 { font-size: var(--fs-h3); font-weight: 400; }

/* ---------- home: optical shop (staggered depth) ----------------------- */
.shop { overflow: hidden; }
.shop__field { position: absolute; inset: 0; z-index: -1; }
.shop__field img { width: 100%; height: 100%; object-fit: cover; opacity: .16; filter: saturate(.6) blur(2px); }
.shop__field::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--lilac), transparent 30%, transparent 70%, var(--lilac)); }
.shop__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, .5rem + 1.4vw, 1.8rem); align-items: start; }
.brand-tile { position: relative; padding: 12px 12px 14px; display: grid; gap: 12px; margin: 0; transition: transform .6s var(--ease-spring), box-shadow .5s; }
.brand-tile:nth-child(even) { margin-top: 56px; }
.brand-tile .frame { aspect-ratio: 5 / 6; border-radius: calc(var(--r-lg) - 10px); box-shadow: var(--shade-1); }
.brand-tile .frame img { object-fit: cover; }
.brand-tile figcaption { text-align: center; font-weight: 700; letter-spacing: .06em; color: var(--ink); }
.brand-tile:hover { transform: translateY(-10px) rotate(-1deg); box-shadow: var(--sheen), var(--shade-3); }
.shop .cutout { width: clamp(200px, 22vw, 320px); right: 2%; top: 4%; transform: rotate(14deg); }

/* ---------- home: family band (photo band + glass card) ---------------- */
.band { padding-block: var(--s-7); overflow: hidden; }
.band__photo { position: absolute; inset: -12% 0; z-index: -1; }
.band__photo img { width: 100%; height: 100%; object-fit: cover; }
.band__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--night) 70%, transparent), color-mix(in srgb, var(--night) 10%, transparent) 70%); }
.band__card { max-width: 560px; padding: clamp(1.6rem, 1.2rem + 2vw, 2.8rem); }
.band__card h2 { font-size: var(--fs-h2); }
.band__card p { margin-top: var(--s-2); }
.band .cutout { width: clamp(160px, 18vw, 260px); left: min(520px, 46vw); bottom: 12%; transform: rotate(-16deg); }

/* ---------- home: emergencies ------------------------------------------ */
.alert-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.2rem, 1rem + 2vw, 2.6rem); padding: clamp(1.6rem, 1.2rem + 2vw, 3rem); overflow: hidden; border-left: 5px solid var(--alert); }
.alert-card__icon { width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; color: var(--paper); background: linear-gradient(150deg, var(--alert), color-mix(in oklab, var(--alert) 60%, var(--night))); box-shadow: 0 18px 30px -12px color-mix(in srgb, var(--alert) 60%, transparent); }
.alert-card__icon svg { width: 40px; height: 40px; }
.alert-card h2 { font-size: var(--fs-h2); }
.alert-card .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-3); }
.alert-card a { color: var(--alert); font-weight: 700; }
.alert-card__bg { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; }
.alert-card__bg img { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: none; opacity: .22; -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 60%); mask-image: linear-gradient(90deg, transparent, var(--ink) 60%); }

/* ---------- home: news -------------------------------------------------- */
.news { overflow: hidden; }
.news__photo { position: relative; height: clamp(220px, 26vw, 360px); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shade-2); }
.news__photo img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 92%; }
.news__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, .8rem + 1.5vw, 2rem); margin-top: calc(-1 * clamp(90px, 9vw, 140px)); padding-inline: clamp(0px, 3vw, 48px); position: relative; z-index: 2; }
.post-card { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px; text-decoration: none; color: inherit; transition: transform .5s var(--ease-spring), box-shadow .5s; }
.post-card:hover { transform: translateY(-8px); box-shadow: var(--sheen), var(--shade-3); }
.post-card h3 { font-size: var(--fs-h3); font-weight: 400; }
.post-card time, .post-card .date { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mauve); }

/* ---------- contact trio ----------------------------------------------- */
.visit__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1rem, .8rem + 1.2vw, 1.8rem); align-items: stretch; }
.visit-card { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.visit-card h2, .visit-card h3.as-h { font-size: 1.6rem; font-weight: 300; }
.visit-card h3 { font-size: 1.15rem; font-weight: 400; }
.visit-card ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.visit-card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; }
.visit-card dt { font-weight: 700; color: var(--ink); }
.hours-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.hours-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 12px; }
.hours-list li.is-today { background: color-mix(in srgb, var(--mauve) 14%, var(--paper)); font-weight: 700; color: var(--ink); }
.hours-list li span:first-child { font-weight: 700; color: var(--ink); }
.map-frame { position: relative; flex: 1; min-height: 280px; border-radius: 22px; overflow: hidden; box-shadow: var(--shade-1); }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.85); }
.visit-photo { border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 10; }
.visit-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- interior page hero ----------------------------------------- */
.page-hero { margin-top: calc(-1 * (var(--header-h) + 20px)); padding: calc(var(--header-h) + clamp(2.5rem, 2rem + 3vw, 4.5rem)) 0 clamp(4.5rem, 3rem + 5vw, 7.5rem); z-index: 3; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: 0 0 var(--r-xl) var(--r-xl);
  background:
    radial-gradient(55% 80% at 90% 20%, color-mix(in srgb, var(--tint-violet) 30%, transparent), transparent 70%),
    radial-gradient(45% 70% at 0% 100%, color-mix(in srgb, var(--mauve) 38%, transparent), transparent 72%),
    var(--night);
}
.page-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: 0 0 var(--r-xl) var(--r-xl); }
.page-hero__bg img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; opacity: .34; mix-blend-mode: luminosity; }
.page-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(95deg, color-mix(in srgb, var(--night) 88%, transparent) 30%, color-mix(in srgb, var(--night) 30%, transparent)); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(1rem, 1rem + 3vw, 4rem); align-items: center; }
.page-hero__copy { padding: clamp(1.4rem, 1rem + 2vw, 2.6rem); max-width: 800px; }
.page-hero__copy h1 { font-size: clamp(2rem, 1.4rem + 2.8vw, 3.7rem); line-height: 1.05; letter-spacing: -0.025em; }
.page-hero__visual { position: relative; min-height: 260px; }
.page-hero__visual .cutout { position: absolute; width: 150%; right: -30%; bottom: -46%; transform: rotate(-10deg); }
.page-hero__visual .lens-glow { position: absolute; inset: 0; margin: auto; width: 88%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tint-violet) 40%, transparent), transparent 70%); border: 1px solid color-mix(in srgb, var(--paper) 18%, transparent); }

.breadcrumb { font-size: .85rem; color: var(--on-night-soft); margin-bottom: var(--s-3); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; }
.breadcrumb a { color: var(--on-night); text-decoration: none; opacity: .85; }
.breadcrumb a:hover { opacity: 1; text-decoration: underline; }
.breadcrumb .sep { opacity: .5; padding-inline: 6px; }

/* ---------- interior body ---------------------------------------------- */
.page-body { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); padding-top: clamp(3rem, 2rem + 3vw, 5rem); padding-bottom: var(--s-6); align-items: start; }
.page-body--solo { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.page-main { display: grid; gap: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); min-width: 0; }
.sheet { --pad: clamp(1.3rem, 1rem + 2vw, 2.8rem); padding: var(--pad); min-width: 0; }
.sheet > h2 { font-size: var(--fs-h2); margin-bottom: var(--s-3); }
.page-aside { position: sticky; top: calc(var(--header-h) + 36px); display: grid; gap: 16px; }
.aside-card { padding: 22px; display: grid; gap: 12px; }
.aside-card h2 { font-size: 1.3rem; font-weight: 400; }
.aside-card .btn { width: 100%; }
.aside-card .hours-list li { padding: 6px 10px; font-size: .92rem; }

/* prose */
.prose { color: var(--text); overflow-wrap: anywhere; }
.prose > * + * { margin-top: 1em; }
.prose > h2 + *, .prose > h3 + *, .prose > h4 + * { margin-top: .55em; }
.prose h2 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.2rem); margin-top: 1.6em; }
.prose h3 { font-size: var(--fs-h3); font-weight: 400; margin-top: 1.5em; }
.prose h4, .prose h5, .prose h6 { font-size: 1.1rem; font-weight: 700; margin-top: 1.4em; }
.prose > :first-child { margin-top: 0; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--mauve) 60%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color .25s, text-decoration-color .25s; }
.prose a:hover { color: var(--mauve); text-decoration-color: var(--mauve); }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: .45em; }
.prose ul li::marker { color: var(--mauve); }
.prose blockquote { padding: 18px 22px; border-radius: 18px; background: color-mix(in srgb, var(--paper) 55%, transparent); border-left: 4px solid var(--mauve); font-style: italic; }
.prose hr { border: 0; height: 1px; background: var(--line); margin-block: 2em; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { color: var(--ink); background: color-mix(in srgb, var(--paper) 50%, transparent); }
.table-scroll { overflow-x: auto; border-radius: 14px; }
.prose iframe { width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: 20px; box-shadow: var(--shade-1); }
.linkrow { display: flex; flex-wrap: wrap; gap: 10px; }
.linkrow a { display: inline-flex; align-items: center; min-height: 44px; padding: .55em 1.1em; border-radius: var(--r-pill); background: var(--ink); color: var(--paper) !important; text-decoration: none !important; font-weight: 700; font-size: .9rem; transition: transform .35s var(--ease-spring), background .3s; }
.linkrow a:hover { transform: translateY(-2px); background: var(--mauve); }
.social-link { font-weight: 700; }

/* figures in prose — photos break out of their glass sheet */
.fig { margin-block: 1.6em; }
.fig__media { display: block; }
.fig--photo, .fig--wide {
  position: relative; margin-inline: calc(-1 * var(--pad, 0px) - clamp(8px, 2.4vw, 36px)) calc(-1 * var(--pad, 0px) + clamp(0px, 4vw, 60px));
}
.fig--photo .fig__media, .fig--wide .fig__media { border-radius: 22px; overflow: hidden; box-shadow: var(--shade-3); transform: rotate(-.6deg); transition: transform .8s var(--ease); }
.fig--photo:nth-of-type(even) { margin-inline: calc(-1 * var(--pad, 0px) + clamp(0px, 4vw, 60px)) calc(-1 * var(--pad, 0px) - clamp(8px, 2.4vw, 36px)); }
.fig--photo:nth-of-type(even) .fig__media { transform: rotate(.6deg); }
.fig--photo img, .fig--wide img { width: 100%; }
.fig--photo:hover .fig__media, .fig--wide:hover .fig__media { transform: rotate(0) scale(1.01); }
.fig--portrait { max-width: 360px; }
.fig--portrait .fig__media { border-radius: 999px 999px 22px 22px; overflow: hidden; box-shadow: var(--shade-2); }
.fig--plate { display: flex; justify-content: center; }
.fig--plate .fig__media { padding: 12px; border-radius: 18px; background: var(--paper); box-shadow: var(--shade-1); max-width: 100%; }
.fig--plate img { width: auto; max-width: 100%; }
.fig--strip .fig__media { overflow-x: auto; border-radius: 18px; background: var(--paper); padding: 10px; }
.fig--strip img { max-width: none; width: auto; height: auto; }
.fig figcaption { margin-top: 10px; text-align: center; font-weight: 700; font-size: .9rem; color: var(--ink); }
@media (min-width: 900px) {
  .sheet .fig--plate:not(.fig-grid .fig) { float: right; margin: .3em 0 1em 1.6em; max-width: 44%; }
  .sheet .fig--portrait:not(.fig-grid .fig) { float: right; margin: .3em calc(-1 * var(--pad) - 24px) 1em 1.8em; max-width: 42%; }
  .sheet::after { content: ""; display: block; clear: both; }
}
.fig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-block: 1.6em; }
.fig-grid .fig { margin: 0; }
.fig-grid .fig--photo, .fig-grid .fig--wide { margin: 0; }
.fig-grid .fig__media { transform: none !important; }
.fig-grid .fig--plate .fig__media { width: 100%; display: grid; place-items: center; }
.fig--name { display: grid; place-items: center; min-height: 120px; border-radius: 18px; background: var(--paper); box-shadow: var(--shade-1); }
.logo-grid { list-style: none; padding: 0 !important; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px !important; }
.logo-grid li { display: grid; place-items: center; min-height: 104px; padding: 14px; border-radius: 18px; background: var(--paper); box-shadow: var(--shade-1); transition: transform .45s var(--ease-spring), box-shadow .4s; }
.logo-grid li:hover { transform: translateY(-6px); box-shadow: var(--shade-2); }
.logo-grid img { max-height: 70px; width: auto; }
.logo-name { font-weight: 700; color: var(--ink); text-align: center; padding: 10px; }

/* ---------- CTA band --------------------------------------------------- */
.cta-band { padding-block: var(--s-6); }
.cta-band__card { position: relative; overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; padding: clamp(1.8rem, 1.2rem + 3vw, 3.6rem); border-radius: var(--r-xl); }
.cta-band__card h2 { font-size: var(--fs-h2); }
.cta-band__card p { margin-top: 10px; }
.cta-band__card .cutout { width: clamp(180px, 20vw, 300px); right: 4%; top: -46%; transform: rotate(12deg); }
.cta-band__card .actions { margin-top: 0; justify-content: flex-end; }

/* ---------- footer ------------------------------------------------------ */
.site-footer { position: relative; margin-top: var(--s-5); background: var(--ink); color: color-mix(in oklab, var(--paper) 74%, var(--lilac)); border-radius: var(--r-xl) var(--r-xl) 0 0; overflow: hidden; isolation: isolate; }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 80% at 90% 0%, color-mix(in srgb, var(--plum) 70%, transparent), transparent 70%), radial-gradient(40% 70% at 0% 100%, color-mix(in srgb, var(--slate) 60%, transparent), transparent 70%); }
.site-footer a { color: var(--paper); text-decoration: none; }
.site-footer a:hover { color: var(--rose); }
.footer__top { display: grid; grid-template-columns: 1.15fr 1.35fr .9fr .75fr; gap: clamp(1.5rem, 1rem + 2vw, 3rem); padding-block: var(--s-6) var(--s-5); }
.site-footer .hours-list li { padding: 5px 10px; }
.site-footer .hours-list li span { white-space: nowrap; }
.site-footer .hours-list li span:first-child { color: var(--paper); }
.site-footer .hours-list li.is-today { background: color-mix(in srgb, var(--paper) 12%, transparent); color: var(--paper); }
.footer__brand img { width: 170px; filter: invert(1) brightness(1.6); }
.footer__brand address { font-style: normal; margin-top: 18px; line-height: 1.7; }
.site-footer h2, .site-footer h3 { color: var(--paper); font-size: 1rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.footer__list { list-style: none; padding: 0; display: grid; gap: 8px; }
.footer__hours li { display: flex; justify-content: space-between; gap: 12px; }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--mauve); color: var(--paper); transition: transform .4s var(--ease-spring), background .3s; }
.socials a:hover { transform: translateY(-3px) rotate(-8deg); background: var(--paper); color: var(--mauve); }
.socials svg { width: 20px; height: 20px; }
.footer__nap { padding-block: 22px; border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent); font-size: .92rem; text-align: center; }
.footer__nap strong { color: var(--paper); }
.footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 18px 26px; border-top: 1px solid color-mix(in srgb, var(--paper) 10%, transparent); font-size: .86rem; }
.footer__legal { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.totop { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--glass-rim); color: var(--ink); opacity: 0; transform: translateY(12px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.totop.is-shown { opacity: 1; transform: none; }
.totop svg { width: 20px; height: 20px; }

/* ---------- L4 motion: reveals & parallax (enabled only when site.js runs and motion is allowed) */
.js-motion [data-reveal] { opacity: 0; transform: translate3d(0, 34px, 0); filter: blur(6px); transition: opacity .9s var(--ease), transform 1.1s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js-motion [data-reveal="left"] { transform: translate3d(-48px, 0, 0); }
.js-motion [data-reveal="right"] { transform: translate3d(48px, 0, 0); }
.js-motion [data-reveal="zoom"] { transform: scale(.92); }
.js-motion [data-reveal="tilt"] { transform: perspective(1200px) rotateX(14deg) translate3d(0, 40px, 0); transform-origin: 50% 100%; }
.js-motion [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
/* parallax layers carry their own transform; the wrapper reveals, the layer moves */
[data-depth] { will-change: transform; }
.js-motion [data-depth] { translate: 0 calc(var(--py, 0) * 1px); }
.js-motion .cutout[data-depth] { rotate: calc(var(--pr, 0) * 1deg); }
.arc-draw path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw, 1)); }
/* tilt on pointer devices */
/* Tilt owns `transform` only AFTER the reveal is released: while [data-reveal] is present the reveal's
   transform + opacity/filter transitions must win (QA round 2: RR-1 no fade, RR-7 late jump). The card's
   hover lift rides inside the same transform (--lift), since two rules cannot both own `transform`
   (RM-2 / RR-3). With 0 rotation and 0 lift the transform is the identity, so the release is invisible. */
.js-motion [data-tilt]:not([data-reveal]) { transform: perspective(1100px) rotateX(calc(var(--ry, 0) * 1deg)) rotateY(calc(var(--rx, 0) * 1deg)) translateY(var(--lift, 0px)); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.js-motion [data-tilt]:not([data-reveal]).is-tilting { transition: transform .12s linear, box-shadow .5s var(--ease); }
.pop-card:hover { --lift: -8px; }

/* ---------- responsive -------------------------------------------------- */
@media (max-width: 1100px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .visit__grid { grid-template-columns: 1fr 1fr; }
  .visit__grid > :nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 980px) {
  .hero-home__grid, .welcome__grid, .doctor__grid, .reviews, .feature__grid, .page-hero__grid, .cta-band__card { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { min-height: auto; aspect-ratio: 1 / 1.02; max-width: 560px; width: 100%; justify-self: center; margin-top: 12px; }
  .hero-visual .frame--main { width: 82%; }
  .dock__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-card { position: static; }
  .page-body { grid-template-columns: minmax(0, 1fr); }
  .page-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .page-hero__visual { min-height: 150px; max-width: 320px; justify-self: end; margin-top: -30px; }
  .page-hero__visual .cutout { width: 110%; right: -6%; bottom: -60%; }
  .trio { grid-template-columns: minmax(0, 1fr); gap: calc(var(--s-5) + 20px); max-width: 560px; margin-inline: auto; }
  .shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-band__card .actions { justify-content: flex-start; }
  .cta-band__card .cutout { top: -28%; }
  .band__photo::after { background: color-mix(in srgb, var(--night) 55%, transparent); }
  .band .cutout { left: auto; right: 4%; bottom: 4%; }
  .feature__plinth { transform: none; }
  .doctor__portrait { max-width: 380px; }
}
@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .section { padding-block: clamp(3rem, 2.4rem + 3vw, 4rem); }
  .dock__grid { grid-template-columns: minmax(0, 1fr); padding: 8px; }
  .dock__item { min-height: 68px; }
  .hero-home__copy, .page-hero__copy { padding: 1.3rem; }
  .hero-visual .float-card--review { right: 0; bottom: 4%; width: 78%; }
  .hero-visual .cutout--hero { width: 70%; left: -6%; bottom: -8%; }
  .form__grid { grid-template-columns: minmax(0, 1fr); }
  .form__grid > .field:not(.field--wide), .form__grid > .field--check { grid-column: 1 / -1; }
  .news__grid { grid-template-columns: minmax(0, 1fr); margin-top: -60px; padding-inline: 0; }
  .alert-card { grid-template-columns: minmax(0, 1fr); }
  .alert-card .cols { grid-template-columns: minmax(0, 1fr); }
  .visit__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .shop__grid { gap: 10px; }
  .brand-tile:nth-child(even) { margin-top: 28px; }
  .deck { padding: 0 34px 40px 0; }
  .fig--photo, .fig--wide, .fig--photo:nth-of-type(even) { margin-inline: calc(-1 * var(--pad, 0px) - 6px); }
  .page-hero__visual { display: none; }
  .cta-band__card .cutout { display: none; }
  .shop .cutout { width: 130px; right: -14px; top: auto; bottom: -26px; }
}

/* ---------- reduced motion & print ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  body::before { animation: none; }
  [data-depth] { translate: none !important; rotate: none !important; }
  [data-tilt] { transform: none !important; }
}
@media print {
  body::before, body::after, .announce, .site-header, .drawer, .progress, .totop, .cutout, .dock { display: none !important; }
  .glass { background: none; box-shadow: none; border: 1px solid var(--mist); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .stage--night, .page-hero::before, .hero-home::before { background: none !important; color: var(--ink); }
}

/* card arrow (the service cards link as a whole; the arrow is decoration) */
.card-arrow { margin-top: auto; align-self: flex-start; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; margin-block-start: 18px; background: var(--ink); color: var(--paper); transition: transform .5s var(--ease-spring), background .3s; }
.card-arrow svg { width: 18px; height: 18px; }
.pop-card:hover .card-arrow { transform: translateX(6px) rotate(-8deg); background: var(--mauve); }
h2.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .16em; line-height: 1.4; }
.site-footer .footer__name { margin: 18px 0 0; font-size: 1.05rem; letter-spacing: 0; text-transform: none; font-weight: 700; }

/* ---------- sweep round 1: overflow + touch targets ------------------------
   Horizontal protrusion is clipped per STAGE (overflow-x: clip keeps overflow-y visible, so cutouts
   still break DOWN into the next section) instead of relying on body clipping, which some mobile
   browsers let the visitor pan past. */
.hero-home, main > .section, main > .stage, main > .page-hero, main > .page-body, main > .cta-band { overflow-x: clip; overflow-y: visible; }
.announce__close { width: 44px; height: 44px; right: 4px; }
.skip { padding: 12px 18px; min-height: 44px; }
/* radios: a 20px visual dot inside a 44px hit area */
.field--check input[type="radio"], .field--check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; width: 44px; height: 44px; margin: -12px -8px -12px -12px; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle, var(--paper) 0 7px, var(--mauve) 7.5px 9.5px, transparent 10px);
}
.field--check input[type="checkbox"] { border-radius: 12px; background: linear-gradient(var(--paper), var(--paper)) center / 18px 18px no-repeat, linear-gradient(var(--mauve), var(--mauve)) center / 21px 21px no-repeat; }
.field--check input:checked { background: radial-gradient(circle, var(--mauve) 0 5px, var(--paper) 5.5px 7px, var(--mauve) 7.5px 9.5px, transparent 10px); }
.field--check input[type="checkbox"]:checked { background: linear-gradient(var(--mauve), var(--mauve)) center / 21px 21px no-repeat; }
.field--check input:focus-visible { outline: 3px solid var(--focus); outline-offset: -8px; }
@media (max-width: 1023px) {
  /* touch: single-line text links get a 44px hit area; the negative margin cancels the padding, so
     line layout does not move. Inline links are WCAG-exempt, but a larger target is still kinder. */
  .prose a:not(.btn), .breadcrumb a, .announce a, .footer__list a, .footer__legal a, .post-card h3 a,
  .doctor__bio h3 a, .section-head h2 a, .strip__phone, .form-offline a, .alert-card a, .visit-card .prose a {
    padding: 12.5px 8px; margin: -12.5px -8px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  .link-arrow { padding-block: 12px; margin-block: -12px; }
  .footer__list, .footer__legal { gap: 14px 18px; }
}

/* ---------- sweep round 2: protrusions break their FRAME, not the viewport -------------------- */
.page-hero__visual .cutout { width: 132%; right: -8%; }
@media (max-width: 1100px) {
  .hero-home__rings svg { right: 0; width: 100%; top: 0; }
  .feature__plinth .cutout { right: 0; }
  .doctor__portrait .ghost { inset: 7% 0 -7% 7%; }
  .deck { padding-right: 28px; }
  .deck__card[data-pos="1"] { transform: translate3d(10px, 14px, -60px) rotate(2deg); }
  .deck__card[data-pos="2"] { transform: translate3d(18px, 26px, -120px) rotate(3.5deg); }
  .deck__card[data-pos="3"] { transform: translate3d(24px, 36px, -180px) rotate(5deg); }
  .deck__card[data-pos="far"] { transform: translate3d(26px, 40px, -220px) rotate(5deg); }
}
@media (max-width: 640px) {
  .shop .cutout { right: 0; }
}
@media (max-width: 1023px) {
  /* a 44px hit area whatever the font size: 14px of padding above and below any line box >= 16px */
  .prose a:not(.btn), .breadcrumb a, .announce a, .footer__list a, .footer__legal a, .footer__brand a, .post-card h3 a,
  .doctor__bio h3 a, .section-head h2 a, .strip__phone, .form-offline a, .alert-card a, .visit-card .prose a {
    padding: 14px 8px; margin: -14px -8px;
  }
}
/* sweep round 3: the rings stay inside the stage at every width; rotated cutouts keep a margin */
.hero-home__rings svg { right: 0; width: min(1100px, 100%); }
@media (max-width: 1100px) {
  .shop .cutout { right: 28px; }
  .page-hero__visual .cutout { right: 0; width: 116%; }
}

/* ======================= QA round 1 fixes (independent QA 2026-09-25, refuter-confirmed) ======================= */
/* RM-4 / RR-4 / HV-1: the deck keeps ONE height (its tallest review, set as --deck-h by site.js), so
   changing review never reflows the page; no sticky column (it slid under the deck when stacked) */
.reviews { align-items: start; }
.deck { align-items: start; min-height: var(--deck-h, auto); }
/* V1/V2: the phone touch-target expansion is for single-line TEXT links only; pills and icon buttons are already 44px */
@media (max-width: 1023px) {
  .prose .linkrow a, .socials a { padding: .55em 1.1em; margin: 0; }
  .socials a { padding: 0; }
}
/* V3: the refractor sits on the plinth's top rim, clear of the banner's text column; small travel */
.feature__plinth .cutout { top: auto; bottom: calc(100% - 22px); right: 2%; width: 26%; }
/* V4: the hero visual needs a real width once it drops below the copy */
@media (max-width: 980px) { .page-hero__visual { width: min(320px, 60%); min-height: 180px; } }
/* V5 (revised on owner feedback): every desktop width shows the full nav; it is compacted to fit its
   pill below 1340px instead of collapsing to the hamburger (see "Desktop nav tiers" at the end) */
/* V6: the fixed back-to-top button never sits on the footer's last row */
.footer__bar { padding-right: 76px; }
/* V8/V10: at tablet widths parallax travel is damped on elements that sit next to text */
@media (max-width: 1023px) {
  .welcome__stack .cutout, .shop .brand-tile, .feature__plinth .cutout { translate: none !important; }
}
/* V9: the news photo shows its subject (the cups) above the overlapping cards */
.news__photo img { height: 100%; object-position: 50% 96%; }
.news__photo > div { height: 100%; }
.news__grid { margin-top: calc(-1 * clamp(56px, 5vw, 80px)); }
/* V11: forms sit in the main column */
.form-card--inline { position: static; top: auto; }
/* CP-1: the CTA band's night glass is opaque (it floats over the LIGHT page, where translucent night read mid-grey) */
.cta-band__card.glass--night { background: linear-gradient(150deg, var(--night-2), var(--night)); }
/* CP-2: the review attribution on light glass */
.float-card--review cite { color: var(--plum); }
/* CP-3: eyebrows on night glass/stages are a lighter rose */
.stage--night .eyebrow, .glass--night .eyebrow { color: color-mix(in oklab, var(--rose) 70%, var(--paper)); }
/* CP-4: breadcrumb separator */
.breadcrumb .sep { opacity: .7; }

/* ======================= QA round 2 fixes ======================= */
/* RR-2: the plinth's entrance ENDS at its resting tilt, so releasing the reveal changes nothing */
.js-motion .feature__plinth[data-reveal].is-in { transform: perspective(1400px) rotateY(-4deg) rotateX(2deg); }
@media (max-width: 980px) { .js-motion .feature__plinth[data-reveal].is-in { transform: none; } }
/* HV-2 / V9: the news photo keeps parallax headroom (no empty band), shows its subject, and the cards overlap less */
.news__photo img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; object-position: 50% 88%; }
.news__photo > div { position: absolute; inset: 0; }
.news__grid { margin-top: calc(-1 * clamp(28px, 3vw, 44px)); }
/* CP-3: the family band's glass is near-opaque where it carries text over the photo, and its eyebrow lighter */
.band__card.glass--night { background: linear-gradient(150deg, color-mix(in srgb, var(--night-2) 90%, transparent), color-mix(in srgb, var(--night) 94%, transparent)); }
.band__card .eyebrow { color: color-mix(in oklab, var(--rose) 50%, var(--paper)); }
/* V8 / HV-4: the welcome lens stays on the photo stack at every width */
.welcome__stack .cutout { top: -4%; right: 4%; width: 28%; }
/* HV-3: on phones the shop cut-out would sit on a caption - it is decoration, so it goes */
@media (max-width: 640px) { .shop .cutout { display: none; } }
@media (max-width: 1023px) { .shop .cutout { translate: none !important; } }
/* HV-5: the aside only sticks where the viewport can show all of it */
@media (max-height: 820px) { .page-aside { position: static; } }
.deck.is-measuring .deck__card { max-height: none !important; transition: none !important; }
/* deck cards are <figure>s: drop the UA margin (1em 40px) so the measured height IS the row height */
.deck__card { margin: 0; }

/* ======================= QA round 3 fixes ======================= */
/* REG-5: the reviews grid by area - intro and controls share the left column on wide screens; stacked,
   the controls come AFTER the deck, next to the end of the review being read */
.reviews { grid-template-areas: "intro deck" "controls deck"; grid-template-rows: auto 1fr; row-gap: var(--s-3); }
.reviews__intro { grid-area: intro; }
.reviews .deck { grid-area: deck; }
.reviews__controls { grid-area: controls; align-self: start; }
.reviews .deck__nav { margin-top: 0; }
@media (max-width: 980px) { .reviews { grid-template-areas: "intro" "deck" "controls"; grid-template-rows: auto; } }
/* REG-2: a long review is clamped to 9 lines on the front card (site.js adds .is-clamped and marks
   .is-long / .is-fit per width); every card takes the tallest clamped card's height (--deck-card-h) */
.deck { --quote-lines: 9; }
.deck.is-clamped .deck__card blockquote { max-height: calc(1.55em * var(--quote-lines)); overflow: hidden; flex-shrink: 0; }
.deck.is-clamped .deck__card.is-long:not(.is-expanded) blockquote { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 2.4em), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 2.4em), transparent); }
.deck.is-clamped .deck__card.is-expanded blockquote, .deck.is-clamped .deck__card.is-fit blockquote { max-height: none; }
.deck.is-clamped .deck__card { min-height: var(--deck-card-h, 250px); }
.deck.is-clamped .deck__card:not([data-pos="0"]) { max-height: var(--deck-card-h, 250px); }
.deck.is-measuring .deck__card { min-height: 250px !important; }
.deck.is-measuring .deck__card:not(.is-fit) blockquote { max-height: calc(1.55em * var(--quote-lines)) !important; }
.deck__more { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; margin: -8px 0; padding: 0; border: 0; background: none; font: inherit; font-size: .95rem; font-weight: 700; color: var(--plum); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.deck__more[hidden] { display: none; }
/* REG-4: cards behind the front one are glass sheets only - their text showed through as faint,
   rotated fragments under a short review */
.deck__card > * { transition: opacity .45s var(--ease) .15s; }
.deck__card:not([data-pos="0"]) > * { opacity: 0; transition-delay: 0s; }
/* V9 / HV-2 / REG-1: the cards overlap the news photo's blank wall (the photo now follows them); the
   image fills its frame exactly and its parallax is a zoom about the cups - a scale >= 1 around a point
   inside the frame can never open a gap, whatever the viewport height */
.news__grid { margin-top: 0; }
.news__photo { margin-top: calc(-1 * clamp(56px, 6vw, 96px)); z-index: 1; }
.news__photo img { top: 0; height: 100%; object-position: 50% 100%; transform-origin: 50% 84%; }
.js-motion .news__photo > [data-depth] { translate: none; }
.js-motion .news__photo img { scale: clamp(1, 1.05 + var(--py, 0) * .0012, 1.12); }
/* equal-height cards: a review that fits is centred between the stars and the name, and a review of a
   few lines is set as a pull-quote, so a short one reads as designed, not as a card with a hole in it */
.deck.is-clamped .deck__card.is-fit blockquote { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
.deck.is-clamped .deck__card.is-short blockquote { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); font-weight: 300; line-height: 1.45; }
/* R3-DECK-3: on phones the equal-height back cards rotate less, so the stack stays inside the deck and
   out of the 16px page gutter */
@media (max-width: 640px) {
  .deck__card[data-pos="1"] { transform: translate3d(8px, 12px, -60px) rotate(1.5deg); }
  .deck__card[data-pos="2"] { transform: translate3d(14px, 22px, -120px) rotate(2.5deg); }
  .deck__card[data-pos="3"] { transform: translate3d(18px, 30px, -180px) rotate(3.5deg); }
  .deck__card[data-pos="far"] { transform: translate3d(20px, 34px, -220px) rotate(3.5deg); }
}
/* QA round 5: a horizontal finger drag on the deck is a swipe, not a page pan (vertical scroll unchanged) */
.deck { touch-action: pan-y; }

/* ======================= Desktop nav tiers (owner feedback: no hamburger on desktop) =======================
   Measured (tmp/navhero/fit.mjs): the full row needs 1252px of pill at base size. Two compaction tiers keep
   the nav, the appointment button and the phone button in one row from 1024px up. */
@media (min-width: 1024px) and (max-width: 1339px) {
  .nav-shell { gap: 10px; padding-left: 18px; }
  .brand img { width: 108px; }
  .site-header.is-scrolled .brand img { width: 100px; }
  .menu a, .menu__parent { font-size: .875rem; padding: 10px 7px; }
  .menu > li > a::after { left: 8px; right: 8px; }
  .submenu-toggle { width: 24px; height: 30px; margin-left: -7px; }
}
/* below 1240px the appointment button keeps its calendar icon and accessible name, and shows its label as a
   tooltip on hover/focus; the gutter narrows so the row keeps real breathing room */
@media (min-width: 1024px) and (max-width: 1239px) {
  .site-header { padding-inline: 16px; }
  .menu a, .menu__parent { font-size: .86rem; padding: 10px 6px; }
  .header-cta .btn { position: relative; width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; }
  .header-cta .btn span { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .header-cta .btn svg { width: 20px; height: 20px; margin: 0; }
  .header-cta .btn::after {
    content: attr(data-tip); position: absolute; top: calc(100% + 10px); right: 0; padding: 8px 12px; border-radius: 12px;
    background: var(--night); color: var(--paper); font-size: .8rem; font-weight: 700; white-space: nowrap;
    opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .header-cta .btn:hover::after, .header-cta .btn:focus-visible::after { opacity: 1; transform: none; }
}


/* ======================= Rose gold theme (owner pivot, 2026-09-25) =======================
   The owner moved the whole site to white and rose gold. The source's own measured accent, #93605b, is the
   deep end of the rose-gold scale and stays the text-safe accent (5.2:1 on white). Sections that were
   "night" keep their class names (markup unchanged) but are now light; --night itself stays a warm dark
   because every shadow on the site is mixed from it. Nothing below changes a layout. */
:root {
  /* the rose-gold scale and the warm neutrals are declared in tokens.css ("owner pivot") */
  --ink: var(--warm-ink);
  --mauve: var(--rg-700);
  --lilac: var(--rg-100);
  --mist: var(--rg-50);
  --slate: var(--warm-slate);
  --rose: var(--rg-500);
  --tint-violet: var(--rose-tint-1);
  --tint-sky: var(--rose-tint-2);
  --tint-peach: var(--rose-tint-3);
  --on-night: var(--ink);
  --on-night-soft: var(--text);
  --glass-rim: color-mix(in srgb, var(--rg-300) 72%, var(--paper));
  --glass-night-rim: var(--glass-rim);
  --sheen: inset 0 1px 0 color-mix(in srgb, var(--paper) 92%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--rg-300) 34%, transparent);
  --focus: var(--rg-700);
  --stage: linear-gradient(180deg, var(--paper), var(--rg-50) 45%, var(--rg-100));
  /* metallic rose gold (primary CTAs) */
  /* smooth polished rose gold (owner, 2026-09-26: no grain, no banding). The layer is 240% wide: at rest the
     visible slice (0-42%) carries one soft highlight at ~21%; on hover it slides to 58-100%, where the
     second highlight (~79%) lands - the reflection glides across the face */
  --metal: linear-gradient(115deg, var(--metal-5) 0%, var(--metal-2) 11%, var(--metal-3) 21%, var(--metal-2) 31%, var(--metal-1) 43%, var(--metal-5) 50%, var(--metal-1) 57%, var(--metal-2) 69%, var(--metal-3) 79%, var(--metal-2) 89%, var(--metal-5) 100%);
}
::selection { background: var(--rg-200); color: var(--ink); }

/* "night" stages are light now */
.stage--night { background: var(--stage); color: var(--text); }
.stage--night .eyebrow, .glass--night .eyebrow, .band__card .eyebrow { color: var(--rg-700); }
.h-accent, .stage--night .h-accent {
  color: transparent;
  background: linear-gradient(100deg, var(--rg-900), var(--rg-700) 50%, var(--rg-800));   /* lightest stop >= 3:1 over the veiled film at 1920 (rg-600 measured 2.76) */
  -webkit-background-clip: text; background-clip: text;
}
.glass--night {
  background: linear-gradient(150deg, color-mix(in srgb, var(--paper) 88%, transparent), color-mix(in srgb, var(--rg-50) 72%, transparent));
  border-color: var(--glass-rim); box-shadow: var(--sheen), var(--shade-2); color: var(--text);
}
.glass--night::after { opacity: .7; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass--night { background: color-mix(in srgb, var(--paper) 94%, var(--rg-100)); }
}
.stage--night .btn--glass, .glass--night .btn--glass { --btn-bg: color-mix(in srgb, var(--paper) 74%, transparent); --btn-fg: var(--ink); border-color: var(--rg-300); }
.stage--night .link-arrow, .glass--night .link-arrow { color: var(--ink); }
.btn--glass { border-color: var(--rg-300); }
.btn--glass:hover { border-color: var(--rg-500); }

/* announcement bar and address strip */
.announce { background: linear-gradient(90deg, var(--rg-200), var(--rg-100) 50%, var(--rg-200)); color: var(--rg-900); }
.announce b { color: var(--ink); }
.announce a { color: var(--rg-900); }
.announce a:hover { color: var(--ink); }
.announce__close { color: var(--ink); }
.announce__close:hover { background: color-mix(in srgb, var(--rg-500) 18%, transparent); }
.strip { background: var(--paper); color: var(--text); border-bottom: 1px solid var(--rg-200); }
.strip .strip__phone { color: var(--ink); }
.strip .strip__phone:hover { color: var(--rg-700); }
.strip__h svg { color: var(--rg-500); }

/* interior page hero */
.page-hero::before {   /* the stage lives on ::before (base rule above), not on the section */
  background:
    radial-gradient(55% 80% at 90% 20%, color-mix(in srgb, var(--tint-violet) 40%, transparent), transparent 70%),
    radial-gradient(45% 70% at 0% 100%, color-mix(in srgb, var(--rg-300) 44%, transparent), transparent 72%),
    var(--stage);
}
/* luminosity blend: the photo keeps its light and shade but takes the stage's rose hue (no grey cast) */
.page-hero__bg img { opacity: .3; mix-blend-mode: luminosity; }
.page-hero__bg::after { background: linear-gradient(95deg, color-mix(in srgb, var(--paper) 90%, transparent) 30%, color-mix(in srgb, var(--paper) 30%, transparent)); }
.page-hero__visual .lens-glow { background: radial-gradient(circle, color-mix(in srgb, var(--tint-violet) 46%, transparent), transparent 70%); border-color: var(--rg-300); }
.breadcrumb { color: var(--text-soft); }
.breadcrumb a { color: var(--ink); }

/* home: family band - a white glass card over the photo, the photo veiled in white on the card's side */
.band__photo::after { background: linear-gradient(90deg, color-mix(in srgb, var(--paper) 80%, transparent), color-mix(in srgb, var(--paper) 8%, transparent) 72%); }
@media (max-width: 980px) { .band__photo::after { background: color-mix(in srgb, var(--paper) 56%, transparent); } }
.band__card.glass--night { background: linear-gradient(150deg, color-mix(in srgb, var(--paper) 93%, transparent), color-mix(in srgb, var(--rg-50) 90%, transparent)); }

/* CTA band */
.cta-band__card.glass--night { background: linear-gradient(135deg, var(--rg-50), var(--rg-100) 55%, var(--rg-200)); border-color: var(--rg-300); }

/* emergency: rose red instead of pure red, still reads urgent */
.alert-card { border-left-color: var(--emerg-rim); }
.alert-card__icon { background: linear-gradient(150deg, var(--emerg-hi), var(--emerg-lo)); }

/* small dark chips and pills become rose gold */
.dock__icon { background: linear-gradient(145deg, var(--rg-400), var(--rg-800)); }
.card-arrow { background: linear-gradient(135deg, var(--rg-500), var(--rg-900)); color: var(--paper); }
.pop-card:hover .card-arrow { background: var(--ink); }
.linkrow a { background: var(--paper); color: var(--ink) !important; border: 1px solid var(--rg-300); }
.linkrow a:hover { background: var(--rg-700); color: var(--paper) !important; border-color: var(--rg-700); }

/* footer: blush, black logo, rose gold hairlines */
.site-footer { background: linear-gradient(180deg, var(--rg-100), var(--rg-50)); color: var(--text); border-top: 1px solid var(--rg-300); }
.site-footer::before {
  background:
    radial-gradient(50% 80% at 90% 0%, color-mix(in srgb, var(--rg-300) 46%, transparent), transparent 70%),
    radial-gradient(40% 70% at 0% 100%, color-mix(in srgb, var(--tint-sky) 70%, transparent), transparent 72%);
}
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--rg-700); }
.site-footer h2, .site-footer h3 { color: var(--ink); }
.site-footer .hours-list li span:first-child { color: var(--ink); }
.site-footer .hours-list li.is-today { background: color-mix(in srgb, var(--rg-300) 42%, transparent); color: var(--ink); }
.footer__brand img { filter: none; }
.footer__nap { border-top-color: var(--rg-300); }
.footer__nap strong { color: var(--ink); }
.footer__bar { border-top-color: var(--rg-200); }
.socials a { background: linear-gradient(135deg, var(--rg-500), var(--rg-800)); color: var(--paper); }
.socials a:hover { background: var(--ink); color: var(--paper); }

/* ======================= Metallic rose gold primary CTAs (owner, 2026-09-25) =======================
   Every primary call to action (.btn--primary, and .btn--light, which was the primary on dark stages):
   a brushed rose-gold body (hairline grain + top gloss + a multi-stop metal gradient) with dark espresso
   text (>= 4.5:1 on the darkest stop). Hover = the glimmer: the metal's reflection slides across (the
   gradient is 240% wide and moves) while a narrow specular band sweeps over the face. */
.btn--primary, .btn--light {
  --btn-fg: var(--metal-ink);
  background-color: var(--metal-base);
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 34%, transparent), transparent 52%, color-mix(in srgb, var(--rg-900) 5%, transparent)),
    var(--metal);
  background-size: 100% 100%, 240% 100%;
  background-position: 0 0, 0% 0;
  border-color: color-mix(in srgb, var(--rg-700) 55%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--paper) 80%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--rg-900) 30%, transparent),
    0 1px 2px color-mix(in srgb, var(--rg-900) 22%, transparent),
    0 10px 22px -12px color-mix(in srgb, var(--rg-900) 60%, transparent);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--paper) 45%, transparent);
  transition: transform .35s var(--ease-spring), box-shadow .45s var(--ease), background-position 1.1s var(--ease), color .3s var(--ease);
}
.btn--primary::before, .btn--light::before {
  background: linear-gradient(105deg, transparent 36%, color-mix(in srgb, var(--paper) 0%, transparent) 40%, color-mix(in srgb, var(--metal-spec) 92%, transparent) 50%, color-mix(in srgb, var(--paper) 0%, transparent) 60%, transparent 64%);
  transform: translateX(-130%);
  transition: transform .95s var(--ease);
}
.btn--primary:hover, .btn--light:hover, .btn--primary:focus-visible, .btn--light:focus-visible {
  background-position: 0 0, 100% 0;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--paper) 90%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--rg-900) 30%, transparent),
    0 14px 30px -12px color-mix(in srgb, var(--rg-900) 62%, transparent),
    0 0 0 4px color-mix(in srgb, var(--rg-300) 55%, transparent),
    0 0 26px -4px color-mix(in srgb, var(--metal-glow) 80%, transparent);
}
.btn--primary:hover::before, .btn--light:hover::before, .btn--primary:focus-visible::before, .btn--light:focus-visible::before { transform: translateX(130%); }

/* ======================= Hero v3 - the owner's looping film (2026-09-25) =======================
   Copy on the left on a white/blush stage; the film in one rounded panel bleeding off the right edge
   (its subject is centred, so a text overlay would cover the face); the quick-action bar's glass
   straddles the stage's lower edge and the panel's foot. No other images in the hero. */
.hero2 { --hero2-overlap: 52px; background: transparent; }
.hero2::before {
  inset: 0 0 var(--hero2-overlap);
  background:
    radial-gradient(38% 56% at 72% 42%, color-mix(in srgb, var(--tint-violet) 34%, transparent), transparent 72%),
    radial-gradient(34% 50% at 0% 100%, color-mix(in srgb, var(--rg-300) 36%, transparent), transparent 70%),
    var(--stage);
}
/* the copy column is wide enough for both CTAs on one row (567px at 1440); the film panel is narrow enough
   to leave >= 40px between them (checked 1024-1920 in tmp/navhero/rg-measure.mjs) */
.hero2__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 1rem + 2.6vw, 4rem); align-items: center; min-height: clamp(420px, calc(100svh - 330px), 620px); }
.hero2__copy { position: relative; z-index: 2; max-width: 600px; }
.hero2__copy .eyebrow { margin-bottom: clamp(14px, .6rem + .6vw, 22px); }
.hero2__copy h1 { font-size: clamp(2.3rem, 1.2rem + 2.8vw, 4.1rem); line-height: 1.04; letter-spacing: -0.03em; }
.hero2__copy .h-accent { white-space: nowrap; padding-right: .06em; }
.hero2__actions { margin-top: clamp(1.6rem, 1rem + 1.4vw, 2.5rem); gap: 12px; }

/* desktop: the panel is positioned against the section (no positioned ancestor in between) */
.hero2__media {
  position: absolute; z-index: 1; right: 0;
  /* the foot stays clear of the quick-action bar, which straddles the stage edge (94px tall): bottom inset =
     overlap + 72px leaves a 30px gap (owner, 2026-09-26: the panel overlapped the bar by 24px) */
  top: calc(var(--header-h) + 38px); bottom: calc(var(--hero2-overlap) + 72px);
  width: min(45vw, 860px);
  border-radius: var(--r-xl) 0 0 var(--r-xl); overflow: hidden;
  background: var(--rg-200) url("../media/hero-eyewear-poster.webp") center / cover no-repeat;
  box-shadow: var(--shade-3);
}
.hero2__media::after { /* glass rim + a soft top sheen over the film */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 55%, transparent), inset 12px 0 30px -18px color-mix(in srgb, var(--paper) 70%, transparent);
  background: linear-gradient(170deg, color-mix(in srgb, var(--paper) 18%, transparent), transparent 30%);
}
.hero2__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

/* the quick actions: one glass bar with hairline dividers, straddling the stage's lower edge */
.hero2 .dock { position: relative; z-index: 3; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.hero2 .dock__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 8px; border-radius: 30px; background: linear-gradient(140deg, color-mix(in srgb, var(--paper) 90%, transparent), color-mix(in srgb, var(--paper) 74%, transparent)); border-color: var(--glass-rim); }
.hero2 .dock__item { min-height: 76px; padding: 12px 14px; gap: 12px; border: 0; border-radius: 22px; background: transparent; font-size: .97rem; }
.hero2 .dock__item::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--rg-200); transition: opacity .3s var(--ease); }
.hero2 .dock__item:first-child::before { display: none; }
.hero2 .dock__item:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--paper) 92%, transparent); box-shadow: var(--shade-1); }
.hero2 .dock__item:hover::before, .hero2 .dock__item:hover + .dock__item::before { opacity: 0; }
.hero2 .dock__icon { width: 44px; height: 44px; border-radius: 14px; }
.hero2 .dock__icon svg { width: 20px; height: 20px; }

@media (min-width: 1024px) and (max-width: 1279px) {
  .hero2__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
  .hero2__copy { max-width: 500px; }
  .hero2__media { width: 42vw; }
  .hero2__actions .btn--lg { padding-inline: 1.1em; font-size: .95rem; }
  .hero2 .dock__item { font-size: .92rem; padding: 10px 12px; }
}
/* short desktop screens: the bar reaches the first viewport */
@media (min-width: 1024px) and (max-height: 820px) {
  .hero2 { padding-top: calc(var(--header-h) + 1.5rem); }
  .hero2 .dock { margin-top: 1.5rem; }
}
/* below 1024px the film follows the copy as a rounded panel in the flow */
@media (max-width: 1023px) {
  .hero2__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero2__copy { max-width: 640px; }
  .hero2__media { position: relative; top: auto; bottom: auto; right: auto; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-lg); margin-top: clamp(1.8rem, 1rem + 3vw, 2.6rem); }
  .hero2 .dock__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero2 .dock__item:nth-child(odd)::before { display: none; }
  .hero2 .dock__item:nth-child(n+3)::after { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: var(--rg-200); transition: opacity .3s var(--ease); }
  .hero2 .dock__item:hover::after { opacity: 0; }
}
@media (min-width: 641px) and (max-width: 1023px) { .hero2 { padding-top: calc(var(--header-h) + 4rem); } }
@media (max-width: 640px) {
  .hero2 { --hero2-overlap: 40px; padding-top: calc(var(--header-h) + 3rem); }
  .hero2__copy h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 2.6rem); }
  .hero2__actions { flex-direction: column; align-items: stretch; }
  .hero2__media { aspect-ratio: 1 / 1; }
  .hero2 .dock__grid { padding: 6px; border-radius: 24px; }
  .hero2 .dock__item { flex-direction: column; justify-content: center; text-align: center; min-height: 0; padding: 14px 8px; gap: 8px; font-size: .9rem; border-radius: 18px; }
  .hero2 .dock__icon { width: 38px; height: 38px; border-radius: 12px; }
}

/* ======================= Rose gold theme - QA fixes (4 finders + 4 refuters, 2026-09-25) ======================= */
:root {
  --mauve: var(--rg-800);      /* TV-03/CON-1: #93605b is 5.2:1 on white but 4.43 on the blush stage; #7f4c47 is 5.96 */
  --focus: var(--rg-900);      /* F2: the #93605b ring fell to ~2.6:1 on the drawer glass */
  --text-soft: var(--warm-text-soft);        /* CON-3/CON-4/TV-04/TV-05: #755f61 measured 4.25-4.36 on blush / glass; this is ~5.0 there */
  --alert: var(--rose-alert);            /* CON-2/TV-07/RG-REQ-1: the source red #eb1e1e is 4.43:1 even on white; a deep rose red is 7+ */
  --gold: var(--rose-star);             /* TV-12: review stars in rose gold, not yellow; deep enough for the 3:1 graphics minimum on blush (3.7) */
}
.stage--night .eyebrow, .glass--night .eyebrow, .band__card .eyebrow { color: var(--rg-800); }
.breadcrumb .sep { opacity: 1; }   /* CON-5/RG-CRUMB-1: 0.7 opacity made the separator 3.0:1 */

/* TV-06/RG-FORM-1: field edges were slate at 22% (1.4:1); rose gold 600 is >= 3:1 on the white/blush cards */
.field input, .field select, .field textarea { border-color: var(--rg-600); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--rg-900); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rg-400) 45%, transparent); }

/* F3: secondary (glass) buttons get a rim that reads on white AND on the blush cards and in a neighbour's
   shadow (--rg-600 measured 2.5-2.9 there; --rg-700 is >= 3.5 on the darkest measured background) */
.btn--glass, .stage--night .btn--glass, .glass--night .btn--glass { border-color: var(--rg-700); }
.btn--glass:hover, .stage--night .btn--glass:hover, .glass--night .btn--glass:hover { border-color: var(--rg-900); }

/* TV-05/TV-08/F2: the drawer was translucent glass over a dark scrim (dusty grey, the film bled through);
   it is an opaque white-to-blush panel now, over a light warm scrim */
.drawer__panel { background: linear-gradient(165deg, var(--paper), var(--rg-50) 60%, var(--rg-100)); -webkit-backdrop-filter: none; backdrop-filter: none; }
.drawer__scrim { background: color-mix(in srgb, var(--rg-900) 24%, transparent); }
.drawer__menu a:hover { background: var(--rg-100); }

/* TV-10: dropdown hover had no visible change */
.submenu a:hover { background: var(--rg-100); color: var(--rg-900); }
/* TV-11: one "today" highlight everywhere (cards matched grey, the footer rose) */
.hours-list li.is-today { background: color-mix(in srgb, var(--rg-300) 42%, transparent); }

/* TV-02: the generated lens-disc cut-out is lilac/violet; turned to the rose family in CSS (file untouched) */
img[src*="cut-lens-disc"] { filter: hue-rotate(58deg) saturate(.85); }

/* TV-01/F1: the icon-only header button (1024-1239) clipped its own tooltip (.btn is overflow:hidden); the
   tooltip is unclipped and on-theme, and the sweep band (which would leak outside the circle) is off there -
   the metal still glimmers through its sliding reflection */
@media (min-width: 1024px) and (max-width: 1239px) {
  .header-cta .btn { overflow: visible; }
  .header-cta .btn::before { display: none; }
  .header-cta .btn::after { background: var(--paper); color: var(--ink); border: 1px solid var(--rg-300); box-shadow: var(--shade-1); }
}

/* F5: on tall 1024-1279 screens the film panel became a narrow column (430x707, 34% of the film's width)
   and cropped the face and glasses. Its height is now capped to a landscape-ish shape (>= 64% of the film's
   width shows) and it is centred in the stage (auto margins on an absolutely positioned box). */
.hero2__media { max-height: calc(min(45vw, 860px) * .88); margin-block: auto; }
@media (min-width: 1024px) and (max-width: 1279px) { .hero2__media { max-height: calc(42vw * .88); } }
@media (max-width: 1023px) { .hero2__media { max-height: none; margin-block: clamp(1.8rem, 1rem + 3vw, 2.6rem) 0; } }
@media (max-width: 640px) { .hero2__media { aspect-ratio: 6 / 5; } }

/* RG-PRINT-1: a printout carried 1 of 7 reviews (the deck stacks them); print lists them all */
@media print {
  .deck { display: block; min-height: 0 !important; padding: 0; }
  .deck__card { transform: none !important; opacity: 1 !important; filter: none !important; max-height: none !important; min-height: 0 !important; margin: 0 0 12px; -webkit-mask-image: none !important; mask-image: none !important; }
  .deck__card > * { opacity: 1 !important; }
  .deck .deck__card blockquote { max-height: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .deck__more, .reviews__controls { display: none !important; }
}

/* ======================= Hero v4 - the film full width, a veil on the left (owner, 2026-09-26) =======================
   The film now fills the whole hero stage edge to edge (under the floating header pill, down to the stage's
   rounded lower edge, where the quick-action bar's glass straddles it). A white veil on the left keeps the copy
   readable; the film's subject is centred, so on screens narrower than 16:9 the crop shifts it right
   (object-position 30%). Overrides every earlier placement of .hero2__media. */
.hero2__media {
  position: absolute; z-index: 1; top: 0; right: 0; bottom: var(--hero2-overlap); left: 0;
  width: auto; height: auto; max-height: none; margin: 0; aspect-ratio: auto;
  border-radius: 0 0 var(--r-xl) var(--r-xl); box-shadow: none;
}
.hero2__media::after {
  box-shadow: none;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--paper) 94%, transparent) 0%,
      color-mix(in srgb, var(--paper) 88%, transparent) 24%,
      color-mix(in srgb, var(--paper) 60%, transparent) 42%,
      color-mix(in srgb, var(--paper) 18%, transparent) 56%,
      transparent 68%),
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 50%, transparent), transparent 22%);
}
.hero2__video { object-position: 30% 42%; }
/* below 1024px the copy takes the full width, so the film becomes a full-bleed band under it, faded in from
   the stage colour at its top edge */
@media (max-width: 1023px) {
  .hero2__media { position: relative; top: auto; right: auto; bottom: auto; left: auto; margin: clamp(1.8rem, 1rem + 3vw, 2.6rem) calc(-1 * var(--gutter)) 0; aspect-ratio: 16 / 10; border-radius: 0; }
  .hero2__media::after { background: linear-gradient(180deg, color-mix(in srgb, var(--rg-50) 92%, transparent), transparent 28%); }
  .hero2__video { object-position: 50% 42%; }
}
@media (max-width: 640px) { .hero2__media { aspect-ratio: 6 / 5; } }

/* ======================= Hero v5 - below 1024px the film sits behind the copy (owner, 2026-09-26) =======================
   Desktop (>= 1024px) is locked by the owner: every rule here is inside max-width: 1023px. The film fills the
   hero stage behind the eyebrow, heading and buttons; a vertical white veil keeps them readable (strongest
   behind the small eyebrow and the heading, easing off below the buttons, where the film shows through), and
   the stage is tall enough that the film has room below the buttons. The quick-action bar still straddles
   the stage's rounded lower edge. */
@media (max-width: 1023px) {
  .hero2__grid { min-height: clamp(420px, calc(100svh - 300px), 720px); align-items: start; }
  .hero2__media {
    position: absolute; z-index: 1; top: 0; right: 0; bottom: var(--hero2-overlap); left: 0;
    margin: 0; aspect-ratio: auto; border-radius: 0 0 var(--r-xl) var(--r-xl);
  }
  .hero2__media::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--paper) 90%, transparent) 0%,
      color-mix(in srgb, var(--paper) 82%, transparent) 30%,
      color-mix(in srgb, var(--paper) 78%, transparent) 36%,   /* the heading ends at 26-34% of the stage (360-1023px) */
      color-mix(in srgb, var(--paper) 52%, transparent) 46%,   /* the buttons carry their own backgrounds */
      color-mix(in srgb, var(--paper) 22%, transparent) 60%,
      color-mix(in srgb, var(--paper) 6%, transparent) 78%,
      transparent 92%);
  }
  .hero2__video { object-position: 50% 40%; }
}

/* ======================= Hero v5.1 - mobile art direction (independent QA, 2026-09-26) =======================
   H5-CROP-1: filling the whole tall phone stage, the 16:9 film was scaled by height (only 23-35% of its width
   visible) and its eyes and eyewear sat behind the buttons, leaving a close-up of the nose and lips below them.
   The film now starts at the heading (it still runs behind the heading and both buttons) and ends at the stage
   edge: less zoom, and at the loop's start / in the poster the eyewear lands just below the buttons. The top
   edge is feathered; the eyebrow sits above it on the plain stage. Still inside max-width: 1023px. */
@media (max-width: 1023px) {
  .hero2__media {
    top: calc(var(--header-h) + 6rem);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 56px); mask-image: linear-gradient(180deg, transparent 0, #000 56px);
  }
  .hero2__media::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--paper) 88%, transparent) 0%,
      color-mix(in srgb, var(--paper) 84%, transparent) 16%,   /* the heading ends at ~15% of the film box */
      color-mix(in srgb, var(--paper) 62%, transparent) 24%,   /* the buttons carry their own backgrounds */
      color-mix(in srgb, var(--paper) 30%, transparent) 32%,
      color-mix(in srgb, var(--paper) 8%, transparent) 42%,
      transparent 56%);
  }
}
@media (max-width: 640px) { .hero2__media { top: calc(var(--header-h) + 6rem); } }   /* mid-heading: the eyewear clears the buttons on 360-430px phones at the loop start */
/* H5-LAND-1: landscape phones - the tall stage made the hero two screens tall */
@media (max-width: 1023px) and (max-height: 500px) {
  .hero2__grid { min-height: 0; }
  .hero2__copy h1 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.2rem); }
}
/* H5-TOTOP-1 (site-wide, no visual change): the hidden back-to-top button (opacity 0) still took taps over the
   last quick action; it only receives the pointer while shown */
.totop { pointer-events: none; }
.totop.is-shown { pointer-events: auto; }