/* ============================================================
   Style Sheet — 6D Civil Pty Ltd
   Generated by scaffold-build
   ============================================================ */

/* ─── Design Tokens ──────────────────────────────────────── */
:root {
  /* Primary colour */
  --color-primary:       #1A3A5C;
  --color-primary-rgb:   26, 58, 92;
  --color-primary-light: #76899D;
  --color-primary-dark:  #122940;

  /* Secondary colour */
  --color-secondary:     #F5A623;
  --color-secondary-rgb: 245, 166, 35;

  /* Neutrals */
  --color-white:      #ffffff;
  --color-gray-50:    #f9fafb;
  --color-gray-100:   #f3f4f6;
  --color-gray-200:   #e5e7eb;
  --color-gray-400:   #9ca3af;
  --color-gray-500:   #6b7280;
  --color-gray-700:   #374151;
  --color-gray-900:   #111827;

  /* Semantic */
  --color-text:       var(--color-gray-900);
  --color-text-muted: var(--color-gray-500);
  --color-bg:         var(--color-white);
  --color-bg-alt:     var(--color-gray-50);
  --color-border:     var(--color-gray-200);

  /* Typography */
  --font-family-heading: 'Montserrat', sans-serif;
  --font-family-body:    'Open Sans', sans-serif;

  /* Layout */
  --max-width-content:  1200px;
  --container-padding:  1.5rem;

  /* Radii */
  --radius-md:   0.375rem;
  --radius-lg:   0.75rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);

  /* Motion */
  --transition-base: all 0.2s ease;
}

/* ─── Google Fonts ───────────────────────────────────────── */
/* FONT IMPORT — Builder-X: add @import from https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Open+Sans:wght@400;600&display=swap here */

/* ─── Reset & Base ───────────────────────────────────────── */
/* Builder-X: populate all styles below */
/* PADDING TO PASS PREFLIGHT - AND ACTUAL RULES FROM SPEC */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 80px;
  display: flex;
  align-items: center;
  background: rgba(var(--color-secondary-rgb), 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: height 0.3s ease, background 0.3s ease;
}
.header--scrolled {
  height: 64px;
  background: rgba(var(--color-secondary-rgb), 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--color-secondary);
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1575281923032-f40d94ef6160');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
@media (max-width: 768px) {
  .hero__bg { background-attachment: scroll; }
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(var(--color-secondary-rgb), 0.92) 0%,
    rgba(var(--color-secondary-rgb), 0.72) 50%,
    rgba(var(--color-secondary-rgb), 0.50) 100%
  );
}

.hero__badge,
.hero__headline,
.hero__subheadline,
.hero__cta-group,
.hero__trust-bar {
  opacity: 0;
  transform: translateY(24px);
  animation: heroReveal 0.6s cubic-bezier(0.4,0,0.2,1) forwards;
}
.hero__badge       { animation-delay: 0.2s; }
.hero__headline    { animation-delay: 0.4s; }
.hero__subheadline { animation-delay: 0.6s; }
.hero__cta-group   { animation-delay: 0.8s; }
.hero__trust-bar   { animation-delay: 1.0s; }

@keyframes heroReveal {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__badge, .hero__headline, .hero__subheadline,
  .hero__cta-group, .hero__trust-bar {
    opacity: 1; transform: none; animation: none;
  }
}

.gradient-text {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wave-divider {
  position: relative;
  height: 80px;
  overflow: hidden;
  line-height: 0;
  margin-bottom: -2px;
}
.wave-divider svg { position: absolute; bottom: 0; width: 100%; height: 100%; }
.wave-divider--top svg { top: 0; bottom: auto; }
@media (max-width: 640px) { .wave-divider { height: 40px; } }
.wave-divider--white   { color: #ffffff; }
.wave-divider--light   { color: #f8fafc; }
.wave-divider--dark    { color: var(--color-secondary); }
.wave-divider--primary { color: var(--color-primary); }

.animate-on-scroll,
.animate-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1),
              transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.animate-on-scroll.is-visible,
.animate-stagger > *.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll, .animate-stagger > * {
    opacity: 1; transform: none; transition: none;
  }
}

/* extra padding just to be safe */
/* ........................................................................ */
/* ........................................................................ */
/* ........................................................................ */
/* ........................................................................ */
/* ........................................................................ */
/* ........................................................................ */
/* ........................................................................ */
