/* Finding Solace — component layer. All values come from tokens.css. */

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

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  /* Leaves may sit slightly beyond a section's edge; clip rather than scroll.
     `clip` (not `hidden`) so the sticky header keeps working. */
  overflow-x: clip;
  background: var(--color-page);
  color: var(--color-text-primary);
  font-family: var(--font-family-stack);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--font-weight-bold);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--color-text-tertiary);
}
h1 { font-size: var(--font-size-display-1); }
h2 { font-size: var(--font-size-display-2); }
h3 { font-size: var(--font-size-display-3); line-height: 1.3; letter-spacing: -0.005em; }

/* ---------- Focus: never hidden, always visible ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.on-dark :focus-visible { outline-color: var(--color-on-dark); }

.skip-link {
  position: absolute; left: var(--space-10); top: -100px; z-index: 100;
  background: var(--color-ink-dark); color: var(--color-on-dark);
  padding: var(--space-8) var(--space-9); border-radius: var(--radius-sm);
  text-decoration: none; font-size: var(--font-size-4xl);
}
.skip-link:focus-visible { top: var(--space-8); }

/* ---------- Layout ---------- */
.wrap { width: min(100% - (var(--layout-gutter) * 2), var(--layout-max)); margin-inline: auto; }
.section { padding-block: var(--space-14); position: relative; }
.section--tight { padding-block: 0 var(--space-14); }
.stack > * + * { margin-top: var(--space-10); }

.grid { display: grid; gap: var(--space-10); }
/* Let tracks shrink below their content's width, so a long email address
   wraps inside its card instead of pushing the card off a phone screen. */
.grid > * { min-width: 0; }
.btn { max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.section-head { max-width: 58ch; margin-bottom: var(--space-12); }
.section-head p { color: var(--color-body); font-size: var(--font-size-body-lg); margin-top: var(--space-9); }

.eyebrow {
  font-size: var(--font-size-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
  margin-bottom: var(--space-9);
}

/* ---------- Button ---------- */
.btn {
  --btn-bg: var(--color-ink-dark);
  --btn-fg: var(--color-surface-muted);
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-7);
  min-height: 48px;                       /* touch target ≥ 44px */
  padding: var(--space-8) var(--space-10);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-xl);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--motion-duration-instant) var(--motion-ease),
    color var(--motion-duration-instant) var(--motion-ease),
    border-color var(--motion-duration-instant) var(--motion-ease),
    transform var(--motion-duration-instant) var(--motion-ease);
}
.btn:hover { --btn-bg: var(--color-accent); }
.btn:active { transform: translateY(1px); }
.btn[aria-disabled="true"], .btn:disabled { opacity: .45; pointer-events: none; }
.btn[data-loading="true"] { pointer-events: none; }
.btn[data-loading="true"]::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin var(--motion-duration-normal) linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--color-text-tertiary);
  --btn-bd: var(--color-border-strong);
}
.btn--secondary:hover { --btn-bg: var(--color-band); --btn-bd: var(--color-ink-dark); }

.btn--on-dark { --btn-bg: var(--color-on-dark); --btn-fg: var(--color-ink-dark); }
.btn--on-dark:hover { --btn-bg: var(--color-surface-muted); }

/* ---------- Header / navigation ---------- */
.header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--color-page) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-duration-fast) var(--motion-ease);
}
.header[data-stuck="true"] { border-bottom-color: var(--color-border); }
.nav { display: flex; align-items: center; gap: var(--space-11); min-height: 76px; }

.brand {
  display: inline-flex; align-items: center; gap: var(--space-7);
  margin-right: auto; text-decoration: none; white-space: nowrap;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
}
.brand svg { flex: none; }

.nav-links { display: flex; align-items: center; gap: var(--space-11); }
.nav-link {
  color: var(--color-body); text-decoration: none;
  font-size: var(--font-size-4xl);
  padding-block: var(--space-5);
  border-bottom: 1px solid transparent;
  transition: color var(--motion-duration-instant) var(--motion-ease),
              border-color var(--motion-duration-instant) var(--motion-ease);
}
.nav-link:hover { color: var(--color-text-tertiary); border-bottom-color: var(--color-accent); }
.nav-link[aria-current="true"] { color: var(--color-text-tertiary); border-bottom-color: var(--color-accent); }

.nav-toggle {
  display: none; background: none; border: 0; padding: var(--space-7);
  color: var(--color-text-tertiary); cursor: pointer; min-height: 44px; min-width: 44px;
}

/* ---------- Hero ---------- */
.hero { padding-top: var(--space-13); }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-14); align-items: center;
}
.hero p.lead {
  font-size: var(--font-size-body-lg); color: var(--color-body);
  max-width: 46ch; margin-top: var(--space-10);
}
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-9); margin-top: var(--space-11); }
.hero-meta {
  margin-top: var(--space-10); font-size: var(--font-size-4xl); color: var(--color-body);
  display: flex; align-items: flex-start; gap: var(--space-7);
}
.hero-meta::before {
  content: ""; width: 7px; height: 7px; border-radius: var(--radius-xl);
  background: var(--color-accent);
  flex-shrink: 0; margin-top: 0.6em;
}
.hero-art {
  aspect-ratio: 4 / 4.3;
  /* No arch panel any more: the orb simply breathes on the page ground. */
  background: none;
  border: 0;
  box-shadow: none;
  position: relative; overflow: visible;
  display: grid; place-items: center;
  /* Purely decorative: taps must fall through to the Take a minute button. */
  pointer-events: none;
}
.hero-art i {
  position: absolute; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--color-border);
}
.hero-art i:nth-child(1) { inset: 10% 8% auto 8%; }
.hero-art i:nth-child(2) { inset: 22% 21% auto 21%; }

/* The breathing orb from the Take a minute page, quietly looping here:
   4s in, 2s hold, 6s out. */
.hero-orb, .hero-orb-halo {
  position: absolute; border-radius: 50%;
  animation: hero-breathe 12s ease-in-out infinite;
}
.hero-orb {
  width: 34%; aspect-ratio: 1;
  background: radial-gradient(circle at 38% 32%, #fff 0%, var(--color-band) 45%, var(--color-accent-soft) 100%);
  box-shadow: 0 18px 50px rgba(126, 74, 69, .18);
}
.hero-orb-halo {
  width: 46%; aspect-ratio: 1;
  border: 1px solid var(--color-border-strong);
  animation-delay: -.4s;
  opacity: .8;
}
@keyframes hero-breathe {
  0%   { transform: scale(.62); }
  33%  { transform: scale(1); }
  50%  { transform: scale(1); }
  100% { transform: scale(.62); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-orb, .hero-orb-halo { animation: none; transform: scale(.85); }
}

/* ---------- Card ---------- */
.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-11);
  transition: transform var(--motion-duration-instant) var(--motion-ease),
              box-shadow var(--motion-duration-instant) var(--motion-ease);
}
.card p { color: var(--color-body); margin-top: var(--space-7); font-size: var(--font-size-base); }
.card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); }
.card--raised { background: var(--color-band); }

.card-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: var(--color-band-soft); color: var(--color-accent);
  font-size: 22px; line-height: 1;
  margin: 0 0 var(--space-10);
}

/* ---------- Steps band (dark) ---------- */
.band-dark {
  background: var(--color-ink-dark);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-11), 5vw, var(--space-13));
}
.band-dark h2, .band-dark h3 { color: var(--color-surface-strong); }
.band-dark .eyebrow { color: var(--color-on-dark-muted); }
.step { border-top: 1px solid rgba(247, 242, 233, .22); padding-top: var(--space-10); }
.step { counter-increment: step; }
.step .num {
  display: flex; align-items: center; gap: var(--space-8);
  font-size: var(--font-size-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
  color: var(--color-on-dark-muted);
  margin-bottom: var(--space-8);
}
.step .num::before {
  content: counter(step);
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-accent); color: var(--color-surface-strong);
  font-size: var(--font-size-xs); letter-spacing: 0;
}
.step p { color: var(--color-on-dark-muted); margin-top: var(--space-7); }

/* ---------- About ---------- */
.about-grid {
  display: grid; grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-14); align-items: start;
}
.portrait {
  aspect-ratio: 3 / 3.6; border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background-image: url("images/hamna.jpg"),
                    linear-gradient(160deg, var(--color-band), var(--color-accent-soft));
  background-size: cover; background-position: center 18%;
  box-shadow: var(--shadow-1);
}
.prose p { color: var(--color-body); }
.prose p + p { margin-top: var(--space-9); }

.checklist { list-style: none; padding: 0; margin: var(--space-10) 0 0; display: grid; gap: var(--space-8); }
.checklist li { display: flex; gap: var(--space-8); align-items: flex-start; color: var(--color-body); }
.checklist svg { flex: none; margin-top: 7px; color: var(--color-accent); }

/* ---------- Full-bleed dark band ---------- */
.band-full {
  background: var(--color-ink-dark);
  padding-block: clamp(var(--space-12), 6vw, var(--space-14)) clamp(var(--space-11), 4vw, var(--space-12));
  position: relative; overflow: hidden;
  margin-block: var(--space-12);
}
.band-full h2, .band-full h3 { color: var(--color-surface-strong); }
.band-full .eyebrow { color: var(--color-on-dark-muted); }
.band-full .section-head p { color: var(--color-on-dark-muted); }
.band-full .leaf { color: var(--color-blush); }

.band-full--tight { padding-block: clamp(var(--space-11), 4vw, var(--space-12)); }
.band-full--tight .section-head { margin-bottom: var(--space-11); max-width: 62ch; }

.who-strip {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-10) clamp(var(--space-10), 3vw, var(--space-12));
}
.who-strip li { border-top: 1px solid rgba(247, 242, 233, .22); padding-top: var(--space-9); }
.who-strip h3 { font-size: var(--font-size-h5, 1.05rem); margin: 0 0 var(--space-7); }
.who-strip p { color: var(--color-on-dark-muted); margin: 0; font-size: var(--font-size-4xl); }

/* ---------- Credentials strip (home) ----------
   Full-bleed dark band: portrait on the left, credentials in two columns.   */
.creds-band {
  background: var(--color-ink-dark);
  padding-block: var(--space-11);
  margin-block: var(--space-12);
}
.creds-strip {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(var(--space-10), 3vw, var(--space-12));
  align-items: center;
}
.creds-avatar {
  width: clamp(96px, 8vw, 124px); aspect-ratio: 1;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--color-accent);
  /* Photo on top, tinted gradient underneath as a fallback while it loads. */
  background-image: url("images/hamna.jpg"),
                    linear-gradient(160deg, var(--color-band), var(--color-accent-soft));
  /* Zoomed to the face for the small circular crop. */
  background-size: 280% auto, cover;
  background-position: 47% 36%, center;
  background-repeat: no-repeat;
}
.creds-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-9) clamp(var(--space-9), 2.2vw, var(--space-11));
  align-content: center;
}
.creds-list li {
  position: relative; padding-left: var(--space-9);
  color: var(--color-on-dark-muted);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.45;
}
.creds-list li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-accent);
}
.creds-list strong { color: var(--color-surface-strong); font-weight: var(--font-weight-bold); }

/* ---------- Fees ---------- */
.price .amount {
  font-size: var(--font-size-display-2); font-weight: var(--font-weight-bold);
  line-height: 1; margin: var(--space-9) 0 var(--space-4);
  color: var(--color-text-tertiary);
}
.price .per { color: var(--color-body); font-size: var(--font-size-4xl); }
.badge {
  display: inline-block; font-size: var(--font-size-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: var(--font-weight-bold); color: var(--color-accent);
}

/* ---------- Quote / empty state ---------- */
.quote {
  margin: 0; padding-left: var(--space-10);
  border-left: 2px solid var(--color-accent);
  font-size: var(--font-size-display-3); line-height: 1.45; max-width: 36ch;
  color: var(--color-text-tertiary);
}
.quote footer { margin-top: var(--space-10); font-size: var(--font-size-4xl); color: var(--color-body); }

/* ---------- Resource list ---------- */
.res-list { list-style: none; margin: 0; padding: 0; }
.res-list li + li .res { border-top: 1px solid var(--color-border); }
.res-list li:last-child .res { border-bottom: 1px solid var(--color-border); }
.res {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-10);
  padding-block: var(--space-10); text-decoration: none; color: inherit;
  border-top: 1px solid var(--color-border);
}
.res .t { font-weight: var(--font-weight-bold); color: var(--color-text-tertiary); }
.res p { color: var(--color-body); font-size: var(--font-size-4xl); margin-top: var(--space-4); }
.res .arrow { color: var(--color-accent); transition: transform var(--motion-duration-instant) var(--motion-ease); }
.res:hover .arrow { transform: translateX(4px); }
.res:hover .t { text-decoration: underline; }

/* ---------- Contact ---------- */
.band-soft {
  background: var(--color-band); border-radius: var(--radius-lg);
  padding: clamp(var(--space-11), 5vw, var(--space-13));
}
.form { display: grid; gap: var(--space-9); }
.field label {
  display: block; margin-bottom: var(--space-5);
  font-size: var(--font-size-4xl); font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
}
.field .hint { font-size: var(--font-size-xl); color: var(--color-body); margin-top: var(--space-5); }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; min-height: 48px;
  padding: var(--space-8) var(--space-9);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
  transition: border-color var(--motion-duration-instant) var(--motion-ease);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--color-ink-dark); }
.field input:disabled, .field textarea:disabled { background: var(--color-band); opacity: .6; }
.field [aria-invalid="true"] { border-color: var(--color-danger); border-width: 2px; }
.field .error { display: none; color: var(--color-danger); font-size: var(--font-size-xl); margin-top: var(--space-5); }
.field[data-invalid="true"] .error { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); }

.contact-list {
  list-style: none; margin: var(--space-11) 0 0; padding: 0;
  display: grid; gap: var(--space-8);
}
.contact-list li {
  display: grid; grid-template-columns: 96px 1fr;
  gap: var(--space-9); align-items: baseline;
  padding-block: var(--space-7);
  border-top: 1px solid var(--color-border);
}
.contact-list li:last-child { border-bottom: 1px solid var(--color-border); }
.contact-label {
  font-size: var(--font-size-xs); letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: var(--font-weight-bold); color: var(--color-accent);
}
.contact-list a, .contact-list span:not(.contact-label) {
  color: var(--color-text-tertiary); font-size: var(--font-size-4xl);
  overflow-wrap: anywhere;
}
.contact-list a { text-decoration: none; border-bottom: 1px solid var(--color-border-strong); }
.contact-list a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }

@media (max-width: 480px) {
  .contact-list li { grid-template-columns: 1fr; gap: var(--space-4); }
}

.notice {
  border: 1px solid var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 7%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-10);
}
.notice h3 { color: var(--color-danger); font-size: var(--font-size-body-lg); }
.notice p { color: var(--color-body); font-size: var(--font-size-4xl); margin-top: var(--space-7); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-13);
  margin-top: var(--space-14);
}
.foot { display: flex; flex-wrap: wrap; gap: var(--space-11); justify-content: space-between; align-items: flex-start; }
.foot h4 {
  font-size: var(--font-size-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-tertiary); margin-bottom: var(--space-8);
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-7); }
.foot a { color: var(--color-body); text-decoration: none; font-size: var(--font-size-4xl); }
.foot a:hover { color: var(--color-text-tertiary); text-decoration: underline; }
.fine { margin-top: var(--space-12); font-size: var(--font-size-xl); color: var(--color-body); }

/* ---------- Reveal ---------- */
.reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--motion-duration-fast) var(--motion-ease),
              transform var(--motion-duration-fast) var(--motion-ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Decorative botanical motif ----------
   Geometry lives once in the #thj-sprig / #thj-branch sprite; every instance is
   a <use> of it. Per-instance overrides come in as custom properties:
   --leaf-size, --leaf-rot, --leaf-opacity, --leaf-x, --leaf-y.
   Purely decorative: aria-hidden in markup, inert to pointers here.          */
.leaf-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.leaf {
  position: absolute;
  z-index: 0;
  display: block;
  width: var(--leaf-size, 76px);
  color: var(--color-leaf);
  opacity: var(--leaf-opacity, 0.45);
  transform: rotate(var(--leaf-rot, -14deg)) scale(var(--leaf-scale, 1));
  transform-origin: center;
  pointer-events: none;
  user-select: none;
}
.leaf svg { display: block; width: 100%; height: auto; }

.leaf--tl { top: var(--leaf-y, 8px); left: var(--leaf-x, 8px); }
.leaf--tr { top: var(--leaf-y, 8px); right: var(--leaf-x, 8px); }
.leaf--bl { bottom: var(--leaf-y, 8px); left: var(--leaf-x, 8px); }
.leaf--br { bottom: var(--leaf-y, 8px); right: var(--leaf-x, 8px); }

/* Content always sits above the decoration. */
.wrap { position: relative; z-index: 1; }
.band-dark > *:not(.leaf),
.band-soft > *:not(.leaf),
.card > *:not(.leaf) { position: relative; z-index: 1; }

.band-dark, .band-soft { position: relative; overflow: hidden; }
.site-footer { position: relative; overflow: hidden; }

/* Leaves inside the dark band read as tint rather than line work. */
.band-dark .leaf { color: var(--color-blush); }

/* ---------- Interior page header ---------- */
.page-header {
  padding-block: var(--space-13) var(--space-12);
  background:
    radial-gradient(90% 130% at 88% 0%, var(--color-band-soft), transparent 62%),
    var(--color-page);
  border-bottom: 1px solid var(--color-border);
}
.page-header h1 { font-size: var(--font-size-display-2); }
.page-header .section-head { max-width: 62ch; }
.page-header p { color: var(--color-body); }

/* ---------- CTA band ---------- */
.cta-band {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--space-11);
}
.cta-band h2 { font-size: var(--font-size-display-3); }
.cta-band p { color: var(--color-on-dark-muted); margin-top: var(--space-7); max-width: 46ch; }

/* ---------- Policy prose ---------- */
.policy { display: grid; gap: var(--space-12); max-width: 68ch; }
.policy h2 { font-size: var(--font-size-display-3); margin-bottom: var(--space-8); }
.policy p { color: var(--color-body); }
.policy a { color: var(--color-accent); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* Fewer, smaller leaves as the layout narrows. */
  :root { --leaf-scale: 0.78; }
  .leaf--hide-sm { display: none; }

  .hero-grid, .about-grid { grid-template-columns: 1fr; }
  .creds-list { grid-template-columns: 1fr; }
  .creds-strip { align-items: start; }
  /* A square box so the 1:1 rings stay inside it and clear of the button. */
  .hero-aside .hero-art { width: min(300px, 78vw); aspect-ratio: 1; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .who-strip { grid-template-columns: repeat(2, 1fr); }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-links {
    display: none; position: absolute; inset: 76px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-page);
    border-bottom: 1px solid var(--color-border);
    padding: 0 var(--layout-gutter) var(--space-10);
  }
  .nav-links[data-open="true"] { display: flex; }
  .nav-links .nav-link { padding-block: var(--space-10); border-bottom: 1px solid var(--color-border); }
  .nav-links .btn { margin-top: var(--space-9); }
}
@media (max-width: 640px) {
  :root { --leaf-scale: 0.6; }
  .leaf { opacity: calc(var(--leaf-opacity, 0.45) * 0.8); }

  .grid--3, .grid--2, .form-row { grid-template-columns: 1fr; }
  .who-strip { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Blush bands ----------
   The former dark bands are now a soft warm blush surface with one large
   organic shape drifting in from the right. Text returns to the ink palette. */
.band-full, .creds-band, .band-dark {
  background: var(--color-blush-band);
  position: relative; overflow: hidden;
  isolation: isolate;
}
.band-full::after, .creds-band::after, .band-dark::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -14%; top: 50%; transform: translateY(-50%);
  width: min(48vw, 660px); height: 190%;
  background: var(--color-blush-blob);
  border-radius: 58% 42% 46% 54% / 52% 47% 53% 48%;
  opacity: .75;
  filter: blur(28px);
}
.band-full h2, .band-full h3,
.creds-band h2, .creds-band h3,
.band-dark h2, .band-dark h3 { color: var(--color-ink-dark); }
.band-full .eyebrow, .band-dark .eyebrow { color: var(--color-accent); }
.band-full .section-head p, .band-full p,
.band-dark .section-head p, .band-dark p { color: var(--color-body); }
.band-full .leaf, .creds-band .leaf, .band-dark .leaf { color: var(--color-leaf); }

.band-full .step, .band-dark .step, .who-strip li { border-top-color: var(--color-border-strong); }
.band-full .step .num, .band-dark .step .num { color: var(--color-accent); }
.band-full .step p, .band-dark .step p, .who-strip p { color: var(--color-body); }

.creds-list li { color: var(--color-body); }
.creds-list strong { color: var(--color-ink-dark); }
.creds-avatar { border-color: var(--color-accent); }

@media (max-width: 700px) {
  .band-full::after, .creds-band::after, .band-dark::after {
    width: 92vw; right: -34%; height: 140%; opacity: .5;
  }
}

/* ---------- Ambient breeze ----------
   A dozen leaves drift right to left across the viewport, each with its own
   speed, size, bob and sway. Three nested elements so the three transforms
   (drift, bob, sway) never overwrite one another. Fixed, inert, and painted
   below every positioned element, so content always sits on top.            */
.breeze {
  position: fixed; inset: 0;
  overflow: hidden; pointer-events: none;
  z-index: 30;   /* drifts over content, still under the sticky header (40) */
}
.breeze-leaf {
  position: absolute; top: var(--top); left: 0;
  width: calc(52px * var(--scale, 1));
  animation: breeze-drift var(--dur, 48s) linear var(--delay, 0s) infinite;
  will-change: transform;
}
.breeze-bob {
  display: block;
  animation: breeze-bob var(--bob-dur, 9s) ease-in-out var(--delay, 0s) infinite alternate;
}
.breeze-sway {
  display: block;
  color: var(--color-leaf-breeze);
  opacity: calc(var(--op, .24) + .2);
  animation: breeze-sway var(--sway-dur, 13s) ease-in-out var(--delay, 0s) infinite alternate;
}
.breeze-leaf svg { display: block; width: 100%; height: auto; }

@keyframes breeze-drift {
  from { transform: translate3d(calc(100vw + 120px), 0, 0); }
  to   { transform: translate3d(-140px, 0, 0); }
}
@keyframes breeze-bob {
  from { transform: translateY(calc(var(--bob, 28px) * -1)); }
  to   { transform: translateY(var(--bob, 28px)); }
}
@keyframes breeze-sway {
  from { transform: rotate(-14deg); }
  to   { transform: rotate(16deg); }
}

/* Fewer, smaller leaves on small screens. */
@media (max-width: 700px) {
  .breeze-leaf { width: calc(38px * var(--scale, 1)); }
  .breeze-leaf:nth-child(4n) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .breeze { display: none; }
}

/* ---------- Quote line ----------
   The short italic line that sits under a heading or FAQ question.          */
.quote-line {
  font-style: italic;
  color: var(--color-accent);
  font-size: var(--font-size-body-lg);
  margin-top: var(--space-9);
}

/* ---------- Hours table ---------- */
.table-wrap { overflow-x: auto; }
.hours {
  width: 100%; border-collapse: collapse;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.hours th, .hours td {
  text-align: left; padding: var(--space-9) var(--space-10);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-4xl);
}
.hours thead th {
  font-size: var(--font-size-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-tertiary); font-weight: var(--font-weight-bold);
}
.hours tbody th { font-weight: var(--font-weight-bold); color: var(--color-text-primary); }
.hours td { color: var(--color-body); }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: var(--space-9); }
.faq-item {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-10) var(--space-11);
}
.faq-item + .faq-item { margin-top: 0; }
.faq-item summary {
  cursor: pointer; list-style: none;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  font-size: var(--font-size-body-lg);
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-10);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none;
  font-weight: var(--font-weight-bold); color: var(--color-accent);
  transition: transform var(--motion-duration-fast) var(--motion-ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .quote-line { margin-top: var(--space-9); font-size: var(--font-size-4xl); }
.faq-item p:last-child { color: var(--color-body); margin-top: var(--space-8); }
.faq-item summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* ---------- Service detail cards ---------- */
.card .card-quote {
  font-style: italic; color: var(--color-accent);
  margin-top: var(--space-7);
}

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

/* ---------- About: quick facts ---------- */
.facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-10) clamp(var(--space-10), 3vw, var(--space-12));
  margin: 0; padding: var(--space-11) 0 0;
  border-top: 1px solid var(--color-border);
}
.facts dt {
  font-size: var(--font-size-xs); letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: var(--font-weight-bold); color: var(--color-text-tertiary);
  margin-bottom: var(--space-7);
}
.facts dd { margin: 0; color: var(--color-body); font-size: var(--font-size-4xl); }

/* ---------- About: training timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-10); }
.timeline li {
  position: relative; padding-left: var(--space-11);
  border-left: 1px solid var(--color-border);
  padding-block: var(--space-4) var(--space-8);
}
.timeline li::before {
  content: ""; position: absolute; left: -5px; top: 12px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-accent);
}
.timeline h3 { font-size: var(--font-size-body-lg); margin-bottom: var(--space-7); }
.timeline p { color: var(--color-body); font-size: var(--font-size-4xl); }

.prose .eyebrow { margin-bottom: var(--space-8); }
.prose h2 { margin-bottom: var(--space-10); }

@media (max-width: 900px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .facts { grid-template-columns: 1fr; }
}

/* ---------- Resources: article list ----------
   Each article is a <details>, so the page reads as an index and opens into
   long-form text in place.                                                  */
.articles { display: grid; gap: var(--space-10); }
.article {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-11) clamp(var(--space-11), 3vw, var(--space-12));
}
.article summary {
  cursor: pointer; list-style: none;
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-10);
  align-items: start;
}
.article summary::-webkit-details-marker { display: none; }
.article-icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--color-band-soft); font-size: 20px;
}
.article-topic {
  display: block;
  font-size: var(--font-size-xs); letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: var(--font-weight-bold); color: var(--color-accent);
  margin-bottom: var(--space-7);
}
.article-title {
  display: block;
  font-family: var(--font-family-heading, inherit);
  font-size: var(--font-size-display-3, 1.25rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1.25;
}
.article-standfirst {
  display: block; margin-top: var(--space-7);
  color: var(--color-body); font-size: var(--font-size-4xl);
}
.article summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; }
.article[open] summary { margin-bottom: var(--space-10); }

.article-body {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-10);
  max-width: 68ch;
}
.article-body h3 {
  font-size: var(--font-size-body-lg);
  margin: var(--space-11) 0 var(--space-8);
}
.article-body h3:first-child { margin-top: 0; }
.article-body p { color: var(--color-body); }
.article-body p + p { margin-top: var(--space-9); }
.article-body ul, .article-body ol {
  margin: var(--space-9) 0 0; padding-left: var(--space-11);
  display: grid; gap: var(--space-8);
  color: var(--color-body);
}
.article-body li::marker { color: var(--color-accent); }

@media (max-width: 620px) {
  .article summary { grid-template-columns: 1fr; gap: var(--space-9); }
}

/* ---------- Take a minute: hero entry point ---------- */
.hero-aside { display: grid; gap: var(--space-10); justify-items: center; }
.hero-aside .hero-art { width: 100%; }
.btn--quiet {
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
  gap: var(--space-8);
}
.btn--quiet:hover { background: var(--color-band); }
.btn--quiet .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-leaf);
  animation: quiet-pulse 4s ease-in-out infinite;
}
@keyframes quiet-pulse {
  0%, 100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.35); opacity: 1; }
}

/* ---------- The breathing page ----------
   Its own quiet shell: no nav, no footer, one orb and a clock.             */
.breathe-page { background: var(--color-page); }
.breathe-brand {
  position: absolute; top: var(--space-11); left: var(--space-12);
  display: inline-flex; align-items: center; gap: var(--space-7);
  text-decoration: none; color: var(--color-text-primary);
  font-weight: var(--font-weight-bold); letter-spacing: -0.01em;
  opacity: .7; transition: opacity var(--motion-duration-fast) var(--motion-ease);
}
.breathe-brand:hover { opacity: 1; }

.breathe {
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  padding: clamp(var(--space-13), 12vh, 140px) var(--space-11) var(--space-12);
  position: relative; overflow: hidden;
  text-align: center;
}
.breathe-stage, .breathe-done { display: grid; justify-items: center; }
.breathe-stage[hidden], .breathe-done[hidden] { display: none; }
.breathe-done h1 { font-size: var(--font-size-display-2); outline: none; }
.breathe-done p { color: var(--color-body); font-size: var(--font-size-body-lg); margin-top: var(--space-9); }

/* Orb: concentric hairlines echoing the hero arch, with a soft core that
   scales with the breath. */
.orb-wrap {
  position: relative; display: grid; place-items: center;
  width: min(340px, 68vw); aspect-ratio: 1;
  margin-bottom: clamp(var(--space-12), 5vh, var(--space-13));
}
.orb-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.orb-ring-track, .orb-ring-progress {
  fill: none; stroke-width: 0.6;
}
.orb-ring-track { stroke: var(--color-border-strong); opacity: .5; }
.orb-ring-progress {
  stroke: var(--color-accent); stroke-linecap: round;
  transition: stroke-dashoffset 90ms linear;
}
.orb-halo {
  position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--color-border);
  animation: orb-halo 8s ease-in-out infinite;
}
@keyframes orb-halo {
  0%, 100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(1.06); opacity: .85; }
}
.orb {
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff 0%, var(--color-band) 45%, var(--color-accent-soft) 100%);
  box-shadow: 0 20px 60px rgba(126, 74, 69, .16);
  will-change: transform;
}
body[data-paused="true"] .orb-halo { animation-play-state: paused; }

.breathe-phase {
  font-family: inherit;
  font-size: var(--font-size-display-2);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.breathe-clock {
  margin-top: var(--space-9);
  font-size: var(--font-size-display-3);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
  letter-spacing: 0.06em;
}
.breathe-hint {
  margin-top: var(--space-9);
  color: var(--color-body);
  font-size: var(--font-size-body-lg);
}
.breathe-controls { margin-top: clamp(var(--space-12), 5vh, var(--space-13)); justify-content: center; }

@media (max-width: 620px) {
  .breathe-brand { top: var(--space-10); left: var(--space-10); font-size: var(--font-size-4xl); }
  .orb-wrap { width: 72vw; }
}

@media (prefers-reduced-motion: reduce) {
  .orb-halo, .btn--quiet .dot { animation: none; }
}

/* ---------- A note for today ----------
   A sealed envelope near the foot of the home page. Tapping it opens the note
   as a small pop-up; the picture changes on every visit.                     */
.note-stage { display: grid; justify-items: center; text-align: center; gap: var(--space-10); }
.note-stage h2 { margin-bottom: var(--space-10); }

/* ---- the envelope ---- */
.note-envelope {
  display: grid; justify-items: center; gap: var(--space-9);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.note-envelope-body {
  position: relative; display: block;
  width: clamp(170px, 22vw, 220px); aspect-ratio: 3 / 2;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-1);
  /* The paper drifts, the button itself stays put so it is easy to hit. */
  animation: note-float 5s ease-in-out infinite;
}
.note-envelope:hover .note-envelope-body,
.note-envelope:focus-visible .note-envelope-body {
  animation-play-state: paused; transform: translateY(-6px);
}
/* The two lower creases of the envelope. */
.note-envelope-body::before,
.note-envelope-body::after {
  content: ""; position: absolute; bottom: 0; width: 56%; height: 78%;
  border-top: 1px solid var(--color-border);
}
.note-envelope-body::before { left: 0; transform-origin: bottom left; transform: skewY(26deg); }
.note-envelope-body::after { right: 0; transform-origin: bottom right; transform: skewY(-26deg); }

.note-flap {
  position: absolute; inset: -1px -1px auto -1px; height: 62%;
  background: var(--color-band);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.note-seal {
  position: absolute; left: 50%; top: 52%; width: 32px; height: 32px;
  margin: -16px 0 0 -16px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff 0%, var(--color-band) 45%, var(--color-accent-soft) 100%);
  border: 1px solid var(--color-accent);
}
.note-hint {
  color: var(--color-body);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
}

@keyframes note-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ---- the pop-up ---- */
body[data-note-open="true"] { overflow: hidden; }

.note-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: var(--space-11);
  background: color-mix(in srgb, var(--color-ink-dark) 44%, transparent);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--motion-duration-fast) var(--motion-ease);
}
.note-overlay[data-visible="true"] { opacity: 1; }
.note-overlay:focus { outline: none; }

.note-popup { display: grid; justify-items: center; gap: var(--space-10); }

.note-card {
  margin: 0;
  width: min(400px, 82vw);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(43, 37, 35, .34);
  animation: note-rise 420ms var(--motion-ease) both;
}
.note-card img {
  /* Each picture keeps its own shape — nothing is cropped. */
  display: block; width: 100%; height: auto;
  max-height: 74vh; object-fit: contain;
  background: var(--color-card);
}
.note-close { background: var(--color-page); border-color: transparent; }

@keyframes note-rise {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .note-envelope-body, .note-card { animation: none; }
  .note-overlay { transition: none; }
}