/* ===================================================
   West Electric — Main Stylesheet
   File: assets/styles.css

   HOW TO EDIT:
   - Colors and fonts are defined in the ":root" block at the top.
     Change them there and they update everywhere on the site.
   - Each section is clearly labeled with a comment.
   - To change a section's background, padding, or font, find the
     matching comment heading below and edit just that block.

   TABLE OF CONTENTS:
   1.  CSS Custom Properties (colors, fonts, spacing)
   2.  Reset & Base
   3.  Typography
   4.  Layout Utilities
   5.  Header & Navigation
   6.  Mobile Navigation
   7.  Buttons
   8.  Hero Section (homepage)
   9.  Trust Bar
   10. Section Blocks (intro, text sections)
   11. Service Cards Grid
   12. Why Choose Us (dark section)
   13. Gallery Grid
   14. Testimonial Cards
   15. Careers Hiring Banner
   16. CTA Sections
   17. Inner Page Hero (non-homepage page header)
   18. Breadcrumb
   19. Services Detail List
   20. Residential / Commercial Page Layouts
   21. Reviews Page
   22. Careers Page
   23. Contact Page & Form
   24. Footer
   25. Responsive — Tablet (max-width: 960px)
   26. Responsive — Mobile (max-width: 600px)
=================================================== */


/* ============================================
   1. CSS CUSTOM PROPERTIES
   Change these to restyle the entire site.
   ============================================ */
:root {
  /* Brand Colors */
  --navy:         #0C2340;   /* Deep navy — headers, dark sections, footer */
  --navy-mid:     #153D6B;   /* Mid navy — nav hover states, borders */
  --orange:       #E8580C;   /* Action orange — all buttons, highlights */
  --orange-dark:  #C44A09;   /* Orange hover state */

  /* Text Colors */
  --text:         #1A1F2B;   /* Near-black body text */
  --text-light:   #5A6373;   /* Subdued / secondary text */

  /* Backgrounds */
  --bg:           #FFFFFF;   /* Default page background */
  --bg-alt:       #F3F6FB;   /* Light section background */
  --bg-dark:      #0C2340;   /* Dark section background */

  /* UI */
  --border:       #DDE3EC;   /* Dividers, card borders */
  --radius:       6px;        /* Standard border radius */
  --shadow-sm:    0 2px 8px rgba(12,35,64,0.08);
  --shadow-md:    0 6px 24px rgba(12,35,64,0.12);

  /* Typography */
  --font:         'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing Scale */
  --space-xs:     0.5rem;
  --space-sm:     1rem;
  --space-md:     2rem;
  --space-lg:     4rem;
  --space-xl:     6rem;

  /* Layout */
  --max-width:    1200px;
  --header-h:     72px;
}


/* ============================================
   2. RESET & BASE
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

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

ul {
  list-style: none;
}


/* ============================================
   3. TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.1rem; }

p {
  color: var(--text-light);
  font-size: 1.05rem;
  max-width: 68ch;
}

.section-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--space-xs);
}

.section-heading {
  margin-bottom: var(--space-sm);
}

.section-subtext {
  font-size: 1.05rem;
  color: var(--text-light);
  max-width: 60ch;
  margin-bottom: var(--space-md);
}


/* ============================================
   4. LAYOUT UTILITIES
   ============================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.section {
  padding: var(--space-lg) 0;
}

.section--alt {
  background: var(--bg-alt);
}

.section--dark {
  background: var(--bg-dark);
}

.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: #FFFFFF;
}

.section--dark p,
.section--dark .section-subtext {
  color: rgba(255,255,255,0.75);
}

.section--dark .section-label {
  color: var(--orange);
}

/* Two-column split layout */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }

/* Center alignment helper */
.text-center { text-align: center; }
.text-center p { margin-left: auto; margin-right: auto; }

/* Divider accent line under headings */
.heading-line {
  display: block;
  width: 48px;
  height: 4px;
  background: var(--orange);
  border-radius: 2px;
  margin: 1rem 0 1.5rem;
}

.text-center .heading-line {
  margin-left: auto;
  margin-right: auto;
}
.why-section h2 {
  color: #FFFFFF;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}


/* ============================================
   5. HEADER & NAVIGATION
   ============================================ */

/* Top announcement bar */
.topbar {
  background: var(--navy);
  color: rgba(255,255,255,0.85);
  font-size: 0.82rem;
  padding: 0.45rem 0;
  text-align: center;
}

.topbar a {
  color: var(--orange);
  font-weight: 600;
  transition: color 0.2s;
}

.topbar a:hover {
  color: #fff;
}

.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Main header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s;
}

.site-header.scrolled {
  box-shadow: 0 4px 20px rgba(12,35,64,0.14);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: 1.5rem;
}

/* Logo */
.site-logo {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  line-height: 1;
  text-decoration: none;
}

.site-logo-img {
  height: 48px;
  width: auto;
  display: block;
}

.site-logo-text {
  display: flex;
  flex-direction: column;
}

.site-logo-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.site-logo-name span {
  color: var(--orange);
}

.site-logo-tag {
  font-size: 0.62rem;
  color: var(--text-light);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 3px;
}

/* Primary navigation */
.primary-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.primary-nav a,
.primary-nav .nav-dropdown-toggle {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.primary-nav a:hover,
.primary-nav .nav-dropdown-toggle:hover {
  color: var(--navy);
  background: var(--bg-alt);
}

.primary-nav a.active {
  color: var(--orange);
}

/* Dropdown */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  min-width: 190px;
  overflow: hidden;
  z-index: 500;
  margin-top: 0;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu a {
  display: block;
  padding: 0.65rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  border-radius: 0;
  transition: background 0.15s, color 0.15s;
}

.nav-dropdown-menu a:hover {
  background: var(--bg-alt);
  color: var(--navy);
}

/* Chevron icon on dropdown toggle */
.nav-dropdown-toggle::after {
  content: '▾';
  font-size: 0.75rem;
  opacity: 0.6;
}

/* CTA in nav */
.nav-cta {
  margin-left: 0.5rem;
  background: var(--orange) !important;
  color: #fff !important;
  padding: 0.55rem 1.1rem !important;
  border-radius: var(--radius) !important;
}

.nav-cta:hover {
  background: var(--orange-dark) !important;
}

/* Phone number in header */
.header-phone {
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.header-phone:hover {
  color: var(--orange);
}

.header-phone .phone-icon {
  font-size: 1rem;
}


/* ============================================
   6. MOBILE NAVIGATION
   ============================================ */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius);
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}

/* Hamburger open state */
.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile drawer */
.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 1rem 1.5rem 1.5rem;
  gap: 0.25rem;
}

.mobile-nav.open {
  display: flex;
}

.mobile-nav a {
  display: block;
  padding: 0.7rem 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.mobile-nav a:last-child {
  border-bottom: none;
}

.mobile-nav a.mobile-cta {
  margin-top: 0.75rem;
  background: var(--orange);
  color: #fff;
  text-align: center;
  border-radius: var(--radius);
  border-bottom: none;
  padding: 0.85rem;
}

.mobile-nav .mobile-group-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-light);
  padding: 0.75rem 0.5rem 0.25rem;
}

.mobile-nav .mobile-sub-link {
  padding-left: 1.25rem;
  font-size: 0.95rem;
  color: var(--text-light);
}


/* ============================================
   7. BUTTONS
   ============================================ */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
  text-align: center;
  white-space: nowrap;
  border: 2px solid transparent;
  line-height: 1.2;
}

.btn:active {
  transform: translateY(1px);
}

/* Primary — orange fill */
.btn-primary {
  background: var(--orange);
  color: #FFFFFF;
  border-color: var(--orange);
}

.btn-primary:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  box-shadow: 0 4px 16px rgba(232,88,12,0.35);
}

/* Secondary — outline */
.btn-secondary {
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.7);
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: #FFFFFF;
}

/* Ghost — navy outline on light bg */
.btn-outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}

.btn-outline:hover {
  background: var(--navy);
  color: #FFFFFF;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}


/* ============================================
   8. HERO SECTION
   Homepage main banner
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* modern browsers — accounts for mobile browser chrome */
  display: flex;
  align-items: center;

  /* Fallback background image shown when video fails to load */
  background-image: url('../assets/images/hero-electrician-team.jpg');
  background-size: cover;
  background-position: center top;
  background-color: var(--navy); /* fallback if image is also missing */
}

/* The video element — covers the hero */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Dark overlay on top of video/image for text readability */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(12,35,64,0.55) 0%, rgba(12,35,64,0.72) 100%),
    linear-gradient(to right, rgba(12,35,64,0.65) 0%, transparent 70%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 740px;
  padding: 5rem 0 4rem;
}

.hero-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1rem;
  background: rgba(232,88,12,0.15);
  padding: 0.3rem 0.8rem;
  border-radius: 3px;
  border-left: 3px solid var(--orange);
}

.hero h1 {
  color: #FFFFFF;
  font-size: clamp(2rem, 5vw, 3.25rem);
  margin-bottom: 1.25rem;
  line-height: 1.15;
  font-weight: 800;
}

.hero-desc {
  color: rgba(255,255,255,0.85);
  font-size: clamp(1rem, 2vw, 1.15rem);
  max-width: 58ch;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 3rem;
}

.hero-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255,255,255,0.8);
  font-size: 0.85rem;
  font-weight: 600;
}

.hero-badge::before {
  content: '✓';
  color: var(--orange);
  font-weight: 700;
}


/* ============================================
   9. TRUST BAR
   Four proof points below the hero
   ============================================ */
.trust-bar {
  background: var(--navy);
  padding: 0;
}

.trust-bar-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.5rem 1.25rem;
  border-right: 1px solid rgba(255,255,255,0.1);
}

.trust-item:last-child {
  border-right: none;
}

.trust-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.trust-text strong {
  display: block;
  color: #FFFFFF;
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 0.1rem;
}

.trust-text span {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
}


/* ============================================
   10. SECTION BLOCKS
   ============================================ */
.intro-section {
  padding: var(--space-lg) 0;
}

.intro-section .intro-body {
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--text-light);
  max-width: 70ch;
}

.intro-section .link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  color: var(--orange);
  font-size: 0.95rem;
  margin-top: 1.25rem;
  transition: gap 0.2s;
}

.intro-section .link-more:hover {
  gap: 0.6rem;
}


/* ============================================
   11. SERVICE CARDS GRID
   ============================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.service-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s, box-shadow 0.22s;
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.service-card-img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  background: var(--bg-alt);
}

/* Placeholder background when real image is missing */
.service-card-img-placeholder {
  width: 100%;
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

.service-card-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-card-body h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
  color: var(--navy);
}

.service-card-body p {
  font-size: 0.9rem;
  color: var(--text-light);
  flex: 1;
  margin-bottom: 1.25rem;
  max-width: none;
}

.service-card-link {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--orange);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: gap 0.2s;
}

.service-card-link:hover {
  gap: 0.55rem;
}


/* ============================================
   12. WHY CHOOSE US — Dark Section
   ============================================ */
.why-section {
  background: var(--navy);
  padding: var(--space-lg) 0;
  position: relative;
  overflow: hidden;
}
.why-section-watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%);
  width: 70%;
  max-width: none;
  opacity: 0.025;
  pointer-events: none;
  user-select: none;
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.why-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.why-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.why-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: rgba(232,88,12,0.15);
  border: 1px solid rgba(232,88,12,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-top: 2px;
}

.why-item-text strong {
  display: block;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.why-item-text p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  max-width: none;
}

/* Stats panel on right side */
.why-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.why-stat {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  text-align: center;
}

.why-stat-number {
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--orange);
  line-height: 1;
  display: block;
  margin-bottom: 0.5rem;
}

.why-stat-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ============================================
   13. GALLERY GRID
   ============================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.gallery-item {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-alt);
  position: relative;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s;
}

.gallery-item:hover img {
  transform: scale(1.04);
}

/* Placeholder for gallery items without images */
.gallery-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #163A5F 0%, #0C2340 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.25);
  font-size: 2rem;
}

.gallery-cta-wrap {
  text-align: center;
  margin-top: 2.5rem;
}


/* ============================================
   14. TESTIMONIAL CARDS
   ============================================ */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.review-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: box-shadow 0.2s;
}

.review-card:hover {
  box-shadow: var(--shadow-md);
}

.review-stars {
  color: #F4A917;
  font-size: 1rem;
  letter-spacing: 2px;
}

.review-text {
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.7;
  flex: 1;
  max-width: none;
  font-style: italic;
}

.review-text::before { content: '\201C'; }
.review-text::after  { content: '\201D'; }

.reviewer-name {
  font-weight: 700;
  color: var(--navy);
  font-size: 0.9rem;
}

.reviewer-meta {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-top: 0.1rem;
}

.reviews-cta-wrap {
  text-align: center;
  margin-top: 2.5rem;
}


/* ============================================
   15. CAREERS HIRING BANNER
   ============================================ */
.careers-banner {
  background: linear-gradient(135deg, var(--navy) 60%, var(--navy-mid) 100%);
  border-top: 4px solid var(--orange);
  padding: 3.5rem 0;
  text-align: center;
}

.careers-banner h2 {
  color: #FFFFFF;
  margin-bottom: 0.75rem;
}

.careers-banner p {
  color: rgba(255,255,255,0.75);
  margin: 0 auto 2rem;
  font-size: 1.05rem;
}


/* ============================================
   16. CTA SECTIONS
   ============================================ */
.cta-section {
  background: var(--bg-alt);
  padding: var(--space-lg) 0;
  text-align: center;
}

.cta-section h2 {
  margin-bottom: 0.75rem;
}

.cta-section p {
  margin: 0 auto 2rem;
  font-size: 1.05rem;
}

.cta-phone {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--navy);
  display: block;
  margin-bottom: 1rem;
  transition: color 0.2s;
}

.cta-phone:hover {
  color: var(--orange);
}


/* ============================================
   17. INNER PAGE HERO (page headers)
   Used on every page except the homepage
   ============================================ */
.page-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  padding: 4rem 0 3.5rem;
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--orange);
}

.page-hero h1 {
  color: #FFFFFF;
  margin-bottom: 0.75rem;
}

.page-hero .page-hero-sub {
  color: rgba(255,255,255,0.75);
  font-size: 1.05rem;
  max-width: 72ch;
}


/* ============================================
   18. BREADCRUMB
   ============================================ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.breadcrumb a {
  color: rgba(255,255,255,0.55);
  transition: color 0.2s;
}

.breadcrumb a:hover {
  color: rgba(255,255,255,0.9);
}

.breadcrumb-sep {
  opacity: 0.4;
}

.breadcrumb-current {
  color: rgba(255,255,255,0.85);
}


/* ============================================
   19. SERVICES DETAIL LIST
   Used on Services, Residential, Commercial
   ============================================ */
.services-detail-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.service-detail-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}

.service-detail-item:first-child {
  border-top: 1px solid var(--border);
}

.service-detail-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.service-detail-text h4 {
  color: var(--navy);
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.service-detail-text p {
  font-size: 0.9rem;
  color: var(--text-light);
  max-width: none;
}

/* Checklist — simple bulleted list with orange checks */
.check-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.96rem;
  color: var(--text-light);
  line-height: 1.5;
}

.check-list li::before {
  content: '✓';
  color: var(--orange);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}


/* ============================================
   20. RESIDENTIAL / COMMERCIAL LAYOUTS
   ============================================ */
.service-page-intro {
  padding: var(--space-lg) 0;
}

.service-page-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.service-page-img {
  width: 100%;
  border-radius: var(--radius);
  object-fit: cover;
  box-shadow: var(--shadow-md);
}

.service-page-img-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: rgba(255,255,255,0.2);
}


/* ============================================
   21. REVIEWS PAGE
   ============================================ */
.reviews-header {
  text-align: center;
  margin-bottom: 3rem;
}

.reviews-header .heading-line {
  margin-left: auto;
  margin-right: auto;
}

.review-rating-summary {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 2rem;
  margin: 1.5rem auto 0;
}

.rating-number {
  font-size: 3rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
}

.rating-right strong {
  display: block;
  color: #F4A917;
  font-size: 1.4rem;
  letter-spacing: 2px;
}

.rating-right span {
  font-size: 0.82rem;
  color: var(--text-light);
  font-weight: 600;
}


/* ============================================
   22. CAREERS PAGE
   ============================================ */
.careers-intro {
  padding: var(--space-lg) 0;
}

.perks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.perk-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.perk-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.75rem;
}

.perk-card h4 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
  color: var(--navy);
}

.perk-card p {
  font-size: 0.88rem;
  color: var(--text-light);
  max-width: none;
}

/* Open Roles */
.roles-section {
  padding: var(--space-lg) 0;
}

.role-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
  transition: box-shadow 0.2s;
}

.role-card:hover {
  box-shadow: var(--shadow-md);
}

.role-card-info h3 {
  font-size: 1.1rem;
  color: var(--navy);
  margin-bottom: 0.3rem;
}

.role-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

.role-tag {
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.2rem 0.6rem;
  color: var(--text-light);
}


/* ============================================
   23. CONTACT PAGE & FORM
   ============================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 4rem;
  align-items: start;
  padding: var(--space-lg) 0;
}

.contact-info-block {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.contact-info-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.contact-info-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-info-item h4 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  margin-bottom: 0.3rem;
}

.contact-info-item a,
.contact-info-item p {
  font-size: 1.05rem;
  color: var(--navy);
  font-weight: 600;
  max-width: none;
}

.contact-info-item a:hover {
  color: var(--orange);
}

/* Contact Form */
.contact-form {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.5rem;
  box-shadow: var(--shadow-md);
}

.contact-form h3 {
  margin-bottom: 1.75rem;
  color: var(--navy);
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(12,35,64,0.08);
}

.form-group textarea {
  min-height: 130px;
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-submit {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
}

.form-note {
  font-size: 0.8rem;
  color: var(--text-light);
  margin-top: 0.75rem;
  text-align: center;
  max-width: none;
}


/* ============================================
   24. FOOTER
   ============================================ */
.site-footer {
  background: #080F1A;
  color: rgba(255,255,255,0.7);
  padding: 4rem 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-brand .footer-logo-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 0.25rem;
}

.footer-brand .footer-logo-name span {
  color: var(--orange);
}

.footer-brand .footer-tagline {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 1rem;
  max-width: none;
}

.footer-brand .footer-desc {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  max-width: 32ch;
}

.footer-col h4 {
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-links a {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.footer-links a:hover {
  color: rgba(255,255,255,0.9);
}

.footer-contact-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 1rem;
}

.footer-contact-item .label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
  font-weight: 700;
  max-width: none;
}

.footer-contact-item a,
.footer-contact-item span {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  max-width: none;
}

.footer-contact-item a:hover {
  color: var(--orange);
}

.footer-phone-link {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.3);
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-bottom-links {
  display: flex;
  gap: 1.5rem;
}

.footer-bottom-links a {
  color: rgba(255,255,255,0.3);
  font-size: 0.78rem;
  transition: color 0.2s;
}

.footer-bottom-links a:hover {
  color: rgba(255,255,255,0.7);
}

.footer-service-area {
  background: rgba(255,255,255,0.04);
  padding: 1rem 0;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 0;
}


/* ============================================
   25. RESPONSIVE — TABLET (max 960px)
   ============================================ */
@media (max-width: 960px) {

  /* Hide desktop nav, show hamburger */
  .primary-nav { display: none; }
  .header-phone { display: none; }
  .hamburger { display: flex; }

  /* Slightly smaller logo on tablet/mobile */
  .site-logo-img { height: 40px; }
  .site-logo-name { font-size: 1.1rem; }

  /* Trust bar — 2 columns */
  .trust-bar-inner {
    grid-template-columns: 1fr 1fr;
  }

  .trust-item:nth-child(2) { border-right: none; }
  .trust-item:nth-child(3) { border-top: 1px solid rgba(255,255,255,0.1); }
  .trust-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.1); }

  /* Splits become single column */
  .split,
  .why-grid,
  .service-page-split,
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .split--reverse { direction: ltr; }

  /* Footer grid */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  /* Gallery — 2 columns on tablet */
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Why stats */
  .why-stats {
    margin-top: 0;
  }
}


/* ============================================
   26. RESPONSIVE — MOBILE (max 600px)
   ============================================ */
@media (max-width: 600px) {

  :root {
    --space-lg: 3rem;
    --space-xl: 4rem;
  }

  /* Trust bar — stacked */
  .trust-bar-inner {
    grid-template-columns: 1fr;
  }

  .trust-item {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .trust-item:last-child { border-bottom: none; }
  .trust-item:nth-child(2) { border-right: none; }
  .trust-item:nth-child(3) { border-top: none; }
  .trust-item:nth-child(4) { border-top: none; }

  /* Hero — shorter on mobile */
  .hero {
    min-height: 85vh;
    min-height: 85svh;
    align-items: flex-end;
    padding-bottom: 3rem;
  }

  .hero-content {
    padding: 1.5rem 0;
  }

  /* Services grid — single column */
  .services-grid {
    grid-template-columns: 1fr;
  }

  /* Why stats — 1 column */
  .why-stats {
    grid-template-columns: 1fr 1fr;
  }

  /* Gallery — single column */
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  /* Reviews — single column */
  .reviews-grid {
    grid-template-columns: 1fr;
  }

  /* Contact form row — stacked */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Footer — stacked */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  /* Perks grid */
  .perks-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Role card stack */
  .role-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-group {
    flex-direction: column;
  }

  .btn-group .btn {
    width: 100%;
    text-align: center;
  }
}