/* ============================================================
   ASPIRE Therapy and Wellness — Shared Site Stylesheet
   One system for every page: reset, tokens, typography, nav,
   buttons, section tones, cards, FAQ accordion.
   Page-specific CSS stays in each page's own <style> block.
   ============================================================ */

/* 1. Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',sans-serif;color:var(--text);background:var(--offwhite);overflow-x:hidden}

/* 2. Tokens */
:root{
  --blue:#2B3FE8;--violet:#7B2FD4;--magenta:#D42FA0;
  --dark:#0d0e1a;--white:#fff;--offwhite:#f8f7fc;--lavender:#ede9f8;
  --text:#1a1a2e;--muted:#6b6f8a;--border:#e4e1f0;
  --grad:linear-gradient(135deg,#2B3FE8 0%,#7B2FD4 50%,#D42FA0 100%);
  --grad-h:linear-gradient(90deg,#2B3FE8 0%,#7B2FD4 50%,#D42FA0 100%);
}

/* 3. Typography */
h1,h2,h3{font-family:inherit}
h2{font-size:clamp(28px,2.8vw,44px);font-weight:800;line-height:1.1;letter-spacing:-.022em;color:var(--text)}
.section-eyebrow{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:14px;display:inline-block}
.grad-text{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* 4. Nav + mobile hamburger overlay (identical boilerplate, every page) */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 52px;height:74px;background:rgba(43,63,232,0.97);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,0.12);box-shadow:0 2px 20px rgba(43,63,232,0.25)}
.nav-logo img{height:52px}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none}
.nav-links a{font-size:14px;font-weight:500;color:rgba(255,255,255,0.8);text-decoration:none;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-team-link{display:inline-flex;align-items:baseline;gap:4px}
.nav-team-a{height:16px;width:auto;vertical-align:baseline;position:relative;top:1px}
.nav-cta{background:#fff!important;color:var(--blue)!important;padding:10px 22px;border-radius:8px;font-weight:700!important}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.hamburger span{display:block;width:22px;height:2px;background:rgba(255,255,255,0.85);border-radius:2px}
.nav-dropdown{position:relative}
.nav-dropdown-menu{display:none;position:absolute;top:100%;left:-12px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:8px 0;min-width:200px;box-shadow:0 12px 32px rgba(26,26,46,0.14)}
.nav-dropdown:hover .nav-dropdown-menu{display:block}
.nav-dropdown-menu a{display:block;padding:10px 20px;font-size:13px;white-space:nowrap;color:var(--text)}
.nav-dropdown-menu a:hover{color:var(--violet);background:var(--offwhite)}
.nav-mega{display:none;position:absolute;top:100%;left:-12px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:32px 38px;box-shadow:0 16px 40px rgba(26,26,46,0.16);grid-template-columns:1fr 1fr;gap:60px;width:700px}
.nav-dropdown:hover .nav-mega{display:grid}
.nav-mega-title{font-size:20px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text);margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.nav-mega a{display:block;padding:11px 0;font-size:17px;color:var(--muted);text-decoration:none;transition:color .2s;white-space:nowrap}
.nav-mega a:hover{color:var(--violet)}
.nav-mega-sub{margin-top:22px;padding-top:16px;border-top:1px solid var(--border)}
.nav-mega-sub-title{font-size:16px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}

#mobile-menu-overlay{display:none;position:fixed;top:74px;left:0;right:0;bottom:0;background:#fff;z-index:10000;overflow-y:auto;padding:32px}
#mobile-menu-overlay.open{display:block}
#mobile-menu-overlay a{display:block;font-size:18px;font-weight:500;color:var(--text);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--border)}
#mobile-menu-overlay a:last-child{border-bottom:none}
#mobile-menu-overlay a.nav-cta{background:var(--grad);color:#fff!important;padding:14px 22px;border-radius:8px;font-weight:600;text-align:center;margin-top:16px;border-bottom:none}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
#mobile-menu-overlay .mm-section{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:20px 0 8px;margin-top:8px;border-top:1px solid var(--border)}
#mobile-menu-overlay a.mm-sub{padding-left:18px;font-size:16px;color:var(--muted);font-weight:500;border-bottom:1px solid var(--border)}

/* VISTAGE 2026 IMPACT AWARD BANNER (identical boilerplate, every page) */
.vistage-banner{position:fixed;top:0;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);color:var(--text);padding:11px 48px 11px 24px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:600;z-index:200;line-height:1.3}
.vistage-banner strong{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.vistage-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:var(--grad);border-radius:50%;flex-shrink:0}
.vistage-icon svg{width:13px;height:13px;fill:#fff}
.vistage-close{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;width:28px;height:28px;border-radius:4px;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;font-family:inherit}
.vistage-close:hover{background:var(--lavender);color:var(--text)}
body{padding-top:44px}
nav{top:44px!important}
.service-nav{top:118px!important}
#mobile-menu-overlay{top:118px!important}
@media(max-width:580px){.vistage-banner{font-size:12px;padding:9px 40px 9px 16px;gap:8px}.vistage-icon{width:18px;height:18px}.vistage-icon svg{width:11px;height:11px}}
body.banner-hidden .vistage-banner{display:none}
body.banner-hidden{padding-top:0!important}
body.banner-hidden nav{top:0!important}
body.banner-hidden .service-nav{top:74px!important}
body.banner-hidden #mobile-menu-overlay{top:74px!important}

/* 5. Buttons */
.btn-grad{display:inline-flex;align-items:center;gap:8px;background:var(--grad);color:#fff;padding:15px 32px;border-radius:10px;font-size:15px;font-weight:700;text-decoration:none;box-shadow:0 4px 20px rgba(123,47,212,.3);transition:opacity .2s,transform .15s;border:none;cursor:pointer;font-family:inherit}
.btn-grad:hover{opacity:.88;transform:translateY(-2px)}
.btn-outline{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--violet);color:var(--text);padding:14px 30px;border-radius:10px;font-size:15px;font-weight:600;text-decoration:none;background:none;cursor:pointer;font-family:inherit;transition:border-color .2s,box-shadow .2s,background .2s}
.btn-outline:hover{border-color:var(--violet);background:var(--lavender);box-shadow:0 4px 16px rgba(123,47,212,.15)}
.btn-outline-white{display:inline-flex;align-items:center;gap:8px;border:1.5px solid rgba(255,255,255,0.25);color:rgba(255,255,255,0.85);padding:14px 30px;border-radius:10px;font-size:15px;font-weight:600;text-decoration:none;background:none;cursor:pointer;font-family:inherit;transition:border-color .2s,color .2s}
.btn-outline-white:hover{border-color:rgba(255,255,255,0.7);color:#fff}

/* 6. Section backgrounds — plain, so content sections never paint their own
   color. Instead, one continuous "swoop" background layer sits behind the
   whole page (sections themselves have no background), plus purposeful
   color in buttons, headline accents, card stripes, accent-row borders,
   photo frames, and the one solid-gradient CTA panel each page ends on.
   See section 6a-6e below.
   Usage: wrap everything from right after </nav> through the section
   before the final CTA in:
     <div style="position:relative">
       <div class="swoop-backdrop" aria-hidden="true"><svg ...>...several <path> swoops...</svg></div>
       <div style="position:relative;z-index:1"> ...all the sections, each with NO background... </div>
     </div>
   Each swoop path is a single gentle arc (not a multi-bump wave), e.g.:
     <path d="M-100,120 Q720,-60 1540,160 L1540,340 Q720,140 -100,300 Z" fill="url(#ID)" opacity=".10"/>
   Space 3-5 of these down the full estimated page height, alternating the
   gradient's left-to-right color order for variety. Keep opacity low
   (.08-.12) so body copy over them stays readable. */
.section-light{background:var(--offwhite)}
.swoop-backdrop{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.swoop-backdrop svg{display:block;width:100%;height:100%}

/* Small contained dark accent (stat-highlight bars, inset cards) — NOT a full-bleed section background */
.accent-dark{background:var(--dark);border-radius:16px;position:relative;overflow:hidden}
.accent-dark::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(43,63,232,.18) 0%,rgba(212,47,160,.12) 100%);pointer-events:none}
.accent-dark>*{position:relative;z-index:1}

/* 6a. Heading underline accent bar — pairs with a two-tone or grad-text heading */
.heading-bar{width:56px;height:4px;border-radius:2px;background:var(--grad-h);margin:4px 0 20px}

/* 6b. Left-accent row — a list/row item with a colored left edge instead of an icon circle */
.accent-row{display:flex;align-items:center;gap:18px;background:var(--white);border-radius:10px;padding:18px 22px 18px 20px;border:1px solid var(--border);border-left:4px solid var(--blue);box-shadow:0 4px 16px rgba(123,47,212,.07)}
.accent-row.violet{border-left-color:var(--violet)}
.accent-row.magenta{border-left-color:var(--magenta)}

/* 6c. Gradient-bordered photo frame — replaces a blob/orb sitting behind a photo */
.photo-frame{padding:2px;border-radius:19px;background:var(--border);box-shadow:0 16px 40px rgba(123,47,212,.12)}
.photo-frame>*{border-radius:17px;overflow:hidden;display:block}

/* 6d. Solid-gradient CTA panel — the one bold color "moment" a page closes
   on. The wavy top edge is a clip-path on this SAME element (not a separate
   SVG stacked on top) — a curvy shape next to a flat-edged rectangle always
   reads as "two parts" even with perfectly matched colors, because there's
   a real seam between two elements. Clipping one element has no seam to see. */
.cta-grad{padding:130px 40px 72px;text-align:center;background:linear-gradient(180deg,#D42FA0 0%,#7B2FD4 55%,#2B3FE8 100%);clip-path:polygon(0% 48px,10% 56px,20% 62px,30% 66px,40% 68px,50% 68px,60% 66px,70% 62px,80% 56px,90% 48px,100% 38px,100% 100%,0% 100%)}
.cta-grad h2{color:#fff}
.cta-grad p{color:rgba(255,255,255,.85)}
.cta-grad .section-eyebrow{background:none;-webkit-text-fill-color:rgba(255,255,255,.85);color:rgba(255,255,255,.85)}
.cta-grad .btn-grad{background:#fff;color:var(--violet);box-shadow:none}
.cta-grad .btn-outline{border-color:rgba(255,255,255,.5);color:#fff}
@media(max-width:768px){.cta-grad{padding:100px 24px 48px}}

/* 7. Card system */
.card{background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:32px;position:relative;overflow:hidden;transition:box-shadow .2s,border-color .2s,transform .2s}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-h)}
.card:hover{box-shadow:0 8px 32px rgba(123,47,212,.1);border-color:#d4b8f5;transform:translateY(-3px)}
.card-dark{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:32px;position:relative;overflow:hidden}
.card-dark::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-h)}

/* 8. Section padding utility */
.section-pad{padding:96px 80px}
@media(max-width:1100px){
  nav{padding:0 24px} .nav-links{display:none} .hamburger{display:flex}
  .section-pad{padding:72px 32px}
}

/* Simple plain page banner (for single-hero utility pages like legal notices, blog index) */
.page-hero{background:var(--offwhite);padding:140px 80px 80px}
.page-hero h1{font-size:clamp(36px,4vw,58px);font-weight:800;color:var(--text);letter-spacing:-.025em;line-height:1.1}
@media(max-width:1100px){.page-hero{padding:120px 24px 60px}}

/* Footer (identical boilerplate, every page) */
footer{background:rgba(43,63,232,0.97)}
.footer-top{padding:52px 80px 44px;display:grid;grid-template-columns:200px 1fr auto;align-items:center;gap:40px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-logo img{height:48px}
.footer-phone{font-size:34px;font-weight:800;letter-spacing:-.02em;color:#fff;text-decoration:none}
.footer-social{display:flex;gap:12px}
.footer-social a{width:38px;height:38px;background:rgba(255,255,255,.14);border-radius:8px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);text-decoration:none;transition:background .2s,color .2s}
.footer-social a:hover{background:var(--violet);color:#fff}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding:24px 80px}
.footer-copy{font-size:13px;color:rgba(255,255,255,.55)}
.footer-legal{display:flex;gap:24px;list-style:none}
.footer-legal a{font-size:13px;color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s}
.footer-legal a:hover{color:rgba(255,255,255,.8)}
@media(max-width:1100px){
  .footer-top{grid-template-columns:1fr;padding:40px 32px 32px}
  .footer-bottom{padding:20px 32px;flex-direction:column;gap:12px;text-align:center}
}

/* 9. FAQ accordion (native <details>/<summary>, single-open via shared name attr) */
.faq-acc{border-top:1.5px solid var(--border)}
.faq-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 4px;font-size:16px;font-weight:700;color:var(--text)}
.faq-acc summary::-webkit-details-marker{display:none}
.faq-acc summary::after{content:'';flex-shrink:0;width:11px;height:11px;border-right:2px solid var(--violet);border-bottom:2px solid var(--violet);transform:rotate(45deg);transition:transform .2s;margin-top:-4px}
.faq-acc[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.faq-acc .faq-acc-body{padding:0 4px 24px;font-size:15px;line-height:1.8;color:var(--muted)}
.faq-acc .faq-acc-body a{color:var(--violet);text-decoration:none;font-weight:600}
.faq-acc .faq-acc-body a:hover{text-decoration:underline}