/** Shopify CDN: Minification failed

Line 628:2 Unexpected "100%"
Line 628:34 Unexpected "}"
Line 636:2 Unexpected "}"

**/
/* ============================================================
     Follow Your Instincts — design tokens
     ============================================================ */
  :root{
    --void:#050505;
    --ink:#0A0A0A;
    --panel:#111110;
    --orange:#FF6A00;
    --ember:#FF8A3D;
    --bone:#F2F0EB;
    --smoke:#8A857C;
    --line:rgba(242,240,235,0.10);
    --line-strong:rgba(242,240,235,0.22);
    --orange-glow:rgba(255,106,0,0.35);

    --display:'Anton', sans-serif;
    --hud:'Chakra Petch', monospace;
    --body:'Inter', system-ui, sans-serif;

    --maxw:1280px;
    --gut:clamp(20px,5vw,64px);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  }

  body{
    background:var(--ink);
    color:var(--bone);
    font-family:var(--body);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* faint global scanline atmosphere */
  body::before{
    content:"";
    position:fixed;inset:0;z-index:1;pointer-events:none;
    background:repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.015) 0px,
      rgba(255,255,255,0.015) 1px,
      transparent 1px,
      transparent 3px
    );
    mix-blend-mode:overlay;
    opacity:.6;
  }

  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%;height:auto}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

  :focus-visible{outline:2px solid var(--orange);outline-offset:3px}

  .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

  /* HUD utility label */
  .hud{
    font-family:var(--hud);
    text-transform:uppercase;
    letter-spacing:.22em;
    font-size:.7rem;
    color:var(--smoke);
    font-weight:600;
  }
  .hud .tick{color:var(--orange)}

  /* ============================================================
     HEADER
     ============================================================ */
  header{
    position:fixed;top:0;left:0;right:0;z-index:50;
    transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    background:rgba(8,8,8,0.78);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex;align-items:center;justify-content:space-between;
    height:70px;
  }
  .brand{display:flex;align-items:center;gap:.6rem}
  .brand .mark{
    width:24px;height:24px;flex:none;position:relative;
  }
  .brand .mark::before,.brand .mark::after{
    content:"";position:absolute;inset:0;border:2px solid var(--orange);
  }
  .brand .mark::before{clip-path:polygon(0 0,42% 0,42% 14%,14% 14%,14% 42%,0 42%);}
  .brand .mark::after{clip-path:polygon(100% 100%,58% 100%,58% 86%,86% 86%,86% 58%,100% 58%);}
  .brand .dot{
    position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%;
    background:var(--orange);transform:translate(-50%,-50%);
    box-shadow:0 0 8px var(--orange-glow);
  }
  .brand .logo{
    font-family:var(--display);font-size:1.5rem;letter-spacing:.04em;
    line-height:1;color:var(--bone);
  }

  .links{display:flex;align-items:center;gap:2rem}
  .links a{
    font-family:var(--hud);text-transform:uppercase;letter-spacing:.16em;
    font-size:.72rem;font-weight:600;color:var(--bone);position:relative;padding:.4rem 0;
  }
  .links a::after{
    content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--orange);
    transition:width .25s ease;
  }
  .links a:hover::after,.links a:focus-visible::after{width:100%}

  .tools{display:flex;align-items:center;gap:1rem}
  .cart-btn{
    display:flex;align-items:center;gap:.55rem;
    font-family:var(--hud);text-transform:uppercase;letter-spacing:.14em;
    font-size:.72rem;font-weight:600;
    border:1px solid var(--line-strong);padding:.55rem .85rem;
    transition:border-color .25s ease, background .25s ease;
  }
  .cart-btn:hover{border-color:var(--orange);background:rgba(255,106,0,0.06)}
  .cart-count{
    background:var(--orange);color:var(--void);border-radius:999px;
    min-width:18px;height:18px;display:grid;place-items:center;
    font-size:.66rem;font-weight:700;padding:0 5px;
  }

  .burger{display:none;flex-direction:column;gap:5px;width:30px;height:24px;justify-content:center}
  .burger span{height:2px;background:var(--bone);width:100%;transition:transform .3s ease,opacity .3s ease}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* mobile drawer menu */
  .mobile-menu{
    position:fixed;inset:70px 0 0 0;z-index:45;
    background:var(--void);
    transform:translateY(-120%);transition:transform .4s cubic-bezier(.7,0,.2,1);
    display:flex;flex-direction:column;padding:var(--gut);gap:.4rem;
  }
  .mobile-menu.open{transform:translateY(0)}
  .mobile-menu a{
    font-family:var(--display);font-size:2rem;letter-spacing:.02em;text-transform:uppercase;
    padding:.55rem 0;border-bottom:1px solid var(--line);
  }
  .mobile-menu a span{font-family:var(--hud);font-size:.7rem;color:var(--orange);letter-spacing:.2em;display:block}

  /* ============================================================
     HERO
     ============================================================ */
  .hero{
    position:relative;min-height:64svh;display:flex;align-items:center;
    padding-top:70px;overflow:hidden;
    background:
      radial-gradient(120% 90% at 80% 10%, rgba(255,106,0,0.10), transparent 55%),
      radial-gradient(80% 80% at 10% 90%, rgba(255,106,0,0.05), transparent 60%),
      var(--ink);
  }
  /* reticle framing */
  .reticle{position:absolute;top:clamp(72px,7vh,80px);left:clamp(10px,2.4vw,28px);right:clamp(10px,2.4vw,28px);bottom:clamp(30px,5vw,64px);pointer-events:none;z-index:2}
  .reticle .corner{position:absolute;width:46px;height:46px;border:2px solid var(--line-strong)}
  .reticle .tl{top:0;left:0;border-right:none;border-bottom:none}
  .reticle .tr{top:0;right:0;border-left:none;border-bottom:none}
  .reticle .bl{bottom:0;left:0;border-right:none;border-top:none}
  .reticle .br{bottom:0;right:0;border-left:none;border-top:none}
  .reticle .cross{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:64px;height:64px;opacity:.22;
  }
  .reticle .cross::before,.reticle .cross::after{content:"";position:absolute;background:var(--orange)}
  .reticle .cross::before{top:50%;left:0;right:0;height:1px;transform:translateY(-50%)}
  .reticle .cross::after{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%)}

  /* animated scan sweep */
  .scan{
    position:absolute;left:0;right:0;height:140px;z-index:2;pointer-events:none;
    background:linear-gradient(to bottom, transparent, rgba(255,106,0,0.05), transparent);
    animation:sweep 7s linear infinite;
  }
  @keyframes sweep{0%{top:-140px}100%{top:100%}}

  .hero-inner{position:relative;z-index:3;width:100%}
  .hero-tag{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem}
  .hero-tag .bar{height:1px;width:46px;background:var(--orange)}
  .hero h1{
    font-family:var(--display);
    font-size:clamp(3.4rem,13vw,11rem);
    line-height:.86;letter-spacing:.01em;text-transform:uppercase;
    margin-bottom:1.8rem;
  }
  .hero h1 .o{color:var(--orange);position:relative}

  .hero-sub{
    max-width:46ch;color:var(--bone);opacity:.82;font-size:1.05rem;margin-bottom:2.4rem;
  }
  .hero-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}

  .btn{
    font-family:var(--hud);text-transform:uppercase;letter-spacing:.18em;
    font-size:.78rem;font-weight:700;
    display:inline-flex;align-items:center;gap:.7rem;
    padding:1.05rem 1.8rem;border:1px solid var(--orange);
    transition:transform .2s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  }
  .btn-fill{background:var(--orange);color:var(--void)}
  .btn-fill:hover{box-shadow:0 0 0 2px var(--ink),0 0 28px var(--orange-glow);transform:translateY(-2px)}
  .btn-ghost{color:var(--bone);border-color:var(--line-strong)}
  .btn-ghost:hover{border-color:var(--orange);color:var(--orange)}

  .hero-meta{
    position:absolute;left:var(--gut);bottom:clamp(20px,5vh,44px);z-index:3;
    display:flex;gap:2.4rem;flex-wrap:wrap;
  }
  .hero-meta div .k{font-family:var(--display);font-size:1.6rem;color:var(--bone);line-height:1}
  .hero-meta div .l{font-family:var(--hud);font-size:.62rem;letter-spacing:.2em;color:var(--smoke);text-transform:uppercase}

  /* ============================================================
     SECTION SCAFFOLD
     ============================================================ */
  section{position:relative;z-index:3}
  .block{padding-block:clamp(64px,11vh,140px)}
  .head{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:1.5rem;margin-bottom:3rem;flex-wrap:wrap;
  }
  .head h2{
    font-family:var(--display);text-transform:uppercase;
    font-size:clamp(2.2rem,6vw,4.4rem);line-height:.9;letter-spacing:.01em;
  }
  .head h2 em{font-style:normal;color:var(--orange)}

  /* ============================================================
     PRODUCTS
     ============================================================ */
  .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
  .card{
    position:relative;background:var(--panel);border:1px solid var(--line);
    transition:border-color .3s ease, transform .3s ease;
    display:flex;flex-direction:column;
  }
  .card:hover{border-color:var(--line-strong);transform:translateY(-4px)}
  .card .imgwrap{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--void)}
  .card .imgwrap img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .6s cubic-bezier(.2,.7,.2,1);filter:saturate(1.05);
  }
  .card:hover .imgwrap img{transform:scale(1.06)}
  /* corner brackets on hover */
  .card .brackets{position:absolute;inset:10px;pointer-events:none;opacity:0;transition:opacity .3s ease}
  .card:hover .brackets{opacity:1}
  .card .brackets i{position:absolute;width:18px;height:18px;border:2px solid var(--orange)}
  .card .brackets .a{top:0;left:0;border-right:none;border-bottom:none}
  .card .brackets .b{top:0;right:0;border-left:none;border-bottom:none}
  .card .brackets .c{bottom:0;left:0;border-right:none;border-top:none}
  .card .brackets .d{bottom:0;right:0;border-left:none;border-top:none}
  .card .idx{
    position:absolute;top:10px;left:10px;z-index:2;
    font-family:var(--hud);font-size:.62rem;letter-spacing:.16em;color:var(--bone);
    background:rgba(5,5,5,0.6);padding:.25rem .5rem;backdrop-filter:blur(4px);
  }
  .card .body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
  .card .name{font-family:var(--display);font-size:1.15rem;text-transform:uppercase;letter-spacing:.02em;line-height:1}
  .card .meta{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
  .card .price{font-family:var(--hud);font-weight:700;font-size:.95rem;color:var(--bone)}
  .card .cat{font-family:var(--hud);font-size:.6rem;letter-spacing:.18em;color:var(--smoke);text-transform:uppercase}
  .add{
    margin-top:.5rem;width:100%;
    font-family:var(--hud);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:700;
    padding:.8rem;border:1px solid var(--line-strong);color:var(--bone);
    transition:background .2s ease,color .2s ease,border-color .2s ease;
  }
  .add:hover{background:var(--orange);color:var(--void);border-color:var(--orange)}
  .add.added{background:var(--bone);color:var(--void);border-color:var(--bone)}

  /* ============================================================
     LOOKBOOK
     ============================================================ */
  .look{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(14px,1.6vw,22px)}
  .look .tile{position:relative;overflow:hidden;border:1px solid var(--line);min-height:300px}
  .look .tile img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .8s ease}
  .look .tile:hover img{transform:scale(1.05)}
  .look .tile .cap{
    position:absolute;left:0;bottom:0;z-index:2;padding:1.4rem;
    background:linear-gradient(to top, rgba(5,5,5,0.85), transparent);width:100%;
  }
  .look .tile .cap .t{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.4rem,3vw,2.4rem);line-height:.95}
  .look .tile .cap .s{font-family:var(--hud);font-size:.66rem;letter-spacing:.2em;color:var(--orange);text-transform:uppercase;margin-top:.4rem}
  .look .stack{display:grid;grid-template-rows:1fr 1fr;gap:clamp(14px,1.6vw,22px)}

  /* ============================================================
     ABOUT
     ============================================================ */
  .about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
  .about .copy p{color:var(--bone);opacity:.85;margin-bottom:1.2rem;font-size:1.05rem}
  .about .copy p.lead{
    font-family:var(--display);text-transform:uppercase;opacity:1;
    font-size:clamp(1.8rem,3.4vw,2.8rem);line-height:1;letter-spacing:.01em;margin-bottom:1.6rem;
  }
  .about .copy p.lead em{font-style:normal;color:var(--orange)}
  .stats{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
  .stats div{padding:1.5rem 0;border-bottom:1px solid var(--line)}
  .stats div:nth-child(odd){border-right:1px solid var(--line);padding-right:1rem}
  .stats div:nth-child(even){padding-left:1.5rem}
  .stats .n{font-family:var(--display);font-size:2.6rem;color:var(--bone);line-height:1}
  .stats .n em{color:var(--orange);font-style:normal}
  .stats .c{font-family:var(--hud);font-size:.64rem;letter-spacing:.18em;color:var(--smoke);text-transform:uppercase;margin-top:.3rem}

  /* ============================================================
     SIGNUP
     ============================================================ */
  .signup{
    border:1px solid var(--line);background:
      radial-gradient(80% 140% at 100% 0%, rgba(255,106,0,0.12), transparent 60%),
      var(--panel);
    padding:clamp(32px,6vw,72px);text-align:center;position:relative;overflow:hidden;
  }
  .signup h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(2rem,5vw,3.6rem);line-height:.92;margin-bottom:.8rem}
  .signup h2 em{font-style:normal;color:var(--orange)}
  .signup p{color:var(--bone);opacity:.78;max-width:48ch;margin:0 auto 2rem}
  .form{display:flex;gap:.6rem;max-width:520px;margin-inline:auto;flex-wrap:wrap}
  .form input{
    flex:1;min-width:200px;background:var(--void);border:1px solid var(--line-strong);
    color:var(--bone);padding:1rem 1.1rem;font-family:var(--hud);letter-spacing:.06em;font-size:.85rem;
  }
  .form input::placeholder{color:var(--smoke);letter-spacing:.1em}
  .form input:focus{border-color:var(--orange);outline:none}
  .form .btn{justify-content:center}
  .form-msg{margin-top:1rem;font-family:var(--hud);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;min-height:1rem;color:var(--orange)}

  /* ============================================================
     FOOTER
     ============================================================ */
  footer{border-top:1px solid var(--line);padding-block:clamp(40px,6vh,72px);position:relative;z-index:3}
  .foot{display:flex;justify-content:space-between;gap:2.5rem;flex-wrap:wrap}
  .foot .col h4{font-family:var(--hud);text-transform:uppercase;letter-spacing:.2em;font-size:.66rem;color:var(--smoke);margin-bottom:1rem}
  .foot .col a{display:block;padding:.32rem 0;font-size:.92rem;color:var(--bone);opacity:.82;transition:color .2s ease,opacity .2s ease}
  .foot .col a:hover{color:var(--orange);opacity:1}
  .foot .brandcol{max-width:300px}
  .foot .brandcol .logo{font-family:var(--display);font-size:2.4rem;letter-spacing:.04em;line-height:1}
  .foot .brandcol p{color:var(--smoke);font-size:.85rem;margin-top:.8rem}
  .legal{
    display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
    margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);
    font-family:var(--hud);font-size:.64rem;letter-spacing:.16em;color:var(--smoke);text-transform:uppercase;
  }

  /* ============================================================
     CART DRAWER
     ============================================================ */
  .overlay{
    position:fixed;inset:0;z-index:60;background:rgba(0,0,0,0.6);backdrop-filter:blur(3px);
    opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
  }
  .overlay.open{opacity:1;visibility:visible}
  .drawer{
    position:fixed;top:0;right:0;bottom:0;z-index:65;width:min(420px,100%);
    background:var(--ink);border-left:1px solid var(--line-strong);
    transform:translateX(100%);transition:transform .4s cubic-bezier(.7,0,.2,1);
    display:flex;flex-direction:column;
  }
  .drawer.open{transform:translateX(0)}
  .drawer-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:1.4rem var(--gut);border-bottom:1px solid var(--line);
  }
  .drawer-head .t{font-family:var(--display);text-transform:uppercase;font-size:1.4rem;letter-spacing:.03em}
  .drawer-close{font-family:var(--hud);font-size:1.4rem;line-height:1;padding:.2rem .5rem}
  .drawer-close:hover{color:var(--orange)}
  .drawer-body{flex:1;overflow-y:auto;padding:1rem var(--gut)}
  .empty{
    text-align:center;padding:3rem 1rem;color:var(--smoke);
    font-family:var(--hud);letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;
  }
  .empty .crosshair{font-size:2rem;color:var(--line-strong);margin-bottom:1rem;display:block}
  .line{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
  .line img{width:64px;height:80px;object-fit:cover;flex:none;background:var(--void)}
  .line .info{flex:1;display:flex;flex-direction:column;gap:.35rem}
  .line .nm{font-family:var(--display);text-transform:uppercase;font-size:1rem;letter-spacing:.02em;line-height:1}
  .line .pr{font-family:var(--hud);font-size:.78rem;color:var(--smoke)}
  .qty{display:flex;align-items:center;gap:.2rem;margin-top:auto}
  .qty button{
    width:26px;height:26px;border:1px solid var(--line-strong);display:grid;place-items:center;
    font-family:var(--hud);font-size:.9rem;transition:border-color .2s ease,color .2s ease;
  }
  .qty button:hover{border-color:var(--orange);color:var(--orange)}
  .qty .v{width:34px;text-align:center;font-family:var(--hud);font-size:.85rem}
  .line .rm{font-family:var(--hud);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);align-self:flex-start}
  .line .rm:hover{color:var(--orange)}
  .drawer-foot{padding:1.4rem var(--gut);border-top:1px solid var(--line-strong)}
  .subtotal{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1.1rem}
  .subtotal .l{font-family:var(--hud);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--smoke)}
  .subtotal .v{font-family:var(--display);font-size:1.8rem;color:var(--bone)}
  .checkout{width:100%;justify-content:center}
  .ship-note{text-align:center;margin-top:.8rem;font-family:var(--hud);font-size:.6rem;letter-spacing:.14em;color:var(--smoke);text-transform:uppercase}

  /* ============================================================
     SCROLL REVEAL
     ============================================================ */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width:1024px){
    .grid{grid-template-columns:repeat(3,1fr)}
  }
  @media (max-width:820px){
    .links,.cart-btn .lbl{display:none}
    .burger{display:flex}
    .grid{grid-template-columns:repeat(2,1fr)}
    .look{grid-template-columns:1fr}
    .about{grid-template-columns:1fr}
    .about .visual{order:-1}
  }
  @media (max-width:480px){
    .grid{grid-template-columns:1fr 1fr}
    .hero-meta{gap:1.4rem}
    .stats{grid-template-columns:1fr}
    .stats div:nth-child(odd){border-right:none;padding-right:0}
    .stats div:nth-child(even){padding-left:0}
  }

  /* ---- brand logo image ---- */
  .brand .logo-img{height:30px;width:auto;display:block}
  .foot-logo{height:48px;width:auto;display:block;margin-bottom:.2rem}
  @media (max-width:480px){ .brand .logo-img{height:26px} }

  /* ---- 3D hero layer ---- */
  #hero3d{position:absolute;inset:0;z-index:1;pointer-events:none;will-change:opacity}
  #hero3d canvas{display:block;width:100%;height:100%}

  /* ---- size selector + sold-out ---- */
  .size-select{width:100%;margin-top:.1rem;background:var(--void);color:var(--bone);border:1px solid var(--line-strong);
    padding:.6rem .7rem;font-family:var(--hud);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
  .size-select:focus{border-color:var(--orange);outline:none}
  .soldout{position:absolute;top:10px;right:10px;z-index:2;font-family:var(--hud);font-size:.6rem;letter-spacing:.16em;
    text-transform:uppercase;background:var(--orange);color:var(--void);padding:.3rem .55rem;font-weight:700}
  .add[disabled]{opacity:.5;cursor:not-allowed}
  .add[disabled]:hover{background:none;color:var(--bone);border-color:var(--line-strong)}


  /* ---- scroll progress bar ---- */
  .scrollbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:80;
    background:linear-gradient(90deg,var(--orange),var(--ember));box-shadow:0 0 10px var(--orange-glow);transition:width .12s linear}
  /* ---- reveal-on-scroll ---- */
  [data-reveal]{opacity:0;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
  [data-reveal="up"]{transform:translateY(42px)}
  [data-reveal="left"]{transform:translateX(-46px)}
  [data-reveal="right"]{transform:translateX(46px)}
  [data-reveal="scale"]{transform:scale(.92)}
  [data-reveal].in{opacity:1;transform:none}
  .foot .col:nth-child(2){transition-delay:.07s}
  .foot .col:nth-child(3){transition-delay:.14s}
  .foot .col:nth-child(4){transition-delay:.21s}
  /* ---- nav scrollspy underline ---- */
  .links a.active::after{width:100%}
  /* ---- hero intro ---- */
  @keyframes heroIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
  .hero-tag{animation:heroIn .8s .10s both}
  
  .hero-sub{animation:heroIn .9s .45s both}
  .hero-actions{animation:heroIn .9s .62s both}
  .hero-meta{animation:heroIn 1s .85s both}
  @media (prefers-reduced-motion:reduce){ [data-reveal]{opacity:1!important;transform:none!important} }


  .selects{display:flex;gap:.45rem;margin-top:.1rem}
  .selects .size-select{flex:1;width:auto;margin-top:0}
  .card .imgwrap img{transition:transform .6s cubic-bezier(.2,.7,.2,1), opacity .25s ease}


  /* ===== multi-page routing ===== */
  .page{display:none}
  .page.active{display:block;animation:pageIn .5s ease both}
  @keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .page-pad{padding-top:74px}
  .page .block:first-child{padding-top:clamp(6px,1.2vh,16px)}

  /* ===== global 3D background (every page) ===== */
  .block{padding-block:clamp(24px,4.5vh,60px)}
  #bg3d{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5}
  #bg3d canvas{display:block;width:100%;height:100%}
  .page,footer{position:relative;z-index:1}
  header{position:fixed;z-index:50}
  .scrollbar{position:fixed;z-index:80}.overlay{position:fixed;z-index:60}.drawer{position:fixed;z-index:65}.mobile-menu{position:fixed;z-index:45}

  /* ===== bigger logo ===== */
  .brand .logo-img{height:46px}
  .foot-logo{height:72px}
  @media (max-width:480px){ .brand .logo-img{height:38px} }

  /* ===== clickable product cards ===== */
  .card.pcard{cursor:pointer}
  .view-hint{font-family:var(--hud);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin-top:.2rem}
  .card.pcard:hover .view-hint{color:var(--ember)}

  /* ===== product detail ===== */
  .pdetail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:start}
  .pdetail .media{position:relative;border:1px solid var(--line);background:var(--panel);aspect-ratio:4/5;overflow:hidden}
  .pdetail .media img{width:100%;height:100%;object-fit:cover;transition:opacity .25s ease}
  .pdetail .info .ey{margin-bottom:1rem}
  .pdetail .info h1{font-family:var(--display);text-transform:uppercase;font-size:clamp(2rem,4.4vw,3.4rem);line-height:.95;margin-bottom:.6rem}
  .pdetail .price-lg{font-family:var(--hud);font-weight:700;font-size:1.3rem;margin-bottom:1.4rem;color:var(--bone)}
  .pdetail .desc{color:var(--bone);opacity:.82;margin-bottom:1.6rem;max-width:46ch}
  .pdetail .selects{margin-bottom:1rem}
  .pdetail .add{max-width:340px}
  .back-link{display:inline-flex;gap:.5rem;font-family:var(--hud);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--smoke);margin-bottom:1.6rem}
  .back-link:hover{color:var(--orange)}
  .pdetail .soldout-lg{font-family:var(--hud);letter-spacing:.16em;text-transform:uppercase;background:var(--orange);color:var(--void);padding:.7rem 1.1rem;display:inline-block;font-weight:700}

  /* ===== 360 spin viewer ===== */

  /* ===== community / worn by you ===== */
  .commgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
  .commcard{position:relative;aspect-ratio:1/1;border:1px solid var(--line);background:var(--panel);overflow:hidden;display:flex;align-items:flex-end}
  .commcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .commcard .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--line-strong);font-family:var(--hud);letter-spacing:.2em;font-size:.7rem}
  .commcard .frame{position:absolute;inset:10px;border:1px solid var(--line-strong);pointer-events:none}
  .commcard .cap{position:relative;z-index:2;width:100%;padding:.9rem;background:linear-gradient(to top,rgba(5,5,5,.9),transparent)}
  .commcard .cap .nm{font-family:var(--display);text-transform:uppercase;font-size:1rem;line-height:1}
  .commcard .cap .hd{font-family:var(--hud);font-size:.62rem;letter-spacing:.12em;color:var(--orange)}
  @media (max-width:900px){ .commgrid{grid-template-columns:repeat(2,1fr)} .pdetail{grid-template-columns:1fr} }

  /* ===== contact ===== */
  .contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,56px)}
  .cform{display:flex;flex-direction:column;gap:.8rem;max-width:560px}
  .cform input,.cform textarea{background:var(--void);border:1px solid var(--line-strong);color:var(--bone);padding:1rem 1.1rem;font-family:var(--hud);letter-spacing:.04em;font-size:.9rem;width:100%}
  .cform textarea{min-height:150px;resize:vertical}
  .cform input:focus,.cform textarea:focus{border-color:var(--orange);outline:none}
  .cform .cmsg{font-family:var(--hud);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;min-height:1rem;color:var(--orange)}
  .contact-side .row{padding:1rem 0;border-bottom:1px solid var(--line)}
  .contact-side .k{font-family:var(--hud);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke)}
  .contact-side .val{font-family:var(--display);text-transform:uppercase;font-size:1.2rem;margin-top:.2rem}
  .contact-side .val a:hover{color:var(--orange)}
  @media (max-width:820px){ .contact-grid{grid-template-columns:1fr} }


  /* fully transparent header — no scrim, so no dark strip where it meets the page.
     Legibility comes from text/drop shadows instead of a background. */
  header, header.scrolled{background:none !important;background-color:transparent !important;
    backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
    border-bottom:none !important;box-shadow:none !important}
  .brand .logo-img{filter:drop-shadow(0 2px 12px rgba(0,0,0,.9))}
  .links a,.cart-btn{text-shadow:0 1px 10px rgba(0,0,0,.95)}
  .cart-btn{background:rgba(5,5,5,.35)}
  .burger span{box-shadow:0 1px 8px rgba(0,0,0,.9)}

  /* glassy see-through mobile menu */
  .mobile-menu{background:rgba(6,6,6,0.72) !important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}

  /* transparent "glass" boxes so the 3D shows through behind products/text */
  .card{background:rgba(12,12,11,0.40) !important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .signup{background:radial-gradient(80% 140% at 100% 0%, rgba(255,106,0,0.16), transparent 60%), rgba(12,12,11,0.38) !important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .commcard{background:rgba(12,12,11,0.40) !important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .pdetail .media{background:rgba(12,12,11,0.38) !important}
  .spin{background:rgba(6,6,6,0.40) !important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .stats{--x:0}

  /* glass hero so the 3D shows through behind FOLLOW YOUR INSTINCTS */
  .hero{background:radial-gradient(120% 90% at 80% 10%, rgba(255,106,0,0.12), transparent 55%), rgba(10,10,10,0.32) !important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

  /* ===== mission / Products of Time ===== */
  .mission{max-width:780px;margin-inline:auto;text-align:center;border:1px solid var(--line);
    background:radial-gradient(100% 120% at 50% 0%, rgba(255,106,0,0.10), transparent 60%), rgba(12,12,11,0.38);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:clamp(30px,6vw,72px)}
  .mission-h{font-family:var(--display);text-transform:uppercase;font-size:clamp(2rem,5.4vw,3.8rem);line-height:.9;margin:.7rem 0 2.2rem}
  .mission-h em{font-style:normal;color:var(--orange)}
  .mission-body p{color:var(--bone);opacity:.85;margin-bottom:1.3rem;font-size:1.04rem}
  .mission-body .lead-line{font-family:var(--display);text-transform:uppercase;opacity:1;font-size:clamp(1.3rem,2.7vw,2rem);line-height:1.12;letter-spacing:.01em;margin-bottom:2rem}
  .mission-body .staccato{font-family:var(--hud);text-transform:uppercase;letter-spacing:.16em;font-size:.9rem;line-height:2.1;color:var(--bone);opacity:1;margin:1.7rem 0}
  .mission-body .big-line{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.6rem,3.6vw,2.8rem);color:var(--orange);opacity:1;margin:1.9rem 0}
  .mission-close{display:flex;flex-direction:column;gap:.35rem;margin-top:2.4rem !important;padding-top:2rem;border-top:1px solid var(--line)}
  .mission-close span{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.4rem,3.2vw,2.3rem);line-height:1;opacity:1}
  .mission-close span:last-child{color:var(--orange)}

  .card .selects{margin-top:.6rem}
  .card .add{margin-top:.5rem}
  .card .view-hint{display:block;margin-top:.6rem}

  /* FIX: hero-meta was absolutely pinned to the hero bottom and collided with
     the headline/buttons once the hero shrank. Put it back in normal flow. */
  .hero{flex-direction:column;justify-content:center;align-items:stretch;
        padding-bottom:clamp(78px,9vh,116px)}
  .hero-meta{position:static;left:auto;bottom:auto;
        width:100%;max-width:var(--maxw);margin:clamp(22px,4vh,46px) auto 0;
        padding-inline:var(--gut);gap:clamp(1.2rem,4vw,2.4rem)}

  /* mission now lives in the right column of the ethos section */
  .about{align-items:start}
  .about .mission{max-width:none;margin:0}
  .about .mission-h{font-size:clamp(1.7rem,3.2vw,2.9rem);margin:.6rem 0 1.6rem}
  .about .mission-body p{font-size:.97rem;margin-bottom:1.1rem}
  .about .mission-body .lead-line{font-size:clamp(1.15rem,1.9vw,1.7rem);margin-bottom:1.5rem}
  .about .mission-body .staccato{font-size:.82rem;line-height:1.95;margin:1.25rem 0}
  .about .mission-body .big-line{font-size:clamp(1.4rem,2.6vw,2.3rem);margin:1.4rem 0}
  .about .mission-close{margin-top:2rem !important}
  .about .mission-close span{font-size:clamp(1.2rem,2.2vw,1.9rem)}

  /* Ethos section now carries the full mission statement */
  .ethos-mission{max-width:840px;margin-inline:auto;text-align:center;border:1px solid var(--line);
    background:radial-gradient(100% 120% at 50% 0%, rgba(255,106,0,0.10), transparent 60%), rgba(12,12,11,0.38);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:clamp(30px,6vw,76px)}
  .ethos-saying{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.8rem,4.6vw,3.2rem);
    line-height:.98;letter-spacing:.01em;margin:.9rem 0 2.6rem;color:var(--bone)}
  .ethos-saying em{font-style:normal;color:var(--orange)}



  /* single-line hero headline — bigger, with an animated light sweep */
  
  
  100%{background-position:-65% 0}}
  @media (prefers-reduced-motion:reduce){  }

  
  
  
             /* remove the color-filling light sweep */
  
  }
  @media (prefers-reduced-motion:reduce){  }

  
  
  

  
  
  
  
  
  
  
  
  

  /* ===== hero headline — single clean outline, one line, left aligned ===== */
  .hero-inner{text-align:left}
  .hero h1{
    font-size:clamp(2rem,8.6vw,8.6rem);
    line-height:1;letter-spacing:.015em;white-space:nowrap;
    margin-bottom:1.6rem;position:relative;
    color:transparent;
    -webkit-text-fill-color:transparent;
    -webkit-text-stroke:1.5px var(--bone);
    animation:heroIn .9s .25s both;
    filter:none;text-shadow:none;
  }
  .hero h1 .o{
    color:transparent;-webkit-text-fill-color:transparent;
    -webkit-text-stroke:1.5px var(--orange);
  }
  .hero h1::after,.hero h1 .o::after{content:none !important;display:none !important}
  /* bigger viewfinder brackets */
  .reticle .corner{width:clamp(52px,6vw,84px);height:clamp(52px,6vw,84px);border-width:3px}
  /* desktop: keep hero text clear of the reticle logo on the right */
  @media (min-width:900px){
    .hero h1{font-size:clamp(2rem,6.4vw,6.4rem)}
  }
  @media (prefers-reduced-motion:reduce){ .hero h1{animation:none} }

  /* front / back product views */
  .views{margin-top:1.6rem}
  .views-lbl{display:block;margin-bottom:.7rem}
  .views-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
  .view{margin:0;border:1px solid var(--line);background:var(--panel);position:relative;overflow:hidden}
  .view img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .view:hover img{transform:scale(1.05)}
  .view figcaption{position:absolute;left:0;bottom:0;width:100%;padding:.45rem .6rem;
    font-family:var(--hud);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);
    background:linear-gradient(to top, rgba(5,5,5,.9), transparent)}
  .view.empty{display:grid;place-items:center;aspect-ratio:4/5}
  .view.empty .ph{font-family:var(--hud);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke)}

  .shop-filter{display:flex;align-items:center;gap:.6rem}
  .shop-filter .size-select{width:auto;min-width:130px;margin-top:0}

  .acct-btn{display:grid;place-items:center;width:34px;height:34px;flex:none;
    border:none;background:none;color:var(--bone);
    transition:color .25s ease,transform .2s ease}
  .acct-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 6px rgba(0,0,0,.9))}
  .acct-btn:hover{color:var(--orange);transform:translateY(-1px)}

  /* Shop nav dropdown */
  .has-drop{position:relative;display:inline-block}
  .has-drop > a{display:inline-flex;align-items:center;gap:.35rem}
  .caret{font-style:normal;font-size:.6rem;color:var(--orange);transition:transform .2s ease}
  .has-drop:hover .caret{transform:translateY(2px)}
  .drop{position:absolute;top:100%;left:0;min-width:170px;padding:.4rem 0;
    background:rgba(8,8,8,.92);backdrop-filter:blur(14px);border:1px solid var(--line-strong);
    display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;z-index:60}
  .has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
  .drop a{padding:.6rem 1rem;font-family:var(--hud);font-size:.7rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--bone);opacity:.85}
  .drop a::after{display:none}
  .drop a:hover{background:rgba(255,106,0,.1);color:var(--orange);opacity:1}
  .drop a.active{color:var(--orange);opacity:1}
  /* mobile sub-links */
  .m-sub{display:flex;gap:1.4rem;padding:.2rem 0 .9rem;border-bottom:1px solid var(--line)}
  .m-sub a{font-family:var(--hud) !important;font-size:.72rem !important;letter-spacing:.18em;
    text-transform:uppercase;color:var(--smoke) !important;border:none !important;padding:0 !important}
  .m-sub a.active,.m-sub a:hover{color:var(--orange) !important}

  /* tighten the gap between the hero and The Drop */
  #page-home .hero + .block{padding-top:clamp(4px,1vh,14px)}

  /* clickable lookbook tiles */
  .look .tile[data-nav]{cursor:pointer}
  .look .tile[data-nav]:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
  .look .tile .shopnow{display:inline-block;margin-top:.55rem;font-family:var(--hud);font-size:.62rem;
    letter-spacing:.18em;text-transform:uppercase;color:var(--orange);
    opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
  .look .tile[data-nav]:hover .shopnow,.look .tile[data-nav]:focus-visible .shopnow{opacity:1;transform:none}
  @media (hover:none){ .look .tile .shopnow{opacity:1;transform:none} }
/* ================= Shopify theme additions ================= */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--orange);color:var(--void);
  padding:.7rem 1rem;font-family:var(--hud);text-transform:uppercase;letter-spacing:.16em;font-size:.7rem}
.skip:focus{left:0}
.announce{position:relative;z-index:2;border-bottom:1px solid var(--line);background:rgba(5,5,5,.6)}
.announce-in{display:flex;justify-content:center;padding:.55rem 0;text-align:center}
header{top:0}
.pager{margin-top:2.4rem;display:flex;justify-content:center;gap:.6rem;font-family:var(--hud);
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.pager a,.pager span{padding:.5rem .8rem;border:1px solid var(--line-strong);color:var(--bone)}
.pager a:hover{border-color:var(--orange);color:var(--orange)}
.card .name a,.legal a{color:inherit}
.card .name a:hover{color:var(--orange)}
.legal a{margin-right:.8rem}
.legal a:hover{color:var(--orange)}
.pdetail .desc p{margin-bottom:.9rem}
.mission-body ul{padding-left:1.2rem;margin-bottom:1rem}