/* ==========================================================================
   Grounded Counselling Co.
   Brand stylesheet — colours and fonts taken from the brand board.
   ========================================================================== */

:root {
  /* Brand palette */
  --cream: #F7F3EF;
  --sand: #E8DCD2;
  --sage: #A8B5A2;
  --olive: #4A5A4D;
  --espresso: #4B3A32;
  --rose: #D6A6A1;

  /* Derived tints */
  --sand-soft: #F1E9E2;
  --sand-line: #E1D4C8;
  --sage-soft: #EDF0EA;
  --rose-soft: #F6EAE7;
  --olive-deep: #3C4A3F;
  /* Accessible text/icon variants of the two lightest brand hues. The fills
     stay exactly on-brand; only the ink on them is darkened. */
  --rose-text: #A55148;
  --sage-text: #5F6E58;
  --sage-icon: #798C70;
  --ink: #43352E;
  --ink-soft: #6F615A;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --accent: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --wrap: 1140px;
  --wrap-narrow: 820px;
  --radius: 14px;
  --shadow: 0 18px 44px rgba(75, 58, 50, .09);
  --shadow-sm: 0 6px 18px rgba(75, 58, 50, .07);
}

*, *::before, *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ focus */
/* Keyboard users need to see where they are. :focus-visible keeps the ring
   off mouse clicks. */
:focus-visible {
  outline: 3px solid var(--olive);
  outline-offset: 3px;
  border-radius: 3px;
}
.site-footer :focus-visible,
.cta-strip :focus-visible,
.band-olive :focus-visible { outline-color: var(--cream); }

/* Skip link: off-canvas until focused, then it drops into view. */
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -110%);
  background: var(--olive);
  color: var(--cream);
  padding: .85rem 1.5rem;
  border-radius: 0 0 10px 10px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .18s ease;
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--cream); }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--olive);
  font-weight: 500;
  line-height: 1.18;
  margin: 0 0 .6em;
  letter-spacing: .002em;
}

h1 { font-size: clamp(2rem, 4.6vw, 3.5rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.28rem; }
h4 { font-size: 1.06rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--olive); text-decoration-color: var(--sand-line); text-underline-offset: 3px; }
a:hover { color: var(--espresso); }

.wrap { width: min(100% - 2.6rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.6rem, var(--wrap-narrow)); margin-inline: auto; }

section { padding: clamp(3.4rem, 7vw, 6rem) 0; }

/* Long legal copy. .wrap-narrow centres everything, which is right for a short
   page of a few hundred words and wrong for a document of a few thousand: the
   terms are read and referred back to, not admired. Left-aligned, with a
   comfortable measure and lists that actually indent. */
.legal-body { text-align: left; max-width: 60ch; margin-inline: auto; }
.legal-body h2 { text-align: left; margin-top: 2.4rem; }
/* Specificity deliberately raised: a later rule strips bullets and indent from
   .wrap-narrow ul below 900px, which suits the short legal pages it was written
   for but loses the structure of a list of obligations. */
.wrap-narrow .legal-body ul { list-style: disc; padding-left: 1.3rem; margin: 0 0 1rem; }
.wrap-narrow .legal-body li { margin-bottom: .4rem; }

/* --------------------------------------------------------------- eyebrow */
.eyebrow {
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rose-text);
  font-weight: 700;
  margin: 0 0 .9rem;
}
.eyebrow--sage { color: var(--sage-text); }
.eyebrow--muted { color: var(--ink-soft); }

/* Botanical sprig divider, used under a page heading. */
.sprig {
  display: block;
  width: 100%;
  max-width: 180px;
  margin: 1.2rem 0 1.4rem;
  color: var(--sage);
}
.sprig--center { margin-inline: auto; }

/* Section divider: two hairlines with a small diamond between them. */
.divider {
  display: block;
  width: 100%;
  max-width: 210px;
  margin: 1.1rem 0 1.5rem;
  color: var(--rose);
}
.divider--center { margin-inline: auto; }

/* Pull-quotes and asides. A serif italic rather than a handwritten face —
   softer to read at length and it sits better with Playfair. */
.script {
  font-family: var(--accent);
  font-style: italic;
  font-size: 1.72rem;
  line-height: 1.4;
  color: var(--olive);
}

.lede { font-size: 1.11rem; color: var(--ink-soft); }
.center { text-align: center; }
.measure { max-width: 62ch; }
.measure-center { max-width: 62ch; margin-inline: auto; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .92rem 2rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

.btn--primary { background: var(--rose); color: var(--espresso); }
.btn--primary:hover { background: #E3BAB5; color: var(--espresso); }

.btn--olive { background: var(--olive); color: var(--cream); }
.btn--olive:hover { background: var(--olive-deep); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.btn-row--center { justify-content: center; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 243, 239, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sand-line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .85rem 0;
}
.site-logo { flex: 0 0 auto; }
.site-logo img { height: 46px; width: auto; }

.nav { margin-left: auto; }
.nav ul {
  display: flex;
  align-items: center;
  gap: 1.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--olive); }
/* The rose underline marks the current page on the text links. It must not
   apply to the Book a Session pill, where it showed as a stray pink bar under
   the rounded button; the pill keeps aria-current for screen readers. */
.nav a[aria-current="page"]:not(.btn) { color: var(--olive); border-bottom-color: var(--rose); }
/* `.nav a` is more specific than `.btn--*`, so restate the button colours here. */
.nav .btn { padding: .68rem 1.3rem; font-size: .7rem; letter-spacing: .11em; }
.nav .btn:hover { transform: none; }
.nav a.btn--olive { color: var(--cream); }
.nav a.btn--olive:hover { color: #fff; background: var(--olive-deep); }

/* Instagram sits beside the Book a Session button: icon only on desktop, and
   icon plus label once the nav becomes a stacked list. */
.nav-social a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--olive);
  letter-spacing: .13em;
}
.nav-social svg { width: 22px; height: 22px; }
.nav-social a:hover { color: var(--espresso); }
@media (min-width: 901px) {
  .nav-social span {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--sand-line);
  border-radius: 8px;
  padding: .5rem .7rem;
  cursor: pointer;
  color: var(--olive);
}

/* ------------------------------------------------------------------ hero */
/* A full-bleed banner sitting directly under the header. The logo is part of
   the photograph, so nothing is overlaid on it. */
/* padding:0 — otherwise the global `section` padding shows as sand-coloured
   bands above and below the photograph. */
/* The whole photograph, at its own 3:2 shape — not cropped to a band. It goes
   edge to edge on a phone and is centred on the page ground once there is room
   to cap its height. padding:0 stops the global `section` padding showing as a
   sand-coloured strip above and below. */
.hero-banner {
  padding: 0;
  background: var(--cream);
  display: flex;
  justify-content: center;
}
.hero-banner img {
  display: block;
  width: 100%;
  /* height:auto is required — the width/height attributes are applied as a
     presentational hint and would otherwise fix the height at 1024px. */
  height: auto;
}
/* Held to 70% of the page width from the point the layout stops being a single
   column, so it reads as a banner rather than filling the screen. Below that it
   stays flush to the edges, directly under the header. The height always follows
   from the photograph's own 3:2 ratio — never stretched or cropped. */
@media (min-width: 900px) {
  .hero-banner img { width: 70%; max-width: 1190px; }
}

.hero-intro { padding: clamp(2.6rem, 6vw, 4.2rem) 0 clamp(3rem, 6vw, 4.4rem); }
.hero-intro h1 { color: var(--espresso); margin-bottom: 0; }
.hero-intro .lede { margin-bottom: 2rem; }

/* Page hero for interior pages: text left, image right, curved base. */
.page-hero { background: var(--sand-soft); padding: clamp(2.8rem, 6vw, 4.6rem) 0 0; }
.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.page-hero__media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 11;
}
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* A portrait photograph needs a portrait frame. */
.page-hero__media--portrait { aspect-ratio: 4 / 5; }
.page-hero__spacer { height: clamp(2.8rem, 6vw, 4.6rem); }

/* Soft curved divider between bands. */
.curve { display: block; width: 100%; height: clamp(38px, 5vw, 74px); }

/* -------------------------------------------------------------- crumbs */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.6rem;
}
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--olive); text-decoration: underline; }
.crumbs > *:not(:last-child)::after {
  content: "/";
  display: inline-block;
  margin: 0 .6rem;
  color: var(--sand-line);
}
.crumbs [aria-current] { color: var(--olive); font-weight: 700; }

/* ----------------------------------------------------------------- bands */
.band-cream { background: var(--cream); }
.band-sand { background: var(--sand-soft); }
.band-sage { background: var(--sage-soft); }
.band-rose { background: var(--rose-soft); }
.band-olive { background: var(--olive); color: var(--sand); }
.band-olive h2, .band-olive h3 { color: var(--cream); }
.band-olive p { color: rgba(247, 243, 239, .88); }

/* ----------------------------------------------------------------- split */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split__media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split--flip .split__media { order: 2; }
/* A portrait photograph of a person needs a portrait frame; the default 4:3
   would crop her head or her feet. */
.split--portrait .split__media { aspect-ratio: 3 / 4; }

/* ------------------------------------------------------- support-area grid */
.area-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.area-card {
  flex: 0 1 172px;
  background: #fff;
  border: 1px solid var(--sand-line);
  border-radius: var(--radius);
  padding: 1.5rem 1rem 1.3rem;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.area-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
  border-color: var(--sage);
  color: var(--ink);
}
/* No disc behind these: the illustrations sit straight on the white card. Every
   mark is rebuilt to the same footprint and the same stroke weight, so they need
   nothing behind them to look like a set. */
.area-card__mark {
  width: 84px;
  height: 84px;
  margin: 0 auto .9rem;
  display: grid;
  place-items: center;
}
/* The illustrations carry their own margin inside the file, so they are set
   larger than the inline line icons to match them optically. */
.area-card__mark svg { width: 34px; height: 34px; color: var(--espresso); }
.area-card__mark img { width: 84px; height: 84px; object-fit: contain; }
/* The place illustrations carry more detail than the service marks -- a jetty,
   a windmill, the Round House -- so they are set at double size on the two
   location rows and the cards widened to hold them. The service cards keep the
   smaller mark. */
.area-grid--places .area-card { flex: 0 1 210px; }
.area-grid--places .area-card__mark,
.area-grid--places .area-card__mark img { width: 168px; height: 168px; }

/* Two to a row on a phone. At a fixed 168px the cards stacked one per row and
   the ten on the hub ran to nearly four screens of scrolling. The mark goes
   fluid here rather than fixed, so it fills whatever half a row gives it --
   about 126px at 375, less at 320 -- instead of overflowing a narrow card. */
@media (max-width: 620px) {
  .area-grid--places .area-card {
    flex: 1 1 calc(50% - .5rem);
    max-width: calc(50% - .5rem);
    padding: 1.1rem .7rem 1rem;
  }
  .area-grid--places .area-card__mark,
  .area-grid--places .area-card__mark img {
    width: 100%;
    height: auto;
    max-width: 168px;
    aspect-ratio: 1 / 1;
  }
}

.area-card span {
  display: block;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--olive);
  line-height: 1.35;
}

/* --------------------------------------------------------- service cards */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.6rem;
}
.service-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--sand-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.service-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; }
.service-card__body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.service-card h2 { font-size: 1.28rem; margin-bottom: .5rem; }
.service-card ul {
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 0;
  font-size: .95rem;
  color: var(--ink-soft);
}
.service-card li { padding-left: 1.15rem; position: relative; }
.service-card li::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--rose);
}
.service-card .btn { margin-top: auto; align-self: flex-start; }

/* ------------------------------------------------------- "how I can help" */
.support-list { display: grid; gap: 0; max-width: 900px; margin-inline: auto; }
.support-item {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--sand-line);
}
.support-item:last-child { border-bottom: 0; }
.support-item__icon {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--rose-soft);
  display: grid;
  place-items: center;
  color: var(--espresso);
}
.support-item__icon svg { width: 30px; height: 30px; }
.support-item h3 { font-family: var(--sans); font-size: 1.02rem; font-weight: 700; color: var(--olive); margin-bottom: .3rem; }
.support-item p { font-size: .97rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- pillars */
/* Centred flex row so an odd count (e.g. the five values) stays balanced
   rather than leaving a gap in the last grid cell. */
.pillars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 1.6rem;
  text-align: center;
}
.pillar { flex: 1 1 196px; max-width: 268px; }
.pillar__icon {
  width: 66px; height: 66px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 1px solid var(--sand-line);
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--olive);
}
.pillar__icon svg { width: 30px; height: 30px; }
.pillar__icon img { width: 64px; height: 64px; object-fit: contain; }
/* The values row uses the same discs as the support tiles rather than the
   white ringed circle the inline SVG icons sit in. */
.pillar__icon:has(img) { width: 84px; height: 84px; border: 0; background: var(--sand-soft); }
.pillar h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: .04em; }
.pillar p { font-size: .95rem; color: var(--ink-soft); }

/* ------------------------------------------------------------------ steps */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.6rem;
  text-align: center;
}
.step__num {
  width: 46px; height: 46px;
  margin: 0 auto .9rem;
  border-radius: 50%;
  background: var(--sage);
  color: var(--espresso);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 1.16rem;
  /* Playfair's default figures are old-style: 3 and 4 carry descenders (they
     reach 141/1000 em below the baseline) while 1 and 2 sit on it, so centring
     the line box left the 4 visibly low in the circle. Lining figures are
     cap-aligned, which brings the spread in their visual centres from 74/1000
     em down to 7/1000. line-height:1 makes the box itself predictable. */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  line-height: 1;
  /* With that done all four digits sat a uniform 0.66px below the circle's
     centre, which is where the font places the baseline in the line box.
     Shrinking the content box from the bottom lifts them by half of this. */
  padding-bottom: .066em;
}
.step h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; margin-bottom: .35rem; }
.step p { font-size: .93rem; color: var(--ink-soft); }

/* --------------------------------------------------------------- pricing */
/* Photo panel on one side, cards on the other. On a phone the photo sits
   full-bleed directly under the header and the cards stack beneath it. */
.pricing-hero { padding: 0; background: var(--sand-soft); }
.pricing-hero__media { position: relative; }
.pricing-hero__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* The frame is a wide gesture — notebook, hands, mug — but the desktop column
     is a narrow 0.44-0.60 ratio, so `cover` crops horizontally there and
     vertically on the tablet band. One offset serves both: 32% keeps the pen and
     notebook in the narrow column, 18% keeps her face in the wide band.
     Phones are the exception — see the max-width: 620px rule below. */
  object-position: 32% 18%;
}
.pricing-hero__panel {
  padding: clamp(2.4rem, 6vw, 4rem) 1.3rem clamp(3rem, 7vw, 4.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.6rem, 4vw, 2.2rem);
}
.pricing-hero__intro { text-align: center; max-width: 34rem; }
.pricing-hero__intro .divider,
.pricing-hero__intro .sprig { margin-inline: auto; }
.pricing-hero__intro h1 { color: var(--espresso); margin-bottom: 0; }
.pricing-hero__intro .lede { margin-top: 1rem; }

.price-cards {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  width: 100%;
  max-width: 34rem;
}
.price-card {
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius);
  padding: 2rem 1.6rem 1.9rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
}
.price-card__badge {
  position: relative;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  color: var(--espresso);
}
/* The inset used to be lopsided to make room for a leaf overlay that sat to the
   left of the disc. The leaf is gone, so the disc is simply centred now. */
.price-card__badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--rose-soft);
}
/* The brand illustrations already contain their own leaf, so they are given the
   full disc rather than the 44px an inline icon gets. */
.price-card__badge img { position: relative; width: 74px; height: 74px; object-fit: contain; }
.price-card__badge svg { position: relative; width: 44px; height: 44px; }
.price-card h2 {
  font-family: var(--sans);
  font-size: .95rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--olive);
  margin-bottom: .25rem;
}
.price-card__meta {
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rose-text);
  margin-bottom: .9rem;
}
.price-card__blurb { font-size: .97rem; color: var(--ink-soft); margin-bottom: 1.3rem; }
.price-card__buy { width: 100%; }
.price-card__buy .divider { max-width: 180px; margin: .2rem auto 1.1rem; }
.price-card__amount {
  font-family: var(--serif);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--olive);
  margin: 0 0 1rem;
}
.price-card__buy .btn { width: 100%; }

.pricing-note {
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  margin: 0;
}

@media (min-width: 901px) {
  /* Photo becomes a full-height column beside the cards. */
  .pricing-hero {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: stretch;
  }
  .pricing-hero__media img { aspect-ratio: auto; min-height: 100%; }
  .pricing-hero__panel {
    padding: clamp(3rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem);
    align-items: stretch;
  }
  .pricing-hero__intro { text-align: left; max-width: none; }
  .pricing-hero__intro .divider,
  .pricing-hero__intro .sprig { margin-inline: 0; }
  .price-cards { max-width: none; }
}

/* The horizontal card needs more room than the two-column hero does: badge,
   copy, price and button side by side only fit once the panel is wide enough.
   Below this the cards stay stacked inside the narrower panel. */
@media (min-width: 1180px) {
  .price-card {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 1.5rem;
    padding: 1.6rem 1.8rem;
  }
  .price-card__badge { margin-bottom: 0; flex: 0 0 auto; }
  .price-card__body { flex: 1 1 auto; }
  .price-card__blurb { margin-bottom: 0; }
  .price-card__buy {
    flex: 0 0 auto;
    width: auto;
    text-align: center;
    padding-left: 1.5rem;
    border-left: 1px solid var(--sand-line);
  }
  .price-card__buy .divider { display: none; }
  .price-card__amount { font-size: 2.9rem; margin-bottom: .8rem; }
  .price-card__buy .btn { width: 100%; padding-inline: 1.5rem; white-space: nowrap; }
}

/* The founding-client offer. Deliberately not a panel — it reads as part of the
   cream band, with the type carrying the emphasis instead of a coloured bubble.
   The price is set larger than the standard card prices so this reads as the
   better deal at a glance. */
.offer { max-width: 46rem; margin-inline: auto; }
.offer__amount {
  font-family: var(--serif);
  font-size: clamp(4rem, 11vw, 5.6rem);
  font-weight: 500;
  color: var(--olive);
  line-height: 1;
  margin: .5rem 0 .4rem;
}
.offer__meta {
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0;
}
.offer h2 { font-size: clamp(1.5rem, 3.4vw, 1.9rem); margin-bottom: .9rem; }
.offer__body { font-size: 1.08rem; }
.offer__body:last-of-type { margin-bottom: 0; }
.offer .divider { margin: 1.5rem auto 1.7rem; }
.offer .btn { margin-top: 1.9rem; }

/* ------------------------------------------------------------------- faq */
.faq { max-width: 800px; margin-inline: auto; }
.faq details {
  border-bottom: 1px solid var(--sand-line);
  padding: .3rem 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.2rem 1.15rem 0;
  position: relative;
  font-family: var(--serif);
  font-size: 1.12rem;
  color: var(--olive);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: .3rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-size: 1.4rem;
  color: var(--rose-text);
  line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details p { padding: 0 1.5rem 1.3rem 0; color: var(--ink-soft); font-size: .98rem; }

/* -------------------------------------------------------------- callouts */
.quote-band {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
  background: var(--sand-soft);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 2.8rem);
}
.quote-band .script { font-size: 1.95rem; }
.quote-band p { color: var(--ink-soft); font-size: .99rem; }

.note {
  border-left: 3px solid var(--rose);
  background: var(--rose-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.3rem 1.5rem;
  font-size: .96rem;
}
.note strong { color: var(--espresso); }

.crisis {
  border: 1px solid #E4C9C5;
  background: #FBF1EF;
  border-radius: var(--radius);
  padding: 1.5rem 1.7rem;
}
.crisis h2 { font-family: var(--sans); font-size: .96rem; font-weight: 700; color: var(--espresso); margin-bottom: .5rem; }
.crisis ul { margin: .6rem 0 0; padding-left: 1.1rem; font-size: .95rem; color: var(--ink-soft); }
.crisis li { margin-bottom: .25rem; }

/* ---------------------------------------------------------- reassurances */
.reassure {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.6rem;
  align-items: start;
}
.reassure__item { display: flex; gap: .85rem; align-items: flex-start; }
.reassure__item svg { width: 30px; height: 30px; flex: 0 0 auto; color: var(--sage-icon); margin-top: .1rem; }
.reassure__item p {
  font-size: .77rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.65;
  color: var(--ink-soft);
  font-weight: 700;
}
.band-olive .reassure__item svg { color: var(--sand); }
.band-olive .reassure__item p { color: rgba(247,243,239,.85); }

/* There are no forms on the site — the contact page is an email address. This
   is the small print under the buttons. */
.form-hint { font-size: .87rem; color: var(--ink-soft); }

/* ------------------------------------------------------- contact page */
/* The hero is a centred box the same width as the homepage banner — 70% of the
   viewport, capped at 1190px — sitting on the cream page. The outer section
   carries the page colour so the sand box can stop short of the edges. */
.contact-hero { padding: 0; background: var(--cream); }
.contact-hero__inner { background: var(--sand-soft); }
/* Shown whole: no object-fit, no aspect-ratio, nothing cropped. height:auto is
   required or the width/height attributes fix the height at 1500px. The
   max-width only bites while the photo is stacked above the copy — a 2:3
   portrait given the full box would otherwise stand 1300px tall on a tablet. */
.contact-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 26rem;
  margin-inline: auto;
}
.contact-hero__panel {
  padding: clamp(2.6rem, 6vw, 4.2rem) 1.3rem clamp(3rem, 7vw, 4.6rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.contact-hero__panel h1 { margin-bottom: 0; }
.contact-hero__panel .divider { margin: 1.3rem auto 1.6rem; }
.contact-hero__panel .btn-row { margin-top: 1.7rem; }
.contact-hero__panel .form-hint { margin: 1.6rem 0 0; max-width: 34rem; }

/* ----------------------------------------------------------- booking page */
/* The same hero as contact, mirrored: photograph on the left, copy on the
   right. Only the column order changes, so everything else is inherited. */
@media (min-width: 1100px) {
  .booking-hero .contact-hero__media { order: 1; }
  .booking-hero .contact-hero__panel { order: 2; }
}

/* Three session types, each a link to its own Google appointment page. This was
   an embedded scheduler until clicking a time in the frame proved to lose the
   time — Google hands the booking to its own site to take payment and drops the
   slot. Nothing here can fix that, so the cards go straight there instead. */
/* Said before anyone clicks through, so an empty-looking calendar on Google is
   never a surprise. The wording lives in BOOKING_FROM in _source/content.py. */
.booking-from {
  display: inline-block;
  margin: 1.4rem 0 0;
  padding: .55rem 1.4rem;
  background: var(--rose-soft);
  border: 1px solid #EBD6D2;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rose-text);
}

.booking-embed { margin-top: clamp(2.2rem, 5vw, 3.2rem); }
.booking-opts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
}

.booking-opt {
  display: flex;
  flex-direction: column;
  background: var(--sand-soft);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius);
  padding: 1.6rem 1.3rem 1.5rem;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .2s ease, background-color .2s ease,
              box-shadow .2s ease, transform .2s ease;
}
a.booking-opt:hover {
  background: #fff;
  border-color: var(--olive);
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
  color: var(--ink);
}
.booking-opt__label {
  font-family: var(--serif);
  font-size: 1.32rem;
  color: var(--olive);
  line-height: 1.2;
}
.booking-opt__meta {
  margin: .35rem 0 .6rem;
  font-size: .74rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rose-text);
}
.booking-opt__blurb { font-size: .94rem; color: var(--ink-soft); }
.booking-opt__go {
  margin-top: auto;
  padding-top: 1.1rem;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive);
}
/* The arrow says "this leaves the page", which the aria-label spells out.
   Written as a CSS escape rather than a literal character so the stylesheet
   stays ASCII and cannot be mangled by an encoding mismatch. */
a.booking-opt .booking-opt__go::after { content: " \2192"; }
.booking-opt--soon { background: var(--rose-soft); border-color: #EBD6D2; }
.booking-opt--soon .booking-opt__go { text-transform: none; letter-spacing: 0; font-weight: 400; }

.contact-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(2rem, 4vw, 2.6rem);
}
.contact-fact { text-align: center; }
.contact-fact__disc {
  width: 58px;
  height: 58px;
  margin: 0 auto .9rem;
  border-radius: 50%;
  background: var(--rose-soft);
  display: grid;
  place-items: center;
}
.contact-fact__disc svg { width: 24px; height: 24px; color: var(--espresso); }
.contact-fact__label {
  font-family: var(--sans);
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--olive);
  margin-bottom: .45rem;
}
.contact-fact p:last-child { font-size: .97rem; color: var(--ink-soft); margin-bottom: 0; }
.contact-fact a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--sand-line); }
.contact-fact a:hover { border-bottom-color: var(--ink-soft); }

.contact-next .btn { margin: 1.8rem 0 1.6rem; }
.contact-next__after { font-size: .92rem; color: var(--ink-soft); margin-bottom: 0; }

/* Two columns only once 70% of the viewport leaves each side a usable measure:
   at 1100px the box is 770px wide, so a column is 385px. Below that the photo
   sits above the copy, still whole and still in the same 70% box. */
@media (min-width: 1100px) {
  .contact-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    width: 70%;
    max-width: 1190px;
    margin-inline: auto;
  }
  .contact-hero__media { order: 2; }
  .contact-hero__media img { max-width: none; }
  .contact-hero__panel {
    order: 1;
    padding: clamp(2rem, 3vw, 3.2rem) clamp(1.6rem, 3vw, 2.8rem);
    align-items: flex-start;
    text-align: left;
    justify-content: center;
  }
  .contact-hero__panel .divider { margin-inline: 0; }
}

/* The box narrows to match the homepage banner at the same breakpoint the
   banner itself uses, whether or not it has gone two-column yet. */
@media (min-width: 900px) and (max-width: 1099px) {
  .contact-hero__inner { width: 70%; max-width: 1190px; margin-inline: auto; }
}

@media (min-width: 860px) {
  /* A vertical rule between each fact, as in the design. */
  .contact-facts { gap: 0; }
  .contact-fact { padding-inline: clamp(1rem, 2.5vw, 2rem); }
  .contact-fact + .contact-fact { border-left: 1px solid var(--sand-line); }
}

/* The contact page used to be a two-column grid with an enquiry form on the
   left. The form is gone, so the page is a single centred column and the
   practical details sit below it in a row of their own. */
.contact-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.4rem, 3vw, 2.2rem);
  margin-top: clamp(2.8rem, 6vw, 4rem);
  padding-top: clamp(2.2rem, 5vw, 3rem);
  border-top: 1px solid var(--sand-line);
}
.contact-email { font-size: 1.2rem; margin: 1.4rem 0 1.6rem; }
.contact-email a { color: var(--olive); text-decoration: none; border-bottom: 1px solid rgba(74, 90, 77, .35); }
.contact-email a:hover { border-bottom-color: var(--olive); }
.contact-detail { display: flex; gap: .85rem; align-items: flex-start; margin-bottom: 0; }
.contact-detail svg { width: 22px; height: 22px; color: var(--rose-text); flex: 0 0 auto; margin-top: .25rem; }
.contact-detail p { font-size: .97rem; }
.contact-detail a { text-decoration: none; }
.contact-detail a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- cta strip */
.cta-strip {
  background: var(--olive) center/cover no-repeat;
  color: var(--cream);
  padding: clamp(2.6rem, 6vw, 4rem) 0;
  position: relative;
  isolation: isolate;
}
.cta-strip::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(74,90,77,.94), rgba(74,90,77,.82));
}
.cta-strip__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  align-items: center;
  justify-content: space-between;
}
.cta-strip h2 { color: var(--cream); margin-bottom: .35rem; }
.cta-strip p { color: rgba(247,243,239,.86); margin: 0; }

/* ---------------------------------------------------------------- footer */
.site-footer {
  background: var(--olive);
  color: rgba(247, 243, 239, .82);
  padding: clamp(3rem, 7vw, 4.5rem) 0 2rem;
  text-align: center;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  max-width: 620px;
}
.footer-logo {
  width: 240px;
  height: auto;
  /* A real white transparent PNG, so no filter is needed — the previous
     brightness(0) invert(1) trick flattened the line weights. */
  opacity: .95;
}
.footer-strapline {
  color: rgba(247, 243, 239, .9);
  font-size: 1.5rem;
  margin: 0;
}
.footer-line {
  margin: 0;
  font-size: .97rem;
  color: rgba(247, 243, 239, .72);
}

/* Inline link rows, separated by a middot rather than by borders. */
.footer-nav, .footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.footer-nav a, .footer-legal a {
  color: rgba(247, 243, 239, .88);
  text-decoration: none;
  padding: .3rem .1rem;
}
.footer-nav a:hover, .footer-legal a:hover { color: #fff; text-decoration: underline; }
.footer-nav a:not(:last-child)::after,
.footer-legal a:not(:last-child)::after {
  content: "·";
  display: inline-block;
  margin: 0 .75rem;
  color: rgba(247, 243, 239, .4);
  text-decoration: none;
}
.footer-nav a {
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
}
.footer-legal a { font-size: .84rem; color: rgba(247, 243, 239, .72); }

.footer-meta {
  margin: 0;
  font-size: .9rem;
  color: rgba(247, 243, 239, .72);
  line-height: 1.9;
}
.footer-copy, .footer-credit {
  margin: 0;
  font-size: .8rem;
  color: rgba(247, 243, 239, .62);
}
.footer-credit { color: rgba(247, 243, 239, .78); }
.footer-credit a { color: rgba(247, 243, 239, .78); text-decoration: none; }
.footer-credit a:hover { color: #fff; text-decoration: underline; }

/* The WA locations row. Same link treatment as the legal row below it, one step
   quieter, and no second hairline — the legal row already closes the column. */
.footer-areas { width: 100%; margin-top: .6rem; }
.footer-areas__label {
  margin: 0 0 .45rem;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(247, 243, 239, .55);
}
.footer-areas__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.footer-areas__links a {
  font-size: .84rem;
  color: rgba(247, 243, 239, .72);
  text-decoration: none;
  padding: .3rem .1rem;
}
.footer-areas__links a:hover { color: #fff; text-decoration: underline; }
.footer-areas__links a:not(:last-child)::after {
  content: "\00b7";
  display: inline-block;
  margin: 0 .75rem;
  color: rgba(247, 243, 239, .4);
  text-decoration: none;
}

/* A hairline above the small print, to close the column off. */
.footer-legal {
  border-top: 1px solid rgba(247, 243, 239, .16);
  padding-top: 1.7rem;
  margin-top: .4rem;
  width: 100%;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 900px) {
  .split, .page-hero__grid, .quote-band, .offer { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
}

@media (max-width: 900px) {
  /* Progressive enhancement: the collapsing menu needs JavaScript, so it is
     only switched on once head.js has set the `js` class. Without JS the nav
     simply stays open as a stacked list and the toggle never appears —
     otherwise the site would be unnavigable on a phone. */
  .js .nav-toggle { display: block; }
  .nav {
    position: static;
    padding: .5rem 0 .4rem;
    width: 100%;
  }
  .js .nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--sand-line);
    padding: .5rem 0 1.1rem;
    display: none;
  }
  .js .nav[data-open="true"] { display: block; }
  .site-header__inner { flex-wrap: wrap; }
  .js .site-header__inner { flex-wrap: nowrap; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; width: min(100% - 2.6rem, var(--wrap)); margin-inline: auto; }
  .nav li { border-bottom: 1px solid var(--sand-line); }
  .nav li:has(.btn) { border-bottom: 0; padding-top: .9rem; }
  .nav li:last-child { border-bottom: 0; }
  .nav-social a { justify-content: center; padding: .85rem 0; }
  .nav a { display: block; padding: .85rem 0; border-bottom: 0; }
  .nav .btn { width: 100%; }
  .site-header__inner { position: relative; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  /* The pricing hero photo is the first thing anyone sees on that page, and
     cropping it to a 3:2 band cut off everything below her shoulders — Tilly
     asked for the whole picture on a phone. Matching the frame to the file's own
     900x1350 leaves `cover` nothing to trim. Tablets keep the band: at 620-900px
     wide a 2:3 photo would run over 900px tall before the copy even starts. */
  .pricing-hero__media img { aspect-ratio: 2 / 3; }
  .support-item { grid-template-columns: 48px minmax(0, 1fr); gap: 1rem; }
  .support-item__icon { width: 48px; height: 48px; }
  .support-item__icon svg { width: 24px; height: 24px; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .cta-strip .btn, .service-card .btn { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------------------------------------------- centred mobile layout */
/* Wherever the layout is a single full-width column — phones and portrait
   tablets alike — ragged-left text next to a centred heading reads as a
   mistake. 900px is where the two-column grids collapse, so they match. */
@media (max-width: 900px) {
  .page-hero__grid > div,
  .page-hero .wrap,
  .wrap-narrow,
  .split > div,
  .service-card__body,
  .quote-band,
  .quote-band > div,
  .contact-detail,
  .crisis,
  .note,
  .offer,
  .offer > div,
  .faq summary,
  .faq details p,
  .form-hint,
  .field label,
  .reassure,
  .reassure__item,
  .cta-strip,
  .cta-strip__inner { text-align: center; }

  /* Dividers and sprigs lose their left anchor. */
  .divider, .sprig { margin-inline: auto; }

  .crumbs, .btn-row { justify-content: center; }

  /* Lists: drop the hanging indent, or centred text sits off-centre. */
  .wrap-narrow ul,
  .crisis ul { list-style: none; padding-left: 0; }
  .service-card ul { padding-left: 0; }
  .service-card li { padding-left: 0; }
  .service-card li::before {
    position: static;
    display: inline-block;
    margin-right: .5rem;
    vertical-align: middle;
  }

  /* Icon above the text rather than beside it. */
  .support-item {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: .9rem;
  }
  .contact-detail, .reassure__item {
    flex-direction: column;
    align-items: center;
    gap: .5rem;
  }

  /* The FAQ's +/- stays pinned right, so keep room for it either side. */
  .faq summary { padding-left: 2.2rem; }

  /* The call-to-action strip is a two-column flex row on desktop. */
  .cta-strip__inner { flex-direction: column; justify-content: center; }
  .service-card .btn { align-self: center; }
  .note { border-left: 0; border-top: 3px solid var(--rose); border-radius: var(--radius); }
}