/* ============================================================
   style.css — Unlock: Mind and Wellness
   COMPLETE FILE. Overwrite static/css/style.css entirely.
   ============================================================ */

:root {
  /* ── Brand palette ── */
  --cream:      #FDFBF5;
  --vanilla:    #F2ECDC;
  --lime:       #A5B24E;
  --lemon:      #EFA623;
  --grapefruit: #D97E9A;
  --raspberry:  #C2185B;
  --forest:     #14402F;

  /* ── Ink tier — darkened accents, safe for text ── */
  --lime-ink:       #6B7430;
  --lemon-ink:      #8A5D00;
  --grapefruit-ink: #A3455F;
  --raspberry-ink:  #A5164E;

  /* ── Soft tints — backgrounds only ── */
  --lime-soft:       rgba(165,178,78,0.16);
  --lemon-soft:      rgba(239,166,35,0.16);
  --grapefruit-soft: rgba(217,126,154,0.16);
  --raspberry-soft:  rgba(194,24,91,0.09);
  --forest-soft:     rgba(20,64,47,0.07);

  /* ── Forest variants ── */
  --forest-mid:  #1D5741;
  --forest-deep: #0E2D21;

  /* ── Neutrals ── */
  --charcoal: #1F2621;
  --ink:      #3C443E;
  --muted:    #6A7269;
  --border:   #E6DEC9;
  --white:    #FFFFFF;
  --error:    var(--raspberry);
  --success:  var(--lime-ink);

  /* ── Legacy aliases (older rules still reference these) ── */
  --cream-dark: var(--vanilla);
  --sage:       var(--lime);
  --sage-light: #C3CC8A;
  --gold:       var(--lemon);
  --gold-light: #F5BC55;
  --melon:      var(--grapefruit);
  --sky:        #AADCF2;

  /* ── Typography ── */
  --font-display: Cambria, "Cambria Math", Georgia, "Times New Roman", serif;
  --font-body:    Cambria, "Cambria Math", Georgia, serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.75rem;
  --text-4xl:  3.5rem;
  --text-5xl:  5rem;

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Layout ── */
  --container-max:    1200px;
  --container-narrow: 760px;
  --container-wide:   1440px;
  --gutter:           clamp(1.25rem, 4vw, 2.5rem);

  /* ── Radius ── */
  --radius-sm:   0.5rem;
  --radius-md:   0.875rem;
  --radius-lg:   1.25rem;
  --radius-xl:   1.75rem;
  --radius-2xl:  2.25rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 3px rgba(20,64,47,.06), 0 1px 2px rgba(20,64,47,.04);
  --shadow-md:   0 6px 20px rgba(20,64,47,.09), 0 2px 6px rgba(20,64,47,.05);
  --shadow-lg:   0 16px 48px rgba(20,64,47,.14), 0 6px 14px rgba(20,64,47,.06);
  --shadow-pop:  0 20px 56px rgba(20,64,47,.18), 0 8px 18px rgba(194,24,91,.10);
  --shadow-glow: 0 0 0 4px rgba(194,24,91,.14);

  /* ── Transitions ── */
  --ease:        cubic-bezier(.4,0,.2,1);
  --ease-out:    cubic-bezier(0,0,.2,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --transition:  .25s var(--ease);

  /* ── Z-index ── */
  --z-base:    1;
  --z-sticky:  100;
  --z-modal:   200;
  --z-overlay: 300;
}

/* ── Reset ── */
*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
html { font-size:100%; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--charcoal);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-top: 76px;
}
img,picture,video,svg { display:block; max-width:100%; }
input,button,textarea,select { font: inherit; }
ul[role='list'],ol[role='list'] { list-style:none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--raspberry); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ── Typography ── */
h1,h2,h3,h4 { font-family: var(--font-display); line-height:1.2; color: var(--forest); font-weight:500; }
h1 { font-size: var(--text-4xl); font-weight:400; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
p  { color: var(--ink); line-height:1.75; }
em { font-style: italic; color: var(--raspberry); }
strong { font-weight:600; color: var(--charcoal); }

.prose { max-width: 68ch; }
.prose h2 { margin: 2.5rem 0 1rem; }
.prose h3 { margin: 2rem 0 .75rem; }
.prose p  { margin-bottom: 1.25rem; }
.prose ul,.prose ol { margin: 1rem 0 1.25rem 1.5rem; }
.prose li { margin-bottom: .5rem; }
.prose hr { border:none; border-top:1px solid var(--border); margin: 2.5rem 0; }
.prose blockquote {
  border-left: 4px solid var(--lemon);
  margin: 2rem 0; padding: 1rem 1.5rem;
  background: var(--vanilla);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-family: var(--font-display); font-size: var(--text-lg);
  font-style: italic; color: var(--forest);
}
.prose a {
  position:relative; color: var(--raspberry); text-decoration:none;
  transition: color var(--transition);
}
.prose a::after {
  content:''; position:absolute; left:0; bottom:-2px; width:100%; height:1.5px;
  background: currentColor; transform: scaleX(0); transform-origin:right;
  transition: transform .3s var(--ease-out);
}
.prose a:hover::after { transform: scaleX(1); transform-origin:left; }

/* ── Layout ── */
.container { width:100%; max-width: var(--container-max); margin-inline:auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--space-24); }
.section--tinted { background: var(--vanilla); }
.centered { text-align:center; }
.centered .section-body { margin-inline:auto; }
.split { display:flex; align-items:flex-end; justify-content:space-between; gap: var(--space-6); flex-wrap:wrap; }

.section-tag {
  display:inline-block; font-size: var(--text-xs); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color: var(--raspberry);
  margin-bottom: var(--space-4);
}
.section-heading { font-size: clamp(var(--text-2xl),4vw,var(--text-3xl)); margin-bottom: var(--space-5); }
.section-body { font-size: var(--text-md); color: var(--muted); max-width: 58ch; margin-bottom: var(--space-8); }
.section-intro { margin-bottom: var(--space-12); }

/* ============================================================
   BUTTONS — pop on hover
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap: var(--space-2);
  padding: .8rem 1.9rem;
  border-radius: var(--radius-full);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight:500;
  letter-spacing:.02em; text-decoration:none; cursor:pointer;
  border: 2px solid transparent;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease-bounce), box-shadow .22s var(--ease),
              background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.btn:active { transform: translateY(-1px) scale(.97); box-shadow: var(--shadow-md); }

.btn--primary { background: var(--forest); color: var(--white); border-color: var(--forest); }
.btn--primary:hover { background: var(--forest-mid); border-color: var(--forest-mid); }

.btn--accent { background: var(--raspberry); color: var(--white); border-color: var(--raspberry); }
.btn--accent:hover { background: #A5164E; border-color: #A5164E; }

.btn--outline { background: transparent; color: var(--forest); border-color: var(--forest); }
.btn--outline:hover { background: var(--forest); color: var(--white); }

.btn--ghost { background: transparent; color: var(--raspberry); border-color: transparent; box-shadow:none; }
.btn--ghost:hover { background: var(--raspberry-soft); box-shadow: var(--shadow-md); }

.btn--inverse { background: var(--white); color: var(--forest); border-color: var(--white); }
.btn--large { padding: 1rem 2.3rem; font-size: var(--text-base); }
.btn--small { padding: .5rem 1.2rem; font-size: var(--text-xs); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-header {
  position: fixed; top:0; left:0; right:0; z-index: var(--z-sticky);
  background: rgba(253,251,245,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.site-header.is-scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }

.nav-container {
  display:flex; align-items:center; justify-content:space-between; gap: var(--space-5);
  max-width: var(--container-max); margin-inline:auto;
  padding-inline: var(--gutter); height: 76px;
}
.nav-logo { display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.nav-logo-img {
  height: 36px; width:auto;
  transition: transform .3s var(--ease-bounce), filter var(--transition);
}
.nav-logo:hover .nav-logo-img { transform: scale(1.05); }

.nav-links { display:flex; align-items:center; gap: var(--space-1); list-style:none; }
.nav-link {
  display:inline-block;
  font-size: var(--text-sm); font-weight:500; color: var(--ink);
  text-decoration:none; padding: .45rem .8rem;
  border-radius: var(--radius-full);
  transition: background var(--transition), color var(--transition),
              transform .2s var(--ease-bounce), box-shadow var(--transition);
}
.nav-link:hover {
  background: var(--raspberry-soft); color: var(--raspberry);
  transform: translateY(-2px); box-shadow: var(--shadow-sm);
}
.nav-link.is-active { background: var(--forest-soft); color: var(--forest); }

.nav-cta {
  display:inline-flex; align-items:center;
  padding: .55rem 1.3rem; background: var(--forest); color: var(--white) !important;
  border-radius: var(--radius-full); font-size: var(--text-sm); font-weight:500;
  text-decoration:none; box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease-bounce), box-shadow var(--transition), background var(--transition);
}
.nav-cta:hover { background: var(--raspberry); transform: translateY(-3px); box-shadow: var(--shadow-pop); }

.nav-hamburger { display:none; flex-direction:column; justify-content:space-between; width:24px; height:18px; background:none; border:none; cursor:pointer; }
.hamburger-line { display:block; width:100%; height:2px; background: var(--forest); border-radius:2px; transition: all .3s var(--ease); }
.nav-hamburger.is-open .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-hamburger.is-open .hamburger-line:nth-child(2) { opacity:0; }
.nav-hamburger.is-open .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-menu {
  position: fixed; top:76px; left:0; right:0;
  background: var(--cream); border-bottom:1px solid var(--border);
  padding: var(--space-6) var(--gutter) var(--space-8);
  transform: translateY(-115%); opacity:0;
  transition: transform .35s var(--ease-out), opacity .3s;
  z-index: var(--z-sticky); box-shadow: var(--shadow-lg);
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}
.mobile-menu.is-open { transform: translateY(0); opacity:1; }
.mobile-nav-links { display:flex; flex-direction:column; gap: var(--space-1); list-style:none; }
.mobile-nav-link {
  display:block; padding: var(--space-3) var(--space-4);
  font-family: var(--font-display); font-size: var(--text-lg);
  color: var(--charcoal); text-decoration:none;
  border-radius: var(--radius-md);
  transition: background var(--transition), color var(--transition), padding-left var(--transition);
}
.mobile-nav-link:hover { background: var(--raspberry-soft); color: var(--raspberry); padding-left: var(--space-6); }
.mobile-nav-cta {
  display:inline-block; margin-top: var(--space-5); padding: .8rem 2rem;
  background: var(--forest); color: var(--white); border-radius: var(--radius-full);
  font-weight:500; text-decoration:none;
}
.mobile-menu-contact { margin-top: var(--space-5); padding-top: var(--space-5); border-top:1px solid var(--border); font-size: var(--text-sm); color: var(--muted); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position:relative; min-height: calc(100vh - 76px); display:flex; align-items:center; overflow:hidden; padding-block: var(--space-20); }
.hero-bg { position:absolute; inset:0; pointer-events:none; }
.hero-bg__circle { position:absolute; border-radius:50%; }
.hero-bg__circle--1 { width:580px; height:580px; top:-190px; right:-110px; background: var(--grapefruit); opacity:.10; }
.hero-bg__circle--2 { width:300px; height:300px; bottom:4%; left:4%; background: var(--lime); opacity:.10; }
.hero-bg__leaf { position:absolute; border-radius:50% 0; }
.hero-bg__leaf--1 { width:270px; height:270px; top:12%; right:16%; background: var(--lemon); opacity:.12; transform: rotate(45deg); }
.hero-bg__leaf--2 { width:160px; height:160px; bottom:12%; right:38%; background: var(--raspberry); opacity:.08; transform: rotate(-30deg); }

.hero-inner { display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap: var(--space-16); position:relative; z-index:1; }
.hero-eyebrow {
  display:inline-block; font-size: var(--text-xs); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color: var(--raspberry);
  padding: .45rem 1.1rem; background: var(--raspberry-soft);
  border-radius: var(--radius-full); margin-bottom: var(--space-6);
}
.hero-heading { font-size: clamp(2.4rem,5vw,var(--text-4xl)); font-weight:400; line-height:1.12; color: var(--forest); margin-bottom: var(--space-6); }
.hero-heading em { font-style:italic; color: var(--raspberry); }
.hero-subtext { font-size: var(--text-md); color: var(--muted); max-width: 48ch; margin-bottom: var(--space-10); line-height:1.8; }
.hero-actions { display:flex; flex-wrap:wrap; gap: var(--space-4); }

.hero-image { position:relative; display:flex; justify-content:center; }
.hero-mascot {
  width:100%; max-width: 340px; height:auto;
  filter: drop-shadow(0 16px 36px rgba(20,64,47,.14));
  transition: transform .5s var(--ease-bounce);
}
.hero-mascot:hover { transform: translateY(-10px) rotate(-2deg); }

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar { background: var(--forest); padding-block: var(--space-10); }
.trust-list { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-4); list-style:none; }
.trust-item {
  text-align:center; padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-lg);
  transition: background var(--transition), transform .25s var(--ease-bounce), box-shadow var(--transition);
}
.trust-item:hover { background: rgba(255,255,255,.08); transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.trust-number {
  display:block; font-family: var(--font-display); font-size: var(--text-lg);
  font-weight:500; color: var(--white); line-height:1.3; margin-bottom: var(--space-2);
}
.trust-label { font-size: var(--text-xs); color: rgba(255,255,255,.7); letter-spacing:.05em; text-transform:uppercase; }

/* ============================================================
   ABOUT PREVIEW
   ============================================================ */
.about-preview__grid { display:grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-16); align-items:center; }
.about-quote-block {
  background: var(--forest); border-radius: var(--radius-2xl);
  padding: var(--space-12) var(--space-10); position:relative;
  box-shadow: var(--shadow-md);
  transition: transform .3s var(--ease-bounce), box-shadow var(--transition);
}
.about-quote-block:hover { transform: translateY(-5px); box-shadow: var(--shadow-pop); }
.about-quote-block::before {
  content:'\201C'; position:absolute; top:-.4rem; left: var(--space-8);
  font-family: var(--font-display); font-size:7rem; color: rgba(255,255,255,.14); line-height:1;
}
.about-quote-block blockquote {
  font-family: var(--font-display); font-size: var(--text-lg); font-style:italic;
  color: rgba(255,255,255,.93); line-height:1.65; position:relative;
  border:none; background:none; padding:0; margin:0 0 var(--space-5);
}
.about-quote-block cite { display:block; font-size: var(--text-sm); color: var(--sage-light); font-style:normal; letter-spacing:.04em; }

/* ============================================================
   SERVICE CARDS — rounded, pop on hover
   ============================================================ */
.services-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); }
.service-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease-bounce), box-shadow .3s var(--ease), border-color var(--transition);
}
.service-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--raspberry), var(--lemon));
  transform: scaleX(0); transform-origin:left;
  transition: transform .35s var(--ease-out);
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-pop); border-color: var(--grapefruit); }
.service-card:hover::before { transform: scaleX(1); }

.service-card__icon {
  width:62px; height:62px; border-radius: var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: var(--space-5);
  transition: transform .3s var(--ease-bounce), box-shadow var(--transition);
}
.service-card__icon svg { width:26px; height:26px; }
.service-card:nth-child(6n+1) .service-card__icon { background: var(--grapefruit-soft); color: var(--raspberry); }
.service-card:nth-child(6n+2) .service-card__icon { background: var(--lime-soft);       color: #6F7A2C; }
.service-card:nth-child(6n+3) .service-card__icon { background: var(--lemon-soft);      color: #A8720F; }
.service-card:nth-child(6n+4) .service-card__icon { background: var(--raspberry-soft);  color: var(--raspberry); }
.service-card:nth-child(6n+5) .service-card__icon { background: var(--forest-soft);     color: var(--forest); }
.service-card:nth-child(6n+6) .service-card__icon { background: var(--grapefruit-soft); color: var(--raspberry); }
.service-card:hover .service-card__icon { transform: translateY(-4px) scale(1.09); box-shadow: var(--shadow-md); }

/* Word wrapping — fixes ragged card text */
.service-card__title {
  font-size: var(--text-lg); color: var(--forest);
  margin-bottom: var(--space-3); line-height:1.3;
  text-wrap: balance;
  hyphens: none;
}
.service-card__body {
  font-size: var(--text-sm); color: var(--muted); line-height:1.75;
  margin-bottom: var(--space-5); flex:1;
  text-wrap: pretty;
  hyphens: none;
  overflow-wrap: break-word;
}
.service-card__link {
  position:relative; display:inline-block; align-self:flex-start;
  font-size: var(--text-sm); font-weight:500; color: var(--raspberry);
  text-decoration:none; transition: color var(--transition), transform var(--transition);
}
.service-card__link::after {
  content:''; position:absolute; left:0; bottom:-2px; width:100%; height:1.5px;
  background: currentColor; transform: scaleX(0); transform-origin:right;
  transition: transform .3s var(--ease-out);
}
.service-card__link:hover { transform: translateX(3px); }
.service-card__link:hover::after { transform: scaleX(1); transform-origin:left; }

/* Headings in general get balanced wrapping */
h1,h2,h3,h4,.section-heading,.hero-heading,.page-hero__title { text-wrap: balance; }
p,.section-body,.hero-subtext { text-wrap: pretty; }

/* ============================================================
   PROCESS
   ============================================================ */
.process-steps { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6); list-style:none; }
.process-step { text-align:center; padding: var(--space-5); border-radius: var(--radius-xl); transition: background var(--transition), transform .3s var(--ease-bounce); }
.process-step:hover { background: var(--vanilla); transform: translateY(-4px); }
.process-step__number {
  width:64px; height:64px; border-radius:50%;
  background: var(--forest); color: var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size: var(--text-lg);
  margin: 0 auto var(--space-5);
  box-shadow: 0 0 0 6px var(--cream), var(--shadow-sm);
  transition: transform .3s var(--ease-bounce), background var(--transition);
}
.process-step:hover .process-step__number { transform: scale(1.08); background: var(--raspberry); }
.process-step__title { font-family: var(--font-display); font-size: var(--text-md); color: var(--forest); margin-bottom: var(--space-3); }
.process-step p { font-size: var(--text-sm); color: var(--muted); line-height:1.65; }

/* ============================================================
   BLOG CARDS
   ============================================================ */
.blog-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); }
.blog-grid--full { grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); }
.blog-card {
  background: var(--white); border:1.5px solid var(--border);
  border-radius: var(--radius-xl); padding: var(--space-7);
  display:flex; flex-direction:column; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease-bounce), box-shadow .3s var(--ease), border-color var(--transition);
}
.blog-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-pop); border-color: var(--grapefruit); }
.blog-card__meta { display:flex; gap: var(--space-3); align-items:center; margin-bottom: var(--space-4); flex-wrap:wrap; }
.blog-card__date { font-size: var(--text-xs); color: var(--muted); }
.blog-card__tag { font-size: var(--text-xs); font-weight:600; padding:.2rem .7rem; background: var(--lime-soft); color:#6F7A2C; border-radius: var(--radius-full); }
.blog-card__title { font-size: var(--text-xl); margin-bottom: var(--space-3); line-height:1.3; }
.blog-card__link { text-decoration:none; color: var(--forest); transition: color var(--transition); }
.blog-card__link:hover { color: var(--raspberry); }
.blog-card__summary { font-size: var(--text-sm); color: var(--muted); line-height:1.75; margin-bottom: var(--space-5); flex:1; }
.blog-card__read-more {
  position:relative; display:inline-block; align-self:flex-start;
  font-size: var(--text-sm); font-weight:500; color: var(--raspberry); text-decoration:none;
  transition: transform var(--transition);
}
.blog-card__read-more::after {
  content:''; position:absolute; left:0; bottom:-2px; width:100%; height:1.5px;
  background: currentColor; transform: scaleX(0); transform-origin:right;
  transition: transform .3s var(--ease-out);
}
.blog-card__read-more:hover { transform: translateX(3px); }
.blog-card__read-more:hover::after { transform: scaleX(1); transform-origin:left; }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner { background: var(--forest); position:relative; overflow:hidden; padding-block: var(--space-24); text-align:center; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
.cta-banner__bg { position:absolute; inset:0; background: radial-gradient(ellipse at 60% 50%, rgba(217,126,154,.22), transparent 70%); }
.cta-banner__inner { position:relative; z-index:1; }
.cta-banner__heading { font-size: clamp(var(--text-2xl),4vw,var(--text-3xl)); font-weight:400; color: var(--white); margin-bottom: var(--space-5); }
.cta-banner__body { font-size: var(--text-md); color: rgba(255,255,255,.78); max-width:52ch; margin:0 auto var(--space-10); }
.cta-banner__actions { display:flex; flex-wrap:wrap; gap: var(--space-4); justify-content:center; }

/* ============================================================
   PAGE HERO
   ============================================================ */
.page-hero {
  background: var(--vanilla); border-bottom:1px solid var(--border);
  padding-block: var(--space-12) var(--space-10);
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}
.page-hero__title { font-size: clamp(var(--text-2xl),4vw,var(--text-3xl)); font-weight:400; margin-top: var(--space-3); }
.page-hero__subtitle { font-size: var(--text-md); color: var(--muted); margin-top: var(--space-4); max-width:58ch; }
.breadcrumb ol { display:flex; align-items:center; gap: var(--space-2); list-style:none; font-size: var(--text-xs); letter-spacing:.06em; text-transform:uppercase; color: var(--muted); }
.breadcrumb a { color: var(--raspberry); text-decoration:none; transition: opacity var(--transition); }
.breadcrumb a:hover { opacity:.7; }
.breadcrumb li:not(:first-child)::before { content:'/'; margin-right: var(--space-2); }

/* ============================================================
   MASCOT
   ============================================================ */
.mascot { display:block; width:100%; height:auto; transition: transform .45s var(--ease-bounce); }
.mascot:hover { transform: translateY(-8px) rotate(-3deg); }

.mascot-block {
  display:flex; align-items:center; gap: var(--space-10);
  background: var(--vanilla); border-radius: var(--radius-2xl);
  padding: var(--space-10); margin: var(--space-16) 0;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform .3s var(--ease-bounce);
}
.mascot-block:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
/* Fixed-width image prevents the wrapping/overlap problem */
.mascot-block__img { flex: 0 0 150px; width:150px; max-width:150px; }
.mascot-block__text { flex:1 1 auto; min-width:0; }
.mascot-block__text h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.mascot-block__text p  { color: var(--muted); margin-bottom: var(--space-5); }
@media (max-width:700px) {
  .mascot-block { flex-direction:column; text-align:center; padding: var(--space-8); gap: var(--space-6); }
  .mascot-block__img { flex:0 0 auto; width:130px; }
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display:grid; grid-template-columns: 1fr 1.35fr; gap: var(--space-16); align-items:start; }
.contact-info { position:sticky; top: calc(76px + var(--space-8)); }
.contact-info h2 { margin-bottom: var(--space-5); }
.contact-info p { color: var(--muted); margin-bottom: var(--space-8); }
.contact-detail { display:flex; align-items:flex-start; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); transition: background var(--transition); }
.contact-detail:hover { background: var(--vanilla); }
.contact-detail__label { font-size: var(--text-xs); font-weight:600; letter-spacing:.09em; text-transform:uppercase; color: var(--raspberry); min-width:84px; padding-top:2px; }
.contact-detail__value { color: var(--charcoal); font-size: var(--text-sm); line-height:1.7; }
.contact-detail__value a { color: var(--charcoal); text-decoration:none; transition: color var(--transition); }
.contact-detail__value a:hover { color: var(--raspberry); }

.contact-form {
  background: var(--white); border-radius: var(--radius-2xl);
  padding: var(--space-10); border:1.5px solid var(--border); box-shadow: var(--shadow-md);
}
.form-group { margin-bottom: var(--space-6); }
.form-group label { display:block; font-size: var(--text-sm); font-weight:500; color: var(--charcoal); margin-bottom: var(--space-2); }
.required-mark { color: var(--raspberry); margin-left:2px; }
.form-control {
  width:100%; padding:.8rem 1.1rem;
  font-family: var(--font-body); font-size: var(--text-base); color: var(--charcoal);
  background: var(--cream); border:1.5px solid var(--border); border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form-control:hover { border-color: var(--grapefruit); }
.form-control:focus { outline:none; border-color: var(--raspberry); box-shadow: var(--shadow-glow); background: var(--white); }
.form-control::placeholder { color: #B9B1A0; }
textarea.form-control { resize:vertical; min-height:150px; }
select.form-control { appearance:none; cursor:pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236E736C' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position: right 1.1rem center; background-size:12px; padding-right:2.6rem; }
.form-note { font-size: var(--text-xs); color: var(--muted); margin-top: var(--space-2); line-height:1.5; }
.form-error { display:none; font-size: var(--text-xs); color: var(--error); margin-top: var(--space-2); font-weight:500; }
.form-control.has-error { border-color: var(--error); }
.form-control.has-error + .form-error { display:block; }
.form-status { padding: var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); display:none; margin-bottom: var(--space-5); }
.form-status.is-success { background: var(--lime-soft); color:#5E6725; border:1px solid rgba(165,178,78,.4); }
.form-status.is-error   { background: var(--raspberry-soft); color: var(--raspberry); border:1px solid rgba(194,24,91,.25); }
.form-status.is-visible { display:block; }
.form-honeypot { position:absolute; left:-9999px; visibility:hidden; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--forest); color: rgba(255,255,255,.82); padding-block: var(--space-16); }
.footer-grid {
  display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-10);
  max-width: var(--container-max); margin-inline:auto;
  padding-inline: var(--gutter); padding-bottom: var(--space-10);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-logo-img { height:48px; width:auto; margin-bottom: var(--space-5); opacity:.95; }
.footer-practice-name { font-family: var(--font-display); font-size: var(--text-lg); color: var(--white); margin-bottom: var(--space-3); }
.footer-tagline { font-size: var(--text-sm); color: rgba(255,255,255,.6); margin-bottom: var(--space-6); line-height:1.65; }
.footer-crisis { font-size: var(--text-xs); color: rgba(255,255,255,.55); padding: var(--space-4); border:1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg); line-height:1.7; }
.footer-crisis strong { color: rgba(255,255,255,.85); }
.footer-heading { font-family: var(--font-body); font-size: var(--text-xs); font-weight:600; letter-spacing:.11em; text-transform:uppercase; color: rgba(255,255,255,.55); margin-bottom: var(--space-5); }
.footer-links { list-style:none; display:flex; flex-direction:column; gap: var(--space-2); }
.footer-link {
  position:relative; display:inline-block;
  font-size: var(--text-sm); color: rgba(255,255,255,.72); text-decoration:none;
  transition: color var(--transition), transform var(--transition);
}
.footer-link:hover { color: var(--grapefruit); transform: translateX(4px); }
.footer-address { font-style:normal; }
.footer-address p { color: rgba(255,255,255,.72); font-size: var(--text-sm); line-height:1.75; margin-bottom: var(--space-3); }
.footer-hours dt,.footer-hours dd { font-size: var(--text-sm); color: rgba(255,255,255,.72); line-height:1.6; }
.footer-hours dt { color: rgba(255,255,255,.9); font-weight:600; }
.footer-hours dd { margin-bottom: var(--space-2); }

/* Social — clearly visible pill buttons */
.footer-social { display:flex; flex-wrap:wrap; gap: var(--space-3); margin-top: var(--space-5); }
.social-btn {
  display:inline-flex; align-items:center; gap: var(--space-2);
  padding: .55rem 1.1rem;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.22);
  border-radius: var(--radius-full);
  color: var(--white); text-decoration:none;
  font-size: var(--text-sm); font-weight:500;
  transition: transform .22s var(--ease-bounce), background var(--transition),
              border-color var(--transition), box-shadow var(--transition);
}
.social-btn svg { width:18px; height:18px; fill: currentColor; }
.social-btn:hover {
  background: var(--raspberry); border-color: var(--raspberry);
  transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

.footer-bottom { max-width: var(--container-max); margin-inline:auto; padding-inline: var(--gutter); padding-top: var(--space-8); }
.footer-legal { font-size: var(--text-xs); color: rgba(255,255,255,.45); margin-bottom: var(--space-3); }
.footer-disclaimer { font-size: var(--text-xs); color: rgba(255,255,255,.32); line-height:1.65; }

/* ============================================================
   PAGINATION + MISC
   ============================================================ */
.pagination { display:flex; align-items:center; justify-content:center; gap: var(--space-5); margin-top: var(--space-12); }
.pagination__info { font-size: var(--text-sm); color: var(--muted); }
.empty-state { text-align:center; color: var(--muted); padding: var(--space-16) 0; }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal-up,.reveal-left,.reveal-right { opacity:0; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: var(--delay,0s); }
.reveal-up { transform: translateY(30px); }
.reveal-left { transform: translateX(-36px); }
.reveal-right { transform: translateX(36px); }
.reveal-up.is-visible,.reveal-left.is-visible,.reveal-right.is-visible { opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px) {
  .hero-inner { grid-template-columns:1fr; text-align:center; }
  .hero-text { order:2; }
  .hero-image { order:1; max-width:280px; margin-inline:auto; }
  .hero-subtext { margin-inline:auto; }
  .hero-actions { justify-content:center; }
  .about-preview__grid { grid-template-columns:1fr; }
  .about-quote-block { max-width:560px; }
  .services-grid { grid-template-columns: repeat(2,1fr); }
  .process-steps { grid-template-columns: repeat(2,1fr); }
  .contact-grid { grid-template-columns:1fr; }
  .contact-info { position:static; }
  .footer-grid { grid-template-columns:1fr 1fr; row-gap: var(--space-8); }
  .footer-col--brand { grid-column:1 / -1; }
}
@media (max-width:820px) {
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
}
@media (max-width:768px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  .trust-list { grid-template-columns: repeat(2,1fr); }
  .services-grid,.blog-grid,.process-steps { grid-template-columns:1fr; }
  .contact-form { padding: var(--space-7); }
  .footer-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .hero { padding-block: var(--space-12); }
  .section { padding-block: var(--space-16); }
  .trust-list { grid-template-columns:1fr; }
  .hero-actions,.cta-banner__actions { flex-direction:column; align-items:stretch; }
  .btn { width:100%; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { transition:none !important; animation:none !important; }
  .reveal-up,.reveal-left,.reveal-right { opacity:1; transform:none; }
  .btn:hover,.service-card:hover,.blog-card:hover,.mascot:hover,
  .nav-link:hover,.trust-item:hover,.social-btn:hover { transform:none !important; }
  html { scroll-behavior:auto; }
}


/* ══════════════════════════════════════════════════════════
   COLOUR ROLES
   ══════════════════════════════════════════════════════════ */
/* ── Text: only Forest and Raspberry ── */
h1, h2, h3, h4,
.section-heading, .hero-heading, .page-hero__title,
.rr-heading, .rr-hero__title, .gr-title,
.service-card__title, .blog-card__link,
.process-step__title, .footer-practice-name { color: var(--forest); }

a, .prose a, .service-card__link, .blog-card__read-more,
.section-tag, .hero-eyebrow, .rr-event__when,
.contact-detail__label, .breadcrumb a { color: var(--raspberry); }

/* Small text in raspberry gets the deeper ink for legibility */
.section-tag, .hero-eyebrow, .rr-event__when,
.contact-detail__label, .blog-card__tag { color: var(--raspberry-ink); }

/* ── Accents that previously carried text, now using ink ── */
.blog-card__tag  { color: var(--lime-ink);  background: var(--lime-soft); }
.gr-tag          { color: var(--lime-ink);  background: var(--lime-soft); }
.gr-complete p   { color: var(--lime-ink); }
.gr-worry-msg    { color: var(--lime-ink); }
.rr-note p       { color: var(--ink); }

/* ── Lemon: decoration only, never text ── */
.rr-block .rr-heading::after { background: var(--lemon); }
.prose blockquote::before    { background: var(--lemon); }
.service-card::before        { background: linear-gradient(90deg, var(--raspberry), var(--lemon)); }

/* ── Icon circles: tinted background, ink foreground ── */
.service-card:nth-child(6n+1) .service-card__icon { background: var(--grapefruit-soft); color: var(--grapefruit-ink); }
.service-card:nth-child(6n+2) .service-card__icon { background: var(--lime-soft);       color: var(--lime-ink); }
.service-card:nth-child(6n+3) .service-card__icon { background: var(--lemon-soft);      color: var(--lemon-ink); }
.service-card:nth-child(6n+4) .service-card__icon { background: var(--raspberry-soft);  color: var(--raspberry); }
.service-card:nth-child(6n+5) .service-card__icon { background: var(--forest-soft);     color: var(--forest); }
.service-card:nth-child(6n+6) .service-card__icon { background: var(--grapefruit-soft); color: var(--grapefruit-ink); }

/* ── Quieter decorative blobs ──
   At full opacity these compete with the content. */
.hero-bg__circle--1 { background: var(--grapefruit); opacity: .09; }
.hero-bg__circle--2 { background: var(--lime);       opacity: .09; }
.hero-bg__leaf--1   { background: var(--lemon);      opacity: .10; }
.hero-bg__leaf--2   { background: var(--raspberry);  opacity: .06; }
.rr-blob--1 { opacity: .10; }
.rr-blob--2 { opacity: .11; }

/* ── Focus ring: always visible, always raspberry ── */
:focus-visible { outline: 3px solid var(--raspberry); outline-offset: 3px; }


/* ══════════════════════════════════════════════════════════
   DESKTOP TYPOGRAPHY
   ══════════════════════════════════════════════════════════ */
/* ============================================================
   TYPOGRAPHY — desktop readability
   APPEND to the END of static/css/style.css

   ── THE PROBLEM ────────────────────────────────────────────
   Body text is 16px at every width. On a phone held 30cm from
   your face that reads comfortably. On a 27" monitor at 60cm
   it's too small, which is why you're zooming.

   Cambria compounds it: it has a modest x-height, so it reads
   roughly one size smaller than its nominal value.

   ── THE FIX ────────────────────────────────────────────────
   Scale the ROOT font size with the viewport. Because almost
   everything on the site is sized in rem, raising the root
   raises the whole scale proportionally — headings, spacing,
   buttons, all of it — with one declaration.

   Mobile is unchanged at 16px. It grows from 1024px upward,
   reaching 18px on a wide screen.
   ============================================================ */

html {
  /* 16px up to ~1024px, then scales to 18px by ~1800px */
  font-size: clamp(100%, 0.875rem + 0.28vw, 112.5%);
}

/* ── Body copy gets a slightly longer measure on wide screens ──
   Larger text needs more characters per line, not fewer. */
@media (min-width: 1280px) {
  .section-body   { max-width: 60ch; }
  .hero-subtext   { max-width: 52ch; }
  .prose          { max-width: 70ch; }
  .rr-body        { max-width: 64ch; }
  .rr-lede        { max-width: 56ch; }
}

/* ── Line height: generous for body, tighter for headings ── */
body { line-height: 1.75; }
p, li { line-height: 1.8; }
h1, h2, h3, h4 { line-height: 1.2; }

/* ── Cambria sits small — nudge key reading surfaces up ── */
.prose p, .prose li { font-size: 1.0625rem; }
.section-body       { font-size: 1.125rem; }
.hero-subtext       { font-size: 1.15rem; }
.service-card__body { font-size: 0.975rem; }
.blog-card__summary { font-size: 0.975rem; }
.contact-detail__value { font-size: 0.975rem; }

/* ── Headings scale fluidly so they stay proportionate ── */
.hero-heading       { font-size: clamp(2.4rem, 4.2vw, 4rem); }
.section-heading    { font-size: clamp(1.9rem, 3.2vw, 2.9rem); }
.page-hero__title   { font-size: clamp(1.9rem, 3.2vw, 2.9rem); }
.cta-banner__heading{ font-size: clamp(1.9rem, 3.2vw, 2.9rem); }
.service-card__title{ font-size: clamp(1.1rem, 1.3vw, 1.3rem); }
.blog-card__title   { font-size: clamp(1.2rem, 1.6vw, 1.5rem); }

/* ── Footer text was the smallest on the site ── */
.footer-link, .footer-address p,
.footer-hours dt, .footer-hours dd { font-size: 0.9375rem; }
.footer-tagline { font-size: 0.9375rem; }
.footer-legal, .footer-disclaimer { font-size: 0.8125rem; }

/* ── Form labels and inputs ── */
.form-group label { font-size: 0.9375rem; }
.form-control     { font-size: 1.0625rem; }   /* ≥16px stops iOS zooming on focus */
.form-note        { font-size: 0.8125rem; }

/* ── Navigation ── */
.nav-link, .nav-cta { font-size: 0.9375rem; }

/* ── Very wide screens: stop the container sprawling ──
   Long lines are harder to read than small text. */
@media (min-width: 1600px) {
  .container { max-width: 1280px; }
}


/* ══════════════════════════════════════════════════════════
   LOGO
   ══════════════════════════════════════════════════════════ */
/* ============================================================
   LOGO SIZING — append to the END of static/css/style.css
   The new wordmark is wider and lower than the previous one,
   so it needs a different height to read at the same weight.
   ============================================================ */

.nav-logo-img {
  height: 32px;
  width: auto;
  transition: transform .4s var(--ease-bounce), filter .4s var(--ease);
}
@media (min-width: 1024px) { .nav-logo-img { height: 36px; } }
@media (max-width: 480px)  { .nav-logo-img { height: 28px; } }

.nav-logo:hover .nav-logo-img,
.nav-logo:focus-visible .nav-logo-img {
  transform: scale(1.03);
  filter: drop-shadow(0 0 10px rgba(194, 24, 91, 0.26));
}

.footer-logo-img {
  height: 42px;
  width: auto;
  margin-bottom: var(--space-5);
  opacity: .95;
}
@media (max-width: 480px) { .footer-logo-img { height: 36px; } }

@media (prefers-reduced-motion: reduce) {
  .nav-logo-img { transition: none !important; transform: none !important; }
}


/* ══════════════════════════════════════════════════════════
   ROUNDED CALLOUTS
   ══════════════════════════════════════════════════════════ */
/* ============================================================
   APPEND to the END of static/css/style.css

   Replaces every hard `border-left` accent with a fully rounded
   box and an INSET accent bar. The colour cue survives; the
   square corner doesn't.

   The technique: the box gets a full border-radius, and a
   ::before pseudo-element sits a few pixels inside the left
   edge with its own radius. Because it's inset rather than
   flush, both the box and the bar can be rounded.
   ============================================================ */

/* ── Shared callout treatment ──────────────────────────── */
.rr-note,
.gr-scan-cue,
.prose blockquote,
.footer-crisis,
.gr-complete,
.form-status {
  position: relative;
  border-left: none !important;
  border-radius: var(--radius-xl) !important;
  padding-left: clamp(2rem, 4vw, 2.75rem) !important;
}

/* The inset accent bar */
.rr-note::before,
.gr-scan-cue::before,
.prose blockquote::before,
.footer-crisis::before {
  content: '';
  position: absolute;
  left: 0.875rem;
  top: 1.25rem;
  bottom: 1.25rem;
  width: 4px;
  border-radius: var(--radius-full);
  background: currentColor;
  opacity: .5;
}

/* ── Reading Room note ─────────────────────────────────── */
.rr-note {
  background: var(--white);
  border: 1.5px solid var(--border);
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.75rem, 4vw, 2.25rem);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform .3s var(--ease-bounce);
}
.rr-note:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.rr-note::before { background: var(--lime); opacity: .85; }

/* ── Body-scan cue in the Grounding Room ──────────────── */
.gr-scan-cue {
  background: var(--raspberry-soft);
  border: 1.5px solid rgba(194,24,91,.18);
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.75rem, 4vw, 2rem);
}
.gr-scan-cue::before { background: var(--raspberry); opacity: .8; }

/* ── Markdown blockquotes ─────────────────────────────── */
.prose blockquote {
  background: var(--vanilla);
  border: 1.5px solid var(--border);
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.75rem, 4vw, 2.25rem);
  box-shadow: var(--shadow-sm);
}
.prose blockquote::before { background: var(--lemon); opacity: .9; }
.prose blockquote p:last-child { margin-bottom: 0; }

/* ── Footer crisis box ────────────────────────────────── */
.footer-crisis {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.16);
  padding: var(--space-5) var(--space-6) var(--space-5) var(--space-8);
}
.footer-crisis::before { background: var(--grapefruit); opacity: .9; left: 1rem; }

/* ── Grounding completion panel ───────────────────────── */
.gr-complete { padding: clamp(1.75rem, 4vw, 2.5rem) !important; }

/* ── Form status messages ─────────────────────────────── */
.form-status { padding: var(--space-5) var(--space-6) !important; }

/* ============================================================
   CONSISTENT ROUNDING ACROSS EVERYTHING ELSE
   ============================================================ */

/* Large surfaces */
.service-card, .blog-card, .contact-form, .about-quote-block,
.faq-item, .mascot-block, .rr-event, .gr-card, .gr-safe-card,
.cta-banner, .page-hero, .rr-hero, .rr-close {
  border-radius: var(--radius-2xl);
}
.cta-banner, .rr-close { border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; }
.page-hero, .rr-hero    { border-radius: 0 0 var(--radius-2xl) var(--radius-2xl); }

/* Medium surfaces */
.gr-row, .trust-item, .process-step, .contact-detail,
.gr-colour-stage, .gr-worry-input, .mobile-menu {
  border-radius: var(--radius-xl);
}

/* Inputs and small controls */
.form-control, .gr-entry input, .winp {
  border-radius: var(--radius-lg);
}

/* Pills — anything that should be fully round */
.btn, .nav-link, .nav-cta, .gr-tab, .gr-phase, .gr-tag,
.gr-worry-tag, .blog-card__tag, .section-tag, .hero-eyebrow,
.rr-meta__item, .rr-event__when, .social-btn, .mobile-nav-cta {
  border-radius: var(--radius-full);
}

/* Images that sit on their own */
.hero-img-frame, .about-quote-block { overflow: hidden; }

/* ── Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rr-note:hover { transform: none; }
}


/* ══════════════════════════════════════════════════════════
   MOBILE CONTACT FORM
   ══════════════════════════════════════════════════════════ */
/* ============================================================
   APPEND to the end of static/css/style.css
   Fixes the contact form overflowing its card on mobile.
   ============================================================ */

/* ── The name row ──
   min-width:0 is the important line. Grid children default to
   min-width:auto, which stops them shrinking below their content
   width — that's what pushed the fields outside the card. */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.form-row > * { min-width: 0; }

@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

/* ── Nothing escapes the card ── */
.contact-form { overflow: hidden; }
.form-control  { max-width: 100%; min-width: 0; }
.form-group    { min-width: 0; }

/* ── Tighter padding on small screens ──
   var(--space-10) each side leaves too little room for the fields. */
@media (max-width: 560px) {
  .contact-form { padding: var(--space-6) var(--space-5); border-radius: var(--radius-xl); }
  .contact-detail { padding: var(--space-3) var(--space-2); }
  .contact-detail__label { min-width: 70px; }
}

/* ── Long values wrap instead of overflowing ── */
.contact-detail__value { overflow-wrap: break-word; min-width: 0; }
.contact-detail { flex-wrap: wrap; }

/* ── Select arrow doesn't crowd the text on narrow screens ── */
@media (max-width: 400px) {
  select.form-control { padding-right: 2.2rem; background-position: right .8rem center; }
}

/* ── Belt and braces: stop any child forcing the page sideways ── */
.section, .container { overflow-x: clip; }


/* ══════════════════════════════════════════════════════════
   TABLET AND IPAD
   ══════════════════════════════════════════════════════════ */
/* ============================================================
   TABLET / iPAD FIXES
   APPEND to the END of static/css/style.css

   ── THE PROBLEM ────────────────────────────────────────────
   The hamburger menu appeared only below 820px. iPad portrait
   is 820–1024px wide, so it showed the full desktop nav: seven
   links plus a CTA button. There isn't room, so labels wrapped
   mid-phrase — "The Reading / Room", "Grounding / Tools", and
   "Book a / Conversation" inside its own button.

   Two fixes: move the hamburger up to 1100px, and stop labels
   from ever breaking mid-phrase.
   ============================================================ */

/* ── 1. Labels never break mid-phrase ── */
.nav-link,
.nav-cta,
.mobile-nav-link,
.mobile-nav-cta,
.btn {
  white-space: nowrap;
}

/* Buttons with genuinely long labels may wrap, but only
   where they're allowed to take the full width */
.btn--large { white-space: normal; }
@media (min-width: 560px) { .btn--large { white-space: nowrap; } }

/* ── 2. Hamburger from 1100px down ──
   Seven nav items plus a CTA needs more room than a tablet has. */
@media (max-width: 1100px) {
  .nav-links   { display: none; }
  .nav-hamburger { display: flex; }
}
@media (min-width: 1101px) {
  .nav-links   { display: flex; }
  .nav-hamburger { display: none; }
}

/* ── 3. Tighter nav between 1101 and 1300px ──
   It fits at this range, but only just. */
@media (min-width: 1101px) and (max-width: 1300px) {
  .nav-links { gap: 0; }
  .nav-link  { padding: .4rem .6rem; font-size: .875rem; }
  .nav-cta   { padding: .5rem 1rem; font-size: .875rem; }
  .nav-logo-img { height: 30px; }
}

/* ── 4. Mobile menu is now used on tablets too ──
   Give it room to breathe at that size. */
@media (min-width: 640px) and (max-width: 1100px) {
  .mobile-menu { padding: var(--space-8) var(--gutter) var(--space-10); }
  .mobile-nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-6);
  }
  .mobile-nav-cta { grid-column: 1 / -1; justify-self: start; }
  .mobile-nav-link { font-size: var(--text-lg); }
}

/* ── 5. Tablet grid adjustments ── */
@media (min-width: 700px) and (max-width: 1100px) {
  /* Two columns reads better than three at this width */
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid     { grid-template-columns: repeat(2, 1fr); }
  .trust-list    { grid-template-columns: repeat(4, 1fr); }
  .trust-number  { font-size: var(--text-base); }
  .process-steps { grid-template-columns: repeat(2, 1fr); }

  /* Footer: two columns rather than four cramped ones */
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-10); }
  .footer-col--brand { grid-column: 1 / -1; }

  /* Hero stacks — side by side is too tight here */
  .hero-inner { grid-template-columns: 1fr; text-align: center; gap: var(--space-10); }
  .hero-text  { order: 2; }
  .hero-image { order: 1; max-width: 240px; margin-inline: auto; }
  .hero-subtext { margin-inline: auto; }
  .hero-actions { justify-content: center; }
}

/* ── 6. Grounding Room on tablets ──
   The split layout starts at 900px; between 900 and 1100 the
   control column gets cramped, so give the visual less room. */
@media (min-width: 900px) and (max-width: 1100px) {
  .gr-card--split {
    grid-template-columns: minmax(260px, .9fr) minmax(240px, 1fr);
    gap: var(--space-6);
    padding: var(--space-6);
  }
  .gr-phases { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .gr-instr  { font-size: 1.25rem; }
  .gr-count  { font-size: 2.75rem; }
}

/* ── 7. Colour stage looked empty before starting ──
   A faint baseline gives the eye something to read. */
.gr-colour-stage { position: relative; }
.gr-colour-stage::after {
  content: '';
  position: absolute;
  left: 12%; right: 12%; bottom: 0;
  height: 2px;
  background: var(--border);
  border-radius: var(--radius-full);
  opacity: .7;
}

/* ── 8. About / Services pages on tablets ── */
@media (min-width: 700px) and (max-width: 1100px) {
  .rr-events { grid-template-columns: 1fr; }
}

/* ── 9. Stop any long word forcing horizontal scroll ── */
body { overflow-x: hidden; }
.pg-body, .rr-body, .section-body, .prose p,
.pg-card__body, .rr-event__body { overflow-wrap: break-word; }


/* ══════════════════════════════════════════════════════════
   LAYOUT: GRID AND FOOTER
   ══════════════════════════════════════════════════════════ */
/* ============================================================
   LAYOUT FIXES — append to the END of static/css/style.css
   ============================================================ */

/* ============================================================
   1. SERVICES GRID — the orphaned card

   Five cards in an auto-fit grid gave three columns, so row two
   held one card alone, then Leadership Training spanning the
   full width below it. Lopsided.

   Fix: a six-column grid. Cards 1–3 span two columns each
   (filling row one), cards 4–5 span three each (filling row
   two). Five items, two complete rows, no gaps.

   Six columns is the trick worth remembering — it's the lowest
   number divisible by both 2 and 3, so it accommodates rows of
   either without any card being orphaned.
   ============================================================ */



/* Two columns in the tablet range */




/* ============================================================
   2. CTA BANDS MERGING INTO THE FOOTER

   The closing CTA and the footer were both --forest, sitting
   directly on top of each other. They read as one continuous
   green block, so the CTA stopped looking like a call to action
   and started looking like part of the footer furniture.

   Fix: darken the footer to --forest-deep. Same colour family,
   clearly a different surface. The CTA's rounded top corners
   now actually register, and the eye separates the two.

   Darkening the footer rather than lightening the CTA keeps the
   CTA as the brighter, more prominent of the two — which is the
   right hierarchy, since it's the thing you want clicked.
   ============================================================ */

.site-footer {
  background: var(--forest-deep, #0E2D21);
  position: relative;
}

/* A hairline where the two meet, so the edge is legible even
   for someone who can't distinguish the two greens */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,.09);
}

/* The CTA bands keep their rounded top corners and now read
   as distinct panels sitting above the footer */
.cta-banner,
.pg-close,
.rr-close {
  background: var(--forest);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  position: relative;
  z-index: 1;
}

/* Slight glow at the base of the CTA so it lifts off the footer */
.cta-banner::after,
.pg-close::after,
.rr-close::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,126,154,.35), transparent);
}

/* Footer crisis box: slightly lighter now the footer is darker */
.footer-crisis { background: rgba(255,255,255,.055); }

/* ============================================================
   3. GHOST BUTTONS ON DARK BACKGROUNDS

   .btn--ghost is raspberry by default, which is close to
   invisible on forest. The inline style:color:#fff patched one
   instance; this fixes them all properly.
   ============================================================ */

.cta-banner .btn--ghost,
.pg-close .btn--ghost,
.rr-close .btn--ghost {
  color: var(--white);
  border-color: rgba(255,255,255,.35);
}
.cta-banner .btn--ghost:hover,
.pg-close .btn--ghost:hover,
.rr-close .btn--ghost:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.6);
  color: var(--white);
}


/* ══════════════════════════════════════════════════════════
   CONTACT PREFILL
   ══════════════════════════════════════════════════════════ */
/* ============================================================
   CONTACT PREFILL — append to the END of static/css/style.css
   ============================================================ */

/* Highlight the organisation field when arriving from a
   corporate link, so it reads as expected rather than optional */
.form-group.is-highlighted label { color: var(--raspberry-ink); }
.form-group.is-highlighted .form-control {
  border-color: var(--grapefruit);
  background: var(--white);
}

/* The quiet note explaining why the dropdown is pre-filled */
.form-prefill-note {
  color: var(--raspberry-ink);
  font-style: italic;
}


/* ══════════════════════════════════════════════════════════
   REVEAL FAILSAFE
   ══════════════════════════════════════════════════════════ */
/* ============================================================
   REVEAL FAILSAFE — append to the END of static/css/style.css

   ── THE PROBLEM ────────────────────────────────────────────
   .reveal-up starts at opacity: 0 and relies on JavaScript to
   add .is-visible. If main.js throws for any reason, that class
   is never added and the entire page stays invisible — which is
   exactly what happened.

   Content that only becomes visible when a script succeeds is a
   bad default, especially here. Someone on a slow connection,
   with a script blocker, or hitting a bug should still be able
   to read the page.

   ── THE FIX ────────────────────────────────────────────────
   A CSS animation reveals everything after 2 seconds regardless.
   If JavaScript works, .is-visible fires first and the animation
   never matters. If it doesn't, the page appears a moment later
   rather than never.

   Belt and braces, costing nothing.
   ============================================================ */

.reveal-up,
.reveal-left,
.reveal-right {
  /* Runs once, 2s in, and holds the end state */
  animation: reveal-failsafe 0s linear 2s forwards;
}

@keyframes reveal-failsafe {
  to { opacity: 1; transform: none; }
}

/* When JS works, this wins — it's declared later and is more specific */
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
  animation: none;
  opacity: 1;
  transform: none;
}

/* No JavaScript at all: show immediately, no delay */
html.no-js .reveal-up,
html.no-js .reveal-left,
html.no-js .reveal-right {
  opacity: 1;
  transform: none;
  animation: none;
}

/* Reduced motion: never hide anything in the first place */
@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-left, .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITY UTILITIES
   ═══════════════════════════════════════════════════════════ */

/* Visually hidden, still read by screen readers.
   Used for the sense-input labels and the "Learn more about X"
   link text. Not display:none — that hides from screen readers too. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: invisible until focused, then the first thing a
   keyboard user can reach on every page */
.skip-link {
  position: absolute;
  top: -100px; left: var(--space-4);
  z-index: 9999;
  padding: var(--space-3) var(--space-5);
  background: var(--forest);
  color: var(--white);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--space-4); }

/* Hidden tab panels must stay hidden despite .gr-panel display rules */
.gr-panel[hidden] { display: none !important; }

/* Visible keyboard focus on tabs */
.gr-tab:focus-visible {
  outline: 3px solid var(--raspberry);
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════
   CONTACT — expectations and time zone
   ═══════════════════════════════════════════════════════════ */
.form-expect {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--ink);
  background: var(--vanilla);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-6);
}
.form-expect strong { color: var(--forest); }
.contact-tz {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--muted);
  font-style: italic;
}