/* London Natural Therapies, site stylesheet.
   Scheme modelled on biograph.com: solid dark header, full height dark hero, white sections with
   centred headings and rounded image grids, dark feature bands, white footer. Brand accent: sage green. */

:root {
  --charcoal: #0f1412;
  --graphite: #1a211d;
  --graphite-2: #232c27;
  --white: #ffffff;
  --off: #f6f7f6;
  --off-2: #eef1ef;
  --line: #e3e7e4;
  --line-dark: rgba(255,255,255,.14);
  --ink: #141917;
  --ink-2: #5f6964;
  --ink-3: #6b746f;
  --sage: #5ba066;
  --sage-2: #7bbb86;
  --sage-3: #d6e9da;
  --deep: #045e34;
  --on-dark: rgba(255,255,255,.94);
  --on-dark-2: rgba(255,255,255,.68);
  --error: #e08a8a;
  --error-2: #f2b8b5;
  --night: #070b09;
  --whatsapp: #25d366;
  --whatsapp-2: #2ee377;
  --whatsapp-ink: #05270f;
  --display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --quote: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* One type scale for the whole site. Hero banners and display numerals are the only exceptions. */
  --fs-h1: clamp(2.5rem, 5.2vw, 4.25rem);
  --fs-h2: clamp(1.9rem, 3.4vw, 2.9rem);
  --fs-h3: 1.25rem;
  --fs-h4: 1.05rem;
  --fs-lead: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.78rem;
  --fs-ui: 0.9rem;
  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --r: 14px;
  --r-sm: 8px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow: 0 18px 50px rgba(15,20,18,.18);
  --header-h: 88px;
  --header-pad: 14px;
  --header-full: calc(var(--header-h) + var(--header-pad));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p a, .post-body a, dd a, .refs a, .acc-body a, .disclaimer a, .cookie-banner a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(4,94,52,.45); }
p a:hover, .post-body a:hover { text-decoration-color: currentColor; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
address { font-style: normal; }
ul, ol { padding-left: 1.2em; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap.narrow { width: min(760px, 100% - 2 * var(--gutter)); }
.center { text-align: center; }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-small); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--deep); outline-offset: 3px; }

/* Type */
h1, h2, h3, .h3 { font-family: var(--display); font-weight: 400; letter-spacing: -.025em; line-height: 1; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: 1.02; }
h3, .h3 { font-size: var(--fs-h3); letter-spacing: -.01em; line-height: 1.2; font-weight: 500; }
p { margin: 0 0 1.1em; }
/* A lead is the same size, weight, leading and colour as any other paragraph; only heroes differ. */
.lead { font-size: var(--fs-body); line-height: 1.6; color: inherit; }
.hero .lead { font-size: var(--fs-lead); }
strong { font-weight: 600; }
.section-head-c { text-align: center; margin: 0 0 48px; }
.section-head-c .lead { margin: 0 0 24px; }
.section-head-c .btn { margin-top: 4px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .8em 1.4em; border-radius: 999px; font-weight: 600; font-size: var(--fs-ui); line-height: 1; border: 1px solid transparent; transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease); white-space: nowrap; }
.btn-lg { padding: 1em 1.8em; font-size: var(--fs-body); }
.btn-dark { background: var(--charcoal); color: var(--white); }
.btn-dark:hover { background: var(--deep); }
.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { background: var(--sage-2); }
.btn-solid { background: var(--sage); color: var(--ink); }
.btn-solid:hover { background: var(--sage-2); transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: rgba(20,25,23,.25); color: inherit; }
.btn-ghost:hover { border-color: var(--ink); }
.on-dark .btn-ghost, .hero .btn-ghost, .booking .btn-ghost { border-color: rgba(255,255,255,.35); color: var(--white); }
.on-dark .btn-ghost:hover, .hero .btn-ghost:hover { border-color: var(--white); }
.link-arrow { display: inline-flex; align-items: center; gap: .35em; font-weight: 600; color: var(--deep); font-size: var(--fs-ui); }
.link-arrow::after { content: "\2192"; transition: transform .25s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }
.on-dark .link-arrow, .booking .link-arrow { color: var(--sage-2); }

/* Header */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; padding-top: var(--header-pad); background: transparent; color: var(--on-dark); transition: background .4s var(--ease), backdrop-filter .4s var(--ease); view-transition-name: site-header; }
.site-header::before { content: ""; position: absolute; inset: 0 0 -64px 0; background: linear-gradient(to bottom, rgba(0,0,0,.88) 0%, rgba(0,0,0,.66) 42%, rgba(0,0,0,.30) 72%, rgba(0,0,0,0) 100%); pointer-events: none; opacity: 1; transition: opacity .35s var(--ease); z-index: -1; }
/* hairline under the menu, biograph.com: 1px of white at 15% across the full width */
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255,255,255,.15); pointer-events: none; }
.site-header.scrolled, body.no-hero .site-header { background: rgba(15,20,18,.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.site-header.scrolled::before, body.no-hero .site-header::before { opacity: 0; }

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; padding: 14px 0; flex: none; }
.brand img { width: 124px; height: auto; filter: invert(1) brightness(1.3); }
.primary-nav > ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.primary-nav > ul > li > a { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 8px; font-weight: 600; font-size: var(--fs-ui); color: var(--on-dark); transition: background .2s var(--ease), color .2s var(--ease); }
.primary-nav .caret { flex: none; opacity: .7; transition: transform .25s var(--ease), opacity .2s var(--ease); }
.has-mega:hover > a .caret, .has-mega:focus-within > a .caret, .has-mega.open > a .caret { transform: rotate(180deg); opacity: 1; }
.primary-nav > ul > li > a:hover, .primary-nav > ul > li:hover > a, .primary-nav li.open > a { background: rgba(255,255,255,.12); color: var(--white); }
.primary-nav li.current > a { background: rgba(255,255,255,.08); }
.header-phone { border-radius: 8px; transition: background .2s var(--ease); }
.header-phone:hover { background: rgba(255,255,255,.12); color: var(--white); }
.header-actions { display: flex; align-items: center; gap: 6px; }
.header-phone { font-weight: 600; font-size: var(--fs-ui); padding: 10px 12px; color: var(--on-dark); }
.header-phone:hover { color: var(--sage-2); }
.header-cta { background: var(--charcoal); color: var(--white); border-color: rgba(255,255,255,.28); padding: .7em 1.2em; font-size: var(--fs-ui); }
.header-cta:hover { background: var(--deep); border-color: var(--deep); color: var(--white); }
.icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--on-dark); transition: background .2s; }
.icon-btn:hover { background: rgba(255,255,255,.1); }
.menu-toggle { display: none; flex-direction: column; gap: 5px; }
.menu-toggle span { display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease), opacity .3s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mega menu */
.has-mega { position: static; }
/* There is about 24px of header between the bottom of the nav link and the top of the panel.
   This invisible strip covers it, so moving the pointer down to the panel never counts as
   leaving the menu. */
.has-mega > a { position: relative; }
.has-mega > a::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; }
/* Opening is immediate; closing waits a third of a second, so a slightly wandering pointer
   does not lose the panel on the way to it. */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: rgba(15,20,18,.98); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--on-dark); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s var(--ease) .35s, transform .22s var(--ease) .35s, visibility .22s .35s; box-shadow: 0 28px 60px rgba(5,8,7,.45); }
.has-mega:hover .mega, .has-mega:focus-within .mega, .has-mega.open .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega-inner { display: grid; grid-template-columns: repeat(4, 1fr) 1.2fr; gap: 32px; padding: 32px 0 36px; }
.mega-col h3 { font-family: var(--sans); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sage); margin-bottom: 12px; }
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col li a { display: block; padding: 6px 0; color: var(--on-dark-2); font-size: var(--fs-ui); font-weight: 500; transition: color .2s; }
.mega-col li a:hover { color: var(--sage-2); }
.mega-cta { border-left: 1px solid var(--line-dark); padding-left: 32px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.mega-cta p { color: var(--on-dark-2); margin: 0; font-size: var(--fs-body); }
.mega-cta .btn-dark { background: var(--sage); color: var(--ink); }
.mega-cta .btn-dark:hover { background: var(--sage-2); }
.mega-cta .link-arrow { color: var(--sage-2); }

/* Search: full screen, dark, box in the middle */
.search-panel { position: fixed; inset: 0; z-index: 120; background: rgba(12,17,15,.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--on-dark); display: grid; place-items: center; padding: calc(var(--header-full) + 24px) var(--gutter) 40px; overflow-y: auto; animation: searchIn .28s var(--ease) both; }
.search-panel[hidden] { display: none; }
@keyframes searchIn { from { opacity: 0; } to { opacity: 1; } }
.search-inner { width: min(760px, 100%); animation: searchBox .38s var(--ease) both; }
@keyframes searchBox { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.search-close { position: absolute; top: calc(var(--header-pad) + var(--header-h) / 2 - 20px); right: var(--gutter); width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--on-dark); background: rgba(255,255,255,.08); transition: background .2s; }
.search-close:hover { background: rgba(255,255,255,.18); }
.search-panel form, .search-form { display: flex; gap: 14px; align-items: flex-end; }
.search-panel input { flex: 1; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.28); color: var(--white); padding: 16px 4px; border-radius: 0; font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2.1rem); letter-spacing: -.02em; }
.search-panel input::placeholder { color: rgba(255,255,255,.4); }
.search-panel input::-webkit-search-cancel-button, .search-panel input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-panel form .btn { flex: none; align-self: center; }
.search-panel input:focus { outline: 0; border-bottom-color: var(--sage); }
.search-form input { flex: 1; background: var(--off); border: 1px solid var(--line); color: var(--ink); padding: 13px 18px; border-radius: 999px; font: inherit; }
.search-results { margin-top: 20px; max-height: 52vh; overflow-y: auto; }
.search-results a { display: block; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.search-results a strong { display: block; font-weight: 600; color: var(--white); }
.search-results a span { color: var(--on-dark-2); font-size: var(--fs-small); }
.search-results a:hover strong { color: var(--sage-2); }
.search-results .none { color: var(--on-dark-2); }
body.search-open { overflow: hidden; }

/* Mobile nav: the four treatment groups fold open one at a time, the main pages sit below */
.mobile-nav { position: fixed; inset: var(--header-full) 0 0 0; z-index: 99; background: var(--charcoal); color: var(--on-dark); overflow-y: auto; padding: 8px var(--gutter) 120px; }
.mobile-nav-inner { display: flex; flex-direction: column; gap: 22px; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-main > li { border-bottom: 1px solid rgba(255,255,255,.1); }
.mobile-main > li > a, .mobile-acc-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 0; font-family: var(--display); font-size: 1.25rem; font-weight: 400; letter-spacing: -.01em; color: var(--white); text-align: left; }
.mobile-acc-btn .caret { flex: none; opacity: .6; transition: transform .3s var(--ease), opacity .2s; }
.mobile-acc.open .mobile-acc-btn .caret { transform: rotate(180deg); opacity: 1; }
.mobile-acc.open .mobile-acc-btn { color: var(--sage-2); }
.mobile-sub { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .32s var(--ease), visibility 0s linear .32s; }
.mobile-acc.open .mobile-sub { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .32s var(--ease), visibility 0s; }
.mobile-sub > ul { overflow: hidden; min-height: 0; padding-left: 14px; border-left: 1px solid rgba(91,160,102,.45); margin-left: 2px; }
.mobile-sub li:first-child { padding-top: 2px; }
.mobile-sub li:last-child { padding-bottom: 14px; }
.mobile-sub li a { display: block; padding: 8px 0; color: var(--on-dark-2); font-size: var(--fs-body); }
.mobile-sub li a:hover { color: var(--white); }
.mobile-cta { align-self: flex-start; border-color: rgba(255,255,255,.28); padding: .9em 1.6em; }
.mobile-cta:hover { border-color: var(--deep); }
.mobile-contact { color: var(--on-dark-2); margin: 0; }

/* Hero */
.hero { position: relative; display: flex; align-items: flex-end; min-height: 68vh; padding: calc(var(--header-full) + 80px) 0 48px; overflow: hidden; isolation: isolate; color: var(--on-dark); }
.hero-home { min-height: 100svh; padding-bottom: 56px; }
.hero-service { min-height: 72vh; }
.hero-page { min-height: 52vh; }
.hero-media { position: absolute; inset: 0; z-index: -1; background: var(--charcoal); }
.hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--charcoal); opacity: 1; pointer-events: none; transition: opacity .7s var(--ease); }
.hero-media.is-loaded::before { opacity: 0; }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.05); animation: heroZoom 12s var(--ease) forwards; }
@keyframes heroZoom { to { transform: scale(1); } }
/* Hero slides: a slow breathing crossfade, the copy over the top never moves */
[data-hero-slides] .hero-img { position: absolute; inset: 0; opacity: 0; transform: scale(1.08); transition: opacity 1.6s var(--ease), transform 8s var(--ease); animation: none; will-change: opacity, transform; }
[data-hero-slides] .hero-img.is-active { opacity: 1; transform: scale(1); }
.hero-foot { position: relative; z-index: 2; flex: 0 0 auto; width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.hero-dots { display: flex; gap: 8px; margin-bottom: 14px; }
.hero-dots button { display: flex; align-items: center; width: 34px; height: 34px; padding: 0 4px; transition: width .3s var(--ease); }
.hero-dots button::before { content: ""; display: block; width: 100%; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); transition: background .3s var(--ease); }
.hero-dots button:hover::before { background: rgba(255,255,255,.6); }
.hero-dots button.is-active { width: 50px; }
.hero-dots button.is-active::before { background: var(--sage-2); }
html.intro .hero-dots { animation: introFade 1s var(--ease) 2.4s both; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,20,18,.92) 0%, rgba(15,20,18,.45) 40%, rgba(15,20,18,.15) 100%); }
.hero-content { position: relative; width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 720px) auto; gap: 24px 48px; align-items: end; }
.hero h1 { margin-bottom: .3em; color: var(--white); }
.hero-home h1 { font-size: clamp(2.7rem, 5.6vw, 4.6rem); }
.hero-home h1 .line { display: block; }
.hero .lead { color: var(--on-dark-2); margin-bottom: 0; }

/* Home hero, centred in the manner of cliniquelaprairie.com with the aside kept bottom right */
.hero-home { flex-direction: column; align-items: stretch; padding-bottom: 30px; }
.hero-home .hero-content { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; text-align: center; position: static; }
.hero-home .hero-main { max-width: 900px; margin-inline: auto; }
.hero-home .hero .lead, .hero-home .lead { max-width: 860px; margin-inline: auto; }
.hero-home .hero-actions { justify-content: center; }
.hero-home .hero-aside { position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%); width: min(var(--wrap), 100% - 2 * var(--gutter)); text-align: right; padding-bottom: 0; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.hero-actions.center { justify-content: center; }
.hero-price { font-family: var(--display); font-size: var(--fs-lead); color: var(--sage-2); padding-left: 6px; letter-spacing: -.01em; }
.hero-aside { text-align: right; font-size: var(--fs-small); color: var(--on-dark-2); padding-bottom: 6px; }
/* Proof points in a row along the foot of the hero, in the manner of fountainlife.com */
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.2); }
.hero-stat { display: flex; align-items: center; gap: 14px; padding: 18px 28px 18px 0; border-right: 1px solid rgba(255,255,255,.14); transition: opacity .25s var(--ease); }
.hero-stat:last-child { border-right: 0; padding-right: 84px; }  /* clear of the WhatsApp bubble */
.hero-stat:not(:first-child) { padding-left: 28px; }
.hero-stat:hover { opacity: .72; }
.hero-stat-value { font-family: var(--display); font-size: 1.9rem; line-height: 1; letter-spacing: -.02em; color: var(--white); flex: none; }
.hero-stat-label { font-size: var(--fs-small); line-height: 1.4; color: var(--on-dark-2); }
html.intro .hero-stats { animation: introFade 1s var(--ease) 4.2s both; }
.hero-aside strong { display: block; color: var(--white); font-size: var(--fs-body); }
.crumbs { margin-bottom: 18px; font-size: var(--fs-small); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; color: var(--on-dark-2); }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.crumbs a:hover { color: var(--sage-2); }
.crumbs.dark ol { color: var(--ink-3); }
.hero-main > * { opacity: 0; transform: translateY(16px); animation: rise .8s var(--ease) forwards; }
.hero-main > *:nth-child(2) { animation-delay: .08s; }
.hero-main > *:nth-child(3) { animation-delay: .16s; }
.hero-main > *:nth-child(4) { animation-delay: .24s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Sections */
.section { padding: clamp(64px, 8vw, 112px) 0; }
.section-tall { padding-top: calc(var(--header-full) + clamp(56px, 8vw, 96px)); }
.section-off { background: var(--off); }
.on-dark { background: var(--charcoal); color: var(--on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--white); }
.on-dark .lead, .on-dark .muted { color: var(--on-dark-2); }
.section-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; margin-bottom: 40px; }
.section-head.row { grid-template-columns: 1fr auto; align-items: baseline; }
.section-head h2 { margin-bottom: .25em; }
.section-media img { border-radius: var(--r); max-height: 380px; object-fit: cover; width: 100%; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); }

/* Image grid with numbered captions (Biograph "how it works") */

.method { display: flex; flex-direction: column; }



.method h3 { font-size: var(--fs-h3); font-weight: 600; margin-bottom: .3em; font-family: var(--sans); letter-spacing: 0; }
.method h3 span { color: var(--ink-3); margin-right: 8px; }
.method p { color: var(--ink-2); font-size: var(--fs-body); margin: 0; }

/* Big quote */
.quote-section { text-align: center; }
.quote-track { position: relative; min-height: 260px; }
.big-quote { margin: 0 auto; max-width: 900px; opacity: 0; position: absolute; inset: 0; transition: opacity .25s var(--ease); pointer-events: none; }
.big-quote.is-active { opacity: 1; position: relative; pointer-events: auto; transition-duration: .55s; transition-delay: .2s; }
.big-quote blockquote { margin: 0 0 24px; font-family: var(--quote); font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -.01em; }
.big-quote blockquote p { margin: 0; }
.big-quote figcaption { font-size: var(--fs-small); }
.big-quote figcaption strong { display: block; font-weight: 600; }
.big-quote figcaption span { color: var(--ink-2); }
.dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.dots button { width: 22px; height: 3px; border-radius: 2px; background: var(--line); transition: background .2s, width .2s; }
.dots button.is-active { background: var(--ink); width: 34px; }

/* Stat cards */

.stat-card { display: flex; flex-direction: column; justify-content: space-between; gap: 72px; padding: 32px 30px; background: var(--white); border-right: 1px solid var(--line); transition: background .3s; }
.stat-card:last-child { border-right: 0; }
.stat-card:hover { background: var(--off); }
.stat-card .big { font-family: var(--display); font-size: clamp(3rem, 5.4vw, 4.6rem); line-height: .95; letter-spacing: -.035em; }
.stat-card .big sup { font-size: .35em; vertical-align: top; top: .35em; position: relative; margin-left: 2px; color: var(--ink-2); }
.stat-card p { margin: 0; font-size: var(--fs-body); color: var(--ink-2); }
.stat-cta { text-align: center; margin-top: 32px; }

/* Dark band: pillars */
.pillars { overflow: hidden; }
.pillar-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pillar { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; min-height: 260px; padding: 28px; border: 1px solid var(--line-dark); border-radius: var(--r); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); position: relative; transition: border-color .3s, transform .3s var(--ease); }
.pillar:hover { border-color: rgba(91,160,102,.5); transform: translateY(-3px); }
/* min-height on the heading keeps every card's copy on the same line, whatever the title wraps to */
.pillar h3 { color: var(--white); font-size: var(--fs-h3); font-weight: 600; font-family: var(--sans); letter-spacing: 0; margin-bottom: .5em; min-height: 2.4em; }
.pillar p { color: var(--on-dark-2); font-size: var(--fs-body); margin: 0 0 18px; }
.pillar .link-arrow { margin-top: auto; }

/* Treatment rows grid (Biograph "our tests") */


/* Full bleed image band */
.band { position: relative; color: var(--on-dark); isolation: isolate; overflow: hidden; }
.band-media { position: absolute; inset: 0; z-index: -1; background: var(--charcoal); }
.band-media img { width: 100%; height: 100%; object-fit: cover; }
.band-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,20,18,.62), rgba(15,20,18,.92)); }
.band-inner { padding: clamp(160px, 22vw, 300px) 0 clamp(56px, 6vw, 88px); text-align: center; }
.band h2 { color: var(--white); }
.band .lead { color: var(--on-dark-2); margin: 0 auto 28px; }

.band-card { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; display: block; }
.band-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.band-card:hover img { transform: scale(1.04); }
.band-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; background: linear-gradient(to top, rgba(15,20,18,.85), rgba(15,20,18,0)); }
.band-card figcaption strong { display: block; color: var(--white); }
.band-card figcaption span { color: var(--on-dark-2); font-size: var(--fs-small); }
.band-cta .band-inner { padding: clamp(64px, 7vw, 96px) 0; }
.band-cta h2 { font-size: var(--fs-h2); }
.band-cta .lead { max-width: 640px; }

/* Cards (services, posts, products) */
.card-grid { display: grid; gap: 18px; }

.cols-3 { grid-template-columns: repeat(3, 1fr); }

.card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--off-2); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .card-media img { transform: scale(1.04); }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 18px; }
.card-body h3 { font-size: var(--fs-h3); margin-bottom: .35em; }
.card-body p { color: var(--ink-2); font-size: var(--fs-body); margin: 0 0 16px; }
.card-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.card .price { font-weight: 600; color: var(--deep); }
.card .arrow { color: var(--deep); transition: transform .3s var(--ease); }
.card:hover .arrow { transform: translateX(4px); }
.addon-card { justify-content: flex-end; background: var(--sage-3); border-color: transparent; }
.post-card .card-body p { -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

/* Hub filter */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.chip { padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-ui); font-weight: 600; transition: background .2s, border-color .2s, color .2s; }
.chip:hover { border-color: var(--ink); }
.chip.is-active { background: var(--charcoal); color: var(--white); border-color: var(--charcoal); }
.hub-group { margin-bottom: 64px; }
.hub-group[hidden] { display: none; }
.hub-group .section-head { margin-bottom: 24px; }

/* Service page blocks */
.intro-section .grid-2 { grid-template-columns: 1.1fr .9fr; }
.stats { display: grid; gap: 12px; align-self: start; }
.stat { display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.stat-value { font-family: var(--display); font-size: 2.2rem; line-height: 1; letter-spacing: -.03em; }
.stat-label { color: var(--ink-2); font-size: var(--fs-small); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.steps.steps-3 { grid-template-columns: repeat(3, 1fr); }
.steps li { padding: 22px 22px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.step-num { font-family: var(--display); font-size: var(--fs-small); font-weight: 600; color: var(--deep); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sage-3); margin-bottom: 16px; }
.steps h3 { font-size: var(--fs-h3); font-weight: 600; margin-bottom: .35em; font-family: var(--sans); letter-spacing: 0; }
.steps p { margin: 0; color: var(--ink-2); font-size: var(--fs-body); }
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.benefit-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.benefit { padding: 26px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); transition: border-color .3s, transform .3s var(--ease); }
.benefit:hover { border-color: var(--sage); transform: translateY(-3px); }
.benefit h3 { font-size: var(--fs-h3); font-weight: 600; margin-bottom: .4em; font-family: var(--sans); letter-spacing: 0; }
.benefit p { margin: 0; color: var(--ink-2); font-size: var(--fs-body); }
.on-dark .benefit { background: rgba(255,255,255,.04); border-color: var(--line-dark); }
.on-dark .benefit p { color: var(--on-dark-2); }
.section h2 + .benefit-grid, .section h2 + .offer-list, .section h2 + .chips, .section h2 + .expect, .section h2 + .accordion, .section h2 + .card-grid, .section h2 + .team-grid, .section h2 + .steps { margin-top: 28px; }
.offer-list { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--white); }
.offer { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: start; padding: 22px 26px; border-bottom: 1px solid var(--line); }
.offer:last-child { border-bottom: 0; }
.offer h3 { font-size: var(--fs-h3); font-weight: 600; margin-bottom: .3em; font-family: var(--sans); letter-spacing: 0; }
.offer p { margin: 0; color: var(--ink-2); max-width: 72ch; font-size: var(--fs-body); }
.offer-price { font-family: var(--display); font-size: var(--fs-lead); color: var(--deep); white-space: nowrap; padding-top: 2px; letter-spacing: -.01em; }
.addon { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.addon-copy .note { padding: 14px 18px; border-left: 2px solid var(--sage); background: rgba(91,160,102,.1); color: var(--on-dark); border-radius: 0 8px 8px 0; font-size: var(--fs-body); }
.addon-points ul { list-style: none; margin: 0; padding: 0; }
.addon-points li { padding: 14px 0; border-bottom: 1px solid var(--line-dark); color: var(--on-dark-2); font-size: var(--fs-body); }
.addon-points li strong { color: var(--white); display: block; }
.addon-media { margin-bottom: 20px; }
.addon-media img { border-radius: var(--r); }
.chips { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: var(--fs-ui); }
.who-media img { border-radius: var(--r); }
.expect { margin: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); overflow: hidden; }
.expect div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.expect div:last-child { border-bottom: 0; }
.expect dt { font-weight: 600; font-size: var(--fs-body); }
.expect dd { margin: 0; color: var(--ink-2); font-size: var(--fs-body); }
.refs { list-style: none; padding: 0; margin: 16px 0 0; }
.refs li { padding: 8px 0; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.practitioner-note { margin: 0; padding: 28px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); display: grid; grid-template-columns: 84px 1fr; gap: 20px; align-self: start; }
.pn-photo img { width: 84px; height: 108px; object-fit: cover; border-radius: 10px; }
.practitioner-note blockquote { margin: 0; font-family: var(--quote); font-size: var(--fs-h3); line-height: 1.25; grid-column: 2; }
.practitioner-note blockquote p { margin: 0; }
.practitioner-note figcaption { grid-column: 2; color: var(--ink-2); font-size: var(--fs-small); }
.practitioner-note figcaption a { margin-left: 8px; color: var(--deep); font-weight: 600; }

/* Accordion */
.faqs h2 { text-align: center; }
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; font-weight: 600; font-size: var(--fs-h4); line-height: 1.35; position: relative; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; position: absolute; right: 8px; line-height: 1; top: 50%; transform: translateY(-50%); font-family: var(--display); font-size: 1.5rem; font-weight: 300; color: var(--ink-2); transition: transform .3s var(--ease); }
.accordion details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.acc-body { padding: 0 0 22px; color: var(--ink-2); font-size: var(--fs-body); }

/* Quiz */
.quiz { margin-top: 28px; padding: 32px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); }
.quiz-progress { height: 3px; background: var(--off-2); border-radius: 2px; margin-bottom: 8px; }
.quiz-progress span { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--deep); transition: width .4s var(--ease); }
.quiz-count { font-size: var(--fs-small); color: var(--ink-3); text-align: right; margin: 0 0 18px; }
.quiz-q { border: 0; padding: 0; margin: 0; }
.quiz-q legend { font-family: var(--display); font-size: var(--fs-h2); letter-spacing: -.02em; line-height: 1.15; margin-bottom: 18px; }
.quiz-options { display: grid; gap: 8px; }
.quiz-opt { text-align: left; padding: 13px 16px; border: 1px solid var(--line); border-radius: 10px; font-weight: 500; transition: border-color .2s, background .2s; }
.quiz-opt:hover { border-color: var(--ink); background: var(--off); }
.quiz-result h3 { font-size: var(--fs-h2); font-weight: 400; letter-spacing: -.02em; }
.quiz-result .hero-actions { margin-top: 18px; }
.quiz-result button.link-arrow { color: var(--deep); }

/* Practitioner, team, gallery */
.about-photo img, .team-photo img { border-radius: var(--r); }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.team-photo { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r); margin-bottom: 14px; background: var(--off-2); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-photo.placeholder { background: linear-gradient(160deg, var(--off-2), var(--sage-3)); }
.team-member h3 { margin-bottom: .1em; }
.team-member p { color: var(--ink-2); font-size: var(--fs-body); }
.story h2 { margin-bottom: .2em; }
.story-role { color: var(--ink-2); margin-bottom: 1.6em; }
.creds { margin: clamp(36px, 5vw, 64px) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.creds div { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); font-size: var(--fs-body); }
.about-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); }
.creds dt { font-weight: 600; }
.creds dd { margin: 4px 0 0; color: var(--ink-2); }
.about-intro.no-photo { grid-template-columns: 1fr; max-width: 820px; }
/* The photo fills the column beside the story, so the two end level */
.about-intro .about-photo { position: relative; min-height: 440px; overflow: hidden; border-radius: var(--r); background: var(--off-2); }
.about-intro .about-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.page-template-about .hero-img { object-position: 50% 0; }
.gallery { display: grid; gap: 14px; }
.gallery figure { margin: 0; overflow: hidden; border-radius: var(--r); background: var(--off-2); }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.gallery.gallery-tall img { aspect-ratio: 4 / 5; }
.map-embed { margin-top: 36px; aspect-ratio: 21 / 9; border-radius: var(--r); overflow: hidden; filter: grayscale(1); }
.map-embed iframe { width: 100%; height: 100%; border: 0; }
.clinic-facts address { margin-bottom: 10px; }
.clinic-facts .h3 { margin-top: 24px; }

/* Testimonial wall */
.wall { columns: 3; column-gap: 16px; }
.wall figure { break-inside: avoid; margin: 0 0 16px; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.wall blockquote { margin: 0 0 14px; font-size: var(--fs-body); line-height: 1.55; }
.wall blockquote p { margin: 0; }
.wall figcaption { font-size: var(--fs-small); }
.wall figcaption strong { display: block; font-weight: 600; }
.wall figcaption span { color: var(--ink-2); }

/* Hours, fees */
.hours { list-style: none; margin: 0 0 16px; padding: 0; }
.hours li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.hours li span:last-child { color: var(--ink-2); white-space: nowrap; }
.hours.compact { max-width: 420px; margin: 20px 0; }
.on-dark .hours li { border-color: var(--line-dark); }
.on-dark .hours li span:last-child { color: var(--on-dark-2); }
.fee-group { margin-top: 36px; }
.fee-group h2 { font-size: var(--fs-h2); margin-bottom: .4em; }
table.fees { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
table.fees td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: var(--fs-body); }
table.fees tr:last-child td { border-bottom: 0; }
table.fees td a { display: inline-block; padding: 6px 0; margin: -6px 0; }
table.fees td a:hover { color: var(--deep); }
table.fees td:first-child { width: 48%; }
table.fees td.price { width: 20%; }
table.fees td.price { font-weight: 600; color: var(--deep); white-space: nowrap; }
table.fees td:last-child { width: 32%; font-size: var(--fs-small); }
.notes { margin-top: 36px; color: var(--ink-2); font-size: var(--fs-small); }

/* Booking form */
.booking { padding: clamp(64px, 8vw, 112px) 0; background: var(--charcoal); color: var(--on-dark); }
.booking-inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 72px); }
.booking-copy h2 { color: var(--white); margin-bottom: .4em; }
.booking-copy p { color: var(--on-dark-2); }
.booking-contacts { list-style: none; margin: 22px 0 0; padding: 0; }
.booking-contacts li { padding: 10px 0; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.booking-contacts .muted { font-size: var(--fs-small); width: 100%; color: var(--on-dark-2); }
.wa { color: var(--sage-2); font-size: var(--fs-small); font-weight: 600; }
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label, .field legend { font-size: var(--fs-small); font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; padding: 13px 15px; background: rgba(255,255,255,.06); border: 1px solid var(--line-dark); border-radius: 10px; color: var(--white); font: inherit; transition: border-color .2s, background .2s; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.4); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sage); background: rgba(255,255,255,.09); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235ba066' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.field select option { color: var(--ink); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
fieldset.field { border: 0; padding: 0; margin: 0; }
.dob-row { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; max-width: 300px; }
.field.check { grid-template-columns: auto 1fr; align-items: start; gap: 12px; }
.field.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--sage); }
.field.check label { font-weight: 400; color: var(--on-dark-2); font-size: var(--fs-small); }
.field.check label a { color: var(--white); }
.field.invalid input, .field.invalid select, fieldset.invalid input { border-color: var(--error); }
.hp { position: absolute; left: -9999px; }
/* Contact Form 7 markup: its hidden fields, the consent checkbox and its messages */
.wpcf7 .hidden-fields-container { display: none; }
.wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wpcf7-form-control-wrap { display: block; }
.field.check .wpcf7-form-control-wrap { grid-column: 1 / -1; }
.field.check .wpcf7-list-item { margin: 0; }
.field.check .wpcf7-list-item label { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-weight: 400; color: var(--on-dark-2); font-size: var(--fs-small); }
.field.check .wpcf7-list-item-label a { color: var(--white); }
.form-note { margin: 0; color: var(--on-dark-2); font-size: var(--fs-small); }
.form-note a { color: var(--white); }
.wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: var(--fs-small); color: var(--error-2); }
.wpcf7-response-output { margin: 16px 0 0; font-size: var(--fs-small); color: var(--on-dark-2); }
.wpcf7-spinner { position: absolute; visibility: hidden; }
.wpcf7 form.submitting .wpcf7-spinner { visibility: visible; }
.booking-form .form { width: 100%; }
.form-status { margin: 0; color: var(--sage-2); min-height: 1.4em; font-size: var(--fs-small); }
.form-status.error { color: var(--error); }

/* Blog */
.post-header { padding: calc(var(--header-full) + 64px) 0 32px; }
.post-header h1 { font-size: var(--fs-h1); }
.post-hero { margin-top: 28px; }
.post-hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r); }
.post-body { padding: 40px 0 32px; font-size: var(--fs-body); }
.post-body h2 { font-size: var(--fs-h2); margin-top: 1.4em; }
.post-body h3 { margin-top: 1.2em; }
.post-body img { border-radius: var(--r); margin: 24px 0; }
.post-body ul, .post-body ol { margin-bottom: 1.2em; }
.post-body li { margin-bottom: .4em; }
.post-body blockquote { margin: 1.5em 0; padding-left: 20px; border-left: 2px solid var(--sage); font-family: var(--quote); font-size: var(--fs-h3); }
.post-foot { padding-bottom: 72px; }

/* Shop, legal, misc */
.draft-note { padding: 12px 16px; border: 1px dashed var(--sage); border-radius: 10px; color: var(--deep); font-size: var(--fs-small); margin-bottom: 28px; background: var(--sage-3); }
.product-gallery img { border-radius: var(--r); }
.legal h2 { margin-top: 1.6em; }

/* Footer */
.site-footer { background: var(--charcoal); color: var(--on-dark); font-size: var(--fs-body); }
.site-footer .footer-brand img { filter: invert(1) brightness(1.3); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding: 64px 0 40px; }
.footer-brand img { width: 150px; margin-bottom: 18px; }
.footer-brand p { color: var(--on-dark-2); }
.footer-social a { color: var(--sage-2); font-weight: 600; display: inline-block; padding: 6px 0; }
.benefit a, .footer-col li a, .booking-contacts a, address, .mobile-contact a { overflow-wrap: anywhere; }
.clinic-facts .link-arrow { padding: 6px 0; }
.footer-col h3 { font-family: var(--sans); font-size: var(--fs-micro); font-weight: 700; letter-spacing: .02em; margin-bottom: 12px; color: var(--white); }
.footer-col ul { list-style: none; margin: 0 0 22px; padding: 0; }
.footer-col li { padding: 4px 0; }
.footer-col li a { color: var(--on-dark-2); }
.footer-col li a:hover, .footer-col li a.link-arrow { color: var(--sage-2); }
.footer-contact address { margin-bottom: 10px; color: var(--on-dark-2); }
.hours-now { color: var(--on-dark-2); margin-bottom: 6px; }
.hours-now .open { color: var(--sage-2); font-weight: 600; }
.hours-now .shut { color: var(--white); font-weight: 600; }
.site-footer .link-arrow { color: var(--sage-2); }
.footer-bottom { padding: 22px 0 36px; border-top: 1px solid var(--line-dark); display: grid; gap: 10px; }
.disclaimer { color: var(--on-dark-2); font-size: var(--fs-small); margin: 0; }
.copyright { color: rgba(255,255,255,.55); font-size: var(--fs-small); margin: 0; }

/* Sticky book, cookie banner */
.sticky-book { display: none; opacity: 0; transform: translateY(12px); transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none; position: fixed; right: 84px; bottom: 21px; z-index: 90; padding: 13px 20px; border-radius: 999px; background: var(--charcoal); color: var(--white); font-weight: 700; box-shadow: var(--shadow); }
.cookie-banner { position: fixed; left: 16px; bottom: 16px; right: auto; z-index: 95; width: min(390px, calc(100vw - 32px)); padding: 18px 20px 20px; background: var(--graphite); color: var(--on-dark); border: 1px solid var(--line-dark); border-radius: 16px; box-shadow: 0 24px 60px rgba(5,8,7,.38); font-size: var(--fs-small); animation: cookieIn .45s var(--ease) both; }
@keyframes cookieIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cookie-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.cookie-head strong { color: var(--white); font-size: var(--fs-body); }
.cookie-icon { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(91,160,102,.16); color: var(--sage-2); flex: none; }
.cookie-banner p { margin: 0 0 14px; color: var(--on-dark-2); line-height: 1.5; }
.cookie-banner a { color: var(--white); }
.cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie-actions .btn { padding: .7em 1.15em; font-size: var(--fs-ui); flex: 1 1 auto; }



.sticky-book.show { opacity: 1; transform: none; pointer-events: auto; }

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

/* Page transitions: cross-document view transitions where supported, JS fade elsewhere */
@view-transition { navigation: auto; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
::view-transition-old(root) { animation: .2s var(--ease) both vt-out; }
::view-transition-new(root) { animation: .36s var(--ease) both vt-in; }
::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; mix-blend-mode: normal; }
main { transition: opacity .22s var(--ease); }
body.leaving main { opacity: 0; }

/* CTA strip on service pages */
.cta-strip { background: var(--deep); color: var(--white); }
.cta-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; flex-wrap: wrap; }
.cta-strip p { margin: 0; font-size: var(--fs-body); }
.cta-strip strong { font-weight: 700; }
.cta-strip-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-strip .btn-ghost { border-color: rgba(255,255,255,.4); color: var(--white); }
.cta-strip .btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,.08); }

/* Compare table (services hub) */
.compare { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.compare-table th { text-align: left; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .02em; color: var(--ink-3); padding: 14px 18px; border-bottom: 1px solid var(--line); }
.compare-table td { padding: 16px 18px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: var(--fs-body); color: var(--ink-2); }
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table td strong { display: block; color: var(--ink); font-weight: 600; }
.compare-table td span { display: block; font-size: var(--fs-small); color: var(--ink-3); }
.compare-table td.price { font-weight: 600; color: var(--deep); white-space: nowrap; }
.compare-table .link-arrow { padding: 6px 0; min-height: 32px; }

/* Home intro. Natural therapy reads as breath and growth, so a stem of light draws down the
   centre of the hero, a slow bloom breathes behind it, then the dark opens outward from the stem. */
.hero-intro { position: fixed; inset: 0; z-index: 200; pointer-events: none; visibility: hidden; overflow: hidden; }
.hero-intro-panel { position: absolute; top: 0; bottom: 0; width: 51%; background: var(--night); }
.hero-intro-l { left: 0; }
.hero-intro-r { right: 0; }
.hero-intro-bloom { position: absolute; top: 50%; left: 50%; width: 120vmax; height: 120vmax; transform: translate(-50%, -50%) scale(.2); border-radius: 50%; background: radial-gradient(circle, rgba(91,160,102,.30) 0%, rgba(91,160,102,.10) 34%, rgba(91,160,102,0) 62%); opacity: 0; }
.hero-intro-beam { position: absolute; top: 8%; bottom: 8%; left: 50%; width: 1px; transform: translateX(-50%) scaleY(0); transform-origin: 50% 0; background: linear-gradient(to bottom, rgba(123,187,134,0) 0%, rgba(214,233,218,.55) 18%, rgba(255,255,255,.8) 50%, rgba(214,233,218,.55) 82%, rgba(123,187,134,0) 100%); box-shadow: 0 0 18px 4px rgba(123,187,134,.26), 0 0 60px 18px rgba(91,160,102,.12); }
html.intro .hero-intro { visibility: visible; animation: introDone .01s linear 3s forwards; }
html.intro .hero-intro-beam { animation: stemGrow 1.05s cubic-bezier(.33,0,.2,1) .15s both, stemOpen 1.5s cubic-bezier(.42,0,.16,1) 1.15s both; }
html.intro .hero-intro-bloom { animation: breathe 2.5s cubic-bezier(.37,0,.26,1) .35s both; }
html.intro .hero-intro-l { animation: panelL 1.5s cubic-bezier(.42,0,.16,1) 1.15s both; }
html.intro .hero-intro-r { animation: panelR 1.5s cubic-bezier(.42,0,.16,1) 1.15s both; }
html.intro .site-header, html.intro .hero-aside, html.intro .sticky-book { animation: introFade 1s var(--ease) 2.25s both; }
html.intro .wa-dock { opacity: 0; animation: introFade 1s var(--ease) 2.45s forwards; }
html.intro .hero-main > * { animation-delay: 1.95s; }
html.intro .hero-main > *:nth-child(2) { animation-delay: 2.1s; }
html.intro .hero-main > *:nth-child(3) { animation-delay: 2.25s; }
html.intro .hero-main > *:nth-child(4) { animation-delay: 2.4s; }
@keyframes stemGrow { from { transform: translateX(-50%) scaleY(0); } to { transform: translateX(-50%) scaleY(1); } }
@keyframes stemOpen { 0% { width: 1px; opacity: 1; } 40% { opacity: .5; } 100% { width: 104vw; opacity: 0; } }
@keyframes breathe { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.15); } 45% { opacity: 1; transform: translate(-50%, -50%) scale(.62); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@keyframes panelL { to { transform: translateX(-101%); } }
@keyframes panelR { to { transform: translateX(101%); } }
@keyframes introFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes introDone { to { visibility: hidden; } }

/* Guided quiz button, pulsing to pull the eye */
.btn-quiz { position: relative; }
.btn-quiz::after { content: "\2192"; transition: transform .25s var(--ease); }
.btn-quiz:hover::after { transform: translateX(4px); }
.btn-quiz::before { content: ""; position: absolute; inset: -3px; border-radius: 999px; border: 1.5px solid var(--sage-2); opacity: 0; pointer-events: none; animation: quizPulse 2.6s var(--ease) infinite; }
@keyframes quizPulse { 0% { transform: scale(1); opacity: .75; } 70% { transform: scale(1.14); opacity: 0; } 100% { transform: scale(1.14); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .btn-quiz::before { display: none; } }

/* Leaf page transition to and from the quiz */
.leaf-veil { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; pointer-events: none; visibility: hidden; background: var(--charcoal); opacity: 0; }
.leaf-veil .leaf-wash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(91,160,102,.22), rgba(15,20,18,0) 62%); opacity: 0; }
.leaf-mark { position: relative; width: clamp(96px, 16vw, 168px); height: auto; transform: scale(.4); opacity: 0; }
.leaf-mark .leaf-a, .leaf-mark .leaf-b { transform-origin: 32px 50px; }
html.leaf-out .site-header, html.leaf-in .site-header { view-transition-name: none; }
html.leaf-out .leaf-veil { visibility: visible; pointer-events: auto; animation: veilIn .52s var(--ease) both; }
html.leaf-out .leaf-veil .leaf-wash { animation: washIn .62s var(--ease) both; }
html.leaf-out .leaf-mark { animation: leafGrow .62s cubic-bezier(.2,.75,.3,1) .06s both; }
html.leaf-out .leaf-mark .leaf-a { animation: leafWingL .5s var(--ease) .12s both; }
html.leaf-out .leaf-mark .leaf-b { animation: leafWingR .5s var(--ease) .12s both; }
html.leaf-in .leaf-veil { visibility: visible; animation: veilOut .62s var(--ease) both; }
html.leaf-in .leaf-veil .leaf-wash { animation: washOut .62s var(--ease) both; }
html.leaf-in .leaf-mark { animation: leafShrink .58s var(--ease) both; }
html.leaf-in main { animation: leafPageIn .7s var(--ease) .18s both; }
@keyframes veilIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes veilOut { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes washIn { from { opacity: 0; } 60% { opacity: 1; } to { opacity: 1; } }
@keyframes washOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes leafGrow { from { transform: scale(.35) rotate(-14deg); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1) rotate(0deg); opacity: 1; } }
@keyframes leafShrink { from { transform: scale(1); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@keyframes leafWingL { from { transform: rotate(26deg) scaleY(.5); } to { transform: none; } }
@keyframes leafWingR { from { transform: rotate(-26deg) scaleY(.5); } to { transform: none; } }
@keyframes leafPageIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* WhatsApp dock, bottom right */
.wa-dock { position: fixed; right: 16px; bottom: 16px; z-index: 96; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.wa-btn { position: relative; animation: waPulse 2.8s var(--ease) infinite; width: 58px; height: 58px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--whatsapp); color: var(--whatsapp-ink); box-shadow: 0 14px 34px rgba(5,39,15,.34), 0 2px 6px rgba(5,39,15,.2); transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); }
.wa-btn:hover { transform: translateY(-2px) scale(1.04); background: var(--whatsapp-2); box-shadow: 0 18px 42px rgba(5,39,15,.4); }
@keyframes waPulse { 0% { box-shadow: 0 14px 34px rgba(5,39,15,.34), 0 0 0 0 rgba(37,211,102,.55); } 70% { box-shadow: 0 14px 34px rgba(5,39,15,.34), 0 0 0 18px rgba(37,211,102,0); } 100% { box-shadow: 0 14px 34px rgba(5,39,15,.34), 0 0 0 0 rgba(37,211,102,0); } }
.wa-mark, .wa-x { transition: opacity .2s var(--ease), transform .3s var(--ease); }
.wa-x { position: absolute; opacity: 0; transform: rotate(-90deg) scale(.6); }
.wa-dock.open .wa-mark { opacity: 0; transform: rotate(90deg) scale(.6); }
.wa-dock.open .wa-x { opacity: 1; transform: none; }
.wa-dock.open .wa-btn { animation: none; }
.wa-card { width: min(320px, calc(100vw - 32px)); background: var(--white); color: var(--ink); border-radius: 18px; overflow: hidden; box-shadow: 0 26px 60px rgba(15,20,18,.26), 0 2px 8px rgba(15,20,18,.1); transform-origin: bottom right; animation: waCardIn .3s var(--ease) both; }
@keyframes waCardIn { from { opacity: 0; transform: translateY(14px) scale(.92); } 60% { transform: translateY(0) scale(1.012); } to { opacity: 1; transform: none; } }
.wa-card { animation-duration: .42s; animation-timing-function: cubic-bezier(.22,1.02,.36,1); }
.wa-card .wa-msg { animation: waMsgIn .34s var(--ease) both; }
.wa-card .wa-msg { animation-delay: .22s; }
.wa-card .wa-msg-2 { animation-delay: .36s; }
.wa-card .wa-start { animation: waMsgIn .34s var(--ease) .5s both; }
@keyframes waMsgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wa-dock.auto .wa-btn { animation: none; }
.wa-card-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 13px; background: var(--charcoal); color: var(--on-dark); }
.wa-avatar img { width: 38px; height: 38px; border-radius: 50%; }
.wa-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.wa-who strong { font-size: var(--fs-small); color: var(--white); }
.wa-status { font-size: var(--fs-micro); color: var(--sage-2); display: flex; align-items: center; gap: 5px; }
.wa-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--whatsapp); flex: none; }
.wa-close { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--on-dark-2); flex: none; transition: background .2s, color .2s; }
.wa-close:hover { background: rgba(255,255,255,.14); color: var(--white); }
.wa-card-body { padding: 16px 14px 6px; background: var(--off); background-image: radial-gradient(rgba(91,160,102,.16) 1px, transparent 1px); background-size: 16px 16px; }
.wa-msg { position: relative; margin: 0 0 10px; background: var(--white); border-radius: 12px 12px 12px 3px; padding: 10px 13px; font-size: var(--fs-small); box-shadow: 0 1px 2px rgba(15,20,18,.12); max-width: 92%; }
.wa-msg-2 { color: var(--ink-2); }
.wa-start { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 14px 0; padding: 12px 16px; border-radius: 999px; background: var(--whatsapp); color: var(--whatsapp-ink); font-weight: 700; font-size: var(--fs-ui); transition: background .2s var(--ease); }
.wa-start:hover { background: var(--whatsapp-2); }
.wa-note { margin: 9px 14px 14px; font-size: var(--fs-micro); color: var(--ink-3); text-align: center; }

/* Announcement, shown once per visitor */
.announce { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: var(--gutter); }
.announce[hidden] { display: none; }
.announce-backdrop { position: absolute; inset: 0; background: rgba(8,12,10,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: introFade .35s var(--ease) both; }
.announce-panel { position: relative; width: min(620px, 100%); max-height: calc(100svh - 2 * var(--gutter)); overflow: auto; background: var(--graphite); color: var(--on-dark); border: 1px solid var(--line-dark); border-radius: 18px; box-shadow: 0 40px 90px rgba(5,8,7,.5); animation: announceIn .45s var(--ease) .05s both; }
@keyframes announceIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.announce-media { position: relative; aspect-ratio: 16 / 7; overflow: hidden; }
.announce-media img { width: 100%; height: 100%; object-fit: cover; }
.announce-glow { position: absolute; inset: 0; background: linear-gradient(to top, var(--graphite) 2%, rgba(26,33,29,.25) 60%, rgba(26,33,29,0) 100%); }
.announce-body { padding: 4px 30px 30px; }
.announce-body h2 { font-size: var(--fs-h2); color: var(--white); margin-bottom: .35em; }
.announce-body p { color: var(--on-dark-2); font-size: var(--fs-body); margin-bottom: 22px; }
.announce-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.announce-actions .btn-ghost { border-color: rgba(255,255,255,.3); color: var(--white); }
.announce-actions .btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,.08); }
.announce-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(8,12,10,.55); color: var(--white); backdrop-filter: blur(4px); transition: background .2s; }
.announce-close:hover { background: rgba(8,12,10,.85); }
body.announce-open { overflow: hidden; }

/* Bare pages: no site chrome, a dark stage with one thing centred on it (the quiz, the holding page) */
body.page-bare { background: var(--charcoal); color: var(--on-dark); }
.stage { position: relative; min-height: 100svh; display: grid; place-items: center; padding: clamp(32px, 6vw, 72px) var(--gutter); overflow: hidden; }
.stage::before { content: ""; position: absolute; top: -18%; left: 50%; width: min(1100px, 160vw); aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(circle, rgba(91,160,102,.15) 0%, rgba(91,160,102,.05) 38%, rgba(91,160,102,0) 66%); pointer-events: none; }
.stage-inner { position: relative; width: min(760px, 100%); text-align: center; }
.stage-back { display: inline-flex; align-items: center; gap: .5em; margin-bottom: clamp(24px, 4vw, 40px); padding: .7em 1.3em; border-radius: 999px; border: 1px solid rgba(255,255,255,.24); color: var(--on-dark-2); font-weight: 600; font-size: var(--fs-ui); transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease); }
.stage-back::before { content: "\2190"; transition: transform .25s var(--ease); }
.stage-back:hover { background: rgba(255,255,255,.08); border-color: var(--white); color: var(--white); }
.stage-back:hover::before { transform: translateX(-4px); }
.stage h1 { color: var(--white); margin-bottom: .3em; }
.stage .lead { color: var(--on-dark-2); margin: 0 0 clamp(28px, 4vw, 44px); }

.quiz-lg { padding: clamp(24px, 4vw, 44px); box-shadow: 0 18px 50px rgba(15,20,18,.07); }
.quiz-lg .quiz-opt { padding: 15px 18px; }
.stage .quiz { margin-top: 0; text-align: left; color: var(--ink); border-color: transparent; border-radius: 18px; box-shadow: 0 40px 90px rgba(4,7,6,.55), 0 2px 10px rgba(4,7,6,.3); }
.quiz-result h2 { font-size: var(--fs-h2); }

/* Working out the answer: the logo leaf turns for a beat before the card appears */
.quiz-loading { display: grid; place-items: center; gap: 16px; padding: clamp(40px, 8vw, 72px) 0; text-align: center; }
.quiz-loading[hidden] { display: none; }
.quiz-loading p { margin: 0; color: var(--ink-2); font-size: var(--fs-small); }
.quiz-leaf { width: 76px; height: 76px; overflow: visible; }
.quiz-leaf .leaf-a, .quiz-leaf .leaf-b { transform-origin: 32px 50px; }
.quiz-leaf .leaf-a { animation: quizLeafL 1.7s var(--ease) infinite; }
.quiz-leaf .leaf-b { animation: quizLeafR 1.7s var(--ease) infinite; }
.quiz-leaf .leaf-stem { animation: quizLeafStem 1.7s var(--ease) infinite; }
@keyframes quizLeafL { 0%, 100% { transform: rotate(20deg) scale(.84); opacity: .4; } 50% { transform: none; opacity: 1; } }
@keyframes quizLeafR { 0%, 100% { transform: rotate(-20deg) scale(.84); opacity: .4; } 50% { transform: none; opacity: 1; } }
@keyframes quizLeafStem { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* The answer card: title, the treatment pictured, then the copy */
.quiz-result { animation: quizResultIn .5s var(--ease) both; }
.quiz-result[hidden] { display: none; }
@keyframes quizResultIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }



.quiz-result .hero-actions .btn { white-space: normal; text-align: center; }
.quiz-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.quiz-bar .quiz-count { margin: 0 0 0 auto; }
.quiz-prev { font-size: var(--fs-small); color: var(--ink-2); padding: 4px 0; }
.quiz-prev::before { content: "\2190"; margin-right: 6px; }
.quiz-prev:hover { color: var(--ink); }
.quiz-hint { margin: -8px 0 14px; font-size: var(--fs-small); color: var(--ink-3); }
.quiz-toggle { display: flex; align-items: center; gap: 12px; }
.quiz-toggle::before { content: ""; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--line); border-radius: 5px; transition: background .2s, border-color .2s; }
.quiz-toggle[aria-pressed="true"] { border-color: var(--deep); background: var(--off); }
.quiz-toggle[aria-pressed="true"]::before { border-color: var(--deep); background: var(--deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.quiz-continue { margin-top: 18px; }
.quiz-continue:disabled { opacity: .45; cursor: not-allowed; }
.quiz-outcome[hidden], .quiz-picks[hidden] { display: none; }
.quiz-result .quiz-picks-title { font-size: var(--fs-h3); margin: 32px 0 14px; }
.quiz-picks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.quiz-picks a { display: grid; align-content: start; gap: 6px; height: 100%; padding: 10px 10px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; transition: border-color .2s, background .2s; }
.quiz-picks a:hover { border-color: var(--ink); background: var(--off); }
.quiz-picks img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; margin-bottom: 4px; }
.quiz-picks strong { font-weight: 600; }
.quiz-picks span { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.45; }
.quiz-restart { margin-top: 22px; }
@media (max-width: 720px) { .quiz-picks { grid-template-columns: 1fr; } .quiz-picks a { grid-template-columns: 96px 1fr; column-gap: 12px; align-items: start; } .quiz-picks img { grid-row: span 2; margin: 0; } }

/* Home intro block: their opening copy, then the three firsts */
.intro-home .section-head-c { margin-bottom: 22px; }
.intro-home-body { margin-bottom: 0; text-align: center; }
.intro-home-body p { margin-bottom: 1.1em; }
.intro-home-body .btn { margin-top: 12px; }

/* Treatment tiles with group filter, inside the dark band */
.treatments-block { margin-top: clamp(64px, 8vw, 104px); }
.treatments-block .section-head-c { margin-bottom: 28px; }
.tile-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 36px; }
.tile-filter .chip { border-color: rgba(255,255,255,.22); color: var(--on-dark-2); }
.tile-filter .chip:hover { border-color: rgba(255,255,255,.5); color: var(--white); }
.tile-filter .chip.is-active { background: var(--sage); border-color: var(--sage); color: var(--ink); }
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* The photograph is the card. Copy sits at the foot over a black gradient, and hovering lifts the
   picture out of the shade while a sage bloom rises from the bottom edge. */
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; background: var(--graphite); border: 1px solid var(--line-dark); border-radius: var(--r); overflow: hidden; isolation: isolate; transition: transform .35s var(--ease), border-color .3s var(--ease); }
.tile:hover { transform: translateY(-4px); border-color: rgba(91,160,102,.55); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.82) 24%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.12) 74%, rgba(0,0,0,0) 100%); }
.tile::after { content: ""; position: absolute; left: 50%; bottom: -26%; width: 150%; height: 86%; z-index: 1; pointer-events: none; border-radius: 50%; background: radial-gradient(ellipse at 50% 100%, rgba(91,160,102,.5) 0%, rgba(91,160,102,.17) 40%, rgba(91,160,102,0) 72%); opacity: 0; transform: translate(-50%, 18px); transition: opacity .45s var(--ease), transform .6s var(--ease); }
.tile:hover::after, .tile:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.tile-media { position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden; background: var(--charcoal); }
.tile-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); filter: brightness(.64) saturate(1.02); transition: transform 1.1s var(--ease), filter .5s var(--ease); }
.tile:hover .tile-media img, .tile:focus-visible .tile-media img { transform: scale(1.08); filter: brightness(.92) saturate(1.06); }
.tile-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; }
.tile-body strong { font-family: var(--display); font-size: var(--fs-h3); font-weight: 500; letter-spacing: -.01em; color: var(--white); line-height: 1.2; }
.tile-text { color: var(--on-dark-2); font-size: var(--fs-body); line-height: 1.5; }
.tile-body strong, .tile-text { text-shadow: 0 1px 12px rgba(0,0,0,.55); }
.tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.22); }
.tile-price { color: var(--sage-2); font-size: var(--fs-small); font-weight: 600; }
.tile-foot .link-arrow { color: var(--white); font-size: var(--fs-small); }
.tile:hover .tile-foot .link-arrow { color: var(--sage-2); }
.tile[hidden] { display: none; }
/* Category switch: the grid fades out, swaps, then the new tiles rise back in one after another */
.tile { transition: transform .35s var(--ease), border-color .3s var(--ease), opacity .3s var(--ease); }
.tile-grid.is-filtering .tile { opacity: 0; transform: translateY(10px); transition-delay: 0ms; }
@media (prefers-reduced-motion: reduce) { .tile-grid.is-filtering .tile { opacity: 1; transform: none; } .tile::after { display: none; } .tile:hover { transform: none; } }

/* Responsive */
@media (max-width: 1100px) {
  .benefit-grid, .benefit-grid.cols-3, .steps, .steps.steps-3, .pillar-track { grid-template-columns: repeat(2, 1fr); }
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .tile { min-height: 380px; }
  
  
  .footer-top { grid-template-columns: 1fr 1fr; }
  .wall { columns: 2; }
  .primary-nav, .header-phone, .header-cta { display: none; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 1240px) {
  .header-phone { display: none; }
}
@media (max-width: 900px) {
  .grid-2, .booking-inner, .addon, .section-head, .intro-section .grid-2 { grid-template-columns: 1fr; }
  .section-head { gap: 20px; }
  .cols-3, .team-grid { grid-template-columns: 1fr 1fr; }
  .stat-card { border-bottom: 1px solid var(--line); }
  .about-intro { grid-template-columns: 1fr; }
  .about-intro .about-photo { min-height: 0; aspect-ratio: 4 / 5; max-width: 520px; }
  .creds { grid-template-columns: 1fr 1fr; }
  .hero-content { grid-template-columns: 1fr; }
  .hero-aside { text-align: left; }
  .hero-home { align-items: flex-end; padding-bottom: 48px; }
  .hero-home .hero-content { text-align: left; }
  .hero-home .hero-main { margin-inline: 0; }
  .hero-home .lead { margin-inline: 0; }
  .hero-home .hero-actions { justify-content: flex-start; }
  .hero-home .hero-aside { position: static; transform: none; width: auto; text-align: left; margin-top: 24px; }
  .hero-home { padding-bottom: 24px; }
  .hero-foot { padding-top: 20px; }
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stat { padding: 9px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .hero-stat:last-child { border-bottom: 0; padding-right: 0; }
  .hero-stat:not(:first-child) { padding-left: 0; }
  .hero-stat-value { font-size: 1.35rem; min-width: 58px; }
  .practitioner-note { grid-template-columns: 1fr; }
  .practitioner-note blockquote, .practitioner-note figcaption { grid-column: 1; }
  .expect div { grid-template-columns: 1fr; gap: 2px; }
  .offer { grid-template-columns: 1fr; gap: 6px; }
  .search-form { flex-direction: column; }
  .intro-home-body { columns: 1; }
  .pillar { min-height: 0; }
}
@media (max-width: 700px) {
  
  
}
@media (max-width: 700px) {
  /* Comparison table becomes cards */
  .compare { border: 0; background: none; overflow: visible; }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table td { display: block; width: auto; min-width: 0; }
  .compare-table thead { display: none; }
  .compare-table tr { border: 1px solid var(--line); border-radius: 12px; background: var(--white); padding: 6px 4px 10px; margin-bottom: 12px; }
  .compare-table td { border: 0; padding: 6px 16px; }
  .compare-table td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-3); }
  .compare-table td:empty { display: none; }
  .compare-table td .link-arrow { padding: 8px 0; }

}
@media (max-width: 600px) {
  .sticky-book { display: inline-flex; }
  .cols-3, .team-grid, .benefit-grid, .benefit-grid.cols-3, .steps, .steps.steps-3, .field-row, .pillar-track, .tile-grid { grid-template-columns: 1fr; }
  .tile { min-height: 340px; }
  .search-panel form { flex-direction: column; }
  
  .wall { columns: 1; }
  .hero { padding-top: calc(var(--header-h) + 48px); padding-bottom: 36px; }
  .cta-strip-inner { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { width: 100%; }
  .quiz { padding: 22px 18px; }
  .stage { padding: 28px 16px 40px; align-items: start; }
  .stage::before { top: -8%; }
  .cookie-banner { left: 12px; right: 12px; bottom: 90px; width: auto; }
  .wa-dock { right: 12px; bottom: 12px; }
  .wa-btn { width: 52px; height: 52px; }
  .sticky-book { right: 74px; bottom: 15px; }
  .announce-media { aspect-ratio: 16 / 9; }
  .announce-body { padding: 4px 20px 24px; }
  .announce-actions .btn { width: 100%; }
  .footer-top { grid-template-columns: 1fr; gap: 26px; padding-top: 44px; }
  table.fees td:last-child { display: none; }
  .creds { grid-template-columns: 1fr; }
  .stat-card { gap: 40px; border-right: 0; }
}

/* ------------------------------------------------------- Service page, layout v2
   Opt in per treatment with "layout": "v2" in the service JSON, which puts .layout-v2
   on <body>. Dropping the mid page call to action strip and the footer call to action band
   is done in the templates, not here, so there is no hide rule to find below.
   Loaded last so these win over the responsive rules above. */

/* Intro: the copy sits level with the stat cards, and each label reads beside its value */
.layout-v2 .intro-section .grid-2 { align-items: center; }
.layout-v2 .stats { align-self: center; }
.layout-v2 .stat { flex-direction: row; align-items: baseline; gap: 16px; padding: 20px 24px; }
.layout-v2 .stat-value { flex: none; min-width: 3.2em; }
.layout-v2 .stat-label { flex: 1; }

/* How it works: no photo, centred head, centred cards on the dark scheme used by the home pillars */
.layout-v2 .steps-section .section-head-c { margin-bottom: 44px; }
.layout-v2 .steps-section .section-head-c .lead { max-width: 62ch; margin-inline: auto; }
.layout-v2 .steps { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.layout-v2 .steps.steps-3 { grid-template-columns: repeat(3, 1fr); }
.layout-v2 .steps li { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 26px 30px; border: 1px solid var(--line-dark); border-radius: var(--r); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); }
.layout-v2 .steps h3 { color: var(--white); }
.layout-v2 .steps p { color: var(--on-dark-2); }
.layout-v2 .step-num { background: rgba(91,160,102,.16); border: 1px solid rgba(91,160,102,.42); color: var(--sage-2); }

/* Offer rows: the empty right hand side carries a link on to the related treatment */
.layout-v2 .offer { display: flex; align-items: center; gap: 32px; padding: 24px 28px; }
.layout-v2 .offer-main { flex: 1; min-width: 0; }
.layout-v2 .offer-main p { max-width: 64ch; }
.layout-v2 .offer-price, .layout-v2 .offer-action { flex: none; }
.offer-action .btn { white-space: nowrap; }

/* What it helps with, on the two column layout the IV pushes add-on uses, kept on white */
.layout-v2 .benefit-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.layout-v2 .benefit-copy h2 { margin-bottom: .45em; }
.layout-v2 .benefit-copy .lead { color: var(--ink-2); margin-bottom: 24px; }
.layout-v2 .benefit-copy .note { padding: 14px 18px; margin-bottom: 26px; border-left: 2px solid var(--sage); background: rgba(91,160,102,.12); border-radius: 0 8px 8px 0; color: var(--ink); font-size: var(--fs-body); }
.layout-v2 .benefit-media { margin-bottom: 22px; }
.layout-v2 .benefit-media img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.layout-v2 .benefit-points ul { list-style: none; margin: 0; padding: 0; }
.layout-v2 .benefit-points li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.layout-v2 .benefit-points li h3 { font-family: var(--sans); font-size: var(--fs-h4); font-weight: 600; letter-spacing: 0; line-height: 1.3; color: var(--ink); margin: 0 0 3px; }
.layout-v2 .benefit-points li p { margin: 0; color: var(--ink-2); font-size: var(--fs-body); }

/* A long catalogue of offer rows splits in two rather than leaving half the row empty */
.layout-v2 .offer-cols-2 { display: grid; grid-template-columns: 1fr 1fr; }
.layout-v2 .offer-cols-2 .offer { border-right: 1px solid var(--line); }
.layout-v2 .offer-cols-2 .offer:nth-child(even) { border-right: 0; }
.layout-v2 .offer-cols-2 .offer:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }

/* Who comes for it becomes a picture, centred against what to expect */
.layout-v2 .who-expect .grid-2 { align-items: center; }
.layout-v2 .who-expect .who-media { margin: 0; }
.layout-v2 .who-expect .who-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }

/* Booking form on a photo, held under a heavy charcoal wash so it only just separates from the footer */
.booking-photo { position: relative; isolation: isolate; }
.booking-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--charcoal); }
.booking-media img { width: 100%; height: 100%; object-fit: cover; }
.booking-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,20,18,.95) 0%, rgba(15,20,18,.93) 45%, rgba(15,20,18,.88) 100%); }

@media (max-width: 1100px) {
  .layout-v2 .steps, .layout-v2 .steps.steps-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .layout-v2 .offer-cols-2 { grid-template-columns: 1fr; }
  .layout-v2 .offer-cols-2 .offer { border-right: 0; }
}
@media (max-width: 900px) {
  .layout-v2 .offer { flex-direction: column; align-items: flex-start; gap: 14px; }
  .layout-v2 .benefit-split { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .layout-v2 .stat { gap: 12px; }
  .layout-v2 .stat-value { min-width: 0; }
  .layout-v2 .steps, .layout-v2 .steps.steps-3 { grid-template-columns: 1fr; }
}
/* Plain pages: the heading section runs straight into the content */
.page-head + .page-body { padding-top: 0; }
.entry-content h2.h3 { font-size: var(--fs-h3); margin-top: 1.6em; }
/* WooCommerce: product grid in the theme's card style, buttons in the theme's button style */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product, .woocommerce ul.products[class*="columns-"] li.product, .woocommerce-page ul.products[class*="columns-"] li.product { width: auto; float: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.woocommerce ul.products li.product .card { flex: 1; }
.woocommerce ul.products li.product .price { color: var(--deep); font-size: var(--fs-small); font-weight: 600; margin: 0; }
.shop-note { margin: 0 0 24px; font-size: var(--fs-small); }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { display: inline-flex; align-items: center; justify-content: center; padding: 11px 22px; border-radius: 999px; border: 1px solid var(--ink); background: var(--white); color: var(--ink); font: inherit; font-size: var(--fs-ui); font-weight: 600; line-height: 1.2; }
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--ink); color: var(--white); }
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #place_order { background: var(--ink); color: var(--white); border-color: var(--ink); }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce #place_order:hover { background: var(--deep); border-color: var(--deep); }
.woocommerce ul.products li.product .button { align-self: flex-start; margin: 0; }
.woocommerce a.added_to_cart { font-size: var(--fs-small); font-weight: 600; color: var(--deep); }
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: var(--sage); background: var(--off); font-size: var(--fs-small); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--sage); }
.woocommerce div.product .product_title { font-size: var(--fs-h1); }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--deep); font-size: var(--fs-h3); font-weight: 600; }
.woocommerce .quantity .qty { padding: 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font: inherit; min-height: 46px; }
.woocommerce table.shop_table { border-radius: var(--r); border-color: var(--line); }
@media (max-width: 900px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .woocommerce ul.products { grid-template-columns: 1fr; } }
.woocommerce ul.products li.product .card-body h3 { font-size: var(--fs-h3); padding: 0; margin: 0 0 .35em; }
.woocommerce div.product .related { clear: both; padding-top: clamp(40px, 6vw, 72px); }
.woocommerce div.product .related > h2 { margin-bottom: 24px; }
.product-description { margin-bottom: 20px; }
.page-head:has(+ .page-body) { padding-bottom: 32px; }
/* WooCommerce sets img { height: auto } on shop pages; banner photos must still fill their frame */
.hero .hero-media img.hero-img, .band .band-media img, .booking .booking-media img { height: 100%; max-width: none; }

/* Single product: photo and details sit in a grid rather than WooCommerce's floats, so the section after them can never slide into the gap */
body.woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 72px); align-items: start; }
body.woocommerce div.product > * { grid-column: 1 / -1; }
body.woocommerce div.product div.images, body.woocommerce div.product div.summary { grid-column: auto; width: auto; float: none; margin: 0; }
body.woocommerce div.product div.images img { border-radius: var(--r); }
@media (max-width: 900px) { body.woocommerce div.product { grid-template-columns: minmax(0, 1fr); } }

/* UK delivery note and the safety tick at checkout */
.delivery-note { margin: 0 0 20px; padding: 12px 16px; border-radius: 8px; background: var(--off); color: var(--ink-2); font-size: var(--fs-small); }
.lnt-disclaimer { clear: both; margin: 8px 0 28px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--off); }
.lnt-disclaimer .form-row { margin: 0; padding: 0; }
.lnt-disclaimer label.checkbox { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-small); line-height: 1.5; }
.lnt-disclaimer input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--deep); }

/* Bank details under the bank transfer option at checkout */
.bank-details { margin-top: 12px; }
.bank-details dl { display: grid; gap: 4px; margin: 6px 0 0; }
.bank-details dl > div { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.bank-details dt { min-width: 9em; color: var(--ink-2); }
.bank-details dd { margin: 0; font-weight: 600; }