.brand-universe-link{display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;padding:26px 0;background:none;color:inherit;border:0;border-bottom:1px solid #aaa;text-align:left;cursor:pointer}
.brand-universe-link>span:first-child{display:flex;flex-direction:column;gap:8px;font-size:clamp(20px,2.5vw,34px);letter-spacing:-.035em}
.brand-universe-link small{font-size:10px;letter-spacing:.14em;color:#666;text-transform:uppercase}
.brand-universe-link .universe-plus{font-size:38px;font-weight:300;transition:transform .25s}
.brand-universe-link:hover .universe-plus{transform:rotate(90deg)}
.brand-universe{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;overflow-y:auto;overscroll-behavior:contain;background:#080808;color:#f4f3ef}
.brand-universe::backdrop{background:#080808}
.universe-toolbar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:20px;background:#080808f5;border-bottom:1px solid #ffffff28;padding:22px 4vw}
.universe-toolbar>span{font-size:25px;font-weight:700;letter-spacing:-.06em}
.universe-toolbar small{font-size:9px;font-weight:400;letter-spacing:.14em;border-left:1px solid #555;padding-left:22px;margin-left:22px}
.universe-close{border:0;background:none;color:inherit;cursor:pointer;font-size:12px;padding:8px 0}
.universe-page{padding:56px 4vw 30px;background:linear-gradient(90deg,#080808 48%,#080808a8),url('assets/hero-wing.png') right top/auto 100% no-repeat}
.universe-eyebrow{font-size:10px;letter-spacing:.2em;margin:0 0 32px;color:#aaa}
.universe-intro h2{font-size:clamp(38px,5.7vw,90px);font-weight:400;line-height:1.02;letter-spacing:-.055em;margin:0;text-transform:uppercase}
.universe-intro h2 em{display:block;font-family:Georgia,serif;font-weight:400;font-size:1.04em}
.universe-intro-bottom{display:flex;justify-content:space-between;gap:50px;align-items:start;margin-top:26px}
.universe-intro-bottom p{font:clamp(16px,1.7vw,24px)/1.5 Georgia,serif;max-width:780px;margin:0;color:#c9c9c5}
.universe-intro-bottom>span{font-size:10px;letter-spacing:.15em;line-height:2.1;white-space:nowrap;color:#aaa}
.universe-map{position:relative;margin:76px 64px 64px;padding:22px 0}
.universe-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:'premium luxury' 'designers creators' 'midrange sport' 'mass sport';gap:18px 50px}
.universe-group{background:#080808e6;border:1px solid #ffffff35;padding:24px;min-width:0}
.universe-group h3{display:flex;align-items:center;gap:18px;margin:0 0 25px;font-size:10px;line-height:1.5;font-weight:400;text-transform:uppercase;letter-spacing:.17em;color:#c6c6c2}
.universe-group h3:after{content:'';height:1px;background:#ffffff25;flex:1}
.universe-names{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:23px 32px}
.universe-names span{font:400 clamp(19px,2.3vw,33px)/1.1 Georgia,serif;text-align:center}
.universe-names img{object-fit:contain;max-width:140px;max-height:65px;width:30%}
.premium{grid-area:premium}.luxury{grid-area:luxury}.designers{grid-area:designers}.creators{grid-area:creators}.midrange{grid-area:midrange}.sport{grid-area:sport}.mass{grid-area:mass}
.luxury .universe-names span,.sport .universe-names span{font-family:Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.025em;font-size:clamp(17px,2vw,28px)}
.sport .universe-names{min-height:160px;align-content:center;gap:35px}
.universe-map:before{content:'';position:absolute;left:50%;top:0;bottom:0;border-left:1px solid #ffffff65}
.universe-map:after{content:'';position:absolute;left:-12px;right:-12px;top:54%;border-top:1px solid #ffffff65;pointer-events:none;display:none}
.axis-top,.axis-bottom,.axis-left,.axis-right{position:absolute;font:17px Georgia,serif;color:#ccc}
.axis-top{top:-26px;left:50%;transform:translateX(-50%)}.axis-bottom{bottom:-27px;left:50%;transform:translateX(-50%)}.axis-left{left:-68px;top:50%;writing-mode:vertical-rl;transform:rotate(180deg)}.axis-right{right:-55px;top:50%;writing-mode:vertical-rl}
.universe-footer{border-top:1px solid #ffffff40;display:flex;justify-content:space-between;gap:24px;padding-top:22px;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#aaa}
@media(max-width:750px){.universe-toolbar{padding:18px 22px}.universe-toolbar small{display:none}.universe-page{padding:35px 22px 25px}.universe-intro h2{font-size:clamp(30px,7.6vw,54px)}.universe-intro-bottom{display:block}.universe-intro-bottom>span{display:block;margin-top:20px;font-size:9px}.universe-map{margin:40px 0}.universe-map:before,.axis-top,.axis-bottom,.axis-left,.axis-right{display:none}.universe-grid{grid-template-columns:1fr;grid-template-areas:'premium' 'luxury' 'designers' 'creators' 'midrange' 'sport' 'mass';gap:14px}.universe-group{padding:23px 20px}.universe-names span{font-size:27px}.luxury .universe-names span,.sport .universe-names span{font-size:23px}.sport .universe-names{min-height:100px}.universe-footer{flex-direction:column;line-height:1.7}}

/* Both axes have arrowheads; the horizontal axis occupies its own grid row. */
@media(min-width:751px){
.universe-map:before,.universe-map:after{display:none}
.universe-grid{grid-template-areas:'premium luxury' 'designers creators' 'axis axis' 'midrange sport' 'mass sport';row-gap:18px}
.universe-axis-horizontal{grid-area:axis;position:relative;height:1px;background:#c5c5c0;margin:3px -18px;z-index:1}
.universe-axis-horizontal:before,.universe-axis-horizontal:after,.universe-axis-vertical:before,.universe-axis-vertical:after{content:'';position:absolute;width:7px;height:7px;border-top:1px solid #ddd;border-right:1px solid #ddd}
.universe-axis-horizontal:before{left:0;top:-3px;transform:rotate(-135deg)}
.universe-axis-horizontal:after{right:0;top:-3px;transform:rotate(45deg)}
.universe-axis-vertical{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#c5c5c0;z-index:1}
.universe-axis-vertical:before{left:-3px;top:0;transform:rotate(-45deg)}
.universe-axis-vertical:after{left:-3px;bottom:0;transform:rotate(135deg)}
.axis-left,.axis-right{writing-mode:horizontal-tb;transform:translateY(-50%);top:var(--axis-y,50%);font-size:14px}
.axis-left{left:auto;right:calc(100% + 25px)}.axis-right{left:calc(100% + 25px);right:auto}
.universe-map{margin-left:80px;margin-right:80px}
}
@media(max-width:750px){.universe-axis-horizontal,.universe-axis-vertical{display:none}}

/* Inline Brands expansion, on the same light surface as its parent section. */
.brand-universe{position:relative;inset:auto;width:100%;height:auto;max-height:none;overflow:visible;background:#f4f3ef;color:#050505;margin:0;padding:0;overscroll-behavior:auto}
.brand-universe[hidden]{display:none}
.brand-universe .universe-page{padding:55px 0 30px;background:none}
.brand-universe .universe-eyebrow,.brand-universe .universe-intro-bottom>span{color:#666}
.brand-universe .universe-intro-bottom p{color:#444}
.brand-universe .universe-group{background:#f4f3ef;border-color:#aaa}
.brand-universe .universe-group h3{color:#444}
.brand-universe .universe-group h3:after{background:#bbb}
.brand-universe .axis-top,.brand-universe .axis-bottom,.brand-universe .axis-left,.brand-universe .axis-right{color:#111}
.brand-universe .universe-axis-vertical,.brand-universe .universe-axis-horizontal{background:#111}
.brand-universe .universe-axis-horizontal:before,.brand-universe .universe-axis-horizontal:after,.brand-universe .universe-axis-vertical:before,.brand-universe .universe-axis-vertical:after{border-color:#111}
.brand-universe .universe-footer{border-color:#aaa;color:#555}
.brand-universe-link[aria-expanded='true'] .universe-plus,.brand-universe-link:hover .universe-plus{transform:none}
@media(max-width:750px){.brand-universe .universe-page{padding-top:35px}}
/* The original wing, softly inverted against the light Brands surface. */
.brand-universe .universe-page{position:relative;isolation:isolate}
.brand-universe .universe-page:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('assets/hero-wing.png') right top/auto 100% no-repeat;filter:invert(1) grayscale(1);mix-blend-mode:multiply;opacity:.12}
.brand-universe .universe-group{background:rgba(244,243,239,.88)}

/* Equal display slots preserve original proportions, including tall emblems. */
.brand-universe .universe-names img{width:140px;height:72px;max-width:42%;max-height:none;object-fit:contain;flex:0 1 140px}
.brand-universe .universe-names img[alt="Puma"],.brand-universe .universe-names img[alt="L’Oréal Paris"]{filter:brightness(0)}
.brand-universe .universe-names{gap:24px 28px}
@media(max-width:750px){.brand-universe .universe-names img{width:125px;height:64px;flex-basis:125px}}