@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@900&display=swap');
/* One composition scales as a unit. Each annotation cluster owns its arrows. */
.mobile-title-break,.intro-mobile,.mobile-stickers{display:none}
.whatsapp-note{display:flex;align-items:center;gap:7px;text-decoration:none;white-space:nowrap}
.whatsapp-icon{flex:none;width:31px;height:33px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.whatsapp-text{position:relative;display:block}
.whatsapp-underline{position:absolute;left:0;top:100%;width:100%;height:15px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.whatsapp-doodle-arrow{width:52px;height:43px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:translateY(-12px)}
.whatsapp-sprinkles{flex:none;width:27px;height:35px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
@media(min-width:761px){.whatsapp-doodle-arrow{display:none}.hero-stage .whatsapp-note{font-size:19px}}
.hero-stage{display:contents}
.sticker-stack{display:none}
@media(min-width:761px){
 .hero{padding-top:0;min-height:0;height:calc(110px + 790px * var(--hero-scale,1))}
 .hero-stage{display:block;position:absolute;left:50%;top:calc(110px * (1 - var(--hero-scale,1)));width:1280px;height:900px;transform:translateX(-50%) scale(var(--hero-scale,1));transform-origin:top center}
 .hero-stage .hero-copy{position:absolute;top:149px;left:50%;transform:translateX(-50%);width:850px;max-width:none;padding:0;margin:0}
 .hero-stage h1{font-size:72px;letter-spacing:-2.5px;line-height:1.05}
 .hero-stage .intro{font-size:25px;line-height:1.25;margin:24px 0 18px;max-width:none}
 .hero-stage .main-call{font-size:24px;padding:11px 27px 13px}
 .hero-stage .left-notes{inset:auto;left:36px;top:200px;width:220px;height:500px}
 .hero-stage .right-notes{inset:auto;left:1020px;top:210px;width:230px;height:500px}
 .hero-stage .note{font-size:26px;line-height:1.05}
 .hero-stage .development{left:20px;right:auto;top:0}
 .hero-stage .arrow-web{left:55px;top:68px;width:95px;height:105px}
 .hero-stage .web-label{left:25px;top:178px;font-size:54px;padding:23px 30px 26px}
 .hero-stage .arrow-seo{left:116px;top:294px;width:88px;height:79px}
 .hero-stage .seo-label{left:55px;top:398px;font-size:55px;padding:23px 35px 26px}
 .hero-stage .rays{left:0;top:416px;width:54px}
 .hero-stage .campaigns{left:20px;right:auto;top:0}
 .hero-stage .arrow-ads{left:20px;right:auto;top:87px;width:90px;height:90px}
 .hero-stage .google-label{left:0;right:auto;top:182px;font-size:37px;padding:23px 30px 26px}
 .hero-stage .arrow-tiktok{left:0;right:auto;top:305px;width:92px;height:82px}
 .hero-stage .tiktok-label{left:0;right:auto;top:402px;font-size:37px;padding:23px 30px 26px}
 .hero-stage .collage{width:780px;max-width:none;bottom:-78px}
 .hero-stage .whatsapp-note{right:38px;bottom:60px;font-size:21px}
 .hero-stage .left-notes>.scrap,.hero-stage .right-notes>.scrap,.hero-stage .left-notes>.arrow,.hero-stage .right-notes>.arrow,.hero-stage .left-notes>.rays{display:none}
 .hero-stage .sticker-stack{display:block;position:absolute;top:70px;left:-15px;width:260px;height:520px;object-fit:contain;transform:scale(.8);transform-origin:top center}
 .hero-stage .right-notes .sticker-stack{top:76px;left:-5px}
 .hero .torn-bottom{height:calc(70px * var(--hero-scale,1))}
}
@media(max-width:760px){
 .hero{height:auto;min-height:0;padding-top:128px;padding-bottom:0;overflow:hidden}
 .hero-stage{display:flex;flex-direction:column;position:relative;padding:0 18px 62px;width:100%;height:auto;transform:none}
 .hero-stage .hero-copy{position:relative;text-align:left;padding:0;margin:0;width:100%;max-width:none}
 .mobile-title-break{display:block}
 .hero-stage h1{font-family:'Bodoni Moda',Georgia,serif;font-weight:900;font-size:clamp(43px,13.8vw,78px);letter-spacing:-2px;line-height:.94}
 .hero-stage h1>.title-result{display:block;margin-top:4px;font-size:clamp(32px,10.7vw,61px);letter-spacing:-1.8px;white-space:nowrap;line-height:1.06}
 .hero-stage .intro-desktop{display:none}
 .hero-stage .intro-mobile{display:block;position:relative;margin:12px 0 32px;font-family:var(--hand);font-weight:600;font-size:clamp(23px,7.1vw,36px);line-height:1.04;letter-spacing:-.3px}
 .intro-mobile svg{position:absolute;left:24px;bottom:-18px;width:130px;height:20px;fill:none;stroke:var(--ink);stroke-width:2.1;stroke-linecap:round;transform:rotate(-2deg)}
 .hero-stage .main-call{display:flex;width:max-content;margin:0 auto;font-size:26px;padding:12px 28px 15px}
 .hero-stage .main-call::before{inset:-4px 0;mask:url('assets/worn-paper-strip.png') center/100% 100% no-repeat}
 .hero-stage .left-notes,.hero-stage .right-notes{display:none}
 .hero-stage .collage{position:relative;left:50%;bottom:auto;transform:translateX(-50%);width:130vw;max-width:none;margin:20px 0 0;order:1}
 .hero-stage .collage img{display:block;width:100%;height:auto}
 .hero-stage .mobile-stickers{display:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 12px;position:relative;order:2;margin:12px -3px 0}
 .mobile-sticker{min-width:0}
 .mobile-sticker p{font-family:var(--hand);font-weight:700;font-size:21px;line-height:1.05;min-height:44px;text-align:center;margin:0 4px 0;text-transform:uppercase}
 .mobile-sticker>svg{display:block;width:100%;height:auto;overflow:hidden}
 .hero-stage .whatsapp-note{position:relative;right:auto;bottom:auto;align-self:center;font-size:clamp(19px,5.4vw,25px);margin-top:-48px;order:3;transform:rotate(-3deg);gap:5px;z-index:3}
 .whatsapp-doodle-arrow{width:clamp(34px,10vw,52px)}
 .hero .torn-bottom{height:30px}
}