/* ---- Phoenix demo bar (shared by every concept; not part of the template) ---- */
:root { --phx-h: 2.25rem; }
@media (max-width: 40rem) { :root { --phx-h: 3.5rem; } }
.phx-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 1000; height: var(--phx-h);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 0 1rem; background: #111; color: #f2f2f2;
  font: 500 .78rem/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .01em;
}
.phx-bar p { margin: 0; }
.phx-bar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.phx-bar a:hover { text-decoration-thickness: 2px; }
.phx-bar a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }
.phx-bar__tag { display: none; }
.phx-bar__sep { opacity: .6; margin: 0 .25rem; }
.phx-bar__back { white-space: nowrap; opacity: .85; }
@media (max-width: 40rem) {
  .phx-bar { align-items: center; font-size: .7rem; line-height: 1.25; }
  .phx-bar__msg { max-width: 68%; }
}

/* ===== Counselling · Concept A · Calm =====
   Lexend + Nunito Sans · oat, sage mist, moss · slow, soft, organic motion */
@font-face { font-family: "Lexend"; src: url(../fonts/lexend-latin-300-normal.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Lexend"; src: url(../fonts/lexend-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lexend"; src: url(../fonts/lexend-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url(../fonts/nunito-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url(../fonts/nunito-sans-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url(../fonts/nunito-sans-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --oat: #f6f2ea; --mist: #e6ece1; --sky: #dce8ea; --blush: #f1e0d6; --white: #fffdf9;
  --ink: #25312a; --muted: #4f5d55; --line: #d8dfd2; --moss: #3d5a48; --moss-2: #2f4838; --sage: #a9bea3;
  --head: "Lexend", system-ui, sans-serif; --body: "Nunito Sans", system-ui, sans-serif;
  --soft: cubic-bezier(.33, 0, .15, 1);
  --header-h: 4.75rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--phx-h) + var(--header-h)); -webkit-text-size-adjust: 100%; }
body { margin: 0; padding-top: var(--phx-h); background: var(--oat); color: var(--ink); font: 400 1.0625rem/1.7 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.i { width: 1.2em; height: 1.2em; flex: none; }
.wrap { width: min(100% - 2.5rem, 74rem); margin-inline: auto; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 1100; background: var(--moss); color: #fff; padding: .6rem 1rem; border-radius: 999px; }
.skip-link:focus { top: calc(var(--phx-h) + .5rem); }
:focus-visible { outline: 3px solid var(--moss); outline-offset: 3px; border-radius: 12px; }

.btn { display: inline-flex; align-items: center; gap: .6rem; font: 500 1rem/1 var(--head); padding: 1rem 1.6rem; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer; transition: background .6s var(--soft), transform .6s var(--soft), box-shadow .6s var(--soft); }
.btn--primary { background: var(--moss); color: #fff; box-shadow: 0 10px 30px -12px rgba(61,90,72,.55); }
.btn--primary:hover { background: var(--moss-2); transform: translateY(-2px); }
.btn--soft { background: var(--mist); color: var(--ink); padding: .75rem 1.25rem; }
.btn--soft:hover { background: var(--sage); }

/* Header */
.header { position: sticky; top: var(--phx-h); z-index: 50; background: rgba(246,242,234,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: box-shadow .6s var(--soft); }
.header.is-scrolled { box-shadow: 0 10px 30px -24px rgba(37,49,42,.5); }
.header__row { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font: 400 1.15rem var(--head); text-decoration: none; letter-spacing: -.01em; }
.brand__mark { width: 2rem; height: 2rem; color: var(--moss); }
.brand__demo { font: 400 .8rem var(--body); color: var(--muted); }
.nav { display: none; align-items: center; gap: 2rem; font-size: .98rem; }
.nav a:not(.btn) { text-decoration: none; padding: .3rem 0; background: linear-gradient(var(--sage), var(--sage)) 0 100% / 0 2px no-repeat; transition: background-size .6s var(--soft); }
.nav a:not(.btn):hover { background-size: 100% 2px; }
.menu-btn { display: none; align-items: center; gap: .6rem; background: var(--mist); color: var(--ink); border: 0; border-radius: 999px; padding: .65rem 1.1rem; font: 500 .95rem var(--head); cursor: pointer; }
.menu-btn__dots { width: .55rem; height: .55rem; border-radius: 50%; background: var(--moss); transition: transform .6s var(--soft); }
.menu-btn[aria-expanded="true"] .menu-btn__dots { transform: scale(1.6); }
.drawer { display: grid; gap: .25rem; padding: 0 1.25rem 1.25rem; }
.drawer a { font: 300 1.6rem/1.2 var(--head); text-decoration: none; padding: .6rem .75rem; border-radius: 16px; }
.drawer a:hover { background: var(--mist); }
.js .drawer { position: absolute; left: .75rem; right: .75rem; top: calc(100% + .25rem); background: var(--white); border-radius: 28px; padding: 1rem; box-shadow: 0 30px 60px -30px rgba(37,49,42,.45); opacity: 0; transform: translateY(-10px); visibility: hidden; transition: opacity .6s var(--soft), transform .6s var(--soft), visibility 0s .6s; }
.js .drawer[data-open="true"] { opacity: 1; transform: none; visibility: visible; transition: opacity .6s var(--soft), transform .6s var(--soft), visibility 0s; }
@media (min-width: 54rem) { .nav { display: flex; } .drawer { display: none !important; } }
@media (max-width: 53.99rem) { .js .menu-btn { display: inline-flex; } }

/* Organic blobs */
.blob { position: absolute; z-index: -1; filter: blur(2px); opacity: .9; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
.blob--1 { width: 34rem; height: 34rem; right: -10rem; top: -8rem; background: var(--mist); }
.blob--2 { width: 22rem; height: 22rem; left: -8rem; bottom: -6rem; background: var(--blush); opacity: .6; }
.js .blob { animation: morph 22s ease-in-out infinite alternate; }
.js .blob--2 { animation-duration: 28s; animation-direction: alternate-reverse; }
@keyframes morph {
  0% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: rotate(0) scale(1); }
  50% { border-radius: 58% 42% 38% 62% / 55% 38% 62% 45%; transform: rotate(8deg) scale(1.04); }
  100% { border-radius: 36% 64% 52% 48% / 48% 60% 40% 52%; transform: rotate(-6deg) scale(.98); }
}

/* Hero */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-block: 3.5rem 4.5rem; }
.hero__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 60rem) { .hero__grid { grid-template-columns: 1.15fr .85fr; gap: 4rem; } .hero { padding-block: 5.5rem 6.5rem; } }
.eyebrow { font: 400 .9rem var(--head); color: var(--moss); letter-spacing: .02em; }
.hero__title { font: 300 clamp(2.4rem, 5.6vw, 4.4rem)/1.1 var(--head); letter-spacing: -.03em; margin-top: 1rem; text-wrap: balance; }
.hero__lead { margin-top: 1.5rem; font-size: 1.2rem; color: var(--muted); max-width: 34rem; }
.hero__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.quiet-link { color: var(--moss); font-weight: 600; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.assure { margin-top: 2rem; display: flex; align-items: center; gap: .5rem; font-size: .92rem; color: var(--muted); }
.hero__photo { position: relative; }
.hero__photo img { width: 100%; aspect-ratio: 1 / 1.08; object-fit: cover; border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%; box-shadow: 0 40px 80px -40px rgba(37,49,42,.45); }
.js .hero__photo img { animation: morph 30s ease-in-out infinite alternate; animation-name: morphSoft; }
@keyframes morphSoft { 50% { border-radius: 55% 45% 52% 48% / 45% 55% 45% 55%; } }

/* Breathing pause */
.pause { padding-block: 1rem 4rem; }
.pause__card { display: grid; gap: 2rem; align-items: center; background: var(--white); border-radius: 40px; padding: 2rem; box-shadow: 0 30px 60px -45px rgba(37,49,42,.4); }
@media (min-width: 48rem) { .pause__card { grid-template-columns: 11rem 1fr; padding: 2.5rem 3rem; } }
.breath { position: relative; width: 9rem; height: 9rem; margin-inline: auto; display: grid; place-items: center; }
.breath__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--sage); background: var(--mist); }
/* The core is drawn at full size and scaled down, so it stays crisp; site.js drives transform: scale()
   with requestAnimationFrame (one continuous eased curve, compositor-only). */
.breath__core { position: relative; width: 94%; height: 94%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c3d8c5, #7f9c86); box-shadow: 0 8px 24px -10px rgba(61,90,72,.6); transform: scale(.48); will-change: transform; backface-visibility: hidden; }
.pause__title { font: 400 1.6rem/1.25 var(--head); letter-spacing: -.02em; }
.pause__text { color: var(--muted); margin-top: .5rem; }
.pause__cue { font: 300 1.25rem var(--head); color: var(--moss); margin-top: 1rem; min-height: 1.9rem; }
.chip-btn { margin-top: .75rem; min-width: 7rem; min-height: 2.75rem; background: var(--white); border: 1.5px solid var(--moss); border-radius: 999px; padding: .55rem 1.25rem; font: 600 .95rem var(--body); color: var(--moss); cursor: pointer; }
.chip-btn:hover { background: var(--mist); }
html:not(.js) .chip-btn, html:not(.js) .pause__cue { display: none; }

/* Areas */
.h2 { font: 300 clamp(2rem, 4.4vw, 3.3rem)/1.12 var(--head); letter-spacing: -.03em; margin-top: .75rem; text-wrap: balance; max-width: 40rem; }
.help { padding-block: 4rem 5rem; }
.areas { display: grid; gap: 1rem; margin-top: 3rem; }
@media (min-width: 40rem) { .areas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .areas { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.area { background: var(--white); border-radius: 32px; padding: 1.75rem 1.75rem 2rem; transition: background .8s var(--soft), transform .8s var(--soft); }
.area:nth-child(3n+2) { border-radius: 32px 32px 32px 80px; }
.area:nth-child(3n) { border-radius: 80px 32px 32px 32px; }
.area:hover { background: var(--mist); transform: translateY(-4px); }
.area__icon { width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--mist); display: grid; place-items: center; color: var(--moss); transition: background .8s var(--soft); }
.area:hover .area__icon { background: var(--white); }
.area h3 { font: 400 1.35rem var(--head); margin-top: 1.25rem; letter-spacing: -.01em; }
.area p { color: var(--muted); margin-top: .4rem; }

/* About */
.about { background: var(--mist); padding-block: 5rem; border-radius: 64px 64px 0 0; }
.about__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 60rem) { .about__grid { grid-template-columns: .85fr 1.15fr; gap: 5rem; } }
.about__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 200px 200px 32px 32px; }
.body-lg { font-size: 1.15rem; color: var(--muted); margin-top: 1.25rem; max-width: 36rem; }
.facts { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.facts li { display: inline-flex; align-items: center; gap: .5rem; background: var(--white); border-radius: 999px; padding: .55rem 1rem; font-size: .95rem; }
.facts .i { color: var(--moss); }

/* Steps */
.steps { background: var(--mist); padding-block: 1rem 6rem; }
.steps__wrap { position: relative; margin-top: 3rem; }
.steps__path { display: none; position: absolute; left: 0; right: 0; top: -.5rem; width: 100%; height: 7rem; color: var(--sage); }
@media (min-width: 56rem) { .steps__path { display: block; } }
.steps__path path { stroke-dashoffset: 0; }
.reveal .steps__path path { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 2.6s var(--soft); }
.reveal .steps__path.is-in path { stroke-dashoffset: 0; }
.steps__list { position: relative; display: grid; gap: 1.5rem; }
@media (min-width: 56rem) { .steps__list { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; padding-top: 3.5rem; } .steps__list li:nth-child(2) { margin-top: 2.5rem; } }
.steps__list li { background: var(--white); border-radius: 32px; padding: 1.75rem; }
.steps__dot { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--moss); color: #fff; font: 500 1.1rem var(--head); }
.steps__list h3 { font: 400 1.35rem var(--head); margin-top: 1rem; }
.steps__list p { color: var(--muted); margin-top: .4rem; }

.addon-slot { margin-block: 3.5rem; padding: 1.1rem 1.5rem; border-radius: 24px; border: 1.5px dashed var(--line); color: var(--muted); font-size: .92rem; }

/* Contact */
.contact { padding-bottom: 5rem; }
.contact__card { display: grid; gap: 2.5rem; background: var(--white); border-radius: 48px; padding: 2rem 1.25rem; box-shadow: 0 40px 80px -60px rgba(37,49,42,.5); }
@media (min-width: 60rem) { .contact__card { grid-template-columns: 1fr 1fr; padding: 3.5rem; gap: 4rem; } }
.contact__list { display: grid; gap: .75rem; margin-top: 2rem; }
.contact__list a { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.contact__list a:hover { color: var(--moss); text-decoration: underline; text-underline-offset: 4px; }
.ring { width: 2.75rem; height: 2.75rem; flex: none; border-radius: 50%; background: var(--mist); display: grid; place-items: center; color: var(--moss); }
.note { margin-top: 2rem; background: var(--sky); border-radius: 24px; padding: 1.25rem 1.5rem; font-size: .95rem; display: grid; gap: .6rem; }
.note a { font-weight: 700; }
.form { display: grid; gap: 1.1rem; align-content: start; }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; }
.opt { font-weight: 400; color: var(--muted); }
.field input, .field textarea { width: 100%; font: 400 1.05rem var(--body); color: var(--ink); background: var(--oat); border: 1.5px solid transparent; border-radius: 18px; padding: .9rem 1.1rem; transition: border-color .5s var(--soft), background .5s var(--soft), box-shadow .5s var(--soft); resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; background: #fff; border-color: var(--moss); box-shadow: 0 0 0 5px var(--mist); }
.form__privacy { font-size: .88rem; color: var(--muted); }
.form .btn { justify-self: start; }
.form-status:empty { display: none; }
.form-status { background: var(--sky); border-radius: 18px; padding: .9rem 1.1rem; font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Footer */
.footer { background: var(--moss-2); color: #e9efe6; padding-block: 3.5rem 1.5rem; border-radius: 48px 48px 0 0; }
.footer__grid { display: grid; gap: 2rem; }
@media (min-width: 52rem) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer__brand { font: 300 1.6rem var(--head); }
.footer__tag { color: #c3d0c4; margin-top: .6rem; max-width: 22rem; }
.footer__h { font: 500 .85rem var(--head); color: #c3d0c4; margin-bottom: .7rem; }
.footer ul { display: grid; gap: .35rem; }
.footer ul a { text-decoration: none; overflow-wrap: anywhere; } .footer ul a:hover { text-decoration: underline; }
.footer :focus-visible { outline-color: #fff; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.15); font-size: .85rem; color: #c3d0c4; }

/* Reveal: slow fade with a soft focus pull. Content is visible by default; it is only hidden
   for the fade when the head script has confirmed JS + IntersectionObserver + motion allowed
   ("reveal" class), and that class is dropped again if demo.js doesn't start within 2.5s. */
.reveal [data-reveal] { opacity: 0; transform: translateY(12px); filter: blur(6px); transition: opacity 1.2s var(--soft), transform 1.2s var(--soft), filter 1.2s var(--soft); }
.reveal [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
.reveal [data-reveal="draw"] { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .steps__path path { stroke-dashoffset: 0 !important; }
}
@media (max-width: 30rem) { .brand { font-size: 1rem; gap: .35rem; } .brand__mark { display: none; } .brand__demo { font-size: .72rem; } }