/* Sticky Stickers — campaign art direction: hot sheets, chat beige, midnight blue. */
.wa-defs{position:absolute;width:0;height:0;overflow:hidden}
body[data-project=whatsapp]{
 --wa-ember:#e8501c;--wa-ember-dim:#6a2f30;--wa-rust:#8f210c;--wa-night:#041b45;--wa-violet:#5c2c8c;
 --wa-chat:#efe2d6;--wa-green:#d2fcc8;--wa-ink:#17120f;--wa-cream:#fbf8f2;
 background:var(--wa-night);overflow-x:clip}
/* Header floats over the bed */
body[data-project=whatsapp] .site-header{position:absolute;top:0;left:0;right:0;z-index:5;background:transparent;border:0;color:#fff}
body[data-project=whatsapp] .site-header a,body[data-project=whatsapp] .site-header .language-switch a{color:#fff}
body[data-project=whatsapp] .site-header .wordmark span{color:#fff}
body[data-project=whatsapp] .language-switch a[aria-current=page]{border-color:#fff}
/* The forwarded chip sits over the page end: the footer keeps room for it */
body[data-project=whatsapp] footer{padding-bottom:clamp(5.5rem,7vw,6.5rem)}
.wa{--case-gutter:clamp(16px,3.2vw,56px);background:var(--wa-night);color:var(--wa-cream);max-width:none;overflow:clip}
.wa p{margin:0}

/* ---------- 01 opening: image 01 whole, no text of the title ever sliced ---------- */
.wa .wa-open{padding:0;margin:0;max-width:none;position:relative;height:100vh;height:100svh}
.wa-motion .wa .wa-open{height:185vh}
.wa-stage{--cw:max(100vw,calc(100svh*2.0178));--cshift:min(calc(var(--cw)*.0175),calc((var(--cw) - 100vw)/2));position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--wa-rust);isolation:isolate}
/* Portrait stages extend the bed above and below the card with the photograph's own colours. */
.wa-sheet{position:absolute;inset:0;background:linear-gradient(180deg,#2a0603 0,#6d1708 24%,#a52d0d 42%,#e45a1f 62%,#ee6a2c 82%,#c8452a 100%)}
.wa .wa-card,.wa-peelables{position:absolute;left:calc(50% - var(--cshift));top:50%;margin:0;width:var(--cw);aspect-ratio:2155/1068;translate:-50% -50%}
.wa .wa-card{transform-origin:50% 50%;z-index:0}
.wa .wa-card img{width:100%;height:100%;display:block}
/* Same frame the script starts the camera from, so the title does not jump when it takes over; let go if it never does. */
@keyframes wa-cam-free{to{transform:none}}
@media(min-width:761px) and (min-aspect-ratio:155/100) and (min-height:521px){.wa-motion:not(.wa-ready) .wa .wa-card{transform:scale(1.12);animation:wa-cam-free .01s 2.6s forwards}}
.wa-open-ui{position:absolute;inset:0;z-index:2;pointer-events:none;display:flex;align-items:flex-end;gap:clamp(.9rem,3vw,3rem);padding:0 var(--case-gutter) 20px;color:#fff;text-shadow:0 1px 14px rgba(70,15,0,.45)}
.wa-open-ui a{pointer-events:auto}
.wa .wa-open-ui .case-topline,.wa .wa-open-ui .case-caption-line{display:contents}
.wa .wa-open-ui .case-topline>a{position:absolute;left:var(--case-gutter);top:84px;font-size:.875rem;line-height:1.5}
.wa .wa-open-ui .case-topline>span,.wa .wa-open-ui .case-caption-line>span{display:inline;font-size:.875rem;line-height:1.3;color:#fff;white-space:nowrap}
.wa .wa-open-ui .case-caption-line>span:first-child{order:0}
.wa .wa-open-ui .case-topline>span:nth-of-type(1){order:1}
.wa .wa-open-ui .case-topline>span:nth-of-type(2){order:2}
.wa .wa-open-ui .case-caption-line>span:last-child{order:3;margin-left:auto}
.wa-h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
.wa-peelables{z-index:3;pointer-events:none}

/* ---------- stickers ---------- */
.wa-sticker{display:block;position:relative;aspect-ratio:var(--ar);width:100%;line-height:0}
.wa-sticker>canvas{position:absolute;display:block;pointer-events:none}
.wa-sticker>svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 2px 2px rgba(0,0,0,.34))}
/* On the bed: placed in the card's own coordinates, so they stay clear of the title at any window shape. */
.wa-h{position:absolute}
.wa-h1s{width:11.5%;left:13.2%;top:16.5%;rotate:-9deg}
.wa-h2s{width:10%;left:78%;top:17%;rotate:8deg}
.wa-h3s{width:9.5%;left:12.9%;top:72%;rotate:6deg}
.wa-h4s{width:10.5%;left:79.75%;top:74.5%;rotate:-5deg}
.wa-h5s{width:12.5%;left:25%;top:33.5%;rotate:5deg}
.wa-h6s{width:14.5%;left:62.5%;top:34.5%;rotate:-6deg}
/* The first screen fades its stickers in once they are cut out; if the script or the art never arrive, CSS shows them anyway. */
@keyframes wa-show{to{opacity:1}}
.wa-motion .wa-h:not(.is-live){opacity:0;animation:wa-show .01s 2.6s forwards}
html.wa-artfail .wa-h:not(.is-live){opacity:1;animation:none}
.wa-ready .wa-late:not(.is-in){opacity:0;animation:none}
.wa-ready .wa-late:not(.is-in) .wa-hit,.wa-ready .wa-slot:not(.is-in) .wa-hit,.wa-ready .wa-late:not(.is-in) .wa-handle,.wa-ready .wa-slot:not(.is-in) .wa-handle,.wa-ready .wa-slot:not(.is-in) .wa-sticker{pointer-events:none}
.wa-gap{position:absolute!important;width:clamp(110px,24vw,470px);left:var(--case-gutter);top:clamp(9rem,29.5vw,36rem);rotate:-7deg;z-index:1}
/* The hint only exists once a sticker can really be peeled. */
.wa-hint{display:none;position:absolute;left:77.5%;top:30.5%;background:#fff;color:#3c3a37;border-radius:9px;padding:.32rem .62rem;font-size:.8125rem;line-height:1.2;box-shadow:0 1px 1px rgba(0,0,0,.25);rotate:-3deg}
html.wa-live .wa-hint{display:block}
.wa-hint.is-gone{opacity:0;transition:opacity .3s}

/* ---------- 02 intro: one chat to another ---------- */
.wa-intro{position:relative;background:var(--wa-chat);color:var(--wa-ink);padding:clamp(4.5rem,11vw,11rem) var(--case-gutter) clamp(3.5rem,8vw,8rem);overflow:clip}
.wa .wa-intro .case-heading{display:block;margin:0}
.wa .wa-intro .case-introduction{display:block;max-width:none;margin:0;padding:0}
.wa .wa-intro .case-category{color:var(--wa-rust);margin:0 0 clamp(1.5rem,3vw,3rem);font-size:.875rem}
.wa .wa-intro .case-introduction>p{font-size:clamp(1.25rem,2.3vw,2.25rem);line-height:1.28;letter-spacing:-.025em;max-width:none;color:var(--wa-ink)}
.wa-big{display:block;font:700 clamp(4.2rem,15.8vw,19rem)/.86 'DM Sans',Arial,sans-serif;letter-spacing:-.065em;color:var(--wa-ember);margin-bottom:clamp(2rem,5vw,5rem)}
:lang(en) .wa-big{font-size:clamp(3.2rem,13.3vw,16rem)}
:lang(en) .wa-gap{width:clamp(100px,18vw,360px)}
.wa-big-a,.wa-big-b{display:block;white-space:nowrap}
.wa-big-b{text-align:right}
.wa-motion .wa-big-a,.wa-motion .wa-big-b{will-change:transform}

/* ---------- 03 the chat ---------- */
.wa-chat{background:var(--wa-chat);color:var(--wa-ink);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,7rem);padding:0 var(--case-gutter) clamp(4rem,8vw,8rem);align-items:start}
.wa-phone-col{position:sticky;top:5vh;height:90vh;display:flex;align-items:center;justify-content:center}
.wa-phone{position:relative;width:min(100%,calc(90vh*470/740));aspect-ratio:470/740;overflow:hidden;border-radius:22px;background:#3a1f4f;box-shadow:0 30px 60px -30px rgba(50,10,0,.55)}
.wa-phone>img{position:absolute;width:297.87%;max-width:none;height:auto;left:-12.77%;top:-8.1%}
.wa-inphone{position:absolute;width:42.4%;left:22.7%;top:46.1%;rotate:3.5deg}
.wa-inphone>svg{filter:none}
.wa-thread{display:flex;flex-direction:column;gap:15vh;padding-block:16vh 8vh}
.wa-bubble{position:relative;background:#fff;border-radius:18px;padding:clamp(1rem,1.6vw,1.6rem) clamp(1.1rem,1.9vw,1.9rem) clamp(.7rem,1vw,1rem);box-shadow:0 1px 1px rgba(60,30,10,.18);max-width:min(100%,52rem);font:400 clamp(1.125rem,2vw,2.2rem)/1.28 'DM Sans',Arial,sans-serif;letter-spacing:-.012em}
.wa-bubble::after{content:'';position:absolute;bottom:0;width:20px;height:18px;background:inherit}
.wa-in{align-self:flex-start;border-bottom-left-radius:4px}
.wa-in::after{left:-12px;clip-path:path('M20 0V18H2C8 16 12 10 12 0Z')}
.wa-out{align-self:flex-end;background:var(--wa-green);border-bottom-right-radius:4px}
.wa-out::after{right:-12px;clip-path:path('M0 0V18H18C12 16 8 10 8 0Z')}
.wa .wa-bubble h2{font:700 1em/1.2 'DM Sans',Arial,sans-serif;letter-spacing:.005em;margin:0 0 .1em}
.wa .wa-bubble p{margin:0;color:inherit}
.wa-stamp{display:flex;justify-content:flex-end;align-items:center;gap:.35em;margin-top:.35em;font-size:.82rem;line-height:1;color:#515c53}
.wa-ticks{width:18px;height:11px}
.wa-quote{margin:0;padding-top:4vh;align-self:stretch}
.wa-quote-a{font:700 clamp(2.4rem,6.2vw,7rem)/.95 'DM Sans',Arial,sans-serif;letter-spacing:-.055em;color:var(--wa-ember);margin-bottom:.35em!important}
.wa-quote-b{font-size:clamp(1.125rem,1.75vw,1.75rem);line-height:1.3;letter-spacing:-.015em;max-width:30em}

/* reveal states exist only once the script that lifts them has run */
.wa-ready .wa-bubble{opacity:0;translate:0 26px;scale:.94;transform-origin:var(--o,0 100%);transition:opacity .28s,translate .5s cubic-bezier(.2,1.3,.4,1),scale .5s cubic-bezier(.2,1.3,.4,1)}
.wa-ready .wa-out{--o:100% 100%}
.wa-ready .wa-bubble.is-in{opacity:1;translate:0 0;scale:1}

/* ---------- 04 the pack: one screen that fills up, and one button that empties it ---------- */
.wa-pack{background:var(--wa-night);position:relative;padding:clamp(4rem,8vw,8rem) var(--case-gutter) clamp(2.5rem,4vw,4rem);overflow:clip}
.wa-desc{font-size:clamp(1.125rem,2vw,2rem);line-height:1.28;letter-spacing:-.022em;max-width:38em;color:var(--wa-cream);margin-bottom:clamp(2rem,4vw,4rem)!important}
.wa-pack-stage{position:relative}
.wa-pack-pin{position:relative}
/* Flow layout: short screens. Pinned composition below for everything else. */
.wa-giant{font:700 clamp(3.1rem,12.6vw,17rem)/.84 'DM Sans',Arial,sans-serif;letter-spacing:-.055em;color:var(--wa-ember);pointer-events:none;margin-bottom:2rem!important;transition:color .55s}
.wa-giant span{display:block;white-space:nowrap}
.wa-slots{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.2rem 1.2rem}
.wa-slot{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
.wa-slot-line{font:400 clamp(.6875rem,.86vw,.875rem)/1.3 'DM Sans',Arial,sans-serif;letter-spacing:.05em;color:#fff;margin-top:.75em!important;text-align:center;transition:opacity .4s}
.wa-time{align-self:flex-end;background:#fff;color:#4d4d4d;border-radius:7px;padding:.25rem .5rem;font-size:.75rem;line-height:1.1;margin-top:.45rem;box-shadow:0 1px 1px rgba(0,0,0,.3);transition:opacity .4s}
.s1{rotate:-3deg}.s2{rotate:4deg}.s3{rotate:-2deg}.s4{rotate:3deg}.s5{rotate:-4deg}.s6{rotate:5deg}
.wa-protect-row{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:flex-end;gap:.4rem 1.5rem;margin-top:2.5rem}
.wa-protect-line{font:700 clamp(2.6rem,7.3vw,10rem)/.84 'DM Sans',Arial,sans-serif;letter-spacing:-.05em;transition:opacity .35s,translate .55s cubic-bezier(.2,1.3,.4,1)}
.wa-protect-text,.wa-protect{all:unset;box-sizing:border-box;display:inline-block;position:relative;background:#fff;color:var(--wa-ink);border-radius:.13em .13em .13em .02em;padding:.13em .2em .17em .17em;font:inherit;letter-spacing:inherit;line-height:.92}
.wa-protect-text::after,.wa-protect::after{content:'';position:absolute;left:-.1em;bottom:0;width:.14em;height:.14em;background:inherit;clip-path:polygon(100% 0,100% 100%,0 100%)}
.wa-protect{cursor:pointer;transition:background-color .2s,scale .3s cubic-bezier(.2,1.5,.4,1)}
.wa-protect:hover{background:var(--wa-green);scale:1.012}
.wa-protect:active{scale:.985}
.wa-protect:focus-visible{outline:4px solid var(--wa-green);outline-offset:5px}
.wa-protect[aria-pressed=true]{background:var(--wa-green)}
.wa-protect-status{min-height:1.5em;padding-bottom:.35em;font-size:clamp(1rem,1.5vw,1.5rem);line-height:1.2;letter-spacing:-.015em;color:var(--wa-cream)}
.wa-pack-layer{position:absolute;inset:0;z-index:2;pointer-events:none}
/* the moment the protection is on: clean type, one sentence, one button */
.wa-protected .wa-slot-line,.wa-protected .wa-time{opacity:0}
.wa-sticker.is-off{visibility:hidden}
/* Hidden until their beat: only once the script that shows them has run. */
.wa-ready .wa-slot:not(.is-in)>*{opacity:0}
.wa-ready .wa-protect-line:not(.is-in){opacity:0;translate:0 34px}

@media(min-height:601px){
 .wa-pack-pin{height:100vh;height:100svh;min-height:600px;display:flex;flex-direction:column;padding-block:clamp(10px,2.4svh,24px) clamp(10px,2svh,20px)}
 .wa-giant{position:absolute;left:0;top:clamp(10px,2.4svh,24px);margin:0!important;font-size:min(12.6vw,calc(19.5svh));color:var(--wa-ember-dim)}
 .wa-giant.is-bright{color:var(--wa-ember)}
 .wa-slots{flex:1 1 auto;min-height:0;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:0 .8vw}
 .wa-slot{container-type:size;justify-content:center;width:100%;height:100%}
 .wa-slot>.wa-sticker,.wa-slot>.wa-slot-line,.wa-slot>.wa-time{--sw:min(92cqw,calc(66cqh*var(--ar)))}
 .wa-slot>.wa-sticker{width:var(--sw);flex:none}
 .wa-slot>.wa-slot-line{width:var(--sw)}
 .wa-slot>.wa-time{margin-right:calc((100cqw - var(--sw))/2)}
 .s1{translate:-1.5% 3%}.s2{translate:3% -7%}.s3{translate:1% 7%}.s4{translate:4% -4%}.s5{translate:-4% 4%}.s6{translate:2% -5%}
 .wa-protect-row{flex:none;margin-top:clamp(4px,1svh,12px)}
 .wa-protect-line{font-size:min(7.3vw,13svh)}
}
.wa-motion .wa-pack-stage{height:auto}
@media(min-height:601px){
 .wa-motion .wa-pack-stage{height:calc(100svh + 230vh)}
 .wa-motion .wa-pack-pin{position:sticky;top:0}
}

/* ---------- 05 aim, archive, facts, next ---------- */
.wa-aim{background:var(--wa-night);padding:clamp(3.5rem,8vw,8rem) var(--case-gutter) clamp(4rem,9vw,9rem);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.25rem,3vw,4rem);align-items:end}
.wa-aim-a{font:700 clamp(2.6rem,7vw,10rem)/.92 'DM Sans',Arial,sans-serif;letter-spacing:-.055em;color:var(--wa-ember)}
.wa-aim-b{font-size:clamp(1.0625rem,1.5vw,1.5rem);line-height:1.32;letter-spacing:-.015em;color:var(--wa-cream)}
/* The two campaign boards leave the storyline: an archival sheet, two prints left on the table. */
.wa-prints{position:relative;background:var(--wa-chat);padding:clamp(3rem,6vw,6.5rem) var(--case-gutter) clamp(3.5rem,8vw,8rem);display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.wa .wa-print{margin:0;position:relative;align-self:start;box-shadow:0 1px 2px rgba(60,30,10,.25),0 26px 46px -24px rgba(60,20,0,.5);background:#fff;padding:clamp(5px,.6vw,10px)}
.wa .wa-print img{display:block;width:100%;height:auto}
.wa .wa-print-2{grid-column:1/8;grid-row:1;rotate:-1.1deg;z-index:1;margin-right:7%}
.wa .wa-print-3{grid-column:7/13;grid-row:1;rotate:1.3deg;margin-top:clamp(3rem,10vw,11rem);z-index:2}
.wa .wa-print:hover,.wa .wa-print:focus-within{z-index:3}
.wa-motion .wa-print{will-change:transform}
.wa .original-story{display:none}
.wa .case-facts{background:var(--wa-ember);color:var(--wa-ink);width:auto;max-width:none;border:0;padding:clamp(2.5rem,5vw,5rem) var(--case-gutter);margin:0;--case-accent:var(--wa-ink);--case-line:rgba(23,18,15,.35)}
.wa .case-facts h2,.wa .case-facts p,.wa .case-facts .original-context{color:var(--wa-ink)}
.wa .case-facts p{font-size:clamp(1.125rem,1.7vw,1.75rem);line-height:1.25;letter-spacing:-.02em}
.wa .case-next-art{background:var(--wa-chat);color:var(--wa-ink);border:0}

/* ---------- interaction layers (created by JS) ---------- */
.wa-layer{position:absolute;left:0;top:0;width:100%;z-index:40;overflow:clip;pointer-events:none}
.wa-st{position:absolute;display:block;pointer-events:none;outline:0}
.wa-st canvas{position:absolute;display:block;pointer-events:none}
.wa-hit{position:absolute;inset:0;display:block;pointer-events:auto;cursor:grab;touch-action:pan-y;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
/* A bigger catch area for thumbs: vertical swipes that start on it still scroll the page. */
.wa-handle{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;pointer-events:none;touch-action:pan-y;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
@media(pointer:coarse){.wa-handle{pointer-events:auto}}
.wa-st:focus,.wa-sticker:focus{outline:0}
/* Dark inside, white outside: it holds on green outlines and on every background. */
.wa-st:focus-visible canvas,.wa-sticker:focus-visible canvas{filter:drop-shadow(2px 0 0 #17120f) drop-shadow(-2px 0 0 #17120f) drop-shadow(0 2px 0 #17120f) drop-shadow(0 -2px 0 #17120f) drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)}
.wa-sticker.is-live>svg{visibility:hidden}
.wa-sticker.is-ghost::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.17);clip-path:var(--cp)}
.wa-st.is-lifted canvas{visibility:hidden}
.wa-st.is-slap{animation:wa-slap .34s cubic-bezier(.3,1.4,.5,1) backwards}
@keyframes wa-slap{0%{scale:1.32;opacity:.0}30%{opacity:1}55%{scale:.97}100%{scale:1}}
.wa-slapin{animation:wa-slap .42s cubic-bezier(.3,1.4,.5,1) backwards}
.wa-peel-cv{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;z-index:60}
.wa-fall-cv{position:fixed;left:0;top:0;pointer-events:none;z-index:54}
body.wa-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
body.wa-dragging .wa-hit{cursor:grabbing}

/* forwarded chip: not in the tab order, nor on screen, while it has nothing to say */
.wa-chip{position:fixed;left:12px;right:12px;bottom:max(14px,env(safe-area-inset-bottom));width:fit-content;margin-inline:auto;translate:0 calc(100% + 24px);visibility:hidden;z-index:55;display:flex;align-items:center;gap:.7rem;background:#fff;color:#3b3a38;border-radius:14px;padding:.45rem .5rem .45rem .8rem;font:400 .875rem/1.2 'DM Sans',Arial,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.28);transition:translate .35s cubic-bezier(.2,1.2,.4,1),visibility 0s .35s}
.wa-chip.is-on{translate:0 0;visibility:visible;transition:translate .35s cubic-bezier(.2,1.2,.4,1),visibility 0s}
/* In the opening of a phone it sits above the caption line, which it would otherwise cover. */
@media(max-width:760px){.wa-chip.is-on.is-high{translate:0 -34px}}
.wa-chip svg{width:18px;height:13px;flex:none;color:#6f7a70}
.wa-chip b{font-weight:700;font-variant-numeric:tabular-nums}
.wa-chip-text{min-width:0}
.wa-chip button{all:unset;flex:none;cursor:pointer;background:var(--wa-ember);color:#fff;border-radius:9px;padding:.5rem .7rem;font-weight:700;min-height:20px;white-space:nowrap}
.wa-chip button:focus-visible{outline:3px solid #111;outline-offset:2px}

/* protection: a clear film rolled down the page, rolled rim first */
.wa-film{position:fixed;left:0;right:0;top:0;height:100vh;z-index:50;pointer-events:none;translate:0 calc(-100% - 60px);transition:translate 1.05s cubic-bezier(.45,.05,.3,1);background:linear-gradient(112deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 30%,rgba(255,255,255,.16) 46%,rgba(255,255,255,.02) 60%,rgba(255,255,255,.1));box-shadow:inset 0 0 70px rgba(255,255,255,.12)}
.wa-film::after{content:'';position:absolute;left:-2%;right:-2%;bottom:-40px;height:46px;border-radius:50%/100%;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.6) 34%,rgba(255,255,255,.14) 58%,rgba(255,255,255,.42) 80%,rgba(255,255,255,.06));box-shadow:0 10px 18px rgba(0,0,0,.2)}
.wa-film.is-on{translate:0 0}
html:not(.wa-motion) .wa-film{transition:none}

/* ---------- squarer screens: the bed's free pockets, the camera does not move ---------- */
@media(min-width:761px) and (max-aspect-ratio:155/100){
 .wa-h1s{width:13.5%;left:22%;top:31%}
 .wa-h2s{width:11.5%;left:62%;top:30.5%}
 .wa-h3s{width:8.5%;left:19.4%;top:86.7%;rotate:-3deg}
 .wa-h4s{width:9%;left:68.5%;top:86.6%;rotate:3deg}
 .wa-late{display:none}
 .wa-hint{left:62%;top:45%}
}
/* ---------- portrait stages: the whole title card fits the width, stickers take the bands around it ---------- */
@media(max-width:760px),(max-aspect-ratio:13/10){
 .wa-stage{--cw:152vw;--cshift:calc(var(--cw)*.0175)}
 .wa .wa-card{-webkit-mask-image:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent)}
 .wa-motion .wa .wa-open{height:150vh}
 .wa-peelables{left:0;top:0;width:100%;height:100%;aspect-ratio:auto;translate:none}
 .wa .wa-open-ui .case-topline>a{top:76px}
 .wa-h1s{width:min(45vw,270px);left:3%;top:max(112px,calc(50% - 74vw))}
 .wa-h2s{width:min(33vw,190px);left:auto;right:4%;top:max(120px,calc(50% - 70vw))}
 .wa-h3s{width:min(48vw,300px);left:4%;top:calc(50% + 40vw);rotate:6deg}
 .wa-h4s{width:min(38vw,250px);left:auto;right:4%;top:auto;bottom:58px;rotate:-5deg}
 .wa-late{display:none}
 .wa-hint{left:auto;right:8vw;top:calc(max(120px,calc(50% - 70vw)) + min(21vw,118px))}
}
/* ---------- phone ---------- */
@media(max-width:760px){
 /* Sized to the longest line of the ES headline: the last letter keeps its gutter at every phone width. */
 .wa-gap{width:33vw;top:calc(4.5rem + 2.4rem + 18.5vw)}
 .wa-big{font-size:19.5vw;margin-bottom:2rem}
 :lang(en) .wa-big{font-size:14.6vw}
 :lang(en) .wa-gap{width:18vw;top:calc(4.5rem + 2.4rem + 14.5vw)}
 .wa-chat{display:block;padding-bottom:0}
 .wa-phone-col{top:64px;height:62svh;z-index:0}
 .wa-thread{position:relative;z-index:1;gap:30svh;padding-block:30svh 0;margin-top:-20svh}
 .wa-bubble{font-size:1.0625rem;max-width:calc(100% - 10px)}
 .wa-quote{background:var(--wa-chat);margin:0 calc(var(--case-gutter)*-1);padding:2rem var(--case-gutter) 3rem;position:relative}
 .wa-aim{grid-template-columns:1fr}
 .wa .wa-print-2{grid-column:1/12;rotate:-1deg}
 .wa .wa-print-3{grid-column:2/13;grid-row:2;rotate:1.2deg;margin-top:-1.5vw}
 .wa-slot-line{font-size:.6875rem;letter-spacing:.02em}
 .wa-time{font-size:.75rem}
 .wa-chip{font-size:.8125rem;gap:.5rem}
 .wa .case-next-art{grid-template-columns:1fr}
}
/* tall phones have room for the two late arrivals in the bands */
@media(max-width:760px) and (min-height:721px){
 .wa-h5s{display:block;width:40vw;left:22%;top:calc(50% - 49vw);rotate:5deg}
 .wa-h6s{display:block;width:44vw;left:6%;top:auto;bottom:62px;rotate:-6deg}
}
@media(max-width:760px) and (min-height:601px){
 .wa-slots{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));margin-top:clamp(0px,4svh,40px)}
 .wa-slot>.wa-sticker,.wa-slot>.wa-slot-line,.wa-slot>.wa-time{--sw:min(99cqw,calc(52cqh*var(--ar)))}
 .s1{translate:-1% 2%}.s2{translate:1% 8%}.s3{translate:0 3%}.s4{translate:1% 7%}.s5{translate:0 2%}.s6{translate:3% 6%}
 .wa-giant{font-size:min(12.6vw,15svh)}
 .wa-protect-row{display:block}
 .wa-protect-line{font-size:min(12.4vw,8svh)}
 .wa-protect-text,.wa-protect{width:min-content}
 .wa-protect-status{font-size:.9375rem;padding:.4em 0 0;min-height:1.6em}
}
@media(max-width:760px) and (max-height:600px){
 .wa-slots{grid-template-columns:repeat(2,minmax(0,1fr))}
 .wa-protect-line{font-size:12.4vw}
}
/* Tablets upright: two columns as on the phone, so the stickers fill the screen instead of leaving its lower half empty. */
@media(min-width:761px) and (max-aspect-ratio:13/10) and (min-height:601px){
 .wa-slots{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));margin-top:clamp(0px,4svh,40px)}
 .wa-slot>.wa-sticker,.wa-slot>.wa-slot-line,.wa-slot>.wa-time{--sw:min(86cqw,calc(56cqh*var(--ar)))}
 .s1{translate:-1% 3%}.s2{translate:1% 9%}.s3{translate:0 3%}.s4{translate:1% 7%}.s5{translate:0 2%}.s6{translate:2% 6%}
}
/* The English headline leaves no room for a sticker anyone could read on a phone. */
@media(max-width:520px){:lang(en) .wa-gap{display:none}}
/* Very narrow phones: the chip takes two lines and the button keeps its whole label. */
@media(max-width:420px){.wa-chip{font-size:.75rem;line-height:1.2}}
/* The hint labels the Crabs sticker: it goes with it, so this rule has to outrank html.wa-live .wa-hint. */
@media(max-width:760px) and (max-height:720px){.wa-h1s,.wa-h2s,html.wa-live .wa-hint,.wa-late{display:none}}
@media(max-width:380px){.wa .wa-open-ui{gap:.7rem}.wa .wa-open-ui .case-topline>span,.wa .wa-open-ui .case-caption-line>span{font-size:.75rem}}

/* ---------- short, wide screens (a phone on its side): the opening stops pinning and gives the title its own bands ---------- */
@media(max-height:520px) and (min-aspect-ratio:13/10){
 .wa .wa-open,.wa-motion .wa .wa-open{height:auto}
 .wa-stage{--cw:100vw;--cshift:0px;position:relative;height:calc(100vw/2.0178 + 74px)}
 .wa .wa-card,.wa-peelables{top:30px;translate:-50% 0;left:50%;width:100vw;height:auto;aspect-ratio:2155/1068}
 .wa .wa-card{-webkit-mask-image:none;mask-image:none}
 .wa .wa-open-ui .case-topline>a{top:66px}
 .wa-h1s{width:13.5%;left:3%;top:30%;rotate:-9deg;right:auto}
 .wa-h2s{width:11%;left:86%;top:15%;rotate:8deg;right:auto}
 .wa-h3s{width:14%;left:3%;top:72%;rotate:6deg;right:auto}
 .wa-h4s{width:11.5%;left:85.5%;top:75%;rotate:-5deg;right:auto}
 .wa-late{display:none}
 .wa-hint{left:84.5%;top:33%;right:auto}
}

@media(prefers-reduced-motion:reduce){.wa-st.is-slap,.wa-slapin{animation:none}.wa-chip{transition:none}.wa-giant,.wa-slot-line,.wa-time,.wa-protect-line{transition:none}}
/* Two facts, two columns: no empty third column. */
@media(min-width:701px){.wa .case-facts{grid-template-columns:1fr 1fr}}