/* Option C — Soft Play. Modular, friendly, pastel pillars, soft shadows as the one separation device. */
:root {
  --bg: #f7f2ea;           /* oat */
  --bg-2: #efe8dc;
  --card: #fffdf9;
  --ink: #1f3b2d;          /* forest */
  --ink-2: #44584c;
  --muted: #5e6f64;
  --accent: #b55a31;       /* terracotta, 4.7:1 with its label */
  --accent-ink: #fff8f1;
  --line: color-mix(in oklab, var(--ink) 12%, transparent);
  --line-strong: color-mix(in oklab, var(--ink) 28%, transparent);
  --danger: #b55a31;
  --talk: #dfe7d8; --play: #f5dccb; --move: #d3e4df; --grow: #e6e8c8;
  --shadow: 0 24px 60px -28px rgb(31 59 45 / .28), 0 2px 6px -2px rgb(31 59 45 / .08);
  --font-display: "Figtree", "Segoe UI", system-ui, sans-serif;
  --font-accent: "Instrument Serif", Georgia, serif;
  --font-body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --display-weight: 600;
  --h2-size: clamp(2rem, 4.2vw, 3.2rem);
  --radius-sm: .9rem; --radius-lg: 1.75rem; --radius-pill: 999px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 76rem;
  --section-pad: clamp(4rem, 8vw, 7rem);
  --field-bg: var(--card);
}
.section-head h2 { letter-spacing: -.025em; }
em.ac, .ac { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: 0; }
.card { background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow); }

/* ---------- floating pill header ---------- */
.site-header { background: transparent; padding-top: .75rem; }
.site-header .bar { background: color-mix(in oklab, var(--card) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 999px; box-shadow: var(--shadow); min-height: 3.9rem; padding: .35rem .5rem .35rem 1rem; }
.site-header .nav .btn { min-height: 2.7rem; padding-block: .5rem; }
.brand .mark { width: 3rem; height: 3rem; }
.brand .name { font-weight: 700; font-size: .98rem; }

/* ---------- hero bento ---------- */
.hero { padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }
.hero .grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 980px) { .hero .grid { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; } }
.status { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem .45rem .6rem; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); font-size: .85rem; font-weight: 600; }
.status i { width: .6rem; height: .6rem; border-radius: 50%; background: #5f9a6c; box-shadow: 0 0 0 0 rgb(95 154 108 / .5); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 .55rem rgb(95 154 108 / 0); } }
.hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 6vw, 4.9rem); line-height: 1.02; letter-spacing: -.035em; margin: 1.25rem 0 1.25rem; max-width: 13ch; }
.hero h1 .ac { font-size: 1.08em; color: var(--accent); }
.hero .lede { margin-bottom: 1.75rem; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }
.hero .trust { margin-top: 1.5rem; font-size: .9rem; color: var(--muted); display: flex; gap: .75rem; align-items: center; }
.hero .trust svg { width: 1.1rem; height: 1.1rem; color: var(--accent); }

.bento { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(8rem, auto); }
.bento .tile { padding: 1.25rem; display: grid; align-content: space-between; gap: .75rem; position: relative; overflow: hidden; }
.bento .portrait { grid-row: span 2; padding: 0; min-height: 20rem; }
.bento .portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.bento .tile h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.bento .tile p { font-size: .92rem; color: var(--ink-2); }
.bento .tile.accent { background: var(--accent); color: var(--accent-ink); }
.bento .tile.accent p { color: color-mix(in oklab, var(--accent-ink) 85%, var(--accent)); }
.bento .tile.accent .btn { --btn-bg: var(--accent-ink); --btn-ink: var(--accent); min-height: 2.6rem; padding-block: .45rem; justify-self: start; }
.bento .tile.words { background: var(--grow); }
.bento .words .cycle { font-family: var(--font-accent); font-style: italic; font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1; height: 1em; overflow: hidden; }
.bento .words .cycle span { display: block; animation: cycle 8s infinite cubic-bezier(.7,0,.2,1); }
@keyframes cycle { 0%, 20% { transform: translateY(0); } 25%, 45% { transform: translateY(-100%); } 50%, 70% { transform: translateY(-200%); } 75%, 95% { transform: translateY(-300%); } 100% { transform: translateY(-400%); } }
.bento .tile.online { background: var(--move); }
.bento .tile svg.icon { width: 1.6rem; height: 1.6rem; }

/* ---------- which door: segmented chooser ---------- */
.door { background: var(--bg-2); }
.door .section-head { text-align: center; justify-items: center; }
.door .section-head h2 { max-width: 24ch; }
.door .seg { display: inline-flex; gap: .25rem; padding: .3rem; background: var(--card); border-radius: 999px; box-shadow: var(--shadow); margin: 0 auto 2rem; }
.door .seg button { border: 0; background: none; padding: .7rem 1.2rem; border-radius: 999px; font-weight: 600; color: var(--ink-2); transition: background-color .25s, color .25s; }
.door .seg button[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.door .panes { position: relative; max-width: 58rem; margin-inline: auto; }
.door .pane { display: none; grid-template-columns: 1fr; gap: 1.5rem; }
.door .pane.is-active { display: grid; animation: pane-in .45s cubic-bezier(.2,.8,.2,1); }
@keyframes pane-in { from { opacity: 0; transform: translateY(8px); } }
@media (min-width: 800px) { .door .pane { grid-template-columns: 1.3fr .7fr; } }
.door .pane .card { padding: clamp(1.5rem, 3vw, 2.25rem); }
.door .pane h3 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .75rem; }
.door .pane p { color: var(--ink-2); }
.door .pane .suggest { padding: 1.5rem; display: grid; gap: .75rem; align-content: start; }
.door .pane .suggest h4 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.door .pane .suggest a { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; }
.door .pane .suggest a::after { content: "→"; }
.door .pane .suggest a.t { background: var(--talk); } .door .pane .suggest a.p { background: var(--play); } .door .pane .suggest a.m { background: var(--move); } .door .pane .suggest a.g { background: var(--grow); }

/* ---------- four ways: snap carousel ---------- */
.ways .section-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; }
.ways .arrows { display: flex; gap: .5rem; }
.ways .arrows button { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--card); display: grid; place-items: center; transition: background-color .2s, transform .2s; }
.ways .arrows button:hover { background: var(--ink); color: var(--bg); }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(86vw, 26rem); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: .5rem var(--gutter) 2rem; margin-inline: calc(-1 * var(--gutter)); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail .way { scroll-snap-align: start; border-radius: var(--radius-lg); padding: 1.5rem; display: grid; gap: 1rem; align-content: start; min-height: 30rem; box-shadow: var(--shadow); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.rail .way:hover { transform: translateY(-4px); }
.rail .way.t { background: var(--talk); } .rail .way.p { background: var(--play); } .rail .way.m { background: var(--move); } .rail .way.g { background: var(--grow); }
.rail .way .photo { aspect-ratio: 16 / 10; border-radius: calc(var(--radius-lg) - .5rem); }
.rail .way .num { font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--ink-2); }
.rail .way h3 { font-size: 2.2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.rail .way h3 .ac { font-size: .55em; display: block; margin-top: .4rem; color: var(--ink-2); letter-spacing: 0; }
.rail .way p { color: var(--ink-2); font-size: .98rem; }
.rail .way .good { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }
.rail .way .good li { font-size: .8rem; font-weight: 600; padding: .35rem .75rem; border-radius: 999px; background: rgb(255 253 249 / .7); }
.dots { display: flex; gap: .4rem; justify-content: center; }
.dots i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--line-strong); transition: width .3s, background-color .3s; }
.dots i.is-on { width: 1.5rem; border-radius: 999px; background: var(--ink); }

/* ---------- about bento ---------- */
.about .grid { display: grid; gap: 1rem; }
@media (min-width: 900px) { .about .grid { grid-template-columns: .9fr 1.1fr; } }
.about .photo { min-height: 24rem; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.about .text { padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 1rem; align-content: center; }
.about .text p { color: var(--ink-2); }
.about .facts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin-top: 1rem; }
.about .fact { padding: 1.25rem; background: var(--bg-2); border-radius: var(--radius-sm); font-size: .92rem; }
.about .fact strong { display: block; margin-bottom: .25rem; }

/* ---------- how it works ---------- */
.how .steps { display: grid; gap: 1rem; counter-reset: s; }
@media (min-width: 860px) { .how .steps { grid-template-columns: repeat(4, 1fr); } }
.how .step { counter-increment: s; padding: 1.5rem; display: grid; gap: .5rem; align-content: start; }
.how .step::before { content: counter(s); width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); font-weight: 700; margin-bottom: .5rem; }
.how .step h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.how .step p { color: var(--ink-2); font-size: .95rem; }
.how .step .meta { font-size: .82rem; color: var(--muted); }

/* ---------- practice details bento ---------- */
.details .grid { display: grid; gap: 1rem; }
@media (min-width: 860px) { .details .grid { grid-template-columns: repeat(3, 1fr); } .details .map { grid-column: span 2; } }
.details .tile { padding: 1.5rem; display: grid; gap: .5rem; align-content: start; }
.details .tile h3 { font-size: 1.1rem; font-weight: 700; display: flex; gap: .6rem; align-items: center; }
.details .tile h3 svg { width: 1.2rem; height: 1.2rem; color: var(--accent); }
.details .tile p, .details .tile li { color: var(--ink-2); font-size: .95rem; }
.details .map { min-height: 16rem; position: relative; overflow: hidden; background: var(--move); display: grid; place-items: center; }
.details .map img { width: clamp(8rem, 20vw, 12rem); }
.details .map .pin { position: absolute; left: 1.5rem; bottom: 1.5rem; background: var(--card); padding: .75rem 1rem; border-radius: var(--radius-sm); box-shadow: var(--shadow); font-size: .9rem; }
.details .fees table { width: 100%; border-collapse: collapse; font-size: .95rem; margin-top: .25rem; }
.details .fees td { padding: .55rem 0; border-top: 1px solid var(--line); vertical-align: top; }
.details .fees td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }
.details .fees small { display: block; color: var(--muted); font-weight: 400; }

.faq summary { font-weight: 600; font-size: 1.15rem; }

/* ---------- contact ---------- */
.contact .card { padding: clamp(2rem, 5vw, 4rem); display: grid; gap: 2rem; align-items: center; background: var(--ink); color: var(--bg); position: relative; overflow: hidden; }
@media (min-width: 900px) { .contact .card { grid-template-columns: 1.2fr .8fr; } }
.contact .card h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.contact .card h2 .ac { color: #e2a07a; }
.contact .card p { color: color-mix(in oklab, var(--bg) 80%, var(--ink)); }
.contact .card .btn-ghost { --btn-ink: var(--bg); border-color: color-mix(in oklab, var(--bg) 35%, transparent); }
.contact .card dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.25rem; font-size: .95rem; margin-top: 1.5rem; }
.contact .card dt { color: color-mix(in oklab, var(--bg) 60%, var(--ink)); }
.contact .card dd { margin: 0; }
.contact .card .crisis { margin-top: 1.5rem; border-color: #e2a07a; }
.contact .card .crisis strong { color: var(--bg); }
.contact .mark-big { width: clamp(11rem, 24vw, 18rem); margin-inline: auto; }

.site-footer .logo-full { width: 10rem; }