/* brand pages */
.bhero{position:relative;min-height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(30px,5vw,80px);padding:110px var(--gutter) 60px;max-width:1500px;margin:0 auto}
.bhero .crumb{display:inline-flex;gap:8px;align-items:center;font-size:14px;text-decoration:none;color:var(--text-secondary);margin-bottom:28px}
.bhero .crumb:hover{color:var(--ink)}
.bhero h1{font-size:clamp(84px,13vw,200px);letter-spacing:-.06em;line-height:.82;text-transform:lowercase}
.bhero h1 small{display:block;font-size:clamp(26px,2.6vw,40px);letter-spacing:-.03em;font-weight:500;margin-top:20px;text-transform:none;line-height:1.1}
.bhero .lede{margin-top:24px}
.bhero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.bhero .art{position:relative;border-radius:40px;overflow:hidden;aspect-ratio:4/5;max-height:80vh;justify-self:end;width:100%}
.bhero .art img{width:100%;height:100%;object-fit:cover;animation:slowzoom 30s var(--ease-io) -6s infinite alternate}
@keyframes slowzoom{from{transform:scale(1.02)}to{transform:scale(1.12)}}
.badge-ex{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--canvas);border-radius:999px;padding:9px 16px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px}
.badge-ex i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(201,71,47,.6);animation:ping 2.6s var(--ease-out) -1s infinite}
@keyframes ping{to{box-shadow:0 0 0 12px rgba(201,71,47,0)}}
@media (max-width:900px){.bhero{grid-template-columns:1fr;padding-top:100px}.bhero .art{aspect-ratio:4/3;justify-self:stretch}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:center}
.split .ph{border-radius:32px;overflow:hidden}
.split .ph img{width:100%;height:100%;object-fit:cover}
.prose p{font-size:clamp(18px,1.4vw,20px);color:var(--ink-2);max-width:48ch}
.prose p+p{margin-top:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chips span{border:1px solid var(--line-strong);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:500;background:rgba(247,240,228,.5)}
@media (max-width:900px){.split{grid-template-columns:1fr}}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
.stat{border-top:1px solid var(--line-strong);padding-top:20px;min-width:0}
.stats{column-gap:24px}
.stat b{font-family:var(--display);font-weight:900;font-size:clamp(30px,4.4vw,68px);letter-spacing:-.04em;line-height:.95;display:block}
.stat span{color:var(--text-secondary);font-size:15px;display:block;margin-top:10px;max-width:24ch}
@media (max-width:900px){.stats{grid-template-columns:1fr 1fr}}

/* chart */
.chart{background:var(--panel);border:1px solid var(--line);border-radius:32px;padding:clamp(24px,3vw,40px)}
.chart .bars{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(8px,1.6vw,22px);align-items:end;height:260px;margin-top:26px;border-bottom:1px solid var(--line-strong);padding:0 4px}
.chart .grp{display:flex;gap:4px;align-items:flex-end;height:100%;justify-content:center}
.chart .bar{width:clamp(10px,1.6vw,22px);border-radius:6px 6px 0 0;height:calc(var(--v) / 6 * 100%);transform-origin:bottom;transform:scaleY(0);transition:transform 1.3s var(--ease-out)}
.chart.in .bar{transform:scaleY(1)}
.chart .grp:nth-child(2) .bar{transition-delay:.06s}.chart .grp:nth-child(3) .bar{transition-delay:.12s}.chart .grp:nth-child(4) .bar{transition-delay:.18s}.chart .grp:nth-child(5) .bar{transition-delay:.24s}.chart .grp:nth-child(6) .bar{transition-delay:.3s}.chart .grp:nth-child(7) .bar{transition-delay:.36s}
.bar.cr{background:#8E1F2A}.bar.sf{background:#F1B12E}
.chart .names{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(8px,1.6vw,22px);margin-top:10px;font-size:13px;text-align:center;color:var(--text-secondary)}
.chart .names b{color:var(--ink)}
.legend{display:flex;gap:18px;font-size:14px;flex-wrap:wrap}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.src{font-size:12px;color:var(--text-secondary);margin-top:14px}

/* feature trio */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.feat{background:var(--panel);border:1px solid var(--line);border-radius:28px;overflow:hidden;display:flex;flex-direction:column}
.feat .ph{aspect-ratio:4/3;overflow:hidden;background:var(--canvas-2)}
.feat .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.feat:hover .ph img{transform:scale(1.05)}
.feat .t{padding:26px}
.feat h3{font-size:26px;letter-spacing:-.025em;margin-bottom:10px}
.feat p{color:var(--text-secondary);font-size:16px}
@media (max-width:900px){.trio{grid-template-columns:1fr}}

/* catalog */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:40px 0 30px}
.filters button{font:inherit;font-size:14px;font-weight:500;border:1px solid var(--line-strong);background:transparent;border-radius:999px;padding:9px 16px;cursor:pointer;color:var(--ink);transition:background .3s,color .3s}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
@media (pointer:coarse){.filters button{min-height:44px}}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pcard{all:unset;box-sizing:border-box;cursor:pointer;background:var(--panel);border:1px solid var(--line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),opacity .4s}
.pcard:hover{transform:translateY(-5px);box-shadow:0 24px 50px -30px rgba(31,26,21,.45)}
.pcard:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pcard[hidden]{display:none}
.pcard .ph{display:block;aspect-ratio:1/1.1;overflow:hidden;position:relative}
.pcard .ph img{width:100%;height:100%;object-fit:cover}
.pcard .award{position:absolute;top:12px;right:12px;background:#F1C24B;color:var(--ink);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:999px}
.pcard .t{padding:18px 18px 20px;display:flex;flex-direction:column;gap:4px;flex:1}
.pcard .rng{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--pc,var(--accent))}
.pcard b{font-family:var(--display);font-size:24px;letter-spacing:-.025em;line-height:1.05}
.pcard .sub{font-size:14px;color:var(--text-secondary);line-height:1.4}
.pcard .meta{margin-top:auto;padding-top:12px;font-size:13px;color:var(--ink-2);display:flex;justify-content:space-between;gap:8px}
@media (max-width:1100px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.cat-grid{grid-template-columns:repeat(2,1fr);gap:12px}.pcard b{font-size:19px}}

dialog.pd{border:0;padding:0;border-radius:32px;max-width:min(980px,94vw);width:100%;background:var(--panel);color:var(--ink);box-shadow:0 40px 100px -30px rgba(0,0,0,.5)}
dialog.pd::backdrop{background:rgba(31,26,21,.55);backdrop-filter:blur(4px)}
dialog.pd[open]{animation:dlg .5s var(--ease-out)}
@keyframes dlg{from{opacity:0;transform:translateY(20px) scale(.98)}}
.pd-in{display:grid;grid-template-columns:.9fr 1.1fr}
.pd-in .ph{min-height:100%;background:var(--canvas-2)}
.pd-in .ph img{width:100%;height:100%;object-fit:cover}
.pd-in .t{padding:clamp(24px,3vw,40px);max-height:86vh;overflow:auto}
.pd-in h3{font-size:clamp(36px,4vw,56px);letter-spacing:-.04em;color:var(--pc)}
.pd-in .tl{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:10px 0 18px;color:var(--text-secondary)}
.pd-in h4{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin:22px 0 8px;color:var(--pc)}
.pd-in ul{margin:0;padding-left:18px}
.pd-in li{margin:3px 0}
.pd-in p{color:var(--ink-2)}
.pd-close{position:sticky;top:14px;float:right;margin:14px 14px -58px 0;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:var(--ink);color:var(--canvas);font-size:20px;cursor:pointer}
@media (max-width:760px){.pd-in{grid-template-columns:1fr}.pd-in .ph{max-height:34vh}}

/* packs */
.packs{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;margin-top:56px}
.pack{border-radius:32px;overflow:hidden;position:relative;background:#F2F2F0;display:flex;flex-direction:column}
.pack img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.pack:hover img{transform:scale(1.03)}
.pack .t{position:relative;padding:4px 28px 28px}
.pack h3{font-size:36px;letter-spacing:-.035em}
.pack p{color:var(--text-secondary);font-size:15px;margin-top:6px}
.pack.wide{grid-column:1/-1}
.pack.wide img{aspect-ratio:21/8}
@media (max-width:900px){.packs{grid-template-columns:1fr}}

/* media wall */
.press{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,56px);align-items:center;justify-content:space-between;margin-top:48px;padding:28px 0;border-block:1px solid rgba(239,229,212,.2)}
.press span{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.2vw,30px);letter-spacing:-.02em;opacity:.85}

/* video slot */
.vslot{position:relative;border-radius:36px;overflow:hidden;aspect-ratio:16/9;background:#1F1A15;color:#F7F0E4;display:flex;align-items:flex-end}
.vslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
.vslot::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(18,13,8,0) 30%,rgba(18,13,8,.8))}
.vslot .t{position:relative;z-index:1;padding:clamp(24px,4vw,48px);display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.vslot .play{width:84px;height:84px;border-radius:50%;background:#F7F0E4;display:grid;place-items:center;flex:none}
.vslot .play::after{content:"";border-left:22px solid var(--ink);border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px}
.vslot h3{font-size:clamp(28px,3vw,44px);letter-spacing:-.03em}
.vslot iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2}

.stock{background:var(--ink);color:#EFE5D4;border-radius:40px;padding:clamp(32px,6vw,90px);display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end}
.stock h2{font-size:clamp(44px,5.6vw,88px)}
.stock h2 em{font-style:normal;font-weight:500;color:#F1C24B}
.stock p{color:rgba(239,229,212,.75);max-width:44ch;margin-top:18px}
.stock .ctas{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:900px){.stock{grid-template-columns:1fr}}

.bhero .art-fall img,.bhero .art-fall video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:none}
.bhero .art-fall video{opacity:0;transition:opacity .8s}
.bhero .art-fall video.on{opacity:1}
