/* Shared styles for every page (shop.html, index.html, film.html). Page-only styles live inline in each page. */
/* Layout: black stage, yellow slate accent. Hero -> film-strip carousel -> pack detail -> spec tiles -> custom work -> contact. */
:root{
  --bg:#08090a; --surface:#111315; --line:#24282b; --fg:#f3f4f1; --muted:#8f979b;
  --y:#22d39a; --y2:#5af0be; --ink:#04110c;
  --display:'Oswald','Arial Narrow',Arial,sans-serif;
  --body:'Hanken Grotesk',system-ui,Arial,sans-serif;
  --mono:'DM Mono',ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:transparent;color:var(--fg);position:relative;font:400 16px/1.6 var(--body);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
a{color:inherit}
.wrap{max-width:1100px;margin:0 auto}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.full{margin-left:calc(-1*max(16px,env(safe-area-inset-left,0px)));margin-right:calc(-1*max(16px,env(safe-area-inset-right,0px)));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

#grid{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block;pointer-events:none}
/* nav */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(8,9,10,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;padding-block:14px;gap:16px}
.logo{font:700 22px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;text-decoration:none}
.logo b{color:var(--y);font-weight:700}
nav{display:flex;gap:24px;align-items:center}
nav a{font:500 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding-block:6px;border-bottom:2px solid transparent}
nav a.on{color:var(--fg);border-bottom-color:var(--y)}
nav a:hover{color:var(--fg)}

/* hero */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-12%;top:-35%;width:60%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(34,211,154,.2),rgba(34,211,154,0));pointer-events:none}
.ghost{position:absolute;left:0;right:0;top:8px;font:700 clamp(120px,26vw,360px)/.8 var(--display);text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);white-space:nowrap;pointer-events:none;user-select:none;letter-spacing:-.01em}
.hero .wrap{position:relative;padding-block:40px 18px}
.hero h1{text-shadow:0 2px 24px rgba(0,0,0,.55);font:700 clamp(25px,4.4vw,56px)/1.12 "Unbounded","Arial Black",Arial,sans-serif;text-transform:uppercase;margin:16px 0 20px;max-width:22ch;text-wrap:balance;letter-spacing:-.005em}
.hero h1 em{font-style:normal;color:var(--y)}
.hero p{max-width:46ch;color:#fff;font-weight:500;text-shadow:0 1px 3px rgba(0,0,0,.7),0 2px 22px rgba(0,0,0,.9);font-size:clamp(16px,2vw,19px);margin:0}

/* carousel */
.strip-wrap{position:relative;padding-block:20px 64px}
/* phones: tighter hero so the pack card starts closer to the text */
@media (max-width:700px){.hero .wrap{padding-block:32px 12px}.hero h1{margin:14px 0 16px}.hero p{line-height:1.45}.strip-wrap{padding-top:12px}}
.strip{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-block:130px 140px;margin-block:-122px -106px;scrollbar-width:none;padding-inline:max(16px,calc((100vw - 1100px)/2));margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));-webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{display:none}
.card{flex:0 0 auto;transform:scale(var(--s,.86));opacity:var(--o,.6);transform-origin:center;height:clamp(325px,50vw,450px);scroll-snap-align:center;position:relative;border-radius:3px;overflow:hidden;background:var(--surface);border:1px solid var(--line);transition:border-color .3s,box-shadow .3s}
.card.on{border-color:var(--y);box-shadow:0 0 0 1px rgba(34,211,154,.4),0 0 26px 0 rgba(34,211,154,.22),0 0 80px 4px rgba(34,211,154,.12);animation:aura 4.4s ease-in-out infinite}
@keyframes aura{0%,100%{box-shadow:0 0 0 1px rgba(34,211,154,.35),0 0 20px 0 rgba(34,211,154,.16),0 0 60px 2px rgba(34,211,154,.09)}50%{box-shadow:0 0 0 1px rgba(34,211,154,.55),0 0 32px 2px rgba(34,211,154,.28),0 0 90px 8px rgba(34,211,154,.15)}}
@media (prefers-reduced-motion:reduce){.card.on{animation:none}}
/* smooth swiping: cards live on their own GPU layer; the glow pulse pauses while the strip moves */
.strip .card{will-change:transform,opacity}
.strip.moving .card.on{animation-play-state:paused}
.card:hover{border-color:var(--y)}
.card.cover{aspect-ratio:4/5}
.card.vid{aspect-ratio:9/16}
.card img,.card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tag{position:absolute;left:10px;top:10px;z-index:3;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;background:rgba(0,0,0,.65);padding:7px 9px;border-radius:2px}
.tag.y{background:var(--y);color:var(--ink)}
.tag{max-width:calc(100% - 20px);white-space:nowrap;font-size:12px;letter-spacing:.02em;line-height:1}
@media (max-width:700px){.tag{font-size:12px;white-space:normal;line-height:1.35;letter-spacing:.01em}.mono{font-size:14px}.specs{font-size:14px}.pay,.tile p{font-size:16px}nav a{font-size:14px}.hero p{font-size:21px}.pack p,.cu p{font-size:18px}.btn{font-size:18px}.tile span{font-size:13px}footer .wrap{font-size:14px}}
.cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:42px 14px 14px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.8));font:700 20px/1.1 var(--display);text-transform:uppercase}
.cap small{display:block;font:400 11px/1.4 var(--mono);letter-spacing:.12em;color:#b9c1c4;margin-top:4px}
.arrows{display:flex;gap:10px;justify-content:flex-end;margin-top:6px;position:relative;z-index:3}
.arr{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--fg);font-size:18px;cursor:pointer;display:grid;place-items:center}
.arr[disabled]{opacity:.3;cursor:default}
.arr:hover:not([disabled]){border-color:var(--y);color:var(--y)}
.arr:focus-visible,.btn:focus-visible,a:focus-visible,.card:focus-visible{outline:2px solid var(--y);outline-offset:3px}

/* pack pager: segmented control + arrows */
.pager{justify-content:center;align-items:center;gap:14px;margin-top:0}
.arr.pg{width:54px;height:54px;font-size:20px;background:rgba(20,24,26,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);flex:0 0 auto}
/* pack switcher: separate pills. Active = blue-green gradient pill with arrow, inactive = dark pill with a light running along its edge */
@property --run{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes run{to{--run:360deg}}
.seg{position:relative;display:flex;gap:12px}
.seg-pill{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:999px;background:linear-gradient(90deg,#4cb6ff 0%,#3fd0d6 50%,var(--y) 100%);box-shadow:0 0 26px rgba(63,208,214,.35);transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1)}
.seg button{position:relative;z-index:1;border:1px solid var(--line);background:rgba(14,17,19,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--fg);font:600 15px/1 var(--mono);letter-spacing:.02em;padding:17px 26px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:color .3s,background .3s,border-color .3s}
.seg button b{opacity:.55;font-weight:500;margin-right:8px}
.seg button .ar{display:none;margin-left:8px}
.seg button.on{color:var(--ink);background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.seg button.on .ar{display:inline}
.seg button.on b{opacity:.7}
.seg button:not(.on):hover{border-color:rgba(255,255,255,.22)}
.seg button:not(.on)::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--run),transparent 0deg 300deg,rgba(191,255,236,.15) 320deg,#e9fff8 348deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:drop-shadow(0 0 4px rgba(191,255,236,.9));animation:run 3.4s linear infinite}
.seg button:focus-visible{outline:2px solid var(--y);outline-offset:2px}
@media (max-width:700px){.pager{padding-inline:2px}.arr.pg{display:none}.seg{flex:1;min-width:0;gap:8px}.seg button{flex:1;padding:17px 6px;font-size:14px}.seg button b{display:none}}
@media (prefers-reduced-motion:reduce){.seg-pill{transition:none}.seg button::before{animation:none}}
/* phone swipe hint: the cards stretch gently left and settle back, and the next pack's edge flashes neon */
@keyframes nudge{0%,100%{translate:0}40%{translate:-5px}100%{translate:0}}
@keyframes peekGlow{0%,100%{border-color:var(--line);box-shadow:none}35%{border-color:rgba(34,211,154,.7);box-shadow:0 0 12px rgba(34,211,154,.35),0 0 30px rgba(34,211,154,.15)}62%{border-color:rgba(34,211,154,.35);box-shadow:0 0 8px rgba(34,211,154,.12)}}
.strip.hint .card{animation:nudge 1.9s ease-in-out}
.strip.hint .card.on{animation:nudge 1.9s ease-in-out,aura 4.4s ease-in-out infinite}
.strip.hint .card.on + .card{animation:nudge 1.9s ease-in-out,peekGlow 1.9s ease-in-out}

/* language switcher: small button + dropdown */
header .wrap{justify-content:flex-start}.logo{margin-right:auto}
.lang{position:relative}
.langbtn{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:rgba(14,17,19,.75);color:var(--fg);font:600 12px/1 var(--mono);letter-spacing:.06em;padding:8px 10px;border-radius:999px;cursor:pointer}
.langbtn:hover{border-color:var(--y)}
.langbtn .chv{width:12px;height:12px;opacity:.6;transition:transform .25s}
.lang.open .chv{transform:rotate(180deg)}
.fl{display:inline-flex}.fl svg{width:20px;height:14px;border-radius:3px;display:block}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:0;display:none;flex-direction:column;gap:2px;padding:6px;background:#0e1113;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.55);z-index:30}
.lang.open .lang-menu{display:flex;animation:lmIn .18s ease-out}
@keyframes lmIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lang-menu .opt{display:flex;align-items:center;gap:10px;border:0;background:none;color:var(--fg);font:500 14px/1 var(--body);padding:11px 10px;border-radius:9px;cursor:pointer;text-align:left}
/* menu shows only flag + code; the language name stays for screen readers */
.lang-menu .opt .nm{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lang-menu .opt{padding:11px 14px 11px 11px}
.lang-menu .opt .cd{font:600 13px/1 var(--mono);color:var(--fg);letter-spacing:.06em}
.lang-menu .opt:hover{background:rgba(255,255,255,.06)}
.lang-menu .opt.on{background:var(--y);color:var(--ink)}.lang-menu .opt.on .cd{color:var(--ink)}
.langbtn:focus-visible,.lang-menu .opt:focus-visible{outline:2px solid var(--y);outline-offset:2px}
@media (max-width:700px){header .wrap{gap:10px}.logo{font-size:19px}nav a.on{display:none}nav a{font-size:12px;letter-spacing:.05em}.langbtn{padding:8px 9px}}

/* pack detail */
.detail{padding-block:24px 88px}
.pack{max-width:680px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:clamp(22px,4vw,38px)}
.pack h2{font:700 clamp(28px,5vw,44px)/1 var(--display);text-transform:uppercase;margin:0 0 10px}
.pack .by{margin-bottom:22px}
.specs{font:500 12px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--y);border-top:1px solid var(--line);padding-top:18px;margin-bottom:12px}
.pack p{color:#c3cacd;margin:0 0 20px}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:17px 22px;border-radius:2px;background:var(--y);color:var(--ink);font:700 16px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:0;transition:background .2s}
.btn:hover{background:var(--y2)}
.btn.o{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn.o:hover{border-color:var(--y);color:var(--y)}
.pay{max-width:680px;margin:18px auto 0;color:var(--muted);font-size:14px}

/* spec tiles */
section.tiles{padding-block:72px;border-top:1px solid var(--line)}
.tiles .head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px;margin-bottom:28px}
h3.sec{font:700 clamp(26px,4vw,40px)/1 var(--display);text-transform:uppercase;margin:0}
.tg{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;border:1px solid var(--line)}
.tile{padding:30px 26px;border-right:1px solid var(--line);background:var(--surface);min-width:0}
.tile:last-child{border-right:0}
.tile b{display:block;font:700 clamp(54px,9vw,88px)/.9 var(--display);color:var(--y)}
.tile span{display:block;margin-top:10px}
.tile p{margin:10px 0 0;color:var(--muted);font-size:15px}
@media (max-width:700px){.tile{border-right:0;border-bottom:1px solid var(--line)}.tile:last-child{border-bottom:0}}

/* custom */
section.custom{padding-block:72px;border-top:1px solid var(--line)}
.cu{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.cu p{color:#c3cacd;max-width:48ch}
@media (max-width:760px){.cu{grid-template-columns:1fr}}
footer{border-top:1px solid var(--line);padding-block:30px 46px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
footer a{text-decoration:none;color:var(--fg)}
footer a:hover{color:var(--y)}
/* single card: no arrows, centered */
.arrows[hidden]{display:none}
#pk,.tg{transition:opacity .1s}
.swap{opacity:0}
.card{cursor:pointer}
.card.soon img{filter:grayscale(.6) brightness(.7)}
.btn.dis{background:transparent;color:var(--muted);border:1px solid var(--line);pointer-events:none}
/* rounded corners */
.card{border-radius:22px}
.tag{border-radius:8px}
.pack{border-radius:24px}
.btn{border-radius:14px}
.tg{border-radius:22px;overflow:hidden}
.tile:first-child{border-top-left-radius:0}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card{transition:none}}
/* scroll reveal */
@keyframes rvIn{from{opacity:0;transform:translateY(90px) scale(.9);filter:blur(16px)}to{opacity:1;transform:none;filter:blur(0)}}
html.rv .rv:not(.in){opacity:0}
html.rv .rv.in{animation:rvIn 1.2s cubic-bezier(.16,1,.3,1) var(--d,0s) backwards}
/* scroll cue arrow */
.cue{position:fixed;left:50%;bottom:max(18px,calc(env(safe-area-inset-bottom,0px) + 10px));z-index:25;width:56px;height:56px;margin-left:-28px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(34,211,154,.55);background:rgba(8,9,10,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--y);text-decoration:none;box-shadow:0 0 24px rgba(34,211,154,.3);opacity:0;pointer-events:none;transition:opacity .5s}
.cue.show{opacity:1;pointer-events:auto}
.cue svg{width:26px;height:26px;animation:cueBob 1.6s ease-in-out infinite}
@keyframes cueBob{0%,100%{transform:translateY(-4px);opacity:.6}50%{transform:translateY(5px);opacity:1}}
@media (prefers-reduced-motion:reduce){.cue svg{animation:none}}
/* back-to-top: neon "tacho" ring that fills with scroll progress, a top-view car inside; on tap the car launches up */
.totop{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,calc(env(safe-area-inset-bottom,0px) + 12px));z-index:26;width:58px;height:58px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:conic-gradient(var(--y) calc(var(--p,0)*1turn),rgba(255,255,255,.1) 0);box-shadow:0 0 22px rgba(34,211,154,.35),0 8px 24px rgba(0,0,0,.45);
  opacity:0;transform:translateY(16px) scale(.8);pointer-events:none;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop::before{content:"";position:absolute;inset:3px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#14201b,#08090a 70%)}
.totop .tt-in{position:absolute;inset:3px;border-radius:50%;overflow:hidden}
.totop svg{overflow:visible;position:absolute;left:50%;top:50%;width:22px;height:36px;margin:-17px 0 0 -11px;color:var(--y);filter:drop-shadow(0 0 4px rgba(34,211,154,.7));animation:idle 1.6s ease-in-out infinite}
.totop .beam{animation:beam 2.4s ease-in-out infinite}
.totop .speed{position:absolute;inset:0;opacity:0;background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(191,255,236,.55) 7px 8px,transparent 8px 13px);-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,transparent);mask-image:linear-gradient(180deg,transparent,#000 40%,transparent)}
@keyframes idle{0%,100%{transform:translateY(0)}50%{transform:translateY(1px)}}
@keyframes beam{0%,100%{opacity:.55}45%{opacity:.9}50%{opacity:.35}55%{opacity:.9}}
.totop.launch svg{animation:launch 1.1s cubic-bezier(.5,0,.2,1) forwards}
.totop.launch .speed{animation:speed 1.1s ease-out}
@keyframes launch{0%{transform:translateY(0)}18%{transform:translateY(4px) scaleY(.94)}55%{transform:translateY(-62px);opacity:1}56%{transform:translateY(-62px);opacity:0}57%{transform:translateY(60px);opacity:0}58%{opacity:1}100%{transform:translateY(0)}}
@keyframes speed{0%,15%{opacity:0;transform:translateY(-20px)}30%{opacity:1}55%{opacity:.8;transform:translateY(20px)}70%,100%{opacity:0}}
@media (hover:hover){.totop:hover{box-shadow:0 0 30px rgba(34,211,154,.55),0 8px 24px rgba(0,0,0,.45)}}
.totop{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.totop:focus-visible{outline:2px solid var(--y);outline-offset:4px}
@media (max-width:700px){footer{padding-bottom:92px}.totop{width:52px;height:52px}.totop svg{width:20px;height:33px;margin:-16px 0 0 -10px}}
@media (prefers-reduced-motion:reduce){.totop svg,.totop .beam{animation:none}.totop.launch svg,.totop.launch .speed{animation:none}}
/* ring full (bottom of the page): spinning blue-green ring, the car drives off and a glowing "UP" appears */
.totop .up{position:absolute;inset:0;display:grid;place-items:center;font:700 19px/1 var(--display);letter-spacing:.06em;color:#eafff8;text-shadow:0 0 8px rgba(90,240,190,.9),0 0 18px rgba(76,182,255,.6);opacity:0;transform:translateY(12px) scale(.7);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.totop svg{transition:opacity .3s}
.totop.tt-full{background:conic-gradient(from var(--run),#4cb6ff,#3fd0d6,#22d39a,#5af0be,#4cb6ff);animation:run 2.6s linear infinite,ttglow 1.6s ease-in-out infinite}
.totop.tt-full::before{background:radial-gradient(circle at 50% 35%,#15323a,#08090a 72%)}
.totop.tt-full svg{animation:driveoff .75s cubic-bezier(.5,0,.2,1) forwards}
.totop.tt-full .speed{animation:speed .75s ease-out}
.totop.tt-full .up{opacity:1;transform:none;transition-delay:.6s;animation:uppulse 1.6s ease-in-out 1.1s infinite}
@keyframes driveoff{0%{transform:translateY(0);opacity:1}22%{transform:translateY(3px) scaleY(.94);opacity:1}90%{opacity:1}100%{transform:translateY(-64px);opacity:0}}
.totop.back svg{animation:comeback .6s cubic-bezier(.2,.8,.2,1)}
@keyframes comeback{0%{transform:translateY(56px);opacity:0}25%{opacity:1}100%{transform:translateY(0);opacity:1}}
@keyframes ttglow{0%,100%{box-shadow:0 0 20px rgba(63,208,214,.45),0 8px 24px rgba(0,0,0,.45)}50%{box-shadow:0 0 36px rgba(76,182,255,.7),0 8px 24px rgba(0,0,0,.45)}}
@keyframes uppulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.totop.launch .up{animation:upfly 1.1s cubic-bezier(.5,0,.2,1)}
@keyframes upfly{0%{transform:none}20%{transform:translateY(3px) scale(.92)}55%{transform:translateY(-50px);opacity:0}56%{transform:translateY(40px);opacity:0}100%{transform:none;opacity:1}}
@media (max-width:700px){.totop .up{font-size:17px}}
@media (prefers-reduced-motion:reduce){.totop.tt-full,.totop.tt-full .up,.totop.launch .up,.totop.tt-full .speed,.totop.back svg{animation:none}.totop.tt-full svg{animation:none;opacity:0}.totop.tt-full .up{transition-delay:0s}}


/* phones: a bit smaller and lower so it fits under the pack switcher */
@media (max-width:700px){.cue{width:46px;height:46px;margin-left:-23px;bottom:max(8px,calc(env(safe-area-inset-bottom,0px) + 6px))}.cue svg{width:22px;height:22px}}
/* hero background video */
.herobg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;z-index:0;display:block}
.herobg-shade{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,9,10,.6) 0%,rgba(8,9,10,.55) 45%,rgba(8,9,10,.55) 100%)}
.hero .ghost,.hero .wrap{z-index:1}
/* same green glow as before, but drawn inside the hero box so it fades out with the video instead of being cut at the bottom edge */
.hero::before{inset:0;width:auto;aspect-ratio:auto;background:radial-gradient(circle 30vw at 82% calc(30vw - 35%),rgba(34,211,154,.2),rgba(34,211,154,0));-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,1.000) 38%,rgba(0,0,0,0.972) 43%,rgba(0,0,0,0.896) 48%,rgba(0,0,0,0.784) 53%,rgba(0,0,0,0.648) 58%,rgba(0,0,0,0.500) 63%,rgba(0,0,0,0.352) 68%,rgba(0,0,0,0.216) 73%,rgba(0,0,0,0.104) 78%,rgba(0,0,0,0.028) 83%,rgba(0,0,0,0.000) 88%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,1.000) 38%,rgba(0,0,0,0.972) 43%,rgba(0,0,0,0.896) 48%,rgba(0,0,0,0.784) 53%,rgba(0,0,0,0.648) 58%,rgba(0,0,0,0.500) 63%,rgba(0,0,0,0.352) 68%,rgba(0,0,0,0.216) 73%,rgba(0,0,0,0.104) 78%,rgba(0,0,0,0.028) 83%,rgba(0,0,0,0.000) 88%)}
.herobg,.herobg-shade{--fade:linear-gradient(180deg,#000 0%,rgba(0,0,0,1.000) 38%,rgba(0,0,0,0.972) 43%,rgba(0,0,0,0.896) 48%,rgba(0,0,0,0.784) 53%,rgba(0,0,0,0.648) 58%,rgba(0,0,0,0.500) 63%,rgba(0,0,0,0.352) 68%,rgba(0,0,0,0.216) 73%,rgba(0,0,0,0.104) 78%,rgba(0,0,0,0.028) 83%,rgba(0,0,0,0.000) 88%);-webkit-mask-image:var(--fade);mask-image:var(--fade)}
/* made with this pack */
section.reels{padding-block:72px;border-top:1px solid var(--line)}
.reels .head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.rg{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;width:100vw;margin:-70px 0 -80px calc(50% - 50vw);padding-block:90px 100px;padding-inline:max(16px,calc((100vw - 250px)/2))}
.rg::-webkit-scrollbar{display:none}
.rg .rcard{flex:0 0 auto;width:min(64vw,250px);scroll-snap-align:center;transform:scale(var(--s,.86));opacity:var(--o,.6);transition:border-color .3s,box-shadow .3s}
.rcard.on{border-color:var(--y);box-shadow:0 0 0 1px rgba(34,211,154,.4),0 0 26px 0 rgba(34,211,154,.22),0 0 80px 4px rgba(34,211,154,.12);animation:aura 4.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.rcard.on{animation:none}}
.rarrows{display:flex;gap:10px;justify-content:center;margin-top:36px}
.rarrows[hidden]{display:none}
.rcard{all:unset;display:block;position:relative;aspect-ratio:9/16;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:var(--surface);cursor:pointer;box-sizing:border-box;transition:border-color .3s,box-shadow .3s}
.rcard:hover,.rcard:focus-visible{border-color:var(--y);box-shadow:0 0 28px rgba(34,211,154,.2)}
.rcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rcard .rby{position:absolute;left:0;right:0;bottom:0;padding:44px 14px 14px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.78));font:500 13px/1.2 var(--mono);letter-spacing:.06em;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:8px}
.rcard .rplay{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.6);display:grid;place-items:center;background:rgba(0,0,0,.35);flex:0 0 auto}
.rcard .rplay svg{width:14px;height:14px;margin-left:2px}
/* reel stats chips (views / likes / comments), same glass style as the pack cover chips */
.rcard .rstats{position:absolute;left:10px;right:10px;top:10px;z-index:2;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}
.rcard .rstats span{display:inline-flex;align-items:center;gap:5px;font:600 12px/1 var(--mono);letter-spacing:.02em;color:#fff;background:rgba(8,10,12,.55);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 9px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.rcard .rstats svg{width:13px;height:13px;flex:0 0 auto}
.rcard .rstats .s-likes svg{color:#ff4d6d}
.rlb{position:fixed;inset:0;z-index:100;background:rgba(3,5,6,.94);display:none;align-items:center;justify-content:center;padding:16px}
.rlb.on{display:flex}
.rlb video{max-height:100%;max-width:100%;aspect-ratio:9/16;border-radius:14px;background:#000}
.rlb button{position:absolute;top:max(14px,env(safe-area-inset-top,0px));right:14px;font:500 13px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:12px 18px;cursor:pointer}
/* more: arrow to reels */
.more{display:flex;align-items:center;justify-content:center;gap:14px;width:fit-content;max-width:100%;margin:40px auto 0;padding:16px 26px;border-radius:999px;border:1px solid var(--y);background:rgba(34,211,154,.1);text-decoration:none;color:#fff;font:700 16px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;box-shadow:0 0 0 1px rgba(34,211,154,.25),0 0 28px rgba(34,211,154,.3);animation:morePulse 2.6s ease-in-out infinite;transition:background .25s}
.more:hover{background:rgba(34,211,154,.2)}
.more svg{width:28px;height:28px;flex:0 0 auto;padding:4px;border-radius:50%;background:var(--y);color:var(--ink);animation:cueBob 1.6s ease-in-out infinite}
@keyframes morePulse{0%,100%{box-shadow:0 0 0 1px rgba(34,211,154,.2),0 0 18px rgba(34,211,154,.18)}50%{box-shadow:0 0 0 1px rgba(34,211,154,.5),0 0 38px rgba(34,211,154,.42)}}
@media (prefers-reduced-motion:reduce){.more,.more svg{animation:none}}
@media (max-width:700px){.more{font-size:17px;padding:18px 26px}}
section.reels{scroll-margin-top:70px}
/* pack card (conversion layout) */
.eyebrow{display:flex;align-items:center;gap:10px;font:500 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--y);margin-bottom:16px}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--y);box-shadow:0 0 12px var(--y)}
.pack h2{margin-bottom:14px}
.pack .pitch{font-size:clamp(18px,2.4vw,20px);line-height:1.5;color:#dfe5e7;margin:0 0 26px}
.buyrow{display:flex;align-items:center;gap:22px;padding-top:22px;border-top:1px solid var(--line)}
.price{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.price b{font:700 clamp(40px,7vw,54px)/.9 var(--display);color:#fff}
.price span{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.buyrow .btn{flex:1;min-width:0;padding-block:20px;font-size:18px;box-shadow:0 8px 30px rgba(34,211,154,.28)}
.trust{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:18px;color:#aeb8bc;font-size:14px;text-align:center}
.trust svg{width:17px;height:17px;flex:0 0 auto;color:var(--y)}
@media (max-width:560px){.buyrow{flex-direction:column;align-items:stretch;gap:18px}.price{flex-direction:row;align-items:baseline;gap:12px}.buyrow .btn{font-size:19px}.trust{font-size:14px}}
.more{transition:opacity .45s ease,background .25s}
.more.gone{opacity:0!important;pointer-events:none}
html.rv .more.in{animation:rvIn 1.2s cubic-bezier(.16,1,.3,1) var(--d,0s) backwards,morePulse 2.6s ease-in-out 1.4s infinite}
@media (prefers-reduced-motion:reduce){html.rv .more.in{animation:none}}
.more[hidden],section.reels[hidden]{display:none!important}
.card.cover{background:#050608}
.card.cover img{top:0;height:100%;object-fit:cover}
/* pro cover: full-bleed photo, glass spec pill over a soft top fade */
.card.cover::after{content:"";position:absolute;left:0;right:0;top:0;height:110px;background:linear-gradient(180deg,rgba(4,6,8,.62),rgba(4,6,8,0));z-index:2;pointer-events:none}
.card.cover .tag{left:12px;top:12px;right:12px;max-width:none;z-index:3;background:none;border:0;padding:0;box-shadow:none;display:flex;flex-wrap:wrap;gap:6px;white-space:normal;letter-spacing:0;text-transform:none}
.card.cover .tag em{font:600 12px/1 var(--mono);font-style:normal;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:rgba(8,10,12,.55);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:7px 11px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.card.cover .tag em:first-child{background:var(--y);color:var(--ink);border-color:transparent}

/* license: short line under Buy + full terms section */
.licline{margin-top:8px;color:#aeb8bc;font-size:14px;text-align:center}
.licline svg{width:16px;height:16px;color:var(--y);vertical-align:-3px;margin-right:6px}
.licline a{color:var(--fg);text-decoration:underline;text-decoration-color:rgba(34,211,154,.6);text-underline-offset:3px}
.licline a:hover{color:var(--y)}
section.license{padding-block:72px;border-top:1px solid var(--line);scroll-margin-top:70px}
.license .head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.lic{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--surface)}
.lic li{display:flex;gap:14px;align-items:flex-start;padding:20px 22px;border-bottom:1px solid var(--line);color:#dfe5e7;line-height:1.55}
.lic li:last-child{border-bottom:0}
.lic .ic{width:22px;height:22px;flex:0 0 auto;margin-top:2px;padding:3px;border-radius:50%}
.lic .ic.ok{color:var(--ink);background:var(--y)}
.lic .ic.no{color:#fff;background:#e5484d}
.lic .ic.info{color:var(--y);background:rgba(34,211,154,.14)}
.lic li a{color:var(--fg);text-decoration:underline;text-decoration-color:rgba(34,211,154,.6);text-underline-offset:3px}
.licnote{color:var(--muted);margin:16px 0 0;max-width:70ch}
.licnote a{color:var(--fg)}
footer .wrap > a.flic{margin-left:auto;margin-right:18px}
@media (max-width:700px){section.license{padding-block:52px}.lic li{padding:16px 18px;font-size:15px}.licline{font-size:14px}}

/* owner-only toast for the analytics opt-out */
.ownertoast{position:fixed;left:50%;bottom:max(24px,calc(env(safe-area-inset-bottom,0px) + 20px));z-index:120;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  font:600 14px/1.3 var(--mono);letter-spacing:.02em;color:var(--fg);background:rgba(14,17,19,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--y);border-radius:999px;padding:12px 18px;box-shadow:0 0 24px rgba(34,211,154,.35);white-space:nowrap;transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.ownertoast.on{opacity:1;transform:translate(-50%,0)}

/* site menu: button in the header corner, panel slides in from the right with numbered links to every section */
.menubtn{position:relative;width:40px;height:40px;flex:0 0 auto;margin-left:10px;border:1px solid var(--line);border-radius:50%;background:rgba(14,17,19,.75);cursor:pointer;padding:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.menubtn span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:var(--fg);transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .2s,top .35s cubic-bezier(.2,.8,.2,1)}
.menubtn span:nth-child(1){top:13px}.menubtn span:nth-child(2){top:19px}.menubtn span:nth-child(3){top:25px}
.menubtn[aria-expanded="true"]{border-color:var(--y)}
.menubtn[aria-expanded="true"] span:nth-child(1){top:19px;transform:rotate(45deg)}
.menubtn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menubtn[aria-expanded="true"] span:nth-child(3){top:19px;transform:rotate(-45deg)}
@media (hover:hover){.menubtn:hover{border-color:var(--y)}}
.menubtn:focus-visible{outline:2px solid var(--y);outline-offset:2px}
.menu-bg{position:fixed;inset:0;z-index:40;background:rgba(3,5,6,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s}
.menu{position:fixed;z-index:43;top:calc(env(safe-area-inset-top,0px) + 70px);right:max(12px,env(safe-area-inset-right,0px));width:min(320px,calc(100vw - 24px));max-height:calc(100dvh - 90px);overflow:auto;
  padding:16px 10px 14px;border:1px solid var(--line);border-radius:22px;background:rgba(12,15,17,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(34,211,154,.08);opacity:0;transform:translateY(-10px) scale(.97);transform-origin:top right;transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.menu.open,.menu-bg.open{opacity:1}
.menu.open{transform:none}
.menu-top{padding:0 12px 10px}
.menu-list{list-style:none;margin:0;padding:0}
.menu-list a{display:flex;align-items:center;gap:14px;padding:13px 12px;border-radius:14px;text-decoration:none;color:var(--fg);font:600 16px/1.2 var(--body)}
.menu-list a b{font:500 12px/1 var(--mono);color:var(--muted);letter-spacing:.06em;width:22px}
@media (hover:hover){.menu-list a:hover{background:rgba(255,255,255,.05)}}
.menu-list a.on{background:linear-gradient(90deg,rgba(76,182,255,.16),rgba(34,211,154,.16));color:#fff}
.menu-list a.on b{color:var(--y)}
.menu-list li[hidden]{display:none}
.menu-ig{display:flex;align-items:center;gap:10px;margin:10px 4px 0;padding:14px 12px 4px;border-top:1px solid var(--line);color:var(--muted);text-decoration:none;font:500 14px/1 var(--mono)}
.menu-ig svg{width:18px;height:18px}
.menu-ig:hover{color:var(--y)}
.menu.open .menu-list li{animation:mIn .4s cubic-bezier(.2,.8,.2,1) backwards}
.menu.open .menu-list li:nth-child(2){animation-delay:.03s}.menu.open .menu-list li:nth-child(3){animation-delay:.06s}.menu.open .menu-list li:nth-child(4){animation-delay:.09s}.menu.open .menu-list li:nth-child(5){animation-delay:.12s}.menu.open .menu-list li:nth-child(6){animation-delay:.15s}
@keyframes mIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
#packs,#pack,#inside,#reels,#license,#custom{scroll-margin-top:70px}
@media (max-width:700px){.menubtn{margin-left:8px;width:38px;height:38px}.menubtn span{left:10px;right:10px}.menubtn span:nth-child(1){top:12px}.menubtn span:nth-child(2){top:18px}.menubtn span:nth-child(3){top:24px}.menubtn[aria-expanded="true"] span:nth-child(1),.menubtn[aria-expanded="true"] span:nth-child(3){top:18px}}
@media (prefers-reduced-motion:reduce){.menu,.menu-bg,.menubtn span{transition:none}.menu.open .menu-list li{animation:none}}

/* ===== phones: one vertical rhythm for the whole page =====
   the hero headline is the largest text on screen, the subtitle steps back, and every section below
   shares the same 52px breathing room instead of the old tight top / airy bottom */
@media (max-width:700px){
  .hero .wrap{padding-block:34px 14px}
  /* headline: white line + green line; size follows the screen width so "CINEMATIC CAR CLIPS." fits one line in the real font */
  .hero h1{font-size:min(30px,calc((100vw - 32px) / 13.4));line-height:1.12;margin:12px 0 14px;max-width:none}
  .hero h1 em{display:block}
  .hero p{font-size:17px;line-height:1.45;max-width:none;text-wrap:balance}
  .strip-wrap{padding-top:14px}
  .card{height:300px}
  .detail{padding-block:24px 60px}
  .more{margin-top:28px}
  section.tiles,section.reels,section.custom{padding-block:52px}
  .tiles .head,.reels .head{margin-bottom:20px}
  .tile{padding:22px 22px 24px}
  .tile b{font-size:44px}
  .tile span{margin-top:8px}
  .tile p{margin-top:8px}
  .rarrows{margin-top:22px}
  .cu{gap:22px}
  footer{padding-top:26px}
}

/* ===== Home / Custom film page blocks ===== */
.cu-btns{display:flex;flex-direction:column;gap:12px}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-btns .btn{width:auto;padding:16px 24px}
.btn.grad{background:linear-gradient(90deg,#4cb6ff 0%,#3fd0d6 50%,var(--y) 100%);color:var(--ink);box-shadow:0 8px 30px rgba(63,208,214,.3)}
.btn.grad:hover{filter:brightness(1.08)}
/* tall heroes (Home / Custom film) reach below the grid's dark top, so they get a solid black backdrop:
   the video fades into clean black, like on the shop */
.page-hero{background:var(--bg)}
/* picture sits 30% higher in the frame than on the shop (object-position 45% -> 75%) */
.page-hero .herobg{object-position:50% 75%}
/* the grid fades in gently below the hero instead of showing through it */
.page-hero + main{position:relative}
.page-hero + main::before{content:"";position:absolute;z-index:-1;top:0;height:220px;left:calc(-1*max(16px,env(safe-area-inset-left,0px)));right:calc(-1*max(16px,env(safe-area-inset-right,0px)));background:linear-gradient(180deg,var(--bg) 0%,rgba(8,9,10,.85) 35%,rgba(8,9,10,.45) 70%,rgba(8,9,10,0) 100%);pointer-events:none}
.page-hero + main > section:first-child{border-top:0}
.page-hero .wrap{padding-block:40px 40px}
.page-hero.tall .wrap{padding-block:clamp(36px,5vw,70px) clamp(60px,9vw,110px)}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.facts span{font:600 12px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:#fff;background:rgba(8,10,12,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 12px}
section.block{padding-block:72px;border-top:1px solid var(--line);scroll-margin-top:70px}
section.block .head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.block-lead{color:#c3cacd;max-width:56ch;margin:-12px 0 28px}
/* pack teaser cards (Home) */
.pk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pk-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--surface);text-decoration:none;color:var(--fg);transition:border-color .3s,box-shadow .3s,transform .3s}
.pk-card:hover{border-color:var(--y);box-shadow:0 0 30px rgba(34,211,154,.2);transform:translateY(-3px)}
.pk-card .img{position:relative;aspect-ratio:4/5;background:#050608}
.pk-card .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pk-card .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.pk-card h4{margin:0;font:700 22px/1.05 var(--display);text-transform:uppercase}
.pk-card .meta{font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--y)}
.pk-card .row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px}
.pk-card .row b{font:700 30px/1 var(--display)}
.pk-card .row span{font:600 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--y)}
/* service cards + steps (Custom film) */
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.svc > div{border:1px solid var(--line);border-radius:22px;background:var(--surface);padding:24px 22px}
.svc .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--ink);background:linear-gradient(135deg,#4cb6ff,var(--y));margin-bottom:16px}
.svc .ic svg{width:22px;height:22px}
.svc h4{margin:0 0 8px;font:700 20px/1.1 var(--display);text-transform:uppercase}
.svc p{margin:0;color:var(--muted)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:st}
.steps li{position:relative;border:1px solid var(--line);border-radius:22px;background:var(--surface);padding:22px 20px 24px}
.steps li b{display:block;font:500 13px/1 var(--mono);color:var(--y);letter-spacing:.08em;margin-bottom:14px}
.steps h4{margin:0 0 8px;font:700 18px/1.15 var(--display);text-transform:uppercase}
.steps p{margin:0;color:var(--muted);font-size:15px}
.cta-box{border:1px solid var(--y);border-radius:24px;background:radial-gradient(120% 140% at 0% 0%,rgba(34,211,154,.12),rgba(17,19,21,1) 60%);padding:clamp(26px,4vw,44px);display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:center;box-shadow:0 0 40px rgba(34,211,154,.12)}
.cta-box p{color:#c3cacd;margin:0}
@media (max-width:900px){.svc{grid-template-columns:1fr}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
  .page-hero .wrap{padding-block:26px 24px}
  .page-hero.tall .wrap{padding-block:28px 44px}
  .hero-btns{flex-direction:column}.hero-btns .btn{width:100%}
  section.block{padding-block:52px}
  section.block .head{margin-bottom:20px}
  .pk-grid{grid-template-columns:1fr;gap:16px}
  .pk-card{flex-direction:row}.pk-card .img{width:42%;aspect-ratio:4/5;flex:0 0 auto}
  .pk-card .body{padding:14px 16px}.pk-card h4{font-size:19px}.pk-card .row b{font-size:24px}
  .steps{grid-template-columns:1fr}
  .cta-box{grid-template-columns:1fr;gap:20px}
}

/* pack teaser cards: not wider than needed on big screens */
@media (min-width:701px){.pk-grid{max-width:820px;margin-inline:auto}}
/* phones: Shop / Instagram live in the menu, so the header keeps only logo, language and menu */
@media (max-width:700px){header nav{display:none}}

/* "page in progress" bar (Home / Custom film only; the shop is finished). Closing it is remembered per browser.
   Construction-tape look: dark amber band with slowly moving diagonal stripes */
.wip{position:relative;z-index:21;background:#1c1606;border-bottom:1px solid rgba(255,176,32,.6);overflow:hidden}
.wip::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(255,176,32,.22) 0 12px,transparent 12px 24px);background-size:34px 34px;animation:wipMove 1.6s linear infinite;pointer-events:none}
@keyframes wipMove{to{background-position:34px 0}}
.wip .wrap{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 10px;padding:11px 40px;font:700 14px/1.35 var(--mono);letter-spacing:.03em;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.wip-dot{width:9px;height:9px;border-radius:50%;background:#ffb020;box-shadow:0 0 12px #ffb020;animation:wipPulse 1.4s ease-in-out infinite;flex:0 0 auto}
@keyframes wipPulse{0%,100%{opacity:1}50%{opacity:.3}}
.wip a{color:#0b0d0e;background:#ffb020;text-decoration:none;font-weight:700;padding:4px 10px;border-radius:999px;text-shadow:none;white-space:nowrap}
.wip a:hover{background:#ffc24d}
.wip-sep{display:none}
.wip-x{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.wip-x:hover{background:rgba(0,0,0,.6)}
.wip[hidden]{display:none}
@media (max-width:700px){.wip .wrap{font-size:13px;padding:10px 40px 10px 14px;gap:8px}}
@media (prefers-reduced-motion:reduce){.wip-dot,.wip::before{animation:none}}

/* while the menu is open the header (with its close button) stays above the dimmed backdrop */
body.menu-open header{z-index:42}

/* Home eyebrow: one line on wide screens, location drops to its own line on phones */
@media (max-width:700px){.eye-sep{display:none}.eye-loc{display:block;margin-top:6px}}