/* Caring Hands Autism Center — shared stylesheet
   Design system carried over verbatim from the approved one-page demo,
   with additions for multi-page use (page hero, breadcrumb, team, FAQ,
   resource list, form states). */

:root{
  --blue:#1663dc; --blue-deep:#0b4a9e; --blue-ink:#12335c;
  --green:#42bf3a; --green-deep:#2f9e2a; --lime:#8ec008;
  --gold:#ffc233; --gold-deep:#f7a823;
  /* darker cousins for small text — the brand colours above fail contrast
     as type. Fills keep the bright versions. */
  --green-text:#24761f; --gold-text:#8a5c08;
  --coral:#ff8b7b;
  --ink:#173251; --muted:#2b3d52;
  --bg:#ffffff; --bg-blue:#eef5ff; --bg-green:#edfbef; --bg-cream:#fff7e9; --bg-soft:#f6f9ff;
  --ring:rgba(22,99,220,.14);
  --shadow-sm:0 6px 20px rgba(18,51,92,.08);
  --shadow:0 18px 46px rgba(18,51,92,.13);
  --shadow-lg:0 34px 80px rgba(18,51,92,.20);
  --r:22px; --r-lg:30px; --r-xl:42px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"Nunito",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-weight:500;
  color:var(--ink); background:var(--bg); line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{font-family:"Fredoka",system-ui,sans-serif; font-weight:600; line-height:1.1; color:var(--blue-ink); margin:0;}
p{margin:0 0 1rem}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{width:min(1180px,92vw); margin:0 auto}
.eyebrow{font-family:"Fredoka",sans-serif; font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:.82rem; color:var(--green-text); display:inline-flex; align-items:center; gap:.5rem}
.eyebrow::before{content:""; width:26px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--green),var(--lime))}
.section{padding:clamp(64px,9vw,120px) 0; position:relative}
.section.tight{padding:clamp(48px,6vw,80px) 0}
.center{text-align:center}
.lead{font-size:clamp(1.05rem,1.4vw,1.22rem); color:var(--muted); max-width:60ch}
.center .lead{margin-left:auto;margin-right:auto}
h2.h{font-size:clamp(2rem,4.4vw,3.15rem); letter-spacing:-.01em; margin:.5rem 0 .8rem}
h3{font-size:1.4rem}

/* skip link */
.skip{position:absolute; left:-9999px; top:0; background:#fff; color:var(--blue-ink); padding:.8rem 1.2rem; border-radius:0 0 14px 0; font-weight:700; z-index:100}
.skip:focus{left:0}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.55rem; font-family:"Fredoka",sans-serif; font-weight:600; font-size:1.02rem; padding:.92rem 1.6rem; border-radius:999px; cursor:pointer; border:none; transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, background .25s; white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff; box-shadow:0 12px 26px rgba(22,99,220,.34)}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 18px 34px rgba(22,99,220,.42)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#5b3d00; box-shadow:0 12px 26px rgba(247,168,35,.36)}
.btn-gold:hover{transform:translateY(-3px); box-shadow:0 18px 34px rgba(247,168,35,.46)}
.btn-green{background:linear-gradient(135deg,var(--green),var(--green-deep)); color:#fff; box-shadow:0 12px 26px rgba(66,191,58,.32)}
.btn-green:hover{transform:translateY(-3px); box-shadow:0 18px 34px rgba(66,191,58,.42)}
.btn-ghost{background:#fff; color:var(--blue-ink); box-shadow:inset 0 0 0 2px var(--ring), var(--shadow-sm)}
.btn-ghost:hover{transform:translateY(-3px); box-shadow:inset 0 0 0 2px var(--blue), var(--shadow)}
.btn:disabled{opacity:.6; cursor:progress; transform:none}

/* announcement bar */
.topbar{background:linear-gradient(90deg,var(--blue-deep),var(--blue)); color:#fff; font-size:.9rem; text-align:center; padding:.55rem 1rem; font-weight:600}
.topbar b{color:var(--gold)}

/* nav */
header.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82); backdrop-filter:blur(14px); border-bottom:1px solid rgba(18,51,92,.07); transition:box-shadow .3s}
header.nav.scrolled{box-shadow:var(--shadow-sm)}
.navrow{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0}
.brand img{height:52px; width:auto}
.menu{display:flex; align-items:center; gap:.35rem; list-style:none; margin:0; padding:0}
.menu a{font-family:"Fredoka",sans-serif; font-weight:500; font-size:1rem; padding:.5rem .8rem; border-radius:999px; color:var(--blue-ink); transition:background .2s,color .2s}
.menu a:hover{background:var(--bg-blue); color:var(--blue)}
.menu a[aria-current="page"]{background:var(--bg-blue); color:var(--blue); font-weight:600}
.nav-cta{display:flex; align-items:center; gap:.7rem}
.nav-phone{font-family:"Fredoka",sans-serif; font-weight:600; color:var(--blue); display:inline-flex; align-items:center; gap:.4rem}
.burger{display:none; background:var(--bg-blue); border:none; width:46px;height:46px; border-radius:14px; cursor:pointer; align-items:center; justify-content:center}
.burger span{display:block; width:20px;height:2.4px; background:var(--blue-ink); border-radius:3px; position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:20px;height:2.4px; background:var(--blue-ink); border-radius:3px}
.burger span::before{top:-6px} .burger span::after{top:6px}

/* decorative blobs & puzzle */
.blob{position:absolute; border-radius:48% 52% 60% 40%/55% 45% 55% 45%; filter:blur(2px); opacity:.5; z-index:0; pointer-events:none; animation:float 9s ease-in-out infinite}
.puzzle{position:absolute; z-index:1; pointer-events:none; opacity:.85; animation:bob 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-24px) rotate(6deg)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-16px) rotate(8deg)}}

/* HERO (home) */
.hero{position:relative; padding:clamp(48px,7vw,90px) 0 clamp(70px,9vw,120px); overflow:hidden;
  background:
    radial-gradient(1100px 520px at 88% -8%, #dcecff 0%, transparent 60%),
    radial-gradient(900px 500px at 0% 110%, #e6fbe9 0%, transparent 55%),
    var(--bg-soft);}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem,4vw,4rem); align-items:center; position:relative; z-index:2}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.3rem); letter-spacing:-.015em}
.hero h1 .hl{position:relative; color:var(--blue); white-space:nowrap}
.hero h1 .hl svg{position:absolute; left:0; bottom:-.28em; width:100%; height:.4em}
.hero h1 .hl.green{color:var(--green-deep)}
.hero .lead{font-size:clamp(1.08rem,1.5vw,1.28rem); margin-top:1.1rem}
.hero-cta{display:flex; flex-wrap:wrap; gap:.9rem; margin:1.8rem 0 1.4rem}
.trust-chips{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.4rem}
.chip{display:inline-flex; align-items:center; gap:.45rem; background:#fff; border-radius:999px; padding:.5rem .95rem; font-weight:700; font-size:.86rem; color:var(--blue-ink); box-shadow:var(--shadow-sm)}
.chip .dot{width:9px;height:9px;border-radius:50%}
.hero-visual{position:relative; min-height:440px}
.scene{position:relative; width:min(430px,100%); margin-left:auto; aspect-ratio:1/1; border-radius:var(--r-xl); background:linear-gradient(160deg,#eaf3ff,#e9fbef); box-shadow:var(--shadow-lg); overflow:visible; display:grid; place-items:center}
.scene .ring{position:absolute; border-radius:50%; border:2px dashed rgba(22,99,220,.25)}
.float-badge{position:absolute; background:#fff; border-radius:18px; padding:.7rem .95rem; box-shadow:var(--shadow); display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:.9rem; z-index:5; white-space:nowrap; max-width:none; animation:float 7s ease-in-out infinite}
.float-badge .ic{width:38px;height:38px;border-radius:12px; display:grid; place-items:center; color:#fff; flex:none}
.emoji-orb{width:150px;height:150px;border-radius:50%; display:grid; place-items:center; font-size:76px; box-shadow:var(--shadow-lg)}

/* PAGE HERO (interior pages) */
.pagehero{position:relative; overflow:hidden; padding:clamp(46px,6vw,78px) 0 clamp(46px,6vw,72px);
  background:
    radial-gradient(900px 420px at 90% -20%, #dcecff 0%, transparent 62%),
    radial-gradient(700px 400px at -5% 120%, #e6fbe9 0%, transparent 58%),
    var(--bg-soft);}
.pagehero .wrap{position:relative; z-index:2}
.pagehero h1{font-size:clamp(2.1rem,4.8vw,3.4rem); letter-spacing:-.015em; margin:.5rem 0 .7rem; max-width:22ch}
.pagehero .lead{margin-bottom:0}
.crumb{font-size:.88rem; color:var(--muted); font-weight:700; display:flex; gap:.45rem; align-items:center; flex-wrap:wrap}
.crumb a:hover{color:var(--blue)}
.crumb span{opacity:.55}

/* generic reveal */
.reveal{opacity:0; transform:translateY(34px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.40s}
.pop{opacity:0; transform:scale(.9) translateY(20px); transition:opacity .6s ease, transform .6s cubic-bezier(.34,1.56,.64,1)}
.pop.in{opacity:1; transform:none}

/* cards & grids */
.values{background:linear-gradient(180deg,#fff, var(--bg-soft))}
.grid{display:grid; gap:1.4rem}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff; border-radius:var(--r); padding:1.7rem; box-shadow:var(--shadow-sm); border:1px solid rgba(18,51,92,.05); transition:transform .3s, box-shadow .3s}
.card:hover{transform:translateY(-8px); box-shadow:var(--shadow)}
.ic-badge{width:60px;height:60px;border-radius:18px; display:grid; place-items:center; font-size:30px; margin-bottom:1rem}
.card h3{margin-bottom:.4rem}
.card p{color:var(--muted); margin:0; font-size:1rem}

/* about split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:center}
.split.top{align-items:start}
.about-visual{position:relative}
.mission-card{background:linear-gradient(150deg,var(--blue),var(--blue-deep)); color:#fff; border-radius:var(--r-xl); padding:2.4rem; box-shadow:var(--shadow-lg); position:relative; overflow:hidden}
.mission-card h3{color:#fff; font-size:1.7rem; margin-bottom:.8rem}
.mission-card p{color:rgba(255,255,255,.96)}
.mission-card.green{background:linear-gradient(150deg,var(--green),var(--green-deep))}
.mini-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.6rem}
.mini-stats .n{font-family:"Fredoka",sans-serif; font-weight:700; font-size:2rem; color:var(--gold)}
.mini-stats .l{font-size:.84rem; color:rgba(255,255,255,.92); font-weight:700; line-height:1.3}

/* services */
.services{background:var(--bg-blue); position:relative; overflow:hidden}
.svc-card{background:#fff; border-radius:var(--r-lg); padding:2.2rem; box-shadow:var(--shadow-sm); border:1px solid rgba(18,51,92,.05); position:relative; overflow:hidden; transition:transform .3s, box-shadow .3s}
.svc-card:hover{transform:translateY(-8px); box-shadow:var(--shadow)}
.svc-card::before{content:""; position:absolute; inset:0 0 auto 0; height:7px}
.svc-card.aba::before{background:linear-gradient(90deg,var(--blue),var(--green))}
.svc-card.eidbi::before{background:linear-gradient(90deg,var(--green),var(--gold))}
.svc-card.flat:hover{transform:none; box-shadow:var(--shadow-sm)}
.svc-head{display:flex; align-items:center; gap:1rem; margin-bottom:1rem}
.svc-head .ic-badge{margin:0}
.tag{display:inline-block; font-family:"Fredoka",sans-serif; font-weight:600; font-size:.78rem; letter-spacing:.04em; padding:.28rem .7rem; border-radius:999px; background:var(--bg-green); color:var(--green-text)}
.list{list-style:none; padding:0; margin:1rem 0 0}
.list li{display:flex; gap:.7rem; align-items:flex-start; padding:.4rem 0; color:var(--ink); font-weight:600; font-size:.98rem}
.list li svg{flex:none; width:22px;height:22px; margin-top:1px}
.list.plain li{font-weight:400; color:var(--muted)}
.list.plain li b{color:var(--ink)}

/* detail block used on the services page */
.detail{background:#fff; border-radius:var(--r-lg); padding:clamp(1.6rem,3vw,2.6rem); box-shadow:var(--shadow-sm); border:1px solid rgba(18,51,92,.05)}
.detail + .detail{margin-top:1.6rem}
.detail h3{font-size:clamp(1.35rem,2.4vw,1.75rem); margin-bottom:.6rem}
.detail h4{font-size:1.05rem; margin:1.6rem 0 .4rem}
.detail p{color:var(--muted)}
.detail p.tight{margin-bottom:.4rem}

/* delivery */
.deliv-card{text-align:center; padding:2rem 1.6rem}
.deliv-card .emoji{font-size:44px; margin-bottom:.6rem; display:inline-block}

/* steps */
.steps{background:linear-gradient(180deg,var(--bg-cream),#fff)}
.steprail{display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; position:relative; margin-top:2.5rem}
.step{background:#fff; border-radius:var(--r); padding:1.6rem 1.2rem; box-shadow:var(--shadow-sm); text-align:center; position:relative; z-index:2; transition:transform .3s,box-shadow .3s}
.step:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.step .num{width:52px;height:52px; border-radius:50%; display:grid; place-items:center; margin:0 auto .8rem; font-family:"Fredoka",sans-serif; font-weight:700; font-size:1.4rem; color:#fff; box-shadow:var(--shadow-sm)}
.step h4{font-size:1.08rem; margin-bottom:.35rem}
.step p{font-size:.94rem; color:var(--muted); margin:0}

/* features */
.why{background:var(--bg-green)}
.feat{display:flex; gap:1rem; align-items:flex-start; background:#fff; border-radius:var(--r); padding:1.4rem 1.5rem; box-shadow:var(--shadow-sm); transition:transform .3s,box-shadow .3s}
.feat:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.feat .ic{width:50px;height:50px;border-radius:14px; display:grid; place-items:center; font-size:24px; flex:none}
.feat h4{font-size:1.1rem; margin-bottom:.25rem}
.feat p{margin:0; color:var(--muted); font-size:.98rem}

/* team */
.team-card{background:#fff; border-radius:var(--r-lg); padding:2rem 1.8rem; box-shadow:var(--shadow-sm); border:1px solid rgba(18,51,92,.05); text-align:center; transition:transform .3s,box-shadow .3s}
.team-card:hover{transform:translateY(-8px); box-shadow:var(--shadow)}
.team-card .avatar{width:86px;height:86px;border-radius:50%; display:grid; place-items:center; font-family:"Fredoka",sans-serif; font-weight:600; font-size:1.9rem; color:#fff; margin:0 auto 1rem; box-shadow:var(--shadow-sm)}
.team-card h3{font-size:1.25rem}
.team-card .role{font-family:"Fredoka",sans-serif; font-weight:500; color:var(--green-text); font-size:.95rem; margin:.15rem 0 .8rem}
.team-card p{color:var(--muted); font-size:.98rem; margin:0}

/* insurance band */
.insurance{background:linear-gradient(135deg,var(--blue),var(--blue-deep)); color:#fff; border-radius:var(--r-xl); padding:clamp(2rem,4vw,3.4rem); box-shadow:var(--shadow-lg); position:relative; overflow:hidden}
.insurance h2{color:#fff}
.ins-logos{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.4rem}
.ins-pill{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(6px); border-radius:14px; padding:.8rem 1.2rem; font-family:"Fredoka",sans-serif; font-weight:600; font-size:1rem}
.ins-pill small{display:block; font-family:"Nunito"; font-weight:600; font-size:.75rem; opacity:.9}

/* promo cards */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem}
.promo{border-radius:var(--r-xl); padding:2.4rem; color:#fff; position:relative; overflow:hidden; min-height:230px; display:flex; flex-direction:column; justify-content:flex-end}
.promo.res{background:linear-gradient(150deg,var(--green),var(--green-deep))}
.promo.car{background:linear-gradient(150deg,var(--gold-deep),#e07b00)}
.promo h3{color:#fff; font-size:1.7rem}
.promo p{color:rgba(255,255,255,.96); max-width:36ch}
.promo .btn{align-self:flex-start; margin-top:.5rem}

/* resource links */
.reslist{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.8rem; list-style:none; padding:0}
.reslist a{display:block; background:#fff; border-radius:var(--r); padding:1.2rem 1.4rem; box-shadow:var(--shadow-sm); border:1px solid rgba(18,51,92,.05); transition:transform .3s,box-shadow .3s}
.reslist a:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.reslist b{display:block; font-family:"Fredoka",sans-serif; font-weight:500; color:var(--blue-ink); font-size:1.02rem}
.reslist span{font-size:.9rem; color:var(--blue); font-weight:700; word-break:break-word}

/* contact */
.contact{background:linear-gradient(180deg,#fff,var(--bg-soft))}
.contact-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,4vw,3.5rem); align-items:stretch}
.info-card{background:#fff; border-radius:var(--r-lg); padding:2rem; box-shadow:var(--shadow-sm); height:100%}
.info-row{display:flex; gap:.9rem; align-items:flex-start; padding:.8rem 0; border-bottom:1px dashed rgba(18,51,92,.1)}
.info-row:last-child{border-bottom:none}
.info-row .ic{width:44px;height:44px;border-radius:12px; display:grid;place-items:center; font-size:20px; flex:none}
.info-row b{font-family:"Fredoka",sans-serif; color:var(--blue-ink)}
.info-row span{color:var(--muted); font-size:.98rem}
.info-row a:hover{color:var(--blue)}
form.contact-form{background:#fff; border-radius:var(--r-lg); padding:2rem; box-shadow:var(--shadow)}
.field{margin-bottom:1rem}
.field label{display:block; font-family:"Fredoka",sans-serif; font-weight:500; font-size:.9rem; margin-bottom:.35rem; color:var(--blue-ink)}
.field input,.field select,.field textarea{width:100%; padding:.85rem 1rem; border:2px solid #e4ecf7; border-radius:14px; font-family:inherit; font-size:1rem; color:var(--ink); background:#fbfdff; transition:border .2s, box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px var(--ring)}
.field textarea{min-height:120px; resize:vertical}
.field .err{display:none; color:#a32020; font-size:.84rem; font-weight:700; margin-top:.3rem}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#e28b8b}
.field.invalid .err{display:block}
.two{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.note{font-size:.86rem; color:var(--muted); margin-top:.6rem; display:flex; gap:.4rem; align-items:flex-start}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.formmsg{display:none; align-items:flex-start; gap:.5rem; margin-top:.9rem; font-weight:800; border-radius:14px; padding:.85rem 1rem; line-height:1.5}
.formmsg.show{display:flex}
.formmsg.ok{color:var(--green-text); background:var(--bg-green)}
.formmsg.bad{color:#a32020; background:#fdeeee}

/* map / directions strip */
.mapstrip{display:grid; grid-template-columns:1fr auto; gap:1.4rem; align-items:center; background:var(--bg-cream); border-radius:var(--r-lg); padding:clamp(1.4rem,3vw,2rem)}
.mapstrip h3{margin-bottom:.3rem}
.mapstrip p{color:var(--muted); margin:0}

/* FAQ */
.faq details{background:#fff; border-radius:var(--r); box-shadow:var(--shadow-sm); border:1px solid rgba(18,51,92,.05); padding:1.1rem 1.4rem; margin-bottom:.9rem}
.faq summary{font-family:"Fredoka",sans-serif; font-weight:500; font-size:1.08rem; color:var(--blue-ink); cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:1.5rem; color:var(--blue); line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--muted); margin:.8rem 0 0}

/* footer */
footer{background:var(--blue-ink); color:#cdd9ea; padding:clamp(48px,6vw,72px) 0 1.5rem}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2rem}
footer h4{color:#fff; font-size:1.05rem; margin-bottom:1rem}
footer a{color:#cdd9ea; display:block; padding:.28rem 0; transition:color .2s}
footer a:hover{color:var(--gold)}
.foot-brand img{height:56px; background:#fff; padding:.5rem .7rem; border-radius:14px; margin-bottom:1rem}
.socials{display:flex; gap:.6rem; margin-top:1rem}
.socials a{width:42px;height:42px;border-radius:12px; background:rgba(255,255,255,.1); display:grid; place-items:center}
.socials a:hover{background:var(--gold); color:var(--blue-ink)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:2.5rem; padding-top:1.4rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.86rem}
.foot-bottom a{display:inline; padding:0}

/* responsive */
@media(max-width:960px){
  .hero-grid,.split,.contact-grid{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3,.reslist{grid-template-columns:1fr}
  .steprail{grid-template-columns:repeat(2,1fr)}
  .duo{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .menu,.nav-phone{display:none}
  .burger{display:flex}
  .hero-visual{min-height:auto; order:-1}
  .scene{margin:0 auto}
  .mapstrip{grid-template-columns:1fr}
  .mobile-open .menu{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; background:#fff; padding:1rem; box-shadow:var(--shadow); gap:.2rem; align-items:stretch}
  .mobile-open .menu a{padding:.8rem 1rem}
}
@media(max-width:560px){
  .g4,.g2,.two,.foot-grid{grid-template-columns:1fr}
  .steprail{grid-template-columns:1fr}
  .mini-stats{grid-template-columns:repeat(3,1fr)}
  .nav-cta .btn-ghost{display:none}
  .nav-cta .btn-primary{padding:.7rem 1.1rem; font-size:.92rem}
  .brand img{height:44px}
  /* the hero badges sit close together on a narrow screen — shrink them so
     they read as three separate labels rather than one stack */
  .float-badge{font-size:.78rem; padding:.5rem .7rem; gap:.45rem}
  .float-badge .ic{width:30px;height:30px;font-size:15px;border-radius:10px}
}
@media(prefers-reduced-motion:reduce){
  .reveal,.pop{opacity:1!important; transform:none!important}
  .blob,.puzzle,.float-badge{animation:none!important}
  html{scroll-behavior:auto}
}