/* ============ Fonts ============ */

@font-face {
  font-family: "Feijoa";
  src: url("/assets/fonts/feijoa-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Feijoa";
  src: url("/assets/fonts/feijoa-medium-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Feijoa";
  src: url("/assets/fonts/feijoa-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Feijoa Display";
  src: url("/assets/fonts/feijoa-display.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Thorn And Thistle";
  src: url("/assets/fonts/ThornAndThistle-Regular.woff2") format("woff2"),
       url("/assets/fonts/ThornAndThistle-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============ Tokens ============ */

:root {
  --cream: #f5efe7;
  --green: #27463f;
  --teal: #99cfcd;
  --mustard: #e0a14b;

  --green-ink: #1c332e;
  --green-deep: #062a22;
  --cream-soft: #fbf8f3;
  --line-on-cream: rgba(39, 70, 63, 0.14);
  --error: #b3392c;

  --font-display: "Feijoa Display", "Fraunces", Georgia, serif;
  --font-heading: "Feijoa", "Fraunces", Georgia, serif;
  --font-body: "Arvo", Georgia, serif;
  --font-eyebrow: "Thorn And Thistle", var(--font-body);

  --container: 1180px;
  --gutter: clamp(24px, 5vw, 64px);
  --section-space: clamp(64px, 10vw, 140px);

  --radius-pill: 999px;
  --radius-card: 18px;
  --radius-reveal: 32px;

  --ease-organic: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============ Reset ============ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Matches the footer, not the page: this is the canvas color, so it's
     whatever shows through if the reveal-footer clip ever falls a hair
     short of main's own - green there reads as more footer, cream would
     read as a visible seam. */
  background: var(--green-deep);
  color: var(--green-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* body's own box still out-stacks the fixed, negative z-index footer
     for pointer-event purposes even though its background paints at the
     canvas layer, beneath the footer, for visual purposes - without this,
     body silently intercepts clicks meant for the footer wherever it's
     revealed. Opt the real interactive regions back in below. */
  pointer-events: none;
}
.skip-link, .site-header, main, .site-footer { pointer-events: auto; }
main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
main > section:last-of-type {
  flex: 1;
  display: flex;
  align-items: center;
}
main > section:last-of-type > .wrap {
  width: 100%;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green);
  color: var(--cream);
  padding: 12px 20px;
  z-index: 200;
}
.skip-link:focus { left: 16px; top: 16px; }

.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;
}

/* ============ Type scale ============ */

.eyebrow {
  display: inline-block;
  font-family: var(--font-eyebrow);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}

h1, .h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
h2, .h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.15;
}
h3, .h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.3;
}
.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.6;
}
em, .accent-word {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--teal);
}

/* ============ Buttons & links ============ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
}

.btn--accent {
  background: var(--mustard);
  color: var(--green-ink);
}
.btn--accent:hover {
  background: transparent;
  color: var(--mustard);
  border-color: var(--mustard);
}

.hero .btn--accent { background: var(--teal); }
.hero .btn--accent:hover {
  background: transparent;
  color: var(--teal);
  border-color: var(--teal);
}

.btn--outline-mustard {
  border-color: var(--mustard);
  color: var(--mustard);
}
.btn--outline-mustard:hover {
  background: var(--mustard);
  color: var(--green-ink);
}

.btn--outline-green {
  border-color: var(--line-on-cream);
  color: var(--green);
}
.btn--outline-green:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--cream);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-family: var(--font-body);
}
.link-arrow .arrow { transition: transform 0.3s var(--ease-organic); }
.link-arrow:hover .arrow { transform: translateX(6px); }

/* ============ Layout helpers ============ */

.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
section { padding-block: var(--section-space); }
.on-green { background: var(--green); color: var(--cream); }
.on-cream-soft { background: var(--cream-soft); }
.on-cream { background: var(--cream); }
.on-teal { background: var(--teal); color: var(--green-ink); }

/* ============ Header ============ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line-on-cream);
  transition: border-color 0.3s ease;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(245, 239, 231, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: -1;
  transition: opacity 0.3s ease;
}
.site-header__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-logo svg { height: 34px; width: auto; display: block; overflow: visible; }
.site-logo svg [class^="cls-Kaleo"] { transition: fill 0.3s ease; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
  font-size: 0.95rem;
}
.site-nav a:not(.btn) {
  opacity: 0.82;
  text-decoration: none;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  transition: opacity 0.2s ease, color 0.3s ease, text-decoration-color 0.2s ease;
  /* Isolates each link on its own compositing layer - works around a
     long-standing WebKit bug where :hover fails to release on elements
     inside a position:fixed + backdrop-filter ancestor that gets its
     class toggled by JS (exactly our fixed, blurred, scroll-driven header). */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.site-nav a:not(.btn):hover, .site-nav a:not(.btn).active { opacity: 1; text-decoration-line: underline; }
.site-nav a:not(.btn).active { text-decoration-color: var(--mustard); }
.nav-cta { padding: 10px 22px; font-size: 0.88rem; }

.nav-toggle-label {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
  margin: -8px;
}
.nav-toggle-label span {
  width: 24px; height: 2px; background: var(--green);
  transition: transform 0.25s ease, opacity 0.25s ease, background-color 0.3s ease;
  /* Fixed-position header + Safari can leave a stale, un-rotated bar
     ghosted behind the animated ones after the page has scrolled - forcing
     its own compositing layer keeps every state fully repainted. */
  will-change: transform, opacity;
}
.nav-toggle-label[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle-label[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle-label[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle-label { display: flex; }
  /* A rounded card that drops down and sizes to its own content - not a
     full-screen takeover. Square top (flush with the header above it),
     rounded bottom, lifted off the page beneath with a soft shadow. */
  .site-nav {
    position: fixed;
    top: 66px;
    left: 0;
    right: 0;
    height: auto;
    max-height: calc(100dvh - 66px);
    overflow-y: auto;
    background: var(--cream);
    border-radius: 0 0 28px 28px;
    border-top: 1px solid #d9d7d0;
    box-shadow: 0 14px 24px -6px rgba(28, 51, 46, 0.5);
    /* Clips flush with the element's own top edge so the shadow's blur
       can't bleed upward onto the header, while staying clear of the
       sides/bottom where the shadow is meant to show. */
    clip-path: inset(0 -60px -60px -60px);
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
    font-size: 1.2rem;
    transform: translateY(-16px);
    opacity: 0;
    pointer-events: none;
    /* Opacity is intentionally left out of the transition: the panel is
       already fully opaque, so fading it in creates a second, independently
       -timed transparency layer overlapping the header's own solidify fade -
       visible as a seam where both show through at once. Snapping opacity
       and animating only the slide keeps it to one clean motion. */
    transition: transform 0.3s ease;
  }
  .site-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .site-nav a:not(.btn) { align-self: flex-start; }
  /* Self-contained pill, inset within the card's own padding - not a
     full-bleed bar. */
  .site-nav .nav-cta {
    width: 100%;
    margin-top: 8px;
    justify-content: center;
    font-size: 1.05rem;
  }
}

/* ============ Header: transparent-over-hero mode ============ */
/* Opt-in via body.hero-overlay (pages with a full-bleed dark hero).
   Starts see-through so the video shows through behind the nav, then
   solidifies to the normal cream header once the hero scrolls out of view. */

body.hero-overlay .site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  border-bottom-color: transparent;
}
body.hero-overlay .site-header::before { opacity: 0; }
body.hero-overlay .site-header .site-logo svg [class^="cls-Kaleo"] { fill: var(--cream); }
body.hero-overlay .site-header .site-nav a { color: var(--cream); }
body.hero-overlay .site-header .nav-toggle-label span { background: var(--cream); }

body.hero-overlay .site-header.is-scrolled { border-bottom-color: var(--line-on-cream); }
body.hero-overlay .site-header.is-scrolled::before { opacity: 1; }
body.hero-overlay .site-header.is-scrolled .site-logo svg [class^="cls-Kaleo"] { fill: var(--green-deep); }
body.hero-overlay .site-header.is-scrolled .site-nav a { color: var(--green-ink); }
body.hero-overlay .site-header.is-scrolled .nav-toggle-label span { background: var(--green); }

body.hero-overlay .hero { min-height: 100dvh; }

/* ============ Hero ============ */

.hero {
  position: relative;
  /* Matches the fixed footer/canvas color: before the video's first frame
     is ready, this is what's visible, and without it the fixed footer
     would show through the gap for a moment instead. */
  background: var(--green-deep);
  /* Fills exactly what's left below the sticky header, so the next
     section is already peeking into view on the very first scroll. */
  min-height: calc(100dvh - 67px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--cream);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media video, .hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 51, 46, 0.35) 0%, rgba(28, 51, 46, 0.55) 55%, rgba(28, 51, 46, 0.86) 100%);
  z-index: 1;
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(48px, 8vw, 96px);
}
.hero__eyebrow { color: var(--cream); letter-spacing: 0.112em; margin-bottom: 18px; }
.hero__title {
  max-width: 23ch;
  margin-bottom: 22px;
  /* Fluid between 400px and 1400px viewport width (33.6px to 59.2px).
     A wider interpolation range than a plain vw clamp spreads the same
     size change over more pixels of resize, so it still reaches a good
     size by tablet widths without feeling like a fast shrink while dragging. */
  font-size: clamp(2.1rem, 1.46rem + 2.56vw, 3.7rem);
}
.hero__lede { max-width: 60ch; opacity: 0.92; margin-bottom: 34px; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ============ Pillars ============ */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
}
.pillar__icon { height: 68px; width: auto; margin-bottom: 22px; }
.pillar__icon--lockup { height: 123px; } /* 150% of 82px */
.pillar h3 { margin-bottom: 12px; }
.pillar p { opacity: 0.85; }

@media (max-width: 860px) {
  .pillars { grid-template-columns: 1fr; gap: 40px; }
}

/* ============ Services ============ */

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.service-card {
  background: var(--cream);
  border: 1px solid var(--line-on-cream);
  border-radius: var(--radius-card);
  padding: 32px 26px;
  position: relative;
  overflow: hidden;
}
.service-card__body { position: relative; z-index: 1; }
.service-card h3 { margin-bottom: 10px; font-size: 1.3rem; }
.service-card p { font-size: 0.95rem; opacity: 0.85; margin-bottom: 18px; }

@media (max-width: 1000px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ============ Section heading ============ */

.section-head { max-width: 640px; margin-bottom: 48px; }
#contact-form-head { scroll-margin-top: 100px; }
.section-head .eyebrow { margin-bottom: 14px; display: block; }
.section-head p { margin-top: 16px; opacity: 0.8; }
.section-head--center { margin-inline: auto; text-align: center; }

/* Just wide enough to keep the "What Kaléo does" h2 on two balanced lines
   at desktop widths instead of three - it already wraps fine on its own
   at narrower viewports. */
.section-head--services { max-width: 740px; }

.error-page__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* ============ Quote band ============ */

.quote-band {
  background: var(--cream);
  border: 1px solid var(--line-on-cream);
  border-radius: var(--radius-card);
  padding: clamp(28px, 4vw, 40px);
  position: relative;
}
.quote-band__mark {
  font-family: var(--font-display);
  font-size: 3.75rem;
  line-height: 1;
  color: var(--mustard);
  display: block;
  margin-bottom: -4px;
}
.quote-band p:not(.quote-band__note) { font-family: var(--font-heading); font-size: 1.44rem; line-height: 1.35; margin-bottom: 26px; }
.quote-band cite { display: block; margin-top: 20px; font-style: normal; opacity: 0.7; font-size: 0.9rem; }
.quote-band .quote-band__note { font-family: var(--font-body); font-size: 0.95rem; opacity: 0.8; font-style: normal; }

.scenario-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 48px;
}

@media (max-width: 860px) {
  .scenario-grid { grid-template-columns: 1fr; }
}

/* ============ Colleges served (watermark) ============ */

.colleges-served { background: var(--cream); position: relative; overflow: hidden; scroll-margin-top: 100px; }
.colleges-served .wrap { position: relative; z-index: 1; }
.colleges-served__mark {
  position: absolute;
  bottom: 0;
  right: -20px;
  width: 440px;
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
}
.colleges-served__mark svg { width: 100%; height: auto; display: block; }

@media (max-width: 860px) {
  .colleges-served__mark { width: 280px; }
}

/* ============ Etymology block (About page) ============ */

.etymology { position: relative; overflow: hidden; }
.etymology .wrap { position: relative; z-index: 1; }
.etymology__mark {
  position: absolute;
  bottom: 0;
  right: -20px;
  width: 246px;
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
}
.etymology__mark svg { width: 100%; height: auto; display: block; }
@media (max-width: 860px) {
  .etymology__mark { width: 196px; }
}

.etymology__content { max-width: 640px; }
.etymology__entry {
  font-family: var(--font-body);
  font-size: 1.05rem;
  opacity: 0.75;
  margin-bottom: 20px;
}
.etymology__entry strong {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.35em;
  opacity: 1;
}
.etymology__definition {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.35;
  margin-bottom: 24px;
}

/* ============ Discipline list (colleges served) ============ */

.discipline-list {
  columns: 3;
  column-gap: 40px;
  margin-top: 32px;
  max-width: 980px;
}
.discipline-list li {
  break-inside: avoid;
  padding-block: 10px;
  border-bottom: 1px solid var(--line-on-cream);
  font-size: 0.95rem;
}

@media (max-width: 860px) {
  .discipline-list { columns: 2; }
}
@media (max-width: 560px) {
  .discipline-list { columns: 1; }
}

/* ============ CTA band ============ */

.cta-band {
  background: var(--cream);
  text-align: center;
  border-top: 1px solid var(--line-on-cream);
  border-bottom: 1px solid var(--line-on-cream);
}
.cta-band__inner { max-width: 640px; margin-inline: auto; }
.cta-band h2 { margin-bottom: 18px; }
.cta-band p { opacity: 0.82; margin-bottom: 32px; }

/* ============ Footer ============ */

/* Pinned to the viewport bottom and sent behind the page's content
   (footer-reveal.js keeps .footer-spacer sized to match) so the section
   immediately above it can scroll away and reveal it underneath - see
   .reveal-footer. */
.site-footer {
  background: var(--green-deep);
  color: var(--cream);
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: -1;
  overflow: hidden;
}
/* Invisible and non-interactive - it exists purely to reserve scroll
   height for the fixed footer beneath it, but sitting in normal document
   flow it would otherwise intercept clicks meant for the footer's own
   links (harmless while the footer had none, but not once it did). */
.footer-spacer { height: 380px; pointer-events: none; }

/* Pages with nothing worth revealing underneath (e.g. the 404 page) skip
   the reveal-footer effect entirely - no footer, no spacer, the last
   section's own background just fills the remaining viewport. */
body.no-footer .site-footer,
body.no-footer .footer-spacer { display: none; }

/* Applied to whichever section sits last before the footer on a given page.
   Needs its own opaque background (not just an inherited one) since it now
   sits directly in front of the fixed footer once scrolled into the reveal
   zone - without one, the footer would bleed through instead of only
   showing past the rounded corners. */
.reveal-footer {
  position: relative;
  z-index: 1;
  border-radius: 0 0 var(--radius-reveal) var(--radius-reveal);
  overflow: hidden;
}
.site-footer__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(56px, 8vw, 90px) var(--gutter) 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 40px;
  position: relative;
  z-index: 1;
}
.site-footer__logo { height: 72px; width: auto; }
.site-footer__tagline {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.15;
  opacity: 0.46;
}
.site-footer__mark {
  position: absolute;
  top: 50%;
  right: -70px;
  transform: translateY(-50%);
  width: 440px;
  height: 440px;
  opacity: 0.24;
  z-index: 0;
  pointer-events: none;
}
.site-footer__mark svg { width: 100%; height: 100%; }
.site-footer__mark svg .cls-Brand-Botanical-1 { stroke: var(--green) !important; }
.site-footer__mark svg .cls-Brand-Botanical-2 { stroke: var(--green) !important; fill: var(--green) !important; }
.site-footer__base {
  padding: 20px var(--gutter);
  font-size: 0.82rem;
  color: #4e675f;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.site-footer__base a { text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; }
.site-footer__base a:hover { color: var(--cream); }

@media (max-width: 860px) {
  .site-footer__mark { width: 280px; height: 280px; right: -50px; }
}

/* ============ Pillars section wrapper ============ */

.pillars-section { background: var(--cream); padding-block: var(--section-space); }
.pillar__icon svg { height: 100%; width: auto; display: block; }

/* ============ Colleges band ============ */

.colleges-head { color: var(--cream); }
.colleges-head .eyebrow { color: var(--teal); margin-bottom: 14px; display: block; }
.colleges-head h2 { max-width: 26ch; margin-inline: auto; }
.colleges-head p { max-width: 52ch; margin-inline: auto; opacity: 0.82; }

.colleges-head__cta { margin-top: 40px; }

/* ============ Pollen field (ambient particles, scoped per-section) ============ */

.pollen-field {
  position: relative;
  isolation: isolate;
}
.pollen-field__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  filter: blur(0.6px);
}
.pollen-field > *:not(.pollen-field__canvas) {
  position: relative;
  z-index: 1;
}

/* ============ Prose (long-form body copy) ============ */

.prose p { max-width: 62ch; }
.prose p + p { margin-top: 18px; }

/* ============ Legal content (privacy policy, etc.) ============ */

.legal-content h2 { font-size: 1.3rem; margin-top: 36px; margin-bottom: 10px; }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content > p:first-child { color: var(--mustard); font-size: 0.9rem; margin-bottom: 24px; }
.legal-content > p:first-child em { color: inherit; }
.legal-content a { text-decoration: underline; text-underline-offset: 3px; }
.lede + .lede { margin-top: 18px; }

.eyebrow--teal { color: var(--teal); }

/* ============ Bio split (photo + long-form bio) ============ */

.bio-split {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 64px;
  align-items: start;
}
.bio-split__photo { margin: 0; }
.bio-split__photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  display: block;
}
.bio-split__photo figcaption {
  margin-top: 12px;
  font-size: 0.85rem;
  opacity: 0.65;
}
.bio-split__body .eyebrow { display: block; margin-bottom: 18px; }

@media (max-width: 860px) {
  .bio-split { grid-template-columns: 1fr; gap: 32px; }
  .bio-split__photo { max-width: 320px; margin-inline: auto; }
}

/* ============ Marked list (roles, credentials) ============ */

.role-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 24px;
  max-width: 62ch;
}
.role-list li { position: relative; padding-left: 22px; }
.role-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mustard);
}

/* ============ Service detail blocks ============ */

.service-block { background: var(--cream); }
.service-block + .service-block { border-top: 1px solid var(--line-on-cream); }
.service-block[id] { scroll-margin-top: 100px; }

.service-detail {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
  align-items: start;
}
.service-detail__number {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--mustard);
  display: block;
  margin-bottom: 14px;
}
.service-detail__head h2 { margin-bottom: 14px; }
.service-detail__tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.15rem;
  opacity: 0.8;
}

.outcome-box {
  background: var(--cream-soft);
  border: 1px solid var(--line-on-cream);
  border-left: 3px solid var(--mustard);
  border-radius: var(--radius-card);
  padding: 24px 28px;
  margin-top: 28px;
  max-width: 62ch;
}
.outcome-box .eyebrow { display: block; margin-bottom: 10px; }
.outcome-box p { max-width: none; }

@media (max-width: 860px) {
  .service-detail { grid-template-columns: 1fr; gap: 24px; }
}

/* ============ Numbered step list ("what to expect") ============ */

.step-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px;
  max-width: 68ch;
}
.step-list li { display: flex; gap: 20px; align-items: flex-start; }
.step-list__number {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(245, 239, 231, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.7125rem;
  color: var(--teal);
}
.step-list__body { padding-top: 2px; }
.step-list__body strong { font-family: var(--font-heading); font-weight: 400; font-size: 1.3125rem; display: block; margin-bottom: 4px; }

/* ============ Contact form ============ */

.contact-form { max-width: 720px; }
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -9999px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.form-field label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.form-field .optional { font-weight: 400; opacity: 0.55; text-transform: none; letter-spacing: 0; }
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--green-ink);
  background: var(--cream);
  border: 1px solid var(--line-on-cream);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  transition: border-color 0.2s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--green);
}
.form-field textarea { resize: vertical; min-height: 120px; }

.radio-row { display: flex; flex-wrap: wrap; gap: 20px; }
.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.radio-option input { accent-color: var(--green); width: 16px; height: 16px; }

.contact-form__note { opacity: 0.7; font-size: 0.9rem; margin-bottom: 24px; }
.contact-form__error { color: var(--error); font-size: 0.9rem; margin-bottom: 16px; }
.contact-form__submit { margin-top: 8px; }
.contact-form__submit:disabled { opacity: 0.6; cursor: not-allowed; }

.contact-form__success {
  background: var(--cream-soft);
  border: 1px solid var(--line-on-cream);
  border-radius: var(--radius-card);
  padding: clamp(28px, 4vw, 40px);
  max-width: 720px;
}
.contact-form__success h3 { margin-bottom: 12px; }
.contact-form__success p { opacity: 0.85; }

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

/* ============ Direct contact card ============ */

.direct-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.direct-contact__col h3 { margin-bottom: 12px; }
.direct-contact__col p { opacity: 0.85; }

@media (max-width: 860px) {
  .direct-contact { grid-template-columns: 1fr; gap: 32px; }
}