/* Playfair Display ships 400 to 900, so headings carry real weight again.
   These weights were restored on 28 Aug when the face went back to the
   Base44 prototype's Playfair. Do not pin them to 400: that was a
   Marcellus-only workaround, because Marcellus has one weight and anything
   heavier came out as smeared synthetic bold. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* ================================================================
   PROFESSOR DAEVYD RODDA - Hip & Knee Replacement Surgeon
   Design system. Forked from an earlier Sunshine Coast Orthopaedic
   Group build and re-skinned to Rodda's own brand by
   build_reskin.py and build_reskin_dark.py: tokens sampled from the
   Base44 prototype, dark throughout.
   Typography: Playfair Display + Inter
   Palette: navy #0D1520, brass gold #B29063, steel blue #4A7FA5,
   all three sampled from the Base44 prototype and restored on
   2026-09-04 at Daevyd's request, reversing the 27 Aug move to the
   SCOG brand pack. See the :root block for the AA rules on steel.
   ================================================================ */


/* ----------------------------------------------------------------
   0. CUSTOM PROPERTIES
   ---------------------------------------------------------------- */

:root {
  /* --- Grounds. MEASURED from the live prototype 2026-09-04 with
         getComputedStyle, not read off our own audit document. The audit was
         wrong about which colour was the accent and it cost a round of review.
         Their own Tailwind token names are in brackets so a future crawl is
         checkable against this. --- */
  --navy:        #111820;   /* page ground            (their bg-bone)       */
  --navy-mid:    #0D1520;   /* alternating band       (their bg-alt)        */
  --navy-soft:   #0D1B2A;   /* cards                  (their card)         */
  --navy-deep:   #0B1119;   /* header, footer, deepest ground               */
  --hairline:    #1D2935;   /* borders and rules      (their border-divider)*/
  --card-edge:   #1E2A36;   /* the 1px edge on their raised cards           */

  /* --- Type colours. All AA on every ground above. --- */
  --on-navy:     #F2F2F2;   /* body text, their value           16.4:1      */
  --on-navy-mut: #8A9BB0;   /* secondary text                    6.2:1      */
  --heading:     #FFFFFF;   /* headings                         17.4:1      */

  /* --- PRIMARY ACCENT: steel blue. This is the correction of 2026-09-04.
         The prototype puts steel on its h2 headings, on every solid button
         and on its small uppercase sub-labels. Gold is NOT its accent.

         --steel measures 4.03:1 on --navy. That clears AA for large text
         (3:1) and it is a fill behind white text on buttons, both of which
         are exactly how they use it. It does NOT clear AA for body-sized
         text, so anything small and steel uses --steel-strong instead. That
         is the one place this build deliberately does not match them: their
         site is read by people in their seventies. --- */
  --steel:       #4A7FA5;   /* h2, button fills, large numerals             */
  --steel-strong:#6C9DC0;   /* small steel TEXT                  5.6:1      */
  --steel-light: #7FB2D6;   /* hover and emphasis                7.9:1      */
  --steel-deep:  #35617F;   /* pressed states and deep fills                */
  --steel-glow:  rgba(74, 127, 165, 0.10);  /* hover wash, never text       */

  /* --- Gold. Narrow role, matching theirs: the small uppercase eyebrow
         labels, hairline rules and the footer fund links. NOT headings,
         NOT buttons. --- */
  --gold:        #B29063;   /* eyebrow labels. SCOG brand pack   6.8:1      */
  --gold-bright: #CDAE84;   /* hover and emphasis                8.9:1      */
  --gold-deep:   #8E7149;   /* fills and rules only, NOT text               */
  --gold-muted:  rgba(178, 144, 99, 0.16);

  /* --- Brass alias, kept so existing rules keep working. --- */
  --brass:       #B29063;   /* alias of --gold                              */
  --brass-mut:   rgba(178, 144, 99, 0.16);
  --gold-rule:   rgba(178, 144, 99, 0.15);  /* hairlines on accent edges */
  --gold-underline: rgba(178, 144, 99, 0.45);  /* link underlines        */

  /* --- NOT ADOPTED: the prototype's muted slate #4A5A6A. It measures
         2.4:1 on this ground and is the single token behind 19 of the
         WCAG AA failures the 7 Aug audit found. Use --on-navy-mut. --- */

  /* --- Legacy light-ground token names, remapped to dark surfaces so the
         forked components keep working without being rewritten. --- */
  --cream:       #F2F2F2;   /* light text on a dark ground (41 uses)       */
  --warm-white:  #E8EBEF;   /* brighter light text                          */
  --surface-1:   #111820;   /* what used to be a warm-white background       */
  --surface-2:   #0D1520;   /* what used to be a cream background            */
  --ink:         #FFFFFF;
  --ink-muted:   #F2F2F2;
  --ink-soft:    #8A9BB0;
  --success:     #4FB286;

  /* --- Typography --- */
  --heading-font: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-heading: var(--heading-font);
  --ff-body:    var(--body);

  /* --- Fluid type scale. Floor held at 14px for a 55-75 audience. --- */
  --step--1: clamp(0.9rem, 0.86rem + 0.18vw, 1rem);
  --step-0:  clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
  --step-1:  clamp(1.2rem, 1.11rem + 0.45vw, 1.4rem);
  --step-2:  clamp(1.4rem, 1.25rem + 0.72vw, 1.75rem);
  --step-3:  clamp(1.65rem, 1.43rem + 1.1vw, 2.2rem);
  --step-4:  clamp(2.05rem, 1.69rem + 1.8vw, 2.9rem);
  --step-5:  clamp(2.45rem, 1.93rem + 2.6vw, 3.8rem);
  --step-6:  clamp(2.85rem, 2.05rem + 4vw, 5rem);

  /* --- Spacing --- */
  --space-1:  0.25rem;  --space-2:  0.5rem;   --space-3:  0.75rem;
  --space-4:  1rem;     --space-5:  1.5rem;   --space-6:  2rem;
  --space-7:  3rem;     --space-8:  4rem;     --space-9:  6rem;
  --space-10: 8rem;

  /* --- Layout --- */
  --max-w:        1280px;
  --max-w-wide:   1440px;
  --max-w-narrow: 880px;
  --measure:      68ch;

  /* --- Motion --- */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur:      320ms;
  --dur-slow: 600ms;
  --dur-fast: 180ms;

  /* --- Shadows. On a dark ground these read as depth, not drop shadow. --- */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md:  0 4px 14px rgba(0, 0, 0, 0.40);
  --shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-xl:  0 20px 60px rgba(0, 0, 0, 0.55);
  --shadow-gold: 0 8px 30px rgba(74, 127, 165, 0.22);

  /* --- Square corners, as the prototype sets --radius: 0. --- */
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
  --radius-xl: 0; --radius-pill: 0;
}


/* ----------------------------------------------------------------
   1. MODERN CSS RESET
   ---------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  hanging-punctuation: first last;
}

body {
  min-height: 100dvh;
  font-family: var(--body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--surface-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  text-wrap: balance;
}

p {
  overflow-wrap: break-word;
  text-wrap: pretty;
  max-width: var(--measure);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Selection colour */
::selection {
  background-color: var(--gold);
  color: var(--heading);
}

::-moz-selection {
  background-color: var(--gold);
  color: var(--heading);
}


/* ----------------------------------------------------------------
   2. FOCUS STYLES (Accessibility)
   ---------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}


/* ----------------------------------------------------------------
   3. TYPOGRAPHY
   ---------------------------------------------------------------- */

h1, h2, h3, h4, h5 {
  font-family: var(--heading-font);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

h1 {
  font-size: var(--step-6);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--step-4);
  line-height: 1.15;
}

h3 {
  font-size: var(--step-3);
  line-height: 1.2;
}

h4 {
  font-size: var(--step-2);
  line-height: 1.25;
}

h5 {
  font-size: var(--step-1);
  line-height: 1.3;
}

.lead {
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: 60ch;
}

small,
.text-sm {
  font-size: var(--step--1);
}

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

/* Body links */
.prose a {
  color: var(--gold-deep);
  text-decoration: underline;
  text-decoration-color: rgba(178, 144, 99, 0.35);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}

.prose a:hover {
  text-decoration-color: var(--gold);
}

/* Lists in prose */
.prose ul,
.prose ol {
  padding-left: 1.5rem;
  margin-block: 1rem;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li {
  margin-block-end: 0.4rem;
  line-height: 1.7;
}

.prose li::marker {
  color: var(--gold);
}


/* ----------------------------------------------------------------
   4. LAYOUT — CONTAINER
   ---------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.container--wide {
  max-width: var(--max-w-wide);
}

.container--narrow {
  max-width: var(--max-w-narrow);
}


/* ----------------------------------------------------------------
   5. HEADER & NAVIGATION
   ---------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(13, 27, 42, 0.88);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(178, 144, 99, 0.2);
  transition: background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.site-header.scrolled {
  background: rgba(13, 27, 42, 0.96);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Corrected 2026-09-04 (round three). Two things put 359px of dead air between
   the wordmark and the nav at a 1600px viewport:

     - max-width was 1580px, 300px wider than the 1280px content column, so
       every pixel above 1280 became gap. The reason given for that (six nav
       items plus search, phone and CTA do not fit at 1280) stopped being true
       when the nav dropped to four items on 3 Sep.
     - .header__logo carried margin-right: auto, which absorbs ALL remaining
       free space before justify-content ever runs, so space-between was inert.

   Now the row is the same width as the content below it, and space-between
   does the distributing. */
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 76px;
  /* Was clamp(0.5rem, 1.5vw, 1rem), 16px at desktop, against .container's
     48px. That put the header row 32px wider on each side than every content
     block below it, so the logo hung left of the page's own margin and the CTA
     hung right of it. Matched to .container. */
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  max-width: var(--max-w);
}

/* Logo */
.header__logo-scog {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  z-index: 1010;
  /* 1.25rem -> 0.5rem on 2026-09-11. Reclaiming header width so the SCOG mark
     can grow without pushing REQUEST APPOINTMENT off the right edge. */
  margin-right: 0.5rem;
  margin-left: -0.25rem;
  border: none;
  opacity: 0.85;
  transition: opacity var(--dur-fast) var(--ease);
}

.header__logo-scog:hover {
  opacity: 1;
}

/* 41px, the asset's declared and intrinsic height, and what the prototype
   renders. It was 64px, upscaling a 131x41 image by 56%: soft, and so much
   wider than the 117px wordmark beside it that Max read the WORDMARK as too
   small. The wordmark was fine; the logo was overpowering it. Theirs is
   131x41 against a 133px wordmark. */
/* 🚨 SCOG mark size is limited by ONE thing: REQUEST APPOINTMENT must stay on
   screen. The header is a single row and width is the scarce resource, so every
   pixel the mark grows pushes the booking button right.

   Measured on the deployed site 2026-09-11, after reclaiming the two margins
   above, the largest height at which the button still fits:

     1241px viewport -> 48px      1300px -> 64px
     1280px viewport -> 56px      1440px -> 88px

   Hence the ladder below. It is deliberately one step under each measured
   ceiling so there is margin for a longer nav label or a wider button later.

   ⚠️ Before raising ANY of these, re-measure `.nav__cta`'s right edge against
   innerWidth at 1241, 1280, 1300 and 1440. Do not raise them by eye. On
   2026-09-10 the mark was taken to a flat 56px and that put the booking button
   OFF SCREEN on every viewport from 1241 to about 1300, including 1280, which
   is one of the most common laptop widths. It shipped and was live for a day.

   The asset is 363x112, so 80px is still a clean downscale. Above 112px it
   upscales and goes soft, which is why it was cut to 41px back in September.

   HOW to re-measure: emulate the viewport and read the live geometry, e.g. in
   the browser pane, `resize_window` to each width then
       const r = document.querySelector('.nav__cta').getBoundingClientRect();
       ({w: innerWidth, right: r.right, fits: r.right <= innerWidth,
         sideways: document.documentElement.scrollWidth > innerWidth + 1})
   A headless `--dump-dom` run cannot do this: there is no result channel, and
   --evaluate-on-new-document is a DevTools protocol method, not a CLI flag.

   Last measured 2026-09-15, after the journey re-sync:
       1241 -> 1231   1280 -> 1231   1300 -> 1285   1440 -> 1407 (logo 80px)
   All fit, no sideways scroll at any width including 375. */
/* 🚨 LADDER REMOVED 2026-09-17. It was measured against the wrong thing.
   The old test was `cta.right <= innerWidth`: does REQUEST APPOINTMENT stay on
   SCREEN. It did. But at 64px and 80px the header row was wider than the
   page's own content column, so the button's right edge finished 103px to the
   right of every heading, paragraph and card below it at 1440. Nothing was
   clipped, and the whole header still read as crooked, which is what Max
   reported: "it's not centred properly".

   The row is pinned by `justify-content: space-between`, so as long as it FITS
   the column the CTA lands exactly on the column's right edge. Fits == aligned.

   Measured 2026-09-17, logo at 48px, row needs 1179px:
       viewport   column   slack   CTA right   column right
       1300       1184     +5      1235        1235   aligned
       1366       1184     +5      1268        1268   aligned
       1440       1184     +5      1305        1305   aligned
   At 48px the row exactly fits; at 52px it overflows again. There is no
   headroom, which is why there is no ladder any more.

   ⚠️ The new test is BOTH of these, not just the second:
       cta.right <= (container right - container padding-right)   aligned
       cta.right <= innerWidth                                    on screen
   Below 1300 the column is narrower than the row and the first test cannot
   pass without cutting something real from the nav; the second still holds at
   every width, so the booking button is never off screen. See the note on
   .nav__list below for the width that was reclaimed. */
/* Max, 17 Sep evening: "the SCOG logo is small again". Ladder re-measured
   as `.nav__cta` right-edge slack with the logo at each height (About, 900
   tall). Never raise these by eye: the flat 56px in September pushed Request
   Appointment off screen at 1280.
       width   48   56   64   72   80
       1241    63   59   33    7  scroll
       1280    63   63   63   46   20
       1366    99   99   99   96   70
       1600   216  216  216  213  187
   Rule: keep at least 24px of slack. 56 everywhere it fits, 64 from 1280,
   80 from 1366. The 901-1200 burger row has room, so 56 there too. */
.header__logo-scog img {
  height: 56px;
  width: auto;
}
@media (min-width: 1280px) { .header__logo-scog img { height: 64px; } }
@media (min-width: 1366px) { .header__logo-scog img { height: 80px; } }

.header__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  z-index: 1010;
}

.header__logo img {
  height: 42px;
  width: auto;
}

/* Jessica Mayho, 27 Aug call, comparing this against his SCOG wordmark: "I
   like how sharp the ... Daevyd Rodda part is, rather than the thickness of
   this ... it loses that edge to it." Playfair at 600 thickens the stems and
   flattens the thick/thin contrast that gives the name its edge. Dropped to
   400 and opened the tracking slightly, which is what reads as "sharp" at
   this size, with the descriptor set underneath as Max proposed on the call. */
/* The wordmark, matched to the prototype 2026-09-04. Theirs stacks a small
   letterspaced "PROFESSOR" above "Daevyd Rodda" in Playfair at 18px. Ours put
   the full name on one line with a gold "HIP & KNEE REPLACEMENT" strapline
   under it, which the prototype does not have and which was part of why the
   header read as ours rather than theirs. */
.header__logo-text {
  font-family: var(--heading-font);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--heading);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.header__logo-pre {
  display: block;
  font-family: var(--body);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--on-navy-mut);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 4px;
}

/* Desktop nav */
/* Two groups, not seven items.

   Corrected 2026-09-04. Max: "the navigation bar at the top ... looks a bit
   jumbled." Measured at 1440px: EVERY gap in the bar was 4px, so four word
   links, a 42px bordered search icon, a phone number and a 255px filled button
   sat in one undifferentiated run with no hierarchy.

   Now the four page links share a comfortable gap, and the search / phone /
   CTA cluster is pushed off by a larger break, which is how the prototype
   reads. */
/* 0.6rem -> 0.45rem and .nav__link padding 0.9rem -> 0.7rem on 2026-09-17,
   together with .header__inner's gap. This buys back about 68px of row width,
   which is what pulls the 1241px and 1280px viewports back inside the content
   column. Labels still clear each other by ~19px at 13px uppercase. Do not
   claw this back for looks without re-running the two-part test above. */
.nav__list {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* The break between the page links and the utilities. */
.nav__item--utility-start {
  /* Was clamp(1rem, 2.5vw, 2.25rem), i.e. 36px at desktop. Tightened 2026-09-11
     for the same reason as .header__logo-scog's margin: header width is the
     scarce resource and the booking button must never leave the viewport. */
  margin-left: clamp(0.5rem, 1.2vw, 0.75rem);
}

.nav__link {
  display: block;
  padding: 0.5rem 0.7rem;
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  color: rgba(242, 242, 242, 0.82);
  letter-spacing: 0.08em;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
  white-space: nowrap;
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--cream);
  background: rgba(248, 246, 241, 0.06);
}

.nav__link--active {
  color: var(--gold);
}

.nav__cta {
  margin-left: 0.75rem;
}

/* Dropdown */
.nav__item--dropdown {
  position: relative;
}

.nav__dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: var(--navy);
  border: 1px solid var(--gold-rule);
  border-radius: var(--radius-md);
  padding: 0.5rem;
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  translate: 0 -8px;
  transition: opacity var(--dur-fast) var(--ease),
              translate var(--dur-fast) var(--ease),
              visibility var(--dur-fast);
}

.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

.nav__dropdown a {
  display: block;
  padding: 0.6rem 1rem;
  font-size: 0.88rem;
  color: rgba(248, 246, 241, 0.75);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}

.nav__dropdown a:hover {
  color: var(--gold);
  background: var(--steel-glow);
}

/* Wide dropdown (two-column for 6+ items) */
.nav__dropdown--wide {
  min-width: 420px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

/* Mega dropdown (three-column, categorised) */
.nav__dropdown--mega {
  min-width: 580px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 0.35rem;
  padding: 0.75rem 0.5rem;
}

.nav__dropdown-col {
  display: flex;
  flex-direction: column;
}

.nav__dropdown-heading {
  display: block;
  padding: 0.45rem 1rem 0.3rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  opacity: 0.7;
  pointer-events: none;
}

.nav__dropdown--mega a {
  padding: 0.45rem 1rem;
  font-size: 0.875rem;
}

/* Two photographs side by side beneath a feature row. Added 2026-09-09 for the
   Maroochy Private section, which Daevyd rewrote and Jessica supplied theatre
   and patient-room frames for. Stacks below 900px, where two 46vw images would
   each be about 170px wide and show nothing. */
.feature-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (max-width: 900px) {
  .feature-pair { grid-template-columns: 1fr; }
}

.feature-pair__item {
  margin: 0;
}

.feature-pair__item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

.feature-pair__item figcaption {
  margin-top: 0.7rem;
  font-size: var(--step--1);
  color: var(--on-navy-mut);
}

/* Right-aligned dropdown (last nav item — prevents overflow) */
.nav__dropdown--right {
  left: auto;
  right: 0;
  transform: none;
}

/* CTA button dropdown: show on parent hover */
.nav__item--dropdown.nav__cta .btn {
  pointer-events: auto;
}
.nav__item--dropdown.nav__cta:hover .nav__dropdown,
.nav__item--dropdown.nav__cta:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

/* --- Mobile hamburger (checkbox hack) --- */
.nav__toggle {
  display: none;
}

.nav__toggle-label {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  z-index: 1010;
  position: relative;
}

.nav__toggle-label .bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--surface-2);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease),
              opacity var(--dur-fast) var(--ease);
}

.nav__toggle-label .bar + .bar {
  margin-top: 6px;
}

/* Hamburger to X animation */
.nav__toggle:checked ~ .nav__toggle-label .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav__toggle:checked ~ .nav__toggle-label .bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav__toggle:checked ~ .nav__toggle-label .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile nav panel */
@media (max-width: 1200px) {
  .header__logo {
    min-width: 0;
    overflow: hidden;
  }
  .header__logo-text {
    font-size: clamp(0.75rem, 3vw, 0.95rem);
    white-space: nowrap;
  }
  .header__logo-pre {
    font-size: clamp(0.55rem, 2.2vw, 0.66rem);
  }
  .header__logo-scog {
    margin-right: clamp(0.5rem, 2vw, 1.5rem);
  }
  /* Between 900 and 1200 the nav is a burger, so the row is only mark +
     wordmark + search + toggle. 48px keeps the mark meaningfully larger than
     the 41px it was everywhere before, without crowding that row. */
  .header__logo-scog img {
    height: 56px;
  }

  .nav__toggle-label {
    display: flex;
  }

  .nav__list {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    background: var(--navy);
    padding: 4.5rem 1.5rem 3rem;
    padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: opacity var(--dur-slow) var(--ease),
                transform var(--dur-slow) var(--ease-out),
                visibility var(--dur-slow);
    z-index: 1005;
  }

  .nav__toggle:checked ~ nav .nav__list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav__link {
    font-size: var(--step-1);
    padding: 0.65rem 0.75rem;
    opacity: 0;
    transform: translateY(12px);
    border-bottom: 1px solid rgba(178, 144, 99, 0.1);
  }

  .nav__toggle:checked ~ nav .nav__list .nav__link {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger */
  .nav__toggle:checked ~ nav .nav__list .nav__item:nth-child(1) .nav__link { transition-delay: 0.05s; }
  .nav__toggle:checked ~ nav .nav__list .nav__item:nth-child(2) .nav__link { transition-delay: 0.08s; }
  .nav__toggle:checked ~ nav .nav__list .nav__item:nth-child(3) .nav__link { transition-delay: 0.11s; }
  .nav__toggle:checked ~ nav .nav__list .nav__item:nth-child(4) .nav__link { transition-delay: 0.14s; }
  .nav__toggle:checked ~ nav .nav__list .nav__item:nth-child(5) .nav__link { transition-delay: 0.17s; }
  .nav__toggle:checked ~ nav .nav__list .nav__item:nth-child(6) .nav__link { transition-delay: 0.2s; }
  .nav__toggle:checked ~ nav .nav__list .nav__item:nth-child(7) .nav__link { transition-delay: 0.23s; }
  .nav__toggle:checked ~ nav .nav__list .nav__item:nth-child(8) .nav__link { transition-delay: 0.26s; }

  /* The phone number IS the point on a phone. The narrow-viewport rule near
     the end of this file hides .nav__item--phone in the header bar; inside the
     open panel there is room for it, so it comes back. */
  .nav__list .nav__item--phone {
    display: block;
  }

  .nav__list .nav__item--phone .nav__link {
    color: var(--gold);
    font-weight: 600;
  }

  .nav__cta {
    margin-left: 0;
    margin-top: 0.75rem;
  }

  .nav__cta .btn {
    width: 100%;
    text-align: center;
  }

  /* No dropdowns on mobile. Each parent link goes to its hub instead.

     History, because this has bitten twice. The rule here used to collapse the
     panel to max-height 0 and wait for an .active class that
     assets/js/mobile-nav.js adds on tap. render.py has never loaded that
     script, so nothing ever added the class and every mobile dropdown was a
     dead 16px strip. Opening them inline instead was the obvious fix, and it
     is wrong: the three menus carry 24 links, which made the panel 1547px on a
     375x812 phone and pushed Request Appointment and the phone number below
     the fold of the menu itself.

     So they are hidden. Tapping My Hip goes to /hip/, which lists all nine
     journey articles in a readable page rather than a cramped panel; My Knee
     and Insights the same. That leaves a five-item menu with nothing to
     scroll, which is what the client asked for on 3 Sep: "I'd prefer to have
     that just as clean as possible, the top menu bar. Less is more."
     Desktop keeps the dropdowns; they work there. */
  .nav__dropdown {
    display: none;
  }

  .nav__item--dropdown.active > .nav__dropdown {
    display: block;
    max-height: none;
    overflow: visible;
  }

  .nav__dropdown--mega {
    display: none;
    padding: 0.25rem 0 0.25rem 1rem;
    margin: 0.25rem 0 0.5rem 0.75rem;
  }

  .nav__item--dropdown.active > .nav__dropdown--mega {
    display: block;
  }

  /* An open menu on a phone has to be IN FLOW. The base .nav__dropdown is
     position:absolute, left:50%, translateX(-50%), and the mobile block above
     only ever toggled `display`, so an opened panel was still an absolutely
     positioned box centred on its nav item. With the old 340px compact menu
     that mostly stayed on screen (a max-width:1200px rule cleared its
     min-width). The article menu is 580px wide from .nav__dropdown--mega, so
     on a 375px phone it rendered at x=-229: entirely off the left edge, and
     tapping Insights appeared to do nothing at all.

     Reset the positioning, the min-width and the panel chrome so it reads as
     an indented list under its parent, which is what the accordion in
     mobile-nav.js has always assumed. */
  .nav__item--dropdown.active > .nav__dropdown,
  .nav__item--dropdown.active > .nav__dropdown--mega {
    position: static;
    transform: none;
    translate: none;
    min-width: 0;
    width: 100%;
    opacity: 1;
    visibility: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  /* No chevron on mobile. The menus are open inline now, so a caret would
     promise a tap that does nothing. See the .nav__dropdown note above. */
  .nav__item--dropdown > .nav__link::after {
    display: none;
  }

  .nav__dropdown-heading {
    padding: 0.4rem 0.5rem 0.15rem;
    font-size: 0.875rem;
    margin-top: 0.15rem;
  }

  .nav__dropdown-heading:first-child {
    margin-top: 0;
  }

  .nav__dropdown--mega a {
    font-size: var(--step--1);
    padding: 0.35rem 0.5rem;
  }

  .nav__dropdown a {
    font-size: var(--step--1);
    padding: 0.35rem 0.5rem;
  }
}


/* ----------------------------------------------------------------
   6. HERO
   ---------------------------------------------------------------- */

.hero {
  position: relative;
  /* One viewport, minus the header. Max, 4 Sep: "when they land on the page,
     it just shows Professor Daevyd Rodda, his career procedures, the single
     specialty, his orthopaedic surgery registration, and the annual volume."

     The header is position:sticky and therefore IN FLOW, so it reserves its
     own 77px (.header__inner min-height 76 + 1px border) and the hero starts
     below it. Above 900px .hero__trust-bar is position:absolute inside .hero,
     so hero + stats bar is simply the hero's own box: subtract the header and
     nothing else.

     svh rather than vh so mobile browser chrome does not push the stats bar
     off screen; the vh line above it is the fallback. The 560px floor stops a
     very short window crushing the content.

     This calc is DELIBERATELY not applied at <=900px. There min-height goes
     auto and the bar becomes position:relative, so the same sum would count
     the bar twice. See the 900px block further down. */
  min-height: max(560px, calc(100vh - 77px));
  min-height: max(560px, calc(100svh - 77px));
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy);
}

/* Gradient overlay: solid navy left, fading to transparent right */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--navy) 0%,
    var(--navy) 25%,
    rgba(13, 27, 42, 0.92) 40%,
    rgba(13, 27, 42, 0.6) 60%,
    rgba(13, 27, 42, 0.15) 80%,
    transparent 100%
  );
  z-index: 2;
}

/* Subtle radial gold glow — top right */
.hero::after {
  content: '';
  position: absolute;
  top: -10%;
  right: -5%;
  width: 50%;
  height: 60%;
  background: radial-gradient(
    ellipse at center,
    rgba(178, 144, 99, 0.08) 0%,
    rgba(178, 144, 99, 0.03) 40%,
    transparent 70%
  );
  z-index: 3;
  pointer-events: none;
}

/* Hero background video — ambient loop behind content */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Doctor photo — right side */
.hero__photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 56%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  z-index: 1;
  /* Feather the photo's own left edge so it dissolves into the navy
     rather than meeting it as a seam. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
  mask-image: linear-gradient(to right, transparent 0, #000 22%);
}

/* Ensure inner-page .hero > .container content sits above overlays */
.hero > .container {
  position: relative;
  z-index: 4;
}

/* Content — left side */
/* The hero text was the only thing on the page not on the 1280px column. The
   element carries both .container and .hero__content, and .hero__content set
   margin-inline: 0, which cancelled .container's centring. Measured at 1600px:
   the header, the hero stat bar and every section below all began at 153px,
   the hero text at 0. That 105px offset is a large part of why the hero read
   as badly spaced.

   Now it centres like everything else, and the text children are capped so
   they still stop clear of the photograph, whose mask resolves around 55% of
   the hero width. */
.hero__content {
  position: relative;
  z-index: 4;
  max-width: var(--max-w);
  margin-inline: auto;
  /* Bottom padding only has to clear .hero__trust-bar, which measures
     117px. It was clamp(10rem, 20vh, 13rem), up to 208px, overshooting by
     about 100px and leaving 229px of dead space under the text once the
     two hero buttons came out on 3 Sep. */
  padding-block: clamp(1.5rem, 3vh, 2.5rem) clamp(5.5rem, 10vh, 7rem);
}

.hero__content > * {
  max-width: 60%;
}

/* The prototype hero is a name, not a headline: a small letterspaced
   "Professor" label, the name at display size, the credential line in gold,
   then the location. Restored 2026-09-04. Gina, 3 Sep: "Currently in base 44,
   you just have Daevyd Rodda and then your credentials." */
.hero__eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--on-navy-mut);
  margin-bottom: 1.1rem;
}

.hero__name {
  color: var(--cream);
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* The 32x1px gold rule that used to sit here is GONE (2026-09-04). It was a
   block-level pseudo-element with no bottom margin, so it printed directly on
   top of the word "Professor" and read as a stray dash. The prototype has no
   rule above its eyebrow. Do not reinstate it without a margin. */

.hero__title {
  font-family: var(--heading-font);
  font-size: var(--step-5);
  font-weight: 400;
  color: var(--cream);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

/* The prototype sets both lines of the name in white, Playfair 400. Ours had
   the surname in gold, which was invention, not transposition. Measured
   2026-09-04: rgb(255,255,255) on both. */
.hero__title em,
.hero__title .hero__accent {
  font-style: normal;
  color: var(--heading);
}

/* Measured off the live prototype at 1440px on 2026-09-04: 108px Playfair
   Display, line-height 1.0, letter-spacing effectively zero, three lines
   reading "Professor / Daevyd / Rodda" with the title line in muted slate and
   the name in white. Ours was 80px on two lines with the title demoted to a
   small uppercase eyebrow, which is why the name read small next to theirs.
   7.5vw resolves to exactly 108px at 1440 and is capped there. */
.hero__title--name {
  font-size: clamp(2.75rem, 7.5vw, 6.75rem);
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 1.5rem;
}

.hero__title-line {
  display: block;
}

.hero__title-line--muted {
  color: var(--steel-strong);
}

/* The credential line, gold small caps, straight off the prototype. */
.hero__creds {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}

.hero__subtitle {
  font-size: var(--step-0);
  font-weight: 400;
  color: rgba(248, 246, 241, 0.72);
  line-height: 1.6;
  max-width: 48ch;
  /* 0, was 2rem. It was spacing against .hero__actions, which the homepage no
     longer emits: Daevyd asked for the hero buttons to come out on 3 Sep. */
  margin-bottom: 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* Trust bar — bottom of hero */
.hero__trust-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  background: rgba(13, 27, 42, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--gold-rule);
}

.hero__trust-bar-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.hero__stat {
  padding: 1.5rem 2rem;
  text-align: center;
  position: relative;
}

/* Gold vertical dividers between stats */
.hero__stat + .hero__stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(178, 144, 99, 0.4),
    transparent
  );
}

/* Rewritten 2026-09-09. The stats were a big figure over a small uppercase
   label. Daevyd asked for four specific sentences instead, two of which have no
   number to lead with ("Exclusive focus: hip and knee replacement",
   "Professor of Orthopaedic Surgery"), so figure-over-label no longer fits.

   Each box is now one sentence with its leading phrase at display size, which
   keeps the row reading as a stats bar rather than four paragraphs. The lead is
   inline, so it is a step smaller than the old stacked figure or the sentences
   wrap badly at four across. */
.hero__stat-line {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.45;
  color: rgba(248, 246, 241, 0.72);
  text-wrap: balance;
}

.hero__stat-lead {
  font-family: var(--heading-font);
  font-size: var(--step-2);
  font-weight: 400;
  color: var(--gold);
  line-height: 1.15;
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: 0.15rem;
}

.hero__stat-number {
  display: block;
  font-family: var(--heading-font);
  font-size: var(--step-3);
  font-weight: 400;
  color: var(--gold);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hero__stat-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(248, 246, 241, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.35rem;
}

a.hero__stat--link {
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}

a.hero__stat--link:hover {
  background: var(--steel-glow);
}

/* Hero responsive */
@media (max-width: 900px) {
  .hero {
    min-height: auto;
    padding-bottom: 0;
    flex-direction: column;
  }

  /* The portrait becomes a real block on phones (2026-09-04).

     It was position:absolute at width:56% at EVERY breakpoint, including the
     column-stacked mobile hero, so on a 375px screen it rendered as a 210px
     strip pinned right and almost entirely hidden behind the scrim: the hero
     had no visible photograph at all on the device most patients use. Now it
     sits above the name at full width, and the gradient scrim and the mask,
     both of which assume a right-hand image, are switched off. */
  .hero__photo {
    position: static;
    width: 100%;
    height: clamp(260px, 42vh, 380px);
    object-position: center 18%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero::before,
  .hero::after {
    display: none;
  }

  .hero::before {
    background: linear-gradient(
      to bottom,
      var(--navy) 0%,
      var(--navy) 40%,
      rgba(13, 27, 42, 0.85) 60%,
      rgba(13, 27, 42, 0.7) 80%,
      rgba(13, 27, 42, 0.55) 100%
    );
  }

  .hero::after {
    display: none;
  }

  .hero__content > * { max-width: 100%; }

  .hero__content {
    max-width: 100%;
    padding-block: clamp(2rem, 5vh, 3.5rem) 2rem;
  }

  .hero__trust-bar {
    position: relative;
  }

  .hero__trust-bar-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__stat {
    padding: 1.25rem 1rem;
  }

  /* Reset dividers for 2-col layout */
  .hero__stat:nth-child(3)::before {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero__trust-bar-inner {
    grid-template-columns: 1fr 1fr;
  }

  .hero__stat {
    padding: 1rem 0.75rem;
  }
}


/* ----------------------------------------------------------------
   7. TRUST STRIP (credentials bar)
   ---------------------------------------------------------------- */

.trust-strip {
  background: var(--surface-2);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--hairline);
}

.trust-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.trust-strip__badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.25rem;
  border: 1px solid rgba(178, 144, 99, 0.25);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-muted);
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.trust-strip__badge:hover {
  border-color: var(--gold);
  box-shadow: 0 2px 12px rgba(178, 144, 99, 0.12);
}

a.trust-strip__badge {
  text-decoration: none;
  color: var(--ink-muted);
  cursor: pointer;
}

.trust-strip__badge img {
  height: 28px;
  width: auto;
}

.trust-strip__badge-icon {
  color: var(--gold);
  font-size: 1.1rem;
}

@media (max-width: 480px) {
  .trust-strip__badge {
    white-space: normal;
    text-align: center;
    justify-content: center;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
  }

  .trust-strip__inner {
    gap: 0.75rem;
  }
}


/* ----------------------------------------------------------------
   8. SECTION SYSTEM
   ---------------------------------------------------------------- */

.section {
  padding-block: clamp(4rem, 10vw, 8rem);
}

.section--dark {
  background: var(--navy);
  color: var(--cream);
}

/* h2 follows the sitewide steel rule even on a dark section; only h3 and
   below stay light. This selector is (0,1,1) and was quietly out-ranking the
   (0,1,0) steel rule further down the file, so every h2 inside a
   .section--dark rendered near-white. */
.section--dark h2 {
  color: var(--steel);
}

.section--dark h3,
.section--dark h4,
.section--dark h5 {
  color: var(--cream);
}

.section--dark .lead {
  color: rgba(248, 246, 241, 0.7);
}

.section--dark p:not(.lead):not(.card__text):not([class]) {
  color: rgba(248, 246, 241, 0.8);
}

.section--navy-mid {
  background: var(--navy-mid);
  color: var(--cream);
}

/* Same specificity trap as .section--dark: h2 keeps the sitewide steel. */
.section--navy-mid h2 { color: var(--steel); }

.section--navy-mid h3,
.section--navy-mid h4 {
  color: var(--cream);
}

.section--cream {
  background: var(--surface-2);
}

.bg-cream {
  background: var(--surface-2);
}

.section--white {
  background: var(--surface-1);
}

/* --- Base eyebrow (used on insight/essay article pages) --- */
.eyebrow {
  display: block;
  font-family: var(--ff-body);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--gold-deep);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

.eyebrow--light {
  color: var(--gold);
}

/* --- Unscrubbed podcast chip --- */
.unscrubbed-chip {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: rgba(74, 127, 165, 0.12);
  border: 1px solid rgba(178, 144, 99, 0.25);
  border-radius: 999px;
  padding: 0.4rem 1rem;
}

/* --- Episode list (podcast page) --- */
.episode-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.episode-list li {
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--hairline);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

.episode-list li b {
  display: block;
  color: var(--heading);
  margin-bottom: 0.25rem;
}

.episode-list li.is-current {
  border-left-color: var(--gold);
  background: rgba(74, 127, 165, 0.06);
}

/* --- Video embed (essay + podcast pages) --- */
.video-embed {
  position: relative;
  padding-top: 56.25%;
  border-radius: 8px;
  overflow: hidden;
  background: var(--navy);
  box-shadow: 0 30px 60px -30px rgba(11, 29, 45, 0.4);
  margin-bottom: var(--space-3);
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-caption {
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-align: center;
}

/* --- Essay figures (conference + essay pages) --- */
.essay-figure {
  margin: var(--space-6) 0;
}

.essay-figure img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 30px 60px -30px rgba(11, 29, 45, 0.35);
  display: block;
}

.essay-figure figcaption {
  margin-top: var(--space-3);
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.5;
}

.essay-figure--inline {
  max-width: 320px;
  margin: var(--space-5) auto;
}

.essay-figure--inline img {
  border-radius: 8px;
}

@media (max-width: 640px) {
  .essay-figure--inline {
    max-width: 100%;
  }
}

/* Section header (eyebrow + heading + underline + lead) */
.section-header {
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.section-header--center {
  text-align: center;
}

.section-header--center p {
  margin-inline: auto;
}

.section-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
}

.section-header__eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
}

.section-header--center .section-header__eyebrow::before {
  display: none;
}

.section-header__heading {
  margin-bottom: 1rem;
}

/* Gold underline accent */
.section-header__heading::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin-top: 1rem;
}

.section-header--center .section-header__heading::after {
  margin-inline: auto;
}

.section-header__lead {
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--ink-muted);
  max-width: 58ch;
  margin-top: 0.75rem;
}

.section--dark .section-header__lead {
  color: rgba(248, 246, 241, 0.65);
}


/* ----------------------------------------------------------------
   9. BUTTONS
   ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  /* The title change to "Professor" pushed the longest label ("Read more
     about Professor Rodda") to 382px, wider than a 375px viewport, and
     nowrap would not let it break. */
  max-width: 100%;
  transition: all var(--dur) var(--ease);
}

/* Superseded by the steel button rules later in this file. Kept only for the
   :active transform; the colours here would be a gold button, which the
   prototype does not have anywhere. */
.btn--primary {
  background: var(--steel);
  color: #FFFFFF;
  border-color: var(--steel);
}

.btn--primary:hover {
  background: var(--steel-deep);
  border-color: var(--steel-deep);
  transform: translateY(-2px);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn--secondary {
  background: transparent;
  color: var(--cream);
  border-color: rgba(248, 246, 241, 0.7);
}

.btn--secondary:hover {
  border-color: var(--steel-light);
  color: var(--steel-light);
}

.btn--ghost {
  background: transparent;
  color: var(--heading);
  border-color: var(--navy);
}

.btn--ghost:hover {
  background: var(--navy);
  color: var(--cream);
}

.cta-banner .btn--ghost {
  color: var(--cream);
  border-color: rgba(248, 246, 241, 0.7);
}

.cta-banner .btn--ghost:hover {
  border-color: var(--steel-light);
  color: var(--steel-light);
  background: transparent;
}

.btn--text {
  background: transparent;
  color: var(--heading);
  border: none;
  padding: 0.5rem 0;
  font-weight: 500;
  border-radius: 0;
}

.btn--text::after {
  content: '\2192';
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease);
}

.btn--text:hover {
  color: var(--gold-deep);
}

.btn--text:hover::after {
  transform: translateX(4px);
}

.btn--sm {
  padding: 0.65rem 1.5rem;
  font-size: 0.875rem;
}

.btn--lg {
  padding: 1.1rem 2.5rem;
  font-size: 1.05rem;
}

/* Button icon */
.btn__icon {
  display: inline-flex;
  align-items: center;
  font-size: 1.1em;
  transition: transform var(--dur-fast) var(--ease);
}

.btn:hover .btn__icon {
  transform: translateX(3px);
}


/* ----------------------------------------------------------------
   10. CARDS
   ---------------------------------------------------------------- */

/* The border and the resting shadow both come off here as well as in the
   panel group further down: theirs is a flat fill, and a shadow on a plate this
   dark only muddies the edge. The hover shadow stays as the affordance. */
.card {
  background: var(--surface-1);
  border: none;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  position: relative;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
  border-left: 3px solid var(--gold);
}

/* Dark card variant */
.card--dark {
  background: var(--navy-mid);
  border-color: rgba(178, 144, 99, 0.1);
  color: var(--cream);
}

.card--dark:hover {
  border-color: rgba(178, 144, 99, 0.35);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3),
              0 0 0 1px var(--gold-rule);
}

.card--dark h3,
.card--dark h4,
.card--dark h5 {
  color: var(--cream);
}

.card--dark p {
  color: rgba(248, 246, 241, 0.7);
}

/* Featured card */
.card--featured {
  border-left: 3px solid var(--gold);
  background: linear-gradient(135deg, var(--surface-1), rgba(74, 127, 165, 0.04));
}

.card--featured:hover {
  border-left-width: 3px;
}

/* Card inner elements */
.card__eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

.card__title {
  font-family: var(--heading-font);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

.card__text {
  font-size: var(--step-0);
  color: var(--ink-muted);
  line-height: 1.65;
  margin-bottom: 1rem;
}

.card--dark .card__text {
  color: rgba(248, 246, 241, 0.65);
}

.card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-muted);
  border-radius: var(--radius-md);
  color: var(--gold);
  font-size: 1.3rem;
  margin-bottom: 1.25rem;
}

.card--dark .card__icon {
  background: rgba(74, 127, 165, 0.12);
}

.card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gold);
  transition: gap var(--dur-fast) var(--ease);
}

.card__more::after {
  content: '\2192';
  transition: transform var(--dur-fast) var(--ease);
}

.card:hover .card__more::after {
  transform: translateX(4px);
}

.card__image {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: calc(-1 * clamp(1.5rem, 3vw, 2rem));
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.card__image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

/* Image hover zoom removed 18 Sep 2026 (Max: no zooming on any image). */

/* Card grids */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.card-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* One card per row. Full width, so a .card reads as a long horizontal bar
   rather than a box: the de-box layer further down already strips its border
   and leaves a flat --navy-soft plate. Their prototype uses exactly this for
   the clinical trials, the grant and the press items. */
.card-grid--1 {
  grid-template-columns: 1fr;
}

.card-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 900px) {
  .card-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .card-grid--3,
  .card-grid--2 {
    grid-template-columns: 1fr;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }
}


/* ----------------------------------------------------------------
   11. PHOTO MOSAIC
   ---------------------------------------------------------------- */

.photo-mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 860px;
  margin-inline: auto;
}

.photo-mosaic__item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.photo-mosaic__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--dur-slow) var(--ease);
}

/* Image hover zoom removed 18 Sep 2026 (Max: no zooming on any image). */

/* Caption overlay */
.photo-mosaic__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 1.25rem 1rem;
  background: linear-gradient(to top, rgba(13, 27, 42, 0.8), transparent);
  color: var(--cream);
  font-size: var(--step--1);
  font-weight: 500;
}

.photo-mosaic--3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1100px;
}

.photo-mosaic--3 .photo-mosaic__item {
  aspect-ratio: 4 / 3;
}

.photo-mosaic--4 {
  max-width: 1100px;
}

@media (max-width: 640px) {
  .photo-mosaic,
  .photo-mosaic--3 {
    grid-template-columns: 1fr;
  }

  .photo-mosaic__item {
    aspect-ratio: 4 / 3;
  }
}


/* ----------------------------------------------------------------
   12. PULL QUOTE
   ---------------------------------------------------------------- */

.pull-quote {
  position: relative;
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--surface-2);
  border-radius: 0;
  margin-block: var(--space-7);
  text-align: center;
}

.pull-quote__text {
  font-family: var(--heading-font);
  font-size: var(--step-2);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  max-width: 55ch;
  margin-inline: auto;
}

.pull-quote__cite {
  display: block;
  font-family: var(--body);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 1.25rem;
}

.pull-quote__cite::before {
  content: '\2014\00a0';
}

/* Dark pull quote */
.section--dark .pull-quote {
  background: rgba(74, 127, 165, 0.06);
}

.section--dark .pull-quote__text {
  color: var(--cream);
}


/* ----------------------------------------------------------------
   13. GPS TIMELINE (vertical)
   ---------------------------------------------------------------- */

.timeline {
  position: relative;
  padding-left: 3rem;
}

/* The vertical gold line */
.timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--gold) 3%,
    var(--gold) 97%,
    transparent
  );
}

.timeline__item {
  position: relative;
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

/* Numbered dot */
.timeline__dot {
  position: absolute;
  left: -3rem;
  top: 0.15rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--gold);
  z-index: 2;
}

.timeline__item-content {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.timeline__item-content:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(178, 144, 99, 0.3);
}

.timeline__item-title {
  font-family: var(--heading-font);
  font-size: var(--step-2);
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.timeline__item-text {
  font-size: var(--step-0);
  color: var(--ink-muted);
  line-height: 1.65;
}

/* Desktop: alternating left/right */
@media (min-width: 901px) {
  .timeline {
    padding-left: 0;
    max-width: 900px;
    margin-inline: auto;
  }

  .timeline::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .timeline__item {
    display: flex;
    width: 100%;
  }

  .timeline__dot {
    left: 50%;
    transform: translateX(-50%);
    top: 1.5rem;
  }

  .timeline__item-content {
    width: 44%;
  }

  /* Odd items: left side */
  .timeline__item:nth-child(odd) {
    justify-content: flex-start;
  }

  .timeline__item:nth-child(odd) .timeline__item-content {
    text-align: right;
  }

  /* Even items: right side */
  .timeline__item:nth-child(even) {
    justify-content: flex-end;
  }

  .timeline__item:nth-child(even) .timeline__item-content {
    text-align: left;
  }
}

/* Dark variant */
.section--dark .timeline::before {
  background: linear-gradient(
    to bottom,
    transparent,
    var(--gold) 3%,
    var(--gold) 97%,
    transparent
  );
}

.section--dark .timeline__item-content {
  background: var(--navy-mid);
  border-color: rgba(178, 144, 99, 0.1);
  color: var(--cream);
}

.section--dark .timeline__item-content:hover {
  border-color: rgba(178, 144, 99, 0.3);
}

.section--dark .timeline__item-title {
  color: var(--cream);
}

.section--dark .timeline__item-text {
  color: rgba(248, 246, 241, 0.65);
}


/* ----------------------------------------------------------------
   14. SCROLL REVEAL ANIMATIONS
   ---------------------------------------------------------------- */

/* Scroll reveal REMOVED 28 Aug 2026 at Max's request: sections fading in as
   you scrolled was distracting on a clinical site. The [data-reveal]
   attributes are left in the markup and are now inert. Do NOT re-add an
   opacity:0 rule for them without also restoring the observer in site.js, or
   every section carrying the attribute becomes permanently invisible. */


/* ----------------------------------------------------------------
   14b. ABOUT HERO
   ---------------------------------------------------------------- */

.about-hero {
  background: var(--navy);
  padding: clamp(4rem, 9vh, 6rem) 0 clamp(3rem, 7vh, 5rem);
}

.about-hero__grid {
  display: grid;
  grid-template-columns: 0.42fr 0.58fr;
  gap: var(--space-8);
  align-items: start;
}

.about-hero__grid .about-hero__image {
  margin-top: 5.5rem;
}

.about-hero__grid--flipped {
  grid-template-columns: 0.58fr 0.42fr;
}

.about-hero__image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.about-hero__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.about-hero__image::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px rgba(178, 144, 99, 0.12);
  pointer-events: none;
}

.about-hero__content {
  color: var(--cream);
}

.about-hero__content .breadcrumb a,
.about-hero__content .breadcrumb__current {
  color: rgba(248, 246, 241, 0.5);
}

.about-hero__content .breadcrumb__current {
  color: var(--gold);
}

@media (max-width: 900px) {
  .about-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .about-hero__image {
    max-width: 360px;
    margin-inline: auto;
  }
  .about-hero {
    padding-top: clamp(5rem, 12vh, 7rem);
    text-align: center;
  }
  .about-hero__content div[style*="display: flex"] {
    justify-content: center;
  }
}


/* ----------------------------------------------------------------
   14c. ABOUT TWO-COL RESPONSIVE
   ---------------------------------------------------------------- */

@media (max-width: 768px) {
  .about-two-col {
    grid-template-columns: 1fr !important;
    gap: var(--space-6) !important;
  }
}


/* ----------------------------------------------------------------
   14d. CTA STRIP (navy banner variant)
   ---------------------------------------------------------------- */

.cta-strip {
  background: var(--navy);
  position: relative;
  overflow: hidden;
}

.cta-strip::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 50%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(74, 127, 165, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.cta-strip__inner {
  position: relative;
  z-index: 1;
}


/* ----------------------------------------------------------------
   15. CTA BANNER
   ---------------------------------------------------------------- */

.cta-banner {
  background: var(--navy);
  padding-block: clamp(4rem, 10vw, 7rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Subtle gold gradient behind */
.cta-banner::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 120%;
  background: radial-gradient(
    ellipse at center,
    rgba(178, 144, 99, 0.06) 0%,
    transparent 60%
  );
  pointer-events: none;
}

.cta-banner__inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin-inline: auto;
}

.cta-banner__eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
}

.cta-banner__heading {
  font-family: var(--heading-font);
  font-size: var(--step-4);
  font-weight: 400;
  color: var(--cream);
  line-height: 1.15;
  margin-bottom: 1rem;
}

.cta-banner__heading em,
.cta-banner__heading .hero__accent {
  font-style: normal;
  color: var(--gold);
}

.cta-banner__text {
  font-size: var(--step-0);
  color: rgba(248, 246, 241, 0.65);
  max-width: 48ch;
  margin-inline: auto;
  margin-bottom: 2rem;
  line-height: 1.65;
}

.cta-banner__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}


/* ----------------------------------------------------------------
   16. FOOTER
   ---------------------------------------------------------------- */

.site-footer {
  background: var(--navy);
  color: rgba(248, 246, 241, 0.6);
  padding-top: clamp(3rem, 8vw, 5rem);
  padding-inline: clamp(1.5rem, 5vw, 3.5rem);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(4, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1.6fr repeat(2, 1fr); }
  .footer__brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 640px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

.footer__brand {
  max-width: 320px;
}

.footer__brand-logo img {
  height: 44px;
  width: auto;
  margin-bottom: 1rem;
}

.footer__brand-name {
  font-family: var(--heading-font);
  font-size: var(--step-1);
  font-weight: 400;
  color: var(--cream);
  margin-bottom: 0.75rem;
}

.footer__brand-desc {
  font-size: var(--step--1);
  line-height: 1.7;
  color: rgba(248, 246, 241, 0.55);
  margin-bottom: 1.5rem;
}

.footer__heading {
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 1.25rem;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer__links a {
  font-size: 0.92rem;
  color: rgba(248, 246, 241, 0.55);
  transition: color var(--dur-fast) var(--ease);
}

.footer__links a:hover {
  color: var(--gold);
}

/* Footer link columns as closed disclosures, 2026-09-10.
   Max: "each link column closed on mobile and also closed on desktop... there
   are too many links."

   Measured before: the footer was 368 words against 641 words of homepage body,
   so 36% of the landing page was footer, and on a 375px phone it ran 4,012px,
   which is 4.9 screens of scrolling and 35% of the page.

   🚨 The links are COLLAPSED, never removed, and never `display: none`.
   `<details>` is a native disclosure: Google renders and follows the anchors
   inside it, AI crawlers read them in the raw HTML, and unlike `display: none`
   the content is not de-weighted. Every href stays in the markup.

   Checked before doing this: of the 55 pages the footer linked, exactly ONE had
   no other link anywhere on the site, and that was /sitemap/, which is in the
   bottom bar and stays visible. Everything else carries 4 to 24 body links
   already, e.g. /hip/where-is-the-pain/ has 24. The footer was belt and braces,
   not the crawl path our own notes claimed it was.

   The insights and blog band was removed outright in the same pass: 16 links
   whose articles are each linked 4 to 7 times from page bodies, and listed in
   full on /insights/ and /blog/. */
.footer__group {
  min-width: 0;
}

.footer__group > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0;
  padding: 0.35rem 0;
}

.footer__group > summary::-webkit-details-marker {
  display: none;
}

/* Chevron, rotated when open. Drawn rather than an icon file so it inherits
   the gold and needs no extra request. */
.footer__group > summary::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease);
  flex: none;
  margin-bottom: 0.2rem;
}

.footer__group[open] > summary::after {
  transform: rotate(-135deg);
  margin-bottom: -0.2rem;
}

.footer__group > summary:hover,
.footer__group > summary:focus-visible {
  color: var(--gold-bright);
}

.footer__group[open] > .footer__links {
  padding-top: 1rem;
}

.footer__cta {
  margin-top: 0.5rem;
  text-align: center;
}

/* Social row */
.footer__social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(248, 246, 241, 0.15);
  color: rgba(248, 246, 241, 0.6);
  font-size: 1rem;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}

.footer__social a:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--steel-glow);
}

/* Footer bottom — disclaimer + copyright */
.footer__bottom {
  border-top: 1px solid rgba(248, 246, 241, 0.08);
  padding-block: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 1rem clamp(2rem, 4vw, 3.5rem);
}

.footer__disclaimer {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(248, 246, 241, 0.35);
}

.footer__copyright {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(248, 246, 241, 0.35);
}

/* Footer responsive */
@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer__bottom {
    flex-direction: column;
  }
}


/* ----------------------------------------------------------------
   17. ADDITIONAL COMPONENTS
   ---------------------------------------------------------------- */

/* --- Feature row (image + text, alternating) --- */
.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.feature-row--reverse {
  direction: rtl;
}

.feature-row--reverse > * {
  direction: ltr;
}

.feature-row__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.feature-row__image img {
  width: 100%;
  height: auto;
  display: block;
}

.feature-row__content {
  padding-block: 1rem;
}

@media (max-width: 900px) {
  .feature-row,
  .feature-row--reverse {
    grid-template-columns: minmax(0, 1fr);
    direction: ltr;
    gap: 2rem;
  }
}

/* --- Stats grid --- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.stat {
  text-align: center;
  padding: 1.5rem 1rem;
}

.stat__number {
  font-family: var(--heading-font);
  font-size: var(--step-5);
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.stat__label {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.section--dark .stat__label {
  color: rgba(248, 246, 241, 0.55);
}

/* --- Accordion --- */
.accordion {
  border-top: 1px solid var(--hairline);
}

.accordion__item {
  border-bottom: 1px solid var(--hairline);
}

.accordion__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
  text-align: left;
  font-family: var(--heading-font);
  font-size: var(--step-1);
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
  background: none;
  border: none;
  transition: color var(--dur-fast) var(--ease);
}

.accordion__trigger:hover {
  color: var(--gold-deep);
}

.accordion__trigger-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  transition: transform var(--dur) var(--ease);
}

.accordion__item[open] .accordion__trigger-icon {
  transform: rotate(45deg);
}

.accordion__content {
  padding-bottom: 1.5rem;
  padding-right: 3rem;
  color: var(--ink-muted);
  line-height: 1.7;
}

.section--dark .accordion {
  border-color: rgba(248, 246, 241, 0.1);
}

.section--dark .accordion__item {
  border-color: rgba(248, 246, 241, 0.1);
}

.section--dark .accordion__trigger {
  color: var(--cream);
}

.section--dark .accordion__content {
  color: rgba(248, 246, 241, 0.65);
}

/* --- Badge / tag --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  color: var(--ink-muted);
}

.badge--gold {
  background: var(--gold-muted);
  border-color: rgba(178, 144, 99, 0.3);
  color: var(--gold-deep);
}

a.badge {
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

a.badge:hover {
  border-color: var(--gold);
  box-shadow: 0 2px 8px var(--gold-rule);
}

.badge--success {
  background: rgba(45, 138, 94, 0.1);
  border-color: rgba(45, 138, 94, 0.25);
  color: var(--success);
}

/* --- Divider --- */
.divider {
  height: 1px;
  background: var(--hairline);
  border: none;
  margin-block: var(--space-7);
}

.divider--gold {
  height: 2px;
  background: linear-gradient(to right, var(--gold), transparent);
  max-width: 120px;
}

.divider--gold-center {
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  max-width: 200px;
  margin-inline: auto;
}

/* --- Breadcrumb --- */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
  padding-block: 1rem;
}

.breadcrumb a {
  color: var(--ink-muted);
  transition: color var(--dur-fast) var(--ease);
}

.breadcrumb a:hover {
  color: var(--gold-deep);
}

.breadcrumb__sep {
  color: var(--ink-soft);
  font-size: 0.7em;
}

.breadcrumb__current {
  color: var(--ink);
  font-weight: 500;
}


/* --- Breadcrumbs (ol/li variant used on condition & utility pages) --- */
.breadcrumbs {
  padding-block: 0.5rem 0;
  font-size: var(--step--1);
}

.breadcrumbs ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumbs ol li {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.breadcrumbs ol li + li::before {
  content: '/';
  color: var(--ink-soft);
  font-size: 0.7em;
  margin-inline: 0.25rem;
}

.breadcrumbs ol li a {
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.breadcrumbs ol li a:hover {
  color: var(--gold-deep);
}

.breadcrumbs ol li[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
}

/* Dark variant (inside .hero sections) */
.hero .breadcrumbs ol li + li::before {
  color: rgba(248, 246, 241, 0.3);
}

.hero .breadcrumbs ol li a {
  color: rgba(248, 246, 241, 0.55);
}

.hero .breadcrumbs ol li a:hover {
  color: var(--gold);
}

.hero .breadcrumbs ol li[aria-current="page"] {
  color: var(--gold);
}

/* --- Link cards (clickable cards) --- */
a.card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

a.card .card__more {
  margin-top: auto;
  padding-top: 1rem;
}

/* --- Breadcrumb dark variant (for page heroes) --- */
.breadcrumb--dark {
  color: rgba(248, 246, 241, 0.5);
}

.breadcrumb--dark a {
  color: rgba(248, 246, 241, 0.55);
}

.breadcrumb--dark a:hover {
  color: var(--gold);
}

.breadcrumb--dark .breadcrumb__sep {
  color: rgba(248, 246, 241, 0.3);
}

.breadcrumb--dark .breadcrumb__current {
  color: var(--gold);
}

/* --- Card grid: 5 columns (shoulder replacement) --- */
.card-grid--5 {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1100px) {
  .card-grid--5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 750px) {
  .card-grid--5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .card-grid--5 {
    grid-template-columns: 1fr;
  }
}

/* --- Card: signature variant (gold-accented feature) --- */
.card--signature {
  background: linear-gradient(135deg, var(--surface-1), rgba(74, 127, 165, 0.06));
  border: 1px solid var(--gold);
  position: relative;
}

.card--signature::before {
  content: 'Signature procedure';
  position: absolute;
  top: -11px;
  left: 1.5rem;
  background: var(--gold);
  color: var(--heading);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.25rem 0.85rem;
  border-radius: var(--radius-pill);
}

.card--signature:hover {
  border-color: var(--gold-bright);
  box-shadow: var(--shadow-gold);
  border-left: 1px solid var(--gold-bright);
}

/* --- Card grid: 4 columns --- */
.card-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) {
  .card-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .card-grid--4 {
    grid-template-columns: 1fr;
  }
}

/* --- GPS Phase cards (experience page) --- */


/* Dark phase card */


/* --- Two-column content block --- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 900px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}

/* --- Navy section text --- */
.section--navy-accent {
  background: var(--navy);
  color: var(--cream);
  text-align: center;
  padding-block: clamp(3rem, 8vw, 5rem);
  position: relative;
  overflow: hidden;
}

.section--navy-accent::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(74, 127, 165, 0.04), transparent 60%);
  pointer-events: none;
}

.section--navy-accent h2 { color: var(--steel); }
.section--navy-accent .section-header__eyebrow { color: var(--gold); }
.section--navy-accent p { color: rgba(248, 246, 241, 0.75); margin-inline: auto; }

/* Gold-accent section (GPS fee positioning) */
.section--gold-accent {
  background: linear-gradient(135deg, rgba(74, 127, 165, 0.10) 0%, rgba(74, 127, 165, 0.06) 100%);
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid rgba(178, 144, 99, 0.25);
  color: var(--heading);
  text-align: center;
  padding-block: clamp(3rem, 8vw, 5rem);
  position: relative;
  overflow: hidden;
}
.section--gold-accent::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, var(--steel-glow), transparent 60%);
  pointer-events: none;
}
.section--gold-accent h2 { color: var(--navy); }
.section--gold-accent .section-header__eyebrow { color: var(--gold-deep); }
.section--gold-accent p { color: var(--ink-soft); margin-inline: auto; }


/* ----------------------------------------------------------------
   18. PROCEDURE / CONDITION PAGES
   ---------------------------------------------------------------- */

/* Page hero — slimmer variant */
.page-hero {
  background: var(--navy);
  padding-block: clamp(6rem, 14vh, 9rem) clamp(3rem, 8vh, 5rem);
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background: radial-gradient(
    ellipse at 80% 30%,
    rgba(178, 144, 99, 0.05) 0%,
    transparent 60%
  );
  pointer-events: none;
}

.page-hero__content {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.page-hero__title {
  color: var(--cream);
  font-size: var(--step-5);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

/* Skip-to-content link — hidden until focused (a11y) */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: auto;
  height: auto;
  padding: 0.75rem 1.5rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  background: var(--gold);
  color: var(--heading);
  font-weight: 600;
  font-size: var(--step--1);
  text-decoration: none;
}

.page-hero__subtitle {
  font-size: var(--step-1);
  color: rgba(248, 246, 241, 0.65);
  line-height: 1.65;
  max-width: 55ch;
}

/* Info sidebar */
.info-sidebar {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  position: sticky;
  top: 100px;
}

.info-sidebar__heading {
  font-family: var(--heading-font);
  font-size: var(--step-1);
  font-weight: 400;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--gold);
}

.info-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.info-sidebar__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.92rem;
}

.info-sidebar__label {
  color: var(--ink-muted);
}

.info-sidebar__value {
  font-weight: 600;
  color: var(--ink);
}

/* Two-column content layout */
.content-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 900px) {
  .content-layout {
    grid-template-columns: 1fr;
  }

  .info-sidebar {
    position: static;
  }

  .page-hero {
    padding-block: clamp(2.5rem, 6vh, 4rem) clamp(2rem, 5vh, 3rem);
  }
}


/* ----------------------------------------------------------------
   19. FORMS
   ---------------------------------------------------------------- */

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-muted);
}

.form-textarea {
  min-height: 140px;
  resize: vertical;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--ink-soft);
}

.form-hint {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin-top: 0.35rem;
}


/* ----------------------------------------------------------------
   20. TABLES
   ---------------------------------------------------------------- */

.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}

.table {
  width: 100%;
  font-size: 0.92rem;
}

.table thead {
  background: var(--surface-2);
}

.table th {
  text-align: left;
  padding: 1rem 1.25rem;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  border-bottom: 2px solid var(--hairline);
}

.table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover {
  background: rgba(74, 127, 165, 0.04);
}


/* ----------------------------------------------------------------
   21. UTILITY CLASSES
   ---------------------------------------------------------------- */

/* Text alignment */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* Text colours */
.text-gold    { color: var(--gold); }
.text-cream   { color: var(--cream); }
.text-navy    { color: var(--navy); }
.text-muted   { color: var(--ink-muted); }
.text-soft    { color: var(--ink-soft); }
.text-success { color: var(--success); }

/* Font families */
.font-heading { font-family: var(--heading-font); }
.font-body    { font-family: var(--body); }

/* Font weight */
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* Spacing — margin top */
.mt-0  { margin-top: 0; }
.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-5  { margin-top: var(--space-5); }
.mt-6  { margin-top: var(--space-6); }
.mt-7  { margin-top: var(--space-7); }
.mt-8  { margin-top: var(--space-8); }

/* Spacing — margin bottom */
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-5  { margin-bottom: var(--space-5); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-7  { margin-bottom: var(--space-7); }
.mb-8  { margin-bottom: var(--space-8); }

/* Spacing — padding top */
.pt-0  { padding-top: 0; }
.pt-4  { padding-top: var(--space-4); }
.pt-6  { padding-top: var(--space-6); }
.pt-8  { padding-top: var(--space-8); }

/* Spacing — padding bottom */
.pb-0  { padding-bottom: 0; }
.pb-4  { padding-bottom: var(--space-4); }
.pb-6  { padding-bottom: var(--space-6); }
.pb-8  { padding-bottom: var(--space-8); }

/* Flex utilities */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* Grid utilities */
.grid { display: grid; }

/* Max-width */
.max-w-narrow { max-width: var(--max-w-narrow); }
.mx-auto      { margin-inline: auto; }

/* Visibility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hidden { display: none; }

/* Object fit */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }

/* Overflow */
.overflow-hidden { overflow: hidden; }

/* Position */
.relative { position: relative; }


/* ----------------------------------------------------------------
   22. REDUCED MOTION
   ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .card:hover {
    transform: none;
  }

  .btn--primary:hover {
    transform: none;
  }

  .hero__photo {
    animation: none;
  }
}


/* ----------------------------------------------------------------
   23. PRINT STYLES
   ---------------------------------------------------------------- */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 11pt;
    line-height: 1.5;
    color: #000;
  }

  .site-header,
  .site-footer,
  .nav__toggle-label,
  .btn,
  .cta-banner,
  .hero__trust-bar,
  .trust-strip {
    display: none !important;
  }

  h1, h2, h3, h4 {
    page-break-after: avoid;
    font-family: Georgia, serif;
    color: #000;
  }

  h1 { font-size: 24pt; }
  h2 { font-size: 18pt; }
  h3 { font-size: 14pt; }

  img {
    max-width: 100%;
    page-break-inside: avoid;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #555;
  }

  .hero {
    min-height: auto;
    padding: 2rem 0;
  }

  .hero__photo {
    display: none;
  }

  .hero__title {
    color: #000 !important;
    font-size: 28pt;
  }

  p {
    orphans: 3;
    widows: 3;
  }
}


/* ----------------------------------------------------------------
   24. DARK MODE SUPPORT (optional, honours system preference)
   ---------------------------------------------------------------- */

/* Uncomment the block below to enable automatic dark mode.
   Currently the site is navy-themed so this isn't strictly needed,
   but it's here for cream/white section handling.

@media (prefers-color-scheme: dark) {
  .section--white,
  .section--cream {
    background: var(--navy-soft);
    color: var(--cream);
  }

  .section--white h2,
  .section--white h3,
  .section--cream h2,
  .section--cream h3 {
    color: var(--cream);
  }

  .card {
    background: var(--navy-mid);
    border-color: rgba(178, 144, 99, 0.1);
    color: var(--cream);
  }

  .card h3,
  .card h4 {
    color: var(--cream);
  }

  .card__text {
    color: rgba(248, 246, 241, 0.65);
  }
}
*/


/* ----------------------------------------------------------------
   PROCEDURE ARTICLE PAGES
   ---------------------------------------------------------------- */

/* Two-column article + sidebar layout */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  padding-block: clamp(2rem, 5vw, 4rem);
}

@media (max-width: 960px) {
  .article-layout {
    grid-template-columns: 1fr;
  }
}

/* Tight article top — used after byline on procedure pages */
.section--article-tight {
  padding-top: clamp(0.5rem, 1.5vw, 1rem);
}
.section--article-tight .article-layout {
  padding-top: 0;
}

/* Prose */
.prose {
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--ink);
}

.prose h2 {
  font-family: var(--ff-heading);
  font-size: var(--step-3);
  font-weight: 400;
  color: var(--steel);
  margin-top: 3rem;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.prose h3 {
  font-family: var(--ff-heading);
  font-size: var(--step-1);
  font-weight: 400;
  color: var(--heading);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.prose h4 {
  font-family: var(--ff-body);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--heading);
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.prose p {
  margin-bottom: 1rem;
  color: var(--ink-muted);
}

.prose ul,
.prose ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  color: var(--ink-muted);
}

.prose li {
  margin-bottom: 0.4rem;
}

.prose--contact h2,
.prose--contact h3 {
  color: var(--steel);
  font-weight: 700;
}

.prose sup {
  font-size: 0.7em;
  color: var(--gold);
  font-weight: 600;
}

/* Procedure video */
.procedure-video {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 2rem;
  background: var(--navy);
}

.procedure-video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* MPH exterior gallery */
.mph-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.mph-gallery img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
}
@media (max-width: 640px) {
  .mph-gallery { grid-template-columns: 1fr; }
  .mph-gallery img { height: 220px; }
}

/* Quick-facts: a plain typographic strip, not a table of boxes.

   Rebuilt 2026-09-04. Max, of the home page: "we've got a bunch of boxes around
   the hospital, whereas it doesn't appear on the Base 44 site. It looks kind of
   fucked." Measured on theirs: the equivalent strip is a 2-column grid with a
   27px gap, background rgba(0,0,0,0), border 0, padding 0. A gold 13px label at
   0.2em tracking, the value beneath it. No plate, no cell borders, no rules.

   What was here: a flex grid of thirds, each cell painted --navy, sitting in a
   --navy-soft container with a 1px hairline, plus four ::before/::after
   pseudo-elements drawing 9999px-wide bleed rules to square off a ragged last
   row. All of that is gone.

   Restyled, NOT removed: build_procedures.py pins .quick-facts as a Speakable
   schema selector on 13 pages, and check_preview.py asserts quick-facts--wide
   is present on the home page. The element and both class names stay. */
.quick-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem) clamp(2rem, 4vw, 3.5rem);
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 2.5rem;
}

.quick-facts > div {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
}

.quick-facts dt {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 0;
}

.quick-facts dd {
  font-size: 1.0625rem;
  font-weight: 300;
  color: var(--heading);
  margin: 0;
  line-height: 1.4;
}

/* Lists inside a quick-fact cell: render inline, same legible colour as plain cells */
.quick-facts dd ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline;
}
.quick-facts dd li {
  display: inline;
  color: var(--cream);
}
.quick-facts dd li + li::before {
  content: " \00B7 ";
  color: var(--gold);
}

/* No responsive rules needed any more. The old component was a flex grid of
   thirds whose cell borders had to be re-shuffled at 640px and 380px to keep
   the seams tidy; auto-fit with a 15rem minimum reflows on its own, and there
   are no borders left to re-shuffle. */

/* Byline bar */
.byline {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.byline__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gold);
}

.byline__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.byline__meta {
  display: flex;
  flex-direction: column;
}

.byline__author {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--heading);
}

.byline__role {
  font-size: 0.875rem;
  color: var(--ink-muted);
}

.byline__date {
  margin-left: auto;
  font-size: 0.875rem;
  color: var(--ink-muted);
}

@media (max-width: 600px) {
  .byline__date {
    margin-left: 0;
    width: 100%;
  }
}

/* FAQ accordion */
.faq {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 1rem;
}

.faq details {
  border-bottom: 1px solid rgba(13, 27, 42, 0.1);
}

.faq summary {
  padding: 1.1rem 0;
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--heading);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--gold);
  transition: transform var(--dur-fast) var(--ease);
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq__answer {
  padding-bottom: 1.25rem;
}

.faq__answer p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0;
}

/* Protocol callout */
.protocol-callout {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--gold);
  background: rgba(74, 127, 165, 0.06);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.protocol-callout h3 {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.5rem;
}
.protocol-callout p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0;
}
.protocol-callout a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Sidebar */
.article-aside {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: sticky;
  top: 6rem;
}

.aside-card {
  padding: 1.5rem;
  border: 1px solid rgba(13, 27, 42, 0.08);
  border-radius: var(--radius-md);
  background: var(--white);
}

.aside-card :is(h3, h4) {
  font-family: var(--ff-heading);
  font-size: 1rem;
  font-weight: 400;
  color: var(--heading);
  margin-bottom: 0.75rem;
}

.aside-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.aside-card li {
  margin-bottom: 0.4rem;
}

.aside-card a {
  font-size: 0.88rem;
  color: var(--gold);
  font-weight: 500;
}

.aside-card a.btn:not(.btn--ink) {
  color: var(--heading);
}
.aside-card a.btn--ink {
  color: var(--cream);
}

.aside-card a:hover {
  text-decoration: underline;
}

.aside-card p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-muted);
  margin-bottom: 0.75rem;
}

/* Dark sidebar card variant */
.aside-card--dark {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--cream);
}

.aside-card--dark :is(h3, h4) {
  color: var(--gold);
}

.aside-card--dark p {
  color: rgba(248, 246, 241, 0.85);
}

/* Photo placeholder */
.photo-placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, rgba(13, 27, 42, 0.04), rgba(74, 127, 165, 0.06));
  border: 2px dashed rgba(178, 144, 99, 0.25);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

.photo-placeholder__label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(178, 144, 99, 0.5);
}

/* Procedure hero image */
.procedure-hero-img {
  margin: 0 auto 2rem;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.procedure-hero-img img,
.procedure-hero-img video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}

/* Inline btn for sidebar */
.btn--ink {
  display: inline-block;
  background: var(--navy);
  color: var(--cream);
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease);
}

.btn--ink:hover {
  background: var(--navy-mid);
}

/* ================================================================
   ROW 7 — Oxford Shoulder Score as tabs
   ================================================================ */
.oss-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.oss-tabs__btn {
  padding: 0.75rem 1.5rem;
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--steel-glow);
  border: 1px solid rgba(178, 144, 99, 0.2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.oss-tabs__btn:hover {
  background: rgba(74, 127, 165, 0.15);
  border-color: var(--gold);
}
.oss-tabs__btn[aria-selected="true"] {
  background: var(--gold);
  color: var(--heading);
  border-color: var(--gold);
}
.oss-tabs__panel {
  display: none;
}
.oss-tabs__panel[data-active] {
  display: block;
  animation: tabFadeIn 0.3s ease;
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   ROW 10/11 — Locations as expandable tabs
   ================================================================ */
.loc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--hairline);
  padding-bottom: 1rem;
}
.loc-tabs__btn {
  padding: 0.65rem 1.25rem;
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.loc-tabs__btn:hover {
  color: var(--gold-deep);
  border-color: var(--gold);
}
.loc-tabs__btn[aria-selected="true"] {
  background: var(--gold);
  color: var(--heading);
  border-color: var(--gold);
}
.loc-tabs__panel {
  display: none;
}
.loc-tabs__panel[data-active] {
  display: block;
  animation: tabFadeIn 0.3s ease;
}
.loc-tabs__panel .loc-img {
  width: 100%;
  max-width: 640px;
  height: 240px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
}
@media (min-width: 640px) {
  .loc-tabs__panel .loc-img {
    height: 300px;
  }
}

/* ================================================================
   FLIP CARDS — Locations page
   ================================================================ */
.flip-card {
  perspective: 900px;
  cursor: pointer;
}
.flip-card__inner {
  position: relative;
  width: 100%;
  min-height: 320px;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.flip-card.is-flipped .flip-card__inner,
.flip-card:hover .flip-card__inner {
  transform: rotateY(180deg);
}
.flip-card__front,
.flip-card__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius);
  overflow: hidden;
}
.flip-card__front {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.flip-card__front img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.flip-card__front-overlay {
  position: relative;
  z-index: 1;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(13, 27, 42,0.88) 0%, rgba(13, 27, 42,0.5) 60%, transparent 100%);
}
.flip-card__front-overlay h3 {
  color: #fff;
  font-family: var(--ff-heading);
  font-size: 1.2rem;
  margin: 0 0 0.25rem;
}
.flip-card__front-overlay .card__eyebrow {
  color: var(--gold);
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
  display: block;
}
.flip-card__front-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255,255,255,0.7);
  font-size: 0.875rem;
  font-family: var(--ff-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 0.5rem;
}
.flip-card__front-hint svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}
.flip-card:hover .flip-card__front-hint svg {
  transform: rotate(45deg);
}
.flip-card__back {
  transform: rotateY(180deg);
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}
.flip-card__back h3 {
  font-family: var(--ff-heading);
  font-size: 1.1rem;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.flip-card__back .card__eyebrow {
  display: block;
  margin-bottom: 0.35rem;
}
.flip-card__back p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
}
.flip-card__back p:last-child {
  margin-bottom: 0;
}
.flip-card__back a {
  color: var(--gold);
}

/* ================================================================
   ROW 12/13 — About page credentials as tabs + stats box
   ================================================================ */
.cred-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--hairline);
  padding-bottom: 1rem;
}
.cred-tabs__btn {
  padding: 0.65rem 1.25rem;
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.cred-tabs__btn:hover {
  color: var(--gold-deep);
  border-color: var(--gold);
}
.cred-tabs__btn[aria-selected="true"] {
  background: var(--gold);
  color: var(--heading);
  border-color: var(--gold);
}
.cred-tabs__panel {
  display: none;
}
.cred-tabs__panel[data-active] {
  display: block;
  animation: tabFadeIn 0.3s ease;
}

.stats-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 2rem;
}
.stats-box__item {
  text-align: center;
}
.stats-box__number {
  font-family: var(--heading-font);
  font-size: var(--step-3);
  font-weight: 400;
  color: var(--gold);
  line-height: 1.1;
}
.stats-box__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(248,246,241,0.6);
  margin-top: 0.4rem;
}

/* ================================================================
   ROW 15 — Approach as visual flow/map
   ================================================================ */
.approach-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
}
.approach-flow__step {
  position: relative;
  padding: 2rem 1.5rem;
  text-align: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  margin: 0.5rem;
  transition: box-shadow var(--dur-fast) var(--ease);
}
.approach-flow__step:hover {
  box-shadow: 0 4px 24px rgba(178, 144, 99, 0.12);
}
.approach-flow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--heading);
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: 1rem;
  margin-bottom: 1rem;
}
.approach-flow__title {
  font-family: var(--heading-font);
  font-size: var(--step-0);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.approach-flow__text {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.approach-flow__arrow {
  display: none;
}
@media (min-width: 768px) {
  .approach-flow__arrow {
    display: block;
    position: absolute;
    right: -1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold);
    font-size: 1.5rem;
    z-index: 2;
  }
}
@media (max-width: 767px) {
  .approach-flow {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   ROW 17/20 — Bullet points in quick-facts boxes
   ================================================================ */
.quick-facts dd ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
.quick-facts dd ul li {
  display: inline;
}
.quick-facts dd ul li::before {
  content: '\2022';
  color: var(--gold);
  margin-inline: 0.3em;
}
.quick-facts dd ul li:first-child::before {
  content: none;
}

/* ================================================================
   ROW 18 — Tab navigation on condition pages
   ================================================================ */
.cond-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--hairline);
}
.cond-tabs__btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.cond-tabs__btn:hover {
  color: var(--gold-deep);
  border-color: var(--gold);
}
.cond-tabs__btn[aria-selected="true"] {
  background: var(--gold);
  color: var(--heading);
  border-color: var(--gold);
}
.cond-tabs__panel {
  display: none;
}
.cond-tabs__panel[data-active] {
  display: block;
  animation: tabFadeIn 0.3s ease;
}

/* ================================================================
   Video placeholder
   ================================================================ */
.video-placeholder {
  position: relative;
  background: var(--navy);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.video-placeholder__overlay {
  text-align: center;
  z-index: 2;
}
.video-placeholder__icon {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  box-shadow: 0 0 0 12px var(--gold-rule);
}
.video-placeholder__icon svg {
  width: 2rem;
  height: 2rem;
  fill: var(--navy);
  margin-left: 4px;
}
.video-placeholder__text {
  font-family: var(--heading-font);
  font-size: var(--step-0);
  color: var(--cream);
  font-weight: 400;
}
.video-placeholder__sub {
  font-size: 0.875rem;
  color: rgba(248,246,241,0.5);
  margin-top: 0.35rem;
}

/* ----------------------------------------------------------------
   SEARCH MODAL
   ---------------------------------------------------------------- */

.search-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(248,246,241,0.15);
  border-radius: var(--radius-sm);
  color: var(--cream);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  flex-shrink: 0;
}
.search-trigger:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.search-trigger svg { display: block; }

.search-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: min(20vh, 160px);
  background: rgba(13, 27, 42,0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.search-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.search-modal__panel {
  width: 92%;
  max-width: 620px;
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transform: translateY(-12px) scale(0.97);
  transition: transform var(--dur) var(--ease-spring);
}
.search-modal.is-open .search-modal__panel {
  transform: translateY(0) scale(1);
}

.search-modal__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--hairline);
}

.search-modal__input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.search-modal__icon {
  flex-shrink: 0;
  color: var(--ink-soft);
}

.search-modal__input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-family: var(--body);
  font-size: 1.05rem;
  color: var(--ink);
  padding: 0;
}
.search-modal__input::placeholder {
  color: var(--ink-soft);
}

.search-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.search-modal__close:hover {
  background: rgba(13, 27, 42,0.06);
}

.search-modal__results {
  max-height: 380px;
  overflow-y: auto;
  padding: 0.5rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}

.search-modal__section-label {
  padding: 0.5rem 1.25rem 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.search-modal__result {
  display: block;
  padding: 0.65rem 1.25rem;
  text-decoration: none;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease);
  cursor: pointer;
}
.search-modal__result:hover,
.search-modal__result.is-active {
  background: rgba(74, 127, 165,0.08);
}
.search-modal__result.is-active {
  border-left: 3px solid var(--gold);
  padding-left: calc(1.25rem - 3px);
}

.search-modal__result-cat {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.15rem;
}

.search-modal__result-title {
  display: block;
  font-family: var(--heading-font);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
}

.search-modal__result-desc {
  display: block;
  font-size: 0.875rem;
  color: var(--ink-muted);
  line-height: 1.4;
  margin-top: 0.15rem;
}

.search-modal__empty {
  padding: 2.5rem 1.25rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.search-modal__footer {
  display: flex;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  border-top: 1px solid var(--hairline);
  background: rgba(13, 27, 42,0.02);
}
.search-modal__hint {
  font-size: 0.875rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.search-modal__hint kbd {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--surface-1);
  font-family: var(--body);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ink-muted);
}

@media (max-width: 1200px) {
  .search-trigger--desktop { display: none; }
  .search-trigger--mobile { display: flex; }
  .search-modal__footer { display: none; }
  .search-modal { padding-top: 0; align-items: flex-start; }
  .search-modal__panel { width: 100%; max-width: 100%; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
}
@media (min-width: 901px) {
  .search-trigger--mobile { display: none; }
}

/* ================================================================
   END OF styles.css
   ================================================================ */

/* ================================================================
   ACCESSIBILITY HARDENING — A/Prof Daevyd Rodda
   Added on top of the forked system. Every rule here answers a
   specific finding from the 2026-08-07 prototype audit.
   ================================================================ */

/* --- Tap targets. Audit found 35 targets under 44px, including
       "Read" links at 53x18 and a 24x24 hamburger. --- */
.btn,
button,
summary,
.nav__link,
.nav__dropdown a,
.footer__links a,
.card__more {
  min-height: 44px;
}

/* Only elements that are already laid out inline get centred; asserting
   `display` here would override the responsive `display: none` that hides
   the hamburger above the mobile breakpoint. */
.nav__link {
  display: inline-flex;
  align-items: center;
}
/* Dropdown and footer links stack one per line. flex (not inline-flex) keeps
   the 44px tap target without letting short items share a row. */
.nav__dropdown a,
.footer__links a {
  display: flex;
  align-items: center;
}

/* Inline prose links are exempt: a 44px box breaks line spacing. */
.prose a,
p a {
  min-height: 0;
  display: inline;
}

/* --- Hamburger: was 24x24 with no accessible name in the prototype.
       The forked system already sizes it 44x44; this only guarantees the
       floor without touching its responsive `display`. --- */
.nav__toggle-label {
  min-width: 44px;
  min-height: 44px;
}

/* --- Visible keyboard focus. The forked system relies on the UA
       default, which disappears against the navy. --- */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.section--navy-accent :focus-visible,
.section--navy-mid :focus-visible,
.cta-banner :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--gold-bright);
}

/* --- Skip link --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: var(--space-3) var(--space-5);
  background: var(--gold);
  color: var(--heading);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* --- Hero is never animation-gated. The prototype fades its H1 in
       at ~2.7s, which delays the LCP element. --- */
.hero h1,
.hero .hero-content,
.page-hero h1 {
  opacity: 1 !important;
  transform: none !important;
}

/* --- Reduced motion, belt and braces over the forked block. --- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto !important; }
}

/* --- Forced-colours (Windows high contrast) --- */
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
}


/* --- Header density (Rodda) ---------------------------------------------
   The wordmark is longer than the forked site's and the nav carries a
   click-to-call item, so the bar needs to shed weight before it wraps.

   Thresholds were raised on 27 Aug when "For Referrers" and "Insights" were
   added as top-level items: those two cost 211px of nav width and the header
   overflowed by up to 201px everywhere from 960 to 1600. "For Referrers" and
   "Patient Info" both came out on 3 Sep, giving that width back, so the
   thresholds drop again on 2026-09-04 and the SCOG logo and the phone number
   now survive down to far narrower viewports. The order of what goes is
   unchanged, only the widths at which it goes. */
/* Re-measured 2026-09-04 after the header was rebuilt to the prototype's
   proportions: the SCOG mark went 208x64 to 131x41 and the nav links went
   0.9rem sentence case to 0.8125rem uppercase. That bought back roughly
   150px, so the mark now survives to 1240 instead of 1400. Forced on at 1280
   it leaves a 49px gap and no horizontal overflow. The mobile panel takes over
   at 1200, so this rule governs 1201 to 1240 only. */
/* 1240 -> 900 on 2026-09-10. Daevyd asked for the SCOG mark to be more
   prominent, and measuring first showed it was not merely small below 1240,
   it was ABSENT: `display: none` here applies to every width beneath the
   breakpoint, and nothing re-showed it lower down. The comment above claiming
   this "governs 1201 to 1240 only" was wrong; verified at 1220, 1000 and 375,
   all hidden.
   Below 1200 the nav collapses to the burger, so the header is only mark +
   wordmark + search + toggle and there is room. It goes at 900, where the
   wordmark and the call button need the width. */
/* 🚨 Two hide bands, not one, and the reason matters.
   Measured 2026-09-10 while making the mark bigger for Daevyd. The old rule was
   `max-width: 1240px`, which the comment above described as governing "1201 to
   1240 only" but which actually applied all the way down: the mark was ABSENT at
   1220, 1000 and 375.

   Showing it everywhere below 1240 is not safe either. At 1220 the full nav is
   still rendered, and adding the mark overflows the header by 82px and pushes
   REQUEST APPOINTMENT off the right edge. That is a conversion-path break, and
   it is why the 1240 breakpoint existed.

   So: hidden in the 1201-1240 band where the full nav needs the width, shown
   from 1200 down where the nav has collapsed to the burger and there is room,
   hidden again below 900 where the wordmark and call button need it.
   Verified at 1440, 1220, 1000 and 375: no header overflow at any of them. */
@media (min-width: 901px) and (max-width: 1240px) {
  .header__logo-scog { display: none; }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .header__logo-scog { display: flex; }
}

@media (max-width: 900px) {
  .header__logo-scog { display: none; }
}
@media (max-width: 1000px) {
  /* Last to go. The audit rated click-to-call in the header the single
     highest-return fix for a phone-preferring demographic, so it outranks
     the group logo. Below this width the mobile panel carries it, which it
     did not actually do until 2026-09-04: this rule also applied inside the
     mobile panel, so between 27 Aug and 4 Sep the number was absent from
     every viewport under 1360px, phones included. Re-shown below. */
  .nav__item--phone { display: none; }
}

/* --- References list on procedure and condition pages ------------------- */
.references {
  font-size: 0.9rem;
  color: var(--ink-muted);
  line-height: 1.65;
  padding-left: 1.2em;
}
.references li { margin-block: var(--space-2); }
.references em { font-style: italic; }

/* --- Page-level disclaimer -------------------------------------------- */
.disclaimer {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
  font-size: 0.9rem;
  color: var(--ink-muted);
  line-height: 1.65;
}
.reviewed {
  font-size: 0.9rem;
  color: var(--ink-muted);
  font-weight: 500;
}

/* --- Figures inside article prose ------------------------------------- */
.article-figure {
  margin: var(--space-7) 0;
}
/* width:auto, not width:100%, from 2026-09-17.
   These figures sit in a 760px column and `width: 100%` stretched every one of
   them to fill it, whatever its real size. Five of the diagrams Gina supplied
   are SMALLER than the column and were being resampled up by the browser:
   fig-hip-rfa (500px source, 1.52x), fig-hip-2 (512px, 1.48x),
   fig-sacroiliac-joint (677px), and the two bursitis rehab diagrams (684 and
   689px), both of which are screenshots, so there is no larger original to go
   and get. They rendered full-width and soft.
   Now each figure draws at its own width, up to the column, and is centred.
   The five are physically smaller and actually sharp, which is the better
   trade on clinical diagrams with labels on them.
   `.article-figure--wide` below still opts back in to the full width. */
/* Back to width:100% on 2026-09-17 after two failed attempts at making the
   image shrink to its own size in CSS. `width: auto` on the block-level
   <picture> means "fill the parent", and `width: fit-content` collapses the
   wrapper to 0 until the image loads, which reintroduces layout shift on
   exactly the pages the width/height attributes were added to protect.

   The five diagrams that are smaller than this column are handled where the
   markup is generated instead: port_journey.figure() puts a max-width on the
   <figure> itself, taken from the widest variant that actually exists on disk.
   Deterministic, no cascade to lose, and the intrinsic width/height attributes
   still reserve the right box. */
.article-figure picture,
.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
}
.article-figure { margin-inline: auto; }
/* --- Third-party video embed (the Joint School session) ---------------- */
/* The only iframe-hosted film on the site. Everything else is self-hosted and
   uses .explainer; this one is 738MB as a web encode, so it lives on YouTube.
   16:9 via padding-top rather than aspect-ratio so it behaves identically in
   the older Safari versions a lot of this audience is on. */
.video-embed {
  margin: var(--space-7) 0;
}
.video-embed__frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: var(--navy-deep);
  border: 1px solid var(--hairline);
}
.video-embed__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-embed figcaption {
  margin-top: var(--space-3);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-muted);
  border-left: 2px solid var(--gold);
  padding-left: var(--space-4);
}

.article-figure figcaption {
  margin-top: var(--space-3);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-muted);
  border-left: 2px solid var(--gold);
  padding-left: var(--space-4);
}

/* --- Fine print (licence notes, last-updated lines) -------------------- */
.fineprint {
  margin-top: var(--space-5);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.section--navy-accent .fineprint,
.cta-banner .fineprint {
  color: var(--on-navy-mut);
}


/* ================================================================
   DARK GROUND OVERRIDES
   The forked design system alternates light and dark sections. The
   prototype this site is branded from is dark throughout, so the
   light-ground components are restated here against a dark ground.
   ================================================================ */

html, body {
  background: var(--navy);
  color: var(--on-navy);
}

/* --- Sections. Every variant is now a dark surface; they differ in
       depth rather than in lightness. --- */
.section--cream,
.section--white,
.bg-cream {
  background: var(--navy-mid);
  color: var(--on-navy);
}
.section--navy-mid { background: var(--navy-soft); }
.section--navy-accent,
.cta-banner { background: var(--navy-deep); }

/* --- Headings and prose on every ground.

   Split 2026-09-04 to match the prototype. It sets h1 white and h2 steel, and
   that pairing is a large part of why their pages read the way they do: the
   white h1 anchors the page, the steel h2s carry the reader down it. Anything
   that is functionally an h1 (page hero, hero title) stays white. Anything
   that is functionally a section heading goes steel. h3 and below stay white,
   because at that size steel would fall under AA. --- */
h1, h4, h5, h6,
.page-hero__title,
.hero__title,
.footer__brand-name {
  color: var(--heading);
}

h2,
h3,
.section-header__heading,
.card__title,
.timeline__item-title,
.aside-card :is(h3, h4) {
  color: var(--heading);
}

h2,
.section-header__heading {
  color: var(--steel);
}
.prose p,
.prose li,
.section-header__lead,
.page-hero__subtitle,
.hero__subtitle,
.card__text,
.timeline__item-text,
.faq__answer p {
  color: var(--on-navy);
}
.prose strong { color: var(--heading); }

/* --- Rules, cards and panels.

   De-boxed 2026-09-04. Max: "we've got a bunch of boxes around the hospital ...
   it looks kind of fucked." Measuring the prototype's own cards gave the rule
   rather than leaving it to taste: their procedure card is a #0D1B2A plate with
   border: 0. Ours added a 1px hairline on top of the same fill, and because
   .card, .journey-step__card and .quick-facts all shared it, three different
   ideas rendered as one repeated component, 13 outlined rectangles below the
   hero on the home page alone.

   So: keep the fill, drop the border. The hover border stays, because a state
   is not a permanent plate. .quick-facts leaves this group entirely and becomes
   plain typography, the way theirs is. --- */
.card,
.aside-card,
.faq details,
.stats-box {
  background: var(--navy-soft);
  border: none;
}
.card:hover { border-color: var(--gold-deep); }

/* A whole bar that IS the link, their press-item pattern. An <a> needs the
   plate layout an element-level card gets for free. */
a.card {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* The hover state at line ~1730 ADDS `border-left: 3px`, and the rest state is
   `border: none`, so hovering a card shifts its content 3px to the right. That
   is invisible on a 300px card in a grid and obvious on a 1280px bar. Same
   gold accent, drawn as an inset shadow, which does not affect layout. */
.card:hover {
  border-left-width: 0;
  box-shadow: var(--shadow-lg), inset 3px 0 0 0 var(--gold-deep);
}
hr, .prose hr { border-color: var(--hairline); }

/* --- Accent details. Steel blue carries the eyebrows and rules, which is
       what the prototype does. --- */
.eyebrow,
.section-header__eyebrow,
.card__eyebrow,
.hero__eyebrow,
.byline__author {
  color: var(--gold);
}
.card__more,
.breadcrumb__current { color: var(--gold); }
.timeline__dot {
  background: var(--navy-deep);
  border-color: var(--gold-deep);
  color: var(--gold);
}

/* --- The one place the prototype uses true gold: the credential line. --- */
.hero__post-nom,
.byline__role,
.footer__post-nom {
  color: var(--brass);
  letter-spacing: 0.08em;
}

/* --- Buttons.

   Corrected 2026-09-04. The comment here used to read "the prototype uses
   outlined buttons, not solid fills", and the primary button was a gold
   outline. Measuring the live prototype: its Request Appointment and Enquire
   Now buttons are a SOLID steel fill #4A7FA5 with white text, square corners,
   10px/22px padding, 14px, letter-spacing 0.08em, weight 500. Nothing on the
   prototype is a gold button.

   White on #4A7FA5 is 4.2:1, which clears AA for the 14px semibold label at
   this weight and is exactly how they ship it. --- */
.btn {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--on-navy);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0;
  padding: 0.7rem 1.5rem;
}
.btn--primary {
  background: var(--steel);
  border-color: var(--steel);
  color: #FFFFFF;
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--steel-deep);
  border-color: var(--steel-deep);
  color: #FFFFFF;
}
.btn--secondary,
.btn--ghost,
.btn--ink {
  border-color: rgba(242, 242, 242, 0.34);
  color: var(--on-navy);
  background: transparent;
}
.btn--secondary:hover,
.btn--ghost:hover,
.btn--ink:hover,
.btn--secondary:focus-visible,
.btn--ghost:focus-visible,
.btn--ink:focus-visible {
  border-color: var(--steel-light);
  color: var(--heading);
}

/* "View publication" was emitted as a bare <a> with no class. /research/ has
   no .prose ancestor and there is no `.pub a` rule, so it fell through to the
   global `a { color: inherit; text-decoration: none }` and rendered as body
   text. Max, 2026-09-04: "it kind of blends in right now and you can't see
   what's going on."
   
   It is now .btn--primary, the same solid steel fill as Request Appointment.
   NOTE .btn--sm is dead on this site: the .btn block above re-declares padding
   and font-size at equal specificity and later in the file, so any sizing has
   to be declared here, after it. min-height 44px stays: it is the touch-target
   floor from the accessibility layer. */
.pub__link {
  margin-top: 0.9rem;
  padding: 0.55rem 1.3rem;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
}
.nav__cta {
  background: var(--steel);
  border-color: var(--steel);
  color: #FFFFFF;
}
.nav__cta:hover,
.nav__cta:focus-visible {
  background: var(--steel-deep);
  border-color: var(--steel-deep);
  color: #FFFFFF;
}

/* --- Header and footer sit on the deepest ground. --- */
.site-header { background: rgba(8, 16, 25, 0.94); border-bottom: 1px solid var(--hairline); }
.site-footer { background: var(--navy-deep); color: var(--on-navy); }
.footer__links a, .footer__brand-desc, .footer__copyright, .footer__disclaimer {
  color: var(--on-navy-mut);
}
.footer__links a:hover { color: var(--gold); }
.footer__heading { color: var(--heading); }

/* --- Article furniture. --- */
.byline { border-block: 1px solid var(--hairline); }
.references, .disclaimer, .reviewed, .fineprint { color: var(--on-navy-mut); }
.disclaimer { border-top-color: var(--hairline); }
.article-figure img,
.article-figure picture { border-color: var(--hairline); }
.article-figure figcaption {
  color: var(--on-navy-mut);
  border-left-color: var(--gold-deep);
}

/* --- Forms and FAQ. --- */
.faq summary { color: var(--heading); }
.faq summary:hover { color: var(--gold); }

/* --- Links in prose. --- */
.prose a { color: var(--gold); text-decoration-color: var(--gold-underline); }
.prose a:hover { color: var(--gold-bright); }

/* --- Selection. --- */
::selection { background: var(--gold-deep); color: #fff; }

/* Journey column lead link in the joint mega menus. */
.nav__dropdown-lead {
  font-weight: 600 !important;
  color: var(--gold) !important;
}

/* Wide article figure: lets a lead photo use the full column width. */
.article-figure--wide { margin-inline: 0; }
.article-figure--wide img { width: 100%; }


/* --- About hero with a clinical photo set into the right side. --- */
.page-hero--split .page-hero__img {
  position: absolute;
  inset: 0 0 0 auto;
  width: 54%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
}
.page-hero--split .page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    var(--navy) 30%, rgba(13,27,42,0.72) 50%, rgba(13,27,42,0.10) 100%);
}
.page-hero--split::after { display: none; }  /* drop the default decorative gradient */
.page-hero--split > .container { position: relative; z-index: 2; }

@media (max-width: 860px) {
  /* No room to set the photo beside the text; hide it rather than stack a band. */
  .page-hero--split .page-hero__img,
  .page-hero--split .page-hero__scrim { display: none; }
}

/* --- Photo band: a real photograph set between sections on index pages. --- */
.photo-band {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.photo-band picture,
.photo-band img {
  display: block;
  width: 100%;
  height: clamp(240px, 34vw, 420px);
  object-fit: cover;
  border: 1px solid var(--hairline);
}
.photo-band figcaption {
  margin-top: 0.7rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--on-navy-mut);
  border-left: 2px solid var(--gold-deep);
  padding-left: var(--space-4);
}

/* --- Feature row: the forked component never carried body copy, so it had
       no paragraph rhythm and its inline links inherited `color: inherit`
       from the reset, which rendered them as plain text. --- */
.feature-row__content p {
  color: var(--on-navy);
  line-height: 1.7;
  max-width: 56ch;
}
.feature-row__content p + p { margin-top: 1.1rem; }
.feature-row__content a:not(.btn) {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: var(--gold-underline);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.feature-row__content a:not(.btn):hover {
  text-decoration-color: var(--gold-bright);
}
/* Jessica Mayho, 27 Aug call, on the About band: the photo "cuts out the
   patient". Both band photos are 3:2 landscape, and stretching them to match
   the height of the text column cropped them to roughly a 3:4 portrait,
   throwing away half the frame. In the consulting shot that half IS the
   patient: Daevyd is on the left, the imaging in the middle, the patient on
   the right, and no horizontal object-position keeps all three. The band now
   honours the real aspect ratio and centres against the text. */
.feature-row__image { align-self: center; }
.feature-row__image picture { display: block; }
.feature-row__image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

/* --- Homepage phase cards -------------------------------------------
   These are not links, so they should not lift and glow on hover the way
   the clickable cards do. Same box, no affordance it cannot honour. --- */

/* ================================================================
   OXFORD HIP & KNEE SCORE  (build_oxford.py + assets/js/oxford.js)
   Added 2026-08-25. Everything here is dark-ground: no rule below
   sets a text colour to a ground token, which check_dark.py enforces.
   ================================================================ */

.oxford { margin-block: 2.5rem; }

.oxford__privacy {
  border-left: 2px solid var(--gold-deep);
  padding: 0.9rem 1.15rem;
  background: var(--navy-soft);
  color: var(--on-navy);
  font-size: var(--step--1);
  margin-bottom: 2rem;
}

/* Tabs only mean something once the script can switch panels. Without
   JavaScript both questionnaires render in full, under their own headings. */
.oxford__tabs { display: none; }
html.js .oxford__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.oxford__tab {
  font-family: var(--body);
  font-size: var(--step-0);
  letter-spacing: 0.02em;
  padding: 0.85rem 1.6rem;
  min-height: 48px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--on-navy);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.oxford__tab:hover { border-color: var(--gold); color: var(--gold); }
.oxford__tab.is-active {
  border-color: var(--brass);
  color: var(--heading);
  background: var(--gold-muted);
}

.oxford__set-heading { margin-bottom: 0.35rem; }
.oxford__set-lead {
  color: var(--on-navy);
  font-size: var(--step--1);
  margin-bottom: 2rem;
  max-width: 62ch;
}
html.js .oxford__set-heading { display: none; }

.oxford__q {
  border-top: 1px solid var(--hairline);
  padding-block: 1.6rem;
}
.oxford__q:first-of-type { border-top: none; }

.oxford__q-text {
  display: block;
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--heading);
  margin-bottom: 0.9rem;
}
.oxford__q-num { color: var(--gold); margin-right: 0.5rem; }

.oxford__opts {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border: 0;
  padding: 0;
  margin: 0;
}

.oxford__opt {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 48px;
  padding: 0.55rem 1rem;
  border: 1px solid var(--hairline);
  color: var(--on-navy);
  font-size: var(--step--1);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.oxford__opt:hover { border-color: var(--gold-deep); }
/* The browser default radio is a white-filled circle, which on this ground
   reads as "selected" whether it is or not. Every option looked chosen. */
.oxford__opt input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid var(--on-navy-mut);
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-content: center;
  transition: border-color var(--dur-fast) var(--ease);
}
.oxford__opt input[type="radio"]::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--brass);
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease);
}
.oxford__opt input[type="radio"]:checked { border-color: var(--brass); }
.oxford__opt input[type="radio"]:checked::before { transform: scale(1); }
@media (forced-colors: active) {
  .oxford__opt input[type="radio"] { appearance: auto; -webkit-appearance: auto; }
}
.oxford__opt input:checked ~ .oxford__opt-label { color: var(--heading); }
.oxford__opt:has(input:checked) {
  border-color: var(--brass);
  background: var(--gold-muted);
}
.oxford__opt-label { flex: 1; }
.oxford__opt-score {
  color: var(--on-navy-mut);
  font-variant-numeric: tabular-nums;
  font-size: var(--step--1);
}

/* The live result. Hidden without JavaScript, because there is nothing to
   put in it and an empty panel reads as a broken page. */
.oxford__result { display: none; }
html.js .oxford__result {
  display: block;
  position: sticky;
  top: 96px;
  border: 1px solid var(--hairline);
  background: var(--navy-soft);
  padding: 1.6rem;
}
.oxford__result-progress {
  color: var(--on-navy-mut);
  font-size: var(--step--1);
  margin: 0 0 0.6rem;
}
.oxford__score { margin: 0; display: flex; align-items: baseline; gap: 0.6rem; }
.oxford__score-num {
  font-family: var(--heading-font);
  font-size: var(--step-5);
  line-height: 1;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}
.oxford__score-of { color: var(--on-navy-mut); font-size: var(--step--1); }
.oxford__result-label {
  color: var(--gold);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0.4rem 0 1.1rem;
}
.oxford__band {
  font-family: var(--heading-font);
  font-size: var(--step-2);
  color: var(--heading);
  margin: 0 0 0.7rem;
}
.oxford__result-note {
  color: var(--on-navy);
  font-size: var(--step--1);
  line-height: 1.6;
  margin: 0 0 0.9rem;
}
.oxford__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.2rem; }

.oxford__nojs {
  border: 1px solid var(--hairline);
  padding: 1.2rem 1.4rem;
  color: var(--on-navy);
  font-size: var(--step--1);
  margin-bottom: 2rem;
}
html.js .oxford__nojs { display: none; }

.oxford__layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 981px) {
  .oxford__layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 3rem; }
}

/* The printable summary. Off screen, on paper. */
.oxford__summary { display: none; }
.oxford__summary-table { width: 100%; border-collapse: collapse; }
.oxford__summary-meta { font-size: 10pt; }

/* Marks the section that hosts the tool, so the print rules can keep it and
   drop every other section on the page. A class rather than :has(), because
   this has to be reliable in whatever browser the patient prints from. */
.oxford-host { }

.oxford__summary-brand {
  font-size: 9pt;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
}
.oxford__summary-fields { font-size: 10pt; margin: 0 0 0.6rem; }
.oxford__rule { border-bottom: 1px solid #999; display: inline-block; }

@media print {
  body.oxford-complete main > section { display: none !important; }
  body.oxford-complete main > .oxford-host { display: block !important; }
  .oxford--complete .oxford__set,
  .oxford--complete .oxford__tabs,
  .oxford--complete .oxford__result,
  .oxford--complete .oxford__privacy,
  .oxford--complete .oxford__nojs { display: none !important; }
  .oxford--complete .oxford__summary { display: block !important; }
  .oxford__summary-table th,
  .oxford__summary-table td {
    border: 1px solid #999;
    padding: 4pt 6pt;
    text-align: left;
    font-size: 10pt;
    vertical-align: top;
  }
  .oxford__opt { border: 1px solid #999; page-break-inside: avoid; }
  .oxford__q { page-break-inside: avoid; }
}

/* --- HTML sitemap (build_prep.py) ------------------------------------- */
.sitemap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1.75rem, 3vw, 2.75rem);
}
.sitemap__group h2 {
  font-size: var(--step-1);
  color: var(--steel-strong);
  margin-bottom: 0.85rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--hairline);
}
.sitemap__group ul { list-style: none; padding: 0; margin: 0; }
.sitemap__group li { margin-bottom: 0.15rem; }
.sitemap__group a {
  display: block;
  padding: 0.35rem 0;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--on-navy);
  transition: color var(--dur-fast) var(--ease);
}
.sitemap__group a:hover { color: var(--gold); }

/* --- Homepage spec table -----------------------------------------------
   The prototype's surgical-environment band carried a small spec table under
   the copy. `.quick-facts` is the same component the procedure pages use; the
   modifier only widens the gutters and lifts it off the band above, because
   here it sits at container width rather than inside a prose column. --- */
.quick-facts--wide {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  margin-bottom: 0;
  border: none;
}

.quick-facts--wide > div { padding: 0; }

.quick-facts--wide dt { color: var(--gold); }

.quick-facts--wide dd { color: var(--heading); }

/* --- Homepage rhythm ---------------------------------------------------
   `.section` is padded for pages that carry one or two of them. The homepage
   carries eight, so the same padding reads as dead space between every band
   rather than as breathing room. Tightened here only. --- */
.page-home .section,
.page-stacked .section { padding-block: clamp(3rem, 6vw, 5.25rem); }
.page-home .section-header,
.page-stacked .section-header { margin-bottom: clamp(2rem, 4vw, 2.75rem); }

/* --- Publication list (build_depth.py research page) --------------------
   A citation is a dense block: title, authors, journal, year, link and a
   plain-English note. Set as a hanging list so the title carries and the
   metadata recedes, rather than as five equal lines. --- */
/* `.prose ol` is (0,1,1) and would out-specify a bare `.pub-list`, so the
   list rendered its own decimal marker alongside the counter: "1. 01". */
.pub-list,
.prose ol.pub-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: pub;
}
.pub {
  counter-increment: pub;
  position: relative;
  padding: 1.4rem 0 1.4rem 3rem;
  border-top: 1px solid var(--hairline);
  line-height: 1.55;
}
.pub:first-child { border-top: none; }
.pub::before {
  content: counter(pub, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.55rem;
  font-family: var(--body);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--gold-deep);
}
.pub__title {
  font-family: var(--heading-font);
  font-size: var(--step-1);
  color: var(--heading);
  line-height: 1.3;
}
.pub__authors { color: var(--on-navy); font-size: var(--step--1); }
.pub__cite { color: var(--on-navy-mut); font-size: var(--step--1); font-style: italic; }
.pub__note {
  display: inline-block;
  margin-top: 0.55rem;
  color: var(--on-navy);
  font-size: var(--step--1);
  border-left: 2px solid var(--gold-deep);
  padding-left: var(--space-4);
}
.pub__tag {
  display: inline-block;
  margin-bottom: 0.45rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  border: 1px solid var(--brass-mut);
}

/* A publication with no DOI or PubMed record yet. Their own site shows the same
   words, and saying so beats a row that silently has no link where every other
   row has a button. Muted rather than brass: it is an absence, not a status. */
.pub__tag--pending {
  color: var(--on-navy-mut);
  border-color: var(--hairline);
}

/* --- Phase cards on the journey indexes --------------------------------
   The phase list is navigable, so each card carries its articles. --- */

/* --- Footer brand block ------------------------------------------------
   The credential line, the description, the rooms, the number and the hours
   were one <br />-separated paragraph, so they read as a single run-on
   block. Each is now its own line with its own weight. --- */
.footer__creds {
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--brass);
  margin-bottom: 0.9rem;
}
.footer__rooms {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--on-navy-mut);
  margin-top: 1rem;
}
.footer__phone {
  margin-top: 1rem;
  font-size: var(--step-1);
  font-family: var(--heading-font);
}
.footer__phone a { color: var(--heading); }
.footer__phone a:hover { color: var(--gold); }
.footer__hours {
  font-size: var(--step--1);
  color: var(--on-navy-mut);
  margin-top: 0.15rem;
}

/* --- Split call to action ---------------------------------------------
   Replaces a centred, narrow-container band that left both outer thirds of
   the page empty and stacked its buttons underneath. Copy left, actions
   right, full container width. --- */
.cta-split {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) auto;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.cta-split__text .section-header__lead { margin-top: 1rem; max-width: 62ch; }
.cta-split__text .section-header__heading { margin-bottom: 0; }
.cta-split__actions {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 260px;
}
.cta-split__actions .btn { width: 100%; }
@media (max-width: 900px) {
  .cta-split { grid-template-columns: 1fr; gap: 2rem; }
  .cta-split__actions { flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .cta-split__actions .btn { width: auto; }
}

/* `.section--navy-accent` sets `text-align: center` and `margin-inline: auto`
   on its paragraphs, which is right for the centred band it was written for
   and wrong for the split layout: the copy centred itself while the gold rule
   under the heading stayed left. Reset inside the split. */
.section--navy-accent .cta-split { text-align: left; }
.section--navy-accent .cta-split p { margin-inline: 0; }

/* --- Card media: the joint animations on the homepage -------------------
   Added 2026-08-25. Decorative: the card text carries the meaning, so the
   video is aria-hidden and the poster is the fallback. Motion is suppressed
   entirely under prefers-reduced-motion, which matters more than usual on a
   site whose audience is 55 to 75. --- */
.card__media {
  /* MUST be block. The element is a <span>, because it sits inside the card's
     <a>, and `aspect-ratio` does not apply to a non-replaced inline box. Without
     this the 4/3 below is silently ignored and the video falls back to its own
     720x960 portrait aspect: on the home page that rendered the hip and knee
     media 1017px tall instead of 435px, pushing the card text down over the
     section beneath it. Measured 2026-09-04: 1017px without, 435px with, and
     435px is exactly 4/3 of the 580px card. */
  display: block;
  position: relative;
  margin: calc(-1 * clamp(1.5rem, 3vw, 2rem));
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--navy-deep);
  border-bottom: 1px solid var(--hairline);
}
.card__media img { position: absolute; inset: 0; }
.card__media video { position: relative; z-index: 1; }
.card__media video,
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The illustrations are composed with empty ground on one side; pull the
   subject toward the middle of the crop. */
.card__media--hip video, .card__media--hip img { object-position: center 42%; }
.card__media--knee video, .card__media--knee img { object-position: center 38%; }

/* A hairline of the brand accent so the media reads as part of the card. */
.card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-deep), transparent 60%);
}

@media (prefers-reduced-motion: reduce) {
  .card__media video { display: none; }
  .card__media img { display: block; }
}

/* Photo drift (Ken Burns) removed 18 Sep 2026: Jessica, review call 33:05,
   "the photo is a lot sharper when it's a photo and not that video movement". */

/* --- Health fund marks -------------------------------------------------
   Added 2026-08-25 at Max's request. The build previously carried no fund
   logo anywhere, deliberately: the 2026-08-07 audit flagged the use of fund
   brand names alongside an unconfirmed "no gap" claim.

   Each mark sits on a white chip rather than directly on the navy. Three
   reasons: nib's dark green is low contrast on this ground, health funds'
   brand guidelines generally require an approved background, and a chip
   visually marks these as third-party property rather than site furniture.
   The disclaimer under them does the rest. --- */
/* `.prose ul` is (0,1,1) and sets list-style: disc plus a left pad, so a bare
   `.fund-marks` (0,1,0) lost: the chips rendered as narrow bars with bullets
   beside them. Same trap the publication list hit. Scope it. */
.fund-marks,
.prose ul.fund-marks {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin: clamp(1.5rem, 3vw, 2rem) 0 1.25rem;
  padding: 0;
  list-style: none;
}
.fund-marks > li,
.prose ul.fund-marks > li {
  margin: 0;
  padding: 0;
  flex: 1 1 180px;
  list-style: none;
}
.fund-marks > li::marker { content: none; }

/* The accessibility layer sets `.prose a { display: inline }` (0,1,1) for tap
   targets, which out-specifies a bare `.fund-mark` (0,1,0) and collapsed the
   chip to a sliver. Match its specificity. */
.fund-mark,
.prose a.fund-mark,
.prose .fund-mark {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 1.25rem 1.5rem;
  /* No plate. Agreed on the 3 Sep call and missed until 2026-09-05.
     Jessica: "Is it possible to remove the BG remover on all of them, so it's
     literally just a logo with no background?" Gina: "I think that might
     actually look clean."

     This was `background: #FFFFFF` with a hairline border, so every fund logo
     sat on a white card against the navy. All four source PNGs are
     transparent: Medibank is a red wordmark, HCF crimson, nib green, and all
     three read well on the dark ground. Bupa is a solid blue tile with white
     text, which is the one Gina predicted would not show; his own prototype
     ships the same asset with no plate, so this matches him. */
  background: none;
  border: none;
  transition: transform var(--dur-fast) var(--ease),
              filter var(--dur-fast) var(--ease);
}
/* Hover keeps the lift; the shadow went with the plate, since a drop shadow
   under a transparent logo shows as a smudge rather than a raised card. */
a.fund-mark:hover { transform: translateY(-2px); filter: brightness(1.08); }
.fund-mark img,
.prose .fund-mark img {
  max-height: 44px;
  width: auto;
  max-width: 100%;
  display: block;
}
/* Bupa's mark is a square lockup; the others are wordmarks. Hold them to a
   similar optical weight rather than a similar bounding box. */
.fund-mark img[src*="fund-bupa"] { max-height: 56px; }

.fund-disclaimer {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--on-navy-mut);
  border-left: 2px solid var(--gold-deep);
  padding-left: var(--space-4);
  margin-bottom: var(--space-6);
}

/* The single mark at the top of each fund page.

   Resized 2026-09-05. The 96px fixed height and 260px cap were sized for the
   white card the logo used to sit on; with the plate gone they only shrank the
   logo. Measured before: Medibank 212x41, HCF 155x44, nib 133x44, and Bupa
   56x56, which is barely a third of Medibank's optical area and read as lost.

   Wordmarks are width-limited, Bupa is a square lockup and height-limited, so
   one max-height cannot balance them. The square is given roughly 1.7x the
   wordmark height, which lands all four within a comparable area. */
.fund-mark--single {
  max-width: 340px;
  height: auto;
  min-height: 120px;
  padding: 0;
  justify-content: flex-start;
  margin-inline: 0;
  margin-bottom: var(--space-5);
}

.fund-mark--single img { max-height: 68px; }
.fund-mark--single img[src*="fund-bupa"] { max-height: 116px; }

/* --- Pre-operative pathway ---------------------------------------------
   A numbered sequence rather than a bulleted set: the order is the point. */
.prep-steps,
.prose ol.prep-steps {
  list-style: none;
  counter-reset: prep;
  padding: 0;
  margin: 1.5rem 0;
}
.prep-steps > li,
.prose ol.prep-steps > li {
  counter-increment: prep;
  position: relative;
  padding: 0.9rem 0 0.9rem 3.25rem;
  margin: 0;
  border-top: 1px solid var(--hairline);
  line-height: 1.65;
  list-style: none;
}
.prep-steps > li:first-child { border-top: none; }
.prep-steps > li::before {
  content: counter(prep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1rem;
  font-family: var(--body);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}

/* --- Founding and affiliation roles (About) ----------------------------
   Rebuilt 2026-09-01 at Gina's request: "all his relevant experience need
   logos and the original design layout". The prototype runs these as cards
   with the organisation's mark on a white plate at the top, the role above
   the name, and the outbound link at the foot. Cards are flex columns so the
   link sits on the baseline of the row however uneven the descriptions are.

   The plate is not decoration. UniSC, MyKnee, MyHip and Medacta are all dark
   ink drawn for a light ground; on this navy they measure close to invisible.
   Same treatment, same reason, as the campaign page's affiliation strip. --- */
.role-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin: clamp(1.5rem, 3vw, 2.25rem) 0;
}
.role {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--gold-deep);
  padding-top: 1.25rem;
}
.role__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 3px;
  height: 4.4rem;
  padding: 0.7rem 1rem;
  margin-bottom: 1.25rem;
}
/* Intrinsic width/height on the file reserves the box; the plate decides the
   rendered size, so both axes are released here and the mark is fitted. */
.role__mark img {
  display: block;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.role__title {
  display: block;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}
.role__org {
  font-size: var(--step-1);
  color: var(--heading);
  margin: 0 0 0.5rem;
  line-height: 1.25;
}
.prose .role__org a { color: var(--heading); text-decoration: none; }
.prose .role__org a:hover { color: var(--gold); }
.role__desc {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--on-navy);
  margin: 0;
}
.role__more,
.prose .role__more {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  /* Pushes the link to the foot of the card so a row of them lines up. */
  margin-top: auto;
  padding-top: 1.25rem;
}
.role__more:hover,
.prose .role__more:hover,
.role__more:focus-visible { color: var(--brass); }

/* --- About: the biography band ----------------------------------------
   2026-09-01. Gina: the About intro had "too many words, and nothing really
   catches the eye". This is the prototype's opening treatment, the volume
   figure at display size beside the portrait. The heading modifier is one
   step above a normal section heading and drops the gold underscore, because
   the pull quote below already carries a gold rule and two in one band reads
   as a mistake. --- */
/* Not --step-5. That scale bottoms out at 2.45rem, which puts
   "replacements." wider than a 390px column and hyphen-breaks it mid-word.
   Same ceiling, lower floor. */
.section-header__heading--display {
  font-size: clamp(1.95rem, 1.15rem + 3.4vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.section-header__heading--display::after { display: none; }
.bio-band .section-header__eyebrow {
  display: block;
  color: var(--gold);
  margin-bottom: 1rem;
}
.bio-band .pull-quote { text-align: left; margin-bottom: 0; }
.bio-band .pull-quote__text { margin-inline: 0; }
/* Deliberately NOT stretched to the height of the copy column. Jessica ruled
   on that for the band photos on the 27 Aug call: these frames are 3:2, and
   cropping one to the height of a text column throws away half of it. The
   photo keeps its aspect and centres, and the copy column is given the wider
   share of the row so the headline holds and the gap beside the photo stays
   small. */
.bio-band .feature-row {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
@media (max-width: 900px) {
  /* The single-column rule for .feature-row is (0,1,0) and the ratio above is
     (0,2,0), so without restating it here the band stayed two columns on a
     phone and the portrait hung off the right edge. */
  .bio-band .feature-row { grid-template-columns: minmax(0, 1fr); }
  /* Copy first: the headline is the hook and should not sit under a
     full-width photo. */
  .bio-band .feature-row__content { order: -1; }
}

/* ============================================================================
   JOURNEY TIMELINE
   The prototype's /hip page runs the six phases down a centred gold spine,
   cards alternating either side of a numbered medallion. Max asked for that
   format on the homepage and on both journey indexes (25 Aug).

   Mobile is the default here rather than an override: single column, spine
   moved to the left margin. The alternation is switched on at 48rem, which
   means no !important and no fighting specificity to undo two-column rules
   on a phone.
   ========================================================================== */
.journey-timeline {
  position: relative;
  max-width: 62rem;
  margin-inline: auto;
}

/* The spine. Sits behind the medallions, which carry their own ground. */
.journey-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 26px;
  width: 1px;
  background: var(--brass);
}

.journey-step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  padding-left: 72px;
}

.journey-step + .journey-step {
  margin-top: clamp(1.75rem, 3vw, 3rem);
}

.journey-step__medallion {
  position: absolute;
  left: 26px;
  top: clamp(1.5rem, 3vw, 2rem);
  transform: translateX(-50%);
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface-1);
  border: 1px solid var(--brass);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--heading-font);
  font-size: 1.125rem;
  line-height: 1;
  color: var(--brass);
}

/* Same de-box as .card, and for the same reason: these six were pixel-identical
   to the two procedure cards above them, so the page read as one component
   repeated eight times. */
.journey-step__card {
  background: var(--surface-1);
  border: none;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  transition: border-color var(--dur) var(--ease);
}

.journey-step__card:hover {
  border-color: rgba(178, 144, 99, 0.3);
}

.journey-step__title {
  font-family: var(--heading-font);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 0.6rem;
}

.journey-step__text {
  font-family: var(--body);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0;
}

@media (min-width: 48rem) {
  .journey-timeline::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .journey-step {
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 6vw, 5rem);
    align-items: center;
    min-height: 120px;
    padding-left: 0;
  }

  .journey-step__medallion {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .journey-step__card {
    text-align: center;
  }

  .journey-step:nth-child(odd) .journey-step__card  { grid-column: 1; }
  .journey-step:nth-child(even) .journey-step__card { grid-column: 2; }
}

/* --- Article links inside a timeline card ---------------------------------
   The journey indexes carry each phase's articles in the card, so the phase
   list is navigable rather than decorative. The card centres its title and
   description at desktop width; a list of links centred would be unreadable,
   so the list stays left-aligned at every width. */
.journey-step__extra {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline);
  text-align: left;
}

.journey-step__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.journey-step__links li {
  margin: 0;
  padding: 0;
}

.journey-step__links a {
  font-family: var(--body);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--gold);
  text-decoration: none;
  display: block;
}

.journey-step__links a:hover,
.journey-step__links a:focus-visible {
  color: var(--brass);
  text-decoration: underline;
}

.journey-step__none {
  font-family: var(--body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

/* ============================================================================
   DISCLOSURE
   A section-level group that collapses. Used on the conditions and procedures
   indexes, where a long grid of cards buries everything below it.

   Closed by default with a count on the label, so the page reads as an index
   rather than an empty shell. Built on <details>, so it works with JavaScript
   off, is keyboard operable, and is announced correctly by screen readers
   without any ARIA of our own.

   The +/- marker and the hairline follow the FAQ pattern already on the site
   rather than introducing a second disclosure idiom.
   ========================================================================== */
.disclosure {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.disclosure__summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2rem) 0;
  cursor: pointer;
  list-style: none;
}

.disclosure__summary::-webkit-details-marker { display: none; }

.disclosure__summary:hover .disclosure__heading,
.disclosure__summary:focus-visible .disclosure__heading {
  color: var(--brass);
}

.disclosure__eyebrow {
  grid-column: 1;
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.5rem;
}

.disclosure__heading {
  grid-column: 1;
  font-family: var(--heading-font);
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
  transition: color var(--dur) var(--ease);
}

/* The count. Sits with the heading so the label reads as one phrase. */
.disclosure__count {
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brass);
  border: 1px solid var(--brass-mut);
  padding: 0.2rem 0.55rem;
  margin-left: 0.75rem;
  vertical-align: middle;
  white-space: nowrap;
}

/* The marker spans both rows of the summary grid so it centres on the label.
   Written as 1 / 3, not 1 / -1: with no explicit rows declared, -1 resolves to
   the end of the EXPLICIT grid, which is line 1, and the marker would sit in
   row 1 only, riding high against the eyebrow. */
.disclosure__marker {
  grid-column: 2;
  grid-row: 1 / 3;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  color: var(--brass);
  font-family: var(--body);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
  transition: border-color var(--dur) var(--ease);
}

.disclosure__marker::after { content: "+"; }
.disclosure[open] .disclosure__marker::after { content: "\2212"; }

.disclosure__summary:hover .disclosure__marker {
  border-color: var(--brass);
}

.disclosure__body {
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.disclosure__lead {
  font-family: var(--body);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0 0 1.5rem;
  max-width: 60ch;
}

/* A closed group is one row of content inside a full section's padding, which
   leaves a band of empty ground under it. Tighten the section while it is
   closed and let it breathe again once opened.

   Progressive enhancement: a browser without :has() keeps the roomier spacing,
   which is merely airy, not broken. */
.section:has(> .container > .disclosure:not([open])) {
  padding-block: clamp(1rem, 2.5vw, 1.75rem);
}

/* ============================================================================
   COLLAPSIBLE GROUPS INSIDE THE JOINT MEGA MENU
   Conditions and procedures collapse; the journey list stays open beside them,
   since that is the primary path and the point of the menu.

   Native <details>, closed by default, no JavaScript. The links stay in the
   markup whether open or shut, so crawlers and the site search read them either
   way. Same +/- idiom as the FAQ and the page disclosures.
   ========================================================================== */
.nav__dropdown-col--groups {
  gap: 0.25rem;
}

.nav__group {
  border-bottom: 1px solid rgba(178, 144, 99, 0.12);
}

.nav__group:last-child { border-bottom: 0; }

.nav__group-summary {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease);
}

.nav__group-summary::-webkit-details-marker { display: none; }

.nav__group-summary:hover,
.nav__group-summary:focus-visible {
  background: var(--steel-glow);
}

/* The heading is a shared class with the open columns, so reset the margin it
   carries there rather than restyling it. */
.nav__group-summary .nav__dropdown-heading {
  margin: 0;
}

.nav__group-count {
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  color: var(--brass);
  border: 1px solid var(--brass-mut);
  padding: 0.15rem 0.4rem;
}

.nav__group-marker {
  width: 1rem;
  text-align: center;
  color: var(--brass);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1;
}

.nav__group-marker::after { content: "+"; }
.nav__group[open] .nav__group-marker::after { content: "\2212"; }

/* Indent the revealed links so they read as belonging to the group above. */
.nav__group-links {
  padding-bottom: 0.4rem;
}

.nav__group-links a {
  padding-left: 1.75rem;
}



/* ============================================================================
   FUND COLUMNS
   Four funds across one line, divided by hairlines rather than boxed. The
   marks sit directly on the ground with no plate behind them, which is why
   build_fund_logos.py recolours nib to its own brand green: the dark forest
   variant measures 1.76:1 here and is not legible without a white plate.
   ========================================================================== */
.fund-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2rem);
  padding: 0;
  list-style: none;
}

.fund-cols > li { margin: 0; padding: 0; list-style: none; }
.fund-cols > li::marker { content: none; }
.fund-cols > li + li { border-left: 1px solid var(--hairline); }

.fund-col {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
  text-decoration: none;
}

.fund-col__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
}

/* No width/height:auto here. These are 2x assets, so `auto` would make the
   browser use the file's own pixel size and then clamp each mark by a
   different factor, undoing the equal-ink normalisation. */
.fund-col__mark img {
  max-width: 100%;
  display: block;
  transition: opacity var(--dur) var(--ease);
}

.fund-col__more {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: auto;
  transition: color var(--dur) var(--ease);
}

.fund-col:hover .fund-col__more,
.fund-col:focus-visible .fund-col__more { color: var(--brass); }
.fund-col:hover .fund-col__mark img { opacity: 0.85; }

@media (max-width: 60rem) {
  .fund-cols { grid-template-columns: repeat(2, 1fr); }
  /* Rules follow the 2x2 shape rather than the 4-across one. */
  .fund-cols > li + li { border-left: 0; }
  .fund-cols > li:nth-child(even) { border-left: 1px solid var(--hairline); }
  .fund-cols > li:nth-child(n+3) { border-top: 1px solid var(--hairline); }
}

/* The footer legal row stacks before the columns get too narrow to read. */
@media (max-width: 56rem) {
  .footer__bottom { grid-template-columns: 1fr; }
}

/* ============================================================================
   SECTION HEADINGS AND STATS

   Corrected 2026-09-04. These were gold, from a 27 Aug reading of our own audit
   document which had gold down as the prototype's accent. Measuring the live
   prototype shows its h2 headings are steel #4A7FA5 in Playfair at 40.5px, and
   gold appears only on the small uppercase eyebrow labels above them. That
   inversion is the difference between the site looking like theirs and not.

   Steel is 4.03:1 on --navy, which clears AA large (3:1). These are display
   headings at 1.65rem and up, so they qualify. Do not reuse --steel at body
   size; --steel-strong exists for that.
   ========================================================================== */
.hero__stat-number {
  color: var(--steel);
}

.section-header__heading {
  color: var(--steel);
}

.section-header__heading::after {
  background: var(--steel);
}

/* --- Compact joint menu --------------------------------------------------
   Jessica, 27 Aug: the hip and knee panels held twenty-two links each and read
   as "a lot". All three groups now collapse, so the panel opens as a lead link
   and three closed rows, and the full lists are one click away rather than
   permanently on screen. Same <details> component as before, one column. */
.nav__dropdown--compact {
  min-width: 340px;
  display: block;
  padding: 0.5rem;
}

.nav__dropdown--compact .nav__dropdown-lead {
  margin-bottom: 0.25rem;
}

@media (max-width: 1200px) {
  .nav__dropdown--compact { min-width: unset; }
}


/* Long button labels wrap rather than overflow the viewport on small screens. */
@media (max-width: 560px) {
  .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }
}


/* The instrument repeats "During the past 4 weeks" above every question, and
   the recall period is part of the validated item rather than a page heading.
   It is shown on each question and set quieter than the question itself. */
.oxford__q-recall {
  display: block;
  font-family: var(--body);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.35rem;
}

/* ==========================================================================
   APPOINTMENT ENQUIRY FORM
   Added 28 Aug 2026. Jessica confirmed enquiries route to the SCOG rooms.
   Inputs sit on the raised surface rather than the page ground, so the
   fields read as fields on a dark page without needing heavy borders.
   ========================================================================== */
.enquiry {
  margin: 1.75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  max-width: 44rem;
}

/* Honeypot. Hidden from people, still submitted by bots. Not display:none,
   which some bots detect and skip. */
.enquiry__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.enquiry__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.15rem;
}

.enquiry__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.enquiry__field label,
.enquiry__fieldset legend {
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-navy-mut);
}

/* Label and its required/optional marker on one line.
   The marker used to live INSIDE the <label>, which meant Netlify's
   notification email addressed the rooms with "Your name required:" and
   "I am enquiring about optional:". Netlify takes the field name straight from
   the label's text, so the marker had to come out of it. .enquiry__field is a
   column flex, so without this wrapper the marker drops to its own line. */
.enquiry__label {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.enquiry__req {
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--gold);
  margin-left: 0.4rem;
}

/* "optional" marker. Deliberately quieter than .enquiry__req: the two selects
   it labels (what you are enquiring about, and how you heard about the
   practice) must read as skippable.

   🚨 Neither select is `required` and neither may ever become one. The
   "how did you hear about us" question is the Sydney Smile Centre question,
   and that questionnaire cost that practice about a month of bookings when it
   interposed on the booking click. Nothing here intercepts the submit: they
   are plain <select> elements with an empty default, in a normal POST form. */
.enquiry__opt {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-navy-mut);
  margin-left: 0.4rem;
}

.enquiry input[type="text"],
.enquiry input[type="tel"],
.enquiry input[type="email"],
.enquiry select,
.enquiry textarea {
  font-family: var(--body);
  font-size: 1rem;
  color: var(--on-navy);
  background: var(--navy-soft);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 0.7rem 0.85rem;
  width: 100%;
  transition: border-color .14s ease, box-shadow .14s ease;
}

.enquiry textarea { resize: vertical; line-height: 1.55; }

.enquiry input:focus,
.enquiry select:focus,
.enquiry textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-muted);
}

.enquiry ::placeholder { color: var(--on-navy-mut); opacity: 0.75; }

.enquiry__fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.enquiry__fieldset legend { padding: 0; margin-bottom: 0.55rem; }

.enquiry__fieldset .enquiry__radio {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-right: 1.4rem;
  font-family: var(--body);
  font-size: 0.97rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-navy);
  cursor: pointer;
}

.enquiry__fieldset .enquiry__radio input { accent-color: var(--gold); }

.enquiry__hint,
.enquiry__privacy {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--on-navy-mut);
  margin: 0;
}

.enquiry__privacy { margin-top: 0.25rem; }

.enquiry button { align-self: flex-start; }

@media (prefers-reduced-motion: reduce) {
  .enquiry input, .enquiry select, .enquiry textarea { transition: none; }
}

/* ==========================================================================
   LIGHT BODY COPY
   Max, 28 Aug: thin the body text to sit with the light headings.
   Inter 300 for the main reading text only. Everything at 0.95rem and below
   (footer, disclaimers, bylines, breadcrumbs, small print) deliberately stays
   at 400: Inter 300 at 14px on a dark ground loses too much apparent weight,
   and much of this site's audience is reading clinical information at an age
   where that matters.
   ========================================================================== */
.prose p,
.prose li,
.prose blockquote,
.section-header__lead,
.page-hero__subtitle,
.hero__subtitle,
.card__text,
.timeline__item-text,
.cta-banner__text {
  font-weight: 300;
}

/* Max, 28 Aug, after seeing the A/B: take the small print to 300 as well, so
   the whole site is uniformly light. This includes the disclaimer, which was
   held back in the first pass. Raised twice as a legibility concern for an
   older patient audience and confirmed both times, so it is a settled call and
   not to be re-raised.

   The one compensation made for it: the small print keeps --on-navy-mut for
   colour rather than dropping further, so weight is the only thing that
   changed and contrast stays where it was. */
.prose p.disclaimer,
.disclaimer,
.faq__answer p,
.footer__brand-desc,
.footer__rooms,
.footer__hours,
.footer__creds,
.footer__copyright,
.footer__disclaimer,
.byline__role,
.byline__date,
.byline__meta,
.search-modal__hint {
  font-weight: 300;
}

/* Emphasis inside light copy needs a wider gap to still read as emphasis.
   Against 300, a 600 strong is the smallest step that stays obvious. */
.prose strong,
.faq__answer strong {
  font-weight: 600;
}

/* ==========================================================================
   COLLAPSED AREA LISTS
   The suburb grids on /locations/. Collapsed so a browsing patient is not met
   with a wall of place names, and so nobody from an unlisted suburb concludes
   they cannot be seen. The links stay in the served HTML, so Google and the AI
   crawlers read and follow them exactly as before: this is a visual change,
   not an indexing one.
   ========================================================================== */
.area-list {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-top: 2rem;
}

.area-list > summary {
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 1.05rem 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.area-list > summary::-webkit-details-marker { display: none; }

/* Chevron, drawn rather than an icon font so it inherits colour and needs no
   extra request. Rotates on open. */
.area-list > summary::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .18s ease;
  flex: none;
}

.area-list[open] > summary::before { transform: rotate(45deg); }

.area-list > summary:hover { color: var(--gold-bright); }

.area-list > summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.area-list__note {
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--on-navy-mut);
  max-width: 62ch;
  margin: 0 0 1.5rem;
}

.area-list .card-grid { margin-bottom: 1.75rem; }

@media (prefers-reduced-motion: reduce) {
  .area-list > summary::before { transition: none; }
}

/* ==========================================================================
   JOURNEY STAGE NAVIGATION
   Added 28 Aug 2026. Gina asked for the prototype's behaviour: the whole
   sequence visible, the current stage marked, and a way to walk it.

   The numbering is real information here, not decoration. These nine stages
   are an actual order, from booking a first appointment to life after a
   replacement, and knowing you are at step 3 of 9 is the point.
   ========================================================================== */
.stage-nav {
  border: 1px solid var(--hairline);
  background: var(--navy-soft);
  margin-bottom: 1.5rem;
}

.stage-nav__head {
  display: block;
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid var(--hairline);
}

.stage-nav__head:hover { color: var(--gold-bright); }

.stage-nav__list {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  /* Counter comes from the markup, not CSS: the number is content, and it has
     to survive into the printed page and the accessibility tree. */
}

.stage-nav__item a {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.5rem 1.1rem;
  text-decoration: none;
  color: var(--on-navy-mut);
  font-size: 0.9rem;
  line-height: 1.45;
  transition: color .14s ease, background .14s ease;
}

.stage-nav__item a:hover {
  color: var(--on-navy);
  background: var(--gold-muted);
}

.stage-nav__n {
  font-family: var(--heading-font);
  font-size: 0.92rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* The stage title. min-width:0 so a long title wraps inside the grid column
   instead of forcing the sidebar wider than its track. */
.stage-nav__t {
  min-width: 0;
}

/* The current stage. Marked three ways, because colour alone is not enough:
   a left rule, a weight change, and aria-current in the markup. */
.stage-nav__item.is-current a {
  color: var(--heading);
  background: var(--gold-muted);
  box-shadow: inset 2px 0 0 var(--gold);
  font-weight: 500;
}

.stage-nav__item.is-current .stage-nav__n { color: var(--gold-bright); }

/* --- Previous and next, at the foot of the article --------------------- */
.stage-move {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin: 2.5rem 0 1.5rem;
}

.stage-move__link {
  background: var(--navy-soft);
  padding: 0.95rem 1.15rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: background .14s ease;
}

.stage-move__link:hover { background: var(--gold-muted); }

/* The next link sits right when both are present, so the pair reads as a
   direction of travel rather than two equal options. */
/* Previous sits left, next sits right, so the pair reads as a direction of
   travel. When only one exists it still takes its own side. */
.stage-move__link--prev { text-align: left; }
.stage-move__link--next { text-align: right; }
.stage-move__link--next:only-child { grid-column: -2; }

.stage-move__dir {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.stage-move__t {
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: 1rem;
  color: var(--heading);
  line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
  .stage-nav__item a, .stage-move__link { transition: none; }
}

/* ==========================================================================
   OXFORD SCORE: THE FULL BAND SCALE
   Added 31 Aug 2026. Daevyd asked for Dr Coory's treatment, where the result
   shows the whole scale with the patient's own band marked, rather than only
   the band they landed in. A number means little in isolation.
   ========================================================================== */
.oxford__band-caption {
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-navy-mut);
  margin: 1.8rem 0 0.7rem;
}

.oxford__band-scale {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.oxford__band-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.85rem;
  padding: 0.6rem 0.85rem;
  /* A left rule rather than a fill, so the unselected bands stay quiet and
     the marked one is the only thing that carries weight. */
  border-left: 3px solid var(--hairline);
  font-size: 0.93rem;
  color: var(--on-navy-mut);
}

.oxford__band-range {
  font-family: var(--heading-font);
  font-size: 1.02rem;
  color: var(--on-navy);
  font-variant-numeric: tabular-nums;
  /* Fixed width so the band names align down the column regardless of whether
     the range is one digit or two. */
  min-width: 5.2rem;
}

.oxford__band-name { min-width: 0; }

/* The patient's band. Marked four ways, because this is the one row that has
   to be unmistakable and colour alone is not enough: a gold rule, a tint, a
   weight change, and an explicit "Your score" label rather than relying on
   the reader inferring it. */
.oxford__band-row.is-yours {
  border-left-color: var(--gold);
  background: var(--gold-muted);
  color: var(--heading);
  font-weight: 500;
}

.oxford__band-row.is-yours .oxford__band-range { color: var(--gold-bright); }

.oxford__band-you {
  font-family: var(--body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-left: auto;
  white-space: nowrap;
}

@media print {
  /* The scale is the most useful part of a printed summary to bring to a
     consultation, so it must survive the print stylesheet. */
  .oxford__band-scale { break-inside: avoid; }
}

/* ==========================================================================
   EXPLAINER VIDEOS
   Professor Rodda's filmed explanations, placed on the pages they discuss.
   Added 31 Aug 2026.

   These sit inside prose, so they take the article's measure rather than
   running full-bleed: a talking-head explanation reads as part of the page,
   not as an interruption to it.
   ========================================================================== */
/* margin-inline: auto added 2026-09-04. Max: "the videos ... look a bit clunky."
   Measured on /knee/: the container is 1280px, the video capped at 736px, and
   the margin was `2rem 0`, so it sat hard left with 496px of dead space beside
   it, under a heading running the full width. Inside an article the column is
   only ~780px so the cap filled it and the left-alignment was invisible, which
   is why this survived. */
.explainer {
  /* Max, 21 Sep: "make sure it's fully aligned with the text on that page".
     Left edge on the copy's left edge, not centred inside the column. */
  margin: 2rem 0 2.4rem;
  /* Slightly wider than the prose measure so the video has presence without
     breaking the column. */
  max-width: min(100%, 46rem);
}

/* On the two journey hubs the video is the point of the band, not an
   illustration inside prose, so it gets a wider cap. Article videos keep the
   46rem cap that already fills their column. */
.explainer--feature {
  max-width: min(100%, 56rem);
  margin-inline: 0;
}
/* The home film band has no heading beside it, so it stays centred. */
.film-band__figure { margin-inline: auto; }

.explainer__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--navy-deep);
  border: 1px solid var(--hairline);
  /* The poster is a 16:9 frame; object-fit stops a letterboxed source being
     stretched if a future film is a different ratio. */
  object-fit: cover;
}

.explainer__caption {
  margin-top: 0.7rem;
  font-family: var(--body);
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--on-navy-mut);
}

@media print {
  /* A video is nothing on paper. Leave the caption, which still tells the
     reader the explanation exists. */
  .explainer__video { display: none; }
  .explainer__caption::before { content: "Video: "; }
}

/* ==========================================================================
   JOURNEY HUB: ARTICLES BY PHASE
   Added 31 Aug 2026, matching the prototype layout Gina and Daevyd asked for:
   a phase list beside the articles belonging to each phase.

   Every phase is rendered and the sidebar anchors to it, rather than tabs
   showing one phase at a time. Tabs would hide five sixths of the page from
   anyone arriving from a search, which is the traffic these articles exist
   for.
   ========================================================================== */
.phase-layout {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: start;
}

.phase-layout__main { min-width: 0; }

.phase-nav {
  position: sticky;
  /* Clears the fixed header, which is why this is not simply top: 0. */
  top: 6rem;
  min-width: 0;
}

.phase-nav__head {
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}

.phase-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* The spine the dots sit on. A single border on the list, rather than a
     pseudo-element per item, so it cannot break between rows. */
  position: relative;
}

.phase-nav__list::before {
  content: "";
  position: absolute;
  left: 0.32rem;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 1px;
  background: var(--hairline);
}

.phase-nav__item a {
  display: grid;
  grid-template-columns: 0.75rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem 0;
  text-decoration: none;
  color: var(--on-navy-mut);
  font-size: 0.95rem;
  transition: color .14s ease;
}

.phase-nav__item a:hover { color: var(--heading); }

.phase-nav__dot {
  width: 0.68rem;
  height: 0.68rem;
  border-radius: 50%;
  background: var(--gold-deep);
  /* Sits on the spine, so it needs its own ground to punch through the line. */
  box-shadow: 0 0 0 4px var(--surface-2);
  position: relative;
  z-index: 1;
}

.phase-nav__item a:hover .phase-nav__dot { background: var(--gold); }

.phase-nav__t { min-width: 0; }

.phase-nav__n {
  font-family: var(--body);
  font-size: 0.72rem;
  color: var(--on-navy-mut);
  font-variant-numeric: tabular-nums;
}

/* --- The article groups ------------------------------------------------ */
.phase-group { margin-bottom: clamp(2rem, 5vw, 3rem); }
.phase-group:last-child { margin-bottom: 0; }

.phase-group__title {
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  color: var(--heading);
  margin: 0 0 1.1rem;
  /* Offset so an anchored jump does not land the heading under the fixed
     header. */
  scroll-margin-top: 6rem;
}

@media (max-width: 860px) {
  .phase-layout { grid-template-columns: minmax(0, 1fr); }
  .phase-nav {
    position: static;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 1.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phase-nav__item a { transition: none; }
}

/* The phase description, carried over from the alternating timeline that this
   layout replaced on the journey hubs. Without it a phase is just a label. */
.phase-group__desc {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--on-navy-mut);
  max-width: 60ch;
  margin: -0.4rem 0 1.3rem;
}

/* --- About: the qualification, role and affiliation bands --------------
   2026-09-02. Gina asked on 1 Sep for the About page to reflect the original
   design, and the marks went onto the role cards that day. This is the second
   half of that: the prototype runs training, health system design and
   international affiliations as their own full-width numbered sections, and
   this build had all three as headings inside the article's prose column.

   That column is about 830px. Five founder cards in it wrapped 3 + 2, four
   affiliation cards wrapped 3 + 1, and every description broke across four or
   five word lines. Full width they run five and four across on one row each,
   which is both the prototype's layout and the reason it works.

   The training cards carry no marks, unlike the role cards. See the note on
   S.QUALIFICATIONS. --------------------------------------------------- */

/* Five qualifications across one row on a wide screen, reflowing to two and
   then one. minmax is 200px rather than the role grid's 220px so that five
   still fit inside the container before the row breaks. */
.cred-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
}

/* A raised card rather than the role cards' open column, so the two grids on
   this page are not mistaken for one another when they are three sections
   apart. Gold top edge is the same device the role cards use. */
.cred {
  display: flex;
  flex-direction: column;
  background: var(--navy-soft);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--gold-deep);
  border-radius: 3px;
  padding: 1.4rem 1.3rem 1.25rem;
}
.cred__abbr {
  display: block;
  font-family: var(--heading-font);
  font-size: var(--step-2);
  line-height: 1.15;
  color: var(--heading);
  margin-bottom: 0.7rem;
}
.cred__full {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--on-navy);
  margin: 0 0 1rem;
}
/* Pushed to the foot so the awarding bodies line up across the row however
   uneven the expansions above them are. Under subgrid the row track does that
   job instead; the auto margin is released there. */
.cred__where {
  display: block;
  margin-top: auto;
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
/* Every qualification links out to the body that awarded it, so the card
   borrows the role card's foot link rather than inventing a second one. The
   padding above it is smaller here: a credential card is shorter than a role
   card and the role card's 1.25rem left it looking detached. */
.cred .role__more { padding-top: 0.9rem; }
/* The card's own padding already insets the plate, so it does not need the
   role card's margin as well. */
.cred .role__mark { margin-bottom: 1rem; }
/* A qualification whose mark is not yet cleared for use keeps its place in the
   row, so the other four stay aligned, but shows nothing rather than an empty
   white rectangle that reads as a failed image. Delete nothing to undo this;
   it stops applying as soon as the file is added to QUAL_MARKS. */
.role__mark--pending { background: none; }

/* Same subgrid treatment as the role grid, for the same reason. The
   expansions run one to three lines, so without shared row tracks the
   awarding bodies and the "Visit" links step up and down across the row.
   Four rows here: abbreviation, expansion, awarding body, link. */
@supports (grid-template-rows: subgrid) {
  .cred {
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .cred { grid-row: span 5; }
  /* Set by training_band() on any card whose mark is wider than 3.5:1.
     Span, not a bigger plate: the column width is what binds, and at one
     column the FRACS lockup's wordmark renders at about 6px. */
  .cred--wide { grid-column: span 2; }
  .cred__full { align-self: start; }
  /* End-aligned so a one-line expansion still puts its awarding body on the
     same line as a three-line one's. */
  .cred__where { margin-top: 0; align-self: end; }
  .cred .role__more { margin-top: 0; align-self: end; }
}

/* Role grid, full-width variant. 210px rather than 220px for the same reason
   the credential grid uses 200px: it is what lets the five founder roles hold
   one row inside the container. auto-fit collapses the fifth track for the
   four affiliations, so they spread rather than leaving a hole. */
.role-list--band {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-top: 0;
}

/* Role labels are wildly uneven: "Founder" is one line and "Founder and
   Director of Joint Replacement Surgery" is four. Left to itself that pushes
   one card's organisation name a hundred pixels below its neighbours' and the
   row reads as broken rather than as a row.

   Subgrid makes the five parts of a card (mark, role, name, description,
   link) share row tracks with every other card beside it, so the names sit on
   one line, the descriptions start together, and the links sit on one
   baseline. Every card emits all five parts, which is what the span depends
   on. Without subgrid support the cards fall back to the flex column above,
   which is ragged but not broken. */
@supports (grid-template-rows: subgrid) {
  .role-list--band .role {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    row-gap: 0;
  }
  /* margin-top:auto did the baseline work under flex; under subgrid the row
     track does it, and the auto margin would push the link off its track. */
  .role-list--band .role__more { margin-top: 0; align-self: end; }
  .role-list--band .role__desc { align-self: start; }
  /* The role track is as tall as the longest label, four lines for "Founder
     and Director of Joint Replacement Surgery". Bottom-aligning the label
     puts a one-word role directly above its organisation name instead of
     leaving three empty lines between them. */
  .role-list--band .role__title { align-self: end; }
}

/* Prose and pull quote side by side above a role grid. */
.band-intro {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.band-intro__copy p {
  font-weight: 300;
  line-height: 1.75;
  color: var(--on-navy);
  margin: 0;
}
.band-intro__copy p + p { margin-top: 1.1rem; }
/* The base pull quote sits on --surface-2, which is exactly the ground of a
   --cream section, so it would disappear there. Raised one step instead, and
   released from the centred, generously margined treatment it gets when it
   interrupts an article. */
.band-intro .pull-quote {
  background: var(--navy-soft);
  text-align: left;
  margin-block: 0;
}
.band-intro .pull-quote__text { margin-inline: 0; }

/* Small print closing a band: the AHPRA and ORCID line under the
   qualifications, the philanthropy note under the affiliations. Same gold
   rule as the fund disclaimer, because it does the same job. */
/* Group label inside a band, e.g. "Published" / "Under review" above each
   publication list. Their research page separates the four groups with a small
   uppercase label rather than another display heading, so a reader can see at a
   glance which list they are in. Same eyebrow treatment as .card__eyebrow. */
.band-subhead {
  font-family: var(--body-font);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 2.75rem 0 0.5rem;
}

.band-subhead:first-of-type {
  margin-top: 1rem;
}

.band-note {
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--on-navy-mut);
  border-left: 2px solid var(--gold-deep);
  padding-left: var(--space-4);
  max-width: 78ch;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
}
.band-note strong { color: var(--on-navy); }
.band-note a { color: var(--gold); }
.band-note a:hover,
.band-note a:focus-visible { color: var(--gold-bright); }

@media (max-width: 860px) {
  .band-intro { grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================================
   FUND SCHEME PAGES
   Added 2026-09-04, matching the live prototype's health-fund layout. Their
   page is two columns: the scheme explained on the left with one button, the
   package inclusions in a raised card on the right. Measured values: card
   #0D1B2A with a 1px #1E2A36 edge and 45px padding, gold eyebrow labels at
   13.5px / 0.25em, steel joint labels at 13px / 0.15em, rows in Inter 300.
   ========================================================================== */
/* The section wrapper itself carries no styling beyond the section defaults;
   the class exists so the layout is addressable and so check_classes passes. */
.fund-scheme { }

.fund-scheme__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.fund-scheme__main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 52ch;
}

.fund-col__h2 {
  font-family: var(--heading-font);
  /* Theirs is 40.5px. --step-4 tops out near 46 and wrapped this heading to
     three lines in a half-width column; --step-3 lands at 35 and holds two. */
  font-size: var(--step-3);
  font-weight: 400;
  color: var(--steel);
  line-height: 1.15;
  margin: 0;
}

.fund-col__intro {
  color: var(--on-navy-mut);
  margin: 0;
}

/* The ticked "what's included" list. Their tick is a steel check glyph set
   against the text, not a bullet. */
.fund-ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fund-ticks > li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--on-navy);
  line-height: 1.55;
}

.fund-ticks > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.62rem;
  height: 0.34rem;
  border-left: 2px solid var(--steel-light);
  border-bottom: 2px solid var(--steel-light);
  transform: rotate(-45deg);
}

/* The package inclusions card. */
.fund-pkg {
  background: var(--navy-soft);
  border: 1px solid var(--card-edge);
  padding: clamp(1.5rem, 3vw, 2.8rem);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.fund-pkg__head,
.fund-pkg__row {
  display: grid;
  /* 7rem, not 5.5: "Knee replacement" wraps to two words and at 5.5rem the
     two column headers collided. */
  grid-template-columns: minmax(0, 1fr) 7rem 7rem;
  gap: 1rem;
  align-items: center;
}

.fund-pkg__head {
  padding-bottom: 0.9rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--card-edge);
}

.fund-pkg__joint {
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel-strong);
  text-align: center;
  line-height: 1.35;
  hyphens: none;
}

.fund-pkg__row {
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(30, 42, 54, 0.6);
}

.fund-pkg__row:last-child { border-bottom: none; }

.fund-pkg__row > span:first-child {
  font-weight: 300;
  color: var(--heading);
  font-size: 0.95rem;
  line-height: 1.4;
}

/* The tick in each joint column. */
.fund-pkg__tick {
  justify-self: center;
  width: 0.68rem;
  height: 0.38rem;
  border-left: 2px solid var(--steel-light);
  border-bottom: 2px solid var(--steel-light);
  transform: rotate(-45deg);
}

.fund-elig {
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (max-width: 900px) {
  .fund-scheme__grid { grid-template-columns: 1fr; }
  .fund-scheme__main { max-width: none; }
  .fund-pkg__head,
  .fund-pkg__row { grid-template-columns: minmax(0, 1fr) 4.25rem 4.25rem; gap: 0.6rem; }
}


/* Ported callouts ---------------------------------------------------------
   Their articles carry two kinds of set-aside prose: an opening standfirst
   and inline "Note." boxes, both emitted by port_journey.to_html() as
   <aside class="callout">. Styled off the existing tokens rather than a new
   colour, so it sits inside the system Jessica has signed off. */
.callout {
  border-left: 3px solid var(--gold);
  background: var(--gold-muted);
  padding: 1.25rem 1.5rem;
  margin: 0 0 1.5rem;
  max-width: 68ch;
  color: var(--on-navy);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.callout strong {
  color: var(--gold-bright);
}

.callout > :last-child {
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .callout {
    padding: 1rem 1.125rem;
  }
}


/* Journey hub: "Detailed clinical information" -----------------------------
   Our own reference pages, off the curated journey but still reachable.
   Collapsed with <details>, never display:none -- see build_journey.py. */
.further {
  margin-top: 4rem;
  border-top: 1px solid var(--hairline);
  padding-top: 2rem;
}

.further__summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading, inherit);
  font-size: 1.25rem;
  color: var(--steel-strong);
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.further__summary::-webkit-details-marker {
  display: none;
}

.further__summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold);
}

.further[open] .further__summary::after {
  content: "\2212";
}

.further__summary:hover {
  color: var(--gold-bright);
}

.further__lead {
  color: var(--on-navy-mut);
  max-width: 62ch;
  margin: 0.75rem 0 2rem;
}


/* Wide-lockup qualification card. Declared outside the @supports block too, so
   a browser without subgrid still widens it. */
.cred--wide {
  grid-column: span 2;
}

@media (max-width: 700px) {
  /* One column at this width anyway; spanning two would create a phantom
     track and leave a gap beside the card. */
  .cred--wide {
    grid-column: auto;
  }
}


/* Headings inside a "Detailed clinical information" accordion. */
.further__h {
  font-family: var(--font-heading, inherit);
  font-size: 1.35rem;
  color: var(--steel-strong);
  margin: 2rem 0 0.75rem;
  max-width: 62ch;
}

.further__h:first-of-type {
  margin-top: 0;
}

.further p {
  max-width: 68ch;
  color: var(--on-navy);
}


/* Feature row whose photograph is the height of the text and bleeds to the
   screen edge -------------------------------------------------------------
   Max, 23 Sep: "make sure the image of the hospital is bigger and in line
   with the white text". Same ask as Jessica on 14 Sep, and the first answer
   (feature-row--fill) stretched the 1080x772 frame to the text height inside
   the 552px column, which showed 60% of the frame's width and put the
   Maroochy Private sign off the right edge (Max, 21 Sep).

   Measured at 1440 before this change: text (eyebrow top to last paragraph
   bottom) 649px tall, photo 552x368, so the photo sat 281px short and
   centred. Two things close that gap without losing the sign:

   1. The photo column bleeds past the container padding to the viewport
      edge, so it is 680px wide at 1440 and 602px at 1280 instead of 552.
      Wider column, less cover-crop: 74% of the frame's width shows at 1440
      and 65% at 1280 (was 60%).
   2. object-position 85% keeps the window on the right of the frame, where
      the sign is (it sits at 75-85% of the frame's width). What falls off is
      the left tree and the leftmost sliver of the building.

   The content column drops its 1rem block padding so the row height IS the
   text height, and the photo stretches to it: top edge on the eyebrow,
   bottom edge on the last line. `body` already has overflow-x hidden, so a
   scrollbar-width discrepancy in 100vw cannot open a sideways scroll. */
.feature-row--edge {
  --edge-bleed: calc(max(0px, (100vw - var(--max-w)) / 2) + clamp(1.25rem, 4vw, 3rem));
  align-items: stretch;
}

.feature-row--edge .feature-row__content {
  padding-block: 0;
}

/* .feature-row__image carries `align-self: center` further up the sheet, and
   align-self on the child beats align-items on the parent, so the stretch has
   to be restated here or the row silently keeps the old height. */
.feature-row--edge .feature-row__image {
  align-self: stretch;
  width: calc(100% + var(--edge-bleed));
  border-radius: 0;
}

/* Reverse rows put the photo on the right, so it bleeds right. A plain row
   would bleed left. */
.feature-row--edge.feature-row--reverse .feature-row__image {
  margin-right: calc(-1 * var(--edge-bleed));
}
.feature-row--edge:not(.feature-row--reverse) .feature-row__image {
  margin-left: calc(-1 * var(--edge-bleed));
}

.feature-row--edge .feature-row__image picture {
  display: block;
  height: 100%;
}

.feature-row--edge .feature-row__image img {
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 85% 50%;
}

@media (max-width: 1100px) {
  /* Single column from here, 200px above the generic feature-row breakpoint:
     measured at 1024 the two-column text ran 800px tall against a 481px
     column, which left 43% of the frame. Below this there is no text height
     to match and a cover crop would only throw away picture. Whole frame,
     container width. */
  .feature-row--edge,
  .feature-row--edge.feature-row--reverse {
    grid-template-columns: minmax(0, 1fr);
    direction: ltr;
    gap: 2rem;
  }
  .feature-row--edge .feature-row__image,
  .feature-row--edge.feature-row--reverse .feature-row__image,
  .feature-row--edge:not(.feature-row--reverse) .feature-row__image {
    width: 100%;
    margin-inline: 0;
  }
  .feature-row--edge .feature-row__image img {
    height: auto;
    object-fit: fill;
  }
}


/* About cards: eyebrow sizing and the gap under the logo -----------------
   Jessica, 14 Sep: "Font sizing needs to be adjusted for better presentation
   (eg smaller yellow text to try get on one/two lines ... We just don't want
   gaps between logo and texts)".

   Measured at 1440 before this change, on 275px cards:
     - the gold eyebrow ran to THREE lines on the two longest roles
       ("Founder and Director of Joint Replacement Surgery", "International
       Reference Centre for Total Knee Replacement")
     - and because the cards share row tracks through subgrid, that three-line
       track left a 74px hole under the logo on every one-line card, against
       20px on the three-line ones. That inconsistency is the gap she means.

   Dropping to 12.5px with tighter tracking puts the longest at two lines, so
   the shared track shrinks and the holes close. The mark's own bottom margin
   comes in too. Both grids are covered: .role cards and .cred cards. */
.role__title,
.cred__abbr {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  line-height: 1.45;
}

.role__mark {
  margin-bottom: 0.75rem;
}

.cred .role__mark {
  margin-bottom: 0.75rem;
}


/* Logo panel in a band-intro's second column (philanthropy). The shared
   .role__mark plate is sized for a card, so it is given room to breathe here
   and capped so the mark does not outgrow the copy beside it. */
.band-intro__mark .role__mark {
  height: auto;
  max-width: 360px;   /* 280 until 17 Sep; Max: "a little bit bigger" */
  padding: 1.4rem 1.6rem;
  margin-bottom: 0;
}

.band-intro__mark .role__mark img {
  max-height: 130px;  /* was 72; the asset is now the full 738x369 supplied. At 2:1 that is 260px wide, which fills the 360px plate less its padding */
}

@media (max-width: 700px) {
  .band-intro__mark .role__mark {
    max-width: 220px;
  }
}


/* Qualification plates: a little more height ----------------------------
   The AOA Fellows mark is a crest over three lines of wordmark at roughly 1:1,
   so at the card plate's original 48px of content height it read as a smudge.
   Raising the plate lifts every mark in the row together, which matters: the
   cards share row tracks through subgrid, so giving only one card a taller
   plate would reopen exactly the gap Jessica asked us to close on 14 Sep. */
.cred .role__mark {
  height: 5.6rem;
}


/* Oxford score bands on the journey hubs --------------------------------
   Four ranges shown at once rather than the prototype's click-to-reveal, so
   the meaning is readable without interaction and without JavaScript. */
.score-bands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

.score-band {
  background: var(--navy-mid);
  padding: 1.25rem 1.25rem 1.4rem;
}

.score-band__range {
  display: block;
  font-family: var(--font-heading, inherit);
  font-size: 1.5rem;
  color: var(--steel);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.score-band__label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.score-band__desc {
  margin: 0.7rem 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--on-navy-mut);
}

/* --- Click to call in the header, below the desktop nav ----------------- */
/* Added 2026-09-17. The `.nav__item--phone` rule at the 1000px breakpoint
   carries a comment saying the audit rated click-to-call in the header "the
   single highest-return fix for a phone-preferring demographic", and that
   "below this width the mobile panel carries it". Measured on a 375px phone,
   the mobile panel is NOT a substitute: the only two tel: links on the page
   are one inside the closed drawer, translated off-screen, and one in the
   footer at y=9209. A hip and knee replacement practice's patients are
   overwhelmingly over 60 and phone first, and on a phone they had to open a
   menu or scroll nine thousand pixels to find the number.

   Shown from 1200px down, which is exactly where `.nav__list` becomes a
   drawer and the header loses its visible number. Hidden above that, where
   the full "(07) 5493 8038" link is already in the nav row.

   It is a plain <a href="tel:">. No script, nothing to intercept the tap, so
   it cannot fail closed the way the Sydney Smile Centre booking flow did. */
.header__call { display: none; }

@media (max-width: 1200px) {
  .header__call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;            /* full 44px touch target, per WCAG 2.5.8 */
    height: 44px;
    margin-left: auto;
    color: var(--gold);
    border: 1px solid var(--gold-rule);
    border-radius: 50%;
    transition: color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
  }
  .header__call:hover,
  .header__call:focus-visible { color: var(--gold-bright); border-color: var(--gold); }

  /* The search button already sits next to it; only one of the two should
     claim the free space, or they drift apart on a narrow phone. */
  .search-trigger--mobile { margin-left: auto; }
  .header__call { margin-left: 0.4rem; }
}

/* --- FAQ accordions: breathing room inside the filled card ---------------- */
/* Max, 17 Sep: "the points are too close to the border". The reskin block
   above gives `.faq details` a --navy-soft fill, but the base rule only pads
   the summary top and bottom, so the question and answer sat hard against the
   left and right edges of a filled card. Declared after the reskin so it wins
   at equal specificity. Sitewide: About, both hubs, every article FAQ. */
.faq details {
  padding: 0 1.4rem;
  border-radius: 6px;
}
.faq details + details { margin-top: 0.6rem; }
.faq__answer { padding-bottom: 1.4rem; }

/* --- Qualification cards on ONE line at desktop ------------------------- */
/* Max, 17 Sep: "medical training and qualifications should all be on one
   line instead of two". Five cards, but the FRACS Fellow lockup is 5.78:1 and
   `.cred--wide` gives it two columns so its wordmark stays legible, which made
   six column-slots on a five-column auto-fit grid and pushed the last card to
   a second row. Six explicit tracks at desktop hold 4 x 1 + 1 x 2 on one line.
   Below 1100px the auto-fit grid takes over and wrapping is correct. */
@media (min-width: 1100px) {
  .cred-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}


/* --- Referral pathway flowchart (first-appointment) --------------------- */
/* Rebuilt from the Base44 component whose ten labels were porting as ten
   stray paragraphs. Two lanes: with a referral, straight to the appointment;
   without one, via the nurse practitioner. Gina, 17 Sep: "keep this flow
   chart as is". */
.pathway {
  display: grid;
  gap: 1.25rem;
  margin: 2rem 0 2.5rem;
  padding: 1.5rem;
  background: var(--navy-soft);
  border-radius: 6px;
}
.pathway__lane {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
}
.pathway__lane:last-child { grid-template-columns: 1fr auto 1fr auto 1fr; }
.pathway__node {
  padding: 0.9rem 1rem;
  border: 1px solid rgba(178, 144, 99, 0.35);
  border-radius: 4px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--heading);
  text-align: center;
  background: var(--navy);
}
.pathway__node--end { border-color: var(--gold); }
.pathway__node--np span { display: block; font-weight: 400; font-size: 0.85em; color: var(--on-navy-mut); margin-top: 0.25rem; }
.pathway__node--np a { display: inline-block; margin-top: 0.4rem; color: var(--gold); font-size: 0.85em; text-decoration: underline; }
.pathway__arrow { width: 28px; height: 2px; background: var(--gold); position: relative; }
.pathway__arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: var(--gold); }
@media (max-width: 700px) {
  .pathway__lane, .pathway__lane:last-child { grid-template-columns: 1fr; }
  .pathway__arrow { width: 2px; height: 22px; margin: 0 auto; }
  .pathway__arrow::after { right: -4px; top: auto; bottom: -1px; border-left-color: transparent; border-top-color: var(--gold); }
}


/* ==========================================================================
   18 Sep 2026, Max's review of the staging site before the 1pm call
   ========================================================================== */

/* --- Previous / next at the foot of a journey article ------------------- */
/* `.prose a, p a { display: inline }` (0,1,1) was beating
   `.stage-move__link { display: flex }` (0,1,0), so "NEXT" and the article
   title ran together on one line ("NEXTWhere Is Your Hip Pain Coming From?").
   Max: "the spacing underneath ... between 'Next' and the white text looks
   weird". Restated at the winning specificity. */
.prose a.stage-move__link,
a.stage-move__link {
  display: flex;
  min-height: 0;
}

/* --- His call-to-action pair on the first-appointment articles ---------- */
.prose .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
}
.prose .cta-row a { display: inline-flex; }

/* --- Fund band: logos first, then the words ------------------------------ */
/* Max: "'Are you insured with one of these funds?', show the logos, and then
   have the text underneath". The lead paragraphs moved out of .section-header
   into .fund-after, below the marks. The header keeps only the heading, so
   its bottom margin is trimmed; the marks carry their own top margin. */
.section-header:has(+ .fund-cols) { margin-bottom: 0; }
.fund-cols { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.fund-after {
  max-width: 68ch;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.fund-after .section-header__lead { margin-top: 0; max-width: none; }
.fund-after .section-header__lead + .section-header__lead { margin-top: 1rem; }
.fund-after + .fund-disclaimer { margin-top: clamp(1.5rem, 3vw, 2rem); }

/* --- About: qualification cards --------------------------------------- */
/* Max: "stretch out the MBBS, FAOrthA, Grad Diploma and Professor so the
   cards are a little bit bigger and the yellow text all sits on the same
   starting line". Five tracks with the FRACS lockup on a wider one instead of
   six tracks with FRACS spanning two: the four narrow cards go from a sixth
   of the row to about a fifth. The gold awarding-body line is start-aligned
   in its shared row track, so every card's begins on one line; the "Visit"
   link stays end-aligned so the feet line up as well. */
/* 18 Sep call, Daevyd 16:58: "Make them all the same size." Five equal
   plates; the FRACS lockup is fitted into the same plate as the others. */
@media (min-width: 1100px) {
  .cred-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@supports (grid-template-rows: subgrid) {
  .cred__where { align-self: start; }
}

/* --- About: role cards ---------------------------------------------------- */
/* Max: on the SCOG and Fortius Allied Health cards "have the founder word
   on the same lines as the other two cards". The eyebrow was end-aligned in
   its shared track, which dropped a one-line "Founder" to the second line
   beside a two-line "Founder and Chief Medical Officer". Start-aligned, every
   eyebrow begins on the same line under its logo. */
@supports (grid-template-rows: subgrid) {
  .role-list--band .role__title { align-self: start; }
}

/* --- About and hubs: the Maroochy Private band ---------------------------- */
/* Max: "have that text centred in the middle and then have the video and the
   Maroochy Private Hospital picture on the same line". */
/* Max, 18 Sep 13:40: text left, "in line with the rest of the text", the
   film and photograph still side by side beneath it. */
.maroochy__text {
  max-width: 70ch;
}
.maroochy__text .section-header { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.maroochy__text p {
  color: var(--on-navy);
  line-height: 1.75;
}
.maroochy__text p + p { margin-top: 1.1rem; }
.maroochy__text a:not(.btn) {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: var(--gold-underline);
  text-underline-offset: 3px;
}
.maroochy__text .pull-quote { margin-block: clamp(1.75rem, 3.5vw, 2.5rem); }
}

/* The button pair sits inside .prose, whose link rule (0,1,1) colours and
   underlines every anchor; restate the button faces above it. */
.prose .cta-row .btn { text-decoration: none; }
.prose .cta-row .btn--primary { color: #FFFFFF; }
.prose .cta-row .btn--ghost { color: var(--heading); }




/* ==========================================================================
   18 Sep 2026, after the review call
   ========================================================================== */

/* --- Split heroes: feather the photo's left edge (Jessica 33:36) ------- */
/* "fade the left of that hero image, just so it doesn't look a real divide
   between the text and the image". Same mask the home hero uses. */
.page-hero--split .page-hero__img {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34%);
  mask-image: linear-gradient(to right, transparent 0, #000 34%);
}

/* --- Film band directly under the home hero (Daevyd 06:38) ------------- */
.film-band { padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); }
.film-band__figure { margin-block: 0; max-width: min(100%, 64rem); }

/* --- Fade band: a photograph that feathers into the copy ---------------- */
/* Daevyd, 22:19, of the home hero: "I do like the way that it kind of fades
   over and that the text is mainly over here." Used for the biography band
   and the Maroochy Private band on About, and the Maroochy band on the hubs.
   The photo is absolutely placed on the right, masked on its left edge and
   faded at its foot; the copy column sits on the left over solid ground. */
/* Max, 23 Sep, of the About hospital band: "have the image in line with the
   text directly, because right now it looks a little bit off with where the
   text sits and where the image is". Measured at 1440: the photo started at
   the section's top edge (y=0) while the copy started under the section's
   padding (y=128), so the photo sat 128px proud of the text on About and
   93px on the hubs. The photo now starts where the copy starts. --fb-pad
   mirrors the two section padding rules (.section at 1462 and
   .page-stacked .section at 5725) because the photo is absolutely placed and
   cannot read the padding itself. Keep the three in step. */
.fade-band { position: relative; overflow: hidden; --fb-pad: clamp(4rem, 10vw, 8rem); }
.page-stacked .fade-band { --fb-pad: clamp(3rem, 6vw, 5.25rem); }
.fade-band__photo {
  position: absolute;
  inset: var(--fb-pad) 0 auto auto;
  width: 56%;
  height: 100%;
  max-height: 720px;
  z-index: 0;
  pointer-events: none;
}
.fade-band__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Max, 21 Sep: Daevyd's face was sitting in the fade. The photo is
     anchored to its LEFT edge so the visible slice starts where he is, and
     the fade runs over the first 22% of the frame instead of 58%. */
  object-position: 0% 30%;
  display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,0.5) 12%, #000 24%), linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,0.5) 12%, #000 24%), linear-gradient(to bottom, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.fade-band__inner { position: relative; z-index: 1; }
/* Max, 21 Sep: "too much navy space". The copy column runs to the photo's
   edge, and once the photo has faded out below 900px the text has the width. */
.fade-band__copy { max-width: none; }
/* Max, 21 Sep: the text was running over the photograph. A floated spacer the
   size of the photo's solid part keeps the copy to the photo's left while it
   is beside it, and lets the copy spread to the right once it is past it.
   Paragraphs are capped at 80ch so the wide run below stays readable. */
.fade-band__copy::before {
  content: "";
  float: right;
  width: 56%;
  height: 720px;
  shape-outside: inset(0 0 0 0);
}
.fade-band__copy > * { max-width: 80ch; }
/* The hospital frame: anchored to its RIGHT edge so the Maroochy Private sign
   stays in the crop (the sign is on the building's right). The biography frame
   keeps the left anchor for Daevyd. */
#maroochy .fade-band__photo img { object-position: 100% 40%; }
/* 23 Sep: the biography frame is now the presentation photo, with Daevyd on
   the right and the audience across the left, so it anchors right too. */
#biography .fade-band__photo img { object-position: 100% 30%; }
.fade-band__copy p {
  color: var(--on-navy);
  line-height: 1.75;
}
.fade-band__copy p + p { margin-top: 1.1rem; }
.fade-band__copy .pull-quote { margin-block: clamp(1.5rem, 3vw, 2.25rem); text-align: left; }
.fade-band__copy .pull-quote__text { margin-inline: 0; }
.fade-band__copy .section-header { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
/* The band's own gallery and film sit under the copy, full width. */
.fade-band > .container + .container { position: relative; z-index: 1; margin-top: clamp(2rem, 4vw, 3rem); }
/* Max, 21 Sep: the film sat centred at 56rem while the gallery above it runs
   the full container, so its left edge did not line up. Full width now. */
.fade-band .maroochy__film { max-width: 100%; margin: clamp(2rem, 4vw, 3rem) 0 0; }
@media (max-width: 900px) {
  .fade-band__copy::before { display: none; }
  .fade-band__photo {
    position: static;
    width: 100%;
    height: clamp(240px, 42vh, 380px);
    margin-bottom: 1.5rem;
  }
  .fade-band__photo img {
    -webkit-mask-image: none;
    mask-image: none;
  }
}
/* Health-system-design copy is now one column with the quote inside it. */
.band-intro--single { grid-template-columns: minmax(0, 1fr); max-width: 68ch; }
.band-intro--single .pull-quote { margin-block: clamp(1.25rem, 2.5vw, 1.75rem); }

/* --- Hospital gallery: auto-scrolling row of whole photographs ---------- */
/* Daevyd 12:09 / 24:24. CSS marquee: the track holds the slides twice and
   translates by half its width, so the loop is seamless. Pauses on hover and
   focus. Under reduced motion, and on any coarse pointer, it is a static
   scroll-snap row the reader moves by hand. */
.gallery { overflow: hidden; margin-top: clamp(2rem, 4vw, 3rem); }
.gallery__track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  width: max-content;
  animation: gallery-scroll 48s linear infinite;
}
.gallery__dup { display: contents; }
.gallery:hover .gallery__track,
.gallery:focus-within .gallery__track { animation-play-state: paused; }
.gallery__slide {
  margin: 0;
  flex: 0 0 auto;
  width: min(520px, 78vw);
}
.gallery__slide picture { display: block; border-radius: var(--radius-lg); overflow: hidden; }
.gallery__slide img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.gallery__slide figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--on-navy-mut);
}
@keyframes gallery-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .gallery { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .gallery__track { animation: none; width: auto; }
  .gallery__dup { display: none; }
  .gallery__slide { scroll-snap-align: start; }
}

/* --- Referral pathway + booking band (home and About) ------------------- */
.pathway-band .pathway { margin-top: 0; }
.pathway-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* --- Research tiles with icons, as on Base44 (Daevyd 43:52) ------------ */
.role--tile .role__icon {
  display: block;
  width: 28px;
  height: 28px;
  color: var(--gold);
  margin-bottom: 1rem;
}
.role--tile .role__icon svg { width: 100%; height: 100%; }

/* --- Sporting Chance plate is a link now (Daevyd 43:05) ----------------- */
a.role__mark--link { text-decoration: none; }
a.role__mark--link:hover img,
a.role__mark--link:focus-visible img { opacity: 0.85; }

/* --- Pre-surgery checklist card (port_journey.checklist_card) ------------ */
/* Every selector below is written as `.checklist .x` so it outranks the
   article's own `.prose h3`, `.prose p` and `.prose ul` colour and spacing
   rules, which otherwise paint the card's headings white on cream. */
/* Their clipboard component, measured from the live DOM: cream card
   (#F5F5F0) with a grey clip tab, ink #1F3B4D, rows divided by hairlines,
   each with a tinted icon disc and an empty box. Light card on the dark page
   by design; #1F3B4D on #F5F5F0 is 10.6:1. */
.checklist {
  position: relative;
  max-width: 680px;
  margin: 1.75rem auto 2.5rem;
  background: #F5F5F0;
  color: #1F3B4D;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.4);
  padding-bottom: 1.5rem;
}
.checklist .checklist__clip {
  width: 96px;
  height: 26px;
  margin: 0 auto;
  background: #C9CDD1;
  border-bottom: 4px solid #A9AFB4;
}
.checklist .checklist__head { text-align: center; padding: 2rem 1.5rem 1.25rem; }
.checklist .checklist__kicker {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #1F3B4D;
  margin: 0;
}
.checklist .checklist__title {
  font-family: var(--heading-font);
  font-size: clamp(1.6rem, 3vw, 2.125rem);
  font-weight: 600;
  line-height: 1;
  color: #1F3B4D;
  margin: 0.75rem 0;
}
.checklist .checklist__tag {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #4B6E7D;
  margin: 0;
}
.checklist .checklist__list {
  list-style: none;
  margin: 0;
  padding: 0 1.5rem;
  color: #1F3B4D;
  border-top: 1px solid rgba(75, 110, 125, 0.18);
}
@media (min-width: 700px) {
  .checklist .checklist__head { padding-inline: 3rem; }
  .checklist .checklist__list { padding-inline: 3rem; }
}
.checklist .checklist__row {
  display: flex;
  padding-left: 0;
  list-style: none;
  align-items: center;
  gap: 0.9rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(75, 110, 125, 0.18);
  margin: 0;
}
.checklist .checklist__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #DCE3D5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1F3B4D;
}
.checklist .checklist__row:nth-child(3n+2) .checklist__icon { background: #E7D9CC; }
.checklist .checklist__row:nth-child(3n) .checklist__icon { background: #D9DCE8; }
.checklist .checklist__icon svg { width: 20px; height: 20px; }
.checklist .checklist__text {
  flex: 1;
  font-family: var(--body);
  font-size: 0.906rem;
  font-weight: 500;
  line-height: 1.5;
  color: #1F3B4D;
}
.checklist .checklist__box {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 1.5px solid #4B6E7D;
}
.checklist .checklist__row::before { content: none; }
.checklist .checklist__foot {
  text-align: center;
  margin: 1.25rem 0 0;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #4B6E7D;
}


/* ==========================================================================
   Research page, as Base44 lays it out (18 Sep 2026, Daevyd 43:52)
   ========================================================================== */
.pub-group__kicker {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 1rem;
}
.pub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 800px) { .pub-grid { grid-template-columns: minmax(0, 1fr); } }
.pub-tile {
  display: flex;
  flex-direction: column;
  background: var(--navy-soft);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 1.5rem 1.6rem 1.4rem;
}
.pub-tile__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.pub-tile__journal {
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.pub-tile__pill {
  flex-shrink: 0;
  font-family: var(--body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--steel);
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
}
.pub-tile__title {
  font-family: var(--heading-font);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--heading);
  margin: 0 0 0.75rem;
}
.pub-tile__cite {
  font-size: 0.8rem;
  color: var(--on-navy-mut);
  margin: 0 0 0.6rem;
}
.pub-tile__authors {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--on-navy);
  margin: 0 0 1.25rem;
}
.pub-tile__foot {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}
.pub-tile__year {
  font-family: var(--body);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--steel);
  line-height: 1;
}
.pub-tile__link {
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--heading);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-underline);
}
.pub-tile__link:hover { color: var(--gold); border-color: var(--gold); }
.pub-tile__pending { font-size: 0.78rem; color: var(--on-navy-mut); }

/* Grant: copy left, award and year on the right */
.grant__main { min-width: 0; }
.grant {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--navy-soft);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
@media (max-width: 800px) { .grant { grid-template-columns: minmax(0, 1fr); } }
.grant__top { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.grant__funder { font-family: var(--body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.grant__status { font-family: var(--body); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); background: var(--gold); padding: 0.3rem 0.6rem; border-radius: 3px; }
.grant__title { font-family: var(--heading-font); font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 400; line-height: 1.3; color: var(--heading); margin: 0 0 0.9rem; }
.grant__detail { font-size: 0.85rem; color: var(--on-navy-mut); margin: 0 0 0.6rem; }
.grant__authors { font-size: 0.85rem; color: var(--on-navy); margin: 0; }
.grant__side { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--hairline); padding-left: clamp(1.25rem, 3vw, 2.25rem); }
@media (max-width: 800px) { .grant__side { border-left: 0; border-top: 1px solid var(--hairline); padding: 1.25rem 0 0; } }
.grant__label { font-family: var(--body); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-navy-mut); margin-bottom: 0.2rem; }
.grant__figure { font-family: var(--body); font-size: clamp(1.9rem, 3vw, 2.4rem); font-weight: 700; color: var(--steel); line-height: 1.1; margin-bottom: 0.9rem; }
.grant__figure--small { font-size: 1.5rem; margin-bottom: 0; }

/* Trials: one bar per trial, role pill + sponsor + protocol on one line */
.trial-list { display: grid; gap: 1rem; }
.trial { background: var(--navy-soft); border: 1px solid var(--hairline); border-radius: 4px; padding: 1.5rem 1.75rem; }
.trial__top { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1rem; margin-bottom: 0.9rem; }
.trial__role { font-family: var(--body); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 3px; background: rgba(138, 155, 176, 0.22); color: var(--on-navy); }
.trial__role--pi { background: var(--gold); color: var(--navy); }
.trial__role--sub { background: var(--steel); color: #FFFFFF; }
.trial__sponsor { font-family: var(--body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.trial__protocol { font-size: 0.78rem; color: var(--on-navy-mut); }
.trial__title { font-family: var(--heading-font); font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 400; line-height: 1.35; color: var(--heading); margin: 0 0 0.6rem; }
.trial__note { font-size: 0.9rem; line-height: 1.6; color: var(--on-navy-mut); margin: 0; max-width: 70ch; }

/* Partnership: copy left, UniSC panel right */
.partnership { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 800px) { .partnership { grid-template-columns: minmax(0, 1fr); } }
.partnership__copy .section-header__eyebrow { display: block; margin-bottom: 1rem; }
.partnership__copy .section-header__lead { margin-bottom: 1.5rem; }
.partnership__copy .further { margin-top: 2rem; }
.partnership__panel {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--navy-soft); border: 1px solid var(--hairline); border-radius: 4px;
  padding: clamp(2rem, 4vw, 3rem) 1.5rem;
}
.partnership__panel .role__icon { width: 30px; height: 30px; color: var(--gold); margin-bottom: 1rem; }
.partnership__panel .role__icon svg { width: 100%; height: 100%; }
.partnership__title { font-family: var(--heading-font); font-size: 1.4rem; color: var(--heading); }
.partnership__org { font-size: 0.85rem; color: var(--on-navy-mut); margin-top: 0.3rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--hairline); }
.partnership__place { font-family: var(--body); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-navy-mut); margin-top: 0.9rem; }
/* The notes behind panels on this page sit closer than the article-foot panel. */
#publications .further, #grants .further, #trials .further { margin-top: 2rem; padding-top: 1.25rem; }

.band-note--quiet { border-left: 0; padding-left: 0; color: var(--on-navy-mut); font-size: 0.9rem; }


/* Journey hub photo cards (Jessica chose them 23 Sep over the dark and the
   light treatments): a cover frame at the head of the card. 16:10 keeps the
   two-up grid at a sane height (432px wide card, 270px frame); the film
   covers are 16:9 and the photographs 3:2, both cover-cropped to it. */
.card--photo .card__media--cover {
  aspect-ratio: 16 / 10;
  border-bottom: 0;
}
.card--photo .card__media--cover img { object-position: center 40%; }
.card--photo .card__media--cover::after { display: none; }



/* ==========================================================================
   23 Sep 2026: media page rebuild (Daevyd's feedback email, point 4, and
   Jessica's list the next morning). Press in date order with a picture beside
   every article, grouped by year; four films from his channel, click to play.
   ========================================================================== */

/* A year is a rule and a numeral, set to the left of its articles on desktop
   so the column of dates reads as a timeline. */
.press-year {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--hairline);
}
.section-header + .press-year { margin-top: 0; }
.press-year__label {
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  line-height: 1;
  color: var(--steel);
  position: sticky;
  top: 6.5rem; /* clears the sticky header */
  align-self: start;
  margin: 0;
}
.press-list { display: grid; gap: clamp(1rem, 2vw, 1.25rem); }

/* One article: picture left, words right, the whole bar is the link. */
.card.press-item {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
  background: var(--navy-soft);
}
/* The picture runs the full height of its bar, so a long note never leaves
   navy showing under a short image. */
.press-item__media {
  display: block;
  position: relative;
  min-height: 12.5rem;
  overflow: hidden;
  background: var(--navy-deep);
}
.press-item__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.press-item:hover .press-item__media img,
.press-item:focus-visible .press-item__media img { transform: scale(1.04); }
/* Logos sit whole on their light plate, never cropped. */
.press-item__media--mark { background: #F2F2F2; } /* the light plate the fund marks use */
.press-item__media--mark img { object-fit: contain; padding: 12% 16%; }
.press-item__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2.25rem);
  min-width: 0;
}
.press-item__body .card__eyebrow { font-size: 0.78rem; margin-bottom: 0.6rem; }
.press-item__title {
  display: block;
  font-family: var(--heading-font);
  font-size: var(--step-1);
  line-height: 1.3;
  color: var(--heading);
  margin-bottom: 0.6rem;
  transition: color var(--dur-fast) var(--ease);
}
.press-item:hover .press-item__title { color: var(--steel-light); }
.press-item__body .card__text { display: block; margin-bottom: 0.9rem; }
.press-item--compact {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--navy);
}
.press-item--compact .press-item__media { min-height: 9rem; }

@media (max-width: 900px) {
  .press-year { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .press-year__label { position: static; font-size: 2.25rem; }
}
@media (max-width: 720px) {
  .card.press-item { grid-template-columns: minmax(0, 1fr); }
  .press-item__media { min-height: 0; aspect-ratio: 16 / 10; }
  .press-item--compact .press-item__media { aspect-ratio: 16 / 6; }
}

/* Films: a two-up grid of 16:9 stills with a play mark, swapped for the
   player on click (build_more.YT_SCRIPT). Without the script the still is a
   plain link to YouTube. */
.film-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem);
}
.film { margin: 0; }
.film__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--navy-deep);
  overflow: hidden;
}
.film__frame iframe,
.film__link,
.film__link picture,
.film__link img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.film__link img { object-fit: cover; transition: transform 600ms var(--ease), filter var(--dur) var(--ease); }
.film__link:hover img,
.film__link:focus-visible img { transform: scale(1.03); filter: brightness(0.85); }
.film__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.5rem;
  height: 4.5rem;
  margin: -2.25rem 0 0 -2.25rem;
  border-radius: 50%;
  background: rgba(11, 17, 25, 0.72); /* --navy-deep at 72% */
  border: 1px solid rgba(242, 242, 242, 0.55);
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.film__play::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.7rem 0 0.7rem 1.15rem;
  border-color: transparent transparent transparent #F2F2F2;
}
.film__link:hover .film__play,
.film__link:focus-visible .film__play { background: var(--steel); transform: scale(1.06); }
.film__dur {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #F2F2F2;
  background: rgba(11, 17, 25, 0.8);
}
.film__caption { margin-top: 1rem; }
.film__caption .card__eyebrow { display: block; font-size: 0.78rem; margin-bottom: 0.45rem; }
.film__title {
  display: block;
  font-family: var(--heading-font);
  font-size: var(--step-1);
  line-height: 1.3;
  color: var(--heading);
  margin-bottom: 0.4rem;
}
.film__desc { display: block; color: var(--on-navy-mut); line-height: 1.65; }
@media (max-width: 720px) {
  .film-grid { grid-template-columns: minmax(0, 1fr); }
}

.band-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.band-actions__link { color: var(--steel-strong); font-weight: 600; }
.band-actions__link:hover { color: var(--steel-light); }