:root{--nav-h:84px;--navy:#0a2f47;--navy2:#0d4560;--teal:#0e7a86;--blue:#1b9fe3;--ink:#102a3a;--mut:#5b6f7c;--mint:#e8f7f0;--sky:#e6f3fc;--lav:#efeafc;--bg:#f6fbfd;--r:18px}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 8px)}
body{font-family:Poppins,system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}ul,ol{list-style:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
h1,h2,h3{line-height:1.2;font-weight:600;color:var(--navy)}
.eyebrow{font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.eyebrow:before{content:"";width:26px;height:3px;border-radius:3px;background:var(--blue)}
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 26px;border-radius:999px;font-weight:600;font-size:.85rem;border:2px solid transparent;transition:transform .2s,box-shadow .2s;cursor:pointer}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(10,47,71,.2)}.btn.sm{padding:9px 20px;font-size:.78rem}
.btn-teal{background:var(--teal);color:#fff}.btn-blue{background:var(--blue);color:#fff}.btn-white{background:#fff;color:var(--navy)}
.btn-line{border-color:var(--teal);color:var(--teal);background:#fff}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:var(--navy);color:#fff}
.nav-in{max-width:1280px;margin:0 auto;padding:0 24px;height:var(--nav-h);display:flex;align-items:center;gap:36px}
.logo{display:flex;align-items:baseline;gap:8px;font-size:1.6rem;font-weight:700;color:#fff}.logo i{color:var(--blue);font-size:1.5rem;align-self:center}.logo small{font-size:.9rem;color:var(--blue);font-weight:500}
.menu{display:flex;gap:26px;font-size:.78rem;flex:1}.menu a{opacity:.85}.menu a.on,.menu a:hover{opacity:1;border-bottom:2px solid var(--blue)}
.menu .m-cta,.burger{display:none}.menu a.btn{border:0}
.foot .logo{color:#fff}

/* hero */
.hero{background:radial-gradient(900px 500px at 85% 20%,#fff 0,transparent 60%),linear-gradient(135deg,#f3fbf9,#eaf6fd);overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.05fr 1fr;gap:20px;align-items:center;min-height:540px;padding-top:30px;padding-bottom:50px}
.hero h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:20px;color:#0d2233}.hero h1 em{font-style:normal;color:var(--teal);display:block}
.lead{color:var(--mut);max-width:470px;margin-bottom:28px;font-size:.95rem}.btns{display:flex;gap:14px;flex-wrap:wrap}
.hero-img{position:relative;height:440px;border-radius:50% 0 0 50%/60% 0 0 40%;margin-right:-24px;
  transform:translateY(var(--py,0))}
.s1{background:url(../img/hero1.jpg),linear-gradient(135deg,#d9c3a4,#8fb7c9)}.s2{background:url(../img/hero2.jpg),linear-gradient(135deg,#a9cf9a,#bfe0f2)}.s3{background:url(../img/hero3.jpg),linear-gradient(135deg,#7fb6d6,#1b6f9a)}
.script{position:absolute;left:8%;top:-10px;font-family:Caveat,cursive;font-size:1.9rem;line-height:1.1;color:var(--teal);transform:translateY(var(--py,0)) rotate(-10deg);text-shadow:0 1px 0 #fff}

/* trust */
.trust{display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-radius:var(--r);box-shadow:0 12px 40px rgba(14,122,134,.12);margin-top:-36px;position:relative;padding:26px 10px}
.trust div{padding:0 18px;display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-content:start;border-left:1px solid #e3edf2;font-size:.72rem;color:var(--mut)}.trust div:first-child{border:0}
.trust i{grid-row:span 2;width:44px;height:44px;border-radius:50%;background:var(--sky);color:var(--teal);display:grid;place-items:center;font-size:1.2rem}
.trust b{color:var(--navy);font-size:.78rem;line-height:1.3}

/* services */
.services{display:grid;grid-template-columns:1fr repeat(3,1.05fr);gap:20px;padding-top:70px;padding-bottom:50px;align-items:start}
.svc-intro h2{font-size:2rem;margin-bottom:14px}.svc-intro p:not(.eyebrow){color:var(--mut);margin-bottom:24px;font-size:.9rem}
.card{border-radius:var(--r);padding:0 0 18px;border:1px solid #cfe9dc;font-size:.82rem;color:var(--mut);position:relative;overflow:hidden}
.c-green{background:linear-gradient(#fff,var(--mint))}.c-blue{background:linear-gradient(#fff,var(--sky));border-color:#c4e0f3}.c-violet{background:linear-gradient(#fff,var(--lav));border-color:#ddd3f5}
.ph{background-size:cover;background-position:center;background-color:#cfd9de}.card .ph{height:150px}
.p1{background-image:url(../img/annual.jpg),linear-gradient(135deg,#e5c9a8,#9cc3b8)}.p2{background-image:url(../img/short.jpg),linear-gradient(135deg,#9bcf9b,#bfe0f2)}.p3{background-image:url(../img/custom.jpg),linear-gradient(135deg,#cdbfe8,#e9d3c1)}
.ico{position:relative;margin:-22px 0 0 18px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#2fa56b;font-size:1.1rem}
.c-blue .ico{background:var(--blue)}.c-violet .ico{background:#6b57d6}
.card h3,.card p,.card ul,.card>a{margin-left:18px;margin-right:18px}.card h3{font-size:1.02rem;margin-top:8px}
.card ul{margin-top:10px;margin-bottom:12px}.card li:before{content:"\2713";color:#2fa56b;font-weight:700;margin-right:8px}.c-blue li:before{color:var(--blue)}.c-violet li:before{color:#6b57d6}
.card>a{display:block;color:var(--teal);font-weight:600;font-size:.8rem}

/* why + how */
.duo{display:grid;grid-template-columns:1fr 1.1fr;gap:20px;padding-bottom:40px}
.why{border-radius:var(--r);color:#fff;min-height:230px;display:flex;align-items:center;padding:34px;
  background:linear-gradient(90deg,rgba(7,43,62,.96) 35%,rgba(7,43,62,.2)),url(../img/why.jpg) center/cover,linear-gradient(135deg,#0a3a52,#3e8f6a)}
.why .eyebrow{color:#bfe6f5}.why h2{color:#fff;font-size:1.7rem;margin-bottom:12px}.why p:not(.eyebrow){font-size:.8rem;max-width:300px;opacity:.9;margin-bottom:18px}
.how{background:#fff;border:1px solid #dcebf1;border-radius:var(--r);padding:26px 30px}.how h2{font-size:1.4rem}.how .sub{color:var(--mut);font-size:.82rem;margin:6px 0 20px}
.how ol{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative}.how ol:before{content:"";position:absolute;left:10px;right:10px;top:14px;border-top:2px dashed #b9d9e8}
.how li{position:relative;font-size:.72rem;color:var(--mut)}.how li b{display:block;color:var(--navy);font-size:.78rem;line-height:1.3;margin:10px 0 4px}.how li span{display:block}
.how li i{font-style:normal;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy2);color:#fff;font-weight:600;position:relative}

/* family */
.family{display:grid;grid-template-columns:1fr 1fr 1fr;gap:34px;align-items:center;padding-bottom:30px}
.round{height:128px;border-radius:12px}.p4{background-image:url(../img/family.jpg),linear-gradient(135deg,#d6b890,#8aa9b8)}
.family h3{font-size:1.1rem}.family b{display:block;font-size:.85rem;margin:4px 0}.family p{font-size:.8rem;color:var(--mut);margin-bottom:14px}
.report{background:#fff;border-radius:14px;padding:16px 22px;box-shadow:0 10px 30px rgba(14,122,134,.12);font-size:.78rem;position:relative}
.report header{display:flex;justify-content:space-between;margin-bottom:8px;color:var(--teal)}.report small{color:var(--mut)}
.report li{padding:3px 0;font-weight:500}.report li:before{content:"\f058";font-family:"Font Awesome 6 Free";font-weight:900;color:#1bb36b;margin-right:10px}
.bars{position:absolute;right:20px;bottom:16px;display:flex;align-items:flex-end;gap:5px}.bars s{width:12px;background:#9fd8d0;border-radius:3px}.bars s:nth-child(1){height:22px}.bars s:nth-child(2){height:38px}.bars s:nth-child(3){height:54px;background:#7cc6d8}

/* lifestyle */
.life{display:grid;grid-template-columns:2fr 1fr;gap:20px;padding-bottom:40px}
.life-main{position:relative;border-radius:var(--r);background:linear-gradient(90deg,#eaf6ee 40%,transparent 80%),var(--mint);display:grid;grid-template-columns:1fr 1fr;overflow:hidden;min-height:250px}
.life-txt{padding:28px 0 0 30px;position:relative;z-index:2}.life-txt h3{font-size:1.4rem;margin-bottom:8px}.life-txt p:not(.eyebrow){font-size:.8rem;color:var(--mut);margin-bottom:16px}
.life-img{position:absolute;right:0;top:0;bottom:0;width:58%;background:url(../img/lifestyle.jpg) center/cover,linear-gradient(135deg,#a9cf9a,#e4c9a4);clip-path:ellipse(80% 100% at 100% 50%)}
.chips{grid-column:1/-1;display:flex;gap:26px;padding:0 30px 18px;position:relative;z-index:2;flex-wrap:wrap;align-self:end}
.chips span{display:grid;grid-template-columns:34px 1fr;column-gap:10px;font-size:.66rem;color:var(--mut)}.chips b{color:var(--navy);font-size:.72rem}
.chips i{grid-row:span 2;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--teal);display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.quote{background:linear-gradient(160deg,var(--navy2),#0a3a52);color:#fff;border-radius:var(--r);padding:28px;font-size:.85rem;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.quote>i{color:var(--blue);font-size:1.5rem}.quote footer{display:flex;align-items:center;gap:10px;font-size:.75rem;flex-wrap:wrap}.quote small{opacity:.7;width:100%;margin-left:54px;margin-top:-10px}
.av{width:44px;height:44px;border-radius:50%;background:url(../img/roy.jpg) center/cover,#e2b99a;border:2px solid #fff}

/* emergency */
.sos{color:#fff;position:relative;overflow:hidden;background:#0b4d6b}
.sos-in{display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center;padding-top:34px;padding-bottom:34px}
.big{font-size:4.2rem;color:#fff;opacity:.95}.sos h2{color:#fff;font-size:1.45rem}.sos p{font-size:.85rem;margin-top:8px;opacity:.9}

/* footer */
.foot{background:var(--navy);color:#cfe1ea;font-size:.78rem;padding-top:40px}
.foot-in{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:30px}
.foot h4{color:#fff;font-size:.82rem;margin-bottom:12px}.foot-in a:not(.logo){display:block;margin-bottom:8px;opacity:.85}.foot-in a:hover{opacity:1;color:#fff}
.foot-in i{width:20px;color:var(--blue)}.foot-in>div:first-child p{margin:6px 0 14px}.soc{display:flex;gap:14px;font-size:1.2rem}.soc a i{color:#fff;width:auto}
.legal{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.15);margin-top:20px;padding:18px 24px;font-size:.7rem}
.legal a{margin-left:16px}

/* parallax backgrounds (fixed) only on larger screens with motion allowed */

@media (max-width:1100px){
 .services{grid-template-columns:repeat(3,1fr)}.svc-intro{grid-column:1/-1}
 .trust{grid-template-columns:repeat(3,1fr);row-gap:18px}.trust div:nth-child(4){border:0}
 .duo,.life{grid-template-columns:1fr}.family{grid-template-columns:1fr 1fr}.report{grid-column:1/-1}
 .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
 .nav-in{justify-content:space-between}.d-cta{display:none}.burger{display:block;background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer}
 .menu{position:absolute;top:var(--nav-h);left:0;right:0;background:var(--navy);flex-direction:column;gap:0;padding:6px 24px 20px;display:none}.menu.open{display:flex}
 .menu a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1)}.menu .m-cta{display:inline-flex;margin-top:14px;justify-content:center;border-bottom:0}
 .hero-in{grid-template-columns:1fr;min-height:0}.hero-img{height:320px;margin:0 -24px;border-radius:40% 40% 0 0/20% 20% 0 0}
 .services{grid-template-columns:1fr}.how ol{grid-template-columns:1fr 1fr;row-gap:22px}.how ol:before{display:none}
 .family{grid-template-columns:1fr}.life-main{grid-template-columns:1fr}.life-img{position:relative;width:100%;height:200px;clip-path:none;order:3}
 .sos-in{grid-template-columns:1fr;text-align:center;justify-items:center}
}
@media (max-width:560px){.trust{grid-template-columns:1fr}.trust div{border:0}.foot-in{grid-template-columns:1fr}.hero-in{padding-top:20px}.legal a{margin:0 12px 0 0}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ---- hero slider (plain fade) ---- */
.hero{position:relative}.slides{display:grid}
.slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s}.slide.on{opacity:1;visibility:visible}
.slide .hero-txt>*{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.slide.on .hero-txt>*{opacity:1;transform:none}.slide.on .hero-txt>:nth-child(2){transition-delay:.12s}.slide.on .hero-txt>:nth-child(3){transition-delay:.24s}.slide.on .hero-txt>:nth-child(4){transition-delay:.36s}
.arr{position:absolute;top:50%;z-index:5;width:44px;height:44px;margin-top:-22px;border:0;border-radius:50%;background:#fff;color:var(--navy);box-shadow:0 6px 18px rgba(10,47,71,.18);cursor:pointer;transition:background .2s,color .2s,transform .2s}
.arr:hover{background:var(--teal);color:#fff;transform:scale(1.08)}.prev{left:18px}.next{right:18px}
.dots{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;gap:10px;z-index:5}
.dots button{width:10px;height:10px;border-radius:99px;border:0;background:#b7d3dd;cursor:pointer;transition:width .3s,background .3s}.dots button.on{width:30px;background:var(--teal)}

/* ---- scroll reveal (classes added by main.js, removed after so hovers work) ---- */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease}.js .rv.in{opacity:1;transform:none}

/* ---- blobs (parallax decoration) ---- */
.services,.life{position:relative}.services>:not(.blob),.life>:not(.blob){position:relative;z-index:1}
.blob{position:absolute;border-radius:50%;z-index:0;pointer-events:none;transform:translateY(var(--py,0))}
.b1{width:200px;height:200px;left:-70px;top:30px;background:radial-gradient(#cdeedd,transparent 70%)}.b2{width:260px;height:260px;right:-80px;bottom:-30px;background:radial-gradient(#cfe7f8,transparent 70%)}.b3{width:240px;height:240px;left:30%;top:-40px;background:radial-gradient(#d9f2e4,transparent 70%)}

/* ---- hover effects ---- */
.btn i.fa-arrow-right{transition:transform .25s}.btn:hover i.fa-arrow-right{transform:translateX(5px)}.btn-line:hover{background:var(--teal);color:#fff}.btn-white:hover{background:var(--blue);color:#fff}
.menu a{transition:opacity .2s}.logo i{transition:transform .3s}.logo:hover i{animation:beat .8s}
.trust div{transition:transform .3s}.trust div:hover{transform:translateY(-5px)}.trust i{transition:background .3s,color .3s,transform .3s}.trust div:hover i{background:var(--teal);color:#fff;transform:rotate(-8deg) scale(1.08)}
.card{transition:transform .35s,box-shadow .35s}.card:hover{transform:translateY(-10px);box-shadow:0 20px 40px rgba(14,122,134,.18)}
.card .ph{transition:background-size .6s}.card:hover .ph{background-size:112%}.ico{transition:transform .35s}.card:hover .ico{transform:scale(1.12) rotate(-6deg)}
.card>a i{transition:transform .25s}.card>a:hover i{transform:translateX(5px)}.card li{transition:transform .2s}.card li:hover{transform:translateX(4px)}
.why,.how{transition:transform .35s,box-shadow .35s}.why:hover,.how:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(10,47,71,.16)}
.how li i{transition:transform .3s,background .3s}.how li:hover i{transform:scale(1.2);background:var(--blue)}
.round{transition:transform .4s}.family:hover .round{transform:scale(1.02)}.report{transition:transform .3s,box-shadow .3s}.report:hover{box-shadow:0 16px 36px rgba(14,122,134,.2)}.report li{transition:transform .2s}.report li:hover{transform:translateX(5px)}
.bars s{transform-origin:bottom;animation:grow 1.2s ease both}.bars s:nth-child(2){animation-delay:.15s}.bars s:nth-child(3){animation-delay:.3s}
.chips span{transition:transform .3s}.chips span:hover{transform:translateY(-4px)}.chips i{transition:background .3s,color .3s}.chips span:hover i{background:var(--teal);color:#fff}
.quote{transition:transform .35s,box-shadow .35s}.quote:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(10,47,71,.3)}
.sos .btn{position:relative}.sos .btn:after{content:"";position:absolute;inset:-2px;border-radius:999px;border:2px solid #fff;animation:ping 2s infinite}
.foot-in a:not(.logo){transition:transform .2s,opacity .2s}.foot-in a:not(.logo):hover{transform:translateX(5px)}.soc a{transition:transform .25s}.soc a:hover{transform:translateY(-4px) scale(1.15)}.legal a:hover{color:#fff}
@keyframes beat{0%,100%{transform:scale(1)}40%{transform:scale(1.14)}}@keyframes grow{from{transform:scaleY(0)}}@keyframes ping{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.18,1.5)}}
@media (max-width:860px){.arr{display:none}.dots{bottom:10px}.blob{display:none}}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}.sos .btn:after,.bars s{animation:none}.slide{transition:none}}
.round,.report{translate:0 var(--py,0)}

/* ---- full-screen, full-width hero slides ---- */
.hero{background:var(--navy)}
.slide{position:relative;overflow:hidden;min-height:calc(100vh - var(--nav-h));min-height:calc(100svh - var(--nav-h))}
.hero .hero-in{position:static;grid-template-columns:1fr;align-items:center;min-height:calc(100vh - var(--nav-h));min-height:calc(100svh - var(--nav-h));padding-top:60px;padding-bottom:110px}
.hero .hero-txt{position:relative;z-index:2;max-width:580px}
.hero .hero-img{position:absolute;inset:-60px 0;height:auto;margin:0;border-radius:0;z-index:0;background-size:cover;background-position:center}
.hero .hero-img:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,36,54,.88) 0%,rgba(7,36,54,.65) 38%,rgba(7,36,54,.1) 75%)}
.hero h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.6rem)}.hero h1 em{color:#7fe3ea}
.hero .lead{color:rgba(255,255,255,.9);font-size:1rem}.hero .eyebrow{color:#bfe6f5}.hero .eyebrow:before{background:#7fe3ea}
.hero .btn-line{background:transparent;border-color:#fff;color:#fff}.hero .btn-line:hover{background:#fff;color:var(--navy)}
.hero .script{left:auto;right:10%;top:22%;color:#fff;font-size:2.4rem;text-shadow:0 2px 12px rgba(0,0,0,.35);z-index:1}
.dots button{background:rgba(255,255,255,.5)}.dots button.on{background:#fff}
.hero .arr{background:rgba(255,255,255,.9)}
@media (max-width:860px){
 .hero .hero-in{padding-top:40px;padding-bottom:70px}
 .hero .hero-img:before{background:linear-gradient(180deg,rgba(7,36,54,.6),rgba(7,36,54,.88))}
 .hero .script{display:none}
}

/* ---- shorter hero (about 60% of the screen) ---- */
.slide,.hero .hero-in{min-height:clamp(440px,62vh,540px)}
.hero .hero-in{padding-top:36px;padding-bottom:84px}
.hero h1{font-size:clamp(1.9rem,3.4vw,2.75rem);margin-bottom:14px}
.hero .lead{font-size:.92rem;margin-bottom:22px;max-width:460px}
.hero .hero-txt{max-width:540px}
.hero .hero-img{inset:-40px 0;background-position:center 25%}
.hero .script{top:18%;font-size:2.1rem}
@media (max-width:860px){.slide,.hero .hero-in{min-height:0}.hero .hero-in{padding-top:34px;padding-bottom:64px}.hero h1{font-size:1.8rem}}

/* ---- hero: text on the left, people on the right, photo never cropped ---- */
.slide{background:linear-gradient(100deg,#08273b 0%,#0b3b56 55%,#0e5670 100%)}
.hero .hero-img{inset:0 0 0 auto;width:66%;background-size:contain;background-repeat:no-repeat;background-position:right bottom;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
.hero .hero-img:before{display:none}
@media (max-width:860px){
 .slide{display:block}
 .hero .hero-in{padding-bottom:0}
 .hero .hero-img{position:relative;inset:auto;width:auto;height:250px;margin:24px -24px 0;background-size:cover;background-position:center 20%;
   -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);mask-image:linear-gradient(180deg,transparent 0,#000 22%)}
}

/* ---- hero: photo fills the right side and melts into the dark left (no hard edge) ---- */
.hero .hero-img{inset:-20px 0 -20px auto;width:76%;background-size:cover;background-position:center 30%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 42%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 18%,#000 42%)}
@media (max-width:860px){
 .hero .hero-img{position:relative;inset:auto;width:auto;height:250px;margin:24px -24px 0;background-position:center 25%;
   -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 25%);mask-image:linear-gradient(180deg,transparent 0,#000 25%)}
}

/* ================= extra effects: buttons, icons, parallax ================= */

/* --- buttons: shine sweep, press, ripple, glow, ringing phone --- */
.btn-teal:hover{box-shadow:0 10px 24px rgba(14,122,134,.38)}.btn-blue:hover{box-shadow:0 10px 24px rgba(27,130,200,.38)}
.arr i{display:inline-block;transition:transform .25s}.next:hover i{transform:translateX(3px)}.prev:hover i{transform:translateX(-3px)}.arr:active{transform:scale(.92)}
.dots button:hover{background:#fff;transform:scale(1.3)}

/* --- icons: float, pop-in, rings, wiggles (translate/box-shadow so hover transforms still work) --- */
.nav .logo i{animation:beat 2.8s ease-in-out infinite}
.trust i{transition:background .3s,color .3s,transform .3s,box-shadow .3s}
.trust div:hover i{box-shadow:0 0 0 9px rgba(14,122,134,.13)}
.trust .rv.in i{animation:pop .7s .25s cubic-bezier(.3,1.6,.5,1) both}
.card .ico{animation:bob 3.6s ease-in-out infinite;transition:transform .35s,box-shadow .35s}
.card:nth-of-type(2) .ico{animation-delay:.5s}.card:nth-of-type(3) .ico{animation-delay:1s}
.card:hover .ico{box-shadow:0 0 0 8px rgba(47,165,107,.16)}.c-blue:hover .ico{box-shadow:0 0 0 8px rgba(27,130,200,.16)}.c-violet:hover .ico{box-shadow:0 0 0 8px rgba(107,87,214,.16)}
.how li i{transition:transform .3s,background .3s,box-shadow .3s}.how li:hover i{box-shadow:0 0 0 7px rgba(27,130,200,.16)}
.chips span:hover i{animation:wiggle .6s ease}
.quote>i{display:inline-block;animation:bob 4s ease-in-out infinite}
.report header i{display:inline-block;animation:bob 3s ease-in-out infinite}
.foot-in a i{display:inline-block;transition:transform .25s}.foot-in a:hover i{transform:scale(1.25) rotate(-8deg)}
.sos .big{translate:0 var(--py,0)}

/* --- parallax targets (JS sets --py from data-speed) --- */
.hero .hero-txt{translate:0 var(--py,0)}
.life-img{top:-48px;bottom:-48px;translate:0 var(--py,0)}
.quote{translate:0 var(--py,0)}

@keyframes rip{to{transform:scale(1);opacity:0}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(14,180,190,.55)}60%{box-shadow:0 0 0 14px rgba(14,180,190,0)}}
@keyframes ring{0%,100%{transform:rotate(0)}20%{transform:rotate(-18deg)}40%{transform:rotate(16deg)}60%{transform:rotate(-12deg)}80%{transform:rotate(8deg)}}
@keyframes pop{from{transform:scale(0) rotate(-40deg)}to{transform:scale(1) rotate(0)}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg) scale(1.1)}75%{transform:rotate(12deg) scale(1.1)}}
@media (prefers-reduced-motion:reduce){.nav .logo i,.card .ico,.quote>i,.report header i,.trust .rv.in i{animation:none}.bt-dup{display:none}.btn:hover .bt-in{transform:none}}
@media (max-width:860px){.life-img{top:0;bottom:0;translate:none}}

/* --- prev/next arrows: 3D raised key (no colour change on hover) --- */
.hero .arr{background:linear-gradient(180deg,#fff 0%,#e4eff5 100%);color:var(--navy);outline:0;
  box-shadow:0 5px 0 #a9c3d0,0 12px 20px rgba(3,20,32,.35),inset 0 2px 0 rgba(255,255,255,.9);
  transition:transform .18s ease,box-shadow .18s ease}
.hero .arr:hover{background:linear-gradient(180deg,#fff 0%,#e4eff5 100%);color:var(--navy);
  transform:translateY(-4px) scale(1.06);
  box-shadow:0 9px 0 #a9c3d0,0 20px 28px rgba(3,20,32,.4),inset 0 2px 0 rgba(255,255,255,.9)}
.hero .arr:active{transform:translateY(4px) scale(.98);
  box-shadow:0 1px 0 #a9c3d0,0 3px 6px rgba(3,20,32,.3),inset 0 2px 4px rgba(10,47,71,.15)}
.hero .arr:focus-visible{outline:3px solid #7fe3ea;outline-offset:4px}

/* --- buttons: label roll + pill-to-rounded morph (replaces shine/ripple/glow/magnetic) --- */
.btn{transition:border-radius .45s cubic-bezier(.7,0,.2,1),box-shadow .3s,background .25s,color .25s}
.btn:hover{transform:none;border-radius:14px}
.btn:active{border-radius:10px}
.btn .bt{position:relative;display:inline-flex;overflow:hidden;line-height:1.5}
.btn .bt-in{display:inline-flex;align-items:center;gap:9px;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.btn .bt-dup{position:absolute;left:0;top:100%;white-space:nowrap}
.btn:hover .bt-in,.btn:focus-visible .bt-in{transform:translateY(-100%)}
.btn:hover i.fa-arrow-right{transform:none}
.btn:focus-visible{outline:3px solid #7fe3ea;outline-offset:3px}

/* ================= Our services: richer effects ================= */
/* entrance: cards tip up into place */
.js .services .card.rv{transform:perspective(900px) translateY(50px) rotateX(-14deg) scale(.95);transform-origin:50% 100%;transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.js .services .card.rv.in{transform:none}
/* heading underline draws itself, eyebrow rule grows */
.svc-intro h2{position:relative;padding-bottom:14px}
.svc-intro h2::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--teal),var(--blue));transform-origin:left}
.svc-intro h2.rv.in::after{animation:draw .9s .35s cubic-bezier(.2,.8,.2,1) both}
.svc-intro .eyebrow.rv.in:before{animation:rule .7s .15s ease both}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rule{from{width:0}to{width:26px}}
/* 3D tilt that follows the pointer, with a moving glare */
.card{--rx:0deg;--ry:0deg;--gx:50%;--gy:0%;--ac:#2fa56b}
.c-blue{--ac:var(--blue)}.c-violet{--ac:#6b57d6}
.card:hover{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-10px);transition:transform .12s ease-out,box-shadow .35s}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.7),rgba(255,255,255,0) 55%)}
.card:hover::after{opacity:.75}
/* coloured top edge sweeps in */
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:3;background:var(--ac);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.card:hover::before{transform:scaleX(1)}
/* photo drifts inside its frame while scrolling (JS sets --bp) */
.card .ph{background-position:center var(--bp,50%)}
/* list: items step in one after another on hover, bullet dot in card colour */
.card li{position:relative;list-style:none;padding-left:16px;transition:transform .3s,color .3s}
.card li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--ac);transform:scale(.6);transition:transform .3s}
.card:hover li{transform:translateX(6px);color:var(--navy)}.card:hover li::before{transform:scale(1.15)}
.card:hover li:nth-child(2){transition-delay:.05s}.card:hover li:nth-child(3){transition-delay:.1s}
/* link arrow chases the text */
.card>a{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ac)}
.card>a:hover i{transform:translateX(7px)}
@media (hover:none){.card:hover{transform:none}}
@media (prefers-reduced-motion:reduce){.js .services .card.rv{transform:none}.svc-intro h2.rv.in::after,.svc-intro .eyebrow.rv.in:before{animation:none}.card:hover{transform:none}}

/* ================= Why choose CareCove: iris reveal + word-by-word text (JS sets --p, --q) ================= */
.why{position:relative;overflow:hidden;isolation:isolate;--p:.5;--q:1;background:#0a3a52}
/* the photo opens up like an iris from the right while it slowly settles back */
.why::before{content:"";position:absolute;inset:-4% -4%;z-index:-2;
  background:url(../img/why.jpg) center/cover no-repeat;
  clip-path:circle(calc(16% + var(--p) * 90%) at 76% 50%);transform:scale(calc(1.25 - var(--p) * .15));will-change:clip-path,transform}
.why::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,43,62,.97) 30%,rgba(7,43,62,.12))}
.why-txt{position:relative;z-index:1}
/* words light up one by one as the section scrolls in (JS wraps each word in .w) */
.why .w{display:inline-block;--k:clamp(0, calc(var(--q) * (var(--tot, 40) + 6) - var(--i, 0)), 1);opacity:calc(.14 + var(--k) * .86);filter:blur(calc((1 - var(--k)) * 3px))}
@media (prefers-reduced-motion:reduce){.why::before{clip-path:none;transform:none}}

/* ================= How it works: scroll-driven stepper (JS sets --pr and .done) ================= */
.how li i::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--blue);opacity:0;pointer-events:none}
.how.anim li{transition:translate .5s cubic-bezier(.2,.8,.2,1),opacity .75s ease,transform .75s ease}
.how.anim li b,.how.anim li span{transition:opacity .5s,color .4s}
.how.anim li:not(.done) b,.how.anim li:not(.done) span{opacity:.42}
.how.anim li:not(.done) i{background:#cfe0e9;color:var(--navy2)}
.how.anim li i{transition:background .4s,color .3s,transform .3s,box-shadow .3s}
.how.anim li.done{translate:0 -4px}
.how.anim li.done i{background:var(--blue);color:transparent;box-shadow:0 0 0 7px rgba(27,130,200,.16)}
.how.anim li.done i::before{content:"\2713";position:absolute;color:#fff;font-size:.85rem;animation:chk .45s cubic-bezier(.3,1.7,.5,1) both}
.how.anim li.done i::after{animation:burst .9s ease-out}
.how.anim li.done b{color:var(--blue)}
@keyframes burst{0%{transform:scale(1);opacity:.85}100%{transform:scale(2.5);opacity:0}}
@keyframes chk{from{transform:scale(0) rotate(-60deg)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.how li.done i::before,.how li.done i::after{animation:none}}


/* ===== Family Visibility: image effects + Care Summary chart ===== */
.round{position:relative;overflow:hidden;isolation:isolate;animation:halo 3.4s ease-in-out infinite}
.round::before{content:"";position:absolute;inset:0;background:inherit;z-index:-1;transform-origin:60% 40%;animation:kenburns 10s ease-in-out infinite alternate}
.live-badge{position:absolute;left:8px;bottom:8px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;background:rgba(10,47,71,.72);backdrop-filter:blur(4px);color:#fff;font-size:.62rem;font-weight:500;letter-spacing:.02em;animation:badgefloat 3s ease-in-out infinite}
.live-badge i{width:7px;height:7px;border-radius:50%;background:#3ddc97;box-shadow:0 0 0 0 rgba(61,220,151,.7);animation:livedot 1.6s infinite}
@keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.16) translate(-3%,-2%)}}
@keyframes halo{0%,100%{box-shadow:0 6px 18px rgba(14,122,134,.18),0 0 0 0 rgba(27,159,227,.28)}50%{box-shadow:0 10px 26px rgba(14,122,134,.3),0 0 0 9px rgba(27,159,227,0)}}
@keyframes badgefloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes livedot{0%{box-shadow:0 0 0 0 rgba(61,220,151,.7)}100%{box-shadow:0 0 0 8px rgba(61,220,151,0)}}

.bars{gap:7px;padding:0 0 0 0;border-bottom:2px solid #e3eef2}
.bars s{width:16px;border-radius:5px 5px 0 0;transform-origin:bottom;animation:grow 1s var(--d,0s) cubic-bezier(.2,.9,.3,1.2) both,breathe 2.6s calc(var(--d,0s) + 1s) ease-in-out infinite alternate}
.bars s:nth-child(1){height:26px;--d:0s;background:linear-gradient(180deg,#34d399,#0e9f8a);box-shadow:0 4px 10px rgba(14,159,138,.35)}
.bars s:nth-child(2){height:44px;--d:.18s;animation-delay:.18s,1.18s;background:linear-gradient(180deg,#5cc4ff,#1b7fe3);box-shadow:0 4px 10px rgba(27,127,227,.35)}
.bars s:nth-child(3){height:62px;--d:.36s;animation-delay:.36s,1.36s;background:linear-gradient(180deg,#ffc166,#ff7a3d);box-shadow:0 4px 10px rgba(255,122,61,.38)}
.bars s:nth-child(1){animation-delay:0s,1s}
.js .bars:not(.live) s{animation:none;transform:scaleY(0)}
@keyframes breathe{from{transform:scaleY(1)}to{transform:scaleY(.8)}}
@media (prefers-reduced-motion:reduce){.round,.round::before,.live-badge,.live-badge i,.bars s{animation:none!important}.js .bars:not(.live) s{transform:none}}

/* ===== Lifestyle support: readable, polished chips ===== */
.life-main{min-height:300px;box-shadow:0 12px 34px rgba(14,122,134,.12)}
.life-txt{padding:30px 0 22px 32px}
.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 24px 24px;align-self:end}
.chips span{align-items:center;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.9);box-shadow:0 8px 20px rgba(10,47,71,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:.68rem;line-height:1.35}
.chips b{font-size:.78rem}
.chips i{background:var(--mint);box-shadow:none;font-size:.9rem}
.chips span:nth-child(2) i{background:var(--sky);color:var(--blue)}
.chips span:nth-child(3) i{background:var(--lav);color:#7c5ce0}
.chips span:hover{box-shadow:0 14px 28px rgba(10,47,71,.2)}
.chips span:hover i{color:#fff!important}.chips span:nth-child(1):hover i{background:var(--teal)}.chips span:nth-child(2):hover i{background:var(--blue)}.chips span:nth-child(3):hover i{background:#7c5ce0}
@media (max-width:1100px){.chips{grid-template-columns:1fr;padding:0 20px 20px;max-width:340px}}
@media (max-width:860px){.chips{max-width:none;padding:0 20px 20px}.life-txt{padding:26px 22px 18px}}


/* ===== Testimonial carousel ===== */
.q-track{display:grid}
.q-slide{grid-area:1/1;margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:16px;opacity:0;visibility:hidden;transform:translateX(24px);transition:opacity .6s ease,transform .6s ease,visibility 0s .6s}
.q-slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease,transform .6s ease}
.av.ini{display:grid;place-items:center;background:linear-gradient(135deg,#1b9fe3,#0e7a86);color:#fff;font-size:.8rem;font-weight:600}
.q-dots{display:flex;gap:8px}
.q-dots button{width:8px;height:8px;border-radius:99px;border:0;padding:0;background:rgba(255,255,255,.35);cursor:pointer;transition:width .3s,background .3s}
.q-dots button.on{width:24px;background:#fff}
@media (prefers-reduced-motion:reduce){.q-slide{transition:none;transform:none}}


/* ===== Emergency Support: parallax background + driving ambulance ===== */
.sos::before{content:"";position:absolute;left:0;right:0;top:-45%;bottom:-45%;z-index:0;background:url(../img/emergency.jpg) center/cover no-repeat,linear-gradient(90deg,#0b4d6b,#1b9fe3);transform:translate3d(0,var(--sp,0px),0);will-change:transform}
.sos::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(7,52,75,.93) 0%,rgba(8,66,92,.78) 45%,rgba(8,66,92,.28) 100%)}
.sos .sos-in{position:relative;z-index:2;padding-top:44px;padding-bottom:44px}
.sos .big{position:relative;display:inline-block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3));line-height:0;}
.sos .big::after{content:"";position:absolute;right:100%;top:22%;width:110px;height:56%;margin-right:6px;opacity:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.85) 0 3px,transparent 3px 11px);-webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000);}
@media (prefers-reduced-motion:reduce){.sos .big,.sos .big::after{animation:none}.sos::before{transform:none}}

.van svg{display:block;overflow:visible}
.van .sl{animation:siren .7s steps(1) infinite}
.van .sl-b{fill:#2aa7ff;animation-name:sirenb}.van .sl-r{fill:#ff3b3b;animation-name:sirenr}
.van .wh{transform-box:view-box;animation:spin .55s linear infinite}
@keyframes sirenb{0%,100%{opacity:1;filter:drop-shadow(0 0 6px #2aa7ff)}50%{opacity:.25;filter:none}}
@keyframes sirenr{0%,100%{opacity:.25;filter:none}50%{opacity:1;filter:drop-shadow(0 0 6px #ff3b3b)}}
@keyframes spin{to{transform:rotate(360deg)}}
.sos .big::after{top:30%;height:42%}
@media (prefers-reduced-motion:reduce){.van .sl,.van .wh{animation:none}}

/* desktop: true fixed-background parallax (photo stays still while the section scrolls over it) */
@media (min-width:992px) and (prefers-reduced-motion:no-preference){.sos::before{top:0;bottom:0;transform:none;will-change:auto;background-attachment:fixed,fixed,fixed,fixed;background-position:center 40%}}
.sos{min-height:230px;display:flex;align-items:center}.sos .sos-in{width:100%}

/* vehicle: drives right up to the call button, turns around, drives back, turns again (distance --go is set in JS) */
.sos .big{z-index:1;animation:drive 10s infinite}
.sos .sos-in>div{position:relative;z-index:2}
.sos .big::after{animation:trail 10s linear infinite}
@keyframes drive{
 0%,8%{transform:translate(0,var(--ly,0px)) scaleX(1);animation-timing-function:cubic-bezier(.55,0,.35,1)}
 42%{transform:translate(var(--go,300px),var(--ly,0px)) scaleX(1);animation-timing-function:ease-in-out}
 47%{transform:translate(var(--go,300px),var(--ly,0px)) scaleX(-1);animation-timing-function:cubic-bezier(.55,0,.35,1)}
 52%{transform:translate(var(--go,300px),var(--ly,0px)) scaleX(-1);animation-timing-function:cubic-bezier(.55,0,.35,1)}
 86%{transform:translate(0,var(--ly,0px)) scaleX(-1);animation-timing-function:ease-in-out}
 91%,100%{transform:translate(0,var(--ly,0px)) scaleX(1)}}
@keyframes trail{0%,9%{opacity:0}14%,38%{opacity:1}43%,53%{opacity:0}58%,80%{opacity:1}85%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.sos .big,.sos .big::after{animation:none}}

/* the vehicle drives on its own "road" below the text so it never covers the heading */
.sos{min-height:270px}
.sos .big{--ly:78px}
.sos-in::after{content:"";position:absolute;left:0;right:0;bottom:-17px;border-top:2px dashed rgba(255,255,255,.35);pointer-events:none}
@media (max-width:860px){.sos{min-height:0}.sos .big{--ly:0px}.sos-in::after{display:none}}

/* CSS-only default for how far the vehicle drives (JS refines it to the exact button position) */
.sos .big{--go:calc(min(100vw,1180px) - 423px)}
@media (max-width:860px){.sos .big{--go:calc(50vw - 68px)}}

/* Emergency: heading starts at the same left edge as every other section; the vehicle lives on the road line instead */
.sos .big{translate:none}
@media (min-width:861px){
 .sos .sos-in{grid-template-columns:1fr auto;padding-top:40px;padding-bottom:62px}
 .sos .big{position:absolute;left:24px;bottom:-20px;--ly:0px}
}

@media (min-width:861px){.sos .big{--go:calc(min(100vw,1180px) - 160px)}}


/* ===== Footer: better icons + credit line ===== */
.soc{gap:10px;flex-wrap:wrap}
.foot-in .soc a{display:grid;place-items:center;width:38px;height:38px;margin:0;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);opacity:1;font-size:1rem;transition:transform .3s cubic-bezier(.3,1.6,.5,1),background .3s,border-color .3s,box-shadow .3s}
.foot-in .soc a i{width:auto;color:#fff;transform:none!important}
.foot-in .soc a:hover{transform:translateY(-5px) scale(1.08);border-color:transparent;box-shadow:0 8px 18px rgba(0,0,0,.35)}
.soc .s-facebook:hover{background:#1877f2}
.soc .s-instagram:hover{background:linear-gradient(45deg,#f9a03f,#e1306c 55%,#833ab4)}
.soc .s-linkedin:hover{background:#0a66c2}
.soc .s-youtube:hover{background:#ff0000}
.foot-in>div:last-child a{display:flex;align-items:center;gap:10px}
.foot-in>div:last-child a i{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:rgba(27,159,227,.16);color:#5cc4ff;font-size:.8rem;transition:background .3s,color .3s,transform .3s}
.foot-in>div:last-child a:hover i{background:var(--blue);color:#fff;transform:scale(1.1) rotate(-8deg)}
.foot-in>div:last-child a:nth-of-type(2) i{background:rgba(37,211,102,.16);color:#4be08a}
.foot-in>div:last-child a:nth-of-type(2):hover i{background:#25d366;color:#fff}
.foot-in>div:last-child a:nth-of-type(4) i{background:rgba(255,107,107,.16);color:#ff8f8f}
.foot-in>div:last-child a:nth-of-type(4):hover i{background:#ff5a5a;color:#fff}
.legal .copy{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.legal .copy b{color:#fff;font-weight:600;background:linear-gradient(90deg,#5cc4ff,#34d399);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.legal .sep{font-style:normal;opacity:.5;margin:0 4px}
@media (max-width:560px){.legal .sep{display:none}.legal .copy{display:block;line-height:1.8}.legal .copy b{display:inline}}

/* image logo (transparent, no chip) - light variant is used on the dark navy nav + footer */
.logo.has-img{display:inline-flex;align-items:center;line-height:0;background:none;padding:0}
.logo.has-img img{display:block;height:68px;width:auto;transition:transform .25s}
.logo.has-img:hover img{transform:scale(1.04)}
.foot .logo.has-img img{height:84px}
@media (max-width:860px){:root{--nav-h:72px}.logo.has-img img{height:56px}.foot .logo.has-img img{height:72px}}