/* ==========================================================================
   Susie Branagan Consulting
   Design system — "The Clinical Record"
   Palette sampled from the SB Consulting watercolour wave logo. The wave is
   ocean, not navy: deep water teal, the crest's soft blue, sea glass in the
   shallows, the lavender of the sprigs, and a warm pink at the waterline.
   Navy survives as one accent among several — it no longer sets the tone.
   Light grounds dominate; the deep teal blocks are punctuation.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Deep water — the dark surfaces. Teal, not indigo. */
  --ink: #0f3a44;
  --ink-soft: #16505c;
  --ink-line: #2b6b78;

  /* Ocean teal — the primary accent, sampled from the wave body */
  --tide: #2f8b9b;       /* decorative / large text only (3.97:1 on paper) */
  --tide-deep: #1c6472;  /* text-safe teal, 6.7:1 on paper */
  --tide-pale: #a8d3d8;  /* pale crest, 7.5:1 on --ink */

  /* Sea glass — the light grounds the site now lives on */
  --paper: #f5f9f8;
  --paper-tint: #e8f1f0;
  --seaglass: #dcecea;
  --mist: #cfe1de;

  /* Soft blue — the crest's cooler note */
  --sky: #7fabc9;        /* decorative */
  --sky-deep: #3c6d92;   /* text-safe, 5.2:1 on paper */
  --sky-pale: #d7e6f1;
  --periwinkle: #57659d; /* the logo's periwinkle mid-tone */

  /* SBC purple — the lavender sprigs */
  --iris: #6f5a9c;       /* 5.5:1 on paper */
  --iris-soft: #c9b8ea;  /* 6.8:1 on --ink */
  --violet-deep: #4a3a7d;

  /* Warm pink — used sparingly, at the waterline: quote marks, the live
     timeline node, the marquee dividers, the storm end of the forecast. */
  --blush: #d98a94;      /* decorative, or large text on --ink */
  --blush-deep: #a8505f; /* text-safe, 5.0:1 on paper */
  --blush-soft: #f6e4e4;

  /* Navy — kept because it is genuinely in the logo, demoted to an accent */
  --navy: #1c2547;

  /* Functional only — never decorative. A form error cannot be signalled in
     lavender, and it must not read as the brand's warm pink either. */
  --alert: #a33a52;

  /* Text */
  --text: #17323a;
  --text-muted: #4f6a72;
  --text-on-dark: #d8e8e8;
  --text-on-dark-muted: #a6c4c7;

  /* Type */
  --display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Avenir Next", "Segoe UI", sans-serif;

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 68ch;
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --slow: 720ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.97rem + 0.16vw, 1.075rem);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

/* ---------- Paper grain (fixed, non-interactive) ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 460;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.7rem, 1.6rem + 4.6vw, 5.4rem); }
h2 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.4rem); }
h3 { font-size: clamp(1.35rem, 1.12rem + 0.9vw, 1.85rem); letter-spacing: -0.012em; }
h4 { font-size: 1.12rem; letter-spacing: -0.005em; }

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.12rem, 1.02rem + 0.5vw, 1.42rem);
  line-height: 1.55;
  color: var(--text);
  font-weight: 380;
  max-width: 60ch;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--iris);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.4rem;
}
.eyebrow::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: currentColor;
  flex: none;
  opacity: 0.7;
}
.eyebrow--dark { color: var(--iris-soft); }
.eyebrow--plain::before { display: none; }

.index-mark {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
}

.pull {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.05rem + 2vw, 2.85rem);
  line-height: 1.24;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
  max-width: 24ch;
  text-wrap: balance;
}

/* ---------- Layout ---------- */
.wrap {
  width: min(1240px, 100% - (var(--gutter) * 2));
  margin-inline: auto;
  position: relative;
  z-index: 2;
}
.wrap--narrow { width: min(880px, 100% - (var(--gutter) * 2)); }

section { position: relative; }
.band { padding-block: var(--section-y); }
.band--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.band--ink {
  background: var(--ink);
  color: var(--text-on-dark);
}
.band--ink h1, .band--ink h2, .band--ink h3, .band--ink h4 { color: #e9f4f4; }
.band--ink p { color: var(--text-on-dark-muted); }
.band--ink .lede { color: #c2dcdd; }

.band--tint {
  /* A whisper of the logo's warm pink in one corner. Confined to a single
     radial at 0.06 so it warms the band without washing it: the darkest
     composite is #e7eaea, on which --text-muted still runs 4.8:1. */
  background:
    radial-gradient(58% 70% at 96% 100%, rgba(217, 138, 148, 0.06), transparent 68%),
    linear-gradient(176deg, var(--seaglass) 0%, var(--paper-tint) 34%, var(--paper-tint) 100%);
}

/* Section head: editorial two-column */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 900px) {
  .sec-head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: end; }
  .sec-head--stack { grid-template-columns: 1fr; }
}

/* ---------- ECG hairline (signature motif) ---------- */
.ecg {
  width: 100%;
  height: 44px;
  overflow: visible;
  color: var(--tide);
  opacity: 0.5;
}
.ecg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
}
.ecg.is-live path { animation: trace 2.6s var(--ease) forwards; }
.ecg--ink { color: var(--tide-pale); opacity: 0.4; }
.ecg--iris { color: var(--iris); opacity: 0.55; }

@keyframes trace { to { stroke-dashoffset: 0; } }

.rule {
  height: 1px;
  background: var(--mist);
  border: 0;
  margin: 0;
}
.band--ink .rule { background: var(--ink-line); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.92rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: 2px;
  font-size: 0.79rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), background-color 260ms var(--ease), color 260ms var(--ease), border-color 260ms var(--ease);
}
.btn .arw { transition: transform 320ms var(--ease); }
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -14px rgba(15, 58, 68, 0.6);
}
.btn:hover .arw { transform: translateX(4px); }
.btn:active { transform: translateY(0); }

.btn--iris { --btn-bg: var(--iris); --btn-fg: #f5f9f8; }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: rgba(15, 58, 68, 0.28);
}
.btn--ghost:hover { border-color: var(--ink); background: rgba(15, 58, 68, 0.04); }
.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: #e3f0f0;
  border-color: rgba(216, 232, 232, 0.32);
}
.btn--ghost-light:hover { border-color: #d8e8e8; background: rgba(216, 232, 232, 0.07); }
.btn--light { --btn-bg: var(--paper); --btn-fg: var(--ink); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

/* Text link with underline draw */
.tlink {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tide-deep);
  /* Some of these labels are a bare URL or email address — one unbreakable
     token. `anywhere` (rather than `break-word`) is the value that also
     shrinks min-content, so a 36-character calendly link stops setting a
     floor wider than a 320px phone and shoving the whole page sideways. */
  overflow-wrap: anywhere;
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 340ms var(--ease), color 240ms var(--ease);
}
.tlink:hover { background-size: 100% 1px; }
/* Same reasoning for addresses printed as their own link text outside .tlink
   — the footer email, for one. */
a[href^="mailto:"],
a[href^="tel:"] { overflow-wrap: anywhere; }
.band--ink .tlink { color: var(--tide-pale); }
.tlink .arw { transition: transform 320ms var(--ease); }
.tlink:hover .arw { transform: translateX(3px); }

/* ---------- Header ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(245, 249, 248, 0.86);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--ease), background-color 300ms var(--ease);
}
.masthead.is-stuck {
  border-bottom-color: var(--mist);
  background: rgba(245, 249, 248, 0.95);
}
.masthead__inner {
  width: min(1240px, 100% - (var(--gutter) * 2));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  flex: none;
}
.brand img {
  width: auto;
  height: 42px;
  flex: none;
}
.brand__name {
  font-family: var(--display);
  font-size: 1.02rem;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand__name span {
  display: block;
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 3px;
}

.nav { display: none; }
@media (min-width: 1080px) {
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 1.5vw, 1.7rem);
  }
}
.nav a {
  font-size: 0.735rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  color: var(--text);
  padding: 0.4rem 0;
  position: relative;
  white-space: nowrap;
  transition: color 220ms var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--iris);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--iris); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.masthead .btn { padding: 0.72rem 1.15rem; font-size: 0.7rem; display: none; }
@media (min-width: 1080px) { .masthead .btn { display: inline-flex; } }

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
@media (min-width: 1080px) { .burger { display: none; } }
.burger span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  transition: transform 320ms var(--ease), opacity 200ms var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 5rem 0 0;
  z-index: 55;
  background: var(--ink);
  color: var(--text-on-dark);
  padding: 2.5rem var(--gutter) 3rem;
  overflow-y: auto;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease), visibility 300ms;
}
.drawer.is-open { opacity: 1; transform: none; visibility: visible; }
.drawer a {
  display: block;
  font-family: var(--display);
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: #e3f0f0;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--ink-line);
}
.drawer a:last-of-type { border-bottom: 0; }
.drawer .drawer__minor {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tide-pale);
}
.drawer .btn { margin-top: 1.8rem; }
body.is-locked { overflow: hidden; }

/* ---------- Hero ----------
   Light, not dark. The old navy hero set the tone for the whole site and made
   it read as a consulting firm; the same layout on a watercolour wash reads as
   the logo. Three blooms — teal at the crest, lavender bottom-left, a warm
   pink at the waterline — over a sea-glass-to-paper fade. Alphas are kept low
   deliberately: the darkest point of the composite is still ~L0.70, so the
   0.71rem uppercase meta line in --ink clears AA with room to spare. */
.hero {
  background: var(--paper);
  color: var(--text);
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3.5rem, 7vw, 6rem);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(115% 85% at 84% 6%, rgba(47, 139, 155, 0.20) 0%, transparent 62%),
    radial-gradient(85% 70% at 2% 96%, rgba(111, 90, 156, 0.15) 0%, transparent 66%),
    radial-gradient(60% 50% at 46% 106%, rgba(217, 138, 148, 0.11) 0%, transparent 72%),
    linear-gradient(179deg, var(--seaglass) 0%, var(--paper) 58%);
  pointer-events: none;
}
/* A single hairline of ocean at the base, so the light hero still resolves
   into the strip below rather than bleeding into it. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tide-pale) 22%, var(--iris-soft) 74%, transparent);
  pointer-events: none;
}
.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.hero h1 { color: var(--ink); }
.hero h1 em {
  font-style: italic;
  color: var(--iris);
  font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 60;
}
.hero .lede { color: var(--text); max-width: 52ch; }

.hero__portrait {
  position: relative;
  border-radius: 240px 240px 6px 6px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 40px 90px -44px rgba(15, 58, 68, 0.45);
  isolation: isolate;
}
.hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  /* 0.82 was tuned for the old shoreline portrait, which was already cool. The
     desk photograph carries the warmth — hair, wood, low sun — and desaturating
     it that hard read as a colder, more corporate image than the one supplied. */
  filter: saturate(0.9) contrast(1.04);
}
.hero__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Anchored in pixels from the bottom edge, not percentages. The caption box is
     77px tall at every breakpoint — the type doesn't scale — but the frame ranges
     from 350px to 883px, so a percentage ramp lands the same words on wildly
     different alphas. That is exactly what happened: identical stops measured
     6.5:1 at 1440 and 2.3:1 at 320, because 88% is 75px up on a tall frame and
     42px up on a short one. In px the ramp tracks the caption instead of the
     frame, and the two lines (21–37px and 40–56px from the bottom) always sit
     under 0.87–0.90. Above 64px it releases fast, so the desk, the notebook and
     her hands — the subject of the photograph — stay in the picture. */
  background: linear-gradient(to top,
    rgba(15, 58, 68, 0.94) 0,
    rgba(15, 58, 68, 0.90) 34px,
    rgba(15, 58, 68, 0.86) 64px,
    rgba(15, 58, 68, 0.40) 108px,
    rgba(15, 58, 68, 0.10) 150px,
    rgba(15, 58, 68, 0) 215px);
}
.hero__stamp {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.25rem 1.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d8e8e8;
}
.hero__stamp strong { display: block; font-weight: 600; letter-spacing: 0.2em; }
.hero__stamp span { color: var(--tide-pale); }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin-top: 2.4rem;
  padding-top: 1.5rem;
  /* Light ground now — --ink-line is a dark-surface hairline and would draw a
     hard navy-weight rule across the wash. */
  border-top: 1px solid var(--mist);
  font-size: 0.71rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  /* --ink rather than --tide-deep: this is 0.71rem, and it can sit anywhere
     under the teal bloom, whose darkest composite would leave --tide-deep at
     roughly 4.2:1. */
  color: var(--ink);
}

/* ---------- Marquee credibility strip ----------
   Sea glass, not navy. It sits directly under a light hero, so it needs its
   own hairlines to read as a distinct band rather than more hero. */
.strip {
  background: var(--paper-tint);
  color: var(--text-muted);
  border-top: 1px solid var(--mist);
  border-bottom: 1px solid var(--mist);
  padding-block: 1.1rem;
  overflow: hidden;
}
.strip__track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: drift 46s linear infinite;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.strip:hover .strip__track { animation-play-state: paused; }
.strip__track span { display: inline-flex; align-items: center; gap: 3.5rem; }
.strip__track span::after {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--blush-deep);
  border-radius: 50%;
  opacity: 0.85;
}
@keyframes drift { to { transform: translateX(-50%); } }

/* ---------- Cards / editorial blocks ---------- */
.card {
  background: #fcfefd;
  border: 1px solid var(--mist);
  border-radius: 3px;
  padding: clamp(1.6rem, 3vw, 2.3rem);
  position: relative;
  transition: transform 340ms var(--ease), box-shadow 340ms var(--ease), border-color 340ms var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--tide-pale);
  box-shadow: 0 26px 50px -34px rgba(15, 58, 68, 0.45);
}
.card h3 { margin-bottom: 0.55rem; }
.card p { font-size: 0.96rem; color: var(--text-muted); }
.card__num {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--iris);
  display: block;
  margin-bottom: 1rem;
}
.card--ink {
  background: var(--ink-soft);
  border-color: var(--ink-line);
}
.card--ink h3 { color: #e9f4f4; }
.card--ink p { color: var(--text-on-dark-muted); }
.card--ink:hover { border-color: var(--tide); }

.icon {
  width: 30px;
  height: 30px;
  stroke: var(--tide);
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 1.1rem;
}
.card--ink .icon { stroke: var(--tide-pale); }

/* Asymmetric service grid */
.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
@media (min-width: 760px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .grid--offset > *:nth-child(2) { transform: translateY(clamp(1rem, 3vw, 2.6rem)); }
  .grid--offset > *:nth-child(3) { transform: translateY(clamp(2rem, 6vw, 5.2rem)); }
  .grid--offset > *:nth-child(2):hover { transform: translateY(calc(clamp(1rem, 3vw, 2.6rem) - 3px)); }
  .grid--offset > *:nth-child(3):hover { transform: translateY(calc(clamp(2rem, 6vw, 5.2rem) - 3px)); }
}

/* Numbered service rows (advisory pages) */
.rows { border-top: 1px solid var(--mist); }
.band--ink .rows { border-top-color: var(--ink-line); }
.row {
  display: grid;
  gap: 0.6rem clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(1.8rem, 3.5vw, 2.8rem);
  border-bottom: 1px solid var(--mist);
  align-items: start;
}
.band--ink .row { border-bottom-color: var(--ink-line); }
@media (min-width: 860px) {
  .row { grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.15fr); }
}
.row__n {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--iris);
  padding-top: 0.5rem;
}
.row h3 { margin: 0; }
.row p { margin: 0; font-size: 0.98rem; color: var(--text-muted); }
.band--ink .row p { color: var(--text-on-dark-muted); }

/* ---------- Story band (human credibility) ---------- */
.story {
  position: relative;
  background: var(--ink);
  color: var(--text-on-dark);
  overflow: hidden;
}
/* .story is used two ways: as a full-bleed band, where .band and .wrap supply
   the rhythm, and as an inset panel dropped inside a .wrap. The panel form had
   no inner padding of its own, so its heading and body copy ran flush into the
   ink edge and read as cut off. */
.story:not(.band) {
  border-radius: 3px;
  padding: clamp(1.75rem, 4vw, 3.25rem);
}
.story__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .story__grid { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); }
}
.story__img {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.story__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.55) contrast(1.06) brightness(0.88); }
.story__img::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Teal into navy — the one place the old indigo still does real work, as a
     duotone over the story portrait. */
  background: linear-gradient(160deg, rgba(47, 139, 155, 0.32), rgba(28, 37, 71, 0.3));
  mix-blend-mode: multiply;
}
.story blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.65rem, 1.05rem + 2.4vw, 3.1rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #eef7f7;
  font-weight: 400;
  text-wrap: balance;
}
.story blockquote em { font-style: italic; color: var(--iris-soft); }
.story cite {
  display: block;
  margin-top: 1.8rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tide-pale);
}

/* ---------- Testimonials ---------- */
.quotes { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 820px) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.quote {
  background: #fcfefd;
  border: 1px solid var(--mist);
  border-radius: 3px;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  break-inside: avoid;
  transition: border-color 320ms var(--ease), box-shadow 320ms var(--ease), transform 320ms var(--ease);
}
.quote:hover {
  border-color: var(--tide-pale);
  transform: translateY(-3px);
  box-shadow: 0 24px 46px -34px rgba(15, 58, 68, 0.4);
}
.quote__mark {
  font-family: var(--display);
  font-size: 3rem;
  line-height: 0.6;
  /* Warm pink at the waterline. "Stories from the shoreline" earns a little
     warmth; --blush itself is too light to clear 3:1 on the card, so the
     deeper tone carries it at 0.75. */
  color: var(--blush-deep);
  opacity: 0.75;
  height: 1.1rem;
}
.quote p {
  font-size: 0.97rem;
  line-height: 1.62;
  color: var(--text);
  margin: 0;
  flex: 1;
}
.quote--feature { grid-column: span 1; }
@media (min-width: 1120px) { .quote--feature { grid-column: span 2; } }
.quote--feature p { font-size: 1.06rem; }

.attrib {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border-top: 1px solid var(--mist);
  padding-top: 1.1rem;
}
.attrib__init {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  /* A sea-glass disc with deep-teal initials (10:1) rather than a solid dark
     puck — one less near-black element on every testimonial card. */
  background: var(--seaglass);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  font-weight: 500;
}
/* Both halves are <span>s, so without an explicit block they run together as
   one line — "Chris HutchinsFOUNDER & CEO, …" — and the margin-top below is
   silently discarded. */
.attrib__who { display: block; font-size: 0.9rem; font-weight: 500; color: var(--ink); line-height: 1.3; }
.attrib__role {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.4;
}

/* ---------- Insights / media items ---------- */
.stack { border-top: 1px solid var(--mist); }
.band--ink .stack { border-top-color: var(--ink-line); }
.item {
  display: grid;
  gap: 0.5rem 2rem;
  padding-block: clamp(1.4rem, 2.6vw, 2rem);
  border-bottom: 1px solid var(--mist);
  text-decoration: none;
  color: inherit;
  align-items: baseline;
  transition: background-color 280ms var(--ease), padding-left 320ms var(--ease);
}
.band--ink .item { border-bottom-color: var(--ink-line); }
@media (min-width: 800px) {
  .item { grid-template-columns: 13rem minmax(0, 1fr) 2.5rem; }
}
.item:hover { background: rgba(47, 139, 155, 0.05); padding-left: 0.9rem; }
.band--ink .item:hover { background: rgba(168, 211, 216, 0.07); }
.item__src {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.band--ink .item__src { color: var(--tide-pale); }
/* Inline <span>s again: without this the headline and its description render
   as one run of text with no break between them. */
.item__title {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.12rem, 0.98rem + 0.5vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.band--ink .item__title { color: #e3f0f0; }
.item__desc { display: block; font-size: 0.93rem; color: var(--text-muted); margin: 0.4rem 0 0; }
.band--ink .item__desc { color: var(--text-on-dark-muted); }
.item__arw { color: var(--iris); justify-self: end; transition: transform 300ms var(--ease); }
.item:hover .item__arw { transform: translateX(5px); }

/* Video embeds */
.embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: 3px;
  overflow: hidden;
}
.embed iframe, .embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed__cap {
  font-size: 0.68rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.85rem;
}
.band--ink .embed__cap { color: var(--tide-pale); }

/* ---------- Recognition ---------- */
.award {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 44px minmax(0, 1fr);
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--mist);
  align-items: start;
}
.band--ink .award { border-bottom-color: var(--ink-line); }
.award:last-child { border-bottom: 0; }
.award__badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--mist);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fcfefd;
}
.band--ink .award__badge { border-color: var(--ink-line); background: var(--ink-soft); }
.award__badge svg { width: 20px; height: 20px; stroke: var(--sky-deep); fill: none; stroke-width: 1.4; }
.award__badge img { width: 100%; height: 100%; object-fit: contain; }
.award__meta {
  font-size: 0.67rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--iris);
  margin-bottom: 0.4rem;
}
.award h4 { margin-bottom: 0.35rem; }
.award p { font-size: 0.94rem; color: var(--text-muted); margin: 0; }
.band--ink .award p { color: var(--text-on-dark-muted); }

/* ---------- Timeline (About) ---------- */
.timeline { position: relative; padding-left: 2.2rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
  background: linear-gradient(180deg, var(--iris), var(--tide) 45%, var(--seaglass));
}
.tl {
  position: relative;
  padding-bottom: 2.2rem;
}
.tl:last-child { padding-bottom: 0; }
.tl::before {
  content: "";
  position: absolute;
  left: -2.2rem;
  top: 0.55rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--tide);
}
.tl--now::before { background: var(--blush-deep); border-color: var(--blush-deep); }
.tl__yr {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--iris);
  margin-bottom: 0.25rem;
}
.tl h4 { margin-bottom: 0.3rem; }
.tl p { font-size: 0.94rem; color: var(--text-muted); margin: 0; }

/* ---------- Credential chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.chips li {
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--mist);
  border-radius: 100px;
  color: var(--text-muted);
  background: #fcfefd;
}
.band--ink .chips li { border-color: var(--ink-line); background: transparent; color: var(--tide-pale); }

/* ---------- Topics list (Speaking) ---------- */
.topics { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.topics li {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--mist);
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  letter-spacing: -0.012em;
  line-height: 1.25;
}
.band--ink .topics li { border-bottom-color: var(--ink-line); color: #e3f0f0; }
.topics li span {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--iris);
  flex: none;
}

/* ---------- Pricing / offer list ---------- */
.offer {
  display: grid;
  gap: 0.4rem 1.5rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--mist);
  align-items: baseline;
}
@media (min-width: 720px) {
  .offer { grid-template-columns: minmax(0, 1fr) 7rem 8rem; }
}
.offer__name { font-family: var(--display); font-size: 1.22rem; letter-spacing: -0.012em; color: var(--ink); }
.offer__desc { font-size: 0.92rem; color: var(--text-muted); margin: 0.3rem 0 0; grid-column: 1; }
.offer__price { font-size: 0.95rem; font-weight: 500; color: var(--ink); letter-spacing: 0.02em; }
.offer__price s { color: var(--text-muted); font-weight: 400; margin-right: 0.4rem; }
.offer__len { font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); }
.offer__tag {
  display: inline-block;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--iris);
  border: 1px solid currentColor;
  border-radius: 100px;
  padding: 0.15rem 0.6rem;
  margin-left: 0.6rem;
  vertical-align: middle;
}

/* ---------- Accordion (FAQ) ---------- */
.acc { border-top: 1px solid var(--mist); }
.acc details { border-bottom: 1px solid var(--mist); }
.acc summary {
  list-style: none;
  cursor: pointer;
  padding-block: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-family: var(--display);
  font-size: clamp(1.08rem, 1rem + 0.4vw, 1.32rem);
  letter-spacing: -0.012em;
  color: var(--ink);
  transition: color 220ms var(--ease);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--tide-deep); }
.acc summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 1.5px solid var(--iris);
  border-bottom: 1.5px solid var(--iris);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 300ms var(--ease);
}
.acc details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.acc__body { padding-bottom: 1.4rem; }
.acc__body p { font-size: 0.96rem; color: var(--text-muted); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.4rem; }
.field label {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}
.band--ink .field label { color: var(--tide-pale); }
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--text);
  background: #fcfefd;
  border: 1px solid var(--mist);
  border-radius: 2px;
  padding: 0.85rem 1rem;
  width: 100%;
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--tide);
  box-shadow: 0 0 0 3px rgba(47, 139, 155, 0.14);
}
.field input:user-invalid,
.field textarea:user-invalid { border-color: var(--alert); }
.field .err { font-size: 0.78rem; color: var(--alert); letter-spacing: 0.02em; text-transform: none; }
.hp { position: absolute; left: -9999px; opacity: 0; }

.form-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
}
.form-status {
  font-size: 0.9rem;
  padding: 0.9rem 1.1rem;
  border-radius: 2px;
  border: 1px solid;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status--ok { color: var(--tide-deep); border-color: var(--tide-pale); background: rgba(47, 139, 155, 0.08); }
.form-status--err { color: var(--alert); border-color: rgba(163, 58, 82, 0.4); background: rgba(163, 58, 82, 0.06); }

.btn[aria-busy="true"] { opacity: 0.72; pointer-events: none; }
.btn[aria-busy="true"] .arw { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }

/* ---------- A moment for you (preserved wellbeing feature) ---------- */
.breathe {
  position: relative;
  border: 1px solid var(--ink-line);
  border-radius: 3px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(15, 58, 68, 0.32), rgba(15, 58, 68, 0.74)),
    linear-gradient(200deg, #2b7180 0%, #0f3a44 55%, #2a4a6e 100%); /* ends on navy */
  padding: clamp(2rem, 5vw, 3.4rem);
  color: var(--text-on-dark);
  isolation: isolate;
}
.breathe::before,
.breathe::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(168, 211, 216, 0.15), transparent);
  animation: swell 11s ease-in-out infinite;
  z-index: -1;
}
.breathe::before { bottom: -18%; }
.breathe::after { bottom: -26%; animation-duration: 15s; animation-direction: reverse; }
@keyframes swell {
  0%, 100% { transform: translate3d(-2%, 0, 0) scaleY(1); }
  50% { transform: translate3d(2%, -6%, 0) scaleY(1.14); }
}
.breathe audio { width: 100%; max-width: 420px; margin-top: 1.6rem; border-radius: 100px; }
.breathe p { color: #c2dcdd; }

/* ---------- Footer ---------- */
.foot {
  background: var(--ink);
  color: var(--text-on-dark-muted);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) 2.5rem;
  position: relative;
}
.foot__grid {
  display: grid;
  gap: 2.6rem;
}
@media (min-width: 780px) { .foot__grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 0.85fr)); } }
.foot h4 {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--iris-soft);
  margin-bottom: 1.1rem;
  font-weight: 600;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.foot a { text-decoration: none; font-size: 0.9rem; transition: color 200ms var(--ease); }
.foot a:hover { color: #e3f0f0; }
.foot__brand p { font-size: 0.93rem; max-width: 34ch; color: var(--text-on-dark-muted); }
.foot__brand .brand__name { color: #e9f4f4; }
.foot__brand .brand__name span { color: var(--tide-pale); }
.foot__base {
  margin-top: 3.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--ink-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  justify-content: space-between;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}
.crisis {
  margin-top: 2.4rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--ink-line);
  border-left: 2px solid var(--blush);
  border-radius: 2px;
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--text-on-dark-muted);
}
/* The crisis note appears in the dark footer on nine pages and on the light
   confirmation page. Default it to the light-surface treatment and let the
   dark contexts opt in, so an emphasised phone number can never come out
   near-white on near-white paper. */
.crisis strong { color: var(--ink); font-weight: 500; }
.foot .crisis strong,
.band--ink .crisis strong,
.story .crisis strong,
.cta .crisis strong { color: #e3f0f0; }

/* ---------- Mid-page invitation ----------
   A quieter conversion point sitting between "three rooms" and the services
   pillars. It must not compete with the closing .cta band, so it gets no full
   section rhythm, a light sky-into-sea-glass-into-blush wash rather than a
   dark ground, and a single line of display type. The wash's darkest stop is
   --sky-pale, on which --ink runs 9.6:1 and --iris 4.6:1. */
.nudge {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.2rem, 4.5vw, 3.4rem);
  background: linear-gradient(100deg, var(--sky-pale) 0%, var(--seaglass) 46%, var(--blush-soft) 100%);
  border-block: 1px solid var(--mist);
}
.nudge__inner {
  display: grid;
  gap: 1.3rem clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .nudge__inner { grid-template-columns: minmax(0, 1fr) auto; }
}
.nudge__lead {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.95rem);
  line-height: 1.22;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin: 0;
  max-width: 34ch;
  text-wrap: balance;
}
.nudge__lead em {
  font-style: italic;
  color: var(--iris);
  font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 50;
}
.nudge__act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
}

/* ---------- CTA band ---------- */
.cta {
  /* Deep water travelling into the logo's violet, so the closing band carries
     the SBC purple rather than another wall of navy. Every stop is dark enough
     that --text-on-dark-muted still clears AA on it: --ink 9.7:1, the teal mid
     4.8:1, the violet end 5.6:1. */
  background: linear-gradient(140deg, var(--ink) 0%, #22505f 52%, #3f3a6e 130%);
  color: var(--text-on-dark);
  position: relative;
  overflow: hidden;
}
.cta::after {
  content: "";
  position: absolute;
  right: -8%;
  top: -40%;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  border: 1px solid rgba(168, 211, 216, 0.18);
  pointer-events: none;
}
.cta h2 { color: #eef7f7; max-width: 18ch; }

/* ---------- Page hero (interior pages) ----------
   The same light ocean wash as the homepage hero, dialled back: a teal bloom, a
   lavender edge, and a warm pink at the waterline rather than three overlapping
   blooms. This is eight pages' worth of navy removed in one rule. */
.phero {
  background: var(--paper);
  color: var(--text);
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem);
  position: relative;
  overflow: hidden;
}
.phero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* The blush is centred at 72% so it lands between the top-right teal bloom and
     the bottom-left lavender one rather than stacking on either. Overlapping
     washes compound, and two of them under a 0.95rem --text-muted note is how
     the contrast headroom on this surface gets spent. Alone over paper its
     darkest composite is #f2eeee, where --text-muted still runs 5.1:1. */
  background:
    radial-gradient(105% 78% at 90% 4%, rgba(47, 139, 155, 0.18), transparent 64%),
    radial-gradient(70% 60% at 0% 100%, rgba(111, 90, 156, 0.11), transparent 70%),
    radial-gradient(56% 46% at 72% 106%, rgba(217, 138, 148, 0.10), transparent 70%),
    linear-gradient(179deg, var(--seaglass) 0%, var(--paper) 62%);
  pointer-events: none;
}
.phero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tide-pale) 26%, var(--iris-soft) 78%, transparent);
  pointer-events: none;
}
.phero__grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); }
@media (min-width: 940px) { .phero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; } }
.phero h1 { font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4.4rem); color: var(--ink); }
.phero .lede { color: var(--text); }

.crumb {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tide-deep);
  margin-bottom: 1.4rem;
}
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--ink); }
/* The crumb also appears on the dark confirmation-page variants. */
.band--ink .crumb,
.story .crumb,
.cta .crumb { color: var(--tide-pale); }
.band--ink .crumb a:hover,
.story .crumb a:hover,
.cta .crumb a:hover { color: #e3f0f0; }

/* ---------- Prose ---------- */
.prose h3 { margin-top: 2.4rem; }
.prose ul { padding-left: 1.1rem; max-width: var(--measure); }
.prose li { margin-bottom: 0.55rem; }
.prose li::marker { color: var(--iris); }

/* ---------- Scroll reveal ---------- */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 780ms var(--ease), transform 780ms var(--ease);
  will-change: opacity, transform;
}
.rv.is-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 90ms; }
.rv-d2 { transition-delay: 180ms; }
.rv-d3 { transition-delay: 270ms; }
.rv-d4 { transition-delay: 360ms; }

/* Hero load stagger */
.hero .rv { transition-duration: 900ms; }

/* ---------- Wellness Forecast assessment ---------- */
.wf-legend {
  position: sticky;
  top: 5rem; /* sits directly beneath the sticky masthead */
  z-index: 20;
  background: rgba(245, 249, 248, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mist);
  border-top: 1px solid var(--mist);
  padding: 0.85rem 0;
}
.wf-legend__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem 1.5rem;
}
.wf-scale { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.wf-scale li {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.wf-scale b {
  font-family: var(--display);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--tide-deep);
  letter-spacing: 0;
}
.wf-prog { display: flex; align-items: center; gap: 0.7rem; flex: 0 0 auto; }
.wf-prog__bar {
  width: clamp(90px, 18vw, 180px);
  height: 3px;
  background: var(--mist);
  border-radius: 100px;
  overflow: hidden;
}
.wf-prog__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--iris);
  transition: width 320ms var(--ease);
}
.wf-prog__n {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.wf-sec { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.wf-sec__head {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding-bottom: 1.1rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--ink);
}
.wf-sec__mark {
  font-family: var(--display);
  font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.4rem);
  line-height: 0.8;
  color: var(--iris);
  font-weight: 300;
  flex: 0 0 auto;
}
.wf-sec__head h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); margin: 0 0 0.2rem; }
.wf-sec__head p { margin: 0; font-size: 0.9rem; color: var(--text-muted); }
.wf-sec__score {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wf-q {
  border: 0;
  border-bottom: 1px solid var(--mist);
  margin: 0;
  padding: 1.15rem 0;
  display: block;
}
.wf-q::after { content: ""; display: block; clear: both; }
.wf-q legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.8rem;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.5;
}
.wf-q legend b {
  font-family: var(--display);
  font-weight: 400;
  color: var(--periwinkle);
  margin-right: 0.6rem;
  font-variant-numeric: tabular-nums;
}
.wf-q.is-done legend b { color: var(--iris); }
.wf-opts { display: flex; gap: 0.35rem; clear: both; }
@media (min-width: 820px) {
  .wf-q legend { width: calc(100% - 16rem); margin-bottom: 0; padding-right: 1.5rem; }
  .wf-opts { float: right; clear: none; }
}
.wf-opts label {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--mist);
  border-radius: 2px;
  font-size: 0.9rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
  background: #fcfefd;
  font-variant-numeric: tabular-nums;
}
.wf-opts label:hover { border-color: var(--tide); color: var(--tide-deep); }
.wf-opts input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.wf-opts label:has(input:checked) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.wf-opts label:has(input:focus-visible) { outline: 2px solid var(--iris); outline-offset: 2px; }

.wf-result { display: none; }
.wf-result.is-visible { display: block; }
.wf-forecast {
  border: 1px solid var(--ink-line);
  border-radius: 3px;
  padding: clamp(1.8rem, 4vw, 3rem);
  background: var(--ink);
  color: var(--text-on-dark);
  margin-bottom: 2.5rem;
}
.wf-forecast__label {
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  line-height: 1.05;
  color: #eef7f7;
  margin: 0.4rem 0 0.7rem;
}
.wf-forecast__total {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tide-pale);
  font-variant-numeric: tabular-nums;
}
.wf-forecast p { color: var(--text-on-dark-muted); max-width: 58ch; margin: 0; }
.wf-bars { display: grid; gap: 1.1rem; margin: 0 0 2.5rem; }
.wf-bar__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}
.wf-bar__top span:last-child { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 0.8rem; }
.wf-bar__track { height: 4px; background: var(--mist); border-radius: 100px; overflow: hidden; }
.wf-bar__fill { display: block; height: 100%; width: 0; transition: width 700ms var(--ease); }
.wf-t--calm { background: var(--tide-pale); }
.wf-t--watch { background: var(--tide); }
.wf-t--storm { background: var(--iris); }
.wf-t--severe { background: var(--blush-deep); }
.wf-recs { border-left: 2px solid var(--iris); padding-left: 1.4rem; margin-bottom: 2.5rem; }
.wf-recs h3 { font-size: 1.2rem; margin-bottom: 0.8rem; }
.wf-recs ul { margin: 0; padding-left: 1.1rem; color: var(--text-muted); }
.wf-recs li { margin-bottom: 0.45rem; }
.wf-recs li.is-urgent { color: var(--alert); font-weight: 500; }
.wf-disclaim {
  font-size: 0.86rem;
  color: var(--text-muted);
  border: 1px solid var(--mist);
  border-radius: 2px;
  padding: 1.2rem 1.4rem;
  background: var(--paper-tint);
}

/* ---------- Dark surfaces ----------
   Every block that paints deep water behind its text: .band--ink, .story,
   .cta, .breathe, .card--ink and the footer. Components dropped inside them
   would otherwise keep their paper-surface colour, which is how ink-coloured
   ledes and iris-coloured index numbers once ended up on a dark ground.

   .hero and .phero are NOT in this list any more — they are light ocean
   washes now, so they take the ordinary light-surface colours and only need
   the few explicit overrides in their own sections above. Keep this section
   in sync when adding a block whose background is --ink, --ink-soft, or an
   ink gradient. */

/* Eyebrows: lavender is legible on flat deep teal, but the .cta and .breathe
   gradients run lighter at one end, so those take the pale crest instead. */
.story .eyebrow,
.band--ink .eyebrow,
.card--ink .eyebrow { color: var(--iris-soft); }
.cta .eyebrow,
.breathe .eyebrow { color: var(--tide-pale); }

.story .lede,
.cta .lede,
.breathe .lede { color: #c2dcdd; }

.story p,
.story li,
.cta p { color: var(--text-on-dark-muted); }

/* Index numbers default to iris, which does not survive a deep-teal ground. */
.band--ink .row__n,
.story .row__n,
.cta .row__n,
.card--ink .card__num,
.band--ink .card__num,
.story .card__num,
.cta .card__num { color: var(--tide-pale); }

/* .tlink is --tide-deep, a mid teal that all but vanishes on deep water. */
.story .tlink,
.cta .tlink,
.breathe .tlink,
.card--ink .tlink { color: var(--tide-pale); }

.band--ink .attrib__role,
.card--ink .attrib__role,
.story .attrib__role,
.cta .attrib__role,
.band--ink .attrib__who,
.card--ink .attrib__who,
.story .attrib__who,
.cta .attrib__who { color: var(--text-on-dark-muted); }

/* A ghost button draws its label in --ink, so on a dark surface it renders
   as invisible text in an invisible box. Fail loudly to the light variant
   rather than silently disappearing. */
.band--ink .btn--ghost,
.story .btn--ghost,
.cta .btn--ghost,
.breathe .btn--ghost,
.card--ink .btn--ghost {
  --btn-fg: #e3f0f0;
  border-color: rgba(216, 232, 232, 0.32);
}

/* ---------- Light surfaces ----------
   .hero and .phero were dark grounds until the ocean recolour, so they still
   carry buttons authored for one. A --ghost-light label is near-white and
   would disappear completely on the wash; --light paints a paper box on paper.
   Reverse both here rather than editing markup on eleven pages, so dropping
   either variant into a light hero can never produce an invisible control. */
.hero .btn--ghost-light,
.phero .btn--ghost-light {
  --btn-fg: var(--ink);
  border-color: rgba(15, 58, 68, 0.3);
}
.hero .btn--ghost-light:hover,
.phero .btn--ghost-light:hover {
  border-color: var(--ink);
  background: rgba(15, 58, 68, 0.05);
}
.hero .btn--light,
.phero .btn--light { --btn-bg: var(--ink); --btn-fg: var(--paper); }

/* .eyebrow--dark is pale lavender for a dark ground, and it is on the hero and
   every page hero. --iris is the paper-surface lavender, but at 0.7rem it only
   reaches 3.9:1 where the teal bloom is densest (narrow viewports compress the
   radials and they overlap). --violet-deep clears 6.3:1 at that same point and
   still reads as the SBC purple. */
.hero .eyebrow--dark,
.phero .eyebrow--dark { color: var(--violet-deep); }

/* Same class of problem for the ECG hairline and rules: the --ink variants are
   pale-on-dark by design. */
.hero .ecg--ink,
.phero .ecg--ink { color: var(--tide); opacity: 0.5; }
.hero .rule,
.phero .rule { background: var(--mist); }

/* ---------- Focus + a11y ---------- */
:focus-visible {
  outline: 2px solid var(--iris);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.9rem 1.3rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { left: 0.6rem; top: 0.6rem; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .ecg path { stroke-dashoffset: 0; }
  /* Killing the marquee's animation leaves the credibility strip frozen at
     max-content width, so everything past the third item sits permanently
     outside the overflow:hidden edge with no way to reach it. Let it wrap
     into a plain static list instead. (site.js already skips cloning the
     track under this preference, so there are no duplicates to hide.) */
  .strip__track {
    width: auto;
    flex-wrap: wrap;
    white-space: normal;
    gap: 0.7rem 2.2rem;
    animation: none !important;
  }
  /* Edge-to-edge is right for a moving track and wrong for a static list. */
  .strip { padding-inline: var(--gutter); }
}