/* Ablement · Ireland front page
   Tokens from the Ablement brand guidelines (Figma · Styleguide).
   Layout: bone page, floating pill navigation, rounded "sheets" for the big sections,
   photography in large rounded frames with frosted-glass labels. */

/* Fonts, hosted with the site (no Google Fonts). Geist and Plus Jakarta Sans, SIL Open Font Licence, variable weights. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/geist-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/geist-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Colour palette */
  --forest: #0d3b2e;
  /* The fluorescent mint (#40ffc9) is retired; accents use the soft mint */
  --mint: #9fe9bf;
  --deep-green: #007453;
  --emerald: #0b654c;
  --mint-light: #9fe9bf;
  --sage: #5a9474;
  --stone: #959188;
  --bone: #efece4;
  --bone-deep: #e6e2d7;
  --ink: #111715;
  --white: #ffffff;

  --line: rgba(13, 59, 46, 0.12);
  --line-strong: rgba(13, 59, 46, 0.24);
  --muted: rgba(13, 59, 46, 0.76);
  --on-dark: rgba(239, 236, 228, 0.82);
  --on-dark-line: rgba(239, 236, 228, 0.16);

  /* Type */
  --font-head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* The mono face read as too "digital"; small caps-style labels now use Geist */
  --font-mono: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --max: 1376px;
  --edge: 32px;
  --r-xl: 40px;
  --r-lg: 28px;
  --r: 20px;
  --r-sm: 14px;
  --shadow: 0 30px 60px -30px rgba(13, 59, 46, .35);
}

*, *::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 { transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--forest);
  background: var(--bone);
  position: relative;
  -webkit-font-smoothing: antialiased;
}
/* Gradient behind the header and hero heading, fading into the page */
body::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 860px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 90% at 88% 0%, rgba(90, 148, 116, .14), transparent 70%),
    radial-gradient(60% 80% at 8% 0%, rgba(159, 233, 191, .30), transparent 70%),
    linear-gradient(180deg, #e7efe6 0%, var(--bone) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
/* Variant B: a neutral, slightly darker greige instead of the green tint */
.page-b::before {
  background:
    radial-gradient(70% 90% at 88% 0%, rgba(222, 219, 212, .35), transparent 70%),
    radial-gradient(60% 80% at 8% 0%, rgba(214, 211, 204, .25), transparent 70%),
    linear-gradient(180deg, #ebe9e5 0%, var(--bone) 100%);
}
/* Treatment pages: the header fades to a lighter, almost white tone so the copy has more contrast */
.page-treatment::before {
  height: 1040px;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  background:
    radial-gradient(55% 60% at 82% 18%, rgba(214, 238, 224, .5), transparent 70%),
    linear-gradient(180deg, #e9e6e0 0%, #fbfaf7 30%, #fcfbf9 72%, var(--bone) 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
p, h1, h2, h3, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--deep-green); outline-offset: 3px; border-radius: 8px; }
.sheet--forest :focus-visible, .glass:focus-visible { outline-color: var(--mint); }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--forest); color: var(--bone); padding: 12px 18px; border-radius: 10px; }
.skip-link:focus { top: 16px; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--edge) * 2); margin: 0 auto; padding: 0 var(--edge); }

/* ---------- Type ---------- */
h1, h2, h3, .display, .h1, .h2, .h3, .logo__word, .footer__mark, .stat__num, .hero__card-num,
.treat__name, .person-band__title, .step-card h3, .qa__item h3 {
  font-family: var(--font-head);
}
.display {
  font-size: clamp(38px, 3.4vw, 50px); line-height: 1.04; letter-spacing: -0.04em; font-weight: 700;
  text-wrap: balance;
}
.display em {
  font-style: normal; white-space: nowrap; color: var(--emerald);
  background: linear-gradient(100deg, #007453 0%, #0b654c 45%, #3f9f78 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.h1 { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }
.h2 { font-size: clamp(26px, 2.3vw, 34px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; text-wrap: balance; }
.h3 { font-size: 20px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 700; }
.lead { font-size: 17px; line-height: 1.5; color: var(--muted); }
.muted { color: var(--muted); }
.mint { color: var(--mint); }

.label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: 16px; line-height: 1.3; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--muted);
}
.label--emerald { color: var(--emerald); }
.label--mint { color: var(--mint); }
.label--light { color: rgba(239, 236, 228, .9); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); flex: none; box-shadow: 0 0 0 3px rgba(159, 233, 191, .22); }
.label--emerald .dot { background: var(--deep-green); box-shadow: 0 0 0 3px rgba(0, 116, 83, .16); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 2px solid transparent; line-height: 1;
  font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn__arrow {
  display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; margin-right: -12px; border-radius: 50%;
  transition: transform .2s;
}
.i-arrow { display: block; width: 16px; height: 16px; flex: none; }
.btn__arrow .i-arrow { width: 14px; height: 14px; }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn--mint { background: var(--forest); color: var(--bone); }
.btn--secondary { background: transparent; color: var(--forest); border-color: var(--forest); gap: 8px; }   /* the design's forest border (Kaare, 9 Nov 2026) */
.btn--secondary:hover { background: rgba(13, 59, 46, .08); border-color: var(--forest); }
.btn--secondary svg { width: 18px; height: 18px; flex: none; color: var(--forest); }
.btn--secondary svg [data-color="color-2"] { color: var(--deep-green); }
.btn--mint .btn__arrow { background: var(--mint-light); color: var(--forest); }
.btn--mint:hover { background: var(--emerald); }
.btn--dark { background: var(--forest); color: var(--bone); }
.btn--dark .btn__arrow { background: var(--mint); color: var(--forest); }
.btn--dark:hover { background: var(--emerald); }
.btn--lg { min-height: 52px; padding: 0 24px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--outline { background: var(--white); color: var(--forest); border-color: var(--forest); min-height: 44px; }
.btn--outline:hover { background: var(--bone); }

.arrow-link {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--forest);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; text-decoration-color: var(--mint-light);
}
.arrow-link:hover { text-decoration-color: var(--forest); }
.link-btn { background: none; border: 0; padding: 4px 0; cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.logo__symbol { width: 30px; height: auto; }
.logo__word { display: block; font-weight: 700; font-size: 24px; letter-spacing: -0.02em; line-height: 1; transform: translateY(-1px); }
.logo__able { color: var(--ink); }
.logo__ment { color: var(--emerald); }

/* ---------- Utility bar ---------- */
.utility__row { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 24px; }
.utility__law { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--emerald); }
.utility__law .dot { background: var(--deep-green); box-shadow: 0 0 0 3px rgba(0, 116, 83, .16); }
.utility__right { display: flex; align-items: center; gap: 20px; }

.country { position: relative; }
.country__toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  background: var(--white); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 14px;
}
.country__menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 260px; padding: 8px; z-index: 40;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); display: none;
}
.country.is-open .country__menu { display: block; }
.country__menu a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; text-decoration: none; font-weight: 600; }
.country__menu a small { margin-left: auto; font-weight: 400; color: var(--muted); font-size: 13px; }
.country__menu a:hover, .country__menu a[aria-current] { background: var(--bone); }
.country__menu { width: max-content; max-width: calc(100vw - 32px); }
.country__menu a small, .country__soon small { white-space: nowrap; padding-left: 12px; }
@media (max-width: 960px) { .country__menu { width: 260px; } .country__menu a small, .country__soon small { white-space: normal; text-align: right; padding-left: 8px; } }
.country__soon { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-weight: 600; color: var(--muted); cursor: default; }
.country__soon small { margin-left: auto; font-weight: 400; font-size: 13px; }
.chev { transition: transform .2s; }
.country.is-open .chev, .has-mega.is-open .chev { transform: rotate(180deg); }

/* ---------- Floating pill navigation ---------- */
.nav-shell { position: relative; top: 12px; z-index: 30; }   /* the top scrolls away with the page (Kaare, 4 Nov; brief v16) */
.nav {
  position: relative; display: flex; align-items: center; gap: 20px;
  height: 76px; padding: 0 12px 0 28px; border-radius: 999px;
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 18px 40px -24px rgba(13, 59, 46, .35);
}
/* Divider drawn as a background so the list is not the mega menu's positioning box. */
.nav__list {
  display: flex; align-items: center; gap: 2px; margin: 0 auto 0 12px; padding-left: 20px;
  background: linear-gradient(rgba(0, 0, 0, .15), rgba(0, 0, 0, .15)) left center / .5px 28px no-repeat;
}
.nav__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.nav__list > li > a {
  display: inline-flex; align-items: center; gap: 7px; height: 48px; padding: 0 14px; border-radius: 999px;
  font-weight: 600; font-size: 16px; text-decoration: none; transition: background-color .2s;
}
.nav__list > li > a:hover, .has-mega.is-open > a { background: rgba(0, 0, 0, .1); }

.mega {
  position: absolute; left: 0; right: 0; top: calc(100% + 12px);
  background: var(--white); border-radius: var(--r-lg); box-shadow: 0 40px 80px -30px rgba(13, 59, 46, .4);
  border: 1px solid var(--line); padding: 36px 40px 0; overflow: hidden; display: none;
}
.has-mega.is-open .mega { display: block; }
/* Hover bridge from the Treatments link down to the menu, only as wide as the link. */
.has-mega > a { position: relative; }
.has-mega > a::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; }
.mega__grid { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 32px; }
.mega__group .label { margin-bottom: 10px; color: var(--emerald); }
.mega__group ul + .label { margin-top: 24px; }
.mega__group a { display: block; white-space: nowrap; padding: 8px 12px; margin: 0 -12px; border-radius: 10px; text-decoration: none; font-size: 15px; font-weight: 500; }
.mega__group a:hover { background: var(--bone); }
.mega__foot { display: flex; justify-content: space-between; align-items: center; margin: 32px -40px 0; padding: 22px 40px; background: var(--bone); }
.mega__foot > a:first-child { font-weight: 600; }

/* ---------- Glass ---------- */
.glass {
  background: rgba(13, 59, 46, .42); color: var(--bone);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(239, 236, 228, .28);
}
.glass-chip svg { width: 20px; height: 20px; flex: none; color: var(--bone); }
.glass-chip svg [data-color="color-2"] { color: var(--mint); }
.glass-chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 999px;
  background: rgba(13, 59, 46, .5); color: var(--bone); font-size: 14px; font-weight: 600;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(239, 236, 228, .25);
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: 72px 0 24px; }
.hero__top { position: relative; }
.hero__top { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 56px; align-items: end; }
.hero__side { padding-bottom: 8px; }
.hero__cta { display: flex; align-items: center; gap: 28px; margin-top: 36px; flex-wrap: wrap; }

.hero__media { position: relative; margin-top: 56px; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 7.2; background: var(--bone-deep); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 35%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 59, 46, 0) 50%, rgba(13, 59, 46, .55) 100%);
}
.hero__chips { position: absolute; left: 28px; bottom: 28px; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; max-width: 60%; }
.hero__card { position: absolute; right: 28px; bottom: 28px; z-index: 1; width: 300px; padding: 26px 28px; border-radius: var(--r-lg); }
.hero__card-num { font-size: 36px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin-top: 14px; color: var(--mint); }
.hero__card-text { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--bone); }

/* ---------- Hero, variant B: text left, cut-out portrait right ---------- */
.hero--split { padding: 40px 0 72px; overflow-x: clip; }
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; align-items: center; }
.hero-split__copy .display { max-width: 15ch; font-size: clamp(42px, 3.9vw, 56px); }
.hero-split__copy .lead { margin-top: 24px; max-width: 40ch; }
.hero-split__copy .hero__cta { margin-top: 32px; }
.hero-points { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); max-width: 451px; }
.hero-points__item { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.hero-points__item svg { width: 18px; height: 18px; flex: none; color: var(--forest); }
.hero-points__item svg [data-color="color-2"] { color: var(--deep-green); }
.hero-split__visual { position: relative; height: 760px; display: flex; align-items: flex-end; justify-content: center; }
.hero-split__mark {
  position: absolute; left: 50%; top: 44%; width: 124%; max-width: none; height: auto;
  transform: translate(-50%, -50%); opacity: .12; pointer-events: none;
}
.hero-split__floor {
  position: absolute; left: 50%; bottom: 4px; width: 62%; height: 36px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(13, 59, 46, .28), transparent); filter: blur(6px);
}
/* The hero photo now carries its own contact shadows under the chair and boots */
.hero-split__floor { display: none; }
/* Landscape cut-out (armchair and side table): sized by width, anchored right, spilling slightly into the gap on the left */
.hero-split__person { position: relative; flex: none; width: 114%; height: auto; max-width: none; margin-right: 0; filter: contrast(1.04) saturate(1.03); }
.hero-split__visual:has(.hero-split__person) { justify-content: flex-end; }
@media (max-width: 960px) {
  .hero-split .hero-split__visual { height: auto; padding-top: 72px; justify-content: center; }
  .hero-split .hero-split__person { width: 100%; }
  .hero-split .hero-split__card { top: 0; bottom: auto; left: 0; right: auto; width: 210px; }
}
.hero-split__card {
  position: absolute; left: -8px; top: 26%; width: 220px; padding: 20px 22px; border-radius: var(--r-lg);
  background: var(--forest); color: var(--bone); box-shadow: 0 24px 48px -20px rgba(13, 59, 46, .5);
}
.hero-split__card .hero__card-num { margin-top: 10px; }

/* ---------- Your right: statement and figures side by side ---------- */
.rights { position: relative; padding: 80px 0 96px; }
/* Hairline divider above the section, as wide as the navigation bar */
.rights::before { content: ""; position: absolute; top: 0; left: 50%; width: min(100% - var(--edge) * 2, var(--max)); height: 1px; background: rgba(0, 0, 0, .15); transform: translateX(-50%) scaleY(.5); transform-origin: top; }
.rights--plain::before { display: none; }
.rights__grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 72px; row-gap: 20px; align-items: start;
  grid-template-areas: "label ." "title stats" "text stats" "links stats";
}
.rights__main { display: contents; }
.rights__main > .label { grid-area: label; }
.rights__main > .statement { grid-area: title; }
.rights__text { grid-area: text; }
.rights__links { grid-area: links; justify-self: start; }
.rights__stats { grid-area: stats; }
.statement { max-width: 20ch; font-size: clamp(32px, 3vw, 42px); line-height: 1.12; letter-spacing: -0.035em; font-weight: 700; text-wrap: balance; }
.nowrap { white-space: nowrap; }
.pic { display: inline-block; vertical-align: middle; height: .82em; margin: -.12em .08em 0; overflow: hidden; box-shadow: 0 10px 24px -12px rgba(13, 59, 46, .45); }
.pic img { width: 100%; height: 100%; object-fit: cover; }
.pic--flag { width: 1.23em; border-radius: .16em; }
.rights__text { font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 54ch; margin-top: 4px; }
.rights__links { margin-top: 4px; }
.rights__stats { margin: 0; }
.rights__stats > dl { margin: 0; } /* the list sits in a wrapper with the sources line since 9 Nov 2026 */
.rights__stat { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: baseline; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line-strong); }
.rights__stat:first-child { padding-top: 0; }
.stat__num { font-family: var(--font-head); font-size: clamp(32px, 2.8vw, 40px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.sources { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ---------- Sheets (rounded full-width sections) ---------- */
.sheet { margin: 0 16px; border-radius: var(--r-xl); }
.sheet--forest {
  color: var(--bone);
  background:
    radial-gradient(1100px 620px at 88% -10%, rgba(0, 116, 83, .75), transparent 62%),
    radial-gradient(900px 600px at -5% 105%, rgba(159, 233, 191, .12), transparent 60%),
    var(--forest);
}
.sheet--white {
  background:
    radial-gradient(900px 520px at 100% 0%, rgba(159, 233, 191, .35), transparent 60%),
    radial-gradient(700px 480px at 0% 100%, rgba(239, 236, 228, .9), transparent 60%),
    var(--white);
}

/* ---------- How it works ---------- */
.how { position: relative; overflow: hidden; padding: 48px 0 48px; }
.how > .wrap { position: relative; z-index: 1; }
.how__mark {
  position: absolute; z-index: 0; right: 0; top: -140px; width: 560px; height: auto; pointer-events: none;
  transform: translateX(25%);
  opacity: .12; filter: saturate(.8);
}
.how__head { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.how__head .label { margin-bottom: 16px; }
.how__intro { margin-top: 16px; font-size: 16px; color: var(--on-dark); max-width: 44ch; }

.steps { display: grid; gap: 14px; margin-top: 40px; }
.steps__label { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.steps__label .label { color: var(--mint-light); }
.steps__note { font-size: 14px; color: rgba(239, 236, 228, .7); }
.step-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.step-card {
  display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; border-radius: var(--r-lg);
  background: rgba(239, 236, 228, .06); border: 1px solid var(--on-dark-line);
}
/* Cards slide up one after another when their row scrolls into view (set up in main.js) */
.reveal-ready .step-card {
  opacity: 0; transform: translateY(48px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 100ms);
}
.reveal-ready .step-card.is-in { opacity: 1; transform: none; }
.step-card__num {
  font-family: var(--font-head); font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(159, 233, 191, .7); margin-bottom: 16px;
}
.step-card h3 { font-size: 17px; line-height: 1.25; letter-spacing: -0.015em; font-weight: 700; }
.step-card p { font-size: 14px; line-height: 1.5; color: var(--on-dark); }
.steps__row--after .step-card { background: rgba(159, 233, 191, .07); border-color: rgba(159, 233, 191, .24); }
.steps__row--after .step-card__num { color: var(--mint); -webkit-text-stroke: 0; }
.commit-band {
  display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 24px; border-radius: 999px;
  border-radius: 0;
  /* Top and bottom hairlines fade out at both ends, like the fill */
  background:
    linear-gradient(90deg, rgba(159, 233, 191, 0), rgba(159, 233, 191, .45) 30%, rgba(159, 233, 191, .45) 70%, rgba(159, 233, 191, 0)) top / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(159, 233, 191, 0), rgba(159, 233, 191, .45) 30%, rgba(159, 233, 191, .45) 70%, rgba(159, 233, 191, 0)) bottom / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(159, 233, 191, 0), rgba(159, 233, 191, .16) 30%, rgba(159, 233, 191, .16) 70%, rgba(159, 233, 191, 0));
}
.commit-band__icon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--forest); }
.commit-band p { font-size: 15px; color: var(--bone); }
.commit-band strong { font-family: var(--font-head); font-weight: 800; color: var(--mint); margin-right: 4px; }

/* Variant A: light "How it works" with the two phases side by side, steps as readable rows */
.how--phases { padding: 96px 0; overflow: visible; }
/* Subtle frame, as wide as the navigation bar, with the content padded inside */
.phases__frame { padding: 64px 48px 48px; border: 1px solid rgba(13, 59, 46, .12); border-radius: var(--r-xl); }
.phases__head { max-width: 760px; }
.phases__head .label { margin-bottom: 16px; }
.phases__accent { color: var(--emerald); }
.phases__intro { margin-top: 16px; font-size: 17px; color: var(--muted); max-width: 46ch; }
.phases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 48px; align-items: stretch; }
.phase { display: flex; flex-direction: column; padding: 28px 32px 32px; border-radius: var(--r-xl); background: var(--white); }
.phase--after { background: var(--mint-light); }
.phase__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.phase--after .phase__head { border-bottom-color: rgba(13, 59, 46, .16); }
.phase__note { font-size: 14px; color: var(--muted); }
.phase--after .phase__note { color: rgba(13, 59, 46, .8); }
.phase__steps { list-style: none; margin: 0; padding: 0; }
.phase__step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.phase--after .phase__step { border-bottom-color: rgba(13, 59, 46, .16); }
.phase__step:last-child { border-bottom: 0; padding-bottom: 0; }
.phase__num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 15px; background: var(--bone); color: var(--forest); }
.phase--after .phase__num { background: var(--forest); color: var(--mint); }
.phase__step h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; color: var(--forest); padding-top: 9px; }
.phase__step p { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.phase--after .phase__step p { color: rgba(13, 59, 46, .82); }
.phase__commit { display: flex; align-items: center; gap: 14px; margin-top: auto; padding: 16px 20px 16px 16px; border-radius: var(--r); background: var(--forest); }
.phase__steps + .phase__commit { margin-top: 24px; }
.phase__commit-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--forest); }
.phase__commit p { font-size: 15px; line-height: 1.5; color: var(--bone); }
.phase__commit strong { font-family: var(--font-head); font-weight: 800; color: var(--mint); margin-right: 4px; }
.phases__person { display: flex; align-items: center; gap: 20px; margin-top: 16px; padding: 18px 18px 18px 22px; border-radius: 999px; background: var(--white); }
.phases__person-text { flex: 1; color: var(--forest); }
.phases__person-title { font-weight: 700; font-size: 16px; }
.phases__person-text p:not(.phases__person-title) { font-size: 15px; color: var(--muted); }
@media (max-width: 960px) {
  .how--phases { padding: 56px 0; }
  .phases__frame { padding: 32px 16px 16px; }
  .phases { grid-template-columns: 1fr; }
  .phase { padding: 24px 20px; }
  .phase__head { flex-direction: column; gap: 4px; }
  .phases__person { border-radius: 28px; flex-direction: column; align-items: flex-start; }
}

/* Variant B: how it works as one readable vertical timeline */
.how--timeline { padding: 88px 0; overflow: clip; }
.how--timeline .how__mark { top: auto; bottom: -110px; left: 0; right: auto; transform: translateX(-28%); }
/* Aurora background: soft ribbons of brand greens over a near-black forest, with fine grain */
.how--timeline.sheet--forest { background: linear-gradient(180deg, #0b1d17 0%, #0d2a20 55%, #10382a 100%); }
.how__aurora { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.how--timeline::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.how--timeline .how__mark { opacity: .08; }
.how--timeline .tl-step__num { background: #0d241c; }
.how--timeline .tl-steps--after .tl-step__num { background: var(--mint); }
.how-tl { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 96px; align-items: start; }
.how-tl__intro { position: sticky; top: 120px; display: grid; gap: 20px; justify-items: start; }
.how-tl__intro .h1 { margin-top: -4px; }
.how-tl__intro .how__intro { margin-top: 0; }
.how-tl__person {
  display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 14px 20px 14px 14px; border-radius: var(--r);
  background: rgba(239, 236, 228, .07); border: 1px solid rgba(239, 236, 228, .14);
}
.how-tl__person p { font-size: 15px; line-height: 1.5; color: var(--on-dark); }
.how-tl__person strong { display: block; color: var(--bone); font-weight: 700; }
/* Variant B: larger photo with the text underneath */
.how-tl__person { flex-direction: row; align-items: center; gap: 20px; margin-top: 52px; padding: 0 22px 20px 18px; width: 100%; }
.how-tl__person .how-tl__photo { flex: none; }
.how-tl__person p { padding-top: 20px; }
/* The portrait tilts a little and sits over the top edge of the card */
.how-tl__photo {
  display: block; width: 150px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px;
  margin-top: -44px; transform: rotate(-5deg); border: 4px solid var(--white);
  box-shadow: 0 20px 36px -16px rgba(13, 59, 46, .45);
}
.how-tl__person p { font-size: 16px; }
.tl-group { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-left: 76px; padding-bottom: 6px; }
.tl-group .label { color: var(--mint-light); }
.tl-group__note { font-size: 14px; color: rgba(239, 236, 228, .7); }
/* Variant B: the phase label sits in a pill, joined to the note on the right by a hairline that fades out */
.tl-group { align-items: center; }
.tl-group .label { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(239, 236, 228, .22); background: rgba(255, 255, 255, .06); }
.tl-group::after { content: ""; order: 1; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0)); transform: scaleY(.5); }
.tl-group__note { order: 2; }
@media (max-width: 960px) { .tl-group::after { display: none; } }
.tl-steps { position: relative; margin-bottom: 8px; }
.tl-steps::before { content: ""; position: absolute; left: 27px; top: 46px; bottom: 46px; width: 1px; background: rgba(239, 236, 228, .2); }
.tl-step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; padding: 18px 0; }
.tl-step__num {
  position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--mint-light);
  background: var(--forest); border: 1px solid rgba(239, 236, 228, .28);
}
.tl-steps--after .tl-step__num { background: var(--mint); border-color: var(--mint); color: var(--forest); }
.tl-step__body { padding-top: 6px; }
.tl-step h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; color: var(--bone); }
.tl-step p { margin-top: 6px; font-size: 16px; line-height: 1.55; color: rgba(239, 236, 228, .86); max-width: 46ch; }
.tl-commit {
  display: flex; align-items: center; gap: 16px; margin: 10px 0 30px; padding: 14px 20px 14px 18.5px; border-radius: var(--r);
  background: rgba(159, 233, 191, .1); border: 1px solid rgba(159, 233, 191, .32);
}
.tl-commit__icon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--forest); }
.tl-commit p { font-size: 16px; line-height: 1.5; color: var(--bone); }
.tl-commit strong { font-family: var(--font-head); font-weight: 800; color: var(--mint); margin-right: 4px; }
/* Variant B: the rights section fades to white, and the space around the green sheet starts white too */
.page-b .rights { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--white) 100%); }
.how-stage { background: linear-gradient(180deg, var(--white) 0, var(--bone) 280px); }
/* Variant B, light: faded green sheet with dark text for strong contrast */
.how--light { color: var(--forest); background: linear-gradient(180deg, #e4f2e8 0%, #d5eadc 100%); }
.how--light::after { opacity: .06; mix-blend-mode: multiply; }
.how--light .how__mark { opacity: .08; }
.how--light .h1 { color: var(--forest); }
.how--light .how__accent { color: var(--emerald); }
.how--light .how__intro { color: rgba(13, 59, 46, .82); }
.how--light .how-tl__person { background: rgba(255, 255, 255, .72); border-color: rgba(13, 59, 46, .1); }
.how--light .how-tl__person p { color: rgba(13, 59, 46, .82); }
.how--light .how-tl__person strong { color: var(--forest); }
.how--light .tl-group .label { color: var(--emerald); }
.how--light .tl-group__note { color: rgba(13, 59, 46, .78); }
.how--light .tl-group .label { background: var(--white); border-color: rgba(13, 59, 46, .12); }
.how--light .tl-steps::before { background: rgba(13, 59, 46, .22); }
.how--light .tl-step__num { background: var(--white); border: 1.5px solid var(--forest); color: var(--forest); }
.how--light .tl-steps--after .tl-step__num { background: var(--forest); border-color: var(--forest); color: var(--mint); }
.how--light .tl-step h3 { color: var(--forest); }
.how--light .tl-step p { color: rgba(13, 59, 46, .84); }
.how--light .tl-commit { background: var(--forest); border-color: var(--forest); box-shadow: 0 18px 40px -24px rgba(13, 59, 46, .6); }
.how--light .tl-commit p { color: var(--bone); }
.how--light .tl-commit strong { color: var(--mint); }

.reveal-ready .tl-step {
  opacity: 0; transform: translateY(40px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 100ms);
}
.reveal-ready .tl-step.is-in { opacity: 1; transform: none; }

.person-band {
  display: flex; align-items: center; gap: 20px; margin-top: 28px;
  padding: 14px 14px 14px 16px; border-radius: 999px; background: rgba(239, 236, 228, .08); border: 1px solid var(--on-dark-line);
}
.person-band__text { flex: 1; }
.person-band__title { font-weight: 700; font-size: 16px; }
.person-band__text p:not(.person-band__title) { color: var(--on-dark); }
.avatar {
  flex: none; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mint-light); color: var(--forest); font-weight: 800; font-size: 22px; border: 3px solid var(--bone);
}
.avatar--sm { width: 56px; height: 56px; font-size: 18px; border-width: 2px; }
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ---------- Treatments ---------- */
.treat { padding: 136px 0; }
.treat__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.treat__feature { position: sticky; top: 112px; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; }
.treat__feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.treat__feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 59, 46, 0) 30%, rgba(13, 59, 46, .92) 100%); }
.treat__feature figcaption { position: absolute; left: 40px; right: 40px; bottom: 40px; z-index: 1; color: var(--bone); display: grid; gap: 18px; justify-items: start; }
.treat__feature figcaption p:not(.label) { font-size: 15px; color: var(--on-dark); max-width: 30ch; }

.treat__list { border-top: 1px solid var(--line-strong); }
.treat__list a {
  display: grid; grid-template-columns: 160px minmax(0, 1fr) 40px; align-items: center; gap: 24px;
  padding: 16px 20px; border-bottom: 1px solid var(--line-strong);
  text-decoration: none; transition: background-color .25s, border-radius .25s;
}
.treat__float {
  position: fixed; left: 0; top: 0; z-index: 25; width: 200px; aspect-ratio: 4 / 5; pointer-events: none;
  border-radius: var(--r); overflow: hidden; background: var(--forest);
  border: 4px solid var(--white); box-shadow: 0 30px 60px -20px rgba(13, 59, 46, .5);
  opacity: 0; scale: .85; rotate: -4deg; transition: opacity .2s, scale .25s, rotate .25s;
}
.treat__float.is-visible { opacity: 1; scale: 1; rotate: var(--tilt, 0deg); }
.treat__float img { width: 100%; height: 100%; object-fit: cover; }
.treat__area { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--emerald); }
.treat__name { font-size: clamp(19px, 1.6vw, 23px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.treat__go {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--forest); transition: background-color .25s, color .25s, transform .25s;
}
.treat__list a:hover { background: var(--white); border-radius: var(--r); border-bottom-color: transparent; }
.treat__list a:hover .treat__go { background: var(--mint); border-color: var(--mint); transform: rotate(-45deg); }

/* Variant A: heading row, then a tall photo beside the treatment areas, each in a box with an icon */
.treat--areas { padding: 96px 0; }
.treat__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
.treat__head .h2 { margin-top: 14px; }
.treat__intro { margin-top: 12px; font-size: 16px; color: var(--muted); max-width: 46ch; }
.treat__bento { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; }
.treat__photo { position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden; min-height: 100%; }
.treat__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.treat__areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.treat-area { padding: 20px 22px 12px; border-radius: var(--r-lg); background: var(--white); }
.treat-area__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.treat-area__title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.treat-card__icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--mint-light); color: var(--forest); }
.treat-card__icon svg [data-color="color-2"] { color: var(--deep-green); }
.treat-area__list { list-style: none; margin: 0; padding: 0; }
.treat-area__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--forest); font-weight: 600; font-size: 15px; }
.treat-area__list a .i-arrow { flex: none; color: var(--emerald); transition: transform .2s ease; }
.treat-area__list a:hover { color: var(--emerald); }
.treat-area__list a:hover .i-arrow { transform: translateX(3px); }
@media (max-width: 960px) {
  .treat__head { flex-direction: column; align-items: flex-start; }
  .treat__bento { grid-template-columns: 1fr; }
  .treat__photo { aspect-ratio: 16 / 10; min-height: 0; }
}
@media (max-width: 600px) {
  .treat__areas { grid-template-columns: 1fr; }
}

/* ---------- Final call ---------- */
.final { padding: 24px 0 0; }
.final__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }   /* the photo keeps its height when the booking card grows (main.js) */   /* photo narrower, booking wider (client, 5 Nov) */
.contact-card { position: relative; border-radius: var(--r-xl); overflow: hidden; color: var(--bone); display: flex; min-height: 560px; }
.contact-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; }
.contact-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 59, 46, 0) 0%, rgba(13, 59, 46, 0) 45%, rgba(13, 59, 46, .75) 68%, rgba(13, 59, 46, .95) 100%);
}
.contact-card__body { position: relative; z-index: 1; margin-top: auto; padding: 32px; display: grid; gap: 12px; justify-items: start; }
.contact-card .h1 { font-size: clamp(26px, 2.2vw, 32px); color: var(--bone); max-width: 14ch; }
.contact-card__sub { font-size: 15px; color: var(--on-dark); margin-top: -4px; }
.contact-card__ways { list-style: none; margin: 4px 0 0; padding: 14px 0 0; display: flex; flex-wrap: wrap; gap: 12px 24px; width: 100%; border-top: 1px solid rgba(239, 236, 228, .2); }
/* The message and chat options share the first line when they fit; the e-mail always sits below */
.contact-card__ways li { white-space: nowrap; }
.contact-card__ways li:last-child { flex-basis: 100%; }
@media (max-width: 600px) { .contact-card__ways li { white-space: normal; flex-basis: 100%; } }
.contact-card__ways li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--on-dark); }
.contact-card__ways svg { width: 18px; height: 18px; flex: none; color: var(--mint); }
.contact-card__ways a { color: var(--bone); font-weight: 600; text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.contact-card__ways a:hover { color: var(--mint); }
.arrow-link--light { color: var(--bone); text-decoration-color: rgba(159, 233, 191, .5); }
.arrow-link--light:hover { text-decoration-color: var(--mint); }
.person-chip { display: inline-flex; align-items: center; gap: 14px; padding: 6px 20px 6px 6px; border-radius: 999px; }
.person-chip p { display: grid; line-height: 1.25; font-size: 14px; }
.person-chip span { color: var(--on-dark); }

.way--booking { background: var(--white); border-radius: var(--r-xl); padding: 40px; display: grid; gap: 24px; }
.way__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.way__title { display: grid; gap: 8px; justify-items: start; }
.way__head .person-chip { flex: none; background: var(--bone); }
.way__head .person-chip span { color: var(--muted); }
.way__head .h3 { font-size: 22px; }

/* Video meeting or phone call: one form, the words follow the choice */
.mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode {
  position: relative; display: grid; align-content: start; gap: 2px; padding: 14px 16px 14px 46px; border-radius: var(--r-sm);
  background: var(--bone); border: 1.5px solid transparent; cursor: pointer;
}
.mode input { position: absolute; left: 16px; top: 17px; width: 18px; height: 18px; margin: 0; accent-color: var(--forest); }
.mode__title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.mode__title svg { width: 18px; height: 18px; flex: none; color: var(--forest); }
.mode__title svg [data-color="color-2"] { color: var(--deep-green); }
.mode__sub { font-size: 13px; line-height: 1.4; color: var(--muted); }
.mode:hover { border-color: rgba(13, 59, 46, .3); }
.mode:has(input:checked) { background: var(--white); border-color: var(--forest); box-shadow: 0 0 0 3px rgba(159, 233, 191, .25); }
.mode:has(input:focus-visible) { outline: 2px solid var(--emerald); outline-offset: 2px; }

.booking-steps { display: flex; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.booking-steps li { font-size: 14px; font-weight: 600; color: rgba(13, 59, 46, .5); position: relative; }
.booking-steps li.is-active { color: var(--forest); }
.booking-steps li.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -15px; height: 2px; background: var(--forest); }
.booking-steps li.is-done { color: var(--emerald); }

.booking { display: grid; gap: 16px; }
.booking__step { border: 0; margin: 0; padding: 0; display: grid; gap: 18px; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label, .field-label { font-weight: 600; font-size: 14px; }
.field input, .field select, .phone-input select {
  width: 100%; min-height: 48px; padding: 0 16px; border-radius: var(--r-sm);
  border: 1.5px solid transparent; background: var(--bone); font-size: 16px;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--forest); }
.field select, .phone-input select {
  appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background: var(--bone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230d3b2e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.phone-input { display: grid; grid-template-columns: 200px 1fr; background: var(--bone); border-radius: var(--r-sm); border: 1.5px solid transparent; }
.phone-input:focus-within { border-color: var(--forest); }
.phone-input select, .field .phone-input input { border: 0; border-radius: 0; background-color: transparent; min-height: 45px; }
.phone-input select { border-right: 1px solid var(--line); }
.phone-input select:focus, .field .phone-input input:focus { outline: none; }
.field__help { font-size: 13px; color: var(--muted); line-height: 1.45; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #b3261e; }
.form-error, .field__error { color: #b3261e; font-weight: 600; font-size: 16px; }
.field__error { margin: 0; }
.field-row { align-items: start; }
.field { align-content: start; }
.phone-input:has(input[aria-invalid="true"]) { border-color: #b3261e; }
.field__error[hidden] { display: none; }

.summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 15px; }
.days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
.slots .chip { min-height: 40px; font-size: 14px; }
.chip { min-height: 46px; border-radius: var(--r-sm); border: 1.5px solid transparent; background: var(--bone); font-weight: 600; font-size: 15px; cursor: pointer; line-height: 1.15; padding: 6px 4px; }
.chip small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); }
.chip:hover { border-color: var(--forest); }
.chip[aria-checked="true"] { background: var(--forest); color: var(--bone); border-color: var(--forest); }
.chip[aria-checked="true"] small { color: var(--mint-light); }
.choice { display: flex; gap: 12px; flex-wrap: wrap; }
.choice label { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; font-weight: 500; margin-right: 12px; }
.choice input { width: 20px; height: 20px; accent-color: var(--forest); }
/* "Who joins" on one line with its choices; the family field is one input (label for screen readers),
   so step 2 is about as tall as step 1 and the card has less empty space (client, 5 Nov). */
.field--who { grid-template-columns: auto 1fr; align-items: center; column-gap: 20px; row-gap: 4px; }
.field--who .field-label { margin: 0; }
.field--who .choice label { min-height: 40px; }
.field--who .family-field { grid-column: 1 / -1; }
@media (max-width: 600px) { .field--who { grid-template-columns: 1fr; } }

.booking__done { gap: 12px; padding: 8px 0; }
.done-check { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--forest); }
.privacy-line { font-size: 13px; color: var(--muted); }
.privacy-line a { color: var(--emerald); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq { padding: 136px 0; }
.faq__head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 48px; }
.faq__head .label { margin-bottom: 18px; }
.qa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.qa__item { background: var(--white); border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.qa__item h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.qa__item p { font-size: 15px; line-height: 1.6; color: var(--muted); }
.qa__item--mint { background: var(--mint-light); }
.qa__item--mint p { color: var(--forest); }
.qa__item--help {
  justify-content: flex-end; gap: 4px; text-decoration: none; color: var(--bone);
  background: radial-gradient(420px 260px at 100% 0%, #2c322f, transparent 72%), linear-gradient(160deg, #111715 0%, #181e1c 100%);
}
.qa__item--help p { color: var(--on-dark); font-size: 15px; }
/* Chat icon pinned to the top of the card; the text stays at the bottom */
.qa__help-icon { flex: none; display: block; margin-bottom: auto; color: var(--white); }
.qa__help-icon svg { display: block; width: 40px; height: 40px; }
.qa__help-number { font-family: var(--font-head); font-size: 24px; font-weight: 700; letter-spacing: -0.03em; color: var(--white); }
.qa__help-hours { font-size: 13px; color: var(--on-dark); }
/* Oversized, very faint chat symbol cropped by the card's bottom-right corner */
.qa__item--help { position: relative; overflow: hidden; isolation: isolate; }
.qa__help-mark { position: absolute; right: -56px; bottom: -72px; width: 260px; height: 260px; color: var(--white); opacity: .06; transform: rotate(-8deg); z-index: -1; pointer-events: none; }

/* Variant A: FAQ as an intro column (with the help card) beside an accordion */
.faq-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.faq-split__intro { position: sticky; top: 112px; display: grid; gap: 16px; justify-items: start; }
.faq-split__intro .label { margin-bottom: 2px; }
.faq-split__lead { font-size: 16px; color: var(--muted); max-width: 38ch; }
.faq-split__help { width: 100%; min-height: 220px; margin-top: 24px; }
/* Variant A: the help card is outlined like the how-it-works frame, not filled */
.faq-split__help { background: transparent; border: 1px solid rgba(13, 59, 46, .12); color: var(--forest); }
.faq-split__help p, .faq-split__help .qa__help-hours { color: var(--muted); }
.faq-split__help .qa__help-number, .faq-split__help .qa__help-icon { color: var(--forest); }
.faq-split__help .qa__help-mark { color: var(--forest); opacity: .05; }
.faq-split__help:hover { border-color: rgba(13, 59, 46, .3); }
.faq-acc { display: grid; gap: 10px; }
.faq-acc__item { border-radius: var(--r-lg); background: var(--white); transition: background .2s; }
.faq-acc__item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; cursor: pointer; list-style: none; }
.faq-acc__item summary::-webkit-details-marker { display: none; }
.faq-acc__item summary:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; border-radius: var(--r-lg); }
.faq-acc__item h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.faq-acc__icon { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--bone); transition: background .2s, transform .25s; }
.faq-acc__icon::before, .faq-acc__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: var(--forest); }
.faq-acc__icon::after { transform: rotate(90deg); }
.faq-acc__item[open] .faq-acc__icon { background: var(--mint); transform: rotate(45deg); }
.faq-acc__item summary:hover .faq-acc__icon { background: var(--mint-light); }
.faq-acc__item[open] summary:hover .faq-acc__icon { background: var(--mint); }
.faq-acc__item p { padding: 0 92px 26px 28px; margin-top: -6px; font-size: 15px; line-height: 1.65; color: var(--muted); }
@media (max-width: 960px) {
  .faq-split { grid-template-columns: 1fr; gap: 32px; }
  .faq-split__intro { position: static; }
  .faq-acc__item summary { padding: 20px; }
  .faq-acc__item p { padding: 0 20px 22px; }
}

/* ---------- Footer ---------- */
.footer { margin-bottom: 16px; padding: 88px 0 0; overflow: hidden; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr 1fr; gap: 48px; padding-bottom: 64px; border-bottom: 1px solid var(--on-dark-line); }
.footer address { font-style: normal; margin-top: 20px; line-height: 1.8; color: var(--on-dark); }
.footer address a { color: var(--bone); font-weight: 600; }
.footer__col .label { margin-bottom: 18px; color: var(--mint-light); }
.footer__col li + li { margin-top: 8px; }
.footer__col a { text-decoration: none; font-weight: 500; color: var(--bone); }
.footer__col a:hover { text-decoration: underline; text-underline-offset: 4px; color: var(--mint); }
/* Flags sit on a small white tile so they read on the dark footer */
.footer__flag { display: inline-flex; align-items: center; justify-content: center; padding: 2px 4px; margin-right: 6px; border-radius: 5px; background: var(--white); line-height: 1; font-size: 15px; vertical-align: -1px; }
.footer__sub { margin-top: 32px; }
.footer__mark {
  display: flex; align-items: center; gap: 2.2vw; margin: 40px 0 -1.6vw; text-decoration: none;
  font-weight: 800; font-size: min(16.2vw, 236px); letter-spacing: -0.05em; line-height: 1;
}
.footer__mark img { width: min(15.4vw, 224px); height: auto; }
.footer__mark .logo__able { color: var(--bone); }
.footer__mark .logo__ment { color: var(--mint); }

/* ---------- Cookie banner ---------- */
.cookie { position: fixed; left: 0; right: 0; bottom: 20px; z-index: 50; padding: 0 var(--edge); }
.cookie__inner {
  max-width: 1080px; margin: 0 auto; display: flex; align-items: center; gap: 32px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 20px 20px 28px; box-shadow: 0 30px 60px -20px rgba(13, 59, 46, .4);
}
.cookie__inner p { flex: 1; font-size: 14px; }
.cookie__inner p a { color: var(--emerald); font-weight: 600; }
.cookie__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.cookie__actions .link-btn { padding: 0 10px; }

/* Variant A: outlined symbol behind the top of the page, starting under the navigation */
.page-a { position: relative; }
.page-mark-wrap { position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: 1400px; overflow: hidden; pointer-events: none; }
.page-mark { position: absolute; top: -280px; left: 50%; width: 1960px; max-width: none; height: auto; transform: translateX(-50%);
  /* Fades out completely towards the bottom of the symbol */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 100%); }
@media (max-width: 960px) { .page-mark { width: 1140px; top: -170px; } }

/* Variant A: one rhythm between sections, 120px of space from one block to the next */
.page-a .rights { padding: 24px 0 60px; }   /* less space under the hero (client, 5 Nov) */
.page-a .how--phases { padding: 60px 0; }
.page-a .treat--areas { padding: 60px 0; }
.page-a .final { padding-top: 60px; }
.page-a .faq { padding: 120px 0 60px; }
.page-a .footer { margin-top: 60px; }
@media (max-width: 960px) {
  .page-a .rights { padding: 64px 0 40px; }
  .page-a .how--phases, .page-a .treat--areas { padding: 40px 0; }
  .page-a .final { padding-top: 40px; }
  .page-a .faq { padding: 80px 0 40px; }
  .page-a .footer { margin-top: 40px; }
}

/* ================= Treatment page (hip replacement): client copy, homepage B look ================= */
/* First screen: the homepage split hero with a portrait cut-out */
.tp-hero .display { max-width: 13ch; }
.tp-hero .display em { white-space: normal; }
.hero-split .display em { white-space: normal; }   /* a long emphasis (International: "covered by your country's public health service") wraps instead of running under the photo */
.tp-scheme { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 17px; font-weight: 600; }
.tp-eu { width: 24px; height: 16px; flex: none; border-radius: 2px; }
.tp-hero .lead { margin-top: 18px; }
.tp-value { margin-top: 16px; max-width: 46ch; font-size: 18px; line-height: 1.55; font-weight: 600; padding-left: 16px; border-left: 3px solid var(--sage); }
.tp-free { font-size: 15px; line-height: 1.5; color: var(--muted); }
.tp-free--hero { margin-top: 14px; }
.page-treatment .hero-split__visual { justify-content: center; }
.page-treatment .hero-split__person.tp-person { width: auto; height: 100%; }
/* A wider, crouching subject: size by width instead of height */
.page-treatment .hero-split__person.tp-person--wide { width: 100%; height: auto; }
.tp-live { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(159, 233, 191, .22); vertical-align: 1px; }
.tp-next { margin-top: 14px; font-size: 15px; font-weight: 600; }
.tp-next .tp-live { background: var(--emerald); box-shadow: 0 0 0 4px rgba(0, 116, 83, .14); }
/* In the hero it sits beside the button */
.tp-next--hero { margin-top: 0; font-size: 16px; }

/* Trust line and the wait at home: two cards, the right since 2011 on forest green */
.tp-trust { padding: 40px 0 60px; }
.tp-trust__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 16px; align-items: stretch; }
.tp-trust__right { position: relative; overflow: hidden; display: grid; gap: 14px; align-content: start; justify-items: start; padding: 36px; border-radius: var(--r-xl); color: var(--bone);
  background: radial-gradient(420px 260px at 100% 0%, rgba(0, 116, 83, .85), transparent 70%), var(--forest); }
/* The EU circle of stars as a faint white watermark, half outside the card on the right */
.tp-trust__stars { position: absolute; right: -170px; top: 50%; width: 340px; height: 340px; transform: translateY(-50%); color: var(--white); opacity: .07; pointer-events: none; }
.tp-trust__right > :not(.tp-trust__stars) { position: relative; }
.tp-trust__law { font-family: var(--font-head); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.tp-trust__claims { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; color: var(--on-dark); font-size: 16px; }
.tp-trust__claims .stat__num { color: var(--mint); font-size: 48px; }
.tp-trust__right .arrow-link { color: var(--bone); text-decoration-color: rgba(159, 233, 191, .6); }
.tp-trust__wait { padding: 36px 40px; border-radius: var(--r-xl); background: var(--white); display: grid; align-content: center; gap: 14px; }
.tp-trust__text { font-size: 22px; line-height: 1.5; letter-spacing: -0.01em; }
.tp-mark { padding: 0 6px; border-radius: 6px; background: var(--mint-light); color: var(--forest); font-weight: 700; }
.tp-source { font-size: 13px; color: var(--muted); }

/* Step by step: the homepage timeline sheet, tags as pills */
.tp-good { width: 100%; max-width: 460px; padding: 24px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .78); border: 1px solid rgba(13, 59, 46, .1); }
.tp-good__title { font-family: var(--font-head); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.tp-ticks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.tp-ticks li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; font-size: 16px; line-height: 1.5; }
.tp-tick { width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--mint-light); color: var(--forest); }
.tp-ticks--dark li { color: var(--bone); }
.tp-ticks--dark .tp-tick { background: var(--mint); }
.tp-pill { display: inline-block; margin: 0 0 8px !important; padding: 4px 10px; border-radius: 999px; font-size: 13px !important; line-height: 1.4 !important; font-weight: 600; color: var(--forest) !important; background: rgba(255, 255, 255, .8); border: 1px solid rgba(13, 59, 46, .12); }

/* Steps, horizontal: four cards in a row on the light sheet, icons joined by a line */
/* White behind the steps sheet: the cream fades to white just before it and back to cream after it */
.page-treatment .tp-trust { background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(100% - 60px), var(--white) 100%); }
.page-treatment .how-stage { background: var(--white); }
.page-treatment .tp-cost { background: linear-gradient(180deg, var(--white) 0, rgba(255, 255, 255, 0) 200px); }
.tp-hsteps-sheet { padding: 88px 0 72px; overflow: clip; }
.tp-hsteps__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 48px; }
.tp-hsteps__head .label { margin-bottom: 16px; }
.tp-hsteps__head .h1 { max-width: 16ch; }
.tp-hsteps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tp-hstep { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .82); border: 1px solid rgba(13, 59, 46, .08); backdrop-filter: blur(6px); }
.tp-hstep__icon { position: relative; width: 64px; height: 64px; margin-bottom: 22px; border-radius: 20px; display: grid; place-items: center; background: var(--forest); color: var(--white); }
.tp-hstep__icon svg [data-color="color-2"] { color: var(--white); }
.tp-hstep__num { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-size: 13px; font-weight: 800; color: var(--forest); background: var(--mint); box-shadow: 0 0 0 3px #fff; }
.tp-hstep h3 { margin-top: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--forest); }
.tp-hstep p { margin-top: 16px; font-size: 15px; line-height: 1.55; color: rgba(13, 59, 46, .84); }
/* When this step happens: right under the title, with a divider before the description */
.tp-hstep .tp-hstep__when { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: var(--muted); }
.tp-hstep__when svg { flex: none; margin-top: 2px; color: var(--emerald); }
.tp-hsteps-sheet .tp-good { max-width: none; margin-top: 16px; display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 24px; align-items: start; }
.tp-hsteps-sheet .tp-good .tp-ticks { margin-top: 0; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 1100px) { .tp-hsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .tp-hsteps-sheet { padding: 56px 0 48px; }
  .tp-hsteps__head { flex-direction: column; align-items: flex-start; }
  .tp-hsteps { grid-template-columns: 1fr; }
  .tp-hsteps-sheet .tp-good, .tp-hsteps-sheet .tp-good .tp-ticks { grid-template-columns: 1fr; gap: 14px; }
}

/* What it costs you: three cards that read as a flow, joined by arrows */
.tp-cost { padding: 40px 0 60px; }   /* less space under the steps (client, 5 Nov) */
.tp-cost__head { margin-bottom: 40px; }
.tp-cost__head .statement { margin-top: 14px; max-width: 18ch; }
.tp-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; counter-reset: flow; }
.tp-flow__card { position: relative; padding: 32px; border-radius: var(--r-xl); background: var(--white); }
.tp-flow__card:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -32px; width: 24px; height: 24px; transform: translateY(-50%);
  background: no-repeat center / 24px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23007453' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tp-flow__card:last-child { background: var(--forest); color: var(--bone); }
.tp-flow__icon { width: 52px; height: 52px; margin-bottom: 22px; border-radius: 16px; display: grid; place-items: center; background: var(--mint-light); color: var(--forest); }
.tp-flow__icon svg [data-color="color-2"] { color: var(--deep-green); }
.tp-flow__card:last-child .tp-flow__icon { background: var(--mint); }
.tp-flow__card h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.tp-flow__card p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.tp-flow__card:last-child p { color: var(--on-dark); }
.tp-cost__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; margin-top: 40px; align-items: start; }
.tp-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: center; padding: 24px; border-radius: var(--r-lg); border: 1px solid rgba(13, 59, 46, .12); font-size: 15px; line-height: 1.6; color: var(--muted); }
.tp-note__icon { display: flex; color: var(--emerald); }
.tp-detail h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.tp-detail p { margin: 12px 0 18px; font-size: 16px; line-height: 1.65; color: var(--muted); }

/* Booking: the homepage pair of cards, with Kaare on the left */
.page-treatment .tp-book { padding-top: 60px; }
.tp-kaare .contact-card__bg { object-position: 50% 20%; }
.tp-kaare .h1 { max-width: 18ch; }
.tp-kaare .contact-card__sub { margin-top: 2px; }
.tp-kaare .tp-ticks { margin: 6px 0 4px; }
.tp-kaare .contact-card__ways a { color: var(--bone); }
.locked-field { position: relative; }
.locked-field input[readonly] { padding-right: 90px; color: var(--forest); font-weight: 600; background: rgba(13, 59, 46, .06); }
.locked-field .link-btn { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
.way--booking .tp-free { margin-top: 4px; }

/* About this treatment: the illustration beside the explanation */
.tp-about { padding: 120px 0 60px; }
/* Framed box: hairline stroke, 0.5px at 15% black */
.tp-about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 72px; align-items: center; padding: 24px 64px 24px 24px; border: .5px solid rgba(0, 0, 0, .15); border-radius: var(--r-xl); }
.tp-about__img { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 5 / 4; background: var(--forest); }
.tp-about__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.tp-about__text .statement { margin-top: 14px; }
.tp-about__text p:not(.label) { margin-top: 22px; font-size: 18px; line-height: 1.65; color: var(--muted); max-width: 56ch; }

/* Questions: all answers open, as cards in three columns */
.page-treatment .tp-faq { padding: 60px 0 120px; }

/* Final button: text on the left, a booking card on the right, on the light aurora sheet */
.tp-final { padding: 0 0 16px; }
.tp-final__sheet { position: relative; overflow: hidden; padding: 64px 0; color: var(--forest); background: linear-gradient(180deg, #e4f2e8 0%, #d5eadc 100%); }
.tp-final__sheet .how__aurora { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tp-final__mark { position: absolute; right: -180px; top: 50%; width: 980px; max-width: none; transform: translateY(-50%); color: rgba(13, 59, 46, .18); pointer-events: none; }
.tp-final__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 48px; align-items: center; }
.tp-final__copy .label { margin-bottom: 18px; }
.tp-final .h2 { color: var(--forest); font-size: clamp(34px, 3.4vw, 48px); line-height: 1.06; letter-spacing: -0.03em; }
.tp-final .h2 em { font-style: normal; color: var(--emerald); }
.tp-final__text { margin-top: 16px; max-width: 34ch; font-size: 20px; line-height: 1.5; color: var(--muted); }
/* Desktop: who/when on the left, the buttons in a column on the right */
.tp-final__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who btn" "who small"; column-gap: 28px; align-items: center; justify-self: stretch; width: 100%; padding: 32px; border-radius: var(--r-xl); background: rgba(255, 255, 255, .86); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 40px 80px -40px rgba(13, 59, 46, .45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.tp-final__who { grid-area: who; align-self: stretch; display: flex; align-items: center; gap: 14px; padding-right: 28px; border-right: 1px solid var(--line); }
.tp-final__card > .btn { grid-area: btn; width: auto; align-self: end; }
.tp-final__who p { display: grid; font-size: 14px; line-height: 1.4; color: var(--muted); }
.tp-final__who p .tp-live { position: absolute; }
.tp-final__who strong { font-size: 16px; color: var(--forest); padding-left: 18px; position: relative; }
.tp-final__who strong::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 4px rgba(0, 116, 83, .14); }
.tp-final__who .tp-live { display: none; }
.tp-final__small { grid-area: small; align-self: start; margin-top: 12px; text-align: center; font-size: 15px; color: var(--muted); }
.tp-final__small a { color: var(--forest); font-weight: 600; text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
/* Below 1200px the card is too narrow for side-by-side, so it stacks again */
@media (max-width: 1200px) {
  .tp-final__card { grid-template-columns: 1fr; grid-template-areas: "who" "btn" "small"; }
  .tp-final__who { padding: 0 0 20px; margin-bottom: 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .tp-final__card > .btn { width: 100%; }
}
@media (max-width: 960px) {
  .tp-final__sheet { padding: 64px 0; }
  .tp-final__grid { grid-template-columns: 1fr; gap: 32px; }
  .tp-final__card { justify-self: stretch; max-width: none; padding: 24px; transform: none; }
  .tp-final__mark { width: 640px; right: -260px; top: auto; bottom: -120px; transform: none; }
}
.page-treatment .footer { margin-top: 0; }

@media (max-width: 960px) {
  .tp-trust__grid, .tp-cost__foot, .tp-about__grid { grid-template-columns: 1fr; }
  .tp-flow { grid-template-columns: 1fr; gap: 28px; }
  .tp-flow__card:not(:last-child)::after { top: auto; bottom: -26px; right: 50%; transform: translateX(50%) rotate(90deg); }
  .tp-cost, .tp-about { padding: 80px 0 40px; }
  .tp-about__grid { gap: 28px; padding: 16px 16px 28px; }
  .tp-about__text { padding: 0 8px; }
  .tp-trust__right, .tp-trust__wait { padding: 24px; }
  .tp-trust__text { font-size: 19px; }
  .tp-final__sheet { padding: 64px 0; }
  .page-treatment .hero-split .hero-split__person.tp-person { width: auto; height: 440px; margin: 0 auto; }
  .page-treatment .hero-split .hero-split__person.tp-person--wide { width: 100%; height: auto; }
  .page-treatment .hero-split .hero-split__visual { justify-content: center; padding-top: 24px; }
  .contact-card.tp-kaare { min-height: 820px; }
  .contact-card.tp-kaare .contact-card__bg { object-position: 50% 15%; height: 50%; }
  .contact-card.tp-kaare::after { background: linear-gradient(180deg, rgba(13, 59, 46, 0) 30%, rgba(13, 59, 46, .96) 58%, #0d3b2e 100%); }
}

/* ---------- Phones: the one button stays within reach ---------- */
.phone-bar { display: none; }
@media (max-width: 960px) {
  .phone-bar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(239, 236, 228, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  }
  body { padding-bottom: 72px; }
}

/* ---------- Narrower desktop ---------- */
@media (max-width: 1280px) {
  :root { --edge: 24px; }
  .nav { gap: 12px; padding-left: 22px; }
  .nav__list > li > a { padding: 0 10px; font-size: 14px; }
}

/* ============ HOW IT WORKS PAGE ============ */
.hw-hero { padding: 24px 0 40px; overflow-x: clip; }
.hw-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.hw-hero .display { margin-top: 0; color: var(--forest); }
.hw-lead { margin-top: 24px; max-width: 54ch; font-size: 20px; line-height: 1.6; color: var(--muted); }
.hw-lead--strong { margin-top: 14px; font-weight: 600; color: var(--forest); }
/* Cutout person in front of the faint brand symbol, as on the homepage */
.hw-hero__img { position: relative; margin: 0; display: grid; place-items: end center; }
.hw-hero__person { position: relative; width: 100%; height: auto; filter: contrast(1.04) saturate(1.03); }
/* The three parts at a glance; each row jumps to its part of the timeline */

/* The eight steps as a timeline in the style of an events list: label, dotted rail with hollow dots, white card */
.tl2-section { padding: 24px 0 64px; }
.tl2__wrap { max-width: 1160px; }
.tl2 { position: relative; list-style: none; margin: 0; padding: 0; }
/* Green progress line over the dotted rail; its top and height are set by the script as you scroll */
.tl2::after { content: ""; position: absolute; z-index: 0; left: 223px; top: var(--fill-top, 0); width: 2px; height: var(--fill-h, 0); border-radius: 2px; background: var(--emerald); pointer-events: none; }
.tl2__row { position: relative; display: grid; grid-template-columns: 180px 40px minmax(0, 1fr); column-gap: 24px; padding-bottom: 40px; scroll-margin-top: 120px; }
.tl2__row:last-child { padding-bottom: 0; }
.tl2__row::before { content: ""; position: absolute; left: calc(180px + 24px + 19px); top: 22px; bottom: -18px; border-left: 1.5px dashed rgba(13, 59, 46, .2); }
.tl2__row:last-child::before { display: none; }
.tl2__when { display: grid; align-content: start; gap: 2px; padding-top: 14px; }
.tl2__when strong { font-family: var(--font-head); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--forest); }
.tl2__when span { font-size: 17px; color: var(--muted); }
.tl2__dot { position: relative; z-index: 1; justify-self: center; width: 16px; height: 16px; margin-top: 20px; border-radius: 50%; background: var(--bone); border: 1.5px solid rgba(13, 59, 46, .35); }
.tl2__dot svg { display: none; }
/* A step you have scrolled past is checked */
.tl2__row.is-done .tl2__dot:not(.tl2__dot--commit) { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 16px; background: var(--emerald); border-color: var(--emerald); color: var(--white); transition: background .3s, width .2s, height .2s; }
.tl2__row.is-done .tl2__dot svg, .tl2__dot--commit svg { display: block; }
.tl2__row.is-done .tl2__dot:not(.tl2__dot--commit) svg { width: 13px; height: 13px; }
.tl2__card { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: start; padding: 22px 22px 22px 28px; border-radius: var(--r-lg); background: var(--white); box-shadow: 0 1px 2px rgba(13, 59, 46, .04), 0 12px 32px -20px rgba(13, 59, 46, .25); }
.tl2__text { padding-top: 6px; }
.tl2__sum { margin-top: 10px; max-width: 46ch; font-size: 19px; line-height: 1.45; color: var(--forest); }
.tl2__card h3 { margin-top: 0; font-size: 28px; line-height: 1.15; letter-spacing: -0.025em; color: var(--forest); }
.tl2__meta { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.tl2__meta li { display: flex; align-items: center; gap: 10px; font-size: 17px; color: var(--muted); }
.tl2__meta svg { flex: none; width: 18px; height: 18px; color: rgba(13, 59, 46, .5); }
.tl2__more { margin-top: 18px; }
.tl2__more summary { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 12px; background: var(--bone); color: var(--forest); font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; transition: background .2s; }
.tl2__more summary::-webkit-details-marker { display: none; }
.tl2__more summary:hover { background: #e4f2e8; }
.tl2__more summary:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
.tl2__more-icon { display: grid; place-items: center; transition: transform .25s; }
.tl2__more[open] .tl2__more-icon { transform: rotate(45deg); }
.tl2__more-close, .tl2__more[open] .tl2__more-open { display: none; }
.tl2__more[open] .tl2__more-close { display: inline; }
.tl2__paras { display: grid; gap: 12px; margin-top: 18px; }
.tl2__paras p { max-width: 62ch; font-size: 17px; line-height: 1.65; color: var(--muted); }
.tl2__img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; }
/* The commitment point */
.tl2__dot--commit { display: grid; place-items: center; width: 40px; height: 40px; margin-top: 8px; background: var(--forest); border: 0; color: var(--mint); }
.tl2__dot--commit svg { width: 18px; height: 18px; }
.tl2__card--commit { display: block; padding: 26px 28px; background: var(--forest); color: var(--bone); box-shadow: none; }
.tl2__commit-title { font-family: var(--font-head); font-size: 26px; font-weight: 800; letter-spacing: -0.025em; color: var(--mint); }
.tl2__card--commit p:not(.tl2__commit-title) { margin-top: 6px; max-width: 64ch; font-size: 17px; line-height: 1.55; color: var(--on-dark); }

/* One person band */
.hw-band { padding: 32px 0 0; }
.hw-band__card { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: center; padding: 24px 64px 24px 24px; border-radius: var(--r-xl); background: var(--white); color: var(--forest); border: 1px solid var(--line); }
.hw-band__photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); }
.hw-band__text .h2 { margin-top: 14px; color: var(--forest); max-width: 20ch; }
.hw-band__text p:not(.label) { margin-top: 18px; max-width: 60ch; font-size: 20px; line-height: 1.6; color: var(--muted); }

/* The money: three-step flow, then what is not paid and how people bridge the wait */
.hw-money { padding: 96px 0; scroll-margin-top: 100px; }
.hw-money__head { margin-bottom: 40px; }
.hw-money .statement { margin-top: 14px; }
.hw-money__step { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--emerald); margin-bottom: 8px; }
/* Money flow: cards joined by large arrow badges */
.mflow { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr) 88px minmax(0, 1fr); align-items: stretch; }
.mflow__card { position: relative; display: flex; flex-direction: column; padding: 32px; border-radius: var(--r-xl); background: var(--white); color: var(--forest); box-shadow: 0 1px 2px rgba(13, 59, 46, .04), 0 16px 40px -28px rgba(13, 59, 46, .35); }
.mflow__card .tp-flow__icon { margin-bottom: 22px; }
.mflow__card h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.mflow__card > p:not(.hw-money__step):not(.mflow__chip) { margin-top: 10px; font-size: 17px; line-height: 1.6; color: var(--muted); }
.mflow__card--dark { background: var(--forest); color: var(--bone); }
.mflow__card--dark .tp-flow__icon { background: var(--mint); }
.mflow__card--dark .hw-money__step { color: var(--mint); }
.mflow__card--dark > p:not(.hw-money__step):not(.mflow__chip) { color: var(--on-dark); }
.mflow__chip { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--bone); font-size: 15px; font-weight: 600; color: var(--forest); }
.mflow__card > .mflow__chip { margin-top: auto; }
.mflow__card > p:nth-last-child(2) { margin-bottom: 22px; }
.mflow__chip svg { color: var(--emerald); }
.mflow__chip > svg { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: var(--white); }
.mflow__chip b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--forest); color: var(--mint); font-size: 13px; }
.mflow__chip i { display: inline-flex; font-style: normal; }
.mflow__chip--in { background: var(--mint); color: var(--forest); }
.mflow__chip--in svg { color: var(--forest); }
.mflow__arrow { position: relative; z-index: 1; display: grid; place-items: center; }
.mflow__arrow span { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--mint-light); color: var(--forest); }
.mflow__arrow:nth-child(4) span { background: var(--forest); color: var(--mint); }
.hw-money__more { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.4fr); gap: 16px; margin-top: 40px; }
.hw-money__tile { padding: 32px; border-radius: var(--r-xl); background: var(--white); border: 1px solid var(--line); }
.hw-money__tile h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--forest); }
.hw-money__tile p { margin-top: 10px; font-size: 17px; line-height: 1.6; color: var(--muted); }
.hw-money__tile .tp-ticks { margin-top: 16px; }
.hw-money__tile--mint { background: var(--mint-light); border-color: var(--mint-light); }
.hw-money__tile--mint p:not(.hw-money__big) { color: var(--forest); }
.hw-money__big { margin: 0 0 6px !important; font-family: var(--font-head); font-size: 64px !important; font-weight: 800; line-height: 1 !important; letter-spacing: -0.04em; color: var(--forest) !important; }

@media (max-width: 1100px) and (min-width: 961px) {
  .tl2__row { grid-template-columns: 140px 40px minmax(0, 1fr); }
  .tl2__row::before { left: calc(140px + 24px + 19px); }
  .tl2::after { left: 183px; }
  .tl2__card { grid-template-columns: minmax(0, 1fr) 200px; }
}
@media (max-width: 960px) {
  .hw-hero { padding: 16px 0 32px; }
  .hw-hero__grid, .hw-money__grid { grid-template-columns: 1fr; gap: 32px; }
  .hw-lead { font-size: 18px; }
  /* Phones: label above the card, rail on the left; images are dropped, not shrunk */
  .tl2-section { padding: 8px 0 40px; }
  .tl2__row { grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; padding-bottom: 28px; }
  .tl2__row::before { left: 11px; top: 10px; }
  .tl2::after { left: 11px; }
  .tl2__row.is-done .tl2__dot:not(.tl2__dot--commit) { width: 20px; height: 20px; margin-top: 3px; }
  .tl2__dot { grid-row: 1; grid-column: 1; margin-top: 6px; width: 14px; height: 14px; }
  .tl2__when { grid-row: 1; grid-column: 2; display: flex; align-items: baseline; gap: 8px; padding-top: 0; }
  .tl2__when strong { font-size: 19px; }
  .tl2__when span { font-size: 15px; }
  .tl2__card { grid-column: 2; grid-template-columns: 1fr; padding: 20px; }
  .tl2__img { display: none; }
  .tl2__card h3 { font-size: 23px; }
  .tl2__dot--commit { width: 24px; height: 24px; margin-top: 2px; }
  .tl2__dot--commit svg { width: 13px; height: 13px; }
  .tl2__card--commit { padding: 22px 20px; }
  .hw-band { padding-top: 24px; }
  .hw-band__card { grid-template-columns: 1fr; gap: 24px; padding: 16px 16px 28px; }
  .hw-band__photo { aspect-ratio: 4 / 3; object-position: 50% 25%; }
  .hw-band__text { padding: 0 8px; }
  .hw-band__text p:not(.label) { font-size: 18px; }
  .hw-money { padding: 64px 0; }
  .hw-money__more { grid-template-columns: 1fr; margin-top: 28px; }
  .mflow { grid-template-columns: 1fr; }
  .mflow__arrow { height: 72px; }
  .mflow__arrow span { width: 52px; height: 52px; transform: rotate(90deg); }
  .mflow__card { padding: 24px 22px; }
  .hw-money__tile { padding: 24px 22px; }
}

/* ==========================================================================
   Front page, client round 1
   ========================================================================== */
/* No utility bar: the country picker sits beside the main button */
.nav__actions .country__toggle { min-height: 48px; }
.nav__list .nav__consent { color: var(--forest); }

/* Hero: copy on the left, a real photograph in a rounded frame on the right */
.page-a .hero--split { padding: 48px 0 88px; }
.hero-split__photo { position: relative; margin: 0; justify-self: end; width: 100%; max-width: 600px; aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow); }
.hero-split__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.page-a .hero-split__copy .lead { font-size: 18px; }
.page-a .hero-points__item { font-size: 16px; }
.page-a .hero-points__item svg { width: 20px; height: 20px; }

/* Your right: a white fade that closes the section, as in variant B */
.page-a .rights { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--white) 100%); }
@media (min-width: 961px) { .page-a .rights__grid { grid-template-areas: "title stats" "text stats" "links stats"; } }
@media (max-width: 960px) { .page-a .rights__grid { grid-template-columns: 1fr; grid-template-areas: "title" "text" "links" "stats"; } }
.page-a .rights__text { font-size: 18px; }
.page-a .stat__text { font-size: 16px; }
.page-a .sources { font-size: 16px; }

/* How it works: no commitment box, and the two columns line up step by step */
.page-a .phases { row-gap: 0; grid-template-rows: auto repeat(4, auto); }
.page-a .phase { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
.page-a .phase__steps { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
.page-a .phase__step:last-child { padding-bottom: 0; }
.page-a .phase__note { font-size: 16px; }
.page-a .phase__num { font-size: 16px; }
.page-a .phase__step p { font-size: 16px; }
.page-a .phases__intro { font-size: 18px; }
.page-a .phases__person { padding: 18px 18px 18px 32px; }
.page-a .phases__person-text p:not(.phases__person-title) { font-size: 16px; }
.page-a .phases__person-title { font-size: 17px; }

/* Treatments: photo card on the left, a plain list on the right with the button below it */
.page-a .treat { padding: 96px 0; }
.page-a .treat__feature figcaption p:not(.label) { font-size: 17px; }
.page-a .treat__list a, .page-b .treat__list a { grid-template-columns: minmax(0, 1fr) 40px; transition: none; }
.page-a .treat__list a:hover, .page-b .treat__list a:hover { background: none; border-radius: 0; border-bottom-color: var(--line-strong); }
.page-a .treat__list a:hover .treat__go, .page-b .treat__list a:hover .treat__go { background: none; border-color: var(--forest); transform: none; }
.page-a .treat__list a:focus-visible, .page-b .treat__list a:focus-visible { outline: 3px solid var(--deep-green); outline-offset: 2px; }
.treat__more { margin-top: 28px; }

/* Booking: the same Kaare card as on the treatment pages */
.page-a .tp-book { padding-top: 40px; }
.page-a .contact-card__sub { font-size: 16px; }
.page-a .contact-card__ways li { font-size: 16px; }
.page-a .field__help, .page-a .privacy-line { font-size: 16px; }

/* Footer without the large wordmark */
.page-a .footer, .page-b .footer { padding-bottom: 8px; }
.page-a .footer__grid, .page-b .footer__grid { border-bottom: 0; }
.contact-card__line { font-size: 18px; color: var(--bone); }
.page-a .treat__grid { align-items: start; }
/* Let the white fade of "Your right" run back into the page colour */
.page-a .how--phases { background: linear-gradient(180deg, var(--white) 0, rgba(255, 255, 255, 0) 320px); }
/* Nothing below 16px: the readers are mostly older */
.country__toggle { font-size: 16px; }
.mode__title { font-size: 16px; }
.mode__sub { font-size: 16px; line-height: 1.45; }
.booking-steps li { font-size: 16px; }
.field label, .field-label { font-size: 16px; }
.tp-next, .tp-free { font-size: 16px; }
.qa__item--help p, .qa__help-hours { font-size: 16px; }
.faq-acc__item p { font-size: 17px; }
@media (max-width: 600px) { .btn { white-space: normal; text-align: center; line-height: 1.25; padding-top: 10px; padding-bottom: 10px; } }
.nav__list > li > a { white-space: nowrap; }
/* With the Consent Form in the menu the bar is full below 1240px: the links move to a second row */
@media (max-width: 1240px) {
  .page-a .nav, .page-b .nav { height: auto; flex-wrap: wrap; row-gap: 4px; border-radius: 32px; padding: 12px 12px 8px 24px; }
  .page-a .nav__actions, .page-b .nav__actions { margin-left: auto; }
  .page-a .nav__list, .page-b .nav__list { order: 3; width: 100%; margin: 0 0 0 -14px; padding-left: 0; background: none; overflow-x: auto; }
}
/* Front page: body text is 18px everywhere */
.page-a .stat__text, .page-a .sources,
.page-a .phase__step p, .page-a .phase__note, .page-a .phases__person-text p:not(.phases__person-title),
.page-a .treat__feature figcaption p:not(.label),
.page-a .contact-card__sub, .page-a .contact-card__ways li,
.page-a .field__help, .page-a .tp-free, .page-a .privacy-line,
.page-a .faq-split__lead, .page-a .faq-acc__item p, .page-a .qa__item--help p, .page-a .qa__help-hours,
.page-a .footer address { font-size: 18px; }
/* Front page: a lighter, warm neutral cream as the page colour, and a softer fade out of the white */
.page-a { --page: #f5f3ee; background: var(--page); }
.page-a::before {
  background:
    radial-gradient(70% 90% at 88% 0%, rgba(90, 148, 116, .14), transparent 70%),
    radial-gradient(60% 80% at 8% 0%, rgba(159, 233, 191, .30), transparent 70%),
    linear-gradient(180deg, #e3ece4 0%, var(--page) 100%);
}
.page-a .how--phases {
  background: linear-gradient(180deg, var(--white) 0, rgba(255, 255, 255, .78) 140px, rgba(255, 255, 255, .45) 300px, rgba(255, 255, 255, .18) 460px, rgba(255, 255, 255, 0) 620px);
}
/* Labels, including the short line under each call type, stay at 16px */
.page-a .mode__sub { font-size: 16px; }
/* Buttons with a round arrow: the space right of the arrow equals the space above and below it */
.btn:has(> .btn__arrow) { padding-right: 7px; }
.btn--lg:has(> .btn__arrow) { padding-right: 9px; }
.btn__arrow { margin-right: 0; }

/* ==========================================================================
   Front page A, warm proposal (index-warm.html): the same page with a warmer,
   friendlier palette built around the forest green of the buttons
   ========================================================================== */
.page-warm {
  --page: #faf6ef;          /* warm ivory page */
  --bone: #f2ebdf;          /* warm sand: inputs, number circles, chips */
  --mint-light: #e2ead0;    /* pistachio instead of the cool mint */
  --mint: #f2c7a0;          /* apricot accent, mostly on dark green */
  --emerald: #2e6a46;       /* moss green for accents in text */
  --deep-green: #3d7b52;
  --sage: #8aa37a;
  --on-dark: rgba(250, 244, 234, .85);
  --line: rgba(13, 59, 46, .1);
  background: var(--page);
}
.page-warm::before {
  background:
    radial-gradient(70% 90% at 88% 0%, rgba(242, 199, 160, .26), transparent 70%),
    radial-gradient(60% 80% at 8% 0%, rgba(226, 234, 208, .75), transparent 70%),
    linear-gradient(180deg, #f3efe2 0%, var(--page) 100%);
}
.page-warm .rights { background: linear-gradient(180deg, rgba(255, 253, 248, 0) 0%, #fffdf8 100%); }
.page-warm .how--phases {
  background: linear-gradient(180deg, #fffdf8 0, rgba(255, 253, 248, .78) 140px, rgba(255, 253, 248, .45) 300px, rgba(255, 253, 248, .18) 460px, rgba(255, 253, 248, 0) 620px);
}
.page-warm .phases__frame { border-color: rgba(13, 59, 46, .1); }
/* Round arrows: apricot on every dark button */
.page-warm .btn--dark .btn__arrow, .page-warm .btn--mint .btn__arrow { background: var(--mint); color: var(--forest); }
.page-warm .btn--dark:hover, .page-warm .btn--mint:hover { background: #1d4d3b; }
.page-warm .mode:has(input:checked) { box-shadow: 0 0 0 3px rgba(242, 199, 160, .35); }
.page-warm .tp-next .tp-live { background: #d9875a; box-shadow: 0 0 0 4px rgba(217, 135, 90, .18); }
.page-warm .phase--after .phase__num { color: var(--mint); }
.page-warm .faq-acc__item[open] .faq-acc__icon { background: var(--mint); }
.page-warm .faq-acc__item summary:hover .faq-acc__icon { background: var(--mint-light); }
.page-warm .sheet--forest {
  background:
    radial-gradient(1100px 620px at 88% -10%, rgba(46, 106, 70, .7), transparent 62%),
    radial-gradient(900px 600px at -5% 105%, rgba(242, 199, 160, .12), transparent 60%),
    var(--forest);
}
.page-warm .footer__col .label, .page-warm .footer .label--mint { color: var(--mint); }
.page-warm .footer__col a:hover { color: var(--mint); }
.page-warm .contact-card__ways a { text-decoration-color: var(--mint); }

/* ==========================================================================
   Front page A, warm proposal 2 (index-warm2.html): sunny, honey and olive
   around the forest green of the buttons
   ========================================================================== */
.page-warm2 {
  --page: #fbf8f1;          /* sunny cream page */
  --bone: #f3eee2;          /* oat: inputs, number circles, chips */
  --mint-light: #f6e8c4;    /* butter instead of the cool mint */
  --mint: #f3cf6e;          /* honey accent, mostly on dark green */
  --emerald: #47703d;       /* olive green for accents in text */
  --deep-green: #557f45;
  --sage: #9aab7c;
  --on-dark: rgba(251, 246, 234, .86);
  --line: rgba(13, 59, 46, .1);
  background: var(--page);
}
.page-warm2::before {
  background:
    radial-gradient(70% 90% at 88% 0%, rgba(246, 222, 150, .38), transparent 70%),
    radial-gradient(60% 80% at 8% 0%, rgba(205, 218, 182, .55), transparent 70%),
    linear-gradient(180deg, #f6f2e2 0%, var(--page) 100%);
}
.page-warm2 .rights { background: linear-gradient(180deg, rgba(255, 254, 249, 0) 0%, #fffef9 100%); }
.page-warm2 .how--phases {
  background: linear-gradient(180deg, #fffef9 0, rgba(255, 254, 249, .78) 140px, rgba(255, 254, 249, .45) 300px, rgba(255, 254, 249, .18) 460px, rgba(255, 254, 249, 0) 620px);
}
.page-warm2 .phases__frame { border-color: rgba(13, 59, 46, .1); }
.page-warm2 .btn--dark .btn__arrow, .page-warm2 .btn--mint .btn__arrow { background: var(--mint); color: var(--forest); }
.page-warm2 .btn--dark:hover, .page-warm2 .btn--mint:hover { background: #1d4d3b; }
.page-warm2 .mode:has(input:checked) { box-shadow: 0 0 0 3px rgba(243, 207, 110, .35); }
.page-warm2 .tp-next .tp-live { background: #d39a2c; box-shadow: 0 0 0 4px rgba(211, 154, 44, .18); }
.page-warm2 .phase--after .phase__num { color: var(--mint); }
.page-warm2 .faq-acc__item[open] .faq-acc__icon { background: var(--mint); }
.page-warm2 .faq-acc__item summary:hover .faq-acc__icon { background: var(--mint-light); }
.page-warm2 .sheet--forest {
  background:
    radial-gradient(1100px 620px at 88% -10%, rgba(71, 112, 61, .65), transparent 62%),
    radial-gradient(900px 600px at -5% 105%, rgba(243, 207, 110, .12), transparent 60%),
    var(--forest);
}
.page-warm2 .footer__col .label, .page-warm2 .footer .label--mint { color: var(--mint); }
.page-warm2 .footer__col a:hover { color: var(--mint); }
.page-warm2 .contact-card__ways a { text-decoration-color: var(--mint); }

/* ==========================================================================
   Front page A, warm proposal 3 (index-warm3.html): a yellow-green, spring-like
   accent around the forest green of the buttons
   ========================================================================== */
.page-warm3 {
  --page: #fafaf3;          /* light, slightly yellow cream */
  --bone: #f0f0e2;          /* pale straw: inputs, number circles, chips */
  --mint-light: #e9efc6;    /* soft yellow-green instead of the cool mint */
  --mint: #d3e27e;          /* yellow-green accent, mostly on dark green */
  --emerald: #4f7a2c;       /* yellow-green for accents in text */
  --deep-green: #5f8a35;
  --sage: #9db06e;
  --on-dark: rgba(250, 250, 238, .86);
  --line: rgba(13, 59, 46, .1);
  background: var(--page);
}
.page-warm3::before {
  background:
    radial-gradient(70% 90% at 88% 0%, rgba(211, 226, 126, .32), transparent 70%),
    radial-gradient(60% 80% at 8% 0%, rgba(233, 239, 198, .8), transparent 70%),
    linear-gradient(180deg, #f2f4e2 0%, var(--page) 100%);
}
.page-warm3 .rights { background: linear-gradient(180deg, rgba(255, 255, 250, 0) 0%, #fffffa 100%); }
.page-warm3 .how--phases {
  background: linear-gradient(180deg, #fffffa 0, rgba(255, 255, 250, .78) 140px, rgba(255, 255, 250, .45) 300px, rgba(255, 255, 250, .18) 460px, rgba(255, 255, 250, 0) 620px);
}
.page-warm3 .phases__frame { border-color: rgba(13, 59, 46, .1); }
.page-warm3 .btn--dark .btn__arrow, .page-warm3 .btn--mint .btn__arrow { background: var(--mint); color: var(--forest); }
.page-warm3 .btn--dark:hover, .page-warm3 .btn--mint:hover { background: #1d4d3b; }
.page-warm3 .mode:has(input:checked) { box-shadow: 0 0 0 3px rgba(211, 226, 126, .4); }
.page-warm3 .tp-next .tp-live { background: #7fa236; box-shadow: 0 0 0 4px rgba(127, 162, 54, .2); }
.page-warm3 .phase--after .phase__num { color: var(--mint); }
.page-warm3 .faq-acc__item[open] .faq-acc__icon { background: var(--mint); }
.page-warm3 .faq-acc__item summary:hover .faq-acc__icon { background: var(--mint-light); }
.page-warm3 .sheet--forest {
  background:
    radial-gradient(1100px 620px at 88% -10%, rgba(79, 122, 44, .62), transparent 62%),
    radial-gradient(900px 600px at -5% 105%, rgba(211, 226, 126, .12), transparent 60%),
    var(--forest);
}
.page-warm3 .footer__col .label, .page-warm3 .footer .label--mint { color: var(--mint); }
.page-warm3 .footer__col a:hover { color: var(--mint); }
.page-warm3 .contact-card__ways a { text-decoration-color: var(--mint); }

/* ==========================================================================
   Front page B, client round 1: the same navigation, treatments list and footer as A
   ========================================================================== */
.page-b .treat__grid { align-items: start; }
/* FAQ: the answers are not clickable, so all cards are plain white; the chat card is outlined, not black */
.page-b .qa__item--help { background: transparent; border: 1px solid var(--line-strong); color: var(--forest); }
.page-b .qa__item--help p, .page-b .qa__item--help .qa__help-hours { color: var(--muted); }
.page-b .qa__item--help .qa__help-number, .page-b .qa__item--help .qa__help-icon { color: var(--forest); }
.page-b .qa__item--help .qa__help-mark { color: var(--forest); opacity: .05; }
.page-b .qa__item--help:hover { border-color: rgba(13, 59, 46, .4); }
.page-b .footer address { font-size: 18px; }

/* ==========================================================================
   Treatment pages, client round 1 (built on the front page A: same frame, sizes and colours)
   ========================================================================== */
.tp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; font-size: 16px; font-weight: 600; }
.tp-crumbs li { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
/* The arrow belongs to the item before it, so a wrapped breadcrumb never starts a line with "›" (9 Nov 2026). */
.tp-crumbs li:not(:last-child)::after { content: "›"; color: var(--muted); font-weight: 400; }
.tp-crumbs a { color: var(--forest); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.tp-crumbs a:hover { text-decoration-color: var(--forest); }
/* The value line is plain bold text, not a quote */
.tp-value { padding-left: 0; border-left: 0; font-weight: 700; color: var(--forest); }
.tp-source { font-size: 16px; }
/* Steps: the front page layout, with who and when under each title */
.page-treatment .tp-steps { padding-top: 40px; }
.phase__when { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--emerald); }
.phase__when svg { flex: none; margin-top: 3px; }
.page-a .phase__step .phase__when + p { margin-top: 8px; }
/* Cost: the Ablement symbol on our service, and the detail as a full-width row under the three cards */
.tp-flow__icon--logo img { width: 30px; height: auto; }
.tp-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line-strong); }
.tp-detail h3 { font-size: 24px; line-height: 1.2; }
.tp-detail p { margin: 0 0 18px; font-size: 18px; line-height: 1.65; color: var(--muted); max-width: 68ch; }
/* About: two paragraphs */
.tp-about__text p:not(.label) + p { margin-top: 16px; }
/* Final banner: nothing below 16px */
.tp-final__who p, .tp-final__small { font-size: 16px; }
@media (max-width: 960px) { .tp-detail { grid-template-columns: 1fr; gap: 16px; } }
/* Treatment pages: no hard white edge under the steps; a soft white glow fades in and out behind the cost heading */
.page-treatment .tp-cost { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .55) 140px, rgba(255, 255, 255, .55) 220px, rgba(255, 255, 255, 0) 420px); }
/* Wide cut-outs (knee: woman on a bicycle) sit smaller in the hero, centred on the symbol */
.page-treatment .hero-split__person.tp-person--wide { width: 92%; height: auto; margin: 0 auto 8px; }
@media (max-width: 960px) { .page-treatment .hero-split .hero-split__person.tp-person--wide { width: 88%; margin-bottom: 0; } }
/* Knee: crouching cut-out, slightly shorter than a standing figure so the scale matches the hip page */
.page-treatment .hero-split__person.tp-person--crouch { width: auto; height: 660px; margin: 0 auto 16px; }
@media (max-width: 960px) { .page-treatment .hero-split .hero-split__person.tp-person--crouch { height: 420px; margin-bottom: 0; } }

/* ==========================================================================
   How it works, client round 1 (built on the front page A, like the treatment pages)
   ========================================================================== */
/* Timeline: numbers on the rail, no green progress ticks (visitors are not logged in) */
.page-how .tl2::after { display: none; }
.page-how .tl2__dot.tl2__num,
.page-how .tl2__row.is-done .tl2__dot.tl2__num { display: grid; place-items: center; width: 40px; height: 40px; margin-top: 8px; border-radius: 50%; background: var(--bone); border: 1.5px solid var(--line-strong); color: var(--forest); font-family: var(--font-head); font-size: 16px; font-weight: 800; transform: none; }
.page-how .tl2__row.is-done .tl2__dot.tl2__num { background: var(--bone); border-color: var(--line-strong); color: var(--forest); }
.page-how .tl2__dot--commit { width: 40px; height: 40px; background: var(--forest); }
.page-how .tl2__commit-title { color: var(--mint-light); }
/* Cards: the step icon from the first treatment pages instead of a photo */
.tl2__card--icon { grid-template-columns: 64px minmax(0, 1fr); gap: 24px; padding: 28px; }
.tl2__icon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--forest); color: var(--white); }
.tl2__icon svg [fill-opacity] { color: var(--white); }
.page-how .tl2__when span, .page-how .tl2__meta li, .page-how .tl2__paras p, .page-how .tl2__card--commit p:not(.tl2__commit-title) { font-size: 18px; }
.page-how .tl2__more summary { font-size: 16px; }
/* Money: the small step labels become readable 16px text */
.page-how .hw-money__step { font-family: var(--font-sans); font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.page-how .mflow__card > p:not(.hw-money__step):not(.mflow__chip), .page-how .hw-money__tile p { font-size: 18px; }
.page-how .mflow__chip { font-size: 16px; }
.page-how .hw-band__text .h2 { margin-top: 0; }
@media (max-width: 960px) {
  .tl2__card--icon { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .tl2__icon { width: 52px; height: 52px; border-radius: 16px; }
  .page-how .tl2__dot.tl2__num, .page-how .tl2__row.is-done .tl2__dot.tl2__num { width: 32px; height: 32px; margin-top: 0; font-size: 14px; }
  .page-how .tl2__row { grid-template-columns: 32px minmax(0, 1fr); }
  .page-how .tl2__row::before { left: 15px; }
  .page-how .tl2__dot--commit { width: 32px; height: 32px; }
}
/* How it works: the step icon sits on the right of the card, where the photo was */
.tl2__card--icon { grid-template-columns: minmax(0, 1fr) 64px; gap: 32px; padding: 28px 28px 28px 32px; }
.tl2__card--icon .tl2__icon { order: 2; }
@media (max-width: 960px) { .tl2__card--icon { grid-template-columns: 1fr; padding: 20px; } .tl2__card--icon .tl2__icon { order: 0; } }
/* How it works: "Read the details" sits on the right, under the icon, bottom-aligned with the last who/when line */
@media (min-width: 961px) {
  .tl2__card--icon .tl2__more { position: relative; margin-top: 0; }
  .tl2__card--icon .tl2__more summary { position: absolute; right: -96px; bottom: 100%; }
  .tl2__card--icon .tl2__more[open] .tl2__paras { margin-top: 0; padding-top: 18px; }   /* padding, not margin: the button stays where it was (client, 5 Nov) */
}
/* How it works: white number circles; the commitment point is the same circle with a pen (signing) icon */
.page-how .tl2__dot.tl2__num, .page-how .tl2__row.is-done .tl2__dot.tl2__num { background: var(--white); }
.page-how .tl2__dot--commit { display: grid; place-items: center; width: 40px; height: 40px; margin-top: 8px; border-radius: 50%; background: var(--white); border: 1.5px solid var(--forest); color: var(--forest); }
.page-how .tl2__dot--commit svg { display: block; width: 18px; height: 18px; }
@media (max-width: 960px) { .page-how .tl2__dot--commit { width: 32px; height: 32px; margin-top: 0; } .page-how .tl2__dot--commit svg { width: 15px; height: 15px; } }
/* How it works: one contact person as a compact dark card, the portrait tilted over its top edge, the promise as four short points */
.page-how .hw-band { padding: 72px 0 0; }
.hw-band__card--dark { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; padding: 36px 48px 36px 40px; border-radius: var(--r-xl); color: var(--bone); background: radial-gradient(700px 360px at 100% 0%, rgba(0, 116, 83, .55), transparent 70%), var(--forest); }
.hw-band__who { margin: -76px 0 0; display: grid; justify-items: center; gap: 12px; }
.hw-band__card--dark .hw-band__photo { width: 220px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--r-lg); border: 5px solid var(--white); transform: rotate(-4deg); box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .55); }
.hw-band__who figcaption { font-size: 16px; font-weight: 600; color: var(--mint-light); }
.hw-band__card--dark .h2 { margin: 0; max-width: 24ch; color: var(--white); }
.hw-band__points { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
.hw-band__points li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 18px; line-height: 1.5; color: var(--on-dark); }
.hw-band__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(159, 233, 191, .14); color: var(--mint-light); }
@media (max-width: 960px) {
  .page-how .hw-band { padding-top: 56px; }
  .hw-band__card--dark { grid-template-columns: 1fr; gap: 24px; padding: 28px 22px; }
  .hw-band__who { margin-top: -64px; justify-items: start; }
  .hw-band__card--dark .hw-band__photo { width: 150px; }
  .hw-band__points { grid-template-columns: 1fr; }
}
/* Final banner (all pages): the button is right-aligned with the line of text under it */
@media (min-width: 961px) {
  .tp-final__card > .btn { justify-self: end; }
  .tp-final__small { justify-self: end; text-align: right; }
}
/* How it works: the contact-person card in the light mint of variant A, with forest text */
.hw-band__card--dark { color: var(--forest); background: radial-gradient(700px 360px at 100% 0%, rgba(255, 255, 255, .55), transparent 70%), var(--mint-light); }
.hw-band__card--dark .h2 { color: var(--forest); }
.hw-band__points li { color: rgba(13, 59, 46, .86); }
.hw-band__icon { background: var(--white); color: var(--emerald); }
.hw-band__who figcaption { color: var(--forest); }
.hw-band__card--dark .hw-band__photo { box-shadow: 0 24px 48px -22px rgba(13, 59, 46, .5); }
/* How it works: step icons in the same style as the money cards (mint-light tile, forest icon) */
.tl2__icon { width: 52px; height: 52px; border-radius: 16px; background: var(--mint-light); color: var(--forest); }
.tl2__icon svg [fill-opacity] { color: var(--deep-green); }
@media (min-width: 961px) {
  .tl2__card--icon { grid-template-columns: minmax(0, 1fr) 52px; }
  .tl2__card--icon .tl2__more summary { right: -84px; }
}
/* How it works: flat step cards, no shadow */
.page-how .tl2__card { box-shadow: none; }
/* Front page and the pages built from it: the sources line reads as a small footnote */
.page-a .rights .sources, .page-a .sources { font-size: 14px; line-height: 1.5; }
/* Footer: the address starts at the top, without the "Ablement Ireland" heading */
.footer__local address { margin-top: 0; }
.footer__local .label { margin: 0 0 18px; color: var(--mint-light); }
.phase__link { color: var(--emerald); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(11, 101, 76, .35); }
.phase__link:hover { text-decoration-color: var(--emerald); }

/* ============ Treatments overview (treatments.html, body.page-treatments) ============ */
.tx-hero .display { margin-top: 0; color: var(--forest); }
.tx-lead { margin-top: 24px; max-width: 56ch; font-size: 20px; line-height: 1.6; color: var(--muted); }
.tx-lead--strong { margin-top: 14px; font-size: 18px; font-weight: 500; color: var(--forest); }
.tx-hero .hero__cta { margin-top: 32px; }
.tx-lead a { color: var(--forest); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

.tx-list { padding: 40px 0 80px; }
.tx-list__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; margin-bottom: 32px; }
.tx-list__head .h1 { color: var(--forest); max-width: 16ch; }
.tx-chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 860px; justify-content: flex-end; }
.tx-chip { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; font: inherit; font-size: 16px; font-weight: 600; color: var(--forest); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.tx-chip span { font-weight: 500; color: var(--muted); }
.tx-chip:hover { border-color: var(--forest); }
.tx-chip.is-on { background: var(--forest); border-color: var(--forest); color: var(--white); }
.tx-chip.is-on span { color: var(--mint-light); }
.tx-chip:focus-visible { outline: 3px solid rgba(0, 116, 83, .4); outline-offset: 2px; }

.tx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.tx-card[hidden] { display: none; }
.tx-card a { display: flex; flex-direction: column; height: 100%; padding: 32px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); color: var(--forest); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.tx-card a:hover { border-color: var(--line-strong); box-shadow: 0 24px 48px -32px rgba(13, 59, 46, .45); transform: translateY(-2px); }
.tx-card a:focus-visible { outline: 3px solid rgba(0, 116, 83, .4); outline-offset: 3px; }
.tx-card__area { font-size: 16px; font-weight: 600; color: var(--emerald); }
.tx-card__name { margin-top: 8px; font-family: var(--font-head); font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.tx-card__text { margin-top: 10px; flex: 1; font-size: 18px; line-height: 1.55; color: var(--muted); }
.tx-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.tx-card__stay { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.tx-card__stay svg { color: var(--emerald); flex: none; }
.tx-card__go { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--bone); color: var(--forest); transition: background .2s, color .2s; }
.tx-card a:hover .tx-card__go { background: var(--forest); color: var(--white); }
/* Other treatments: the light mint of "After you commit" on the front page */
.tx-card--other a { background: var(--mint-light); border-color: var(--mint-light); color: var(--forest); }
.tx-card--other a:hover { border-color: var(--mint-light); }
.tx-card--other .tx-card__area { color: var(--forest); }
.tx-card--other .tx-card__text { color: rgba(13, 59, 46, .82); }
.tx-card--other .tx-card__foot { border-top-color: var(--line); }
.tx-card__go { margin-left: auto; }
.tx-card--other .tx-card__go { background: var(--forest); color: var(--mint); }
.tx-card--other a:hover .tx-card__go { background: var(--forest); color: var(--white); }

.tx-why { padding: 40px 0; }
.tx-why__sheet { display: grid; gap: 48px; padding: 64px; border-radius: var(--r-xl); color: var(--white); background: radial-gradient(800px 420px at 0% 0%, rgba(159, 233, 191, .14), transparent 70%), var(--forest); }
.tx-why .statement { color: var(--white); }
.tx-why__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; list-style: none; margin: 0; padding: 0; align-content: start; }
.tx-why__item { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; }
.tx-why__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--mint-light); color: var(--forest); }
.tx-why__icon svg [fill-opacity] { color: var(--deep-green); }
.tx-why__item h3 { font-family: var(--font-head); font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; color: var(--white); }
.tx-why__item p { margin-top: 8px; font-size: 18px; line-height: 1.6; color: var(--on-dark); }
.page-a .tx-why__sources { margin-top: 0; padding-top: 20px; border-top: 1px solid var(--on-dark-line); color: rgba(239, 236, 228, .7); }

.tx-not { padding: 40px 0 40px; }
.tx-not__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 72px; padding: 56px; border-radius: var(--r-xl); background: var(--white); border: 1px solid var(--line); }
.tx-not__copy .h1 { color: var(--forest); max-width: 18ch; }
.tx-not__copy p { margin-top: 20px; max-width: 52ch; font-size: 18px; line-height: 1.6; color: var(--muted); }
.tx-not__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.tx-not__lists { display: grid; gap: 12px; align-content: start; }
.tx-not__col { padding: 22px 24px; border-radius: var(--r); background: var(--bone); }
.tx-not__col--yes { background: var(--mint-light); }
.tx-not__col h3 { font-size: 16px; font-weight: 600; color: var(--forest); }
.tx-not__col ul { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 12px 0 0; padding: 0; }
.tx-not__col li { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 500; color: var(--forest); }
.tx-not__mark { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--white); color: var(--forest); }
.tx-not__col--yes .tx-not__mark { background: var(--forest); color: var(--mint-light); }

@media (max-width: 1100px) {
  .tx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tx-chips { justify-content: flex-start; }
}
@media (max-width: 960px) {
    .tx-not__card, .tx-why__list { grid-template-columns: 1fr; gap: 32px; }
  .tx-lead { font-size: 18px; }
      .tx-why__sheet { padding: 40px 22px; }
  .tx-not__card { padding: 32px 22px; }
  .tx-list { padding: 24px 0 56px; }
}
@media (max-width: 680px) {
  .tx-grid { grid-template-columns: 1fr; }
  .tx-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--edge) * -1); padding: 0 var(--edge) 4px; scrollbar-width: none; }
  .tx-chip { flex: none; }
  .tx-card a { padding: 24px; }
  .tx-card__foot { margin-top: 20px; padding-top: 20px; }
}
/* Treatments overview: the booking section is the last one, so it keeps the same space above the footer as the FAQ on treatment pages */
.page-treatments .tp-book { padding-bottom: 120px; }
@media (max-width: 960px) { .page-treatments .tp-book { padding-bottom: 72px; } }

/* ============ Your rights (your-rights.html, body.page-rights) ============ */
.rt-hero { padding: 56px 0 72px; }
.rt-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.rt-hero .display { margin-top: 0; color: var(--forest); }
.rt-lead { margin-top: 24px; max-width: 58ch; font-size: 20px; line-height: 1.6; color: var(--muted); }
.rt-hero .hero__cta { margin-top: 32px; }
.rt-law { padding: 40px; gap: 20px; background: radial-gradient(600px 300px at 0% 0%, rgba(159, 233, 191, .14), transparent 70%), var(--forest); }
.rt-law .tp-trust__law { display: flex; align-items: center; gap: 12px; font-size: 26px; }
.rt-law__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; margin: 4px 0 0; padding: 20px 0; border-top: 1px solid var(--on-dark-line); border-bottom: 1px solid var(--on-dark-line); }
.rt-law__stats .stat__num { color: var(--mint-light); font-size: 44px; }
.rt-law__stats dd { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--on-dark); }
.rt-law .arrow-link { font-size: 18px; }
.page-a .rt-law__sources { margin-top: 0; color: rgba(239, 236, 228, .7); }

.rt-body { padding: 24px 0 64px; }
.rt-body__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 80px; align-items: start; }
.rt-toc { position: sticky; top: 112px; max-height: calc(100vh - 136px); overflow-y: auto; scrollbar-width: thin; padding: 28px 24px 20px; border-radius: var(--r-xl); background: var(--white); border: 1px solid var(--line); }
.rt-toc__count { font-size: 16px; font-weight: 600; color: var(--emerald); font-variant-numeric: tabular-nums; }
.rt-toc__bar { height: 6px; margin-top: 14px; border-radius: 999px; background: var(--bone); overflow: hidden; }
.rt-toc__bar span { display: block; width: 10%; height: 100%; border-radius: inherit; background: var(--emerald); transition: width .35s ease; }
.rt-toc ol { position: relative; list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 2px; }
.rt-toc ol::before { content: ""; position: absolute; left: 25px; top: 24px; bottom: 24px; border-left: 2px dotted var(--line-strong); }
.rt-toc a { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 8px; border-radius: 14px; color: var(--forest); text-decoration: none; transition: background .2s; }
.rt-toc a:hover { background: var(--bone); }
.rt-toc__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--bone); color: var(--forest); box-shadow: 0 0 0 4px var(--white); transition: background .2s, color .2s; }
.rt-toc__icon svg [fill-opacity] { color: var(--deep-green); }
.rt-toc__text { display: block; font-size: 16px; line-height: 1.35; font-weight: 500; }
.rt-toc__num { margin-right: 8px; font-size: 16px; font-weight: 600; color: var(--emerald); opacity: .7; font-variant-numeric: tabular-nums; }
.rt-toc a.is-read .rt-toc__icon { background: var(--mint-light); }
.rt-toc a[aria-current] { background: var(--forest); color: var(--white); }
.rt-toc a[aria-current] .rt-toc__icon { background: var(--mint-light); box-shadow: none; }
.rt-toc a[aria-current] .rt-toc__num { color: var(--mint-light); opacity: 1; }

.rt-article { max-width: 820px; }
.rt-sec { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 48px 0; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.rt-sec:first-child { padding-top: 8px; border-top: 0; }
.rt-sec__num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bone); border: 1.5px solid var(--line-strong); font-family: var(--font-head); font-size: 16px; font-weight: 800; color: var(--forest); }
.rt-sec .h2 { margin-top: 4px; color: var(--forest); }
.rt-sec__body > p { margin-top: 16px; font-size: 18px; line-height: 1.65; color: var(--muted); max-width: 68ch; }
.rt-sec__body > .h2 + p { margin-top: 20px; }
.rt-link { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.rt-link .arrow-link { font-size: 18px; overflow-wrap: anywhere; }

.rt-note { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 24px; padding: 20px 24px; border-radius: var(--r); background: var(--mint-light); color: var(--forest); }
.rt-note__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--white); }
.rt-note__icon svg [fill-opacity], .rt-lower__icon svg [fill-opacity], .rt-contact__icon svg [fill-opacity] { color: var(--deep-green); }
.rt-note p { font-size: 18px; line-height: 1.55; font-weight: 600; }

.rt-lower { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 12px; margin: 28px 0 8px; padding: 12px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); }
.rt-lower__tile { display: grid; gap: 14px; align-content: start; padding: 20px; border-radius: var(--r); background: var(--bone); }
.rt-lower__tile p { font-size: 18px; line-height: 1.45; font-weight: 600; color: var(--forest); }
.rt-lower__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--mint-light); color: var(--forest); }
.rt-lower__or { align-self: center; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--forest); color: var(--white); font-size: 16px; font-weight: 600; }
.rt-lower__result { grid-column: 1 / -1; padding: 12px 8px 4px; font-size: 18px; line-height: 1.5; color: var(--forest); text-align: center; }
.rt-lower__result strong { padding: 0 6px; border-radius: 6px; background: var(--mint-light); }

.rt-fact { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 24px; padding: 18px 24px; border-radius: var(--r); background: var(--white); border: 1px solid var(--line); }
.rt-fact__num { font-family: var(--font-head); font-size: 32px; font-weight: 800; letter-spacing: -0.03em; color: var(--forest); }
.rt-fact span:not(.rt-fact__num) { font-size: 18px; color: var(--muted); }

.rt-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.rt-contact { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 20px; border-radius: var(--r); background: var(--white); border: 1px solid var(--line); color: var(--forest); text-decoration: none; transition: border-color .2s; }
.rt-contact:hover { border-color: var(--line-strong); }
.rt-contact__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--mint-light); }
.rt-contact strong { display: block; font-size: 16px; font-weight: 600; }
.rt-contact strong + span { display: block; margin-top: 2px; font-size: 18px; color: var(--muted); }
.rt-read { margin-top: 20px; font-size: 16px; line-height: 1.5; color: var(--muted); }

.page-rights .tp-book { padding-bottom: 120px; }

@media (max-width: 1100px) {
  .rt-body__grid { grid-template-columns: 1fr; gap: 32px; }
  .rt-toc { position: static; }
  .rt-toc ol { grid-template-columns: 1fr 1fr; column-gap: 24px; }
}
@media (max-width: 960px) {
  .rt-hero { padding: 16px 0 40px; }
  .rt-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .rt-lead { font-size: 18px; }
  .rt-law { padding: 28px 22px; }
  .page-rights .tp-book { padding-bottom: 72px; }
}
@media (max-width: 680px) {
  .rt-toc { padding: 22px 18px 16px; }
  .rt-toc ol { grid-template-columns: 1fr; }
  .rt-sec { grid-template-columns: 1fr; gap: 12px; padding: 36px 0; }
  .rt-lower { grid-template-columns: 1fr; }
  .rt-lower__or { justify-self: center; }
  .rt-contacts { grid-template-columns: 1fr; }
  .rt-law__stats { grid-template-columns: 1fr; }
  .rt-law__stats .stat__num { font-size: 36px; }
}
/* Your rights: the hero card in the light mint of the notes (user request, 4 Nov) */
.rt-law { color: var(--forest); background: radial-gradient(600px 320px at 100% 0%, rgba(255, 255, 255, .55), transparent 70%), var(--mint-light); }
.rt-law .tp-trust__stars { color: var(--forest); opacity: .08; }
.rt-law__stats { border-top-color: rgba(13, 59, 46, .16); border-bottom-color: rgba(13, 59, 46, .16); }
.rt-law__stats .stat__num { color: var(--forest); }
.rt-law__stats dd { color: rgba(13, 59, 46, .82); }
.tp-trust__right.rt-law .arrow-link { color: var(--forest); text-decoration-color: rgba(13, 59, 46, .4); }
.page-a .rt-law__sources { color: rgba(13, 59, 46, .72); }
/* Your rights: the contents tiles show the section number instead of an icon (user request, 4 Nov) */
.rt-toc__icon--num { font-family: var(--font-head); font-size: 16px; font-weight: 800; color: var(--forest); font-variant-numeric: tabular-nums; }
.rt-toc a[aria-current] .rt-toc__icon--num { color: var(--forest); }
/* Your rights: quieter inactive contents tiles (user request, 4 Nov) */
.rt-toc__icon--num { background: var(--white); border: 1.5px solid var(--line); color: rgba(13, 59, 46, .5); font-weight: 700; }
.rt-toc a { color: var(--muted); }
.rt-toc a.is-read .rt-toc__icon--num { background: var(--white); border-color: rgba(0, 116, 83, .35); color: var(--emerald); }
.rt-toc a[aria-current] { color: var(--white); }
.rt-toc a[aria-current] .rt-toc__icon--num { background: var(--mint-light); border-color: var(--mint-light); color: var(--forest); font-weight: 800; }
.rt-toc a:hover { color: var(--forest); }
.rt-toc a[aria-current]:hover { color: var(--white); }
/* Your rights, section 01: the chain from EU law to you, the claim and the HSE guide card */
.rt-chain { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr); align-items: stretch; gap: 8px; list-style: none; margin: 28px 0 0; padding: 0; }
.rt-chain__step { position: relative; display: grid; align-content: start; gap: 10px; padding: 22px 20px 20px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); }
.rt-chain__step h3 { font-family: var(--font-head); font-size: 18px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; color: var(--forest); }
.rt-chain__step p { font-size: 16px; line-height: 1.5; color: var(--muted); }
.rt-chain__tag { justify-self: start; padding: 2px 10px; border-radius: 999px; background: var(--bone); font-size: 16px; font-weight: 600; color: var(--emerald); }
.rt-chain__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--mint-light); color: var(--forest); }
.rt-chain__icon svg [fill-opacity] { color: var(--deep-green); }
.rt-chain__step--you { background: var(--forest); border-color: var(--forest); }
.rt-chain__step--you h3 { color: var(--white); }
.rt-chain__step--you p { color: var(--on-dark); }
.rt-chain__step--you .rt-chain__tag { background: rgba(159, 233, 191, .16); color: var(--mint-light); }
.rt-chain__link { display: grid; place-items: center; }
.rt-chain__arrow { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--mint-light); color: var(--forest); }
.rt-claim { margin-top: 32px; }
.rt-claim__big { font-family: var(--font-head); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; color: var(--forest); text-wrap: balance; }
.rt-claim__text { margin-top: 10px; max-width: 60ch; font-size: 18px; line-height: 1.6; color: var(--muted); }
.rt-guide { display: grid; grid-template-columns: 44px minmax(0, 1fr) 40px; align-items: center; gap: 16px; margin-top: 28px; padding: 16px 16px 16px 18px; border-radius: var(--r); background: var(--white); border: 1px solid var(--line); color: var(--forest); text-decoration: none; transition: border-color .2s; }
.rt-guide:hover { border-color: var(--line-strong); }
.rt-guide__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--mint-light); }
.rt-guide__icon svg [fill-opacity] { color: var(--deep-green); }
.rt-guide__text { display: grid; gap: 2px; min-width: 0; }
.rt-guide__text strong { font-size: 16px; font-weight: 600; }
.rt-guide__text span { font-size: 16px; color: var(--muted); overflow-wrap: anywhere; }
.rt-guide__go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--forest); color: var(--mint-light); }
@media (max-width: 860px) {
  .rt-chain { grid-template-columns: 1fr; }
  .rt-chain__link { transform: rotate(90deg); }
}
/* Your rights: the article runs to the right edge of the hero card (user request, 4 Nov) */
.rt-article { max-width: none; }
.rt-sec__body > p { max-width: 76ch; }
.rt-claim__text { max-width: 76ch; }
/* Every page: 120px between the last section and the footer (user request, 4 Nov) */
.tp-final { padding-bottom: 120px; }
@media (max-width: 960px) { .tp-final { padding-bottom: 72px; } }
/* Every page: the hero text starts 120px below the navigation (user request, 4 Nov).
   The hero section starts at 76px and the navigation ends at 88px, so the copy sits at 208px. */
@media (min-width: 961px) {
  .hero-split__copy { align-self: start; margin-top: 84px; }  /* hero--split: 48px padding */
  .hw-hero__copy { align-self: start; margin-top: 108px; }    /* how it works: 24px padding */
  .rt-hero__copy { align-self: start; margin-top: 76px; }     /* your rights: 56px padding */
}

/* ============ FAQ page (questions.html, body.page-faq): the wireframe's elements only ============ */
/* Hero: the title starts 120px below the navigation (section from 76px, so 132px of top padding) */
.fq-hero { padding: 132px 0 72px; }
.fq-hero .display { margin: 0; max-width: 18ch; color: var(--forest); font-size: clamp(42px, 3.9vw, 56px); }
.fq-lead { margin-top: 24px; max-width: 66ch; font-size: 20px; line-height: 1.6; color: var(--muted); }
.fq-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 40px 0 0; padding: 0; list-style: none; }
.fq-chip { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 16px; font-weight: 600; color: var(--forest); text-decoration: none; transition: background .2s, border-color .2s, color .2s; }
.fq-chip svg { color: var(--emerald); transition: transform .2s; }
.fq-chip:hover { background: var(--forest); border-color: var(--forest); color: var(--white); }
.fq-chip:hover svg { color: var(--mint-light); transform: translateY(2px); }

/* Groups as chapters: the heading stays in view on the left while its questions scroll on the right */
.fq-group { padding: 72px 0; scroll-margin-top: 96px; }
.fq-group + .fq-group { border-top: 1px solid var(--line); }
.fq-group:first-child { background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%); }
.fq-group:last-child { padding-bottom: 120px; }
.fq-group__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.fq-group__side { position: sticky; top: 112px; display: grid; gap: 20px; justify-items: start; }
.fq-group__side .h1 { max-width: 14ch; color: var(--forest); }
.fq-top { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--emerald); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(11, 101, 76, .35); }
.fq-top:hover { text-decoration-color: var(--emerald); }
.fq-group .faq-acc__item { border: 1px solid var(--line); }
.page-faq .footer { margin-top: 0; }

@media (max-width: 960px) {
  .fq-hero { padding: 24px 0 40px; }
  .fq-lead { font-size: 18px; }
  .fq-chips { margin-top: 28px; }
  .fq-group { padding: 48px 0; }
  .fq-group:last-child { padding-bottom: 72px; }
  .fq-group__grid { grid-template-columns: 1fr; gap: 24px; }
  .fq-group__side { position: static; }
}
/* FAQ: a white rounded tile with the group's Nucleo icon before each group heading (user request, 4 Nov) */
.fq-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--white); color: var(--forest); box-shadow: inset 0 0 0 1px var(--line); }
.fq-icon svg [data-color="color-2"], .fq-icon svg [fill-opacity], .fq-icon svg [opacity] { color: var(--deep-green); }
.fq-group__side .fq-icon + .h1 { margin-top: 4px; }

/* ============ About us (about.html, body.page-about): the wireframe's elements only, CSS prefix ab- ============ */
/* Hero: a large title with the lead beside it; the title starts 120px below the navigation */
.ab-hero { padding: 132px 0 72px; }
.ab-hero__grid { display: grid; gap: 24px; justify-items: start; }
.ab-hero .display { margin: 0; color: var(--forest); font-size: clamp(42px, 3.9vw, 56px); }   /* same title size as the other pages (user, 4 Nov) */
.ab-lead { margin: 0; max-width: 66ch; font-size: 20px; line-height: 1.6; color: var(--muted); }

/* Why Ablement?: one dark sheet, the statement set large, the story in two columns, the bold line at the end */
.ab-why { padding: 0 0 120px; }
.ab-why__sheet { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--mint-light); color: var(--forest); padding: 88px 96px 80px; isolation: isolate; }
.ab-why__mark { position: absolute; z-index: -1; right: -90px; top: -60px; width: 620px; height: auto; pointer-events: none; }
.ab-why__mark path { stroke: var(--forest); stroke-opacity: .14; stroke-width: 1.5px; }
.ab-why__h { margin: 0; font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; color: var(--emerald); }
.ab-statement { margin: 28px 0 0; max-width: 30ch; font-family: var(--font-head); font-weight: 700; font-size: clamp(30px, 3vw, 44px); line-height: 1.08; letter-spacing: -0.035em; color: var(--forest); text-wrap: balance; }
.ab-why__text { margin-top: 48px; columns: 2; column-gap: 64px; }
.ab-why__text p { margin: 0 0 24px; font-size: 20px; line-height: 1.6; color: var(--muted); }
.ab-closing { margin: 32px 0 0; padding-top: 32px; border-top: 1px solid var(--line-strong); max-width: 40ch; font-family: var(--font-head); font-size: clamp(22px, 2vw, 28px); line-height: 1.3; letter-spacing: -0.02em; color: var(--forest); }
.ab-closing strong { font-weight: 700; }

/* What we do: three cards */
.ab-do { padding: 0; }
/* 0.5px divider halfway between What we do and the bento (user, 4 Nov): 60px above, 60px below */
.ab-do .wrap::after { content: ""; display: block; height: 1px; margin-top: 60px; background: var(--line-strong); transform: scaleY(.5); }
.ab-do .h1 { margin: 0; color: var(--forest); }
.ab-do__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
.ab-do__item { display: grid; align-content: start; gap: 28px; padding: 32px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); }
.ab-do__item p { margin: 0; font-size: 20px; line-height: 1.5; color: var(--forest); }
.ab-tile { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--mint-light); color: var(--forest); flex: none; }
.ab-tile svg [data-color="color-2"], .ab-tile svg [fill-opacity], .ab-tile svg [opacity] { color: var(--deep-green); }
.ab-tile--sm { width: 44px; height: 44px; border-radius: 12px; }

/* The four short sections as panels: hospitals and payment, then information and who we are */
.ab-panels { padding: 60px 0 120px; }
.ab-panels__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
/* Bento (user request, 4 Nov; Mobbin: IKEA, Readymag, Melius): two photos between the panels */
.ab-photo { margin: 0; overflow: hidden; border-radius: var(--r-xl); background: var(--bone-deep); }
.ab-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-photo--hosp { grid-column: 1 / span 7; grid-row: 1 / span 2; min-height: 560px; }
.ab-panel--hosp { grid-column: 8 / span 5; grid-row: 1; }
.ab-panel--paid { grid-column: 8 / span 5; grid-row: 2; }
.ab-panel--info { grid-column: 1 / span 4; grid-row: 3; }
.ab-panel--who { grid-column: 5 / span 5; grid-row: 3; }
.ab-photo--cph { grid-column: 10 / span 3; grid-row: 3; min-height: 420px; }
.ab-panel { display: grid; align-content: start; gap: 20px; padding: 48px; border-radius: var(--r-xl); background: var(--white); border: 1px solid var(--line); }
.ab-panel .h2 { margin: 0; color: var(--forest); }
.ab-panel p { margin: 0; max-width: 56ch; font-size: 20px; line-height: 1.6; color: var(--muted); }
.ab-panel a { color: var(--emerald); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ab-panel--paid { background: var(--mint-light); border-color: transparent; }
.ab-panel--paid p { color: var(--forest); }
.ab-panel--paid .ab-tile { background: var(--white); }
.ab-panel--who { gap: 28px; }
.ab-who__text { display: grid; gap: 20px; }
.ab-addr { display: inline-flex; justify-self: start; gap: 16px; align-items: flex-start; padding: 24px 28px 24px 24px; border-radius: var(--r-lg); background: var(--bone); font-style: normal; font-size: 18px; line-height: 1.6; color: var(--forest); white-space: nowrap; }
.ab-addr .ab-tile { background: var(--white); }
.page-about .tp-book { padding-top: 0; padding-bottom: 120px; }
.page-about .footer { margin-top: 0; }

@media (max-width: 960px) {
  .ab-hero { padding: 24px 0 48px; }
  .ab-hero__grid { grid-template-columns: 1fr; gap: 24px; }
  .ab-lead { font-size: 18px; }
  .ab-why { padding-bottom: 72px; }
  .ab-why .wrap { padding: 0 16px; }
  .ab-why__sheet { padding: 48px 24px; border-radius: var(--r-lg); }
  .ab-why__mark { width: 420px; right: -100px; bottom: -90px; }
  .ab-why__text { columns: 1; margin-top: 40px; }
  .ab-why__text p { font-size: 18px; }
  .ab-do .wrap::after { margin-top: 40px; }
  .ab-do__list { grid-template-columns: 1fr; }
  .ab-do__item { padding: 24px; gap: 20px; }
  .ab-do__item p, .ab-panel p { font-size: 18px; }
  .ab-panels { padding: 40px 0 72px; }
  .ab-panels__grid { grid-template-columns: 1fr; }
  .ab-panel--hosp, .ab-panel--who, .ab-panel--paid, .ab-panel--info, .ab-photo--hosp, .ab-photo--cph { grid-column: auto; grid-row: auto; }
  .ab-photo--hosp { min-height: 0; aspect-ratio: 3 / 2; }
  .ab-photo--cph { min-height: 0; aspect-ratio: 4 / 3; }
  .ab-panel { padding: 28px 24px; border-radius: var(--r-lg); }
  .ab-addr { white-space: normal; }
  .page-about .tp-book { padding-bottom: 72px; }
}

/* ============ Contact (contact.html, body.page-contact): the wireframe's elements only, CSS prefix ct- ============ */
.ct-hero { padding: 132px 0 72px; }
.ct-hero .display { margin: 0; color: var(--forest); font-size: clamp(42px, 3.9vw, 56px); }
.ct-lead { margin: 24px 0 0; max-width: 66ch; font-size: 20px; line-height: 1.6; color: var(--muted); }
.ct-ways { padding: 0 0 120px; scroll-margin-top: 96px; }
.ct-ways__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-items: start; }
.ct-ways .way--booking { border: 1px solid var(--line); }
.ct-side { display: grid; gap: 16px; }
/* Post runs down to the bottom of the booking card, with the documents line at its foot (user, 4 Nov) */
.ct-post__lines { margin: 0; }
.ct-card { display: grid; justify-items: start; gap: 16px; padding: 40px; border-radius: var(--r-xl); background: var(--white); border: 1px solid var(--line); scroll-margin-top: 96px; }
.ct-card .h3 { margin: 0; font-size: 24px; color: var(--forest); }
.ct-tile { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--mint-light); color: var(--forest); flex: none; }
.ct-tile svg [data-color="color-2"], .ct-tile svg [fill-opacity], .ct-tile svg [opacity] { color: var(--deep-green); }
.ct-tile--sm { width: 40px; height: 40px; border-radius: 12px; }
.ct-open { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; font: inherit; font-size: 18px; font-weight: 600; color: var(--emerald); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(11, 101, 76, .35); }
.ct-open:hover { text-decoration-color: var(--emerald); }
.ct-open .i-arrow { transition: transform .2s; }
.ct-open:hover .i-arrow { transform: translateX(3px); }
.ct-write__form { justify-self: stretch; display: grid; gap: 16px; }
.ct-write__form[hidden], .ct-write__closed[hidden] { display: none; }
.ct-intro { margin: 0; font-size: 18px; line-height: 1.55; color: var(--muted); }
.ct-form { display: grid; gap: 16px; }
.ct-form textarea { width: 100%; min-height: 144px; padding: 14px 16px; border-radius: var(--r-sm); border: 1.5px solid transparent; background: var(--bone); font: inherit; font-size: 16px; color: var(--forest); resize: vertical; }
.ct-form textarea:focus { outline: none; border-color: var(--forest); }
.ct-warn { margin: 0; font-size: 15px; line-height: 1.5; color: var(--forest); }
.ct-addr-line { margin: 0; font-size: 16px; color: var(--muted); }
.ct-addr-line a { color: var(--emerald); font-weight: 600; }
.ct-chat { display: flex; align-items: center; gap: 14px; margin: 0; padding: 20px 24px; border-radius: var(--r-lg); background: var(--mint-light); font-size: 17px; color: var(--forest); }
.ct-chat .ct-tile { background: var(--white); }
.ct-chat a { color: var(--forest); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ct-post__lines { font-style: normal; font-size: 18px; line-height: 1.6; color: var(--forest); }
.ct-docs { justify-self: stretch; display: flex; gap: 12px; align-items: flex-start; margin: 8px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5; color: var(--forest); }
.ct-docs__icon { flex: none; margin-top: 2px; color: var(--forest); }
.ct-docs__icon svg [data-color="color-2"], .ct-docs__icon svg [fill-opacity] { color: var(--deep-green); }
.page-contact .footer { margin-top: 0; }
@media (max-width: 960px) {
  .ct-hero { padding: 24px 0 40px; }
  .ct-lead { font-size: 18px; }
  .ct-ways { padding-bottom: 72px; }
  .ct-ways__grid { grid-template-columns: 1fr; }
  .ct-card { padding: 28px 24px; border-radius: var(--r-lg); }
}

/* ============ Consent Form entry page (consent-form.html, body.page-consent): wireframe elements only, CSS prefix cf- ============ */
.cf-hero { padding: 132px 0 72px; }
.cf-hero .display { margin: 0; color: var(--forest); font-size: clamp(42px, 3.9vw, 56px); }
.cf-lead { margin: 24px 0 0; max-width: 66ch; font-size: 20px; line-height: 1.6; color: var(--muted); }
.cf-tile { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--mint-light); color: var(--forest); flex: none; }
.cf-tile svg [data-color="color-2"], .cf-tile svg [fill-opacity], .cf-tile svg [opacity] { color: var(--deep-green); }
.cf-card { display: grid; align-content: start; justify-items: start; gap: 20px; padding: 48px; border-radius: var(--r-xl); background: var(--white); border: 1px solid var(--line); }
.cf-card .h2 { margin: 0; color: var(--forest); }
.cf-card p { margin: 0; max-width: 62ch; font-size: 20px; line-height: 1.6; color: var(--muted); }
.cf-card--wide { grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: start; }
.cf-card--wide .cf-tile { grid-row: span 2; }
.cf-card--mint { background: var(--mint-light); border-color: transparent; }
.cf-card--mint .cf-tile { background: var(--white); }
.cf-card--mint p { color: var(--forest); }
.cf-row { padding: 0 0 60px; }
/* What the form asks: seven parts as cards, the last one (consents and signature) across the full width */
.cf-asks { padding: 60px 0 120px; }
.cf-asks__head { display: grid; gap: 16px; }
.cf-asks__head .h1 { margin: 0; color: var(--forest); }
.cf-asks__head p { margin: 0; font-size: 20px; line-height: 1.6; color: var(--muted); }
.cf-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 40px 0 0; padding: 0; list-style: none; }
.cf-part { display: grid; align-content: start; gap: 24px; padding: 32px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); }
.cf-part p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--muted); }
.cf-part strong { color: var(--forest); font-weight: 700; }
.cf-part--wide { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 28px; background: var(--mint-light); border-color: transparent; }
.cf-part--wide .cf-tile { background: var(--white); }
.cf-part--wide p { max-width: 96ch; color: var(--forest); }
.cf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cf-next { grid-column: 1 / -1; }
.cf-next__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 64px; }
/* Closing call to action: the one page where the Consent Form is the main button (it opens the secure tool) */
.cf-cta { padding: 60px 0 120px; }
.cf-cta__sheet { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 56px 64px; border-radius: var(--r-xl); background: var(--forest); color: var(--bone); }
.cf-cta__text { margin: 0; max-width: 30ch; font-family: var(--font-head); font-weight: 700; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.15; letter-spacing: -0.025em; color: var(--white); text-wrap: balance; }
.cf-cta__btn { flex: none; background: var(--mint-light); color: var(--forest); }
.cf-cta__btn .btn__arrow { background: var(--forest); color: var(--mint-light); }
.cf-cta__btn:hover { background: var(--white); }
.page-consent .footer { margin-top: 0; }
@media (max-width: 960px) {
  .cf-hero { padding: 24px 0 40px; }
  .cf-lead { font-size: 18px; }
  .cf-card { padding: 28px 24px; border-radius: var(--r-lg); gap: 16px; }
  .cf-card--wide { grid-template-columns: 1fr; }
  .cf-card--wide .cf-tile { grid-row: auto; }
  .cf-card p, .cf-asks__head p { font-size: 18px; }
  .cf-row { padding-bottom: 40px; }
  .cf-asks { padding: 40px 0 72px; }
  .cf-parts, .cf-grid, .cf-next__cols { grid-template-columns: 1fr; }
  .cf-part { padding: 24px; gap: 16px; }
  .cf-part--wide { grid-template-columns: 1fr; }
  .cf-cta { padding: 40px 0 72px; }
  .cf-cta__sheet { flex-direction: column; align-items: flex-start; padding: 32px 24px; border-radius: var(--r-lg); }
}

/* Before you start: text beside a photo of a patient filling in the form with a family member helping (user, 4 Nov) */
.cf-before { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; border-radius: var(--r-xl); background: var(--white); border: 1px solid var(--line); }
.cf-before__text { display: grid; align-content: center; justify-items: start; gap: 20px; padding: 56px; }
.cf-before__text .h2 { margin: 0; color: var(--forest); }
.cf-before__text p { margin: 0; max-width: 46ch; font-size: 20px; line-height: 1.6; color: var(--muted); }
.cf-before__photo { margin: 0; min-height: 420px; }
.cf-before__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
@media (max-width: 960px) {
  .cf-before { grid-template-columns: 1fr; border-radius: var(--r-lg); }
  .cf-before__text { padding: 28px 24px; gap: 16px; }
  .cf-before__text p { font-size: 18px; }
  .cf-before__photo { min-height: 0; aspect-ratio: 4 / 3; order: -1; }
}

/* ============ Brief v16 (4 Nov): cookie banner, chat button, footer cookie settings ============ */
.cookie__inner { align-items: flex-end; max-width: 1180px; }
.cookie__text { flex: 1; display: grid; gap: 8px; }
.cookie__inner .cookie__title { flex: none; font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--forest); }
.cookie__inner .cookie__links { flex: none; }
.cookie__actions .btn { min-width: 132px; }            /* Accept all and Reject all: same size, same colour */
.footer__link-btn { padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: var(--bone); cursor: pointer; }
.footer__link-btn:hover { text-decoration: underline; text-underline-offset: 4px; color: var(--mint); }
.chat { position: fixed; right: 24px; bottom: 24px; z-index: 45; display: grid; justify-items: end; gap: 12px; }
.chat__btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px 0 18px; border: 0; border-radius: 999px; background: var(--forest); color: var(--bone); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 16px 32px -16px rgba(13, 59, 46, .6); }
.chat__btn svg { color: var(--mint-light); }
.chat__btn:hover { background: var(--emerald); }
.chat__panel { position: relative; width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 120px); overflow: auto; display: grid; gap: 12px; padding: 24px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); box-shadow: 0 30px 60px -20px rgba(13, 59, 46, .4); order: -1; }
.chat__panel[hidden] { display: none; }
.chat__close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--bone); font-size: 20px; line-height: 1; color: var(--forest); cursor: pointer; }
.chat__welcome { margin: 0 32px 0 0; padding: 14px 16px; border-radius: 16px 16px 16px 4px; background: var(--mint-light); font-size: 15px; line-height: 1.5; color: var(--forest); }
.chat__title { margin: 4px 0 0; font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--forest); }
.chat__intro { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.chat__form { display: grid; gap: 12px; }
.chat__form .field input { min-height: 44px; }
.chat__note { margin: 0; padding-left: 10px; border-left: 3px solid var(--line-strong); font-size: 13px; line-height: 1.5; color: var(--muted); }
.chat__note a { color: var(--emerald); font-weight: 600; }
@media (max-width: 960px) {
  .chat { right: 16px; bottom: 84px; }                 /* above the phone bar */
  .chat__btn span { display: none; }
  .chat__btn { width: 52px; padding: 0; justify-content: center; }
  .cookie__inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .cookie__actions { flex-wrap: wrap; }
  .cookie__actions .btn { flex: 1; }
}
.chat__form .field__help { font-size: 13px; line-height: 1.45; margin: 0; }

/* Questions without an accordion: every answer readable without clicking (brief v16; user, 4 Nov) */
.qa-cards { display: grid; gap: 12px; }
.qa-cards--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.qa-cards--grid .qa-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.qa-card { display: grid; align-content: start; gap: 10px; padding: 28px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); }
.qa-card h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; color: var(--forest); }
.qa-card p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--muted); }
@media (max-width: 960px) {
  .qa-cards--grid { grid-template-columns: 1fr; }
  .qa-card { padding: 22px 20px; }
}

/* Navigation (user, 4 Nov): smaller links; the country picker shows only the flag */
.nav__list > li > a { font-size: 15px; padding: 0 11px; }
.nav__actions .country__toggle { padding: 0 14px 0 16px; gap: 8px; }
.country__flag { font-size: 20px; line-height: 1; }

/* Treatments list: hover state (user, 4 Nov). Only on devices with a real pointer; no image on hover (brief v16) */
.page-a .treat__list .treat__name, .page-b .treat__list .treat__name { transition: color .2s, transform .25s; }
.page-a .treat__list .treat__go, .page-b .treat__list .treat__go { transition: background-color .2s, border-color .2s, color .2s, transform .25s; }
@media (hover: hover) and (pointer: fine) {
  .page-a .treat__list a:hover .treat__name, .page-b .treat__list a:hover .treat__name { color: var(--emerald); transform: translateX(8px); }
  .page-a .treat__list a:hover .treat__go, .page-b .treat__list a:hover .treat__go { background: var(--forest); border-color: var(--forest); color: var(--mint-light); transform: translateX(-4px); }
}

/* Booking: the help line under Telephone keeps the height of the longer text in both modes (user, 4 Nov) */
.mode-stack { display: grid; }
.mode-stack > span { grid-area: 1 / 1; }
.mode-stack > span[aria-hidden="true"] { visibility: hidden; }

/* Booking step 2: parts that do not apply keep their space (user, 4 Nov) */
.booking .is-off { visibility: hidden; }
.chip--ghost { visibility: hidden; pointer-events: none; }
/* Booking: the form always has the same height (user, 4 Nov). The three steps share one grid cell, so the card
   takes the height of the tallest step; the steps not shown are invisible (not focusable, not read out). */
.booking > .booking__step { grid-area: 1 / 1; align-self: start; }
.booking > .booking__step[hidden] { display: none !important; }   /* the card follows the step on screen, no empty space under step 1 (Kaare, 6 Nov; it kept one height for every step before) */
.booking > .privacy-line { grid-area: 2 / 1; }
.booking [data-summary] { min-height: 3.2em; }   /* two lines before it is filled, so step 2 has its final height from the start */

/* Large screens (user, 4 Nov): the coloured sheets (final band, footer) stop at the width they have at 1600px
   (1568px) and centre, instead of running edge to edge; at 1600px and below nothing changes. */
.sheet { margin-left: max(16px, calc((100% - 1568px) / 2)); margin-right: max(16px, calc((100% - 1568px) / 2)); }

/* ============ LEGAL PAGES (template L): privacy, cookies, complaints, cancellation ============ */
.lg-hero { padding: 132px 0 48px; }
.lg-hero .display { margin: 0; color: var(--forest); font-size: clamp(42px, 3.9vw, 56px); }
.lg-short__card { max-width: 920px; padding: 40px; border-radius: var(--r-xl); background: var(--mint-light); color: var(--forest); }
.lg-short__card .h3 { margin: 0 0 20px; font-size: 24px; }
.lg-short__list { display: grid; gap: 16px; margin: 0; padding: 0 0 0 22px; font-size: 18px; line-height: 1.6; }
.lg-short__list li::marker { color: var(--emerald); }
.lg-full { padding: 72px 0 120px; }
.lg-full .h2 { margin: 0 0 24px; color: var(--forest); }
.lg-full__list { max-width: 920px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.lg-full__list li { display: flex; gap: 20px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 18px; line-height: 1.5; color: var(--forest); font-weight: 600; }
.lg-full__num { flex: none; width: 28px; font-size: 16px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.lg-full__todo { max-width: 920px; margin: 24px 0 0; padding: 20px 24px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); font-size: 17px; color: var(--muted); }
.nf { padding-bottom: 120px; }
.nf__lead { max-width: 60ch; margin: 24px 0 0; font-size: 20px; line-height: 1.6; color: var(--muted); }
.nf__links { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }
@media (max-width: 960px) {
  .lg-hero { padding: 24px 0 32px; }
  .lg-short__card { padding: 28px 24px; border-radius: var(--r-lg); }
  .lg-full { padding: 48px 0 72px; }
}

/* =====================================================================================================
   PHONES AND SMALL TABLETS (user, 4 Nov): one column, the header as a bar with a menu button,
   the phone bar at the bottom. Written last so it wins over the desktop rules above.
   ===================================================================================================== */
.nav__toggle { display: none; }
@media (max-width: 960px) {
  :root { --edge: 16px; }
  html, body { overflow-x: clip; }

  /* Header: logo, flag, menu button; the menu opens as a panel inside the bar */
  .nav-shell { top: 8px; }
  .page-a .nav, .page-b .nav, .nav { height: 64px; flex-wrap: wrap; align-content: flex-start; row-gap: 0; padding: 8px 8px 8px 18px; border-radius: 32px; gap: 8px; }
  .page-a .nav__list, .page-b .nav__list, .nav__list { display: none; order: 3; width: 100%; margin: 0; padding: 8px 4px 12px; background: none; overflow: visible;
    flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--line); }
  .nav.is-menu-open { height: auto; border-radius: 28px; }
  .nav.is-menu-open .nav__list { display: flex; }
  .nav__list > li > a { height: 52px; padding: 0 12px; font-size: 18px; border-radius: 14px; justify-content: space-between; }
  .nav__list > li > a .chev { display: none; }
  .nav__list .mega { display: none !important; }
  .nav__actions { margin-left: auto; gap: 6px; }
  .nav__actions > .btn { display: none; }
  .nav__actions .country__toggle { min-height: 48px; padding: 0 12px 0 14px; }
  .country__menu { right: 0; left: auto; }
  .nav__toggle { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--forest); color: var(--bone); cursor: pointer; }
  .nav__toggle-lines { display: grid; gap: 5px; }
  .nav__toggle-lines span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s; }
  .nav.is-menu-open .nav__toggle-lines span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav.is-menu-open .nav__toggle-lines span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .logo__word { font-size: 22px; }

  /* Type */
  .display, .hero-split__copy .display, .fq-hero .display, .ab-hero .display, .ct-hero .display, .cf-hero .display { font-size: clamp(32px, 8.6vw, 40px); line-height: 1.06; overflow-wrap: break-word; }
  .h1 { font-size: clamp(26px, 7vw, 32px); }
  .h2 { font-size: clamp(24px, 6.4vw, 28px); }

  /* Every multi-column grid becomes one column */
  .hero__top, .hero-split, .rights__grid, .phases, .how-tl, .treat__grid, .treat__bento, .treat__areas, .final__grid,
  .qa, .faq-split, .tp-trust__grid, .tp-hsteps, .tp-hsteps-sheet .tp-good, .tp-flow, .tp-cost__foot, .tp-about__grid,
  .tp-final__grid, .hw-hero__grid, .hw-band__card, .hw-band__card--dark, .hw-money__more, .tp-detail, .tx-grid, .tx-why__list,
  .tx-not__card, .rt-hero__grid, .rt-body__grid, .rt-lower, .rt-contacts, .fq-group__grid, .ab-do__list, .ab-panels__grid,
  .ct-ways__grid, .cf-parts, .cf-grid, .cf-next__cols, .cf-before, .qa-cards--grid, .step-cards, .mflow, .rt-chain,
  .hw-band__points, .tp-hsteps-sheet .tp-good .tp-ticks { grid-template-columns: minmax(0, 1fr) !important; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer__local { grid-column: 1 / -1; }
  .field-row { grid-template-columns: 1fr; }
  .phone-input { grid-template-columns: 150px 1fr; }
  .days { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .slots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .mode-toggle { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* Sticky side columns stop being sticky */
  .faq-split__intro, .fq-group__side, .rt-toc, .ct-side { position: static !important; }
  .rt-toc { display: none; }

  /* Sheets and cards breathe less */
  .sheet { margin-left: 8px; margin-right: 8px; border-radius: var(--r-lg); }
  .way--booking { padding: 24px 20px; }
  .contact-card { min-height: 420px; }
  .final { padding-top: 40px; }
  .footer { padding-top: 40px; }
  .tl2__card--icon { gap: 16px; }
  .ab-do__item { gap: 16px; }
  .footer__grid { padding-bottom: 40px; }

  /* Kaare on phones (brief): the heading, a small photo, then the form */
  .contact-card, .contact-card.tp-kaare { min-height: 0; display: block; background: var(--forest); padding: 24px 20px; }
  .contact-card::after, .contact-card.tp-kaare::after { display: none; }
  .contact-card .contact-card__bg, .contact-card.tp-kaare .contact-card__bg { position: static; display: block; width: 72px; height: 72px; border-radius: 50%; object-position: 50% 0%; object-fit: cover; margin-bottom: 16px; }
  .contact-card__body { padding: 0; margin: 0; }

  /* Booking: tabs on one line, country code readable */
  .booking-steps { gap: 14px; }
  .booking-steps li { font-size: 13px !important; white-space: nowrap; }
  .phone-input { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .phone-input select { font-size: 15px; padding-right: 28px; text-overflow: ellipsis; }

  /* Decorations stay inside their card */
  .qa__help-mark { right: -24px; bottom: -48px; width: 180px; height: 180px; }

  /* The chat button and the phone bar; the bar steps aside while the booking block is on screen */
  .chat { bottom: 84px; }
  .phone-bar { transition: transform .25s ease, opacity .25s ease; }
  body.booking-in-view .phone-bar { transform: translateY(110%); opacity: 0; pointer-events: none; }
  body.booking-in-view .chat { bottom: 16px; }
  .chat { transition: bottom .25s ease; }
}
@media (max-width: 600px) {
  .nav__actions .country__toggle .chev { display: none; }
  .mode-toggle { grid-template-columns: 1fr; }
  .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .days { grid-template-columns: repeat(5, minmax(56px, 1fr)); overflow-x: auto; }
}

/* ============ TEXT SIZE FLOOR (brief 7.4: running text at least 17px) ============
   Sentences people read are 17px or more on every screen. UI labels (buttons, chips, menu, tabs, numbers)
   stay at 16px, and the sources footnotes stay at 14px (client, 4 Nov). */
.chat__intro, .chat__welcome, .chat__note, .chat .field__help,
.cookie__text p, .cookie__links,
.ct-warn, .ct-addr-line, .ct-docs,
.rt-chain__step p, .rt-guide__text,
.tp-final__small, .booking__done .muted, .page-a .mode__sub, .tp-next, .tp-next--hero, .rt-guide__text strong, .rt-guide__text span,
.page-a .hero-points__item, .rt-law dd, .tp-trust__claims span:not(.stat__num),
.form-error, .field__error { font-size: 17px; }
.slots .chip, .days .chip { font-size: 16px; }
.days .chip small { font-size: 14px; }

/* ============ PHONES AND TABLETS, 6 Nov (user: sections touching, fixed things over the content) ============ */
@media (max-width: 960px) {
  /* Nothing stays stuck on screen while the content scrolls: the front-page "Treatments covered" photo was sticky */
  .treat__feature { position: relative; top: auto; }
}
@media (min-width: 601px) and (max-width: 960px) {
  .treat__feature { aspect-ratio: 16 / 10; }   /* a tablet-wide 4:5 photo was about 920px tall */
}
@media (max-width: 960px) {

  /* Every page title sits 40px under the navigation bar (it was 8 to 16px on these pages) */
  .hw-hero, .rt-hero { padding-top: 48px; }
  .fq-hero, .ab-hero, .ct-hero, .cf-hero, .lg-hero { padding-top: 48px; }

  /* The chat button joins the bottom bar instead of floating over the text: the bar keeps room for it on the
     right, and the button sits in the middle of the bar's height. When the bar steps aside (booking on screen),
     the button stays in the same place. */
  .phone-bar { padding-right: 78px; }
  .chat, body.booking-in-view .chat { right: 16px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }

  /* While the cookie banner is open it is the only thing at the bottom: no chat button or bar on top of it */
  html.show--consent .phone-bar { display: none; }
  .cookie { bottom: 0; padding: 0; }
  .cookie__inner { max-height: 75vh; overflow-y: auto; gap: 14px; padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; }
  .cookie__text { gap: 6px; }
  .cookie__actions { gap: 8px; }
  .cookie__actions .btn { flex: 1 1 40%; min-width: 0; }
  .cookie__actions .link-btn { flex: 1 1 100%; padding: 4px 0; }
}
@media (max-width: 960px) {
  /* "Before you commit" and "After you commit" one under the other with space between them (they touched: the
     desktop grid that lines their steps up side by side has no row gap) */
  .page-a .phases { grid-template-rows: none; row-gap: 12px; }
  .page-a .phase { display: flex; grid-row: auto; grid-template-rows: none; }

  /* Booking on phones: the card follows the step on screen, so step 1 has no empty space under it (on desktop
     every step keeps the same height, user 4 Nov). The chat button steps aside with the bar while the booking
     block is on screen, so it never covers the form. */
  body.booking-in-view .chat { opacity: 0; pointer-events: none; }
  .chat { transition: opacity .25s ease; }
}


/* ============ BOOKING FORM (pack 7.12-booking-v3, 6 Nov) ============
   Kaare's js/ablement-booking.js draws the form inside [data-booking-frame] when a "Schedule a free call" is clicked
   (it opens only on a click, Kaare 3 Nov). Its own stylesheet (css/ablement-booking.css) gives the base; these rules
   give it the look of the booking card in Figma: the two call types as cards with their icons, the step line,
   bone fields, name and e-mail side by side, the telephone with its country list in one field, chips for days and
   times, and the site's forest buttons. Scoped to .way--booking, so they win over the pack's rules. */
.way--booking .ab-booking__frame { --ab-small: 16px; --ab-size: 16px; color: var(--forest); }
.way--booking .ab-booking__panel { gap: 24px; min-width: 0; }
.way--booking .ab-booking__frame a { color: var(--emerald); }
.way--booking .ab-booking__small { font-size: 16px; line-height: 1.45; color: var(--muted); }
.way--booking .ab-booking__frame :focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }

/* Video meeting or phone call */
.way--booking .ab-booking__choices { gap: 10px; }
.way--booking .ab-booking__choice {
  position: relative; display: grid; align-content: start; gap: 2px; min-height: 0; padding: 14px 16px 14px 46px;
  border-radius: var(--r-sm); background: var(--bone); border: 1.5px solid transparent; box-shadow: none;
}
.way--booking .ab-booking__choice > span:last-child { display: grid; gap: 2px; }
.way--booking .ab-booking__choice strong { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.way--booking .ab-booking__choice strong::before {
  content: ""; flex: none; width: 18px; height: 18px; background: var(--forest);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M10.25 4.25H3.75C2.645 4.25 1.75 5.145 1.75 6.25V11.75C1.75 12.855 2.645 13.75 3.75 13.75H10.25C11.355 13.75 12.25 12.855 12.25 11.75V6.25C12.25 5.145 11.355 4.25 10.25 4.25Z' fill='%23000' fill-opacity='.3'/%3E%3Cpath d='M10.25 4.25H3.75C2.645 4.25 1.75 5.145 1.75 6.25V11.75C1.75 12.855 2.645 13.75 3.75 13.75H10.25C11.355 13.75 12.25 12.855 12.25 11.75V6.25C12.25 5.145 11.355 4.25 10.25 4.25Z' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M12.25 7.75L15.474 5.597C15.806 5.375 16.25 5.613 16.25 6.012V11.988C16.25 12.387 15.806 12.625 15.474 12.403L12.25 10.25' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M10.25 4.25H3.75C2.645 4.25 1.75 5.145 1.75 6.25V11.75C1.75 12.855 2.645 13.75 3.75 13.75H10.25C11.355 13.75 12.25 12.855 12.25 11.75V6.25C12.25 5.145 11.355 4.25 10.25 4.25Z' fill='%23000' fill-opacity='.3'/%3E%3Cpath d='M10.25 4.25H3.75C2.645 4.25 1.75 5.145 1.75 6.25V11.75C1.75 12.855 2.645 13.75 3.75 13.75H10.25C11.355 13.75 12.25 12.855 12.25 11.75V6.25C12.25 5.145 11.355 4.25 10.25 4.25Z' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M12.25 7.75L15.474 5.597C15.806 5.375 16.25 5.613 16.25 6.012V11.988C16.25 12.387 15.806 12.625 15.474 12.403L12.25 10.25' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
.way--booking .ab-booking__choice[data-mode="phone"] strong::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.733 2.043C5.488 1.553 4.938 1.297 4.406 1.43L2.761 1.84C2.152 1.992 1.73 2.553 1.763 3.18C2.161 10.755 7.245 15.839 14.82 16.237C15.447 16.27 16.008 15.848 16.16 15.239L16.57 13.594C16.703 13.062 16.447 12.512 15.957 12.267L13.917 11.247C13.496 11.037 12.987 11.124 12.66 11.464L11.54 12.627C9.155 11.54 6.46 8.845 5.373 6.46L6.536 5.34C6.876 5.013 6.963 4.504 6.753 4.083L5.733 2.043Z' fill='%23000' fill-opacity='.3'/%3E%3Cpath d='M5.733 2.043C5.488 1.553 4.938 1.297 4.406 1.43L2.761 1.84C2.152 1.992 1.73 2.553 1.763 3.18C2.161 10.755 7.245 15.839 14.82 16.237C15.447 16.27 16.008 15.848 16.16 15.239L16.57 13.594C16.703 13.062 16.447 12.512 15.957 12.267L13.917 11.247C13.496 11.037 12.987 11.124 12.66 11.464L11.54 12.627C9.155 11.54 6.46 8.845 5.373 6.46L6.536 5.34C6.876 5.013 6.963 4.504 6.753 4.083L5.733 2.043Z' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.733 2.043C5.488 1.553 4.938 1.297 4.406 1.43L2.761 1.84C2.152 1.992 1.73 2.553 1.763 3.18C2.161 10.755 7.245 15.839 14.82 16.237C15.447 16.27 16.008 15.848 16.16 15.239L16.57 13.594C16.703 13.062 16.447 12.512 15.957 12.267L13.917 11.247C13.496 11.037 12.987 11.124 12.66 11.464L11.54 12.627C9.155 11.54 6.46 8.845 5.373 6.46L6.536 5.34C6.876 5.013 6.963 4.504 6.753 4.083L5.733 2.043Z' fill='%23000' fill-opacity='.3'/%3E%3Cpath d='M5.733 2.043C5.488 1.553 4.938 1.297 4.406 1.43L2.761 1.84C2.152 1.992 1.73 2.553 1.763 3.18C2.161 10.755 7.245 15.839 14.82 16.237C15.447 16.27 16.008 15.848 16.16 15.239L16.57 13.594C16.703 13.062 16.447 12.512 15.957 12.267L13.917 11.247C13.496 11.037 12.987 11.124 12.66 11.464L11.54 12.627C9.155 11.54 6.46 8.845 5.373 6.46L6.536 5.34C6.876 5.013 6.963 4.504 6.753 4.083L5.733 2.043Z' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); }
.way--booking .ab-booking__choice .ab-booking__small { color: var(--muted); }
.way--booking .ab-booking__choice-mark { position: absolute; left: 16px; top: 17px; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--stone); }
.way--booking .ab-booking__choice:hover { border-color: rgba(13, 59, 46, .3); }
.way--booking .ab-booking__choice.is-on { background: var(--white); border-color: var(--forest); box-shadow: 0 0 0 3px rgba(159, 233, 191, .25); }
.way--booking .ab-booking__choice.is-on .ab-booking__choice-mark { border-color: var(--forest); background: var(--forest); box-shadow: inset 0 0 0 3.5px var(--white); }

/* 1. Your details · 2. Pick a time · 3. Confirmation, with the line under the current step */
.way--booking .ab-booking__steps { flex-wrap: nowrap; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 16px; }
.way--booking .ab-booking__steps li { position: relative; display: block; opacity: 1; font-weight: 600; color: rgba(13, 59, 46, .5); white-space: nowrap; }
.way--booking .ab-booking__steps li.is-current { color: var(--forest); font-weight: 600; }
.way--booking .ab-booking__steps li.is-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -15px; height: 2px; background: var(--forest); }
.way--booking .ab-booking__steps li.is-done { color: var(--emerald); }
.way--booking .ab-booking__step-number,
.way--booking .ab-booking__steps li.is-current .ab-booking__step-number { display: inline; width: auto; height: auto; border: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; font-weight: inherit; }
.way--booking .ab-booking__step-number::after { content: "."; }

/* Step 1: the fields; name and e-mail side by side */
.way--booking .ab-booking__form { grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.way--booking .ab-booking__form > * { grid-column: 1 / -1; min-width: 0; }
.way--booking .ab-booking__form > .ab-booking__field:nth-child(-n+2) { grid-column: auto; }
.way--booking .ab-booking__field { gap: 8px; align-content: start; min-width: 0; }
.way--booking .ab-booking__field > label, .way--booking .ab-booking__label { font-size: 16px; font-weight: 600; }
.way--booking .ab-booking__frame input[type="text"],
.way--booking .ab-booking__frame input[type="email"],
.way--booking .ab-booking__frame input[type="tel"],
.way--booking .ab-booking__frame select {
  min-height: 48px; padding: 0 16px; border-radius: var(--r-sm); border: 1.5px solid transparent; background: var(--bone); font-size: 16px;
}
.way--booking .ab-booking__frame input:focus, .way--booking .ab-booking__frame select:focus { outline: none; border-color: var(--forest); }
.way--booking .ab-booking__frame input::placeholder { color: var(--muted); }
.way--booking .ab-booking__frame select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; background: var(--bone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230d3b2e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center; text-overflow: ellipsis; }
.way--booking .ab-booking__tel { grid-template-columns: 200px 1fr; gap: 0; background: var(--bone); border-radius: var(--r-sm); border: 1.5px solid transparent; }
.way--booking .ab-booking__tel:focus-within { border-color: var(--forest); }
.way--booking .ab-booking__frame .ab-booking__tel select,
.way--booking .ab-booking__frame .ab-booking__tel input { min-height: 45px; border: 0; border-radius: 0; background-color: transparent; }
.way--booking .ab-booking__frame .ab-booking__tel select { border-right: 1px solid var(--line); }
.way--booking .ab-booking__field.has-error input, .way--booking .ab-booking__field.has-error select { border-color: #b3261e; }
.way--booking .ab-booking__field.has-error .ab-booking__tel { border-color: #b3261e; }
.way--booking .ab-booking__error { color: #b3261e; font-size: 17px; font-weight: 600; }
.way--booking .ab-booking__locked { min-height: 48px; padding: 0 16px; border-radius: var(--r-sm); background: rgba(13, 59, 46, .06); }
.way--booking .ab-booking__link { min-height: 0; padding: 4px 0; color: var(--forest); font-weight: 600; text-underline-offset: 4px; }

/* Buttons: the site's forest button; "Add to calendar" outlined */
.way--booking .ab-booking__button {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 2px solid var(--forest); background: var(--forest); color: var(--bone);
  font-size: 16px; font-weight: 700; line-height: 1; transition: background-color .2s, border-color .2s;
}
.way--booking .ab-booking__button:hover { background: var(--emerald); border-color: var(--emerald); }
.way--booking .ab-booking__button--secondary { width: auto; background: transparent; color: var(--forest); border-color: rgba(13, 59, 46, .22); }
.way--booking .ab-booking__button--secondary:hover { background: rgba(0, 0, 0, .06); border-color: var(--forest); color: var(--forest); }
.way--booking .ab-booking__actions { justify-items: stretch; }

/* Step 2: the summary, the days and the times as chips */
.way--booking .ab-booking__summary { justify-content: space-between; align-items: flex-start; gap: 4px 16px; padding: 0 0 16px; border-radius: 0; background: none; border-bottom: 1px solid var(--line); font-size: 16px; }
.way--booking .ab-booking__summary > span:nth-child(2) { flex: 1 1 100%; order: 2; color: var(--muted); }
.way--booking .ab-booking__summary > button { order: 1; }
.way--booking .ab-booking__heading { font-family: var(--font-head); font-size: 18px; font-weight: 700; }
.way--booking .ab-booking__days { flex-wrap: nowrap; gap: 8px; }
.way--booking .ab-booking__day, .way--booking .ab-booking__time, .way--booking .ab-booking__more {
  min-height: 46px; padding: 6px 8px; border-radius: var(--r-sm); border: 1.5px solid transparent; background: var(--bone);
  color: var(--forest); font-size: 16px; font-weight: 600; line-height: 1.15;
}
.way--booking .ab-booking__day { flex: 1 1 0; min-width: 0; }
.way--booking .ab-booking__more { flex: none; background: transparent; border: 1.5px dashed var(--line-strong); font-weight: 500; }
.way--booking .ab-booking__day:hover, .way--booking .ab-booking__time:hover, .way--booking .ab-booking__more:hover { border-color: var(--forest); }
.way--booking .ab-booking__day.is-on, .way--booking .ab-booking__time.is-on { background: var(--forest); color: var(--bone); border-color: var(--forest); }
.way--booking .ab-booking__times { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
.way--booking .ab-booking__time { min-width: 0; min-height: 44px; }
.way--booking .ab-booking__who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.way--booking .ab-booking__who legend { float: left; margin: 0; padding: 0; font-weight: 600; }
.way--booking .ab-booking__radio { min-height: 40px; font-weight: 500; }
.way--booking .ab-booking__radio input { width: 20px; height: 20px; accent-color: var(--forest); }
.way--booking .ab-booking__guests { border-left: 3px solid var(--line); }
.way--booking .ab-booking__guest input { flex: 1; }
.way--booking .ab-booking__notice { padding: 12px 16px; border-radius: var(--r-sm); border-left: 0; background: var(--bone); font-size: 17px; }

/* Step 3: the confirmation, with the round mint tick */
.way--booking .ab-booking__done { max-width: none; padding: 0; background: none; gap: 12px; }
.way--booking .ab-booking__done::before { content: ""; width: 56px; height: 56px; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230d3b2e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px no-repeat; }
.way--booking .ab-booking__done .ab-booking__heading { font-size: 22px; }
.way--booking .ab-booking__done ul { color: var(--muted); font-size: 17px; }

/* Around the frame: the next free time with its live dot (the script fills it in, hidden until it can read the
   free times), the free line, and the card's own heading */
.tp-next[data-next-free]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; background: var(--emerald); box-shadow: 0 0 0 4px rgba(0, 116, 83, .14); }
.tp-next[hidden] { display: none; }
.way--booking > .tp-next { margin-top: -8px; }
/* Before the click (the form opens only on a click, Kaare 3 Nov): the card's few lines sit together in the middle of
   the card, which keeps the photo's height: heading, the free line, the button, the next free time. */
[data-booking]:not([data-booking-state="open"]) .way--booking { align-content: center; gap: 20px; }
[data-booking]:not([data-booking-state="open"]) .way--booking > .tp-free { order: 1; margin: -8px 0 4px; }
[data-booking]:not([data-booking-state="open"]) .way--booking > .ab-booking__frame { order: 2; }
[data-booking]:not([data-booking-state="open"]) .way--booking > .tp-next { order: 3; margin: 0; }
[data-booking]:not([data-booking-state="open"]) .way--booking > noscript { order: 4; }
[data-booking]:not([data-booking-state="open"]) .way__head .h3 { font-size: 28px; }
[data-booking][data-booking-state="open"] .way--booking > .tp-free { display: none; }   /* the form has its own lines */

/* Chat links: Kaare's ablement-chat.js hides every [data-open-chat] until the Crisp identifier is set on launch day;
   the line around such a link goes with it, so no "Want an answer now?" is left without its link. */
li:has(> span > [data-open-chat][hidden]), .ct-chat:has([data-open-chat][hidden]) { display: none; }


@media (max-width: 960px) {
  .way--booking .ab-booking__form { grid-template-columns: 1fr; }
  .way--booking .ab-booking__form > .ab-booking__field:nth-child(-n+2) { grid-column: 1 / -1; }
  .way--booking .ab-booking__tel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .way--booking .ab-booking__steps { gap: 14px; }
  .way--booking .ab-booking__steps li { font-size: 13px; }
  .way--booking .ab-booking__days { flex-wrap: wrap; }
  .way--booking .ab-booking__day { flex: 1 0 calc(33% - 8px); }
  .way--booking .ab-booking__times { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  /* The chat button (when it is live) joins the bottom bar, as the site's own button did */
  body:has(.ab-chat-button:not([hidden])) .phone-bar { padding-right: 78px; }
  .ab-chat-button { right: 16px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: 52px; min-height: 52px; padding: 0; justify-content: center; border: 0; z-index: 60; transition: opacity .25s ease; }
  .ab-chat-button__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.booking-in-view .ab-chat-button { opacity: 0; pointer-events: none; }
  html.show--consent .ab-chat-button { display: none; }
}
@media (max-width: 640px) {
  .way--booking .ab-booking__choices { grid-template-columns: 1fr; }
  .way--booking .ab-booking__tel { grid-template-columns: 1fr; }
  .way--booking .ab-booking__frame .ab-booking__tel select { border-right: 0; border-bottom: 1px solid var(--line); }
  .way--booking .ab-booking__times { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============ LEGAL PAGES: the full texts (Kaare's documents, 6 Nov) ============ */
.lg-lead { max-width: 760px; margin: 20px 0 0; font-size: 20px; line-height: 1.5; color: var(--muted); }
.lg-short__text { margin: 0; font-size: 18px; line-height: 1.6; }
.lg-doc { max-width: 920px; color: var(--forest); font-size: 18px; line-height: 1.65; }
.lg-doc p, .lg-doc ul { margin: 0 0 16px; }
.lg-doc ul { padding-left: 22px; display: grid; gap: 8px; }
.lg-doc li::marker { color: var(--emerald); }
.lg-doc a { color: var(--emerald); font-weight: 600; overflow-wrap: anywhere; }
.lg-intro { padding-bottom: 8px; }
.lg-doc h2 { display: flex; gap: 16px; align-items: baseline; margin: 48px 0 16px; padding-top: 24px; border-top: 1px solid var(--line);
  font-family: var(--font-head); font-size: 26px; line-height: 1.25; scroll-margin-top: 24px; }
.lg-doc h2:first-child { margin-top: 0; }
.lg-sec__num { flex: none; min-width: 28px; font-family: var(--font-sans); font-size: 16px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.lg-doc h3 { margin: 28px 0 12px; font-family: var(--font-head); font-size: 20px; line-height: 1.3; }
.lg-table { margin: 8px 0 24px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); }
.lg-table table { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.5; }
.lg-table th, .lg-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.lg-table th { background: var(--bone); font-weight: 700; }
.lg-table tr:last-child td { border-bottom: 0; }
.lg-table td:first-child { font-weight: 600; }
mark.lg-open { padding: 0 3px; border-radius: 4px; background: #fbe7a1; color: var(--forest); }   /* Kaare's open points, to settle before launch */
.lg-form { padding: 28px 32px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--white); }
.lg-form p:last-child { margin-bottom: 0; }
.lg-version { margin: 40px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 17px; color: var(--muted); }
@media (max-width: 960px) {
  .lg-lead { font-size: 18px; }
  .lg-doc h2 { font-size: 22px; gap: 12px; }
  .lg-table table { min-width: 560px; }
  .lg-form { padding: 20px; }
}

/* ============ CONTACT: the message form on Netlify Forms (Kaare, 6 Nov) ============ */
.ct-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ct-form { position: relative; }
.ct-sent { display: grid; gap: 10px; justify-items: start; outline: none; }
.ct-sent[hidden] { display: none; }
.ct-sent .h3 { margin: 4px 0 0; }
.ct-sent p:not(.h3) { margin: 0; font-size: 18px; color: var(--muted); }
/* Open form: the card's rows stay at the top when the card is held at the photo's height (step 3 is shorter) */
[data-booking][data-booking-state="open"] .way--booking { align-content: start; }
[data-booking][data-booked] .way--booking > .tp-next { display: none; }   /* booked: the next free time is no longer news */
.way--booking .ab-booking__done ul { list-style: disc; padding-left: 22px; }
.way--booking .ab-booking__done li::marker { color: var(--emerald); }
.lg-doc ul { list-style: disc; }
.tp-final__who strong[hidden] { display: none; }

/* ============ COOKIE BANNER (Kaare's 3.19-cookie-banner-v2 on CookieConsent 3.2.1, 6 Nov) ============
   The package's own stylesheet is css/vendor/cookieconsent-3.2.1.css; here only its theme variables take the
   site's values, and its text sizes follow the site's floor (running text 17px, buttons and labels 16px).
   Accept all and Reject all have the same size and colour (equalWeightButtons in the configuration). */
#cc-main {
  --cc-font-family: var(--font-sans);
  --cc-modal-border-radius: var(--r-lg);
  --cc-btn-border-radius: 999px;
  --cc-modal-margin: 16px;
  --cc-z-index: 2147483001;            /* above the chat button, as the chat pack expects */
  --cc-bg: var(--white);
  --cc-primary-color: var(--forest);
  --cc-secondary-color: var(--muted);
  --cc-link-color: var(--emerald);
  --cc-btn-primary-bg: var(--forest);
  --cc-btn-primary-color: var(--bone);
  --cc-btn-primary-border-color: var(--forest);
  --cc-btn-primary-hover-bg: var(--emerald);
  --cc-btn-primary-hover-color: var(--bone);
  --cc-btn-primary-hover-border-color: var(--emerald);
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--forest);
  --cc-btn-secondary-border-color: var(--line-strong);
  --cc-btn-secondary-hover-bg: var(--bone);
  --cc-btn-secondary-hover-color: var(--forest);
  --cc-btn-secondary-hover-border-color: var(--forest);
  --cc-separator-border-color: var(--line);
  --cc-toggle-on-bg: var(--forest);
  --cc-toggle-off-bg: var(--stone);
  --cc-toggle-on-knob-bg: var(--white);
  --cc-toggle-off-knob-bg: var(--white);
  --cc-toggle-enabled-icon-color: var(--forest);
  --cc-toggle-disabled-icon-color: var(--stone);
  --cc-toggle-readonly-bg: var(--mint-light);
  --cc-toggle-readonly-knob-bg: var(--white);
  --cc-toggle-readonly-knob-icon-color: var(--forest);
  --cc-section-category-border: var(--line);
  --cc-cookie-category-block-bg: var(--bone);
  --cc-cookie-category-block-border: var(--bone);
  --cc-cookie-category-block-hover-bg: var(--bone-deep);
  --cc-cookie-category-block-hover-border: var(--bone-deep);
  --cc-cookie-category-expanded-block-bg: var(--white);
  --cc-cookie-category-expanded-block-hover-bg: var(--bone);
  --cc-overlay-bg: rgba(13, 59, 46, .55);
  --cc-footer-bg: var(--bone);
  --cc-footer-color: var(--forest);
  --cc-footer-border-color: var(--line);
  color-scheme: light;
}
#cc-main .cm__title, #cc-main .pm__title { font-family: var(--font-head); font-weight: 700; font-size: 20px; }
#cc-main .cm__desc, #cc-main .pm__section-desc, #cc-main .pm__section-title, #cc-main .section__toggle-wrapper { font-size: 17px; line-height: 1.55; }
#cc-main .cm__btn, #cc-main .pm__btn { min-height: 48px; font-size: 16px; font-weight: 700; }
#cc-main .cm__footer, #cc-main .cm__links, #cc-main .cm__link-group a { font-size: 16px; }
#cc-main .pm__table th, #cc-main .pm__table td { font-size: 16px; }
#cc-main .cm__link-group a { font-weight: 600; }
/* The category blocks in the settings take the site's card corners, not the buttons' pill (they open into a table) */
#cc-main .pm__body { --cc-btn-border-radius: var(--r-sm); }

/* =====================================================================================================
   THE HEADER BUTTON AND THE MENU, 9 Nov 2026 (Kaare): the header button shows the short label in every language
   ("Schedule a call", "Boka samtal", "Avtal samtale"; frame.cta_short), to save space and to be consistent; "free" stays on
   every other button. The space saved goes to the links, which sit a little further apart, the same in every language.
   Below 1240px the links move to a second row (rule above); below 961px the phone panel.
   ===================================================================================================== */
.cta-short { display: none; }
.nav__actions .cta-long { display: none; }
.nav__actions .cta-short { display: inline; }
.nav__list > li > a { font-size: 15px; padding: 0 13px; }
/* One row (1241px and up): the links take the whole width between the divider and the button, with the same space before
   the first link, between the links and before the button (Kaare, 9 Nov). The link boxes are the texts themselves, so the
   spaces are measured text to text; the hover pill is drawn around each text. */
@media (min-width: 1241px) {
  .nav { gap: 0; }
  .nav__list { flex: 1; min-width: 0; justify-content: space-evenly; gap: 0; margin: 0 0 0 32px; padding: 0; }
  .nav__list > li > a { position: relative; z-index: 0; padding: 0; background: none; }
  .nav__list > li > a::before { content: ""; position: absolute; inset: 0 -13px; border-radius: 999px; z-index: -1; transition: background-color .2s; }
  .nav__list > li > a:hover::before, .has-mega.is-open > a::before { background: rgba(0, 0, 0, .1); }
  .nav__list > li > a:hover, .has-mega.is-open > a { background: none; }
}

/* =====================================================================================================
   POST-LAUNCH FIXES, 9 Nov 2026 (Kaare's list "Website fixes post-launch")
   ===================================================================================================== */
/* 1.1 The country picker: drawn flags (assets/img/flags/), rounded like the emblem in "Your right under EU law" */
.country__flag { display: block; width: 27px; height: 18px; border-radius: 4px; object-fit: cover; }
.country__menu-flag { flex: none; width: 24px; height: 16px; border-radius: 3px; object-fit: cover; }
/* 1.2 The footer lists Ablement's other country sections, each with its flag */
.footer__grid { grid-template-columns: 1.3fr 1fr 1.3fr .8fr 1fr; }
.footer__col--countries a { display: inline-flex; align-items: center; gap: 10px; }
.footer__flag { flex: none; width: 27px; height: 18px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .6); }
@media (max-width: 960px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
/* 1.4 The sources line under the statistics, a little smaller */
.page-a .rights .sources, .page-a .sources { font-size: 13px; }
/* 1.6 Each statistic's number and text are centred on each other, as in the design */
.page-a .rights__stat { align-items: center; }
/* 5.3 The footer's cookie-settings button wraps like the links above it, left-aligned */
.footer__link-btn { text-align: left; max-width: 100%; }
/* 1.3 The Questions page ends with the front page's "Your question isn't here? Ask us in the chat" box (the design) */
.fq-help { padding: 8px 0 88px; }
.fq-help__box { max-width: 560px; min-height: 220px; margin: 0; background: transparent; border: 1px solid rgba(13, 59, 46, .12); color: var(--forest); }
.fq-help__box p, .fq-help__box .qa__help-hours { color: var(--muted); font-size: 16px; }
.fq-help__box .qa__help-number, .fq-help__box .qa__help-icon { color: var(--forest); }
.fq-help__box .qa__help-mark { color: var(--forest); opacity: .05; }
.fq-help__box:hover { border-color: rgba(13, 59, 46, .3); }
@media (max-width: 960px) { .fq-help { padding-bottom: 56px; } }
/* 2.1 Treatments page, as in the Figma design (frame "Heading row", 9 Nov): the heading on the left in a 453px column
   (two lines), the chips on the right in an 860px block, wrapping into rows that align to the right edge; the two
   bottom-aligned. The earlier 16ch heading column broke the Swedish and Norwegian headings into three lines. */
.tx-list__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; }
.tx-list__head .h1 { flex: 0 0 auto; max-width: 453px; text-wrap: initial; }   /* breaks as the design does: "Examples of treatments" / "covered" */
html[lang^="sv"] .tx-list__head .h1, html[lang^="nb"] .tx-list__head .h1 { max-width: 560px; }   /* their longer headings in two lines too */
/* The chips take whatever width is left beside the heading (860px at the design's width, less on a laptop) and wrap inside it,
   so they stay beside the heading at every desktop width instead of dropping under it (Kaare, 9 Nov, second round) */
.tx-chips { flex: 1 1 0; min-width: 0; max-width: 860px; justify-content: flex-end; }
@media (max-width: 1100px) { .tx-chips { flex-basis: 100%; justify-content: flex-start; } }
/* The hero's "Next free time" always sits under the button, never beside it (Kaare, 9 Nov) */
.hero__cta { flex-direction: column; align-items: flex-start; gap: 20px; }

/* ============ SECOND AUDIT FIXES (9 Nov 2026) ============ */
/* Treatments page: on tablets and phones the heading takes the full width and wraps, instead of keeping its desktop
   width and running off the screen ("Examples of treatments cover"). */
@media (max-width: 1100px) {
  .tx-list__head .h1, html[lang^="sv"] .tx-list__head .h1, html[lang^="nb"] .tx-list__head .h1 { flex: 1 1 100%; max-width: none; }
}
/* Booking card: on the smallest phones the three step names do not fit one line in Norwegian ("1 Dine opplysninger
   2 Velg tidspunkt 3 Bekreftelse"); the steps you are not on show their number only. */
@media (max-width: 380px) {
  .way--booking .ab-booking__steps { gap: 12px; }
  .way--booking .ab-booking__steps li:not(.is-current) { font-size: 0; }
  .way--booking .ab-booking__steps li:not(.is-current) .ab-booking__step-number { font-size: 13px; }
}
/* Legal pages: the converted documents wrap list items and the "In short" text in quotation blocks, which added the
   browser's 40-pixel quotation indent and margins. */
.lg-doc blockquote, .lg-short__text blockquote { margin: 0; }
/* The "In short" points were indented for bullets (and given an emerald bullet colour) but the site's list reset hid the
   bullets, so they read as indented paragraphs; the bullets are shown, as in the full text below. */
.lg-short__list { list-style: disc; }
.lg-doc li > blockquote > p, .lg-doc li > blockquote > p:last-child { margin: 0; }
/* Legal tables on phones: each row becomes a card with the column heading beside each value (data-label, set by
   tools/legal/build_legal.py), instead of a table wider than the screen that hides its last column. */
@media (max-width: 640px) {
  .lg-table { overflow: visible; border: 0; background: none; }
  .lg-table table { min-width: 0; }
  .lg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lg-table table, .lg-table tbody, .lg-table tr, .lg-table td { display: block; width: auto; }
  .lg-table tr { margin-bottom: 12px; padding: 4px 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); }
  .lg-table td { padding: 10px 16px; border-bottom: 1px solid var(--line); }
  .lg-table tr td:last-child { border-bottom: 0; }
  .lg-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 14px; font-weight: 700; color: var(--muted); }
}
/* Rights page contents list: the long directive name ("pasientrettighetsdirektivet") breaks at its seam with a hyphen
   inside the highlighted item instead of running past it (soft hyphen set by build.mjs, headingBreaks). */
.rt-toc__text { overflow-wrap: break-word; }
/* Cookie banner: the two links under the buttons wrap onto two lines on a phone instead of the second being cut off. */
#cc-main .cm__link-group { flex-wrap: wrap; row-gap: 8px; }
/* Rights page on a 360-pixel phone: a section's single column took the width of its widest contents and ran 3 pixels
   past the screen edge; it now shrinks to the screen. */
@media (max-width: 640px) { .rt-sec { grid-template-columns: minmax(0, 1fr); } }