/*
 * Playful case-study template, shared by the Farmest, GSAA Global and Burn First
 * Aid case studies (custom/site-overrides/projects/<slug>/index.html). Each page
 * sets its own theme colours on :root (--c-primary, --c-soft, --c-cream,
 * --c-accent, --c-pop, --c-hot, and optionally --canvas/--paper/--ink for a dark
 * theme) and composes the section blocks below. Behaviour lives in playful.js.
 */
@font-face{font-family:"PP Neue Montreal Medium";src:url('/framerusercontent.com/assets/6uIfYl8bnz9kOy3KOuV7PxhFPhA.woff2') format('woff2');font-weight:500;font-display:swap}
:root{
  --canvas:#f6f2e9;--paper:#fffdf8;--ink:#17221c;--ink-2:#536059;--line:#17221c22;
  --purple:#8427de;--green:#039754;--yellow:#f4ac28;--orange:#f78d36;--sky:#008ff0;
  /* Project theme: defaults are Farmest's palette; pages override these. */
  --c-primary:#1b5aa4;--c-soft:#9adbea;--c-cream:#fff4dc;--c-accent:#f78d36;--c-pop:#ffd84d;--c-hot:#ff7a59;
  --ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --display:"PP Neue Montreal Medium",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font:18px/1.6 var(--display);letter-spacing:-.01em;overflow-x:hidden;
  background-image:radial-gradient(#17221c1a .8px,transparent .8px);background-size:24px 24px}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--purple);outline-offset:4px;border-radius:6px}
.mono{font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase}
.wrap{width:min(1240px,90vw);margin:auto}
h1,h2,h3{font-weight:500;margin:0;letter-spacing:-.05em}
h2{font-size:clamp(40px,6.4vw,92px);line-height:.98}
h2 em{font-family:Georgia,serif;font-weight:400;font-style:italic;letter-spacing:-.03em}
p{margin:0}

/* ---------- reveal on scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(40px) rotate(var(--r,0deg));transition:opacity .8s var(--ease),transform .9s var(--spring);transition-delay:calc(var(--d,0) * 90ms)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="pop"]{transform:scale(.6) rotate(-8deg)}
[data-reveal="left"]{transform:translateX(-60px)}
[data-reveal="right"]{transform:translateX(60px)}

/* ---------- progress makhana ---------- */
.progress{position:fixed;left:0;top:0;height:5px;width:100%;z-index:50;background:transparent}
.progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--c-primary),var(--c-accent),var(--c-pop))}
.chapters{position:fixed;right:22px;top:50%;translate:0 -50%;z-index:40;display:flex;flex-direction:column;gap:12px}
.chapters a{position:relative;width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);transition:transform .4s var(--spring),background .3s}
.chapters a span{position:absolute;right:24px;top:50%;translate:0 -50%;white-space:nowrap;padding:4px 10px;border-radius:999px;background:var(--ink);color:var(--paper);font:11px ui-monospace,monospace;opacity:0;scale:.8;transition:opacity .25s,scale .3s var(--spring);pointer-events:none}
.chapters a:hover span,.chapters a:focus-visible span{opacity:1;scale:1}
.chapters a.on{background:var(--c,var(--c-accent));transform:scale(1.45)}
@media(max-width:800px){.chapters{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:4vw;padding:110px 5vw 80px;overflow:hidden}
.hero .kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}
.hero .kicker b{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px #03975426;animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px #03975400}}
.wordmark{margin:34px 0 26px;width:min(620px,100%)}
.wordmark img{width:100%;filter:drop-shadow(0 10px 0 #17221c14)}
.wordmark.wobble{animation:wordIn 1.1s var(--spring) both}
@keyframes wordIn{0%{transform:translateY(60px) scale(.7) rotate(-6deg);opacity:0}60%{transform:translateY(-10px) scale(1.04) rotate(2deg);opacity:1}100%{transform:none}}
.hero h1{font-size:clamp(26px,2.6vw,38px);line-height:1.2;max-width:560px}
.hero h1 .word{display:inline-block;opacity:0;transform:translateY(.6em);animation:up .7s var(--spring) forwards;animation-delay:calc(.5s + var(--i) * 45ms)}
@keyframes up{to{opacity:1;transform:none}}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chip{padding:9px 16px;border-radius:999px;font-size:14px;background:var(--paper);border:1.5px solid var(--ink);transition:transform .35s var(--spring),background .25s}
.chip:hover{transform:translateY(-4px) rotate(-3deg);background:var(--c-pop)}
/* "The making of" deck: process cards fanned on the canvas. The top card wears a
   design-tool selection frame; clicking sends it to the back of the stack. */
.deck{position:relative;justify-self:center;width:min(100%,480px);aspect-ratio:4/5;max-height:76svh;cursor:pointer;user-select:none}
.card{position:absolute;left:12%;top:6%;width:76%;height:82%;margin:0;padding:12px 12px 0;background:var(--paper);border-radius:8px;
  box-shadow:0 1px 2px #17221c1a,0 18px 40px #17221c22;display:flex;flex-direction:column;
  transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg)) scale(var(--s,1));z-index:var(--z,1);
  transition:transform .75s var(--spring),box-shadow .4s}
.card img{flex:1;min-height:0;width:100%;object-fit:contain;background:var(--tint);border-radius:4px;padding:6%}
.card figcaption{display:flex;align-items:center;gap:10px;padding:12px 4px 14px;font-size:15px;letter-spacing:-.02em}
.card figcaption b{font:11px ui-monospace,monospace;padding:3px 7px;border-radius:999px;background:var(--ink);color:var(--paper)}
.tape{position:absolute;left:50%;top:-12px;width:84px;height:24px;translate:-50% 0;rotate:-3deg;background:#fff4dccc;
  box-shadow:0 1px 2px #17221c1f;clip-path:polygon(0 8%,6% 0,12% 10%,18% 0,24% 8%,30% 0,36% 10%,42% 0,48% 8%,54% 0,60% 10%,66% 0,72% 8%,78% 0,84% 10%,90% 0,96% 8%,100% 0,100% 92%,94% 100%,88% 90%,82% 100%,76% 92%,70% 100%,64% 90%,58% 100%,52% 92%,46% 100%,40% 90%,34% 100%,28% 92%,22% 100%,16% 90%,10% 100%,4% 92%,0 100%)}
.card.flying{transition:transform .38s cubic-bezier(.55,0,.8,.4)}
.select{position:absolute;left:12%;top:6%;width:76%;height:82%;pointer-events:none;z-index:20;border:2px solid var(--purple);border-radius:10px;
  transform:rotate(var(--sr,-2deg));transition:transform .75s var(--spring),opacity .25s}
.deck.shuffling .select{opacity:0}
.select i{position:absolute;width:12px;height:12px;background:#fff;border:2px solid var(--purple);border-radius:3px}
.select i:nth-child(1){left:-7px;top:-7px}.select i:nth-child(2){right:-7px;top:-7px}.select i:nth-child(3){left:-7px;bottom:-7px}.select i:nth-child(4){right:-7px;bottom:-7px}
.select span{position:absolute;left:-2px;top:-30px;padding:3px 9px;border-radius:5px 5px 5px 0;background:var(--purple);color:#fff;font:12px ui-monospace,monospace;white-space:nowrap}
.deck-next{position:absolute;left:50%;bottom:-2%;translate:-50% 0;z-index:21;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:0;
  background:var(--ink);color:var(--paper);font:13px ui-monospace,monospace;cursor:pointer;transition:transform .35s var(--spring),background .3s}
.deck-next:hover{transform:translateY(-3px);background:var(--purple)}
.deck-next span{display:inline-block;transition:transform .5s var(--spring)}.deck-next:hover span{transform:rotate(180deg)}
@media(max-width:860px){.deck{width:min(100%,380px)}}
.cursor{position:absolute;z-index:22;pointer-events:none;display:flex;align-items:flex-start;gap:2px;transition:transform 1.6s var(--ease)}
.cursor svg{width:20px;height:20px}
.cursor span{margin-top:14px;padding:4px 10px;border-radius:999px;color:#fff;font-size:12px;white-space:nowrap}
.pop{position:fixed;z-index:60;width:var(--s);height:var(--s);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#fff 0 18%,#f5ead2 40%,#e3cfa5 75%,#c9ad78);box-shadow:inset -2px -3px 0 #0000001a}
@media(max-width:860px){.hero{grid-template-columns:1fr;padding-top:90px}}


/* Sticker peel on the hero wordmark (after React Bits' Sticker Peel). The
   corner nearest the pointer folds back along a 45° crease that follows it;
   the flap is the sticker's paper back, masked to the wordmark's shape. */
.peel{position:relative;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.peel.dragging{cursor:grabbing}
.peel-front{position:relative;filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 12px 14px #17221c2e)}
.peel-front img{width:100%;pointer-events:none}
.peel-gloss{position:absolute;inset:0;pointer-events:none;-webkit-mask:var(--peel-src) center/100% 100% no-repeat;mask:var(--peel-src) center/100% 100% no-repeat;
  background:linear-gradient(115deg,transparent 35%,#ffffff8c 47%,transparent 58%) -150% 0/250% 100% no-repeat;transition:background-position 1s var(--ease)}
.peel:hover .peel-gloss{background-position:120% 0}
.peel-flap-wrap{position:absolute;inset:0;pointer-events:none;filter:drop-shadow(-4px 6px 6px #17221c40)}
.peel-flap{position:absolute;left:0;top:0;opacity:0;transform-origin:0 0;-webkit-mask:var(--peel-src) 0 0/100% 100% no-repeat;mask:var(--peel-src) 0 0/100% 100% no-repeat;
  background:linear-gradient(135deg,#ffffff,#ece6da 70%,#d8d0c0)}

/* ---------- wavy divider like the box borders ---------- */
.wave{display:block;width:100%;height:40px}
.marquee{background:var(--c-primary);color:var(--c-cream);overflow:hidden;white-space:nowrap;padding:18px 0;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.03em}
.marquee div{display:inline-flex;gap:40px;padding-right:40px;animation:marq 26s linear infinite}
.marquee span::after{content:"✺";margin-left:40px;color:var(--c-pop)}
@keyframes marq{to{transform:translateX(-100%)}}

/* ---------- sections ---------- */
section.chapter{padding:140px 0;position:relative}
.label{display:inline-flex;align-items:center;gap:10px;margin-bottom:24px}
.label i{font-style:normal;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--c);color:#fff;font:12px ui-monospace,monospace}
.lede{max-width:640px;font-size:21px;color:var(--ink-2);margin-top:26px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr}section.chapter{padding:90px 0}}

/* facts as stamps */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:70px}
.stamp{position:relative;padding:26px 22px;background:var(--paper);min-height:170px;display:flex;flex-direction:column;justify-content:space-between;
  /* Perforated edges: a hole pattern, plus a solid inner layer so only the rim is punched. */
  -webkit-mask:radial-gradient(circle 6px at 7px 7px,#0000 98%,#000) -7px -7px/14px 14px round,linear-gradient(#000 0 0) 7px 7px/calc(100% - 14px) calc(100% - 14px) no-repeat;
  mask:radial-gradient(circle 6px at 7px 7px,#0000 98%,#000) -7px -7px/14px 14px round,linear-gradient(#000 0 0) 7px 7px/calc(100% - 14px) calc(100% - 14px) no-repeat;
  transition:transform .45s var(--spring)}
.stamp:hover{transform:rotate(var(--hr,-3deg)) scale(1.04)}
.stamp strong{font-size:24px;line-height:1.15;letter-spacing:-.03em}
.stamp:nth-child(1){background:var(--c-pop)}.stamp:nth-child(2){background:var(--c-soft);--hr:3deg}.stamp:nth-child(3){background:var(--c-cream)}.stamp:nth-child(4){background:#ffc9a8;--hr:2deg}
@media(max-width:860px){.facts{grid-template-columns:1fr 1fr}}

/* before / after */
.compare{position:relative;aspect-ratio:1/1;border-radius:28px;overflow:hidden;background:var(--paper);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink);touch-action:pan-y;user-select:none}
.compare figure{position:absolute;inset:0;margin:0;display:grid;place-items:center}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:12% 8% 6%;pointer-events:none}
.compare .after{background:var(--c-soft);clip-path:inset(0 0 0 var(--x,50%))}
.compare .before{background:#efe9dc}
.compare .tag{position:absolute;top:16px;padding:6px 12px;border-radius:999px;background:var(--ink);color:var(--paper);font:12px ui-monospace,monospace}
.compare .before .tag{left:16px}.compare .after .tag{right:16px;background:var(--c-primary)}
.handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:4px;margin-left:-2px;background:var(--ink);cursor:ew-resize}
.handle button{position:absolute;top:50%;left:50%;translate:-50% -50%;width:56px;height:56px;border-radius:50%;border:2px solid var(--ink);background:var(--c-pop);font-size:20px;cursor:ew-resize;transition:scale .3s var(--spring)}
.handle button:hover{scale:1.12}

/* identity toggle */
.logo-flip{position:relative;aspect-ratio:16/10;border-radius:28px;background:var(--paper);border:2px solid var(--ink);overflow:hidden}
.logo-flip figure{position:absolute;inset:0;margin:0;display:grid;place-items:center;padding:8%;transition:transform .8s var(--spring),opacity .5s}
.logo-flip img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain}
.logo-flip .final{background:var(--c-primary)}
.logo-flip:not([data-state="final"]) .final{transform:translateY(100%) rotate(6deg);opacity:0}
.logo-flip[data-state="final"] .early{transform:translateY(-60%) scale(.8) rotate(-6deg);opacity:0}
.toggle{display:inline-flex;margin-top:22px;padding:5px;border-radius:999px;background:var(--paper);border:1.5px solid var(--ink);position:relative}
.toggle button{position:relative;z-index:1;border:0;background:none;padding:10px 18px;font:inherit;font-size:15px;cursor:pointer;border-radius:999px;transition:color .3s}
.toggle .knob{position:absolute;top:5px;bottom:5px;left:5px;border-radius:999px;background:var(--ink);transition:transform .5s var(--spring),width .5s var(--spring)}
.toggle button[aria-pressed="true"]{color:var(--paper)}
.zoom{margin-top:60px;border-radius:24px;overflow:hidden;border:2px solid var(--ink);cursor:zoom-in;position:relative}
.zoom img{transition:transform .6s var(--ease);transform-origin:var(--zx,50%) var(--zy,50%)}
.zoom:hover img{transform:scale(1.8)}
.zoom figcaption{position:absolute;left:16px;bottom:16px;background:var(--paper);padding:6px 12px;border-radius:999px}
.notes{display:grid;gap:14px;margin-top:30px}
.note{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:var(--paper);border-radius:16px;border:1px solid var(--line);transition:transform .4s var(--spring)}
.note:hover{transform:translateX(8px)}
.note b{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:15px}

/* screen vs print */
.print{position:relative;border-radius:28px;overflow:hidden;border:2px solid var(--ink);background:#fff}
.print img{width:100%;transition:filter .9s var(--ease),transform .9s var(--ease)}
.print[data-state="print"] img{filter:saturate(1.9) brightness(1.08) contrast(1.05)}
.print .badge{position:absolute;top:16px;left:16px;padding:6px 12px;border-radius:999px;background:var(--ink);color:#fff;font:12px ui-monospace,monospace;transition:background .4s}
.print[data-state="print"] .badge{background:var(--c-hot)}
.glare{position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,#fff9 0,transparent 45%);opacity:0;transition:opacity .9s}
.print[data-state="print"] .glare{opacity:1}
.stat{margin-top:44px;padding-top:28px;border-top:1.5px solid var(--line)}.stat p{font-size:20px;margin-top:10px}.stat .small{font-size:14px;margin-top:2px}
.stat b{display:block;font-size:clamp(64px,8vw,110px);letter-spacing:-.06em;line-height:.9;color:var(--c-primary)}
.voices{margin-top:110px}
.voices-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.voices-head h3{font-size:clamp(26px,3vw,40px);letter-spacing:-.04em}
.quotes{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:22px;align-items:stretch}
.quote{position:relative;margin:0;padding:34px 30px 30px;min-height:210px;border-radius:28px;background:var(--bg);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;transform:rotate(var(--r));transition:transform .5s var(--spring)}
.quote.in{transform:rotate(var(--r))}
.quote:hover{transform:rotate(0) translateY(-8px) scale(1.03)}
.quote::after{content:"";position:absolute;left:38px;bottom:-14px;width:30px;height:30px;background:inherit;transform:rotate(45deg);border-radius:4px}
.quote span{position:absolute;top:6px;left:24px;font:110px/1 Georgia,serif;opacity:.35}
.quote blockquote{margin:0;font-size:clamp(28px,3vw,42px);line-height:1.05;letter-spacing:-.045em}
.print-note{display:flex;gap:18px;align-items:center;margin-top:60px;padding:22px 26px;border-radius:20px;background:var(--paper);border:1.5px solid var(--ink);max-width:820px}
.print-note svg{flex:none;width:52px;height:52px}
.print-note p{font-size:18px}
@media(max-width:860px){.quotes{grid-template-columns:1fr}.quote{min-height:150px}}
/* final packaging */
.final-wrap{background:var(--c-primary);color:var(--c-cream);border-radius:40px;padding:110px 0;margin:0 3vw;position:relative;overflow:hidden}
.final-wrap h2 em{color:var(--c-pop)}
.final-wrap .lede{color:#fff4dccc}
.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.swatch{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 10px 18px;border-radius:22px;border:0;background:var(--paper);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:transform .45s var(--spring),box-shadow .3s}
.swatch i{display:block;width:100%;height:110px;border-radius:14px;margin-bottom:10px;box-shadow:inset 0 0 0 1.5px #17221c1f;transition:height .45s var(--spring)}
.swatch b{font-weight:500;font-size:22px;letter-spacing:-.03em;padding:0 8px}
.swatch span{font-size:14px;color:var(--ink-2);padding:0 8px}
.swatch:hover{transform:translateY(-8px) rotate(-1.5deg)}
.swatch:hover i{height:122px}
.swatch.on{box-shadow:0 0 0 3px var(--c-pop)}
@media(max-width:700px){.palette{grid-template-columns:1fr 1fr}}
.final-art{margin-top:60px;border-radius:24px;overflow:hidden;background:var(--paper);transform:perspective(1200px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .3s var(--ease)}
.sub{font-size:clamp(26px,3vw,40px);letter-spacing:-.04em;margin-top:100px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.step{background:var(--c-cream);color:var(--ink);border-radius:22px;padding:24px;min-height:210px;display:flex;flex-direction:column;justify-content:space-between}
.step .ico{width:132px;height:132px;margin:-10px 0 0 -12px;overflow:visible;transform:scale(0) rotate(-20deg)}
.step{min-height:270px;transition:transform .45s var(--spring)}
.step:hover{transform:translateY(-6px) rotate(-1deg)}
.step:nth-child(1){background:#ffe3b3}.step:nth-child(2){background:#ffd4c4}.step:nth-child(3){background:#cdeefb}.step:nth-child(4){background:#fff1a8}
.step.in .ico{animation:iconIn .9s var(--spring) forwards;animation-delay:calc(var(--d) * 120ms + .25s)}
@keyframes iconIn{to{transform:none}}
.step:hover .ico{transform:rotate(-6deg) scale(1.08);transition:transform .4s var(--spring)}
/* Small loops inside each drawing. */
.ico *{transform-box:fill-box;transform-origin:50% 100%}
.flame{animation:flick .5s ease-in-out infinite alternate}
@keyframes flick{to{transform:scaleY(.82) scaleX(1.05)}}
.ico-roast .hop circle{animation:hop 1.1s var(--spring) infinite;animation-delay:calc(var(--n,0) * .15s)}
.ico-roast .hop circle:nth-child(2){--n:1}.ico-roast .hop circle:nth-child(3){--n:2}
@keyframes hop{0%,60%,100%{transform:none}30%{transform:translateY(-8px)}}
.steam{animation:steam 2s ease-in-out infinite;opacity:.6}
@keyframes steam{50%{transform:translateY(-5px);opacity:.15}}
.sachet{transform-origin:70% 30%;animation:shake 1.4s ease-in-out infinite}
@keyframes shake{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(-24deg)}}
.sprinkle circle{animation:fall 1.4s linear infinite;animation-delay:calc(var(--n,0) * -.28s)}
.sprinkle circle:nth-child(2){--n:1}.sprinkle circle:nth-child(3){--n:2}.sprinkle circle:nth-child(4){--n:3}.sprinkle circle:nth-child(5){--n:4}
@keyframes fall{0%{transform:translateY(-14px);opacity:0}20%{opacity:1}100%{transform:translateY(16px);opacity:0}}
.pop1,.pop2,.pop3{animation:toss 1.3s cubic-bezier(.3,0,.5,1) infinite}
.pop2{animation-delay:.18s}.pop3{animation-delay:.36s}
@keyframes toss{0%,100%{transform:translateY(14px) rotate(0)}45%{transform:translateY(-12px) rotate(180deg)}}
.face{transform-origin:50% 50%;animation:nod 2.4s ease-in-out infinite}
@keyframes nod{50%{transform:rotate(6deg) scale(1.03)}}
.spark{transform-origin:50% 50%;animation:twinkle 1.6s ease-in-out infinite}
.s2{animation-delay:.5s}.s3{animation-delay:1s}
@keyframes twinkle{0%,100%{transform:scale(.4) rotate(0);opacity:.3}50%{transform:scale(1.15) rotate(45deg);opacity:1}}
.step h3{font-size:28px}.step .small{font-size:16px}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
.sachets{margin-top:40px;border-radius:24px;overflow:hidden}

/* website */
.browser{border-radius:18px;overflow:hidden;border:2px solid var(--ink);background:var(--paper);box-shadow:12px 12px 0 var(--c-accent);transition:transform .5s var(--spring),box-shadow .5s var(--spring)}
.browser:hover{transform:translate(-6px,-6px);box-shadow:18px 18px 0 var(--c-accent)}
.browser .bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:2px solid var(--ink)}
.browser .bar i{width:12px;height:12px;border-radius:50%}
.browser .bar span{margin-left:10px;padding:4px 14px;border-radius:999px;background:var(--canvas);font:12px ui-monospace,monospace}
.browser img{aspect-ratio:16/10;object-fit:cover;width:100%}
.btn{display:inline-flex;align-items:center;gap:10px;margin-top:30px;padding:16px 26px;border-radius:999px;background:var(--ink);color:var(--paper);text-decoration:none;font-size:16px;transition:transform .4s var(--spring),background .3s}
.btn:hover{transform:translateY(-4px) rotate(-2deg);background:var(--purple)}
.btn span{transition:transform .3s var(--ease)}.btn:hover span{transform:translate(3px,-3px)}

/* outro */
.outro{text-align:center;padding:160px 0 200px}
.outro h2{max-width:900px;margin:auto}
.take{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:60px auto 0;max-width:900px;text-align:left}
.take div{padding:28px;border-radius:24px;background:var(--paper);border:1.5px solid var(--ink)}
.take div:nth-child(2){background:var(--c-pop)}
@media(max-width:700px){.take{grid-template-columns:1fr}}
.next{display:inline-flex;align-items:center;gap:16px;margin-top:70px;padding:14px 14px 14px 26px;border-radius:999px;background:var(--paper);border:1.5px solid var(--ink);text-decoration:none;font-size:20px;transition:transform .4s var(--spring)}
.next b{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;transition:transform .4s var(--spring)}
.next:hover{transform:scale(1.04)}.next:hover b{transform:rotate(-45deg)}
.small{font-size:13px;color:var(--ink-2)}
.final-wrap .small{color:#fff4dcaa}.final-wrap.light .small,.final-wrap.light .lede{color:var(--ink-2)}.final-wrap .step .small{color:var(--ink-2)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}
  [data-reveal]{opacity:1;transform:none}
  .marquee div{animation:none}
}

/* ======================================================================
   Extra blocks (GSAA Global, Burn First Aid). All take the page theme.
   ====================================================================== */

/* Dark theme: pages set --canvas/--paper/--ink to dark values and add this
   class so the dotted grid and shadows read on black. */
/* The site-wide quiet-canvas.css forces a cream body with !important; win it back. */
html body.theme-dark{background:var(--canvas) radial-gradient(#ffffff14 .8px,transparent .8px) 0 0/24px 24px!important;color:var(--ink)}
body.theme-dark .card,body.theme-dark .stamp,body.theme-dark .note{box-shadow:0 18px 40px #0008}

/* Wordmark set in type, for projects without a logo file. */
.type-mark{display:inline-block;margin:34px 0 26px;font-size:clamp(64px,8.6vw,124px);line-height:.9;letter-spacing:-.065em;animation:wordIn 1.1s var(--spring) both}
.type-mark em{font-family:Georgia,serif;font-weight:400;font-style:italic;letter-spacing:-.04em;color:var(--c-accent)}

/* Requirement cards with a looping icon. */
.reqs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:60px}
.req{position:relative;padding:28px;border-radius:26px;background:var(--paper);border:1.5px solid var(--ink);min-height:250px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .45s var(--spring),box-shadow .45s var(--spring)}
.req:hover{transform:translate(-4px,-6px);box-shadow:8px 10px 0 var(--c-primary)}
.req svg{width:76px;height:76px;overflow:visible}
.req h3{font-size:26px;margin-top:20px}
.req p{color:var(--ink-2);margin-top:8px;font-size:16px}
@media(max-width:860px){.reqs{grid-template-columns:1fr}}

/* Interactive demo tiles. */
.demos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:50px}
.demo{position:relative;border-radius:24px;padding:22px;min-height:280px;display:flex;flex-direction:column;justify-content:space-between;background:var(--paper);border:1px solid var(--line);overflow:hidden;transition:transform .45s var(--spring)}
.demo:hover{transform:translateY(-6px) rotate(-1deg)}
.demo h3{font-size:22px}
.demo p{font-size:14px;color:var(--ink-2);margin-top:4px}
.demo .stagebox{flex:1;display:grid;place-items:center;margin:14px 0}
.demo button{font:inherit;cursor:pointer;border:0}
.pill-btn{padding:10px 16px;border-radius:999px;background:var(--c-accent);color:var(--ink-inverse,#111);font-size:14px;transition:transform .3s var(--spring)}
.pill-btn:hover{transform:scale(1.06)}
/* media */
.eq{display:flex;gap:5px;align-items:flex-end;height:64px}
.eq i{width:9px;border-radius:5px;background:var(--c-primary);height:20%;transition:height .3s}
.demo.on .eq i{animation:eq .9s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:-.2s}.eq i:nth-child(3){animation-delay:-.5s}.eq i:nth-child(4){animation-delay:-.1s}.eq i:nth-child(5){animation-delay:-.7s}.eq i:nth-child(6){animation-delay:-.35s}
@keyframes eq{from{height:15%}to{height:100%}}
/* tap game */
.tapper{width:96px;height:96px;border-radius:50%;background:var(--c-hot)!important;color:#fff;font-size:30px!important;box-shadow:0 8px 0 #0004;transition:transform .2s}
.tapper:active{transform:translateY(5px);box-shadow:0 3px 0 #0004}
.score{font:12px ui-monospace,monospace;margin-top:10px;text-align:center}
.score b{font-size:22px;display:block;font-family:var(--display);letter-spacing:-.03em}
/* shopping */
.cart{position:relative;width:76px;height:76px}
.cart svg{width:100%;height:100%}
.cart span{position:absolute;right:-6px;top:-6px;min-width:26px;height:26px;padding:0 6px;border-radius:13px;background:var(--c-hot);color:#fff;font:600 13px/26px var(--display);text-align:center;transition:transform .4s var(--spring)}
.demo.on .cart span{animation:bump .45s var(--spring)}
@keyframes bump{50%{transform:scale(1.5)}}
/* travel */
.route{width:100%;height:90px;overflow:visible}
.route path{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-dasharray:5 6}
.route-box{position:relative;width:200px;height:90px}
.route-box .plane{position:absolute;left:0;top:0;width:26px;height:26px;offset-path:path("M10 70 C 60 -10, 140 -10, 190 60");offset-rotate:auto;offset-distance:0%;transition:offset-distance 1.6s var(--ease)}
.route-box .plane svg{width:100%;height:100%;display:block}
.demo:hover .plane,.demo.on .plane{offset-distance:100%}
@media(max-width:1000px){.demos{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.demos{grid-template-columns:1fr}}

/* Process flow: numbered steps on a line that draws in. */
.flow{position:relative;display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:16px;margin-top:60px}
.flow::before{content:"";position:absolute;left:4%;right:4%;top:31px;height:3px;background:repeating-linear-gradient(90deg,var(--ink) 0 10px,transparent 10px 18px);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.6s var(--ease)}
.flow.in::before{transform:none}
.flow-step{position:relative;text-align:left}
.flow-step b{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--c);color:#fff;font-size:22px;border:3px solid var(--canvas);box-shadow:0 0 0 2px var(--ink);transition:transform .45s var(--spring)}
.flow-step:hover b{transform:scale(1.12) rotate(-8deg)}
.flow-step h3{font-size:22px;margin-top:18px}
.flow-step p{font-size:15px;color:var(--ink-2);margin-top:6px}
@media(max-width:860px){.flow{grid-template-columns:1fr 1fr;row-gap:36px}.flow::before{display:none}}

/* Browser frame whose long screenshot scrolls on hover. */
.scroller{position:relative;border-radius:18px;overflow:hidden;border:2px solid var(--ink);background:var(--paper);box-shadow:12px 12px 0 var(--c-accent)}
.scroller .bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:2px solid var(--ink)}
.scroller .bar i{width:12px;height:12px;border-radius:50%}
.scroller .bar span{margin-left:10px;padding:4px 14px;border-radius:999px;background:var(--canvas);font:12px ui-monospace,monospace}
.scroll-view{height:var(--h,460px);overflow:hidden;cursor:ns-resize}
.scroll-view img{width:100%;transform:translateY(0);transition:transform 1.2s var(--ease)}
.scroll-view:hover img,.scroll-view:focus-visible img{transform:translateY(var(--dist,0));transition:transform var(--dur,6s) linear}
.scroll-hint{position:absolute;right:16px;bottom:16px;padding:6px 12px;border-radius:999px;background:var(--ink);color:var(--paper);font:12px ui-monospace,monospace;pointer-events:none;transition:opacity .3s}
.scroller:hover .scroll-hint{opacity:0}

/* Phone frame. */
.phone{position:relative;width:var(--w,260px);aspect-ratio:9/19.5;border-radius:42px;background:#111;padding:10px;box-shadow:0 30px 60px #17221c33,inset 0 0 0 2px #333;flex:none}
.phone::before{content:"";position:absolute;left:50%;top:16px;width:30%;height:22px;translate:-50% 0;border-radius:12px;background:#000;z-index:2}
.phone .screen{position:relative;width:100%;height:100%;border-radius:32px;overflow:hidden;background:#fff}
.phone .screen img,.phone .screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone[data-cycle] .screen img{opacity:0;transform:scale(1.04);transition:opacity .7s,transform 1.2s var(--ease)}
.phone[data-cycle] .screen img.on{opacity:1;transform:none}
.phone .sos{position:absolute;z-index:3;right:16px;bottom:22px;width:56px;height:56px;border-radius:50%;background:#e8352a;display:grid;place-items:center;box-shadow:0 0 0 0 #e8352a80;animation:sos 1.8s infinite}
.phone .sos svg{width:26px;height:26px}
@keyframes sos{70%{box-shadow:0 0 0 18px #e8352a00}100%{box-shadow:0 0 0 0 #e8352a00}}
.strip{display:flex;gap:28px;overflow-x:auto;padding:40px 5vw 50px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.strip .phone{scroll-snap-align:center;transform:rotate(var(--r,0deg));transition:transform .5s var(--spring)}
.strip .phone:hover{transform:translateY(-12px) rotate(0) scale(1.03)}

/* Two-way illustration toggled by a [data-toggle] (e.g. bright vs restrained). */
.duo{position:relative;border-radius:28px;border:2px solid var(--ink);overflow:hidden;min-height:420px;background:var(--paper)}
.duo>*{position:absolute;inset:0;transition:opacity .6s var(--ease),transform .8s var(--spring)}
.duo>[data-when]{opacity:0;transform:scale(.96)}
.duo[data-state="a"]>[data-when="a"],.duo[data-state="b"]>[data-when="b"]{opacity:1;transform:none}

/* Big outcome card. */
.outcome{position:relative;margin-top:60px;padding:clamp(30px,5vw,60px);border-radius:36px;background:var(--c-primary);color:#fff;overflow:hidden}
.outcome blockquote{margin:0;font-size:clamp(28px,3.6vw,52px);line-height:1.08;letter-spacing:-.045em;max-width:900px}
.outcome p{margin-top:24px;opacity:.8}
.outcome .burst{position:absolute;right:-60px;top:-60px;width:260px;height:260px;animation:spin 18s linear infinite;opacity:.25}
@keyframes spin{to{transform:rotate(360deg)}}

/* Scroll-through phone (data-pin): the section pins while a long screen scrolls
   inside the phone and one caption changes with it. */
.pin{position:relative;height:300vh}
.pin-stage{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center;width:min(1240px,90vw);margin:auto}
.pin .phone{--w:300px}
.pin .screen img{object-fit:cover;object-position:top;height:auto!important;min-height:100%;transition:none}
.caps{position:relative;min-height:220px}
/* The outgoing caption leaves fast; the next arrives just after, so they never overlap. */
.cap{position:absolute;inset:0;opacity:0;transform:translateY(-16px);transition:opacity .18s ease-in,transform .25s ease-in}
.cap.on{opacity:1;transform:none;transition:opacity .45s var(--ease) .2s,transform .6s var(--spring) .2s}
.cap b{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--c-hot);color:#fff;font:12px ui-monospace,monospace;margin-bottom:16px}
.cap h3{font-size:clamp(30px,3.6vw,48px);letter-spacing:-.045em}
.cap p{font-size:19px;color:var(--ink-2);margin-top:12px;max-width:440px}
.pin-dots{display:flex;gap:8px;margin-top:30px}
.pin-dots i{width:34px;height:5px;border-radius:3px;background:var(--line);overflow:hidden;position:relative}
.pin-dots i::after{content:"";position:absolute;inset:0;background:var(--c-hot);transform:scaleX(var(--f,0));transform-origin:0 50%}

@media(max-width:900px){.pin-stage{grid-template-columns:1fr;align-content:center;gap:24px}.pin .phone{--w:220px}.caps{min-height:170px}}