/* ==========================================================================
   4 ΞLΞMΞNTS — shared stylesheet
   Youth sports apparel. Black / white / element accents. No rounded corners.
   ========================================================================== */

:root{
  --ink:#000000;
  --paper:#ffffff;
  --bone:#f1f1ef;
  --smoke:#141414;
  --fire:#e11b22;
  --ice:#8cbce8;
  --earth:#1c4230;
  --wind:#6f6f6f;
  --line:rgba(255,255,255,.18);
  --line-dark:rgba(0,0,0,.14);
  --shell:1440px;
  --pad:clamp(18px,4vw,56px);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background: #000000;
  color:var(--ink);
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
}

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

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

.shell{max-width:var(--shell);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* --- type roles --------------------------------------------------------- */
.display{
  font-family:"Anton","Barlow Condensed",Impact,sans-serif;
  font-weight:400;
  letter-spacing:.005em;
  line-height:1;
  text-transform:uppercase;
  margin:0;
}
.meta{
  font-family:"Barlow Condensed","Barlow",sans-serif;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.dot{color:var(--fire)}

/* --- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:"Barlow Condensed","Barlow",sans-serif;
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  font-size:.82rem;padding:14px 26px;border:2px solid transparent;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn-fire{background:var(--fire);color:#fff}
.btn-fire:hover{background:#b8141a}
.btn-ghost-light{border-color:#fff;color:#fff;background:transparent}
.btn-ghost-light:hover{background:#fff;color:#000}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#333}
.btn-sm{padding:9px 20px;font-size:.72rem}

/* --- announcement + header --------------------------------------------- */
.ticker{
  background:var(--ink);color:#fff;text-align:center;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  letter-spacing:.2em;font-size:.66rem;text-transform:uppercase;
  padding:7px 12px;
}

.masthead{
  position:sticky;top:0;z-index:60;
  background:var(--ink);color:#fff;border-bottom:1px solid var(--line);
}
.masthead-in{
  display:flex;align-items:center;gap:22px;
  padding-top:10px;padding-bottom:10px;
}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand svg{width:50px;height:50px;color:#fff}
.brand-word{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  letter-spacing:.34em;font-size:.98rem;text-transform:uppercase;white-space:nowrap;
}
.nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav a{
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  letter-spacing:.14em;font-size:.78rem;text-transform:uppercase;
  padding-bottom:px;border-bottom:2px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--fire)}
.cart{display:flex;align-items:center;gap:7px;color:#fff}
.cart svg{width:20px;height:20px}
.cart-count{
  font-family:"Barlow Condensed",sans-serif;font-size:.72rem;font-weight:700;
  background:var(--fire);color:#fff;padding:1px 6px;
}
.nav-toggle{display:none;background:none;border:0;color:#fff;padding:6px}
.nav-toggle svg{width:26px;height:26px}

/* --- hero --------------------------------------------------------------- */
.hero{
  position:relative;background:#0a0a0a;color:#fff;
  min-height:min(88vh,760px);display:flex;align-items:flex-end;
  overflow:hidden;
}
.hero-media{
  position:absolute;inset:0;
  background-image:linear-gradient(105deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 46%,rgba(0,0,0,.25) 100%),url("images/Hero_Image.jpeg");
  background-size:cover;background-position:center 22%;background-color:#101010;
}
.hero-in{position:relative;width:100%;max-width:var(--shell);margin:0 auto;padding:0 var(--pad) clamp(36px,7vw,86px)}
.hero h1{font-size:clamp(3.1rem,9.4vw,7.4rem);max-width:11ch}
.hero p{
  font-family:"Barlow Condensed",sans-serif;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;font-size:clamp(.78rem,1.6vw,.95rem);
  margin:20px 0 26px;color:rgba(255,255,255,.86);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-rail{
  position:absolute;right:14px;top:0;bottom:0;
  display:flex;align-items:center;pointer-events:none;
}
.hero-rail span{
  writing-mode:vertical-rl;
  font-family:"Anton",sans-serif;text-transform:uppercase;
  font-size:clamp(1.1rem,2.1vw,1.8rem);letter-spacing:.04em;color:#fff;
}

/* --- sport strip -------------------------------------------------------- */
.sports{display:grid;grid-template-columns:repeat(4,1fr);background:var(--ink)}
.sport{
  position:relative;display:block;aspect-ratio:5/4;overflow:hidden;
  background:#191919 center/cover no-repeat;
}
.sport::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.05) 62%);
}
.sport-label{
  position:absolute;left:16px;bottom:14px;z-index:2;color:#fff;
  font-family:"Anton",sans-serif;text-transform:uppercase;
  font-size:clamp(1.2rem,2.6vw,2.1rem);line-height:1;
}
.sport-label i{display:block;width:52px;height:5px;margin-top:9px;background:#fff;font-style:normal}
.sport:hover .sport-label i{width:78px;transition:width .2s ease}
.s-hoops{background-image:url("images/1.jpeg")}
.s-football{background-image:url("images/2.jpeg")}
.s-soccer{background-image:url("images/3.jpeg")}
.s-track{background-image:url("images/4.jpeg")}
.s-hoops .sport-label i{background:var(--fire)}
.s-football .sport-label i{background:#3f7fd6}
.s-soccer .sport-label i{background:#2f8f4f}
.s-track .sport-label i{background:#b6b6b6}

/* --- core collection ---------------------------------------------------- */
.core{
  display:grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items:stretch;
  min-height: clamp(420px, 35vw, 600px);
  background: linear-gradient(90deg, #e7e7e3 0 50%, #000 50% 100%);
  overflow: hidden;
}
.core-half{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 0 clamp(16px, 2vw, 28px) clamp(20px, 2vw, 28px);
}
.core-light{
  background: transparent;
}
.core-dark{
  background: transparent;
  color: #fff;
}
.core-half img{
  margin: 0 auto;
  width: min(100%, 500px);
  max-height: 440px;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.16));
}
.core-name{
  font-family: "Anton", sans-serif;
  text-transform: uppercase;
  font-size: clamp(2rem, 2vw, 3rem);
  margin: 18px 0 12px;
  line-height: 1;
  letter-spacing: .04em;
}
.core-mid {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: transparent;
  color: #fff;
  text-align: center;
  padding: clamp(18px, 1.6vw, 26px) clamp(10px, 1vw, 18px) clamp(12px, 1.2vw, 20px);
  z-index: 1;
}
.core-mid h2{
  font-size: clamp(4.4rem, 4vw, 8.5rem);
  letter-spacing: -0.0em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
  background: linear-gradient(90deg, #000 0 49%, #fff 49% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.core-mid .kicker{
  font-family: "Anton", sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 1.55vw, 1.8rem);
  margin: 18px 0 0;
  line-height: 1.08;
  letter-spacing: .04em;
  background: linear-gradient(90deg, #000 0 49%, #fff 49% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rule {
  width: 72px;
  height: 5px;
  background: var(--fire);
  margin: 18px auto 16px;
}
.core-mid .note{
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .74rem;
  background: linear-gradient(90deg, #000 0 49%, #fff 49% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
}
.core-half .btn,
.core-dark .btn,
.core-light .btn {
  min-width: 190px;
  padding: 12px 20px;
  font-size: .82rem;
  letter-spacing: .14em;
}
.core-light .btn {
  background: #000;
  color: #fff;
  border-color: #000;
}
.core-dark .btn {
  background: #fff;
  color: #000;
  border-color: #fff;
}
.core-dark .btn:hover,
.core-light .btn:hover {
  opacity: .9;
}

/* --- pick your energy --------------------------------------------------- */
.energy{background:var(--bone);padding:clamp(38px,6vw,72px) 0}
.energy-in{display:grid;grid-template-columns:minmax(180px,1fr) 3fr;gap:clamp(20px,4vw,52px);align-items:center}
.energy-in h2{font-size:clamp(2rem,4vw,3.1rem)}
.energy-in .rule{margin:18px 0 0}
.energy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,2vw,26px)}
.energy-card{text-align:center}
.energy-card img{margin:0 auto}
.energy-name{
  font-family:"Anton",sans-serif;text-transform:uppercase;
  font-size:clamp(.95rem,1.7vw,1.2rem);margin:10px 0 9px;
}
.n-fire{color:var(--fire)}
.n-ice{color:#5f9fd8}
.n-earth{color:var(--earth)}
.n-wind{color:var(--wind)}

/* --- element meaning band (the ~15%) ------------------------------------ */
.creed{background:var(--ink);color:#fff;padding:clamp(34px,5vw,58px) 0 clamp(24px,3vw,34px)}
.creed-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.creed-cell{padding:6px clamp(14px,2.4vw,34px);text-align:center;border-left:1px solid var(--line)}
.creed-cell:first-child{border-left:0}
.creed-cell svg{width:34px;height:34px;margin:0 auto 12px}
.creed-cell h3{
  font-family:"Anton",sans-serif;text-transform:uppercase;
  font-size:clamp(1.05rem,2vw,1.5rem);margin:0 0 8px;
}
.creed-cell p{
  font-family:"Barlow Condensed",sans-serif;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;font-size:.74rem;
  color:rgba(255,255,255,.72);margin:0 0 12px;
}
.creed-cell i{display:block;width:40px;height:3px;margin:0 auto;font-style:normal}
.c-fire svg,.c-fire h3{color:var(--fire)} .c-fire i{background:var(--fire)}
.c-ice svg,.c-ice h3{color:#6fa8dd} .c-ice i{background:#6fa8dd}
.c-earth svg,.c-earth h3{color:#3f9c63} .c-earth i{background:#3f9c63}
.c-wind svg,.c-wind h3{color:#a8a8a8} .c-wind i{background:#a8a8a8}
.creed-foot{
  text-align:center;
  margin:clamp(22px,3.4vw,38px) auto 0;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;font-size:.76rem;
  color:rgba(255,255,255,.8);
}

/* --- reputation / culture ----------------------------------------------- */
.rep{display:grid;grid-template-columns:1fr 1.35fr;background:var(--ink);color:#fff}
.rep-photo{
  min-height:420px;
  background:#181818 url("images/5.jpeg") center/cover no-repeat;
}
.rep-body{padding:clamp(30px,4.4vw,60px) clamp(20px,3.4vw,50px)}
.rep-body h2{font-size:clamp(1.9rem,3.7vw,3rem);text-align:center}
.rep-body .sub{
  text-align:center;font-family:"Barlow Condensed",sans-serif;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;font-size:.8rem;
  color:rgba(255,255,255,.72);margin:14px 0 clamp(20px,3vw,32px);
}
.rep-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rep-card{border:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:10px}
.rep-card h3{
  font-family:"Anton",sans-serif;text-transform:uppercase;
  font-size:.98rem;margin:0;letter-spacing:.02em;
}
.rep-card p{
  font-family:"Barlow Condensed",sans-serif;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;font-size:.68rem;
  color:rgba(255,255,255,.7);margin:0;
}
.rep-card .thumb{
  height:140px;
  background-color:#222;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.thumb.t-liam,.t-liam{background-image:url("images/6.jpeg")}
.thumb.t-vision,.t-vision{background-image:url("images/7.jpeg")}
.thumb.t-next,.t-next{background-image:url("images/8.jpeg")}
.rep-card .row{display:flex;gap:12px;align-items:flex-end;margin-top:auto}
.statline{display:flex;gap:14px}
.statline div{font-family:"Anton",sans-serif;font-size:1.15rem;line-height:1}
.statline span{
  display:block;font-family:"Barlow Condensed",sans-serif;font-weight:600;
  font-size:.6rem;letter-spacing:.14em;color:rgba(255,255,255,.55);margin-top:4px;
}
.playlink{
  display:inline-flex;align-items:center;gap:7px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;font-size:.68rem;
}
.playlink svg{width:15px;height:15px}
.h-fire{color:var(--fire)} .h-ice{color:#6fa8dd} .h-earth{color:#3f9c63}

/* --- mindset band ------------------------------------------------------- */
.mindset{display:grid;grid-template-columns:1fr 1fr 1.15fr;align-items:stretch}
.mind-cell{display:flex;flex-direction:column;justify-content:center;padding:clamp(26px,3.6vw,52px)}
.mind-light{background:var(--bone)}
.mind-dark{background:var(--ink);color:#fff}
.mind-cell h2{font-size:clamp(1.5rem,2.9vw,2.5rem)}
.mind-cell .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.mind-photo{
  min-height:220px;
  background:#1c1c1c url("images/9.jpeg") center/cover no-repeat;
}

/* --- footer ------------------------------------------------------------- */
.foot{background:var(--ink);color:#fff;padding:clamp(34px,4.4vw,56px) 0 26px}
.foot-in{display:grid;grid-template-columns:1.1fr repeat(4,1fr);gap:clamp(20px,3vw,44px)}
.foot h4{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;margin:0 0 14px;
}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot li a{
  font-family:"Barlow Condensed",sans-serif;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;
  color:rgba(255,255,255,.68);
}
.foot li a:hover{color:#fff}
.foot .brand{flex-direction:column;align-items:flex-start;gap:12px}
.foot .brand svg{width:52px;height:52px}
.social{display:flex;gap:14px;margin-top:18px}
.social a{color:rgba(255,255,255,.7)}
.social a:hover{color:#fff}
.social svg{width:18px;height:18px}
.foot-base{
  max-width:var(--shell);margin:clamp(26px,3.4vw,44px) auto 0;
  padding:16px var(--pad) 0;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;font-size:.68rem;
  color:rgba(255,255,255,.6);
}

/* ==========================================================================
   SHOP PAGE
   ========================================================================== */
.shop-head{background:var(--ink);color:#fff;padding:clamp(34px,5vw,66px) 0 clamp(26px,3.4vw,40px)}
.shop-head h1{font-size:clamp(2.4rem,6vw,4.6rem)}
.shop-head p{
  font-family:"Barlow Condensed",sans-serif;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;font-size:.84rem;
  color:rgba(255,255,255,.72);margin:16px 0 0;max-width:52ch;
}
.filters{
  background:var(--ink);border-top:1px solid var(--line);
  position:sticky;top:61px;z-index:40;
}
.filters-in{display:flex;gap:8px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.chip{
  background:transparent;border:1px solid var(--line);color:rgba(255,255,255,.75);
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;padding:9px 18px;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.chip:hover{color:#fff;border-color:#fff}
.chip[aria-pressed="true"]{background:#fff;color:#000;border-color:#fff}
.chip[data-filter="fire"][aria-pressed="true"]{background:var(--fire);border-color:var(--fire);color:#fff}
.chip[data-filter="ice"][aria-pressed="true"]{background:var(--ice);border-color:var(--ice);color:#000}
.chip[data-filter="earth"][aria-pressed="true"]{background:var(--earth);border-color:var(--earth);color:#fff}
.chip[data-filter="wind"][aria-pressed="true"]{background:var(--wind);border-color:var(--wind);color:#fff}

.grid{background:var(--paper);padding:clamp(28px,4vw,56px) 0 clamp(46px,6vw,84px)}
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.2vw,30px)}
.product{display:flex;flex-direction:column;border:1px solid var(--line-dark)}
.product .shot{background:var(--bone);padding:10px}
.product.on-dark .shot{background:#101010}
.product .info{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.product h3{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:1.02rem;margin:0}
.product .elem{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;font-size:.68rem;
}
.product .price{font-family:"Anton",sans-serif;font-size:1.1rem;margin:2px 0 0}
.product .desc{font-size:.86rem;color:#4a4a4a;margin:0}
.product .btn{margin-top:12px;width:100%}
.e-fire{color:var(--fire)} .e-ice{color:#5f9fd8} .e-earth{color:var(--earth)}
.e-wind{color:var(--wind)} .e-core{color:#000}
.empty{
  grid-column:1/-1;text-align:center;padding:60px 20px;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#666;
}
.sizes{background:var(--bone);padding:clamp(26px,3.6vw,46px) 0}
.sizes-in{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:center}
.sizes h2{font-size:clamp(1.4rem,2.6vw,2.1rem)}
.sizes p{margin:10px 0 0;max-width:56ch;color:#3a3a3a}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .rep{grid-template-columns:1fr}
  .rep-photo{min-height:300px}
  .foot-in{grid-template-columns:1fr 1fr 1fr}
  .products{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:860px){
  .nav{
    position:fixed;inset:61px 0 auto 0;background:var(--ink);
    flex-direction:column;align-items:flex-start;gap:0;
    padding:8px var(--pad) 20px;border-bottom:1px solid var(--line);
    display:none;
  }
  .nav.open{display:flex}
  .nav a{width:100%;padding:14px 0;border-bottom:1px solid var(--line)}
  .nav .btn{width:100%;margin-top:14px}
  .nav-toggle{display:block;margin-left:auto;order:3}
  .cart{order:2}
  .hero{min-height:auto;padding-top:clamp(90px,26vw,180px)}
  .hero-rail{display:none}
  .sports{grid-template-columns:1fr 1fr}
  .core{grid-template-columns:1fr}
  .core-mid{order:-1}
  .energy-in{grid-template-columns:1fr}
  .energy-grid{grid-template-columns:1fr 1fr}
  .creed-grid{grid-template-columns:1fr 1fr}
  .creed-cell{border-left:0;padding-top:22px;padding-bottom:22px}
  .creed-cell:nth-child(2n){border-left:1px solid var(--line)}
  .rep-cards{grid-template-columns:1fr}
  .rep-card .thumb{height:130px}
  .mindset{grid-template-columns:1fr}
  .mind-photo{min-height:200px;order:3}
  .products{grid-template-columns:1fr 1fr}
  .filters{position:static}
}

@media (max-width:540px){
  .foot-in{grid-template-columns:1fr 1fr}
  .brand-word{letter-spacing:.24em;font-size:.7rem}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}