@import url("./tokens.css?v=20260705-cormorant-v1");

:root {
  /* Warm card surface. Single source for the testimonial quote cards and reused for the
     contact method boxes, contact form panel, and FAQ boxes so they read as one warm family
     instead of stark white. */
  --surface-warm-card:
    linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(255, 248, 236, 0.98)),
    var(--colors-neutral-white);

  /* Service-page section alternation tones: the homepage's own two surfaces
     (paper for light sections, cream for dark), so nothing is off-system.
     Paper = homepage testimonials; cream = homepage contact / reach-out. */
  --service-tone-light: var(--colors-neutral-paper);
  --service-tone-dark: var(--colors-neutral-cream);
}

@font-face {
  font-family: "PFP Cormorant";
  src: url("../assets/fonts/CormorantGaramond-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PFP Cormorant";
  src: url("../assets/fonts/CormorantGaramond-Italic-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "PFP Manrope";
  src: url("../assets/fonts/Manrope-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "PFP Manrope";
  src: url("../assets/fonts/Manrope-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "PFP Manrope";
  src: url("../assets/fonts/Manrope-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--colors-neutral-ink);
  background:
    linear-gradient(var(--colors-neutral-paper), var(--colors-neutral-paper)),
    url("../assets/hero/logo-led-paper-texture-640.jpg") center top / 480px auto repeat;
  font-family: var(--typography-families-body);
  font-size: var(--typography-scale-body-size);
  line-height: var(--typography-scale-body-line-height);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

body.menu-open {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button,
input,
textarea,
select {
  font: inherit;
}

.skip-link {
  position: fixed;
  top: var(--spacing-scale-2);
  left: var(--spacing-scale-2);
  z-index: var(--z-index-skip-link);
  min-height: 44px;
  padding: var(--spacing-scale-2) var(--spacing-scale-4);
  transform: translateY(calc(-100% - var(--spacing-scale-2)));
  border-radius: calc(var(--radius-sm) * 1px);
  background: var(--colors-brand-primary-deep);
  color: var(--colors-neutral-white);
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 0;
  box-shadow: var(--interaction-focus-ring);
}

.site-shell {
  overflow-x: clip;
}

.container {
  width: min(100% - (var(--container-mobile-padding) * 2), var(--container-wide-max-width));
  margin-inline: auto;
}

.section {
  padding-block: var(--spacing-scale-11);
}

section[id] {
  scroll-margin-top: 96px;
}

.section-tight {
  padding-block: var(--spacing-scale-8);
}

.section-title {
  margin: 0;
  color: var(--colors-brand-primary-deep);
  font-family: var(--typography-families-display);
  font-size: var(--typography-scale-h2-size);
  font-weight: var(--typography-scale-h2-weight);
  line-height: var(--typography-scale-h2-line-height);
  letter-spacing: 0;
  text-wrap: balance;
}

.section-copy {
  max-width: 64ch;
  margin: var(--spacing-scale-4) 0 0;
  color: var(--colors-neutral-muted);
  text-wrap: pretty;
}

.services-art-section {
  position: relative;
  overflow: clip;
  padding-top: clamp(14px, 1.6vw, 28px);
  padding-bottom: clamp(72px, 7vw, 132px);
  /* Overlay kept near-opaque so the horizontal crease in the paper-texture tile
     does not read as a line behind the header copy; texture stays as a whisper of grain. */
  background:
    linear-gradient(180deg, rgba(250, 246, 238, 0.9), rgba(247, 242, 230, 0.88)),
    url("../assets/hero/logo-led-paper-texture-640.jpg") center top / 520px auto repeat,
    var(--colors-neutral-paper);
}

.services-art-section::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 90px;
  height: 310px;
  transform: none;
  transform-origin: top center;
  border-left: 3px solid color-mix(in srgb, var(--colors-accent-gold-line) 82%, transparent);
  border-radius: 100% 0 0 100%;
  opacity: 0.78;
  pointer-events: none;
}

.services-container {
  position: relative;
  z-index: 1;
  width: min(100% - (var(--container-mobile-padding) * 2), 1780px);
}

.services-header {
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
}

@media (min-width: 769px) {
  .services-header {
    padding-top: clamp(14px, 1.3vw, 22px);
  }
}

.section-wing-mark {
  width: clamp(104px, 9vw, 154px);
  height: auto;
  margin: 0 auto var(--spacing-scale-4);
  mix-blend-mode: multiply;
}

/* Wings-with-heart crest used as signature brand moment in hero and truth band */
.section-wing-mark--crest {
  width: clamp(92px, 7.4vw, 126px);
  margin-bottom: var(--spacing-scale-3);
  mix-blend-mode: normal;
}

/* Botanical sprig section motif (healing, growth, service headers) */
.section-wing-mark--botanical {
  width: clamp(74px, 6vw, 102px);
  margin-bottom: var(--spacing-scale-3);
  mix-blend-mode: normal;
}

/* Mended leaf section motif with subtle gold repair seam */
.section-wing-mark--leaf {
  width: clamp(54px, 4.5vw, 76px);
  margin-bottom: var(--spacing-scale-3);
  mix-blend-mode: normal;
}

/* Thin Kintsugi seam used as a horizontal repair path. */
.section-wing-mark--seam {
  width: clamp(180px, 18vw, 280px);
  margin-bottom: var(--spacing-scale-3);
  mix-blend-mode: multiply;
}

/* Left-aligned mark for sections whose heading is left-aligned (About, Contact, FAQ) */
.section-wing-mark--start {
  margin-inline: 0 auto;
}

.services-header .section-title {
  font-size: clamp(2.35rem, 4.2vw, 4.75rem);
  color: var(--colors-brand-primary-deep);
}

.services-header-rule {
  width: min(460px, 70vw);
  margin: var(--spacing-scale-4) auto 0;
}

.services-header-rule::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--colors-accent-gold-line) 70%, transparent), transparent);
}

.services-header .section-copy {
  margin-inline: auto;
  color: var(--colors-neutral-ink);
  font-size: clamp(1.02rem, 1.45vw, 1.32rem);
  line-height: 1.55;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-index-sticky-nav);
  background: color-mix(in srgb, var(--colors-neutral-paper) 90%, transparent);
  backdrop-filter: blur(16px);
  border-bottom: var(--border-subtle);
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--spacing-scale-5);
  min-height: 76px;
}

.brand {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: var(--spacing-scale-3);
  min-height: 44px;
  min-width: 0;
  color: var(--colors-brand-primary-deep);
  text-decoration: none;
}

.brand img {
  width: 58px;
  height: auto;
}

.brand-name {
  display: block;
  font-family: var(--typography-families-display);
  font-size: 1.58rem;
  line-height: 1;
  letter-spacing: 0;
  white-space: normal;
}

.brand-name em {
  color: var(--colors-accent-gold-line);
  font-style: italic;
}

.brand-sub {
  display: block;
  margin-top: var(--spacing-scale-0);
  color: var(--colors-brand-secondary-deep);
  font-size: var(--typography-scale-caption-size);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}

.primary-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-scale-4);
  min-width: 0;
  font-size: var(--typography-scale-caption-size);
  font-weight: 700;
}

.primary-nav a,
.text-link {
  position: relative;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-underline-offset: var(--spacing-scale-1);
}

/* Left-to-right underline draw on the inline CTA links (not nav/footer). */
.text-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(50% - 0.72em);
  height: 2px;
  background: var(--colors-accent-gold-line);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-duration-base) var(--motion-easing-standard);
}

.text-link:hover::after,
.text-link:focus-visible::after {
  transform: scaleX(1);
}

.primary-nav a:hover,
.primary-nav a:focus-visible,
.footer-nav a:hover,
.footer-nav a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--colors-accent-gold-line);
  text-decoration-thickness: 2px;
}

/* Baseline keyboard focus for anything without a bespoke ring (logo, footer links). */
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--colors-brand-primary);
  outline-offset: 2px;
}

.brand:hover .brand-name {
  color: var(--colors-brand-primary);
}

.button,
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: calc(var(--radius-sm) * 1px);
  background: var(--colors-brand-primary);
  color: var(--colors-neutral-white);
  box-shadow: var(--shadow-purple);
  font-size: var(--typography-scale-ui-size);
  font-weight: 700;
  line-height: var(--typography-scale-ui-line-height);
  text-align: center;
  text-decoration: none;
  transition:
    transform var(--motion-duration-base) var(--motion-easing-standard),
    box-shadow var(--motion-duration-base) var(--motion-easing-standard),
    background var(--motion-duration-base) var(--motion-easing-standard);
}

.button {
  padding: var(--spacing-scale-3) var(--spacing-scale-6);
}

.nav-cta {
  padding: var(--spacing-scale-2) var(--spacing-scale-5);
  white-space: nowrap;
}

.button:hover,
.nav-cta:hover {
  background: var(--colors-brand-primary-deep);
  box-shadow: var(--interaction-hover-elevation);
  transform: translateY(-1px);
}

.button:active,
.nav-cta:active,
.text-link:active,
.contact-method:active,
.service-card a:active,
.faq summary:active,
.mobile-menu a:active,
.contact-form-submit:active,
.bio-pledge-btn:active {
  transform: scale(var(--interaction-pressed-scale));
}

.button:focus-visible,
.nav-cta:focus-visible,
.menu-toggle:focus-visible,
.mobile-menu a:focus-visible,
.faq summary:focus-visible,
.service-card a:focus-visible {
  outline: 0;
  box-shadow: var(--interaction-focus-ring);
}

.menu-toggle:hover {
  border-color: var(--colors-brand-primary);
}

.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: var(--border-subtle);
  border-radius: calc(var(--radius-sm) * 1px);
  background: color-mix(in srgb, var(--colors-neutral-white) 92%, var(--colors-accent-lavender));
  color: var(--colors-brand-primary-deep);
}

.menu-toggle span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 20px;
  height: 2px;
  margin: 0;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, calc(-50% + var(--menu-line-offset, 0px)));
  transition:
    transform var(--motion-duration-base) var(--motion-easing-standard),
    opacity var(--motion-duration-base) var(--motion-easing-standard);
}

.menu-toggle span:first-child {
  --menu-line-offset: -6px;
}

.menu-toggle span:last-child {
  --menu-line-offset: 6px;
}

.menu-toggle[aria-expanded="true"] span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 76px 0 auto;
  z-index: var(--z-index-mobile-menu);
  display: grid;
  gap: var(--spacing-scale-2);
  padding: var(--spacing-scale-5);
  background: var(--colors-neutral-white);
  border-bottom: var(--border-subtle);
  box-shadow: var(--shadow-raised);
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu a {
  min-height: 48px;
  padding: var(--spacing-scale-2) var(--spacing-scale-3);
  border-radius: calc(var(--radius-sm) * 1px);
  color: var(--colors-brand-primary-deep);
  font-weight: 700;
  text-decoration: none;
}

.mobile-menu a:hover {
  background: color-mix(in srgb, var(--colors-accent-lavender) 24%, transparent);
}

.mobile-menu .mobile-menu-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--spacing-scale-2);
  background: var(--colors-brand-primary);
  color: var(--colors-neutral-white);
  box-shadow: var(--shadow-purple);
}

.mobile-menu .mobile-menu-cta:hover {
  background: var(--colors-brand-primary-deep);
}

.hero {
  position: relative;
  isolation: isolate;
  /* Leave room below the fold for the header (76px) + the trust band (~134px) + breathing room
     so the "Why these colors" strip lands comfortably on screen one, near the olive stem. */
  min-height: calc(100dvh - 228px);
  overflow: clip;
  padding-block: var(--spacing-scale-7) var(--spacing-scale-6);
  background-color: var(--colors-neutral-paper);
  /* Full-bleed art plate: doves/heart baked center-right, veins across the field,
     left third kept calm for copy. Trust strip is its own section below, so no bottom fade. */
  background-image: url("../assets/hero/logo-led-hero-fullbleed-desktop-2400.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  align-items: center;
  gap: var(--spacing-scale-9);
  min-width: 0;
}

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 620px;
  min-width: 0;
}

.hero h1 {
  margin: 0;
  color: var(--colors-brand-primary-deep);
  font-family: var(--typography-families-display);
  font-size: var(--typography-scale-hero-size);
  font-weight: var(--typography-scale-hero-weight);
  line-height: var(--typography-scale-hero-line-height);
  letter-spacing: 0;
  text-wrap: balance;
}

.hero-line,
.hero-subline {
  display: inline;
}

.hero h1 em,
.hero h1 > span:not(.hero-line):not(.word) {
  color: var(--colors-brand-secondary);
  font-style: italic;
}

.hero-copy p {
  max-width: 42ch;
  margin: var(--spacing-scale-5) 0 0;
  color: var(--colors-neutral-muted);
  font-size: 1.18rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-scale-4);
  margin-top: var(--spacing-scale-6);
}

/* Explore link: teal + gold-underlined at rest with a nudging arrow (matches the approved hero art direction). */
.hero-actions .text-link {
  gap: 8px;
  color: var(--colors-brand-secondary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--colors-accent-gold-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.hero-actions .text-link:hover,
.hero-actions .text-link:focus-visible {
  color: var(--colors-brand-secondary-deep);
  text-decoration-color: var(--colors-brand-secondary-deep);
}

.link-arrow {
  transition: transform var(--motion-duration-base) var(--motion-easing-standard);
}

.hero-actions .text-link:hover .link-arrow {
  transform: translateX(3px);
}

/* Gold heart on the "Book a consultation" buttons, echoing the hero art. */
.cta-heart {
  margin-left: 8px;
  color: var(--colors-accent-gold);
  font-size: 0.95em;
  line-height: 1;
}

.hero-art {
  /* Desktop: the doves/heart are baked into the full-bleed .hero background,
     so the in-flow figure is only shown when the hero stacks (<=1024px). */
  display: none;
  margin: 0;
  min-width: 0;
}

/* Trust strip: its own band directly below the hero, on the page cream. */
.color-band {
  border-top: var(--border-subtle);
  border-bottom: var(--border-subtle);
  padding-block: var(--spacing-scale-5);
}

.color-meaning {
  min-width: 0;
  display: grid;
  grid-template-columns: 230px 1fr;
  align-items: center;
  gap: 34px;
}

.color-meaning h2 {
  margin: 0;
  color: var(--colors-brand-primary-deep);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.color-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.color-list li {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 16px;
  align-items: center;
  min-width: 0;
  color: var(--colors-brand-primary-deep);
  font-size: 0.82rem;
  line-height: 1.45;
}

.color-list strong {
  display: block;
  margin-bottom: 4px;
  color: var(--colors-brand-primary-deep);
  font-family: var(--typography-families-display);
  font-size: 0.96rem;
  font-weight: 400;
  line-height: 1.1;
}

.swatch {
  display: block;
  width: 58px;
  aspect-ratio: 1;
  border-radius: calc(var(--radius-pill) * 1px);
  border: 1px solid rgba(46, 30, 56, 0.08);
  box-shadow:
    inset 0 8px 18px rgba(255, 255, 255, 0.28),
    0 8px 20px rgba(50, 32, 29, 0.08);
}

.swatch-purple { background: radial-gradient(circle at 35% 28%, #7a3b83, var(--colors-brand-primary)); }
.swatch-teal { background: radial-gradient(circle at 35% 28%, #2c7f7a, var(--colors-brand-secondary-deep)); }
.swatch-gold { background: radial-gradient(circle at 35% 28%, #f8dda0, var(--colors-accent-gold)); }
.swatch-lavender { background: radial-gradient(circle at 35% 28%, #ddd0e6, var(--colors-accent-lavender)); }
.swatch-cream { background: radial-gradient(circle at 35% 28%, #fffaf0, var(--colors-neutral-cream)); }

@media (max-width: 1140px) {
  .color-meaning {
    grid-template-columns: 1fr;
  }

  .color-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

/* Client-approved restoration glow in the deployed compact, three-slice rhythm. */
.truth-handoff {
  position: relative;
  overflow: hidden;
  background: var(--colors-neutral-paper);
}

.truth-tear {
  display: block;
  width: 100%;
  height: auto;
}

.truth-band {
  position: relative;
  background: url("../assets/sections/truth-handoff/truth-band-paper-2560.jpg") center / 100% 100%;
  padding-block: clamp(22px, 3vw, 44px);
}

.truth-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(110px, 160px) minmax(0, 1fr) minmax(150px, 220px);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}

.truth-left-sprig {
  grid-column: 1;
  width: 100%;
  max-width: 160px;
  height: auto;
  margin-bottom: -34px;
  align-self: end;
  justify-self: start;
  pointer-events: none;
}

.truth-copy {
  grid-column: 2;
  border-left: 1px solid var(--colors-accent-gold-line);
  padding-left: clamp(28px, 3.5vw, 56px);
}

.truth-copy h2 {
  margin: 0;
  font-family: var(--typography-families-display);
  font-size: var(--typography-scale-h2-size);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0;
  color: var(--colors-neutral-ink);
  text-wrap: balance;
}

.truth-copy h2 em {
  font-style: normal;
  color: var(--colors-brand-secondary-deep);
}

.truth-copy h2 .truth-em-safe {
  color: var(--colors-brand-primary);
  font-style: italic;
}

.truth-copy p {
  margin: var(--spacing-scale-4) 0 0;
  color: var(--colors-neutral-muted);
}

.truth-branch {
  grid-column: 3;
  width: 100%;
  max-width: 220px;
  height: auto;
  justify-self: end;
}

.recognition-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 34px);
  margin-top: clamp(42px, 4vw, 66px);
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 100%;
  padding: 0;
  border: var(--border-subtle);
  border-radius: calc(var(--radius-sm) * 1px);
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(255, 248, 236, 0.98)),
    var(--colors-neutral-white);
  box-shadow: 0 22px 58px rgba(67, 47, 34, 0.13);
  transition:
    transform var(--motion-duration-base) var(--motion-easing-standard),
    box-shadow var(--motion-duration-base) var(--motion-easing-standard);
  cursor: pointer;
  touch-action: manipulation;
}

/* Ancestor-scoped so these beat the .reveal / .reveal.is-visible rules, which
   also set transform and transition on the card (it carries the .reveal class). */
.recognition-grid .service-card {
  transition:
    transform var(--motion-duration-base) var(--motion-easing-standard),
    box-shadow var(--motion-duration-base) var(--motion-easing-standard),
    opacity var(--motion-duration-slow) var(--motion-easing-gentle);
}

.recognition-grid .service-card:hover,
.recognition-grid .service-card:focus-within {
  transform: translateY(-7px);
  box-shadow: 0 40px 84px rgba(67, 47, 34, 0.22);
}

.service-card-art {
  position: relative;
  z-index: 0;
  width: 100%;
  aspect-ratio: 1.05;
  margin: 0;
  overflow: hidden;
  border-bottom: var(--border-gold);
  background: var(--colors-neutral-cream);
}

.service-card-art img {
  width: 100%;
  height: calc(100% + var(--service-art-y-nudge, 0px));
  display: block;
  object-fit: cover;
  transform: translateY(calc(var(--service-art-y-nudge, 0px) * -1));
  transition: transform var(--motion-duration-slow) var(--motion-easing-gentle);
}

.service-card:hover .service-card-art img,
.service-card:focus-within .service-card-art img {
  transform: translateY(calc(var(--service-art-y-nudge, 0px) * -1)) scale(1.045);
}

.recognition-grid .service-card:nth-child(3) {
  --service-art-y-nudge: 5px;
}

.recognition-grid .service-card:nth-child(4) {
  --service-art-y-nudge: 8px;
}

.recognition-grid .service-card:nth-child(5) {
  --service-art-y-nudge: 12px;
}

.service-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-scale-4);
  padding: 0 clamp(22px, 1.7vw, 40px) clamp(24px, 2vw, 40px);
}

.service-index {
  position: relative;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-top: -19px;
  border-radius: 999px;
  background: var(--colors-brand-primary-deep);
  color: var(--colors-neutral-white);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(33, 25, 49, 0.18);
}

.service-card:nth-child(2n) .service-index {
  background: var(--colors-brand-secondary-deep);
}

.service-card:nth-child(2n) h3,
.service-card:nth-child(2n) a {
  color: var(--colors-brand-secondary-deep);
}

.service-card h3 {
  margin: 0;
  color: var(--colors-brand-primary-deep);
  font-family: var(--typography-families-display);
  font-size: clamp(1.36rem, 1.7vw, 2.08rem);
  font-weight: 400;
  line-height: 1.08;
  min-height: 3.3em;
  display: flex;
  align-items: flex-start;
}

.service-card p {
  margin: 0;
  color: var(--colors-neutral-ink);
  font-size: clamp(0.94rem, 0.96vw, 1.04rem);
  line-height: 1.65;
  min-height: 7.2em;
}

.service-card a {
  width: fit-content;
  max-width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-scale-2);
  margin-top: auto;
  color: var(--colors-brand-secondary-deep);
  font-size: var(--typography-scale-caption-size);
  font-weight: 700;
  text-decoration: none;
  text-decoration-color: transparent;
  text-underline-offset: var(--spacing-scale-1);
  position: relative;
  z-index: 2;
}

.service-card a:hover {
  color: var(--colors-brand-primary);
  text-decoration: underline;
  text-decoration-color: var(--colors-accent-gold-line);
}

.about-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: linear-gradient(180deg, var(--colors-neutral-paper), #F7F1E4);
  /* About and reach-out are both cream with no color break between them, and the
     pledge bar already closes this block. Trim the junction: 96 bottom here + 96 top
     on .reach-out read as ~192px of dead cream. 64 + 64 keeps air without the void. */
  padding-bottom: var(--spacing-scale-9);
}

.about-editorial {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
  grid-template-areas:
    "photo header"
    "photo copy";
  gap: 0 clamp(40px, 5vw, 84px);
  align-items: start;
}

.about-header {
  grid-area: header;
  max-width: 650px;
}

.about-photo {
  grid-area: photo;
  align-self: center;
}

.about-copy {
  grid-area: copy;
  max-width: 650px;
}

/* Canonical section eyebrow: gold uppercase kicker under the crest. Used site-wide.
   Alignment follows the parent (centered in centered headers, left in editorial columns). */
.section-eyebrow {
  margin: 0 0 var(--spacing-scale-3);
  color: var(--colors-accent-gold-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* The About column's `.about-copy p` rule (muted, larger) would otherwise beat the eyebrow
   on specificity; reassert the eyebrow look wherever it sits in an about/bio copy column. */
.about-section .section-eyebrow,
.about-header .section-eyebrow,
.about-copy .section-eyebrow {
  margin: 0 0 var(--spacing-scale-3);
  color: var(--colors-accent-gold-text);
  font-size: 13px;
}

.about-header .section-title,
.about-copy .section-title {
  max-width: 19ch;
  font-size: 3.15rem;
  line-height: 1.1;
}

.about-header .section-title em,
.about-copy .section-title em {
  font-style: normal;
  color: var(--colors-brand-secondary);
}

.about-copy p {
  margin: var(--spacing-scale-5) 0 0;
  color: var(--colors-neutral-muted);
  font-size: 1.08rem;
  line-height: 1.68;
  text-wrap: pretty;
}

.about-statement {
  padding-left: var(--spacing-scale-4);
  border-left: 2px solid var(--colors-accent-gold-line);
  color: var(--colors-brand-primary-deep);
  font-weight: 600;
}

.about-statement strong {
  color: var(--colors-brand-primary);
}

/* "What Peace from Pieces is about" promise; teal seam marks it as a thesis, distinct from the gold voice-quote closer. */
.about-statement--promise {
  border-left-color: var(--colors-brand-secondary);
}

.about-statement--promise strong {
  color: var(--colors-brand-secondary);
}

/* Signed line in Jean-Ann's own voice; the gold repair-line reads as the seam where her voice lands. */
.voice-quote {
  margin: var(--spacing-scale-6) 0 0;
  padding-left: var(--spacing-scale-4);
  border-left: 2px solid var(--colors-accent-gold-line);
}

.voice-quote p {
  margin: 0;
  color: var(--colors-brand-primary-deep);
  font-family: var(--typography-families-display);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.28;
  text-wrap: pretty;
}

.voice-quote cite {
  display: block;
  margin-top: var(--spacing-scale-2);
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--colors-brand-primary);
}

.about-copy .button {
  margin-top: var(--spacing-scale-6);
}

/* Bio-hero: the actions row supplies its own top spacing, so drop the button's
   extra top margin here; otherwise it pushes the button below the "See credentials"
   link. Zeroing it keeps them vertically centered, matching the homepage hero. */
.about-copy .hero-actions .button {
  margin-top: 0;
}

.about-photo {
  position: relative;
  z-index: 1;
  margin: 0;
}

.about-photo picture {
  display: block;
}

.about-photo-img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(32, 25, 49, 0.15));
}

/* ============================================================
   Meet Jean-Ann bio page: a quiet logo-led hero followed by the
   portrait beneath the opening story heading. Scoped so the
   homepage #about (which shares these base classes) is untouched.
   ============================================================ */
.bio-story-intro {
  grid-area: intro;
  min-width: 0;
}

.bio-story .about-photo {
  width: min(100%, 23rem);
  margin-top: clamp(24px, 3vw, 40px);
  padding: 10px;
  border: 1px solid rgba(201, 143, 61, 0.34);
  border-radius: 18px;
  background: rgba(251, 246, 236, 0.8);
  box-shadow: 0 30px 60px rgba(32, 25, 49, 0.16);
}

.bio-story .about-photo-img {
  border-radius: 12px;
  filter: none;
}

.bio-story .about-photo figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 4px 2px;
}

.bio-story .about-photo figcaption strong {
  font-family: var(--typography-families-display);
  color: var(--colors-brand-primary-deep);
  font-size: 1.5rem;
  line-height: 1;
}

.bio-story .about-photo figcaption span {
  color: var(--colors-brand-secondary);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

@media (min-width: 1025px) {
  .bio-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
  }

  /* Cream veil (protects the headline on the left) over the homepage
     hero plate, anchored right so the doves/heart bleed in softly. */
  .bio-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(251, 246, 236, 0.97) 0%, rgba(251, 246, 236, 0.9) 46%, rgba(251, 246, 236, 0.68) 100%),
      url("../assets/hero/logo-led-hero-fullbleed-desktop-2400.jpg") right center / cover no-repeat;
  }

  .bio-hero > .container {
    position: relative;
    z-index: 1;
  }

  .bio-hero .about-editorial {
    grid-template-columns: minmax(0, 0.94fr) minmax(24rem, 1.06fr);
    grid-template-areas: "copy .";
    gap: clamp(40px, 5vw, 84px);
    align-items: center;
    min-height: 440px;
  }

  /* Bigger, tighter hero headline so it fills the field and reads as a hero. */
  .bio-hero .about-copy {
    max-width: 42rem;
  }

  .bio-hero .about-copy .section-title {
    max-width: 15ch;
    font-size: clamp(3.4rem, 4.7vw, 4.5rem);
    line-height: 1.02;
  }

  .bio-hero .about-copy p {
    font-size: 1.14rem;
  }

  .bio-hero .hero-actions {
    margin-top: 40px;
  }

  .bio-story .about-editorial-text {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas: "intro copy";
    gap: clamp(40px, 5vw, 84px);
  }
}

@media (max-width: 1024px) {
  .bio-story .about-photo-img {
    height: auto;
    object-fit: contain;
    object-position: center;
  }
}

.about-proof-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 28px) clamp(24px, 3.5vw, 48px);
  margin-top: clamp(30px, 3.4vw, 52px);
  padding-top: var(--spacing-scale-5);
  border-top: 1px solid color-mix(in srgb, var(--colors-accent-gold-line) 42%, transparent);
  list-style: none;
}

.about-proof-strip li {
  display: flex;
  align-items: center;
  gap: var(--spacing-scale-3);
  color: var(--colors-neutral-muted);
  font-size: var(--typography-scale-caption-size);
  font-weight: 600;
}

.about-proof-strip .proof-icon {
  width: 42px;
  height: 42px;
  flex: none;
}


.proof-mark::before,
.proof-mark::after {
  content: "";
  display: block;
}

.proof-mark-license::before {
  width: 16px;
  height: 20px;
  border: 2px solid var(--colors-brand-primary);
  border-radius: 8px 8px 12px 12px;
  clip-path: polygon(50% 0, 100% 18%, 100% 68%, 50% 100%, 0 68%, 0 18%);
}

.proof-mark-identity::before {
  width: 20px;
  height: 20px;
  border: 2px solid var(--colors-brand-secondary-deep);
  border-radius: 50%;
}

.proof-mark-identity::after {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--colors-accent-gold-line);
}

.proof-mark-modalities::before {
  width: 24px;
  height: 16px;
  border-top: 2px solid var(--colors-brand-primary);
  border-bottom: 2px solid var(--colors-brand-secondary-deep);
  border-radius: 50%;
  transform: rotate(-18deg);
}

.proof-mark-care::before {
  width: 22px;
  height: 14px;
  border-right: 2px solid var(--colors-brand-secondary-deep);
  border-bottom: 2px solid var(--colors-brand-secondary-deep);
  border-radius: 0 0 14px 0;
  transform: rotate(-28deg);
}

.proof-mark-care::after {
  position: absolute;
  width: 14px;
  height: 10px;
  border-left: 2px solid var(--colors-brand-primary);
  border-bottom: 2px solid var(--colors-brand-primary);
  border-radius: 0 0 0 12px;
  transform: translateX(5px) rotate(22deg);
}

.approach {
  background:
    linear-gradient(var(--colors-neutral-cream), var(--colors-neutral-cream)),
    url("../assets/hero/logo-led-paper-texture-640.jpg") center / 520px auto repeat;
}

.approach-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(320px, 0.62fr);
  gap: var(--spacing-scale-8);
  align-items: start;
}

/* Kintsugi statement anchoring the left column (gold repair-line). */
.approach-statement {
  margin-top: var(--spacing-scale-6);
  padding-left: var(--spacing-scale-4);
  border-left: 2px solid var(--colors-accent-gold-line);
  color: var(--colors-brand-primary-deep);
  font-family: var(--typography-families-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}

/* Numbered "grounded path": 01 / 02 / 03 steps replace the old white card. */
.approach-steps {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 30px;
}

.approach-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
}

.approach-step-num {
  min-width: 2.2ch;
  color: var(--colors-accent-gold-text);
  font-family: var(--typography-families-display);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
}

.approach-step strong {
  display: block;
  margin-bottom: 6px;
  color: var(--colors-brand-primary-deep);
  font-size: 1.2rem;
}

.approach-step p {
  margin: 0;
  color: var(--colors-neutral-muted);
  line-height: 1.62;
}

/* Contact area: replicates the Healing Journey contact layout, re-skinned to PFP brand.
   Left copy column (ornament + eyebrow + title + lede + method rows), right elevated form card. */
.contact-section {
  border-top: 1px solid var(--colors-neutral-rule);
  background: var(--colors-neutral-cream);
  color: var(--colors-neutral-ink);
}

/* Homepage-only: contact sits after the cream FAQ, so use paper to keep testimonials(paper)/FAQ(cream)/contact(paper) alternating. Scoped class leaves the standalone /contact/ page cream. */
.contact-section--paper {
  background: var(--colors-neutral-paper);
}

.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
  gap: clamp(38px, 5vw, 78px);
  align-items: center;
}

.contact-copy {
  max-width: 500px;
}


.contact-title {
  margin: 0;
  /* Sized to sit on one line and fill the copy column (its natural width is ~536px,
     only ~36px over the column), killing the ~238px void beside the old 2-line wrap.
     text-wrap: balance lets it fall back to a tidy 2-line split on narrower desktops.
     The <=640px .section-title override still wins on mobile, so mobile is unchanged. */
  font-size: clamp(2.2rem, 3.1vw, 2.85rem);
  text-wrap: balance;
}

.contact-lede {
  margin-top: var(--spacing-scale-4);
}

.contact-methods {
  display: grid;
  gap: var(--spacing-scale-2);
  margin-top: var(--spacing-scale-6);
}

.contact-method {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: var(--spacing-scale-3);
  align-items: center;
  min-height: 70px;
  padding: var(--spacing-scale-2) 14px;
  border: var(--border-subtle);
  border-radius: calc(var(--radius-sm) * 1px);
  background: var(--surface-warm-card);
  box-shadow: var(--shadow-soft);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--motion-duration-base) var(--motion-easing-standard),
    background var(--motion-duration-base) var(--motion-easing-standard);
}

.contact-method:hover {
  border-color: color-mix(in srgb, var(--colors-brand-primary) 40%, transparent);
  background: var(--colors-neutral-white);
}

.contact-method:focus-visible {
  outline: 0;
  box-shadow: var(--interaction-focus-ring);
}

.contact-method-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: calc(var(--radius-pill) * 1px);
  background: var(--colors-accent-lavender);
  color: var(--colors-brand-primary);
  font-family: var(--typography-families-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.contact-method-icon-text {
  font-family: var(--typography-families-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.contact-method strong {
  display: block;
  color: var(--colors-neutral-ink);
  font-size: 14px;
  line-height: 1.2;
}

.contact-method em {
  display: block;
  margin-top: 4px;
  color: var(--colors-neutral-muted);
  font-size: 15px;
  font-style: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.contact-form {
  padding: clamp(22px, 3vw, 34px);
  border: var(--border-subtle);
  border-radius: calc(var(--radius-lg) * 1px);
  background: var(--surface-warm-card);
  color: var(--colors-neutral-ink);
  box-shadow: var(--shadow-raised);
}

.contact-form-honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.contact-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.contact-field-full {
  grid-column: 1 / -1;
}

.contact-field > span {
  color: var(--colors-neutral-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.field-optional {
  color: var(--colors-neutral-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  padding: 13px 14px;
  border: var(--border-subtle);
  border-radius: calc(var(--radius-sm) * 1px);
  background: var(--colors-neutral-white);
  color: var(--colors-neutral-ink);
  font-size: 15px;
  line-height: 1.35;
  transition: border-color var(--motion-duration-base) var(--motion-easing-standard);
}

.contact-field select {
  height: 49px;
}

.contact-field textarea {
  min-height: 148px;
  resize: vertical;
}

.contact-field input:focus-visible,
.contact-field select:focus-visible,
.contact-field textarea:focus-visible {
  outline: 0;
  border-color: var(--colors-brand-primary);
  box-shadow: var(--interaction-focus-ring);
}

.contact-consent {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 18px;
  color: var(--colors-neutral-muted);
  font-size: 13px;
  line-height: 1.55;
}

.contact-consent input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--colors-brand-primary);
}

.contact-form-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
}

.contact-form-reassure {
  flex: 1 1 100%;
  order: 3;
  margin: 0;
  color: var(--colors-neutral-muted);
  font-size: 13px;
  line-height: 1.5;
}

.contact-form-reassure strong {
  color: var(--colors-neutral-ink);
}

.contact-form-submit {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 0;
  border-radius: calc(var(--radius-sm) * 1px);
  background: var(--colors-brand-primary);
  color: var(--colors-neutral-white);
  box-shadow: var(--shadow-purple);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  transition:
    background var(--motion-duration-base) var(--motion-easing-standard),
    transform var(--motion-duration-base) var(--motion-easing-standard);
}

.contact-form-submit:hover {
  background: var(--colors-brand-primary-deep);
  transform: translateY(-1px);
}

.contact-form-submit:focus-visible {
  outline: 0;
  box-shadow: var(--interaction-focus-ring);
}

.contact-form-fine-print {
  max-width: 300px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(190, 18, 60, 0.3);
  border-radius: calc(var(--radius-sm) * 1px);
  background: rgba(190, 18, 60, 0.05);
  color: #9f1239;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.42;
}

@media (max-width: 980px) {
  .contact-inner {
    grid-template-columns: 1fr;
  }

  .contact-copy {
    max-width: 720px;
  }
}

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

  .contact-form-footer {
    display: grid;
    gap: 12px;
  }

  .contact-form-submit {
    width: 100%;
  }

  .contact-form-fine-print {
    max-width: none;
  }
}

/* Payment & Insurance summary, folded into the contact area (HJCC pattern).
   Cards and banner reuse the warm-card surface, subtle border, and section header
   components so the block reads as part of the contact page, not a new band. */
.payment-summary {
  border-top: 1px solid var(--colors-neutral-rule);
  background: var(--colors-neutral-cream);
  color: var(--colors-neutral-ink);
  /* Follows the contact section (both cream, no color break); tighten the top so the
     junction is not a double 96px gap, matching the about/reach-out treatment. */
  padding-top: var(--spacing-scale-9);
}

.payment-summary-header {
  max-width: 780px;
  margin: 0 0 var(--spacing-scale-8);
}

.payment-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-scale-4);
}

.payment-card {
  border: var(--border-subtle);
  border-radius: calc(var(--radius-sm) * 1px);
  background: var(--surface-warm-card);
  padding: clamp(22px, 2.3vw, 30px);
  box-shadow: var(--shadow-soft);
}

.payment-card h3 {
  margin: 0;
  color: var(--colors-brand-primary-deep);
  font-family: var(--typography-families-display);
  font-size: var(--typography-scale-h3-size);
  font-weight: var(--typography-scale-h3-weight);
  line-height: 1.1;
}

.payment-card p {
  margin: var(--spacing-scale-3) 0 0;
  color: var(--colors-neutral-muted);
  line-height: 1.7;
}

.payment-card strong {
  color: var(--colors-brand-primary-deep);
  font-weight: 700;
}

.payment-banner {
  display: grid;
  grid-template-columns: minmax(16rem, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(22px, 4vw, 44px);
  align-items: center;
  margin-top: var(--spacing-scale-4);
  border: 1px solid color-mix(in srgb, var(--colors-accent-gold-line) 42%, transparent);
  border-radius: calc(var(--radius-sm) * 1px);
  background: var(--surface-warm-card);
  padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--shadow-soft);
}

.payment-banner-copy {
  min-width: 0;
}

.payment-banner-eyebrow {
  margin: 0 0 10px;
  color: var(--colors-accent-gold-line);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
}

.payment-banner-title {
  margin: 0;
  color: var(--colors-brand-primary-deep);
  font-family: var(--typography-families-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: var(--typography-scale-h3-weight);
  line-height: 1.05;
}

.payment-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.payment-chip-list li {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: var(--border-subtle);
  border-radius: calc(var(--radius-pill) * 1px);
  background: var(--colors-neutral-white);
  color: var(--colors-brand-primary-deep);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  box-shadow: var(--shadow-soft);
}

@media (max-width: 900px) {
  .payment-summary-grid {
    grid-template-columns: 1fr;
  }

  .payment-banner {
    grid-template-columns: 1fr;
  }
}

/* Homepage FAQ sits between testimonials (paper) and contact; cream keeps the paper/cream rhythm after the FAQ/contact swap. */
.faq-section {
  background: var(--colors-neutral-cream);
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr);
  gap: var(--spacing-scale-8);
  align-items: start;
}

.faq-list {
  display: grid;
  gap: var(--spacing-scale-3);
}

.faq {
  border: var(--border-subtle);
  border-radius: calc(var(--radius-sm) * 1px);
  background: var(--surface-warm-card);
}

.faq summary {
  min-height: 52px;
  padding: var(--spacing-scale-4);
  border-radius: calc(var(--radius-sm) * 1px);
  color: var(--colors-brand-primary-deep);
  cursor: pointer;
  font-weight: 700;
  transition: background var(--motion-duration-base) var(--motion-easing-standard);
}

.faq summary:hover {
  background: color-mix(in srgb, var(--colors-accent-lavender) 16%, transparent);
}

.faq p {
  margin: 0;
  padding: 0 var(--spacing-scale-4) var(--spacing-scale-4);
  color: var(--colors-neutral-muted);
}

.site-footer {
  padding-block: var(--spacing-scale-8);
  background: var(--colors-neutral-ink);
  color: var(--colors-neutral-white);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-scale-8);
  align-items: start;
}

.footer-brand {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: var(--spacing-scale-4);
  align-items: center;
}

.footer-brand img {
  width: 68px;
}

.footer-brand strong {
  display: block;
  font-family: var(--typography-families-display);
  font-size: 1.55rem;
  font-weight: 400;
}

.footer-brand span,
.footer-small {
  color: color-mix(in srgb, var(--colors-neutral-white) 72%, var(--colors-accent-lavender));
  font-size: var(--typography-scale-caption-size);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--spacing-scale-4);
  max-width: 540px;
}

.footer-nav a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--colors-neutral-white);
}

.footer-small {
  grid-column: 1 / -1;
  max-width: 86ch;
  margin: var(--spacing-scale-6) 0 0;
}

.sticky-cta {
  position: fixed;
  right: var(--spacing-scale-4);
  bottom: var(--spacing-scale-4);
  z-index: var(--z-index-sticky-cta);
  display: none;
}

/* Mobile only: JS flips data-visible after a deliberate scroll (and off again at the contact section). */
@media (max-width: 1024px) {
  .sticky-cta[data-visible="true"] {
    display: block;
  }
}

.reveal {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--motion-duration-slow) var(--motion-easing-gentle),
    transform var(--motion-duration-slow) var(--motion-easing-gentle);
}

.reveal[data-reveal-pending="true"] {
  opacity: 0;
  transform: translateY(14px);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* B1: photographic figures settle in with a subtle zoom-out as they enter. */
.reveal-settle[data-reveal-pending="true"] {
  transform: translateY(14px) scale(1.04);
}

.reveal-settle.is-visible {
  transform: translateY(0) scale(1);
}

/* A2: staggered word reveal (allow-listed in script.js). Timing matches the
   Healing Journey clinician reveal: 520ms, ease, 0.45em rise, per-word stagger. */
.word-reveal .word {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  html.word-reveal-ready .word-reveal .word {
    opacity: 0;
    transform: translateY(0.45em);
    transition:
      opacity 520ms ease,
      transform 520ms ease;
    transition-delay: calc(var(--word-index, 0) * var(--word-stagger, 22ms));
  }

  html.word-reveal-ready .word-reveal.is-visible .word {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1280px) {
  .header-inner {
    gap: var(--spacing-scale-3);
  }

  .primary-nav {
    gap: var(--spacing-scale-3);
  }

  .brand-name {
    font-size: 1.36rem;
  }

  .services-art-section::after {
    display: none;
  }

  .about-editorial {
    grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
    gap: var(--spacing-scale-8);
  }

  .about-copy .section-title {
    font-size: 3.62rem;
  }
}

@media (max-width: 1024px) {
  .primary-nav,
  .nav-cta {
    display: none;
  }

  .menu-toggle {
    display: grid;
  }

  .header-inner {
    grid-template-columns: 1fr auto;
  }

  .hero-grid,
  .about-editorial,
  .approach-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .truth-handoff {
    min-height: 0;
  }

  .truth-inner {
    grid-template-columns: minmax(90px, 120px) minmax(0, 1fr);
    gap: clamp(18px, 4vw, 34px);
  }

  .truth-left-sprig {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: 120px;
    margin-bottom: -26px;
  }

  .truth-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .truth-branch {
    display: none;
  }

  .hero-copy {
    max-width: 760px;
  }

  .hero h1 {
    font-size: clamp(4rem, 7vw, 4.4rem);
  }

  /* Tablet keeps the established quiet, stacked hero treatment. */
  .hero {
    background-image:
      linear-gradient(180deg, color-mix(in srgb, var(--colors-neutral-paper) 90%, white), var(--colors-neutral-paper)),
      url("../assets/hero/logo-led-paper-texture-640.jpg");
    background-repeat: no-repeat, repeat;
    background-position: center, center;
    background-size: cover, 440px auto;
  }

  .hero-art {
    display: block;
    position: absolute;
    z-index: 0;
    top: clamp(-54px, -5vw, -28px);
    left: 50%;
    right: auto;
    width: min(86vw, 560px);
    aspect-ratio: 1200 / 910;
    margin: 0;
    --hero-art-opacity: 0.17;
    background: url("../assets/hero/logo-led-crest-mobile-1200.jpg") center / 100% auto no-repeat;
    opacity: var(--hero-art-opacity);
    mix-blend-mode: multiply;
    filter: saturate(0.96) contrast(0.96);
    -webkit-mask-image: radial-gradient(ellipse 64% 55% at 58% 49%, #000 36%, rgba(0, 0, 0, 0.76) 57%, transparent 78%);
    mask-image: radial-gradient(ellipse 64% 55% at 58% 49%, #000 36%, rgba(0, 0, 0, 0.76) 57%, transparent 78%);
    pointer-events: none;
    transform: translateX(-50%);
  }

  .color-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recognition-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recognition-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-editorial {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-scale-6);
  }

  .about-header {
    order: 1;
    max-width: 760px;
  }

  .about-header .section-title {
    max-width: 18ch;
    font-size: 3.2rem;
  }

  .about-photo {
    order: 2;
    margin: 0;
    width: 100%;
  }

  .about-copy {
    order: 3;
    max-width: 760px;
  }

  .about-photo-img {
    width: 100%;
    height: clamp(340px, 52vw, 480px);
    object-fit: cover;
    object-position: 50% 20%;
    border-radius: calc(var(--radius-sm) * 1px);
  }

  .service-card,
  .service-card:nth-child(1),
  .service-card:nth-child(2),
  .service-card:nth-child(3),
  .service-card:nth-child(4),
  .service-card:nth-child(5) {
    grid-column: auto;
  }
}

@media (max-width: 768px) {
  .container {
    width: min(100% - (var(--container-mobile-padding) * 2), var(--container-mobile-max-width));
  }

  .section {
    padding-block: var(--spacing-scale-9);
  }

  .services-art-section {
    padding-top: var(--spacing-scale-6);
    padding-bottom: var(--spacing-scale-9);
  }

  .section-tight {
    padding-block: var(--spacing-scale-7);
  }

  .brand {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: var(--spacing-scale-2);
  }

  .brand img {
    width: 48px;
  }

  .brand-name {
    font-size: 1.16rem;
  }

  .brand-sub {
    font-size: 0.78rem;
  }

  .hero {
    min-height: auto;
    padding-block: var(--spacing-scale-7);
  }

  .hero-grid {
    gap: 0;
  }

  .hero-art {
    top: clamp(-54px, -14vw, -36px);
    width: min(112vw, 430px);
    --hero-art-opacity: 0.15;
  }

  .hero h1 {
    font-size: 2.72rem;
    line-height: 1.07;
  }

  .hero-copy p {
    font-size: 1.04rem;
  }

  .hero-actions,
  .hero-actions .button,
  .hero-actions .text-link {
    width: 100%;
  }

  .hero-actions {
    align-items: stretch;
  }

  .hero-actions .text-link {
    justify-content: center;
  }

  .color-list,
  .recognition-grid {
    grid-template-columns: 1fr;
  }

  .about-editorial {
    gap: var(--spacing-scale-7);
  }

  .about-copy .section-title {
    font-size: 2.68rem;
  }

  .recognition-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .color-meaning {
    display: block;
    padding: var(--spacing-scale-5);
    border: var(--border-gold);
    border-radius: calc(var(--radius-lg) * 1px);
    background: color-mix(in srgb, var(--colors-neutral-white) 82%, var(--colors-accent-gold));
    box-shadow: var(--shadow-soft);
  }

  .color-meaning h2 {
    margin-bottom: var(--spacing-scale-4);
    font-family: var(--typography-families-display);
    font-size: 1.45rem;
    font-weight: 400;
    text-transform: none;
  }

  .color-list li {
    grid-template-columns: auto 1fr;
    gap: var(--spacing-scale-2);
    align-items: start;
    color: var(--colors-neutral-muted);
    font-size: var(--typography-scale-caption-size);
  }

  .color-list strong {
    margin-bottom: 0;
    font-family: var(--typography-families-body);
    font-size: inherit;
    font-weight: 700;
  }

  .swatch {
    width: 18px;
    margin-top: 3px;
    box-shadow: none;
  }

  .footer-grid,
  .footer-brand {
    grid-template-columns: 1fr;
  }

  .footer-nav {
    justify-content: flex-start;
  }

  .sticky-cta {
    left: var(--spacing-scale-4);
  }

  .sticky-cta .button {
    width: 100%;
    box-shadow: var(--shadow-purple);
  }
}

/* Approved phone composition: the clean plate is the decorative layer; all copy and controls stay live. */
@media (max-width: 640px) {
  .hero {
    height: 180vw;
    min-height: 0;
    max-height: none;
    padding: 0;
    background-color: var(--colors-neutral-paper);
    background-image: url("../assets/hero/hero-sacred-threshold-mobile-clean-853.webp");
    background-repeat: no-repeat;
    background-position: center -27vw;
    background-size: 100% auto;
  }

  .hero > .container {
    width: 86.2%;
    height: 100%;
  }

  .hero-grid,
  .hero-copy {
    height: 100%;
  }

  .hero-grid {
    display: block;
  }

  .hero-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: none;
    padding-top: 11.8vw;
  }

  .hero-art {
    display: none;
  }

  .hero-line {
    display: block;
  }

  .hero-copy p {
    max-width: none;
    margin-top: clamp(14px, 3.8vw, 29px);
    color: var(--colors-neutral-muted);
    font-family: var(--typography-families-body);
    font-size: clamp(0.875rem, 3.85vw, 1.6rem);
    line-height: 1.55;
  }

  .hero-subline {
    display: block;
  }

  .hero .hero-actions {
    position: absolute;
    right: 0;
    bottom: 9vw;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 3.1vw, 24px);
    width: 100%;
    margin: 0;
  }

  .hero .hero-actions .button {
    width: 88.4%;
    min-height: clamp(48px, 12.8vw, 97px);
    padding: 0 clamp(20px, 5.6vw, 43px);
    border-radius: clamp(10px, 2.8vw, 21px);
    background: var(--colors-brand-primary);
    color: var(--colors-neutral-white);
    box-shadow: 0 10px 24px rgba(78, 30, 88, 0.35);
    font-family: var(--typography-families-body);
    font-size: clamp(0.94rem, 3.65vw, 1.72rem);
    font-weight: 600;
    letter-spacing: 0;
  }

  .hero .hero-actions .cta-heart {
    color: var(--colors-accent-gold);
  }

  .hero .hero-actions .text-link {
    width: auto;
    color: var(--colors-brand-secondary-deep);
    font-family: var(--typography-families-body);
    font-size: clamp(0.94rem, 3.45vw, 1.65rem);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--colors-accent-gold-line);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
  }

  .bio-hero .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-scale-3);
    margin-top: var(--spacing-scale-6);
    width: 100%;
  }

  .bio-hero .hero-actions .button {
    width: 100%;
    justify-content: center;
  }

  .bio-hero .hero-actions .text-link {
    width: 100%;
    justify-content: center;
  }

  .about-proof-strip {
    grid-template-columns: 1fr;
    gap: var(--spacing-scale-4);
  }
}

@media (max-width: 360px) {
  .hero {
    height: 184vw;
  }
}

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

}

@media (max-width: 640px) {
  .hero h1 {
    color: var(--colors-brand-primary-deep);
    font-family: var(--typography-families-display);
    font-size: clamp(2rem, 10.1vw, 4.85rem);
    font-weight: var(--typography-scale-hero-weight);
    line-height: 1.12;
    letter-spacing: 0;
  }

  .hero h1 em {
    color: var(--colors-brand-secondary-deep);
    font-family: inherit;
    font-style: italic;
    font-weight: inherit;
  }

  .section-title,
  .truth-copy h2 {
    font-size: 2.12rem;
  }

  .truth-inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-scale-3);
  }

  .truth-left-sprig {
    grid-column: 1;
    grid-row: 1;
    width: 112px;
    margin-bottom: -10px;
    justify-self: start;
  }

  .truth-copy {
    grid-column: 1;
    grid-row: 2;
    border-top: 1px solid var(--colors-accent-gold-line);
    border-left: 0;
    padding-top: var(--spacing-scale-5);
    padding-left: 0;
    text-align: center;
  }

  .truth-copy p {
    font-size: 1rem;
  }

  .about-header .section-title,
  .about-copy .section-title {
    font-size: 2.36rem;
  }

  .about-copy p {
    font-size: 1rem;
  }

  .color-meaning,
  .service-card {
    padding: var(--spacing-scale-5);
  }

  .recognition-grid {
    gap: var(--spacing-scale-5);
  }

  .recognition-grid .service-card {
    padding: 0;
    border-radius: calc(var(--radius-sm) * 1px);
    box-shadow: 0 12px 32px rgba(67, 47, 34, 0.09);
  }

  .recognition-grid .service-card-art {
    aspect-ratio: 2.1;
    height: clamp(125px, 34vw, 158px);
  }

  .recognition-grid .service-card-art img {
    object-fit: cover;
    object-position: center 38%;
  }

  .recognition-grid .service-card:nth-child(1) .service-card-art img {
    object-position: center 35%;
  }

  .recognition-grid .service-card:nth-child(2) .service-card-art img {
    object-position: center 22%;
  }

  .recognition-grid .service-card:nth-child(3) .service-card-art img {
    object-position: center 46%;
  }

  .recognition-grid .service-card:nth-child(4) .service-card-art img {
    object-position: 18% 68%;
  }

  .recognition-grid .service-card:nth-child(5) .service-card-art img {
    object-position: center 45%;
  }

  .recognition-grid .service-index {
    width: 30px;
    height: 30px;
    margin-top: -15px;
    font-size: 0.75rem;
    box-shadow: 0 6px 16px rgba(33, 25, 49, 0.16);
  }

  .recognition-grid .service-card-copy {
    gap: var(--spacing-scale-2);
    padding: 0 var(--spacing-scale-4) var(--spacing-scale-4);
  }

  .recognition-grid .service-card h3 {
    font-size: clamp(1.22rem, 4.4vw, 1.45rem);
    line-height: 1.15;
    min-height: auto;
  }

  .recognition-grid .service-card p {
    font-size: clamp(0.88rem, 3.2vw, 0.96rem);
    line-height: 1.48;
    min-height: auto;
  }

  .recognition-grid .service-card a {
    min-height: 44px;
    font-size: 0.86rem;
    margin-top: var(--spacing-scale-1);
  }

  .services-header-rule {
    width: min(320px, 82vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Smooth scrolling stays on even for reduced motion (a small, deliberate exception);
     the heavier reveal/parallax motion below is still suppressed. */
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Testimonials: proof block before contact. Ref: docs/rebuild/phase-1-homepage/refs/testimonials-full-section-draft-1k.png */
.testimonials {
  background: var(--colors-neutral-paper);
}

.testimonials-container {
  width: min(100% - (var(--container-mobile-padding) * 2), var(--container-desktop-max-width));
  margin-inline: auto;
}


.testimonials-layout {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: var(--spacing-scale-6);
  align-items: stretch;
  margin-top: var(--spacing-scale-9);
}

.testimonial-side-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-scale-6);
}

.testimonial-feature,
.testimonial-side-card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  border: var(--border-subtle);
  border-radius: calc(var(--radius-lg) * 1px);
  background: var(--surface-warm-card);
  box-shadow: var(--shadow-soft);
}

.testimonial-feature {
  justify-content: center;
  padding: clamp(28px, 3.4vw, 52px);
}

.testimonial-side-card {
  flex: 1;
  justify-content: center;
  padding: clamp(24px, 2.4vw, 36px);
}

.testimonial-quote-mark {
  display: block;
  margin-bottom: var(--spacing-scale-1);
  color: color-mix(in srgb, var(--colors-accent-gold) 88%, var(--colors-accent-gold-line));
  font-family: var(--typography-families-display);
  font-weight: 600;
  line-height: 0.6;
}

.testimonial-feature .testimonial-quote-mark,
.testimonial-side-card .testimonial-quote-mark {
  font-size: 3.4rem;
}

.testimonial-feature-copy,
.testimonial-side-copy {
  margin: 0;
  color: var(--colors-neutral-ink);
  font-family: var(--typography-families-display);
  font-weight: 400;
  font-size: clamp(1.12rem, 1.35vw, 1.32rem);
  line-height: 1.5;
}

.testimonial-feature-copy p,
.testimonial-side-copy p {
  margin: 0;
  text-wrap: pretty;
}

.testimonial-divider {
  width: 88px;
  height: 1px;
  margin: var(--spacing-scale-6) 0 var(--spacing-scale-5);
  background: linear-gradient(90deg, var(--colors-accent-gold-line), transparent);
}

.testimonial-side-card .testimonial-divider {
  margin: var(--spacing-scale-5) 0 var(--spacing-scale-4);
}

.testimonial-person {
  display: flex;
  gap: var(--spacing-scale-3);
  align-items: center;
}

.testimonial-person-mark {
  width: 40px;
  height: 40px;
  flex: none;
  display: block;
}

.testimonial-person strong {
  display: block;
  color: var(--colors-neutral-ink);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.25;
}

.testimonial-person em {
  display: block;
  color: var(--colors-neutral-muted);
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.3;
}

.testimonial-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-scale-3);
  align-items: center;
  justify-content: center;
  margin: var(--spacing-scale-9) 0 0;
  color: var(--colors-neutral-muted);
  text-align: center;
}

.testimonial-stars {
  color: var(--colors-accent-gold-line);
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  line-height: 1;
}

.testimonial-trust-copy strong {
  color: var(--colors-neutral-ink);
  font-weight: 700;
}

.testimonial-note {
  display: flex;
  gap: var(--spacing-scale-3);
  align-items: center;
  justify-content: center;
  max-width: 640px;
  margin: var(--spacing-scale-5) auto 0;
  text-align: center;
}

.testimonial-note p {
  margin: 0;
  color: var(--colors-neutral-muted);
  font-size: var(--typography-scale-caption-size);
  line-height: var(--typography-scale-caption-line-height);
}

.testimonial-note em {
  font-style: italic;
}

@media (max-width: 900px) {
  .testimonials-layout {
    grid-template-columns: 1fr;
    margin-top: var(--spacing-scale-7);
  }

  .testimonial-trust {
    margin-top: var(--spacing-scale-7);
  }
}

/* ============================================================
   Reach-out ladder: "Your next step, together" (HJCC-parity #2)
   Extracted layers: still-life photo, icon medallions, numbered
   kintsugi nodes. Connector + hairlines are CSS; text is live DOM.
   ============================================================ */
.reach-out {
  background: var(--colors-neutral-cream);
  /* Tightened junction with the cream About section above (see .about-section). */
  padding-top: var(--spacing-scale-9);
}

.reach-out-body {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
  gap: var(--spacing-scale-8);
  align-items: stretch;
  margin-top: var(--spacing-scale-9);
}

.reach-out-aside {
  display: flex;
  flex-direction: column;
}

.reach-out-lede {
  /* top offset aligns the lede's first line with node 1 (see 4K reference) */
  margin: clamp(40px, 4.4vw, 72px) 0 0;
  /* Widened measure + larger type so the lede fills the ~572px left rail instead
     of leaving a ~255px void to its right beside the numbered ladder. */
  max-width: 26ch;
  color: var(--colors-brand-primary-deep);
  font-family: var(--typography-families-display);
  font-size: clamp(1.6rem, 2.6vw, 2.5rem);
  font-weight: 400;
  line-height: 1.3;
  text-wrap: balance;
}

.reach-out-lede-rule {
  display: block;
  width: 58px;
  height: 1px;
  margin: var(--spacing-scale-5) 0;
  background: var(--colors-accent-gold-line);
}

.reach-out-lede-copy {
  margin: 0;
  max-width: 40ch;
  color: var(--colors-neutral-muted);
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  line-height: 1.62;
}

.reach-out-still-life {
  width: 100%;
  max-width: 520px;
  height: auto;
  /* push to the bottom of the column; margin-bottom lifts the photo's bottom
     edge to node 5's line (see 4K reference) */
  margin-top: auto;
  margin-bottom: clamp(40px, 4.9vw, 78px);
  -webkit-mask-image:
    linear-gradient(to top, #000 76%, transparent),
    linear-gradient(to bottom, #000 82%, transparent),
    linear-gradient(to right, #000 80%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to top, #000 76%, transparent),
    linear-gradient(to bottom, #000 82%, transparent),
    linear-gradient(to right, #000 80%, transparent);
  mask-composite: intersect;
}

.reach-ladder {
  --reach-icon-col: 72px;
  --reach-node-col: 64px;
  --reach-col-gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reach-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--reach-icon-col) var(--reach-node-col) 1fr;
  column-gap: var(--reach-col-gap);
  align-items: center;
  padding-block: clamp(14px, 1.6vw, 22px);
}

/* Continuous vertical connector centered on the numbered-node column. */
.reach-step::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--reach-icon-col) + var(--reach-col-gap) + (var(--reach-node-col) / 2));
  width: 1px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--colors-accent-gold-line) 62%, transparent);
  z-index: 0;
}

.reach-step:first-child::before { top: 50%; }
.reach-step:last-child::before { bottom: 50%; }

.reach-icon,
.reach-node img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--radius-circle, 50%);
}

.reach-icon {
  align-self: center;
}

.reach-node {
  position: relative;
  z-index: 1;
  display: block;
}

.reach-step-copy h3 {
  margin: 0;
  color: var(--colors-brand-primary-deep);
  font-family: var(--typography-families-display);
  font-size: clamp(1.32rem, 1.8vw, 1.7rem);
  font-weight: 400;
  line-height: 1.12;
}

.reach-step-copy p {
  margin: var(--spacing-scale-2) 0 0;
  color: var(--colors-neutral-muted);
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  line-height: 1.58;
}

.reach-out-note {
  max-width: 640px;
  margin: var(--spacing-scale-9) auto 0;
  text-align: center;
}

.reach-out-note p {
  margin: 0;
}

.reach-out-note span,
.reach-out-note em {
  display: block;
}

.reach-out-note > p > span {
  color: var(--colors-brand-primary-deep);
  font-family: var(--typography-families-display);
  font-size: clamp(1.14rem, 1.4vw, 1.34rem);
}

.reach-out-note em {
  margin-top: var(--spacing-scale-2);
  color: var(--colors-neutral-muted);
  font-size: 0.98rem;
  font-style: normal;
  line-height: 1.5;
}

.reach-out-heart {
  color: var(--colors-accent-gold-line);
}

@media (max-width: 1024px) {
  .reach-out-body {
    grid-template-columns: 1fr;
    gap: var(--spacing-scale-6);
    margin-top: var(--spacing-scale-7);
  }

  .reach-out-lede {
    max-width: none;
    margin-top: 0;
  }

  .reach-out-still-life {
    display: none;
  }
}

@media (max-width: 640px) {
  .reach-ladder {
    --reach-icon-col: 52px;
    --reach-node-col: 46px;
    --reach-col-gap: 15px;
  }
}

/* ==========================================================================
   Meet Jean-Ann bio page: trust-strip + pledge-bar cards (CSS re-skin of
   HJCC meet-lynne trust strip + cta bar, retoned to Peace from Pieces tokens)
   Cache-bust: v=20260705-meet-jeanann-v1
   ========================================================================== */

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

.about-editorial-text {
  align-items: start;
}

/* --- Trust strip (Licensed / EMDR / Faith-aware) --- */
.bio-trust-strip {
  width: 100%;
  margin-top: clamp(32px, 4vw, 56px);
  padding: 26px 40px;
  /* Same warm blend surface the review/testimonial cards use. */
  background: var(--surface-warm-card);
  border: 1px solid var(--colors-neutral-rule);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
}

.bio-trust-item {
  min-height: 88px;
  padding: 8px 30px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  border-right: 1px solid color-mix(in srgb, var(--colors-accent-gold-line) 38%, transparent);
}

.bio-trust-item:first-child { padding-left: 10px; }
.bio-trust-item:last-child {
  border-right: 0;
  padding-right: 10px;
}

.bio-trust-icon {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--colors-accent-lavender) 30%, var(--colors-neutral-cream));
  display: flex;
  align-items: center;
  justify-content: center;
}

.bio-trust-icon img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
}

.bio-trust-copy strong {
  display: block;
  font-family: var(--typography-families-display);
  font-size: 1.5rem;
  line-height: 1.08;
  font-weight: 600;
  color: var(--colors-brand-primary-deep);
  margin: 0 0 6px;
}

.bio-trust-copy span {
  display: block;
  font-family: var(--typography-families-body);
  font-size: 0.8rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--colors-brand-secondary);
  font-weight: 700;
}

/* --- Pledge bar (leaf + statement + CTA) --- */
.bio-pledge {
  width: 100%;
  margin-top: clamp(20px, 2.4vw, 30px);
  min-height: 108px;
  background: var(--colors-neutral-cream);
  border: 1px solid var(--colors-neutral-rule);
  border-radius: 16px;
  padding: 20px 40px;
  display: grid;
  grid-template-columns: 96px 1px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 2.4vw, 36px);
}

.bio-pledge-leaf {
  width: 84px;
  height: auto;
  justify-self: center;
}

.bio-pledge-divider {
  width: 1px;
  height: 52px;
  background: var(--colors-accent-gold-line);
  opacity: 0.6;
}

.bio-pledge-text {
  margin: 0;
  font-family: var(--typography-families-display);
  font-size: 1.62rem;
  line-height: 1.14;
  color: var(--colors-brand-primary-deep);
}

.bio-pledge-text strong {
  display: block;
  font-weight: 600;
  color: var(--colors-brand-primary);
}

.bio-pledge-text em {
  display: block;
  font-style: italic;
  color: var(--colors-brand-secondary);
  font-size: 0.94em;
}

.bio-pledge-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--colors-brand-primary);
  color: var(--colors-neutral-white);
  border-radius: 12px;
  min-height: 54px;
  padding: 0 26px;
  font-family: var(--typography-families-body);
  font-size: 0.95rem;
  font-weight: 700;
  white-space: normal;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-purple);
  transition:
    background var(--motion-duration-base) var(--motion-easing-standard),
    transform var(--motion-duration-base) var(--motion-easing-standard);
}

.bio-pledge-btn:hover,
.bio-pledge-btn:focus-visible {
  background: var(--colors-brand-primary-deep);
  transform: translateY(-1px);
}

.bio-pledge-btn svg {
  width: 20px;
  height: 20px;
}

/* --- Closing CTA --- */
.bio-cta-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.bio-cta-inner .section-title {
  margin-left: auto;
  margin-right: auto;
}

.bio-cta-inner .section-copy {
  margin-left: auto;
  margin-right: auto;
}

.bio-cta-inner .button {
  margin-top: var(--spacing-scale-6);
}

/* --- Responsive: stack cards on narrow viewports --- */
@media (max-width: 860px) {
  .bio-trust-strip {
    grid-template-columns: 1fr;
    padding: 14px 22px;
  }
  .bio-trust-item {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--colors-accent-gold-line) 30%, transparent);
    padding: 16px 8px;
  }
  .bio-trust-item:last-child { border-bottom: 0; }

  .bio-pledge {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 18px;
    padding: 26px 24px;
  }
  .bio-pledge-divider { display: none; }
  .bio-pledge-btn { width: 100%; max-width: 320px; }
}

/* ============================================================
   Service / topic page template (v=20260706-service-v2)
   The reusable model for grief-and-life-transitions and future
   service pages (HJCC service-page parity, retoned to brand):
   a hero of copy + highlight box over the faded plate, an
   outline button to pair with the primary, alternating section
   rhythm, and a 3-up info-card grid.
   ============================================================ */

/* Outline button: pairs with .button as an equal-height second action. */
.button-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  max-width: 100%;
  min-height: 48px;
  padding: var(--spacing-scale-3) var(--spacing-scale-6);
  border: 1.5px solid rgba(96, 39, 105, 0.4);
  border-radius: calc(var(--radius-sm) * 1px);
  background: transparent;
  color: var(--colors-brand-primary);
  font-size: var(--typography-scale-ui-size);
  font-weight: 700;
  line-height: var(--typography-scale-ui-line-height);
  text-align: center;
  text-decoration: none;
  transition:
    transform var(--motion-duration-base) var(--motion-easing-standard),
    background var(--motion-duration-base) var(--motion-easing-standard),
    border-color var(--motion-duration-base) var(--motion-easing-standard);
}

.button-outline:hover,
.button-outline:focus-visible {
  background: rgba(96, 39, 105, 0.06);
  border-color: var(--colors-brand-primary);
  transform: translateY(-1px);
}

.button-outline:active { transform: scale(var(--interaction-pressed-scale)); }

.button-outline .link-arrow {
  transition: transform var(--motion-duration-base) var(--motion-easing-standard);
}

.button-outline:hover .link-arrow { transform: translateX(3px); }

/* Service hero: left copy column + right highlight box. */
.service-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--spacing-scale-11);
}

.service-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-scale-8);
  align-items: center;
}

.service-hero-copy { max-width: 42rem; }

.service-hero .section-eyebrow { margin-bottom: var(--spacing-scale-3); }

.service-hero h1 {
  margin: 0;
  font-family: var(--typography-families-display);
  font-weight: 600;
  font-size: clamp(2.7rem, 5.2vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.005em;
}

.service-hero-lede {
  margin-top: var(--spacing-scale-5);
  max-width: 44ch;
  color: var(--colors-neutral-muted);
  font-size: 1.14rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.service-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-scale-3);
  margin-top: var(--spacing-scale-7);
}

/* Highlight box (replaces a repeated hero photo). */
.service-hero-aside {
  padding: var(--spacing-scale-6);
  border: var(--border-gold);
  border-radius: calc(var(--radius-lg) * 1px);
  background: var(--surface-warm-card);
  box-shadow: var(--shadow-raised);
}

.service-hero-aside-icon {
  display: block;
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.service-hero-aside-lede {
  margin: var(--spacing-scale-4) 0 0;
  color: var(--colors-brand-primary-deep);
  font-family: var(--typography-families-display);
  font-size: 1.42rem;
  line-height: 1.24;
}

.service-hero-highlights {
  list-style: none;
  margin: var(--spacing-scale-4) 0 0;
  padding: var(--spacing-scale-4) 0 0;
  border-top: var(--border-subtle);
  display: grid;
  gap: var(--spacing-scale-3);
}

.service-hero-highlights li {
  position: relative;
  padding-left: var(--spacing-scale-5);
  color: var(--colors-neutral-muted);
  font-size: 0.98rem;
  line-height: 1.5;
}

.service-hero-highlights li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--colors-accent-gold-line);
  font-weight: 700;
}

/* Faded homepage plate behind the hero (desktop), matching the bio hero. */
@media (min-width: 1025px) {
  .service-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(251, 246, 236, 0.97) 0%, rgba(251, 246, 236, 0.9) 44%, rgba(251, 246, 236, 0.72) 100%),
      url("../assets/hero/logo-led-hero-fullbleed-desktop-2400.jpg") right center / cover no-repeat;
  }

  .service-hero > .container {
    position: relative;
    z-index: 1;
  }

  .service-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem);
    gap: clamp(30px, 4vw, 64px);
    min-height: 460px;
  }
}

@media (max-width: 640px) {
  .service-hero-actions .button,
  .service-hero-actions .button-outline { width: 100%; }
}

/* Service-page section rhythm: strict light/dark alternation on EVERY section.
   Scoped to .service-page and given two-class specificity so it overrides any
   section that ships its own surface (e.g. .approach's cream + paper texture).
   The .section-alt rule is source-ordered after .section so "dark" wins on a
   section carrying both classes. */
.service-page .section { background: var(--service-tone-light); }
.service-page .section-alt { background: var(--service-tone-dark); }

/* 3-up themed info cards (HJCC info-card parity, brand numbering). */
.topic-cards {
  margin-top: var(--spacing-scale-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-scale-5);
}

.topic-card {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-scale-6);
  border: var(--border-subtle);
  border-radius: calc(var(--radius-lg) * 1px);
  background: var(--colors-neutral-white);
  box-shadow: var(--shadow-soft);
}

.section-alt .topic-card { background: var(--surface-warm-card); }

.topic-card-num {
  font-family: var(--typography-families-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--colors-accent-gold-line);
  line-height: 1;
}

.topic-card h3 {
  margin: var(--spacing-scale-3) 0 var(--spacing-scale-2);
  font-family: var(--typography-families-display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--colors-brand-primary-deep);
}

.topic-card > p {
  margin: 0;
  color: var(--colors-neutral-muted);
  line-height: 1.6;
  text-wrap: pretty;
}

.topic-card-list {
  list-style: none;
  margin: var(--spacing-scale-4) 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.topic-card-list li {
  position: relative;
  padding-left: var(--spacing-scale-4);
  color: var(--colors-neutral-muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.topic-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--colors-accent-gold);
}

@media (min-width: 760px) {
  .topic-cards { grid-template-columns: repeat(3, 1fr); }
}

/* Small phones: let the email address fit one line instead of breaking mid-domain. */
@media (max-width: 360px) {
  .contact-method em {
    font-size: 13px;
  }
}

/* Print / non-scrolling contexts: reveal-on-scroll must never hide content. */
@media print {
  html.word-reveal-ready .word-reveal .word {
    opacity: 1 !important;
    transform: none !important;
  }

  .reveal[data-reveal-pending="true"] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Legal utility page: constrain the copy column and scale inner headings. */
.legal-copy {
  max-width: 72ch;
}

.legal-copy h2.section-title {
  font-size: 1.6rem;
}