/* AF Health — site styles
   Tokens follow the build brief; display/UI type is a deliberate upgrade
   (EB Garamond + Libre Franklin), with Lato and the EB Garamond italic in the logo lockup. */

:root {
  --ink: #1c1c1a;
  --olive: #6f8a44;
  --olive-deep: #4f6232;
  --olive-ink: #2f3a1e;
  --gray: #5e5d58;   /* secondary text: 5.6:1 on the beige ground, AA for small text */
  --cream: #f9f0e1;   /* bright beige page background */
  --sand: #efe2cc;
  --shell: #fdf9f2;   /* the lighter beige of alternating sections */
  --white: #ffffff;
  --rule: rgba(28, 28, 26, 0.14);
  --rule-light: rgba(255, 255, 255, 0.28);

  --f-display: "EB Garamond", Garamond, Georgia, serif;   /* headings; the same face as the logo's "arcadia" */
  --f-sans: "Libre Franklin", "Franklin Gothic", "Helvetica Neue", Arial, sans-serif;
  --f-label: var(--f-sans);   /* small labels: the body sans, in normal case */
  --f-logo: "Lato", "Helvetica Neue", Arial, sans-serif;
  --f-script: "EB Garamond", Georgia, serif;

  --gutter: clamp(16px, 3.2vw, 40px);
  --max: 1440px;
  --radius: 8px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 17px/1.55 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
::selection { background: var(--olive); color: var(--white); }
/* browser-drawn details in the brand palette: text caret, checkboxes and radios */
input, textarea { caret-color: var(--olive-deep); }
:root { accent-color: var(--olive-deep); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--ink); color: var(--white); padding: 10px 14px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Type ---------- */
.label {
  font: 500 12.5px/1.35 var(--f-label);
  letter-spacing: 0.01em;
}
.display {
  font-family: var(--f-display);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 0.92;
  margin: 0;
}
.display em, .serif-it {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
}
h2.display { font-size: clamp(44px, 7.4vw, 112px); }
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; max-width: 34ch; margin: 0; }
.muted { color: var(--gray); }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--olive-deep); --fg: var(--white);
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 0 22px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--bg); border-radius: 6px;
  font: 500 15px/1 var(--f-sans); letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { --bg: var(--olive-ink); }
.btn--ghost { --bg: transparent; --fg: currentColor; border-color: currentColor; }
.btn--ghost:hover { --bg: transparent; opacity: .75; }
.btn--light { --bg: var(--white); --fg: var(--ink); }
.btn--light:hover { --bg: var(--cream); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 14px; }

/* ---------- Logo lockup ----------
   A faithful rebuild of the original AF Health lockup (2.png). LOCKED: these numbers are measured from
   the original file; change them only if the logo itself changes.
   Units are em of the wordmark size (--logo-size). Lato's cap top sits 0.1735em below the line box top,
   and 1px of the original file = 0.008142em. The watercolour sprig is cut straight from the original and
   sits in front of the F, as it does there. */
.logo {
  --logo-size: 17px;
  position: relative; display: inline-block; font-size: var(--logo-size);
  width: 6.7em; height: 1.65em; color: inherit; text-decoration: none; line-height: 1;
}
.logo__af { position: relative; z-index: 2; display: block; font: 400 1em/1 var(--f-logo); letter-spacing: .1874em; margin-right: -.1874em; white-space: nowrap; }
.logo__row { position: absolute; inset: 0; pointer-events: none; }
.logo__rule { position: absolute; left: -.065em; top: 1.379em; width: 4.551em; height: max(1px, .0326em); background: currentColor; }
.logo__arcadia { position: absolute; left: 6.749em; top: 1.355em; font: italic 400 .69em/1 var(--f-script); color: var(--olive); } /* = 4.657em, .935em of the wordmark */
.logo__sprig { position: absolute; z-index: 0; left: .879em; top: -.396em; width: 1.791em; height: .912em; pointer-events: none; }
.logo__tag { display: none; }
.on-dark .logo__arcadia, .site-header .logo__arcadia { color: #d7e2bf; }
.on-dark .logo__sprig { filter: brightness(1.35) saturate(1.05); }

/* footer: the full original lockup, with "AESTHETIC + FUNCTION" */
.site-footer .logo { --logo-size: 22px; height: 2.25em; }
.site-footer .logo__tag {
  display: block; position: absolute; left: 0; top: 4.372em; white-space: nowrap; /* = 1.788em of the wordmark */
  font: 400 .409em/1 var(--f-logo); letter-spacing: .2425em; text-transform: uppercase; color: rgba(247,245,239,.62);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  color: var(--white);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header__in {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  height: 76px;
}
.site-header nav ul { display: flex; gap: 28px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.site-header nav a { text-decoration: none; font-size: 15px; position: relative; }
.site-header nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.site-header nav a:hover::after, .site-header nav a[aria-current]::after { transform: scaleX(1); }
.site-header__cta { display: flex; align-items: center; gap: 18px; }
.site-header__tel { text-decoration: none; font: 400 13px/1 var(--f-label); letter-spacing: .04em; }
.site-header .btn { --bg: var(--white); --fg: var(--ink); }
.site-header .btn:hover { --bg: var(--cream); }

.site-header.is-solid, .site-header--solid {
  background: rgba(244, 237, 226, 0.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--ink); border-bottom-color: var(--rule);
}
.site-header.is-solid .logo__arcadia, .site-header--solid .logo__arcadia { color: var(--olive); }
.site-header.is-solid .btn, .site-header--solid .btn { --bg: var(--olive-deep); --fg: var(--white); }
.site-header.is-solid .btn:hover, .site-header--solid .btn:hover { --bg: var(--olive-ink); }

.menu-toggle {
  display: none; width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer;
  padding: 0; position: relative;
}
.menu-toggle span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
.menu-toggle span:nth-child(1) { top: 18px; }
.menu-toggle span:nth-child(2) { top: 25px; right: 18px; }
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); right: 11px; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 45; background: var(--cream); color: var(--ink);
  padding: 110px var(--gutter) 40px; display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s;
}
.menu-open .mobile-menu { opacity: 1; visibility: visible; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.mobile-menu li a {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--rule);
  font: 300 38px/1 var(--f-display); letter-spacing: -0.02em; text-decoration: none;
}
.mobile-menu li a .label { color: var(--gray); }
.mobile-menu__foot { display: grid; gap: 12px; }

@media (max-width: 960px) {
  .site-header nav, .site-header__tel { display: none; }
  .site-header__in { grid-template-columns: 1fr auto auto; gap: 8px; height: 68px; }
  .menu-toggle { display: block; }
  .menu-open .site-header { color: var(--ink); }
  .menu-open .site-header .logo__arcadia { color: var(--olive); }
  .menu-open .site-header .btn { --bg: var(--olive-deep); --fg: var(--white); }
}

/* ---------- Hero ---------- */
.hero { padding: 10px; background: var(--cream); }
.hero__frame {
  position: relative; min-height: max(640px, calc(100svh - 20px));
  border-radius: var(--radius); overflow: hidden; color: var(--white);
  display: flex; flex-direction: column; justify-content: flex-end;
  isolation: isolate;
}
.hero__img { position: absolute; inset: 0; z-index: -2; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transform: scale(1.04); animation: heroIn 2.4s var(--ease) forwards; }
@keyframes heroIn { to { transform: scale(1); } }
.hero__frame::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(20,20,16,.45) 0%, rgba(20,20,16,0) 24%),
    linear-gradient(0deg, rgba(20,20,16,.74) 0%, rgba(20,20,16,.42) 38%, rgba(20,20,16,.08) 66%, rgba(20,20,16,0) 80%);
}

.hero__body { padding: 0 var(--gutter) clamp(22px, 3.2vw, 44px); }
.hero__title {
  font-family: var(--f-display); font-weight: 300; margin: 0;
  font-size: clamp(56px, 10.2vw, 170px); line-height: .86; letter-spacing: -0.035em;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero__title .line > span { display: inline-block; transform: translateY(105%); animation: rise 1.1s var(--ease) forwards; }
.hero__title .line:nth-child(2) > span { animation-delay: .12s; }
.hero__title .line:nth-child(3) > span { animation-delay: .24s; }
.hero__title .line--indent { padding-left: .9em; }
.hero__title .line--it { font-style: italic; letter-spacing: -0.045em; }
.hero__title sup {
  font-family: var(--f-display); font-style: italic; text-transform: none;
  font-size: .5em; font-weight: 500; letter-spacing: 0; vertical-align: top; position: relative; top: .2em; margin-left: .1em;
  padding-right: .22em; /* room for the italic F, which leans past its box and the line clips overflow */
  color: #a8d85c;
}
@keyframes rise { to { transform: translateY(0); } }

.hero__foot {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; align-items: end;
  margin-top: clamp(20px, 2.6vw, 36px); padding-top: 18px;
}
.hero__foot p { grid-column: 1 / span 2; margin: 0; max-width: 40ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; }
.hero__actions { grid-column: 3 / span 2; display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }

@media (max-width: 760px) {
  .hero { padding: 6px; }
  .hero__frame { min-height: calc(100svh - 12px); border-radius: 6px; }
  .hero__img img { object-position: 50% 30%; }
  .hero__title { font-size: clamp(44px, 14.2vw, 84px); }
  .hero__title .line--indent { padding-left: .55em; }
  .hero__foot { grid-template-columns: 1fr; gap: 18px; }
  .hero__foot p, .hero__actions { grid-column: auto; }
  .hero__actions { justify-content: flex-start; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Section scaffolding ---------- */
.section { padding: clamp(72px, 9vw, 128px) 0; }
.section--white { background: var(--shell); }
.section-head {
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 24px;
  padding-bottom: clamp(32px, 4vw, 56px);
}
.section-head .label { grid-column: 1; align-self: start; }
.section-head h2 { grid-column: 1 / span 3; }
.section-head .lede { grid-column: 4; }
@media (max-width: 860px) {
  .section-head { grid-template-columns: 1fr; }
  .section-head .label, .section-head h2, .section-head .lede { grid-column: auto; }
}

/* ---------- The clinic (our one location, in Arcadia) ---------- */
/* a compact section: the photo runs exactly as tall as the text beside it */
.place { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px 40px; align-items: stretch; }
.place__title { grid-column: 1 / -1; margin-bottom: 12px; font-size: clamp(40px, 4.6vw, 76px); text-transform: none; }
.nowrap { white-space: nowrap; }
@media (max-width: 860px) { .br-wide { display: none; } }
.place__title sup {
  font-family: var(--f-display); font-style: italic; font-size: .32em; letter-spacing: 0;
  vertical-align: top; position: relative; top: .3em; margin-left: .06em; color: var(--olive);
}
.place__photo { position: relative; margin: 0; grid-column: 1 / span 4; border-radius: var(--radius); overflow: hidden; min-height: 0; }
/* out of the flow, so the photo takes its height from the text column instead of setting it */
.place__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.place__text { grid-column: 5 / span 7; display: grid; gap: 22px; align-content: start; }
.place__text p:not(.label) { margin: 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; }
.place__addr { font-style: normal; font: 300 clamp(26px, 2.4vw, 34px)/1.15 var(--f-display); letter-spacing: -0.01em; padding-top: 22px; }
.place__dl { display: grid; grid-template-columns: 120px 1fr; gap: 10px 16px; margin: 0; font-size: 16px; align-items: baseline; }
.place__dl dt { color: var(--gray); }
.place__dl dd { margin: 0; }
.place__links { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .place { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .place__photo, .place__text { grid-column: 1 / -1; }
  .place__photo { margin-top: 4px; aspect-ratio: 4 / 3; }
}

/* ---------- Results: before/after + references ---------- */
.results { margin-top: clamp(56px, 7vw, 96px); }
.results__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.results__title { font: 300 clamp(32px, 3.6vw, 52px)/1 var(--f-display); letter-spacing: -0.02em; margin: 0; }
.results__title em { font-style: italic; }
.results__note { margin: 0; max-width: 46ch; color: var(--gray); font-size: 14px; line-height: 1.5; }
.results__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ba { margin: 0; display: grid; grid-template-rows: auto 1fr; gap: 16px; }
.ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: 5px; overflow: hidden; background: var(--white); aspect-ratio: 824 / 296; }
.ba__pair--single { grid-template-columns: 1fr; background: #111; }
.ba__img { position: relative; min-height: 0; background: var(--sand); }
.ba__img img { width: 100%; height: 100%; object-fit: cover; }
.ba__pair--single .ba__img img { object-fit: contain; }
.ba__tag { position: absolute; left: 8px; bottom: 8px; padding: 4px 7px; border-radius: 3px; background: rgba(28,28,26,.72); color: var(--white); font-size: 11.5px; }
.ba figcaption { display: grid; gap: 8px; align-content: start; }
.ba__device { margin: 0; color: var(--olive-deep); }
.ba__stat { margin: 0; font-size: 16px; line-height: 1.45; }
.ba__stat strong { font: 300 1.4em/1 var(--f-display); letter-spacing: -0.01em; }
.ba__credit { margin: 0; color: var(--gray); font-size: 12.5px; line-height: 1.45; }
.fn { font-size: .7em; line-height: 0; margin-left: 1px; }
.fn a { color: var(--olive-deep); text-decoration: none; font-family: var(--f-label); padding: 0 1px; position: relative; }
/* footnote numbers are tiny; give each a 32px invisible tap area without moving the text */
.fn a::after { content: ""; position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; transform: translate(-50%, -50%); }
.fn a:hover { text-decoration: underline; }
.refs { margin-top: 40px; padding-top: 20px; }
.refs .label { color: var(--gray); margin: 0 0 12px; }
.refs ol { margin: 0; padding-left: 1.4em; color: var(--gray); font-size: 13px; line-height: 1.55; columns: 2; column-gap: 48px; }
.refs li { break-inside: avoid; padding-left: 4px; margin-bottom: 8px; }
.refs li:target { color: var(--ink); background: var(--sand); border-radius: 3px; }
.refs a { color: var(--olive-deep); }
@media (max-width: 1100px) { .results__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; } }
@media (max-width: 640px) { .results__grid { grid-template-columns: 1fr; } .refs ol { columns: 1; } }

/* ---------- Booking block ---------- */
.book-block { padding: 10px; background: var(--cream); }
.book-block__in {
  position: relative; border-radius: var(--radius); overflow: hidden; color: var(--white);
  background: var(--olive-deep); isolation: isolate;
  padding: clamp(56px, 8vw, 120px) var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: end;
}
.book-block__in::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../img/olive-shadow.webp") center / cover; opacity: .32; mix-blend-mode: luminosity;
}
.book-block .label { grid-column: 1 / -1; color: #d7e2bf; }
.book-block h2 { grid-column: 1 / span 3; margin: 0; max-width: 17ch; font-size: clamp(40px, 5.2vw, 88px); line-height: 1.04; text-wrap: balance; } /* a full sentence now, so smaller than the old three-word line */
.book-block__side { grid-column: 4; display: grid; gap: 14px; }
.book-block__side .btn { justify-content: space-between; }
.book-block .btn--ghost { color: var(--white); }
@media (max-width: 860px) {
  .book-block__in { grid-template-columns: 1fr; }
  .book-block h2, .book-block__side { grid-column: auto; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--cream); padding: clamp(56px, 7vw, 96px) 0 28px; }
.site-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 56px; }
.site-footer h2 { margin: 0 0 16px; color: rgba(247,245,239,.55); font-weight: 400; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer address { font-style: normal; color: rgba(247,245,239,.8); line-height: 1.55; }
.site-footer__tag { margin: 22px 0 0; color: rgba(247,245,239,.6); max-width: 30ch; font-size: 15px; }
.site-footer__word {
  /* sized to the viewport with no minimum, so the italic F never runs past the edge on phones */
  font: 300 min(18.8vw, 300px)/.8 var(--f-display); letter-spacing: -0.045em; padding-right: .08em;
  color: rgba(247,245,239,.08); margin: 0 0 24px; white-space: nowrap; overflow: hidden; user-select: none;
}
.site-footer__word em { font-style: italic; }
.site-footer__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid rgba(247,245,239,.16); padding-top: 20px; color: rgba(247,245,239,.55); }
.site-footer__base ul { display: flex; gap: 20px; }
.site-footer__credit { color: #f4a6c6; }
.site-footer__credit:hover { color: #f9c4d9; }
@media (max-width: 860px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer__top > div:first-child { grid-column: 1 / -1; }
}

/* ---------- Mobile sticky booking bar ---------- */
.book-bar {
  position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 40;
  display: none; gap: 8px; padding: 8px; border-radius: 10px;
  background: rgba(28,28,26,.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transform: translateY(140%); transition: transform .45s var(--ease);
}
.book-bar.is-on { transform: translateY(0); }
.book-bar .btn { flex: 1; justify-content: center; min-height: 46px; }
.book-bar .btn--ghost { color: var(--white); border-color: rgba(255,255,255,.35); flex: 0 0 auto; }
@media (max-width: 760px) { .book-bar { display: flex; } body { padding-bottom: 0; } .site-footer { padding-bottom: 92px; } }

/* ---------- Book page ---------- */
.page-top { padding: 140px 0 56px; }
.page-top h1 { font-size: clamp(60px, 11vw, 176px); letter-spacing: -0.03em; }
.page-top h1 em { text-transform: none; }
.book-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(32px, 6vw, 96px); padding-bottom: clamp(80px, 10vw, 140px); padding-top: 40px; }
.book-aside { display: grid; gap: 28px; align-content: start; }
.book-aside .big-tel { font: 300 clamp(34px, 3.6vw, 52px)/1 var(--f-display); letter-spacing: -0.02em; text-decoration: none; display: block; margin-top: 10px; }
.book-aside .card { padding-top: 18px; }
.book-aside .card p { margin: 8px 0 0; color: var(--gray); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font: 400 13px/1.3 var(--f-label); letter-spacing: .01em; color: var(--gray); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 0; font: 400 19px/1.3 var(--f-sans); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid rgba(28,28,26,.35); border-radius: 0;
  -webkit-appearance: none; appearance: none; transition: border-color .25s;
}
.field select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%231c1c1a' stroke-width='1.3'/%3E%3C/svg%3E") right 4px center no-repeat; padding-right: 28px; }
.field input:focus, .field select:focus { outline: none; border-bottom-color: var(--olive-deep); box-shadow: 0 1px 0 0 var(--olive-deep); }
fieldset.field { border: 0; padding: 0; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 6px;
  border: 1px solid var(--rule); cursor: pointer; font-size: 15px; transition: all .2s;
}
.chip input:checked + span { background: var(--ink); color: var(--white); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--olive); outline-offset: 2px; }
.consent { grid-column: 1 / -1; font-size: 13px; line-height: 1.5; color: var(--gray); margin: 0; }
.form .btn { justify-self: start; }
.embed-note { grid-column: 1 / -1; border: 1px dashed rgba(28,28,26,.3); border-radius: 5px; padding: 16px 18px; color: var(--gray); font-size: 14px; }
@media (max-width: 860px) {
  .book-layout { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .book-aside { order: 2; }
}

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero__title .line > span { transform: none; }
  .js .reveal { opacity: 1; transform: none; }
}
.field .chip { font: 400 15px/1 var(--f-sans); letter-spacing: 0; text-transform: none; color: var(--ink); }


/* ---------- Hero, duo photo: the whole photo, full-bleed and uncropped (the frame takes the photo's own
   2000×1055 proportions). The faces fill most of it, so text only sits where there's no face:
   the headline bottom-left over the backdrop and her shoulder (below her chin, which ends at 73% of the
   height), and the intro + buttons in the plain backdrop column on the far right (right of 82%).
   Every size is in vw, so the layout scales as one piece and the clearance holds at any desktop width.
   A beige wash rises into the header to soften where the heads run off the top. */
/* full-bleed, square-cornered photo that starts below the header, so the header never covers the models' heads */
.hero--duo { padding: 76px 0 0; }
.hero--duo .hero__frame { min-height: 0; aspect-ratio: 2000 / 1055; border-radius: 0; }
.hero--duo .hero__img img { object-position: 50% 50%; }
.hero--duo .hero__frame::before {
  background:
    linear-gradient(180deg, rgba(236,220,194,.45) 0%, rgba(236,220,194,0) 6%),
    radial-gradient(ellipse 38% 46% at 0% 100%, rgba(24,17,10,.72) 0%, rgba(24,17,10,.4) 48%, rgba(24,17,10,0) 100%),
    radial-gradient(ellipse 26% 70% at 100% 100%, rgba(24,17,10,.62) 0%, rgba(24,17,10,.3) 50%, rgba(24,17,10,0) 100%);
}
.hero--duo .hero__body { position: absolute; inset: 0; padding: 0; }
.hero--duo .hero__title {
  position: absolute; left: 2.2vw; bottom: 1.1vw; margin: 0;
  font-size: 4.72vw; line-height: .86;
}
/* dark green *AF; a soft cream glow lifts it off the shadowed photo */
/* *AF in the brand sage (the same green as the research numerals), lifted off the photo by a soft shadow */
.hero--duo .hero__title sup { color: #c3d49b; background: transparent; text-shadow: 0 1px 2px rgba(24,17,10,.6), 0 0 14px rgba(24,17,10,.55), 0 0 28px rgba(24,17,10,.3); }
.hero--duo .hero__foot {
  position: absolute; right: 1.8vw; bottom: 2.4vw; width: 14.9vw; margin: 0; padding: 0; border: 0;
  display: grid; grid-template-columns: 1fr; gap: clamp(12px, 1.1vw, 22px);
}
/* The column cannot widen without reaching the right-hand face (which ends at ~81.5% of the photo; the column
   starts at ~83.3%), so on small laptops it grows taller instead: text and buttons keep readable floors. */
.hero--duo .hero__foot p { grid-column: auto; max-width: none; font-size: clamp(15px, 1.02vw, 20px); line-height: 1.45; text-wrap: pretty; }
.hero--duo .hero__actions { grid-column: auto; display: grid; gap: clamp(8px, .6vw, 12px); justify-content: stretch; }
.hero--duo .hero__actions .btn { justify-content: center; min-height: clamp(46px, 3.2vw, 62px); font-size: clamp(14px, 1vw, 18px); padding: 0 clamp(12px, 1vw, 20px); }
/* header over the beige wash: dark letters, olive button */
body:has(.hero--duo) .site-header:not(.is-solid) { color: var(--ink); }
body:has(.hero--duo) .site-header:not(.is-solid) .logo__arcadia { color: var(--olive-deep); }
body:has(.hero--duo) .site-header:not(.is-solid) .btn { --bg: var(--olive-deep); --fg: var(--white); }

/* Below 1100px there isn't room beside the faces, so the photo keeps its own proportions at the top
   (1.5x the width on phones, centred so both faces show), fades into a warm backdrop, and the text sits
   below it in white. Nothing overlaps a face at any size. */
@media (max-width: 1099px) {
  /* same colouring as desktop: the photo fades into its own warm shadow tone, with white type and a white button */
  .hero--duo .hero__frame { aspect-ratio: auto; min-height: 0; justify-content: flex-start; color: var(--white); background: linear-gradient(180deg, #4a3626 0%, #33251a 45%, #241a12 100%); }
  .hero--duo .hero__img {
    /* in the page flow (not layered), so the text always starts below the photo at any size or orientation;
       faces sit within x 21–82% of the photo, so this 130% width keeps both whole */
    position: relative; inset: auto; margin: 64px 0 0 -15%; width: 130%; height: auto; aspect-ratio: 2000 / 1055;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  }
  .hero--duo { padding: 0; }
  .hero--duo .hero__frame::before { background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 60px, rgba(244,237,226,0) 84px); }
  .hero--duo .hero__body { position: relative; inset: auto; padding: 8px var(--gutter) clamp(22px, 3.2vw, 44px); }
  .hero--duo .hero__title { position: static; font-size: clamp(52px, 12vw, 130px); }
  /* on the dark backdrop dark green disappears, so *AF takes a light sage from the same olive family */
  .hero--duo .hero__title sup { color: #c3d49b; text-shadow: none; }
  .hero--duo .hero__foot {
    position: static; width: auto; margin-top: clamp(20px, 2.6vw, 36px); padding-top: 18px; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end;
  }
  .hero--duo .hero__foot p { font-size: 16px; color: rgba(255,255,255,.86); max-width: 40ch; }
  .hero--duo .hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
  .hero--duo .hero__actions .btn { min-height: 48px; font-size: 15px; padding: 0 22px; }
}
@media (max-width: 760px) {
  .hero--duo .hero__img { margin-left: -25%; width: 150%; }
  /* phones are width-bound: the largest size that keeps each line whole at 375px */
  .hero--duo .hero__title { font-size: clamp(44px, 14.2vw, 100px); }
  .hero--duo .hero__title .line > span { white-space: nowrap; }
  .hero--duo .hero__title .line--indent { padding-left: 0; }
  .hero--duo .hero__title sup { font-size: .4em; margin-left: .12em; }
  .hero--duo .hero__foot { grid-template-columns: 1fr; }
  .hero--duo .hero__actions .btn { flex: 1 1 auto; }
}

/* ---------- References (bottom of page) ---------- */
.refs-section { padding: clamp(48px, 6vw, 80px) 0; background: var(--cream); }
.refs-section .refs { margin: 0; padding-top: 0; border-top: 0; }
.refs-section h2.label { margin: 0 0 16px; color: var(--gray); font-weight: 400; }

/* ---------- Clinic: the *AF note ---------- */
.af-star { color: var(--olive-deep); text-decoration: none; font-weight: 500; margin-left: 1px; }
.place__note { margin: 4px 0 0; font: italic 300 22px/1 var(--f-display); color: var(--olive-deep); }
.place__note span { font-style: normal; margin-right: 2px; }

/* ---------- Treatment pages ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.section--tight { padding-top: 24px; }
.txp-hero { padding: 132px 0 clamp(56px, 7vw, 96px); }
.txp-hero--index { padding-bottom: 24px; }
.txp-hero__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.txp-hero .label a { color: inherit; text-decoration: none; }
.txp-hero .label a:hover { text-decoration: underline; }
.txp-hero__title { font-size: clamp(60px, 9.4vw, 152px); margin: 18px 0 22px; letter-spacing: -0.03em; }
.txp-hero__title em { text-transform: none; }
.txp-hero .lede { max-width: 38ch; }
.txp-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 32px 0 28px; }
.txp-facts div { padding: 14px 16px 0 0; }
.txp-facts div + div { padding-left: 16px; }
.txp-facts dt { color: var(--gray); margin-bottom: 6px; }
.txp-facts dd { margin: 0; font-size: 15px; line-height: 1.35; }
.txp-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.txp-hero .lede + .txp-hero__actions { margin-top: clamp(28px, 3vw, 40px); } /* breathing room between the description and the buttons */
.txp-hero__photo { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; }
.txp-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.txp-soon { margin: 28px 0; max-width: 40ch; font-size: 17px; color: var(--gray); }
.txp-soon .label { color: var(--olive-deep); display: block; margin-bottom: 8px; }
.txp-waitlist { max-width: 560px; margin-top: 8px; }


.results__head--gallery { margin-bottom: 24px; }
.results__note--below { margin-top: 20px; } /* the photo disclaimer sits under the gallery */
.ba-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
.ba-grid .ba--wide { grid-column: 1 / -1; }
.ba--wide .ba__pair { aspect-ratio: 1430 / 583; }

.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(32px, 6vw, 96px); }
.faq__title { font-size: clamp(44px, 6vw, 88px); margin-top: 14px; }
.faq__list { }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative;
  font: 300 clamp(22px, 2vw, 28px)/1.2 var(--f-display); letter-spacing: -0.01em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 300 28px/1 var(--f-sans); color: var(--olive-deep); transition: transform .3s var(--ease); }
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item p { margin: 0 0 22px; color: var(--gray); max-width: 60ch; }

@media (max-width: 1000px) {
  .ba-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .txp-hero { padding-top: 104px; }
  .txp-hero__in, .faq { grid-template-columns: 1fr; }
  .txp-hero__photo { aspect-ratio: 4 / 3; order: -1; }
  .txp-facts { grid-template-columns: 1fr 1fr; }
  .txp-facts div:nth-child(3) { border-left: 0; padding-left: 0; }
  .txp-facts div:nth-child(n+3) { margin-top: 12px; }
  .ba-grid { grid-template-columns: 1fr; }
}

/* Booking thank-you page */
.page-top--thanks { padding-bottom: clamp(80px, 12vw, 160px); }
.page-top--thanks .lede { max-width: 46ch; margin: 28px 0 32px; }
.page-top--thanks .lede a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Treatments dropdown (header) ---------- */
.nav-dd { position: relative; }
.nav-dd__btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; font-size: 15px; cursor: pointer;
}
.nav-dd__panel {
  position: absolute; top: calc(100% + 22px); left: 50%; width: 400px; margin-left: -200px;
  padding: 10px; border-radius: 8px; background: var(--cream); color: var(--ink);
  border: 1px solid var(--rule); box-shadow: 0 24px 60px -18px rgba(28,28,26,.28);
  animation: ddIn .28s var(--ease);
}
/* a hover bridge across the gap, so moving the pointer down to the panel doesn't feel like leaving it */
.nav-dd__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px); } }
.site-header nav .nav-dd__panel ul { display: grid; gap: 2px; justify-content: stretch; }
.site-header nav .nav-dd__panel a::after { content: none; }
.nav-dd__panel li a {
  display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 14px;
  padding: 8px 10px 8px 8px; border-radius: 5px; transition: background .2s var(--ease);
}
.nav-dd__panel li a:hover, .nav-dd__panel li a:focus-visible { background: var(--sand); }
.nav-dd__panel img { width: 48px; height: 60px; object-fit: cover; border-radius: 3px; }
.nav-dd__panel strong { display: block; font: 300 21px/1.1 var(--f-display); letter-spacing: -0.01em; }
.nav-dd__panel small { display: block; margin-top: 4px; font: 400 12.5px/1.25 var(--f-label); letter-spacing: 0; color: var(--gray); }
.site-header nav .nav-dd__all {
  display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding: 14px 10px 6px;
  border-top: 1px solid var(--rule); font-size: 14px;
}
.site-header nav .nav-dd__all:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Mobile menu: Treatments opens a list of the five treatments */
.mobile-menu { overflow-y: auto; }
.mm-dd__btn {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline;
  padding: 18px 0; border: 0; border-bottom: 1px solid var(--rule); background: none; color: inherit; cursor: pointer;
  font: 300 38px/1 var(--f-display); letter-spacing: -0.02em; text-align: left;
}
.mm-dd__btn .label { color: var(--gray); display: inline-flex; align-items: center; gap: 10px; }
.mm-dd__caret { width: 7px; height: 7px; margin-top: -4px; border-right: 1.25px solid currentColor; border-bottom: 1.25px solid currentColor; transform: rotate(45deg); transition: transform .3s var(--ease), margin .3s var(--ease); }
.mm-dd__btn[aria-expanded="true"] .mm-dd__caret { transform: rotate(-135deg); margin-top: 4px; }
.mobile-menu .mm-dd__list { border-top: 0; }
.mobile-menu .mm-dd__list li a { padding: 13px 0 13px 18px; font-size: 24px; }
.mobile-menu .mm-dd__list li a .label { font-size: 11px; }
.nav-dd__panel li a[aria-current] { background: var(--sand); }
.mobile-menu .mm-dd__list li a[aria-current] { color: var(--olive-deep); }

/* ---------- Home: Discover treatments ---------- */
.discover__row {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px;
}
.discover__tile { display: grid; gap: 4px; text-decoration: none; color: inherit; }
.discover__img { display: block; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: var(--sand); margin-bottom: 12px; }
.discover__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.discover__name { font: 300 clamp(24px, 2vw, 30px)/1.05 var(--f-display); letter-spacing: -0.015em; }
.discover__what { color: var(--gray); }
@media (hover: hover) {
  .discover__tile:hover .discover__img img { transform: scale(1.04); }
  .discover__tile:hover .discover__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
}
.discover__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-top: clamp(32px, 4vw, 48px); padding-top: 24px;
}
.discover__foot p { margin: 0; max-width: 46ch; }
.discover + .results { margin-top: clamp(64px, 8vw, 112px); }
/* tablets and phones: a swipeable row that bleeds to the screen edge */
@media (max-width: 960px) {
  .discover__row {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 38%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scroll-padding: 0 var(--gutter);
  }
  .discover__row::-webkit-scrollbar { display: none; }
  .discover__row li { scroll-snap-align: start; }
}
@media (max-width: 600px) {
  .discover__row { grid-auto-columns: 62%; gap: 12px; }
  .discover__foot .btn { width: 100%; justify-content: center; }
}

/* About page: an empty placeholder for now, sized so the footer doesn't ride up under the title */


/* Footer wordmark: "feel good", "look good" and "age well" take turns before AF, each easing up into
   place and fading out over a 9s loop. All three share one grid cell, so the line never changes width. */
.fw-rot { display: inline-grid; justify-items: end; vertical-align: bottom; }
.fw-rot > span { grid-area: 1 / 1; opacity: 0; animation: fwRot 9s var(--ease) infinite; }
.fw-rot > span:nth-child(2) { animation-delay: 3s; }
.fw-rot > span:nth-child(3) { animation-delay: 6s; }
@keyframes fwRot {
  /* each word holds for a third of the loop; the next one rises in while it lifts away, so a word is always showing */
  0%     { opacity: 0; transform: translateY(.14em); }
  7%     { opacity: 1; transform: translateY(0); }
  33.3%  { opacity: 1; transform: translateY(0); }
  40.3%  { opacity: 0; transform: translateY(-.14em); }
  100%   { opacity: 0; transform: translateY(-.14em); }
}
@media (prefers-reduced-motion: reduce) {
  .fw-rot > span { animation: none; }
  .fw-rot > span:nth-child(2) { opacity: 1; }
}

/* ---------- Home: Education-Driven, Always. ---------- */
.edu { }
.edu__blurb { display: grid; gap: 16px; }
.edu__blurb p { margin: 0; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; }
.edu__blurb p + p { color: var(--gray); }
.edu__nowrap { white-space: nowrap; } /* never break at a hyphen */

/* home section titles share one size: Discover treatments, Your new home for health */
#tx-title, #place-title, #media-title { font-size: clamp(40px, 4.6vw, 76px); }

/* Education and science side by side: left column is the approach, right column the research behind it */
.edu__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(40px, 5vw, 80px); align-items: start; }
.edu__col.results { margin-top: 0; padding-left: clamp(40px, 5vw, 80px); }
.edu .edu__title { margin: 0 0 24px; font-size: clamp(30px, 3vw, 48px); line-height: 1.05; }
.edu .edu__title .edu__nowrap { font-family: var(--f-sans); font-weight: 700; letter-spacing: -0.025em; }
.edu .edu__blurb { margin: 0 0 36px; }
.edu .edu__blurb p { font-size: clamp(16px, 1.15vw, 18px); }
.edu .results__note { margin: 20px 0 0; }
.edu .results__grid { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
@media (max-width: 960px) {
  .edu__cols { grid-template-columns: minmax(0, 1fr); }
  .edu__col.results { padding-left: 0; border-left: 0; margin-top: 56px; padding-top: 40px; }
}
@media (max-width: 600px) {
  .edu .results__grid { grid-template-columns: minmax(0, 1fr); }
  .edu .edu__title { font-size: 6.6vw; } /* each title on one line at 375px */
}


/* ---------- Media: news carousel. Four stories in view on desktop, arrows page through ---------- */
.news-carousel__bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 22px; }
.news-carousel__nav { display: flex; gap: 8px; flex: none; }
.news-carousel__btn {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-size: 18px; cursor: pointer; display: grid; place-items: center; transition: background .25s var(--ease), color .25s var(--ease);
}
.news-carousel__btn:hover:not(:disabled) { background: var(--ink); color: var(--white); }
.news-carousel__btn:disabled { opacity: .3; cursor: default; }
.news-track {
  --per: 4; list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--per) - 1) * 20px) / var(--per)); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain;
}
.news-track::-webkit-scrollbar { display: none; }
.news-card { scroll-snap-align: start; min-width: 0; }
.news-card a {
  display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 10px; height: 100%; text-decoration: none; color: inherit;
  padding-bottom: 18px;
}
.news-card__media {
  display: grid; place-items: center; aspect-ratio: 5 / 3; border-radius: 5px; overflow: hidden;
  background: var(--white); border: 1px solid var(--rule); margin-bottom: 6px;
}
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
/* no photo: the outlet's own logo, centred on white */
.news-card__media--logo img { width: 62%; height: 48%; object-fit: contain; }
/* no photo or logo file: the outlet's name set in its house colours */
.news-card__media--type { background: var(--olive-deep); border-color: var(--olive-deep); }
.news-card__media--type span { font: 300 clamp(26px, 2.4vw, 36px)/1 var(--f-display); font-style: italic; color: var(--cream); letter-spacing: -0.01em; padding: 0 12px; text-align: center; }
.news-card__media--type[data-outlet="thesun"] { background: #e4161b; border-color: #e4161b; }
.news-card__media--type[data-outlet="thesun"] span { font-family: var(--f-sans); font-style: normal; font-weight: 900; font-size: clamp(34px, 3.2vw, 48px); line-height: 1; letter-spacing: -0.04em; color: #fff; }
.news-card__media--type[data-outlet="newbeauty"] { background: #fff; border-color: var(--rule); }
.news-card__media--type[data-outlet="newbeauty"] span { font-family: var(--f-sans); font-style: normal; font-weight: 600; font-size: clamp(22px, 2vw, 30px); line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: #111; }
.news-card__media--type[data-outlet="celebwell"] { background: #fff; border-color: var(--rule); }
.news-card__media--type[data-outlet="celebwell"] span { font-family: var(--f-sans); font-style: normal; font-weight: 700; font-size: clamp(28px, 2.6vw, 38px); line-height: 1; letter-spacing: -0.02em; text-transform: lowercase; color: #0f7a70; }
.news-card__media--type[data-outlet="firstforwomen"] { background: #d6246e; border-color: #d6246e; }
.news-card__media--type[data-outlet="firstforwomen"] span { font: 400 clamp(28px, 2.6vw, 38px)/1 var(--f-display); font-style: italic; color: #fff; }
.news-card__media--type[data-outlet="gmalifestyle"] { background: #fff; border-color: var(--rule); }
.news-card__media--type[data-outlet="gmalifestyle"] span { font-family: var(--f-sans); font-style: normal; font-weight: 700; font-size: clamp(24px, 2.2vw, 32px); line-height: 1; letter-spacing: -0.01em; color: #e1251b; }
.news__meta { display: flex; justify-content: space-between; gap: 12px; color: var(--gray); }
.news__meta span { color: var(--olive-deep); }
.news__title { font: 300 clamp(19px, 1.45vw, 22px)/1.2 var(--f-display); letter-spacing: -0.01em; }
/* two lines, then an ellipsis; align-self keeps the grid row from stretching the box past the clamp */
.news__sum {
  color: var(--gray); font-size: 14px; line-height: 1.5; align-self: start; max-height: 3em;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.news__tags span { font: 400 12px/1 var(--f-label); letter-spacing: 0; color: var(--olive-deep); background: var(--sand); padding: 6px 8px; border-radius: 3px; }
.news__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
@media (hover: hover) {
  .news-card a:hover .news__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .news-card a:hover .news-card__media img { transform: scale(1.04); }
}
@media (max-width: 1100px) { .news-track { --per: 3; } }
@media (max-width: 860px)  { .news-track { --per: 2; } }
@media (max-width: 560px)  {
  .news-track { --per: 1; grid-auto-columns: 84%; }
  .news-carousel__bar { align-items: flex-end; }
}
.press__more { margin: 28px 0 0; font-size: 15px; color: var(--gray); }
.press__more a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- Bolder: Education + Science as the page's peak ----------
   A full-width band in the brand's darkest olive (the same world as the booking slab and footer), so the
   section reads as a change of pace in the scroll. The research numbers carry it: set as large display
   numerals in sage, the evidence reads before a word is. Secondary text is tinted cream, never gray. */
.edu {
  border-top: 0; background: var(--olive-ink); color: var(--cream);
  padding: clamp(88px, 10vw, 150px) 0;
  --on-ink-2: rgba(247, 245, 239, .74);   /* secondary text on the band */
  --on-ink-rule: rgba(247, 245, 239, .18);
  --sage: #c3d49b;
}
.edu ::selection { background: var(--sage); color: var(--olive-ink); }
.edu .edu__title { font-size: clamp(34px, 3.4vw, 58px); line-height: 1.02; margin-bottom: 28px; color: var(--cream); }
.edu .edu__blurb p { color: var(--cream); }
.edu .edu__blurb p + p { color: var(--on-ink-2); }
.edu .results__note { color: var(--on-ink-2); }
.edu .ba__pair { background: #1d2412; }
.edu .ba__device { color: var(--sage); }
/* the evidence: each finding's numbers become display numerals that sit on their own line */
.edu .ba__stat { font-size: 15.5px; line-height: 1.5; color: var(--on-ink-2); }
.edu .ba__stat strong { font: 300 clamp(36px, 3.1vw, 52px)/1 var(--f-display); letter-spacing: -0.03em; color: var(--sage); }
.edu .ba__stat strong:first-child { display: block; margin: 2px 0 8px; }
.edu .ba__stat strong + strong, .edu .ba__stat strong:not(:first-child) { font-size: 1.35em; line-height: 1; letter-spacing: -0.01em; }
.edu .ba__credit { color: rgba(247, 245, 239, .6); }
.edu .fn a { color: var(--sage); }
.edu :focus-visible { outline-color: var(--sage); }
@media (max-width: 960px) {
}
.edu .ba__pair--single .ba__img { background: #111; } /* the ultrasound sits on black, not a beige box */

/* The consult photo, then the four education points beneath it as a row of titles on the olive band.
   Each title has a small plus marker; hovering, tapping or focusing one opens its description in a cream
   card (the plus turns to a cross). Titles are IBM Plex Sans: plain and engineered, not a UI default. */
.edu__visual { position: relative; border-radius: 8px; aspect-ratio: 3 / 2; }
.edu__visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: inherit; }
.edu__chips {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px;
}
.edu-chip { position: relative; outline: none; padding-top: 14px; }
.edu-chip strong {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font: 500 15px/1.25 "IBM Plex Sans", var(--f-sans); letter-spacing: -0.005em; color: var(--cream);
}
.edu-chip strong::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box;
  border: 1px solid rgba(195, 212, 155, .6);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 6v8M6 10h8' stroke='%23c3d49b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform .4s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.edu-chip span {
  position: absolute; z-index: 2; top: calc(100% + 10px); left: 0; width: max-content; max-width: 236px;
  padding: 12px 14px; border-radius: 5px; background: var(--shell); color: var(--ink);
  font-size: 14px; line-height: 1.5;
  box-shadow: 0 2px 4px rgba(24, 17, 10, .12), 0 18px 40px -12px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .28s var(--ease), transform .35s var(--ease), visibility 0s .35s;
}
/* the right-hand titles open their card leftward, so it stays inside the column */
.edu-chip--3 span, .edu-chip--4 span { left: auto; right: 0; }
.edu-chip:hover, .edu-chip:focus-within { z-index: 3; }
.edu-chip:hover strong::before, .edu-chip:focus strong::before {
  transform: rotate(45deg); border-color: var(--sage);
  background-color: rgba(195, 212, 155, .14);
}
.edu-chip:focus-visible strong { outline: 2px solid var(--sage); outline-offset: 4px; border-radius: 3px; }
.edu-chip:hover span, .edu-chip:focus span { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (max-width: 720px) {
  .edu__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
  .edu-chip--3 span { left: 0; right: auto; }
  .edu-chip--2 span, .edu-chip--4 span { left: auto; right: 0; }
  .edu-chip span { max-width: min(236px, 80vw); font-size: 13.5px; }
}

/* ---------- Media: the clinic's Instagram reels (official embeds), under the news carousel ---------- */
.ig { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(28px, 3vw, 40px); }
.ig__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.ig__title { margin: 0; }
.ig__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* Instagram's embed draws its own header and caption around the video; this frame fits a reel embed */
.ig-reel { min-width: 0; border-radius: 6px; overflow: hidden; background: var(--white); border: 1px solid var(--rule); }
.ig-reel iframe { display: block; width: 100%; height: 640px; border: 0; }
@media (max-width: 1100px) {
  .ig__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .ig__row::-webkit-scrollbar { display: none; }
  .ig-reel { scroll-snap-align: start; }
}
@media (max-width: 600px) { .ig__row { grid-auto-columns: 78%; } }

/* "Your new home for health": a small olive roofline, with a chimney, drawn over the word "home" */
.roofed { position: relative; display: inline-block; }
.roofed::before {
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 78%; aspect-ratio: 40 / 15; transform: translate(-50%, 32%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 15'%3E%3Cpath d='M2 14 L20 2 L38 14 M29 8 V3.2 H33.5 V11' fill='none' stroke='%234f6232' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

/* ---------- Media: News / Instagram tabs (a pill switch under the heading) ---------- */
.tabs__list { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: clamp(24px, 3vw, 36px); border-radius: 8px; background: var(--sand); }
.tabs__tab {
  min-height: 44px; padding: 0 22px; border: 0; border-radius: 5px; background: transparent; color: var(--gray);
  font: 500 15px/1 var(--f-sans); cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease);
}
.tabs__tab[aria-selected="true"] { background: var(--ink); color: var(--white); }
.tabs__tab:not([aria-selected="true"]):hover { color: var(--ink); }
.tabs__panel:focus-visible { outline-offset: 8px; }
.tabs__panel[hidden] { display: none; }
/* inside its own tab, the reels row needs no divider above it */
.tabs__panel .ig { margin-top: 0; padding-top: 0; border-top: 0; }

/* *AF: slides in from the middle of the page, bumps into "well." (which gives a little), and settles.
   --af-from is the distance from the viewport's centre, measured in site.js; the fallback is a guess. */
.hero__title .line:last-child { overflow: visible; overflow: visible clip; }
.af-hit { display: inline-block; }
.af-mark { display: inline-block; transform-origin: 0 60%; opacity: 0; transform: translateX(var(--af-from, 30vw));
  animation: afSlide 1.5s 1.05s both; }
.af-hit { animation: afHit 1.5s 1.05s both; }
@keyframes afSlide {
  0%   { opacity: 0; transform: translateX(var(--af-from, 30vw)); animation-timing-function: cubic-bezier(.45, 0, .85, .55); }
  12%  { opacity: 1; }
  48%  { transform: translateX(0) scaleX(.86); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  64%  { opacity: 1; transform: translateX(.22em) scaleX(1.02); animation-timing-function: cubic-bezier(.5, 0, .5, 1); }
  82%  { transform: translateX(-.03em); animation-timing-function: cubic-bezier(.5, 0, .5, 1); }
  100% { opacity: 1; transform: none; }
}
@keyframes afHit {
  0%, 47% { transform: none; }
  54%  { transform: translateX(-.05em) skewX(-1.5deg); animation-timing-function: cubic-bezier(.3, .6, .4, 1); }
  80%  { transform: translateX(.008em); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .af-mark, .af-hit { animation: none; opacity: 1; transform: none; }
}

/* Media heading swaps with the tab: the new title rises softly into place */
.media-title [data-tab-title]:not([hidden]) { display: inline-block; animation: titleSwap .55s cubic-bezier(.16, 1, .3, 1); }
@keyframes titleSwap { from { opacity: 0; transform: translateY(.18em); } }
@media (prefers-reduced-motion: reduce) { .media-title [data-tab-title] { animation: none; } }

/* Media section: a fine paper grain over warm shell, with a soft sand tone pooling at the corners,
   so it reads as a printed page rather than a flat panel */
#media {
  background-color: var(--shell);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36  0 0 0 0 .29  0 0 0 0 .21  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(120% 80% at 0% 0%, rgba(232, 220, 202, .75), transparent 55%),
    radial-gradient(110% 90% at 100% 100%, rgba(232, 220, 202, .85), transparent 60%);
  background-size: 240px 240px, auto, auto;
}

/* Media polish: the News / Instagram switch sits on the heading's row (right, on the heading's baseline),
   both panels open with a bar of the same height, and on phones the intro line gets the full width
   (stories are swiped there, so the arrows step aside) */
#media .section-head .tabs__list { grid-column: 4; justify-self: end; margin: 0 0 .35em; }
.news-carousel__bar, .ig__head { min-height: 48px; align-items: center; margin-bottom: 22px; }
@media (max-width: 860px) {
  #media .section-head .tabs__list { grid-column: auto; justify-self: start; margin: 0; }
  #media .section-head { gap: 20px; }
}
@media (max-width: 560px) {
  .news-carousel__nav { display: none; }
  .news-carousel__bar { min-height: 0; }
}

/* Education + Science polish
   - side by side (wide screens), the left column ends level with the results grid: the consult photo takes up
     the slack, from its own 3:2 up to a squarer crop (never so tall that it crops out either person)
   - the four titles drop to two by two while the column is too narrow to hold them on one line each */
@media (min-width: 961px) {
  .edu__cols { align-items: stretch; }
  .edu__cols > .edu__col:first-child { display: flex; flex-direction: column; container-type: inline-size; }
  .edu__cols > .edu__col:first-child .edu__visual { flex: 1 1 auto; aspect-ratio: auto; min-height: 66.6cqw; max-height: 85cqw; }
}
@media (max-width: 1360px) and (min-width: 961px) {
  .edu__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
  .edu-chip--3 span { left: 0; right: auto; }
  .edu-chip--2 span, .edu-chip--4 span { left: auto; right: 0; }
}

/* Treatment pages polish
   - the Text button is for phones only (it opens Messages); hidden for mouse users
   - section headings use the same scale as the home page's ("Discover treatments", "In the news")
   - on phones, the before/after pairs become a swipe row
     instead of six full-width stacks */
.only-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .only-touch { display: inline-flex; } }
#res-title, h2.faq__title { font-size: clamp(40px, 4.6vw, 76px); }
/* the single wide ultrasound image stays a readable size rather than spanning the full page */
.ba-grid .ba--wide { max-width: 980px; }
@media (max-width: 760px) {
  .ba-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-right: calc(-1 * var(--gutter, 16px)); padding-right: var(--gutter, 16px);
  }
  .ba-grid::-webkit-scrollbar { display: none; }
  .ba-grid > .ba { scroll-snap-align: start; }
  .ba-grid .ba--wide { grid-column: auto; }
}

/* ---------- Treatment pages: a conventional clinic layout ----------
   1. "How it works": an article (what it is, who it's for, what a session feels like) beside an
      "At a glance" panel of the practical facts, which stays in view as you read on wide screens.
   2. "The results": heading on the left, as in "Good to know"; on the right, when to expect results
      and the study findings as a ruled list with the figure leading each line, then the photos. */
.txo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 112px); align-items: start; }
.txo__title { font-size: clamp(40px, 4.6vw, 76px); margin: 0 0 clamp(20px, 2.4vw, 32px); }
.txo__lead { margin: 0; max-width: 46ch; font: 400 clamp(21px, 1.75vw, 26px)/1.38 var(--f-display); color: var(--ink); text-wrap: pretty; }
.txo__sub { margin: clamp(32px, 3.4vw, 44px) 0 8px; font: 600 16px/1.3 var(--f-sans); color: var(--ink); }
.txo__main p:not(.txo__lead) { margin: 0; max-width: 58ch; font-size: 17px; line-height: 1.6; color: var(--gray); text-wrap: pretty; }
.txo__main p.txo__more { margin-top: 18px; } /* a second intro paragraph, under the lead */
/* closing line linking to the treatments that pair well with this one */
.txo__main p.txo__related { margin-top: 28px; font-size: 16px; }
.txo__related a { color: var(--olive-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.txo__related a:hover { color: var(--olive-ink); }
.txo__aside { position: sticky; top: 104px; padding-top: 18px; }
.txo__aside-title { margin: 0 0 4px; font: 500 13px/1.3 var(--f-label); letter-spacing: .01em; color: var(--gray); }
.txo__glance { margin: 0 0 24px; }
.txo__glance div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.txo__glance dt { font-size: 14px; color: var(--gray); }
.txo__glance dd { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.txo__aside .btn { width: 100%; justify-content: center; }

.txr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(32px, 6vw, 96px); margin-bottom: clamp(64px, 8vw, 112px); }
.txr__title { font-size: clamp(40px, 4.6vw, 76px); margin: 0; }
.txr__lead { margin: 0 0 28px; max-width: 40ch; font: 400 clamp(21px, 1.7vw, 25px)/1.4 var(--f-display); color: var(--ink); text-wrap: pretty; }
.txr__findings { list-style: none; margin: 0; padding: 0; }
.txr__findings li { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.5; }
.txr__fig { font: 400 clamp(28px, 2.4vw, 36px)/1 var(--f-display); letter-spacing: -0.02em; color: var(--olive-deep); font-variant-numeric: lining-nums; white-space: nowrap; }
.txr__note { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--gray); max-width: 60ch; }
@media (max-width: 960px) {
  .txo, .txr { grid-template-columns: minmax(0, 1fr); }
  .txo__aside { position: static; }
}
@media (max-width: 520px) {
  .txr__findings li { grid-template-columns: 5.6em minmax(0, 1fr); gap: 14px; font-size: 15px; }
}

/* ---------- About ----------
   1. Story (the page's opening): "25+" set large as the one figure that matters, with the story beside it.
   2. Philosophy: four principles, centred over the olive-leaf shadow photo washed back to the page colour.
   3. Team: four empty portrait slots until photos and bios arrive. */

/* heading and founding belief side by side; under a rule, the 25+ beside the two paragraphs it backs up */
.ab-story__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px clamp(32px, 6vw, 96px); align-items: end; }
.ab-story__title { margin: 0; font-size: clamp(56px, 7vw, 112px); line-height: .95; letter-spacing: -0.025em; }
.ab-story__lead { margin: 0; max-width: 34ch; font: 400 clamp(22px, 2vw, 30px)/1.36 var(--f-display); color: var(--ink); text-wrap: pretty; }

.ab-story__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start;
  margin-top: clamp(48px, 6vw, 88px); padding-top: clamp(32px, 3.6vw, 48px);
}
/* the figure stays in view beside the story as it is read */
.ab-story__fig { position: sticky; top: 120px; display: flex; align-items: flex-end; gap: 18px; }
.ab-story__num { margin: 0; font: 400 clamp(88px, 9vw, 140px)/.8 var(--f-display); letter-spacing: -0.04em; color: var(--olive-deep); font-variant-numeric: lining-nums; }
.ab-story__cap { margin: 0 0 6px; max-width: 16ch; font-size: 15px; line-height: 1.45; color: var(--gray); }
/* one reading column, aligned with the founding belief above it */
.ab-story__text { max-width: 60ch; }
.ab-story__text p { margin: 0 0 1.1em; font-size: 18px; line-height: 1.7; color: var(--gray); text-wrap: pretty; }
.ab-story__text p:last-child { margin-bottom: 0; }
/* Our story sits on the deep olive band (the home page's education colour); the belief runs straight on into the 25+,
   divided only by a faint rule */
.ab-story { background: var(--olive-ink); color: var(--cream); --on-2: rgba(247, 245, 239, .74); --on-rule: rgba(247, 245, 239, .18); --sage: #c3d49b; }
.ab-story ::selection { background: var(--sage); color: var(--olive-ink); }
.ab-story h2.ab-story__title, .ab-story .ab-story__lead { color: var(--cream); }
.ab-story h2.ab-story__title em { color: var(--sage); }
.ab-story .ab-story__row { margin-top: clamp(40px, 5vw, 72px); }
.ab-story .ab-story__num { color: var(--sage); }
.ab-story .ab-story__cap, .ab-story .ab-story__text p { color: var(--on-2); }

.ab-phil {
  padding: clamp(168px, 14vw, 216px) 0 clamp(80px, 10vw, 144px); text-align: center; /* opens the page: clears the fixed header */
  background:
    linear-gradient(color-mix(in srgb, var(--cream) 82%, transparent), color-mix(in srgb, var(--cream) 82%, transparent)),
    url(/assets/img/olive-shadow.webp) center 40% / cover;
}
.ab-phil__in { display: grid; justify-items: center; }
.ab-phil__title { margin: 0 0 clamp(28px, 3.4vw, 44px); font: 400 clamp(20px, 1.6vw, 24px)/1.2 var(--f-display); color: var(--gray); }
.ab-phil__title em { color: var(--olive-deep); }
.ab-phil__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(10px, 1.2vw, 16px); }
.ab-phil__list li { font: 400 clamp(28px, 3.2vw, 48px)/1.12 var(--f-display); letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.ab-phil__list em { color: var(--olive-deep); }
/* the meaning of the logo's branch, closing the band: the sprig at its true size, a small heading, two sentences */
.ab-olive { display: grid; justify-items: center; max-width: 52ch; margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(32px, 4vw, 48px); }
.ab-olive__sprig { display: block; width: 84px; height: auto; }
.ab-olive__title { margin: 10px 0 12px; font: 400 clamp(22px, 1.9vw, 28px)/1.2 var(--f-display); color: var(--ink); }
.ab-olive__title em { color: var(--olive-deep); }
.ab-olive p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--gray); text-wrap: pretty; }


.about-team__head { margin-bottom: clamp(28px, 3.4vw, 44px); }
.about-team__title { margin: 0; font-size: clamp(40px, 4.6vw, 76px); }
.about-team__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.team-slot__photo { aspect-ratio: 4 / 5; border-radius: 6px; margin-bottom: 16px; background: var(--sand) url(/assets/img/olive-shadow.webp) 30% 35% / cover no-repeat; }
/* until portraits arrive, each slot holds a different crop of the two olive-branch photos */
.team-slot:nth-child(2) .team-slot__photo { background-image: url(/assets/img/olive-branch.webp); background-position: 22% 50%; }
.team-slot:nth-child(3) .team-slot__photo { background-size: 230%; background-position: 88% 82%; }
.team-slot:nth-child(4) .team-slot__photo { background-image: url(/assets/img/olive-branch.webp); background-size: auto 190%; background-position: 14% 38%; }
.team-slot__line { display: block; height: 12px; width: 52%; border-radius: 3px; background: var(--sand); margin-bottom: 9px; }
.team-slot__line--short { width: 34%; height: 10px; opacity: .7; }

@media (max-width: 960px) {
  .ab-phil { padding-top: 136px; }
  .ab-story__head { grid-template-columns: minmax(0, 1fr); }
  .ab-story__row { grid-template-columns: minmax(0, 1fr); }
  .ab-story__fig { position: static; }
}
@media (max-width: 640px) {
  .ab-story__num { font-size: 88px; }
  .ab-story__text p { font-size: 17px; }
  .about-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Treatment feature row (Emsculpt NEO): four line icons in olive with a short label under each,
   sitting on a hairline below the intro. The icons are drawn for the site, not BTL's set. */
.txo__features {
  list-style: none; margin: clamp(32px, 3.4vw, 44px) 0 0; padding: 24px 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px;
}
.txo__features li { display: grid; justify-items: start; align-content: start; gap: 12px; font: 500 15px/1.35 var(--f-sans); color: var(--ink); }
.txo__features svg {
  width: 48px; height: 48px; fill: none; stroke: var(--olive-deep); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.txo__features svg .fill { fill: var(--sage); stroke: none; }
@media (max-width: 640px) {
  .txo__features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Treatment pages: Aesthetic + Function (Emsculpt NEO). The brand's two halves side by side on the olive band:
   body sculpting on the left, functional wellness on the right, split by a hairline, each with its own short list. */
.txa { --sage: #c3d49b; --on: #f4ede2; --on-2: rgba(247, 245, 239, .74); --on-rule: rgba(247, 245, 239, .18); background: var(--olive-ink); color: var(--on); }
.txa ::selection { background: var(--sage); color: var(--olive-ink); }
.txa :focus-visible { outline-color: var(--sage); }
.txa__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(36px, 4vw, 56px); }
h2.txa__heading { margin: 0; font-size: clamp(40px, 4.6vw, 76px); color: var(--on); }
.txa__heading em { color: var(--sage); }
.txa__intro { margin: 0; max-width: 44ch; font-size: 17px; line-height: 1.6; color: var(--on-2); }
.txa__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.txa__col { padding: clamp(28px, 3vw, 40px) clamp(28px, 4vw, 64px) 0 0; }
.txa__col--f { padding-left: clamp(28px, 4vw, 64px); padding-right: 0; }
.txa__title { margin: 0 0 14px; font: 400 clamp(28px, 2.6vw, 40px)/1.05 var(--f-display); letter-spacing: -0.015em; color: var(--on); }
.txa__title em { color: var(--sage); }
.txa__lead { margin: 0 0 22px; max-width: 46ch; font-size: 16.5px; line-height: 1.6; color: var(--on-2); }
.txa__points { list-style: none; margin: 0; padding: 0; }
.txa__points li { position: relative; padding: 11px 0 11px 22px; font-size: 15.5px; line-height: 1.4; color: var(--on); }
.txa__points li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.txa__note { margin: clamp(28px, 3vw, 40px) 0 0; max-width: 72ch; font-size: 14px; line-height: 1.55; color: var(--on-2); }
.txa__note a { color: var(--on); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sage); }
@media (max-width: 860px) {
  .txa__head, .txa__cols { grid-template-columns: minmax(0, 1fr); }
  .txa__col { padding-right: 0; }
  .txa__col--f { padding-left: 0; border-left: 0; margin-top: 12px; }
}

/* Emsculpt NEO: no At a glance panel, so the How it works article takes the full width */
.txo--solo { grid-template-columns: minmax(0, 1fr); }
.txo--solo .txo__main { max-width: 860px; }

/* Aesthetic + Function: BTL's six headline figures as one row of rings across the foot of the section,
   body sculpting first, then function after a hairline. Each arc is filled to its percentage and draws in
   once when the row scrolls into view (already full without JS or with reduced motion). */
.txa__rings {
  list-style: none; margin: clamp(40px, 4.5vw, 64px) 0 0; padding: clamp(28px, 3vw, 40px) 0 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 16px;
}
.txa-ring { display: grid; grid-template-areas: "dial" "label"; align-content: start; justify-items: center; text-align: center; row-gap: 14px; }
.txa-ring svg { grid-area: dial; width: min(136px, 100%); aspect-ratio: 1; rotate: -90deg; overflow: visible; }
.txa-ring__track { fill: none; stroke: var(--on-rule); stroke-width: 2.5; }
.txa-ring__arc {
  fill: none; stroke: var(--sage); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: var(--len); stroke-dashoffset: calc(var(--len) - var(--fill));
  transition: stroke-dashoffset 1.6s cubic-bezier(.16, 1, .3, 1);
}
.js .txa__rings:not(.is-in) .txa-ring__arc { stroke-dashoffset: var(--len); }
.txa-ring:nth-child(2) .txa-ring__arc { transition-delay: .08s; }
.txa-ring:nth-child(3) .txa-ring__arc { transition-delay: .16s; }
.txa-ring:nth-child(4) .txa-ring__arc { transition-delay: .24s; }
.txa-ring:nth-child(5) .txa-ring__arc { transition-delay: .32s; }
.txa-ring:nth-child(6) .txa-ring__arc { transition-delay: .40s; }
.txa-ring__num { grid-area: dial; align-self: center; font: 400 clamp(28px, 2.4vw, 38px)/1 var(--f-display); letter-spacing: -0.02em; color: var(--on); font-variant-numeric: lining-nums; }
.txa-ring__label { grid-area: label; max-width: 18ch; font-size: 13.5px; line-height: 1.4; color: var(--on-2); }
@media (max-width: 860px) {
  .txa__rings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .txa-ring svg { width: min(104px, 100%); }
  .txa-ring__num { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .txa-ring__arc { transition: none; }
  .js .txa__rings:not(.is-in) .txa-ring__arc { stroke-dashoffset: calc(var(--len) - var(--fill)); }
}

/* Emsculpt NEO: BTL's Method of Action film beside How it works, in its own 4:3 frame with the site's corners */
.txo--video { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.txo__video { margin: 0; position: sticky; top: 104px; }
.txo__frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--olive-ink); }
.txo__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.txo__video figcaption { margin-top: 12px; font-size: 13.5px; color: var(--gray); }
@media (max-width: 960px) {
  .txo--video { grid-template-columns: minmax(0, 1fr); }
  .txo__video { position: static; max-width: 560px; }
}

/* Explainer figure under How it works (Emsella's ultrasound): BTL's image at a readable width with its caption */
.txo-fig { margin: clamp(44px, 5vw, 72px) 0 0; max-width: 980px; }
.txo-fig img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: #111; padding: clamp(10px, 1.4vw, 18px); box-sizing: border-box; } /* the PNG is transparent with white labels, so it needs a dark ground */
.txo-fig figcaption { margin-top: 12px; max-width: 70ch; font-size: 13.5px; line-height: 1.5; color: var(--gray); }
/* results with no photo gallery after them end without the gap reserved for it */
.txr:last-child { margin-bottom: 0; }

/* The results, on every treatment page: the figures as completion rings on the light background.
   Same ring as Aesthetic + Function, re-coloured for cream: olive arc, hairline track, ink numerals.
   As many columns as there are figures (3 or 4); four drop to two by two on phones. */
.txr__rings {
  --on: var(--ink); --on-2: var(--gray); --on-rule: var(--rule); --sage: var(--olive);
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  margin: 0; padding: 26px 0 0;
}
.txr__rings .txa-ring svg { width: min(128px, 100%); }
.txr__rings .txa-ring__num { font-size: clamp(26px, 2.2vw, 34px); }
.txr__rings .txa-ring__label { max-width: 20ch; font-size: 13.5px; }
.txr__rings .txa-ring__label .fn a { color: var(--olive-deep); }
.txr__rings + .txr__note { margin-top: 24px; }
.txr__note + .txr__note { margin-top: 6px; }
@media (max-width: 600px) {
  .txr__rings--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .txr__rings .txa-ring svg { width: min(96px, 100%); }
  .txr__rings .txa-ring__num { font-size: 24px; }
  .txr__rings { gap: 24px 10px; }
  .txr__rings .txa-ring__label { font-size: 12.5px; line-height: 1.35; }
}

/* The results, wide layout: heading left and the timing line right on the top row, then the rings
   across the full width of the page with their source notes beneath, so three or four rings sit evenly */
.txr--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: end; row-gap: clamp(32px, 3.6vw, 48px); }
.txr--wide .txr__lead { margin: 0; }
.txr--wide .txr__body { grid-column: 1 / -1; }
.txr--wide .txr__rings .txa-ring svg { width: min(148px, 100%); }
.txr--wide .txr__rings .txa-ring__num { font-size: clamp(28px, 2.4vw, 38px); }
.txr--wide .txr__rings .txa-ring__label { max-width: 24ch; font-size: 14px; }
@media (max-width: 960px) { .txr--wide { grid-template-columns: minmax(0, 1fr); row-gap: 20px; } }
@media (max-width: 600px) {
  .txr--wide .txr__rings .txa-ring svg { width: min(100px, 100%); }
  .txr--wide .txr__rings .txa-ring__num { font-size: 24px; }
  .txr--wide .txr__rings .txa-ring__label { font-size: 12.5px; }
}
/* a figure that isn't a percentage: a complete ring in the arc colour, three times the usual weight */
.txa-ring__arc--whole { stroke-width: 9; stroke-linecap: butt; }

/* Desktop fit: the home hero always fits the screen under the header, so the headline and both buttons are
   visible on arrival on short laptops (1280x720, 1366x768) as well as tall monitors. The photo keeps its full
   proportions when there is room; otherwise it crops at most 8% of its height, all from the top (the faces start
   ~9% down), so the faces never move relative to the headline and buttons. */
@media (min-width: 1100px) {
  .hero--duo .hero__frame { aspect-ratio: auto; height: clamp(48.6vw, calc(100svh - 76px), 52.75vw); }
  .hero--duo .hero__img img { object-position: 50% 100%; } /* any crop comes off the top (blank wall), so the faces keep their exact place above the headline */
}
/* short desktop screens: sections breathe a little less, so each one sits closer to a single screen */
@media (min-width: 1100px) and (max-height: 860px) {
  .section { padding: clamp(64px, 11vh, 96px) 0; }
}

/* Desktop fit for the treatment heroes: the photo never runs below the screen, so the title, description and
   both buttons (which line up with the photo's foot) are all in view on arrival. Short laptops also get a
   slightly smaller title and a tighter top. */
@media (min-width: 761px) {
  .txp-hero__photo { max-height: calc(100svh - 132px - 28px); }
}
@media (min-width: 761px) and (max-height: 860px) {
  .txp-hero { padding-top: 112px; }
  .txp-hero__photo { max-height: calc(100svh - 112px - 28px); }
  .txp-hero__title { font-size: clamp(60px, min(9.4vw, 15vh), 152px); }
}

/* Large and full-screen desktops.
   1. The content column grows with the screen (1440px up to 1800px) instead of stopping at 1440px, so wide
      monitors don't show a small island of content between empty margins.
   2. On the home page the hero photo runs edge to edge with its headline and buttons near the screen edges,
      so there the header spans the full width too, with its logo lined up over the headline and its
      Book Now over the hero's buttons. */
@media (min-width: 1100px) {
  :root { --max: clamp(1440px, 88vw, 1800px); }
  body:has(.hero--duo) .site-header__in { max-width: none; padding-left: 2.2vw; padding-right: 1.8vw; }
}

/* a complete ring drawn as a fine line (T-Shape 2's "2 cm") */
.txa-ring__arc--whole.txa-ring__arc--thin { stroke-width: 1.25; }

/* A comparison figure in the results (Exion's "radiofrequency alone"): an italic "vs." sits in the gap before it,
   and its ring and numeral are greyed so it reads as the benchmark, not a result of the treatment */
.txa-ring--vs { position: relative; }
.txa-ring--vs::before {
  content: "vs."; position: absolute; left: 0; top: min(74px, 50%); translate: -50% -50%;
  font: italic 400 clamp(20px, 1.6vw, 26px)/1 var(--f-display); color: var(--gray);
}
.txa-ring--vs .txa-ring__arc { stroke: #b7ad9f; }
.txa-ring--vs .txa-ring__num, .txa-ring--vs .txa-ring__label { color: var(--gray); }
@media (max-width: 600px) { .txa-ring--vs::before { top: 48px; font-size: 18px; } }

/* ring | photo | ring: the photo is a touch wider than a ring column, and its height sits close to a ring
   with its label, so the three read as one balanced row */
.txr__rings.txr__rings--photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; column-gap: clamp(24px, 3.4vw, 56px); }
.txr--wide .txr__rings--photo .txa-ring svg { width: min(172px, 100%); }
.txr--wide .txr__rings--photo .txa-ring__num { font-size: clamp(30px, 2.7vw, 42px); }
.txr__photo { margin: 0; }
.txr__photo img { display: block; width: 100%; aspect-ratio: 16 / 10; max-height: 300px; object-fit: cover; object-position: 42% 42%; border-radius: var(--radius); }
@media (max-width: 600px) {
  .txr__rings.txr__rings--photo { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .txr__photo img { max-height: none; }
  .txr--wide .txr__rings--photo .txa-ring svg { width: min(112px, 100%); }
  .txr--wide .txr__rings--photo .txa-ring__num { font-size: 26px; }
  .txr__photo { grid-column: 1 / -1; order: -1; }
  .txr__photo img { aspect-ratio: 16 / 9; }
}
/* Before & after made of single combined photos (both states in one image): two square photos side by side */
.ba-grid--singles { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; }
.ba--single { margin: 0; }
.ba--single img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 5px; }
.ba--single figcaption { margin-top: 10px; }
@media (max-width: 760px) { .ba-grid--singles { grid-template-columns: none; grid-auto-columns: min(86%, 400px); max-width: none; } }

/* Results as plain figures (Emface): large serif numerals in olive, the unit set small and raised beside them,
   a short label underneath. No rings, no rules. */
.txr__rings--figs { gap: 36px clamp(24px, 3.4vw, 56px); align-items: start; padding-top: clamp(8px, 1vw, 16px); }
.txr-fig { display: grid; gap: 16px; justify-items: start; text-align: left; }
.txr-fig__num {
  display: inline-flex; align-items: flex-start;
  font: 400 clamp(76px, 8vw, 132px)/.82 var(--f-display); letter-spacing: -0.045em; color: var(--olive-deep);
  font-variant-numeric: lining-nums;
}
.txr-fig__unit { margin: .1em 0 0 .04em; font-size: .4em; letter-spacing: 0; color: var(--olive); }
.txr-fig__label { max-width: 17ch; font-size: 15.5px; line-height: 1.45; color: var(--gray); text-wrap: balance; }
@media (max-width: 600px) {
  .txr__rings--figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .txr-fig__num { font-size: 76px; }
  .txr-fig__label { font-size: 14px; }
}

/* a word in a ring label can be stressed (Exion: "without") */
.txa-ring__label strong { font-weight: 600; color: var(--ink); }
/* stressed figures in a results line (Exion) use the real semibold cut, loaded with the fonts */
.txr__lead strong { font-weight: 600; }

/* Booking page: the Square Appointments scheduler sits where the request form was, on white so Square's own
   white widget reads as part of the page. Tall enough that most steps fit without scrolling inside the frame. */
.book-embed { min-width: 0; }
.book-embed__frame { display: block; width: 100%; height: clamp(720px, 88vh, 960px); border: 0; border-radius: var(--radius); background: var(--white); }
.book-embed__alt { margin: 12px 0 0; font-size: 14px; color: var(--gray); }
.book-embed__alt a { color: var(--olive-deep); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .book-embed__frame { height: 820px; } }