/* DFW Insulation — NewSite03 Artistic / high motion */



:root {

  --dfw-hot: #ee0a0a;

  --dfw-hot-rgb: 238, 10, 10;

  --dfw-deep: #08080a;

  --dfw-panel: #12121a;

  --dfw-glow: rgba(var(--dfw-hot-rgb), 0.45);

  --bs-danger: var(--dfw-hot);

  --bs-danger-rgb: var(--dfw-hot-rgb);

}



html {

  scroll-behavior: smooth;

  overflow-x: clip;

}



body {

  font-family: "Space Grotesk", system-ui, sans-serif;

  background: var(--dfw-deep);

  color: #e8e8ed;

  width: 100%;

  max-width: 100%;

  overflow-x: clip;

}



/* Grain overlay */

body::before {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 9999;

  opacity: 0.04;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

}



.navbar-art {

  background: rgba(8, 8, 10, 0.75) !important;

  backdrop-filter: blur(16px);

  border-bottom: 1px solid rgba(var(--dfw-hot-rgb), 0.15);

  transition: background 0.3s ease;

}



.navbar-art.scrolled {

  background: rgba(8, 8, 10, 0.95) !important;

}



.navbar-brand img {

  height: 38px;

  width: auto;

  filter: drop-shadow(0 0 12px var(--dfw-glow));

}



.nav-link {

  color: rgba(255, 255, 255, 0.75) !important;

  font-weight: 500;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  font-size: 0.75rem;

  position: relative;

}



.nav-link:hover,

.nav-link.active {

  color: #fff !important;

}



.nav-link::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 0;

  height: 2px;

  background: var(--dfw-hot);

  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);

}



.nav-link:hover::after,

.nav-link.active::after {

  width: 100%;

}



.hero-art {

  min-height: 100vh;

  position: relative;

  display: flex;

  align-items: center;

  overflow: hidden;

}



.hero-bg {

  position: absolute;

  inset: 0;

  background: url("../assets/hero-dallas-cityscape.png") center/cover no-repeat;

  transform: scale(1.08);

  will-change: transform;

}



.hero-bg::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(160deg, rgba(8, 8, 10, 0.2) 0%, rgba(8, 8, 10, 0.85) 55%, rgba(8, 8, 10, 0.95) 100%);

}



.hero-grid {

  position: absolute;

  inset: 0;

  background-image: linear-gradient(rgba(var(--dfw-hot-rgb), 0.06) 1px, transparent 1px),

    linear-gradient(90deg, rgba(var(--dfw-hot-rgb), 0.06) 1px, transparent 1px);

  background-size: 48px 48px;

  mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);

  pointer-events: none;

}



.hero-content {

  position: relative;

  z-index: 3;

}

.hero-copy {

  max-width: min(75%, 64rem);

}

.hero-copy .lead {

  max-width: 48rem;

}



.display-massive {

  font-family: "Bebas Neue", sans-serif;

  font-size: clamp(3.5rem, 14vw, 9rem);

  line-height: 0.92;

  letter-spacing: 0.02em;

  color: #fff;

  text-shadow: 0 0 60px rgba(var(--dfw-hot-rgb), 0.35);

}



.display-massive span {

  color: var(--dfw-hot);

  display: inline-block;

}



.floating-tag {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.5rem 1rem;

  border: 1px solid rgba(var(--dfw-hot-rgb), 0.4);

  border-radius: 999px;

  font-size: 0.75rem;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  animation: pulse-glow 3s ease-in-out infinite;

}



@keyframes pulse-glow {

  0%,

  100% {

    box-shadow: 0 0 0 0 rgba(var(--dfw-hot-rgb), 0.35);

  }

  50% {

    box-shadow: 0 0 28px 2px rgba(var(--dfw-hot-rgb), 0.2);

  }

}



.section-art {

  position: relative;

  padding: 6rem 0;

  overflow: hidden;

}



.section-art:nth-child(odd) .section-inner {

  transform-origin: center;

}



.clip-diagonal {

  clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);

  margin: -2rem 0;

}



.diagonal-bg {

  background: linear-gradient(135deg, var(--dfw-panel) 0%, rgba(var(--dfw-hot-rgb), 0.12) 100%);

  border-top: 1px solid rgba(var(--dfw-hot-rgb), 0.12);

  border-bottom: 1px solid rgba(var(--dfw-hot-rgb), 0.12);

}



.headline-stroke {

  font-family: "Bebas Neue", sans-serif;

  font-size: clamp(2.5rem, 7vw, 5rem);

  line-height: 1;

  color: transparent;

  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);

  letter-spacing: 0.04em;

}



.reveal {

  opacity: 0;

  transform: translateY(48px) scale(0.98);

  transition: opacity 0.85s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);

}



.reveal.is-visible {

  opacity: 1;

  transform: translateY(0) scale(1);

}



.reveal-stagger .reveal-child {

  opacity: 0;

  transform: translateY(32px);

  transition: opacity 0.7s ease, transform 0.7s ease;

}



.reveal-stagger.is-visible .reveal-child {

  opacity: 1;

  transform: translateY(0);

}



.reveal-stagger.is-visible .reveal-child:nth-child(1) {

  transition-delay: 0.05s;

}

.reveal-stagger.is-visible .reveal-child:nth-child(2) {

  transition-delay: 0.12s;

}

.reveal-stagger.is-visible .reveal-child:nth-child(3) {

  transition-delay: 0.19s;

}

.reveal-stagger.is-visible .reveal-child:nth-child(4) {

  transition-delay: 0.26s;

}



.card-glass {

  background: rgba(18, 18, 26, 0.75);

  border: 1px solid rgba(var(--dfw-hot-rgb), 0.18);

  border-radius: 1.25rem;

  backdrop-filter: blur(8px);

  transition: border-color 0.3s ease, transform 0.35s ease;

}



.card-glass:hover {

  border-color: rgba(var(--dfw-hot-rgb), 0.45);

  transform: translateY(-6px) rotate(-0.5deg);

}



.marquee-wrap {

  overflow: hidden;

  white-space: nowrap;

  border-block: 1px solid rgba(var(--dfw-hot-rgb), 0.2);

  padding: 0.85rem 0;

  margin: 2rem 0;

}



.marquee {

  display: inline-block;

  animation: marquee 70s linear infinite;

  font-family: "Bebas Neue", sans-serif;

  font-size: 1.25rem;

  letter-spacing: 0.15em;

  color: rgba(255, 255, 255, 0.25);

}



@keyframes marquee {

  0% {

    transform: translateX(0);

  }

  100% {

    transform: translateX(-50%);

  }

}



.parallax-float {

  position: fixed;

  width: 320px;

  height: 320px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(var(--dfw-hot-rgb), 0.25) 0%, transparent 70%);

  filter: blur(40px);

  pointer-events: none;

  will-change: transform;

}



.btn-danger-art {

  background: var(--dfw-hot);

  border: none;

  padding: 0.85rem 2rem;

  font-weight: 600;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  font-size: 0.8rem;

  box-shadow: 0 8px 32px rgba(var(--dfw-hot-rgb), 0.35);

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.btn-danger-art:hover {

  transform: scale(1.04);

  box-shadow: 0 12px 48px rgba(var(--dfw-hot-rgb), 0.45);

  background: var(--dfw-hot);

}

.btn-danger {

  --bs-btn-bg: var(--dfw-hot);

  --bs-btn-border-color: var(--dfw-hot);

  --bs-btn-hover-bg: var(--dfw-hot);

  --bs-btn-hover-border-color: var(--dfw-hot);

  --bs-btn-active-bg: var(--dfw-hot);

  --bs-btn-active-border-color: var(--dfw-hot);

  --bs-btn-disabled-bg: var(--dfw-hot);

  --bs-btn-disabled-border-color: var(--dfw-hot);

}



footer.site-footer-art {

  padding: 4rem 0 2rem;

  border-top: 1px solid rgba(var(--dfw-hot-rgb), 0.2);

  background: radial-gradient(ellipse at top, rgba(var(--dfw-hot-rgb), 0.08), transparent 50%), var(--dfw-deep);

}



.tilt-row:nth-child(even) {

  transform: rotate(0.3deg);

}



.tilt-row:nth-child(odd) {

  transform: rotate(-0.3deg);

}



@media (max-width: 767.98px) {

  .tilt-row {

    transform: none !important;

  }

}

@media (max-width: 991.98px) {

  .hero-copy {

    max-width: 100%;

  }

}



.tilt-row-reset {

  transform: none !important;

}

.work-title {

  font-family: "Bebas Neue", sans-serif;

  font-size: 1.35rem;

  font-weight: 400;

  letter-spacing: 0.04em;

}



.table-dark-art {

  --bs-table-bg: transparent;

  --bs-table-border-color: rgba(var(--dfw-hot-rgb), 0.15);

  color: #e0e0e8;

}



.table-dark-art tbody tr:hover {

  background: rgba(var(--dfw-hot-rgb), 0.06);

}



.hiring-flash {

  animation: hiring-blink 2s ease-in-out infinite;

}

.careers-section {

  position: relative;

  overflow: hidden;

}

.careers-band {

  position: relative;

  min-height: 42vh;

  padding: clamp(5rem, 10vw, 8rem) 1rem;

  display: flex;

  align-items: center;

  justify-content: center;

  background: url("../assets/careers-bg.png") center/cover no-repeat;

}

.careers-band::before {

  content: "";

  position: absolute;

  inset: 0;

  background: rgba(8, 8, 10, 0.75);

  z-index: 0;

}

.careers-copy.reveal,
.careers-copy.reveal.is-visible {

  position: relative;

  z-index: 1;

  transform: none;

}



@keyframes hiring-blink {

  0%,

  100% {

    opacity: 1;

  }

  50% {

    opacity: 0.65;

  }

}



/* Class used in markup for label tracking */

.letter-spacing {

  letter-spacing: 0.12em;

}