/* ---------- Icon sprite ----------
   Line icons at a single 24px grid, 1.6 stroke, inheriting currentColor, so a
   condition or therapy is identifiable before the label is read. Decorative:
   every icon sits beside a real text label and is hidden from assistive tech. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: 1.5em; height: 1.5em; flex: 0 0 auto; display: inline-block;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -.3em;
}
.ico--lg { width: 2.25rem; height: 2.25rem; stroke-width: 1.4; }

/* ============================================================
   Homepage, editorial clinic layout. Depends on tokens.css.

   Deliberately NOT the default template rhythm (eyebrow → H2 →
   paragraph → three equal shadowed cards, repeated down the page).
   Each section gets a different structural device:
     hero        full-bleed photographic field, copy overlaid
     credentials floating bar that breaks the hero edge
     conditions  numbered editorial index, one column, hairline rules
     therapies   two-across with dominant imagery, no elevation
     process     horizontal numbered sequence, oversized numerals
     reviews     one featured pull-quote + two supporting
   Elevation is used once (the comparison column we want chosen).
   ============================================================ */

/* ---------- Image placeholder component (BUILD SCAFFOLD) ---------- */
.ph {
  margin: 0;
  background: repeating-linear-gradient(135deg, #EDF2F5 0 12px, #E4EBEF 12px 24px);
  border: 1px dashed #9FB3BE;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; container-type: inline-size;
}
.ph__body { max-width: 46ch; width: 100%; }
.ph__tag { font-size: .75rem; font-weight: 600; color: #5A6B75; margin: 0 0 .35rem; }
.ph__what {
  font-family: var(--font-head); font-size: 1.0625rem; font-weight: 600;
  color: var(--c-ink); margin: 0 0 .85rem; line-height: 1.3;
}
.ph__spec { margin: 0; font-size: .9375rem; line-height: 1.5; }
.ph__spec > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .5rem; padding: .2rem 0; }
.ph__spec dt { font-weight: 600; color: #5A6B75; }
.ph__spec dd { margin: 0; color: var(--c-ink); }
.ph__spec dd em { font-style: normal; color: #8A2B06; font-weight: 600; }
.ph--wide { aspect-ratio: 16/8; }
.ph--card { aspect-ratio: 16/10; padding: 1.1rem; }
.ph--card .ph__spec > div { grid-template-columns: 4.25rem 1fr; }
.ph--face { aspect-ratio: 1/1; border-radius: 50%; padding: .85rem; text-align: center; }
.ph--face .ph__tag { font-size: .625rem; margin-bottom: .2rem; }
.ph--face .ph__what { font-size: .875rem; margin: 0; }
.ph--face .ph__spec { display: none; }
@container (max-width: 320px) { .ph__spec > div:nth-child(n+3) { display: none; } }

/* Inline marker for any fact the brief lists as unconfirmed (§13) */
.confirm {
  display: inline-block; background: var(--c-gold); color: var(--c-ink);
  font-size: .8125rem; font-weight: 600; line-height: 1.35;
  padding: .15em .5em; border-radius: 4px; max-width: 100%;
}
.confirm--block { display: block; max-width: var(--measure); padding: .7rem .9rem; margin-bottom: 1em; }

/* ---------- Editorial label ---------- */
.eyebrow {
  /* Was uppercase + .14em tracking + a trailing hairline. That combination is
     the most common AI-layout signature going. Now a plain running head: a rule
     above the section, normal case, no tracking, closer to printed matter. */
  font-size: 1rem; font-weight: 400; letter-spacing: -.01em;
  color: var(--c-ink-soft); margin: 0 0 1.1rem; padding-top: .95rem;
  display: block; max-width: 100%; position: relative; border-top: 0;
}
/* Rule D: an orange lead-in running into the hairline. */
.eyebrow::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: #B9B2A4;
}
.section--deep .eyebrow { color: #D6E4EC; }
.section--deep .eyebrow::before { background: rgba(255,255,255,.34); }  /* 5.0:1, #B9D3E0 was 4.03 */
.hero .eyebrow { color: #C6DCE7; }
.hero .eyebrow::before { background: rgba(255,255,255,.4); }

/* ---------- Header ---------- */
.site-header { background: var(--c-paper); border-bottom: var(--hairline); }
.header-utility {
  font-size: .9375rem; background: var(--c-ocean); color: #DCE9F0;
  border-bottom: 0;
}
.header-utility .wrap { display: flex; flex-wrap: wrap; gap: 0 .35rem; align-items: center; justify-content: flex-end; }
.header-utility a {
  color: #DCE9F0; display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: 0 .85rem; text-decoration: none; position: relative;
  transition: color .2s ease, background-color .2s ease;
}
.header-utility a + a::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 1rem; background: rgba(255,255,255,.22);
}
.header-utility a:hover { color: var(--c-white); background: rgba(255,255,255,.08); }
.header-utility a:focus-visible { outline-color: var(--focus-ring-dark); }
.header-utility .util-tel { font-weight: 600; color: var(--c-white); }
.header-utility .ico { width: 1rem; height: 1rem; }
.header-main .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .85rem; }

/* ---------- Brand ----------
   The mark and the words, nothing around them. The mark is decorative and the
   adjacent text carries the accessible name, which sidesteps the ring text
   being illegible at this size. */
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand img { width: 52px; height: 50px; flex: 0 0 52px; }
.brand__text { display: grid; gap: .05rem; line-height: 1.12; }
.brand__name {
  font-family: var(--font-head); font-weight: 700; font-size: 1.25rem;
  color: #6B1839; letter-spacing: -.015em; white-space: nowrap;
}
.brand__sub {
  font-size: .8125rem; color: var(--c-ink-soft); white-space: nowrap; letter-spacing: .01em;
}
@media (max-width: 26rem) { .brand__sub { display: none; } .brand img { width: 44px; height: 42px; flex-basis: 44px; } }

.nav-primary > ul { list-style: none; display: flex; flex-wrap: wrap; gap: .1rem; margin: 0; padding: 0; align-items: center; }
.nav-primary > ul > li > a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: .5rem .45rem; border-radius: 4px;
  text-decoration: none; color: var(--c-ink); font-size: 1rem; font-weight: 400;
}
.nav-primary > ul > li > a:hover { color: var(--c-ocean); text-decoration: underline; text-underline-offset: .35em; }
/* Book was reading as a label rather than a control: wider, with an arrow cell. */
.nav-primary > ul > li > a.btn--primary { color: var(--c-white); margin-left: .85rem; font-weight: 600; }
.btn--split { padding: 0; gap: 0; overflow: hidden; min-width: 12.5rem; }
.btn--split > span:first-child { padding: .8rem 1.25rem; }
.btn__arrow {
  padding: .8rem 1rem; border-left: 1px solid rgba(255,255,255,.34);
  display: flex; align-items: center; align-self: stretch;
  transition: background-color .2s ease;
}
.btn--split:hover .btn__arrow { background: rgba(255,255,255,.16); }
.nav-primary > ul > li > a.btn--primary:hover { background: #17506F; color: var(--c-white); text-decoration: none; }

.nav-toggle {
  display: none; align-items: center; gap: .5rem;
  min-height: var(--tap); min-width: var(--tap); padding: .5rem 1rem;
  font: inherit; font-size: 1rem; font-weight: 600; color: var(--c-ocean);
  background: transparent; border: 1px solid var(--c-ocean); border-radius: var(--radius-sm); cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 3px; }
.nav-toggle__bars span { display: block; width: 18px; height: 2px; background: currentColor; }

@media (max-width: 62rem) {
  .nav-toggle { display: inline-flex; }
  .header-main .wrap { flex-wrap: wrap; }
  .nav-primary { display: none; flex-basis: 100%; }
  .nav-primary.is-open { display: block; padding-bottom: .75rem; }
  .nav-primary.is-open > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-primary.is-open > ul > li + li { border-top: var(--hairline); }
  .nav-primary.is-open > ul > li > a { width: 100%; font-size: 1.0625rem; padding: .7rem .25rem; }
  .nav-primary.is-open > ul > li > a.btn--primary { justify-content: center; margin: .75rem 0 0; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--space-section); }
.section--tint { background: var(--c-tint-ocean); }
.section--sand { background: var(--c-tint-sand); }
.section--deep { background: var(--c-ocean); color: var(--c-white); }
.section--deep h2, .section--deep h3 { color: var(--c-white); }
.section--deep a { color: var(--c-white); }
.section--deep .field .hint,
.section--deep .form__note { color: #DCE9F0; }
.section--deep :focus-visible,
.site-footer :focus-visible,
.action-bar a:last-child:focus-visible { outline-color: var(--focus-ring-dark); }
.section__intro { margin-bottom: 3rem; }

/* ---------- HERO: full-bleed field, copy overlaid ---------- */
.hero {
  position: relative; isolation: isolate; color: var(--c-white);
  padding-block: clamp(4rem, 10vw, 8rem) clamp(6.5rem, 11vw, 9rem);
  background: #0E3044;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; display: block; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
/* Scrim holds text contrast over the photograph. Left third stays darkest,
   which is why the crop note asks for that area to be kept quiet. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(10,38,54,.95) 0%, rgba(10,38,54,.88) 42%, rgba(10,38,54,.55) 72%, rgba(10,38,54,.35) 100%);
}
.hero__copy { max-width: 34rem; }
.hero h1 { color: var(--c-white); margin-bottom: 1.4rem; }
.hero .eyebrow { color: var(--c-gold-text, #F7D89A); }
.hero .eyebrow::after { background: rgba(255,255,255,.32); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.hero__actions .btn + .btn { margin-left: 0; }
.hero__actions .btn--ghost { color: var(--c-white); border-color: rgba(255,255,255,.7); }
.hero__actions .btn--ghost:hover { background: rgba(255,255,255,.14); }
.hero__reassure { font-size: var(--fs-small); color: #C6DCE7; margin-top: 1.25rem; max-width: 50ch; }
/* Spec panel sits in the hero so the sourcing brief travels with the design */
.hero .ph {
  background: rgba(252,250,246,.93); border-color: rgba(255,255,255,.45);
  border-radius: var(--radius); aspect-ratio: auto;
}

/* ---------- Credential bar: breaks the hero edge ---------- */
.credentials { margin-top: calc(-1 * clamp(2rem, 4vw, 3rem)); margin-bottom: clamp(1rem, 3vw, 2rem); position: relative; z-index: 2; }
.credentials ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--c-sand); border: 1px solid #D8C4A4; border-radius: var(--radius);
  box-shadow: var(--shadow-lift); overflow: hidden;
}
/* Icon inline with the label rather than a plate beside a block of text: the
   old layout gave each cell a two-row grid, which forced one-word line breaks
   as soon as the track narrowed. */
.credentials li {
  padding: .95rem 1.05rem; max-width: none; border-right: 1px solid #D8C4A4;
  display: block; min-width: 0;
}
.credentials li:last-child { border-right: 0; }
.cred__logo { display: inline-block; vertical-align: -.3em; margin-right: .45rem; }
.cred__logo .ico { color: var(--c-botanical); width: 1.25rem; height: 1.25rem; }
.credentials b {
  font-family: var(--font-head); font-size: .9375rem; font-weight: 600;
  color: var(--c-ocean); line-height: 1.25; display: inline;
}
.credentials span { display: block; font-size: .8125rem; line-height: 1.4; color: #4A4535; margin-top: .2rem; text-wrap: pretty; }
@media (max-width: 62rem) {
  .credentials ul { grid-template-columns: repeat(2, 1fr); }
  .credentials li:nth-child(2n) { border-right: 0; }
  .credentials li:nth-child(-n+2) { border-bottom: 1px solid #D8C4A4; }
}
@media (max-width: 34rem) {
  .credentials ul { grid-template-columns: 1fr; }
  .credentials li { border-right: 0; border-bottom: 1px solid #D8C4A4; }
  .credentials li:last-child { border-bottom: 0; }
}

/* ---------- Comparison ---------- */
.compare { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); border: var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--c-paper); }
.compare__col { padding: 1.75rem 1.5rem; border-right: var(--hairline); }
.compare__col:last-child { border-right: 0; }
/* The single elevated element on the page, the column we want chosen. */
.compare__col--ours { background: var(--c-white); box-shadow: var(--shadow-lift); position: relative; }
.compare__col--ours::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c-orange); }
.compare__who { font-family: var(--font-head); font-size: 1.125rem; font-weight: 600; color: var(--c-ink-soft); margin: 0 0 1.1rem; }
.compare__col--ours .compare__who { color: var(--c-ocean); }
.compare__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.compare__list li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .6rem; font-size: 1rem; max-width: none; }
.mark { font-weight: 700; line-height: 1.5; }
.mark--yes { color: var(--c-botanical); }
.mark--no { color: #8A2B06; }
@media (max-width: 52rem) { .compare__col { border-right: 0; border-bottom: var(--hairline); } }

/* ---------- CONDITIONS: numbered editorial index ---------- */
.index { list-style: none; margin: 0; padding: 0; border-top: var(--hairline); }
.index__row { max-width: none; }
.index__row { border-bottom: var(--hairline); }
/* The row is a stage. The photograph bleeds from the left edge at low opacity
   with a long soft ramp, and the content sits on top of it. Column 2 is left
   deliberately empty: it is the clear zone the bleed fades out across, which
   is how the image gets to be wide without ever sitting under the text. */
.index__row { position: relative; }
.index__link {
  position: relative; overflow: hidden;
  display: grid; gap: .3rem 1rem; align-items: start;
  grid-template-columns: 2rem 1fr; padding: 1.25rem .75rem 1.5rem .25rem;
  text-decoration: none; color: inherit;
  transition: background-color .35s cubic-bezier(.22,.61,.36,1);
}
.index__num, .index__name, .index__desc, .index__go { position: relative; z-index: 1; }

.index__media {
  position: absolute; inset: 0 auto 0 0; z-index: 0; pointer-events: none;
  width: 38%; opacity: .6; overflow: hidden;
  /* Fixed-pixel envelope, so the fade always finishes in the same place no
     matter how wide the row gets. Long ramp is what makes it read as light
     rather than as a pasted-in rectangle. */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 88px, rgba(0,0,0,.45) 168px, transparent 250px);
          mask-image: linear-gradient(to right, #000 0, #000 88px, rgba(0,0,0,.45) 168px, transparent 250px);
  transition: opacity .45s cubic-bezier(.22,.61,.36,1);
}
.index__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02);
  transition: transform .7s cubic-bezier(.22,.61,.36,1), filter .45s ease;
  filter: saturate(.8) contrast(.98);
  object-position: 38% 50%;
}
/* Rows without a photograph stay clean. A coloured fill reads as a band. */
.index__media--todo { display: none; }

.index__link:hover, .index__link:focus-visible { background: rgba(234,217,190,.28); }
.index__link:hover .index__media,
.index__link:focus-visible .index__media { opacity: .72; }
.index__link:hover .index__media img,
.index__link:focus-visible .index__media img { transform: scale(1.1); filter: saturate(1) contrast(1); }

.index__media { grid-column: 1 / -1; }
.index__num  { grid-column: 1; grid-row: 1; }
.index__name { grid-column: 2; grid-row: 1; }
.index__desc { grid-column: 2; grid-row: 2; }
.index__go   { grid-column: 2; grid-row: 3; }

@media (min-width: 55rem) {
  .index__link {
    /* Column 2 stays empty. It is the runway the bleed fades across. */
    grid-template-columns: 2.25rem 12.5rem minmax(9rem, 13rem) 1fr 2rem;
    gap: .3rem 1.5rem; padding: 0 .75rem 0 .25rem; min-height: 9.75rem;
    align-content: center;
  }
  .index__num  { grid-column: 1; grid-row: 1; }
  .index__name { grid-column: 3; grid-row: 1; }
  .index__desc { grid-column: 4; grid-row: 1; }
  .index__go   { grid-column: 5; grid-row: 1; justify-self: end; }
}

/* Phones: the bleed lies down, fading bottom to top behind the text. */
@media (max-width: 55rem) {
  .index__media {
    inset: 0 0 auto 0; width: 100%; height: 11rem;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 45%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0, #000 45%, transparent 100%);
    opacity: .28;
  }
  .index__link { padding-top: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .index__media, .index__media img, .index__link { transition: none; }
  .index__link:hover .index__media img { transform: scale(1.02); }
}

/* Build scaffolding: the shot still to source, kept quiet. */
.index__brief {
  display: block; margin-top: .55rem; font-size: .78125rem; line-height: 1.45;
  color: #55472F; background: rgba(245,195,77,.22);
  border-left: 2px solid var(--c-gold); padding: .35rem .6rem; max-width: 46ch;
}
.index__link:hover { background: var(--c-tint-sand); }
.index__num {
  font-size: .875rem; font-weight: 600; letter-spacing: 0;
  color: var(--c-ink-soft); font-variant-numeric: tabular-nums;  /* not orange, §3 bars it as text */
}
.index__name { font-family: var(--font-head); font-size: 1.25rem; font-weight: 600; color: var(--c-ocean); line-height: 1.25; }
.index__desc { font-size: 1rem; color: var(--c-ink-soft); max-width: 54ch; }
.index__go { color: var(--c-ocean); font-size: 1.25rem; }

/* ---------- THERAPIES: two across, imagery dominant, no elevation ---------- */
.therapies { display: grid; gap: 3rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); }
.therapy { display: flex; flex-direction: column; gap: 1rem; }
.therapy .ph { border-radius: var(--radius); }
.therapy__head { display: flex; align-items: baseline; gap: .75rem; }
.therapy__num { font-family: var(--font-head); font-size: 1.75rem; font-weight: 600; line-height: 1; color: #2B8FA8; font-variant-numeric: tabular-nums; }
.therapy h3 { margin: 0; }
.therapy h3 a { text-decoration: none; }
.therapy h3 a:hover { text-decoration: underline; text-underline-offset: .2em; }
.therapy p { font-size: 1rem; color: var(--c-ink-soft); margin: 0; max-width: 46ch; }
.therapy__more { margin-top: auto; padding-top: .5rem; font-size: .9375rem; }

/* ---------- PROCESS: numbered sequence, no boxes ---------- */
.process { list-style: none; margin: 0; padding: 0; counter-reset: p;
  display: grid; gap: 0 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .process { grid-template-columns: repeat(2, 1fr); } }
/* Three across so six items read 3 + 3, not 4 + 2 orphans. */
@media (min-width: 62rem) { .process { grid-template-columns: repeat(3, 1fr); } }
.process > li { counter-increment: p; max-width: none; padding: 1.75rem 0; border-top: 2px solid var(--c-ocean); }
.process > li::before {
  content: counter(p, decimal-leading-zero); display: block;
  font-family: var(--font-head); font-size: 2.25rem; font-weight: 600;
  color: #2B8FA8; line-height: 1; margin-bottom: .6rem; font-variant-numeric: tabular-nums;
}
.process h3 { margin-bottom: .4rem; }
.process p { font-size: 1rem; color: var(--c-ink-soft); max-width: none; margin: 0; }

/* ---------- Generic cards (used sparingly now) ---------- */
.grid { display: grid; gap: 1.25rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.card { background: var(--c-paper); border: var(--hairline); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; flex-direction: column; gap: .35rem; }
.card h3 { margin-bottom: .25rem; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card p { font-size: 1rem; color: var(--c-ink-soft); max-width: none; margin-bottom: .5rem; }
.card__foot { margin-top: auto; padding-top: .75rem; font-size: .9375rem; }
/* A link that is the sole content of a paragraph is a standalone target, not
   inline prose, so it gets the full 48px. Inline links keep SC 2.5.8's exception. */
.card__foot a, .therapy__more a,
main p > a:only-child { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ---------- Providers ---------- */
.provider { display: grid; gap: 1.5rem 2rem; align-items: start; }
@media (min-width: 40rem) { .provider { grid-template-columns: 8.5rem 1fr; } }
.provider__cred { font-size: 1rem; color: var(--c-botanical); font-weight: 600; margin: 0 0 .85rem; }
.provider p { font-size: 1rem; }

/* ---------- Reviews: one featured + two supporting ---------- */
.reviews { display: grid; gap: 1.5rem; }
@media (min-width: 58rem) { .reviews { grid-template-columns: 1.35fr 1fr; align-items: start; } }
.reviews__side { display: grid; gap: 1.5rem; }
.review { display: flex; flex-direction: column; gap: .9rem; padding-top: 2.4rem; position: relative; border-top: 0; }
.review::before {
  content: "\201C"; position: absolute; top: -.7rem; left: -.4rem;
  font-family: var(--font-head); font-size: 5rem; line-height: 1; color: var(--c-aqua);
}
.review__stars { color: #9A6300; font-size: .9375rem; letter-spacing: .12em; margin: 0; }
.review blockquote { margin: 0; }
.review blockquote p { margin: 0; max-width: 44ch; }
.review figcaption { font-size: .9375rem; color: var(--c-ink-soft); }
.review figcaption b { color: var(--c-ink); font-weight: 600; }
.review--featured::before { color: var(--c-orange); font-size: 6rem; }
.review--featured blockquote p {
  font-family: var(--font-head); font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.4; color: var(--c-ink); max-width: 30ch;
}

/* ---------- Mission ---------- */
.pullquote { font-family: var(--font-head); font-size: clamp(1.25rem, 2.6vw, 1.625rem); line-height: 1.35; color: var(--c-ocean); margin: 0 0 .5rem; max-width: 26ch; }
.pullquote-attr { font-size: 1rem; color: var(--c-ink-soft); margin: 0; }
/* Bordered rounded chips are the tell the brief's own §3 card rule invites.
   Set as a single serif run instead, reads like a masthead, not a tag cloud. */
.values { list-style: none; margin: 1.75rem 0 0; padding: 0; max-width: 42ch; }
.values li { display: inline; font-family: var(--font-head); font-size: 1.125rem; font-weight: 600; color: var(--c-ocean); max-width: none; }
.values li + li::before { content: "/"; color: var(--c-rule); font-weight: 400; padding: 0 .55rem; }

/* ---------- Two-column editorial split ---------- */
.split { display: grid; gap: 2.5rem; }
@media (min-width: 55rem) { .split { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.split--lead { grid-template-columns: 1fr; }
@media (min-width: 55rem) { .split--lead { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); } }

/* ---------- Pricing ---------- */
.facts { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .85rem; }
.facts li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .7rem; max-width: var(--measure); }

/* ---------- Form ---------- */
.form { display: grid; gap: 1.25rem; max-width: 34rem; }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 600; font-size: 1rem; }
.field .hint { font-size: .9375rem; color: var(--c-ink-soft); margin: 0; }
.field input, .field select {
  font: inherit; font-size: 1rem; min-height: var(--tap);
  padding: .65rem .8rem; border: 1px solid #8A949C; border-radius: var(--radius-sm);
  background: var(--c-white); color: var(--c-ink); width: 100%;
}
.form__note { font-size: .9375rem; }

/* ---------- FAQ ---------- */
.faq { max-width: var(--w-text); border-top: 0; }
.faq::before { content: ""; display: block; height: 1px; background: linear-gradient(90deg, var(--c-ink), transparent); }
.faq__item { border-bottom: var(--hairline); }
.faq__q { margin: 0; }
.faq__btn {
  width: 100%; min-height: var(--tap); display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font: inherit; font-family: var(--font-head); font-size: 1.125rem; font-weight: 600; color: var(--c-ocean);
  background: none; border: 0; padding: 1.15rem .25rem; text-align: left; cursor: pointer;
}
.faq__btn::after { content: "\2212"; font-size: 1.5rem; line-height: 1; color: var(--c-ink-soft); flex: 0 0 auto; }
.faq__btn[aria-expanded="false"]::after { content: "\002B"; }
.faq__a { padding: 0 .25rem 1.35rem; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a[hidden] { display: none; }

/* ---------- Location ---------- */
.hours { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.hours li { display: flex; justify-content: space-between; gap: 2rem; max-width: 22rem; padding: .5rem 0; border-bottom: var(--hairline); }

/* ---------- Footer ----------
   Was four equal columns of underlined links, a sitemap dump. Now asymmetric:
   a substantial "visit us" block carrying real information, then a compact link
   run with no underlines and colour-separated headings (the Parsley pattern),
   then a single legal line. ---------------------------------------------- */
.site-footer { background: var(--c-ink); color: #C9D1D7; padding-block: var(--space-section) 8rem; }
.foot { display: grid; gap: 3rem; }
@media (min-width: 58rem) { .foot { grid-template-columns: minmax(0,.9fr) minmax(0,1.5fr); gap: 5rem; } }

.foot__visit h2 { color: var(--c-white); font-size: 1.5rem; margin-bottom: 1.1rem; }
.foot__addr { color: var(--c-white); font-size: 1.0625rem; margin-bottom: .35rem; max-width: none; }
.foot__meta { font-size: .9375rem; color: #98A3AB; margin-bottom: 1.1rem; max-width: none; }
.foot__hours { display: flex; justify-content: space-between; gap: 1.5rem; max-width: 19rem;
  font-size: 1rem; margin: 0; padding: .45rem 0; border-bottom: 1px solid #4A5158; }
.foot__tel { margin: 1.25rem 0 .2rem; }
.foot__tel a { font-family: var(--font-head); font-size: 1.5rem; color: var(--c-white); text-decoration: none; }
.foot__tel a:hover { text-decoration: underline; text-underline-offset: .2em; }
.foot__dir a { color: #9FD0E4; font-size: 1rem; text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); }
.foot__dir a:hover { text-decoration: underline; }
.foot__map { display: block; width: 100%; height: 15rem; margin-top: 1rem; border: 0; border-radius: var(--radius-lg); }

.foot__nav { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
.foot__nav h3 { color: var(--c-gold); font-size: 1rem; font-weight: 600; margin-bottom: .6rem; font-family: var(--font-body); }
.foot__nav ul { list-style: none; margin: 0; padding: 0; }
.foot__nav a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  color: #C9D1D7; font-size: 1rem; text-decoration: none; letter-spacing: -.01em;
}
.foot__nav a:hover { color: var(--c-white); text-decoration: underline; text-underline-offset: .25em; }

.footer-legal { margin-top: 3.5rem; padding-top: 1.75rem; border-top: 1px solid #4A5158; }
.footer-legal__disclaimer { font-size: .9375rem; color: #98A3AB; max-width: 84ch; }
.footer-legal__line { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; align-items: center; font-size: .9375rem; color: #98A3AB; max-width: none; margin: 0; }
.footer-legal__line a { color: #98A3AB; text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); }
.footer-legal__line a:hover { color: var(--c-white); text-decoration: underline; }

/* ---------- Sticky mobile action bar ---------- */
.action-bar {
  position: fixed; inset: auto 0 0 0; z-index: 100;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--c-paper); border-top: var(--hairline);
  box-shadow: 0 -4px 16px rgba(26,29,33,.1);
  padding-bottom: env(safe-area-inset-bottom);
}
.action-bar a {
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; padding: .5rem; text-decoration: none;
  font-size: 1rem; font-weight: 600; color: var(--c-ocean);
  border-right: var(--hairline);
}
.action-bar a:last-child { border-right: 0; background: var(--c-ocean); color: var(--c-white); }
@media (min-width: 62rem) { .action-bar { display: none; } .site-footer { padding-bottom: var(--space-section); } }

/* ---------- Small layout utilities (replacing inline styles) ---------- */
.mt-lg { margin-top: 2.5rem; }
.mt-md { margin-top: 1.75rem; }
.fs-1 { font-size: 1rem; }
.muted-on-dark { color: #C7CED4; }


/* ---------- Price table: her buried accordion, made scannable ---------- */
.ptable { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: 1rem; }
.ptable caption { text-align: left; font-size: 1rem; color: var(--c-ink-soft); padding-bottom: .75rem; }
.ptable th, .ptable td { text-align: left; padding: .9rem .9rem .9rem 0; border-bottom: var(--hairline); vertical-align: top; }
.ptable thead th {
  font-size: .9375rem; color: var(--c-ink-soft); font-weight: 600;
  border-bottom: 1px solid var(--c-ink); padding-bottom: .6rem;
}
.ptable tbody th { font-family: var(--font-head); font-size: 1.125rem; font-weight: 600; color: var(--c-ocean); white-space: nowrap; }
.ptable .price { font-family: var(--font-head); font-size: 1.25rem; font-weight: 600; color: var(--c-ink); white-space: nowrap; }
.ptable .who { color: var(--c-ink-soft); }
@media (max-width: 45rem) {
  .ptable, .ptable caption, .ptable tbody, .ptable tr, .ptable td, .ptable th { display: block; }
  .ptable caption { width: 100%; }
  .ptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ptable tr { border-bottom: var(--hairline); padding: 1rem 0; }
  .ptable th, .ptable td { border: 0; padding: .1rem 0; }
  .ptable .price { font-size: 1.375rem; }
}

/* ---------- Price list (IV menu) ---------- */
.plist { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2.5rem; }
@media (max-width: 45rem) { .plist { columns: 1; } }
.plist li {
  break-inside: avoid; display: flex; align-items: baseline; gap: .6rem;
  padding: .55rem 0; border-bottom: var(--hairline); max-width: none; font-size: 1rem;
}
.plist .dots { flex: 1; border-bottom: 1px dotted var(--c-rule); transform: translateY(-.25em); }
.plist .amt { font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums; }

/* ---------- Membership tiers ---------- */
.tiers { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  border: var(--hairline); border-radius: var(--radius-lg); overflow: hidden; background: var(--c-paper); }
.tier { padding: 1.75rem 1.5rem; border-right: var(--hairline); display: flex; flex-direction: column; gap: .6rem; }
.tier:last-child { border-right: 0; }
@media (max-width: 55rem) { .tier { border-right: 0; border-bottom: var(--hairline); } .tier:last-child { border-bottom: 0; } }
.tier h3 { margin: 0; font-size: 1.1875rem; }
.tier__price { font-family: var(--font-head); font-size: 1.75rem; font-weight: 600; color: var(--c-ink); line-height: 1.1; }
.tier__price small { display: block; font-family: var(--font-body); font-size: .9375rem; font-weight: 400; color: var(--c-ink-soft); margin-top: .2rem; }
.tier ul { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .45rem; font-size: 1rem; }
.tier ul li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .5rem; max-width: none; color: var(--c-ink-soft); }
.tier ul li::before { content: "\2713"; color: var(--c-botanical); font-weight: 700; }

/* ---------- Callout ---------- */
.callout {
  border: 1px solid #E0CFB0; background: var(--c-tint-sand); border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 0 0 1.5rem;
}
.callout p { margin: 0; max-width: 58ch; }
.callout p + p { margin-top: .5rem; }
.callout strong { color: var(--c-ocean); }

/* ---------- Therapy card actions: learn vs book ---------- */
.therapy__more { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; }
.tbook {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: .4rem 1.15rem; border-radius: var(--radius-sm);
  background: var(--c-ocean); color: var(--c-white);
  font-weight: 600; text-decoration: none; font-size: .9375rem; letter-spacing: -.01em;
}
.tbook:hover { background: #17506F; }

/* ---------- Figures ---------- */
.figure { margin: 0; }
.figure img { width: 100%; border-radius: var(--radius-lg); }

/* ---------- Condition icons ---------- */


/* ---------- Therapy media panel ----------
   Stands in for photography we do not have yet, but reads as a designed
   element rather than a hole: the icon does the identifying work. */
.tmedia {
  aspect-ratio: 16/10; border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
  background: linear-gradient(150deg, var(--c-tint-ocean) 0%, #E4EEF3 100%);
  border: var(--hairline); padding: 1.25rem; text-align: center;
}
.tmedia__ico { width: 3.5rem; height: 3.5rem; stroke-width: 1.3; color: var(--c-ocean); }
.tmedia__note { font-size: .8125rem; color: #5A6B75; margin: 0; max-width: 34ch; }
.tmedia--sauna, .tmedia--bhrt { background: linear-gradient(150deg, var(--c-tint-sand) 0%, #F2E7D6 100%); }
.tmedia--sauna .tmedia__ico, .tmedia--bhrt .tmedia__ico { color: var(--c-botanical); }
.tmedia--ozone, .tmedia--iv { background: linear-gradient(150deg, #EAF4EE 0%, #DDEDE3 100%); }
.tmedia--ozone .tmedia__ico, .tmedia--iv .tmedia__ico { color: var(--c-botanical); }

/* ---------- Portraits ---------- */
.portrait { width: 100%; max-width: 8.5rem; border-radius: 50%; }
.figure figcaption { font-size: .9375rem; color: var(--c-ink-soft); margin-top: .6rem; }

/* Photo treatment B: a single warm grade across the whole set, which fixes the
   mixed daylight and fluorescent white balance in her existing photographs. */
.figure img, .portrait, .hero__bg img, .index__media img {
  filter: saturate(.86) contrast(1.02) sepia(.10);
}
.index__media img { filter: saturate(.8) contrast(1) sepia(.10); }
.index__link:hover .index__media img,
.index__link:focus-visible .index__media img { filter: saturate(1) contrast(1.02) sepia(.04); }

/* ---------- Conditions mega panel ---------- */
.site-header { position: relative; }
.has-panel { position: static; }
.nav-panelbtn {
  display: inline-flex; align-items: center; gap: .4rem; min-height: var(--tap);
  padding: .5rem .45rem; font: inherit; font-size: 1rem; letter-spacing: -.01em;
  color: var(--c-ink); background: none; border: 0; cursor: pointer;
}
.nav-panelbtn:hover { color: var(--c-ocean); }
.nav-panelbtn__chev {
  width: .5rem; height: .5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px,-2px); transition: transform .25s ease;
}
.nav-panelbtn[aria-expanded="true"] .nav-panelbtn__chev { transform: rotate(-135deg) translate(-2px,-2px); }
.nav-panel { position: static; width: 100%; background: var(--c-paper); border-top: 1px solid var(--c-rule); }
.nav-panel[hidden] { display: none; }
.nav-panel__in { padding: 1.25rem 0 1.5rem; }
.nav-panel__lede { font-size: 1rem; color: var(--c-ink-soft); max-width: 58ch; margin: 0 0 1.25rem; }
.nav-panel__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(17rem,100%), 1fr)); }
.nav-panel__grid li { max-width: none; }
.nav-panel__grid a {
  display: grid; grid-template-columns: 2rem 1fr; gap: .85rem; align-items: center;
  padding: .85rem .7rem; text-decoration: none; color: inherit; border-radius: 2px;
  transition: background-color .2s ease;
}
.nav-panel__grid a:hover { background: var(--c-tint-sand); }
.nav-panel__grid .ico { color: var(--c-ocean); width: 1.7rem; height: 1.7rem; }
.nav-panel__grid b { font-family: var(--font-head); font-size: 1.0625rem; color: var(--c-ocean); display: block; }
.nav-panel__grid small { font-size: .9375rem; color: var(--c-ink-soft); }
.nav-panel__foot { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--c-rule); font-size: 1rem; }
@media (max-width: 62rem) {
  .nav-panel { border-top: 0; }
  .nav-panel__in { padding: .5rem 0 0; }
  .nav-panel__lede { display: none; }
  .nav-primary.is-open .has-panel { display: block; }
  /* Mobile stacks the nav in a column, so the expanded item needs to claim the
     full row itself for the in-flow panel beneath it to have somewhere to sit.
     This was previously unscoped and was still forcing itself at desktop
     widths too, squeezing the rest of the nav until it wrapped. */
  .nav-primary .has-panel.is-expanded { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .nav-panelbtn__chev, .nav-panel__grid a, .brandcard { transition: none; } }

/* ---------- Transition C: soft curve between bands ---------- */
.has-curve { position: relative; padding-bottom: calc(var(--space-section) + 2.5rem); }
.curve { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 70px; display: block; }
@media (max-width: 40rem) { .curve { height: 42px; } }

/* ---------- Transition D: offer card straddling the seam ---------- */
.offercard {
  position: relative; z-index: 3; margin: calc(-1 * clamp(3rem, 6vw, 5rem)) auto clamp(1rem, 3vw, 2rem);
  max-width: 58rem; background: var(--c-white); border: 1px solid #E0DAD0; border-radius: var(--radius-lg);
  box-shadow: 0 2px 4px rgba(26,29,33,.04), 0 18px 40px rgba(26,29,33,.11);
  display: grid; gap: 1.25rem 2.5rem; padding: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 52rem) { .offercard { grid-template-columns: 1fr auto; align-items: center; } }
.offercard__kicker { font-size: 1rem; color: var(--c-botanical); font-weight: 600; margin: 0 0 .3rem; }
.offercard__h { font-size: 1.5rem; margin: 0 0 .55rem; }
.offercard__body p { margin: 0; font-size: 1rem; color: var(--c-ink-soft); max-width: 54ch; }
.offercard__act { display: grid; gap: .5rem; justify-items: start; }
.offercard__alt { margin: 0; font-size: .9375rem; color: var(--c-ink-soft); }

/* ---------- Leaf mark, asset 2C ---------- */
.leafmark { width: 1.35rem; height: 1.35rem; fill: none; stroke: var(--c-wellness); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.action-bar a:first-child .leafmark { display: none; }
.footer-legal__line .leafmark { vertical-align: -.25em; margin-right: .4rem; }

/* ---------- Motion ----------
   A rise-and-fade on section intros, a stagger on grouped items, a rule draw on
   the section labels, and a wipe on figures. Each runs once on entry. Nothing
   autoplays or loops. Everything is off under reduced motion and every element
   is fully visible without JavaScript, so content never depends on it. */
@media (prefers-reduced-motion: no-preference) {
  .js-anim .m-rise { opacity: 0; transform: translateY(14px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
  .js-anim .m-rise.in { opacity: 1; transform: none; }

  .js-anim .m-stagger > * { opacity: 0; transform: translateY(12px);
    transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
  .js-anim .m-stagger.in > * { opacity: 1; transform: none; }
  .js-anim .m-stagger.in > *:nth-child(2) { transition-delay: .07s }
  .js-anim .m-stagger.in > *:nth-child(3) { transition-delay: .14s }
  .js-anim .m-stagger.in > *:nth-child(4) { transition-delay: .21s }
  .js-anim .m-stagger.in > *:nth-child(5) { transition-delay: .28s }
  .js-anim .m-stagger.in > *:nth-child(6) { transition-delay: .35s }


  .js-anim .m-wipe { position: relative; overflow: hidden; }
  .js-anim .m-wipe::after { content: ""; position: absolute; inset: 0; background: var(--c-paper);
    transform-origin: right; transition: transform 1s cubic-bezier(.76,0,.24,1); }
  .js-anim .m-wipe.in::after { transform: scaleX(0); }
  .js-anim .m-wipe img { transform: scale(1.06); transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }
  .js-anim .m-wipe.in img { transform: scale(1); }
}

/* The memberships band hands over to the offer card instead of a curve. */
#members-h { scroll-margin-top: 6rem; }
.section--sand:has(#members-h) { padding-bottom: var(--space-section); }

/* ---------- Therapy photograph ----------
   Replaces the icon panel now that real photographs exist. Same aspect so the
   grid does not shift, same warm grade as the rest of the set. */
.tphoto { margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/10; }
.tphoto img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.86) contrast(1.02) sepia(.10);
  transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.therapy:hover .tphoto img { transform: scale(1.04); }
.tphoto img[src*="th-sauna"] { object-position: 50% 42%; }
.tphoto img[src*="th-iv"]    { object-position: 50% 58%; }
.tphoto img[src*="th-hbot"]  { object-position: 50% 62%; }

.card__img { margin: .9rem 0 0; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 16/9; }
.card__img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.86) contrast(1.02) sepia(.10); }

@media (prefers-reduced-motion: reduce) { .tphoto img { transition: none; } .therapy:hover .tphoto img { transform: none; } }

/* ---------- Look inside ----------
   Click to play only. preload="none" means nothing downloads until asked, so
   the walkthrough costs a visitor nothing unless they want it. No autoplay,
   which the brief rules out. */
.lookin { margin: 2rem 0; }
.lookin h3 { margin-bottom: .3rem; }
.lookin p { font-size: 1rem; color: var(--c-ink-soft); margin-bottom: .9rem; }
.lookin video {
  width: 100%; max-width: 20rem; height: auto; display: block;
  border-radius: var(--radius-lg); border: 1px solid var(--c-rule); background: #000;
  /* fallback text only shows if playback fails; keep it readable on black */
  color: var(--c-white); font-size: 1rem; padding: 1rem;
}
.lookin video a { color: #BFE0EC; }

/* ---------- Interior page header ---------- */
.pagehead { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--c-rule); }
.pagehead h1 { max-width: 20ch; margin-bottom: .6rem; }
.pagehead .lead { font-size: var(--fs-lead); color: var(--c-ink-soft); max-width: 58ch; }
.pagehead .hero__actions { margin-top: 1.5rem; }

/* ---------- Cross links between siblings ---------- */
.crosslinks { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem,100%), 1fr)); }
.crosslinks li { max-width: none; }
.crosslinks a { display: grid; grid-template-columns: 1.8rem 1fr; gap: .8rem; align-items: center;
  min-height: var(--tap); padding: .7rem .6rem; text-decoration: none; color: var(--c-ocean);
  font-family: var(--font-head); font-size: 1.0625rem; border-radius: 2px; transition: background-color .2s ease; }
.crosslinks a:hover { background: var(--c-white); text-decoration: underline; text-underline-offset: .2em; }
.crosslinks .ico { color: var(--c-ocean); width: 1.6rem; height: 1.6rem; }

/* ---------- Modality note / disclaimer ---------- */
.modality-note { font-size: .9375rem; color: var(--c-ink-soft); border-left: 2px solid var(--c-rule);
  padding-left: .9rem; margin-top: 1.5rem; max-width: 62ch; }

.portrait--lg { max-width: 15rem; }
.measure > * { max-width: var(--measure); }

/* ---------- Signature statement ----------
   The page had no moment that felt like her rather than like any clinic. Her
   own tagline, set large on sand, with the leaf lifted out of her logo. */
.statement {
  background: var(--c-sand); padding-block: clamp(3rem, 7vw, 5.5rem);
  text-align: center; border-top: 1px solid #DCC9A6; border-bottom: 1px solid #DCC9A6;
}
.statement__leaf { width: 2.5rem; height: 2.5rem; fill: none; stroke: var(--c-botanical);
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 1.25rem; }
.statement__quote {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.375rem, 3.4vw, 2rem); line-height: 1.32; letter-spacing: -.015em;
  color: #4A3B22; max-width: 22ch; margin: 0 auto .9rem; text-wrap: balance;
}
.statement__attr {
  font-size: 1rem; color: #6B5A3E; margin: 0; max-width: none;
  display: inline-flex; align-items: center; gap: .7rem;
}
.statement__attr::before, .statement__attr::after {
  content: ""; width: 1.75rem; height: 1px; background: var(--c-orange);
}

/* ---------- Full bleed photograph ---------- */
.bleedband { margin: 0; position: relative; }
.bleedband img {
  width: 100%; height: clamp(16rem, 42vw, 30rem); object-fit: cover; object-position: 50% 62%;
  display: block; filter: saturate(.86) contrast(1.02) sepia(.10);
}
.bleedband figcaption {
  position: absolute; inset: auto 0 0 0; padding: 4rem 0 1.25rem;
  background: linear-gradient(to top, rgba(10,38,54,.82), transparent);
  color: #F0F4F6; font-size: .9375rem;
}
.bleedband figcaption .wrap { display: block; max-width: var(--w-page); }

/* Secondary therapy list under the featured six */

/* ==========================================================================
   HOMEPAGE — concern-led rebuild, September 2026
   The page opens on the clinic rather than on equipment, moves through what
   the visitor is feeling, then how care works, then what is offered, and only
   then introduces the doctors. White ground, ocean for action, aqua for the
   quiet bands, sand and orange as small warm accents.
   ========================================================================== */

.section--soft { background: var(--c-tint-aqua); }
.tiny-label {
  display: block; font-size: var(--fs-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--c-ink-soft); margin-bottom: .3rem;
}
.text-link {
  display: inline-block; font-weight: 600; font-size: 1rem; color: var(--c-ocean);
  padding-block: .45rem; text-underline-offset: .25em;
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 1.5rem 0 1rem; }
.fine { font-size: .9375rem; color: var(--c-ink-soft); margin: 0; }
.section-intro {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1rem 2.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.section-intro h2 { margin: 0; max-width: 20ch; }
.section-intro p:not(.eyebrow) { margin: .75rem 0 0; color: var(--c-ink-soft); max-width: 52ch; }

/* --- Welcome ------------------------------------------------------------- */
.welcome { position: relative; background: var(--c-tint-aqua); overflow: hidden; }
.welcome__photo { position: absolute; inset: 0 0 0 auto; width: 44%; }
.welcome__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.welcome__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--c-tint-aqua) 0%, rgba(243,249,251,.55) 28%, rgba(243,249,251,0) 62%);
}

.welcome__wrap { position: relative; z-index: 1; padding-block: clamp(2.5rem, 6vw, 5rem); }
.welcome__copy { max-width: 34rem; }
.welcome h1 { font-size: clamp(2.125rem, 5vw, 3.25rem); margin: 0 0 1rem; text-wrap: balance; }
.welcome__lead { font-size: 1.1875rem; max-width: 40ch; margin-bottom: .75rem; }
.welcome__small { font-size: 1rem; color: var(--c-ink-soft); max-width: 42ch; }
.photo-label {
  position: absolute; right: var(--gutter); bottom: 1.25rem; z-index: 2;
  background: rgba(255,255,255,.92); border: 1px solid #C6DCE7; border-radius: var(--radius-lg);
  padding: .5rem .9rem; font-size: .875rem; color: var(--c-ink-soft); display: none;
}
@media (min-width: 60rem) { .photo-label { display: block; } }

/* Mobile: show the photograph as a band rather than hiding it entirely */
.welcome__photo--mobile { display: block; position: static; width: 100%; height: 14rem; }
@media (min-width: 60rem) { .welcome__photo--mobile { display: none; } }

/* --- Reassurance strip --------------------------------------------------- */
.reassurance { background: var(--c-white); border-bottom: 1px solid #D9DEE2; }
.reassurance .wrap {
  display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; justify-content: center;
  padding-block: .9rem; font-size: .9375rem; color: var(--c-ink-soft); text-align: center;
}

/* --- Concerns ------------------------------------------------------------ */
.concern-grid { display: grid; gap: .75rem; }
@media (min-width: 40rem) { .concern-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .concern-grid { grid-template-columns: repeat(3, 1fr); } }
.concern {
  display: block; background: var(--c-white); border: 1px solid #DDE6EA;
  border-radius: var(--radius-lg); padding: 1.4rem 1.35rem 1.5rem;
  text-decoration: none; color: var(--c-ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.concern:hover { border-color: var(--c-ocean); box-shadow: 0 6px 20px -12px rgba(26,29,33,.4); }
.concern-mark {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; margin-bottom: .9rem; border-radius: 50%;
  background: var(--c-tint-aqua); color: var(--c-botanical);
}
.concern-mark .ico { width: 1.35rem; height: 1.35rem; }
.concern b { display: block; font-family: var(--font-head); font-size: 1.0625rem; margin-bottom: .35rem; }
.concern span:not(.concern-mark) { display: block; font-size: .9375rem; color: var(--c-ink-soft); }
.concern em { display: block; margin-top: .8rem; font-style: normal; font-weight: 600; color: var(--c-ocean); font-size: .9375rem; }
.section-foot { margin-top: 1.5rem; font-size: 1rem; color: var(--c-ink-soft); max-width: 62ch; }

/* --- Approach ------------------------------------------------------------ */
.approach-band { background: var(--c-tint-aqua); }
.approach-layout { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: center; }
@media (min-width: 56rem) { .approach-layout { grid-template-columns: .9fr 1.1fr; } }
.approach-photo { margin: 0; }
.approach-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); }
.approach-photo figcaption { margin-top: .6rem; font-size: .9375rem; color: var(--c-ink-soft); }
.care-steps { list-style: none; margin: 1.5rem 0 0; padding: 0; counter-reset: care; }
.care-steps li { position: relative; padding-left: 3rem; margin-bottom: 1.5rem; max-width: 46ch; counter-increment: care; }
.care-steps li::before {
  content: counter(care); position: absolute; left: 0; top: 0;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1.5px solid var(--c-aqua); color: var(--c-ocean); background: var(--c-white);
  font-family: var(--font-head); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.care-steps b { display: block; font-family: var(--font-head); font-size: 1.0625rem; margin-bottom: .25rem; }
.care-steps span { font-size: .9375rem; color: var(--c-ink-soft); }

/* --- Therapies ----------------------------------------------------------- */
.therapy-grid { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .therapy-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .therapy-grid { grid-template-columns: repeat(4, 1fr); } }
.therapy-tile { display: block; text-decoration: none; color: var(--c-ink); }
.therapy-tile img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius-lg); margin-bottom: .75rem;
  transition: transform .4s cubic-bezier(.2,.6,.2,1);
}
.therapy-tile:hover img { transform: scale(1.03); }
.therapy-tile b { display: block; font-family: var(--font-head); font-size: 1.0625rem; margin-bottom: .25rem; }
.therapy-tile p { font-size: .9375rem; color: var(--c-ink-soft); margin: 0; }
.more-care {
  margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid #DDE6EA;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem;
  font-size: 1rem; color: var(--c-ink-soft);
}
.more-care a { font-weight: 600; }

/* --- People -------------------------------------------------------------- */
.people-band { background: var(--c-tint-sand); }
.people-layout { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: center; }
@media (min-width: 56rem) { .people-layout { grid-template-columns: 1fr 1fr; } }
.people-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.people-pair figure { margin: 0; }
.people-pair img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: top center;
  border-radius: var(--radius-lg); background: var(--c-white);
}
.people-pair figcaption { margin-top: .6rem; }
.people-pair b { display: block; font-family: var(--font-head); font-size: 1.0625rem; }
.people-pair span { font-size: .875rem; color: var(--c-ink-soft); }

/* --- Getting started ----------------------------------------------------- */
.getting-started { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (min-width: 56rem) { .getting-started { grid-template-columns: 1.1fr .9fr; } }
.getting-started h2 { margin: 0 0 .75rem; }
.first-visit {
  background: var(--c-tint-aqua); border: 1px solid #CFE2E9;
  border-radius: var(--radius-lg); padding: 1.75rem 1.6rem;
}
.first-visit h3 { margin: 0 0 1rem; font-size: 1.1875rem; }
.first-visit dl { margin: 0 0 1.25rem; }
.first-visit dl > div {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem;
  padding: .7rem 0; border-bottom: 1px solid #CFE2E9;
}
.first-visit dt { font-size: .9375rem; color: var(--c-ink-soft); }
.first-visit dd { margin: 0; font-weight: 600; font-size: .9375rem; }
.first-visit .text-link { display: block; }

/* --- Resources ----------------------------------------------------------- */
.resources-band { background: var(--c-white); border-top: 1px solid #D9DEE2; }
.resource-teaser { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
@media (min-width: 52rem) { .resource-teaser { grid-template-columns: 1.1fr .9fr; } }
.booklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.booklist li {
  background: var(--c-tint-sand); border: 1px solid #E0CFB0;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding: .7rem .95rem; max-width: none;
}
.booklist__item--covered { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8rem, 42%); grid-template-rows: auto auto 1fr; column-gap: .75rem; align-items: center; min-height: 6.75rem; }
.booklist__cover { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 100%; height: auto; max-height: 10rem; object-fit: contain; object-position: right center; }
.booklist__item--covered > :not(.booklist__cover) { grid-column: 1; }
.booklist b { display: block; font-family: var(--font-head); font-size: 1rem; }
.booklist span { font-size: .875rem; color: var(--c-ink-soft); }

/* --- Service page detail blocks ------------------------------------------ */
.svcfacts { margin: 0 0 1.5rem; }
.svcfacts dt { font-weight: 600; margin-top: 1rem; }
.svcfacts dt:first-child { margin-top: 0; }
.svcfacts dd { margin: .25rem 0 0; color: var(--c-ink-soft); font-size: 1rem; }
.faq--compact .faq__item { border-bottom: 1px solid #DDE6EA; padding-bottom: 1rem; margin-bottom: 1rem; }
.faq--compact .faq__q { font-size: 1.0625rem; margin: 0 0 .4rem; }
.faq--compact .faq__a p { font-size: .9375rem; color: var(--c-ink-soft); margin: 0; }

/* --- Draft notes --------------------------------------------------------- */
.draftnote {
  margin: 1.25rem 0 0; padding: .9rem 1.1rem;
  background: var(--c-tint-sand); border: 1px solid #E0CFB0;
  border-radius: var(--radius-lg); font-size: .9375rem; color: #5A4520; max-width: 62ch;
}
.draftnote b { color: #3F2F14; }
.draftnote a { color: #7A3E12; }
.form__note--preview { color: var(--c-botanical); font-weight: 600; }
.offercard--flat { position: static; margin: 0 0 2rem; max-width: none; box-shadow: none; padding: 1.75rem 1.6rem; }
.tier__comp { font-size: .875rem; color: var(--c-ink-soft); margin: .6rem 0 0; }
.card { border-radius: var(--radius-lg); }

@media (prefers-reduced-motion: reduce) {
  .therapy-tile img, .concern { transition: none; }
  .therapy-tile:hover img { transform: none; }
}

/* Resources page */
.linkstack { list-style: none; margin: 0; padding: 0; border-top: 1px solid #DDE6EA; }
.linkstack li { max-width: none; border-bottom: 1px solid #DDE6EA; }
.linkstack a { display: block; padding: .8rem .25rem; min-height: var(--tap); text-decoration: none; color: var(--c-ink); font-size: 1rem; }
.linkstack a::after { content: " \2192"; color: var(--c-orange); }
.linkstack a:hover { color: var(--c-ocean); text-decoration: underline; text-underline-offset: .2em; }
.booklist--full { grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 46rem) { .booklist--full { grid-template-columns: 1fr 1fr; } }
.booklist--full li { padding: 1.1rem 1.25rem; }
.booklist--full p { font-size: .9375rem; color: var(--c-ink-soft); margin: .5rem 0 0; }
.concerns { }