/* Teamwear hub — "The Kit Wall". Builds on home.css tokens and components. */
.js .page-teamwear .curtain{clip-path:inset(0 0 0 0)}
.tw-lede{margin:18px 0 0;color:var(--fg-2);max-width:54ch;font-size:17px}
.sec-head .tw-lede{margin-top:18px}

/* ======================================================= 01 THE KIT WALL */
.tw-hero{--kw:clamp(170px,min(18vw,30vh),330px);position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-rows:auto auto auto auto 1fr;grid-template-areas:"top top" "wall wall" "board board" "hint hint" "title side";column-gap:clamp(24px,4vw,72px);padding:calc(var(--hdr) + 12px) 0 clamp(26px,4.4vh,52px);overflow:hidden;background:#050a14;color:var(--chalk)}
.tw-hero__bg{position:absolute;inset:0;pointer-events:none}
.tw-hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;transform-origin:50% 70%}
.tw-hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,20,.72) 0%,rgba(5,10,20,.15) 26%,rgba(5,10,20,.25) 52%,rgba(5,10,20,.92) 88%)}
.tw-hero__spot{position:absolute;left:50%;top:calc(var(--hdr) + var(--kw) * .55);width:calc(var(--kw) * 2.6);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(175,201,236,.28),rgba(95,130,184,.1) 55%,transparent);mix-blend-mode:screen}
.tw-hero__ghost{position:absolute;z-index:0;left:0;right:0;top:calc(var(--hdr) + 2vh);margin:0;text-align:center;font-family:var(--f-display);font-weight:900;font-size:clamp(110px,21vw,400px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(238,242,247,.16);letter-spacing:-.01em;pointer-events:none;white-space:nowrap}
.tw-hero>*:not(.tw-hero__bg):not(.tw-hero__ghost){position:relative;z-index:2}
.tw-hero__top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:0 var(--gut)}
.tw-hero__kicker{display:flex;align-items:center;gap:10px;margin:0;color:rgba(238,242,247,.78)}
.crumbs{display:flex;gap:10px;align-items:center;color:rgba(238,242,247,.7)}
.crumbs a{min-height:44px;display:inline-flex;align-items:center}
.crumbs a:hover{color:var(--sky)}

/* the wall: a native swipe strip by default (no JS / reduced motion) … */
.kw{position:relative;margin-top:4px;user-select:none;-webkit-user-select:none}
.kw__rail{position:absolute;left:0;right:0;top:16px;height:7px;border-radius:7px;background:linear-gradient(180deg,#dfe7f2 0%,#8e9bb0 45%,#3c4658 60%,#9aa6b8 100%);box-shadow:0 6px 14px rgba(0,0,0,.55);z-index:1}
.kw__rail i{position:absolute;inset:1px 0 auto;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85) 50%,transparent);opacity:.6}
.kw__track{list-style:none;margin:0;padding:12px var(--gut) 8px;display:flex;gap:clamp(8px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.kw__track::-webkit-scrollbar{display:none}
.kw__item{flex:none;width:var(--kw);scroll-snap-align:center;transform-origin:50% 6px}
.kw__kit{position:relative;display:block;outline-offset:6px;-webkit-tap-highlight-color:transparent}
.kw__cord{position:relative;display:block;height:46px}
.kw__cord::before{content:"";position:absolute;left:50%;top:12px;bottom:-2px;width:1.5px;margin-left:-.75px;background:linear-gradient(rgba(214,228,246,.85),rgba(175,201,236,.45))}
.kw__ring{position:absolute;left:50%;top:2px;width:16px;height:16px;margin-left:-8px;border-radius:50%;border:2.5px solid #c9d3e2;box-shadow:0 2px 4px rgba(0,0,0,.5);z-index:2}
.kw__tag{position:absolute;left:calc(50% + 7px);top:22px;padding:2px 7px 2px 9px;border-radius:2px 4px 4px 2px;background:#f4ead8;color:#1a1f2b;font-size:12px;letter-spacing:.06em;transform:rotate(9deg);transform-origin:0 50%;box-shadow:0 4px 8px rgba(0,0,0,.35)}
.kw__img{position:relative;display:block;height:calc(var(--kw) * 1.04)}
.kw__img img{width:100%;height:100%;object-fit:contain;object-position:50% 0;filter:drop-shadow(0 26px 30px rgba(0,0,0,.55));pointer-events:none;-webkit-user-drag:none}
.kw__cap{display:block;margin-top:8px;text-align:center;color:rgba(238,242,247,.85)}

/* … enhanced into the hanging rail with inertia (js) */
.kw--live{height:calc(var(--kw) * 1.04 + 70px);cursor:grab;touch-action:pan-y}
.kw--live.is-drag{cursor:grabbing}
.kw--live .kw__track{position:absolute;inset:0;display:block;overflow:visible;padding:0;scroll-snap-type:none}
.kw--live .kw__item{position:absolute;left:50%;top:12px;margin-left:calc(var(--kw) / -2);will-change:transform,opacity}
.kw--live .kw__cap{display:none}
.kw--live .kw__img img{transition:filter .5s var(--ease)}
.kw--live .kw__item.is-active .kw__img img{filter:drop-shadow(0 34px 34px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(175,201,236,.18))}
.kw--live .kw__item.is-hover .kw__tag{background:var(--sky)}

/* name board under the wall */
.kw__board{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;width:min(820px,calc(100% - 2 * var(--gut)));margin:6px auto 0}
.kw__label{display:grid;justify-items:center;gap:8px;text-align:center;min-width:0}
.kw__count{margin:0;color:var(--sky)}
.kw__name{margin:0;max-width:100%}
.kw__name .flapline{font-size:clamp(22px,2.4vw,38px)}
.kw__name .flap{width:.74em}
.kw__brief{margin:0;color:rgba(238,242,247,.75);font-size:15px;min-height:1.5em}
.kw__nav{color:var(--chalk);border-color:rgba(238,242,247,.3);background:rgba(10,17,32,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.kw__nav:hover{background:var(--chalk);color:var(--ink);border-color:var(--chalk)}
.tw-hero__hint{margin:12px 0 0;text-align:center;color:rgba(238,242,247,.55)}
.tw-hero__hint-m{display:none}
@media (hover:none){.tw-hero__hint-d{display:none}.tw-hero__hint-m{display:inline}}

.tw-hero__top{grid-area:top}.kw{grid-area:wall}.kw__board{grid-area:board}.tw-hero__hint{grid-area:hint}
.tw-hero__title{grid-area:title;align-self:end;padding:clamp(18px,3vh,34px) 0 0 var(--gut);margin:0;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(52px,6.4vw,118px);line-height:.86;letter-spacing:-.005em}
.tw-l{display:inline-block}
.tw-l--em{color:var(--sky);font-weight:300}
.tw-hero__side{grid-area:side;align-self:end;display:grid;gap:20px;justify-items:start;padding-right:var(--gut)}
.tw-hero__lede{margin:0;max-width:46ch;color:rgba(238,242,247,.86);font-size:16px}
.tw-hero__ctas{display:flex;gap:12px;flex-wrap:wrap}

/* ======================================================= 02 FIND YOUR SPORT */
.ix{padding-bottom:clamp(80px,12vh,140px)}
.ix__filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 var(--gut) 22px}
.ix__shown{margin:0 0 0 auto;color:var(--fg-2)}
.ix__list{list-style:none;margin:0 var(--gut);padding:0;border-top:1px solid var(--line)}
.ix__item{border-bottom:1px solid var(--line);overflow:hidden}
.ix__item[hidden]{display:none}
.ix__row{position:relative;display:grid;grid-template-columns:64px minmax(0,1.1fr) minmax(0,1fr) 80px 44px;align-items:center;gap:20px;padding:16px 0;isolation:isolate}
.ix__row::before{content:"";position:absolute;inset:0 calc(var(--gut) * -1);z-index:-1;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease)}
.ix__row:hover::before,.ix__row:focus-visible::before{transform:scaleY(1)}
.ix__row:hover,.ix__row:focus-visible{color:var(--chalk)}
.ix__n{color:var(--fg-2);transition:color .3s}
.ix__row:hover .ix__n{color:var(--sky)}
.ix__t{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(40px,5.4vw,96px);line-height:.9;transition:transform .55s var(--ease)}
.ix__row:hover .ix__t{transform:translateX(18px)}
.ix__d{color:var(--fg-2);font-size:15px;max-width:38ch;transition:color .3s}
.ix__row:hover .ix__d{color:rgba(238,242,247,.72)}
.ix__c{justify-self:end;padding:4px 10px;border:1px solid var(--line);border-radius:999px;color:var(--fg-2)}
.ix__row:hover .ix__c{border-color:rgba(238,242,247,.3);color:var(--sky)}
.ix__thumb{display:none}
.ix__go{justify-self:end;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);font-size:18px;transition:transform .45s var(--ease),background .3s,color .3s}
.ix__go i{font-style:normal}
.ix__row:hover .ix__go{transform:rotate(45deg);background:var(--chalk);color:var(--ink);border-color:var(--chalk)}
.ix__float{position:fixed;left:0;top:0;z-index:60;width:clamp(220px,19vw,300px);aspect-ratio:4/5;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.6)}
.ix__float>img{width:100%;height:100%;object-fit:cover;border-radius:14px;box-shadow:0 40px 80px -20px rgba(10,17,32,.6)}
.ix__float-kit{position:absolute;right:-34%;bottom:-12%;width:78%;aspect-ratio:1}
.ix__float-kit img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 20px 24px rgba(0,0,0,.45))}

/* ======================================================= 03 MOQ SCOREBOARD */
.moqb{padding:clamp(100px,14vh,170px) var(--gut)}
.moqb__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,90px);align-items:center}
.moqb__copy{display:grid;gap:22px;justify-items:start}
.moqb__copy .tw-lede{margin:0}
.moqb__copy .fine{font-size:14px;max-width:48ch}
.moqb__board{position:relative;padding:clamp(20px,2.6vw,36px);border-radius:24px;background:linear-gradient(160deg,#0d1628,#060b16);border:1px solid rgba(238,242,247,.12);box-shadow:0 60px 100px -50px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05)}
.moqb__board::before{content:"";position:absolute;inset:10px;border-radius:16px;border:1px dashed rgba(238,242,247,.08);pointer-events:none}
.moqb__head{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px;color:var(--sky)}
.moqb__row{display:grid;grid-template-columns:minmax(0,1fr) auto 64px;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid rgba(238,242,247,.1)}
.moqb__row .flapline{font-size:clamp(40px,5.4vw,92px)}
.moqb__k{color:rgba(238,242,247,.7)}
.moqb__u{color:var(--sky)}
.moqb__foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin:16px 0 0;color:rgba(238,242,247,.55)}

/* ======================================================= 04 SIZE RUN */
.run{padding:clamp(100px,14vh,170px) var(--gut)}
.run__grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(32px,5vw,90px);align-items:center}
.run__copy{display:grid;gap:22px;justify-items:start}
.run__copy .tw-lede{margin:0}
.run__fig{position:relative;margin:0;border-radius:22px;overflow:hidden;aspect-ratio:3/2;background:var(--concrete);box-shadow:0 40px 80px -40px rgba(10,17,32,.45)}
.run__fig>img{width:100%;height:100%;object-fit:cover}
.run__tag{position:absolute;display:grid;place-items:center;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--ink);color:var(--chalk);box-shadow:0 12px 24px -8px rgba(10,17,32,.6);text-align:center;line-height:1}
.run__tag b{font-family:var(--f-display);font-weight:900;font-size:28px;margin-top:6px}
.run__tag em{font-size:12px;letter-spacing:.04em;color:var(--sky);margin-top:-8px}
.run__tag--note{width:auto;height:auto;margin:0;transform:translate(-50%,-50%);padding:8px 12px;border-radius:999px;background:var(--sky);color:var(--ink)}
.run__tag--note em{color:var(--ink);margin:0}
.run__fig figcaption{position:absolute;left:14px;bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(10,17,32,.72);color:var(--chalk)}

/* ======================================================= 05 GARMENT BY PLAYER */
.roster{padding:clamp(100px,14vh,170px) var(--gut)}
.roster__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,6vw,110px);align-items:center}
.roster__copy{display:grid;gap:22px}
.roster__copy .tw-lede{margin:0}
.checks{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.checks li{border-bottom:1px solid var(--line)}
.check{display:flex;align-items:center;gap:16px;width:100%;min-height:64px;padding:12px 4px;text-align:left;font-size:17px;font-weight:500;transition:color .3s,padding .45s var(--ease)}
.check i{position:relative;flex:none;width:28px;height:28px;border-radius:8px;border:1.5px solid var(--sky);transition:background .3s}
.check i::after{content:"";position:absolute;left:9px;top:4px;width:7px;height:13px;border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .35s var(--ease)}
.check[aria-pressed="true"]{color:var(--sky);padding-left:12px}
.check[aria-pressed="true"] i{background:var(--sky)}
.check[aria-pressed="true"] i::after{transform:rotate(45deg) scale(1)}
.check:hover{color:var(--sky)}
.sheet2{position:relative;justify-self:center;width:min(460px,100%);padding:46px 26px 22px;border-radius:16px;background:#f7f4ec;color:#141a28;box-shadow:0 50px 90px -30px rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.05);transform:rotate(1.6deg);display:grid;gap:16px}
.sheet2__clip{position:absolute;left:50%;top:-14px;width:120px;height:30px;transform:translateX(-50%);border-radius:8px;background:linear-gradient(#9aa3b1,#6e7787);box-shadow:0 6px 10px rgba(0,0,0,.25)}
.sheet2__top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sheet2__top img{width:92px;height:auto}
.sheet2__top .mono{margin:0;color:#5c6170}
.sheet2__art{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px;border-radius:10px;border:1px dashed rgba(20,26,40,.25);transition:background .4s,border-color .4s}
.sheet2__art>.mono{color:#5c6170;margin-right:4px}
.sheet2__chip{padding:4px 10px;border-radius:999px;background:rgba(20,26,40,.07);font-size:13px;font-weight:600}
.sheet2__tbl{display:grid}
.sheet2__tr{display:grid;grid-template-columns:1.25fr 1.15fr .6fr .6fr;gap:8px;padding:8px 0;border-bottom:1px solid rgba(20,26,40,.13);font-size:14px;font-weight:600}
.sheet2__th{color:#5c6170;border-bottom-color:rgba(20,26,40,.3)}
.sheet2__th span{font-weight:400}
.sheet2__tr>span{padding:2px 4px;border-radius:5px;transition:background .4s,color .4s;overflow-wrap:anywhere}
.sheet2__grp{margin:12px 0 0;color:#3d5a86}
.sheet2__foot{display:flex;justify-content:space-between;margin:0;color:#5c6170;gap:10px}
.sheet2.hl-names [data-zone="names"],.sheet2.hl-qty [data-zone="qty"]{background:#afc9ec;color:#0a1120}
.sheet2.hl-art .sheet2__art{background:rgba(175,201,236,.45);border-color:#3d5a86}
.sheet2.hl-art .sheet2__chip{background:#0a1120;color:#eef2f7}

/* ======================================================= 06 IDENTITY */
.ident{padding-bottom:clamp(80px,12vh,140px)}
.ident__stage{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);gap:clamp(24px,4vw,64px);padding:0 var(--gut);align-items:center}
.ident__fig{position:relative;margin:0;border-radius:22px;overflow:hidden;aspect-ratio:3/2;background:var(--ink-2)}
.ident__fig>img{width:100%;height:100%;object-fit:cover}
.ident__fig figcaption{position:absolute;left:14px;bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(10,17,32,.72);color:var(--chalk)}
.hs{position:absolute;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;display:grid;place-items:center}
.hs::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--chalk);box-shadow:0 0 0 6px rgba(238,242,247,.25);transition:transform .4s var(--ease),background .3s}
.hs::after{content:"";position:absolute;inset:6px;border-radius:50%;border:1.5px solid rgba(238,242,247,.7);animation:hsping 2.4s infinite}
@keyframes hsping{0%{transform:scale(.6);opacity:1}80%,100%{transform:scale(1.5);opacity:0}}
.hs[aria-expanded="true"]::before{background:var(--sky);transform:scale(1.25)}
.ident__notes{display:grid;gap:22px;align-content:center}
.ident__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ident__list li{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);opacity:.42;transition:opacity .45s;cursor:pointer}
.ident__list li.is-on{opacity:1}
.ident__list b{color:var(--steel);padding-top:5px}
.ident__list h3{margin:0 0 4px;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:28px;line-height:1}
.ident__list p{margin:0;color:var(--fg-2);font-size:15px}

/* ======================================================= 07 FABRIC */
.fabc{padding-bottom:clamp(80px,12vh,140px)}
.fabc__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:0 var(--gut)}
.fcard{display:grid;gap:12px;align-content:start}
.fcard__img{position:relative;aspect-ratio:1;border-radius:20px;overflow:hidden;background:var(--ink-2)}
.fcard__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);transform-origin:var(--mx,50%) var(--my,50%)}
.fcard:hover .fcard__img img{transform:scale(1.9)}
.fcard__n{margin:8px 0 0;color:var(--sky)}
.fcard h3{margin:0;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(36px,3.2vw,54px);line-height:.92}
.fcard>p:last-child{margin:0;color:var(--fg-2);max-width:44ch}

/* ======================================================= 08 SIGN-OFF */
.sign{padding-bottom:clamp(90px,13vh,150px)}
.sign__track{position:relative;display:grid;grid-template-columns:3fr 2fr;gap:0 clamp(18px,2.4vw,36px);padding:0 var(--gut)}
.sign__line{position:absolute;left:var(--gut);right:var(--gut);top:50px;height:2px;background:var(--line)}
.sign__line i{position:absolute;inset:0;background:var(--steel);transform-origin:left;transform:scaleX(0)}
.sign__h{margin:0 0 66px;color:var(--steel)}
.sign__steps{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(18px,2.4vw,36px)}
.sstamp{position:relative;display:grid;gap:10px;align-content:start;padding:22px 20px 24px;border-radius:18px;background:var(--paper);box-shadow:0 30px 60px -36px rgba(10,17,32,.4)}
.sstamp::before{content:"";position:absolute;left:22px;top:-23px;width:14px;height:14px;border-radius:50%;border:2px solid var(--steel);background:var(--chalk);transition:background .4s}
.sstamp.is-on::before{background:var(--steel)}
.sstamp b{color:var(--steel)}
.sstamp h3{margin:0;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(26px,2.2vw,36px);line-height:.95;max-width:12ch}
.sstamp p{margin:0;color:var(--fg-2);font-size:15px}
.sstamp__mark{position:absolute;right:14px;top:16px;padding:4px 10px;border:2px solid #2f7d55;border-radius:6px;color:#2f7d55;font-weight:700;transform:rotate(-8deg) scale(1);opacity:1}
.js .sstamp:not(.is-on) .sstamp__mark{opacity:0;transform:rotate(-8deg) scale(1.8)}
.sstamp__mark{transition:opacity .35s,transform .5s cubic-bezier(.3,1.6,.5,1)}
html.motion-off .sstamp .sstamp__mark{opacity:1!important;transform:rotate(-8deg)!important}

/* ======================================================= 09 FAQ */
.twfaq{padding:clamp(100px,14vh,170px) var(--gut)}
.twfaq__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,100px);align-items:start}
.twfaq__head{display:grid;gap:18px;position:sticky;top:calc(var(--hdr) + 24px)}
.twfaq__head .tw-lede{margin:0}
.twfaq__tabs{display:grid;gap:8px;justify-items:start}
.twfaq__tabs a{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 18px;border-radius:999px;border:1px solid var(--line);font-weight:500;transition:background .3s,color .3s}
.twfaq__tabs a em{color:var(--sky)}
.twfaq__tabs a:hover{background:var(--chalk);color:var(--ink)}
.twfaq__tabs a:hover em{color:var(--steel)}
.twfaq__lists{display:grid;gap:56px}
.twfaq__list{scroll-margin-top:calc(var(--hdr) + 20px)}
.twfaq__gh{margin:0 0 10px;color:var(--sky);font-weight:400}
.twfaq details{border-bottom:1px solid var(--line)}
.twfaq__gh+details{border-top:1px solid var(--line)}
.twfaq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:72px;padding:14px 0;cursor:pointer;font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:clamp(22px,2vw,30px);line-height:1.05;transition:color .3s}
.twfaq summary:hover{color:var(--sky)}
.twfaq summary::-webkit-details-marker{display:none}
.twfaq summary i{position:relative;flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);transition:background .3s,transform .5s var(--ease)}
.twfaq summary i::before,.twfaq summary i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.twfaq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.twfaq details[open] summary i{transform:rotate(45deg);background:var(--chalk);color:var(--ink)}
.twfaq details p{margin:0;padding:0 56px 24px 0;color:var(--fg-2);font-size:16.5px;max-width:62ch}

/* ======================================================= 10 BRIEF + HANGING TAG */
.twbrief .bform{gap:18px}
.twbrief__sports{border:0;margin:0;padding:0;display:grid;gap:12px;min-width:0}
.twbrief__sports legend{color:var(--fg-2);margin-bottom:12px;padding:0}
.twbrief__sports legend em{text-transform:none;letter-spacing:0;opacity:.8;font-style:normal}
.twbrief__chips{display:flex;flex-wrap:wrap;gap:8px}
.twbrief__chips .pick span{min-height:44px;padding:0 15px;font-size:14px}
.twbrief__more{border:1px solid var(--line);border-radius:14px}
.twbrief__more summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:0 16px;cursor:pointer;font-weight:600}
.twbrief__more summary::-webkit-details-marker{display:none}
.twbrief__more summary em{font-weight:400;color:var(--fg-2)}
.twbrief__more summary i{position:relative;flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);transition:transform .45s var(--ease)}
.twbrief__more summary i::before,.twbrief__more summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.twbrief__more summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.twbrief__more[open] summary i{transform:rotate(45deg)}
.twbrief__more-body{display:grid;gap:16px;padding:4px 16px 18px}
.field--file input{padding:12px;min-height:56px;font-size:14px}
.field--file small{color:var(--fg-2);font-size:13px}
.twbrief .fine{margin:0}
.hanger{position:relative;width:min(400px,100%);display:grid;justify-items:center;transform-origin:50% 0;will-change:transform}
.hanger__hook{width:46px;height:46px;border:4px solid #8e9bb0;border-bottom-color:transparent;border-left-color:transparent;border-radius:50%;transform:rotate(-45deg);margin-bottom:-14px}
.hanger__kit{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:start center}
.hanger__kit::before{content:"";position:absolute;left:50%;top:-6px;width:1.5px;height:34px;background:#8e9bb0}
.hanger__kit img{width:92%;height:92%;margin-top:26px;object-fit:contain;object-position:50% 0;filter:drop-shadow(0 30px 30px rgba(10,17,32,.35));transition:opacity .35s}
.hanger__tag{position:relative;width:min(300px,86%);margin-top:-18%;padding:34px 22px 18px;border-radius:14px 14px 10px 10px;background:#f4ead8;color:#1a1f2b;box-shadow:0 30px 60px -24px rgba(10,17,32,.5),inset 0 0 0 1px rgba(0,0,0,.05);transform:rotate(-3deg);display:grid;gap:10px;clip-path:polygon(16% 0,84% 0,100% 8%,100% 100%,0 100%,0 8%)}
.hanger__hole{position:absolute;left:50%;top:12px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--chalk);box-shadow:inset 0 2px 3px rgba(0,0,0,.25),0 0 0 3px #e3d6bd}
.hanger__logo{width:96px;justify-self:center}
.hanger__no{margin:0;text-align:center;color:#5c6170}
.hanger__tag dl{margin:0;border-top:1px solid rgba(26,31,43,.15)}
.hanger__tag dl div{display:grid;grid-template-columns:84px 1fr;gap:10px;padding:7px 0;border-bottom:1px solid rgba(26,31,43,.15)}
.hanger__tag dt{color:#5c6170;margin:0}
.hanger__tag dd{margin:0;font-family:var(--f-display);font-weight:700;font-size:19px;line-height:1.05;text-transform:uppercase;overflow-wrap:anywhere}
.hanger__moq{height:6px;border-radius:6px;background:rgba(26,31,43,.12);overflow:hidden}
.hanger__moq i{display:block;height:100%;width:0;background:#3d5a86;transition:width .6s var(--ease),background .4s}
.hanger__moq i.is-full{background:#2f7d55}
.hanger__foot{display:flex;justify-content:space-between;gap:8px;margin:0;color:#5c6170;font-size:11px}
.hanger.is-sent .hanger__tag::after{content:"READY";position:absolute;right:16px;top:118px;transform:rotate(-12deg);font-family:var(--f-display);font-weight:900;font-size:46px;color:rgba(61,90,134,.85);border:4px solid rgba(61,90,134,.85);padding:0 12px;border-radius:10px}

/* ======================================================= 11 CLOSING + STRIP */
.twend{background:var(--ink);color:var(--chalk)}
.twend__stage{position:relative;min-height:100vh;min-height:100svh;display:grid;align-items:end;overflow:hidden}
.twend__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
.twend__stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,17,32,.55),rgba(10,17,32,.05) 35%,rgba(10,17,32,.5) 62%,var(--ink) 96%)}
.twend__kits{position:absolute;z-index:1;right:-4vw;top:8%;width:min(76vw,1180px);filter:drop-shadow(0 50px 60px rgba(0,0,0,.6))}
.twend__inner{position:relative;z-index:2;display:grid;justify-items:start;gap:24px;padding:120px var(--gut) clamp(60px,10vh,110px);max-width:1100px}
.twend__k{margin:0;color:var(--sky)}
.twend__title{margin:0;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(60px,9.6vw,180px);line-height:.84}
.twend__title span{display:block}
.twend__title span:last-child{color:transparent;-webkit-text-stroke:2px var(--chalk)}
.twend__lede{margin:0;font-size:18px;color:rgba(238,242,247,.82);max-width:52ch}
.next-step{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px;padding:28px var(--gut);border-top:1px solid rgba(238,242,247,.14)}
.next-step__h{margin:0;color:var(--sky)}
.next-step__links{display:flex;flex-wrap:wrap;gap:8px 28px}
.others{padding:28px 0 60px;border-top:1px solid rgba(238,242,247,.14)}
.others__head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 var(--gut) 18px}
.others__head .mono{margin:0;color:var(--sky)}
.others__nav{display:flex;gap:10px}
.others__nav .round{color:var(--chalk);border-color:rgba(238,242,247,.2)}
.others__nav .round:hover{background:var(--chalk);color:var(--ink)}
.others__track{list-style:none;margin:0;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gut) 8px;scrollbar-width:none;cursor:grab}
.others__track::-webkit-scrollbar{display:none}
.others__track>li{flex:none;scroll-snap-align:start}
.tcard{position:relative;display:block;width:clamp(230px,20vw,300px);aspect-ratio:4/5;border-radius:16px;overflow:hidden}
.tcard img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.tcard:hover img{transform:scale(1.07)}
.tcard::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 38%,rgba(10,17,32,.92))}
.tcard__t{position:absolute;z-index:1;left:14px;right:14px;bottom:86px;display:flex;justify-content:space-between;align-items:end;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:30px;line-height:.95}
.tcard__t em{font-family:var(--f-mono);font-size:12px;font-weight:400;color:var(--sky)}
.tcard__d{position:absolute;z-index:1;left:14px;right:14px;bottom:42px;font-size:13.5px;line-height:1.35;color:rgba(238,242,247,.8)}
.tcard__go{position:absolute;z-index:1;left:14px;bottom:14px;color:var(--sky)}
.twend__fine{margin:18px var(--gut) 0}
.twend .ftr{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}

/* ======================================================= RESPONSIVE */
@media (max-width:1100px){
  .sign__track{grid-template-columns:1fr;gap:40px}
  .sign__line{display:none}
  .sign__h{margin-bottom:36px}
  .ident__stage{grid-template-columns:1fr}
}
@media (max-width:900px){
  .ix__row{grid-template-columns:40px minmax(0,1fr) 76px;grid-template-areas:"n t thumb" "n d thumb";gap:4px 14px;padding:14px 0}
  .ix__n{grid-area:n;align-self:start;padding-top:8px}
  .ix__t{grid-area:t;font-size:clamp(34px,8vw,60px)}
  .ix__d{grid-area:d;font-size:14px}
  .ix__c,.ix__go{display:none}
  .ix__thumb{display:block;grid-area:thumb;width:76px;aspect-ratio:4/5;height:auto;border-radius:10px;object-fit:cover;justify-self:end}
  .ix__row:hover .ix__t{transform:none}
  .ix__float{display:none}
  .moqb__grid,.run__grid,.roster__grid,.twfaq__grid{grid-template-columns:1fr}
  .sheet2{transform:none}
  .fabc__grid{grid-template-columns:1fr;gap:44px}
  .fcard__img{aspect-ratio:4/3}
  .twfaq__head{position:relative;top:0}
  .twfaq__tabs{display:flex;flex-wrap:wrap}
  .sign__steps{grid-auto-flow:row;grid-auto-columns:auto;gap:18px;padding-left:30px;border-left:2px solid var(--line);margin-left:6px}
  .sstamp::before{left:-39px;top:26px}
  .twend__kits{right:-30vw;top:9%;width:150vw}
  .twend__stage{align-items:end}
  .brief__right{order:-1;padding-top:30px}
}
@media (max-width:700px) and (min-height:521px){
  .tw-hero{--kw:min(62vw,300px);padding-top:calc(var(--hdr) + 6px);padding-bottom:30px;grid-template-rows:auto auto auto auto auto}
  .tw-hero__ghost{top:calc(var(--hdr) + 130px);font-size:30vw}
  .tw-hero__top{gap:0}
  .tw-hero__kicker{font-size:12px;letter-spacing:.04em}
  .tw-hero__spot{top:calc(var(--hdr) + 170px + var(--kw) * .5)}
  .kw__board{grid-template-columns:auto minmax(0,1fr) auto;gap:10px;width:calc(100% - 2 * var(--gut))}
  .kw__name .flapline{font-size:clamp(14px,4.4vw,22px)}
  .kw__nav{width:48px;height:48px}
  .kw__brief{font-size:14px}
  .tw-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "title" "wall" "board" "hint" "side"}
  .tw-hero__title{padding:2px var(--gut) 10px}
  .tw-hero__side{padding:22px var(--gut) 0;gap:18px}
  .tw-hero__k2{display:none}
  .tw-hero__hint{margin-top:8px}
  .kw__board{margin-top:0}
  .tw-hero__title{font-size:clamp(44px,12.6vw,64px)}
  .tw-hero__lede{font-size:15.5px}
  .tw-hero__ctas{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
  .tw-hero__ctas .btn{justify-content:space-between;padding:0 8px 0 16px;font-size:14px}
}
@media (max-width:640px){
  .ix__filters .pick span{padding:0 14px}
  .ix__shown{width:100%;margin:6px 0 0}
  .moqb__row{grid-template-columns:1fr auto;grid-template-areas:"k u" "f f";gap:6px 12px;padding:14px 0}
  .moqb__k{grid-area:k}.moqb__u{grid-area:u}.moqb__row .flapline{grid-area:f;font-size:clamp(40px,14vw,64px)}
  .run__tag{width:46px;height:46px;margin:-23px 0 0 -23px}
  .run__tag b{font-size:20px;margin-top:4px}
  .run__tag em{display:none}
  .run__tag--note em{display:block}
  .run__tag--note{padding:6px 10px}
  .sheet2{padding:40px 16px 18px}
  .sheet2__tr{grid-template-columns:1.2fr 1.1fr .55fr .6fr;font-size:12.5px;gap:4px}
  .hs{width:44px;height:44px;margin:-22px 0 0 -22px}
  .twfaq details p{padding-right:0}
  .twfaq summary{font-size:21px}
  .next-step{flex-direction:column;align-items:flex-start}
  .crumbs{font-size:12px}
  .tcard{width:min(74vw,280px)}
  .twend__title{font-size:clamp(54px,15vw,90px)}
  .twend__lede{font-size:16px}
  .twend__inner .btn--xl{min-height:60px;font-size:16px;padding:0 14px 0 22px;white-space:normal}
  .hanger{width:min(320px,88%)}
}
@media (max-width:379px){.tw-hero__ctas{grid-template-columns:1fr!important}.tw-hero__kicker{font-size:12px}}
/* phones in landscape / short screens */
@media (max-height:520px){
  .tw-hero{--kw:clamp(120px,min(16vw,40vh),220px);min-height:0}
  .tw-hero__ghost{display:none}
  .tw-hero__lede{font-size:15px}
  .tw-hero__title{font-size:clamp(36px,6vw,64px)}
  .twend__stage{min-height:0}
  .twend__kits{width:70vw;right:-6vw;top:4%}
  .twfaq__head{position:relative;top:0}
}

/* ---------- refinements after QA ---------- */
.display--md{font-size:clamp(44px,5.6vw,100px);max-width:16ch}
.kw__item[data-slug="soccer"] .kw__img img{width:136%;margin-left:-18%}
.kw__item[data-slug="cricket"] .kw__img img{width:112%;margin-left:-6%}
.hanger__foot{flex-direction:column;align-items:center;gap:2px;text-align:center}
.hanger__kit img{width:84%;height:84%}
.hanger__tag{margin-top:-24%}
.twbrief .consent a{display:inline-block;padding:14px 0;margin:-14px 0}
.kw:not(.kw--live) .kw__track{padding-inline:calc(50% - var(--kw) / 2)}
/* paper cards keep ink text whatever the page theme is mid-transition */
.sstamp{color:var(--ink)}
.sstamp p{color:rgba(10,17,32,.66)}
/* tablets in portrait: a bigger wall, title above it like phones */
@media (min-width:701px) and (max-width:1100px) and (min-height:700px){
  .tw-hero{--kw:min(30vw,300px);min-height:0;grid-template-rows:none;padding-bottom:64px;grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "title" "wall" "board" "hint" "side";row-gap:0}
  .tw-hero__title{padding:10px var(--gut) 24px;font-size:clamp(64px,9vw,96px)}
  .tw-hero__side{padding:28px var(--gut) 0;grid-template-columns:minmax(0,1.2fr) auto;align-items:end;justify-items:stretch}
  .tw-hero__ghost{top:calc(var(--hdr) + 200px)}
  .tw-hero__spot{top:calc(var(--hdr) + 260px + var(--kw) * .5)}
}
