/* =========================
   MachDomes Complete CSS Stylesheet - START
   Features: Refined cards, increased Calhoun section, responsive design
========================== */

/* ========================= 1. Design Tokens - START ========================== */
:root {
  --red: #C8192E;
  --red-dark: #A31224;
  --navy: #0A1B2A;
  --charcoal: #121212;
  --gray: #40474F;
  --white: #FFFFFF;
  --light: #F4F4F4;
  --text-dark: #1A1A1A;
  --text-light: #F4F4F4;
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  --container: max(92%, min(1200px, 92%));
  --header-height: 80px;
  --section-padding: clamp(56px, 6vw, 96px);
  --gap-sm: 14px;
  --gap-md: 22px;
  --gap-lg: 28px;
}
/* ========================= 1. Design Tokens - END ========================== */

/* ========================= 2. Base Styles - START ========================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--white);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 6px;
}
/* ========================= 2. Base Styles - END ========================== */

/* ========================= 3. Layout Components - START ========================== */
.container {
  width: var(--container);
  margin-inline: auto;
}

section {
  padding-block: var(--section-padding);
}

.section-head {
  text-align: center;
  margin-bottom: var(--gap-lg);
}

.section-head h2 {
  margin-bottom: 10px;
}

.section-head p {
  max-width: 70ch;
  margin: 10px auto 0;
}

/* Content Grid - Auto-adjusts based on number of content blocks */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap-lg);
  max-width: 1200px;
  margin: 0 auto;
}

/* Force 2-column max for pages with only 2 content blocks - DESKTOP ONLY */
@media (min-width: 769px) {
  .content-grid:has(.content-block:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
  }
}

/* Mobile: Always single column */
@media (max-width: 768px) {
  .content-grid {
    grid-template-columns: 1fr !important;
    gap: var(--gap-md);
  }
}

/* Scroll margin for anchor links */
section[id] {
  scroll-margin-top: calc(var(--header-height) + 20px);
}
/* ========================= 3. Layout Components - END ========================== */

/* ========================= 4. Typography - START ========================== */
h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0 0 10px 0;
  color: var(--text-dark);
}

h1 {
  font-size: clamp(2rem, 1.2rem + 3vw, 3rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(1.5rem, 1rem + 2vw, 2rem);
  font-weight: 700;
}

h3 {
  font-size: clamp(1.125rem, 0.9rem + 1.2vw, 1.5rem);
  font-weight: 700;
}

.lead {
  font-size: 1.125rem;
  line-height: 1.5;
}
/* ========================= 4. Typography - END ========================== */

/* ========================= 5. Buttons & Links - START ========================== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: var(--white);
  padding: 14px 28px;
  border-radius: 6px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  min-height: 44px;
  border: none;
  transition: background-color 0.2s ease;
}

.button:hover {
  background: var(--red-dark);
}

.button-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
  padding: 12px 26px;
  border-radius: 6px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  min-height: 44px;
  transition: all 0.2s ease;
}

.button-outline:hover {
  background: var(--white);
  color: var(--navy);
}

.link-quiet {
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  color: var(--light);
  transition: color 0.2s ease;
}

.link-quiet:hover {
  color: var(--white);
}
/* ========================= 5. Buttons & Links - END ========================== */

/* ========================= 6. Header & Navigation - START ========================== */
.site-header {
 position: sticky;
 top: 0;
 z-index: 1000;
 background: var(--navy);
}

.header-inner {
 height: var(--header-height);
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 padding-block: 8px;
}

.logo {
 display: flex;
 align-items: center;
 gap: 12px;
}

.logo a {
 display: flex;
 align-items: center;
 gap: 12px;
 color: var(--white);
 text-decoration: none;
}

.logo-img {
 width: 64px;
 height: 64px;
 object-fit: contain;
 flex-shrink: 0;
}

.logo-text {
 font-family: var(--font);
 font-weight: 700;
 font-size: 1.5rem;
 color: var(--white);
 text-transform: uppercase;
}

.primary-nav {
 display: flex;
 align-items: center;
 gap: var(--gap-lg);
}

.primary-nav a {
 color: var(--white);
 transition: color 0.2s ease;
}

.primary-nav a:hover {
 color: var(--light);
}

.primary-nav a.active {
 color: var(--red);
 font-weight: 600;
}

.nav-cta .button {
 padding: 10px 18px;
}

.nav-toggle {
 display: none;
 appearance: none;
 background: none;
 border: 0;
 color: var(--white);
 flex-direction: column;
 gap: 4px;
}

.nav-toggle .bar {
 display: block;
 width: 26px;
 height: 2px;
 background: var(--white);
 transition: transform 0.2s ease;
}

/* Mobile Navigation - Updated logo size to 1.35rem */
@media (max-width: 900px) {
 .logo-text {
   font-size: 1.35rem;
 }

 .nav-toggle {
   display: flex;
 }

 .primary-nav {
   position: fixed;
   inset: var(--header-height) 0 0 0;
   background: var(--navy);
   transform: translateY(-110%);
   transition: transform 0.25s ease;
   flex-direction: column;
   align-items: flex-start;
   padding: 20px;
   gap: 18px;
 }

 .site-header.open .primary-nav {
   transform: translateY(0);
 }

 .nav-cta .button {
   width: 100%;
 }
}

/* Tablet Navigation - Updated logo size to 1.6rem */
@media (min-width: 768px) and (max-width: 1023px) {
 .logo-text {
   font-size: 1.6rem;
 }
}

/* Desktop Navigation - Updated logo size to 1.8rem */
@media (min-width: 1024px) {
 .logo-text {
   font-size: 1.8rem;
 }
}
/* ========================= 6. Header & Navigation - END ========================== */

/* ========================= 7. Parallax Sections - START ========================== */
.parallax {
  position: relative;
  color: var(--text-light);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.parallax::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 27, 42, 0.75);
}

.parallax > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px),
       (prefers-reduced-motion: reduce) {
  .parallax {
    background-attachment: scroll;
  }
}

#contact {
  background-image: url('/images/home/contact-parallax.avif');
}
/* ========================= 7. Parallax Sections - END ========================== */

/* ========================= 8. Hero Section - START ========================== */
#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-image: url('/images/home/hero-mobile.avif');
}

@supports (height: 100svh) {
  #hero {
    min-height: 100svh;
  }
}

@media (min-width: 768px) {
  #hero {
    background-image: url('/images/home/hero-tablet.avif');
  }
}

@media (min-width: 1024px) {
  #hero {
    background-image: url('/images/home/hero-desktop.avif');
  }
}

.hero-content {
  max-width: 900px;
}

.hero-eyebrow {
  display: inline-block;
  color: var(--light);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.hero-title {
  color: var(--white);
  margin-bottom: 10px;
}

.hero-sub {
  color: var(--light);
  max-width: 70ch;
  margin-bottom: 24px;
}

.hero-actions {
  display: flex;
  gap: var(--gap-sm);
  flex-wrap: wrap;
}
/* ========================= 8. Hero Section - END ========================== */

/* ========================= 9. Footer Section - START ========================== */
.footer {
  background: var(--navy);
  color: var(--light);
  padding: var(--gap-lg) 0 var(--gap-md);
}

.footer h4 {
  color: var(--white);
  margin-bottom: 12px;
}

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer li {
  margin-bottom: 8px;
}

.footer a {
  color: var(--light);
  transition: color 0.2s ease;
}

.footer a:hover {
  color: var(--white);
}

.subfooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--gap-md);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .subfooter {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}
/* ========================= 9. Footer Section - END ========================== */

/* ========================= 10. Services Section - START ========================== */
#services {
  background: var(--navy);
  color: var(--text-light);
}

#services .section-head h2 {
  color: var(--white);
}

#services .section-head p {
  color: var(--light);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.service-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 28px 24px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  text-decoration: none;
  color: inherit;
  backdrop-filter: blur(3px);
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  border-color: var(--red);
}

.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 27, 42, 0.75);
  border-radius: 16px;
  z-index: 1;
  transition: background 0.3s ease;
}

.service-card:hover::before {
  background: rgba(10, 27, 42, 0.6);
}

.service-card::after {
  content: '→';
  position: absolute;
  top: 24px;
  right: 24px;
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 600;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
  z-index: 3;
}

.service-card:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.service-card > * {
  position: relative;
  z-index: 2;
}

.service-card h3 {
  color: var(--white);
  margin-bottom: 12px;
  transition: color 0.3s ease;
}

.service-card:hover h3 {
  color: var(--white);
}

.service-card p {
  color: var(--light);
  font-size: 0.95rem;
  flex-grow: 1;
  transition: color 0.3s ease;
}

.service-card:hover p {
  color: var(--white);
}

/* Service Card Backgrounds - Desktop */
@media (min-width: 1024px) {
  .service-card[data-service="domes"] {
    background-image: url('/images/shared/services/domes-card-desktop.avif');
  }
  .service-card[data-service="covers"] {
    background-image: url('/images/shared/services/covers-card-desktop.avif');
  }
  .service-card[data-service="installation"] {
    background-image: url('/images/shared/services/installation-card-desktop.avif');
  }
  .service-card[data-service="finance"] {
    background-image: url('/images/shared/services/finance-card-desktop.avif');
  }
}

/* Service Card Backgrounds - Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .service-card[data-service="domes"] {
    background-image: url('/images/shared/services/domes-card-tablet.avif');
  }
  .service-card[data-service="covers"] {
    background-image: url('/images/shared/services/covers-card-tablet.avif');
  }
  .service-card[data-service="installation"] {
    background-image: url('/images/shared/services/installation-card-tablet.avif');
  }
  .service-card[data-service="finance"] {
    background-image: url('/images/shared/services/finance-card-tablet.avif');
  }
}

/* Service Card Backgrounds - Mobile */
@media (max-width: 767px) {
  .service-card[data-service="domes"] {
    background-image: url('/images/shared/services/domes-card-mobile.avif');
  }
  .service-card[data-service="covers"] {
    background-image: url('/images/shared/services/covers-card-mobile.avif');
  }
  .service-card[data-service="installation"] {
    background-image: url('/images/shared/services/installation-card-mobile.avif');
  }
  .service-card[data-service="finance"] {
    background-image: url('/images/shared/services/finance-card-mobile.avif');
  }
}
/* ========================= 10. Services Section - END ========================== */

/* ========================= 11. Why Section - START ========================== */
#pourquoi {
  background-image: url('/images/home/calhoun-parallax.avif');
  padding-block: clamp(80px, 10vw, 150px);
  min-height: 70vh;
}

#pourquoi .section-head {
  text-align: left;
  margin-bottom: 18px;
}

#pourquoi h2,
#pourquoi h3,
#pourquoi p {
  color: var(--white);
}

#pourquoi .section-head p {
  color: var(--light);
  margin-top: 6px;
}

.bullets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.bullet {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 24px 20px;
  backdrop-filter: blur(5px);
}

.bullet h3 {
  margin-bottom: 12px;
  font-size: 1.1rem;
  font-weight: 600;
}

.bullet p {
  margin: 0;
  line-height: 1.5;
  font-size: 0.95rem;
}

/* Responsive adjustments for optimal display */
@media (min-width: 1200px) {
  .bullets {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .bullets {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .bullets {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .bullet {
    padding: 20px 18px;
  }
}

@media (max-width: 480px) {
  .bullet {
    padding: 18px 16px;
  }
  
  .bullet h3 {
    font-size: 1rem;
  }
  
  .bullet p {
    font-size: 0.9rem;
  }
}
/* ========================= 11. Why Section - END ========================== */

/* ========================= 12. Industries Section - START ========================== */
#industries {
  background: var(--navy);
  color: var(--text-light);
}

#industries .section-head {
  text-align: center;
  margin-bottom: var(--gap-lg);
}

#industries .section-head h2 {
  color: var(--white);
}

#industries .section-head p {
  color: var(--light);
  max-width: 70ch;
  margin: 10px auto 0;
}

.industries-grid-enhanced {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .industries-grid-enhanced {
    grid-template-columns: repeat(3, 1fr);
  }
}

.industry-card-enhanced {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  backdrop-filter: blur(3px);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.industry-card-enhanced:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
  border-color: var(--red);
}

.industry-card-enhanced::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 27, 42, 0.75);
  border-radius: 16px;
  z-index: 1;
  transition: background 0.3s ease;
}

.industry-card-enhanced:hover::before {
  background: rgba(10, 27, 42, 0.6);
}

.industry-card-enhanced::after {
  content: '→';
  position: absolute;
  top: 24px;
  right: 24px;
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 600;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
  z-index: 3;
}

.industry-card-enhanced:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.industry-card-enhanced > * {
  position: relative;
  z-index: 2;
}

.industry-card-enhanced h3 {
  color: var(--white);
  margin-bottom: 12px;
  font-size: 1.25rem;
}

.industry-summary {
  color: var(--light);
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 16px;
  transition: color 0.3s ease;
}

.industry-card-enhanced:hover .industry-summary {
  color: var(--white);
}

.industry-details {
  color: var(--light);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: 16px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s ease;
}

.industry-card-enhanced.expanded .industry-details {
  max-height: 200px;
  opacity: 1;
}

.industry-toggle {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--light);
  padding: 10px 18px;
  border-radius: 24px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  width: 100%;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.industry-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--white);
}

.toggle-icon {
  transition: transform 0.3s ease;
}

.industry-card-enhanced.expanded .toggle-icon {
  transform: rotate(45deg);
}

/* Industry Card Backgrounds - Desktop */
@media (min-width: 1024px) {
  .industry-card-enhanced[data-industry="agriculture"] {
    background-image: url('/images/shared/industries/agriculture-card-desktop.avif');
  }
  .industry-card-enhanced[data-industry="warehouse"] {
    background-image: url('/images/shared/industries/warehouse-card-desktop.avif');
  }
  .industry-card-enhanced[data-industry="municipal"] {
    background-image: url('/images/shared/industries/municipal-card-desktop.avif');
  }
  .industry-card-enhanced[data-industry="mining"] {
    background-image: url('/images/shared/industries/mining-card-desktop.avif');
  }
  .industry-card-enhanced[data-industry="energy"] {
    background-image: url('/images/shared/industries/energy-card-desktop.avif');
  }
  .industry-card-enhanced[data-industry="aviation"] {
    background-image: url('/images/shared/industries/aviation-card-desktop.avif');
  }
  .industry-card-enhanced[data-industry="sports"] {
    background-image: url('/images/shared/industries/sports-card-desktop.avif');
  }
  .industry-card-enhanced[data-industry="commercial"] {
    background-image: url('/images/shared/industries/commercial-card-desktop.avif');
  }
  .industry-card-enhanced[data-industry="manufacturing"] {
    background-image: url('/images/shared/industries/manufacturing-card-desktop.avif');
  }
}

/* Industry Card Backgrounds - Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .industry-card-enhanced[data-industry="agriculture"] {
    background-image: url('/images/shared/industries/agriculture-card-tablet.avif');
  }
  .industry-card-enhanced[data-industry="warehouse"] {
    background-image: url('/images/shared/industries/warehouse-card-tablet.avif');
  }
  .industry-card-enhanced[data-industry="municipal"] {
    background-image: url('/images/shared/industries/municipal-card-tablet.avif');
  }
  .industry-card-enhanced[data-industry="mining"] {
    background-image: url('/images/shared/industries/mining-card-tablet.avif');
  }
  .industry-card-enhanced[data-industry="energy"] {
    background-image: url('/images/shared/industries/energy-card-tablet.avif');
  }
  .industry-card-enhanced[data-industry="aviation"] {
    background-image: url('/images/shared/industries/aviation-card-tablet.avif');
  }
  .industry-card-enhanced[data-industry="sports"] {
    background-image: url('/images/shared/industries/sports-card-tablet.avif');
  }
  .industry-card-enhanced[data-industry="commercial"] {
    background-image: url('/images/shared/industries/commercial-card-tablet.avif');
  }
  .industry-card-enhanced[data-industry="manufacturing"] {
    background-image: url('/images/shared/industries/manufacturing-card-tablet.avif');
  }
}

/* Industry Card Backgrounds - Mobile */
@media (max-width: 767px) {
  .industry-card-enhanced[data-industry="agriculture"] {
    background-image: url('/images/shared/industries/agriculture-card-mobile.avif');
  }
  .industry-card-enhanced[data-industry="warehouse"] {
    background-image: url('/images/shared/industries/warehouse-card-mobile.avif');
  }
  .industry-card-enhanced[data-industry="municipal"] {
    background-image: url('/images/shared/industries/municipal-card-mobile.avif');
  }
  .industry-card-enhanced[data-industry="mining"] {
    background-image: url('/images/shared/industries/mining-card-mobile.avif');
  }
  .industry-card-enhanced[data-industry="energy"] {
    background-image: url('/images/shared/industries/energy-card-mobile.avif');
  }
  .industry-card-enhanced[data-industry="aviation"] {
    background-image: url('/images/shared/industries/aviation-card-mobile.avif');
  }
  .industry-card-enhanced[data-industry="sports"] {
    background-image: url('/images/shared/industries/sports-card-mobile.avif');
  }
  .industry-card-enhanced[data-industry="commercial"] {
    background-image: url('/images/shared/industries/commercial-card-mobile.avif');
  }
  .industry-card-enhanced[data-industry="manufacturing"] {
    background-image: url('/images/shared/industries/manufacturing-card-mobile.avif');
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .industries-grid-enhanced {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .industry-card-enhanced {
    padding: 24px 20px;
  }
  
  .industry-card-enhanced h3 {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .industry-card-enhanced {
    padding: 20px 16px;
  }
}
/* ========================= 12. Industries Section - END ========================== */

/* ========================= 13. Domes Page Styling - START ========================== */

/* Navy Background - Applied to Sections Without Images */
#overview,
#maintenance {
background: var(--navy) !important;
color: var(--white) !important;
}

/* Hero Section - Add Overlay to Main CSS Background Image */
#service-hero {
position: relative;
color: var(--white) !important;
}

#service-hero::before {
content: "";
position: absolute;
inset: 0;
background: rgba(10, 27, 42, 0.6);
z-index: 1;
}

#service-hero .container {
position: relative;
z-index: 2;
}

/* Features Section - Custom Background with Galvanization Image */
#features {
background-image: linear-gradient(rgba(10, 27, 42, 0.8), rgba(10, 27, 42, 0.8)), url('/images/domes/domes-galvanization-mobile.avif');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: var(--white) !important;
}

@media (min-width: 481px) {
#features {
 background-image: linear-gradient(rgba(10, 27, 42, 0.8), rgba(10, 27, 42, 0.8)), url('/images/domes/domes-galvanization-tablet.avif');
}
}

@media (min-width: 769px) {
#features {
 background-image: linear-gradient(rgba(10, 27, 42, 0.8), rgba(10, 27, 42, 0.8)), url('/images/domes/domes-galvanization-desktop.avif');
}
}

@media (min-width: 1441px) and (-webkit-min-device-pixel-ratio: 2) {
#features {
 background-image: linear-gradient(rgba(10, 27, 42, 0.8), rgba(10, 27, 42, 0.8)), url('/images/domes/domes-galvanization-retina.avif');
}
}

/* Specifications Section - Custom Background with Interior Span Image */
#specifications {
background-image: linear-gradient(rgba(10, 27, 42, 0.8), rgba(10, 27, 42, 0.8)), url('/images/domes/domes-interior-span-mobile.avif');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: var(--white) !important;
}

@media (min-width: 481px) {
#specifications {
 background-image: linear-gradient(rgba(10, 27, 42, 0.8), rgba(10, 27, 42, 0.8)), url('/images/domes/domes-interior-span-tablet.avif');
}
}

@media (min-width: 769px) {
#specifications {
 background-image: linear-gradient(rgba(10, 27, 42, 0.8), rgba(10, 27, 42, 0.8)), url('/images/domes/domes-interior-span-desktop.avif');
}
}

@media (min-width: 1441px) and (-webkit-min-device-pixel-ratio: 2) {
#specifications {
 background-image: linear-gradient(rgba(10, 27, 42, 0.8), rgba(10, 27, 42, 0.8)), url('/images/domes/domes-interior-span-retina.avif');
}
}

/* Process Section - Custom Background with Process Image */
#process {
background-image: linear-gradient(rgba(10, 27, 42, 0.8), rgba(10, 27, 42, 0.8)), url('/images/domes/domes-process-mobile.avif');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: var(--white) !important;
}

@media (min-width: 481px) {
#process {
 background-image: linear-gradient(rgba(10, 27, 42, 0.8), rgba(10, 27, 42, 0.8)), url('/images/domes/domes-process-tablet.avif');
}
}

@media (min-width: 769px) {
#process {
 background-image: linear-gradient(rgba(10, 27, 42, 0.8), rgba(10, 27, 42, 0.8)), url('/images/domes/domes-process-desktop.avif');
}
}

@media (min-width: 1441px) and (-webkit-min-device-pixel-ratio: 2) {
#process {
 background-image: linear-gradient(rgba(10, 27, 42, 0.8), rgba(10, 27, 42, 0.8)), url('/images/domes/domes-process-retina.avif');
}
}

/* Section Content Styling */
#service-hero .hero-content,
#overview .section-head,
#features .section-head,
#applications .section-head,
#specifications .section-head,
#process .section-head,
#maintenance .section-head,
#contact .cta-content {
color: var(--white);
}

/* Headings Styling */
#service-hero h1,
#overview h2,
#overview h3,
#features h2,
#features h3,
#applications h2,
#applications h4,
#specifications h2,
#specifications h3,
#process h2,
#process h3,
#maintenance h2,
#maintenance h4,
#contact h2 {
color: var(--white) !important;
}

/* Paragraph Styling */
#service-hero p,
#overview p,
#features p,
#applications p,
#specifications p,
#process p,
#maintenance p,
#contact p {
color: var(--white) !important;
}

/* Content Cards Styling */
.content-block,
.feature-card,
.spec-block,
.application-item,
.maintenance-item {
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 8px !important;
color: var(--white) !important;
}

.content-block h3,
.feature-card h3,
.spec-block h3,
.application-item h4,
.maintenance-item h4 {
color: var(--white) !important;
}

.content-block p,
.feature-card p,
.spec-block p,
.spec-block ul,
.spec-block li,
.application-item p,
.maintenance-item p {
color: var(--white) !important;
}

/* Process Steps Styling - Left Aligned Text */
.process-step {
display: flex !important;
align-items: flex-start !important;
gap: 1rem !important;
margin-bottom: 2rem !important;
text-align: left !important;
}

.step-number {
flex-shrink: 0 !important;
}

.step-content {
flex: 1 !important;
text-align: left !important;
}

.step-content h3 {
color: var(--white) !important;
margin-bottom: 0.5rem !important;
text-align: left !important;
}

.step-content p {
color: var(--white) !important;
margin: 0 !important;
text-align: left !important;
}

/* Hero Text Elements */
.hero-eyebrow {
color: var(--light) !important;
}

.hero-sub {
color: var(--light) !important;
}

.section-head p {
color: var(--light) !important;
}

/* List Styling for Specifications Section */
#specifications ul {
color: var(--white) !important;
}

#specifications li {
color: var(--white) !important;
}

#specifications strong {
color: var(--white) !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
#service-hero {
 min-height: 50vh;
}
}

/* ========================= 13. Domes Page Styling - END ========================== */

/* ========================= 14. Forms - START ========================== */

/* Main Form Container */
.md-form {
max-width: 1000px;
margin: 0 auto;
font: 16px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Fieldset Styling - Groups related form fields */
.md-form fieldset {
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 16px;
margin: 16px 0;
border-radius: 8px;
background: rgba(255, 255, 255, 0.02);
}

/* Legend Styling - Section headers */
.md-form legend {
font-weight: 600;
padding: 0 6px;
color: var(--white);
font-size: 1.1rem;
}

/* Label Styling */
.md-form label {
display: block;
font-weight: 600;
margin: 6px 0;
color: var(--light);
}

/* Input Field Styling - Text, email, phone, number inputs */
.md-form input[type="text"],
.md-form input[type="email"],
.md-form input[type="tel"],
.md-form input[type="number"],
.md-form select {
width: 100%;
padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
background: rgba(255, 255, 255, 0.06);
color: var(--white);
font: inherit;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
backdrop-filter: blur(10px);
}

/* Select Dropdown Styling - Custom arrow and styling */
.md-form select {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23ffffff' d='m2 0-2 2h4zm0 5 2-2h-4z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}

/* Placeholder Text Styling */
.md-form input::placeholder {
color: rgba(255, 255, 255, 0.6);
}

/* Focus States - Visual feedback when user interacts */
.md-form input:focus,
.md-form select:focus {
border-color: var(--red);
box-shadow: 0 0 0 3px rgba(200, 25, 46, 0.25);
background: rgba(255, 255, 255, 0.08);
outline: none;
backdrop-filter: blur(15px);
}

/* Invalid State Styling */
.md-form input:required:invalid,
.md-form select:required:invalid {
background-color: rgba(255, 255, 255, 0.06);
}

/* Select Option Styling - Dropdown items */
.md-form select option {
background: rgba(10, 27, 42, 0.98) !important;
color: var(--white) !important;
padding: 8px 12px;
border: none !important;
}

.md-form select option:hover,
.md-form select option:focus,
.md-form select option:checked {
background: rgba(200, 25, 46, 0.9) !important;
color: var(--white) !important;
}

.md-form select option:disabled,
.md-form select option[value=""] {
background: rgba(10, 27, 42, 0.98) !important;
color: rgba(255, 255, 255, 0.6) !important;
}

/* Hide scrollbars in select dropdowns */
.md-form select::-webkit-scrollbar {
display: none;
}

.md-form select {
scrollbar-width: none;
-ms-overflow-style: none;
}

/* Grid Layout for Form Rows - Default 2 columns */
.md-form .row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 14px;
}

/* Three Column Layout - For building configuration row */
.md-form .row.three-cols {
grid-template-columns: 1fr 1fr 1fr !important;
gap: 12px;
}

/* Units Column - Constrained width for unit selectors */
.md-form .row .col.units {
max-width: 170px;
}

/* Form Actions - Submit button and consent area */
.md-form .actions {
display: flex;
align-items: center;
gap: 16px;
padding: 8px 0 24px;
flex-wrap: wrap;
}

/* Submit Button Styling */
.md-form button {
padding: 12px 18px;
border: 0;
border-radius: 6px;
background: var(--red);
color: var(--white);
font-weight: 700;
cursor: pointer;
transition: background-color 0.2s ease;
text-transform: uppercase;
font-size: 0.9rem;
}

.md-form button:hover {
background: var(--red-dark);
}

.md-form button:disabled {
opacity: 0.6;
cursor: not-allowed;
}

/* Consent Checkbox Area */
.md-form .consent {
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
color: var(--light);
}

.md-form .consent input[type="checkbox"] {
width: auto;
margin: 0;
}

/* Honeypot Field - Hidden spam prevention */
.md-form .hp {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}

/* Form Messages - Success/error feedback */
.md-form .msg {
margin-top: 8px;
min-height: 1em;
font-size: 14px;
color: var(--light);
}

/* Wall Configuration Sections - Side by side layout */
.walls-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 16px 0;
}

.wall-section {
background: rgba(255, 255, 255, 0.02);
border-radius: 8px;
padding: 16px;
}

.wall-section h4 {
color: var(--white);
margin-bottom: 12px;
font-size: 1rem;
}

/* Form Group - Standard field grouping */
.form-group {
margin-bottom: 12px;
}

/* Door Dimensions Layout - Width/height/units in row */
.door-dimensions-row {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 12px;
align-items: end;
margin: 12px 0;
}

.dimension-group label,
.units-group label {
font-size: 0.85rem;
margin-bottom: 4px;
}

/* Checkbox Labels - Clickable checkbox with text */
.checkbox-label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 0.9rem;
}

.checkbox-label input[type="checkbox"] {
width: auto;
margin: 0;
}

.checkmark {
display: inline-block;
}

/* Mobile Responsive Design - Stack elements vertically */
@media (max-width: 768px) {
/* Stack wall sections vertically on mobile */
.walls-container {
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Stack door dimensions vertically on mobile */
.door-dimensions-row {
  grid-template-columns: 1fr;
  gap: 8px;
}

/* Default to single column layout on mobile */
.md-form .row {
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Fixed three-cols layout - Mobile single column with proper stacking */
.md-form .row.three-cols {
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}

/* Door fields always visible on mobile when needed */
#frontDoorFields,
#backDoorFields,
#frontPedestrianSection,
#backPedestrianSection {
  margin-top: 12px !important;
}

/* Improve checkbox spacing on mobile */
.door-checkbox-label {
  margin-right: 16px !important;
  margin-bottom: 8px !important;
}

/* Better form field sizing for mobile */
.md-form input,
.md-form select,
.md-form textarea {
  font-size: 16px !important;
  padding: 12px !important;
  min-height: 44px !important;
}

/* Improve button touch targets */
.md-form button {
  min-height: 44px !important;
  padding: 12px 20px !important;
}
/* Mobile-only: Stack checkbox below textarea */
.final-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.textarea-col {
  order: 1 !important;
}

.checkbox-col {
  order: 2 !important;
  padding-bottom: 0 !important;
  justify-content: flex-start !important;
}
}
/* ========================= 14. Forms - END ========================== */

/* ========================= 15. Screen Reader Styles - START ========================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 8px 16px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--red);
  color: var(--white);
  text-decoration: none;
  z-index: 9999;
}
/* ========================= 15. Screen Reader Styles - END ========================== */

/* ========================= 16. About Page Styles - START ========================== */
/* About Hero Section */
#about-hero {
 min-height: 60vh;
 display: flex;
 align-items: center;
 background-image: url('/images/about/about-hero-mobile.avif');
}

@media (min-width: 768px) {
 #about-hero {
   background-image: url('/images/about/about-hero-tablet.avif');
 }
}

@media (min-width: 1024px) {
 #about-hero {
   background-image: url('/images/about/about-hero-desktop.avif');
 }
}

/* Content Grid - Updated for 3 equal columns */
.content-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: var(--gap-lg);
 max-width: 1200px;
 margin: 0 auto;
}

@media (max-width: 1024px) {
 .content-grid {
   grid-template-columns: 1fr;
   gap: var(--gap-md);
 }
}

.content-block {
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid rgba(255, 255, 255, 0.15);
 border-radius: 16px;
 padding: 28px 24px;
 backdrop-filter: blur(3px);
 transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.content-block h3 {
 color: var(--navy);
 margin-bottom: 16px;
 font-size: 1.25rem;
}

.content-block p {
 margin: 0;
 line-height: 1.6;
 color: var(--gray);
}

/* Values Grid */
.values-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: var(--gap-md);
}

@media (min-width: 768px) {
 .values-grid {
   grid-template-columns: 1fr 1fr;
 }
}

.value-card {
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid rgba(255, 255, 255, 0.15);
 border-radius: 16px;
 padding: 28px 24px;
 backdrop-filter: blur(3px);
}

.value-card h3 {
 color: var(--white);
 margin-bottom: 12px;
}

.value-card p {
 color: var(--light);
 line-height: 1.5;
}

/* Values section styling */
#values {
 background-image: url('/images/about/about-project-desktop.avif');
}

/* Team section */
.team-content {
 max-width: 900px;
 margin: 0 auto;
}

/* CTA Section */
#cta {
 background-image: url('/images/about/about-team-desktop.avif');
 text-align: center;
}

.cta-content {
 max-width: 700px;
 margin: 0 auto;
 text-align: center;
}

.cta-actions {
 display: flex;
 gap: var(--gap-sm);
 justify-content: center;
 flex-wrap: wrap;
 margin-top: 24px;
}
/* ========================= 16. About Page Styles - END ========================== */

/* ========================= 17. Service Page Styles - START ========================== */
/* Service Hero Section */
#service-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  background-image: url('/images/domes/domes-hero-mobile.avif');
}

@media (min-width: 768px) {
  #service-hero {
    background-image: url('/images/domes/domes-hero-tablet.avif');
  }
}

@media (min-width: 1024px) {
  #service-hero {
    background-image: url('/images/domes/domes-hero-desktop.avif');
  }
}

/* Features Grid */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-md);
}

@media (min-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.feature-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 28px 24px;
  backdrop-filter: blur(3px);
}

.feature-card h3 {
  color: var(--white);
  margin-bottom: 12px;
}

.feature-card p {
  color: var(--light);
  line-height: 1.5;
}

/* Features section */
#features {
  background-image: url('/images/domes/domes-galvanization-desktop.avif');
}

/* Applications Grid */
.applications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap-sm);
}

.application-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  backdrop-filter: blur(3px);
}

.application-item h4 {
  color: var(--white);
  margin-bottom: 8px;
  font-size: 1rem;
}

.application-item p {
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
}

/* Specifications */
.specs-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--gap-md);
}

.spec-block {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 28px 24px;
  backdrop-filter: blur(3px);
}

.spec-block h3 {
  color: var(--white);
  margin-bottom: 16px;
}

.spec-block ul {
  color: var(--light);
  margin: 0;
  padding-left: 18px;
}

.spec-block li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.spec-block strong {
  color: var(--white);
}

/* Specifications section */
#specifications {
  background-image: url('/images/domes/domes-interior-span-desktop.avif');
}
/* ========================= 17. Service Page Styles - END ========================== */

/* ========================= 19. Financement Page Styles - START ========================== */
/* Financement Hero Section */
.financing-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  background-image: url('/images/financing/financing-hero-mobile.avif');
}

@media (min-width: 768px) {
  .financing-hero {
    background-image: url('/images/financing/financing-hero-tablet.avif');
  }
}

@media (min-width: 1024px) {
  .financing-hero {
    background-image: url('/images/financing/financing-hero-desktop.avif');
  }
}

/* Financing Features section */
.financing-features {
  background-image: url('/images/financing/financing-happy-customer-mobile.avif');
}

@media (min-width: 768px) {
  .financing-features {
    background-image: url('/images/financing/financing-happy-customer-tablet.avif');
  }
}

@media (min-width: 1024px) {
  .financing-features {
    background-image: url('/images/financing/financing-happy-customer-desktop.avif');
  }
}

/* Financing Specifications section */
.financing-specifications {
  background-image: url('/images/financing/financing-concept-mobile.avif');
}

@media (min-width: 768px) {
  .financing-specifications {
    background-image: url('/images/financing/financing-concept-tablet.avif');
  }
}

@media (min-width: 1024px) {
  .financing-specifications {
    background-image: url('/images/financing/financing-concept-desktop.avif');
  }
}

/* Financing CTA */
.financing-cta {
  background-image: url('/images/financing/financing-happy-customer-mobile.avif');
}

@media (min-width: 768px) {
  .financing-cta {
    background-image: url('/images/financing/financing-happy-customer-tablet.avif');
  }
}

@media (min-width: 1024px) {
  .financing-cta {
    background-image: url('/images/financing/financing-happy-customer-desktop.avif');
  }
}
/* ========================= 19. Financement Page Styles - END ========================== */

/* ========================= 20. Process Section Styles - START ========================== */
#process {
  padding: 4rem 0;
  background: var(--navy);
  color: var(--text-light);
}

.process-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.process-step {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  text-align: center;
  position: relative;
  backdrop-filter: blur(3px);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: var(--red);
  color: var(--white);
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.process-step h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 1rem;
}

.process-step p {
  color: var(--light);
  line-height: 1.6;
}

/* Process step connectors for larger screens */
@media (min-width: 1024px) {
  .process-content {
    grid-template-columns: repeat(4, 1fr);
    position: relative;
  }
  
  .process-step:not(:last-child)::after {
    content: '→';
    position: absolute;
    right: -1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--red);
    z-index: 1;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .process-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .process-step {
    padding: 1.5rem;
  }
  
  .step-number {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
}

@media (max-width: 480px) {
  .process-step {
    padding: 1.25rem;
  }
}

/* Enhanced animations */
.process-step {
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
  transform: translateY(20px);
}

.process-step:nth-child(1) { animation-delay: 0.1s; }
.process-step:nth-child(2) { animation-delay: 0.2s; }
.process-step:nth-child(3) { animation-delay: 0.3s; }
.process-step:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ========================= 20. Process Section Styles - END ========================== */

/* ========================= 21. Maintenance Section Styles - START ========================== */
#maintenance {
  padding: 4rem 0;
  background: var(--navy);
  color: var(--text-light);
}

.maintenance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.maintenance-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 2rem;
  border-radius: 16px;
  border-left: 4px solid var(--red);
  backdrop-filter: blur(3px);
}

.maintenance-item h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.75rem;
}

.maintenance-item p {
  color: var(--light);
  line-height: 1.6;
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .maintenance-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .maintenance-item {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .maintenance-item {
    padding: 1.25rem;
  }
}

.maintenance-item {
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
  transform: translateY(20px);
}

.maintenance-item:nth-child(1) { animation-delay: 0.1s; }
.maintenance-item:nth-child(2) { animation-delay: 0.2s; }
.maintenance-item:nth-child(3) { animation-delay: 0.3s; }
.maintenance-item:nth-child(4) { animation-delay: 0.4s; }
/* ========================= 21. Maintenance Section Styles - END ========================== */

/* ========================= 22. Page Hero Sections - START ========================== */
/* Industries Page Hero Section */
#industries-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  background-image: url('/images/industries/industries-mobile.avif');
}

@media (min-width: 768px) {
  #industries-hero {
    background-image: url('/images/industries/industries-tablet.avif');
  }
}

@media (min-width: 1024px) {
  #industries-hero {
    background-image: url('/images/industries/industries-desktop.avif');
  }
}

/* Covers Page Sections */
#covers-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  background-image: url('/images/covers/covers-hero-mobile.avif');
}

@media (min-width: 768px) {
  #covers-hero {
    background-image: url('/images/covers/covers-hero-tablet.avif');
  }
}

@media (min-width: 1024px) {
  #covers-hero {
    background-image: url('/images/covers/covers-hero-desktop.avif');
  }
}

#covers-before-after {
  background-image: url('/images/covers/covers-before-after-mobile.avif');
}

@media (min-width: 768px) {
  #covers-before-after {
    background-image: url('/images/covers/covers-before-after-tablet.avif');
  }
}

@media (min-width: 1024px) {
  #covers-before-after {
    background-image: url('/images/covers/covers-before-after-desktop.avif');
  }
}

#covers-technician {
  background-image: url('/images/covers/covers-technician-mobile.avif');
}

@media (min-width: 768px) {
  #covers-technician {
    background-image: url('/images/covers/covers-technician-tablet.avif');
  }
}

@media (min-width: 1024px) {
  #covers-technician {
    background-image: url('/images/covers/covers-technician-desktop.avif');
  }
}

#covers-materials {
  background-image: url('/images/covers/covers-material-comparison-mobile.avif');
}

@media (min-width: 768px) {
  #covers-materials {
    background-image: url('/images/covers/covers-material-comparison-tablet.avif');
  }
}

@media (min-width: 1024px) {
  #covers-materials {
    background-image: url('/images/covers/covers-material-comparison-desktop.avif');
  }
}
/* ========================= 22. Page Hero Sections - END ========================== */

/* ========================= 23. Language Switcher - START ========================== */
/* Language Switcher */
.language-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
}

.lang-btn {
  background: none;
  border: none;
  color: var(--light);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.lang-btn:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
}

.lang-btn.active {
  color: var(--red);
}

.lang-separator {
  color: rgba(255, 255, 255, 0.3);
  margin: 0 4px;
}

@media (max-width: 900px) {
  .language-switcher {
    order: -1;
    margin-left: 0;
    margin-right: auto;
  }
}
/* ========================= 23. Language Switcher - END ========================== */

/* ========================= 24. Footer Layout - START ========================== */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  gap: 2rem;
  align-items: center;
}

.footer-info {
  max-width: 320px;
  justify-self: start;
  grid-column: 1;
  grid-row: 1;
}

.footer-badge {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  justify-self: center;
  grid-column: 2;
  grid-row: 1;
}

.footer-contact {
  justify-self: end;
  text-align: left;
  grid-column: 3;
  grid-row: 1;
}

.footer-links {
  justify-self: center;
  text-align: center;
  grid-column: 1 / -1;
  grid-row: 2;
}

.dealer-badge {
  max-width: 320px;
  height: auto;
}

.footer-info strong,
.footer-contact strong {
  margin: 0 0 8px 0;
  display: block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

.footer-info p,
.footer-contact p {
  margin: 8px 0;
  line-height: 1.4;
}

/* Clean footer links styling */
.footer-links-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links-list li {
  margin: 0;
}

.footer-links-list a {
  display: block;
  padding: 4px 16px;
  color: var(--light);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.footer-links-list a:hover {
  color: var(--white);
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 1.5rem;
    text-align: center;
  }

  .footer-info,
  .footer-badge,
  .footer-contact,
  .footer-links {
    justify-self: center;
    text-align: center;
    grid-column: 1;
  }
  
  .footer-info {
    grid-row: 1;
    max-width: none;
  }
  
  .footer-badge {
    grid-row: 2;
  }
  
  .footer-contact {
    grid-row: 3;
  }
  
  .footer-links {
    grid-row: 4;
  }

  .footer-links-list a {
    padding: 4px 12px;
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1023px) {
  .footer-links-list a {
    padding: 4px 12px;
  }
}
/* ========================= 24. Footer Layout - END ========================== */

/* ========================= 25. Services Dropdown Styles - START ========================== */
/* Base dropdown container */
.primary-nav .nav-dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown trigger styling */
.primary-nav .dropdown-trigger {
  display: flex !important;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--white);
  text-decoration: none;
}

/* Arrow styling */
.primary-nav .dropdown-arrow {
  font-size: 0.8em;
  transition: transform 0.2s ease;
}

/* Hidden dropdown menu - matches form dropdown styling */
.primary-nav .dropdown-menu {
  position: absolute !important;
  top: 100%;
  left: 0;
  background: rgba(10, 27, 42, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  min-width: 220px;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 1000;
  display: block !important;
  backdrop-filter: blur(10px);
}

/* Dropdown menu links - matches form dropdown styling */
.primary-nav .dropdown-menu a {
  display: block !important;
  padding: 12px 16px;
  color: var(--white) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 0.15s ease;
  width: 100%;
  box-sizing: border-box;
}

.primary-nav .dropdown-menu a:last-child {
  border-bottom: none;
}

.primary-nav .dropdown-menu a:hover {
  background-color: rgba(200, 25, 46, 0.9) !important;
  color: var(--white) !important;
}

/* Desktop hover behavior */
@media (min-width: 1024px) {
  .primary-nav .nav-dropdown:hover .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0);
  }
  
  .primary-nav .nav-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
  }
}

/* Mobile and Tablet - Click only behavior */
@media (max-width: 1023px) {
  .primary-nav .nav-dropdown {
    width: 100%;
  }
  
  .primary-nav .dropdown-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease;
  }
  
  .primary-nav .nav-dropdown.active .dropdown-menu {
    max-height: 300px !important;
  }
  
  .primary-nav .nav-dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
  }
  
  .primary-nav .dropdown-menu a {
    padding: 8px 0 8px 20px !important;
    border-bottom: none !important;
    color: var(--white) !important;
  }
}
/* ========================= 25. Services Dropdown Styles - END ========================== */
</style>