/* ==========================================================================
   NOOR EYEWEAR: the calm layer (loaded last on every page)
   One set of surfaces, radii, shadows and timings so every page reads as one
   system: the top nav is one frosted pill with Book inside it, the bag and the
   assistant share one small dock that steps aside while you read, and cards,
   chips and labels use the same quiet depth.
   ========================================================================== */
:root {
  --calm-ink: #1A1A1A;
  --calm-gold: #C98A12;
  --calm-teal: #0B7F7A;
  --calm-glass: rgba(255, 255, 255, .88);
  --calm-hair: rgba(26, 26, 26, .12);
  --calm-lift: 0 1px 2px rgba(26, 26, 26, .05), 0 10px 30px -14px rgba(26, 26, 26, .24);
  --calm-float: 0 1px 2px rgba(26, 26, 26, .06), 0 18px 44px -18px rgba(26, 26, 26, .32);
  --calm-ease: cubic-bezier(.23, 1, .32, 1);
  --calm-card: 18px;
}

/* ------------------------------------------------------------ the top nav: one pill */
html[data-scheme] .corner .corner__book {
  min-height: 40px; padding: 0 1.05rem; border-radius: 999px; border: 0;
  background: var(--calm-ink); color: #fff; box-shadow: none;
  font: 600 .88rem/1 var(--sc-font-display); letter-spacing: 0; text-transform: none;
  transition: transform 140ms var(--calm-ease), background-color 160ms ease;
}
html[data-scheme] .corner .corner__book:active { transform: scale(.97); }
html[data-scheme] .corner .corner__book:focus-visible { outline: 2px solid var(--calm-teal); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { html[data-scheme] .corner .corner__book:hover { background: #333; } }
.corner .menu-toggle {
  min-height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--calm-ink);
  letter-spacing: .06em;
}
.corner .menu-toggle:hover { background: rgba(26, 26, 26, .06); color: var(--calm-ink); }
.corner .menu-toggle:focus-visible { outline: 2px solid var(--calm-teal); outline-offset: 2px; }
@media (min-width: 1100px) {
  .corner {
    gap: 2px; padding: 4px; border-radius: 999px;
    background: var(--calm-glass); border: 1px solid var(--calm-hair); box-shadow: var(--calm-lift);
    -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  }
  .corner__links, html[data-ground="nile"] .corner__links { background: none; border: 0; padding: 0; margin: 0 4px 0 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .corner__links a, html[data-ground="nile"] .corner__links a { color: var(--calm-ink); padding: .5rem .8rem; }
  .corner__links a:hover, html[data-ground="nile"] .corner__links a:hover { background: rgba(26, 26, 26, .06); }
  html[data-scheme] .corner__links a[aria-current="page"], html[data-ground="nile"] .corner__links a[aria-current="page"] { background: rgba(26, 26, 26, .08); color: var(--calm-ink); }
  .corner .menu-toggle { padding: 0 .9rem 0 .8rem; }
}
@media (max-width: 1099px) {
  .corner .menu-toggle { background: rgba(26, 26, 26, .05); }
}

/* ------------------------------------------------------------ the dock: bag + assistant in one capsule */
.dock {
  gap: 2px; padding: 4px; border-radius: 999px;
  background: var(--calm-glass); border: 1px solid var(--calm-hair); box-shadow: var(--calm-float);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  transition: transform 260ms var(--calm-ease), opacity 200ms ease;
}
.dock .dock__btn, html[data-scheme] .dock .dock__btn {
  width: 44px; height: 44px; background: transparent; color: var(--calm-ink); border: 0; box-shadow: none;
  transition: transform 140ms var(--calm-ease), background-color 160ms ease;
}
.dock .dock__btn svg { width: 21px; height: 21px; }
@media (hover: hover) and (pointer: fine) { .dock .dock__btn:hover { transform: none; background: rgba(26, 26, 26, .07); } }
.dock .dock__btn:active { transform: scale(.94); }
.dock .dock__btn:focus-visible { outline: 2px solid var(--calm-teal); outline-offset: 2px; }
.dock .dock__count, html[data-scheme] .dock .dock__count { top: 2px; right: 2px; min-width: 18px; height: 18px; line-height: 18px; font-size: .68rem; background: var(--calm-gold); color: #fff; }
.dock.is-away { transform: translate3d(0, 16px, 0) scale(.96); opacity: 0; pointer-events: none; }
@media (max-width: 860px) { .dock.is-away { transform: translate3d(0, 90px, 0); } }
@media (min-width: 861px) { .dock { right: 14px; bottom: 22px; } }
@media (prefers-reduced-motion: reduce) { .dock, .dock.is-away { transform: none; transition: opacity 150ms ease; } }
@media (prefers-reduced-transparency: reduce) { .corner, .dock { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ------------------------------------------------------------ Lens Lab: a real room, glass controls, no scan lines */
.lab__stage { background: #2A2F2C; box-shadow: var(--calm-float); }
.lab__stage::before { display: none; }
.lab__sun, .lab__map, .lab__caption, .lab__hint {
  background: rgba(22, 24, 23, .52); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.lab__sun-label { color: rgba(255, 255, 255, .72); }
.lab__map { letter-spacing: .06em; }
.lab__map::before {
  width: 18px; height: 18px; border-radius: 0; box-shadow: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6.6c0-1.5 1-2.3 2.7-2.3h10.6c1.7 0 2.7.8 2.7 2.3v7.9c0 3.2-2.7 5.2-8 5.2s-8-2-8-5.2Z'/%3E%3Cpath d='M4.3 10h15.4M6 14.6h12' stroke-dasharray='2 2.2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6.6c0-1.5 1-2.3 2.7-2.3h10.6c1.7 0 2.7.8 2.7 2.3v7.9c0 3.2-2.7 5.2-8 5.2s-8-2-8-5.2Z'/%3E%3Cpath d='M4.3 10h15.4M6 14.6h12' stroke-dasharray='2 2.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lab__map[aria-pressed="false"] { background: rgba(22, 24, 23, .32); color: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.lab__map[aria-pressed="false"]::before { filter: none; opacity: .6; }
@media (hover: hover) and (pointer: fine) { .lab__map:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); } }
.lab__hold { background: rgba(255, 255, 255, .92); color: var(--calm-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 10px 26px -12px rgba(0, 0, 0, .45); }
@media (hover: hover) and (pointer: fine) { .lab__hold:hover { background: #fff; } }
.lab__hold:active, .lab__hold[aria-pressed="true"] { background: var(--calm-ink); color: #fff; }
.lab__stage.is-off .lab__caption::before { color: #F3C76E; }
/* labels on the lens: a white dot and a quiet leader, text that reads on any part of the photo */
.lab__tag { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 0 16px rgba(0, 0, 0, .4); letter-spacing: .1em; }
.lab__tag small { color: rgba(255, 255, 255, .9); }
.lab__tag::before { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .28), 0 1px 4px rgba(0, 0, 0, .35); }
.lab__tag::after { background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .25)); }
.lab__tag.is-left::after { background: linear-gradient(270deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .25)); }
.lab__sun input[type="range"] { accent-color: var(--calm-gold); }
.lab__stage::after { display: none; }     /* no coloured ring around the stage: the lens itself shows the choice */
/* phones: one tidy row of controls over the photo, no labels running off the edge */
@media (max-width: 899px) {
  .lab__hud { flex-wrap: nowrap; gap: 8px; align-items: center; }
  .lab__sun { padding: 6px 10px; gap: 2px; }
  .lab__sun-label { font-size: .62rem; }
  .lab__sun-ends > span { display: none; }
  .lab .lab__sun input[type=range] { width: 78px; }
  .lab__btns { flex-wrap: nowrap; gap: 6px; }
  .lab__map { width: 44px; min-height: 44px; padding: 0; justify-content: center; font-size: 0; letter-spacing: 0; }
  .lab__hold { white-space: nowrap; padding: 0 11px; font-size: .72rem; }
  .lab .lab__bar { margin-right: 112px; }      /* the running total leaves the dock its corner, side by side */
  .lab .lab__bar .plan__total small:last-child { display: none; }
  .lab__tags { display: none; }
  .lab__hint { translate: -50% -100px; font-size: .8rem; }
}

/* add-ons: lens icons in the site's own hand instead of coloured balls */
.lab-add__dot, .lab-add .lab-add__dot {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: #F4F2EC; box-shadow: inset 0 0 0 1px var(--calm-hair); color: var(--calm-ink);
  --ic: var(--calm-teal); --iw: #CDE7E5;
  transition: background-color 200ms ease, transform 200ms var(--calm-ease);
}
.lab-add__dot svg { width: 26px; height: 26px; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lab-add[data-hue="amber"] .lab-add__dot, .lab-add[data-hue="violet"] .lab-add__dot { --ic: var(--calm-gold); --iw: #F3E3C3; }
.lab-add:has(input:checked) .lab-add__dot { transform: none; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ic); }

/* prescription: the lens edge, drawn, so "thinner" is something you can see */
.lab-rx__edge { display: block; width: 100%; max-width: 220px; height: 40px; margin: 6px 0 0; color: var(--calm-ink); }
.lab-rx__edge g { transform-box: fill-box; transform-origin: center; transition: transform 320ms var(--calm-ease); }
.lab-rx__edge path { fill: #DCEFEE; stroke: currentColor; stroke-width: 1.4; }
.lab-rx__edge text { font: 600 10px var(--sc-font-display); fill: #6A6A66; letter-spacing: .04em; }

/* the running total: a light card, not a black slab */
.lab__bar {
  background: var(--calm-glass); color: var(--calm-ink); border: 1px solid var(--calm-hair); box-shadow: var(--calm-float);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
}
.lab__bar .plan__line { color: #4A4A47; }
.lab__bar .plan__total b { color: var(--calm-ink); }
.lab__bar .plan__total small { color: #6A6A66; }
.lab__bar .btn { background: var(--calm-ink) !important; color: #fff !important; border-radius: 999px; }
.lab__bar .textlink { color: var(--calm-ink); }

/* frame colours: real swatches, a calm selected state */
.lab__swatches button[aria-pressed="true"] { background: #fff; color: var(--calm-ink); box-shadow: inset 0 0 0 1.5px var(--calm-ink); }

/* ------------------------------------------------------------ one button: a soft pill in sentence case, like the nav */
html[data-scheme="noor"] .btn {
  border-radius: 999px; text-transform: none; letter-spacing: 0; font-weight: 600;
  transition: transform 140ms var(--calm-ease), background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
html[data-scheme="noor"] .btn:active { transform: scale(.97); }
html[data-scheme="noor"] .btn:focus-visible { outline: 2px solid var(--calm-teal); outline-offset: 3px; }

/* ------------------------------------------------------------ one depth for cards */
:is(.lab-pkg, .lab-add, .qa, .card, .pcard, .fx-card) { border-radius: var(--calm-card); }

/* ------------------------------------------------------------ no accidental windows onto the background film
   A heading's top margin used to fall out of its section and leave a see-through strip, so the film
   behind the page showed as a cut band. Sections now contain their margins; film appears only where
   it is meant to, in a framed panel. */
.page-head, .page-body, .g-bone, .g-bone-deep, .g-nile, .g-nile-deep { display: flow-root; }
.film-card { position: relative; margin: clamp(48px, 7vw, 88px) 0 clamp(8px, 2vw, 24px); border-radius: 24px; overflow: hidden; background: #1E1E1C; box-shadow: var(--calm-float); aspect-ratio: 21 / 9; }
.film-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.film-card figcaption { position: absolute; left: 20px; bottom: 18px; margin: 0; padding: 8px 14px; border-radius: 999px; font: 500 .9rem/1.2 var(--sc-font-text); color: #fff; background: rgba(22, 24, 23, .45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (max-width: 700px) { .film-card { aspect-ratio: 4 / 3; border-radius: 18px; } }

/* Lens Lab: your eyes without glasses, and the Hardcoat switch */
.lab__eyes { border: 0; margin: 0 0 18px; padding: 0; }
.lab__eyes .lab__title { margin-bottom: 10px; }
.lab__eyes-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lab__eyes-row label { position: relative; cursor: pointer; }
.lab__eyes-row input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lab__eyes-row span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--calm-hair); font: 600 .9rem/1 var(--sc-font-display); color: var(--calm-ink);
  transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--calm-ease); }
.lab__eyes-row input:checked + span { background: var(--calm-ink); color: #fff; box-shadow: none; }
.lab__eyes-row input:focus-visible + span { outline: 2px solid var(--calm-teal); outline-offset: 2px; }
.lab__eyes-row label:active span { transform: scale(.97); }
.lab-ar { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--calm-card); background: #fff;
  box-shadow: inset 0 0 0 1px var(--calm-hair); cursor: pointer; font-size: .9rem; line-height: 1.45; color: #4A4A47; }
.lab-ar b { display: block; font: 700 1rem/1.25 var(--sc-font-display); color: var(--calm-ink); margin-bottom: 2px; }
.lab-ar input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--calm-teal); }
/* worn view: labels sit inside the lens, so they need no room beside it */
.lab__tag.is-left { translate: calc(-100% + 5px) -50%; }

/* free home visit nudge (home, eye exams) */
.hv-promo { display: grid; gap: 8px; margin-top: var(--sc-6, 24px); padding: 16px 18px; border-radius: 16px; background: rgba(243,199,110,.16); border: 1px solid rgba(201,138,18,.28); }
.hv-promo p { margin: 0; line-height: 1.55; }
.hv-promo .textlink { justify-self: start; }
.where .hv-promo { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
.where .hv-promo .textlink { color: #fff; }

/* ------------------------------------------------------------ the top bar, symmetrical (owner, 29 Oct 2026)
   Menu on the left, the NOOR wordmark centred, Book on the right: the same on phone and desktop.
   The page links live in the menu; .corner spans the width but only its two pills take clicks. */
.corner {
  left: var(--sc-gutter); right: var(--sc-gutter); top: 12px; justify-content: space-between; gap: 0;
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; pointer-events: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
@media (min-width: 1100px) { .corner { padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.corner > * { pointer-events: auto; }
.corner .corner__links { display: none; }
.corner .menu-toggle, html[data-scheme] .corner .corner__book {
  min-height: 44px; border-radius: 999px; box-shadow: var(--calm-lift);
}
.corner .menu-toggle {
  order: -1; padding: 0 1rem 0 .85rem; gap: .55rem;
  background: var(--calm-glass); border: 1px solid var(--calm-hair);
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  transition: transform 140ms var(--calm-ease), background-color 160ms ease;
}
@media (max-width: 1099px) { .corner .menu-toggle { background: var(--calm-glass); } }
@media (hover: hover) and (pointer: fine) { .corner .menu-toggle:hover { background: #fff; } }
.corner .menu-toggle:active { transform: scale(.97); }
html[data-scheme] .corner .corner__book { padding: 0 1.15rem; }
.mark {
  left: 50%; top: 12px; transform: translateX(-50%); min-height: 44px; padding: 0 8px; border-radius: 8px;
  background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;   /* just the wordmark, no pill (owner) */
}
html[data-ground="nile"] .mark { background: none; }
.mark img { width: 84px; }
@media (max-width: 520px) {
  .corner { left: 12px; right: 12px; }
  .corner .menu-toggle { padding: 0 .8rem; }
  .corner .menu-toggle__text { display: none; }          /* phone: the icon alone, so the wordmark keeps the centre */
  .mark img { width: 72px; }
  .mark { padding: 0 6px; }
}
@media (prefers-reduced-transparency: reduce) { .corner .menu-toggle { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ------------------------------------------------------------ phones: one floating capsule, no bottom bar (29 Oct 2026)
   Menu and Book live in the top bar; Call, the visit bag and the assistant share the small dock bottom right. */
.dock .dock__btn--call { display: none; }
@media (max-width: 860px) {
  .dock .dock__btn--call { display: grid; }
  body { padding-bottom: 0; }
  .dock { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); right: 12px; }
  .lab__bar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  body:has(.lab__view) .lab__bar { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .colophon { padding-bottom: calc(var(--sc-7) + 72px + env(safe-area-inset-bottom, 0px)); }
}

/* the frosted band behind the top bar covers the ticker and the bar together, and fades out at its lower
   edge (a scroll-edge effect) instead of ending on a hard line */
html[data-scheme] body::before {
  height: calc(var(--tk, 0px) + 70px + env(safe-area-inset-top, 0px)); border-bottom: 0;
  background: rgba(248, 247, 244, .95); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  -webkit-mask: linear-gradient(#000 calc(100% - 16px), transparent); mask: linear-gradient(#000 calc(100% - 16px), transparent);
}

/* phones, Lens Lab: the stage clears the top bar, the caption stays short, the price bar spans the width
   (the dock sits below it now, not beside it) */
@media (max-width: 899px) {
  .lab__stage { top: 66px; }
  .lab__caption { font-size: .8rem; line-height: 1.38; max-height: none; overflow: hidden; padding: 9px 12px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }   /* whole lines only, never cut mid-line */
  .lab .lab__bar { margin-right: 0; }
  .lab .lab__bar .plan__line { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
/* phones, showroom: the Filters strip meets the top bar, so nothing peeks between them */
@media (max-width: 1099px) {
  .fx-filters-open { top: 60px; clip-path: inset(-18px -100vmax -10px); }
}

/* ------------------------------------------------------------ phones: the Lens Lab is one labelled picture
   The 3D lab (drag, light slider, lens map, hold button, caption) is too much for a phone screen. Phones get the
   same desk scene as the lens guide, with Far / Middle / Near labels, pinned under the top bar while the choices
   scroll beneath it; it follows the eyes, the lens and the sun option. Computers keep the 3D lab. */
.lab__view { display: none; }
@media (max-width: 899px) {
  .lab .lab__stage { display: none; }
  .lab .lab__view {
    display: grid; gap: 8px; position: sticky; z-index: 6; top: calc(var(--tk, 0px) + 64px); margin: 0 0 4px;
    padding: 8px 8px 10px; border-radius: 20px; background: rgba(248, 247, 244, .94);
    -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); box-shadow: var(--calm-lift);
  }
  .lab__view svg { display: block; width: min(100%, calc(32svh * 1.5)); height: auto; aspect-ratio: 3 / 2; margin: 0 auto; border-radius: 14px; background: #EDEAE4; }
  .lab__view-tint { position: absolute; left: 8px; right: 8px; top: 8px; aspect-ratio: 3 / 2; width: min(calc(100% - 16px), calc(32svh * 1.5)); margin: 0 auto;
    border-radius: 14px; mix-blend-mode: multiply; pointer-events: none; transition: background-color 220ms ease; }
  .lab__view figcaption { margin: 0; padding: 0 4px; font: 500 .875rem/1.4 var(--sc-font-text); color: #3D3D3A; font-style: normal; text-align: center; }
}
@media (max-width: 899px) and (prefers-reduced-transparency: reduce) { .lab .lab__view { background: #F8F7F4; -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* the top bar is symmetric, so Book must leave the centre to the wordmark: the short label ("Book exam") up to
   tablet width, the full one only where both pills and the wordmark have room */
@media (max-width: 640px) {
  .corner__book .lg { display: none; }
  .corner__book .sm { display: inline; }
}
@media (max-width: 899px) { .lab .lab__view svg, .lab__view-tint { width: min(100%, calc(27svh * 1.5)); } }
/* phones, lenses page: the price bar is the one floating control at the bottom; the dock steps aside
   (Book stays in the top bar) */
@media (max-width: 899px) { body:has(.lab__view) .dock { display: none; } .lab .lab__bar { margin-bottom: 0; } }
@media (max-width: 899px) { .lab .lab__view svg, .lab__view-tint { width: min(100%, calc(25svh * 1.5)); } }
@media (max-width: 899px) {
  .lab__view figcaption { font-size: .8125rem; line-height: 1.35; color: #5A5A56; }
  .lab__view figcaption b { display: block; font: 650 .9375rem/1.3 var(--sc-font-display); color: #1A1A1A; }
}

/* ------------------------------------------------------------ Lens Lab on every screen: one labelled picture (30 Oct 2026)
   Computers now get the same picture as phones instead of the 3D lab: pinned on the left and large, the choices
   scrolling on the right. The picture, its sun tint and its reflections share one grid cell, so they always line up. */
.lab .lab__view { display: grid; grid-template-columns: minmax(0, 1fr); --pic: min(100%, calc(25svh * 1.5)); }
.lab .lab__view > svg, .lab .lab__view-tint, .lab .lab__view-glare {
  grid-area: 1 / 1; position: static; justify-self: center; width: var(--pic); height: auto; aspect-ratio: 3 / 2; margin: 0; border-radius: 14px;
}
.lab .lab__view-glare {   /* no anti-reflective coating: two bands of window light and a lamp's glint on the lens */
  pointer-events: none; opacity: 0; mix-blend-mode: screen; transition: opacity 200ms ease;
  background: radial-gradient(7% 5% at 74% 30%, rgba(255,255,255,.95), rgba(255,255,255,.35) 45%, transparent 75%),
    radial-gradient(5% 4% at 31% 62%, rgba(255,250,235,.85), transparent 75%),
    linear-gradient(112deg, transparent 12%, rgba(255,255,255,.62) 19%, rgba(255,255,255,.34) 27%, transparent 33%),
    linear-gradient(112deg, transparent 54%, rgba(225,238,255,.5) 58%, rgba(225,238,255,.18) 63%, transparent 67%),
    linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1));   /* and a light haze over the whole lens */
}
.lab .lab__view-glare.is-on { opacity: 1; }
.lab .lab__view figcaption { grid-row: 2; }
@media (min-width: 900px) {
  .lab { grid-template-columns: minmax(0, 1.3fr) minmax(340px, .7fr); }
  .lab .lab__view {
    position: sticky; top: calc(var(--tk, 0px) + 92px); gap: 14px; padding: 14px 14px 18px; border-radius: 26px;
    background: #fff; box-shadow: var(--calm-float); --pic: 100%;
    /* the card hugs the picture: as wide as the column allows, but never taller than the screen leaves room for */
    width: 100%; max-width: calc((100svh - var(--tk, 0px) - 250px) * 1.5 + 28px); justify-self: center;
  }
  .lab .lab__view > svg, .lab .lab__view-tint, .lab .lab__view-glare { border-radius: 16px; }
  .lab .lab__view figcaption { font-size: 1rem; line-height: 1.45; color: #5A5A56; text-align: center; }
  .lab .lab__view figcaption b { display: block; font: 650 1.25rem/1.3 var(--sc-font-display); color: #1A1A1A; margin-bottom: 2px; }
}
@media (prefers-reduced-motion: reduce) { .lab .lab__view-glare { transition: none; } }

/* ------------------------------------------------------------ desktop top bar: one centred capsule (30 Oct 2026)
   On a wide screen, Menu alone in the far corner and Book in the other leave the eye travelling the full width.
   From 1100px they join the wordmark in one glass capsule at the top centre: [ Menu   NOOR   Book an eye exam ].
   Still symmetrical, one place to look, close to where the eye already is. Menu matches Book's type (sentence case,
   same size and weight); Book keeps the one solid fill, so the main action still leads. */
@media (min-width: 1100px) {
  .corner {
    left: 50%; right: auto; top: 10px; transform: translateX(-50%); padding: 4px; pointer-events: auto;
    display: grid; grid-template-columns: 1fr 136px 1fr; gap: 0; align-items: center;   /* equal sides: the wordmark lands dead centre */
    border-radius: 999px; background: var(--calm-glass); border: 1px solid var(--calm-hair); box-shadow: var(--calm-lift);
    -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  }
  .corner .menu-toggle {
    grid-column: 1; justify-self: stretch; justify-content: center; min-height: 44px; padding: 0 1.05rem 0 .8rem; gap: .5rem;
    background: rgba(26, 26, 26, .05); border: 0; box-shadow: none;   /* as wide as Book: the two buttons mirror each other */
    font: 600 .88rem/1 var(--sc-font-display); letter-spacing: 0; text-transform: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html[data-scheme] .corner .menu-toggle__text { font: 600 .88rem/1 var(--sc-font-text); letter-spacing: .02em; text-transform: none; }   /* the same label type as Book */
  .corner .menu-toggle--iris .menu-toggle__icon { width: 30px; }
  html[data-scheme] .corner .corner__book { grid-column: 3; justify-self: end; min-height: 44px; box-shadow: none; }
  .mark { top: 14px; z-index: 71; }    /* sits in the capsule's middle, above it */
}
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) { .corner .menu-toggle:hover { background: rgba(26, 26, 26, .1); } }
@media (min-width: 1100px) and (prefers-reduced-transparency: reduce) { .corner { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* (31 Oct 2026) The top band is solid. Its old 16px fade let the black offer strip and scrolled text show through
   as a smeared dark band under the header on phones. A soft shadow now marks the edge instead. */
html[data-scheme] body::before {
  background: #F8F7F4; -webkit-mask: none; mask: none;
  box-shadow: 0 1px 0 rgba(26, 26, 26, .06), 0 6px 14px -10px rgba(26, 26, 26, .25);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  html[data-scheme] body::before { background: rgba(248, 247, 244, .97); }
}

/* GoHighLevel web chat (bottom-left, clear of the dock): out of the way while a drawer, dialog or the menu is open,
   so it never sits on top of their buttons (the showroom filters' Done, the reserve drawer, the sign-up popup) */
html.fx-lock chat-widget, html.menu-open chat-widget, body:has(dialog[open]) chat-widget,
body:has(.fx-side.is-open) chat-widget, body:has(.overlay[data-open="true"]) chat-widget,
body:has(.ck:not([hidden])) chat-widget,
body:has([role="dialog"][aria-modal="true"]:not(.overlay):not([hidden])) chat-widget { display: none !important; }
/* (.overlay pop-ups close with data-open="false", not [hidden], so they only count while data-open="true") */