/* ==========================================================================
   META Medical — metamedical.life

   Direction: Gallery Luminism.
   Sharp-cornered paper panels floating on a light field that traverses the
   logo's own green→blue gradient across the length of the page. Depth comes
   from navy-tinted elevation and negative space, never from chrome.

   Brand constants (navy, green, deep green, blue, Cinzel, Montserrat) are
   inherited from the approved Elementor kit and are not reinterpreted.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/Cinzel-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Brand — fixed */
  --navy: #00345c;
  --green: #6fdf00;
  --green-deep: #2d5c00;
  --blue: #018fff;

  /* Navy tonal ramp. Every neutral on the page is tinted toward the brand
     navy — no pure greys anywhere, which is most of why this reads warmer
     and more deliberate than a default palette. */
  --ink-900: #001b30;
  --ink-800: #002540;
  --ink-700: #00345c;
  --ink-600: #1c4a70;
  --ink-500: #3d6285;
  --ink-400: #6b87a2;
  --ink-300: #a8bccd;
  --ink-200: #d5e0e9;
  --ink-150: #e3ebf1;
  --ink-100: #eef3f7;
  --ink-050: #f7fafc;

  --paper: #fff;
  /* The ground sits a hair below pure white so that white panels genuinely
     read as floating above it. This is what makes the elevation legible. */
  --ground: #ffffff;
  --body: #55656f;         /* navy-leaning slate — 5.7:1 on paper */

  /* Hairlines. Two weights: a whisper for internal division, a shade more
     for the edge of a floating panel. */
  --line: rgba(0, 52, 92, 0.09);
  --line-strong: rgba(0, 52, 92, 0.16);

  /* Elevation — always navy-tinted, never black, always two layers:
     a tight contact shadow plus a wide ambient one. */
  --el-1:
    0 1px 2px rgba(0, 42, 74, 0.05),
    0 2px 6px -1px rgba(0, 42, 74, 0.06);
  --el-2:
    0 1px 2px rgba(0, 42, 74, 0.04),
    0 6px 16px -4px rgba(0, 42, 74, 0.08),
    0 16px 32px -12px rgba(0, 42, 74, 0.06);
  --el-3:
    0 2px 4px rgba(0, 42, 74, 0.04),
    0 12px 28px -8px rgba(0, 42, 74, 0.09),
    0 32px 64px -20px rgba(0, 42, 74, 0.10);
  --el-lift:
    0 2px 6px rgba(0, 42, 74, 0.05),
    0 18px 40px -10px rgba(0, 42, 74, 0.13),
    0 44px 80px -28px rgba(0, 42, 74, 0.12);
  --el-green: 0 6px 18px -8px rgba(45, 92, 0, 0.4);
  --el-navy: 0 6px 18px -8px rgba(0, 52, 92, 0.36);

  /* The live site's signature: a tight, strong shadow directly beneath an
     isolated block. This is what the client means by "isolation and drop". */
  --el-isolate: 0 25px 50px -25px rgba(0, 26, 46, 0.5);
  --el-isolate-sm: 0 18px 36px -20px rgba(0, 26, 46, 0.42);

  /* Type families */
  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-text: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Display scale. Cinzel is an inscriptional Roman capital: it wants real
     size, negative tracking, and tight leading. The previous pass capped the
     hero at 75px, which left it looking apologetic. */
  --fs-hero: clamp(2.5rem, 1.2rem + 5.2vw, 4.75rem);   /* live site: 75px */
  --fs-statement: clamp(1.9rem, 0.95rem + 4.2vw, 3.75rem);
  --fs-section: clamp(1.7rem, 1.15rem + 2.4vw, 2.75rem);
  --fs-provider: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-card: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);

  /* Text scale */
  --fs-body: 1rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-small: 0.875rem;
  --fs-micro: 0.8125rem;
  --fs-eyebrow: 0.6875rem;

  /* Leading + tracking */
  --lh-display: 1.04;
  --lh-body: 1.72;
  --tr-display: -0.018em;   /* Cinzel ships loose; pull it in at scale */
  --tr-eyebrow: 0.24em;

  /* Rhythm */
  --space-section: clamp(6.5rem, 12vw, 11.5rem);
  --space-gutter: clamp(1.75rem, 4.5vw, 4.5rem);
  --split-gap: clamp(3.5rem, 9vw, 9rem);      /* the seam between paired columns */
  --container: 1240px;
  --measure: 60ch;
  --pad-inline: clamp(1.25rem, 5vw, 4.5rem);

  /* Rounded, matching the Elementor panels the client liked. An earlier pass
     used 2px on a theory about Cinzel's carved geometry — that was taste
     imposed over a stated preference. */
  --radius: 4px;
  --radius-sm: 3px;
  --radius-pill: 4px;    /* deliberately not a pill — the look is flat and sharp */

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 300ms;
  --dur-slow: 620ms;
}

/* Lets the FAQ panels animate open from height:0 to height:auto. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
}

/* --- Reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
  color-scheme: light;
}

body {
  position: relative;   /* anchors the light field */
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

img { height: auto; }

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

a,
button,
summary,
label,
input,
textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(111, 223, 0, 0.22);
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }

ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

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

/* Navy outline vanishes on the dark bands. */
.section--ink :focus-visible,
.section--photo :focus-visible {
  outline-color: #fff;
}

::selection {
  background: var(--green);
  color: var(--navy);
}

/* ==========================================================================
   THE LIGHT FIELD
   The signature. A single layer spanning the whole document, carrying the
   logo's green→blue gradient across the full scroll. Green at the top where
   the story begins, resolving to blue by the footer.
   ========================================================================== */

.field {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  /* Required: the blooms below are wider than the viewport, and without this
     they push the document's scroll width out past it. */
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(111, 223, 0, 0.062) 0%,
      rgba(111, 223, 0, 0.026) 11%,
      rgba(120, 200, 90, 0.010) 24%,
      rgba(255, 255, 255, 0) 38%,
      rgba(255, 255, 255, 0) 58%,
      rgba(1, 143, 255, 0.014) 72%,
      rgba(1, 143, 255, 0.030) 88%,
      rgba(1, 143, 255, 0.060) 100%
    );
}

/* Two soft blooms, one per wing colour, that keep the field from reading as
   a flat linear wash. */
.field::before,
.field::after {
  content: '';
  position: absolute;
  left: 50%;
  width: min(150vw, 1900px);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  opacity: 0.55;
}

.field::before {
  top: 4%;
  background: radial-gradient(circle, rgba(111, 223, 0, 0.10) 0%, rgba(111, 223, 0, 0) 62%);
}

.field::after {
  bottom: 2%;
  background: radial-gradient(circle, rgba(1, 143, 255, 0.10) 0%, rgba(1, 143, 255, 0) 62%);
}

/* --- Skip link ------------------------------------------------------------ */

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 300;
  translate: -50% -150%;
  padding: 0.875rem 1.75rem;
  background: var(--navy);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: translate var(--dur) var(--ease);
}
.skip-link:focus { translate: -50% 0; }

/* --- Layout primitives ---------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: max(var(--pad-inline), env(safe-area-inset-left))
                  max(var(--pad-inline), env(safe-area-inset-right));
}

/* ONE owner of vertical rhythm.
   Previously every section padded itself, so the space between any two
   sections was paddingBottom + paddingTop + whatever trailing space that
   section's content happened to have — a carousel's nav, an uneven FAQ column,
   a trailing button. That produced visibly different gaps section to section.
   The parent owns the gap instead, so every transition is identical. */
main {
  display: flex;
  flex-direction: column;
  gap: var(--space-section);
}

/* Empty anchor target — must not become a flex item or it earns its own gap. */
main > #top {
  position: absolute;
  width: 0;
  height: 0;
}

.section { padding-block: 0; }

/* The bands are coloured/photographic blocks, so they still need interior
   padding to hold their content off their own edges. */
.section--photo,
.section--ink { padding-block: var(--section-pad); }

/* Retained so the markup stays valid, but the parent now owns spacing. */
.section--tight,
.section--flush-top { padding-block: 0; }

/* ==========================================================================
   ATMOSPHERIC BANDS
   Two beats that break the page out of white-on-white: a full-bleed
   photograph with panels floating on it, and a deep navy band. Both are
   full-bleed edge to edge and carry their own text colours.
   ========================================================================== */

/* --- Photographic band ---------------------------------------------------- */

.section--photo {
  position: relative;
  isolation: isolate;
  margin-inline: clamp(0.75rem, 2vw, 1.75rem);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--el-isolate);
  --section-pad: clamp(3.5rem, 7vw, 6rem);
}

.section--photo__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

/* Scrim: deep enough at the edges to hold the band together, open in the
   middle so the sunlight in the photograph still reads. */
.section--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 26, 18, 0.52) 0%, rgba(0, 26, 18, 0.16) 22%,
                    rgba(0, 26, 18, 0.16) 78%, rgba(0, 26, 18, 0.52) 100%),
    linear-gradient(90deg, rgba(0, 24, 40, 0.30) 0%, rgba(0, 24, 40, 0.05) 40%,
                    rgba(0, 24, 40, 0.05) 60%, rgba(0, 24, 40, 0.30) 100%);
}

.section--photo .display,
.section--photo .existing__label { color: #fff; }

/* This line sits directly on busy foliage rather than on a panel, so it needs
   its own shadow to stay legible independent of the scrim. */
.section--photo .existing__label {
  text-shadow: 0 1px 2px rgba(0, 20, 13, 0.55), 0 2px 18px rgba(0, 20, 13, 0.5);
}

.section--photo .display--section { text-shadow: 0 2px 30px rgba(0, 18, 12, 0.5); }

.section--photo .eyebrow { color: var(--green); }
.section--photo .eyebrow::after,
.section--photo .eyebrow::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), transparent);
}
.section--photo .eyebrow--center::before {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.5), transparent);
}

.section--photo .rule {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.12) 55%, transparent);
}
.section--photo .rule--center {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42) 50%, transparent);
}

/* Panels floating on the photograph get a deeper shadow — they're further
   from their background than panels sitting on the light ground. */
.section--photo .booking {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), var(--el-isolate);
}

/* --- Navy band ------------------------------------------------------------ */

.section--ink {
  position: relative;
  isolation: isolate;
  margin-inline: clamp(0.75rem, 2vw, 1.75rem);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-800);
  box-shadow: var(--el-isolate);
  --section-pad: clamp(3.5rem, 7.5vw, 6.5rem);
}

/* A soft green bloom top-left and blue bottom-right, so the navy has
   luminosity rather than reading as a flat block of colour. */
.section--ink::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 60% at 12% 0%, rgba(111, 223, 0, 0.13), transparent 70%),
    radial-gradient(ellipse 70% 60% at 88% 100%, rgba(1, 143, 255, 0.18), transparent 70%);
}

.section--ink .display { color: #fff; }
.section--ink .eyebrow { color: var(--green); }

.section--ink .rule--center {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28) 50%, transparent);
}

.section--ink .carousel__btn {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.section--ink .carousel__btn:hover:not(:disabled) {
  background: #fff;
  color: var(--navy);
}
.section--ink .carousel__dot::before { background: rgba(255, 255, 255, 0.3); }
.section--ink .carousel__dot:hover::before { background: #fff; }

/* Editorial asymmetry. Dead-even 50/50 splits are the single biggest reason
   a layout reads as generic; these are 7:5 and 5:7. */
.split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--split-gap);
  align-items: center;
}

.split--reverse { grid-template-columns: 5fr 7fr; }
.split--top { align-items: start; }
.split__media--last { order: 2; }

@media (max-width: 940px) {
  .split,
  .split--reverse { grid-template-columns: 1fr; }
  .split__media--last { order: 0; }
}

/* --- Panel ---------------------------------------------------------------- */

/* The floating paper plane. Sharp corners, hairline edge, two-layer
   navy-tinted shadow, and a 1px inner top highlight so the edge catches
   light like a physical sheet. */
/* Not a card any more. On the live site, body content simply breathes on
   white; isolation is reserved for imagery and the photographic bands, which
   is what gives those moments their impact. */
.panel {
  position: relative;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.panel--flush { padding: 0; }
.panel--pad { padding: 0; }

.panel--raised { box-shadow: 0 0 0 1px var(--line), var(--el-3); }

/* --- Typography ----------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--green-deep);
}

/* Hairline that grows out of the label — a small structural tell that the
   eyebrow is a marker, not a heading. */
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  max-width: 4rem;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

/* The eyebrow is a flex row, so text-align on an ancestor no longer centers
   it — centred contexts have to be handled explicitly. */
.eyebrow--center,
.text-center .eyebrow,
.statement .eyebrow { justify-content: center; }

.eyebrow--center::before,
.text-center .eyebrow::before,
.statement .eyebrow::before {
  content: '';
  flex: 1;
  height: 1px;
  max-width: 4rem;
  background: linear-gradient(270deg, var(--line-strong), transparent);
}

.eyebrow--navy { color: var(--navy); }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
  color: var(--navy);
  text-wrap: balance;
}

.display--hero {
  font-size: var(--fs-hero);
  letter-spacing: -0.024em;
}
.display--statement { font-size: var(--fs-statement); }
.display--section { font-size: var(--fs-section); }
.display--provider { font-size: var(--fs-provider); letter-spacing: -0.01em; }
.display--card { font-size: var(--fs-card); letter-spacing: -0.01em; }

.lead {
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.58;
  letter-spacing: -0.011em;
  color: var(--ink-500);
}

.prose > * + * { margin-block-start: 1.15em; }

.prose p,
.lead,
.measure,
.measure-center { text-wrap: pretty; }

.prose strong {
  font-weight: 600;
  color: var(--navy);
}

.prose a {
  color: var(--green-deep);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 88%;
  background-repeat: no-repeat;
  transition: color var(--dur) var(--ease), background-size var(--dur) var(--ease);
}
.prose a:hover {
  color: var(--navy);
  background-size: 100% 2px;
}

.text-center { text-align: center; }
.measure { max-width: var(--measure); }
.measure-center { max-width: var(--measure); margin-inline: auto; }

/* Hairline rule — the live site's divider, refined to fade at both ends. */
.rule {
  height: 1px;
  border: 0;
  margin-block: 1.75rem;
  background: linear-gradient(90deg, var(--line-strong), var(--line) 55%, transparent);
}

.rule--center {
  width: 7rem;
  margin-inline: auto;
  background: linear-gradient(90deg, transparent, var(--line-strong) 45%, var(--line-strong) 55%, transparent);
}

.rule--section { margin-block: clamp(2rem, 4.5vw, 3rem); }
.rule--section-lg { margin-block: clamp(2rem, 4.5vw, 3.25rem); }

.heading-tight { margin-block-start: 0.875rem; }
.mt-md { margin-block-start: 1rem; }
.mt-lg { margin-block-start: 2rem; }
.mb-lg { margin-block-end: 2rem; }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 52px;
  padding: 1rem 2.25rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--green);   /* flat fill — no gradient */
  color: var(--navy);         /* 7.4:1 — white on this green measures 1.7:1 */
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.btn:hover {
  background: #7ceb08;
  box-shadow: var(--el-green);
}
.btn:active { background: #63c900; }
.btn--navy:active { background: var(--ink-800); }

.btn--navy {
  background: var(--navy);
  color: #fff;
}
.btn--navy:hover { background: var(--ink-600); box-shadow: var(--el-navy); }

.btn--ghost {
  background: transparent;
  color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.btn--ghost:hover {
  background: var(--navy);
  color: #fff;
  box-shadow: var(--el-navy);
}

.btn--block { width: 100%; }

/* --- Header --------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  /* The one place translucency is functional rather than decorative:
     content genuinely passes underneath it. */
  backdrop-filter: blur(18px) saturate(1.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}

.header[data-stuck='true'] {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgba(0, 42, 74, 0.5);
}

/* Scroll progress — a 2px thread in the logo's own gradient, scaled by JS. */
.header__progress {
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--green), var(--blue));
  transform-origin: 0 50%;
  scale: 0 1;
  transition: scale 90ms linear;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 0.875rem;
}

.header__logo {
  flex-shrink: 0;
  line-height: 0;
  transition: opacity var(--dur) var(--ease);
}
.header__logo:hover { opacity: 0.78; }

.header__logo img {
  width: auto;
  height: clamp(46px, 7vw, 60px);
}

/* Navigation. An 11,000px single page with no wayfinding was a real defect;
   every label here is an existing section heading, verbatim. */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  margin-inline-start: auto;
}

.nav__link {
  position: relative;
  padding-block: 0.5rem;
  color: var(--ink-600);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}

.nav__link::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1.5px;
  background: var(--green);
  scale: 0 1;
  transform-origin: 0 50%;
  transition: scale var(--dur) var(--ease-out);
}

.nav__link:hover { color: var(--navy); }
.nav__link:hover::after,
.nav__link[aria-current='true']::after { scale: 1 1; }
.nav__link[aria-current='true'] { color: var(--navy); }

@media (max-width: 1080px) {
  .nav { display: none; }
}

.header .btn {
  min-height: 46px;
  padding-inline: 1.5rem;
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  /* Measured off the live site: 663px tall, inset 27px each side, sharp
     corners, strong shadow directly below. That combination is what reads as
     "isolated" — the previous full-bleed 82vh version lost it entirely. */
  min-height: clamp(26rem, 56vh, 41.5rem);
  margin-block-start: clamp(0.75rem, 2vw, 1.75rem);
  margin-inline: clamp(0.75rem, 2vw, 1.75rem);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--el-isolate), inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* From the photograph's top edge — his hair was being cropped. The live
     site positions this background at Y = 0% as well. */
  object-position: 26% 0%;
}

/* Two-part scrim: a directional wash that deepens toward the type, plus a
   top vignette so the translucent header always has something to sit on. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 22, 14, 0.34) 0%, rgba(0, 22, 14, 0) 22%),
    linear-gradient(
      100deg,
      rgba(0, 26, 17, 0.06) 0%,
      rgba(0, 26, 17, 0.20) 42%,
      rgba(0, 24, 16, 0.44) 74%,
      rgba(0, 30, 22, 0.52) 100%
    );
}

.hero__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1.75rem;
  padding-block: clamp(3rem, 7vw, 4.5rem);
  text-align: center;
}

@media (min-width: 1000px) {
  .hero__inner {
    width: min(56%, 40rem);
    margin-inline-start: auto;
  }
}

/* A soft bloom behind the wordmark, so the type appears to be emitting light
   rather than sitting on top of a photo. */
.hero__inner::before {
  content: '';
  position: absolute;
  inset: -14% -18%;
  z-index: -1;
  background: radial-gradient(
    ellipse at 50% 46%,
    rgba(4, 28, 20, 0.42) 0%,
    rgba(4, 28, 20, 0.16) 46%,
    rgba(4, 28, 20, 0) 74%
  );
  filter: blur(6px);
}

.hero__mark {
  width: clamp(72px, 8.5vw, 104px);
  height: auto;
  filter: drop-shadow(0 4px 20px rgba(0, 20, 12, 0.4));
}

.hero__eyebrow {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.52em;
  text-indent: 0.52em;
  text-transform: uppercase;
}

.hero__title {
  color: #fff;
  text-shadow: 0 2px 40px rgba(0, 18, 12, 0.45);
}

.hero__sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.94);
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.hero__sub strong { font-weight: 600; }

.hero .btn { margin-block-start: 0.75rem; }

/* Scroll cue — a hairline with a travelling highlight. No words added. */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4vh, 2.75rem);
  translate: -50% 0;
  width: 1px;
  height: clamp(38px, 6vh, 60px);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.26);
}

.hero__cue::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, #fff);
  animation: cue 2.6s var(--ease) infinite;
}

@keyframes cue {
  0%   { translate: 0 -100%; opacity: 0; }
  35%  { opacity: 1; }
  100% { translate: 0 240%; opacity: 0; }
}

/* Portrait screens get their own hero composition. The desktop version relies
   on negative space to the right of the subject, which simply doesn't exist
   once the frame is taller than it is wide — there, the type would land on his
   face. So: subject held to the upper portion, type stacked into the lower
   third over a bottom-weighted scrim. */
@media (max-width: 860px) {
  .hero {
    min-height: clamp(30rem, 78vh, 40rem);
    align-items: end;
  }

  .hero__bg { object-position: 32% 14%; }

  .hero::after {
    background:
      linear-gradient(180deg, rgba(0, 22, 14, 0.30) 0%, rgba(0, 22, 14, 0) 18%),
      linear-gradient(
        180deg,
        rgba(0, 24, 16, 0) 26%,
        rgba(0, 24, 16, 0.42) 52%,
        rgba(0, 24, 16, 0.74) 82%,
        rgba(0, 24, 16, 0.84) 100%
      );
  }

  .hero__inner {
    gap: 1.25rem;
    padding-block: 2.5rem clamp(4rem, 12vh, 5.5rem);
  }

  /* The bloom is unnecessary once there's a full-width scrim behind the type. */
  .hero__inner::before { display: none; }

  .hero__mark { width: clamp(60px, 15vw, 76px); }
}

/* --- Statement ------------------------------------------------------------ */

.statement {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  text-align: center;
}

.statement::after {
  content: '';
  width: 7rem;
  height: 1px;
  margin-block-start: 0.5rem;
  background: linear-gradient(90deg, transparent, var(--line-strong) 45%, var(--line-strong) 55%, transparent);
}

/* --- Media --------------------------------------------------------------- */

/* Photographs float on the field with the same elevation language as panels,
   which is what gives the layout its consistent sense of depth. */
.media-square {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  /* The shadow IS the frame — same isolation signature as the hero band. */
  box-shadow: var(--el-isolate);
}

/* For imagery placed in the narrower of two columns: a portrait crop fills the
   column and balances a tall block of copy opposite it. */
.media-portrait { aspect-ratio: 4 / 5; }

/* For splits whose copy runs tall (the process timeline). */
.media-portrait--tall { aspect-ratio: 2 / 3; }

@media (max-width: 940px) {
  .media-portrait,
  .media-portrait--tall { aspect-ratio: 1; }
}

.media-frame {
  position: relative;
  border-radius: var(--radius);
}

/* --- Services ------------------------------------------------------------- */

/* Column-wise so items 1–4 hold the left column and 5–8 the right, matching
   the source. Row heights are shared, so the hairlines align across columns. */
.services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: 0 var(--split-gap);
}

@media (max-width: 820px) {
  .services {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}

.service {
  padding-block: clamp(1.5rem, 3vw, 2.125rem);
  border-block-start: 1px solid var(--line);
}

@media (min-width: 821px) {
  .services > .service:nth-child(1),
  .services > .service:nth-child(5) { border-block-start: 0; }
}
@media (max-width: 820px) {
  .services > .service:first-child { border-block-start: 0; }
}

/* Hangs in the left margin so the title stays flush with its body text. */
.service__title { position: relative; }

.service__title::before {
  content: '';
  position: absolute;
  left: -1.125rem;
  top: 0.5em;
  width: 7px;
  height: 7px;
  background: var(--green);
  border-radius: 1px;
}

.service__title {
  display: block;
  margin-block-end: 0.5rem;
  color: var(--navy);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.008em;
}

.service__title--inline {
  display: inline;
  margin-block-end: 0;
}

/* --- Process steps -------------------------------------------------------- */

/* Numbered because this content genuinely is an ordered sequence. */
.steps {
  counter-reset: step;
  display: grid;
  gap: 1.75rem;
}

.step {
  counter-increment: step;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: start;
}

/* Connector: marker centre to the next marker, stopping short of each. */
.step::after {
  content: '';
  position: absolute;
  left: 1.375rem;
  top: calc(2.75rem + 6px);
  bottom: calc(-1.75rem + 6px);
  width: 1px;
  translate: -0.5px 0;
  background: var(--line-strong);
}

.steps .step:last-child::after { display: none; }

.step::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1;
  border-radius: var(--radius);
  box-shadow: var(--el-1);
}

.step__title {
  display: block;
  margin-block-end: 0.3125rem;
  color: var(--navy);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: -0.008em;
}

/* --- Pricing -------------------------------------------------------------- */

.pricing__scroll {
  overflow-x: auto;
  border-radius: var(--radius);
  isolation: isolate;
  box-shadow: 0 0 0 1px var(--line), var(--el-isolate);
  -webkit-overflow-scrolling: touch;
}

.pricing {
  width: 100%;
  min-width: 46rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
  text-align: center;
}

.pricing thead th {
  position: sticky;
  top: 0;
  padding: 1.25rem 0.875rem;
  background: linear-gradient(180deg, var(--ink-600), var(--navy) 70%, var(--ink-800));
  color: #fff;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  vertical-align: bottom;
}

.pricing thead th:first-child {
  text-align: start;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.pricing thead th + th { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.13); }

.pricing__role {
  display: block;
  margin-block-start: 0.375rem;
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.pricing tbody th {
  padding: 1rem 1.125rem;
  background: var(--ink-050);
  color: var(--navy);
  font-weight: 600;
  text-align: start;
  letter-spacing: -0.008em;
  border-block-start: 1px solid var(--line);
}

.pricing tbody td {
  padding: 1rem 0.875rem;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  border-block-start: 1px solid var(--line);
  border-inline-start: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}

.pricing tbody tr:hover th { background: var(--ink-100); }
.pricing tbody tr:hover td { background: rgba(111, 223, 0, 0.05); }

/* N/A recedes so the eye lands on real prices. */
.pricing tbody td[data-na='true'] {
  color: var(--ink-300);
  font-weight: 300;
}

.pricing__note {
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--ink-500);
  font-style: italic;
}

/* Phone: one card per provider, only the services they offer */
.pricing-cards { display: none; }

.pricing-card + .pricing-card { margin-block-start: 1.25rem; }

.pricing-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), var(--el-2);
}

.pricing-card__head {
  padding: 1.125rem 1.25rem;
  background: linear-gradient(180deg, var(--ink-600), var(--navy) 70%, var(--ink-800));
  color: #fff;
}

.pricing-card__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.pricing-card__role {
  margin-block-start: 0.375rem;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.pricing-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9375rem 1.25rem;
}

.pricing-card__row + .pricing-card__row { border-block-start: 1px solid var(--line); }

.pricing-card__label {
  color: var(--navy);
  font-size: 0.9375rem;
  letter-spacing: -0.008em;
}

.pricing-card__price {
  flex-shrink: 0;
  color: var(--navy);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pricing-card__sub {
  display: block;
  margin-block-start: 0.1875rem;
  color: var(--ink-500);
  font-size: var(--fs-micro);
  font-weight: 400;
  font-style: italic;
}

@media (max-width: 800px) {
  .pricing__scroll { display: none; }
  .pricing-cards { display: block; }
}

/* --- Booking -------------------------------------------------------------- */

.booking { overflow: hidden; }

.booking iframe {
  width: 100%;
  min-height: clamp(38rem, 84vh, 54rem);
  border: 0;
}

.booking__credit {
  padding: 0.9375rem 1rem;
  border-block-start: 1px solid var(--line);
  background: var(--ink-050);
  font-size: var(--fs-micro);
  text-align: center;
  color: var(--ink-500);
}

.booking__credit a {
  color: var(--green-deep);
  font-weight: 600;
  text-decoration: none;
  border-block-end: 1px solid currentColor;
}

.existing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-block-start: 3rem;
  text-align: center;
}

.existing__label {
  color: var(--ink-500);
  font-size: var(--fs-lead);
  font-weight: 300;
  letter-spacing: -0.011em;
}

/* --- Accordions ----------------------------------------------------------- */

.faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--split-gap);
  align-items: start;
}

.faq__col { align-self: start; }

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

.accordion { border-block-end: 1px solid var(--line); }

.faq__col:first-child .accordion:first-child,
.faq__col:last-child .accordion:first-child { border-block-start: 1px solid var(--line); }

.accordion > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 1.375rem;
  min-height: 44px;
  color: var(--navy);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}

.accordion > summary::-webkit-details-marker { display: none; }
.accordion > summary:hover { color: var(--green-deep); }

.accordion__icon {
  position: relative;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.accordion > summary:hover .accordion__icon {
  background: rgba(111, 223, 0, 0.14);
  box-shadow: inset 0 0 0 1px rgba(45, 92, 0, 0.3);
}

.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.5px;
  background: currentColor;
  translate: -50% -50%;
  transition: rotate var(--dur) var(--ease-out), opacity var(--dur) var(--ease);
}
.accordion__icon::after { rotate: 90deg; }
.accordion[open] .accordion__icon::after { rotate: 0deg; opacity: 0; }

.accordion[open] > summary { color: var(--green-deep); }

.accordion[open] > summary .accordion__icon {
  background: rgba(111, 223, 0, 0.14);
  box-shadow: inset 0 0 0 1px rgba(45, 92, 0, 0.3);
}

.accordion__body {
  padding-block: 0 1.75rem;
  font-size: 0.9375rem;
}

.accordion__body ul { display: grid; gap: 0.875rem; }

.accordion__body li {
  position: relative;
  padding-inline-start: 1.375rem;
}

/* Bullets in the brand green, sized down to a precise mark. */
.accordion__body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(111, 223, 0, 0.14);
}

.accordion__body li > a[href*='embed_appt'] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block-start: 0.25rem;
  font-weight: 600;
}

/* Genuine height animation on a native <details>. */
@supports selector(::details-content) {
  .accordion::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size var(--dur-slow) var(--ease-out),
      content-visibility var(--dur-slow) allow-discrete;
  }
  .accordion[open]::details-content { block-size: auto; }
}

/* --- Carousel ------------------------------------------------------------- */

.carousel { position: relative; }

/* Flex, not grid: `flex: 0 0 <basis>` refuses to shrink, so the track
   overflows and scrolls. Grid's implicit tracks compress to fit instead. */
.carousel__track {
  display: flex;
  gap: var(--space-gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* Proximity, not mandatory: when the last card doesn't align to a viewport
     boundary, mandatory snapping makes it permanently unreachable. */
  scroll-snap-type: x proximity;
  padding-block: 0.5rem 1.25rem;
  scrollbar-width: none;
  --per-view: 3;
}

.carousel__track::-webkit-scrollbar { display: none; }

.carousel__track > * {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--space-gutter)) / var(--per-view));
  min-width: 0;
  scroll-snap-align: start;
}

.carousel__track > :last-child { scroll-snap-align: end; }

@media (max-width: 940px) {
  .carousel__track { --per-view: 2; }
}
@media (max-width: 640px) {
  .carousel__track { --per-view: 1.1; }
}

.carousel__nav { display: none; }

[data-carousel-ready='true'] .carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-block-start: 1.25rem;
}

.carousel__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--navy);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--line-strong), var(--el-1);
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    translate var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.carousel__btn:hover:not(:disabled) {
  background: var(--navy);
  color: #fff;
  translate: 0 -2px;
  box-shadow: var(--el-navy);
}

.carousel__btn:disabled {
  opacity: 0.28;
  cursor: default;
  box-shadow: 0 0 0 1px var(--line);
}

.carousel__btn svg { width: 15px; height: 15px; }

.carousel__dots {
  display: flex;
  align-items: center;
  margin-inline: 0.375rem;
}

/* The mark reads as a 6px dash; the control itself is a 44px target. */
.carousel__dot {
  width: 24px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.carousel__dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--ink-300);
  transition: background var(--dur) var(--ease), scale var(--dur) var(--ease-out);
}

.carousel__dot[aria-current='true']::before {
  background: var(--green);
  scale: 1.5;
  box-shadow: 0 0 0 4px rgba(111, 223, 0, 0.16);
}

.carousel__dot:hover::before { background: var(--navy); }

/* --- Provider card -------------------------------------------------------- */

.provider {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--line), var(--el-2);
  transition: box-shadow var(--dur) var(--ease), translate var(--dur) var(--ease);
}

.provider:hover {
  translate: 0 -4px;
  box-shadow: 0 0 0 1px var(--line-strong), var(--el-lift);
}

.provider__figure {
  position: relative;
  overflow: hidden;
}

.provider__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: scale var(--dur-slow) var(--ease-out);
}

.provider:hover .provider__photo { scale: 1.035; }

/* Anchors the name against the photograph regardless of its exposure. */
.provider__figure::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(0, 27, 48, 0) 0%, rgba(0, 27, 48, 0.16) 100%);
}

.provider__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
}

.provider__name { margin-block-end: 0.625rem; }

.provider__credentials {
  color: var(--ink-500);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.65;
  text-transform: uppercase;
  /* Credentials run 1–3 lines across the eight providers; reserving three
     keeps the rule and "Read Bio" on a shared baseline card to card. */
  min-height: calc(2 * 1.65em);
}

@media (max-width: 640px) {
  .provider__credentials { min-height: 0; }
}

.provider .rule { margin-block: 1.125rem; }

.provider .accordion { border-block-end: 0; }

.provider .accordion > summary {
  padding-block: 0.5rem 0.875rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  color: var(--green-deep);
}

.provider .accordion__icon { width: 22px; height: 22px; }
.provider .accordion__icon::before,
.provider .accordion__icon::after { width: 8px; }

.provider .accordion__body { padding-block-end: 1.25rem; }

.provider__cta { margin-block-start: auto; }
.provider__cta .btn { width: 100%; }

/* --- Reviews -------------------------------------------------------------- */

.review {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.75rem, 3vw, 2.375rem);
  background: var(--paper);
  border-radius: var(--radius);
  /* Clips the green top thread to the rounded corners — a square 2px bar on a
     20px radius overhangs at both ends. */
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), var(--el-2);
  transition: box-shadow var(--dur) var(--ease), translate var(--dur) var(--ease);
}

.review:hover {
  translate: 0 -4px;
  box-shadow: 0 0 0 1px var(--line-strong), var(--el-lift);
}

/* A ghosted Cinzel quote mark, held fully inside the card so it reads as a
   watermark rather than a clipped artefact. */
.review::before {
  content: '\201C';
  position: absolute;
  top: 0.5rem;
  right: 1.25rem;
  font-family: var(--font-display);
  font-size: 5.5rem;
  line-height: 1;
  color: var(--navy);
  opacity: 0.06;
  pointer-events: none;
}

/* The brand thread across the top edge. */
.review::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--green), rgba(111, 223, 0, 0.25));
}

.review__head {
  display: flex;
  align-items: center;
  gap: 0.9375rem;
  margin-block-end: 1.25rem;
}

.review__avatar {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--line), 0 0 0 4px var(--paper), var(--el-1);
}

.review__name {
  color: var(--navy);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.008em;
}

.review__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 0.25rem;
  font-size: var(--fs-micro);
  /* ink-400 measured 3.74:1 here — under AA for text this size. */
  color: var(--ink-500);
}

.review__stars {
  display: inline-flex;
  gap: 1.5px;
  color: #f5a623;
}

.review__stars svg { width: 12px; height: 12px; }

.review__body {
  font-size: 0.9375rem;
  line-height: 1.75;
}

.review__body[data-clamped='true'] {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review__toggle {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-block-start: 0.875rem;
  padding: 0.5rem 0;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--green-deep);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.review__toggle:hover { color: var(--navy); }

/* --- Lectures ------------------------------------------------------------- */

.lecture {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.lecture__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy);
  box-shadow: 0 0 0 1px var(--line), var(--el-2);
  transition: box-shadow var(--dur) var(--ease), translate var(--dur) var(--ease);
}

.lecture:hover .lecture__frame {
  translate: 0 -4px;
  box-shadow: 0 0 0 1px var(--line-strong), var(--el-lift);
}

.lecture__frame iframe,
.lecture__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* Click-to-load facade. The control is a real link to the video, so it works
   with JavaScript off; JS upgrades it to an inline player. */
.lecture__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: linear-gradient(180deg, rgba(0, 27, 48, 0.12), rgba(0, 27, 48, 0.34));
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.lecture__play:hover { background: rgba(0, 27, 48, 0.1); }

.lecture__play::before {
  content: '';
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: scale var(--dur) var(--ease-out), background var(--dur) var(--ease);
}

.lecture__play::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 22px;
  margin-inline-start: 4px;
  background: var(--green);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  transition: scale var(--dur) var(--ease-out);
}

.lecture__play:hover::before { scale: 1.08; background: rgba(255, 255, 255, 0.2); }
.lecture__play:hover::after { scale: 1.08; }

.lecture__title {
  color: var(--navy);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.008em;
  transition: color var(--dur) var(--ease);
}

.lecture__link { color: var(--navy); text-decoration: none; }
.lecture__link:hover .lecture__title { color: var(--green-deep); }

.lecture__external {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-block-start: 0.5rem;
  color: var(--green-deep);
}

/* --- Shops ---------------------------------------------------------------- */

.shops {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--space-gutter);
}

.shop {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--line), var(--el-2);
  transition: box-shadow var(--dur) var(--ease), translate var(--dur) var(--ease);
}

.shop:hover {
  translate: 0 -4px;
  box-shadow: 0 0 0 1px var(--line-strong), var(--el-lift);
}

.shop .rule { margin-block: 0.375rem; }

.shop__body {
  flex: 1;
  font-size: 0.9375rem;
}
.shop__body > * + * { margin-block-start: 0.875rem; }

.shop .btn { margin-block-start: 1rem; }

/* --- Contact form --------------------------------------------------------- */

/* Tighter now that the labels sit inside the fields as placeholders. */
.form { display: grid; gap: 0.625rem; }

.field-row { display: grid; gap: 0.375rem; }

.field__label {
  color: var(--navy);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}

.field__control {
  width: 100%;
  min-height: 52px;
  padding: 0.9375rem 1.125rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--navy);
  font-size: var(--fs-body);
  letter-spacing: -0.006em;
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--el-1);
  transition: box-shadow var(--dur) var(--ease);
}

.field__control:hover {
  box-shadow: inset 0 0 0 1px var(--ink-300), var(--el-1);
}

/* The placeholder is the only visible label now, so it needs real contrast
   rather than the usual hint grey. */
.field__control::placeholder {
  color: var(--ink-500);
  opacity: 1;
}

.field__control:focus {
  outline: 0;
  box-shadow:
    inset 0 0 0 1.5px var(--navy),
    0 0 0 4px rgba(0, 52, 92, 0.1);
}

textarea.field__control {
  min-height: 8rem;
  resize: vertical;
  line-height: 1.65;
}

.field__control[aria-invalid='true'] {
  box-shadow: inset 0 0 0 1.5px #c0392b, 0 0 0 4px rgba(192, 57, 43, 0.09);
}

.field__error {
  color: #a8321f;
  font-size: var(--fs-micro);
  font-weight: 500;
}
.field__error:empty { display: none; }

/* Honeypot — off-screen rather than display:none so bots still fill it. */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.form__status:empty { display: none; }

.form__status[data-state='success'] {
  background: rgba(111, 223, 0, 0.1);
  box-shadow: inset 3px 0 0 var(--green);
  color: var(--green-deep);
}

.form__status[data-state='error'] {
  background: rgba(192, 57, 43, 0.06);
  box-shadow: inset 3px 0 0 #c0392b;
  color: #8e2b20;
}

.btn[data-busy='true'] { pointer-events: none; opacity: 0.6; }

/* --- Footer --------------------------------------------------------------- */

.footer {
  position: relative;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

/* Bookend to the header's progress thread: same gradient, short and centred. */
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: 10rem;
  height: 2px;
  background: linear-gradient(90deg, var(--green), var(--blue));
}

.footer__inner {
  display: grid;
  justify-items: center;
  gap: 1.75rem;
  text-align: center;
}

.footer__logo {
  line-height: 0;
  transition: opacity var(--dur) var(--ease);
}
.footer__logo:hover { opacity: 0.72; }

.footer__logo img { width: auto; height: 68px; }

.footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.125rem;
  color: var(--ink-500);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.09em;
  line-height: 1.7;
  text-transform: uppercase;
}

.footer__meta a {
  color: inherit;
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.footer__meta a:hover {
  color: var(--navy);
  border-block-end-color: var(--green);
}

.footer__sep {
  color: var(--ink-300);
  user-select: none;
}

/* --- Utilities ------------------------------------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.stack-sm > * + * { margin-block-start: 0.875rem; }
.stack > * + * { margin-block-start: 1.375rem; }
.stack-lg > * + * { margin-block-start: clamp(2rem, 4vw, 3rem); }

/* --- Reveal -------------------------------------------------------------- */

/* Scoped to .js-reveal, which main.js adds only once its observer is running,
   so copy can never be stranded invisible if the script fails. */
.js-reveal [data-reveal] {
  opacity: 0;
  translate: 0 20px;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    translate var(--dur-slow) var(--ease-out);
}

.js-reveal [data-reveal][data-revealed='true'] {
  opacity: 1;
  translate: 0 0;
}

/* Children of a revealed group arrive in sequence rather than as one block. */
.js-reveal [data-reveal-stagger] > * {
  opacity: 0;
  translate: 0 22px;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    translate var(--dur-slow) var(--ease-out);
}

.js-reveal [data-reveal-stagger][data-revealed='true'] > * {
  opacity: 1;
  translate: 0 0;
}

.js-reveal [data-reveal-stagger][data-revealed='true'] > :nth-child(1) { transition-delay: 0ms; }
.js-reveal [data-reveal-stagger][data-revealed='true'] > :nth-child(2) { transition-delay: 70ms; }
.js-reveal [data-reveal-stagger][data-revealed='true'] > :nth-child(3) { transition-delay: 140ms; }
.js-reveal [data-reveal-stagger][data-revealed='true'] > :nth-child(4) { transition-delay: 210ms; }
.js-reveal [data-reveal-stagger][data-revealed='true'] > :nth-child(5) { transition-delay: 280ms; }
.js-reveal [data-reveal-stagger][data-revealed='true'] > :nth-child(6) { transition-delay: 350ms; }
.js-reveal [data-reveal-stagger][data-revealed='true'] > :nth-child(7) { transition-delay: 420ms; }
.js-reveal [data-reveal-stagger][data-revealed='true'] > :nth-child(8) { transition-delay: 490ms; }

/* Orchestrated hero entrance. */
.hero__inner > * {
  animation: rise 1s var(--ease-out) both;
}
.hero__inner > :nth-child(1) { animation-delay: 0.1s; }
.hero__inner > :nth-child(2) { animation-delay: 0.22s; }
.hero__inner > :nth-child(3) { animation-delay: 0.32s; }
.hero__inner > :nth-child(4) { animation-delay: 0.46s; }
.hero__inner > :nth-child(5) { animation-delay: 0.58s; }

@keyframes rise {
  from { opacity: 0; translate: 0 26px; }
  to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js-reveal [data-reveal],
  .js-reveal [data-reveal-stagger] > *,
  .hero__inner > * {
    opacity: 1;
    translate: none;
    animation: none;
  }

  .hero__cue { display: none; }
  .btn:hover,
  .provider:hover,
  .review:hover,
  .shop:hover,
  .carousel__btn:hover { translate: none; }
}

/* --- Print --------------------------------------------------------------- */

@media print {
  .header, .carousel__nav, .booking, .lecture__frame, .form, .field, .hero__cue { display: none; }
  body { color: #000; }
  .panel, .provider, .review, .shop { box-shadow: none; border: 1px solid #ccc; }
  .pricing__scroll { display: block !important; }
  .pricing-cards { display: none !important; }
}