/*
 * DESIGN: "Ironwood Forge" — Military Steampunk Meets Verdigris Patina
 * Brand: Ironwood Construction Company LLC
 * Brand DNA: Camo textures, aged copper with green verdigris, steampunk gears & rivets,
 *            ironwood tree symbolism (strength, deep roots, family, community, ethics)
 * Colors: Verdigris Green, Aged Copper, Dark Wood, Camo Olive, Patina Teal
 * Fonts: Oswald (headings), Source Sans 3 (body), JetBrains Mono (accents)
 * Taglines: "One Call. One Contractor. Every Trade." / "No Job Too Small — We Do It All."
 */

:root {
  --color-copper: #B87333;
  --color-copper-light: #D4956B;
  --color-copper-dark: #8B5A2B;
  --color-verdigris: #2E8B7B;
  --color-verdigris-dark: #1A5C50;
  --color-verdigris-light: #4DB8A4;
  --color-charcoal: #1C1C1E;
  --color-charcoal-deep: #141414;
  --color-carhartt: #4A3728;
  --color-carhartt-light: #5E4A3A;
  --color-cream: #F5F0E8;
  --color-cream-dark: #E8DFD0;
  --color-amber: #D4A03C;
  --color-camo-olive: #4A5A3A;
  --color-camo-dark: #2A3A22;
  --color-wood: #3A2A1A;
  --color-wood-dark: #2A1A0A;
  --font-heading: 'Oswald', sans-serif;
  --font-body: 'Source Sans 3', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background-color: var(--color-charcoal-deep);
  color: var(--color-cream);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==================== COPPER & VERDIGRIS TEXT ==================== */

@keyframes copperShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.copper-text {
  background: linear-gradient(90deg,
    oklch(0.55 0.10 65) 0%, oklch(0.65 0.10 65) 20%,
    oklch(0.55 0.10 160) 50%, oklch(0.65 0.10 65) 80%,
    oklch(0.55 0.10 65) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: copperShimmer 6s ease-in-out infinite;
}

.copper-text-static {
  background: linear-gradient(135deg,
    oklch(0.55 0.10 65) 0%, oklch(0.65 0.10 65) 40%,
    oklch(0.55 0.10 160) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.verdigris-text {
  background: linear-gradient(135deg,
    oklch(0.55 0.10 160) 0%, oklch(0.65 0.10 160) 50%,
    oklch(0.50 0.08 140) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==================== EMBLEM ==================== */

@keyframes emblemGlow {
  0%, 100% { filter: drop-shadow(0 0 15px oklch(0.55 0.10 160 / 0.3)); }
  50% { filter: drop-shadow(0 0 30px oklch(0.55 0.10 160 / 0.5)); }
}

.emblem-glow { animation: emblemGlow 4s ease-in-out infinite; }

@keyframes copperSweep {
  0% { transform: translateX(-100%) rotate(15deg); }
  100% { transform: translateX(200%) rotate(15deg); }
}

.emblem-container { position: relative; overflow: hidden; display: inline-block; }

.emblem-container::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 50%; height: 200%;
  background: linear-gradient(90deg, transparent 0%, oklch(0.55 0.10 160 / 0.12) 50%, transparent 100%);
  animation: copperSweep 5s ease-in-out infinite;
  pointer-events: none;
}

/* ==================== GEAR ROTATION ==================== */

@keyframes gearSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes gearSpinReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }

.gear-spin { animation: gearSpin 30s linear infinite; }
.gear-spin-reverse { animation: gearSpinReverse 25s linear infinite; }

/* ==================== CIRCUIT TRACE ==================== */

@keyframes drawLine { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

.circuit-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.circuit-line.animate { animation: drawLine 2s ease-out forwards; }

/* ==================== REVEAL ANIMATIONS ==================== */

@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes metalFlash { 0% { opacity: 0; filter: brightness(2); } 30% { opacity: 1; filter: brightness(1.5); } 100% { opacity: 1; filter: brightness(1); } }

.reveal { opacity: 0; }
.reveal.visible { animation: fadeInUp 0.8s ease-out forwards; }
.reveal-left.visible { animation: fadeInLeft 0.8s ease-out forwards; }
.reveal-right.visible { animation: fadeInRight 0.8s ease-out forwards; }
.reveal-flash.visible { animation: metalFlash 0.6s ease-out forwards; }

.delay-1 { animation-delay: 0.1s !important; }
.delay-2 { animation-delay: 0.2s !important; }
.delay-3 { animation-delay: 0.3s !important; }
.delay-4 { animation-delay: 0.4s !important; }
.delay-5 { animation-delay: 0.5s !important; }
.delay-6 { animation-delay: 0.6s !important; }

/* ==================== SERVICE CARD — Riveted metal plate ==================== */

.service-card {
  background: linear-gradient(145deg, oklch(0.26 0.05 55), oklch(0.20 0.04 50));
  border: 1px solid oklch(0.55 0.10 160 / 0.25);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, oklch(0.55 0.10 160), oklch(0.55 0.10 65), oklch(0.55 0.10 160));
  transform: scaleX(0);
  transition: transform 0.4s ease;
  transform-origin: left;
}

.service-card:hover::before { transform: scaleX(1); }

.service-card:hover {
  border-color: oklch(0.55 0.10 160 / 0.5);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px oklch(0.55 0.10 160 / 0.12);
}

.service-card-image { transition: transform 0.6s ease; }
.service-card:hover .service-card-image { transform: scale(1.05); }

/* ==================== CTA BUTTON — Aged copper plate ==================== */

.cta-button {
  background: linear-gradient(135deg, oklch(0.55 0.10 65), oklch(0.48 0.10 60));
  color: oklch(0.13 0.02 50);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding: 0.875rem 2.5rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid oklch(0.55 0.10 65 / 0.3);
}

.cta-button::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.15), transparent);
  transition: left 0.5s ease;
}

.cta-button:hover::before { left: 100%; }

.cta-button:hover {
  box-shadow: 0 0 25px oklch(0.55 0.10 65 / 0.3);
  transform: translateY(-2px);
}

.cta-button-outline {
  border: 2px solid oklch(0.55 0.10 160);
  color: oklch(0.55 0.10 160);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding: 0.875rem 2.5rem;
  transition: all 0.3s ease;
  background: transparent;
}

.cta-button-outline:hover {
  background: oklch(0.55 0.10 160 / 0.1);
  box-shadow: 0 0 20px oklch(0.55 0.10 160 / 0.25);
}

/* ==================== STATS ==================== */

@keyframes tickerUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.stat-number {
  font-family: var(--font-mono);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.stat-number.animate { animation: tickerUp 0.6s ease-out forwards; }

/* ==================== DIVIDERS ==================== */

.copper-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, oklch(0.55 0.10 160), oklch(0.55 0.10 65), oklch(0.55 0.10 160), transparent);
}

.rivet {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, oklch(0.65 0.10 65), oklch(0.40 0.08 60));
  box-shadow: inset 0 1px 2px oklch(1 0 0 / 0.2), 0 1px 3px oklch(0 0 0 / 0.5);
}

.circuit-node {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: oklch(0.55 0.10 160);
  box-shadow: 0 0 10px oklch(0.55 0.10 160 / 0.5);
}

/* ==================== NAVBAR ==================== */

.navbar {
  backdrop-filter: blur(12px);
  background: oklch(0.17 0.04 50 / 0.92);
  border-bottom: 1px solid oklch(0.55 0.10 160 / 0.15);
  transition: all 0.3s ease;
}

.navbar.scrolled {
  background: oklch(0.14 0.04 50 / 0.97);
  box-shadow: 0 4px 20px oklch(0 0 0 / 0.4);
  border-bottom-color: oklch(0.55 0.10 65 / 0.2);
}

.nav-link {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  color: oklch(0.85 0.02 80);
  transition: color 0.3s ease;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: oklch(0.55 0.10 160);
  transition: width 0.3s ease;
}

.nav-link:hover { color: oklch(0.55 0.10 160); }
.nav-link:hover::after { width: 100%; }

/* ==================== HERO ==================== */

.hero-section {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    oklch(0.14 0.04 50 / 0.85) 0%,
    oklch(0.18 0.04 55 / 0.65) 40%,
    oklch(0.16 0.05 60 / 0.75) 100%);
  z-index: 1;
}

/* ==================== SECTION BACKGROUNDS ==================== */

.section-camo { position: relative; background-color: var(--color-charcoal-deep); }

.section-camo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-charcoal-deep);
  opacity: 0.20;
  pointer-events: none;
}

.section-camo.bg-loaded::before {
  background-image: url('https://d2xsxph8kpxj0f.cloudfront.net/310519663491876979/YbxGmZ5N6ZQ3jHbrskXMTG/camo_section_bg-VYB8ZR3SQVyth5cRR5mcZs.webp');
  background-size: cover;
  background-position: center;
}

.section-steampunk { position: relative; background-color: var(--color-charcoal); }

.section-steampunk::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-charcoal);
  opacity: 0.18;
  pointer-events: none;
}

.section-steampunk.bg-loaded::before {
  background-image: url('https://d2xsxph8kpxj0f.cloudfront.net/310519663491876979/YbxGmZ5N6ZQ3jHbrskXMTG/steampunk_about_bg-WabzkYwHjSDesQATBJoTgd.webp');
  background-size: cover;
  background-position: center;
}

.section-contact { position: relative; background-color: var(--color-charcoal-deep); }

.section-contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-charcoal-deep);
  opacity: 0.15;
  pointer-events: none;
}

.section-contact.bg-loaded::before {
  background-image: url('https://d2xsxph8kpxj0f.cloudfront.net/310519663491876979/YbxGmZ5N6ZQ3jHbrskXMTG/contact_bg-DhAn9sAxaA6gtGK3M9r9he.webp');
  background-size: cover;
  background-position: center;
}

/* ==================== DIAGONAL DIVIDERS ==================== */

.diagonal-top {
  clip-path: none;
  margin-top: 0;
  padding-top: 3rem;
}

@media (min-width: 768px) {
  .diagonal-top {
    clip-path: polygon(0 2%, 100% 0, 100% 100%, 0 100%);
    margin-top: -1.5rem;
    padding-top: 5rem;
  }
}

@media (min-width: 1024px) {
  .diagonal-top {
    clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 100%);
    margin-top: -2rem;
    padding-top: 6rem;
  }
}

.diagonal-bottom {
  clip-path: polygon(0 0, 100% 0, 100% 97%, 0 100%);
  padding-bottom: 3rem;
}

/* ==================== TEXTURE OVERLAY ==================== */

.texture-overlay { position: relative; }

.texture-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233D8B6E' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ==================== MOBILE MENU ==================== */

.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0;
}
.mobile-menu.open {
  transform: translateX(0);
  opacity: 1;
}

/* ==================== SCROLL PROGRESS ==================== */

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, oklch(0.55 0.10 160), oklch(0.55 0.10 65));
  z-index: 9999;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px oklch(0.55 0.10 160 / 0.5);
}

/* ==================== WHY CARDS ==================== */

.why-card {
  background: oklch(0.22 0.04 55 / 0.7);
  border: 1px solid oklch(0.55 0.10 160 / 0.15);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.why-card:hover {
  border-color: oklch(0.55 0.10 160 / 0.4);
  background: oklch(0.25 0.04 55 / 0.85);
}

/* ==================== GEAR DIVIDER ==================== */

.gear-divider-section {
  position: relative;
  height: 40px;
  overflow: hidden;
}

.gear-divider-section img {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  height: 120px;
  width: auto;
  opacity: 0.5;
}

/* ==================== FOOTER ==================== */

.footer-link { color: oklch(0.65 0.02 80); transition: color 0.3s ease; }
.footer-link:hover { color: oklch(0.55 0.10 160); }

/* ==================== TAGLINE BAR ==================== */

.tagline-bar {
  background: linear-gradient(90deg, oklch(0.25 0.05 55 / 0.6), oklch(0.30 0.06 60 / 0.7), oklch(0.25 0.05 55 / 0.6));
  border-top: 1px solid oklch(0.55 0.10 160 / 0.2);
  border-bottom: 1px solid oklch(0.55 0.10 65 / 0.2);
}

/* ==================== AREA & COMPETENCY TAGS ==================== */

.area-tag {
  background: oklch(0.25 0.05 55 / 0.6);
  border: 1px solid oklch(0.55 0.10 160 / 0.2);
  color: oklch(0.80 0.02 80);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  transition: all 0.3s ease;
}

.area-tag:hover {
  border-color: oklch(0.55 0.10 160 / 0.4);
  background: oklch(0.28 0.06 55 / 0.7);
}

.comp-tag {
  background: oklch(0.20 0.04 160 / 0.15);
  border: 1px solid oklch(0.55 0.10 160 / 0.2);
  color: oklch(0.80 0.02 80);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {
  .stat-number { font-size: 1.75rem; }
  .hero-section { min-height: 80vh; }
}

/* ==================== PULSE ==================== */

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 oklch(0.55 0.10 160 / 0.4); }
  50% { box-shadow: 0 0 0 12px oklch(0.55 0.10 160 / 0); }
}

.pulse-copper { animation: pulse 2s ease-in-out infinite; }

.parallax-bg { will-change: transform; }