/* sections.css — page section styles */

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(8rem, 6rem + 10vw, 12rem) 0 clamp(4rem, 3rem + 5vw, 7rem); isolation: isolate; }
.hero-bg {
    position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center;
    opacity: .22;
    -webkit-mask-image: radial-gradient(120% 100% at 70% 20%, #000 30%, transparent 75%);
            mask-image: radial-gradient(120% 100% at 70% 20%, #000 30%, transparent 75%);
}
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 55%, hsl(var(--bg)) 100%); }
.hero-artwork { position: absolute; right: -6%; top: 12%; width: min(46vw, 34rem); opacity: .12; z-index: -1; animation: floaty 9s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-16px) } }
.hero-inner { max-width: 50rem; }
.hero-title { color: hsl(var(--primary-deep)); margin-top: .5rem; }
.hero-lead { margin-top: 1.25rem; font-size: var(--step-1); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.hero-trust { margin-top: 1.5rem; font-size: var(--step--1); color: hsl(var(--text-faint)); letter-spacing: .02em; }
.hero-trust span::before { content: "✦ "; color: hsl(var(--accent)); }

/* ---------- Problem ---------- */
.problem-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .problem-grid { grid-template-columns: repeat(3, 1fr); } }
.problem-card { padding: 2rem 1.75rem; border-radius: var(--r-lg); background: hsl(var(--surface)); border: 1px solid hsl(var(--border) / .8); box-shadow: var(--shadow-soft); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.problem-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.problem-num { font-family: 'Cormorant Garamond', serif; font-size: 2.4rem; color: hsl(var(--accent) / .55); font-weight: 600; display: block; line-height: 1; }
.problem-card h3 { font-size: var(--step-1); margin: .5rem 0; }
.problem-card p { color: hsl(var(--text-soft)); }

/* ---------- Quiz promo ---------- */
.quiz-promo-card { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; padding: clamp(2rem, 1.5rem + 3vw, 3.5rem); border-radius: var(--r-xl); position: relative; overflow: hidden;
    background: radial-gradient(120% 140% at 90% 10%, hsl(var(--teal) / .14), transparent 60%), hsl(var(--primary-deep)); color: hsl(var(--cream)); box-shadow: var(--shadow-lift); }
@media (min-width: 820px) { .quiz-promo-card { grid-template-columns: 1.6fr .9fr; } }
.quiz-promo-card h2 { color: hsl(var(--cream)); margin-top: .5rem; }
.quiz-promo-card .eyebrow { color: hsl(var(--gold-light)); }
.quiz-promo-card .lead { color: hsl(var(--cream) / .8); }
.quiz-promo-meta { display: flex; gap: 1.5rem; margin-top: 1.25rem; font-size: var(--step--1); color: hsl(var(--cream) / .75); }
.quiz-promo-card .btn-cta { background: hsl(var(--gold)); color: hsl(var(--primary-deep)); }
.quiz-promo-card .btn-cta:hover { background: hsl(var(--gold-light)); }
.quiz-promo-aside { display: grid; place-items: center; gap: 1rem; }
.quiz-orb { width: 9rem; height: 9rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, hsl(var(--gold-light)), hsl(var(--gold) / .2) 60%, transparent 70%); box-shadow: 0 0 60px hsl(var(--gold) / .4); animation: floaty 7s ease-in-out infinite; }
.quiz-promo-result { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: var(--step-1); color: hsl(var(--gold-light)); text-align: center; }

/* ---------- Approach ---------- */
.approach-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .approach-grid { grid-template-columns: 1fr 1fr; } }
.approach-method, .approach-expect { padding: 2rem; border-radius: var(--r-lg); background: hsl(var(--surface) / .7); border: 1px solid hsl(var(--border) / .7); }
.approach-method { background: hsl(var(--primary) / .07); border-color: hsl(var(--primary) / .2); }
.approach-grid h3 { font-size: var(--step-2); margin-bottom: .75rem; }
.check-list { display: grid; gap: .75rem; }
.check-list li { position: relative; padding-left: 1.9rem; color: hsl(var(--text-soft)); }
.check-list li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: hsl(var(--accent) / .18);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b07d2e' stroke-width='3'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    background-size: .8rem; background-repeat: no-repeat; background-position: center; }

/* ---------- About ---------- */
.about-grid { display: grid; gap: clamp(2rem, 1.5rem + 4vw, 4.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .about-grid { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); } }
.about-media { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.portrait { position: relative; width: clamp(208px, 70%, 312px); aspect-ratio: 1; margin: 0; }
.portrait::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid hsl(var(--accent) / .55); transform: translate(8px, -8px); transition: transform var(--dur-slow) var(--ease-out); }
.portrait:hover::before { transform: translate(0, 0); }
.portrait img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: var(--shadow-lift); }
.about-media-badge { display: inline-block; background: hsl(var(--surface)); color: hsl(var(--primary-deep)); font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: var(--step-1); padding: .5rem 1.25rem; border-radius: var(--r-pill); box-shadow: var(--shadow-soft); border: 1px solid hsl(var(--border) / .7); }
.credentials { border-top: 1px solid hsl(var(--border-strong)); padding-top: 1.5rem; }
.credentials-title { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--accent-deep)); margin-bottom: 1rem; }
.credentials ul { display: grid; gap: .6rem; }
.credentials li { position: relative; padding-left: 1.4rem; color: hsl(var(--text-soft)); }
.credentials li::before { content: "—"; position: absolute; left: 0; color: hsl(var(--accent)); }

/* ---------- Services ---------- */
.services-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: stretch; max-width: 56rem; margin-inline: auto; }
@media (min-width: 760px) { .services-grid { grid-template-columns: 1fr 1.15fr; } }
.service-card { position: relative; display: flex; flex-direction: column; padding: 2.25rem; border-radius: var(--r-lg); background: hsl(var(--surface)); border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-soft); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.service-card:not(.featured):hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.service-card.featured { background: hsl(var(--primary-deep)); color: hsl(var(--cream)); border-color: transparent; box-shadow: var(--shadow-lift); }
.service-card.featured h3, .service-card.featured .service-price { color: hsl(var(--cream)); }
.service-card.featured .service-desc, .service-card.featured .service-note { color: hsl(var(--cream) / .75); }
.service-card.featured .check-list li { color: hsl(var(--cream) / .85); }
.service-card.featured .check-list li::before { background-color: hsl(var(--gold) / .25); }
.service-flag { position: absolute; top: 1.25rem; right: 1.25rem; background: hsl(var(--gold)); color: hsl(var(--primary-deep)); font-size: var(--step--1); font-weight: 700; padding: .3rem .7rem; border-radius: var(--r-sm); }
.service-kicker { font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--accent-deep)); font-weight: 600; }
.service-card.featured .service-kicker { color: hsl(var(--gold-light)); }
.service-card h3 { font-size: var(--step-2); margin: .35rem 0 .5rem; }
.service-price { font-family: 'Cormorant Garamond', serif; font-size: var(--step-3); font-weight: 600; line-height: 1.1; }
.service-price-note { display: block; font-family: 'Raleway', sans-serif; font-size: var(--step--1); font-weight: 400; color: hsl(var(--cream) / .7); }
.service-desc { color: hsl(var(--text-soft)); margin-top: .5rem; }
.service-card .btn { margin-top: auto; }
.service-note { font-size: var(--step--1); margin-top: 1rem; }
.payment-note { max-width: 46rem; margin: 2.5rem auto 0; text-align: center; }
.payment-note h4 { font-size: var(--step-1); margin-bottom: .5rem; }
.payment-note p { color: hsl(var(--text-soft)); }

/* ---------- Testimonials ---------- */
.t-carousel { max-width: 52rem; margin-inline: auto; }
.t-track { position: relative; min-height: 12rem; }
.t-slide { position: absolute; inset: 0; opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); pointer-events: none; text-align: center; }
.t-slide.active { opacity: 1; transform: none; position: relative; pointer-events: auto; }
.t-slide blockquote { font-family: 'Cormorant Garamond', serif; font-size: var(--step-2); line-height: 1.4; color: hsl(var(--primary-deep)); font-style: italic; }
.t-slide figcaption { margin-top: 1.25rem; }
.t-author { display: block; font-weight: 600; color: hsl(var(--accent-deep)); }
.t-loc { font-size: var(--step--1); color: hsl(var(--text-faint)); }
.t-controls { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 2rem; }
.t-arrow { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid hsl(var(--border-strong)); display: grid; place-items: center; color: hsl(var(--primary)); transition: all var(--dur-fast) var(--ease-out); }
.t-arrow svg { width: 1.2rem; height: 1.2rem; }
.t-arrow:hover { background: hsl(var(--primary)); color: hsl(var(--cream)); border-color: transparent; }
.t-dots { display: flex; gap: .5rem; }
.t-dot { width: .55rem; height: .55rem; border-radius: var(--r-pill); background: hsl(var(--text-faint) / .35); transition: all var(--dur) var(--ease-out); }
.t-dot.active { width: 1.6rem; background: hsl(var(--accent)); }

/* ---------- Final CTA ---------- */
.final-cta { position: relative; overflow: hidden; isolation: isolate; background:
    radial-gradient(100% 120% at 50% 0%, hsl(var(--teal-light) / .5), transparent 60%),
    hsl(var(--bg)); }
.final-cta-bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center;
    opacity: .28;
    -webkit-mask-image: radial-gradient(120% 100% at 50% 60%, #000 25%, transparent 80%);
            mask-image: radial-gradient(120% 100% at 50% 60%, #000 25%, transparent 80%); }
.cta-motif { width: 120px; height: auto; margin: 0 auto .5rem; opacity: .8; }
.quiz-motif { width: 130px; height: auto; margin: 0 auto 1rem; opacity: .85; }

/* ---------- Blog card images ---------- */
.blog-card { overflow: hidden; }
.blog-card-img { aspect-ratio: 3 / 2; overflow: hidden; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.blog-card:hover .blog-card-img img { transform: scale(1.05); }

/* ---------- Footer sprig accent ---------- */
.footer-sprig { width: 2.6rem; height: auto; margin-bottom: .75rem; opacity: .85; }

/* ---------- Page hero ---------- */
.page-hero { padding: clamp(7rem, 5rem + 8vw, 10rem) 0 clamp(2.5rem, 2rem + 3vw, 4rem); }

/* ---------- Accordion (FAQ / spec / landing) ---------- */
.accordion { display: grid; gap: 1rem; }
.acc-item { overflow: hidden; }
.acc-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; padding: 1.4rem clamp(1.25rem, 1rem + 1vw, 2rem); font-family: 'Cormorant Garamond', serif; font-size: var(--step-1); font-weight: 600; color: hsl(var(--primary-deep)); transition: background var(--dur-fast) var(--ease-out); }
.acc-trigger:hover { background: hsl(var(--bg-alt) / .6); }
.acc-chevron { width: 1.3rem; height: 1.3rem; flex-shrink: 0; color: hsl(var(--accent)); transition: transform var(--dur) var(--ease-out); }
.acc-item.open .acc-chevron { transform: rotate(180deg); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease-out); }
.acc-item.open .acc-body { grid-template-rows: 1fr; }
.acc-body-inner { overflow: hidden; }
.acc-body-inner > * { padding: 0 clamp(1.25rem, 1rem + 1vw, 2rem) 1.5rem; color: hsl(var(--text-soft)); }

/* ---------- Specializations ---------- */
.spec-subs { display: grid; gap: 1.5rem; padding: 0 clamp(1.25rem, 1rem + 1vw, 2rem) 1.5rem; }
@media (min-width: 720px) { .spec-subs { grid-template-columns: 1fr 1fr; } }
.spec-sub h4 { font-size: var(--step-1); color: hsl(var(--primary)); margin-bottom: .5rem; }
.spec-sub-intro, .spec-intro { color: hsl(var(--text-faint)); font-size: var(--step--1); margin-bottom: .5rem; }
.acc-body-inner .spec-intro { padding-bottom: 0; }

/* ---------- Blog ---------- */
.blog-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.blog-cat { display: inline-block; font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: hsl(var(--accent-deep)); }
.blog-card h3 { font-size: var(--step-1); margin: .6rem 0; }
.blog-excerpt { color: hsl(var(--text-soft)); }
.blog-meta { display: flex; gap: .5rem; margin-top: 1rem; font-size: var(--step--1); color: hsl(var(--text-faint)); }

/* ---------- Contact ---------- */
.contact-section { padding-top: clamp(7rem, 5rem + 8vw, 9rem); }
.contact-grid { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 880px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-cards { display: grid; gap: .9rem; }
.contact-card { display: flex; gap: 1rem; align-items: center; padding: 1.1rem 1.25rem; background: hsl(var(--surface)); border: 1px solid hsl(var(--border) / .8); border-radius: var(--r-md); box-shadow: var(--shadow-soft); }
.contact-ico { width: 2.6rem; height: 2.6rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: hsl(var(--teal-light) / .6); color: hsl(var(--primary-deep)); font-size: 1.1rem; }
.contact-card-label { font-weight: 600; color: hsl(var(--primary-deep)); font-size: var(--step--1); }
.contact-card a:hover { color: hsl(var(--accent-deep)); }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: var(--step--1); font-weight: 600; margin-bottom: .4rem; color: hsl(var(--text)); }
.field input, .field textarea { width: 100%; padding: .8rem 1rem; border: 1px solid hsl(var(--border-strong)); border-radius: var(--r-md); background: hsl(var(--bg)); font: inherit; color: hsl(var(--text)); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.field input:focus, .field textarea:focus { outline: none; border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / .15); }
.field textarea { resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-confidential { font-size: var(--step--1); color: hsl(var(--text-faint)); text-align: center; margin-top: .9rem; }
.form-status { margin-top: .9rem; text-align: center; font-size: var(--step--1); min-height: 1.2em; }
.form-status.success { color: hsl(var(--primary)); font-weight: 600; }
.form-status.error { color: hsl(0 60% 45%); font-weight: 600; }

/* ---------- Landing (trauma-therapy) ---------- */
.landing-hero { position: relative; min-height: 100dvh; display: grid; align-items: center; padding: 5rem 0; overflow: hidden; isolation: isolate; }
.landing-hero .hero-bg { opacity: .3; -webkit-mask-image: none; mask-image: none; }
.landing-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, hsl(var(--bg) / .7), hsl(var(--bg) / .85)); }
.landing-brand { font-size: 1.4rem; }
.landing-trust { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; margin-top: 1.75rem; font-size: var(--step--1); color: hsl(var(--text-soft)); }
.landing-trust span span, .landing-trust span::first-letter { color: hsl(var(--accent)); }
.landing-problems { display: grid; gap: .9rem; max-width: 40rem; margin-inline: auto; }
.landing-problems li { background: hsl(var(--surface)); border: 1px solid hsl(var(--border)); border-radius: var(--r-md); padding: 1rem 1.25rem; box-shadow: var(--shadow-soft); color: hsl(var(--text-soft)); }
.process-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 760px) { .process-grid { grid-template-columns: repeat(3, 1fr); } }
.process-step { text-align: center; padding: 2rem 1.5rem; }
.process-num { display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: hsl(var(--primary) / .1); color: hsl(var(--primary-deep)); font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 600; margin-bottom: 1rem; }
.process-step h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.process-step p { color: hsl(var(--text-soft)); }

/* ---------- Legal / error ---------- */
.legal-body { color: hsl(var(--text-soft)); }
.error-section { padding: clamp(8rem, 6rem + 8vw, 12rem) 0; }