.ugc-showreel {
  isolation: isolate;
  margin-top: clamp(-16px,-1.3vw,-10px);
  padding: clamp(8px,1vw,14px) 0 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  contain: none;
}

.ugc-showreel::before,
.ugc-showreel::after { display: none; }

html.ugc-fullscreen-fallback-open,
html.ugc-fullscreen-fallback-open body {
  overflow: hidden;
}

.ugc-phone-screen.is-fullscreen-fallback {
  position: fixed;
  inset: 0;
  z-index: 10000;
  width: 100vw;
  height: 100dvh;
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  background: #000;
}

.ugc-phone-screen.is-fullscreen-fallback .ugc-video-embed {
  width: 100%;
  height: 100%;
}

.ugc-video-fullscreen-close {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 10002;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
  color: #fff;
  background: rgba(5,7,12,.72);
  box-shadow: 0 12px 34px rgba(0,0,0,.34);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font: 300 32px/1 Arial,sans-serif;
  cursor: pointer;
}

.ugc-video-fullscreen-close:focus-visible {
  outline: 2px solid rgba(188,221,255,.94);
  outline-offset: 3px;
}

.ugc-showreel > * { position: relative; z-index: 1; }
.ugc-showreel > .ugc-band-title,
.ugc-showreel-lead { text-align: center; }

.ugc-showreel > .ugc-band-title {
  font-family: "Outfit", "Noto Sans", "Segoe UI", sans-serif;
  font-size: clamp(1.8rem, 3vw, 3.25rem);
  font-weight: 760;
  line-height: 0.98;
  letter-spacing: 0.035em;
  text-wrap: balance;
}

.ugc-showreel-lead {
  max-width: 66ch;
  margin: 16px auto 0;
  color: rgba(224, 232, 244, 0.68);
  font-size: clamp(0.86rem, 1vw, 1rem);
  line-height: 1.58;
  letter-spacing: 0.018em;
}

.ugc-video-gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(204px, 19.25%, 214px);
  gap: clamp(4px, 0.45vw, 6px);
  margin-top: 0;
  padding: 9px 46px 4px 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  cursor: grab;
}
/* Mask the stationary viewport, including composited video and phone borders. */
.ugc-video-viewport {
  --ugc-video-edge-fade: clamp(42px, 5vw, 76px);
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 2px,
    rgba(0, 0, 0, 0.22) 12px,
    #000 var(--ugc-video-edge-fade),
    #000 calc(100% - var(--ugc-video-edge-fade)),
    rgba(0, 0, 0, 0.22) calc(100% - 12px),
    transparent calc(100% - 2px)
  );
  mask-image: linear-gradient(
    90deg,
    transparent 2px,
    rgba(0, 0, 0, 0.22) 12px,
    #000 var(--ugc-video-edge-fade),
    #000 calc(100% - var(--ugc-video-edge-fade)),
    rgba(0, 0, 0, 0.22) calc(100% - 12px),
    transparent calc(100% - 2px)
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.ugc-video-carousel-shell {
  position: relative;
  margin-top: clamp(10px, 1.2vw, 16px);
}
.ugc-video-gallery:active { cursor: grabbing; }
.ugc-video-gallery::-webkit-scrollbar { display: none; }
.ugc-video-gallery:empty { display: none; }

@media (min-width:981px) {
  .ugc-video-viewport.is-at-start {
    -webkit-mask-image: linear-gradient(
      90deg,
      #000 0,
      #000 calc(100% - var(--ugc-video-edge-fade)),
      rgba(0, 0, 0, 0.22) calc(100% - 12px),
      transparent calc(100% - 2px)
    );
    mask-image: linear-gradient(
      90deg,
      #000 0,
      #000 calc(100% - var(--ugc-video-edge-fade)),
      rgba(0, 0, 0, 0.22) calc(100% - 12px),
      transparent calc(100% - 2px)
    );
  }
}

.ugc-video-card {
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  place-items: center;
  padding: 4px 10px;
  border: 0;
  border-radius: 32px;
  background: transparent;
  box-shadow: none;
  transition: transform 260ms ease, filter 260ms ease;
}
.ugc-video-card:hover {
  transform: translateY(-5px);
  filter: drop-shadow(0 24px 38px rgba(0,0,0,.28));
}

.ugc-video-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 344px;
  padding: 12px 38px;
  overflow: hidden;
  border-radius: 28px;
  background: radial-gradient(ellipse at 50% 88%, rgba(151,196,255,.095), transparent 48%);
}
.ugc-video-visual::before {
  content: "";
  position: absolute;
  width: 74%;
  aspect-ratio: 1;
  border: 1px solid rgba(198,221,255,.07);
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(161,206,255,.08);
}

.ugc-phone {
  position: relative;
  z-index: 1;
  width: min(88%, 170px);
  aspect-ratio: 9 / 18.8;
  padding: 7px;
  border: 1px solid rgba(224,232,246,.38);
  border-radius: 34px;
  background: linear-gradient(112deg,#303642 0%,#07090e 15%,#343a46 29%,#090b11 51%,#242a35 73%,#05070b 90%,#303744 100%);
  box-shadow: 0 30px 48px rgba(0,0,0,.62), 0 0 44px rgba(154,202,255,.08), inset 0 0 0 1px rgba(255,255,255,.16);
}
.ugc-phone::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 8px;
  pointer-events: none;
  border-radius: 27px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.ugc-phone-side {
  position: absolute;
  left: -4px;
  width: 3px;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(#4c5360,#090b10);
}
.ugc-phone-side.is-top { top: 22%; height: 38px; }
.ugc-phone-side.is-bottom { top: 34%; height: 56px; }
.ugc-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 27px;
  background: #020305;
}
.ugc-phone-island {
  position: absolute;
  z-index: 5;
  top: 8px;
  left: 50%;
  width: 52px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #020305;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04);
  pointer-events: none;
}

.ugc-video-poster {
  appearance: none;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 44px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: #06080d;
  color: #fff;
  cursor: pointer;
}
.ugc-video-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 420ms cubic-bezier(.2,.7,.2,1), filter 260ms ease;
}
.ugc-video-card:hover .ugc-video-poster img,
.ugc-video-poster:focus-visible img { transform: scale(1.065); filter: saturate(1.05) brightness(1.03); }
.ugc-video-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,rgba(0,0,0,.16),transparent 24%,transparent 66%,rgba(0,0,0,.62)), linear-gradient(115deg,rgba(255,255,255,.08),transparent 25%);
}
.ugc-video-card-play {
  position: absolute;
  z-index: 2;
  inset: 50% auto auto 50%;
  transform: translate(-50%,-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid rgba(236,246,255,.34);
  border-radius: 50%;
  background: linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.035));
  color: rgba(255,255,255,.9);
  box-shadow: 0 12px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.2), 0 0 18px rgba(190,224,255,.08);
  -webkit-backdrop-filter: blur(15px) saturate(145%);
  backdrop-filter: blur(15px) saturate(145%);
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
.ugc-video-card-play svg { width: 21px; height: 21px; }
.ugc-video-poster:hover .ugc-video-card-play,
.ugc-video-poster:focus-visible .ugc-video-card-play { transform: translate(-50%,-50%) scale(1.08); border-color:rgba(240,248,255,.55); background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.07)); }
.ugc-video-poster:focus-visible { outline: 3px solid rgba(214,232,255,.88); outline-offset: -5px; }
.ugc-video-number {
  position: absolute;
  z-index: 2;
  left: 16px;
  bottom: 15px;
  color: rgba(255,255,255,.8);
  font: 700 .66rem/1 "Outfit",sans-serif;
  letter-spacing: .18em;
}
.ugc-video-embed { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }

.ugc-video-card-copy { display:none; }
.ugc-video-card-meta {
  margin: 0;
  color: rgba(185,211,242,.64);
  font: 700 .63rem/1.2 "Outfit","Noto Sans",sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ugc-video-card-title {
  margin: 0;
  color: rgba(255,255,255,.96);
  font-family: "Cinzel","Cormorant Garamond",serif;
  font-size: clamp(.92rem,1.05vw,1.08rem);
  line-height: 1.18;
  letter-spacing: .04em;
  text-wrap: balance;
}
.ugc-video-card-description { margin: 0; color: rgba(218,226,238,.64); font-size: clamp(.76rem,.84vw,.87rem); line-height: 1.58; }
.ugc-video-card-link {
  appearance: none;
  position: absolute;
  z-index: 7;
  right: 9px;
  bottom: 9px;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(220,233,252,.24);
  border-radius: 50%;
  background: linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.035));
  color: rgba(227,238,253,.86);
  cursor: pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 12px 30px rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.ugc-video-card-link svg { width:18px; height:18px; }
.ugc-video-card-link:hover { transform:translateY(-2px); border-color:rgba(220,237,255,.38); background:rgba(255,255,255,.075); }
.ugc-video-card-link:focus-visible { border-radius: 5px; outline: 2px solid rgba(214,232,255,.82); outline-offset: 4px; }

.ugc-video-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0 auto;
}
.ugc-video-carousel-dot {
  appearance: none;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.ugc-video-carousel-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(199,216,239,.26);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
  transition: width 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}
.ugc-video-carousel-dot.is-active::before {
  width: 22px;
  background: rgba(219,236,255,.9);
  box-shadow: 0 0 14px rgba(156,211,255,.4);
}
.ugc-video-carousel-dot:focus-visible { outline:2px solid rgba(214,232,255,.82); outline-offset:-3px; border-radius:999px; }

.ugc-video-carousel-next {
  appearance:none;
  position:absolute;
  z-index:9;
  top:50%;
  right:2px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  box-sizing:border-box;
  padding:0;
  border:1px solid rgba(222,237,255,.34);
  border-radius:50%;
  background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.045));
  color:rgba(239,247,255,.94);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 18px 42px rgba(0,0,0,.38),0 0 26px rgba(150,210,255,.1);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  cursor:pointer;
  transition:opacity 220ms ease,visibility 0s linear 220ms,transform 220ms ease,border-color 180ms ease,background-color 180ms ease;
}
.ugc-video-carousel-next svg { width:24px;height:24px; }
.ugc-video-carousel-next:hover { transform:translateY(-50%) scale(1.07);border-color:rgba(230,243,255,.58);background:linear-gradient(145deg,rgba(255,255,255,.23),rgba(255,255,255,.07)); }
.ugc-video-carousel-next:focus-visible { outline:2px solid rgba(214,232,255,.88);outline-offset:4px; }
.ugc-video-carousel-next.is-at-end {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-50%) translateX(12px) scale(.82);
}

.ugc-video-request {
  display:flex;
  justify-content:center;
  margin-top:clamp(14px,1.6vw,22px);
}
.ugc-video-request .ugc-cta {
  min-width:clamp(230px,22vw,286px);
  min-height:50px;
  padding-inline:28px;
  justify-content:center;
  border-color:rgba(193,221,255,.28);
  background:linear-gradient(145deg,rgba(31,42,57,.78),rgba(10,15,24,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.24),0 0 22px rgba(151,205,255,.08);
}
.ugc-video-request .ugc-cta:hover {
  border-color:rgba(220,237,255,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 16px 34px rgba(0,0,0,.28),0 0 28px rgba(151,205,255,.14);
}

.ugc-hero-facts {
  box-sizing:border-box;
  width:min(960px,100%);
  margin:clamp(18px,2vw,26px) auto 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:1fr;
  gap:clamp(7px,.75vw,10px);
  list-style:none;
}
.ugc-hero-facts li {
  position:relative;
  box-sizing:border-box;
  min-width:0;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px clamp(12px,1.5vw,20px);
  overflow:hidden;
  border:1px solid rgba(192,215,245,.19);
  border-radius:16px;
  background:
    linear-gradient(135deg,rgba(34,42,57,.58),rgba(11,14,23,.72)),
    radial-gradient(circle at 18% 16%,rgba(196,177,255,.16),transparent 42%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 8px 22px rgba(0,0,0,.16);
  color:rgba(241,244,250,.88);
  font-size:clamp(.875rem,1.4vw,1rem);
  font-weight:650;
  line-height:1.3;
  letter-spacing:.025em;
  text-align:center;
  text-wrap:balance;
  overflow-wrap:normal;
}
.ugc-hero-facts li:nth-child(1) {
  border-color:rgba(102,204,255,.6);
  background:radial-gradient(circle at 18% 50%,rgba(73,184,235,.045),transparent 38%),linear-gradient(135deg,rgba(13,15,18,.78),rgba(7,8,10,.86));
}
.ugc-hero-facts li:nth-child(2) {
  border-color:rgba(190,139,255,.6);
  background:radial-gradient(circle at 18% 50%,rgba(174,111,235,.045),transparent 38%),linear-gradient(135deg,rgba(15,14,18,.78),rgba(7,8,10,.86));
}
.ugc-hero-facts li:nth-child(3) {
  border-color:rgba(104,229,185,.6);
  background:radial-gradient(circle at 18% 50%,rgba(70,205,159,.04),transparent 38%),linear-gradient(135deg,rgba(13,16,16,.78),rgba(7,8,10,.86));
}
.ugc-hero-facts li:nth-child(4) {
  border-color:rgba(255,194,94,.6);
  background:radial-gradient(circle at 18% 50%,rgba(232,166,66,.04),transparent 38%),linear-gradient(135deg,rgba(17,15,12,.78),rgba(7,8,10,.86));
}

.lang-btn#langCycleBtn {
  width:46px;
  height:46px;
  border-radius:14px;
  font-size:20px;
  opacity:1;
  filter:none;
}
.lang-btn#langCycleBtn:focus-visible {
  outline:2px solid rgba(214,232,255,.88);
  outline-offset:3px;
}

.ugc-brand-marquee {
  width: calc(100% - clamp(20px,2.4vw,38px));
  margin-inline: auto;
  padding-block: 28px 8px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 clamp(54px,7vw,92px),#000 calc(100% - clamp(54px,7vw,92px)),transparent 100%);
  mask-image: linear-gradient(90deg,transparent 0,#000 clamp(54px,7vw,92px),#000 calc(100% - clamp(54px,7vw,92px)),transparent 100%);
}
.ugc-category-marquee {
  width: calc(100% - clamp(28px,4vw,64px));
  margin: clamp(6px,.7vw,9px) auto 0;
  padding-block: 0 5px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 54px,#000 calc(100% - 54px),transparent 100%);
  mask-image: linear-gradient(90deg,transparent 0,#000 54px,#000 calc(100% - 54px),transparent 100%);
}
#ugcBrands.ugc-brand-grid { display:flex; width:max-content; --ugc-brand-gap:14px; gap:var(--ugc-brand-gap); animation:ugcBrandScroll 38s linear infinite; }
#ugcBrands .ugc-brand-card { flex:0 0 180px; min-width:180px; min-height:88px; }

@keyframes ugcDesktopOrderHoloBloom {
  0%, 100% { opacity:0; transform:scale(.16) rotate(0deg); }
  16% { opacity:.68; }
  62% { opacity:.2; }
  78% { opacity:0; transform:scale(1.16) rotate(170deg); }
}

@keyframes ugcDesktopOrderHoloSweep {
  0%, 12% { opacity:0; transform:translateX(-135%) skewX(-18deg); }
  28% { opacity:.62; }
  58%, 100% { opacity:0; transform:translateX(135%) skewX(-18deg); }
}

@media (min-width:981px) {
  body > .ugc-nav {
    box-sizing:border-box;
    width:var(--ugc-shell-width);
    max-width:var(--ugc-shell-width);
  }

  .ugc-intro-order-cta {
    position:relative;
    min-width:clamp(218px,17vw,264px);
    min-height:58px;
    margin-top:clamp(20px,2.8vh,28px);
    padding-inline:clamp(30px,2.5vw,38px);
    font-size:clamp(.96rem,1.04vw,1.08rem);
    overflow:hidden;
    background:linear-gradient(112deg,#f6f8ff 0%,#f7f0ff 32%,#eafcff 58%,#fff6df 78%,#f7f8ff 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.94),
      inset 0 -12px 28px rgba(154,196,255,.08),
      0 14px 34px rgba(255,255,255,.14),
      0 0 24px rgba(180,218,255,.08);
    isolation:isolate;
    transform:translateY(0) scale(1);
    transition:
      transform 220ms cubic-bezier(.2,.78,.24,1),
      box-shadow 220ms ease;
  }
  .ugc-intro-order-cta .ugc-cta-label {
    position:relative;
    z-index:2;
  }
  .ugc-intro-order-cta::before,
  .ugc-intro-order-cta::after {
    content:"";
    position:absolute;
    z-index:1;
    border-radius:inherit;
    pointer-events:none;
  }
  .ugc-intro-order-cta::before {
    inset:-80%;
    background:conic-gradient(
      from 10deg,
      transparent 0 8%,
      rgba(66,210,255,.72) 16%,
      rgba(125,111,255,.58) 29%,
      rgba(242,113,255,.54) 42%,
      rgba(255,199,112,.62) 58%,
      rgba(100,235,218,.58) 72%,
      transparent 88% 100%
    );
    filter:blur(13px) saturate(155%);
    mix-blend-mode:screen;
    transform-origin:center;
    animation:ugcDesktopOrderHoloBloom 3.2s cubic-bezier(.2,.72,.22,1) infinite;
  }
  .ugc-intro-order-cta::after {
    inset:-18% -42%;
    background:linear-gradient(
      105deg,
      transparent 30%,
      rgba(80,220,255,.08) 38%,
      rgba(154,116,255,.34) 46%,
      rgba(255,116,222,.28) 52%,
      rgba(255,221,125,.3) 58%,
      rgba(255,255,255,.5) 64%,
      transparent 72%
    );
    filter:blur(4px) saturate(150%);
    animation:ugcDesktopOrderHoloSweep 3.2s cubic-bezier(.22,.78,.24,1) infinite;
  }
  .ugc-cta.ugc-intro-order-cta:hover,
  .ugc-cta.ugc-intro-order-cta:focus-visible {
    transform:translateY(-5px) scale(1.015);
    background:linear-gradient(112deg,#f6f8ff 0%,#f7f0ff 32%,#eafcff 58%,#fff6df 78%,#f7f8ff 100%);
    color:#050506;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -10px 24px rgba(154,196,255,.1),
      0 20px 42px rgba(0,0,0,.3),
      0 0 34px rgba(183,220,255,.22),
      0 0 54px rgba(214,184,255,.12);
  }
  #ugcBrandsSection {
    margin-top:-28px;
    padding-top:0;
  }
  .ugc-brand-marquee {
    margin-top:0;
    padding-block:28px 8px;
  }
  .ugc-hero-facts { margin-top:calc(var(--ugc-shell-gap) - clamp(5px,.8vh,8px)); }
  #ugcBrands.ugc-brand-grid { --ugc-brand-gap:8px; }
}

.ugc-brand-marquee:hover #ugcBrands,
.ugc-brand-marquee:focus-within #ugcBrands,
.ugc-category-marquee:hover #ugcCategories { animation-play-state: paused; }
#ugcBrandsSection:has(.ugc-brand-marquee:hover),
#ugcBrandsSection:has(.ugc-brand-marquee:focus-within) {
  overflow: visible;
  contain: layout style;
}
.ugc-brand-marquee:hover,
.ugc-brand-marquee:focus-within {
  overflow: visible;
}

#ugcBrandsSection .ugc-categories {
  margin:0;
  padding:0;
  overflow: visible;
  content-visibility: visible;
  contain: layout style;
}
.ugc-category-list {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: 10px;
  margin: 0;
  padding-block: 3px;
  animation: ugcCategoryScroll 34s linear infinite;
}
.ugc-category-list span {
  flex: 0 0 auto;
  padding: 12px 20px;
  border: 1px solid rgba(255,255,255,.125);
  border-radius: 99px;
  background: rgba(255,255,255,.025);
  color: #c7d2e1;
  font-size: 12px;
  letter-spacing: .035em;
  white-space: nowrap;
}
.ugc-category-list span:nth-child(6n + 1) { border-color:rgba(111,201,255,.34); background:rgba(63,164,229,.09); color:#bfe8ff; }
.ugc-category-list span:nth-child(6n + 2) { border-color:rgba(224,146,255,.34); background:rgba(176,92,221,.09); color:#ecd0ff; }
.ugc-category-list span:nth-child(6n + 3) { border-color:rgba(111,227,190,.32); background:rgba(45,178,135,.085); color:#bcebdc; }
.ugc-category-list span:nth-child(6n + 4) { border-color:rgba(255,202,110,.32); background:rgba(221,155,53,.085); color:#ffe0a9; }
.ugc-category-list span:nth-child(6n + 5) { border-color:rgba(147,161,255,.34); background:rgba(91,108,221,.09); color:#d1d7ff; }
.ugc-category-list span:nth-child(6n + 6) { border-color:rgba(255,134,171,.32); background:rgba(218,71,118,.085); color:#ffc7d8; }
.ugc-nav { max-width: calc(100vw - 170px); }

.ugc-metric {
  position:relative;
  isolation:isolate;
  min-height:154px;
  overflow:hidden;
}
.ugc-metric::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(10,12,20,.58),rgba(10,12,20,.22) 55%,transparent);
}
.ugc-metric-value,
.ugc-metric-label {
  position:relative;
  z-index:2;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.ugc-metric-chart {
  position:absolute;
  inset:12% -4% -2%;
  z-index:0;
  display:block;
  width:auto;
  height:auto;
  margin:0;
  pointer-events:none;
  color:#9fdcff;
  opacity:.68;
  -webkit-mask-image:radial-gradient(ellipse 34% 50% at 50% 56%,transparent 42%,rgba(0,0,0,.18) 64%,rgba(0,0,0,.72) 86%,#000 100%);
  mask-image:radial-gradient(ellipse 34% 50% at 50% 56%,transparent 42%,rgba(0,0,0,.18) 64%,rgba(0,0,0,.72) 86%,#000 100%);
}
.ugc-metric:nth-child(2n) .ugc-metric-chart { color:#d3b9ff; }
.ugc-metric:nth-child(3n) .ugc-metric-chart { color:#9de9d5; }
.ugc-metric:nth-child(5n) .ugc-metric-chart { color:#ffd5a7; }
.ugc-metric-chart svg { display:block;width:100%;height:100%;overflow:visible; }
.ugc-metric-chart polyline {
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ugc-metric-chart circle { fill:currentColor;opacity:.7; }

.office-opening-note,
.site-legal,
#audioControl {
  opacity:0;
  translate:0 7px;
  transition:opacity 260ms ease,translate 260ms cubic-bezier(.2,.78,.24,1);
}
body.is-at-page-end .office-opening-note,
body.is-at-page-end .site-legal,
body.is-at-page-end #audioControl { opacity:1;translate:0 0;visibility:visible;pointer-events:auto; }
body:not(.is-at-page-end) #audioControl { visibility:hidden;pointer-events:none; }

@keyframes ugcBrandScroll { to { transform: translateX(calc(-50% - var(--ugc-brand-gap, 14px) / 2)); } }
@keyframes ugcCategoryScroll { from { transform: translateX(calc(-50% - 5px)); } to { transform: translateX(0); } }

@media (max-width:980px) {
  .ugc-video-gallery { grid-auto-columns:minmax(250px,calc((100% - 28px) / 3)); gap:14px; }
  .ugc-video-card { padding:14px; border-radius:22px; }
  .ugc-video-visual { min-height:328px; }
  .ugc-phone { width:min(70%,158px); }
}

/* iPad Pro 12.9 landscape: avoid the compact laptop layout at 1366×940. */
@media (min-width:1320px) and (max-width:1400px) and (min-height:880px) and (orientation:landscape) {
  :root {
    --ugc-shell-safe-gutter:clamp(104px,8vw,124px);
    --ugc-shell-max-width:1120px;
    --ugc-stage-inline:clamp(24px,2.8vw,38px);
  }
  body > .ugc-nav {
    max-width:min(980px,calc(100vw - (2 * var(--ugc-shell-safe-gutter))));
  }
  .ugc-title-main {
    font-size:clamp(3.3rem,4.35vw,3.75rem);
  }
  .ugc-title-sub {
    font-size:clamp(.92rem,1.28vw,1.12rem);
  }
  .ugc-lead,
  .ugc-note,
  .ugc-intro .ugc-lead,
  .ugc-intro .ugc-note {
    max-width:min(64ch,100%);
  }
  .ugc-brand-marquee {
    width:calc(100% - 12px);
  }
  .ugc-category-marquee {
    width:calc(100% - 20px);
  }
}

@media (max-width:700px) {
  html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-intro-order-cta {
    min-height:48px !important;
  }

  html.is-mobile-preview body.is-mobile-layout.is-project-page .subpage-stage.ugc-stage {
    padding-right: calc(var(--safe-right, env(safe-area-inset-right, 0px)) + var(--mobile-page-gutter)) !important;
    padding-left: calc(var(--safe-left, env(safe-area-inset-left, 0px)) + var(--mobile-page-gutter)) !important;
  }
  html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-shell {
    box-sizing: border-box !important;
    width: calc(100vw - (2 * var(--mobile-page-gutter))) !important;
    max-width: none !important;
  }
  html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-title-main {
    font-size: clamp(1.65rem,7.8vw,2.1rem) !important;
    transform: none !important;
  }
  html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-hero-facts {
    width:100%;
    margin-top:4px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }
  html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-hero-facts li {
    border-radius:14px;
  }
  html.is-mobile-preview body.is-mobile-layout.is-project-page #ugcBrandsSection {
    transition:
      opacity 560ms cubic-bezier(.2,.72,.2,1),
      transform 560ms cubic-bezier(.2,.72,.2,1);
    transition-delay:0ms;
  }
  html.is-mobile-preview body.is-mobile-layout.is-project-page.is-subpage-scene-entering #ugcBrandsSection {
    opacity:0;
    transform:translate3d(0,12px,0);
    filter:none;
    transition-delay:0ms;
  }
  .ugc-showreel { margin-top:-4px; padding:8px 0 0; }
  .ugc-showreel > .ugc-band-title { font-size:clamp(1.5rem,8vw,2.05rem); }
  .ugc-showreel-lead { font-size:.78rem; }
  .ugc-video-viewport {
    --ugc-video-edge-fade: clamp(30px, 9vw, 42px);
  }
  .ugc-video-gallery {
    grid-auto-columns:clamp(216px,56vw,230px);
    gap:8px;
    padding:4px 10% 4px 2px;
  }
  .ugc-video-card { padding:8px 4px 4px; }
  .ugc-video-visual { box-sizing:border-box; min-height:390px; padding-inline:8px; }
  .ugc-phone { width:178px; max-width:calc(100% - 4px); }
  .ugc-video-card-description { font-size:.79rem; }
  .ugc-video-carousel-dots {
    width:100%;
    max-width:none;
    overflow:visible;
    justify-content:center;
    padding-inline:0;
  }
  .ugc-video-request { margin-top:12px; padding-inline:12px; }
  #ugcVideoRequestLink {
    width:min(100%,286px);
    min-width:0;
    min-height:48px !important;
    padding-inline:20px;
  }
  #ugcBrands .ugc-brand-card { flex-basis:145px; min-width:145px; min-height:80px; }
  .ugc-brand-marquee {
    width:calc(100% - 8px);
    padding-block:12px 0;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
  }
  .ugc-category-marquee {
    width:calc(100% - 12px);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
  }
  .ugc-category-list span { padding:10px 14px; font-size:11px; }
}

@media (max-width:380px) {
  html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-title-main {
    font-size: clamp(1.55rem,7.1vw,1.72rem) !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  #ugcBrands.ugc-brand-grid,
  .ugc-category-list { animation:none; }
  .ugc-intro-order-cta::before,
  .ugc-intro-order-cta::after { animation:none;opacity:.2;transform:none; }
  .ugc-brand-marquee,
  .ugc-category-marquee { overflow-x:auto; mask-image:none; }
  .ugc-video-card,
  .ugc-video-poster img,
  .ugc-video-card-play { transition:none; }
}

html[data-preview-low-power="true"] #ugcBrands.ugc-brand-grid,
html[data-preview-low-power="true"] .ugc-category-list { animation-duration:80s; }
.ugc-video-request[hidden] { display:none; }

/* A short desktop viewport should reduce the content scale without turning
   horizontal space into oversized side gutters. Keep the shell proportional
   to the viewport and give the fixed navigation an explicit, fitting width. */
@media (min-width:981px) and (max-width:1450px) and (max-height:940px) {
  :root {
    --ugc-shell-safe-gutter:clamp(92px,8vw,124px);
    --ugc-shell-max-width:clamp(880px,72vw,1080px);
  }

  body > .ugc-nav {
    box-sizing:border-box;
    width:var(--ugc-shell-width);
    max-width:var(--ugc-shell-width);
    gap:clamp(10px,1.15vw,18px);
    padding-inline:clamp(14px,1.7vw,24px);
  }

  body > .ugc-nav .ugc-nav-link {
    flex:0 1 auto;
    font-size:clamp(.76rem,1.05vw,.92rem);
    letter-spacing:clamp(.12em,.16vw,.18em);
  }
}

/* Shared rhythm: CTA -> launch facts -> the visible brand cards. */
html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-intro {
  gap: 8px !important;
  margin-bottom: 0 !important;
}
html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-hero-facts { margin-top: 16px !important; }
html.is-mobile-preview body.is-mobile-layout.is-project-page #ugcBrandsSection {
  margin-top: -5px !important;
  padding-top: 9px !important;
}
/* Mobile chapter navigation is a touch rail, separate from the language controls. */
html.is-mobile-preview body.is-mobile-layout.is-project-page > .ugc-nav { display: none !important; }
html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-title-main {
  font-size: clamp(1.65rem,6.8vw,3.2rem) !important;
  line-height: 1.08 !important;
}
html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-hero-facts {
  grid-template-columns: repeat(2,minmax(0,1fr));
  width: 100%;
}
html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-intro-order-cta {
  min-height: 48px !important;
  min-width: 218px;
}

html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-brand-marquee { padding-top: 12px !important; }
.ugc-video-carousel-dots { width: max-content; max-width: 100%; gap: 2px; }
.ugc-video-carousel-dot { flex-basis: 22px; width: 22px; height: 44px; }
.ugc-video-carousel-dot.is-active::before { width: 14px; }

/* One box model and safe grid for phones and tablets, in either orientation. */
html.is-mobile-preview body.is-mobile-layout.is-project-page {
  --mobile-page-gutter: clamp(12px,2.5vw,24px);
  --ugc-content-gap: 24px;
}
html.is-mobile-preview body.is-mobile-layout.is-project-page .subpage-stage.ugc-stage {
  padding: 160px var(--mobile-page-gutter) 88px !important;
}
html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-shell,
html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-shell * {
  box-sizing: border-box;
}
html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-shell {
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto 84px !important;
  padding: 0 !important;
  gap: var(--ugc-content-gap) !important;
}
html.is-mobile-preview body.is-mobile-layout.is-project-page #ugcBrandsSection {
  margin-top: -12px !important;
  padding: 0 !important;
  border: 0;
  background: transparent;
}
html.is-mobile-preview body.is-mobile-layout.is-project-page #mobileProjectChromeLayer .mobile-project-chrome-slot--lang {
  width: auto !important;
  right: var(--mobile-page-gutter) !important;
}
html.is-mobile-preview body.is-mobile-layout.is-project-page #mobileProjectChromeLayer .lang-switcher {
  width: max-content;
  justify-content: flex-end;
}

/* Major modules share the shell edges; internal padding does not widen them. */
html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-shell > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  margin-inline: 0 !important;
  justify-self: stretch;
}

/* The handheld gallery uses the same phone proportions on iPhone and iPad.
   Inner padding must not consume most of a border-box carousel column. */
html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-video-card {
  padding: 8px 4px 4px;
}
html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-video-visual {
  min-height: 390px;
  padding: 12px 8px;
}
html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-phone {
  width: 178px;
  max-width: calc(100% - 4px);
}
/* Panel edges and inner gutters stay on the same handheld grid. */
html.is-mobile-preview body.is-mobile-layout.is-project-page :is(.ugc-side, .ugc-hero, .ugc-seo-content, .ugc-band:not(.ugc-showreel):not(#ugcBrandsSection)) {
  padding: clamp(14px, 2vw, 20px) !important;
}

/* Page-owned grids: tablet columns follow available content width, not the
   generic project-page phone rules. Keep card rows close to their content. */
html.is-mobile-preview body.is-mobile-layout.is-project-page :is(.ugc-card-grid, .ugc-seo-grid, .ugc-advantage-grid) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 14px;
}
html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-case-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 14px;
}
html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-order-layout {
  grid-template-columns: 1fr;
}
html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-order-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-case-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html.is-mobile-preview body.is-mobile-layout.is-project-page :is(.ugc-card, .ugc-seo-card, .ugc-advantage-card, .ugc-case-card) {
  min-height: 0 !important;
  align-content: start;
  padding: clamp(14px, 2vw, 20px) !important;
}
html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-card {
  grid-template-rows: auto auto auto;
}
html.is-mobile-preview body.is-mobile-layout.is-project-page :is(.ugc-seo-card, .ugc-advantage-card) {
  gap: 12px !important;
}
@media (min-width: 701px) {
  html.is-mobile-preview body.is-mobile-layout.is-project-page .ugc-video-gallery {
    grid-auto-columns: clamp(216px, 28vw, 230px);
    gap: 8px;
    padding-block: 4px;
  }
}

/* The same visible gap on compact laptops and larger desktop screens. */
html:not(.is-mobile-preview) body.is-project-page {
  --ugc-rhythm-gap: clamp(24px, 2.2vw, 32px);
}
html:not(.is-mobile-preview) body.is-project-page .ugc-shell {
  gap: var(--ugc-rhythm-gap) !important;
}
html:not(.is-mobile-preview) body.is-project-page .ugc-intro { gap: 8px; }
html:not(.is-mobile-preview) body.is-project-page .ugc-hero-facts {
  margin-top: calc(var(--ugc-rhythm-gap) - 8px);
}
html:not(.is-mobile-preview) body.is-project-page #ugcBrandsSection {
  margin-top: -28px;
  padding-top: 0;
  border: 0;
}
html:not(.is-mobile-preview) body.is-project-page .ugc-brand-marquee { padding-top: 28px; }

/* Leave 10% of viewport height above the desktop content. */
html:not(.is-mobile-preview) body.is-project-page .subpage-stage.ugc-stage {
  padding-top: calc(var(--safe-top, 0px) + clamp(10px, 2.2vw, 24px) + 10vh) !important;
}
html:not(.is-mobile-preview) body.is-project-page .ugc-intro { padding-top: 0; }
html:not(.is-mobile-preview) body.is-project-page .ugc-intro-title-wrap {
  --ugc-title-wrap-width: min(1120px, calc(100vw - 280px));
}
html.is-mobile-preview body.is-mobile-layout.is-project-page .subpage-stage.ugc-stage {
  padding-top: calc(var(--safe-top, 0px) + var(--mobile-page-top-offset, 6px) + 66px) !important;
}

/* Inline controls leave the picture bright; Safari's native scrim is not mounted. */
.ugc-inline-controls {
  position: absolute;
  z-index: 6;
  inset: auto 10px 56px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ugc-inline-controls button {
  flex: 0 0 36px;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 10px;
  background: rgba(8,10,16,.64);
  color: #fff;
  font: 700 18px/1 system-ui, sans-serif;
  padding: 0;
}
.ugc-inline-controls input {
  flex: 1 1 30px;
  width: 30px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  accent-color: #e5edff;
}
.ugc-inline-controls :focus-visible { outline: 2px solid #e5edff; outline-offset: 2px; }

/* Marquee geometry uses physical X coordinates even when its captions are RTL. */
.ugc-brand-marquee, .ugc-category-marquee, #ugcBrands, #ugcCategories { direction: ltr; }
html[dir="rtl"] #ugcCategories > span { direction: rtl; }