/* UKW homepage hero: 3D kinetic headlines. v1 2026-10. Fonts self-hosted (latin subset). */
@font-face{font-family:'Wix Madefor Display';font-style:normal;font-weight:400 800;font-display:swap;src:url(/css/fonts/wix-madefor-display-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Wix Madefor Text';font-style:normal;font-weight:400 700;font-display:swap;src:url(/css/fonts/wix-madefor-text-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.ukw-h3d{
  --ukw-black:#131118;--ukw-purple:#5F259E;--ukw-purple-hi:#7335BB;--ukw-lilac:#C9A6F0;--ukw-white:#FFFFFF;--ukw-mute:#B4B1BA;
  --ukw-display:"Wix Madefor Display","Segoe UI",system-ui,-apple-system,sans-serif;
}
.ukw-h3d *,.ukw-h3d *::before,.ukw-h3d *::after{box-sizing:border-box}
/* ================= UK WHOLESALE HERO ================= */
.ukw-h3d{
  position:relative;isolation:isolate;overflow:hidden;min-height:700px;
  display:flex;flex-direction:column;background:var(--ukw-black);color:var(--ukw-white);
  font-family:"Wix Madefor Text","Segoe UI",system-ui,-apple-system,sans-serif;
}
.ukw-h3d__media{position:absolute;inset:0;z-index:0;perspective:1500px;overflow:hidden;transition:opacity 1.6s ease}
.ukw-h3d__scene{position:absolute;inset:0;display:none}
.ukw-h3d__scene:first-child{display:block}
.ukw-h3d__plate{position:absolute;inset:-9%;will-change:transform;transform-origin:62% 42%}
.ukw-h3d__plate img{display:block;width:100%;height:100%;object-fit:cover}
.ukw-h3d__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(19,17,24,.90) 0%, rgba(19,17,24,.80) 28%, rgba(19,17,24,.50) 54%, rgba(19,17,24,.22) 76%, rgba(19,17,24,.14) 100%),
    linear-gradient(0deg, rgba(19,17,24,.85) 0%, rgba(19,17,24,0) 28%),
    linear-gradient(0deg, rgba(52,24,92,.15), rgba(52,24,92,.15));}
.ukw-h3d__blade{position:absolute;inset:0;z-index:2;pointer-events:none}
.ukw-h3d__blade i{position:absolute;inset:0;display:none;background:var(--ukw-purple)}
.ukw-h3d__blade i+i{background:var(--ukw-lilac)}
.ukw-h3d__gl{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;display:block}

.ukw-h3d__inner{position:relative;z-index:4;flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:3.5rem 20px 2.5rem;width:100%;max-width:1200px;margin:0 auto}
.ukw-h3d__inner>*{max-width:58rem}
@media (min-width:768px){.ukw-h3d__inner{padding:4rem 32px 3rem}}
.ukw-h3d p.ukw-h3d__eyebrow{margin:0 0 1.5rem;align-self:flex-start;font-family:var(--ukw-display);font-size:clamp(.92rem,1.25vw,1.12rem);font-weight:700;color:#fff;
  padding:.68rem 1.3rem;border-radius:999px;background:rgba(95,37,158,.42);border:1px solid rgba(201,166,240,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* the 3D headline is drawn into this slot */
.ukw-h3d__stage{position:relative;width:min(100%,50rem);aspect-ratio:11.94/4.117;container-type:inline-size;margin:0 0 1.25rem}
.ukw-h3d__lines{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);margin:0}
.ukw-h3d__lines p{margin:0;display:none;font-family:var(--ukw-display);font-weight:800;font-size:7.2cqw;color:#fff;line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
.ukw-h3d__lines p.is-on{display:block}
.ukw-h3d__lines em{font-style:normal;color:var(--ukw-lilac)}
.ukw-h3d--3d .ukw-h3d__lines{position:absolute;top:0;transform:none;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
.ukw-h3d--3d .ukw-h3d__lines p{display:block}

.ukw-h3d__ctrl{display:flex;align-items:center;gap:.4rem;margin:.9rem 0 1.25rem}
.ukw-h3d__dot{appearance:none;border:0;background:none;padding:.9rem 0;width:2.6rem;cursor:pointer}
.ukw-h3d__dot i{display:block;height:3px;border-radius:3px;background:rgba(255,255,255,.26);overflow:hidden;position:relative}
.ukw-h3d__dot i::after{content:"";position:absolute;inset:0;background:var(--ukw-white);transform-origin:left;transform:scaleX(var(--p,0))}
.ukw-h3d__dot:hover i{background:rgba(255,255,255,.5)}
.ukw-h3d__pause{appearance:none;border:1px solid rgba(255,255,255,.32);background:rgba(11,10,13,.4);color:var(--ukw-white);
  width:44px;height:44px;border-radius:50%;margin-left:.5rem;cursor:pointer;display:grid;place-items:center;flex:none}
.ukw-h3d__pause:hover{border-color:var(--ukw-white)}
.ukw-h3d__pause svg{width:12px;height:12px;fill:currentColor}
.ukw-h3d__pause .play{display:none}
.ukw-h3d__pause[aria-pressed="true"] .play{display:block}
.ukw-h3d__pause[aria-pressed="true"] .pause{display:none}

.ukw-h3d p.ukw-h3d__sub{margin:0 0 1.6rem;max-width:42rem;font-size:clamp(1.08rem,1.6vw,1.42rem);line-height:1.5;font-weight:400;color:#DDDDDE}
.ukw-h3d__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1rem;margin:0 0 .9rem}
.ukw-h3d__btn{display:inline-flex;align-items:center;justify-content:center;min-height:62px;padding:0 2.1rem;border-radius:12px;font-family:var(--ukw-display);
  font-weight:800;font-size:clamp(1.05rem,1.45vw,1.3rem);text-decoration:none;transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .3s ease}
.ukw-h3d a.ukw-h3d__btn--go{background:var(--ukw-purple);color:var(--ukw-white);box-shadow:0 0 0 1px rgba(201,166,240,.16),0 12px 38px -6px rgba(95,37,158,.9)}
.ukw-h3d a.ukw-h3d__btn--go:hover{background:var(--ukw-purple-hi);transform:translateY(-1px);box-shadow:0 0 0 1px rgba(201,166,240,.3),0 16px 44px -6px rgba(115,53,187,1)}
.ukw-h3d a.ukw-h3d__btn--call{color:var(--ukw-white);border:1.5px solid rgba(255,255,255,.6);background:rgba(255,255,255,.14)}
.ukw-h3d a.ukw-h3d__btn--call:hover{border-color:var(--ukw-white);background:rgba(255,255,255,.22)}
.ukw-h3d p.ukw-h3d__note{margin:0;font-size:clamp(.95rem,1.2vw,1.1rem);color:var(--ukw-mute)}
.ukw-h3d a:focus-visible,.ukw-h3d button:focus-visible{outline:3px solid var(--ukw-lilac);outline-offset:3px;border-radius:8px}


.ukw-h3d [data-rise]{transition:opacity .9s ease,transform 1s cubic-bezier(.16,.84,.2,1)}
.ukw-h3d.is-js:not(.is-live) [data-rise]{opacity:0;transform:translateY(14px)}
.ukw-h3d.is-live [data-rise]{transition-delay:var(--d,0s)}

@media (max-width:820px){
  .ukw-h3d{min-height:880px}
  .ukw-h3d__scrim{background:
    linear-gradient(0deg, rgba(19,17,24,1) 0%, rgba(19,17,24,1) 42%, rgba(19,17,24,.72) 58%, rgba(19,17,24,.25) 78%, rgba(19,17,24,.12) 100%),
    linear-gradient(0deg, rgba(52,24,92,.15), rgba(52,24,92,.15))}
  .ukw-h3d__media,.ukw-h3d__blade{bottom:auto;height:58%}
  .ukw-h3d__eyebrow{font-size:.84rem;padding:.55rem 1rem}
  .ukw-h3d__inner{justify-content:flex-end;padding-top:14rem;padding-bottom:1.5rem}
  .ukw-h3d__plate{transform-origin:62% 20%}
  }
@media (prefers-reduced-motion: reduce){
  .ukw-h3d [data-rise],.ukw-h3d__media{transition:none!important}
  .ukw-h3d__pause{display:none}
}
