/* ==========================================================================
   NOOR · site-v3 home. Split stage: the page is a pair of lenses.
   Left lens: the eye clinic. Right lens: the showroom. The bridge between
   them is the chrome. Archivo speaks, Jost reads. Ink, white, one night.
   ========================================================================== */

:root {
  --sc-canvas: #F3F3F1;
  --sc-surface: #FFFFFF;
  --sc-ink: #1A1A1A;
  --sc-ink-soft: #565653;
  --sc-accent: #1A1A1A;
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sc-font-text: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --sc-shadow-color: 40 6% 10%;

  --night: #121212;
  --night-2: #1B1B1A;
  --night-ink: #F4F4F2;
  --night-soft: #ABABA6;
  --paper: #FFFFFF;
  --tint: #E8E7E3;
  --hair: rgba(26, 26, 26, 0.14);
  --hair-strong: rgba(26, 26, 26, 0.32);
  --hair-night: rgba(255, 255, 255, 0.16);

  /* type: 13 15 18 22 28 36 48 64 96 */
  /* readability floor (2026-10-20): nothing on the page under 15px */
  --t-13: .9375rem; --t-15: 1.0625rem; --t-18: 1.1875rem; --t-22: 1.5rem;
  --t-28: 1.875rem; --t-36: 2.375rem; --t-48: 3.25rem;
  --split: 40%;                         /* the bridge: clinic 40, showroom 60 */

  --gut: clamp(20px, 4.4vw, 72px);
  --near: clamp(28px, 4vw, 64px);       /* distance from the bridge */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --sh-1: 0 1px 2px hsl(var(--sc-shadow-color) / .10), 0 2px 6px hsl(var(--sc-shadow-color) / .06);
  --sh-2: 0 2px 4px hsl(var(--sc-shadow-color) / .08), 0 10px 24px -6px hsl(var(--sc-shadow-color) / .16);
  --sh-3: 0 4px 10px hsl(var(--sc-shadow-color) / .10), 0 30px 60px -18px hsl(var(--sc-shadow-color) / .34);
}

html { color-scheme: light; }
[hidden] { display: none !important; }
body { font-size: 1.25rem; line-height: 1.6; letter-spacing: 0; background: var(--sc-canvas); color: var(--sc-ink); }
img { max-width: 100%; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 500; background: var(--sc-ink); color: #fff; padding: 10px 16px; border-radius: 999px; font: 650 var(--t-15) var(--sc-font-text); }
.skip:focus { top: 16px; }

:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; border-radius: 4px; }
.is-dark :focus-visible, .visit :focus-visible, .col--night :focus-visible { outline-color: #fff; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px; border: 0;
  font: 650 var(--t-15)/1 var(--sc-font-text); letter-spacing: .01em; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: transform 140ms var(--ease), background-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.btn--ink { background: var(--sc-ink); color: #fff; box-shadow: var(--sh-1); }
.btn--lg { min-height: 56px; padding: 0 30px; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }
.btn::after { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 11 11 3M5 3h6v6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 11 11 3M5 3h6v6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 160ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .btn--ink:hover { background: #333331; box-shadow: var(--sh-2); }
  .btn:hover::after { transform: translate(2px, -2px); }
}
.btn:active { transform: scale(.97); }

.textlink {
  display: inline-flex; align-items: center; gap: 8px; color: inherit;
  font: 650 var(--t-15)/1.3 var(--sc-font-text);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
  transition: text-decoration-color 160ms var(--ease);
}
@media (hover: hover) and (pointer: fine) { .textlink:hover { text-decoration-color: currentColor; } }
.textlink:active { opacity: .7; }
.textlink--light { color: #fff; }
.morelinks { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 32px 0 0; }

/* ==================================================================== BRIDGE */
.bridge { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.bridge > * { pointer-events: auto; }
.bridge__line {
  position: absolute; left: var(--split); top: 0; bottom: 0; width: 1px; margin-left: -.5px;
  background: linear-gradient(var(--hair-strong), var(--hair-strong)) center / 1px 100% no-repeat;
  pointer-events: none;
  transform: translate3d(var(--bx, 0px), 0, 0); opacity: var(--bo, 1);
}
.bridge__pupil {
  position: absolute; left: 50%; top: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--sc-ink); box-shadow: 0 0 0 4px var(--sc-canvas);
  transform: translate3d(0, var(--py, 12vh), 0);
}
.bridge.is-night .bridge__line { background-image: linear-gradient(var(--hair-night), var(--hair-night)); }
.bridge.is-night .bridge__pupil { background: #fff; box-shadow: 0 0 0 4px var(--night); }

.bridge__top {
  position: absolute; left: var(--split); top: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; padding: 4px;
  background: rgba(255, 255, 255, .94); border-radius: 999px; box-shadow: var(--sh-2), inset 0 0 0 1px rgba(26,26,26,.06);
  transition: background-color 240ms var(--ease), color 240ms var(--ease);
}
.bridge__side {
  font: 650 .875rem/1 var(--sc-font-text); letter-spacing: .1em; text-transform: uppercase;
  padding: 0 14px; color: var(--sc-ink); white-space: nowrap;
  transition: opacity 200ms var(--ease);
}
.rings {
  display: grid; place-items: center; width: 68px; height: 44px; padding: 0; border: 0; border-radius: 999px;
  background: var(--sc-ink); color: #fff; cursor: pointer;
  transition: transform 140ms var(--ease), background-color 160ms var(--ease);
}
.rings svg { width: 42px; height: auto; display: block; transition: transform 320ms var(--ease), opacity 200ms var(--ease); }
/* before the two o's arrive, the rings button is an empty socket */

@media (hover: hover) and (pointer: fine) { .rings:hover svg { transform: scale(1.08); } .rings:hover { background: #333331; } }
.rings:active { transform: scale(.95); }
.bridge.is-night .bridge__top { background: rgba(28, 28, 27, .94); box-shadow: var(--sh-2), inset 0 0 0 1px rgba(255,255,255,.08); }
.bridge.is-night .bridge__side { color: var(--night-ink); }
.bridge.is-night .rings { background: #fff; color: var(--night); }

.bridge__stops {
  position: absolute; left: var(--split); top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; gap: 22px; opacity: var(--so, 1);
  transition: opacity 200ms var(--ease);
}
.bridge__stops a {
  position: relative; display: block; width: 24px; height: 24px; border-radius: 50%;
}
.bridge__stops a::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--sc-canvas); box-shadow: inset 0 0 0 1.5px var(--sc-ink);
  transition: transform 200ms var(--ease), background-color 200ms var(--ease);
}
.bridge__stops a[aria-current="true"]::before { background: var(--sc-ink); transform: scale(1.25); }
.bridge__stops span {
  position: absolute; left: calc(100% + 6px); top: 50%; transform: translate(-4px, -50%); opacity: 0;
  font: 650 var(--t-13)/1 var(--sc-font-text); letter-spacing: .02em; white-space: nowrap;
  background: var(--sc-ink); color: #fff; padding: 7px 10px; border-radius: 999px; pointer-events: none;
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}
.bridge__stops a:hover span, .bridge__stops a:focus-visible span { opacity: 1; transform: translate(0, -50%); }
.bridge.is-night .bridge__stops a::before { background: var(--night); box-shadow: inset 0 0 0 1.5px #fff; }
.bridge.is-night .bridge__stops a[aria-current="true"]::before { background: #fff; }

.bridge__foot {
  position: absolute; left: var(--split); bottom: max(18px, env(safe-area-inset-bottom)); transform: translate3d(-50%, var(--fy, 0px), 0);
  display: flex; align-items: center; gap: 4px; padding: 4px;
  background: rgba(255, 255, 255, .96); border-radius: 999px; box-shadow: var(--sh-3), inset 0 0 0 1px rgba(26,26,26,.06);
  opacity: var(--fo, 1);
  transition: transform 420ms var(--ease-drawer), opacity 240ms var(--ease);
}
.bridge.foot-away .bridge__foot { --fy: 140%; --fo: 0; pointer-events: none; }
.slipchip {
  white-space: nowrap; flex: none;
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 14px; border-radius: 999px;
  color: var(--sc-ink); text-decoration: none; font: 650 var(--t-15)/1 var(--sc-font-text);
  transition: background-color 160ms var(--ease), transform 140ms var(--ease);
}
.slipchip__ico { width: 16px; height: 20px; border: 1.5px solid currentColor; border-radius: 2px; position: relative; }
.slipchip__ico::before, .slipchip__ico::after { content: ""; position: absolute; left: 3px; right: 3px; height: 1.5px; background: currentColor; top: 5px; }
.slipchip__ico::after { top: 10px; right: 5px; }
.slipchip b {
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center;
  background: var(--tint); font: 650 var(--t-13)/1 var(--sc-font-text); font-variant-numeric: tabular-nums;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.slipchip.has b { background: var(--sc-ink); color: #fff; }
.slipchip.bump b { animation: bump 420ms var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (hover: hover) and (pointer: fine) { .slipchip:hover { background: var(--tint); } }
.slipchip:active { transform: scale(.97); }

/* the pick that flies into the bridge (signature) */
.fly { position: fixed; left: 0; top: 0; z-index: 70; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--sc-ink); pointer-events: none; box-shadow: 0 0 0 3px #fff, var(--sh-2); }

/* ==================================================================== HERO */
.hero__stage { overflow: hidden; background: var(--sc-canvas); }
.pane { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.pane--clinic { width: var(--split); }
.pane--show { width: calc(100% - var(--split)); }
.pane--clinic { left: 0; }
.pane--show { right: 0; background: #D9D7D2; }
.layer { position: absolute; will-change: transform; max-width: none; }
.layer--far { inset: -4%; }
.layer--far img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 46%; display: block; }

/* the clinic: a lit studio, the refractor as its subject */
.hero__studio {
  background:
    radial-gradient(60% 46% at 64% 46%, #FFFFFF 0%, rgba(255,255,255,0) 70%),
    radial-gradient(90% 70% at 20% 110%, #CFCDC8 0%, rgba(207,205,200,0) 60%),
    linear-gradient(180deg, #EEEDEA 0%, #E2E1DD 62%, #D6D4CF 100%);
}
.hero__studio::after { /* the floor line the refractor arm would sit over */
  content: ""; position: absolute; left: 0; right: 0; top: 74%; height: 26%;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,0) 40%);
}
.layer--halo { left: 30%; top: 14%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0)); }
.hero__logo { position: absolute; left: var(--gut); top: 22px; width: 132px; height: auto; z-index: 3; }

.scrim { position: absolute; pointer-events: none; }
.scrim--show { inset: 0; background:
  linear-gradient(0deg, rgba(12,12,12,.82) 0%, rgba(12,12,12,.62) 34%, rgba(12,12,12,.18) 58%, rgba(12,12,12,0) 72%),
  radial-gradient(90% 50% at 100% 0%, rgba(12,12,12,.35), rgba(12,12,12,0) 70%); }
.hero__open {
  position: absolute; right: var(--gut); top: 26px; margin: 0; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  font: 650 var(--t-13)/1 var(--sc-font-text); letter-spacing: .04em; color: #fff;
  background: rgba(18,18,18,.55); padding: 9px 12px; border-radius: 999px;
}
.hero__open::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9BE29B; box-shadow: 0 0 0 3px rgba(155,226,155,.25); }
.hero__open.is-closed::before { background: #C9C9C4; box-shadow: none; }

.hero__title { position: absolute; inset: 0; margin: 0; pointer-events: none; z-index: 4; }
.hero__half {
  position: absolute; bottom: calc(9svh + 182px);
  font: 800 clamp(3.5rem, 1rem + 5.6vw, 7.25rem)/.9 var(--sc-font-display);
  letter-spacing: -0.04em;
}
.o { position: relative; }
.o__base { display: inline-block; width: 0; height: 0; }
.hero__half--l { left: var(--gut); color: var(--sc-ink); }
.hero__half--r { right: var(--gut); color: #fff; text-align: right; }
.hero__copy { position: absolute; bottom: 9svh; z-index: 5; width: min(30rem, calc(var(--split) - var(--gut) - var(--near))); }
.hero__copy--l { left: var(--gut); }
.hero__copy--r { right: var(--gut); text-align: right; color: #fff; }
.hero__beats { display: grid; margin-bottom: 24px; }
.hero__beats > * { grid-area: 1 / 1; }
.hero__sub { margin: 0; font-size: clamp(1.1875rem, 1rem + .45vw, 1.375rem); line-height: 1.45; max-width: 26rem; text-wrap: balance; }
.hero__copy--r .hero__sub { margin-left: auto; color: rgba(255,255,255,.92); }
.btn--light { background: #fff; color: var(--sc-ink); box-shadow: var(--sh-2); }
@media (hover: hover) and (pointer: fine) { .btn--light:hover { background: #EDEDEA; } }

/* the two o's become the Noor mark: drawn twice, ink inside the clinic lens, white inside the showroom lens */
.olink { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 61; pointer-events: none; overflow: visible; display: none; }
.olink__ink { color: var(--sc-ink); }
.olink__white { color: #fff; }
html.olink-live .olink { display: block; }
html.olink-docked .olink { visibility: hidden; }
.olink__o { fill: url(#ol-glass); stroke: currentColor; opacity: 0; }
.olink__mark { fill: currentColor; opacity: 0; }

/* ================================================================ SPLIT ACTS */
.split { position: relative; display: grid; grid-template-columns: 2fr 3fr; }
.col { position: relative; padding: clamp(96px, 14vh, 160px) var(--near) clamp(96px, 14vh, 160px) var(--gut); display: flex; }
.col--clinic { justify-content: flex-end; }
.col--show { padding: clamp(96px, 14vh, 160px) var(--gut) clamp(96px, 14vh, 160px) var(--near); justify-content: flex-start; }
.col__in { position: relative; z-index: 1; width: 100%; max-width: 34rem; }
.col--show .col__in { max-width: 56rem; }
.split--choose .col { padding-top: clamp(80px, 12vh, 140px); }

.h2 { margin: 0 0 16px; font: 800 clamp(2rem, 1.3rem + 2vw, 3rem)/1.02 var(--sc-font-display); letter-spacing: -0.03em; text-wrap: balance; }
.h3 { margin: 48px 0 16px; font: 650 var(--t-22)/1.2 var(--sc-font-display); letter-spacing: -0.01em; }
.lede { margin: 0 0 32px; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.5; color: var(--sc-ink-soft); max-width: 32rem; text-wrap: pretty; }
.fine, .src { margin: 16px 0 0; font-size: var(--t-15); line-height: 1.5; color: var(--sc-ink-soft); }
.src a { color: inherit; text-underline-offset: 3px; }
.trust { margin: 0 0 20px; font: 650 var(--t-13)/1 var(--sc-font-text); letter-spacing: .04em; color: var(--sc-ink-soft); }
.trust b { color: var(--sc-ink); }
.trust__stars { color: var(--sc-ink); letter-spacing: .1em; }

/* exam picker */
.exams { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.exam { position: relative; display: flex; align-items: stretch; border-bottom: 1px solid var(--hair); }
.exam__pick {
  flex: 1; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "who tick" "name tick" "meta tick";
  align-items: center; text-align: left; gap: 2px 16px; padding: 16px 12px 16px 0; margin: 0;
  background: none; border: 0; color: inherit; cursor: pointer; font: inherit;
  transition: transform 160ms var(--ease);
}
.exam__who { grid-area: who; font: 650 var(--t-13)/1.3 var(--sc-font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.exam__name { grid-area: name; font: 650 var(--t-22)/1.25 var(--sc-font-display); letter-spacing: -0.01em; }
.exam__meta { grid-area: meta; font-size: var(--t-15); color: var(--sc-ink-soft); }
.tick { grid-area: tick; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--hair-strong); position: relative; transition: background-color 180ms var(--ease), box-shadow 180ms var(--ease); }
.tick::after { content: ""; position: absolute; left: 8px; top: 7px; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) scale(.6); opacity: 0; transition: opacity 160ms var(--ease), transform 200ms var(--ease); }
.exam__pick[aria-pressed="true"] .tick { background: var(--sc-ink); box-shadow: none; }
.exam__pick[aria-pressed="true"] .tick::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.exam__book {
  align-self: center; margin-left: 4px; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  font: 650 var(--t-15)/1 var(--sc-font-text); color: var(--sc-ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--hair-strong);
  transition: background-color 160ms var(--ease), color 160ms var(--ease), transform 140ms var(--ease);
}
.exam__book:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .exam__pick:hover { transform: translateX(4px); }
  .exam__pick:hover .tick { box-shadow: inset 0 0 0 1.5px var(--sc-ink); }
  .exam__book:hover { background: var(--sc-ink); color: #fff; }
}

/* frames */
.frames { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.frame { position: relative; }
.frame__a { display: block; color: inherit; text-decoration: none; }
.frame__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; background: var(--tint); box-shadow: var(--sh-1); }
.frame__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.12); transform-origin: 50% 30%; transition: transform 500ms var(--ease); }
.frame__kind { display: block; margin-top: 12px; font: 650 var(--t-13)/1 var(--sc-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.frame__brand { display: block; margin-top: 6px; font-size: var(--t-15); line-height: 1.3; color: var(--sc-ink-soft); }
.frame__model { display: block; font: 650 var(--t-22)/1.2 var(--sc-font-display); }
.frame__price { display: block; font-size: var(--t-15); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .frame__a:hover .frame__img img { transform: scale(1.18); } }
.frame__a:active .frame__img { transform: scale(.985); }
.frame__add {
  position: absolute; right: 10px; top: 10px; width: 46px; height: 46px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.94); color: var(--sc-ink); box-shadow: var(--sh-2); display: grid; place-items: center;
  transition: transform 140ms var(--ease), background-color 180ms var(--ease), color 180ms var(--ease);
}
.frame__add i { position: relative; width: 14px; height: 14px; transition: transform 240ms var(--ease); }
.frame__add i::before, .frame__add i::after { content: ""; position: absolute; left: 6px; top: 0; width: 2px; height: 14px; background: currentColor; border-radius: 1px; }
.frame__add i::after { transform: rotate(90deg); }
.frame__add[aria-pressed="true"] { background: var(--sc-ink); color: #fff; }
.frame__add[aria-pressed="true"] i { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .frame__add:hover { transform: scale(1.08); } }
.frame__add:active { transform: scale(.92); }

/* prices: each lens wipes in as a change of state */
.split--prices .col { overflow: hidden; }
.col--night { background: var(--night); color: var(--night-ink); }
.col--night .src, .col--night .lede { color: var(--night-soft); }
.split--prices .col--show { background: var(--tint); }
.msp { margin: 32px 0 0; border-top: 1px solid var(--hair-night); }
.msp > div { display: grid; grid-template-columns: 11rem 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--hair-night); }
.msp dt { font: 800 var(--t-22)/1.2 var(--sc-font-display); letter-spacing: -0.01em; }
.msp dd { margin: 0; color: #D9D9D5; line-height: 1.5; }
.pkgs { display: grid; gap: 12px; }
.pkg {
  position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name price" "note note";
  gap: 6px 16px; text-align: left; padding: 20px 22px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--paper); color: var(--sc-ink); font: inherit; box-shadow: var(--sh-1);
  transition: transform 160ms var(--ease), box-shadow 200ms var(--ease);
}
.pkg__tag { position: absolute; right: 22px; top: -11px; font: 650 var(--t-13)/1 var(--sc-font-text); letter-spacing: .04em; background: var(--sc-ink); color: #fff; padding: 6px 10px; border-radius: 999px; }
.pkg__name { grid-area: name; font: 800 var(--t-28)/1.1 var(--sc-font-display); letter-spacing: -0.02em; }
.pkg__price { grid-area: price; align-self: center; font-size: var(--t-15); color: var(--sc-ink-soft); }
.pkg__price b { font: 800 var(--t-28)/1 var(--sc-font-display); color: var(--sc-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pkg__note { grid-area: note; font-size: var(--t-15); line-height: 1.5; color: var(--sc-ink-soft); max-width: 30rem; }
.pkg[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--sc-ink), var(--sh-2); }
@media (hover: hover) and (pointer: fine) { .pkg:hover { transform: translateY(-2px); box-shadow: var(--sh-2); } .pkg[aria-checked="true"]:hover { box-shadow: inset 0 0 0 2px var(--sc-ink), var(--sh-2); } }
.pkg:active { transform: scale(.985); }

/* know: the quiet act */
.split--know .col { padding-top: clamp(120px, 18vh, 200px); padding-bottom: clamp(120px, 20vh, 220px); }
.big { margin: 0; font: 650 clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem)/1.12 var(--sc-font-display); letter-spacing: -0.02em; text-wrap: balance; }
.ages { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.ages > div { padding: 12px 0; border-top: 1px solid var(--hair); }
.ages dt { font: 650 var(--t-15)/1.3 var(--sc-font-text); }
.ages dd { margin: 0; font-size: var(--t-15); color: var(--sc-ink-soft); }
.brands { list-style: none; margin: 0 0 32px; padding: 0; }
.brands li { font: 650 clamp(1.375rem, 1.1rem + .9vw, 1.875rem)/1.28 var(--sc-font-display); letter-spacing: -0.02em; }

/* ================================================================== THE FOLD */
.fold__stage { background: var(--night); color: var(--night-ink); overflow: hidden; }
.fold__clinic { position: absolute; inset: 0; }
.fold__show { position: absolute; top: 0; bottom: 0; left: var(--split); right: 0; overflow: hidden; clip-path: inset(0 0 0 var(--cut, 0%)); }
.fold__show img { position: absolute; inset: 0 -6%; width: 112%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; transform: translate3d(var(--sx, 0px), 0, 0); }
.scrim--fold { inset: 0; background: linear-gradient(90deg, rgba(10,10,10,.62), rgba(10,10,10,.18) 60%, rgba(10,10,10,0)); }
.fold__pre {
  position: absolute; top: 50%; margin: 0; transform: translateY(-50%);
  font: 800 clamp(2.4rem, 1.2rem + 3.4vw, 4.5rem)/.98 var(--sc-font-display); letter-spacing: -0.035em;
}
.fold__pre--l { right: calc(100% - var(--split) + var(--near)); text-align: right; }
.fold__pre--r { left: var(--near); color: #fff; z-index: 2; }
.fold__main { position: absolute; left: var(--gut); right: var(--gut); top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; max-width: 1400px; margin: 0 auto; }
.fold__title { margin: 0; font: 800 clamp(3rem, 1rem + 6vw, 7.25rem)/.92 var(--sc-font-display); letter-spacing: -0.045em; font-variation-settings: "wdth" 94; }
.fold__line { display: block; }
.fold__lede { margin: 0 0 24px; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.5; color: #E4E4E0; }
.fold__steps { list-style: none; margin: 0 0 20px; padding: 0; counter-reset: s; border-top: 1px solid var(--hair-night); }
.fold__steps li { counter-increment: s; display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--hair-night); }
.fold__steps li::before { content: counter(s); grid-row: span 2; font: 800 var(--t-18)/1.3 var(--sc-font-display); color: var(--night-soft); }
.fold__steps b { font: 650 var(--t-18)/1.3 var(--sc-font-display); }
.fold__steps span { font-size: var(--t-15); color: var(--night-soft); }
.fold__terms { margin: 0; font-size: var(--t-13); line-height: 1.5; color: var(--night-soft); }
/* bespoke states are written by home3.js; these are the no-JS / reduced resolved defaults */
html.fold-live .fold__main [data-f] { will-change: transform, opacity; }

/* ================================================================== VISIT */
.visit { background: var(--night); color: var(--night-ink); padding: clamp(64px, 10vh, 120px) var(--gut) 40px; }
.visit__grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: 48px clamp(48px, 8vw, 128px); align-items: start; }
.slip {
  background: var(--paper); color: var(--sc-ink); border-radius: 6px; padding: 28px 28px 24px;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 4px 10px rgba(0,0,0,.28), 0 40px 80px -24px rgba(0,0,0,.7);
  transform: rotate(-1.2deg); transform-origin: 30% 80%;
  background-image: repeating-linear-gradient(180deg, transparent 0 39px, rgba(26,26,26,.05) 39px 40px);
}
.slip__head { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 2px solid var(--sc-ink); }
.slip__mark { width: 56px; height: auto; flex: none; }
.slip__title { margin: 0; font: 800 var(--t-28)/1 var(--sc-font-display); letter-spacing: -0.02em; }
.slip__sub { margin: 4px 0 0; font-size: var(--t-15); color: var(--sc-ink-soft); }
.slip__rows { margin: 0 0 24px; }
.slip__row { display: grid; grid-template-columns: 7.5rem 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.slip__row dt { font: 650 var(--t-13)/1.4 var(--sc-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.slip__row dd { margin: 0; font-size: var(--t-15); line-height: 1.45; font-weight: 500; }
.slip__row dd ul { margin: 0; padding: 0; list-style: none; }
.slip__row dd li + li { margin-top: 2px; }
.slip__empty { color: var(--sc-ink-soft); font-weight: 400; }
.slip__empty a { color: var(--sc-ink); }
.slip__ok { display: inline-flex; align-items: center; gap: 8px; }
.slip__ok::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sc-ink); }
.slip select {
  width: 100%; min-height: 44px; padding: 0 36px 0 12px; border-radius: 6px; border: 1px solid var(--hair-strong); background: var(--paper);
  font: 500 var(--t-15) var(--sc-font-text); color: var(--sc-ink); appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231A1A1A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px;
  transition: border-color 160ms var(--ease);
}
.slip select:hover { border-color: var(--sc-ink); }
.slip__fine { margin: 14px 0 0; font-size: var(--t-13); line-height: 1.5; color: var(--sc-ink-soft); }
.slip__books { display: block; margin-top: 10px; font: 650 var(--t-13)/1.4 var(--sc-font-text); color: var(--sc-ink); text-align: center; }
.slip__clear { background: none; border: 0; padding: 0; font: inherit; color: var(--sc-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.where { padding-top: 8px; }
.where__title { margin: 0 0 16px; font: 800 clamp(2.25rem, 1.4rem + 2.6vw, 4rem)/.98 var(--sc-font-display); letter-spacing: -0.035em; text-wrap: balance; }
.where__lede { margin: 0 0 32px; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.5; color: #D9D9D5; max-width: 34rem; }
.where__facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; max-width: 40rem; }
.where__facts > div { padding: 14px 0; border-top: 1px solid var(--hair-night); }
.where__facts dt { font: 650 var(--t-13)/1.4 var(--sc-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--night-soft); }
.where__facts dd { margin: 4px 0 0; font-size: var(--t-15); line-height: 1.5; overflow-wrap: anywhere; }
.where__facts a { color: #fff; text-underline-offset: 3px; }

.foot { max-width: 1400px; margin: clamp(80px, 12vh, 140px) auto 0; padding: 32px 0 calc(88px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair-night); display: grid; grid-template-columns: auto 1fr; gap: 24px 48px; align-items: center; }
.foot__logo { width: 120px; height: auto; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: flex-end; }
.foot__nav a, .foot__small a { color: #D9D9D5; text-decoration: none; font-size: var(--t-15); transition: color 160ms var(--ease); }
.foot__nav a:hover, .foot__small a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot__small { grid-column: 1 / -1; margin: 0; font-size: var(--t-13); color: var(--night-soft); }

/* ================================================================== MENU */
.menu { position: fixed; inset: 0; z-index: 200; background: var(--paper); color: var(--sc-ink); overflow-y: auto; overscroll-behavior: contain;
  clip-path: circle(20px at var(--ox, 50%) var(--oy, 36px)); visibility: hidden;
  transition: clip-path 340ms var(--ease-drawer), visibility 0s 340ms; }
.menu[hidden] { display: block; }
.menu.is-open { clip-path: circle(150vmax at var(--ox, 50%) var(--oy, 36px)); visibility: visible; transition: clip-path 620ms var(--ease-drawer), visibility 0s; }
.menu__in { min-height: 100%; max-width: 1400px; margin: 0 auto; padding: 22px var(--gut) 40px; display: flex; flex-direction: column; }
.menu__head { display: flex; justify-content: space-between; align-items: center; }
.menu__logo { width: 132px; height: auto; }
.menu__close { position: relative; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--tint); cursor: pointer; transition: transform 140ms var(--ease), background-color 160ms var(--ease); }
.menu__close span::before, .menu__close span::after { content: ""; position: absolute; left: 15px; right: 15px; top: 23px; height: 2px; background: var(--sc-ink); transform: rotate(45deg); }
.menu__close span::after { transform: rotate(-45deg); }
.menu__close:hover { background: #DCDBD7; }
.menu__close:active { transform: scale(.94); }
.menu__cols { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 48px; padding: clamp(48px, 10vh, 120px) 0 48px; }
.menu__k { margin: 0 0 12px; font: 650 var(--t-13)/1 var(--sc-font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list li { opacity: 0; transform: translateY(14px); transition: opacity 360ms var(--ease), transform 460ms var(--ease); }
.menu.is-open .menu__list li { opacity: 1; transform: none; transition-delay: calc(140ms + var(--i, 0) * 45ms); }
.menu__list a { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--hair); color: inherit; text-decoration: none; font: 800 clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem)/1.05 var(--sc-font-display); letter-spacing: -0.025em; transition: transform 200ms var(--ease); }
.menu__list small { font: 400 var(--t-15)/1.4 var(--sc-font-text); letter-spacing: 0; color: var(--sc-ink-soft); }
@media (hover: hover) and (pointer: fine) { .menu__list a:hover { transform: translateX(6px); } }
.menu__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding-top: 24px; border-top: 1px solid var(--hair); }
.menu__foot p { margin: 0; font-size: var(--t-15); color: var(--sc-ink-soft); }
.menu__foot a:not(.btn) { color: var(--sc-ink); }
html.menu-open { overflow: hidden; }

/* ================================================================== BLINK */
.lids { position: fixed; inset: 0; z-index: 400; pointer-events: none; overflow: hidden; }
.lids__lid { position: absolute; left: -5%; right: -5%; height: 62%; background: #1A1A1A; transition: transform 340ms cubic-bezier(.23,1,.32,1); will-change: transform; }
.lids__lid--top { top: 0; border-radius: 0 0 50% 50% / 0 0 22% 22%; transform: translate3d(0, -102%, 0); }
.lids__lid--bot { bottom: 0; border-radius: 50% 50% 0 0 / 22% 22% 0 0; transform: translate3d(0, 102%, 0); }
.lids.is-closing .lids__lid { transform: none; transition: transform 170ms cubic-bezier(.65,0,.35,1); }
.lids.is-shut .lids__lid { transform: none; transition: none; }
/* the eye opens on arrival: pure CSS from the first paint, so it stays smooth
   while the page's scripts are still loading (2026-10-20) */
html.blink-in::before, html.blink-in::after { content: ""; position: fixed; left: -5%; right: -5%; height: 62%; z-index: 400;
  background: #1A1A1A; pointer-events: none; will-change: transform; animation: 380ms cubic-bezier(.23,1,.32,1) both; }
html.blink-in::before { top: 0; border-radius: 0 0 50% 50% / 0 0 22% 22%; animation-name: noor-lid-up; }
html.blink-in::after { bottom: 0; border-radius: 50% 50% 0 0 / 22% 22% 0 0; animation-name: noor-lid-down; }
@keyframes noor-lid-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -104%, 0); } }
@keyframes noor-lid-down { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 104%, 0); } }
@media (prefers-reduced-motion: reduce) { html.blink-in::before, html.blink-in::after { display: none; } }

/* =========================================================== PHONE (< 900) */
@media (max-width: 899px) {
  :root { --near: 20px; }
  body { font-size: 1.0625rem; }

  /* the bridge turns: a top strip with the rings, a bottom strip with the slip and the button */
  .bridge__line, .bridge__stops { display: none; }
  .bridge { --split: 50%; }
  .bridge__top { top: max(10px, env(safe-area-inset-top)); left: 50%; width: calc(100% - 20px); max-width: 480px; justify-content: space-between; }
  .bridge__side { padding: 0 12px; opacity: .45; }
  .bridge[data-active="clinic"] .bridge__side--l, .bridge[data-active="show"] .bridge__side--r { opacity: 1; }
  .rings { width: 58px; height: 38px; }
  .bridge__foot { width: calc(100% - 20px); max-width: 480px; justify-content: space-between; bottom: max(10px, env(safe-area-inset-bottom)); }
  .bridge__foot .btn { flex: 1 1 auto; min-width: 0; padding: 0 16px; }
  .bridge__foot { box-sizing: border-box; }
  .slipchip { padding: 0 12px 0 12px; }

  /* hero: the two lenses stack, clinic above, showroom below */
  .pane, .pane--clinic, .pane--show { width: 100%; }
  .pane--clinic { height: 42%; }
  .pane--show { height: 58%; }
  .pane--clinic { top: 0; bottom: auto; }
  .pane--show { top: auto; bottom: 0; }
  .hero__logo { display: none; }
  .hero__open { top: 14px; bottom: auto; right: 14px; }
  .scrim--show { background: linear-gradient(0deg, rgba(12,12,12,.86) 0%, rgba(12,12,12,.66) 38%, rgba(12,12,12,.2) 66%, rgba(12,12,12,0) 82%); }
  .hero__half { font-size: clamp(2.6rem, 12.5vw, 3.6rem); bottom: auto; }
  .hero__half--l { left: 20px; top: calc(max(10px, env(safe-area-inset-top)) + 66px); bottom: auto; }
  .hero__half--r { left: 20px; right: auto; text-align: left; top: auto; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 72px + 5.4rem); }
  .hero__copy { width: auto; left: 20px; right: 20px; }
  .hero__copy--l { top: auto; bottom: calc(58% + 16px); }
  .hero__copy--r { top: auto; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 72px); text-align: left; }
  .hero__copy--r .hero__sub { margin-left: 0; }
  .hero__copy .btn, .hero__copy .textlink { display: none; }
  .hero__beats { margin: 10px 0 0; }
  .hero__sub { font-size: 1.0625rem; max-width: 20rem; }
  .hero__copy--r .hero__sub { max-width: 20rem; }

  .split { grid-template-columns: 1fr; }
  .col, .col--show { padding: 72px 20px; justify-content: stretch; }
  .split--choose .col { padding-top: 88px; }
  .col__in { max-width: none; }
  .frames { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .msp > div { grid-template-columns: 1fr; gap: 4px; }
  .ages { grid-template-columns: 1fr 1fr; }
  .split--know .col { padding-top: 72px; padding-bottom: 72px; }
  .split--know .col--show { padding-top: 0; }

  .fold__show { left: 0; top: 42%; clip-path: inset(var(--cut, 0%) 0 0 0); }
  .fold__pre { top: auto; transform: none; font-size: clamp(2.1rem, 9vw, 3rem); }
  .fold__pre--l { right: auto; left: 20px; text-align: left; top: calc(25% - 1.2em); }
  .fold__pre--r { left: 20px; top: calc(25% - 1.2em); }
  .fold__main { grid-template-columns: 1fr; left: 20px; right: 20px; gap: 20px; top: 50%; }
  .fold__title { font-size: clamp(2.6rem, 13vw, 4rem); }
  .fold__lede { font-size: var(--t-15); margin-bottom: 16px; }
  .fold__steps li { padding: 8px 0; }
  .fold__terms { display: none; }

  .visit { padding: 64px 16px 24px; }
  .visit__grid { grid-template-columns: 1fr; }
  .slip { transform: none; padding: 22px 18px 18px; }
  .slip__row { grid-template-columns: 1fr; gap: 6px; }
  .where__facts { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; }
  .foot__nav { justify-content: flex-start; }

  .menu__cols { grid-template-columns: 1fr; padding-top: 32px; gap: 32px; }
}
@media (max-width: 380px) {
  .bridge__side { letter-spacing: .06em; padding: 0 8px; }
  .slipchip__t { display: none; }
}

/* ======================================================== REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .layer, [data-f], .fold__show img { transform: none !important; }
  .menu, .menu.is-open { transition: opacity 160ms ease, visibility 0s; clip-path: none; opacity: 0; }
  .menu.is-open { opacity: 1; }
  .menu__list li { opacity: 1; transform: none; transition: none; }
  .lids { display: none; }
  .exam__pick:hover, .menu__list a:hover { transform: none; }
}

/* ===================================================== EYE CHART + LENSES
   The clinic wall carries a soft eye chart. Where the two o's have grown
   into lenses, the chart reads sharp, the way it does through a trial lens. */
.chart { position: absolute; left: 0; right: 0; top: 7%; display: flex; justify-content: center; padding-left: 26%; pointer-events: none; }
.chart__rows { display: flex; flex-direction: column; align-items: center; gap: .5em; font: 650 clamp(11px, .82vw, 15px)/1 var(--sc-font-display); color: var(--sc-ink); }
.chart__rows span { font-size: calc(6.4em - var(--r) * .86em); letter-spacing: .32em; margin-right: -.32em; white-space: nowrap; }
.chart--wall { filter: blur(5px); opacity: .34; }
.lensview { position: absolute; inset: 0; opacity: 0; pointer-events: none; clip-path: circle(0 at 50% 50%); will-change: clip-path, opacity; }
.chart--sharp { opacity: 1; }
.lensview--show img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 38% 46%; transform: scale(1.16); filter: contrast(1.06) saturate(1.06); }
@media (max-width: 899px) {
  .chart { top: auto; bottom: 30%; padding-left: 44%; }
  .chart__rows { font-size: 9px; }
}

/* ================================================= THE FREDDO FRAME FINDER */
.finder__steps { list-style: none; margin: 0 0 28px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.finder__steps li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--tint); color: var(--sc-ink-soft); font: 650 var(--t-15)/1 var(--sc-font-text); transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.finder__steps span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--sc-ink); font-size: var(--t-13); }
.finder__steps li[aria-current="step"] { background: var(--sc-ink); color: #fff; }
.finder__steps li.is-done { color: var(--sc-ink); }
.finder__steps li.is-done span { background: var(--sc-ink); color: #fff; }
.finder__form { background: var(--paper); border-radius: 12px; padding: clamp(20px, 3vw, 36px); box-shadow: var(--sh-2); }
.finder__q { margin: 0 0 20px; font: 800 var(--t-28)/1.1 var(--sc-font-display); letter-spacing: -0.02em; }
.opts { border: 0; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.opts legend { width: 100%; padding: 0; margin-bottom: 12px; font: 650 var(--t-15)/1.3 var(--sc-font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.opts label { position: relative; cursor: pointer; }
.opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opts label > span {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px; border-radius: 999px;
  background: var(--sc-canvas); color: var(--sc-ink); font: 650 var(--t-18)/1.1 var(--sc-font-text);
  box-shadow: inset 0 0 0 1.5px var(--hair);
  transition: background-color 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease), transform 140ms var(--ease);
}
.opts--face label > span { flex-direction: column; justify-content: center; gap: 6px; min-height: 104px; width: 92px; padding: 10px 6px; border-radius: 14px; font-size: var(--t-15); }
.opts--face svg { width: 32px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2; }
.sw { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50% 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.sw--q { background: var(--tint); box-shadow: inset 0 0 0 1.5px var(--hair-strong); }
.opts input:checked + span { background: var(--sc-ink); color: #fff; box-shadow: none; }
.opts input:focus-visible + span { outline: 2px solid var(--sc-ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .opts label:hover > span { box-shadow: inset 0 0 0 1.5px var(--sc-ink); } .opts input:checked + span { box-shadow: none; } }
.opts label:active > span { transform: scale(.97); }
.finder__hint { margin: -4px 0 8px; font-size: var(--t-15); line-height: 1.5; color: var(--sc-ink-soft); max-width: 40rem; }
.finder__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 20px; border-top: 1px solid var(--hair); }
.finder__nav [data-finder-next] { margin-left: auto; }
.finder__need { width: 100%; margin: 0; text-align: right; font: 650 var(--t-15) var(--sc-font-text); color: var(--sc-ink); min-height: 1em; }
.btn--quiet { background: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1.5px var(--hair-strong); }
.btn--quiet::after { display: none; }
@media (hover: hover) and (pointer: fine) { .btn--quiet:hover { background: var(--tint); } }
.textlink--btn { background: none; border: 0; padding: 0; cursor: pointer; }

.finder__out { outline: none; }
.finder__profile { margin: 0 0 12px; font: 650 var(--t-18)/1.4 var(--sc-font-text); }
.finder__advice { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.finder__advice li { position: relative; padding-left: 22px; font-size: var(--t-18); line-height: 1.45; color: var(--sc-ink-soft); }
.finder__advice li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--sc-ink); }
.finder__sample { margin: 0 0 20px; padding: 12px 16px; border-radius: 8px; background: var(--tint); font-size: var(--t-15); }
.frames--freddo .frame__img { aspect-ratio: 4 / 3; display: grid; place-items: center; background: #fff; }
.frames--freddo .frame__img img { transform: none; object-fit: contain; padding: 12px; }
.frames--freddo .frame__img svg { width: 82%; height: auto; }
.frame__why { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.frame__why li { font: 650 var(--t-13)/1 var(--sc-font-text); padding: 7px 10px; border-radius: 999px; background: var(--tint); }
.frame__free { display: block; margin-top: 6px; font: 650 var(--t-15)/1.3 var(--sc-font-text); }
.frame__tag { position: absolute; left: 10px; top: 10px; z-index: 1; font: 650 var(--t-13)/1 var(--sc-font-text); padding: 6px 9px; border-radius: 999px; background: var(--sc-ink); color: #fff; }
.bring { margin: 0; padding: 0; list-style: none; }
.bring li { padding: 14px 0; border-top: 1px solid var(--hair); font-size: var(--t-18); line-height: 1.45; }
@media (max-width: 899px) {
  .opts--face label > span { width: 76px; min-height: 92px; }
  .opts label > span { min-height: 48px; padding: 0 16px; font-size: var(--t-15); }
  .finder__nav [data-finder-next] { flex: 1; }
  .finder__need { text-align: left; }
}
.frame__desc { display: block; margin-top: 6px; font-size: var(--t-15); line-height: 1.45; color: var(--sc-ink-soft); }
.frame__more { margin-top: 12px; background: none; border: 0; padding: 6px 0; cursor: pointer; color: var(--sc-ink); font: 650 var(--t-15)/1.2 var(--sc-font-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--hair-strong); }
.frame__more:hover { text-decoration-color: currentColor; }
.frame__colours { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px; border-radius: 999px; border: 0; cursor: pointer; background: var(--sc-canvas); color: var(--sc-ink); font: 650 var(--t-15)/1 var(--sc-font-text); box-shadow: inset 0 0 0 1.5px var(--hair); transition: box-shadow 160ms var(--ease), transform 140ms var(--ease); }
.chip i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.chip[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--sc-ink); }
@media (hover: hover) and (pointer: fine) { .chip:hover { box-shadow: inset 0 0 0 1.5px var(--sc-ink); } }
.chip:active { transform: scale(.96); }
.frame__lang { display: inline-flex; gap: 2px; margin-top: 10px; padding: 3px; border-radius: 999px; background: var(--tint); }
.frame__lang button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--sc-ink-soft); cursor: pointer; font: 650 var(--t-13)/1 var(--sc-font-text); transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.frame__lang button[lang="ar"] { font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; }
.frame__lang button[aria-pressed="true"] { background: #fff; color: var(--sc-ink); box-shadow: var(--sh-1); }
.frame__desc[dir="rtl"] { text-align: right; font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; line-height: 1.7; }
.frames--freddo .frame__img { position: relative; }
.frames--freddo .frame__img img { transition: opacity 260ms var(--ease); }
.frames--freddo .frame__img .frame__side { position: absolute; inset: 0; opacity: 0; }
@media (hover: hover) and (pointer: fine) { .frames--freddo .frame:hover .frame__img .frame__side { opacity: 1; } .frames--freddo .frame:hover .frame__img img:first-child { opacity: 0; } }
.finder__morewrap { margin: 28px 0 0; text-align: center; }

/* =================================== HERO v3: one wall of letters, two lenses
   The whole hero is a soft eye chart. The o's become lenses (thin rims, glass,
   sharp magnified letters inside), interlock as the OO of the logo, and the
   full Noor Eyewear logo forms around them. */
.hero__stage { background: var(--sc-canvas); }
.hero__wall { position: absolute; inset: 0; background:
  radial-gradient(70% 60% at 50% 42%, #FFFFFF 0%, rgba(255,255,255,0) 72%),
  linear-gradient(180deg, #F2F2EF 0%, #E9E8E4 100%); }
.hero .chart { top: 4vh; bottom: 4vh; padding: 0; align-items: center; }
.hero .chart__rows { font: 700 1vh/1 var(--sc-font-display); gap: 1.2vh; }
.hero .chart__rows span { font-size: calc(var(--fs) * 1vh); letter-spacing: .5em; margin-right: -.5em; }
.hero .chart__rows span:nth-child(1) { --fs: 22; } .hero .chart__rows span:nth-child(2) { --fs: 15; }
.hero .chart__rows span:nth-child(3) { --fs: 11; } .hero .chart__rows span:nth-child(4) { --fs: 8.4; }
.hero .chart__rows span:nth-child(5) { --fs: 6.6; } .hero .chart__rows span:nth-child(6) { --fs: 5.2; }
.hero .chart__rows span:nth-child(7) { --fs: 4.2; } .hero .chart__rows span:nth-child(8) { --fs: 3.4; }
.hero .chart--wall { filter: blur(6px); opacity: .28; will-change: opacity; }
.hero .lensview { inset: 0; }
.hero .lensview .chart { transform-origin: var(--lx, 50%) var(--ly, 50%); transform: scale(1.28); }
.hero__logofull { position: absolute; left: 0; top: 0; max-width: none; height: auto; opacity: 0; pointer-events: none; z-index: 3; will-change: opacity; }
.hero__half--r { color: var(--sc-ink); }
.hero__copy--r { color: var(--sc-ink); }
.hero__copy--r .hero__sub { color: var(--sc-ink-soft); }
.hero .hero__sub { color: var(--sc-ink-soft); }
.hero__open { background: rgba(26,26,26,.88); }
.bridge.in-hero .bridge__line, .bridge.in-hero .bridge__stops { opacity: 0 !important; pointer-events: none; }
.bridge__line, .bridge__stops { transition: opacity 260ms var(--ease); }
@media (max-width: 899px) {
  .hero .chart { top: 13vh; bottom: 16vh; }
  .hero .chart__rows { gap: .9vh; }
  .hero .chart__rows span { font-size: calc(var(--fs) * min(.78vh, 1.55vw)); letter-spacing: .34em; margin-right: -.34em; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__logofull { opacity: 0; }
}
/* phones: the open/closed badge gets its own row under the top pill, left-aligned with the headline,
   which starts below it. Long enough for "Closed now · opens 10 am" at any width. */
@media (max-width: 899px) {
  .hero .hero__open { top: calc(max(10px, env(safe-area-inset-top)) + 60px); bottom: auto; left: 20px; right: auto; }
  .hero .hero__half--l { top: calc(max(10px, env(safe-area-inset-top)) + 104px); }
}

/* exam rows are direct EyecareX links */
.exam__link {
  flex: 1; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "who go" "name go" "meta go";
  align-items: center; gap: 2px 16px; padding: 16px 0; color: inherit; text-decoration: none;
  transition: transform 160ms var(--ease);
}
.exam__link .exam__who { grid-area: who; } .exam__link .exam__name { grid-area: name; } .exam__link .exam__meta { grid-area: meta; }
.exam__go {
  grid-area: go; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  font: 650 var(--t-15)/1 var(--sc-font-text); background: var(--sc-ink); color: #fff;
  transition: background-color 160ms var(--ease), transform 140ms var(--ease);
}
.exam__go::after { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 11 11 3M5 3h6v6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 11 11 3M5 3h6v6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (hover: hover) and (pointer: fine) { .exam__link:hover { transform: translateX(4px); } .exam__link:hover .exam__go { background: #333331; } }
.exam__link:active .exam__go { transform: scale(.96); }
.exam.is-picked .exam__name::after { content: " · on your slip"; font: 400 var(--t-15) var(--sc-font-text); color: var(--sc-ink-soft); }


/* a soft fade behind the floating pills (top: the bridge, bottom: the visit slip), in the section's
   own ground, so text scrolling under them fades out instead of colliding. Off in the hero. */
.bridge::before, .bridge::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; pointer-events: none; transition: opacity 200ms ease; }
.bridge::before { top: 0; height: calc(78px + env(safe-area-inset-top, 0px)); background: linear-gradient(180deg, rgba(244, 244, 242, .97) 55%, rgba(244, 244, 242, 0)); }
.bridge::after { bottom: 0; height: calc(96px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(0deg, rgba(244, 244, 242, .97) 50%, rgba(244, 244, 242, 0)); }
.bridge.is-night::before { background: linear-gradient(180deg, rgba(20, 20, 19, .97) 55%, rgba(20, 20, 19, 0)); }
.bridge.is-night::after { background: linear-gradient(0deg, rgba(20, 20, 19, .97) 50%, rgba(20, 20, 19, 0)); }
.bridge.in-hero::before, .bridge.hero-low::after { opacity: 0; }

/* ================================================ performance + touch (2026-10-21)
   1. The two pinned acts get their scroll length from scrollcraft.js (data-sc-span x 100vh).
      Reserve the same height in CSS, so a first paint before the scripts have run doesn't
      jump everything below the hero by two screens (CLS was 1.0 on desktop).
      Reduced motion keeps the default: home3.js shortens the pins to one screen there. */
@media (prefers-reduced-motion: no-preference) {
  .hero[data-sc-span="2.8"] { min-height: 280vh; }
  .fold[data-sc-span="2.6"] { min-height: 260vh; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  .hero[data-sc-span-m="1.9"] { min-height: 190vh; }
  .fold[data-sc-span-m="2"] { min-height: 200vh; }
}
/* Before scrollcraft adds .sc-stage the stages were static boxes, so the 609px logo and the
   oversized fold photo escaped them and widened the page on phones (the browser zoomed
   out until the scripts ran), and everything moved when the engine mounted. Give them
   the engine's stage box from the first paint. */
.hero__stage:not(.sc-stage), .fold__stage:not(.sc-stage) { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; z-index: var(--sc-z-stage); }
/* Keyboard focus stays visible on the night ground (the ink ring vanished on #141413). */
.bridge.is-night :focus-visible, .fold :focus-visible { outline-color: #fff; }
/* Touch screens: a tap must not leave a hover look stuck on. */
@media (hover: none) {
  .foot__nav a:hover, .foot__small a:hover { color: #D9D9D5; text-decoration: none; }
  .menu__close:hover { background: var(--tint); }
}
/* 2. Phones: the rings keep their 38px pill but take a 44px tap. */
@media (max-width: 899px) {
  .rings { position: relative; }
  .rings::after { content: ""; position: absolute; left: 0; right: 0; top: -3px; bottom: -3px; }
}

/* short screens: the hero copy sits above the "Your visit / Book" bar (about 56px tall, 16-20px up),
   so its own buttons never hide behind it */
@media (min-width: 900px) {
  .hero__copy { bottom: max(9svh, 92px); }
  .hero__half { bottom: calc(max(9svh, 92px) + 182px); }
}
/* very short desktop or tablet windows: the bar carries the booking, the hero keeps only the words */
@media (min-width: 900px) and (max-height: 560px) {
  .hero__copy .btn, .hero__copy .textlink { display: none; }
  .hero__copy { bottom: 92px; }
  .hero__half { bottom: calc(92px + 128px); font-size: clamp(2.6rem, 9svh + 1rem, 4.5rem); }
}
/* phones held sideways: the portrait stack doesn't fit in ~390px of height,
   so the two halves go back to their own sides, like the desktop split */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 520px) {
  .hero .hero__open { top: calc(max(10px, env(safe-area-inset-top)) + 58px); left: auto; right: max(20px, env(safe-area-inset-right)); }
  .hero__half { font-size: clamp(2.2rem, 11svh, 3.2rem); }
  .hero .hero__half--l { top: calc(max(10px, env(safe-area-inset-top)) + 100px); left: max(20px, env(safe-area-inset-left)); }
  .hero .hero__half--r { top: calc(max(10px, env(safe-area-inset-top)) + 100px); bottom: auto; left: auto; right: max(20px, env(safe-area-inset-right)); text-align: right; }
  .hero .hero__copy { width: min(19rem, 40vw); top: auto; bottom: 84px; }
  .hero .hero__copy--l { left: max(20px, env(safe-area-inset-left)); right: auto; }
  .hero .hero__copy--r { left: auto; right: max(20px, env(safe-area-inset-right)); text-align: right; }
  .hero .hero__copy--r .hero__sub { margin-left: auto; }
  .hero .hero__sub { font-size: 1rem; line-height: 1.4; }
}

/* "Eye exams start November 1": shown until that day (stay.js hides any [data-until] once it has passed) */
.opening { display: flex; gap: 10px; align-items: baseline; margin: 0 0 20px; padding: 12px 16px; border-radius: 12px; background: #F1EFEA; color: #1A1A1A; font-size: .9375rem; line-height: 1.5; max-width: 34rem; }
.opening::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #1A1A1A; transform: translateY(-1px); }
.opening[hidden] { display: none; }