/* ===== Crèer v2 — Lando-inspired layer on top of style.css ===== */
/* fonts: see Round 2 block below */
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}
/* intro: exists only with JS; CSS failsafe hides it after 4s even if JS dies */
#intro{display:none}
.js #intro{display:grid;place-items:center;position:fixed;inset:0;z-index:100;background:#000;animation:introFailsafe .5s 6.6s forwards;cursor:pointer}
#intro picture{position:relative;width:min(60vmin,520px);aspect-ratio:1}
#intro img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#intro .il{opacity:0}#intro.light{background:#fff}#intro.light .il{opacity:1}#intro.light .id{opacity:0}
#intro .skip{position:absolute;bottom:28px;font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:#777}
#intro.done{display:none}#intro.fade{transition:opacity .6s;opacity:0}
@keyframes introFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
/* colour wipe */
#wipe{position:fixed;inset:0;z-index:110;display:flex;pointer-events:none}
#wipe i{flex:1;transform:translateY(101%)}
#wipe i:nth-child(1){background:var(--y)}#wipe i:nth-child(2){background:var(--o)}#wipe i:nth-child(3){background:var(--r)}#wipe i:nth-child(4){background:var(--p)}#wipe i:nth-child(5){background:var(--v)}
#wipe.cover i{transform:translateY(0)}
/* hero */
.v2hero{background:#000;color:#fff;height:100svh;min-height:560px;display:flex;align-items:flex-end;padding:0}.v2hero .hero-in,.v2hero h1,.v2hero .tagline{color:#fff}
.v2hero .hz{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:grayscale(1);will-change:transform}
.v2hero:after{z-index:2;pointer-events:none}.v2hero .hero-in{z-index:3}
.big{font-family:var(--grot)!important;font-weight:900!important;letter-spacing:-.04em!important;font-size:clamp(4.5rem,17vw,16rem)!important;line-height:.85!important;text-transform:uppercase}
.scrollcue{position:absolute;right:clamp(20px,4vw,56px);bottom:32px;z-index:3;font-size:.65rem;letter-spacing:.35em;text-transform:uppercase;opacity:.7}
/* split reveal */
.split .ln{display:block;overflow:hidden;padding-bottom:.06em}.split .ln>span{display:inline-block}
/* statement */
.statement p{font-family:var(--grot);font-weight:800;font-size:clamp(2rem,6vw,5.4rem);line-height:1;letter-spacing:-.03em;max-width:18ch;text-transform:uppercase}
.statement .edit{font-size:.8rem;letter-spacing:.1em}
/* C section pinned stepper */
.enh .original .cgrid{display:block;position:relative;height:min(70vh,80vw);aspect-ratio:auto}
.enh .original .cgrid img{position:absolute;left:50%;top:0;height:100%;width:auto;aspect-ratio:1;transform:translateX(-50%);opacity:0;object-fit:contain}
.enh .original .cgrid img.on{opacity:1}
.cnum{font-weight:600}
/* CTA */
.cta{text-align:left;border-top:1px solid #2a2a2a}
.ctal{display:inline-block;font-family:var(--grot);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;font-size:clamp(3rem,11vw,10rem);line-height:.9;text-decoration:none;margin:18px 0 28px}
.ctal .cbar{font-size:inherit;transform-origin:left;transform:scaleX(.25);transition:transform .5s cubic-bezier(.7,0,.2,1)}.ctal:hover .cbar{transform:scaleX(1)}
/* cursor (desktop fine pointers only) */
#cur{display:none}
@media (hover:hover) and (pointer:fine){.enh #cur{display:grid;place-items:center;position:fixed;left:0;top:0;z-index:90;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:#fff;color:#000;font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;pointer-events:none;transform:scale(0);transition:transform .25s}
 .enh #cur.on{transform:scale(1)}.enh [data-full]{cursor:none}}
@media (prefers-reduced-motion:reduce){#wipe{display:none}}
.v2hero .hero-in{padding:0 clamp(20px,6vw,96px) clamp(48px,9vh,110px)}
.big .ln{padding-top:.18em;margin-top:-.18em}
/* ===== Round 2: one family, AA-style Helvetica ===== */
@font-face{font-family:'Heros Web';src:url(fonts/heros-regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Heros Web';src:url(fonts/heros-bold.woff2) format('woff2');font-weight:700 900;font-display:swap}
:root{--hel:"Helvetica Neue",Helvetica,"Heros Web",Arial,sans-serif;--serif:var(--hel);--sans:var(--hel);--grot:var(--hel);--wh:#fff;--bk:#000;--pad:clamp(20px,5vw,72px)}
html,body,button,input,textarea,select{font-family:var(--hel)!important}
body{background:#000;color:#fff;font-weight:400;font-size:16px;line-height:1.5;letter-spacing:0}
h1,h2,h3,.big,.statement p,.ctal{font-family:var(--hel)!important;font-weight:700!important;text-transform:uppercase;letter-spacing:-.02em!important;font-style:normal!important}
h2{font-size:clamp(1.6rem,3.6vw,3rem)!important;line-height:.95}
.big{font-size:clamp(4rem,14vw,13rem)!important;line-height:.82!important;margin:.1em 0 .25em!important}
.tagline{font-family:var(--hel)!important;font-style:normal!important;font-size:clamp(.95rem,1.3vw,1.15rem)!important;line-height:1.45;max-width:34ch;color:#ddd}
.meta,.eyebrow,.btn,footer,.skip,.scrollcue,figcaption,label{font-family:var(--hel)!important;font-weight:700!important;font-size:.68rem!important;letter-spacing:.12em!important;text-transform:uppercase}
section{padding:clamp(80px,10vw,140px) var(--pad)}
.sec-head{border-color:#222!important}
/* nav: black, minimal */
header.top{inset:5px 0 auto!important;background:rgba(0,0,0,.72)!important;color:#fff!important;border-bottom:1px solid rgba(255,255,255,.08)!important;padding:12px var(--pad)!important;backdrop-filter:blur(10px)}
.brand{font-family:var(--hel)!important;font-weight:700;letter-spacing:-.01em!important;font-size:.95rem!important;text-transform:uppercase}
.brand img{width:30px!important;height:30px!important}
header.top .btn{background:#fff!important;color:#000!important;border:0!important;padding:9px 16px!important}
header.top .btn:hover{background:#000!important;color:#fff!important;box-shadow:inset 0 0 0 1px #fff}
.btn{border-color:#fff}
/* intro: equal-strength frames */
#intro{transition:none}#intro.light{background:#fff}
#intro .if{opacity:0}#intro.film .if{opacity:1}#intro.film .id,#intro.film .il{opacity:0}
#intro picture{width:min(64vmin,560px)}
#intro .skip{color:#888;mix-blend-mode:difference}
/* hero face */
.v2hero .face{filter:none!important;object-position:50% 28%}
.v2hero:after{background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.75))!important}
.v2hero .hero-in{padding:0 var(--pad) clamp(36px,6vh,72px)!important;max-width:none}
.v2hero .cbar{width:min(42vw,520px)!important;height:8px!important;margin:0 0 18px!important}
.eyebrow{opacity:.9;margin-bottom:4px}
/* statement */
.statement p{font-size:clamp(2rem,5.4vw,5rem)!important;line-height:.95;max-width:16ch}
/* gallery */
#work figcaption{color:#aaa}
/* C section full-bleed black */
.original{background:#000!important;color:#fff!important}.original .meta{color:#999!important}
.enh .original{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.enh .original .cgrid{height:75vh!important;max-height:80vw}
.original .cgrid img{box-shadow:none!important;border-radius:0}
.enh .original .cgrid img:hover{transform:translateX(-50%)!important}
/* CTA + footer */
.ctal{font-size:clamp(3rem,10vw,9rem)!important;line-height:.85}
footer{color:#777!important;border-color:#1a1a1a!important}
/* contact page tidy */
.contact h2{text-transform:uppercase}.contact .tagline{color:#bbb!important}
input,textarea{border-radius:0}
@media (max-width:700px){
 .big{font-size:clamp(3.4rem,19vw,6rem)!important}
 .v2hero .face{object-position:52% 30%}
 .v2hero .cbar{width:60vw!important}
 .scrollcue{display:none}
 .brand span{display:inline!important}
}

/* Round 3: hero type — smaller wordmark, sub-block shifted toward centre */
.big{font-size:clamp(3.6rem,11.5vw,10.5rem)!important}
.v2hero .sub{margin-left:clamp(0px,30vw,520px);max-width:420px}
.v2hero .sub .cbar{width:100%!important}
@media (max-width:700px){.big{font-size:clamp(3rem,16vw,5rem)!important}.v2hero .sub{margin-left:14vw;max-width:none}.v2hero .sub .cbar{width:100%!important}}
/* Round 4 — desktop: text block in the black space top-left, inside the sprockets */
@media (min-width:901px){
 .v2hero .hero-in{position:absolute;left:14.5vw;top:clamp(84px,15vh,170px);bottom:auto;width:19vw;padding:0!important}
 .v2hero .big{font-size:5.4vw!important;margin:.08em 0 .22em!important}
 .v2hero .sub{margin-left:0;max-width:none}
 .v2hero .sub .cbar{width:100%!important;height:6px!important;margin:0 0 14px!important}
 .v2hero .tagline{font-size:clamp(.8rem,1.05vw,1.05rem)!important;max-width:none}
 .v2hero .eyebrow{white-space:nowrap}
}
/* Round 4 — mobile: movie-caption boxes behind each line */
@media (max-width:900px){
 .v2hero .cap,.v2hero .split .ln>span{background:rgba(0,0,0,.92);padding:0 .28em;-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:0}
 .v2hero .cap{padding:.25em .5em;opacity:1}.v2hero .eyebrow{opacity:1}
 .v2hero .big .ln>span{padding:.04em .12em 0}
 .v2hero .tagline .ln>span{padding:.08em .35em}
 .v2hero .tagline .ln{padding-bottom:0}
}

/* brighter hero label */
.v2hero .eyebrow,.v2hero .eyebrow .cap{color:#d6d6d6!important;opacity:1!important}
/* ===== v3 common ===== */
.v2hero{background:#000}
.v2hero .grain{position:absolute;inset:-50%;z-index:2;pointer-events:none;background:url(img/grain.png) 0 0/256px;opacity:.28;mix-blend-mode:overlay}
.js:not(.rm) .v2hero .grain{animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.v2hero:after{display:none}
/* mobile: caption box only on tagline, IG-style stripe on the left */
@media (max-width:900px){
 .v2hero .cap,.v2hero .big .ln>span{background:none!important;padding:0!important}
 .v2hero .tagline .ln>span{background:#000 linear-gradient(180deg,var(--y) 0 20%,var(--o) 20% 40%,var(--r) 40% 60%,var(--p) 60% 80%,var(--v) 80%) left top/5px 100% no-repeat!important;padding:.22em .6em .22em calc(5px + .55em)!important;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:#fff}
 .v2hero .tagline{text-shadow:none}
}
/* statement now a real line */
.statement p{max-width:22ch;text-transform:none!important;letter-spacing:-.03em!important}
/* BEHIND THE LENS */
.behind{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(24px,4vw,80px);background:#000;min-height:100vh;padding-top:5vh;padding-bottom:5vh}
.behind h2{font-size:clamp(3rem,8vw,12rem)!important;line-height:.85;margin:14px 0 22px;letter-spacing:-.02em}
.behind .cbar{width:min(32vw,420px)!important;height:8px!important;margin:0 0 18px!important}
.behind .tagline{color:#bbb}
.bl-frame{height:88vh;width:auto;max-width:48vw;aspect-ratio:9/16;overflow:hidden;background:#111;position:relative}
.bl-frame video{width:100%;height:100%;object-fit:cover;display:block;will-change:transform}
@media (max-width:900px){.behind{grid-template-columns:1fr;gap:28px;padding-left:0;padding-right:0}.behind .bl-txt{padding:0 var(--pad)}
 .bl-frame{height:auto;width:100%;max-width:none;aspect-ratio:9/16;max-height:none;margin:0 auto}}
/* ===== SKULL variant ===== */
.v2hero .stage{position:absolute;inset:0;z-index:1;display:flex;align-items:flex-start;justify-content:center;padding:clamp(64px,10vh,120px) 0 0}
/* r3: sticker sized by min(height, width); overrides the generic .hz cover rule (absolute/inset/100%) that it used to inherit */
.v2hero .hz.sticker{position:relative;inset:auto;flex:none;width:min(calc(92svh * 1118 / 1391), 42vw);height:auto;aspect-ratio:1118/1391;transform-origin:50% 40%;will-change:auto}
.v2hero .skull{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(0,0,0,.65)) drop-shadow(0 0 1px rgba(255,255,255,.25));transform-origin:50% 70%}
.js .v2hero .skull{animation:drop .95s cubic-bezier(.2,.9,.25,1.15) 7s both,float 7s ease-in-out 8s infinite}
.ready .v2hero .skull{animation:drop .95s cubic-bezier(.2,.9,.25,1.15) both,float 7s ease-in-out 1s infinite}
@keyframes drop{0%{opacity:0;transform:translateY(-6%) scale(1.12) rotate(-6deg)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.2%) rotate(.8deg)}}
/* film-strip sprockets (CSS: gradient masked by tiled rounded rects) */
.strip{position:absolute;top:0;bottom:0;z-index:2;width:50px;pointer-events:none;
 background:linear-gradient(180deg,#FED800,#FF6A01 28%,#FE0000 52%,#FF0B62 76%,#7A00B4);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='80'%3E%3Crect x='0' y='24' width='50' height='32' rx='7' fill='%23000'/%3E%3C/svg%3E") 0 0/50px 80px repeat-y;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='80'%3E%3Crect x='0' y='24' width='50' height='32' rx='7' fill='%23000'/%3E%3C/svg%3E") 0 0/50px 80px repeat-y;opacity:.92}
.strip.l{left:4.6vw}.strip.r{right:4.6vw}
.edge{position:absolute;top:0;bottom:0;z-index:2;width:10px;pointer-events:none;opacity:.35;
 background:repeating-linear-gradient(180deg,#FF6A01 0 2px,transparent 2px 9px,#FF6A01 9px 11px,transparent 11px 160px)}
.edge.l{left:calc(4.6vw - 22px)}.edge.r{right:calc(4.6vw - 22px)}
.js .strip{animation:run 24s linear infinite}.js .edge{animation:run2 24s linear infinite}
@keyframes run{to{-webkit-mask-position:0 800px;mask-position:0 800px}}
@keyframes run2{to{background-position:0 1600px}}
.v2hero .hero-in{z-index:3}
@media (max-width:900px){
 .v2hero .stage{align-items:flex-start;justify-content:center;padding:84px 0 0}
 .v2hero .hz.sticker{width:min(72vw,calc(56svh * 1118 / 1391))}
 .strip{width:16px;-webkit-mask-size:16px 34px;mask-size:16px 34px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='34'%3E%3Crect x='0' y='10' width='16' height='14' rx='3' fill='%23000'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='34'%3E%3Crect x='0' y='10' width='16' height='14' rx='3' fill='%23000'/%3E%3C/svg%3E")}
 .strip.l{left:6px}.strip.r{right:6px}.edge{display:none}
 .v2hero .hero-in{padding-left:calc(var(--pad) + 14px)!important}
 @keyframes run{to{-webkit-mask-position:0 340px;mask-position:0 340px}}
}
@media (prefers-reduced-motion:reduce){.strip,.edge,.v2hero .skull,.v2hero .grain{animation:none!important}}
/* Mazzy direction: same layout as v2 portrait — skull big, centred, cropped at bottom; no float */
.js .v2hero .skull{animation:fadein .8s ease 7s both}.ready .v2hero .skull{animation:fadein .8s ease both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.v2hero .skull{filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}
.bl-h{max-width:7em}
.v2hero .sticker.hz,.v2hero .poster.hz{filter:none!important}
.bl-frame video{transform-origin:32% 42%;object-position:32% 50%}

/* r5: statement centred */
.statement{text-align:center}
.statement p{margin-left:auto!important;margin-right:auto!important;text-align:center}
/* r5: Behind the Lens — explicit frame size so Chrome never resolves the auto column to min-content */
@media (min-width:901px){
 .behind{grid-template-columns:minmax(0,1fr) min(48vw,calc(88vh * 9 / 16));max-width:none;width:100%}
 .bl-frame{width:min(48vw,calc(88vh * 9 / 16));height:auto;max-width:none;aspect-ratio:9/16;justify-self:end}
}
/* r6: tagline centred under the colour bar */
.v2hero .sub .tagline{text-align:center;max-width:none;margin-left:auto;margin-right:auto}
/* r6: statement on two lines (desktop) */
@media (min-width:901px){.statement p{max-width:none!important;width:max-content;max-width:94vw!important;font-size:clamp(1.6rem,3.6vw,4.2rem)!important;text-wrap:balance}}
.statement p{text-wrap:balance}
/* r7: hero wordmark — Archivo Condensed Black (OFL, self-hosted static wdth75/wght900 instance) */
@font-face{font-family:'Archivo Cond';src:url(fonts/archivo-condensed-black.woff2) format('woff2');font-weight:900;font-style:normal;font-display:swap}
.v2hero h1.big{font-family:'Archivo Cond','Heros Web',Helvetica,Arial,sans-serif!important;font-weight:900!important;text-transform:none!important;letter-spacing:-.025em!important;line-height:.95!important}
.v2hero h1.big .ln{padding-top:.08em}
.v2hero .hero-in{width:max-content!important}
@media (min-width:1101px){.v2hero h1.big{font-size:6vw!important}}
@media (max-width:900px){.v2hero .sub{margin-left:0!important;max-width:none}.v2hero h1.big{font-size:clamp(3.4rem,19vw,6rem)!important}}
/* r7: SUMMERCOLLECTION '25 — COLLECTION '25 filled with the brand strip */
.sec-head .sc-w{color:#fff}
.sec-head .sc-g{background:linear-gradient(90deg,#FED800,#FF6A01 25%,#FE0000 50%,#FF0B62 75%,#7A00B4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-right:.04em}

/* r8: light glint across the sunglasses — masked to the lenses, screen-blended */
.v2hero .glint{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;mix-blend-mode:screen;
 -webkit-mask:url(img/glasses-mask.png?v=r31) 0 0/100% 100% no-repeat;mask:url(img/glasses-mask.png?v=r31) 0 0/100% 100% no-repeat}
.v2hero .glint::before{content:"";position:absolute;top:-10%;bottom:-10%;left:8%;width:15%;opacity:0;
 background:linear-gradient(90deg,transparent 0,rgba(255,255,255,0) 18%,rgba(255,255,255,.62) 46%,rgba(255,255,255,.62) 50%,rgba(255,255,255,0) 72%,transparent 78%,rgba(255,255,255,.4) 86%,transparent 90%);
 transform:translateX(-60%) skewX(-20deg)}
.ready:not(.rm) .v2hero .glint::before{animation:glint 5.6s 1.6s infinite}
@keyframes glint{0%{opacity:0;transform:translateX(-60%) skewX(-20deg);animation-timing-function:cubic-bezier(.45,0,.3,1)}
 3%{opacity:1}17%{opacity:1}
 20%{opacity:0;transform:translateX(540%) skewX(-20deg)}100%{opacity:0;transform:translateX(540%) skewX(-20deg)}}
@media (prefers-reduced-motion:reduce){.v2hero .glint{display:none}}
/* r9 mobile: keep the skull clear of the wordmark block; drop the tagline's colour stripe */
@media (max-width:900px){
 .v2hero .hz.sticker{width:min(72vw,calc((100svh - 330px) * 1118 / 1391))}
 .v2hero .tagline .ln>span{background:#000!important;padding:.22em .6em!important}
}
/* r11 mobile: centre wordmark, colour bar and tagline */
@media (max-width:900px){
 .v2hero{justify-content:center!important}
 .v2hero .hero-in{margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important;left:auto!important;right:auto!important;text-align:center}
 .v2hero h1.big{text-align:center}
}
/* r14: small gap between SUMMER and COLLECTION */
.sec-head .sc-g{margin-left:.22em}
/* r14 mobile: statement on two lines, Behind the Lens on one line */
@media (max-width:900px){
 .statement p{max-width:none!important;width:min-content;font-size:19.5vw!important;line-height:.88}
 .behind h2.bl-h{max-width:none;white-space:nowrap;font-size:9.8vw!important}
}

/* r15: "Motion. / Picture." stacked, big */
@media (min-width:901px){.statement p{width:min-content!important;max-width:none!important;font-size:clamp(5rem,11vw,12rem)!important;line-height:.86!important;text-wrap:wrap}}
.statement p{text-transform:uppercase!important;letter-spacing:-.04em!important}
.behind .bl-bio{margin-top:18px;color:#888;letter-spacing:.08em}
/* ===== Round 3: Geist + Geist Mono (OFL, self-hosted; A24 / PP Neue Montreal feel) ===== */
@font-face{font-family:'Geist';src:url(fonts/geist-latin-var.woff2) format('woff2-variations'),url(fonts/geist-latin-var.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(fonts/geist-mono-latin-var.woff2) format('woff2-variations'),url(fonts/geist-mono-latin-var.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{--hel:'Geist',"Helvetica Neue",Helvetica,Arial,sans-serif;--mono:'Geist Mono',ui-monospace,Menlo,monospace}
.meta,.eyebrow,footer,.scrollcue,figcaption,label,.bl-bio,.statement .edit,.cnum{font-family:var(--mono)!important;font-weight:500!important;letter-spacing:.06em!important}
/* intro untouched: keep its original face */
#intro,#intro *{font-family:"Helvetica Neue",Helvetica,"Heros Web",Arial,sans-serif!important}
/* r18: mobile hero, keep the wordmark below the skull in normal flow (never overlaps) */
@media (max-width:900px){
 .v2hero{flex-direction:column!important;justify-content:space-between!important;align-items:stretch!important;height:auto!important;min-height:max(100svh,560px)!important}
 .v2hero .stage{position:relative;inset:auto;flex:none}
 .v2hero .hero-in{position:relative;margin-top:clamp(22px,4svh,40px)}
}

/* r25: signature under the bio line */
.behind .bl-sig{display:block;width:102px;height:auto;margin:20px 0 0;opacity:.88;-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none;pointer-events:none}
@media (min-width:900px){.behind .bl-sig{width:160px;margin-top:22px}}
.js .behind .bl-sig{opacity:0;transform:translateY(8px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.js .behind .bl-sig.on{opacity:.88;transform:none}
@media (prefers-reduced-motion:reduce){.js .behind .bl-sig{opacity:.88;transform:none;transition:none}}

/* r27: signature draws itself (mask reveal along the pen path); static by default */
.behind .bl-sig{aspect-ratio:560/751;overflow:visible}
.js .behind .bl-sig{opacity:.88!important;transform:none!important;transition:none!important}
.behind .bl-sig .s{stroke-dasharray:1 2;stroke-dashoffset:0}
.behind .bl-sig.pre .s{stroke-dashoffset:1.02}
.behind .bl-sig.go .s{stroke-dashoffset:0;animation:none}
.behind .bl-sig.go .s1{transition:stroke-dashoffset 1.75s cubic-bezier(.3,.1,.7,.95) 0s}
.behind .bl-sig.go .s2{transition:stroke-dashoffset .3s cubic-bezier(.3,.1,.7,.95) 1.85s}
.behind .bl-sig.go .s3{transition:stroke-dashoffset .13s cubic-bezier(.3,.1,.7,.95) 2.25s}
@media (prefers-reduced-motion:reduce){.behind .bl-sig .s{stroke-dashoffset:0!important;transition:none!important}}

/* r29: no scrolling underneath the intro */
html.intro-lock,html.intro-lock body{overflow:hidden;overscroll-behavior:none}
#intro{touch-action:none;overscroll-behavior:none}

/* r31: reduced-motion intro = soft opacity cross-fades between the same frames (no flips, no wipe, no movement) */
@media (prefers-reduced-motion:reduce){#intro{transition:background-color .38s ease}#intro img{transition:opacity .38s ease}}