/* K2 Athletics - shared styles (brand kit, exact). Page-specific rules live inline per page. */
:root{
  --bg:#0B0B0C; --s1:#151517; --s2:#1D1D20; --line:#232327;
  --w:#FAFAFA; --t:#A6A6AD; --m:#6E6E75; --volt:#E8FF2E;
  --gut:16px; --bar:56px; --nav:56px; --max:1100px;
}
@font-face{font-family:"Inter"; font-style:normal; font-weight:400 600; font-display:swap; src:url("fonts/inter.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Anton"; src:url("Anton-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg); color:var(--t); font:400 16px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-text-size-adjust:100%; overflow-x:clip; scroll-padding-top:calc(var(--nav) + 12px)}
body{background:var(--bg); min-height:100svh; overflow-x:clip}
img{display:block; max-width:100%}
ul,ol{list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--volt); outline-offset:3px}
::selection{background:var(--volt); color:var(--bg)}
h1,h2,h3,.anton{font-family:Anton,"Archivo Black",Impact,sans-serif; font-weight:400; text-transform:uppercase; color:var(--w); line-height:1; letter-spacing:.004em; text-wrap:balance}
h1{font-size:clamp(2.6rem,12vw,5rem)}
h2{font-size:clamp(2.5rem,10.5vw,4.75rem)}
h3{font-size:clamp(1.75rem,7.2vw,2.25rem)}
.v{color:var(--volt)}
p{max-width:62ch}
.eyebrow{display:flex; align-items:center; gap:12px; margin-bottom:22px; font:500 12px/1 Inter,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--m)}
.eyebrow i{font-style:normal; color:var(--volt); font-family:Anton,sans-serif; font-size:14px; letter-spacing:.04em}
.eyebrow::before{content:""; width:20px; height:1px; background:var(--m)}
.muted{color:var(--m)} .small{font-size:13px}
.lbl{font:500 11px/1 Inter,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--m)}
.tax{font-size:11px; color:var(--m); line-height:1.4}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gut)}
.sec{padding:72px 0}
.sec + .sec{border-top:1px solid var(--line)}

/* buttons, chips */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:52px; padding:0 22px; border-radius:12px; border:1px solid transparent; font:600 15px/1 Inter,sans-serif; letter-spacing:-.01em; text-decoration:none; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:transform .09s ease, background-color .2s ease, border-color .2s ease; background:none; color:inherit}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--volt); color:var(--bg)} .btn-p:hover{background:#F2FF6B}
.btn-g{background:var(--s2); color:var(--w); border-color:var(--line)} .btn-g:hover{border-color:#3A3A40}
.btn[disabled]{opacity:.45; pointer-events:none}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; min-height:30px; padding:0 11px; border:1px solid var(--line); border-radius:6px; background:rgba(11,11,12,.55); font:500 11px/1 Inter,sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--t); white-space:nowrap}
.chip-v{color:var(--volt); border-color:rgba(232,255,46,.35)}

/* progress bar */
#progress{position:fixed; top:0; left:0; z-index:100; width:100%; height:2px; background:var(--volt); transform:scaleX(0); transform-origin:0 50%; pointer-events:none}

/* nav */
.nav{position:sticky; top:0; z-index:50; background:rgba(11,11,12,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--max); margin:0 auto; padding:0 var(--gut); height:var(--nav); display:flex; align-items:center; gap:16px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--w); min-height:44px}
.brand img{width:34px; height:24px}
.brand b{font:400 17px/1 Anton,sans-serif; letter-spacing:.06em; text-transform:uppercase; padding-top:2px}
.nav-links{display:none; gap:26px; margin-left:16px}
.nav-links a{color:var(--t); text-decoration:none; font:500 14px/1 Inter,sans-serif; padding:14px 0}
.nav-links a:hover{color:var(--w)}
.nav-cta{display:none; width:auto; min-height:40px; padding:0 16px; font-size:14px; margin-left:auto}
.lang{margin-left:auto; display:flex; align-items:center; gap:8px; font:500 12px/1 Inter,sans-serif; letter-spacing:.08em; color:var(--m); min-height:44px}
.lang a{color:var(--m); text-decoration:none; padding:12px 2px} .lang a:hover{color:var(--w)} .lang b{color:var(--w); font-weight:500}
.menu summary{list-style:none; cursor:pointer; min-height:44px; min-width:44px; display:flex; align-items:center; justify-content:flex-end; font:500 12px/1 Inter,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--w); -webkit-tap-highlight-color:transparent}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{color:var(--m)}
.menu-panel{position:fixed; left:0; right:0; top:var(--nav); z-index:49; background:var(--bg); border-bottom:1px solid var(--line); padding:4px var(--gut) 20px}
.menu-panel a:not(.btn){display:block; padding:16px 0; border-bottom:1px solid var(--line); text-decoration:none; font:400 30px/1 Anton,sans-serif; text-transform:uppercase; color:var(--w)}
.menu-panel .btn{margin-top:16px}

/* footer */
.foot{border-top:1px solid var(--line); padding:44px 0 calc(32px + var(--bar) + env(safe-area-inset-bottom))}
.foot .brand{margin-bottom:12px} .foot .tag{font-size:14px; color:var(--t)}
.foot-cols{display:grid; gap:28px; margin-top:32px}
.foot-cols h4{font:500 11px/1 Inter,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--m); margin-bottom:12px}
.foot-cols a{display:block; color:var(--t); text-decoration:none; font-size:14px; padding:7px 0} .foot-cols a:hover{color:var(--w)}
.copy{margin-top:36px; padding-top:20px; border-top:1px solid var(--line); font-size:12px; color:var(--m)}

/* sticky bar (mobile) */
#bar{position:fixed; left:0; right:0; bottom:0; z-index:60; height:calc(var(--bar) + env(safe-area-inset-bottom)); padding:6px var(--gut) calc(6px + env(safe-area-inset-bottom)); background:rgba(11,11,12,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .3s ease}
#bar.on:not(.kb){transform:none}
#bar .btn{width:100%; min-height:44px; border-radius:10px}

/* forms */
.field{display:grid; gap:8px}
.field label{font:500 13px/1.3 Inter,sans-serif; color:var(--w)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=number],.field select,.field textarea{width:100%; min-height:52px; padding:0 16px; border-radius:12px; border:1px solid var(--line); background:var(--s2); color:var(--w); font:500 17px/1.3 Inter,sans-serif; -webkit-appearance:none; appearance:none}
.field textarea{padding:14px 16px; min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--volt); outline-offset:0; border-color:transparent}
.check{display:flex; gap:12px; align-items:flex-start; min-height:44px; padding:6px 0; font-size:14px; color:var(--t); cursor:pointer}
.check input{flex:none; width:22px; height:22px; margin-top:1px; accent-color:var(--volt)}

/* motion (transform/opacity only) */
html.static #bar,html.static #progress{display:none}
html.static .nav{position:relative}
html.static .sc-head{position:static}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
  html.js:not(.static) .rv{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
  html.js:not(.static) .rv.in{opacity:1; transform:none}
  @supports (animation-timeline: scroll()){
    #progress{animation:grow linear both; animation-timeline:scroll(root)}
    @keyframes grow{from{transform:scaleX(0)} to{transform:scaleX(1)}}
  }
}
@media (min-width:720px){
  :root{--gut:28px}
  .btn{width:auto}
  .foot-cols{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:900px){
  :root{--gut:32px; --nav:64px}
  .sec{padding:104px 0}
  .nav-links{display:flex} .nav-cta{display:inline-flex} .lang{margin-left:0} .menu{display:none}
  .foot{padding-bottom:48px}
  .foot-top{display:flex; justify-content:space-between; align-items:flex-end; gap:40px}
  .foot-cols{grid-template-columns:2fr 1fr 1fr 2fr; gap:40px}
  #bar{display:none}
}

/* consent (small, bottom, one tap) */
.consent{position:fixed; left:12px; right:12px; bottom:calc(12px + var(--bar) + env(safe-area-inset-bottom)); z-index:70; background:var(--s1); border:1px solid var(--line); border-radius:12px; padding:14px 16px; display:grid; gap:12px; max-width:520px; margin:0 auto}
.consent p{font-size:13px; line-height:1.45; color:var(--t); max-width:none}
.consent a{color:var(--w)}
.consent .row{display:flex; gap:8px}
.consent .btn{min-height:40px; width:auto; flex:1; font-size:14px; border-radius:10px}
@media (min-width:900px){ .consent{bottom:16px; left:auto; right:16px; margin:0} }