/* =============================================================================
   AURORA GLASS — site chrome
   Header, navigation, mega menus, mobile nav, search, booking, footer.
   The header is the signature move: it starts flush and full-width, then
   detaches on scroll into a floating glass pill.
   ========================================================================== */

/* ------------------------------------------------------------ 1 · TOP BAR */
.topbar {
  position: relative;
  z-index: 60;
  color: var(--g-on-dark-soft);
  background: linear-gradient(100deg, var(--g-ink), var(--g-ink-2) 60%, #0b2f2a);
  font-size: var(--fs-8);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-43); padding-block: 11px; }
.topbar p { margin: 0; }
.topbar-note::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px; margin-right: 9px;
  border-radius: 50%;
  background: var(--g-teal-lit);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-teal-lit) 22%, transparent);
  animation: livePulse 2.6s var(--ease-soft) infinite;
  vertical-align: middle;
}
@keyframes livePulse {
  0%,100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-teal-lit) 22%, transparent); }
  50%     { box-shadow: 0 0 0 7px color-mix(in srgb, var(--g-teal-lit) 4%, transparent); }
}
.topbar-call { color: var(--g-gold-lit); font-weight: 700; white-space: nowrap; }
.topbar-call:hover { color: var(--c-1); }
/* the top bar slides away once the header detaches */
body.is-scrolled .topbar { opacity: 0; transform: translateY(-100%); }

@media (max-width: 900px) { .topbar-hours { display: none; } }
@media (max-width: 620px) { .topbar-note { display: none; } .topbar-in { justify-content: center; } }

/* --------------------------------------------------- 2 · THE FLOATING HEAD */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition:
    max-width var(--t-slow) var(--ease),
    margin var(--t-slow) var(--ease),
    border-radius var(--t-slow) var(--ease),
    background-color var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease),
    top var(--t-slow) var(--ease);
  background: transparent;
}
.site-head.is-stuck {
  top: var(--sp-33);
  max-width: calc(var(--wrap) + 40px);
  margin-inline: auto;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-1) 66%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(185%);
  backdrop-filter: blur(26px) saturate(185%);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-shadow), var(--glass-edge);
}
.head-in { display: flex; align-items: center; gap: var(--sp-41); min-height: 78px; transition: min-height var(--t-slow) var(--ease); }
.site-head.is-stuck .head-in { min-height: 64px; }

.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 38px; width: auto; max-width: 190px; object-fit: contain; transition: height var(--t-slow) var(--ease); }
.site-head.is-stuck .brand img { height: 32px; }

.head-ctas { margin-left: auto; display: flex; align-items: center; gap: var(--sp-26); flex: none; }
.head-ctas .btn { padding: 11px 21px; font-size: var(--fs-16); white-space: nowrap; }

/* ---------------------------------------------------------- 3 · PRIMARY NAV */
.nv { min-width: 0; }
.nv-list { list-style: none; display: flex; align-items: center; gap: var(--sp-2); margin: 0; padding: 0; flex-wrap: nowrap; }
.nv-item { position: static; flex: none; }
.nv-link {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--sp-10);
  white-space: nowrap;
  padding: 11px var(--sp-33);
  border-radius: var(--r-pill);
  font-size: var(--fs-16); font-weight: 600; letter-spacing: -.01em;
  color: var(--g-fg);
  transition: color var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease);
}
/* gradient underline that grows from the centre */
.nv-link::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: var(--sp-10);
  height: 2px; border-radius: 2px;
  background: var(--grad-gold);
  transition: left var(--t-mid) var(--ease), right var(--t-mid) var(--ease);
}
.nv-link:hover, .nv-item:hover > .nv-link { color: var(--g-teal); background: color-mix(in srgb, var(--g-teal-lit) 8%, transparent); }
.nv-link:hover::after, .nv-item:hover > .nv-link::after { left: var(--sp-33); right: var(--sp-33); }
.nv-link[aria-current="page"] { color: var(--g-teal); }
.nv-link[aria-current="page"]::after { left: var(--sp-33); right: var(--sp-33); }
.nv-caret {
  width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-mid) var(--ease);
}
.nv-has-mega:hover .nv-caret { transform: rotate(-135deg) translateY(-2px); }

/* ------------------------------------------------------------ 4 · MEGA MENU */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  margin-top: var(--sp-26);
  background: color-mix(in srgb, var(--c-1) 80%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  backdrop-filter: blur(30px) saturate(190%);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-xl);
  box-shadow: 0 40px 90px -30px color-mix(in srgb, var(--c-3) 42%, transparent), var(--glass-edge);
  opacity: 0; visibility: hidden;
  transform: translateY(-10px) scale(.99);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility var(--t-mid);
}
.nv-has-mega:hover > .mega, .nv-has-mega:focus-within > .mega {
  opacity: 1; visibility: visible; transform: none;
}
.mega-inner {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: 32px var(--gutter) 36px;
  display: grid; grid-template-columns: minmax(220px, 290px) 1fr; gap: var(--sp-60);
}
.mega-promo {
  align-self: start;
  padding: var(--sp-51);
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--c-1) 60%, transparent);
}
.mega-promo--teal {
  color: var(--c-1);
  background:
    radial-gradient(80% 90% at 20% 10%, color-mix(in srgb, var(--g-teal-lit) 50%, transparent), transparent 62%),
    linear-gradient(160deg, var(--g-ink-2), var(--g-ink));
  box-shadow: var(--glow-teal);
}
.mega-promo--warm {
  background: linear-gradient(160deg, color-mix(in srgb, var(--g-cream) 95%, transparent), color-mix(in srgb, var(--c-9) 35%, transparent));
  box-shadow: var(--glow-gold);
}
.mega-promo h3 { margin: 0 0 9px; font-size: 20px; }
.mega-promo--teal h3 { color: var(--c-1); }
.mega-promo p { margin: 0 0 18px; font-size: 14px; line-height: 1.55; }
.mega-promo--teal p { color: color-mix(in srgb, var(--c-7) 78%, transparent); }
.mega-promo .btn { font-size: 14px; padding: 11px var(--sp-43); }

.mega-cols { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--sp-48); }
.mcol { display: flex; flex-direction: column; gap: var(--sp-7); min-width: 0; }
.mcol-head {
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-16); letter-spacing: -.015em;
  color: var(--g-fg);
  padding-bottom: 9px; margin-bottom: var(--sp-7);
  border-bottom: 1px solid color-mix(in srgb, var(--c-3) 10%, transparent);
  transition: color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.mcol-head:hover { color: var(--g-teal); border-color: color-mix(in srgb, var(--g-teal-lit) 50%, transparent); }
.mlink {
  font-size: 13.5px; color: var(--g-fg-soft); padding: 4px 0;
  transition: color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.mlink:hover { color: var(--g-teal); transform: translateX(4px); }

.mega-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-33); align-content: start; }
.mcard { display: flex; flex-direction: column; gap: var(--sp-10); padding: var(--sp-41) var(--sp-43); border-radius: var(--r-md); }
.mcard-t { font-family: var(--font-display); font-weight: 700; color: var(--g-fg); font-size: var(--fs-19); }
.mcard-d { font-size: var(--fs-8); color: var(--g-fg-soft); line-height: 1.5; }

/* Hover in the mega menus (revision 19). Operator, 2026-10-08: "fix the hover effects in the eyewear
   megamenu". Measured with a real pointer before this block:
   - The eyewear cards had NO hover at all: :hover matched, and not one property changed. Their lift and
     border lived in reforge.css, which the build no longer ships, and nothing replaced it.
   - The way into a panel was a 26px band (the header's padding under the link, then the panel's 10px
     margin) where neither the item nor its panel is hovered. The panel began fading the moment the
     pointer entered it: down to 10% opacity at 115 px/s, and a slow move at 1280x585 closed it. */

/* 1. A mega link hangs an invisible strip from just below its bottom edge down into the panel, reaching
      180px to each side, so the pointer stays on the item all the way across the band.
      - The strip lives as long as the panel does: it appears with the hover, and on the way out it stays
        until the panel has finished closing. So a diagonal that grazes the next nav link still lands on
        it (the path to the top-right card does: it crosses a corner of "Insurance").
      - It starts 2px below the link's bottom edge. At exactly the edge, hit-testing gave it the last pixel
        row of the earlier nav links, which it paints over: a click on the bottom row of "About Us" opened
        /services.
      - The panel comes later in the DOM and paints over the strip's lower part.
      - site.js stops a click on the strip from following the link, so a click in the band does nothing, as
        before.
      - Measured from 1041 to 2560px, at rest and stuck: every header control ends within 1.4px of the link
        bottom, and the Book button sits at least 200px from a mega link. So 180px reaches neither the
        button nor the window edge.
      - Under reduced motion the panel closes at its 200ms delay (durations are zeroed, delays kept). The
        strip goes at the same moment, or it would re-open a panel that has already vanished. */
.nv-has-mega > .nv-link::before {
  content: "";
  position: absolute; top: calc(100% + 2px); left: -180px; right: -180px; height: 48px;
  visibility: hidden;
  transition: visibility 0s linear calc(.2s + var(--t-mid));
}
.nv-has-mega:hover > .nv-link::before { visibility: visible; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .nv-has-mega > .nv-link::before { transition-delay: .2s; }
}

/* 2. A closing panel waits 200ms, then fades with a slow start (ease-in). With the site's quick ease, a
      brief slip off the item showed as a blink: crossing the band at about 220 px/s, a fraction of a
      second off the item, took the panel down to 20-30% opacity. Opening keeps the quick ease. Reduced
      motion zeroes durations, not delays, so the wait holds there too. */
.mega { transition-delay: .2s; transition-timing-function: ease-in; }
.nv-has-mega:hover > .mega, .nv-has-mega:focus-within > .mega { transition-delay: 0s; transition-timing-function: var(--ease); }

/* 3. When the pointer reaches the other mega item, the old panel and its strip go at once.
      - The panels share one box, and the eyewear one comes later in the DOM, so a closing eyewear panel
        sits over the services one. Measured: moving from Eyewear to Services and down into its panel
        landed on the closing eyewear panel and re-opened it.
      - Changing the delay can't stop a fade that is already running (a pointer that crosses the 2px gap
        between the links starts it). `transition: none` cancels it, and the end state applies at once.
      - The rule stands alone, so a browser without :has() keeps everything else. */
.nv-list:has(> .nv-has-mega:hover) > .nv-has-mega:not(:hover) > .mega,
.nv-list:has(> .nv-has-mega:hover) > .nv-has-mega:not(:hover) > .nv-link::before { transition: none; }

/* 4. Menu aim (site.js section 8b). The straight line from "Services" down to its right-hand columns crosses
      the "Eyewear" link, and CSS cannot tell that from choosing Eyewear. Measured: up to 19 such paths per
      screen size ended in the wrong menu. For a mouse that crosses another nav link while moving down, just
      after leaving an open menu, the script holds the open item (.is-held) and keeps a crossed mega item shut
      (.is-shut).
      The hold lasts as long as the crossing. It ends when the pointer reaches the held item, turns straight
      down onto a nav link, moves along the nav, or pauses for 350ms. Without the script, the rules above
      stand alone. */
.nv-has-mega.is-held > .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nv-has-mega.is-held > .nv-link::before { visibility: visible; transition: none; }
.nv-has-mega.is-shut > .mega {
  opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.99);
  transition: none; pointer-events: none;
}
.nv-has-mega.is-shut > .nv-link::before { visibility: hidden; transition: none; }
.nv-has-mega.is-shut .nv-caret { transform: rotate(45deg) translateY(-2px); }

/* 5. The eyewear cards: for the pointer and for keyboard focus alike, a brighter glass tile with a teal ring
      that lifts, and the title in the nav's hover teal. It is the site's own card hover (`--glass-bg-2`, a 45%
      teal-lit edge), scaled down for a menu.
      - A brighter tile raises the text's contrast. A first version washed the tile with 8% teal, which
        darkened it: the teal title fell to 3.7-4.3:1 and one description to 4.3:1 (measured on rendered
        pixels).
      - The ring is a box-shadow, not a border, so a resting card keeps its exact box.
      - The lift moves the card 3px up and out from under a pointer resting on its bottom edge, which flipped
        :hover on and off (measured: 226 changes on one sideways sweep). A 3px strip under a hovered card
        keeps the pointer on it. */
.mcard { position: relative; transition: background-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
.mcard-t { transition: color var(--t-mid) var(--ease); }
.mcard:hover, .mcard:focus-visible {
  background-color: var(--glass-bg-2);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--g-teal-lit) 45%, transparent),
    0 18px 36px -22px color-mix(in srgb, var(--c-3) 45%, transparent);
  transform: translateY(-3px);
}
.mcard:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 3px; }
.mcard:focus-visible { border-radius: var(--r-md); }
.mcard:hover .mcard-t, .mcard:focus-visible .mcard-t { color: var(--g-teal); }
@media (prefers-reduced-motion: reduce) {
  .mcard:hover, .mcard:focus-visible { transform: none; }
}

/* ------------------------------------------------- 5 · SEARCH + BURGER */
.head-search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none;
  border-radius: var(--r-pill);
  color: var(--g-fg);
  background: color-mix(in srgb, var(--c-1) 55%, transparent);
  border: 1px solid var(--glass-brd);
  cursor: pointer;
  transition: background-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease), transform var(--t-fast) var(--ease);
}
.head-search:hover { background: var(--grad-brand); color: var(--c-1); transform: translateY(-2px); border-color: transparent; }

.burger { display: none; flex-direction: column; gap: var(--sp-7); background: none; border: 0; padding: 11px; cursor: pointer; }
.burger span { display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--g-fg); transition: transform var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.search-panel {
  position: sticky; top: 78px; z-index: 49;
  background: color-mix(in srgb, var(--c-1) 78%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(185%);
  backdrop-filter: blur(26px) saturate(185%);
  border-bottom: 1px solid var(--glass-brd);
  box-shadow: 0 20px 40px -26px color-mix(in srgb, var(--c-3) 40%, transparent);
  animation: panelIn .26s var(--ease);
}
@keyframes panelIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.search-panel-in { display: flex; align-items: center; gap: var(--sp-41); padding-block: var(--sp-43); flex-wrap: wrap; }
.search-panel__h { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--g-fg); margin: 0; flex: none; }
.search-panel__form { display: flex; gap: var(--sp-26); flex: 1 1 320px; min-width: 0; }
.search-panel__close { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--g-fg-faint); padding: var(--sp-5) var(--sp-19); flex: none; }
.search-panel__close:hover { color: var(--g-fg); }

/* ------------------------------------------------------------ 6 · MOBILE NAV */
.mobile-nav {
  position: fixed; inset: 0; z-index: 70;
  overflow-y: auto;
  padding-block: var(--sp-51) 70px;
  background: rgba(242,247,246,.86);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  animation: panelIn .3s var(--ease);
}
.mobile-in { display: flex; flex-direction: column; gap: var(--sp-2); }
.mob-link {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  letter-spacing: -.02em; color: var(--g-fg);
  padding: 13px 0; border-bottom: 1px solid color-mix(in srgb, var(--c-3) 10%, transparent);
}
.mob-group { margin-top: var(--sp-48); display: flex; flex-direction: column; gap: var(--sp-1); }
.mob-h {
  font-family: 'Space Mono', monospace; text-transform: uppercase;
  letter-spacing: .2em; font-size: 11.5px; color: var(--g-teal);
  margin: 0 0 10px; font-weight: 700;
}
.mob-sub { font-size: var(--fs-19); padding: 9px 0; color: var(--g-fg-soft); }
.mob-cta { margin-top: var(--sp-54); }
body.nav-open { overflow: hidden; }

@media (max-width: 1040px) {
  .nv { display: none; }
  .burger { display: flex; margin-left: auto; }
  .head-ctas { margin-left: 0; }
  .head-ctas .btn-primary { display: none; }
  .mega { display: none; }
  .site-head.is-stuck { max-width: calc(100% - 24px); }
}
@media (min-width: 1041px) { .mobile-nav { display: none !important; } }
@media (max-width: 1180px) { .mega-cols { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ------------------------------------------------- 7 · PROGRESS + TO TOP */
.rf-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 90; pointer-events: none; }
.rf-progress .bar {
  height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--grad-brand);
  box-shadow: 0 0 14px color-mix(in srgb, var(--g-teal-lit) 70%, transparent);
}
.rf-top {
  position: fixed; right: var(--sp-45); bottom: var(--sp-45); z-index: 80;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-brd);
  background: color-mix(in srgb, var(--c-1) 66%, transparent);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--g-fg);
  cursor: pointer;
  box-shadow: var(--glass-shadow);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility var(--t-mid), background-color var(--t-mid) var(--ease);
}
.rf-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.rf-top:hover { background: var(--grad-brand); color: var(--c-1); border-color: transparent; }

/* ------------------------------------------------------- 8 · BOOKING FORM */
.book-band {
  position: relative;
  padding-block: var(--flow);
  scroll-margin-top: var(--sp-79);
  background:
    radial-gradient(50% 60% at 12% 10%, color-mix(in srgb, var(--g-teal-lit) 16%, transparent), transparent 62%),
    radial-gradient(46% 56% at 88% 86%, color-mix(in srgb, var(--g-gold) 18%, transparent), transparent 64%);
}
.book-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(30px, 5vw, 70px); align-items: start; }
.book-meta { font-size: 14px; color: var(--g-fg-faint); margin: 18px 0 0; }
.book-copy .btn-ghost { margin-top: var(--sp-45); }
.book-form {
  padding: clamp(26px, 3.2vw, 40px);
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-xl);
  box-shadow: var(--glass-shadow), var(--glass-edge);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-41);
}
.fld { display: flex; flex-direction: column; gap: var(--sp-14); min-width: 0; }
.fld--full { grid-column: 1 / -1; }
.fld label { font-size: var(--fs-6); font-weight: 650; letter-spacing: .02em; color: var(--g-fg-soft); }
.fld input, .fld select, .fld textarea,
.search-form input, .search-panel__form input {
  font: inherit; font-size: var(--fs-23);
  padding: 13px var(--sp-36);
  color: var(--g-fg);
  background: color-mix(in srgb, var(--c-1) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-3) 12%, transparent);
  border-radius: var(--r-sm);
  width: 100%;
  transition: border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease);
}
.fld input:focus, .fld select:focus, .fld textarea:focus,
.search-form input:focus, .search-panel__form input:focus {
  outline: none;
  background: var(--c-1);
  border-color: var(--g-teal-lit);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--g-teal-lit) 16%, transparent);
}
.book-form .btn { grid-column: 1 / -1; }
.hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--g-teal); font-weight: 600; }
@media (max-width: 880px) { .book-grid, .book-form { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- 9 · SEARCH */
.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; }
.search-form { display: flex; gap: 11px; flex-wrap: wrap; margin: 24px 0 12px; }
.search-form input { flex: 1 1 260px; }
.search-status { color: var(--g-fg-soft); font-size: var(--fs-16); margin: 0 0 10px; }
.search-results { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: var(--sp-41); }
.search-hit {
  padding: var(--sp-45) var(--sp-48);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-edge);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.search-hit:hover { transform: translateY(-4px); box-shadow: var(--glass-lift); border-color: color-mix(in srgb, var(--g-teal-lit) 45%, transparent); }
.search-hit__t { font-family: var(--font-display); font-weight: 700; font-size: 18.5px; letter-spacing: -.02em; color: var(--g-fg); }
.search-hit__t:hover { color: var(--g-teal); }
.search-hit__u { font-family: 'Space Mono', monospace; font-size: 12px; color: var(--g-teal); margin: 5px 0 9px; }
.search-hit__s { margin: 0; font-size: var(--fs-16); line-height: 1.6; color: var(--g-fg-soft); }
.search-hit__s mark { background: color-mix(in srgb, var(--g-gold) 34%, transparent); color: inherit; padding: 0 3px; border-radius: 3px; }

/* ---------------------------------------------------------------- 10 · FOOT */
.site-foot {
  position: relative;
  color: var(--g-on-dark-soft);
  background:
    radial-gradient(58% 70% at 84% 6%, color-mix(in srgb, var(--g-teal-lit) 24%, transparent), transparent 62%),
    radial-gradient(50% 60% at 8% 96%, color-mix(in srgb, var(--g-gold) 16%, transparent), transparent 64%),
    linear-gradient(170deg, var(--g-ink-2), var(--g-ink));
  padding-block: clamp(56px, 7vw, 92px) 0;
  margin-top: 0;
}
.foot-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr) 1.2fr; gap: var(--sp-60); }
.foot-name {
  font-family: var(--font-display); font-weight: 700; font-size: 26px;
  letter-spacing: -.03em; margin: 0 0 12px;
  background: linear-gradient(100deg, var(--c-1), var(--g-gold-lit));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.foot-blurb { font-size: 14px; line-height: 1.7; margin: 0; color: var(--g-on-dark-soft); }
.foot-blurb a { color: var(--g-gold-lit); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--c-9) 30%, transparent); }
.foot-h { font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .2em; font-size: 11.5px; color: var(--g-gold-lit); margin: 0 0 16px; font-weight: 700; }
.foot-col { display: flex; flex-direction: column; gap: var(--sp-26); }
.foot-col a { font-size: 14px; color: var(--g-on-dark-soft); transition: color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); }
.foot-col a:hover { color: var(--c-1); transform: translateX(4px); }
.foot-addr, .foot-hours { margin: 0; font-size: 14px; line-height: 1.65; }
.foot-hours { color: color-mix(in srgb, var(--c-7) 55%, transparent); font-size: var(--fs-8); }
.foot-phone { font-weight: 700; color: var(--g-gold-lit) !important; font-size: 16.5px !important; }
.foot-legal {
  display: flex; flex-wrap: wrap; gap: var(--sp-33) var(--sp-54); justify-content: space-between; align-items: center;
  margin-top: clamp(42px, 5vw, 66px); padding-block: var(--sp-48);
  border-top: 1px solid color-mix(in srgb, var(--c-1) 10%, transparent);
  font-size: var(--fs-8);
}
.foot-legal p { margin: 0; }
.foot-legal nav { display: flex; flex-wrap: wrap; gap: var(--sp-43); }
.foot-legal a { color: color-mix(in srgb, var(--c-7) 62%, transparent); }
.foot-legal a:hover { color: var(--c-1); }
@media (max-width: 1000px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .foot-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ 11 · A11Y */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--g-ink); color: var(--c-1); padding: var(--sp-33) var(--sp-45);
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--g-teal-lit);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --------------------------------------------- 12 · RESPONSIVE TAP TARGETS */
@media (max-width: 834px) {
  .topbar-call, .foot-col a, .foot-legal a, .et-golink, .ethc-herocall,
  .et-review__src, .et-cta-cluster > a, .dc-visit__row a, .dc-rel__go,
  .ha-cond__go, .mlink, .mob-sub,
  /* A tap target is for an INLINE TEXT LINK. a[class]:not(.btn) also matches
     the CARD-shaped anchors, and making a card inline-flex shrink-wraps it to
     its content — which, when that content is absolutely positioned, is
     nothing at all. Measured at 390px before this guard: .et-cat rendered 1px
     wide inside a 337px column on 17 tiles across 8 pages, so every category
     tile lost its photograph and its near-white caption was left sitting on
     near-white glass at 1.11:1.

     An anchor that contains a picture, a heading or a card sub-element is a
     card, not a text link, and keeps its own display. The :has() test is the
     rule; .et-cat is named as well so the intent survives a markup change.
     Revision 26 (system.css §33) names three more that the test misses: the
     related-care cards (.dc-rel, a flex column, and .dc-relhub), whose
     icon, title and link this rule centred while wrapped descriptions stayed
     left, and the legal pages' table-of-contents rows, shrink-wrapped here
     to their text. One :not() for the list keeps the specificity it had. */
  .rw-sec a[class]:not(.btn):not(.et-cat, .dc-rel, .dc-relhub, .bw-toc__link):not(:has(img, picture, h2, h3, h4,
    [class*="__scene"], [class*="__media"], [class*="__body"], [class*="__scrim"])),
  .rw-sec div > a:not([class]) {
    display: inline-flex; align-items: center;
    min-height: 46px;            /* 44 renders as 43.9 at dpr 1.5 */
  }
  .rw-sec p > a:not([class]), .rw-sec li > a:not([class]), .foot-blurb a {
    padding-block: var(--sp-33); margin-block: -14px;   /* hit area without moving prose */
  }
  /* the legal links wrap 3 + 1: their 46px tap height is the row spacing */
  .foot-legal nav { row-gap: 0; column-gap: 20px; }
  .brand { min-height: 46px; }
  .head-search { width: 46px; height: 46px; }
  .burger { min-height: 46px; min-width: 46px; justify-content: center; }
  .hp input, .hp label { width: 46px; height: 46px; }
  .search-panel { top: 66px; }
}
/* Links in running text, up to 1200px (revision 26, system.css §33).
   layout.css keeps the source's own tap rule (max-width:1200px), which makes
   every .et-golink and tel: link a 44px inline-flex box; the rule above makes
   it 46px below 835px. Inside a paragraph that box made its line 17-18px
   taller than the others, and the prose underline (an inset shadow at the
   bottom of the box, system.css §3; on a padded link, of the padding) sat
   12-14px under the text, through the next line where a link wrapped.
   Measured before: at 390, links 14px low on every page with prose links;
   at 1024, 11 paragraphs with a stretched line and 32 links 12-14px low.
   · A link in running text is inline again; the hit area is padding that
     does not move the prose, as for plain prose links above.
   · The line is a real underline, which sits under the glyphs whatever the
     box: the same 2px and colour, gold on hover. Above 1200px the links are
     inline with no padding, and §3's shadow line is right there. */
@media (max-width: 1200px) {
  .rw-sec p:is(.et-lede, .ha-fine, .dc-faq__a) > a[class]:not(.btn):not(.et-cat),
  .rw-sec p > a[href^="tel:"]:not([class]) {
    display: inline;
    min-height: 0;
    padding-block: var(--sp-33);
    margin-block: -14px;
  }
  .rw-sec p:is(.et-lede, .ha-fine, .dc-faq__a) > a[class]:not(.btn):not(.et-cat) > svg {
    display: inline-block;
    vertical-align: -.15em;
    margin-left: .35em;
  }
  .site-content :is(p, li) > a:not(.btn):not(.bw-toc__link),
  .site-foot .foot-blurb a {
    box-shadow: none;
    background-image: none;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    text-decoration-color: color-mix(in srgb, var(--c-2) 22%, transparent);
  }
  .site-foot .foot-blurb a { text-decoration-color: color-mix(in srgb, var(--c-9) 30%, transparent); }
  .site-content :is(p, li) > a:not(.btn):not(.bw-toc__link):hover,
  .site-foot .foot-blurb a:hover { text-decoration-color: var(--g-gold); }
  /* The dark bands' NAP block: its two links were 44-46px boxes between 28px
     lines 8px apart, so the gaps around them read 17 and 26px. Same hit
     area, from padding that does not move the rows. */
  .rw-sec .tib-creed__nap a:not([class]),
  .rw-sec .tib-creed__nap a[class][href]:not(.btn):not(.et-cat) {
    min-height: 0;
    padding-block: 9px;
    margin-block: -9px;
  }
}

/* ------------------------------------------------- 13 · PHONES (system §33) */
/* One column of 14px links on a 56px pitch (46px tap height + 10px gap) ran
   about 1.4 screens: the practice's name and blurb across the top, then the
   three link columns and the visit block two by two, and the tap height is
   the spacing. */
@media (max-width: 580px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .foot-grid > .foot-brand { grid-column: 1 / -1; }
  .foot-col { gap: 0; }
}
/* The search button wrapped under the full-width field at its own width. */
@media (max-width: 640px) {
  .search-form { flex-wrap: nowrap; }
  .search-form input { flex: 1 1 0; min-width: 0; }
}

/* ----------------------- 14 · PHONES: THE REFERENCE BUILD'S SIZES (system §34) */
/* Revision 27: the reference build's phone sizes for the chrome, up to 700px
   (its breakpoint). Values at 390px. */
@media (max-width: 700px) {
  /* the top strip 36px tall, its text .74rem */
  .topbar { font-size: .74rem; }
  .topbar-in { padding-block: 0; }
  .topbar .topbar-call { min-height: 36px; }

  /* the header: 8px above and below a 58px bar, 10px between its parts,
     the logo 132px wide, search 44px; search sits with the menu button.
     Scrolled, the floating bar is 6px from the top and on the page gutters,
     its contents 14px from its left end and 6px from its right. */
  .site-head { padding-block: 8px; }
  .head-in, .site-head.is-stuck .head-in { min-height: 58px; gap: 10px; }
  .brand img, .site-head.is-stuck .brand img { width: 132px; height: auto; max-width: none; }
  .head-search { width: 44px; height: 44px; }
  .head-ctas { margin-left: auto; }
  /* the menu button is a 46px circle beside search, as the reference's two
     header buttons are, in search's own glass */
  .burger {
    margin-left: 0;
    width: 46px;
    height: 46px;
    padding: 0;
    align-items: center;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--c-1) 55%, transparent);
    border: 1px solid var(--glass-brd);
  }
  .site-head.is-stuck { top: 6px; padding-block: 0; max-width: calc(100% - 2 * var(--gutter)); }
  .site-head.is-stuck .head-in { padding-inline: 14px 6px; }

  /* the menu opens under the header, which stays as it was, with the menu
     button (now a close button) on it: 40px down to the first link (at the
     top of a page the menu starts under the top strip and header; scrolled,
     it fills the screen under the floating bar, as the reference's does);
     links 25.4px on 1.05 with 10px above and below, 4px apart; the groups
     28px down, their heads .95rem with 8px under, their links on a 40px
     pitch */
  .mobile-nav { top: calc(36px + 75px); padding-block: 40px; }
  body.is-scrolled .mobile-nav { top: 0; padding-top: calc(6px + 60px + 40px); }
  body.is-scrolled.nav-open .site-head { z-index: 80; }
  .mobile-in { gap: 4px; }
  .mob-link { padding-block: 10px; font-size: clamp(1.5rem, 1.1rem + 2vw, 1.6375rem); line-height: 1.05; }
  .mob-group { margin-top: 24px; gap: 0; }
  .mob-h { font-size: .95rem; margin-bottom: 8px; }
  .mobile-nav .mob-sub { display: flex; min-height: 40px; padding-block: 0; font-size: inherit; }
  .mob-cta { margin-top: 24px; }
  .mobile-nav .btn, .search-panel__form .btn {
    width: 100%;
    min-height: 52px;
    padding: .92em 1.45em;
    font-size: .95rem;
    line-height: 1;
    gap: .6em;
  }

  /* links in a card or a line: the reference's .92rem with .45em to the
     arrow, and its spacing, which is the text's own. The reference's line
     of 1 is for labels that never wrap; some here do, and on 1 their lines
     touched, so the line is 1.3. The 44px tap area stays, as padding that
     moves nothing (prose links have it so, §12). Pill links are the
     reference's small button: 44px, .7em 1.15em, .82rem. Both selectors
     match §12's tap rule in weight and come after it. */
  .rw-sec a[class]:not(.btn):not(.et-cat):is(.et-golink, .et-frame__add, .dc-visit__more, .ct-map__dir, .ia-link__go,
    .ct-route__go, .ethc-herocall, .ha-hero__call, .tib-herocall, .et-hero__call),
  .rw-sec button.et-golink {
    min-height: 0;
    padding-block: 13px;
    margin-block: -13px;
    font-size: .92rem;
    line-height: 1.3;
    gap: .45em;
  }
  .rw-sec :is(.dc-rel__go, .ha-cond__go, .dc-relhub__go) { min-height: 0; font-size: .92rem; line-height: 1.3; gap: .45em; }
  /* a stack of such links is the reference's link list: at least 40px a
     link, so tap areas no longer overlap (stacked 4px apart, a tap on one of
     the About page's closing links landed on the next). One-line links
     touch, on a 40px pitch; the services page's routes run to two and three
     lines, so 14px keeps each a separate link. */
  .rw-sec :is(.od-close__links, .ha-routes__list) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .rw-sec .ha-routes__list { gap: 14px; }
  .rw-sec :is(.od-close__links, .ha-routes__list) > a[class]:not(.btn):not(.et-cat) {
    min-height: 40px;
    padding-block: 0;
    margin-block: 0;
  }
  /* a review's "Read on Google" keeps its size; its tap area moves nothing */
  .rw-sec a[class]:not(.btn):not(.et-cat).et-review__src { min-height: 0; padding-block: 15px; margin-block: -15px; }
  .rw-sec a[class]:not(.btn):not(.et-cat).et-pill {
    min-height: 44px;
    padding: .7em 1.15em;
    font-size: .82rem;
    line-height: 1;
  }

  /* the booking band: the reference's section head, columns 24px apart and
     18px between blocks; the form padded 18px with 16px between fields, a
     label .86rem 6px over its field, fields at least 50px, padded 12px 16px
     with 14px corners, in the running text's size; notes 130px */
  .book-grid { gap: 24px; }
  .book-band .eyebrow { display: flex; width: fit-content; max-width: 100%; font-size: .8rem; line-height: 1.3; }
  .book-band .h2 { font-size: clamp(1.75rem, 1.2rem + 3.2vw, 2.06rem); line-height: .98; }
  .book-band .lede { font-size: 1rem; line-height: 1.65; }
  .book-band .book-copy > * { margin-block: 0; }
  .book-band .book-copy > * + * { margin-top: 18px; }
  .book-band .book-copy > :is(.eyebrow, .h2) + * { margin-top: 10px; }
  .book-band .btn {
    min-height: 52px;
    padding: .92em 1.45em;
    font-size: .95rem;
    line-height: 1;
    gap: .6em;
  }
  .book-form { padding: clamp(18px, 3vw, 30px); gap: 16px; }
  .fld { gap: 6px; }
  .fld label { font-size: .86rem; line-height: 1.2; }
  .fld :is(input, select, textarea) { min-height: 50px; padding: 12px 16px; border-radius: 14px; font-size: inherit; }
  .fld textarea { min-height: 130px; }
  /* the search field: a 56px pill, padded 0 20px, 1.1rem, the width of the
     page with its button under it (beside the button its placeholder was
     cut short) */
  .search-form input, .search-panel__form input { min-height: 56px; padding: 0 20px; border-radius: 999px; font-size: 1.1rem; }
  .search-form, .search-panel__form { flex-wrap: wrap; }
  .search-form input, .search-panel__form input { flex: 1 1 100%; }
  .search-form .btn, .search-panel__form .btn { flex: 1 1 100%; }

  /* the footer: columns 26px apart down and 18px across, heads .95rem on a
     line of 1 with 8px under, text and links in the running text's size and
     leading, links on a 40px pitch, the hours .94rem; the practice's blurb
     16px under its name; the legal row 36px under the columns, 22px inside
     its rule and 28px from the bottom, .88rem, the line over the links 14px
     apart, links 18px apart and 40px tall. As in the reference, two link
     columns share a row and the rest take the width: "Eye Care Services"
     at .95rem is wider than half the row, and the visit block is the
     reference's contact and hours. */
  .foot-grid { gap: 26px 18px; }
  .foot-grid > .foot-col:is(:nth-child(2), .foot-visit) { grid-column: 1 / -1; }
  .foot-h { font-size: .95rem; line-height: 1; margin-bottom: 8px; }
  .foot-name { margin-bottom: 16px; }
  .foot-blurb, .foot-addr { font-size: inherit; line-height: 1.65; }
  .foot-hours { font-size: .94rem; }
  .site-foot .foot-col a { min-height: 40px; font-size: inherit; }
  .foot-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px 24px;
    margin-top: 36px;
    padding-block: 22px 28px;
    font-size: .88rem;
  }
  .foot-legal nav { column-gap: 18px; }
  .site-foot .foot-legal a { min-height: 40px; }
}