/* Dream Captures site styles, on the hart.studio v2 engine */
    /* hart.studio v2. Light grey page, frosted-glass cards, 3D emoji and colour blocks that run off the edge.
   Desktop is laid out in design pixels: U(n) becomes n * --s, where --s is one Figma pixel at the current width.
   Pinned scenes also cap --s by the viewport height so the whole scene fits on screen.
   Scroll writes --p (0 to 1) on each [data-scene]; CSS turns it into movement. Single light look, as designed. */
:root{
  --bg:#f4f4f4;
  --ink:#1e1e1e;
  --ink2:#343534;
  --white:#ffffff;
  --orange:#ff6723;
  --orange-block:#ff6c37;
  --pink:#f92f60;
  --green:#00d26a;
  --blue:#2785ff;
  --blue-block:#0487e4;
  --deepgreen:#007b3e;
  --honey:#ffb02e;
  --sans:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif","Times New Roman",serif;
  --snap:cubic-bezier(.83,0,.17,1);
  --pop:cubic-bezier(.34,1.56,.64,1);
  --out:cubic-bezier(.2,.8,.2,1);
  --sw:calc(min(100vw,1680px) / 1440);
  --ps:var(--sw);
  --band:calc(385 * var(--ps));
  --s:var(--sw);
  --p:1; --mx:0; --my:0; --page:0;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:auto;background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.4;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
img{-webkit-user-drag:none}
svg{display:block}
em{font-style:normal}
:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.page{position:relative;overflow-x:clip}
.comp{position:relative;width:calc(1440 * var(--s));margin:0 auto}
.comp>*{position:absolute}
.hero,.imp,.commit,.plans,.work{--s:min(var(--sw),calc(100svh / var(--fh,950)))}
.commit{--s:min(var(--sw),calc((100svh - var(--band) - 106px) / var(--fh)))}

/* ---------- type ---------- */
.display{font-family:var(--sans);font-weight:700;font-size:calc(108 * var(--s));line-height:.955;letter-spacing:-.04em;text-transform:uppercase}
.it{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.905em;letter-spacing:-.025em;text-transform:none;line-height:0}
.eyebrow{font-weight:300;font-size:calc(48 * var(--s));letter-spacing:-.03em;line-height:1.15}
.lede{font-weight:500;font-size:calc(23 * var(--s));letter-spacing:.008em;line-height:1.35}
.line{display:block;overflow:hidden;padding-block:.08em .1em;margin-block:-.08em -.1em}
.line>span{display:block}

/* scroll-timed helpers: .t reads its start (--a) and length (--s2) from the scene's --p */
.t{--t:clamp(0,calc((var(--p) - var(--a)) / var(--s2,.1)),1)}
.t-fade{opacity:var(--t);translate:0 calc((1 - var(--t)) * 24px)}
.line.t>span{transform:translateY(calc((1 - var(--t)) * 110%))}

/* entry reveals */
.js .reveal:not(.rise){opacity:0;transform:translateY(36px);transition:opacity .6s ease,transform .9s var(--out);transition-delay:calc(var(--d,0) * 70ms)}
.js .reveal.in:not(.rise){opacity:1;transform:none}
.js .rise .line>span{transform:translateY(110%);transition:transform 1s var(--out);transition-delay:calc(var(--i,0) * 90ms)}
.js .rise.in .line>span{transform:none}
.js .rise .fade{opacity:0;transform:translateY(24px);transition:opacity .6s ease .25s,transform .9s var(--out) .25s}
.js .rise.in .fade{opacity:1;transform:none}

/* ---------- surfaces ---------- */
.glass{background:linear-gradient(135deg,rgb(255 255 255 / .82),rgb(255 255 255 / .55));-webkit-backdrop-filter:blur(calc(16 * var(--s))) saturate(1.25);backdrop-filter:blur(calc(16 * var(--s))) saturate(1.25);
  border:max(1px,calc(1.5 * var(--s))) solid rgb(255 255 255 / .95);border-radius:calc(16 * var(--s));box-shadow:0 calc(10 * var(--s)) calc(34 * var(--s)) rgb(30 30 30 / .08)}
.block{--bw:290;border-radius:calc(70 * var(--s)) 0 0 calc(70 * var(--s));width:calc(var(--bw) * var(--s) + (100vw - calc(1440 * var(--s))) / 2 + 12px)!important}
.block--orange{background:var(--orange-block)}
.block--pink{background:var(--pink);border-radius:0 calc(70 * var(--s)) calc(70 * var(--s)) 0;left:calc((100vw - calc(1440 * var(--s))) / -2 - 12px)!important}
.block--blue{background:var(--blue-block)}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.4em;height:calc(64 * var(--s));min-height:44px;padding:0 calc(30 * var(--s));border:0;border-radius:calc(10 * var(--s));background:var(--ink);color:#f4f4f4;
  box-shadow:0 calc(10 * var(--s)) calc(26 * var(--s)) rgb(30 30 30 / .16);font-family:var(--sans);font-weight:300;font-size:calc(29 * var(--s));letter-spacing:-.03em;line-height:1;text-decoration:none;text-transform:uppercase;white-space:nowrap;
  transition:transform .3s var(--pop),box-shadow .3s ease,background-color .2s}
.btn svg{width:.75em;transition:transform .3s var(--pop)}
.btn:hover{transform:translateY(-3px);box-shadow:0 calc(16 * var(--s)) calc(34 * var(--s)) rgb(30 30 30 / .22);background:#000}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn--sm{height:calc(56 * var(--s));padding:0 calc(22 * var(--s));font-size:calc(24 * var(--s))}
.btn--wide{width:calc(400 * var(--s))}
.btn--block{width:100%}

/* ---------- phone ---------- */
.phone{position:relative;width:100%;height:100%;container-type:size}
/* drawn to the MockUp.svg asset: same frame, rings, buttons, island and screen artwork, and its soft shadow down and to the left */
.phone__body{position:absolute;inset:0;border-radius:14.8cqw;background:#fff;border:1px solid #e0e1e6;box-shadow:-.65cqw 1.76cqw 3.6cqw rgb(88 89 92 / .3)}
.phone__body::before{content:"";position:absolute;inset:1.15cqw;border:1px solid #e0e1e6;border-radius:13.8cqw}
.phone__screen{position:absolute;inset:4.4cqw;overflow:hidden;border-radius:10.8cqw;background:#ebebed url(img/screen.webp) center/100% 100% no-repeat}
.phone__island{position:absolute;left:50%;top:2.6cqw;width:29.3cqw;height:8.4cqw;translate:-50% 0;border-radius:99px;background:#f5f5f6;border:1px solid #ececee}
.phone__island i{position:absolute;right:1cqw;top:50%;width:4.6cqw;aspect-ratio:1;translate:0 -50%;border-radius:50%;background:#e0e1e5}
.phone__island i::after{content:"";position:absolute;inset:25%;border-radius:50%;background:#a8aeb8}
.phone__btn{position:absolute;width:.75cqw;border-radius:2px 0 0 2px;background:#e3e4e8;left:-.75cqw}
.phone__btn.b1{top:19.1%;height:3.8%}.phone__btn.b2{top:26.3%;height:7.6%}.phone__btn.b3{top:36%;height:7.6%}
.phone__btn.b4{left:auto;right:-.75cqw;top:31.6%;height:12%;border-radius:0 2px 2px 0}

/* chat bubbles */
.bubble{display:flex;align-items:center;gap:calc(6 * var(--s));padding:0 calc(16 * var(--s));border:max(1px,calc(1.5 * var(--s))) solid rgb(255 255 255 / .95);border-radius:calc(12 * var(--s));color:#fff;font-weight:400;font-size:calc(16.6 * var(--s));letter-spacing:-.012em;white-space:nowrap;
  -webkit-backdrop-filter:blur(calc(7 * var(--s)));backdrop-filter:blur(calc(7 * var(--s)));box-shadow:0 calc(8 * var(--s)) calc(24 * var(--s)) rgb(30 30 30 / .1)}
.bubble--blue{background:linear-gradient(90deg,rgb(100 140 220 / .78),rgb(110 225 250 / .74))}
.bubble__emoji{width:calc(30 * var(--s));height:auto;margin-left:auto;flex:none}
.bubble--big{gap:calc(16 * var(--s));padding:0 calc(38 * var(--s));border-radius:calc(22 * var(--s));font-weight:400;font-size:calc(39 * var(--s));letter-spacing:-.022em}
.bubble--big .bubble__emoji{width:calc(56 * var(--s))}
.bubble--typing{display:grid;place-items:center;width:100%;height:100%;padding:0;background:rgb(70 70 70 / .3)}
.typing-cycle{transform-origin:14% 92%;animation:typingCycle 7.5s ease-in-out 6.9s infinite}
.tdots{display:flex;gap:calc(12 * var(--s))}
.tdots i{display:block;width:calc(15 * var(--s));aspect-ratio:1;border-radius:50%;background:#fff;animation:tdot 1.15s ease-in-out infinite;animation-delay:calc(var(--n) * .16s)}
@keyframes tdot{0%,55%,100%{transform:none;opacity:1}28%{transform:translateY(-55%);opacity:.75}}
@keyframes typingCycle{0%,52%{transform:scale(1);opacity:1}56%{transform:scale(1.08);opacity:1}62%,80%{transform:scale(0);opacity:0}86%{transform:scale(1.12);opacity:1}90%,100%{transform:scale(1);opacity:1}}
.avatar{display:grid;place-items:center;border-radius:50%;background:#f6f6f6;border:max(1px,calc(1.5 * var(--s))) solid #fff;box-shadow:0 calc(8 * var(--s)) calc(20 * var(--s)) rgb(30 30 30 / .1)}
.avatar img{width:65%;height:auto}

/* ---------- motion helpers ---------- */
.px{translate:calc(var(--mx) * var(--d,10) * 1px) calc(var(--my) * var(--d,10) * 1px)}
.js .pop{scale:0;transition:scale .7s var(--pop)}
.js .pop.on{scale:1}
@keyframes floatA{to{transform:translateY(-1.6%) rotate(1.4deg)}}
@keyframes sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg) translateY(-1.5%)}}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.8) rotate(16deg)}}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.1)}24%{transform:scale(.98)}36%{transform:scale(1.06)}48%{transform:scale(1)}}
@keyframes wobble{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes wave{0%,60%,100%{transform:rotate(0)}68%{transform:rotate(-14deg)}76%{transform:rotate(10deg)}84%{transform:rotate(-8deg)}92%{transform:rotate(4deg)}}
@keyframes bobble{to{transform:translateY(-6%)}}
@keyframes nudge{0%,82%,100%{transform:none}86%{transform:scale(1.06) rotate(-2deg)}92%{transform:scale(.98) rotate(1deg)}}
.sway{animation:sway 3.4s ease-in-out infinite alternate;transform-origin:50% 60%}
.twinkle{animation:twinkle 2.4s ease-in-out infinite}
.beat{animation:beat 1.6s ease-in-out infinite}
.wobble{animation:wobble 2.6s ease-in-out infinite alternate}
.wave{animation:wave 3.2s ease-in-out 1s infinite;transform-origin:30% 90%}

/* ---------- chrome ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:70;background:var(--ink);transform:scaleX(0);transform-origin:0 50%}
.top{position:fixed;z-index:50;top:0;left:0;right:0;height:0;pointer-events:none;--hs:var(--sw);--h:0}
.top>*{pointer-events:auto}
.burger,.logo-link{position:absolute;border:1px solid rgb(255 255 255 / calc(var(--h,0) * .95));background:rgb(255 255 255 / calc(var(--h,0) * .62));
  -webkit-backdrop-filter:blur(calc(var(--h,0) * 14px));backdrop-filter:blur(calc(var(--h,0) * 14px));box-shadow:0 8px 24px rgb(30 30 30 / calc(var(--h,0) * .1));transition:transform .3s var(--pop)}
.burger{left:max(16px,calc(100 * var(--hs) - var(--h,0) * 12px));top:calc(env(safe-area-inset-top,0px) + max(18px,calc(44 * var(--hs))) - var(--h,0) * 4px);width:calc(max(36px,44 * var(--hs)) + var(--h,0) * 24px);
  display:grid;gap:max(5px,calc(6.5 * var(--hs)));padding:calc(var(--h,0) * 13px) calc(var(--h,0) * 12px);border-radius:14px}
.burger i{display:block;height:max(4px,calc(5 * var(--hs)));border-radius:5px;background:var(--ink);transition:transform .3s var(--pop)}
.burger:hover i:nth-child(1){transform:translateX(5px)}
.burger:hover i:nth-child(3){transform:translateX(-5px)}
.logo-link{left:50%;top:calc(env(safe-area-inset-top,0px) + max(16px,calc(44 * var(--hs))) - var(--h,0) * 6px);width:calc(max(96px,149 * var(--hs)) - var(--h,0) * max(0px,calc(40 * var(--hs))));
  padding:calc(var(--h,0) * 10px) calc(var(--h,0) * 16px) calc(var(--h,0) * 9px);border-radius:999px;color:var(--ink);
  translate:calc(-50% + var(--h,0) * (50vw - 50% - max(16px,calc(100 * var(--hs))) + 8px)) 0}
.logo-link:hover{transform:rotate(-4deg) scale(1.05)}
.logo-link svg{width:100%;height:auto}

.menu{position:fixed;inset:0;z-index:90;display:grid;align-content:center;justify-items:center;gap:clamp(18px,4vh,40px);padding:24px;background:rgb(244 244 244 / .86);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);overflow:auto;
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.menu.is-open{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s}
.menu__nav{display:grid;justify-items:center;gap:.06em}
.menu__nav a{font-weight:700;font-size:clamp(2.8rem,9vw,7rem);line-height:1;letter-spacing:-.05em;text-transform:uppercase;text-decoration:none;transform:translateY(40px);opacity:0;
  transition:transform .6s var(--out),opacity .4s,color .2s;transition-delay:0s}
.menu.is-open .menu__nav a{transform:none;opacity:1;transition-delay:calc(.08s + var(--i) * 60ms),calc(.08s + var(--i) * 60ms),0s}
.menu__nav a:hover{color:var(--pink)}
.menu__svc{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.menu__mail{font-weight:400;letter-spacing:.02em;text-transform:uppercase}
.menu .svc{height:52px;font-size:22px}

/* ---------- hero ---------- */
.hero{--fh:960;position:relative;z-index:2}
.hero .comp{height:calc(960 * var(--s))}
.hero__phone{z-index:1;transform:translate(calc(var(--p) * calc(560 * var(--s))),calc(var(--p) * calc(140 * var(--s)))) rotate(calc(6.1deg + var(--p) * 30deg))}
.hero__phone .phone__body{animation:floatA 3.6s ease-in-out infinite alternate}
.js .hero__phone{animation:phoneIn 1.2s var(--pop) .45s both}
@keyframes phoneIn{from{transform:translate(0,calc(320 * var(--s))) rotate(-14deg) scale(.8);opacity:0}to{opacity:1}}
.hero__title{z-index:2;left:0;right:0;top:calc(268 * var(--s));text-align:center}
.js .hero .line>span{animation:lineUp 1s var(--out) both;animation-delay:calc(.15s + var(--i) * 95ms)}
@keyframes lineUp{from{transform:translateY(110%)}}
.hero__msg{z-index:3;transform:translate(calc(var(--p) * calc(420 * var(--s))),calc(var(--p) * calc(-160 * var(--s)))) rotate(calc(var(--p) * 14deg))}
.js .hero__msg{animation:msgIn .6s var(--pop) 3.5s both;transform-origin:92% 100%}
.js .hero__msg span{animation:none}
@keyframes msgIn{from{scale:0;rotate:-10deg}}
.hero__typing{z-index:3;transform:translate(calc(var(--p) * calc(-420 * var(--s))),calc(var(--p) * calc(40 * var(--s)))) rotate(calc(var(--p) * -12deg))}
.js .hero__typing{animation:popIn .5s var(--pop) 4.45s both;transform-origin:20% 100%}
.hero__ghost{z-index:4;transform:translate(calc(var(--p) * calc(-460 * var(--s))),calc(var(--p) * calc(80 * var(--s))))}
.js .hero__ghost{animation:popIn .5s var(--pop) 4.25s both}
.hero__ghost img{animation:wobble 2s ease-in-out infinite alternate}
@keyframes popIn{from{scale:0;rotate:-8deg}}
.hero__sub{left:0;right:0;top:calc(640 * var(--s));z-index:2;text-align:center;font-weight:300;font-size:calc(47 * var(--s));letter-spacing:-.025em;line-height:1;text-transform:uppercase}
.js .hero__sub{animation:fadeUp .8s var(--out) .75s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}}
.hero__cta{left:0;right:0;top:calc(813 * var(--s));z-index:2;display:flex;justify-content:center}
.js .hero__cta{animation:popIn .7s var(--pop) 1.1s both}
.hero__title,.hero__sub,.hero__cta{transform:translateY(calc(var(--p) * calc(-80 * var(--s))));opacity:calc(1 - var(--p) * 1.3)}

/* ---------- pinned stages ---------- */
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:clip;display:grid;align-content:center}

/* ---------- first impressions ---------- */
.imp{--fh:1000;height:145vh}
.imp .comp{height:calc(1000 * var(--s))}
.imp__eyebrow{left:0;right:0;top:calc(102 * var(--s));text-align:center}
.imp__title{left:0;right:0;top:calc(196 * var(--s));z-index:3;text-align:center}
.imp__phone{z-index:1;transform-origin:50% 0;translate:0 calc((1 - var(--t)) * calc(260 * var(--s)));
  -webkit-mask-image:linear-gradient(to bottom,#000 38%,transparent 51%);mask-image:linear-gradient(to bottom,#000 38%,transparent 51%)}
.deck{z-index:4;--dp:0}
.js .deck{opacity:clamp(0,calc((var(--p) - .2) / .3),1);translate:0 calc((1 - clamp(0,calc((var(--p) - .15) / .7),1)) * calc(200 * var(--s)))}
.swcard{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;padding:calc(92 * var(--s)) calc(36 * var(--s)) calc(36 * var(--s));text-align:center;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;
  transform:translateX(calc(900 * var(--s))) rotate(0deg);opacity:0;transition:transform .55s var(--out),opacity .45s ease;will-change:transform}
.swcard__emoji{position:absolute;left:50%;top:calc(-95 * var(--s));width:calc(189 * var(--s));height:auto;translate:-50% 0;pointer-events:none}
.swcard__text{font-weight:700;font-size:calc(46 * var(--s));letter-spacing:-.035em;line-height:1.05;text-wrap:balance}
.swcard.is-top{z-index:3;transform:none;opacity:1}
.swcard.is-next{z-index:2;transform:translateX(calc(calc(447 * var(--s)) * (1 - var(--dp))));opacity:calc(.42 + var(--dp) * .58);pointer-events:none}
.swcard.is-next .swcard__text{color:rgb(30 30 30 / calc(.45 + var(--dp) * .55))}
.swcard.is-gone{transform:translateX(calc(-300 * var(--s))) rotate(-10deg);opacity:0;pointer-events:none;visibility:hidden;transition:transform .5s var(--out),opacity .4s ease,visibility 0s linear .5s}
.swcard.is-later{pointer-events:none}
.swcard.is-drag{cursor:grabbing;transition:none}
.swcard--end{gap:calc(22 * var(--s));cursor:auto}
.swcard--end .swcard__text{font-size:calc(40 * var(--s))}
.swcard__row{display:flex;align-items:center;justify-content:center;gap:calc(18 * var(--s))}
.swcard__again{padding:.4em;border:0;background:none;color:var(--ink);font-weight:500;font-size:calc(20 * var(--s));text-decoration:underline;text-underline-offset:.2em}
/* until the first swipe, the deck demonstrates one: a fingertip presses on the card, drags it well to the left
   (the next card slides in to meet it), lets go, and the card springs back */
.js .deck:not(.is-hinted) .swcard.is-top:not(.is-drag){animation:swipeHint 3.4s cubic-bezier(.45,0,.25,1) 1.2s infinite}
@keyframes swipeHint{0%,30%,100%{translate:0 0;rotate:0deg}58%,64%{translate:-34% 0;rotate:-7deg}78%{translate:3% 0;rotate:1.2deg}88%{translate:-1% 0;rotate:0deg}}
.js .deck:not(.is-hinted) .swcard.is-next{animation:swipePeek 3.4s cubic-bezier(.45,0,.25,1) 1.2s infinite}
@keyframes swipePeek{0%,30%,100%{translate:0 0;opacity:1}58%,64%{translate:-30% 0}78%{translate:2% 0}88%{translate:0 0}}
.swcard.is-top::after{content:"";position:absolute;z-index:5;right:12%;bottom:12%;width:calc(48 * var(--s));height:calc(48 * var(--s));border-radius:50%;background:rgb(30 30 30 / .34);
  box-shadow:0 0 0 calc(5 * var(--s)) rgb(255 255 255 / .7),0 0 0 calc(14 * var(--s)) rgb(30 30 30 / .1),0 calc(8 * var(--s)) calc(18 * var(--s)) rgb(30 30 30 / .18);opacity:0;pointer-events:none}
.js .deck:not(.is-hinted) .swcard.is-top:not(.is-drag)::after{animation:swipeTouch 3.4s cubic-bezier(.45,0,.25,1) 1.2s infinite}
@keyframes swipeTouch{0%,18%{opacity:0;scale:1.6;translate:0 0}28%,30%{opacity:1;scale:1;translate:0 0}58%{opacity:1;scale:1;translate:-26% 0}66%,100%{opacity:0;scale:.7;translate:-30% 0}}
.deck__skip{position:absolute;z-index:7;left:50%;top:calc(100% + calc(30 * var(--s)));translate:-50% 0;padding:.6em 1em;border:0;border-radius:999px;background:var(--ink);color:#fff;font-size:16px;opacity:0;pointer-events:none}
.deck__skip:focus-visible{opacity:1;pointer-events:auto}

/* ---------- creative wingman ---------- */
.game{position:relative;padding:0}
.game .comp{height:calc(1090 * var(--s))}
.game__text{left:calc(100 * var(--s));top:calc(212 * var(--s));width:calc(860 * var(--s));z-index:2}
.game__text h2{margin-top:calc(36 * var(--s))}
.game__text .lede{width:calc(700 * var(--s));margin-top:calc(44 * var(--s))}
.game__btn{margin-top:calc(64 * var(--s))}
.game__block{top:calc(87 * var(--s));left:calc(1150 * var(--s));height:calc(849 * var(--s));transform:translateX(calc((1 - var(--p)) * calc(260 * var(--s))))}
.game__heart{z-index:1;transform:translate(calc((1 - var(--p)) * calc(200 * var(--s))),calc((1 - var(--p)) * calc(-120 * var(--s)))) rotate(calc((1 - var(--p)) * -18deg))}
.game__heart img{display:block;width:100%;height:auto}
/* cupid: the whole heart pops in, beats, then the arrow flies through it. Layers share one box (1386x1220 artwork). */
.cupid{position:relative;width:100%;aspect-ratio:1386/1220;will-change:transform;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cupid>*,.cupid__anim>*{position:absolute;inset:0}
.cupid__anim{display:none}
.js .cupid__anim{display:block}
.js .cupid__final{opacity:0}
/* the animated layers become the finished artwork; nothing is swapped at the end */
.js .cupid:not(.go):not(.done) .cupid__pop,.js .cupid:not(.go):not(.done) .cupid__clip{opacity:0}
.cupid.done .cupid__dent,.cupid.done .cupid__arrow--full{opacity:1}
.cupid__q,.cupid__arrow{position:absolute;inset:0;width:100%;height:100%;transform-origin:41.63% 40.82%}
.cupid__pop,.cupid__beat{position:absolute;inset:0;transform-origin:50% 60%}
.cupid__whole,.cupid__dent{position:absolute;inset:0;width:100%;height:100%}
.cupid__arrow--full{opacity:0}
.cupid__dent{opacity:0}
.cupid__burst{overflow:visible;pointer-events:none}
/* the soft shadow sits on each still image, so it is drawn once rather than on every frame of the animation */
/* one pre-drawn soft shadow for the heart and one for the arrow, both sitting under the heart, so the outline never doubles up or blinks */
.cupid .cupid__sh{position:absolute;left:-10.1%;top:-11.48%;width:120.2%;height:122.95%;max-width:none}
html:not(.js) .cupid__final{filter:drop-shadow(0 calc(24 * var(--s)) calc(30 * var(--s)) rgb(120 30 30 / .18))}
.cupid__burst line{stroke:var(--ink);stroke-width:14;stroke-linecap:round;stroke-dasharray:80 400;stroke-dashoffset:80}
.svdeck{z-index:3}
.svcard{position:absolute;left:0;top:0;width:100%;height:calc(330 * var(--s));display:block;color:var(--ink);text-decoration:none;opacity:0;visibility:hidden;transform:translateX(calc(80 * var(--s)));
  transition:opacity .45s ease,transform .7s var(--out),visibility 0s linear .7s}
.svcard.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .12s,transform .8s var(--pop) .05s,visibility 0s}
.svcard.is-out{opacity:0;visibility:visible;transform:translateX(calc(-90 * var(--s)));transition:opacity .35s ease,transform .6s var(--out),visibility 0s linear .6s}
.svcard__label{position:absolute;z-index:2;left:0;top:0;height:calc(84 * var(--s));display:flex;align-items:center;padding:0 calc(22 * var(--s));border:max(1px,calc(1.5 * var(--s))) solid rgb(255 255 255 / .95);border-radius:calc(16 * var(--s));
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 42%,rgb(255 255 255 / .5)),color-mix(in srgb,var(--c) 78%,transparent));-webkit-backdrop-filter:blur(calc(10 * var(--s)));backdrop-filter:blur(calc(10 * var(--s)));
  color:#fff;font-weight:700;font-size:calc(36 * var(--s));letter-spacing:-.035em;text-transform:uppercase;white-space:nowrap;box-shadow:0 calc(8 * var(--s)) calc(24 * var(--s)) rgb(30 30 30 / .08)}
.svcard__body{position:absolute;left:calc(20 * var(--s));top:calc(41 * var(--s));width:calc(402 * var(--s));height:calc(289 * var(--s));display:grid;align-content:start;gap:0;padding:calc(62 * var(--s)) calc(40 * var(--s)) calc(30 * var(--s)) calc(42 * var(--s))}
.svcard__title{white-space:nowrap;font-weight:700;font-size:calc(var(--tf,1) * calc(35 * var(--s)));letter-spacing:-.025em;line-height:1.05}
.svcard__line{margin-top:calc(18 * var(--s));font-size:calc(21 * var(--s));letter-spacing:-.02em}
.svcard__text{margin-top:calc(20 * var(--s));font-size:calc(19 * var(--s));letter-spacing:-.025em;line-height:1.11}
.svdeck__dots{position:absolute;left:calc(22 * var(--s));top:calc(356 * var(--s));display:flex;gap:calc(10 * var(--s))}
.dot{width:calc(14 * var(--s));min-width:10px;aspect-ratio:1;padding:0;border:0;border-radius:50%;background:rgb(30 30 30 / .18);transition:background-color .3s,transform .4s var(--pop)}
.dot.is-on{background:var(--ink);transform:scale(1.3)}
.dot::after{content:"";position:absolute;inset:-12px}
.dot{position:relative}

/* ---------- stripe wipe between scenes ---------- */
.zone{height:70vh;position:relative}
.wipe{position:fixed;inset:0;z-index:60;overflow:hidden;pointer-events:none}
.wipe__rot{position:absolute;left:50%;top:50%;width:230vmax;height:230vmax;margin:-115vmax 0 0 -115vmax;display:flex;flex-direction:column;transform:rotate(-31deg)}
.wipe i{flex:1;margin-block:-1px;border-radius:999px;background:var(--bg);will-change:transform;
  --in:clamp(0,calc((var(--p) - (.1 + var(--i) * .022)) / .26),1);
  --out2:clamp(0,calc((var(--p) - (.56 + var(--i) * .022)) / .26),1);
  transform:translateX(calc(-125% + var(--in) * 125% + var(--out2) * 125%))}
.wipe i:nth-child(4n+1){background:var(--orange)}
.wipe i:nth-child(4n+2){background:var(--pink)}
.wipe i:nth-child(4n+3){background:var(--green)}
.wipe i:nth-child(4n){background:var(--blue)}

/* ---------- commitment ---------- */
.commit{--fh:530;height:320vh}
.page>.commit{position:relative;z-index:3}
.commit .pin{grid-template-rows:minmax(0,1fr) var(--band);align-content:stretch;padding-top:96px}
.commit .comp{height:calc(530 * var(--s));align-self:center}
.commit__block{top:calc(23 * var(--s));height:calc(493 * var(--s));transform:translateX(calc((1 - clamp(0,(var(--p) - .27) * 11,1)) * calc(-760 * var(--s))))}
.perks{z-index:2}
.perk{position:absolute;inset:0}
.perk__card{position:absolute;inset:0;display:flex;align-items:flex-start;padding:calc(132 * var(--s)) calc(40 * var(--s)) 0 calc(55 * var(--s))}
.perk__text{font-weight:300;font-size:calc(40 * var(--s));letter-spacing:-.02em;line-height:1.24;text-transform:uppercase;transition:opacity .3s ease}
.perk__text b{font-weight:700;color:var(--pink)}
.perk__emoji{position:absolute;left:calc(37 * var(--s));top:calc(-161 * var(--s));width:calc(270 * var(--s));height:auto;transition:opacity .3s ease}
.js .perk{opacity:0;transform:translate(calc(-160 * var(--s)),calc(260 * var(--s)));transition:transform .9s var(--pop),opacity .25s ease}
.js .perk.on{opacity:1;transform:translate(calc(var(--n) * calc(8 * var(--s))),calc(var(--n) * calc(-8 * var(--s))))}
/* one card at a time: the next card waits well out to the left as a full-size, faint silhouette (like the deck under
   first impressions); when its turn comes it slides into place and the card it replaces moves on and fades.
   The silhouette is in by the time the pink block lands */
@media (min-width:761px) and (orientation:landscape),(min-width:1101px){
  .js .perk{transform:translateX(calc(-1000 * var(--s)));transition:transform .8s var(--out),opacity .45s ease}
  .js .perk.on{z-index:5;transform:none;transition:transform .8s var(--pop),opacity .3s ease}
  .js .perk.on:has(+ .perk.on){z-index:4;opacity:0;transform:translateX(calc(120 * var(--s))) scale(.96);transition:transform .7s var(--out),opacity .35s ease}
  .js :is(.perk.on,.perk:first-child) + .perk:not(.on){z-index:-1;opacity:.45;transform:translateX(calc(-310 * var(--s)))}
  .js .perks:not(.on) .perk:not(.on):not(:first-child){opacity:0;transform:translateX(calc(-1000 * var(--s)))}
  /* the first card also waits for the phone to settle, then slides in from the left */
  .js .perk:first-child:not(.on){opacity:0;transform:translateX(calc(-1000 * var(--s)))}
  .js .perk:not(.on):not(:first-child) .perk__emoji{opacity:0}
  .js .perk:not(.on):not(:first-child) .perk__text{opacity:.5}
}
.js .perk.on:has(+ .perk.on) .perk__text,.js .perk.on:has(+ .perk.on) .perk__emoji{opacity:0}
.js .perk:first-child{opacity:1;transform:none}
.commit__text{z-index:2}
.commit__text .lede{margin-top:calc(40 * var(--s));width:calc(500 * var(--s))}

/* the top of the next section's phone drops into the bottom of this screen once the last card lands.
   It is a copy of the process phone, aligned to it exactly, so the hand-off when the pin releases is invisible. */
.cband{position:relative;z-index:5;height:var(--band);overflow:visible;background:var(--bg);--s:var(--ps);pointer-events:none}
.cband__comp{position:relative;width:calc(1440 * var(--s));height:100%;margin:0 auto;--pt:0px}
.cband.gone{background:transparent}.cband.gone .cband__comp,.cband.gone .cband__phone,.cband.on.gone .cband__phone{visibility:hidden;transition:none}
.ph-top{position:absolute;left:calc(179 * var(--s));top:var(--pt);width:calc(1081 * var(--s));height:calc(2227 * var(--s));-webkit-mask-image:linear-gradient(to bottom,#000 43%,transparent 62.5%);mask-image:linear-gradient(to bottom,#000 43%,transparent 62.5%)}
.ph-msg{position:absolute;left:calc(611 * var(--s));top:calc(var(--pt) + calc(191 * var(--s)));width:calc(732 * var(--s));height:calc(122 * var(--s));z-index:2}
.ph-seen{position:absolute;left:calc(1176 * var(--s));top:calc(var(--pt) + calc(288 * var(--s)));width:calc(137 * var(--s));height:calc(64 * var(--s));z-index:3;display:grid;place-items:center;border:max(1px,calc(1.5 * var(--s))) solid rgb(255 255 255 / .95);border-radius:calc(26 * var(--s));
  background:rgb(229 229 229 / .55);-webkit-backdrop-filter:blur(calc(8 * var(--s)));backdrop-filter:blur(calc(8 * var(--s)));color:#9b9b9b;font-size:calc(30 * var(--s));font-weight:400;letter-spacing:-.02em;box-shadow:0 calc(6 * var(--s)) calc(16 * var(--s)) rgb(30 30 30 / .06);overflow:hidden}
.ph-seen .rr{grid-area:1/1}
.cband .ph-top{-webkit-mask-image:none;mask-image:none}
/* change of perspective, between the wingman and this section: the section arrives as a phone so close its screen
   fills the page, and the view pulls back until the phone sits at its normal size in the band. Then the heading and
   the perks play out, and once all four are in, the message arrives on the phone. Tied to the scroll, so scrolling
   back up plays it in reverse. The script sets --zs (scale) and --zo (opacity) */
.cband__phone{visibility:hidden;opacity:var(--zo,0);transform:scale(var(--zs,1));transform-origin:50% var(--zoy,15%);will-change:transform,opacity}
.cband.zoom .cband__phone,.cband.on .cband__phone{visibility:visible}
.cband.snap,.cband.snap *{animation:none!important;transition:none!important}
/* once it has landed, the message arrives, then Delivered turns to Seen */
.cband__msg{opacity:0;transform:translateY(calc(-110 * var(--s))) rotate(-5deg) scale(.88);transform-origin:92% 100%;transition:opacity .3s ease,transform .4s cubic-bezier(.5,0,.75,0)}
.cband.on .cband__msg{opacity:1;transform:none;transition:opacity .3s ease .15s,transform .8s var(--pop) .15s}
.cband__msg .bubble__emoji{scale:0;transition:scale .2s}
.cband.on .cband__msg .bubble__emoji{scale:1;transition:scale .5s var(--pop) .65s}
.cband__seen{opacity:0;transform:translateY(calc(-16 * var(--s)));transition:opacity .25s ease,transform .25s ease}
.cband.on .cband__seen{opacity:1;transform:none;transition:opacity .4s ease 1s,transform .5s var(--out) 1s}
.cband__seen .rr--d{font-size:calc(22 * var(--s))}
.cband__seen .rr--s{opacity:0}
.cband.on .rr--d{animation:rrOut .4s ease 2.15s both}
.cband.on .rr--s{animation:rrIn .45s var(--pop) 2.3s both}
@keyframes rrOut{to{opacity:0;transform:translateY(-70%)}}
@keyframes rrIn{from{opacity:0;transform:translateY(70%)}to{opacity:1;transform:none}}

/* ---------- process ---------- */
.process{position:relative;--s:var(--ps);height:calc(calc(1450 * var(--s)) + 190vh);margin-top:calc(-1 * (var(--band) + 43 * var(--ps)))}
.process .comp{--pt:calc(43 * var(--s))}
.process__stage{position:sticky;top:min(0px,calc(100svh - calc(1450 * var(--s))));height:calc(1450 * var(--s));overflow:clip}
.process .comp{height:calc(1450 * var(--s))}
.process__eyebrow{left:0;right:0;top:calc(536 * var(--s));text-align:center;z-index:2}
.process__title{left:0;right:0;top:calc(628 * var(--s));z-index:2;text-align:center}
.pcards{z-index:3}
.pcard{position:absolute;inset:0;--k:0;transform:translateX(calc(var(--k) * calc(457 * var(--s))));
  opacity:clamp(0,calc(1 - max(0,var(--k)) * .55 + min(0,var(--k)) * 1.6),1);will-change:transform}
.pcard__icon{position:absolute;z-index:2;left:50%;top:calc(-144 * var(--s));width:calc(288 * var(--s));aspect-ratio:1;translate:-50% 0}
.pcard__sphere{position:absolute;inset:0;width:100%;height:100%}
.pcard__emoji{position:absolute;left:20%;top:20%;width:60%;height:auto;transform:scale(calc(.82 + (1 - min(1,max(var(--k),calc(var(--k) * -1)))) * .18))}
.pcard__body.glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(135deg,rgb(255 255 255 / .9),rgb(255 255 255 / .72))}
.pcard__body{position:absolute;inset:0;display:grid;align-content:start;justify-items:center;gap:calc(10 * var(--s));padding:calc(150 * var(--s)) calc(48 * var(--s)) calc(30 * var(--s));text-align:center}
.pcard__title{font-weight:700;font-size:calc(46 * var(--s));letter-spacing:-.03em;line-height:1.05}
.pcard__text{max-width:calc(340 * var(--s));font-weight:500;font-size:calc(25.5 * var(--s));letter-spacing:.005em;line-height:1.58;color:var(--ink2)}
.pdots{left:0;right:0;top:calc(1412 * var(--s));display:flex;justify-content:center;gap:calc(12 * var(--s));z-index:3}
.pdots i{display:block;width:calc(12 * var(--s));min-width:8px;aspect-ratio:1;border-radius:50%;background:rgb(30 30 30 / .18);transition:background-color .3s,transform .4s var(--pop)}
.pdots i.on{background:var(--ink);transform:scale(1.35)}

/* ---------- plans ---------- */
.plans{--fh:760;height:165vh}
.plans .comp{height:calc(760 * var(--s))}
.plans__head{z-index:2}
.plans__price{display:flex;align-items:center;gap:calc(22 * var(--s));margin-top:calc(28 * var(--s))}
/* no price on show: a little exchange instead. They make the first move, we're typing, then we say yes to a call */
.pchat{display:grid;justify-items:start;gap:calc(12 * var(--s));margin-top:calc(32 * var(--s))}
.pchat__b{height:calc(58 * var(--s));gap:calc(10 * var(--s));padding:0 calc(20 * var(--s));border-radius:calc(16 * var(--s));font-size:calc(22 * var(--s));text-decoration:none}
.pchat__b .bubble__emoji{width:calc(32 * var(--s))}
.pchat__them{background:rgb(255 255 255 / .92);color:var(--ink);border-color:#fff;transform-origin:8% 100%}
.pchat__us,.pchat__typing{grid-area:2/1;margin-left:calc(90 * var(--s))}
.pchat__us{transform-origin:92% 100%;transition:transform .3s var(--pop),box-shadow .3s ease}
.pchat__us:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 calc(14 * var(--s)) calc(30 * var(--s)) rgb(30 30 30 / .16)}
.pchat__typing{width:calc(96 * var(--s));height:calc(58 * var(--s));opacity:0}
.js .pchat.in .pchat__them{animation:popIn .5s var(--pop) .35s both}
.js .pchat.in .pchat__typing{animation:typeBlip 1.1s ease .95s both}
.js .pchat.in .pchat__us{animation:msgIn .55s var(--pop) 2s both}
@keyframes typeBlip{0%{opacity:0;scale:.4}15%,80%{opacity:1;scale:1}100%{opacity:0;scale:.6}}
.price--talk{text-decoration:none;transition:transform .3s var(--pop),filter .2s}.price--talk:hover{transform:translateY(-3px) scale(1.03);filter:brightness(1.04)}
.price{display:grid;place-items:center;width:calc(208 * var(--s));height:calc(95 * var(--s));background:linear-gradient(90deg,#84e3aa,#b8d97c);color:var(--deepgreen);font-weight:700;font-size:calc(45 * var(--s));letter-spacing:-.01em;border-radius:calc(14 * var(--s))}
.plans__price span{font-weight:400;font-size:calc(40 * var(--s));letter-spacing:-.025em;line-height:1.12}
.plans__sub{margin-top:calc(56 * var(--s));font-weight:500;font-size:calc(26 * var(--s));letter-spacing:.005em;line-height:1.55}
.plans__block{top:calc(126 * var(--s));left:calc(1150 * var(--s));height:calc(539 * var(--s));--k:clamp(0,calc((var(--p) - .12) / .73),1);background:color-mix(in srgb,var(--blue) calc(var(--k) * 100%),var(--green));
  transform:translateX(calc((1 - clamp(0,var(--p) * 6,1)) * calc(300 * var(--s))))}
.plans__cards{z-index:3;--k:clamp(0,calc((var(--p) - .12) / .73),1)}
.plan{position:absolute;inset:0;transition:none}
.plan__emoji{position:absolute;z-index:2;left:calc(21 * var(--s));top:0;width:calc(143 * var(--s));height:auto}
.plan__card{position:absolute;left:0;top:calc(72 * var(--s));width:100%;height:calc(329 * var(--s));padding:calc(80 * var(--s)) calc(28 * var(--s)) 0 calc(31 * var(--s))}
.plan__for{font-weight:400;font-size:calc(17 * var(--s));letter-spacing:.01em;text-transform:uppercase}
.plan__title{margin-top:calc(28 * var(--s));font-weight:700;font-size:calc(28.5 * var(--s));letter-spacing:-.005em;line-height:.96;text-transform:uppercase}
.plan__title .g{color:var(--green)}
.plan__title .b{color:var(--blue)}
.plan__text{margin-top:calc(24 * var(--s));font-size:calc(18 * var(--s));letter-spacing:.005em;line-height:1.5}
.plan__btn{position:absolute;z-index:2;left:calc(20 * var(--s));top:calc(363 * var(--s));display:grid;place-items:center;width:calc(287 * var(--s));height:calc(74 * var(--s));border:max(1px,calc(1.5 * var(--s))) solid rgb(255 255 255 / .95);border-radius:999px;
  background:linear-gradient(90deg,rgb(255 176 46 / .82),rgb(220 180 60 / .82));-webkit-backdrop-filter:blur(calc(8 * var(--s)));backdrop-filter:blur(calc(8 * var(--s)));box-shadow:0 calc(10 * var(--s)) calc(24 * var(--s)) rgb(30 30 30 / .1);
  color:var(--ink);font-weight:700;font-size:calc(26 * var(--s));letter-spacing:.01em;text-decoration:none;text-transform:uppercase;transition:transform .3s var(--pop)}
.plan__btn:hover{transform:translateY(-3px) scale(1.03)}
.plan--launch{transform:translateX(calc(var(--k) * calc(-420 * var(--s))));opacity:calc(1 - var(--k) * 1.2)}
.plan--grow{transform:translateX(calc((1 - var(--k)) * calc(420 * var(--s))));opacity:calc(.92 + var(--k) * .08)}
.plan--grow .plan__card{background:linear-gradient(135deg,rgb(255 255 255 / calc(.18 + var(--k) * .64)),rgb(255 255 255 / calc(.12 + var(--k) * .43)))}
.plans__dots{left:calc(1270 * var(--s));top:calc(626 * var(--s));display:flex;gap:calc(10 * var(--s));z-index:3}

/* ---------- brands ---------- */
.brands{position:relative}
.brands .comp{height:calc(980 * var(--s))}
.brands__art{z-index:1}
.brands__heart{position:absolute;left:calc(64 * var(--s));top:0;width:calc(326 * var(--s))}
.brands__sparks{position:absolute;left:0;top:calc(66 * var(--s));width:calc(174 * var(--s));z-index:2}
.brands__art img{display:block;width:100%;height:auto}
.brands__title{left:0;right:0;top:calc(297 * var(--s));z-index:2;text-align:center}
.logos{left:calc(200 * var(--s));top:calc(590 * var(--s));width:calc(1042 * var(--s));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:calc(70 * var(--s))}
.logo{display:flex;align-items:center;justify-content:center;gap:.45em;height:calc(58 * var(--s));color:#b9b9bb;font-weight:800;font-size:calc(36 * var(--s));letter-spacing:-.04em;transition:color .25s}
.logo i{flex:none;display:block;width:1em;height:1em;background:currentColor;border-radius:50%}
.logo:nth-child(3n+2) i{border-radius:22%}
.logo:nth-child(4n+3) i{border-radius:50% 50% 0 50%}
.logo:nth-child(5n) i{border-radius:0;rotate:45deg;scale:.8}
.logo:nth-child(even){font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:calc(28 * var(--s))}
.logo:hover{color:var(--ink)}
.js .logo.reveal:not(.in){transform:translateY(22px) scale(.8)}

/* ---------- work: wide cards slide sideways ---------- */
.work{--fh:900;height:calc(var(--n) * 38vh + 100vh)}
.work .comp{height:calc(880 * var(--s))}
.work__eyebrow{left:0;right:0;top:calc(74 * var(--s));text-align:center}
.work__title{left:0;right:0;top:calc(168 * var(--s));text-align:center;font-size:calc(108 * var(--s));white-space:nowrap}
.wtrack{left:calc(100 * var(--s));display:flex;gap:calc(20 * var(--s));will-change:transform;transform:translateX(calc(var(--wx,0) * 1px)) skewX(calc(var(--wv,0) * 1deg))}
.wcard{position:relative;flex:none;width:calc(1240 * var(--s));height:calc(455 * var(--s))}
.wcard__media{position:absolute;left:0;top:0;width:100%;height:calc(394 * var(--s));overflow:hidden;border-radius:calc(20 * var(--s));background:linear-gradient(135deg,var(--g1),var(--g2));box-shadow:0 calc(14 * var(--s)) calc(40 * var(--s)) rgb(30 30 30 / .1)}
.wcard__img{position:absolute;left:-6%;top:0;width:112%;max-width:none;height:100%;object-fit:cover;object-position:100% 60%;transform:translateX(calc(var(--par,0) * 1px)) scale(calc(1 + var(--vz,0)))}
.wcard__ph{position:absolute;inset:0;display:grid;place-content:center start;justify-items:start;padding-left:calc(90 * var(--s));gap:calc(6 * var(--s));color:#fff;transform:translateX(calc(var(--par,0) * 1px))}
.wcard__ph::before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 25% 30%,rgb(255 255 255 / .42),transparent 42%),radial-gradient(circle at 78% 75%,rgb(30 30 30 / .18),transparent 46%)}
.wcard__ph b{position:relative;font-size:calc(220 * var(--s));font-weight:800;letter-spacing:-.06em;line-height:.85}
.wcard__ph span{position:relative;font-weight:500;font-size:calc(18 * var(--s));letter-spacing:.2em;text-transform:uppercase}
.wcard__info{position:absolute;z-index:2;left:calc(629 * var(--s));top:calc(108 * var(--s));width:calc(402 * var(--s));height:calc(347 * var(--s));padding:calc(30 * var(--s)) calc(29 * var(--s));display:grid;align-content:start;background:linear-gradient(135deg,rgb(255 255 255 / .86),rgb(255 255 255 / .66));
  transform:translateY(calc(var(--lift,0) * 1px))}
.wcard__tag{font-weight:500;font-size:calc(17 * var(--s));letter-spacing:.22em;text-transform:uppercase}
.wcard__title{margin-top:calc(18 * var(--s));font-weight:700;font-size:calc(30 * var(--s));letter-spacing:-.005em;line-height:1;text-transform:uppercase}
.wcard__text{margin-top:calc(16 * var(--s));font-size:calc(18 * var(--s));line-height:1.5}
.wcard__info .btn{position:absolute;left:calc(29 * var(--s));right:calc(29 * var(--s));bottom:calc(38 * var(--s));width:auto}
.wbar{left:calc(100 * var(--s));right:calc(100 * var(--s));bottom:calc(18 * var(--s));height:3px;border-radius:3px;background:rgb(30 30 30 / .1);overflow:hidden}
.wbar i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(calc(.2 + var(--p) * .8))}

.round-btn{display:grid;place-items:center;width:52px;aspect-ratio:1;border:1px solid rgb(255 255 255 / .95);border-radius:50%;background:rgb(255 255 255 / .8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 20px rgb(30 30 30 / .1);color:var(--ink);transition:transform .25s var(--pop),background-color .2s}
.round-btn svg{width:34%}
.round-btn:hover{transform:scale(1.08);background:#fff}
.round-btn:disabled{opacity:.35;pointer-events:none}
.casebox{position:fixed;inset:0;z-index:95;display:grid;align-items:stretch;padding:clamp(14px,3.2vh,34px) 0 clamp(70px,10vh,90px);background:rgb(244 244 244 / .8);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);
  --peek:clamp(14px,3.6vw,56px);--gap:clamp(10px,1.4vw,22px);overflow:hidden;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.casebox.is-open{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s}
.casebox__track{display:flex;gap:var(--gap);min-height:0;padding:0 var(--peek);transition:transform .8s var(--snap);will-change:transform}
.casebox:not(.is-open) .case{transform:translateY(40vh) scale(.9)}
.case{position:relative;flex:none;width:100%;min-height:0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(16px,5vw,80px);padding:clamp(18px,2.8vw,40px);
  border:1px solid rgb(255 255 255 / .95);border-radius:clamp(16px,2vw,24px);background:rgb(255 255 255 / .82);box-shadow:0 20px 60px rgb(30 30 30 / .1);color:var(--ink);overflow:hidden;
  transition:opacity .5s ease,transform .75s var(--snap);opacity:.45;cursor:pointer}
.case.is-current{opacity:1;cursor:auto}
.case__info{position:relative;display:grid;align-content:start;gap:clamp(12px,1.4vw,20px);min-width:0;padding-right:clamp(0px,3vw,40px)}
.case__title{font-weight:700;font-size:clamp(1.8rem,3.4vw,3.2rem);letter-spacing:-.04em;line-height:1;text-transform:uppercase}
.case__desc{max-width:30em;font-size:clamp(.95rem,1.15vw,1.1rem);line-height:1.5}
.ring{position:absolute;left:0;bottom:0;width:30px;height:30px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3}
.ring__bg{stroke:#e2e2e4}
.ring__fg{stroke:var(--pink);stroke-linecap:round;stroke-dasharray:62.84;stroke-dashoffset:calc(62.84 * (1 - var(--q,0)))}
.case__view{position:relative;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;border-radius:14px;scrollbar-width:none}
.case__view::-webkit-scrollbar{display:none}
.case:not(.is-current) .case__view{overflow:hidden;pointer-events:none}
.case__col{display:grid;gap:clamp(16px,3vw,40px);padding-block:4px}
.shot{position:relative;margin:0;overflow:hidden;border-radius:14px;background:linear-gradient(150deg,var(--g1),var(--g2));transform:skewY(var(--skew,0deg)) scaleY(var(--stretch,1));will-change:transform}
.shot--img img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;transform:translateY(var(--par,0px))}
.shot__in{position:absolute;inset:-9% 0;display:grid;place-content:center;justify-items:center;gap:.3em;color:var(--white);text-align:center;transform:translateY(var(--par,0px))}
.shot__in::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 22% 28%,rgb(255 255 255 / .38),rgb(255 255 255 / 0) 42%),radial-gradient(circle at 80% 76%,rgb(30 30 30 / .2),rgb(30 30 30 / 0) 46%)}
.shot__in b{position:relative;font-size:clamp(2.6rem,9vw,8rem);font-weight:800;letter-spacing:-.06em;line-height:.9}
.shot__in span{position:relative;font-weight:500;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.casebox__close{position:absolute;z-index:2;top:calc(clamp(14px,3.2vh,34px) + clamp(12px,1.8vw,26px));right:calc(var(--peek) + clamp(12px,1.8vw,26px))}
.casebox__nav{position:absolute;z-index:2;left:50%;bottom:clamp(12px,2vh,20px);translate:-50% 0;display:flex;gap:10px}
#casePrev svg{transform:rotate(180deg)}

/* ---------- FAQ ---------- */
.faq{position:relative;padding:calc(87 * var(--s)) 0 calc(150 * var(--s))}
.faq__head{position:relative;width:calc(1440 * var(--s));margin:0 auto;text-align:center}
.faq__hearts{position:absolute;left:calc(977 * var(--s));top:calc(-41 * var(--s));width:calc(196 * var(--s))}
.faq__hearts img{display:block;width:100%;height:auto}
.faq__list{width:calc(822 * var(--s));margin:calc(26 * var(--s)) auto 0;display:grid;gap:calc(18 * var(--s))}
.qa{border-radius:calc(12 * var(--s));text-align:left;transition:transform .3s var(--pop),box-shadow .3s ease}
.qa:hover{transform:translateY(-2px);box-shadow:0 calc(14 * var(--s)) calc(34 * var(--s)) rgb(30 30 30 / .1)}
.qa__q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:calc(86 * var(--s));padding:calc(12 * var(--s)) calc(32 * var(--s)) calc(12 * var(--s)) calc(30 * var(--s));border:0;background:none;text-align:left;
  font-weight:700;font-size:calc(33 * var(--s));letter-spacing:.004em;line-height:1.1;text-transform:uppercase}
.plus{position:relative;flex:none;width:calc(30 * var(--s));min-width:18px;aspect-ratio:1;transition:transform .45s var(--pop)}
.plus::before,.plus::after{content:"";position:absolute;left:0;right:0;top:50%;height:max(3px,calc(6 * var(--s)));translate:0 -50%;border-radius:1px;background:var(--ink);transition:transform .45s var(--pop)}
.plus::after{transform:rotate(90deg)}
.qa.is-open .plus{transform:rotate(180deg)}
.qa.is-open .plus::after{transform:rotate(0deg)}
.qa__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--snap)}
.qa.is-open .qa__a{grid-template-rows:1fr}
.qa__a>div{overflow:hidden;min-height:0}
.qa__a p{max-width:60ch;padding:0 calc(30 * var(--s)) calc(26 * var(--s));font-size:max(15px,calc(21 * var(--s)));line-height:1.5}

/* ---------- match ---------- */
.match{position:relative}
.match .comp{height:calc(800 * var(--s))}
.match__text{left:calc(100 * var(--s));top:calc(208 * var(--s));width:calc(800 * var(--s));z-index:2}
.match__text .lede{margin-top:calc(42 * var(--s));font-size:calc(24.5 * var(--s))}
.match__text .btn{margin-top:calc(70 * var(--s))}
.match__block{top:calc(68 * var(--s));left:calc(1047 * var(--s));height:calc(730 * var(--s));transform:translateX(calc((1 - var(--p)) * calc(300 * var(--s))))}
.match__hand{z-index:1}
.match__hand span{display:block}
.match__hand img{display:block;width:100%;height:auto;filter:drop-shadow(0 calc(20 * var(--s)) calc(26 * var(--s)) rgb(0 40 90 / .2))}
.js .drop{transform:translateY(calc(-260 * var(--s))) rotate(-30deg);opacity:0;transition:transform .9s cubic-bezier(.3,1.45,.5,1),opacity .2s}
.js .drop.on{transform:none;opacity:1}
.match__card{z-index:2;background:linear-gradient(135deg,rgb(255 255 255 / .82),rgb(255 255 255 / .6))}
.checks{position:absolute;inset:0}
.checks li{position:absolute;left:calc(-34 * var(--s));display:flex;align-items:center;gap:calc(29 * var(--s));width:calc(400 * var(--s))}
.checks li:nth-child(1){top:calc(61 * var(--s))}.checks li:nth-child(2){top:calc(140 * var(--s))}.checks li:nth-child(3){top:calc(220 * var(--s))}
.chk{flex:none;width:calc(69 * var(--s));height:auto}
.checks span{font-weight:700;font-size:calc(22 * var(--s));letter-spacing:.005em;line-height:1.18;text-transform:uppercase;max-width:calc(285 * var(--s))}
.js .slap{opacity:0;scale:1.7;rotate:-8deg;transition:scale .42s cubic-bezier(.2,1.5,.4,1),rotate .42s var(--out),opacity .12s}
.js .slap.on{opacity:1;scale:1;rotate:0deg}

/* ---------- footer ---------- */
.foot{position:relative}
.foot .comp{height:calc(834 * var(--s))}
.status{left:calc(99 * var(--s));top:calc(196 * var(--s));width:calc(402 * var(--s));height:calc(528 * var(--s));padding:calc(132 * var(--s)) calc(30 * var(--s)) calc(30 * var(--s)) calc(31 * var(--s))}
.status__cat{position:absolute;left:calc(21 * var(--s));top:calc(-145 * var(--s));width:calc(256 * var(--s));height:auto}
.status__title{font-weight:700;font-size:calc(46 * var(--s));letter-spacing:-.04em;line-height:1.02;text-transform:uppercase}
.status__line{margin-top:calc(46 * var(--s));font-size:calc(25 * var(--s));letter-spacing:-.035em;line-height:1.17}
.status__strong{margin-top:calc(36 * var(--s));font-weight:700;font-size:calc(31 * var(--s));letter-spacing:-.03em;line-height:1.16}
.talk{left:calc(520 * var(--s));top:calc(136 * var(--s));width:calc(820 * var(--s))}
.talk__label{display:block;height:calc(61 * var(--s));font-weight:700;font-size:calc(48 * var(--s));letter-spacing:-.045em;line-height:1.1;text-transform:uppercase}
.talk__box{position:relative;display:grid;gap:calc(12 * var(--s));padding:calc(20 * var(--s)) calc(21 * var(--s)) calc(96 * var(--s));border-radius:calc(20 * var(--s));background:#eaeaec}
/* the form asks which plan fits (startup or established) up front, so every call starts in the right place */
.talk__row{display:flex;flex-wrap:wrap;align-items:center;gap:calc(8 * var(--s))}
.talk__lab{width:calc(150 * var(--s));font-weight:700;font-size:calc(14 * var(--s));letter-spacing:.08em;text-transform:uppercase}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;gap:.4em;height:calc(40 * var(--s));padding:0 calc(16 * var(--s));border-radius:999px;background:#fff;font-size:max(13px,calc(16 * var(--s)));box-shadow:inset 0 0 0 1px rgb(30 30 30 / .08);pointer-events:none;transition:background-color .2s,color .2s,transform .3s var(--pop)}
.chip span i{font-style:normal;font-weight:700;color:var(--green)}
.chip:nth-of-type(2) span i{color:var(--blue)}
.chip:hover span{transform:translateY(-1px)}
.chip input:checked+span{background:var(--ink);color:#fff}
.chip input:checked+span i{color:inherit}
.chip input:focus-visible+span{outline:3px solid var(--ink);outline-offset:2px}
.talk__fields{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(10 * var(--s))}
.talk__fields input{min-width:0;height:calc(52 * var(--s));padding:0 calc(18 * var(--s));border:0;border-radius:calc(14 * var(--s));background:#fff;color:var(--ink);font:inherit;font-size:max(16px,calc(18 * var(--s)));box-shadow:inset 0 0 0 1px rgb(30 30 30 / .04)}
.talk__fields input:focus{outline:3px solid var(--ink);outline-offset:2px}
.talk__fields input::placeholder{color:#9a9a9a}
.talk textarea{display:block;width:100%;height:calc(120 * var(--s));padding:calc(18 * var(--s)) calc(20 * var(--s));border:0;border-radius:calc(16 * var(--s));background:#fff;color:var(--ink);font:inherit;font-size:max(16px,calc(20 * var(--s)));resize:none;box-shadow:inset 0 0 0 1px rgb(30 30 30 / .04)}
.talk textarea::placeholder{color:#9a9a9a}
.talk textarea:focus{outline:3px solid var(--ink);outline-offset:2px}
.talk__send{position:absolute;right:calc(30 * var(--s));bottom:calc(21 * var(--s));height:calc(64 * var(--s));font-size:calc(29 * var(--s))}
.talk__status{margin-top:calc(10 * var(--s));font-weight:500;font-size:max(14px,calc(16 * var(--s)))}
.services{left:calc(520 * var(--s));top:calc(590 * var(--s))}
.services__title{font-weight:700;font-size:calc(22 * var(--s));letter-spacing:-.04em;text-transform:uppercase}
.services__row{display:flex;flex-wrap:wrap;gap:calc(10 * var(--s));margin-top:calc(17 * var(--s))}
.svc{display:inline-grid;place-items:center;height:calc(64 * var(--s));min-height:40px;padding:0 calc(22 * var(--s));border-radius:calc(10 * var(--s));color:#f4f4f4;font-weight:300;font-size:calc(29 * var(--s));letter-spacing:-.03em;line-height:1;text-decoration:none;text-transform:uppercase;
  box-shadow:0 calc(10 * var(--s)) calc(24 * var(--s)) rgb(30 30 30 / .1);transition:transform .3s var(--pop),filter .2s}
.svc:hover{transform:translateY(-4px) rotate(-2deg);filter:brightness(1.06)}
.svc--product{background:var(--orange)}.svc--brand{background:var(--pink)}.svc--content{background:var(--blue)}.svc--design{background:var(--green)}
.js .services .svc{scale:0;transition:scale .6s var(--pop),transform .3s var(--pop);transition-delay:calc(.2s + var(--i) * 90ms),0s}
.js .services.in .svc{scale:1}
.foot__links{left:calc(521 * var(--s));top:calc(728 * var(--s));display:flex;gap:calc(38 * var(--s));font-weight:700;font-size:calc(22 * var(--s));letter-spacing:-.03em;text-transform:uppercase}
.foot__links a{position:relative;text-decoration:none}
.foot__links a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--snap)}
.foot__links a:hover::after{transform:scaleX(1)}
.foot__logo{left:calc(1217 * var(--s));top:calc(657 * var(--s));width:calc(120 * var(--s));color:var(--ink);transition:transform .3s var(--pop)}
.foot__logo:hover{transform:rotate(-4deg) scale(1.06)}
.foot__logo svg{width:100%;height:auto}
.foot__legal{left:calc(1133 * var(--s));top:calc(768 * var(--s));display:flex;gap:calc(18 * var(--s));font-size:calc(14 * var(--s));letter-spacing:.04em;text-transform:uppercase}
.foot__legal a{color:rgb(30 30 30 / .6);text-decoration:none}.foot__legal a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.25em}
.foot__mail{left:calc(1133 * var(--s));top:calc(736 * var(--s));font-size:calc(16.5 * var(--s));letter-spacing:-.02em;text-transform:uppercase;user-select:all}

/* flying hearts */
.fx-heart{position:fixed;z-index:210;left:0;top:0;width:28px;height:26px;pointer-events:none;will-change:transform}

/* ===================== phones and small tablets ===================== */
/* phones: see mobile.css */


/* ================= Dream Captures re-skin =================
   Hart's page flow and scroll scenes, dressed in the Dream Captures identity: navy and royal blue ink on a cool
   lavender page, one bright colour per program (purple, green, yellow, cyan), Bricolage Grotesque for every word,
   their hand-drawn doodles and sticker labels in place of Hart's 3D emoji. Single light look, as the brand is. */
:root{
  --bg:#f1f4fd;
  --ink:#061795;
  --ink2:#26338f;
  --royal:#0337f2;
  --deep:#051476;
  --white:#ffffff;
  --ba:#b802f5;   /* before and after school */
  --sp:#2fd12f;   /* sports */
  --su:#f6d528;   /* summer and intersession */
  --en:#2fc6ec;   /* enrichment */
  --cta:#53d9f5;
  /* Hart's colour names, pointed at Dream Captures colours so every inherited rule follows */
  --orange:var(--ba);--orange-block:var(--ba);--pink:var(--royal);--green:var(--sp);--blue:var(--en);--blue-block:var(--royal);--honey:var(--su);--deepgreen:var(--ink);
  --sans:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --serif:var(--sans);
}
html,body{background:var(--bg);color:var(--ink)}
body{font-family:var(--sans);font-optical-sizing:auto}
:focus-visible{outline-color:var(--royal)}

.display{font-weight:800;letter-spacing:-.035em;line-height:.95;font-variation-settings:"wdth" 92}
/* the accent word: their royal blue with a hand-drawn marker swipe underneath, instead of Hart's serif italic */
.it{font-family:var(--sans);font-style:normal;font-weight:800;font-size:1em;letter-spacing:-.035em;text-transform:inherit;line-height:inherit;color:var(--royal);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 15c40-7 78-9 118-6s82 6 120 1 40-6 54-4' fill='none' stroke='%2353d9f5' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") 0 92%/100% .26em no-repeat;
  padding-bottom:.02em}
.eyebrow{font-weight:400;color:var(--ink2)}
.lede{font-weight:400;color:var(--ink2)}

.glass{background:linear-gradient(135deg,rgb(255 255 255 / .9),rgb(255 255 255 / .66));box-shadow:0 calc(10 * var(--s)) calc(34 * var(--s)) rgb(6 23 149 / .09)}
.btn{border-radius:999px;background:var(--ink);color:#fff;font-weight:600;letter-spacing:-.01em;box-shadow:0 calc(10 * var(--s)) calc(26 * var(--s)) rgb(6 23 149 / .22)}
.btn:hover{background:var(--royal)}
.progress{background:var(--royal)}
.burger i{background:var(--ink)}
.logo-link img{display:block;width:100%;height:auto}
.logo-link{width:calc(max(120px,180 * var(--hs)) - var(--h,0) * max(0px,calc(40 * var(--hs))))}
.top__cta{position:absolute;right:max(16px,calc(100 * var(--hs)));top:calc(env(safe-area-inset-top,0px) + max(18px,calc(44 * var(--hs))));display:inline-grid;place-items:center;height:44px;padding:0 22px;border-radius:999px;background:var(--cta);color:#000;font-weight:600;font-size:15px;text-decoration:none;
  box-shadow:0 8px 20px rgb(6 23 149 / .14);opacity:calc(1 - var(--h,0));pointer-events:auto;transition:transform .3s var(--pop)}
.top__cta:hover{transform:translateY(-2px)}
.menu{background:rgb(241 244 253 / .9)}
.menu__nav a{font-weight:800}
.menu__nav a:hover{color:var(--royal)}

/* chat bubbles in their blue */
.bubble--blue{background:linear-gradient(90deg,rgb(3 55 242 / .88),rgb(47 198 236 / .86))}
.bubble--typing{background:rgb(6 23 149 / .28)}
.okdot{display:block;aspect-ratio:1}
.okdot svg{width:100%;height:100%}
.phone__screen{background:linear-gradient(rgb(255 255 255 / .35),rgb(255 255 255 / .35)),#cfe9fb url(img/bg-enrichment.webp) center/cover no-repeat}
.avatar img{width:72%}

/* hero doodles */
.hero__doodle{left:calc(150 * var(--s));top:calc(150 * var(--s));width:calc(170 * var(--s));z-index:1;animation:sway 4s ease-in-out infinite alternate;transform:translate(calc(var(--p) * calc(-300 * var(--s))),0)}
.hero__doodle2{left:calc(1130 * var(--s));top:calc(560 * var(--s));width:calc(130 * var(--s));z-index:1}
.hero__doodle2{animation:twinkle 2.6s ease-in-out infinite}
.js .hero__doodle,.js .hero__doodle2{opacity:0;animation:popIn .6s var(--pop) 1.4s both,sway 4s ease-in-out 2s infinite alternate}
.hero__sub{font-weight:400;color:var(--ink2)}

/* swipe deck and perks carry their line icons */
.swcard__emoji{width:calc(150 * var(--s));top:calc(-75 * var(--s));filter:drop-shadow(0 calc(10 * var(--s)) calc(16 * var(--s)) rgb(6 23 149 / .18))}
.swcard__text{color:var(--ink)}
.swcard.is-next .swcard__text{color:rgb(6 23 149 / calc(.45 + var(--dp) * .55))}
.swcard.is-top::after{background:rgb(6 23 149 / .34);box-shadow:0 0 0 calc(5 * var(--s)) rgb(255 255 255 / .7),0 0 0 calc(14 * var(--s)) rgb(6 23 149 / .1),0 calc(8 * var(--s)) calc(18 * var(--s)) rgb(6 23 149 / .18)}
.swcard__again{color:var(--ink)}
.perk__emoji{width:calc(190 * var(--s));top:calc(-120 * var(--s));filter:drop-shadow(0 calc(10 * var(--s)) calc(18 * var(--s)) rgb(6 23 149 / .2))}
.perk__text{font-weight:400}
.perk__text b{font-weight:800;color:var(--royal)}
.commit__block{background:var(--royal)}

/* the four program stickers that pop onto the purple block (in place of Hart's cupid) */
.collage{z-index:1}
.game__heart .stk,.collage .stk{position:absolute;display:block;width:calc(360 * var(--s));height:auto;filter:drop-shadow(0 calc(12 * var(--s)) calc(16 * var(--s)) rgb(6 23 149 / .25));rotate:var(--r)}
.stk--1{left:calc(40 * var(--s));top:calc(0 * var(--s));--r:-7deg}
.stk--2{left:calc(300 * var(--s));top:calc(110 * var(--s));--r:5deg}
.stk--3{left:calc(400 * var(--s));top:calc(240 * var(--s));--r:-4deg}
.stk--4{left:calc(420 * var(--s));top:calc(380 * var(--s));--r:6deg}
.js .stk{scale:0;transition:scale .7s var(--pop)}
.js .stk.on{scale:1}
.stk:hover{animation:wiggle .45s ease-in-out}
@keyframes wiggle{25%{rotate:calc(var(--r) - 4deg)}75%{rotate:calc(var(--r) + 4deg)}}
.game__heart .stk-doodle{position:absolute;display:block;height:auto;left:calc(20 * var(--s));top:calc(190 * var(--s));width:calc(140 * var(--s));filter:brightness(0) invert(1)}
.game__block{background:var(--ba)}
.svcard__label{color:var(--lc,#fff);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 70%,rgb(255 255 255 / .5)),var(--c))}
.svcard__title,.svcard__line,.svcard__text{color:var(--ink)}
.svcard:hover .svcard__body{box-shadow:0 calc(16 * var(--s)) calc(40 * var(--s)) rgb(6 23 149 / .16)}
.dot{background:rgb(6 23 149 / .18)}
.dot.is-on{background:var(--ink)}

/* stripes between scenes: one colour per program */
.wipe i:nth-child(4n+1){background:var(--ba)}
.wipe i:nth-child(4n+2){background:var(--sp)}
.wipe i:nth-child(4n+3){background:var(--su)}
.wipe i:nth-child(4n){background:var(--en)}

/* process steps: soft blue disc behind each icon */
.pcard__sphere{display:block;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,#e6ebff 45%,#c9d3fb 100%);box-shadow:0 calc(18 * var(--s)) calc(36 * var(--s)) rgb(6 23 149 / .16),inset 0 calc(-8 * var(--s)) calc(18 * var(--s)) rgb(3 55 242 / .12)}
.pcard__emoji{left:22%;top:22%;width:56%}
.pcard__title{color:var(--ink)}
.pcard__text{color:var(--ink2);font-weight:400}
.pdots i{background:rgb(6 23 149 / .18)}
.pdots i.on{background:var(--ink)}
.ph-seen{color:#6d79b8}

/* districts / families */
.plans__block{background:color-mix(in srgb,var(--royal) calc(var(--k) * 100%),var(--ba))}
.plan__emoji{width:calc(120 * var(--s));top:calc(10 * var(--s));filter:drop-shadow(0 calc(10 * var(--s)) calc(16 * var(--s)) rgb(6 23 149 / .2))}
.plan__title .g{color:var(--ba)}
.plan__title .b{color:var(--royal)}
.plan__for{color:var(--ink2);letter-spacing:.1em}
.plan__btn{background:var(--cta);color:#000;font-weight:700;border-color:rgb(255 255 255 / .9)}
.pchat__them{color:var(--ink)}

/* trusted districts: the numbers, then the real logos */
.brands .comp{height:calc(1160 * var(--s))}
.brands__heart{left:calc(110 * var(--s));top:calc(20 * var(--s));width:calc(200 * var(--s))}
.brands__sparks{left:calc(20 * var(--s));top:calc(40 * var(--s));width:calc(130 * var(--s))}
.stats{left:calc(160 * var(--s));top:calc(560 * var(--s));width:calc(1120 * var(--s));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(24 * var(--s))}
.stat{display:grid;gap:calc(10 * var(--s));justify-items:center;text-align:center;padding:calc(26 * var(--s)) calc(18 * var(--s));border-radius:calc(22 * var(--s));background:#fff;box-shadow:calc(10 * var(--s)) calc(10 * var(--s)) 0 rgb(3 55 242 / .15)}
.stat b{font-weight:800;font-size:calc(70 * var(--s));letter-spacing:-.045em;line-height:1;color:var(--royal);font-variant-numeric:tabular-nums}
.stat span{font-weight:500;font-size:max(12px,calc(15 * var(--s)));letter-spacing:.08em;line-height:1.3;text-transform:uppercase;color:var(--ink2);max-width:16em}
.stat:nth-child(1) b{color:var(--ba)}.stat:nth-child(3) b{color:#0b8f8a}
.logos{left:calc(170 * var(--s));top:calc(800 * var(--s));width:calc(1100 * var(--s));row-gap:calc(44 * var(--s))}
.logo{flex-direction:column;gap:calc(10 * var(--s));height:auto;color:var(--ink2);font-weight:500;font-size:max(12px,calc(15 * var(--s)));letter-spacing:.02em;text-transform:none}
.logo:nth-child(even){font-weight:500;letter-spacing:.02em;text-transform:none;font-size:max(12px,calc(15 * var(--s)))}
.logo img{height:calc(64 * var(--s));width:auto;max-width:100%;object-fit:contain;filter:grayscale(1) opacity(.62);transition:filter .3s}
.logo:hover img{filter:none}
.logo:hover{color:var(--ink)}

/* a day with us */
.wcard__media{background:linear-gradient(135deg,var(--g1),var(--g2))}
.wcard__img{object-position:50% 45%}
.wcard__tag{color:var(--ink2);letter-spacing:.16em}
.wcard__title,.wcard__text{color:var(--ink)}
.wbar{background:rgb(6 23 149 / .1)}
.wbar i{background:var(--ink)}
.casebox{background:rgb(241 244 253 / .86)}
.case{color:var(--ink)}
.case__desc{color:var(--ink2)}
.case__info .btn{justify-self:start}
.ring__bg{stroke:#dde3f7}

/* faq */
.faq__hearts{width:calc(150 * var(--s));left:calc(1000 * var(--s))}
.qa__q{font-weight:700;color:var(--ink)}
.plus::before,.plus::after{background:var(--royal)}
.qa__a p{color:var(--ink2)}

/* match */
.match__block{background:var(--royal)}
.match__hand img{filter:drop-shadow(0 calc(20 * var(--s)) calc(26 * var(--s)) rgb(0 20 90 / .25))}
.match__hand .wave{animation:floatA 3.4s ease-in-out infinite alternate}
.chk{display:block;width:calc(60 * var(--s))}
.chk svg{display:block;width:100%;height:auto;filter:drop-shadow(0 calc(6 * var(--s)) calc(10 * var(--s)) rgb(6 23 149 / .2))}
.checks span{color:var(--ink)}

/* footer */
.foot .comp{height:calc(1070 * var(--s))}
.status__cat{width:calc(200 * var(--s));top:calc(-110 * var(--s));left:calc(30 * var(--s))}
.status__title{font-weight:800;color:var(--ink)}
.status__strong{color:var(--royal);font-weight:800}
.talk__label{font-weight:800}
.talk__box{background:#e3e8fb}
.talk__fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.talk__fields input::placeholder,.talk textarea::placeholder{color:#7d87b8}
.talk__fields input,.talk textarea{color:var(--ink)}
.talk__fields input:focus,.talk textarea:focus{outline-color:var(--royal)}
.chip span{color:var(--ink)}
.chip span i{color:var(--ba)}
.chip:nth-of-type(2) span i{color:var(--royal)}
.chip input:checked+span{background:var(--ink);color:#fff}
.services{top:calc(736 * var(--s))}
.svc{color:var(--ink);font-weight:600;border-radius:999px}
.svc--ba{background:var(--ba);color:#fff}.svc--sp{background:var(--sp)}.svc--su{background:var(--su)}.svc--en{background:var(--en)}
.foot__links{top:calc(872 * var(--s))}
.foot__links a::after{background:var(--royal)}
.foot__logo{left:calc(1150 * var(--s));top:calc(906 * var(--s));width:calc(190 * var(--s))}
.foot__logo img{display:block;width:100%;height:auto}
.foot__mail{left:auto;right:calc(100 * var(--s));text-align:right;top:calc(996 * var(--s));text-transform:none;letter-spacing:0}
.foot__legal{left:auto;right:calc(100 * var(--s));top:calc(1026 * var(--s))}
.foot__legal a{color:rgb(6 23 149 / .6)}.foot__legal a:hover{color:var(--ink)}

/* confetti instead of hearts */
.fx-heart{width:22px;height:22px}


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .imp,.commit,.plans,.work{height:auto}
  .pin{position:static;height:auto}
  .process{height:auto}.process__stage{position:static}
  .cband .rr--d{display:none}.cband .rr--s{opacity:1}

  .wipe,.zone{display:none}
}

/* sections off screen pause their looping animations */
.is-off,.is-off *{animation-play-state:paused!important}

/* ================================================================================================
   PHONES (760px and narrower)
   The homepage gets its own phone-native layout here: one column, native scrolling, thumb-sized
   cards. Only two scenes stay pinned to the scroll (the swipe deck and the process phone); every
   other section scrolls normally and plays its entrance once, when it comes into view.
   Inside .home, U(n) means n pixels on a 440px-wide phone (iPhone Pro Max) and scales with width.
   The first part (shared) also serves the service pages, which use the older 720-wide scale.
   ================================================================================================ */
@media (max-width:760px),(max-width:1100px) and (orientation:portrait){
  /* ---------- shared with the service pages ---------- */
  :root{--sw:calc(100vw / 720);--ps:calc(100vw / 760);--m:calc(min(100vw,560px) / 440)}
  .comp{width:100%}
  .display{font-size:calc(96 * var(--s))}
  .eyebrow{font-size:calc(40 * var(--s))}
  .lede{font-size:max(16px,calc(28 * var(--s)))}
  .btn{font-size:max(17px,calc(30 * var(--s)));height:max(50px,calc(84 * var(--s)));padding:0 calc(36 * var(--s))}
  .block{border-radius:calc(60 * var(--s)) 0 0 calc(60 * var(--s));left:auto!important;right:-12px;width:calc(300 * var(--s))!important}
  .block--pink{border-radius:0 calc(60 * var(--s)) calc(60 * var(--s)) 0;left:-12px!important;right:auto}
  .burger{left:16px}

  .foot .comp{height:auto;padding:calc(220 * var(--s)) calc(40 * var(--s)) calc(80 * var(--s));display:grid;gap:calc(70 * var(--s))}
  .foot .comp>*{position:relative;left:auto!important;top:auto!important;width:auto}
  .status{height:auto;padding:calc(150 * var(--s)) calc(40 * var(--s)) calc(48 * var(--s))}
  .status__cat{position:absolute!important;left:calc(30 * var(--s))!important;top:calc(-160 * var(--s))!important;width:calc(250 * var(--s))!important}
  .status__title{font-size:calc(56 * var(--s))}.status__line{font-size:calc(32 * var(--s))}.status__strong{font-size:calc(38 * var(--s))}
  .talk__label{font-size:calc(52 * var(--s));height:auto;margin-bottom:calc(20 * var(--s))}
  .talk__box{height:auto;padding:calc(24 * var(--s)) calc(24 * var(--s)) calc(110 * var(--s))}
  .talk textarea{height:calc(220 * var(--s))}
  .talk__box{gap:calc(18 * var(--s))}
  .talk__lab{width:100%;font-size:max(12px,calc(20 * var(--s)))}
  .chip span{height:max(38px,calc(64 * var(--s)));padding:0 calc(26 * var(--s));font-size:max(14px,calc(24 * var(--s)))}
  .talk__fields{grid-template-columns:minmax(0,1fr)}
  .talk__fields input{height:max(46px,calc(84 * var(--s)));font-size:16px}
  .talk__send{right:calc(24 * var(--s));bottom:calc(20 * var(--s))}
  .services__title{font-size:calc(30 * var(--s))}
  .svc{font-size:max(16px,calc(34 * var(--s)));height:max(44px,calc(76 * var(--s)))}
  .foot__links{flex-wrap:wrap;gap:calc(26 * var(--s)) calc(44 * var(--s));font-size:calc(30 * var(--s))}
  .foot .foot__logo{width:calc(200 * var(--s))}
  .foot__mail{font-size:calc(24 * var(--s))}
  .foot__legal{font-size:calc(22 * var(--s));gap:calc(30 * var(--s))}

  /* ---------- homepage: phone scale, type and surfaces ---------- */
  .home>section,.home .cband,.home .svdeck,.home .plans__cards,.home .process{--s:var(--m)}
  .home .display{font-size:calc(50 * var(--s));line-height:.96}
  .home .eyebrow{font-size:calc(20 * var(--s));line-height:1.2}
  .home .lede{font-size:max(15px,calc(16.5 * var(--s)));line-height:1.5;letter-spacing:0}
  .home .btn{height:52px;padding:0 24px;font-size:16px;box-shadow:0 8px 20px rgb(30 30 30 / .16)}
  .home .comp{width:100%;margin:0}
  .home .block{border-radius:calc(44 * var(--s)) 0 0 calc(44 * var(--s))}
  .home .block--pink{border-radius:0 calc(44 * var(--s)) calc(44 * var(--s)) 0}

  /* frosted glass is drawn without a live blur on phones: re-blurring what sits behind every moving card,
     every frame, at 3x pixel density is what made phones stutter. Slightly more opaque fills keep the look */
  .home .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(135deg,rgb(255 255 255 / .94),rgb(255 255 255 / .8))}
  .home .bubble,.home .svcard__label,.home .ph-seen,.home .plan__btn{-webkit-backdrop-filter:none;backdrop-filter:none}
  .home .bubble--blue{background:linear-gradient(90deg,rgb(100 140 220 / .92),rgb(110 225 250 / .9))}
  .home .bubble--typing{background:rgb(70 70 70 / .42)}
  .home .ph-seen{background:rgb(255 255 255 / .94);color:#8d8d8d;box-shadow:0 4px 12px rgb(30 30 30 / .1)}

  /* things moved by the scroll or by an entrance get their own layer, so moving them never repaints the page */
  .home .imp__phone,.home .deck,.home .game__block,.home .game__heart,.home .match__block,.home .match__hand,.home .process__phone{will-change:transform}

  /* unpinned sections: normal height, the stage scrolls with the page */
  .home .commit,.home .plans,.home .work{height:auto}
  .home .commit .pin,.home .plans .pin,.home .work .pin{position:relative;height:auto;overflow:visible;display:block;padding:0}

  /* things that enter once on phones (classes added by the script) */
  .js .home .mrev{opacity:0;transform:translateY(40px);transition:opacity .6s ease,transform .9s var(--out)}
  .js .home .mrev.in{opacity:1;transform:none}

  /* ---------- hero ---------- */
  .home .hero{height:100svh;min-height:calc(760 * var(--s));overflow:clip}
  .home .hero .comp{height:100%}
  .home .hero__title{top:calc(calc(118 * var(--s)) + env(safe-area-inset-top,0px));font-size:calc(47 * var(--s))}
  .home .hero__sub{top:calc(calc(282 * var(--s)) + env(safe-area-inset-top,0px));font-size:calc(21 * var(--s))}
  .home .hero__cta{top:calc(calc(322 * var(--s)) + env(safe-area-inset-top,0px))}
  .home .hero__phone{left:calc(50% - calc(132 * var(--s)))!important;top:calc(418 * var(--s))!important;width:calc(264 * var(--s))!important;height:calc(543 * var(--s))!important}
  .home .hero__msg{left:auto!important;right:calc(14 * var(--s));top:calc(468 * var(--s))!important;width:calc(268 * var(--s))!important;height:calc(52 * var(--s))!important;font-size:calc(14.5 * var(--s));padding:0 calc(12 * var(--s));border-radius:calc(12 * var(--s))}
  .home .hero__msg .bubble__emoji{width:calc(26 * var(--s))}
  .home .hero__typing{left:calc(66 * var(--s))!important;top:calc(612 * var(--s))!important;width:calc(100 * var(--s))!important;height:calc(52 * var(--s))!important}
  .home .tdots{gap:calc(9 * var(--s))}.home .tdots i{width:calc(11 * var(--s))}
  .home .hero__ghost{left:calc(24 * var(--s))!important;top:calc(648 * var(--s))!important;width:calc(46 * var(--s))!important;height:calc(46 * var(--s))!important}
  .home .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(120 * var(--s));z-index:2;background:linear-gradient(rgb(244 244 244 / 0),var(--bg));pointer-events:none}

  /* ---------- first impressions (pinned: the phone rises, then the deck can be swiped) ---------- */
  .home .imp{height:150vh;--s:min(var(--m),calc(100svh / 830))}
  .home .imp .comp{height:calc(830 * var(--s));width:calc(440 * var(--s));margin:0 auto}
  .home .imp__eyebrow{top:calc(104 * var(--s))}
  .home .imp__title{top:calc(140 * var(--s));font-size:calc(46 * var(--s))}
  .home .imp__phone{left:calc(40 * var(--s))!important;top:calc(292 * var(--s))!important;width:calc(360 * var(--s))!important;height:calc(741 * var(--s))!important}
  .home .deck{left:calc(62 * var(--s))!important;top:calc(418 * var(--s))!important;width:calc(316 * var(--s))!important;height:calc(236 * var(--s))!important}
  .home .swcard{padding:calc(66 * var(--s)) calc(26 * var(--s)) calc(26 * var(--s));transform:translateX(calc(600 * var(--s))) rotate(0deg)}
  .home .swcard.is-top{transform:none}
  .home .swcard.is-next{transform:translateX(calc(calc(330 * var(--s)) * (1 - var(--dp))))}
  .home .swcard__emoji{top:calc(-64 * var(--s));width:calc(124 * var(--s))}
  .home .swcard__text{font-size:calc(29 * var(--s))}
  .home .swcard--end .swcard__text{font-size:calc(25 * var(--s))}
  .home .swcard--end .btn{height:44px;font-size:14px;padding:0 18px}
  .home .swcard__again{font-size:14px}

  /* ---------- wingman ---------- */
  .home .game .comp{height:auto;display:flex;flex-direction:column;padding:calc(116 * var(--s)) 0 calc(70 * var(--s))}
  .home .game .comp>*{position:relative;left:auto!important;top:auto!important}
  .home .game__text{width:auto;margin:0 calc(24 * var(--s))}
  .home .game__text h2{margin-top:calc(16 * var(--s))}
  .home .game__text .lede{width:auto;margin-top:calc(22 * var(--s))}
  .home .game__btn{margin-top:calc(28 * var(--s))}
  .home .game__block{position:absolute!important;top:auto!important;bottom:calc(150 * var(--s));height:calc(470 * var(--s))!important;width:calc(180 * var(--s))!important}
  .home .game__heart{width:calc(330 * var(--s))!important;height:auto!important;margin:calc(40 * var(--s)) 0 0 calc(84 * var(--s))}
  .home .svdeck{width:calc(372 * var(--s))!important;height:calc(330 * var(--s))!important;margin:calc(-120 * var(--s)) 0 0 calc(22 * var(--s));--s:calc(var(--m) * .88)}

  /* ---------- colour stripes ---------- */
  .home .zone{height:60vh}

  /* ---------- commitment: heading, then the four perks as a stack you scroll past ---------- */
  .home .commit .comp{height:auto;display:flex;flex-direction:column;padding:calc(110 * var(--s)) 0 calc(90 * var(--s))}
  .home .commit .comp>*{position:relative;left:auto!important;top:auto!important}
  .home .commit__text{order:-1;width:auto!important;margin:0 calc(24 * var(--s))}
  .home .commit__text .lede{width:auto;margin-top:calc(20 * var(--s))}
  .home .line.t>span{transform:none}.home .t-fade{opacity:1;translate:none}
  .home .commit__block{position:absolute!important;top:auto!important;bottom:calc(40 * var(--s));height:calc(560 * var(--s))!important;width:calc(170 * var(--s))!important;transform:none}
  .home .perks{width:auto!important;height:auto!important;margin:calc(84 * var(--s)) calc(24 * var(--s)) 0 calc(40 * var(--s));display:grid;gap:calc(58 * var(--s))}
  .js .home .perk,.js .home .perk.on,.js .home .perk:first-child{position:relative;inset:auto;opacity:1;transform:none}
  .js .home .perk.mrev:not(.in){opacity:0;transform:translateX(calc(-80 * var(--s)))}
  .js .home .perk.mrev{transition:opacity .4s ease,transform .9s var(--pop)}
  .home .perk__card{position:relative;inset:auto;min-height:calc(118 * var(--s));padding:calc(30 * var(--s)) calc(110 * var(--s)) calc(26 * var(--s)) calc(26 * var(--s));align-items:center}
  .home .perk__text,.js .home .perk.on:has(+ .perk.on) .perk__text,.js .home .perk.on:has(+ .perk.on) .perk__emoji{opacity:1}
  .home .perk__text{font-size:calc(22 * var(--s));line-height:1.2}
  .home .perk__emoji{left:auto;right:calc(-6 * var(--s));top:calc(-38 * var(--s));width:calc(116 * var(--s))}
  .home .cband{display:none}

  /* ---------- process (pinned: the chat phone rises in, then the five steps slide through) ---------- */
  .home .process{margin-top:0;height:calc(100svh + 290vh);--s:min(var(--m),calc(100svh / 830))}
  .home .process__stage{top:0;height:100svh;height:100svh;display:grid;align-content:center}
  .home .process .comp{position:relative;width:calc(440 * var(--s));height:calc(830 * var(--s));margin:0 auto;--pt:calc(84 * var(--s))}
  .home .ph-top{left:calc(50 * var(--s));width:calc(340 * var(--s));height:calc(700 * var(--s));-webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent 60%);mask-image:linear-gradient(to bottom,#000 40%,transparent 60%)}
  .home .ph-msg{left:calc(66 * var(--s));top:calc(var(--pt) + calc(70 * var(--s)));width:calc(308 * var(--s));height:calc(54 * var(--s))}
  .home .bubble--big{gap:calc(8 * var(--s));padding:0 calc(14 * var(--s));border-radius:calc(14 * var(--s));font-size:calc(15 * var(--s))}
  .home .bubble--big .bubble__emoji{width:calc(28 * var(--s))}
  .home .ph-seen{left:calc(306 * var(--s));top:calc(var(--pt) + calc(134 * var(--s)));width:calc(64 * var(--s));height:calc(30 * var(--s));border-radius:calc(14 * var(--s));font-size:calc(13 * var(--s))}
  .home .process__eyebrow{top:calc(300 * var(--s))}
  .home .process__title{top:calc(334 * var(--s));font-size:calc(40 * var(--s))}
  .home .pcards{left:calc(70 * var(--s))!important;top:calc(526 * var(--s))!important;width:calc(300 * var(--s))!important;height:calc(262 * var(--s))!important}
  .home .pcard{transform:translateX(calc(var(--k) * calc(380 * var(--s))))}
  .home .pcard__icon{top:calc(-78 * var(--s));width:calc(150 * var(--s))}
  .home .pcard__body{padding:calc(84 * var(--s)) calc(26 * var(--s)) calc(20 * var(--s));gap:calc(6 * var(--s))}
  .home .pcard__title{font-size:calc(25 * var(--s))}
  .home .pcard__text{max-width:calc(240 * var(--s));font-size:calc(14.5 * var(--s));line-height:1.5}
  .home .pdots{top:calc(806 * var(--s));gap:calc(10 * var(--s))}.home .pdots i{width:calc(8 * var(--s))}
  /* change of perspective: the phone arrives so close its screen fills the page, then pulls back to its place;
     the script sets --zs from the scroll. The title, steps and message follow once it has landed */
  .home .process__phone{transform:scale(var(--zs,1));transform-origin:50% 15%;will-change:transform}
  .js .home .process__eyebrow,.js .home .process__title,.js .home .pcards,.js .home .pdots{transition:opacity .5s ease .1s,translate .7s var(--out) .1s}
  .js .home .process:not(.zdone) :is(.process__eyebrow,.process__title,.pcards,.pdots){opacity:0;translate:0 calc(30 * var(--s));transition:opacity .2s ease,translate .2s ease}
  .js .home .process__msg{transition:opacity .3s ease .35s,transform .7s var(--pop) .35s;transform-origin:92% 100%}
  .js .home .process:not(.zdone) .process__msg{opacity:0;transform:translateY(calc(-30 * var(--s))) scale(.85);transition:opacity .15s ease}
  .js .home .process__msg .bubble__emoji{transition:scale .5s var(--pop) .8s}
  .js .home .process:not(.zdone) .process__msg .bubble__emoji{scale:0;transition:none}
  .js .home .process__seen{transition:opacity .4s ease 1.1s,transform .5s var(--out) 1.1s}
  .js .home .process:not(.zdone) .process__seen{opacity:0;transform:translateY(calc(-10 * var(--s)));transition:opacity .15s ease}

  /* ---------- plans: both types, one under the other ---------- */
  .home .plans .comp{height:auto;display:flex;flex-direction:column;padding:calc(110 * var(--s)) 0 calc(90 * var(--s))}
  .home .plans .comp>*{position:relative;left:auto!important;top:auto!important}
  .home .plans__head{width:auto!important;margin:0 calc(24 * var(--s))}
  .home .plans__price{gap:calc(16 * var(--s));margin-top:calc(24 * var(--s))}
  .home .price{width:calc(140 * var(--s));height:calc(62 * var(--s));font-size:calc(28 * var(--s));border-radius:calc(12 * var(--s))}
  .home .plans__price span{font-size:calc(20 * var(--s))}
  .home .pchat{gap:calc(10 * var(--s));margin-top:calc(24 * var(--s))}
  .home .pchat__b{height:calc(48 * var(--s));padding:0 calc(16 * var(--s));font-size:calc(16 * var(--s))}
  .home .pchat__b .bubble__emoji{width:calc(26 * var(--s))}
  .home .pchat__us,.home .pchat__typing{margin-left:calc(46 * var(--s))}
  .home .pchat__typing{width:calc(84 * var(--s));height:calc(48 * var(--s))}
  .home .plans__sub{margin-top:calc(22 * var(--s));font-size:max(15px,calc(16.5 * var(--s)))}
  .home .plans__block{position:absolute!important;top:auto!important;bottom:calc(60 * var(--s));height:calc(760 * var(--s))!important;width:calc(170 * var(--s))!important;transform:none;background:linear-gradient(var(--green),var(--blue))}
  .home .plans__cards{width:auto!important;height:auto!important;margin:calc(70 * var(--s)) calc(24 * var(--s)) 0;display:grid;gap:calc(40 * var(--s));--s:calc(var(--m) * .98)}
  .home .plan,.home .plan--launch,.home .plan--grow{position:relative;inset:auto;height:calc(450 * var(--s));transform:none;opacity:1}
  .home .plan--grow .plan__card{background:linear-gradient(135deg,rgb(255 255 255 / .94),rgb(255 255 255 / .8))}
  .home .plan__card{height:calc(340 * var(--s))}
  .home .plan__title{font-size:calc(28 * var(--s))}
  .home .plan__text{font-size:max(15px,calc(17 * var(--s)))}
  .home .plan__btn{top:calc(376 * var(--s))}
  .home .plans__dots{display:none}

  /* ---------- brands ---------- */
  .home .brands .comp{height:calc(860 * var(--s))}
  .home .brands__art{left:calc(50% - calc(105 * var(--s)))!important;top:calc(70 * var(--s))!important;width:calc(210 * var(--s))!important;height:calc(176 * var(--s))!important}
  .home .brands__heart{left:calc(34 * var(--s));width:calc(176 * var(--s))}.home .brands__sparks{top:calc(36 * var(--s));width:calc(94 * var(--s))}
  .home .brands__title{top:calc(270 * var(--s));font-size:calc(44 * var(--s))}
  .home .logos{left:calc(24 * var(--s));width:calc(100% - calc(48 * var(--s)));top:calc(420 * var(--s));grid-template-columns:repeat(2,minmax(0,1fr));row-gap:calc(30 * var(--s))}
  .home .logo{height:calc(40 * var(--s));font-size:calc(24 * var(--s))}.home .logo:nth-child(even){font-size:calc(17 * var(--s))}

  /* ---------- work: a swipeable row of cases ---------- */
  .home .work .comp{height:auto;display:flex;flex-direction:column;padding:calc(110 * var(--s)) 0 calc(80 * var(--s))}
  .home .work .comp>*{position:relative;left:auto!important;top:auto!important}
  .home .work__eyebrow{margin:0 calc(24 * var(--s))}
  .home .work__title{margin:calc(12 * var(--s)) calc(24 * var(--s)) 0;font-size:calc(46 * var(--s));white-space:normal}
  .home .wtrack{margin-top:calc(36 * var(--s));gap:calc(14 * var(--s));padding:calc(10 * var(--s)) calc(24 * var(--s)) calc(30 * var(--s));transform:none;will-change:auto;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding:0 calc(24 * var(--s));scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .home .wtrack::-webkit-scrollbar{display:none}
  .home .wcard{width:calc(340 * var(--s));height:auto;scroll-snap-align:start;display:flex;flex-direction:column}
  .home .wcard__media{position:relative;height:calc(250 * var(--s));border-radius:calc(18 * var(--s))}
  .home .wcard__img,.home .wcard__ph{transform:none}
  .home .wcard__ph{padding-left:calc(28 * var(--s))}.home .wcard__ph b{font-size:calc(110 * var(--s))}.home .wcard__ph span{font-size:11px}
  .home .wcard__info{position:relative;left:auto;top:auto;width:auto;height:auto;margin:calc(-56 * var(--s)) calc(14 * var(--s)) 0;padding:calc(22 * var(--s)) calc(22 * var(--s)) calc(22 * var(--s));transform:none}
  .home .wcard__tag{font-size:11px}.home .wcard__title{margin-top:calc(10 * var(--s));font-size:calc(24 * var(--s))}.home .wcard__text{margin-top:calc(10 * var(--s));font-size:14px}
  .home .wcard__info .btn{position:relative;left:auto;right:auto;bottom:auto;width:100%;margin-top:calc(18 * var(--s));height:46px;font-size:14px}
  .home .wbar{left:auto;right:auto;bottom:auto;margin:calc(4 * var(--s)) calc(24 * var(--s)) 0}
  .home .wbar i{transform:scaleX(var(--wq,.2))}

  /* ---------- faq ---------- */
  .home .faq{padding:calc(100 * var(--s)) 0 calc(90 * var(--s))}
  .home .faq__head{width:100%;padding:0 calc(24 * var(--s));text-align:left}
  .home .faq__hearts{left:auto;right:calc(22 * var(--s));top:calc(-6 * var(--s));width:calc(84 * var(--s))}
  .home .faq__list{width:auto;margin:calc(32 * var(--s)) calc(20 * var(--s)) 0;gap:calc(12 * var(--s))}
  .home .qa__q{font-size:15px;min-height:62px;padding:12px 18px}
  .home .qa__a p{padding:0 18px 18px;font-size:15px}
  .home .plus{width:16px;min-width:16px}

  /* ---------- match ---------- */
  .home .match .comp{height:auto;display:flex;flex-direction:column;padding:calc(100 * var(--s)) 0 calc(90 * var(--s))}
  .home .match .comp>*{position:relative;left:auto!important;top:auto!important}
  .home .match__text{width:auto;margin:0 calc(24 * var(--s))}
  .home .match__text .lede{margin-top:calc(22 * var(--s));font-size:max(15px,calc(17 * var(--s)))}
  .home .match__text .btn{margin-top:calc(28 * var(--s))}
  .home .match__block{position:absolute!important;top:auto!important;bottom:calc(50 * var(--s));height:calc(400 * var(--s))!important;width:calc(190 * var(--s))!important}
  .home .match__hand{width:calc(230 * var(--s))!important;height:auto!important;margin:calc(36 * var(--s)) 0 0 auto;right:calc(30 * var(--s))}
  .home .match__card{width:calc(330 * var(--s))!important;height:calc(260 * var(--s))!important;margin:calc(-70 * var(--s)) 0 0 calc(24 * var(--s))}
  .home .checks li{left:calc(-22 * var(--s));width:calc(320 * var(--s));gap:calc(16 * var(--s))}
  .home .checks li:nth-child(1){top:calc(36 * var(--s))}.home .checks li:nth-child(2){top:calc(110 * var(--s))}.home .checks li:nth-child(3){top:calc(184 * var(--s))}
  .home .chk{width:calc(54 * var(--s))}
  .home .checks span{font-size:calc(17 * var(--s));max-width:calc(240 * var(--s))}
}

@media (max-width:760px),(max-width:1100px) and (orientation:portrait){
  .top__cta{height:36px;padding:0 14px;font-size:13px;top:calc(env(safe-area-inset-top,0px) + 16px)}
  .logo-link{width:calc(108px - var(--h,0) * 12px)}
  .home .hero__doodle{left:calc(14 * var(--s));top:calc(380 * var(--s));width:calc(90 * var(--s))}
  .home .hero__doodle2{left:auto;right:calc(18 * var(--s));top:calc(690 * var(--s));width:calc(70 * var(--s))}
  .home .collage{width:calc(380 * var(--s))!important;height:calc(330 * var(--s))!important;margin:calc(40 * var(--s)) 0 0 calc(40 * var(--s))}
  .home .collage .stk{width:calc(220 * var(--s))}
  .home .stk--1{left:0;top:0}.home .stk--2{left:calc(130 * var(--s));top:calc(66 * var(--s))}
  .home .stk--3{left:calc(20 * var(--s));top:calc(140 * var(--s))}.home .stk--4{left:calc(140 * var(--s));top:calc(210 * var(--s))}
  .home .game__heart .stk-doodle{left:calc(290 * var(--s));top:calc(0 * var(--s));width:calc(70 * var(--s))}
  .home .svdeck{margin-top:calc(10 * var(--s))}
  .home .perk__emoji{width:calc(90 * var(--s));top:calc(-30 * var(--s))}
  .home .brands .comp{height:auto;display:flex;flex-direction:column;padding:calc(60 * var(--s)) 0 calc(70 * var(--s))}
  .home .brands .comp>*{position:relative;left:auto!important;top:auto!important}
  .home .brands__art{align-self:center;width:calc(210 * var(--s))!important;height:calc(150 * var(--s))!important}
  .home .brands__heart{left:calc(60 * var(--s));width:calc(120 * var(--s))}.home .brands__sparks{width:calc(80 * var(--s))}
  .home .brands__title{margin-top:calc(10 * var(--s))}
  .home .stats{width:auto;margin:calc(30 * var(--s)) calc(20 * var(--s)) 0;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(14 * var(--s))}
  .home .stat{padding:calc(18 * var(--s)) calc(10 * var(--s))}
  .home .stat b{font-size:calc(38 * var(--s))}
  .home .stat span{font-size:11px}
  .home .logos{width:auto;margin:calc(40 * var(--s)) calc(20 * var(--s)) 0;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:calc(26 * var(--s))}
  .home .logo{height:auto;font-size:11px}.home .logo:nth-child(even){font-size:11px}
  .home .logo img{height:calc(44 * var(--s))}
  .home .match__hand{width:calc(190 * var(--s))!important;margin-top:calc(10 * var(--s))}
  .home .chk{width:calc(46 * var(--s))}
  .talk__fields{grid-template-columns:minmax(0,1fr)}
  .foot__logo{width:calc(260 * var(--s))!important}
  .foot__mail{text-transform:none}
  .foot__mail,.foot__legal{right:auto!important;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .js .stk{scale:1}
}

/* ================= service pages (v2 look) ================= */
:root{--accent:#ff6723;--block:#ff6c37;--next:#f92f60}
.pagewipe{position:fixed;inset:0;z-index:120;overflow:hidden;pointer-events:none}
.pagewipe .wipe__rot{position:absolute;left:50%;top:50%;width:230vmax;height:230vmax;margin:-115vmax 0 0 -115vmax;display:flex;flex-direction:column;transform:rotate(-31deg)}
.pagewipe i{flex:1;margin-block:-1px;border-radius:999px;background:var(--bg);animation:wipeOut .95s var(--snap) both;animation-delay:calc(var(--i) * 45ms)}
.pagewipe i:nth-child(3n){background:var(--white)}
.pagewipe i:nth-child(3n+1){background:var(--wipe,var(--accent))}
@keyframes wipeOut{from{transform:translateX(0)}to{transform:translateX(125%)}}
@keyframes wipeIn{from{transform:translateX(-125%)}to{transform:translateX(0)}}
.leaving .pagewipe i{animation:wipeIn .6s var(--snap) both;animation-delay:calc(var(--i) * 35ms)}

.sw{display:inline-grid;place-items:center;height:max(38px,calc(48 * var(--s)));padding:0 calc(20 * var(--s));border:1px solid rgb(255 255 255 / .95);border-radius:999px;background:rgb(255 255 255 / .7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 6px 18px rgb(30 30 30 / .06);font-weight:500;font-size:max(14px,calc(18 * var(--s)));letter-spacing:.02em;line-height:1;text-decoration:none;text-transform:uppercase;transition:transform .25s var(--pop),background-color .2s,color .2s}
.sw:hover{transform:translateY(-3px) rotate(-2deg);background:#fff}
.sw.is-on{background:var(--c);color:#fff;border-color:transparent}
.switch{display:flex;flex-wrap:wrap;gap:8px}

/* hero */
.shero{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:calc(40 * var(--s));align-items:center;padding:max(110px,calc(150 * var(--s))) 0 calc(80 * var(--s)) calc(100 * var(--s));--p:0;overflow:hidden}
.shero__text{position:relative;z-index:2;display:grid;gap:calc(26 * var(--s));justify-items:start;min-width:0;transform:translateY(calc(var(--p) * -10vh));opacity:calc(1 - var(--p) * 1.4)}
.shero__title{font-size:calc(132 * var(--s));line-height:.9;margin-left:-.04em;white-space:nowrap}
.shero__sub{max-width:calc(560 * var(--s))}
.js .shero .line>span{animation:lineUp 1s var(--out) .55s both;animation-delay:calc(.55s + var(--i) * 90ms)}
@keyframes lineUp{from{transform:translateY(110%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}}
@keyframes popIn{from{scale:0;rotate:-8deg}}
.js .shero__eyebrow,.js .shero__sub,.js .switch{animation:fadeUp .8s var(--out) both}
.js .switch{animation-delay:.5s}.js .shero__eyebrow{animation-delay:.65s}.js .shero__sub{animation-delay:.95s}
.js .shero__cta{animation:popIn .7s var(--pop) 1.2s both}
.shero__art{position:relative;z-index:1;align-self:stretch;min-height:calc(640 * var(--s));transform:translate(calc(var(--p) * 10vw),calc(var(--p) * 8vh)) rotate(calc(var(--p) * 10deg))}
.sart{position:absolute;inset:0}
.sart__block{position:absolute;left:calc(150 * var(--s));top:4%;bottom:4%;right:-12px;border-radius:calc(70 * var(--s)) 0 0 calc(70 * var(--s));background:var(--block)}
.js .sart__block{animation:blockIn 1s var(--out) .3s both}
@keyframes blockIn{from{transform:translateX(60%)}}
.sart__emoji{position:absolute;left:calc(40 * var(--s));top:12%;width:calc(420 * var(--s))}
.sart__emoji img,.sart__heart img,.sart__spark img{display:block;width:100%;height:auto}
.js .sart__emoji,.js .sart__heart{animation:artIn 1.1s var(--pop) .6s both}
@keyframes artIn{from{transform:translate(40%,30%) rotate(30deg) scale(.6);opacity:0}}
.floaty{animation:floatA 3.2s ease-in-out infinite alternate;filter:drop-shadow(0 calc(24 * var(--s)) calc(30 * var(--s)) rgb(30 30 30 / .18))}
.sart__spark{position:absolute;left:calc(10 * var(--s));top:4%;width:calc(150 * var(--s))}
.js .sart__spark{animation:popIn .6s var(--pop) 1.2s both}
.sart__heart{position:absolute;left:calc(-40 * var(--s));top:6%;width:calc(620 * var(--s))}
.sart__heart img{filter:drop-shadow(0 calc(24 * var(--s)) calc(30 * var(--s)) rgb(120 30 30 / .18))}
.sart__phone{position:absolute;left:calc(150 * var(--s));top:4%;width:calc(250 * var(--s));height:calc(515 * var(--s));rotate:6deg}
.js .sart__phone{animation:artIn 1.1s var(--pop) .5s both}
.sart__msg{position:absolute;left:calc(250 * var(--s));top:22%;height:calc(60 * var(--s));font-size:calc(16 * var(--s))}
.js .sart__msg{animation:popIn .6s var(--pop) 1.6s both}
.sart__typing{position:absolute;left:calc(90 * var(--s));top:52%;width:calc(118 * var(--s));height:calc(62 * var(--s))}
.js .sart__typing{animation:popIn .5s var(--pop) 1.2s both}
.sart__typing .typing-cycle{animation-delay:3.6s}
.sart__ghost{position:absolute;left:calc(64 * var(--s));top:calc(52% + calc(44 * var(--s)));width:calc(48 * var(--s));height:calc(48 * var(--s))}
.js .sart__ghost{animation:popIn .5s var(--pop) 1.05s both}
.sart__note{position:absolute;z-index:3;left:calc(60 * var(--s));bottom:10%;display:flex;align-items:center;gap:calc(16 * var(--s));padding:calc(18 * var(--s)) calc(26 * var(--s))}
.sart__note b{font-size:calc(64 * var(--s));font-weight:700;letter-spacing:-.05em;line-height:1;color:var(--accent)}
.sart__note span{font-weight:500;font-size:calc(18 * var(--s));line-height:1.2;text-transform:uppercase;letter-spacing:.02em}
.js .sart__note{animation:fadeUp .8s var(--out) 1.4s both}

/* the roll: one subservice in focus at a time */
.roll{height:calc(var(--n) * 34vh + 100vh)}
.roll__pin{position:sticky;top:0;height:100vh;height:100svh;min-height:520px;overflow:clip;display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(8px,2vh,20px);padding:clamp(90px,13vh,130px) 0 clamp(20px,5vh,56px)}
.roll__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 max(16px,calc(100 * var(--s)));font-weight:500;font-size:max(13px,calc(17 * var(--s)));letter-spacing:.14em;text-transform:uppercase}
.roll__count{font-variant-numeric:tabular-nums}
.roll__count b{display:inline-block;min-width:1.5em;padding:.3em .55em;border-radius:.5em;background:var(--accent);color:#fff;text-align:center}
.roll__view{position:relative;min-height:0;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.roll__list{margin:0;padding:0;list-style:none;display:grid;justify-items:center;gap:.34em;text-align:center;font-weight:700;font-size:max(1.7rem,calc(88 * var(--s)));letter-spacing:-.045em;line-height:1.08;text-transform:uppercase;will-change:transform}
.roll__list li{max-width:min(100%,17em);padding:0 16px;text-wrap:balance;opacity:clamp(.14,calc(1 - var(--dist,3) * .42),1);scale:calc(1 - min(var(--dist,3),3) * .07);transition:rotate .45s var(--pop);cursor:pointer}
.roll__list li.is-active{rotate:-1.6deg}
.roll__list li.is-active:nth-child(even){rotate:1.6deg}
.hl{padding:.02em .22em;border-radius:.18em;background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 50% / 0% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .45s var(--out),color .25s,box-shadow .25s}
.is-active .hl{background-size:100% 100%;color:#fff;box-shadow:0 calc(14 * var(--s)) calc(30 * var(--s)) color-mix(in srgb,var(--accent) 35%,transparent)}
.roll__track{position:absolute;right:max(10px,calc(50 * var(--s)));top:30%;bottom:22%;width:3px;border-radius:3px;background:rgb(30 30 30 / .12);overflow:hidden}
.roll__track i{display:block;width:100%;height:100%;background:var(--ink);transform-origin:50% 0;transform:scaleY(var(--p))}

/* glance */
.glance{display:grid;justify-items:center;gap:calc(24 * var(--s));padding:14vh 16px 10vh;text-align:center;overflow-x:clip}
.tags{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(18 * var(--s)) calc(14 * var(--s));width:min(100%,calc(1240 * var(--s)));margin-top:calc(40 * var(--s))}
.tag{padding:.55em .9em;border-radius:calc(14 * var(--s));font-weight:700;font-size:max(14px,calc(26 * var(--s)));letter-spacing:-.01em;line-height:1.1;text-transform:uppercase;rotate:var(--rest)}
.js .tag{transform:translateX(var(--fx)) rotate(var(--fr));opacity:0;transition:transform .85s var(--pop),opacity .2s}
.js .tag.on{transform:none;opacity:1}
@keyframes wiggle{25%{rotate:calc(var(--rest) - 4deg)}75%{rotate:calc(var(--rest) + 4deg)}}
.tag:hover{animation:wiggle .4s ease-in-out}
.glance .tag:hover{background:var(--accent);color:#fff}

/* offer */
.offer{padding:8vh 16px 14vh}
.offer__card{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:calc(50 * var(--s));align-items:center;max-width:calc(1100 * var(--s));margin:0 auto;padding:calc(56 * var(--s));border-radius:calc(28 * var(--s));rotate:calc((1 - var(--p)) * -3deg)}
.offer__art img{display:block;width:100%;height:auto}
.offer__text{display:grid;gap:calc(28 * var(--s));justify-items:start;min-width:0}
.offer__text h2{font-size:calc(72 * var(--s))}
.offer__price{display:flex;align-items:center;gap:calc(22 * var(--s))}
.offer__price span{font-size:max(16px,calc(22 * var(--s)));line-height:1.4;max-width:calc(420 * var(--s))}
.price{display:inline-grid;place-items:center;width:auto;height:auto;padding:.18em .45em;background:linear-gradient(90deg,#84e3aa,#b8d97c);color:var(--deepgreen);font-weight:700;font-size:calc(44 * var(--s));letter-spacing:-.01em;border-radius:calc(14 * var(--s));white-space:nowrap}

/* next band */
.next{position:relative;z-index:1;display:grid;gap:.4em;margin:0 max(16px,calc(100 * var(--s)));padding:calc(70 * var(--s)) calc(70 * var(--s));border-radius:calc(40 * var(--s));background:var(--next);color:#fff;text-decoration:none;overflow:hidden;box-shadow:0 calc(20 * var(--s)) calc(50 * var(--s)) rgb(30 30 30 / .14)}
.next__label{font-weight:500;font-size:max(13px,calc(18 * var(--s)));letter-spacing:.16em;text-transform:uppercase}
.next__name{display:flex;align-items:center;gap:.25em;font-size:calc(170 * var(--s));line-height:.9;transition:transform .6s var(--out)}
.next__name svg{width:.5em;flex:none;transition:transform .6s var(--pop)}
.next:hover .next__name{transform:translateX(2.5vw)}
.next:hover .next__name svg{transform:translateX(.25em) rotate(-8deg)}
.next--long .next__name{font-size:calc(120 * var(--s))}

/* footer */
.sfoot{position:relative;z-index:1;display:grid;gap:calc(40 * var(--s));padding:calc(110 * var(--s)) max(16px,calc(100 * var(--s))) calc(env(safe-area-inset-bottom,0px) + calc(70 * var(--s)))}
.sfoot .services{position:static}
.sfoot__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.sfoot__links{display:flex;flex-wrap:wrap;gap:calc(38 * var(--s));font-weight:700;font-size:max(15px,calc(22 * var(--s)));letter-spacing:-.03em;text-transform:uppercase}
.sfoot__links a{text-decoration:none}
.sfoot__links a:hover{text-decoration:underline;text-underline-offset:.25em}
.sfoot__logo{width:max(90px,calc(120 * var(--s)));color:var(--ink)}
.sfoot__logo svg{width:100%;height:auto}
.sfoot__mail{justify-self:end;font-size:max(13px,calc(16.5 * var(--s)));text-transform:uppercase}
a.svc[aria-current]{outline:3px solid var(--ink);outline-offset:3px}

/* closing page */
.mhero{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:calc(40 * var(--s));padding:max(110px,calc(140 * var(--s))) 0 calc(80 * var(--s)) calc(100 * var(--s));overflow:hidden}
.mhero__text{display:grid;gap:calc(34 * var(--s));justify-items:start;position:relative;z-index:2}
.mhero__text h1{font-size:calc(100 * var(--s));white-space:nowrap}
.js .cta-title .line>span{animation:lineUp 1s var(--out) both;animation-delay:calc(.55s + var(--i) * 95ms)}
.js .cta-in{animation:fadeUp .8s var(--out) both;animation-delay:calc(.5s + var(--i) * 160ms)}
.mhero__art{position:relative;align-self:stretch;min-height:calc(760 * var(--s))}
.mhero__block{position:absolute;left:calc(132 * var(--s));top:6%;bottom:2%;right:-12px;border-radius:calc(70 * var(--s)) 0 0 calc(70 * var(--s));background:var(--block)}
.js .mhero__block{animation:blockIn 1s var(--out) .3s both}
.mhero__hand{position:absolute;left:0;top:0;width:calc(451 * var(--s))}
.mhero__hand span{display:block}
.mhero__hand img{display:block;width:100%;height:auto;filter:drop-shadow(0 calc(20 * var(--s)) calc(26 * var(--s)) rgb(0 40 90 / .2))}
.mhero__card{position:absolute;left:calc(24 * var(--s));top:calc(380 * var(--s));width:calc(402 * var(--s));height:calc(350 * var(--s))}
.priceband{display:grid;justify-items:center;gap:calc(10 * var(--s));padding:12vh 16px 10vh;text-align:center;overflow-x:clip}
.priceband__line{font-size:calc(96 * var(--s))}
.priceband__line .price{font-size:.8em;vertical-align:.08em}
.priceband__tags .tag{color:#f4f4f4;font-weight:300}

/* legal pages */
.sfoot__row--small{font-size:max(13px,calc(16.5 * var(--s)))}
.sfoot__legal{display:flex;gap:calc(26 * var(--s));text-transform:uppercase;letter-spacing:.04em}
.sfoot__legal a{color:rgb(30 30 30 / .6);text-decoration:none}.sfoot__legal a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.25em}
.legal{padding:max(130px,calc(170 * var(--s))) max(20px,calc(100 * var(--s))) calc(100 * var(--s))}
.legal__head{max-width:calc(980 * var(--s))}
.legal__head .display{margin-top:calc(18 * var(--s));font-size:calc(108 * var(--s))}
.js .legal__head .line>span{animation:lineUp 1s var(--out) both}
.js .legal__head .line+.line>span{animation-delay:.1s}
.legal__meta{margin-top:calc(26 * var(--s));font-weight:500;font-size:max(13px,calc(16 * var(--s)));letter-spacing:.14em;text-transform:uppercase;color:rgb(30 30 30 / .55)}
.legal__intro{margin-top:calc(22 * var(--s));max-width:calc(720 * var(--s));font-size:max(16px,calc(22 * var(--s)));line-height:1.5}
.legal__note{display:inline-block;margin-top:calc(22 * var(--s));padding:.35em .8em;border-radius:999px;background:#fff3b0;font-size:max(12px,calc(14 * var(--s)))}
.legal__grid{display:grid;grid-template-columns:calc(300 * var(--s)) minmax(0,calc(780 * var(--s)));gap:calc(80 * var(--s));margin-top:calc(70 * var(--s));align-items:start}
.legal__toc{position:sticky;top:max(120px,calc(140 * var(--s)));padding:calc(26 * var(--s)) calc(26 * var(--s)) calc(22 * var(--s));border-radius:calc(20 * var(--s));font-size:max(13px,calc(15 * var(--s)))}
.legal__toc p{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.85em}
.legal__toc ol{margin-top:calc(14 * var(--s));display:grid;gap:calc(9 * var(--s));list-style:decimal inside;color:rgb(30 30 30 / .5)}
.legal__toc a{color:var(--ink);text-decoration:none}.legal__toc a:hover{text-decoration:underline;text-underline-offset:.2em}
.legal__body{counter-reset:sec}
.legal__sec{padding-top:calc(10 * var(--s));margin-bottom:calc(46 * var(--s));scroll-margin-top:110px}
.legal__sec h2{counter-increment:sec;font-weight:700;font-size:max(20px,calc(30 * var(--s)));letter-spacing:-.02em;line-height:1.15;text-transform:uppercase}
.legal__sec h2::before{content:counter(sec,decimal-leading-zero);display:block;margin-bottom:.35em;font-size:.5em;letter-spacing:.14em;color:var(--pink)}
.legal__sec p,.legal__sec li{font-size:max(15px,calc(18 * var(--s)));line-height:1.65;color:#2f2f2f}
.legal__sec p{margin-top:calc(14 * var(--s))}
.legal__sec ul{margin-top:calc(12 * var(--s));padding-left:1.2em;list-style:disc;display:grid;gap:calc(8 * var(--s))}
.legal__sec a{color:var(--ink);text-underline-offset:.2em}
.legal__sec b{color:var(--ink)}
mark.fill{background:#fff3b0;color:inherit;padding:0 .2em;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

@media (max-width:760px),(max-width:1100px) and (orientation:portrait){
  .shero{grid-template-columns:minmax(0,1fr);padding:110px 0 calc(60 * var(--s)) calc(40 * var(--s));gap:calc(30 * var(--s))}
  .shero__art{order:-1;min-height:calc(560 * var(--s));margin-right:0}
  .shero__title{font-size:calc(112 * var(--s))}
  .mhero__text h1{font-size:calc(84 * var(--s))}
  .shero__sub{max-width:none;padding-right:calc(40 * var(--s))}
  .sart__emoji{left:calc(120 * var(--s));width:calc(400 * var(--s))}
  .sart__heart{left:calc(60 * var(--s));width:calc(560 * var(--s))}
  .sart__phone{left:calc(250 * var(--s));width:calc(220 * var(--s));height:calc(453 * var(--s))}
  .sart__msg{left:calc(330 * var(--s));font-size:calc(20 * var(--s))}
  .sart__typing{left:calc(170 * var(--s))}.sart__ghost{left:calc(144 * var(--s))}
  .sart__block{left:calc(260 * var(--s))}
  .sart__note{left:calc(20 * var(--s))}
  .offer__card{grid-template-columns:minmax(0,1fr);padding:calc(40 * var(--s))}
  .offer__art{width:40%;margin:0 auto}
  .offer__text h2{font-size:calc(80 * var(--s))}
  .offer__price{flex-wrap:wrap}
  .next{padding:calc(50 * var(--s))}
  .next__name{font-size:calc(130 * var(--s))}.next--long .next__name{font-size:calc(100 * var(--s))}
  .mhero{grid-template-columns:minmax(0,1fr);padding:110px calc(40 * var(--s)) calc(60 * var(--s))}
  .mhero__art{min-height:calc(820 * var(--s))}
  .mhero__hand{left:calc(220 * var(--s));width:calc(380 * var(--s))}
  .mhero__card{left:calc(120 * var(--s));top:calc(340 * var(--s));width:calc(520 * var(--s));height:calc(440 * var(--s))}
  .mhero__block{left:calc(300 * var(--s))}
  .priceband__line{font-size:calc(84 * var(--s))}
  .sfoot__mail{justify-self:start}
  .legal{padding:110px 20px 60px}
  .legal__head .display{font-size:calc(104 * var(--s))}
  .legal__grid{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:36px}
  .legal__toc{position:static}
  .legal__toc ol{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .pagewipe{display:none}
  .roll{height:auto}
  .roll__pin{position:static;height:auto;min-height:0}
  .roll__view{-webkit-mask-image:none;mask-image:none;overflow:visible}
  .roll__list{transform:none!important;font-size:max(1.4rem,calc(50 * var(--s)))}
  .roll__list li{opacity:1;scale:1}
  .roll__track{display:none}
}

/* ================= Dream Captures inner pages ================= */
:root{--accent:var(--royal);--block:var(--royal);--next:var(--ink)}
.pagewipe i{background:var(--bg)}
.pagewipe i:nth-child(3n){background:var(--white)}
.pagewipe i:nth-child(4n+1){background:var(--wipe,var(--ba))}
.pagewipe i:nth-child(4n+2){background:var(--wipe2,var(--sp))}
.pagewipe i:nth-child(4n+3){background:var(--wipe3,var(--su))}
.pagewipe i:nth-child(4n){background:var(--wipe4,var(--en))}
.sw{color:var(--ink);font-weight:600;letter-spacing:0;text-transform:none;font-size:max(14px,calc(17 * var(--s)))}
.sw.is-on{color:var(--lc,#fff)}
.shero__title{font-size:calc(116 * var(--s))}
.shero__eyebrow{font-weight:600;color:var(--at,var(--accent));text-transform:uppercase;letter-spacing:.08em;font-size:max(13px,calc(18 * var(--s)))}
.sart__block{background:var(--block)}
.sart__photo{position:absolute;margin:0;left:calc(70 * var(--s));top:10%;width:calc(430 * var(--s));aspect-ratio:1;border-radius:calc(40 * var(--s));overflow:hidden;border:calc(9 * var(--s)) solid #fff;rotate:-4deg;
  box-shadow:calc(14 * var(--s)) calc(14 * var(--s)) 0 rgb(6 23 149 / .16),0 calc(30 * var(--s)) calc(60 * var(--s)) rgb(6 23 149 / .2);background:#dfe6fb}
.sart__photo img{display:block;width:100%;height:100%;object-fit:cover}
.js .sart__photo{animation:artIn 1.1s var(--pop) .6s both}
.sart__sticker{position:absolute;left:calc(150 * var(--s));top:calc(470 * var(--s));width:calc(420 * var(--s));height:auto;rotate:5deg;filter:drop-shadow(0 calc(10 * var(--s)) calc(14 * var(--s)) rgb(6 23 149 / .28))}
.js .sart__sticker{animation:popIn .7s var(--pop) 1.25s both}
.sart__doodle{position:absolute;left:calc(-30 * var(--s));top:2%;width:calc(150 * var(--s));height:auto}
.js .sart__doodle{animation:popIn .6s var(--pop) 1.4s both}
.sart__doodle--b{left:auto;right:calc(40 * var(--s));top:auto;bottom:6%;width:calc(120 * var(--s));filter:brightness(0) invert(1)}
.sart__note{left:auto;right:calc(70 * var(--s));bottom:auto;top:6%;z-index:3}
.sart__note b{color:var(--at,var(--accent))}
.sart__note span{color:var(--ink);font-weight:600}
.lede b{color:var(--ink);font-weight:700}

/* intro band */
.intro{position:relative;display:grid;justify-items:center;gap:calc(26 * var(--s));padding:calc(130 * var(--s)) max(20px,calc(160 * var(--s))) calc(120 * var(--s));text-align:center}
.intro h2{font-size:calc(96 * var(--s));text-wrap:balance}
.intro .lede{max-width:calc(780 * var(--s));font-size:max(17px,calc(24 * var(--s)));line-height:1.45}
.intro__doodle{position:absolute;width:calc(140 * var(--s));height:auto;pointer-events:none}
.intro__doodle--l{left:calc(110 * var(--s));top:calc(90 * var(--s));rotate:-10deg}
.intro__doodle--r{right:calc(50 * var(--s));bottom:calc(10 * var(--s));width:calc(170 * var(--s))}
.intro__rhythm{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(12 * var(--s));margin-top:calc(14 * var(--s))}
.intro__rhythm li{display:flex;align-items:center;gap:.55em;padding:.5em 1em .5em .6em;border-radius:999px;background:#fff;font-weight:600;font-size:max(14px,calc(20 * var(--s)));box-shadow:calc(6 * var(--s)) calc(6 * var(--s)) 0 color-mix(in srgb,var(--accent) 22%,transparent)}
.intro__rhythm img{width:1.9em;height:1.9em;object-fit:contain}
.intro__rhythm small{font-weight:500;color:var(--ink2);font-size:.8em;letter-spacing:.06em;text-transform:uppercase}

/* roll and tags in the program colour */
.roll__bar{font-weight:600}
.roll__list{font-weight:800;font-variation-settings:"wdth" 92;letter-spacing:-.04em}
.roll__count b{color:var(--lc,#fff)}
.is-active .hl{color:var(--lc,#fff)}
.roll__track{background:rgb(6 23 149 / .12)}
.tag{font-weight:700;color:var(--ink)}
.glance .tag:hover{color:var(--lc,#fff)}

/* three photo features */
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(36 * var(--s));padding:calc(40 * var(--s)) calc(100 * var(--s)) calc(120 * var(--s))}
.feats__head{grid-column:1/-1;display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:calc(20 * var(--s))}
.feats__head h2{font-size:calc(80 * var(--s))}
.feats__head p{max-width:calc(420 * var(--s));font-size:max(15px,calc(20 * var(--s)));line-height:1.45;color:var(--ink2)}
.feat{display:grid;grid-template-rows:auto 1fr;border-radius:calc(30 * var(--s));background:#fff;overflow:hidden;box-shadow:calc(10 * var(--s)) calc(10 * var(--s)) 0 color-mix(in srgb,var(--accent) 26%,transparent);transition:transform .45s var(--pop)}
.feat:nth-child(3n+2){rotate:-1.2deg}.feat:nth-child(3n+3){rotate:1deg}.feat:nth-child(3n+4){rotate:-.6deg}
.feat:hover{transform:translateY(-8px) rotate(-1deg)}
.feat__img{aspect-ratio:3/2;overflow:hidden;background:#dfe6fb}
.feat__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--out)}
.feat:hover .feat__img img{transform:scale(1.05)}
.feat__body{display:grid;align-content:start;gap:calc(12 * var(--s));padding:calc(30 * var(--s)) calc(32 * var(--s)) calc(36 * var(--s))}
.feat__num{color:var(--at,var(--accent))!important;font-weight:700;font-size:max(12px,calc(14 * var(--s)));letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.feat h3{font-weight:800;font-size:max(20px,calc(32 * var(--s)));letter-spacing:-.03em;line-height:1.05;font-variation-settings:"wdth" 92}
.feat p{font-size:max(15px,calc(18 * var(--s)));line-height:1.5;color:var(--ink2)}
.js .feat.popin{opacity:0;translate:0 60px;transition:opacity .7s var(--out),translate .9s var(--pop);transition-delay:calc(var(--i,0) * 110ms)}
.js .feat.popin.in{opacity:1;translate:0 0}

/* six enrichment tracks */
.tracks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(30 * var(--s));padding:0 calc(100 * var(--s)) calc(110 * var(--s))}
.track{position:relative;display:grid;align-content:start;gap:calc(14 * var(--s));padding:calc(34 * var(--s));border-radius:calc(30 * var(--s));background:#fff;box-shadow:calc(10 * var(--s)) calc(10 * var(--s)) 0 color-mix(in srgb,var(--tc) 40%,transparent);transition:transform .4s var(--pop)}
.track:hover{transform:translateY(-6px) rotate(-1deg)}
.track__icon{width:calc(96 * var(--s));height:calc(96 * var(--s));display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--tc) 22%,#fff)}
.track__icon img{width:72%;height:72%;object-fit:contain}
.track h3{font-weight:800;font-size:max(20px,calc(30 * var(--s)));letter-spacing:-.03em;line-height:1.05}
.track p{color:var(--ink2);font-size:max(14px,calc(17 * var(--s)));line-height:1.45}
.track ul{display:flex;flex-wrap:wrap;gap:calc(8 * var(--s));margin-top:calc(6 * var(--s))}
.track li{padding:.32em .7em;border-radius:999px;background:color-mix(in srgb,var(--tc) 18%,#fff);font-weight:600;font-size:max(13px,calc(15 * var(--s)))}
.js .track.popin{opacity:0;scale:.9;transition:opacity .6s var(--out),scale .8s var(--pop);transition-delay:calc(var(--i,0) * 90ms)}
.js .track.popin.in{opacity:1;scale:1}

/* the parents' box */
.parents{padding:calc(20 * var(--s)) calc(100 * var(--s)) calc(60 * var(--s))}
.parents__card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:calc(40 * var(--s));padding:calc(44 * var(--s)) calc(56 * var(--s));border-radius:calc(34 * var(--s));
  background:color-mix(in srgb,var(--accent) 16%,#fff);border:2px dashed color-mix(in srgb,var(--accent) 55%,transparent)}
.parents__icon{width:calc(120 * var(--s));height:auto}
.parents__label{display:inline-block;margin-bottom:calc(10 * var(--s));padding:.3em .8em;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:max(12px,calc(14 * var(--s)));letter-spacing:.12em;text-transform:uppercase}
.parents h2{font-weight:800;font-size:max(22px,calc(44 * var(--s)));letter-spacing:-.035em;line-height:1.02;font-variation-settings:"wdth" 92}
.parents p{margin-top:calc(10 * var(--s));max-width:calc(640 * var(--s));color:var(--ink2);font-size:max(15px,calc(19 * var(--s)));line-height:1.5}
.btn--cta{background:var(--cta);color:#000}
.btn--cta:hover{background:#8be6f8;color:#000}

/* the program-colour CTA card */
.offer__card{background:var(--block);box-shadow:0 calc(30 * var(--s)) calc(60 * var(--s)) color-mix(in srgb,var(--block) 35%,transparent);color:var(--lc,#fff);grid-template-columns:minmax(0,.36fr) minmax(0,1fr)}
.offer__art{position:relative}
.offer__art img{filter:drop-shadow(0 calc(10 * var(--s)) calc(16 * var(--s)) rgb(6 23 149 / .25))}
.offer__text h2{font-size:calc(64 * var(--s));color:var(--lc,#fff)}
.offer__text .it{color:inherit}
.offer__quote{font-size:max(16px,calc(22 * var(--s)));line-height:1.45;max-width:calc(560 * var(--s))}
.offer__btns{display:flex;flex-wrap:wrap;gap:calc(14 * var(--s))}
.offer--light .offer__art img{filter:brightness(0) invert(1) drop-shadow(0 calc(10 * var(--s)) calc(16 * var(--s)) rgb(0 0 40 / .3))}
.offer .btn{background:#fff;color:var(--ink)}
.offer .btn:hover{background:var(--ink);color:#fff}
.offer .btn--ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}

/* next band */
.next{background:var(--next);color:var(--nc,#fff)}
.next__name{font-weight:800;font-variation-settings:"wdth" 92;letter-spacing:-.04em}
.next__label{font-weight:600}
.next__sticker{position:absolute;right:calc(60 * var(--s));top:50%;width:calc(380 * var(--s));height:auto;translate:0 -50%;rotate:6deg;filter:drop-shadow(0 calc(10 * var(--s)) calc(16 * var(--s)) rgb(6 23 149 / .25));transition:rotate .5s var(--pop),scale .5s var(--pop)}
.next:hover .next__sticker{rotate:-3deg;scale:1.05}

/* footer */
.sfoot__links{font-weight:800}
.sfoot__logo{width:max(140px,calc(190 * var(--s)))}
.sfoot__logo img{display:block;width:100%;height:auto}
.sfoot__mail{text-transform:none}
.sfoot__legal a{color:rgb(6 23 149 / .6)}

/* programs hub */
.hub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(40 * var(--s));padding:calc(30 * var(--s)) calc(100 * var(--s)) calc(130 * var(--s))}
.ptile{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);min-height:calc(430 * var(--s));border-radius:calc(40 * var(--s));background:var(--c);color:var(--lc,#fff);text-decoration:none;overflow:hidden;
  box-shadow:0 calc(24 * var(--s)) calc(50 * var(--s)) color-mix(in srgb,var(--c) 30%,transparent);transition:transform .5s var(--pop)}
.ptile:nth-child(2){rotate:1deg}.ptile:nth-child(3){rotate:-1deg}
.ptile:hover{transform:translateY(-10px) rotate(-1.5deg)}
.ptile__text{position:relative;z-index:2;display:grid;align-content:space-between;gap:calc(20 * var(--s));padding:calc(44 * var(--s))}
.ptile__eyebrow{font-weight:700;font-size:max(12px,calc(15 * var(--s)));letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.ptile h2{font-weight:800;font-size:calc(50 * var(--s));overflow-wrap:break-word;hyphens:manual;letter-spacing:-.04em;line-height:.95;font-variation-settings:"wdth" 92}
.ptile p{font-size:max(15px,calc(19 * var(--s)));line-height:1.45}
.ptile__go{display:inline-flex;align-items:center;gap:.5em;justify-self:start;padding:.6em 1.1em;border-radius:999px;background:#fff;color:var(--ink);font-weight:700;font-size:max(14px,calc(17 * var(--s)))}
.ptile__go svg{width:1em;transition:transform .4s var(--pop)}
.ptile:hover .ptile__go svg{transform:translateX(4px)}
.ptile__img{position:relative;margin:calc(26 * var(--s)) calc(26 * var(--s)) calc(26 * var(--s)) 0;border-radius:calc(28 * var(--s));overflow:hidden;border:calc(6 * var(--s)) solid rgb(255 255 255 / .9)}
.ptile__img img{display:block;width:100%;height:100%;object-fit:cover}
.ptile__stk{position:absolute;z-index:3;left:calc(30 * var(--s));bottom:calc(-14 * var(--s));width:calc(300 * var(--s));height:auto;rotate:-4deg;opacity:0}
.js .ptile.popin{opacity:0;translate:0 70px;transition:opacity .7s var(--out),translate 1s var(--pop);transition-delay:calc(var(--i,0) * 100ms)}
.js .ptile.popin.in{opacity:1;translate:0 0}

/* sticker collage art for hub, partner and contact heroes */
.sart__stks{position:absolute;inset:0}
.sart__stks img{position:absolute;width:calc(380 * var(--s));height:auto;filter:drop-shadow(0 calc(10 * var(--s)) calc(16 * var(--s)) rgb(6 23 149 / .28))}
.sart__stks img:nth-child(1){left:calc(40 * var(--s));top:24%;rotate:-7deg}
.sart__stks img:nth-child(2){left:calc(170 * var(--s));top:41%;rotate:5deg}
.sart__stks img:nth-child(3){left:calc(60 * var(--s));top:58%;rotate:-4deg}
.sart__stks img:nth-child(4){left:calc(200 * var(--s));top:75%;rotate:6deg}
.js .sart__stks img{animation:popIn .7s var(--pop) both;animation-delay:calc(.7s + var(--i) * 160ms)}

/* why us: long bands */
.bands{display:grid;gap:calc(110 * var(--s));padding:calc(40 * var(--s)) 0 calc(130 * var(--s))}
.band{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:calc(80 * var(--s));padding:0 calc(100 * var(--s))}
.band:nth-child(even) .band__media{order:2}
.band__media{position:relative;min-height:calc(480 * var(--s))}
.band__block{position:absolute;inset:8% -12px 8% 22%;border-radius:calc(60 * var(--s)) 0 0 calc(60 * var(--s));background:var(--c)}
.band:nth-child(even) .band__block{inset:8% 22% 8% -12px;border-radius:0 calc(60 * var(--s)) calc(60 * var(--s)) 0}
.band__photo{position:absolute;left:4%;top:0;width:68%;aspect-ratio:1;margin:0;border-radius:calc(36 * var(--s));overflow:hidden;border:calc(8 * var(--s)) solid #fff;rotate:-3deg;box-shadow:0 calc(24 * var(--s)) calc(50 * var(--s)) rgb(6 23 149 / .18);background:#dfe6fb}
.band:nth-child(even) .band__photo{left:auto;right:4%;rotate:3deg}
.band__photo img{display:block;width:100%;height:100%;object-fit:cover}
.band__icon{position:absolute;right:6%;bottom:2%;width:calc(150 * var(--s));height:calc(150 * var(--s));display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 calc(16 * var(--s)) calc(30 * var(--s)) rgb(6 23 149 / .18)}
.band:nth-child(even) .band__icon{right:auto;left:6%}
.band__icon img{width:66%;height:66%;object-fit:contain}
.band__doodle{position:absolute;left:-2%;bottom:-4%;width:calc(130 * var(--s));height:auto}
.band:nth-child(even) .band__doodle{left:auto;right:-2%}
.js .band .band__photo{opacity:0;translate:0 50px;rotate:-10deg;transition:opacity .7s var(--out),translate 1s var(--pop),rotate 1s var(--pop)}
.js .band.in .band__photo{opacity:1;translate:0 0;rotate:-3deg}
.js .band:nth-child(even).in .band__photo{rotate:3deg}
.js .band .band__icon{scale:0;transition:scale .7s var(--pop) .35s}
.js .band.in .band__icon{scale:1}
.band__text{display:grid;gap:calc(20 * var(--s));justify-items:start;min-width:0}
.band__num{display:inline-flex;align-items:center;gap:.6em;font-weight:700;font-size:max(12px,calc(15 * var(--s)));letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.band__num b{display:inline-grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;background:var(--c);color:var(--lc,#fff);letter-spacing:0}
.band__text h2{font-size:calc(74 * var(--s));text-wrap:balance}
.band__text>p{font-size:max(16px,calc(21 * var(--s)));line-height:1.5;color:var(--ink2);max-width:calc(560 * var(--s))}
.points{display:grid;gap:calc(14 * var(--s));width:100%}
.point{display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(16 * var(--s));align-items:start;padding:calc(18 * var(--s)) calc(22 * var(--s));border-radius:calc(20 * var(--s));background:#fff;box-shadow:calc(6 * var(--s)) calc(6 * var(--s)) 0 color-mix(in srgb,var(--c) 30%,transparent)}
.point svg{width:calc(30 * var(--s));min-width:20px;height:auto;margin-top:.1em}
.point b{display:block;font-weight:800;font-size:max(16px,calc(21 * var(--s)));letter-spacing:-.02em}
.point span{display:block;margin-top:.2em;color:var(--ink2);font-size:max(14px,calc(17 * var(--s)));line-height:1.45}

/* impact */
.istats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(24 * var(--s));padding:0 calc(100 * var(--s)) calc(90 * var(--s))}
.istats .stat{display:grid;gap:calc(10 * var(--s));justify-items:center;text-align:center;padding:calc(36 * var(--s)) calc(18 * var(--s));border-radius:calc(26 * var(--s));background:#fff;box-shadow:calc(10 * var(--s)) calc(10 * var(--s)) 0 rgb(3 55 242 / .15)}
.istats .stat:nth-child(2){rotate:1.5deg}.istats .stat:nth-child(3){rotate:-1deg}
.istats .stat b{font-weight:800;font-size:calc(84 * var(--s));letter-spacing:-.045em;line-height:1;color:var(--royal);font-variant-numeric:tabular-nums}
.istats .stat:nth-child(1) b{color:var(--ba)}.istats .stat:nth-child(3) b{color:#0b8f8a}
.istats .stat span{font-weight:500;font-size:max(12px,calc(16 * var(--s)));letter-spacing:.08em;line-height:1.3;text-transform:uppercase;color:var(--ink2)}
.feats--4{grid-template-columns:repeat(2,minmax(0,1fr))}
.feats--4 .feat__img{aspect-ratio:16/10}

/* steps (partner) */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(28 * var(--s));padding:0 calc(100 * var(--s)) calc(110 * var(--s));counter-reset:st}
.step{position:relative;display:grid;align-content:start;gap:calc(14 * var(--s));padding:calc(90 * var(--s)) calc(30 * var(--s)) calc(36 * var(--s));border-radius:calc(30 * var(--s));background:#fff;box-shadow:calc(10 * var(--s)) calc(10 * var(--s)) 0 color-mix(in srgb,var(--c) 40%,transparent)}
.step:nth-child(even){translate:0 calc(50 * var(--s))}
.step__icon{position:absolute;left:calc(26 * var(--s));top:calc(-46 * var(--s));width:calc(120 * var(--s));height:calc(120 * var(--s));display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,#e6ebff 45%,#c9d3fb 100%);box-shadow:0 calc(14 * var(--s)) calc(28 * var(--s)) rgb(6 23 149 / .16)}
.step__icon img{width:62%;height:62%;object-fit:contain}
.step__n{position:absolute;right:calc(26 * var(--s));top:calc(24 * var(--s));font-weight:800;font-size:calc(54 * var(--s));letter-spacing:-.05em;line-height:1;color:color-mix(in srgb,var(--c) 70%,#fff)}
.step h3{font-weight:800;font-size:max(19px,calc(28 * var(--s)));letter-spacing:-.03em;line-height:1.05}
.step p{color:var(--ink2);font-size:max(14px,calc(17 * var(--s)));line-height:1.5}
.js .step.popin{opacity:0;translate:0 80px;transition:opacity .7s var(--out),translate 1s var(--pop);transition-delay:calc(var(--i,0) * 120ms)}
.js .step.popin.in{opacity:1;translate:0 0}
.js .step.popin.in:nth-child(even){translate:0 calc(50 * var(--s))}
.pull{position:relative;margin:0 calc(100 * var(--s)) calc(120 * var(--s));padding:calc(80 * var(--s)) calc(300 * var(--s)) calc(80 * var(--s)) calc(110 * var(--s));border-radius:calc(40 * var(--s));background:var(--royal);color:#fff;overflow:hidden}
.pull blockquote{margin:0;font-weight:800;font-size:calc(62 * var(--s));letter-spacing:-.04em;line-height:1.02;font-variation-settings:"wdth" 92;text-wrap:balance;max-width:calc(1000 * var(--s))}
.pull blockquote::before{content:"\201C";display:block;height:.55em;font-size:2em;line-height:1;color:var(--cta)}
.pull p{margin-top:calc(24 * var(--s));font-weight:600;font-size:max(14px,calc(18 * var(--s)));letter-spacing:.1em;text-transform:uppercase;color:rgb(255 255 255 / .8)}
.pull__doodle{position:absolute;right:calc(60 * var(--s));bottom:calc(40 * var(--s));width:calc(170 * var(--s));height:auto;filter:brightness(0) invert(1);opacity:.85}

/* form section on inner pages */
.formsec{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:calc(60 * var(--s));align-items:start;padding:calc(40 * var(--s)) calc(100 * var(--s)) calc(120 * var(--s));scroll-margin-top:60px}
.formsec__aside{display:grid;gap:calc(22 * var(--s));justify-items:start}
.formsec__aside h2{font-size:calc(76 * var(--s))}
.formsec__aside .lede{font-size:max(16px,calc(21 * var(--s)));line-height:1.5}
.formsec .talk{position:relative;left:auto;top:auto;width:auto}
.formsec .talk__label{height:auto;margin-bottom:calc(14 * var(--s));font-size:calc(40 * var(--s))}
.contacts{display:grid;gap:calc(12 * var(--s));width:100%}
.contact{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:calc(16 * var(--s));padding:calc(16 * var(--s)) calc(18 * var(--s));border-radius:calc(20 * var(--s));background:#fff;box-shadow:calc(6 * var(--s)) calc(6 * var(--s)) 0 rgb(3 55 242 / .14)}
.contact img{width:calc(52 * var(--s));min-width:34px;height:auto}
.contact small{display:block;font-weight:600;font-size:max(11px,calc(13 * var(--s)));letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.contact span{display:block;font-weight:700;font-size:max(15px,calc(19 * var(--s)));letter-spacing:-.01em;user-select:all;overflow-wrap:anywhere}
.copy{border:0;border-radius:999px;padding:.5em .95em;background:#e3e8fb;color:var(--ink);font:inherit;font-weight:700;font-size:max(12px,calc(14 * var(--s)));cursor:pointer;transition:background-color .2s,transform .3s var(--pop)}
.copy:hover{background:var(--cta);transform:translateY(-2px)}
.offices{padding:0 calc(100 * var(--s)) calc(120 * var(--s))}
.offices h2{font-size:calc(64 * var(--s))}
.offices ul{display:flex;flex-wrap:wrap;gap:calc(14 * var(--s));margin-top:calc(30 * var(--s))}
.offices li{display:flex;align-items:center;gap:.5em;padding:.6em 1.1em;border-radius:999px;background:#fff;font-weight:700;font-size:max(15px,calc(22 * var(--s)));box-shadow:calc(6 * var(--s)) calc(6 * var(--s)) 0 color-mix(in srgb,var(--c) 45%,transparent);rotate:var(--r,0deg)}
.offices li small{font-weight:600;font-size:.6em;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.offices li i{width:.7em;height:.7em;border-radius:50%;background:var(--c)}

/* logo strip on why-us */
.lstrip{padding:0 calc(100 * var(--s)) calc(120 * var(--s));text-align:center}
.lstrip h2{font-size:calc(64 * var(--s))}
.lstrip ul{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:calc(36 * var(--s)) calc(24 * var(--s));margin-top:calc(50 * var(--s))}
.lstrip li{display:grid;justify-items:center;gap:calc(10 * var(--s));font-weight:500;font-size:max(12px,calc(15 * var(--s)));color:var(--ink2)}
.lstrip img{height:calc(64 * var(--s));min-height:36px;width:auto;max-width:100%;object-fit:contain;filter:grayscale(1) opacity(.62);transition:filter .3s}
.lstrip li:hover img{filter:none}

/* legal */
.legal__meta{color:rgb(6 23 149 / .55)}
.legal__sec h2::before{color:var(--royal)}
.legal__sec p,.legal__sec li{color:var(--ink2)}
.legal__toc ol{color:rgb(6 23 149 / .5)}
.legal__note{background:#fff6b8}
mark.fill{background:#fff6b8}

@media (max-width:760px),(max-width:1100px) and (orientation:portrait){
  .shero__title{font-size:calc(104 * var(--s))}
  .shero__eyebrow{font-size:max(13px,calc(24 * var(--s)))}
  .sart__photo{left:calc(160 * var(--s));top:6%;width:calc(400 * var(--s))}
  .sart__sticker{left:calc(170 * var(--s));top:calc(400 * var(--s));width:calc(400 * var(--s))}
  .sart__doodle{left:calc(40 * var(--s));width:calc(110 * var(--s))}
  .sart__note{right:auto;left:calc(10 * var(--s));top:auto;bottom:4%}
  .sart__stks img{width:calc(330 * var(--s))}
  .sart__stks img:nth-child(1){left:calc(150 * var(--s))}.sart__stks img:nth-child(2){left:calc(290 * var(--s))}
  .sart__stks img:nth-child(3){left:calc(170 * var(--s))}.sart__stks img:nth-child(4){left:calc(300 * var(--s))}
  .intro{padding:calc(110 * var(--s)) calc(40 * var(--s)) calc(90 * var(--s))}
  .intro h2{font-size:calc(84 * var(--s))}
  .intro .lede{max-width:none;font-size:max(16px,calc(30 * var(--s)))}
  .intro__doodle--l{left:calc(20 * var(--s));top:calc(30 * var(--s))}
  .intro__rhythm li{font-size:max(14px,calc(26 * var(--s)))}
  .feats,.feats--4{grid-template-columns:minmax(0,1fr);gap:calc(50 * var(--s));padding:calc(20 * var(--s)) calc(40 * var(--s)) calc(100 * var(--s))}
  .feats__head{display:grid;gap:12px}
  .feats__head h2{font-size:calc(84 * var(--s))}
  .feats__head p{max-width:none;font-size:max(15px,calc(28 * var(--s)))}
  .feat__body{padding:calc(40 * var(--s))}
  .feat h3{font-size:max(21px,calc(44 * var(--s)))}
  .feat p,.track p,.step p{font-size:max(15px,calc(27 * var(--s)))}
  .tracks{grid-template-columns:minmax(0,1fr);gap:calc(40 * var(--s));padding:0 calc(40 * var(--s)) calc(100 * var(--s))}
  .track{padding:calc(44 * var(--s))}
  .track__icon{width:calc(120 * var(--s));height:calc(120 * var(--s))}
  .track h3{font-size:max(21px,calc(44 * var(--s)))}
  .parents{padding:calc(20 * var(--s)) calc(40 * var(--s)) calc(60 * var(--s))}
  .parents__card{grid-template-columns:minmax(0,1fr);gap:calc(24 * var(--s));padding:calc(50 * var(--s)) calc(44 * var(--s))}
  .parents__icon{width:calc(130 * var(--s))}
  .parents h2{font-size:max(24px,calc(56 * var(--s)))}
  .parents p{font-size:max(15px,calc(27 * var(--s)))}
  .offer__card{grid-template-columns:minmax(0,1fr)}
  .offer__text h2{font-size:calc(76 * var(--s))}
  .offer__quote{font-size:max(16px,calc(29 * var(--s)))}
  .next__sticker{position:relative;right:auto;top:auto;translate:none;width:calc(420 * var(--s));margin-top:calc(16 * var(--s))}
  .hub{grid-template-columns:minmax(0,1fr);gap:calc(50 * var(--s));padding:calc(20 * var(--s)) calc(40 * var(--s)) calc(100 * var(--s))}
  .ptile{grid-template-columns:minmax(0,1fr);min-height:0}
  .ptile__img{order:-1;aspect-ratio:4/3;margin:calc(26 * var(--s)) calc(26 * var(--s)) 0}
  .ptile__text{padding:calc(44 * var(--s))}
  .ptile h2{font-size:calc(76 * var(--s))}
  .ptile p,.ptile__go{font-size:max(15px,calc(27 * var(--s)))}
  .bands{gap:calc(120 * var(--s))}
  .band{grid-template-columns:minmax(0,1fr);gap:calc(50 * var(--s));padding:0 calc(40 * var(--s))}
  .band:nth-child(even) .band__media{order:0}
  .band__media{min-height:calc(560 * var(--s))}
  .band__photo{width:76%}
  .band__icon{width:calc(150 * var(--s));height:calc(150 * var(--s))}
  .band__text h2{font-size:calc(84 * var(--s))}
  .band__text>p{font-size:max(16px,calc(29 * var(--s)))}
  .point b{font-size:max(16px,calc(29 * var(--s)))}
  .point span{font-size:max(14px,calc(25 * var(--s)))}
  .point svg{width:calc(40 * var(--s))}
  .istats{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(24 * var(--s));padding:0 calc(40 * var(--s)) calc(80 * var(--s))}
  .istats .stat b{font-size:calc(72 * var(--s))}
  .istats .stat span{font-size:max(11px,calc(20 * var(--s)))}
  .steps{grid-template-columns:minmax(0,1fr);gap:calc(100 * var(--s));padding:calc(60 * var(--s)) calc(40 * var(--s)) calc(100 * var(--s))}
  .step:nth-child(even),.js .step.popin.in:nth-child(even){translate:0 0}
  .step{padding:calc(100 * var(--s)) calc(44 * var(--s)) calc(44 * var(--s))}
  .step__icon{width:calc(140 * var(--s));height:calc(140 * var(--s));top:calc(-60 * var(--s))}
  .step h3{font-size:max(21px,calc(44 * var(--s)))}
  .step__n{font-size:calc(70 * var(--s))}
  .pull{margin:0 calc(40 * var(--s)) calc(100 * var(--s));padding:calc(70 * var(--s)) calc(50 * var(--s)) calc(180 * var(--s))}
  .pull blockquote{font-size:calc(66 * var(--s))}
  .formsec{grid-template-columns:minmax(0,1fr);gap:calc(60 * var(--s));padding:calc(40 * var(--s)) calc(40 * var(--s)) calc(100 * var(--s))}
  .formsec__aside h2{font-size:calc(90 * var(--s))}
  .formsec .talk__label{font-size:calc(52 * var(--s))}
  .contact span{font-size:max(15px,calc(30 * var(--s)))}
  .contact small{font-size:11px}
  .offices,.lstrip{padding:0 calc(40 * var(--s)) calc(100 * var(--s))}
  .offices h2,.lstrip h2{font-size:calc(80 * var(--s))}
  .offices li{font-size:max(15px,calc(30 * var(--s)))}
  .lstrip ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sfoot__logo{width:150px}
  .top__cta{right:16px}
  .sart__sticker{left:calc(20 * var(--s))}
  .sart__note{left:auto;right:calc(10 * var(--s));bottom:1%}
  .next__name{font-size:calc(96 * var(--s))}.next--long .next__name{font-size:calc(76 * var(--s))}
  .offer .btn{font-size:15px;padding:0 18px;height:46px}
  .offer__btns{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .js .feat.popin,.js .track.popin,.js .ptile.popin,.js .step.popin{opacity:1;translate:none;scale:1}
  .js .band .band__photo{opacity:1;translate:none}
  .js .band .band__icon{scale:1}
}


/* ================= portrait tablets (iPad mini to iPad Pro): the stacked layout, tuned for the bigger screen ================= */
@media (min-width:761px) and (max-width:1100px) and (orientation:portrait){
  /* type and spacing scale: the homepage grows to about 1.4x a phone, inner pages are set for ~1040px */
  :root{--sw:calc(100vw / 1040);--m:calc(min(72vw,700px) / 440)}
  .top__cta{height:44px;padding:0 22px;font-size:15px;right:24px}
  .logo-link{width:calc(140px - var(--h,0) * 16px)}
  .burger{left:24px}

  /* homepage: text and cards sit in a centred reading column; colour blocks still run off the edge */
  .home .game__text,.home .commit__text,.home .perks,.home .plans__head,.home .plans__cards,.home .route__eyebrow,.home .route__title,
  .home .route__track,.home .match__text,.home .work__eyebrow,.home .work__title,.home .brands__title,.home .stats{
    width:min(740px,calc(100% - 80px))!important;margin-left:auto!important;margin-right:auto!important}
  .home .gart,.home .svdeck{margin-left:auto!important;margin-right:auto!important}
  .home .svdeck{transform:translateX(calc(-18 * var(--s)))}
  .home .game__block,.home .commit__block,.home .plans__block,.home .match__block{width:calc(23vw)!important}
  .home .cband__comp{width:min(740px,calc(100% - 80px));margin:0 auto}
  .home .radio{left:0}
  .home .radio__say{left:calc(110 * var(--s));max-width:calc(100% - 110 * var(--s))}
  .home .radio__copy{right:0}
  .home .match__hand{margin-right:calc(50% - 370px)!important}
  .home .match__card{margin-left:calc(50% - 370px)!important}
  .home .stats{grid-template-columns:1.5fr 1fr 1fr 1.2fr}
  .home .stat--big,.home .stat:last-child{grid-column:auto}
  .home .stat b{font-size:calc(34 * var(--s))}
  .home .stat span{font-size:12px}
  .home .wcard{width:calc(300 * var(--s))}
  .home .faq__head{max-width:740px;margin:0 auto;padding:0}
  .home .faq__list{max-width:740px;margin-left:auto;margin-right:auto}
  .home .qa__q{font-size:18px;min-height:70px;padding:14px 22px}
  .home .qa__a p{font-size:17px;padding:0 22px 20px}
  .home .foot .comp{width:min(720px,calc(100% - 48px));margin:0 auto}
  .home .talk__fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home .route__school{margin-left:max(calc(6 * var(--s)),calc(50% - 370px))}
  .home .route__doodle--cloud{right:calc(50% - 370px)}

  /* inner pages: two-up grids where there is room */
  .feats,.feats--4,.tracks,.hub,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feats__head{grid-column:1/-1}
  .steps{gap:calc(110 * var(--s)) calc(40 * var(--s))}
  .istats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lstrip ul{grid-template-columns:repeat(4,minmax(0,1fr))}
  .band{max-width:820px;margin-left:auto;margin-right:auto;gap:calc(80 * var(--s))}
  .band__media{min-height:calc(620 * var(--s))}
  .shero__text,.intro,.parents__card,.offer__card,.formsec,.offices,.legal{max-width:920px;margin-left:auto;margin-right:auto}
  .offer__card{grid-template-columns:minmax(0,.4fr) minmax(0,1fr)}
  .offer__art{width:100%}
  .sfoot__logo{width:170px}
}

/* ================= small phones (iPhone SE and similar) ================= */
@media (max-width:400px){
  .top__cta{height:32px;padding:0 12px;font-size:12px}
  .logo-link{width:calc(96px - var(--h,0) * 10px)}
}
/* ================= touch screens: same motion, lighter painting ================= */
@media (hover:none){
  .flight__svg,.bus__svg,.radio__svg,.wclock{filter:none}
  .dd:hover .dd__svg{animation:none}
}
@media (max-width:400px){
  .next__name{font-size:calc(72 * var(--s))}.next--long .next__name{font-size:calc(58 * var(--s))}
  .contact{grid-template-columns:auto minmax(0,1fr);row-gap:6px}
  .contact span{font-size:15px}
  .copy{grid-column:2;justify-self:start}
}