/* Starting state */
.privacy-single-wrap {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Active state when visible */
.privacy-single-wrap.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Full-width bottom footer band */
.footer-bottom-full {
  width: 100%;
  background-color: #f4400f; /* Enginuous brand orange */
  text-align: center;
  padding: 1.5rem 1rem;
  color: #fff;
}

.footer-logo-full {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
}

.footer-time-mobile {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  letter-spacing: 0.3px;
}

/* Desktop refinement (if you want the full-width block visible on all devices) */
@media (min-width: 768px) {
  .footer-bottom-full {
    padding: 2rem 0;
  }

  .footer-time-mobile {
    font-size: 1rem;
  }
}

@media (max-width: 767px) {
  .footer-copytext {
    font-size: 0.65rem;
    opacity: 0.4;
    margin-top: 0.5rem;
    text-align: center; /* ✅ centers it */
    width: 100%; /* ensures full-width alignment space */
  }
}


/* Show CALL button on mobile and size to match 30px logo */
@media (max-width: 767px) {
  .nav-button-wrap .primary-button.desktop-on {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto;
    height: 30px; /* match logo height */
    padding: 0 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    line-height: 1;
    transform: none !important;
    position: relative !important;
    z-index: 999;
  }

  .primary-button.desktop-on .primary-btn-text {
    font-weight: 600;
    letter-spacing: 0.5px;
  }

  /* Make sure the nav button container doesn’t push layout */
  .nav-button-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0;
  }

  /* Optional: make it blend with your nav */
  .primary-button.desktop-on .primary-btn-bg {
    background-color: #f4400f; /* Enginuous orange */
  }

  /* If you want slightly tighter spacing between logo & button */
  .w-nav-menu, .w-nav-button, .nav-button-wrap {
    gap: 0.5rem;
  }
}

/* Rounded corners for background video section */
.work-v1-left-wrap .w-background-video,
.work-v1-left-wrap .w-background-video-atom,
.work-v1-left-wrap video {
  border-radius: 6px;
  overflow: hidden; /* ensures the video respects the rounded edge */
}

/* Preloader base styles */
#preloader {
  position: fixed;
  inset: 0;
  background-color: #0f0f0f; /* dark background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Preloader base styles */
#preloader {
  position: fixed;
  inset: 0;
  background-color: #0f0f0f; /* dark background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Enginuous logo with sharper chromatic aberration (no glow) */
.preloader-logo {
  width: 140px;
  height: auto;
  filter: drop-shadow(2px 0px 0px #ff0000)
          drop-shadow(-2px 0px 0px #00ffff);
  animation: pulseAberration 3s ease-in-out infinite;
}

/* Animate slight pulsing and shifting of offset */
@keyframes pulseAberration {
  0%, 100% {
    filter: drop-shadow(2px 0px 0px #ff0000)
            drop-shadow(-2px 0px 0px #00ffff);
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(3px 0px 0px #ff0044)
            drop-shadow(-3px 0px 0px #00ffee);
    transform: scale(1.05);
  }
}

/* Custom text selection highlight – Enginuous Orange */
::selection {
  background-color: #f4400f; /* your brand orange */
  color: #ffffff; /* make text readable */
}

::-moz-selection {
  background-color: #f4400f; /* Firefox support */
  color: #ffffff;
}

/* ==== Enginuous Scrollbar (fade in/out) ==== */

/* Base scrollbar styling */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* Orange thumb with transparency */
::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 6px;
  transition: opacity 0.4s ease, background-color 0.3s ease;
  opacity: 0; /* start hidden */
}

/* Hover style (slightly brighter) */
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 90, 38, 1);
}

/* When scrolling (class added via JS) */
body.scrolling ::-webkit-scrollbar-thumb {
  opacity: 1;
}

/* Firefox support */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 64, 15, 0.75) transparent;
}

/* ===== Custom Cursor (global hide + state styles) ===== */
:root{
  --cursor-size:18px;
  --cursor-border:2px;
  --cursor-color:#F43E14;
  --cursor-bg:rgba(244,62,20,0.12);

  /* Invert colours (footer etc.) */
  --cursor-color-invert:#fff;
  --cursor-bg-invert:rgba(255,255,255,.14);
}

.has-custom-cursor html,
.has-custom-cursor body { cursor: none; }

/* Kill ALL native cursors (link, I-beam, etc.) when enabled */
.has-custom-cursor * { cursor: none !important; }

#cursor{
  position:fixed; left:0; top:0;
  width:var(--cursor-size); height:var(--cursor-size);
  margin-left:calc(var(--cursor-size)/-2);
  margin-top: calc(var(--cursor-size)/-2);
  border-radius:50%;
  border:var(--cursor-border) solid var(--cursor-color);
  background:var(--cursor-bg);
  pointer-events:none;
  z-index:2147483647;

  /* Perf + crispness helpers */
  will-change: transform, opacity;
  backface-visibility: hidden;
  contain: layout paint style;

  /* Your JS writes translate3d(...)+scale(...) inline. We just animate it. */
  transform: translate3d(-100px,-100px,0) scale(1);
  transition: transform 60ms ease, opacity 120ms ease;
  opacity:0;
}
#cursor.is-hidden { opacity:0; }

/* State: link/button hover — your JS sets scale; we give the visual fill */
#cursor.is-link{
  background: var(--cursor-color);
  border-color: var(--cursor-color);
}

/* State: text/editable — show a slim I-beam inside the circle */
#cursor::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:2px; height:60%;
  transform:translate(-50%,-50%);
  background:var(--cursor-color);
  border-radius:1px;
  opacity:0; pointer-events:none;
}
#cursor.is-text::after{ opacity:1; }

/* Optional: while drag-selecting text, give subtle emphasis */
#cursor.is-drag{ border-style:dashed; opacity:0.9; }

/* Invert zones (footer, or anything with [data-cursor="invert"]) */
#cursor.is-invert{
  border-color:var(--cursor-color-invert);
  background:var(--cursor-bg-invert);
}
#cursor.is-invert::after{ background:var(--cursor-color-invert); }
#cursor.is-invert.is-link{
  background:var(--cursor-color-invert);
  border-color:var(--cursor-color-invert);
}

/* Touch devices: bail */
@media (pointer: coarse){
  #cursor{ display:none !important; }
}