:root{
  --bg: #f6f8fb; --fg: #0f1d2a; --muted: #4b6476;
  --brand: #1e8aa5; --brand-2: #7ad1c2;
  --card: rgba(255,255,255,0.66); --stroke: rgba(17,35,51,0.12);
  --shadow: 0 10px 30px rgba(17,35,51,.12); --radius: 18px; --blur: 14px;
}
body.theme-dark{
  --bg: #0b0f14; --fg: #eaf2f7; --muted: #a9bac6;
  --brand: #2a7b83; --brand-2: #47c1af;
  --card: rgba(255,255,255,0.08); --stroke: rgba(255,255,255,0.15);
  --shadow: 0 12px 28px rgba(0,0,0,.35); --blur: 14px;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
::selection{background: rgba(30,138,165,.22)}
body{
  margin:0; color:var(--fg);
  font-family: Inter, ui-sans-serif, system-ui, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-feature-settings:"liga","calt","cv02","cv03","cv04","cv09","zero";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-size:16.5px; line-height:1.55;
  background:
    radial-gradient(900px 500px at 20% -10%, rgba(122,209,194,.16) 0%, transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(62,161,196,.16) 0%, transparent 55%),
    var(--bg);
  overflow-x:hidden;
  transition: background .4s ease, color .2s ease;
}
h1,h2,h3,h4{letter-spacing:-.01em}
h1{font-weight:800}
h2{font-weight:700}
h3,h4{font-weight:700}
p{margin:.6em 0}
ul,ol{padding-left:1.1rem; margin:.4rem 0 .8rem}
ul li{margin:.3em 0}
li::marker{color:var(--brand)}
a{color:var(--brand); text-decoration:none; position:relative}
a.underline-on-hover::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:linear-gradient(90deg,var(--brand),var(--brand-2));
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
a.underline-on-hover:hover::after{ transform:scaleX(1) }
img{max-width:100%; display:block}
.wrap{width:min(1180px, 92vw); margin-inline:auto; padding-inline:12px}
.row{display:flex; align-items:center; justify-content:space-between; gap:16px}
.bg .blob{position:fixed; filter:blur(28px); opacity:.6; mix-blend-mode:plus-lighter; z-index:-2}
.bg .b1{width:520px; height:520px; left:-120px; top:-120px; background: radial-gradient(circle at 30% 30%, var(--brand-2), transparent 60%), radial-gradient(circle at 70% 60%, var(--brand), transparent 60%); border-radius:50%}
.bg .b2{width:580px; height:580px; right:-160px; top:-80px; background: radial-gradient(circle at 30% 30%, var(--brand), transparent 60%), radial-gradient(circle at 70% 60%, var(--brand-2), transparent 60%); border-radius:50%}
.bg .b3{width:540px; height:540px; left:40%; bottom:-180px; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.25), transparent 60%), radial-gradient(circle at 70% 60%, rgba(255,255,255,.12), transparent 60%); border-radius:50%}
#noise{position:fixed; inset:0; z-index:-1; opacity:.04; pointer-events:none}
.glass{
  position: relative;
  background: var(--card);
  backdrop-filter: blur(var(--blur)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(130%);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.sheen::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0.25) 0%, transparent 55%); mix-blend-mode: screen; }
.accent{background: linear-gradient(90deg, var(--brand-2), var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent}
.accent-underline{background-image: linear-gradient(120deg, rgba(30,138,165,.25), rgba(122,209,194,.25)); box-decoration-break: clone; padding: 0 .2em; border-radius:.3em}
.btn, .social{ display:inline-grid; place-items:center; text-decoration:none; color:#fff;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; position:relative; overflow:hidden; will-change: transform, filter; }
.pill{border-radius:999px; padding:10px 16px}
.big{padding:14px 22px; font-weight:700}
.btn.primary{ background: linear-gradient(270deg, var(--brand), var(--brand-2)); background-size: 200% 200%;
  animation: gradientMove 6s ease infinite; box-shadow:0 10px 24px rgba(0,0,0,.15) }
@keyframes gradientMove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.btn.ghost{background: transparent; color:var(--brand); border:1px solid var(--stroke)}
.btn:hover, .social:hover{transform:translateY(-2px); filter:brightness(1.03)}
.btn:active, .social:active{transform:translateY(0); filter:brightness(.97)}
.btn:focus-visible, .social:focus-visible{outline:2px solid var(--brand-2); outline-offset:2px}
.rpl{ position:absolute; border-radius:50%; transform:scale(0); opacity:.5; background:radial-gradient(circle, rgba(255,255,255,.7), rgba(255,255,255,0)); animation:rpl .6s ease-out; pointer-events:none }
@keyframes rpl{ to{ transform:scale(6); opacity:0 } }
.magnetic{ will-change: transform; }
.hover-raise{ transition: transform .18s ease, box-shadow .18s ease }
.hover-raise:hover{ transform: translateY(-4px); box-shadow: 0 18px 38px rgba(0,0,0,.18) }

.nav{position:sticky; top:0; z-index:50; margin-top:12px; padding:10px 0; transition: box-shadow .2s ease, background .3s ease}
.nav.scrolled{box-shadow:0 10px 24px rgba(0,0,0,.12); background:rgba(255,255,255,.5)}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--fg); text-decoration:none}
.logo-img{height:42px; width:auto; object-fit:contain}
.brand-text{display:none}
.menu{display:flex; gap:22px; align-items:center; margin-left:auto}
.menu a{color:var(--fg); opacity:.88; text-decoration:none; font-weight:600}
.menu a.active{opacity:1}
.menu a.active::after{transform:scaleX(1)}
.burger{display:none; background:var(--card); border:1px solid var(--stroke); border-radius:10px; width:42px; height:38px; align-items:center; justify-content:center}
.burger span{display:block; width:22px; height:2px; background:var(--fg); margin:3px 0; border-radius:2px; transition:.2s}
.burger.active span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.switch{position:relative; width:64px; height:32px; margin-left:12px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto}
.switch input{display:none}
.switch .slider{position:absolute; inset:0; background:var(--card); border:1px solid var(--stroke); border-radius:999px; box-shadow:var(--shadow)}
.switch .slider::before{content:""; position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); transition: transform .25s ease;}
.switch .icon{position:absolute; font-size:14px; opacity:.8}
.switch .sun{left:8px}
.switch .moon{right:8px}
.switch input:checked + .slider::before{ transform: translateX(32px) }

.hero{padding:56px 0 18px}
.hero-grid{display:grid; grid-template-columns:1fr; gap:18px; align-items:center}
.display{font-size: clamp(30px, 4.6vw, 52px); line-height:1.08; margin:.1em 0 .2em}
.hero-line{margin:.2em 0}
.lead{color:var(--muted); font-size: clamp(17px, 2vw, 20px)}

.section{padding:56px 0}
.section-tight{padding-top:20px}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:16px}
.title{font-size: clamp(24px, 3.2vw, 36px); margin:0}
.muted{color:var(--muted)}
.center-text{text-align:center}
.strong-line{max-width:640px; margin-inline:auto}

.longform{padding:20px}
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px}
.grid.thirds{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr))}
.card{padding:18px; min-width:0}
.card h3{margin:0 0 8px}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.chip{padding:6px 10px; border-radius:999px; background:rgba(0,0,0,.04); border:1px solid var(--stroke); color:var(--brand); font-size:13px}
.offer-quick{margin:6px 0 14px}
.chip-link{display:inline-block; padding:8px 12px; border-radius:999px; border:1px solid var(--stroke); background:var(--card); color:var(--fg); text-decoration:none; font-weight:700}
.chip-link:hover{transform:translateY(-1px)}

.accordion{display:grid; gap:12px}
.acc summary{ list-style:none; cursor:pointer; padding:14px 16px; display:flex; align-items:center; gap:10px; font-weight:800; }
.acc summary::-webkit-details-marker{display:none}
.acc .num{width:28px; height:28px; display:inline-grid; place-items:center; border-radius:999px;
  background:linear-gradient(135deg, var(--brand-2), var(--brand)); color:white; font-size:14px; flex:0 0 auto}
.acc .acc-body{padding:0 16px 14px 16px}

/* Pill list (AAC + team) */
.pill-list{list-style:none; padding-left:0; margin:.4rem 0 .2rem; display:grid; gap:8px}
.pill-list li{
  padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,0.9); border:1px solid var(--stroke);
  font-size:14.5px;
}
body.theme-dark .pill-list li{background:rgba(255,255,255,0.04)}
.pill-list li::before{
  content:""; display:inline-block; width:8px; height:8px; border-radius:999px;
  margin-right:8px; background:radial-gradient(circle at 30% 30%, var(--brand-2), var(--brand));
}

/* Generic slider used for testimonials */
.slider .slides{display:flex; gap:12px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:8px}
.slide{scroll-snap-align:start; min-width:300px; padding:16px}
.quote{font-style:italic}
.dots{display:flex; gap:6px; justify-content:center; margin-top:10px}
.dot{width:9px; height:9px; border-radius:50%; background:rgba(30,138,165,.25)}
.dot.active{background:var(--brand)}

/* HERO photo slider */
.slider-hero{
  max-width: 960px;
  margin: 0 auto 24px auto;
}
.slider-hero .carousel{position:relative; overflow:hidden; border-radius:20px}
.slider-hero .track{display:flex; transition:transform .45s ease; will-change:transform}
.slider-hero .slide{min-width:100%; max-height:520px}
.slider-hero img{width:100%; height:100%; object-fit:cover}
.slider-hero .nav{position:absolute; top:50%; transform:translateY(-50%); border:1px solid var(--stroke); background:var(--card); border-radius:12px; width:40px; height:40px; display:grid; place-items:center; cursor:pointer}
.slider-hero .prev{left:10px} .slider-hero .next{right:10px}
.slider-hero .dots{position:absolute; left:0; right:0; bottom:10px; display:flex; gap:6px; justify-content:center}
.slider-hero .dots button{width:8px; height:8px; border-radius:50%; border:none; background:rgba(0,0,0,.25)}
.slider-hero .dots button.active{background:var(--brand)}

.home-text{margin-top:10px}

/* Social buttons */
.follow-list{list-style:none; padding:0; margin:16px 0 0 0; display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
.social{
  display:flex; align-items:center; gap:10px; padding:10px 16px; color:var(--fg);
  text-decoration:none; border:1px solid var(--stroke); background:var(--card); border-radius:999px
}
.icon-wrap{display:inline-flex; width:22px; height:22px}
.social svg{width:22px; height:22px}
.social .label{white-space:nowrap; font-weight:600}

/* Platform colors for icons */
.social.youtube svg{color:#ff0000; fill:#ff0000}
.social.instagram svg{color:#e1306c; fill:#e1306c}
.social.tiktok svg{color:#000000; fill:#000000}

/* Gallery */
.gallery{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:12px; margin-top:10px}
.g-item img{width:100%; height:220px; object-fit:cover; border-radius:16px}
#lightbox[hidden]{display:none !important}
#lightbox{position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.55); z-index:1000; padding:20px}
#lightbox img{max-width:min(92vw,1200px); max-height:86vh; border-radius:16px; transform:scale(.98); transition: transform .25s ease}
#lightbox:not([hidden]) img{transform:scale(1)}
.lb-close{position:absolute; top:16px; right:16px; font-size:28px; background:var(--card); border:1px solid var(--stroke); color:var(--fg); border-radius:10px; padding:6px 10px; cursor:pointer}

/* CTA */
.cta .duo{display:flex; align-items:center; justify-content:space-between; gap:16px}

/* Form */
form.glass{padding:18px}
.grid.form{grid-template-columns:1fr 1fr}
.field{display:grid; gap:8px}
.field > span{color:var(--muted); font-size:13px; font-weight:600}
input, select, textarea{
  width:100%; padding:12px 12px; border-radius:14px;
  border:1px solid var(--stroke); background:rgba(255,255,255,.82);
  color:var(--fg); outline:none; backdrop-filter: blur(6px);
  font-family: inherit; font-size: 16px;
}
body.theme-dark input, body.theme-dark select, body.theme-dark textarea{ background: rgba(255,255,255,.06) }
textarea{min-height:120px; resize:vertical}
.actions{display:grid; gap:10px; margin-top:12px}
.help{color:var(--muted); font-size:12px}
.success{display:none; padding:10px; border-radius:12px; background:rgba(122,209,194,.2); border:1px solid rgba(122,209,194,.5); color:#0f463e}
body.theme-dark .success{ background:rgba(71,193,175,.18); border-color:rgba(71,193,175,.4); color:#dff5ee}

.footer{display:flex; align-items:center; justify-content:space-between; gap:16px}
.to-top{position:fixed; right:16px; bottom:16px; width:42px; height:42px; border-radius:999px; border:1px solid var(--stroke); background:var(--card); color:var(--fg); box-shadow:var(--shadow); cursor:pointer; display:none}
.to-top.show{display:block}

/* Floating Contact Button */
.fab{
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  padding: 12px 16px; border-radius: 999px; font-weight: 800;
  background: linear-gradient(270deg, var(--brand), var(--brand-2)); color: white;
  border: 1px solid var(--stroke); box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.fab:hover{transform: translateY(-2px)}

#toast{
  position: fixed; right: 16px; bottom: 72px; max-width: 320px; padding: 12px 14px;
  border-radius: 14px; border: 1px solid var(--stroke); background: rgba(0,0,0,.7); color: white; display: none; box-shadow: var(--shadow);
}
body.theme-light #toast{ background: rgba(20,28,36,.82); }
body.theme-dark #toast{ background: rgba(240,245,250,.12); color: var(--fg); }

/* Team layout */
.team-card{margin-top:10px}
.team-layout{display:grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr); gap:18px}
.team-role{margin-top:4px}
.team-quote{margin-top:10px}
.small{font-size:13px}

/* Responsive */
@media (max-width: 1024px){
  .grid.form{grid-template-columns:1fr}
  .team-layout{grid-template-columns:1fr}
}
@media (max-width: 820px){
  .burger{display:inline-flex}
  .menu{
    position:fixed; top:62px; right:12px; left:12px; display:grid; gap:10px;
    border:1px solid var(--stroke); border-radius:14px; padding:12px; transform-origin:top right;
    transform: scale(.98); opacity:0; pointer-events:none; transition: transform .18s ease, opacity .18s ease;
  }
  body.theme-light .menu{ background: rgba(255,255,255,0.96); }
  body.theme-dark .menu{ background: rgba(15,19,24,0.93); }
  .menu.open{ transform: scale(1); opacity:1; pointer-events:auto }
  .menu a{padding:10px 12px; border-radius:10px; background:transparent}
  .nav-inner{gap:10px}
  .switch{margin-left:6px}
}
@media (max-width: 560px){
  .stats{grid-template-columns:1fr 1fr}
  .slider-hero{margin-bottom:18px}
}
@media (prefers-reduced-motion: no-preference){
  [data-animate]{opacity:0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease}
  [data-animate].in{opacity:1; transform:none}
  [data-animate="pop"]{transform:scale(.96);} [data-animate="pop"].in{transform:scale(1);}
  [data-animate="zoom-in"]{opacity:0; transform:scale(.96);} [data-animate="zoom-in"].in{opacity:1; transform:scale(1);}
}

.section-head.center-text{text-align:center;}
.center-text{text-align:center;}
.accordion.static-accordion{
  display:grid;
  gap:16px;
}
.acc-static .acc-head{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
}
.acc-static .acc-body{
  text-align:center;
}

.section .title,
.section .section-head.center-text .title,
.section .section-head.center-text .muted{
  text-align:center;
}
.section-head.center-text{ text-align:center; }
.center-text{ text-align:center; }
.field.full.center-text{
  max-width:520px;
  margin-inline:auto;
}

.btn-narrow{
  padding-inline:18px;
}

.nav-contact{
  flex:1 1 auto;
  display:flex;
  justify-content:center;
  align-items:center;
}
.nav-contact .small{
  font-size:0.78rem;
}
@media (max-width: 768px){
  .nav-contact{
    display:none;
  }
}

.center-text{text-align:center;}
.btn-narrow{padding:6px 18px;}
#contact .field{margin-inline:auto;max-width:500px;}


/* === Overrides for centered headings and 1-col Contact Form === */
.center-title, 
section h2, 
.section-head, 
#contact h2, 
#contact p,
#team h2, #team p,
#follow h2, #follow p,
#gallery h2, #gallery p,
.cta-center h2, .cta-center p {
    text-align:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* Contact form 1 column */
#contact form {
    max-width:640px !important;
    margin-inline:auto !important;
}

#contact form .grid,
#contact form .form-grid {
    display:block !important;
}

#contact form label {
    display:block;
    margin-bottom:14px;
}


/* === FORCE CENTER ALL MAIN SECTION HEADINGS === */
#services h2,
#services .title,
#approach h2,
#approach .title,
section[aria-labelledby="reviews"] h2,
#team h2,
#team .title,
#aac h2,
#aac .title,
#evaluation h2,
#evaluation .title,
.cta h2,
.cta .title,
#contact h2,
#contact .title {
    text-align:center !important;
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    display:block !important;
}

/* Also center subtitles */
#services p,
#approach p,
section[aria-labelledby="reviews"] p,
#team p,
#aac p,
#evaluation p,
.cta p,
#contact p {
    text-align:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
    display:block !important;
}


/* === FINAL FIX: center specific section headings on all breakpoints === */
.section-head.center-text{
  justify-content: center !important;
  text-align: center !important;
}
.section-head.center-text > div{
  margin-inline: auto !important;
  text-align: center !important;
}

/* Ensure slider headings (Parent Testimony) are centered */
.slider .section-head{
  justify-content: center !important;
}

/* Keep only light visual theme, even if theme-dark class is added */
body.theme-dark{
  --bg: #f6f8fb;
  --fg: #0f1d2a;
  --muted: #4b6476;
  --brand: #1e8aa5;
  --brand-2: #7ad1c2;
  --card: rgba(255,255,255,0.66);
  --stroke: rgba(17,35,51,0.12);
  --shadow: 0 10px 30px rgba(17,35,51,.12);
  --radius: 18px;
  --blur: 14px;
}


/* === CTA BLOCK: Ready to get started? refined layout === */
.section.cta{
  margin-top: 32px;
}

.section.cta .wrap.duo{
  display: flex;
  justify-content: center;
}

.section.cta .wrap.duo > div{
  max-width: 640px;
  text-align: center;
  margin: 0 auto;
}

.section.cta .wrap.duo h2,
.section.cta .wrap.duo p{
  text-align: center;
}

/* Center the step list under the text */
.section.cta ol{
  margin: 16px auto;
  padding-left: 0;
  list-style-position: inside;
  text-align: left;
  max-width: 520px;
}

/* Numbers aligned but visually centered in block */
.section.cta ol li{
  margin-bottom: 8px;
}

/* On narrow screens keep it simple */
@media (max-width: 768px){
  .section.cta .wrap.duo{
    display:block;
  }
}

/* Remove any leftover dark theme visuals; force light look */
body.theme-light, body.theme-dark{
  background: radial-gradient(900px 500px at 20% -10%, #e8f3ff 0%, transparent 60%),
              radial-gradient(800px 500px at 100% 0%, #e3fbf6 0%, transparent 55%),
              linear-gradient(180deg, #f8fcff, #f2f8fb);
}