html{font-size:90%;--s:.9}
:root{--blue:#1F5FD1;--navy:#092F6E;--pink:#E94F7A;--teal:#2DD0C5;--soft:#eef3ff;--white:#fff;--r:1.125rem;--w:1160px;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:6rem}
body{margin:0;font:400 1.0625rem/1.6 'Outfit',system-ui,sans-serif;color:var(--navy);background:#fff;overflow-x:clip}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--pink);outline-offset:0.1875rem}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
.h{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;text-transform:uppercase;line-height:1.08;letter-spacing:.01em}
.t1{font-size:clamp(2.125rem,calc(4.8vw*var(--s)),3.5rem)}
.t2{font-size:clamp(1.625rem,calc(3.2vw*var(--s)),2.375rem)}
.t3{font-size:1.1875rem}
.out{color:#fff;-webkit-text-stroke:2px var(--navy);paint-order:stroke fill}
.c{width:min(calc(100% - 3rem),var(--w));margin-inline:auto}
.s{padding:4.5rem 0}
.s.alt{background:var(--soft)}
.s.blue{background:var(--blue);color:#fff}
.s.navy{background:var(--navy);color:#fff}
.sh{max-width:42.5rem;margin-bottom:2.25rem}
.sh p{margin-top:0.625rem;font-size:1.125rem}
.sh.center{margin-inline:auto;text-align:center}
.eyebrow{display:inline-block;background:var(--teal);color:var(--navy);border:3px solid var(--navy);padding:0.1875rem 0.875rem;font-weight:600;font-size:0.9375rem;margin-bottom:0.875rem;transform:rotate(-2deg)}
/* buttons */
.btn{--bg:var(--pink);--fg:#fff;position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:0.625rem;min-height:2.875rem;padding:0.6875rem 1.5rem;background:var(--bg);color:var(--fg);border:3px solid var(--navy);border-radius:0.75rem;font-family:'Bowlby One','Arial Black',sans-serif;font-size:0.9375rem;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;cursor:pointer;box-shadow:0.3125rem 0.3125rem 0 var(--navy);transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .2s}
.btn::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s var(--ease)}
.btn:hover{transform:translate(2px,2px);box-shadow:0.1875rem 0.1875rem 0 var(--navy)}
.btn:hover::before{left:130%}
.btn:active{transform:translate(0.3125rem,0.3125rem);box-shadow:0 0 0 var(--navy)}
.btn .arr{display:inline-block;transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(0.3125rem)}
.btn.white{--bg:#fff;--fg:var(--navy)}
.btn.teal{--bg:var(--teal);--fg:var(--navy)}
.btn.navy{--bg:var(--navy);--fg:#fff;box-shadow:0.3125rem 0.3125rem 0 var(--pink)}
.btn.sm{min-height:2.5rem;padding:0.5rem 1.125rem;font-size:0.8125rem;box-shadow:0.25rem 0.25rem 0 var(--navy)}
.btn.sm:hover{box-shadow:2px 2px 0 var(--navy)}
.btn.block{width:100%}
.btn.wa svg{animation:ring 2.6s infinite}
.btn svg{width:1.125rem;height:1.125rem;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@keyframes ring{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(-14deg)}85%{transform:rotate(12deg)}95%{transform:rotate(-6deg)}}
.row{display:flex;gap:0.875rem;flex-wrap:wrap;align-items:center}
/* top bar + header */
.tb{background:var(--navy);color:#fff;font-size:0.875rem}
.tb .c{display:flex;justify-content:space-between;gap:1rem;padding:0.4375rem 0}
.tb nav,.tb div{display:flex;gap:1.375rem}
.tb a{text-decoration:none;opacity:.9}
.tb a:hover{opacity:1;text-decoration:underline}
.hd{position:sticky;top:0;z-index:50;background:var(--blue);color:#fff;border-bottom:3px solid var(--navy)}
.hd .c{display:flex;align-items:center;gap:1.375rem;min-height:4.5rem}
.logo{display:flex;align-items:center;gap:0.75rem;text-decoration:none;color:#fff;line-height:1;flex:none}
.logo svg{width:2.75rem;height:2.75rem;flex:none}
.logo span{font-family:'Bowlby One','Arial Black',sans-serif;font-size:1.5rem;letter-spacing:.03em}
.mp{display:contents}
.nav{display:flex;gap:0.25rem;margin-left:auto}
.nav a{position:relative;padding:0.625rem 0.8125rem;font-weight:500;text-decoration:none;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0.8125rem;right:0.8125rem;bottom:0.25rem;height:0.1875rem;border-radius:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.hd-cta{display:flex;gap:0.625rem;flex:none}
.mp-info{display:none}
.burger{display:none;margin-left:auto;min-width:2.875rem;min-height:2.875rem;background:var(--pink);color:#fff;border:3px solid var(--navy);border-radius:0.75rem;cursor:pointer;padding:0 0.875rem;font:600 0.9375rem 'Outfit',sans-serif}
/* hero */
.hero{background:var(--blue);color:#fff;padding:3.5rem 0 4.5rem;overflow:hidden}
.hero .c{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.hero h1{max-width:13ch}
.hero p.lead{font-size:1.25rem;max-width:36ch;margin:1rem 0 1.625rem}
.mock{position:relative;max-width:26.25rem;justify-self:end;width:100%}
.mock .win{background:#fff;color:var(--navy);border:4px solid var(--navy);border-radius:1.125rem;box-shadow:0.625rem 0.625rem 0 var(--pink);overflow:hidden}
.mock .bar{background:var(--teal);border-bottom:4px solid var(--navy);padding:0.5625rem 0.875rem;display:flex;gap:0.4375rem}
.mock .bar i{width:0.6875rem;height:0.6875rem;border-radius:50%;background:var(--navy)}
.mock .bd{padding:1.375rem;display:grid;gap:0.6875rem}
.mock .l{height:0.75rem;border-radius:0.375rem;background:var(--soft)}
.mock .hd2{height:1.875rem;width:70%;background:var(--navy);border-radius:0.5rem}
.mock .bt{height:2.125rem;width:42%;background:var(--pink);border:3px solid var(--navy);border-radius:0.5rem}
.mock .tl{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5625rem}
.mock .tl i{aspect-ratio:1;border-radius:0.5625rem;border:3px solid var(--navy);background:var(--teal)}
.mock .tl i:nth-child(2){background:var(--pink)}.mock .tl i:nth-child(3){background:var(--blue)}
.chip{position:absolute;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:0.75rem;padding:0.375rem 0.875rem;font-weight:600;font-size:0.9375rem;box-shadow:0.25rem 0.25rem 0 var(--navy);animation:float 5s ease-in-out infinite}
.chip.a{left:-2.125rem;top:2.25rem;background:var(--teal)}
.chip.b{right:-0.875rem;bottom:-1.125rem;background:var(--pink);color:#fff;animation-delay:-2.5s}
@keyframes float{50%{transform:translateY(-0.5rem)}}
/* marquee */
.mq{background:var(--pink);color:#fff;border-block:0.1875rem solid var(--navy);overflow:hidden;padding:0.8125rem 0}
.mq-t{display:flex;width:max-content;animation:mq 34s linear infinite}
.mq:hover .mq-t{animation-play-state:paused}
.mq-t span{font-family:'Bowlby One','Arial Black',sans-serif;text-transform:uppercase;font-size:1.0625rem;white-space:nowrap;display:flex;align-items:center}
.mq-t span::after{content:"";width:0.75rem;height:0.75rem;border-radius:50%;background:var(--navy);margin:0 1.75rem}
@keyframes mq{to{transform:translateX(-50%)}}
/* grids + cards */
.g{display:grid;gap:1.25rem}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.gp{grid-template-columns:repeat(auto-fit,minmax(16.25rem,1fr))}
.card{background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:var(--r);padding:1.5rem;display:flex;flex-direction:column;gap:0.5rem;text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
a.card:hover,.card.lift:hover{transform:translateY(-0.3125rem);box-shadow:0.4375rem 0.4375rem 0 var(--pink)}
.card p{font-size:1rem}
.num{width:2.625rem;height:2.625rem;border-radius:50%;background:var(--teal);border:3px solid var(--navy);display:grid;place-items:center;font-family:'Bowlby One',sans-serif;font-size:1rem}
.card .more{margin-top:auto;padding-top:0.5rem;font-weight:600;color:var(--blue)}
.card.cta-card{background:var(--navy);color:#fff;justify-content:center;align-items:flex-start}
.dl{align-self:flex-start;font-size:0.8125rem;font-weight:600;background:var(--soft);border-radius:6.1875rem;padding:1px 0.75rem}
/* tabs */
.tabs{display:flex;gap:0.625rem;margin-bottom:1.5rem;flex-wrap:wrap}
.tabs button{font:600 1rem 'Outfit',sans-serif;min-height:2.75rem;padding:0.5rem 1.125rem;border:3px solid var(--navy);border-radius:62.4375rem;background:#fff;color:var(--navy);cursor:pointer;transition:background .2s,color .2s,transform .2s}
.tabs button:hover{transform:translateY(-2px)}
.tabs button[aria-selected=true]{background:var(--navy);color:#fff}
/* plan cards */
.pl{position:relative;gap:0.375rem}
.pl.hot{box-shadow:0.5rem 0.5rem 0 var(--pink)}
.badge{position:absolute;top:-0.875rem;right:1.125rem;background:var(--pink);color:#fff;border:3px solid var(--navy);padding:1px 0.875rem;font-weight:600;font-size:0.875rem;transform:rotate(3deg)}
.pl .tag{font-size:0.9375rem;min-height:2.875rem}
.price{font-family:'Bowlby One',sans-serif;font-size:2.5rem;line-height:1.1;margin-top:0.25rem}
.price small{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:600}
.fee{align-self:flex-start;background:var(--teal);border:2px solid var(--navy);padding:1px 0.75rem;font-weight:600;font-size:0.875rem}
.meta{font-size:0.875rem;font-weight:600;background:var(--soft);border-radius:0.625rem;padding:0.375rem 0.75rem}
.ck{list-style:none;padding:0;display:grid;gap:2px}
.ck li{display:flex;gap:0.625rem;align-items:flex-start;padding:0.25rem 0;font-size:0.9375rem}
.ck li::before{content:"";flex:none;margin-top:0.3125rem;width:1.0625rem;height:1.0625rem;border-radius:50%;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23092F6E' stroke-width='2.4'%3E%3Cpath d='M2 6.5l2.8 2.8L10 3.5'/%3E%3C/svg%3E") center/0.625rem no-repeat}
.pl .ck{margin:0.375rem 0 0.75rem;flex:1;align-content:start}
.pl .row{margin-top:auto}
.more-n{font-size:0.875rem;opacity:.8;margin:-0.375rem 0 0.5rem}
.chips{display:flex;flex-wrap:wrap;gap:0.5rem;list-style:none;padding:0}
.chips li{background:var(--soft);border:2px solid var(--navy);padding:2px 0.875rem;font-weight:600;font-size:0.9375rem;border-radius:6.1875rem}
.note{font-size:0.9375rem;margin-top:1.125rem;opacity:.9}
.rows{list-style:none;padding:0;border:3px solid var(--navy);border-radius:var(--r);overflow:hidden;background:#fff}
.rows li{display:flex;justify-content:space-between;gap:1rem;padding:0.6875rem 1.125rem;border-bottom:2px solid var(--soft);align-items:baseline}
.rows li:last-child{border:0}
.rows b{display:block;font-weight:600}
.rows span{font-size:0.9375rem;opacity:.85}
.rows em{font-style:normal;font-family:'Bowlby One',sans-serif;font-size:0.875rem;white-space:nowrap;color:var(--pink)}
.addons{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.addons h3{margin-bottom:0.625rem}
/* work */
.work-c{padding:0;overflow:hidden;gap:0}
.shot{aspect-ratio:16/9;display:grid;place-items:center;background:repeating-linear-gradient(45deg,var(--soft),var(--soft) 0.875rem,#fff 0.875rem,#fff 1.75rem);border-bottom:3px solid var(--navy);font-weight:600;font-size:0.9375rem;transition:transform .5s var(--ease)}
.work-c:hover .shot{transform:scale(1.04)}
.shotw{overflow:hidden;border-bottom:3px solid var(--navy)}
.shotw .shot{border:0}
.work-c .cap{padding:1.125rem 1.375rem}
.work-c .cap b{display:block;font-family:'Bowlby One',sans-serif;font-weight:400;text-transform:uppercase;font-size:1.1875rem}
/* steps */
.step{position:relative;padding-top:0.375rem}
.step .num{background:var(--pink);color:#fff;margin-bottom:0.625rem;width:3.125rem;height:3.125rem;font-size:1.25rem}
.step h3{margin-bottom:0.25rem}
.step p{font-size:1rem}
/* sbs */
.deal{display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:center;background:var(--blue);color:#fff;border:3px solid var(--navy);border-radius:1.5rem;padding:2.5rem;box-shadow:0.625rem 0.625rem 0 var(--navy);overflow:hidden}
.deal .ck li{color:#fff}
.deal .pc{background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1.25rem;padding:1.625rem;text-align:center;box-shadow:0.5rem 0.5rem 0 var(--pink)}
.deal .price{font-size:4rem}
/* faq */
.faq{display:grid;gap:0.75rem;max-width:51.25rem}
.faq details,.file{border:3px solid var(--navy);border-radius:0.875rem;background:#fff;overflow:hidden;transition:box-shadow .25s}
.faq details[open],.file[open]{box-shadow:0.375rem 0.375rem 0 var(--teal)}
.faq summary,.file summary{cursor:pointer;list-style:none;font-weight:600;padding:0.875rem 1.25rem;display:flex;justify-content:space-between;gap:1rem;align-items:center;min-height:3.25rem}
.faq summary::-webkit-details-marker,.file summary::-webkit-details-marker{display:none}
.faq summary::after,.file summary::after{content:"+";flex:none;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center;font-size:1.25rem;line-height:1;transition:transform .3s var(--ease)}
.faq details[open] summary::after,.file[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 1.25rem 1.125rem;font-size:1rem;animation:open .35s var(--ease)}
@keyframes open{from{opacity:0;transform:translateY(-0.5rem)}}
.file summary{font-family:'Bowlby One',sans-serif;text-transform:uppercase;font-size:1rem;font-weight:400;background:var(--soft)}
.file .ans{padding:1.125rem 1.25rem;animation:open .35s var(--ease)}
.file .ans p+p,.file .ans ul{margin-top:0.625rem}
/* quotes */
.q blockquote{font-size:1rem}
.q figcaption{font-weight:600;font-size:0.9375rem;color:var(--pink);margin-top:auto}
/* cta band */
.cta{background:var(--navy);color:#fff;text-align:center;padding:4rem 0}
.cta p{max-width:52ch;margin:0.75rem auto 1.625rem;font-size:1.125rem}
.cta .row{justify-content:center}
/* page hero */
.ph{background:var(--blue);color:#fff;padding:2.75rem 0 3.25rem}
.ph p.lead{font-size:1.1875rem;max-width:56ch;margin-top:0.75rem}
.crumb{font-size:0.9375rem;margin-bottom:0.875rem;opacity:.9}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}
.split{display:grid;grid-template-columns:1.4fr .8fr;gap:2.25rem;align-items:start}
.side{position:sticky;top:6.5rem;background:#fff;border:3px solid var(--navy);border-radius:var(--r);padding:1.5rem;box-shadow:0.5rem 0.5rem 0 var(--pink);display:grid;gap:0.625rem}
.ck.two{grid-template-columns:1fr 1fr;gap:2px 1.5rem}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));gap:1rem}
.fact{background:var(--soft);border-radius:0.875rem;padding:0.875rem 1.125rem}
.fact b{display:block;font-size:0.8125rem;text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.pv{border:4px solid var(--navy);border-radius:1rem;overflow:hidden;background:#fff;box-shadow:0.625rem 0.625rem 0 var(--pink);max-width:55rem;margin:0 auto}
.pv .bar{background:var(--teal);border-bottom:4px solid var(--navy);padding:0.5625rem 0.875rem;display:flex;gap:0.4375rem}
.pv .bar i{width:0.6875rem;height:0.6875rem;border-radius:50%;background:var(--navy)}
.pv .view{--ph:28.75rem;height:var(--ph);overflow:hidden;position:relative}
.pv .scroll{animation:pvs 16s ease-in-out infinite alternate}
.pv:hover .scroll{animation-play-state:paused}
.pv .scroll>div{padding:1.625rem;display:grid;gap:0.75rem;border-bottom:2px solid var(--soft)}
.pv .scroll .b{height:6.875rem;border-radius:0.75rem;background:var(--soft);border:3px solid var(--navy)}
.pv .scroll .b.t{background:var(--teal)}.pv .scroll .b.p{background:var(--pink)}.pv .scroll .b.bl{background:var(--blue)}
.pv .scroll img{display:block;width:100%}
@keyframes pvs{to{transform:translateY(calc(-100% + var(--ph)))}}
.pvhint{text-align:center;font-size:0.875rem;margin-top:1.125rem;opacity:.75}
/* forms */
.fm{display:grid;gap:1rem}
.fm label{font-weight:600;display:grid;gap:0.375rem;font-size:1rem}
.fm input,.fm select,.fm textarea{font:inherit;padding:0.75rem 0.875rem;border:3px solid var(--navy);border-radius:0.75rem;background:#fff;color:var(--navy);min-height:3rem;width:100%}
.fm textarea{min-height:8.125rem;resize:vertical}
.fm .two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fcard{background:#fff;border:3px solid var(--navy);border-radius:1.375rem;padding:1.875rem;box-shadow:0.5rem 0.5rem 0 var(--teal)}
.bar-s{display:flex;gap:0.5rem;margin-bottom:1.375rem}
.bar-s i{flex:1;height:0.5rem;border-radius:0.25rem;background:var(--soft);border:2px solid var(--navy);transition:background .3s}
.bar-s i.on{background:var(--pink)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
.opt{position:relative}
.opt input{position:absolute;opacity:0}
.opt span{display:block;border:3px solid var(--navy);border-radius:0.875rem;padding:0.75rem 1rem;font-weight:600;cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s;background:#fff}
.opt small{display:block;font-weight:400;font-size:0.875rem}
.opt span:hover{transform:translateY(-2px)}
.opt input:checked+span{background:var(--teal);box-shadow:0.25rem 0.25rem 0 var(--navy)}
.opt input:focus-visible+span{outline:3px solid var(--pink);outline-offset:2px}
.wstep[hidden]{display:none}
.wstep{animation:open .4s var(--ease)}
.hello{font-size:clamp(2.125rem,calc(5.4vw*var(--s)),4rem)}
.ct{display:grid;grid-template-columns:1.1fr .9fr;gap:2.25rem;align-items:start}
/* footer */
footer{background:var(--navy);color:#fff;padding:3.25rem 0 1.5rem}
.fg{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
.fg h4{font-family:'Bowlby One',sans-serif;font-weight:400;text-transform:uppercase;font-size:0.875rem;margin-bottom:0.625rem;color:var(--teal)}
.fg a{display:block;text-decoration:none;padding:0.25rem 0;font-size:1rem;opacity:.9}
.fg a:hover{opacity:1;text-decoration:underline}
.fg p{font-size:0.9375rem;margin-top:0.75rem;max-width:34ch;opacity:.85}
.fb{margin-top:2rem;padding-top:1.125rem;border-top:2px solid rgba(255,255,255,.2);font-size:0.875rem;display:flex;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;opacity:.85}
/* animations */
.js .rv{opacity:0;transform:translateY(1.5rem);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(1.125rem)}}
@keyframes fadeUpP{from{opacity:0;transform:translateY(1.125rem) rotate(-2deg)}to{opacity:1;transform:rotate(-2deg)}}
.js .hero .eyebrow,.js .ph .eyebrow{animation:fadeUpP .6s .05s var(--ease) both}
.js .hero h1,.js .ph h1{animation:fadeUp .7s .15s var(--ease) both}
.js .hero .lead,.js .ph .lead,.js .ph .crumb{animation:fadeUp .7s .28s var(--ease) both}
.js .hero .row,.js .ph .row{animation:fadeUp .7s .4s var(--ease) both}
.js .hero .mock{animation:fadeUp .9s .35s var(--ease) both}
#pt{position:fixed;inset:0;z-index:999;background:var(--blue);pointer-events:none;clip-path:circle(0% at var(--x,50%) var(--y,50%))}
#pt.go{clip-path:circle(150% at var(--x,50%) var(--y,50%));transition:clip-path .55s cubic-bezier(.7,0,.2,1)}
#pt.cover{clip-path:circle(150% at 50% 50%)}
#pt.cover.out{opacity:0;transition:opacity .55s ease}
body.enter main{animation:enter .7s var(--ease) both}
@keyframes enter{from{opacity:0;transform:scale(.97) translateY(0.875rem)}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .js .rv{opacity:1;transform:none;transition:none}
 .js .hero *,.js .ph *{animation:none!important}
 .mq-t,.chip,.btn.wa svg,.pv .scroll{animation:none}
 body.enter main{animation:none}.btn,.btn::before,.card{transition:none}
}
/* responsive */
@media(max-width:900px){
 .burger{display:inline-flex;align-items:center;justify-content:center}
 .mp{display:none;position:absolute;left:0;right:0;top:100%;background:var(--blue);padding:0.5rem 1.5rem 1.375rem;border-bottom:3px solid var(--navy);flex-direction:column;gap:0.375rem}
 .hd.open .mp{display:flex}
 .nav{flex-direction:column;margin:0}
 .nav a{padding:0.875rem 0.25rem;border-top:2px solid rgba(255,255,255,.2);font-size:1.125rem}
 .nav a::after{display:none}
 .hd-cta{flex-direction:column;margin-top:0.5rem}
 .mp-info{display:flex;flex-direction:column;gap:0.25rem;margin-top:0.625rem;font-size:0.9375rem}
 .tb{display:none}
 .g4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
 .s{padding:3rem 0}
 .sh{margin-bottom:1.625rem}
 .hero{padding:2rem 0 2.75rem}
 .hero .c,.split,.ct,.deal{grid-template-columns:1fr}
 .hero .c{gap:1.875rem}
 .hero h1{max-width:none}
 .hero p.lead{font-size:1.125rem}
 .mock{justify-self:center;max-width:21.25rem}
 .chip.a{left:-0.5rem}.chip.b{right:-0.25rem}
 .g3{grid-template-columns:1fr 1fr}
 .side{position:static}
 .deal{padding:1.625rem}
 .addons{grid-template-columns:1fr}
 .fg{grid-template-columns:1fr 1fr}
 .cta{padding:3rem 0}
}
@media(max-width:620px){
 body{font-size:1rem}
 .c{width:min(calc(100% - 2.25rem),var(--w))}
 .g2,.g3,.g4,.fm .two,.opts,.ck.two{grid-template-columns:1fr}
 .tabs{flex-wrap:nowrap;overflow-x:auto;margin-inline:-1.125rem;padding:0 1.125rem 0.5rem}
 .tabs button{flex:none}
 .row .btn{flex:1 1 100%}
 .hd .c{min-height:4rem}.logo svg{width:2.375rem;height:2.375rem}.logo span{font-size:1.3125rem}
 .fcard{padding:1.25rem}
 .fg{grid-template-columns:1fr}
 .rows li{flex-direction:column;gap:2px}
 .pv .view{--ph:21.25rem}
 .price{font-size:2.25rem}
}

/* ---- graphics + friendliness pass ---- */
.ico{flex:none;width:3.375rem;height:3.375rem;border-radius:0.9375rem;background:var(--teal);border:3px solid var(--navy);display:grid;place-items:center;box-shadow:0.1875rem 0.1875rem 0 var(--navy);transition:transform .3s var(--ease)}
.ico svg{width:1.75rem;height:1.75rem;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico.c1{background:var(--pink)}.ico.c1 svg{stroke:#fff}
.ico.c2{background:#fff}
.card:hover .ico{transform:rotate(-8deg) scale(1.08)}
.stp{font-weight:600;font-size:0.875rem;color:var(--pink);text-transform:uppercase;letter-spacing:.08em}
.step{display:flex;flex-direction:column;gap:0.375rem;align-items:flex-start}
.s.alt{background-color:var(--soft);background-image:radial-gradient(rgba(31,95,209,.13) 1.6px,transparent 1.7px);background-size:1.5rem 1.5rem}
/* art compositions */
.mock,.art{position:relative}
.mock{max-width:27.5rem;padding:0 2.125rem 2.5rem 0}
.art{max-width:23.75rem;width:100%;justify-self:end;padding:0 1.875rem 2.125rem 0}
.art.sm{max-width:18.75rem;margin:0 auto 1.125rem;justify-self:center}
.win{position:relative;z-index:1}
.blob1,.blob2{position:absolute;border-radius:50%;z-index:0}
.blob1{width:62%;aspect-ratio:1;background:var(--teal);opacity:.35;right:0;top:-10%;border-radius:50% 50% 40% 60%}
.blob2{width:22%;aspect-ratio:1;background:var(--pink);opacity:.9;left:-6%;bottom:6%;border:3px solid var(--navy)}
.phone{position:absolute;z-index:2;right:0;bottom:0;width:30%;aspect-ratio:9/17;background:#fff;border:4px solid var(--navy);border-radius:1.25rem;box-shadow:0.3125rem 0.3125rem 0 var(--pink);padding:1.125rem 0.625rem 0.625rem;display:grid;align-content:start;gap:0.4375rem;overflow:hidden;animation:float 6s ease-in-out infinite;animation-delay:-1.5s;color:var(--navy)}
.phone .nt{position:absolute;top:0.375rem;left:50%;width:30%;height:0.3125rem;border-radius:0.1875rem;background:var(--navy);transform:translateX(-50%)}
.phone .hd2{height:1.125rem;width:80%}.phone .l{height:0.4375rem}.phone .bt{height:1.125rem;width:70%;border-width:2px}
.phone .tl{grid-template-columns:1fr 1fr;gap:0.375rem}.phone .tl i{border-width:2px;border-radius:0.375rem}
.gcard{position:absolute;z-index:3;left:-1.375rem;bottom:-0.375rem;width:48%;background:#fff;border:3px solid var(--navy);border-radius:0.875rem;box-shadow:0.3125rem 0.3125rem 0 var(--teal);padding:0.625rem 0.75rem;display:grid;gap:0.5rem;animation:float 5.5s ease-in-out infinite;color:var(--navy)}
.gcard .gh{display:flex;gap:0.5625rem;align-items:center}
.gcard .gh svg{width:1.625rem;height:1.625rem;flex:none;fill:none;stroke:var(--pink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gcard .gh>div{flex:1}.gcard .hd2{height:0.625rem;width:80%}.gcard .l{height:0.375rem}
.gp2{display:flex;gap:0.3125rem;flex-wrap:wrap}
.gp2 span{font-size:0.6875rem;font-weight:600;border:2px solid var(--navy);border-radius:6.1875rem;padding:0 0.5rem;background:var(--soft)}
.gp2 .p{background:var(--teal)}
.mock .hd2,.art .hd2,.th .hd2{height:1.875rem;width:70%;background:var(--navy);border-radius:0.5rem}
.art .bar,.art .bd{}
.art .win{background:#fff;color:var(--navy);border:4px solid var(--navy);border-radius:1.125rem;box-shadow:0.625rem 0.625rem 0 var(--pink);overflow:hidden}
.art .bar{background:var(--teal);border-bottom:4px solid var(--navy);padding:0.5625rem 0.875rem;display:flex;gap:0.4375rem}
.art .bar i{width:0.6875rem;height:0.6875rem;border-radius:50%;background:var(--navy)}
.art .bd{padding:1.25rem;display:grid;gap:0.625rem}
.art .l,.mock .l{height:0.6875rem;border-radius:0.375rem;background:var(--soft)}
.art .bt{height:2rem;width:42%;background:var(--pink);border:3px solid var(--navy);border-radius:0.5rem}
.art .tl{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5625rem}
.art .tl i{aspect-ratio:1;border-radius:0.5625rem;border:3px solid var(--navy);background:var(--teal)}
.art .tl i:nth-child(2){background:var(--pink)}.art .tl i:nth-child(3){background:var(--blue)}
.art .chip.a{left:-0.75rem;top:1.875rem}
.care .cr{display:flex;gap:0.625rem;align-items:center}.care .cr b{flex:none;width:1.625rem;height:1.625rem;border-radius:50%;background:var(--teal);border:2px solid var(--navy);display:grid;place-items:center}
.care .cr svg,.shield svg,.srch svg,.map svg{fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.care .cr svg{width:0.9375rem;height:0.9375rem}.care .cr .l{flex:1}
.shield{position:absolute;z-index:3;right:0;bottom:0;width:30%;aspect-ratio:1;background:var(--pink);border:4px solid var(--navy);border-radius:50%;display:grid;place-items:center;box-shadow:0.3125rem 0.3125rem 0 var(--navy);animation:float 6s ease-in-out infinite}
.shield svg{width:55%;stroke:#fff}
.srch{display:flex;gap:0.625rem;align-items:center;border:3px solid var(--navy);border-radius:6.1875rem;padding:0.375rem 0.75rem}.srch svg{width:1.375rem;height:1.375rem;flex:none}.srch .l{flex:1}
.bars{display:flex;align-items:flex-end;gap:0.625rem;height:8.75rem;border-bottom:3px solid var(--navy);padding:0 0.25rem}
.bars i{flex:1;background:var(--teal);border:3px solid var(--navy);border-bottom:0;border-radius:0.5rem 0.5rem 0 0;transform-origin:bottom;animation:grow 1.2s var(--ease) both}
.bars i:nth-child(odd){background:var(--pink)}.bars i:last-child{background:var(--blue)}
@keyframes grow{from{transform:scaleY(.1)}}
.map{height:9.375rem;border-radius:0.75rem;border:3px solid var(--navy);background:repeating-linear-gradient(0deg,transparent 0 1.75rem,rgba(9,47,110,.12) 1.75rem 1.875rem),repeating-linear-gradient(90deg,transparent 0 2.125rem,rgba(9,47,110,.12) 2.125rem 2.25rem),var(--soft);display:grid;place-items:center}
.map svg{width:2.875rem;height:2.875rem;stroke:var(--pink);fill:#fff;animation:float 3s ease-in-out infinite}
.chatart{min-height:14.375rem;padding:0}.chatart.sm{min-height:10.625rem;max-width:16.25rem}
.bub{position:absolute;z-index:1;background:#fff;border:4px solid var(--navy);border-radius:1.25rem;padding:1rem 1.125rem;display:grid;gap:0.5rem;width:62%;color:var(--navy);box-shadow:0.375rem 0.375rem 0 var(--pink)}
.bub .l{height:0.625rem;border-radius:0.3125rem;background:var(--soft)}
.bub.b1{left:0;top:6%}.bub.b2{right:0;bottom:6%;width:58%;background:var(--teal);box-shadow:0.375rem 0.375rem 0 var(--navy)}.bub.b2 .l{background:rgba(255,255,255,.65)}
.qm{position:absolute;z-index:2;right:10%;top:0;width:3.375rem;height:3.375rem;border-radius:50%;background:var(--pink);color:#fff;border:3px solid var(--navy);display:grid;place-items:center;font-family:'Bowlby One',sans-serif;font-size:1.625rem;animation:float 4.5s ease-in-out infinite}
.phg{display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:center}
.ph .art{max-width:20.625rem}
.ph .chip.a{background:var(--teal);color:var(--navy)}
/* case thumbnails */
.th{aspect-ratio:16/9;background:#fff;display:grid;grid-template-rows:auto 1fr auto;gap:0.5rem;padding:0.625rem 0.75rem;color:var(--navy);transition:transform .5s var(--ease)}
.work-c:hover .th{transform:scale(1.04)}
.th .tnav{display:flex;gap:0.5rem;align-items:center}.th .tnav i{width:1rem;height:1rem;border-radius:0.3125rem;background:var(--navy)}.th .tnav span{height:0.375rem;width:1.75rem;border-radius:0.1875rem;background:var(--soft);border:1px solid rgba(9,47,110,.3)}.th .tnav i{margin-right:auto}
.th .thero{display:grid;grid-template-columns:1.2fr .8fr;gap:0.625rem;align-items:center;background:var(--soft);border-radius:0.625rem;padding:0.625rem 0.875rem}
.th .thero>div{display:grid;gap:0.375rem}.th .hd2{height:1rem;width:80%}.th .l{height:0.375rem;border-radius:0.1875rem;background:rgba(9,47,110,.15)}.th .bt{height:0.875rem;width:40%;border:2px solid var(--navy);background:var(--pink);border-radius:0.375rem}
.th .disc{aspect-ratio:1;width:70%;justify-self:center;border-radius:50%;background:var(--teal);border:3px solid var(--navy)}
.th .tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem}.th .tcards i{height:1.875rem;border-radius:0.5rem;border:2px solid var(--navy);background:var(--teal)}.th .tcards i:nth-child(2){background:var(--pink)}.th .tcards i:nth-child(3){background:var(--blue)}
.th.gym .thero.big{display:grid;grid-template-columns:1fr;background:var(--pink);border:3px solid var(--navy)}.th.gym .hd2{background:#fff;height:1.25rem;width:70%}.th.gym .bt{background:var(--navy);width:30%}
.th.gym .trows{display:grid;gap:0.3125rem}.th.gym .trows i{height:0.6875rem;border-radius:0.3125rem;background:var(--teal);border:2px solid var(--navy)}.th.gym .trows i:nth-child(2){background:var(--soft)}
.shotw .th{border:0}
/* deal + faq layout */
.dealr{display:grid;gap:1.375rem}
.deal .art.sm{max-width:16.25rem;margin:0 auto}
.deal .win{box-shadow:0.375rem 0.375rem 0 var(--navy)}
.faqw{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:start}
.faqside{position:sticky;top:6.875rem;display:grid;gap:0.875rem;justify-items:start}
.faqside>p{font-size:1.125rem}
.faqside .art{margin:0.375rem 0;justify-self:start;width:100%}
.faq{max-width:none}
.nw{max-width:56.25rem}
/* quick chooser */
.pick{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.75rem;grid-column:1/-1}
.pk{gap:0.375rem;padding:1.125rem 1.25rem}
.pk b{font-size:1.0625rem;line-height:1.25}.pk span:not(.ico){font-size:0.875rem;opacity:.8}
.hero .c{grid-template-rows:auto auto}
/* cta decoration */
.cta{position:relative;overflow:hidden}
.cta .c{position:relative;z-index:1}
.cta::before,.cta::after{content:"";position:absolute;border-radius:50%;border:4px solid rgba(255,255,255,.18)}
.cta::before{width:16.25rem;height:16.25rem;left:-5rem;bottom:-6.875rem;background:var(--pink);border-color:var(--pink);opacity:.9}
.cta::after{width:12.5rem;height:12.5rem;right:-3.125rem;top:-4.375rem;background:var(--teal);border-color:var(--teal);opacity:.85;border-radius:50% 50% 40% 60%}
/* mobile action bar */
.mbar{display:none}
@media(max-width:900px){
 .phg{grid-template-columns:1fr}
 .ph .art{display:none}
 .faqw{grid-template-columns:1fr;gap:1.625rem}
 .faqside{position:static}
 .faqside .art{display:none}
 .pick{grid-template-columns:1fr 1fr;margin-top:1.875rem}
 .mbar{display:flex;gap:0.625rem;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:0.625rem 0.875rem calc(0.625rem + env(safe-area-inset-bottom,0px));background:#fff;border-top:3px solid var(--navy)}
 .mbar .btn{flex:1;min-height:2.875rem}
 body{padding-bottom:4.5rem}
 body[data-page="get-started.html"] .mbar{display:none}
 .mock{display:block;max-width:22.5rem;margin:0.375rem auto 0;padding:0 1.5rem 1.875rem 0}
 .deal .art.sm{max-width:15rem}
}
@media(max-width:620px){
 .pick{gap:0.625rem}
 .gcard{left:-0.5rem;width:54%}
}
@media(prefers-reduced-motion:reduce){.phone,.gcard,.shield,.qm,.bars i,.map svg{animation:none}}

.chip{z-index:5}
.mock .chip.b{bottom:auto;top:-0.875rem;right:0.375rem}
.mock .chip.a{left:-1.25rem;top:2.875rem}
@media(max-width:620px){.mock .chip.a{left:-0.25rem}.mock .chip.b{right:0}}

/* ---- compact card layout: small icon beside the title ---- */
.ico{width:2.75rem;height:2.75rem;border-radius:0.75rem;box-shadow:2px 2px 0 var(--navy)}
.ico svg{width:1.375rem;height:1.375rem}
.ch{display:flex;align-items:center;gap:0.875rem}
.ch>div{display:grid;gap:0.25rem;justify-items:start}
.ch .h{line-height:1.15}
.step.card{align-items:stretch}
.step .stp{line-height:1}
.card .dl{margin:0}
#services .card,#promises .card,.step.card{gap:0.75rem}
/* quick pick: one tidy row per option */
.pk{flex-direction:row;align-items:center;gap:0.875rem;padding:0.875rem 1.125rem;min-height:4.75rem;background:#fff}
.pk .ptx{display:grid;gap:2px;flex:1;min-width:0}
.pk b{font-size:1rem;line-height:1.25}
.pk .ptx span{font-size:0.875rem;opacity:.75}
.pk .go{flex:none;width:2rem;height:2rem;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:1rem;transition:transform .25s var(--ease),background .25s}
a.pk:hover{background:var(--teal);box-shadow:0.3125rem 0.3125rem 0 var(--navy)}
a.pk:hover .go{transform:translateX(0.25rem);background:var(--pink)}
.pk .ico{transition:none}
a.pk:hover .ico{transform:none}
@media(max-width:620px){
 .pick{grid-template-columns:1fr;gap:0.625rem}
 .pk{min-height:4.25rem;padding:0.75rem 0.875rem}
 .pk b{font-size:0.9375rem}.pk .ptx span{font-size:0.8125rem}
 .pk .ico{width:2.625rem;height:2.625rem}.pk .ico svg{width:1.3125rem;height:1.3125rem}
}
.pk .ptx,.pk .go{opacity:1}
.pk .ptx{font-size:inherit}
.pk .go{font-size:1rem}
.card.pk .ptx,.card.pk .go{opacity:1;font-size:inherit}
.card.pk .go{font-size:1rem}
.card.pk .ptx>span{font-size:0.875rem;opacity:.75}

.svcg .cta-card{grid-column:span 2}
.card .dl{white-space:nowrap}
@media(max-width:900px){.svcg .cta-card{grid-column:auto}}
@media(max-width:620px){.card .dl{white-space:normal}}

/* ---- spacing + layout polish ---- */
.hero{padding:3.25rem 0 3.75rem}
.hero .c{gap:2.5rem 3rem;grid-template-columns:1.05fr .95fr}
.hero h1{max-width:15ch;font-size:clamp(2.125rem,calc(5.2vw*var(--s)),3.875rem)}
.hero p.lead{max-width:40ch}
.mock{max-width:30rem}
.pick{margin-top:3rem}
.pn{margin:0 0 1.125rem!important;font-size:1rem;opacity:.85}
.swipe{display:none}
.sh{margin-bottom:2rem}
.sh p{max-width:60ch}
.s{padding:4.25rem 0}
.deal{align-items:center;padding:2.25rem 2.5rem}
.deal .ck.two{gap:2px 1.375rem}
.deal .ck li{font-size:0.9375rem}
.fg .logo{display:flex;padding:0;opacity:1}
.fg .logo span{font-size:1.375rem}
.fg>div:first-child p{max-width:36ch}
footer{padding:3rem 0 1.375rem}
.cta{padding:3.75rem 0}
.work-c .cap{padding:1rem 1.375rem 1.125rem}
.faq summary{padding:0.9375rem 1.25rem}
.card{padding:1.375rem}
.rows li{padding:0.75rem 1.125rem}
@media(max-width:900px){
 .s{padding:2.75rem 0}
 .hero{padding:1.75rem 0 2.25rem}
 .hero h1{font-size:clamp(2rem,calc(8.6vw*var(--s)),2.875rem);max-width:none}
 .deal{padding:1.625rem 1.375rem}
 .mock{margin-top:0}
}
@media(max-width:620px){
 #services .card,#promises .card{padding:1rem;gap:0.5rem}
 #services .card p,#promises .card p{font-size:0.9375rem}
 .ch{gap:0.75rem}
 .step.card{padding:1rem}
 #pricing .swipe{display:block;font-size:0.875rem;font-weight:600;color:var(--blue);margin:-0.375rem 0 0.375rem}
 #pricing .gp{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0.875rem;margin-inline:-1.125rem;padding:1.25rem 1.125rem 1.375rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
 #pricing .gp::-webkit-scrollbar{display:none}
 #pricing .gp .pl{flex:0 0 84%;max-width:21.25rem;scroll-snap-align:center}
 .fg{grid-template-columns:1fr 1fr;gap:1.625rem 1.125rem}
 .fg>div:first-child{grid-column:1/-1}
 .fb{margin-top:1.5rem}
 .cta{padding:2.75rem 0}
 .addons{gap:1.25rem}
}
.file .ans>.ck:first-child,.file .ans>p:first-child{margin-top:0}
.file .ans .ck{margin:0}
@keyframes s1{0%,4%{opacity:0;transform:translateY(0.625rem) scale(.92)}10%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(0.625rem) scale(.92)}}
@keyframes g1{0%,4%{transform:scaleY(0)}16%,88%{transform:scaleY(1)}96%,100%{transform:scaleY(0)}}
@keyframes s2{0%,14%{opacity:0;transform:translateY(0.625rem) scale(.92)}20%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(0.625rem) scale(.92)}}
@keyframes g2{0%,14%{transform:scaleY(0)}26%,88%{transform:scaleY(1)}96%,100%{transform:scaleY(0)}}
@keyframes s3{0%,24%{opacity:0;transform:translateY(0.625rem) scale(.92)}30%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(0.625rem) scale(.92)}}
@keyframes g3{0%,24%{transform:scaleY(0)}36%,88%{transform:scaleY(1)}96%,100%{transform:scaleY(0)}}
@keyframes s4{0%,34%{opacity:0;transform:translateY(0.625rem) scale(.92)}40%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(0.625rem) scale(.92)}}
@keyframes g4{0%,34%{transform:scaleY(0)}46%,88%{transform:scaleY(1)}96%,100%{transform:scaleY(0)}}
@keyframes s5{0%,44%{opacity:0;transform:translateY(0.625rem) scale(.92)}50%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(0.625rem) scale(.92)}}
@keyframes g5{0%,44%{transform:scaleY(0)}56%,88%{transform:scaleY(1)}96%,100%{transform:scaleY(0)}}
@keyframes s6{0%,54%{opacity:0;transform:translateY(0.625rem) scale(.92)}60%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(0.625rem) scale(.92)}}
@keyframes g6{0%,54%{transform:scaleY(0)}66%,88%{transform:scaleY(1)}96%,100%{transform:scaleY(0)}}

.k1{animation:s1 8s infinite both}.k2{animation:s2 8s infinite both}.k3{animation:s3 8s infinite both}.k4{animation:s4 8s infinite both}.k5{animation:s5 8s infinite both}.k6{animation:s6 8s infinite both}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes cyc{0%{opacity:0;transform:scale(.96)}4%,30%{opacity:1;transform:none}34%,100%{opacity:0}}
@keyframes drop{0%,3%{transform:translateY(-130%);opacity:0}10%{transform:none;opacity:1}13%{transform:translateY(-14%)}16%,88%{transform:none;opacity:1}95%,100%{opacity:0;transform:translateY(-30%)}}
@keyframes pulse{0%{transform:scale(.4);opacity:.6}100%{transform:scale(3.2);opacity:0}}
@keyframes ringx{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.3);opacity:0}}
@keyframes shake{0%,50%,100%{transform:rotate(0)}10%,30%{transform:rotate(-14deg)}20%,40%{transform:rotate(14deg)}}
@keyframes typing{0%,4%{width:0}20%,88%{width:62%}96%,100%{width:0}}
@keyframes utype{0%,4%{max-width:0}30%,90%{max-width:12em}96%,100%{max-width:0}}
@keyframes mer{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.12)}}
@keyframes ltr{0%,15%{transform:translateY(0)}30%,80%{transform:translateY(-52%)}95%,100%{transform:translateY(0)}}
@keyframes flap{0%,8%{transform:rotateX(0)}18%,82%{transform:rotateX(180deg)}95%,100%{transform:rotateX(0)}}
@keyframes curm{0%{left:78%;top:84%;transform:scale(1)}50%{left:30%;top:68%;transform:scale(1)}58%{left:28%;top:67%;transform:scale(.8)}66%{left:28%;top:67%;transform:scale(1)}100%{left:78%;top:84%}}

/* =====================================================================
   v3: new header, footer, funnel, cookies, animated scenes, new sections
   ===================================================================== */
/* ---- top bar + header ---- */
.tb{background:var(--pink);color:#fff;font-size:0.875rem;font-weight:500}
.tb a{opacity:1}
.tb .c{padding:0.5rem 0}
.hd{background:#fff;color:var(--navy);border-bottom:3px solid var(--navy);box-shadow:0 0.25rem 0 rgba(9,47,110,.08)}
.hd .c{min-height:4.75rem;gap:1.25rem}
.logo.wm{font-family:'Bowlby One','Arial Black',sans-serif;font-size:1.75rem;letter-spacing:.05em;color:var(--blue);text-shadow:0.1875rem 0.1875rem 0 var(--pink);padding:0.25rem 0;text-transform:uppercase;transition:transform .25s var(--ease)}
.logo.wm:hover{transform:rotate(-2deg) scale(1.04)}
.nav{gap:2px}
.nav>a,.dd-t{position:relative;padding:0.625rem 0.875rem;border-radius:0.75rem;font-weight:600;text-decoration:none;color:var(--navy);white-space:nowrap;display:inline-flex;align-items:center;gap:0.375rem;transition:background .2s,color .2s}
.nav>a:hover,.dd:hover>.dd-t,.dd:focus-within>.dd-t{background:var(--soft);color:var(--blue)}
.nav>a::after{left:0.875rem;right:0.875rem;bottom:0.3125rem;background:var(--pink)}
.nav>a[aria-current]{color:var(--blue)}
.dd{position:relative}
.dd-t::after{content:"";width:0.5rem;height:0.5rem;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.dd:hover .dd-t::after,.dd:focus-within .dd-t::after{transform:rotate(225deg) translateY(-2px)}
.dd-b{display:none}
.dd-m{position:absolute;top:100%;left:-1rem;width:35rem;padding-top:0.875rem;opacity:0;visibility:hidden;transform:translateY(0.625rem);transition:opacity .25s,transform .25s var(--ease),visibility 0s .25s;z-index:60}
.dd:hover .dd-m,.dd:focus-within .dd-m{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dd-in{background:#fff;border:3px solid var(--navy);border-radius:1.125rem;box-shadow:0.5rem 0.5rem 0 var(--pink);padding:0.875rem;display:grid;grid-template-columns:1fr 1fr;gap:0.375rem}
.dd-in a{display:flex;gap:0.75rem;align-items:center;padding:0.625rem;border-radius:0.75rem;text-decoration:none;color:var(--navy);transition:background .2s,transform .2s}
.dd-in a:hover{background:var(--soft);transform:translateX(0.1875rem)}
.dd-in b{display:block;font-size:0.9375rem;line-height:1.2}
.dd-in small{display:block;font-size:0.8125rem;opacity:.7;line-height:1.3}
.dd-in .ico{width:2.5rem;height:2.5rem}.dd-in .ico svg{width:1.25rem;height:1.25rem}
.hd-cta .btn.wa{--bg:var(--teal)}
.mp-info{color:var(--navy)}
/* ---- mobile menu: fade in ---- */
@media(max-width:900px){
 .burger{background:var(--pink);color:#fff}
 .mp{display:flex;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-0.75rem);transition:opacity .35s ease,transform .35s var(--ease),visibility 0s .35s;background:#fff;color:var(--navy);max-height:calc(100dvh - 4.75rem);overflow:auto;padding:0.625rem 1.375rem 1.625rem}
 .hd.open .mp{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
 .hd.open .mp>*{animation:fadeUp .45s var(--ease) both}
 .hd.open .mp>*:nth-child(2){animation-delay:.08s}.hd.open .mp>*:nth-child(3){animation-delay:.16s}
 .nav{flex-direction:column;gap:0;margin:0;align-items:stretch}
 .nav>a,.dd-t{padding:0.9375rem 0.25rem;border-radius:0;border-top:2px solid var(--soft);font-size:1.1875rem;justify-content:space-between;color:var(--navy)}
 .nav>a::after{display:none}
 .nav>a:hover,.dd:hover>.dd-t{background:none}
 .dd{display:grid;grid-template-columns:1fr 3.25rem;align-items:center;border-top:2px solid var(--soft)}
 .dd-t{border:0;padding-right:0}.dd-t::after{display:none}
 .dd-b{display:grid;place-items:center;width:2.75rem;height:2.75rem;border:0;background:var(--soft);border-radius:0.75rem;cursor:pointer;justify-self:end}
 .dd-b::before{content:"";width:0.5625rem;height:0.5625rem;border-right:3px solid var(--navy);border-bottom:3px solid var(--navy);transform:rotate(45deg) translateY(-2px);transition:transform .3s}
 .dd.open .dd-b::before{transform:rotate(225deg) translateY(-2px)}
 .dd-m{position:static;grid-column:1/-1;width:auto;padding:0;opacity:1;visibility:visible;transform:none;max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
 .dd:hover .dd-m{opacity:1}
 .dd.open .dd-m{max-height:32.5rem}
 .dd-in{border:0;box-shadow:none;padding:0.25rem 0 0.75rem;grid-template-columns:1fr}
 .hd-cta{flex-direction:row;margin-top:0.875rem}.hd-cta .btn{flex:1}
 .mp-info{background:var(--soft);border-radius:0.875rem;padding:0.875rem 1rem;margin-top:0.375rem;font-size:1rem}
 .mp-info a{padding:0.25rem 0;font-weight:600;text-decoration:none}
 .mp-info b{font-size:0.8125rem;text-transform:uppercase;letter-spacing:.08em;opacity:.6}
}
/* ---- hero quick links (3) ---- */
.pick{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.pick{grid-template-columns:1fr}}
/* ---- service cards ---- */
.cf{display:flex;justify-content:space-between;align-items:center;gap:0.75rem;margin-top:auto;padding-top:0.75rem;border-top:2px dashed var(--soft)}
.tl2{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.875rem;font-weight:600}
.tl2::before{content:"";width:0.625rem;height:0.625rem;border-radius:50%;background:var(--pink);box-shadow:0 0 0 0.25rem rgba(233,79,122,.2)}
.cf .more{margin:0;padding:0;font-weight:600;color:var(--blue);text-decoration:none;white-space:nowrap}
.cf .more:hover{text-decoration:underline}
#services .g3{grid-template-columns:repeat(3,1fr)}
/* ---- pricing panels ---- */
.pnl{display:grid;grid-template-columns:16.875rem 1fr;gap:1.875rem;align-items:start}
.pnl>.art{position:sticky;top:6.875rem;max-width:16.875rem;padding:0 1.25rem 1.5rem 0;justify-self:start}
.pnl h3.sub2{margin:0 0 0.875rem;font-size:1.125rem}
.pnl .gp+h3.sub2{margin-top:1.875rem}
.pnl .gp{grid-template-columns:repeat(auto-fit,minmax(14.375rem,1fr))}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1.375rem;margin-bottom:1.75rem}
.trio .art{max-width:none;padding:0 1rem 1.25rem 0}
.trio .cap{text-align:center;font-weight:600;margin-top:0.25rem;font-size:0.9375rem}
@media(max-width:1000px){.pnl{grid-template-columns:1fr}.pnl>.art{position:static;margin:0 auto 0.375rem;max-width:16.25rem}.trio{grid-template-columns:1fr 1fr 1fr;gap:0.625rem}}
@media(max-width:620px){.trio{grid-template-columns:1fr}.trio .art{max-width:16.25rem;margin:0 auto}}
.tabs{gap:0.5rem}
.tabs button{padding:0.5rem 1rem;font-size:0.9375rem}
/* ---- animated scenes ---- */
.art .cur{position:absolute;z-index:6;width:1.625rem;height:1.625rem;fill:var(--navy);stroke:#fff;stroke-width:1.5;left:30%;top:30%;animation:curmove 7s ease-in-out infinite}
@keyframes curmove{0%,100%{transform:translate(0,0)}20%{transform:translate(6.875rem,1.875rem)}45%{transform:translate(2.5rem,6.25rem)}70%{transform:translate(9.375rem,6.875rem)}}
.sc-web .bd>*,.sc-web .tl i{animation:build 7s ease-in-out infinite both}
.sc-web .bd>*:nth-child(1){animation-delay:.1s}.sc-web .bd>*:nth-child(2){animation-delay:.5s}.sc-web .bd>*:nth-child(3){animation-delay:.8s}.sc-web .bd>*:nth-child(4){animation-delay:1.2s}
.sc-web .tl{animation:none}.sc-web .tl i:nth-child(1){animation-delay:1.6s}.sc-web .tl i:nth-child(2){animation-delay:1.9s}.sc-web .tl i:nth-child(3){animation-delay:2.2s}
@keyframes build{0%{opacity:0;transform:translateY(1rem) scale(.94)}12%,82%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-0.375rem)}}
.sc-seo .typing{height:0.6875rem;border-radius:0.375rem;background:var(--navy);width:0;animation:typew 6s steps(14) infinite}
@keyframes typew{0%{width:0}35%,85%{width:62%}100%{width:0}}
.sc-seo .bars i{animation:growl 4.5s ease-in-out infinite alternate}
.sc-seo .bars i:nth-child(2){animation-delay:.15s}.sc-seo .bars i:nth-child(3){animation-delay:.3s}.sc-seo .bars i:nth-child(4){animation-delay:.45s}.sc-seo .bars i:nth-child(5){animation-delay:.6s}.sc-seo .bars i:nth-child(6){animation-delay:.75s}
@keyframes growl{0%{transform:scaleY(.15)}60%,100%{transform:scaleY(1)}}
.sc-seo .srch svg{animation:wig 3s ease-in-out infinite}
@keyframes wig{50%{transform:rotate(-14deg) scale(1.15)}}
.sc-gbp .map{position:relative;height:10.625rem}
.sc-gbp .pin{position:absolute;left:50%;top:38%;width:2.75rem;height:2.75rem;margin-left:-1.375rem;z-index:2;animation:drop 3.2s ease-in infinite}
.sc-gbp .pin svg{width:2.75rem;height:2.75rem;stroke:var(--pink);fill:#fff;stroke-width:2;animation:none}
@keyframes drop{0%{transform:translateY(-4.375rem);opacity:0}18%{transform:translateY(0);opacity:1}26%{transform:translateY(-0.875rem)}34%,100%{transform:translateY(0);opacity:1}}
.sc-gbp .rip{position:absolute;left:50%;top:38%;margin:1.375rem 0 0 -1.875rem;width:3.75rem;height:1.375rem;border-radius:50%;border:3px solid var(--pink);animation:rip 3.2s ease-out infinite}
.sc-gbp .rip.r2{animation-delay:.5s}
@keyframes rip{0%,20%{transform:scale(.2);opacity:0}30%{opacity:.9}100%{transform:scale(2.2);opacity:0}}
.sc-gbp .gcard{animation:slideup 3.2s ease-out infinite}
@keyframes slideup{0%,25%{transform:translateY(2.5rem);opacity:0}45%,92%{transform:none;opacity:1}100%{opacity:0}}
.sc-brand .bd{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:0.875rem;align-items:center;padding:1.25rem}
.sc-brand .lg{grid-row:1/3;display:grid;place-items:center;background:var(--soft);border-radius:0.875rem;aspect-ratio:1}
.sc-brand .lg i{display:block;width:62%;aspect-ratio:1;background:var(--pink);border:4px solid var(--navy);animation:morph 5s ease-in-out infinite}
@keyframes morph{0%,100%{border-radius:50%;transform:rotate(0);background:var(--pink)}33%{border-radius:14%;transform:rotate(45deg);background:var(--teal)}66%{border-radius:50% 10% 50% 10%;transform:rotate(90deg);background:var(--blue)}}
.sc-brand .sw{display:flex;gap:0.5rem}.sc-brand .sw i{flex:1;aspect-ratio:1;border-radius:50%;border:3px solid var(--navy);animation:pulse 3s ease-in-out infinite}
.sc-brand .sw i:nth-child(1){background:var(--blue)}.sc-brand .sw i:nth-child(2){background:var(--pink);animation-delay:.3s}.sc-brand .sw i:nth-child(3){background:var(--teal);animation-delay:.6s}.sc-brand .sw i:nth-child(4){background:var(--navy);animation-delay:.9s}
@keyframes pulse{40%{transform:scale(1.25)}}
.sc-brand .aa{display:grid;gap:0.375rem;align-content:center}.sc-brand .aa b{font-family:'Bowlby One',sans-serif;font-size:2.125rem;line-height:1;font-weight:400;animation:wig2 4s ease-in-out infinite}
@keyframes wig2{50%{transform:rotate(-6deg) scale(1.08)}}
.sc-maint .cr{opacity:0;animation:tickrow 6s infinite both}
.sc-maint .cr:nth-child(1){animation-delay:.2s}.sc-maint .cr:nth-child(2){animation-delay:1s}.sc-maint .cr:nth-child(3){animation-delay:1.8s}.sc-maint .cr:nth-child(4){animation-delay:2.6s}
@keyframes tickrow{0%{opacity:0;transform:translateX(-0.875rem)}10%,80%{opacity:1;transform:none}92%,100%{opacity:0}}
.sc-maint .cr b{animation:pop 6s infinite both}
.sc-maint .cr:nth-child(1) b{animation-delay:.5s}.sc-maint .cr:nth-child(2) b{animation-delay:1.3s}.sc-maint .cr:nth-child(3) b{animation-delay:2.1s}.sc-maint .cr:nth-child(4) b{animation-delay:2.9s}
@keyframes pop{0%{transform:scale(0)}8%{transform:scale(1.35)}14%,100%{transform:scale(1)}}
.gear{position:absolute;z-index:3;left:-0.875rem;bottom:-0.25rem;width:4rem;height:4rem;border-radius:50%;background:var(--teal);border:4px solid var(--navy);display:grid;place-items:center;box-shadow:0.25rem 0.25rem 0 var(--navy)}
.gear svg{width:2.125rem;height:2.125rem;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.shield{animation:float 5s ease-in-out infinite,pulse2 3s ease-in-out infinite}
@keyframes pulse2{50%{box-shadow:0.3125rem 0.3125rem 0 var(--navy),0 0 0 0.75rem rgba(233,79,122,.25)}}
.sc-domain .addr{display:flex;align-items:center;gap:0.5rem;border:3px solid var(--navy);border-radius:6.1875rem;padding:0.4375rem 0.875rem;background:#fff}
.sc-domain .addr svg{width:1.125rem;height:1.125rem;flex:none;fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:lockp 6s infinite}
@keyframes lockp{0%,40%{transform:scale(1)}48%{transform:scale(1.5);stroke:var(--pink)}56%,100%{transform:scale(1)}}
.sc-domain .ty{font:700 0.8125rem/1 ui-monospace,Menlo,Consolas,monospace;overflow:hidden;white-space:nowrap;width:0;animation:typing 6s steps(18) infinite;border-right:2px solid var(--pink)}
@keyframes typing{0%{width:0}40%,88%{width:18ch}100%{width:0}}
.sc-domain .ssl{margin-left:auto;font-size:0.6875rem;font-weight:700;background:var(--teal);border:2px solid var(--navy);border-radius:6.1875rem;padding:0 0.5rem;animation:sslp 6s infinite both}
@keyframes sslp{0%,42%{opacity:0;transform:scale(.5)}50%,88%{opacity:1;transform:none}100%{opacity:0}}
.sc-domain .sk{animation:fadep 6s infinite both}
.sc-domain .sk:nth-of-type(2){animation-delay:.2s}
@keyframes fadep{0%,44%{opacity:0;transform:translateY(0.5rem)}56%,88%{opacity:1;transform:none}100%{opacity:0}}
.sc-email{min-height:12.5rem;display:grid;place-items:center}
.env{position:relative;width:62%;aspect-ratio:1.5;z-index:1;margin:1.875rem auto 0}
.env .bk{position:absolute;inset:0;background:var(--teal);border:4px solid var(--navy);border-radius:0.75rem;box-shadow:0.5rem 0.5rem 0 var(--pink)}
.env .ltr{position:absolute;left:10%;right:10%;bottom:12%;height:70%;background:#fff;border:3px solid var(--navy);border-radius:0.5rem;padding:0.625rem;display:grid;gap:0.4375rem;align-content:start;animation:rise 4.5s ease-in-out infinite;z-index:1}
.env .ltr i{display:block;height:0.4375rem;border-radius:0.25rem;background:var(--soft)}.env .ltr i:first-child{background:var(--pink);width:40%}
@keyframes rise{0%,18%{transform:translateY(0)}45%,75%{transform:translateY(-60%)}100%{transform:translateY(0)}}
.env .fr{position:absolute;inset:0;z-index:2;background:var(--blue);border:4px solid var(--navy);border-radius:0.75rem;clip-path:polygon(0 100%,0 38%,50% 72%,100% 38%,100% 100%)}
.env .fl{position:absolute;left:0;right:0;top:0;height:58%;z-index:3;background:var(--pink);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;animation:flap 4.5s ease-in-out infinite}
@keyframes flap{0%,10%{transform:rotateX(0)}30%,80%{transform:rotateX(180deg);z-index:0}100%{transform:rotateX(0)}}
.env .at{position:absolute;right:-1.125rem;top:-1.625rem;z-index:5;width:3.375rem;height:3.375rem;border-radius:50%;background:#fff;border:4px solid var(--navy);display:grid;place-items:center;font:700 1.625rem/1 'Outfit',sans-serif;animation:bounce 2.2s ease-in-out infinite}
@keyframes bounce{50%{transform:translateY(-0.75rem) rotate(8deg)}}
.env .nb{position:absolute;left:-0.875rem;top:-0.75rem;z-index:5;min-width:1.875rem;height:1.875rem;border-radius:6.1875rem;background:var(--pink);color:#fff;border:3px solid var(--navy);display:grid;place-items:center;font-size:0.875rem;font-weight:700;animation:pulse 2.2s infinite}
.sc-phone{min-height:14.375rem;display:grid;place-items:center}
.mob{position:relative;z-index:2;width:46%;aspect-ratio:9/17;background:#fff;border:4px solid var(--navy);border-radius:1.5rem;box-shadow:0.5rem 0.5rem 0 var(--pink);display:grid;place-items:center;overflow:hidden}
.mob::before{content:"";position:absolute;top:0.4375rem;left:50%;width:30%;height:0.3125rem;border-radius:0.1875rem;background:var(--navy);transform:translateX(-50%)}
.mob .av{position:relative;width:46%;aspect-ratio:1;border-radius:50%;background:var(--teal);border:3px solid var(--navy);display:grid;place-items:center;margin-top:-16%}
.mob .av svg{width:56%;fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:shake 1.4s ease-in-out infinite}
@keyframes shake{0%,40%,100%{transform:rotate(0)}8%,24%{transform:rotate(-18deg)}16%,32%{transform:rotate(18deg)}}
.mob .av::before,.mob .av::after{content:"";position:absolute;inset:-0.1875rem;border-radius:50%;border:3px solid var(--pink);animation:ring2 2s ease-out infinite}
.mob .av::after{animation-delay:1s}
@keyframes ring2{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.3);opacity:0}}
.mob .nm{position:absolute;bottom:26%;left:14%;right:14%;display:grid;gap:0.3125rem}.mob .nm i{height:0.4375rem;border-radius:0.25rem;background:var(--soft)}.mob .nm i:first-child{background:var(--navy);width:70%;margin:0 auto}
.mob .bt2{position:absolute;bottom:7%;left:12%;right:12%;display:flex;justify-content:space-between}.mob .bt2 i{width:28%;aspect-ratio:1;border-radius:50%;border:3px solid var(--navy);background:var(--pink)}.mob .bt2 i+i{background:var(--teal);animation:pulse 1.4s infinite}
.sc-phone .wv{position:absolute;z-index:1;top:50%;width:5.625rem;height:5.625rem;margin-top:-2.8125rem;border:4px solid var(--teal);border-radius:50%;border-left-color:transparent;border-bottom-color:transparent;animation:wave 2s ease-out infinite;opacity:0}
.sc-phone .wv.l{left:3%;transform:rotate(-135deg)}.sc-phone .wv.r{right:3%;transform:rotate(45deg)}
.sc-phone .wv.l2{left:-6%;width:7.5rem;height:7.5rem;margin-top:-3.75rem;transform:rotate(-135deg);animation-delay:.5s}.sc-phone .wv.r2{right:-6%;width:7.5rem;height:7.5rem;margin-top:-3.75rem;transform:rotate(45deg);animation-delay:.5s}
@keyframes wave{0%{opacity:0;scale:.6}40%{opacity:1}100%{opacity:0;scale:1.1}}
/* ---- templates showcase ---- */
.tmw{overflow:hidden;padding:0.75rem 0 1.375rem;margin:0 -1.5rem;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tmq{display:flex;width:max-content;gap:1.375rem;animation:mq 46s linear infinite;padding:0.375rem 1.375rem}
.tmw:hover .tmq{animation-play-state:paused}
.tmc{width:16.875rem;flex:none;text-decoration:none;color:var(--navy);display:grid;gap:0.625rem}
.tm{border:3px solid var(--navy);border-radius:0.875rem;overflow:hidden;background:#fff;box-shadow:0.3125rem 0.3125rem 0 var(--pink);transition:transform .3s var(--ease),box-shadow .3s}
a.tmc:hover .tm{transform:translateY(-0.3125rem);box-shadow:0.5rem 0.5rem 0 var(--teal)}
.tm .tbar{background:var(--soft);border-bottom:3px solid var(--navy);padding:0.375rem 0.625rem;display:flex;gap:0.3125rem}.tm .tbar i{width:0.5rem;height:0.5rem;border-radius:50%;background:var(--navy)}
.tm .tmh{height:6.5rem;position:relative;overflow:hidden;display:grid;align-content:center;gap:0.4375rem;padding:0 1rem}
.tm .tmh b{display:block;height:0.875rem;width:62%;border-radius:0.4375rem;background:#fff}.tm .tmh span{display:block;height:0.5rem;width:44%;border-radius:0.25rem;background:rgba(255,255,255,.7)}.tm .tmh em{display:block;height:1.25rem;width:34%;border-radius:0.5rem;background:var(--pink);border:2px solid var(--navy)}
.tm .tmr{display:grid;grid-template-columns:repeat(3,1fr);gap:0.4375rem;padding:0.625rem 0.75rem}.tm .tmr i{height:2.125rem;border-radius:0.4375rem;border:2px solid var(--navy);background:var(--soft)}
.tm .tmr i:nth-child(1){background:var(--teal)}.tm .tmr i:nth-child(2){background:var(--pink)}
.tmc strong{font-family:'Bowlby One',sans-serif;font-weight:400;text-transform:uppercase;font-size:0.9375rem}
.t-painter .tmh{background:repeating-linear-gradient(45deg,var(--teal) 0 1.125rem,var(--pink) 1.125rem 2.25rem)}
.t-gardener .tmh{background:radial-gradient(circle at 80% 20%,#fff 0 0.875rem,transparent 0.9375rem),radial-gradient(circle at 20% 80%,var(--teal) 0 1.875rem,transparent 1.9375rem),#2a8f5a}
.t-construction .tmh{background:repeating-linear-gradient(-45deg,var(--navy) 0 0.875rem,#f3b73c 0.875rem 1.75rem)}
.t-electrician .tmh{background:var(--blue)}.t-electrician .tmh::after{content:"";position:absolute;right:1.375rem;top:0.75rem;width:2.875rem;height:5rem;background:#ffd84a;clip-path:polygon(60% 0,15% 55%,48% 55%,30% 100%,88% 40%,52% 40%)}
.t-removals .tmh{background:var(--soft)}.t-removals .tmh::after{content:"";position:absolute;right:1rem;bottom:0.875rem;width:6rem;height:2.875rem;background:var(--pink);border:3px solid var(--navy);border-radius:0.375rem 0.875rem 0.375rem 0.375rem;box-shadow:-1.875rem 0.5rem 0 -0.375rem var(--teal)}.t-removals .tmh b,.t-removals .tmh span{background:var(--navy)}
.t-agency .tmh{background:conic-gradient(from 90deg,var(--pink) 0 25%,var(--teal) 0 50%,var(--blue) 0 75%,var(--navy) 0)}
.t-saas .tmh{background:linear-gradient(135deg,var(--blue),#6aa0ff)}.t-saas .tmh::after{content:"";position:absolute;right:0.875rem;bottom:0;width:5.625rem;height:3.875rem;background:linear-gradient(90deg,#fff 0 18%,transparent 0 24%,#fff 0 42%,transparent 0 48%,#fff 0 66%,transparent 0 72%,#fff 0 100%);clip-path:polygon(0 70%,18% 70%,18% 50%,24% 50%,24% 70%,42% 70%,42% 30%,48% 30%,48% 70%,66% 70%,66% 55%,72% 55%,72% 70%,100% 70%,100% 100%,0 100%)}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
.tgrid .tmc{width:auto}
.tgrid .tcard{display:grid;gap:0.75rem}
.tgrid p{font-size:0.9375rem}
@media(max-width:900px){.tgrid{grid-template-columns:1fr 1fr}.tmc{width:14.375rem}}
@media(max-width:620px){.tgrid{grid-template-columns:1fr}.tmw{margin:0 -1.125rem}}
/* ---- reviews marquee ---- */
.rvw{overflow:hidden;margin:0 -1.5rem;padding:0.5rem 0 1.375rem;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.rvt{display:flex;gap:1.25rem;width:max-content;animation:mq 50s linear infinite;padding:0 0.625rem}
.rvw:hover .rvt{animation-play-state:paused}
.rvt figure{width:20rem;flex:none;background:#fff;border:3px solid var(--navy);border-radius:1.125rem;padding:1.25rem;display:grid;gap:0.625rem;box-shadow:0.3125rem 0.3125rem 0 var(--teal)}
.rvt blockquote{font-size:1rem}
.rvt figcaption{font-weight:600;font-size:0.9375rem;color:var(--pink)}
.rvt .st{display:flex;gap:0.1875rem}.rvt .st i{width:1rem;height:1rem;background:var(--teal);clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 36%)}
/* ---- compare table ---- */
.cmpt{border:3px solid var(--navy);border-radius:1.25rem;overflow:hidden;background:#fff;box-shadow:0.5rem 0.5rem 0 var(--pink)}
.cmpt .r{display:grid;grid-template-columns:1.2fr 1fr 1fr;border-top:2px solid var(--soft);align-items:center}
.cmpt .r:first-child{border:0}
.cmpt .r>div{padding:0.875rem 1.25rem;font-size:1rem}
.cmpt .hd3{background:var(--navy);color:#fff;font-family:'Bowlby One',sans-serif;text-transform:uppercase;font-size:0.9375rem}
.cmpt .hd3 div:nth-child(2){background:var(--blue)}
.cmpt .r>div:nth-child(2){background:rgba(45,208,197,.14);font-weight:600}
.cmpt .yes,.cmpt .no{display:flex;gap:0.625rem;align-items:center}
.cmpt .yes::before,.cmpt .no::before{content:"";flex:none;width:1.375rem;height:1.375rem;border-radius:50%;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23092F6E' stroke-width='2.4'%3E%3Cpath d='M2 6.5l2.8 2.8L10 3.5'/%3E%3C/svg%3E") center/0.75rem no-repeat}
.cmpt .no::before{background:#fde3ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23E94F7A' stroke-width='2.4'%3E%3Cpath d='M3 3l6 6M9 3l-6 6'/%3E%3C/svg%3E") center/0.6875rem no-repeat}
.cmpt .hd3 div{display:block!important}.cmpt .hd3 div::before{display:none}
@media(max-width:700px){.cmpt .r{grid-template-columns:1fr 1fr}.cmpt .r>div:first-child{grid-column:1/-1;background:var(--soft);font-weight:600;padding:0.625rem 1rem}.cmpt .r>div{padding:0.75rem 0.875rem;font-size:0.9375rem}.cmpt .hd3>div:first-child{display:none!important}}
/* ---- rebrand ---- */
.rbg{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem;align-items:start}
.rbp{border:3px solid var(--navy);border-radius:1.25rem;padding:1.375rem;background:#fff;display:grid;gap:0.875rem}
.rbp.new{background:var(--blue);color:#fff;box-shadow:0.5rem 0.5rem 0 var(--pink)}
.rbp .lbl{font-family:'Bowlby One',sans-serif;font-size:0.875rem;text-transform:uppercase;letter-spacing:.04em}
.rbp .ck li{color:inherit}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.ph2{border:3px dashed var(--navy);border-radius:1rem;min-height:12.5rem;display:grid;place-items:center;text-align:center;padding:1rem;font-weight:600;font-size:0.9375rem;background:repeating-linear-gradient(45deg,var(--soft),var(--soft) 0.75rem,#fff 0.75rem,#fff 1.5rem);color:var(--navy)}
.vsn{border:3px solid var(--navy);border-radius:1rem;background:#fff;overflow:hidden;color:var(--navy)}
.vsn .win{border:0;box-shadow:none;border-radius:0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.stat{background:#fff;border:3px solid var(--navy);border-radius:1.125rem;padding:1.25rem;text-align:center;box-shadow:0.3125rem 0.3125rem 0 var(--teal)}
.stat b{display:block;font-family:'Bowlby One',sans-serif;font-weight:400;font-size:clamp(2rem,calc(4vw*var(--s)),2.875rem);color:var(--blue);line-height:1}
.stat span{font-weight:600;font-size:0.9375rem}
.vals{display:flex;flex-wrap:wrap;gap:0.625rem;list-style:none;padding:0}
.vals li{background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:6.1875rem;padding:0.375rem 1.125rem;font-weight:600}
.rb-home{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center}
@media(max-width:900px){.rbg,.vs,.rb-home{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}}
/* ---- case studies ---- */
.pvs{display:grid;grid-template-columns:1fr 15.625rem;gap:2.25rem;align-items:end;max-width:62.5rem;margin:0 auto}
.pv{max-width:none;margin:0}
.pvp{border:4px solid var(--navy);border-radius:1.875rem;background:#fff;box-shadow:0.5rem 0.5rem 0 var(--teal);padding:0.625rem;overflow:hidden}
.pvp .view{--ph:26.25rem;height:var(--ph);overflow:hidden;border-radius:1.25rem;background:#fff}
.pvp .scroll{animation:pvs 14s ease-in-out infinite alternate}
.pvp:hover .scroll{animation-play-state:paused}
.pvp .scroll>div{padding:0.875rem;display:grid;gap:0.5rem;border-bottom:2px solid var(--soft)}
.pvp .b{height:4.375rem;border-radius:0.625rem;background:var(--soft);border:3px solid var(--navy)}.pvp .b.t{background:var(--teal)}.pvp .b.p{background:var(--pink)}.pvp .b.bl{background:var(--blue)}
.pvp .hd2{height:1.25rem;width:75%;background:var(--navy);border-radius:0.375rem}.pvp .l{height:0.5625rem;border-radius:0.3125rem;background:var(--soft)}.pvp .bt{height:1.625rem;width:55%;background:var(--pink);border:3px solid var(--navy);border-radius:0.5rem}
.pv .real,.pvp .real{animation:none}
.pv .view.real-v .scroll,.pvp .view.real-v .scroll{animation:pvs 22s ease-in-out infinite alternate}
.cnote{text-align:center;font-size:0.875rem;opacity:.75;margin-top:1.125rem}
.visit{display:flex;justify-content:center;margin-top:1.875rem}
.workg{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.work-c .cap small{display:block;font-size:0.875rem;opacity:.75;margin-top:2px}
@media(max-width:900px){.pvs{grid-template-columns:1fr;gap:2.125rem}.pvp{max-width:15.625rem;margin:0 auto}.workg{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.workg{grid-template-columns:1fr}}
.th.v2 .thero{background:var(--soft)}.th.v2 .disc{border-radius:0.75rem;background:var(--pink)}
.th.v3 .thero{background:var(--navy)}.th.v3 .hd2{background:#fff}.th.v3 .l{background:rgba(255,255,255,.4)}.th.v3 .disc{background:var(--teal)}
/* ---- special deal block extras ---- */
.deal .sumline{display:grid;grid-template-columns:1fr auto;gap:0.375rem 1rem;text-align:left;font-size:0.9375rem;margin:0.625rem 0 0.25rem;border-top:2px dashed var(--soft);padding-top:0.625rem}
.deal .sumline b{font-weight:600}
/* ---- footer ---- */
footer{background:var(--navy);color:#fff;padding:3.5rem 0 0}
.fg2{display:grid;grid-template-columns:1.1fr 1.9fr;gap:3.5rem;padding-bottom:2.5rem}
.fg2 .about p{margin:0.875rem 0 1.125rem;max-width:38ch;font-size:1rem;opacity:.88}
.fg2 .logo.wm{color:#fff;font-size:1.875rem;display:inline-block}
.fcols3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
.fcols3 h4{font-family:'Bowlby One',sans-serif;font-weight:400;text-transform:uppercase;font-size:0.875rem;margin-bottom:0.75rem;color:var(--teal)}
.fcols3 a{display:block;text-decoration:none;padding:0.3125rem 0;font-size:1rem;opacity:.9;transition:transform .2s,opacity .2s}
.fcols3 a:hover{opacity:1;transform:translateX(0.25rem);text-decoration:underline}
.soc{display:flex;gap:0.625rem}
.soc a{width:2.75rem;height:2.75rem;border-radius:0.75rem;border:3px solid #fff;display:grid;place-items:center;color:#fff;transition:transform .25s var(--ease),background .25s,color .25s}
.soc a:hover{background:var(--pink);border-color:var(--pink);transform:translateY(-0.25rem) rotate(-6deg)}
.soc svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fbar{background:#061F4A;padding:1.125rem 0;font-size:0.875rem}
.fbar .c{display:flex;justify-content:space-between;gap:0.75rem 1.5rem;flex-wrap:wrap;align-items:center}
.fbar nav{display:flex;gap:1.375rem;flex-wrap:wrap}.fbar a{text-decoration:none;opacity:.9}.fbar a:hover{text-decoration:underline;opacity:1}
@media(max-width:900px){.fg2{grid-template-columns:1fr;gap:2.125rem}}
@media(max-width:620px){.fcols3{grid-template-columns:1fr 1fr;gap:1.5rem 1.125rem}.fcols3>div:last-child{grid-column:1/-1}}
/* ---- legal ---- */
.legal{display:grid;grid-template-columns:15rem 1fr;gap:2.75rem;align-items:start}
.lnav{position:sticky;top:6.875rem;display:grid;gap:0.375rem}
.lnav a{padding:0.625rem 0.875rem;border:3px solid var(--navy);border-radius:0.75rem;text-decoration:none;font-weight:600;background:#fff;transition:background .2s,transform .2s}
.lnav a:hover{background:var(--teal);transform:translateX(0.25rem)}
.lbody section{padding:0 0 2.125rem;scroll-margin-top:6.875rem}
.lbody h2{margin-bottom:0.75rem}
.lbody p,.lbody li{font-size:1rem;margin-bottom:0.625rem;max-width:70ch}
.lbody ul{padding-left:1.25rem}
.lbody .ph3{background:var(--soft);border-left:5px solid var(--pink);padding:0.625rem 0.875rem;border-radius:0 0.625rem 0.625rem 0;font-size:0.9375rem}
@media(max-width:900px){.legal{grid-template-columns:1fr}.lnav{position:static;grid-template-columns:1fr 1fr}}
/* ---- funnel popup ---- */
body.fn-open{overflow:hidden}
body.fn-open .mbar,body.fn-open .ck-b{display:none}
.fn{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:0.875rem;opacity:0;transition:opacity .25s}
.fn.in{opacity:1}.fn.bye{opacity:0}
.fn-bg{position:absolute;inset:0;background:rgba(9,47,110,.74);backdrop-filter:blur(0.1875rem)}
.fn-box{position:relative;background:#fff;color:var(--navy);border:4px solid var(--navy);border-radius:1.5rem;box-shadow:0.625rem 0.625rem 0 var(--pink);width:min(100%,41.25rem);max-height:calc(100dvh - 1.75rem);overflow:auto;padding:1.875rem;transform:translateY(1.625rem) scale(.96);transition:transform .38s var(--ease)}
.fn.in .fn-box{transform:none}
.fn-x{position:absolute;top:0.75rem;right:0.875rem;width:2.625rem;height:2.625rem;border-radius:50%;border:3px solid var(--navy);background:#fff;font-size:1.625rem;line-height:1;cursor:pointer;color:var(--navy);transition:transform .25s,background .25s;z-index:2}
.fn-x:hover{background:var(--pink);color:#fff;transform:rotate(90deg)}
.fn-in .bar-s{margin-bottom:0.375rem;padding-right:3.125rem}
.fn-count{font-size:0.875rem;font-weight:600;opacity:.7;margin:0 0 0.875rem}
.fn-body{animation:slideR .35s var(--ease)}.fn-body.back{animation-name:slideL}
@keyframes slideR{from{opacity:0;transform:translateX(1.625rem)}}@keyframes slideL{from{opacity:0;transform:translateX(-1.625rem)}}
.fn-sub{margin:0.375rem 0 0.875rem;font-size:1rem;opacity:.85}
.fn-plan{display:flex;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;align-items:center;background:var(--soft);border:3px solid var(--navy);border-radius:0.875rem;padding:0.625rem 1rem;margin:0.75rem 0}
.fn-plan span{font-weight:600;color:var(--pink)}
.fn-nav{display:flex;justify-content:space-between;gap:0.75rem;margin-top:1.25rem}
.fn-msg{color:var(--pink);font-weight:600;margin-top:0.625rem}
.opts.one{grid-template-columns:1fr}
.fn .opts{margin-top:0.625rem}
.xs{display:grid;gap:0.625rem;margin-top:0.375rem}
.xc{display:grid;grid-template-columns:auto 1fr auto;gap:0.75rem;align-items:center;border:3px solid var(--navy);border-radius:0.875rem;padding:0.75rem 0.875rem;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s}
.xc:hover{transform:translateY(-2px)}
.xc input{width:1.375rem;height:1.375rem;accent-color:var(--pink)}
.xc span b{display:block;font-size:1rem}.xc small{display:block;font-size:0.875rem;opacity:.75}.xc em{font-style:normal;font-family:'Bowlby One',sans-serif;font-size:0.8125rem;color:var(--pink);white-space:nowrap}
.xc:has(input:checked){background:var(--teal);box-shadow:0.25rem 0.25rem 0 var(--navy)}.xc:has(input:checked) em{color:var(--navy)}
.sum{display:grid;gap:0;border:3px solid var(--navy);border-radius:0.875rem;overflow:hidden;margin:0.75rem 0 1rem}
.sum>div{display:grid;grid-template-columns:6.875rem 1fr;gap:0.75rem;padding:0.625rem 0.875rem;border-top:2px solid var(--soft);font-size:0.9375rem}
.sum>div:first-child{border:0}.sum b{font-weight:600;opacity:.7}
.chk{display:flex!important;gap:0.625rem;align-items:flex-start;font-weight:400!important;font-size:0.9375rem!important}
.chk input{width:1.25rem;height:1.25rem;min-height:0!important;flex:none;margin-top:0.1875rem;accent-color:var(--pink)}
.fn-done{text-align:center;padding:0.625rem 0 0.25rem;display:grid;gap:0.75rem;justify-items:center}
.tickp{width:5.25rem;height:5.25rem;border-radius:50%;background:var(--teal);border:4px solid var(--navy);display:grid;place-items:center;animation:popin .6s var(--ease)}
.tickp svg{width:2.75rem;fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;animation:draw .6s .25s ease-out both}
@keyframes popin{from{transform:scale(0) rotate(-40deg)}}@keyframes draw{from{stroke-dashoffset:30}}
.fm label{font-weight:600;display:grid;gap:0.375rem}
@media(max-width:620px){.fn{padding:0;align-items:end}.fn-box{border-radius:1.5rem 1.5rem 0 0;border-bottom:0;padding:1.375rem 1.125rem;max-height:92dvh;width:100%}.sum>div{grid-template-columns:1fr}}
/* ---- cookies ---- */
.ck-b{position:fixed;left:1.125rem;bottom:1.125rem;z-index:250;max-width:24.375rem;display:flex;gap:0.875rem;align-items:center;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1.25rem;padding:1rem 1.125rem;box-shadow:0.4375rem 0.4375rem 0 var(--teal);transform:translateY(2.5rem) scale(.9);opacity:0;transition:transform .5s var(--ease),opacity .4s}
.ck-b.in{transform:none;opacity:1}
.ck-b.bye{transform:scale(.4) rotate(-10deg);opacity:0;transition:transform .5s,opacity .5s;pointer-events:none}
.ck-art{width:4.25rem;flex:none;animation:wobble 3.5s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(8deg) translateY(-0.25rem)}}
.ck-t b{font-family:'Bowlby One',sans-serif;font-weight:400;text-transform:uppercase}
.ck-t p{font-size:0.875rem;line-height:1.4;margin:2px 0 0.625rem}
.ck-t a{color:var(--blue);font-weight:600}
.crumb{position:fixed;z-index:400;pointer-events:none;border:2px solid #092F6E}
.crumb.choc{box-shadow:inset 0.1875rem 0.1875rem 0 rgba(9,47,110,.55)}
.boom{position:fixed;z-index:399;width:3.75rem;height:3.75rem;border-radius:50%;border:5px solid var(--pink);pointer-events:none}
@media(max-width:900px){.ck-b{left:0.75rem;right:0.75rem;bottom:5.25rem;max-width:none}}

.skip{position:absolute;left:-62.4375rem;top:0.5rem;z-index:500;background:#fff;color:#092F6E;padding:0.625rem 1rem;border:3px solid #092F6E;border-radius:0.625rem;font-weight:600}.skip:focus{left:0.5rem}
.sumline{display:grid;grid-template-columns:1fr auto;gap:0.25rem 0.875rem;text-align:left;font-size:0.9375rem;margin-top:0.625rem;padding-top:0.625rem;border-top:2px dashed #eef3ff}.sumline b{font-weight:600}
.cnote{text-align:center;font-size:0.875rem;opacity:.75;margin-top:1.125rem}
.vals{display:flex;flex-wrap:wrap;gap:0.625rem;list-style:none;padding:0}
@media(max-width:900px){#services .g3{grid-template-columns:1fr 1fr}}
@media(max-width:620px){#services .g3{grid-template-columns:1fr}}
.rvw{margin:0}
.pnl>*,.phg>*,.split>*,.faqw>*,.ct>*{min-width:0}
.ph h1{overflow-wrap:anywhere}
.split.eq{grid-template-columns:1fr 1fr}
@media(max-width:900px){.split.eq{grid-template-columns:1fr}}
.fact{overflow-wrap:anywhere;min-width:0}
.facts{grid-template-columns:repeat(auto-fit,minmax(min(12.5rem,100%),1fr))}

.nav .dd-t{font-weight:600;color:var(--navy)}
.nav .dd-t:hover{color:var(--blue)}
.logo.wm{text-shadow:2px 2px 0 var(--pink)}
.ck-b{visibility:visible}

/* =====================================================================
   v4: blue header, white CRELLO logo, colourful dense sections, simple tabs
   ===================================================================== */
/* header: back to blue, logo = white CRELLO in the hero font */
.hd{background:var(--blue);color:#fff;border-bottom:3px solid var(--navy);box-shadow:none}
.hd .c{min-height:4.25rem}
.logo.wm{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.75rem;letter-spacing:.03em;color:#fff;-webkit-text-stroke:2px var(--navy);paint-order:stroke fill;text-shadow:none;text-transform:uppercase}
.logo.wm:hover{transform:rotate(-2deg) scale(1.04)}
.nav>a,.dd-t{color:#fff}
.nav>a:hover,.dd:hover>.dd-t,.dd:focus-within>.dd-t{background:rgba(255,255,255,.16);color:#fff}
.nav>a::after{background:var(--teal)}
.nav>a[aria-current]{color:#fff}
.nav>a[aria-current]::after{transform:scaleX(1)}
.fg2 .logo.wm{font-size:1.875rem}
@media(max-width:900px){
 .mp{background:var(--blue);color:#fff;border-bottom:3px solid var(--navy)}
 .nav>a,.dd-t{color:#fff;border-top:2px solid rgba(255,255,255,.22)}
 .dd{border-top:2px solid rgba(255,255,255,.22)}
 .dd-t{border-top:0}
 .dd-b{background:rgba(255,255,255,.18)}
 .dd-b::before{border-color:#fff}
 .dd.open .dd-t,.nav>a:hover{color:var(--teal)}
 .dd-in a{color:#fff}.dd-in small{opacity:.8}
 .mp-info{background:rgba(255,255,255,.14);color:#fff}
}
/* denser spacing, plain tabs */
.s{padding:3.25rem 0}
.sh{margin-bottom:1.375rem}
.sh p{font-size:1.0625rem}
.t2{font-size:clamp(1.5rem,calc(2.8vw*var(--s)),2.125rem)}
.g{gap:1rem}
.card{padding:1.125rem}
.card.pl{padding:1.25rem}
.sub2{margin:1.25rem 0 0.75rem;font-size:1.125rem}
[data-tabs] [role=tabpanel]>.sub2:first-of-type{margin-top:0.375rem}
.pn{margin:0 0 0.875rem!important}
[data-tabs] .gp{grid-template-columns:repeat(auto-fit,minmax(15.625rem,1fr))}
[data-tabs] [role=tabpanel] .rows{margin-top:0.25rem}
.tabs button{padding:0.5rem 0.9375rem}
.faqside{position:static}
.hero{padding:2.5rem 0 2.75rem}
.pick{margin-top:2.125rem}
.cta{padding:3rem 0}
.cta p{margin:0.625rem auto 1.25rem}
@media(max-width:900px){.s{padding:2.25rem 0}.hero{padding:1.625rem 0 2rem}.cta{padding:2.375rem 0}}
/* ---- footer ---- */
footer{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:3.375rem 0 0}
footer .c{position:relative;z-index:1}
.ftb1,.ftb2{position:absolute;border-radius:50%;pointer-events:none}
.ftb1{width:21.25rem;height:21.25rem;right:-7.5rem;top:-8.125rem;background:var(--pink);opacity:.18}
.ftb2{width:16.25rem;height:16.25rem;left:-5.625rem;bottom:3.75rem;background:var(--teal);opacity:.14;border-radius:50% 50% 40% 60%}
.ft-panel{display:grid;grid-template-columns:1.25fr 1fr;gap:2.25rem;align-items:center;background:var(--blue);border:3px solid #fff;border-radius:1.5rem;padding:1.875rem 2.125rem;box-shadow:0.5625rem 0.5625rem 0 var(--pink)}
.ft-brand p{margin:0.75rem 0 1.125rem;max-width:40ch;font-size:1rem;opacity:.92}
.ft-brand .logo.wm{font-size:2.125rem;display:inline-block}
.ft-cta h3{margin-bottom:0.5rem}
.ft-cta p{font-size:1rem;margin-bottom:1rem;opacity:.92}
.soc{display:flex;gap:0.625rem}
.soc a{width:2.875rem;height:2.875rem;border-radius:0.875rem;border:3px solid #fff;display:grid;place-items:center;color:#fff;transition:transform .25s var(--ease),background .25s,border-color .25s}
.soc a:hover{background:var(--pink);border-color:var(--pink);transform:translateY(-0.25rem) rotate(-6deg)}
.soc svg{width:1.3125rem;height:1.3125rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ft-cols{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:3rem;padding:3.25rem 0 2.5rem}
.ft-cols h4{font-family:'Bowlby One',sans-serif;font-weight:400;text-transform:uppercase;font-size:0.9375rem;letter-spacing:.04em;margin-bottom:1.125rem;padding-bottom:0.75rem;position:relative;color:#fff}
.ft-cols h4::after{content:"";position:absolute;left:0;bottom:0;width:2.375rem;height:0.25rem;border-radius:2px;background:var(--pink)}
.ftl{display:grid;gap:0.25rem}
.ftl a{display:flex;align-items:center;gap:0.625rem;padding:0.375rem 0;text-decoration:none;font-size:1rem;opacity:.9;transition:transform .25s var(--ease),opacity .2s,color .2s}
.ftl a::before{content:"";width:0.4375rem;height:0.4375rem;border-radius:50%;background:var(--teal);flex:none;transition:transform .25s,background .25s}
.ftl a:hover{opacity:1;transform:translateX(0.3125rem);color:var(--teal)}
.ftl a:hover::before{background:var(--pink);transform:scale(1.4)}
.ftcs{display:grid;gap:0.75rem}
.ftc{display:flex;gap:0.875rem;align-items:center;padding:0.75rem 0.875rem;border:2px solid rgba(255,255,255,.28);border-radius:1rem;text-decoration:none;background:rgba(255,255,255,.05);transition:transform .25s var(--ease),background .25s,border-color .25s}
.ftc:hover{background:rgba(255,255,255,.12);border-color:var(--teal);transform:translateY(-0.1875rem)}
.ftci{flex:none;width:2.625rem;height:2.625rem;border-radius:0.75rem;background:var(--teal);border:3px solid #fff;display:grid;place-items:center}
.ftci svg{width:1.25rem;height:1.25rem;fill:none;stroke:var(--navy);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.ftc small{display:block;font-size:0.75rem;text-transform:uppercase;letter-spacing:.08em;opacity:.7}
.ftc b{font-weight:600;font-size:1rem;word-break:break-word}
.ft-mark{font-family:'Bowlby One','Arial Black',sans-serif;font-size:clamp(4rem,calc(17vw*var(--s)),14.375rem);line-height:.78;text-align:center;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.16);user-select:none;white-space:nowrap;overflow:hidden;margin:0.375rem 0 -.08em;letter-spacing:.02em}
.fbar{position:relative;z-index:2;background:#061F4A;padding:1.125rem 0;font-size:0.875rem;border-top:3px solid rgba(255,255,255,.14)}
.fbar .c{display:flex;justify-content:space-between;gap:0.75rem 1.5rem;flex-wrap:wrap;align-items:center}
.fbar nav{display:flex;gap:1.375rem;flex-wrap:wrap}.fbar a{text-decoration:none;opacity:.9;font-weight:500}.fbar a:hover{text-decoration:underline;opacity:1}
@media(max-width:1000px){.ft-panel{grid-template-columns:1fr}.ft-cols{grid-template-columns:1fr 1fr;gap:2.25rem 1.875rem}.ft-cols>div:last-child{grid-column:1/-1}.ftcs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){footer{padding-top:2.5rem}.ft-panel{padding:1.375rem 1.25rem}.ftcs{grid-template-columns:1fr}.ft-cols{padding:2.5rem 0 1.75rem}}
@media(max-width:420px){.ft-cols{grid-template-columns:1fr}}
.ph{overflow:hidden}
main{overflow-x:clip}
.nav .dd-t,.nav .dd-t:hover,.dd:hover>.dd-t,.dd:focus-within>.dd-t{color:#fff}
@media(max-width:900px){.dd.open>.dd-t{color:var(--teal)}}
/* ---- mobile fixes (kept last so they win) ---- */
@media(max-width:900px){
 .hero .c{grid-template-columns:1fr;gap:1.5rem}
 .hero h1{max-width:none;font-size:clamp(2rem,calc(9vw*var(--s)),2.75rem)}
 .hero p.lead{max-width:none;font-size:1.125rem}
 .hero .row{gap:0.75rem}
 .mock{justify-self:center;max-width:21.25rem;width:100%}
}
@media(max-width:620px){
 #pricing [data-tabs] .gp{display:grid;grid-template-columns:1fr;overflow:visible;margin:0;padding:0;gap:1rem;scroll-snap-type:none}
 #pricing [data-tabs] .gp .pl{flex:none;max-width:none;width:auto;scroll-snap-align:none}
 .pl .ck li:nth-child(n+4){display:none}
 .pl .more-n{display:none}
 .pl .tag{min-height:0}
 .pl .row .btn{flex:1 1 calc(50% - 0.5rem)}
 .tabs{margin-bottom:0.875rem}
 .sh h2{overflow-wrap:anywhere}
 .row .btn{flex:1 1 100%}
 .tmw{margin:0 -1.125rem}
 .tgrid{gap:1.375rem}
 .pk{min-height:4rem}
 .deal{padding:1.375rem 1.125rem}
 .deal .ck.two{grid-template-columns:1fr}
 .cmpt .r>div{font-size:0.875rem}
 .rbg,.vs{gap:1rem}
 .stats{grid-template-columns:1fr 1fr}
}

/* ---- footer v6: a real footer band ---- */
footer.ft2{position:relative;background:var(--navy);color:#fff;overflow:hidden;padding:0}
.ft2-stripe{display:block;height:0.625rem;background:linear-gradient(90deg,var(--pink) 0 34%,var(--teal) 0 67%,var(--blue) 0)}
.ft2-b1,.ft2-b2{position:absolute;pointer-events:none;border-radius:50%}
.ft2-b1{width:22.5rem;height:22.5rem;right:-8.125rem;top:-7.5rem;background:var(--pink);opacity:.16}
.ft2-b2{width:17.5rem;height:17.5rem;left:-6.25rem;bottom:2.5rem;background:var(--teal);opacity:.12;border-radius:50% 50% 40% 60%}
.ft2-main{position:relative;z-index:1;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.35fr;gap:3.25rem;padding:4rem 0 3.5rem}
.ft2-brand .logo.wm{font-size:2.625rem;display:inline-block}
.ft2-brand p{margin:1.125rem 0 1.25rem;max-width:36ch;font-size:1rem;line-height:1.65;opacity:.9}
.ft2-badge{display:inline-block;background:var(--teal);color:var(--navy);border:3px solid #fff;padding:0.1875rem 0.875rem;font-weight:600;font-size:0.9375rem;transform:rotate(-2deg);margin-bottom:1.375rem}
.ft2 .soc{display:flex;gap:0.625rem}
.ft2 .soc a{width:3rem;height:3rem;border-radius:0.875rem;border:3px solid #fff;display:grid;place-items:center;color:#fff;transition:transform .25s var(--ease),background .25s,border-color .25s}
.ft2 .soc a:hover{background:var(--pink);border-color:var(--pink);transform:translateY(-0.25rem) rotate(-6deg)}
.ft2 .soc svg{width:1.375rem;height:1.375rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ft2 h4{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;text-transform:uppercase;font-size:1rem;letter-spacing:.04em;color:#fff;margin:0 0 1.375rem;padding-bottom:0.875rem;position:relative}
.ft2 h4::after{content:"";position:absolute;left:0;bottom:0;width:2.75rem;height:0.3125rem;border-radius:0.1875rem;background:var(--pink)}
.ft2-links{display:grid;gap:2px}
.ft2-links a{display:flex;align-items:center;gap:0.75rem;padding:0.5rem 0;color:#fff;text-decoration:none;font-size:1rem;opacity:.92;transition:transform .25s var(--ease),color .2s,opacity .2s}
.ft2-links a::before{content:"";flex:none;width:0.5rem;height:0.5rem;border-radius:50%;background:var(--teal);transition:transform .25s,background .25s}
.ft2-links a:hover{opacity:1;color:var(--teal);transform:translateX(0.375rem)}
.ft2-links a:hover::before{background:var(--pink);transform:scale(1.5)}
.ft2-contact{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.ft2-contact h4{align-self:stretch;margin-bottom:0.375rem}
.ft2-c{display:flex;align-items:center;gap:0.875rem;color:#fff;text-decoration:none;transition:transform .25s var(--ease)}
.ft2-c:hover{transform:translateX(0.375rem)}
.ft2-ci{flex:none;width:2.875rem;height:2.875rem;border-radius:50%;background:var(--teal);border:3px solid #fff;display:grid;place-items:center;transition:background .25s}
.ft2-c:hover .ft2-ci{background:var(--pink)}
.ft2-ci svg{width:1.3125rem;height:1.3125rem;fill:none;stroke:var(--navy);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.ft2-c:hover .ft2-ci svg{stroke:#fff}
.ft2-c small{display:block;font-size:0.75rem;text-transform:uppercase;letter-spacing:.09em;opacity:.7}
.ft2-c b{display:block;font-weight:600;font-size:1rem;word-break:break-word}
.ft2-mark{position:relative;font-family:'Bowlby One','Arial Black',sans-serif;font-size:clamp(4.375rem,calc(18vw*var(--s)),15.625rem);line-height:.76;text-align:center;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.15);user-select:none;white-space:nowrap;overflow:hidden;margin:0 0 -.1em;letter-spacing:.02em}
.ft2 .fbar{position:relative;z-index:2;background:#061F4A;color:#fff;padding:1.125rem 0;font-size:0.875rem;border-top:3px solid rgba(255,255,255,.14)}
.ft2 .fbar .c{display:flex;justify-content:space-between;align-items:center;gap:0.75rem 1.5rem;flex-wrap:wrap}
.ft2 .fbar nav{display:flex;gap:1.375rem;flex-wrap:wrap;align-items:center}
.ft2 .fbar a{color:#fff;text-decoration:none;opacity:.9;font-weight:500}.ft2 .fbar a:hover{text-decoration:underline;opacity:1}
@media(max-width:1000px){.ft2-main{grid-template-columns:1fr 1fr;gap:2.5rem 2rem;padding:3.375rem 0 2.75rem}.ft2-brand,.ft2-contact{grid-column:1/-1}.ft2-contact{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem 1.25rem}.ft2-contact h4,.ft2-contact .row{grid-column:1/-1}}
@media(max-width:700px){.ft2-main{padding:2.75rem 0 2.25rem;gap:2.125rem 1.125rem}.ft2-brand .logo.wm{font-size:2.25rem}.ft2-contact{display:flex}.ft2 .fbar .c{flex-direction:column;align-items:flex-start;gap:0.75rem}.ft2-links a{padding:0.5625rem 0}}
.totop{font:600 0.875rem 'Outfit',sans-serif;color:#fff;background:var(--pink);border:2px solid #fff;border-radius:6.1875rem;padding:0.375rem 1rem;cursor:pointer;min-height:2.375rem;transition:transform .2s var(--ease),background .2s}
.totop:hover{transform:translateY(-0.1875rem);background:var(--blue)}
@media(max-width:1000px){.ft2-contact{grid-template-columns:repeat(auto-fit,minmax(16.875rem,1fr))}}
@media(max-width:700px){.ft2-contact{grid-template-columns:none}}

/* footer: no watermark, no bullets - clean rows with an arrow on hover */
.ft2-mark{display:none}
.ft2-links{gap:0}
.ft2-links a{justify-content:space-between;padding:0.6875rem 0;border-bottom:1px solid rgba(255,255,255,.16);opacity:1;transition:color .2s,padding .25s var(--ease),border-color .2s}
.ft2-links a::before{content:none;display:none}
.ft2-links a::after{content:"\2192";color:var(--teal);opacity:0;transform:translateX(-0.625rem);transition:opacity .2s,transform .25s var(--ease)}
.ft2-links a:hover{transform:none;color:var(--teal);padding-left:0.375rem;border-color:var(--teal)}
.ft2-links a:hover::after{opacity:1;transform:none}
@media(hover:none){.ft2-links a::after{opacity:.45;transform:none}}

/* ---- header: a little taller, and a redone mobile header + menu ---- */
.hd .c{min-height:5.125rem}
.logo.wm{font-size:1.9375rem}
.nav>a,.dd-t{padding:0.8125rem 1rem}
.hd-cta .btn.sm{min-height:2.75rem;padding:0.5625rem 1.25rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.burger .bars{display:none}
@media(max-width:900px){
 .hd{--hdh:4.875rem}
 .hd .c{min-height:4.6875rem;gap:0.75rem}
 .logo.wm{font-size:1.8125rem}
 .burger{display:grid;place-items:center;width:3.25rem;height:3.25rem;min-width:3.25rem;min-height:3.25rem;padding:0;margin-left:auto;border-radius:0.9375rem;background:var(--pink);border:3px solid var(--navy);box-shadow:0.1875rem 0.1875rem 0 var(--navy);transition:transform .2s var(--ease),box-shadow .2s}
 .burger:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--navy)}
 .burger .bars{display:block;position:relative;width:1.5rem;height:1.125rem}
 .burger .bars i{position:absolute;left:0;right:0;height:0.1875rem;border-radius:2px;background:#fff;transition:transform .32s var(--ease),opacity .2s,top .32s var(--ease)}
 .burger .bars i:nth-child(1){top:0}.burger .bars i:nth-child(2){top:0.4688rem}.burger .bars i:nth-child(3){top:0.9375rem}
 .hd.open .burger .bars i:nth-child(1){top:0.4688rem;transform:rotate(45deg)}
 .hd.open .burger .bars i:nth-child(2){opacity:0;transform:scaleX(.2)}
 .hd.open .burger .bars i:nth-child(3){top:0.4688rem;transform:rotate(-45deg)}
 .mp{position:fixed;left:0;right:0;top:var(--hdh);bottom:0;width:auto;max-height:none;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:0;padding:0.5rem 1.375rem calc(1.875rem + env(safe-area-inset-bottom,0px));background-color:var(--blue);background-image:radial-gradient(rgba(255,255,255,.1) 1.6px,transparent 1.7px);background-size:1.375rem 1.375rem;border:0;border-top:3px solid var(--navy);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-0.875rem);transition:opacity .35s ease,transform .4s var(--ease),visibility 0s .4s}
 .hd.open .mp{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
 body.menu-open{overflow:hidden}
 body.menu-open .mbar,body.menu-open .ck-b{display:none}
 .nav{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0}
 .nav>a,.dd-t{display:flex;align-items:center;justify-content:space-between;gap:0.625rem;padding:1.1875rem 0.25rem;font-size:1.375rem;font-weight:600;line-height:1.2;color:#fff;border:0;border-bottom:2px solid rgba(255,255,255,.2);border-radius:0;background:none}
 .nav>a::after{content:"\2192";position:static;display:block;width:auto;height:auto;left:auto;right:auto;bottom:auto;background:none;transform:none;color:var(--teal);font-size:1.375rem;transition:transform .25s var(--ease)}
 .nav>a:hover::after{transform:translateX(0.3125rem)}
 .nav>a[aria-current]{color:var(--teal)}
 .dd{display:grid;grid-template-columns:1fr 3.25rem;align-items:center;border-bottom:2px solid rgba(255,255,255,.2);border-top:0}
 .dd-t{border:0;padding-right:0}
 .dd-t::after{display:none}
 .dd-b{display:grid;place-items:center;width:2.875rem;height:2.875rem;border:3px solid #fff;border-radius:0.875rem;background:transparent;cursor:pointer;justify-self:end}
 .dd-b::before{content:"";width:0.5625rem;height:0.5625rem;border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
 .dd.open .dd-b{background:var(--pink);border-color:var(--navy)}
 .dd.open .dd-b::before{transform:rotate(225deg) translateY(-2px)}
 .dd.open>.dd-t{color:var(--teal)}
 .dd-m{position:static;grid-column:1/-1;width:auto;padding:0;opacity:1;visibility:visible;transform:none;max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
 .dd.open .dd-m{max-height:38.75rem}
 .dd-in{display:grid;grid-template-columns:1fr;gap:0.5rem;background:rgba(9,47,110,.35);border:0;box-shadow:none;border-radius:1rem;padding:0.625rem;margin:2px 0 1rem}
 .dd-in a{display:flex;align-items:center;gap:0.875rem;padding:0.625rem 0.75rem;border-radius:0.75rem;color:#fff;background:rgba(255,255,255,.08)}
 .dd-in a:hover{background:rgba(255,255,255,.18);transform:none}
 .dd-in b{font-size:1rem}.dd-in small{font-size:0.8125rem;opacity:.85}
 .hd-cta{display:flex;flex-direction:column;gap:0.75rem;margin-top:1.625rem}
 .hd-cta .btn{width:100%;min-height:3.375rem;font-size:0.9375rem;justify-content:center}
 .mp-info{display:grid;gap:0.625rem;background:rgba(9,47,110,.4);border:2px solid rgba(255,255,255,.25);border-radius:1.125rem;padding:1rem;margin-top:1.375rem;color:#fff}
 .mp-info>b{font-size:0.75rem;text-transform:uppercase;letter-spacing:.1em;opacity:.75}
 .mp-info .mi{display:flex;align-items:center;gap:0.75rem;color:#fff;text-decoration:none;font-weight:600;font-size:1rem;word-break:break-word}
 .mii{flex:none;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--teal);border:3px solid #fff;display:grid;place-items:center}
 .mii svg{width:1.1875rem;height:1.1875rem;fill:none;stroke:var(--navy);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
 .hd.open .nav>*{animation:fadeUp .45s var(--ease) both}
 .hd.open .nav>*:nth-child(1){animation-delay:.04s}.hd.open .nav>*:nth-child(2){animation-delay:.09s}.hd.open .nav>*:nth-child(3){animation-delay:.14s}.hd.open .nav>*:nth-child(4){animation-delay:.19s}.hd.open .nav>*:nth-child(5){animation-delay:.24s}
 .hd.open .hd-cta{animation:fadeUp .45s .3s var(--ease) both}
 .hd.open .mp-info{animation:fadeUp .45s .38s var(--ease) both}
}
@media(max-width:380px){.logo.wm{font-size:1.625rem}.nav>a,.dd-t{font-size:1.25rem}}
@media(prefers-reduced-motion:reduce){.hd.open .nav>*,.hd.open .hd-cta,.hd.open .mp-info{animation:none}}

@media(max-width:900px){
 .nav>a:hover,.dd:hover>.dd-t,.dd:focus-within>.dd-t{background:none;color:#fff}
 .dd.open>.dd-t,.dd.open:hover>.dd-t{color:var(--teal)}
 .nav>a[aria-current],.nav>a[aria-current]:hover{color:var(--teal)}
}
/* ---- full-width layout: content follows the screen instead of stopping at 1160px ---- */
:root{--w:1900px}
.c{width:min(calc(100% - clamp(2rem,5vw,7rem)),var(--w));margin-inline:auto}
@media(max-width:900px){.c{width:calc(100% - 2.5rem)}}
@media(max-width:620px){.c{width:calc(100% - 2rem)}.tmw{margin:0 -1rem}.tabs{margin-inline:-1rem;padding-inline:1rem}.tgrid{gap:1.25rem}}
@media(min-width:1500px){
 body{font-size:1.125rem}
 .t1{font-size:clamp(2.875rem,calc(4.2vw*var(--s)),5.25rem)}
 .t2{font-size:clamp(1.875rem,calc(2.6vw*var(--s)),3rem)}
 .t3{font-size:1.3125rem}
 .s{padding:4.25rem 0}
 .sh{max-width:53.75rem}.sh p{font-size:1.1875rem}
 .hero{padding:3.5rem 0 3.75rem}
 .hero h1{max-width:14ch}
 .hero p.lead{font-size:1.375rem;max-width:40ch}
 .mock{max-width:37.5rem}
 .card p,.card li{font-size:1.0625rem}
 .btn{font-size:1rem;min-height:3.125rem}
 .btn.sm{min-height:2.75rem;font-size:0.875rem}
 .nav>a,.dd-t{font-size:1.125rem}
 .logo.wm{font-size:2.125rem}
 .hd .c{min-height:5.75rem}
 .ft2-main{padding:4.75rem 0 4rem}
 .ft2-links a,.ft2-c b{font-size:1.0625rem}
 .faq summary{font-size:1.125rem}
}
@media(min-width:2100px){.t1{font-size:6rem}.mock{max-width:43.75rem}}
/* never let the skip link or anything off-screen widen the page */
.skip{left:0;top:0;transform:translateY(-200%)}
.skip:focus{transform:none;left:0.5rem;top:0.5rem}
@supports not (overflow-x:clip){html,body{overflow-x:hidden}}
@media(max-width:900px){.tmw{margin:0 -1.25rem}.tabs{margin-inline:-1.25rem;padding-inline:1.25rem}}
@media(max-width:620px){.tmw{margin:0 -1rem}.tabs{margin-inline:-1rem;padding-inline:1rem}}

/* ---- form states: validation, spam trap, loading, success and error ---- */
.hp{position:absolute!important;left:-624.9375rem;top:auto;width:1px;height:1px;overflow:hidden}
.field-err{color:var(--pink);font-weight:600;font-size:0.875rem;line-height:1.3}
.fm input[aria-invalid=true],.fm textarea[aria-invalid=true],.fm select[aria-invalid=true]{border-color:var(--pink);box-shadow:0 0 0 0.1875rem rgba(233,79,122,.22)}
.chk{flex-wrap:wrap}
.chk .field-err{flex-basis:100%}
.form-msg{border:3px solid var(--navy);border-radius:0.875rem;padding:0.75rem 1rem;font-weight:600;font-size:1rem;line-height:1.45}
.form-msg.ok{background:var(--teal);color:var(--navy)}
.form-msg.err{background:var(--pink);color:#fff}
.form-msg a,.fn-msg a{color:inherit;text-decoration:underline;font-weight:700}
.btn .spin{display:inline-block;flex:none;width:1rem;height:1rem;border:3px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.btn[aria-busy=true]{cursor:progress;opacity:.92}
.btn:disabled{pointer-events:none}
@media(prefers-reduced-motion:reduce){.btn .spin{animation-duration:1.6s}}

/* =====================================================================
   v7: navy header that matches the footer + redesigned top bar
   ===================================================================== */
html{scroll-padding-top:7.125rem}
/* ---- top bar ---- */
.tb{background-color:var(--pink);background-image:radial-gradient(rgba(255,255,255,.22) 1.5px,transparent 1.6px);background-size:1.125rem 1.125rem;color:#fff;font-size:0.9375rem;font-weight:600}
.tb .tb-in{display:flex;justify-content:space-between;align-items:center;gap:1.25rem;padding:0.5625rem 0;min-height:3.5rem}
.tb .tb-l,.tb .tb-r{display:flex;align-items:center;gap:0.75rem}
.tb .tb-l{gap:1.75rem}
.tb a{opacity:1;color:#fff;text-decoration:none}
.tb .tb-l a{position:relative;padding:0.25rem 0;font-size:0.9375rem}
.tb .tb-l a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0.1875rem;border-radius:2px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.tb .tb-l a:hover::after{transform:scaleX(1)}
.tb-pill{display:inline-flex;align-items:center;gap:0.625rem;background:#fff;color:var(--navy);border-radius:6.1875rem;padding:0.5rem 1.125rem 0.5rem 0.8125rem;font-family:'Bowlby One','Arial Black',sans-serif;font-size:0.7812rem;letter-spacing:.06em;text-transform:uppercase;line-height:1;white-space:nowrap;box-shadow:0.1875rem 0.1875rem 0 var(--navy)}
.tb-dot{display:block;width:0.6875rem;height:0.6875rem;border-radius:50%;background:var(--teal);animation:tbpulse 2s infinite}
@keyframes tbpulse{0%{box-shadow:0 0 0 0 rgba(45,208,197,.75)}70%,100%{box-shadow:0 0 0 0.5625rem rgba(45,208,197,0)}}
.tb .tb-c{display:inline-flex;align-items:center;gap:0.625rem;min-height:2.5rem;background:#fff;color:var(--navy);border-radius:6.1875rem;padding:0.25rem 1.125rem 0.25rem 0.3125rem;font-size:0.9375rem;font-weight:600;white-space:nowrap;box-shadow:0.1875rem 0.1875rem 0 var(--navy);transition:transform .2s var(--ease),background .2s,box-shadow .2s}
.tb .tb-c:hover{background:var(--teal);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--navy);text-decoration:none}
.tb .tb-ci{flex:none;width:1.875rem;height:1.875rem;border-radius:50%;background:var(--navy);display:grid;place-items:center}
.tb .tb-ci svg{width:1rem;height:1rem;fill:none;stroke:#fff;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1300px){.tb .tb-l a{display:none}}
/* ---- header: navy like the footer, with the same pink / teal / blue stripe ---- */
.hd{background:var(--navy);color:#fff;border-bottom:0;box-shadow:none}
.hd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0.375rem;background:linear-gradient(90deg,var(--pink) 0 34%,var(--teal) 0 67%,var(--blue) 0);pointer-events:none}
.hd .c{min-height:6.25rem;padding-bottom:0.375rem;gap:1.625rem}
.logo.wm{font-size:2.5625rem;letter-spacing:.04em;-webkit-text-stroke:0;color:#fff;text-shadow:none}
.hd-cta{gap:0.75rem}
.hd-cta .btn.sm{min-height:3.25rem;padding:0.75rem 1.625rem;font-size:0.9375rem;border-color:#fff;box-shadow:0.25rem 0.25rem 0 rgba(0,0,0,.32)}
.hd-cta .btn.sm:hover{box-shadow:2px 2px 0 rgba(0,0,0,.32)}
.hd-cta .btn svg{width:1.25rem;height:1.25rem}
@media(min-width:901px){
 .nav{gap:2px}
 .nav>a,.dd-t{padding:0.9375rem 1rem;font-size:1.1562rem;font-weight:600;color:#fff;background:none;border-radius:0.75rem}
 .nav>a:hover,.dd:hover>.dd-t,.dd:focus-within>.dd-t{background:none;color:var(--teal)}
 .nav>a::after{left:1rem;right:1rem;bottom:0.3125rem;height:0.25rem;border-radius:2px;background:var(--pink)}
 .nav>a[aria-current]{color:#fff}
 .nav>a[aria-current]::after{transform:scaleX(1)}
 .dd-m{padding-top:1.875rem}
}
@media(min-width:901px) and (max-width:1359px){
 .hd-cta .btn.wa.sm{padding:0;width:3.25rem;min-width:3.25rem}
 .hd-cta .btn.wa .wl{display:none}
}
@media(min-width:1600px){
 .hd .c{min-height:6.75rem}
 .logo.wm{font-size:2.875rem}
 .nav>a,.dd-t{font-size:1.2188rem;padding:1rem 1.125rem}
 .nav>a::after{left:1.125rem;right:1.125rem}
 .hd-cta .btn.sm{min-height:3.5rem;font-size:1rem}
 .tb .tb-in{min-height:3.75rem}
 .tb,.tb .tb-c,.tb .tb-l a{font-size:1rem}
}
/* ---- mobile / tablet header (menu button) ---- */
@media(max-width:900px){
 html{scroll-padding-top:6.25rem}
 .tb{display:none}
 .hd{--hdh:5.5rem}
 .hd .c{min-height:5.5rem;gap:0.75rem}
 .logo.wm{font-size:2.25rem}
 .burger{width:3.5rem;height:3.5rem;min-width:3.5rem;min-height:3.5rem;border-color:#fff;box-shadow:0.1875rem 0.1875rem 0 rgba(0,0,0,.35)}
 .mp{background-color:var(--navy);border-top:0}
 .nav>a,.dd-t{font-size:1.4375rem}
}
@media(max-width:380px){.logo.wm{font-size:1.9375rem}}
@media(min-width:901px){
 .nav{align-items:center}
 .nav>a,.dd-t{display:inline-flex;align-items:center;line-height:1.3;min-height:3.625rem}
 .dd{display:flex;align-items:center}
}
@media(min-width:1600px){.nav>a,.dd-t{min-height:3.875rem}}

@media(max-width:620px){html{font-size:95%;--s:.95}}

/* ---- desktop header now starts at 901px wide (so the Claude preview pane shows it) ---- */
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:901px) and (max-width:1180px){
 .hd .c{min-height:5.4rem;gap:.9rem}
 .logo.wm{font-size:2.15rem}
 .nav{gap:0}
 .nav>a,.dd-t{padding:.7rem .75rem;font-size:1.06rem;min-height:3rem}
 .nav>a::after{left:.75rem;right:.75rem;bottom:.2rem}
 .dd-m{left:-.5rem;width:min(35rem,calc(100vw - 4rem))}
 .hd-cta{gap:.55rem}
 .hd-cta .btn.sm{min-height:2.9rem;padding:.55rem 1.1rem;font-size:.82rem}
 .hd-cta .btn.wa.sm{width:2.9rem;min-width:2.9rem;padding:0}
 .hd-cta .btn svg{width:1.15rem;height:1.15rem}
}
/* ---- calmer pink top bar: flat, two links on the left, phone and email on the right ---- */
.tb{background-image:none;font-size:1rem;font-weight:600}
.tb .tb-in{min-height:2.75rem;padding:.35rem 0;gap:1.2rem}
.tb .tb-l{gap:1.3rem}
.tb .tb-l a{display:inline-block;padding:.2rem 0;font-size:1rem}
.tb .tb-l a+a{padding-left:1.3rem;border-left:1px solid rgba(255,255,255,.55)}
.tb .tb-l a::after{left:0;right:0}
.tb .tb-l a+a::after{left:1.3rem}
.tb .tb-r{gap:1.7rem}
.tb .tb-c{background:none;box-shadow:none;border-radius:0;padding:.15rem 0;min-height:0;font-size:1rem;gap:.55rem}
.tb .tb-c:hover{background:none;box-shadow:none;transform:none;text-decoration:underline}
.tb .tb-ci{width:1.6rem;height:1.6rem;background:#fff}
.tb .tb-ci svg{width:.9rem;height:.9rem;stroke:var(--pink)}
@media(max-width:1300px){.tb .tb-l a{display:inline-block}}
@media(min-width:1600px){.tb .tb-in{min-height:3rem}}
.tb .tb-c,.tb .tb-c:hover{color:#fff}
@media(max-width:620px){.g4{grid-template-columns:1fr}}

/* ---- website plans page: reuses the existing pricing-card look ---- */
.sub3{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;text-transform:uppercase;font-size:.82rem;letter-spacing:.05em;color:var(--pink);margin:.9rem 0 .2rem}
.pl.full .ck{flex:0 0 auto;margin:.3rem 0 .5rem}
.pl.full .tag{min-height:0}
.pl .pnote,.pl.full .tnote{font-size:.9rem;line-height:1.45;opacity:.85}
.pl .pnote{margin:.2rem 0 .3rem}
.pl.full .tnote{margin:.5rem 0 .9rem;padding-top:.7rem;border-top:2px dashed var(--soft)}
.pl.full .row{margin-top:auto}
.ck.no li::before{background:#fde3ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23E94F7A' stroke-width='2.4'%3E%3Cpath d='M3 3l6 6M9 3l-6 6'/%3E%3C/svg%3E") center/.65rem no-repeat}
.wpg{grid-template-columns:repeat(3,1fr);align-items:stretch}
@media(max-width:1100px){.wpg{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.wpg{grid-template-columns:1fr}}
@media(max-width:620px){.pl.full .ck li:nth-child(n+4){display:flex}.pl.full .row .btn{flex:1 1 100%}}

/* ---- website maintenance page: reuses the plan-card look ---- */
.pl .best{font-size:.95rem;font-weight:600;line-height:1.4;margin:.2rem 0 .1rem}
.pl .important{margin-top:.3rem}
.pl .important .sub3{margin-top:.6rem}
.pl .important .pnote{margin:.15rem 0 .35rem}
.cmpi{margin-top:.5rem}
.card .price{margin:.1rem 0}

/* ---- add-ons: compact cards (much smaller than the plan cards) ---- */
[data-cats][hidden]{display:none!important}
.aog{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:1rem}
.card.ao{padding:1rem 1.1rem;gap:.5rem}
.ao .ch{gap:.7rem;align-items:center}
.ao .ico{width:2.4rem;height:2.4rem;border-radius:.7rem;box-shadow:2px 2px 0 var(--navy)}
.ao .ico svg{width:1.2rem;height:1.2rem}
.ao h3{font-size:.95rem;line-height:1.2}
.ao p{font-size:.92rem;line-height:1.45;margin:0}
.ao .cf{margin-top:auto;padding-top:.6rem}
.aop{font-family:'Bowlby One','Arial Black',sans-serif;font-size:.95rem;color:var(--pink);white-space:nowrap}
.ao .more{font-size:.9rem}
@media(max-width:620px){.aog{grid-template-columns:1fr}}

/* ---- SEO services page ---- */
.seog{grid-template-columns:repeat(4,1fr);align-items:stretch}
.seoc{grid-template-columns:repeat(4,1fr)}
@media(max-width:1180px){.seog,.seoc{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.seog,.seoc{grid-template-columns:1fr}}

/* =====================================================================
   v8: smaller header + redesigned mobile header (slim bar, call + menu buttons)
   ===================================================================== */
.hd-call{display:none}
/* ---- desktop: smaller ---- */
html{scroll-padding-top:5.6rem}
.hd .c{min-height:4.9rem;padding-bottom:.4rem;gap:1.2rem}
.hd::after{height:.28rem}
.logo.wm{font-size:2.3rem;letter-spacing:.04em}
.hd-cta{gap:.6rem}
.hd-cta .btn.sm{min-height:2.7rem;padding:.5rem 1.2rem;font-size:.85rem}
.hd-cta .btn svg{width:1.15rem;height:1.15rem}
@media(min-width:901px){
 .nav{gap:0}
 .nav>a,.dd-t{padding:.5rem .8rem;font-size:1.08rem;min-height:2.7rem}
 .nav>a::after{left:.8rem;right:.8rem;bottom:.2rem;height:.22rem}
 .dd-m{padding-top:1.7rem}
}
@media(min-width:901px) and (max-width:1359px){
 .hd-cta .btn.wa.sm{padding:0;width:2.7rem;min-width:2.7rem}
}
@media(min-width:1600px){
 .hd .c{min-height:5.3rem}
 .logo.wm{font-size:2.55rem}
 .nav>a,.dd-t{font-size:1.15rem;min-height:2.9rem;padding:.55rem .9rem}
 .nav>a::after{left:.9rem;right:.9rem}
 .hd-cta .btn.sm{min-height:2.9rem;font-size:.9rem}
 html{scroll-padding-top:6rem}
}
@media(min-width:901px) and (max-width:1180px){
 .hd .c{min-height:4.5rem;gap:.8rem}
 .logo.wm{font-size:1.95rem}
 .nav>a,.dd-t{padding:.45rem .6rem;font-size:.98rem;min-height:2.5rem}
 .nav>a::after{left:.6rem;right:.6rem}
 .dd-m{padding-top:1.5rem}
 .hd-cta{gap:.45rem}
 .hd-cta .btn.sm{min-height:2.5rem;padding:.45rem .95rem;font-size:.78rem}
 .hd-cta .btn.wa.sm{width:2.5rem;min-width:2.5rem}
 html{scroll-padding-top:5rem}
}
/* ---- mobile / tablet: slim bar with wordmark, call button and menu button ---- */
@media(max-width:900px){
 html{scroll-padding-top:4.6rem}
 .hd{--hdh:3.9rem}
 .hd .c{min-height:3.9rem;padding-bottom:.3rem;gap:.55rem}
 .hd::after{height:.25rem}
 .logo.wm{font-size:1.85rem;margin-right:auto}
 .hd-call{display:grid;place-items:center;flex:none;width:2.9rem;height:2.9rem;border-radius:50%;background:var(--teal);color:var(--navy);border:2px solid var(--teal);transition:transform .2s var(--ease),background .2s}
 .hd-call svg{width:1.25rem;height:1.25rem;fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
 .hd-call:active{transform:scale(.92)}
 .burger{margin-left:0;width:2.9rem;height:2.9rem;min-width:2.9rem;min-height:2.9rem;border-radius:.85rem;background:transparent;border:2px solid rgba(255,255,255,.9);box-shadow:none;transition:background .25s,border-color .25s,transform .2s var(--ease)}
 .burger:active{transform:scale(.94);box-shadow:none}
 .burger .bars{width:1.3rem;height:1rem}
 .burger .bars i{height:2px;border-radius:2px}
 .burger .bars i:nth-child(1){top:0}.burger .bars i:nth-child(2){top:.45rem}.burger .bars i:nth-child(3){top:.9rem}
 .hd.open .burger{background:var(--pink);border-color:var(--pink)}
 .hd.open .burger .bars i:nth-child(1){top:.45rem}
 .hd.open .burger .bars i:nth-child(3){top:.45rem}
 .nav>a,.dd-t{font-size:1.3rem;padding:.95rem .25rem}
 .nav>a::after{font-size:1.3rem}
}
@media(max-width:380px){.logo.wm{font-size:1.6rem}.hd .c{gap:.4rem}}
/* the menu button's lines were picking up the SEO chart's ".bars" styles: reset them */
.hd .burger .bars{border:0;padding:0;gap:0;display:block;height:1rem}
.hd .burger .bars i{border:0;animation:none;flex:none;transform-origin:50% 50%;background:#fff;height:2px;width:auto;left:0;right:0;opacity:1}
.hd.open .burger .bars i:nth-child(2){opacity:0}

/* =====================================================================
   v9: header parts scaled down to match the smaller header + new mobile dropdown
   ===================================================================== */
/* ---- desktop: logo, nav and buttons shrink with the header ---- */
html{scroll-padding-top:4.8rem}
.hd .c{min-height:4rem;padding-bottom:.3rem;gap:1rem}
.hd::after{height:.22rem}
.logo.wm{font-size:1.85rem;letter-spacing:.04em}
.hd-cta{gap:.5rem}
.hd-cta .btn.sm{min-height:2.3rem;padding:.4rem 1rem;font-size:.76rem;box-shadow:3px 3px 0 rgba(0,0,0,.3);border-width:2px}
.hd-cta .btn.sm:hover{box-shadow:1px 1px 0 rgba(0,0,0,.3)}
.hd-cta .btn svg{width:.95rem;height:.95rem}
@media(min-width:901px){
 .nav>a,.dd-t{padding:.4rem .65rem;font-size:.95rem;min-height:2.3rem}
 .nav>a::after{left:.65rem;right:.65rem;bottom:.1rem;height:.18rem}
 .dd-t::after{width:.45rem;height:.45rem}
 .dd-m{padding-top:1.3rem}
}
@media(min-width:901px) and (max-width:1359px){
 .hd-cta .btn.wa.sm{padding:0;width:2.3rem;min-width:2.3rem}
}
@media(min-width:1600px){
 html{scroll-padding-top:5.2rem}
 .hd .c{min-height:4.4rem}
 .logo.wm{font-size:2.05rem}
 .nav>a,.dd-t{font-size:1.02rem;min-height:2.5rem;padding:.45rem .75rem}
 .nav>a::after{left:.75rem;right:.75rem}
 .hd-cta .btn.sm{min-height:2.5rem;font-size:.8rem}
 .hd-cta .btn.wa.sm{width:2.5rem}
}
@media(min-width:901px) and (max-width:1180px){
 .hd .c{min-height:3.7rem;gap:.7rem}
 .logo.wm{font-size:1.6rem}
 .nav>a,.dd-t{padding:.4rem .5rem;font-size:.86rem;min-height:2.1rem}
 .nav>a::after{left:.5rem;right:.5rem}
 .dd-m{padding-top:1.1rem}
 .hd-cta{gap:.4rem}
 .hd-cta .btn.sm{min-height:2.1rem;padding:.35rem .8rem;font-size:.68rem}
 .hd-cta .btn.wa.sm{width:2.1rem;min-width:2.1rem}
 html{scroll-padding-top:4.5rem}
}
/* ---- mobile / tablet: smaller bar, and a plain dropdown in the footer's style ---- */
@media(max-width:900px){
 html{scroll-padding-top:4.2rem}
 .hd{--hdh:3.4rem}
 .hd .c{min-height:3.4rem;padding-bottom:.28rem;gap:.5rem}
 .hd::after{height:.22rem}
 .logo.wm{font-size:1.55rem}
 .hd-call{width:2.65rem;height:2.65rem}
 .hd-call svg{width:1.1rem;height:1.1rem}
 .burger{width:2.65rem;height:2.65rem;min-width:2.65rem;min-height:2.65rem;border-radius:.75rem}
 .burger .bars{width:1.15rem;height:.85rem}
 .hd .burger .bars{height:.85rem}
 .burger .bars i:nth-child(1){top:0}.burger .bars i:nth-child(2){top:.38rem}.burger .bars i:nth-child(3){top:.76rem}
 .hd.open .burger .bars i:nth-child(1),.hd.open .burger .bars i:nth-child(3){top:.38rem}
 /* dimmed page behind the menu */
 body::after{content:"";position:fixed;inset:0;z-index:40;background:rgba(6,31,74,.62);opacity:0;pointer-events:none;transition:opacity .3s ease}
 body.menu-open::after{opacity:1;pointer-events:auto}
 /* the dropdown panel: flat navy like the footer, as tall as its content */
 .mp{top:var(--hdh);bottom:auto;max-height:calc(100dvh - var(--hdh));background-color:var(--navy);background-image:none;border:0;border-bottom:.25rem solid var(--pink);padding:.3rem 1.3rem 1.4rem;box-shadow:0 1.2rem 2rem rgba(0,0,0,.28)}
 /* page links: simple rows with thin dividers, like the footer links */
 .nav{display:block}
 .nav>a,.dd-t{display:flex;align-items:center;justify-content:space-between;min-height:0;padding:.95rem .1rem;font-size:1.12rem;font-weight:600;line-height:1.25;color:#fff;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.18);border-radius:0}
 .nav>a::after{content:"";position:static;display:block;flex:none;width:.5rem;height:.5rem;margin-right:.35rem;border:0;border-top:2px solid var(--teal);border-right:2px solid var(--teal);background:none;transform:rotate(45deg);transition:transform .25s var(--ease)}
 .nav>a:hover::after{transform:rotate(45deg) translate(2px,-2px)}
 .nav>a[aria-current],.nav>a[aria-current]:hover{color:var(--teal)}
 /* Services: plain row with a chevron, then an indented list (no cards, no icons) */
 .dd{display:grid;grid-template-columns:1fr auto;align-items:center;border-bottom:1px solid rgba(255,255,255,.18)}
 .dd-t{border-bottom:0;padding-right:0}
 .dd-b{display:grid;place-items:center;width:2.8rem;height:2.8rem;border:0;border-radius:0;background:none}
 .dd.open .dd-b{background:none;border:0}
 .dd-b::before{width:.5rem;height:.5rem;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(45deg) translateY(-2px)}
 .dd.open .dd-b::before{transform:rotate(225deg) translateY(-2px)}
 .dd.open>.dd-t{color:var(--teal)}
 .dd-m{grid-column:1/-1}
 .dd.open .dd-m{max-height:30rem}
 .dd-in{display:block;background:none;border:0;border-left:3px solid var(--pink);border-radius:0;box-shadow:none;padding:0 0 .3rem .9rem;margin:0 0 .7rem .15rem}
 .dd-in a{display:block;padding:.7rem .2rem;border-radius:0;background:none;color:#fff;border-bottom:1px solid rgba(255,255,255,.1);transition:color .2s,padding .25s var(--ease)}
 .dd-in a:last-child{border-bottom:0}
 .dd-in a:hover{background:none;color:var(--teal);padding-left:.5rem}
 .dd-in .ico,.dd-in small{display:none}
 .dd-in a b{display:block;font-size:1rem;font-weight:500}
 /* buttons + contact, no boxes */
 .hd-cta{flex-direction:row;gap:.6rem;margin-top:1.1rem}
 .hd-cta .btn{width:auto;flex:1;min-height:2.7rem;font-size:.78rem}
 .mp-info{display:grid;gap:.1rem;background:none;border:0;border-radius:0;padding:0;margin-top:1.2rem}
 .mp-info>b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;opacity:1;color:#fff;position:relative;padding-bottom:.65rem;margin-bottom:.2rem}
 .mp-info>b::after{content:"";position:absolute;left:0;bottom:0;width:2.4rem;height:.25rem;border-radius:2px;background:var(--pink)}
 .mp-info .mi{display:flex;align-items:center;gap:.8rem;padding:.4rem 0;color:#fff;font-size:1rem;font-weight:600}
 .mii{width:2.2rem;height:2.2rem;border-width:2px}
 .mii svg{width:1rem;height:1rem}
}
@media(max-width:380px){.logo.wm{font-size:1.4rem}.hd .c{gap:.4rem}.mp{padding:.3rem 1rem 1.2rem}}
@media(max-width:900px){
 .dd{border-top:0}
 .nav a{border-top:0}
 .nav>a,.dd-t{border-top:0}
 .dd-in a{border-top:0;border-bottom:1px solid rgba(255,255,255,.12)}
 .dd-in a:last-child{border-bottom:0}
}

/* =====================================================================
   v10: a normal-sized header - correct proportions and spacing
   ===================================================================== */
/* ---- desktop ---- */
html{scroll-padding-top:5.6rem}
.hd .c{min-height:5rem;padding-bottom:.28rem;gap:1.5rem}
.hd::after{height:.28rem}
.logo.wm{font-size:2.08rem;letter-spacing:.04em}
.nav{margin-left:auto;gap:.15rem}
.hd-cta{gap:.6rem;margin-left:.6rem}
.hd-cta .btn.sm{min-height:2.8rem;padding:.55rem 1.3rem;font-size:.84rem;border-width:2px;box-shadow:3px 3px 0 rgba(0,0,0,.3)}
.hd-cta .btn.sm:hover{box-shadow:1px 1px 0 rgba(0,0,0,.3)}
.hd-cta .btn svg{width:1.1rem;height:1.1rem}
@media(min-width:901px){
 .nav>a,.dd-t{padding:.6rem .95rem;font-size:1.08rem;min-height:2.8rem}
 .nav>a::after{left:.95rem;right:.95rem;bottom:.2rem;height:.2rem}
 .dd-t::after{width:.5rem;height:.5rem}
 .dd-m{padding-top:1.55rem}
}
@media(min-width:901px) and (max-width:1359px){
 .hd-cta .btn.wa.sm{padding:0;width:2.8rem;min-width:2.8rem}
}
@media(min-width:1600px){
 html{scroll-padding-top:6.1rem}
 .hd .c{min-height:5.55rem}
 .logo.wm{font-size:2.36rem}
 .nav>a,.dd-t{font-size:1.15rem;min-height:3rem;padding:.65rem 1.05rem}
 .nav>a::after{left:1.05rem;right:1.05rem}
 .hd-cta .btn.sm{min-height:3rem;font-size:.9rem}
 .hd-cta .btn.wa.sm{width:3rem;min-width:3rem}
 .dd-m{padding-top:1.7rem}
}
@media(min-width:901px) and (max-width:1180px){
 html{scroll-padding-top:5rem}
 .hd .c{min-height:4.6rem;gap:1rem}
 .logo.wm{font-size:1.8rem}
 .nav>a,.dd-t{padding:.5rem .7rem;font-size:.97rem;min-height:2.5rem}
 .nav>a::after{left:.7rem;right:.7rem}
 .dd-m{padding-top:1.35rem}
 .hd-cta{gap:.45rem;margin-left:.3rem}
 .hd-cta .btn.sm{min-height:2.5rem;padding:.5rem 1rem;font-size:.76rem}
 .hd-cta .btn.wa.sm{width:2.5rem;min-width:2.5rem}
}
/* ---- mobile / tablet ---- */
@media(max-width:900px){
 html{scroll-padding-top:4.7rem}
 .hd{--hdh:3.95rem}
 .hd .c{min-height:3.95rem;padding-bottom:.28rem;gap:.6rem}
 .hd::after{height:.24rem}
 .logo.wm{font-size:1.75rem;margin-right:auto}
 .hd-call{width:2.95rem;height:2.95rem}
 .hd-call svg{width:1.2rem;height:1.2rem}
 .burger{width:2.95rem;height:2.95rem;min-width:2.95rem;min-height:2.95rem;border-radius:.8rem}
 .burger .bars{width:1.3rem;height:1rem}
 .hd .burger .bars{height:1rem}
 .burger .bars i:nth-child(1){top:0}.burger .bars i:nth-child(2){top:.45rem}.burger .bars i:nth-child(3){top:.9rem}
 .hd.open .burger .bars i:nth-child(1),.hd.open .burger .bars i:nth-child(3){top:.45rem}
}
@media(max-width:380px){.logo.wm{font-size:1.55rem}.hd .c{gap:.45rem}}
/* Services arrow: draw it as a small chevron to the right of the label (an older nav-underline rule was displacing it) */
@media(min-width:901px){
 .nav .dd-t{gap:.4rem}
 .nav .dd-t::after{content:"";position:static;display:block;flex:none;left:auto;right:auto;bottom:auto;width:.42rem;height:.42rem;margin-top:-.2rem;background:none;border:0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .25s var(--ease)}
 .nav .dd:hover .dd-t::after,.nav .dd:focus-within .dd-t::after{transform:rotate(225deg);margin-top:.15rem}
 .dd-in a::after{display:none}
}
@media(min-width:901px){
 .nav .dd-t{gap:.6rem}
 .nav .dd:hover .dd-t::after,.nav .dd:focus-within .dd-t::after{margin-top:.25rem}
}
@media(min-width:901px){
 .nav .dd:hover .dd-t::after,.nav .dd:focus-within .dd-t::after{margin-left:.3rem}
}
/* =====================================================================
   v10: header at normal, comfortable proportions (logo, nav, buttons, spacing)
   ===================================================================== */
/* ---- desktop ---- */
html{scroll-padding-top:5.8rem}
.hd .c{min-height:5rem;padding-top:0;padding-bottom:.28rem;gap:1.6rem;align-items:center}
.hd::after{height:.28rem}
.logo.wm{font-size:2.1rem;letter-spacing:.04em;line-height:1}
.hd-cta{gap:.7rem}
.hd-cta .btn.sm{min-height:2.9rem;padding:.6rem 1.35rem;font-size:.85rem;border-width:2px;box-shadow:3px 3px 0 rgba(0,0,0,.3)}
.hd-cta .btn.sm:hover{box-shadow:1px 1px 0 rgba(0,0,0,.3)}
.hd-cta .btn svg{width:1.1rem;height:1.1rem}
@media(min-width:901px){
 .nav{gap:.15rem}
 .nav>a,.dd-t{padding:.7rem 1rem;font-size:1.11rem;min-height:2.9rem}
 .nav>a::after{left:1rem;right:1rem;bottom:.3rem;height:.2rem}
 .dd-t::after{width:.5rem;height:.5rem}
 .dd-m{padding-top:1.5rem}
}
@media(min-width:901px) and (max-width:1359px){
 .hd-cta .btn.wa.sm{padding:0;width:2.9rem;min-width:2.9rem}
}
@media(min-width:1600px){
 html{scroll-padding-top:6.2rem}
 .hd .c{min-height:5.5rem}
 .logo.wm{font-size:2.35rem}
 .nav>a,.dd-t{font-size:1.2rem;min-height:3.1rem;padding:.75rem 1.1rem}
 .nav>a::after{left:1.1rem;right:1.1rem}
 .hd-cta .btn.sm{min-height:3.1rem;font-size:.9rem}
 .hd-cta .btn.wa.sm{width:3.1rem}
}
@media(min-width:901px) and (max-width:1180px){
 html{scroll-padding-top:5.4rem}
 .hd .c{min-height:4.7rem;gap:1rem}
 .logo.wm{font-size:1.9rem}
 .nav>a,.dd-t{padding:.6rem .65rem;font-size:1.02rem;min-height:2.7rem}
 .nav>a::after{left:.65rem;right:.65rem}
 .dd-m{padding-top:1.3rem}
 .hd-cta{gap:.5rem}
 .hd-cta .btn.sm{min-height:2.7rem;padding:.5rem 1.05rem;font-size:.8rem}
 .hd-cta .btn.wa.sm{width:2.7rem;min-width:2.7rem}
}
/* ---- mobile / tablet ---- */
@media(max-width:900px){
 html{scroll-padding-top:5rem}
 .hd{--hdh:4.2rem}
 .hd .c{min-height:4.2rem;padding-bottom:.28rem;gap:.7rem}
 .hd::after{height:.26rem}
 .logo.wm{font-size:1.8rem}
 .hd-call{width:2.9rem;height:2.9rem}
 .hd-call svg{width:1.2rem;height:1.2rem}
 .burger{width:2.9rem;height:2.9rem;min-width:2.9rem;min-height:2.9rem;border-radius:.8rem}
 .burger .bars,.hd .burger .bars{width:1.3rem;height:1rem}
 .burger .bars i:nth-child(1){top:0}.burger .bars i:nth-child(2){top:.45rem}.burger .bars i:nth-child(3){top:.9rem}
 .hd.open .burger .bars i:nth-child(1),.hd.open .burger .bars i:nth-child(3){top:.45rem}
}
@media(max-width:380px){.logo.wm{font-size:1.6rem}.hd .c{gap:.5rem}}
/* mobile menu: undo desktop-only margins so the list and buttons span the full panel width */
@media(max-width:900px){
 .nav{margin:0}
 .hd-cta{margin-left:0}
}
/* desktop: the Services chevron sits level with the text */
@media(min-width:901px){.nav .dd-t::after{margin-top:-.15rem}}

/* =====================================================================
   v11: nav menu, chat drawer, home page redesign, footer
   ===================================================================== */
/* ---- top bar thinner, main header taller ---- */
.tb .tb-in{min-height:2.15rem;padding:.1rem 0;gap:1rem}
.tb,.tb a,.tb .tb-c,.tb .tb-l a{font-size:.9rem}
.tb .tb-l a{padding:.1rem 0}
.tb .tb-ci{width:1.35rem;height:1.35rem}.tb .tb-ci svg{width:.78rem;height:.78rem}
@media(min-width:901px){
 .hd .c{min-height:5.6rem}
 .dd-m{padding-top:1.8rem}
 .dd.sm .dd-m{width:19.5rem;left:-1rem}
 .dd.sm .dd-in{grid-template-columns:1fr}
}
@media(min-width:1600px){.hd .c{min-height:6rem}.tb .tb-in{min-height:2.35rem}.tb,.tb a,.tb .tb-c{font-size:.95rem}}
@media(min-width:901px) and (max-width:1180px){.hd .c{min-height:5.1rem}.dd-m{padding-top:1.5rem}}
/* ---- WhatsApp chat drawer (desktop) ---- */
.wad{position:fixed;inset:0;z-index:320;visibility:hidden;pointer-events:none}
.wad[hidden]{display:none}
.wad.open{visibility:visible;pointer-events:auto}
.wad-bg{position:absolute;inset:0;background:rgba(6,31,74,.55);opacity:0;transition:opacity .35s ease}
.wad.open .wad-bg{opacity:1}
.wad-p{position:absolute;top:0;right:0;bottom:0;width:min(26rem,100%);display:flex;flex-direction:column;background:#fff;color:var(--navy);border-left:3px solid var(--navy);box-shadow:-1.4rem 0 3rem rgba(0,0,0,.25);transform:translateX(105%);transition:transform .45s var(--ease);outline:0}
.wad.open .wad-p{transform:none}
.wad-h{display:flex;align-items:center;gap:.9rem;padding:1.1rem 1.2rem;background:var(--navy);color:#fff;border-bottom:.25rem solid var(--pink)}
.wad-ic{flex:none;width:2.8rem;height:2.8rem;border-radius:50%;background:var(--teal);border:3px solid #fff;display:grid;place-items:center}
.wad-ic svg{width:1.3rem;height:1.3rem;fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linejoin:round}
.wad-h b{display:block;font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.1rem;text-transform:uppercase}
.wad-h small{opacity:.8}
.wad-x{margin-left:auto;width:2.4rem;height:2.4rem;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:none;color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;transition:background .2s}
.wad-x:hover{background:var(--pink);border-color:var(--pink)}
.wad-b{padding:1.2rem;display:flex;flex-direction:column;gap:1rem;overflow:auto}
.wad-bubble{background:var(--soft);border:2px solid var(--navy);border-radius:1.1rem 1.1rem 1.1rem .25rem;padding:.9rem 1rem;font-weight:500;line-height:1.5;max-width:92%}
.wad-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.wad-chips button{padding:.4rem .85rem;border:2px solid var(--navy);border-radius:99px;background:#fff;color:var(--navy);font:600 .9rem 'Outfit',sans-serif;cursor:pointer;transition:background .2s,color .2s,transform .2s var(--ease)}
.wad-chips button:hover,.wad-chips button.on{background:var(--pink);color:#fff;transform:translateY(-2px)}
.wad-l{font-weight:600}
.wad-b textarea{width:100%;padding:.8rem;border:3px solid var(--navy);border-radius:.9rem;font:inherit;color:var(--navy);resize:vertical;min-height:6rem}
.wad-b textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,95,209,.2)}
.wad-go{width:100%;justify-content:center;gap:.6rem}
.wad-go svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
.wad-note{font-size:.88rem;opacity:.8;line-height:1.5;margin:0}
.wad-note a{color:var(--blue);font-weight:600}
body.wad-open{overflow:hidden}
@media(max-width:700px){.wad{display:none!important}}
/* ---- hero: bring the graphic in towards the text ---- */
@media(min-width:901px){
 .hero .c{grid-template-columns:minmax(0,32rem) minmax(0,1fr);column-gap:3rem}
 .mock{justify-self:start;max-width:41rem;margin-left:1.5rem}
}
/* ---- section headers with buttons beside the title ---- */
.sh-row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.2rem 2rem;margin-bottom:1.8rem}
.sh-l{max-width:46rem}
.sh-l h2{margin:.3rem 0 0}
.sh-l p{font-size:1.06rem;margin:.6rem 0 0;max-width:44rem}
.sh-btns{display:flex;flex-wrap:wrap;gap:.7rem}
/* ---- cooler "See plans" button on service cards ---- */
.sbtn{display:inline-flex;align-items:center;gap:.65rem;padding:.3rem .3rem .3rem 1.05rem;border:3px solid var(--navy);border-radius:99px;background:#fff;color:var(--navy);font-weight:700;font-size:.92rem;text-decoration:none;box-shadow:3px 3px 0 var(--pink);transition:transform .2s var(--ease),box-shadow .2s,background .2s,color .2s}
.sbtn i{font-style:normal;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--navy);color:#fff;transition:transform .3s var(--ease),background .2s}
.sbtn:hover{background:var(--blue);color:#fff;transform:translate(2px,2px);box-shadow:1px 1px 0 var(--pink)}
.sbtn:hover i{background:var(--pink);transform:rotate(-45deg)}
/* ---- pricing: sidebar picker instead of a long row of tabs ---- */
.ptabs{display:grid;grid-template-columns:16.5rem minmax(0,1fr);gap:1.8rem;align-items:start}
.pside{position:sticky;top:6.4rem;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1.3rem;padding:1rem;box-shadow:5px 5px 0 var(--navy)}
.psel-l{display:block;font-family:'Bowlby One','Arial Black',sans-serif;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;margin:.2rem .4rem .6rem}
.psel{display:none}
.pt-list{display:flex;flex-direction:column;gap:.25rem}
.pgrp{font-weight:700;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;opacity:.6;margin:.65rem .5rem .15rem}
.pgrp:first-child{margin-top:0}
.pt-list button{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;padding:.45rem .6rem;border:2px solid transparent;border-radius:.9rem;background:none;color:var(--navy);cursor:pointer;font:600 .98rem 'Outfit',sans-serif;transition:background .2s,color .2s,transform .2s var(--ease),box-shadow .2s}
.pt-list .ico{width:2rem;height:2rem;border-radius:.6rem;flex:none}
.pt-list .ico svg{width:1rem;height:1rem}
.pt-list button:hover{background:var(--soft);transform:translateX(3px)}
.pt-list button[aria-selected=true]{background:var(--navy);color:#fff;box-shadow:3px 3px 0 var(--pink);transform:none}
@media(max-width:900px){
 .ptabs{grid-template-columns:1fr;gap:1.2rem}
 .pside{position:static;padding:.8rem;box-shadow:4px 4px 0 var(--navy)}
 .pt-list{display:none}
 .psel{display:block;width:100%;padding:.8rem 1rem;border:3px solid var(--navy);border-radius:.9rem;font:600 1rem 'Outfit',sans-serif;color:var(--navy);background:#fff}
}
/* ---- our work: richer case study cards ---- */
.wkg{gap:1.6rem}
.wk{display:flex;flex-direction:column;overflow:hidden;background:#fff;color:var(--navy);text-decoration:none;border:3px solid var(--navy);border-radius:1.4rem;box-shadow:6px 6px 0 var(--navy);transition:transform .3s var(--ease),box-shadow .3s}
.wk:hover{transform:translate(-3px,-5px);box-shadow:10px 11px 0 var(--pink)}
.wk-top{position:relative;min-height:14rem;padding:1.3rem 1.3rem 0;overflow:hidden;border-bottom:3px solid var(--navy)}
.wk.tone0 .wk-top{background:var(--blue)}.wk.tone1 .wk-top{background:var(--pink)}.wk.tone2 .wk-top{background:var(--teal)}
.wk-top::before{content:"";position:absolute;right:-3rem;top:-3.5rem;width:12rem;height:12rem;border-radius:50%;background:rgba(255,255,255,.2)}
.wk-tag{position:relative;z-index:2;display:inline-block;padding:.22rem .8rem;border:2px solid var(--navy);border-radius:99px;background:#fff;color:var(--navy);font-weight:700;font-size:.8rem}
.wk-dev{position:absolute;left:1.3rem;right:1.3rem;top:3.7rem;bottom:-1.4rem}
.wk-win{position:absolute;left:0;top:0;bottom:0;width:80%;overflow:hidden;background:#fff;border:3px solid var(--navy);border-radius:.8rem .8rem 0 0;box-shadow:4px 4px 0 var(--navy);transition:transform .4s var(--ease)}
.wk:hover .wk-win{transform:translateY(-4px) rotate(-1deg)}
.wk-bar{display:flex;gap:.28rem;padding:.4rem .55rem;background:var(--navy)}.wk-bar i{width:.4rem;height:.4rem;border-radius:50%;background:#fff;opacity:.85}
.wk-hero{display:grid;gap:.4rem;padding:.8rem;background:var(--soft)}
.wk-hero b{height:.8rem;width:70%;border-radius:.3rem;background:var(--navy)}
.wk-hero span{height:.5rem;border-radius:.3rem;background:#cdd8f3}.wk-hero span.s2{width:58%}
.wk-hero em{height:1.1rem;width:34%;border:2px solid var(--navy);border-radius:.4rem;background:var(--pink)}
.wk-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;padding:.6rem .8rem}
.wk-row i{aspect-ratio:1.3;border:2px solid var(--navy);border-radius:.4rem;background:var(--teal)}.wk-row i:nth-child(2){background:var(--pink)}.wk-row i:nth-child(3){background:var(--blue)}
.wk-ph{position:absolute;right:0;bottom:0;width:32%;height:86%;padding:.45rem .35rem 0;background:var(--navy);border:3px solid var(--navy);border-radius:1rem 1rem 0 0;transition:transform .4s var(--ease)}
.wk:hover .wk-ph{transform:translateY(-6px) rotate(2deg)}
.wk-pb{display:grid;align-content:start;gap:.3rem;height:100%;padding:.5rem;background:#fff;border-radius:.55rem .55rem 0 0}
.wk-pb b{height:.5rem;border-radius:.2rem;background:var(--navy)}.wk-pb i{height:.32rem;border-radius:.2rem;background:#cdd8f3}
.wk-b{display:flex;flex-direction:column;gap:.5rem;flex:1;padding:1.3rem 1.4rem 1.4rem}
.wk-b h3{margin:0;font-size:1.2rem}
.wk-b p{margin:0;opacity:.8}
.wk-go{margin-top:auto;padding-top:.7rem;display:inline-flex;align-items:center;gap:.55rem;font-weight:700;color:var(--blue)}
.wk-go i{font-style:normal;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--navy);color:#fff;transition:transform .3s var(--ease),background .2s}
.wk:hover .wk-go i{background:var(--pink);transform:translateX(4px)}
/* ---- process: roomier card text ---- */
.stg{gap:1.3rem}
.stg .step.card{padding:1.7rem 1.6rem 1.8rem;gap:1rem}
.stg .step .ch{gap:1rem;margin-bottom:.4rem}
.stg .step .stp{display:block;margin-bottom:.3rem}
.stg .step h3{line-height:1.25}
.stg .step p{font-size:1rem;line-height:1.7;margin:0}
/* ---- template mockups drawn per trade ---- */
.tm{display:block;padding:0;overflow:hidden;background:#fff}
.tm svg{display:block;width:100%;height:auto}
/* ---- promises ---- */
.pmg{gap:1.3rem}
.pm{position:relative;padding:1.7rem 1.6rem 1.6rem;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1.2rem;box-shadow:5px 5px 0 var(--teal);transition:transform .25s var(--ease),box-shadow .25s}
.pm:nth-child(3n+2){box-shadow:5px 5px 0 var(--pink)}.pm:nth-child(3n){box-shadow:5px 5px 0 var(--blue)}
.pm:hover{transform:translate(-2px,-4px)}
.pm-n{position:absolute;right:1.1rem;top:.8rem;font-family:'Bowlby One','Arial Black',sans-serif;font-size:2.6rem;line-height:1;color:#fff;-webkit-text-stroke:2px #d9e2f8}
.pm-i{margin-bottom:1rem}
.pm h3{margin:0 0 .55rem}
.pm p{margin:0;line-height:1.65}
/* ---- why choose us: head-to-head cards ---- */
.vsx{display:grid;grid-template-columns:1fr auto 1fr;gap:1.2rem;align-items:stretch}
.vsx-c{position:relative;padding:2.3rem 1.7rem 1.6rem;border:3px solid var(--navy);border-radius:1.4rem}
.vsx-us{background:var(--blue);color:#fff;box-shadow:8px 8px 0 var(--pink)}
.vsx-them{background:#fff;color:var(--navy);border-style:dashed}
.vsx-badge{position:absolute;top:-1.05rem;left:1.5rem;padding:.2rem .95rem;background:var(--pink);color:#fff;border:3px solid var(--navy);font-weight:700;font-size:.85rem;transform:rotate(-2deg)}
.vsx-them .vsx-badge{background:#fff;color:var(--navy)}
.vsx-c h3{margin:0 0 1.1rem;font-size:1.5rem}
.vsx ul{display:grid;gap:.8rem;margin:0;padding:0;list-style:none}
.vsx li{display:grid;grid-template-columns:2rem 1fr;column-gap:.85rem;align-items:center;padding-bottom:.8rem;border-bottom:1px solid rgba(255,255,255,.25)}
.vsx-them li{border-color:#dbe4fb}
.vsx li:last-child{border-bottom:0;padding-bottom:0}
.vsx li::before{content:"";grid-row:1/3;width:2rem;height:2rem;border-radius:50%;background:var(--teal) center/1rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23092F6E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E")}
.vsx-them li::before{background:#fde3ea center/.85rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E94F7A' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.vsx li small{grid-column:2;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.vsx li b{grid-column:2;font-weight:600}
.vsx-mid{align-self:center;display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--navy);color:#fff;border:3px solid var(--teal);font-family:'Bowlby One','Arial Black',sans-serif;font-size:.9rem}
@media(max-width:900px){.vsx{grid-template-columns:1fr;gap:1.6rem}.vsx-mid{justify-self:center;margin:-.4rem 0}}
/* ---- reviews ---- */
.rvt .rvc{position:relative;display:flex;flex-direction:column;gap:.8rem;flex:none;width:21rem;margin:0;padding:1.6rem 1.5rem 1.4rem;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1.3rem;box-shadow:5px 5px 0 var(--pink)}
.rvt .rvc-q{position:absolute;right:1.2rem;top:.3rem;font-family:'Bowlby One','Arial Black',sans-serif;font-size:4rem;line-height:1;color:var(--teal);opacity:.55}
.rvt .rvc .st{display:flex;gap:.2rem}
.rvt .rvc blockquote{margin:0;font-size:1rem;line-height:1.65}
.rvt .rvc figcaption{display:flex;align-items:center;gap:.8rem;margin-top:auto;padding-top:.3rem}
.rvt .rvc .av{display:grid;place-items:center;flex:none;width:2.7rem;height:2.7rem;border-radius:50%;background:var(--navy);color:#fff;border:3px solid var(--teal);font-weight:700;font-size:.85rem}
.rvt .rvc figcaption b{display:block}.rvt .rvc figcaption small{opacity:.7}
/* ---- rebrand ---- */
.s.navy .eyebrow{background:var(--teal);color:var(--navy)}
.rbx{display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center}
.rbx-l h2{color:#fff;margin:.3rem 0 0}
.rbx-l p{font-size:1.08rem;line-height:1.7;margin:1rem 0 1.5rem;opacity:.95}
.rbx-st{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1.6rem}
.rbx-st div{padding:.95rem;border:2px solid rgba(255,255,255,.28);border-radius:1rem;background:rgba(255,255,255,.07)}
.rbx-st b{display:block;font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:2.1rem;line-height:1;color:var(--teal)}
.rbx-st span{display:block;margin-top:.3rem;font-size:.85rem;opacity:.9}
.rbx-r{display:grid;gap:1.3rem}
.rbx-dom{display:flex;align-items:center;flex-wrap:wrap;gap:.9rem;font-family:'Bowlby One','Arial Black',sans-serif;font-size:1.5rem}
.rbx-old{opacity:.7;text-decoration:line-through;text-decoration-color:var(--pink);text-decoration-thickness:4px}
.rbx-arr{display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:50%;background:var(--pink);border:3px solid #fff;font-size:1.2rem}
.rbx-new{color:var(--teal)}
.rbx-cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.rbx-card{display:grid;gap:.45rem;padding:1.1rem;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1.1rem}
.rbx-card.new{background:var(--teal);box-shadow:6px 6px 0 var(--pink)}
.rbx-card .lbl{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.rbx-card b{line-height:1.4}
.rbx .vals li{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.35)}
@media(max-width:900px){.rbx{grid-template-columns:1fr;gap:2rem}.rbx-st{grid-template-columns:1fr 1fr 1fr}.rbx-dom{font-size:1.2rem}}
.s.navy .stat{color:var(--navy)}
.tlx{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;position:relative}
.tlx::before{content:"";position:absolute;left:10%;right:10%;top:2.2rem;border-top:4px dashed var(--navy);opacity:.2}
.tlx-s{position:relative;display:grid;gap:.5rem;align-content:start;padding:1.4rem;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1.3rem;box-shadow:5px 5px 0 var(--navy)}
.tlx-s.mid{background:var(--soft);box-shadow:5px 5px 0 var(--teal)}
.tlx-s.now{background:var(--blue);color:#fff;box-shadow:6px 6px 0 var(--pink)}
.tlx-d{justify-self:start;padding:.15rem .85rem;background:var(--pink);color:#fff;border:3px solid var(--navy);font-weight:700;font-size:.8rem;transform:rotate(-2deg)}
.tlx-s b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.5rem;line-height:1.15}
.tlx-s p{margin:0;line-height:1.55}
@media(max-width:900px){.tlx{grid-template-columns:1fr}.tlx::before{display:none}}
.chgg{gap:1.3rem}
.chg{display:grid;gap:.7rem;align-content:start}
.chg small{display:block;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.65}
.chg-old{margin:0;opacity:.85}.chg-old s{text-decoration-color:var(--pink);text-decoration-thickness:2px}
.chg-a{color:var(--pink);font-size:1.4rem;font-weight:700;line-height:1}
.chg-new p{margin:.2rem 0 0;font-weight:700}
/* ---- FAQs ---- */
.fqx{display:grid;grid-template-columns:22rem minmax(0,1fr);gap:3rem;align-items:start}
.fqx-side{position:sticky;top:6.6rem;display:grid;gap:1rem}
.fqx-side h2{margin:.3rem 0 0}
.fqx-side>p{margin:0}
.fqx-s{position:relative;display:block}
.fqx-s svg{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);width:1.2rem;height:1.2rem;fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round}
.fqx-s input{width:100%;padding:.8rem 1rem .8rem 2.8rem;border:3px solid var(--navy);border-radius:.9rem;background:#fff;color:var(--navy);font:inherit}
.fqx-s input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,95,209,.2)}
.fqx-cats{display:flex;flex-direction:column;gap:.3rem}
.fqx-cats button{display:block;width:100%;text-align:left;padding:.6rem .95rem;border:2px solid transparent;border-radius:.85rem;background:none;color:var(--navy);cursor:pointer;font:600 1rem 'Outfit',sans-serif;transition:background .2s,transform .2s var(--ease)}
.fqx-cats button:hover{background:#fff;transform:translateX(3px)}
.fqx-cats button[aria-selected=true]{background:var(--navy);color:#fff;box-shadow:3px 3px 0 var(--pink);transform:none}
.fqx-help{display:grid;gap:.45rem;padding:1.2rem;background:var(--blue);color:#fff;border:3px solid var(--navy);border-radius:1.2rem;box-shadow:5px 5px 0 var(--pink)}
.fqx-help b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;text-transform:uppercase;font-size:1rem}
.fqx-help .row{margin-top:.5rem}
.fqx-list{display:grid;gap:.85rem}
.faq details{background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1.1rem;transition:box-shadow .25s,transform .2s}
.faq details:hover{box-shadow:4px 4px 0 var(--teal)}
.faq details[open]{box-shadow:6px 6px 0 var(--pink)}
.faq summary{padding-top:1.05rem;padding-bottom:1.05rem}
.faq .ans{line-height:1.7}
.faq-empty{margin:1rem 0 0;font-weight:600}
@media(max-width:900px){
 .fqx{grid-template-columns:1fr;gap:1.6rem}
 .fqx-side{position:static}
 .fqx-cats{flex-direction:row;overflow-x:auto;padding-bottom:.4rem;gap:.5rem;scrollbar-width:none}
 .fqx-cats::-webkit-scrollbar{display:none}
 .fqx-cats button{width:auto;flex:none;white-space:nowrap;border-color:var(--navy);background:#fff}
}
/* ---- footer: no contact details on mobile ---- */
@media(max-width:900px){.ft2-contact{display:none}}
@media(min-width:901px){
 .dd:not(.sm) .dd-m{width:min(42rem,calc(100vw - 3rem))}
 .dd.sm .dd-m{width:22rem}
 .dd-in a span{min-width:0}
 .dd-in a small{white-space:normal}
}
.fqx-side .eyebrow{justify-self:start}
.rvt .rvc figcaption{font-size:1rem;color:var(--navy)}
.rvt .rvc figcaption b{color:var(--navy);font-size:1rem;font-weight:700}
.rvt .rvc figcaption small{display:block;color:var(--navy);opacity:.7;font-size:.85rem}

.vsn .mock{max-width:none;margin:0;padding:1.2rem;background:var(--soft)}
.vsn .mock .win{box-shadow:4px 4px 0 var(--pink)}
.sbtn{white-space:nowrap}
.card .cf{flex-wrap:wrap;gap:.6rem}
@media(max-width:620px){.pl .row .btn:not(.white){flex:1 1 100%}.pl .row .btn.white{flex:1 1 100%}}
.rbx>*,.fqx>*,.vsx>*,.tlx>*{min-width:0}
@media(max-width:900px){.rbx{grid-template-columns:minmax(0,1fr)}.rbx-st{grid-template-columns:repeat(3,minmax(0,1fr))}.rbx-st div{padding:.75rem .6rem}.rbx-st b{font-size:1.7rem}.rbx-cards{grid-template-columns:minmax(0,1fr)}}
@media(max-width:430px){.rbx-st{grid-template-columns:1fr}}

/* ---- pricing: icon tile picker (replaces the sidebar) ---- */
.ptiles{display:grid;gap:1.8rem}
.pt-wrap{display:grid;gap:1.3rem}
.ptg{display:grid;gap:.6rem}
.ptg .pgrp{margin:0;font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;opacity:.65}
.pt-grid{display:grid;gap:.9rem}
.pt-grid.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.pt-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pt-wrap .pt-grid button{display:flex;align-items:center;gap:.8rem;width:100%;min-width:0;text-align:left;padding:.85rem .95rem;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1.1rem;box-shadow:4px 4px 0 var(--navy);cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s,background .2s,color .2s}
.pt-wrap .pt-grid button:hover{transform:translate(-2px,-3px);box-shadow:6px 7px 0 var(--teal)}
.pt-wrap .pt-grid .ico{width:2.6rem;height:2.6rem;border-radius:.8rem;flex:none}
.pt-wrap .pt-grid .ico svg{width:1.3rem;height:1.3rem}
.pt-tx{display:grid;gap:.12rem;min-width:0}
.pt-tx b{font:700 1rem/1.2 'Outfit',sans-serif}
.pt-tx small{font-size:.8rem;opacity:.72;line-height:1.3}
.pt-wrap .pt-grid button[aria-selected=true]{background:var(--navy);color:#fff;box-shadow:5px 5px 0 var(--pink);transform:none}
.pt-wrap .pt-grid button[aria-selected=true] small{opacity:.85}
.pmain{min-width:0}
@media(max-width:1180px){.pt-grid.g5{grid-template-columns:repeat(3,minmax(0,1fr))}.pt-grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.pt-grid.g5,.pt-grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.pt-wrap .pt-grid button{flex-direction:column;align-items:flex-start;gap:.5rem;padding:.75rem}.pt-tx b{font-size:.95rem}.pt-tx small{font-size:.76rem}}
@media(max-width:620px){.pt-grid.g5>button:last-child{grid-column:1/-1;flex-direction:row!important;align-items:center!important;gap:.8rem!important}}

/* ---- hero: text and graphic stay together and scale with the screen ---- */
.hero .c{display:block}
.hero-top{display:grid;grid-template-columns:minmax(0,32rem) minmax(0,46rem);justify-content:center;align-items:center;column-gap:clamp(2rem,5vw,5.5rem);row-gap:1.6rem}
.hero-top .mock{justify-self:stretch;max-width:46rem;width:100%;margin:0}
@media(max-width:900px){
 .hero-top{grid-template-columns:minmax(0,1fr);justify-content:stretch;gap:1.5rem}
 .hero-top .mock{justify-self:center;max-width:22rem;margin:.4rem auto 0}
}
/* dropdown labels (Services, Case Studies, About) get the same pink underline as the single links */
@media(min-width:901px){
 .nav{--np:1rem}
 .nav .dd-t{background-image:linear-gradient(var(--pink),var(--pink));background-repeat:no-repeat;background-position:center calc(100% - .3rem);background-size:0 .2rem;transition:background-size .3s var(--ease),color .2s}
 .nav .dd:hover>.dd-t,.nav .dd:focus-within>.dd-t,.nav .dd-t[aria-current]{background-image:linear-gradient(var(--pink),var(--pink));background-repeat:no-repeat;background-position:center calc(100% - .3rem);background-size:calc(100% - 2 * var(--np)) .2rem}
}
@media(min-width:1600px){.nav{--np:1.1rem}}
@media(min-width:901px) and (max-width:1180px){.nav{--np:.65rem}}
/* ---- hero fine-tuning so it fits well at every width ---- */
.gp2{flex-wrap:nowrap}
.gp2 span{white-space:nowrap}
@media(min-width:901px) and (max-width:1180px){
 .hero-top{grid-template-columns:minmax(0,24rem) minmax(0,38rem);column-gap:clamp(1.5rem,3vw,3rem)}
 .hero .t1{font-size:clamp(2rem,4.1vw,3.2rem)}
 .hero .lead{font-size:1.02rem}
 .gcard{width:56%;padding:.55rem .65rem}
 .gp2{gap:.2rem}.gp2 span{font-size:.6rem;padding:0 .35rem}
}
@media(min-width:901px){.hero{padding-top:3rem;padding-bottom:3.2rem}.hero-top{padding-bottom:.4rem}}
@media(max-width:900px){.gp2{gap:.25rem}.gp2 span{font-size:.62rem;padding:0 .4rem}}
@media(max-width:900px){.gp2{flex-wrap:wrap}.gcard{width:60%}}
@media(min-width:901px) and (max-width:1180px){.hero-top{column-gap:clamp(3rem,5.2vw,4.2rem)}}
/* ---- hero v3: left-aligned wide text column, graphic on the right, roomy spacing ---- */
@media(min-width:901px){
 .hero-top{grid-template-columns:minmax(0,1fr) minmax(0,40rem);justify-content:stretch;column-gap:3rem;align-items:center}
 .hero-top .mock{justify-self:end;max-width:40rem;width:100%;margin:0}
 .hero .t1{font-size:clamp(2.6rem,3.8vw,5rem);line-height:1.1;max-width:none}
 .hero .eyebrow{margin-bottom:1.2rem}
 .hero .lead{max-width:36rem;font-size:1.15rem;line-height:1.65;margin:1.4rem 0 2rem}
 .hero .row{gap:.9rem}
}
@media(min-width:901px) and (max-width:1180px){
 .hero-top{grid-template-columns:minmax(0,1fr) minmax(0,31rem);column-gap:2.6rem}
 .hero-top .mock{max-width:31rem}
 .hero .t1{font-size:clamp(2.2rem,4.6vw,3.6rem)}
 .hero .lead{font-size:1.05rem;max-width:30rem}
}
@media(min-width:1181px){
 .hero-top{grid-template-columns:minmax(0,1fr) minmax(0,clamp(38rem,34vw,48rem))}
 .hero-top .mock{max-width:clamp(38rem,34vw,48rem)}
 .hero .t1{font-size:clamp(2.6rem,3.8vw,5.4rem)}
}
@media(min-width:901px) and (max-width:1180px){
 .hero-top{grid-template-columns:minmax(0,1fr) minmax(0,min(31rem,42%))}
 .hero-top .mock{max-width:100%}
}
@media(min-width:901px) and (max-width:1180px){
 .hero-top{grid-template-columns:minmax(0,1fr) minmax(0,min(30rem,40%));column-gap:3.6rem}
 .hero .lead{max-width:27rem}
}
@media(min-width:901px) and (max-width:1100px){.pk{padding:.7rem .8rem;gap:.6rem}.pk .go{display:none}.pk .ptx b{font-size:.92rem}.pk .ptx span{font-size:.8rem}}
/* ---- hero v4: taller, with a slightly narrower text block ---- */
@media(min-width:901px){
 .hero{display:flex;align-items:center;min-height:clamp(36rem,calc(100svh - 7.8rem),56rem);padding-top:4.5rem;padding-bottom:4.5rem}
 .hero .c{flex:1 1 auto}
 .hero-top>div{max-width:44rem}
 .hero .lead{max-width:32rem}
 .pick{margin-top:3.2rem}
}
@media(min-width:901px) and (max-width:1180px){.hero-top>div{max-width:36rem}.hero .lead{max-width:27rem}}
@media(min-width:1600px){.hero-top>div{max-width:50rem}}
@media(min-width:901px){.hero .c{flex:0 1 auto;width:min(calc(100% - clamp(2rem,5vw,7rem)),var(--w));margin-inline:auto}}
@media(min-width:1440px){.hero-top{grid-template-columns:minmax(0,1fr) minmax(0,clamp(38rem,38vw,58rem))}.hero-top .mock{max-width:clamp(38rem,38vw,58rem)}}
@media(min-width:1440px){.hero-top{grid-template-columns:minmax(0,1fr) minmax(0,clamp(38rem,44vw,64rem))}.hero-top .mock{max-width:clamp(38rem,44vw,64rem)}}
/* ---- case study pages ---- */
.wk-win.real{display:flex;flex-direction:column}
.wk-win.real img{display:block;width:100%;flex:1;min-height:0;object-fit:cover;object-position:top}
.wk-pb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:.5rem .5rem 0 0}
.wk-ph.real .wk-pb{padding:0;background:#fff}
.cs-facts{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.cs-facts .fact a{color:var(--blue);font-weight:700;text-decoration:underline;overflow-wrap:anywhere}
.cs-svc{margin-top:1.6rem;display:flex;align-items:center;flex-wrap:wrap;gap:.8rem 1.2rem}
.cs-svl{font-family:'Bowlby One','Arial Black',sans-serif;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.cs-chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chp{display:inline-flex;align-items:center;padding:.4rem .95rem;border:3px solid var(--navy);border-radius:99px;background:#fff;color:var(--navy);font-weight:700;font-size:.92rem;text-decoration:none;box-shadow:3px 3px 0 var(--teal);transition:transform .2s var(--ease),background .2s,color .2s}
a.chp:hover{background:var(--pink);color:#fff;transform:translate(-2px,-2px)}
.pvs{display:grid;grid-template-columns:minmax(0,1fr) 15.5rem;gap:2rem;align-items:start}
.pvs .pvp{max-width:15.5rem}
@media(max-width:900px){.pvs{grid-template-columns:minmax(0,1fr)}.pvs .pvp{max-width:15.5rem;margin:0 auto}}
.cs-sec{display:grid;grid-template-columns:minmax(0,18rem) minmax(0,1fr);gap:2rem 4rem;align-items:start}
.cs-h{position:sticky;top:7rem}
.cs-n{display:inline-block;margin-bottom:.7rem;padding:.12rem .9rem;background:var(--pink);color:#fff;border:3px solid var(--navy);font-family:'Bowlby One','Arial Black',sans-serif;font-size:.95rem;transform:rotate(-3deg)}
.cs-h h2{margin:0}
.cs-b p{font-size:1.1rem;line-height:1.85;margin:0 0 1.15rem;max-width:46rem}
.cs-b p:last-child{margin-bottom:0}
.cs-res{display:grid;gap:1.6rem}
.cs-lead{font-size:1.25rem!important;font-weight:600;line-height:1.6!important}
.cs-now{font-family:'Bowlby One','Arial Black',sans-serif;font-size:.95rem!important;text-transform:uppercase;letter-spacing:.04em;margin-top:.8rem!important}
.cs-res .ck{margin-top:.2rem}
.cs-call{position:relative;padding:1.8rem 1.8rem 1.6rem;background:var(--navy);color:#fff;border:3px solid var(--navy);border-radius:1.3rem;box-shadow:7px 7px 0 var(--teal)}
.cs-call p{margin:0!important;font-size:1.12rem!important;line-height:1.75!important}
.cs-q{position:absolute;right:1.2rem;top:.2rem;font-family:'Bowlby One','Arial Black',sans-serif;font-size:4.5rem;line-height:1;color:var(--pink)}
@media(max-width:900px){.cs-sec{grid-template-columns:minmax(0,1fr);gap:1rem}.cs-h{position:static}.cs-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.cs-facts{grid-template-columns:minmax(0,1fr)}}
.cs-b .cols{column-count:2;column-gap:3rem}
.cs-b .cols p{max-width:none;break-inside:avoid}
.cs-b>.cs-lead{font-size:1.3rem;font-weight:600;line-height:1.65;max-width:none;margin-bottom:1.6rem}
@media(max-width:1100px){.cs-b .cols{column-count:1}}
.pvs{max-width:76rem;margin:0 auto}
@media(max-width:900px){.pvs{max-width:none}}

/* =====================================================================
   Our Work page: featured carousel, before/after, filterable project cards
   ===================================================================== */
/* ---- featured projects carousel ---- */
.spot-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:1.6rem}
.spot-tabs{display:flex;flex-wrap:wrap;gap:.6rem}
.spot-tabs button{position:relative;overflow:hidden;padding:.55rem 1.1rem .65rem;border:3px solid var(--navy);border-radius:99px;background:#fff;color:var(--navy);font:700 .95rem 'Outfit',sans-serif;cursor:pointer;transition:background .2s,color .2s,transform .2s var(--ease)}
.spot-tabs button:hover{transform:translateY(-2px)}
.spot-tabs button[aria-selected=true]{background:var(--navy);color:#fff}
.sp-bar{position:absolute;left:0;bottom:0;height:.3rem;width:0;background:var(--pink)}
.spot-tabs button[aria-selected=true] .sp-bar{animation:spfill 9s linear forwards}
.spot:hover .sp-bar{animation-play-state:paused}
@keyframes spfill{to{width:100%}}
.spot-arrows{display:flex;gap:.5rem}
.spot-arrows button{width:2.8rem;height:2.8rem;border-radius:50%;border:3px solid var(--navy);background:#fff;color:var(--navy);font-size:1.2rem;font-weight:700;cursor:pointer;transition:background .2s,color .2s,transform .2s var(--ease)}
.spot-arrows button:hover{background:var(--pink);color:#fff;transform:scale(1.08)}
.spot-stage{display:grid}
.spot-s{grid-area:1/1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2.6rem;align-items:center;opacity:0;visibility:hidden;transform:translateX(2rem);transition:opacity .5s ease,transform .6s var(--ease),visibility .5s}
.spot-s.on{opacity:1;visibility:visible;transform:none}
.spot-tag{display:inline-block;padding:.2rem .85rem;border:2px solid var(--navy);border-radius:99px;background:var(--soft);font-weight:700;font-size:.82rem}
.spot-info h3{margin:.8rem 0 .6rem}
.spot-d{margin:0 0 1rem;font-size:1.08rem;line-height:1.7}
.spot-h{margin:1.1rem 0 .5rem;font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.spot-info .ck{margin:0}
.spot-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chp.sm{padding:.2rem .7rem;font-size:.8rem;border-width:2px;box-shadow:2px 2px 0 var(--teal)}
.spot-info .row{margin-top:1.4rem}
.spot-vis{position:relative;min-height:24rem;display:grid;place-items:center;padding:2rem;overflow:hidden;border:3px solid var(--navy);border-radius:1.6rem;box-shadow:7px 7px 0 var(--navy)}
.spot-vis.tone0{background:var(--blue)}.spot-vis.tone1{background:var(--pink)}.spot-vis.tone2{background:var(--teal)}
.spot-vis::before{content:"";position:absolute;right:-5rem;top:-5rem;width:17rem;height:17rem;border-radius:50%;background:rgba(255,255,255,.2)}
.spot-vis::after{content:"";position:absolute;left:-4rem;bottom:-5rem;width:13rem;height:13rem;border-radius:50%;background:rgba(9,47,110,.18)}
.spot-dev{position:relative;z-index:2;width:100%;max-width:38rem;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease}
.spot-win{position:relative;width:86%;overflow:hidden;background:#fff;border:3px solid var(--navy);border-radius:.9rem;box-shadow:6px 6px 0 var(--navy);aspect-ratio:1.55}
.spot-win .wk-bar{position:absolute;left:0;right:0;top:0;z-index:2}
.spot-win img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;padding-top:1.35rem;background:#fff}
.spot-win.generic{display:block;padding:0}.spot-win.generic .wk-win{position:static;width:100%;height:100%;border:0;box-shadow:none;border-radius:0}.spot-win.generic .wk-ph{display:none}
.spot-ph{position:absolute;right:0;bottom:-.6rem;width:27%;aspect-ratio:.5;overflow:hidden;background:var(--navy);border:3px solid var(--navy);border-radius:1.1rem;box-shadow:5px 5px 0 rgba(9,47,110,.35)}
.spot-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:.7rem}
@media(prefers-reduced-motion:reduce){.spot-tabs button[aria-selected=true] .sp-bar{animation:none;width:100%}.spot-s{transition:none}}
@media(max-width:900px){.spot-s{grid-template-columns:minmax(0,1fr);gap:1.6rem}.spot-vis{order:-1;min-height:17rem;padding:1.4rem}}
/* ---- before and after ---- */
.baw{display:grid;gap:1rem}
.ba{display:grid;grid-template-columns:12rem minmax(0,1fr) auto minmax(0,1fr) auto;gap:1.2rem;align-items:center;padding:1.2rem 1.4rem;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1.2rem;box-shadow:5px 5px 0 var(--navy);transition:transform .25s var(--ease),box-shadow .25s}
.ba:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--pink)}
.ba-n b{display:block;font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.05rem;text-transform:uppercase;line-height:1.2}
.ba-n small{opacity:.7}
.ba small{display:block;margin-bottom:.25rem;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.65}
.ba p{margin:0;line-height:1.55}
.ba-b p{opacity:.8}
.ba-x{padding:.8rem 1rem;background:var(--teal);border:3px solid var(--navy);border-radius:.9rem}
.ba-x small{opacity:.8}.ba-x p{font-weight:600}
.ba-a{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--pink);color:#fff;border:3px solid var(--navy);font-size:1.2rem;font-weight:700;animation:baNudge 1.8s ease-in-out infinite}
@keyframes baNudge{50%{transform:translateX(5px)}}
.ba-l{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--blue);text-decoration:none;white-space:nowrap}
.ba-l i{font-style:normal;display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--navy);color:#fff;transition:transform .3s var(--ease),background .2s}
.ba:hover .ba-l i{background:var(--pink);transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.ba-a{animation:none}}
@media(max-width:1100px){.ba{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.ba-n{grid-column:1/-1}.ba-l{grid-column:1/-1}}
@media(max-width:700px){.ba{grid-template-columns:minmax(0,1fr)}.ba-a{justify-self:start;transform:rotate(90deg);animation:none}}
/* ---- filterable project cards ---- */
.wkr-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(21rem,1fr));gap:1.6rem;margin-top:1.6rem}
.wkr{display:flex;flex-direction:column;overflow:hidden;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1.4rem;box-shadow:6px 6px 0 var(--navy);transition:transform .3s var(--ease),box-shadow .3s}
.wkr:hover{transform:translate(-3px,-5px);box-shadow:10px 11px 0 var(--pink)}
.wkr-top{position:relative;display:block;min-height:13rem;padding:1.2rem 1.2rem 0;overflow:hidden;border-bottom:3px solid var(--navy);text-decoration:none}
.wkr-top.tone0{background:var(--blue)}.wkr-top.tone1{background:var(--pink)}.wkr-top.tone2{background:var(--teal)}
.wkr-top .wk-dev{position:absolute;left:1.2rem;right:1.2rem;top:3.5rem;bottom:-1.4rem}
.wkr-top .wk-win{transition:transform .4s var(--ease)}.wkr:hover .wk-win{transform:translateY(-4px) rotate(-1deg)}
.wkr-top .wk-ph{transition:transform .4s var(--ease)}.wkr:hover .wk-ph{transform:translateY(-6px) rotate(2deg)}
.wkr-b{display:flex;flex-direction:column;gap:.7rem;flex:1;padding:1.3rem 1.4rem 1.4rem}
.wkr-b h3{margin:0}
.wkr-d{margin:0;line-height:1.6;opacity:.85}
.wkr-b .ck{margin:.2rem 0 0}
.wkr-b .ck li{font-size:.95rem}
.wkr-b .wk-go{margin-top:auto;padding-top:.5rem}
.wkr.yours{justify-content:center;gap:.9rem;padding:2rem 1.6rem;background:var(--pink);color:#fff;box-shadow:6px 6px 0 var(--navy)}
.wkr.yours .t3{color:#fff;margin:0}.wkr.yours p{margin:0;line-height:1.6}
.more-h{margin:2.6rem 0 1rem}
.mtg{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:1rem}
.mt{display:grid;gap:.25rem;padding:1rem 1.1rem;background:#fff;color:var(--navy);border:3px dashed #aebbdd;border-radius:1rem}
.mt b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:.95rem;text-transform:uppercase;line-height:1.2}
.mt small{opacity:.7}.mt span{margin-top:.3rem;font-size:.78rem;font-weight:700;color:var(--pink)}
.mq-i{margin:0}
/* ---- services used ---- */
.sbw{display:grid;gap:1.1rem}
.sbr-t{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.4rem}
.sbr-t a{font-weight:700;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--pink)}
.sbr-t a:hover{color:var(--blue)}
.sbr-t small{opacity:.7;white-space:nowrap}
.sb{height:1.1rem;border:3px solid var(--navy);border-radius:99px;background:#fff;overflow:hidden}
.sb i{display:block;height:100%;width:0;background:var(--teal);border-right:3px solid var(--navy);transition:width 1.1s var(--ease)}
.sbr.in .sb i{width:var(--w)}
.sbr:nth-child(even) .sb i{background:var(--pink)}
@media(prefers-reduced-motion:reduce){.sb i{transition:none}}
.wkr-g{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1100px){.wkr-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.wkr-g{grid-template-columns:minmax(0,1fr)}}
.spot:hover .spot-tabs button[aria-selected=true] .sp-bar,.spot:has(:focus-visible) .spot-tabs button[aria-selected=true] .sp-bar{animation-play-state:paused}
.wkr-top{min-height:15rem}
.spot-stage{overflow-x:clip;padding:0 .8rem .9rem 0}

/* =====================================================================
   Info pages for every plan and add-on: overview, mockup gallery, lists, steps
   ===================================================================== */
.svc-p{font-size:1.1rem;line-height:1.75;margin:0 0 1rem;max-width:44rem}
.split .facts{margin-top:1.4rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.tplnote{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding:1.4rem 1.6rem;background:var(--soft);border:3px solid var(--navy);border-radius:1.2rem;box-shadow:5px 5px 0 var(--teal)}
.tplnote h3{margin:0 0 .3rem}.tplnote p{margin:0;max-width:40rem}
.svc-g{gap:1.4rem}.g.g1{grid-template-columns:minmax(0,1fr)}
.svc-c h3{margin:0 0 .9rem}.svc-c .sub3{margin:1.1rem 0 .4rem}
.svc-c.no{background:#fff7f9}
.needl,.stepl{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.9rem}
.needl li,.stepl li{display:flex;gap:1rem;align-items:flex-start;padding:1rem 1.1rem;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1rem;box-shadow:4px 4px 0 var(--teal)}
.needl li b,.stepl li>b{flex:none;display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--pink);color:#fff;border:3px solid var(--navy);font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:.9rem}
.needl li span{line-height:1.5;padding-top:.2rem;font-weight:500}
.stepl li{box-shadow:4px 4px 0 var(--pink)}
.stepl h4{margin:0 0 .2rem;font-size:1.05rem}.stepl p{margin:0;line-height:1.55}
.svc-notes{gap:1rem}
.svc-note{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 1.1rem;background:var(--soft);border:3px solid var(--navy);border-radius:1rem}
.svc-note span{flex:none;display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-style:italic;font-size:.9rem}
.svc-note p{margin:0;line-height:1.6}
.aog{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem}
/* ---- mockup gallery ---- */
.mkg{max-width:62rem;margin:0 auto}
.mk-tabs{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:1.4rem}
.mk-tabs button{padding:.5rem 1.1rem;border:3px solid var(--navy);border-radius:99px;background:#fff;color:var(--navy);font:700 .95rem 'Outfit',sans-serif;cursor:pointer;transition:background .2s,color .2s,transform .2s var(--ease)}
.mk-tabs button:hover{transform:translateY(-2px)}
.mk-tabs button[aria-selected=true]{background:var(--navy);color:#fff}
.mk-panel{display:none;margin:0}
.mk-panel.on{display:block;animation:mkIn .45s var(--ease)}
@keyframes mkIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mk-stage{position:relative;overflow:hidden;padding:2.2rem;background:var(--blue);border:3px solid var(--navy);border-radius:1.5rem;box-shadow:8px 8px 0 var(--navy);min-height:20rem;display:grid;place-items:center}
.mk-stage::before{content:"";position:absolute;right:-4rem;top:-4rem;width:15rem;height:15rem;border-radius:50%;background:rgba(255,255,255,.14)}
.mk-stage::after{content:"";position:absolute;left:-3rem;bottom:-4rem;width:12rem;height:12rem;border-radius:50%;background:rgba(9,47,110,.2)}
.mk-stage>*{position:relative;z-index:2;width:100%;max-width:38rem}
.mk-panel figcaption{display:flex;flex-direction:column;gap:.2rem;text-align:center;margin-top:1.3rem}
.mk-panel figcaption b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.05rem;text-transform:uppercase}
.mk-panel figcaption span{opacity:.8}
/* mock building blocks */
.mkl{display:block;height:.5rem;border-radius:.3rem;background:#cdd8f3;margin:.38rem 0}
.mkh{height:.85rem;background:var(--navy)}
.mkb{display:block;border-radius:.5rem;border:2px solid var(--navy)}
.mkbtn{display:inline-block;margin:.4rem 0;padding:.28rem .8rem;border:2px solid var(--navy);border-radius:99px;color:#fff;font-weight:700;font-size:.72rem}
.mki{position:relative;border:2px solid var(--navy);border-radius:.5rem;overflow:hidden}.mki svg{position:absolute;inset:0;width:100%;height:100%}
.mks{color:#f2a916;letter-spacing:.1em;font-size:.85rem}
.mkck{display:flex;align-items:center;gap:.6rem;padding:.3rem 0;font-size:.85rem;font-weight:600;color:var(--navy)}
.mkck b{display:grid;place-items:center;flex:none;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--teal);border:2px solid var(--navy);font-size:.7rem}
.mkck.no b{background:#fde3ea}
.mkchip{display:inline-block;padding:.15rem .6rem;border:2px solid var(--navy);border-radius:99px;font-size:.72rem;font-weight:700;color:var(--navy)}
.mkchips{display:flex;flex-wrap:wrap;gap:.35rem;margin:.4rem 0}
.mkw{background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:.9rem;overflow:hidden;box-shadow:5px 5px 0 rgba(9,47,110,.45);width:100%}
.mkwb{display:flex;align-items:center;gap:.3rem;padding:.4rem .6rem;background:var(--teal);border-bottom:3px solid var(--navy)}
.mkwb i{width:.5rem;height:.5rem;border-radius:50%;background:var(--navy)}
.mkwb span{margin-left:.5rem;padding:.05rem .6rem;border-radius:99px;background:#fff;font-size:.62rem;font-weight:600;overflow:hidden;white-space:nowrap}
.mkwi{padding:.8rem;display:grid;gap:.7rem}
.mkn{display:flex;gap:.7rem;align-items:center;font-size:.62rem;font-weight:600}.mkn b{margin-right:auto;font-size:.75rem}
.mkhero{padding:1rem;border:2px solid var(--navy);border-radius:.6rem}
.mkgrid{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:.5rem}
.mkcols{display:grid;grid-template-columns:1.2fr 1fr;gap:.8rem;align-items:start}
.mkcard{padding:.7rem;background:#fff;color:var(--navy);border:2px solid var(--navy);border-radius:.7rem}
.mkcard.wide{width:100%;padding:1rem 1.1rem;border-width:3px;border-radius:1rem;box-shadow:5px 5px 0 rgba(9,47,110,.45)}
.mkcard.hi{background:#e8fbf9}
.mkpage{padding:.45rem;border:2px solid var(--navy);border-radius:.5rem;background:#fff;font-size:.62rem}.mkpage b{display:block;margin-bottom:.25rem}
.mkform{padding:.7rem;border:2px solid var(--navy);border-radius:.7rem;background:#f4f7ff}.mkform.big{padding:1rem}
.mktag{display:inline-block;margin-bottom:.4rem;padding:.1rem .6rem;border:2px solid var(--navy);border-radius:99px;background:#e3eaff;font-size:.65rem;font-weight:700}.mktag.pnk{background:#fbd5e0}
.mkcenter{display:flex;gap:1.2rem;align-items:center;justify-content:center;flex-wrap:wrap}
.mkp{width:10.5rem;padding:.55rem .45rem;background:var(--navy);border-radius:1.4rem;border:3px solid var(--navy);box-shadow:5px 5px 0 rgba(0,0,0,.3)}
.mkpn{width:3rem;height:.35rem;margin:0 auto .4rem;border-radius:99px;background:#33508a}
.mkpi{display:grid;gap:.4rem;padding:.6rem;background:#fff;border-radius:1rem;color:var(--navy);min-height:14rem;align-content:start}
.mkbub{max-width:85%;padding:.45rem .65rem;border-radius:.9rem .9rem .9rem .2rem;background:#e3eaff;font-size:.68rem;line-height:1.35;color:var(--navy)}.mkbub.me{margin-left:auto;background:var(--teal);border-radius:.9rem .9rem .2rem .9rem}
.mkchat{display:grid;gap:.5rem;max-width:12rem}
.mkwa{position:absolute;right:.6rem;bottom:.6rem;display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:#25d366;border:2px solid var(--navy);font-size:1rem}
.mkpi{position:relative}
.mkcal{display:grid;grid-template-columns:repeat(7,1fr);gap:.2rem}.mkcal i{aspect-ratio:1;border:2px solid #cdd8f3;border-radius:.3rem}.mkcal i.on{background:var(--pink);border-color:var(--navy)}
.mkslots{display:grid;gap:.4rem;align-content:start}
.mkstat{text-align:center}.mkstat b{display:block;font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.2rem;color:var(--blue)}.mkstat small{font-weight:600}
.mkchart{display:block;width:100%;height:5rem;margin-top:.7rem}
.mkev{display:grid;grid-template-columns:8rem 1fr;gap:.6rem;align-items:center;font-size:.78rem;font-weight:600;margin:.35rem 0}.mkev i{display:block;height:.7rem;border:2px solid var(--navy);border-radius:99px;background:var(--teal)}
.mkrate{display:flex;align-items:center;gap:.5rem;font-weight:700}.mkrate small{opacity:.7}
.mkby{display:block;margin-top:.3rem;opacity:.7;font-size:.65rem}
.mkcount{text-align:center;font-weight:700;font-size:.75rem;color:var(--blue)}
.mkmap{position:relative;height:6rem;border:2px solid var(--navy);border-radius:.7rem;background:repeating-linear-gradient(45deg,#e8f0ff,#e8f0ff 10px,#f4f7ff 10px,#f4f7ff 20px);margin-bottom:.5rem}
.mkmap i{position:absolute;width:.9rem;height:.9rem;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--pink);border:2px solid var(--navy)}
.mkmove{display:flex;align-items:center;justify-content:center;gap:.8rem;flex-wrap:wrap}.mkmove>*{flex:1 1 9rem;max-width:16rem}
.mkarrow{flex:none!important;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--pink);color:#fff;border:3px solid var(--navy);font-weight:700;font-size:1.1rem}
.mkmeter{margin-top:.6rem;font-size:.78rem;font-weight:600}.mkmeter div{height:.8rem;border:2px solid var(--navy);border-radius:99px;background:#fff;margin:.3rem 0;overflow:hidden}.mkmeter i{display:block;height:100%;background:var(--teal)}.mkmeter small{opacity:.6}
.mkserp{margin-bottom:.7rem}.mkserp small{display:block;color:#3b6b4f;font-size:.7rem}.mkserp b{display:block;color:#1a4fb4;font-size:1rem;margin:.1rem 0}.mkserp span{font-size:.75rem;line-height:1.4;color:#4a5d86}.mkserp.dim{opacity:.45}
.mktable .mkth,.mktable .mktr{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.4rem .2rem;font-size:.78rem;border-bottom:1px solid #dbe4fb}.mktable .mkth{font-weight:700;text-transform:uppercase;font-size:.65rem;letter-spacing:.06em;opacity:.7}
.mkreport{display:flex;gap:1rem;align-items:center}.mkscore{flex:none;display:grid;place-items:center;width:5rem;height:5rem;border-radius:50%;border:6px solid var(--teal);text-align:center}.mkscore b{font-size:1.4rem;line-height:1}.mkscore small{display:block;font-size:.6rem}
.mkcode{display:block;margin:.3rem 0 .6rem;padding:.6rem .7rem;border-radius:.6rem;background:#0f2447;color:#9fe9e1;font-family:ui-monospace,Menlo,monospace;font-size:.72rem;line-height:1.5;overflow-wrap:anywhere}.mkcode.bad{color:#ffb3c6}
.mkdir{display:grid;grid-template-columns:5.5rem 1fr auto;gap:.6rem;align-items:center;padding:.4rem 0;border-bottom:1px solid #dbe4fb;font-size:.75rem}.mkdir b{font-weight:700}.mkdir span{opacity:.75}.mkdir i{font-style:normal;color:#0a8f84;font-weight:700}
.mkgbp{background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1rem;overflow:hidden;box-shadow:5px 5px 0 rgba(9,47,110,.45);width:100%;max-width:22rem}.mkgbpb{padding:.8rem 1rem;display:grid;gap:.25rem}.mkgbpb b{font-size:1.1rem}.mkgbpb div{display:flex;align-items:center;gap:.4rem}
.mklogo{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:1.4rem 1rem;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1rem}.mklogo b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:.95rem;text-transform:uppercase}.mklogo.dark{background:var(--navy);color:#fff;border-color:#fff}.mklogo.sm{padding:.3rem;border:0;justify-content:flex-start}
.mkmark{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.5rem;background:var(--pink);color:#fff;border:2px solid var(--navy);font-family:'Bowlby One','Arial Black',sans-serif;font-size:.9rem}
.mkswatches{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}.mkswatches span{display:flex;align-items:flex-end;aspect-ratio:1;padding:.3rem;border:2px solid var(--navy);border-radius:.6rem;color:#fff}.mkswatches small{font-size:.6rem;font-weight:700}
.mkfont{display:flex;align-items:baseline;gap:.7rem;margin-top:.7rem}.mkfont b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.8rem}.mkfont.two b{font-family:'Outfit',sans-serif;font-weight:600}.mkfont span{opacity:.7;font-size:.8rem}
.mksoc{text-align:center;display:grid;justify-items:center;gap:.2rem}.mksoc .mkb{width:100%}
.mkavatar{display:grid;place-items:center;width:3.2rem;height:3.2rem;margin-top:-1.8rem;border-radius:50%;background:var(--pink);color:#fff;border:3px solid var(--navy);font-family:'Bowlby One','Arial Black',sans-serif;position:relative}
.mkdoc{padding:.9rem;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:.6rem;min-height:12rem;box-shadow:4px 4px 0 rgba(9,47,110,.4)}.mkdoc.cover{background:var(--blue);color:#fff;display:grid;align-content:space-between}.mkdoc.cover b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.1rem}
.mkdoc.flyer{width:12rem;min-height:16rem}.mkdoc.letter{width:13rem;min-height:17rem}.mkdoc small{opacity:.7;font-size:.62rem;display:block;margin-top:.5rem}
.mkpost{display:grid;place-items:center;aspect-ratio:1;padding:.4rem;border:2px solid var(--navy);border-radius:.6rem;text-align:center;font-size:.7rem;color:var(--navy)}.mkpost b{font-weight:700}
.mkbc{display:grid;align-content:space-between;aspect-ratio:1.7;padding:.9rem;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:.6rem;box-shadow:4px 4px 0 rgba(9,47,110,.4)}.mkbc b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:.85rem;text-transform:uppercase}.mkbc small{font-size:.65rem;line-height:1.5}.mkbc.dark{background:var(--navy);color:#fff;place-items:center}
.mkqr{display:grid;grid-template-columns:repeat(10,1fr);width:8rem;height:8rem;margin:0 auto .6rem;padding:.4rem;border:3px solid var(--navy);border-radius:.5rem;background:#fff}.mkqr i{background:#fff}.mkqr i.on{background:var(--navy)}
.qrc{text-align:center;max-width:14rem}.qrc small{display:block;opacity:.65}
.mklink{padding:.6rem .8rem;border:2px dashed var(--navy);border-radius:.6rem;background:#f4f7ff;font-weight:600;font-size:.8rem;margin:.4rem 0 .6rem;overflow-wrap:anywhere}
.mkdom{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem;font-size:.85rem}.mkdom span{color:var(--pink);font-weight:700}
.mksearch{display:flex;justify-content:space-between;align-items:center;padding:.5rem .6rem .5rem .9rem;border:3px solid var(--navy);border-radius:99px;background:#fff;margin-bottom:.6rem;font-weight:600;font-size:.85rem}.mksearch b{padding:.25rem .8rem;border-radius:99px;background:var(--pink);color:#fff;font-size:.72rem}
.mkmail{display:grid;gap:.4rem}.mkmh{padding:.5rem .6rem;background:#e3eaff;border-radius:.5rem;font-size:.78rem}.mkmr{display:flex;align-items:center;gap:.6rem;padding:.4rem .2rem;border-bottom:1px solid #dbe4fb}.mkmr i{flex:none;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--teal);border:2px solid var(--navy)}.mkmr b{display:block;font-size:.78rem}.mkmr small{opacity:.7}
.mkbig{display:grid;place-items:center;font-size:2rem;color:#0a8f84;font-weight:700;margin-top:.3rem}
.mksig{display:flex;gap:.9rem;align-items:flex-start}.mksig b{display:block}.mksig small{display:block;opacity:.75;font-size:.72rem}
@media(prefers-reduced-motion:reduce){.mk-panel.on{animation:none}}
@media(max-width:700px){.mk-stage{padding:1.2rem;min-height:16rem}.mkcols{grid-template-columns:minmax(0,1fr)}.mkev{grid-template-columns:6rem 1fr}.mkdir{grid-template-columns:4.5rem 1fr auto}.mkgrid[style*="--n:5"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mkpost[style*="var(--blue)"],.mkpost[style*="var(--pink)"]{color:#fff}

/* =====================================================================
   MOBILE v2: consistent rhythm, swipe rails, tidy info pages
   ===================================================================== */
.rail-dots{display:none}
@media(max-width:900px){
 /* page rhythm */
 .c{width:calc(100% - 2.4rem)}
 .s{padding:3rem 0}
 .sh{margin-bottom:1.5rem}
 .sh .eyebrow,.sh-l .eyebrow{margin-bottom:.7rem}
 .sh h2,.sh-l h2{font-size:clamp(1.7rem,7.4vw,2.05rem);line-height:1.12;margin-top:0}
 .sh p,.sh-l p{font-size:1.02rem;line-height:1.6;margin-top:.7rem}
 .sh-row{gap:1.1rem;margin-bottom:1.5rem}
 .sh-btns{width:100%}.sh-btns .btn{flex:1 1 100%}
 .g{gap:1rem}
 .card{padding:1.25rem}
 .ph{padding-top:2.2rem;padding-bottom:2.6rem}
 .ph h1,.ph .t1{font-size:clamp(2rem,9.4vw,2.6rem);line-height:1.08}
 .ph .lead,.ph p{font-size:1.04rem;line-height:1.6}
 .ph .row,.cta .row,.hero .row{flex-direction:column;gap:.7rem;align-items:stretch}
 .ph .row .btn,.cta .row .btn,.hero .row .btn{width:100%;justify-content:center}
 .hero{padding-top:1.8rem;padding-bottom:2.2rem}
 .hero .lead{font-size:1.06rem;line-height:1.65;margin:1.1rem 0 1.5rem}
 .pick{margin-top:2rem;gap:.8rem}
 .cta{padding:3rem 0}
 /* info pages: price card first, compact facts, tidy lists */
 .split{display:flex!important;flex-direction:column;gap:1.6rem}
 .split>.side{order:-1;position:static!important;width:100%;max-width:none}
 .facts{grid-template-columns:minmax(0,1fr)!important;gap:.6rem;margin-top:1.1rem}
 .fact{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.85rem 1rem}
 .fact b{margin:0;flex:none;font-size:.72rem}
 .fact>*:last-child{text-align:right}
 .svc-p{font-size:1.05rem;line-height:1.7}
 .svc-g{gap:1rem}.svc-c{padding:1.3rem}
 .ck.two{grid-template-columns:minmax(0,1fr)}
 .needl li,.stepl li{padding:.9rem 1rem}
 .tplnote{padding:1.2rem}
 .mk-stage{padding:1.2rem;min-height:15rem;border-radius:1.2rem;box-shadow:5px 5px 0 var(--navy)}
 .mk-tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:0 -1.2rem 1.1rem;padding:.3rem 1.2rem .5rem;scrollbar-width:none}
 .mk-tabs::-webkit-scrollbar{display:none}.mk-tabs button{flex:none}
 .spot-tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 -1.2rem;padding:.3rem 1.2rem .6rem;scrollbar-width:none;width:calc(100% + 2.4rem)}
 .spot-tabs::-webkit-scrollbar{display:none}.spot-tabs button{flex:none}
 .spot-top{margin-bottom:1rem}
 /* footer */
 .ft2{padding-bottom:5.5rem}
}
@media(max-width:700px){
 /* swipe rails */
 .rail{display:flex!important;grid-template-columns:none!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:.9rem;margin:0 -1.2rem;padding:1.1rem 1.2rem 1.3rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding:0 1.2rem}
 .rail::-webkit-scrollbar{display:none}
 .rail>*{flex:0 0 84%;max-width:21rem;min-width:0;scroll-snap-align:center}
 .rail.stg>*,.rail.pmg>*{flex-basis:80%}
 .rail-dots{display:flex;justify-content:center;gap:.45rem;margin:-.4rem 0 .6rem}
 .rail-dots i{width:.55rem;height:.55rem;border-radius:99px;background:#c3cff0;transition:width .25s var(--ease),background .25s}
 .rail-dots i.on{width:1.6rem;background:var(--pink)}
 .s.navy .rail-dots i{background:rgba(255,255,255,.35)}
 /* smaller things */
 .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
 .stat{padding:1rem .8rem}
 .btn{min-height:2.9rem}
 .tabs{margin-left:-1.2rem;margin-right:-1.2rem;padding-left:1.2rem;padding-right:1.2rem}
}
@media(max-width:700px){
 #pricing [data-tabs] .gp.rail{display:flex!important;grid-template-columns:none!important;overflow-x:auto!important;margin:0 -1.2rem!important;padding:1.1rem 1.2rem 1.3rem!important;gap:.9rem!important;scroll-snap-type:x mandatory!important}
 #pricing [data-tabs] .gp.rail>.pl{flex:0 0 84%!important;max-width:21rem!important;width:auto!important;scroll-snap-align:center!important}
}
/* closed-by-default lists inside the plan cards */
.fold{margin:.7rem 0 0}
.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.6rem .85rem;border:2px solid var(--navy);border-radius:.85rem;background:var(--soft);color:var(--navy);font-weight:700;font-size:.92rem;transition:background .2s,transform .2s var(--ease)}
.fold>summary:hover{background:#e3eaff}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"+";display:grid;place-items:center;flex:none;width:1.45rem;height:1.45rem;border-radius:50%;background:var(--pink);color:#fff;font-weight:700;line-height:1;font-size:1rem}
.fold[open]>summary::after{content:"\2212"}
.fold.no>summary{background:#fff3f6}
.fold>div{padding-top:.6rem}
.fold[open]>div{animation:foldIn .3s var(--ease)}
@keyframes foldIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* =====================================================================
   MOBILE HERO v2: compact, clear, graphic above the fold
   ===================================================================== */
@media(max-width:900px){
 /* the bottom action bar slides in once you scroll, so it never repeats the hero buttons */
 .mbar{transform:translateY(115%);transition:transform .35s var(--ease)}
 .mbar.on{transform:none}
}
@media(max-width:700px){
 .hero{padding-top:1.5rem;padding-bottom:1.8rem}
 .hero .eyebrow{margin-bottom:1rem}
 .hero .t1{font-size:clamp(2.25rem,10.6vw,2.75rem);line-height:1.06}
 .hero .lead{font-size:1rem;line-height:1.6;margin:1rem 0 1.3rem}
 .hero .row{flex-direction:row!important;align-items:stretch;gap:.6rem}
 .hero .row .btn{flex:1 1 0;width:auto!important;min-width:0;padding-left:.5rem;padding-right:.5rem;font-size:.8rem;min-height:3rem;justify-content:center;text-align:center}
 .hero .row .btn .arr{display:none}
 .hero-top{gap:1.3rem}
 .hero-top .mock{max-width:19rem;margin:.2rem auto 0;padding:0 1.1rem 1.2rem 0}
 .hero .blob1,.hero .blob2,.hero .gcard{display:none}
 .hero .chip{font-size:.72rem;padding:.2rem .65rem;border-width:2px}
 .hero .chip.a{left:-.2rem;top:2.6rem}
 .hero .chip.b{right:-.2rem;top:-.5rem}
 /* quick links become a tidy swipe row of pills */
 .pick{display:flex!important;grid-template-columns:none!important;overflow-x:auto;gap:.6rem;margin:1.4rem -1.2rem 0;padding:.3rem 1.2rem .9rem;scroll-snap-type:x proximity;scrollbar-width:none}
 .pick::-webkit-scrollbar{display:none}
 .pick>*{flex:0 0 auto;width:auto;min-width:0;padding:.55rem .9rem .55rem .6rem;gap:.55rem;scroll-snap-align:start}
 .pick .ptx{display:block}.pick .ptx b{font-size:.92rem;white-space:nowrap}.pick .ptx span,.pick .go{display:none}
 .pick .ico{width:2rem;height:2rem}
 .mq{margin-top:0}
}
@media(max-width:360px){.hero .row .btn{font-size:.74rem}.hero .t1{font-size:2.15rem}}
@media(max-width:700px){.hero .t1{font-size:clamp(2.1rem,9.6vw,2.6rem)}}

/* =====================================================================
   Sliders only move sideways; vertical swipes scroll the page
   ===================================================================== */
@media(max-width:900px){
 .rail,.pick,.mk-tabs,.spot-tabs,.tabs,.fqx-cats,.wad-chips{overflow-y:hidden!important;overscroll-behavior-y:auto}
 #pricing [data-tabs] .gp.rail{overflow-y:hidden!important}
 .rail{touch-action:pan-x pan-y;overscroll-behavior-x:contain}
 .rail>*{touch-action:pan-x pan-y}
}
@media(hover:none){
 .lift:hover,.card.lift:hover,.wk:hover,.wkr:hover,.ba:hover,.pm:hover{transform:none!important}
 .wk:hover .wk-win,.wk:hover .wk-ph,.wkr:hover .wk-win,.wkr:hover .wk-ph{transform:none!important}
}
/* hero quick links: no snapping, so the first pill keeps its left margin */
@media(max-width:700px){
 .pick{scroll-snap-type:none!important;scroll-padding-inline:1.2rem}
 .pick>*{scroll-snap-align:none!important;padding:.5rem .85rem .5rem .55rem}
 .pick .ptx b{font-size:.86rem}
 .pick .ico{width:1.9rem;height:1.9rem}
}

/* =====================================================================
   NOTES ROUND: no hero fade-in, full WhatsApp label, WhatsApp-style chat,
   clickable plans in the hero, new add-on cards, centred section buttons,
   simpler rebrand section, five-at-a-time FAQs, work page hero
   ===================================================================== */
/* hero sections appear straight away */
.js .hero .eyebrow,.js .ph .eyebrow,.js .hero h1,.js .ph h1,.js .hero .lead,.js .ph .lead,.js .ph .crumb,.js .hero .row,.js .ph .row,.js .hero .mock,.js .hero .plans-art,.js .hero .pick{animation:none!important;opacity:1}
/* header WhatsApp button always shows the full word */
@media(min-width:901px){
 .hd-cta .btn.wa.sm{width:auto!important;min-width:0!important;padding:.4rem 1.05rem!important}
 .hd-cta .btn.wa .wl{display:inline!important}
}
@media(min-width:901px) and (max-width:1180px){
 .hd .c{gap:.6rem}
 .nav>a,.dd-t{padding:.45rem .45rem;font-size:.88rem}
 .nav>a::after{left:.45rem;right:.45rem}
 .hd-cta{gap:.35rem}
 .hd-cta .btn.sm{padding:.35rem .7rem!important;font-size:.7rem}
 .hd-cta .btn svg{width:.85rem;height:.85rem}
 .logo.wm{font-size:1.5rem}
}
/* ---- WhatsApp chat pop-up ---- */
.wad .wad-p{width:min(25rem,100%);background:#efeae2;border-left:0;box-shadow:-1.2rem 0 3rem rgba(0,0,0,.28);color:#111b21;font-family:'Outfit',sans-serif}
.wad .wad-h{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;background:#008069;color:#fff;border-bottom:0}
.wad .wad-av{flex:none;display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:50%;background:#fff;color:#008069;border:0;font:700 1.2rem 'Outfit',sans-serif}
.wad .wad-who b{display:block;font:700 1.05rem/1.2 'Outfit',sans-serif;text-transform:none}
.wad .wad-who small{opacity:.85;font-size:.8rem}
.wad .wad-x{margin-left:auto;width:2.3rem;height:2.3rem;border:0;background:transparent;color:#fff;font-size:1.7rem;border-radius:50%}
.wad .wad-x:hover{background:rgba(255,255,255,.15);border:0}
.wad-scroll{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;background:#efeae2}
.wad-chat{display:flex;flex-direction:column;gap:.4rem;padding:1rem .9rem 1.1rem;background-color:#efeae2;background-image:radial-gradient(rgba(11,20,26,.06) 1.2px,transparent 1.3px);background-size:18px 18px}
.wad-day{align-self:center;margin-bottom:.3rem;padding:.2rem .65rem;border-radius:.5rem;background:#fff;color:#54656f;font-size:.72rem;box-shadow:0 1px 1px rgba(11,20,26,.13)}
.wad-m{max-width:86%;padding:.45rem .65rem .25rem;background:#fff;border-radius:0 .65rem .65rem .65rem;box-shadow:0 1px 1px rgba(11,20,26,.13);font-size:.95rem;line-height:1.4;color:#111b21}
.wad-m p{margin:0}
.wad-m time{display:block;margin-top:.1rem;text-align:right;font-size:.66rem;color:#667781}
.wad-m.mine{align-self:flex-end;background:#d9fdd3;border-radius:.65rem 0 .65rem .65rem}
.wad-m[hidden]{display:none}
.wad-qr{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.2rem}
.wad-qr button{padding:.5rem .9rem;border:0;border-radius:99px;background:#fff;color:#008069;font:600 .9rem 'Outfit',sans-serif;cursor:pointer;box-shadow:0 1px 1px rgba(11,20,26,.18);transition:transform .15s,background .15s}
.wad-qr button:hover,.wad-qr button.on{background:#d9fdd3;transform:translateY(-1px)}
.wad-bar{display:flex;align-items:flex-end;gap:.55rem;padding:.6rem .7rem;background:#f0f2f5}
.wad-bar textarea{flex:1;min-height:2.7rem;max-height:7.5rem;padding:.65rem 1rem;border:0;border-radius:1.4rem;background:#fff;color:#111b21;font:1rem 'Outfit',sans-serif;line-height:1.35;resize:none;box-shadow:none}
.wad-bar textarea:focus{outline:2px solid #00a884;box-shadow:none;border:0}
.wad-send{flex:none;display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:50%;background:#00a884;color:#fff;transition:transform .15s,background .15s}
.wad-send:hover{background:#008f6f;transform:scale(1.05)}
.wad-send svg{width:1.25rem;height:1.25rem}
.wad-act{padding:.4rem .9rem 1rem;background:#f0f2f5;text-align:center}
.wad .wad-go{display:flex;justify-content:center;align-items:center;gap:.55rem;width:100%;padding:.85rem 1rem;border:0;border-radius:99px;background:#25d366;color:#073b2b;font:700 1.02rem 'Outfit',sans-serif;text-decoration:none;box-shadow:0 2px 0 #1da851;transition:transform .15s,box-shadow .15s}
.wad .wad-go:hover{transform:translateY(-1px);box-shadow:0 4px 0 #1da851}
.wad .wad-go svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
.wad-note{margin:.6rem 0 0;color:#54656f;font-size:.82rem}.wad-note a{color:#008069;font-weight:700}
.wad-faq{padding:1.1rem .9rem 1.6rem;background:#fff;border-top:1px solid #e1e5e8}
.wad-faq h3{margin:0 0 .6rem;font:700 .95rem 'Outfit',sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#008069}
.wad-faq details{border-bottom:1px solid #e9edef}
.wad-faq summary{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.75rem .1rem;cursor:pointer;list-style:none;font-weight:600;color:#111b21}
.wad-faq summary::-webkit-details-marker{display:none}
.wad-faq summary::after{content:"+";flex:none;color:#008069;font-size:1.3rem;line-height:1}
.wad-faq details[open] summary::after{content:"\2212"}
.wad-faq details div{padding:0 .1rem .8rem;color:#3b4a54;line-height:1.55;font-size:.93rem}
.wad-all{display:inline-block;margin-top:.8rem;color:#008069;font-weight:700;text-decoration:none}
/* ---- hero: plans you can click ---- */
.plans-art{position:relative;justify-self:end;width:100%;max-width:38rem;min-height:26rem}
.plans-art .blob1,.plans-art .blob2{position:absolute}
.pa{position:absolute;z-index:2;display:flex;flex-direction:column;gap:.2rem;width:16.5rem;padding:1.15rem 1.25rem 1.05rem;color:var(--navy);border:3px solid var(--navy);border-radius:1.25rem;box-shadow:6px 6px 0 var(--navy);text-decoration:none;transition:transform .4s var(--ease),box-shadow .3s}
.pa1{left:0;bottom:1.2rem;background:#fff;transform:rotate(-4deg);z-index:4}
.pa2{left:8.4rem;top:3.2rem;background:var(--pink);color:#fff;transform:rotate(2deg);z-index:3}
.pa3{right:0;top:0;background:var(--teal);transform:rotate(5deg);z-index:2}
.pa:hover,.pa:focus-visible{transform:translateY(-10px) rotate(0);z-index:6;box-shadow:10px 14px 0 rgba(6,31,74,.55)}
.pa-n{font-family:'Bowlby One','Arial Black',sans-serif;font-size:.92rem;text-transform:uppercase;letter-spacing:.02em}
.pa b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:2.5rem;line-height:1.05}
.pa-d{font-weight:600;font-size:.92rem;opacity:.9}
.pa-g{display:inline-flex;align-items:center;gap:.5rem;margin-top:.55rem;font-weight:700}
.pa-g i{font-style:normal;display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--navy);color:#fff;transition:transform .3s var(--ease)}
.pa2 .pa-g i{background:#fff;color:var(--pink)}
.pa:hover .pa-g i{transform:translateX(4px)}
.pa-tag{position:absolute;right:-.5rem;top:-.95rem;padding:.15rem .8rem;border:3px solid var(--navy);background:var(--teal);color:var(--navy);font-weight:700;font-size:.78rem;transform:rotate(3deg)}
.pa-chip{position:absolute;z-index:5;padding:.3rem .9rem;border:3px solid var(--navy);border-radius:99px;background:#fff;color:var(--navy);font-weight:700;font-size:.82rem;text-decoration:none;box-shadow:3px 3px 0 var(--navy);transition:transform .25s var(--ease)}
.pa-chip:hover{transform:translateY(-3px)}
.pa-chip.c1{right:.2rem;bottom:4.8rem}.pa-chip.c2{right:2.4rem;bottom:1.1rem}
@media(min-width:901px){.hero-top .plans-art{justify-self:end}}
@media(max-width:700px){
 .plans-art{display:grid;gap:.75rem;min-height:0;max-width:none;margin-top:.4rem}
 .plans-art .blob1,.plans-art .blob2{display:none}
 .pa{position:static;width:auto;transform:none!important;display:grid;grid-template-columns:1fr auto;grid-template-areas:"n b" "d g";align-items:center;gap:.1rem .8rem;padding:.8rem 1rem;box-shadow:4px 4px 0 var(--navy)}
 .pa1{order:1}.pa2{order:2}.pa3{order:3}
 .pa-n{grid-area:n}.pa b{grid-area:b;font-size:1.9rem;text-align:right}.pa-d{grid-area:d;font-size:.82rem}.pa-g{grid-area:g;margin:0;justify-self:end;font-size:.82rem}
 .pa-tag{position:static;grid-area:n;justify-self:start;font-size:.66rem;padding:.05rem .5rem;transform:none;margin-bottom:.15rem}
 .pa2{grid-template-areas:"t t" "n b" "d g"}.pa2 .pa-tag{grid-area:t}
 .pa-chip{position:static;order:4;justify-self:start;font-size:.8rem;box-shadow:2px 2px 0 var(--navy)}
}
/* ---- add-on cards ---- */
.aoc{display:flex;flex-direction:column;gap:.55rem;padding:1.1rem 1.15rem 1.05rem;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1.25rem;text-decoration:none;box-shadow:5px 5px 0 var(--teal);transition:transform .3s var(--ease),box-shadow .3s}
.aoc.tn1{box-shadow:5px 5px 0 var(--pink)}.aoc.tn2{box-shadow:5px 5px 0 var(--blue)}
.aoc:hover{transform:translate(-3px,-4px);box-shadow:9px 10px 0 var(--pink)}
.aoc-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.aoc-top .ico{width:2.6rem;height:2.6rem;flex:none}
.aoc-p{padding:.25rem .85rem;border-radius:99px;background:var(--navy);color:#fff;font-weight:700;font-size:.92rem;white-space:nowrap}
.aoc h3{margin:.25rem 0 0;font-size:1.02rem;line-height:1.25}
.aoc p{margin:0;opacity:.82;line-height:1.5;font-size:.95rem}
.aoc-go{margin-top:auto;padding-top:.6rem;display:inline-flex;align-items:center;gap:.55rem;font-weight:700;color:var(--blue)}
.aoc-go i{font-style:normal;display:grid;place-items:center;width:1.65rem;height:1.65rem;border-radius:50%;background:var(--navy);color:#fff;transition:transform .3s var(--ease),background .2s}
.aoc:hover .aoc-go i{background:var(--pink);transform:translateX(4px)}
/* ---- section buttons, centred under the content ---- */
.sec-cta{display:flex;justify-content:center;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:2.2rem}
@media(max-width:700px){.sec-cta{flex-direction:column;align-items:stretch}.sec-cta .btn{width:100%;justify-content:center}}
/* ---- why choose us (no VS badge) ---- */
.vsx{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:900px){.vsx{grid-template-columns:minmax(0,1fr)}}
/* ---- about our rebrand ---- */
.rbn{display:grid;gap:2.2rem}
.rbn-h{max-width:54rem}.rbn-h h2{color:#fff;margin:.3rem 0 0}
.rbn-h p{font-size:1.1rem;line-height:1.7;margin:.9rem 0 0;opacity:.95}
.rbn-w h3{margin:0 0 1.1rem;color:#fff}
.rbn-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.rbn-c{padding:1.4rem 1.3rem;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.28);border-radius:1.2rem;transition:transform .3s var(--ease),background .3s}
.rbn-c:hover{transform:translateY(-4px);background:rgba(255,255,255,.14)}
.rbn-c span{display:block;font-family:'Bowlby One','Arial Black',sans-serif;font-size:2.1rem;line-height:1;color:var(--teal)}
.rbn-c h4{margin:.8rem 0 .45rem;font:700 1.12rem 'Outfit',sans-serif;color:#fff}
.rbn-c p{margin:0;line-height:1.6;opacity:.92}
.rbn-f{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding:1.7rem 1.9rem;background:var(--teal);color:var(--navy);border:3px solid #fff;border-radius:1.4rem;box-shadow:7px 7px 0 var(--pink)}
.rbn-f b{display:block;margin-bottom:.35rem;color:var(--navy)}.rbn-f p{margin:0;font-weight:500}
@media(max-width:1000px){.rbn-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.rbn-g{grid-template-columns:minmax(0,1fr)}.rbn-f{padding:1.4rem}.rbn-f .btn{width:100%;justify-content:center}}
/* ---- FAQs: five at a time ---- */
.fqx-foot{display:flex;align-items:center;gap:.9rem 1.2rem;flex-wrap:wrap;margin-top:1.3rem}
.fqx-ref{display:inline-flex;align-items:center;gap:.6rem;padding:.55rem 1.1rem .55rem .7rem;border:3px solid var(--navy);border-radius:99px;background:var(--pink);color:#fff;font:700 .95rem 'Outfit',sans-serif;cursor:pointer;box-shadow:3px 3px 0 var(--navy);transition:transform .2s var(--ease),box-shadow .2s}
.fqx-ref i{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:#fff;color:var(--pink);font-style:normal;font-size:1.1rem;font-weight:700;transition:transform .5s var(--ease)}
.fqx-ref:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--navy)}
.fqx-ref:hover i,.fqx-ref.spin i{transform:rotate(360deg)}
.fqx-ref[hidden]{display:none}
.fqx-count{opacity:.7;font-weight:600}
.fqx-list.swap{animation:fqIn .4s var(--ease)}
@keyframes fqIn{from{opacity:.2;transform:translateY(10px)}to{opacity:1;transform:none}}
/* ---- Our Work hero: examples of the work ---- */
.wkhero{align-items:center}
.wk-fan{position:relative;justify-self:end;width:100%;max-width:36rem;min-height:23rem}
.wf{position:absolute;display:block;width:18.5rem;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1rem;overflow:hidden;box-shadow:6px 6px 0 var(--navy);text-decoration:none;transition:transform .4s var(--ease),box-shadow .3s}
.wf-bar{display:flex;gap:.3rem;padding:.45rem .65rem;background:var(--navy)}.wf-bar i{width:.5rem;height:.5rem;border-radius:50%;background:#fff;opacity:.85}
.wf img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.wf span{display:block;padding:.6rem .85rem .7rem}.wf b{display:block;font-size:.95rem}.wf small{opacity:.7}
.wf1{left:0;top:0;transform:rotate(-4deg);z-index:1}
.wf2{right:0;top:2.2rem;transform:rotate(3deg);z-index:2}
.wf3{left:2.6rem;bottom:0;transform:rotate(-1.5deg);z-index:3}
.wf:hover,.wf:focus-visible{transform:translateY(-8px) rotate(0);z-index:6;box-shadow:10px 13px 0 rgba(6,31,74,.55)}
@media(max-width:700px){
 .wk-fan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;min-height:0;max-width:none;margin-top:.6rem}
 .wf{position:static;width:auto;transform:none!important;box-shadow:3px 3px 0 var(--navy);border-radius:.7rem}
 .wf small{display:none}.wf b{font-size:.72rem;line-height:1.2}.wf span{padding:.4rem .5rem .5rem}
}
/* Our Work hero: cleaner cascade, names always visible */
.wk-fan{min-height:25rem}
.wf{width:16.5rem}
.wf span{position:absolute;left:.55rem;top:2.1rem;padding:.2rem .65rem;border:2px solid var(--navy);border-radius:99px;background:#fff;box-shadow:2px 2px 0 var(--navy)}
.wf b{font-size:.8rem}.wf small{display:none}
.wf1{left:0;top:0}
.wf2{right:0;top:3.2rem}
.wf3{left:4.2rem;bottom:0}
@media(max-width:700px){
 .wf span{position:static;border:0;background:none;box-shadow:none;border-radius:0;padding:.4rem .5rem .5rem}
}
@media(max-width:700px){.wf{width:auto}.wf1,.wf2,.wf3{left:auto;right:auto;top:auto;bottom:auto}.wk-fan{min-height:0}}

/* =====================================================================
   Hero: the device mockups, with plans you can click inside them
   ===================================================================== */
.plans-mock{position:relative}
.plans-mock .win .bd{gap:.75rem}
.pm-l{display:block;font-family:'Bowlby One','Arial Black',sans-serif;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--navy)}
.pt3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.pt{position:relative;display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.8rem .4rem .7rem;border:3px solid var(--navy);border-radius:.8rem;color:var(--navy);text-decoration:none;text-align:center;box-shadow:3px 3px 0 var(--navy);transition:transform .25s var(--ease),box-shadow .25s}
.pt1{background:var(--teal)}.pt2{background:var(--pink);color:#fff}.pt3b{background:var(--blue);color:#fff}
.pt:hover,.pt:focus-visible{transform:translateY(-5px);box-shadow:5px 8px 0 var(--navy)}
.pt b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:.78rem;text-transform:uppercase}
.pt strong{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.65rem;line-height:1.05}
.pt small{font-size:.72rem;font-weight:600;opacity:.9}
.pt em{position:absolute;left:50%;top:-.85rem;transform:translateX(-50%);padding:.08rem .6rem;border:2px solid var(--navy);border-radius:99px;background:#fff;color:var(--navy);font-style:normal;font-weight:700;font-size:.62rem;white-space:nowrap}
.mock .bd .bt.btl{display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;padding:.5rem 1rem;color:#fff;font-weight:700;font-size:.82rem;text-decoration:none;justify-self:start;transition:transform .2s var(--ease)}
.mock .bd .bt.btl:hover{transform:translateY(-2px)}
.plans-mock .phone{display:flex;flex-direction:column;gap:.38rem;padding:1.1rem .6rem .7rem;aspect-ratio:auto;min-height:0;height:auto;bottom:-.4rem;width:34%}
.plans-mock .phone .pm-l{font-size:.6rem;margin-top:.15rem}
.pr{display:flex;justify-content:space-between;align-items:center;gap:.3rem;padding:.4rem .5rem;border:2px solid var(--navy);border-radius:.5rem;background:var(--soft);color:var(--navy);text-decoration:none;font-size:.68rem;font-weight:700;transition:transform .2s var(--ease),background .2s}
.pr b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:.8rem}
.pr:hover{transform:translateX(-3px);background:var(--teal)}
.plans-mock .gcard{text-decoration:none;color:var(--navy);display:block}
.plans-mock .gcard .gct{display:block;font-size:.85rem}.plans-mock .gcard small{display:block;opacity:.7;font-size:.72rem}
.plans-mock .chip{text-decoration:none}
@media(max-width:700px){
 .plans-mock{max-width:21rem;padding:0 1rem 1.6rem 0}
 .plans-mock .win .bd{padding:.9rem;gap:.55rem}
 .pt3{gap:.4rem}
 .pt{padding:.65rem .2rem .55rem;border-width:2px;box-shadow:2px 2px 0 var(--navy)}
 .pt b{font-size:.58rem}.pt strong{font-size:1.15rem}.pt small{font-size:.58rem}.pt em{font-size:.5rem;top:-.7rem;padding:.04rem .4rem}
 .pm-l{font-size:.62rem}
 .mock .bd .bt.btl{font-size:.7rem;padding:.4rem .8rem}
 .plans-mock .phone{width:36%;padding:.9rem .4rem .5rem;gap:.28rem;bottom:-.2rem}
 .pr{padding:.3rem .35rem;font-size:.56rem;border-width:1.5px}.pr b{font-size:.66rem}
 .hero .plans-mock .gcard{display:none}
}
.plans-mock .win .bd{padding-bottom:6.6rem}
.pm-h{font-size:.95rem;letter-spacing:.02em}
.plans-mock .phone{bottom:-1.7rem;width:36%}
.plans-mock .gcard{left:-1.6rem;bottom:-1.5rem;width:50%}
.plans-mock .chip.a{left:1rem;top:-1.15rem}
@media(max-width:700px){
 .plans-mock .win .bd{padding-bottom:4.6rem}
 .pm-h{font-size:.74rem}
 .plans-mock .phone{bottom:-1rem;width:38%}
 .plans-mock .chip.a{left:.6rem;top:-.95rem}
}
.plans-mock .win .bd{padding-bottom:7.4rem}
.plans-mock .phone{bottom:-2.9rem}
.plans-mock .gcard{bottom:-2.1rem}
@media(max-width:700px){
 .plans-mock .win .bd{padding-bottom:5.2rem}
 .plans-mock .phone{bottom:-1.7rem}
}
@media(max-width:700px){
 .plans-mock{margin-top:1.5rem}
 .plans-mock .win .bd{padding-bottom:7rem}
 .plans-mock .phone{bottom:-1.3rem}
}
@media(max-width:700px){.hero-top .plans-mock{margin-top:2.1rem}}
/* the clickable plans stay perfectly still, so they are easy to tap */
.plans-mock .phone,.plans-mock .gcard,.plans-mock .chip,.plans-mock .win{animation:none!important}

/* =====================================================================
   Hero mockup: extra clickable pieces (SEO, WhatsApp, brand, email) + sparkles
   ===================================================================== */
.pm-nav{display:flex;align-items:center;gap:.9rem;padding-bottom:.6rem;border-bottom:2px solid #dbe4fb;font-size:.66rem;font-weight:600;color:var(--navy)}
.pm-nav b{margin-right:auto;font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:.8rem;text-transform:uppercase}
.fx{position:absolute;z-index:6;display:flex;align-items:center;gap:.55rem;padding:.5rem .8rem;border:3px solid var(--navy);border-radius:.95rem;background:#fff;color:var(--navy);text-decoration:none;box-shadow:4px 4px 0 var(--navy);transition:transform .25s var(--ease),box-shadow .25s}
.fx:hover,.fx:focus-visible{transform:translateY(-4px);box-shadow:6px 9px 0 var(--navy)}
.fx b{display:block;font-size:.8rem;line-height:1.15;font-weight:700}
.fx small{display:block;font-size:.68rem;font-weight:600;opacity:.75;line-height:1.2}
.fx-seo{top:-3.1rem;left:36%}
.fx-seo .bars{display:flex;align-items:flex-end;gap:.18rem;width:1.8rem;height:1.5rem}
.fx-seo .bars i{flex:1;background:var(--teal);border:2px solid var(--navy);border-radius:.15rem}
.fx-seo .bars i:nth-child(1){height:35%}.fx-seo .bars i:nth-child(2){height:55%;background:var(--pink)}.fx-seo .bars i:nth-child(3){height:78%}.fx-seo .bars i:nth-child(4){height:100%;background:var(--blue)}
.fx-wa{left:-2.6rem;top:46%;background:#fff}
.fx-wa .wi{display:grid;place-items:center;flex:none;width:2rem;height:2rem;border-radius:50%;background:#25d366;border:2px solid var(--navy)}
.fx-wa .wi svg{width:1rem;height:1rem;fill:none;stroke:#fff;stroke-width:2.4;stroke-linejoin:round}
.fx-wa::after{content:"";position:absolute;left:1.1rem;bottom:-.62rem;width:.9rem;height:.9rem;background:#fff;border-right:3px solid var(--navy);border-bottom:3px solid var(--navy);transform:rotate(45deg) skew(8deg,8deg)}
.fx-mail{right:-1.3rem;top:2.7rem;padding:.4rem .7rem}
.fx-mail .mi{display:grid;place-items:center;flex:none;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--pink);border:2px solid var(--navy)}
.fx-mail .mi svg{width:.9rem;height:.9rem;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fx-mail b{font-size:.72rem}
.fx-brand{left:33%;bottom:.9rem;flex-direction:column;align-items:flex-start;gap:.15rem;z-index:3;padding:.5rem .65rem .45rem;box-shadow:3px 3px 0 var(--navy)}
.fx-brand .sw{display:flex;gap:.2rem;margin-bottom:.15rem}.fx-brand .sw i{width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid var(--navy)}
.spk{position:absolute;z-index:1;width:1.3rem;height:1.3rem;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:.9;pointer-events:none}
.spk.s1{top:-1rem;left:24%}.spk.s2{right:-1.8rem;bottom:34%;background:var(--teal);width:1.7rem;height:1.7rem}.spk.s3{left:-1.4rem;top:18%;background:var(--pink);width:1.1rem;height:1.1rem}
@media(max-width:1180px){.fx-wa{left:-1.4rem}.fx-mail{right:-.6rem}.fx-seo{left:30%}}
@media(max-width:900px){.pm-nav span{display:none}}
@media(max-width:700px){
 .fx-wa,.fx-mail,.fx-seo,.fx-brand,.spk,.pm-nav{display:none}
}
/* hero mockup: tidy positions so nothing covers a plan or another card */
.plans-mock .chip.b{top:-2.1rem;right:-.5rem}
.plans-mock .chip.a{left:.4rem;top:-1.2rem}
.fx-seo{left:42%;top:-3.5rem}
.fx-mail{top:1.15rem;right:-1.5rem}
.fx-wa{top:58%;left:-2.7rem}
.fx-brand{left:45%;bottom:1.1rem;width:8.6rem}
.plans-mock .gcard{width:43%}
.pm-nav span{display:none}
.fx-wa{top:64%}
.fx-brand{left:39%;width:7.8rem}
@media(max-width:1180px){.fx-seo{left:26%}.fx-brand{left:38%;width:7.4rem}}
@media(max-width:1060px){.fx-brand,.fx-mail{display:none}}
.fx-brand{left:42%}
.plans-mock .gcard{width:41%}
@media(max-width:1180px){.fx-seo{left:31%}.fx-brand{left:40%}}
@media(max-width:1060px){.fx-seo{display:none}}
@media(max-width:1250px){.fx-brand{display:none}}
@media(max-width:1100px){.fx-seo{display:none}}

/* =====================================================================
   Phones: no hero graphic, the services stack as cards under the buttons
   ===================================================================== */
@media(max-width:700px){
 .hero .plans-mock{display:none!important}
 .hero-top{gap:0}
 .hero{padding-bottom:2rem}
 .hero .pick{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:.75rem;overflow:visible;margin:1.7rem 0 0;padding:0;scroll-snap-type:none}
 .hero .pick>*{flex:none;width:auto;display:flex;align-items:center;gap:.9rem;padding:.8rem .95rem;min-height:4.4rem}
 .hero .pick .ico{width:2.5rem;height:2.5rem}
 .hero .pick .ptx{display:block;flex:1;min-width:0}
 .hero .pick .ptx b{font-size:1rem;white-space:normal;line-height:1.25}
 .hero .pick .ptx span{display:block;font-size:.84rem;margin-top:.1rem}
 .hero .pick .go{display:grid}
}

/* =====================================================================
   Plan and add-on pages: information on the left, mockups on the right
   ===================================================================== */
.mkrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:3rem;align-items:start}
.mk-info .sh{margin-bottom:1.4rem}
.svc-stack{display:grid;gap:1.2rem}
.mk-side{position:sticky;top:7rem;align-self:start}
.mk-lab{display:inline-block;margin-bottom:1rem;padding:.2rem .9rem;background:var(--teal);color:var(--navy);border:3px solid var(--navy);font-weight:700;font-size:.85rem;transform:rotate(-2deg)}
.mk-side .mkg{max-width:none;margin:0}
.mk-side .mk-tabs{justify-content:flex-start;margin-bottom:1.1rem}
.mk-side .mk-stage{min-height:22rem;padding:2.2rem 1.8rem}
.mk-side .mk-panel figcaption{text-align:left;margin-top:1.1rem}
.mk-note{margin:1.1rem 0 0;font-size:.92rem;line-height:1.55;opacity:.8}
@media(max-width:1000px){
 .mkrow{grid-template-columns:minmax(0,1fr);gap:2rem}
 .mk-side{position:static;order:-1}
 .mk-side .mk-panel figcaption{text-align:center}
}
@media(max-width:900px){.mk-side .mk-stage{min-height:15rem;padding:1.2rem}}

/* =====================================================================
   Included / not included as dropdowns (closed until you open them)
   ===================================================================== */
.ddc{background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1.2rem;box-shadow:5px 5px 0 var(--teal);transition:box-shadow .25s,transform .2s var(--ease)}
.ddc.no{box-shadow:5px 5px 0 var(--pink);background:#fff7f9}
.ddc:hover{transform:translate(-2px,-2px)}
.ddc[open]{box-shadow:7px 7px 0 var(--navy)}
.ddc>summary{display:flex;align-items:center;gap:.9rem;padding:1.05rem 1.2rem;cursor:pointer;list-style:none}
.ddc>summary::-webkit-details-marker{display:none}
.ddc>summary .t3{margin:0;flex:1;font-size:1.05rem}
.ddc>summary em{font-style:normal;font-weight:700;font-size:.82rem;padding:.2rem .7rem;border:2px solid var(--navy);border-radius:99px;background:var(--soft)}
.ddc.no>summary em{background:#fde3ea}
.ddc>summary::after{content:"+";display:grid;place-items:center;flex:none;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--pink);color:#fff;border:2px solid var(--navy);font-weight:700;font-size:1.2rem;line-height:1;transition:transform .3s var(--ease)}
.ddc[open]>summary::after{content:"\2212";transform:rotate(180deg)}
.ddc-b{padding:0 1.2rem 1.2rem;border-top:2px solid #dbe4fb;padding-top:1rem;animation:ddIn .35s var(--ease)}
.ddc-b .sub3{margin:1.1rem 0 .4rem}
@keyframes ddIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ddc-b{animation:none}}

/* =====================================================================
   Case studies: information on the left, website mockups on the right
   ===================================================================== */
.csrow{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.9fr);gap:3rem;align-items:start}
.cs-left{min-width:0}
.cs-left .cs-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-right{position:sticky;top:7rem;align-self:start;min-width:0}
.cs-right .pvs{grid-template-columns:minmax(0,1fr) 9.5rem;gap:1rem;max-width:none;margin:0}
.cs-right .pvs .pvp{max-width:9.5rem}
.cs-blk{margin-top:2.6rem}
.cs-bh{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.cs-bh .cs-n{margin:0;flex:none}
.cs-bh h2{margin:0}
.cs-blk .cs-b p{font-size:1.06rem;line-height:1.8;max-width:none}
.cs-blk .cs-b>.cs-lead{font-size:1.2rem;font-weight:600;line-height:1.65;margin-bottom:1.1rem}
.cs-blk .cs-res .ck.two{grid-template-columns:minmax(0,1fr)}
@media(max-width:1000px){
 .csrow{grid-template-columns:minmax(0,1fr);gap:2rem}
 .cs-right{position:static;order:-1}
 }
@media(max-width:700px){
 .cs-left .cs-facts{grid-template-columns:minmax(0,1fr)}
 .cs-right .pvs{grid-template-columns:minmax(0,1fr)}
 .cs-right .pvs .pvp{margin:0 auto;max-width:11rem}
 .cs-blk{margin-top:2rem}
}

/* Case studies: only the "project details + website preview" section is split */
.csone{align-items:center}
.csone .cs-right{position:static}
.csone .cs-left .sh{margin-bottom:1.3rem}
.csone .cs-svc{margin-top:1.4rem;align-items:flex-start;flex-direction:column;gap:.7rem}
@media(max-width:1000px){.csone .cs-right{order:0}}

/* =====================================================================
   Case studies: the website mockup is its own section.
   A normal desktop screen with the iPhone laid over its right side.
   ===================================================================== */
.cs-facts4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media(max-width:900px){.cs-facts4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.cs-facts4{grid-template-columns:minmax(0,1fr)}}
.csone{align-items:center;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3.2rem}
.csone .cs-left{padding-right:.5rem}
.csone .cs-left .ck{margin:0}
.csone .cs-right{position:static;padding:0 2.6rem 3.6rem 0}
.devs{position:relative}
.devs .dsk{container-type:inline-size;position:relative;background:#fff;border:4px solid var(--navy);border-radius:1.1rem;box-shadow:.7rem .7rem 0 var(--pink);overflow:hidden}
.devs .dsk-bar{display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;background:var(--teal);border-bottom:4px solid var(--navy)}
.devs .dsk-bar i{width:.65rem;height:.65rem;border-radius:50%;background:var(--navy)}
.devs .dsk-bar span{margin-left:.7rem;flex:1;max-width:60%;padding:.12rem .8rem;border-radius:99px;background:#fff;color:var(--navy);font-size:.72rem;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.devs .dsk .view{--ph:calc(100cqw * .62);height:var(--ph);overflow:hidden;position:relative}
.devs .iph{position:absolute;right:0;bottom:0;width:26%;aspect-ratio:9/19;container-type:inline-size;display:block;padding:.42rem;background:#0b1020;border:3px solid #0b1020;border-radius:2.1rem;box-shadow:.5rem .5rem 0 var(--teal),0 0 0 2px #2c3552 inset;overflow:hidden;z-index:3}
.devs .iph .view{--ph:calc(100cqw * 2.02);height:100%;border-radius:1.7rem;overflow:hidden;background:#fff;position:relative}
.devs .iph .scroll{animation:pvs 14s ease-in-out infinite alternate}
.devs .iph .scroll img{display:block;width:100%}
.iph-isl{position:absolute;left:50%;top:.62rem;z-index:4;width:34%;height:.9rem;transform:translateX(-50%);border-radius:99px;background:#0b1020}
.devs .dsk .scroll{animation:pvs 60s ease-in-out infinite alternate}
.devs:hover .scroll{animation-play-state:paused}
@media(max-width:1000px){
 .csone{grid-template-columns:minmax(0,1fr);gap:2rem}
 .csone .cs-right{padding:0 1.6rem 3rem 0}
}
@media(max-width:600px){.devs .iph{width:30%;border-radius:1.5rem;padding:.3rem}.devs .iph .view{border-radius:1.2rem}.iph-isl{top:.45rem;height:.6rem}.csone .cs-right{padding:0 1rem 2.4rem 0}}
.devs .iph{right:-1.7rem;bottom:-2.6rem;width:27%}
.csone .cs-right{padding:0 2.2rem 3.4rem 0}
@media(max-width:1000px){.csone .cs-right{padding:0 1.8rem 3.2rem 0}}
@media(max-width:600px){.devs .iph{right:-.9rem;bottom:-1.6rem;width:30%}.csone .cs-right{padding:0 1rem 2.4rem 0}}

/* Website previews only ever scroll down the page (never backwards), and the phone screen is sized from its own width */
@keyframes pvs2{to{transform:translateY(min(0px,calc(-100% + var(--ph))))}}
.devs .dsk .scroll{animation-name:pvs2}
.devs .iph .scroll{animation-name:pvs2}
.devs .iph{aspect-ratio:auto}
.devs .iph .view{aspect-ratio:9/19.5;height:auto;--ph:calc(100cqw * 2.1667)}
.devs .iph .scroll img{width:100%;min-height:var(--ph);object-fit:cover;object-position:top}
.devs .dsk .scroll img{width:100%;min-height:var(--ph);object-fit:cover;object-position:top}
/* screens measure themselves, so the scroll distance always matches what you can see */
.devs .dsk,.devs .iph{container-type:normal}
.devs .dsk .view{aspect-ratio:1.613;height:auto;container-type:size;--ph:100cqh}
.devs .iph .view{aspect-ratio:9/19.5;height:auto;container-type:size;--ph:100cqh}

/* =====================================================================
   Round: hero spacing and graphic in narrower previews, buttons in section
   headers on desktop, FAQ card after the questions on small screens,
   WhatsApp pop-up send button
   ===================================================================== */
/* ---- hero in narrower windows (for example the preview with the chat open) ---- */
@media(min-width:761px) and (max-width:1299px){
 .hero{min-height:0;padding-top:3.2rem;padding-bottom:3.4rem;display:block}
 .hero-top{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);column-gap:2.2rem;gap:0 2.2rem;align-items:center}
 .hero-top .plans-mock{justify-self:center;width:100%;max-width:38rem;margin:.4rem 0 0;padding:0 1.2rem 3rem 0}
 .hero .row{flex-direction:row;align-items:center;gap:.7rem}
 .hero .row .btn{width:auto}
 .hero .lead{margin:1.1rem 0 1.6rem}
 .pick{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:2.6rem;gap:.8rem}
 .pk{padding:.7rem .8rem;gap:.6rem}.pk .go{display:none}.pk .ptx b{font-size:.92rem}.pk .ptx span{font-size:.8rem}
}
@media(min-width:761px) and (max-width:900px){
 .fx-wa,.plans-mock .gcard{display:none}
 .hero .t1{font-size:clamp(2.1rem,5.2vw,2.7rem)}
 .plans-mock .phone{width:38%}
}
@media(min-width:701px) and (max-width:760px){
 .hero-top .plans-mock{max-width:32rem;width:100%;padding:0 1.2rem 3rem 0}
}
/* ---- section buttons: in the header row on desktop, under the content on small screens ---- */
@media(min-width:761px){.sec-cta.mob-only{display:none}}
@media(max-width:760px){#work .sh-btns,#templates .sh-btns{display:none}#work .sh-row,#templates .sh-row{margin-bottom:1.4rem}}
/* ---- FAQ: the "Still stuck?" card comes after the questions when the layout stacks ---- */
@media(max-width:900px){
 .fqx{gap:1rem}
 .fqx-side{display:contents}
 .fqx-side>.eyebrow{order:1}.fqx-side>h2{order:2;margin-bottom:0}.fqx-side>p{order:3}.fqx-s{order:4}.fqx-cats{order:5}
 .fqx-main{order:6;margin-top:.4rem}
 .fqx-help{order:7;margin-top:.6rem}
}
/* ---- WhatsApp pop-up: send button (only Start chat opens WhatsApp) ---- */
button.wad-send{border:0;cursor:pointer;font:inherit}
.wad .wad-go.nudge{animation:wadNudge .9s var(--ease)}
@keyframes wadNudge{0%,100%{transform:none;box-shadow:0 2px 0 #1da851}30%{transform:translateY(-4px) scale(1.03);box-shadow:0 8px 0 #1da851,0 0 0 6px rgba(37,211,102,.35)}60%{transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.wad .wad-go.nudge{animation:none}}
@media(min-width:761px) and (max-width:900px){
 .sh-row{flex-direction:row!important;align-items:flex-end!important;justify-content:space-between;gap:1.2rem}
 .sh-row .sh-l{flex:1;min-width:0}
 .sh-btns{width:auto!important;flex:none;display:flex;gap:.6rem}
 .sh-btns .btn{flex:none!important;width:auto!important}
}
/* header-row buttons line up with the section title */
@media(min-width:761px){
 .sh-row{flex-wrap:nowrap!important;align-items:flex-start!important;gap:1.6rem}
 .sh-row .sh-l{flex:1 1 16rem!important;min-width:0}
 .sh-row .sh-btns{flex:none;width:auto!important;display:flex;gap:.7rem;margin-top:2.55rem;align-self:flex-start}
 .sh-row .sh-btns .btn{flex:none!important;width:auto!important}
}
@media(max-width:900px){.fx-wa,.plans-mock .gcard{display:none}}

/* =====================================================================
   Template pages
   ===================================================================== */
.tplbig .tm{width:100%;border:0;box-shadow:none;border-radius:.4rem;aspect-ratio:300/190;overflow:hidden;transform:none!important}
.tplbig .tm svg{display:block;width:100%;height:100%}
.mkmap2{display:flex;align-items:center;gap:.7rem;padding:.42rem 0;border-bottom:1px dashed #cfd9f5}
.mkmap2:last-child{border-bottom:0}
.mkmap2 span{flex:none;display:grid;place-items:center;width:1.55rem;height:1.55rem;border:2px solid var(--navy);border-radius:.45rem;color:#fff;font-weight:700;font-size:.74rem}
.mkmap2 b{font-size:.86rem;color:var(--navy)}
.gfg{gap:1.1rem}
.gf{padding:1.3rem 1.3rem 1.2rem}
.gf h3{margin:0 0 .45rem;font-size:1.02rem}.gf p{margin:0;line-height:1.6}
.gf-best{display:grid;gap:.2rem;margin-top:1.3rem;padding:1.1rem 1.3rem;background:var(--soft);border:3px solid var(--navy);border-radius:1.1rem;box-shadow:5px 5px 0 var(--teal)}
.gf-best span{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.7}
.gf-best b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.1rem;text-transform:uppercase}
.gf-best p{margin:0}.gf-best a{font-weight:700;color:var(--blue)}
.tgrid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.tgrid3 .tmc{width:auto}
@media(max-width:900px){.tgrid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.tgrid3{grid-template-columns:minmax(0,1fr)}}
.tcard .row{gap:.6rem;flex-wrap:wrap}

/* =====================================================================
   "Not included" items: tap the info button to see why and where to get it
   ===================================================================== */
.xlist{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.xlist .xi{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;padding:.38rem 0 .38rem 1.7rem;margin:0;border-radius:.6rem}
.xlist .xi::before{content:"\00D7";position:absolute;left:0;top:.5rem;display:grid;place-items:center;width:1.2rem;height:1.2rem;border-radius:50%;background:#fde3ea;color:#c0264d;font-weight:700;font-size:.9rem;line-height:1}
.xt{flex:1 1 auto;min-width:0;line-height:1.45}
.xb{flex:none;display:grid;place-items:center;width:1.65rem;height:1.65rem;padding:0;border:2px solid var(--navy);border-radius:50%;background:#fff;color:var(--navy);cursor:pointer;font-family:inherit;transition:background .2s,color .2s,transform .2s var(--ease)}
.xb i{font-style:italic;font-weight:700;font-size:.85rem;line-height:1;font-family:Georgia,'Times New Roman',serif}
.xb:hover,.xb:focus-visible{background:var(--teal);transform:scale(1.1)}
.xb[aria-expanded=true]{background:var(--navy);color:#fff}
.xlist .xi.on{background:#fff1f5}
.xp{flex:1 1 100%;margin:.15rem .2rem .45rem -1.7rem;padding:.8rem .95rem .9rem;background:#fff;border:2px solid var(--navy);border-radius:.9rem;box-shadow:3px 3px 0 var(--pink);animation:xpIn .28s var(--ease)}
.xp[hidden]{display:none}
.xp p{margin:0 0 .6rem;line-height:1.55;font-size:.95rem;color:var(--navy)}
.xp p b{display:block;margin-bottom:.15rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;opacity:.65}
.xls{display:grid;gap:.45rem}
.xl{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.5rem .7rem;border:2px solid var(--navy);border-radius:.7rem;background:var(--soft);color:var(--navy);text-decoration:none;font-weight:700;font-size:.9rem;transition:background .2s,transform .2s var(--ease)}
.xl small{flex:none;padding:.08rem .5rem;border-radius:99px;background:var(--teal);border:2px solid var(--navy);font-size:.68rem;font-weight:700}
.xl span{flex:1 1 8rem;min-width:0}
.xl i{font-style:normal;display:grid;place-items:center;flex:none;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--navy);color:#fff;transition:transform .25s var(--ease)}
.xl:hover{background:#e3eaff;transform:translateX(3px)}.xl:hover i{transform:translateX(3px)}
.xl.ask{background:#fff}.xl.ask small{background:#fbd5e0}
@keyframes xpIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.xp{animation:none}}
.pl .xlist .xp{margin-left:-1.7rem}

/* =====================================================================
   Business bundles: Launch, Grow, Pro
   ===================================================================== */
.bn .tag{font-weight:600;font-style:italic}
.bn-pr{display:flex;align-items:flex-end;gap:.7rem;flex-wrap:wrap;margin:.4rem 0 .2rem}
.bn-up b,.bn-mo b{display:block;font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;line-height:1}
.bn-up b{font-size:2.3rem;color:var(--navy)}.bn-mo b{font-size:1.6rem;color:var(--pink)}
.bn-up small,.bn-mo small{display:block;font-size:.8rem;font-weight:700;opacity:.75;margin-top:.15rem}
.bn-plus{font-family:'Bowlby One','Arial Black',sans-serif;font-size:1.4rem;padding-bottom:1.1rem;opacity:.6}
.bn-for{margin:.5rem 0 .3rem;font-size:.95rem;line-height:1.5}
.bng{align-items:stretch}
.bng .pl{display:flex;flex-direction:column}.bng .pl .row{margin-top:auto;padding-top:1rem}
.bn-p,.bn-p2{display:block;font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;line-height:1.1}
.bn-p{font-size:2.2rem}.bn-p2{font-size:1.5rem;color:var(--pink);margin-top:.25rem}
.bn-p small,.bn-p2 small{font-family:'Outfit',sans-serif;font-size:.85rem;font-weight:700;color:var(--navy);opacity:.75}
/* simple path */
.bnpg{gap:1rem}
.bnp{position:relative;display:grid;gap:.25rem;padding:1.3rem 1.4rem 1.2rem;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1.2rem;text-decoration:none;box-shadow:5px 5px 0 var(--teal);transition:transform .3s var(--ease),box-shadow .3s}
.bnp:nth-child(2){box-shadow:5px 5px 0 var(--pink)}.bnp:nth-child(3){box-shadow:5px 5px 0 var(--blue)}
.bnp:hover{transform:translate(-3px,-4px);box-shadow:9px 10px 0 var(--navy)}
.bnp small{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.bnp b{margin:.1rem 0}.bnp span{font-style:italic;font-weight:600}.bnp em{font-style:normal;font-weight:700;color:var(--pink)}
.bnp i{position:absolute;right:1.1rem;top:1.1rem;font-style:normal;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--navy);color:#fff;transition:transform .25s var(--ease)}
.bnp:hover i{transform:translateX(4px);background:var(--pink)}
/* comparison table */
.bnt-w{overflow-x:auto;border:3px solid var(--navy);border-radius:1.2rem;background:#fff;box-shadow:6px 6px 0 var(--teal);overscroll-behavior-x:contain}
.bnt{width:100%;min-width:44rem;border-collapse:collapse;color:var(--navy)}
.bnt th,.bnt td{padding:.85rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid #dbe4fb;line-height:1.5}
.bnt thead th{background:var(--navy);color:#fff;font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;text-transform:uppercase;font-size:.95rem;border-bottom:0}
.bnt thead th a{color:#fff;text-decoration:none}.bnt thead th a:hover{color:var(--teal)}
.bnt tbody th{width:15rem;font-weight:700;background:#f4f7ff;position:sticky;left:0}
.bnt tbody tr:last-child th,.bnt tbody tr:last-child td{border-bottom:0}
.bnt td b{font-size:1.15rem}.bnt .sv{color:#0a8f84}
.bnt tbody tr:nth-child(odd) td{background:#fbfcff}
/* first-year cards */
.bny{gap:1.2rem}
.bny-c{display:grid;gap:.5rem;padding:1.4rem}
.bny-c h3{margin:0 0 .3rem}
.bny-r{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.5rem 0;border-bottom:1px solid #dbe4fb}
.bny-r b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.25rem}
.bny-s{margin-top:.4rem;padding:.6rem .9rem;background:var(--teal);color:var(--navy);border:3px solid var(--navy);border-radius:.9rem;font-weight:700;text-align:center}
.bny-c small{opacity:.7;text-align:center}
.svc-notes-l{display:grid;gap:.9rem;margin-top:1.2rem}
/* what you save (on each bundle page) */
.bnv{gap:1.3rem}
.bnv-c{padding:1.4rem}
.bnv-c h3{margin:0 0 .8rem}
.bnv-l{list-style:none;margin:0 0 .8rem;padding:0}
.bnv-l li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px dashed #cfd9f5}
.bnv-l li b{white-space:nowrap}
.bnv-t{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;font-weight:600}
.bnv-t.hi{font-weight:700;font-size:1.1rem;color:var(--navy)}.bnv-t.hi b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400}
.bnv-t:not(.hi) b{text-decoration:line-through;opacity:.6}
.bnv-s{margin-top:.5rem;padding:.6rem .9rem;background:var(--teal);border:3px solid var(--navy);border-radius:.9rem;font-weight:700;text-align:center}
.bnv-y{display:flex;align-items:center;justify-content:center;gap:1.4rem;flex-wrap:wrap;margin-top:1.5rem;padding:1.3rem 1.6rem;background:var(--navy);color:#fff;border-radius:1.3rem;box-shadow:6px 6px 0 var(--pink)}
.bnv-y small{display:block;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.bnv-y b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.9rem}
.bnv-y>span{font-size:1.6rem;color:var(--teal)}
.bnv-y .sv{padding:.6rem 1.2rem;background:var(--teal);color:var(--navy);border-radius:.9rem;border:3px solid #fff}.bnv-y .sv small{opacity:.8}
/* other bundles + plan page banner */
.bno{gap:1rem}
.bnl{display:grid;gap:.2rem;padding:1.2rem 1.3rem;text-decoration:none;color:var(--navy)}
.bnl b{margin:0}.bnl span{font-weight:700;color:var(--pink)}.bnl small{opacity:.75}
.bn-promo{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding:1.5rem 1.7rem;background:var(--soft);border:3px solid var(--navy);border-radius:1.3rem;box-shadow:6px 6px 0 var(--pink)}
.bn-promo>div{flex:1 1 24rem;min-width:0}
.bn-promo span{display:inline-block;margin-bottom:.4rem;padding:.12rem .8rem;background:var(--pink);color:#fff;border:2px solid var(--navy);font-weight:700;font-size:.78rem;transform:rotate(-2deg)}
.bn-promo h3{margin:0 0 .4rem;font-size:1.1rem}.bn-promo p{margin:0;line-height:1.6}
@media(max-width:700px){.bn-promo .btn{width:100%;justify-content:center}.bnv-y{gap:.8rem}.bnv-y b{font-size:1.5rem}.bn-up b{font-size:2rem}}

/* pricing tabs: one single row (scrolls sideways when the window is narrower) */
#pricing .tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;scrollbar-width:none;padding-bottom:.5rem;gap:.4rem}
#pricing .tabs::-webkit-scrollbar{display:none}
#pricing .tabs button{flex:none;white-space:nowrap}
@media(min-width:1300px){#pricing .tabs button{padding-left:.65rem;padding-right:.65rem;font-size:.86rem}}

/* =====================================================================
   The SBS Scheme
   ===================================================================== */
.sbs-b{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:2.4rem;align-items:center;padding:2.3rem 2.5rem;background:var(--navy);color:#fff;border:3px solid var(--navy);border-radius:1.6rem;box-shadow:8px 8px 0 var(--pink)}
.sbs-b::before{content:"";position:absolute;right:-5rem;top:-6rem;width:18rem;height:18rem;border-radius:50%;background:rgba(45,208,197,.18)}
.sbs-b::after{content:"";position:absolute;left:-4rem;bottom:-6rem;width:14rem;height:14rem;border-radius:50%;background:rgba(233,79,122,.2)}
.sbs-l,.sbs-r{position:relative;z-index:2;min-width:0}
.sbs-l h2{color:#fff;margin:.4rem 0 .7rem}
.sbs-l p{margin:0 0 1.2rem;font-size:1.08rem;line-height:1.65;opacity:.95}
.sbs-pr{display:flex;align-items:flex-end;gap:1rem;margin:0 0 1.5rem}
.sbs-pr b{display:block;font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:3.1rem;line-height:1;color:#fff}
.sbs-pr>div:last-child b{color:var(--teal);font-size:2.3rem}
.sbs-pr small{display:block;margin-top:.2rem;font-weight:700;opacity:.8}
.sbs-pr>span{font-family:'Bowlby One','Arial Black',sans-serif;font-size:1.6rem;padding-bottom:1.1rem;opacity:.7}
.sbs-l .row{gap:.7rem;flex-wrap:wrap}
.sbs-r{display:grid;gap:1rem;padding:1.4rem;background:#fff;color:var(--navy);border:3px solid #fff;border-radius:1.3rem;box-shadow:5px 5px 0 var(--teal)}
.sbs-save{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 1rem;background:var(--teal);border:3px solid var(--navy);border-radius:.95rem}
.sbs-save small{font-weight:700;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase}
.sbs-save b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.7rem;line-height:1}
.sbs-ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem 1rem}
.sbs-ul li{position:relative;padding-left:1.7rem;font-weight:600;line-height:1.35}
.sbs-ul li::before{content:"\2713";position:absolute;left:0;top:.05rem;display:grid;place-items:center;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--teal);border:2px solid var(--navy);font-size:.68rem;font-weight:700}
.sbs-ex{display:flex;flex-wrap:wrap;gap:.4rem;padding-top:.9rem;border-top:2px dashed #cfd9f5}
.sbs-ex b{flex:1 1 100%;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.sbs-ex span{padding:.2rem .7rem;border:2px solid var(--navy);border-radius:99px;background:var(--soft);font-size:.8rem;font-weight:700}
/* on the SBS page */
.sbs-pay{display:flex;align-items:flex-end;gap:.9rem;flex-wrap:wrap}
.sbs-pay b{display:block;font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:2.6rem;line-height:1;color:var(--navy)}
.sbs-pay div:last-child b{color:var(--pink)}
.sbs-pay small{display:block;font-weight:700;opacity:.75;margin-top:.15rem}
.sbs-pay>span{padding-bottom:1rem;font-weight:700;opacity:.6}
.sbs-pay.norm b{color:var(--navy);opacity:.55;text-decoration:line-through}
.sbs-sv{display:grid;gap:1rem;margin-top:1.4rem}
.sbs-sv>div{padding:1.1rem 1.3rem;background:#fff;border:3px solid var(--navy);border-radius:1.1rem;box-shadow:4px 4px 0 var(--teal);text-align:center}
.sbs-sv small{display:block;font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:.7}
.sbs-sv b{display:block;margin-top:.2rem;font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.7rem;color:var(--navy)}
.sbs-sv .hi{background:var(--navy);color:#fff;box-shadow:4px 4px 0 var(--pink)}.sbs-sv .hi b{color:var(--teal);font-size:2.1rem}
.sbs-xg{gap:1.1rem}
.sbs-x{display:grid;gap:.4rem;align-content:start;padding:1.3rem}
.sbs-x b{margin:0;font-size:1rem;line-height:1.25}
.sbs-xp{display:inline-block;justify-self:start;padding:.2rem .85rem;border-radius:99px;background:var(--navy);color:#fff;font-weight:700;font-size:.95rem}
.sbs-x p{margin:0;line-height:1.55;opacity:.85}
.sbs-why{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding:1.8rem 2rem;background:var(--soft);border:3px solid var(--navy);border-radius:1.4rem;box-shadow:6px 6px 0 var(--teal)}
.sbs-why ul{list-style:none;margin:.7rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem}
.sbs-why li{font-family:'Bowlby One','Arial Black',sans-serif;font-size:1.15rem;text-transform:uppercase;color:var(--navy)}
.sbs-why p{margin:0;max-width:24rem;font-weight:600;line-height:1.6}
@media(max-width:1000px){.sbs-b{grid-template-columns:minmax(0,1fr);gap:1.8rem;padding:1.8rem 1.6rem}}
@media(max-width:600px){.sbs-ul{grid-template-columns:minmax(0,1fr)}.sbs-pr b{font-size:2.5rem}.sbs-pr>div:last-child b{font-size:1.9rem}.sbs-l .row .btn{width:100%;justify-content:center}.sbs-b{box-shadow:5px 5px 0 var(--pink)}.sbs-why{padding:1.3rem}}

/* =====================================================================
   About our rebrand (home): information on the left, cards on the right
   ===================================================================== */
.rbn{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:3.2rem;align-items:center}
.rbn-left{display:grid;gap:1.8rem;min-width:0}
.rbn-h{max-width:none}
.rbn-w{min-width:0}
.rbn-w h3{margin:0 0 1.1rem}
.rbn-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.rbn-c{padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.1rem}
.rbn-c h4{margin:.9rem 0 .5rem}
.rbn-f{flex-direction:column;align-items:flex-start;gap:1rem;padding:1.5rem 1.6rem;margin:0}
.rbn-f .btn{align-self:flex-start}
@media(max-width:1000px){
 .rbn{grid-template-columns:minmax(0,1fr);gap:2.2rem}
 .rbn-left{gap:1.5rem}
}
@media(max-width:600px){
 .rbn-g{grid-template-columns:minmax(0,1fr)}
 .rbn-f{padding:1.3rem}.rbn-f .btn{width:100%;justify-content:center;align-self:stretch}
}

/* FAQ page: search, many topics */
.fqp-s{max-width:34rem;margin:0 0 1.2rem}
.fqp-n{margin:.9rem 0 1rem;font-weight:700;opacity:.75}
.c.nw.fscope .tabs{flex-wrap:wrap;overflow:visible}
@media(max-width:700px){.c.nw.fscope .tabs{flex-wrap:nowrap;overflow-x:auto}}

/* =====================================================================
   OUR PARTNERS: an animated showcase
   ===================================================================== */
.pt-hero{position:relative;overflow:hidden}
.pt-orb{position:absolute;inset:0;pointer-events:none}
.pt-orb i{position:absolute;border-radius:50%;animation:ptFloat 14s ease-in-out infinite}
.po1{width:24rem;height:24rem;left:-7rem;top:-6rem;background:rgba(45,208,197,.22)}
.po2{width:17rem;height:17rem;right:22%;bottom:-7rem;background:rgba(233,79,122,.3);animation-delay:-5s!important}
.po3{width:10rem;height:10rem;left:42%;top:2rem;background:rgba(255,255,255,.12);animation-delay:-9s!important}
@keyframes ptFloat{50%{transform:translate(2.2rem,-1.6rem) scale(1.1)}}
.pt-hero .phg{position:relative;z-index:2;align-items:center}
.pt-h1 span{display:block}
.pt-h1 em{font-style:normal;background:linear-gradient(90deg,#fff 0%,var(--teal) 30%,#ffd1df 60%,#fff 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:ptShine 6s linear infinite;-webkit-text-stroke:0;text-shadow:none}
@keyframes ptShine{to{background-position:-300% 0}}
/* orbit */
.orbit{--u:1;position:relative;justify-self:end;width:min(100%,37rem);aspect-ratio:1;display:grid;place-items:center;transform:translate3d(calc(var(--mx,0) * 18px),calc(var(--my,0) * 18px),0);transition:transform .25s ease-out}
.o-core{position:absolute;z-index:4;display:grid;place-items:center;width:8.2rem;height:8.2rem;border-radius:50%;background:var(--navy);color:#fff;border:4px solid #fff;animation:ptPulse 3.2s ease-out infinite}
.o-core b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.05rem;letter-spacing:.02em}
.o-core i{position:absolute;inset:-.7rem;border:3px dashed rgba(255,255,255,.6);border-radius:50%;animation:ptSpin 18s linear infinite}
.o-core i+i{inset:-1.5rem;border-color:rgba(45,208,197,.8);animation-duration:28s;animation-direction:reverse}
@keyframes ptPulse{0%{box-shadow:0 0 0 0 rgba(233,79,122,.6)}75%,100%{box-shadow:0 0 0 2.4rem rgba(233,79,122,0)}}
@keyframes ptSpin{to{transform:rotate(360deg)}}
.o-ring{position:absolute;left:50%;top:50%;width:0;height:0;animation:ptSpin var(--dur) linear infinite}
.o-ring.r2{animation-direction:reverse}
.o-track{position:absolute;left:calc(var(--r) * var(--u) * -1);top:calc(var(--r) * var(--u) * -1);width:calc(var(--r) * var(--u) * 2);height:calc(var(--r) * var(--u) * 2);border:2px dashed rgba(255,255,255,.32);border-radius:50%}
.o-pos{position:absolute;left:0;top:0;transform:rotate(var(--a)) translateX(calc(var(--r) * var(--u)))}
.o-chip{position:absolute;left:0;top:0;display:block;padding:.38rem .85rem;background:var(--c);color:var(--navy);border:3px solid var(--navy);border-radius:99px;font-weight:700;font-size:.82rem;white-space:nowrap;box-shadow:3px 3px 0 var(--navy);transform:translate(-50%,-50%) rotate(calc(var(--a) * -1));animation:ptCtr var(--dur) linear infinite}
.o-ring.r2 .o-chip{animation-direction:reverse}
@keyframes ptCtr{from{transform:translate(-50%,-50%) rotate(calc(var(--a) * -1))}to{transform:translate(-50%,-50%) rotate(calc(var(--a) * -1 - 360deg))}}
/* running strip */
.pm-wrap{overflow:hidden;padding:1.1rem 0;background:var(--navy);border-block:4px solid var(--pink)}
.pm-row{overflow:hidden}.pm-row+.pm-row{margin-top:.8rem}
.pm-trk{display:flex;gap:1rem;width:max-content;padding-right:1rem;animation:ptMarq 42s linear infinite}
.pm-row.rev .pm-trk{animation-direction:reverse;animation-duration:52s}
.pm-wrap:hover .pm-trk{animation-play-state:paused}
@keyframes ptMarq{to{transform:translateX(-50%)}}
.pm-t{display:inline-flex;align-items:center;gap:.65rem;padding:.55rem 1.2rem .55rem .6rem;border:3px solid rgba(255,255,255,.85);border-radius:99px;color:#fff;font-weight:700;font-size:1.05rem;white-space:nowrap;transition:background .25s,color .25s,transform .25s var(--ease)}
.pm-t i{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--teal);color:var(--navy)}
.pm-t i svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pm-t:hover{background:#fff;color:var(--navy);transform:scale(1.06)}
.pm-row.rev .pm-t i{background:var(--pink);color:#fff}
/* numbers */
.pt-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1.2rem}
.pt-stat{display:grid;gap:.2rem;justify-items:center;padding:1.4rem 1rem;background:#fff;border:3px solid var(--navy);border-radius:1.3rem;box-shadow:5px 5px 0 var(--teal);transition:transform .3s var(--ease),box-shadow .3s}
.pt-stat:nth-child(2){box-shadow:5px 5px 0 var(--pink)}.pt-stat:nth-child(3){box-shadow:5px 5px 0 var(--blue)}
.pt-stat:hover{transform:translateY(-6px) rotate(-1deg)}
.pt-stat b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:3rem;line-height:1;color:var(--navy)}
.pt-stat span{font-weight:700;text-align:center}
.pt-page .rv,.pt-hero~section .rv{transition-delay:var(--d,0s)}
/* network */
.nt{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3rem;align-items:center}
.nt-map{--rn:11.6rem;position:relative;width:100%;max-width:32rem;aspect-ratio:1;margin:0 auto}
.nt-c{position:absolute;left:50%;top:50%;z-index:3;display:grid;place-items:center;width:6.4rem;height:6.4rem;transform:translate(-50%,-50%);border-radius:50%;background:var(--navy);color:#fff;border:4px solid #fff;box-shadow:0 0 0 4px var(--navy);animation:ptPulse2 3s ease-out infinite}
.nt-c b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:.95rem}
@keyframes ptPulse2{0%{box-shadow:0 0 0 4px var(--navy),0 0 0 4px rgba(45,208,197,.7)}80%,100%{box-shadow:0 0 0 4px var(--navy),0 0 0 2.2rem rgba(45,208,197,0)}}
.nt-l{position:absolute;left:50%;top:50%;width:var(--rn);height:4px;transform-origin:0 50%;transform:rotate(var(--a));background:repeating-linear-gradient(90deg,#9fb3e6 0 .5rem,transparent .5rem .95rem);border-radius:4px;transition:background .3s}
.nt-l::after{content:"";position:absolute;left:0;top:50%;width:.8rem;height:.8rem;margin-top:-.4rem;border-radius:50%;background:var(--pink);box-shadow:0 0 0 3px rgba(233,79,122,.25);animation:ptFlow 3.4s linear infinite;animation-delay:calc(var(--i) * -.55s)}
@keyframes ptFlow{from{left:0;opacity:0}12%{opacity:1}88%{opacity:1}to{left:100%;opacity:0}}
.nt-l.on{background:repeating-linear-gradient(90deg,var(--pink) 0 .5rem,transparent .5rem .95rem)}
.nt-n{position:absolute;left:50%;top:50%;z-index:2;display:grid;justify-items:center;gap:.3rem;width:6.8rem;padding:.55rem .4rem;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1rem;cursor:pointer;font-family:inherit;box-shadow:3px 3px 0 var(--navy);transform:rotate(var(--a)) translateX(var(--rn)) rotate(calc(var(--a) * -1)) translate(-50%,-50%);transition:background .25s,color .25s,box-shadow .25s,scale .25s var(--ease)}
.nt-n i{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--soft)}
.nt-n i svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.nt-n b{font-size:.72rem;line-height:1.15;text-align:center}
.nt-n:hover,.nt-n.on{background:var(--pink);color:#fff;scale:1.12;box-shadow:5px 5px 0 var(--navy)}
.nt-n:hover i,.nt-n.on i{background:#fff;color:var(--pink)}
.nt-panel{min-width:0}
.nt-p h3{margin:0 0 1rem}
.nt-p ul{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.nt-p li{display:grid;gap:.15rem;padding:.9rem 1.1rem;background:#fff;border:3px solid var(--navy);border-radius:1rem;box-shadow:4px 4px 0 var(--teal)}
.nt-p li b{font-size:1.05rem}.nt-p li span{opacity:.8;line-height:1.45}
.nt-p.swap li{animation:ptIn .55s var(--ease) both;animation-delay:var(--d)}
.nt-p.swap h3{animation:ptIn .45s var(--ease) both}
@keyframes ptIn{from{opacity:0;transform:translateX(26px) scale(.97)}to{opacity:1;transform:none}}
/* partner wall */
.pw-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 1.6rem}
.pw-chips button{padding:.5rem 1.05rem;border:3px solid var(--navy);border-radius:99px;background:#fff;color:var(--navy);font:700 .92rem 'Outfit',sans-serif;cursor:pointer;transition:background .2s,color .2s,transform .25s var(--ease)}
.pw-chips button:hover{transform:translateY(-3px) rotate(-1deg)}
.pw-chips button.on{background:var(--navy);color:#fff;box-shadow:3px 3px 0 var(--pink)}
.pw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.3rem;perspective:1200px}
.pw-card{position:relative;display:grid;gap:.6rem;align-content:start;padding:1.3rem 1.3rem 1.4rem;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1.3rem;box-shadow:5px 5px 0 var(--teal);overflow:hidden;transition:box-shadow .3s,transform .18s ease-out}
.pw-card:nth-child(3n+2){box-shadow:5px 5px 0 var(--pink)}.pw-card:nth-child(3n){box-shadow:5px 5px 0 var(--blue)}
.pw-card.in{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.pw-card:hover{box-shadow:9px 11px 0 var(--navy)}
.pw-card.pop{animation:ptPop .55s var(--ease) both}
@keyframes ptPop{from{opacity:0;transform:scale(.8) rotate(-3deg)}to{opacity:1;transform:none}}
.pw-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.7),rgba(255,255,255,0) 55%);transition:opacity .25s}
.pw-card:hover .pw-glare{opacity:1}
.pw-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.pw-ico{display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:.8rem;background:var(--teal);color:var(--navy);border:3px solid var(--navy);font-style:normal;transition:transform .45s var(--ease)}
.pw-card:nth-child(3n+2) .pw-ico{background:var(--pink);color:#fff}.pw-card:nth-child(3n) .pw-ico{background:var(--blue);color:#fff}
.pw-ico svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pw-card:hover .pw-ico{transform:rotate(-12deg) scale(1.15)}
.pw-cat{padding:.12rem .6rem;border:2px solid var(--navy);border-radius:99px;background:var(--soft);font-size:.7rem;font-weight:700}
.pw-card h3{margin:.2rem 0 0;font-size:1.15rem}
.pw-card p{margin:0;line-height:1.55;opacity:.85}
.pw-more{background:var(--navy);color:#fff}.pw-more .pw-cat{background:rgba(255,255,255,.15);border-color:#fff;color:#fff}.pw-more h3,.pw-more p{color:#fff}
/* why it matters */
.pt-whys{gap:1.3rem}
.pt-why{padding:1.6rem 1.5rem;border:3px solid transparent;border-radius:1.4rem;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,var(--pink),var(--teal),var(--blue),var(--pink)) border-box;background-size:100% 100%,300% 100%;animation:ptBorder 6s linear infinite;transition:transform .35s var(--ease)}
.pt-why:hover{transform:translateY(-8px) rotate(-.6deg)}
.pt-why i{display:grid;place-items:center;width:3rem;height:3rem;margin-bottom:.7rem;border-radius:50%;background:var(--navy);color:#fff;transition:transform .5s var(--ease)}
.pt-why:hover i{transform:rotate(360deg) scale(1.1)}
.pt-why i svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pt-why h3{margin:0 0 .5rem}.pt-why p{margin:0;line-height:1.6}
@keyframes ptBorder{to{background-position:0 0,-300% 0}}
/* small screens */
@media(max-width:1000px){
 .orbit{justify-self:center;width:min(100%,30rem);--u:.84}
 .nt{grid-template-columns:minmax(0,1fr);gap:2rem}
}
@media(max-width:700px){
 .orbit{width:min(100%,22rem);--u:.58}
 .o-core{width:5.4rem;height:5.4rem}.o-core b{font-size:.78rem}
 .o-chip{font-size:.6rem;padding:.24rem .55rem;border-width:2px;box-shadow:2px 2px 0 var(--navy)}
 .nt-map{--rn:8rem;max-width:21rem}
 .nt-c{width:4.6rem;height:4.6rem}.nt-c b{font-size:.7rem}
 .nt-n{width:5rem;padding:.4rem .25rem}.nt-n b{font-size:.6rem}.nt-n i{width:1.5rem;height:1.5rem}
 .pm-t{font-size:.9rem}
 .pt-stat b{font-size:2.3rem}
}
@media(prefers-reduced-motion:reduce){
 .pt-orb i,.pt-h1 em,.o-core,.o-core i,.o-ring,.o-chip,.pm-trk,.nt-c,.nt-l::after,.pt-why{animation:none!important}
 .orbit{transform:none!important}
}
.ptp-tx{min-width:0}
.ptp-tx .eyebrow{display:inline-block;width:auto;justify-self:start;align-self:start}
@keyframes ptIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}

/* =====================================================================
   ROUND 6: redesigned bundle cards, home bundles section, mobile tweaks
   ===================================================================== */
.bncg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;align-items:stretch}
.bnc{--bc:var(--teal);--bt:var(--navy);position:relative;display:flex;flex-direction:column;gap:.9rem;padding:0 0 1.3rem;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1.5rem;box-shadow:7px 7px 0 var(--bc);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s}
.bnc-grow{--bc:var(--pink);--bt:#fff}.bnc-pro{--bc:var(--blue);--bt:#fff}
.bnc:hover{transform:translate(-4px,-6px);box-shadow:12px 14px 0 var(--bc)}
.bnc>*:not(.bnc-top){margin-left:1.4rem;margin-right:1.4rem}
.bnc-top{position:relative;display:flex;align-items:center;gap:.9rem;padding:1.2rem 1.4rem 1.1rem;background:var(--bc);color:var(--bt);border-bottom:3px solid var(--navy)}
.bnc-top::after{content:"";position:absolute;right:-2.2rem;top:-2.4rem;width:7rem;height:7rem;border-radius:50%;background:rgba(255,255,255,.18);pointer-events:none}
.bnc-ico{display:grid;place-items:center;flex:none;width:3rem;height:3rem;border-radius:.9rem;background:#fff;color:var(--navy);border:3px solid var(--navy);transition:transform .5s var(--ease)}
.bnc:hover .bnc-ico{transform:rotate(-14deg) scale(1.12)}
.bnc-ico svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bnc-nm small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.bnc-nm h3{margin:0;font-size:1.7rem;line-height:1;color:inherit}
.bnc-save{position:absolute;right:1rem;top:.9rem;z-index:2;display:grid;place-items:center;width:5.1rem;height:5.1rem;padding:.3rem;border-radius:50%;background:#fff;color:var(--navy);border:3px solid var(--navy);text-align:center;transform:rotate(9deg);box-shadow:3px 3px 0 var(--navy);animation:bncBob 4.5s ease-in-out infinite}
.bnc-save b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:.88rem;line-height:1.05}
.bnc-save small{font-size:.62rem;font-weight:700;line-height:1.1}
@keyframes bncBob{50%{transform:rotate(3deg) translateY(-3px)}}
.bnc-q{margin:.1rem 1.4rem 0;font-style:italic;font-weight:600;font-size:1.05rem}
.bnc-price{display:flex;align-items:flex-end;gap:.7rem;flex-wrap:wrap}
.bnc-price b{display:block;font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;line-height:1}
.bnc-price>div:first-child b{font-size:2.9rem}.bnc-price>div:last-child b{font-size:1.9rem;color:var(--pink)}
.bnc-price small{display:block;margin-top:.2rem;font-size:.82rem;font-weight:700;opacity:.75}
.bnc-price i{font-style:normal;font-family:'Bowlby One','Arial Black',sans-serif;font-size:1.5rem;padding-bottom:1.15rem;opacity:.55}
.bnc-for{margin-top:.1rem;padding:.7rem .9rem;background:var(--soft);border:2px dashed #b6c6f0;border-radius:.9rem;font-size:.95rem;line-height:1.45}
.bnc-for span{display:block;margin-bottom:.1rem;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.6}
.bnc-l{list-style:none;padding:0;display:grid;gap:.5rem}
.bnc-l li{position:relative;padding-left:1.8rem;line-height:1.4}
.bnc-l li::before{content:"\2713";position:absolute;left:0;top:.05rem;display:grid;place-items:center;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--bc);color:var(--bt);border:2px solid var(--navy);font-size:.68rem;font-weight:700}
.bnc-act{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:auto!important;padding-top:.6rem}
.bnc-act .btn{flex:1 1 auto;justify-content:center}
/* the home page bundles section */
.bnh{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0,#eef3ff 100%)}
.bnh-d{position:absolute;border-radius:50%;pointer-events:none}
.bnh-d.d1{right:-8rem;top:-7rem;width:24rem;height:24rem;background:rgba(45,208,197,.16)}
.bnh-d.d2{left:-6rem;bottom:-8rem;width:20rem;height:20rem;background:rgba(233,79,122,.12)}
.bnh .c{position:relative;z-index:2}
.bnh-head{display:flex;align-items:center;justify-content:space-between;gap:2.4rem;margin-bottom:2.4rem}
.bnh-head h2{margin:.3rem 0 .7rem}.bnh-head p{margin:0 0 1.1rem;max-width:44rem;font-size:1.08rem;line-height:1.65}
.bnh-steps{list-style:none;margin:0;padding:0;display:flex;gap:.7rem;flex-wrap:wrap}
.bnh-steps li{display:flex;align-items:center;gap:.55rem;padding:.4rem .9rem .4rem .45rem;background:#fff;border:3px solid var(--navy);border-radius:99px;font-weight:700;font-size:.9rem;box-shadow:3px 3px 0 var(--teal)}
.bnh-steps b{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--navy);color:#fff;font-size:.82rem}
.bnh-badge{flex:none;display:grid;place-items:center;align-content:center;width:11.5rem;height:11.5rem;padding:1rem;border-radius:50%;background:var(--pink);color:#fff;border:4px solid var(--navy);box-shadow:6px 6px 0 var(--navy);text-align:center;transform:rotate(-8deg);animation:bncBob 5s ease-in-out infinite}
.bnh-badge small{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.bnh-badge b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:2.7rem;line-height:1.05}
.bnh-badge span{font-size:.82rem;font-weight:700}
.bnh-foot{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;margin-top:2.2rem;padding:1.2rem 1.5rem;background:#fff;border:3px solid var(--navy);border-radius:1.2rem;box-shadow:5px 5px 0 var(--pink)}
.bnh-foot p{margin:0;font-weight:600}
@media(max-width:1000px){.bnh-badge{display:none}.bncg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
 .bncg{grid-template-columns:none}
 .bncg.rail>*{flex:0 0 86%;max-width:22rem}
 .bnh-head{display:block;margin-bottom:1.6rem}
 .bnh-foot .btn{width:100%;justify-content:center}
}
/* rebrand on phones: the "Crello, simplified" card goes last */
@media(max-width:1000px){
 .rbn-left{display:contents}
 .rbn-h{order:1}.rbn-w{order:2}.rbn-f{order:3}
}
/* FAQs on phones: just the two buttons */
@media(max-width:900px){
 .fqx-count{display:none!important}
 .fqx-foot{flex-wrap:nowrap;gap:.6rem}
 .fqx-foot>*{flex:1 1 0;min-width:0;justify-content:center;text-align:center}
 .fqx-foot .fqx-ref{padding:.55rem .6rem .55rem .5rem;font-size:.82rem;gap:.4rem}
 .fqx-foot .fqx-ref span{white-space:normal;line-height:1.15}
 .fqx-foot .btn{font-size:.8rem;padding-left:.5rem;padding-right:.5rem}
}

/* =====================================================================
   Hero graphics that match each page
   ===================================================================== */
.sa{position:relative}
.sa .win .bd{display:grid;gap:.6rem}
@keyframes saRow{0%{opacity:0;transform:translateX(18px)}14%,86%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-10px)}}
@keyframes saBob{50%{transform:translateY(-8px) rotate(4deg)}}
@keyframes saPop{0%,12%{opacity:0;transform:scale(.6)}24%,86%{opacity:1;transform:none}100%{opacity:0;transform:scale(.9)}}
/* template */
.sa-tpl .tplb{padding:.5rem}
.sa-tpl .tplb .tm{width:100%;border:0;box-shadow:none;border-radius:.4rem;aspect-ratio:300/190;overflow:hidden}
.sa-tpl .tplb .tm svg{display:block;width:100%;height:100%}
/* add-ons */
.sa-addons .ar{display:flex;align-items:center;gap:.6rem;padding:.5rem .65rem;border:3px solid var(--navy);border-radius:.8rem;background:#fff;opacity:0;animation:saRow 6s infinite both}
.sa-addons .ar:nth-child(2){animation-delay:.5s}.sa-addons .ar:nth-child(3){animation-delay:1s}.sa-addons .ar:nth-child(4){animation-delay:1.5s}
.sa-addons .ar i{display:grid;place-items:center;flex:none;width:1.9rem;height:1.9rem;border-radius:.55rem;background:var(--teal);border:2px solid var(--navy);font-style:normal}
.sa-addons .ar i svg{width:1rem;height:1rem;fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sa-addons .ar .l{flex:1;height:.6rem;border-radius:.3rem;background:var(--soft)}
.sa-addons .ar span{padding:.1rem .6rem;border-radius:99px;background:var(--pink);color:#fff;font-weight:700;font-size:.78rem}
.sa .pl{position:absolute;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--teal);color:var(--navy);border:3px solid var(--navy);font-weight:700;font-size:1.3rem;animation:saBob 3.2s ease-in-out infinite}
.sa .pl.p1{right:-.2rem;top:-.8rem}.sa .pl.p2{left:-.8rem;bottom:2.6rem;background:var(--pink);color:#fff;animation-delay:-1.4s}
/* case study */
.sa-case .hr{height:3.6rem;border-radius:.6rem;background:linear-gradient(135deg,var(--blue),var(--navy));border:3px solid var(--navy)}
.sa-case .ba{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem}
.sa-case .ba>span{font-size:1.4rem;font-weight:700;color:var(--pink);animation:saBob 2.6s ease-in-out infinite}
.sa-case .bf,.sa-case .af{display:grid;gap:.3rem;padding:.5rem;border:3px solid var(--navy);border-radius:.7rem}
.sa-case .bf{background:#e4e8f5;opacity:.7}.sa-case .af{background:#d9faf6;animation:saPulse 2.8s ease-in-out infinite}
.sa-case .ba b{font-size:.72rem}.sa-case .ba i{height:.4rem;border-radius:.2rem;background:var(--navy);opacity:.35}
@keyframes saPulse{50%{box-shadow:0 0 0 .5rem rgba(45,208,197,.35)}}
.sa-case .star{position:absolute;right:-.4rem;top:-1rem;display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:#f2a916;color:#fff;border:3px solid var(--navy);font-size:1.4rem;animation:saBob 3s ease-in-out infinite}
/* domain, email and phone */
.sa-dep .addr{display:flex;align-items:center;gap:.5rem;padding:.45rem .6rem;border:3px solid var(--navy);border-radius:99px;background:#fff;font-weight:700;font-size:.78rem}
.sa-dep .addr svg{width:1rem;height:1rem;fill:none;stroke:var(--navy);stroke-width:2.2}
.sa-dep .addr em{margin-left:auto;padding:.05rem .5rem;border-radius:99px;background:var(--teal);font-style:normal;font-size:.65rem}
.sa-dep .trio{display:flex;justify-content:center;gap:.9rem;margin:.4rem 0}
.sa-dep .trio span{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;border:3px solid var(--navy);background:var(--pink);animation:saPop 5s infinite both}
.sa-dep .trio span:nth-child(2){background:var(--teal);animation-delay:.5s}.sa-dep .trio span:nth-child(3){background:var(--blue);animation-delay:1s}
.sa-dep .trio svg{width:1.3rem;height:1.3rem;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.sa-dep .trio span:nth-child(2) svg{stroke:var(--navy)}
/* extra services */
.sa-extras{min-height:17rem}
.sa-extras .ex{position:absolute;display:grid;gap:.4rem;padding:.7rem .8rem;border:3px solid var(--navy);border-radius:1rem;background:#fff;box-shadow:4px 4px 0 var(--navy);animation:saBob 5s ease-in-out infinite}
.sa-extras .e1{left:0;top:1rem;width:10.5rem}.sa-extras .e2{right:0;top:6rem;width:10rem;background:var(--teal);animation-delay:-1.6s}.sa-extras .e3{left:2.2rem;bottom:1rem;width:9rem;background:#fff6dc;animation-delay:-3s}
.sa-extras .stars{display:flex;gap:.15rem;color:#f2a916}.sa-extras .stars i{font-style:normal;font-size:1.1rem;animation:saPop 4s infinite both}
.sa-extras .stars i:nth-child(2){animation-delay:.25s}.sa-extras .stars i:nth-child(3){animation-delay:.5s}.sa-extras .stars i:nth-child(4){animation-delay:.75s}.sa-extras .stars i:nth-child(5){animation-delay:1s}
.sa-extras .e2{display:flex;align-items:center;justify-content:space-between;gap:.3rem}.sa-extras .bx{width:1.8rem;height:2.2rem;border:3px solid var(--navy);border-radius:.4rem;background:#fff}.sa-extras .bx.b2{background:var(--pink)}
.sa-extras .ar{font-weight:700;font-size:1.3rem;animation:saBob 2s ease-in-out infinite}
.sa-extras .e3 b{font-size:.78rem;letter-spacing:.1em}
/* templates grid */
.sa-templates .mg{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
.sa-templates .mt{display:grid;gap:.25rem;padding:.35rem;border:3px solid var(--navy);border-radius:.6rem;background:#fff;animation:saPop 6s infinite both}
.sa-templates .mt i{display:block;height:.55rem;border-radius:.2rem;background:var(--soft)}.sa-templates .mt i.h{height:1.3rem;background:var(--pink)}.sa-templates .mt i.s{width:60%}
.sa-templates .mt:nth-child(2) i.h{background:var(--teal)}.sa-templates .mt:nth-child(3) i.h{background:var(--blue)}.sa-templates .mt:nth-child(4) i.h{background:#f2a916}.sa-templates .mt:nth-child(5) i.h{background:var(--navy)}.sa-templates .mt:nth-child(6) i.h{background:#2faa5a}
.sa-templates .mt:nth-child(2){animation-delay:.3s}.sa-templates .mt:nth-child(3){animation-delay:.6s}.sa-templates .mt:nth-child(4){animation-delay:.9s}.sa-templates .mt:nth-child(5){animation-delay:1.2s}.sa-templates .mt:nth-child(6){animation-delay:1.5s}
/* bundles */
.sa-bundle{min-height:16rem}
.sa-bundle .bx{position:absolute;display:grid;gap:.1rem;align-content:center;justify-items:center;width:8.2rem;height:5.6rem;border:3px solid var(--navy);border-radius:.9rem;color:var(--navy);box-shadow:4px 4px 0 var(--navy);animation:saBob 4.6s ease-in-out infinite}
.sa-bundle .bx::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1rem;margin-left:-.5rem;background:rgba(255,255,255,.55);border-inline:3px solid var(--navy)}
.sa-bundle .bx b{position:relative;z-index:2;padding:0 .3rem;background:#fff;border-radius:.3rem;font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.1rem}
.sa-bundle .bx small{position:relative;z-index:2;padding:0 .3rem;background:#fff;border-radius:.3rem;font-weight:700;font-size:.68rem}
.sa-bundle .bx1{left:0;bottom:.5rem;background:var(--teal)}.sa-bundle .bx2{left:6.2rem;bottom:3.4rem;background:var(--pink);animation-delay:-1.5s}.sa-bundle .bx3{left:12.4rem;bottom:6.3rem;background:var(--blue);animation-delay:-3s}
/* SBS */
.sa-sbs .tk{position:relative;display:grid;gap:.7rem;padding:1.1rem 1.1rem 1rem;background:#fff;border:3px solid var(--navy);border-radius:1.2rem;box-shadow:6px 6px 0 var(--pink)}
.sa-sbs .tk::before,.sa-sbs .tk::after{content:"";position:absolute;top:50%;width:1.2rem;height:1.2rem;margin-top:-.6rem;border-radius:50%;background:var(--blue);border:3px solid var(--navy)}
.sa-sbs .tk::before{left:-.7rem}.sa-sbs .tk::after{right:-.7rem}
.sa-sbs .st{justify-self:start;padding:.1rem .8rem;border:3px solid var(--navy);background:var(--teal);font-family:'Bowlby One','Arial Black',sans-serif;transform:rotate(-3deg);animation:saBob 3.4s ease-in-out infinite}
.sa-sbs .pr{display:flex;align-items:baseline;gap:.4rem}.sa-sbs .pr b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:2.2rem}.sa-sbs .pr b.m{font-size:1.5rem;color:var(--pink)}.sa-sbs .pr i{font-style:normal;font-weight:700}.sa-sbs .pr small{font-weight:700}
.sa-sbs ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}.sa-sbs li{position:relative;padding-left:1.4rem;font-weight:700;font-size:.85rem;opacity:0;animation:saRow 6s infinite both}
.sa-sbs li::before{content:"\2713";position:absolute;left:0;color:var(--pink)}.sa-sbs li:nth-child(2){animation-delay:.6s}.sa-sbs li:nth-child(3){animation-delay:1.2s}
/* team */
.sa-team .avs{display:flex;justify-content:center}
.sa-team .av{position:relative;width:4.4rem;height:4.4rem;margin-left:-.7rem;border-radius:50%;border:3px solid var(--navy);overflow:hidden;animation:saBob 4s ease-in-out infinite}
.sa-team .av::before{content:"";position:absolute;left:50%;top:.7rem;width:1.5rem;height:1.5rem;margin-left:-.75rem;border-radius:50%;background:var(--navy)}
.sa-team .av::after{content:"";position:absolute;left:50%;bottom:-1.2rem;width:3.2rem;height:2.6rem;margin-left:-1.6rem;border-radius:50% 50% 0 0;background:var(--navy)}
.sa-team .a1{background:var(--teal)}.sa-team .a2{background:var(--pink);animation-delay:-1s}.sa-team .a3{background:#f2a916;animation-delay:-2s}.sa-team .a4{background:var(--blue);animation-delay:-3s}
.sa-team .bub{margin:1.4rem auto 0;width:75%;padding:.8rem;border:3px solid var(--navy);border-radius:1rem;background:#fff;display:grid;gap:.4rem}
/* community */
.sa-community .shops{display:flex;justify-content:center;align-items:flex-end;gap:.7rem;padding-top:3rem}
.sa-community .shops i{position:relative;width:4.6rem;height:5.4rem;border:3px solid var(--navy);border-radius:.4rem;background:#fff;animation:saBob 5s ease-in-out infinite}
.sa-community .shops i::before{content:"";position:absolute;left:-3px;right:-3px;top:-1.1rem;height:1.1rem;border:3px solid var(--navy);border-radius:.4rem .4rem 0 0;background:repeating-linear-gradient(90deg,var(--pink) 0 .9rem,#fff .9rem 1.8rem)}
.sa-community .shops i::after{content:"";position:absolute;left:50%;bottom:-3px;width:1.4rem;height:2.4rem;margin-left:-.7rem;border:3px solid var(--navy);border-bottom:0;background:var(--teal)}
.sa-community .shops i:nth-child(2){height:6.4rem;animation-delay:-1.6s}.sa-community .shops i:nth-child(3){animation-delay:-3.2s}
.sa-community .ht{position:absolute;color:var(--pink);font-size:1.8rem;animation:saBob 3s ease-in-out infinite}.sa-community .h1{left:25%;top:0}.sa-community .h2{right:22%;top:.9rem;font-size:1.3rem;animation-delay:-1.4s}
/* culture */
.sa-culture{display:grid;gap:.8rem;align-content:center}
.sa-culture .vl{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;border:3px solid var(--navy);border-radius:1rem;background:#fff;box-shadow:4px 4px 0 var(--teal);font-weight:700;font-size:1.05rem;opacity:0;animation:saRow 6s infinite both}
.sa-culture .vl b{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--pink);border:2px solid var(--navy)}.sa-culture .vl svg{width:.95rem;height:.95rem;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sa-culture .v2{animation-delay:.7s;margin-left:1.4rem;box-shadow:4px 4px 0 var(--pink)}.sa-culture .v3{animation-delay:1.4s;box-shadow:4px 4px 0 var(--blue)}
/* terms */
.sa-terms .doc{display:grid;gap:.5rem;width:70%;margin:0 auto;padding:1.3rem 1.1rem;border:3px solid var(--navy);border-radius:.9rem;background:#fff;box-shadow:5px 5px 0 var(--teal)}
.sa-terms .sh{position:absolute;right:.3rem;bottom:.4rem;display:grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:50%;background:var(--pink);border:3px solid var(--navy);animation:saBob 3.4s ease-in-out infinite}
.sa-terms .sh svg{width:1.8rem;height:1.8rem;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* quote */
.sa-quote .rc{display:grid;gap:.5rem;width:82%;margin:0 auto;padding:1.1rem;border:3px solid var(--navy);border-radius:1rem;background:#fff;box-shadow:6px 6px 0 var(--pink)}
.sa-quote .h2t{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;text-transform:uppercase;font-size:1rem}
.sa-quote .qr{display:flex;justify-content:space-between;gap:.6rem;padding:.3rem 0;border-bottom:1px dashed #b6c6f0;font-weight:600;font-size:.85rem;opacity:0;animation:saRow 6s infinite both}
.sa-quote .qr:nth-of-type(2){animation-delay:.6s}.sa-quote .qr:nth-of-type(3){animation-delay:1.2s}.sa-quote .qr:nth-of-type(4){animation-delay:1.8s}
.sa-quote .qt{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.5rem .7rem;border-radius:.7rem;background:var(--teal);border:3px solid var(--navy);font-weight:700}
@media(prefers-reduced-motion:reduce){.sa *,.sa .win *{animation:none!important;opacity:1!important}}
.bnc-save{width:5.7rem;height:5.7rem}

/* =====================================================================
   Templates: page mockups and the filterable template library
   ===================================================================== */
.mkt{display:block;font-size:.72rem;font-weight:700;line-height:1.25;color:var(--navy)}.mkt.big{font-size:.95rem;margin:.1rem 0 .1rem}
.mkfld{display:block;height:.95rem!important;border:2px solid #b6c6f0;background:#fff!important;border-radius:.3rem;width:100%!important}.mkfld.tall{height:2.2rem!important}
.mkform{display:grid;gap:.4rem;align-content:start}
.tcard[hidden]{display:none!important}
.tl-wrap{display:grid;gap:1rem}
.tl-tools{display:grid;gap:.9rem;margin-bottom:1.4rem}
.tl-tools .fqx-s{max-width:30rem;margin:0}
.tl-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.tl-chips button{padding:.5rem 1rem;border:3px solid var(--navy);border-radius:99px;background:#fff;color:var(--navy);font:700 .9rem 'Outfit',sans-serif;cursor:pointer;transition:background .2s,color .2s,transform .25s var(--ease)}
.tl-chips button:hover{transform:translateY(-3px) rotate(-1deg)}
.tl-chips button[aria-selected=true]{background:var(--navy);color:#fff;box-shadow:3px 3px 0 var(--pink)}
.tl-count{margin:0 0 1rem;font-weight:700;opacity:.75}
.mk-tabs{flex-wrap:wrap}
@media(max-width:900px){.mk-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.mk-tabs::-webkit-scrollbar{display:none}.mk-tabs button{flex:none;white-space:nowrap}}

/* =====================================================================
   QUOTE BUILDER (get-started page)
   ===================================================================== */
.qb-s{padding-top:2.4rem}
.qb{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:2rem;align-items:start}
.qb-main{min-width:0}
.qb-steps{list-style:none;margin:0 0 1.6rem;padding:0;display:flex;gap:.5rem}
.qb-steps li{flex:1;min-width:0}
.qb-steps button{display:flex;align-items:center;gap:.55rem;width:100%;padding:.55rem .7rem;border:3px solid var(--navy);border-radius:.9rem;background:#fff;color:var(--navy);font:700 .86rem 'Outfit',sans-serif;cursor:pointer;opacity:.55;transition:background .2s,transform .2s var(--ease)}
.qb-steps button:disabled{cursor:default}
.qb-steps .on button,.qb-steps .done button{opacity:1}
.qb-steps b{display:grid;place-items:center;flex:none;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--soft);border:2px solid var(--navy);font-size:.78rem}
.qb-steps .on button{background:var(--navy);color:#fff;box-shadow:3px 3px 0 var(--pink)}.qb-steps .on b{background:var(--pink);color:#fff}
.qb-steps .done button{background:#e8fbf9}.qb-steps .done b{background:var(--teal)}
.qb-steps .done button:hover{transform:translateY(-2px)}
.qb-body{animation:qbIn .4s var(--ease)}
@keyframes qbIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.qb-h{margin:0 0 .4rem}.qb-sub{margin:0 0 1.4rem;line-height:1.6;opacity:.85}.qb-sub.sm{font-size:.9rem;margin:1rem 0 0}
.qb-gh{margin:1.6rem 0 .7rem;font:700 .8rem 'Outfit',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--blue)}
.qb-pks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.qb-pks.one{grid-template-columns:minmax(0,1fr)}
.qb-pk{position:relative;display:grid;gap:.3rem;align-content:start;padding:1.2rem 1.1rem 1rem;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1.2rem;box-shadow:4px 4px 0 var(--teal);cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s,background .2s}
.qb-pk:hover{transform:translateY(-4px);box-shadow:6px 8px 0 var(--navy)}
.qb-pk.on{background:#eaf1ff;box-shadow:6px 6px 0 var(--pink);border-color:var(--blue)}
.qb-pk.on::after{content:"\2713";position:absolute;right:.8rem;top:.8rem;display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--pink);color:#fff;border:2px solid var(--navy);font-weight:700}
.qb-pk-n{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.05rem;text-transform:uppercase;padding-right:2rem}
.qb-pk-p{font-weight:700;color:var(--pink)}.qb-pk small{opacity:.8;line-height:1.4}
.qb-pk ul{list-style:none;margin:.3rem 0 0;padding:0;display:grid;gap:.25rem;font-size:.88rem}.qb-pk li{position:relative;padding-left:1.2rem}.qb-pk li::before{content:"\2713";position:absolute;left:0;color:var(--blue);font-weight:700}
.qb-pk-d{margin-top:.5rem;font-weight:700;font-size:.85rem;color:var(--blue)}
.qb-save{justify-self:start;margin-bottom:.2rem;padding:.12rem .65rem;border:2px solid var(--navy);border-radius:99px;background:var(--teal);font-weight:700;font-size:.72rem}
.qb-none{margin-top:1.2rem;padding:1rem 1.2rem;display:grid;gap:.2rem;background:#fff;border:3px dashed var(--navy);border-radius:1.1rem;cursor:pointer;transition:background .2s}
.qb-none span{opacity:.8}.qb-none.on,.qb-none:hover{background:#eaf1ff}
.qb-up{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;margin:0 0 1.3rem;padding:1.1rem 1.3rem;background:var(--navy);color:#fff;border-radius:1.2rem;box-shadow:5px 5px 0 var(--pink)}
.qb-up>div:first-child{flex:1 1 22rem;min-width:0}.qb-up h3{margin:.3rem 0 .3rem;color:#fff;font-size:1.05rem}.qb-up p{margin:0;line-height:1.55;opacity:.92;font-size:.93rem}
.qb-tag{display:inline-block;padding:.08rem .7rem;background:var(--teal);color:var(--navy);border:2px solid #fff;font-weight:700;font-size:.72rem;transform:rotate(-2deg)}
.qb-up-a{display:grid;gap:.5rem;justify-items:start}.qb-up-a a{color:#fff;font-weight:700;font-size:.85rem}
.qb-search{display:block;margin:0 0 .9rem}.qb-search input{width:100%;padding:.75rem 1rem;border:3px solid var(--navy);border-radius:.9rem;background:#fff;color:var(--navy);font:inherit}
.qb-search input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,95,209,.2)}
.qb-tabs{display:flex;gap:.45rem;overflow-x:auto;padding:.1rem .1rem .7rem;margin-bottom:.4rem;scrollbar-width:none}.qb-tabs::-webkit-scrollbar{display:none}
.qb-tabs button{flex:none;display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .95rem;border:3px solid var(--navy);border-radius:99px;background:#fff;color:var(--navy);font:700 .86rem 'Outfit',sans-serif;cursor:pointer;white-space:nowrap;transition:transform .2s var(--ease),background .2s}
.qb-tabs button:hover{transform:translateY(-2px)}.qb-tabs button.on{background:var(--navy);color:#fff;box-shadow:3px 3px 0 var(--pink)}
.qb-tabs i{display:grid;place-items:center;min-width:1.3rem;height:1.3rem;padding:0 .3rem;border-radius:99px;background:var(--pink);color:#fff;font-style:normal;font-size:.72rem}
.qb-list{display:grid;gap:.7rem}
.qb-it{display:flex;align-items:flex-start;gap:.9rem;padding:.9rem 1rem;background:#fff;border:3px solid var(--navy);border-radius:1.1rem;box-shadow:3px 3px 0 #cfe0ff;transition:transform .2s var(--ease),box-shadow .2s,background .2s}
.qb-it.on{background:#eaf9f7;box-shadow:3px 3px 0 var(--teal)}.qb-it.cov{opacity:.6}
.qb-chk{flex:none;display:grid;place-items:center;width:1.9rem;height:1.9rem;margin-top:.1rem;border:3px solid var(--navy);border-radius:.55rem;background:#fff;cursor:pointer;transition:background .2s,transform .2s var(--ease)}
.qb-chk i{width:.9rem;height:.5rem;margin-top:-.15rem;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-45deg) scale(0);transition:transform .2s var(--ease)}
.qb-chk[aria-pressed=true]{background:var(--pink)}.qb-chk[aria-pressed=true] i{transform:rotate(-45deg) scale(1)}.qb-chk:not(:disabled):hover{transform:scale(1.1)}.qb-chk:disabled{cursor:not-allowed}
.qb-it-b{flex:1;min-width:0}.qb-it-b b{display:block;line-height:1.25}.qb-it-b p{margin:.2rem 0 .3rem;font-size:.9rem;line-height:1.45;opacity:.82}
.qb-it-b a{font-weight:700;font-size:.82rem;color:var(--blue)}.qb-it-b em{margin-left:.6rem;padding:.05rem .55rem;border:2px solid var(--navy);border-radius:99px;background:var(--teal);font-style:normal;font-weight:700;font-size:.7rem}
.qb-it-b em.sv{background:var(--pink);color:#fff}
.qb-it-p{flex:none;display:grid;justify-items:end;gap:.05rem;text-align:right}.qb-it-p b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.15rem;line-height:1.1}.qb-it-p small{font-weight:700;font-size:.72rem;opacity:.7}.qb-it-p s{font-size:.78rem;opacity:.55}
.qb-qty{display:inline-flex;align-items:center;gap:.35rem;margin-top:.35rem}
.qb-qty button{width:1.6rem;height:1.6rem;border:2px solid var(--navy);border-radius:50%;background:#fff;font-weight:700;cursor:pointer}.qb-qty b{min-width:1.2rem;text-align:center;font-family:'Outfit',sans-serif;font-size:.95rem}
.qb-empty{margin:.5rem 0;padding:1rem;text-align:center;border:3px dashed #b6c6f0;border-radius:1rem;opacity:.8}
.qb-nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.6rem}
.qb-msg{margin:1rem 0 0;padding:.7rem 1rem;border:3px solid var(--navy);border-radius:.9rem;background:#fde3ea;font-weight:600}.qb-msg[hidden]{display:none}
.qb-rev{display:grid;gap:0;padding:.4rem 1.1rem;background:#fff;border:3px solid var(--navy);border-radius:1.2rem;box-shadow:5px 5px 0 var(--teal);margin-bottom:1.1rem}
.qb-r{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-bottom:1px dashed #b6c6f0}.qb-r:last-child{border-bottom:0}.qb-r b{text-align:right}
.qb-r.tot{font-weight:700}.qb-r.yr{font-weight:700;color:var(--pink);font-size:1.05rem}
.qb-r2{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:start;margin:0 0 1.2rem;padding:.9rem 1.1rem;background:var(--soft);border:3px solid var(--navy);border-radius:1.1rem}.qb-r2 span{line-height:1.5}
.qb-lnk{padding:0;border:0;background:none;color:var(--blue);font:700 .88rem 'Outfit',sans-serif;cursor:pointer;text-decoration:underline}
/* the quote that follows you */
.qb-sum{position:sticky;top:6.6rem;background:#fff;border:3px solid var(--navy);border-radius:1.4rem;box-shadow:6px 6px 0 var(--pink);overflow:hidden}
.qb-sum-t{display:none}
.qb-sum-b{padding:1.2rem 1.2rem 1.1rem}.qb-sum-h{margin:0 0 .8rem}
.qb-sl{list-style:none;margin:0 0 .9rem;padding:0;display:grid;gap:.1rem;max-height:18rem;overflow:auto}
.qb-sl li{display:grid;grid-template-columns:1fr auto auto;gap:.6rem;align-items:center;padding:.5rem 0;border-bottom:1px dashed #b6c6f0;font-size:.9rem}.qb-sl li span{line-height:1.3}.qb-sl li b{white-space:nowrap}
.qb-x{border:0;background:none;color:var(--pink);font-weight:700;font-size:1.15rem;line-height:1;cursor:pointer;padding:.1rem .3rem}.qb-sl li:first-child .qb-x{font-size:.78rem;text-decoration:underline;color:var(--blue)}
.qb-tot{display:grid;gap:.1rem}.qb-tot>div{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;font-weight:600}.qb-tot b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.15rem}
.qb-tot .yr{margin-top:.3rem;padding:.6rem .8rem;background:var(--teal);border:3px solid var(--navy);border-radius:.9rem}
.qb-sh{display:grid;gap:.15rem;margin-top:.9rem;padding:.8rem .9rem;background:var(--soft);border:2px dashed var(--navy);border-radius:.9rem;font-size:.86rem;line-height:1.4}
.qb-fine{margin:.9rem 0 0;font-size:.8rem;opacity:.7}
.qb-done{max-width:38rem;margin:0 auto;text-align:center}.qb-done .qb-rev{text-align:left}.qb-done .tickp{margin:0 auto 1rem}
@media(max-width:1000px){
 .qb{grid-template-columns:minmax(0,1fr)}
 .qb-sum{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:70;border-radius:1.3rem 1.3rem 0 0;border-bottom:0;max-height:80vh;overflow:auto;box-shadow:0 -6px 0 var(--pink)}
 .qb-sum-t{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:.8rem 1.1rem;border:0;background:var(--navy);color:#fff;font-family:inherit;cursor:pointer}
 .qb-sum-t span{display:grid;text-align:left}.qb-sum-t small{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.75}.qb-sum-t b{font-size:1.02rem}
 .qb-sum-t i{font-style:normal;transition:transform .3s var(--ease)}.qb-sum.open .qb-sum-t i{transform:rotate(180deg)}
 .qb-sum:not(.open) .qb-sum-b{display:none}
 .qb-s{padding-bottom:6rem}
 .qb-pks{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
 .qb-steps span{display:none}.qb-steps button{justify-content:center;padding:.5rem}
 .qb-up{padding:1rem}.qb-up-a .btn{width:100%;justify-content:center}
 .qb-it{flex-wrap:wrap}.qb-it-p{width:100%;grid-auto-flow:column;justify-content:space-between;align-items:center;margin-left:2.8rem;width:calc(100% - 2.8rem)}
 .qb-nav .btn{flex:1;justify-content:center}.qb-r2{grid-template-columns:1fr auto}.qb-r2 b{grid-column:1/-1}
}

/* =====================================================================
   The Get Started popup is the quote builder too
   ===================================================================== */
.fn.qbm .fn-box{width:min(100%,56rem);padding:1.6rem 1.6rem 0}
.fn.qbm .fn-x{z-index:5}
.qb-modal .qb{grid-template-columns:minmax(0,1fr);gap:1.2rem}
.qb-modal .qb-main{padding-bottom:.4rem}
.qb-modal .qb-steps{margin:.2rem 3rem 1.2rem 0}
.qb-modal .qb-h{font-size:clamp(1.4rem,3vw,1.9rem)}
.qb-modal .qb-pks{grid-template-columns:repeat(3,minmax(0,1fr))}
.qb-modal .qb-sum{position:sticky;top:auto;left:auto;right:auto;bottom:0;z-index:6;margin:0 -1.6rem;border-radius:1.2rem 1.2rem 0 0;border-width:3px 0 0;box-shadow:0 -5px 0 var(--pink);max-height:62vh;overflow:auto}
.qb-modal .qb-sum-t{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:.8rem 1.4rem;border:0;background:var(--navy);color:#fff;font-family:inherit;cursor:pointer}
.qb-modal .qb-sum-t span{display:grid;text-align:left}.qb-modal .qb-sum-t small{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.75}.qb-modal .qb-sum-t b{font-size:1.02rem}
.qb-modal .qb-sum-t i{font-style:normal;transition:transform .3s var(--ease)}.qb-modal .qb-sum.open .qb-sum-t i{transform:rotate(180deg)}
.qb-modal .qb-sum:not(.open) .qb-sum-b{display:none}
.qb-modal .qb-body{min-height:12rem}
.qb-modal .qb-nav{margin-bottom:1.2rem}
.qb-modal .qb-done{padding-bottom:1.6rem}
@media(max-width:900px){.qb-modal .qb-pks{grid-template-columns:minmax(0,1fr)}.qb-modal .qb-steps span{display:none}}
@media(max-width:620px){.fn.qbm .fn-box{padding:1.2rem 1rem 0}.qb-modal .qb-sum{margin:0 -1rem}.qb-modal .qb-sum-t{padding:.8rem 1rem}.qb-modal .qb-it{flex-wrap:wrap}.qb-modal .qb-it-p{width:calc(100% - 2.8rem);margin-left:2.8rem;grid-auto-flow:column;justify-content:space-between;align-items:center}}

/* =====================================================================
   Template mockups: each template has its own look
   ===================================================================== */
.tv-sharp,.tv-sharp .mkcard,.tv-sharp .mkhero,.tv-sharp .mki,.tv-sharp .mkbtn,.tv-sharp .mkfld,.tv-sharp .mkcap{border-radius:.15rem!important}
.tv-pill .mkcard,.tv-pill .mkhero,.tv-pill .mki,.tv-pill .mkcap{border-radius:1.15rem!important}.tv-pill .mkbtn,.tv-pill .mkfld{border-radius:99px!important}
.tv-n-center .mkn{flex-direction:column;gap:.25rem;text-align:center}.tv-n-center .mkn b{margin:0;font-size:.82rem}
.tv-n-center .mkn{flex-wrap:wrap;justify-content:center}.tv-n-center .mkn span{padding:0 .3rem}
.tv-dark .mkwi{background:#0e2247;color:#fff}.tv-dark .mkn,.tv-dark .mkt,.tv-dark .mkn b{color:#fff}.tv-dark .mkcard{background:#17346f;border-color:#34559a;color:#fff}.tv-dark .mkl:not(.mkh){background:#3a5a9e}.tv-dark .mkfld{background:#17346f!important;border-color:#34559a}.tv-dark .mkck span{color:#fff}.tv-dark .mkcard.hi{background:#1d4180}
.mkhero.spl{display:grid;grid-template-columns:1.15fr .85fr;gap:.7rem;align-items:center}.mkhero.spl .mki{margin:0}
.mkhero.ctr{display:grid;justify-items:center;text-align:center;gap:.35rem;padding:1.1rem .8rem}.mkhero.ctr .mkl{margin-inline:auto}
.mkbadge{width:1.7rem;height:1.7rem;border-radius:50%;background:rgba(255,255,255,.85);border:2px solid var(--navy);margin-bottom:.2rem}
.mkhero.ban{padding:1.5rem 1rem;position:relative;overflow:hidden}.mkhero.ban::after{content:"";position:absolute;right:-1.4rem;top:-1.4rem;width:6rem;height:6rem;border-radius:50%;background:rgba(255,255,255,.2)}
.mkphoto{position:relative}.mkphoto .mki{margin:0}.mkcap{position:absolute;left:.6rem;bottom:.6rem;display:grid;gap:.35rem;padding:.55rem .7rem;border:2px solid var(--navy);border-radius:.6rem;max-width:62%}
.mksteps{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;text-align:center}.mksteps>div{display:grid;gap:.35rem;justify-items:center}
.mkdot{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;border:2px solid var(--navy);font-weight:700;font-size:.7rem;color:#fff}
.mkrows{display:grid;gap:.4rem}.mkrow2{display:flex;align-items:center;gap:.5rem;padding:.4rem .55rem;border:2px solid #b6c6f0;border-radius:.6rem;background:#fff}.mkrow2 .mkdot{width:.8rem;height:.8rem;flex:none}.mkrow2 .mkt{margin-right:auto}
.tv-dark .mkrow2{background:#17346f;border-color:#34559a}.mkpill{width:2rem;height:.7rem;border-radius:99px;background:#cfe0ff}
.mkpr{display:grid;gap:.3rem;justify-items:center;text-align:center}.mkpr.hi{background:#fff3f7;border-width:3px}.mkprice{display:block;width:60%;height:1rem;border-radius:.3rem;background:var(--navy)}
.mkbig2{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.3rem;line-height:1}
.mkcal2{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem;padding:.4rem;border:2px solid #b6c6f0;border-radius:.6rem;background:#fff}.mkcal2 i{height:.9rem;border-radius:50%;background:#dbe4fb}.mkcal2 i.on{background:var(--pink)}
.mkchips2{display:flex;gap:.4rem;justify-content:center}.mkq{text-align:center;display:grid;justify-items:center;gap:.3rem}
.mkcenter1{display:grid;gap:.4rem;justify-items:center;text-align:center}
.mkfld{height:.95rem!important}
.tv-n-center .mkn{flex-direction:row!important;flex-wrap:wrap;justify-content:center;gap:.25rem .8rem}
.tv-n-center .mkn b{flex:0 0 100%;text-align:center;margin:0}
.mkbadge{display:grid;place-items:center;width:2.1rem;height:2.1rem}.mkbadge svg{width:1.2rem;height:1.2rem}
.mkhero.ban{padding-right:4.4rem}.mkhero.ban::after{display:none}.mkbg{position:absolute;right:.5rem;top:50%;width:4.4rem;height:4.4rem;margin-top:-2.2rem;opacity:.35}
.mki svg{display:block}

.bnh{background:linear-gradient(180deg,#eef3ff 0,#fff 100%)}

/* =====================================================================
   HERO GRAPHIC: everything sits inside its own box, and the browser window is filled
   ===================================================================== */
.hero .plans-mock{position:relative;overflow:hidden;max-width:100%;padding:3rem .9rem 5rem .3rem;margin:0}
.hero .plans-mock .win{position:relative;z-index:2;box-shadow:.55rem .55rem 0 var(--pink)}
.hero .plans-mock .win .bd{padding:1.1rem 1.2rem 1.5rem;gap:.7rem}
.hero .plans-mock .pm-ticks{display:flex;flex-wrap:wrap;gap:.4rem .5rem;max-width:62%}
.hero .plans-mock .pm-ticks span{position:relative;padding:.18rem .7rem .18rem 1.5rem;border:2px solid var(--navy);border-radius:99px;background:#eaf9f7;color:var(--navy);font-size:.74rem;font-weight:700;white-space:nowrap}
.hero .plans-mock .pm-ticks span::before{content:"\2713";position:absolute;left:.45rem;top:50%;transform:translateY(-50%);font-size:.72rem;color:#0a8f84}
.hero .plans-mock .pm-bar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;max-width:62%;padding:.5rem .8rem;border:3px solid var(--navy);border-radius:.8rem;background:var(--pink);color:#fff;text-decoration:none;font-size:.82rem;transition:transform .25s var(--ease),box-shadow .25s}
.hero .plans-mock .pm-bar i{display:grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;background:#fff;color:var(--pink);font-style:normal;font-weight:700}
.hero .plans-mock .pm-bar:hover{transform:translateY(-2px);box-shadow:3px 4px 0 var(--navy)}
.hero .plans-mock .win .bd{padding-bottom:1.6rem}
/* the little pieces, all inside the box */
.hero .plans-mock .chip.a{left:.7rem;top:1.5rem;z-index:5}
.hero .plans-mock .chip.b{right:1.2rem;top:1.3rem;z-index:5}
.hero .plans-mock .fx-seo{left:41%;top:.2rem;z-index:5}
.hero .plans-mock .fx-mail{right:1.1rem;top:3.4rem;z-index:5}
.hero .plans-mock .phone{position:absolute;right:1.1rem;bottom:.5rem;left:auto;top:auto;width:30%;z-index:6;animation:none}
.hero .plans-mock .gcard{position:absolute;left:.7rem;bottom:.5rem;top:auto;right:auto;width:39%;z-index:6;animation:none}
.hero .plans-mock .fx-wa{position:absolute;left:calc(39% + 1.3rem);bottom:.9rem;top:auto;width:auto;max-width:25%;z-index:6}
.hero .plans-mock .fx-wa::after{left:1rem}
.hero .plans-mock .spk.s1{left:30%;top:.7rem}.hero .plans-mock .spk.s2{right:34%;bottom:.8rem;left:auto;top:auto}.hero .plans-mock .spk.s3{left:.5rem;top:.6rem}
.hero .plans-mock .blob1,.hero .plans-mock .blob2{opacity:.55}
@media(max-width:1250px){.hero .plans-mock .fx-wa{display:none}.hero .plans-mock .gcard{width:46%}}
@media(max-width:1100px){.hero .plans-mock .fx-seo,.hero .plans-mock .fx-mail{display:none}.hero .plans-mock{padding-top:2.7rem}}
@media(max-width:900px){
 .hero .plans-mock{padding-bottom:4.8rem}
 .hero .plans-mock .gcard,.hero .plans-mock .fx-wa{display:none}
 .hero .plans-mock .pm-ticks,.hero .plans-mock .pm-bar{max-width:64%}
 .hero .plans-mock .phone{width:34%}
}
@media(max-width:760px){.hero .plans-mock .pm-ticks,.hero .plans-mock .pm-bar{max-width:100%}.hero .plans-mock{padding-bottom:3.4rem}.hero .plans-mock .phone{width:36%;right:.9rem}}

/* =====================================================================
   THE SBS SCHEME SECTION (redesigned): a package of tiles, a price block and a savings stamp
   ===================================================================== */
.sbx{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2.4rem;align-items:center;padding:2.2rem 2.4rem 2rem;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1.8rem;box-shadow:8px 8px 0 var(--teal);overflow:hidden}
.sbx::before{content:"";position:absolute;left:-5rem;bottom:-7rem;width:18rem;height:18rem;border-radius:50%;background:rgba(233,79,122,.1);pointer-events:none}
.sbx::after{content:"";position:absolute;right:-4rem;top:-6rem;width:16rem;height:16rem;border-radius:50%;background:rgba(45,208,197,.14);pointer-events:none}
.sbx>*{position:relative;z-index:2;min-width:0}
.sbx-l h2{margin:.4rem 0 .7rem}.sbx-l p{margin:0 0 1.3rem;font-size:1.06rem;line-height:1.65;opacity:.9}
.sbx-pr{display:flex;align-items:flex-end;gap:1rem;margin:0 0 1.5rem;padding:.9rem 1.1rem;background:var(--soft);border:3px solid var(--navy);border-radius:1.2rem;width:max-content;max-width:100%}
.sbx-pr small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.65}
.sbx-pr b{display:block;font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;line-height:1}
.sbx-up b{font-size:3rem}.sbx-mo b{font-size:2.1rem;color:var(--pink);display:inline-block}.sbx-mo em{font-style:normal;font-weight:700;margin-left:.35rem}
.sbx-pr>i{font-style:normal;font-family:'Bowlby One','Arial Black',sans-serif;font-size:1.6rem;padding-bottom:.5rem;opacity:.55}
.sbx-l .row{gap:.7rem;flex-wrap:wrap}
.sbx-r{position:relative;padding-top:.6rem}
.sbx-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.sbx-t{display:grid;gap:.25rem;align-content:start;padding:.9rem .8rem .8rem;background:#fff;border:3px solid var(--navy);border-radius:1.1rem;box-shadow:3px 3px 0 var(--tc);transition:transform .3s var(--ease),box-shadow .3s}
.sbx-t:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:5px 7px 0 var(--tc)}
.sbx-t i{display:grid;place-items:center;width:2.3rem;height:2.3rem;margin-bottom:.2rem;border-radius:.7rem;background:var(--tc);border:3px solid var(--navy);color:#fff;transition:transform .5s var(--ease)}
.sbx-t:hover i{transform:rotate(-12deg) scale(1.1)}
.sbx-t i svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sbx-t b{font-size:.92rem;line-height:1.2}.sbx-t span{font-size:.78rem;line-height:1.35;opacity:.75}
.sbx-stamp{position:absolute;right:-.4rem;top:-1.9rem;z-index:4;display:grid;place-items:center;align-content:center;width:6.6rem;height:6.6rem;border-radius:50%;background:var(--pink);color:#fff;border:3px solid var(--navy);box-shadow:3px 3px 0 var(--navy);text-align:center;transform:rotate(10deg);animation:bncBob 4.6s ease-in-out infinite}
.sbx-stamp small{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.sbx-stamp b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.5rem;line-height:1.05}.sbx-stamp span{font-size:.66rem;font-weight:700}
.sbx-x{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding-top:1.1rem;border-top:3px dashed #b6c6f0}
.sbx-x b{margin-right:.4rem;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;opacity:.7}
.sbx-x span{padding:.25rem .8rem;border:2px solid var(--navy);border-radius:99px;background:var(--soft);font-size:.82rem;font-weight:700}
.sbx-x em{font-style:normal;color:var(--pink);margin-left:.25rem}
@media(max-width:1100px){.sbx-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.sbx{grid-template-columns:minmax(0,1fr);gap:1.6rem;padding:1.6rem 1.4rem}.sbx-g{grid-template-columns:repeat(3,minmax(0,1fr))}.sbx-stamp{right:-.2rem;top:-2.2rem}}
@media(max-width:620px){.sbx-g{grid-template-columns:repeat(2,minmax(0,1fr))}.sbx-up b{font-size:2.5rem}.sbx-mo b{font-size:1.8rem}.sbx-pr{width:100%}.sbx-l .row .btn{width:100%;justify-content:center}.sbx{box-shadow:5px 5px 0 var(--teal)}.sbx-stamp{width:5.4rem;height:5.4rem;top:-1.6rem}.sbx-stamp b{font-size:1.2rem}}
/* the legal line in the footer */
.fbar .cpy{opacity:.92}

/* =====================================================================
   TEMPLATE LIBRARY
   ===================================================================== */
.tll-s{padding-top:2.2rem}
.tll-bar{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:1.5rem}
.tll-q{position:relative;flex:1 1 22rem;display:block}
.tll-q svg{position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);width:1.25rem;height:1.25rem;fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round}
.tll-q input{width:100%;padding:.95rem 1.2rem .95rem 3rem;border:3px solid var(--navy);border-radius:99px;background:#fff;color:var(--navy);font:1rem 'Outfit',sans-serif;box-shadow:4px 4px 0 var(--teal)}
.tll-q input:focus{outline:0;border-color:var(--blue);box-shadow:4px 4px 0 var(--blue)}
.tll-sort{display:flex;align-items:center;gap:.5rem;font-weight:700}
.tll-sort select{padding:.8rem 1rem;border:3px solid var(--navy);border-radius:99px;background:#fff;color:var(--navy);font:700 .95rem 'Outfit',sans-serif;cursor:pointer}
.tll-fbtn{display:none;align-items:center;gap:.5rem;padding:.8rem 1.2rem;border:3px solid var(--navy);border-radius:99px;background:var(--navy);color:#fff;font:700 .95rem 'Outfit',sans-serif;cursor:pointer}
.tll-main{display:grid;grid-template-columns:16.5rem minmax(0,1fr);gap:2rem;align-items:start}
.tll-side{position:sticky;top:6.6rem;display:grid;gap:.55rem;padding:1.2rem;background:#fff;border:3px solid var(--navy);border-radius:1.4rem;box-shadow:6px 6px 0 var(--pink);max-height:calc(100vh - 8rem);overflow:auto}
.tll-side h2{margin:.7rem 0 .1rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}.tll-side h2:first-child{margin-top:0}
.tll-cats{display:grid;gap:.25rem}
.tll-cats button{display:flex;justify-content:space-between;align-items:center;gap:.6rem;width:100%;padding:.5rem .7rem;border:2px solid transparent;border-radius:.8rem;background:none;color:var(--navy);font:600 .95rem 'Outfit',sans-serif;text-align:left;cursor:pointer;transition:background .2s,transform .2s var(--ease)}
.tll-cats button:hover{background:var(--soft);transform:translateX(3px)}
.tll-cats button em{flex:none;min-width:1.7rem;padding:.05rem .45rem;border-radius:99px;background:var(--soft);font-style:normal;font-size:.78rem;font-weight:700;text-align:center}
.tll-cats button.on{background:var(--navy);color:#fff;box-shadow:3px 3px 0 var(--pink);transform:none}.tll-cats button.on em{background:var(--pink);color:#fff}
.tll-feats{display:flex;flex-wrap:wrap;gap:.4rem}
.tll-feats button,.tll-style button{padding:.3rem .75rem;border:2px solid var(--navy);border-radius:99px;background:#fff;color:var(--navy);font:700 .8rem 'Outfit',sans-serif;cursor:pointer;transition:background .2s,transform .2s var(--ease)}
.tll-feats button:hover,.tll-style button:hover{transform:translateY(-2px)}
.tll-feats button.on,.tll-style button.on{background:var(--teal)}
.tll-style{display:flex;gap:.4rem}
.tll-clear{margin-top:.5rem;padding:0;border:0;background:none;color:var(--blue);font:700 .88rem 'Outfit',sans-serif;text-decoration:underline;cursor:pointer;text-align:left}
.tll-help{display:grid;gap:.35rem;margin-top:.6rem;padding:.9rem;background:var(--soft);border:2px dashed var(--navy);border-radius:1rem;font-size:.88rem;line-height:1.4}
.tll-help .btn{justify-self:start}
.tll-count{margin:0 0 1rem;font-weight:700;opacity:.8}
.tll-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));gap:1.5rem}
.tlc{display:flex;flex-direction:column;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:1.4rem;box-shadow:5px 5px 0 var(--teal);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s}
.tlc:nth-child(3n+2){box-shadow:5px 5px 0 var(--pink)}.tlc:nth-child(3n){box-shadow:5px 5px 0 var(--blue)}
.tlc:hover{transform:translateY(-6px);box-shadow:9px 11px 0 var(--navy)}
.tlc[hidden]{display:none!important}
.tlc.pop{animation:ptPop .5s var(--ease) both}
.tlc-pv{position:relative;display:block;width:100%;padding:0;border:0;border-bottom:3px solid var(--navy);background:#dbe7ff;cursor:pointer;overflow:hidden}
.tlc-img .tm{width:100%;border:0;box-shadow:none;border-radius:0;aspect-ratio:300/190;overflow:hidden;transition:transform .6s var(--ease)}
.tlc-img .tm svg{display:block;width:100%;height:100%}
.tlc:hover .tlc-img .tm{transform:scale(1.06)}
.tlc-eye{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.5rem;background:rgba(9,47,110,.62);color:#fff;font:700 1rem 'Outfit',sans-serif;opacity:0;transition:opacity .25s}
.tlc-eye i{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--pink);border:2px solid #fff}.tlc-eye svg{width:1.1rem;height:1.1rem;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tlc:hover .tlc-eye,.tlc-pv:focus-visible .tlc-eye{opacity:1}
.tlc-b{display:flex;flex-direction:column;gap:.55rem;flex:1;padding:1.1rem 1.2rem 1.2rem}
.tlc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem}
.tlc-top h3{margin:0;font-size:1.08rem;line-height:1.2}
.tlc-cat{flex:none;max-width:48%;padding:.1rem .6rem;border:2px solid var(--navy);border-radius:99px;background:var(--soft);font-size:.68rem;font-weight:700;text-align:center;line-height:1.3}
.tlc-b p{margin:0;font-size:.92rem;line-height:1.5;opacity:.85}
.tlc-tags{display:flex;flex-wrap:wrap;gap:.35rem}
.tlc-tags span{padding:.12rem .6rem;border-radius:99px;background:#e8fbf9;border:2px solid var(--teal);font-size:.72rem;font-weight:700}.tlc-tags span.dk{background:var(--navy);border-color:var(--navy);color:#fff}
.tlc-meta{display:flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:.3rem;font-size:.8rem;opacity:.75}.tlc-meta i{width:.3rem;height:.3rem;border-radius:50%;background:var(--navy)}
.tlc-act{display:flex;gap:.5rem;flex-wrap:wrap}.tlc-act .btn{flex:1 1 auto;justify-content:center}
.tll-empty{grid-column:1/-1;display:grid;gap:.5rem;justify-items:start;padding:1.6rem;border:3px dashed #b6c6f0;border-radius:1.2rem;background:#fff}
.tll-empty[hidden]{display:none}
.tll-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.tll-steps li{display:flex;gap:1rem;align-items:flex-start;padding:1.3rem;background:#fff;border:3px solid var(--navy);border-radius:1.3rem;box-shadow:5px 5px 0 var(--teal)}
.tll-steps b{flex:none;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--pink);color:#fff;border:3px solid var(--navy);font-size:1.1rem}
.tll-steps h3{margin:0 0 .3rem;font-size:1rem}.tll-steps p{margin:0;line-height:1.55;opacity:.85}
/* quick preview window */
.tlq{position:fixed;inset:0;z-index:290;display:grid;place-items:center;padding:.9rem;opacity:0;transition:opacity .25s}
.tlq.in{opacity:1}
.tlq-bg{position:absolute;inset:0;background:rgba(9,47,110,.78);backdrop-filter:blur(.2rem)}
.tlq-box{position:relative;display:flex;flex-direction:column;gap:.9rem;width:min(100%,60rem);max-height:calc(100dvh - 1.8rem);overflow:auto;padding:1.4rem 1.5rem 1.2rem;background:#fff;color:var(--navy);border:4px solid var(--navy);border-radius:1.6rem;box-shadow:.7rem .7rem 0 var(--pink);transform:translateY(14px) scale(.98);transition:transform .3s var(--ease)}
.tlq.in .tlq-box{transform:none}
.tlq-h{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.tlq-cat{display:inline-block;padding:.1rem .7rem;border:2px solid var(--navy);border-radius:99px;background:var(--teal);font-size:.72rem;font-weight:700}
.tlq-name{margin:.25rem 0 0;font-size:1.4rem}
.tlq-nav{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.88rem}
.tlq-nav button{display:grid;place-items:center;width:2.4rem;height:2.4rem;border:3px solid var(--navy);border-radius:50%;background:#fff;color:var(--navy);font-size:1.1rem;font-weight:700;cursor:pointer;transition:background .2s,transform .2s var(--ease)}
.tlq-nav button:hover{background:var(--teal);transform:scale(1.08)}.tlq-x{margin-left:.4rem;background:var(--pink)!important;color:#fff!important;font-size:1.5rem!important}
.tlq-tabs{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.2rem}.tlq-tabs::-webkit-scrollbar{display:none}
.tlq-tabs button{flex:none;padding:.4rem .9rem;border:3px solid var(--navy);border-radius:99px;background:#fff;color:var(--navy);font:700 .82rem 'Outfit',sans-serif;cursor:pointer;white-space:nowrap;transition:transform .2s var(--ease)}
.tlq-tabs button:hover{transform:translateY(-2px)}.tlq-tabs button.on{background:var(--navy);color:#fff;box-shadow:3px 3px 0 var(--pink)}
.tlq-stage{display:grid;place-items:center;padding:1.4rem;background:var(--blue);border-radius:1.2rem;min-height:18rem;background-image:radial-gradient(rgba(255,255,255,.14) 1.4px,transparent 1.5px);background-size:20px 20px}
.tlq-stage.swap{animation:ptIn .4s var(--ease)}
.tlq-stage .mkw{max-width:46rem}.tlq-stage .mkp{margin:0 auto}
.tlq-cap{margin:0;line-height:1.5;opacity:.85;font-size:.92rem}
.tlq-f{display:flex;gap:.7rem;flex-wrap:wrap}
@media(max-width:1000px){
 .tll-main{grid-template-columns:minmax(0,1fr)}
 .tll-fbtn{display:inline-flex}
 .tll-side{display:none;position:static;max-height:none;margin-bottom:.4rem}.tll-side.open{display:grid}
 .tll-steps{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
 .tll-grid{grid-template-columns:minmax(0,1fr)}
 .tll-sort span{display:none}
 .tlq{padding:0;align-items:end}.tlq-box{border-radius:1.5rem 1.5rem 0 0;border-bottom:0;width:100%;max-height:94dvh;padding:1.1rem 1rem}
 .tlq-stage{padding:.8rem}.tlq-f .btn{flex:1 1 100%;justify-content:center}.tlq-name{font-size:1.15rem}
}
@media(prefers-reduced-motion:reduce){.tlc.pop,.tlq-stage.swap{animation:none}}

/* =====================================================================
   HERO: the text hugs its content, and the graphic fills the rest of the row
   ===================================================================== */
.hero .plans-mock{padding:0;overflow:hidden}
.hero .plans-mock .pm-in{position:relative;padding:3rem .9rem 5rem .3rem}
@media(max-width:1100px){.hero .plans-mock .pm-in{padding-top:2.7rem}}
@media(max-width:900px){.hero .plans-mock .pm-in{padding-bottom:4.8rem}}
@media(max-width:760px){.hero .plans-mock .pm-in{padding-bottom:3.4rem}}
@media(min-width:901px){
 .hero .hero-top{grid-template-columns:auto minmax(0,1fr)!important;column-gap:clamp(1.6rem,2.6vw,3rem)}
 .hero h1.t1{font-size:clamp(2.6rem,3.2vw,4.6rem)}
 .hero h1 .hl{display:block;white-space:nowrap}
 .hero .hero-top .lead{max-width:33rem}
 .hero .plans-mock{width:100%;max-width:none;justify-self:stretch}
 .hero .plans-mock .pm-in{position:absolute;top:0;right:0;width:640px;padding:3rem 0 5rem .6rem;transform-origin:100% 0;transform:scale(var(--ps,1))}
 .hero .plans-mock:not(.fit) .pm-in{position:relative;width:100%;transform:none}
 .hero .plans-mock .win{box-shadow:-.55rem .55rem 0 var(--pink)}
 .hero .plans-mock .fx-mail{right:.5rem}.hero .plans-mock .chip.b{right:.5rem}.hero .plans-mock .phone{right:.5rem}
}
.hero .plans-mock .pm-in{padding-right:0}
.hero .plans-mock .win{box-shadow:-.55rem .55rem 0 var(--pink)}
.hero .plans-mock .fx-mail,.hero .plans-mock .chip.b,.hero .plans-mock .phone{right:.5rem}

/* the graphic grows to fill its box in both directions */
@media(min-width:901px){
 .hero .plans-mock.fit .pm-in{display:flex;flex-direction:column;position:absolute;top:0;right:0;transform-origin:100% 0;transform:scale(var(--ps,1))}
 .hero .plans-mock.fit .win{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
 .hero .plans-mock.fit .win .bd{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;gap:.6rem;min-height:0}
 .hero .plans-mock.fit .pt3{flex:1 1 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:.7rem;min-height:6.5rem}
 .hero .plans-mock.fit .pt3 .pt{display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto}
}
@media(min-width:901px){
 .hero .plans-mock.fit .pm-in{padding-bottom:7.4rem}
 .hero .plans-mock.fit .phone{bottom:.3rem}.hero .plans-mock.fit .gcard{bottom:.3rem}.hero .plans-mock.fit .fx-wa{bottom:.8rem}
}

/* =====================================================================
   TEMPLATE LIBRARY ON PHONES AND TABLETS
   ===================================================================== */
.tll-sh,.tll-apply,.tll-scrim{display:none}
.tlc-act .sh{display:none}
@media(max-width:1000px){
 .tll-bar{gap:.6rem}
 .tll-q{flex:1 1 100%}
 .tll-fbtn,.tll-sort{flex:1 1 0}
 .tll-fbtn{justify-content:center}
 .tll-sort select{width:100%}.tll-sort{min-width:0}
 .tll-side{position:fixed!important;left:0;right:0;bottom:0;top:auto;z-index:285;display:none;max-height:86dvh;margin:0;padding:0 1.2rem 1.2rem;border-width:3px 0 0;border-radius:1.5rem 1.5rem 0 0;box-shadow:0 -6px 0 var(--pink);overflow:auto;transform:translateY(0);animation:tllUp .3s var(--ease)}
 .tll-side.open{display:grid}
 .tll-scrim{display:block;position:fixed;inset:0;z-index:284;background:rgba(9,47,110,.7)}.tll-scrim[hidden]{display:none}
 .tll-sh{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;margin:0 -1.2rem;padding:1rem 1.2rem .8rem;background:#fff;border-bottom:3px solid var(--navy);font-family:'Bowlby One','Arial Black',sans-serif;text-transform:uppercase}
 .tll-fx{display:grid;place-items:center;width:2.4rem;height:2.4rem;border:3px solid var(--navy);border-radius:50%;background:var(--pink);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer}
 .tll-apply{display:inline-flex;position:sticky;bottom:0;justify-content:center;margin-top:.6rem;box-shadow:0 -10px 0 #fff}
}
@keyframes tllUp{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
/* two compact cards across on a phone */
@media(max-width:700px){
 .tll-count{margin-bottom:.7rem}
 .tll-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
 .tlc{border-radius:1.1rem;box-shadow:3px 3px 0 var(--teal)}.tlc:nth-child(3n+2){box-shadow:3px 3px 0 var(--pink)}.tlc:nth-child(3n){box-shadow:3px 3px 0 var(--blue)}
 .tlc:hover{transform:none}
 .tlc-eye{display:none}
 .tlc-b{gap:.4rem;padding:.7rem .7rem .8rem}
 .tlc-top{flex-direction:column;gap:.3rem}.tlc-top h3{font-size:.86rem;line-height:1.2}
 .tlc-cat{max-width:100%;padding:.05rem .45rem;font-size:.6rem;align-self:flex-start;text-align:left}
 .tlc-b p,.tlc-meta{display:none}
 .tlc-tags{gap:.25rem}.tlc-tags span{padding:.05rem .45rem;font-size:.62rem}.tlc-tags span:nth-child(n+2){display:none}
 .tlc-act{gap:.35rem}.tlc-act .btn{padding:.45rem .3rem;font-size:.7rem}.tlc-act .lg{display:none}.tlc-act .sh{display:inline}
 .tll-empty{padding:1.2rem}
 .tll-q input{padding-left:2.7rem;font-size:.95rem}
}
@media(max-width:340px){.tll-grid{grid-template-columns:minmax(0,1fr)}.tlc-b p{display:block}}
/* the quick preview as a clean sheet on phones */
.tlq-box>*{flex:none}
.tlq-stage{align-items:start}
@media(max-width:700px){
 .tlq-box{gap:.7rem;padding:1rem .9rem .9rem;max-height:92dvh}
 .tlq-h{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:.5rem}
 .tlq-name{font-size:1.05rem;line-height:1.15;overflow-wrap:anywhere}
 .tlq-nav{gap:.35rem}.tlq-nav button{width:2.2rem;height:2.2rem}.tlq-pos{font-size:.76rem;white-space:nowrap}
 .tlq-x{margin-left:.1rem}
 .tlq-stage{padding:.6rem;min-height:0;border-radius:1rem;max-height:46dvh;overflow:auto}
 .tlq-stage .mkw{max-width:100%}
 .tlq-cap{font-size:.86rem}
 .tlq-f{flex-direction:column}.tlq-f .btn{width:100%;justify-content:center}
}
.tll-apply{gap:.3em}

/* =====================================================================
   MOCKUP SCREENSHOTS: show the whole width of the page, anchored at the top left
   (before, the screenshots were centred and cropped, so the left of the page was cut off on phones)
   ===================================================================== */
.wk-win.real img{flex:none;width:100%;height:auto;min-height:0;object-fit:fill;object-position:left top;background:#fff}
.wk-pb img,.spot-ph img{width:100%;height:auto;min-height:0;object-fit:fill;object-position:left top}
.spot-win img{height:auto;object-fit:fill;object-position:left top}
.wk-win.real{background:#fff}
@media(max-width:700px){.wk-top{min-height:12.6rem}}

/* SBS extras: four proper cards instead of a row of chips */
.sbx-x{display:grid;gap:.9rem;padding-top:1.3rem;border-top:3px dashed #b6c6f0}
.sbx-xh{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.sbx-xh b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.05rem;text-transform:uppercase;letter-spacing:0;opacity:1}
.sbx-xh span{padding:0;border:0;background:none;border-radius:0;font-size:.9rem;font-weight:600;opacity:.75}
.sbx-xg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.sbx-xc{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"i t" "p p";gap:.5rem .7rem;align-items:center;padding:.9rem .9rem .8rem;background:var(--soft);border:3px solid var(--navy);border-radius:1.1rem;color:var(--navy);text-decoration:none;box-shadow:3px 3px 0 var(--navy);transition:transform .3s var(--ease),box-shadow .3s,background .2s}
.sbx-xc:hover{transform:translateY(-4px);box-shadow:5px 7px 0 var(--pink);background:#fff}
.sbx-xc i{grid-area:i;display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:.7rem;background:var(--pink);color:#fff;border:3px solid var(--navy)}
.sbx-xc:nth-child(2) i{background:var(--teal);color:var(--navy)}.sbx-xc:nth-child(3) i{background:var(--blue)}.sbx-xc:nth-child(4) i{background:#f2a916;color:var(--navy)}
.sbx-xc i svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sbx-xc div{grid-area:t;min-width:0}.sbx-xc div b{display:block;font-size:.88rem;line-height:1.2;text-transform:none;opacity:1;letter-spacing:0;margin:0}.sbx-xc div small{display:block;margin-top:.15rem;font-size:.74rem;line-height:1.3;opacity:.7}
.sbx-xc strong{grid-area:p;display:flex;align-items:baseline;gap:.4rem;font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.6rem;line-height:1;color:var(--navy)}
.sbx-xc strong em{margin:0;font-family:'Outfit',sans-serif;font-style:normal;font-size:.8rem;font-weight:700;color:var(--pink)}
@media(max-width:1100px){.sbx-xg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.sbx-xg{grid-template-columns:minmax(0,1fr)}.sbx-xc{grid-template-columns:auto 1fr auto;grid-template-areas:"i t p"}.sbx-xc strong{flex-direction:column;align-items:flex-end;gap:.1rem;font-size:1.3rem}}

/* =====================================================================
   Start from a template (home): bigger, even cards with proper breathing room
   ===================================================================== */
#templates{padding-top:clamp(3.4rem,6vw,5.4rem);padding-bottom:clamp(3.4rem,6vw,5.4rem)}
#templates .sh-row{margin-bottom:2.4rem}
#templates .tmw{padding:1.2rem 0 2rem}
#templates .tmq{gap:1.9rem;padding:.7rem 1.9rem}
#templates .tmc{width:clamp(17.5rem,21vw,23rem);gap:.95rem}
#templates .tmc .tm{border-radius:1rem;box-shadow:.4rem .4rem 0 var(--pink)}
#templates .tmc:nth-child(3n+2) .tm{box-shadow:.4rem .4rem 0 var(--teal)}#templates .tmc:nth-child(3n) .tm{box-shadow:.4rem .4rem 0 var(--blue)}
#templates .tmc strong{font-size:1.05rem;letter-spacing:.02em;line-height:1.2;padding-left:.2rem}
#templates .sec-cta{margin-top:1.6rem}
@media(max-width:900px){#templates .sh-row{margin-bottom:1.8rem}#templates .tmq{gap:1.4rem;padding:.6rem 1.4rem}}
@media(max-width:620px){#templates .tmc{width:15.5rem}#templates .tmw{padding:.9rem 0 1.4rem}#templates .tmc strong{font-size:.95rem}#templates .sec-cta{margin-top:1.2rem}}

/* =====================================================================
   CARD SIZING: no lonely card on a last row, and bundles/plans stay three across until tablets
   ===================================================================== */
@media(min-width:901px){.wpg{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.wpg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.wpg{grid-template-columns:minmax(0,1fr)}}
.bncg{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.bncg{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.bnc-price>div:first-child b{font-size:2.3rem}.bnc-price>div:last-child b{font-size:1.5rem}.bnc>*:not(.bnc-top){margin-left:1rem;margin-right:1rem}.bnc-top{padding:1rem}.bnc-nm h3{font-size:1.4rem}.bnc-save{width:4.8rem;height:4.8rem;right:.6rem}.bnc-save b{font-size:.78rem}}
@media(max-width:900px){
 .bncg{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;margin-inline:-1.1rem;padding:.4rem 1.1rem 1.4rem;scrollbar-width:none}
 .bncg::-webkit-scrollbar{display:none}
 .bncg>*{flex:0 0 min(78%,22rem);scroll-snap-align:start}
 .bnc>*:not(.bnc-top){margin-left:1.4rem;margin-right:1.4rem}.bnc-top{padding:1.2rem 1.4rem 1.1rem}.bnc-nm h3{font-size:1.7rem}.bnc-price>div:first-child b{font-size:2.9rem}.bnc-price>div:last-child b{font-size:1.9rem}.bnc-save{width:5.7rem;height:5.7rem;right:1rem}.bnc-save b{font-size:.88rem}
}
@media(max-width:700px){.bncg>*{flex:0 0 86%}}
.orph{width:100%}
@media(max-width:1000px) and (min-width:901px){.bnc-save small{font-size:.56rem}.bnc-save{width:5rem;height:5rem}}

/* =====================================================================
   THE SBS SCHEME SECTION: navy band, one clean plan-style card (matches the rebrand and plan sections)
   ===================================================================== */
.sbn-s{position:relative;overflow:hidden;background:var(--navy);color:#fff}
.sbn-d{position:absolute;border-radius:50%;pointer-events:none}
.sbn-d.d1{right:-7rem;top:-8rem;width:26rem;height:26rem;background:rgba(45,208,197,.14)}
.sbn-d.d2{left:-6rem;bottom:-9rem;width:22rem;height:22rem;background:rgba(233,79,122,.16)}
.sbn-s .c{position:relative;z-index:2}
.sbn{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.sbn-l h2{margin:.5rem 0 .9rem;color:#fff}
.sbn-l p{margin:0 0 1.4rem;max-width:34rem;font-size:1.08rem;line-height:1.65;color:rgba(255,255,255,.92)}
.sbn-why{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.6rem}
.sbn-why span{padding:.3rem .9rem;border:2px solid rgba(255,255,255,.9);border-radius:99px;font-weight:700;font-size:.9rem;color:#fff}
.sbn-l .row{gap:.8rem;flex-wrap:wrap}
.sbn-card{position:relative;padding:2rem 1.8rem 1.7rem;background:#fff;color:var(--navy);border:3px solid #fff;border-radius:1.6rem;box-shadow:8px 8px 0 var(--pink)}
.sbn-rib{position:absolute;right:-.8rem;top:-1.1rem;padding:.35rem 1rem;background:var(--teal);color:var(--navy);border:3px solid var(--navy);font-weight:700;font-size:.85rem;transform:rotate(3deg);box-shadow:3px 3px 0 var(--navy)}
.sbn-t{display:block;margin-bottom:.4rem;font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.sbn-pr{display:flex;align-items:flex-end;gap:.9rem;flex-wrap:wrap}
.sbn-pr b{display:block;font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;line-height:1}
.sbn-pr>div:first-child b{font-size:3.4rem}.sbn-pr>div:last-child b{font-size:2.3rem;color:var(--pink)}
.sbn-pr span{display:block;margin-top:.25rem;font-weight:700;font-size:.85rem;opacity:.7}
.sbn-pr i{font-style:normal;font-family:'Bowlby One','Arial Black',sans-serif;font-size:1.6rem;padding-bottom:1.25rem;opacity:.5}
.sbn-nv{margin:.9rem 0 1.1rem;padding:.55rem .8rem;background:var(--soft);border-radius:.8rem;font-size:.88rem;font-weight:600}
.sbn-ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.sbn-ul li{position:relative;padding-left:2rem;line-height:1.4;font-weight:600}
.sbn-ul li::before{content:"\2713";position:absolute;left:0;top:.05rem;display:grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--teal);border:2px solid var(--navy);font-size:.72rem;font-weight:700}
.sbn-x{margin-top:clamp(2rem,4vw,3rem)}
.sbn-xh{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin-bottom:1rem}
.sbn-xh b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.15rem;text-transform:uppercase;color:#fff}
.sbn-xh span{font-weight:600;color:rgba(255,255,255,.8)}
.sbn-xg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.sbn-xc{display:grid;gap:.25rem;align-content:start;padding:1.1rem 1.2rem;background:#fff;color:var(--navy);border:3px solid #fff;border-radius:1.2rem;box-shadow:5px 5px 0 var(--teal);text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s}
.sbn-xc:nth-child(2){box-shadow:5px 5px 0 var(--pink)}.sbn-xc:nth-child(3){box-shadow:5px 5px 0 var(--blue)}.sbn-xc:nth-child(4){box-shadow:5px 5px 0 #f2a916}
.sbn-xc:hover{transform:translateY(-5px)}
.sbn-xc small{font-weight:700;font-size:.82rem;line-height:1.3;opacity:.75}
.sbn-xc b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:1.45rem;line-height:1.1}
.sbn-xc span{font-size:.85rem;opacity:.7}
@media(max-width:1000px){.sbn{grid-template-columns:minmax(0,1fr)}.sbn-xg{grid-template-columns:repeat(2,minmax(0,1fr))}.sbn-card{max-width:34rem}}
@media(max-width:620px){.sbn-xg{grid-template-columns:minmax(0,1fr)}.sbn-pr>div:first-child b{font-size:2.9rem}.sbn-pr>div:last-child b{font-size:2rem}.sbn-l .row .btn{width:100%;justify-content:center}.sbn-card{padding:1.8rem 1.3rem 1.4rem;box-shadow:5px 5px 0 var(--pink)}.sbn-rib{right:-.3rem}}
@media(max-width:760px){#sbs .sh-btns{display:none}#sbs .sh-row{margin-bottom:1.4rem}}

/* =====================================================================
   SBS: the offer banner (this is what makes it read as a promotion)
   ===================================================================== */
.sbp{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) auto;gap:clamp(1.4rem,3vw,2.6rem);align-items:center;margin:0 0 2.2rem;padding:1.8rem 2rem;background:var(--navy);color:#fff;border:3px solid var(--navy);border-radius:1.6rem;box-shadow:8px 8px 0 var(--pink);overflow:hidden}
.sbp::before{content:"";position:absolute;left:-4rem;top:-5rem;width:15rem;height:15rem;border-radius:50%;background:rgba(45,208,197,.16);pointer-events:none}
.sbp::after{content:"";position:absolute;right:8rem;bottom:-7rem;width:14rem;height:14rem;border-radius:50%;background:rgba(233,79,122,.18);pointer-events:none}
.sbp>*{position:relative;z-index:2;min-width:0}
.sbp-k{display:inline-block;margin-bottom:.7rem;padding:.2rem .8rem;border:2px solid var(--teal);border-radius:99px;color:var(--teal);font-weight:700;font-size:.78rem;letter-spacing:.04em}
.sbp-pr{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.sbp-pr b{display:block;font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;line-height:1}
.sbp-pr>div:first-child b{font-size:clamp(3.2rem,5vw,4.6rem)}.sbp-pr>div:last-child b{font-size:clamp(2.2rem,3.4vw,3.2rem);color:var(--teal)}
.sbp-pr span{display:block;margin-top:.3rem;font-weight:700;font-size:.9rem;opacity:.8}
.sbp-pr i{font-style:normal;font-family:'Bowlby One','Arial Black',sans-serif;font-size:1.8rem;padding-bottom:1.4rem;opacity:.6}
.sbp-m{display:grid;gap:.25rem;justify-items:start}
.sbp-w,.sbp-y{font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.75}
.sbp-m s{font-size:1.05rem;font-weight:600;opacity:.65;text-decoration-thickness:2px;text-decoration-color:var(--pink)}
.sbp-y{margin-top:.6rem;color:var(--teal);opacity:1}
.sbp-m strong{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.2}
.sbp-m .btn{margin-top:.9rem}
.sbp-st{display:grid;place-items:center;align-content:center;width:9.4rem;height:9.4rem;border-radius:50%;background:var(--pink);color:#fff;border:4px solid #fff;box-shadow:4px 4px 0 rgba(0,0,0,.25);text-align:center;transform:rotate(-9deg);animation:bncBob 4.8s ease-in-out infinite}
.sbp-st small{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.sbp-st b{font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:2.4rem;line-height:1.05}.sbp-st span{font-size:.78rem;font-weight:700;line-height:1.15;padding:0 .5rem}
.sbp-h{margin:0 0 1rem;font-size:1.05rem;letter-spacing:.02em}
@media(max-width:1000px){.sbp{grid-template-columns:minmax(0,1fr) auto;padding:1.5rem 1.4rem}.sbp-m{grid-column:1/-1;grid-row:2}.sbp-st{grid-column:2;grid-row:1;width:8rem;height:8rem}.sbp-st b{font-size:2rem}}
@media(max-width:620px){.sbp{grid-template-columns:minmax(0,1fr);box-shadow:5px 5px 0 var(--pink);padding:1.6rem 1.2rem 1.4rem}.sbp-st{position:absolute;right:.8rem;top:.8rem;grid-column:auto;grid-row:auto;width:6.4rem;height:6.4rem}.sbp-st b{font-size:1.5rem}.sbp-st small,.sbp-st span{font-size:.62rem}.sbp-k{max-width:62%}.sbp-m{grid-column:auto;grid-row:auto}.sbp-m .btn{width:100%;justify-content:center}.sbp-pr>div:first-child b{font-size:3rem}.sbp-pr>div:last-child b{font-size:2.1rem}}

/* the light-card SBS version: extras as a strip of small chips (as originally) */
.sbx-x{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding-top:1.1rem;border-top:3px dashed #b6c6f0}
.sbx-x b{margin-right:.4rem;font-family:inherit;font-weight:700;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;opacity:.7}
.sbx-x span{padding:.25rem .8rem;border:2px solid var(--navy);border-radius:99px;background:var(--soft);font-size:.82rem;font-weight:700}
.sbx-x em{font-style:normal;color:var(--pink);margin-left:.25rem}

/* ---- hero (desktop): one fixed composition, scaled as a whole so spacing and fit are identical at any width ---- */
@media(min-width:901px){
 .hero{display:block;min-height:0;padding:60px 0;zoom:var(--hz,1)}
 .hero .c{display:block;flex:none;width:1320px;max-width:none;margin-inline:auto}
 .hero .hero-top{grid-template-columns:560px 710px!important;column-gap:50px;justify-content:space-between;align-items:center}
 .hero .hero-top>div{max-width:none}
 .hero h1.t1{font-size:44px;line-height:1.13;max-width:none}
 .hero .eyebrow{margin-bottom:18px}
 .hero .hero-top p.lead{font-size:20px;line-height:1.75;max-width:560px;margin:20px 0 28px}
 .hero .hero-top .mock,.hero .plans-mock{width:710px;max-width:710px;justify-self:end;margin:0}
 .hero .pick{margin-top:52px}
}