/* SJ SMALLPAGE V36 — PINK / BLACK / WHITE / YELLOW */

.v30-public{
  --sj-black:#0d0d0f;
  --sj-white:#ffffff;
  --sj-paper:#f7f6f2;
  --sj-pink:#ff2d8f;
  --sj-yellow:#ffe600;
  --sj-grey:#aaa9ae;
  --fest-ink:var(--sj-black);
  --fest-cream:var(--sj-paper);
  --fest-blue:var(--sj-pink);
  --fest-pink:var(--sj-pink);
  --fest-yellow:var(--sj-yellow);
  --fest-teal:var(--sj-white);
  --fest-purple:var(--sj-pink);
  background:var(--sj-paper)!important;
  color:var(--sj-black)!important;
}

/* GLOBAL */
.v30-public ::selection{background:var(--sj-pink);color:#fff}
.v30-public a{transition:color .18s ease,background .18s ease,transform .18s ease,opacity .18s ease}
.v30-section-head>div>span,.v30-featured>.v30-section-label{color:var(--sj-pink)!important}
.v30-section-head{border-bottom:2px solid var(--sj-black)!important}
.v30-section-head>a:hover{color:var(--sj-pink)!important}

/* HEADER */
.v30-head{
  background:rgba(255,255,255,.96)!important;
  border-bottom:3px solid var(--sj-black)!important;
}
.v30-brand span{color:var(--sj-pink)!important}
.v30-brand b{color:var(--sj-black)!important}
.v30-head nav a{color:var(--sj-black)!important}
.v30-head nav a:hover{color:var(--sj-pink)!important}
.v30-head .nav-work{
  background:var(--sj-black)!important;
  border-color:var(--sj-black)!important;
  color:#fff!important;
}
.v30-head .nav-work:hover{
  background:var(--sj-pink)!important;
  border-color:var(--sj-pink)!important;
}
.v30-alert{background:var(--sj-black)!important;color:#fff!important}

/* HERO */
.v30-hero{
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 88% 14%,var(--sj-yellow) 0 72px,transparent 73px),
    linear-gradient(90deg,var(--sj-white) 0 58%,#f1eff2 58% 100%)!important;
  min-height:760px;
}
.v30-hero:before{
  content:"SJ";
  position:absolute;
  right:-20px;
  bottom:-88px;
  font:900 290px/.8 'Space Grotesk';
  letter-spacing:-.12em;
  color:#00000005;
  z-index:0;
}
.v30-hero-grid{position:relative!important;z-index:3!important}
.v30-overline{color:var(--sj-pink)!important}
.v30-hero-copy:before{
  width:110px!important;
  height:9px!important;
  background:linear-gradient(90deg,var(--sj-pink) 0 48%,var(--sj-yellow) 48% 100%)!important;
}
.v30-hero h1{color:var(--sj-black)!important}
.v30-hero h1 em{color:var(--sj-pink)!important}
.v30-hero-copy>p{color:#4b4b51!important}
.v30-btn.dark{background:var(--sj-black)!important;border-color:var(--sj-black)!important}
.v30-btn.line{background:var(--sj-yellow)!important;border-color:var(--sj-black)!important;color:var(--sj-black)!important}
.v30-hero-image{
  background:#fff!important;
  box-shadow:22px 24px 0 var(--sj-pink)!important;
}
.v30-hero-image:before{background:var(--sj-yellow)!important}
.v30-hero-image:after{
  background:var(--sj-black)!important;
  color:var(--sj-yellow)!important;
}
.v30-hero-image img{filter:saturate(1.07) contrast(1.02)!important}

/* wild hero svg scene */
.v36-hero-stage{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
}
.v36-stage-svg{width:100%;height:100%}
.v36-beams path{
  fill:var(--sj-pink);
  opacity:.07;
  transform-origin:50% 0%;
  animation:v36BeamSwing 8s ease-in-out infinite alternate;
}
.v36-beams path:nth-child(2){fill:var(--sj-yellow);animation-delay:-2.5s}
.v36-beams path:nth-child(3){fill:#000;opacity:.04;animation-delay:-4s}
.v36-ring{
  fill:none;
  stroke:var(--sj-black);
  stroke-width:3;
  stroke-dasharray:12 12;
  transform-origin:710px 130px;
  animation:v36Spin 18s linear infinite;
}
.v36-ring.r2{
  stroke:var(--sj-pink);
  stroke-dasharray:4 10;
  animation-direction:reverse;
  animation-duration:11s;
}
.v36-wave-main,.v36-wave-alt{
  fill:none;
  vector-effect:non-scaling-stroke;
  stroke-width:5;
  stroke-linecap:round;
  stroke-dasharray:18 12;
  animation:v36Dash 7s linear infinite;
}
.v36-wave-main{stroke:var(--sj-pink)}
.v36-wave-alt{stroke:var(--sj-black);stroke-width:2;animation-duration:11s;animation-direction:reverse}
.v36-eq rect{fill:var(--sj-yellow);transform-origin:center bottom;animation:v36EQ .9s ease-in-out infinite alternate}
.v36-eq rect:nth-child(2){animation-delay:.15s}.v36-eq rect:nth-child(3){animation-delay:.3s}.v36-eq rect:nth-child(4){animation-delay:.45s}.v36-eq rect:nth-child(5){animation-delay:.6s}

/* ticker */
.v34-numbers{background:var(--sj-yellow)!important;color:var(--sj-black)!important;border-block:4px solid var(--sj-black)!important}
.v35-ticker-group b{color:var(--sj-pink)!important}
.v35-ticker-group span:nth-of-type(2n) b{color:var(--sj-black)!important}
.v35-ticker-group span:nth-of-type(3n) b{color:var(--sj-pink)!important}
.v35-ticker-group i{color:var(--sj-black)!important}

/* LIVE TAKEOVER */
.v34-takeover{
  background:var(--sj-black)!important;
  border-bottom:8px solid var(--sj-pink)!important;
}
.v34-live-kicker{color:var(--sj-yellow)!important}
.v34-live-kicker i{background:var(--sj-pink)!important}
.v34-live-status span{background:#17171a!important}
.v34-live-status small{color:#85858d!important}
.v34-enter-live{background:var(--sj-yellow)!important;color:var(--sj-black)!important}
.v34-live-beam{background:linear-gradient(to bottom,var(--sj-pink),transparent)!important}
.beam-two{background:linear-gradient(to bottom,var(--sj-yellow),transparent)!important}

/* FEATURED */
.v30-featured-grid>img{box-shadow:-14px 14px 0 var(--sj-yellow)!important}
.v30-featured-grid>div{background:var(--sj-white)!important}
.v30-featured-grid h2:hover,.v30-story-card:hover h3,.v30-event-row:hover h3{color:var(--sj-pink)!important}
.v30-read{border-bottom-color:var(--sj-pink)!important}

/* MOTION BAND */
.v36-motion-band{
  background:var(--sj-white);
  position:relative;
  height:190px;
  overflow:hidden;
  border-block:4px solid var(--sj-black);
}
.v36-motion-band svg{position:absolute;inset:0;width:100%;height:100%}
.v36-band-wave{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.wave1{stroke:var(--sj-pink);stroke-width:7;stroke-dasharray:18 12;animation:v36Dash 7s linear infinite}
.wave2{stroke:var(--sj-black);stroke-width:2;stroke-dasharray:5 12;animation:v36DashRev 10s linear infinite}
.v36-band-dot{stroke:var(--sj-black);stroke-width:3;animation:v36Pulse 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.d1,.d3{fill:var(--sj-yellow)}.d2{fill:var(--sj-pink)}
.v36-motion-band div{
  position:absolute;
  bottom:9px;
  left:0;
  white-space:nowrap;
  font:900 clamp(28px,4vw,58px)/.8 'Space Grotesk';
  letter-spacing:-.05em;
  color:#0000000b;
  animation:v35Ticker 30s linear infinite;
}

/* DIARY */
.route-shadow{stroke:#eee!important}
.route-main{stroke:var(--sj-black)!important}
.v32-route circle:nth-of-type(odd){fill:var(--sj-pink)!important}
.v32-route circle:nth-of-type(even){fill:var(--sj-yellow)!important}
.v30-event-row:before{background:linear-gradient(90deg,var(--sj-pink),var(--sj-yellow),var(--sj-black))!important}
.v30-event-row time b{color:var(--sj-pink)!important}

/* FIELD NOTES */
.v30-fieldnotes{background:var(--sj-black)!important}
.v30-note-grid article{border-top-color:var(--sj-pink)!important}
.v30-note-grid article:nth-child(2){border-top-color:var(--sj-yellow)!important}
.v30-note-grid article:nth-child(3){border-top-color:#fff!important}
.v30-note-grid article:nth-child(4){border-top-color:var(--sj-pink)!important}
.v30-note-grid small{color:var(--sj-yellow)!important}
.v30-note-grid a{border-bottom-color:var(--sj-pink)!important}

/* STORIES */
.v30-story-card:nth-child(3n+1):before{background:var(--sj-pink)!important}
.v30-story-card:nth-child(3n+2):before{background:var(--sj-yellow)!important}
.v30-story-card:nth-child(3n+3):before{background:var(--sj-black)!important}

/* FACTS */
.v32-facts{background:linear-gradient(120deg,#fff 0 58%,#f4f1f3 58% 100%)!important}
.v32-facts-heading>span{color:var(--sj-pink)!important}
.v32-facts-heading h2 em{color:var(--sj-pink)!important}
.v32-fact-points span{color:var(--sj-pink)!important}
.loop-one{stroke:var(--sj-black)!important}.loop-two{stroke:var(--sj-pink)!important}.facts-pulse{fill:var(--sj-yellow)!important}

/* WHY SJ */
.v35-why-sj{background:var(--sj-black)!important}
.v35-why-intro>span{color:var(--sj-yellow)!important}
.v35-why-intro button{border-bottom-color:var(--sj-pink)!important}
.v35-service-flow>article>span{color:var(--sj-pink)!important}
.v35-service-flow article:nth-child(2)>span{color:var(--sj-yellow)!important}
.v35-service-flow article:nth-child(3)>span{color:#fff!important}
.v35-service-flow article:nth-child(4)>span{color:var(--sj-pink)!important}
.v35-service-flow article:after{background:linear-gradient(90deg,var(--sj-pink),var(--sj-yellow),#fff)!important}

/* ABOUT */
.v30-about{background:#fff!important}
.v30-about:after{background:var(--sj-yellow)!important;opacity:.24!important}
.v30-about h2 em{color:var(--sj-pink)!important}
.v30-stats b{color:var(--sj-pink)!important}
.v30-stats>div:nth-child(1){border-top-color:var(--sj-pink)!important}
.v30-stats>div:nth-child(2){border-top-color:var(--sj-yellow)!important}
.v30-stats>div:nth-child(3){border-top-color:var(--sj-black)!important}

/* PEOPLE */
.v34-people{background:#f5f4ef!important}
.v34-handnote{color:var(--sj-pink)!important}
.v34-person:nth-child(3n+1) figure{box-shadow:9px 9px 0 var(--sj-pink)!important}
.v34-person:nth-child(3n+2) figure{box-shadow:9px 9px 0 var(--sj-yellow)!important}
.v34-person:nth-child(3n+3) figure{box-shadow:9px 9px 0 var(--sj-black)!important}
.v34-person small{color:var(--sj-pink)!important}

/* PHOTO BREAK + INTERLUDE */
.v34-photo-break{background:var(--sj-black)!important}
.v34-photo-break div{color:var(--sj-yellow)!important}
.v34-interlude{background:var(--sj-pink)!important}
.v34-interlude span{color:var(--sj-yellow)!important}
.v34-interlude h2 em{color:var(--sj-yellow)!important}
.v34-interlude path{stroke:#fff!important}
.v34-interlude circle{fill:var(--sj-yellow)!important}

/* PHOTOGRAPHY */
.v30-photo-item.item-1{box-shadow:inset 0 -7px 0 var(--sj-pink)!important}
.v30-photo-item.item-2{box-shadow:inset 0 -7px 0 var(--sj-yellow)!important}
.v30-photo-item.item-3{box-shadow:inset 0 -7px 0 var(--sj-black)!important}
.v30-photo-item.item-4{box-shadow:inset 0 -7px 0 var(--sj-pink)!important}
.v30-photo-item.item-5{box-shadow:inset 0 -7px 0 var(--sj-yellow)!important}

/* SOCIAL */
.v30-social{background:linear-gradient(135deg,#fff 0 52%,#f4eef1 52% 100%)!important}
.v30-social-grid a:nth-child(3n+1){box-shadow:7px 8px 0 var(--sj-pink)!important}
.v30-social-grid a:nth-child(3n+2){box-shadow:7px 8px 0 var(--sj-yellow)!important}
.v30-social-grid a:nth-child(3n+3){box-shadow:7px 8px 0 var(--sj-black)!important}
.v30-social-grid a:after{color:var(--sj-pink)!important}

/* WORK CTA WITH SVG LIGHT SHOW */
.v30-work{background:var(--sj-pink)!important;position:relative;overflow:hidden}
.v36-work-svg{position:absolute;inset:0;z-index:0}
.v36-work-svg svg{width:100%;height:100%}
.v36-work-beam{fill:var(--sj-yellow);opacity:.11;transform-origin:50% 0;animation:v36BeamSwing 8s ease-in-out infinite alternate}
.v36-work-beam.b2{fill:#fff;animation-delay:-3.5s}
.v36-work-ring{fill:none;stroke:#fff;stroke-width:4;stroke-dasharray:11 10;transform-origin:970px 130px;animation:v36Spin 15s linear infinite}
.v36-work-ring.ring2{stroke:var(--sj-yellow);animation-direction:reverse;animation-duration:9s}
.v30-work .wrap{position:relative;z-index:2}
.v30-work span{color:var(--sj-yellow)!important}
.v30-work button{background:var(--sj-yellow)!important;color:var(--sj-black)!important;border-color:var(--sj-black)!important}

/* FOOTER */
.v30-footer{background:var(--sj-black)!important;border-top:8px solid var(--sj-yellow)!important}
.v30-footer-brand span{color:var(--sj-pink)!important}
.v30-footer-grid:before{color:#fff!important}
.v30-footer-grid:after{color:var(--sj-yellow)!important}

/* CONTACT */
.v30-contact-launch{background:var(--sj-pink)!important}
.v30-contact-launch:hover{background:var(--sj-black)!important}
.contact-sj-modal .contact-sj-panel{background:#fff!important;border-left:10px solid var(--sj-pink)!important}
.contact-sj-panel h2 em{color:var(--sj-pink)!important}
.contact-sj-panel button[type=submit]{background:var(--sj-black)!important}

/* GENERIC PAGES */
.v30-public .page-hero,.v30-public .latest-hero,.v30-public .backstage-hero{
  background:linear-gradient(90deg,#fff 0 72%,#f8f2f5 72% 100%)!important;
}
.v30-public .page-hero:before,.v30-public .latest-hero:before,.v30-public .backstage-hero:before{color:var(--sj-pink)!important}
.v30-public .chip,.v30-public .chip.float{background:var(--sj-black)!important}
.v30-public .btn,.v30-public .btn.hot,.v30-public .btn.festival,.v30-public .btn.light{background:var(--sj-black)!important;border-color:var(--sj-black)!important}
.v30-public .story-body blockquote{border-left-color:var(--sj-pink)!important;background:#fff5fa!important}

/* BRAND KIT */
.brand-kit-hero{background:var(--sj-black)!important}
.brand-kit-hero h1 em{color:var(--sj-pink)!important}
.brand-pass{background:var(--sj-yellow)!important;box-shadow:14px 14px 0 var(--sj-pink)!important}
.brand-kit-stripe{background:var(--sj-pink)!important}
.brand-kit-colour-zone{background:#f4f1f3!important}
.brand-kit-dark{background:var(--sj-black)!important}
.brand-kit-final{background:var(--sj-yellow)!important}
.brand-kit-final h2 em{color:var(--sj-pink)!important}

@keyframes v36Spin{to{transform:rotate(360deg)}}
@keyframes v36Dash{to{stroke-dashoffset:-220}}
@keyframes v36DashRev{to{stroke-dashoffset:220}}
@keyframes v36Pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.45)}}
@keyframes v36EQ{from{transform:scaleY(.45)}to{transform:scaleY(1.2)}}
@keyframes v36BeamSwing{0%{transform:rotate(-8deg)}100%{transform:rotate(12deg)}}

@media(max-width:800px){
  .v30-hero{
    min-height:0!important;
    background:
      radial-gradient(circle at 92% 6%,var(--sj-yellow) 0 48px,transparent 49px),
      #fff!important;
  }
  .v36-hero-stage{opacity:.7}
  .v36-wave-main,.v36-wave-alt{stroke-width:3}
  .v36-eq{display:none}
  .v30-hero-image{box-shadow:10px 11px 0 var(--sj-pink)!important}
  .v36-motion-band{height:130px}
  .v36-motion-band div{font-size:34px}
  .v30-head nav{background:#fff!important}
  .contact-sj-panel{border-left:0!important;border-top:8px solid var(--sj-pink)!important}
}
@media(prefers-reduced-motion:reduce){
  .v36-beams path,.v36-ring,.v36-wave-main,.v36-wave-alt,.v36-eq rect,.v36-band-wave,.v36-band-dot,.v36-motion-band div,.v36-work-beam,.v36-work-ring{animation:none!important}
}