/* Bloom Path ABA — site styles
   Palette and type follow the creative brief (section 3). */

:root {
  --teal: #398F8A;
  --teal-ink: #2A706B;      /* darker teal for text/buttons: AA contrast on cream and white */
  --lav: #76539B;
  --lav-soft: #EDE6F5;
  --yellow: #F5CE67;
  --yellow-soft: #FDF3D6;
  --sage: #A9D9B3;
  --sage-soft: #E5F3E7;
  --sky-soft: #E3F0F6;
  --cream: #F9F5EE;
  --cream-2: #F2ECE0;
  --green: #315C57;         /* headlines */
  --text: #384744;
  --muted: #5B6966;
  --line: #E4DCCD;
  --white: #fff;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-sm: 12px;
  --r: 20px;
  --r-lg: 32px;
  --shadow: 0 1px 2px rgba(49, 92, 87, .06), 0 10px 30px -12px rgba(49, 92, 87, .18);
  --shadow-lift: 0 2px 4px rgba(49, 92, 87, .06), 0 22px 44px -16px rgba(49, 92, 87, .28);
  --ease: cubic-bezier(.22, .8, .26, 1);
  --header-h: 84px;
  --wrap: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--teal-ink); text-underline-offset: .18em; }
a:hover { color: var(--lav); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 60, "WONK" 0;
  color: var(--green);
  line-height: 1.12;
  font-weight: 600;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.6rem, 5.2vw, 4.5rem); letter-spacing: -.02em; }
h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
h3 { font-size: 1.3rem; line-height: 1.25; }
em.bloom { font-style: italic; color: var(--lav); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 500; }

:focus-visible {
  outline: 3px solid var(--lav);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--green); color: #fff; padding: 10px 16px; border-radius: 10px;
}
.skip:focus { top: 12px; color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin-bottom: 14px;
}
.lead { font-size: clamp(1.1rem, 1.5vw, 1.25rem); color: var(--muted); }

/* placeholder facts the business still has to confirm */
.ph {
  background: var(--yellow-soft);
  border-bottom: 2px dashed #D9A62C;
  border-radius: 4px;
  padding: 0 .3em;
  color: #6A4E12;
  font-style: normal;
}
.tbc {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  color: #6A4E12; background: var(--yellow-soft);
  border: 1px dashed #D9A62C; border-radius: 999px; padding: 3px 12px;
}

/* ---------- buttons ---------- */
.btn {
  --bg: var(--teal-ink); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border-radius: 999px; border: 2px solid var(--bg);
  background: var(--bg); color: var(--fg);
  font: 700 1rem/1 var(--sans); letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s, color .25s, border-color .25s;
  box-shadow: 0 8px 20px -10px rgba(42, 112, 107, .7);
}
.btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn:hover { color: var(--fg); background: #225E5A; border-color: #225E5A; transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(42, 112, 107, .75); }
.btn:hover svg { transform: translateX(3px); }
.btn.ghost { --bg: transparent; --fg: var(--teal-ink); border-color: rgba(42, 112, 107, .45); box-shadow: none; background: rgba(255, 255, 255, .55); }
.btn.ghost:hover { background: #fff; color: var(--teal-ink); border-color: var(--teal-ink); }
.btn.small { min-height: 44px; padding: 0 20px; font-size: .95rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(249, 245, 238, .86);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s, background-color .3s;
  view-transition-name: site-header;
}
.site-header.scrolled { border-color: var(--line); box-shadow: 0 6px 24px -18px rgba(49, 92, 87, .5); background: rgba(249, 245, 238, .94); }
.nav { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: block; flex: none; line-height: 0; }
.brand img { height: 68px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav-links a {
  display: block; padding: 10px 12px; border-radius: 10px;
  font-weight: 700; font-size: .95rem; color: var(--green); text-decoration: none;
  position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--lav); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--lav); }
.nav-cta { flex: none; }
.menu-btn {
  display: none; margin-left: auto;
  width: 48px; height: 48px; border-radius: 14px; border: 1.5px solid var(--line);
  background: #fff; color: var(--green); cursor: pointer;
  align-items: center; justify-content: center;
}
.menu-btn span, .menu-btn span::before, .menu-btn span::after {
  display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; position: relative;
  transition: transform .3s var(--ease), background-color .2s;
}
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; }
.menu-btn span::before { top: -6px; }
.menu-btn span::after { top: 6px; }
.menu-open .menu-btn span { background: transparent; }
.menu-open .menu-btn span::before { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-btn span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
  :root { --header-h: 72px; }
  .brand img { height: 56px; }
  .menu-btn { display: inline-flex; }
  .nav { gap: 12px; }
  .nav-cta { order: 2; margin-left: auto; }
  .menu-btn { order: 3; margin-left: 0; }
  .nav-links {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    margin: 0; padding: 12px 20px 24px;
    background: var(--cream); border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(49, 92, 87, .45);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: transform .3s var(--ease), opacity .25s, visibility 0s .3s;
  }
  .menu-open .nav-links { transform: none; opacity: 1; visibility: visible; transition: transform .35s var(--ease), opacity .25s; }
  .nav-links a { padding: 14px 12px; font-size: 1.1rem; }
  .nav-links a::after { display: none; }
}
@media (max-width: 520px) {
  .nav-cta { display: none; }
  .menu-btn { margin-left: auto; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: clamp(640px, calc(100svh - var(--header-h)), 900px);
  display: flex; align-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, var(--cream) 0%, #EEF6F2 40%, #FBF3DD 100%);
  isolation: isolate;
}
.scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.scene .cam { position: absolute; inset: 0; transform-origin: 62.5% 58%; will-change: transform; }
.scene .ly {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 100%;
  will-change: transform;
}
.scene .ly-front { inset: -2% -1% -3%; width: 102%; height: 105%; }
.hero-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 44% 36% at 20% 45%, rgba(249, 245, 238, .92) 0%, rgba(249, 245, 238, .72) 50%, rgba(249, 245, 238, 0) 100%),
    linear-gradient(180deg, rgba(249, 245, 238, .7) 0%, rgba(249, 245, 238, 0) 22%);
}
@media (min-width: 821px) {
  .hero .scene .cam { right: -10%; }
}
.hero-copy { position: relative; padding: 56px 0 120px; }
.hero-copy .inner { max-width: 590px; }
.hero h1 { margin-bottom: 22px; }
.hero h1 .line { display: block; }
.hero .lead { color: #4A5956; max-width: 34ch; margin-bottom: 32px; }
.hero-note { margin: 22px 0 0; font-size: .92rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.hero-note svg { width: 18px; height: 18px; color: var(--lav); flex: none; }

/* gentle arrival of the garden on first paint (copy is never hidden) */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes settle { from { opacity: 0; transform: scale(1.04); } }
.hero .cam { animation: settle 1.4s var(--ease) both; }
.hero .copy-in { animation: rise .9s var(--ease) both; }
.hero .copy-in.d2 { animation-delay: .08s; }
.hero .copy-in.d3 { animation-delay: .16s; }
.hero .copy-in.d4 { animation-delay: .24s; }

/* the hero ends in a soft wave; the path line continues into the next section */
.wave-edge { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(50px, 7vw, 110px); width: 100%; z-index: 2; pointer-events: none; }
.wave-edge path { fill: var(--cream); }

@media (max-width: 820px) {
  /* phones and tablets: one full-screen scene. Copy sits in the sky, the tree in the middle,
     and the buttons on the meadow where the path leads. The sky layer fades out at its top
     edge, so the hero background continues it upward without a seam. */
  .hero {
    display: flex; flex-direction: column; align-items: stretch;
    min-height: calc(100svh - var(--header-h));
    background: linear-gradient(180deg, var(--cream) 0%, #F2F6EE 34%, #E3F1F0 62%, #DDEFF1 100%);
  }
  .hero-copy { order: -1; position: static; padding: 26px 0 0; text-align: left; z-index: 2; }
  .hero-copy .inner { position: static; }
  .hero-copy .inner > :not(.btn-row) { position: relative; z-index: 2; }
  .hero h1 { font-size: clamp(2rem, 8.6vw, 3.3rem); }   /* "Every Child Blooms" stays on one line */
  .hero .eyebrow { font-size: .72rem; letter-spacing: .12em; margin-bottom: 10px; }
  .hero h1 { margin-bottom: 14px; }
  .hero .lead { margin-bottom: 0; color: #43524F; }
  .hero .btn-row { position: absolute; left: 24px; right: 24px; bottom: clamp(44px, 7vw, 64px); z-index: 3; gap: 10px; }
  .hero .btn-row .btn { flex: 1 1 220px; }
  .hero .btn.ghost { background: rgba(255, 255, 255, .92); border-color: rgba(42, 112, 107, .35); }
  .hero .scene { position: relative; inset: auto; z-index: 0; flex: 1 1 auto; min-height: clamp(400px, 104vw, 560px); margin-top: -64px; }
  /* the canopy must start below the copy: the layer is never taller than (scene - 90px) / .856 */
  /* object-position puts the tree (and the path) at the center, under the rainbow and above the buttons */
  .hero .scene .ly { top: auto; bottom: 0; height: min(100%, 126vw, (100% - 90px) * 1.17); object-position: 74% 100%; }
  .hero .scene .ly-front { height: min(105%, 118vw); bottom: -3%; }
  .hero .scene .cam { transform-origin: 64% 70%; }
  .hero-veil { background: linear-gradient(0deg, rgba(249, 245, 238, .55) 0%, rgba(249, 245, 238, 0) 26%); }
  .hero-note { display: none; }
}

/* ---------- sections ---------- */
section { position: relative; }
.section { padding: clamp(60px, 7vw, 100px) 0; }
.section-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px 64px; align-items: end; margin-bottom: 48px; }
.section-head p { margin: 0; color: var(--muted); }
.section-head.center { grid-template-columns: 1fr; text-align: center; justify-items: center; max-width: 760px; margin-inline: auto; }
@media (max-width: 820px) { .section-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 34px; } }

/* reveal on scroll (only when JS runs; content is visible without it) */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ---------- 02 pillars ---------- */
.pillars { padding: 40px 0 clamp(64px, 8vw, 110px); }
.pillar-wrap { position: relative; }
.pillar-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; list-style: none; margin: 0; padding: 0; }
.trail { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: auto; pointer-events: none; overflow: visible; }
.trail path { fill: none; stroke: var(--sage); stroke-width: 3; stroke-linecap: round; }
.trail .dots { stroke: var(--teal); stroke-width: 3; stroke-dasharray: 0 14; opacity: .55; }
.pillar { position: relative; text-align: center; padding: 0 6px; }
.pillar .icon { margin: 0 auto 18px; }
.pillar h3 { font-size: 1.22rem; margin-bottom: 6px; }
.pillar p { margin: 0; color: var(--muted); font-size: .98rem; }
.icon {
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c, var(--sage-soft)); color: var(--ic, var(--teal-ink));
  box-shadow: 0 0 0 8px var(--cream);
  position: relative;
}
.icon svg { width: 34px; height: 34px; }
.c-lav { --c: var(--lav-soft); --ic: var(--lav); }
.c-sage { --c: var(--sage-soft); --ic: var(--teal-ink); }
.c-yel { --c: var(--yellow-soft); --ic: #A8771A; }
.c-sky { --c: var(--sky-soft); --ic: #3E6F9A; }
@media (max-width: 900px) {
  .pillar-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
  .trail { display: none; }
}
@media (max-width: 380px) { .pillar-grid { gap: 34px 12px; } .pillar h3 { font-size: 1.1rem; } }

/* ---------- 03 about preview ---------- */
.about { padding-top: 40px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.split .copy p { color: var(--muted); }
.split .copy .btn { margin-top: 10px; }
.window {
  position: relative; aspect-ratio: 5 / 5.6; max-width: 540px; width: 100%;
  border-radius: 280px 280px var(--r-lg) var(--r-lg);
  overflow: hidden; isolation: isolate;
  box-shadow: var(--shadow-lift);
  background: #EAF4F1;
}
.window .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.window .ly { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 72%; transform: scale(1.5); transform-origin: 62% 60%; }
.window .ly.front { object-position: 50% 100%; transform: scale(1.15); transform-origin: 50% 100%; }
.window-wrap { position: relative; justify-self: center; width: 100%; max-width: 540px; }
.window-tag {
  position: absolute; left: -18px; bottom: 34px;
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 18px; padding: 14px 18px 14px 14px;
  box-shadow: var(--shadow-lift); max-width: 270px;
  font-size: .95rem; line-height: 1.35; color: var(--green); font-weight: 700;
}
.window-tag .icon { width: 44px; height: 44px; box-shadow: none; flex: none; }
.window-tag .icon svg { width: 22px; height: 22px; }
.sprig { position: absolute; width: 90px; right: -26px; top: 40px; color: var(--sage); }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .window-wrap { max-width: 440px; }
  .window-tag { left: 0; bottom: 18px; }
  .sprig { right: -6px; width: 64px; }
}

/* ---------- 04 services preview ---------- */
.services { background: linear-gradient(180deg, var(--cream) 0%, #F4EFE4 100%); }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; list-style: none; padding: 0; margin: 0; }
.card {
  position: relative; height: 100%;
  background: #fff; border-radius: var(--r); padding: 28px 24px 26px;
  border: 1px solid rgba(228, 220, 205, .8);
  box-shadow: var(--shadow);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: var(--ic, var(--teal));
  opacity: .0; transition: opacity .4s;
}
.card::after {
  content: ""; position: absolute; width: 220px; height: 220px; right: -90px; top: -110px; border-radius: 50%;
  background: radial-gradient(circle, var(--c, var(--sage-soft)) 0%, transparent 70%);
  opacity: .9; transition: transform .6s var(--ease);
  z-index: 0;
}
.card > * { position: relative; z-index: 1; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.card:hover::before { opacity: 1; }
.card:hover::after { transform: scale(1.25); }
.card .icon { width: 58px; height: 58px; box-shadow: none; margin-bottom: 20px; }
.card .card-photo { display: block; width: calc(100% + 48px); max-width: none; margin: -28px -24px 0; aspect-ratio: 16 / 10; object-fit: cover; }
.card .card-photo + .icon { margin-top: -29px; box-shadow: 0 0 0 5px #fff; }
.card .icon svg { width: 28px; height: 28px; }
.card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.card p { margin: 0; color: var(--muted); font-size: .98rem; }
.cards-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 36px; }
.js .card[data-reveal] { transform: translateY(30px) scale(.98); }
.js .card[data-reveal].in { transform: none; }
.js .card[data-reveal].in:hover { transform: translateY(-6px); }
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .card .card-photo { grid-column: 1 / -1; width: calc(100% + 40px); margin: -22px -20px 16px; aspect-ratio: 16 / 9; } .card .card-photo + .icon { margin-top: 0; box-shadow: none; }
  .cards { grid-template-columns: 1fr; gap: 14px; } .card { padding: 22px 20px; display: grid; grid-template-columns: 52px 1fr; gap: 0 16px; } .card .icon { width: 52px; height: 52px; margin: 0; grid-row: span 2; } .card h3 { margin: 4px 0 4px; } }

/* ---------- 05 journey ---------- */
.journey { overflow: hidden; }
.journey .bg-leaf { position: absolute; width: 220px; left: -60px; top: 80px; color: var(--sage); opacity: .5; pointer-events: none; }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps-wrap { position: relative; }
.route { position: absolute; left: 0; top: 0; width: 100%; height: auto; overflow: visible; pointer-events: none; }
.route path { fill: none; stroke-linecap: round; }
.route .base { stroke: var(--line); stroke-width: 2.5; stroke-dasharray: 2 10; }
.route .live { stroke: var(--teal); stroke-width: 3; }
.step { position: relative; text-align: center; padding: 0 10px; }
.step .marker {
  position: relative; width: 120px; height: 120px; margin: 0 auto 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 10px var(--cream), var(--shadow);
  display: grid; place-items: center;
}
.step .marker svg { width: 74px; height: 74px; overflow: visible; }
.step .num {
  position: absolute; top: -4px; right: -4px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font: 800 .95rem var(--sans); color: #fff; background: var(--n, var(--teal-ink));
  box-shadow: 0 0 0 4px var(--cream);
}
.step h3 { font-size: 1.35rem; margin-bottom: 8px; }
.step p { margin: 0 auto; color: var(--muted); max-width: 30ch; }
/* botanical growth: each marker grows when the route reaches it */
.grow { transform-box: fill-box; transform-origin: 50% 100%; }
.js .step .grow { transform: scale(.35); opacity: .0; transition: transform .9s var(--ease), opacity .6s; }
.js .step .grow.g2 { transition-delay: .12s; }
.js .step .grow.g3 { transition-delay: .24s; }
.js .step.reached .grow { transform: none; opacity: 1; }
.js .step .num { transform: scale(.6); background: #B9C7C4; transition: transform .5s var(--ease), background-color .4s; }
.js .step.reached .num { transform: none; background: var(--n, var(--teal-ink)); }
.rail { display: none; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 34px; padding-left: 0; }
  .route { display: none; }
  .rail { display: block; position: absolute; left: 43px; top: 60px; bottom: 60px; width: 3px; background: var(--line); border-radius: 3px; }
  .rail i { position: absolute; inset: 0; background: var(--teal); border-radius: 3px; transform-origin: top; transform: scaleY(var(--p, 1)); }
  .js .rail i { transform: scaleY(var(--p, 0)); }
  .step { display: grid; grid-template-columns: 88px 1fr; gap: 0 22px; text-align: left; padding: 0; align-items: start; }
  .step .marker { width: 88px; height: 88px; margin: 0; grid-row: span 2; box-shadow: 0 0 0 8px var(--cream), var(--shadow); }
  .step .marker svg { width: 54px; height: 54px; }
  .step .num { width: 30px; height: 30px; font-size: .85rem; }
  .step h3 { margin-top: 8px; font-size: 1.25rem; }
  .step p { margin: 0; }
}

/* ---------- 06 commitment ---------- */
.commit { background: #fff; }
.commit .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; padding: 0; margin: 0; }
.promise { background: var(--cream); border-radius: var(--r); padding: 28px 24px; height: 100%; }
.promise .mark { width: 40px; height: 40px; color: var(--lav); margin-bottom: 16px; }
.promise h3 { font-size: 1.15rem; margin-bottom: 8px; }
.promise p { margin: 0; color: var(--muted); font-size: .98rem; }
.trust-ph {
  margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
  border: 1.5px dashed #D9C79B; border-radius: var(--r); padding: 20px 24px; color: var(--muted); font-size: .97rem;
  background: #FFFCF4;
}
.trust-ph strong { color: var(--green); }
@media (max-width: 1000px) { .commit .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .commit .grid { grid-template-columns: 1fr; gap: 12px; } .promise { padding: 22px 20px; } }

/* ---------- 07 finale (garden callback) ---------- */
.finale { padding-bottom: 0; }
.finale .scene-box {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-lg);
  min-height: clamp(520px, 52vw, 660px);
  display: flex; align-items: flex-start; justify-content: center;
  background: linear-gradient(180deg, #EEF6F2, #FBF3DD);
}
.finale .scene { z-index: -1; }
.finale .scene .ly { object-position: 50% 100%; }
.finale .veil { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 55% at 50% 22%, rgba(249, 245, 238, .92) 0%, rgba(249, 245, 238, .6) 55%, rgba(249, 245, 238, 0) 100%); }
.finale .card-cta { text-align: center; max-width: 660px; padding: clamp(48px, 7vw, 84px) 24px 0; }
.finale h2 { margin-bottom: 14px; }
.finale p { color: #4A5956; font-size: 1.12rem; }
.finale .btn-row { justify-content: center; margin-top: 26px; }
.finale .alt { margin-top: 16px; font-size: .95rem; color: var(--muted); }
@media (max-width: 820px) {
  .finale .wrap { width: 100%; }
  .finale .scene-box { border-radius: 0; min-height: 640px; }
}

/* ---------- footer ---------- */
.site-footer { background: var(--cream-2); padding: 72px 0 0; margin-top: clamp(56px, 7vw, 96px); color: var(--text); }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1fr; gap: 40px; }
.foot-grid h2 { font-family: var(--sans); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-ink); margin-bottom: 16px; font-weight: 800; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-grid a:not(.btn) { color: var(--green); text-decoration: none; font-weight: 600; }
.foot-grid a:not(.btn):hover { color: var(--lav); text-decoration: underline; }
.foot-brand img { height: 110px; width: auto; margin: 0 0 14px; }
.foot-brand p { color: var(--muted); max-width: 30ch; font-size: .98rem; }
.foot-contact li { font-size: .98rem; color: var(--muted); }
.foot-contact b { display: block; color: var(--green); font-size: .85rem; }
.foot-bottom { margin-top: 56px; border-top: 1px solid var(--line); padding: 20px 0 28px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .88rem; color: var(--muted); }
.foot-bottom a { color: var(--muted); }
.proto-note { display: block; }
@media (max-width: 960px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; gap: 32px; } .site-footer { padding-top: 52px; } }

/* ---------- inner pages ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(420px, 44vw, 580px);
  display: flex; align-items: center;
  background: linear-gradient(180deg, var(--cream), #F4F7EE);
}
.page-hero .scene .ly { object-position: 70% 62%; }  /* frame the tree, sky mood and page prop */
.page-hero .scene .ly-front { object-position: 70% 100%; }
@media (min-width: 821px) { .page-hero .cam.scene-contact { left: 20%; right: -20%; } .page-hero .scene-contact .ly-front { display: none; } }  /* keep the garden arch clear of the copy */
.page-hero .hero-veil { background: linear-gradient(90deg, rgba(249, 245, 238, .97) 0%, rgba(249, 245, 238, .9) 34%, rgba(249, 245, 238, .3) 60%, rgba(249, 245, 238, 0) 75%); }
.page-hero .inner { max-width: 620px; padding: 48px 0 96px; }
.page-hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.8rem); }
.page-hero .lead { margin: 0; }
@media (max-width: 820px) {
  .page-hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; background: var(--cream); }
  .page-hero > .wrap { order: -1; }
  .page-hero .inner { padding: 36px 0 0; }
  .page-hero .scene { position: relative; z-index: 0; height: clamp(220px, 60vw, 360px); }
  .page-hero .scene .ly { object-position: 64% 100%; }
  .page-hero .scene-contact .ly { object-position: 50% 100%; }
  .page-hero .hero-veil { background: linear-gradient(180deg, var(--cream) 0%, rgba(249, 245, 238, 0) 35%); }
}

.prose { max-width: 720px; }
.prose p { color: var(--muted); }
.prose h2 { margin-top: 1.4em; font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.prose ul { padding-left: 1.2em; color: var(--muted); }
.prose li { margin-bottom: .4em; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }
.panel { background: #fff; border-radius: var(--r); padding: 30px 28px; box-shadow: var(--shadow); border: 1px solid rgba(228, 220, 205, .7); }
.panel h3 { margin-bottom: 10px; }
.panel p:last-child, .panel ul:last-child { margin-bottom: 0; }
.panel ul { margin: 0; padding-left: 1.2em; color: var(--muted); }
.panel.dashed { background: #FFFCF4; border: 1.5px dashed #D9C79B; box-shadow: none; }

.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; padding: 0; margin: 0; }
.member { background: #fff; border-radius: var(--r); padding: 26px; text-align: center; border: 1.5px dashed #D9C79B; }
.member .avatar { width: 112px; height: 112px; border-radius: 50%; margin: 0 auto 16px; background: var(--sage-soft); display: grid; place-items: center; color: var(--teal); }
.member .avatar svg { width: 54px; height: 54px; }
.member h3 { font-size: 1.15rem; margin-bottom: 4px; }
.member p { margin: 0; color: var(--muted); font-size: .95rem; }
@media (max-width: 860px) { .team { grid-template-columns: 1fr; } }

.service-list { display: grid; gap: 22px; list-style: none; padding: 0; margin: 0; }
.service-row { display: grid; grid-template-columns: 76px 1fr; gap: 24px; background: #fff; border-radius: var(--r); padding: 30px; box-shadow: var(--shadow); align-items: start; }
.service-row h3 { margin-bottom: 6px; }
.service-row.has-photo { grid-template-columns: 76px 1fr minmax(200px, 300px); align-items: center; }
.row-photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-sm); }
.feature { display: block; width: 100%; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow); aspect-ratio: 16 / 10; }
.feature.tall { aspect-ratio: 4 / 3; object-position: 50% 30%; }
.feature.wide { aspect-ratio: 21 / 8; margin-bottom: 32px; object-position: 50% 45%; }
.stack { display: grid; gap: 20px; }
.service-row p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .service-row.has-photo { grid-template-columns: 76px 1fr; } .service-row .row-photo { grid-column: 1 / -1; grid-row: 1; } .feature.wide { aspect-ratio: 16 / 10; } }
@media (max-width: 560px) { .service-row, .service-row.has-photo { grid-template-columns: 1fr; padding: 24px 22px; gap: 14px; } .service-row .icon { width: 60px; height: 60px; } }

.faq { max-width: 820px; margin-inline: auto; }
.faq details { background: #fff; border-radius: var(--r-sm); margin-bottom: 12px; box-shadow: var(--shadow); }
.faq summary { cursor: pointer; padding: 20px 56px 20px 24px; font-weight: 800; color: var(--green); list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 12px; height: 12px; border-right: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal); transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details > div { padding: 0 24px 22px; color: var(--muted); }
.faq details > div a { font-weight: 700; }
.faq summary:hover { color: var(--teal-ink); }

.res-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; list-style: none; padding: 0; margin: 0; }
.res { background: #fff; border-radius: var(--r); padding: 30px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.res .kind { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--lav); }
.res h3 { margin: 0; }
.res p { margin: 0; color: var(--muted); }
.res .tbc { align-self: flex-start; margin-top: 6px; }
@media (max-width: 760px) { .res-grid { grid-template-columns: 1fr; } }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.form { background: #fff; border-radius: var(--r-lg); padding: clamp(26px, 4vw, 44px); box-shadow: var(--shadow-lift); }
.form h2 { font-size: clamp(1.7rem, 2.4vw, 2.1rem); }
.field { display: grid; gap: 8px; margin-bottom: 20px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
label, legend { font-weight: 800; color: var(--green); font-size: .97rem; }
.opt { font-weight: 600; color: var(--muted); font-size: .88rem; }
.hint { font-size: .88rem; color: var(--muted); margin: 0; }
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  padding: 14px 16px; min-height: 52px;
  border: 1.5px solid #D6CDBB; border-radius: 14px; background: #FFFEFB;
  transition: border-color .2s, box-shadow .2s;
}
textarea { min-height: 130px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(57, 143, 138, .18); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #B4483C; }
.err { color: #A33A2F; font-size: .88rem; font-weight: 700; margin: 0; }
fieldset { border: 0; padding: 0; margin: 0 0 20px; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid #D6CDBB; font-weight: 700; color: var(--green); background: #FFFEFB; transition: all .2s; }
.choice input:checked + span { background: var(--teal-ink); border-color: var(--teal-ink); color: #fff; }
.choice input:focus-visible + span { outline: 3px solid var(--lav); outline-offset: 2px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; color: var(--muted); font-size: .95rem; margin-bottom: 22px; }
.check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--teal-ink); flex: none; }
.form-status { margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: var(--sage-soft); color: var(--green); font-weight: 700; display: none; }
.form-status.show { display: block; }
.side { display: grid; gap: 20px; }
.next-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; counter-reset: n; }
.next-steps li { counter-increment: n; display: grid; grid-template-columns: 36px 1fr; gap: 14px; color: var(--muted); }
.next-steps li::before { content: counter(n); width: 36px; height: 36px; border-radius: 50%; background: var(--lav-soft); color: var(--lav); font-weight: 800; display: grid; place-items: center; }
.next-steps b { color: var(--green); display: block; }

.cta-band { background: var(--green); color: #E8F1EF; border-radius: var(--r-lg); padding: clamp(36px, 5vw, 60px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; position: relative; overflow: hidden; }
.cta-band h2 { color: #fff; margin: 0 0 6px; font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.cta-band p { margin: 0; color: #CFE2DE; }
.cta-band .btn { --bg: var(--yellow); --fg: #2B3A37; border-color: var(--yellow); box-shadow: none; }
.cta-band .btn:hover { background: #FFDD85; border-color: #FFDD85; color: #2B3A37; }
.cta-band .leaf { position: absolute; right: -30px; bottom: -40px; width: 200px; color: rgba(169, 217, 179, .15); pointer-events: none; }

/* page transitions between pages (Chrome/Edge/Safari 18+; others just navigate) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; animation-timing-function: var(--ease); }
::view-transition-old(root) { animation-name: vt-out; }
::view-transition-new(root) { animation-name: vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* reduced motion: everything visible, nothing moves */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .step .grow { opacity: 1; transform: none; }
  .js .step .num { transform: none; background: var(--n, var(--teal-ink)); }
  .js .rail i { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* per-photo focal points */
img[src*="/daily-living-"] { object-position: 80% 35%; }
img[src*="/home-about-"] { object-position: 38% 50%; }

/* "Coming soon": contact actions (form, Start/Connect buttons, CTA bands, email) stay in the
   HTML but are hidden until the GHL form and email are ready. Delete this rule to show them. */
[data-soon] { display: none !important; }
/* Internal review notes ("to confirm" badges, mission hint): hidden on the site. */
[data-review] { display: none !important; }
.contact-grid > [data-soon] + .side { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.finale .call { margin-top: 22px; margin-bottom: 0; font-size: 1.05rem; font-weight: 700; color: var(--green); }
.finale .call a, .foot-contact a { font-weight: 700; }

/* ---------- resources: article pages ---------- */
.res { position: relative; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.res h3 a { color: inherit; text-decoration: none; }
.res h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }  /* whole card is the link */
.res:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.res:focus-within { outline: 3px solid var(--lav); outline-offset: 3px; }
.res h3 a:focus-visible { outline: none; }
.res .read { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--teal-ink); }
.res .read svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.res:hover .read svg { transform: translateX(4px); }

.article-hero { min-height: clamp(360px, 36vw, 480px); }
.article-hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); }
.back {
  display: table; margin-bottom: 18px; padding: 9px 18px 9px 14px;
  font-weight: 800; font-size: .95rem; text-decoration: none; color: var(--teal-ink);
  background: #fff; border: 1.5px solid rgba(42, 112, 107, .35); border-radius: 999px;
  box-shadow: 0 6px 16px -10px rgba(49, 92, 87, .5);
  transition: background-color .25s, color .25s, border-color .25s, transform .35s var(--ease);
}
.back:hover { background: var(--teal-ink); border-color: var(--teal-ink); color: #fff; transform: translateX(-3px); }
.article-section { padding-top: 32px; }
.article { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.article-body { max-width: 740px; }
.article-body .lead { color: #4A5956; }
.article-body h2 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); margin-top: 1.6em; }
.article-body strong { color: var(--green); }
.disclaimer { font-size: .92rem; background: var(--sky-soft); border-radius: var(--r-sm); padding: 14px 18px; color: #3E5A66 !important; }
.note-inline { margin-top: 2em; padding: 18px 20px; border-left: 4px solid var(--sage); background: #fff; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.steps-list { padding-left: 0; list-style: none; counter-reset: s; color: var(--muted); }
.steps-list li { counter-increment: s; position: relative; padding-left: 52px; margin-bottom: 18px; }
.steps-list li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; border-radius: 50%; background: var(--lav-soft); color: var(--lav); font-weight: 800; display: grid; place-items: center; }
.checklist { list-style: none; padding-left: 0 !important; }
.checklist li { position: relative; padding-left: 34px; margin-bottom: 12px; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 6px; background: var(--sage-soft); box-shadow: inset 0 0 0 1.5px var(--sage); }
.checklist li::after { content: ""; position: absolute; left: 6px; top: 7px; width: 8px; height: 5px; border-left: 2px solid var(--teal-ink); border-bottom: 2px solid var(--teal-ink); transform: rotate(-45deg); }
.glossary { margin: 1.5em 0 0; display: grid; gap: 14px; }
.glossary > div { background: #fff; border-radius: var(--r-sm); padding: 18px 22px; box-shadow: var(--shadow); }
.glossary dt { font-family: var(--serif); font-weight: 600; color: var(--green); font-size: 1.15rem; margin-bottom: 4px; }
.glossary dd { margin: 0; color: var(--muted); }
.article-aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 18px; }
.aside-title { font-size: 1.2rem; margin-bottom: 6px; }
.article-aside .call { font-weight: 700; color: var(--green); margin: 0; }
.article-aside .call a { font-weight: 800; }
.more ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.more a { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--green); font-weight: 700; }
.more li:last-child a { border-bottom: 0; }
.more a:hover { color: var(--lav); }
.more .kind { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lav); font-weight: 800; }
@media (max-width: 900px) {
  .article { grid-template-columns: 1fr; }
  .article-aside { position: static; }
}

/* "Text Us" SMS button */
.btn.sms svg { width: 20px; height: 20px; }
.btn.sms:hover svg { transform: none; }
.sms-row { margin-top: 4px; }
.article-aside .btn.sms { margin-top: 6px; }
/* while only one detail panel is visible, center it */
.details:not(:has(> .panel:not([data-soon]) ~ .panel:not([data-soon]))) > .panel:not([data-soon]) { grid-column: 1 / -1; justify-self: center; width: min(640px, 100%); text-align: center; }

/* footer: the SMS contact as a quiet link, styled like the other footer details */
.foot-contact .sms-link { display: inline-flex; align-items: center; gap: 8px; color: var(--teal-ink); font-weight: 700; text-decoration: none; }
.foot-contact .sms-link svg { width: 18px; height: 18px; flex: none; }
.foot-contact .sms-link:hover { color: var(--lav); text-decoration: underline; text-underline-offset: .2em; }

/* contact page: details as an icon list */
.contact-list, .panel .contact-list { list-style: none; margin: 8px 0 0; padding: 0; }
.contact-list > li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); color: var(--muted); }
.contact-list > li:first-child { border-top: 0; padding-top: 8px; }
.contact-list .icon { width: 52px; height: 52px; box-shadow: none; }
.contact-list .icon svg { width: 24px; height: 24px; }
.contact-list b { display: block; color: var(--green); font-size: .9rem; margin-bottom: 2px; }
.contact-list .sms-link { display: inline-flex; align-items: center; gap: 8px; color: var(--teal-ink); font-weight: 800; text-decoration: none; font-size: 1.05rem; }
.contact-list .sms-link svg { display: none; }
.contact-list .sms-link::after { content: "→"; transition: transform .3s var(--ease); }
.contact-list .sms-link:hover { color: var(--lav); }
.contact-list .sms-link:hover::after { transform: translateX(4px); }
.contact-grid .side { align-items: start; }

/* back link repeated at the end of each guide */
.article-end { margin: 2.6em 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.article-end .back { margin: 0; }

/* header Text Us: keep it compact */
.nav-cta.sms svg { width: 18px; height: 18px; }
/* footer links: comfortable tap targets */
.foot-grid ul a:not(.btn):not(.sms-link) { display: inline-block; padding: 6px 0; }
.foot-contact .sms-link { padding: 6px 0; }
.foot-grid ul { gap: 4px; }

/* Text Us QR dialog (computers) */
.qr-dialog { border: 0; border-radius: var(--r-lg); padding: 36px 36px 30px; width: min(420px, calc(100% - 32px)); text-align: center; box-shadow: var(--shadow-lift); background: #fff; color: var(--text); }
.qr-dialog::backdrop { background: rgba(49, 92, 87, .45); backdrop-filter: blur(3px); }
.qr-dialog .icon { margin: 0 auto 14px; width: 56px; height: 56px; box-shadow: none; }
.qr-dialog .icon svg { width: 26px; height: 26px; }
.qr-dialog h2 { font-size: 1.6rem; margin-bottom: 8px; }
.qr-dialog p { color: var(--muted); font-size: .98rem; }
.qr-dialog img { margin: 18px auto; width: 220px; height: 220px; padding: 14px; border-radius: var(--r); background: var(--cream); box-sizing: content-box; }
.qr-dialog .qr-alt { font-size: .88rem; margin: 0; }
.qr-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--cream); color: var(--green); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.qr-close:hover { background: var(--cream-2); }

/* ---------- phones: tighter rhythm, centered footer ---------- */
/* a panel whose last visible paragraph is followed only by a hidden review note */
.panel > p:has(+ [data-review]:last-child) { margin-bottom: 0; }
@media (max-width: 560px) {
  .section { padding: 48px 0; }
  .pillars { padding-bottom: 48px; }
  .about { padding-top: 16px; }
  .section-head { margin-bottom: 26px; }
  .section-head.center { margin-bottom: 26px; }
  .section + .wrap > .cta-band { margin-top: -8px; }
  .site-footer { margin-top: 48px; }
  .cta-band { padding: 32px 26px; gap: 18px; }

  /* brand centered on top, then Explore and Contact side by side */
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .foot-brand { grid-column: 1 / -1; text-align: center; }
  .foot-brand img { margin-inline: auto; height: 96px; }
  .foot-brand p { margin-inline: auto; }
  .foot-grid h2 { margin-bottom: 10px; }
  .foot-grid ul { gap: 0; }
  .foot-contact li { font-size: .92rem; margin-bottom: 8px; }
  .foot-contact .sms-link { align-items: flex-start; gap: 6px; }
  .foot-contact .sms-link svg { margin-top: 3px; }
  .foot-bottom { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
}

/* ---------- phone hero: butterflies, drifting petals and sparkles ----------
   Phones and tablets only. Kept to the band around the tree (below the copy,
   above the buttons) so nothing crosses the text. */
.hero-life { display: none; }
@media (max-width: 820px) {
  .hero-life { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; container-type: size; }
  .bf { position: absolute; height: auto; aspect-ratio: 80 / 64; left: 0; top: 0; will-change: transform; }
  .bf svg { width: 100%; height: 100%; overflow: visible; }
  .bf .w { transform-box: fill-box; animation: flap .32s ease-in-out infinite alternate; }
  .bf .w.l { transform-origin: right center; }
  .bf .w.r { transform-origin: left center; }
  @keyframes flap { to { transform: scaleX(.3); } }
  /* each butterfly: its own size, speed and loop around the tree */
  .bf.b1 { width: 46px; animation: fly1 17s ease-in-out infinite; }
  .bf.b2 { width: 38px; animation: fly2 21s ease-in-out infinite -6s; }
  .bf.b3 { width: 40px; animation: fly3 19s ease-in-out infinite -11s; }
  .bf.b4 { width: 36px; animation: fly4 23s ease-in-out infinite -3s; }
  .bf.b5 { width: 32px; animation: fly5 15s ease-in-out infinite -8s; }
  .bf.b6 { width: 30px; animation: fly1 25s ease-in-out infinite -14s reverse; }
  .bf.b2 .w, .bf.b5 .w { animation-duration: .26s; }
  .bf.b3 .w { animation-duration: .38s; }
  @keyframes fly1 { 0% { transform: translate(-10cqw, 59cqh) rotate(10deg); } 25% { transform: translate(18cqw, 50cqh) rotate(-6deg); }
    50% { transform: translate(44cqw, 55cqh) rotate(8deg); } 75% { transform: translate(78cqw, 48cqh) rotate(-4deg); } 100% { transform: translate(108cqw, 57cqh) rotate(6deg); } }
  @keyframes fly2 { 0% { transform: translate(104cqw, 48cqh) scaleX(-1); } 30% { transform: translate(72cqw, 57cqh) scaleX(-1); }
    60% { transform: translate(38cqw, 46cqh) scaleX(-1); } 100% { transform: translate(-12cqw, 54cqh) scaleX(-1); } }
  @keyframes fly3 { 0%, 100% { transform: translate(8cqw, 52cqh); } 25% { transform: translate(16cqw, 61cqh) rotate(12deg); }
    50% { transform: translate(6cqw, 68cqh) rotate(-8deg); } 75% { transform: translate(20cqw, 57cqh) rotate(6deg); } }
  @keyframes fly4 { 0%, 100% { transform: translate(84cqw, 62cqh) scaleX(-1); } 33% { transform: translate(74cqw, 52cqh) scaleX(-1) rotate(-10deg); }
    66% { transform: translate(90cqw, 46cqh) scaleX(-1) rotate(8deg); } }
  @keyframes fly5 { 0% { transform: translate(-8cqw, 68cqh); } 40% { transform: translate(30cqw, 62cqh) rotate(-10deg); }
    70% { transform: translate(56cqw, 66cqh) rotate(8deg); } 100% { transform: translate(110cqw, 61cqh); } }

  .pt { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: calc(var(--s) * .7); border-radius: 60% 40% 60% 40%;
    background: var(--c); opacity: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); animation: drift var(--d) linear infinite var(--dl); }
  @keyframes drift { 0% { opacity: 0; transform: translate(0, -20px) rotate(0deg); } 15% { opacity: .9; }
    85% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx), 110px) rotate(320deg); } }
  .sp { position: absolute; left: var(--x); top: var(--y); width: 14px; height: 14px; background: #fff;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    filter: drop-shadow(0 0 3px rgba(255, 244, 200, .9)); animation: twinkle 3.2s ease-in-out infinite var(--dl); }
  @keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1); } }
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce) { .hero-life { display: none; } }

/* ---------- phone hero v2: rainbow above, path leading to the buttons ---------- */
.hero-rainbow, .hero-meadow { display: none; }
@media (max-width: 820px) {
  .hero { --btn-zone: 168px; padding-bottom: calc(var(--btn-zone) - 36px);
    background: linear-gradient(180deg, var(--cream) 0%, #F6F5EC 22%, #EAF4F0 48%, #DCEEF0 72%, #E9F2E4 100%); }
  /* a large, translucent arc behind the copy; its feet disappear behind the meadow */
  /* drawn by site.js: concentric circles centered on the tree, feet on the horizon */
  .hero-rainbow { display: block; position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; opacity: .4; filter: blur(.8px); pointer-events: none; }
  .hero .scene { margin-top: -40px; }
  /* the meadow under the buttons: the path ends here, at the buttons */
  .hero-meadow { display: block; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: var(--btn-zone);
    background:
      radial-gradient(ellipse 30% 70% at 26% 0, rgba(250, 242, 224, .95) 0%, rgba(250, 242, 224, .5) 45%, rgba(250, 242, 224, 0) 75%),
      linear-gradient(180deg, rgba(181, 216, 160, 0) 0, #B5D8A0 26px, #A6D18F 55%, #98C982 100%); }
  .hero-meadow::before { content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 12% 40%, #F5CE67 0 2px, transparent 3px), radial-gradient(circle at 30% 70%, #FFFDF6 0 2px, transparent 3px),
      radial-gradient(circle at 78% 35%, #A88AD8 0 2px, transparent 3px), radial-gradient(circle at 90% 75%, #F4B2C8 0 2px, transparent 3px),
      radial-gradient(circle at 55% 88%, #FFFDF6 0 2px, transparent 3px);
    background-size: 120px 70px; opacity: .8; }
  .hero .btn-row { bottom: 44px; }
  .hero .btn-row .btn { box-shadow: 0 10px 24px -12px rgba(30, 70, 40, .55); }
}
/* short phones (iPhone SE): a smaller scene so the buttons stay on the first screen */
@media (max-width: 820px) and (max-height: 720px) {
  .hero .scene { min-height: 250px; }
  .hero { --btn-zone: 158px; }
  .hero .btn-row { bottom: 36px; }
}

/* ---------- inner-page heroes: a different close-up and animation per page ---------- */
.page-life { position: absolute; inset: 0 0 0 56%; z-index: 2; pointer-events: none; overflow: hidden; container-type: size; }
.page-life > * { position: absolute; }
.page-life .bf { left: 0; top: 0; aspect-ratio: 80 / 64; width: 34px; will-change: transform; }
.page-life .bf svg, .page-life span > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.page-life .bf .w { transform-box: fill-box; animation: flap .3s ease-in-out infinite alternate; }
.page-life .bf .w.l { transform-origin: right center; }
.page-life .bf .w.r { transform-origin: left center; }
@keyframes flap { to { transform: scaleX(.3); } }
@keyframes pl-a { 0% { transform: translate(-8cqw, 62cqh) rotate(8deg); } 30% { transform: translate(28cqw, 48cqh) rotate(-6deg); }
  60% { transform: translate(60cqw, 60cqh) rotate(6deg); } 100% { transform: translate(108cqw, 50cqh); } }
@keyframes pl-b { 0%, 100% { transform: translate(70cqw, 70cqh) scaleX(-1); } 33% { transform: translate(52cqw, 58cqh) scaleX(-1) rotate(-8deg); }
  66% { transform: translate(84cqw, 52cqh) scaleX(-1) rotate(8deg); } }
@keyframes pl-c { 0%, 100% { transform: translate(16cqw, 74cqh); } 50% { transform: translate(34cqw, 64cqh) rotate(10deg); } }
.page-life .bf.b1 { animation: pl-a 16s ease-in-out infinite; }
.page-life .bf.b2 { width: 28px; animation: pl-b 13s ease-in-out infinite -4s; }
.page-life .bf.b3 { width: 26px; animation: pl-c 9s ease-in-out infinite -2s; }

/* About (dawn): birds crossing the sky, the sun breathing */
.life-about .bird { left: 0; top: 0; width: 30px; height: 12px; animation: bird 22s linear infinite; }
.life-about .bird svg { animation: wingbeat .9s ease-in-out infinite alternate; transform-origin: center; }
.life-about .b2 { width: 22px; animation-delay: -1.2s; animation-duration: 24s; --y: 6cqh; }
.life-about .b3 { width: 26px; animation-delay: -9s; animation-duration: 26s; --y: 14cqh; }
.life-about .b4 { width: 20px; animation-delay: -15s; animation-duration: 20s; --y: -4cqh; }
@keyframes bird { from { transform: translate(-12cqw, calc(26cqh + var(--y, 0px))); } 50% { transform: translate(50cqw, calc(18cqh + var(--y, 0px))); } to { transform: translate(112cqw, calc(24cqh + var(--y, 0px))); } }
@keyframes wingbeat { to { transform: scaleY(.45); } }
.life-about .sunglow { left: 40%; top: 30%; width: 40cqw; height: 40cqw; border-radius: 50%; translate: -50% -50%;
  background: radial-gradient(circle, rgba(255, 232, 196, .55), rgba(255, 232, 196, 0) 65%); animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.18); opacity: .7; } }

/* Services: bees buzzing over the tulips */
.life-services .bee { left: 0; top: 0; width: 26px; height: 20px; }
.life-services .bee .wg { transform-box: fill-box; transform-origin: bottom; animation: buzz .08s linear infinite alternate; }
@keyframes buzz { to { transform: scaleY(.4); } }
.life-services .e1 { animation: bee1 11s ease-in-out infinite; }
.life-services .e2 { width: 22px; animation: bee2 13s ease-in-out infinite -5s; }
.life-services .e3 { width: 20px; animation: bee1 15s ease-in-out infinite -9s reverse; }
@keyframes bee1 { 0% { transform: translate(6cqw, 70cqh); } 20% { transform: translate(20cqw, 62cqh); } 40% { transform: translate(14cqw, 76cqh); }
  60% { transform: translate(40cqw, 66cqh); } 80% { transform: translate(28cqw, 72cqh); } 100% { transform: translate(6cqw, 70cqh); } }
@keyframes bee2 { 0%, 100% { transform: translate(84cqw, 64cqh) scaleX(-1); } 25% { transform: translate(70cqw, 72cqh) scaleX(-1); }
  50% { transform: translate(90cqw, 76cqh) scaleX(-1); } 75% { transform: translate(76cqw, 60cqh) scaleX(-1); } }

/* Approach: fireflies rising softly along the path */
.life-approach .ff { left: var(--x); top: var(--y); width: 6px; height: 6px; border-radius: 50%; background: #FFF6B8;
  box-shadow: 0 0 8px 3px rgba(255, 236, 140, .75); opacity: 0; animation: firefly var(--d) ease-in-out infinite var(--dl); }
@keyframes firefly { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; } 50% { transform: translate(12px, -26px); }
  80% { opacity: .9; } 100% { opacity: 0; transform: translate(-8px, -54px); } }

/* Resources: leaves drifting down, a paper plane gliding by */
.life-resources .lf { left: var(--x); top: calc(var(--y) - 40%); width: var(--s); height: var(--s); color: var(--c); opacity: 0;
  animation: leaf var(--d) linear infinite var(--dl); }
@keyframes leaf { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 15% { opacity: .95; } 85% { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--dx), 34cqh) rotate(300deg); } }
.life-resources .plane { left: 0; top: 0; width: 38px; height: 24px; animation: plane 14s ease-in-out infinite -3s; }
@keyframes plane { 0% { transform: translate(-14cqw, 40cqh) rotate(-6deg); } 50% { transform: translate(50cqw, 26cqh) rotate(-12deg); }
  100% { transform: translate(114cqw, 34cqh) rotate(4deg); } }

/* Contact: little hearts and message bubbles rising from the garden arch */
.life-contact .up { left: var(--x); bottom: 30%; width: 20px; height: 18px; color: var(--c); opacity: 0; animation: float-up 7.5s ease-out infinite var(--dl); }
.life-contact .bub { width: 30px; height: 26px; }
@keyframes float-up { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } 70% { opacity: .9; }
  100% { opacity: 0; transform: translate(14px, -46cqh) scale(1); } }

@media (max-width: 820px) {
  .page-life { inset: 0; }
  .page-hero { background: var(--cream); }
  /* like Home: the sky fades into the page above, and the garden layers sit lower (84% tall,
     anchored to the bottom) so the whole tree stays below the fade and is never cut */
  .page-hero > .wrap { position: relative; z-index: 3; }
  .page-hero .scene { height: clamp(360px, 118vw, 560px); margin-top: -36px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%); mask-image: linear-gradient(180deg, transparent 0, #000 16%); }
  .page-hero .scene .ly:not(:first-child) { top: auto; bottom: 0; height: 84%; }
  .page-hero .scene .ly.ly-front { height: 88%; bottom: -3%; }
  .page-hero .hero-veil { display: none; }
  /* each page frames its own subject */
  .page-hero .scene-about .ly { object-position: 74% 100%; }
  .page-hero .scene-services .ly:not(:first-child) { object-position: 48% 100%; scale: 1;  }
  .page-hero .scene-approach .ly { object-position: 50% 100%; }
  .page-hero .scene-resources .ly { object-position: 58% 100%; }
  .page-hero .scene-contact .ly:not(:first-child) { object-position: 50% 100%; scale: 1.5; transform-origin: 50% 82%; }
  .page-hero .scene .ly-front { scale: 1; }
}
@media (prefers-reduced-motion: reduce) { .page-life { display: none; } }

/* footer credit */
.foot-bottom .powered a { display: inline-block; padding: 4px 0; color: var(--teal-ink); font-weight: 800; text-decoration: none; }
.foot-bottom .powered a:hover { color: var(--lav); text-decoration: underline; }

/* desktop footer: while the 4th column ("Take the first step") is hidden, spread the three
   visible columns across the width; the bottom row stays on one aligned line */
@media (min-width: 961px) {
  .foot-grid:has(> [data-soon]) { grid-template-columns: 1.3fr 1fr 1fr; gap: 40px 64px; }
  .foot-grid:has(> [data-soon]) > :nth-child(2) { justify-self: center; }
  .foot-grid:has(> [data-soon]) > :nth-child(3) { justify-self: end; }
}
.foot-bottom { align-items: center; }
.foot-bottom .powered a { padding-block: 2px; }

/* desktop inner heroes: show the whole tree. The hero is taller, the garden layers start a little
   below the header so the canopy has room, and the sky fades in at the top. */
@media (min-width: 821px) {
  .page-hero { min-height: clamp(520px, 50vw, 700px); }
  /* wide screens crop the art; crop it at the bottom (meadow) instead of the top (canopy) */
  .page-hero .scene .ly { object-position: 70% 26%; }
  .page-hero .cam:not(.scene-contact) { left: 10%; right: -10%; }   /* tree a little further right, clear of the copy */
  .page-hero .scene .ly:not(:first-child) { top: 6%; height: 94%; }
  .page-hero .scene .ly.ly-front { top: auto; bottom: -3%; height: 100%; object-position: 70% 100%; }
  .page-hero .scene .ly:first-child { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
  .page-hero .inner { padding: 40px 0 120px; }
  .article-hero { min-height: clamp(480px, 44vw, 620px); }
}

/* phones: keep the hero buttons above in-app/Safari bottom toolbars (they float over the page) */
@media (max-width: 820px) {
  .hero { min-height: calc(100svh - var(--header-h) - 56px); }
  .hero .btn-row { bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
}
/* the closing garden on Home runs straight into the footer, with no empty band between them */
.finale.section { padding-bottom: 0; }
main:has(> .finale:last-child) + .site-footer { margin-top: 0; }