:root{
  --red:#b32f2d;
  --white:#f5f2ee;
  --muted:rgba(245,242,238,.82);
  --line:rgba(255,255,255,.11);
  --safe-top:max(14px, env(safe-area-inset-top));
  --safe-bottom:max(14px, env(safe-area-inset-bottom));
}
*{box-sizing:border-box}
html,body{
  margin:0;
  width:100%;
  min-height:100%;
  overflow:hidden;
  background:#000;
  color:var(--white);
}
body{
  position:relative;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.ambient,.grain{position:fixed; inset:0; pointer-events:none}
.ambient{
  z-index:-20;
  background:
    radial-gradient(circle at 50% 50%, rgba(179,47,45,.14), transparent 28%),
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.05), transparent 18%),
    radial-gradient(circle at 85% 74%, rgba(255,255,255,.035), transparent 16%),
    linear-gradient(180deg,#050505 0%, #000 100%);
}
.grain{
  z-index:-19;
  opacity:.12;
  background-image:url('./assets/texture.jpg');
  background-size:cover;
  mix-blend-mode:soft-light;
}
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:40;
  padding:var(--safe-top) 14px 10px;
  background:linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.28), transparent);
}
.topbar span{font-size:.76rem; font-weight:900; letter-spacing:.18em}
.site,.hero{width:100%; height:100dvh; min-height:100svh; overflow:hidden}
.hero{position:relative; padding:68px 12px calc(var(--safe-bottom) + 88px)}
.artboard{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
}
.floating-logos,.ui-layer{position:relative; z-index:4}
.logo-bg,.road-float,.quote,.sign-float,.face{position:absolute; will-change:transform}
.logo-bg{
  left:50%;
  width:min(95vw, 1500px);
  transform:translateX(-50%);
  opacity:.34;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));
}
.logo-bg-1{top:2%; animation:logoDrift1 17s ease-in-out infinite}
.logo-bg-2{top:22%; animation:logoDrift2 19s ease-in-out infinite}
.logo-bg-3{top:61%; animation:logoDrift3 16s ease-in-out infinite}
.logo-bg-4{top:81%; animation:logoDrift4 18s ease-in-out infinite}
.road-float{
  left:50%; top:37%;
  width:min(76vw, 980px);
  transform:translate(-50%, -50%);
  opacity:.30;
  mix-blend-mode:screen;
  filter:contrast(1.06) brightness(.9) drop-shadow(0 10px 30px rgba(0,0,0,.6));
  mask-image:radial-gradient(circle at 50% 48%, black 38%, transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 48%, black 38%, transparent 72%);
  animation:roadPulse 14s ease-in-out infinite;
}
.quote{
  top:18%;
  width:clamp(104px, 10vw, 190px);
  opacity:.34;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.45));
}
.quote-left{left:-1%; transform:rotate(180deg); animation:quoteLeft 18s ease-in-out infinite}
.quote-right{right:-1%; animation:quoteRight 18s ease-in-out infinite}
.sign-float{
  left:14%; top:54%;
  width:min(18vw, 270px);
  opacity:.68;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.55));
  animation:signFloat 11s ease-in-out infinite;
}
.face{
  width:min(25vw, 360px);
  opacity:.94;
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.7));
}
.face-left{
  left:-2%; top:46%;
  transform:translateY(-50%);
  animation:faceLeft 13s ease-in-out infinite;
}
.face-center{
  left:50%; top:47%;
  width:min(33vw, 480px);
  transform:translate(-50%, -50%);
  animation:faceCenter 14s ease-in-out infinite;
}
.face-right{
  right:9%; top:48%;
  transform:translateY(-50%);
  animation:faceRight 12s ease-in-out infinite;
}
.face-far-right{
  right:-12%; top:47%;
  transform:translateY(-50%);
  animation:faceFarRight 15s ease-in-out infinite;
}
.ui-layer{
  position:relative;
  z-index:12;
  width:min(1220px, 100%);
  height:100%;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.logo-stack{
  position:relative;
  width:min(95vw, 1260px);
  display:grid;
  place-items:center;
  isolation:isolate;
}
.main-logo,.main-logo-shadow{grid-area:1/1; width:100%; height:auto}
.main-logo{
  position:relative;
  z-index:3;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.82));
}
.main-logo-shadow{pointer-events:none}
.shadow-a{
  z-index:1;
  opacity:.22;
  filter:blur(20px);
  transform:translate(0,0) scale(1.025);
  animation:heroGlowA 10s ease-in-out infinite alternate;
}
.shadow-b{
  z-index:2;
  opacity:.14;
  filter:blur(44px);
  transform:translate(0,0) scale(1.06);
  animation:heroGlowB 13s ease-in-out infinite alternate;
}
.tagline{
  margin:-8px 0 12px;
  font-size:clamp(.86rem, 1.2vw, 1rem);
  color:var(--muted);
  text-align:center;
  line-height:1.3;
  text-shadow:0 8px 24px rgba(0,0,0,.7);
}
.tagline strong{color:var(--white)}
.cta-row{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center; align-items:center;
}
.cta{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  min-height:52px; padding:8px 16px 8px 9px; border-radius:999px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:0 18px 40px rgba(0,0,0,.44);
  text-transform:uppercase; font-weight:900; letter-spacing:.08em; font-size:.76rem;
  transition:transform .2s ease, box-shadow .2s ease;
}
.cta:hover,.cta:focus-visible,.social-dock a:hover,.social-dock a:focus-visible,.management:hover,.management:focus-visible{
  transform:translateY(-2px); outline:none;
}
.cta img{width:34px; height:34px; border-radius:11px; box-shadow:0 8px 18px rgba(0,0,0,.34)}
.management{
  margin-top:12px; display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap;
  color:rgba(245,242,238,.78); text-transform:uppercase; font-size:.72rem; letter-spacing:.08em;
}
.management-ig{display:inline-flex; align-items:center; gap:8px; color:var(--white)}
.management-ig img{width:24px; height:24px; border-radius:8px; box-shadow:0 6px 14px rgba(0,0,0,.35)}
.social-dock{
  position:absolute; left:50%; bottom:calc(var(--safe-bottom) + 16px); transform:translateX(-50%);
  z-index:14;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:8px; max-width:min(96vw, 560px);
  border-radius:24px; border:1px solid rgba(255,255,255,.11);
  background:rgba(8,8,8,.58); backdrop-filter:blur(20px) saturate(1.15);
  box-shadow:0 22px 50px rgba(0,0,0,.5);
}
.social-dock a{display:block; transition:transform .2s ease}
.social-dock img{width:50px; height:50px; border-radius:16px; box-shadow:0 8px 20px rgba(0,0,0,.34)}

@keyframes logoDrift1{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}
@keyframes logoDrift2{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}}
@keyframes logoDrift3{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-10px)}}
@keyframes logoDrift4{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}
@keyframes roadPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.025)}}
@keyframes quoteLeft{0%,100%{transform:rotate(180deg) translateY(0)}50%{transform:rotate(180deg) translateY(-8px)}}
@keyframes quoteRight{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes signFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-2deg)}}
@keyframes faceLeft{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(calc(-50% - 6px)) translateX(8px)}}
@keyframes faceCenter{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 6px))}}
@keyframes faceRight{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(calc(-50% - 4px)) translateX(-8px)}}
@keyframes faceFarRight{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(calc(-50% + 6px)) translateX(-6px)}}
@keyframes heroGlowA{from{transform:scale(1.025)}to{transform:translate(8px,-4px) scale(1.03)}}
@keyframes heroGlowB{from{transform:scale(1.06)}to{transform:translate(-10px,6px) scale(1.075)}}

@media (max-width:1080px){
  .logo-bg{width:min(110vw, 1380px)}
  .face-center{width:min(39vw, 460px)}
}
@media (max-width:860px){
  .hero{padding:64px 10px calc(var(--safe-bottom) + 84px)}
  .logo-bg{width:130vw}
  .logo-bg-1{top:8%}
  .logo-bg-2{top:26%}
  .logo-bg-3{top:63%}
  .logo-bg-4{top:84%}
  .road-float{width:110vw; top:39%; opacity:.22}
  .quote{width:90px; opacity:.24}
  .quote-left{left:-3%; top:18%}
  .quote-right{right:-3%; top:18%}
  .sign-float{left:10%; top:56%; width:130px}
  .face{width:min(28vw, 210px)}
  .face-center{width:min(44vw, 300px); top:49%}
  .face-left{left:-7%; top:54%}
  .face-right{right:5%; top:55%}
  .face-far-right{right:-16%; top:54%}
  .logo-stack{width:min(100vw, 900px)}
  .tagline{font-size:.78rem; margin:-6px 0 10px}
  .social-dock img{width:46px; height:46px; border-radius:15px}
}
@media (max-width:620px){
  .topbar{padding-left:10px;padding-right:10px}
  .topbar span{font-size:.69rem}
  .hero{padding:58px 8px calc(var(--safe-bottom) + 80px)}
  .logo-bg{width:160vw; opacity:.28}
  .logo-bg-1{top:10%}
  .logo-bg-2{top:29%}
  .logo-bg-3{top:67%}
  .logo-bg-4{top:87%}
  .road-float{width:138vw; top:42%; opacity:.20; mask-image:radial-gradient(circle at 50% 52%, black 28%, transparent 70%); -webkit-mask-image:radial-gradient(circle at 50% 52%, black 28%, transparent 70%)}
  .face-left{left:-14%; top:57%; width:120px}
  .face-center{width:220px; top:56%}
  .face-right{right:3%; top:57%; width:126px}
  .face-far-right{right:-25%; top:57%; width:126px}
  .sign-float{left:6%; top:59%; width:106px; opacity:.75}
  .quote{width:66px; opacity:.20}
  .quote-left{left:-2%; top:19%}
  .quote-right{right:-2%; top:18%}
  .tagline{font-size:.72rem; max-width:28ch; margin:-4px 0 8px}
  .cta-row{gap:8px}
  .cta{min-height:44px; padding:6px 12px 6px 7px; font-size:.62rem; gap:8px}
  .cta img{width:30px; height:30px; border-radius:10px}
  .management{margin-top:10px; gap:7px; font-size:.58rem}
  .management-ig img{width:22px; height:22px; border-radius:7px}
  .social-dock{gap:5px; padding:6px; border-radius:20px; max-width:96vw}
  .social-dock img{width:40px; height:40px; border-radius:14px}
}
@media (max-width:390px){
  .face-center{width:206px}
  .sign-float{width:94px}
  .tagline{font-size:.69rem}
  .cta{font-size:.56rem}
  .management{font-size:.52rem}
  .social-dock img{width:37px; height:37px; border-radius:13px}
}
@media (max-height:760px){
  .face-center{top:54%}
  .road-float{top:40%}
  .social-dock{bottom:calc(var(--safe-bottom) + 10px)}
  .social-dock img{width:38px; height:38px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}