/* ============================================================================
   MAIN: layout, surfaces and components for iCareConnect.
   Type lives in type.css and nowhere else: this file sets no font-size,
   font-weight, font-family, letter-spacing or text-transform, and every text
   colour is a var(), so the cocoa bands swap tokens instead of adding
   treatments.

   The look (Anda, 26 Oct 2026): her first leaflets' colours, leaves and hearts
   are "everywhere" now, the look of instant AI posters. She asked for two
   colours, "pale rose, cream and copper", "less leaves and plants and hearts",
   and warmth "in clever words and colours only". So:
   - Cream paper, pale rose surfaces, copper for the few marks that are not
     text (a plus, a tick, a card's top edge), cocoa ink, and a deep copper for
     links and buttons. Nothing else.
   - No icons, no botanicals, no brush strokes, no washes: one pale rose panel
     behind each opening photograph, and the type doing the rest.
   - 28 Oct: the short copper rule above each section heading is gone (Anda:
     "it looks a bit odd. Do we need it?"); the alternating bands already mark
     where a section starts. The header carries her motto under the logo.
   - Her liked sites (White House Health, the UKCP profile): short, clear,
     lots of space; "What I can help with" boxes that people can select.
   Breakpoints are in em, so larger browser text gets the compact layout sooner
   (LESSONS #42). No motion beyond hover and focus (LESSONS #44).
   ========================================================================== */

:root {
  --cocoa     : #3A2621;   /* ink, the top strip, footer (13.2:1 on cream)               */
  --copper-ink: #6E361C;   /* links and buttons: 8.9:1 on cream, 7.6:1 on rose           */
  --copper    : #A0613C;   /* rules, pluses, ticks only (4.6:1 cream, 3.9:1 rose; never text) */
  --page      : #FBF6F0;   /* cream: the page                                            */
  --rose      : #F3E3DC;   /* pale rose bands and panels (ink 11.4:1, soft ink 7.2:1)    */
  --card      : #FFFDFB;
  --rule      : rgba(58, 38, 33, 0.16);
  --edge      : #8C6E62;   /* form borders: 4.3:1 on cream (UI needs 3:1)                */

  --btn-bg   : var(--copper-ink);
  --btn-ink  : #FBF6F0;
  --btn-hover: var(--cocoa);   /* cream on it 13.2:1                                     */

  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --wrap  : 76rem;
  --band  : clamp(3.75rem, 7.5vw, 6.5rem);
  --bar   : 6rem;        /* the logo row, with the motto under the logo                 */
  --top   : 2.75rem;     /* the top strip                                              */
  --radius: 10px;
  --ease  : cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* A cocoa band swaps the ink tokens. On #3A2621: cream 13.2:1, #EBD3C9 9.9:1. */
.on-dark {
  --ink      : #FBF6F0;
  --ink-soft : #EBD3C9;
  --link     : #FBF6F0;
  --copper   : #C98A62;   /* 4.9:1 on cocoa */
  --rule     : rgba(251, 246, 240, 0.22);
  --edge     : #EBD3C9;
  --btn-bg   : #FBF6F0;
  --btn-ink  : #3A2621;
  --btn-hover: #EBD3C9;
  --card     : rgba(251, 246, 240, 0.06);
  background: var(--cocoa);
  color: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--page); scroll-padding-top: calc(var(--bar) + 1rem); }
@media (max-width: 47.9375em) { html { scroll-padding-bottom: 5.75rem; } }
/* lock the root only: hiding body's overflow made body the scroll box, and the
   sticky header (with the menu in it) jumped to the top of the document (LESSONS #41) */
html.menu-locked { overflow: hidden; }
body { margin: 0; background: var(--page); color: var(--ink); }
img { display: block; max-width: 100%; height: auto; }
ul, ol { padding: 0; list-style: none; }
figure, dl, dd { margin: 0; }

:focus-visible { outline: 3px solid var(--copper-ink); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--rose); }
::selection { background: var(--rose); color: var(--cocoa); }
input, textarea, select { caret-color: var(--cocoa); }

.skip-link {
  position: absolute; left: 1rem; top: -5rem; z-index: 100;
  padding: 0.75rem 1rem; background: var(--cocoa); color: var(--btn-ink);
}
.skip-link:focus { top: 1rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Layout ------------------------------------------------------------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.band { padding-top: var(--band); padding-bottom: var(--band); }
.band--rose { background: var(--rose); }
/* two cream bands in a row share their space; a rose band keeps its own */
.band:not(.band--rose):not(.on-dark) + .band:not(.band--rose):not(.on-dark) { padding-top: 0; }
.stack > * + * { margin-top: 1.25rem; }
.section-head { max-width: var(--col); }
.section-head > * + * { margin-top: 1rem; }
.section-head + * { margin-top: 2.25rem; }

/* ---- Links and buttons -------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  min-height: 52px; padding: 0.7rem min(1.6rem, 5vw); border-radius: 999px;   /* side padding capped by the screen, so 200% text fits a phone */
  background: var(--btn-bg); color: var(--btn-ink); border: 2px solid var(--btn-bg);
  text-decoration: none; text-align: center; overflow-wrap: normal; cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-ink); }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--quiet:hover { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn[aria-disabled="true"] { cursor: progress; }
.actions { display: flex; flex-wrap: wrap; gap: 0.85rem 1.25rem; align-items: center; margin-top: 2rem; }
/* a number never splits, except on a screen under 22em wide in text terms (a 320px phone at
   200% text), where it could not fit one line and would push the page sideways */
@media (min-width: 22em) { a[href^="tel:"]:not(.btn) { white-space: nowrap; } }
main a:not(.btn):not(.tile):not(.rows__title) { color: var(--link); text-decoration: underline; text-decoration-thickness: max(1px, 0.06em); text-underline-offset: 0.15em; }
main a:not(.btn):not(.tile):not(.rows__title):hover { text-decoration-thickness: max(2px, 0.12em); }

/* a link that ends a section: underlined, a small arrow drawn in CSS */
.go { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; }
.go::after { content: ""; width: 0.5rem; height: 0.5rem; flex: none; border-top: 2px solid var(--copper); border-right: 2px solid var(--copper); transform: rotate(45deg); transition: transform 0.3s var(--ease); }
@media (hover: hover) { .go:hover::after { transform: translateX(3px) rotate(45deg); } }

/* ---- Header -------------------------------------------------------------
   Two rows: a thin cocoa strip (phone, email and the one button) that scrolls
   away, and the logo row with every page in it, which stays at the top.
   Phones: the logo row and the menu button; the call and the button sit in the
   bar at the foot. */
.site-header { position: sticky; top: calc(-1 * var(--top)); z-index: 50; background: var(--page); }
.topbar .wrap { display: flex; align-items: center; justify-content: flex-end; min-height: var(--top); }
.topbar__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.25rem 1.25rem; }
.tb-long { display: none; }
@media (min-width: 48em) { .tb-long { display: inline; } .tb-short { display: none; } .topbar__links { gap: 0.25rem 1.75rem; } }
.topbar a:not(.btn) { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; color: var(--ink); text-decoration: none; }
.topbar a:not(.btn):hover { text-decoration: underline; text-underline-offset: 0.2em; }
.topbar a svg { width: 1em; height: 1em; flex: none; color: var(--ink-soft); }
.topbar .btn { min-height: 36px; padding: 0.3rem 1.1rem; border-width: 1px; }
/* on a phone the strip keeps to one line (its height is what scrolls away): the
   call and the email only, because the booking button sits in the bar at the foot */
@media (max-width: 47.9375em) { .topbar .btn { display: none; } }
.bar { border-bottom: 1px solid var(--rule); background: var(--page); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--bar); padding-top: 0.7rem; padding-bottom: 0.7rem; }
/* The logo with Anda's motto beneath it, as in the footer (Anda, 28 Oct: "Can I have on the top (like at the
   bottom) iCareConnect, Health. Naturally. Better living, slower ageing"). The motto is real text at the Meta
   size, so it stays readable and grows with the reader's text size; the wordmark is as wide as the motto's
   longest line: two lines on a phone, one from 48em. At very large text on a phone (under 18.75em wide) the
   motto steps aside so the row never scrolls sideways. */
.site-logo { display: grid; justify-items: start; gap: 0.3rem; flex: 0 1 auto; min-width: 0; color: var(--ink-soft); text-decoration: none; }
.site-logo img { width: min(52vw, 12.1rem); height: auto; }
.site-motto { display: block; line-height: 1.35; }
.site-motto > span { display: block; }
@media (max-width: 18.75em) { .site-motto { display: none; } }
/* a very narrow screen in text terms (a 320px phone, or a phone at 125% text and up): the menu
   button keeps its three lines and drops the word, so the row never scrolls sideways */
@media (max-width: 21.25em) { .hamburger__label { display: none; } }
.site-nav { display: none; }
.site-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.35rem; height: 2px;
  background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease);
}
.site-nav a:hover::after, .site-nav a[aria-current]::after { transform: scaleX(1); }

/* the menu button says "Menu" in words: three lines alone are a puzzle to many older visitors */
.hamburger {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 48px; padding: 0 0.25rem 0 0.5rem;
  background: none; border: 0; cursor: pointer; color: var(--ink);
}
.hamburger__lines { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; width: 26px; }
.hamburger__lines span { display: block; height: 2px; background: var(--ink); transition: transform 0.3s var(--ease), opacity 0.3s; }
.hamburger[aria-expanded="true"] .hamburger__lines span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__lines span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] .hamburger__lines span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* The phone menu hangs below the bar, out of the page flow, so opening it never
   moves the page the visitor was reading (LESSONS #41). */
.mobile-menu { display: none; }
.mobile-menu.is-open {
  display: block; position: absolute; inset: 100% 0 auto 0;
  max-height: calc(100svh - var(--bar)); overflow-y: auto; overscroll-behavior: contain;
  padding: 0.5rem var(--gutter) 2rem; background: var(--page); border-bottom: 1px solid var(--rule);
  box-shadow: 0 18px 30px -24px rgba(58, 38, 33, 0.5);
}
.mobile-menu a:not(.btn) { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.mobile-menu .actions { margin-top: 1.5rem; }

@media (min-width: 48em) {
  .site-logo img { width: 19.7rem; }
  .site-motto > span { display: inline; }
  :root { --bar: 5.5rem; }
}
@media (min-width: 64em) {
  .site-nav { display: flex; gap: 0 1.6rem; }
  .hamburger, .mobile-menu, .mobile-menu.is-open { display: none; }
}

/* ---- Breadcrumbs -------------------------------------------------------- */
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; margin: 0 0 1.25rem; }
.breadcrumbs li + li::before {
  content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; margin-right: 0.6rem;
  border-top: 1.5px solid var(--ink-soft); border-right: 1.5px solid var(--ink-soft);
  transform: translateY(-0.1rem) rotate(45deg);
}
main .breadcrumbs a:not(.btn) { color: var(--ink-soft); }

/* ---- Opening: words on the left, the photograph on the right ------------
   One pale rose panel behind the photograph (or the card) on wide screens, and
   plain cream on a phone. The photograph is cut to 4:3 by tools/build_images.py
   and shown at its own shape (height: auto), so nothing is cropped by CSS and
   nothing re-fits as it loads (LESSONS #39); on a phone it sits below the
   words, never under them (LESSONS #48). */
.hero { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); background: var(--page); }
@media (min-width: 60em) {
  .hero:not(.hero--plain) { background: linear-gradient(90deg, var(--page) 0 62%, var(--rose) 62% 100%); }
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.hero__copy > * + * { margin-top: 1.25rem; }
.hero__copy h1 { max-width: 17em; }
.hero__copy .lead { max-width: 34rem; }
.hero__photo img { width: 100%; height: auto; border-radius: var(--radius); }
.hero--plain .hero__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60em) { .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 4rem; } }
.or-call { margin: 0; }
/* on a phone it always takes its own line: beside the button it fitted in the fallback font and
   wrapped once the webfont arrived, moving the photo 39px (Lighthouse CLS 0.09, 26 Oct 2026) */
@media (max-width: 47.9375em) { .hero .actions .or-call { flex-basis: 100%; } }

/* ---- Prose and splits ---------------------------------------------------- */
.prose > * + * { margin-top: 1.25rem; }
.prose > * + h2 { margin-top: 3rem; }
.prose > h2 + * { margin-top: 1rem; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 60em) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: center; }
  .split--top { align-items: start; }
  .split--flip > :first-child { order: 2; }
}
.photo img { width: 100%; height: auto; border-radius: var(--radius); }

/* a quote in Anda's words, on pale rose (no short rule above her name since 28 Oct, like the headings) */
.pull { margin: 0; padding: clamp(1.25rem, 5vw, 2.25rem) clamp(1.1rem, 5vw, 2rem); background: var(--rose); border-radius: var(--radius); }
.hero .pull, .band--rose .pull { background: var(--card); }
.pull blockquote { margin: 0; }
.pull figcaption { margin-top: 1.25rem; }

/* ---- Help boxes: select one and it opens to say how Anda helps -----------
   Anda liked the "What I can help with" boxes on a therapist's profile. On that
   profile they cannot be selected; here each one is a native <details>, so it
   opens in place with a tap, works with a keyboard and a screen reader, and
   needs no script. A plus turns to a cross when a box is open. */
.tiles { display: grid; gap: 0.85rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 52em) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.tile {
  height: 100%; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.tile summary {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-height: 5.5rem;
  padding: 1.1rem 3rem 1.1rem 1.25rem; cursor: pointer; list-style: none;
}
.tile summary::-webkit-details-marker { display: none; }
.tile summary::after {
  content: ""; position: absolute; top: 50%; right: 1.15rem; width: 16px; height: 16px; margin-top: -8px;
  background: linear-gradient(var(--copper), var(--copper)) center / 16px 2px no-repeat,
              linear-gradient(var(--copper), var(--copper)) center / 2px 16px no-repeat;
  transition: transform 0.3s var(--ease);
}
.tile[open] summary::after { transform: rotate(45deg); }
.tile[open] { border-color: var(--copper); }
.tile[open] summary::after { top: 2.75rem; }
/* a label breaks inside a word only when it cannot fit a line at all (a 360px phone at 200% text) */
.tiles > li, .tile .statement { overflow-wrap: break-word; }
.tile .statement { text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.tile > p { padding: 0 1.25rem 1.35rem; }
@media (hover: hover) { .tile:hover { border-color: var(--copper); box-shadow: 0 10px 24px -18px rgba(58, 38, 33, 0.55); } }
/* a phone: one box to a row, so even "Companionship" fits whole at large text,
   and each row is an easy target */
@media (max-width: 33.9375em) {
  .tiles { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .tile summary { min-height: 0; padding: 1rem min(3rem, 12vw) 1rem min(1.1rem, 4vw); }
  .tile[open] summary::after { top: 50%; }
  .tile > p { padding: 0 1.1rem 1.2rem; }
}

/* ---- Rows: the other two offers, from the home page ------------------------ */
.rows { border-top: 1px solid var(--rule); }
.rows li { display: grid; gap: 0.5rem; padding-top: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); }
@media (min-width: 56em) { .rows li { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 3rem; align-items: baseline; } }
.rows__title { justify-self: start; color: var(--ink); text-decoration: underline; text-decoration-color: var(--copper); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.rows__title:hover { text-decoration-color: var(--copper-ink); }
.rows p { max-width: var(--measure); }

/* ---- The four pillars (both coaching offers) -------------------------------- */
.note-lead { margin-top: 3rem; max-width: var(--measure); }
.pillars { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.25rem; }
@media (max-width: 33.9375em) { .pillars { grid-template-columns: minmax(0, 1fr); } }   /* one to a row on a phone */
@media (min-width: 60em) { .pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pillars li { display: grid; gap: 0.4rem; align-content: start; padding: 1.25rem 1.1rem; background: var(--card); border-radius: var(--radius); border: 1px solid var(--rule); border-top: 2px solid var(--copper); }

/* ---- Steps: how working together runs --------------------------------------- */
.steps { display: grid; gap: 0; }
.steps li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1.25rem; padding-top: 1.1rem; padding-bottom: 1.1rem; border-top: 1px solid var(--rule); }
.steps li:last-child { border-bottom: 1px solid var(--rule); }
.steps .num { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--card); border: 1px solid var(--copper); }
.steps .step { align-self: center; max-width: var(--measure); }

/* ---- Prices: the two options as cards, like the leaflet ----------------------- */
.options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 56em) { .options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
/* minmax(0, 1fr): at 200% text on a 320px phone, Montserrat's "programme," is wider than the card (28 Oct) */
.option { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 1rem; padding: 1.75rem 1.5rem; background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--copper-ink); border-radius: var(--radius); }
.option--flex { border-top-color: var(--copper); }
.option ul, .voucher ul { display: grid; gap: 0.6rem; }
.option li, .voucher li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.option li svg, .voucher li svg { width: 1.25rem; height: 1.25rem; margin-top: 0.3rem; color: var(--copper); }
.price { font-variant-numeric: tabular-nums lining-nums; }

/* ---- Gift voucher (Anda, 30 Oct: "a nice gift voucher sign that can be clicked") ----
   A card with a dashed copper edge inside, like a printed voucher; no icon. The button's link is
   stretched over the card, so the whole card answers a tap while only the button is read as a link.
   On the home page it sits beside the questions families ask; on Services it runs under both prices. */
.voucher { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; justify-items: start; align-content: start; padding: 2.25rem 2rem; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); transition: box-shadow 0.3s var(--ease); }
.voucher::before { content: ""; position: absolute; inset: 0.5rem; border: 2px dashed var(--copper); border-radius: 6px; pointer-events: none; }
.voucher .btn { margin-top: 0.5rem; }
.voucher .btn::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
@media (hover: hover) { .voucher:hover { box-shadow: 0 10px 24px -18px rgba(58, 38, 33, 0.55); } }
.options .voucher { grid-column: 1 / -1; }
@media (min-width: 56em) {
  .options .voucher { grid-template-columns: minmax(0, 1fr) auto; column-gap: 2.5rem; align-items: center; padding: 2.25rem 2.5rem; }
  .options .voucher > :not(.btn) { grid-column: 1; }
  .options .voucher .btn { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
.faq-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
@media (min-width: 60em) { .faq-split { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 4rem; align-items: end; } }

/* ---- A note set apart: what the service is not ------------------------------ */
.note-box { padding: 1.5rem 1.6rem; background: var(--card); border: 1px solid var(--rule); border-left: 3px solid var(--copper); border-radius: 0 var(--radius) var(--radius) 0; max-width: 46rem; }
.note-box > * + * { margin-top: 1rem; }

/* ---- Credentials (About) ------------------------------------------------------ */
.credentials { display: grid; border-top: 1px solid var(--rule); }
.credentials > div { display: grid; gap: 0.35rem; padding-top: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule); }
@media (min-width: 48em) { .credentials > div { grid-template-columns: 15rem minmax(0, 1fr); gap: 1.5rem; } }

/* ---- FAQ: questions between hairlines, a plus that turns --------------- */
.faq { border-top: 1px solid var(--rule); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--rule); }
/* the question is the summary's own text, so it cannot be given min-width: 0; `anywhere` lets a word the
   line cannot hold (Montserrat's "emergency" at 200% text on a 320px phone) break instead of pushing the
   page sideways. At ordinary sizes every word fits and lines still break at spaces. */
.faq summary {
  display: flex; justify-content: space-between; gap: 1.5rem; align-items: center;
  padding-top: 1.35rem; padding-bottom: 1.35rem; cursor: pointer; list-style: none; overflow-wrap: anywhere;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 16px; height: 16px;
  background: linear-gradient(var(--copper), var(--copper)) center / 16px 2px no-repeat,
              linear-gradient(var(--copper), var(--copper)) center / 2px 16px no-repeat;
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-answer { padding-bottom: 1.5rem; max-width: var(--measure); }

/* ---- The booking form and contact lines -------------------------------------- */
.contact-lines { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin-top: 1.5rem; }
/* a number never splits, unless a phone at 200% text has no room for it on one line */
.contact-lines a { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 44px; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.contact-lines svg { width: 1.25em; height: 1.25em; flex: none; color: var(--copper); }
.booking .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
@media (min-width: 64em) { .booking .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 5rem; align-items: start; }
  /* the heading, phone and email stay in view beside the longer form */
  .booking .stack { position: sticky; top: calc(var(--bar) + 2rem); } }

.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; max-width: 44rem; padding: 2rem 1.5rem; background: var(--card); border-radius: var(--radius); border: 1px solid var(--rule); }
@media (min-width: 48em) { .form { padding: 2.25rem 2.25rem; } }
.form > *, .form fieldset > *, .field > * { min-width: 0; max-width: 100%; }
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 0.9rem; }
.form legend { padding: 0 0 0.5rem; }
.field { display: grid; gap: 0.4rem; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea {
  font: inherit; width: 100%; min-height: 52px; padding: 0.75rem 0.9rem;
  border: 1px solid var(--edge); border-radius: 8px; background: var(--page); color: var(--ink);
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--cocoa); }
.form textarea { min-height: 8rem; resize: vertical; }
.form select {
  -webkit-appearance: none; appearance: none; padding-right: 2.75rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 1.45rem) 52%, calc(100% - 1.05rem) 52%;
  background-size: 0.4rem 0.4rem; background-repeat: no-repeat;
}
.choice { display: flex; gap: 0.7rem; align-items: center; min-height: 44px; }
.choice input { width: 1.5rem; height: 1.5rem; margin: 0; flex: none; accent-color: var(--copper-ink); }
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.honey { display: none; }
/* Errors, GOV.UK pattern in Anda's own colours, never a stock red (LESSONS #46):
   a list at the top that takes focus and links to each field; each message above
   its field, after a visible "Error:", marked with a copper bar unlike the labels;
   the field's edge thickens, so colour is never the only cue. */
.error-summary, .form-fail { padding: 1.25rem 1.5rem; border: 3px solid var(--copper-ink); border-radius: 8px; background: var(--page); }
.error-summary:focus, .form-fail:focus { outline-offset: 4px; }
.error-summary ul { margin-top: 0.75rem; display: grid; gap: 0.5rem; }
.error-summary a { color: var(--link); }
.field-error { display: flex; align-items: baseline; gap: 0.6rem; margin: 0; color: var(--ink); }
.field-error::before { content: ""; width: 4px; align-self: stretch; flex: none; background: var(--copper-ink); }
.form [aria-invalid="true"] { border-width: 3px; border-color: var(--copper-ink); padding: calc(0.75rem - 2px) calc(0.9rem - 2px); }

/* ---- Closing band: the call and the email, on pale rose above the cocoa footer ---- */
.closing .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 60em) { .closing .wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 4rem; } }
.closing .actions { margin-top: 0; }

/* ---- Footer ---------------------------------------------------------------- */
.site-footer { padding-top: clamp(3.5rem, 7vw, 5.5rem); padding-bottom: 2rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 60em) { .footer-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3rem; } }
.footer-brand img { width: min(100%, 340px); height: auto; }
.footer-brand > * + * { margin-top: 1.25rem; }
.footer-links { display: grid; justify-items: start; margin-top: 0.5rem; }
.footer-links a, .footer-contact a, .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-soft); text-decoration: none; }
.footer-links a:hover, .footer-contact a:hover, .footer-bottom a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }
.footer-contact { display: grid; justify-items: start; }
.footer-bottom { display: grid; gap: 0.75rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }

/* ---- The bar at the foot of a phone: call Anda, or book a free chat --------- */
.sticky-cta {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 0.5rem;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(251, 246, 240, 0.2);
}
.sticky-cta .btn { padding: 0.4rem 0.6rem; min-height: 52px; white-space: normal; line-height: 1.2; }
body { padding-bottom: 4.75rem; }
/* very narrow in text terms (a 320px phone, or a phone at 150% text and up):
   the bar is the call alone; the booking button stays in the menu */
@media (max-width: 22em) {
  .sticky-cta { grid-template-columns: 1fr; }
  .sticky-cta .sticky-book { display: none; }
}
/* On the home page the bar waits until the opening's own buttons have scrolled away, and it
   steps aside while the menu is open. Without JavaScript it simply stays (LESSONS #44). */
.sticky-cta { transition: transform 0.25s var(--ease), visibility 0.25s; }
.sticky-cta.is-tucked { transform: translateY(110%); visibility: hidden; }
@media (min-width: 48em) { .sticky-cta { display: none; } body { padding-bottom: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header, .sticky-cta, .site-footer, .closing, .booking .form { display: none; }
  body { padding-bottom: 0; }
}

/* ---- "On this page": the three offers and the prices, from the Services opening ----
   Anda asked for a page each; this card lets each offer be reached like one. */
.jump { padding: 1.75rem 1.75rem 1.5rem; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
.jump ul { display: grid; margin-top: 0.75rem; }
.jump li + li { border-top: 1px solid var(--rule); }
main .jump a:not(.btn) { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; color: var(--ink); text-decoration: none; }
.jump a::after { content: ""; width: 0.55rem; height: 0.55rem; flex: none; border-bottom: 2px solid var(--copper); border-right: 2px solid var(--copper); transform: rotate(45deg); }


/* ---- "At a glance": the About opening's facts, the way both of Anda's liked profiles show them ----
   White House Health puts the booking details beside the bio; UKCP has an "Information" column. */
.glance { padding: clamp(1.25rem, 5vw, 1.75rem); background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--copper); border-radius: var(--radius); }
.glance dl { display: grid; margin-top: 0.75rem; }
.glance dl > div { display: grid; gap: 0.15rem; padding-top: 0.7rem; padding-bottom: 0.7rem; border-top: 1px solid var(--rule); }
@media (min-width: 30em) { .glance dl > div { grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; } }