/* ---------- Tokens ---------- */
:root {
  /* Brand palette — purple base sits at 400, grey base at 700 */
  --purple-50: #f5f6ff;
  --purple-100: #ecedfe;
  --purple-200: #d8dbff;
  --purple-300: #bec1fe;
  --purple-400: #9a99ff;
  --purple-500: #8988e9;
  --purple-600: #706ec6;
  --purple-700: #5854a4;
  --purple-800: #403c84;
  --purple-900: #2b2465;
  --purple-950: #190f4a;
  --grey-50: #f7f7f7;
  --grey-100: #eeeeee;
  --grey-200: #dedede;
  --grey-300: #c7c7c7;
  --grey-400: #afafaf;
  --grey-500: #959595;
  --grey-600: #7a7a7a;
  --grey-700: #666666;
  --grey-800: #484848;
  --grey-900: #303030;
  --grey-950: #1d1d1d;
  --white: #ffffff;
  /* Solid coloured boxes (About: Education, Ways of Working: Sessions at a glance).
     Change this one colour to recolour them. Keep it dark enough for white text (7.6:1 now). */
  --box-color: #74436b;
  --off-white-1: #fbfbfe;
  --off-white-2: #f7f8fe;
  --off-white-3: #f2f3fc;

  /* Roles. Text and buttons use purple-700: the 400 base is too light for
     readable text (2.4:1 on the off-whites), so it is kept for softer accents. */
  --bg: var(--off-white-1);
  --surface: var(--off-white-2);
  --surface-2: var(--off-white-3);
  --line: var(--purple-200);
  --ink: var(--grey-900);
  --muted: var(--grey-700);
  --accent: var(--purple-700);
  --accent-hover: var(--purple-800);
  --accent-soft: var(--purple-400);
  --highlight: var(--purple-100);
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Playfair Display", Georgia, serif;
  --container: 1200px;
  --gutter: 120px;
  --r-lg: 32px;
  --r-md: 24px;
  --r-sm: 16px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 80px 0; }
#about { padding-top: 56px; }
.section--tint { background: var(--surface); }
.section__head { margin-bottom: 56px; }
.section__head.center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.section__head.split { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.section__head.split > div { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* ---------- Type ---------- */
.h2 { font-weight: 400; font-size: 60px; line-height: 1.2; letter-spacing: -0.05em; }
.h2 em, .accent {
  font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--accent);
}
.h2 em { letter-spacing: -0.04em; }
.lead { font-size: 18px; line-height: 1.4; color: var(--muted); max-width: 750px; }

.tag, .chip {
  display: inline-flex; align-items: center; background: var(--surface-2); border-radius: 12px;
  font-weight: 700; color: var(--ink);
}
.tag { padding: 8px 16px; font-size: 16px; }
.tag--alt { background: var(--surface-2); }
.chip { padding: 4px 10px; font-size: 14px; color: var(--accent); border-radius: 8px; line-height: 1.2; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border-radius: 12px;
  font-weight: 600; font-size: 16px; letter-spacing: -0.02em; white-space: nowrap;
  transition: background-color .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--accent); color: var(--white); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--light { background: var(--surface-2); color: var(--ink); }
.btn--light:hover { background: var(--white); }
.btn--soft { background: var(--surface-2); color: var(--ink); }
.btn--soft:hover { background: var(--line); }
.btn--block { width: 100%; }

/* ---------- Logo ---------- */
.logo { font-family: var(--sans); font-weight: 200; font-size: 40px; line-height: 1; letter-spacing: -0.07em; color: #fff; }
.logo--dark { color: var(--ink); }
.brand { display: inline-flex; flex: none; }
.brand img { display: block; width: auto; }

/* ---------- Photo placeholders ---------- */
/* Photos are set with --photo (and the Studio's focal point with --pos), e.g. style="--photo:url(assets/images/hero.jpg)" */
.ph {
  position: relative; background-color: #8a5a3a; background-size: cover; background-position: var(--pos, center);
  background-image: var(--photo, none), var(--grad);
}
.ph--hero   { --grad: radial-gradient(60% 70% at 78% 62%, #f6c58f 0%, rgba(246,197,143,0) 60%), radial-gradient(45% 55% at 62% 40%, #b06a3c 0%, rgba(176,106,60,0) 70%), linear-gradient(120deg, #1b1008 0%, #4a2a16 45%, #c88a56 100%); }
.ph--hands  { --grad: radial-gradient(40% 40% at 45% 38%, #ffe3a8 0%, rgba(255,227,168,0) 70%), radial-gradient(70% 60% at 50% 100%, #3a1d0b 0%, rgba(58,29,11,0) 70%), linear-gradient(180deg, #d9923a 0%, #8a4f1e 100%); }
.ph--p1     { --grad: linear-gradient(160deg, #f3d6b4 0%, #c98d5d 55%, #5a321b 100%); }
.ph--p2     { --grad: linear-gradient(160deg, #cfe0e6 0%, #d9b08a 55%, #4b2a17 100%); }
.ph--p3     { --grad: linear-gradient(160deg, #a9c3d6 0%, #e5c29a 60%, #c58c58 100%); }
.ph--s1     { --grad: radial-gradient(50% 60% at 70% 30%, #e7b98a 0%, rgba(231,185,138,0) 70%), linear-gradient(160deg, #2a170c 0%, #6f4426 60%, #b98456 100%); }
.ph--s2     { --grad: linear-gradient(140deg, #d8cdb8 0%, #9a8667 60%, #4d3f2b 100%); }
.ph--s3     { --grad: radial-gradient(50% 50% at 40% 40%, #f1c78d 0%, rgba(241,199,141,0) 70%), linear-gradient(160deg, #7ea2b8 0%, #c79a6c 100%); }
.ph--s4     { --grad: linear-gradient(150deg, #e9c9a3 0%, #b57850 55%, #3d2314 100%); }
.ph--a1     { --grad: linear-gradient(140deg, #efe6da 0%, #cdbfae 55%, #7d8a63 100%); }
.ph--a2     { --grad: radial-gradient(50% 55% at 50% 55%, #7a4b2c 0%, rgba(122,75,44,0) 60%), linear-gradient(180deg, #f4c58a 0%, #e59d5c 100%); }
.ph--a3     { --grad: linear-gradient(130deg, #2b190d 0%, #8b5a37 60%, #d1a574 100%); }

/* ---------- Nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
.nav__inner { max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 20px var(--gutter); height: 78px; display: flex; align-items: center; justify-content: space-between; }
.nav__links { display: flex; gap: 24px; }
.nav__links a { font-size: 14px; font-weight: 600; letter-spacing: 0; color: #fff; transition: color .3s var(--ease), opacity .2s; }
.nav__links a:hover { opacity: .65; }
.nav__links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.nav__brand { display: grid; }
.nav__brand img { grid-area: 1 / 1; height: 48px; transition: opacity .3s var(--ease); }
.nav__brand .brand__dark { opacity: 0; }
.nav.is-dark .brand__light, .nav.is-open .brand__light { opacity: 0; }
.nav.is-dark .brand__dark, .nav.is-open .brand__dark { opacity: 1; }
.nav__cta { height: 40px; padding: 0 18px; font-size: 14px; }
.nav.is-dark .nav__links a { color: var(--ink); }
.nav.is-dark { background: var(--bg); }
.nav__toggle { display: none; width: 40px; height: 40px; position: relative; }
.nav__toggle span { position: absolute; left: 10px; right: 10px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), top .3s var(--ease), background-color .3s; }
.nav__toggle span:nth-child(1) { top: 16px; } .nav__toggle span:nth-child(2) { top: 23px; }
.nav.is-dark .nav__toggle span, .nav.is-open .nav__toggle span { background: var(--ink); }
.nav.is-open .nav__toggle span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { top: 20px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; }
.hero__bg { position: absolute; inset: -4% 0; animation: drift 24s ease-in-out infinite alternate; will-change: transform; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(25,15,74,.45) 0%, rgba(25,15,74,0) 35%, rgba(25,15,74,.35) 100%); }
/* Home banner: an extra soft wash behind the text side, so white text stays readable over bright photos */
.hero:not(.hero--page) .hero__shade { background: linear-gradient(90deg, rgba(25,15,74,.5) 0%, rgba(25,15,74,.25) 45%, rgba(25,15,74,0) 75%), linear-gradient(180deg, rgba(25,15,74,.45) 0%, rgba(25,15,74,0) 35%, rgba(25,15,74,.45) 100%); }
.hero__content { position: relative; padding-bottom: 80px; }
.hero__title { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 6.25vw, 90px); line-height: 1.1; letter-spacing: -0.04em; max-width: 900px; }
.hero__lead { margin-top: 20px; max-width: 540px; font-size: 18px; line-height: 1.4; }
.btn-row { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hero--page { min-height: 72vh; min-height: 72svh; }
.hero--page .hero__title { font-size: clamp(44px, 5.2vw, 76px); }
.hero--page .tag { margin-bottom: 20px; }
@keyframes drift { from { transform: scale(1) translate3d(0,0,0); } to { transform: scale(1.08) translate3d(-1.5%, -1%, 0); } }

/* ---------- Opening sentence ---------- */
/* Three photo cards in a centred row, the middle one lifted into a gentle arch, with the
   sentence underneath. script.js fades the sentence in word by word once it scrolls into view. */
.statement { position: relative; background: var(--bg); padding: 112px 24px 96px; display: flex; flex-direction: column; align-items: center; }
.statement__photos {
  --lift: 36px;
  width: 100%; max-width: 980px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: end;
  padding-top: var(--lift);
}
.statement__photo {
  padding: 8px; background: var(--surface); border-radius: 24px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.statement__photo:nth-child(2) { transform: translateY(calc(var(--lift) * -1)); }
.statement__photo:hover { box-shadow: 0 24px 48px -28px rgba(43, 36, 101, .35); }
.statement__photo:first-child:hover, .statement__photo:last-child:hover { transform: translateY(-6px); }
.statement__photo:nth-child(2):hover { transform: translateY(calc(var(--lift) * -1 - 6px)); }
.statement__photo .ph { aspect-ratio: 4 / 5; border-radius: 16px; }
.phrase {
  position: relative; z-index: 1; margin: 48px 0 0; max-width: 780px; text-align: center; text-wrap: balance;
  font-size: clamp(30px, 3.4vw, 48px); line-height: 1.3; letter-spacing: -0.05em; font-weight: 400; color: var(--ink);
}
.phrase .line { display: inline; }
.phrase .accent { font-family: inherit; font-style: normal; font-weight: 400; letter-spacing: inherit; color: var(--accent); }
.phrase .w { display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(14px); transition: opacity .7s var(--ease), filter .7s var(--ease), transform .7s var(--ease); white-space: pre; }
.phrase.is-active .w { opacity: 1; filter: none; transform: none; }
/* script.js adds .reveal--row: the cards rise as they come into view, the outer pair together, then the middle one */
.js .reveal--row .statement__photo { opacity: 0; translate: 0 24px; transition: opacity 1s var(--ease), translate 1s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease); transition-delay: var(--d, 0ms), var(--d, 0ms), 0ms, 0ms; }
.js .reveal--row.in .statement__photo { opacity: 1; translate: none; }

/* ---------- Philosophy ---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); border-radius: var(--r-lg); padding: 8px; gap: 40px; align-items: stretch; }
.feature__media { min-height: 734px; border-radius: 24px; }
.feature--flip .feature__media { order: 2; }
.feature--flip .feature__body { padding: 40px 0 40px 40px; }
.feature__body { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 40px 40px 40px 0; }
.feature__body .h2 { font-size: 60px; margin-bottom: 8px; }
.feature__body p { font-size: 18px; line-height: 1.4; color: var(--muted); }
.feature__sign { margin-top: auto; padding-top: 48px; }

/* Extra paragraphs at the end of "My approach" */
.approach-extra { max-width: 760px; margin: 48px auto 0; display: flex; flex-direction: column; gap: 28px; }
.approach-extra h3 { font-family: var(--sans); font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink); margin-bottom: 6px; }
.approach-extra p { font-size: 18px; line-height: 1.5; color: var(--muted); }

/* Smaller, portrait photo (Donna on the Home page) */
.feature--compact { grid-template-columns: 420px 1fr; }
.feature--compact .feature__media { min-height: 0; aspect-ratio: 4 / 5; background-position: var(--pos, 50% 22%); }
.feature--compact .feature__body { justify-content: center; }

/* ---------- Services ---------- */
.services { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.services__list { display: flex; flex-direction: column; gap: 8px; }
.svc { background: var(--surface); border-radius: var(--r-md); transition: background-color .3s; }
.svc__btn { display: block; width: 100%; text-align: left; padding: 24px; }
.svc h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.3; letter-spacing: -0.04em; color: var(--accent-soft); transition: color .3s var(--ease); }
.svc:hover h3 { color: var(--accent); }
.svc.is-open h3 { color: var(--accent); }
.svc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.svc__panel > div { overflow: hidden; padding: 0 24px; opacity: 0; transition: opacity .35s var(--ease), padding .45s var(--ease); }
.svc__panel p { font-size: 18px; line-height: 1.4; color: var(--muted); }
.svc__panel p + p { margin-top: 12px; }
.svc__panel strong { color: var(--ink); font-weight: 600; }
.svc__panel .checks { margin: 4px 0 0; }
.svc.is-open .svc__panel { grid-template-rows: 1fr; }
.svc.is-open .svc__panel > div { opacity: 1; padding: 0 24px 24px; margin-top: -12px; }
.services__media { position: sticky; top: 100px; aspect-ratio: 592 / 480; background: var(--surface); padding: 8px; border-radius: var(--r-md); }
.services__media .ph { position: absolute; inset: 8px; border-radius: 16px; opacity: 0; transition: opacity .6s var(--ease); }
.services__media .ph.is-active { opacity: 1; }

/* ---------- Process ---------- */
.process-hero { position: relative; height: 600px; border-radius: var(--r-lg); overflow: hidden; display: grid; place-items: center; text-align: center; margin-bottom: 12px; }
.process-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: var(--pos, center); background-image: linear-gradient(rgba(25,15,74,.38), rgba(25,15,74,.38)), var(--photo, none), radial-gradient(60% 80% at 20% 30%, #c98d5d 0%, rgba(201,141,93,0) 65%), radial-gradient(60% 80% at 85% 85%, #6b3d22 0%, rgba(107,61,34,0) 70%), linear-gradient(135deg, #3a2112, #8a5a3a); }
.process-hero__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; max-width: 800px; padding: 0 24px; }
.process-hero__text { font-size: 42px; line-height: 1.3; letter-spacing: -0.05em; font-weight: 600; color: #fff; }
.process-hero__text .w { opacity: .3; transition: opacity .3s linear; }
.process-hero__text .w.on { opacity: 1; }
.process-hero--after { margin: 12px 0 0; }
/* Warm version of the photo banner: a soft brown wash instead of the purple one, a touch of sepia and a gentle glow.
   To go back to the plain photo, remove the "warm" word from the Banner in individual-counselling.astro. */
.process-hero--warm .process-hero__bg { filter: sepia(.22) saturate(1.08) brightness(1.04); background-image: linear-gradient(rgba(72,38,16,.34), rgba(72,38,16,.34)), var(--photo, none), radial-gradient(60% 80% at 20% 30%, #c98d5d 0%, rgba(201,141,93,0) 65%), radial-gradient(60% 80% at 85% 85%, #6b3d22 0%, rgba(107,61,34,0) 70%), linear-gradient(135deg, #3a2112, #8a5a3a); }
.process-hero--warm .process-hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,190,130,.20), rgba(255,150,100,.10)); mix-blend-mode: soft-light; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.step { background: var(--surface); border-radius: var(--r-md); padding: 28px 28px 30px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.step__n { font-family: var(--serif); font-size: 32px; line-height: 1.3; letter-spacing: -0.04em; color: var(--accent); }
.step h3 { font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -0.04em; color: var(--accent); }
.step p { font-size: 16px; line-height: 1.4; color: var(--muted); max-width: 340px; }
.step--bg { background: var(--bg); }
.step--framed { border: 2px solid var(--accent); }
.steps--2 { grid-template-columns: repeat(2, 1fr); }
.steps--2 .step p { max-width: 460px; }
.steps--4 { grid-template-columns: repeat(4, 1fr); }
/* Boxes for the "first session" steps. Change the look of all four here. */
.steps--cards {
  --card-bg: var(--white);
  --card-border: var(--line);
  --card-radius: var(--r-md);
  --card-pad: 32px 28px;
  gap: 16px;
}
.steps--cards .step { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: var(--card-pad); text-align: left; align-items: flex-start; gap: 12px; }
.steps--cards { align-items: start; }
.steps--cards .step { display: block; padding: 0 var(--card-pad-x, 28px); }
.steps--cards .step p { max-width: none; padding-bottom: 28px; }
.steps--cards .step summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0; cursor: pointer; list-style: none; }
.steps--cards .step summary::-webkit-details-marker { display: none; }
.steps--cards .step summary h3 { font-size: 20px; }
.steps--cards .step[open] { background: var(--purple-50); }

/* ---------- Testimonials ---------- */
.stats { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; margin-bottom: 56px; }
.stat { display: flex; align-items: center; gap: 16px; }
.stat strong { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.3; letter-spacing: -0.04em; color: var(--accent); }
.stat span { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--muted); padding-left: 16px; border-left: 1px solid var(--line); line-height: 1.3; }
.carousel__viewport { overflow: hidden; }
.carousel__track { display: flex; gap: 16px; transition: transform .7s var(--ease); }
.quote { flex: 0 0 calc((100% - 32px) / 3); background: var(--surface-2); border-radius: var(--r-md); padding: 32px; display: flex; flex-direction: column; gap: 24px; min-height: 210px; }
.quote figcaption { display: flex; align-items: center; gap: 14px; }
.quote figcaption > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.quote b { font-size: 16px; font-weight: 600; line-height: 1.3; }
.quote small { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.quote blockquote { font-size: 20px; line-height: 1.25; letter-spacing: -0.04em; }
.avatar { width: 46px; height: 46px; border-radius: 50%; flex: none; background: var(--photo, none) center / cover, var(--g); }
.a1 { --g: linear-gradient(135deg, #e4b58a, #6c3d22); } .a2 { --g: linear-gradient(135deg, #f1d2b0, #a86a42); }
.a3 { --g: linear-gradient(135deg, #cfc3b6, #4b3a2c); } .a4 { --g: linear-gradient(135deg, #e9c6a2, #8c5836); }
.a5 { --g: linear-gradient(135deg, #d9b79a, #5b3a28); } .a6 { --g: linear-gradient(135deg, #f0d8bd, #b57a50); }
.dots { display: flex; justify-content: center; width: fit-content; margin: 56px auto 0; gap: 8px; padding: 8px 10px; border-radius: 999px; background: var(--surface-2); }
.dots button { width: 8px; height: 8px; border-radius: 50%; background: var(--purple-200); transition: background-color .3s, transform .3s; }
.dots button.is-active { background: var(--accent); }
.dots button:hover { transform: scale(1.25); }

/* ---------- Pricing ---------- */
.pricing { display: grid; grid-template-columns: 1fr 2fr; background: var(--surface); border-radius: var(--r-lg); padding: 8px; }
.pricing__panel { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg); border-radius: var(--r-md); }
.plan { padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 12px; }
.plan h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.3; letter-spacing: -0.04em; color: var(--accent); }
.plan__desc { font-size: 16px; line-height: 1.4; color: var(--muted); padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.plan__price { font-size: 42px; font-weight: 600; line-height: 1.3; letter-spacing: -0.05em; }
.plan .btn { margin-top: auto; }
.plan__price .tbc { font-size: 20px; letter-spacing: -0.02em; vertical-align: middle; }
.plan__price sup { font-size: inherit; vertical-align: baseline; margin-right: 8px; }
.checks { display: flex; flex-direction: column; gap: 14px; margin: 0 0 16px; flex: 1; }
.checks li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.4; color: var(--muted); }
.checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--line); }
.checks li::after { content: ""; position: absolute; left: 5.5px; top: 6.5px; width: 3.5px; height: 6.5px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(40deg); opacity: .8; }
.help-strip { margin: 24px auto 0; max-width: 900px; background: var(--surface); border-radius: var(--r-md); padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.help-strip h3 { font-size: 24px; font-weight: 500; letter-spacing: -0.04em; line-height: 1.3; }
.help-strip p { color: var(--muted); margin-top: 4px; }

/* ---------- FAQ ---------- */
.faq { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 27px 0; font-size: 18px; font-weight: 600; line-height: 1.3; cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.faq__icon { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); transition: background-color .25s; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--accent); transform: translate(-50%, -50%); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .35s var(--ease); }
summary:hover .faq__icon { background: var(--line); }
details[open] > summary .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a { padding-bottom: 24px; font-size: 18px; line-height: 1.4; color: var(--muted); }
.faq__item { margin-top: -6px; padding: 0 24px; border-radius: var(--r-md); transition: background-color .35s var(--ease); }
/* An open question sits on a soft purple panel */
.faq__item[open] { background: var(--purple-50); }
details[open] > summary .faq__icon { background: var(--white); }

/* ---------- Solid coloured boxes ---------- */
.solid-box { background: var(--box-color); color: var(--white); border-radius: var(--r-lg); padding: 56px; }
.solid-box .h2, .solid-box .h2 em, .solid-box h3, .solid-box .lead, .solid-box p,
.solid-box .glance dt, .solid-box .glance dd, .solid-box .glance dd small, .solid-box .feature__body p { color: var(--white); }
.solid-box .tag, .solid-box .tag--alt { background: var(--white); color: var(--box-color); }
.solid-box .glance { background: none; padding: 0; }
.solid-box .glance__item { background: rgba(255, 255, 255, .12); }
.solid-box .help-strip, .section--tint .solid-box .help-strip { background: rgba(255, 255, 255, .12); }
.feature--solid { padding: 8px; gap: 40px; }
.feature--solid .feature__body { color: var(--white); }
@media (max-width: 1024px) { .solid-box { padding: 40px 28px; } .feature--solid { padding: 8px; } }
@media (max-width: 600px) { .solid-box { padding: 28px 16px; border-radius: 20px; } .feature--solid { padding: 6px; } }

/* ---------- Articles ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { background: var(--surface); border-radius: var(--r-md); padding: 8px; display: flex; flex-direction: column; transition: transform .35s var(--ease); }
.card:hover { transform: translateY(-4px); }
.card__img { aspect-ratio: 371 / 270; border-radius: var(--r-sm); overflow: hidden; }
.card__img::after { content: ""; position: absolute; inset: 0; transition: transform .6s var(--ease); }
.card:hover .card__img { filter: saturate(1.1); }
.card__body { padding: 20px 12px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.card h3 { font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -0.04em; }
.card p { font-size: 16px; line-height: 1.4; color: var(--muted); }

/* ---------- Shared page pieces ---------- */
.section--flush { padding-top: 0; }
.section__foot { margin: 40px auto 0; text-align: center; }
.center-row { display: flex; justify-content: center; margin-top: 40px; }
.intro-text { max-width: 960px; margin: 0 auto; text-align: center; font-size: 36px; line-height: 1.35; letter-spacing: -0.04em; font-weight: 400; }
.intro-text em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--accent); }
.intro-text.section__head { margin-bottom: 56px; }
.subhead { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.3; letter-spacing: -0.04em; color: var(--accent); text-align: center; margin: 0 0 24px; }
/* Details still to confirm with the client — easy to spot, easy to remove */
.tbc { background: var(--highlight); color: var(--accent); border-radius: 6px; padding: 0 6px; font-weight: 600; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.checks--lg li { font-size: 18px; }
/* Long-form text: privacy and cookie policies */
.prose { max-width: 760px; margin: 0 auto; font-size: 17px; font-weight: 400; line-height: 1.6; letter-spacing: -0.01em; color: var(--muted); }
.prose__updated { font-size: 14px; font-weight: 600; color: var(--accent); }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.3; letter-spacing: -0.04em; color: var(--ink); margin: 48px 0 16px; }
.prose p, .prose ul { margin-top: 16px; }
.prose ul { list-style: disc; padding-left: 1.25em; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--accent-soft); }
.prose strong { font-weight: 700; color: var(--ink); }
.prose a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent-hover); }
.feature__body .checks { flex: none; margin: 0; }
.section--tint .help-strip { background: var(--bg); }
.quote figcaption b { font-size: 18px; color: var(--accent); }

/* Call to action card */
.cta { background: var(--surface); border-radius: var(--r-lg); padding: 72px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cta .h2 { max-width: 900px; }
.cta .btn-row { justify-content: center; margin-top: 16px; }

/* Two / three up cards */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.duo--3 { grid-template-columns: repeat(3, 1fr); }
.panel-card { background: var(--surface); border-radius: var(--r-md); padding: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.panel-card h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.3; letter-spacing: -0.04em; color: var(--accent); }
.panel-card p { font-size: 18px; line-height: 1.4; color: var(--muted); }
.panel-card .checks { margin: 4px 0 0; }

/* Sessions at a glance */
.glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; background: var(--surface-2); border-radius: var(--r-lg); padding: 8px; margin: 0; }
.glance__item { background: var(--bg); border-radius: var(--r-md); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.glance dt { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.glance dd { margin: 0; font-family: var(--serif); font-size: 24px; line-height: 1.3; letter-spacing: -0.04em; color: var(--accent); }
.glance dd small { display: block; margin-top: 6px; font-family: var(--sans); font-size: 14px; letter-spacing: 0; line-height: 1.4; color: var(--muted); font-weight: 400; }

/* Qualifications */
.quals { background: var(--surface); border-radius: var(--r-lg); padding: 8px; }
.quals__table { background: var(--bg); border-radius: var(--r-md); padding: 8px 32px; }
.qual { display: grid; grid-template-columns: 2fr 1.2fr auto; gap: 24px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--line); }
.qual:last-child { border-bottom: 0; }
.qual h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.3; letter-spacing: -0.04em; color: var(--accent); }
.qual span { font-size: 16px; color: var(--muted); }
.qual .qual__when { font-weight: 600; color: var(--ink); }
.quals__note { padding: 20px 32px 16px; font-size: 16px; color: var(--muted); }

/* Contact */
.contact { display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; background: var(--surface); border-radius: var(--r-lg); padding: 8px; }
.form { background: var(--bg); border-radius: var(--r-md); padding: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.form__row { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { width: 100%; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { font-size: 14px; font-weight: 600; letter-spacing: 0; padding: 0; }
.field legend { margin-bottom: 8px; }
.field label span { color: var(--accent); }
.field small { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.field input, .field textarea { width: 100%; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); padding: 0 12px; font: inherit; font-size: 16px; color: var(--ink); letter-spacing: -0.02em; }
.field textarea { height: auto; min-height: 140px; padding: 12px; resize: vertical; line-height: 1.4; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--white); }
.field [aria-invalid="true"] { border-color: var(--accent); }
.choices { display: flex; gap: 8px; flex-wrap: wrap; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 12px; background: var(--surface-2); font-size: 14px; font-weight: 600; letter-spacing: 0; cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease); }
.choice span:hover { background: var(--line); }
.choice input:checked + span { background: var(--accent); color: var(--white); }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.4; color: var(--muted); cursor: pointer; }
.consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); }
.consent a, .crisis a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.form__msg { min-height: 20px; font-size: 14px; color: var(--accent); }
.contact__details { padding: 32px 24px; display: flex; flex-direction: column; gap: 24px; }
.contact__title { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.3; letter-spacing: -0.04em; color: var(--accent); }
.contact__details dl { margin: 0; display: flex; flex-direction: column; gap: 20px; }
.detail { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.detail:last-child { border-bottom: 0; padding-bottom: 0; }
.detail dt { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--muted); margin-bottom: 4px; }
.detail dd { margin: 0; font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }
.detail a { transition: color .2s; }
.detail a:hover { color: var(--accent); }

/* ---------- Footer ---------- */
.section--footer { padding: 40px 0; }
.footer { background: var(--surface); border-radius: var(--r-lg); padding: 48px 56px 28px; }
.footer__grid { display: grid; grid-template-columns: 0.9fr 1.7fr 0.8fr 1.2fr; gap: 40px; padding-bottom: 40px; }
.footer__brand { margin-bottom: 20px; }
.footer__brand img { height: 104px; }
.footer__about p { font-size: 16px; line-height: 1.4; color: var(--muted); max-width: 320px; }
.footer__col h3 { font-size: 14px; font-weight: 700; letter-spacing: 0; margin-bottom: 16px; }
.footer__col li, .footer__col p { font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.footer__col li + li { margin-top: 10px; }
.footer__col li a { font-weight: 600; transition: color .2s; }
.footer__col a:hover { color: var(--accent); }
.footer__membership { width: 100%; max-width: 220px; height: auto; }
.footer__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.footer__badges:not(:empty) { margin-bottom: 12px; }
.footer__contact li { display: flex; align-items: flex-start; gap: 10px; }
.footer__contact .icon { flex: none; margin-top: 2px; color: var(--accent); }
.footer__contact address { font-style: normal; }
.crisis { background: var(--bg); border-radius: var(--r-md); padding: 20px 24px; font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.5; color: var(--muted); }
.crisis strong { color: var(--ink); font-weight: 700; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.footer__bottom nav { display: flex; gap: 24px; }
.footer__credit { margin-left: 12px; }
.footer__bottom a { font-weight: 600; transition: color .2s; }
.footer__bottom a:hover { color: var(--accent); }

/* ---------- Motion ---------- */
/* script.js adds .reveal (fade up as a block), .reveal--stagger (each child in turn) and splits
   headings into words (.w). Everything here only applies once JavaScript has run (html.js), so
   nothing is hidden without it, and script.js skips it all for people who prefer reduced motion. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal--stagger { opacity: 1; transform: none; transition: none; }
.js .reveal--stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal--stagger.in > * { opacity: 1; transform: none; }
.js .is-split, .js .reveal--stagger > .is-split { opacity: 1; transform: none; }
.js .w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px); transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); transition-delay: var(--d, 0ms); }
.js .in .w, .js .is-in .w { opacity: 1; transform: none; filter: none; }
.js .reveal .checks li, .js .reveal--stagger .checks li { opacity: 0; transform: translateX(-10px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0ms); }
.js .in .checks li { opacity: 1; transform: none; }
.js .reveal--media { opacity: 0; transform: scale(.96); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.js .reveal--media.in { opacity: 1; transform: none; }
/* Hero: the title rises word by word on load, then the text and buttons follow */
.js .hero__content > * { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.js .hero.is-in .hero__content > * { opacity: 1; transform: none; }
.js .hero__content > .is-split { opacity: 1; transform: none; }
.js .hero__bg { opacity: 0; transition: opacity 1.2s ease; }
.js .hero.is-in .hero__bg { opacity: 1; }
/* Phone menu: links slide in one after another */
.nav__links-cta { display: none; }
.nav.is-open .nav__links > * { animation: menu-in .45s var(--ease) both; animation-delay: calc(var(--n, 0) * 45ms); }
.nav__links > :nth-child(1) { --n: 1; } .nav__links > :nth-child(2) { --n: 2; } .nav__links > :nth-child(3) { --n: 3; }
.nav__links > :nth-child(4) { --n: 4; } .nav__links > :nth-child(5) { --n: 5; } .nav__links > :nth-child(6) { --n: 6; }
@keyframes menu-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
  :root { --gutter: 40px; }
  .h2, .feature__body .h2 { font-size: 48px; }
  .feature, .feature--compact { grid-template-columns: 1fr; gap: 0; }
  .feature__media { min-height: 0; aspect-ratio: 16 / 10; }
  .feature--compact .feature__media { aspect-ratio: 4 / 5; max-width: 420px; width: 100%; margin: 0 auto; }
  .feature--flip .feature__media { order: 0; }
  .feature__body, .feature--flip .feature__body { padding: 32px; }
  .statement { padding: 88px 24px 72px; }
  .statement__photos { --lift: 24px; gap: 20px; }
  .pricing { grid-template-columns: 1fr; }
  .quote { flex-basis: calc((100% - 16px) / 2); }
  .footer { padding: 40px 40px 28px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .glance { grid-template-columns: repeat(2, 1fr); }
  .steps--4 { grid-template-columns: repeat(2, 1fr); }
  .phrase { max-width: 640px; margin-top: 40px; }
  .duo--3 { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .intro-text { font-size: 30px; }
  .qual { grid-template-columns: 1fr auto; }
  .qual > span:not(.qual__when) { grid-row: 2; }
}

/* ---------- Collapsed nav ---------- */
@media (max-width: 1099px) {
  .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .nav__links { position: fixed; inset: 78px 12px auto 12px; background: var(--bg); border-radius: var(--r-md); padding: 12px 24px; flex-direction: column; gap: 0; box-shadow: 0 20px 50px rgba(25, 15, 74, .12); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .25s, transform .25s; }
  .nav__links a { color: var(--ink); font-size: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav__links a:last-child { border-bottom: 0; }
  .nav.is-open { background: var(--bg); }
  .nav.is-open .nav__links { opacity: 1; pointer-events: auto; transform: none; }
  .nav__links-cta { display: inline-flex; margin: 16px 0 8px; width: 100%; height: 48px; font-size: 16px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 809px) {
  :root { --gutter: 16px; --r-lg: 24px; --r-md: 20px; }
  body { font-size: 15px; }
  .section { padding: 48px 0; }
  #about { padding-top: 40px; }
  .section__head { margin-bottom: 28px; }
  .section__head.center { gap: 12px; }
  .section__head.split { flex-direction: column; align-items: flex-start; }
  .section__foot { margin-top: 28px; }
  .center-row { margin-top: 28px; }
  .h2, .feature__body .h2 { font-size: 36px; line-height: 1.15; }
  .lead { font-size: 16px; }
  .tag { padding: 6px 12px; font-size: 13px; border-radius: 10px; }
  .btn { height: 46px; padding: 0 20px; font-size: 15px; }
  .logo { font-size: 34px; }
  .nav__brand img { height: 36px; }
  .nav__inner { padding: 16px 20px; height: 68px; }
  .nav__links { inset: 68px 12px auto 12px; }
  .prose { font-size: 16px; }
  .prose h2 { font-size: 26px; margin-top: 40px; }

  /* Banners: shorter, with a stronger wash at the bottom so the text reads over any photo */
  .hero { min-height: 92svh; }
  .hero__shade, .hero:not(.hero--page) .hero__shade { background: linear-gradient(180deg, rgba(25,15,74,.4) 0%, rgba(25,15,74,.12) 30%, rgba(25,15,74,.3) 55%, rgba(25,15,74,.72) 100%); }
  .hero__content { padding-bottom: 40px; }
  .hero__title { font-size: 46px; line-height: 1.05; }
  .hero__lead { margin-top: 14px; font-size: 16px; }
  .btn-row { margin-top: 24px; gap: 10px; }
  .btn-row .btn { flex: 1 1 100%; }
  .hero--page { min-height: 0; padding-top: 150px; }
  .hero--page .hero__title { font-size: 38px; }
  .hero--page .tag { margin-bottom: 14px; }
  .hero--page .hero__lead { font-size: 15px; }

  /* Opening sentence: three small photos in a row, the sentence underneath */
  .statement { padding: 48px 20px 44px; }
  .statement__photos { --lift: 12px; gap: 10px; }
  .statement__photo { padding: 5px; border-radius: 16px; }
  .statement__photo .ph { border-radius: 11px; }
  .phrase { margin-top: 32px; font-size: 26px; line-height: 1.3; max-width: 100%; }

  /* Photo-and-text cards: photo first */
  .feature { padding: 6px; }
  .feature__media, .feature--flip .feature__media { min-height: 0; aspect-ratio: 5 / 4; order: 0; border-radius: 18px; }
  .feature--compact .feature__media { aspect-ratio: 4 / 5; max-width: none; }
  .feature__body, .feature--flip .feature__body { padding: 22px 14px 20px; gap: 14px; }
  .feature__body p { font-size: 16px; }
  .feature__sign { padding-top: 20px; }
  .feature__body .checks { gap: 10px; }

  .intro-text { font-size: 22px; line-height: 1.35; }
  .intro-text.section__head { margin-bottom: 28px; }
  .cta { padding: 40px 20px; gap: 12px; }
  .cta .h2 { font-size: 32px; }
  .cta .btn-row { width: 100%; }

  /* Accordion with photo */
  .services { gap: 10px; }
  .services { grid-template-columns: 1fr; }
  .services__media { position: relative; top: 0; order: -1; aspect-ratio: 16 / 10; padding: 6px; }
  .services__media .ph { inset: 6px; border-radius: 14px; }
  .svc__btn { padding: 18px 20px; }
  .svc h3 { font-size: 26px; }
  .svc__panel > div { padding: 0 20px; }
  .svc.is-open .svc__panel > div { padding: 0 20px 20px; }
  .svc__panel p { font-size: 16px; }

  /* Photo banner with words */
  .process-hero { height: 400px; }
  .process-hero__text { font-size: 26px; }
  .process-hero__inner { gap: 20px; }

  /* Steps: number beside the words, not above them */
  .steps { grid-template-columns: 1fr; gap: 8px; }
  .step { padding: 20px; text-align: left; align-items: flex-start; gap: 4px; }
  /* No step numbers on phones, just the title and subtitle */
  .step--numbered { display: flex; }
  .step__n { display: none; }
  .step h3 { font-size: 20px; }
  .step p { font-size: 15px; max-width: none; }
  .steps--cards { gap: 10px; --card-pad: 22px 20px; --card-pad-x: 20px; }
  .subhead { font-size: 26px; margin-bottom: 16px; }

  /* Figures in a row of three */
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 28px; }
  .stat { flex-direction: column; align-items: center; gap: 4px; background: var(--bg); border-radius: 16px; padding: 16px 8px; text-align: center; }
  .stat strong { font-size: 26px; }
  .stat span { padding: 0; border: 0; font-size: 12px; }

  /* Value cards */
  .quote { flex-basis: 100%; padding: 24px; min-height: 0; gap: 16px; }
  .quote blockquote { font-size: 18px; }
  .dots { margin-top: 28px; }

  /* Two / three up */
  .duo, .steps--2, .steps--4 { grid-template-columns: 1fr; gap: 10px; }
  .panel-card { padding: 22px 20px; gap: 10px; }
  .panel-card h3, .contact__title { font-size: 26px; }
  .panel-card p { font-size: 16px; }

  /* At a glance: two small tiles per row */
  .glance { grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; }
  .glance__item { padding: 16px 14px; gap: 4px; border-radius: 14px; }
  .glance dt { font-size: 12px; }
  .glance dd { font-size: 18px; }
  .glance dd small { font-size: 12px; margin-top: 4px; }
  .help-strip { flex-direction: column; align-items: flex-start; padding: 20px; gap: 16px; }
  .help-strip h3 { font-size: 20px; }

  /* Prices */
  .pricing { padding: 6px; }
  .pricing__panel { grid-template-columns: 1fr; }
  .plan { padding: 22px 20px; gap: 10px; }
  .plan h3 { font-size: 26px; }
  .plan__price { font-size: 34px; }

  /* Questions */
  .faq { padding: 0; }
  .faq__q { font-size: 16px; padding: 20px 0; }
  .faq__item { padding: 0 16px; border-radius: 16px; }
  .faq__a { font-size: 16px; padding-bottom: 20px; }

  /* Contact */
  .form { padding: 22px 16px; gap: 16px; }
  .form__row { grid-template-columns: 1fr; gap: 16px; }
  .form .btn { width: 100%; }
  .contact__details { padding: 22px 16px; gap: 16px; }
  .cards { grid-template-columns: 1fr; }

  /* Footer */
  .footer { padding: 28px 20px 20px; }
  .footer__grid { grid-template-columns: 1fr; gap: 24px; padding-bottom: 24px; }
  .footer__brand { margin-bottom: 8px; }
  .footer__brand img { height: 72px; }
  .footer__col ul:not(.footer__contact) { display: flex; flex-wrap: wrap; gap: 8px 20px; }
  .footer__col ul:not(.footer__contact) li + li { margin-top: 0; }
  .crisis { padding: 16px 18px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer__credit { margin-left: 0; display: block; margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}