/* Dirty~Max Darkside — design system */
:root{
  --asphalt:#0A0D11; --panel:#12161B; --line:#262C33;
  --beacon:#FFB020; --reef:#2CC6B0; --taillight:#E5484D;
  --bone:#F4F2ED; --dust:#98A0A8;
}
html{scroll-behavior:smooth}
body{background:var(--asphalt)}
::selection{background:var(--beacon);color:var(--asphalt)}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}

.beacon-dot{box-shadow:0 0 0 0 rgba(255,176,32,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,176,32,.55)}70%{box-shadow:0 0 0 11px rgba(255,176,32,0)}100%{box-shadow:0 0 0 0 rgba(255,176,32,0)}}
.red-dot{box-shadow:0 0 0 0 rgba(229,72,77,.6);animation:pulsered 1.6s infinite}
@keyframes pulsered{0%{box-shadow:0 0 0 0 rgba(229,72,77,.5)}70%{box-shadow:0 0 0 10px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}

.card-hover{transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s}
.card-hover:hover{transform:translateY(-4px);border-color:var(--beacon);box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}

.img-zoom{overflow:hidden}
.img-zoom img{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.img-zoom:hover img{transform:scale(1.05)}

.wave-div{display:block;width:100%;height:56px;color:var(--panel)}

.hafa{letter-spacing:.28em}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--beacon);outline-offset:2px}

/* chatbot */
#dm-chat{transition:opacity .25s,transform .25s;transform-origin:bottom right}
#dm-chat.closed{opacity:0;transform:scale(.96) translateY(8px);pointer-events:none}
.typing i{width:6px;height:6px;border-radius:9999px;background:var(--dust);display:inline-block;animation:tp 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* form steps */
.step{display:none}
.step.active{display:block;animation:fadein .35s ease}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* lightbox */
#lightbox{backdrop-filter:blur(6px)}

/* number ticker */
.tick{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .beacon-dot,.red-dot,.typing i{animation:none}
  .card-hover,.img-zoom img{transition:none}
}

/* ===== DARKSIDE LOGO-DRIVEN REDESIGN ===== */
:root{
  --dm-black:#070708;
  --dm-panel:#111114;
  --dm-panel-2:#17171b;
  --dm-red:#f2353f;
  --dm-red-deep:#8f1018;
  --dm-white:#f7f5f2;
  --dm-muted:#aaa6a6;
  --dm-line:rgba(255,255,255,.11);
}
body{background:var(--dm-black)!important;color:var(--dm-white)!important}
header{background:rgba(7,7,8,.95)!important;border-color:var(--dm-line)!important}
.brand-logo-link{display:flex;align-items:center;width:168px;height:58px;overflow:hidden}
.brand-logo-img{display:block;width:100%;height:100%;object-fit:contain;filter:contrast(1.08) saturate(1.04)}
@media(max-width:640px){.brand-logo-link{width:132px;height:50px}}
.bg-asphalt{background-color:var(--dm-black)!important}.bg-panel{background-color:var(--dm-panel)!important}
.border-line{border-color:var(--dm-line)!important}.text-beacon,.text-reef{color:var(--dm-red)!important}
.bg-beacon{background-color:var(--dm-red)!important}.border-beacon{border-color:var(--dm-red)!important}
.text-taillight{color:var(--dm-red)!important}.border-taillight{border-color:var(--dm-red)!important}.bg-taillight{background-color:var(--dm-red)!important}
.text-dust{color:var(--dm-muted)!important}
.reveal{transition-duration:.55s}

/* Hero becomes a bold performance-towing banner */
main>section:first-child{min-height:720px;display:flex;align-items:center;background:#080809}
main>section:first-child video{opacity:.58!important;filter:contrast(1.12) saturate(.78) brightness(.7)}
main>section:first-child .bg-gradient-to-r{background:linear-gradient(90deg,rgba(7,7,8,.98) 0%,rgba(7,7,8,.88) 45%,rgba(7,7,8,.28) 100%)!important}
main>section:first-child .bg-gradient-to-t{background:linear-gradient(0deg,#070708 0%,transparent 42%,rgba(7,7,8,.4) 100%)!important}
main>section:first-child h1{font-size:clamp(3.4rem,8vw,6.4rem)!important;line-height:.9!important;text-transform:uppercase;letter-spacing:-.045em;text-shadow:0 4px 40px rgba(0,0,0,.75)}
main>section:first-child h1 span{color:var(--dm-red)!important}
main>section:first-child .font-mono.text-xs{color:#fff!important;font-weight:700}
main>section:first-child p{font-size:1.05rem;max-width:570px;color:#d0cccc!important}
main>section:first-child a.bg-beacon{background:var(--dm-red)!important;color:#fff!important;border-radius:0!important;box-shadow:0 12px 34px rgba(242,53,63,.24)}
main>section:first-child a.bg-beacon:hover{background:#fff!important;color:#09090a!important}
main>section:first-child a.border-taillight{border-color:#fff!important;color:#fff!important;border-radius:0!important}
main>section:first-child a.border-taillight:hover{background:#fff!important;color:#09090a!important}

/* Cards and sections */
.rounded-lg,.rounded-xl{border-radius:3px!important}
.bg-panel\/90,.bg-\[\#12161B\]{background:rgba(17,17,20,.94)!important}
section{border-color:var(--dm-line)!important}
.shadow-2xl{box-shadow:0 30px 80px rgba(0,0,0,.45)!important}
.img-zoom img{filter:saturate(.82) contrast(1.08)}

/* Top status and navigation */
body>div:first-child{background:#0e0e10!important;border-color:var(--dm-line)!important}
nav a:hover{color:var(--dm-red)!important}
header a[href^="tel"]{background:var(--dm-red)!important;color:#fff!important;border-radius:0!important}
header a[href^="tel"]:hover{background:#fff!important;color:#09090a!important}

/* Chatbot: clearly visible, matched to logo */
#chat-launch{background:var(--dm-red)!important;border:2px solid #fff!important;color:#fff!important;box-shadow:0 14px 40px rgba(242,53,63,.38)!important}
#chat-badge{background:#fff!important;color:#0a0a0b!important;border:none!important;border-radius:2px!important;font-weight:800!important}
#dm-chat{background:#101012!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:4px!important}
#dm-chat .bg-\[\#FFB020\]{background:var(--dm-red)!important}
#dm-chat .text-\[\#FFB020\]{color:var(--dm-red)!important}
#dm-chat button.bg-\[\#FFB020\]{background:var(--dm-red)!important;color:#fff!important}

/* Mobile adjustments */
@media(max-width:768px){
  main>section:first-child{min-height:auto}
  main>section:first-child .relative.max-w-6xl{padding-top:52px!important;padding-bottom:70px!important}
  main>section:first-child h1{font-size:3.45rem!important}
  main>section:first-child .grid{gap:32px!important}
  main>section:first-child video{object-position:62% center}
}

/* Prevent iOS Safari's auto-zoom-on-focus, which fires on any text input
   under 16px. Chat widget and some labels use text-sm (14px) -- bump the
   effective input font size back to 16px on touch-width screens only, so
   desktop styling is untouched. */
@media(max-width:768px){
  input[type="text"],input[type="tel"],input[type="email"],input[type="search"],textarea,select{
    font-size:16px!important;
  }
}

/* Tap targets: keep every interactive control comfortably thumb-sized on
   touch screens (WCAG 2.5.5 / mobile UX baseline is ~44px). */
@media(max-width:768px){
  header nav a,.menu-btn,button,a.btn,a[href^="tel"],a[href^="sms"]{min-height:40px}
  .callbar a,.fixed.bottom-0 a{min-height:52px;display:flex;align-items:center;justify-content:center}
}

/* Avoid accidental horizontal scroll from any full-bleed element rounding error */
@media(max-width:768px){
  body{overflow-x:hidden}
}

/* ===== Splash: the Darkside mark owns the first screen ===== */
.splash{
  height:100svh;min-height:520px;
  display:flex;align-items:center;justify-content:center;
  padding:64px 20px 92px;
}
.splash-art{
  max-width:min(78vw,620px);max-height:72vh;width:auto;height:auto;object-fit:contain;
  animation:splashIn 1s cubic-bezier(.16,1,.3,1) both;
}
@keyframes splashIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.splash-cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  opacity:.85;transition:opacity .25s;animation:cueBob 2.2s ease-in-out infinite;
}
.splash-cue:hover{opacity:1}
@keyframes cueBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
@media (prefers-reduced-motion:reduce){
  .splash-art,.splash-cue{animation:none}
}
@media (max-width:640px){
  .splash{height:100svh;padding:56px 18px 84px}
  .splash-art{max-width:86vw;max-height:64vh}
}


/* Business name and Guam towing keyword at the opening splash */
.splash-brand-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;height:100%}
.splash-business-name{font-family:Oswald,sans-serif;font-size:clamp(2rem,5vw,4.75rem);font-weight:700;line-height:.95;text-transform:uppercase;letter-spacing:.015em;color:#f7f5f2;margin:0 0 10px;text-shadow:0 5px 35px rgba(0,0,0,.85)}
.splash-seo-line{font-family:"IBM Plex Mono",monospace;font-size:clamp(.68rem,1.4vw,.9rem);font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:#f2353f;margin:0 0 20px}
.splash-brand-wrap .splash-art{max-height:56vh}
@media(max-width:640px){.splash-business-name{font-size:2.2rem;max-width:330px}.splash-seo-line{font-size:.64rem;line-height:1.6;max-width:310px;margin-bottom:12px}.splash-brand-wrap .splash-art{max-height:50vh}}