/* Option D — Clearing. Same warm paper, sage and terracotta as A; the difference is motion.
   Character: Fraunces display at 300 vs DM Sans body (high contrast); one terracotta accent;
   airy, cinematic rhythm (pinned scenes between short sections); flat colour planes, no borders. */
:root {
  --bg: #f4efe4; --bg-2: #ebe4d4; --plane: #8da286; --plane-ink: #1e3528;
  --ink: #1e3528; --ink-2: #3b4d41; --muted: #55665a;
  --accent: #a4552c; --accent-ink: #fbf7ef; --gold: #c9a24a; --sage: #9fb59b; --dusk: #1b2e24;
  --line: color-mix(in oklab, var(--ink) 16%, transparent); --line-strong: color-mix(in oklab, var(--ink) 32%, transparent);
  --danger: #a4552c;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --font-body: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --display-weight: 300;
  --radius-sm: .75rem; --radius-lg: 1.75rem; --radius-pill: 999px;
  --gutter: clamp(1.25rem, 4vw, 3rem); --measure: 78rem;
}
html { scroll-behavior: auto; }
body { overflow-x: clip; }
.section-head h2 { font-weight: 300; }

/* ---------- preloader (short, once per visit) ---------- */
.preloader { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: grid; place-items: center; clip-path: inset(0% 0% 0% 0%); }
.preloader img { width: clamp(6rem, 18vw, 9rem); height: auto; }
.preloader .count { position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: 1rem; font-family: var(--font-display); font-weight: 300; font-size: clamp(3.5rem, 13vw, 9rem); line-height: 1; color: var(--ink); font-variation-settings: "opsz" 144; letter-spacing: -.03em; }
.preloader.is-done { pointer-events: none; }

/* ---------- fixed header (sticky can't live inside the smooth-scroll transform) ---------- */
.site-header { position: fixed; left: 0; right: 0; top: 0; background: transparent; }
.site-header.is-scrolled { background: color-mix(in oklab, var(--bg) 74%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.site-header .bar { min-height: 4.5rem; }
.magnet { transition: background-color .25s, color .25s, box-shadow .25s; will-change: transform; }
.magnet:hover { transform: none; }

/* ---------- cursor light (desktop only) ---------- */
.cursor-glow { position: fixed; left: 0; top: 0; z-index: 30; width: 34rem; height: 34rem; margin: -17rem 0 0 -17rem; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgb(255 206 150 / .22), transparent 62%); mix-blend-mode: multiply; transition: opacity .6s; }
@media (hover: none), (max-width: 899px) { .cursor-glow { display: none; } }

/* ---------- 1 · hero: the fog lifts ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: clip; display: grid; align-items: safe center; isolation: isolate; background: var(--bg); }
.hero .bg { position: absolute; inset: 0; z-index: -3; }
.hero .bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.1); will-change: transform; }
.hero .tint { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgb(244 239 228 / .25) 0%, rgb(164 85 44 / .16) 55%, var(--bg) 100%); }
.hero .fog, .hero .fog-css { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.hero .fog-css { display: none; background: radial-gradient(70% 60% at 30% 40%, var(--bg), transparent 70%), radial-gradient(60% 70% at 75% 60%, var(--bg), transparent 70%), color-mix(in oklab, var(--bg) 85%, transparent); }
body.no-fog .hero .fog { display: none; } body.no-fog .hero .fog-css { display: block; }
.hero .glow { position: absolute; inset: -25%; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(28% 28% at var(--gx, 62%) var(--gy, 38%), rgb(255 214 160 / .75), transparent 70%); mix-blend-mode: soft-light; }
.hero .content { position: relative; display: grid; gap: 2.5rem; padding-block: 9rem 5rem; align-items: center; }
@media (min-width: 900px) { .hero .content { grid-template-columns: 1.05fr .95fr; gap: 3rem; padding-block: 7.5rem 4rem; } }
.hero .text { position: relative; }
.hero .text::before { content: ""; position: absolute; inset: -3rem -4rem -3rem -5rem; z-index: -1; background: radial-gradient(60% 60% at 40% 50%, color-mix(in oklab, var(--bg) 88%, transparent), transparent 75%); filter: blur(10px); }
.hero h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.9rem, 7vw, 6.2rem); line-height: .98; letter-spacing: -.025em; max-width: 11ch; margin-block: 1.25rem 1.5rem; font-variation-settings: "opsz" 144; }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero .lede { margin-bottom: 1.5rem; color: var(--ink); }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }
.hero .who { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .9rem; color: var(--muted); }
.hero .who span::before { content: "·"; margin-right: .6rem; }
.hero .who span:first-child::before { content: none; }
.hero .scroll-cue { display: inline-flex; margin-top: 1.75rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); align-items: center; gap: .75rem; }
.hero .scroll-cue i { width: 3rem; height: 1px; background: var(--muted); display: block; animation: cue 2.2s ease-in-out infinite; transform-origin: left; }
@keyframes cue { 50% { transform: scaleX(.3); } }
.hero .portrait { position: relative; width: min(100%, 34rem); aspect-ratio: 1; margin: -4rem auto 0; align-self: center; border-radius: 50%; overflow: hidden; clip-path: circle(0% at 50% 50%); box-shadow: 0 40px 90px -40px rgb(30 53 40 / .55); }
.hero .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
/* phones: the hero is pinned at one screen tall, so the portrait becomes a small disc beside the headline */
@media (max-width: 899px) {
  .hero .content { padding-block: 8.5rem 4rem; gap: 0; }
  .hero h1 { font-size: clamp(2.5rem, 6vw, 4rem); max-width: 8ch; }
  .hero .portrait { position: absolute; right: var(--gutter); top: 11rem; width: clamp(8rem, 36vw, 18rem); margin: 0; }
  .hero .who { display: none; }
}
@media (max-width: 599px) {
  .hero .portrait { top: 12.25rem; width: clamp(6rem, 26vw, 8rem); }
}
.hero .eyebrow, .hero .cta-row, .hero .who, .hero .scroll-cue { opacity: 0; transform: translateY(14px); }
html.no-gsap .hero :is(.eyebrow, .cta-row, .who, .scroll-cue) { opacity: 1; transform: none; }
html.no-gsap .hero .portrait { clip-path: circle(60% at 50% 50%); }
html.no-gsap .hero .fog, html.no-gsap .hero .fog-css { display: none; }

/* ---------- 2 · emblem: four ways in ---------- */
.emblem { padding: 0; background: var(--bg); }
.emblem .pin { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; padding-block: 6.5rem 3.5rem; }
.emblem .inner { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) { .emblem .inner { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); } }
.emblem .art { position: relative; width: min(100%, 36vh, 34rem); margin-inline: auto; aspect-ratio: 1; }
@media (min-width: 900px) { .emblem .art { width: min(100%, 70vh, 34rem); } }
.emblem .art svg { width: 100%; height: 100%; overflow: visible; }
.emblem .art .final { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.emblem .stroke { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.emblem .stroke.ring { stroke-width: 2; }
.emblem .stroke.rope { stroke: var(--gold); stroke-width: 4; stroke-dasharray: 8 6; }
.emblem .copy .eyebrow { margin-bottom: .75rem; }
.emblem .copy h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.05; letter-spacing: -.01em; }
.emblem .progress { display: flex; gap: .5rem; margin: 1.25rem 0 1.5rem; }
.emblem .progress i { width: 2.2rem; height: 3px; border-radius: 3px; background: var(--line); transition: background-color .3s; }
.emblem .progress i.on { background: var(--accent); }
.emblem .panels { position: relative; min-height: 15rem; }
@media (min-width: 900px) { .emblem .panels { min-height: 22rem; } }
.emblem .panel { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.emblem .panel .num { font-family: var(--font-display); font-size: .95rem; letter-spacing: .1em; color: var(--muted); }
.emblem .panel h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1; margin: .35rem 0 .25rem; letter-spacing: -.02em; }
.emblem .panel .sub { font-weight: 600; color: var(--accent); margin-bottom: .75rem; }
.emblem .panel p { color: var(--ink-2); max-width: 46ch; }
.emblem .good { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.emblem .good li { font-size: .82rem; font-weight: 500; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--line-strong); }
@media (max-width: 899px) {
  .emblem .pin { padding-block: 5.5rem 2.5rem; }
  .emblem .art { width: min(100%, 31vh, 34rem); }
  .emblem .panels { min-height: 13.5rem; }
  .emblem .panel p:not(.num):not(.sub) { font-size: .95rem; }
  .emblem .good { display: none; }
  .emblem .skip { bottom: .4rem; }
}
.emblem .skip { position: absolute; right: var(--gutter); bottom: 1rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: .5rem; }
.emblem .skip:hover { color: var(--ink); }

/* ---------- 3 · about ---------- */
.about .grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .about .grid { grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); } }
.about .photo { aspect-ratio: 4 / 5; max-height: 40rem; border-radius: var(--radius-lg); clip-path: circle(14% at 50% 45%); }
.about h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.05; letter-spacing: -.01em; margin: .75rem 0 1.25rem; max-width: 18ch; }
.about blockquote { margin: 2rem 0; padding-left: 1.25rem; border-left: 2px solid var(--accent); font-family: var(--font-display); font-size: 1.4rem; line-height: 1.35; font-style: italic; font-weight: 300; max-width: 28ch; }
.creds { margin-top: 2rem; display: grid; gap: .5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.creds li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .75rem; align-items: start; font-size: .95rem; color: var(--ink-2); }
.creds svg { width: 1.1rem; height: 1.1rem; margin-top: .3rem; color: var(--accent); }

/* ---------- 4 · who: cards with a little life ---------- */
.who { background: var(--bg-2); }
.who-grid { display: grid; gap: 1.25rem; perspective: 1200px; }
@media (min-width: 700px) { .who-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .who-grid { grid-template-columns: repeat(4, 1fr); } }
.who-grid .card { padding: 1.75rem 1.5rem; background: var(--bg); border-radius: var(--radius-lg); transform-style: preserve-3d; box-shadow: 0 30px 60px -50px rgb(30 53 40 / .6); }
.who-grid h3 { font-family: var(--font-display); font-weight: 300; font-size: 1.7rem; margin-bottom: .4rem; }
.who-grid .age { font-size: .85rem; color: var(--muted); display: block; margin-bottom: .75rem; }
.who-grid p { color: var(--ink-2); font-size: .98rem; }

/* ---------- 5 · a breath: the heart tree ---------- */
.breath { padding: 0; background: var(--dusk); color: var(--bg); }
.breath .pin { position: relative; min-height: 100vh; min-height: 100svh; overflow: clip; isolation: isolate; display: grid; grid-template-rows: auto 1fr; padding: 6.5rem var(--gutter) 2.5rem; text-align: center; }
.breath .film { position: absolute; inset: 0; z-index: -3; transform-origin: 50% 60%; will-change: transform; }
.breath .film .poster, .breath .film .frames { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transition: opacity .4s; }
.breath .film .frames { opacity: 0; }
.breath .film.is-live .frames { opacity: 1; }
.breath .film.is-live .poster { opacity: 0; }
.breath .film .glow { position: absolute; inset: 0; opacity: 0; background: radial-gradient(30% 42% at 50% 60%, rgb(255 196 128 / .6), transparent 72%); mix-blend-mode: screen; }
.breath .pin::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, rgb(27 46 36 / .78) 0%, transparent 30%, transparent 68%, rgb(27 46 36 / .85) 100%); }
.breath .fireflies { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.breath .copy { display: grid; gap: .5rem; justify-items: center; }
.breath .label { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1; margin: 0; min-height: 1.1em; text-shadow: 0 2px 30px rgb(0 0 0 / .55); }
.breath .sub { margin: 0; color: color-mix(in oklab, var(--bg) 80%, var(--dusk)); max-width: 34ch; text-shadow: 0 1px 18px rgb(0 0 0 / .7); }
.breath .foot { display: grid; gap: .5rem; justify-items: center; align-self: end; }
.breath .trace { width: min(100%, 44rem); height: 3.4rem; overflow: visible; }
.breath .trace path { fill: none; stroke: #f6d2ad; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgb(246 210 173 / .7)); }
.breath .after { margin: 0; opacity: 0; transform: translateY(12px); font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 1.3rem; max-width: 30ch; text-shadow: 0 2px 24px rgb(0 0 0 / .7); }

/* ---------- 6 · how I work ---------- */
.approach .big { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.7rem, 3.6vw, 2.9rem); line-height: 1.22; max-width: 28ch; margin-top: 1rem; }
.approach .big strong { font-weight: 500; font-style: italic; color: var(--accent); }
.approach .principles { display: grid; gap: 2.5rem; margin-top: 3.5rem; }
@media (min-width: 860px) { .approach .principles { grid-template-columns: repeat(3, 1fr); } }
.principle svg { width: 2.4rem; height: 2.4rem; color: var(--accent); margin-bottom: 1rem; }
.principle h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin-bottom: .5rem; }
.principle p { color: var(--ink-2); }

/* ---------- 7 · what to expect: the path ---------- */
.expect { background: var(--bg-2); }
.expect .grid { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (min-width: 860px) { .expect .grid { grid-template-columns: .8fr 1.2fr; } }
.expect .steps { position: relative; padding-left: 3.5rem; }
.expect .path { position: absolute; left: .55rem; top: 0; width: 2.5rem; height: 100%; overflow: visible; }
.expect .path path { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.expect .path .dot { fill: var(--accent); }
.timeline { display: grid; counter-reset: step; }
.timeline li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; padding-block: 1.75rem; border-top: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 1px solid var(--line); }
.timeline .n { counter-increment: step; font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--muted); transition: color .4s, transform .4s; }
.timeline .n::before { content: "0" counter(step); }
.timeline li.is-on .n { color: var(--accent); transform: translateX(.2rem); }
.timeline h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; margin-bottom: .35rem; }
.timeline p { color: var(--ink-2); max-width: 56ch; }
.timeline .meta { font-size: .85rem; color: var(--muted); margin-top: .4rem; }

/* ---------- 8 · fees ---------- */
.fees-grid { display: grid; gap: 1rem; }
@media (min-width: 700px) { .fees-grid { grid-template-columns: repeat(2, 1fr); } }
.fee { padding: 1.5rem; background: var(--bg-2); border-radius: var(--radius-lg); display: grid; gap: .35rem; align-content: start; }
.fee h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; }
.fee .price { font-family: var(--font-display); font-size: 2rem; line-height: 1; margin-top: .5rem; }
.fee .price small { font-family: var(--font-body); font-size: .85rem; color: var(--muted); margin-left: .35rem; }
.fee p { color: var(--ink-2); font-size: .95rem; }
.fees .notes { margin-top: 2rem; display: grid; gap: .6rem; color: var(--ink-2); font-size: .95rem; max-width: 60ch; }
.fees .notes li { padding-left: 1.2rem; position: relative; }
.fees .notes li::before { content: ""; position: absolute; left: 0; top: .7em; width: .5rem; height: 1px; background: var(--accent); }

/* ---------- 10 · contact: the clearing ---------- */
.contact { position: relative; background: var(--dusk); color: var(--bg); overflow: clip; isolation: isolate; --sun: 0; }
.contact .sky { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(70% 55% at 50% calc(112% - var(--sun) * 70%), rgb(246 210 173 / .55), rgb(164 85 44 / .25) 45%, transparent 72%),
  linear-gradient(180deg, var(--dusk), #233a2d); }
.contact .section-head h2, .contact .lede { color: var(--bg); }
.contact .lede { color: color-mix(in oklab, var(--bg) 78%, var(--dusk)); }
.contact .grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .contact .grid { grid-template-columns: 1.1fr .9fr; gap: 5rem; } }
.contact .cta-row { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
.contact .mark-big { width: clamp(12rem, 26vw, 19rem); margin-inline: auto; filter: drop-shadow(0 24px 50px rgb(0 0 0 / .45)); }
.contact dl { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1.5rem; margin-top: 2rem; font-size: .98rem; }
.contact dt { color: color-mix(in oklab, var(--bg) 60%, var(--dusk)); }
.contact dd { margin: 0; }
.contact .crisis { margin-top: 2rem; color: color-mix(in oklab, var(--bg) 75%, var(--dusk)); }
.contact .crisis strong { color: var(--bg); }
.contact .btn-ghost { --btn-ink: var(--bg); border-color: color-mix(in oklab, var(--bg) 35%, transparent); }
.contact .btn-ghost:hover { background: color-mix(in oklab, var(--bg) 10%, transparent); }
.site-footer .logo-full { width: 11rem; }

/* ---------- motion preferences: a calm, static page ---------- */
@media (prefers-reduced-motion: reduce) {
  .preloader { display: none; }
  .hero .fog, .hero .fog-css, .hero .glow, .cursor-glow { display: none !important; }
  .hero :is(.eyebrow, .cta-row, .who, .scroll-cue) { opacity: 1; transform: none; }
  .hero .scroll-cue i { animation: none; }
  .hero .portrait { clip-path: circle(60% at 50% 50%); }
  .emblem .pin { min-height: 0; }
  .emblem .art .final { opacity: 1; }
  .emblem .strokes { display: none; }
  .emblem .panels { min-height: 0; display: grid; gap: 2rem; }
  .emblem .panel { position: static; opacity: 1; visibility: visible; }
  .emblem .progress, .emblem .skip { display: none; }
  .about .photo { clip-path: none; }
  .breath .pin { min-height: 70vh; }
  .breath .after { opacity: 1; transform: none; }
  .breath .trace, .breath .fireflies, .breath .film .glow { display: none; }
  .contact { --sun: 1; }
}