:root {
  /* Alyssa's palette, exactly as delivered. Don't add to it or alter it
     without asking — every value below came from her original file. */
  --sage: #7C9A7E;
  --sage-light: #EDF2ED;
  --sage-dark: #4A6B4C;
  --clay: #C4846A;
  --clay-light: #F5EDE9;
  --cream: #FAF8F4;
  --warm-white: #FFFDF9;
  --charcoal: #2C2C2A;
  --muted: #6B6B67;
  --border: #E8E4DC;
  /* Not from Alyssa's file — ours, kept because Tyler picked it for the
     callout band. Charcoal is the only type colour that clears AA on it. */
  --salmon: #DD9880;
  /* Added Sep 1 at Tyler's request — a light grey ground for the FAQ block.
     Not from Alyssa's palette. */
  --mist: #EFEFEC;
  /* Radius family. --r-lg is the base large corner: it sets the section
     blocks and the long side of the petal cards. The photography arch is that
     same corner taken to its extreme. */
  /* The wash every colored tile carries: one soft radial of white at low
     alpha, so each tile lifts to a slightly lighter version of its own base
     rather than picking up a second hue. Dark grounds take less. */
  --tile-wash: radial-gradient(62% 52% at 30% 38%, rgba(255,255,255,0.075), transparent 72%);
  /* The rollover, shared by every button: a wide ring grown with box-shadow
     spread over a long travel, so it reads as the button being lit rather
     than as an outline switching on. Each button supplies its own colour —
     its own fill, at low alpha — so nothing shifts hue on hover. */
  /* The tile wash at card scale, in sage rather than white: colour that sits
     in one corner and fades out before it reaches the type. */
  /* The card wash, split into its two corners so each can be grown from its
     own anchor on hover. Same colour and same opacity throughout — only the
     reach changes. */
  --card-wash-tl: radial-gradient(80% 70% at 12% 8%, rgba(124, 154, 126, 0.12), transparent 72%);
  --card-wash-br: radial-gradient(58% 52% at 94% 97%, rgba(124, 154, 126, 0.10), transparent 70%);
  --halo: 0 0 0 13px;
  /* The ring scales with the button: roughly a fifth of its height, so a 34px
     FAQ toggle does not wear the same 13px collar as the 69px hero button. */
  --halo-md: 0 0 0 10px;
  --halo-sm: 0 0 0 7px;
  --halo-ease: 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  /* The footer's light sits behind the wordmark in the upper left, broad and
     soft across the block. */
  --footer-wash: radial-gradient(105% 95% at 24% 26%, rgba(255,255,255,0.34), transparent 82%);
  /* The band gets its own: a wide, shallow horizon rising from below the
     bottom edge, at half that strength. No visible centre across a very wide
     block, and the darker top edge keeps the band from blending into the
     white section above it. */
  --band-wash: radial-gradient(150% 80% at 50% 108%, rgba(255,255,255,0.17), transparent 78%);
  --r-sm: 8px;
  --r-lg: 40px;
  /* The page blocks — every inset tile: sections, the hero's two halves, the
     footer. Kept off --r-lg so the petal cards' long corner stays at 40. */
  --r-block: 80px;
  --r-pill: 999px;
  --font-sans: 'DM Sans', system-ui, sans-serif;
  /* Headlines and body share DM Sans. With one family carrying both, hierarchy
     rests on size, weight, and the negative tracking on the display sizes. */
  --font-headline: var(--font-sans);
  --headline-weight: 300;
  --headline-tracking: -0.015em;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

html.menu-lock, html.menu-lock body { overflow: hidden; }

body {
  font-family: var(--font-sans);
  /* Sections are inset rounded blocks now, so the page needs a ground they
     read against. Cream blocks on a cream page had no visible edge. */
  background: var(--mist);
  color: var(--charcoal);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { text-wrap: balance; }

/* Editorial display scale. One family carries everything, so the editorial
   feel has to come from size, air, and the tracking split: display sizes go
   tight and negative, eyebrows go wide and uppercase. */

:focus-visible {
  outline: 2px solid var(--sage-dark);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%; left: 1rem;
  z-index: 200;
  background: var(--charcoal);
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-size: 0.85rem;
}

.skip-link:focus { top: 0.75rem; }

/* NAV — scoped to the page header. A bare `nav` selector also matched the
   footer's navigation block and gave it the header's white sticky bar. */
body > nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--warm-white);
  border-bottom: 1px solid var(--border);
  padding: 0 2.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  height: 72px;
}

/* The wordmark is outlined Tenor Sans, inlined as SVG so it carries no font
   dependency and no load flash. The two words are classed rather than filled,
   which lets this one block serve the charcoal nav and the all-white footer.
   Sized by cap height: the lockup runs 14.78 wide for every 1 of height. */
.nav-logo {
  display: block;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo .wm { display: block; height: 15px; width: auto; }
/* One colour, not two (Tyler, Sep 20). sage-dark rather than sage: on the
   warm-white bar the lighter green drops to about 2.6:1 and goes chalky at
   15px cap height. */
.nav-logo .wm-a,
.nav-logo .wm-n { fill: var(--sage-dark); }

.nav-links {
  display: flex; align-items: center; gap: 2.25rem;
  list-style: none;
}

.nav-links a {
  /* Matched to the Get Started label beside them — same size, same weight. */
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--charcoal); }

.nav-links a[aria-current="page"] { color: var(--charcoal); }

/* Alyssa's pattern: --sage carries the fill, --sage-dark is the hover. */
/* The open FAQ toggle's treatment, carried to the nav button: no fill, a 2px
   salmon ring, sage type. Sage-dark rather than --sage for the label — at this
   size the lighter sage lands near 2.6:1 on cream, where a glyph can pass and
   a word cannot. Padding comes in 2px to absorb the new border, so the pill
   keeps its old height. */
.nav-cta {
  background: transparent !important;
  color: var(--sage-dark) !important;
  /* A step down from the 0.85rem links beside it — the ring already gives it
     presence, so the label does not need to match them in size. !important
     because .nav-links a outranks .nav-cta on specificity, which is why every
     other property in this block carries it too. */
  font-size: 0.75rem !important;
  padding: calc(0.75rem - 2px) calc(1.4rem - 2px);
  border: 2px solid var(--salmon);
  border-radius: var(--r-pill);
  font-weight: 700 !important;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s,
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Hover fills rather than just deepening the ring — the same flip the service
   card buttons make, so both hollow buttons on the page behave alike. Sage-dark
   carries white at 6:1, and the ring goes with it so the shape holds its size. */
.nav-cta:hover {
  background: var(--sage-dark) !important;
  border-color: var(--sage-dark);
  color: #fff !important;
  box-shadow: var(--halo-sm) rgba(124, 154, 126, 0.18);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--charcoal);
  -webkit-tap-highlight-color: transparent;
}

/* Three bars that fold into an X: the outer two rotate into the cross, the
   middle one fades out from the centre. */
.nav-burger { display: block; position: relative; width: 22px; height: 16px; }

.nav-burger i {
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.nav-burger i:nth-child(1) { top: 0; }
.nav-burger i:nth-child(2) { top: 7.25px; }
.nav-burger i:nth-child(3) { top: 14.5px; }

nav.menu-open .nav-burger i:nth-child(1) { transform: translateY(7.25px) rotate(45deg); }
nav.menu-open .nav-burger i:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
nav.menu-open .nav-burger i:nth-child(3) { transform: translateY(-7.25px) rotate(-45deg); }

.nav-toggle:focus-visible { outline: 2px solid var(--sage-dark); outline-offset: 4px; border-radius: 4px; }

@media (max-width: 1180px) {
  .nav-links { gap: 1.4rem; }
  .nav-links a { letter-spacing: 0.05em; }
}

/* 980, not 880: the wordmark at 1:1 runs 235px, and below about 980 the bar
   can no longer hold it alongside five links and the consult button -- the
   CTA was pushing off the right edge in the 880-960 band. Keep this value
   in step with the resize guard in site.js. */
@media (max-width: 980px) {
  .nav-toggle { display: block; }

  /* Full-height panel under the bar. It stays in the layout (no display
     toggle) so the open and close both animate; `visibility` keeps it out of
     the tab order and the accessibility tree while closed. */
  .nav-links {
    position: fixed;
    top: 72px; left: 0; right: 0;
    height: calc(100vh - 72px);
    height: calc(100dvh - 72px);
    background: var(--warm-white);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 2.25rem 2rem calc(2rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.38s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s;
  }

  nav.menu-open .nav-links {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.38s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
  }

  /* Rows rise in one after another once the panel itself is there. */
  .nav-links li {
    width: 100%;
    border-top: 1px solid var(--border);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .nav-links li:first-child { border-top: 0; }
  nav.menu-open .nav-links li { opacity: 1; transform: none; }
  nav.menu-open .nav-links li:nth-child(1) { transition-delay: 0.10s; }
  nav.menu-open .nav-links li:nth-child(2) { transition-delay: 0.16s; }
  nav.menu-open .nav-links li:nth-child(3) { transition-delay: 0.22s; }
  nav.menu-open .nav-links li:nth-child(4) { transition-delay: 0.28s; }
  nav.menu-open .nav-links li:nth-child(5) { transition-delay: 0.34s; }
  nav.menu-open .nav-links li:nth-child(6) { transition-delay: 0.40s; }

  .nav-links a {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.35rem 0;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    color: var(--charcoal);
    transition: color 0.2s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* A clay rule grows in front of the label on press. */
  .nav-links a::before {
    content: '';
    width: 0;
    height: 1px;
    background: var(--clay);
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .nav-links a:active::before,
  .nav-links a:focus-visible::before,
  .nav-links a[aria-current="page"]::before { width: 22px; }
  .nav-links a:active { transform: translateX(4px); }

  /* The consult button sits on the bottom edge; the slack falls between it
     and the last link. */
  .nav-links li:last-child { border: 0; margin-top: auto; padding-top: 2rem; }

  .nav-links .nav-cta {
    justify-content: center;
    padding: 1.1rem 1.6rem;
    /* !important to clear the base .nav-cta size, which carries one to beat
       .nav-links a — without it this rule never applied and the label sat at
       the desktop 12px inside a full-width button. */
    font-size: 1rem !important;
    transition: background 0.2s, transform 0.2s ease !important;
  }

  .nav-links .nav-cta::before { display: none; }
  .nav-links .nav-cta:active { transform: scale(0.98); }
}

/* HERO */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 88vh;
  padding: 0;
  margin-top: 1.25rem;
  background: var(--warm-white);
  /* Clips the photo to the block's corners rather than rounding it separately. */
  overflow: hidden;
}

.hero-content {
  display: flex; flex-direction: column; justify-content: center;
  padding: 7rem 5rem 7rem 6rem;
  background: var(--warm-white);
}

.hero-heading {
  font-family: var(--font-headline);
  font-size: clamp(3.2rem, 4.6vw, 5rem);
  font-weight: var(--headline-weight);
  letter-spacing: -0.028em;
  line-height: 1.04;
  color: var(--charcoal);
  margin-bottom: 2rem;
}

.hero-heading mark, .section-heading mark, .consult-heading mark { padding: 0 0.04em; }

.hero-sub {
  font-size: 1.25rem;
  color: var(--muted);
  max-width: 100%;
  margin-bottom: 2.75rem;
  line-height: 1.7;
}

.hero-ctas { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

/* The booking buttons are the page's one conversion moment, so they carry
   more weight than a flat pill: a resting shadow to lift them off the cream,
   and an arrow that travels on hover. The arrow is a ::after glyph rather than
   markup, so every button picks it up without touching the HTML, and it
   inherits colour on the dark and white variants alike. */
.btn-primary,
.btn-book {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1.05rem 2.5rem;
  transition: background 0.22s ease,
              color 0.22s ease,
              transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.22s ease;
}

.btn-primary::after,
.btn-book::after {
  content: '\2192';
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-primary:hover::after,
.btn-book:hover::after { transform: translateX(5px); }

/* Press returns it to the page — without this the lift sticks through the tap
   on touch, where :hover latches. */
.btn-primary:active,
.btn-book:active { transform: translateY(0); box-shadow: none; }

.btn-primary {
  background: var(--sage);
  color: white;
  box-shadow: 0 1px 2px rgba(44, 44, 42, 0.10);
  /* Same list as the shared rule, with box-shadow slowed to 0.45s — the halo
     below needs the longer travel to read as light rather than as a border. */
  transition: background 0.22s ease,
              color 0.22s ease,
              transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow var(--halo-ease);
}

/* The hero CTA is the page's loudest button — a size up from the standard
   .btn-primary used further down the page. */
.hero-ctas .btn-primary {
  font-size: 1rem;
  padding: 1.3rem 3rem;
}

/* Stays sage on rollover; the only change is the halo blooming out around it.
   A salmon flip was explored on Sep 23 and not adopted. The resting contact
   shadow stays underneath so the pill doesn't float. */
.btn-primary:hover {
  box-shadow: 0 1px 2px rgba(44, 44, 42, 0.10),
              var(--halo) rgba(124, 154, 126, 0.10);
}

/* Client photography — Alyssa's professional headshot (AlyssaHeadshots9318,
   her pick for the first photo, Sep 16). Dark studio ground. */
.hero-image {
  background-color: #3A3B3D;
  background-image: url('images/hero.jpg');
  background-image: image-set(url('images/hero.webp') type('image/webp'), url('images/hero.jpg') type('image/jpeg'));
  background-position: 50% 12%;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.hero-image::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(250,248,244,0.08), transparent);
}

/* SECTION SHARED */
/* Anchor jumps clear the 72px sticky nav plus a little air, so a link lands
   on the top edge of the block rather than tucking it under the bar. */
section[id] { scroll-margin-top: 90px; }

section {
  padding: 7.5rem 6rem;
  border-radius: var(--r-block);
  margin: 0 2rem 1.25rem;
}

/* Sized with the page's other labels — the card buttons, the quote
   attribution, the story link — rather than a size of its own. */
.section-eyebrow {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-dark);
  margin-bottom: 1.25rem;
}

.section-heading {
  font-family: var(--font-headline);
  font-size: clamp(2.5rem, 3.4vw, 3.5rem);
  font-weight: var(--headline-weight);
  letter-spacing: -0.022em;
  line-height: 1.08;
  color: var(--charcoal);
  max-width: 15ch;
}

/* Long-form headings opt out of the 15ch display measure. */
.who-left .section-heading,
.approach-section .section-heading,
.meet-text .section-heading { max-width: 20ch; }

/* The About page opens on this block, so it needs the gap the hero gives the
   home page — otherwise the first card butts against the nav. The top padding
   runs at half a section's usual, so the arch sits closer to the card's edge;
   it is halved again at each breakpoint below. */
.about-section { margin-top: 1.25rem; padding-top: 3.75rem; }

/* WHO I HELP */
.who-section {
  background: var(--warm-white);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: start;
}

.who-tagline {
  font-size: 1.2rem;
  color: var(--muted);
  max-width: 100%;
  margin-top: 1.5rem;
  line-height: 1.8;
}

.who-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Same container as the service cards: rounded square, no border, held by
   tone against the section's warm white. Padding stays tighter — these are
   four cards in a 2x2, not three full-height columns. */
/* Same treatment as the pricing cards: the lighter fill and the deep shadow
   are the resting state, the two-corner wash is always on, and the only
   rollover is a sage hairline drawn inside the edge. */
.who-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--warm-white);
  box-shadow: 0 22px 44px -26px rgba(44, 44, 42, 0.45);
  border: none;
  padding: 1.75rem 1.5rem;
  border-radius: 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
}

.who-card:hover {
  transform: scale(1.015);
  box-shadow: 0 22px 44px -26px rgba(44, 44, 42, 0.45),
              inset 0 0 0 1px rgba(124, 154, 126, 0.17);
}

.who-cards:hover .who-card:not(:hover) { opacity: 0.72; }

/* Alyssa's drawn symptom icons (Icons_Symptoms.ai, Sep 23). Each export
   carries its own blob ground, so the arch tile that used to sit behind the
   old line set is gone — the icon is the tile now. */
.who-card-icon {
  display: block;
  width: 88px;
  height: 88px;
  margin-bottom: 1rem;
}


.who-card h3 {
  font-family: var(--font-headline);
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.who-card p { font-size: 1.05rem; color: var(--muted); line-height: 1.7; }

/* APPROACH */
.approach-section {
  background-color: var(--charcoal);
  background-image: var(--tile-wash);
  color: white;
}

.approach-section .section-eyebrow { color: var(--sage); }
.approach-section .section-heading { color: white; max-width: 22ch; }
.approach-section .section-heading em { color: var(--sage); }

.approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.25rem;
  margin-top: 5rem;
}

.approach-item { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 2rem; }

.approach-key {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
  line-height: 1;
  margin-bottom: 1.5rem;
}

.approach-item h3 {
  font-family: var(--font-headline);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: white;
  margin-bottom: 1rem;
}

.approach-item p { font-size: 1.125rem; color: rgba(255,255,255,0.72); line-height: 1.7; }

/* MEET ALYSSA (homepage band) — centred single column. Editorial framing:
   portrait, then a hairline, then the display line at its full size, with the
   lede kept to a short measure so the centring stays readable. */
.meet-band {
  background: var(--warm-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3rem;
  padding-top: 9rem;
  padding-bottom: 9rem;
}

/* Portrait slot — client photography (IMG_5342). Arched: the large corner
   taken to its extreme across the top. */
.meet-portrait {
  width: 300px;
  max-width: 70vw;
  aspect-ratio: 3/4;
  background-color: #C9BFB5;
  background-image: url('images/alyssa-portrait.jpg');
  background-image: image-set(url('images/alyssa-portrait.webp') type('image/webp'), url('images/alyssa-portrait.jpg') type('image/jpeg'));
  background-position: 50% 22%;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 150px 150px var(--r-sm) var(--r-sm);
}

.meet-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 780px;
}

/* Hairline above the eyebrow — the one editorial rule in the band. */
.meet-text .section-eyebrow {
  position: relative;
  padding-top: 2.25rem;
  margin-bottom: 1.5rem;
}

.meet-text .section-eyebrow::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 1px;
  background: var(--clay);
}

.meet-text .section-heading { max-width: 18ch; }

.meet-lede {
  font-size: 1.2rem;
  color: var(--muted);
  line-height: 1.8;
  margin-top: 1.75rem;
  max-width: 60ch;
}

.meet-link {
  display: inline-block;
  margin-top: 2.25rem;
  /* Sized with the card buttons and the quote attribution — one label size
     across the page. */
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--sage-dark);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}

.meet-link:hover { color: var(--charcoal); border-color: var(--charcoal); }

/* THE CLAY MARK — the testimonial highlight, carried through the page: one
   phrase per section. It draws in when its line arrives (.is-lit, set in
   site.js); without JS it is simply already drawn. */
mark {
  color: inherit;
  padding: 0 0.06em;
  background: linear-gradient(transparent 64%, rgba(196, 132, 106, 0.32) 64%) no-repeat;
  background-size: 100% 100%;
  transition: background-size 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Charcoal grounds need the heavier band to read. */
.approach-section mark,
.testimonials-section mark { background-image: linear-gradient(transparent 64%, rgba(196, 132, 106, 0.45) 64%); }


.js mark { background-size: 0% 100%; }
.js .is-lit mark { background-size: 100% 100%; }

/* TESTIMONIALS — spotlight. One client at a time on charcoal: the pull line
   large and light, the key phrase underlined in clay (draws in when its slide
   comes up), full quote beneath. Names double as progress tabs; slide count
   bottom right. Quotes verbatim from Alyssa (Sep 16). */
.testimonials-section {
  background-color: var(--charcoal);
  background-image: var(--tile-wash);
  color: var(--cream);
  position: relative;
  overflow: hidden;
  display: grid;
  /* Two rows since the eyebrow came out: the stage takes the slack and the
     name tabs stay pinned to the bottom. Left at three, the stage would drop
     to auto and the tabs would absorb the height instead. */
  grid-template-rows: 1fr auto;
  min-height: 680px;
}

.t-stage { position: relative; display: grid; align-items: center; margin: 0 0 3.5rem; }

.t-slide {
  grid-area: 1 / 1;
  max-width: 980px;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition: opacity 1.2s ease, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1), filter 1.2s ease;
}

/* [hidden] slides stay in the grid (so the stage keeps the tallest quote's
   height) but are invisible and out of the accessibility tree. */
.t-slide[hidden] { display: block; visibility: hidden; }
.t-slide.is-on { opacity: 1; transform: none; filter: none; }

/* With the eyebrow gone the quote marks carry the "this is a testimonial"
   signal on their own. The opening mark hangs into the margin: a negative
   first-line indent equal to its own advance puts the glyph outside the text
   block and still lands the first word flush with every line under it. */
.t-pull {
  font-family: var(--font-headline);
  font-weight: var(--headline-weight);
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  max-width: 22ch;
  text-indent: -0.313em;   /* measured advance of the opening glyph in DM Sans, letter-spacing included */
}

.t-pull::before { content: '\201C'; }
.t-pull::after  { content: '\201D'; }

.js .t-pull mark { transition-delay: 0.5s; }
.js .t-slide .t-pull mark { background-size: 0% 100%; }
.js .t-slide.is-on .t-pull mark { background-size: 100% 100%; }

.t-full {
  margin-top: 2rem;
  max-width: 62ch;
  color: rgba(250, 248, 244, 0.66);
  font-size: 1.05rem;
  line-height: 1.8;
}

.t-tabs { position: relative; display: grid; grid-template-columns: 1fr; }

/* Only the speaking client is named; the other two are out of the way (and
   out of the accessibility tree) until their quote comes up. */
.t-tab:not(.is-on) { display: none; }

.t-tab {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding-top: 1.25rem;
  position: relative;
  opacity: 0.5;
  transition: opacity 0.4s;
}

.t-tab.is-on { opacity: 1; }
.t-tab:focus-visible { outline: 2px solid var(--sage); outline-offset: 4px; }

.t-tab::before,
.t-tab::after { content: ''; position: absolute; top: 0; left: 0; height: 1px; }
.t-tab::before { right: 0; background: rgba(255, 255, 255, 0.18); }
.t-tab::after { width: 0; background: var(--clay); }
.t-tab.is-on::after { animation: t-progress 9s linear forwards; }
.testimonials-section.is-paused .t-tab.is-on::after { animation-play-state: paused; }

@keyframes t-progress { to { width: 100%; } }

.t-name { display: block; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }

/* The count moves off the progress rule and in between the arrows, so the
   three read as one control group. */
.t-nav {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.t-count {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: rgba(250, 248, 244, 0.5);
  font-variant-numeric: tabular-nums;
}

/* Deliberately quiet: a 30px hairline circle that sits back until you reach
   for it. The section is a quote first — the controls should be findable,
   not loud. */
.t-arrow {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  background: none;
  color: rgba(250, 248, 244, 0.62);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, box-shadow var(--halo-ease);
}

/* The halo again, at the smallest size on the page — 5px for a 30px target. */
.t-arrow:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.14);
}

.t-arrow:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }

/* ABOUT */
.about-section {
  background: var(--cream);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 6rem;
  align-items: center;
}

.about-image-wrap { position: relative; }

/* Portrait slot — client photography (IMG_5336) */
.about-image {
  width: 100%;
  aspect-ratio: 3/4;
  background-color: #C9BFB5;
  background-image: url('images/alyssa-about.jpg');
  background-image: image-set(url('images/alyssa-about.webp') type('image/webp'), url('images/alyssa-about.jpg') type('image/jpeg'));
  background-position: 50% 25%;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 48% 48% var(--r-sm) var(--r-sm) / 36% 36% var(--r-sm) var(--r-sm);
  /* The credential hangs off this box, so the photo is its reference — not
     the wider column the photo sits in. */
  position: relative;
}

/* The credential runs around a circle rather than sitting in a pill: set in
   salmon, no fill behind it, so it reads as a stamp on the photograph. Centred
   on the photo's bottom-right corner, so a quarter of the ring sits on the
   image. Sized as a share of the photo's own width, floored and capped so it
   never goes illegible or overbearing; the translate is what centres it, since
   a percentage offset would resolve against height on one axis and width on
   the other. */
.about-credential {
  position: absolute;
  bottom: 0;
  right: 0;
  width: clamp(104px, 32%, 176px);
  aspect-ratio: 1;
  /* The offset and the turn have to live in one transform, in this order: a
     separate `rotate` property is applied about the element's untranslated
     centre, which swings the badge around the corner instead of turning it on
     the spot. Listing translate first puts the centre on the corner, and the
     rotate that follows happens about that moved centre. */
  --tx: 50%;
  --ty: 50%;
  transform: translate(var(--tx), var(--ty)) rotate(0deg);
  animation: cred-turn 40s linear infinite;
}

.about-credential svg { display: block; width: 100%; height: 100%; }

@keyframes cred-turn {
  to { transform: translate(var(--tx), var(--ty)) rotate(360deg); }
}

.about-credential text {
  fill: var(--salmon);
  font-family: var(--font-sans);
  /* SVG user units: the viewBox scales with the container, so the type keeps
     its fit around the ring at any badge size. */
  font-size: 10.5px;
  font-weight: 500;
  /* Tracked so the string fills the ring: at 0.12em it ran 296 units on a 308
     unit path, leaving a gap where the bullet met the C. */
  letter-spacing: 0.148em;
  text-transform: uppercase;
}


.about-text { padding-bottom: 2rem; }
.about-text .section-heading { max-width: 100%; }

.about-text p {
  font-size: 1.2rem;
  color: var(--muted);
  line-height: 1.85;
  margin-top: 1.5rem;
  max-width: 100%;
}

.about-text p strong { color: var(--charcoal); font-weight: 500; }

/* .about-text p outranks .section-eyebrow, which was giving this one eyebrow
   body-copy size and colour. Put it back on the shared label spec. */
.about-text p.section-eyebrow {
  font-size: 0.8rem;
  color: var(--sage-dark);
  line-height: 1.6;
  margin-top: 0;
}

.about-cta { margin-top: 2rem; }

/* PHILOSOPHY (about page) */
.philosophy-section {
  background: var(--warm-white);
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 6rem;
  align-items: start;
}

.philosophy-section .section-heading { max-width: 100%; }

.philosophy-text p {
  font-size: 1.2rem;
  color: var(--muted);
  line-height: 1.85;
  margin-bottom: 1.5rem;
  max-width: 100%;
}

.philosophy-text p:last-child { margin-bottom: 0; }

.philosophy-text p strong { color: var(--charcoal); font-weight: 500; }

/* SERVICES */
.services-section { background: var(--warm-white); }

.services-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 4rem;
  gap: 2rem;
}

.services-intro p {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 440px;
  line-height: 1.75;
  align-self: flex-end;
}

.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

/* All three cards read the same weight — the "Most Popular" eyebrow does the
   pointing, not a border. */
.service-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* The old hover is now the resting state: the lighter fill and the deep
     soft shadow are always on. The lift went with them — a permanent 6px
     offset moves every card equally and so reads as nothing. */
  background-color: var(--warm-white);
  box-shadow: 0 22px 44px -26px rgba(44, 44, 42, 0.45);
  /* Rounded squares: one radius on all four corners, no border. With the
     eyebrow and the price gone the card is down to a heading, a line of copy
     and a button, so the shape stays out of the way. */
  border: none;
  padding: 2.75rem 2rem 2.75rem;
  border-radius: 24px;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* The card's only rollover: a sage hairline drawn inside its own edge. Inset
   rather than a border, so the card does not resize and the corners stay
   exactly as they are. */
/* Each corner's wash is its own layer, anchored to the corner it sits in, so
   hovering grows it inward toward the middle of the card rather than fading
   anything in — the opacity never changes, only the reach. z-index -1 keeps
   them behind the card's content but above its background; the card isolates
   and clips, so the growth stays inside the corners. */
.service-card::before,
.service-card::after,
.who-card::before,
.who-card::after {
  content: '';
  position: absolute;
  /* A pixel proud of the card on every side, and square-cornered: the card's
     own overflow does the rounding. Matching the card's radius here left a
     hairline of untinted background along the clipped corners — the white
     stroke that was showing in the corner. */
  inset: -1px;
  z-index: -1;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-card::before,
.who-card::before {
  background-image: var(--card-wash-tl);
  transform-origin: 0 0;
}

.service-card::after,
.who-card::after {
  background-image: var(--card-wash-br);
  transform-origin: 100% 100%;
}

.service-card:hover::before,
.service-card:hover::after,
.service-card:focus-within::before,
.service-card:focus-within::after,
.who-card:hover::before,
.who-card:hover::after { transform: scale(1.32); }

.service-card:hover,
.service-card:focus-within {
  transform: scale(1.015);
  box-shadow: 0 22px 44px -26px rgba(44, 44, 42, 0.45),
              inset 0 0 0 1px rgba(124, 154, 126, 0.17);
}

.service-tag {
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-dark);
  margin-bottom: 1.5rem;
}

.service-card h3 {
  font-family: var(--font-headline);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.service-card p { font-size: 1.05rem; color: var(--muted); line-height: 1.75; margin-bottom: 2rem; }

/* Push the price block down so all three cards share a baseline. */
.service-card > p:not(.service-tag) { flex: 1 0 auto; }

.service-price {
  font-family: var(--font-headline);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--charcoal);
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  transition: border-color 0.3s ease;
}

.service-card:hover .service-price,
.service-card:focus-within .service-price { border-top-color: #D8D2C6; }

.service-note {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--muted);
}

/* Hollow button. The underline link was fine when the price block sat above
   it and gave the card a base; with both gone the card needs a real target at
   the bottom. align-self keeps it to its own width instead of spanning the
   column. */
.service-cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2rem;
  padding: 0.85rem 1.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage-dark);
  text-decoration: none;
  border: 1.5px solid var(--salmon);
  border-radius: var(--r-pill);
  background: transparent;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease,
              box-shadow var(--halo-ease);
}

.cta-arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-cta:hover {
  background: var(--sage);
  border-color: var(--sage);
  color: #fff;
  box-shadow: var(--halo-md) rgba(124, 154, 126, 0.16);
}

.service-card:hover .cta-arrow,
.service-card:focus-within .cta-arrow { transform: translateX(5px); }

.services-grid:hover .service-card:not(:hover) { opacity: 0.72; }
.services-grid .service-card { transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, opacity 0.3s ease; }

/* CONTACT CTA (lives in the footer) — heading / intro / form styles */
.consult-heading {
  font-family: var(--font-headline);
  font-size: clamp(2.6rem, 3.4vw, 3.5rem);
  font-weight: var(--headline-weight);
  letter-spacing: -0.022em;
  line-height: 1.08;
  color: white;
  max-width: 640px;
}

.consult-heading em { font-style: normal; color: rgba(255,255,255,0.85); }

.consult-intro {
  font-size: 1.125rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.8;
  margin-top: 1.5rem;
  max-width: 520px;
}

.footer-field { display: flex; flex-direction: column; gap: 0.5rem; }

.footer-field label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}

.footer-form input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.8);
  border-radius: 0;
  padding: 0.5rem 0;
  color: white;
  font-family: var(--font-sans);
  font-size: 1.1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}

/* Second rule via box-shadow so focus doesn't shift the baseline by 1px. */
.footer-form input:hover { border-bottom-color: rgba(255,255,255,0.8); }
.footer-form input:focus {
  border-bottom-color: #fff;
  box-shadow: 0 1px 0 0 #fff;
}

.footer-form button {
  background: white;
  color: var(--sage-dark);
  border: none;
  padding: 0.95rem 2.2rem;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s, box-shadow var(--halo-ease);
  white-space: nowrap;
}

/* The same halo as every other button, in this one's own white — it replaces
   the opacity dip, which was the odd one out. */
.footer-form button:hover { box-shadow: var(--halo-md) rgba(255, 255, 255, 0.20); }
.footer-form button:disabled { opacity: 0.55; cursor: default; }

.form-status { font-size: 0.95rem; min-height: 1.2em; margin-top: 0.25rem; }
.form-status.ok { color: #D6ECD7; }
.form-status.err { color: #F1CDBF; }

.form-status a { color: inherit; }

/* CTA ROW (salmon band — below Work With Me on home, above footer on About).
   Deliberately tall: it is the page's one full-width pause. Salmon is light,
   so the type and the button both go charcoal (white would land at ~2.3:1). */
.cta-row {
  background-color: var(--salmon);
  background-image: var(--band-wash);
  color: var(--charcoal);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4rem;
  padding: 11rem 6rem;
}
.cta-row-text { max-width: 760px; }
.cta-row .consult-heading {
  font-size: clamp(2.8rem, 4.2vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: 100%;
  color: var(--charcoal);
}
.cta-row .consult-heading em { color: var(--sage-dark); }
.cta-row .consult-intro { margin-top: 1.5rem; font-size: 1.2rem; max-width: 100%; color: var(--charcoal); }

.cta-row .btn-book { font-size: 0.9rem; padding: 1.15rem 2.8rem; }

.cta-row .btn-book {
  margin-top: 0;
  flex-shrink: 0;
  background: var(--charcoal);
  color: white;
}
.cta-row .btn-book:hover {
  background: var(--charcoal);
  box-shadow: var(--halo-md) rgba(44, 44, 42, 0.16);
}

/* FAQ */
/* Kept a ground distinct from the other light blocks; --mist became the page,
   so this is cream rather than grey. */
.faq-section {
  background: var(--cream);
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 6rem;
  align-items: start;
}

.faq-left .section-heading { max-width: 100%; }

.faq-left p { font-size: 1.15rem; color: var(--muted); line-height: 1.8; margin-top: 1.5rem; }

.faq-list { display: flex; flex-direction: column; }

.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }

.faq-question { margin: 0; }

.faq-question button {
  width: 100%;
  min-height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-headline);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--charcoal);
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  /* A little air on the right so the toggle sits inside the rule rather than
     flush with its end. */
  padding: 1.75rem 0.5rem 1.75rem 0;
}

.faq-toggle {
  /* Matched to the footer's Submit button, so the two round things on the
     page share a height. */
  width: 49px; height: 49px;
  border: 1px solid var(--salmon);
  background: var(--salmon);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 1.4rem;
  line-height: 1;
  font-family: var(--font-sans);
  color: #fff;
  transition: background 0.2s, border-color 0.2s, color 0.2s,
              box-shadow var(--halo-ease);
}

/* Hover deepens to clay — the palette's darker warm tone, so the white glyph
   gains contrast rather than losing it. */
/* Same rollover as every button, at the small size and in the toggle's own
   salmon — the ring is what ties these indicators to the buttons. */
.faq-question button:hover .faq-toggle {
  background: var(--clay);
  border-color: var(--clay);
  box-shadow: var(--halo-md) rgba(221, 152, 128, 0.30);
}

.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.faq-answer {
  overflow: hidden;
  font-size: 1.15rem;
  color: var(--muted);
  line-height: 1.8;
  /* Stops the measure short of the toggle column (49px circle, its 8px inset,
     and the row gap), then a further 6% of the measure so the copy reads at a
     slightly tighter width than the question above it. */
  padding-right: 7.9rem;
}

/* The compliance points, folded out of the old services disclaimer. Same size
   as the answer above them, marked with a clay dot. */
.faq-points {
  list-style: none;
  margin-top: 1.25rem;
  display: grid;
  gap: 0.7rem;
  line-height: 1.8;
}

.faq-points li { position: relative; padding-left: 1.5rem; }

.faq-points li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clay);
}

.faq-item.open .faq-answer-wrap { grid-template-rows: 1fr; }
.faq-item.open .faq-answer { padding-bottom: 1.75rem; }
/* Open inverts the closed state: the salmon moves from the fill to a thick
   stroke, and the glyph goes sage — Tyler's call, Sep 20. Bold so the minus
   holds its own weight against the 2px ring. */
.faq-item.open .faq-toggle {
  background: transparent;
  border-width: 2px;
  border-color: var(--salmon);
  color: var(--sage);
  font-weight: 700;
}

/* The plain hover rule outranks .faq-item.open, so the open card needs its own
   hover or it would flip back to a filled circle mid-interaction. */
/* Hover keeps the ring's deepen-to-clay behaviour and takes the glyph one
   step down its own ramp, so the sage doesn't flip to a different hue. */
.faq-item.open .faq-question button:hover .faq-toggle {
  background: transparent;
  border-color: var(--clay);
  color: var(--sage-dark);
  box-shadow: var(--halo-md) rgba(221, 152, 128, 0.30);
}

/* FOOTER — directory over an inline booking form.
   On the lighter --sage the dimmed whites lose too much, so every white here
   runs at or near full opacity rather than the tinted scale the dark sage used. */
.site-footer {
  background-color: var(--sage);
  background-image: var(--footer-wash);
  color: white;
  padding: 5rem 6rem 2.5rem;
  border-radius: var(--r-block);
  margin: 0 2rem 2rem;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}

.footer-brand p {
  margin-top: 1.25rem;
  max-width: 34ch;
  font-size: 1.2rem;
  line-height: 1.7;
  color: #fff;
}

.footer-col-title {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  margin-bottom: 1rem;
}

.footer-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  font-size: 15px;
  color: #fff;
}

.footer-list a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.footer-list a:hover { border-bottom-color: rgba(255,255,255,0.85); }

/* Connect column: a 16px line icon ahead of each label. The rule sits on the
   anchor so the underline on hover runs under icon and word together. */
.footer-list-connect a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.fl-icon { flex-shrink: 0; }

/* No rule over the form — the gap alone separates it from the directory. */
.footer-form {
  margin-top: 3.25rem;
  padding-top: 2.25rem;
}

.footer-form-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  margin-bottom: 1rem;
}

.footer-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 1.5rem;
  align-items: end;
}

/* Shape and motion come from the shared rule above; this only sets the
   on-sage colourway. */
.btn-book {
  margin-top: 2rem;
  background: white;
  color: var(--sage-dark);
  transition: box-shadow var(--halo-ease);
}

/* White button, so a white halo — the hero's gesture in this button's own
   colour. No darken and no lift, same as the hero. */
.btn-book:hover {
  box-shadow: var(--halo-md) rgba(255, 255, 255, 0.20);
}

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  padding-top: 2rem;
  font-size: 1rem;
  color: #fff;
}

.footer-bottom a { color: inherit; }

/* Footer sits on the lighter --sage, where sage-dark on sage has nowhere near
   enough separation — so both words go full white and the lockup reads as one
   object rather than two tones fighting the ground. */
.footer-logo .wm { height: 18px; }
.footer-logo .wm-a,
.footer-logo .wm-n { fill: #fff; }

@media (max-width: 1024px) {
  section { padding: 5.5rem 3rem; margin: 0 1.25rem 1rem; }
  .site-footer { margin: 0 1.25rem 1.25rem; }
  /* Stacked hero splits into two blocks — the photo and the copy — each
     standing on the page ground like every other section, so .hero itself
     stops being a container and just holds the gap. */
  .hero {
    grid-template-columns: 1fr;
    background: transparent;
    overflow: visible;
    border-radius: 0;
    gap: 1rem;
    margin-top: 1rem;
  }
  /* Photo leads. It is a non-interactive decorative div, so reordering it
     visually leaves the reading order (headline first, then the image's
     label) intact for screen readers. Top-aligned to keep her face in frame. */
  .hero-image {
    grid-row: 1;
    min-height: min(88vw, 420px);
    background-position: 50% 0%;
    border-radius: var(--r-block);
  }
  .hero-content {
    grid-row: 2;
    border-radius: var(--r-block);
  }
  .hero-content { padding: 2.5rem 3rem 5rem; }
  .hero-heading { font-size: 3.4rem; }
  .section-heading { font-size: 2.6rem; }
  .who-section, .faq-section, .philosophy-section { grid-template-columns: 1fr; gap: 3rem; }
  /* Deeper than its siblings: the credential hangs half a ring below the
     photo's corner, and the eyebrow sits right under it. */
  .about-section { grid-template-columns: 1fr; gap: 5.5rem; padding-top: 2.75rem; }
  .meet-band { gap: 2.25rem; padding-top: 6rem; padding-bottom: 6rem; }
  .approach-grid { grid-template-columns: 1fr 1fr; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .testimonials-section { min-height: 0; }
  .cta-row { flex-direction: column; align-items: flex-start; gap: 2.5rem; padding: 7.5rem 3rem; }
  .site-footer { padding: 4rem 3rem 2.5rem; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  body > nav { padding: 0 2rem; }
  .about-image { max-width: 480px; }
}

@media (max-width: 640px) {
  /* The block corner scales with the tiles — the same proportional step the
     old 40/24 pair made, now 80/48. */
  :root { --r-block: 48px; }
  section { padding: 4rem 1.5rem; margin: 0 0.75rem 0.75rem; }
  .about-section { padding-top: 2rem; }
  /* The card is only ~300px wide here, so holding the measure clear of the
     toggle column would cost a third of it. The answer sits below the
     question row anyway, so it keeps most of the width. Capped rather than
     padded so the measure holds at 280px across phone sizes instead of
     drifting with the card. */
  .faq-answer { padding-right: 0; max-width: 280px; }
  .site-footer { margin: 0 0.75rem 0.75rem; }
  .hero { gap: 0.75rem; margin-top: 0.75rem; }
  .meet-portrait { border-radius: 130px 130px var(--r-sm) var(--r-sm); }
  /* The photo runs the full width of the card here, so a ring centred on the
     corner would hang off the card's edge. It keeps the vertical half of the
     rule — centred on the photo's bottom edge, half over the image and half
     below it — and comes in from the right instead. */
  .about-credential { --tx: 0%; --ty: 50%; bottom: 0; right: 1.5rem; }
  /* Side padding matches the sections so the bigger display type gets its measure back. */
  .hero-content { padding: 2rem 1.5rem 4.5rem; }
  .hero-heading { font-size: 2.7rem; }
  .section-heading { font-size: 2.15rem; }
  .cta-row .consult-heading { font-size: 2.35rem; }
  .meet-band { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .meet-lede { font-size: 1.1rem; }
  .approach-grid, .services-grid { grid-template-columns: 1fr; }
  .who-cards { grid-template-columns: 1fr; }
  .services-intro { flex-direction: column; }
  .cta-row { padding: 5.5rem 1.5rem; }
  .site-footer { padding: 3rem 1.5rem 2rem; }
  .faq-question button { font-size: 1.2rem; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .footer-form-row { grid-template-columns: 1fr; }
  .t-stage { align-items: start; margin: 0 0 2.5rem; }
  .footer-form button { justify-self: start; }
  body > nav { padding: 0 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* The menu still opens and closes, it just arrives without the travel. */
  .nav-links, .nav-links li { transition-duration: 0.01ms !important; transform: none !important; }
  nav.menu-open .nav-links li { transition-delay: 0s !important; }
  .nav-burger i { transition-duration: 0.01ms !important; }

  /* The card rollover keeps its colour and shadow cues; only the movement goes. */
  .service-card:hover,
  .service-card:focus-within,
  .who-card:hover { transform: none; }
  /* The wash holds its resting reach; only the growth goes. */
  .service-card:hover::before,
  .service-card:hover::after,
  .who-card:hover::before,
  .who-card:hover::after { transform: none; }
  .service-card:hover .cta-arrow,
  .service-card:focus-within .cta-arrow { transform: none; }
  .about-credential { animation: none; }
  .t-slide { filter: none; transform: none; }
  mark, .t-pull mark { background-size: 100% 100% !important; }
  .t-tab.is-on::after { animation: none; width: 100%; }
}