/* Layout: Umbrella's system in Cult Films colours. Light grey page, near-black text, one red accent,
   condensed capitals for titles, typewriter labels on rule bars, red footer.
   The covers are the stars: each sits in a Blu-ray case, tilts towards the cursor and its disc slides out.

   COVERS: the two covers live in the images/ folder as cover-salon-kitty.jpg and cover-miranda.jpg.
   Use the normal Blu-ray front cover shape (1286 x 1500 pixels is ideal). Replace a file with yours,
   keep the same name, and every page updates. */
@font-face{font-family:"Archivo";src:url("/fonts/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Cutive Mono";src:url("/fonts/cutive-mono.woff2") format("woff2");font-weight:400;font-display:swap}
:root{
  --paper:#eeeeee;
  --white:#ffffff;
  --ink:#1e1e1e;
  --grey:#595959;
  --rule:#cfcfcf;
  --red:#d4001a;
  --red-bright:#ff3b4c;
  --case:#1556b8;
  --display:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"Cutive Mono","Courier New",Courier,monospace;
  /* Motion: slow starts, long confident glides, soft landings */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --ease-cine:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{background:var(--paper);overflow-x:clip}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-stretch:100%;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wrap{max-width:1400px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.sq{font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;line-height:.9}
.mono{font-family:var(--mono);text-transform:uppercase;font-size:.85rem}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}

/* Header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:50;background:var(--ink)}
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--ink);color:var(--white)}
header.site .wrap{display:flex;align-items:center;gap:1.4rem;padding-block:.75rem;position:relative}
.logo{white-space:nowrap;font-family:var(--display);font-stretch:62%;font-weight:900;font-size:1.7rem;text-transform:uppercase;text-decoration:none;line-height:1;display:flex;gap:.4rem;align-items:baseline}
.logo span{color:var(--red-bright)}
nav.main{display:flex;gap:1.3rem;margin-left:1.2rem}
nav.main a{font-family:var(--display);font-stretch:62%;font-weight:600;font-size:1.3rem;text-transform:uppercase;text-decoration:none;color:#dadada;transition:color .45s var(--ease-out)}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--red-bright)}
.hdr-cta{margin-left:auto;font-family:var(--display);font-stretch:62%;font-weight:700;font-size:1.25rem;text-transform:uppercase;text-decoration:none;background:var(--red);color:var(--white);padding:.4rem .9rem;transition:background-color .5s var(--ease-out),color .5s var(--ease-out)}
.hdr-cta:hover{background:var(--white);color:var(--ink)}
.menu-btn{display:none;background:none;border:0;color:var(--white);font-family:var(--display);font-stretch:62%;font-weight:700;font-size:1.35rem;text-transform:uppercase;cursor:pointer;padding:.2rem 0}
@media (max-width:980px){
  .menu-btn{display:block}
  nav.main{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;background:var(--ink);padding:.4rem max(20px,env(safe-area-inset-right,0px)) 1rem max(20px,env(safe-area-inset-left,0px));visibility:hidden;opacity:0;transform:translate3d(0,-10px,0);transition:opacity .45s var(--ease-out),transform .7s var(--ease-out),visibility 0s linear .7s}
  nav.main.open{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  nav.main a{font-size:2rem;padding:.4rem 0;border-bottom:1px solid #333}
}

/* Rule bars with repeating labels */
.bar{display:flex;align-items:center;border-bottom:1px solid var(--ink);padding-block:.55rem;gap:1rem}
.bar .labels{flex:1;display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;min-width:0}
.bar .labels span{white-space:nowrap}
.bar .labels span::after{content:"   \2193";white-space:pre}
@media (max-width:760px){.bar .labels{grid-template-columns:repeat(2,1fr)}.bar .labels span:nth-child(n+3){display:none}}
.bar .all{font-family:var(--display);font-stretch:62%;font-weight:700;text-transform:uppercase;font-size:1.1rem;background:var(--ink);color:var(--white);text-decoration:none;padding:.2rem .6rem;white-space:nowrap}
.bar .all{transition:background-color .5s var(--ease-out),color .5s var(--ease-out)}
.bar .all:hover{background:var(--red)}
.dark .bar{border-color:#555}
.dark .bar .labels{color:#d0d0d0}
.dark .bar .all{background:var(--white);color:var(--ink)}
.dark .bar .all:hover{background:var(--red);color:var(--white)}

/* Buttons */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--display);font-stretch:62%;font-weight:700;font-size:1.35rem;text-transform:uppercase;text-decoration:none;padding:.6rem 1.05rem;background:var(--red);color:var(--white);border:2px solid var(--red);cursor:pointer;line-height:1;
  position:relative;isolation:isolate;overflow:hidden;--fill:var(--ink);--fill-ink:var(--white);transition:color .6s var(--ease-out),border-color .6s var(--ease-out)}
.btn::before{content:"";position:absolute;inset:-2px;z-index:-1;background:var(--fill);transform:scaleX(0);transform-origin:100% 50%;transition:transform .8s var(--ease-out)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1);transform-origin:0 50%}
.btn:hover,.btn:focus-visible{color:var(--fill-ink);border-color:var(--fill)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.dark .btn.ghost{color:var(--white);border-color:var(--white)}
.dark .btn{--fill:var(--white);--fill-ink:var(--ink)}
.ctas{display:flex;flex-wrap:wrap;gap:.6rem}
/* Full-width button rows: buttons share the width end to end */
.ctas.full{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:.6rem}
.ctas.full .btn{width:100%;padding:.9rem 1rem;font-size:1.5rem}

/* ===== Packshot with disc that slides out on hover ===== */
.pshot{position:relative;display:block;text-decoration:none}
.pshot .box{position:relative;z-index:1;width:100%;height:auto;aspect-ratio:914/1200;filter:drop-shadow(14px 22px 22px rgba(0,0,0,.28))}
.pshot .disc{position:absolute;z-index:0;top:16%;left:16%;width:76%;aspect-ratio:1;border-radius:50%;
  transform:translate3d(8%,0,0) rotate(0deg);transition:transform 2.2s var(--ease-cine);will-change:transform;
  filter:drop-shadow(6px 10px 14px rgba(0,0,0,.3))}
/* after the opening, each disc peeks out of its case; hovering draws it all the way out with a full turn */
.pshot.peek .disc{transform:translate3d(24%,0,0) rotate(360deg)}
.pshot:hover .disc,.pshot:focus-visible .disc,.pshot.out .disc{transform:translate3d(46%,0,0) rotate(720deg);transition-duration:1.9s}
.caption{margin-top:1.1rem;display:flex;flex-direction:column;align-items:flex-start;gap:.3rem}
.caption h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.caption .mono{color:var(--grey)}
.caption .cprice{font-family:var(--display);font-stretch:62%;font-weight:800;font-size:clamp(1.6rem,2.4vw,2rem);line-height:1;color:var(--red)}
@media (prefers-reduced-motion:reduce){.pshot .disc{transition:none}}

/* Home hero: title plus both covers */
.hero{padding-block:clamp(2rem,5vw,4.5rem) clamp(3rem,6vw,5rem);overflow:hidden}
.hero .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5rem);align-items:center}
@media (max-width:980px){.hero .grid{grid-template-columns:1fr}}
.hero .status{color:var(--red);display:block;margin-bottom:1rem}
.hero h1{font-size:clamp(3.8rem,8.6vw,8.8rem);line-height:.86;letter-spacing:-.01em}
.hero h1 .hl{color:var(--red)}
.hero .sub{font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:44ch;margin:1.4rem 0 1.8rem;color:var(--grey)}
.covers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(34px,7vw,96px);padding-right:clamp(40px,8vw,110px)}
.covers .item{min-width:0}
@media (max-width:600px){.hero .ctas .btn{flex:1 1 100%}.covers{padding-right:44px;gap:50px}}

/* ===== Scroll sequence: O-card, case, disc, turn ===== */
.unbox{position:relative;height:460vh;height:460svh;border-top:1px solid var(--ink)}
.unbox .stage{position:sticky;top:calc(env(safe-area-inset-top,0px) + 62px);height:calc(100vh - 62px - env(safe-area-inset-top,0px));height:calc(100svh - 62px - env(safe-area-inset-top,0px));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:clamp(1rem,3vw,3rem);align-items:center;overflow:hidden}
.unbox .copy{display:flex;flex-direction:column;gap:1.1rem;min-width:0;position:relative;z-index:2}
.unbox .copy .mono{color:var(--grey)}
.unbox h2{font-size:clamp(3.2rem,7vw,6.4rem)}
.unbox ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.unbox li{padding:.8rem 0;border-bottom:1px solid var(--rule)}
.unbox li b{color:#6b6b6b;transition:color .8s var(--ease-out)}
.unbox li.on b{color:var(--ink)}
.unbox li b{display:block;font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:1.5rem;line-height:1}
.unbox li span{display:none}
/* the active step's description cross-fades in place: no layout changes while scrolling */
.step-desc{display:grid;min-height:3.3em}
.step-desc p{grid-area:1/1;color:var(--grey);font-size:.98rem;opacity:0;transform:translate3d(0,12px,0);transition:opacity .6s var(--ease-out),transform 1s var(--ease-out);pointer-events:none}
.step-desc p.on{opacity:1;transform:none;transition-delay:.15s}
.unbox .view{position:relative;height:100%;min-width:0}
.unbox canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.6s var(--ease-out)}
.unbox.ready canvas{opacity:1}
.unbox .loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--grey);transition:opacity .4s;pointer-events:none}
.unbox.ready .loading{opacity:0}
.unbox .bar-p{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rule)}
.unbox .bar-p i{display:block;height:100%;width:100%;background:var(--red);transform:scaleX(0);transform-origin:0 50%;will-change:transform}
.unbox .stills{display:none}
@media (max-width:860px){
  .unbox .stage{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-items:stretch;gap:.4rem;padding-top:.8rem}
  .unbox h2{font-size:2.6rem}
  .unbox .copy{gap:.6rem}
  .unbox ol{display:grid;border:0}
  .unbox li{grid-area:1/1;border:0;padding:0;opacity:0;transform:translate3d(0,10px,0);transition:opacity .6s var(--ease-out),transform .9s var(--ease-out);pointer-events:none}
  .unbox li.on{opacity:1;transform:none;pointer-events:auto}
  .unbox li.on b{color:var(--ink)}
  .unbox .copy .ctas .btn{font-size:1.1rem}
}
/* No 3D (reduced motion or no WebGL): show the real packshots instead */
.unbox.static{height:auto}
.unbox.static .stage{position:static;height:auto;padding-block:clamp(2rem,5vw,4rem)}
.unbox.static li b{color:var(--ink)}
.unbox.static li{opacity:1;display:block;border-bottom:1px solid var(--rule);padding:.8rem 0}
.unbox.static li span{display:block;margin-top:.25rem;color:var(--grey);font-size:.98rem}
.unbox.static ol{display:block}
.unbox.static li{grid-area:auto;transform:none;pointer-events:auto}
.unbox.static .step-desc{display:none}
.unbox.static .view{height:auto}
.unbox.static canvas,.unbox.static .loading,.unbox.static .bar-p{display:none}
.unbox.static .stills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:end}
.unbox.static .stills img{width:100%;filter:drop-shadow(10px 16px 16px rgba(0,0,0,.25))}


/* Caption steps are buttons that jump the animation */
.unbox li button{all:unset;display:block;width:100%;cursor:pointer;box-sizing:border-box}
.unbox li button:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.unbox li button:hover b{color:var(--red)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.4rem}
.chips span{font-family:var(--mono);font-size:.82rem;text-transform:uppercase;border:1px solid var(--ink);padding:.25rem .5rem;background:var(--white)}
.chips span.hot{background:var(--red);border-color:var(--red);color:var(--white)}
/* Buy panel on the film pages */
.buy{background:var(--white);border:1px solid var(--rule);border-top:4px solid var(--red);padding:clamp(1.1rem,2.4vw,1.7rem)}
.buy-top{display:flex;align-items:baseline;justify-content:space-between;gap:.4rem 1rem;flex-wrap:wrap;margin-bottom:.4rem}
.price{font-family:var(--display);font-stretch:62%;font-weight:800;font-size:clamp(3.4rem,5.4vw,4.6rem);line-height:.9;letter-spacing:-.01em}
.buy-top .mono{color:var(--grey)}
.deal{color:var(--red);font-weight:700;font-size:1.15rem;margin:.2rem 0 1.1rem}
.deal b{font-size:1.3rem}
.buy .note{margin-top:.9rem}
/* Product gallery */
.gallery{min-width:0}
.g-main{position:relative;background:var(--white);border:1px solid var(--rule);aspect-ratio:1;display:grid;place-items:center;padding:clamp(12px,3vw,28px)}
.g-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:clamp(14px,3vw,30px);box-sizing:border-box;transition:opacity .9s var(--ease-out),transform 1.6s var(--ease-out)}
.g-main img.g-in{opacity:0;transform:scale(1.035)}
.g-main button{z-index:2}
/* Arrows stay hidden until the pointer moves near that side of the picture */
.g-main{overflow:hidden;touch-action:pan-y}
.g-main button{position:absolute;top:50%;width:52px;height:52px;border:0;border-radius:50%;background:var(--ink);color:var(--white);font-size:1.35rem;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s,background .2s;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.g-main button:hover{background:var(--red)}
.g-prev{left:14px;transform:translate(-12px,-50%)}.g-next{right:14px;transform:translate(12px,-50%)}
.g-main.near-prev .g-prev,.g-main.near-next .g-next,.g-main button:focus-visible{opacity:1;pointer-events:auto;transform:translate(0,-50%)}
.g-main img{transition:opacity .2s}
.g-cap{color:var(--grey);margin:.6rem 0}
.g-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.g-thumbs button{background:var(--white);border:1px solid var(--rule);padding:4px;aspect-ratio:1;cursor:pointer;display:grid;place-items:center;transition:border-color .5s var(--ease-out)}
.g-thumbs button:hover{border-color:var(--ink)}
.g-thumbs button[aria-current="true"]{border:2px solid var(--red)}
.g-thumbs img{max-width:100%;max-height:100%;object-fit:contain}

/* Dark press feature */
.dark{background:var(--ink);color:var(--white)}
.press-feature{padding-block:clamp(1.2rem,3vw,2rem) clamp(3rem,6vw,5rem)}
.press-feature .big{font-size:clamp(2.8rem,7.5vw,7rem);color:var(--red-bright);margin:clamp(1.2rem,3vw,2rem) 0 .5rem}
.press-feature .by{color:#d0d0d0;margin-bottom:2rem;display:block}
.press-feature .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
@media (max-width:860px){.press-feature .cols{grid-template-columns:1fr}}
.press-feature p{margin:0 0 1.2rem;color:#e8e8e8;max-width:52ch;font-size:1.08rem}
.mini-quotes{border-top:1px solid #444}
.mini-quotes div{padding:.9rem 0;border-bottom:1px solid #444;display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.mini-quotes q{font-family:var(--display);font-stretch:75%;font-weight:600;font-size:1.35rem;text-transform:uppercase;line-height:1.05;quotes:"\201C" "\201D";max-width:30ch}
.mini-quotes span{color:#d0d0d0}

/* Pages */

/* Film page */
.fhead{padding-block:clamp(2rem,5vw,4rem)}
.fhead .grid{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
@media (max-width:860px){.fhead .grid{grid-template-columns:1fr}}
.crumb{color:var(--grey);margin-bottom:1rem;display:block}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--red)}
.fhead h1{font-size:clamp(4rem,11vw,10rem);line-height:.84}
.fhead .by{font-family:var(--display);font-stretch:75%;font-weight:600;text-transform:uppercase;font-size:clamp(1.3rem,2.2vw,1.8rem);margin:.8rem 0 1.4rem;color:var(--red)}
.fhead .note{color:var(--grey);font-size:.92rem;margin-top:.9rem}
.fbody{padding-block:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--ink)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem)}
@media (max-width:900px){.fgrid{grid-template-columns:1fr}}
.lede{font-family:var(--display);font-stretch:75%;font-weight:700;text-transform:uppercase;font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1;margin:0 0 1.4rem}
.prose p{margin:0 0 1.05rem;max-width:64ch}
.feature-box{background:var(--ink);color:var(--white);padding:clamp(1.4rem,3vw,2rem);margin-top:2rem}
.feature-box .mono{color:#d0d0d0}
.feature-box h2{font-size:clamp(2rem,4vw,3rem);color:var(--red-bright);margin:.4rem 0 .6rem}
.feature-box p{color:#e8e8e8;max-width:60ch}
.specs{width:100%;border-collapse:collapse;margin:0 0 2rem}
.specs th,.specs td{text-align:left;padding:.6rem 0;border-bottom:1px solid var(--rule);vertical-align:top}
.specs tr:first-child th,.specs tr:first-child td{border-top:1px solid var(--ink)}
.specs th{font-family:var(--mono);font-weight:400;text-transform:uppercase;font-size:.85rem;color:var(--grey);width:42%}
.lists h2{font-size:2rem;margin-bottom:.6rem}
.lists ul{list-style:none;margin:0 0 1.8rem;padding:0;border-top:1px solid var(--ink)}
.lists li{padding:.6rem 0;border-bottom:1px solid var(--rule)}
.qsec{padding-block:clamp(1.2rem,3vw,2rem) clamp(3rem,6vw,5rem)}
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1.5rem,4vw,4rem);margin-top:clamp(1rem,2vw,1.6rem)}
@media (max-width:760px){.quotes{grid-template-columns:1fr}}
.quotes figure{margin:0;padding:1.2rem 0;border-bottom:1px solid #444}
.quotes blockquote{margin:0;font-family:var(--display);font-stretch:70%;font-weight:700;text-transform:uppercase;font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1}
.quotes figcaption{margin-top:.6rem;color:var(--red-bright)}
.quotes figure:first-child{grid-column:1/-1}
.quotes figure:first-child blockquote{font-size:clamp(2.4rem,6vw,5rem);color:var(--red-bright)}
.quotes figure:first-child figcaption{color:#d0d0d0}

/* Films page */
.films-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-top:clamp(1rem,2vw,1.6rem)}
@media (max-width:1060px){.films-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.films-grid{grid-template-columns:1fr}}
.fcard{background:var(--white);border:1px solid var(--rule);display:flex;flex-direction:column;min-width:0;transition:border-color .6s var(--ease-out),box-shadow .9s var(--ease-out)}
.fcard:hover{border-color:var(--ink);box-shadow:0 24px 50px rgba(0,0,0,.14)}
.fcard .shot{background:linear-gradient(180deg,#f6f6f6,#e4e4e4);padding:clamp(26px,4vw,46px) 25% clamp(26px,4vw,46px) 12%;border-bottom:1px solid var(--rule);overflow:hidden}
.fcard .info{padding:1.3rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.8rem;flex:1}
.fcard .meta{color:var(--grey)}
.fcard h2{font-size:clamp(2.6rem,4vw,3.6rem)}
.fcard h2 a{text-decoration:none}
.fcard h2 a:hover{color:var(--red)}
.fcard p{color:var(--grey)}
.fcard .chips{margin:0}
.fcard .row{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin-top:auto;padding-top:.8rem;border-top:1px solid var(--rule)}
.fcard .row .price{font-size:2.6rem}
.fcard .row .mono{color:var(--red)}
.fcard .ctas.full .btn{font-size:1.3rem;padding:.8rem .8rem}
.fcard:hover .pshot .disc,.fcard .shot:focus-visible .disc{transform:translate3d(46%,0,0) rotate(720deg);transition-duration:1.9s}
.fcard.soon{background:var(--ink);color:var(--white);border-color:var(--ink);justify-content:space-between;padding:clamp(1.4rem,3vw,2.2rem);min-height:420px}
.fcard.soon .mono{color:#d0d0d0}
.fcard.soon h2{font-size:clamp(3rem,5vw,4.6rem);color:var(--red-bright);margin:.6rem 0 1rem}
.fcard.soon p{color:#e8e8e8;max-width:36ch}
.fcard.soon:hover{box-shadow:none;border-color:var(--ink)}
/* About: label cards */
.lcards{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,18px)}
.lcard{transition:background-color .55s var(--ease-out),border-color .55s var(--ease-out),color .55s var(--ease-out);background:var(--white);border:1px solid var(--rule);padding:clamp(1.2rem,2.4vw,1.6rem);display:flex;flex-direction:column;gap:.5rem;text-decoration:none}
.lcard.us{border-top:4px solid var(--red)}
.lcard .mono{color:var(--grey)}
.lcard h2{font-size:clamp(2.2rem,3.4vw,2.8rem)}
.lcard p{color:var(--grey)}
.lcard .go{font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:1.3rem;color:var(--red);margin-top:.3rem}
a.lcard:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
a.lcard:hover p,a.lcard:hover .mono{color:#d0d0d0}
a.lcard:hover .go{color:var(--red-bright)}

/* Inner pages */
.wrap.block{padding-bottom:clamp(3rem,6vw,5rem)}
.ihead{padding-block:clamp(2.5rem,6vw,5rem) 0}
.ihead h1{font-size:clamp(3.6rem,11vw,10rem)}
.ihead p{max-width:56ch;font-size:1.15rem;color:var(--grey);margin:1rem 0 0}
.wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(1rem,2vw,1.6rem)}
@media (max-width:960px){.wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.wall{grid-template-columns:1fr}}
.qcard{background:var(--white);border:1px solid var(--rule);padding:1.4rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.2rem;min-height:220px}
.qcard blockquote{margin:0;font-family:var(--display);font-stretch:70%;font-weight:700;text-transform:uppercase;font-size:1.7rem;line-height:1}
.qcard footer{display:flex;justify-content:space-between;align-items:flex-end;gap:.5rem;flex-wrap:wrap}
.qcard footer b{font-weight:600}
.qcard footer .mono{color:var(--grey)}
.qcard footer a{color:var(--red);font-weight:600}
.mvd{background:var(--red);color:var(--white);padding:clamp(1.4rem,3vw,2.4rem);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.5rem;align-items:center;margin-top:clamp(1rem,2vw,1.6rem)}
@media (max-width:820px){.mvd{grid-template-columns:1fr}}
.mvd h2{font-size:clamp(2.4rem,5vw,4.2rem)}
.mvd p{margin:.6rem 0 0;max-width:48ch}
.mvd .ctas{flex-direction:column}
.mvd .btn{background:var(--white);color:var(--ink);border-color:var(--white);justify-content:space-between}
.mvd .btn{--fill:var(--ink);--fill-ink:var(--white)}
.stores{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:clamp(10px,1.5vw,16px);margin-top:clamp(1rem,2vw,1.6rem)}
.store{transition:background-color .55s var(--ease-out),border-color .55s var(--ease-out),color .55s var(--ease-out);background:var(--white);border:1px solid var(--rule);padding:1.1rem 1.2rem;text-decoration:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:84px}
.store b{display:block;font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:1.7rem;line-height:1;margin-bottom:.25rem}
.store span.mono{color:var(--grey);transition:color .55s var(--ease-out)}
.store .arr{font-size:1.4rem;color:var(--red)}
a.store:hover{border-color:var(--ink);background:var(--ink);color:var(--white)}
a.store:hover span.mono{color:#d0d0d0}
a.store:hover .arr{color:var(--red-bright)}
.closing{font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:clamp(1.8rem,4vw,3rem);margin:2rem 0 0;color:var(--red)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);margin-top:clamp(1.5rem,3vw,2.5rem)}
@media (max-width:900px){.two{grid-template-columns:1fr}}
.timeline{border-top:1px solid var(--ink)}
.timeline div{padding:1rem 0;border-bottom:1px solid var(--rule)}
.timeline b{display:block;font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:1.8rem;line-height:1;margin-bottom:.3rem}
.timeline p{color:var(--grey)}
.faq{max-width:920px;margin-top:clamp(1rem,2vw,1.6rem)}
details{border-bottom:1px solid var(--rule)}
details:first-of-type{border-top:1px solid var(--ink)}
summary{list-style:none;cursor:pointer;padding:1.1rem 2.5rem 1.1rem 0;font-family:var(--display);font-stretch:70%;font-weight:700;text-transform:uppercase;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.05;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.8rem;color:var(--red);transition:transform .7s var(--ease-out)}
details[open] summary::after{transform:translateY(-50%) rotate(135deg)}
details .a{padding:0 0 1.2rem;max-width:70ch;overflow:hidden}
details .a p{margin:0 0 .7rem}
.ccards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(1rem,2vw,1.6rem)}
@media (max-width:900px){.ccards{grid-template-columns:1fr}}
.ccard{background:var(--white);border:1px solid var(--rule);padding:1.4rem;display:flex;flex-direction:column;gap:.8rem}
.ccard h3{font-size:2rem}
.ccard p{color:var(--grey)}
.copyrow{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:auto}
.copyrow code{font-family:var(--body);font-weight:600;background:var(--paper);border:1px solid var(--rule);padding:.5rem .65rem;user-select:all;word-break:break-all}
.copyrow button{font-family:var(--mono);text-transform:uppercase;font-size:.85rem;background:var(--ink);color:var(--white);border:0;padding:.6rem .8rem;cursor:pointer}
.copyrow button:hover{background:var(--red)}
.legal{max-width:780px;margin-top:clamp(1rem,2vw,1.6rem)}
.legal p{margin:0 0 1rem}
.legal h2{font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:2rem;margin:2.2rem 0 .6rem}
.legal ul{padding-left:1.2rem}
.legal .mono{color:var(--grey)}

/* Contact */
.mailbox{background:var(--ink);color:var(--white);border-top:4px solid var(--red);padding:clamp(1.6rem,4vw,3rem);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(1.4rem,4vw,3rem);align-items:end;margin-top:clamp(1rem,2vw,1.6rem)}
@media (max-width:820px){.mailbox{grid-template-columns:1fr}}
.mailbox .mono{color:#d0d0d0}
.mailbox h2{font-size:clamp(3rem,7vw,6rem);color:var(--red-bright);margin:.5rem 0 .8rem}
.mailbox p{color:#e8e8e8;max-width:44ch}
.mail-actions{display:flex;flex-direction:column;gap:.8rem}
.mail-actions .btn{width:100%;padding:1rem;font-size:1.7rem}
.mail-actions .copyrow{margin:0}
.mail-actions .copyrow code{flex:1 1 230px;word-break:normal;overflow-wrap:anywhere;background:#2c2c2c;border-color:#444;color:var(--white)}
.mail-actions .copyrow button{background:var(--white);color:var(--ink)}
.mail-actions .copyrow button:hover{background:var(--red);color:var(--white)}
.mail-note{color:var(--grey);margin-top:1.2rem;max-width:70ch}
.mail-note a{color:var(--red);font-weight:600}

/* Newsletter pop-up */
.nl{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px}
.nl[hidden]{display:none}
.nl-back{position:absolute;inset:0;background:rgba(18,18,18,.7);opacity:0;transition:opacity .8s var(--ease-out)}
.nl.in .nl-back{opacity:1}
.nl-box{position:relative;width:min(880px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--white);border-top:5px solid var(--red);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);transform:translate3d(0,44px,0) scale(.985);opacity:0;transition:transform 1.1s var(--ease-out),opacity .7s var(--ease-out);box-shadow:0 30px 80px rgba(0,0,0,.4)}
.nl:not(.in) .nl-box,.nl:not(.in) .nl-back{transition-duration:.45s}
.nl.in .nl-box{transform:none;opacity:1}
.nl-art{background:var(--ink);display:flex;align-items:center;justify-content:center;padding:40px 20px;overflow:hidden}
.nl-art img{width:58%;filter:drop-shadow(10px 18px 20px rgba(0,0,0,.5))}
.nl-art img:first-child{transform:rotate(-6deg) translate(6%,-5%)}
.nl-art img:last-child{transform:rotate(5deg) translate(-6%,7%);position:relative;z-index:1}
.nl-body{padding:clamp(1.5rem,3.2vw,2.4rem)}
.nl-body .mono{color:var(--red)}
.nl-body h2{font-size:clamp(3rem,6vw,4.8rem);margin:.4rem 0 .7rem}
.nl-body > p{color:var(--grey);margin-bottom:1.2rem;max-width:40ch}
.nl label,.nl-body label.mono{display:block;color:var(--ink)}
.nl label span{text-transform:none;font-family:var(--body);font-size:.85rem}
.nl input[type=email],.nl input[type=text]{display:block;width:100%;font:inherit;font-size:1.05rem;padding:.8rem .85rem;border:1px solid var(--ink);border-radius:0;background:var(--white);color:var(--ink);margin:.3rem 0 .9rem}
.nl input:focus-visible{outline:2px solid var(--red);outline-offset:1px}
.nl form .btn{width:100%;padding:1rem;font-size:1.6rem}
.nl form .btn[disabled]{opacity:.6;cursor:progress}
.nl-x{position:absolute;top:6px;right:6px;z-index:2;width:44px;height:44px;border:0;background:transparent;color:var(--ink);font-size:2rem;line-height:1;cursor:pointer}
.nl-x:hover{color:var(--red)}
.nl .hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.nl-msg{margin-top:.8rem;font-weight:600;min-height:1.3em}
.nl-msg.ok{color:#0b6b2c}.nl-msg.err{color:var(--red)}
.nl-small{font-size:.85rem;color:var(--grey);margin-top:.7rem}
.nl-small a{color:var(--ink)}
.nl-done h3{font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:2.4rem;line-height:1;margin:.4rem 0 .6rem}
@media (max-width:720px){
  .nl{place-items:end center;padding:0}
  .nl-box{grid-template-columns:1fr;max-height:92dvh;transform:translateY(100%)}
  .nl-art{display:none}
  .nl-body{padding:1.4rem max(20px,env(safe-area-inset-left,0px)) calc(1.4rem + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.nl-box,.nl-back{transition:none}}
footer.site ul button{all:unset;cursor:pointer;font-family:var(--mono);text-transform:uppercase;font-size:.88rem}
footer.site ul button:hover,footer.site ul button:focus-visible{text-decoration:underline}

/* ===== Motion system ===== */
/* Lenis smooth scrolling */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
/* Content rises gently into place as it comes on screen */
.js .rv{opacity:0;transform:translate3d(0,34px,0);transition:opacity 1.3s var(--ease-out),transform 1.8s var(--ease-out);transition-delay:var(--rd,0s)}
.js .rv.in{opacity:1;transform:none}
.js .rv-push{opacity:0;transform:translate3d(0,26px,0) scale(1.05);transition:opacity 1.6s var(--ease-out),transform 2.6s var(--ease-out);transition-delay:var(--rd,0s)}
.js .rv-push.in{opacity:1;transform:none}
/* Big titles: each word rises out of its own slot */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em .02em;margin:-.12em -.02em}
.w>span{display:inline-block;transform:translate3d(0,112%,0);transition:transform 1.6s var(--ease-out);transition-delay:var(--wd,0s)}
.words-in .w>span{transform:none}
/* Opening titles: the screen opens like a widescreen frame, holds, then expands to full height */
.intro{display:none}
.js.intro-on .intro{display:block;position:fixed;inset:0;z-index:300;pointer-events:none}
.intro i{position:absolute;left:0;right:0;height:50.2%;background:var(--ink);animation:intro-bar 2.3s var(--ease-inout) .2s both}
.intro i:first-child{top:0;transform-origin:50% 0}
.intro i:last-child{bottom:0;transform-origin:50% 100%}
@keyframes intro-bar{0%{transform:scaleY(1)}42%{transform:scaleY(.34)}62%{transform:scaleY(.34)}100%{transform:scaleY(0)}}
/* Page changes cross-fade with a slight settle */
@view-transition{navigation:auto}
header.site{view-transition-name:site-header}
::view-transition-old(root){animation:vt-out .55s var(--ease-inout) both}
::view-transition-new(root){animation:vt-in 1s var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:scale(.988)}}
@keyframes vt-in{from{opacity:0;transform:scale(1.012)}}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv-push{opacity:1;transform:none;transition:none}
  .w>span{transform:none;transition:none}
  .intro{display:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .btn::before,.g-main img,.step-desc p,.unbox li{transition:none}
}

/* Footer */
footer.site{background:var(--red);color:var(--white)}
footer.site .top{padding-block:1.6rem;border-bottom:1px solid rgba(255,255,255,.5)}
footer.site .top p{font-size:1.15rem;max-width:80ch}
footer.site .cta-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-block:1.3rem;border-bottom:1px solid rgba(255,255,255,.5)}
footer.site .cta-row a{font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:clamp(2rem,4vw,3rem);text-decoration:none;line-height:1}
footer.site .cta-row a:hover{color:var(--ink)}
footer.site .links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;padding-block:1.4rem}
@media (max-width:700px){footer.site .links{grid-template-columns:repeat(2,minmax(0,1fr))}}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
footer.site ul a{font-family:var(--mono);text-transform:uppercase;font-size:.88rem;text-decoration:none}
footer.site ul a:hover{text-decoration:underline}
footer.site .base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem 2rem;padding-block:1rem 1.6rem;border-top:1px solid rgba(255,255,255,.5)}

@media (prefers-reduced-motion:reduce){.product .tilt,.product .disc{transition:none}}