:root {
    --forest: #143b2e;
    --forest-2: #1d4d3b;
    --deep: #081d16;
    --acid: #dfff43;
    --cream: #f2efe5;
    --paper: #faf8f2;
    --ink: #10251d;
    --clay: #b45d38;
    --muted: #64726c;
    --line: rgba(16, 37, 29, .16);
    --display: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
    --max: 1500px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--cream);
    font-family: var(--display);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
body.menu-open, body.cart-open, body.checkout-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
.skip, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.skip:focus { clip: auto; width: auto; height: auto; z-index: 999; padding: 12px 18px; background: white; }
::selection { color: var(--deep); background: var(--acid); }

.scroll-progress { position: fixed; inset: 0 0 auto; z-index: 1000; height: 3px; pointer-events: none; }
.scroll-progress span { display: block; width: 100%; height: 100%; background: var(--acid); transform: scaleX(0); transform-origin: left; }
.topline { position: relative; z-index: 90; padding: 8px 5vw; overflow: hidden; color: var(--deep); background: var(--acid); text-align: center; }
.topline span { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }

.header {
    position: sticky;
    top: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 78px;
    padding: 0 4vw;
    border-bottom: 1px solid var(--line);
    background: rgba(242,239,229,.88);
    backdrop-filter: blur(18px) saturate(140%);
    transition: height .35s ease, box-shadow .35s ease, background .35s ease;
}
.header.is-scrolled { height: 66px; background: rgba(242,239,229,.96); box-shadow: 0 12px 36px rgba(8,29,22,.08); }
.logo { display: inline-flex; align-items: baseline; width: max-content; font-size: 28px; font-weight: 900; letter-spacing: -.09em; line-height: 1; }
.logo i { color: var(--clay); font-family: inherit; font-style: normal; }
.nav { display: flex; gap: 34px; }
.nav a { position: relative; padding: 12px 0; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 6px; height: 2px; background: var(--clay); transition: right .3s cubic-bezier(.2,.8,.2,1); }
.nav a:hover::after { right: 0; }
.tools { display: flex; justify-content: flex-end; gap: 6px; }
.tools button { min-width: 42px; height: 42px; border: 0; background: transparent; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.search-icon { position: relative; display: block; width: 16px; height: 16px; margin: auto; border: 1.7px solid currentColor; border-radius: 50%; }
.search-icon::after { content: ""; position: absolute; width: 7px; height: 1.7px; right: -5px; bottom: -2px; background: currentColor; transform: rotate(45deg); }
.cart-button { display: flex; align-items: center; gap: 7px; }
.cart-count { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 20px; color: white; background: var(--forest); font-size: 9px; }
.nav-toggle { display: none; }

.hero { position: relative; height: calc(100svh - 110px); min-height: 660px; max-height: 940px; overflow: hidden; color: white; background: var(--deep); }
.hero-media { position: absolute; inset: -4%; will-change: transform; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.84) contrast(1.04); }
.hero-photo img { object-position: right center; }
.hero-triptych { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; background: var(--deep); }
.hero-triptych > div { position: relative; overflow: hidden; }
.hero-triptych > div::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg,rgba(8,29,22,.02),rgba(8,29,22,.22)); }
.hero-triptych > div:nth-child(2) { transform: translateY(-2.5%); }
.hero-triptych > div:nth-child(3) { transform: translateY(2.5%); }
.hero-triptych img { transform: scale(1.08); transition: transform 1.4s cubic-bezier(.16,1,.3,1); }
.hero:hover .hero-triptych > div:nth-child(1) img { transform: scale(1.12) translateX(-1%); }
.hero:hover .hero-triptych > div:nth-child(2) img { transform: scale(1.12); }
.hero:hover .hero-triptych > div:nth-child(3) img { transform: scale(1.12) translateX(1%); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,25,18,.93) 0%, rgba(5,25,18,.68) 36%, rgba(5,25,18,.1) 70%), linear-gradient(0deg, rgba(5,25,18,.28), transparent 40%); }
.hero-grid { position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px); background-size: 11vw 11vw; mask-image: linear-gradient(90deg, black, transparent 70%); }
.hero-copy { position: absolute; z-index: 3; left: max(6vw, calc((100vw - var(--max))/2)); top: 50%; width: min(690px, 60vw); transform: translateY(-50%); }
.eyebrow { margin: 0 0 22px; color: var(--clay); font-size: 10px; font-weight: 900; letter-spacing: .24em; text-transform: uppercase; }
.eyebrow.light { color: var(--acid); }
h1, h2, h3 { margin: 0; font-family: var(--display); line-height: .94; letter-spacing: -.068em; }
h1 { font-size: clamp(64px, 7.7vw, 126px); font-weight: 700; }
h1 span { white-space: nowrap; }
h1 em, h2 i { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -.055em; }
.hero-lead { max-width: 540px; margin: 30px 0 36px; color: rgba(255,255,255,.72); font-size: clamp(16px,1.3vw,20px); line-height: 1.55; }
.hero-reveal { opacity: 0; transform: translateY(26px); animation: hero-in .85s cubic-bezier(.16,1,.3,1) forwards; }
.hero-reveal:nth-child(2) { animation-delay: .1s; }
.hero-reveal:nth-child(3) { animation-delay: .2s; }
.hero-reveal:nth-child(4) { animation-delay: .3s; }
@keyframes hero-in { to { opacity: 1; transform: none; } }
.actions { display: flex; align-items: center; gap: 30px; }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 25px; overflow: hidden; border: 1px solid transparent; font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; transition: color .35s ease, transform .35s ease, box-shadow .35s ease; }
.btn::before { content: ""; position: absolute; inset: 0; background: white; transform: translateY(101%); transition: transform .35s cubic-bezier(.16,1,.3,1); }
.btn span { position: relative; z-index: 1; }
.btn:hover { color: var(--deep); transform: translateY(-3px); box-shadow: 0 15px 34px rgba(0,0,0,.14); }
.btn:hover::before { transform: none; }
.acid { color: var(--deep); background: var(--acid); }
.acid::before { background: white; }
.text-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; color: white; border-bottom: 1px solid rgba(255,255,255,.35); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.text-link b, .section-head a b { transition: transform .25s ease; }
.text-link:hover b, .section-head a:hover b { transform: translate(3px,-3px); }
.hero-index { position: absolute; z-index: 2; top: 40px; right: 4vw; font-size: 12px; font-weight: 800; letter-spacing: .15em; }
.hero-index span { color: rgba(255,255,255,.45); }
.hero-note { position: absolute; z-index: 2; right: 4vw; bottom: 34px; font-size: 9px; font-weight: 700; letter-spacing: .17em; line-height: 1.6; text-align: right; text-transform: uppercase; }
.hero-scroll { position: absolute; z-index: 2; left: 50%; bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); }
.hero-scroll span { position: relative; display: block; width: 1px; height: 40px; overflow: hidden; background: rgba(255,255,255,.3); }
.hero-scroll span::after { content: ""; position: absolute; inset: 0; background: white; animation: scroll-line 1.8s ease-in-out infinite; transform: translateY(-100%); }
.hero-scroll small { font-size: 8px; letter-spacing: .18em; text-transform: uppercase; }
@keyframes scroll-line { 50%,100% { transform: translateY(100%); } }

.marquee { overflow: hidden; padding: 15px 0; color: white; background: var(--clay); }
.marquee-track { display: flex; width: max-content; animation: marquee 25s linear infinite; }
.marquee span { display: flex; align-items: center; gap: 28px; padding-right: 28px; font-size: 11px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.marquee i { color: var(--acid); font-size: 7px; }
@keyframes marquee { to { transform: translateX(-50%); } }

.section-shell { position: relative; max-width: var(--max); margin: 0 auto; padding-left: 5vw; padding-right: 5vw; }
.section-number { position: absolute; top: 78px; left: 5vw; color: rgba(16,37,29,.18); font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.statement { padding-top: 145px; padding-bottom: 115px; text-align: center; }
.statement-copy { max-width: 1020px; margin: 0 auto; }
.statement h2, .products h2, .material h2 { font-size: clamp(48px, 6vw, 94px); }
.statement .lead { max-width: 790px; margin: 40px auto 76px; color: var(--muted); font-size: clamp(17px,1.4vw,21px); }
.facts { display: grid; grid-template-columns: repeat(4,1fr); max-width: 1120px; margin: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts div { position: relative; display: flex; flex-direction: column; padding: 32px 18px; border-right: 1px solid var(--line); }
.facts div:last-child { border: 0; }
.facts b { font-size: 20px; letter-spacing: -.04em; }
.facts span { margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }

.collections { padding: 135px 0 145px; color: white; background: var(--deep); }
.collections-intro { display: grid; grid-template-columns: 1.15fr .85fr; gap: 9vw; align-items: end; margin-bottom: 58px; }
.collections-intro h2 { font-size: clamp(50px, 6vw, 94px); }
.collections-intro > p { max-width: 520px; margin: 0 0 7px; color: rgba(255,255,255,.58); font-size: clamp(16px,1.35vw,20px); }
.collection-grid { display: grid; grid-template-columns: 1.08fr .96fr .96fr; gap: 18px; }
.collection-card { min-width: 0; color: white; transform-style: preserve-3d; transition: transform .2s ease; transition-delay: var(--delay); }
.collection-image { position: relative; overflow: hidden; aspect-ratio: 1/1; background: #e5e1d7; }
.collection-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(8,29,22,.25),transparent 38%); pointer-events: none; }
.collection-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1), filter .5s ease; }
.collection-card:hover .collection-image img { transform: scale(1.035); filter: saturate(1.06); }
.collection-badge { position: absolute; z-index: 2; top: 16px; left: 16px; padding: 8px 11px; color: var(--deep); background: var(--acid); font-size: 8px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.collection-count { position: absolute; z-index: 2; right: 16px; top: 19px; color: rgba(8,29,22,.6); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.collection-copy { padding: 20px 2px 0; }
.collection-copy > p:first-child { margin: 0 0 8px; color: var(--acid); font-size: 8px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.collection-copy > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.collection-copy h3 { font-size: clamp(26px,2.4vw,40px); }
.collection-copy > div span { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; transition: color .25s ease, background .25s ease, transform .25s ease; }
.collection-card:hover .collection-copy > div span { color: var(--deep); background: var(--acid); transform: rotate(45deg); }
.collection-copy > p:last-child { max-width: 450px; margin: 14px 0 0; color: rgba(255,255,255,.5); font-size: 12px; line-height: 1.6; }

.products { padding-top: 85px; padding-bottom: 145px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 45px; }
.section-head h2 { font-size: clamp(46px,5vw,78px); }
.section-head > a { display: flex; gap: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--ink); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.shop-builder { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(400px,.9fr); min-height: 720px; overflow: hidden; box-shadow: 0 28px 70px rgba(16,37,29,.1); }
.shop-preview-stage { position: relative; min-height: 720px; overflow: hidden; background: #e8e4da; }
.shop-preview-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 80px rgba(16,37,29,.08); }
.shop-variant { position: absolute; inset: 0; margin: 0; }
.shop-variant img { width: 100%; height: 100%; object-fit: cover; }
.shop-variant.is-entering img { animation: product-enter .55s cubic-bezier(.16,1,.3,1); }
@keyframes product-enter { from { opacity: .2; transform: scale(1.025); } to { opacity: 1; transform: none; } }
.shop-badge { position: absolute; z-index: 2; left: 22px; top: 22px; padding: 9px 12px; color: var(--deep); background: var(--acid); font-size: 8px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.shop-image-index { position: absolute; z-index: 2; right: 22px; top: 26px; color: rgba(16,37,29,.5); font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.shop-config-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(45px,5vw,82px); background: var(--paper); }
.shop-kicker { margin: 0 0 20px; color: var(--clay); font-size: 9px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.shop-config-panel > h3 { max-width: 560px; font-size: clamp(36px,3.3vw,56px); line-height: .98; }
.shop-variant-label { margin: 13px 0 0; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.shop-description { min-height: 54px; max-width: 520px; margin: 24px 0 0; color: var(--muted); font-size: 13px; }
.shop-price { margin: 22px 0 32px; font-size: 22px; font-weight: 800; letter-spacing: -.04em; }
.config-group { min-width: 0; margin: 0 0 24px; padding: 0; border: 0; }
.config-group legend { margin: 0 0 11px; color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.choice-row { display: flex; flex-wrap: wrap; gap: 7px; }
.choice-row button, .size-choices button { min-height: 40px; padding: 0 13px; border: 1px solid var(--line); background: transparent; font-size: 9px; font-weight: 800; letter-spacing: .07em; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.choice-row button { display: flex; align-items: center; gap: 7px; }
.design-choices button span { width: 8px; height: 8px; border-radius: 50%; background: var(--forest); box-shadow: 5px 0 0 var(--cream); }
.design-choices button:nth-child(2) span { background: var(--clay); box-shadow: 5px 0 0 var(--forest); }
.design-choices button:nth-child(3) span { background: var(--acid); box-shadow: 5px 0 0 var(--forest); }
.choice-row button:hover, .size-choices button:hover { border-color: var(--forest); }
.choice-row button.selected, .size-choices button.selected { color: white; border-color: var(--forest); background: var(--forest); }
.size-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.size-choices button { min-width: 44px; padding: 0 10px; }
.config-add { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 0 20px; border: 0; color: var(--deep); background: var(--acid); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; transition: transform .25s ease, box-shadow .25s ease; }
.config-add:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(16,37,29,.13); }
.config-add b { font-size: 12px; }
.shop-delivery { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: var(--muted); font-size: 9px; }
.shop-delivery span { color: var(--forest); font-size: 6px; }
.product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.product { transform-style: preserve-3d; transition: transform .2s ease; transition-delay: var(--delay); }
.product-art { position: relative; display: grid; place-items: center; height: clamp(430px, 40vw, 610px); overflow: hidden; transform-style: preserve-3d; isolation: isolate; }
.product-art::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; transition: transform .65s cubic-bezier(.16,1,.3,1); }
.product:hover .product-art::before { transform: scale(1.12); }
.product-no { position: absolute; top: 18px; right: 18px; color: rgba(16,37,29,.45); font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.badge { position: absolute; z-index: 2; top: 16px; left: 16px; padding: 8px 11px; color: var(--deep); background: var(--acid); font-size: 8px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.apparel { position: relative; z-index: 1; display: grid; place-items: center; width: 54%; height: 60%; filter: drop-shadow(0 28px 20px rgba(0,0,0,.17)); transition: transform .65s cubic-bezier(.16,1,.3,1); transform: translateZ(24px) rotate(-2deg); }
.product:hover .apparel { transform: translateZ(34px) translateY(-10px) rotate(1deg) scale(1.025); }
.apparel::after { content: ""; position: absolute; inset: 0; opacity: .28; background-image: repeating-linear-gradient(90deg, transparent 0 2px, rgba(255,255,255,.7) 3px 4px); mix-blend-mode: soft-light; }
.apparel span { position: relative; z-index: 1; color: var(--clay); font-size: 18px; font-weight: 900; letter-spacing: -.08em; }
.offwhite-shirt { background: #dcd8cc; }
.offwhite-shirt .apparel { background: #f5f2e9; clip-path: polygon(18% 5%,34% 0,40% 9%,60% 9%,66% 0,82% 5%,100% 25%,84% 38%,76% 29%,77% 100%,23% 100%,24% 29%,16% 38%,0 25%); }
.forest-dress { background: #315d4c; }
.forest-dress .apparel { background: #123b2d; clip-path: polygon(31% 0,43% 8%,57% 8%,69% 0,79% 6%,70% 35%,93% 100%,7% 100%,30% 35%,21% 6%); }
.forest-dress .apparel span { color: var(--acid); }
.clay-polo { background: #bd6b47; }
.clay-polo .apparel { background: #e9dbd0; clip-path: polygon(18% 5%,35% 0,43% 7%,50% 2%,57% 7%,65% 0,82% 5%,100% 25%,84% 38%,76% 29%,77% 100%,23% 100%,24% 29%,16% 38%,0 25%); }
.add { position: absolute; z-index: 3; right: 16px; bottom: 16px; display: grid; place-items: center; width: 50px; height: 50px; border: 0; border-radius: 50%; color: var(--deep); background: var(--paper); box-shadow: 0 8px 20px rgba(0,0,0,.08); transition: transform .35s ease, background .25s ease; }
.add span { font-size: 25px; line-height: 1; transition: transform .35s ease; }
.add:hover { background: var(--acid); transform: scale(1.08); }
.add:hover span { transform: rotate(90deg); }
.product-view { position: absolute; left: 18px; bottom: 18px; opacity: 0; transform: translateY(8px); color: rgba(16,37,29,.7); font-size: 8px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; transition: .3s ease; }
.product:hover .product-view { opacity: 1; transform: none; }
.product-info { display: flex; justify-content: space-between; padding: 20px 3px; }
.product-info h3 { font-size: 18px; letter-spacing: -.04em; }
.product-info p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.product-info > b { font-size: 13px; }

.team { display: grid; grid-template-columns: 1.12fr .88fr; min-height: 760px; color: white; background: var(--forest); }
.team-court { position: relative; min-height: 620px; overflow: hidden; background: linear-gradient(rgba(20,59,46,.12),rgba(20,59,46,.25)), repeating-linear-gradient(3deg,#b45d38 0,#b45d38 3px,#a95433 4px,#a95433 6px); }
.team-court::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 20%, rgba(28,18,11,.24)); }
.court-line { position: absolute; z-index: 1; background: rgba(255,249,238,.88); box-shadow: 0 2px 5px rgba(53,29,18,.2); }
.court-line.one { left: -20%; top: 48%; width: 140%; height: 7px; transform: rotate(-10deg); }
.court-line.two { left: 47%; top: -20%; width: 7px; height: 140%; transform: rotate(18deg); }
.court-orbit { position: absolute; z-index: 1; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; }
.orbit-one { width: 420px; height: 420px; left: 12%; top: 12%; animation: orbit 13s linear infinite; }
.orbit-two { width: 240px; height: 240px; right: 8%; bottom: 7%; animation: orbit 9s linear infinite reverse; }
.court-orbit::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--acid); top: 50%; left: -9px; box-shadow: 0 0 28px rgba(223,255,67,.5); }
@keyframes orbit { to { transform: rotate(360deg); } }
.team-court > span { position: absolute; z-index: 0; left: 3%; bottom: -65px; color: rgba(255,255,255,.09); font-size: clamp(200px,23vw,380px); font-weight: 900; letter-spacing: -.12em; line-height: 1; }
.team-stamp { position: absolute; z-index: 3; left: 9%; top: 10%; display: flex; align-items: center; gap: 14px; width: 132px; height: 132px; padding: 20px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; color: white; backdrop-filter: blur(5px); animation: stamp-float 4s ease-in-out infinite; }
.team-stamp b { font-size: 28px; }
.team-stamp small { font-size: 8px; font-weight: 900; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
@keyframes stamp-float { 50% { transform: translateY(-8px) rotate(3deg); } }
.team-copy { align-self: center; padding: 9vw 7vw; }
.team-copy h2 { font-size: clamp(56px,5.8vw,94px); }
.team-copy > p:not(.eyebrow) { max-width: 560px; margin: 34px 0; color: rgba(255,255,255,.66); font-size: 17px; }
.team-copy ul { margin: 0 0 40px; padding: 0; list-style: none; }
.team-copy li { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 13px; }
.team-copy li span { color: var(--acid); font-size: 9px; font-weight: 900; letter-spacing: .12em; }

.material { display: grid; grid-template-columns: .85fr 1.15fr; gap: 8vw; align-items: center; padding-top: 150px; padding-bottom: 150px; }
.material-copy > p:not(.eyebrow) { max-width: 540px; margin: 34px 0; color: var(--muted); font-size: 17px; }
.text-link.dark { color: var(--ink); border-color: rgba(16,37,29,.35); }
.fabric { position: relative; min-height: 590px; overflow: hidden; color: white; background-color: #d3cec0; background-image: radial-gradient(circle at center, #153d30 1.7px, transparent 1.9px); background-size: 8px 8px; box-shadow: inset 0 0 130px rgba(12,46,35,.38), 0 35px 70px rgba(16,37,29,.12); }
.fabric::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 35%, rgba(8,29,22,.28)); }
.fabric-glow { position: absolute; z-index: 1; width: 340px; height: 340px; border-radius: 50%; background: rgba(223,255,67,.18); filter: blur(45px); transform: translate(-50%,-50%); pointer-events: none; }
.fabric-label { position: absolute; z-index: 2; left: 34px; top: 32px; display: flex; flex-direction: column; font-size: 14px; font-weight: 900; letter-spacing: -.04em; }
.fabric-label small { margin-top: 5px; color: rgba(255,255,255,.6); font-size: 8px; letter-spacing: .15em; text-transform: uppercase; }
.fabric-stats { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3,1fr); background: rgba(8,29,22,.38); backdrop-filter: blur(8px); }
.fabric-stats > span { display: flex; flex-direction: column; padding: 30px; border-right: 1px solid rgba(255,255,255,.17); font-size: clamp(30px,3vw,48px); font-weight: 700; letter-spacing: -.06em; }
.fabric-stats > span:last-child { border: 0; }
.fabric-stats small { margin-top: 2px; font-size: 8px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }

.quote { position: relative; display: grid; place-items: center; min-height: 520px; padding: 80px 8vw; overflow: hidden; color: white; background: var(--deep); text-align: center; }
.quote blockquote { position: relative; z-index: 2; max-width: 1050px; margin: 0; font-family: var(--serif); font-size: clamp(34px,4.5vw,70px); font-style: italic; line-height: 1.1; letter-spacing: -.045em; }
.quote-mark { position: absolute; left: 50%; top: -120px; color: rgba(255,255,255,.04); font-family: var(--serif); font-size: 600px; line-height: 1; transform: translateX(-50%); }
.quote-line { position: absolute; width: 1px; height: 80px; bottom: 0; background: var(--acid); }

.closing { position: relative; overflow: hidden; padding: 145px 20px; background: var(--acid); text-align: center; }
.closing h2 { position: relative; z-index: 2; font-size: clamp(58px,7.5vw,118px); }
.closing .eyebrow { position: relative; z-index: 2; color: var(--forest); }
.dark-btn { z-index: 2; margin-top: 42px; color: white; background: var(--deep); }
.ball { position: absolute; border-radius: 50%; background: var(--acid); border: 1px solid rgba(16,37,29,.2); box-shadow: inset 35px -25px 65px rgba(16,37,29,.15), 0 30px 70px rgba(16,37,29,.12); }
.ball::after { content: ""; position: absolute; inset: 7% -15%; border: 2px solid rgba(16,37,29,.22); border-radius: 50%; transform: rotate(45deg); }
.ball-one { width: 330px; height: 330px; right: -65px; top: -95px; animation: ball-float 6s ease-in-out infinite; }
.ball-two { width: 110px; height: 110px; left: 8%; bottom: 12%; animation: ball-float 4s ease-in-out infinite reverse; }
@keyframes ball-float { 50% { transform: translateY(15px) rotate(8deg); } }

.footer { display: grid; grid-template-columns: 1.5fr repeat(3,1fr); gap: 60px; padding: 90px 6vw 30px; color: white; background: var(--deep); }
.footer > div { display: flex; flex-direction: column; gap: 11px; }
.footer p { max-width: 320px; margin: 20px 0 8px; color: rgba(255,255,255,.5); font-size: 13px; }
.footer strong { margin-bottom: 10px; color: var(--acid); font-size: 9px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.footer a:not(.logo) { width: max-content; color: rgba(255,255,255,.68); font-size: 12px; }
.footer a:not(.logo):hover { color: white; }
.footer-logo { color: white; font-size: 36px; }
.footer-mail { margin-top: 6px; border-bottom: 1px solid rgba(255,255,255,.25); }
.newsletter { display: flex; border-bottom: 1px solid rgba(255,255,255,.35); }
.newsletter input { width: 100%; padding: 13px 0; border: 0; outline: 0; color: white; background: transparent; font-size: 12px; }
.newsletter button { border: 0; color: var(--acid); background: transparent; font-size: 22px; }
.footer small { grid-column: 1/-1; margin-top: 30px; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.36); font-size: 9px; letter-spacing: .1em; }
.cart-backdrop { position: fixed; inset: 0; z-index: 1090; visibility: hidden; opacity: 0; background: rgba(8,29,22,.48); backdrop-filter: blur(4px); transition: opacity .35s ease, visibility .35s ease; }
.cart-backdrop.is-open { visibility: visible; opacity: 1; }
.cart-drawer { position: fixed; z-index: 1100; top: 0; right: 0; display: grid; grid-template-rows: auto auto 1fr auto; width: min(520px,100vw); height: 100dvh; color: var(--ink); background: var(--paper); box-shadow: -30px 0 80px rgba(8,29,22,.2); visibility: hidden; transform: translateX(105%); transition: transform .45s cubic-bezier(.16,1,.3,1), visibility .45s ease; }
.cart-drawer.is-open { visibility: visible; transform: none; }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 28px 30px 22px; border-bottom: 1px solid var(--line); }
.cart-head p { margin: 0 0 7px; color: var(--clay); font-size: 8px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.cart-head h2 { font-size: clamp(31px,4vw,44px); }
.cart-close { position: relative; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: transparent; transition: background .25s ease, transform .25s ease; }
.cart-close:hover { background: var(--acid); transform: rotate(8deg); }
.cart-close span { position: absolute; left: 13px; top: 21px; width: 17px; height: 1px; background: currentColor; transform: rotate(45deg); }
.cart-close span:last-child { transform: rotate(-45deg); }
.shipping-meter { padding: 15px 30px; border-bottom: 1px solid var(--line); background: var(--cream); }
.shipping-meter > div { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 9px; font-size: 9px; font-weight: 800; }
.shipping-meter b { color: var(--forest); }
.shipping-track { display: block; height: 4px; overflow: hidden; background: rgba(16,37,29,.12); }
.shipping-track i { display: block; width: 100%; height: 100%; background: var(--acid); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.16,1,.3,1); }
.cart-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.cart-empty { display: flex; align-items: center; flex-direction: column; justify-content: center; min-height: 100%; padding: 50px 38px; text-align: center; }
.empty-ball { position: relative; width: 86px; height: 86px; margin-bottom: 28px; overflow: hidden; border-radius: 50%; background: var(--acid); box-shadow: inset 14px -10px 28px rgba(16,37,29,.16); }
.empty-ball::after { content: ""; position: absolute; inset: 8px -16px; border: 1px solid rgba(16,37,29,.34); border-radius: 50%; transform: rotate(45deg); }
.cart-empty h3 { font-size: 32px; }
.cart-empty p { max-width: 300px; margin: 16px 0 26px; color: var(--muted); font-size: 13px; }
.cart-empty button { min-height: 46px; padding: 0 23px; border: 0; color: white; background: var(--deep); font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.cart-items { padding: 4px 30px 20px; }
.cart-item { display: grid; grid-template-columns: 104px 1fr; gap: 19px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.cart-item-image { width: 104px; aspect-ratio: 4/5; overflow: hidden; background: var(--cream); }
.cart-item-image img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-copy { display: flex; min-width: 0; flex-direction: column; }
.cart-item-copy > div:first-child { display: flex; justify-content: space-between; gap: 16px; }
.cart-item h3 { font-size: 17px; line-height: 1.1; letter-spacing: -.04em; }
.cart-item-price { flex: 0 0 auto; font-size: 12px; font-weight: 800; }
.cart-item-meta { margin: 8px 0 0; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cart-item-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: auto; padding-top: 18px; }
.quantity { display: grid; grid-template-columns: 34px 34px 34px; height: 34px; border: 1px solid var(--line); }
.quantity button { border: 0; background: transparent; font-size: 16px; }
.quantity button:hover { background: var(--cream); }
.quantity span { display: grid; place-items: center; font-size: 10px; font-weight: 800; }
.cart-remove { padding: 6px 0; border: 0; border-bottom: 1px solid var(--line); color: var(--muted); background: transparent; font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.cart-remove:hover { color: var(--clay); border-color: var(--clay); }
.cart-summary { padding: 22px 30px 28px; border-top: 1px solid var(--line); background: var(--paper); box-shadow: 0 -15px 35px rgba(8,29,22,.06); }
.cart-summary > div { display: flex; justify-content: space-between; gap: 20px; font-size: 17px; font-weight: 800; }
.cart-summary > div b { font-size: 20px; }
.cart-summary > p { margin: 7px 0 18px; color: var(--muted); font-size: 9px; }
.cart-checkout, .checkout-form button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0 20px; border: 0; color: var(--deep); background: var(--acid); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; transition: transform .25s ease, box-shadow .25s ease; }
.cart-checkout:hover, .checkout-form button:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(16,37,29,.13); }
.cart-checkout b, .checkout-form button b { font-size: 18px; }
.checkout-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 25px; visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility .35s ease; }
.checkout-modal.is-open { visibility: visible; opacity: 1; }
.checkout-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(8,29,22,.7); backdrop-filter: blur(7px); }
.checkout-card { position: relative; width: min(680px,100%); max-height: calc(100dvh - 50px); padding: clamp(34px,5vw,64px); overflow-y: auto; background: var(--paper); box-shadow: 0 35px 100px rgba(0,0,0,.28); transform: translateY(20px) scale(.98); transition: transform .4s cubic-bezier(.16,1,.3,1); }
.checkout-modal.is-open .checkout-card { transform: none; }
.checkout-close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 24px; line-height: 1; }
.checkout-card h2 { max-width: 520px; font-size: clamp(40px,5.5vw,66px); }
.checkout-intro { max-width: 550px; margin: 24px 0 28px; color: var(--muted); font-size: 13px; }
.checkout-order { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 11px; }
.checkout-order b { font-size: 15px; }
.checkout-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.checkout-form label { display: flex; flex-direction: column; gap: 8px; }
.checkout-form label > span { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.checkout-form input, .checkout-form textarea { width: 100%; padding: 13px 0; border: 0; border-bottom: 1px solid var(--line); outline: 0; background: transparent; font-size: 13px; resize: vertical; }
.checkout-form input:focus, .checkout-form textarea:focus { border-color: var(--forest); }
.checkout-note, .checkout-form button { grid-column: 1/-1; }
.toast { position: fixed; z-index: 100; right: 22px; bottom: 22px; padding: 15px 20px; color: white; background: var(--deep); box-shadow: 0 15px 40px rgba(8,29,22,.2); font-size: 12px; transform: translateY(100px); opacity: 0; transition: .3s ease; }
.toast.show { opacity: 1; transform: none; }

.reveal { opacity: 1; transform: none; }
.reveal.reveal-pending { opacity: .08; transform: translateY(34px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); transition-delay: var(--delay,0ms); }
.reveal.revealed { opacity: 1; transform: none; }

@media (max-width: 980px) {
    .header { grid-template-columns: 1fr auto auto; }
    .nav-toggle { display: block; width: 42px; height: 42px; padding: 10px; border: 0; background: transparent; }
    .nav-toggle span { display: block; height: 2px; margin: 6px 0; background: var(--ink); transition: transform .25s ease; }
    .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
    .nav { position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 100px 8vw; visibility: hidden; opacity: 0; background: var(--cream); transition: opacity .3s ease, visibility .3s ease; }
    .nav.open { visibility: visible; opacity: 1; }
    .nav a { font-size: clamp(34px,8vw,70px); font-weight: 600; letter-spacing: -.06em; text-transform: none; }
    .nav a::after { display: none; }
    .search-button { display: none; }
    .hero-copy { width: min(700px, 74vw); }
    .team { grid-template-columns: 1fr; }
    .team-court { min-height: 600px; }
    .team-copy { padding: 100px 8vw; }
    .material { grid-template-columns: 1fr; gap: 60px; }
    .collections-intro { grid-template-columns: 1fr; gap: 28px; }
    .collection-grid { grid-template-columns: 1fr 1fr; }
    .collection-card.featured { grid-column: 1/-1; }
    .collection-card.featured .collection-image { aspect-ratio: 16/10; }
    .shop-builder { grid-template-columns: 1fr; }
    .shop-preview-stage { min-height: 680px; }
}

@media (max-width: 700px) {
    .topline { padding: 7px 20px; }
    .topline span { font-size: 8px; letter-spacing: .09em; }
    .header, .header.is-scrolled { height: 64px; padding: 0 5vw; }
    .logo { font-size: 24px; }
    .cart-button { padding: 0 2px; }
    .hero { height: 750px; min-height: 0; }
    .hero-media { inset: 0; }
    .hero-media img { object-position: center; }
    .hero-photo img { object-position: 76% center; }
    .hero-triptych { grid-template-columns: repeat(3, 72vw); left: -48vw; right: auto; width: 216vw; }
    .hero-triptych > div:nth-child(2), .hero-triptych > div:nth-child(3) { transform: none; }
    .hero-shade { background: linear-gradient(0deg,rgba(5,25,18,.96) 0%,rgba(5,25,18,.62) 62%,rgba(5,25,18,.08)); }
    .hero-grid { background-size: 25vw 25vw; mask-image: linear-gradient(0deg,black,transparent 75%); }
    .hero-copy { left: 6vw; right: 6vw; top: auto; bottom: 72px; width: auto; transform: none; }
    h1 { font-size: clamp(58px,18vw,84px); }
    h1 span { white-space: normal; }
    .hero-lead { margin: 22px 0 28px; font-size: 15px; }
    .actions { align-items: flex-start; flex-direction: column; gap: 12px; }
    .hero-index, .hero-note, .hero-scroll { display: none; }
    .marquee { padding: 12px 0; }
    .statement { padding-top: 100px; padding-bottom: 80px; }
    .section-number { display: none; }
    .statement h2, .products h2, .material h2 { font-size: clamp(43px,13vw,66px); }
    .statement .lead { margin: 30px auto 55px; font-size: 16px; }
    .facts { grid-template-columns: 1fr 1fr; }
    .facts div:nth-child(2) { border-right: 0; }
    .facts div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .facts div { padding: 24px 10px; }
    .products { padding-top: 55px; padding-bottom: 100px; }
    .collections { padding: 95px 0 105px; }
    .collections-intro { margin-bottom: 42px; }
    .collections-intro h2 { font-size: clamp(46px,13vw,68px); }
    .collection-grid { grid-template-columns: 1fr; gap: 42px; }
    .collection-card.featured { grid-column: auto; }
    .collection-card.featured .collection-image { aspect-ratio: 1/1; }
    .collection-copy h3 { font-size: 32px; }
    .section-head > a { display: none; }
    .product-grid { grid-template-columns: 1fr; gap: 32px; }
    .shop-builder { box-shadow: none; }
    .shop-preview-stage { min-height: 470px; }
    .shop-config-panel { padding: 45px 6vw 55px; }
    .shop-config-panel > h3 { font-size: 40px; }
    .shop-description { min-height: 0; }
    .choice-row button { min-height: 42px; }
    .product-art { height: 470px; }
    .product-view { display: none; }
    .team-court { min-height: 480px; }
    .team-stamp { width: 106px; height: 106px; padding: 15px; }
    .team-stamp b { font-size: 23px; }
    .team-copy { padding: 80px 7vw; }
    .team-copy h2 { font-size: clamp(52px,15vw,76px); }
    .material { padding-top: 95px; padding-bottom: 95px; }
    .fabric { min-height: 490px; }
    .fabric-stats > span { padding: 22px 15px; }
    .cart-head { padding: 23px 20px 18px; }
    .shipping-meter { padding: 14px 20px; }
    .cart-items { padding: 4px 20px 18px; }
    .cart-item { grid-template-columns: 86px 1fr; gap: 14px; }
    .cart-item-image { width: 86px; }
    .cart-summary { padding: 19px 20px 22px; }
    .checkout-modal { padding: 0; }
    .checkout-card { width: 100%; max-height: 100dvh; min-height: 100dvh; padding: 64px 7vw 42px; }
    .checkout-form { grid-template-columns: 1fr; }
    .checkout-note, .checkout-form button { grid-column: auto; }
    .quote { min-height: 430px; padding: 70px 7vw; }
    .closing { padding: 105px 20px; }
    .ball-one { width: 220px; height: 220px; }
    .ball-two { display: none; }
    .footer { grid-template-columns: 1fr 1fr; gap: 45px 30px; padding: 75px 7vw 28px; }
    .footer-brand, .footer > div:last-of-type { grid-column: 1/-1; }
}

@media (hover: none) { .product { transform: none !important; } }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .hero-media { transform: none !important; }
    .reveal.reveal-pending { opacity: 1; transform: none; }
}