/* ===========================================================
   Sandeep Singh — Motion Design
   Paper canvas · scattered stickers · hand-drawn marks
   =========================================================== */

:root{
  --paper:#FBF9F4;
  --sand:#F0EBE0;
  --sky:#DAE8FF;
  --lime:#D8FB4F;
  --ink:#151411;
  --ink-2:#6E6A61;
  --line:rgba(21,20,17,.12);
  --sh:0 14px 34px -14px rgba(60,48,24,.22), 0 2px 6px rgba(60,48,24,.07);
  --sh-lift:0 28px 54px -18px rgba(60,48,24,.3), 0 4px 10px rgba(60,48,24,.08);
  --pad:clamp(18px,4vw,64px);
  --maxw:1680px;
  --ease:cubic-bezier(.22,1,.36,1);
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; }
html:not(.has-lenis){ scroll-behavior:smooth; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.is-loading{ overflow:hidden; height:100vh; }
body.is-locked{ overflow:hidden; }

img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,figure{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--lime); color:var(--ink); }

.sprites{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{ width:100%; height:auto; color:inherit; }
.ico--ink{ color:var(--ink); }
.ico--sm{ width:auto; height:24px; }
.ico--xs{ width:11px; flex:none; }

/* ---------- shared bits ---------- */
.eyebrow{
  display:inline-block; font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-2);
}
.pill{
  display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:500;
  border:1px solid var(--line); border-radius:999px; padding:8px 16px; background:rgba(255,255,255,.7);
  backdrop-filter:blur(6px);
}
.dot{ width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 3px rgba(216,251,79,.35); animation:beat 2.4s var(--ease) infinite; }
@keyframes beat{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(.6); opacity:.6 } }

.mark{
  font-style:italic; position:relative;
  background-image:linear-gradient(var(--lime),var(--lime));
  background-repeat:no-repeat;
  background-size:0% 58%;
  background-position:0 78%;
  transition:background-size 1.1s var(--ease) .25s;
  padding:0 .06em; margin:0 -.06em;
}
.is-in .mark, .mark.is-in{ background-size:100% 58%; }

.btn{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--ink); color:var(--paper); border-radius:999px;
  padding:15px 26px; font-size:15px; font-weight:500; letter-spacing:-.01em;
  transition:background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.btn:hover{ background:var(--lime); color:var(--ink); }
.btn__ico{ width:0; height:0; border-left:11px solid currentColor; border-top:7px solid transparent; border-bottom:7px solid transparent; }
.btn--big{ font-size:clamp(15px,2.2vw,22px); padding:18px 30px; font-family:var(--serif); }
.btn__arrow{ transition:transform .45s var(--ease); }
.btn--big:hover .btn__arrow{ transform:translate(4px,-4px); }

.link{
  display:inline-flex; align-items:center; gap:10px; font-size:15px;
  border-bottom:1.5px solid var(--ink); padding-bottom:2px;
  transition:color .35s, border-color .35s;
}
.link .ico{ transition:transform .5s var(--ease); }
.link:hover .ico{ transform:rotate(-12deg) translateX(3px); }

.tags{ display:flex; flex-wrap:wrap; gap:7px; }
.tags li{
  font-size:11px; font-weight:500; color:var(--ink-2);
  border:1px solid var(--line); border-radius:999px; padding:5px 11px;
}

/* ---------- cursor ---------- */
.cursor{ position:fixed; inset:0; z-index:9500; pointer-events:none; display:none; }
@media (hover:hover) and (pointer:fine){ .cursor{ display:block; } body.has-cursor{ cursor:none; } }
.cursor__dot,.cursor__ring{ position:absolute; top:0; left:0; border-radius:50%; transform:translate3d(-50%,-50%,0); will-change:transform; }
.cursor__dot{ width:7px; height:7px; background:var(--ink); }
.cursor__ring{
  width:32px; height:32px; border:1.4px solid rgba(21,20,17,.32); display:grid; place-items:center;
  transition:width .35s var(--ease), height .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.cursor__label{ font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--ink); opacity:0; transform:scale(.6); transition:opacity .25s, transform .3s var(--ease); }
.cursor.is-link .cursor__ring{ width:54px; height:54px; background:rgba(21,20,17,.07); border-color:transparent; }
.cursor.is-play .cursor__ring{ width:96px; height:96px; background:var(--lime); border-color:transparent; }
.cursor.is-play .cursor__label{ opacity:1; transform:scale(1); }
.cursor.is-play .cursor__dot{ opacity:0; }
.cursor.is-hidden{ opacity:0; }

/* ---------- preloader ---------- */
.loader{
  position:fixed; inset:0; z-index:9800; background:var(--paper);
  display:grid; place-items:center;
  transition:opacity .7s var(--ease), transform .9s var(--ease);
}
.loader.is-done{ opacity:0; transform:translateY(-3%); pointer-events:none; }
.loader__inner{ width:min(430px,78vw); text-align:center; }
.loader__me{ width:132px; height:auto; margin:0 auto 6px; animation:bob 3.2s var(--ease) infinite alternate; }
.loader__mark{ font-family:var(--serif); font-size:clamp(34px,6vw,52px); font-weight:600; letter-spacing:-.035em; }
.loader__mark i{ color:var(--lime); font-style:normal; -webkit-text-stroke:1px var(--ink); }
.loader__track{ height:2px; background:var(--line); border-radius:2px; margin:26px 0 12px; overflow:hidden; }
.loader__track i{ display:block; height:100%; width:0%; background:var(--ink); border-radius:2px; }
.loader__row{ display:flex; justify-content:space-between; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }

/* ---------- top bar ---------- */
.bar{
  position:fixed; top:0; left:0; right:0; z-index:7000;
  padding:20px var(--pad);
  transition:transform .6s var(--ease), background .4s ease, box-shadow .4s ease;
}
.bar__in{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
  margin-inline:auto; max-width:var(--maxw);
}
.bar.is-stuck{ background:rgba(251,249,244,.86); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line); padding-top:14px; padding-bottom:14px; }
.bar.is-hidden{ transform:translateY(-110%); }
.bar__side{ font-size:12.5px; color:var(--ink-2); display:flex; align-items:center; gap:22px; }
.bar__side--r{ justify-content:flex-end; }
.bar__side--r a{ color:var(--ink); transition:color .3s; }
.bar__side--r a:hover{ color:var(--ink-2); }
.bar__cta{ text-decoration:underline; text-underline-offset:4px; }
.bar__mark{ font-family:var(--serif); font-size:21px; font-weight:700; letter-spacing:-.045em; }
.bar__mark i{ color:var(--lime); font-style:normal; -webkit-text-stroke:1px var(--ink); }

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:94svh; display:grid; place-items:center;
  padding:clamp(120px,16vh,180px) var(--pad) clamp(50px,8vh,90px);
}
.hero__body{
  position:relative; z-index:3; text-align:center;
  max-width:clamp(560px, 48vw + 130px, 1080px);
  margin-inline:auto;
}
.hero__title{
  font-family:var(--serif); font-weight:400; font-variation-settings:"SOFT" 40,"WONK" 0,"opsz" 110;
  font-size:clamp(34px, 17.8px + 4.32vw, 104px); line-height:1.07; letter-spacing:-.022em;
  margin:22px 0 24px;
}
.hero__title span{ display:block; }
.hero__title em{ font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 110; }
.hero__lede{ max-width:52ch; margin:0 auto; color:var(--ink-2); font-size:clamp(14.5px,1.25vw,17px); }
.hero__cta{ display:flex; align-items:center; justify-content:center; gap:clamp(16px,3vw,34px); flex-wrap:wrap; margin-top:34px; }

/* ---------- collage ---------- */
.collage{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  max-width:var(--maxw); margin-inline:auto;      /* keeps the scatter near the words on 27" screens */
}
.sticker{
  position:absolute; left:var(--x); top:var(--y); width:var(--w);
  translate:var(--tx,0px) var(--ty,0px);
}
.sticker__in{
  rotate:var(--r,0deg);
  animation:bob var(--dur,7s) var(--ease) var(--delay,0s) infinite alternate;
}
@keyframes bob{ from{ translate:0 0 } to{ translate:0 -13px } }
.sticker .vcard, .sticker .chip, .sticker .card{ pointer-events:auto; }
.doodle{ opacity:.9; }
.doodle .ico{ width:100%; }

.vcard{
  position:relative; aspect-ratio:16/10; border-radius:16px; overflow:hidden;
  background:#15130f; box-shadow:var(--sh); border:4px solid #fff;
  transition:scale .5s var(--ease), box-shadow .5s var(--ease);
}
.vcard:hover{ scale:1.045; box-shadow:var(--sh-lift); }
.vcard video{ width:100%; height:100%; object-fit:cover; }
.vcard__tag{
  position:absolute; left:8px; bottom:8px; background:rgba(251,249,244,.94); color:var(--ink);
  font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 9px; border-radius:999px;
}

.card{
  background:#fff; border:1px solid rgba(21,20,17,.07); border-radius:18px;
  padding:14px 16px 16px; box-shadow:var(--sh);
}
.card--sand{ background:var(--sand); border-color:rgba(21,20,17,.06); }
.card--sky{ background:var(--sky); border-color:rgba(21,20,17,.07); }
.card__eyebrow{ font-size:9.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-2); }
.card__title{ font-family:var(--serif); font-size:16px; line-height:1.25; margin-top:5px; }

.keys{ display:flex; align-items:center; gap:10px; margin:14px 0 10px; }
.keys i{ width:9px; height:9px; background:var(--ink); rotate:45deg; border-radius:1.5px; opacity:.25; }
.keys i:nth-child(2),.keys i:nth-child(5){ opacity:1; background:var(--lime); outline:1.4px solid var(--ink); outline-offset:-1px; }
.scrub{ height:4px; border-radius:4px; background:rgba(21,20,17,.1); overflow:hidden; }
.scrub span{ display:block; height:100%; width:38%; background:var(--ink); border-radius:4px; animation:scrub 4.5s var(--ease) infinite alternate; }
@keyframes scrub{ from{ width:16% } to{ width:86% } }

.curve{ width:100%; height:auto; margin-top:10px; overflow:visible; }
.curve__grid{ stroke:rgba(21,20,17,.12); stroke-width:1; stroke-dasharray:2 5; }
.curve__line{ fill:none; stroke:var(--ink); stroke-width:2.6; stroke-linecap:round; }
.curve__dot{ fill:var(--lime); stroke:var(--ink); stroke-width:1.6; }

.chip{
  display:inline-flex; align-items:center; gap:9px; background:#fff;
  border:1px solid rgba(21,20,17,.07); border-radius:999px; padding:10px 16px;
  font-size:13px; font-weight:500; white-space:nowrap; box-shadow:var(--sh);
}
.chip .ico{ width:15px; flex:none; }
.chip--lime{ background:var(--lime); border-color:rgba(21,20,17,.1); }
.chip--sky{ background:var(--sky); }

/* ---------- the face ---------- */
.me{
  width:100%; height:auto;
  filter:drop-shadow(0 16px 26px rgba(60,48,24,.18));
}
.chat{ display:block; }
.chat__who{
  display:flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
}
.chat__who img{ width:22px; height:22px; border-radius:50%; border:1.5px solid var(--ink); }
.chat p{ font-family:var(--serif); font-size:15px; line-height:1.3; margin-top:8px; }

.studio__me{
  width:min(290px,64%); height:auto; margin-bottom:20px; rotate:-2.5deg;
  filter:drop-shadow(0 18px 30px rgba(60,48,24,.2));
  animation:bob 10s var(--ease) -1s infinite alternate;
}

/* ---------- tape ---------- */
.tape{
  background:var(--lime); border-top:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink);
  overflow:hidden; rotate:-1.1deg; width:106%; margin-left:-3%; padding:13px 0;
}
.tape__track{ display:flex; align-items:center; gap:26px; white-space:nowrap; will-change:transform; }
.tape__track span{ font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }

/* ---------- section heads ---------- */
.head{
  padding:0 var(--pad); margin:0 auto clamp(34px,5vw,62px);
  width:100%; max-width:var(--maxw);
}
.head .eyebrow{ display:block; margin-bottom:6px; }
.head__note{ max-width:60ch; }
.head--center{ text-align:center; }
.head--center .head__title{ margin-inline:auto; }
.head__title{
  position:relative; display:inline-block;
  font-family:var(--serif); font-weight:400; font-variation-settings:"SOFT" 40,"opsz" 120;
  font-size:clamp(32px, 24.1px + 2.63vw, 82px); line-height:1.1; letter-spacing:-.022em; margin-top:14px;
}
.head__title em{ font-style:italic; font-variation-settings:"SOFT" 60,"WONK" 1; }
.head__swoosh{ position:absolute; left:38%; bottom:-22px; width:min(280px,54%); color:var(--lime); }
.head__note{ margin-top:16px; color:var(--ink-2); font-size:14.5px; }

/* ---------- work ---------- */
.work{ padding:clamp(70px,10vw,130px) 0 clamp(50px,8vw,90px); }
.work__grid{
  padding:0 var(--pad); margin-inline:auto; max-width:var(--maxw);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(26px,4vw,56px);
}
.w-card--drop{ margin-top:clamp(0px,7vw,96px); }
.w-card{
  background:#fff; border:1px solid rgba(21,20,17,.07); border-radius:26px; padding:clamp(12px,.9vw,20px);
  box-shadow:var(--sh); rotate:var(--r,0deg);
  transition:rotate .6s var(--ease), box-shadow .6s var(--ease), translate .6s var(--ease);
}
.w-card:hover{ rotate:0deg; translate:0 -8px; box-shadow:var(--sh-lift); }
.w-card__media{
  position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:#15130f;
}
.w-card__media video{ width:100%; height:100%; object-fit:cover; transition:scale .9s var(--ease); }
.w-card:hover .w-card__media video{ scale:1.04; }
.w-card__num,.w-card__time{
  position:absolute; background:rgba(251,249,244,.94); color:var(--ink);
  font-size:10.5px; font-weight:600; letter-spacing:.1em; padding:5px 10px; border-radius:999px;
}
.w-card__num{ top:12px; left:12px; }
.w-card__time{ bottom:12px; right:12px; }
.w-card__body{ padding:clamp(18px,1.3vw,28px) clamp(6px,.6vw,14px) 8px; }
.w-card__body h3{
  font-family:var(--serif); font-weight:400; font-variation-settings:"SOFT" 40,"opsz" 60;
  font-size:clamp(21px, 1.2px + 1.86vw, 40px); line-height:1.15; letter-spacing:-.02em;
}
.w-card__body p{ color:var(--ink-2); font-size:clamp(14.5px,.9vw,17px); margin:10px 0 16px; max-width:52ch; }

/* ---------- process ---------- */
.process{ padding:clamp(56px,8vw,96px) 0 clamp(50px,7vw,80px); }
.steps{
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center;
  gap:clamp(10px,1.6vw,22px); padding:0 var(--pad);
  margin-inline:auto; max-width:var(--maxw);
}
.step{
  position:relative; background:#fff; border:1px solid rgba(21,20,17,.07); border-radius:24px;
  padding:clamp(24px,1.7vw,36px) clamp(22px,1.6vw,34px) clamp(28px,1.9vw,40px); box-shadow:var(--sh); rotate:var(--r,0deg); align-self:stretch;
  transition:rotate .6s var(--ease), translate .6s var(--ease), box-shadow .6s var(--ease);
}
.step:hover{ rotate:0deg; translate:0 -6px; box-shadow:var(--sh-lift); }
.step--lime{ background:var(--lime); }
.step__num{ font-size:11px; font-weight:600; letter-spacing:.16em; color:var(--ink-2); }
.step h3{ font-family:var(--serif); font-weight:400; font-size:clamp(19px,2vw,26px); letter-spacing:-.02em; margin:8px 0 10px; }
.step p{ font-size:14.5px; color:var(--ink-2); }
.step--lime p{ color:rgba(21,20,17,.72); }
.step__ico{ position:absolute; top:22px; right:22px; width:auto; height:22px; opacity:.45; }
.steps__arrow{ width:72px; color:var(--ink); opacity:.45; }
.steps__arrow--flip{ scale:1 -1; }

/* ---------- studio ---------- */
.studio{
  padding:clamp(50px,7vw,86px) var(--pad) clamp(70px,10vw,130px);
  margin-inline:auto; max-width:var(--maxw);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(32px,5vw,80px);
}
.studio__intro{ position:sticky; top:110px; align-self:start; }
.studio__title{
  font-family:var(--serif); font-weight:400; font-variation-settings:"SOFT" 40,"opsz" 120;
  font-size:clamp(30px, 23px + 1.88vw, 66px); line-height:1.1; letter-spacing:-.022em; margin:14px 0 18px;
}
.studio__text{ color:var(--ink-2); font-size:clamp(14.5px,1.2vw,16.5px); max-width:44ch; }
.stats{ display:flex; flex-wrap:wrap; gap:26px 42px; margin-top:clamp(28px,4vw,44px); }
.stats strong{
  display:block; font-family:var(--serif); font-weight:500; font-size:clamp(34px,4vw,54px);
  letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums;
}
.stats span{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }

.caps{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.8vw,24px); }
.cap{
  background:#fff; border:1px solid rgba(21,20,17,.07); border-radius:22px;
  padding:clamp(22px,1.5vw,32px) clamp(20px,1.4vw,30px) clamp(24px,1.6vw,34px);
  box-shadow:var(--sh); rotate:var(--r,0deg);
  transition:rotate .55s var(--ease), translate .55s var(--ease), box-shadow .55s var(--ease);
}
.cap:hover{ rotate:0deg; translate:0 -6px; box-shadow:var(--sh-lift); }
.cap--sand{ background:var(--sand); }
.cap--lime{ background:var(--lime); }
.cap--sky{ background:var(--sky); }
.cap .ico{ width:auto; height:28px; margin-bottom:16px; opacity:.9; }
.cap h3{ font-family:var(--serif); font-weight:400; font-size:clamp(17px,1.6vw,21px); letter-spacing:-.015em; }
.cap p{ font-size:13.5px; color:var(--ink-2); margin-top:7px; }
.cap--lime p{ color:rgba(21,20,17,.7); }

/* ---------- contact ---------- */
.contact{
  position:relative; text-align:center; padding:clamp(70px,11vw,150px) var(--pad) 0;
  border-top:1px solid var(--line);
}
.contact__doodle{ position:absolute; top:clamp(40px,7vw,90px); left:50%; width:26px; color:var(--lime); translate:-50% 0; }
.contact__title{
  font-family:var(--serif); font-weight:400; font-variation-settings:"SOFT" 40,"opsz" 140;
  font-size:clamp(36px, 18.4px + 4.69vw, 112px); line-height:1.06; letter-spacing:-.025em; margin:16px 0 20px;
}
.contact__text{ max-width:46ch; margin:0 auto 34px; color:var(--ink-2); font-size:clamp(14.5px,1.2vw,17px); }
.socials{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px 26px; margin-top:clamp(32px,5vw,54px); font-size:13px; }
.socials a{ color:var(--ink-2); border-bottom:1px solid transparent; padding-bottom:2px; transition:color .3s, border-color .3s; }
.socials a:hover{ color:var(--ink); border-color:var(--ink); }

.footer{
  margin:clamp(50px,8vw,90px) auto 0; max-width:var(--maxw); border-top:1px solid var(--line);
  padding:18px 0; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:11.5px; color:var(--ink-2);
}
.footer__time{ display:inline-flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums; }
.footer__time i{ width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 2.5px rgba(216,251,79,.4); }

/* ---------- lightbox ---------- */
.lightbox{ position:fixed; inset:0; z-index:9600; display:grid; place-items:center; padding:clamp(16px,4vw,54px); }
.lightbox[hidden]{ display:none; }
.lightbox__bg{ position:absolute; inset:0; background:rgba(251,249,244,.93); backdrop-filter:blur(16px); opacity:0; transition:opacity .5s ease; }
.lightbox.is-open .lightbox__bg{ opacity:1; }
.lightbox__stage{ position:relative; width:min(1500px,92vw,100%); opacity:0; translate:0 22px; scale:.985; transition:opacity .5s ease, translate .7s var(--ease), scale .7s var(--ease); }
.lightbox.is-open .lightbox__stage{ opacity:1; translate:0; scale:1; }
.lightbox__video{ width:100%; aspect-ratio:16/9; background:#15130f; border-radius:18px; box-shadow:var(--sh-lift); }
.lightbox__meta{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:14px; font-size:12.5px; color:var(--ink-2); }
.lightbox__meta span:first-child{ font-family:var(--serif); font-size:16px; color:var(--ink); }
.lightbox__close{
  position:absolute; top:clamp(14px,3vw,34px); right:clamp(14px,3vw,34px); z-index:2;
  display:inline-flex; gap:10px; align-items:center; font-size:12.5px; font-weight:500;
  background:var(--ink); color:var(--paper); border-radius:999px; padding:10px 18px;
  transition:background .35s, color .35s;
}
.lightbox__close:hover{ background:var(--lime); color:var(--ink); }

/* ---------- reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(20px); transition:opacity .85s var(--ease), transform .95s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }

/* ---------- responsive ----------
   >1800  : big-screen scale up
   1320   : the far-flung stickers drop out
   1180   : the mid stickers drop out, studio stacks
   1100   : the collage becomes a row under the headline, steps stack
   860    : single-column work grid, compact bar
   700    : single-column capability cards
   540    : stacked hero buttons
   ------------------------------------------------------------------- */

@media (min-width:1800px){
  .sticker{ scale:1.1; }
  .vcard{ border-width:5px; }
  .hero__lede{ font-size:18px; max-width:56ch; }
  .studio__me{ width:min(340px,64%); }
}

@media (max-width:1320px){ .sticker--lg{ display:none; } }

@media (max-width:1180px){
  .sticker--md{ display:none; }
  .studio{ grid-template-columns:1fr; }
  .studio__intro{ position:static; }
  .studio__me{ width:min(230px,44%); }
}

@media (max-width:1100px){
  .hero{
    display:flex; flex-direction:column; align-items:stretch; text-align:center;
    padding-top:clamp(96px,14vh,140px); min-height:auto;
  }
  .hero__body{ order:1; max-width:none; width:100%; }
  .collage{
    order:2; position:static; display:flex; align-items:center; gap:12px;
    margin-top:38px; pointer-events:auto; max-width:none;
  }
  .sticker{ position:static; width:auto; flex:1 1 0; translate:none !important; }
  .sticker--portrait{ flex:0 0 clamp(96px,19vw,230px); }
  .sticker__in{ animation:none; }
  .doodle{ display:none; }
  .hero__cta{ margin-top:28px; }

  .steps{ grid-template-columns:1fr; gap:18px; }
  .steps__arrow{ justify-self:center; rotate:72deg; width:44px; }
  .steps__arrow--flip{ scale:1 1; rotate:108deg; }
}

@media (max-width:860px){
  .work__grid{ grid-template-columns:1fr; }
  .w-card--drop{ margin-top:0; }
  .bar__side--l{ display:none; }
  .bar__in{ grid-template-columns:auto 1fr; }
  .bar__mark{ justify-self:start; }
  .head__swoosh{ left:auto; right:0; width:min(240px,58%); }
  .studio__me{ width:min(210px,50%); }
}

@media (max-width:700px){
  .caps{ grid-template-columns:1fr; }
  .tape{ padding:11px 0; }
  .tape__track{ gap:20px; }
  .tape__track span{ font-size:12px; }
}

@media (max-width:620px){
  .hero__lede{ font-size:15px; }
  .w-card{ padding:11px; border-radius:22px; }
  .w-card__body{ padding:18px 6px 4px; }
  .step{ padding:22px 20px 26px; }
  .cap{ padding:22px 20px 24px; }
}

@media (max-width:540px){
  .collage .vcard__tag{ display:none; }   /* the cards are too small to carry a label */
  .hero__cta{ flex-direction:column; gap:18px; }
  .btn{ width:100%; max-width:340px; justify-content:center; }
  .socials{ gap:10px 20px; }
  .stats{ gap:22px 30px; }
}

@media (max-width:460px){
  .bar__side--r a:not(.bar__cta){ display:none; }
  .footer{ justify-content:center; text-align:center; }
  .sticker--portrait{ flex:0 0 86px; }
  .collage{ gap:9px; }
}

@media (max-width:420px){
  .btn--big{ font-size:14px; padding:15px 18px; gap:10px; }
  .lightbox__close{ padding:8px 13px; font-size:11.5px; }
  .vcard__tag{ font-size:8.5px; padding:4px 7px; }
}

/* short viewports (laptops, landscape tablets): the collage has less height to
   spread over, so the stickers shrink — and thin out — instead of piling up */
@media (min-width:1100px) and (max-height:820px){
  .sticker{ scale:.88; }
  .sticker--portrait{ scale:.82; }
}
@media (min-width:1100px) and (max-height:700px){
  .sticker--md{ display:none; }
  .sticker{ scale:.84; }
  .sticker--portrait{ scale:.78; }
}

/* touch: grow the hit area of small text links without moving anything */
@media (pointer:coarse){
  .link, .socials a, .footer a, .bar__side--r a{ position:relative; }
  .link::after, .socials a::after, .footer a::after, .bar__side--r a::after{
    content:""; position:absolute; inset:-13px -10px;
  }
}

/* every button and link stays inside the screen, however long the label */
.btn{ max-width:100%; }
.btn--big{ overflow-wrap:anywhere; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .mark{ background-size:100% 58%; }
  .sticker{ translate:none !important; }
}