:root{
  --navy:#0A1C42;
  --navy-secondary:#15284F;
  --muted-blue:#4F566B;
  --red:#C51825;
  --bg-pale-blue:#EDF2F8;
  --bg-near-white:#F6F8FB;
  --text-primary:#17191D;
  --text-secondary:#697386;
  --border:#DBDCE0;
  --white:#FFFFFF;
  --footer-dark:#071632;

  --color-surface:var(--white);
  --color-surface-raised:var(--bg-near-white);
  --color-surface-pale:var(--bg-pale-blue);
  --color-ink:var(--text-primary);
  --color-ink-muted:var(--text-secondary);
  --color-accent:var(--navy);        /* structural interactive: borders, focus rings, CTA fill */
  --color-accent-strong:var(--navy-secondary); /* hover state for accent fills */
  --color-red:var(--red);            /* small accent ONLY — underlines, hover, tiny rules. Never a fill. */
  --color-border:var(--border);

  --nav-bg:var(--white);
  --nav-border:var(--border);
  --nav-ink:var(--text-primary);
  --nav-ink-muted:var(--text-secondary);
  --nav-accent:var(--navy);
  --nav-accent-strong:var(--navy-secondary);
  --nav-accent-ink:var(--white);

  --footer-bg:var(--footer-dark);
  --footer-border:#1B2C50;
  --footer-ink:#EDF1F8;
  --footer-ink-muted:#9FB0CC;

  --font-heading:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* Dark mode: re-valued, not reinvented — every rule below that reads var(--color-*)/var(--nav-*)
   is correct in both palettes with no further changes. System preference is the default; an
   explicit choice recorded via /static/theme-init.js always wins once set (same mechanism the
   rest of the site already uses). Navy reads as ink-on-dark rather than as a fill in dark mode
   (a navy fill would nearly disappear against a near-black page), so --nav-accent/-color-accent
   move to a lighter blue there, with --nav-accent-ink flipping to a dark ink so CTA text stays
   readable on that lighter fill. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --color-surface:#0A0A0A;
    --color-surface-raised:#151515;
    --color-surface-pale:#101826;
    --color-ink:#F5F1E8;
    --color-ink-muted:#9A9690;
    --color-accent:#6FA8FF;
    --color-accent-strong:#8FBBFF;
    --color-red:#FF8A80;
    --color-border:#2A2A2A;
    --nav-bg:var(--color-surface);
    --nav-border:var(--color-border);
    --nav-ink:var(--color-ink);
    --nav-ink-muted:var(--color-ink-muted);
    --nav-accent:#6FA8FF;
    --nav-accent-strong:#8FBBFF;
    --nav-accent-ink:#07142B;
    --footer-bg:#050B18;
    --footer-border:#16223B;
    --footer-ink:#EDF1F8;
    --footer-ink-muted:#9FB0CC;
  }
}
:root[data-theme="dark"]{
  --color-surface:#0A0A0A;
  --color-surface-raised:#151515;
  --color-surface-pale:#101826;
  --color-ink:#F5F1E8;
  --color-ink-muted:#9A9690;
  --color-accent:#6FA8FF;
  --color-accent-strong:#8FBBFF;
  --color-red:#FF8A80;
  --color-border:#2A2A2A;
  --nav-bg:var(--color-surface);
  --nav-border:var(--color-border);
  --nav-ink:var(--color-ink);
  --nav-ink-muted:var(--color-ink-muted);
  --nav-accent:#6FA8FF;
  --nav-accent-strong:#8FBBFF;
  --nav-accent-ink:#07142B;
  --footer-bg:#050B18;
  --footer-border:#16223B;
  --footer-ink:#EDF1F8;
  --footer-ink-muted:#9FB0CC;
}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:300;font-display:swap;src:url(/static/fonts/ibm-plex-mono-light.woff2) format('woff2');}
/* Smooth light/dark handoff on every element whose color comes from a token above, rather than
   listing each selector individually. Reduced-motion visitors get an instant switch instead. */
*,*::before,*::after{transition:background-color .25s ease,border-color .25s ease,color .25s ease,fill .25s ease,stroke .25s ease}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none}}

/* ── Button tooltips (public site) ──
   Same component/behavior as BRAND_TOKENS' .tip-anchor/.tip-bubble — duplicated here (rather than
   shared) because this file intentionally does not import BRAND_TOKENS, to keep the public
   palette fully independent of the login page's Onyx & Brass one. Fixed navy/white chip
   regardless of --color-*: a dark floating chip reads clearly against either page theme, so it
   never needs re-valuing under prefers-color-scheme/[data-theme]. */
.tip-anchor{position:relative}
.tip-bubble{
  position:absolute;z-index:80;left:50%;bottom:calc(100% + 9px);
  width:max-content;max-width:220px;
  --tip-dy:6px;--tip-scale:.94;--tip-ox:center;--tip-oy:bottom;
  transform:translate(var(--tip-x,-50%),var(--tip-dy)) scale(var(--tip-scale));
  transform-origin:var(--tip-ox) var(--tip-oy);
  background:var(--navy);color:var(--white);border:1px solid rgba(255,255,255,.12);
  font:400 .75rem/1.4 var(--font-body);letter-spacing:.01em;text-transform:none;text-align:left;
  padding:6px 10px;border-radius:7px;box-shadow:0 10px 28px -10px rgba(10,28,66,.5);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s;
}
.tip-bubble.tip-below{bottom:auto;top:calc(100% + var(--tip-below-gap,9px));--tip-oy:top;--tip-dy:-6px}
.tip-bubble.tip-left{left:0;--tip-x:0;--tip-ox:left}
.tip-bubble.tip-right{left:auto;right:0;--tip-x:0;--tip-ox:right}
.pnav .tip-bubble{--tip-below-gap:18px}
.tip-bubble.tip-visible{
  --tip-dy:0px;--tip-scale:1;opacity:1;visibility:visible;
  transition:opacity .15s ease,transform .15s ease,visibility 0s;
}
@media(prefers-reduced-motion:reduce){.tip-bubble{transition:opacity .01s linear,visibility 0s}}
@media(hover:none){.tip-bubble{display:none}}

.pnav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:22px;
  padding:14px clamp(16px,4vw,28px);
  background:var(--nav-bg);
  border-bottom:1px solid var(--nav-border);
  font:300 15px/1 var(--font-body);letter-spacing:.03em;
}
/* No color:inherit here: every <a> in the nav below sets its own explicit color, so a stray
   .pnav a{color:inherit} can't silently override .pnav-brand/.pnav-tab/.pnav-staff back to the
   inherited body ink color. */
.pnav a{text-decoration:none}
.pnav-brand{
  order:1;font-family:var(--font-heading);font-weight:500;letter-spacing:-.01em;color:var(--nav-ink);
  white-space:nowrap;font-size:17px;overflow:hidden;text-overflow:ellipsis;
}
/* Groups the tabs + staff link as one flex item, so the mobile dropdown (below) has a single box
   to position instead of two independently-placed ones. At desktop this is just an inline flex
   row — visually identical to the tabs and staff link being direct .pnav children. */
.pnav-panel{order:2;display:flex;align-items:center;gap:22px;flex:1;min-width:0}
.pnav-tabs{display:flex;gap:2px;flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.pnav-tabs::-webkit-scrollbar{display:none}
.pnav-tab{
  position:relative;padding:8px 13px;border-radius:6px;color:var(--nav-ink-muted);white-space:nowrap;
  font-size:14px;border-bottom:2px solid transparent;
  transition:background .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1);
}
/* Hover: label brightens to full ink plus a thin red underline accent — the site's one red touch
   in the nav, never a fill (accent-discipline: red is underline/rule/hover only). The accent line
   slides in from center via scaleX rather than the border simply appearing, so it reads as a
   deliberate motion rather than a flicker; transform-only so it never triggers layout. */
.pnav-tab::after{
  content:'';position:absolute;left:10%;right:10%;bottom:-2px;height:2px;background:var(--color-red);
  transform:scaleX(0);transition:transform .2s cubic-bezier(.4,0,.2,1);
}
.pnav-tab:hover{background:var(--color-surface-pale);color:var(--nav-ink)}
.pnav-tab:hover::after{transform:scaleX(1)}
.pnav-tab.active::after{content:none}
/* Active tab: filled navy / white text — the same primary-button pairing used everywhere else on
   the site (21:1, see the contrast note above PUBLIC_TOKENS), so "where am I" reads as clearly as
   the booking CTA itself. */
.pnav-tab.active{color:var(--white);font-weight:600;background:var(--nav-accent);border-color:transparent}
/* Staff sign-in: a quiet text link ahead of the booking CTA — no border/box, muted color, so it
   doesn't compete with the CTA for attention. Still one click away, just visually last. */
.pnav-staff{
  display:inline-flex;align-items:center;white-space:nowrap;
  font:400 12.5px/1 var(--font-body);letter-spacing:.02em;
  color:var(--nav-ink-muted);transition:color .15s;
}
.pnav-staff:hover,.pnav-staff.active{color:var(--nav-accent)}
/* Booking CTA — the one filled, high-contrast control in the nav, so it's the first thing the eye
   lands on. Navy fill / white text (21:1) is this site's one primary-button pairing; hover moves
   to --navy-secondary, never to red (red is never a CTA background — see PUBLIC_TOKENS). */
.pnav-cta{
  order:2;display:inline-flex;align-items:center;white-space:nowrap;flex:none;
  padding:9px 18px;border-radius:20px;background:var(--nav-accent);
  font:600 13px/1 var(--font-body);text-transform:uppercase;letter-spacing:.08em;
  color:var(--nav-accent-ink);
  transition:background .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1);
}
.pnav-cta:hover,.pnav-cta.active{background:var(--nav-accent-strong);transform:scale(1.02);box-shadow:0 4px 14px -6px rgba(10,28,66,.4)}
/* Press feedback: settle just under resting scale on :active, snap back on release. */
.pnav-cta:active{transform:scale(.98);transition-duration:.08s}
.pnav a:focus-visible,.pnav button:focus-visible{outline:2px solid var(--nav-accent);outline-offset:2px;border-radius:4px}

/* Theme toggle — ghost icon-button, same hover/focus language as .pnav-tab. */
.theme-toggle{
  order:3;flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border:none;border-radius:6px;
  background:transparent;color:var(--nav-ink-muted);cursor:pointer;
  transition:background .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1);
}
.theme-toggle:hover{background:var(--color-surface-pale);color:var(--nav-ink);transform:scale(1.08)}
.theme-toggle:active{transform:scale(.92);transition-duration:.08s}
.theme-toggle svg{width:18px;height:18px}
/* Icon swap is pure CSS (matches whichever palette is active, before /static/site.js even runs):
   moon = "you're in light mode, click for dark"; sun = "you're in dark mode, click for light". */
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:none}
}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}
:root[data-theme="light"] .theme-toggle .icon-sun{display:none}
:root[data-theme="light"] .theme-toggle .icon-moon{display:block}

/* ── Mobile menu ──
   Hidden entirely unless EARLY_INIT_JS has stamped html.js — a visitor without JS gets the plain
   always-visible, wrapping nav (.pnav-panel's un-gated base rules above) instead of a button that
   would otherwise do nothing. See SITE_JS for the click handler that toggles .pnav.open. */
.pnav-toggle{
  order:4;display:none;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;border:none;border-radius:6px;background:transparent;color:var(--nav-ink);
  cursor:pointer;transition:background .2s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1);
}
.pnav-toggle:hover{background:var(--color-surface-pale);transform:scale(1.08)}
.pnav-toggle:active{transform:scale(.92);transition-duration:.08s}
.pnav-toggle svg{width:20px;height:20px}
.pnav-toggle .icon-close{display:none}
.pnav.open .pnav-toggle .icon-menu{display:none}
.pnav.open .pnav-toggle .icon-close{display:block}

@media(max-width:720px){
  .pnav{gap:10px}
  .pnav-brand{max-width:38vw;font-size:15px}
  /* The booking CTA stays exposed at every width — it's the conversion path and shouldn't need
     an extra tap through the drawer to find. It renders as a direct sibling of .pnav-panel (not
     nested inside it), so .pnav-panel's display:none below never hides it. */
  .pnav-cta{padding:8px 14px;font-size:11.5px}
  html.js .pnav-toggle{display:inline-flex}
  html.js .pnav-panel{display:none}
  html.js .pnav.open .pnav-panel{
    display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;
    background:var(--nav-bg);border-bottom:1px solid var(--nav-border);
    box-shadow:0 16px 32px -20px rgba(10,28,66,.25);
    padding:2px clamp(16px,4vw,28px) 12px;
    animation:pnav-reveal .18s ease-out both;
  }
  html.js .pnav.open .pnav-tabs{flex-direction:column;flex-wrap:nowrap;gap:0}
  html.js .pnav.open .pnav-tab{padding:13px 2px;border-radius:0;border-top:1px solid var(--nav-border);font-size:15.5px}
  html.js .pnav.open .pnav-tabs .pnav-tab:first-child{border-top:none}
  /* Staff sign-in sorts last and smallest in the drawer — patient-facing links stay first. */
  html.js .pnav.open .pnav-staff{order:9;align-self:stretch;justify-content:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--nav-border);font-size:12px}
}
@keyframes pnav-reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html.js .pnav.open .pnav-panel{animation:none}}

/* Consumer-facing disclosure block. Quiet by default: a legal notice that shouts is a notice
   people learn to skip. */
.pdisc{
  max-width:760px;margin:0 auto;padding:28px clamp(16px,4vw,24px);
  font:300 13px/1.65 var(--font-body);letter-spacing:.03em;color:var(--color-ink-muted);text-align:left;
}
.pdisc strong{color:var(--color-ink);font-weight:600}
.pdisc p{margin:0 0 10px}
.pdisc p:last-child{margin-bottom:0}
.pdisc a{color:var(--color-ink);text-decoration:underline;text-underline-offset:2px}
/* No hover color change: --color-accent fails AA as text (see note above). */
.pdisc a:hover{color:var(--color-ink)}