/* =========================================================================
   Cardiovascular Dietetics — Dr Jenni Suen
   Calm-clinical premium theme. Light default + prefers-color-scheme dark.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --brand:        #43603E;   /* deep eucalyptus green — DOMINANT brand */
  --brand-deep:   #2E4429;
  --brand-bright: #6E8C63;
  --brand-soft:   #DFE9D6;   /* soft sage surface */
  /* Logo palette — artery (red) / vein (blue) / plaque (orange) / wellness (green),
     refined into muted shades. Cool tones + deep red dominate; orange/green accent. */
  --artery:        #B0442E;
  --vein:          #6E93BE;
  --vein-deep:     #5E86B8;
  --plaque:        #D5943A;
  --wellness:      #7E9E56;

  --pulse:        #B0442E;   /* accent = terracotta / artery red (heart) */
  --pulse-soft:   #F1E0D8;
  --gold:         #A97C36;   /* muted brass — premium hairline/metallic accent, sparing */
  --gold-bright:  #C79A4E;
  --gold-soft:    #EADCBF;
  --destructive:  #C0392B;   /* form validation errors */

  /* Accent tokens — brighten in dark mode for contrast */
  --chip-bg:      var(--brand-soft);  /* icon chip background */
  --chip-ic:      var(--brand);       /* icon glyph */
  --accent-text:  var(--brand);       /* eyebrows, small accents, links, list icons */

  /* Neutrals */
  --bg:        #FBF8F1;      /* warm ivory */
  --bg-alt:    #FFFFFF;
  --surface:   #FFFFFF;
  --sand:      #F2E8D6;      /* warm section tint */
  --mist:      #E8EFDF;      /* soft sage-tinted section */
  --cream:     #FCF8EE;      /* soft warm section */
  --pillar-1:  #F4F8ED;      /* approach box — soft sage, stands off warm sand */
  --pillar-2:  #DEE8D2;
  --pillar-border: #C8D8B9;
  --ink:       #26302A;      /* deep warm green-charcoal */
  --ink-soft:  #556053;      /* muted secondary */
  --ink-faint: #7C857A;
  --line:      #E7E6DE;
  --line-strong:#D6D8CC;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(30,40,26,.05), 0 2px 6px rgba(30,40,26,.05);
  --shadow-md: 0 4px 14px rgba(30,40,26,.07), 0 10px 30px rgba(30,40,26,.06);
  --shadow-lg: 0 12px 30px rgba(30,40,26,.10), 0 30px 60px rgba(35,50,30,.10);
  --shadow-brand: 0 14px 34px rgba(35,50,30,.26);

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Type */
  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Layout */
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --nav-h: 76px;

  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-io:  cubic-bezier(.65,.05,.36,1);
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }

/* Fine film grain — tactile paper feel, barely-there */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none;
  opacity: .38; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
:root[data-theme="dark"] body::after { opacity: .26; }

/* Candlelight halo that follows the cursor — warm coral+brass, very soft.
   .cursor-glow positions (translate); __core carries the light so a press
   can concentrate + brighten it without touching the tracking transform. */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 55px; height: 55px; margin: -27.5px 0 0 -27.5px;
  pointer-events: none; z-index: 5; opacity: 0;   /* z-5 sits above the grain so nothing tints it */
  transition: opacity .6s ease; will-change: transform;
}
.cursor-glow.on { opacity: .4; }   /* 40% — the logo's own colours, just translucent */
.cursor-glow__core {
  width: 100%; height: 100%;
  background: url("../assets/brand/logo.svg") center / contain no-repeat;
  /* soft glowing haze hugging the logo shapes */
  filter: drop-shadow(0 0 4px rgba(96,126,86,.55)) drop-shadow(0 0 11px rgba(120,150,105,.32));
  transition: transform .3s var(--ease-out);
  will-change: transform;
}
/* on click: gentle concentrate (no colour-altering filter) */
.cursor-glow.pressing .cursor-glow__core { transform: scale(.86); }
@media (hover: none), (pointer: coarse) { .cursor-glow { display: none; } }
@media (prefers-reduced-motion: reduce) { .cursor-glow { display: none; } }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
:focus-visible { outline: 3px solid var(--brand-bright); outline-offset: 3px; border-radius: 4px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 500; line-height: 1.08; color: var(--ink); letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); font-weight: 500; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-text);
  display: inline-flex; align-items: center; gap: .55rem;
}
.eyebrow::before { content: ""; width: 28px; height: 1.5px; display: inline-block;
  background: linear-gradient(90deg, var(--pulse), var(--gold)); border-radius: 2px; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--ink-soft); line-height: 1.7; }
.serif-accent { font-family: var(--font-head); font-style: italic; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 10vw, 130px); position: relative; }
/* The nav is sticky, so an anchored section would otherwise start underneath it.
   Matters for the old Wix URLs, which 301 straight to a section. */
[id] { scroll-margin-top: 84px; }
.section--tight { padding-block: clamp(48px, 7vw, 90px); }
/* Alternating teal corner glow (same character as the hero top-right glow).
   isolate makes each section its own stacking context so the -1 layer sits
   above the section's colour but beneath its content. */
.glow-tr, .glow-tl { isolation: isolate; }
.glow-tr::before, .glow-tl::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(44% 40% at var(--gx, 88%) -6%, rgba(110,140,99,.14), transparent 70%);
}
.glow-tl { --gx: 12%; }
/* a touch stronger over the always-dark bands so it stays perceptible */
.conditions.glow-tr::before, .conditions.glow-tl::before,
.refer.glow-tr::before, .refer.glow-tl::before {
  background: radial-gradient(46% 42% at var(--gx, 88%) -6%, rgba(150,180,120,.22), transparent 70%);
}

.section-head { max-width: 660px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .lead { margin-top: 1.1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-weight: 600; font-size: 1rem; line-height: 1;
  padding: 1rem 1.6rem; border-radius: var(--r-pill);
  min-height: 52px; white-space: nowrap;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s, color .25s;
  will-change: transform;
}
.btn svg { width: 19px; height: 19px; }
.btn--primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
.btn--primary:hover { background: var(--brand-deep); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(35,50,30,.36); }
.btn--pulse { background: var(--pulse); color: #fff; box-shadow: 0 14px 30px rgba(178,58,46,.30); }
.btn--pulse:hover { background: #922E24; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.btn--light { background: #fff; color: var(--brand); box-shadow: var(--shadow-md); }
.btn--light:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn--block { width: 100%; }

.link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--accent-text); }
.link-arrow svg { width: 18px; height: 18px; transition: transform .25s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* =========================================================================
   Announcement bar
   ========================================================================= */
.announce {
  background: var(--brand-deep); color: #EEF3E6;
  font-size: .85rem; text-align: center; padding: .55rem var(--gutter);
  display: flex; align-items: center; justify-content: center; gap: .6rem;
}
.announce strong { color: #fff; }
.announce .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pulse); flex: none;
  box-shadow: 0 0 0 0 rgba(217,105,79,.6); animation: pulseDot 2.4s infinite; }
@keyframes pulseDot { 0%{box-shadow:0 0 0 0 rgba(217,105,79,.55);} 70%{box-shadow:0 0 0 8px rgba(217,105,79,0);} 100%{box-shadow:0 0 0 0 rgba(217,105,79,0);} }

/* =========================================================================
   Navigation
   ========================================================================= */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(201,213,188,.97);   /* sage green, consistent over every section */
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s, border-color .3s, background .3s, height .3s;
}
.nav.scrolled { box-shadow: var(--shadow-sm); border-color: var(--line); height: 66px; }
.nav__inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.nav__logo { display: flex; align-items: center; gap: .55rem; height: 46px; }
.nav__logo-mark { height: 100%; width: auto; }
.nav__logo-word { display: flex; flex-direction: column; line-height: 1.02; }
.nav__logo-word b { font-family: var(--font-head); font-weight: 500; font-size: 1.16rem; letter-spacing: -.015em; color: var(--ink); }
.nav__logo-word i { font-style: normal; font-family: var(--font-body); font-weight: 500; font-size: .58rem;
  letter-spacing: .355em; text-transform: uppercase; color: var(--accent-text); margin-top: 4px; text-indent: .355em; }
.nav.scrolled .nav__logo { height: 42px; }
.nav__links { display: flex; align-items: center; gap: .3rem; }
.nav__links a {
  position: relative;
  font-size: .95rem; font-weight: 500; color: var(--ink);
  padding: .55rem .7rem; transition: color .25s;
}
.nav__links a::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .28rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--gold));
  transform: scaleX(0); transform-origin: right; transition: transform .38s var(--ease-out);
}
.nav__links a:hover, .nav__links a.active { color: var(--accent-text); }
.nav__links a:hover::after, .nav__links a.active::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { display: flex; align-items: center; gap: .7rem; }
.nav__cta .btn { min-height: 46px; padding: .7rem 1.25rem; font-size: .95rem; }
.nav__toggle { display: none; width: 46px; height: 46px; border-radius: var(--r-sm); flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.nav__toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s, opacity .3s; }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--bg); padding: calc(var(--nav-h) + 20px) var(--gutter) 40px;
  display: flex; flex-direction: column; gap: .3rem;
  transform: translateX(100%); transition: transform .4s var(--ease-io);
  visibility: hidden;
}
.mobile-menu.open { transform: translateX(0); visibility: visible; }
.mobile-menu a { font-size: 1.35rem; font-family: var(--font-head); padding: 1rem 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.mobile-menu .btn { margin-top: 1.5rem; }

/* =========================================================================
   Hero
   ========================================================================= */
/* No bottom padding: the hero ends on the grid row's bottom line, which is exactly where
   the bottom-anchored portrait's flat edge sits — so the credentials band meets the photo
   instead of floating below it. The band carries its own breathing room. */
.hero { position: relative; padding-top: clamp(40px, 7vw, 80px); padding-bottom: 0; overflow: hidden;
  /* keep only the teal glow, top-right — the warm halo now follows the cursor */
  background: radial-gradient(58% 46% at 82% -6%, rgba(110,140,99,.14), transparent 72%);
}
/* clearer closing hairline under the hero — neutral line with a brass centre */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15,46,46,.10) 16%, rgba(169,124,54,.6) 50%, rgba(15,46,46,.10) 84%, transparent); }
.hero__grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__badge {
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.6rem;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  padding: .55rem 1.1rem; border-radius: var(--r-pill); font-size: .82rem; color: var(--ink-soft); font-weight: 500;
}
.hero__badge b { color: var(--ink); font-weight: 600; }
.hero h1 { margin-bottom: 1.4rem; }
.hero h1 em { font-family: var(--font-head); font-style: italic; color: var(--brand); }
.hero .lead { max-width: 30ch; margin-bottom: 2.2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 2.4rem; }
/* Three fixed columns rather than a wrapping flex row: as the copy column narrows the
   labels wrap inside their own column, instead of the third stat dropping to a
   lopsided second row. */
/* auto-fit rather than a fixed 3, so removing the "10+ years" stat at the client's
   request leaves two packed stats instead of two stretched across three tracks with
   a hole where the third used to be. */
.hero__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, max-content));
  gap: 1.6rem clamp(1.8rem, 3.2vw, 3rem); }
.hero__meta .stat b { font-family: var(--font-head); font-size: 1.9rem; color: var(--brand); display: block; line-height: 1; }
.hero__meta .stat span { font-size: .85rem; color: var(--ink-soft); }

/* Hero visual */
/* Upright portrait frame, matched to the studio photo's own proportion (0.648).
   The photo is presented as shot — no filter, no opacity, no overlay. */
/* 790 (ratio 0.435 => 344 wide) is 15% down from 930. Bottom-anchored so the figure's
   flat edge sits on the grid row's bottom line — the same line the hero ends on once its
   bottom padding is zeroed, so photo and section boundary meet exactly at every width
   rather than by a hand-tuned offset. */
.hero__visual { position: relative; width: 100%; max-width: 460px; height: 790px;
  margin-inline: auto; align-self: end; }
.hero__portrait { position: absolute; inset: 0; isolation: isolate; }
/* Cut-out: she stands on the page itself, so no frame, radius, shadow or backdrop.
   `contain` keeps the figure whole and height-limited, which leaves clear negative
   space either side for the floating cards. */
.hero__photo { position: absolute; inset: 0; z-index: 2;
  transition: transform 1.1s var(--ease-out); }
.hero__photo picture { display: block; width: 100%; height: 100%; }
.hero__photo img { width: 100%; height: 100%; object-fit: contain; object-position: center top; }
[data-reveal] .hero__photo { transform: scale(.9); }
[data-reveal].in .hero__photo { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .hero__photo, [data-reveal] .hero__photo { transform: none !important; }
}
/* Placeholder look when no photo yet */
.img-ph { position: relative; width: 100%; height: 100%; display: grid; place-items: center; color: var(--brand); }
.img-ph::after { content: attr(data-label); position: absolute; bottom: 14px; left: 14px; right: 14px; font-family: var(--font-body); font-size: .72rem; letter-spacing: .04em; color: var(--ink-faint); text-align: center; }
.img-ph svg { width: 46px; height: 46px; opacity: .5; }

.hero__float {
  position: absolute; z-index: 3; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: .85rem 1rem;
  display: flex; align-items: center; gap: .7rem; font-size: .85rem;
}
.hero__float .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.hero__float b { display: block; color: var(--ink); font-size: .95rem; font-family: var(--font-head); }
.hero__float span { color: var(--ink-soft); }
/* Stacked pair on the right: Food-first above, Heart & vascular beneath it.
   Both cleared against the measured face (y 5-31%) and hands (y 65-76%) boxes. */
.hero__float--2 { bottom: 55%; right: -12%; }
.hero__float--1 { top: auto; left: auto; bottom: 41%; right: -12%; }
.hero__float .ic--teal { background: var(--chip-bg); color: var(--chip-ic); }
.hero__float .ic--pulse { background: var(--pulse-soft); color: var(--pulse); }

/* ECG ribbon behind */
.hero__ecg { position: absolute; left: 0; right: 0; bottom: -2px; height: 120px; z-index: -1; opacity: .5; pointer-events: none; }
.hero__ecg path { fill: none; stroke: var(--brand-bright); stroke-width: 2; }

.blob { position: absolute; border-radius: 50%; filter: blur(70px); z-index: -2; opacity: .35; }
.blob--1 { width: 460px; height: 460px; background: var(--brand-soft); top: -120px; right: -140px; }
.blob--2 { width: 380px; height: 380px; background: var(--gold-soft); bottom: -160px; left: -120px; opacity: .28; }

/* =========================================================================
   Trust / credential bar
   ========================================================================= */
.trust { border-block: 1px solid var(--line-strong); background: var(--sand); box-shadow: 0 6px 20px rgba(30,40,26,.04); }
.trust__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; padding-block: 26px; }
.trust__label { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.trust__items { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2.4rem; }
.trust__item { display: flex; align-items: center; gap: .6rem; color: var(--ink-soft); font-weight: 600; font-size: .95rem; }
.trust__item svg { width: 22px; height: 22px; color: var(--accent-text); flex: none; }

/* =========================================================================
   Generic cards / grids
   ========================================================================= */
.grid { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s;
}
/* signature: a teal→coral→brass hairline draws across the top on hover */
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--vein), var(--artery) 38%, var(--plaque) 68%, var(--wellness));
  transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease-out);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.card:hover::before { transform: scaleX(1); }
.card__ic { width: 54px; height: 54px; border-radius: 14px; background: var(--chip-bg); color: var(--chip-ic); display: grid; place-items: center; margin-bottom: 1.2rem;
  transition: transform .45s var(--ease-out), background .3s, color .3s; }
.card__ic svg { width: 27px; height: 27px; transition: transform .45s var(--ease-out); }
.card:hover .card__ic { transform: translateY(-3px); }
.card:hover .card__ic svg { transform: scale(1.09); }
.card h3 { margin-bottom: .6rem; }
.card p { color: var(--ink-soft); font-size: .98rem; }

/* Approach — numbered */
/* =========================================================================
   Introduction film
   A dark band between About and Approach. The surrounding sections are light,
   so this frames the video the way a cinema does and marks it as the one thing
   on the page worth stopping for. Section backgrounds here are set by explicit
   class, never nth-child, so inserting this band re-colours nothing below it.
   ========================================================================= */
.film-band { background: #24361F; position: relative; overflow: hidden; }
.film-band .section-head { max-width: 720px; }
.film-band .eyebrow { color: #A2C68F; }
.film-band h2 { color: #fff; }
.film-band .lead { color: #C5D6B8; }

.film { margin: 0; }
.film__frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg);
  overflow: hidden; background: #12190E;
  box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.07);
}
.film__video { display: block; width: 100%; height: 100%; object-fit: cover; background: #12190E; }
/* brand the captions rather than accepting the browser default box */
.film__video::cue {
  background: rgba(22,32,15,.80); color: #fff;
  font-family: var(--font-body); font-size: .92em; line-height: 1.35;
}
.film figcaption {
  margin-top: 1.05rem; text-align: center; font-size: .88rem; color: #A9BC9C;
}

/* poster overlay: hidden until JS enables it, so with JS off the native poster
   and controls still work */
.film__play {
  position: absolute; inset: 0; width: 100%; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
  background: linear-gradient(180deg, rgba(18,25,14,.10), rgba(18,25,14,.55));
  color: #fff; cursor: pointer; border: 0; transition: background .3s var(--ease-out);
}
.film__play:hover { background: linear-gradient(180deg, rgba(18,25,14,.18), rgba(18,25,14,.62)); }
.film__play-ic {
  width: clamp(64px, 7vw, 88px); aspect-ratio: 1; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--pulse); color: #fff;
  box-shadow: 0 14px 34px rgba(0,0,0,.42);
  transition: transform .35s var(--ease-out), background .25s;
}
.film__play-ic svg { width: 42%; height: 42%; margin-left: 8%; }
.film__play:hover .film__play-ic { transform: scale(1.07); background: #C24C33; }
.film__play:focus-visible { outline: 3px solid #A2C68F; outline-offset: -6px; }
.film__play-tx { display: grid; gap: .25rem; text-align: center; }
.film__play-tx b { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.05rem,2vw,1.35rem); }
.film__play-tx i { font-style: normal; font-size: .84rem; color: #CFE0C2; letter-spacing: .02em; }

/* end card: the real, clickable call to action */
.film__end {
  position: absolute; inset: 0; display: grid; align-content: center; justify-items: center;
  gap: .55rem; padding: clamp(20px,4vw,40px); text-align: center;
  background: rgba(24,36,20,.90); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);   /* iOS 15-17 */
}
.film__end-h { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.4rem,3.4vw,2rem); color: #fff; }
.film__end-p { color: #C5D6B8; font-size: clamp(.9rem,1.6vw,1rem); max-width: 46ch; }
.film__end-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: center; margin-top: .9rem; }
.film__replay {
  background: transparent; color: #C5D6B8; border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 999px; padding: .7rem 1.3rem; font: inherit; font-size: .92rem; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.film__replay:hover { color: #fff; border-color: rgba(255,255,255,.6); }
/* The browser's default [hidden]{display:none} is a type-less rule and loses to
   the class selectors above, so the hidden attribute would do nothing and the end
   card would sit over the poster on load. This restores it. */
.film__play[hidden], .film__end[hidden] { display: none; }

/* A 16:9 frame is only ~189px tall at phone widths, but the full end card needs
   209px — so the heading was clipped off the top and the button ran past the
   bottom. Everything shrinks and the supporting line goes: the button label
   already says "Book an online consult", so the sentence above it was repeating
   itself in the one place with no room to spare. */
@media (max-width: 680px) {
  .film__end { padding: 12px 14px; gap: .3rem; }
  .film__end-h { font-size: 1.1rem; line-height: 1.2; }
  .film__end-p { display: none; }
  .film__end-row { margin-top: .45rem; gap: .45rem; width: 100%; }
  .film__end .btn { padding: .62rem 1rem; font-size: .92rem; }
  .film__end .btn svg { width: 17px; height: 17px; }
  .film__replay { padding: .45rem 1rem; font-size: .85rem; }
}

@media (max-width: 560px) {
  .film__play-tx i { display: none; }
  .film figcaption { font-size: .8rem; }
}

.approach { background: var(--sand); }
.approach__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.pillars { display: grid; gap: 14px; }
.pillar {
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: linear-gradient(155deg, var(--pillar-1) 0%, var(--pillar-2) 100%);
  border: 1px solid var(--pillar-border); border-radius: var(--r-md);
  padding: 1.3rem 1.4rem; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.pillar:hover { transform: translateX(6px); box-shadow: var(--shadow-md); }
/* deliberate cascade entrance for the numbered boxes */
.pillars [data-reveal] { transform: translate(-12px, 22px); }
.pillars [data-reveal].in { transform: none; }
.pillar__n { font-family: var(--font-head); font-size: 1.1rem; color: #fff; background: var(--brand); width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.pillar h4 { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; margin-bottom: .25rem; }
.pillar p { color: var(--ink-soft); font-size: .95rem; }

/* =========================================================================
   About
   ========================================================================= */
/* Portrait beside the bio. The photo is shown as shot — no mask, no wash, no filter —
   so the text sits on clean background rather than on top of the image. */
.about { position: relative; overflow: hidden; }
.about__grid { display: grid; grid-template-columns: minmax(0, 1.125fr) minmax(0, 0.875fr);
  gap: clamp(32px, 5vw, 72px); align-items: center; }
.about__figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.about__figure img { display: block; width: 100%; height: auto; }
.about .about__body { position: relative; z-index: 1; max-width: 470px; margin-left: auto; }
.about__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 2rem; margin-top: 2rem; }
.about__meta .sign { margin-top: 0; }
.about__cred { display: inline-flex; align-items: center; gap: .8rem; background: var(--brand); color: #fff;
  padding: .85rem 1.15rem; border-radius: var(--r-md); box-shadow: var(--shadow-brand); max-width: 270px; }
.about__cred b { font-family: var(--font-head); font-size: 1.7rem; line-height: 1; flex: none; }
.about__cred span { font-size: .78rem; opacity: .92; line-height: 1.35; }
@media (max-width: 900px) {
  /* stack: portrait above the bio, capped so it doesn't swallow the viewport */
  .about__grid { grid-template-columns: 1fr; }
  .about__figure { max-width: 360px; margin-inline: auto; }
}
.about__body p { color: var(--ink-soft); margin-top: 1.1rem; }
.about__body p:first-of-type { color: var(--ink); font-size: 1.15rem; }
/* The name must never break across two lines. flex-wrap lets the credentials sit beside it
   when there is room and drop to their own line when there isn't — on narrow phones the
   old nowrap row squeezed "Dr Jenni Suen" onto two lines. */
.sign { margin-top: 1.8rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; }
.sign__name { font-family: var(--font-head); font-style: italic; font-size: 1.4rem; color: var(--brand); white-space: nowrap; }
/* over the photo, the signature and role need full-strength ink, not the faint tokens */
.about .sign__name { color: var(--ink); }
.sign__role { font-size: .9rem; color: var(--ink-soft); }
.about .sign__role { color: var(--ink); font-weight: 500; }
.about__list { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.4rem; margin-top: 1.8rem; }
.about__list li { display: flex; gap: .55rem; align-items: flex-start; font-size: .95rem; color: var(--ink); }
.about__list svg { width: 20px; height: 20px; color: var(--accent-text); flex: none; margin-top: 1px; }

/* =========================================================================
   Services
   ========================================================================= */
.services { background: var(--mist); }
.svc { display: flex; flex-direction: column; height: 100%; }
.svc__tag { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--pulse); margin-bottom: .8rem; }
.svc p { color: var(--ink-soft); font-size: .98rem; margin-bottom: 1.2rem; }
.svc__list { display: grid; gap: .5rem; margin-top: auto; }
.svc__list li { display: flex; gap: .5rem; align-items: flex-start; font-size: .92rem; color: var(--ink-soft); }
.svc__list svg { width: 18px; height: 18px; color: var(--accent-text); flex: none; margin-top: 2px; }
/* Secondary heading + list ("Manage common complications", "Common planned procedures").
   Only the first .svc__list takes the auto margin that bottom-aligns the block;
   subsequent ones sit tight under their own heading. */
.svc__more { font-family: var(--font-head); font-weight: 500; font-size: 1.02rem; margin: 1.4rem 0 .7rem; }
.svc__list--more { margin-top: 0; }

/* The card's detail block is present in the HTML for crawlers but not shown in the card —
   it is read into #svcModal on "Learn more". Do NOT swap this for JS-injected content:
   the point of keeping it in the markup is that search engines can index it. */
.svc__detail { display: none; }
.svc__btn { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center;
  gap: .45rem; background: none; border: 0; padding: .2rem 0; cursor: pointer;
  font-family: inherit; font-size: .95rem; font-weight: 600; color: var(--accent-text);
  border-bottom: 1.5px solid currentColor; transition: gap .25s var(--ease-out), opacity .25s var(--ease-out); }
.svc__btn svg { width: 17px; height: 17px; }
.svc__btn:hover { gap: .75rem; }
.svc__btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: 2px; }

/* Service detail dialog */
.svcmodal .modal__dialog { max-width: 620px; }
.svcmodal__body p { color: var(--ink-soft); margin-bottom: 1.2rem; }
.svcmodal__body .svc__list { margin-top: 0; }
.svcmodal__body .svc__more { margin-top: 1.6rem; }
.svcmodal__foot { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }

/* Conditions marquee */
.conditions { background: var(--brand-deep); color: #EEF3E6; overflow: hidden; }
.conditions .section-head h2 { color: #fff; }
.conditions .section-head .lead { color: #C2D2B4; }
.marquee { display: flex; gap: 14px; width: max-content; animation: marquee 42s linear infinite; }
.marquee--rev { animation-direction: reverse; }
.marquee-wrap { position: relative; margin-top: 8px; }
.marquee-wrap + .marquee-wrap { margin-top: 14px; }
.marquee-wrap::before, .marquee-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; }
.marquee-wrap::before { left: 0; background: linear-gradient(90deg, var(--brand-deep), transparent); }
.marquee-wrap::after { right: 0; background: linear-gradient(-90deg, var(--brand-deep), transparent); }
.chip {
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05);
  padding: .7rem 1.2rem; border-radius: var(--r-pill); white-space: nowrap; font-size: .95rem; font-weight: 500;
  display: flex; align-items: center; gap: .55rem;
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pulse); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .marquee-wrap::before,.marquee-wrap::after{display:none;} }

/* =========================================================================
   Consultations (Online featured + In-person)
   ========================================================================= */
.consults__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(20px, 3vw, 30px); align-items: stretch; }
.consult {
  border-radius: var(--r-xl); padding: clamp(28px, 3.6vw, 44px); position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.consult--online { background: linear-gradient(155deg, var(--brand), var(--brand-deep)); color: #EEF3E6; box-shadow: var(--shadow-lg); }
.consult--online h3, .consult--online h2 { color: #fff; }
.consult--clinic { background: var(--surface); border: 1px solid var(--line); }
.consult__ribbon { position: absolute; top: 28px; right: -56px; z-index: 3; width: 200px; text-align: center;
  background: var(--pulse); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .42rem 0; transform: rotate(45deg); box-shadow: 0 6px 14px rgba(0,0,0,.16); }
.consult .tag-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 1.4rem; }
.consult--online .tag-ic { background: rgba(255,255,255,.14); color: #fff; }
.consult--clinic .tag-ic { background: var(--chip-bg); color: var(--chip-ic); }
.consult h3 { font-size: clamp(1.5rem,2.4vw,1.9rem); margin-bottom: .5rem; }
.consult__sub { font-size: .95rem; opacity: .92; margin-bottom: 1.4rem; }
.consult--clinic .consult__sub { color: var(--ink-soft); opacity: 1; }
.consult__feat { display: grid; gap: .7rem; margin-bottom: 1.8rem; }
.consult__feat li { display: flex; gap: .6rem; align-items: flex-start; font-size: .96rem; }
.consult__feat svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.consult--online .consult__feat svg { color: #A2C68F; }
.consult--clinic .consult__feat svg { color: var(--brand); }
.consult__foot { margin-top: auto; }
.consult__addr { font-size: .9rem; color: var(--ink-soft); margin-bottom: 1.2rem; line-height: 1.6; }
.consult--clinic .btn { width: 100%; }

/* Steps — "How an online consult works": lifted into its own panel so the process
   reads as a headline feature of the online clinic, not a footnote. */
.steps { margin-top: clamp(46px,5.5vw,76px); }
/* Same sage panel treatment as the approach pillars, so it reads as a distinct block
   against the warm ivory section (and against the deep green in dark mode). */
.steps__panel { position: relative; overflow: hidden; border-radius: var(--r-xl);
  background: linear-gradient(168deg, var(--pillar-1) 0%, var(--pillar-2) 100%);
  border: 1px solid var(--pillar-border); box-shadow: var(--shadow-lg);
  padding: clamp(32px,4.6vw,66px) clamp(22px,3.6vw,56px); }
.steps__glow { position: absolute; top: -34%; right: -8%; width: min(560px, 62%); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(110,140,99,.20), transparent 68%); pointer-events: none; }
.steps__head { position: relative; max-width: 660px; margin: 0 auto clamp(32px,4.2vw,54px); text-align: center; }
.steps__head .eyebrow { justify-content: center; }
.steps__head h3 { font-family: var(--font-head); font-size: clamp(1.7rem,3vw,2.4rem); line-height: 1.14; margin-top: .55rem; }
.steps__head .lead { margin-top: .9rem; font-size: clamp(1rem,1.35vw,1.1rem); }
.steps__track { position: relative; display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px,1.6vw,22px); list-style: none; }
.step { position: relative; padding-top: 66px; }
.step__node { position: absolute; top: 0; left: 0; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; z-index: 2;
  background: linear-gradient(150deg, var(--brand), var(--brand-deep)); color: #fff;
  border: 3px solid var(--pillar-1); box-shadow: var(--shadow-brand);
  transition: transform .5s var(--ease-out); }
.step__num { font-family: var(--font-head); font-size: 1.2rem; font-weight: 600; line-height: 1; }
/* connecting rail, drawn left→right as each step reveals */
.step::after { content: ""; position: absolute; top: 23px; left: 48px; right: calc(-1 * clamp(12px,1.6vw,22px));
  height: 2px; z-index: 1; background: linear-gradient(90deg, var(--brand), var(--brand-soft));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1s var(--ease-out) .15s; }
.step.in::after { transform: scaleX(1); }
.step:last-child::after { display: none; }
.step:hover .step__node { transform: scale(1.08); }
.step h4 { font-family: var(--font-body); font-size: 1.06rem; font-weight: 700; margin-bottom: .35rem; }
.step p { font-size: .9rem; color: var(--ink-soft); line-height: 1.6; }
.steps__foot { position: relative; margin-top: clamp(32px,4.2vw,52px); display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 1rem 1.7rem; text-align: center; }
.steps__note { font-size: .9rem; color: var(--ink-soft); }

/* =========================================================================
   Testimonials
   ========================================================================= */
.testi { background: var(--sand); }
.quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px,3vw,32px); display: flex; flex-direction: column; }
.quote__mark { display: block; font-family: var(--font-head); font-size: 3.4rem; line-height: .6; color: var(--brand-soft); height: 34px; }
.quote blockquote { margin: 0; }
.quote p { color: var(--ink); font-size: 1.02rem; margin-bottom: 1.4rem; }
.quote__by { display: flex; align-items: center; gap: .8rem; }

/* -------- Client experience carousel --------
   Scroll-snap rather than a JS slider: the track scrolls natively with a
   trackpad, a touch swipe or the keyboard, so it still works with JS off. The
   arrows are hidden in the markup and revealed by JS, since they are the only
   part that needs it. */
.tcar { --tgap: clamp(18px, 2.4vw, 26px); position: relative; }
.tcar__viewport {
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
  padding-block: 4px;                 /* room for focus ring */
}
.tcar__viewport::-webkit-scrollbar { display: none; }
.tcar__viewport:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: var(--r-lg); }
.tcar__track { display: flex; gap: var(--tgap); list-style: none; margin: 0; padding: 0; }
.tcar__item {
  flex: 0 0 calc((100% - 2 * var(--tgap)) / 3);
  scroll-snap-align: start; display: flex;
}
.tcar__item > .quote { flex: 1; }
@media (max-width: 1000px) { .tcar__item { flex-basis: calc((100% - var(--tgap)) / 2); } }
@media (max-width: 680px)  { .tcar__item { flex-basis: 100%; } }

.tcar__ctrl { display: flex; align-items: center; gap: .6rem; margin-top: 1.5rem; }
.tcar__ctrl[hidden] { display: none; }
.tcar__count { margin-right: auto; font-size: .85rem; color: var(--ink-soft); }
.tcar__nav {
  width: 46px; height: 46px; flex: none; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: var(--surface);
  border: 1.5px solid var(--line-strong); color: var(--ink);
  transition: color .2s, border-color .2s, background .2s, opacity .2s;
}
.tcar__nav svg { width: 20px; height: 20px; }
.tcar__nav:hover:not(:disabled) { color: var(--brand); border-color: var(--brand); }
.tcar__nav:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.tcar__nav:disabled { opacity: .3; cursor: default; }
.quote__av { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg,var(--brand),var(--brand-bright)); color: #fff; display: grid; place-items: center; font-family: var(--font-head); flex: none; }
.quote__by b { display: block; font-size: .95rem; }
/* --ink-faint measures 3.82:1 on the card in light mode, under AA for 13px text.
   The suburb is the part that carries "she sees people anywhere", so it has to be
   readable, not decorative. */
.quote__by span { font-size: .82rem; color: var(--ink-soft); }
/* Stars sit directly above the name, so `margin-top:auto` lives here rather than
   on .quote__by - that keeps the stars and the attribution together as one block
   pinned to the bottom of a card, whatever length the quote is.
   --gold rather than --gold-bright: the brighter tone measures 2.57:1 on a white
   card, under the 3:1 that a meaningful graphic needs. */
.stars { display: flex; gap: 2px; color: var(--gold); margin-top: auto; margin-bottom: .5rem; }
.stars svg { width: 16px; height: 16px; }
.ph-note { text-align: center; font-size: .85rem; color: var(--ink-soft); margin-top: 1.6rem; font-style: italic; }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px,4vw,60px); align-items: start; }
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.3rem 0; font-family: var(--font-head); font-size: 1.12rem; color: var(--ink); }
.acc__q .pm { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex: none; position: relative; transition: background .3s, border-color .3s; }
.acc__q .pm::before, .acc__q .pm::after { content: ""; position: absolute; background: var(--ink); border-radius: 2px; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: transform .3s, background .3s; }
.acc__q .pm::before { width: 12px; height: 2px; }
.acc__q .pm::after { width: 2px; height: 12px; }
.acc__item.open .pm { background: var(--brand); border-color: var(--brand); }
.acc__item.open .pm::before, .acc__item.open .pm::after { background: #fff; }
.acc__item.open .pm::after { transform: translate(-50%,-50%) rotate(90deg); }
.acc__a { overflow: hidden; height: 0; transition: height .35s var(--ease-out); }
.acc__a-inner { padding-bottom: 1.4rem; color: var(--ink-soft); font-size: .98rem; }
.acc__a-inner a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================================
   Referrals (health professionals)
   ========================================================================= */
.refer { background: var(--brand-deep); color: #DCEBE6; }
.refer .section-head h2 { color: #fff; }
.refer .section-head .lead { color: #C2D2B4; }
.refer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px,2.4vw,26px); }
.refer__card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-lg); padding: clamp(24px,3vw,34px); }
.refer__card h3 { color: #fff; margin-bottom: 1rem; }
.refer__row { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .95rem; }
.refer__row:last-child { border-bottom: none; }
.refer__row span { color: #A6B89A; }
.refer__row b { color: #fff; font-weight: 600; text-align: right; }
.refer__note { margin-top: 1.5rem; font-size: .9rem; color: #A6B89A; }
/* For specialists — its own headed sub-section below the two GP referral cards. The
   eyebrow + h2 sit outside the panel so it reads as a sibling of "For GPs", not a card. */
.refer__spec-head { margin-top: clamp(54px, 7vw, 90px); }
.refer__spec { background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-lg);
  padding: clamp(24px,3vw,34px); display: flex; align-items: center;
  justify-content: space-between; gap: clamp(20px,3vw,40px); flex-wrap: wrap; }
.refer__speclist { display: grid; gap: .7rem; }
.refer__speclist li { display: flex; gap: .6rem; align-items: flex-start; font-size: .96rem; color: #DCEBE6; }
.refer__speclist svg { width: 20px; height: 20px; color: #A2C68F; flex: none; margin-top: 2px; }
/* min-width:0 — without it the flex item refuses to shrink below its 420px basis on very
   narrow phones. The referral values and emails break for the same reason as the footer. */
.refer__spec-body { flex: 1 1 420px; min-width: 0; }
.refer__row b, .refer__note, .refer__speclist li { overflow-wrap: anywhere; }
.refer__spec-cta { flex: 0 1 auto; min-width: 0; max-width: 100%; }

/* =========================================================================
   CTA band
   ========================================================================= */
.ctaband { text-align: center; }
.ctaband__inner { background: linear-gradient(150deg, var(--brand), var(--brand-bright)); border-radius: var(--r-xl); padding: clamp(44px,6vw,84px) var(--gutter); color: #fff; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
.ctaband h2 { color: #fff; max-width: 16ch; margin-inline: auto; }
.ctaband p { color: rgba(255,255,255,.88); max-width: 46ch; margin: 1.1rem auto 2rem; font-size: 1.1rem; }
.ctaband__actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.ctaband .pulse-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.16); }
.ctaband .pulse-ring.a { width: 300px; height: 300px; top: -120px; left: -80px; }
.ctaband .pulse-ring.b { width: 220px; height: 220px; bottom: -100px; right: -40px; }

/* =========================================================================
   Footer
   ========================================================================= */
.footer { background: #1E2C1A; color: #B4C2A8; padding-top: clamp(56px,7vw,90px); border-top: 1px solid rgba(255,255,255,.06); }
.footer a:hover { color: #fff; }
/* auto-fit rather than fixed columns: the four fixed columns needed ~914px and stayed in
   force from 761px up, so the footer pushed the whole page wider than the viewport
   between 761px and ~930px. This reflows 4 -> 3 -> 2 -> 1 with no breakpoint gap. */
/* The 260px floor (was 190px) is set by .footer__badge: it has to hold "Accredited
   Practising Dietitian" on one unbroken line, which needs ~243px including the icon and
   padding. At a 190px floor the brand track sat at 232px even at full width, so the
   credential always wrapped to three lines. The floor also removes two dead bands
   (~761-930px and ~470-530px) where the old reflow left tracks too narrow for it. */
.footer__top { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(28px,4vw,48px); padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.1); }
/* Above 1100px, pin four explicit columns and give the brand column the extra room, so
   the desktop footer keeps its four-across layout instead of reflowing to three. */
@media (min-width: 1100px) { .footer__top { grid-template-columns: 1.35fr 1fr 1fr 1fr; } }
/* The contact emails are single unbreakable tokens ~285px wide, which set the min-content
   width of their grid columns and forced .footer__top — and with it the page — wider than
   the viewport. Letting them break is what actually keeps the footer inside the screen. */
.footer__top a, .footer__top li, .footer__bottom a { overflow-wrap: anywhere; }
.footer__logo { display: inline-flex; align-items: center; gap: .6rem; }
.footer__logo img { height: 50px; width: auto; }
.footer__logo-word { display: flex; flex-direction: column; line-height: 1.02; }
.footer__logo-word b { font-family: var(--font-head); font-weight: 500; font-size: 1.24rem; letter-spacing: -.015em; color: #fff; }
.footer__logo-word i { font-style: normal; font-family: var(--font-body); font-weight: 500; font-size: .62rem;
  letter-spacing: .355em; text-transform: uppercase; color: #A2C68F; margin-top: 4px; text-indent: .355em; }
.footer__brand p { margin-top: 1.1rem; font-size: .95rem; max-width: 34ch; }
.footer h4 { color: #fff; font-family: var(--font-body); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.1rem; }
/* Footer links were 18px tall with a 10px gap. That clears WCAG 2.5.8 on the
   spacing exception, but it is still a fiddly target for a thumb. The padding
   grows the hit area to ~28px and the gap shrinks to match, so the visual rhythm
   barely moves. */
.footer ul { display: grid; gap: .3rem; font-size: .95rem; }
.footer ul a { display: inline-block; padding-block: 5px; }
.footer__bottom nav a { display: inline-block; padding-block: 4px; }
.footer__contact li { display: flex; gap: .6rem; align-items: flex-start; }
.footer__contact svg { width: 18px; height: 18px; color: #A2C68F; flex: none; margin-top: 3px; }
.footer__badge { display: inline-flex; align-items: center; gap: .6rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); padding: .7rem .9rem; border-radius: var(--r-md); margin-top: 1rem; font-size: .82rem; }
.footer__badge svg { width: 24px; height: 24px; color: #A2C68F; flex: none; }
/* nowrap kills only soft wrapping; the <br> between the credential and the awarding body
   still breaks. Without this the credential itself splits across two lines. */
.footer__badge span { white-space: nowrap; }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 26px; font-size: .85rem; color: #8A9A80; }
.footer__bottom nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* =========================================================================
   Reveal animation base (JS adds .in)
   ========================================================================= */
[data-reveal] { opacity: 0; transform: translateY(24px); }
.reveal-ready [data-reveal] { transition: opacity 1.15s var(--ease-out), transform 1.15s var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }

/* Masked heading reveal — text rises from behind a line (hand-crafted, not fade-up) */
.h-mask { overflow: hidden; padding-bottom: .06em; }
.h-mask > .h-inner { display: block; transform: translateY(115%); transition: transform 1.4s cubic-bezier(.19,1,.22,1); will-change: transform; }
/* Release the compositor layer once the reveal has finished — a promoted layer that
   outlives its animation can fail to rasterise inside a rounded, clipped container. */
.h-mask.in > .h-inner { transform: none; will-change: auto; }
/* …and inside the steps panel (rounded + overflow:hidden + shadow) never promote at all:
   the heading dropped out entirely there. One heading, no measurable cost. */
.steps__panel .h-mask > .h-inner { will-change: auto; }

/* Media clip-reveal — image wipes open rather than fading */
[data-reveal="clip"] { opacity: 1; transform: none; }
.reveal-ready [data-reveal="clip"] { clip-path: inset(0 0 101% 0); transition: clip-path 1.5s cubic-bezier(.19,1,.22,1); }
.reveal-ready [data-reveal="clip"].in { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-reveal="clip"] { clip-path: none !important; }
  .h-mask > .h-inner { transform: none !important; transition: none !important; }
  .announce .dot { animation: none; }
}

/* Magnetic buttons get a springy transform driven by JS; keep GPU-friendly */
.magnetic { will-change: transform; }

/* =========================================================================
   Enquiry modal + form  (themed for light + dark)
   ========================================================================= */
.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: clamp(14px, 4vw, 40px); visibility: hidden; }
.modal.open { visibility: visible; }
.modal__scrim { position: absolute; inset: 0; background: rgba(8,24,24,.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .4s ease; }
.modal.open .modal__scrim { opacity: 1; }
.modal__dialog { position: relative; width: 100%; max-width: 580px; max-height: 92vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: clamp(24px, 4vw, 40px);
  transform: translateY(18px) scale(.985); opacity: 0;
  transition: transform .5s var(--ease-out), opacity .45s var(--ease-out); }
.modal.open .modal__dialog { transform: none; opacity: 1; }
.modal__close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-soft); transition: background .2s, color .2s; }
.modal__close:hover { background: var(--brand-soft); color: var(--accent-text); }
.modal__close svg { width: 20px; height: 20px; }
.modal__head { margin-bottom: 1.5rem; padding-right: 2.5rem; }
.modal__head h3 { margin: .55rem 0; font-size: clamp(1.4rem, 3vw, 1.85rem); }
.modal__head p { color: var(--ink-soft); font-size: .95rem; }
.modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.field { margin-bottom: 1rem; }
.field > label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); margin-bottom: .4rem; }
.field > label span { color: var(--pulse); }
.field input, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  background: var(--bg); border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  padding: .8rem .9rem; transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 108px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(67,96,62,.22); }
.field.invalid input, .field.invalid textarea { border-color: var(--destructive); }
.field__err { display: block; color: var(--destructive); font-size: .8rem; margin-top: .35rem; }
.modal__form .btn { margin-top: .4rem; }
.modal__note { font-size: .82rem; color: var(--ink-faint); text-align: center; margin-top: .85rem; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.modal__success { text-align: center; padding: 1.5rem 0; }
.modal__success .ok { width: 62px; height: 62px; border-radius: 50%; background: var(--brand-soft); color: var(--accent-text);
  display: grid; place-items: center; margin: 0 auto 1.1rem; }
.modal__success .ok svg { width: 32px; height: 32px; }
.modal__success h3 { margin-bottom: .5rem; }
.modal__success p { color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 520px) { .modal__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .modal__scrim, .modal__dialog { transition: none; } .modal__dialog { transform: none; } }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { max-width: 440px; margin-inline: auto; width: 100%; }
  /* Keep hanging the cards off the frame — the stacked layout centres a 440px photo and
     leaves slack either side. The offsets are a % of a narrower frame here, so the left
     card needs to sit further out to stay clear of her hair. */
  .hero__float--1, .hero__float--2 { right: -17%; left: auto; }
  .about__grid, .approach__grid, .consults__grid, .faq__grid, .about__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 420px; }
  .about__cred { right: 4%; }
  .steps__track { grid-template-columns: repeat(3,1fr); row-gap: clamp(26px,4vw,38px); }
  .step:nth-child(3)::after { display: none; }
  .grid--4 { grid-template-columns: repeat(2,1fr); }
  .refer__grid { grid-template-columns: 1fr; }
}
/* The header collapses on its own schedule, not with the rest of the layout. Logo + links
   + CTA intrinsically need ~925px; leaving them in place down to 760px made .nav__inner
   wider than the viewport, and because .modal is position:fixed it then sized to that
   inflated page width and pushed the dialog off-screen too. */
@media (max-width: 1000px) {
  .nav__links, .nav__cta .btn--ghost { display: none; }
  .nav__toggle { display: flex; }
  .nav__toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle.active span:nth-child(2) { opacity: 0; }
  .nav__toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
/* Below this the logo, theme toggle, Book button and hamburger no longer fit on one line.
   The Book CTA is dropped here only — it is still in the hero and in the mobile menu. */
@media (max-width: 560px) {
  .nav__cta .btn--primary { display: none; }
  .nav__logo { flex: none; }
}
/* 320px-class phones: the wordmark plus both controls still just miss. Trim the wordmark
   rather than drop a control — the logo is the one thing that should survive every width. */
@media (max-width: 360px) {
  .nav__logo { height: 40px; }
  .nav__logo-word b { font-size: 1rem; }
  .nav__logo-word i { font-size: .52rem; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .grid--2, .grid--3, .grid--4, .services .grid { grid-template-columns: 1fr; }
  /* vertical timeline: nodes stack down the left with a continuous rail between them */
  .steps__track { grid-template-columns: 1fr; gap: 0; }
  .step { padding-top: 0; padding-left: 64px; padding-bottom: 26px; }
  .step__node { width: 42px; height: 42px; top: 0; }
  .step__num { font-size: 1.05rem; }
  .step::after { top: 42px; left: 20px; right: auto; bottom: 0; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--brand), var(--brand-soft));
    transform: scaleY(0); transform-origin: top center; }
  .step.in::after { transform: scaleY(1); }
  .step:nth-child(3)::after { display: block; }
  .step:last-child { padding-bottom: 0; }
  .about__list { grid-template-columns: 1fr; }
  .hero__meta { gap: 1.2rem 1.8rem; }
  .footer__brand { grid-column: 1 / -1; }
  .about__cred { position: static; margin-top: 1rem; max-width: none; display: inline-flex; align-items: center; gap: .8rem; }
  .about__cred b { font-size: 1.6rem; }

  /* The portrait is a tall, narrow cut-out (900x2067), so at the desktop 790px
     frame it eats a whole phone screen. 500px brings it in line with the About
     photo, which renders ~503px tall here. object-fit is contain, so the width
     follows the height rather than cropping her. */
  .hero__visual { height: 500px; }

  /* -------- footer, compacted --------
     Four stacked blocks add up fast on a phone. The tap-target padding added
     earlier is kept (targets stay above 24px) but the list gap goes to zero and
     the line-height tightens, so the padding provides the separation instead of
     stacking on top of it. Explore alone drops from 267px to about 200px. */
  .footer { padding-top: clamp(40px, 8vw, 56px); }
  .footer__top { gap: 24px; padding-bottom: 28px; }
  .footer h4 { margin-bottom: .6rem; }
  .footer__brand p { margin-top: .85rem; }
  .footer__badge { margin-top: .85rem; }
  .footer ul { gap: 0; }
  .footer ul a { padding-block: 4px; line-height: 1.4; }
  .footer ul.footer__contact { gap: .45rem; }
  .footer__bottom { padding-block: 18px; }
  .footer__logo img { height: 44px; }
}
/* Below this the centred frame no longer has room for the cards to hang clear of her,
   and forcing them inward would put them back over her face. Decorative — drop them. */
@media (max-width: 760px) { .hero__float { display: none; } }
@media (max-width: 460px) {
  .btn { width: 100%; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
}

/* =========================================================================
   Dark mode (prefers-color-scheme + [data-theme=dark])
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121A0E; --bg-alt: #17210F; --surface: #1B2717; --sand: #17210F;
    --ink: #EBF1E4; --ink-soft: #B0BFA6; --ink-faint: #8A9A80;
    --line: #2A3A22; --line-strong: #384B2E; --brand-soft: #26381E;
    --mist: #172310; --cream: #14200E;
    --pillar-1: #22331A; --pillar-2: #172310; --pillar-border: #35502A;
    --destructive: #F2836F;
    --chip-bg: #2B4021; --chip-ic: #A7D08F; --accent-text: #9BC585;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 8px 24px rgba(0,0,0,.4);
    --shadow-lg: 0 20px 48px rgba(0,0,0,.5);
  }
  :root:not([data-theme="light"]) .nav { background: rgba(19,27,15,.86); }
  :root:not([data-theme="light"]) .announce { background: #061414; }
  :root:not([data-theme="light"]) .btn--light { background: var(--surface); color: #fff; }
}
:root[data-theme="dark"] {
  --bg: #121A0E; --bg-alt: #17210F; --surface: #1B2717; --sand: #17210F;
  --ink: #EBF1E4; --ink-soft: #B0BFA6; --ink-faint: #8A9A80;
  --line: #2A3A22; --line-strong: #384B2E; --brand-soft: #26381E;
  --mist: #172310; --cream: #14200E;
  --pillar-1: #22331A; --pillar-2: #172310; --pillar-border: #35502A;
  --destructive: #F2836F;
  --chip-bg: #2B4021; --chip-ic: #A7D08F; --accent-text: #9BC585;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 8px 24px rgba(0,0,0,.4);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.5);
}
:root[data-theme="dark"] .nav { background: rgba(19,27,15,.86); }
:root[data-theme="dark"] .announce { background: #061414; }
:root[data-theme="dark"] .btn--light { background: var(--surface); color: #fff; }

.theme-toggle { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-soft); border: 1.5px solid var(--line); transition: color .2s, border-color .2s, background .2s; flex: none; }
.theme-toggle:hover { color: var(--accent-text); border-color: var(--accent-text); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: block; }
}

/* Reduced motion: the step rail is decorative — show it drawn, never animate it.
   Declared last so it wins over the responsive (vertical rail) overrides above. */
@media (prefers-reduced-motion: reduce) {
  .step::after, .step.in::after { transform: none; transition: none; }
  .step__node { transition: none; }
}