/* Kuala Cola — kualacola.my */
@font-face{font-family:"Anton";src:url(../fonts/anton-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Permanent Marker";src:url(../fonts/permanent-marker-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/barlow-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/barlow-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(../fonts/barlow-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --red:#c8141e; --red-deep:#8e0d14; --ink:#000; --coal:#1b1718;
  --alu:#e6e8eb; --steel:#9da2a8; --salt:#f6b7ad; --white:#fff;
  --display:"Anton","Arial Narrow",Impact,sans-serif;
  --label:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Barlow",system-ui,sans-serif;
  --hand:"Permanent Marker","Comic Sans MS",cursive;
  --nav-h:68px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{margin:0;font:400 1.0625rem/1.55 var(--body);color:var(--ink);background:var(--alu);overflow-x:hidden}
img,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,figure{margin:0;padding:0}
ul{list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--white);outline-offset:3px;box-shadow:0 0 0 6px var(--ink)}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--white);padding:10px 14px;border:3px solid var(--ink);font-family:var(--label);font-weight:700}
.skip:focus{left:8px}

/* ---------- shared pieces ---------- */
.sticker{
  font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.98;letter-spacing:.02em;word-spacing:.14em;color:var(--white);
  -webkit-text-stroke:.16em var(--ink);paint-order:stroke fill;
  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(5px 6px 0 #000);
}
.boxed{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:1;font-size:clamp(2.1rem,4.7vw,3.9rem);letter-spacing:.03em;display:flex;flex-direction:column;align-items:flex-start;gap:.14em}
.boxed span{background:var(--ink);color:var(--white);padding:.1em .28em .06em;display:inline-block;white-space:nowrap}
.boxed span:nth-child(odd){transform:rotate(-1.4deg)}
.boxed span:nth-child(even){transform:rotate(.9deg);margin-left:.5em}
.boxed--red span{background:var(--red)}
.boxed--ink span{background:var(--ink)}
.btn{
  display:inline-block;font:700 1.25rem/1 var(--label);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:1rem 1.6rem .95rem;border:3px solid var(--ink);cursor:pointer;
  box-shadow:6px 6px 0 var(--ink);transition:transform .12s,box-shadow .12s;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
.btn--ink{background:var(--ink);color:var(--white);border-color:var(--white);box-shadow:6px 6px 0 rgba(0,0,0,.45)}
.btn--red{background:var(--red);color:var(--white)}
.torn{position:absolute;left:0;right:0;bottom:-1px;height:clamp(60px,11vw,150px);background:var(--c);pointer-events:none;z-index:3;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 160%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 160 L0 116 L15 106 L23 110 L30 127 L42 128 L51 127 L61 115 L74 126 L81 118 L92 107 L101 102 L109 101 L120 103 L127 88 L136 97 L143 87 L150 94 L161 78 L168 83 L179 86 L185 78 L197 83 L205 83 L221 87 L232 91 L242 103 L258 99 L265 107 L272 95 L287 103 L301 101 L316 99 L322 88 L334 95 L349 79 L360 79 L371 70 L379 74 L394 63 L405 74 L420 63 L427 77 L442 71 L448 81 L457 83 L469 85 L476 86 L483 82 L498 93 L505 83 L514 89 L523 81 L531 91 L546 76 L557 85 L562 84 L569 77 L580 73 L588 66 L600 61 L612 57 L622 46 L633 52 L641 57 L655 51 L662 52 L668 47 L677 49 L687 59 L693 63 L699 67 L712 67 L718 68 L727 78 L733 78 L749 76 L763 66 L779 68 L795 70 L802 65 L817 45 L826 53 L832 53 L840 49 L847 41 L862 32 L870 36 L878 27 L885 30 L901 41 L916 36 L929 39 L940 52 L949 58 L960 56 L975 49 L991 58 L1000 60 L1008 62 L1019 47 L1033 43 L1040 45 L1045 44 L1053 38 L1069 30 L1081 21 L1086 15 L1093 24 L1103 20 L1117 13 L1125 24 L1130 13 L1139 16 L1148 21 L1159 31 L1167 34 L1177 28 L1192 34 L1199 32 L1211 47 L1225 38 L1232 30 L1245 37 L1253 35 L1263 37 L1276 19 L1291 8 L1302 10 L1310 2 L1323 2 L1334 12 L1341 2 L1353 4 L1365 12 L1372 4 L1380 2 L1395 19 L1408 9 L1422 26 L1432 28 L1442 19 L1448 20 L1453 21 L1467 26 L1481 22 L1489 16 L1499 17 L1510 3 L1522 10 L1529 5 L1534 2 L1542 2 L1557 2 L1566 2 L1574 2 L1589 2 L1600 160Z%22/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 160%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 160 L0 116 L15 106 L23 110 L30 127 L42 128 L51 127 L61 115 L74 126 L81 118 L92 107 L101 102 L109 101 L120 103 L127 88 L136 97 L143 87 L150 94 L161 78 L168 83 L179 86 L185 78 L197 83 L205 83 L221 87 L232 91 L242 103 L258 99 L265 107 L272 95 L287 103 L301 101 L316 99 L322 88 L334 95 L349 79 L360 79 L371 70 L379 74 L394 63 L405 74 L420 63 L427 77 L442 71 L448 81 L457 83 L469 85 L476 86 L483 82 L498 93 L505 83 L514 89 L523 81 L531 91 L546 76 L557 85 L562 84 L569 77 L580 73 L588 66 L600 61 L612 57 L622 46 L633 52 L641 57 L655 51 L662 52 L668 47 L677 49 L687 59 L693 63 L699 67 L712 67 L718 68 L727 78 L733 78 L749 76 L763 66 L779 68 L795 70 L802 65 L817 45 L826 53 L832 53 L840 49 L847 41 L862 32 L870 36 L878 27 L885 30 L901 41 L916 36 L929 39 L940 52 L949 58 L960 56 L975 49 L991 58 L1000 60 L1008 62 L1019 47 L1033 43 L1040 45 L1045 44 L1053 38 L1069 30 L1081 21 L1086 15 L1093 24 L1103 20 L1117 13 L1125 24 L1130 13 L1139 16 L1148 21 L1159 31 L1167 34 L1177 28 L1192 34 L1199 32 L1211 47 L1225 38 L1232 30 L1245 37 L1253 35 L1263 37 L1276 19 L1291 8 L1302 10 L1310 2 L1323 2 L1334 12 L1341 2 L1353 4 L1365 12 L1372 4 L1380 2 L1395 19 L1408 9 L1422 26 L1432 28 L1442 19 L1448 20 L1453 21 L1467 26 L1481 22 L1489 16 L1499 17 L1510 3 L1522 10 L1529 5 L1534 2 L1542 2 L1557 2 L1566 2 L1574 2 L1589 2 L1600 160Z%22/%3E%3C/svg%3E") center/100% 100% no-repeat}
.torn--flat{height:clamp(34px,5vw,64px);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 160%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 160 L0 48 L16 50 L30 59 L44 57 L57 60 L66 54 L78 49 L93 47 L98 45 L113 43 L120 35 L125 45 L137 41 L150 26 L162 29 L176 37 L191 25 L205 43 L220 33 L228 36 L233 52 L247 53 L261 57 L269 50 L275 62 L283 55 L292 50 L300 55 L313 54 L322 63 L332 57 L344 38 L353 42 L367 36 L380 35 L387 39 L393 38 L400 22 L407 36 L423 23 L433 34 L447 33 L458 39 L472 43 L487 49 L494 59 L505 50 L517 51 L531 62 L544 59 L553 53 L562 59 L568 57 L574 43 L582 52 L592 39 L607 31 L617 34 L630 36 L642 28 L651 25 L665 37 L678 32 L688 46 L700 39 L710 56 L717 47 L726 58 L740 52 L747 54 L755 59 L762 56 L769 67 L782 48 L798 44 L807 56 L821 47 L830 33 L842 28 L850 31 L855 31 L869 35 L879 34 L889 26 L901 33 L914 47 L924 44 L937 46 L945 54 L959 60 L972 64 L984 61 L994 55 L1006 50 L1016 60 L1029 54 L1037 47 L1047 47 L1056 44 L1071 30 L1083 38 L1093 31 L1108 23 L1119 26 L1133 43 L1144 31 L1155 43 L1168 47 L1180 57 L1191 53 L1206 53 L1219 57 L1232 52 L1248 53 L1254 50 L1263 42 L1273 46 L1285 40 L1293 35 L1306 43 L1317 28 L1331 29 L1338 24 L1352 38 L1364 34 L1375 33 L1391 41 L1403 54 L1417 52 L1425 56 L1431 63 L1440 64 L1448 57 L1456 58 L1463 50 L1476 52 L1483 51 L1494 50 L1506 50 L1515 51 L1529 30 L1543 42 L1557 25 L1571 33 L1576 22 L1592 36 L1599 28 L1600 160Z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 160%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 160 L0 48 L16 50 L30 59 L44 57 L57 60 L66 54 L78 49 L93 47 L98 45 L113 43 L120 35 L125 45 L137 41 L150 26 L162 29 L176 37 L191 25 L205 43 L220 33 L228 36 L233 52 L247 53 L261 57 L269 50 L275 62 L283 55 L292 50 L300 55 L313 54 L322 63 L332 57 L344 38 L353 42 L367 36 L380 35 L387 39 L393 38 L400 22 L407 36 L423 23 L433 34 L447 33 L458 39 L472 43 L487 49 L494 59 L505 50 L517 51 L531 62 L544 59 L553 53 L562 59 L568 57 L574 43 L582 52 L592 39 L607 31 L617 34 L630 36 L642 28 L651 25 L665 37 L678 32 L688 46 L700 39 L710 56 L717 47 L726 58 L740 52 L747 54 L755 59 L762 56 L769 67 L782 48 L798 44 L807 56 L821 47 L830 33 L842 28 L850 31 L855 31 L869 35 L879 34 L889 26 L901 33 L914 47 L924 44 L937 46 L945 54 L959 60 L972 64 L984 61 L994 55 L1006 50 L1016 60 L1029 54 L1037 47 L1047 47 L1056 44 L1071 30 L1083 38 L1093 31 L1108 23 L1119 26 L1133 43 L1144 31 L1155 43 L1168 47 L1180 57 L1191 53 L1206 53 L1219 57 L1232 52 L1248 53 L1254 50 L1263 42 L1273 46 L1285 40 L1293 35 L1306 43 L1317 28 L1331 29 L1338 24 L1352 38 L1364 34 L1375 33 L1391 41 L1403 54 L1417 52 L1425 56 L1431 63 L1440 64 L1448 57 L1456 58 L1463 50 L1476 52 L1483 51 L1494 50 L1506 50 L1515 51 L1529 30 L1543 42 L1557 25 L1571 33 L1576 22 L1592 36 L1599 28 L1600 160Z%22/%3E%3C/svg%3E")}
.torn--top{bottom:auto;top:-1px;transform:scaleY(-1)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--ink);border-bottom:6px solid var(--red);color:var(--white)}
.nav__in{width:min(1240px,100% - 32px);margin-inline:auto;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav__brand{font:400 1.9rem/1 var(--display);letter-spacing:.02em;text-decoration:none;color:var(--white);padding:.15em .1em;transform:rotate(-2deg)}
.nav__brand::first-letter{color:var(--red)}
.nav__menu{display:flex;align-items:center;gap:clamp(14px,2.6vw,34px)}
.nav__menu a{font:600 1.12rem/1 var(--label);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:.5em 0;border-bottom:3px solid transparent}
.nav__menu a:hover,.nav__menu a.is-here{border-bottom-color:var(--red)}
.lang{display:flex;border:2px solid var(--white)}
.lang button{font:700 .95rem/1 var(--label);letter-spacing:.08em;background:none;color:var(--white);border:0;padding:.45em .6em;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--white);color:var(--ink)}
.nav__burger{display:none;width:44px;height:44px;background:none;border:2px solid var(--white);padding:9px 8px;cursor:pointer;flex-direction:column;justify-content:space-between}
.nav__burger span{display:block;height:3px;background:var(--white)}

/* ---------- hero ---------- */
.hero{position:relative;color:var(--white);overflow:hidden;
  background:
    url(../img/marks-red.svg) 0 0/640px,
    radial-gradient(circle at 50% 50%,rgba(0,0,0,.2) 1.6px,transparent 2px) 0 0/9px 9px,
    radial-gradient(ellipse at 50% 38%,#e0222c 0,var(--red) 55%,#a80f18 100%);
}
.hero__in{position:relative;z-index:4;width:min(1240px,100% - 32px);margin-inline:auto;padding:clamp(22px,3vw,40px) 0 clamp(90px,13vw,180px);display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__mark{font-size:clamp(4rem,min(14vw,17vh),10rem);line-height:.92;letter-spacing:.01em;transform:rotate(-3deg);-webkit-text-stroke-width:.1em}
.hero__ribbon{margin-top:clamp(4px,1vw,10px);background:var(--ink);color:var(--white);font:600 clamp(1rem,2.1vw,1.45rem)/1 var(--label);letter-spacing:.2em;text-transform:uppercase;padding:.6em 1em .52em;transform:rotate(1.2deg);position:relative;z-index:2}
.stage{position:relative;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(8px,2vw,28px);margin-top:clamp(10px,1.6vw,22px)}
.cans{display:flex;align-items:flex-end;justify-content:center}
.can{width:clamp(104px,min(17vw,18vh),220px);will-change:transform}
.can--1{transform:rotate(-9deg) translateY(4%);margin-right:-3%}
.can--2{position:relative;z-index:2;width:clamp(118px,min(19vw,20.5vh),246px)}
.can--3{transform:rotate(9deg) translateY(4%);margin-left:-3%}
.shout{font-size:clamp(1.9rem,5.4vw,4.6rem);will-change:transform}
.shout--l{justify-self:end;transform:rotate(-8deg)}
.shout--r{justify-self:start;transform:rotate(7deg)}
.hero .btn{margin-top:clamp(18px,3vw,34px)}

/* load-in: one orchestrated drop */
@media (prefers-reduced-motion:no-preference){
  .can{animation:drop .7s cubic-bezier(.2,1.5,.4,1) both, bob 5s ease-in-out .9s infinite}
  .can--1{--r:-9deg;--y:4%;animation-delay:.25s,1.1s}
  .can--2{--r:0deg;--y:0%;animation-delay:.1s,.9s}
  .can--3{--r:9deg;--y:4%;animation-delay:.4s,1.3s}
  .shout{animation:slap .35s cubic-bezier(.3,1.8,.5,1) both}
  .shout--l{--r:-8deg;animation-delay:.75s}
  .shout--r{--r:7deg;animation-delay:.9s}
  .hero__mark{animation:slap .4s cubic-bezier(.3,1.6,.5,1) both;--r:-3deg}
  @keyframes drop{from{opacity:0;transform:translateY(-70vh) rotate(calc(var(--r) * 3))}to{opacity:1;transform:rotate(var(--r)) translateY(var(--y))}}
  @keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
  @keyframes slap{from{opacity:0;transform:rotate(calc(var(--r) * -2)) scale(2.2)}to{opacity:1;transform:rotate(var(--r)) scale(1)}}
}

/* ---------- ticker ---------- */
.ticker{background:var(--ink);color:var(--white);overflow:hidden;padding:14px 0 16px;position:relative;z-index:4}
.ticker__track{display:flex;width:max-content;align-items:center;gap:34px;animation:tick 28s linear infinite}
.ticker span{font:400 clamp(1.5rem,3.4vw,2.5rem)/1 var(--display);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.ticker span:nth-of-type(even){color:transparent;-webkit-text-stroke:1.5px var(--white)}
.ticker i{font-style:normal;color:var(--red);font-size:1.6rem}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- flavours ---------- */
.flavours{position:relative;background:url(../img/speckle.svg) 0 0/600px,var(--alu);padding:clamp(56px,8vw,110px) 0 clamp(96px,11vw,150px)}
.head{display:grid;grid-template-columns:auto minmax(0,34ch);align-items:end;justify-content:space-between;gap:24px 48px;margin-bottom:clamp(40px,6vw,76px)}
.lede{font-size:1.15rem;font-weight:500}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.6vw,34px);align-items:start}
.tile{position:relative;border:4px solid var(--ink);box-shadow:10px 10px 0 var(--ink);cursor:pointer;display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .25s;outline-offset:6px}
.tile:nth-child(1){transform:rotate(-1.4deg)}
.tile:nth-child(2){transform:rotate(1deg) translateY(26px)}
.tile:nth-child(3){transform:rotate(-.7deg)}
.tile:hover,.tile:focus-visible,.tile.is-up{transform:rotate(0) translateY(-10px) scale(1.03);box-shadow:16px 18px 0 var(--ink);z-index:2}
.tile img{width:54%;margin:34px auto 0;transition:transform .35s cubic-bezier(.3,1.5,.5,1);filter:drop-shadow(10px 12px 0 rgba(0,0,0,.28))}
.tile:hover img,.tile:focus-visible img,.tile.is-up img{transform:rotate(-7deg) scale(1.08)}
.tile:nth-child(2):hover img,.tile:nth-child(2).is-up img{transform:rotate(6deg) scale(1.08)}
.tile--original{background:
  radial-gradient(circle at 12% 16%,var(--red-deep) 0 13%,transparent 13.3%),radial-gradient(circle at 88% 44%,var(--red-deep) 0 17%,transparent 17.3%),radial-gradient(circle at 20% 62%,#e2323b 0 9%,transparent 9.3%),var(--red)}
.tile--mix{background:
  radial-gradient(circle at 85% 14%,#fff 0 14%,transparent 14.3%),radial-gradient(circle at 10% 46%,#fff 0 16%,transparent 16.3%),radial-gradient(circle at 84% 62%,var(--steel) 0 8%,transparent 8.3%),#c4c8cd}
.tile--zero{background:
  radial-gradient(circle at 14% 14%,var(--red) 0 12%,transparent 12.3%),radial-gradient(circle at 88% 40%,#3a3436 0 17%,transparent 17.3%),radial-gradient(circle at 16% 60%,#3a3436 0 9%,transparent 9.3%),var(--coal)}
.tile__txt{background:var(--white);border-top:4px solid var(--ink);padding:20px 20px 22px;margin-top:30px;flex:1}
.tile h3{font:400 clamp(1.9rem,3.3vw,2.6rem)/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.tile h3 small{display:block;font:600 1rem/1.2 var(--label);letter-spacing:.2em;color:var(--red);margin-top:.35em}
.tile p{margin-top:.6em;max-width:34ch}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tags li{font:700 .9rem/1 var(--label);letter-spacing:.1em;text-transform:uppercase;border:2px solid var(--ink);padding:.45em .6em .38em}
.badge{position:absolute;top:-22px;right:-16px;z-index:2;width:92px;height:92px;border-radius:50%;background:var(--red);color:var(--white);border:4px solid var(--ink);display:grid;place-items:center;text-align:center;font:400 1.15rem/1 var(--display);text-transform:uppercase;letter-spacing:.06em;transform:rotate(12deg);padding:6px}
.badge--ink{background:var(--ink)}
.tile--original .badge{background:var(--white);color:var(--ink)}

/* ---------- himalaya ---------- */
.hima{position:relative;background:var(--coal);color:var(--white);padding:clamp(90px,12vw,150px) 0 clamp(150px,22vw,300px);overflow:hidden}
.hima::before{content:"";position:absolute;inset:0;background:url(../img/marks-dark.svg) 0 0/640px;opacity:.45}
.hima__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,70px);align-items:center}
.hima__p{margin-top:1.6em;max-width:46ch;font-size:1.18rem}
.hima__p--tag{font:400 clamp(1.4rem,2.6vw,2rem)/1.1 var(--hand);color:var(--salt);transform:rotate(-2deg);margin-top:1.2em}
.hima__p--tag em{font-style:normal;color:var(--white)}
.hima__vis{position:relative;display:grid;place-items:center;min-height:420px}
.hima__can{width:min(230px,52%);transform:rotate(8deg);filter:drop-shadow(12px 14px 0 rgba(0,0,0,.6))}
.note{position:absolute;font:400 clamp(1rem,1.7vw,1.35rem)/1.1 var(--hand);color:var(--white);display:flex;align-items:flex-end;gap:6px;max-width:11ch}
.note svg{width:64px;flex:none;fill:none;stroke:var(--salt);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.note--1{left:0;top:6%;transform:rotate(-6deg)}
.note--2{right:-2%;bottom:20%;transform:rotate(4deg);align-items:flex-start}
.note--3{left:-8%;bottom:-2%;color:var(--salt);transform:rotate(-9deg);max-width:none}
.hima__mts{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(130px,20vw,300px);z-index:1}
/* headline wipes in once when scrolled to */
@media (prefers-reduced-motion:no-preference){
  .js #himaHead span{clip-path:inset(0 100% 0 0);transition:clip-path .5s cubic-bezier(.7,0,.2,1)}
  .js #himaHead span:nth-child(2){transition-delay:.15s}
  .js #himaHead span:nth-child(3){transition-delay:.3s}
  .js #himaHead.is-in span{clip-path:inset(0 -2% 0 0)}
}

/* ---------- story ---------- */
.story{position:relative;background:url(../img/speckle.svg) 0 0/600px,var(--salt);padding:clamp(70px,9vw,120px) 0 clamp(100px,13vw,170px)}
.story__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,84px);align-items:center}
.collage{position:relative;min-height:clamp(380px,46vw,560px)}
.snap{position:absolute;background:var(--white);padding:10px 10px 0;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.snap img{width:100%;aspect-ratio:1/1;object-fit:cover}
.snap figcaption{font:400 1.1rem/1 var(--hand);padding:10px 4px 12px;text-align:center}
.snap--1{width:66%;left:0;top:0;transform:rotate(-6deg)}
.snap--2{width:46%;right:2%;bottom:0;transform:rotate(7deg)}
.snap--2 img{aspect-ratio:4/5}
.doodle{position:absolute;fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.doodle--a{width:120px;left:4%;bottom:6%}
.doodle--b{width:74px;right:8%;top:4%;stroke:var(--red);fill:var(--red)}
.story__copy p{margin-top:1.3em;max-width:48ch;font-size:1.12rem}
.stamps{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.stamps li{background:var(--white);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:10px 16px 12px;display:flex;align-items:baseline;gap:8px}
.stamps li:nth-child(2){transform:rotate(-2deg)}
.stamps li:nth-child(3){transform:rotate(1.5deg)}
.stamps b{font:400 2.2rem/1 var(--display);color:var(--red)}
.stamps span{font:700 1rem/1 var(--label);letter-spacing:.1em;text-transform:uppercase}

/* ---------- deal ---------- */
.deal{position:relative;color:var(--white);padding:clamp(100px,13vw,170px) 0 clamp(70px,9vw,120px);
  background:radial-gradient(circle,rgba(0,0,0,.2) 1.6px,transparent 2px) 0 0/9px 9px,var(--red)}
.deal::before{content:"";position:absolute;inset:0;background:url(../img/marks-red.svg) 0 0/640px;opacity:.4}
.deal__grid{position:relative}
.deal__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center}
.deal__h{font-size:clamp(2.6rem,6.4vw,5rem);transform:rotate(-3deg);-webkit-text-stroke-width:.12em;max-width:9ch}
.deal__copy p{margin-top:2em;max-width:38ch;font-size:1.2rem;font-weight:500}
.card{background:var(--white);color:var(--ink);border:4px solid var(--ink);box-shadow:12px 12px 0 var(--ink);padding:clamp(20px,3vw,34px);display:grid;gap:16px;transform:rotate(1deg)}
.card__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card label{display:grid;gap:6px;font:700 1rem/1 var(--label);letter-spacing:.08em;text-transform:uppercase}
.card input,.card select,.card textarea{font:500 1.05rem/1.3 var(--body);padding:.7em .8em;border:3px solid var(--ink);border-radius:0;background:var(--alu);color:var(--ink);width:100%;text-transform:none;letter-spacing:0}
.card :is(input,select,textarea):focus-visible{outline:3px solid var(--red);outline-offset:2px;box-shadow:none;background:var(--white)}
.card .btn{justify-self:start}
.card__err{font-weight:600;color:var(--red-deep);border-left:5px solid var(--red);padding-left:10px}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--white);overflow:hidden;padding-bottom:30px}
.foot__mark{font:400 clamp(5rem,23vw,21rem)/.8 var(--display);text-transform:uppercase;text-align:center;white-space:nowrap;color:var(--red);padding-top:.16em;letter-spacing:-.005em}
.foot__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 30px;margin-top:26px;padding-top:22px;border-top:3px solid var(--white)}
.foot__tag{font:400 1.3rem/1 var(--hand);color:var(--salt)}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot nav a{font:600 1.05rem/1 var(--label);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.foot nav a:hover{color:var(--salt)}
.foot__legal{font-size:.92rem;color:var(--steel);width:100%}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav__burger{display:flex}
  .nav__menu{position:absolute;left:0;right:0;top:calc(var(--nav-h) + 6px);background:var(--ink);flex-direction:column;align-items:flex-start;gap:0;padding:8px 20px 22px;border-bottom:6px solid var(--red);display:none}
  .nav__menu.is-open{display:flex}
  .nav__menu a{width:100%;font-size:1.4rem;padding:.75em 0;border-bottom:1px solid #333}
  .lang{margin-top:18px}
  .lang button{padding:.7em 1em;font-size:1.05rem}
  .head{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr;gap:44px;max-width:420px;margin-inline:auto}
  .tile:nth-child(2){transform:rotate(1deg)}
  .tile img{width:44%}
  .hima__grid,.story__grid,.deal__grid{grid-template-columns:1fr}
  .hima__vis{min-height:380px;max-width:420px;margin-inline:auto;width:100%}
  .collage{max-width:480px;width:100%;margin-inline:auto;min-height:min(105vw,520px)}
  .deal__h{max-width:none}
  .note--2{right:0}.note--3{left:0}
}
@media (max-width:640px){
  .stage{grid-template-columns:1fr 1fr;row-gap:4px;margin-top:6px}
  .cans{grid-column:1/-1;grid-row:1}
  .can{width:29vw}.can--2{width:32vw}
  .shout{font-size:clamp(1.7rem,9vw,2.6rem)}
  .shout--l{justify-self:center;grid-row:2}
  .shout--r{justify-self:center;grid-row:2}
  .sticker{filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(3px 4px 0 #000)}
  .hero__ribbon{letter-spacing:.1em;font-size:.95rem}
  .card__row{grid-template-columns:1fr}
  .badge{right:-8px;width:80px;height:80px;font-size:1rem}
  .boxed span:nth-child(even){margin-left:.25em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker__track{animation:none}
  *{transition-duration:.01ms!important}
}