/* Clean hero banner — reference matched, responsive, no dependency on old hero rules */
:root{
  --sss-bg:#05060d;
  --sss-pink:#ff0b72;
  --sss-cyan:#28e6dd;
  --sss-purple:#9c55ff;
  --sss-yellow:#ffd62e;
}

.nav{
  top:0!important;
  left:0!important;
  transform:none!important;
  width:100%!important;
  height:82px!important;
  padding:0 clamp(18px,3vw,58px)!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.11)!important;
  border-radius:0!important;
  background:rgba(5,6,13,.94)!important;
  backdrop-filter:blur(14px)!important;
}
.nav .logo{height:100%!important;min-width:210px!important}
.nav .logo img{width:190px!important;max-height:58px!important;object-fit:contain!important}
.navlinks{gap:clamp(20px,3vw,46px)!important}
.navlinks a{font-size:.84rem!important;letter-spacing:.08em!important}

.hero{
  position:relative!important;
  top:0!important;
  margin-top:82px!important;
  width:100%!important;
  min-height:auto!important;
  padding:0!important;
  overflow:hidden!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 28% 42%,rgba(255,0,105,.11),transparent 28%),
    radial-gradient(circle at 65% 58%,rgba(24,223,212,.10),transparent 24%),
    linear-gradient(180deg,#070811 0%,#05060d 100%)!important;
}

.hero-shell{
  position:relative!important;
  isolation:isolate!important;
  width:min(1500px,100%)!important;
  max-width:1500px!important;
  min-height:626px!important;
  height:626px!important;
  margin:0 auto!important;
  padding:0 clamp(24px,3vw,52px)!important;
  display:grid!important;
  grid-template-columns:28% 43% 29%!important;
  gap:0!important;
  align-items:end!important;
  overflow:hidden!important;
}
.hero-shell::before{
  content:"SPEAK"!important;
  position:absolute!important;
  z-index:-2!important;
  top:8px!important;
  left:50%!important;
  width:100%!important;
  transform:translateX(-50%)!important;
  text-align:center!important;
  white-space:nowrap!important;
  font-family:"Manrope",sans-serif!important;
  font-size:clamp(14rem,22vw,23.8rem)!important;
  font-weight:800!important;
  line-height:.78!important;
  letter-spacing:-.085em!important;
  color:rgba(255,8,111,.08)!important;
  -webkit-text-stroke:1px rgba(255,23,123,.78)!important;
  text-shadow:0 0 35px rgba(255,0,103,.18)!important;
}
.hero-shell::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-3!important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px)!important;
  background-size:58px 58px!important;
  mask-image:linear-gradient(to bottom,transparent 0,#000 20%,#000 90%,transparent)!important;
}

.hero-workshop-title{
  align-self:end;
  padding:0 0 74px 8px;
  position:relative;
  z-index:6;
  animation:sssRise .9s cubic-bezier(.2,.75,.2,1) both;
}
.hero-workshop-title .line-one,
.hero-workshop-title .line-two,
.hero-workshop-title .line-three{
  display:block;
  font-family:"Manrope",sans-serif;
  font-weight:900;
  line-height:.78;
  letter-spacing:-.065em;
  text-transform:uppercase;
}
.hero-workshop-title .line-one{font-size:clamp(3.7rem,4.7vw,5.1rem);color:#fff}
.hero-workshop-title .line-two{font-size:clamp(3.7rem,4.7vw,5.1rem);color:var(--sss-pink);margin-top:8px}
.hero-workshop-title .line-three{font-size:clamp(2.45rem,3.05vw,3.35rem);color:#fff;margin-top:7px;letter-spacing:-.045em}
.hero-workshop-title::before{
  content:"";
  position:absolute;
  left:-24px;
  bottom:52px;
  width:170px;
  height:170px;
  border-radius:50%;
  background:rgba(255,8,111,.15);
  filter:blur(48px);
  z-index:-1;
}

.hero-portrait{
  position:relative!important;
  z-index:4!important;
  height:626px!important;
  min-height:626px!important;
  width:100%!important;
  margin:0!important;
  display:flex!important;
  justify-content:center!important;
  align-items:flex-end!important;
  overflow:visible!important;
}
.hero-portrait::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  bottom:22px!important;
  width:510px!important;
  height:470px!important;
  transform:translateX(-50%)!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 25% 54%,rgba(255,0,104,.44),transparent 34%),
    radial-gradient(circle at 78% 58%,rgba(0,225,215,.27),transparent 35%)!important;
  filter:blur(42px)!important;
  animation:sssAura 4.8s ease-in-out infinite alternate!important;
}
.hero-portrait::after{display:none!important}
.hero-portrait img{
  position:relative!important;
  z-index:3!important;
  width:auto!important;
  max-width:none!important;
  height:602px!important;
  margin:0!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  mix-blend-mode:normal!important;
  filter:contrast(1.08) saturate(.96) drop-shadow(0 18px 28px rgba(0,0,0,.35))!important;
  mask-image:linear-gradient(to bottom,#000 0%,#000 93%,transparent 100%)!important;
  animation:sssFloat 5.6s ease-in-out infinite!important;
}

.hero-info-card{
  align-self:end;
  position:relative;
  z-index:7;
  margin:0 0 76px -12px;
  padding:24px 24px 16px;
  max-width:340px;
  background:linear-gradient(135deg,rgba(13,13,24,.88),rgba(6,7,14,.96));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 60px rgba(0,0,0,.38),0 0 36px rgba(255,0,105,.08);
  backdrop-filter:blur(14px);
  animation:sssSlide .9s .18s cubic-bezier(.2,.75,.2,1) both;
}
.hero-info-row{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:42px;
  color:#f7f7fb;
  font-size:.97rem;
  font-weight:700;
  border-bottom:1px solid rgba(255,255,255,.035);
}
.hero-info-row:last-of-type{border-bottom:0}
.hero-info-row .icon{width:12px;color:var(--sss-pink);font-size:.83rem;flex:none;text-align:center}
.hero-register{
  min-height:49px;
  margin-top:8px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-radius:999px;
  color:#fff;
  font-size:.84rem;
  font-weight:900;
  background:linear-gradient(90deg,#ff0a6e,#ff2586);
  box-shadow:0 14px 30px rgba(255,0,104,.28);
  transition:transform .25s ease,box-shadow .25s ease;
}
.hero-register:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(255,0,104,.42)}
.hero-register span:last-child{font-size:1.15rem;transition:transform .25s ease}
.hero-register:hover span:last-child{transform:translateX(4px)}

.hero-copy-block,.hero-main-title,.hero-desc,.hero-meta,.hero-ctas,.hero-stats,.hero-signature,.hero-role,.live-pill{display:none!important}

.hero-ticker{
  position:relative!important;
  z-index:9!important;
  border-top:1px solid rgba(255,255,255,.13)!important;
  border-bottom:1px solid rgba(255,255,255,.1)!important;
  background:#060710!important;
}
.hero-ticker-track{animation:sssMarquee 26s linear infinite!important}
.hero-ticker-track span{padding:16px 27px!important;font-size:.76rem!important;letter-spacing:.01em!important}

@keyframes sssRise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes sssSlide{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
@keyframes sssFloat{50%{transform:translateY(-7px)}}
@keyframes sssAura{to{transform:translateX(-50%) scale(1.08);opacity:.76}}
@keyframes sssMarquee{to{transform:translateX(-50%)}}

@media(max-width:1050px){
  .hero-shell{grid-template-columns:29% 44% 27%!important;padding-inline:22px!important}
  .hero-portrait img{height:570px!important}
  .hero-info-card{margin-left:-22px;padding:19px 18px 14px}
  .hero-info-row{font-size:.84rem}
  .hero-workshop-title .line-one,.hero-workshop-title .line-two{font-size:3.7rem}
  .hero-workshop-title .line-three{font-size:2.35rem}
}

@media(max-width:820px){
  .nav{height:70px!important;padding:0 14px!important}
  .nav .logo{min-width:auto!important}
  .nav .logo img{width:150px!important}
  .nav-cta{padding:11px 14px!important;font-size:.74rem!important}
  .hero{margin-top:0px!important}
  .hero-shell{
    height:auto!important;
    min-height:auto!important;
    padding:24px 18px 0!important;
    grid-template-columns:1fr!important;
    text-align:center!important;
  }
  .hero-shell::before{top:18px!important;font-size:39vw!important}
  .hero-workshop-title{order:1;padding:78px 0 0!important}
  .hero-workshop-title::before{left:50%;transform:translateX(-50%)}
  .hero-portrait{order:2;height:430px!important;min-height:430px!important;margin-top:-12px!important}
  .hero-portrait img{height:445px!important;max-width:100%!important}
  .hero-info-card{order:3;margin:-16px auto 28px!important;width:min(100%,430px)!important;max-width:430px!important;text-align:left!important}
  .hero-info-row{font-size:.92rem}
}

@media(max-width:520px){
  .navlinks{display:none!important}
  .nav .logo img{width:132px!important}
  .nav-cta{font-size:.68rem!important;padding:10px 12px!important}
  .hero-shell{padding-inline:12px!important}
  .hero-shell::before{top:28px!important;font-size:32vw!important}
  .hero-workshop-title{padding-top:118px!important}
  .hero-workshop-title .line-one,.hero-workshop-title .line-two{font-size:3.05rem}
  .hero-workshop-title .line-three{font-size:1.95rem}
  .hero-portrait{height:365px!important;min-height:365px!important}
  .hero-portrait img{height:380px!important}
  .hero-info-card{margin-top:-8px!important;padding:18px 16px 13px!important}
  .hero-info-row{min-height:39px;font-size:.83rem}
  .hero-register{min-height:47px;font-size:.78rem}
  .hero-ticker-track span{padding:14px 22px!important;font-size:.68rem!important}
}

@media(prefers-reduced-motion:reduce){
  .hero-workshop-title,.hero-info-card,.hero-portrait img,.hero-portrait::before,.hero-ticker-track{animation:none!important}
}

/* ===== Sequential header logo reveal: icon → SPEAK → SHOOT → SELL ===== */
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}
.nav .logo.logo-sequence{
  display:block!important;width:240px!important;min-width:240px!important;height:70px!important;
  overflow:visible!important;
}
.logo-stage{
  position:relative;display:block!important;width:100%;height:100%;
  animation:logoStageGlow 8.4s ease-in-out infinite;
}
.logo-layer{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  max-width:none!important;object-fit:contain!important;object-position:left center!important;
  opacity:0;will-change:opacity,transform,filter;
}
.logo-icon-layer{animation:logoIconReveal 8.4s cubic-bezier(.22,.75,.22,1) infinite;}
.logo-speak-layer{animation:logoSpeakReveal 8.4s cubic-bezier(.22,.75,.22,1) infinite;}
.logo-shoot-layer{animation:logoShootReveal 8.4s cubic-bezier(.22,.75,.22,1) infinite;}
.logo-sell-layer{animation:logoSellReveal 8.4s cubic-bezier(.22,.75,.22,1) infinite;}

/* Only the icon is visible first. Each complete word then enters in order. */
@keyframes logoIconReveal{
  0%,3%{opacity:0;transform:translateY(8px) scale(.96);filter:blur(4px)}
  9%,91%{opacity:1;transform:none;filter:blur(0)}
  97%,100%{opacity:0;transform:translateY(-3px) scale(.99);filter:blur(2px)}
}
@keyframes logoSpeakReveal{
  0%,18%{opacity:0;transform:translateX(-24px);filter:blur(6px)}
  27%,91%{opacity:1;transform:translateX(0);filter:blur(0)}
  97%,100%{opacity:0;transform:translateX(5px);filter:blur(2px)}
}
@keyframes logoShootReveal{
  0%,35%{opacity:0;transform:translateX(-24px);filter:blur(6px)}
  44%,91%{opacity:1;transform:translateX(0);filter:blur(0)}
  97%,100%{opacity:0;transform:translateX(5px);filter:blur(2px)}
}
@keyframes logoSellReveal{
  0%,52%{opacity:0;transform:translateX(-24px);filter:blur(6px)}
  61%,91%{opacity:1;transform:translateX(0);filter:blur(0)}
  97%,100%{opacity:0;transform:translateX(5px);filter:blur(2px)}
}
@keyframes logoStageGlow{
  0%,18%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}
  62%,90%{filter:drop-shadow(0 0 7px rgba(255,255,255,.30))}
  100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}
}
.logo-sequence:hover .logo-stage,.logo-sequence:hover .logo-layer{animation-play-state:paused}
@media (max-width:900px){.nav .logo.logo-sequence{width:205px!important;min-width:205px!important;height:60px!important}}
@media (max-width:600px){.nav .logo.logo-sequence{width:165px!important;min-width:165px!important;height:50px!important}}
@media (prefers-reduced-motion:reduce){
  .logo-stage,.logo-layer{animation:none!important}.logo-layer{opacity:1!important;transform:none!important;filter:none!important}
}


/* Logo visibility repair */
.nav .logo.logo-sequence > .logo-stage{display:block!important;visibility:visible!important;opacity:1!important;}
.nav .logo.logo-sequence .logo-layer{display:block!important;visibility:visible!important;}
.nav .logo.logo-sequence .logo-icon-layer{opacity:1;}