/* ==========================================================================
   SiSU Canberra - prototype stylesheet
   Palette sampled directly from the SiSU letterhead artwork.
   --------------------------------------------------------------------------
   forest   #14291F  deep green from the leaf banner
   sage     #61805C  the primary brand green (footer band, curve, logo box)
   sage-dk  #4C6748  hover / pressed
   sage-pl  #E9EEE6  pale wash for tinted sections
   bone     #FCFCFA  page background
   sand     #C9BBA1  warm neutral, used sparingly for rules and eyebrows
   ========================================================================== */

:root {
  --forest: #14291F;
  --forest-2: #1E3A2B;
  --sage: #61805C;
  --sage-dk: #4C6748;
  --sage-pl: #E9EEE6;
  --bone: #FCFCFA;
  --sand: #C9BBA1;
  --ink: #1F241E;
  --ink-60: #5A6157;
  --line: #DDE1D8;

  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-ui: "Jost", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius-curve: 140px;
}

/* --------------------------------------------------- base */

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

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

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--sage-dk); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--forest); }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 .6em;
}

h1 { font-size: clamp(2.25rem, 5.2vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.0625rem; font-family: var(--font-ui); font-weight: 500; letter-spacing: .01em; }

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 840px; margin-inline: auto; }

.lede { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.55; color: var(--ink); }

/* eyebrow: the letterspaced lowercase device from the letterhead */
.eyebrow {
  font-family: var(--font-ui);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: lowercase;
  color: var(--sage-dk);
  margin: 0 0 1.1rem;
}
/* on the sand block even sage-dk falls under 4.5:1, so the eyebrow goes forest */
.offer .eyebrow { color: var(--forest); }
.eyebrow--light { color: rgba(255,255,255,.72); }

/* --------------------------------------------------- buttons */

.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95rem 1.9rem;
  border: 1px solid var(--sage);
  border-radius: 999px;
  background: var(--sage);
  color: #fff;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  cursor: pointer;
}
.btn:hover { background: var(--sage-dk); border-color: var(--sage-dk); color: #fff; }

.btn--ghost { background: transparent; color: var(--sage-dk); }
.btn--ghost:hover { background: var(--sage); color: #fff; }

.btn--onDark { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.btn--onDark:hover { background: #fff; border-color: #fff; color: var(--forest); }

/* sand fill, used for the header booking button so it separates from the
   dark bar. Forest type on sand, which is a much stronger pairing than white. */
.btn--sand {
  background: var(--sand);
  border-color: var(--sand);
  color: var(--forest);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .12em;
}
.btn--sand:hover { background: #fff; border-color: #fff; color: var(--forest); }

.btn--sm { padding: .7rem 1.35rem; font-size: .72rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* --------------------------------------------------- header */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--forest);
  color: #fff;
}

.header__bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 112px;
  padding-block: .6rem;
  max-width: 1400px;
}

/* the SiSU logo tile. Its top-right corner is transparent, so the header
   colour shows through the curve exactly as it does on the letterhead. */
.mark {
  display: block;
  flex: none;
  line-height: 0;
  text-decoration: none;
  border-radius: 2px;
}
.mark img { width: auto; height: 92px; }
.mark:focus-visible { outline-offset: 4px; }

@media (max-width: 1240px) {
  .mark img { height: 72px; }
}

/* --------------------------------------------------- navigation */

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-ui);
  font-size: clamp(.68rem, .34vw + .43rem, .8125rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255,255,255,.86);
  padding: .65rem clamp(.35rem, .55vw, .8rem);
  border: 0;
  background: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.nav__link:hover { color: #fff; background: rgba(255,255,255,.09); }

/* the arrow marks items that expand, so they read differently to plain links */
.nav__caret { width: 8px; height: 8px; flex: none; opacity: .8; transition: transform .2s ease; }
.nav__item--open > .nav__link .nav__caret { transform: rotate(180deg); }

/* current page indicator */
.nav__item { position: relative; }
.nav__item--current > .nav__link { color: #fff; }
.nav__item--current > .nav__link::after {
  content: "";
  position: absolute;
  left: clamp(.35rem, .55vw, .8rem); right: clamp(.35rem, .55vw, .8rem); bottom: .35rem;
  height: 1px;
  background: var(--sand);
}

/* dropdown panel: deliberately a different colour to the bar above it */
.nav__panel {
  position: absolute;
  top: calc(100% + .25rem);
  left: 0;
  min-width: 268px;
  background: var(--bone);
  border-top: 3px solid var(--sage);
  box-shadow: 0 18px 44px rgba(20,41,31,.22);
  padding: .6rem 0;
  list-style: none;
  margin: 0;
  display: none;
}
.nav__item--open > .nav__panel { display: block; }

/* The panel sits .25rem below the bar, which looks right but leaves a strip where
   the pointer is over neither the item nor the panel. Crossing it fired mouseleave
   and shut the menu before you could reach it. This invisible bridge covers that
   strip, so moving from the link straight down never leaves the item. */
.nav__panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -.6rem;
  height: .6rem;
}

.nav__panel a {
  display: block;
  font-family: var(--font-ui);
  font-size: .875rem;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--ink);
  text-decoration: none;
  padding: .55rem 1.4rem;
}
.nav__panel a:hover { background: var(--sage-pl); color: var(--forest); }

.header__cta { display: flex; align-items: center; gap: .5rem; flex: none; }

.nav-toggle { display: none; }

/* Phones: a compact header. It stays fixed at the top, so its height is taken
   from every screen; 112px was 13 to 17 per cent of a phone. The logo drops
   from 72px to 44px and the bar to 64px. Tablets and desktop are unchanged. */
@media (max-width: 768px) {
  .header__bar { min-height: 64px; padding-block: .5rem; gap: 1rem; }
  .mark img { height: 44px; }
  html { scroll-padding-top: 88px; }
  .legal__body h2 { scroll-margin-top: 88px; }
}

/* mobile navigation */
@media (max-width: 1240px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
    background: none;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 999px;
    color: #fff;
    font-family: var(--font-ui);
    font-size: .75rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: .6rem 1.1rem;
    cursor: pointer;
  }
  .header__cta .btn { display: none; }
  .nav {
    display: none;
    margin: 0;
    width: 100%;
    border-top: 1px solid rgba(255,255,255,.16);
    padding-block: .5rem 1.5rem;
    max-height: 72vh;
    overflow-y: auto;
  }
  .nav.is-open { display: block; }
  .header__bar { flex-wrap: wrap; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { justify-content: space-between; width: 100%; padding: .85rem .25rem; font-size: .875rem; }
  .nav__item--current > .nav__link::after { left: .25rem; right: auto; width: 22px; }
  .nav__panel {
    position: static;
    display: none;
    background: transparent;
    border-top: 0;
    border-left: 1px solid rgba(255,255,255,.22);
    box-shadow: none;
    margin: 0 0 .75rem .25rem;
    padding: .25rem 0;
  }
  .nav__item--open > .nav__panel { display: block; }
  .nav__panel::before { display: none; }   /* static panel, no gap to bridge */
  .nav__panel a { color: rgba(255,255,255,.82); padding: .5rem 1rem; }
  .nav__panel a:hover { background: rgba(255,255,255,.08); color: #fff; }
  .nav__mobile-cta { display: block; margin-top: 1rem; }
}
@media (min-width: 1241px) { .nav__mobile-cta { display: none; } }

/* --------------------------------------------------- the tagline ribbon
   Lifted straight from the letterhead. Used under the header and as a
   divider between major sections. */

.ribbon {
  background: var(--bone);
  color: var(--forest);
  border-bottom: 1px solid var(--line);
}
.ribbon__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .1rem 0;
  padding: .85rem 0;
  font-family: var(--font-ui);
  font-size: .6875rem;
  letter-spacing: .28em;
  text-transform: lowercase;
}
.ribbon__inner span::after { content: "\00b7"; margin: 0 .55em 0 .75em; color: var(--sage); }
.ribbon__inner span:last-child::after { content: ""; margin: 0; }
@media (max-width: 600px) { .ribbon__inner { letter-spacing: .18em; font-size: .625rem; } }

/* --------------------------------------------------- hero
   The photograph runs at full strength. The only darkening is a soft scrim
   feathered in behind the type, so the headline stays readable without a
   wash sitting over the whole image. To remove it entirely, delete the
   background line in .hero::after. */

.hero { position: relative; background: var(--forest); color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(260deg,
    rgba(15,32,23,.72) 0%,
    rgba(15,32,23,.60) 26%,
    rgba(15,32,23,.30) 46%,
    rgba(15,32,23,.06) 64%,
    rgba(15,32,23,0) 78%);
}

/* Copy sits in a column on the right, over the soft-focus part of the frame,
   so the foreground on the left of the photograph stays clear. */
.hero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(4.5rem, 12vw, 8.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.hero__inner > * { width: min(100%, 34rem); }
.hero__inner .btn-row { justify-content: flex-start; }
.hero__inner > h1 { text-shadow: 0 1px 24px rgba(15,32,23,.5); }
.hero .lede { color: rgba(255,255,255,.94); text-shadow: 0 1px 18px rgba(15,32,23,.5); }

/* deep forest for the primary button over the banner photograph: sage sits too
   close in value to the image behind it and goes soft */
.hero .btn:not(.btn--onDark) { background: var(--forest); border-color: var(--forest); color: #fff; }
.hero .btn:not(.btn--onDark):hover { background: var(--sage-dk); border-color: var(--sage-dk); }


@media (max-width: 900px) {
  .hero__inner { align-items: stretch; }
  .hero__inner > * { width: min(100%, 40rem); }
}
@media (max-width: 768px) {
  .hero::after {
    background: linear-gradient(180deg,
      rgba(15,32,23,.74) 0%,
      rgba(15,32,23,.58) 55%,
      rgba(15,32,23,.34) 100%);
  }
}

/* Phones: the wide banner crops her off the left edge, so up to 768px the
   picture swaps to a square crop centred on her (see the <picture> in
   pages_a.py). It stays behind the copy, so the hero keeps exactly the same
   height and nothing below it moves. */
@media (max-width: 768px) {
  /* 20% from the top keeps her head in frame on wider screens, where the
     square is cropped top and bottom rather than at the sides */
  .hero__media img { object-position: 50% 20%; }
  /* the deep forest button disappears against her black top, so phones get
     the standard sage one */
  .hero .btn:not(.btn--onDark) { background: var(--sage); border-color: var(--sage); }
  .hero .btn:not(.btn--onDark):hover { background: var(--sage-dk); border-color: var(--sage-dk); }
}

/* compact hero for interior pages */
.pagehead { position: relative; background: var(--forest-2); color: #fff; overflow: hidden; }
.pagehead__media { position: absolute; inset: 0; }
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehead::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(260deg,
    rgba(15,32,23,.74) 0%,
    rgba(15,32,23,.62) 30%,
    rgba(15,32,23,.32) 50%,
    rgba(15,32,23,.08) 68%,
    rgba(15,32,23,0) 82%);
}
/* the brand texture is already dark and even, so it needs less help than a photo */
.pagehead--texture::after {
  background: linear-gradient(260deg,
    rgba(15,32,23,.55) 0%,
    rgba(15,32,23,.42) 34%,
    rgba(15,32,23,.18) 56%,
    rgba(15,32,23,.02) 76%,
    rgba(15,32,23,0) 88%);
}
.pagehead__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(3rem, 8vw, 5.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.pagehead__inner > * { width: min(100%, 32rem); }
.pagehead__inner .btn-row { justify-content: flex-start; }
.pagehead__inner h1 { text-shadow: 0 1px 22px rgba(15,32,23,.5); }
.pagehead__inner > p:not(.eyebrow) { color: rgba(255,255,255,.92); font-size: 1.1rem; margin: 0; text-shadow: 0 1px 16px rgba(15,32,23,.5); }

@media (max-width: 900px) {
  .pagehead__inner { align-items: stretch; }
  .pagehead__inner > * { width: min(100%, 38rem); }
}
@media (max-width: 760px) {
  .pagehead::after {
    background: linear-gradient(180deg, rgba(15,32,23,.76) 0%, rgba(15,32,23,.5) 100%);
  }
}

/* plain page header, for the legal pages where a photograph would be odd */
.pagehead--plain { background: var(--forest); }
.pagehead--plain::after { display: none; }
.pagehead--plain .pagehead__inner { align-items: flex-start; }
.pagehead--plain .pagehead__inner > * { width: min(100%, 40rem); }
.pagehead--plain .pagehead__inner > p:not(.eyebrow) { color: rgba(255,255,255,.75); font-size: .95rem; }

/* --------------------------------------------------- legal pages */

.legal { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .legal { grid-template-columns: 260px 1fr; align-items: start; } }

.legal__toc { font-family: var(--font-ui); font-size: .875rem; }
@media (min-width: 900px) {
  .legal__toc { position: sticky; top: 150px; max-height: calc(100vh - 190px); overflow-y: auto; }
}
.legal__toc h2 {
  font-family: var(--font-ui);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage-dk);
  margin-bottom: .9rem;
}
.legal__toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal__toc li { counter-increment: toc; margin-bottom: .45rem; line-height: 1.35; }
.legal__toc a { color: var(--ink-60); text-decoration: none; display: block; }
.legal__toc a::before { content: counter(toc) ". "; color: var(--sage); }
.legal__toc a:hover { color: var(--forest); }

.legal__body { max-width: 78ch; counter-reset: sec; }
.legal__body h2 {
  counter-increment: sec;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: 150px;
}
.legal__body h2::before { content: counter(sec) ". "; color: var(--sage); }
.legal__body .lede { margin-bottom: .5rem; }
.legal__body p { font-size: 1rem; }
.legal__body .ticks { margin-bottom: 1.1rem; }
.legal__body .ticks li { margin-bottom: .35rem; }

/* --------------------------------------------------- sections */

.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.section--pale { background: var(--sage-pl); }
.section--bone { background: var(--bone); }
/* Pure white, not bone. The Mindbody widgets render their own card on #fff,
   so a bone section leaves a visible edge around the widget. Use this on any
   section holding one. */
.section--white { background: #fff; }
.section--forest { background: var(--forest); color: #fff; }
.section--forest h2, .section--forest h3, .section--forest h4 { color: #fff; }
.section--forest .lede { color: rgba(255,255,255,.94); }
.section--forest strong { color: #fff; }
.cta-band .lede { color: rgba(255,255,255,.94); }
.section--forest a:not(.btn) { color: #fff; }

/* the sweeping curve from the letterhead footer */
.section--curve-tr { border-top-right-radius: var(--radius-curve); }
.section--curve-tl { border-top-left-radius: var(--radius-curve); }
@media (max-width: 700px) { :root { --radius-curve: 70px; } }

/* The curve cuts a notch out of the section and reveals whatever sits behind
   it, which is the bone page background. When the section above is pale, that
   notch reads as a stray white corner. Wrapping the section in this fills the
   notch with the colour of the section above, so the curve sweeps out of the
   pale band rather than out of nothing. The wrapper is exactly as tall as the
   section it holds, so only the notch is ever visible.

   The wrapped section must paint its own background, or the wrapper colour
   shows through the whole section rather than just the notch. Plain .section
   is transparent, so add .section--bone to it. */
.curve-behind--pale { background: var(--sage-pl); }
.curve-behind--bone { background: var(--bone); }
.curve-behind--forest { background: var(--forest); }

.section__head { max-width: 880px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__head--center { margin-inline: auto; text-align: center; }

.rule { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

/* --------------------------------------------------- grids and cards */

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); align-items: stretch; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* auto-fit collapses the empty tracks, so a grid holding one or two cards stretches
   them across the whole row. auto-fill keeps the tracks, so the cards stay the width
   they would be in a full row. Use on any grid that may hold fewer items than columns. */
.grid--nostretch { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-top-right-radius: 42px;
  overflow: hidden;
  height: 100%;
}
/* flex: none stops the media growing to fill a taller card, which is what
   made the first card's image deeper than the rest when its text ran longer */
.card__media { aspect-ratio: 4 / 3; flex: none; overflow: hidden; background: var(--sage-pl); }
.card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
.card__media > .needs-photo { height: 100%; min-height: 0; }

/* Stands in for a team portrait until the photograph exists. Sage ground with
   the person's initials, so a card without a photo still looks deliberate. */
.portrait-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--sage-pl);
  color: var(--forest);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1;
  user-select: none;
}
.card__body { padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: .5rem; }
.card__body p { color: var(--ink-60); font-size: .98rem; }
.card__link {
  margin-top: auto;
  padding-top: 1.2rem;
  font-family: var(--font-ui);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}
.card__link::after { content: " \2192"; }

/* the recommended membership. A single card gets the emphasis, because a set
   of equal options makes people choose nothing at all. */
.card--featured {
  border-color: var(--sage);
  box-shadow: 0 0 0 2px var(--sage);
  position: relative;
  overflow: hidden;
}
.card--featured .card__body { padding-top: 2.6rem; }
.flag {
  position: absolute;
  top: 0; left: 0;
  background: var(--sage);
  color: #fff;
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .4rem .9rem;
  border-bottom-right-radius: 14px;
  z-index: 2;
}

/* the price line on a membership card */
.price { display: flex; align-items: baseline; gap: .4rem; margin: 0 0 .2rem; }
.price__amount { font-family: var(--font-display); font-size: 2.4rem; font-weight: 500; line-height: 1; color: var(--forest); }
.price__unit { font-family: var(--font-ui); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60); }
.price__sub { font-family: var(--font-ui); font-size: .78rem; letter-spacing: .04em; color: var(--ink-60); margin: 0 0 1.2rem; }
.section--forest .price__amount { color: #fff; }
.section--forest .price__unit, .section--forest .price__sub { color: rgba(255,255,255,.7); }

/* full-width conversion band, used at the foot of the service pages */
.cta-band {
  background: var(--forest);
  color: #fff;
  border-top-right-radius: var(--radius-curve);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}
.cta-band h2 { color: #fff; margin-bottom: .9rem; max-width: 30ch; }
.cta-band p { color: rgba(255,255,255,.85); max-width: 880px; }
.cta-band .btn-row { margin-top: 1.5rem; }

/* image placeholder, for the shots that still need to be taken */
.needs-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  background: repeating-linear-gradient(135deg, var(--sage-pl), var(--sage-pl) 12px, #E1E8DD 12px, #E1E8DD 24px);
  color: var(--sage-dk);
  font-family: var(--font-ui);
  font-size: .78rem;
  letter-spacing: .06em;
  min-height: 180px;
}

/* alternating image + text */
.split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
/* Centring is right when a picture sits beside text, but wrong beside a form:
   the shorter column floats down the page and the two look unrelated. Align the
   tops instead, so the heading starts level with the first field. */
.split--top { align-items: start; }
/* Two text columns where a section has no photograph. Two equal columns from
   900px, one column below, so lines stay a readable length either way. */
.split--text { grid-template-columns: 1fr; }
@media (min-width: 900px) { .split--text { grid-template-columns: 1fr 1fr; } }
.split--text h2 { margin-top: 0; }
/* A soft panel for a list that sits beside text, in place of a photograph.
   The curved corner matches the photographs elsewhere on the site. */
.split__panel {
  background: var(--sage-pl);
  border-top-right-radius: 60px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.split__panel > h3:first-child { margin-top: 0; }
.split__panel ul:last-child { margin-bottom: 0; }
.split__media img, .split__media .needs-photo { border-top-right-radius: 60px; aspect-ratio: 5 / 4; object-fit: cover; width: 100%; height: 100%; }
/* a portrait beside a long biography reads better upright and stays put while
   the text scrolls */
.split--portrait .split__media { position: sticky; top: 150px; }
.split--portrait .split__media img,
.split--portrait .split__media .needs-photo { aspect-ratio: 4 / 5; }
@media (max-width: 760px) { .split--portrait .split__media { position: static; } }

/* --------------------------------------------------- image gallery

   A swipeable set of pictures where one photograph is not enough. Scroll
   snapping does the swiping, so it works on a phone and with a trackpad without
   any script; site.js only adds the dots. Without the dots people have no way of
   knowing a second picture is there, which is the whole point of them. */
.gallery { position: relative; }
.gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;          /* the dots are the affordance, not a scrollbar */
  -ms-overflow-style: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track img {
  flex: 0 0 100%;
  scroll-snap-align: center;
  width: 100%;
}
.gallery__dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: .9rem;
}
.gallery__dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 1px solid var(--sage);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.gallery__dot[aria-selected="true"] { background: var(--sage); transform: scale(1.15); }
/* the dark bands need a light dot */
.section--forest .gallery__dot, .cta-band .gallery__dot { border-color: rgba(255,255,255,.65); }
.section--forest .gallery__dot[aria-selected="true"],
.cta-band .gallery__dot[aria-selected="true"] { background: #fff; }
@media (prefers-reduced-motion: reduce) { .gallery__track { scroll-behavior: auto; } }

/* For sections with a lot of copy: the text column takes more of the width and
   the image stays in view while you read, rather than floating alone against a
   tall column of text. */
.split--long { align-items: start; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
@media (min-width: 900px) {
  /* capping the media rather than the column keeps the image the same width
     whichever side it sits on */
  .split--long { grid-template-columns: 1fr 1fr; }
  .split--long .split__media { position: sticky; top: 150px; max-width: 440px; }
  .split--long > .split__media:last-child { margin-left: auto; }
  .split--long.split--flip .split__media { order: 2; margin-left: auto; }
}
.split--long .split__media img,
.split--long .split__media .needs-photo { aspect-ratio: 2 / 3; }
@media (max-width: 899px) {
  .split--long .split__media img,
  .split--long .split__media .needs-photo { aspect-ratio: 4 / 3; }
}
.split--flip .split__media { order: 2; }
/* for tall portraits going into a landscape frame: keep the head in shot */
.split__media img.img-top { object-position: center 18%; }
/* pulls the crop to the very top of the frame, for photos where a head sits
   close to the upper edge */
.split__media img.img-topmost { object-position: center top; }
@media (max-width: 760px) { .split--flip .split__media { order: 0; } }

/* pathway blocks (recovery / growth / performance) */
.paths { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); counter-reset: path; }
.path {
  display: block;
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-top-right-radius: 42px;
  padding: 2rem 1.75rem;
  transition: background .25s ease, transform .25s ease;
}
.path:hover { background: rgba(255,255,255,.12); transform: translateY(-3px); }
.path h3 { font-family: var(--font-ui); font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sand); margin-bottom: .9rem; }
.path p { color: rgba(255,255,255,.84); font-size: .98rem; }
.path__go { display: inline-block; margin-top: 1.1rem; font-family: var(--font-ui); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.path__go::after { content: " \2192"; }

/* --------------------------------------------------- offer card
   Same language as the featured membership card: white ground, sage ring,
   flag tab and the swept corner. It is the first thing on the home page, so
   it should read as an offer rather than as a coloured band. */

.offer {
  position: relative;
  background: #fff;
  border: 1px solid var(--sage);
  box-shadow: 0 0 0 2px var(--sage);
  border-top-right-radius: 42px;
  overflow: hidden;
  padding: 3.4rem clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  color: var(--ink);
}
.offer__text { flex: 1 1 30rem; }
.offer h2 { margin: 0 0 .7rem; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.offer p { margin: 0; }
.offer .price { margin-bottom: .15rem; }
.offer .price__sub { margin-bottom: 1.1rem; }
.offer .btn { flex: none; }

@media (max-width: 620px) { .offer { padding-top: 3.2rem; } }

/* Two offers side by side. The single .offer is a wide horizontal card with the
   button off to the right; in a narrower column that reads badly, so inside
   .offers each card stacks and the button sits at the bottom. Making the text
   grow keeps the two buttons on the same line even when one card has more copy. */
.offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
}
.offers .offer {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  height: 100%;
}
.offers .offer__text { flex: 1 1 auto; }
.offers .offer .btn { margin-top: 1.5rem; }

/* Mindbody styles contract links as a plain arrow link and pricing options as a
   filled pill. The Spring Special is a contract and the Intro Offer is a pricing
   option, so without this they would not match: side by side on the pricing page,
   and against the pill the Intro Offer used to have on the home page. In an offer
   card the contract link gets the pill treatment too. */
.offer a.healcode-contract-text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  border: 1px solid var(--sage);
  background: var(--sage);
  color: #fff;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .12em;
}
.offer a.healcode-contract-text-link::after { content: none; }
.offer a.healcode-contract-text-link:hover {
  background: var(--sage-dk);
  border-color: var(--sage-dk);
  color: #fff;
}
/* stacked cards only: push the button to the bottom of the card */
.offers .offer a.healcode-contract-text-link { margin-top: 1.5rem; }

/* --------------------------------------------------- lists */

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding-left: 1.65rem; margin-bottom: .6rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--sage); }

.plain { list-style: none; margin: 0; padding: 0; }
.plain li { border-bottom: 1px solid var(--line); padding: .8rem 0; }
.plain li:last-child { border-bottom: 0; }

/* --------------------------------------------------- pricing */

.ptable { width: 100%; border-collapse: collapse; font-size: 1rem; }
.ptable caption {
  text-align: left;
  font-family: var(--font-ui);
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage-dk);
  padding-bottom: .9rem;
}
.ptable th, .ptable td { text-align: left; padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ptable th { font-family: var(--font-ui); font-weight: 500; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60); }
.ptable td:last-child, .ptable th:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.ptable .muted { color: var(--ink-60); font-size: .9rem; display: block; }

/* --------------------------------------------------- accordion (faq) */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-size: 1.1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: .25rem; top: 1rem;
  font-family: var(--font-ui);
  font-size: 1.4rem;
  color: var(--sage);
  line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > div { padding-bottom: 1.4rem; color: var(--ink-60); max-width: 68ch; }
/* run-sheet items inside an accordion */
.faq details h4 { margin: 1.4rem 0 .4rem; color: var(--forest); font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.faq details h4:first-child { margin-top: 0; }
.faq details .ticks { margin-bottom: .8rem; }

/* expandable full biography inside a team card */
/* a row of cards holding expandable bios. Cards are height:100% so they sit
   flush in a stretched row, which is right everywhere else but means opening
   one bio would drag every card in the row to the same height. */
.grid--bios { align-items: start; }
.grid--bios > .card { height: auto; }
/* Team portraits are shot portrait, so the card frame matches rather than
   cropping a wide band out of the middle. The photograph is inset, so the white
   of the card frames it and the bright background does not run to the edge. */
.grid--bios .card__media {
  aspect-ratio: 4 / 5;
  margin: .8rem .8rem 0;
  border-top-right-radius: 34px;
  overflow: hidden;
}
.grid--bios .card__body { padding-top: 1.25rem; }
.grid--bios .card__media img { object-position: center 30%; }

/* The instructor rows run four across and hold a lot of people, so the role
   is set small enough to stay on one line and keep the cards level. The
   clinician cards are wider and fewer, so their titles are left full size and
   may run to two lines. */
.grid--4.grid--bios .card__body > .meta { font-size: .62rem; letter-spacing: .04em; }
/* A floor set to the height of a finished card, so the completed ones line up
   without dead space beneath the link. Cards still carrying a placeholder note
   run taller; that resolves itself once the remaining bios are written. */
.grid--4.grid--bios > .card { min-height: 0; }
/* the clinician roles are longer and some wrap, so this row needs a floor */
.grid--3.grid--bios > .card { min-height: 40.7rem; }
/* even the space around the rule, and the gap under the link matched to the
   gap above the name so the card is balanced top and bottom */
.grid--bios .card__body > .meta { margin-bottom: 0; }
.grid--bios .bio { margin-top: .9rem; padding-top: .85rem; }
.grid--bios .bio summary { line-height: 1.2; }
.grid--bios .card__body { padding-bottom: 1.6rem; }
@media (max-width: 760px) { .grid--4.grid--bios > .card { min-height: 0; }
/* the clinician roles are longer and some wrap, so this row needs a floor */
.grid--3.grid--bios > .card { min-height: 40.7rem; } }

/* The classes a person teaches, so a card without a bio still says something
   useful about them. */
.teaches {
  margin: .3rem 0 1rem;
  padding: 0;
  list-style: none;
}
.teaches li {
  padding: .38rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--forest);
}
.teaches li:first-child { border-top: 1px solid var(--line); }
.bio .teaches { margin-top: 0; margin-bottom: .9rem; }

.bio { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.bio summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-ui);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sage-dk);
  position: relative;
  padding-right: 1.5rem;
}
.bio summary::-webkit-details-marker { display: none; }
.bio summary::after { content: "+"; position: absolute; right: 0; top: -.15rem; font-size: 1.1rem; line-height: 1; color: var(--sage); }
.bio[open] summary::after { content: "\2013"; }
.bio summary:hover { color: var(--forest); }
.bio > div { padding-top: .9rem; }
.bio p { font-size: .95rem; color: var(--ink-60); }

/* Mindbody renders its pricing link as a bare anchor, so it is given the same
   treatment as a primary button to sit properly in a button row. */
a.healcode-contract-text-link {
  display: inline-block;
  margin-top: auto;
  padding-top: 1.1rem;
  font-family: var(--font-ui);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sage-dk);
  text-decoration: none;
  border-bottom: 0;
}
a.healcode-contract-text-link::after { content: " \2192"; }

/* the widget on a dark band, and the secondary outline variant */
.section--forest a.healcode-pricing-option-text-link,
.cta-band a.healcode-pricing-option-text-link {
  background: transparent;
  border-color: rgba(255,255,255,.55);
  color: #fff;
}
.section--forest a.healcode-pricing-option-text-link:hover,
.cta-band a.healcode-pricing-option-text-link:hover {
  background: rgba(255,255,255,.12);
  border-color: #fff;
  color: #fff;
}
a.healcode-contract-text-link:hover { color: var(--forest); }

/* Mindbody injects a bare anchor, so it has to be dressed as a button by hand.
   The padding, size and letter-spacing below are copied from .btn deliberately:
   these sit next to real .btn links in the same row, and when they differed even
   slightly the pair looked like a mistake. Change .btn and change this too. */
a.healcode-pricing-option-text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem 1.9rem;
  border-radius: 999px;
  border: 1px solid var(--sage);
  background: var(--sage);
  color: #fff;
  font-family: var(--font-ui);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
/* inside a price table the widget is the price cell, so it is a compact
   outline button rather than a full-width primary one */
.ptable a.healcode-contract-text-link {
  display: inline-block;
  margin-top: auto;
  padding-top: 1.1rem;
  font-family: var(--font-ui);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sage-dk);
  text-decoration: none;
  border-bottom: 0;
}
a.healcode-contract-text-link::after { content: " \2192"; }

/* the widget on a dark band, and the secondary outline variant */
.section--forest a.healcode-pricing-option-text-link,
.cta-band a.healcode-pricing-option-text-link {
  background: transparent;
  border-color: rgba(255,255,255,.55);
  color: #fff;
}
.section--forest a.healcode-pricing-option-text-link:hover,
.cta-band a.healcode-pricing-option-text-link:hover {
  background: rgba(255,255,255,.12);
  border-color: #fff;
  color: #fff;
}
a.healcode-contract-text-link:hover { color: var(--forest); }

/* inside a price table the widget is the price cell, so it is a compact
   outline button rather than a full-width primary one */
.ptable a.healcode-pricing-option-text-link {
  padding: .45rem 1rem;
  font-size: .7rem;
  letter-spacing: .1em;
  background: transparent;
  border-color: var(--sage);
  color: var(--sage-dk);
  white-space: nowrap;
}
.ptable a.healcode-pricing-option-text-link:hover {
  background: var(--sage);
  border-color: var(--sage);
  color: #fff;
}

a.healcode-pricing-option-text-link:hover {
  background: var(--sage-dk);
  border-color: var(--sage-dk);
  color: #fff;
}

/* The Mindbody schedule and appointment widgets render their own markup, so
   they are given room and a minimum height rather than being restyled. */
.mindbody-widget { min-height: 320px; margin-block: .5rem; }


/* --------------------------------------------------- forms */

.form { display: grid; gap: 1.1rem; max-width: 620px; }
.field { display: grid; gap: .4rem; }
.field label { font-family: var(--font-ui); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60); }
.field input, .field select, .field textarea {
  font-family: var(--font-display);
  font-size: 1rem;
  padding: .8rem .9rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
  width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sage); }
/* Netlify's honeypot. Bots fill it in, people never see it. Kept out of the tab
   order and off screen rather than display:none, which some bots detect. */
.hidden-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form__note { font-size: .92rem; color: var(--ink-60); }
.form__status { display: none; padding: 1rem 1.2rem; background: var(--sage-pl); border-left: 3px solid var(--sage); }
.form__status.is-visible { display: block; }
/* Shown when the submission does not reach Netlify. The phone number matters here:
   someone enquiring about psychology should not be left assuming a message was sent. */
.form__status--error { background: #fdf3ec; border-left-color: #c2703d; }

/* --------------------------------------------------- crisis note */

.crisis {
  border-left: 3px solid var(--sage);
  background: var(--sage-pl);
  padding: 1.25rem 1.5rem;
  font-size: .98rem;
  border-top-right-radius: 24px;
}
.crisis strong { display: block; font-family: var(--font-ui); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .35rem; }

/* --------------------------------------------------- editorial notes
   Visible markers where SiSU still needs to supply information.
   Delete the .todo rule to hide them all before going live. */

.todo {
  display: inline-block;
  background: #FFF3D6;
  border-bottom: 1px dashed #C79A2E;
  padding: 0 .3rem;
  font-family: var(--font-ui);
  font-size: .92em;
  color: #6B5310;
}

/* --------------------------------------------------- footer */

.footer { background: var(--forest); color: rgba(255,255,255,.8); }
.footer a { color: rgba(255,255,255,.8); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__top { padding-block: clamp(3rem, 6vw, 4.5rem); display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.footer h4 { font-family: var(--font-ui); font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sand); margin-bottom: 1rem; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .55rem; font-size: .96rem; }
.footer__legal {
  border-top: 1px solid rgba(255,255,255,.16);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: .78rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.6);
}
.footer__legal a { color: rgba(255,255,255,.72); }

.skip {
  position: absolute;
  left: -9999px;
  background: #fff;
  color: var(--forest);
  padding: .8rem 1.2rem;
  z-index: 200;
}
.skip:focus { left: 1rem; top: 1rem; }

/* --------------------------------------------------- utilities */

.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
/* A stack of related groups: contact details, then hours, then address.

   The gap between groups has to be clearly larger than the gap inside one, or
   nothing groups and every line reads as a separate item. It used to be 1.1rem
   between groups against 1.1em between paragraphs, which is the same number, so
   the three blocks did not read as blocks at all. */
.stack > * + * { margin-top: 2.5rem; }
.stack h3 { margin-bottom: .25em; }
.stack p { margin-bottom: .35em; }
.stack p:last-child { margin-bottom: 0; }
/* the phone number leads, so it keeps a little more air beneath it */
.stack .lede { margin-bottom: .6em; }
.meta { font-family: var(--font-ui); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60); }
/* sentence-case variant, for lines too long to shout: interests, teaching notes */
.meta--plain { text-transform: none; letter-spacing: .01em; font-size: .88rem; line-height: 1.5; }

/* Small heading above a list inside a bio, e.g. "I can help you with". */
.bio .bio__label {
  margin: 1rem 0 .3rem;
  font-family: var(--font-ui);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sage-dk);
}
.bio__label + .teaches li { font-weight: 400; }

/* Close button at the foot of a long bio, styled like the summary above it. */
.bio__close {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .4rem;
  padding: .55rem 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  width: 100%;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sage-dk);
  text-align: left;
}
.bio__close::after { content: "\2013"; margin-left: auto; font-size: 1.1rem; line-height: 1; color: var(--sage); }
.bio__close:hover { color: var(--forest); }
.bio__close:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }

/* Phones: a slightly smaller Menu button to match the compact header. */
@media (max-width: 768px) {
  .nav-toggle { padding: .5rem .95rem; font-size: .7rem; }
}