/* MX STUDIOS / BRANDS PAGE V2 — same visual system as the main site */
.brands-page{
  background:var(--ink);
  color:var(--paper);
  overflow-x:hidden;
}
.brands-page .noise{opacity:.085;mix-blend-mode:screen}
.brands-page .site-header{color:var(--paper)}
.brands-page .site-header .brand-mark img{filter:none!important}
.brands-page .desktop-nav a.is-current:after{right:0}
.brands-page .mobile-menu{background:var(--red);color:var(--ink)}
.brands-page .cursor-ring{border-color:rgba(255,255,255,.52)}

.brands-main{position:relative;background:var(--ink)}
.brands-intro{
  min-height:78svh;
  padding:150px var(--pad) 88px;
  display:flex;
  align-items:flex-end;
  position:relative;
  overflow:hidden;
  background:var(--ink)!important;
  color:var(--paper)!important;
  isolation:isolate;
}
.brands-intro:before{
  content:"";
  position:absolute;
  inset:-12%;
  z-index:-2;
  background:
    radial-gradient(circle at 82% 18%,rgba(255,73,49,.12),transparent 25%),
    radial-gradient(circle at 18% 86%,rgba(114,120,255,.08),transparent 24%);
}
.brands-intro:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.17;
  background-image:radial-gradient(circle,rgba(255,255,255,.7) 1px,transparent 1.4px);
  background-size:54px 54px;
  mask-image:linear-gradient(110deg,transparent 5%,#000 40%,#000 76%,transparent 98%);
  animation:brandDotDrift 18s linear infinite;
}
@keyframes brandDotDrift{to{background-position:108px 54px}}
.brands-intro-grid{
  width:min(1050px,100%);
  display:block;
  position:relative;
  z-index:2;
}
.brands-intro .kicker{margin-bottom:34px;color:#aaa69f}
.brands-intro-eyebrow{
  font:500 10px/1.35 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 20px;
  color:#aaa69f;
}
.brands-intro h1{
  font:800 clamp(58px,8vw,132px)/.84 var(--font);
  letter-spacing:-.075em;
  margin:0;
  max-width:1050px;
  text-align:left;
}
.brands-intro h1 em{
  font-family:Georgia,serif;
  font-weight:400;
  color:var(--red);
}
.brands-intro-copy{
  margin:34px 0 0;
  color:#aaa69f;
  line-height:1.6;
  font-size:14px;
  max-width:520px;
}
.brands-intro-line{
  position:absolute;
  left:var(--pad);
  right:var(--pad);
  bottom:34px;
  height:1px;
  background:rgba(255,255,255,.12);
  overflow:visible;
}
.brands-intro-line span{
  position:absolute;
  left:0;
  top:-3px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 18px rgba(255,73,49,.55);
  animation:introLine 7s ease-in-out infinite;
}
@keyframes introLine{0%,100%{left:0}50%{left:calc(100% - 7px)}}

.brands-scroll-down{
  position:absolute;
  right:var(--pad);
  bottom:82px;
  z-index:4;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding:0 16px 0 18px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  color:var(--paper);
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font:500 9px/1 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease;
}
.brands-scroll-down i{width:34px;height:1px;background:rgba(255,255,255,.36);position:relative;overflow:hidden}
.brands-scroll-down i:after{content:"";position:absolute;left:-14px;top:0;width:14px;height:1px;background:var(--red);animation:brandScrollLine 1.7s linear infinite}
.brands-scroll-down b{font:400 15px/1 var(--font);transform:translateY(-1px)}
.brands-scroll-down:hover{background:var(--red);color:var(--ink);border-color:var(--red);transform:translateY(-2px)}
.brands-scroll-down:hover i{background:rgba(10,10,10,.38)}
@keyframes brandScrollLine{to{left:38px}}

.brand-sections{position:relative;background:var(--ink)}
.brand-case{
  --brand-accent:var(--red);
  position:relative;
  min-height:100svh;
  padding:118px var(--pad) 128px;
  display:grid;
  grid-template-columns:minmax(250px,.68fr) minmax(0,2fr);
  gap:30px;
  align-items:center;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.12);
  background:var(--ink);
  color:var(--paper);
  isolation:isolate;
}
.brand-case:nth-child(even){background:#0d0d0d}
@media(min-width:901px){
  .brand-case:first-child{padding-top:58px}
}
.case-orbits{
  position:absolute;
  inset:-8%;
  width:116%;
  height:116%;
  z-index:-1;
  opacity:.48;
  pointer-events:none;
}
.case-orbits path{
  fill:none;
  stroke:rgba(255,255,255,.18);
  stroke-width:1;
  stroke-linecap:round;
  stroke-dasharray:1 11;
  animation:orbitDash 18s linear infinite;
}
.case-orbits path:nth-child(2){stroke-dasharray:1 15;animation-duration:28s;animation-direction:reverse}
.case-orbits circle{fill:var(--brand-accent);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--brand-accent) 60%,transparent))}
@keyframes orbitDash{to{stroke-dashoffset:-180}}

.brand-copy{
  align-self:center;
  position:relative;
  z-index:3;
  max-width:390px;
  padding-right:12px;
}
.brand-step{
  display:flex;
  align-items:center;
  gap:14px;
  font:500 9px/1 var(--mono);
  letter-spacing:.14em;
  color:#8d8a84;
  text-transform:uppercase;
  margin-bottom:28px;
}
.brand-step:after{content:"";width:62px;height:1px;background:rgba(255,255,255,.18)}
.brand-name-display{
  font:800 clamp(52px,6vw,100px)/.84 var(--font);
  letter-spacing:-.075em;
  margin:0;
}
.brand-service{
  font:400 clamp(23px,2vw,36px)/1.07 Georgia,serif;
  margin:16px 0 24px;
  color:var(--paper);
}
.brand-description{font-size:14px;line-height:1.65;color:#aaa69f;margin:0;max-width:350px}

.brand-gallery{min-width:0;position:relative;z-index:3;overflow:visible}
.gallery-head{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-bottom:10px;
  padding-inline:1px;
}
.gallery-arrows{display:flex;gap:7px}
.gallery-arrow{
  width:40px;
  height:40px;
  border:1px solid var(--red);
  background:rgba(255,75,58,.08);
  border-radius:50%;
  display:grid;
  place-items:center;
  cursor:pointer;
  color:var(--red);
  transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
.gallery-arrow:hover{transform:translateY(-2px);background:var(--red);color:var(--ink);border-color:var(--red)}
.gallery-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.brand-media-track{
  display:flex;
  gap:5px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 1px 14px;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:1px;
  scrollbar-width:none;
  overscroll-behavior-inline:contain;
  touch-action:pan-x pan-y;
  cursor:grab;
}
.brand-media-track::-webkit-scrollbar{display:none}
.brand-media-track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.media-card{
  flex:0 0 clamp(320px,28.5vw,430px);
  aspect-ratio:var(--media-ratio,4/3);
  border-radius:20px;
  overflow:hidden;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  position:relative;
  background:#121212;
  box-shadow:0 22px 58px rgba(0,0,0,.22);
  isolation:isolate;
}
.media-card img,.media-card video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  z-index:2;
  background:transparent;
  opacity:0;
  transition:opacity .16s ease;
}
.media-card.media-ready img{opacity:1}
.media-card.video-ready video{opacity:1}
.media-card video{z-index:3}
.media-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:22px;
  color:#f4f0e7;
  background:linear-gradient(145deg,var(--slot-a,#171717),var(--slot-b,#2a2a2a));
  z-index:1;
}
.media-placeholder:before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 78% 20%,color-mix(in srgb,var(--brand-accent) 72%,transparent),transparent 32%),linear-gradient(120deg,transparent 46%,rgba(255,255,255,.08) 47%,transparent 49%);
  opacity:.82;
}
.media-placeholder>*{position:relative;z-index:1}
.media-slot-top{display:flex;justify-content:space-between;font:500 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.media-slot-title{font:800 clamp(26px,2.5vw,43px)/.9 var(--font);letter-spacing:-.05em;max-width:78%}
.media-slot-title em{display:block;font-family:Georgia,serif;font-weight:400;color:var(--brand-accent)}
.media-slot-bottom{display:flex;justify-content:space-between;align-items:end;font:400 8px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.media-video-badge{width:50px;height:50px;border:1px solid rgba(255,255,255,.7);border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.18);backdrop-filter:blur(8px)}
.media-video-badge:after{content:"";width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid currentColor;margin-left:3px}
.media-card:after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border:1px solid rgba(255,255,255,.12);border-radius:inherit;transition:border-color .18s ease}

.brands-footer{padding-bottom:34px;background:var(--ink);color:var(--paper);border-top:1px solid rgba(255,255,255,.12)}

@media(max-width:1180px) and (min-width:901px){
  .brands-page .desktop-nav a{font-size:12px}
  .brand-case{grid-template-columns:minmax(225px,.62fr) minmax(0,1.8fr);gap:22px}
  .media-card{flex-basis:clamp(330px,34vw,450px)}
}
@media(max-width:900px){
  .brands-scroll-down{display:none}
  .brands-page .site-header{color:var(--paper)!important}
  .brands-intro{min-height:70svh;padding:122px var(--pad) 72px}
  .brands-intro h1{font-size:clamp(52px,13vw,92px)}
  .brands-intro-copy{max-width:520px;margin-top:26px}
  .brand-case{min-height:auto;padding:92px var(--pad) 116px;grid-template-columns:1fr;gap:30px;align-items:start}
  .brand-copy{max-width:680px;padding-right:0}
  .brand-step{margin-bottom:22px}
  .brand-name-display{font-size:clamp(52px,14vw,88px)}
  .brand-service{font-size:clamp(26px,7vw,36px)}
  .gallery-head{min-height:40px}
  .brand-media-track{gap:6px}
  .media-card{flex-basis:min(72vw,380px);border-radius:18px}
  .gallery-arrow{width:38px;height:38px}
  .brands-footer{padding-bottom:34px}
}
@media(max-width:560px){
  .brands-intro{padding-top:108px;min-height:66svh}
  .brands-intro .kicker{margin-bottom:24px}
  .brands-intro-line{bottom:24px}
  .brand-case{padding:72px var(--pad) 78px;gap:18px}
  .brand-step{font-size:8px}
  .brand-description{font-size:13px}
  .brand-media-track{gap:6px;padding-bottom:6px}
  .media-card{flex-basis:calc(100% - 6px);aspect-ratio:4/5!important;border-radius:16px}
  .media-card img,.media-card video{object-fit:cover;background:transparent}
  .media-placeholder{padding:17px}
  .gallery-head{margin-bottom:6px}
}
@media (pointer:coarse){
  .brands-page .cursor-dot,.brands-page .cursor-ring{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .case-orbits path,.brands-intro-line span,.brands-intro:after{animation:none!important}
  .gallery-arrow{transition:none}
}

.brands-page .mobile-menu{transition:clip-path .72s cubic-bezier(.22,.8,.22,1)}
.brands-page .mobile-menu.open{clip-path:circle(150% at 92% 5%)}