/* ========================================================
   SIGHT ON SITE — SHARED STYLES (v1.6, post-Foundations)
   Design system locked: Phases 1A–1H
   Typography: Inter only · No serif · No italic-teal
   Container: 1200px · Scale I default, Scale II on .home body
   ======================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Colour tokens (Phase 1C — two-teal system) */
  --navy:       #1B2D4F;
  --navy2:      #0c1929;
  --teal:       #4BBFBF;       /* Brand bright — dark backgrounds, buttons, large display */
  --teal-deep:  #237373;       /* Text/links on light backgrounds, 5.6:1 on white, passes AA for normal text */
  --teal2:      #3aaeae;       /* Hover state for bright teal */
  --white:      #FFFFFF;
  --off:        #F5F5F7;
  --soft:       #EDEEF1;
  --mid:        #6E6E73;
  --light:      #D2D2D7;

  /* Typography (Phase 1B — Inter only) */
  --font:       'Inter', system-ui, -apple-system, sans-serif;

  /* Container (Phase 1D — 1200px focused) */
  --maxw:       1200px;
}

/* Smooth scrolling is for clicks the visitor makes on the page, not for arriving
   at one. With plain `scroll-behavior: smooth` on html, opening a URL that ends in
   a fragment made the page crawl down to the section by itself on load, which read
   as the site scrolling without being asked. site.js adds .smooth once the page has
   settled, so a fragment lands instantly and every click after that animates.
   scrollIntoView and scrollTo calls that pass behavior:'smooth' explicitly are
   unaffected either way. (25 Aug 2026) */
html { scroll-behavior: auto; }
html.smooth { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html, html.smooth { scroll-behavior: auto; } }
body {
  font-family: var(--font);
  color: var(--navy);
  background: var(--white);
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
}

a { color: inherit; }

/* The hidden attribute must actually hide. Any class carrying an explicit display
   (display:flex, display:grid) outranks the browser's [hidden]{display:none}, so an
   element the script had set el.hidden = true still painted. Found 17 Aug 2026: the
   green "In stock" badge on every pre-launch product page was visible even though
   product.html had already set it hidden. */
[hidden] { display: none !important; }

/* ── NAV ── */
#nav {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background 0.4s, border-color 0.4s;
}
#nav.dk { background: rgba(10,18,32,0.92); border-bottom-color: rgba(255,255,255,0.07); }

.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
/* Logo mark — theme-aware via CSS vars. --ink = the S's + target ring, --paper = the
   navy detail shapes. Teal pin is constant. Light nav (default) renders navy ink;
   the .dk nav state (over dark sections) flips to white ink. Background is transparent. */
.nav-mark { display: block; height: 30px; width: auto; --ink: #1B2D4F; --paper: #FFFFFF; }
#nav.dk .nav-mark { --ink: #FFFFFF; --paper: #1B2D4F; }
.ft-mark { display: block; height: 40px; width: auto; align-self: flex-start; --ink: #FFFFFF; --paper: #1B2D4F; }

.nav-words { display: flex; flex-direction: column; line-height: 1; gap: 2px; }
.nav-name {
  font-weight: 600; font-size: 13px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--navy);
  transition: color 0.4s;
}
#nav.dk .nav-name { color: #eef0f4; }
.nav-sub {
  font-size: 8.5px; font-weight: 600; letter-spacing: 3px;
  text-transform: uppercase; color: var(--teal-deep);
}
#nav.dk .nav-sub { color: var(--teal); }

.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a {
  font-size: 13px; font-weight: 500; letter-spacing: 0.1px;
  color: var(--navy); text-decoration: none; opacity: 0.7;
  transition: opacity 0.2s, color 0.4s;
}
.nav-links a:hover, .nav-links a.active { opacity: 1; color: var(--teal-deep); }
#nav.dk .nav-links a { color: #dde2ea; }
#nav.dk .nav-links a:hover, #nav.dk .nav-links a.active { color: var(--teal); }

/* Click to call, deliberately OUTSIDE .nav-links so it stays visible when the burger
   collapses the menu. A large share of this practice's patients, and the adult children
   and village managers booking on their behalf, will phone rather than complete a form. */
.nav-tel {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--navy); text-decoration: none;
  padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(27,45,79,0.22);
  transition: border-color 0.25s, color 0.25s; white-space: nowrap;
  margin-left: auto; margin-right: 16px; order: 2;
}
.nav-tel:hover { border-color: var(--teal-deep); color: #237373; }
#nav.dk .nav-tel { color: var(--white); border-color: rgba(255,255,255,0.28); }
#nav.dk .nav-tel:hover { border-color: var(--teal); color: var(--teal); }
.nav-links { order: 3; }
.nav-burger { order: 4; }

.nav-cta {
  /* Navy on teal, not white on teal. Same brand teal as the mockups, but
     6.2:1 contrast instead of 2.2:1, so the pill passes WCAG AA. */
  font-size: 13px; font-weight: 600; color: var(--navy) !important;
  opacity: 1 !important; background: var(--teal);
  padding: 9px 20px; border-radius: 999px; text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.25s, border-color 0.25s, color 0.25s !important;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--teal2) !important; color: var(--navy) !important; }
/* Pair the two CTA pills (Shop Online + Book Now) tighter than the rest of the nav */
.nav-links li:last-child { margin-left: -16px; }

/* Mobile menu toggle */
.nav-burger { display: none; flex-direction: column; gap: 4px; padding: 8px; cursor: pointer; background: none; border: none; }
.nav-burger span { width: 22px; height: 1.5px; background: var(--navy); transition: transform 0.25s, opacity 0.25s, background 0.4s; }
#nav.dk .nav-burger span { background: #dde2ea; }

/* ── FACT CHECKLIST ──
   Replaces the three-box stat strips that sat under the interior page heroes. Those
   used display numerals for things that were not numbers ("Years 3-12", "Every family",
   "Standard"), which promised a statistic and delivered a label. A checklist states the
   same facts as sentences, holds a fourth item without redesign, and scans better on a
   phone. Used on schools, aged care and eye health. */
.factlist { padding: 40px 5%; border-bottom: 1px solid var(--light); }
.factlist .flx { max-width: 820px; margin: 0 auto; }
.factlist ul { list-style: none; }
.factlist li {
  font-size: 15px; color: var(--navy); font-weight: 400; line-height: 1.7;
  padding-left: 28px; position: relative; margin-bottom: 10px;
}
.factlist li:last-child { margin-bottom: 0; }
.factlist li::before {
  content: ''; position: absolute; left: 2px; top: 9px;
  width: 11px; height: 6px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}
.factlist li b { font-weight: 600; }
.flx-note { font-size: 13px; color: var(--mid); font-weight: 300; margin-top: 14px; padding-left: 28px; line-height: 1.7; }
@media(max-width:600px){ .factlist { padding: 32px 5%; } .factlist li { font-size: 14.5px; } }

/* ── BUTTONS (Phase 1E — pills for primary, rect 6px for secondary) ── */
/* Teal is a light brand colour: white on #4BBFBF measures 2.21:1 and fails WCAG AA.
   Navy on teal measures 6.19:1. Every teal surface therefore carries navy text, the
   same fix already applied to the nav Book Now pill in v2.02. Do not revert to white. */
.btn-teal-pill {
  background: var(--teal); color: var(--navy); font-weight: 600; text-decoration: none;
  padding: 13px 28px; border-radius: 999px; font-size: 14px; font-weight: 500;
  transition: background 0.25s; display: inline-block;
  border: none; cursor: pointer; font-family: inherit;
  letter-spacing: 0.1px;
}
.btn-teal-pill:hover { background: var(--teal2); }

.btn-navy-pill {
  background: var(--navy); color: var(--white); text-decoration: none;
  padding: 13px 28px; border-radius: 999px; font-size: 14px; font-weight: 500;
  transition: background 0.25s; display: inline-block;
  border: none; cursor: pointer; font-family: inherit;
  letter-spacing: 0.1px;
}
.btn-navy-pill:hover { background: var(--teal); color: var(--navy); }

.btn-wh {
  background: var(--white); color: var(--navy); text-decoration: none;
  padding: 13px 30px; border-radius: 999px; font-size: 14px; font-weight: 500;
  transition: background 0.25s, color 0.25s; display: inline-block;
  border: none; cursor: pointer; font-family: inherit;
}
.btn-wh:hover { background: var(--teal); color: var(--navy); }

/* Secondary buttons: rounded rectangles 6px */
.btn-outline {
  display: inline-block; padding: 12px 26px; border-radius: 6px;
  border: 1px solid var(--navy); color: var(--navy); text-decoration: none;
  font-size: 14px; font-weight: 500; transition: background 0.25s, color 0.25s, border-color 0.25s;
  background: transparent; cursor: pointer; font-family: inherit;
}
.btn-outline:hover { background: var(--navy); color: var(--white); }

.btn-outline-w {
  display: inline-block; padding: 12px 26px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.9); text-decoration: none;
  font-size: 14px; font-weight: 500; transition: border-color 0.25s, color 0.25s;
  background: transparent; cursor: pointer; font-family: inherit;
}
.btn-outline-w:hover { border-color: var(--teal); color: var(--teal); }

/* Ghost link (small with arrow) */
.btn-ghost-hero {
  color: rgba(255,255,255,0.7); text-decoration: none; font-size: 14px;
  font-weight: 500; display: inline-flex; align-items: center; gap: 4px;
  transition: color 0.2s;
}
.btn-ghost-hero::after { content: '›'; font-size: 18px; line-height: 1; }
.btn-ghost-hero:hover { color: var(--teal); }

.btn-arr {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--teal-deep); text-decoration: none; font-size: 13px;
  font-weight: 500; width: fit-content; transition: gap 0.2s;
}
.btn-arr::after { content: '→'; font-size: 16px; line-height: 1; }
.btn-arr:hover { gap: 10px; }

.btn-gw {
  color: rgba(255,255,255,0.6); text-decoration: none; font-size: 14px;
  font-weight: 500; display: inline-flex; align-items: center; gap: 4px; transition: color 0.2s;
}
.btn-gw::after { content: '›'; font-size: 18px; }
.btn-gw:hover { color: var(--teal); }

/* ── SECTION HELPERS ── */
/* Scale I (default — sub-pages, compact) */
.pad     { padding: 96px 5%; }
.pad-sm  { padding: 72px 5%; }
.pad-lg  { padding: 120px 5%; }

/* Scale II (homepage only — overridden on body.home) */
body.home .pad    { padding: 72px 5%; }
body.home .pad-sm { padding: 56px 5%; }
body.home .pad-lg { padding: 104px 5%; }

.center { text-align: center; }
.maxw   { max-width: var(--maxw); margin: 0 auto; }

/* ── EYEBROW LABEL ── */
.lbl {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase; color: var(--teal-deep);
  margin-bottom: 16px;
}
.lbl.center { text-align: center; }
/* On dark backgrounds, use bright teal */
.dk .lbl, .dark .lbl, [class*="navy"] .lbl, .page-hero .lbl, .cta-strip .lbl, .stmt.dk .lbl, .dual-cta .lbl { color: var(--teal); }

/* ── DISPLAY HEADINGS (Phase 1B — Inter only, no italic-teal) ── */
/* Scale I — sub-pages default */
h1.dsp, h2.dsp {
  font-family: inherit;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600; line-height: 1.15;
  letter-spacing: -0.4px; color: var(--navy);
}
/* Heading accent (system rule, Aug 2026, two-tone since 11 Aug 2026): upright em inside
   any heading. Default is --teal-deep #237373, which passes AA on --white (5.57:1) and
   --off (5.11:1). The bright --teal #4BBFBF is 2.21:1 on white and is therefore scoped
   below to dark/navy contexts only, where it measures 6.19:1.
   All page-local italic-teal em overrides were deleted so the site has one convention. */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em { font-style: normal; color: var(--teal-deep); }
/* Dark-context accent: every place a heading em sits on navy. Keep this list in sync if a
   new navy band is added. .page-hero h1 em is asserted separately below with the hero rules;
   index.html carries its own .h-dsp em rule for the home hero plate. */
h1.dsp.wht em, h2.dsp.wht em,
.cta-strip h1 em, .cta-strip h2 em, .cta-strip h3 em,
#book-cta h2 em,
.dual-cta h2 em, .dual-cta h3 em,
.urgent-banner h3 em { color: var(--teal); }
h1.dsp.wht, h2.dsp.wht { color: var(--white); }
h2.dsp.center { text-align: center; }

h3.sub {
  font-family: inherit; font-size: 20px;
  font-weight: 600; line-height: 1.3; color: var(--navy);
  letter-spacing: -0.1px;
}
h3.sub.wht { color: var(--white); }

/* Scale II — homepage override */
body.home h1.dsp, body.home h2.dsp {
  font-size: clamp(36px, 4.4vw, 52px);
  letter-spacing: -0.6px; line-height: 1.1;
}
body.home h3.sub { font-size: 22px; }

/* ── LEAD COPY ── */
.lead {
  font-size: 16px; line-height: 1.75; color: var(--mid);
  font-weight: 400; max-width: 640px;
}
.lead.wht { color: rgba(255,255,255,0.65); }
.lead.center { margin-left: auto; margin-right: auto; }

/* ── PAGE HERO ── */
/* Interior page hero — slim navy band (Option B, agreed 11 Jun 2026).
   Home page uses its own hero and is intentionally not affected. */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 360px;
  display: flex; flex-direction: column; justify-content: center;
  padding: 86px 5% 44px; text-align: left;
  color: var(--white);
  background-color: #0a1424;
  background-image:
    linear-gradient(196deg, rgba(255,255,255,0.10), transparent 56%),
    radial-gradient(ellipse 62% 130% at 72% 46%, #2f4d80 0%, #1a3059 40%, #0d1b31 74%, #08111f 100%);
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.17; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}
/* Scrim. Holds contrast on the lighter right side of the wash so the type
   stays legible however long the heading runs. */
.page-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(95deg, rgba(7,14,26,0.92) 0%, rgba(7,14,26,0.72) 40%, rgba(7,14,26,0.28) 66%, transparent 92%);
}
.page-hero .lbl { color: var(--teal); position: relative; z-index: 2; font-size: 10.5px; letter-spacing: 3.6px; margin-bottom: 18px; }
.page-hero h1 {
  font-family: inherit;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 600; line-height: 1.08; color: var(--white);
  margin: 0 0 16px; max-width: 820px;
  position: relative; z-index: 2; letter-spacing: -1.4px;
  text-shadow: 0 2px 24px rgba(4,10,22,0.4);
}
.page-hero h1 em { font-style: normal; color: var(--teal); }
.page-hero p {
  font-size: 16.5px; color: rgba(255,255,255,0.7); font-weight: 400;
  max-width: 560px; line-height: 1.65; margin: 0;
  position: relative; z-index: 2;
  text-shadow: 0 1px 14px rgba(4,10,22,0.5);
}

/* The old "body.home .page-hero h1" override was removed Aug 2026.
   The home page uses #hero now and has no .page-hero at all. */

/* ── PROMISE STRIP (retail reassurance: delivery / exchanges / warranty / aftercare) ── */
.promise-strip { background: var(--off); border-top: 1px solid var(--light); border-bottom: 1px solid var(--light); padding: 44px 5%; }
.promise-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 32px; }
.promise-item { text-align: center; }
.promise-item .pi-ic { color: var(--teal-deep); margin-bottom: 12px; display: inline-flex; }
.promise-item .pi-ic svg { width: 24px; height: 24px; stroke: var(--teal-deep); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.promise-item h4 { font-family: var(--font); font-size: 16px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.promise-item p { font-size: 12.5px; color: var(--mid); line-height: 1.6; font-weight: 400; max-width: 240px; margin: 0 auto; }
@media(max-width:760px){ .promise-inner { grid-template-columns: 1fr 1fr; gap: 28px 20px; } }

/* ── BREADCRUMB ── */
.breadcrumb {
  background: var(--off); border-bottom: 1px solid var(--light);
  padding: 14px 5%; font-size: 12px; letter-spacing: 0.3px; color: var(--mid);
  font-weight: 500;
}
.breadcrumb a { color: var(--mid); text-decoration: none; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--teal-deep); }
.breadcrumb .sep { margin: 0 10px; opacity: 0.5; }
.breadcrumb .now { color: var(--navy); }

/* ── CATEGORY / AUDIENCE CARDS (Phase 1E — flat, border-colour hover) ── */
.sg {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: var(--light); margin-top: 56px;
}
.sg.cols-2 { grid-template-columns: repeat(2,1fr); }
.sg.cols-4 { grid-template-columns: repeat(4,1fr); }
.sg-item {
  background: var(--white); padding: 44px 36px;
  display: flex; flex-direction: column; gap: 16px;
  transition: background 0.25s;
  text-decoration: none; color: inherit;
}
.sg-item:hover { background: var(--off); }
.sg-t { font-family: inherit; font-size: 18px; font-weight: 600; color: var(--navy); letter-spacing: -0.1px; }
.sg-b { font-size: 14px; line-height: 1.65; color: var(--mid); font-weight: 400; flex: 1; }

.ptag {
  display: inline-block; font-size: 10px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--teal-deep);
  border: 1px solid rgba(42,136,136,0.35); padding: 4px 12px;
  border-radius: 999px; width: fit-content;
}

/* ── FEATURE PANEL (split sections) ── */
.fpanel { display: grid; grid-template-columns: 1fr 1fr; min-height: 440px; }
.fpanel.rev { direction: rtl; }
.fpanel.rev > * { direction: ltr; }

.fv {
  display: flex; align-items: center; justify-content: center;
  background: var(--off); overflow: hidden; min-height: 380px; position: relative;
}
.fv.dk { background: #0d1b2e; }
.fv.teal { background: linear-gradient(135deg, rgba(75,191,191,0.12), rgba(27,45,79,0.04)); }
.fv-ph {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-weight: 500; font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--mid);
}
.fv.dk .fv-ph { color: rgba(255,255,255,0.5); }
.fv-num {
  font-family: inherit; font-size: clamp(96px, 14vw, 160px);
  font-weight: 600; color: var(--teal); opacity: 0.12;
  line-height: 1; user-select: none; letter-spacing: -3px;
}
.fv.dk .fv-num { opacity: 0.22; }

.fc { display: flex; flex-direction: column; justify-content: center; padding: 72px 7%; gap: 22px; }
.fc.dk { background: #0f1e33; color: var(--white); }
.fc p { font-size: 15px; line-height: 1.75; color: var(--mid); font-weight: 400; max-width: 480px; }
.fc.dk p { color: rgba(255,255,255,0.6); }
.fc.dk h2, .fc.dk h3 { color: var(--white); }
.fc ul { list-style: none; display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.fc ul li {
  font-size: 14.5px; font-weight: 400; color: var(--mid);
  display: flex; align-items: flex-start; gap: 12px; line-height: 1.6;
}
.fc ul li::before { content: ''; width: 16px; height: 1px; background: var(--teal-deep); flex-shrink: 0; margin-top: 11px; }
.fc.dk ul li { color: rgba(255,255,255,0.65); }
.fc.dk ul li::before { background: var(--teal); }

/* ── STATEMENT ── */
.stmt {
  background: var(--off);
  padding: 96px 5%;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.stmt blockquote {
  font-family: inherit;
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 500; font-style: normal;
  color: var(--navy); max-width: 880px; line-height: 1.3;
  letter-spacing: -0.4px;
}
.stmt blockquote em { font-style: normal; color: var(--teal-deep); }

/* ── CTA STRIP ── */
.cta-strip {
  background: var(--navy); padding: 96px 5%;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 22px; position: relative; overflow: hidden;
}
.cta-strip::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 65% 50% at 50% 50%, rgba(75,191,191,0.08) 0%, transparent 68%);
  pointer-events: none;
}
.cta-strip > * { position: relative; }
.cta-strip .ba { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: center; }

/* ── FOOTER ── */
footer { background: var(--navy2); padding: 64px 5% 36px; color: rgba(255,255,255,0.42); }
/* Brand + FOUR link columns since 18 Aug 2026, when Clinical was split out of
   Services to mirror the nav. */
.ft { display: grid; grid-template-columns: 1.5fr 1fr 1fr 0.9fr 1.1fr; gap: 40px; margin-bottom: 56px; max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.fb { display: flex; flex-direction: column; gap: 16px; }
.fb p { font-size: 13px; line-height: 1.7; font-weight: 400; max-width: 260px; color: rgba(255,255,255,0.5); }
.fc-col h5 { font-size: 10px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 16px; }
.fc-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.fc-col ul a { font-size: 13px; color: rgba(255,255,255,0.6); text-decoration: none; font-weight: 400; transition: color 0.2s; }
.fc-col ul a:hover { color: var(--teal); }
.fc-col ul li.fc-hours { font-size: 12.5px; color: rgba(255,255,255,0.45); line-height: 1.5; }
.fbot { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 400; flex-wrap: wrap; gap: 10px; max-width: var(--maxw); margin: 0 auto; }
.fbot a { color: var(--teal); text-decoration: none; }
.fbot p { color: rgba(255,255,255,0.45); }
/* Service area links, added Aug 2026. Sits on its own full width row above the
   copyright line, so the two existing .fbot items keep their space-between row. */
.fbot .ft-areas { flex: 1 0 100%; order: -1; margin-bottom: 8px; color: rgba(255,255,255,0.3); }
.fbot .ft-areas a { color: rgba(255,255,255,0.5); }
.fbot .ft-areas a:hover { color: var(--teal); }

/* ── REVEAL ── */
/* Reveal-on-scroll REMOVED Aug 2026 at Ali's request. The `.r` class is still
   on roughly 277 elements across 10 pages but is now completely inert.
   DO NOT re-add `opacity: 0` here without also restoring the IntersectionObserver
   in site.js, or every one of those elements becomes permanently invisible. */
.d1 { transition-delay: 0.08s; } .d2 { transition-delay: 0.16s; } .d3 { transition-delay: 0.24s; }
.d4 { transition-delay: 0.32s; } .d5 { transition-delay: 0.40s; } .d6 { transition-delay: 0.48s; }

/* ── KEYFRAMES ── */
@keyframes up { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes pulse { 0%,100%{opacity:.4;} 50%{opacity:1;} }

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .fpanel,.fpanel.rev{grid-template-columns:1fr;direction:ltr;}
  .sg, .sg.cols-2, .sg.cols-4 { grid-template-columns:1fr; }
  .ft{grid-template-columns:1fr 1fr;gap:36px;}
  .pad{padding:72px 5%;}
  .pad-lg{padding:96px 5%;}
  body.home .pad { padding: 64px 5%; }
  body.home .pad-lg { padding: 88px 5%; }
}
/* Burger from 1060px. Raised from 980 on 18 Aug 2026 when option D added a
   fourth menu word, Clinical. Re-measured by sweeping the viewport in 5px
   steps: the pills no longer wrap, because .nav-cta carries white-space:nowrap,
   so the failure mode is now the link list being clipped by the nav's padding
   box. Clipping starts at 1055px and the row goes negative at 1040px. 1060
   leaves 18px of slack. Every mega breakpoint below matches this number, so
   burger and mega never overlap. Re-measure this whenever a nav word is
   added or renamed. */
@media(max-width:1060px){
  .nav-burger { display: flex; }
  .nav-links {
    display: none;
    position: absolute; top: 56px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(255,255,255,0.96);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    padding: 12px 24px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  #nav.dk .nav-links { background: rgba(10,18,32,0.96); }
  .nav-links.open { display: flex; }
  .nav-links li { padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.04); }
  #nav.dk .nav-links li { border-bottom-color: rgba(255,255,255,0.05); }
  .nav-links li:last-child { border-bottom: none; padding-top: 14px; }
  .nav-links a { font-size: 14px; opacity: 0.85; }
  .nav-cta { padding: 10px 22px; }
  .nav-tel { margin-right: 10px; }
}
@media(max-width:600px){
  .nav-tel span { display: none; }
  .nav-tel { padding: 9px 11px; margin-right: 8px; }
  .pad{padding:56px 5%;}
  body.home .pad { padding: 56px 5%; }
  .ft{grid-template-columns:1fr;}
  .sg-item { padding: 36px 24px; }
  .fc { padding: 48px 8%; }
  .page-hero { min-height: 300px; padding: 82px 5% 34px; }
  .page-hero h1 { letter-spacing: -1.1px; }
  .page-hero p { font-size: 14.5px; }
  .page-hero .lbl { font-size: 9px; letter-spacing: 2.6px; margin-bottom: 13px; }
}


/* -- v1.91: nav CTA differentiation (Shop = primary teal, Book = navy) -- */
/* Shop Online is the ghost pill, Book Now the solid one, matched to the
   Aug 2026 hero mockups. Two identical solid pills competed with each other. */
.nav-cta-shop { background: transparent !important; border-color: rgba(27,45,79,0.24); color: var(--navy) !important; }
.nav-cta-shop:hover { background: transparent !important; border-color: var(--teal-deep); color: #237373 !important; }
#nav.dk .nav-cta-shop { background: transparent !important; border-color: rgba(255,255,255,0.30); color: var(--white) !important; }
#nav.dk .nav-cta-shop:hover { background: transparent !important; border-color: var(--teal); color: var(--teal) !important; }


/* -- v1.91: grouped nav dropdowns (site-wide) -- */
.has-dd { position: relative; display: flex; align-items: center; }
.nav-dd-trigger {
  font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.1px;
  color: var(--navy); opacity: 0.7; background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; transition: opacity 0.2s, color 0.4s;
}
.nav-dd-trigger:hover, .has-dd:hover .nav-dd-trigger, .has-dd.open .nav-dd-trigger { opacity: 1; color: var(--teal-deep); }
#nav.dk .nav-dd-trigger { color: #dde2ea; }
#nav.dk .nav-dd-trigger:hover, #nav.dk .has-dd:hover .nav-dd-trigger, #nav.dk .has-dd.open .nav-dd-trigger { color: var(--teal); }
.dd-caret { font-size: 9px; line-height: 1; transition: transform 0.2s; }
.has-dd:hover .dd-caret, .has-dd.open .dd-caret { transform: rotate(180deg); }
.nav-dd {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 210px; background: #fff; border: 1px solid rgba(0,0,0,0.07); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(27,45,79,0.16); padding: 8px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; z-index: 220;
}
.nav-dd::before { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.has-dd:hover .nav-dd, .has-dd:focus-within .nav-dd, .has-dd.open .nav-dd {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-dd a {
  font-size: 13px; padding: 9px 12px; border-radius: 7px;
  white-space: nowrap; text-decoration: none; transition: background 0.18s, color 0.18s;
}
#nav .nav-dd a, #nav.dk .nav-dd a { color: var(--navy); opacity: 1; }
#nav .nav-dd a:hover, #nav.dk .nav-dd a:hover { color: var(--teal-deep); background: var(--off); }
@media (max-width: 1060px) {
  .has-dd { display: block; }
  .nav-dd-trigger { width: 100%; justify-content: space-between; padding: 6px 0; opacity: 0.9; }
  .nav-dd {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    box-shadow: none; border: 0; background: transparent; padding: 2px 0 8px 12px; min-width: 0; display: none;
  }
  .nav-dd::before { display: none; }
  /* The desktop rule .has-dd:hover .nav-dd sits outside any media query and
     carries translateX(-50%), which beats .nav-dd{transform:none} above on
     specificity. On a phone, where a tap leaves a sticky hover, that shifted
     every open accordion row half its width off the left edge. Re-assert here.
     Found 17 Aug 2026, present since v1.91. */
  .has-dd:hover .nav-dd, .has-dd:focus-within .nav-dd, .has-dd.open .nav-dd { transform: none; }
  .has-dd.open .nav-dd { display: flex; }
  #nav .nav-dd a { padding: 8px 0; color: var(--navy); }
  #nav.dk .nav-dd a { color: #dde2ea; }
}

/* ── MEGA MENU (option D, agreed 17 Aug 2026) ──────────────────────────────
   Replaces the three small anchored cards on desktop with ONE full width panel
   that shows every section at once, plus a booking column.

   Why: the old card only ever showed the group you hovered, so schools, aged
   care and corporate were invisible to anyone who did not think to hover
   Services. Those three are where the volume is. The booking column puts the
   phone number in the panel for the callers who will not use the form.

   Structure. One .nav-mega per page, placed inside #nav immediately after
   .nav-links, so it is absolutely positioned against the nav and spans the full
   window. The three .nav-dd cards stay in the markup: they are the mobile
   accordion and the no-JS fallback, and they are hidden from 1061px up.

   Mobile is deliberately unchanged. Below 1061px .nav-mega is display:none and
   the accordion behaves exactly as it did before.

   The active column is marked by a tinted panel and a teal heading, NOT by
   dimming the others. Dimming inactive text with opacity dropped var(--mid)
   below 4.5:1 on white, which is the contrast failure this site has already
   been through once. Every column here stays fully legible. */
.nav-mega {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 219;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 22px 44px rgba(27,45,79,0.13);
  padding: 26px 5% 30px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-8px);
  /* visibility is deliberately NOT transitioned. With it in the list the panel
     still computes as hidden on the frame the open class is added, so moving
     keyboard focus into it silently failed. Matches .nav-dd, which never
     transitioned visibility either. */
  transition: opacity 0.18s ease, transform 0.18s ease;
  max-height: calc(100vh - 96px); overflow-y: auto;
}
#nav.mega-open .nav-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

.mega-inner {
  max-width: var(--maxw); margin: 0 auto;
  /* Rebalanced 19 Aug 2026 when the descriptions were cut back. The tracks are
     no longer near equal because the columns no longer carry near equal text:
     Services keeps five descriptions and needs the most width, About is three
     descriptions and two bare links and needs the least. Widths were chosen by
     measuring the natural height of every column at every width from 160 to
     420 and taking the allocation with the shortest tallest column, subject to
     no title and no one line description wrapping, and the booking button
     staying on one line. That last constraint is why the booking track is
     230px and not narrower. Panel: 429px at 1440, 561px at 1100.
     align-items is stretch, not start, so the four columns and the booking
     card share a bottom edge. Without it the card floats 170px above the
     bottom of the panel and the corner reads as a hole. */
  display: grid; grid-template-columns: 1.44fr 1.14fr 1.14fr 0.94fr 230px; gap: 12px; align-items: stretch;
}
.mega-col { padding: 14px 10px 10px; border-radius: 10px; transition: background 0.2s; }
.mega-col.on { background: var(--off); }
.mega-h {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 2.6px;
  text-transform: uppercase; color: var(--mid); padding-left: 12px; margin-bottom: 12px;
  transition: color 0.2s;
}
.mega-col.on .mega-h { color: var(--teal-deep); }
.mega-col a {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 12px; border-radius: 8px; text-decoration: none;
  transition: background 0.16s;
}
.mega-col a b { font-size: 13.5px; font-weight: 600; color: var(--navy); letter-spacing: -0.1px; transition: color 0.16s; }
.mega-col a i { font-style: normal; font-size: 12px; line-height: 1.45; color: var(--mid); }
.mega-col a:hover { background: rgba(27,45,79,0.06); }
.mega-col a:hover b { color: var(--teal-deep); }

/* Booking column. Navy on teal for the button, never white on teal. */
.mega-feat {
  background: var(--navy); border-radius: 12px; padding: 22px;
  color: #fff; display: flex; flex-direction: column; gap: 14px; justify-content: space-between;
}
.mf-k { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; }
.mf-t { font-size: 19px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.18; margin-bottom: 9px; }
.mf-p { font-size: 12px; line-height: 1.55; color: rgba(255,255,255,0.74); }
.mf-b {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  background: var(--teal); color: var(--navy); font-size: 12.5px; font-weight: 600;
  padding: 10px 18px; border-radius: 999px; text-decoration: none;
  transition: background 0.2s;
}
.mf-b:hover { background: var(--teal2); color: var(--navy); }
.mf-act { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.mf-d { display: block; font-size: 11.5px; color: rgba(255,255,255,0.6); }
.mf-d a { color: var(--teal); text-decoration: none; font-weight: 600; }
.mf-d a:hover { text-decoration: underline; }
.nav-mega a:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
.mf-txt { display: flex; flex-direction: column; gap: 6px; }
.mega-feat a:focus-visible { outline-color: var(--teal); }

/* From 1061px up the mega panel is the menu, so the old cards step aside. */
@media (min-width: 1061px) {
  #nav .nav-dd { display: none; }
  #nav .has-dd.on .dd-caret { transform: rotate(180deg); }
  #nav .has-dd.on .nav-dd-trigger { opacity: 1; color: var(--teal-deep); }
  #nav.dk .has-dd.on .nav-dd-trigger { color: var(--teal); }
}
/* Narrow desktop and tablet: the booking column drops to a full width row.
   Rewritten 18 Aug 2026 for option D. With five tracks the old three column
   rule made the four groups wrap onto two rows and the panel got TALLER, not
   shorter, which is the failure this change existed to fix. Four equal groups
   with the booking row underneath keeps one row of columns down to 1080, and
   below 1000 the groups go 2x2 which is still shorter than three tracks. */
@media (max-width: 1200px) {
  .mega-inner { grid-template-columns: 1.35fr 1fr 1.05fr 0.9fr; gap: 14px; }
  .mega-feat { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .mega-feat .mf-p { max-width: 460px; }
  .mf-t { margin-bottom: 6px; }
  .mf-act { flex: 0 0 auto; align-items: flex-end; text-align: right; }
  .mega-col a i { font-size: 11.5px; }
}
@media (max-width: 1060px) {
  .nav-mega { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-mega { transition: none; }
}


/* ── Skip link (WCAG 2.4.1) — visually hidden until keyboard focus ── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: 10px 18px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* Visible keyboard focus, site wide. Before this only the home hero had one. */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--teal-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
#nav.dk a:focus-visible, #nav.dk button:focus-visible,
.urgent-banner a:focus-visible, .cta-strip a:focus-visible, footer a:focus-visible {
  outline-color: var(--teal);
}

/* ── Promo bar (shared) — pages opt in with body.has-promo ── */
.promo-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 210;
  background: var(--navy2); color: rgba(255,255,255,0.82);
  text-align: center; font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.2px; padding: 7px 16px; line-height: 1.4;
}
.promo-bar a { color: var(--teal); text-decoration: none; font-weight: 500; }
.promo-bar a:hover { text-decoration: underline; }
body.has-promo #nav { top: 34px; }
body.has-promo { padding-top: 34px; }
@media(max-width:600px){
  .promo-bar { font-size: 11px; padding: 6px 12px; }
  .promo-bar .promo-ship { display: none; }
  body.has-promo #nav { top: 30px; }
  body.has-promo { padding-top: 30px; }
}

/* ── PHOTO SLOTS (v2.06, 24 Aug 2026) ─────────────────────────────────────
   Nine sections are built to take a photograph later. Every slot is named in
   assets/media.js and is empty by default, so the section renders its
   no-photo state and nothing says a picture is missing. Six slots show a
   content card in the meantime; two collapse the section to one full width
   column. Filling the slot in media.js is the only edit needed to add a
   photo: media.js writes the switch into the head before the page paints. */

.mslot { align-self: center; position: relative; }
.mslot > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }

/* what a slot shows while it has no photo */
.slot-card {
  background: var(--white); border: 1px solid var(--light);
  border-left: 3px solid var(--teal-deep); border-radius: 0 4px 4px 0;
  padding: 26px 28px; box-shadow: 0 1px 3px rgba(27,45,79,0.05);
}
.slot-card h5 {
  font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--teal-deep); margin-bottom: 14px;
}
.slot-card p { font-size: 14px; line-height: 1.75; color: var(--navy); font-weight: 400; margin: 0; }
.slot-card p + p { margin-top: 12px; }
.slot-card ul { list-style: none; margin: 0; padding: 0; }
.slot-card li {
  font-size: 14px; line-height: 1.6; color: var(--navy); font-weight: 400;
  padding: 11px 0 11px 22px; position: relative; border-top: 1px solid var(--soft);
}
.slot-card li:first-child { border-top: none; padding-top: 0; }
.slot-card li::before {
  content: ''; position: absolute; left: 0; top: 19px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal);
}
.slot-card li:first-child::before { top: 8px; }
.slot-card ul + p { margin-top: 18px; }

/* sections whose no-photo state is one full width column.
   Two classes so these beat the single-class grid rules in the page styles. */
.about-grid.mgrid-collapsed,
.ew-grid.mgrid-collapsed,
.aud-grid2.mgrid-collapsed { grid-template-columns: 1fr; gap: 0; }
.mgrid-collapsed > .mslot { display: none; }
.mgrid-collapsed .lead { max-width: 860px; }
.mgrid-collapsed .signs-box,
.mgrid-collapsed .signs { max-width: 860px; }
.mgrid-collapsed .aud-features,
.mgrid-collapsed .ew-features { grid-template-columns: repeat(4, 1fr); gap: 30px 34px; }
@media (max-width: 1100px) {
  .mgrid-collapsed .aud-features,
  .mgrid-collapsed .ew-features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .mgrid-collapsed .aud-features,
  .mgrid-collapsed .ew-features { grid-template-columns: 1fr; }
}

/* and back to two columns the moment that slot has a photo */
html.m-eyewear-frames .ew-grid.mgrid-collapsed[data-mgrid="eyewear-frames"] { grid-template-columns: 1fr 1.1fr; gap: 64px; }
html.m-eyewear-frames .mgrid-collapsed[data-mgrid="eyewear-frames"] > .mslot { display: block; }
html.m-eyewear-frames .mgrid-collapsed[data-mgrid="eyewear-frames"] .ew-features { grid-template-columns: 1fr 1fr; }
html.m-services-home .aud-grid2.mgrid-collapsed[data-mgrid="services-home"] { grid-template-columns: 1fr 1fr; gap: 80px; }
html.m-services-home .mgrid-collapsed[data-mgrid="services-home"] > .mslot { display: block; }
html.m-services-home .mgrid-collapsed[data-mgrid="services-home"] .aud-features { grid-template-columns: 1fr 1fr; }

/* the two service teasers that became a card row */
.tease-row { max-width: var(--maxw); margin: 0 auto; }
.tease-head { text-align: center; max-width: 760px; margin: 0 auto 52px; }
.tease-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--light); border: 1px solid var(--light); border-radius: 4px; overflow: hidden;
}
.tease-card { background: var(--white); padding: 40px 36px 36px; display: flex; flex-direction: column; }
.tease-card h3 {
  font-size: 22px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.25;
  color: var(--navy); margin-bottom: 14px;
}
.tease-card p { font-size: 14px; line-height: 1.75; color: var(--mid); margin-bottom: 26px; flex: 1; }
.tease-links { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
@media (max-width: 860px) {
  .tease-grid { grid-template-columns: 1fr; }
  .tease-head { margin-bottom: 36px; }
}

/* ── DIRECTOR'S STATEMENT (our-mission.html, v2.06, 25 Aug 2026) ──────────
   Ali's own words. The page runs the hero and the statement as one unbroken
   navy field with no breadcrumb strip between them, which is what makes it
   read as a letter rather than as another section of the site. */
.note {
  background: var(--navy); color: var(--white); padding: 104px 5%;
  position: relative; overflow: hidden; isolation: isolate;
}
.note::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 70% 60% at 22% 12%, rgba(75,191,191,0.16) 0%, transparent 62%);
}
.note-inner { max-width: 720px; margin: 0 auto; }
.note .lbl { color: var(--teal); }
.note h2.dsp { color: var(--white); margin-bottom: 32px; }
.note p { font-size: 17px; line-height: 1.85; color: rgba(255,255,255,0.78); font-weight: 400; }
.note p + p { margin-top: 22px; }
.note .sig { margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.14); }
.note .sig strong { display: block; font-size: 15px; color: var(--white); font-weight: 600; margin-bottom: 4px; }
.note .sig span { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.5); }

/* the flush pair: hero with no bottom padding, statement in the hero's own
   base colour so the seam between them does not read as a band change */
.page-hero.flush { min-height: 300px; padding: 96px 5% 0; }
.note.flush { background: #0a1424; padding: 52px 5% 104px; }
.note.flush::before { display: none; }

@media (max-width: 900px) {
  .note { padding: 72px 6%; }
  .note p { font-size: 16px; }
  .page-hero.flush { min-height: 240px; padding: 78px 6% 0; }
  .note.flush { padding: 40px 6% 72px; }
}