:root{
    --paper:#efe9dd;
    --paper-2:#e5ddcc;
    --ink:#221e19;
    --ink-soft:#4a453d;
    --locker:#5c7050;
    --locker-dark:#3f4f37;
    --kraft:#c69a63;
    --kraft-dark:#9c7947;
    --red:#b2402b;
    --cream:#f6f1e6;
    --line: rgba(34,30,25,0.14);
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Oswald', sans-serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--red); color:var(--cream);}

  .mono{
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:0.04em;
  }

  /* ---------- NAV ---------- */
  nav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:50;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 40px;
    mix-blend-mode:normal;
  }
  .nav-studio-label{
    position:absolute;
    left:50vw;
    transform:translateX(-50%);
    color:var(--cream);
    font-family:'Azeret Mono','IBM Plex Mono',monospace;
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    text-shadow:0 1px 6px rgba(0,0,0,0.35);
    white-space:nowrap;
  }
  .nav-mark{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Anton', sans-serif;
    font-size:19px;
    letter-spacing:0.02em;
    color:var(--cream);
    text-shadow:0 1px 6px rgba(0,0,0,0.35);
  }
  .nav-mark .dot{
    width:9px;height:9px;border-radius:50%;
    background:var(--red);
    box-shadow:0 0 0 3px rgba(246,241,230,0.35);
  }
  .nav-links{
    display:flex;
    gap:28px;
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.12em;
    text-transform:uppercase;
  }
  .nav-links a{
    color:var(--cream);
    text-decoration:none;
    opacity:0.85;
    text-shadow:0 1px 6px rgba(0,0,0,0.35);
    border-bottom:1px solid transparent;
    padding-bottom:3px;
    transition:opacity .2s, border-color .2s;
  }
  .nav-links a:hover{opacity:1; border-color:var(--cream);}
  .nav-links a:focus-visible{outline:2px solid var(--cream); outline-offset:4px;}

  @media (max-width:480px){
    nav{ padding:16px 20px; }
    .nav-mark{ font-size:15px; }
    .nav-links{ gap:14px; font-size:10px; }
    .nav-studio-label{ font-size:9px; }
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    width:100%;
    height:100svh;
    min-height:560px;
    overflow:hidden;
    background:#0f130c;
  }
  .stage{
    position:absolute;
    inset:-6%;
    will-change:transform;
    transform-style:preserve-3d;
  }
  .stage img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:0% 62%;
    display:block;
    filter:saturate(1.03) contrast(1.02);
  }
  .stage .hero-helmet-link{
    position:absolute;
    height:auto;
    z-index:4;
    display:block;
    pointer-events:auto;
    cursor:pointer;
  }
  .stage .hero-helmet-link::after{
    content:'[VIEW COLLECTION]';
    position:absolute;
    left:50%;
    bottom:-30px;
    transform:translate(-50%, 6px);
    padding:7px 9px;
    background:rgba(15,19,12,0.88);
    border:1px solid rgba(246,241,230,0.42);
    color:var(--cream);
    font-family:'IBM Plex Mono', monospace;
    font-size:9px;
    letter-spacing:0.08em;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .stage .hero-helmet-link:hover::after,
  .stage .hero-helmet-link:focus-visible::after{
    opacity:1;
    transform:translate(-50%, 0);
  }
  .stage .hero-helmet{
    width:100%;
    height:auto;
    object-fit:contain;
    object-position:center;
    filter:drop-shadow(0 12px 9px rgba(24,18,10,0.28));
    pointer-events:none;
  }
  @media (min-width:1200px) and (max-aspect-ratio:11/5){
  }
  @media (max-width:900px) and (min-width:601px){
  }
  @media (max-width:600px){
    .stage img{ object-position:0% 62%; }
  }
  /* subtle vignette that sells depth, like light falling into a room */
  .vignette{
    position:absolute; inset:0;
    pointer-events:none;
    background:
      radial-gradient(120% 90% at 30% 20%, rgba(255,250,235,0.10), rgba(0,0,0,0) 55%),
      radial-gradient(140% 120% at 50% 100%, rgba(0,0,0,0.42), rgba(0,0,0,0) 55%),
      linear-gradient(180deg, rgba(10,12,8,0.35) 0%, rgba(10,12,8,0) 22%, rgba(10,12,8,0) 70%, rgba(10,12,8,0.5) 100%);
    z-index:2;
    mix-blend-mode:normal;
  }
  /* sheen layer that drifts opposite the tilt - like glass reflection */
  .sheen{
    position:absolute; inset:-20%;
    pointer-events:none;
    background:linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.10) 48%, rgba(255,255,255,0) 56%);
    z-index:3;
    will-change:transform;
    mix-blend-mode:screen;
  }

  .hero-content{
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
  }
  .hero-content > *{pointer-events:auto;}

  /* text block sits in the empty wall space above the desk, clear of the
     laptop and lockers so both stay hoverable */
  .hero-copy{
    position:absolute;
    top:16%;
    left:22%;
    width:min(34%, 460px);
  }
  @media (max-width:900px){
    .hero-copy{ top:88px; left:24px; width:min(70%, 420px); }
  }

  .eyebrow-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:fit-content;
    background:var(--cream);
    color:var(--ink);
    font-family:'IBM Plex Mono', monospace;
    font-size:11.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    padding:7px 12px 7px 10px;
    border-radius:2px;
    box-shadow:0 6px 18px rgba(0,0,0,0.28);
    transform:rotate(-2deg);
    margin-bottom:20px;
  }
  .eyebrow-tag .hole{
    width:8px;height:8px;border-radius:50%;
    background:var(--paper);
    border:1.5px solid var(--ink-soft);
  }

  h1.headline{
    font-family:'Anton', sans-serif;
    font-weight:400;
    color:var(--cream);
    font-size:clamp(32px, 4.6vw, 60px);
    line-height:0.98;
    letter-spacing:0.005em;
    margin:0 0 16px 0;
    text-shadow:0 8px 22px rgba(0,0,0,0.45);
  }
  h1.headline em{
    font-style:normal;
    color:var(--red);
    -webkit-text-stroke:1.5px var(--cream);
  }

  .hero-sub{
    max-width:34ch;
    color:var(--cream);
    font-size:14.5px;
    line-height:1.55;
    text-shadow:0 2px 10px rgba(0,0,0,0.4);
    margin:0 0 24px;
  }

  .cta{
    position:absolute;
    right:8%;
    top:42%;
    display:inline-flex;
    align-items:center;
    gap:14px;
    background:rgba(15,19,12,0.72);
    color:var(--cream);
    text-decoration:none;
    padding:18px 24px 18px 20px;
    border-radius:4px;
    border:1.5px solid rgba(246,241,230,0.3);
    box-shadow:0 24px 60px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.07);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    white-space:nowrap;
    cursor:pointer;
  }
  .cta:hover{
    transform:translateY(-3px);
    box-shadow:0 32px 70px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.1);
    border-color:rgba(246,241,230,0.6);
  }
  .cta:focus-visible{outline:2px solid var(--cream); outline-offset:3px;}
  .cta-text{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .cta-kicker{
    font-family:'Azeret Mono','IBM Plex Mono',monospace;
    font-size:9px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    opacity:0.55;
    line-height:1;
  }
  .cta-text > :last-child{
    font-family:'Impact','Anton',sans-serif;
    font-size:20px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    line-height:1;
    color:var(--cream);
  }
  .cta-arrow{transition:transform .25s ease; opacity:0.7;}
  .cta:hover .cta-arrow{transform:translateX(4px); opacity:1;}
  .cta svg:first-child{opacity:0.6; flex-shrink:0;}
  .cta:hover svg:first-child{opacity:1;}
  @media (max-width:600px){
    .cta{ left:24px; right:24px; top:auto; bottom:28px; justify-content:center; }
  }

  .scroll-cue{
    position:absolute;
    right:40px; top:50%;
    transform:translateY(-50%) rotate(90deg);
    transform-origin:center;
    color:var(--cream);
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    z-index:4;
    opacity:0.7;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .scroll-cue::after{
    content:"";
    width:34px; height:1px;
    background:var(--cream);
  }
  @media (max-width:720px){ .scroll-cue{display:none;} }

  /* ---------- COLLECTION / LOCKERS SECTION ---------- */
  .section{
    padding:110px 40px;
    max-width:1320px;
    margin:0 auto;
  }
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    margin-bottom:56px;
    flex-wrap:wrap;
    border-bottom:1px solid var(--line);
    padding-bottom:26px;
  }
  .section-head .kicker{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--red);
    margin:0 0 10px 0;
  }
  .section-head h2{
    font-family:'Anton', sans-serif;
    font-weight:400;
    font-size:clamp(30px,4.2vw,52px);
    margin:0;
    line-height:1;
  }
  .section-head p{
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    color:var(--ink-soft);
    max-width:320px;
    margin:0;
    line-height:1.6;
  }

  .locker-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
  }
  @media (max-width:980px){ .locker-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:540px){ .locker-grid{grid-template-columns:1fr;} }

  .locker-door{
    position:relative;
    aspect-ratio:3/4.1;
    background:linear-gradient(160deg, var(--locker) 0%, var(--locker-dark) 100%);
    border-radius:4px;
    padding:18px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    color:var(--cream);
    overflow:hidden;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15), 0 10px 24px rgba(20,25,15,0.12);
    transition:transform .35s ease, box-shadow .35s ease;
    border:none;
    width:100%;
    text-align:left;
    font-family:inherit;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
  }
  .locker-door:focus-visible{
    outline:2px solid var(--cream);
    outline-offset:3px;
  }
  .locker-door::before{
    content:"";
    position:absolute; left:14px; top:0; bottom:0;
    width:1px;
    background:rgba(0,0,0,0.18);
  }
  .locker-door::after{
    content:"";
    position:absolute; inset:0;
    background:repeating-linear-gradient(180deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 2px, transparent 2px, transparent 5px);
    pointer-events:none;
  }
  .locker-door:hover{
    transform:translateY(-6px);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15), 0 20px 34px rgba(20,25,15,0.22);
  }
  .locker-vents{
    display:flex; flex-direction:column; gap:4px;
    width:38px;
  }
  .locker-vents span{
    height:3px; background:rgba(0,0,0,0.2); border-radius:1px;
  }
  .locker-num{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.12em;
    opacity:0.75;
  }
  .locker-label{
    background:var(--cream);
    color:var(--ink);
    display:inline-block;
    width:fit-content;
    padding:5px 9px;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    border-radius:2px;
    transform:rotate(-1.5deg);
    box-shadow:0 4px 10px rgba(0,0,0,0.25);
  }
  .locker-title{
    font-family:'Anton', sans-serif;
    font-size:26px;
    line-height:1.02;
    margin:10px 0 4px;
  }
  .locker-count{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    opacity:0.8;
  }
  .locker-handle{
    position:absolute;
    right:12px; top:44%;
    width:8px; height:26px;
    background:rgba(0,0,0,0.28);
    border-radius:2px;
  }

  /* ---------- LOCKER REVEAL MODAL ---------- */
  .locker-reveal{
    position:fixed;
    inset:0;
    z-index:500;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px;
    visibility:hidden;
    pointer-events:none;
  }
  .locker-reveal.is-active{
    visibility:visible;
    pointer-events:auto;
  }
  .locker-reveal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(12,14,9,0);
    backdrop-filter:blur(0px);
    transition:background .45s ease, backdrop-filter .45s ease;
  }
  .locker-reveal.is-active .locker-reveal-backdrop{
    background:rgba(12,14,9,0.86);
    backdrop-filter:blur(2px);
  }
  .locker-reveal-stage{
    position:relative;
    z-index:1;
    transform:scale(0.22);
    opacity:0;
    transition:transform .55s cubic-bezier(.22,.85,.28,1), opacity .3s ease;
  }
  .locker-reveal.is-active .locker-reveal-stage{
    transform:scale(1);
    opacity:1;
  }
  .reveal-door-frame{
    position:relative;
    width:min(90vw, 900px);
    aspect-ratio:4/3;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 50px 100px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
    background:#171b13;
    perspective:1600px;
  }
  .reveal-photo{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:35% center;
  }
  .reveal-door-cover{
    position:absolute;
    inset:0;
    z-index:5;
    background:linear-gradient(160deg, var(--locker) 0%, var(--locker-dark) 100%);
    transform-origin:left center;
    transform:rotateY(0deg);
    transition:transform .65s cubic-bezier(.7,0,.32,1);
    backface-visibility:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .reveal-door-cover::before{
    content:"";
    position:absolute; inset:0;
    background:repeating-linear-gradient(180deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 2px, transparent 2px, transparent 5px);
  }
  .reveal-door-vents{
    display:flex; flex-direction:column; gap:6px;
  }
  .reveal-door-vents span{
    width:70px; height:4px; background:rgba(0,0,0,0.22); border-radius:1px;
  }
  .locker-reveal.is-active .reveal-door-cover{
    transition-delay:.32s;
    transform:rotateY(-108deg);
  }
  .reveal-caption{
    position:absolute;
    left:0; right:0; bottom:0;
    z-index:2;
    padding:22px 22px 20px;
    background:linear-gradient(0deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 100%);
    color:var(--cream);
    opacity:0;
    transform:translateY(8px);
    transition:opacity .4s ease, transform .4s ease;
    transition-delay:.75s;
  }
  .locker-reveal.is-active .reveal-caption{
    opacity:1;
    transform:translateY(0);
  }
  .reveal-kicker{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--red);
    margin-bottom:6px;
  }
  .reveal-title{
    font-family:'Anton', sans-serif;
    font-size:26px;
    line-height:1;
    margin-bottom:6px;
  }
  .reveal-desc{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    line-height:1.5;
    opacity:0.85;
    max-width:34ch;
  }
  .reveal-close{
    position:absolute;
    top:14px; right:14px;
    z-index:6;
    width:34px; height:34px;
    border-radius:50%;
    border:none;
    background:rgba(0,0,0,0.4);
    color:var(--cream);
    font-size:16px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s ease, transform .2s ease;
  }
  .reveal-close:hover{ background:rgba(0,0,0,0.6); transform:scale(1.06); }
  .reveal-close:focus-visible{ outline:2px solid var(--cream); outline-offset:2px; }

  @media (prefers-reduced-motion: reduce){
    .locker-reveal-stage, .reveal-door-cover, .reveal-caption{ transition:none !important; }
  }

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--ink);
    color:var(--cream);
    padding:60px 40px 34px;
  }
  .footer-inner{
    max-width:1320px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    flex-wrap:wrap;
    border-bottom:1px solid rgba(246,241,230,0.15);
    padding-bottom:36px;
    margin-bottom:22px;
  }
  footer .fmark{
    font-family:'Anton', sans-serif;
    font-size:24px;
  }
  .footer-brand{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .footer-tagline{
    font-family:'Oswald', sans-serif;
    font-weight:300;
    font-size:clamp(13px,1.3vw,15px);
    color:rgba(246,241,230,0.55);
    letter-spacing:0.04em;
    max-width:38ch;
    line-height:1.55;
    margin:0;
  }
  footer .fcols{
    display:flex;
    gap:56px;
    flex-wrap:wrap;
  }
  footer .fcol h4{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--red);
    margin:0 0 12px;
  }
  footer .fcol a{
    display:block;
    color:var(--cream);
    text-decoration:none;
    font-size:14px;
    opacity:0.82;
    margin-bottom:8px;
  }
  footer .fcol a:hover{opacity:1; text-decoration:underline;}
  .footer-bottom{
    max-width:1320px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    opacity:0.6;
    flex-wrap:wrap;
    gap:10px;
  }

  @media (prefers-reduced-motion: reduce){
    .stage, .sheen{transition:none !important; transform:none !important;}
  }

  /* ---------- LOADER ---------- */
  .loader{
    position:fixed;
    inset:0;
    z-index:9999;
    background:var(--ink);
    color:var(--cream);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:opacity .7s ease, visibility .7s ease;
  }
  .loader.is-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
  .loader-inner{
    text-align:center;
    padding:0 24px;
  }
  .loader-tag{
    display:inline-block;
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--red);
    border:1px solid rgba(246,241,230,0.3);
    padding:6px 12px;
    border-radius:2px;
    margin-bottom:24px;
  }
  .loader-head{
    font-family:'Anton', sans-serif;
    font-weight:400;
    font-size:clamp(34px, 6vw, 68px);
    line-height:1.02;
    margin:0 0 18px;
  }
  .loader-sub{
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    opacity:0.75;
    margin:0 0 28px;
  }
  .loader-sub .dots span{
    animation:dotfade 1.2s infinite;
    opacity:0.2;
  }
  .loader-sub .dots span:nth-child(2){animation-delay:.15s;}
  .loader-sub .dots span:nth-child(3){animation-delay:.3s;}
  @keyframes dotfade{
    0%, 80%, 100%{opacity:0.2;}
    40%{opacity:1;}
  }
  .loader-bar{
    width:230px;
    height:2px;
    background:rgba(246,241,230,0.18);
    margin:0 auto;
    overflow:hidden;
    border-radius:2px;
  }
  .loader-bar-fill{
    width:0%;
    height:100%;
    background:var(--red);
    transition:width 1.5s cubic-bezier(.4,0,.2,1);
  }

  /* ---------- HOTSPOTS ---------- */
  .hotspot{
    position:absolute;
    z-index:6;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    border-radius:6px;
    text-decoration:none;
  }
  .hotspot::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:6px;
    background:rgba(255,255,255,0);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0);
    transition:background .25s ease, box-shadow .25s ease;
  }
  .hotspot:hover::before,
  .hotspot:focus-visible::before{
    background:rgba(255,255,255,0.08);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.4);
  }
  .hotspot:focus-visible{
    outline:2px solid var(--cream);
    outline-offset:3px;
  }
  .hotspot-label{
    position:relative;
    background:var(--cream);
    color:var(--ink);
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.08em;
    padding:8px 14px;
    border-radius:2px;
    white-space:nowrap;
    opacity:0;
    transform:translateY(8px) scale(0.94);
    transition:opacity .2s ease, transform .2s ease;
    box-shadow:0 10px 22px rgba(0,0,0,0.4);
    pointer-events:none;
  }
  .hotspot:hover .hotspot-label,
  .hotspot:focus-visible .hotspot-label{
    opacity:1;
    transform:translateY(0) scale(1);

  }


/* ---------- MODELS CAROUSEL ---------- */
.hero-model{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  height:95%;
  z-index:3;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  pointer-events:none;
}
.hero-model-photo{
  height:100%;
  width:auto;
  max-width:36vw;
  object-fit:contain;
  object-position:bottom center;
  display:block;
  transition:opacity .25s ease;
}
.hero-model-photo.is-fading{
  opacity:0;
}
.hero-model-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:50;
  pointer-events:auto;
  width:54px;height:54px;
  border:2px solid rgba(246,241,230,0.65);
  background:rgba(15,19,12,0.3);
  color:var(--cream);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .18s, border-color .18s;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.hero-model-btn--prev{ left:32px; }
.hero-model-btn--next{ right:32px; }
.hero-model-btn:hover{
  background:rgba(15,19,12,0.7);
  border-color:var(--cream);
}
.hero-model-btn:focus-visible{
  outline:2px solid var(--cream);
  outline-offset:3px;
}
.hero-model-count{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  display:none; /* replaced by pip track */
}

/* ---------- MODEL PIP TRACK ---------- */
.model-pip-track{
  position:absolute;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  display:flex;
  gap:10px;
  align-items:center;
}
.model-pip{
  width:4px;
  height:13px;
  border-radius:2px;
  background:linear-gradient(to right, rgba(246,241,230,0.18), rgba(246,241,230,0.28));
  box-shadow:1px 0 0 rgba(246,241,230,0.08), -1px 0 0 rgba(0,0,0,0.35), 0 2px 3px rgba(0,0,0,0.4);
  border:none;
  cursor:pointer;
  padding:10px 8px;
  box-sizing:content-box;
  transition:height .22s ease, background .22s ease, box-shadow .22s ease;
}
.model-pip.is-active{
  height:22px;
  background:linear-gradient(to right, rgba(246,241,230,0.75), rgba(246,241,230,1));
  box-shadow:1px 0 0 rgba(255,255,255,0.45), -1px 0 0 rgba(0,0,0,0.45), 0 0 7px rgba(246,241,230,0.28), 0 2px 5px rgba(0,0,0,0.5);
}
.model-pip:hover:not(.is-active){
  height:17px;
  background:linear-gradient(to right, rgba(246,241,230,0.45), rgba(246,241,230,0.6));
}
@media(max-width:600px){
  .hero-model-btn{ width:40px; height:40px; }
  .hero-model-btn--prev{ left:10px; }
  .hero-model-btn--next{ right:10px; }
  .hero-model-photo{ max-width:55vw; }
}

/* ---------- LOCKER ROOM MODAL ---------- */
.lr-modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  visibility:hidden;
  pointer-events:none;
}
.lr-modal.is-open{
  visibility:visible;
  pointer-events:auto;
}
.lr-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.75);
  opacity:0;
  transition:opacity .35s ease;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.lr-modal.is-open .lr-backdrop{ opacity:1; }
.lr-inner{
  position:relative;
  z-index:2;
  width:min(96vw,1100px);
  max-height:90vh;
  overflow:hidden;
  background:#171b13;
  transform:scale(0.94);
  opacity:0;
  transition:transform .35s ease, opacity .35s ease;
}
.lr-modal.is-open .lr-inner{
  transform:scale(1);
  opacity:1;
}
.lr-close{
  position:absolute;
  top:14px; right:14px;
  z-index:10;
  width:38px; height:38px;
  border:none;
  background:rgba(0,0,0,0.45);
  color:var(--cream);
  font-size:16px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.lr-close:hover{ background:rgba(0,0,0,0.75); }
.lr-scene{
  position:relative;
  width:100%;
  line-height:0;
}
.lr-bg{
  width:100%;
  height:auto;
  display:block;
  max-height:88vh;
  object-fit:cover;
}
.lr-locker{
  position:absolute;
  border:none;
  background:transparent;
  cursor:default;
  padding:0;
}
.lr-locker--active{
  cursor:pointer;
  transition:background .2s, outline .2s;
}
.lr-locker--active:hover{
  background:rgba(246,241,230,0.12);
  outline:2px solid rgba(246,241,230,0.55);
  outline-offset:-2px;
}
.lr-locker--active:focus-visible{
  outline:2px solid var(--cream);
  outline-offset:2px;
}
.lr-locker-label{
  position:absolute;
  bottom:16%;
  left:50%;
  transform:translateX(-50%) rotate(-3deg);
  white-space:nowrap;
  background:#f5e642;
  color:#1a1612;
  font-family:'Azeret Mono','IBM Plex Mono',monospace;
  font-size:clamp(9px,1.1vw,13px);
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:600;
  padding:10px 14px 12px;
  pointer-events:none;
  box-shadow:3px 5px 18px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.2);
  min-width:70px;
  text-align:center;
  line-height:1.2;
}
.locker-door--tshirts .lr-locker-label{
  background:var(--red);
  color:var(--ink);
}
/* tape strip at top */
.lr-locker-label::before{
  content:"";
  position:absolute;
  top:-9px;
  left:50%;
  transform:translateX(-50%);
  width:38px; height:18px;
  background:rgba(255,255,255,0.55);
  border-radius:1px;
  box-shadow:0 1px 3px rgba(0,0,0,0.15);
}
/* folded corner */
.lr-locker-label::after{
  content:"";
  position:absolute;
  bottom:0; right:0;
  width:14px; height:14px;
  background:linear-gradient(225deg, rgba(0,0,0,0.18) 50%, transparent 50%);
}
/* per-locker colour + rotation variation */
.lr-scene button:nth-of-type(1) .lr-locker-label{
  background:#f5e642;
  transform:translateX(-50%) rotate(-4deg);
}
.lr-scene button:nth-of-type(2) .lr-locker-label{
  background:#a8d8ea;
  transform:translateX(-50%) rotate(3deg);
}
.lr-scene button:nth-of-type(3) .lr-locker-label{
  background:#ffb7b2;
  transform:translateX(-50%) rotate(-2deg);
}
.lr-locker--active:hover{
  background:rgba(246,241,230,0.1);
  outline:2px solid rgba(246,241,230,0.5);
  outline-offset:-2px;
}

/* ---------- REVEAL — CLEAN PHOTO ---------- */
.locker-reveal-stage{
  width:auto;
}

/* ---------- BRAND NAME FONT ---------- */
.brand-name{
  font-family:'Impact','Anton',sans-serif;
  letter-spacing:0.06em;
}
.nav-mark .brand-name{
  font-size:18px;
}
.fmark .brand-name{
  font-size:inherit;
}
.loader-head .brand-name{
  font-family:'Impact','Anton',sans-serif;
  font-size:0.85em;
  display:block;
  color:var(--red);
  letter-spacing:0.02em;
}

/* Azeret Mono replaces IBM Plex Mono for all subtext/mono elements */
.mono,
.nav-links,
.nav-links a,
.lr-sub,
.kicker,
.section-head .kicker,
.locker-num,
.locker-count,
.locker-label,
.product-card-tag,
.product-card-price,
.models-count,
.reveal-kicker,
.reveal-desc{
  font-family:'Azeret Mono','IBM Plex Mono',monospace;
}

/* ---------- REVEAL CAPTION BAR ---------- */
.reveal-caption-bar{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:18px 20px;
  background:linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
  color:var(--cream);
  font-family:'Impact','Anton',sans-serif;
  font-size:clamp(14px,2.5vw,20px);
  letter-spacing:0.08em;
  text-transform:uppercase;
  line-height:1.25;
  pointer-events:none;
}
.reveal-caption-bar span{
  display:block;
  font-family:'Azeret Mono','IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:0.14em;
  opacity:0.7;
  margin-top:4px;
  font-weight:400;
  text-transform:uppercase;
}

/* ========== ABOUT MODAL ========== */
.about-modal{
  position:fixed;
  inset:0;
  z-index:600;
  display:none;
  overflow:hidden;
}
.about-modal.is-open{
  display:block;
  pointer-events:auto;
}
.about-backdrop{
  position:absolute;
  inset:0;
  background:rgba(10,12,8,0);
  backdrop-filter:blur(0px);
  transition:background .4s ease, backdrop-filter .4s ease;
}
.about-modal.is-open .about-backdrop{
  background:rgba(10,12,8,0.88);
  backdrop-filter:blur(4px);
}
.about-panel{
  position:absolute;
  inset:0;
  background:var(--ink);
  transform:translateX(100%);
  transition:transform .55s cubic-bezier(.22,.85,.28,1);
  overflow:hidden;
}
.about-modal.is-open .about-panel{
  transform:translateX(0);
}
.about-collage{
  position:absolute;
  inset:0;
}
.about-card{
  position:absolute;
  cursor:grab;
  user-select:none;
  touch-action:none;
  border-radius:3px;
  box-shadow:0 14px 44px rgba(0,0,0,0.65), 0 4px 14px rgba(0,0,0,0.35);
  will-change:transform;
  transition:box-shadow .2s ease;
}
.about-card:hover{ box-shadow:0 20px 56px rgba(0,0,0,0.8), 0 6px 20px rgba(0,0,0,0.45); }
.about-card:active{ cursor:grabbing; }
.about-close{
  position:fixed;
  top:22px; right:28px;
  z-index:10;
  width:42px; height:42px;
  border:1.5px solid rgba(246,241,230,0.25);
  background:rgba(34,30,25,0.7);
  color:var(--cream);
  font-size:16px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:2px;
  backdrop-filter:blur(6px);
  transition:border-color .2s, background .2s;
}
.about-close:hover{ border-color:var(--cream); background:rgba(34,30,25,0.95); }
.about-close:focus-visible{ outline:2px solid var(--cream); outline-offset:3px; }

/* watermark */
.about-watermark{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-family:'Impact','Anton',sans-serif;
  font-size:clamp(120px,22vw,260px);
  letter-spacing:-0.04em;
  color:rgba(246,241,230,0.03);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  line-height:1;
}

.about-inner{
  flex:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:100vh;
  padding:90px 64px 60px;
  gap:80px;
  max-width:1200px;
  margin:0 auto;
  width:100%;
}
@media(max-width:860px){
  .about-inner{ grid-template-columns:1fr; gap:48px; padding:80px 28px 48px; }
}

/* LEFT */
.about-eyebrow{
  font-family:'Azeret Mono','IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 28px;
}
.about-name{
  font-family:'Impact','Anton',sans-serif;
  font-size:clamp(56px,9vw,120px);
  line-height:0.92;
  color:var(--cream);
  margin:0 0 32px;
  letter-spacing:-0.01em;
}
.about-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:28px;
}
.about-tags span{
  font-family:'Azeret Mono','IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--cream);
  padding:5px 10px;
  border-radius:2px;
}
.about-location{
  font-family:'Azeret Mono','IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:0.1em;
  color:rgba(246,241,230,0.45);
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
}

/* RIGHT */
.about-label{
  font-family:'Azeret Mono','IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 14px;
}
.about-bio{
  font-family:'Oswald',sans-serif;
  font-weight:300;
  font-size:clamp(15px,1.6vw,18px);
  line-height:1.65;
  color:rgba(246,241,230,0.82);
  margin:0;
}
.about-divider{
  width:100%;
  height:1px;
  background:rgba(246,241,230,0.1);
  margin:32px 0;
}
.about-stat-row{
  display:flex;
  gap:40px;
  flex-wrap:wrap;
}
.about-stat{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.about-stat-num{
  font-family:'Impact','Anton',sans-serif;
  font-size:40px;
  color:var(--cream);
  line-height:1;
}
.about-stat-label{
  font-family:'Azeret Mono','IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(246,241,230,0.45);
}
.about-links{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.about-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'Azeret Mono','IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:0.08em;
  color:rgba(246,241,230,0.65);
  text-decoration:none;
  transition:color .2s;
}
.about-link:hover{ color:var(--cream); }
.about-bio-block{ margin-bottom:0; }

/* ========== CONTACT MODAL ========== */
.contact-modal{
  position:fixed;
  inset:0;
  z-index:600;
  display:none;
  overflow:hidden;
}
.contact-modal.is-open{ display:block; }

.contact-backdrop{
  position:absolute;
  inset:0;
  background:rgba(10,12,8,0.88);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  cursor:pointer;
}
.contact-panel{
  position:absolute;
  top:0; right:0; bottom:0;
  width:min(100vw, 560px);
  background:var(--ink);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  padding:80px 52px 60px;
  animation:slideInRight .45s cubic-bezier(.22,.85,.28,1) both;
}
@keyframes slideInRight{
  from{ transform:translateX(100%); opacity:0; }
  to{ transform:translateX(0); opacity:1; }
}
.contact-close{
  position:absolute;
  top:22px; right:22px;
  width:40px; height:40px;
  border:1.5px solid rgba(246,241,230,0.2);
  background:transparent;
  color:var(--cream);
  font-size:16px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:2px;
  transition:border-color .2s, background .2s;
}
.contact-close:hover{ border-color:var(--cream); background:rgba(246,241,230,0.06); }

.contact-watermark{
  position:absolute;
  bottom:-20px; right:-10px;
  font-family:'Impact','Anton',sans-serif;
  font-size:clamp(80px,18vw,180px);
  color:rgba(246,241,230,0.03);
  line-height:1;
  pointer-events:none;
  user-select:none;
  letter-spacing:-0.03em;
}
.contact-inner{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:48px;
}
.contact-eyebrow{
  font-family:'Azeret Mono','IBM Plex Mono',monospace;
  font-size:10px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 20px;
}
.contact-title{
  font-family:'Impact','Anton',sans-serif;
  font-size:clamp(52px,10vw,88px);
  line-height:0.9;
  color:var(--cream);
  margin:0 0 20px;
  letter-spacing:-0.01em;
}
.contact-sub{
  font-family:'Oswald',sans-serif;
  font-weight:300;
  font-size:15px;
  line-height:1.6;
  color:rgba(246,241,230,0.6);
  margin:0;
  max-width:36ch;
}
.contact-links{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.contact-item{
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 0;
  border-bottom:1px solid rgba(246,241,230,0.08);
  text-decoration:none;
  color:var(--cream);
  transition:padding-left .2s ease;
}
.contact-item:first-child{ border-top:1px solid rgba(246,241,230,0.08); }
.contact-item:hover{ padding-left:8px; }
.contact-item-icon{
  width:44px; height:44px;
  border:1px solid rgba(246,241,230,0.15);
  border-radius:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:rgba(246,241,230,0.6);
  transition:border-color .2s, color .2s;
}
.contact-item:hover .contact-item-icon{
  border-color:var(--red);
  color:var(--red);
}
.contact-item-body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.contact-item-label{
  font-family:'Azeret Mono','IBM Plex Mono',monospace;
  font-size:9px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(246,241,230,0.4);
}
.contact-item-value{
  font-family:'Oswald',sans-serif;
  font-size:16px;
  font-weight:400;
  color:var(--cream);
  letter-spacing:0.02em;
}
.contact-arrow{
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .2s, transform .2s;
  flex-shrink:0;
  color:rgba(246,241,230,0.5);
}
.contact-item:hover .contact-arrow{
  opacity:1;
  transform:translateX(0);
}

/* ---- Flying cards ---- */
.reveal-cards-container {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  overflow: visible;
}
.reveal-card {
  position: absolute;
  width: 160px; height: 220px;
  border-radius: 8px;
  background: var(--cream);
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 10px 32px rgba(0,0,0,0.45);
  opacity: 0;
  will-change: transform, opacity;
  overflow: hidden;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  touch-action: none;
  display: flex;
  flex-direction: column;
}
.reveal-card:active { cursor: grabbing; }
.reveal-card img {
  flex: 1;
  width: 100%;
  min-height: 0;
  object-fit: contain;
  padding: 6px 6px 2px;
  display: block;
  pointer-events: none;
  draggable: false;
}
.reveal-card::after {
  content: attr(data-label);
  display: block;
  flex-shrink: 0;
  padding: 5px 6px 6px;
  background: rgba(246,241,230,0.92);
  font-family: 'Azeret Mono','IBM Plex Mono', monospace;
  font-size: 9px; letter-spacing: 0.16em;
  color: var(--ink); text-transform: uppercase;
  text-align: center; line-height: 1.3;
}
/* Cards land and stay — bounce slightly past target then settle */
@keyframes cardFly1  { 0%{opacity:0;transform:translate(0,0) rotate(0deg)} 12%{opacity:1} 82%{transform:translate(-265px,-210px) rotate(-46deg)} 100%{opacity:1;transform:translate(-240px,-190px) rotate(-42deg)} }
@keyframes cardFly2  { 0%{opacity:0;transform:translate(0,0) rotate(0deg)} 12%{opacity:1} 82%{transform:translate(-115px,-220px) rotate(10deg)}  100%{opacity:1;transform:translate(-100px,-200px) rotate(8deg)}  }
@keyframes cardFly3  { 0%{opacity:0;transform:translate(0,0) rotate(0deg)} 12%{opacity:1} 82%{transform:translate(50px,-230px) rotate(-24deg)}   100%{opacity:1;transform:translate(40px,-210px) rotate(-20deg)}  }
@keyframes cardFly4  { 0%{opacity:0;transform:translate(0,0) rotate(0deg)} 12%{opacity:1} 82%{transform:translate(340px,-200px) rotate(30deg)}   100%{opacity:1;transform:translate(310px,-180px) rotate(26deg)}  }
@keyframes cardFly5  { 0%{opacity:0;transform:translate(0,0) rotate(0deg)} 12%{opacity:1} 82%{transform:translate(430px,50px) rotate(-16deg)}    100%{opacity:1;transform:translate(390px,40px) rotate(-12deg)}   }
@keyframes cardFly6  { 0%{opacity:0;transform:translate(0,0) rotate(0deg)} 12%{opacity:1} 82%{transform:translate(330px,210px) rotate(42deg)}    100%{opacity:1;transform:translate(300px,190px) rotate(38deg)}   }
@keyframes cardFly7  { 0%{opacity:0;transform:translate(0,0) rotate(0deg)} 12%{opacity:1} 82%{transform:translate(50px,225px) rotate(-22deg)}    100%{opacity:1;transform:translate(40px,200px) rotate(-18deg)}   }
@keyframes cardFly8  { 0%{opacity:0;transform:translate(0,0) rotate(0deg)} 12%{opacity:1} 82%{transform:translate(-255px,195px) rotate(19deg)}   100%{opacity:1;transform:translate(-230px,175px) rotate(15deg)}  }
@keyframes cardFly9  { 0%{opacity:0;transform:translate(0,0) rotate(0deg)} 12%{opacity:1} 82%{transform:translate(-185px,-105px) rotate(33deg)}  100%{opacity:1;transform:translate(-165px,-90px) rotate(29deg)}  }
@keyframes cardFly10 { 0%{opacity:0;transform:translate(0,0) rotate(0deg)} 12%{opacity:1} 82%{transform:translate(180px,-110px) rotate(-29deg)}  100%{opacity:1;transform:translate(160px,-95px) rotate(-25deg)}  }
@keyframes cardFly11 { 0%{opacity:0;transform:translate(0,0) rotate(0deg)} 12%{opacity:1} 82%{transform:translate(-355px,60px) rotate(-54deg)}   100%{opacity:1;transform:translate(-325px,50px) rotate(-50deg)}  }
@keyframes cardFly12 { 0%{opacity:0;transform:translate(0,0) rotate(0deg)} 12%{opacity:1} 82%{transform:translate(365px,110px) rotate(46deg)}    100%{opacity:1;transform:translate(330px,95px) rotate(42deg)}    }
@keyframes cardFly13 { 0%{opacity:0;transform:translate(0,0) rotate(0deg)} 12%{opacity:1} 82%{transform:translate(-80px,-200px) rotate(17deg)}   100%{opacity:1;transform:translate(-65px,-180px) rotate(13deg)}  }
@keyframes cardFly14 { 0%{opacity:0;transform:translate(0,0) rotate(0deg)} 12%{opacity:1} 82%{transform:translate(235px,200px) rotate(-42deg)}   100%{opacity:1;transform:translate(210px,180px) rotate(-38deg)}  }
@keyframes cardFly15 { 0%{opacity:0;transform:translate(0,0) rotate(0deg)} 12%{opacity:1} 82%{transform:translate(-310px,-55px) rotate(27deg)}   100%{opacity:1;transform:translate(-280px,-45px) rotate(23deg)}  }
@keyframes cardFly16 { 0%{opacity:0;transform:translate(0,0) rotate(0deg)} 12%{opacity:1} 82%{transform:translate(110px,220px) rotate(13deg)}    100%{opacity:1;transform:translate(95px,200px) rotate(9deg)}     }
@keyframes cardFly17 { 0%{opacity:0;transform:translate(0,0) rotate(0deg)} 12%{opacity:1} 82%{transform:translate(-150px,185px) rotate(-46deg)}  100%{opacity:1;transform:translate(-130px,165px) rotate(-42deg)} }
@media (prefers-reduced-motion: reduce) { .reveal-card { display: none; } }

/* ---- Custom cursor ---- */
@media (pointer: fine) {
  * { cursor: none !important; }
  .custom-cursor {
    position: fixed;
    top: 0; left: 0;
    width: 32px; height: 32px;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.15s cubic-bezier(.22,.85,.28,1), opacity 0.2s;
    opacity: 0;
    will-change: transform, left, top;
  }
  .custom-cursor.is-visible { opacity: 1; }
  .custom-cursor.is-hover   { transform: translate(-50%, -50%) scale(1.45); }
  .custom-cursor.is-grabbing svg { transform: rotate(20deg); }
}

/* ---- Hold-to-scroll trigger ---- */
.hold-trigger {
  position: absolute;
  bottom: 32px;
  right: 28px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  user-select: none;
  cursor: pointer;
}
.hold-ring-wrap {
  position: relative;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.hold-ring {
  position: absolute; inset: 0;
  width: 44px; height: 44px;
  transform: rotate(-90deg);
}
.hold-ring-track {
  fill: none;
  stroke: rgba(246,241,230,0.18);
  stroke-width: 2;
  animation: holdPulse 2.4s ease-in-out infinite;
}
.hold-ring-fill {
  fill: none;
  stroke: var(--cream);
  stroke-width: 2.5;
  stroke-dasharray: 113;
  stroke-dashoffset: 113;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.04s linear;
}
.hold-arrow {
  color: rgba(246,241,230,0.7);
  animation: holdBounce 1.6s ease-in-out infinite;
}
.hold-label {
  font-family: 'Azeret Mono','IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.24em;
  color: rgba(246,241,230,0.5);
  text-transform: uppercase;
}
@keyframes holdBounce {
  0%,100% { transform: translateY(0);   opacity: 0.7; }
  50%      { transform: translateY(4px); opacity: 1;   }
}
@keyframes holdPulse {
  0%,100% { stroke: rgba(246,241,230,0.18); }
  50%     { stroke: rgba(246,241,230,0.45); }
}
@media (max-width: 600px) { .hold-trigger { right: 14px; bottom: 100px; } }

/* ---- Card lightbox ---- */
#cardLightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}
#cardLightbox.is-open {
  opacity: 1;
  pointer-events: all;
}
#cardLightbox img {
  max-width: 88vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
  cursor: zoom-out;
  transform: scale(0.94);
  transition: transform .22s ease;
}
#cardLightbox.is-open img {
  transform: scale(1);
}