/* ==========================================================================
   MENLO PHYSIO: Stylesheet
   Movement-first physiotherapy. Menlo Park, Pretoria.

   Direction: cream base (#F5F0E6), frosted-glass (glassmorphism) cards, and a
   flowing fibrous "ligament" background that drifts and answers the mouse.
   Navy and red are Hoerskool Menlo Park's colours, kept school-adjacent.

   Type: Montserrat (headings), Inter (body + UI), Pinyon Script (accents).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Menlo Physio brandkit: site-wide */
  --cream:       #F5F0E6;   /* page background, the main colour */
  --cream-deep:  #ECE4CF;
  --navy:        #0E2867;   /* brandkit deep navy */
  --navy-deep:   #081A47;
  --navy-soft:   #2A4282;
  --lavender:    #898ED0;   /* brandkit mid-blue accent */
  --red:         #D00A1E;   /* brandkit red */
  --red-deep:    #A50817;
  --light:       #FEFEFE;   /* brandkit white */
  --ink:         #1B1D30;
  --ink-soft:    #585E78;
  --wa:          #25D366;
  --wa-deep:     #1EA952;

  /* Tabita's individual brand (used ONLY inside her team bubble) */
  --tabita-warm:    #FD9260;  /* new beginnings */
  --tabita-heal:    #BAE0AE;  /* healing */
  --tabita-free:    #82C8E5;  /* freedom */
  --tabita-trust:   #173084;  /* trustworthy */
  --tabita-plum:    #6E2D4E;  /* subtitle plum, from her wordmark */

  /* Narita's individual brand (used ONLY inside her team bubble) */
  --narita-sage:    #6E8E6C;  /* card background */
  --narita-sage-dp: #4F6E4E;
  --narita-cream:   #F4EFE3;  /* card foreground */

  /* Glass */
  --glass:       rgba(255, 255, 255, 0.42);
  --glass-hi:    rgba(255, 255, 255, 0.58);
  --glass-edge:  rgba(255, 255, 255, 0.70);
  --glass-blur:  blur(16px) saturate(155%);

  --line:        rgba(14, 40, 103, 0.14);
  --line-soft:   rgba(14, 40, 103, 0.08);

  --f-head:   "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-body:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-script: "Pinyon Script", "Segoe Script", cursive;

  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --glow-navy:   0 12px 30px rgba(14, 40, 103, 0.28);
  --glow-navy-h: 0 18px 46px rgba(14, 40, 103, 0.42);
  --glow-wa:     0 12px 30px rgba(37, 211, 102, 0.42);
  --glow-wa-h:   0 18px 48px rgba(37, 211, 102, 0.58);
  --glow-glass:  0 14px 40px rgba(14, 40, 103, 0.16);
  --glow-glass-h:0 26px 60px rgba(14, 40, 103, 0.26);
  --glow-red:    0 12px 30px rgba(208, 10, 30, 0.28);

  --wrap:  1180px;
  --nav-h: 76px;
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Reset + base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
::selection { background: var(--navy); color: var(--cream); }

/* Visible focus ring. Red alone is too low-contrast on the navy nav/footer,
   so a white halo (box-shadow) rides along to keep the indicator visible on
   dark surfaces too. The outline carries it on light surfaces. */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9);
}

h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 600; }

/* Skip link: first focusable element, drops into view on keyboard focus. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 200;
  background: var(--navy);
  color: var(--cream);
  padding: 10px 16px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }

/* Visually hidden, still read by screen readers. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Ligament background canvas
   -------------------------------------------------------------------------- */
.bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 32px;
  position: relative;
}

.section { padding-block: 112px; position: relative; }

/* Each homepage section (Our Team, Treatments, Book Here, Reviews) fills the
   viewport below the nav and centres its content, so jumping to it from the nav
   lands on a section that owns the whole screen, with no next section peeking in.
   scroll-margin-top keeps the anchor jump clear of the sticky nav. */
#team, #treatments, #book, #reviews {
  min-height: calc(100svh - var(--nav-h));
  scroll-margin-top: var(--nav-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Reviews carries light content (just the rating card), so it hugs its
   content near the top instead of being forced to a full, mostly-empty
   screen. This closes the large gap after the Book Here section. */
#reviews {
  min-height: auto;
  justify-content: flex-start;
  padding-block: clamp(34px, 4.5vh, 56px);
}
/* On desktop, size Reviews so the section plus the footer (~420px) fill
   exactly one screen, the composition Chenélle approved. */
@media (min-width: 861px) {
  #reviews { min-height: calc(100svh - var(--nav-h) - 420px); }
}

.section-label {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.section-label::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--red);
  opacity: 0.55;
}

.section-title {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--navy);
  text-wrap: balance;
}
.section-title em {
  font-family: var(--f-script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.5em;
  line-height: 0.5;
  color: var(--red);
}

.section-lead {
  font-size: 18px;
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 56ch;
}

@media (max-width: 860px) {
  .wrap { padding-inline: 22px; }
  .section { padding-block: 56px; }
  body { font-size: 16px; }
  /* On phones, let the stacked sections size to their content so they flow
     continuously into one another instead of each forcing a full screen with
     empty gaps. The hero keeps its own full-height layout. */
  #team, #treatments, #book, #reviews { min-height: auto; }
}

/* --------------------------------------------------------------------------
   Buttons: every button carries a glow
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 0.22s var(--ease), box-shadow 0.28s var(--ease),
              background 0.22s var(--ease), color 0.22s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }

.btn-navy { background: var(--navy); color: var(--light); box-shadow: var(--glow-navy); }
.btn-navy:hover { background: var(--navy-deep); box-shadow: var(--glow-navy-h); }

.btn-glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--navy);
  border-color: var(--glass-edge);
  box-shadow: var(--glow-glass);
}
.btn-glass:hover { background: var(--glass-hi); box-shadow: var(--glow-glass-h); }

/* Darkened WhatsApp green: white button text now meets WCAG AA
   (~5:1, was ~2:1 on the bright #25D366). */
.btn-wa { background: #15803D; color: #fff; box-shadow: var(--glow-wa); }
.btn-wa:hover { background: #126A33; box-shadow: var(--glow-wa-h); }

.btn-lg { padding: 18px 36px; font-size: 16px; }
.btn-lg svg { width: 20px; height: 20px; }

/* Hero "Book Here": a red outline around the button so the primary action
   stands out among the three glass buttons. */
.btn-book-hero {
  border: 2px solid var(--red);
}

/* --------------------------------------------------------------------------
   Navbar: deep navy banner with the Menlo Physio wordmark on the left
   and cream links on the right. The wordmark renders as text (cream
   "MENLO" + red "PHYSIO") so there's no white rectangle around the logo.
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--navy);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.nav.scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 28px rgba(8, 26, 71, 0.22);
}

.nav-inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.01em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
  text-transform: uppercase;
}
.wordmark-menlo  { color: var(--navy); }
.wordmark-physio { color: var(--red); }

/* Inside the navy banner, MENLO becomes cream so it reads. */
.nav .wordmark-menlo { color: var(--cream); }
.footer .wordmark-menlo { color: var(--cream); }

.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: rgba(245, 240, 230, 0.78);
  transition: color 0.15s ease;
}
.nav-link:hover { color: var(--cream); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  width: 22px; height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer {
  display: none;
  flex-direction: column;
  padding: 10px 22px 24px;
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-drawer.open { display: flex; }
.nav-drawer .nav-link {
  font-size: 17px;
  padding: 14px 0;
  color: rgba(245, 240, 230, 0.86);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}

/* --------------------------------------------------------------------------
   Hero: two-column on desktop. Text left, ambient video on the right.
   Glass buttons stay centred at the bottom, anchoring the layout.
   Mobile (<860px) stacks centred.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  padding: 0;
}
.hero .wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: calc(100svh - var(--nav-h));
  padding-top: clamp(20px, 4vh, 36px);
  padding-bottom: clamp(28px, 5vh, 64px);
  gap: 18px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  align-self: center;
  max-width: clamp(280px, 50vw, 580px);
  /* Nudge the headline in from the far-left edge so the hero reads as a tighter
     composition with less empty middle. Reset to centred on mobile below. */
  margin-left: clamp(8px, 6vw, 130px);
  gap: clamp(28px, 4.5vh, 52px);
}

.hero-eyebrow {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
  max-width: 44ch;
  opacity: 0;
  animation: rise 0.8s 0.95s var(--ease) forwards;
}

/* --------------------------------------------------------------------------
   Hero ambient video layer: sits between the canvas ligaments and the
   hero text. Two muted videos crossfade in a continuous loop:
       walk → hand → walk → hand
   Styled to feel like part of the moving ligament background: ~50%
   opacity, navy-tinted, blended into cream, edges softly masked.
   -------------------------------------------------------------------------- */
.hero { overflow: hidden; }

/* Video lives on the right of the hero. The new hand clip is portrait, so the
   container takes the clip's own ratio and runs the full hero height on the
   right. The left side stays clear cream so the headline + eyebrow are legible. */
.hero-video {
  position: absolute;
  /* The whole video layer is multiplied onto the page, so the clip's white
     background drops out into the cream AND the flowing background lines show
     through the figure. The container itself stays transparent (no cream fill). */
  background: transparent;
  mix-blend-mode: multiply;
  /* Anchored to the right, full hero height. Width derives from the clip's
     portrait ratio (768x900). The radial mask fades the container edges so the
     hand reads clearly in the centre-right and melts into the cream behind the
     headline. */
  top: 0;
  left: auto;
  right: 4%;
  height: 100%;
  width: auto;
  aspect-ratio: 512 / 632;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 78% 90% at 54% 48%, #000 0%, #000 54%, transparent 94%);
          mask-image: radial-gradient(ellipse 78% 90% at 54% 48%, #000 0%, #000 54%, transparent 94%);
}

/* The radial mask already handles the fade. Skip the wash so the hand
   stays crisp at its centre. */
.hero-video::after { content: none; }

/* The crossfade pair. Both fill the hero; opacity toggled by .is-on.
   Multiply drops the bright source background onto the cream; blur and
   lowered saturation push it to a translucent, glass-like ambient layer.
   `object-fit: contain` keeps the whole hand in frame, never cropping
   the fingertips. */
.hv-clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  /* Container does the multiply blend now; the clip just paints into it. */
  mix-blend-mode: normal;
  /* Colour and contrast are baked into the clip, so there is no per-frame CSS
     filter here: that keeps compositing cheap and playback smooth. The multiply
     blend drops the clip's white background onto the cream; .is-on sets strength. */
  opacity: 0;
  transition: opacity 1.4s var(--ease);
  will-change: opacity;
}
.hv-clip.is-on { opacity: 0.9; }

/* Screen-blend tint removed: it lightened the video area into a visible panel
   and fought the cream backing. The figure now etches straight onto the cream. */
.hero-video::before { content: none; }

@media (max-width: 860px) {
  /* Mobile hero is one vertical stack that scales off the viewport HEIGHT, so
     it lands the same on every phone, iPhone or Samsung, short or tall:
     eyebrow at the top, headline below it, the hand in a fixed middle band,
     and the buttons pinned to the bottom. Spacing is a share of the height,
     and the hand band uses max(px, %) floors so it can never crowd the
     headline above it or the buttons below it on a short screen. */
  .hero .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-top: 16px;
    padding-bottom: 34px;
  }
  .hero-content {
    max-width: 100%;
    align-items: center;
    text-align: center;
    margin-left: 0;
    /* Modest, height-scaled gap below the nav so the headline is not stranded
       far down the screen. Tuned with the hand band below so the gap above the
       headline matches the gaps above and below the hand: an even stack. */
    margin-top: clamp(16px, 4vh, 40px);
  }
  .hero-video {
    /* Band set by top + bottom (a share of the hero height), not by the
       video width, so the hand lands in the same place on every screen.
       object-fit: contain (below) keeps the whole hand inside the band, so it
       never spills into the headline or the buttons. */
    /* Constant insets on normal/tall phones keep the hand a steady ~45px below
       the eyebrow and ~45px above the buttons, so all three gaps read as even.
       The percentage ceiling lets the band shrink in step on short phones so it
       never overlaps the eyebrow or crowds the buttons. */
    top: min(280px, 42%);
    bottom: min(220px, 34%);
    left: 4%;
    right: 4%;
    width: auto;
    height: auto;
    transform: none;
    aspect-ratio: auto;
    -webkit-mask-image: radial-gradient(ellipse 82% 84% at 50% 50%, #000 0%, #000 48%, transparent 94%);
            mask-image: radial-gradient(ellipse 82% 84% at 50% 50%, #000 0%, #000 48%, transparent 94%);
  }
  .hv-clip {
    object-fit: contain;
  }
  .hv-clip.is-on { opacity: 0.85; }
}

/* --------------------------------------------------------------------------
   Book Here ambient video: walking figure as a soft left-side wash
   behind the booking CTA. Same glass-treatment as the hero hand video.
   -------------------------------------------------------------------------- */
#book { position: relative; overflow: hidden; }
/* Full-bleed wrap with a 4% inline gutter so the right-aligned booking copy lands
   the same 4% off the right edge as the legs sit off the left edge: a symmetric,
   centred composition. Floored at 22px so narrow screens keep a sensible gutter. */
#book .wrap { position: relative; z-index: 2; max-width: none; padding-inline: max(22px, 4%); }
.start-video {
  position: absolute;
  /* Whole layer multiplied onto the page (see .hero-video): the white drops out
     and the background lines show through the legs. Container stays transparent. */
  background: transparent;
  mix-blend-mode: multiply;
  /* Mirror of the hero hand, flipped to the LEFT. The new legs clip is portrait,
     so the container takes the clip's own ratio and runs the full section height
     on the left. The radial mask fades the right edge so the booking copy on the
     right stays clear. The 4% left gutter mirrors the hero hand's right:4% so the
     legs are no longer clipped at the edge and balance the right-aligned copy. */
  top: 0;
  left: 4%;
  right: auto;
  bottom: auto;
  height: 100%;
  width: auto;
  aspect-ratio: 512 / 624;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 78% 90% at 46% 48%, #000 0%, #000 54%, transparent 94%);
          mask-image: radial-gradient(ellipse 78% 90% at 46% 48%, #000 0%, #000 54%, transparent 94%);
}
/* No cream wash, so the legs stay crisp top-to-bottom like the hero hand. */
.start-video::after { content: none; }
.sv-clip {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Container does the multiply blend now; the clip just paints into it. */
  mix-blend-mode: normal;
  /* Colour baked into the clip; no per-frame CSS filter (keeps compositing cheap). */
  opacity: 0;
  transition: opacity 1.4s var(--ease);
  will-change: opacity;
}
.sv-clip.is-on { opacity: 0.9; }
@media (max-width: 860px) {
  /* Walking figure drops to a band at the bottom of the section, below the
     booking copy and buttons, so it never sits behind the text. */
  #book { padding-bottom: 300px; }
  .start-video {
    width: 100%;
    left: 0;
    top: auto;
    bottom: 0;
    height: 270px;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 64%, #000 0%, #000 42%, transparent 92%);
            mask-image: radial-gradient(ellipse 80% 80% at 50% 64%, #000 0%, #000 42%, transparent 92%);
    -webkit-mask-composite: source-over;
            mask-composite: add;
  }
  .sv-clip.is-on { opacity: 0.85; }
}

.hero-title {
  font-family: var(--f-head);
  color: var(--navy);
  margin: 0;
  line-height: 1;
  letter-spacing: -0.02em;
}
/* Three stacked lines, big Montserrat. Whole title navy; the middle
   word "Movement," picks up the red accent. Left-aligned on desktop. */
.hero-line {
  display: block;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: clamp(2.1rem, 7vw, 5rem);
  line-height: 0.95;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin: 0;
  white-space: nowrap;
  opacity: 0;
  animation: rise 0.85s var(--ease) forwards;
}
.hero-line:nth-child(1) { animation-delay: 0.35s; }
.hero-line:nth-child(2) { animation-delay: 0.5s; }
.hero-line:nth-child(3) { animation-delay: 0.65s; }
.hero-accent { color: var(--red); }

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  opacity: 0;
  animation: rise 0.9s 1.5s var(--ease) forwards;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 860px) {
  /* Hero buttons: two per row, pinned to the bottom of the hero. This sits
     after the base .hero-actions rule so it wins the cascade. A lone trailing
     button (odd count, e.g. three buttons) spans the row and centres. */
  .hero-actions {
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 340px;
  }
  .hero-actions .btn { width: 100%; padding-inline: 12px; }
  .hero-actions .btn:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 6px);
  }
}

@media (max-width: 600px) {
  .hero-line { white-space: normal; }
}

/* --------------------------------------------------------------------------
   Glass card: shared frosted-glass surface
   -------------------------------------------------------------------------- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glow-glass), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   Book Here: booking CTA, sits over the walking-figure wash
   -------------------------------------------------------------------------- */
.book-head {
  text-align: right;
  margin-left: auto;
  /* Flush to the wrap's right content edge; the wrap's 4% gutter then mirrors the
     legs' 4% left gutter, so the copy and the legs are symmetric about the centre. */
  margin-right: 0;
  max-width: 640px;
  margin-bottom: 34px;
}
/* Larger, more prominent booking headline and supporting line. */
.book-head .section-title { font-size: clamp(1.9rem, 5.2vw, 3.9rem); }
.book-head .section-label { margin-bottom: 18px; }
.book-head .section-lead { margin-top: 30px; font-size: 21px; }

.book-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  margin-left: auto;
  margin-right: 0;
  max-width: 640px;
}

/* Entry point to the Patient Intake Form, sits under the booking CTA. */
.book-note {
  margin-left: auto;
  max-width: 640px;
  margin-top: 30px;
  text-align: right;
  font-size: 16px;
  color: var(--ink-soft);
}
.book-note a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.book-note a:hover { color: var(--red); }

@media (max-width: 860px) {
  .book-head, .book-actions, .book-note { margin-left: 0; margin-right: 0; text-align: center; align-items: center; justify-content: center; max-width: 100%; }
}

/* Desktop: lift the booking content a little above centre. */
@media (min-width: 821px) {
  #book .wrap { margin-bottom: clamp(40px, 12vh, 130px); }
}

/* --------------------------------------------------------------------------
   Our Team: glass cards
   -------------------------------------------------------------------------- */
/* Our Team runs wider and tighter so both cards fit one screen below the nav. */
#team { padding-block: clamp(20px, 3vh, 40px); }
#team .wrap { max-width: 1340px; }
.team-head { margin-bottom: 12px; }
.team-head .section-label { margin-bottom: 8px; }
/* Smaller than the Reviews title so the eyebrow, heading and both cards fit one screen. */
.team-head .section-title { font-size: clamp(1.6rem, 2.7vw, 1.95rem); }
.team-head .section-lead { margin-top: 14px; }

.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.team-card {
  border-radius: var(--r-xl);
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
              background 0.4s var(--ease);
}
.team-card:hover {
  transform: translateY(-12px);
  background: var(--glass-hi);
  box-shadow: var(--glow-glass-h), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.team-card.pending { border-style: dashed; }

/* Practitioner photo inside the team bubble, framed under the logo. Kept square to
   match the source headshot (no crop). Narita's is a placeholder until hers arrives. */
.team-photo {
  width: 100%;
  max-width: 210px;
  aspect-ratio: 1 / 1;
  margin: 2px auto;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 12px 28px rgba(14, 40, 103, 0.22);
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-photo-pending {
  display: grid;
  place-items: center;
  border-style: dashed;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}
.team-photo-pending span {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.72;
  text-align: center;
  padding: 8px;
}

.team-role {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-top: 8px;
}
.team-block { margin-top: 9px; }
.team-block-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 5px;
}
.team-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.team-tag {
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--navy);
  border: 1px solid var(--line);
}
.team-tag.tbc { font-style: italic; color: var(--ink-soft); }

/* Fun facts: short bullet lines that replaced the treatment tags on each card. */
.team-facts { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.team-facts li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: inherit;
}
.team-facts li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
}
.team-facts li.tbc { font-style: italic; opacity: 0.72; }

/* Same format as the HPCSA line below it: same size and colour, no bullet. */
.team-note {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 4px;
}

.team-hpcsa { margin-top: 7px; font-size: 12px; color: var(--ink-soft); }

@media (max-width: 820px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-card { padding: 24px; }
}

/* Desktop: stretch both bubbles to fill the section, from under the heading
   down to the bottom of the screen, instead of centring them with empty space
   above and below. Mobile keeps content-height cards (they already fill). */
@media (min-width: 821px) {
  /* Cards size to their content (logo, photo, details) and centre within the
     section, so there's no empty band inside the bubble. Credentials still sit at
     the bottom of each card so the two bubbles line up. */
  #team .team-card .team-hpcsa { margin-top: auto; }
}

/* --- Tabita's individual brand: applied ONLY inside her team bubble --- */
/* Her brand reads blue + maroon (deep blue #173084 and plum #6E2D4E, both from
   her wordmark), so her bubble is a blue-to-plum fill with cream text, the same
   way Narita's bubble is a sage fill. Her warm peach stays as the accent pop. */
.team-card.tabita {
  background:
    linear-gradient(158deg, rgba(23, 48, 132, 0.93) 0%, rgba(110, 45, 78, 0.95) 100%);
  color: var(--cream);
  border-color: rgba(23, 48, 132, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
.team-card.tabita:hover {
  background:
    linear-gradient(158deg, rgba(23, 48, 132, 1) 0%, rgba(110, 45, 78, 1) 100%);
}
.brand-mark {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(23, 48, 132, 0.14);
}
.brand-mark-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.brand-mark-icon svg { width: 100%; height: 100%; }
/* Image-based brand-mark: full logo PNG drops in as one piece */
.brand-mark-img {
  display: block;
  padding: 2px 0 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(23, 48, 132, 0.14);
}
.brand-logo {
  display: block;
  width: 100%;
  max-width: 135px;
  height: auto;
  margin: 0 auto;
  /* white background of the PNG drops out cleanly on the light glass card */
  mix-blend-mode: multiply;
}
/* Frame Tabita's logo the same way as Narita's: a clean box with padding so it
   reads as a framed mark. Her card is now a dark blue-plum fill, so the white box
   (her logo's native background) sits in a soft light border with a lift shadow. */
.tabita .brand-logo {
  mix-blend-mode: normal;
  border-radius: var(--r-md);
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}
.tabita .brand-mark-img { border-bottom-color: rgba(244, 239, 227, 0.22); }
.tabita .team-role { color: rgba(244, 239, 227, 0.82); }
.tabita .team-block-title { color: rgba(244, 239, 227, 0.7); }
.tabita .team-tag {
  background: rgba(255, 255, 255, 0.14);
  color: var(--cream);
  border-color: rgba(255, 255, 255, 0.26);
}
.tabita .team-note { color: rgba(244, 239, 227, 0.7); }
.tabita .team-facts li::before { background: var(--tabita-warm); }
.tabita .team-hpcsa { color: rgba(244, 239, 227, 0.7); }

/* --- Narita's individual brand: applied ONLY inside her team bubble --- */
.team-card.narita {
  background:
    linear-gradient(160deg, rgba(110, 142, 108, 0.85) 0%, rgba(79, 110, 78, 0.92) 100%);
  color: var(--narita-cream);
  border-color: rgba(79, 110, 78, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
.team-card.narita:hover {
  background:
    linear-gradient(160deg, rgba(110, 142, 108, 0.95) 0%, rgba(79, 110, 78, 1) 100%);
}
.narita .brand-mark { border-bottom-color: rgba(244, 239, 227, 0.22); }
.narita .brand-mark-img { border-bottom-color: rgba(244, 239, 227, 0.22); }
/* Logo PNG sits on the dark sage card: drop the multiply blend that
   suited the light-glass card, and let the image render at full strength. */
.narita .brand-logo {
  mix-blend-mode: normal;
  border-radius: var(--r-md);
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}
.narita .brand-mark-icon {
  background: transparent;
  width: 70px; height: 70px;
  flex-shrink: 0;
}
.narita .brand-mark-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.narita .team-role { color: rgba(244, 239, 227, 0.92); }
.narita .team-block-title { color: rgba(244, 239, 227, 0.7); }
.narita .team-tag {
  background: rgba(244, 239, 227, 0.16);
  color: var(--narita-cream);
  border-color: rgba(244, 239, 227, 0.28);
}
.narita .team-tag.tbc { color: rgba(244, 239, 227, 0.6); }
.narita .team-facts li::before { background: var(--narita-cream); }
.narita .team-note { color: rgba(244, 239, 227, 0.88); }
.narita .team-hpcsa { color: rgba(244, 239, 227, 0.88); }

/* --------------------------------------------------------------------------
   Treatments: shared conditions and techniques for both practices
   -------------------------------------------------------------------------- */
#treatments { padding-block: clamp(28px, 4vh, 64px); }
.treatments-head { text-align: center; margin-bottom: 30px; }
.treatments-head .section-label { justify-content: center; }
.treatments-head .section-title { margin-top: 8px; }

.treat-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
}
.treat-group {
  position: relative;
  padding: 34px 38px;
  border-radius: var(--r-xl);
  /* Glossier glass: a top sheen plus a soft corner highlight over the frosted base. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 26%, rgba(255, 255, 255, 0) 50%),
    radial-gradient(140% 100% at 20% -20%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%),
    var(--glass);
  border-top-color: rgba(255, 255, 255, 0.92);
  box-shadow:
    var(--glow-glass),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 24px rgba(255, 255, 255, 0.22);
}
/* Techniques sit in a balanced two-column grid: equal rows, larger pills. */
.treat-group .team-tags {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 16px;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}
.treat-group .team-tag {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 20px;
  /* Glossy beads to match the glossier bubble. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.45) 60%),
    rgba(255, 255, 255, 0.5);
  border-color: var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 12px rgba(14, 40, 103, 0.08);
}
@media (max-width: 520px) {
  .treat-group .team-tags { grid-template-columns: 1fr; }
}
/* The techniques bubble sizes to its content (hugs the pills), centred in the section. */
.treat-group-title {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 14px;
}

@media (max-width: 760px) {
  .treat-groups { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Reviews: glass cards
   -------------------------------------------------------------------------- */
.reviews-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 48px;
}
.reviews-head .section-label { margin-bottom: 18px; }
.reviews-head .section-title { font-size: clamp(2.3rem, 4.6vw, 3.6rem); }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.review {
  border-radius: var(--r-lg);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.32s var(--ease), background 0.32s var(--ease);
}
.review:hover { transform: translateY(-8px); background: var(--glass-hi); }

/* Google rating summary (Sean-approved). Glossy glass card with a 4.9-of-5 star row. */
.review-rating {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  padding: clamp(30px, 4vw, 48px) clamp(26px, 4vw, 56px);
  border-radius: var(--r-xl);
  text-align: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.1) 32%, rgba(255, 255, 255, 0) 60%),
    var(--glass);
  border-top-color: rgba(255, 255, 255, 0.9);
  box-shadow: var(--glow-glass), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.review-rating-head { display: flex; align-items: center; justify-content: center; gap: 24px; }
.review-rating-num { font-family: var(--f-head); font-weight: 700; font-size: 4.4rem; line-height: 1; letter-spacing: -0.02em; color: var(--navy); }
.review-rating-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.stars { --rating: 5; position: relative; display: inline-block; font-size: 30px; line-height: 1; letter-spacing: 4px; }
.stars::before { content: "\2605\2605\2605\2605\2605"; color: rgba(14, 40, 103, 0.16); }
.stars-fill { position: absolute; top: 0; left: 0; width: calc(var(--rating) / 5 * 100%); overflow: hidden; white-space: nowrap; }
.stars-fill::before { content: "\2605\2605\2605\2605\2605"; color: #f5b301; }
.review-rating-count { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.review-rating-count .g-mark { width: 18px; height: 18px; flex-shrink: 0; }
.review-rating-blurb { margin-top: 24px; font-size: 17px; line-height: 1.55; color: var(--ink-soft); max-width: 40ch; margin-inline: auto; }
.review-rating-link { display: inline-block; margin-top: 22px; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.review-rating-link:hover { color: var(--navy); }
.review-stars { display: flex; gap: 3px; }
.review-stars svg { width: 15px; height: 15px; fill: #E8A33D; }
.review-quote {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
}
.review-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.review-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(14, 40, 103, 0.12);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  flex-shrink: 0;
}
.review-author { font-size: 14px; font-weight: 600; color: var(--navy); }
.review-source {
  font-size: 12px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.review-source svg { width: 12px; height: 12px; }

@media (max-width: 940px) { .reviews-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .reviews-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 36px; }
}

/* --------------------------------------------------------------------------
   Footer: navy backdrop. Two-column main row: wordmark on the left,
   address on the right. Below: an alternative-logo band using brand-kit
   artwork (menlo-hand / menlo-leg) blended onto the navy via mix-blend
   so the black PNG backgrounds drop away.
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  background: var(--navy-deep);
  color: rgba(251, 246, 236, 0.66);
  padding-block: 62px 36px;
}
.footer-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  padding-bottom: 38px;
  border-bottom: 1px solid rgba(251, 246, 236, 0.10);
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.footer-brand .wordmark { font-size: 36px; }
.footer-address {
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-self: end;
  text-align: left;
  max-width: 44ch;
}
.footer-blurb {
  font-size: 14.5px;
  line-height: 1.66;
  color: rgba(251, 246, 236, 0.78);
  max-width: 40ch;
  margin: 0;
}
.footer-contact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(251, 246, 236, 0.74);
  justify-content: flex-start;
}
.footer-contact svg {
  width: 16px; height: 16px;
  stroke: var(--lavender); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
  margin-top: 2px;
}
.footer-maps {
  margin-left: 26px;
  font-size: 14px;
  color: var(--lavender);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-maps:hover { color: var(--light); }

.footer-bottom {
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: rgba(251, 246, 236, 0.6);
}
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a { color: rgba(251, 246, 236, 0.6); text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover { color: var(--light); }
.footer-fine {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(251, 246, 236, 0.66);
  max-width: 80ch;
}
.footer-fine + .footer-fine { margin-top: 10px; }
.footer-fine a { color: rgba(251, 246, 236, 0.92); text-decoration: underline; text-underline-offset: 2px; }
.footer-fine a:hover { color: var(--light); }

@media (max-width: 720px) {
  .footer-main { grid-template-columns: 1fr; gap: 26px; text-align: center; }
  .footer-brand { align-items: center; }
  .footer-address { justify-self: center; text-align: center; max-width: 36ch; margin: 0 auto; }
  .footer-contact { justify-content: center; }
  .footer-maps { margin-left: 0; }
}
@media (max-width: 520px) {
  .footer-bottom { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   Inner page hero
   -------------------------------------------------------------------------- */
.page-hero {
  padding-block: 60px 64px;
  border-bottom: 1px solid var(--line-soft);
}
.page-hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 56px;
  align-items: center;
}
.page-hero-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 16px;
}
.page-hero-name {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--navy);
}
.page-hero-title { font-size: 18px; color: var(--ink-soft); margin-top: 14px; }
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 28px; }
.page-hero-meta { margin-top: 20px; font-size: 13px; color: var(--ink-soft); }

.page-hero-photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
}
.page-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--ink-soft);
  text-align: center;
  padding: 24px;
}
.photo-placeholder svg { width: 44px; height: 44px; opacity: 0.5; }
.photo-placeholder span { font-size: 12px; letter-spacing: 0.05em; }

@media (max-width: 820px) {
  .page-hero-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* --------------------------------------------------------------------------
   Bio / inner content
   -------------------------------------------------------------------------- */
.bio-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 58px;
}
.bio-body h2 {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1.32;
}
.bio-body h2 em {
  font-family: var(--f-script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.5em;
  line-height: 0.5;
  color: var(--red);
}
.bio-body h2:not(:first-child) { margin-top: 44px; }
.bio-body p {
  font-size: 16.5px;
  line-height: 1.74;
  color: var(--ink-soft);
  margin-top: 18px;
  max-width: 62ch;
}
.bio-body p strong { color: var(--navy); font-weight: 600; }
.bio-aside { display: flex; flex-direction: column; gap: 18px; }
.bio-card {
  border-radius: var(--r-lg);
  padding: 28px;
}
.bio-card-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 16px;
}
.bio-list { display: flex; flex-direction: column; gap: 11px; }
.bio-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
}
.bio-list li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  transform: translateY(-1px);
}
.bio-card.dark {
  background: var(--navy);
  border-color: var(--navy);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--glow-navy);
}
.bio-card.dark .bio-card-title { color: var(--lavender); }
.bio-card.dark .bio-list li { color: rgba(251, 246, 236, 0.82); }

.tbc { font-style: italic; color: var(--ink-soft); }

@media (max-width: 860px) {
  .bio-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* --------------------------------------------------------------------------
   Closing CTA (inner pages)
   -------------------------------------------------------------------------- */
.closing { text-align: center; }
.closing-inner { max-width: 600px; margin-inline: auto; }
.closing h2 {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.8vw, 2.7rem);
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 14px;
}
.closing h2 em {
  font-family: var(--f-script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.5em;
  line-height: 0.5;
  color: var(--red);
}
.closing p { font-size: 17px; color: var(--ink-soft); margin-bottom: 30px; }

/* --------------------------------------------------------------------------
   Legal
   -------------------------------------------------------------------------- */
.legal-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; }
.legal-nav a {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  padding: 9px 17px;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.legal-nav a:hover { background: var(--glass-hi); }
.legal-section { max-width: 72ch; }
.legal-section + .legal-section {
  margin-top: 44px;
  padding-top: 44px;
  border-top: 1px solid var(--line);
}
.legal-section h2 {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  color: var(--navy);
  margin-bottom: 8px;
}
.legal-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin-top: 26px;
  margin-bottom: 6px;
}
.legal-section p, .legal-section li {
  font-size: 15px;
  line-height: 1.74;
  color: var(--ink-soft);
}
.legal-section p { margin-top: 10px; }
.legal-section ul { list-style: disc; padding-left: 22px; margin-top: 10px; }
.legal-section li { margin-top: 5px; }
.legal-section a { color: var(--red-deep); text-decoration: underline; text-underline-offset: 2px; }
.legal-updated { font-size: 13px; color: var(--ink-soft); margin-bottom: 36px; }

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-duration: 0.001s !important;
  }
  .hero-eyebrow, .hero-line, .hero-actions, .reveal {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .hv-clip, .sv-clip { display: block; }
  .hv-clip { opacity: 0.42 !important; }
  .sv-clip { opacity: 0.22 !important; }
}

/* --------------------------------------------------------------------------
   Patient intake form
   -------------------------------------------------------------------------- */
.intake-section { padding-block: clamp(40px, 7vh, 88px); }
.intake-head { max-width: 760px; margin: 0 auto 30px; text-align: center; }
.intake-head .section-label { justify-content: center; }
.intake-head .section-title { margin-top: 6px; }
.intake-head .section-lead { margin: 12px auto 0; max-width: 56ch; }

.intake-form {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 44px);
  border-radius: var(--r-xl);
}

.form-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(208, 10, 30, 0.07);
  border: 1px solid rgba(208, 10, 30, 0.20);
  color: var(--red-deep);
  border-radius: var(--r-md);
  padding: 12px 15px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 28px;
}
.form-notice svg {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.form-section { border: 0; padding: 0; margin: 0 0 26px; min-width: 0; }
.form-legend {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 18px;
  color: var(--navy);
  width: 100%;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field--full { grid-column: 1 / -1; }
.field label, .field-legend { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.field .req { color: var(--red); }
.field input, .field select, .field textarea {
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
  width: 100%;
}
.field input::placeholder { color: var(--ink-soft); opacity: 0.7; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(14, 40, 103, 0.13);
}
.field-note { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.5; }

.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 18px; }
.check, .radio-opt {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 14.5px; color: var(--ink); cursor: pointer;
}
.check input, .radio-opt input {
  width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0;
  accent-color: var(--navy); cursor: pointer;
}
.radio-row { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 6px; }

.consent {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 14.5px; line-height: 1.55; color: var(--ink);
  margin-top: 14px;
}
.consent input {
  width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0;
  accent-color: var(--navy); cursor: pointer;
}
.consent-text .tbc { display: block; margin-top: 3px; font-style: italic; color: var(--ink-soft); font-size: 13px; }

.form-actions { margin-top: 26px; }
.form-result {
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(14, 40, 103, 0.06);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--navy);
}

@media (max-width: 620px) {
  .form-grid, .check-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .nav, .nav-drawer, .scroll-cue, .bg-canvas, .hero-actions, .form-notice { display: none; }
  body { background: #fff; }
}