/* Cairn Couples & Family Therapy: dusk.
   Signature: three stones in balance that lean toward the cursor. */
:root {
  --bg: #241826; --surface: #302133; --ink: #F3E6DC; --ink-soft: #C9B6B4;
  --gold: #E8C27A; --lavender: #B9A6E0; --link: #E8C27A; --accent: #E8C27A;
  --line: rgba(243, 230, 220, .14); --focus: #E8C27A; --radius: 18px;
  --font-display: "Cormorant", Georgia, serif;
  --font-body: "Figtree", system-ui, sans-serif;
}
body { background: radial-gradient(120% 80% at 80% 0%, #3A2540 0%, var(--bg) 55%) fixed, var(--bg); }
h1, h2 { font-weight: 500; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.8rem, 6.5vw, 5.4rem); line-height: 1; max-width: 13ch; }
h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.1rem; }
.lede { color: var(--ink-soft); }
.site-header { background: transparent; border-bottom-color: var(--line); }
.brand { font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; }
.site-nav a { color: var(--ink-soft); }
.site-nav a:hover { color: var(--ink); }
.site-nav .nav-cta { color: var(--ink); box-shadow: inset 0 0 0 1px var(--gold); }
.js .site-nav.is-open { background: var(--surface); border-radius: var(--radius); padding-inline: 1rem; }
.btn { background: var(--gold); color: #241826; border-radius: 999px; font-weight: 600; box-shadow: 0 10px 30px -12px rgba(232,194,122,.6); }
.btn:hover { background: #F2D49A; }
.link-quiet { color: var(--ink-soft); }

/* Hero */
.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hero-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 58rem) { .hero-grid { grid-template-columns: 6fr 5fr; } }
.stage { position: relative; }
.stage::before { content: ""; position: absolute; inset: 15% 10% 10%; background: radial-gradient(closest-side, rgba(232,194,122,.22), rgba(185,166,224,.1) 60%, transparent); filter: blur(20px); }
.stage__canvas { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 68vh; margin-inline: auto; }
.no-webgl .stage__canvas { background: radial-gradient(ellipse 30% 9% at 50% 78%, #B9A6E0 98%, transparent), radial-gradient(ellipse 22% 7% at 48% 62%, #E8C27A 98%, transparent), radial-gradient(ellipse 14% 5% at 52% 49%, #F3E6DC 98%, transparent); }
.stage__hint { position: relative; text-align: center; font-size: .9rem; color: var(--ink-soft); font-style: italic; margin-top: -.5rem; }

/* Topics: hover or tap to light up */
.topics { display: grid; gap: 2rem; margin-top: 2rem; }
@media (min-width: 58rem) { .topics { grid-template-columns: 7fr 5fr; align-items: start; } }
.topic-list { list-style: none; padding: 0; margin: 0; }
.topic { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 1rem 0; color: var(--ink-soft); font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.15; cursor: pointer; transition: color .4s ease, padding .4s ease; }
.topic:hover, .topic:focus-visible, .topic.is-active { color: var(--ink); padding-left: 1rem; }
.topic.is-active { color: var(--gold); }
.topic-panel { position: sticky; top: 2rem; padding: 2rem; border-radius: var(--radius); background: linear-gradient(160deg, rgba(232,194,122,.12), rgba(185,166,224,.08)); border: 1px solid var(--line); min-height: 12rem; }
.topic-panel__title { font-family: var(--font-display); font-size: 1.8rem; line-height: 1.1; margin-bottom: .75rem; }
.topic-panel__body { color: var(--ink-soft); margin: 0; }

/* About */
.about { background: linear-gradient(180deg, transparent, rgba(185,166,224,.07), transparent); }
.about-grid { display: grid; gap: 2rem 4rem; align-items: center; }
@media (min-width: 58rem) { .about-grid { grid-template-columns: 1fr 1fr; } }
.pull { font-family: var(--font-display); font-style: italic; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.1; color: var(--lavender); margin: 0; }
.about-grid p { color: var(--ink-soft); }

/* Steps as cards with cursor glow */
.steps { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; counter-reset: st; }
@media (min-width: 48rem) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 72rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
.card { position: relative; overflow: hidden; padding: 1.75rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); counter-increment: st; }
.card::before { content: counter(st); display: block; font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--gold); margin-bottom: 1rem; }
.card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(232,194,122,.13), transparent 45%); }
.card:hover::after { opacity: 1; }
.card p { color: var(--ink-soft); margin: 0; }

/* Fees */
.fees-grid { display: grid; gap: 2rem 4rem; }
@media (min-width: 58rem) { .fees-grid { grid-template-columns: 5fr 7fr; align-items: end; } }
.price-list { margin: 0; }
.price-list div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.price-list dt { color: var(--ink-soft); }
.price-list dd { margin: 0; font-family: var(--font-display); font-size: 2rem; color: var(--ink); }

/* CTA */
.cta { position: relative; overflow: hidden; padding-block: clamp(4rem, 9vw, 7rem); border-top: 1px solid var(--line); }
.cta::before { content: ""; position: absolute; width: 50rem; height: 50rem; left: -20rem; bottom: -30rem; background: radial-gradient(closest-side, rgba(232,194,122,.2), transparent); pointer-events: none; }
.cta-grid { position: relative; display: grid; gap: 2.5rem 4rem; }
@media (min-width: 58rem) { .cta-grid { grid-template-columns: 1fr 1fr; } }
.note { border-left-color: var(--gold); color: var(--ink-soft); }
.form label, .form legend { color: var(--ink); font-weight: 500; }
.form input[type="text"], .form input[type="email"] { background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--ink); border-radius: 12px; }
.form .choice input { accent-color: var(--gold); }
.form-status { color: var(--gold); }
.site-footer a { color: var(--ink-soft); }