*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ===== CONTENT PROTECTION ===== */
/* Prevent drag-to-desktop on media assets */
video, img { -webkit-user-drag: none; user-drag: none; }
/* Prevent text selection on decorative / non-interactive content */
.hero-title, .hero-eyebrow, .truss-title, .truss-label,
.svc-title, .svc-eyebrow, .section-label { user-select: none; -webkit-user-select: none; }

#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 3px;
  background: var(--accent);
  z-index: 9999;
  pointer-events: none;
  transform-origin: left center;
}

:root {
  --accent: #1a6bff;
  --accent-glow: #3d8bff;
  --dark: #0a0a0f;
  --dark-surface: #12121a;
  --text-primary: #f0f0f5;
  --text-secondary: rgba(240,240,245,0.6);
  --text-muted: rgba(240,240,245,0.35);
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --nav-height: 72px;
}

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Safety net: if loader doesn't reach the edge due to iOS rendering,
     the html background (same colour) fills the gap instead of showing content */
  background: #0a0a0f;
}

body {
  font-family: var(--font-body);
  background: var(--dark);
  color: var(--text-primary);
  overflow: hidden; /* locked until loader finishes; JS restores overflow */
  -webkit-font-smoothing: antialiased;
}

/* ===== SECTIONS ===== */
.section {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.section-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 15, 0.65);
}

.section-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  padding: 0 48px;
}

/* ===== SCROLL ANIMATIONS — driven by GSAP ===== */

/* ===== GSAP ANIMATION DEFAULTS ===== */
.hero-eyebrow, .hero-title, .hero-subtitle, .hero-cta, .scroll-indicator {
  visibility: hidden;
}

/* GPU layer promotion — only for elements that move every scroll frame.
   Over-promoting exhausts Safari's tile budget; be selective. */
.section-bg {
  will-change: transform;
  /* Force compositing layer so Safari doesn't repaint on pin/unpin */
  transform: translateZ(0);
}


/* 3D-flip elements — backface-visibility prevents Safari flickering on rotationY */