/*
Theme Name: Aspire Aba Therapy (WPConvert)
Theme URI: https://wpconvert.ai
Author: WPConvert.ai
Author URI: https://wpconvert.ai
Description: This theme was automatically generated from your original site design using WPConvert.ai. It preserves your layout, colors, typography, header, footer, and page content, and makes it editable in WordPress.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.6
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpconvert
Tags: landing page, responsive, custom header, custom footer
*/
/* =====================================================================
Aspire ABA Therapy — styles.css
Art direction: Calm & Airy Minimal (warm, never clinical)
Sections: 1 Tokens · 2 Reset · 3 Typography · 4 Layout helpers
5 Buttons/pills/cards · 6 Focus/a11y · 7 Motifs & motion
8+ Components & page sections (added per build task)
===================================================================== */
/* ---------- 1. TOKENS ------------------------------------------------ */
:root{
--blue:#213f93; --navy:#0F1E45; --blush:#E6A2AE; --rose:#C96D7E;
--cream:#FBF7F2; --cream-2:#F4EDE5; --white:#FFF; --sage:#7FA98B;
--muted:#5B5347; --hairline:#E7DED3;
--font-display:"Fraunces",Georgia,serif;
--font-body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--font-script:"Caveat",cursive;
--maxw:1200px; --radius:16px; --radius-lg:28px;
--s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem; --s-5:3rem; --s-6:4rem; --s-7:6rem; --s-8:8rem;
--shadow-sm:0 2px 10px rgba(15,30,69,.06);
--shadow-md:0 12px 30px rgba(15,30,69,.10);
--shadow-lg:0 30px 60px rgba(15,30,69,.14);
--fs-title: 51px;
--fs-content: 16px;
--padding-section: 4rem;
--size-top-header: 45.48px;
}
@media(max-width:768px){
:root{
--size-top-header: 38.42px;
--padding-section: 3rem;
}
}
/* Firefox */
html{
scrollbar-width: thin;
scrollbar-color: var(--blue) var(--cream);
}
/* Chrome */
::-webkit-scrollbar{
width:10px;
}
::-webkit-scrollbar-track{
background:var(--cream);
}
::-webkit-scrollbar-thumb{
background:var(--blue);
border-radius:50px;
border:2px solid var(--cream);
}
::-webkit-scrollbar-thumb:hover{
background:#cf8ea1;
}
/* ---------- 2. RESET ------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip}
img,video,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
ul,ol{padding:0;list-style:none}
/* ---------- 3. TYPOGRAPHY ------------------------------------------- */
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.12;font-weight:600;color:var(--navy);letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,5vw,3.9rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem)}
p{color:var(--muted)}
strong{color:var(--navy)}
/* ---------- 4. LAYOUT HELPERS --------------------------------------- */
.container{width:100%;max-width:none;margin-inline:0;padding-inline:clamp(1.25rem,6vw,70px)}
.section[id]{padding-block: var(--padding-section)}
.section--cream{background:var(--cream)}
.section--cream2{background:var(--cream-2)}
.section--white{background:var(--white)}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-body);font-weight:700;
letter-spacing:.1em;text-transform:uppercase;font-size: 14px;color:var(--navy);
background:#fff;border:1px solid var(--hairline);border-radius:999px;padding:.4rem .9rem;
margin-bottom:1rem;box-shadow:var(--shadow-sm)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rose);flex-shrink:0}
.hero .eyebrow,.page-hero .eyebrow{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);
color:#fff;box-shadow:none;backdrop-filter:blur(4px)}
.hero .eyebrow::before,.page-hero .eyebrow::before{background:var(--blush)}
.lead{font-size:var(--fs-content);color:var(--muted);max-width:62ch}
.script-accent{font-family:var(--font-script);color:var(--rose);font-size:1.7em;line-height:1;font-weight:600}
.section-head{max-width:800px;margin-inline:auto;text-align:center;margin-bottom:2.8rem}
.section-head .lead{margin-top:.9rem;margin-inline:auto}
.section-cta{margin-top:2.4rem;text-align:center}
.fine-print{font-size:.85rem;color:var(--muted);font-style:italic}
.fine-print a {
color: var(--rose);
transition: 400ms;
}
.fine-print a:hover {
color: #000;
transition: 400ms;
}
/* ---------- 5. BUTTONS / PILLS / CARDS ------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--font-body);
font-weight:600;font-size:1rem;padding:.85rem 1.4rem;border-radius:10px;border:1.5px solid transparent;
cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;}
.btn--sm{padding:.6rem 1.05rem;font-size:.9rem}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--blue);color:#fff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{box-shadow:var(--shadow-md);background:#1c357f}
/* Secondary: outlined blue on a lightly blurred, translucent wash. */
.btn--secondary{background:rgba(30,58,138,.07);color:var(--blue);border-color:var(--blue);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn--secondary:hover{background:rgba(30,58,138,.14);color:var(--blue);border-color:var(--blue)}
.btn--ghost{background:rgba(30,58,138,.07);color:var(--blue);border-color:var(--blue);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn--ghost:hover{background:rgba(30,58,138,.14);border-color:var(--blue);color:var(--blue)}
.pill{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--hairline);
border-radius:999px;padding:.5rem .9rem;font-size:.9rem;font-weight:600;color:var(--navy);box-shadow:var(--shadow-sm)}
.card{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-lg);
padding:clamp(1.4rem,2.5vw,2rem);box-shadow:var(--shadow-sm);
transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.link-cta{display:inline-block;color:var(--blue);font-weight:700}
.link-cta:hover{color:var(--rose)}
/* ---------- 6. FOCUS / A11Y ----------------------------------------- */
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:1rem;top:-3.5rem;background:var(--navy);color:#fff;padding:.6rem 1rem;
border-radius:8px;z-index:200;transition:top .2s;font-weight:600}
.skip-link:focus{top:1rem}
/* ---------- 7. MOTIFS & MOTION -------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none}
}
/* ---------- 9. FOOTER + MOBILE STICKY BAR --------------------------- */
.site-footer{background:var(--navy);color:#dfe4f0;padding-top:clamp(3rem,6vw,5rem)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem}
.footer-logo{width:175px;height:auto}
.footer-col--brand p{color:#c8cfe0;margin-top:1rem;max-width:34ch}
.footer-col h4{color:#fff;margin-bottom:1rem;font-size:1.05rem}
.footer-col a,.footer-col p, .footer-col button{display:block;color:#c8cfe0;margin-bottom:.55rem;font-size:var(--fs-content); border: none; outline: none; background: transparent;}
.footer-col button{padding: 0px; cursor: pointer;}
.footer-col a, .footer-col button{transition:color .2s}
.footer-col a:hover, .footer-col button:hover{color:#fff}
.footer-col--brand .script-accent{color:var(--blush);margin:.8rem 0 .4rem;display:block}
.footer-es{color:#fff!important;font-weight:600;margin-top:.2rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:2.5rem;padding-block:1.4rem;
font-size:.85rem;color:#aab3c9;display:flex;flex-wrap:wrap;justify-content:space-between;
align-items:center;gap:.4rem 1.5rem}
.footer-bottom p{color:#aab3c9;margin:0}
.footer-credit a{color:#c8cfe0;font-weight:600;transition:color .2s ease}
.footer-credit a:hover{color:#fff}
@media (max-width:520px){.footer-bottom{justify-content:center;text-align:center}}
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;gap:.6rem;padding:.7rem;
background:rgba(255,255,255,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
border-top:1px solid var(--hairline);box-shadow:0 -6px 20px rgba(15,30,69,.08)}
.mobile-bar .btn{flex:1;padding:.8rem .5rem;font-size:.92rem}
@media (max-width:720px){
.footer-grid{grid-template-columns:1fr 1fr}
.footer-col--brand{grid-column:1 / -1}
.mobile-bar{display:flex}
}
@media (max-width:460px){.footer-grid{grid-template-columns:1fr}}
/* ---------- 11. EMPATHY + SERVICES ---------------------------------- */
.svc-meta{display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.1rem}
.svc-meta-icon{width:30px;height:30px;flex-shrink:0;--aspire-icon-primary:var(--blue)}
.svc-meta-icon svg{width:100%;height:100%}
.svc-tag{display:inline-flex;align-items:center;gap:.45rem;background:var(--cream);border:1px solid var(--hairline);
border-radius:999px;padding:.35rem .8rem;font-size:.72rem;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--navy)}
/* Sticky stacking cards — each card pins under the header; the next scrolls over it */
.svc-stack{display:flex;flex-direction:column;gap:2.2rem}
.svc-stack__card{position:sticky;top:calc(128px + (var(--i) - 1) * 16px);
display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;min-height:min(66vh,560px);
background:#fff;border:1px solid var(--hairline);border-radius:var(--radius-lg);
box-shadow:var(--shadow-md);overflow:hidden}
.svc-stack__media{position:relative;min-height:300px}
.svc-stack__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc-stack__body{padding:clamp(1.8rem,4vw,3.4rem);display:flex;flex-direction:column;
align-items:flex-start;justify-content:center}
.svc-index{font-family:var(--font-display);font-weight:600;font-size:2.3rem;line-height:1;
color:var(--blush);margin-bottom:.7rem}
.svc-stack__body h3{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:.7rem}
.svc-stack__body p{margin-bottom:1.6rem;max-width:48ch}
@media (max-width:820px){
.svc-stack{gap:1.4rem}
.svc-stack__card{position:static;grid-template-columns:1fr;min-height:0}
.svc-stack__media{min-height:0;aspect-ratio:16/10}
.svc-index{font-size:1.9rem}
}
@media (prefers-reduced-motion:reduce){.svc-stack__card{position:static}}
/* ---------- 12. ABOUT + VALUES -------------------------------------- */
.section-head--center{max-width:720px;margin-inline:auto;text-align:center}
.about__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
.about__media img{border-radius:var(--radius-lg);object-fit:cover;box-shadow:var(--shadow-md);aspect-ratio:6/5;width:100%}
.about__sub{font-family:var(--font-display);font-size:1.2rem;color:var(--rose);margin:.4rem 0 1rem}
.about__text p{margin-bottom:1rem}
.about__text .btn{margin-top:.6rem}
@media (max-width:900px){.about__grid{grid-template-columns:1fr}}
/*
*/
@media (max-width: 768px){
.about__grid{
text-align: center;
}
.about__grid ul{
text-align: start;
}
.about__media{
grid-row:2;
}
.about__text{
grid-row:1;
}
}
/* ---------- 13. TEAM + SKILLS --------------------------------------- */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.team-card{text-align:center}
.team-card img{border-radius:16px;aspect-ratio:4/3;object-fit:cover;margin-bottom:1rem;width:100%}
.team-role{color:var(--blue);font-weight:700;margin-bottom:.15rem}
.team-cred{font-size:.9rem;margin-bottom:.15rem;color:var(--muted)}
.team-lang{font-size:.85rem;color:var(--sage);font-weight:700;margin-bottom:.7rem}
.team-note{font-style:italic;color:var(--muted)}
.skills__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
.skills__media img{border-radius:var(--radius-lg);object-fit:cover;box-shadow:var(--shadow-md);aspect-ratio:6/5;width:100%}
.skills-list{margin:1.4rem 0}
.skills-list li{padding:.85rem 0;border-bottom:1px solid var(--hairline);display:flex;align-items:flex-start;gap:.9rem}
.skills-list li:last-child{border-bottom:0}
.sk-icon{width:26px;height:26px;flex-shrink:0;margin-top:.2rem;--aspire-icon-primary:var(--blue)}
.sk-icon svg{width:100%;height:100%}
.sk-text{display:block}
.skills-list strong{display:block;color:var(--navy);font-family:var(--font-display);font-size:1.12rem;margin-bottom:.15rem}
.skills-list span{color:var(--muted)}
@media (max-width:900px){.team-grid{grid-template-columns:1fr}.skills__grid{grid-template-columns:1fr}}
@media (min-width:721px) and (max-width:900px){.team-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width: 768px){
.skills__grid{
text-align: center;
}
.skills__media{
grid-row:2;
}
.skills__text{
grid-row:1;
}
}
/* ---------- 14. STEPS PREVIEW + CONTACT BANNER ---------------------- */
.steps-preview{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;position:relative}
.step{text-align:center;padding:1.4rem 1rem}
.step__n{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--blue);
color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.2rem;margin-bottom:.9rem;
box-shadow:0 0 0 6px rgba(30,58,138,.10)}
.step h3{font-size:1.05rem;margin-bottom:.35rem}
.step p{font-size: var(--fs-content)}
.cta-banner{background:transparent;color:#fff;}
.cta-banner__inner{background:linear-gradient(120deg,var(--navy),var(--blue));border-radius:var(--radius-lg);
padding:clamp(2.8rem,7vw,5.5rem) clamp(1.5rem,5vw,4rem);text-align:center;box-shadow:var(--shadow-md)}
.cta-banner .script-accent{color:var(--blush)}
.cta-banner h2{color:#fff;margin:.4rem 0 1rem}
.cta-banner .lead{color:#eef1f9;margin-inline:auto;margin-bottom:1.7rem;max-width:56ch}
.cta-banner__cta{justify-content:center}
.banner__phone{margin-top:1.1rem;color:#eef1f9}
.banner__phone a{color:#fff;text-decoration:underline;text-underline-offset:3px;margin-left:.3rem}
@media (max-width:900px){.steps-preview{grid-template-columns:repeat(2,1fr);gap:0px}}
@media (max-width:520px){.steps-preview{grid-template-columns:1fr}}
.step{
position:relative;
border-radius: var(--radius);
overflow: hidden;
transition:
transform .35s ease,
background .35s ease,
box-shadow .35s ease;
}
.step__n{
position:relative;
transition:
transform .35s ease,
box-shadow .35s ease,
background .35s ease;
}
.step h3{
transition:
color .3s ease,
transform .3s ease;
}
.step p{
transition:
opacity .3s ease,
transform .3s ease;
}
@media (hover:hover){
.step:hover{
background:
linear-gradient(
180deg,
rgba(243, 247, 255, 0.048),
#e8a9b381
);
box-shadow:
0 16px 40px rgba(22,45,96,.08);
}
.step:hover .step__n{
transform:
translateY(-6px)
scale(1.08);
}
.step:hover h3{
color:var(--blue);
transform:translateY(2px);
}
.step:hover p{
transform:translateY(3px);
}
}
@media (hover:hover){
.step:hover .step__n{
box-shadow:
0 0 0 8px rgba(30,58,138,.08),
0 12px 28px rgba(30,58,138,.22);
}
}
.step::before{
content:"";
position:absolute;
left:50%;
top:62px;
width:2px;
height:0;
background:linear-gradient(
var(--blue),
transparent
);
transform:translateX(-50%);
transition:.35s;
opacity:0;
}
.step:hover::before{
opacity:1;
height:24px;
}
@media (hover:hover){
.step:hover .step__n{
background:
linear-gradient(
135deg,
var(--blue),
var(--navy)
);
}
}
.step h3::after{
content:"→";
display:inline-block;
margin-left:.35rem;
opacity:0;
transform:translateX(-6px);
transition:.3s;
color:var(--rose);
}
.step:hover h3::after{
opacity:1;
transform:none;
}
@keyframes stepPulse{
0%{
box-shadow:
0 0 0 0 rgba(30,58,138,.25);
}
70%{
box-shadow:
0 0 0 12px rgba(30,58,138,0);
}
100%{
box-shadow:
0 0 0 0 rgba(30,58,138,0);
}
}
.step:hover .step__n{
animation:stepPulse 1.6s infinite;
}
/* ---------- 15. WHY + PARENT SUPPORT + INSURANCE -------------------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.why-item{background:#fff;border:1px solid var(--hairline);border-radius:var(--radius);padding:1.6rem;
border-left:4px solid var(--blush);box-shadow:var(--shadow-sm)}
.why-item h3{font-size:1.12rem;margin-bottom:.4rem}
.check-list li{position:relative;padding-left:1.9rem;margin-bottom:.7rem;color:var(--muted)}
.check-list li::before{content:"";position:absolute;left:0;top:.3rem;width:1.2rem;height:1.2rem;border-radius:50%;
background:var(--sage);
-webkit-mask:url("data:image/svg+xml;utf8,") center/68% no-repeat;
mask:url("data:image/svg+xml;utf8,") center/68% no-repeat}
.parent-support .check-list{margin:1.2rem 0}
/* Wider track so the four proof points sit on a single row; the heading and
lead keep their original narrower measure so the block still reads centred. */
.insurance__inner{max-width:none;margin-inline:auto;text-align:center}
.insurance__inner h2,.insurance__inner .lead{max-width:840px;margin-inline:auto}
/* No display here — .check-list--row owns that, and a descendant selector
would outrank the modifier and quietly kill the grid. */
.insurance__inner .check-list{text-align:left;margin:1.5rem 0 .7rem}
/* Centred row of single-line points. Flex + nowrap rather than equal grid
columns: the labels differ in length, so fixed columns left ragged gaps and
forced two-line wraps. Wrapping to a second row happens on its own when the
line no longer fits, so there is no breakpoint to keep in sync. */
/* Single centred row. Flex + wrap rather than fixed columns: if a narrower
viewport (or a longer translation) can't hold the line, it breaks to a
balanced second row on its own instead of overflowing. */
.check-list--row{display:flex;flex-wrap:wrap;justify-content:center;
gap:.7rem 2.2rem;align-items:baseline}
.check-list--row li{margin-bottom:0;white-space:nowrap;font-size:.95rem;padding-left:1.65rem}
.check-list--row li::before{top:.22rem;width:1.05rem;height:1.05rem}
.insurance__cta{justify-content:center;margin-top:.8rem}
@media (max-width:900px){.why-grid{grid-template-columns:1fr}}
/* On phones the labels are wider than the screen, so let them wrap again. */
@media (max-width:700px){
.check-list--row{flex-direction:column;align-items:flex-start;gap:.55rem}
.check-list--row li{white-space:normal}
}
/* ---------- 16. SERVICE AREAS + TESTIMONIALS + FAQ ------------------ */
.tst-slider{max-width:840px;margin-inline:auto;text-align:center}
.tst-stars{color:#e8a93a;letter-spacing:2px;font-size:1.05rem}
@keyframes tstfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tst-slide blockquote{font-family:var(--font-display);font-size:clamp(1.25rem,2.4vw,1.75rem);
color:var(--navy);line-height:1.45;margin:1.1rem auto 1.6rem;max-width:46ch}
.tst-slide figcaption{display:flex;align-items:center;justify-content:center;gap:.8rem}
.tst-slide figcaption img{border-radius:50%;width:56px;height:56px;object-fit:cover}
.tst-slide figcaption span{text-align:left}
.tst-slide figcaption strong{display:block;color:var(--navy)}
.tst-slide figcaption em{font-style:normal;color:var(--muted);font-size:.88rem}
.tst-nav{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-top:2rem}
.tst-arrow{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--hairline);background:#fff;
cursor:pointer;color:var(--navy);font-size:1.05rem;display:grid;place-items:center;
transition:border-color .2s,color .2s}
.tst-arrow:hover{border-color:var(--blue);color:var(--blue)}
.tst-dots{display:flex;gap:.5rem}
.tst-dot{width:9px;height:9px;border-radius:50%;background:var(--hairline);border:0;padding:0;cursor:pointer;
transition:background .2s}
.tst-dot.active{background:var(--blue)}
.faq__item{background:#fff;border:1px solid var(--hairline);border-radius:14px;margin-bottom:.8rem;overflow:hidden}
.faq__item summary{cursor:pointer;list-style:none;padding:1.15rem 1.3rem;font-weight:700;color:var(--navy);
display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-size:1.5rem;color:var(--blue);transition:transform .2s;line-height:1;flex-shrink:0}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__a{padding:0 1.3rem 1.2rem}
/* FAQ tabs (categories) */
.faq-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;max-width:960px;margin:0 auto 2.4rem}
.faq-tab{display:inline-flex;align-items:center;gap:.55rem;background:#fff;border:1.5px solid var(--hairline);
border-radius:999px;padding:.7rem 1.3rem;font-family:var(--font-body);font-weight:600;font-size:.92rem;
color:var(--navy);cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s;
box-shadow:var(--shadow-sm)}
.faq-tab__ic{display:inline-flex;line-height:1}
.faq-tab__ic svg{width:18px;height:18px;fill:currentColor}
.faq-tab:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.faq-tab.active{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:var(--shadow-md)}
.faq-panels{max-width:840px;margin:0 auto}
.faq-panel{animation:faqfade .35s ease}
@keyframes faqfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:640px){
.faq-tabs{gap:.5rem}
.faq-tab{padding:.6rem 1rem;font-size:.85rem}
}
/* ---------- 17. CONTACT FORM ---------------------------------------- */
.contact__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.6rem,4vw,3rem);align-items:start}
.contact__phone{margin:1.2rem 0 .4rem;font-size:1.05rem}
.contact__phone a{color:var(--blue)}
.contact__es{color:var(--blue);font-weight:700}
.contact-form{padding:clamp(1.5rem,3vw,2.2rem)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{margin-bottom:1rem;display:flex;flex-direction:column}
.field label{font-weight:600;font-size:.9rem;margin-bottom:.35rem;color:var(--navy)}
.field input,.field select,.field textarea{font-family:inherit;font-size:1rem;padding:.75rem .9rem;
border:1.5px solid var(--hairline);border-radius:12px;background:#fff;color:var(--navy);
transition:border-color .2s;width:100%}
.wpcf7-form-control-wrap textarea{
height: 200px;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:3px solid transparent;outline-offset:2px}
.field textarea{resize:vertical}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--rose);background:#fff6f7}
.contact-form__submit{width:100%;margin-top:.4rem}
.form-status{margin-top:.8rem;font-weight:600;min-height:1.2em}
.form-status.ok{color:#3f7d55}
.form-status.err{color:var(--rose)}
.contact-form .fine-print{margin-top:.7rem}
@media (max-width:820px){.contact__grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}}
/* ---------- 18. PAGE HERO + ROADMAP (interior pages) ---------------- */
.page-hero{position:relative;color:#fff;padding-block:clamp(4rem,9vw,7rem);isolation:isolate;
background:var(--navy) center/cover no-repeat}
.page-hero--how{background-image:url('../images/how-hero-intake.webp')}
.page-hero--resources{background-image:url('../images/resources-hero-family.webp')}
.page-hero::before{content:"";position:absolute;inset:0;z-index:0;
background:linear-gradient(100deg,rgba(15,30,69,.90) 0%,rgba(15,30,69,.66) 48%,rgba(30,58,138,.42) 100%)}
.page-hero>.container{position:relative;z-index:1}
.page-hero h1,.page-hero .eyebrow{color:#fff}
.page-hero .eyebrow{color:#dfe6ff}
.page-hero .lead{color:#eef1f9;max-width:60ch}
@media (max-width:820px){
.page-hero{min-height:560px;background-position:center center}
.page-hero--how{background-image:url('../images/how-hero-intake-mobile.webp')}
.page-hero--resources{background-image:url('../images/resources-hero-family-mobile.webp')}
}
.trust-row--light{margin-top:1.6rem}
/* Alternating vertical timeline with a scroll-drawn infinity-curve spine. */
.roadmap-wrap{position:relative;max-width:900px;margin:2.4rem auto 0}
.roadmap-line{position:absolute;left:50%;top:0;height:100%;width:44px;transform:translateX(-50%);
z-index:0;pointer-events:none;overflow:visible}
.roadmap-line .draw-path{filter:drop-shadow(0 2px 3px rgba(230,162,174,.3))}
.roadmap{position:relative;z-index:1;margin:0}
.rm-step{position:relative;display:grid;grid-template-columns:1fr 56px 1fr;column-gap:2.2rem;
align-items:start;padding-bottom:3rem}
.rm-step:last-child{padding-bottom:0}
.rm-n{grid-column:2;justify-self:center;z-index:1;width:48px;height:48px;border-radius:50%;
background:var(--blue);color:#fff;display:grid;place-items:center;font-family:var(--font-display);
font-weight:700;font-size:1.15rem;box-shadow:0 0 0 6px var(--cream);
transition:transform .25s ease,box-shadow .25s ease}
.rm-step:hover .rm-n{transform:scale(1.08);box-shadow:0 0 0 8px var(--cream),0 10px 20px rgba(30,58,138,.28)}
.rm-step:last-child .rm-n{background:var(--navy)}
.rm-body{grid-column:1;text-align:right;max-width:400px;justify-self:end}
.rm-step:nth-child(even) .rm-body{grid-column:3;text-align:left;justify-self:start}
.rm-body h3{margin-bottom:.45rem}
.rm-note{margin-top:.6rem;font-size:.85rem;font-style:italic;color:var(--muted);
border-left:3px solid var(--blush);padding-left:.8rem;text-align:left}
.rm-note--soft{border-left-color:var(--sage)}
.roadmap-close{text-align:center;max-width:640px;margin:2.6rem auto 0;font-size:1.5rem}
@media (prefers-reduced-motion:no-preference){
.rm-step:nth-child(odd).reveal{transform:translateX(-26px)}
.rm-step:nth-child(even).reveal{transform:translateX(26px)}
}
.rm-step.reveal.is-visible{transform:none}
@media (max-width:900px){
.roadmap-line{display:none}
.roadmap-wrap{max-width:640px}
.roadmap-wrap::before{content:"";position:absolute;left:23px;top:14px;bottom:14px;width:2px;
background:linear-gradient(var(--blush),var(--blue));z-index:0}
.rm-step{grid-template-columns:48px 1fr;column-gap:1.3rem}
.rm-n{grid-column:1;justify-self:start}
.rm-body,.rm-step:nth-child(even) .rm-body{grid-column:2;text-align:left;max-width:none;justify-self:stretch}
.rm-note{text-align:left}
}
@media (max-width:520px){
.rm-step{grid-template-columns:38px 1fr;gap:1rem}
.roadmap-wrap::before{left:18px}
.rm-n{width:38px;height:38px;font-size:1rem;box-shadow:0 0 0 5px var(--cream)}
}
/* ---------- 19. RESOURCES PAGE -------------------------------------- */
/* Rebuilt on the home / how-it-works vocabulary: an editorial sticky intro,
brand-icon topic cards, numbered rows, one dark colour moment, and the
same alternating white / cream2 rhythm as the rest of the site. */
/* The old resources page needed bare h2s styled; every heading now has its own
rule, and this leftover only reached the insurance and contact headings —
shrinking them to 32px and zeroing their auto margins, which knocked the
centred insurance heading 222px off axis. */
.res-hidden{display:none!important}
.res-tag{display:inline-block;background:var(--cream-2);color:var(--blue);font-size:.72rem;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px}
/* 19.1 Search — lives inside the sticky intro column. */
.res-search{max-width:420px;margin:1.6rem 0 0; display: flex; gap: 12px; align-items: center;}
.res-search input{width:100%;padding:.9rem 1.25rem;border:1.5px solid var(--hairline);border-radius:999px;
font-size:1rem;font-family:inherit;background:#fff;box-shadow:var(--shadow-sm)}
.res-search input:focus{border-color:var(--blue);outline:3px solid transparent;outline-offset:2px}
/* 19.2 Featured — numbered editorial rows echoing the services stack. */
.res-feature-list{display:flex;flex-direction:column}
.res-feature{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;
gap:0 1.5rem;padding:1.8rem 0;border-bottom:1px solid var(--hairline);transition:padding-left .3s ease}
.res-feature:first-child{padding-top:0}
.res-feature:last-child{border-bottom:0;padding-bottom:0}
.res-feature__n{font-family:var(--font-display);font-weight:600;line-height:.85;
font-size:clamp(2.2rem,3.6vw,3rem);color:var(--blush);opacity:.92}
.res-feature h3{font-size:clamp(1.2rem,2vw,1.5rem);margin:.55rem 0 .4rem;transition:color .2s ease}
.res-feature p{margin:0;max-width:52ch}
.res-feature__arrow{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;margin-top:.4rem;
border-radius:50%;background:var(--cream-2);color:var(--blue);font-size:1rem;
transition:background .25s ease,color .25s ease,transform .25s ease}
.res-feature:hover h3{color:var(--blue)}
.res-feature:hover .res-feature__arrow{background:var(--blue);color:#fff;transform:translateX(3px)}
@media (prefers-reduced-motion:no-preference){.res-feature:hover{padding-left:.6rem}}
/* 19.3 Topics — brand-icon cards with a growing blush underline. */
.topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.res-topic{position:relative;overflow:hidden;display:flex;flex-direction:column;
align-items:flex-start;justify-content:flex-end;gap:1.1rem;min-height:150px;
background:#fff;border:1px solid var(--hairline);border-radius:var(--radius);
padding:1.7rem 1.8rem;box-shadow:var(--shadow-sm);transition:transform .35s ease,box-shadow .35s ease; cursor: pointer;}
.res-topic::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--blush);
transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.res-topic:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.res-topic:hover::after{transform:scaleX(1)}
.res-topic__ic{width:40px;height:40px;flex-shrink:0;margin-bottom:auto}
.res-topic__ic svg{width:100%;height:100%}
.res-topic h3{font-size:1.15rem;margin:0;line-height:1.25;max-width:18ch}
@media(max-width: 768px){
.res-topic{
align-items: center;
}
.res-topic h3{
text-align: center;
}
}
/* 19.4 Articles — two columns of numbered hairline rows. */
.res-article-list{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,5vw,4rem);
max-width:1040px;margin-inline:auto}
.res-article a{display:flex;align-items:center;gap:1.1rem;padding:1.15rem .2rem;
border-bottom:1px solid var(--hairline);color:var(--navy);transition:color .2s ease}
.res-article__n{font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--blush);flex-shrink:0}
.res-article__t{flex:1;font-weight:600}
.res-article a::after{content:"→";color:var(--blush);flex-shrink:0;transition:transform .2s ease}
.res-article a:hover{color:var(--blue)}
.res-article a:hover::after{transform:translateX(4px)}
/* 19.5 Guides — the page's single dark colour moment. */
.res-moment{position:relative;overflow:hidden;color:#fff;
background:radial-gradient(130% 150% at 12% 0%,var(--blue) 0%,var(--navy) 68%)}
.res-moment__inner{position:relative;z-index:1}
.res-moment h2{color:#fff}
.res-moment h2 em{color:#7e9ef1}
.res-moment .lead{color:rgba(255,255,255,.84)}
/* Beats the later `.section .eyebrow` colour rule in the signature pass. */
.section.res-moment .eyebrow{color:#fff}
.guide-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.res-guide{display:flex;align-items:center;gap:1.1rem;padding:1.3rem 1.5rem;border-radius:var(--radius);
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;
transition:transform .3s ease,background .3s ease,border-color .3s ease}
.res-guide:hover{transform:translateY(-4px);background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.42)}
.res-guide__ic{width:32px;height:32px;flex-shrink:0}
.res-guide__ic svg{width:100%;height:100%;--aspire-icon-primary:#fff}
.res-guide h3{color:#fff;font-size:1.05rem;margin:0;line-height:1.3;flex:1}
.res-guide__dl{flex-shrink:0;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--blush);white-space:nowrap}
.res-guide__dl::after{content:" \2193"}
/* 19.6 Trusted organizations — outbound rows. */
.org-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;max-width:900px;margin-inline:auto}
.org-list a{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#fff;
border:1px solid var(--hairline);border-radius:14px;padding:1.1rem 1.4rem;font-weight:600;
color:var(--navy);box-shadow:var(--shadow-sm);transition:border-color .2s ease,color .2s ease,transform .2s ease}
.org-list a:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.org-list__ext{color:var(--blush);flex-shrink:0}
/* 19.7 Videos — navy placeholder tiles until the films land. */
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.res-video{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:.7rem;
min-height:190px;padding:1.5rem 1.6rem;border-radius:var(--radius-lg);color:#fff;overflow:hidden;
background:linear-gradient(140deg,var(--navy) 0%,var(--blue) 100%);box-shadow:var(--shadow-sm);
transition:transform .35s ease,box-shadow .35s ease}
.res-video:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.res-video__play{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
background:var(--blush);color:var(--navy);margin-bottom:auto;transition:transform .3s ease}
.res-video__play svg{width:20px;height:20px;margin-left:3px}
.res-video:hover .res-video__play{transform:scale(1.08)}
.res-video p{color:#fff;font-family:var(--font-display);font-size:1.2rem;line-height:1.25;margin:0}
.res-video__soon{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:rgba(255,255,255,.65)}
.disclaimer{font-size:.85rem;font-style:italic;color:var(--muted);border-top:1px solid var(--hairline);
margin-top:2.8rem;padding-top:1.3rem;max-width:75ch;margin-inline:auto;text-align:center}
@media (max-width:900px){
.topic-grid,.guide-grid,.res-article-list,.org-list,.video-grid{grid-template-columns:1fr}
.res-search{max-width:none}
}
@media (max-width:560px){
.res-feature{grid-template-columns:auto minmax(0,1fr);gap:0 1rem}
.res-feature__arrow{display:none}
.res-guide{flex-wrap:wrap;gap:.8rem 1rem}
.res-guide h3{flex:1 1 100%;order:2}
.res-guide__dl{order:3}
}
/* ---------- 20. WIDE-SCREEN LAYOUT (70px gutters, full-bleed) -------- */
/* Must live at the end so it overrides the base grid rules above.
Fixed 70px gutter, no max-width cap. Keep proportions intentional on
large screens by capping oversized media and text measure — never by
re-centering sections (that would push side margins past 70px). */
@media (min-width:1280px){
.about__media img,.skills__media img{max-height:600px} /* contain tall media */
.team-card img{max-height:440px} /* contain portraits */
.contact__intro{max-width:560px}
}
/* ---------- 21. HOME: HEADER OVERLAYING VIDEO HERO ------------------- */
/* Pull the hero up behind the topbar+header so the video shows through,
while the header keeps its cream background (with some transparency),
navy top bar, and full-color logo. */
/* ---------- 22. ASPIRE SIGNATURE PASS ------------------------------ */
/* A focused originality pass: stronger hierarchy, a home-to-progress
narrative, and less repeated card/pill styling without changing the
established palette, typography, content, or page architecture. */
h1,h2,h3{ text-wrap:balance }
p{ text-wrap:pretty }
section[id]{scroll-margin-top:5rem}
/* Labels read as part of the editorial rhythm instead of repeated pills. */
.section .eyebrow{
gap:.65rem;padding:0;border:0;border-radius:0;background:transparent;
box-shadow:none;color:var(--blue)
}
/* No rule/dash before section eyebrows — the label stands on its own. */
.section .eyebrow::before{content:none}
.hero .eyebrow,.page-hero .eyebrow{
padding:.4rem .9rem;border:1px solid rgba(255,255,255,.28);border-radius:999px;
background:rgba(255,255,255,.12);color:#fff
}
.hero .eyebrow::before,.page-hero .eyebrow::before{width:8px;height:8px;border-radius:50%}
/* Reserve lift for interactive cards. Static content no longer floats on hover. */
.card:hover{transform:none;box-shadow:var(--shadow-sm)}
a.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0) scale(.98)}
/* Header keeps the full-color (blue) logo and navy nav on every page. */
body.home .site-header:not(.scrolled) .nav__brand img{filter:none;transition:filter .2s ease,width .25s ease}
body.home .site-header:not(.scrolled) .nav__menu>a{color:var(--navy);text-shadow:none}
body.home .site-header:not(.scrolled) .nav__menu>a:hover{color:var(--blue)}
body.home .site-header:not(.scrolled) .nav__cta .btn--ghost{color:var(--blue);border-color:var(--blue);background:rgba(30,58,138,.07)}
body.home .site-header:not(.scrolled) .nav__cta .btn--ghost:hover{background:rgba(30,58,138,.14);color:var(--blue)}
/* Hero: one dominant thought, quieter support, and a branded proof point. */
.hero__scrim{
background:linear-gradient(100deg,rgba(15,30,69,.94) 0%,rgba(15,30,69,.72) 47%,rgba(30,58,138,.20) 100%)
}
.hero__inner{max-width:940px}
.hero h1{font-size:clamp(2.65rem,5.35vw,4.7rem);line-height:1.03;letter-spacing:-.025em;max-width:18ch}
.hero__sub{max-width:55ch;line-height:1.72}
.hero__badge{
overflow:hidden;background:var(--navy);border:1px solid rgba(255,255,255,.22);
border-radius:var(--radius);box-shadow:var(--shadow-lg);backdrop-filter:none;-webkit-backdrop-filter:none
}
.hero__badge::before{
content:"";position:absolute;width:112px;height:112px;right:-28px;top:-34px;
background:url("../img/logo-mark.svg") center/contain no-repeat;filter:brightness(0) invert(1);opacity:.08
}
.hero__badge p{position:relative}
/* Alternating service stories create rhythm while preserving sticky cards. */
.svc-stack__card:nth-child(even){grid-template-columns:1fr 1.05fr}
.svc-stack__card:nth-child(even) .svc-stack__media{order:2}
.svc-stack__card:nth-child(even) .svc-stack__body{order:1}
.svc-stack__card{box-shadow:0 18px 52px rgba(15,30,69,.12)}
.svc-stack__media::after{
content:"";position:absolute;inset:0;border:10px solid rgba(255,255,255,.16);pointer-events:none
}
/* The five values become a horizontal accordion of color panels. */
.values-accordion{display:flex;gap:.6rem;align-items:stretch;height:clamp(300px,47vw,484px);
margin-inline:auto}
.values-panel{
position:relative;display:flex;flex-direction:column;flex:.62 1 0%;min-height:0;overflow:hidden;border-radius:18px;
background:var(--navy);color:#fff;transition:flex .6s cubic-bezier(.22,.9,.24,1)
}
.values-panel.is-active{flex:5 1 0%;justify-content:center}
.values-accordion .values-panel:nth-child(2){background:var(--blue)}
.values-accordion .values-panel:nth-child(3){background:var(--rose)}
.values-accordion .values-panel:nth-child(4){background:var(--sage)}
.values-accordion .values-panel:nth-child(5){background:var(--blush);color:var(--navy)}
/* A related photo fades in behind the open panel under a light scrim, so the
photo stays clearly visible while the copy keeps its contrast. */
.values-panel::before{
content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .7s ease;
background:linear-gradient(100deg,rgba(4,9,26,.74) 0%,rgba(4,9,26,.50) 58%,rgba(4,9,26,.16) 100%),
var(--val-bg) center/cover no-repeat
}
.values-panel.is-active::before{opacity:1}
.values-accordion .values-panel:nth-child(5).is-active{color:#fff}
.values-panel__toggle{
position:relative;z-index:1;display:flex;align-items:center;gap:.85rem;width:100%;
flex:1 1 auto;min-height:0;overflow:hidden;padding:1.1rem 1rem;
background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer
}
.values-panel.is-active .values-panel__toggle{flex:0 0 auto}
.values-panel__toggle:focus-visible{outline:3px solid var(--blue);outline-offset:-3px;border-radius:12px}
.values-panel__icon{width:30px;height:30px;flex-shrink:0}
.values-panel__icon svg{width:100%;height:100%;--aspire-icon-primary:#fff}
.values-accordion .values-panel:nth-child(5) .values-panel__icon svg{--aspire-icon-primary:var(--navy)}
.values-accordion .values-panel:nth-child(5).is-active .values-panel__icon svg{--aspire-icon-primary:#fff}
.values-panel.is-active .values-panel__icon{width:46px;height:46px}
.values-panel__title{font-family:var(--font-display);font-weight:600;font-size:.98rem;white-space:nowrap;transition:font-size .4s ease}
.values-panel__body{position:relative;z-index:1;flex:0 0 0%;min-height:0;opacity:0;overflow:hidden;padding:0 1.3rem;
transition:flex .5s ease,opacity .35s ease .05s}
.values-panel__body p{margin:0 0 1rem;font-size: var(--fs-contentz);line-height:1.62;opacity:1;max-width:34ch;
color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.55)}
.values-panel:nth-child(5) .values-panel__body p{color:var(--muted);text-shadow:none}
.values-accordion .values-panel:nth-child(5).is-active .values-panel__body p{color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.3)}
.values-panel.is-active .values-panel__body{flex:0 1 auto;opacity:1;padding:1rem 1.3rem 0}
/* Collapsed: icon on top, title reads vertically down the narrow strip. */
.values-panel:not(.is-active) .values-panel__toggle{
flex-direction:column;justify-content:flex-start;align-items:center;gap:.8rem;padding-top:1.2rem}
.values-panel:not(.is-active) .values-panel__icon{order:1}
.values-panel:not(.is-active) .values-panel__title{
order:2;writing-mode:vertical-rl;transform:rotate(180deg);font-size:1.15rem}
.values-panel.is-active .values-panel__toggle{align-items:center}
.values-panel.is-active .values-panel__title{font-size:2.15rem}
@media (prefers-reduced-motion:reduce){.values-panel,.values-panel__toggle,.values-panel__body,.values-panel::before{transition:none}}
@media (max-width:760px){
.values-accordion{flex-direction:column;height:auto}
.values-panel{flex:none!important}
.values-panel.is-active{min-height:240px}
.values-panel::before{background-position:right center}
.values-panel__toggle{flex-direction:row!important;justify-content:flex-start!important;
align-items:center!important;padding:1.1rem 1.2rem!important;flex:none!important}
.values-panel__title{writing-mode:horizontal-tb!important;transform:none!important;font-size:1.05rem!important}
.values-panel .values-panel__body{display: none;}
.values-panel.is-active .values-panel__body{display: flex;flex:none!important;max-height:260px}
}
/* Transiciones */
.values-panel{
transition:
flex .6s cubic-bezier(.22,.9,.24,1),
transform .28s ease,
box-shadow .28s ease,
filter .28s ease;
}
.values-panel__icon{
transition:
transform .28s ease,
filter .28s ease;
}
.values-panel__title{
transition:
font-size .4s ease,
transform .28s ease,
opacity .28s ease;
}
@media (hover:hover){
.values-panel:not(.is-active):hover{
transform:translateY(-6px);
filter:
saturate(1.08)
brightness(1.05);
box-shadow:
0 18px 40px rgba(20,35,75,.18);
}
}
@media (hover:hover){
.values-panel:not(.is-active):hover .values-panel__icon{
transform:scale(1.12);
filter:drop-shadow(0 6px 10px rgba(0,0,0,.15));
}
}
@media (hover:hover){
.values-panel:not(.is-active):hover .values-panel__title{
transform:
rotate(180deg)
translateY(-4px);
}
}
.values-panel:nth-child(1):hover{
box-shadow:0 18px 42px rgba(29,48,97,.28);
}
.values-panel:nth-child(2):hover{
box-shadow:0 18px 42px rgba(52,93,185,.28);
}
.values-panel:nth-child(3):hover{
box-shadow:0 18px 42px rgba(203,112,135,.28);
}
.values-panel:nth-child(4):hover{
box-shadow:0 18px 42px rgba(135,173,140,.28);
}
.values-panel:nth-child(5):hover{
box-shadow:0 18px 42px rgba(230,170,182,.32);
}
/* The intake steps read as a connected path, not five isolated widgets. */
.steps-preview::before{
content:"";position:absolute;left:10%;right:10%;top:37px;height:2px;
background:linear-gradient(90deg,var(--blush),var(--blue));opacity:.5
}
.step{position:relative;z-index:1}
.step__n{transition:transform .2s ease,box-shadow .2s ease}
.step:hover .step__n{transform:translateY(-2px);box-shadow:0 0 0 8px rgba(30,58,138,.10)}
.step:last-child .step__n{background:var(--blue)}
/* One deliberate, asymmetric conversion moment. */
.cta-banner__inner{
position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);
grid-template-rows:auto auto auto auto;column-gap:clamp(2rem,6vw,6rem);text-align:left
}
.cta-banner__inner::after{
content:"";position:absolute;width:270px;height:270px;left:clamp(1rem,4vw,3.5rem);bottom:-80px;
background:url("../img/logo-mark.svg") center/contain no-repeat;filter:brightness(0) invert(1);opacity:.07
}
.cta-banner .script-accent{grid-column:1;grid-row:1 / span 4;align-self:center;position:relative;z-index:1;font-size:clamp(2rem,4vw,3.5rem);line-height:1.05}
.cta-banner h2,.cta-banner .lead,.cta-banner__cta,.banner__phone{grid-column:2;position:relative;z-index:1}
.cta-banner h2{margin:0 0 .8rem;max-width:18ch}
.cta-banner .lead{margin:0 0 1.5rem}
.cta-banner__cta{justify-content:flex-start;margin-top:0}
/* Stronger focus and validation states. */
.field input:focus,.field select:focus,.field textarea:focus,.res-search input:focus{outline:0}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,.res-search input:focus-visible{
border-color:var(--blue);outline:3px solid rgba(30,58,138,.22);outline-offset:2px
}
.field-error{display:block;margin-top:.35rem;color:var(--rose);font-size:.82rem;font-weight:600}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--rose)}
@media (min-width:1001px){
.why-item.reveal,.step.reveal{opacity:1;transform:none;transition:none}
}
@media (max-width:900px){
.team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.cta-banner__inner{grid-template-columns:1fr;text-align:center;row-gap:.8rem}
.cta-banner .script-accent,.cta-banner h2,.cta-banner .lead,.cta-banner__cta,.banner__phone{grid-column:1;grid-row:auto}
.cta-banner h2,.cta-banner .lead{margin-inline:auto}
.cta-banner__cta{justify-content:center}
.cta-banner__inner::after{left:50%;transform:translateX(-50%)}
}
@media (max-width:820px){
.svc-stack__card:nth-child(even){grid-template-columns:1fr}
.svc-stack__card:nth-child(even) .svc-stack__media{order:0}
.svc-stack__card:nth-child(even) .svc-stack__body{order:0}
.svc-stack__body{
text-align: center;
align-items: center;
}
}
@media (max-width:720px){
.steps-preview::before{display:none}
}
@media (max-width:560px){
.team-grid{grid-template-columns:1fr}
.cta-banner__inner{border-radius:var(--radius);padding:2.4rem 1.25rem;}
.cta-banner .script-accent{font-size:2.25rem}
}
/* ---------- 22. FLOATING CONTACT BANNER (image bg, centered) --------- */
/* Authoritative override: compact, floating, centered banner with a warm
photo background + navy scrim; supersedes the earlier asymmetric block. */
.cta-banner{padding-block: var(--padding-section);padding-inline:clamp(1.25rem,6vw,70px);background:transparent}
.cta-banner__inner{display:block;position:relative;overflow:hidden;text-align:center;
max-width:none;margin-inline:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
padding:clamp(2.2rem,4.5vw,3.4rem) clamp(1.6rem,5vw,3.5rem);
/* background-position::linear-gradient(120deg,rgba(15,30,69,.92) 0%,rgba(15,30,69,.72) 48%,rgba(30,58,138,.36) 100%),url('../images/cta-family-support.webp') center/cover no-repeat*/}
.cta-banner__inner::after{display:none}
.cta-banner .script-accent{display:block;grid-column:auto;grid-row:auto;font-size:clamp(1.45rem,3vw,1.95rem)}
.cta-banner h2{grid-column:auto;max-width:24ch;margin:.3rem auto .8rem}
.cta-banner .lead{grid-column:auto;margin:0 auto 1.6rem;max-width:54ch}
.cta-banner__cta{grid-column:auto;justify-content:center;margin-top:0}
@media (max-width:680px){
.cta-banner__inner{
background-image:linear-gradient(180deg,rgba(15,30,69,.94) 0%,rgba(15,30,69,.76) 48%,rgba(30,58,138,.38) 100%),url('../images/cta-family-support-mobile.webp');
background-color:var(--navy);background-position:center,center bottom;
background-size:cover,contain;background-repeat:no-repeat;min-height:520px
}
}
@media (max-width:480px){
.cta-banner__inner{
background-image: none!important;
}
}
.banner__phone{grid-column:auto;display:flex;align-items:center;justify-content:center;gap:.65rem;margin-top:1.4rem;color:#eef1f9}
.banner__phone-ic{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;border-radius:50%;
background:var(--blush);color:var(--navy)}
.banner__phone-ic svg{width:20px;height:20px}
.banner__phone-txt{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.banner__phone-txt>span{color:#d9e0f2;font-size:.85rem}
.banner__phone a{color:#fff;font-family:var(--font-display);font-weight:600;font-size:1.35rem;text-decoration:none;letter-spacing:.01em}
.banner__phone a:hover{color:var(--blush)}
/* ---------- 23. HERO — EDITORIAL REDESIGN --------------------------- */
/* Cinematic directional scrim: dark where text sits, clears over the subject. */
.hero__scrim{background:linear-gradient(100deg,rgba(15,30,69,.92) 0%,rgba(15,30,69,.72) 32%,rgba(15,30,69,.34) 68%,rgba(30,58,138,.12) 100%)}
.hero__inner{max-width:1000px;padding-left:clamp(2.6rem,7vw,6.5rem)}
/* Oversized, sentence-case editorial headline with an italic accent. */
.hero h1{font-family:var(--font-display);font-weight:400;color:#fff;text-transform:none;
font-size:clamp(2.3rem,5vw,4.4rem);line-height:1.03;letter-spacing:-.02em;max-width:19ch;margin:0}
.hero h1 em{font-style:italic;font-weight:500;color:var(--blush);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:.08em;border-radius:6px;
background:#7e9ef1;transform:scaleX(0);transform-origin:left;
animation:heroUnderline .85s cubic-bezier(.2,.7,.2,1) .55s forwards}
@keyframes heroUnderline{to{transform:scaleX(1)}}
.hero__sub{margin-top:1.3rem;max-width:50ch}
/* Vertical kicker rail on the left margin. */
.hero__kicker{position:absolute;left:clamp(.7rem,1.8vw,1.6rem);top:50%;z-index:2;margin:0;
writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);
font:700 .72rem/1 var(--font-body);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.7);
display:flex;align-items:center;gap:1.1rem}
.hero__kicker::after{content:"";width:1px;height:66px;background:rgba(255,255,255,.42)}
/* Scroll cue. */
.hero__scroll{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:2;
display:flex;flex-direction:column;align-items:center;gap:.5rem;color:rgba(255,255,255,.72);
font:700 .66rem/1 var(--font-body);letter-spacing:.22em;text-transform:uppercase}
.hero__scroll:hover{color:#fff}
.hero__scroll-line{width:1px;height:40px;background:linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,0));
animation:heroScroll 1.9s ease-in-out infinite}
@keyframes heroScroll{0%,100%{transform:scaleY(.55);transform-origin:top;opacity:.55}50%{transform:scaleY(1);opacity:1}}
/* Infinity mark inside the floating note. */
.hero__badge-mark{display:block;color:var(--blush);margin-bottom:.45rem}
.hero__badge-mark svg{width:46px;height:auto;fill:currentColor}
@media (prefers-reduced-motion:reduce){
.hero h1 em::after{transform:scaleX(1);animation:none}
.hero__scroll-line{animation:none}
}
@media (max-width:760px){
.hero__kicker,.hero__scroll{display:none}
.hero__inner{padding-inline:1rem; text-align: center;}
.hero__phone{
justify-content: center;
}
.hero h1{font-size:clamp(2.2rem,8.6vw,3.1rem);max-width:100%;line-height:1.05}
}
/* ---------- 24. EDITORIAL SYSTEM (home-wide) ------------------------ */
/* Signature italic-accent in headings (the move from the hero). */
h1 em,h2 em,h3 em{font-style:italic;font-weight:500;color:#7e9ef1}
.cta-banner h2 em,.page-hero h1 em,.page-hero h2 em,.hero h1 em{color:#7e9ef1;}
/* Bolder, tighter section headings. */
.section-head h2{font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.07;letter-spacing:-.015em}
.about__text h2,.skills__text h2{font-size:clamp(2rem,3.4vw,3rem);line-height:1.06;letter-spacing:-.015em; margin-bottom: 1rem;}
/* Services: giant editorial index numbers. */
.svc-index{font-family:var(--font-display);font-weight:600;line-height:.8;
font-size:clamp(3rem,5.5vw,5rem);color:var(--blush);opacity:.92;margin-bottom:.5rem}
/* Split imagery: soft organic frame echoing the infinity curve. */
.about__media img,.skills__media img,.parent-support .about__media img{
border-radius:26px 26px 26px 84px}
/* Testimonials: a touch grander. */
.tst-slide blockquote{font-size:clamp(1.35rem,2.7vw,2rem);line-height:1.4}
/* ---------- 25. CREATIVE EFFECTS (home-wide) ------------------------ */
/* 25.1 Parallax media: clip box with headroom so the image can drift. */
.about__media,.skills__media,.parent-support .about__media{
position:relative;overflow:hidden;box-shadow:var(--shadow-md);
border-radius:26px 26px 26px 84px}
.about__media{aspect-ratio:6/5}
.skills__media,.parent-support .about__media{ aspect-ratio: auto;
height: 100%;}
.about__media img,.skills__media img,.parent-support .about__media img{
position:absolute;width:100%;height:calc(100% + 80px);
max-height:none;object-fit:cover;border-radius:0;box-shadow:none;will-change:transform}
/* Floating infinity badge over the imagery. */
.media-figure__mark{position:absolute;z-index:2;right:16px;bottom:16px;
width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
background:var(--blue);color:#fff;box-shadow:0 12px 26px rgba(15,30,69,.22)}
.media-figure__mark svg{width:34px;height:auto}
@media (max-width:900px){
.about__media,.skills__media,.parent-support .about__media{aspect-ratio:5/4}
}
/* 25.2 Team portraits: gentle zoom on hover. */
.team-card{overflow:hidden;border-radius:18px;transition:transform .45s ease,box-shadow .45s ease}
.team-card img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.team-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.team-card:hover img{transform:scale(1.06)}
/* 25.3 How-It-Works: drawn infinity connector behind the steps. */
.steps-wrap{position:relative}
.steps-preview::before{display:none}
/* Height matches the viewBox 1:1, so y=35 in the path is the wave's centreline.
Offset puts that centreline through the middle of the number circles:
.step padding-top (1.4rem) + half of the 48px circle − 35. */
.steps-line{position:absolute;top:calc(1.4rem - 11px);left:0;width:100%;height:70px;z-index:0;
pointer-events:none;overflow:visible}
.steps-line .draw-path{filter:drop-shadow(0 2px 4px rgba(230,162,174,.35))}
.steps-preview{z-index:1}
.steps-preview .step__n{position:relative;z-index:1}
@media (max-width:900px){.steps-line{display:none}}
/* 25.4 Why cards: lift on hover. */
.why-item{transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease}
.why-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
/* 25.5 Insurance: full-bleed color moment. Tighter block than a standard
section — the copy is short and the proof points now sit on one row. */
.insurance--moment{position:relative;overflow:hidden;
background:radial-gradient(130% 150% at 12% 0%,var(--blue) 0%,var(--navy) 68%);
color:#fff;padding-block:clamp(2.75rem,5.5vw,4.5rem)}
.insurance--moment .fine-print{margin-top:.2rem}
.insurance--moment .insurance__cta{margin-top:1.4rem}
/* Colour only — the pill background/border here was left over from when
eyebrows were chips, and it read as a stray box on the dark panel. */
.insurance--moment .eyebrow{color:#fff}
.insurance--moment h2{color:#fff}
.insurance--moment h2 em{color:var(--blush)}
.insurance--moment .lead,
.insurance--moment .check-list li,
.insurance--moment .fine-print{color:rgba(255,255,255,.84)}
.insurance--moment .check-list li::before{background:var(--blush)}
.insurance--moment .btn--secondary{color:#fff;border-color:rgba(255,255,255,.55);background:transparent}
.insurance--moment .btn--secondary:hover{background:rgba(255,255,255,.12);border-color:#fff}
.insurance__inner{position:relative;z-index:1}
.insurance__watermark{position:absolute;right:-30px;bottom:-70px;z-index:0;
color:#fff;opacity:.06;pointer-events:none;line-height:0}
.insurance__watermark svg{width:min(70vw,640px);height:auto}
/* 25.55 Service areas: highlighted, clickable phone number in the note. */
.areas-note__tel{font-family:var(--font-display);font-weight:600;color:var(--blue);white-space:nowrap}
.areas-note__tel:hover{color:var(--rose)}
/* 25.6 Service areas: scrolling marquee band. */
.areas-marquee{overflow:hidden;margin:0 0 1.8rem;padding:.3rem 0;
-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.areas-marquee__track{display:inline-flex;white-space:nowrap;will-change:transform;
animation:areasMarquee 34s linear infinite}
.areas-marquee:hover .areas-marquee__track{animation-play-state:paused}
.areas-marquee__track span{display:inline-flex;align-items:center;padding-right:2.6rem;
font-family:var(--font-display);font-style:italic;font-weight:500;
font-size:clamp(1.1rem,2vw,1.7rem);color:var(--navy);opacity:.5}
.areas-marquee__track span::after{content:"\221E";margin-left:2.6rem;
font-style:normal;color:var(--blush);opacity:.85}
@keyframes areasMarquee{to{transform:translateX(-50%)}}
/* 25.7 Testimonials: oversized quote mark behind the slide. */
.tst-slider{position:relative;padding-top:1.6rem}
.tst-quote{position:absolute;top:-.12em;left:50%;transform:translateX(-50%);z-index:0;
font-family:var(--font-display);font-weight:600;line-height:1;
font-size:clamp(6rem,15vw,12rem);color:var(--blush);opacity:.16;pointer-events:none}
.tst-slide{position:relative;z-index:1}
/* 25.8 Respect reduced-motion for the always-on animations. */
@media (prefers-reduced-motion:reduce){
.areas-marquee__track{animation:none}
.team-card,.team-card img,.why-item{transition:none}
}
/* ---------- 27. SECTION REDESIGN PASS ------------------------------ */
/* 27.1 Empathy — a calm, centered editorial breath. */
/* Wider measure: at 720px the headline broke to three lines and the lead to
six, which made a short passage feel tall. */
.empathy{padding-block: var(--padding-section)}
.empathy__inner{max-width:1040px;margin-inline:auto;display:flex;flex-direction:column;
align-items:center;text-align:center;gap:.85rem;transform:none}
.empathy__mark{display:block;width:58px;line-height:0;color:var(--blue);padding:0;margin:0}
.empathy__mark svg{width:100%;height:auto;fill:currentColor}
.empathy .eyebrow{margin:0}
.empathy h2{margin:0;font-size:clamp(2rem,4vw,3.15rem);line-height:1.08;letter-spacing:-.015em}
.empathy__script{margin:.1rem 0 0;font-size:clamp(1.9rem,3.6vw,2.5rem);line-height:1}
/* Overrides the global 62ch cap on .lead so the paragraph uses the full measure. */
.empathy .lead{margin:.35rem auto 0;max-width:none}
.empathy .btn{margin-top:.7rem}
/* 27.2 Why Aspire — editorial split: sticky intro + brand-icon reasons. */
.why__layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
gap:clamp(2rem,5vw,4.5rem);align-items:start}
.why__intro{position:sticky;top:calc(var(--nav-h,150px) + 1.2rem)}
.why__intro .eyebrow{margin-bottom:1rem}
.why__intro h2{font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.08;letter-spacing:-.015em;margin:0 0 1rem}
.why__intro .lead{margin:0}
.why-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.why-list .why-item{display:flex;gap:1.1rem;align-items:flex-start;
padding:1.5rem 0;background:transparent;border:0;border-bottom:1px solid var(--hairline);
border-radius:0;box-shadow:none;transform:none}
.why-list .why-item:first-child{padding-top:0}
.why-list .why-item:last-child{border-bottom:0;padding-bottom:0}
.why-list .why-item:hover{transform:none;box-shadow:none}
.why-item__ic{width:34px;height:34px;flex-shrink:0;margin-top:.15rem}
.why-item__txt h3{font-size:1.2rem;margin:0 0 .3rem;color:var(--navy)}
.why-item__txt p{margin:0;color:var(--muted)}
/* 27.3 Team — premium portrait cards with an overlaid language chip. */
.team-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}
.team-card{overflow:hidden;border-radius:20px;background:#fff;border:1px solid var(--hairline);
text-align:left;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.team-card__photo{position:relative;margin:0;overflow:hidden;aspect-ratio:4/3}
.team-card__photo img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;
max-height:none;margin:0;border-radius:0;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.team-card:nth-child(1) .team-card__photo img{object-position:center 31%}
.team-card:nth-child(2) .team-card__photo img{object-position:center 29%}
.team-card:nth-child(3) .team-card__photo img{object-position:center 27%}
.team-card:hover .team-card__photo img{transform:scale(1.035)}
.team-card__lang{position:absolute;left:.9rem;bottom:.9rem;z-index:1;
background:rgba(255,255,255,.92);backdrop-filter:blur(4px);color:var(--sage);
font-weight:700;font-size:.74rem;letter-spacing:.02em;padding:.35rem .7rem;border-radius:999px;
box-shadow:0 4px 14px rgba(15,30,69,.14)}
.team-card__body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1 1 auto}
.team-card__body h3{font-size:1.35rem;margin:0 0 .15rem}
.team-card .team-role{color:var(--blue);font-weight:700;margin:0 0 .1rem}
.team-card .team-cred{font-size:.9rem;color:var(--muted);margin:0 0 .9rem}
.team-card .team-note{font-style:italic;color:var(--muted);margin:0;padding-top:.9rem;
border-top:1px solid var(--hairline);line-height:1.55}
@media(max-width: 768px){
.team-card__body{
text-align: center;
}
}
/* 27.4 FAQ — sticky editorial intro beside the accordion.
Centring an 820px accordion in a 1300px track left ~240px of dead gutter
either side; the intro column now occupies it and carries the CTA. */
.faq__layout{display:grid;grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
gap:clamp(2rem,5vw,4.5rem);align-items:start}
.faq__intro{position:sticky;top:calc(var(--nav-h,150px) + 1.2rem)}
.faq__intro h2{font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.08;letter-spacing:-.015em;margin:0 0 1rem}
.faq__intro .lead{margin:0}
.faq__aside{margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid var(--hairline)}
.faq__aside-t{font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--navy);margin-bottom:.35rem}
.faq__aside-b{margin-bottom:1.1rem;font-size:.95rem}
.faq__aside .btn{width:100%;max-width:280px}
.faq__aside-tel{display:block;margin-top:.9rem;font-family:var(--font-display);font-weight:600;
font-size:1.35rem;color:var(--blue)}
.faq__aside-tel:hover{color:var(--rose)}
.faq__main{min-width:0;
height: 100%;
display: flex;
align-items: center;
}
/* Category picker: a vertical menu in the intro column. The four labels run
114 characters in English and 132 in Spanish, so a single horizontal row
can't hold them at a readable size without truncating the copy.
Each option is a full card with surface, border and an always-visible
chevron so it plainly reads as a clickable control. */
.faq-tabs{display:flex;flex-direction:column;gap:.55rem;max-width:none;margin:1.8rem 0 0}
.faq-tab{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;
text-align:left;background:#fff;border:1.5px solid var(--hairline);border-radius:14px;
padding:.9rem 1.1rem;font-family:var(--font-body);font-weight:600;font-size:.95rem;line-height:1.3;
color:var(--navy);cursor:pointer;box-shadow:var(--shadow-sm);
transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease}
.faq-tab::after{content:"";width:18px;height:18px;flex-shrink:0;background:currentColor;opacity:.55;
transition:opacity .2s ease,transform .25s ease;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.faq-tab:hover{border-color:var(--blue);color:var(--blue);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.faq-tab:hover::after{opacity:1;transform:translateX(3px)}
.faq-tab.active{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:var(--shadow-md)}
.faq-tab.active::after{opacity:1;transform:translateX(3px)}
.faq-panels{max-width:none;margin:0; width: 100%;}
.faq__list{max-width:none}
.faq__item{background:#fff;border:1px solid var(--hairline);border-radius:14px;margin-bottom:.5rem;overflow:hidden;
transition:border-color .2s ease,box-shadow .2s ease}
.faq__item[open]{border-color:var(--blush);box-shadow:var(--shadow-sm)}
.faq__item summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
gap:1rem;padding:.95rem 1.25rem;font-family:var(--font-display);font-weight:600;font-size:1.04rem;color:var(--navy)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";display:grid;place-items:center;flex-shrink:0;
width:28px;height:28px;border-radius:50%;background:var(--cream-2);color:var(--blue);
font-size:1.25rem;line-height:1;transition:background .2s ease,color .2s ease,transform .2s ease}
.faq__item[open] summary::after{content:"\2212";background:var(--blue);color:#fff;transform:none}
.faq__a{padding:0 1.25rem 1.1rem}
.faq__a p{margin:0;color:var(--muted);line-height:1.6}
/* 27.4b Contact — the intro column used to run out of content halfway down
the form, leaving a tall empty block. It now carries proof points and a
phone card, and both columns stay in step. */
.contact__points{margin:1.5rem 0 0}
.contact__points li{margin-bottom:.6rem}
.contact__call{display:flex;align-items:center;gap:.85rem;margin-top:1.7rem;
background:var(--cream-2);border:1px solid var(--hairline);border-radius:var(--radius);padding:1rem 1.2rem}
.contact__call-ic{display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;border-radius:50%;
background:var(--blush);color:var(--navy)}
.contact__call-ic svg{width:22px;height:22px}
.contact__call-txt{display:flex;flex-direction:column;line-height:1.3}
.contact__call-txt>span{font-size:.88rem;color:var(--muted)}
.contact__call-txt a{font-family:var(--font-display);font-weight:600;font-size:1.4rem;color:var(--navy)}
.contact__call-txt a:hover{color:var(--blue)}
.contact__es{margin-top:1rem}
/* Fills the tail of the intro column so it finishes level with the form
instead of leaving a tall gap. Same organic frame as the other split media. */
.contact__media{margin:1.6rem 0 0;overflow:hidden;border-radius:26px 26px 26px 84px;
box-shadow:var(--shadow-md)}
/* height:auto is required — the img's height attribute would otherwise win
over aspect-ratio and the crop would ignore the ratio entirely. */
.contact__media img{display:block;width:100%;height:auto;aspect-ratio:16/9;
object-fit:cover;object-position:center 32%}
#contact h2{
margin-bottom: 1rem;
}
@media (max-width:900px){.contact__media{display:none}}
/* 27.5 Service Areas — transparent editorial map sitting directly on the
section. The generated illustration is decorative; native SVG markers
remain interactive and accessible above it. */
.amap{max-width:700px;margin:0 auto;position:relative;
display: flex;
flex-direction: column;
align-items: center;
}
.amap__svg{width:100%;height:auto;overflow:visible}
.amap__hint{text-align:center;margin-top:.6rem}
.amap__art{pointer-events:none}
/* Familiar location pins in the Aspire palette, tip anchored to each city. */
.amap__pin{cursor:pointer;outline:0}
.amap__body{fill:#fff;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.amap__dot{fill:var(--blue)}
/* No transform-box/origin here on purpose: the group's own origin is the
city point, so the attribute transform and the hover scale both grow the
pin upward from its tip. Overriding the origin detaches pins from cities. */
.amap__mark{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.amap__pin:hover .amap__mark,
.amap__pin:focus .amap__mark{transform:scale(2.85) translate(-12px,-20.6px)}
.amap__pin--home:hover .amap__mark,
.amap__pin--home:focus .amap__mark{transform:scale(3.25) translate(-12px,-20.6px)}
.amap__pin:hover .amap__body,
.amap__pin:focus .amap__body{fill:var(--blush);stroke:var(--rose)}
.amap__pin:hover .amap__dot,
.amap__pin:focus .amap__dot{fill:var(--navy)}
/* Katy is the home base: filled, slightly bolder, label always on. */
.amap__pin--home .amap__body{fill:var(--blue);stroke:var(--blue)}
.amap__pin--home .amap__dot{fill:#fff}
/* Name tags fade up on hover / keyboard focus. */
.amap__label{opacity:0;pointer-events:none;
transform:translateY(7px);transition:opacity .25s ease,transform .25s ease}
.amap__label rect{fill:#fff;stroke:var(--hairline);stroke-width:1.5}
.amap__label text{fill:var(--navy);font-family:var(--font-body);font-size:19px;font-weight:700;
text-anchor:middle;letter-spacing:.01em}
.amap__pin:hover .amap__label,
.amap__pin:focus .amap__label{opacity:1;transform:translateY(0)}
.amap__pin--home .amap__label{opacity:1;transform:none}
.amap__pin--home .amap__label rect{fill:var(--navy);stroke:var(--navy)}
.amap__pin--home .amap__label text{fill:#fff}
.amap__pin:focus-visible .amap__body{stroke-width:2.4}
@media (prefers-reduced-motion:reduce){
.amap__mark,.amap__label{transition:none}
}
/* Invisible, generous hit area so markers are easy to hover and tap. */
.amap__hit{fill:transparent}
@media (max-width:720px){
/* A 1000-unit map squeezed into a phone makes unreadable pins, so the
illustration keeps a workable size and scrolls sideways instead. */
.amap{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
padding-bottom:.4rem;scrollbar-width:thin}
.amap__body{stroke-width:2}
}
@media (max-width:900px){
.why__layout{grid-template-columns:1fr;gap:1.8rem}
.why__intro{position:static}
/* Flatten the intro so its children become grid items; that lets the CTA
drop below the answers instead of sitting between the tabs and them.
Gap goes to 0 because the children carry their own vertical rhythm. */
.faq__layout{grid-template-columns:1fr;gap:0}
.faq__intro{display:contents}
.faq__main{margin-top:1.8rem}
.faq__aside{order:1;margin-top:2rem;padding-top:1.5rem}
.faq__aside .btn{max-width:none}
}
@media(max-width:768px){
.why__layout{
text-align: center;
}
.faq__layout{
text-align: center;
.eyebrow{
justify-content: center;
}
}
}
@media (max-width:560px){
.team-grid{grid-template-columns:1fr}
}
/* ---------- 28. BUTTON + VALUES REFINEMENTS ------------------------- */
/* 28.1 Homepage hero: inverted buttons so they read against the video. */
.hero .hero__cta .btn--primary{background:#fff;color:var(--navy);border-color:#fff}
.hero .hero__cta .btn--primary:hover{background:#fff;color:var(--blue)}
.hero .hero__cta .btn--secondary{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.7)}
.hero .hero__cta .btn--secondary:hover{background:rgba(255,255,255,.20);color:#fff;border-color:#fff}
/* 28.2 Secondary buttons on dark panels keep the outline, inverted to white. */
.cta-banner .btn--secondary,.insurance--moment .btn--secondary{
background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.6)}
.cta-banner .btn--secondary:hover,.insurance--moment .btn--secondary:hover{
background:rgba(255,255,255,.20);color:#fff;border-color:#fff}
/* 28.3 Values copy holds up over the now-visible photo. */
.values-panel.is-active .values-panel__title{text-shadow:0 2px 12px rgba(4,9,26,.6)}
.values-panel__body p,
.values-accordion .values-panel:nth-child(5).is-active .values-panel__body p{
color:#fff;text-shadow:0 2px 10px rgba(4,9,26,.7)}
/* ---------- 29. RESPONSIVE SAFETY + SUBPAGE HERO FRAMING ----------- */
/* Keep subpage copy on the editorial side so the family scene remains
visible. The image begins below the overlay navigation and keeps its full
vertical composition instead of being enlarged until most of it is cropped. */
body.subpage .page-hero{
min-height:clamp(560px,56vw,680px);display:flex;align-items:center;
background-color:var(--navy);
background-size:auto calc(100% - var(--nav-h,150px));
background-position:right bottom
}
.page-hero::before{
background:linear-gradient(90deg,rgba(15,30,69,.97) 0%,rgba(15,30,69,.88) 34%,rgba(15,30,69,.48) 58%,rgba(15,30,69,.08) 100%)}
.page-hero h1{max-width:16ch}
.page-hero .lead{max-width:48ch;margin-top:1rem}
/* Preserve the nine-pixel visual dots while giving each carousel control a
comfortable keyboard/touch target. */
.tst-dots{gap:0}
.tst-dot,.tst-dot.active{
position:relative;display:grid;place-items:center;width:44px;height:44px;
border-radius:50%;background:transparent
}
.tst-dot::before{
content:"";width:9px;height:9px;border-radius:50%;background:var(--hairline);
transition:background .2s
}
.tst-dot.active::before{background:var(--blue)}
/* The portrait crops are only appropriate for phones. Tablets retain the
wide art direction, which protects faces and shows the complete interaction. */
@media (min-width:601px) and (max-width:820px){
.page-hero--how{background-image:url('../images/how-hero-intake.webp')}
.page-hero--resources{background-image:url('../images/resources-hero-family.webp')}
}
@media (max-width:600px){
body.subpage .page-hero{
min-height:720px;align-items:flex-start;background-size:100% auto;
background-position:center bottom;padding-bottom:2rem
}
.page-hero--how{background-image:url('../images/how-hero-intake-mobile.webp')}
.page-hero--resources{background-image:url('../images/resources-hero-family-mobile.webp')}
.page-hero::before{
background:linear-gradient(180deg,rgba(15,30,69,.98) 0%,rgba(15,30,69,.96) 38%,rgba(15,30,69,.72) 55%,rgba(15,30,69,.12) 78%,rgba(15,30,69,0) 100%)}
.page-hero h1{
max-width:100%;font-size:clamp(2.15rem,10vw,2.65rem);line-height:1.05;
text-wrap:wrap;overflow-wrap:break-word
}
.page-hero h1 em{white-space:normal}
.page-hero .lead{max-width:34ch;font-size:1rem;line-height:1.6}
}
@media (max-width:720px){
/* Long translated accent phrases must be allowed to wrap on small screens. */
.hero h1 em{white-space:normal}
/* Both actions share the viewport evenly and remain inside safe-area insets. */
.mobile-bar{
width:100%;max-width:100vw;gap:.5rem;
padding:.65rem max(.65rem,env(safe-area-inset-right))
calc(.65rem + env(safe-area-inset-bottom))
max(.65rem,env(safe-area-inset-left))
}
.mobile-bar .btn{
flex:1 1 0;min-width:0;padding:.72rem .35rem;font-size:clamp(.75rem,3.3vw,.88rem);
min-height:44px;line-height:1.2;text-align:center;white-space:normal
}
.site-footer a,.faq__aside-tel{display:flex;align-items:center;}
.faq__aside-tel{
justify-content: center;
}
.contact__grid{
text-align: center;
}
.page-hero{
text-align: center;
}
}
/* ---------- 29. HOW IT WORKS — PHASED STEP SECTIONS ------------------ */
/* Replaces the single drawn roadmap with separate phase sections that use
the site's editorial vocabulary (centred section-head + numbered rows),
so the page reads cohesively with the rest of the site. */
.hiw-steps{max-width:820px;margin:2.6rem auto 0;display:flex;flex-direction:column}
.hiw-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 1.7rem;align-items:start;
padding:1.7rem 0;border-bottom:1px solid var(--hairline)}
.hiw-step:last-child{border-bottom:0}
.hiw-step__n{font-family:var(--font-display);font-weight:600;line-height:.82;
font-size:clamp(2.1rem,3.6vw,2.9rem);color:var(--blush);opacity:.92}
.hiw-step__body h3{font-size:clamp(1.2rem,2vw,1.5rem);margin:.15rem 0 .5rem;color:var(--navy)}
.hiw-step__body p{margin:0;color:var(--muted)}
.hiw-step__body .rm-note{margin-top:.85rem}
.hiw-phase .roadmap-close{margin-top:2.6rem}
@media (max-width:560px){
.hiw-step{grid-template-columns:auto minmax(0,1fr);gap:0 1.1rem;padding:1.4rem 0}
.hiw-step__n{font-size:1.9rem}
}
.hiw-step{
position:relative;
border-radius:18px;
transition:
transform .35s ease,
background-color .35s ease,
box-shadow .35s ease,
padding .35s ease;
}
.hiw-step__n{
transition:
color .35s ease,
transform .35s ease,
opacity .35s ease;
}
.hiw-step__body h3{
transition:
color .35s ease,
transform .35s ease;
}
.hiw-step__body p{
transition:
color .35s ease,
transform .35s ease;
}
@media (hover:hover){
.hiw-step:hover{
background:#F4EDE5;
transform:translateX(8px);
box-shadow:
0 14px 34px #c96d7e29;
padding-left:1rem;
padding-right:1rem;
}
.section--cream2 .hiw-step:hover{
background:
linear-gradient(
90deg,
rgba(255,255,255,.95),
rgba(249,246,242,.95)
);
transform:translateX(8px);
box-shadow:
0 14px 34px #c96d7e29;
padding-left:1rem;
padding-right:1rem;
}
}
.hiw-step::before{
content:"";
position:absolute;
left:0;
top:22px;
bottom:22px;
width:4px;
border-radius:20px;
background:var(--rose);
transform:scaleY(.4);
opacity:0;
transition:.35s;
}
.hiw-step:hover::before{
opacity:1;
transform:scaleY(1);
}
@media (hover:hover){
.hiw-step:hover .hiw-step__n{
color:var(--rose);
transform:
translateX(4px)
scale(1.05);
opacity:1;
}
}
@media (hover:hover){
.hiw-step:hover h3{
color:var(--rose);
transform:translateX(3px);
}
}
@media (hover:hover){
.hiw-step:hover p{
color:var(--body);
transform:translateX(3px);
}
}
.hiw-step::after{
content:"";
position:absolute;
inset:0;
border-radius:18px;
background:
linear-gradient(
90deg,
rgba(43,86,181,.035),
transparent 45%
);
opacity:0;
transition:.35s;
pointer-events:none;
}
.hiw-step:hover::after{
opacity:1;
}
/* ---------- 30. MOBILE NAV, STICKY HEADER + FOOTER CORRECTIONS ----- */
@media (max-width:1000px){
/* The toggle is painted after the open drawer so its three lines can become
a visible, tappable close icon. */
.nav__menu{z-index:101}
.nav-toggle{position:relative;z-index:102}
/* html is the actual scrolling element on this page, so the lock belongs
here, not on body — locking both breaks the sticky header's stuck
position and drags the close (X) button off-screen with the page. */
html.nav-open{overflow:hidden}
/* The header's translucent backdrop-filter turns it into a containing block
for the position:fixed drawer, trapping it below the topbar. Drop it while
the menu is open so the drawer covers the full viewport height. */
body.nav-open .site-header{backdrop-filter:none;-webkit-backdrop-filter:none}
/* Dim the rest of the page behind the drawer via an oversized shadow scrim
(paints behind the panel, so the white drawer background stays intact). */
body.nav-open .nav__menu{box-shadow:0 0 0 100vmax rgba(9,17,42,.45)}
/* The drawer sits on white, so the secondary action needs a dark label even
when the homepage header is still in its transparent state. */
body.nav-open .site-header .nav__menu .nav__cta .btn--ghost{
color:var(--navy);border-color:var(--blue);background:#fff
}
body.nav-open .site-header .nav__menu .nav__cta .btn--ghost:hover{
color:var(--blue);border-color:var(--blue);background:var(--cream)
}
}
/* On phones the drawer is full-width, so it never clips the logo or leaves a
sliver of the page beside it. */
@media (max-width:600px){
.nav__menu{width:100%;max-width:none}
}
@media (max-width:720px){
/* `overflow-x:hidden` on the page root creates a competing scroll container
in mobile Safari. `clip` prevents horizontal spill without breaking the
sticky header. */
html,body{max-width:100%;overflow-x:clip}
.site-header{position:sticky;top:var(--size-top-header);z-index:110}
.mobile-bar .btn--ghost{
color:var(--navy);border-color:var(--blue);background:#fff
}
.mobile-bar .btn--ghost:hover{
color:var(--blue);border-color:var(--blue);background:var(--cream)
}
}
@media (max-width:520px){
.site-footer .footer-grid{justify-items:center;text-align:center}
.site-footer .footer-col{width:100%;text-align:center; display: flex; flex-direction: column; justify-content: center;}
.site-footer .footer-logo,
.site-footer .footer-col--brand p{margin-inline:auto}
.site-footer .footer-col a{justify-content:center}
.footer-bottom{flex-direction:column;align-items:center;gap:0;text-align:center}
.footer-credit{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:.3rem}
.site-footer .footer-credit a{display:inline-flex;min-height:44px;margin:0}
}
/* ---------- INSURANCE — ACCEPTED-PLAN LOGO STRIP -------------------- */
/* Official insurer logos on white chips so brand colours read correctly
against the dark insurance band. */
.ins-logos{margin:1.9rem 0 .2rem}
.ins-logos__label{font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
color:rgba(255,255,255,.68);text-align:center;margin-bottom:1rem}
.ins-logos__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:1rem;
list-style:none;margin:0;padding:0}
.ins-logo{display:flex;align-items:center;justify-content:center;background:#fff;
border-radius:14px;padding:1rem 1.6rem;min-width:150px;min-height:70px;box-shadow:var(--shadow-sm)}
.ins-logo img{width:auto;object-fit:contain;display:block}
.ins-logo--aetna img{height:26px}
.ins-logo--bcbs img{height:46px}
@media (max-width:420px){
.ins-logo{min-width:0;flex:1 1 45%;padding:.9rem 1.1rem}
}
/* Feedback 7-23: no pink text/logo in the empathy area below the hero. */
.empathy h2 em{color:var(--navy)}
/* Contact Form 7 */
.wpcf7-spinner{
display: none;
}
.wpcf7-not-valid-tip{
color: var(--rose);
}
.wpcf7-response-output{
border-radius: var(--radius);
border-color: var(--hairline) !important;
color: var(--rose);
border: 1px solid var(--hairline) !important;
background: var(--cream-2);
padding-block: .4rem;
}
.field--acceptance input[type="checkbox"]{
appearance: none;
-webkit-appearance: none;
width: auto;
height: 20px;
margin: .15rem 0 0;
border: 2px solid var(--blue);
border-radius: 5px;
background: #fff;
cursor: pointer;
position: relative;
transition: .2s;
padding: 8px;
}
.field--acceptance input[type="checkbox"]:checked{
background: var(--blue);
}
.field--acceptance input[type="checkbox"]:checked::after{
content: "";
position: absolute;
left: 6px;
top: 2px;
width: 4px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item label{
display: flex;
gap: 6px;
font-weight: 400;
button{
border: none;
background: transparent;
outline: none;
cursor: pointer;
font-weight: 600;
padding: 0px;
color: var(--blue);
transition: all .3s ease-in;
&:hover{
color: var(--navi);
}
}
}
.wpcf7-list-item{
margin: 0px;
}
@media(max-width:400px){
.btn{
max-width: 100%;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-inline: 0px;
font-size: 15px;
padding-left: 0px;
padding-right: 0px;
}
.svc-stack__body{
padding-inline: 10px;
}
}
.skills-list, .why-list, .check-list.contact__points, .res-feature-list{
text-align: start;
}
.faq-tab.active{
text-align: center;
justify-content: center;
&::after{
display: none;
}
}
form .field{
text-align: start;
}
.nav__cta{
display: none;
}
}
.page-how-it-works #content .section-head{
margin-bottom: 0px;
}
.page-how-it-works .section-cta, .page-resources .section-cta{
margin-top: 0px;
}
.btn-search{
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 50%;
background: var(--cream-2);
color: var(--blue);
font-size: 1rem;
transition: background .25s ease, color .25s ease, transform .25s ease;
border: none;
outline: none;
aspect-ratio: 1 / 1;
cursor: pointer;
transition: all .3s ease;
&:hover{
background: var(--blue);
color: white;
}
}
.res-video{
display:flex;
text-decoration:none;
color:inherit;
cursor:pointer;
}
.fancybox__content video{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
object-fit:contain;
}
.fancybox__dialog{
max-width: 100vw !important;
}
.single-post-section .wp-block-list{
list-style: disc;
}
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf{
opacity: 0;
}
.VIpgJd-ZVi9od-aZ2wEe-OiiCO{
opacity: 0;
}
html.translated-ltr .privacy-policy-check-inglish{
display:none;
}
html:not(.translated-ltr) .privacy-policy-check-spanish{
display:none;
}
html.translated-ltr .hidden-spa{
display: none;
}
html.translated-ltr [data-i18n="hiw.p1.l"]{
display: none;
}
html:not(.translated-ltr) .lead[data-i18n="hiw.p1.l-spa"]{
display: none;
}
[data-i18n="rm.timeTitle"]{
margin-bottom: 1rem;
}
.footer-social{
display:flex;
align-items:center;
gap:14px;
margin-top:30px;
}
.footer-social a{
width:46px;
height:46px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.18);
border-radius:50%;
background:rgba(255,255,255,.03);
transition:
background .3s ease,
border-color .3s ease,
transform .3s ease,
box-shadow .3s ease;
}
.footer-social svg{
width:20px;
height:20px;
}
.footer-social svg path{
fill:#fff;
transition:fill .3s ease;
}
.footer-social a:hover{
background: var(--blush); /* Color de acento */
border-color:var(--blush);
transform:translateY(-4px);
box-shadow:0 12px 24px rgba(215,127,134,.35);
}
.footer-social a:hover svg path{
fill:#fff;
}
.footer-social a:focus-visible{
outline:none;
background:var(--blush);
border-color:var(--blush);
box-shadow:0 0 0 4px rgba(215,127,134,.25);
}
@media(max-width:768px){
.footer-social{
justify-content: center;
}
}
/**/
@media (max-width: 768px) {
#services .btn {
max-width: calc(100vw - 90px);
}
#services .btn font {
display: flex;
flex-wrap: wrap;
width: 100%;
text-wrap: balance;
text-align: center;
justify-content: center;
}
}