/* Isle Bree — components & layout. Token-only styling. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
p { margin: 0 0 var(--sp-3); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--forest); }
:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius: var(--r-chip);
}
.section--forest :focus-visible,
.site-footer :focus-visible,
.mobile-menu :focus-visible {
  outline-color: var(--sage);
}
::selection { background: var(--moss); color: var(--cream); }

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

.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -4rem;
  background: var(--forest);
  color: var(--cream);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-chip);
  z-index: 200;
  transition: top var(--dur-ui) var(--ease-out);
}
.skip-link:focus { top: var(--sp-2); color: var(--cream); }

/* ---------- utilities ---------- */
.container { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass-ink);
  margin-bottom: var(--sp-3);
}
.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: .7;
}
.on-dark .eyebrow { color: var(--sage); }
.lede { font-size: clamp(1.125rem, 1rem + .6vw, 1.3125rem); line-height: 1.55; color: var(--text-soft); max-width: 38rem; }
.on-dark .lede { color: var(--text-inv-soft); }
em.accent { font-style: italic; color: var(--accent); }
.on-dark em.accent { color: var(--sage); }

/* ---------- reveal ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
}
.reveal {
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--stagger, 0ms);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- custom cursor ---------- */
.cursor-dot, .cursor-ring {
  display: none;
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 300;
  border-radius: 50%;
  translate: -50% -50%;
}
.cursor-dot { width: 6px; height: 6px; background: var(--brass); }
.cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid rgba(169, 138, 79, .65);
  transition: width var(--dur-ui) var(--ease-out), height var(--dur-ui) var(--ease-out), opacity var(--dur-ui);
}
.cursor-ring.is-active { width: 56px; height: 56px; }
@media (pointer: fine) {
  body.has-cursor { cursor: none; }
  body.has-cursor a, body.has-cursor button,
  body.has-cursor input, body.has-cursor select, body.has-cursor textarea,
  body.has-cursor label { cursor: none; }
  body.has-cursor .cursor-dot, body.has-cursor .cursor-ring { display: block; }
}
.cursor-ring.is-field { width: 16px; height: 16px; opacity: .55; }

/* ---------- header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: transform 350ms var(--ease-out), background-color 350ms var(--ease-out), box-shadow 350ms var(--ease-out);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header:has(.menu-toggle[aria-expanded="true"]) {
  z-index: 140;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header:has(.menu-toggle[aria-expanded="true"]) .brand,
.site-header:has(.menu-toggle[aria-expanded="true"]) .brand-sub { color: var(--cream); }
.site-header.is-solid {
  background: rgba(246, 243, 234, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.header-inner {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text); }
.brand:hover { color: var(--text); }
.brand img { width: 2.75rem; height: 2.75rem; border-radius: var(--r-chip); box-shadow: 0 2px 10px rgba(31,36,25,.18); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text .brand-name { font-family: var(--font-display); font-size: 1.28rem; letter-spacing: .01em; }
.brand-text .brand-sub { font-size: .58rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--text-soft); }

.main-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); }
.main-nav a.nav-link {
  position: relative;
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .02em;
  padding-block: .35rem;
}
.main-nav a.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent-metal);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-ui) var(--ease-out);
}
.main-nav a.nav-link:hover::after,
.main-nav a.nav-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.main-nav .btn { margin-left: var(--sp-1); }

.menu-toggle {
  display: none;
  background: none;
  border: 0;
  width: 2.75rem; height: 2.75rem;
  padding: .6rem;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  z-index: 130;
}
.menu-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  transition: transform 300ms var(--ease-out), opacity 200ms, background-color 300ms;
}
.menu-toggle[aria-expanded="true"] span { background: var(--cream); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--forest);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  visibility: hidden;
  opacity: 0;
  transition: opacity 380ms var(--ease-out), visibility 0s 380ms;
}
.mobile-menu.is-open { visibility: visible; opacity: 1; transition: opacity 380ms var(--ease-out); }
.mobile-menu a.mnav-link {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  color: var(--cream);
  line-height: 1.25;
  display: block;
  padding-block: .35rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out), color var(--dur-ui);
  transition-delay: var(--stagger, 0ms);
}
.mobile-menu a.mnav-link[aria-current="page"] { color: var(--sage); }
.mobile-menu .mnav-cta { margin-top: var(--sp-4); opacity: 0; transform: translateY(18px); transition: opacity 450ms var(--ease-out) 360ms, transform 450ms var(--ease-out) 360ms; }
.mobile-menu.is-open .mnav-cta { opacity: 1; transform: none; }
.mobile-menu.is-open a.mnav-link { opacity: 1; transform: none; }
.mobile-menu a.mnav-link:hover { color: var(--sage); }
.mobile-menu .mnav-contact { margin-top: var(--sp-5); color: var(--text-inv-soft); opacity: 0; transition: opacity 500ms var(--ease-out) 420ms; }
.mobile-menu.is-open .mnav-contact { opacity: 1; }
.mobile-menu .mnav-contact a { color: var(--cream); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .95rem 1.7rem;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), transform 300ms var(--ease-out);
  will-change: transform;
}
.btn svg { width: 1rem; height: 1rem; transition: transform var(--dur-ui) var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn--primary { background: var(--accent); color: var(--cream); }
.btn--primary:hover { background: var(--forest); color: var(--cream); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--ghost-on-dark { background: transparent; color: var(--cream); border-color: var(--line-inv); }
.btn--ghost-on-dark:hover { border-color: var(--sage); color: var(--sage); }
.btn--sm { padding: .6rem 1.15rem; font-size: var(--fs-caption); }

/* ---------- ring rule divider ---------- */
.ring-rule { display: block; width: 100%; height: clamp(56px, 7vw, 92px); color: var(--accent-metal); }
.ring-rule line, .ring-rule circle { vector-effect: non-scaling-stroke; }

/* ---------- hero (home) ---------- */
.hero {
  position: relative;
  min-height: max(42rem, 100svh);
  display: flex;
  align-items: center;
  overflow: clip;
  background: var(--surface);
}
.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero-canvas canvas { display: block; width: 100%; height: 100%; }
/* No WebGL scene (phones, coarse pointers, a failed load): keep the hero warm
   rather than flat, with the same palette the grove draws in. */
.hero-canvas.is-fallback {
  background:
    radial-gradient(120% 90% at 78% 82%, color-mix(in srgb, var(--sage) 38%, transparent), transparent 62%),
    radial-gradient(100% 80% at 12% 18%, color-mix(in srgb, var(--surface-2) 85%, transparent), transparent 70%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: calc(var(--header-h) + var(--sp-5)) var(--gutter) var(--sp-5);
  display: grid;
}
.hero-copy {
  position: relative;
  max-width: 40rem;
}
.hero-copy::before {
  content: '';
  position: absolute;
  /* Widened 2026-09-23: same soft glow, just reaching further. The hero
     paragraph is longer than it was and its last lines run down into the
     grove's dark ground, where the old stops had already faded out. */
  inset: -30% -30% -46%;
  background: radial-gradient(closest-side,
    rgba(246, 243, 234, .97) 48%,
    rgba(246, 243, 234, .86) 68%,
    rgba(246, 243, 234, .42) 86%,
    rgba(246, 243, 234, 0) 100%);
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 60rem) {
  .hero-copy::before {
    inset: -14% -30% -42%;
    background: radial-gradient(closest-side, rgba(246, 243, 234, .97) 30%, rgba(246, 243, 234, .8) 55%, rgba(246, 243, 234, 0) 82%);
  }
}
.hero h1 {
  font-size: var(--fs-display-xl);
  font-weight: 340;
  letter-spacing: -.015em;
  margin-bottom: var(--sp-3);
}
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.hero h1 .line > span { display: block; transition: transform 900ms var(--ease-out); transition-delay: var(--stagger, 0ms); }
.js .hero h1 .line > span { transform: translateY(110%); }
.hero.is-ready h1 .line > span { transform: none; }
.hero .lede { margin-bottom: var(--sp-4); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.hero-meta {
  margin-top: var(--sp-4);
  display: flex;
  gap: var(--sp-2) var(--sp-4);
  flex-wrap: wrap;
  color: var(--text);
  font-size: var(--fs-caption);
}
.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(246, 243, 234, .88);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: .45rem .9rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-meta svg { width: .95rem; height: .95rem; color: var(--accent-metal); }
.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: var(--sp-4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-soft);
  writing-mode: vertical-rl;
}
.scroll-cue::after {
  content: '';
  width: 1px;
  height: 3.4rem;
  background: linear-gradient(var(--accent-metal), transparent);
  animation: cue 2.4s var(--ease-soft) infinite;
}
@keyframes cue {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- intro veil ---------- */
.veil {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: var(--forest);
  display: grid;
  place-items: center;
  transition: transform 850ms var(--ease-soft) 350ms, visibility 0s 1.3s;
}
.veil.is-lifted { transform: translateY(-101%); visibility: hidden; }
.veil-mark {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  color: var(--cream);
  letter-spacing: .01em;
  opacity: 0;
  animation: veil-in 900ms var(--ease-out) 80ms forwards;
}
.veil-mark .t { color: var(--sage); font-style: italic; }
@keyframes veil-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- sections ---------- */
.section { padding-block: clamp(4.5rem, 10vw, 8.5rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
/* Two parchment sections running together have no line between them, so their
   paddings stack into one void. Halve the boundary where they meet. */
.section--parchment + .section--parchment { padding-top: clamp(2rem, 4vw, 3.5rem); }
.section--parchment:has(+ .section--parchment) { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.section--parchment { background: var(--surface-2); }
.section--forest {
  background: var(--surface-ink);
  color: var(--text-inv);
  overflow: clip;
  padding-block: clamp(4rem, 9vw, 7.5rem);
}
.section--forest::before,
.section--forest::after {
  content: '';
  position: absolute;
  right: -18vw;
  width: 60vw;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--line-inv);
  pointer-events: none;
}
.section--forest::before { top: -30vw; box-shadow: 0 0 0 6vw transparent, inset 0 0 0 5vw transparent, 0 0 0 1px transparent; }
.section--forest::after { bottom: -38vw; border-color: var(--line-inv); }
.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.section-head h2 { font-size: var(--fs-display); font-weight: 360; letter-spacing: -.01em; }
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

/* belief strip */
/* the services list follows straight on, so this section does not need a
   full stop of padding under it as well as the one above the next */
.section:has(> .container > .beliefs) { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.beliefs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.belief { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.belief h3 { font-size: var(--fs-title); margin-bottom: var(--sp-2); }
.belief p { color: var(--text-soft); margin: 0; font-size: var(--fs-small); }


/* ---------- rings ---------- */
/* A stone dropped in a pool. Every ring walks the same path outward and fades
   as it goes, slowing as it spreads the way water does. They share one set of
   keyframes; a negative delay drops each one in at a different point, which is
   what makes the flow continuous instead of a pulse. */
@keyframes ring-drift {
  0%   { transform: scale(var(--s-min)); opacity: 0; }
  8%   { opacity: var(--base); }
  55%  { opacity: calc(var(--base) * .62); }
  100% { transform: scale(var(--s-max)); opacity: 0; }
}
.gr {
  --base: .42;
  --rmin: 5;
  --rmax: 100;
  --cycle: 14s;
  --s-min: calc(var(--rmin) / var(--r, 100));
  --s-max: calc(var(--rmax) / var(--r, 100));
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  animation: ring-drift var(--cycle) cubic-bezier(.16, .72, .3, 1) infinite;
  animation-delay: calc(var(--phase) * var(--cycle) * -1);
}
/* these two carry on well past their own box, so the ripple travels behind the
   photo and the copy instead of stopping at the edge of a small square */
.ring-deco .gr  { --r: 100; --rmin: 4; --rmax: 230; --cycle: 16s; --base: .38; }
.photo-ring .gr { --r: 100; --rmin: 4; --rmax: 430; --cycle: 15s; --base: .4; }
.ring-rule .gr  { --r: 700;  --rmin: 30; --rmax: 700;  --cycle: 17s; --base: .5; }

.founder-photo .photo-ring,
.page-hero .ring-deco { overflow: visible; }
/* clip at the section so a spreading ring can never push out a scrollbar */
.section:has(.founder-photo),
.page-hero { overflow: clip; }

@media (prefers-reduced-motion: reduce) {
  .gr { animation: none; transform: none; opacity: calc(var(--base) * .8); }
}

/* services rows */
.svc-list { border-top: 1px solid var(--line); }
.svc-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.5rem, 3.4vw, 2.6rem) clamp(.5rem, 1.5vw, 1.5rem);
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background-color 300ms var(--ease-out);
}
.svc-row:hover { background: var(--surface-2); }
.svc-num {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 300;
  font-style: italic;
  color: var(--accent-metal);
  display: flex;
  align-items: center;
  gap: .8rem;
}
.svc-num svg { width: 2.6rem; height: 2.6rem; transition: transform 500ms var(--ease-out); }
.svc-row:hover .svc-num svg { transform: rotate(90deg); }
.svc-body h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); margin-bottom: .4rem; }
.svc-body p { margin: 0; color: var(--text-soft); max-width: 44rem; font-size: var(--fs-small); }
.svc-arrow {
  width: 3.2rem; height: 3.2rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text);
  transition: background-color var(--dur-ui), color var(--dur-ui), border-color var(--dur-ui), transform var(--dur-ui);
}
.svc-arrow svg { width: 1.15rem; height: 1.15rem; }
.svc-row:hover .svc-arrow { background: var(--accent); border-color: var(--accent); color: var(--cream); }

/* why choose (forest) */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 2.6vw, 2.5rem); }
.why-card {
  border: 1px solid var(--line-inv);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: rgba(243, 239, 226, .03);
  transition: background-color 300ms var(--ease-out), transform 300ms var(--ease-out), border-color 300ms;
}
.why-card:hover { background: rgba(243, 239, 226, .06); transform: translateY(-4px); border-color: rgba(169, 138, 79, .5); }
.why-icon { width: 2.6rem; height: 2.6rem; color: var(--sage); margin-bottom: var(--sp-3); }
.why-card h3 { font-size: var(--fs-title); color: var(--text-inv); margin-bottom: var(--sp-2); }
.why-card p { color: var(--text-inv-soft); margin: 0; font-size: var(--fs-small); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3.4vw, 3.5rem); counter-reset: step; }
.step { position: relative; padding-top: var(--sp-4); }
.step-ring { position: relative; width: 5.4rem; height: 5.4rem; margin-bottom: var(--sp-3); }
.step-ring svg { width: 100%; height: 100%; color: var(--accent-metal); }
.step-ring .step-n {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.7rem;
  color: var(--accent);
}
.step h3 { font-size: var(--fs-title); margin-bottom: var(--sp-2); }
.step p { color: var(--text-soft); font-size: var(--fs-small); margin: 0; }

/* about preview / founder */
.founder-photo { position: relative; }
.founder-photo .photo-card {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 1 / 1;
  max-width: 24rem;
  rotate: -2deg;
}
.founder-photo .photo-card img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.founder-photo .photo-ring {
  position: absolute;
  width: 11rem;
  height: 11rem;
  right: -3rem;
  bottom: -3.4rem;
  color: var(--accent-metal);
  opacity: .85;
  z-index: -1;
}
.founder-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.4;
  color: var(--accent);
  border-left: 2px solid var(--accent-metal);
  padding-left: var(--sp-3);
  margin: var(--sp-4) 0;
}
.creds { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.cred {
  display: inline-flex;
  align-items: center;
  background: var(--badge-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  padding: .5rem .95rem;
  height: 3.25rem;
}
.cred img { height: 100%; width: auto; display: block; }
.cred--pad img { padding-block: .2rem; }

/* registrations: an argument, not a logo row */
.regs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: var(--sp-4);
}
.reg {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* the marks carry their own white backgrounds, so they sit on a chip rather
   than as white rectangles on the parchment */
.reg > img {
  height: 3.1rem;
  width: auto;
  align-self: center;
  margin-bottom: var(--sp-3);
  background: var(--badge-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  padding: .55rem 1rem;
  box-sizing: content-box;
}
.reg h3 { font-size: var(--fs-title); margin-bottom: var(--sp-2); }
.reg p { color: var(--text-soft); font-size: var(--fs-small); margin-bottom: var(--sp-2); }
.reg-num {
  font-family: var(--font-display);
  font-size: 1.15rem !important;
  color: var(--accent) !important;
  letter-spacing: .02em;
  margin-top: auto;
}
.reg-num span {
  display: block;
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: .15rem;
}
.reg-link {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: .45rem;
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .22em;
}
.reg-link svg { width: 1rem; height: 1rem; }
@media (max-width: 60rem) {
  .regs { grid-template-columns: 1fr; max-width: 34rem; }
}

/* big CTA band */
.cta-band { text-align: center; }
/* The closing CTA and the footer are both forest green with no line between
   them, so their two paddings stack into one large void. The footer sits
   outside <main>, so this keys off the band being the last thing in it. */
main > .cta-band:last-child { padding-bottom: clamp(1.25rem, 2.5vw, 2.25rem); }
.cta-band h2 { font-size: var(--fs-display); font-weight: 360; max-width: 52rem; margin-inline: auto; }
.cta-band .lede { margin-inline: auto; }
.cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.cta-phone { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--text); font-size: 1.05rem; }
.cta-phone svg { width: 1.1rem; height: 1.1rem; color: var(--accent-metal); }
.cta-phone:hover { color: var(--accent); }

/* ---------- footer ---------- */
.footer-mark { display: block; width: 6rem; height: auto; margin-bottom: var(--sp-2); opacity: .95; }
.site-footer {
  background: var(--forest);
  color: var(--text-inv-soft);
  padding: clamp(3.5rem, 7vw, 6rem) 0 var(--sp-4);
  position: relative;
  overflow: clip;
}
.site-footer::before {
  content: '';
  position: absolute;
  left: -22vw;
  top: -34vw;
  width: 66vw;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--line-inv);
  pointer-events: none;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 5rem);
  position: relative;
}
.footer-brand img { width: 4.4rem; height: 4.4rem; border-radius: var(--r-chip); margin-bottom: var(--sp-3); }
.footer-brand p { font-size: var(--fs-small); max-width: 22rem; color: var(--text-inv-soft); }
.site-footer h4 {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: var(--sp-3);
}
.footer-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-nav a { color: var(--text-inv-soft); font-size: var(--fs-small); transition: color var(--dur-ui); }
.footer-nav a:hover { color: var(--cream); }
.footer-contact { display: grid; gap: .9rem; font-size: var(--fs-small); }
.footer-contact a { color: var(--cream); display: inline-flex; gap: .6rem; align-items: center; }
.footer-contact a:hover { color: var(--sage); }
.footer-contact svg { width: 1rem; height: 1rem; color: var(--accent-metal); flex: none; }
.footer-social { display: flex; gap: .9rem; margin-top: .3rem; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 1px solid var(--line-inv); color: var(--cream); transition: border-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out); }
.footer-social a:hover { color: var(--sage); border-color: var(--sage); }
.footer-social svg { width: 1.6rem; height: 1.6rem; color: inherit; }
.footer-legal {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-inv);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-caption);
}
.footer-legal nav { display: flex; gap: var(--sp-3); }
.footer-legal a { color: var(--text-inv-soft); }
.footer-legal a:hover { color: var(--cream); }

/* ---------- inner page hero ---------- */
.page-hero {
  padding: calc(var(--header-h) + clamp(3.5rem, 8vw, 6.5rem)) 0 clamp(2.5rem, 5vw, 4rem);
  background: var(--surface);
  position: relative;
  overflow: clip;
}
.page-hero .ring-deco {
  position: absolute;
  right: -10rem;
  top: -3rem;
  width: 36rem;
  height: 36rem;
  color: var(--accent-metal);
  opacity: .55;
  pointer-events: none;
}
.page-hero h1 { font-size: var(--fs-display-xl); font-weight: 340; letter-spacing: -.015em; max-width: 56rem; }
.page-hero .lede { margin-top: var(--sp-2); }

/* timeline (about) */
.timeline { border-left: 1px solid var(--line); margin-left: .4rem; padding-left: clamp(1.5rem, 4vw, 3rem); display: grid; gap: var(--sp-5); position: relative; }
.timeline-item { position: relative; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * clamp(1.5rem, 4vw, 3rem) - .42rem);
  top: .5rem;
  width: .8rem; height: .8rem;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent-metal);
}
.timeline-item h3 { font-size: var(--fs-title); margin-bottom: var(--sp-1); }
.timeline-item p { color: var(--text-soft); margin: 0; font-size: var(--fs-small); }

/* service detail (services page) */
.svc-detail {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--line);
  align-items: start;
}
.svc-detail:last-of-type { border-bottom: 1px solid var(--line); }
.svc-detail .svc-num { font-size: clamp(2.6rem, 4.5vw, 4rem); }
.svc-detail h2 { font-size: var(--fs-display); font-weight: 380; }
.svc-detail .lede { font-size: var(--fs-body); }
.svc-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.svc-points li { display: flex; gap: .8rem; align-items: flex-start; color: var(--text-soft); font-size: var(--fs-small); }
.svc-points svg { width: 1.1rem; height: 1.1rem; color: var(--accent-metal); flex: none; margin-top: .2rem; }
/* Fees band: sits above the Xero band on Services. Deliberately lighter than
   .xero-band so two full-width panels do not fight each other. */
.fees-band {
  margin-top: clamp(3rem, 6vw, 5rem);
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--forest) 14%, transparent);
  border-radius: var(--r-card);
  padding: clamp(2rem, 4.5vw, 3.5rem);
  max-width: 54rem;
}
.fees-band h3 { margin: .2rem 0 1rem; }
.fees-band p { margin-bottom: 1rem; }
.fees-points { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .7rem; }
.fees-points li { position: relative; padding-left: 1.6rem; }
.fees-points li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--sage);
}
.fees-ask {
  margin: 1.6rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--forest);
}

.xero-band {
  margin-top: clamp(3rem, 6vw, 5rem);
  background: var(--forest);
  color: var(--text-inv);
  border-radius: var(--r-card);
  padding: clamp(2rem, 4.5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  overflow: hidden;
  position: relative;
}
.xero-band::after {
  content: '';
  position: absolute;
  right: -8rem; bottom: -12rem;
  width: 24rem; height: 24rem;
  border-radius: 50%;
  border: 1px solid var(--line-inv);
  box-shadow: 0 0 0 3rem rgba(243,239,226,.02), 0 0 0 6rem rgba(243,239,226,.02);
  pointer-events: none;
}
.xero-band h3 { color: var(--text-inv); font-size: var(--fs-display); font-weight: 380; }
.xero-band p { color: var(--text-inv-soft); margin: 0; font-size: var(--fs-small); }
.xero-creds { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; }
.xero-creds .xero-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-inv);
  border-radius: var(--r-pill);
  padding: .55rem 1.1rem;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-inv);
  background: rgba(243, 239, 226, .05);
}
.xero-creds .xero-chip svg { width: 1rem; height: 1rem; margin-right: .5rem; color: var(--sage); }

/* legal pages */
.legal { max-width: 48rem; margin-inline: auto; }
.legal h2 { font-size: var(--fs-title); margin-top: var(--sp-5); }
.legal h3 { font-size: 1.25rem; margin-top: var(--sp-4); }
.legal p, .legal li { color: var(--text-soft); font-size: var(--fs-small); }
.legal a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-metal); }
.legal ul { padding-left: 1.2rem; display: grid; gap: .5rem; }
.legal .updated { font-size: var(--fs-caption); color: var(--bark); font-style: italic; }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .main-nav { display: none; }
  .menu-toggle { display: flex; }
  .split, .svc-detail, .xero-band { grid-template-columns: 1fr; }
  .xero-creds { justify-content: flex-start; }
  .beliefs, .steps { grid-template-columns: 1fr; max-width: 34rem; }
  .why-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .svc-row { grid-template-columns: 3.4rem minmax(0,1fr); }
  .svc-arrow { display: none; }
  .svc-num svg { width: 1.9rem; height: 1.9rem; }
  .founder-photo { max-width: 26rem; }
  .hero { min-height: max(38rem, 92svh); }
  .hero-inner { padding-top: calc(var(--header-h) + var(--sp-5)); }
  .scroll-cue { display: none; }
}
@media (min-width: 60.01rem) {
  .hero-inner { grid-template-columns: minmax(0, 6.2fr) minmax(0, 5.8fr); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero h1 .line > span { transform: none; }
  .veil { display: none; }
  .scroll-cue::after { animation: none; }
}

/* ---------- contact ---------- */
#contact-form { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.contact-aside .direct { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.direct-item {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  transition: border-color var(--dur-ui), transform 300ms var(--ease-out);
}
.direct-item:hover { border-color: var(--accent-metal); transform: translateY(-3px); }
.direct-item svg { width: 1.3rem; height: 1.3rem; color: var(--accent-metal); flex: none; margin-top: .15rem; }
.direct-item .d-label { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); margin-bottom: .15rem; }
.direct-item a { font-family: var(--font-display); font-size: 1.2rem; color: var(--text); }
.direct-item a:hover { color: var(--accent); }
.direct-item .d-note { font-size: var(--fs-caption); color: var(--text-soft); }
.contact-form-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 3.5vw, 3rem);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.contact-form-card::before {
  content: '';
  position: absolute;
  right: -7rem; top: -7rem;
  width: 15rem; height: 15rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  box-shadow: 0 0 0 2.4rem rgba(31,36,25,.02), 0 0 0 4.8rem rgba(31,36,25,.02);
  pointer-events: none;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); position: relative; }
.field { display: grid; gap: .45rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-caption); font-weight: 600; letter-spacing: .04em; color: var(--text); }
.field label .req { color: var(--accent-metal); }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: var(--fs-small);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  padding: .85rem 1rem;
  transition: border-color var(--dur-ui), box-shadow var(--dur-ui);
  width: 100%;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(97, 110, 67, .18);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #9A4A2E; }
.field .error { font-size: var(--fs-caption); color: #9A4A2E; display: none; }
.field.has-error .error { display: block; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); position: relative; }
.form-note { font-size: var(--fs-caption); color: var(--text-soft); max-width: 24rem; }
.form-status { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--accent); position: relative; }
.form-status[hidden] { display: none; }
@media (max-width: 60rem) {
  .contact-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}