/* ==========================================================================
   Noor Eyewear: brand layer on top of scrollcraft.css
   Palette: Nile green + bone + persimmon (client choice, 2026-09-25).
   Type: Archivo (display, expanded) + Newsreader (text). Two families.
   Grounds are hard cuts (chaptered editorial): every section declares its
   own ground class and restates `color`, because an inherited colour does
   not follow a token redefined on a subtree.
   ========================================================================== */

:root {
  --bone: #ECE9E1;
  --bone-deep: #E1DDD2;
  --paper: #F5F3EE;
  --nile: #113C35;
  --nile-deep: #0B2924;
  --nile-raised: #174A41;
  --ink-green: #12201C;
  --ink-green-soft: #46554F;
  --pers: #B03F18;         /* persimmon, text-safe on bone (7.2:1) */
  --pers-press: #933313;
  --pers-night: #FF8B57;   /* persimmon on Nile (5.2:1) */
  --logo-ink: #111;

  --sc-canvas: var(--bone);
  --sc-surface: var(--paper);
  --sc-ink: var(--ink-green);
  --sc-ink-soft: var(--ink-green-soft);
  --sc-accent: var(--pers);
  --sc-accent-ink: #FBF8F2;
  --sc-hairline: rgba(18, 32, 28, 0.14);
  --sc-hairline-strong: rgba(18, 32, 28, 0.28);

  --sc-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sc-font-text: "Newsreader", Georgia, "Times New Roman", serif;
  --sc-font-mono: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* light canvas: halve the alphas, tint toward the ground */
  --sc-shadow-color: 160 35% 10%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.10), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.08);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.10), 0 10px 22px -6px hsl(var(--sc-shadow-color) / 0.16);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.10), 0 22px 44px -10px hsl(var(--sc-shadow-color) / 0.22), 0 50px 90px -30px hsl(var(--sc-shadow-color) / 0.18);
  --sc-edge: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  --radius: 3px;             /* one radius for every UI surface: print, not app */
  --wdth-display: 112;
  --chrome-h: 64px;
}

[hidden] { display: none !important; }
body { background: var(--bone); color: var(--ink-green); font-size: clamp(1.06rem, 1rem + 0.25vw, 1.2rem); }
.sc-grain { opacity: 0.05; mix-blend-mode: multiply; z-index: 40; }

/* ---------------------------------------------------------------- grounds */
.g-bone      { background: var(--bone); }
.g-bone-deep { background: var(--bone-deep); }
.g-paper     { background: var(--paper); }
.g-bone, .g-bone-deep, .g-paper {
  --sc-ink: var(--ink-green); --sc-ink-soft: var(--ink-green-soft);
  --sc-accent: var(--pers); --sc-accent-ink: #FBF8F2;
  --sc-hairline: rgba(18, 32, 28, 0.14); --sc-hairline-strong: rgba(18, 32, 28, 0.28);
  --sc-surface: var(--paper);
  color: var(--sc-ink);
}
.g-nile      { background: var(--nile); }
.g-nile-deep { background: var(--nile-deep); }
.g-nile, .g-nile-deep {
  --sc-ink: #ECE9E1; --sc-ink-soft: #A9BCB5;
  --sc-accent: var(--pers-night); --sc-accent-ink: #0B2924;
  --sc-hairline: rgba(236, 233, 225, 0.16); --sc-hairline-strong: rgba(236, 233, 225, 0.32);
  --sc-surface: var(--nile-raised);
  --sc-edge: inset 0 1px 0 rgba(236, 233, 225, 0.08);
  --sc-shadow-color: 168 60% 4%;
  color: var(--sc-ink);
  letter-spacing: 0.004em;   /* light-on-dark compensation */
}
/* the engine's pinned stage needs its own ground, or it shows the body */
[class*="g-"] > [data-sc-stage] { background: inherit; }

/* ------------------------------------------------------------- typography */
.sc-display, .display {
  font-family: var(--sc-font-display);
  font-variation-settings: "wdth" var(--wdth-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin: 0;
}
.display--xl { font-size: clamp(3rem, 1.6rem + 5.6vw, 7rem); }
.display--lg { font-size: clamp(2.4rem, 1.4rem + 4vw, 5rem); }
.display--md { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3.1rem); letter-spacing: -0.028em; }
.display--sm { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem); letter-spacing: -0.02em; line-height: 1.1; }
.lede { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem); line-height: 1.45; max-width: 40ch; text-wrap: pretty; margin: 0; }
.prose { max-width: 60ch; text-wrap: pretty; }
.prose p { margin: 0 0 1em; }
.prose p:last-child { margin-bottom: 0; }
.soft { color: var(--sc-ink-soft); }
.label {
  font-family: var(--sc-font-display);
  font-variation-settings: "wdth" 100;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.ui { font-family: var(--sc-font-display); font-variation-settings: "wdth" 100; letter-spacing: 0; }
em, i { font-style: italic; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-color: var(--sc-accent); }
.accent { color: var(--sc-accent); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 200; background: var(--ink-green); color: var(--bone); padding: 0.6rem 1rem; border-radius: var(--radius); font-family: var(--sc-font-display); }
.skip:focus { top: 1rem; }

/* Eye-chart intertitle: three rows stepping down like a Snellen chart.
   Real heading text; the acuity marks in the margin are decorative. */
.chart-title { display: grid; gap: 0.2em; margin: 0 0 var(--sc-8); }
.chart-title__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; border-bottom: 1px solid var(--sc-hairline); padding-bottom: 0.18em; }
.chart-title__row > span:first-child { font-family: var(--sc-font-display); font-variation-settings: "wdth" 125; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; }
.chart-title__row--1 > span:first-child { font-size: clamp(3.2rem, 2rem + 6vw, 8.5rem); letter-spacing: -0.01em; }
.chart-title__row--2 > span:first-child { font-size: clamp(1.4rem, 1rem + 1.8vw, 2.6rem); letter-spacing: 0.14em; }
.chart-title__row--3 > span:first-child { font-family: var(--sc-font-text); font-variation-settings: normal; text-transform: none; font-weight: 400; font-style: italic; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); letter-spacing: 0; }
.chart-title__mark { font-family: var(--sc-font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; color: var(--sc-ink-soft); white-space: nowrap; }
@media (max-width: 520px) { .chart-title__row--1 > span:first-child { font-size: clamp(2.2rem, 0.6rem + 9vw, 3.2rem); } .chart-title__row > span:first-child { min-width: 0; overflow-wrap: anywhere; } }

/* ------------------------------------------------------------- controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  font-family: var(--sc-font-display); font-variation-settings: "wdth" 100;
  font-size: 0.98rem; font-weight: 650; letter-spacing: 0.005em; line-height: 1;
  padding: 0.95rem 1.35rem; min-height: 48px;
  border-radius: var(--radius); border: 1px solid transparent;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: var(--sc-e1); position: relative;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms ease, opacity 160ms ease;
}
/* hover depth lives on a pre-rendered shadow layer whose opacity fades (GPU), not an animated box-shadow */
.btn::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: var(--sc-e2); opacity: 0; pointer-events: none; transition: opacity 160ms var(--sc-ease-out); }
.btn--ghost::after { content: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
  .btn:hover::after { opacity: 1; }
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn:active::after { opacity: 0; }
.g-bone .btn:not(.btn--ghost):hover, .g-bone-deep .btn:not(.btn--ghost):hover, .g-paper .btn:not(.btn--ghost):hover, .panel .btn:not(.btn--ghost):hover { background: var(--pers-press); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.42; cursor: not-allowed; transform: none; box-shadow: none; }
.btn--ghost { background: transparent; color: var(--sc-ink); border-color: var(--sc-hairline-strong); box-shadow: none; }
.btn--ghost:hover { border-color: var(--sc-ink); }
.btn--small { min-height: 40px; padding: 0.7rem 1rem; font-size: 0.9rem; }
.btn--block { width: 100%; }
.textlink { font-family: var(--sc-font-display); font-variation-settings: "wdth" 100; font-weight: 600; font-size: 0.98rem; text-decoration: underline; text-decoration-color: var(--sc-accent); text-decoration-thickness: 2px; text-underline-offset: 0.3em; transition: color 140ms var(--sc-ease-out); }
.textlink:hover { color: var(--sc-accent); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: var(--radius); }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.55rem 0.95rem;
  font-family: var(--sc-font-display); font-variation-settings: "wdth" 100; font-weight: 550; font-size: 0.95rem;
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--radius);
  background: transparent; color: var(--sc-ink);
  transition: background-color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.chip:hover span { border-color: var(--sc-ink); }
.chip input:active + span { transform: scale(0.97); }
.chip input:checked + span { background: var(--sc-ink); color: var(--sc-canvas, var(--bone)); border-color: var(--sc-ink); }
.g-nile .chip input:checked + span, .g-nile-deep .chip input:checked + span { color: #FBF8F2; }
.chip input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.chip input:disabled + span { opacity: 0.4; }

.field { display: grid; gap: 0.4rem; }
.field label, .field .field__label { font-family: var(--sc-font-display); font-variation-settings: "wdth" 100; font-size: 0.86rem; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 0.75rem 0.9rem;
  font-family: var(--sc-font-text); font-size: 1.05rem;
  background: var(--paper); color: var(--ink-green);
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--radius);
  transition: border-color 140ms var(--sc-ease-out);
}
.g-nile .field input, .g-nile-deep .field input { background: rgba(251, 249, 244, 0.6); color: #12201C; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--sc-ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 1px; }
.field__hint { font-size: 0.9rem; color: var(--sc-ink-soft); }
.field input[aria-invalid="true"] { border-color: var(--sc-accent); }

.status-pill { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--sc-font-display); font-variation-settings: "wdth" 100; font-size: 0.8rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.4rem 0.7rem; border: 1px dashed var(--sc-hairline-strong); border-radius: var(--radius); color: var(--sc-ink-soft); }

/* Photo slot: honest placeholder for the client's own photography.
   Drop a file at the listed path and swap the <div> for an <img>. */
.photo-slot {
  position: relative; display: grid; place-items: center; text-align: center;
  aspect-ratio: var(--ar, 4 / 5); width: 100%;
  border: 1px dashed var(--sc-hairline-strong); border-radius: var(--radius);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in oklab, var(--sc-ink) 4%, transparent) 14px 15px),
    color-mix(in oklab, var(--sc-ink) 3%, transparent);
  color: var(--sc-ink-soft); padding: var(--sc-5);
}
.photo-slot__text { font-family: var(--sc-font-display); font-variation-settings: "wdth" 100; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1.5; }
.photo-slot__text code { font-family: inherit; font-weight: 500; letter-spacing: 0; text-transform: none; opacity: 0.8; }
figure { margin: 0; }
figcaption { margin-top: var(--sc-3); font-size: 0.92rem; color: var(--sc-ink-soft); font-style: italic; }

/* --------------------------------------------------------------- chrome */
.mark {
  position: fixed; z-index: 70; top: 12px; left: calc(var(--sc-gutter) - 8px);
  display: flex; align-items: center; gap: 0.6rem; text-decoration: none;
  transition: opacity 240ms var(--sc-ease-out);
}
.mark { padding: 7px 8px; border-radius: var(--radius); background: color-mix(in oklab, var(--bone) 84%, transparent); }
html[data-ground="nile"] .mark { background: color-mix(in oklab, var(--nile) 84%, transparent); }
.mark img { width: 40px; height: auto; }
html[data-ground="nile"] .mark img { filter: invert(1) brightness(0.93) sepia(0.12); }
html[data-hero="1"] .mark { opacity: 0; pointer-events: none; }

.folio {
  position: fixed; z-index: 65; left: calc(var(--sc-gutter) / 2 - 0.5rem); top: 50%;
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  font-family: var(--sc-font-display); font-variation-settings: "wdth" 100;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-green-soft); white-space: nowrap; pointer-events: none;
  transition: color 240ms var(--sc-ease-out), opacity 240ms var(--sc-ease-out);
}
.folio b { color: var(--ink-green); font-weight: 700; }
html[data-ground="nile"] .folio { color: #A9BCB5; }
html[data-folio-hide="1"] .folio { opacity: 0; }
.rings text { font: 700 11px var(--sc-font-display); letter-spacing: 0.14em; }
.rings__label--noor { fill: #3D4A45; }
.rings__label--you { fill: #B03F18; }
html[data-ground="nile"] .folio b { color: #ECE9E1; }

.corner {
  position: fixed; z-index: 70; top: 14px; right: var(--sc-gutter);
  display: flex; align-items: center; gap: 0.5rem;
}
.corner .btn--ghost { background: color-mix(in oklab, var(--bone) 82%, transparent); color: var(--ink-green); border-color: rgba(18,32,28,.28); }
html[data-ground="nile"] .corner .btn--ghost { background: color-mix(in oklab, var(--nile) 82%, transparent); color: #ECE9E1; border-color: rgba(236,233,225,.32); }
.corner .btn:not(.btn--ghost) { background: var(--pers); color: #FBF8F2; }
html[data-ground="nile"] .corner .btn:not(.btn--ghost) { background: var(--pers-night); color: var(--nile-deep); }

.dock { position: fixed; z-index: 75; right: var(--sc-gutter); bottom: 20px; display: flex; gap: 0.6rem; }
.dock__btn {
  position: relative; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--green-deep); color: #ECE9E1; border: 1px solid rgba(236,233,225,.18);
  box-shadow: 0 2px 4px rgba(6,24,20,.18), 0 14px 30px -10px rgba(6,24,20,.45);
  transition: transform 150ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .dock__btn:hover { transform: translateY(-2px); background: var(--green); } }
.dock__btn:active { transform: scale(0.95); }
.dock__btn svg { width: 24px; height: 24px; }
.dock__count {
  position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 11px; background: var(--pers-night); color: #0B2924;
  font: 700 0.75rem/22px var(--sc-font-display); text-align: center;
}
.dock__count[data-n="0"] { display: none; }

/* ----------------------------------------------- overlays: index, drawer, modal, chat */
.overlay { position: fixed; inset: 0; z-index: 120; display: none; }
.overlay[data-open="true"] { display: block; }
.overlay__backdrop { position: absolute; inset: 0; background: rgba(6, 24, 20, 0.5); transition: opacity 200ms var(--sc-ease-out); }
/* Entrances are transitions from @starting-style (interruptible, unlike keyframes).
   Exits snap: closing is the user's decision and should feel instant. */
@starting-style {
  .overlay[data-open="true"] .overlay__backdrop { opacity: 0; }
  .overlay[data-open="true"] .index-panel { opacity: 0; }
  .overlay[data-open="true"] .drawer { transform: translate3d(100%, 0, 0); }
  .overlay[data-open="true"] .modal { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.98); }
  .chat[data-open="true"] { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.96); }
}

.index-panel {
  position: absolute; inset: 0; overflow-y: auto;
  padding: calc(var(--chrome-h) + var(--sc-6)) var(--sc-gutter) var(--sc-8);
  transition: opacity 200ms var(--sc-ease-out);
}
.index-panel__grid { display: grid; gap: var(--sc-8); grid-template-columns: 1fr; max-width: var(--sc-maxw); margin: 0 auto; }
@media (min-width: 900px) { .index-panel__grid { grid-template-columns: 1.3fr 1fr; } }
.index-list { list-style: none; margin: 0; padding: 0; counter-reset: ch; }
.index-list li { border-bottom: 1px solid var(--sc-hairline); }
.index-list a { display: flex; align-items: baseline; gap: 1rem; padding: 0.8rem 0; text-decoration: none; font-family: var(--sc-font-display); font-variation-settings: "wdth" 112; font-weight: 700; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); letter-spacing: -0.02em; transition: color 140ms var(--sc-ease-out), transform 160ms var(--sc-ease-out); }
.index-list a small { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; color: var(--sc-ink-soft); min-width: 2.4rem; }
.index-list a:hover { color: var(--sc-accent); }
@media (hover: hover) and (pointer: fine) { .index-list a:hover { transform: translateX(4px); } }
.index-close { position: absolute; top: 14px; right: var(--sc-gutter); }

.drawer {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(100%, 460px);
  display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink-green);
  box-shadow: -20px 0 60px -20px rgba(6,24,20,.4);
  transition: transform 320ms var(--sc-ease-drawer);
}
.drawer__head, .drawer__foot { padding: var(--sc-5) var(--sc-6); border-bottom: 1px solid var(--sc-hairline); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.drawer__foot { border-bottom: 0; border-top: 1px solid var(--sc-hairline); display: grid; gap: var(--sc-3); }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--sc-5) var(--sc-6); display: grid; gap: var(--sc-4); align-content: start; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius); border: 1px solid transparent; background: transparent; cursor: pointer; transition: border-color 140ms, transform 120ms; }
.icon-btn:hover { border-color: var(--sc-hairline-strong); }
.icon-btn:active { transform: scale(0.95); }
.icon-btn svg { width: 20px; height: 20px; }

.line-item { display: grid; grid-template-columns: 84px 1fr auto; gap: var(--sc-4); align-items: start; padding-bottom: var(--sc-4); border-bottom: 1px solid var(--sc-hairline); }
.line-item__art { background: var(--bone); border-radius: var(--radius); padding: 6px; }
.line-item h3 { margin: 0 0 0.2rem; font: 650 1rem/1.25 var(--sc-font-display); font-variation-settings: "wdth" 100; }
.line-item p { margin: 0; font-size: 0.95rem; color: var(--ink-green-soft); }

.modal-wrap { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--sc-4); pointer-events: none; }
.modal {
  pointer-events: auto; width: min(100%, 620px); max-height: min(92svh, 860px); overflow-y: auto;
  background: var(--paper); color: var(--ink-green); border-radius: var(--radius);
  box-shadow: var(--sc-e3); transition: opacity 240ms var(--sc-ease-out), transform 240ms var(--sc-ease-out);
}
.modal__head { position: sticky; top: 0; z-index: 1; background: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: var(--sc-5) var(--sc-6); border-bottom: 1px solid var(--sc-hairline); }
.modal__body { padding: var(--sc-6); display: grid; gap: var(--sc-6); }
.modal__art { background: var(--bone); border-radius: var(--radius); padding: var(--sc-5) var(--sc-7); }
.swatches { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.swatch { position: relative; }
.swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch span { display: block; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(18,32,28,.25); box-shadow: inset 0 0 0 3px var(--paper); transition: transform 120ms var(--sc-ease-out); }
.swatch input:checked + span { outline: 2px solid var(--ink-green); outline-offset: 2px; }
.swatch input:focus-visible + span { outline: 2px solid var(--pers); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .swatch:hover span { transform: scale(1.06); } }
.swatch input:active + span { transform: scale(0.95); }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--sc-hairline-strong); border-radius: var(--radius); }
.stepper button { width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; font-size: 1.2rem; }
.stepper button:hover { background: rgba(18,32,28,.06); }
.stepper output { min-width: 2.4rem; text-align: center; font: 650 1rem var(--sc-font-display); }
.fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.fieldset legend { padding: 0; margin-bottom: 0.6rem; font: 650 0.9rem var(--sc-font-display); font-variation-settings: "wdth" 100; }

.chat {
  position: fixed; z-index: 110; right: var(--sc-gutter); bottom: 86px;
  width: min(calc(100vw - 2rem), 400px); height: min(72svh, 600px);
  display: none; flex-direction: column; overflow: hidden;
  background: var(--paper); color: var(--ink-green); border-radius: var(--radius);
  box-shadow: var(--sc-e3); border: 1px solid var(--sc-hairline);
  transform-origin: 100% 100%;   /* anchored to the dock button below-right */
  transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out);
}
.chat[data-open="true"] { display: flex; }
.chat__head { background: var(--green-deep); color: #ECE9E1; padding: var(--sc-4) var(--sc-5); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.chat__head p { margin: 0; }
.chat__title { font: 700 1.05rem/1.2 var(--sc-font-display); font-variation-settings: "wdth" 108; }
.chat__sub { font-size: 0.85rem; color: #A9BCB5; }
.chat__head .icon-btn { color: #ECE9E1; }
.chat__head .icon-btn:hover { border-color: rgba(236,233,225,.3); }
.chat__log { flex: 1; overflow-y: auto; padding: var(--sc-4); display: grid; gap: var(--sc-3); align-content: start; }
.msg { max-width: 86%; padding: 0.65rem 0.9rem; border-radius: var(--radius); font-size: 0.98rem; line-height: 1.45; white-space: pre-line; }
.msg--bot { background: var(--bone); justify-self: start; }
.msg--user { background: var(--green); color: #ECE9E1; justify-self: end; }
.chat__controls { padding: var(--sc-3) var(--sc-4) var(--sc-4); border-top: 1px solid var(--sc-hairline); display: grid; gap: 0.5rem; max-height: 50%; overflow-y: auto; }
.chat__controls .chips { gap: 0.4rem; }
.chat__controls .btn { min-height: 42px; }
.chat-form { display: flex; gap: 0.5rem; }
.chat-form input { flex: 1; min-height: 44px; padding: 0.6rem 0.8rem; border: 1px solid var(--sc-hairline-strong); border-radius: var(--radius); background: #fff; font: 1rem var(--sc-font-text); }
.qr { min-height: 40px; padding: 0.5rem 0.8rem; border: 1px solid var(--sc-hairline-strong); border-radius: var(--radius); background: transparent; cursor: pointer; font: 600 0.9rem var(--sc-font-display); font-variation-settings: "wdth" 100; transition: border-color 140ms, background-color 140ms, transform 120ms; }
.qr:hover { border-color: var(--ink-green); background: rgba(18,32,28,.04); }
.qr:active { transform: scale(0.97); }

/* ------------------------------------------------------ frame illustration */
.frame-art { width: 100%; height: auto; overflow: visible; }
.frame-art .rim { fill: none; stroke: currentColor; stroke-linejoin: round; stroke-linecap: round; }
.frame-art .glass { fill: currentColor; opacity: 0.06; }
.frame-art .glass--tint { opacity: 0.55; }

/* --------------------------------------------------------------- colophon */
.colophon { padding: var(--sc-10) max(var(--sc-gutter), calc((100% - var(--sc-maxw)) / 2 + var(--sc-gutter))) var(--sc-7); }
.colophon__inner { display: grid; gap: var(--sc-8); }
.colophon__logo { width: min(200px, 50vw); height: auto; }
.colophon__text { max-width: 44ch; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); line-height: 1.5; margin: 0; text-wrap: pretty; }
.colophon__text a { text-decoration-color: var(--sc-accent); text-decoration-thickness: 2px; }
.colophon__small { display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-6); font-family: var(--sc-font-display); font-variation-settings: "wdth" 100; font-size: 0.85rem; color: var(--sc-ink-soft); border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-5); }
.colophon__small a { text-decoration: none; }
.colophon__small a:hover { text-decoration: underline; color: var(--sc-ink); }
.colophon__small nav { display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-5); }

/* ----------------------------------------------------------- interior pages */
.page-head, .page-body { --pad-x: max(var(--sc-gutter), calc((100% - var(--sc-maxw)) / 2 + var(--sc-gutter))); }
.page-head { padding: calc(var(--chrome-h) + var(--sc-9)) var(--pad-x) var(--sc-8); }
.page-body { padding: 0 var(--pad-x) var(--sc-10); }
.spread { display: grid; gap: var(--sc-8); grid-template-columns: 1fr; }
@media (min-width: 960px) { .spread { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-9); } .spread--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.qa { border-top: 1px solid var(--sc-hairline); padding: var(--sc-6) 0; display: grid; gap: var(--sc-3); }
.qa h2, .qa h3 { margin: 0; font: 700 clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem)/1.2 var(--sc-font-display); font-variation-settings: "wdth" 106; letter-spacing: -0.015em; }
.qa p { margin: 0; max-width: 62ch; }
.note { font-size: 0.95rem; color: var(--sc-ink-soft); border-left: 1px solid var(--sc-hairline-strong); padding-left: var(--sc-4); max-width: 60ch; }

/* ------------------------------------------------ World Sight Day pledge */
  .wsd__copy { display: grid; gap: var(--sc-4); align-content: center; max-width: 40rem; }
  .wsd__copy h2 { margin: var(--sc-2) 0 var(--sc-3); }
  .wsd__copy p { margin: 0; }
  .wsd__copy .sc-body { max-width: 52ch; }

  .pledge-form { display: grid; gap: var(--sc-4); margin-top: var(--sc-3); }
  .pledge-form .field { max-width: 22rem; }
  .pledge__status { min-height: 1.5em; margin: 0; font-style: italic; color: var(--sc-ink-soft); }
  .pledge__result { display: grid; grid-template-columns: 110px 1fr; gap: var(--sc-5); align-items: center; }
  .pledge__result[hidden] { display: none; }
  .pledge__result img { width: 110px; height: auto; border-radius: var(--radius); box-shadow: var(--sc-e2); }
  .pledge__buttons { display: flex; flex-wrap: wrap; gap: var(--sc-3); }
  .wsd__rings { position: relative; display: grid; place-items: center; }
  .rings { width: min(100%, 560px); height: auto; overflow: visible; }
  .rings__noor { fill: var(--green); stroke: #FFFFFF; stroke-width: 5; paint-order: stroke; }
  .rings__you path { fill: #C8552B; stroke: #FFFFFF; stroke-width: 5; paint-order: stroke; }
  .rings__over { opacity: 0; }
  /* the one earned flourish on the site: the ring swings in with a slight overshoot */
  .is-locked .rings__you { transition: transform 950ms cubic-bezier(0.34, 1.32, 0.5, 1); }
  .is-interlocked .rings__over { opacity: 1; transition: opacity 90ms ease-out; }
  .pledge__result { transition: opacity 240ms var(--sc-ease-out), transform 240ms var(--sc-ease-out); }
  @starting-style { .pledge__result:not([hidden]) { opacity: 0; transform: translate3d(0, 8px, 0); } }
  .rings-caption { display: flex; justify-content: space-between; width: min(100%, 560px); margin-top: var(--sc-4); font: 600 0.78rem var(--sc-font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
  .rings-caption b { color: #B03F18; font-weight: 650; }

@media (max-width: 860px) {
  .rings { width: min(58vw, 300px); margin-right: 14vw; }
}
@media (prefers-reduced-motion: reduce) { .rings__you, .is-locked .rings__you { transition: none; } }

/* ------------------------------------------------------------------ mobile */
@media (max-width: 860px) {
  :root { --chrome-h: 60px; }
  .folio { display: none; }
  .mark { top: 10px; }
  .mark img { width: 36px; }
  .corner { top: 10px; }
  .corner .btn { min-height: 40px; padding: .6rem .8rem; font-size: .85rem; }
  .dock { bottom: 14px; }
  .dock__btn { width: 52px; height: 52px; }
  .chat { right: 0.75rem; left: 0.75rem; width: auto; bottom: 78px; height: min(76svh, 620px); }
}
/* Reduced motion: fewer and gentler, not zero. Movement goes; short fades stay. */
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active, .dock__btn:hover, .dock__btn:active, .icon-btn:active, .qr:active,
  .chip input:active + span, .swatch span, .social:hover, .index-list a:hover { transform: none !important; }
  @starting-style {
    .overlay[data-open="true"] .drawer, .overlay[data-open="true"] .modal, .chat[data-open="true"], .pledge__result:not([hidden]) { transform: none; }
  }
}

/* ------------------------------------------------------------ socials */
.socials { display: flex; gap: var(--sc-3); }
.social { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--sc-hairline-strong); color: var(--sc-ink);
  transition: transform 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out); }
.social:hover { border-color: var(--sc-accent); }
@media (hover: hover) and (pointer: fine) { .social:hover { transform: translateY(-2px); } }
.social svg { width: 20px; height: 20px; }
.socials[hidden] { display: none; }

/* -------------------------------------------- prescription-pad stationery
   The visitor's own "documents" (Freddo slip, visit request, Sight promise)
   share one look: a mid-century Rx pad. Ruled paper, a perforated top edge,
   the ℞ mark, and a carbon-blue tint on the margin rule. */
.rx-pad {
  --sc-ink: var(--ink-green); --sc-ink-soft: var(--ink-green-soft); --sc-accent: var(--pers); --sc-accent-ink: #FBF8F2;
  --sc-hairline: rgba(18, 32, 28, .14); --sc-hairline-strong: rgba(18, 32, 28, .28);
  position: relative; color: var(--ink-green);
  padding: calc(var(--sc-6) + 10px) var(--sc-6) var(--sc-6) calc(var(--sc-6) + 14px);
  border-radius: 2px 2px var(--radius) var(--radius);
  background:
    linear-gradient(90deg, transparent calc(var(--sc-6) - 2px), rgba(60, 90, 160, .22) calc(var(--sc-6) - 2px), rgba(60, 90, 160, .22) calc(var(--sc-6) - 1px), transparent calc(var(--sc-6) - 1px)),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(60, 90, 160, .09) 31px 32px),
    #FBF9F3;
  box-shadow: 0 1px 2px rgba(20, 30, 25, .12), 0 16px 34px -14px rgba(20, 30, 25, .35), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.rx-pad::before { content: "\211E"; position: absolute; top: 14px; right: 18px; font: 400 2.1rem/1 var(--sc-font-text); font-style: italic; color: var(--pers); opacity: .55; }
.rx-pad::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px;
  background: radial-gradient(circle at 6px -1px, var(--perf, var(--bone)) 3.5px, transparent 4px) 0 0 / 12px 8px repeat-x; }
.g-nile .rx-pad, .g-nile-deep .rx-pad { --perf: var(--nile); }
.g-bone-deep .rx-pad { --perf: var(--bone-deep); }
.rx-pad .field input, .rx-pad .field select, .rx-pad .field textarea { background: #fff; color: var(--ink-green); border-color: rgba(18, 32, 28, .28); }
.rx-pad .chip input:checked + span { color: #FBF9F3; }
.rx-pad .chip span { color: var(--ink-green); border-color: rgba(18, 32, 28, .28); }
.rx-pad .pledge__status, .rx-pad .soft { color: var(--ink-green-soft); }
.rx-pad .btn:not(.btn--ghost) { background: var(--pers); color: #FBF8F2; }
.rx-pad .btn--ghost { color: var(--ink-green); border-color: rgba(18, 32, 28, .28); }
.slip.rx-pad { padding-top: calc(var(--sc-5) + 10px); }

/* --------------------------------------------------------- main nav links */
.corner__links { display: none; }
@media (min-width: 1100px) {
  .corner__links { display: flex; align-items: center; gap: .1rem; padding: .25rem; border-radius: 999px; margin-right: .35rem;
    background: color-mix(in oklab, var(--bone) 84%, transparent); border: 1px solid rgba(18,32,28,.12);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  html[data-ground="nile"] .corner__links { background: color-mix(in oklab, var(--nile) 84%, transparent); border-color: rgba(236,233,225,.18); }
  .corner__links a { padding: .45rem .8rem; border-radius: 999px; text-decoration: none; font: 600 .88rem var(--sc-font-display); color: var(--ink-green); transition: background-color 140ms ease, color 140ms ease; }
  html[data-ground="nile"] .corner__links a { color: #ECE9E1; }
  .corner__links a:hover { background: rgba(18,32,28,.08); }
  html[data-ground="nile"] .corner__links a:hover { background: rgba(236,233,225,.12); }
  .corner__links a[aria-current="page"] { background: var(--ink-green); color: var(--bone); }
  html[data-ground="nile"] .corner__links a[aria-current="page"] { background: #ECE9E1; color: var(--nile-deep); }
}

/* ----------------------------------------------------------- location map */
.map { position: relative; display: grid; border-radius: var(--radius); overflow: hidden; background: rgba(255,255,255,.55); color: #12201C; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--sc-e2); margin: var(--sc-4) 0 var(--sc-5); }
.map__stage { position: relative; display: grid; aspect-ratio: 16 / 11; }
@media (max-width: 600px) { .map__stage { aspect-ratio: 4 / 5; } }
.map__card, .map__live { grid-area: 1 / 1; width: 100%; height: 100%; }
.map__card { position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(236,233,225,.05) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(236,233,225,.05) 0 1px, transparent 1px 46px),
    radial-gradient(60% 70% at 55% 45%, #1A5247 0%, #0B2924 80%); }
.map__road { position: absolute; background: rgba(236,233,225,.16); }
.map__road--h { left: -5%; right: -5%; top: 48%; height: 14px; transform: rotate(-3deg); font: 700 9px/14px var(--sc-font-display); letter-spacing: .4em; color: rgba(236,233,225,.55); padding-left: 12%; }
.map__road--v { top: -5%; bottom: -5%; left: 30%; width: 6px; transform: rotate(4deg); }
.map__road--v2 { top: -5%; bottom: -5%; left: 72%; width: 6px; transform: rotate(4deg); }
/* the Noor mark (interlocked rings from the logo), recoloured with a mask */
.noor-mark { display: block; width: 100%; height: 100%; background: currentColor;
  -webkit-mask: url(../images/icon-mark-black.png) center / contain no-repeat; mask: url(../images/icon-mark-black.png) center / contain no-repeat; }
.map__pin, .map-pin span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50% 50% 50% 0; rotate: -45deg; background: #FF8B57; color: #0B2924;
  border: 3px solid #FBF9F4; box-shadow: 0 10px 22px -8px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.25); }
.map__pin { position: absolute; left: 54%; top: 47%; translate: -50% -100%; }
.map__pin .noor-mark, .map-pin .noor-mark { width: 30px; height: 19px; rotate: 45deg; }
/* the live map sits on top and fades in once its first tiles land */
.map__live { position: relative; z-index: 1; opacity: 0; transition: opacity 400ms ease; background: #E9E6DF; }
.map[data-live] .map__live { opacity: 1; }
.map__live iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-pin { background: none; border: 0; }
.map-pin span { animation: pin-drop 520ms cubic-bezier(.22, 1.4, .36, 1) both; }
@keyframes pin-drop { from { opacity: 0; transform: translate3d(0, -18px, 0); } to { opacity: 1; transform: none; } }
.map-stop { display: grid !important; place-items: center; background: #0B2924; color: #FBF9F4; border: 2px solid #FBF9F4; border-radius: 6px;
  font: 800 9px/1 var(--sc-font-display); letter-spacing: .08em; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.leaflet-tooltip.map-label { font: 700 .82rem var(--sc-font-display); color: #12201C; background: #FBF9F4; border: 0; border-radius: 6px; padding: .35rem .6rem; box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); }
.map__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sc-4); padding: var(--sc-4) var(--sc-5); background: rgba(255,255,255,.6); }
.map__bar p { margin: 0; line-height: 1.4; }
.map__actions { display: flex; flex-wrap: wrap; gap: var(--sc-2); }
.map .btn:not(.btn--ghost) { background: #B03F18; color: #FBF8F2; }
.map .btn--ghost { color: #12201C; border-color: rgba(18,32,28,.3); }
.map__near { list-style: none; margin: 0; padding: var(--sc-4) var(--sc-5) var(--sc-5); display: grid; gap: var(--sc-3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); background: rgba(255,255,255,.4); font-size: .95rem; line-height: 1.45; }
.map__near b { display: block; margin-bottom: .15rem; font: 650 .72rem var(--sc-font-display); letter-spacing: .12em; text-transform: uppercase; color: #B03F18; }
@media (prefers-reduced-motion: reduce) { .map__live { transition: none; } .map-pin span { animation: none; } }

/* ------------------------------------------------- background video */
.bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bg-video__scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 41, 36, .15) 0%, rgba(11, 41, 36, .05) 35%, rgba(11, 41, 36, .78) 100%); }

/* --------------------------------------------------------- cart total */
.drawer__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding-bottom: var(--sc-3); border-bottom: 1px solid var(--sc-hairline);
  font: 600 .95rem var(--sc-font-display); }
.drawer__total b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.drawer__total small { font-size: .75rem; color: var(--sc-ink-soft); }
.line-item__art img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }

/* --------------------------------------------------------- product cards */
.pgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-7) var(--sc-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pcard { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--sc-3); }
.pcard__img { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--bone-deep); }
.pcard__img img, .pcard__img svg { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .pcard:hover .pcard__img img { transform: scale(1.035); } }
.pcard__cat { position: absolute; top: 10px; right: 10px; font: 650 .68rem var(--sc-font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-green); background: rgba(247,243,236,.9); padding: .25rem .5rem; border-radius: 99px; }
.pcard__mark { position: absolute; top: 10px; left: 10px; font: 650 .68rem var(--sc-font-display); letter-spacing: .08em; text-transform: uppercase; color: #ECE9E1; background: var(--green); padding: .3rem .55rem; border-radius: 99px; }
.pcard__body { display: grid; gap: .1rem; align-content: start; }
.pcard__name { margin: 0; font: 700 1.05rem/1.2 var(--sc-font-display); font-variation-settings: "wdth" 104; }
.pcard__name a { text-decoration: none; }
.pcard__name a::after { content: ""; position: absolute; inset: 0 0 52px 0; }
.pcard__brand { margin: 0; font-size: .92rem; color: var(--ink-green-soft); }
.pcard__price { margin: .2rem 0 0; font: 650 1rem var(--sc-font-display); font-variant-numeric: tabular-nums; }
.pcard__add { position: relative; z-index: 1; justify-self: start; min-height: 40px; padding: .55rem 1rem; border: 1px solid var(--sc-hairline-strong); border-radius: var(--radius); background: transparent; cursor: pointer;
  font: 650 .85rem var(--sc-font-display); color: var(--ink-green); transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms var(--sc-ease-out); }
.pcard__add:hover { background: var(--ink-green); color: var(--bone); border-color: var(--ink-green); }
.pcard__add:active { transform: scale(.97); }
.pcard__add:focus-visible { outline: 2px solid var(--pers); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .pcard__img img { transition: none; } }

/* ==========================================================================
   FILM MODE: one continuous film behind every page (client request, 2026-10-06)
   The colour tokens flip: grounds become tinted glass over the film and ink
   becomes light. "Documents" (cart, configurator, chat, Rx-pad forms, the
   frame-wall light boxes) re-declare the paper tokens and stay paper-white,
   like objects held up in front of the film.
   ========================================================================== */
html { background: #EDEAE4; }
body { background: transparent; }
/* Beige screen (client request, 2026-10-06): the grounds are beige glass over
   the film in four tones (bone, bone-deep, sand, deep sand), ink is dark and
   the logo is black. Solid Nile green stays only as a small accent
   (--green / --green-deep) on the dock, chat header and badges. */
:root {
  --green: #113C35;
  --green-deep: #0B2924;
  --bone: rgba(255, 255, 255, 0.42);
  --bone-deep: rgba(255, 255, 255, 0.50);
  --nile: rgba(255, 255, 255, 0.56);
  --nile-deep: rgba(255, 255, 255, 0.62);
  --nile-raised: rgba(255, 255, 255, 0.55);
  --ink-green: #12201C;
  --ink-green-soft: #3D4A45;
  --pers: #B03F18;
  --pers-press: #933313;
  --logo-ink: #111;
  --sc-hairline: rgba(18, 32, 28, 0.16);
  --sc-hairline-strong: rgba(18, 32, 28, 0.30);
  --sc-accent-ink: #FBF8F2;
  --sc-shadow-color: 32 20% 20%;
  --sc-edge: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.g-bone, .g-bone-deep, .g-nile, .g-nile-deep {
  --sc-ink: #12201C; --sc-ink-soft: #3D4A45;
  --sc-accent: #B03F18; --sc-accent-ink: #FBF8F2;
  --sc-hairline: rgba(18, 32, 28, 0.16); --sc-hairline-strong: rgba(18, 32, 28, 0.30);
  --sc-edge: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --sc-surface: rgba(251, 249, 244, 0.6);
  color: #12201C;
}
.g-bone, .g-bone-deep, .g-nile, .g-nile-deep { -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); }
[class*="g-"] > [data-sc-stage] { background: transparent; }
.sc-grain { mix-blend-mode: multiply; opacity: 0.05; }
.g-bone .btn:not(.btn--ghost):hover, .g-bone-deep .btn:not(.btn--ghost):hover,
.g-nile .btn:not(.btn--ghost):hover, .g-nile-deep .btn:not(.btn--ghost):hover { background: var(--pers-press); }

/* the film itself */
.site-film { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #EDEAE4; }
.site-film__layer { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity 1100ms var(--sc-ease-out); }
.site-film__layer.is-front { opacity: 1; }
.site-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms var(--sc-ease-out); }
.site-film video.is-playing { opacity: 1; }
/* brand slideshow: slow pan and push (transform + opacity only) */
.site-film .kb { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; opacity: 0; transform: scale(1.02) translate3d(0, 0, 0);
  transition: opacity 1600ms ease, transform 7600ms linear; }
.site-film .kb.is-on { opacity: 1; transform: scale(1.1) translate3d(-1.5%, -1%, 0); }
.site-film .kb--alt.is-on { transform: scale(1.1) translate3d(1.5%, 1%, 0); }
@media (prefers-reduced-motion: reduce) { .site-film .kb, .site-film .kb.is-on { transition: opacity 400ms ease; transform: none; } }
.site-film__tint { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, rgba(236, 233, 225, 0.05), rgba(120, 104, 80, 0.25)); }

/* documents: paper-white objects in front of the film */
.drawer, .modal, .chat, .rx-pad, .slip, .bay, .visit-attach, .pdp__plate {
  --ink-green: #12201C; --ink-green-soft: #46554F; --bone: #ECE9E1; --bone-deep: #E1DDD2;
  --pers: #B03F18; --pers-press: #933313; --logo-ink: #111;
  --sc-ink: #12201C; --sc-ink-soft: #46554F; --sc-accent: #B03F18; --sc-accent-ink: #FBF8F2;
  --sc-hairline: rgba(18, 32, 28, 0.14); --sc-hairline-strong: rgba(18, 32, 28, 0.28);
  --sc-edge: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  letter-spacing: normal;
  color: #12201C;
}
.visit-attach { background: #FBF9F3; }
.field input, .field select, .field textarea { color: #12201C; }
.rx-pad .field input { color: #12201C; }
.pcard__cat { color: #12201C; }
.store-bar .store-select select { color: #12201C; background-color: #F5F3EE; background-image: linear-gradient(45deg, transparent 50%, #12201C 50%), linear-gradient(135deg, #12201C 50%, transparent 50%); }
.store .store__profile, .page-body .ecx { background: rgba(251, 249, 244, 0.55); box-shadow: none; }
.chip input:checked + span { color: #FBF8F2; }

@media (max-width: 860px) {
  /* phones: a lighter blur (cheaper to scroll) and a little more white */
  .g-bone, .g-bone-deep, .g-nile, .g-nile-deep { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  :root { --bone: rgba(255, 255, 255, 0.62); --bone-deep: rgba(255, 255, 255, 0.68); --nile: rgba(255, 255, 255, 0.72); --nile-deep: rgba(255, 255, 255, 0.76); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --bone: #FFFFFF; --bone-deep: #FAF9F7; --nile: #F5F3EF; --nile-deep: #F0EDE8; }
}

/* ==========================================================================
   COLOUR SCHEME VERSIONS (preview, 2026-10-07)
   No data-scheme attribute = the current Nile + persimmon design, untouched.
   Each scheme only re-points the colour tokens; layout, type, film and motion
   stay exactly as they are. Picked by the switcher in site.js.
   ========================================================================== */
html[data-scheme] {
  --bone: rgba(var(--glass), 0.42); --bone-deep: rgba(var(--glass), 0.50);
  --nile: rgba(var(--glass), 0.56); --nile-deep: rgba(var(--glass), 0.62); --nile-raised: rgba(var(--glass), 0.55);
  --sc-accent-ink: #FBF8F2;
  background: var(--film-bg);
}
/* NOOR BRAND TOKENS (one place to change). Provisional: taken from the
   Noor logo (black wordmark on white). Swap for nooreyewear.com's exact
   values when the brand files arrive. */
html[data-scheme="noor"] { --glass: 255, 255, 255; --film-bg: #F2F2F2;
  --green: #1A1A1A; --green-deep: #0E0E0E; --ink-green: #1A1A1A; --ink-green-soft: #565653;
  --pers: #1A1A1A; --pers-press: #3A3A38; --pers-night: #FFFFFF; --sch-hair: 26, 26, 26; }
html[data-scheme] .site-film { background: var(--film-bg); }
@media (max-width: 860px) {
  html[data-scheme] { --bone: rgba(var(--glass), 0.62); --bone-deep: rgba(var(--glass), 0.68); --nile: rgba(var(--glass), 0.72); --nile-deep: rgba(var(--glass), 0.76); }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-scheme] { --bone: rgb(var(--glass)); --bone-deep: rgb(var(--glass)); --nile: rgb(var(--glass)); --nile-deep: rgb(var(--glass)); }
}

/* grounds and paper "documents" pick up the scheme's ink and accent */
html[data-scheme] .g-bone, html[data-scheme] .g-bone-deep, html[data-scheme] .g-nile, html[data-scheme] .g-nile-deep,
html[data-scheme] :is(.drawer, .modal, .chat, .rx-pad, .slip, .bay, .visit-attach, .pdp__plate) {
  --sc-ink: var(--sch-ink); --sc-ink-soft: var(--sch-soft);
  --sc-accent: var(--sch-accent); --sc-accent-ink: #FBF8F2;
  --sc-hairline: rgba(var(--sch-hair), 0.16); --sc-hairline-strong: rgba(var(--sch-hair), 0.30);
  color: var(--sch-ink);
}
html[data-scheme="noor"] { --sch-ink: #1A1A1A; --sch-soft: #565653; --sch-accent: #1A1A1A; }
html[data-scheme] :is(.drawer, .modal, .chat, .rx-pad, .slip, .bay, .visit-attach, .pdp__plate) {
  --ink-green: var(--sch-ink); --ink-green-soft: var(--sch-soft); --pers: var(--sch-accent);
}
html[data-scheme] :is(.g-bone, .g-bone-deep, .g-nile, .g-nile-deep) { --ink-green: var(--sch-ink); }

/* the few places the original hard-codes persimmon or Nile */
html[data-scheme] .corner .btn:not(.btn--ghost),
html[data-scheme] .map .btn:not(.btn--ghost),
html[data-scheme] .rx-pad .btn:not(.btn--ghost) { background: var(--sch-accent); color: #FBF8F2; }
html[data-scheme] .corner .btn--ghost { color: var(--sch-ink); border-color: rgba(var(--sch-hair), .28); }
html[data-scheme] .map__pin, html[data-scheme] .map-pin span { background: var(--sch-accent); }
html[data-scheme] .map-stop { background: var(--green-deep); }
html[data-scheme] .map__near b, html[data-scheme] .rings-caption b { color: var(--sch-accent); }
html[data-scheme] .rings__label--you { fill: var(--sch-accent); }
html[data-scheme] .rings__label--noor { fill: var(--sch-soft); }
html[data-scheme] .rings__you path { fill: var(--sch-accent); }
html[data-scheme] .trail__line { stroke: var(--sch-accent); }
html[data-scheme] .trail__head { fill: var(--sch-accent); filter: none; }
html[data-scheme] .trail__node.is-lit circle { fill: var(--sch-accent); stroke: var(--sch-ink); }
html[data-scheme] .trail__node.is-lit text { fill: var(--sch-ink); }
html[data-scheme] .collection__head .label, html[data-scheme] .collection__brands a:hover { color: var(--sch-accent); }
html[data-scheme] .collection__head .display, html[data-scheme] .collection__brands a,
html[data-scheme] .collection .pcard__name, html[data-scheme] .collection .pcard__price { color: var(--sch-ink); }
html[data-scheme] .collection .pcard__add:hover { background: var(--sch-ink); }
html[data-scheme] .dock__count { color: var(--green-deep); }
html[data-scheme] .corner__links a[aria-current="page"] { background: var(--sch-ink); }

/* ==========================================================================
   FULL VERSIONS: type, UI treatment and reading comfort per version.
   Layout, sections, film and motion stay the original's.
   ========================================================================== */

/* --- shared optimizations for every new version ------------------------- */
html[data-scheme] body { font-family: var(--sc-font-text); text-rendering: optimizeLegibility; }
/* text-heavy sections get more solid glass, so moving video never fights the words */
html[data-scheme] :is(#exam, #find-us, #glasses, .page-head, .page-body) {
  --bone: rgba(var(--glass), 0.80); --bone-deep: rgba(var(--glass), 0.84);
}
html[data-scheme] :focus-visible { outline: 2px solid var(--sch-accent); outline-offset: 3px; }
html[data-scheme] .textlink { display: inline-flex; align-items: center; min-height: 44px; }
html[data-scheme] .btn--small { min-height: 44px; }
html[data-scheme] .lede { max-width: 46ch; }
html[data-scheme] .prose, html[data-scheme] .qa p, html[data-scheme] .exam-types p { line-height: 1.6; }
@media (max-width: 860px) {
  html[data-scheme] body { font-size: 1.0625rem; }
  html[data-scheme] .hero__actions .btn { flex: 1 1 100%; }        /* full-width primary action on phones */
  html[data-scheme] .exam-types li { align-items: flex-start; }
}

/* --- Noor brand type and UI ---------------------------------------------
   Matches nooreyewear.com: heavy condensed display ("IF IN DOUBT, WEAR
   MASSIVE FRAMES") via Archivo's width axis, light geometric headings and
   body via Jost. Black buttons, black selected tabs, near-square corners. */
html[data-scheme="noor"] {
  --sc-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sc-font-text: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --radius: 3px;
}
html[data-scheme="noor"] body { font-size: clamp(1.08rem, 1.02rem + 0.25vw, 1.2rem); line-height: 1.6; }
html[data-scheme="noor"] .chart-title__row--3 > span:first-child { font-family: var(--sc-font-text); font-style: normal; font-weight: 500; }
html[data-scheme="noor"] .btn:not(.btn--ghost) { background: var(--sch-ink); color: #FFFFFF; }
html[data-scheme="noor"] .btn:not(.btn--ghost):hover { background: var(--pers-press); }
html[data-scheme="noor"] .btn--ghost { border-color: var(--sch-ink); color: var(--sch-ink); }
html[data-scheme="noor"] .textlink { text-decoration-color: currentColor; }
html[data-scheme="noor"] .dock__count { background: #FFFFFF; color: #1A1A1A; box-shadow: inset 0 0 0 1.5px #1A1A1A; }
/* the rings: Noor's mark, used as the one recurring brand device */
html[data-scheme="noor"] .rings__you path { fill: #1A1A1A; }
html[data-scheme="noor"] .rings__label--you { fill: #1A1A1A; }
html[data-scheme="noor"] .trail__head { fill: #1A1A1A; }


html[data-scheme], html[data-scheme] body { overflow-x: clip; }      /* the hero lenses and Freddo rail never widen the page */

/* Noor: light geometric section headings, like "Find Your Face Shape" */
html[data-scheme="noor"] .display--md, html[data-scheme="noor"] .display--sm { font-family: var(--sc-font-text); font-weight: 500; letter-spacing: -0.01em; }
html[data-scheme="noor"] .btn { text-transform: uppercase; letter-spacing: .06em; font-size: .86rem; }
html[data-scheme="noor"] .btn--small { font-size: .8rem; }

/* the black frame-name band from nooreyewear.com, here with the brands we carry */
.band { background: #1A1A1A; color: #FFFFFF; overflow: hidden; padding: 1.1rem 0; position: relative; z-index: 1; }
.band__track { display: flex; width: max-content; gap: 0; animation: band 38s linear infinite; }
.band ul { display: flex; align-items: center; gap: 2.5rem; margin: 0; padding: 0 1.25rem; list-style: none; }
.band li { display: flex; align-items: center; gap: 2.5rem; white-space: nowrap; font: 800 clamp(1.1rem, .9rem + .8vw, 1.6rem)/1 var(--sc-font-display); font-variation-settings: "wdth" 75; text-transform: uppercase; letter-spacing: .02em; }
.band li::after { content: ""; width: 34px; height: 21px; flex: none; background: url("../images/icon-mark-black.png") center / contain no-repeat; filter: invert(1); }
.band:hover .band__track { animation-play-state: paused; }
@keyframes band { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .band__track { animation: none; } .band { overflow-x: auto; } }


/* ==========================================================================
   HEADER + MENU (2026-10-08): hamburger menu, separate phone and desktop
   layouts. Motion: <=240ms, ease-out, transform/opacity only.
   ========================================================================== */
.mark img { width: 92px; height: auto; }
html[data-scheme] .mark { background: transparent; padding: 6px 4px; }

.menu-toggle {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0 .95rem 0 .85rem;
  border: 1px solid var(--sch-ink, #1A1A1A); border-radius: var(--radius); background: #FFFFFF; color: var(--sch-ink, #1A1A1A);
  font: 600 .8rem/1 var(--sc-font-display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms ease, color 160ms ease;
}
.menu-toggle:hover { background: var(--sch-ink, #1A1A1A); color: #FFFFFF; }
.menu-toggle:active { transform: scale(0.97); }
.menu-toggle:focus-visible { outline: 2px solid var(--sch-ink, #1A1A1A); outline-offset: 3px; }
.menu-toggle__icon { display: grid; gap: 4px; width: 18px; }
.menu-toggle__icon i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform 200ms var(--sc-ease-out), opacity 120ms ease; }
.menu-toggle__icon i:nth-child(2) { width: 12px; justify-self: end; }   /* a slightly shorter middle line: reads as a menu, not a list icon */
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.corner__book .sm { display: none; }

/* Desktop (>=1100px): logo left; page links, Book and Menu right */
@media (min-width: 1100px) {
  .corner { gap: .6rem; }
}
/* Tablet and phone: a solid top bar, logo left, Book + icon-only hamburger right */
@media (max-width: 1099px) {
  html[data-scheme] body::before {
    content: ""; position: fixed; z-index: 69; top: 0; left: 0; right: 0;
    height: calc(var(--chrome-h) + env(safe-area-inset-top, 0px));
    background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(26, 26, 26, .08);
    transition: opacity 240ms var(--sc-ease-out);
  }
  html[data-scheme][data-hero="1"] body::before { opacity: 0; }        /* the home hero runs edge to edge */
  .corner { top: calc(env(safe-area-inset-top, 0px) + 8px); gap: .5rem; }
  .mark { top: calc(env(safe-area-inset-top, 0px) + 10px); }
  .menu-toggle { width: 44px; padding: 0; justify-content: center; }
  .menu-toggle__text { display: none; }
}
@media (max-width: 860px) {
  :root { --chrome-h: 60px; }
  .mark img { width: 78px; }
  .corner .btn { min-height: 44px; }
}
@media (max-width: 400px) {
  .corner__book .lg { display: none; }
  .corner__book .sm { display: inline; }
}

/* The menu: a sheet from the right on desktop, full screen on phones */
.menu-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 480px);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: #FFFFFF; color: #1A1A1A; box-shadow: -24px 0 60px -24px rgba(0,0,0,.35);
  padding: 0 var(--sc-6) calc(var(--sc-6) + env(safe-area-inset-bottom, 0px));
  transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
}
.menu-overlay .overlay__backdrop { background: rgba(0, 0, 0, .35); }
@starting-style {
  .overlay[data-open="true"] .menu-panel { transform: translate3d(100%, 0, 0); }
  .overlay[data-open="true"] .menu-list li { opacity: 0; transform: translate3d(12px, 0, 0); }
}
.menu-panel__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: calc(var(--chrome-h) + 8px); padding-top: env(safe-area-inset-top, 0px); background: #FFFFFF; }
.menu-panel__logo img { width: 92px; height: auto; display: block; }
.menu-panel__close { color: #1A1A1A; }
.menu-panel__close svg { width: 22px; height: 22px; }
.menu-list { list-style: none; margin: var(--sc-3) 0 0; padding: 0; }
.menu-list li { border-top: 1px solid rgba(26,26,26,.1); transition: opacity 200ms ease-out, transform 240ms var(--sc-ease-out); transition-delay: calc(var(--i) * 22ms); }
.menu-list li:last-child { border-bottom: 1px solid rgba(26,26,26,.1); }
.menu-list a { display: grid; gap: .1rem; padding: .85rem 0; min-height: 56px; text-decoration: none; color: #1A1A1A; }
.menu-list a span { font: 700 1.35rem/1.15 var(--sc-font-display); font-variation-settings: "wdth" 100; letter-spacing: -0.015em; }
.menu-list a small { font: 400 .95rem/1.3 var(--sc-font-text); color: #565653; }
.menu-list a[aria-current="page"] span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
@media (hover: hover) and (pointer: fine) {
  .menu-list a span { transition: transform 160ms var(--sc-ease-out); display: inline-block; }
  .menu-list a:hover span { transform: translateX(4px); }
}
.menu-panel__foot { margin-top: auto; padding-top: var(--sc-6); display: grid; gap: var(--sc-4); }
.menu-panel__foot .btn { background: #1A1A1A; color: #FFFFFF; }
.menu-panel__contact { margin: 0; font-size: 1rem; line-height: 1.6; color: #1A1A1A; }
.menu-panel__contact a { color: inherit; }
@media (max-width: 560px) {
  .menu-panel { width: 100%; box-shadow: none; padding-inline: var(--sc-gutter); }
  .menu-panel__logo img { width: 78px; }
  .menu-list a { padding: .75rem 0; }
  .menu-list a span { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-panel, .menu-list li, .menu-toggle, .menu-toggle__icon i { transition: opacity 120ms ease; }
  .menu-toggle:active { transform: none; }
  @starting-style { .overlay[data-open="true"] .menu-panel { transform: none; opacity: 0; } .overlay[data-open="true"] .menu-list li { transform: none; } }
}

/* Tap targets: 44px on touch screens (walkthrough 2026-10-08) */
@media (pointer: coarse), (max-width: 860px) {
  .mark { padding-block: 9px; }
  .colophon__small nav { gap: 0 var(--sc-5); }
  .colophon__small nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .collection__brands a { display: inline-flex; align-items: center; min-height: 44px; }
  .pdp__crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .opt { min-height: 44px; }
}

/* Phones: dock steps aside on scroll down; footer leaves room for it */
.dock { transition: transform 240ms var(--sc-ease-out), opacity 200ms ease; }
@media (max-width: 860px) {
  .dock.is-away { transform: translate3d(0, 110px, 0); opacity: 0; pointer-events: none; }
  .colophon { padding-bottom: calc(var(--sc-7) + 76px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .dock.is-away { transform: none; } .dock { transition: opacity 150ms ease; } }

/* The assistant uses the Noor rings, not two drawn circles */

#noor-chat-btn svg { width: 32px; }
.chat__head { gap: .75rem; justify-content: flex-start; }
.chat__head > div { flex: 1; }
.chat__mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; color: #1A1A1A; flex: none; }
.chat__mark svg { width: 26px; height: auto; }
html[data-scheme="noor"] .chat__head { background: #1A1A1A; }
html[data-scheme="noor"] .msg--user { background: #1A1A1A; color: #FFFFFF; }

/* The home footer sizes to its content (no screen-tall empty band on phones) */
html[data-scheme] .colophon--home { min-height: auto; }

/* Phones: the exam list comes before the photo, and the photo is shorter */
@media (max-width: 860px) {
  #exam .spread > figure { order: 2; }
  #exam .photo-slot { --ar: 16 / 9; }
}
/* Assistant in Noor's white and grey */
html[data-scheme="noor"] .chat { background: #FFFFFF; --paper: #FFFFFF; }
html[data-scheme="noor"] .msg--bot { background: #F2F2F2; color: #1A1A1A; }

/* ==========================================================================
   LENS PACKAGES + HOW WE WORK (shared by the home page and /lenses/)
   ========================================================================== */
  /* ------------------------------------------------------- how we work */
  .hww-steps { list-style: none; margin: var(--sc-7) 0 0; padding: 0; display: grid; gap: 0; }
  @media (min-width: 860px) { .hww-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sc-7); } }
  .hww-steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--sc-4); align-items: start; padding: var(--sc-5) 0; border-top: 1px solid var(--sc-hairline-strong); }
  .hww-steps__n { font-family: var(--sc-font-display); font-variation-settings: "wdth" 125; font-weight: 800; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: .85; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
  .hww-steps h3 { margin: 0 0 .3rem; font: 700 1.2rem/1.2 var(--sc-font-display); font-variation-settings: "wdth" 106; }
  .hww-steps p { margin: 0; color: var(--sc-ink-soft); max-width: 40ch; }
  .hww-sub { margin-top: var(--sc-9); margin-bottom: var(--sc-5); }

  /* lens builder: three prescription slips you pick, then optional add-ons */
  .plan { display: grid; gap: var(--sc-7); }
  .plan__group { border: 0; margin: 0; padding: 0; min-width: 0; }
  .hww-sub { margin: var(--sc-9) 0 calc(-1 * var(--sc-3)); }
  .packages { display: grid; gap: var(--sc-4); }
  @media (min-width: 860px) { .packages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-5); } }
  .package {
    --sc-ink: var(--ink-green); --sc-ink-soft: var(--ink-green-soft);
    position: relative; display: grid; gap: var(--sc-2); align-content: start; min-width: 0; cursor: pointer;
    padding: var(--sc-5) var(--sc-5) var(--sc-6); border-radius: var(--radius);
    background: #FFFFFF; color: var(--sc-ink);
    box-shadow: var(--sc-e1), inset 0 0 0 1px rgba(18, 32, 28, .10);
    -webkit-tap-highlight-color: transparent;
    transition: transform 140ms var(--sc-ease-out);
  }
  /* selected ring lives on its own layer and fades (no box-shadow animation) */
  .package::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--pers); opacity: 0; transition: opacity 160ms var(--sc-ease-out); pointer-events: none; }
  .package:has(input:checked)::after { opacity: 1; }
  .package:active { transform: scale(0.985); }
  .package input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .package:has(input:focus-visible) { outline: 2px solid var(--pers); outline-offset: 3px; }
  .package__check { position: absolute; top: var(--sc-5); right: var(--sc-5); width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(18, 32, 28, .3); display: grid; place-items: center; transition: background-color 160ms ease, border-color 160ms ease; }
  .package__check::after { content: ""; width: 10px; height: 6px; border: solid #FBF8F2; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(.6); opacity: 0; transition: transform 160ms var(--sc-ease-out), opacity 120ms ease; }
  .package:has(input:checked) .package__check { background: var(--pers); border-color: var(--pers); }
  .package:has(input:checked) .package__check::after { opacity: 1; transform: translateY(-1px) rotate(-45deg) scale(1); }
  .package__name { font: 700 clamp(1.3rem, 1.15rem + .6vw, 1.65rem)/1.1 var(--sc-font-display); font-variation-settings: "wdth" 112; letter-spacing: -0.02em; padding-right: 2.5rem; }
  .package__price { font: 800 clamp(2.2rem, 1.9rem + 1.4vw, 3rem)/1 var(--sc-font-display); font-variation-settings: "wdth" 100; letter-spacing: -0.03em; color: var(--pers); font-variant-numeric: tabular-nums; margin-top: var(--sc-2); }
  .package__price small { font: 600 .9rem/1 var(--sc-font-display); letter-spacing: 0; color: var(--sc-ink-soft); margin-right: .15rem; }
  .package__what { color: var(--sc-ink-soft); max-width: 34ch; margin-top: var(--sc-2); }
  @media (max-width: 859px) {   /* phones: compact slips, name and price on one line */
    .package { grid-template-columns: 1fr auto; column-gap: var(--sc-4); row-gap: var(--sc-2); padding: var(--sc-4) var(--sc-5) var(--sc-5); }
    .package__name { grid-column: 1; grid-row: 1; padding-right: 0; align-self: center; }
    .package__check { position: static; grid-column: 2; grid-row: 1; align-self: center; }
    .package__price { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 1.75rem; }
    .package__what { grid-column: 1 / -1; grid-row: 3; margin: 0; font-size: .97rem; max-width: none; }
  }

  .addons { max-width: 42rem; }
  .addons__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; padding: 0; margin-bottom: var(--sc-3); font: 700 clamp(1.3rem, 1.1rem + .9vw, 1.8rem)/1.1 var(--sc-font-display); font-variation-settings: "wdth" 106; letter-spacing: -0.02em; }
  .addons__title .soft { font: 400 1rem/1.4 var(--sc-font-text); letter-spacing: 0; }
  .addons ul { list-style: none; margin: 0; padding: 0; }
  .addon { position: relative; display: flex; align-items: center; gap: .5rem; border-top: 1px solid var(--sc-hairline); }
  .addon:last-child { border-bottom: 1px solid var(--sc-hairline); }
  .addon__pick { flex: 1; display: flex; align-items: center; gap: .85rem; min-height: 60px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .addon__pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .addon__box { flex: none; width: 24px; height: 24px; border-radius: min(var(--radius), 6px); border: 1.5px solid var(--sc-hairline-strong); display: grid; place-items: center; transition: transform 140ms var(--sc-ease-out), background-color 160ms ease, border-color 160ms ease; }
  .addon__box::after { content: ""; width: 10px; height: 6px; border: solid #FBF8F2; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(.6); opacity: 0; transition: transform 160ms var(--sc-ease-out), opacity 120ms ease; }
  .addon__pick:active .addon__box { transform: scale(0.9); }
  .addon__pick input:checked + .addon__box { background: var(--sc-accent); border-color: var(--sc-accent); }
  .addon__pick input:checked + .addon__box::after { opacity: 1; transform: translateY(-1px) rotate(-45deg) scale(1); }
  .addon__pick input:focus-visible + .addon__box { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
  .addon__name { font: 650 1.1rem/1.2 var(--sc-font-display); font-variation-settings: "wdth" 104; }
  .addon__price { margin-left: auto; font: 650 1.05rem/1 var(--sc-font-display); font-variant-numeric: tabular-nums; color: var(--sc-ink-soft); }
  .addon__pick input:checked ~ .addon__price { color: var(--sc-ink); }
  .tip { display: inline-flex; padding-left: .25rem; }
  .tip__btn {
    display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    border: 1.5px solid var(--sc-hairline-strong); background: transparent; color: var(--sc-ink);
    font: 700 .85rem/1 var(--sc-font-display); cursor: help; position: relative;
    transition: transform 140ms var(--sc-ease-out), background-color 160ms ease, color 160ms ease;
  }
  .tip__btn::before { content: ""; position: absolute; inset: -8px; }
  .tip__btn:active { transform: scale(0.94); }
  .tip__btn:hover, .tip__btn[aria-expanded="true"] { background: var(--sc-ink); color: #FBF8F2; border-color: var(--sc-ink); }
  .tip__bubble {
    position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% - 6px);
    padding: .75rem 1rem; border-radius: var(--radius);
    background: var(--green-deep); color: #F4F1EA; font-size: .95rem; line-height: 1.45; box-shadow: var(--sc-e2);
    opacity: 0; transform: translateY(-4px) scale(0.98); transform-origin: calc(100% - 1.5rem) 0; pointer-events: none;
    transition: opacity 150ms var(--sc-ease-out), transform 150ms var(--sc-ease-out);
  }
  @media (hover: hover) and (pointer: fine) { .tip:hover .tip__bubble { opacity: 1; transform: none; transition-delay: 90ms; } }
  .tip__btn:focus-visible + .tip__bubble, .tip.is-open .tip__bubble { opacity: 1; transform: none; }

  .plan__bar {
    --sc-ink: var(--ink-green); --sc-ink-soft: var(--ink-green-soft);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sc-4) var(--sc-6);
    padding: var(--sc-5) var(--sc-6); border-radius: var(--radius); background: #FFFFFF; color: var(--sc-ink);
    box-shadow: var(--sc-e2), inset 0 0 0 1px rgba(18, 32, 28, .08);
  }
  .plan__sum { display: grid; gap: .2rem; min-width: 0; }
  .plan__line { margin: 0; color: var(--sc-ink-soft); }
  .plan__total { margin: 0; font-variant-numeric: tabular-nums; }
  .plan__total b { font: 800 clamp(1.8rem, 1.5rem + 1vw, 2.4rem)/1 var(--sc-font-display); letter-spacing: -0.03em; display: inline-block; }
  .plan__total b.is-bump { animation: plan-bump 220ms var(--sc-ease-out); }
  @keyframes plan-bump { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  .plan__total small { font: 600 .9rem var(--sc-font-display); color: var(--sc-ink-soft); }
  .plan__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-5); }
  .plan__note { margin: calc(-1 * var(--sc-4)) 0 0; }
  @media (max-width: 859px) { .plan__bar { padding: var(--sc-5); } .plan__actions, .plan__actions .btn { width: 100%; } }
  @media (prefers-reduced-motion: reduce) {
    .package, .package::after, .package__check::after, .addon__box, .addon__box::after, .tip__btn, .tip__bubble { transition: none; }
    .package:active, .addon__pick:active .addon__box, .tip__btn:active { transform: none; }
    .tip__bubble { transform: none; }
    .plan__total b.is-bump { animation: none; }
  }


/* ==========================================================================
   MAP (2026-10-08): the real Google map, in Noor's black and white, with the
   Noor rings as the pin. The map is a picture you tap to open Google Maps,
   so the pin always sits exactly on the store.
   ========================================================================== */
.map__stage { isolation: isolate; }
.map__fallback, .map__live, .map__hit { grid-area: 1 / 1; width: 100%; height: 100%; }
.map__fallback { display: grid; place-items: end start; padding: var(--sc-5); background: #EDEDEB; color: #1A1A1A; }
.map__fallback p { margin: 0; line-height: 1.4; }
.map__live { position: relative; z-index: 1; opacity: 0; transition: opacity 400ms ease; background: #EDEDEB; }
.map[data-live] .map__live { opacity: 1; }
.map__live iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; filter: grayscale(1) contrast(1.06); }
.map__pin {
  position: absolute; z-index: 2; left: 50%; top: calc(50% - 30px); translate: -50% -50%;
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 50% 50% 50% 0; rotate: -45deg;
  background: #1A1A1A; color: #FFFFFF; border: 3px solid #FFFFFF;
  box-shadow: 0 12px 22px -8px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.25);
}
.map__pin .noor-mark { width: 30px; height: 20px; rotate: 45deg;
  -webkit-mask: url(../images/noor-mark.svg) center / contain no-repeat; mask: url(../images/noor-mark.svg) center / contain no-repeat; }
/* the pin lands once, when the map arrives: short, ease-out, no bounce loop */
.map[data-live] .map__pin { animation: noor-pin 360ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes noor-pin { from { opacity: 0; transform: translate3d(8px, -8px, 0); } to { opacity: 1; transform: none; } }
.map__hit { position: relative; z-index: 3; display: flex; align-items: flex-end; justify-content: flex-end; padding: var(--sc-4); text-decoration: none; }
.map__open {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 .9rem; border-radius: var(--radius);
  background: #FFFFFF; color: #1A1A1A; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 6px 16px -6px rgba(0,0,0,.25);
  font: 600 .82rem/1 var(--sc-font-display); letter-spacing: .04em;
  transition: transform 160ms var(--sc-ease-out), background-color 160ms ease, color 160ms ease;
}
.map__hit:hover .map__open, .map__hit:focus-visible .map__open { background: #1A1A1A; color: #FFFFFF; }
.map__hit:active .map__open { transform: scale(0.97); }
.map__hit:focus-visible { outline: 3px solid #1A1A1A; outline-offset: -3px; }
/* keep Google's attribution line clear of the button */
.map[data-live] .map__hit { padding-bottom: calc(var(--sc-4) + 18px); }
html[data-scheme] .map .btn:not(.btn--ghost) { background: #1A1A1A; color: #FFFFFF; }
html[data-scheme] .map .btn--ghost { color: #1A1A1A; border-color: #1A1A1A; }
html[data-scheme] .map__near b { color: #1A1A1A; }
@media (prefers-reduced-motion: reduce) { .map[data-live] .map__pin { animation: none; } .map__open { transition: none; } }

/* Real photography. Crops are set per use with --ar and --pos. */
.photo { position: relative; aspect-ratio: var(--ar, 4 / 5); width: 100%; overflow: hidden; border-radius: var(--radius); background: var(--film, #F2F2F2); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
#exam .photo { --ar: 4 / 5; }
@media (max-width: 959px) { #exam .photo { --ar: 4 / 3; } }

.showroom-photos { display: grid; gap: var(--sc-4); grid-template-columns: 1fr; padding-top: var(--sc-8); }
.showroom-photos figure:last-of-type .photo { --ar: 4 / 3; }
.showroom-photos__note { margin: 0; max-width: 46ch; }
@media (min-width: 960px) {
  .showroom-photos { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; gap: var(--sc-5); }
  .showroom-photos figure:last-of-type .photo { --ar: 8 / 9; }
  .showroom-photos figure:first-of-type .photo { --ar: 4 / 3; }
  .showroom-photos__note { grid-column: 1 / -1; }
}
.menu-panel__socials { margin-top: var(--sc-4); }

/* ================= Opening: Noor means light ================= */
.nh { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: end;
  min-height: min(92svh, 900px); background: #0E0E0E; color: #F2F2F0; }
.nh__photo { position: absolute; inset: 0; z-index: -3;
  background: url(../photos/showroom-sunwall-1600.webp) 50% 38% / cover;
  filter: brightness(.62) saturate(.9); transition: filter 900ms cubic-bezier(.23,1,.32,1); }
@media (max-width: 700px) { .nh__photo { background-image: url(../photos/showroom-sunwall-800.webp); } }
.nh__shade { position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(90deg, rgba(14,14,14,.92) 0%, rgba(14,14,14,.68) 46%, rgba(14,14,14,.08) 100%); }
@media (max-width: 899px) { .nh__shade { background: linear-gradient(0deg, rgba(14,14,14,.94) 0%, rgba(14,14,14,.74) 58%, rgba(14,14,14,.3) 100%); } }
.nh__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle 260px at var(--gx, 72%) var(--gy, 40%), rgba(255,248,230,.24), transparent 70%);
  transition: opacity 400ms cubic-bezier(.23,1,.32,1); }
.nh__strip { position: absolute; left: 0; right: 0; bottom: 18px; height: 2px; background: #FFF6DE;
  box-shadow: 0 0 18px 4px rgba(255,240,205,.5); transform-origin: left; transition: transform 700ms cubic-bezier(.23,1,.32,1); }
.nh__in { display: grid; gap: var(--sc-5); max-width: 46rem;
  padding: calc(var(--sc-9, 6rem) + 2rem) var(--sc-gutter, 1.25rem) calc(var(--sc-8, 4rem) + 1rem); }
.nh__word { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: 0; }
.nh__ar { font-family: "Noto Kufi Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif; font-weight: 800;
  font-size: clamp(4rem, 10vw, 8rem); line-height: 1; color: #FFF6DE; text-shadow: 0 0 34px rgba(255,236,190,.5);
  transition: opacity 600ms cubic-bezier(.23,1,.32,1), text-shadow 900ms cubic-bezier(.23,1,.32,1); }
.nh__gloss { font-size: .95rem; color: #BDBDB8; }
.nh__gloss b { color: #F2F2F0; font-weight: 600; }
.nh__title { margin: 0; font-family: var(--sc-font-display); font-variation-settings: "wdth" 72; font-stretch: 72%;
  font-weight: 800; text-transform: uppercase; line-height: .9; letter-spacing: -.005em; font-size: clamp(3rem, 7.4vw, 6.6rem); color: #F2F2F0; text-wrap: balance; }
.nh__lede { margin: 0; max-width: 40ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.55; color: #D2D2CE; }
html[data-scheme] .nh .btn:not(.btn--ghost) { background: #F2F2F0; color: #0E0E0E; border-color: #F2F2F0; }
html[data-scheme] .nh .btn--ghost { background: transparent; color: #F2F2F0; border-color: rgba(242,242,240,.7); }
.nh .hero__actions { margin-top: 0; }
.nh__switch { justify-self: start; font: 600 .75rem/1 var(--sc-font-text, inherit); letter-spacing: .1em; text-transform: uppercase;
  min-height: 44px; padding: 0 1rem; border-radius: 999px; background: transparent; color: #F2F2F0; border: 1px solid #6B6B67; cursor: pointer; }
.nh__switch:focus-visible { outline: 2px solid #F2F2F0; outline-offset: 3px; }
.nh[data-dim] .nh__photo { filter: brightness(.16) saturate(.6); }
.nh[data-dim] .nh__glow { opacity: 0; }
.nh[data-dim] .nh__strip { transform: scaleX(0); }
.nh[data-dim] .nh__ar { opacity: .25; text-shadow: none; }
@media (prefers-reduced-motion: reduce) { .nh__photo, .nh__glow, .nh__strip, .nh__ar { transition: none; } }

/* ================= The frame wall ================= */
.fw { padding-block: var(--sc-9, 6rem) var(--sc-8, 4rem); overflow: hidden; }
.fw__head { display: grid; gap: var(--sc-4); margin-bottom: var(--sc-7, 3rem); }
.fw__head .lede { max-width: 44ch; margin: 0; }
.fw__head .hero__actions { margin-top: var(--sc-2); }
.fw__rail { overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.fw__track { display: flex; gap: 14px; width: max-content; margin: 0; padding: 0; list-style: none; animation: fw-slide 54s linear infinite; }
.fw__rail:hover .fw__track, .fw__rail:focus-within .fw__track { animation-play-state: paused; }
.fw__track li { width: clamp(170px, 21vw, 250px); flex: none; }
.fw__track a { display: grid; gap: .5rem; color: inherit; text-decoration: none; }
.fw__track img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius, 3px); display: block;
  transition: transform 200ms cubic-bezier(.23,1,.32,1); }
@media (hover: hover) and (pointer: fine) { .fw__track a:hover img { transform: translateY(-3px); } }
.fw__track span { font-size: .9rem; color: var(--sc-ink-soft); }
.fw__track b { color: var(--sc-ink); font-weight: 600; }
.fw__track a:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }
@keyframes fw-slide { to { transform: translateX(calc(-50% - 7px)); } }
@media (prefers-reduced-motion: reduce) {
  .fw__rail { overflow-x: auto; -webkit-mask: none; mask: none; }
  .fw__track { animation: none; }
  .fw__track li[aria-hidden="true"] { display: none; }
}

/* ================= Who is the eye exam for? ================= */
.who { display: grid; gap: var(--sc-4); margin-top: var(--sc-6); padding: var(--sc-6) 0; border-top: 1px solid var(--sc-hairline); }
.who__q { margin: 0; font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.who__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.who__chips button { font: 500 1rem/1.2 inherit; font-family: inherit; min-height: 44px; padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid var(--sc-hairline-strong); background: transparent; color: var(--sc-ink); cursor: pointer;
  transition: background-color 160ms cubic-bezier(.23,1,.32,1), color 160ms cubic-bezier(.23,1,.32,1), transform 160ms cubic-bezier(.23,1,.32,1); }
.who__chips button:active { transform: scale(.97); }
.who__chips button[aria-pressed="true"] { background: var(--sc-ink); color: var(--sc-bg, #fff); border-color: var(--sc-ink); }
html[data-scheme="noor"] .who__chips button[aria-pressed="true"] { background: #1A1A1A; color: #FFFFFF; }
.who__chips button:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }
.who__out { display: grid; gap: .5rem; padding: var(--sc-5); border: 1px solid var(--sc-hairline); border-radius: var(--radius, 3px); }
.who__out h3 { margin: 0; font: 700 1.35rem/1.2 var(--sc-font-display); font-variation-settings: "wdth" 100; }
.who__out p { margin: 0; }
.who__msp { color: var(--sc-ink-soft); }
.who__out .btn { justify-self: start; margin-top: .5rem; }
.who__src { margin: 0; font-size: .85rem; }
@media (prefers-reduced-motion: reduce) { .who__chips button { transition: none; } }
/* Over the dark opening: keep the header readable */
html[data-scheme][data-hero="1"] body::before { opacity: 1; }
@media (min-width: 1100px) {
  html[data-hero="1"] .folio { color: #9A9A96; }
}
.nh__logo { display: block; width: clamp(150px, 14vw, 210px); height: auto; }
.nh__in { padding-top: calc(var(--sc-8, 4rem) + 1.5rem); gap: var(--sc-4); }
.nh__ar { font-size: clamp(3.6rem, 7vw, 6rem); }
.nh__title { font-size: clamp(3rem, 6vw, 5.4rem); }
@media (max-width: 1099px) { html[data-hero="1"] .mark { opacity: 1; pointer-events: auto; } }

/* Opening, clarity pass: one brand mark, one headline, one line of facts */
.nh__in { gap: var(--sc-5); max-width: 40rem; }
.nh__logo { width: clamp(140px, 12vw, 190px); margin-bottom: var(--sc-3); }
.nh__word { align-items: center; gap: .75rem; }
.nh__ar { font-size: clamp(2.2rem, 3.4vw, 3rem); }
.nh__gloss { font-size: 1rem; color: #CFCFCB; }
.nh__title { font-size: clamp(3rem, 6.4vw, 5.8rem); }
.nh__lede { max-width: 34ch; color: #E2E2DE; }
.nh__facts { list-style: none; margin: 0; padding: var(--sc-4) 0 0; border-top: 1px solid rgba(242,242,240,.22);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .92rem; color: #CFCFCB; }
.nh__facts li { display: flex; align-items: center; gap: .5rem; }
.nh__facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #FFF6DE; box-shadow: 0 0 8px rgba(255,240,205,.8); }
.nh__facts a { color: #F2F2F0; text-underline-offset: 3px; }
.nh__facts a:focus-visible { outline: 2px solid #F2F2F0; outline-offset: 3px; }
@media (max-width: 600px) { .nh__facts { flex-direction: column; } }

/* Header over the dark opening: the hero carries the logo, header buttons go light */
html[data-scheme][data-hero="1"] body::before { opacity: 0; }
html[data-hero="1"] .mark { opacity: 0; pointer-events: none; }
html[data-hero="1"] .corner__book, html[data-hero="1"] .menu-toggle { transition: background-color 200ms cubic-bezier(.23,1,.32,1), color 200ms cubic-bezier(.23,1,.32,1); }

/* Frame wall on phones: show more than one frame at a time */
@media (max-width: 600px) { .fw__track li { width: 42vw; } .fw { padding-block: var(--sc-8, 4rem) var(--sc-7, 3rem); } }
.nh__in { max-width: 44rem; }
@media (min-width: 900px) and (max-height: 780px) {
  .nh__in { padding-top: calc(var(--sc-7, 3rem) + 1.5rem); gap: var(--sc-4); }
  .nh__logo { width: 140px; margin-bottom: 0; }
  .nh__title { font-size: clamp(3rem, 5.2vw, 4.6rem); }
}


/* =================================================================
   CLEAR + SHARP (site-wide). Content sits on near-white panels with a
   light frost, so text is crisp; the moving film stays visible at the
   edges and runs fully clear behind the opening.
   ================================================================= */
html[data-scheme="noor"] {
  --bone: rgba(255, 255, 255, 0.90); --bone-deep: rgba(250, 250, 249, 0.93);
  --nile: rgba(255, 255, 255, 0.92); --nile-deep: rgba(250, 250, 249, 0.94);
  --sch-soft: #4A4A47;
}
@media (max-width: 860px) {
  html[data-scheme="noor"] { --bone: rgba(255, 255, 255, 0.94); --bone-deep: rgba(250, 250, 249, 0.96); --nile: rgba(255, 255, 255, 0.95); --nile-deep: rgba(250, 250, 249, 0.96); }
}
html[data-scheme="noor"] :is(.g-bone, .g-bone-deep, .g-nile, .g-nile-deep) {
  -webkit-backdrop-filter: blur(6px) saturate(1.05); backdrop-filter: blur(6px) saturate(1.05);
  --sc-hairline: rgba(26, 26, 26, 0.14); --sc-hairline-strong: rgba(26, 26, 26, 0.34);
}
html[data-scheme="noor"] .site-film__tint { background: none; }
html[data-scheme="noor"] body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html[data-scheme="noor"] .lede, html[data-scheme="noor"] .soft { color: var(--sch-soft); }
html[data-scheme="noor"] :is(h1, h2, h3, .display) { color: var(--sch-ink); }
html[data-scheme="noor"] .sc-grain { display: none; }

/* Opening: no photo; the moving film shows through, clear, with a white veil behind the words */
.nh { background: transparent; color: #1A1A1A; min-height: min(88svh, 860px); }
.nh__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 34%, rgba(255,255,255,.35) 62%, rgba(255,255,255,0) 82%); }
@media (max-width: 899px) {
  .nh__veil { background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.88) 30%, rgba(255,255,255,.95) 100%); }
}
.nh__ar { color: #1A1A1A; text-shadow: none; opacity: 1; }
.nh__gloss { color: #4A4A47; }
.nh__gloss b { color: #1A1A1A; }
.nh__title { color: #1A1A1A; }
.nh__lede { color: #2E2E2C; }
html[data-scheme] .nh .btn:not(.btn--ghost) { background: #1A1A1A; color: #FFFFFF; border-color: #1A1A1A; }
html[data-scheme] .nh .btn--ghost { background: rgba(255,255,255,.7); color: #1A1A1A; border-color: #1A1A1A; }
.nh__facts { border-top-color: rgba(26,26,26,.18); color: #4A4A47; }
.nh__facts li::before { background: #1A1A1A; box-shadow: none; }
.nh__facts a { color: #1A1A1A; }
.nh__facts a:focus-visible { outline-color: #1A1A1A; }
.nh__in { animation: nh-in 420ms cubic-bezier(.23,1,.32,1) both; }
@keyframes nh-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .nh__in { animation: none; } }
@media (min-width: 1100px) { html[data-hero="1"] .folio { color: #6B6B67; } }
/* text-heavy sections: near-solid white so words are crisp */
html[data-scheme="noor"] :is(#exam, #find-us, #glasses, #how-we-work, #frame-wall, #sight-promise, .page-head, .page-body) {
  --bone: rgba(255, 255, 255, 0.95); --bone-deep: rgba(250, 250, 249, 0.96);
}

/* Production pass: tap targets and empty states */
.mark { min-height: 44px; display: inline-flex; align-items: center; }
.nh__facts a, .fw__head .textlink { min-height: 44px; display: inline-flex; align-items: center; }
.pcard__name a { display: inline-block; padding-block: 12px; margin-block: -12px; }
dd a[href^="tel:"], dd a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
.pledge__result img:not([src]) { display: none; }
/* Desktop: a quiet white bar behind the header so scrolled headings never clash with it */
@media (min-width: 1100px) {
  html[data-scheme] body::before {
    content: ""; position: fixed; z-index: 69; top: 0; left: 0; right: 0; height: 72px;
    background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(26, 26, 26, .08); pointer-events: none;
    transition: opacity 240ms cubic-bezier(.23,1,.32,1);
  }
  html[data-scheme][data-hero="1"] body::before { opacity: 0; }
}

/* Opening: pull into focus (K) + Burnaby greeting (N) */
html[data-focus] .site-film__layer { filter: blur(18px); transform: scale(1.06); }
.site-film__layer { transition: opacity 1100ms var(--sc-ease-out), filter 1300ms cubic-bezier(.23,1,.32,1), transform 1300ms cubic-bezier(.23,1,.32,1); }
.nh__hello { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; font-size: .95rem; color: #2E2E2C; }
.nh__meter { display: inline-flex; align-items: center; gap: .5rem; font: 500 .72rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; color: #6B6B67; font-variant-numeric: tabular-nums; }
.nh__meter i { display: block; width: 72px; height: 2px; background: rgba(26,26,26,.14); position: relative; overflow: hidden; }
.nh__meter i::after { content: ""; position: absolute; inset: 0; background: #1A1A1A; transform-origin: left; transition: transform 1300ms cubic-bezier(.23,1,.32,1); }
.nh[data-focus] .nh__meter i::after { transform: scaleX(0); }
.nh__tint { position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: multiply; transition: background-color 600ms cubic-bezier(.23,1,.32,1); }
.nh[data-daypart="morning"] .nh__tint { background: rgba(255, 236, 206, .22); }
.nh[data-daypart="evening"] .nh__tint { background: rgba(196, 150, 96, .26); }
@media (prefers-reduced-motion: reduce) { .site-film__layer { transition: opacity 1100ms var(--sc-ease-out); } }

/* Readability: the partner box is a solid black panel with white text */
html[data-scheme="noor"] .csr-partner { background: #1A1A1A; color: #FFFFFF; --sc-ink: #FFFFFF; --sc-ink-soft: #D4D4D0; }
html[data-scheme="noor"] .csr-partner :is(h2, .display) { color: #FFFFFF; }
html[data-scheme="noor"] .csr-partner p { color: #F2F2F0; }
html[data-scheme="noor"] .csr-partner .soft { color: #D4D4D0; }
html[data-scheme="noor"] .csr-partner a:not(.btn) { color: #FFFFFF; }
html[data-scheme="noor"] .csr-partner .btn:not(.btn--ghost) { background: #FFFFFF; color: #1A1A1A; border-color: #FFFFFF; }
html[data-scheme="noor"] .csr-partner .btn--ghost { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
html[data-scheme="noor"] .csr-partner :focus-visible { outline-color: #FFFFFF; }
/* Disabled buttons: clearly "not yet", still readable */
html[data-scheme="noor"] .btn[disabled], html[data-scheme="noor"] .btn[aria-disabled="true"] { opacity: 1; background: #E6E6E3; color: #4A4A47; border-color: #E6E6E3; }

/* Text pages: the white panel runs edge to edge, so the film never shows as a dark block beside the words */
.page-body.prose { max-width: none; }
.page-body.prose > * { max-width: 60ch; }

/* Opening (lens act) copy: greeting + Arabic gloss, clear on the chart */
.hero__hello { margin: 0 0 var(--sc-3); font-size: 1rem; line-height: 1.45; color: #2E2E2C; max-width: 40ch; }
.hero__copy .nh__word { margin-bottom: var(--sc-3); }
.hero__copy .nh__ar { font-size: clamp(2rem, 3vw, 2.6rem); }
.hero__copy .display--xl { font-size: clamp(3rem, 7vw, 6rem); line-height: .92; }
.hero__copy .lede { color: #2E2E2C; }
.hero__copy { background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,.75) 70%, rgba(255,255,255,0)); padding: var(--sc-5) var(--sc-6) var(--sc-5) 0; margin-left: calc(-1 * var(--sc-gutter)); padding-left: var(--sc-gutter); border-radius: 0 var(--radius) var(--radius) 0; }
/* Scene 2 */
.nh { min-height: min(80svh, 760px); }
.nh__kicker { margin: 0; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #4A4A47; }

/* Freddo: two questions per step */
.step { flex-basis: min(31rem, 88vw); }
.step__q { margin: var(--sc-2) 0 0; font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #4A4A47; }
.step__n--done { font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); }
.step__advice { margin: 0; font-size: .98rem; color: #2E2E2C; }

/* Booking quick step */
.book-step { width: min(100%, 480px); }
.book-step__body { gap: var(--sc-5); }
.book-step__lede { margin: 0; font-size: 1.02rem; line-height: 1.5; color: #2E2E2C; }
.book-step .field input { font-size: 1rem; min-height: 48px; }
.book-step__err { margin: 0; font-size: .92rem; color: #A3241B; }
.book-step__consent { display: grid; grid-template-columns: 22px 1fr; gap: .6rem; align-items: start; font-size: .92rem; line-height: 1.45; color: #2E2E2C; cursor: pointer; }
.book-step__consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: #1A1A1A; }
.book-step__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4) var(--sc-6); }
.book-step__skip { background: none; border: 0; padding: 0; min-height: 44px; font: inherit; font-weight: 600; color: #1A1A1A; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.book-step__fine { margin: 0; font-size: .85rem; color: #4A4A47; }
.book-step__fine a { color: #1A1A1A; }
@media (max-width: 600px) { .book-step__actions .btn { flex: 1 1 100%; } }
/* Opening: words always sit above the moving lenses, on a soft-edged white field */
.hero__copy { z-index: 40; background: radial-gradient(120% 90% at 0% 50%, rgba(255,255,255,.94) 0%, rgba(255,255,255,.88) 55%, rgba(255,255,255,0) 80%); padding-top: var(--sc-7); padding-bottom: var(--sc-7); border-radius: 0; }
@media (max-width: 760px) { .hero__copy { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.93) 14%, rgba(255,255,255,.95) 100%); } }
@media (min-width: 761px) { .hero__copy { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--sc-6), #000 calc(100% - var(--sc-6)), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 var(--sc-6), #000 calc(100% - var(--sc-6)), transparent 100%); } }

/* ---------------------------------------------------------------- SCENE 3 · Read the chart
   A wall eye chart on a lightbox. The lens steps down one line at a time; the line in the lens is sharp,
   lines below are still out of focus, lines above have been read. Every line is a sourced fact. */
.ec { --ec-u: min(7rem, 13vw, 12.5svh); background: transparent; }
.ec__stage { display: grid; align-items: center; padding: calc(var(--chrome-h) + var(--sc-4)) clamp(16px, 5vw, 72px) var(--sc-5); }
.ec__in { display: grid; gap: var(--sc-6); grid-template-columns: minmax(0, 1fr); max-width: 1180px; width: 100%; margin: 0 auto; align-items: center; }
@media (min-width: 900px) { .ec__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.ec__board { position: relative; min-width: 0; overflow: hidden; background: #FFFFFF; border: 1px solid rgba(26,26,26,.16); border-radius: var(--radius);
  box-shadow: 0 0 0 10px rgba(255,255,255,.55), var(--sc-e2); padding: var(--sc-5) var(--sc-5) var(--sc-4); }
.ec__rows { list-style: none; margin: 0; padding: 0; display: grid; justify-items: center; }
.ec__row { position: relative; width: 100%; display: flex; justify-content: center; align-items: baseline; padding: .12em 3.2rem; color: #1A1A1A;
  font-size: calc(var(--ec-u) * var(--f)); line-height: 1.12; transition: filter 280ms cubic-bezier(.23,1,.32,1), opacity 280ms cubic-bezier(.23,1,.32,1); }
.ec__txt { font-family: var(--sc-font-display); font-variation-settings: "wdth" 100; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.ec__acuity { position: absolute; right: 0; top: 50%; translate: 0 -50%; font: 600 .78rem/1 var(--sc-font-display); letter-spacing: .08em; color: #565653; }
.ec__row[data-state="ahead"] { filter: blur(3px); opacity: .5; }
.ec__row[data-state="read"] { opacity: .78; }
.ec__lens { position: absolute; left: var(--sc-3); right: var(--sc-3); top: 0; height: 0; border: 2px solid #1A1A1A; border-radius: 999px; pointer-events: none;
  transition: transform 300ms cubic-bezier(.23,1,.32,1), height 300ms cubic-bezier(.23,1,.32,1), opacity 200ms ease; }
.ec__lens::before, .ec__lens::after { content: ""; position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: #1A1A1A; translate: 0 -50%; }
.ec__lens::before { left: -6px; } .ec__lens::after { right: -6px; }
.ec[data-ec-done] .ec__lens { opacity: 0; }
.ec__card { display: grid; gap: var(--sc-4); align-content: start; background: rgba(255,255,255,.94); border-radius: var(--radius); padding: var(--sc-5); box-shadow: var(--sc-e1); color: #1A1A1A; }
.ec__read { display: grid; gap: var(--sc-3); min-height: 13.5rem; }
.ec__line { font: 600 .82rem/1 var(--sc-font-display); letter-spacing: .1em; text-transform: uppercase; color: #565653; margin: 0; }
.ec__head { font-family: var(--sc-font-display); font-variation-settings: "wdth" 100; font-weight: 800; font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.12; margin: 0; text-wrap: balance; }
.ec__body { margin: 0; font-size: 1.06rem; line-height: 1.55; color: #3A3A38; max-width: 42ch; }
.ec__msp { margin: 0; justify-self: start; font: 600 .8rem/1 var(--sc-font-display); letter-spacing: .06em; text-transform: uppercase; border: 1.5px solid #1A1A1A; border-radius: 999px; padding: .5rem .8rem; }
.ec__src { margin: 0; font-size: .9rem; color: #565653; }
.ec__fine { margin: 0; font-size: .92rem; line-height: 1.5; color: #565653; border-top: 1px solid rgba(26,26,26,.14); padding-top: var(--sc-3); }
.ec__read > * { transition: opacity 200ms cubic-bezier(.23,1,.32,1), transform 200ms cubic-bezier(.23,1,.32,1); }
.ec__read[data-swap] > * { opacity: 0; transform: translateY(6px); }
@media (max-width: 899px) {
  .ec { --ec-u: min(19vw, 8.2svh); }
  .ec__stage { align-items: start; padding-top: calc(var(--chrome-h) + var(--sc-2)); padding-bottom: var(--sc-3); }
  .ec__in { gap: var(--sc-3); }
  .ec__board { padding: var(--sc-3) var(--sc-2) var(--sc-2); box-shadow: var(--sc-e1); }
  .ec__row { padding: .08em 2.6rem; }
  .ec__acuity { font-size: .7rem; }
  .ec__card { padding: var(--sc-4); gap: var(--sc-3); }
  .ec__read { min-height: 0; gap: var(--sc-2); }
  .ec__head { font-size: 1.3rem; }
  .ec__body { font-size: 1rem; }
  .ec__fine { display: none; }
  .ec__card .hero__actions .textlink { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ec__row, .ec__lens, .ec__read > * { transition: none; } .ec__row[data-state="ahead"] { filter: none; } }
@media (max-width: 899px) {
  .ec { --ec-u: min(19vw, 7.6svh); }
  .ec__board { padding-top: var(--sc-4); }
  .ec__lens { left: var(--sc-5); right: 2.4rem; }
}

/* ---------------------------------------------------------------- Opening offer
   The first thing on the page: one tappable line, then the full terms in #offer. */
.offer { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; max-width: 34rem; margin: 0 0 var(--sc-5);
  padding: .7rem .9rem .7rem .7rem; border-radius: var(--radius); background: #1A1A1A; color: #FFFFFF; text-decoration: none;
  transition: transform 160ms cubic-bezier(.23,1,.32,1), background-color 160ms cubic-bezier(.23,1,.32,1); }
.offer:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .offer:hover { background: #333331; } }
.offer:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 3px; }
.offer__tag { font: 700 .74rem/1 var(--sc-font-display); letter-spacing: .1em; text-transform: uppercase; background: #FFFFFF; color: #1A1A1A; padding: .42rem .55rem; border-radius: 2px; }
.offer__line { flex: 1 1 14rem; font-size: 1rem; line-height: 1.4; }
.offer__line b { font-weight: 600; }
.offer__more { font: 600 .8rem/1 var(--sc-font-display); letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
.hero__copy .display--xl { font-size: clamp(2.6rem, 5.6vw, 5rem); line-height: .95; max-width: 13ch; }
.hero__copy .lede { max-width: 36ch; }
.hero__copy .hero__hello { margin: var(--sc-3) 0 0; font-size: .95rem; color: #4A4A47; }

.offer-sec__in { display: grid; gap: var(--sc-6); }
.offer-sec__head { display: grid; gap: var(--sc-3); max-width: 46rem; }
.offer-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-4); grid-template-columns: minmax(0, 1fr); counter-reset: none; }
@media (min-width: 860px) { .offer-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.offer-steps li { display: grid; gap: .35rem; align-content: start; background: rgba(255,255,255,.92); border: 1px solid rgba(26,26,26,.12); border-radius: var(--radius); padding: var(--sc-5); }
.offer-steps__n { font: 800 2.2rem/1 var(--sc-font-display); margin-bottom: .4rem; }
.offer-steps b { font: 700 1.2rem/1.25 var(--sc-font-display); }
.offer-steps li > span:last-child { color: #3A3A38; font-size: 1.02rem; line-height: 1.5; }
.offer-sec__foot { display: grid; gap: var(--sc-4); }
.offer-sec__terms { margin: 0; font-size: .95rem; line-height: 1.55; color: #4A4A47; max-width: 62ch; }
.offer-banner { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; justify-content: center; text-align: center; padding: .65rem 16px; background: #1A1A1A; color: #FFFFFF; font-size: .95rem; line-height: 1.4; }
.offer-banner a { color: #FFFFFF; font-weight: 600; text-underline-offset: 3px; }
.book-step__offer { margin: 0; padding: .7rem .85rem; background: #F2F2F0; border-left: 3px solid #1A1A1A; font-size: .98rem; line-height: 1.45; }
.chart-title__mark::after { content: attr(data-mark); }
@media (max-width: 760px) {
  html[data-scheme] .hero__copy { top: calc(var(--chrome-h) + .25rem); bottom: auto; padding-top: var(--sc-3); padding-bottom: var(--sc-5); }
  .offer { margin-bottom: var(--sc-4); padding: .6rem .75rem; }
  .offer__line { font-size: .95rem; }
  .offer__more { display: none; }
  html[data-scheme] .hero__copy .display--xl { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .hero__copy .lede { font-size: 1.05rem; margin-top: var(--sc-3); }
}
.offer-banner { position: relative; z-index: 2; margin: var(--chrome-h) 0 0; }
/* Hero, slimmed: greeting, headline, one line, two buttons. The free-frame offer arrives with the rings. */
.hero__copy .hero__hello { margin: 0 0 var(--sc-3); font-size: .95rem; color: #4A4A47; }
.hero__copy .lede { margin-top: var(--sc-4); }
.hero__turn-link { display: inline-block; margin-top: var(--sc-4); font-size: 1.05rem; }
@media (max-width: 760px) { html[data-scheme] .hero__copy { top: auto; bottom: calc(5svh + 64px); padding-top: var(--sc-5); } }
@media (max-width: 760px) { html[data-scheme] .hero__copy { background: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,.96) var(--sc-5), rgba(255,255,255,.96) 100%); } }
/* Greeting: a touch larger and full ink so it reads at a glance */
.hero__copy .hero__hello { font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); font-weight: 500; line-height: 1.4; color: #1A1A1A; max-width: 44ch; }
.hero__status { display: block; margin-top: .15rem; font-weight: 600; }
@media (max-width: 760px) { .hero__copy .hero__hello { font-size: 1.06rem; } }

/* ==========================================================================
   IMPROVEMENTS (2026-10-17), from the audit doc: intent doors, Google proof,
   clean H1 rows, and a sticky phone action bar.
   Motion: Apple fluid-interface + Emil Kowalski rules. Respond on press
   (scale .97, ~100ms), transform/opacity only, strong ease-out, hover only on
   fine pointers, drawer curve for the bar, cross-fades under reduced motion,
   solid surfaces under reduced transparency.
   ========================================================================== */

/* chart-title rows are now p / h1 / p, so only the real title is the H1 */
.chart-title__row { margin: 0; font: inherit; color: inherit; }

/* Google proof under the hero buttons */
.hero__proof { display: inline-flex; align-items: baseline; gap: .45rem; margin-top: var(--sc-5); font: 500 .95rem var(--sc-font-text); color: #3A3A38; text-decoration: none; }
.hero__proof b { color: #1A1A1A; font-weight: 700; }
.hero__proof .stars { color: #1A1A1A; letter-spacing: .1em; font-size: .85rem; }
.hero__proof:hover { color: #1A1A1A; }
.hero__proof:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 3px; }

/* intent doors in the "Into focus" scene */
.intent__q { margin: var(--sc-2) 0 0; font: 650 .78rem var(--sc-font-display); letter-spacing: .16em; text-transform: uppercase; color: #3A3A38; }
.intent { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.intent__tile { position: relative; display: grid; gap: .35rem; align-content: start; height: 100%; min-height: 8.5rem; padding: 1rem 1.05rem 2.4rem; border-radius: 12px; text-decoration: none; color: #1A1A1A;
  background: rgba(255,255,255,.74); border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 28px -16px rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  transition: transform 160ms var(--sc-ease-out), box-shadow 200ms ease; -webkit-tap-highlight-color: transparent; }
.intent__tile b { font: 700 1.08rem/1.2 var(--sc-font-display); letter-spacing: -.005em; }
.intent__tile span { font: 400 .92rem/1.4 var(--sc-font-text); color: #3A3A38; }
.intent__tile i { position: absolute; right: 1rem; bottom: .8rem; font: 500 1.15rem var(--sc-font-display); font-style: normal; transition: transform 200ms var(--sc-ease-out); }
.intent__tile:active { transform: scale(.97); transition-duration: 100ms; }
@media (hover: hover) and (pointer: fine) {
  .intent__tile:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 20px 36px -18px rgba(0,0,0,.36); }
  .intent__tile:hover i { transform: translateX(4px); }
  .intent__tile:active { transform: scale(.97); }
}
.intent__tile:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 3px; }
@media (min-width: 1100px) { .nh__in { max-width: 52rem; } .intent { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* sticky phone action bar: a translucent material layer, content scrolls under it */
.actbar { display: none; }
@media (max-width: 860px) {
  .actbar { position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 8px;
    padding: 8px max(10px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
    background: rgba(255,255,255,.76); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
    border-top: 1px solid rgba(255,255,255,.8); box-shadow: 0 -1px 0 rgba(0,0,0,.08), 0 -12px 30px -18px rgba(0,0,0,.3);
    transform: translateY(0); transition: transform 320ms var(--sc-ease-drawer); }
  @starting-style { .actbar { transform: translateY(100%); } }
  .actbar a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border-radius: 10px; text-decoration: none;
    font: 700 .82rem var(--sc-font-display); letter-spacing: .06em; text-transform: uppercase; color: #1A1A1A;
    background: rgba(255,255,255,.6); border: 1px solid rgba(0,0,0,.14); transition: transform 120ms var(--sc-ease-out); -webkit-tap-highlight-color: transparent; }
  .actbar a.is-primary { background: #1A1A1A; color: #FFFFFF; border-color: #1A1A1A; }
  .actbar a:active { transform: scale(.96); }
  .actbar a:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 2px; }
  .actbar svg { width: 17px; height: 17px; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .dock { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .intent__tile { min-height: 7.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .intent__tile, .intent__tile i, .actbar, .actbar a { transition: opacity 150ms ease; }
  .intent__tile:active, .intent__tile:hover, .actbar a:active { transform: none; }
  @starting-style { .actbar { transform: none; } }
}
@media (prefers-reduced-transparency: reduce) {
  .intent__tile, .actbar { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* phones: the hero stack keeps its original height (the greeting must clear the lens rings); the rating shows in the next scene */
@media (max-width: 860px) { .hero__proof { display: none; } }
/* phones: the top lens ring passes behind the greeting during the hero animation; an even frosted panel keeps it readable in every frame (was 1.9:1 at worst) */
@media (max-width: 860px) { html[data-scheme] .hero__copy { background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 14px; } }

/* ==========================================================================
   EYE SYSTEM (2026-10-17): one eye-exam concept carried through every page.
   1. Focus-in: anything that reveals on scroll arrives a little out of focus
      and sharpens, like a lens clicking into place.
   2. Acuity readout: the side folio reads the page from 6/60 to 6/6.
   3. Eye-chart headings on every inner page (markup).
   4. Eye-chart sign-off above every footer.
   Motion rules (Emil Kowalski / Apple): opacity + transform + a small blur
   (under 20px, compositor-friendly), strong ease-out, once only, and no blur
   or movement under reduced motion.
   ========================================================================== */

/* 1. focus-in */
html[data-scheme] [data-sc-in], html[data-scheme] [data-sc-stagger] > * {
  filter: blur(7px);
  transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out), filter 760ms var(--sc-ease-out);
}
html[data-scheme] [data-sc-in].sc-in, html[data-scheme] [data-sc-stagger] > .sc-in { filter: blur(0); }

/* 2. acuity readout in the folio */
.folio__acuity { font-variant-numeric: tabular-nums; color: #1A1A1A; font-weight: 700; display: inline-block; min-width: 4.2ch; }

/* 4. eye-chart sign-off */
.chartsign { display: grid; justify-items: center; gap: .35em; padding-bottom: var(--sc-7); border-bottom: 1px solid var(--sc-hairline); --u: clamp(2.6rem, 1.4rem + 5vw, 6.2rem); }
.chartsign__row { position: relative; margin: 0; display: flex; align-items: baseline; justify-content: center; width: 100%; max-width: 62rem;
  font: 800 calc(var(--u) * var(--f)) / 1 var(--sc-font-display); font-variation-settings: "wdth" 112; letter-spacing: .14em; text-transform: uppercase; color: #1A1A1A; text-align: center; }
.chartsign__row span { padding-left: .14em; }
.chartsign__row i { position: absolute; right: 0; bottom: .15em; font: 600 .72rem var(--sc-font-display); font-style: normal; letter-spacing: .12em; color: #4A4A47; }
.chartsign__row:first-child { letter-spacing: .04em; }
@media (max-width: 640px) {
  .chartsign { --u: clamp(2rem, 1rem + 6vw, 3rem); }
  .chartsign__row { letter-spacing: .08em; }
  .chartsign__row i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-scheme] [data-sc-in], html[data-scheme] [data-sc-stagger] > * { filter: none; transition: opacity 220ms ease; }
}

/* ==========================================================================
   IRIS (Concept C, 2026-10-17): the Noor rings open the site.
   1. The menu button is the Noor mark, exactly as drawn (no pupils).
   2. The menu dilates out of the rings (clip-path circle from the button)
      and contracts back into them on close: same path both ways.
   3. Moving between pages is one short blink (lids), never on scroll.
   Reduced motion: no blink, the menu simply fades.
   ========================================================================== */

/* 1. the rings button */
.menu-toggle--iris .menu-toggle__icon { display: block; width: 38px; gap: 0; }
.iris-rings { display: block; width: 100%; height: auto; overflow: visible; }
@media (max-width: 1099px) {
  .menu-toggle--iris { width: 54px; }
  .menu-toggle--iris .menu-toggle__icon { width: 34px; }
}

/* 2. the menu dilates from the rings */
html[data-scheme] .menu-overlay .overlay__backdrop { background: transparent; }
html[data-scheme] .menu-overlay .menu-panel {
  inset: 0; width: 100%; box-shadow: none;
  padding: 0 max(var(--sc-gutter, 24px), calc((100vw - 1240px) / 2)) calc(48px + env(safe-area-inset-bottom, 0px));
  transform: none;
  clip-path: circle(150vmax at var(--ox, calc(100% - 64px)) var(--oy, 36px));
  transition: clip-path 600ms cubic-bezier(.32,.72,0,1);
}
@starting-style {
  html[data-scheme] .overlay[data-open="true"].menu-overlay .menu-panel { transform: none; clip-path: circle(16px at var(--ox, calc(100% - 64px)) var(--oy, 36px)); }
}
html[data-scheme] .menu-overlay[data-closing] .menu-panel {
  clip-path: circle(16px at var(--ox, calc(100% - 64px)) var(--oy, 36px));
  transition: clip-path 340ms cubic-bezier(.32,.72,0,1);
}
html[data-scheme] .menu-overlay[data-closing] .menu-list li { opacity: 0; transition: opacity 120ms ease; transition-delay: 0ms; }

/* the menu in large type, Archivo speaks, Jost reads */
html[data-scheme] .menu-overlay .menu-panel__nav { padding-top: 32px; }
html[data-scheme] .menu-overlay .menu-list { margin: 0; }
html[data-scheme] .menu-overlay .menu-list a { gap: 4px; padding: 16px 0; }
html[data-scheme] .menu-overlay .menu-list a span { font: 800 1.75rem/1.05 var(--sc-font-display); font-variation-settings: "wdth" 100; letter-spacing: -0.02em; }
html[data-scheme] .menu-overlay .menu-list a small { font: 400 .9375rem/1.4 var(--sc-font-text); color: #565653; }
html[data-scheme] .menu-overlay .menu-panel__foot { padding-top: 48px; }
@media (min-width: 900px) {
  html[data-scheme] .menu-overlay .menu-list { columns: 2; column-gap: 64px; }
  html[data-scheme] .menu-overlay .menu-list li { break-inside: avoid; }
  html[data-scheme] .menu-overlay .menu-list li:last-child { border-bottom: 0; }
  html[data-scheme] .menu-overlay .menu-list a span { font-size: 2.25rem; }
  html[data-scheme] .menu-overlay .menu-panel__foot { grid-template-columns: minmax(0, 320px) 1fr auto; align-items: end; gap: 32px 64px; border-top: 1px solid rgba(26,26,26,.1); padding-top: 32px; margin-top: 48px; }
  html[data-scheme] .menu-overlay .menu-panel__socials { margin-top: 0; }
}

/* 3. the blink between pages */
.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; } }

@media (prefers-reduced-motion: reduce) {
  html[data-scheme] .menu-overlay .menu-panel, html[data-scheme] .menu-overlay[data-closing] .menu-panel { clip-path: none; transition: opacity 160ms ease; }
  @starting-style { html[data-scheme] .overlay[data-open="true"].menu-overlay .menu-panel { clip-path: none; opacity: 0; } }
  .lids { display: none; }
}

/* ==========================================================================
   TYPE + SPACING SYSTEM (2026-10-17). The last word on type, one layer.
   Nine sizes: 13 15 18 22 28 36 48 64 96. Jost reads, Archivo speaks.
   Three weights: 400 (reading), 650 (UI and small heads), 800 (display).
   Tracking by size: big type tightens, small capitals open up, body is 0.
   Spacing: 4 8 12 16 24 32 48 64 96 128.
   Exempt on purpose: the eye charts (.chart, .ec, .chartsign, .chart-title,
   .nh__title), whose graded sizes ARE the idea.
   ========================================================================== */
html[data-scheme="noor"] {
  --t-13: .8125rem; --t-15: .9375rem; --t-18: 1.125rem; --t-22: 1.375rem; --t-28: 1.75rem;
  --t-36: 2.25rem; --t-48: 3rem; --t-64: 4rem; --t-96: 6rem;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
}

/* reading: Jost 18/1.6 (17 on phones), no tracking */
html[data-scheme="noor"] body { font-size: var(--t-18); line-height: 1.6; letter-spacing: 0; }
html[data-scheme="noor"] :is(small, figcaption, .service__meta, .colophon__small, .book-step__fine, .chat__sub, .offer-sec__terms, .ec__fine, .ec__src, .who__src, .menu-panel__contact, .step__advice, .fieldset .soft) { font-size: var(--t-15); line-height: 1.5; }
html[data-scheme="noor"] .lede { font-size: clamp(1.25rem, 1.1rem + .5vw, var(--t-22)); line-height: 1.45; font-weight: 400; letter-spacing: 0; }
html[data-scheme="noor"] .colophon__text { font-size: var(--t-22); line-height: 1.45; letter-spacing: 0; }
html[data-scheme="noor"] .hero__hello { font-size: var(--t-18); line-height: 1.4; }
html[data-scheme="noor"] :is(b, strong) { font-weight: 650; }

/* speaking: Archivo display, 96 / 64 / 48-28 / 28-22, all 800 */
html[data-scheme="noor"] .display { font-family: var(--sc-font-display); font-weight: 800; font-variation-settings: "wdth" 100; text-wrap: balance; }
html[data-scheme="noor"] .display--xl { font-size: clamp(var(--t-48), 1.4rem + 6vw, var(--t-96)); line-height: .95; letter-spacing: -0.035em; }
html[data-scheme="noor"] .display--lg { font-size: clamp(var(--t-36), 1.2rem + 4.4vw, var(--t-64)); line-height: 1; letter-spacing: -0.03em; }
html[data-scheme="noor"] .display--md { font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(var(--t-28), 1.2rem + 2.2vw, var(--t-48)); line-height: 1.05; letter-spacing: -0.025em; }
html[data-scheme="noor"] .display--sm { font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(var(--t-22), 1.1rem + 1vw, var(--t-28)); line-height: 1.1; letter-spacing: -0.015em; }
html[data-scheme="noor"] .hero__copy .display--xl { letter-spacing: -0.035em; }

/* small heads: Archivo 650 */
html[data-scheme="noor"] :where(h3:not(.display), legend, summary) { font-family: var(--sc-font-display); font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; }
html[data-scheme="noor"] :where(h3:not(.display)) { font-size: var(--t-22); }
html[data-scheme="noor"] :is(.qa h3, summary, .addon__name, .pc__name, .pcard__name, .intent__tile b) { font-size: var(--t-18); font-weight: 650; line-height: 1.25; letter-spacing: -0.005em; }
html[data-scheme="noor"] :is(.step legend, .step h3, .addons__title, .package__name) { font-size: var(--t-28); font-weight: 650; letter-spacing: -0.015em; }
html[data-scheme="noor"] .pdp__title { font-size: clamp(var(--t-36), 1.4rem + 2vw, var(--t-48)); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; }
html[data-scheme="noor"] .ec__head { font-size: var(--t-36); font-weight: 800; letter-spacing: -0.025em; }
html[data-scheme="noor"] :is(.ec__body, .book-step__lede, .book-step__offer) { font-size: var(--t-18); }
html[data-scheme="noor"] :is(dd, .package__price small, .plan__total small) { font-weight: 650; }

/* UI text: Archivo 650 at 15 */
html[data-scheme="noor"] :is(.textlink, .corner__links a, .chip span, .pc__price, .pcard__price, .addon__price, .results__count, .store-top__count, .sortby span, .field label, .opt span, .pdp__form .ui, .ui) { font-family: var(--sc-font-display); font-size: var(--t-15); font-weight: 650; letter-spacing: 0; }
html[data-scheme="noor"] .pdp__price { font-size: var(--t-28); font-weight: 650; letter-spacing: -0.01em; }
html[data-scheme="noor"] :is(.pc__brand, .pcard__brand) { font-size: var(--t-15); font-weight: 400; letter-spacing: 0; }

/* labels: Archivo 650, 13, capitals, +0.14em */
html[data-scheme="noor"] :is(.label, dt, th, .pc__badge, .pcard__cat, .pc__quick, .pcard__add, .nh__kicker, .step__q, .who__q, .intent__q, .pdp__brand, .filter legend, .ec__line, .folio, .menu-toggle__text, .map__open) {
  font-family: var(--sc-font-display); font-size: var(--t-13); font-weight: 650; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3;
}
html[data-scheme="noor"] .folio b, html[data-scheme="noor"] .folio__acuity { font-weight: 650; }

/* buttons: one voice, Archivo 650, capitals */
html[data-scheme="noor"] .btn { font-size: var(--t-15); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; line-height: 1; padding: 0 var(--s-5); min-height: 48px; }
html[data-scheme="noor"] .btn--small { font-size: var(--t-13); letter-spacing: .1em; min-height: 44px; padding: 0 var(--s-4); }

@media (max-width: 640px) {
  html[data-scheme="noor"] body { font-size: 1.0625rem; }
}
html[data-scheme="noor"] :is(.nh__lede, .visit-find address) { font-size: var(--t-18); line-height: 1.6; }
html[data-scheme="noor"] .chat__title { font-size: var(--t-18); font-weight: 650; }
html[data-scheme="noor"] :is(.fieldset legend, .fieldset .soft, .addons__title .soft, .pdp__book, .pdp__form .ui, span.ui) { font-size: var(--t-15); }

/* ==========================================================================
   KNOW YOUR EYE (2026-10-17): the anatomy of the eye as the underlying theme.
   A cross-section drawn as you scroll; each part gets one sourced fact.
   Full scroll: the stage holds while the eye is drawn, then lets go.
   ========================================================================== */
.anat { position: relative; height: 420vh; }
.anat__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: auto 1fr auto; gap: var(--s-5, 24px);
  padding: calc(var(--chrome-h, 72px) + 24px) max(var(--sc-gutter, 24px), calc((100vw - 1240px) / 2)) 48px; overflow: hidden; }
.anat__head { display: grid; gap: 12px; }
.anat__head .display { margin: 0; }
.anat__svg { width: min(100%, 980px); height: 100%; max-height: 52vh; margin: 0 auto; display: block; overflow: visible; align-self: center; }
.anat__line { fill: none; stroke: #1A1A1A; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.anat__line--thin { stroke-width: 1; stroke: #9A9A95; }
.anat__ray { fill: none; stroke: #8A8A86; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.anat__focus { fill: #1A1A1A; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.6); transition: opacity 300ms ease, transform 400ms cubic-bezier(.23,1,.32,1); }
.anat__focus.on { opacity: 1; transform: none; }
.anat__tag { font: 650 11px var(--sc-font-display); letter-spacing: .14em; fill: #8A8A86; opacity: 0; transition: opacity 300ms ease, fill 200ms ease; }
.anat__tag.on { opacity: 1; }
.anat__tag.now { fill: #1A1A1A; }
.anat__copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 64px; align-items: end; }
.anat__cards { list-style: none; margin: 0; padding: 0; display: grid; }
.anat__cards li { grid-area: 1 / 1; display: grid; gap: 8px; max-width: 46ch; opacity: 0; transform: translate3d(0, 10px, 0); filter: blur(6px);
  transition: opacity 360ms ease, transform 480ms cubic-bezier(.23,1,.32,1), filter 480ms cubic-bezier(.23,1,.32,1); }
.anat__cards li.on { opacity: 1; transform: none; filter: blur(0); }
.anat__part { margin: 0; font: 800 var(--t-28, 1.75rem)/1.1 var(--sc-font-display); letter-spacing: -0.015em; color: #1A1A1A; }
.anat__fact { margin: 0; font-size: var(--t-18, 1.125rem); line-height: 1.6; color: #3D3D3A; }
.anat__src { margin: 0; font-size: var(--t-13, .8125rem); line-height: 1.4; color: #565653; text-align: right; max-width: 22ch; }
.anat__src a { color: inherit; }
@media (max-width: 760px) {
  .anat { height: 380vh; }
  .anat__stage { padding-bottom: 32px; gap: 16px; }
  .anat__svg { max-height: 34vh; }
  .anat__tag { display: none; }
  .anat__copy { grid-template-columns: 1fr; }
  .anat__cards li { min-height: 9.5rem; align-content: start; }
  .anat__src { text-align: left; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .anat { height: auto; }
  .anat__stage { position: relative; height: auto; }
  .anat__line, .anat__ray { stroke-dashoffset: 0; }
  .anat__focus, .anat__tag { opacity: 1; transform: none; transition: none; }
  .anat__cards { gap: 24px; }
  .anat__cards li { grid-area: auto; opacity: 1; transform: none; filter: none; transition: none; }
  .anat__copy { grid-template-columns: 1fr; }
}
html[data-scheme] .anat { background: #F7F7F5; z-index: 1; isolation: isolate; }
.anat__copy { grid-template-columns: 1fr; gap: 16px; }
.anat__src { text-align: left; max-width: none; }

/* ==========================================================================
   NEWSLETTER SIGN-UP (2026-10-18): "The Noor letter", in every footer.
   ========================================================================== */
.signup { display: grid; gap: 16px; padding: 32px 0; border-top: 1px solid var(--sc-hairline, rgba(26,26,26,.12)); }
.signup__head { display: grid; gap: 8px; }
.signup__head .label { margin: 0; }
.signup__lede { margin: 0; font-size: var(--t-22, 1.375rem); line-height: 1.45; max-width: 40ch; }
.signup__row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 16px; align-items: end; max-width: 60rem; }
.signup .field { display: grid; gap: 4px; }
.signup .field label { font-family: var(--sc-font-display); font-size: var(--t-15, .9375rem); font-weight: 650; }
.signup input[type="email"], .signup input[name="name"] { min-height: 48px; padding: 0 12px; border: 1px solid #1A1A1A; border-radius: var(--radius, 3px); background: #FFFFFF; color: #1A1A1A; font: inherit; font-size: var(--t-18, 1.125rem); }
.signup input:focus-visible { outline: 2px solid #1A1A1A; outline-offset: 2px; }
.signup input[aria-invalid="true"] { border-color: #A3261B; }
.signup__topics { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.signup__topics legend { width: 100%; margin-bottom: 8px; font-family: var(--sc-font-display); font-size: var(--t-15, .9375rem); font-weight: 650; }
.signup__topic { position: relative; cursor: pointer; }
.signup__topic input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.signup__topic span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid rgba(26,26,26,.3); border-radius: 999px; font-family: var(--sc-font-display); font-size: var(--t-15, .9375rem); font-weight: 650; transition: background-color 160ms ease, color 160ms ease, transform 140ms cubic-bezier(.23,1,.32,1); }
.signup__topic input:checked + span { background: #1A1A1A; color: #FFFFFF; border-color: #1A1A1A; }
.signup__topic input:focus-visible + span { outline: 2px solid #1A1A1A; outline-offset: 2px; }
.signup__topic:active span { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .signup__topic:hover span { border-color: #1A1A1A; } }
.signup__fine { margin: 0; max-width: 60ch; font-size: var(--t-13, .8125rem); line-height: 1.5; color: #565653; }
.signup__fine a { color: inherit; }
.signup__status { margin: 0; min-height: 1.5em; font-weight: 650; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 760px) {
  .signup__row { grid-template-columns: 1fr; }
  .signup__row .btn { width: 100%; }
}

/* ==========================================================================
   CALM TYPE (2026-10-19). Owner: "the size of the titles, subtitles and text
   vary too much. I need it to be easily visible to the eye and an easy read."
   Five reading levels, close together, the same on every page:
     Page title      56 desktop / 36 phone   Archivo 800
     Section heading 40 / 28                 Archivo 800
     Sub-heading     24 / 22                 Archivo 650
     Subtitle (lede) 20 / 19                 Jost 400
     Body            18 / 17                 Jost 400, line-height 1.65
   plus small (15) and labels (13, capitals). The eye charts keep their
   step-down, but within 56 to 20 instead of 118 to 12.
   This layer is last on purpose: it wins over every earlier size.
   ========================================================================== */
html[data-scheme="noor"] {
  --c-title: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
  --c-head: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem);
  --c-sub: clamp(1.375rem, 1.3rem + .3vw, 1.5rem);
  --c-lede: clamp(1.1875rem, 1.15rem + .15vw, 1.25rem);
}

/* body: steady and readable */
html[data-scheme="noor"] body { line-height: 1.65; }
html[data-scheme="noor"] :is(.prose, .qa p, .lede, .nh__lede, .anat__fact) { max-width: 62ch; }

/* page titles: one size everywhere */
html[data-scheme="noor"] :is(.display--xl, .hero__copy .display--xl, .nh__title, .pdp__title) {
  font-size: var(--c-title); line-height: 1.04; letter-spacing: -0.03em;
}
html[data-scheme="noor"] .nh__title { font-stretch: 100%; font-variation-settings: "wdth" 100; }

/* section headings */
html[data-scheme="noor"] :is(.display--lg, .display--md, .ec__head) {
  font-size: var(--c-head); line-height: 1.1; letter-spacing: -0.022em;
}

/* sub-headings */
html[data-scheme="noor"] :is(.display--sm, .step legend, .step h3, .addons__title, .package__name, .anat__part) {
  font-size: var(--c-sub); line-height: 1.2; letter-spacing: -0.012em;
}
html[data-scheme="noor"] :where(h3:not(.display)) { font-size: var(--c-sub); }
html[data-scheme="noor"] :is(.qa h3, summary, .pc__name, .pcard__name, .addon__name, .intent__tile b) { font-size: 1.125rem; }

/* subtitles */
html[data-scheme="noor"] :is(.lede, .colophon__text, .signup__lede) { font-size: var(--c-lede); line-height: 1.55; }

/* the menu: large but in the same family of sizes */
html[data-scheme="noor"] .menu-overlay .menu-list a span { font-size: var(--c-sub); }
@media (min-width: 900px) { html[data-scheme="noor"] .menu-overlay .menu-list a span { font-size: 1.75rem; } }

/* inner-page eye-chart titles: big line = page title, then subtitle, then text */
html[data-scheme="noor"] .chart-title__row--1 > span:first-child { font-size: var(--c-title); letter-spacing: 0; font-variation-settings: "wdth" 110; }
html[data-scheme="noor"] .chart-title__row--2 > span:first-child { font-size: var(--c-lede); letter-spacing: .12em; }
html[data-scheme="noor"] .chart-title__row--3 > span:first-child { font-size: 1.125rem; }

/* Read the chart: top line 56, bottom lines never under 20 */
html[data-scheme="noor"] .ec { --ec-u: min(3.5rem, 11vw, 9svh); }
html[data-scheme="noor"] .ec__row { font-size: max(1.25rem, calc(var(--ec-u) * (0.45 + var(--f) * 0.55))); }

/* footer eye-chart sign-off: 56 down to 20 */
html[data-scheme="noor"] .chartsign { --u: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); }
html[data-scheme="noor"] .chartsign__row { font-size: max(1.25rem, calc(var(--u) * (0.4 + var(--f) * 0.6))); }

@media (max-width: 640px) {
  html[data-scheme="noor"] body { line-height: 1.6; }
  html[data-scheme="noor"] .ec { --ec-u: min(2.5rem, 10vw, 7svh); }
  html[data-scheme="noor"] .ec__row { font-size: max(1.125rem, calc(var(--ec-u) * (0.45 + var(--f) * 0.55))); }
}
html[data-scheme="noor"] .package__price { font-size: var(--c-head); }

/* ==========================================================================
   READABILITY (2026-10-20). Owner: "make sure everything is clear to read at
   any point on the website". The whole rem-based type system scales up one
   step from the root, and the small caps labels and buttons get a floor.
   ========================================================================== */
html[data-scheme="noor"] { font-size: 112.5%; }
html[data-scheme="noor"] .btn { font-size: .9rem; letter-spacing: .05em; }
html[data-scheme="noor"] .btn--small { font-size: .85rem; }
html[data-scheme="noor"] :is(small, figcaption, .label, .eyebrow) { font-size: max(.875rem, 15px); }

/* Frame pages (showroom, brands, every frame): thinner glass so the showroom film reads through.
   Verified with lab/contrast.mjs: 0 fails desktop + mobile. */
html[data-scheme="noor"]:is([data-film="store"], [data-film^="brand:"]) :is(.page-head, .page-body) {
  --bone: rgba(255, 255, 255, 0.74); --bone-deep: rgba(250, 250, 249, 0.8);
}

/* ================================================ phones: lighter chrome, tighter rhythm (2026-10-21)
   Fewer heavy black blocks on a small screen: a one-line offer strip, a slimmer
   action bar, smaller floating buttons (the empty visit bag hides), and section
   spacing scaled to the screen instead of the desktop rhythm. */
@media (max-width: 860px) {
  :root { --sc-section: clamp(2.75rem, 8vw, 4rem); }
  .corner .btn { min-height: 38px; padding: .5rem .75rem; font-size: .8125rem; }
  .offer-banner { flex-wrap: nowrap; gap: .6rem; padding: .5rem 16px; font-size: .8125rem; line-height: 1.3; text-align: left; }
  .offer-banner span { min-width: 0; }
  .offer-banner a { flex: none; font-size: .8125rem; }
  .page-head { padding-top: calc(var(--chrome-h) + var(--sc-6)); padding-bottom: var(--sc-6); }
  .page-body { padding-bottom: var(--sc-8); }
  .chart-title { margin-bottom: var(--sc-6); }
  .actbar { gap: 6px; padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .actbar a { min-height: 42px; border-radius: 999px; font-size: .75rem; letter-spacing: .05em; gap: 5px; }
  .actbar svg { width: 15px; height: 15px; }
  body { padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px)); }
  .dock { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); right: 12px; gap: 8px; }
  .dock__btn { width: 44px; height: 44px; box-shadow: 0 1px 2px rgba(6,24,20,.16), 0 8px 20px -8px rgba(6,24,20,.4); }
  .dock__btn svg { width: 20px; height: 20px; }
  #noor-cart-btn:has(.dock__count[data-n="0"]) { display: none; }
  .chat { bottom: 64px; }
  .chartsign { gap: .2em; padding-bottom: var(--sc-6); }
  html[data-scheme="noor"] .chartsign { --u: clamp(1.75rem, 1rem + 4vw, 2.25rem); }
  html[data-scheme="noor"] .chartsign__row { font-size: max(1rem, calc(var(--u) * (0.4 + var(--f) * 0.6))); }
}
@media (max-width: 860px) {
  html .pdp { padding-top: calc(var(--chrome-h) + var(--sc-5)); padding-bottom: var(--sc-8); }
  html .pdp__crumbs { margin-bottom: var(--sc-4); }
}
/* the offer strip already clears the fixed header: the page after it must not add the header height again */
@media (max-width: 860px) {
  html .offer-banner + .pdp, html .offer-banner + .page-head { padding-top: var(--sc-6); }
}

/* grids never grow wider than the screen because of one long word (an email address) */
.spread > * { min-width: 0; }
.trade-card dd, .prose a[href^="mailto:"] { overflow-wrap: anywhere; }

/* ================================================ performance + touch (2026-10-21)
   1. The offer strip is added by site.js at the top of <main>. Until it has run, an empty
      slot of the same size holds its place, so the page doesn't jump down when it lands
      (it was the biggest layout shift on every inner page). Heights match the strip at
      each width; site.js sets html[data-offer-set] the moment it has decided. */
html[data-scheme]:not([data-offer-set]) main::before { content: ""; display: block; margin-top: var(--chrome-h); height: 47.3px; }
@media (max-width: 860px) {
  html[data-scheme]:not([data-offer-set]) main::before { height: 37px; }
  html[data-scheme]:not([data-offer-set]) main > .page-head:first-child,
  html[data-scheme]:not([data-offer-set]) main > .pdp:first-child { padding-top: var(--sc-6); }
}
@media (max-width: 495px) { html[data-scheme]:not([data-offer-set]) main::before { height: 56px; } }
@media (max-width: 329px) { html[data-scheme]:not([data-offer-set]) main::before { height: 75px; } }
/* 2. Phones: the Call / Book / Visit bar keeps 44px targets (it was 42px). */
@media (max-width: 860px) {
  .actbar a { min-height: 44px; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* "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; }