/* ==========================================================================
   Cahill Dental Clinic: site.css
   One shared stylesheet for every page. Spec: source/DESIGN.md (v2, simplified).
   Mobile-first. Breakpoints: 480, 560, 768, 1024, 1120, 1280.

   CONTENTS (search for the "==" banners)
     01 Tokens
     02 Base and typography
     03 Layout (container, section, bands, split)
     04 Wordmark
     05 Header and desktop navigation
     06 Mobile menu
     07 Footer
     08 Buttons
     09 Section heading
     10 Home hero
     11 Page intro (inner page hero)
     12 Photo
     13 Prose, links, quote
     14 Cards and card grid (incl. treatment group card, 404 link cards)
     15 Fee table, fee grid, insurers
     16 Team grid, team member card, person section
     17 CTA band and contact block
     18 Forms (mailto pre-fill)
     19 Accordion (Good to know)
     20 Services layout: TOC, treatment group, treatment entry
     21 Page-specific touches
     22 Motion
   ========================================================================== */


/* == 01 Tokens ============================================================= */
:root {
  color-scheme: light;
  /* colour: off-white page, the hedge green from the front garden, nothing else */
  --ground: #FBFBF8;        /* page */
  --surface: #F0F3EE;       /* soft bands, cards on ground, the services note */
  --white: #FFFFFF;         /* form fields, form card, insurer tiles */
  --ink: #1B2420;           /* text */
  --muted: #5C6661;         /* secondary text */
  --accent: #2D5C4C;        /* buttons, links, focus, active states */
  --accent-hover: #234A3D;
  --dark: #1D3029;          /* sedation band, footer */
  --on-dark: #FBFBF8; --on-dark-muted: #B9C7BF;
  --line: #DDE2DC;          /* hairlines on ground and surface */
  --line-dark: rgba(251, 251, 248, .16);
  --field-border: #8A938E;  /* input borders (3.1:1 on white) */
  --error: #A3362A;         /* form error state only */

  /* type (scale 13 15 18 21 24 30 36–48 40–60 44–72) */
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --step--2: .8125rem; --step--1: .9375rem; --step-0: 1.125rem; --step-1: 1.3125rem; --step-2: 1.5rem;
  --step-3: clamp(1.625rem, 1.45rem + .7vw, 1.875rem);
  --step-4: clamp(2.125rem, 1.65rem + 1.6vw, 3rem);
  --step-5: clamp(2.5rem, 1.8rem + 2.6vw, 3.75rem);
  --step-6: clamp(2.75rem, 1.6rem + 4.2vw, 4.5rem);
  --measure: 64ch;

  /* space */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  --gutter: 20px;                 /* 32px ≥768, 48px ≥1280 */
  --content-max: 1160px;
  --section-y: var(--space-8);    /* 96px ≥768, 128px ≥1024 */
  --header-h: 64px;               /* 76px ≥1120 */

  --r-sm: 4px; --r-md: 8px; --r-pill: 999px;   /* inputs and logo tiles / photos and cards / buttons */

  --shadow-menu: 0 12px 32px -12px rgba(27, 36, 32, .22);  /* dropdowns only; nothing else has a shadow */
  --ease: cubic-bezier(.2, .7, .1, 1);
}
@media (min-width: 768px)  { :root { --gutter: 32px; --section-y: var(--space-9); } }
@media (min-width: 1024px) { :root { --section-y: var(--space-10); } }
@media (min-width: 1120px) { :root { --header-h: 76px; } }
@media (min-width: 1280px) { :root { --gutter: 48px; } }


/* == 02 Base and typography ================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--sans);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body.menu-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; font-variant-numeric: lining-nums; text-wrap: balance; color: var(--ink); }
h3 { font-size: var(--step-2); font-weight: 500; line-height: 1.25; letter-spacing: -.005em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
p, li { text-wrap: pretty; }
ul, ol { margin: 0; }
address { font-style: normal; }
a { color: inherit; }
button { font: inherit; color: inherit; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
[id] { scroll-margin-top: calc(var(--header-h) + var(--space-5)); }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.band--dark :focus-visible, .site-footer :focus-visible { outline-color: var(--on-dark); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--ink); color: var(--ground); text-decoration: none; font-weight: 500;
  padding: var(--space-3) var(--space-4); border-radius: var(--r-sm);
}
.skip-link:focus { top: var(--space-4); }
.num { font-variant-numeric: lining-nums; }
/* keep a range together: <span class="nowrap">€70 – €120</span> (&nbsp; does not stop a break after an en dash) */
.nowrap { white-space: nowrap; }   /* proportional: tabular widens ":" and "," in Schibsted Grotesk */

/* Type roles */
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--muted); max-width: 44ch; }
.small { font-size: var(--step--1); line-height: 1.5; color: var(--muted); }
.icon { width: 20px; height: 20px; flex: none; }
.icon--chev { width: 12px; height: 12px; transition: transform .15s var(--ease); }


/* == 03 Layout ============================================================= */
.container { width: 100%; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section + .section { padding-top: 0; }          /* consecutive ground sections do not double up */
.band--surface, .band--dark { padding-block: var(--section-y); }
.band--surface { background: var(--surface); }
.band--dark { background: var(--dark); color: var(--on-dark); }
.band--dark .lede, .band--dark p, .band--dark li { color: var(--on-dark-muted); }
.band--dark h2, .band--dark h3, .band--dark .quote p, .band--dark .on-dark-strong { color: var(--on-dark); }
.band--dark .prose li::marker, .band--dark ul li::marker { color: var(--on-dark-muted); }
.band--dark .link, .band--dark .prose a { color: var(--on-dark); }

.split { display: grid; gap: var(--space-7); }
@media (min-width: 1024px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-9); align-items: start; }
  .split--7-5 { grid-template-columns: 7fr 5fr; }
  .split--5-7 { grid-template-columns: 5fr 7fr; }
  .split--center { align-items: center; }
}
/* A section-head as a direct child of .split: the grid gap does the spacing */
.split > .section-head { margin-bottom: 0; }
/* tighter stacking on mobile when the second column continues the first (e.g. about sections) */
.split--tight { gap: var(--space-5); }
@media (min-width: 1024px) { .split--tight { gap: var(--space-9); } }


/* == 04 Wordmark =========================================================== */
.wordmark { display: inline-grid; color: var(--ink); text-decoration: none; line-height: 1; flex: none; }
.wordmark__name { font: 500 1.625rem/1 var(--serif); letter-spacing: -.015em; }
.wordmark__sub  { font: 500 .8125rem/1 var(--sans); color: var(--muted); margin-top: 3px; letter-spacing: .005em; }
@media (min-width: 480px) {
  .wordmark { display: inline-flex; align-items: baseline; gap: .5em; }
  .wordmark__name { font-size: 1.75rem; }
  .wordmark__sub { font-size: .9375rem; margin-top: 0; }
}
.wordmark:hover .wordmark__name { color: var(--accent); }
.wordmark--footer, .wordmark--footer:hover .wordmark__name { color: var(--on-dark); }
.wordmark--footer { display: inline-grid; gap: 6px; }
.wordmark--footer .wordmark__name { font-size: 2.25rem; }
.wordmark--footer .wordmark__sub, .wordmark--footer .wordmark__est { color: var(--on-dark-muted); font-size: .9375rem; margin: 0; }
.wordmark--footer .wordmark__est { font: 400 .9375rem/1.2 var(--serif); }


/* == 05 Header and desktop navigation ====================================== */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: var(--ground); border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; gap: var(--space-5); height: 100%; }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }

/* Call link: a ringed "Call" pill on mobile, the number from 768 */
.header-call {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: var(--r-pill); box-shadow: inset 0 0 0 1.5px var(--ink);
  color: var(--ink); text-decoration: none; font: 600 1rem/1 var(--sans); white-space: nowrap;
  transition: color .15s, box-shadow .15s;
}
.header-call .icon { width: 18px; height: 18px; }
.header-call__num { display: none; }
.site-header__actions .site-header__book { display: none; }   /* scoped so it beats .btn */

.menu-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; margin-right: -10px;
  background: transparent; border: 0; border-radius: var(--r-sm); color: var(--ink); cursor: pointer;
}
.menu-toggle .icon { width: 24px; height: 24px; }
.menu-toggle .icon--close { display: none; }
.menu-toggle[aria-expanded="true"] .icon--menu { display: none; }
.menu-toggle[aria-expanded="true"] .icon--close { display: block; }

@media (min-width: 768px) {
  .site-header__actions { gap: var(--space-5); }
  .header-call { box-shadow: none; padding: 0; font-weight: 500; }
  .header-call:hover { color: var(--accent); }
  .header-call__short { display: none; }
  .header-call__num { display: inline; }
  .site-header__actions .site-header__book { display: inline-flex; }
}

.site-nav { display: none; }
@media (min-width: 1120px) {
  .menu-toggle { display: none; }
  .site-nav { display: block; margin-left: var(--space-7); }
}
.site-nav__list { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.site-nav__item { position: relative; }
.site-nav__link, .site-nav__toggle {
  display: inline-flex; align-items: center; gap: 4px; padding: 10px 0;
  font: 500 1rem/1.2 var(--sans); color: var(--ink); text-decoration: none;
  background: none; border: 0; cursor: pointer; transition: color .15s;
}
.site-nav__link, .site-nav__toggle { white-space: nowrap; }   /* "Nervous patients" never breaks */
/* 1120–1279: the full nav, Call number and appointment button share one row; tighten the gaps */
@media (min-width: 1120px) and (max-width: 1279px) {
  .site-header__inner { gap: var(--space-4); }
  .site-nav { margin-left: var(--space-5); }
  .site-nav__list { gap: var(--space-5); }
  .site-header__actions { gap: var(--space-4); }
  .site-nav__link, .site-nav__toggle { font-size: .9375rem; }
}
.site-nav__link:hover, .site-nav__toggle:hover { color: var(--accent); }
.site-nav__link[aria-current="page"],
.site-nav__item.is-current > .site-nav__toggle {
  color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.site-nav__toggle[aria-expanded="true"] .icon--chev { transform: rotate(180deg); }

.site-nav__menu {
  position: absolute; top: calc(100% + 6px); left: -16px; min-width: 220px; z-index: 5;
  list-style: none; margin: 0; padding: var(--space-2) 0;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-menu);
  display: none;
}
/* invisible bridge so the pointer can travel from toggle to menu */
.site-nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
/* With JS (html.js, set by main.js) a menu opens only from .is-open (click, Enter/Space, ArrowDown)
   or :hover, so aria-expanded always matches. Without JS, :focus-within is the keyboard fallback. */
.site-nav__item.is-open > .site-nav__menu,
html:not(.js) .site-nav__item:focus-within > .site-nav__menu { display: block; animation: fade-in .15s var(--ease); }
@media (hover: hover) { .site-nav__item.has-menu:hover > .site-nav__menu { display: block; animation: fade-in .15s var(--ease); } }
/* never two menus at once: an open menu hides the hover preview of its neighbours */
.site-nav__list:has(.is-open) .site-nav__item:not(.is-open):hover > .site-nav__menu { display: none; }
.site-nav__menu a {
  display: block; padding: 8px 16px; font: 400 1rem/1.4 var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap;
}
.site-nav__menu a:hover { background: var(--surface); }
.site-nav__menu a[aria-current="page"] { color: var(--accent); font-weight: 500; }
.site-nav__menu :focus-visible { outline-offset: -2px; }
.site-nav__all { border-top: 1px solid var(--line); margin-top: var(--space-2); padding-top: var(--space-2); }
.site-nav__all a { color: var(--accent); font-weight: 500; }


/* == 06 Mobile menu ======================================================== */
.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 49;
  background: var(--ground); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-4) var(--gutter) calc(var(--space-7) + env(safe-area-inset-bottom));
  animation: fade-in .15s var(--ease);
}
@media (min-width: 1120px) { .mobile-menu { display: none !important; } }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu__list > li { border-top: 1px solid var(--line); }
.mobile-menu__list > li:first-child { border-top: 0; }
.mobile-menu__list > li > a {
  display: block; padding: 12px 0; font: 400 var(--step-2)/1.3 var(--serif); color: var(--ink); text-decoration: none;
}
.mobile-menu__list ul { padding: 0 0 var(--space-3) var(--space-4); }
.mobile-menu__list ul a { display: block; padding: 8px 0; font: 400 1rem/1.75 var(--sans); color: var(--muted); text-decoration: none; }
.mobile-menu a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.mobile-menu__contact { margin-top: var(--space-6); display: grid; gap: var(--space-4); }


/* == 07 Footer ============================================================= */
.site-footer {
  background: var(--dark); color: var(--on-dark); font-size: var(--step--1); line-height: 1.6;
  padding: var(--space-9) 0 var(--space-6);
}
.site-footer__grid { display: grid; gap: var(--space-6); }
@media (min-width: 768px)  { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-6); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; } }
.site-footer__title { font: 600 var(--step--1)/1.4 var(--sans); color: var(--on-dark); margin: 0 0 var(--space-3); letter-spacing: 0; }
.site-footer p, .site-footer address { color: var(--on-dark-muted); }
.site-footer__brand p { max-width: 30ch; margin-top: var(--space-4); }
.site-footer a:not(.wordmark) {
  color: var(--on-dark); text-decoration: underline; text-decoration-color: var(--line-dark);
  text-decoration-thickness: 1px; text-underline-offset: .2em; transition: text-decoration-color .15s;
}
.site-footer a:not(.wordmark):hover { text-decoration-color: var(--on-dark); }
.site-footer address + a { display: inline-block; margin-top: var(--space-2); }
.site-footer nav ul { list-style: none; padding: 0; }
.site-footer nav a { display: inline-block; padding-block: 4px; }
/* a dark band that ends <main> would merge into the dark footer: give the footer an edge */
main:has(> .band--dark:last-child) + .site-footer { border-top: 1px solid var(--line-dark); }
.site-footer a[aria-current="page"] { text-decoration-color: var(--on-dark); }
/* the hairline sits inside the gutter, so it is drawn with ::before */
.site-footer__base { position: relative; margin-top: var(--space-8); padding-top: var(--space-5); color: var(--on-dark-muted); }
.site-footer__base::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line-dark); }


/* == 08 Buttons ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 50px; padding: 0 26px; border: 0; border-radius: var(--r-pill);
  font: 600 1rem/1.2 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.btn--primary { background: var(--accent); color: var(--white); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--secondary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--secondary:hover { background: rgba(27, 36, 32, .05); }
.band--dark .btn--primary { background: var(--on-dark); color: var(--dark); }
.band--dark .btn--primary:hover { background: var(--surface); }
.band--dark .btn--secondary { color: var(--on-dark); box-shadow: inset 0 0 0 1.5px var(--on-dark); }
.band--dark .btn--secondary:hover { background: rgba(251, 251, 248, .08); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: .9375rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
@media (max-width: 399px) { .btn-row .btn { width: 100%; } }


/* == 09 Section heading ==================================================== */
.section-head { margin-bottom: var(--space-6); }
@media (min-width: 768px) { .section-head { margin-bottom: var(--space-7); } }
.section-head__title { font-size: var(--step-4); line-height: 1.1; letter-spacing: -.015em; max-width: 20ch; }
.section-head .lede { margin-top: var(--space-4); margin-bottom: 0; }
.section-head__more { display: inline-block; margin-top: var(--space-4); }
/* a bare section title (no .section-head wrapper) followed directly by text */
.section-head__title + .prose, .section-head__title + p, .section-head__title + .lede { margin-top: var(--space-5); }
@media (min-width: 1024px) {
  .section-head:has(.section-head__more) { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: var(--space-6); }
  .section-head:has(.section-head__more) > :not(.section-head__more) { grid-column: 1; }
  .section-head__more { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0 0 .25em; }
}


/* == 10 Home hero ========================================================== */
.hero { padding: var(--space-8) 0 var(--space-9); }
.hero__title { font-size: var(--step-6); font-weight: 350; line-height: 1.04; letter-spacing: -.022em; max-width: 16ch; }
.hero .lede { margin-top: var(--space-5); }
.hero__meta { margin-top: var(--space-5); }
.hero__photo { margin-top: var(--space-8); }
@media (max-width: 767px) { .hero__photo.photo--wide { aspect-ratio: 4 / 3; margin-top: var(--space-7); } }
@media (min-width: 1024px) {
  /* a tighter opening and a lower photo strip, so the edge of the sedation band shows on the first screen */
  .hero { padding: var(--space-8) 0; }
  .hero__photo.photo--wide { margin-top: var(--space-7); aspect-ratio: 7 / 2; }
}
/* wide desktop: headline left, supporting text right, bottoms aligned.
   Below 1280 the aside column is too narrow for both buttons on one row, so the hero stays stacked. */
@media (min-width: 1280px) {
  .hero__top { display: grid; grid-template-columns: 7fr 5fr; column-gap: var(--space-9); align-items: end; }
  .hero__aside .lede:first-child { margin-top: 0; }
}
/* home: the sedation band follows the hero photo closely, so the two read as one opening */
.hero:has(+ .band--dark) { padding-bottom: var(--space-8); }
@media (min-width: 1024px) { .hero:has(+ .band--dark) { padding-bottom: var(--space-7); } }


/* == 11 Page intro (inner page hero) ======================================= */
.page-intro { padding: var(--space-8) 0 0; }   /* bottom space lives inside the container, above the hairline */
.page-intro .container > :last-child { margin-bottom: 0; }
.page-intro .container { padding-bottom: var(--space-7); position: relative; }
/* bottom hairline inside the gutter, not full-bleed */
.page-intro .container::after { content: ""; position: absolute; bottom: 0; left: var(--gutter); right: var(--gutter); border-bottom: 1px solid var(--line); }
.page-intro__title { font-size: var(--step-5); font-weight: 350; line-height: 1.06; letter-spacing: -.02em; max-width: 16ch; margin-bottom: var(--space-5); }
.page-intro .lede { max-width: 52ch; }
@media (min-width: 1024px) {
  .page-intro { padding: var(--space-9) 0 0; }
  .page-intro .container { padding-bottom: var(--space-8); }
}
/* page intro followed by a section: the hairline is the divider, keep the gap calm */
.page-intro + .section { padding-top: var(--space-8); }
@media (min-width: 1024px) { .page-intro + .section { padding-top: var(--space-9); } }
/* variant with a photo on the right (about, careers) */
.page-intro--media .split { align-items: center; }


/* == 12 Photo ============================================================== */
.photo {
  width: 100%; object-fit: cover; object-position: var(--focus, 50% 50%);
  border-radius: var(--r-md); background: var(--surface);
}
.photo--wide { aspect-ratio: 3 / 2; }
@media (min-width: 768px) { .photo--wide { aspect-ratio: 2 / 1; } }
.photo--landscape { aspect-ratio: 4 / 3; }
.photo--portrait { aspect-ratio: 4 / 5; }


/* == 13 Prose, links, quote ================================================ */
.prose { max-width: var(--measure); }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1em; }
.prose ul:last-child, .prose ol:last-child { margin-bottom: 0; }
.prose li + li { margin-top: .35em; }
.prose li::marker { color: var(--muted); }
.prose h3 { margin: 1.6em 0 .5em; }
.prose h3:first-child { margin-top: 0; }
.prose > .link:last-child, .prose > p > .link:only-child { display: inline-block; }

.link, .prose a {
  color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
  transition: color .15s;
}
.link:hover, .prose a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
.more { margin-top: var(--space-5); }          /* a standalone "Our story" style link below prose */

.quote { margin: 0; }
.quote blockquote { margin: 0; }
.quote p { font: 300 var(--step-3)/1.3 var(--serif); letter-spacing: -.01em; color: var(--ink); max-width: 26ch; }


/* == 14 Cards and card grid ================================================ */
.card { background: var(--surface); border-radius: var(--r-md); padding: var(--space-6); }
.card__title { font-size: var(--step-2); font-weight: 500; line-height: 1.25; margin-bottom: var(--space-3); }
.card > h3 { margin-bottom: var(--space-3); }
.card > * + h3 { margin-top: var(--space-5); }
.card .link { display: inline-block; margin-top: var(--space-4); }
.card > p:has(+ .link) { margin-bottom: 0; }
.card--link { display: block; color: inherit; text-decoration: none; }
.card--link:hover .card__title { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.card-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
@media (min-width: 1024px) {
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid--5 { grid-template-columns: repeat(5, 1fr); }
  .card-grid--5 .card { padding: var(--space-5); }
  .card-grid--5 .card__title { font-size: var(--step-1); min-height: 2.5em; }   /* 2 lines: every list starts level */
}
/* 2-up range: the fifth card spans the row instead of sitting alone */
@media (min-width: 560px) and (max-width: 1023px) { .card-grid--5 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* Treatment group card (home): group name + plain links to treatments */
.card__list { list-style: none; padding: 0; margin: 0; font-size: var(--step--1); }
.card__list a { display: inline-block; padding-block: 4px; color: var(--ink); text-decoration: none; }
.card__list a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }


/* == 15 Fee table, fee grid, insurers ====================================== */
.fee-table { width: 100%; border-collapse: collapse; }
.fee-table caption { text-align: left; font: 400 var(--step-2)/1.25 var(--serif); padding-bottom: var(--space-3); color: var(--ink); }
.fee-table th, .fee-table td { padding: 14px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.fee-table tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
.fee-table td { text-align: right; padding-left: var(--space-5); white-space: nowrap; font-weight: 500; font-variant-numeric: lining-nums; }
.fee-table .fee-table__estimate { font-weight: 400; color: var(--muted); }
/* phones: cells may wrap, but only between .nowrap groups ("From €120 – €130" / "per quadrant") */
@media (max-width: 559px) { .fee-table td { white-space: normal; } .fee-table td.fee-table__estimate { max-width: 9.5em; } }

.fee-grid { display: grid; gap: var(--space-8) var(--space-9); align-items: start; }
@media (min-width: 1024px) { .fee-grid { grid-template-columns: 1fr 1fr; } }

.insurers { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.insurers li {
  width: 150px; height: 80px; display: grid; place-items: center; padding: var(--space-3);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.insurers img { max-height: 46px; width: auto; max-width: 100%; object-fit: contain; }


/* == 16 Team grid, team member card, person section ======================== */
.team-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-7) var(--space-5); }
@media (min-width: 768px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 46rem; } }
.team-member { display: block; color: inherit; text-decoration: none; }
.team-member__name { font: 500 var(--step-1)/1.25 var(--serif); letter-spacing: -.005em; margin-top: var(--space-4); }
.team-member__role { font-size: var(--step--1); color: var(--muted); margin: 4px 0 0; }
.team-member__note { margin-top: var(--space-2); max-width: 36ch; }
.team-member:hover .team-member__name { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
/* below 768: summary cards become compact rows (big portraits stay on team.html's .person sections) */
@media (max-width: 767px) {
  .team-grid { gap: var(--space-5); }
  .team-grid .team-member { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto; column-gap: var(--space-4); align-items: center; }
  .team-grid .team-member .photo { grid-row: 1 / span 2; }
  .team-grid .team-member__name { margin-top: 0; align-self: end; }
  .team-grid .team-member__role { align-self: start; }
}

/* team.html: one .person section per team member */
.person { display: grid; gap: var(--space-6); padding-block: var(--space-8); border-top: 1px solid var(--line); }
.person:first-child { border-top: 0; padding-top: 0; }
.person:last-child { padding-bottom: 0; }
.person__photo { max-width: 360px; }
.person__name { font-size: var(--step-4); line-height: 1.1; letter-spacing: -.015em; }
.person__role { color: var(--muted); margin: var(--space-2) 0 var(--space-5); }
@media (min-width: 768px) { .person { grid-template-columns: minmax(220px, 4fr) 8fr; gap: var(--space-8); } }


/* == 17 CTA band and contact block ========================================= */
/* Closing CTA: title, lede, buttons only (the footer below carries address, phone and hours). */
.cta .container > * { max-width: 40rem; }
.cta .section-head__title { max-width: 16ch; }
.cta .lede { margin-top: var(--space-4); }

.contact-block { margin: 0; }
.contact-block > div { padding: var(--space-4) 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.contact-block > div:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 560px) { .contact-block > div { grid-template-columns: 9rem 1fr; gap: var(--space-4); } }
.contact-block dt { font: 500 var(--step--1)/1.6 var(--sans); color: var(--muted); padding-top: 2px; }
.contact-block dd { margin: 0; }
.contact-block address { margin-bottom: 2px; }
.contact-block__big { font: 400 var(--step-3)/1.2 var(--serif); color: var(--ink); text-decoration: none; transition: color .15s; }
.contact-block__big:hover { color: var(--accent); }
.contact-block__aux { display: block; font-size: var(--step--2); color: var(--muted); margin-top: 2px; }


/* == 18 Forms (mailto pre-fill) ============================================ */
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--space-5); }
@media (min-width: 768px) { .form-card { padding: var(--space-7); } }
.form__title { font-size: var(--step-3); line-height: 1.2; letter-spacing: -.01em; }
.form__intro { margin: var(--space-4) 0 var(--space-6); max-width: var(--measure); }

.form__grid { display: grid; gap: var(--space-5) var(--space-4); }
@media (min-width: 560px) {
  .form__grid { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field > label, .choices > legend { font: 500 var(--step--1)/1.4 var(--sans); color: var(--ink); }
.field__req { color: var(--muted); }

.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 0 var(--space-4); margin: 0;
  font: 400 1.0625rem/1.4 var(--sans); color: var(--ink);
  background: var(--white); border: 1px solid var(--field-border); border-radius: var(--r-sm);
  transition: border-color .15s;
}
.field input[type="date"] { padding-block: 12px; }
.field textarea { min-height: 140px; padding: var(--space-3) var(--space-4); resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: var(--error); }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2420' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 16px center / 14px;
}

.choices { border: 0; padding: 0; margin: 0; min-width: 0; }
.choices > legend { padding: 0; margin-bottom: 6px; }
.choices { display: flex; flex-wrap: wrap; column-gap: var(--space-5); }
.choices > legend { width: 100%; }
.choices label { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.choices input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }

.form__note { margin: var(--space-5) 0 var(--space-5); font-size: var(--step--1); color: var(--muted); }
.form__help { margin-top: var(--space-3); font-size: var(--step--1); color: var(--muted); max-width: 56ch; }
@media (max-width: 559px) { .form .btn[type="submit"] { width: 100%; } }
.form__status:empty { display: none; }
.form__status { margin-top: var(--space-4); padding: var(--space-4); background: var(--surface); border-radius: var(--r-sm); color: var(--ink); }


/* == 19 Accordion (Good to know) =========================================== */
.faq { max-width: var(--measure); }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-3); cursor: pointer; font: 500 var(--step-1)/1.3 var(--serif); color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent); }
.faq__item summary .icon { width: 18px; height: 18px; transition: transform .15s var(--ease); }
.faq__item[open] summary .icon { transform: rotate(180deg); }
.faq__item > .prose { padding-bottom: var(--space-5); }


/* == 20 Services layout: TOC, treatment group, treatment ==================== */
.services-layout { display: block; }
.toc { display: none; }
.toc ul, .toc-mobile ul { list-style: none; padding: 0; margin: 0; }
.toc__group { font: 500 var(--step--2)/1.4 var(--sans); color: var(--ink); margin: var(--space-5) 0 var(--space-2); }
.toc__group:first-child { margin-top: 0; }
.toc a, .toc-mobile a {
  display: block; padding: 4px 0 4px 14px; border-left: 2px solid transparent;
  font-size: var(--step--1); line-height: 1.4; color: var(--muted); text-decoration: none; transition: color .15s, border-color .15s;
}
.toc a:hover, .toc-mobile a:hover { color: var(--ink); }
.toc a.is-active { color: var(--ink); border-left-color: var(--accent); }

.toc-mobile { background: var(--surface); border-radius: var(--r-md); padding: 0 var(--space-5); margin-bottom: var(--space-7); }
.toc-mobile summary {
  list-style: none; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  font: 500 1rem/1.3 var(--sans); cursor: pointer;
}
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile summary .icon { width: 14px; height: 14px; transition: transform .15s var(--ease); }
.toc-mobile[open] summary .icon { transform: rotate(180deg); }
.toc-mobile[open] { padding-bottom: var(--space-5); }
.toc-mobile a { padding-block: 10px; border-left: 0; padding-left: 0; }

@media (min-width: 1024px) {
  .services-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-9); }
  .toc { display: block; position: sticky; top: calc(var(--header-h) + var(--space-6)); align-self: start; }
  .toc-mobile { display: none; }
}
.services-layout__content { min-width: 0; }
.treatment-group__title { font-size: var(--step-4); line-height: 1.1; letter-spacing: -.015em; margin-bottom: var(--space-5); }
.treatment-group + .treatment-group { margin-top: var(--space-9); }
@media (min-width: 1024px) { .treatment-group + .treatment-group { margin-top: var(--space-10); } }
.treatment { padding: var(--space-6) 0; border-top: 1px solid var(--line); }
.treatment h3 { font-size: var(--step-1); margin-bottom: var(--space-3); }
.treatment__fee { margin-top: var(--space-4); }
.treatment-group aside.card { margin-top: var(--space-6); }


/* == 21 Page-specific touches ============================================== */
/* Home: sedation band list heading */
.on-dark-strong { font-weight: 500; }
/* Contact: sticky visit column */
@media (min-width: 1024px) { .sticky-col { position: sticky; top: calc(var(--header-h) + var(--space-6)); } }
/* 404 */
.page-404 .page-intro__title { max-width: 18ch; }


/* == 22 Motion ============================================================= */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}