/* =============================================
   Ask Miss Favalli — New design: "the prepared environment"
   Used only by index.html (the homepage).
   ============================================= */

/* Nunito Sans, served from this website (fonts/) instead of Google Fonts, so visitors' browsers
   never contact Google and the privacy policy's "no cookies or tracking tools" stays true.
   Variable font files (one file covers every weight). Licence: SIL Open Font License 1.1. */
@font-face {
  font-family: 'Nunito Sans'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('../fonts/nunito-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('../fonts/nunito-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans'; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url('../fonts/nunito-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans'; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url('../fonts/nunito-sans-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Tokens ---- */
:root {
  /* Montessori materials palette */
  --white:      #FFFFFF;
  --beech:      #F5EDE1;   /* natural beechwood — soft section background */
  --beech-line: #E2D3BD;   /* beechwood grain — dividers on beech */
  --green:      #1E4636;   /* deep forest green — headings, footer (10.6:1 on white, 9.1:1 on beech) */
  --ink:        #284A3D;   /* forest green — body text (9.8:1 on white, 8.5:1 on beech) */
  --ink-soft:   #4A6358;   /* secondary text, still high contrast (6.5:1 / 5.6:1) */
  --line:       #D6E0DA;   /* fine dividers on white */
  --rose:       #C97B84;   /* brand pink — accents only */
  --rose-dk:    #A85F69;   /* brand pink, deeper — buttons (white text passes contrast) */
  --rose-xdk:   #8E4A55;   /* button hover */

  --radius-photo: 12px;    /* soft rounded corners on every photo (not the round testimonial photos) */

  --font: 'Nunito Sans', system-ui, sans-serif;

  --wide: 1240px;          /* page width */
  --measure: 38rem;        /* comfortable reading line (~62 characters) */
  --gutter: clamp(1.5rem, 6vw, 5rem);   /* page margin — shared by every section so edges line up */
  --space: clamp(3.5rem, 7vw, 6rem);    /* space between sections (kept compact so there are no large empty gaps) */
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
figure { margin: 0; }
:focus-visible { outline: 3px solid var(--rose-dk); outline-offset: 3px; border-radius: 2px; }

/* ---- Typography ---- */
h1, h2, h3 { color: var(--green); line-height: 1.12; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.5rem, 5.2vw, 4.25rem); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); font-weight: 800; margin-bottom: 1.5rem; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; margin-bottom: 0.6rem; line-height: 1.25; letter-spacing: -0.01em; }
p { margin-bottom: 1.1rem; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 800; color: var(--green); }
.lead { font-size: clamp(1.2rem, 1.8vw, 1.4rem); line-height: 1.6; color: var(--ink); }
.prose { max-width: var(--measure); }

/* ---- Layout ---- */
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--space) 0; }
.section--beech { background: var(--beech); }
.section--tight-top { padding-top: 0; }
.intro { max-width: 46rem; margin-bottom: clamp(3rem, 6vw, 5rem); }

/* ---- Buttons (sentence case) ---- */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 0.95rem 1.8rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  text-align: center;
}
.btn--primary { background: var(--rose-dk); color: var(--white); }
.btn--primary:hover { background: var(--rose-xdk); }
.btn--secondary { background: transparent; color: var(--rose-dk); border-color: var(--rose-dk); }
.btn--secondary:hover { background: var(--rose-dk); color: var(--white); }
.btn--large { font-size: 1.1rem; padding: 1.1rem 2.2rem; }

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.97);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0.85rem var(--gutter);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--green);
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: auto;
}
.brand img { width: 40px; height: 40px; object-fit: contain; }
.nav-links { display: none; gap: 1.9rem; align-items: center; }
.nav-links a {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.nav-links a:hover { color: var(--green); border-color: var(--beech-line); }
.nav-links a[aria-current="page"] { color: var(--green); border-color: var(--rose); }
.nav-cta { display: none; padding: 0.7rem 1.3rem; font-size: 0.95rem; white-space: nowrap; flex-shrink: 0; }

.hamburger {
  background: none; border: none; cursor: pointer;
  padding: 0.5rem; display: flex; flex-direction: column; gap: 5px;
}
.hamburger span { display: block; width: 24px; height: 2px; background: var(--green); transition: transform 0.25s, opacity 0.25s; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--white);
  padding: 6rem var(--gutter) 2rem;
  flex-direction: column;
  gap: 1.4rem;
  overflow-y: auto;
}
.mobile-nav.open { display: flex; }
.mobile-nav a:not(.btn) {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--green);
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.mobile-nav .btn { margin-top: 0.5rem; }

@media (min-width: 1100px) {
  .hamburger { display: none; }
  .nav-links { display: flex; }
  .nav-cta { display: inline-block; }
}

/* ---- 1. Hero: text beside an arched portrait ---- */
.hero { padding: clamp(2.5rem, 5vw, 4.5rem) 0 var(--space); }
.hero + .section { padding-top: 0; }   /* same white background: one gap, not two */
.hero__grid {
  display: grid;
  gap: 2.5rem;
}
.hero__text { max-width: var(--measure); }
.hero__text h1 { margin-bottom: 1.6rem; font-size: clamp(2.4rem, 4.3vw, 3.6rem); }
.hero__tagline {
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  font-weight: 700;
  color: var(--green);
  line-height: 1.45;
  margin-bottom: 1.6rem !important;
}
.hero__text .btn { margin-top: 1.4rem; }

/* Small screens: photo first, so Beatrice is seen straight away.
   4:5 is close to the photo's own shape, so face, reaching hand and cards all stay in view. */
.hero__photo { order: -1; }
.hero__photo img {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 0;           /* keep the top (face) — never crop from above */
  /* arch, like a classroom window, with softly rounded bottom corners
     (top: half the width; 40% of the 4:5 height is the same distance) */
  border-radius: 50% 50% var(--radius-photo) var(--radius-photo) / 40% 40% var(--radius-photo) var(--radius-photo);
}

/* Wide screens: text and photo side by side as one block —
   the arch is stretched to the exact height of the text, so their tops and bottoms line up */
@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: 7fr 5fr;
    gap: clamp(3rem, 5vw, 5rem);
    align-items: stretch;
  }
  .hero__text { max-width: none; align-self: center; }
  .hero__photo { order: 0; display: flex; }
  .hero__photo img {
    max-width: none; aspect-ratio: auto; height: 100%; min-height: 520px;
    object-position: 60% 0;                          /* centres on Beatrice's face (right of the photo's centre), so it is never cut at any width */
    border-radius: 50% 50% var(--radius-photo) var(--radius-photo) / 24% 24% var(--radius-photo) var(--radius-photo);  /* gentler arch on the tall desktop frame, so it doesn't clip the head */
  }
}

/* ---- 2. Editorial split: heading left, reading column right ---- */
.split { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
  .split { grid-template-columns: 5fr 7fr; gap: clamp(3rem, 7vw, 7rem); align-items: start; }
  .split__head { margin-bottom: 0; }
}

/* ---- Full-bleed photo ---- */
.bleed img {
  width: 100%;
  height: clamp(300px, 52vw, 680px);
  object-fit: cover;
  object-position: center 55%;
  border-radius: var(--radius-photo);
}

/* ---- 3. Shelf: four skills in an ordered grid ---- */
.shelf { display: grid; gap: 0 clamp(2rem, 6vw, 6rem); }
.shelf__item { border-top: 1px solid var(--beech-line); padding: 2rem 0 2.5rem; }
.shelf__item p { max-width: 30rem; }
@media (min-width: 760px) { .shelf { grid-template-columns: 1fr 1fr; } }

/* ---- 4. Home visit + timeline ---- */
.visit { display: grid; gap: 3rem; }
.visit__text .btn { margin-top: 2rem; }
.visit__photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 40%;
  border-radius: var(--radius-photo);
}
@media (min-width: 900px) {
  .visit { grid-template-columns: 7fr 5fr; gap: clamp(3rem, 7vw, 7rem); align-items: start; }
  .visit__photo { margin-top: 0.5rem; position: sticky; top: 7rem; }
}

.timeline { margin: 2.5rem 0 2.75rem; max-width: 40rem; }
.timeline__total {
  position: relative;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 0.9rem;
}
.timeline__total::before {           /* bracket spanning the whole visit */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 0.55rem;
  border: 1.5px solid var(--ink-soft);
  border-bottom: none;
  transform: translateY(0.1rem);
}
.timeline__total span { position: relative; background: var(--white); padding: 0 0.8rem; }
.timeline__bar { display: flex; height: 18px; gap: 4px; }
.timeline__seg--child  { flex: 2; background: var(--rose); border-radius: 999px 0 0 999px; }
.timeline__seg--parent { flex: 1; background: var(--green); border-radius: 0 999px 999px 0; }
.timeline__labels { display: flex; gap: 4px; margin-top: 0.9rem; }
.timeline__label { font-size: 0.98rem; line-height: 1.4; font-weight: 600; margin: 0; }
.timeline__label--child  { flex: 2; padding-right: 1rem; }
.timeline__label--parent { flex: 1; color: var(--green); }

/* ---- 5. Meet Beatrice: portrait runs to the page edge ---- */
.meet { display: grid; padding-bottom: var(--space); }
.meet__photo img {
  width: 100%;
  height: clamp(420px, 70vw, 560px);
  object-fit: cover;
  object-position: center 22%;
  border-radius: var(--radius-photo);
}
.meet__text { padding: 3rem var(--gutter) 0; }
.meet__text .btn { margin-top: 2rem; }
@media (min-width: 900px) {
  .meet { grid-template-columns: 1fr 1fr; align-items: center; padding-top: 0; padding-bottom: 0; } /* photo meets the next section directly — no empty band */
  .meet__photo img { height: min(88vh, 820px); min-height: 620px; }
  .meet__text { padding: 0 var(--gutter) 0 clamp(3rem, 7vw, 7rem); max-width: calc(var(--measure) + 10rem); }
}

/* ---- 6. Testimonials ---- */
.families__title { margin-bottom: clamp(2.5rem, 5vw, 4rem); text-align: center; }
.t-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--rose-dk);
  line-height: 1.3;
  margin-bottom: 0.9rem;
}
.quote__cite { font-size: 1rem; font-weight: 700; color: var(--ink-soft); }

/* Carousel: 3 testimonials visible on desktop, 2 on tablet, 1 on phones.
   Arrows sit at the sides (below the row on phones); the row also scrolls/swipes natively. */
.carousel {
  --per-view: 1;
  --gap: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "track track" "prev next";
  gap: 1.5rem 1rem;
  align-items: center;
}
.carousel__track {
  grid-area: track;
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  transition: height 0.3s ease;     /* height follows the testimonials in view (set by the script) */
  scrollbar-width: none;            /* swipe / arrows instead of a scrollbar */
  align-items: start;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__btn--prev { grid-area: prev; justify-self: end; }
.carousel__btn--next { grid-area: next; justify-self: start; }
.carousel__btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--green);
  background: var(--white);
  color: var(--green);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}
.carousel__btn:hover:not(:disabled) { background: var(--green); color: var(--white); }
.carousel__btn:disabled { opacity: 0.3; cursor: default; }
@media (min-width: 640px) {
  .carousel { --per-view: 2; grid-template-columns: auto 1fr auto; grid-template-areas: "prev track next"; gap: 1.5rem; }
  .carousel__btn--prev, .carousel__btn--next { justify-self: center; align-self: start; margin-top: 2.25rem; }
}
@media (min-width: 960px) { .carousel { --per-view: 3; --gap: 2.75rem; } }

/* Each testimonial: round photo, bold title, quote, name — centred */
.quote {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  scroll-snap-align: start;
  text-align: center;
  font-size: 1.02rem;
  line-height: 1.7;
}
.quote__photo {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1.4rem;
}
.quote blockquote { margin-bottom: 1.2rem; color: var(--ink); }
/* Long testimonials show their first few lines; "Read more" opens the full wording */
.quote blockquote.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}
.quote__more {
  display: inline-block;
  margin: -0.4rem 0 1.2rem;
  padding: 0.2rem 0.4rem;
  background: none;
  border: none;
  font: inherit;
  font-weight: 700;
  color: var(--rose-dk);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.quote__more:hover { color: var(--rose-xdk); }
.quote__more[hidden] { display: none; }
.quote .t-title { font-size: 1.15rem; margin-bottom: 0.6rem; }

/* ---- 7. Prices: two options joined by a path ---- */
.paths { display: grid; gap: 0; align-items: stretch; }
.option {
  border: 1.5px solid var(--line);
  border-radius: 6px;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--white);
}
.option h3 { margin-bottom: 0.3rem; }
.option__price { font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 800; color: var(--green); line-height: 1.1; margin-bottom: 1.2rem; }

/* The path: a dashed rose line from the three-session option to the six-session option,
   with the upgrade sentence sitting on it like a stop along the way */
.path {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem 0;
}
.path::before {                    /* the line (vertical on small screens) */
  content: "";
  position: absolute;
  top: 0; bottom: 10px; left: 50%;
  border-left: 2px dashed var(--rose);
}
.path::after {                     /* arrow head pointing to the six-session option */
  content: "";
  position: absolute;
  bottom: 0; left: calc(50% - 7px);
  border: 8px solid transparent;
  border-top: 11px solid var(--rose);
  border-bottom: 0;
}
.path__text {
  position: relative;
  background: var(--white);
  border: 1.5px solid var(--rose);
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
  font-size: 1.05rem;
  line-height: 1.55;
  text-align: center;
  max-width: 20rem;
  margin: 0;
}
.path__text strong { color: var(--rose-dk); font-size: 1.4rem; line-height: 1; }
@media (min-width: 960px) {
  .paths { grid-template-columns: 1fr minmax(16rem, 0.75fr) 1fr; }
  .path { padding: 0 1.25rem; }
  .path::before { top: 50%; bottom: auto; left: 0; right: 10px; border-left: none; border-top: 2px dashed var(--rose); }
  .path::after { bottom: auto; left: auto; top: calc(50% - 7px); right: 0; border: 8px solid transparent; border-left: 11px solid var(--rose); border-right: 0; }
}
/* Taster: smaller and lighter than the two programmes — beechwood tint, no border, smaller type */
.taster {
  margin-top: 2.5rem;
  background: var(--beech);
  border-radius: 6px;
  padding: 1.6rem clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: 0.6rem 3rem;
  font-size: 1rem;
  line-height: 1.6;
}
.taster h3 { font-size: 1.15rem; margin: 0; }
.taster__body p { margin-bottom: 0.5rem; max-width: 44rem; }
.taster__body p:last-child { margin-bottom: 0; color: var(--ink-soft); }
@media (min-width: 900px) { .taster { grid-template-columns: 16rem 1fr; align-items: baseline; } }

.paths__foot { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; justify-content: space-between; }
.paths__foot p { max-width: 36rem; color: var(--ink-soft); font-size: 1rem; }

/* ---- 8. London ---- */
.london { text-align: center; }
.london h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.london .prose { margin: 0 auto; max-width: 42rem; }
.london .prose p:last-child { color: var(--ink-soft); }

/* ---- 9. Parent coaching: framed aside ---- */
.aside {
  border: 1.5px solid var(--green);
  border-radius: 6px;
  padding: clamp(2rem, 5vw, 4rem);
  display: grid;
  gap: 1rem 4rem;
}
.aside h2 { margin-bottom: 0; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.aside__body p { max-width: 34rem; }
.aside__body .btn { margin-top: 1.6rem; }
@media (min-width: 900px) { .aside { grid-template-columns: 5fr 7fr; align-items: center; } }

/* ---- 10. Closing ---- */
.closing__inner { text-align: center; max-width: 46rem; }
.closing h2 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); }
.closing .lead { margin: 0 auto 2.5rem; }

/* ---- Footer ---- */
.site-footer { background: var(--green); color: #E4ECE7; padding: clamp(4rem, 7vw, 5.5rem) 0 2.5rem; font-size: 1rem; }
.footer__top { display: grid; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.18); }
/* Wide screens: the first link in each column sits on the same baseline as "Ask Miss Favalli" */
@media (min-width: 760px) { .footer__top { grid-template-columns: 2fr 1fr 1fr; gap: 4rem; align-items: baseline; } }

/* Logo stacked above the name so logo, name and text share one left edge.
   The logo is taken out of the text flow so the name is the block's first line (used for baseline alignment). */
.footer__brand { --footer-logo: 56px; position: relative; padding-top: calc(var(--footer-logo) + 0.9rem); }
.brand--footer { display: block; color: var(--white); font-size: 1.3rem; line-height: 1.3; margin: 0 0 1.4rem; }
.brand--footer img {
  position: absolute;
  top: 0;
  left: calc(var(--footer-logo) * -0.05);   /* the bird's artwork starts 5% in from the image edge */
  width: var(--footer-logo);
  height: var(--footer-logo);
}
.footer__brand p { max-width: 26rem; margin-bottom: 0.6rem; }
/* Column headings sit on the same line as "Ask Miss Favalli" (first line of each column) */
.footer__heading { color: var(--white); font-size: 1.3rem; font-weight: 800; line-height: 1.3; margin-bottom: 1.4rem; }
.footer__col li { margin-bottom: 0.7rem; }
.footer__col a, .footer__bottom a { color: var(--white); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); text-underline-offset: 4px; }
.footer__col a:hover, .footer__bottom a:hover { text-decoration-color: var(--rose); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; justify-content: space-between; padding-top: 1.75rem; font-size: 0.95rem; }
.footer__bottom p { margin: 0; }
.footer__legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer__consent { width: 100%; color: #C5D3CB; }

/* =============================================
   Inner pages (Montessori Home Visits, Parent Coaching, About, Contact, legal pages)
   Same design as the homepage; these blocks are used only on those pages.
   ============================================= */

/* Two sections with the same background share one gap, not two */
.section:not(.section--beech) + .section:not(.section--beech),
.section--beech + .section--beech { padding-top: 0; }

.container { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: calc(46rem + 2 * var(--gutter)); }
.text-center { text-align: center; }
.text-mid { color: var(--ink-soft); }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-3 { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.gap-btns { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.section-label, .divider { display: none; }     /* old pink labels and lines are not part of this design */

/* Centred introduction under a centred heading */
.lead-center { max-width: 38rem; margin-left: auto; margin-right: auto; }

/* Links inside text */
.text-link { color: var(--rose-dk); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { color: var(--rose-xdk); }

/* ---- Page hero: heading and introduction on beechwood ---- */
.page-hero { background: var(--beech); padding: clamp(3.5rem, 7vw, 6rem) 0; }
.page-hero .wrap { max-width: calc(52rem + 2 * var(--gutter)); text-align: center; }
.page-hero h1 { margin-bottom: 1.4rem; }
.page-hero .lead { margin: 0 auto; max-width: 38rem; }
.page-hero .btn { margin-top: 2rem; }

/* ---- Photo beside text ---- */
.two-col { display: grid; gap: 2.5rem; align-items: center; }
.two-col__img img { width: 100%; height: clamp(360px, 60vw, 520px); object-fit: cover; border-radius: var(--radius-photo); }
.two-col--top { align-items: start; }
.two-col__img--natural img { height: auto; aspect-ratio: 3 / 4; }
/* Wide photo (Parent Coaching high-five): a 5:4 frame so both people and their touching hands stay fully in view */
.two-col__img--wide img { height: auto; aspect-ratio: 5 / 4; }
/* Portraits of Beatrice (About, Parent Coaching, Contact): when photo and text stack (phones and tablets),
   use a tall 4:5 frame, as on the homepage hero, so her whole head shows with space above the hair */
@media (max-width: 899px) {
  .two-col__img--portrait img { height: auto; aspect-ratio: 4 / 5; max-width: 560px; }
}
/* Show a little higher up the photo (Parent Coaching portrait, where her hair is near the top) */
.two-col__img--high img { object-position: 50% 30%; }
@media (min-width: 900px) {
  .two-col { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 6rem); }
  .two-col--flip .two-col__img { order: 2; }
  .two-col--flip .two-col__text { order: 1; }
}
/* Tagline under the About page heading */
.page-tagline { font-size: clamp(1.2rem, 1.9vw, 1.4rem); font-weight: 700; color: var(--green); line-height: 1.45; margin-bottom: 1.4rem; }

/* ---- Cards (white, fine border — like the homepage price options) ---- */
.card-grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .card-grid { grid-template-columns: 1fr 1fr; } }
.card { background: var(--white); border: 1.5px solid var(--line); border-radius: 6px; padding: clamp(1.75rem, 3vw, 2.5rem); }
.section--beech .card { border-color: var(--beech-line); }
.card--centred { max-width: 44rem; margin: 1.5rem auto 0; }

/* ---- Feature list: ordered grid with fine top lines (like the homepage "shelf") ---- */
.features { display: grid; gap: 0 clamp(2rem, 6vw, 6rem); }
@media (min-width: 760px) { .features { grid-template-columns: 1fr 1fr; } }
.feature { border-top: 1px solid var(--beech-line); padding: 2rem 0 2.5rem; }
.feature p { max-width: 30rem; }

/* ---- Bullet list ---- */
.styled-list { list-style: none; margin: 1rem 0 1.5rem; }
.styled-list li { position: relative; padding: 0.35rem 0 0.35rem 1.6rem; }
.styled-list li::before { content: "—"; position: absolute; left: 0; color: var(--rose-dk); }

/* ---- Testimonials: photo, bold title, quote, name — centred, as on the homepage ---- */
.testimonial-grid { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3rem); }
@media (min-width: 760px) { .testimonial-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .testimonial-grid--three { grid-template-columns: repeat(3, 1fr); } }
.testimonial { text-align: center; font-size: 1.02rem; line-height: 1.7; }
.testimonial__header { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; margin-bottom: 0.6rem; }
.testimonial__avatar img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.testimonial__title { font-size: 1.15rem; font-weight: 800; color: var(--rose-dk); line-height: 1.3; }
.testimonial blockquote { margin-bottom: 1.2rem; color: var(--ink); }
.testimonial cite { font-style: normal; font-size: 1rem; font-weight: 700; color: var(--ink-soft); }

/* ---- Prices ---- */
.pricing-grid { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .pricing-grid { grid-template-columns: 1fr 1fr; } }
.pricing-card { background: var(--white); border: 1.5px solid var(--line); border-radius: 6px; padding: clamp(2rem, 4vw, 3rem); }
.pricing-card h3 { margin-bottom: 0.3rem; }
.pricing-card .price { font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 800; color: var(--green); line-height: 1.1; margin-bottom: 1.2rem; }
.pricing-card ul { list-style: none; margin-bottom: 1.2rem; }
.pricing-card li { position: relative; padding: 0.3rem 0 0.3rem 1.6rem; }
.pricing-card li::before { content: "✓"; position: absolute; left: 0; color: var(--rose-dk); font-weight: 800; }
.pricing-card__note { font-size: 1rem; color: var(--ink-soft); }
/* Smaller, secondary option (single taster visit / single coaching session): beechwood tint, no border */
.taster-note { max-width: 44rem; margin: 1.5rem auto 0; background: var(--beech); border-radius: 6px; padding: 1.6rem clamp(1.5rem, 3vw, 2.25rem); font-size: 1rem; line-height: 1.6; }
.taster-note h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.taster-note p { margin-bottom: 0.5rem; }
.taster-note p:last-child { margin-bottom: 0; }

/* ---- London areas ---- */
.pill-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.pill-list--centre { justify-content: center; }
.pill { background: var(--white); border: 1.5px solid var(--beech-line); border-radius: 999px; padding: 0.35rem 1rem; font-size: 0.98rem; font-weight: 600; color: var(--ink); }

/* ---- FAQ accordion ---- */
.faq { max-width: 46rem; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.3rem 0; background: none; border: none; text-align: left; cursor: pointer;
  font: inherit; font-size: 1.15rem; font-weight: 700; color: var(--green); line-height: 1.4;
}
.faq-q::after { content: "+"; flex-shrink: 0; font-size: 1.6rem; font-weight: 400; line-height: 1; color: var(--rose-dk); transition: transform 0.3s; }
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-a-inner { padding: 0 0 1.4rem; color: var(--ink); }

/* ---- About: key facts ---- */
.stats-row { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 2rem 0; }
.stat__number { font-size: clamp(2.2rem, 3.5vw, 2.8rem); font-weight: 800; color: var(--green); line-height: 1; }
.stat__label { font-size: 1rem; font-weight: 600; color: var(--ink-soft); margin-top: 0.4rem; }

/* ---- Enquiry form (labels in sentence case) ---- */
.form-grid { display: grid; gap: 1.3rem; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group--full { grid-column: 1 / -1; }
.form-group label { font-size: 1rem; font-weight: 700; color: var(--green); }
.form-group .req { color: var(--rose-dk); }
.form-group .optional { font-weight: 400; color: var(--ink-soft); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 0.8rem 1rem; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--beech-line); border-radius: 6px; transition: border-color 0.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: 3px solid rgba(168, 95, 105, 0.25); border-color: var(--rose-dk); }
.form-group textarea { min-height: 140px; resize: vertical; }

/* ---- Legal pages (Privacy Policy, Booking & Cancellation Terms) ---- */
.legal { max-width: calc(46rem + 2 * var(--gutter)); }
.legal h1 { margin-bottom: 0.8rem; }
.legal h2 { font-size: clamp(1.45rem, 2.4vw, 1.8rem); margin: 2.6rem 0 0.8rem; }
.legal__updated { color: var(--ink-soft); margin-bottom: 2rem; }
.section--compact { padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.stats-row { justify-content: center; gap: 1.5rem clamp(2.5rem, 6vw, 5rem); margin: 0; }
.stat { text-align: center; }
.stat .stat__number { margin: 0; }
.two-col__text h1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }

/* Icons above the item headings in "Learning and development, connected", "What we may work on",
   "What our work can offer" and "What guides my work". Decorative (alt=""), in the icons' own rose (#a26370). */
.item-icon { display: block; width: 52px; height: 52px; margin: 0 0 0.85rem; }
@media (max-width: 759px) { .item-icon { width: 44px; height: 44px; margin-bottom: 0.7rem; } }

/* Phones and small tablets (narrower than 768px): every button sits centred on its own line.
   Size and wording unchanged — fit-content keeps each button exactly as wide as before.
   (The contact form's "Send enquiry" already spans the form's full width, so it is left as it is.)
   From 768px up, buttons follow their text: centred in centred sections, left-aligned elsewhere. */
@media (max-width: 767px) {
  main a.btn { display: block; width: fit-content; margin-left: auto; margin-right: auto; }
  .gap-btns { justify-content: center; }
  .paths__foot { flex-direction: column; align-items: stretch; }   /* price note above, button centred below */
}

/* "Read more" in a left-aligned text column (About): same button style as the homepage testimonials
   (.quote__more), lined up with the paragraph edge */
.read-more .read-more__btn { margin: 0.2rem 0 0 -0.4rem; }
.read-more__extra { margin-top: 1.1rem; }