/* Hammer Wear — site styles */
:root{
    --k:#0A0A0A; --k2:#111111; --k3:#181818;
    --w:#FFFFFF; --w2:#A3A3A3; --w3:#6A6A6A;
    --y:#F2D518; --r:#FE0000;
    --edge:rgba(255,255,255,.13); --edge2:rgba(255,255,255,.28);
    --dsp:'Archivo',Helvetica,Arial,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
    --pad:clamp(20px,4.4vw,60px);
    --maxw:1320px;
  }
  *{box-sizing:border-box}
  body{margin:0; background:var(--k); color:var(--w); font-family:var(--dsp); font-size:16px; line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased}
  h1,h2,h3{font-family:var(--dsp); font-weight:800; letter-spacing:-.028em; line-height:.96; margin:0; text-transform:uppercase}
  p{margin:0}
  a{color:inherit; text-decoration:none}
  img{display:block; max-width:100%; height:auto}
  :focus-visible{outline:2px solid var(--y); outline-offset:3px}
  .wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad)}

  /* tracked micro-labels — straight from the catalogue's own furniture */
  .mi{font-size:10.5px; font-weight:500; letter-spacing:.34em; text-transform:uppercase; color:var(--w3)}
  .mi.y{color:var(--y)} .mi.w{color:var(--w)}
  .code{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--w3)}
  .y{color:var(--y)} .r{color:var(--r)}

  header{position:fixed; inset:0 0 auto 0; z-index:80; background:rgba(10,10,10,.93); border-bottom:1px solid var(--edge)}
  .hr{display:flex; align-items:center; gap:26px; height:58px; padding:0 var(--pad)}
  .brand{display:flex; align-items:center; gap:11px}
  .brand img{width:17px}
  .brand b{font-weight:800; font-size:14px; letter-spacing:.22em; white-space:nowrap}
  @media(max-width:460px){.brand b{font-size:12px; letter-spacing:.14em} .hmail{font-size:10px}}
  nav{display:flex; gap:24px; margin-left:auto; font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--w2)}
  nav a:hover{color:var(--y)}
  .hmail{font-family:var(--mono); font-size:11.5px; color:var(--w2)}
  .hmail:hover{color:var(--y)}
  .menu{display:none; margin-left:auto; background:transparent; border:1px solid var(--edge2); color:var(--w);
        font-family:var(--dsp); font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
        padding:10px 14px; cursor:pointer; align-items:center; gap:9px}
  .menu i{display:block; width:14px; height:9px; border-top:1px solid currentColor; border-bottom:1px solid currentColor; position:relative}
  .menu[aria-expanded="true"] i{border-color:transparent}
  .menu[aria-expanded="true"] i::before{content:''; position:absolute; inset:4px -1px auto; height:1px; background:currentColor; transform:rotate(45deg)}
  .menu[aria-expanded="true"] i::after{content:''; position:absolute; inset:4px -1px auto; height:1px; background:currentColor; transform:rotate(-45deg)}
  .mnav{position:fixed; inset:58px 0 0; z-index:70; background:var(--k); padding:8px var(--pad) 40px;
        display:flex; flex-direction:column; overflow-y:auto}
  .mnav[hidden]{display:none}
  .mnav a{padding:20px 0; border-bottom:1px solid var(--edge); font-size:22px; font-weight:700;
          letter-spacing:-.01em; text-transform:uppercase}
  .mnav a:active{color:var(--y)}
  .mnav .mail{margin-top:26px; font-family:var(--mono); font-size:13px; color:var(--y); text-transform:none; border:0; padding:0}
  @media(max-width:1080px){
    nav{display:none}
    .menu{display:flex}
    .hr .hmail{display:none}
  }
  @media(min-width:1081px){.mnav{display:none !important}}

  .btn{display:inline-block; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
       padding:14px 26px; background:var(--y); color:#0A0A0A; border:1px solid var(--y); cursor:pointer; font-family:var(--dsp)}
  .btn.o{background:transparent; color:var(--w); border-color:var(--edge2)}
  .btn.o:hover{border-color:var(--y); color:var(--y)}
  .pill{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--edge2); border-radius:40px;
        padding:8px 16px; font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase}

  /* ---------------- hero ---------------- */
  .hero{min-height:100svh; padding:104px 0 84px; display:flex; align-items:center; position:relative; overflow:hidden}
  .hero .in{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(24px,4vw,64px); align-items:center; width:100%}
  .hero h1{font-size:clamp(40px,6.2vw,94px); letter-spacing:-.04em}
  .hero h1 span{display:block}
  .hero .lede{margin-top:26px; color:var(--w2); font-size:clamp(15px,1.35vw,17.5px); max-width:46ch; line-height:1.62; font-weight:400}
  .hero .pills{display:flex; gap:10px; flex-wrap:wrap; margin-top:30px}
  .hero .acts{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
  .shot{position:relative; perspective:1400px}
  .shot img{width:100%; transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) translateZ(0); transition:transform .18s linear}
  .shot::after{content:''; position:absolute; left:8%; right:8%; bottom:6%; height:22px; border-radius:50%;
               background:radial-gradient(ellipse at center,rgba(0,0,0,.85),transparent 70%); filter:blur(6px)}
  .hero .corner{position:absolute; bottom:22px; left:var(--pad); right:var(--pad); display:flex; justify-content:space-between; gap:16px}
  @media(max-width:1100px){.hero .acts .btn{padding:13px 18px; font-size:10.5px}}
  @media(max-width:900px){
    .hero .in{grid-template-columns:1fr; gap:26px}
    .hero{padding-top:88px}
    .hero .corner{display:none}
  }

  /* ---------------- section frame ---------------- */
  section{position:relative; padding:clamp(64px,9vh,120px) 0; border-top:1px solid var(--edge)}
  .head{margin-bottom:clamp(30px,4vw,56px)}
  .head h2{font-size:clamp(34px,6.2vw,86px); margin-top:14px}
  .head p{color:var(--w2); font-size:16px; max-width:58ch; margin-top:18px; font-weight:400}
  .foot{display:flex; justify-content:space-between; gap:20px; margin-top:44px; padding-top:14px; border-top:1px solid var(--edge)}

  /* ---------------- construction (sticky, annotated photo) ---------------- */
  #construction{padding:0; border-top:1px solid var(--edge)}
  .cwrap{position:relative; height:340vh}
  .cstick{position:sticky; top:0; height:100svh; display:flex; align-items:center; overflow:hidden}
  .cgrid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(20px,4vw,60px); align-items:center; width:100%}
  .cfig{position:relative}
  .cfig img{width:100%}
  .cfig svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
  .dot{position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--y);
       opacity:0; transform:scale(.4); transition:opacity .25s,transform .25s}
  .dot.on{opacity:1; transform:scale(1)}
  .dot::after{content:''; position:absolute; inset:-7px; border:1px solid var(--y); border-radius:50%; opacity:.45}
  .clist{display:grid; gap:0}
  .crow{padding:15px 0; border-top:1px solid var(--edge); display:grid; grid-template-columns:34px 1fr; gap:14px;
        opacity:.3; transition:opacity .3s}
  .crow.on{opacity:1}
  .crow em{font-style:normal; font-family:var(--mono); font-size:11px; color:var(--w3); padding-top:3px}
  .crow.on em{color:var(--y)}
  .crow b{display:block; font-size:15px; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
  .crow p{font-size:13.5px; color:var(--w2); margin-top:3px; font-weight:400}
  .crow .m{font-family:var(--mono); font-size:11.5px; color:var(--y); margin-top:5px}
  .ctitle{position:absolute; top:88px; left:var(--pad)}
  @media(max-width:1000px){
    .cwrap{height:300vh}
    .cstick{flex-direction:column; justify-content:center; align-items:stretch; padding:74px var(--pad) 26px; gap:8px}
    .ctitle{position:static}
    .ctitle h2{font-size:clamp(26px,5.4vw,40px)}
    .cstick .wrap{padding-inline:0; max-width:none; width:100%}
    .cgrid{grid-template-columns:1fr; gap:8px}
    .cfig{max-width:100%; margin:0}
    .crow{padding:11px 0}
    .crow p{display:none}
  }
  @media(max-width:1000px) and (min-height:900px){
    .crow p{display:block}
  }

  /* ---------------- insole 3d ---------------- */
  #insole{padding:0}
  .iwrap{position:relative; height:320vh}
  .istick{position:sticky; top:0; height:100svh; overflow:hidden}
  #gl{position:absolute; inset:0; width:100%; height:100%}
  .icopy{position:absolute; top:96px; left:var(--pad); max-width:min(430px,72%)}
  .ilist{position:absolute; right:var(--pad); top:50%; transform:translateY(-50%); width:min(300px,38%)}
  .irow{padding:13px 0; border-top:1px solid var(--edge); opacity:.28; transition:opacity .3s}
  .irow.on{opacity:1}
  .irow .t{display:block}
  .irow b{display:block; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1.35}
  .irow .v{display:block; font-family:var(--mono); font-size:11px; color:var(--y); margin-top:4px}
  .irow em{font-style:normal; font-family:var(--mono); font-size:11px; color:var(--w3); margin-right:10px}
  .no3d-note{display:none}
  body.no3d .no3d-note{display:block}
  body.no3d #gl{display:none}
  @media(max-width:1000px){
    .iwrap{height:280vh}
    .icopy{top:74px; max-width:none; right:var(--pad)}
    .icopy h2{font-size:clamp(26px,5.4vw,40px)}
    .ilist{position:absolute; right:var(--pad); left:var(--pad); top:auto; bottom:24px; transform:none; width:auto}
    .irow{padding:10px 0}
  }

  /* ---------------- lineup ---------------- */
  .lineup{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--edge); border:1px solid var(--edge)}
  @media(max-width:980px){.lineup{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.lineup{grid-template-columns:1fr}}
  .card{background:var(--k); padding:18px 18px 22px; position:relative; display:flex; flex-direction:column}
  .card .top{display:flex; justify-content:space-between; align-items:center}
  .card .nfc{border:1px solid var(--y); color:var(--y); border-radius:20px; padding:3px 9px; font-size:9px; font-weight:600; letter-spacing:.16em}
  .card img{margin:16px 0 20px; width:100%; aspect-ratio:4/3; object-fit:contain}
  .card h3{font-size:20px; letter-spacing:-.01em}
  .card .code{margin-top:8px}
  .card .sz{margin-top:auto; padding-top:14px; font-size:12px; color:var(--w2); font-weight:400}
  .card:hover{background:var(--k2)}

  /* ---------------- certification ---------------- */
  .cert{display:grid; grid-template-columns:1fr 210px; gap:clamp(24px,4vw,56px); align-items:start}
  @media(max-width:860px){.cert{grid-template-columns:1fr}}
  .icons{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
  @media(max-width:640px){.icons{grid-template-columns:repeat(2,1fr)}}
  .ic{background:var(--k2); border:1px solid var(--edge); padding:18px 16px 16px}
  .ic img{height:56px; width:auto; margin:6px auto 22px}
  .ic span{display:block; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--y); line-height:1.5}
  .marks div{margin-bottom:26px}
  .marks b{font-family:var(--dsp); font-weight:800; font-size:54px; color:var(--y); letter-spacing:-.03em; line-height:1}
  .marks span{display:block; font-size:10.5px; font-weight:600; letter-spacing:.16em; color:var(--w2); margin-top:6px}

  /* ---------------- nfc ---------------- */
  .nfcgrid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center}
  @media(max-width:900px){.nfcgrid{grid-template-columns:1fr}}
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--edge); border:1px solid var(--edge); margin-top:34px}
  @media(max-width:640px){.steps{grid-template-columns:1fr}}
  .steps div{background:var(--k); padding:18px 16px 20px}
  .steps b{display:block; font-size:13px; font-weight:700; letter-spacing:.1em; margin-top:10px}
  .readout{background:var(--k2); border:1px solid var(--edge); padding:24px}
  .readout .ring{width:132px; height:132px; margin:6px auto 22px; border:1px solid var(--y); border-radius:50%;
                 display:grid; place-items:center; position:relative}
  .readout .ring::after{content:''; position:absolute; inset:-14px; border:1px solid rgba(242,213,24,.3); border-radius:50%; animation:pulse 3s ease-out infinite}
  @keyframes pulse{0%{transform:scale(.86); opacity:.9}100%{transform:scale(1.14); opacity:0}}
  .readout .ring img{width:40px; opacity:.85}
  .kv{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-family:var(--mono); font-size:12px}
  .kv dt{color:var(--w3)} .kv dd{margin:0; color:var(--w)}
  .kv dd.ok{color:var(--y)}

  /* ---------------- spec tables ---------------- */
  .tabs{display:flex; gap:0; border:1px solid var(--edge); border-bottom:0; flex-wrap:wrap}
  .tabs button{flex:1 1 auto; background:transparent; border:0; border-right:1px solid var(--edge); color:var(--w2);
    font-family:var(--dsp); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; padding:15px 12px; cursor:pointer}
  .tabs button[aria-selected="true"]{background:var(--y); color:#0A0A0A}
  @media(max-width:620px){
    .tabs{display:grid; grid-template-columns:1fr 1fr}
    .tabs button{border-bottom:1px solid var(--edge)}
    .tabs button:nth-child(2n){border-right:0}
  }
  .panel{border:1px solid var(--edge); padding:clamp(20px,3vw,34px)}
  .panel[hidden]{display:none}
  .spec{display:grid; grid-template-columns:132px 1fr; gap:0}
  @media(max-width:640px){.spec{grid-template-columns:1fr}}
  .spec dt{font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--w3); padding:14px 0; border-top:1px solid var(--edge)}
  .spec dd{margin:0; padding:14px 0; border-top:1px solid var(--edge); font-size:14.5px; color:var(--w); font-weight:400}
  @media(max-width:640px){.spec dd{padding-top:0; border-top:0}}
  .spec dt:first-of-type,.spec dd:first-of-type{border-top:0}

  /* ---------------- distribution / contact ---------------- */
  .dist{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:start}
  @media(max-width:900px){.dist{grid-template-columns:1fr}}
  form{background:var(--k2); border:1px solid var(--edge); padding:clamp(20px,3vw,32px)}
  .f{display:block; margin-bottom:16px}
  .f span{display:block; font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--w3); margin-bottom:7px}
  .f input,.f select,.f textarea{width:100%; background:var(--k); border:1px solid var(--edge); color:var(--w);
    font-family:var(--dsp); font-size:14.5px; padding:11px 12px; border-radius:0}
  .f input:focus,.f select:focus,.f textarea:focus{border-color:var(--y); outline:none}
  .fn{font-size:11px; letter-spacing:.06em; color:var(--w3); margin-top:12px; font-family:var(--mono)}
  .fn.ok{color:var(--y)} .fn.err{color:var(--r)}
  .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
  .f input[aria-invalid="true"],.f textarea[aria-invalid="true"]{border-color:var(--r)}
  .placebox{border:1px dashed var(--edge2); padding:20px; color:var(--w3); font-family:var(--mono); font-size:12px; margin-top:20px}

  footer{border-top:1px solid var(--edge); padding:52px 0 34px}
  .fg{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:30px; font-size:14px; color:var(--w2); font-weight:400}
  @media(max-width:820px){.fg{grid-template-columns:1fr 1fr}}
  .fg h4{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--w3); margin:0 0 14px; font-weight:600}
  .fg a{display:block; margin-bottom:7px}
  .fg a:hover{color:var(--y)}
  .fbot{margin-top:44px; padding-top:16px; border-top:1px solid var(--edge); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
  @media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}
/* accessibility: keyboard skip link */
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--y); color:#0A0A0A;
      padding:12px 18px; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase}
.skip:focus{left:8px; top:8px}

/* ---------------- portal login button ---------------- */
.portal{
  font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid var(--y); color:var(--y); padding:10px 16px; white-space:nowrap;
}
.portal:hover{background:var(--y); color:#0A0A0A}
.portal.soon{border-color:var(--edge2); color:var(--w3); cursor:default}
.portal.soon:hover{background:transparent; color:var(--w2)}
.portal.wide{display:block; text-align:center; margin-top:22px; padding:16px}
.mnav .portal.wide{font-size:12px}
@media(max-width:1080px){ .hr .portal{display:none} }

.portalcard{
  margin-top:26px; border:1px solid var(--edge); background:var(--k3); padding:22px;
}
.portalcard b{display:block; font-size:15px; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.portalcard p{font-size:13.5px; color:var(--w2); margin:6px 0 16px; font-weight:400; max-width:40ch}

/* ---------------- product cards link out ---------------- */
.card{text-decoration:none}
.cardgo{
  margin-top:12px; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--y);
}
.cardgo::after{content:' →'}
.card:hover .cardgo{text-decoration:underline; text-underline-offset:3px}

/* ---------------- product page ---------------- */
.pdp{padding:96px 0 40px}
.crumb{font-size:12px; color:var(--w3); margin-bottom:34px; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.crumb a:hover{color:var(--y)}
.crumb b{color:var(--w); font-weight:600}
.pdp-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,5vw,72px); align-items:center}
@media(max-width:900px){.pdp-grid{grid-template-columns:1fr; gap:22px} .pdp{padding-top:84px}}
.pdp-shot{background:var(--k2); border:1px solid var(--edge); padding:clamp(16px,3vw,40px)}
.pdp-body h1{font-size:clamp(34px,5vw,62px); margin-top:12px}
.pdp-sum{color:var(--w2); font-size:16px; margin-top:20px; max-width:46ch; font-weight:400}
.pdp-hl{list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0}
.pdp-hl li{padding:9px 0; border-top:1px solid var(--edge); font-size:13.5px; color:var(--w2)}
.pdp-hl li::before{content:'— '; color:var(--y)}
@media(max-width:520px){.pdp-hl{grid-template-columns:1fr}}
.pdp-h2{font-size:clamp(22px,3vw,34px); margin:clamp(48px,7vw,86px) 0 20px}
.pdp-con{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:26px}
.pdp-con em{font-style:normal; font-family:var(--mono); font-size:11px; color:var(--y); display:block}
.pdp-con b{display:block; font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-top:4px}
.pdp-con p{font-size:13px; color:var(--w2); margin-top:5px; font-weight:400}
.pdp-con .m{font-family:var(--mono); font-size:11px; color:var(--y); margin-top:6px}
.others{margin-top:0}