/* David Rose site head CSS */

.nav-text {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
}



/* First-paint safety: show nothing but black/background until the site JavaScript has prepared the intro. */
html:not(.dcr-js-ready)::before {
  content: "";
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #000;
  z-index: 2147483646;
  pointer-events: none !important;
}

html:not(.dcr-js-ready) .side-nav,
html:not(.dcr-js-ready) .nav-text,
html:not(.dcr-js-ready) [data-main-nav],
html:not(.dcr-js-ready) [data-link],
html:not(.dcr-js-ready) .ig-link,
html:not(.dcr-js-ready) .center-name-wrapper,
html:not(.dcr-js-ready) .center-name-wrapper-opening,
html:not(.dcr-js-ready) .name-stack,
html:not(.dcr-js-ready) .subheadline,
html:not(.dcr-js-ready) .center-name-text-3,
html:not(.dcr-js-ready) .approach-overlay,
html:not(.dcr-js-ready) .approach-container,
html:not(.dcr-js-ready) .approach-text,
html:not(.dcr-js-ready) .approach-copy,
html:not(.dcr-js-ready) .approach-ig-link,
html:not(.dcr-js-ready) .approach-reveal-line,
html:not(.dcr-js-ready) .dcr-mobile-approach-back,
html:not(.dcr-js-ready) .contact-overlay,
html:not(.dcr-js-ready) .contact-modal,
html:not(.dcr-js-ready) .post-production-projects-panel,
html:not(.dcr-js-ready) .direction-projects-panel,
html:not(.dcr-js-ready) .colour-projects-panel,
html:not(.dcr-js-ready) .color-projects-panel,
html:not(.dcr-js-ready) .intro-overlay,
html:not(.dcr-js-ready) .w-form {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html:not(.dcr-js-ready) .side-nav *,
html:not(.dcr-js-ready) .approach-overlay *,
html:not(.dcr-js-ready) .approach-container *,
html:not(.dcr-js-ready) .contact-overlay *,
html:not(.dcr-js-ready) .post-production-projects-panel *,
html:not(.dcr-js-ready) .direction-projects-panel *,
html:not(.dcr-js-ready) .colour-projects-panel *,
html:not(.dcr-js-ready) .color-projects-panel * {
  pointer-events: none !important;
}

/* Contact Modal Styling */
.contact-modal {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 2rem;
}

.contact-modal input,
.contact-modal textarea {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: #fff;
  font-size: 0.95rem;
  width: 100%;
  margin-bottom: 1rem;
}

.contact-modal input::placeholder,
.contact-modal textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.contact-modal button {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-modal button:hover {
  background: rgba(255, 255, 255, 0.35);
}

.exit-contact,
.Exit-Contact,
.contact-close,
.close-contact,
[data-contact-close],
[data-w-id].exit-contact,
[data-w-id].Exit-Contact {
  cursor: pointer !important;
  pointer-events: auto !important;
}

html,
body {
  min-height: 100%;
  background: #000;
}

.hero-section {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
}

.hero-section::before,
.hero-section::after {
  content: "";
  position: fixed;
  top: -14vh;
  right: -14vw;
  bottom: -14vh;
  left: -14vw;
  width: auto;
  height: auto;
  pointer-events: none !important;
  z-index: 5;
}

.hero-section::before {
  background:
    radial-gradient(
      ellipse 68vw 82vh at 0% 0%,
      rgba(0, 0, 0, 0.42) 0%,
      rgba(0, 0, 0, 0.28) 24%,
      rgba(0, 0, 0, 0.13) 43%,
      rgba(0, 0, 0, 0) 70%
    );
  opacity: 0.95;
}

.hero-section::after {
  background:
    radial-gradient(
      ellipse 112vw 112vh at 100% 100%,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.44) 25%,
      rgba(0, 0, 0, 0.23) 48%,
      rgba(0, 0, 0, 0) 78%
    );
  opacity: 0;
  filter: brightness(1) saturate(1);
  transform: scale(1);
  transform-origin: 100% 100%;
  transition:
    opacity 2600ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 5200ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 6200ms cubic-bezier(0.13, 1, 0.22, 1);
  will-change: opacity, filter, transform;
}

html.projects-gradient-on .hero-section::after {
  opacity: 0.9;
  filter: brightness(1) saturate(1);
  transform: scale(1);
}

html.projects-gradient-on.projects-gradient-peak .hero-section::after {
  opacity: 1;
  filter: brightness(0.18) saturate(0.9);
  transform: scale(1.3);
  transition:
    opacity 1300ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 1900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 2400ms cubic-bezier(0.13, 1, 0.22, 1);
}


/* Mobile still fallback must never cover the desktop reel */
@media (min-width: 1025px), (hover: hover) and (pointer: fine) {
  .dcr-main-reel-mobile-still {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #main-reel {
    visibility: visible !important;
  }
}

@media (max-width: 1024px) {
  html,
  body {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    overflow-x: hidden;
    background: #000;
  }

  .hero-section {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    overflow: hidden;
    background: #000;
  }

  .video-blur-wrapper-2,
  .video-wrapper,
  .video-overlay {
    min-height: 100vh !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    height: 100vh !important;
    height: 100svh !important;
    height: 100dvh !important;
    background: #000 !important;
  }

  #main-reel,
  .dcr-main-reel-mobile-still {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  .hero-section::before,
  .hero-section::after {
    top: -18vh;
    right: -18vw;
    bottom: -18vh;
    left: -18vw;
  }
}

.side-nav {
  z-index: 100 !important;
}

.post-production-projects-panel,
.direction-projects-panel,
.colour-projects-panel,
.color-projects-panel {
  z-index: 90 !important;
}

.approach-overlay,
.approach-container,
.approach-text,
.approach-copy {
  pointer-events: none !important;
}

.approach-ig-link {
  pointer-events: auto !important;
}

.approach-overlay {
  z-index: 30 !important;
}

.contact-overlay {
  z-index: 120 !important;
}

.center-name-wrapper,
.center-name-wrapper-opening {
  z-index: 40 !important;
}