/* ============================================
   Theme: DeWalt Yellow — Industrial Rugged
   Layer on top of styles.css
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&display=swap');

:root {
  --font-serif: 'Barlow Condensed', 'Inter', sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --earth-50: #f5f2ed;
  --earth-100: #eeeae2;
  --earth-200: #ddd4c8;
  --earth-300: #c4b8a8;
  --earth-400: #a69482;
  --earth-500: #8a7662;
  --earth-600: #6e5c4a;
  --earth-700: #524230;
  --earth-800: #3a2e22;
  --earth-900: #221a12;
  --walnut: #ffe000;
  --walnut-light: #ffe866;
  --black: #1a1a1a;
  --white: #f8f6f0;
}

body {
  background: #f0ede8;
  color: #3a2e22;
}

::selection {
  background: #ffe000;
  color: #1a1a1a;
}

::-webkit-scrollbar-track { background: #f0ede8; }
::-webkit-scrollbar-thumb { background: #c4b8a8; }
::-webkit-scrollbar-thumb:hover { background: #ffe000; }

/* ── Custom Cursor ── */
.cursor-ring {
  border-color: #1a1a1a;
  mix-blend-mode: normal;
}
.cursor-dot { background: #ffe000; }
.cursor-ring.hovering {
  border-color: #ffe000;
  background: rgba(255, 224, 0, 0.08);
}
.cursor-dot.hovering { background: #ffe866; }

/* ── Navbar ── */
.navbar.scrolled {
  background: rgba(26, 26, 26, 0.95);
  border-bottom-color: rgba(255, 224, 0, 0.1);
}
.nav-link::after { background: #ffe000; }
.nav-link:hover, .nav-link.active { color: #ffe000; }
.nav-toggle span { background: #eeeae2; }
.nav-cta {
  border-color: rgba(255, 224, 0, 0.4);
  color: #ffe000;
  background: linear-gradient(to right, #1a1a1a 50%, transparent 50%);
  background-size: 202% 100%;
  background-position: 100% 0;
}
.nav-cta:hover {
  background-position: 0 0;
  border-color: #1a1a1a;
  background-color: #1a1a1a;
  color: #ffe000;
}

/* ── Mobile Menu ── */
.mobile-menu { background: #1a1a1a; }
.mobile-link {
  color: #c4b8a8;
  border-bottom-color: rgba(255, 224, 0, 0.04);
}
.mobile-link:hover { color: #ffe000; }
.mobile-cta {
  border-color: #ffe000;
  color: #ffe000;
}
.mobile-cta:hover {
  background: #ffe000;
  color: #1a1a1a;
  box-shadow: 0 4px 16px rgba(255, 224, 0, 0.3);
}

/* ── Section Shared ── */
.section-label { color: #ffe000; }
.walnut, .walnut-text { color: #ffe000 !important; }
.section-title { color: #1a1a1a; }

/* ── Hero ── */
.hero-alt { background: #1a1a1a; }
.hero-video-overlay {
  background: linear-gradient(135deg, rgba(26,26,26,0.8) 0%, rgba(26,26,26,0.35) 50%, rgba(26,26,26,0.9) 100%);
}
.hero-alt-badge-line { background: #ffe000; }
.hero-alt-title { color: #eeeae2; }
.hero-alt-title-accent { color: #ffe000; }
.hero-alt-desc { color: rgba(255, 255, 255, 0.5); }

.btn-alt-primary {
  background: #ffe000;
  color: #1a1a1a;
  border-color: #ffe000;
  font-weight: 700;
}
.btn-alt-primary:hover {
  background: #1a1a1a;
  color: #ffe000;
  border-color: #1a1a1a;
}
.btn-alt-secondary {
  border-color: rgba(255, 224, 0, 0.25);
  color: rgba(255, 224, 0, 0.7);
}
.btn-alt-secondary:hover {
  background: #ffe000;
  border-color: #ffe000;
  color: #1a1a1a;
}

.hero-arrow {
  border-color: rgba(255, 224, 0, 0.15);
  background: rgba(26, 26, 26, 0.6);
  color: rgba(255, 224, 0, 0.5);
}
.hero-arrow:hover {
  background: #ffe000;
  border-color: #ffe000;
  color: #1a1a1a;
}
.hero-dot { border-color: rgba(255, 224, 0, 0.3); }
.hero-dot:hover {
  border-color: #ffe000;
  background: #ffe000;
}
.hero-dot.active {
  background: #ffe000;
  border-color: #ffe000;
}

/* ── Marquee ── */
.marquee-section {
  border-top: 2px solid #1a1a1a;
  background: #f0ede8;
}
.marquee-item {
  color: rgba(26, 26, 26, 0.55);
  font-weight: 600;
}
.marquee-dot { color: #ffe000; }

/* ── Story ── */
.story-section { background: #f5f2ed; }
.story-text { color: rgba(58, 46, 34, 0.55); }
.stats-grid { border-top: 2px solid #1a1a1a; }
.stat-label { color: rgba(58, 46, 34, 0.3); }

/* ── Services ── */
.services-section {
  background: #f0ede8;
  border-top: 2px solid #1a1a1a;
}
.service-card {
  background: #f0ede8;
  border-right: 2px solid #1a1a1a;
}
.service-card:hover {
  background: #1a1a1a;
  color: #f0ede8;
}
.service-num { color: #ffe000; }
.service-line { background: rgba(26, 26, 26, 0.15); }
.service-card:hover .service-line { background: rgba(255, 224, 0, 0.3); }
.service-desc { color: rgba(58, 46, 34, 0.6); }
.service-card:hover .service-desc { color: rgba(255, 224, 0, 0.7); }
.service-card::before {
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 224, 0, 0.08) 0%, transparent 60%);
}

/* ── Slider Dots ── */
.slider-dot { background: #1a1a1a; opacity: 0.15; }
.slider-dot:hover { opacity: 0.3; }
.slider-dot.active {
  background: #ffe000;
  opacity: 1;
}

/* ── Categories ── */
.categories-section { background: #f5f2ed; }
.category-card { border-right: 2px solid rgba(26, 26, 26, 0.08); }
.category-image-wrap { background: #f8f6f0; }
.category-card:hover .category-title { color: #ffe000; }
..category-card:hover .category-sub { color: #ffe000; }

/* ── Social ── */
.social-section {
  background: #1a1a1a;
  color: #eeeae2;
}
.social-header .section-title.light { color: #eeeae2; }
.social-profile-link {
  border-color: rgba(255, 224, 0, 0.15);
  color: rgba(255, 224, 0, 0.6);
  background: linear-gradient(to right, #1a1a1a 50%, transparent 50%);
  background-size: 202% 100%;
  background-position: 100% 0;
}
.social-profile-link:hover {
  background-position: 0 0;
  border-color: #ffe000;
  color: #ffe000;
}
.social-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 224, 0, 0.06);
}
.social-card:hover {
  border-color: rgba(255, 224, 0, 0.3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.social-card-top { border-bottom-color: rgba(255, 224, 0, 0.04); }
.social-card-top:hover { background: rgba(255, 224, 0, 0.02); }
.sct-time { color: rgba(255, 224, 0, 0.2); }
.sc-caption { color: rgba(255, 255, 255, 0.55); }
.sc-stats { color: rgba(255, 224, 0, 0.25); }
.sc-stats span:hover { color: #ffe000; }
.social-section .slider-dot { background: rgba(255, 224, 0, 0.1); }
.social-section .slider-dot.active { background: #ffe000; }

/* ── Process ── */
.process-section::before {
  background: rgba(26, 26, 26, 0.2);
}
.process-section .section-title .italic,
.process-section .walnut { color: #ffe000; }
.process-section .section-label { color: rgba(255, 224, 0, 0.5); }
.step-inner {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 224, 0, 0.08);
}
.step-inner:hover {
  background: rgba(0, 0, 0, 0.2);
  border-color: #ffe000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.step-num { color: #ffe000; font-weight: 700; }
.process-step:hover .step-num {
  color: #ffe000;
  text-shadow: 0 0 20px rgba(255, 224, 0, 0.4), 0 0 50px rgba(255, 224, 0, 0.15);
}
.step-content { border-top: 1px solid rgba(255, 224, 0, 0.1); }
.step-title { color: #fff; font-weight: 600; }
.process-step:hover .step-title {
  color: #ffe000;
  text-shadow: none;
}
.step-desc { color: rgba(255, 255, 255, 0.7); }
.process-step:hover .step-desc {
  color: #fff;
  text-shadow: 0 0 16px rgba(0, 0, 0, 0.7);
}

/* ── Gallery ── */
.gallery-section { background: #f5f2ed; }
.gallery-card-overlay {
  background: linear-gradient(to top, rgba(26, 26, 26, 0.85) 0%, transparent 45%);
}
.gallery-card-cat { color: #ffe000; }
.gallery-card:hover .gallery-card-inner {
  box-shadow: 12px 16px 40px rgba(26, 26, 26, 0.15);
}

/* ── Lightbox ── */
.lightbox {
  background: rgba(26, 26, 26, 0.98);
  backdrop-filter: blur(12px);
}
.lightbox-close { color: #c4b8a8; }
.lightbox-close:hover { color: #ffe000; }
.lightbox-prev, .lightbox-next { color: rgba(255, 224, 0, 0.15); }
.lightbox-prev:hover, .lightbox-next:hover {
  color: #ffe000;
  text-shadow: 0 0 24px rgba(255, 224, 0, 0.4);
}
.lightbox-counter { color: rgba(255, 224, 0, 0.2); }

/* ── CTA ── */
.cta-inner {
  background: #1a1a1a;
  color: #eeeae2;
}
.cta-btn {
  background: #ffe000;
  color: #1a1a1a;
  font-weight: 700;
}
.cta-btn:hover {
  background: #ffe866;
  color: #1a1a1a;
  box-shadow: 0 10px 30px rgba(255, 224, 0, 0.35);
}

/* ── Contact ── */
.contact-section {
  background: #f5f2ed;
  border-top: 2px solid #1a1a1a;
}
.contact-desc { color: rgba(58, 46, 34, 0.55); }
.contact-row { border-bottom: 1px solid rgba(26, 26, 26, 0.1); }
a.contact-row:hover .contact-value { color: #ffe000; }
.contact-label { color: rgba(26, 26, 26, 0.35); }
.contact-social { border-top: none; }
.contact-social-label { color: rgba(26, 26, 26, 0.35); }
.contact-social-link {
  background: #1a1a1a;
  color: #ffe000;
}
.contact-social-link:hover {
  background: #ffe000;
  color: #1a1a1a;
}

.contact-form {
  background: #f8f6f0;
  border: 2px solid #1a1a1a;
  box-shadow: none;
}
.form-label { color: rgba(26, 26, 26, 0.4); }
.form-input {
  border-bottom: 2px solid rgba(26, 26, 26, 0.15);
  color: #1a1a1a;
}
.form-input:focus { border-bottom-color: #ffe000; }
.form-input::placeholder { color: rgba(26, 26, 26, 0.15); }
.form-submit {
  background: #1a1a1a;
  color: #ffe000;
}
.form-submit::before { background: linear-gradient(90deg, transparent, rgba(255, 224, 0, 0.08), transparent); }
.form-submit:hover {
  background: #ffe000;
  color: #1a1a1a;
  box-shadow: 0 8px 24px rgba(255, 224, 0, 0.35);
}
.spinner { border-top-color: #ffe000; }
.form-success {
  background: rgba(255, 224, 0, 0.08);
  border: 1px solid #ffe000;
  color: #ffe000;
}
.success-icon {
  background: #ffe000;
  color: #1a1a1a;
}

/* ── Footer ── */
.footer {
  background: #1a1a1a;
  color: #eeeae2;
  border-top: 2px solid #ffe000;
}
.footer-desc { color: rgba(255, 255, 255, 0.4); }
.footer-heading { color: #ffe000; }
.footer-links a { color: rgba(255, 255, 255, 0.5); }
.footer-links a:hover { color: #ffe000; }
.footer-bottom {
  border-top: 1px solid rgba(255, 224, 0, 0.08);
  color: rgba(255, 224, 0, 0.25);
}
.footer-legal a { color: inherit; }
.footer-legal a:hover { color: #ffe000; }

/* ── Back to Top ── */
.back-to-top {
  background: #1a1a1a;
  color: #ffe000;
}
.back-to-top:hover {
  background: #ffe000;
  color: #1a1a1a;
  box-shadow: 0 8px 24px rgba(255, 224, 0, 0.5);
}