/* ==========================================================================
   Dr. Gaurab Bhaduri — Consultant, Diabetes & Endocrinology
   Luxe-editorial medical design system
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --navy:        #0D2036;   /* near-black ground */
  --navy-700:    #102A43;
  --navy-600:    #17364F;
  --teal:        #0E7490;
  --teal-300:    #6FC6DC;
  --terracotta:  #C96A32;
  --bronze:      #C9A227;   /* ornamental metallic */
  --bronze-soft: #D8B77A;

  /* Neutrals */
  --cream:       #EFE9DE;
  --cream-dim:   rgba(239, 233, 222, 0.72);
  --ivory:       #F7F5F0;
  --ivory-deep:  #EDE8DE;
  --white:       #FFFFFF;
  --ink:         #17202A;
  --muted:       #52606D;
  --muted-light: #5F6874;

  /* Semantic */
  --bg:          var(--ivory);
  --surface:     var(--white);
  --text:        var(--ink);
  --text-muted:  var(--muted);
  --rule:        rgba(13, 32, 54, 0.14);
  --rule-strong: rgba(13, 32, 54, 0.28);
  --rule-invert: rgba(239, 233, 222, 0.22);
  --accent-text: #A04E20;   /* terracotta, AA at small sizes on both ivory tones */

  /* Type */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-hero:       clamp(2.9rem, 8.2vw, 7.6rem);
  --fs-kicker:     clamp(1.75rem, 3.5vw, 3.15rem);
  --fs-kicker-sm:  clamp(1.4rem, 2.4vw, 2.1rem);
  --fs-title:      clamp(1.05rem, 1.65vw, 1.6rem);   /* uppercase tracked */
  --fs-title-lg:   clamp(1.25rem, 2.1vw, 2rem);
  --fs-lead:       clamp(1.02rem, 1.2vw, 1.18rem);
  --fs-body:       1rem;
  --fs-small:      0.875rem;
  --fs-micro:      0.6875rem;

  /* Space */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --sp-9: 6rem;   --sp-10: 8rem;
  --section-y: clamp(4.5rem, 9vw, 9.5rem);

  /* Layout */
  --container: 1280px;
  --narrow: 860px;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur: 460ms;

  --shadow-md: 0 2px 8px rgba(13,32,54,.08), 0 24px 60px rgba(13,32,54,.14);

  --z-nav: 100; --z-dock: 90; --z-menu: 200;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x lives here (not on body) so <html> stays the scroll container and
   window scroll events keep firing. Do not switch this to overflow:clip. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}
html.is-locked, html.is-locked body { overflow: hidden; }

h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
::selection { background: var(--navy); color: var(--cream); }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.on-dark :focus-visible, .hero :focus-visible, .menu :focus-visible { outline-color: var(--bronze-soft); }

/* ---------- Utilities ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: var(--narrow); }
.section { padding-block: var(--section-y); }
.section-tight { padding-block: clamp(3rem, 6vw, 6rem); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px;
  background: var(--navy); color: var(--cream);
  padding: .8rem 1.25rem; z-index: 999; font-size: var(--fs-small);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ===== THE SIGNATURE PAIR =================================================
   A large, elegant serif kicker sitting above a small, wide-tracked
   uppercase title. This is the core of the page's voice.
   ======================================================================== */
.kicker {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  font-weight: 300;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--accent-text);
  margin: 0 0 .45rem;
}

/* The About kicker is the one line in the set long enough to wrap on desktop.
   Scoped down just far enough to hold it on a single line from ~880px upward;
   below that it falls back to the shared minimum and wraps naturally. */
.kicker-oneline { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.kicker-sm { font-size: var(--fs-kicker-sm); }
.on-dark .kicker, .hero .kicker, .page-hero .kicker { color: var(--bronze-soft); }

.sec-title {
  font-family: var(--font-body);
  font-size: var(--fs-title);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.4;
  color: var(--text);
  text-wrap: balance;
}
.sec-title-lg { font-size: var(--fs-title-lg); letter-spacing: 0.13em; }
.on-dark .sec-title, .hero .sec-title, .page-hero .sec-title { color: var(--cream); }

/* Centred section header */
.sec-head {
  text-align: center;
  max-width: 60rem;
  margin: 0 auto var(--sp-8);
}
.sec-head .lead { margin-inline: auto; }
.sec-head-left { text-align: left; margin-inline: 0; }
.sec-head-left .lead { margin-inline: 0; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 62ch;
  font-weight: 300;
}
.on-dark .lead, .hero .lead, .page-hero .lead { color: var(--cream-dim); }
.measure { max-width: 68ch; }

/* Ornamental divider — a diamond flanked by rules */
.ornament {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 1rem; margin: var(--sp-6) auto;
  color: var(--bronze-soft);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: .22em;
  text-transform: uppercase;
  max-width: 46rem;
}

/* Second line of the qualification string. Full flex basis puts it on its own
   centred row; 1.3em lifts it above the tracked micro-type around it. */
.ornament-fellow {
  flex-basis: 100%;
  margin-top: .55rem;
  font-size: 1.3em;
  letter-spacing: .16em;
}
.ornament::before, .ornament::after {
  content: ""; flex: 1 1 auto; height: 1px; max-width: 6rem;
  background: linear-gradient(90deg, transparent, currentColor);
  opacity: .7;
}
.ornament::after { background: linear-gradient(270deg, transparent, currentColor); }
.ornament .dia { flex: none; width: 5px; height: 5px; transform: rotate(45deg); background: currentColor; }
.ornament-dark { color: var(--accent-text); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
.on-dark .rule { background: var(--rule-invert); }

/* Small uppercase label (used sparingly, for metadata) */
.label {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.on-dark .label { color: rgba(239,233,222,.66); }

.serif { font-family: var(--font-display); font-style: italic; font-weight: 300; }

/* Dark surface */
.on-dark {
  background: var(--navy);
  color: var(--cream);
  --text: var(--cream);
  --text-muted: rgba(239, 233, 222, 0.72);
  --muted: rgba(239, 233, 222, 0.8);
  --muted-light: rgba(239, 233, 222, 0.66);
  --rule: var(--rule-invert);
  --rule-strong: rgba(239, 233, 222, 0.38);
  --surface: var(--navy-600);
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--rule-strong);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .8rem;
  padding: 1.05rem 2rem;
  min-height: 50px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--navy);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.btn:hover, .btn:focus-visible { color: var(--cream); border-color: var(--navy); }
.btn .arw { transition: transform var(--dur) var(--ease); flex: none; }
.btn:hover .arw { transform: translateX(5px); }

.btn-solid { --btn-bg: var(--navy); --btn-fg: var(--cream); --btn-bd: var(--navy); }
.btn-solid::before { background: var(--teal); }
.btn-solid:hover, .btn-solid:focus-visible { border-color: var(--teal); color: #fff; }

.btn-light { --btn-fg: var(--cream); --btn-bd: rgba(239,233,222,.42); }
.btn-light::before { background: var(--cream); }
.btn-light:hover, .btn-light:focus-visible { color: var(--navy); border-color: var(--cream); }

.btn-cream { --btn-bg: var(--cream); --btn-fg: var(--navy); --btn-bd: var(--cream); }
.btn-cream::before { background: var(--bronze-soft); }
.btn-cream:hover, .btn-cream:focus-visible { color: var(--navy); border-color: var(--bronze-soft); }

.btn-sm { padding: .8rem 1.3rem; min-height: 44px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.sec-head .btn-row, .btn-row-center { justify-content: center; }

/* Text link */
.link {
  position: relative; display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  padding-bottom: .45rem;
  color: var(--text);
}
.link::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform-origin: right; transform: scaleX(1);
  transition: transform var(--dur) var(--ease);
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(0); transform-origin: left; }
.link .arw { transition: transform var(--dur) var(--ease); }
.link:hover .arw { transform: translateX(5px); }
.link-accent { color: var(--accent-text); }
.on-dark .link-accent { color: var(--bronze-soft); }

/* ---------- Header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: var(--z-nav);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), padding var(--dur) var(--ease);
  padding-block: 1.25rem;
}
.hdr-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.hdr[data-state="top"] { color: var(--cream); }
.hdr[data-state="solid"] {
  background: rgba(13, 32, 54, 0.94);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  color: var(--cream);
  padding-block: .75rem;
  box-shadow: 0 1px 0 rgba(239,233,222,.1);
}
.hdr.hdr-solid[data-state="solid"], .hdr.hdr-solid { background: rgba(13, 32, 54, 0.97); color: var(--cream); }

/* Centre monogram */
.crest { display: flex; flex-direction: column; align-items: center; gap: .35rem; line-height: 1; }

.hdr-side { display: flex; flex-direction: column; gap: .2rem; font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; }
.hdr-side-r { align-items: flex-end; text-align: right; }
.hdr-side .muted { opacity: .68; }
/* padding-block keeps these above the 24px minimum target size (WCAG 2.2 AA). */
.hdr-side a { display: inline-flex; align-items: center; gap: .45rem; padding-block: 4px; transition: opacity var(--dur-fast); }
.hdr-side a:hover { opacity: .7; }
@media (max-width: 860px) { .hdr-side .hide-sm { display: none; } }
@media (max-width: 560px) { .hdr-side-l { display: none; } }


/* Header right column. The phone number was replaced by a lecture-invitation
   link; WhatsApp now carries a qualifier so patients do not use it as a general
   enquiry channel. The qualifier is the one piece of long-form text up here, so
   it drops its tracking and wraps to two short lines. */
.hdr-r-row { display: flex; align-items: center; gap: 1rem; }
.hdr-invite {
  border: 1px solid currentColor;
  padding: .45rem .7rem !important;   /* keeps the target above 24px (WCAG 2.2 AA) */
  line-height: 1;
}
.hdr-invite:hover, .hdr-invite:focus-visible { opacity: 1; background: rgba(239,233,222,.12); }
.hdr-wa { display: grid; justify-items: end; gap: .1rem; text-align: right; }
.hdr-wa-note {
  font-size: .5rem;
  letter-spacing: .06em;
  text-transform: none;
  opacity: .62;
  max-width: 12rem;
  line-height: 1.35;
}
@media (max-width: 1080px) { .hdr-wa-note { display: none; } }
.menu-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 44px; padding: .4rem 0 .4rem .6rem;
  font-size: 0.6875rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
  color: inherit;
}
.menu-btn .bars { display: grid; gap: 4px; }
.menu-btn .bars span { display: block; width: 24px; height: 1px; background: currentColor; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.menu-btn:hover .bars span:first-child { transform: translateX(3px); }

/* ---------- Full-screen menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--navy);
  color: var(--cream);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 1.25rem var(--gutter) 2rem;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 700ms var(--ease), opacity 320ms var(--ease), visibility 0s linear 700ms;
}
.menu[data-open="true"] {
  opacity: 1; visibility: visible; clip-path: inset(0 0 0 0);
  transition: clip-path 700ms var(--ease), opacity 320ms var(--ease), visibility 0s linear 0s;
}
.menu-top { display: flex; justify-content: flex-end; }
.menu-close {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 44px; padding: .4rem .2rem;
  font-size: 0.6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cream);
}
.menu-body { display: grid; gap: var(--sp-7); align-content: center; padding-block: var(--sp-6); }
@media (min-width: 900px) { .menu-body { grid-template-columns: 1.4fr 1fr; gap: var(--sp-9); align-items: center; } }

.menu-nav { display: grid; gap: .1rem; }
.menu-nav a {
  display: flex; align-items: baseline; gap: 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4.4vw, 3rem);
  font-weight: 300; line-height: 1.15;
  padding: .28rem 0;
  opacity: 0; transform: translateY(16px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease), color 200ms;
}
.menu[data-open="true"] .menu-nav a { opacity: 1; transform: none; }
.menu-nav a:hover, .menu-nav a:focus-visible { color: var(--bronze-soft); }
.menu-nav a[aria-current="page"] { color: var(--bronze-soft); font-style: italic; }
.menu-nav .idx {
  font-family: var(--font-body); font-size: .58rem; letter-spacing: .18em;
  opacity: .5; font-variant-numeric: tabular-nums;
}

/* Gallery sub-menu. A disclosure, not a hover dropdown: this lives inside a
   full-screen overlay where hover targets are unreliable on touch. The button
   inherits the nav's type and entrance animation so the list still reads as one
   sequence; the sub-links step down a size to show they are children. */
.menu-sub { display: grid; }
.menu-sub-btn {
  display: flex; align-items: baseline; gap: 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4.4vw, 3rem);
  font-weight: 300; line-height: 1.15;
  padding: .28rem 0;
  background: none; border: 0; color: inherit; text-align: left; cursor: pointer;
  opacity: 0; transform: translateY(16px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease), color 200ms;
}
.menu[data-open="true"] .menu-sub-btn { opacity: 1; transform: none; }
.menu-sub-btn:hover, .menu-sub-btn:focus-visible { color: var(--bronze-soft); }
.menu-sub-chev { margin-left: .2rem; transition: transform var(--dur) var(--ease); }
.menu-sub-btn[aria-expanded="true"] .menu-sub-chev { transform: rotate(180deg); }
.menu-sub-list { display: grid; gap: .1rem; padding: .2rem 0 .5rem 2.6rem; }
.menu-nav .menu-sub-list a {
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  opacity: 1; transform: none;
  padding-block: .3rem;
}
.menu-aside { display: grid; gap: var(--sp-5); align-content: start; }
.menu-aside .label { color: rgba(239,233,222,.6); }
.menu-contact { display: grid; gap: .35rem; font-size: 1rem; }
.menu-contact a { padding-block: 4px; }
.menu-contact a:hover { color: var(--bronze-soft); }
.menu-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.menu-foot { border-top: 1px solid var(--rule-invert); padding-top: 1.25rem; font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: rgba(239,233,222,.6); }

/* ---------- HERO — premium golden ----------
   Layout, type and spacing are unchanged; only the colour system differs.
   The gradient runs deep brown-gold → rich gold → warm gold and then eases
   into the navy of the credentials rail over the final sixth, so the two
   sections read as one composition rather than two stacked blocks. */
.hero {
  /* Height of the narrow-screen photo band; also reserves the space above it. */
  --hero-band: clamp(240px, 46vw, 430px);
  position: relative;
  min-height: 100svh;
  background:
    linear-gradient(180deg,
      #5B4520 0%,
      #6F5428 14%,
      #855E1E 34%,
      #A57122 52%,
      #996C21 66%,
      #A87C2F 76%,
      #8C6C2F 84%,
      #6E6247 90%,
      #2E4050 96%,
      var(--navy-700) 100%);
  display: grid;
  place-items: center;
  text-align: center;
  color: #FFFFFF;
  overflow: hidden;
  isolation: isolate;
  padding: 8rem var(--gutter) 5rem;
}

/* Depth: the conference photograph blended into the gold, a soft warm light
   behind the wordmark, a vignette, whisper-fine rules and a grain wash. */
.hero-media { position: absolute; inset: 0; z-index: -2; pointer-events: none; }

/* The photograph is composited in `luminosity`, so it keeps the gold's hue and
   contributes only its light and texture — it reads as part of the gradient
   rather than a picture sitting behind it. */
/* Anchored to the lower left rather than full-bleed, so the speaker sits under
   the opening of the wordmark with the podium and microphone in frame. The
   mask dissolves the panel's top and right edges into the gradient. */
.hero-photo {
  position: absolute;
  left: 0; bottom: 0;
  width: clamp(360px, 62%, 1000px);
  height: 82%;
  object-fit: cover;
  object-position: 85% 0%;
  filter: contrast(1.02) brightness(.72);
  opacity: 1;
  mix-blend-mode: luminosity;
  /* A single radial mask anchored to the bottom-left corner: solid where he
     stands, dissolving up and to the right into the gradient. */
  -webkit-mask-image: radial-gradient(82% 128% at 26% 104%, #000 0%, #000 48%, rgba(0,0,0,.6) 70%, transparent 94%);
          mask-image: radial-gradient(82% 128% at 26% 104%, #000 0%, #000 48%, rgba(0,0,0,.6) 70%, transparent 94%);
}

/* At 1024-1440px his jaw sat right on the primary CTA's left edge (measured
   gap: -33px at 1024, -3px at 1440). A small translate moves the panel and its
   mask together, so the composition and the dissolve are unchanged. Desktop
   only: below 921px he is the bottom band and never meets the buttons. */
@media (min-width: 921px) {
  .hero-photo { transform: translateX(-64px); }
}

.hero-media::before,
.hero-media::after { content: ""; position: absolute; inset: 0; }
.hero-media::before {
  background:
    /* scrim through the text band, so the type stays clear of the podium */
    linear-gradient(180deg, rgba(74, 52, 18, .28) 0%, rgba(74, 52, 18, .41) 26%, rgba(74, 52, 18, .41) 58%, rgba(74, 52, 18, .57) 66%, rgba(74, 52, 18, .57) 80%, transparent 94%),
    radial-gradient(58% 42% at 50% 30%, rgba(255, 240, 205, .17) 0%, rgba(255, 236, 195, .06) 45%, transparent 72%),
    radial-gradient(90% 60% at 50% 100%, rgba(46, 64, 80, .34) 0%, transparent 62%),
    radial-gradient(120% 80% at 50% 45%, transparent 40%, rgba(74, 52, 18, .38) 100%);
  animation: heroGlow 22s ease-in-out infinite alternate;
}
@keyframes heroGlow { from { opacity: .82; } to { opacity: 1; } }
.hero-media::after {
  /* fine grain + barely-there geometric rules */
  background-image:
    repeating-linear-gradient(90deg, rgba(255,246,224,.05) 0 1px, transparent 1px 148px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .16;
  mix-blend-mode: overlay;
}
/* Slow champagne motes — three only, and very faint */
.hero-mote {
  position: absolute; z-index: -2; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,244,215,.26), transparent 70%);
  filter: blur(46px); pointer-events: none;
}
.hero-mote-1 { width: 320px; height: 320px; left: 8%;  top: 22%; animation: mote 34s ease-in-out infinite alternate; }
.hero-mote-2 { width: 240px; height: 240px; right: 11%; top: 14%; animation: mote 44s ease-in-out infinite alternate-reverse; }
.hero-mote-3 { width: 400px; height: 400px; left: 44%; bottom: 6%; opacity: .4; animation: mote 52s ease-in-out infinite alternate; }
@keyframes mote {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -26px, 0) scale(1.1); }
}

.hero-inner { max-width: 76rem; position: relative; }

.hero-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-hero);
  line-height: .94;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 44px rgba(74, 52, 18, .34);
}
.hero-sub {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.6vw, 2.15rem);
  line-height: 1.35;
  color: #FFF8E8;
  margin-bottom: 1.75rem;
}
/* On gold the old bronze accent disappears; a deep brown-gold reads as the
   same warm family while staying legible. */
.hero-sub em { font-style: italic; color: #FFF1D2; }
.hero-note {
  font-size: var(--fs-small); font-weight: 300;
  color: var(--cream-dim); max-width: 46ch; margin: 0 auto 2rem;
}
.hero .btn-row { justify-content: center; }
.hero-scroll {
  position: absolute; left: 50%; bottom: 1.75rem; transform: translateX(-50%);
  display: grid; justify-items: center; gap: .5rem;
  font-size: 0.5625rem; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(239,233,222,.62);
}
.hero-scroll .line { width: 1px; height: 34px; background: linear-gradient(180deg, currentColor, transparent); }
/* The scroll cue is a pointer affordance and sits over the podium on smaller
   screens; touch users do not need it. */
@media (max-width: 920px) { .hero-scroll { display: none; } }

/* ---------- Credentials rail ---------- */
.creds {
  background: var(--navy-700);
  color: var(--cream);
  border-top: 1px solid rgba(239,233,222,.12);
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
}
.creds-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: rgba(239,233,222,.12);
}
@media (min-width: 700px)  { .creds-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .creds-grid { grid-template-columns: repeat(6, 1fr); } }
.cred {
  background: var(--navy-700);
  padding: 1.35rem 1rem;
  text-align: center;
  display: grid; gap: .45rem; align-content: start;
}
.cred-k {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 300; line-height: 1; color: var(--cream);
}
.cred-k.is-small { font-size: clamp(1.15rem, 1.9vw, 1.55rem); line-height: 1.2; }
.cred-k.is-lead { font-size: clamp(2.6rem, 4.3vw, 3.9rem); }

/* The six keys are wildly different sizes — a big number, four short
   post-nominals and one long fellowship name — so their descriptions used to
   start at six different heights. Subgrid hands every cell the same two row
   tracks, so the keys share one band and the descriptions all begin on the same
   line. Keys sit on the band's baseline rather than floating in it. */
@supports (grid-template-rows: subgrid) {
  .cred { grid-row: span 2; grid-template-rows: subgrid; align-content: stretch; }
  .cred-k { display: flex; align-items: flex-end; justify-content: center; }
}
.cred-v {
  font-size: 0.625rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(239,233,222,.66); line-height: 1.6;
}

/* ---------- Split editorial ---------- */
.split { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 940px) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6.5rem); }
  .split-media-first > .split-media { order: -1; }
  .split-narrow { grid-template-columns: .9fr 1.1fr; }
}
.split-media { position: relative; }
.figure { position: relative; overflow: hidden; background: var(--ivory-deep); }
.figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.figure-zoom:hover img { transform: scale(1.04); }
.figure-tall { aspect-ratio: 4/5; }
.figure-wide { aspect-ratio: 3/2; }
.figure-cine { aspect-ratio: 16/9; }
.figure-frame { padding: .75rem; border: 1px solid var(--rule); }
.figcaption {
  margin-top: .9rem; font-size: var(--fs-micro); letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted-light);
}

.stat-card {
  position: absolute; right: -1.25rem; bottom: -1.25rem;
  background: var(--navy); color: var(--cream);
  padding: 1.4rem 1.7rem; display: grid; gap: .35rem; max-width: 15.5rem;
  text-align: left;
}
@media (max-width: 620px) { .stat-card { right: 0; bottom: -1rem; padding: 1.1rem 1.25rem; } }
/* Second plate, same component. Pinned to the portrait's top-right, which is
   background in the 4:5 crop, so it never covers his face. Both plates go
   static and stack on narrow screens, where there is no room to overlap. */
.stat-card-quals { bottom: -1.25rem; top: auto; left: -1.25rem; right: auto; }
@media (max-width: 620px) {
  .split-media { display: grid; gap: .75rem; }
  .stat-card, .stat-card-quals { position: static; max-width: none; }
}
.stat-card .big { font-family: var(--font-display); font-size: 2rem; font-weight: 300; line-height: 1; color: var(--bronze-soft); }
.stat-card .sm { font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: rgba(239,233,222,.72); line-height: 1.6; }

/* Definition list */
.deflist { display: grid; margin-top: var(--sp-6); }
.deflist div { display: grid; gap: .35rem; padding: 1.05rem 0; border-top: 1px solid var(--rule); }
@media (min-width: 620px) { .deflist div { grid-template-columns: 9rem 1fr; gap: 1.5rem; align-items: baseline; } }
.deflist dt { font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--muted-light); font-weight: 500; }
.deflist dd { margin: 0; font-size: .96rem; color: var(--text); font-weight: 300; }

/* ---------- Full-bleed image band ---------- */
.band {
  position: relative; isolation: isolate;
  color: var(--cream);
  padding-block: clamp(5rem, 12vw, 11rem);
  text-align: center;
  overflow: hidden;
}
.band > img.bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(13,32,54,.78), rgba(13,32,54,.62) 45%, rgba(13,32,54,.86));
}
.band .lead { color: var(--cream-dim); margin-inline: auto; }
.band-tall { padding-block: clamp(7rem, 16vw, 14rem); }

/* ---------- Expertise editorial list ---------- */
.xp-list { border-top: 1px solid var(--rule); }
.xp { display: block; border-bottom: 1px solid var(--rule); padding: clamp(1.6rem, 2.8vw, 2.5rem) 0; }
.xp-row { display: grid; gap: .8rem 1.75rem; align-items: start; }
@media (min-width: 880px) {
  .xp-row { grid-template-columns: 3.5rem 1.05fr 1.25fr 2.5rem; align-items: center; }
}
.xp-idx { font-family: var(--font-display); font-size: 1.05rem; color: var(--accent-text); font-style: italic; }
.on-dark .xp-idx { color: var(--bronze-soft); }
.xp-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  font-weight: 300; line-height: 1.15;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.xp-desc { color: var(--text-muted); font-size: .94rem; line-height: 1.7; max-width: 52ch; font-weight: 300; }
.xp-go {
  display: none; width: 42px; height: 42px; border: 1px solid var(--rule-strong);
  border-radius: 50%; place-items: center;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (min-width: 880px) { .xp-go { display: grid; justify-self: end; } }
.xp:hover .xp-title { color: var(--accent-text); }
@media (min-width: 880px) { .xp:hover .xp-title { transform: translateX(8px); } }
.xp:hover .xp-go { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.xp-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.tag {
  font-size: 0.65rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem .7rem; border: 1px solid var(--rule);
  color: var(--muted); background: transparent;
}

/* ---------- Principles ---------- */
.principles { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
@media (min-width: 760px)  { .principles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .principles { grid-template-columns: repeat(4, 1fr); } }
.principle {
  background: var(--navy);
  padding: var(--sp-7) var(--sp-5);
  display: grid; gap: .85rem; align-content: start; text-align: center;
}
.principle-n { font-family: var(--font-display); font-size: 1.6rem; font-style: italic; color: var(--bronze-soft); line-height: 1; }
.principle h3 { font-family: var(--font-body); font-size: .78rem; text-transform: uppercase; letter-spacing: .18em; color: var(--cream); }
.principle p { font-size: .9rem; color: var(--text-muted); line-height: 1.7; font-weight: 300; }

/* ---------- Tabs ---------- */
.tabs-head {
  display: flex; justify-content: flex-start; gap: .25rem;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--sp-8);
  scroll-snap-type: x proximity;
}
/* justify-content:center on an overflowing scroll container pushes the first
   item into negative space the user cannot scroll back to — that is what cut
   the "D" off "Diabetes" around 1100px. Auto-margin pseudo-elements centre the
   strip only when it actually fits, and left-align it when it does not. */
@media (min-width: 1100px) {
  .tabs-head::before, .tabs-head::after { content: ""; margin: auto; }
}
.tabs-head::-webkit-scrollbar { display: none; }
.tab-btn {
  position: relative; flex: none; scroll-snap-align: start;
  padding: 1rem 1.1rem; min-height: 48px;
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-light); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.tab-btn::after {
  content: ""; position: absolute; left: .5rem; right: .5rem; bottom: -1px; height: 1px;
  background: var(--accent-text); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.tab-btn:hover { color: var(--text); }
.tab-btn[aria-selected="true"] { color: var(--accent-text); }
.tab-btn[aria-selected="true"]::after { transform: scaleX(1); }
.on-dark .tab-btn { color: rgba(239,233,222,.66); }
.on-dark .tab-btn:hover { color: var(--cream); }
.on-dark .tab-btn[aria-selected="true"] { color: var(--bronze-soft); }
.on-dark .tab-btn::after { background: var(--bronze-soft); }

.tab-panel[hidden] { display: none !important; }
.tab-body { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; text-align: left; }
@media (min-width: 940px) { .tab-body { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 5.5vw, 5.5rem); } }
.tab-body > * { animation: fadeUp 640ms var(--ease) both; }
.tab-body > *:nth-child(2) { animation-delay: 80ms; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.tab-title { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 300; line-height: 1.1; margin-bottom: 1.1rem; }
.tab-topics { display: grid; margin-top: var(--sp-6); }
.tab-topics li {
  padding: .85rem 0; border-top: 1px solid var(--rule);
  font-size: .94rem; font-weight: 300; display: flex; gap: .9rem; align-items: baseline;
}
.tab-topics .mk { flex: none; width: 4px; height: 4px; transform: rotate(45deg) translateY(-3px); background: var(--accent-text); }
.on-dark .tab-topics .mk { background: var(--bronze-soft); }

/* ---------- Research orbit ---------- */
.orbit { width: 100%; height: auto; overflow: visible; }
.orbit .ring { fill: none; stroke: rgba(239,233,222,.2); stroke-width: 1; }
.orbit .ring-dash { stroke-dasharray: 2 8; }
.orbit .node { fill: var(--bronze-soft); }
.orbit .node-core { fill: var(--terracotta); }
.orbit .lbl { font-family: var(--font-body); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; fill: rgba(239,233,222,.82); }
.orbit .lbl-core { font-family: var(--font-display); font-size: 14px; font-style: italic; fill: var(--cream); }
.orbit-spin { transform-origin: 50% 50%; animation: spin 70s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.focus-list { display: grid; }
.focus-list li { padding: 1.25rem 0; border-top: 1px solid var(--rule); display: grid; gap: .4rem; }
.focus-list li:last-child { border-bottom: 1px solid var(--rule); }
.focus-list h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 300; }
.focus-list p { font-size: .9rem; color: var(--text-muted); font-weight: 300; }

/* ---------- Publications ---------- */
.pub-years { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--sp-7); justify-content: center; }
.chip {
  padding: .65rem 1.15rem; min-height: 44px; display: inline-flex; align-items: center;
  border: 1px solid var(--rule-strong); background: transparent;
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--cream); }

.pubs { border-top: 1px solid var(--rule); }
.pub { border-bottom: 1px solid var(--rule); }
.pub-head { width: 100%; text-align: left; display: grid; gap: .55rem 1.75rem; align-items: start; padding: 1.5rem 0; }
@media (min-width: 820px) { .pub-head { grid-template-columns: 4.5rem 1fr 7rem 2.5rem; align-items: center; } }
.pub-year { font-family: var(--font-display); font-size: 1.05rem; font-style: italic; color: var(--accent-text); }
.pub-title { font-size: 1rem; font-weight: 400; line-height: 1.5; transition: color var(--dur-fast) var(--ease); }
.pub-head:hover .pub-title { color: var(--accent-text); }
.pub-kind { font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-light); }
.pub-toggle {
  width: 36px; height: 36px; border: 1px solid var(--rule-strong); border-radius: 50%;
  display: grid; place-items: center; justify-self: start; flex: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (min-width: 820px) { .pub-toggle { justify-self: end; } }
.pub-toggle svg { transition: transform var(--dur) var(--ease); }
.pub-head[aria-expanded="true"] .pub-toggle { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.pub-head[aria-expanded="true"] .pub-toggle svg { transform: rotate(45deg); }
.pub-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 500ms var(--ease); }
.pub-body > div { overflow: hidden; }
.pub[data-open="true"] .pub-body { grid-template-rows: 1fr; }
.pub-body-inner { padding-bottom: 1.75rem; }
@media (min-width: 820px) { .pub-body-inner { padding-left: 4.5rem; max-width: 70ch; } }
.pub-authors { font-size: .9rem; color: var(--text-muted); line-height: 1.75; font-weight: 300; }
.pub-journal { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--text); margin-top: .5rem; }
.pub-meta { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; margin-top: .8rem; font-size: var(--fs-small); color: var(--muted); }
.pub-meta b { font-weight: 500; color: var(--text); }

/* ---------- Book ---------- */
.book-wrap { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; justify-items: center; }
@media (min-width: 900px) { .book-wrap { grid-template-columns: .8fr 1.2fr; justify-items: start; } }
.book {
  position: relative; aspect-ratio: 5/7; width: 100%; max-width: 330px;
  background: linear-gradient(150deg, #17364F 0%, var(--navy) 55%, #071624 100%);
  color: var(--cream);
  padding: 2.1rem 1.7rem; display: flex; flex-direction: column;
  box-shadow: 0 34px 70px -22px rgba(13,32,54,.6), inset 0 1px 0 rgba(255,255,255,.07);
  transform: perspective(1500px) rotateY(-12deg);
  transition: transform 750ms var(--ease);
  border-left: 3px solid var(--bronze-soft);
  text-align: left;
}
.book:hover { transform: perspective(1500px) rotateY(-5deg) translateY(-6px); }
.book-spine { position: absolute; inset: 0 auto 0 0; width: 15px; background: linear-gradient(90deg, rgba(0,0,0,.35), transparent); }
.book-tag { font-size: .5rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(239,233,222,.62); margin-bottom: auto; }
.book h3 { font-family: var(--font-display); font-size: clamp(1.7rem, 2.6vw, 2.1rem); font-weight: 300; line-height: 1.08; margin-bottom: .6rem; }
.book h3 .serif { display: block; color: var(--bronze-soft); font-size: .8em; margin-top: .2rem; }
.book-rule { width: 42px; height: 1px; background: var(--bronze-soft); margin-bottom: 1rem; }
.book-author { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(239,233,222,.82); }
.book-note { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid rgba(239,233,222,.18); font-size: .55rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(239,233,222,.62); line-height: 1.9; }
.book-disclaimer { margin-top: 1.1rem; font-size: var(--fs-micro); color: var(--muted-light); max-width: 330px; line-height: 1.7; }

/* ---------- Awards ---------- */
.awards-grid { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
@media (min-width: 720px)  { .awards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .awards-grid { grid-template-columns: repeat(3, 1fr); } }
.award {
  background: var(--navy); padding: var(--sp-7) var(--sp-5);
  display: grid; gap: .6rem; align-content: start; justify-items: center; text-align: center;
}
.award-mark {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(239,233,222,.28); border-radius: 50%;
  color: var(--bronze-soft); margin-bottom: .3rem;
  transition: border-color 600ms var(--ease), box-shadow 600ms var(--ease);
}
.award:hover .award-mark { border-color: var(--bronze-soft); box-shadow: 0 0 0 5px rgba(216,183,122,.1); }
.award h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 300; line-height: 1.25; color: var(--cream); }
.award p { font-size: .85rem; color: var(--text-muted); font-weight: 300; }

/* ---------- Timeline ---------- */
.timeline { position: relative; border-top: 1px solid var(--rule); }
.tl-item { display: grid; gap: .4rem 1.75rem; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 820px) { .tl-item { grid-template-columns: 5.5rem 1.3fr 1fr 8rem; align-items: baseline; } }
.tl-year { font-family: var(--font-display); font-size: 1.05rem; font-style: italic; color: var(--accent-text); }
.on-dark .tl-year { color: var(--bronze-soft); }
.tl-name { font-size: 1rem; font-weight: 400; }
.tl-topic { font-size: .9rem; color: var(--text-muted); font-weight: 300; }
.tl-role { font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--muted-light); }
@media (min-width: 820px) { .tl-role { text-align: right; } }
.tl-place { font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light); margin-top: .2rem; }
.tl-progress { position: absolute; left: 0; top: 0; width: 1px; background: var(--accent-text); height: 0; transition: height 120ms linear; }
@media (max-width: 819px) { .tl-progress { display: none; } }

/* ---------- Memberships ---------- */
.memb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.memb {
  background: var(--bg); padding: 1.6rem 1.1rem; display: grid; gap: .4rem;
  align-content: center; justify-items: center; text-align: center; min-height: 122px;
  transition: background-color var(--dur) var(--ease);
}
.memb:hover { background: var(--white); }
.on-dark .memb { background: var(--navy); }
.on-dark .memb:hover { background: var(--navy-600); }
.memb-abbr { font-family: var(--font-display); font-size: 1.3rem; font-weight: 300; color: var(--text); }
.memb-full { font-size: .66rem; color: var(--muted); line-height: 1.55; }

/* ---------- Locations ---------- */
.loc-wrap { display: grid; gap: clamp(2.5rem, 4vw, 4.5rem); }
@media (min-width: 1000px) { .loc-wrap { grid-template-columns: 1fr 1.05fr; gap: clamp(3rem, 5vw, 5rem); align-items: start; } }
.loc-list { border-top: 1px solid var(--rule); }
.loc { position: relative; padding: 1.6rem 0; border-bottom: 1px solid var(--rule); display: grid; gap: .4rem; transition: padding-left var(--dur) var(--ease); }
@media (min-width: 620px) { .loc:hover, .loc.is-active { padding-left: 1.1rem; } }
.loc::before {
  content: ""; position: absolute; left: 0; top: 1.6rem; bottom: 1.6rem; width: 1px;
  background: var(--accent-text); transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur) var(--ease);
}
.loc:hover::before, .loc.is-active::before { transform: scaleY(1); }
.loc-name { font-family: var(--font-display); font-size: 1.45rem; font-weight: 300; }
.loc-area { font-size: .93rem; color: var(--text-muted); font-weight: 300; }
.loc-kind { font-size: var(--fs-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); }
.on-dark .loc-kind { color: var(--bronze-soft); }
.loc-note { font-size: var(--fs-micro); color: var(--muted-light); letter-spacing: .06em; }

/* Location names link out to Google Maps. Inline (not inline-flex) so the name
   still wraps naturally on narrow screens; the pin is a hover/focus affordance
   only, so the name itself reads exactly as before. */
.loc-map { color: inherit; text-decoration: none; cursor: pointer; }
.loc-map .loc-pin {
  margin-left: .35rem;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.loc-map:hover, .loc-map:focus-visible { color: var(--accent-text); }
.on-dark .loc-map:hover, .on-dark .loc-map:focus-visible { color: var(--bronze-soft); }
.loc-map:hover .loc-pin, .loc-map:focus-visible .loc-pin { opacity: .8; }

.map-card { position: relative; background: var(--white); border: 1px solid var(--rule); padding: clamp(1.25rem, 2.5vw, 2rem); overflow: hidden; }
.on-dark .map-card { background: rgba(239,233,222,.05); }
.map-svg { width: 100%; height: auto; }
.map-svg .grid-l { stroke: var(--rule); stroke-width: 1; }
.map-svg .river { fill: none; stroke: rgba(14,116,144,.3); stroke-width: 13; stroke-linecap: round; }
.map-svg .river-in { fill: none; stroke: rgba(14,116,144,.13); stroke-width: 25; stroke-linecap: round; }
.map-svg .pin-ring { fill: none; stroke: var(--accent-text); stroke-width: 1.2; opacity: .45; }
.map-svg .pin { fill: var(--accent-text); transition: fill 300ms var(--ease); }
.map-svg .pin-lbl { font-family: var(--font-body); font-size: 9.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; fill: var(--text); }
.map-svg .pin-sub { font-family: var(--font-body); font-size: 8.5px; letter-spacing: .08em; fill: var(--muted-light); }
.map-svg g.pin-g.is-active .pin { fill: var(--teal); }
.map-svg g.pin-g.is-active .pin-ring { stroke: var(--teal); opacity: 1; }
.map-svg .city-lbl { font-family: var(--font-display); font-size: 15px; font-style: italic; fill: var(--muted-light); }
.map-legend { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--rule); font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light); }

/* ---------- Contact / form ---------- */
.contact-wrap { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); text-align: left; }
@media (min-width: 1000px) { .contact-wrap { grid-template-columns: .85fr 1.15fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; } }

.form { display: grid; gap: 1.2rem; }
.form-row { display: grid; gap: 1.2rem; }
@media (min-width: 620px) { .form-row-2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .5rem; }
.field label { font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.field .req { color: var(--accent-text); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: .85rem .95rem;
  background: var(--white); border: 1px solid var(--rule-strong); border-radius: 0;
  font-size: 1rem; font-weight: 300; appearance: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.on-dark .field input, .on-dark .field select, .on-dark .field textarea {
  background: rgba(239,233,222,.07); border-color: rgba(239,233,222,.26); color: var(--cream);
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2352606D' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem;
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.7; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,116,144,.14); }
.field-hint { font-size: .78rem; color: var(--muted-light); }
.field-error { font-size: .8rem; color: #B4451F; display: none; }
.on-dark .field-error { color: #F0A882; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #B4451F; }
.field.has-error .field-error { display: block; }

.form-summary { display: none; padding: 1.1rem 1.25rem; border: 1px solid #B4451F; background: rgba(180,69,31,.06); font-size: .9rem; }
.form-summary[data-show="true"] { display: block; }
.form-summary h3 { font-size: .9rem; font-weight: 500; margin-bottom: .45rem; }
.form-summary ul { display: grid; gap: .25rem; }
.form-summary a { text-decoration: underline; text-underline-offset: 3px; }
.form-status { display: none; padding: 1.2rem 1.35rem; border: 1px solid var(--teal); background: rgba(14,116,144,.08); font-size: .92rem; }
.form-status[data-show="true"] { display: block; }
.form-disclaimer { font-size: .78rem; color: var(--muted-light); line-height: 1.7; padding-top: 1.1rem; border-top: 1px solid var(--rule); }

.contact-facts { display: grid; margin-top: var(--sp-6); }
.contact-fact { display: grid; gap: .3rem; padding: 1.15rem 0; border-top: 1px solid var(--rule); }
.contact-fact:last-child { border-bottom: 1px solid var(--rule); }
.contact-fact dt { font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--muted-light); font-weight: 500; }
.contact-fact dd { margin: 0; font-family: var(--font-display); font-size: 1.3rem; font-weight: 300; }
.contact-fact a:hover { color: var(--accent-text); }
.on-dark .contact-fact a:hover { color: var(--bronze-soft); }

/* ---------- Placeholder ---------- */
.placeholder-card {
  border: 1px solid var(--rule); padding: clamp(2.5rem, 5vw, 4rem);
  text-align: center; display: grid; gap: 1rem; justify-items: center;
  background: var(--white);
}
.placeholder-card .mk { color: var(--bronze-soft); }
.placeholder-card p { color: var(--text-muted); max-width: 48ch; font-weight: 300; }

/* ---------- Cards ---------- */
.cards { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 720px) { .cards-2 { grid-template-columns: repeat(2, 1fr); } .cards-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--bg); padding: clamp(1.75rem, 3vw, 2.5rem); display: grid; gap: .75rem; align-content: start; transition: background-color var(--dur) var(--ease); }
.card:hover { background: var(--white); }
.on-dark .card { background: var(--navy); }
.on-dark .card:hover { background: var(--navy-600); }
.card h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 300; line-height: 1.2; }
.card p { font-size: .9rem; color: var(--text-muted); font-weight: 300; }
.card-n { font-family: var(--font-display); font-size: 1.05rem; font-style: italic; color: var(--accent-text); }
.on-dark .card-n { color: var(--bronze-soft); }

/* ---------- Page hero (interior) ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy); color: var(--cream);
  padding-top: clamp(8rem, 14vw, 12rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  text-align: center;
}
.page-hero > img.bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(13,32,54,.86), rgba(13,32,54,.72) 50%, rgba(13,32,54,.96));
}
.page-hero h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1.02;
  letter-spacing: .01em; margin-bottom: 1.1rem; color: var(--cream);
}
.page-hero .lead { margin-inline: auto; }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem;
  font-size: var(--fs-micro); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(239,233,222,.62); margin-bottom: var(--sp-5);
}
.crumbs a { display: inline-block; padding-block: 4px; }
.crumbs a:hover { color: var(--bronze-soft); }
.crumbs li { display: flex; align-items: center; gap: .4rem; }
.crumbs [aria-current] { color: rgba(239,233,222,.88); }

/* ---------- Prose ---------- */
.prose { max-width: 70ch; margin-inline: auto; }
.prose h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 300; margin: var(--sp-7) 0 var(--sp-4); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .18em; margin: var(--sp-5) 0 var(--sp-3); }
.prose p, .prose li { color: var(--text-muted); font-weight: 300; }
.prose ul { display: grid; gap: .6rem; margin: 0 0 1.15em; }
.prose ul li { position: relative; padding-left: 1.4rem; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 4px; height: 4px; transform: rotate(45deg); background: var(--accent-text); }
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text); font-weight: 500; }

.callout { border-left: 1px solid var(--accent-text); padding: 1.15rem 1.25rem 1.15rem 1.5rem; background: rgba(201,106,50,.05); text-align: left; }
.callout p { font-size: .9rem; color: var(--text-muted); font-weight: 300; }
.callout strong { color: var(--text); font-weight: 500; }
.on-dark .callout { border-left-color: var(--bronze-soft); background: rgba(216,183,122,.07); }

/* ---------- Dock / mobile bar ---------- */
.dock { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: var(--z-dock); display: none; flex-direction: column; align-items: flex-end; gap: .5rem; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
@media (min-width: 860px) { .dock { display: flex; } }
.dock[data-show="true"] { opacity: 1; transform: none; pointer-events: auto; }
.dock-btn {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 48px; height: 48px; padding: 0; overflow: hidden;
  background: var(--navy); color: var(--cream); border: 1px solid var(--navy);
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  box-shadow: var(--shadow-md);
  transition: width var(--dur) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.dock-btn span { max-width: 0; opacity: 0; white-space: nowrap; transition: max-width var(--dur) var(--ease), opacity var(--dur-fast) var(--ease), margin-left var(--dur) var(--ease); margin-left: 0; }
.dock:hover .dock-btn, .dock:focus-within .dock-btn { width: auto; padding: 0 1.1rem; justify-content: flex-start; }
.dock:hover .dock-btn span, .dock:focus-within .dock-btn span { max-width: 9rem; opacity: 1; margin-left: .6rem; }
.dock-btn svg { flex: none; }
.dock-btn.is-wa:hover { background: #128C7E; border-color: #128C7E; }
.dock-btn.is-call:hover { background: var(--teal); border-color: var(--teal); }
.dock-btn.is-primary { background: var(--bronze-soft); color: var(--navy); border-color: var(--bronze-soft); }

.mobar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dock);
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: rgba(13,32,54,.97);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 860px) { .mobar { display: none; } }
.mobar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  min-height: 62px; padding: .5rem .25rem;
  font-size: .5625rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  color: var(--cream); border-right: 1px solid rgba(239,233,222,.15);
}
.mobar a:last-child { border-right: 0; }
.mobar a.is-primary { background: var(--bronze-soft); color: var(--navy); }
@media (max-width: 859px) { body.has-mobar { padding-bottom: 62px; } }

/* ---------- Footer ---------- */
.ftr { background: var(--navy); color: var(--cream); padding-top: var(--section-y); text-align: center; }
.ftr-crest { display: grid; justify-items: center; gap: .6rem; padding-bottom: var(--sp-7); }


.ftr-brand-role { font-size: var(--fs-micro); letter-spacing: .22em; text-transform: uppercase; color: rgba(239,233,222,.66); line-height: 2; }
.ftr-cols { display: grid; gap: var(--sp-6) var(--sp-5); text-align: left; padding-block: var(--sp-7); border-top: 1px solid var(--rule-invert); }
@media (min-width: 560px) { .ftr-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .ftr-cols { grid-template-columns: repeat(3, 1fr); } }
.ftr-col h3 { font-size: var(--fs-micro); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(239,233,222,.6); margin-bottom: var(--sp-4); }
.ftr-col ul { display: grid; gap: .3rem; }
.ftr-col a { display: inline-block; padding-block: 4px; font-size: .92rem; font-weight: 300; color: rgba(239,233,222,.88); transition: color var(--dur-fast) var(--ease); }
.ftr-col a:hover { color: var(--bronze-soft); }
.ftr-disclaimer { font-size: .78rem; color: rgba(239,233,222,.62); line-height: 1.8; max-width: 80ch; margin-inline: auto; padding-bottom: var(--sp-5); text-align: center; font-weight: 300; }
.ftr-bottom {
  border-top: 1px solid var(--rule-invert); padding: var(--sp-5) 0 var(--sp-6);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: center;
  font-size: .78rem; color: rgba(239,233,222,.62);
}
.ftr-bottom nav { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; justify-content: center; }
.ftr-bottom a { display: inline-block; padding-block: 4px; }
.ftr-bottom a:hover { color: var(--bronze-soft); }

/* ---------- Scroll reveal ---------- */
.js [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1200ms var(--ease-out); }
.js [data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); }
.js [data-reveal="fade"] { transform: none; }

.count { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    animation-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .orbit-spin, .hero-media img { animation: none; }
  .book { transform: none; }
}

@media print {
  .hdr, .dock, .mobar, .menu, .band, .hero-scroll { display: none !important; }
  body { background: #fff; color: #000; }
  .on-dark, .hero, .page-hero, .ftr, .creds { background: #fff !important; color: #000 !important; }
}

/* ---------- Page hero + band inner layout ---------- */
.page-hero-grid { display: grid; gap: .9rem; justify-items: center; max-width: 56rem; margin-inline: auto; }
.page-hero-grid > div { display: contents; }
.page-hero .label { color: var(--bronze-soft); }

.cta-inner { display: grid; gap: var(--sp-5); justify-items: center; max-width: 46rem; margin-inline: auto; }
.cta-inner > div { display: contents; }
.band .btn-row { justify-content: center; }
.band .sec-title { color: var(--cream); }
.band .kicker { color: var(--bronze-soft); }

/* Split columns stay left-aligned even though sections default to centred */
.split { text-align: left; }
.split .kicker, .split .sec-title { text-align: left; }

/* Section headers sitting directly above a left-aligned list keep their alignment */
.sec-head-left { text-align: left; }

/* The credentials rail sits directly under the hero */
.creds .container { padding-inline: 0; }
@media (min-width: 700px) { .creds .container { padding-inline: var(--gutter); } }

/* Inline links inside callouts and definition lists */
.callout a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.on-dark .callout a { color: var(--bronze-soft); }
/* Standalone links in a definition list need the 24px minimum target */
.deflist dd a { display: inline-block; padding-block: 4px; }

/* ---------- Hero on gold: accents, buttons and scroll cue ----------
   Scoped to .hero only — the navy identity is untouched everywhere else. */

/* Ornament sits low on the warm-gold band, so it takes a deep brown-gold. */
.hero .ornament { color: #FFF8E8; }
.hero .ornament::before { background: linear-gradient(90deg, transparent, currentColor); }
.hero .ornament::after  { background: linear-gradient(270deg, transparent, currentColor); }

/* Primary CTA: deep navy on gold, per the brief. Hover warms to champagne. */
.hero .btn-cream {
  --btn-bg: var(--navy-700);
  --btn-fg: #FFFFFF;
  --btn-bd: var(--navy-700);
}
.hero .btn-cream::before { background: #E7D8AE; }
.hero .btn-cream:hover, .hero .btn-cream:focus-visible { color: #17202A; border-color: #E7D8AE; }

/* Secondary CTA: light outline, legible over the blended photograph. */
.hero .btn-light {
  --btn-fg: #FFF8E8;
  --btn-bd: rgba(255, 248, 232, .5);
}
.hero .btn-light::before { background: var(--navy-700); }
.hero .btn-light:hover, .hero .btn-light:focus-visible { color: #FFFFFF; border-color: var(--navy-700); }

.hero .btn:focus-visible { outline-color: var(--navy-700); }

/* Scroll cue sits on the darkening lower band. */
.hero-scroll { color: rgba(255, 248, 232, .78); }
.hero-scroll .line { background: linear-gradient(180deg, currentColor, transparent); }

/* Header over gold: the cream wordmark needs the darker top of the gradient,
   which the gradient already provides. Keep the crest legible on scroll. */
.hdr[data-state="top"] { color: #FFF8E8; }

@media (prefers-reduced-motion: reduce) {
  .hero-media::before, .hero-mote { animation: none; }
}

/* Below ~920px the hero sub-line computes under 24px, so it stops counting as
   "large text" and needs 4.5:1 rather than 3:1. Hold the gradient in the deeper
   gold range there and carry every hero element in light type. Layout, sizes
   and spacing are untouched — this is purely a colour adaptation. */
@media (max-width: 920px) {
  /* Reserve the photo band explicitly, so the gap between the ornament and the
     top of the strip survives short viewports where the type overflows. */
  .hero { padding-top: 6rem; padding-bottom: calc(var(--hero-band) + 34px); }
}
@media (max-width: 920px) {
  .hero {
    background:
      linear-gradient(180deg,
        #4E3B1B 0%,
        #5E4620 16%,
        #6F5428 38%,
        #7E5920 58%,
        #825C1E 72%,
        #6E5226 82%,
        #4F4A3C 89%,
        #2A3C4C 95%,
        var(--navy-700) 100%);
  }
  .hero-media::before {
    background:
      radial-gradient(58% 40% at 50% 30%, rgba(255, 240, 205, .13) 0%, transparent 70%),
      radial-gradient(95% 62% at 50% 100%, rgba(46, 64, 80, .44) 0%, transparent 66%);
  }
  .hero-sub em { color: #FFF1D2; }
  .hero .ornament { color: #FFF8E8; }
  .hero .btn-light { --btn-fg: #FFF8E8; --btn-bd: rgba(255, 248, 232, .5); }
  .hero .btn-light:hover, .hero .btn-light:focus-visible { color: #FFFFFF; border-color: var(--navy-700); }
  .hero-mote { opacity: .5; }
}

/* ---------- Gold plates ----------
   Used where a photograph would otherwise be invented. A warm champagne panel
   with a fine rule and a diamond — quiet, and honest about carrying no image. */
.figure-plate {
  background:
    radial-gradient(80% 60% at 50% 32%, rgba(255,248,232,.85) 0%, transparent 70%),
    linear-gradient(158deg, #F3EBDA 0%, #E7D8AE 46%, #D8C08A 100%);
  display: grid; place-items: center;
  border: 1px solid rgba(160, 120, 40, .18);
}
.on-dark .figure-plate {
  background:
    radial-gradient(80% 60% at 50% 32%, rgba(216,192,138,.14) 0%, transparent 70%),
    linear-gradient(158deg, #16324B 0%, #102A43 52%, #0D2036 100%);
  border-color: rgba(216, 183, 122, .22);
}
.plate-orn { position: relative; width: 92px; height: 92px; display: block; }
.plate-orn::before,
.plate-orn::after { content: ""; position: absolute; inset: 0; }
.plate-orn::before {
  border: 1px solid rgba(140, 104, 34, .30);
  border-radius: 50%;
}
.on-dark .plate-orn::before { border-color: rgba(216, 183, 122, .34); }
.plate-orn::after {
  width: 9px; height: 9px; inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--accent-text);
}
.on-dark .plate-orn::after { background: var(--bronze-soft); }
.figure-plate:hover img { transform: none; }

/* Bands no longer carry a photograph; they carry the gold-into-navy gradient
   that the hero introduces. */
.band {
  background: linear-gradient(168deg, #1A3A52 0%, var(--navy-700) 34%, var(--navy) 78%, #14283C 100%);
}
.band::after {
  background:
    radial-gradient(70% 60% at 50% 18%, rgba(201, 154, 69, .20) 0%, transparent 68%),
    radial-gradient(60% 50% at 84% 92%, rgba(216, 192, 138, .10) 0%, transparent 70%);
}

/* Consultation timings, taken from the practice's own published schedule */
.loc-time {
  font-family: var(--font-display); font-style: italic; font-size: 1.05rem;
  color: var(--accent-text);
}
.on-dark .loc-time { color: var(--bronze-soft); }

/* ---------- Patient reviews ----------
   Real Google reviews, set as editorial pull-quotes rather than a widget. */
.reviews { columns: 1; column-gap: 1px; }
@media (min-width: 720px)  { .reviews { columns: 2; } }
@media (min-width: 1080px) { .reviews { columns: 3; } }
.review {
  break-inside: avoid; margin: 0 0 1px;
  background: var(--white);
  border: 1px solid var(--rule);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  display: grid; gap: .9rem;
}
.on-dark .review { background: var(--navy-600); }
.review-stars { color: var(--accent-text); font-size: .62rem; letter-spacing: .3em; line-height: 1; }
.on-dark .review-stars { color: var(--bronze-soft); }
.review blockquote { margin: 0; }
.review blockquote p {
  font-family: var(--font-display); font-weight: 300;
  font-size: 1.22rem; line-height: 1.5; color: var(--text);
}
.review figcaption { display: grid; gap: .15rem; padding-top: .35rem; border-top: 1px solid var(--rule); }
.review-name { font-size: .8rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.review-src { font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light); }
.review-note {
  margin-top: var(--sp-6); font-size: .8rem; line-height: 1.75;
  color: var(--muted-light); max-width: 74ch; margin-inline: auto; text-align: center;
}

/* ---------- Awards & gallery ---------- */
.gal { display: grid; gap: clamp(1.5rem, 2.6vw, 2.25rem); }
@media (min-width: 640px)  { .gal { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gal { grid-template-columns: repeat(3, 1fr); } }
.gal-item { margin: 0; display: grid; gap: .9rem; }
.gal-media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(80% 60% at 50% 30%, rgba(255,248,232,.85) 0%, transparent 70%),
    linear-gradient(158deg, #F3EBDA 0%, #E7D8AE 46%, #D8C08A 100%);
  border: 1px solid rgba(160, 120, 40, .18);
  transition: transform var(--dur) var(--ease);
}
.gal-media-wide { aspect-ratio: 3 / 2; }
.on-dark .gal-media {
  background:
    radial-gradient(80% 60% at 50% 30%, rgba(216,192,138,.14) 0%, transparent 70%),
    linear-gradient(158deg, #16324B 0%, #102A43 52%, #0D2036 100%);
  border-color: rgba(216, 183, 122, .22);
}
.gal-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.gal-item:hover .gal-media img { transform: scale(1.04); }
.gal-media .plate-orn { width: 74px; height: 74px; }
.gal-item figcaption { display: grid; gap: .3rem; }
.gal-year {
  font-family: var(--font-display); font-style: italic; font-size: 1.05rem;
  color: var(--accent-text); line-height: 1;
}
.on-dark .gal-year { color: var(--bronze-soft); }
.gal-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: 1.3rem; line-height: 1.25; color: var(--text);
}
.gal-meta {
  font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-light); line-height: 1.6;
}
/* On a narrow screen the type stack ends well above the fold, leaving a clear
   band beneath it. He goes there — a full-bleed strip below the ornament rather
   than a wash behind the buttons — so head, mic and podium all read, and no
   photograph ever sits under text. 46vw holds the source framing constant as the
   viewport widens; the mask is a plain vertical dissolve, which leaves no seam. */
@media (max-width: 920px) {
  .hero-photo {
    left: 0; width: 100%;
    height: var(--hero-band);
    object-position: 50% 100%;
    opacity: .95;
    filter: contrast(1.06) brightness(.74);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 22%, #000 52%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 22%, #000 52%, #000 100%);
  }
}

/* Phones: the band is too short to show him at 1:1, so zoom the strip and centre
   it. Capped in px so the crop never tightens past his head at 600px. */
@media (max-width: 600px) {
  .hero-photo { width: min(136%, 530px); left: 50%; transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .hero-photo { filter: sepia(.42) saturate(1.18) brightness(.86); } }

/* Google-style review stars. The rating is also exposed as text on the
   container's aria-label, so the icons reinforce rather than carry it. */
.review-stars { display: inline-flex; gap: 2px; align-items: center; line-height: 1; letter-spacing: normal; }
.review-stars svg { width: 15px; height: 15px; flex: none; fill: #F4B400; }
.on-dark .review-stars svg { fill: #FBBC04; }

/* ---------- Video gallery ----------
   Facade cards: a thumbnail button that becomes the player on click. The card
   keeps the site's plate language (fine gold rule, no rounded corners) rather
   than importing YouTube's chrome. */
.vids { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 680px)  { .vids { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .vids { grid-template-columns: repeat(3, 1fr); } }
.vid { display: grid; gap: .85rem; align-content: start; }
.vid-btn {
  position: relative; display: block; width: 100%; padding: 0;
  aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--rule); background: var(--ivory-deep);
  cursor: pointer;
}
.vid-thumb {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease), filter var(--dur) var(--ease);
}
.vid-btn:hover .vid-thumb, .vid-btn:focus-visible .vid-thumb { transform: scale(1.04); }
.vid-ico {
  position: absolute; inset: 0; margin: auto;
  width: 62px; height: 62px; display: grid; place-items: center;
  background: rgba(13, 32, 54, .82); color: var(--cream);
  border: 1px solid rgba(239, 233, 222, .3);
  border-radius: 50%;
  padding-left: 4px;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.vid-btn:hover .vid-ico, .vid-btn:focus-visible .vid-ico { background: var(--navy); transform: scale(1.06); }
.vid-title { font-family: var(--font-display); font-weight: 300; font-size: 1.22rem; line-height: 1.3; color: var(--text); }
.vid-meta { font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light); }
.on-dark .vid-title { color: var(--cream); }
.on-dark .vid-meta { color: rgba(239, 233, 222, .66); }
.vid-frame { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--rule); display: block; }
.vid-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Section headings that route to a detail page. They must still read as
   headings, so the link inherits everything and only picks up an underline on
   hover/focus. The figure beside them is a link too, which needs display:block
   because an <a> is inline by default and would collapse the aspect box. */
/* The whole heading is the link, so it is not an "inline in a sentence"
   exception - it has to clear 24px on its own. Inline padding grows the hit
   area and the focus ring without affecting the line box, so nothing moves. */
.sec-link { color: inherit; text-decoration: none; padding-block: .35rem; }
.sec-link:hover, .sec-link:focus-visible {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: .12em;
  text-decoration-thickness: 1px;
}
.on-dark .sec-link:hover, .on-dark .sec-link:focus-visible { color: var(--bronze-soft); }
a.figure { display: block; }

/* Clinic phone number, directly under the locality so it reads as part of the
   address block. Same affordance as the map link above it. */
.loc-tel { font-size: 1rem; font-weight: 300; }
.loc-tel a { color: var(--accent-text); text-decoration: none; padding-block: 3px; display: inline-block; }
.loc-tel a:hover, .loc-tel a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.on-dark .loc-tel a { color: var(--bronze-soft); }

/* ---------- Contact: location picker ----------
   Replaces the enquiry form. The select is the only control; the panel below it
   is the answer, so it sits directly under and shares the field's width. */
.picker { display: grid; gap: var(--sp-5); max-width: 34rem; }
.picker-field { display: grid; gap: .5rem; }
.field-hint { font-size: var(--fs-micro); letter-spacing: .06em; color: var(--muted-light); line-height: 1.6; }
.picker-out {
  display: grid; gap: .45rem;
  padding: 1.6rem 1.7rem;
  background: var(--ivory-deep);
  border-left: 2px solid var(--accent-text);
}
.picker-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 300; color: var(--text); }
.picker-area { font-size: .93rem; color: var(--text-muted); font-weight: 300; }
.picker-tel { font-family: var(--font-display); font-size: 1.9rem; font-weight: 300; line-height: 1.1; margin-top: .3rem; }
.picker-tel a { color: var(--accent-text); text-decoration: none; }
.picker-tel a:hover, .picker-tel a:focus-visible { text-decoration: underline; text-underline-offset: .12em; }
.picker-time { font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light); line-height: 1.7; }
.picker-map { margin-top: .5rem; }

/* ---------- Brand logo ----------
   The supplied artwork is pale gold on a solid white ground, which would show
   as a white block on the navy footer and on the gold hero. It is applied as a
   mask instead: the PNG supplies the shape, background-color supplies the ink.
   One asset, and the colour can change per state from tokens. */
.crest-logo {
  display: block;
  width: 108px;
  aspect-ratio: 308 / 124;
  background-color: var(--bronze-soft);
  -webkit-mask: url("/assets/img/logo-mask.png") center / contain no-repeat;
          mask: url("/assets/img/logo-mask.png") center / contain no-repeat;
  transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
@media (min-width: 768px) { .crest-logo { width: 140px; } }

/* Over the hero the header is transparent and the ground is mid-gold, so
   bronze-on-gold would disappear. The mark lifts to champagne there and
   returns to bronze once the bar goes navy. */
.hdr[data-state="top"] .crest-logo { background-color: #F0D9A8; }
@media (min-width: 768px) { .hdr[data-state="solid"] .crest-logo { width: 118px; } }

.crest-logo-lg { width: 232px; }
@media (min-width: 768px) { .crest-logo-lg { width: 248px; } }

/* Without mask support the element would be a solid rectangle. Fall back to
   the same PNG as a background image — it is white-on-transparent, so it still
   reads on both the navy footer and the gold hero. */
@supports not ((-webkit-mask-image: url("#m")) or (mask-image: url("#m"))) {
  .crest-logo {
    background: url("/assets/img/logo-mask.png") center / contain no-repeat;
  }
}

/* The abbr slot is sized for three-letter initialisms. This fellowship has no
   documented post-nominal, so its full name sits there instead and needs a
   smaller display size — at 1.3rem it wraps to three lines and stretches the
   whole grid row it sits in. */
.memb-long .memb-abbr { font-size: 1.05rem; line-height: 1.3; }

/* ---------- Hero slideshow ----------
   The hero can carry more than one photograph. Frames are stacked in the same
   place and cross-faded, each keeping the luminosity blend and the radial mask,
   so a change of frame reads as the gold shifting rather than as a picture being
   swapped out. With a single frame, or with JavaScript off, none of this applies
   and the hero behaves exactly as it did before. */
.hero-photo { transition: opacity 800ms var(--ease); }
/* Before the script runs — and if it never does — only the first frame shows. */
.hero-media .hero-photo:nth-child(n + 2) { opacity: 0; }
.hero-media.is-rotating .hero-photo { opacity: 0; }
.hero-media.is-rotating .hero-photo.is-active { opacity: 1; }

/* Controls for the hero slideshow: a stop control, because content that
   advances on its own has to be stoppable (WCAG 2.2.2), and one control per
   frame so a visitor can choose a photograph rather than wait for it. The
   script adds them only when the hero is actually rotating — never when it
   holds one frame or motion is reduced. Deliberately quiet: bottom left, clear
   of the centred scroll cue and the floating dock. */
.hero-nav {
  position: absolute;
  left: var(--gutter); bottom: 1.75rem;
  z-index: 2;
  display: flex; align-items: center; gap: .5rem;
}
/* Below 921px the foot of the hero is the photograph band, and on phones the
   fixed action bar sits over it — so the controls lift above the band. */
@media (max-width: 920px) {
  .hero-nav { bottom: calc(var(--hero-band) + .9rem); }
}

.hero-rotate-btn {
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid rgba(255,244,215,.75);
  border-radius: 50%;
  background: rgba(40,30,10,.42);
  color: rgba(255,246,228,.92);
  cursor: pointer;
  opacity: .78;
  transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hero-rotate-btn:hover,
.hero-rotate-btn:focus-visible { opacity: 1; border-color: rgba(255,244,215,.92); }
.hero-rotate-btn svg { display: block; }
.hero-rotate-btn .ico-play { display: none; }
.hero-rotate-btn.is-paused .ico-pause { display: none; }
.hero-rotate-btn.is-paused .ico-play { display: block; }

/* The dot is 7px but the button around it is 26px, so the target clears the
   24px minimum (WCAG 2.2 AA) without a large disc sitting over the gold. */
.hero-dots { display: flex; align-items: center; }
.hero-dot {
  width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center;
  border: 0; background: none; cursor: pointer;
}
.hero-dot::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,246,228,.64);
  box-shadow: 0 0 0 1px rgba(40,30,10,.5);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hero-dot:hover::before,
.hero-dot:focus-visible::before { background: rgba(255,246,228,.8); }
.hero-dot.is-on::before { background: rgba(255,246,228,.97); transform: scale(1.18); }

/* Organisation names run to one, two or three lines, and `align-content: center`
   parked each pair at its own height as a result — GSI and FDI sat 8px below
   their row neighbours, AIAARO and AMOCE 8px above. Subgrid gives the whole grid
   two shared row tracks, so every abbreviation sits on one line and every name
   begins on another, whatever its length. align-self rather than flex, so the
   names keep wrapping exactly as they did. */
@supports (grid-template-rows: subgrid) {
  .memb { grid-row: span 2; grid-template-rows: subgrid; align-content: stretch; }
  .memb-abbr { align-self: end; }
  .memb-full { align-self: start; }
}

/* A certificate has to be readable, not cropped. `cover` in a 4:3 tile reduces
   a portrait scan to a horizontal strip of its middle and trims the borders off
   landscape ones, so documents sit whole on the tile's own ground with a little
   air around them. */
.gal-media-doc img {
  /* An img is a replaced element, so width/height:auto take its intrinsic
     size and the insets are ignored rather than constraining it - the portrait
     scan escaped its tile at 461px in a 273px box. Auto margins against zero
     insets centre it instead, and the max bounds cap both axes against a
     containing block the tile aspect-ratio already makes definite. Nothing
     here touches transform, so the hover scale still applies. */
  position: absolute; inset: 0; margin: auto;
  width: auto; height: auto;
  max-width: 88%; max-height: 88%;
}

/* Frames two and three are different compositions from the first — he stands
   left and high at the lectern, the London presentation is three figures
   centred — so the first frame's bottom-left mask would dissolve exactly the
   faces that matter. Each gets its own framing and its own dissolve.

   Two mask layers, intersected. The radial handles the sides: Rx is far smaller
   than Ry, so the panel's right edge fades out before it reaches the centred
   headline while the left edge runs off screen and never needs to. The radial
   alone leaves the top edge ~76% opaque, which reads as a horizontal seam across
   the gold, so the linear layer dissolves the top fifth — which also disposes of
   the conference backdrop lettering in the London frame. */
@media (min-width: 921px) {
  .hero-photo-lectern,
  .hero-photo-london {
    filter: contrast(1.04) brightness(.66);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
  .hero-photo-lectern {
    object-position: 0% 0%;
    /* Shorter than the full-bleed first frame, so he sits below the headline
       instead of meeting it. */
    height: 64%;
    /* The base rule pushes the panel 64px off-screen left, which suits the first
       photograph because he stands right of centre. Here he stands at the left
       edge and it clipped him, so this frame shifts far less - enough to keep
       him whole while still holding him clear of the primary button. */
    transform: translateX(-20px);
    -webkit-mask-image:
      radial-gradient(62% 150% at 34% 106%, #000 0%, #000 60%, rgba(0,0,0,.5) 82%, transparent 98%),
      linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 9%, #000 20%, #000 100%);
            mask-image:
      radial-gradient(62% 150% at 34% 106%, #000 0%, #000 60%, rgba(0,0,0,.5) 82%, transparent 98%),
      linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 9%, #000 20%, #000 100%);
  }
  .hero-photo-london {
    object-position: 34% 0%;
    /* A shorter panel than the other frames. Three standing figures in a wide
       shot put their heads high; at the full 82% they met the headline. Dropping
       the height scales the frame down and moves them clear, and it keeps the
       backdrop lettering inside the top fade rather than fighting the type. */
    height: 64%;
    -webkit-mask-image:
      radial-gradient(58% 150% at 42% 106%, #000 0%, #000 62%, rgba(0,0,0,.5) 83%, transparent 98%),
      linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 8%, #000 18%, #000 100%);
            mask-image:
      radial-gradient(58% 150% at 42% 106%, #000 0%, #000 62%, rgba(0,0,0,.5) 83%, transparent 98%),
      linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 8%, #000 18%, #000 100%);
  }
}
/* On the narrow-screen band the frame is cropped to its lower part, and bottom-
   aligning either of these would cut heads off — so both sit nearer the top. */
@media (max-width: 920px) {
  .hero-photo-lectern { object-position: 20% 18%; }
  .hero-photo-london  { object-position: 40% 62%; }
}

/* Hero only: drop the flanking rules and the diamond markers so the two
   qualification lines stand on their own and centre cleanly. The flex container
   already centres, and the pseudo-elements were what pushed the first line
   off-centre relative to the second. The footer keeps its full ornament. */
.hero .ornament::before,
.hero .ornament::after { content: none; }
.hero .ornament .dia { display: none; }