/* ============================================================
   MIGHTY FORCE CONTRACTORS — styles.css
   Mobile-first responsive stylesheet

   Brand Colors:
     Primary Red:  #E30000
     Dark Red:     #C00000
     Black:        #111111
     Card Black:   #1A1A1A / #222222
     White:        #FFFFFF
     Light Gray:   #F5F5F5

   Typography:
     Headings:  Oswald (700, 600, 500, 400)
     Body:      Open Sans (700, 600, 400, 300)

   Breakpoints:
     sm:  480px   (small phones in landscape)
     md:  768px   (tablets / nav switch point)
     lg:  1024px  (small laptops)
     xl:  1280px  (desktop)

   Table of Contents:
     1.  CSS Variables & Reset
     2.  Typography
     3.  Utility / Layout
     4.  Buttons
     5.  Scroll Reveal Animations
     6.  Navigation
     7.  Hero Section
     8.  About Section
     9.  Services Section
     10. Who We Serve Section
     11. Portfolio Section
     12. Testimonials Section
     13. Lead Capture / Form Section
     14. Contact Info Section
     15. Footer
     16. Mobile Sticky Call Bar
     17. Responsive Breakpoints
============================================================ */


/* ============================================================
   1. CSS VARIABLES & RESET
============================================================ */
:root {
  /* Brand palette */
  --red:           #E30000;
  --red-dark:      #C00000;
  --red-muted:     rgba(227, 0, 0, 0.15);
  --black:         #111111;
  --black-soft:    #1A1A1A;
  --black-card:    #222222;
  --black-border:  rgba(255, 255, 255, 0.08);
  --white:         #FFFFFF;
  --gray-light:    #F5F5F5;
  --gray-mid:      #DDDDDD;
  --gray-text:     #555555;
  --gold:          #FFD700;

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

  /* Layout */
  --container-max: 1200px;
  --nav-height:    72px;
  --section-pad-y: 4.5rem;

  /* Animation */
  --transition:    0.25s ease;
  --transition-md: 0.4s ease;

  /* Shadows */
  --shadow-card:   0 4px 24px rgba(0, 0, 0, 0.25);
  --shadow-hover:  0 8px 32px rgba(0, 0, 0, 0.35);
}

/* Universal box-sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Smooth scrolling site-wide */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Base body */
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--black);
  background-color: var(--white);
  overflow-x: hidden;
}

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Remove default link underline */
a {
  text-decoration: none;
  color: inherit;
}

/* Remove default list styling */
ul, ol {
  list-style: none;
}

/* Remove fieldset styling */
fieldset {
  border: none;
}

/* Accessible focus ring (keyboard nav) */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ============================================================
   2. TYPOGRAPHY
============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

/* Fluid type scale */
h1 { font-size: clamp(2rem,    5.5vw, 3.75rem); }
h2 { font-size: clamp(1.75rem, 4vw,   2.75rem); }
h3 { font-size: clamp(1.2rem,  2.5vw, 1.6rem);  }
h4 { font-size: clamp(0.95rem, 1.8vw, 1.15rem); letter-spacing: 0.04em; }

p {
  margin-bottom: 1rem;
}
p:last-child {
  margin-bottom: 0;
}

address {
  font-style: normal;
}


/* ============================================================
   3. UTILITY / LAYOUT
============================================================ */

/* Centered max-width wrapper */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Section padding helper — applied per-section via padding shorthand */
.section-pad {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

/* Section backgrounds */
.section-light {
  background-color: var(--white);
  color: var(--black);
}

.section-dark {
  background-color: var(--black);
  color: var(--white);
}

/* Small uppercase label above section headings */
.section-label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.6rem;
}

/* On dark backgrounds the label stays red (still reads well) */
.section-label-light {
  color: var(--red);
}

/* Centered section header block */
.section-header {
  text-align: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
}

.section-header h2 {
  margin-bottom: 1rem;
}

.section-intro {
  font-size: 1.05rem;
  line-height: 1.75;
  opacity: 0.82;
}

/* Desktop-only line break in headings */
.desktop-break {
  display: none;
}


/* ============================================================
   4. BUTTONS
============================================================ */

/* Base button — applies to all variants */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.8rem 1.75rem;
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition:
    background-color var(--transition),
    color var(--transition),
    border-color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
  white-space: nowrap;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
}

.btn-lg {
  padding: 1rem 2.25rem;
  font-size: 0.9rem;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Solid red — primary CTA */
.btn-primary {
  background-color: var(--red);
  color: var(--white);
  border-color: var(--red);
}

.btn-primary:hover {
  background-color: var(--red-dark);
  border-color: var(--red-dark);
}

/* Outlined white — hero secondary CTA */
.btn-outline-white {
  background-color: transparent;
  color: var(--white);
  border-color: var(--white);
}

.btn-outline-white:hover {
  background-color: var(--white);
  color: var(--black);
}

/* Outlined red — on light-background sections */
.btn-outline-red {
  background-color: transparent;
  color: var(--red);
  border-color: var(--red);
}

.btn-outline-red:hover {
  background-color: var(--red);
  color: var(--white);
}

/* Full-width form submit button */
.btn-submit {
  width: 100%;
  padding: 1.1rem 2rem;
  font-size: 0.95rem;
}


/* ============================================================
   5. SCROLL REVEAL ANIMATIONS
   Elements with [data-reveal] start invisible and slide up.
   IntersectionObserver in script.js adds `.revealed` class.
============================================================ */

[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children inside revealed containers */
[data-reveal] .service-card:nth-child(1) { transition-delay: 0.05s; }
[data-reveal] .service-card:nth-child(2) { transition-delay: 0.12s; }
[data-reveal] .service-card:nth-child(3) { transition-delay: 0.19s; }
[data-reveal] .service-card:nth-child(4) { transition-delay: 0.26s; }
[data-reveal] .service-card:nth-child(5) { transition-delay: 0.33s; }
[data-reveal] .service-card:nth-child(6) { transition-delay: 0.40s; }
[data-reveal] .service-card:nth-child(7) { transition-delay: 0.47s; }

[data-reveal] .testimonial-card:nth-child(1) { transition-delay: 0.05s; }
[data-reveal] .testimonial-card:nth-child(2) { transition-delay: 0.18s; }
[data-reveal] .testimonial-card:nth-child(3) { transition-delay: 0.31s; }

[data-reveal] .serve-tile:nth-child(1) { transition-delay: 0.05s; }
[data-reveal] .serve-tile:nth-child(2) { transition-delay: 0.15s; }
[data-reveal] .serve-tile:nth-child(3) { transition-delay: 0.25s; }
[data-reveal] .serve-tile:nth-child(4) { transition-delay: 0.35s; }

[data-reveal] .contact-item:nth-child(1) { transition-delay: 0.05s; }
[data-reveal] .contact-item:nth-child(2) { transition-delay: 0.15s; }
[data-reveal] .contact-item:nth-child(3) { transition-delay: 0.25s; }


/* ============================================================
   6. NAVIGATION
============================================================ */

/* Fixed header */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  /* Starts transparent over hero */
  background-color: transparent;
  transition:
    background-color var(--transition-md),
    box-shadow var(--transition-md);
}

/* Scrolled state — added by JS when page scrolls down */
.site-nav.scrolled {
  background-color: var(--black);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

/* Inner nav container */
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Logo */
.nav-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.nav-logo img {
  height: 46px;
  width: auto;
  object-fit: contain;
  /* Slight brightness boost so JPG logo reads well on dark nav */
  filter: brightness(1.05);
}

/* Desktop nav links — hidden on mobile */
.nav-links {
  display: none;
  align-items: center;
  gap: 1.75rem;
}

.nav-links a {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  transition: color var(--transition);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.nav-links a:not(.btn):hover {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* Active nav link — set by IntersectionObserver in script.js */
.nav-links a.nav-active {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* CTA button in nav — smaller than page CTAs */
.nav-cta {
  padding: 0.55rem 1.3rem !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.1em !important;
  border-bottom: none !important;
}

.nav-cta:hover {
  transform: translateY(-1px) !important;
}

/* ── Hamburger button (mobile) ── */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 19px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1010;
  flex-shrink: 0;
}

.hamburger .bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--white);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform var(--transition-md),
    opacity var(--transition-md);
}

/* Animate to X when open */
.hamburger.open .bar:nth-child(1) {
  transform: translateY(8.5px) rotate(45deg);
}
.hamburger.open .bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.open .bar:nth-child(3) {
  transform: translateY(-8.5px) rotate(-45deg);
}

/* ── Mobile Dropdown Menu ── */
.mobile-menu {
  display: none;
  position: absolute;
  top: var(--nav-height);
  left: 0;
  right: 0;
  background-color: var(--black);
  border-top: 2px solid var(--red);
  padding: 0 1.5rem 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  max-height: calc(100vh - var(--nav-height));
  overflow-y: auto;
}

.mobile-menu.open {
  display: block;
  animation: slideDown 0.3s ease forwards;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
}

.mobile-menu nav a {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: color var(--transition);
}

.mobile-menu nav a:last-of-type {
  border-bottom: none;
}

.mobile-menu nav a:hover {
  color: var(--red);
}

/* CTA button in mobile menu */
.mobile-menu nav .btn {
  margin-top: 1.25rem;
  width: 100%;
  justify-content: center;
}


/* ============================================================
   7. HERO SECTION
============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* Better iOS support */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  overflow: hidden;
  /* Fallback bg color while image loads */
  background-color: var(--black-soft);
}

/* ── Ken Burns background — slow zoom brings the hero to life ── */
.hero::before {
  content: '';
  position: absolute;
  inset: -5%; /* slightly oversized so zoom doesn't reveal edges */
  background-image: url('images/hero-bg.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
  /* Slow zoom-in (Ken Burns) — 18s, plays once, stays zoomed */
  animation: kenBurns 18s ease-out forwards;
}

@keyframes kenBurns {
  0%   { transform: scale(1.0) translate(0, 0); }
  100% { transform: scale(1.06) translate(-1%, 1%); }
}

/* Gradient overlay for text readability */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.52) 50%,
    rgba(0, 0, 0, 0.78) 100%
  );
  z-index: 1;
}

/* Hero content */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
  padding: 2.5rem 2rem;
  padding-top: calc(var(--nav-height) + 2.5rem);
  width: 100%;
  /* Subtle tinted backdrop so text reads clearly over any photo */
  background: rgba(0, 0, 0, 0.38);
  border-radius: 6px;
}

/* Small geography tag above headline */
.hero-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.hero-eyebrow::before,
.hero-eyebrow::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background-color: var(--red);
}

/* Main headline */
.hero-headline {
  font-size: clamp(2.4rem, 6vw, 4.25rem);
  font-weight: 700;
  line-height: 1.08;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85), 0 1px 5px rgba(0, 0, 0, 0.7);
  color: var(--white);
}

.hero-headline br {
  display: none; /* Collapse on small screens */
}

/* Red accent text within headline */
.hero-accent {
  color: var(--red);
  display: block;
  font-weight: 700;
}

/* Subheadline */
.hero-sub {
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.95);
  max-width: 620px;
  margin: 0 auto 2.5rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
}

/* CTA button group */
.hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Animated scroll indicator */
.hero-scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.1rem;
  transition: color var(--transition);
  animation: bounce 2s ease-in-out infinite;
}

.hero-scroll-hint:hover {
  color: var(--white);
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}


/* ============================================================
   8. ABOUT SECTION
============================================================ */

.about {
  padding: var(--section-pad-y) 0;
}

/* Stack on mobile, side-by-side on tablet+ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.75rem;
  align-items: center;
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

.about-text h2 {
  color: var(--black);
  margin-bottom: 1.25rem;
}

.about-text p {
  color: var(--gray-text);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.about-text .btn {
  margin-top: 0.5rem;
}

/* Image wrapper with red accent bar */
.about-image {
  position: relative;
  border-radius: 4px;
  overflow: visible;
}

/* Red vertical bar to the left of image */
.about-image::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 4px;
  background-color: var(--red);
  border-radius: 2px;
  z-index: 1;
}

.about-image img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  border-radius: 4px;
  /* Gray bg shown when placeholder image is missing */
  background-color: var(--gray-light);
  /* Subtle red shadow at bottom edge */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}


/* ============================================================
   9. SERVICES SECTION
============================================================ */

.services {
  padding: var(--section-pad-y) 0;
}

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

.services .section-intro {
  color: rgba(255, 255, 255, 0.75);
}

/* Subsection wrapper (Residential / Commercial / Additional) */
.services-subsection {
  margin-bottom: 4rem;
}

.services-subsection:last-child {
  margin-bottom: 0;
}

/* Subsection label/title bar */
.subsection-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.subsection-title i {
  font-size: 1.5rem;
}

/* Service card grid — mobile: 1 col */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* Individual service card */
.service-card {
  background-color: var(--black-card);
  border: 1px solid var(--black-border);
  border-left: 3px solid transparent;
  border-radius: 4px;
  padding: 1.75rem 1.5rem;
  transition:
    border-left-color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}

.service-card:hover {
  border-left-color: var(--red);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* Icon */
.service-icon {
  display: block;
  font-size: 1.8rem;
  color: var(--red);
  margin-bottom: 1rem;
}

/* Card title */
.service-card h4 {
  color: var(--white);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

/* Card description */
.service-card p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
}

/* ── Additional Services Strip ── */
.additional-services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.additional-service-item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  background-color: var(--black-card);
  border: 1px solid var(--black-border);
  border-radius: 4px;
  padding: 1.5rem;
  transition:
    border-color var(--transition),
    transform var(--transition),
    background-color var(--transition);
}

.additional-service-item:hover {
  border-color: var(--red);
  background-color: rgba(227, 0, 0, 0.05);
  transform: translateX(4px);
}

.additional-service-item > i {
  font-size: 1.6rem;
  color: var(--red);
  min-width: 1.8rem;
  padding-top: 0.1rem;
  flex-shrink: 0;
}

.additional-service-item > div {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.additional-service-item strong {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--white);
}

.additional-service-item span {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}


/* ============================================================
   10. WHO WE SERVE SECTION
============================================================ */

.who-we-serve {
  padding: var(--section-pad-y) 0;
}

.who-we-serve .section-header h2 {
  color: var(--black);
}

.who-we-serve .section-intro {
  color: var(--gray-text);
}

/* Tiles grid — 2×2 on mobile, 4-up on tablet+ */
.serve-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

/* Individual tile */
.serve-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.25rem;
  background-color: var(--gray-light);
  border: 2px solid transparent;
  border-radius: 4px;
  transition:
    border-color var(--transition),
    background-color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
  cursor: default;
}

.serve-tile:hover {
  border-color: var(--red);
  background-color: var(--white);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

/* Icon circle */
.serve-tile-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--red-muted);
  border-radius: 50%;
  margin-bottom: 1rem;
  transition: background-color var(--transition);
}

.serve-tile:hover .serve-tile-icon {
  background-color: var(--red);
}

.serve-tile-icon i {
  font-size: 1.5rem;
  color: var(--red);
  transition: color var(--transition);
}

.serve-tile:hover .serve-tile-icon i {
  color: var(--white);
}

.serve-tile strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 0.35rem;
}

.serve-tile span {
  font-size: 0.82rem;
  color: var(--gray-text);
  line-height: 1.45;
}


/* ============================================================
   11. PORTFOLIO / GALLERY SECTION
============================================================ */

.portfolio {
  padding: var(--section-pad-y) 0;
}

.portfolio .section-header h2 {
  color: var(--white);
}

.portfolio .section-intro {
  color: rgba(255, 255, 255, 0.75);
}

/* ── Masonry gallery using CSS columns ── */
/* Each photo fills column width at its natural aspect ratio.
   This handles portrait and landscape photos elegantly. */
.gallery-masonry {
  column-count: 1;
  column-gap: 8px;
  margin-bottom: 2.5rem;
}

/* Individual photo tile */
.gallery-item {
  position: relative;
  break-inside: avoid;       /* Never split a photo across columns */
  margin-bottom: 8px;
  overflow: hidden;
  border-radius: 3px;
  cursor: pointer;
  display: block;
  line-height: 0;            /* Remove gap below inline img */
  /* Red focus ring for keyboard users */
  outline-offset: 2px;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.55s ease;
  /* Placeholder dark bg if image not yet loaded */
  background-color: #1c1c1c;
}

/* Hover: zoom image + show overlay */
.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.04);
}

/* Red overlay with icon + label, revealed on hover/focus */
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(227, 0, 0, 0.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay,
.gallery-item:focus-visible .gallery-overlay {
  opacity: 1;
}

.gallery-overlay i {
  font-size: 1.75rem;
  color: var(--white);
}

.gallery-overlay span {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white);
}

/* CTA below gallery */
.portfolio-cta {
  text-align: center;
}

/* ============================================================
   11b. LIGHTBOX
============================================================ */

/* Full-screen backdrop */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background-color: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fade in/out */
  animation: lbFadeIn 0.25s ease forwards;
}

.lightbox[hidden] {
  display: none !important;
}

@keyframes lbFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Inner wrapper — prevents image from touching edges */
.lightbox-inner {
  position: relative;
  max-width: calc(100vw - 120px);
  max-height: calc(100vh - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.18s ease;
}

.lightbox-figure {
  margin: 0;
  text-align: center;
}

/* Photo */
#lightbox-img {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 3px;
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.6);
  /* Smooth swap between photos */
  transition: opacity 0.2s ease;
}

#lightbox-img.loading {
  opacity: 0.3;
}

/* Caption */
.lightbox-caption {
  margin-top: 0.85rem;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
}

/* Close button — top right */
.lightbox-close {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: var(--white);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition), border-color var(--transition);
  z-index: 2010;
}

.lightbox-close:hover {
  background-color: var(--red);
  border-color: var(--red);
}

/* Prev / Next navigation buttons */
.lightbox-prev,
.lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: var(--white);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition), border-color var(--transition);
  z-index: 2010;
}

.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

.lightbox-prev:hover,
.lightbox-next:hover {
  background-color: var(--red);
  border-color: var(--red);
}

/* Photo counter (e.g. "3 / 7") */
.lightbox-counter {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  z-index: 2010;
}


/* ============================================================
   12. TESTIMONIALS SECTION
============================================================ */

.testimonials {
  padding: var(--section-pad-y) 0;
  background-color: var(--red);
  color: var(--white);
}

.testimonials-header .section-label-testimonials {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
}

.testimonials h2 {
  color: var(--white);
}

/* 1-col mobile, 3-col desktop */
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* Testimonial card */
.testimonial-card {
  background-color: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding: 2rem 1.75rem;
  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

/* Star rating */
.stars {
  display: block;
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
}

/* Quote text */
.testimonial-card blockquote {
  font-size: 0.975rem;
  font-style: italic;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 1.25rem;
}

/* Quote mark */
.testimonial-card blockquote::before {
  content: '\201C';
  font-size: 2.5rem;
  color: rgba(255, 255, 255, 0.2);
  font-style: normal;
  line-height: 0;
  vertical-align: -0.55rem;
  margin-right: 0.2rem;
  font-family: Georgia, serif;
}

/* Attribution */
.testimonial-card cite {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.testimonial-card cite strong {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.03em;
}

.testimonial-card cite span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}


/* ============================================================
   13. LEAD CAPTURE / FORM SECTION
============================================================ */

.lead-capture {
  padding: var(--section-pad-y) 0;
}

/* Two-column layout on desktop */
.lead-capture-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

/* Left: text + contact info */
.lead-capture-text h2 {
  color: var(--white);
  margin-bottom: 1rem;
}

.lead-capture-text > p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 1.75rem;
}

/* Quick contact links */
.lead-contact-quick {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.quick-contact-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  font-weight: 600;
  transition: color var(--transition);
}

.quick-contact-item:hover {
  color: var(--red);
}

.quick-contact-item i {
  width: 1.5rem;
  text-align: center;
  color: var(--red);
  font-size: 1rem;
}

/* Trust badges */
.lead-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  padding: 0.4rem 0.85rem;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.trust-badge i {
  color: var(--red);
  font-size: 0.8rem;
}

/* Right: form card */
.lead-capture-form {
  background-color: var(--black-card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 3px solid var(--red);
  border-radius: 4px;
  padding: 2rem 1.75rem;
}

/* Form layout */
.form-group {
  margin-bottom: 1.2rem;
}

.form-group:last-of-type {
  margin-bottom: 0;
}

/* Two-column row for phone + email */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

/* Field labels */
.form-group label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0.4rem;
}

.required {
  color: var(--red);
  margin-left: 1px;
}

/* Input / select / textarea base */
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.93rem;
  padding: 0.72rem 0.95rem;
  transition:
    border-color var(--transition),
    background-color var(--transition);
  -webkit-appearance: none;
  appearance: none;
}

/* Select arrow */
.form-group select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.5rem;
}

.form-group select option,
.form-group select optgroup {
  background-color: var(--black);
  color: var(--white);
}

/* Placeholder text */
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

/* Focus state */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--red);
  background-color: rgba(255, 255, 255, 0.09);
}

/* Error state */
.form-group input.error,
.form-group select.error,
.form-group textarea.error {
  border-color: #FF5555;
}

/* Inline error message */
.field-error {
  display: block;
  font-size: 0.78rem;
  color: #FF7777;
  margin-top: 0.3rem;
  min-height: 1.1em;
  line-height: 1.3;
}

/* Textarea */
.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

/* Disclaimer line below submit */
.form-disclaimer {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  margin-top: 0.75rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.form-disclaimer i {
  font-size: 0.72rem;
}

/* ── Success Message ── */
.form-success {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--white);
}

.form-success[hidden] {
  display: none !important;
}

.form-success i {
  font-size: 3.5rem;
  color: #4CAF50;
  display: block;
  margin-bottom: 1.25rem;
}

.form-success h3 {
  color: var(--white);
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.form-success p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  line-height: 1.65;
}

.form-success a {
  color: var(--red);
  font-weight: 600;
}


/* ============================================================
   14. CONTACT INFO SECTION
============================================================ */

.contact-info {
  padding: var(--section-pad-y) 0;
}

.contact-info .section-header h2 {
  color: var(--black);
}

.contact-info .section-intro {
  color: var(--gray-text);
}

/* Contact item cards */
.contact-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.6rem 1.5rem;
  background-color: var(--gray-light);
  border-radius: 4px;
  border-left: 4px solid var(--red);
  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.contact-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

/* Icon circle */
.contact-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--red-muted);
  border-radius: 50%;
  flex-shrink: 0;
}

.contact-icon i {
  font-size: 1.15rem;
  color: var(--red);
}

.contact-item-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.contact-item-text strong {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--black);
}

.contact-item-text span,
.contact-item-text a {
  font-size: 0.95rem;
  color: var(--gray-text);
  line-height: 1.5;
}

.contact-item-text a {
  transition: color var(--transition);
  font-weight: 600;
}

.contact-item-text a:hover {
  color: var(--red);
}


/* ============================================================
   15. FOOTER
============================================================ */

.site-footer {
  background-color: var(--black);
  color: var(--white);
}

/* Main footer area */
.footer-main {
  padding-top: 4rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Grid: stacked on mobile, 3-col on desktop */
.footer-main-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

/* Brand column */
.footer-brand img {
  height: 48px;
  width: auto;
  object-fit: contain;
  margin-bottom: 0.85rem;
  filter: brightness(1.05);
}

.footer-tagline {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1.5rem;
}

/* Social icons */
.footer-social {
  display: flex;
  gap: 0.75rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.95rem;
  transition:
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition);
}

.social-link:hover {
  background-color: var(--red);
  border-color: var(--red);
  color: var(--white);
}

/* Quick links column */
.footer-links h4,
.footer-contact h4 {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1rem;
}

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

.footer-links a {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--transition);
  padding: 0.15rem 0;
}

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

/* Contact column */
.footer-contact address p {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.6rem;
  line-height: 1.5;
}

.footer-contact i {
  color: var(--red);
  width: 0.9rem;
  text-align: center;
  flex-shrink: 0;
  padding-top: 0.2rem;
}

.footer-contact a {
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--transition);
}

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

/* Copyright bar */
.footer-bottom {
  padding: 1.25rem 0;
}

.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  text-align: center;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.35);
}

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

.footer-legal a {
  color: rgba(255, 255, 255, 0.35);
  transition: color var(--transition);
}

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


/* ============================================================
   16. MOBILE STICKY CLICK-TO-CALL BAR
   Only visible on mobile (max-width: 767px).
   Fixed to bottom viewport edge.
============================================================ */

/* Hidden by default — shown via media query */
.mobile-call-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 998;
  background-color: var(--red);
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.4);
}

.mobile-call-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.9rem 1rem;
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mobile-call-bar i {
  font-size: 1rem;
  animation: phoneRing 3s ease-in-out infinite;
}

@keyframes phoneRing {
  0%, 70%, 100% { transform: rotate(0deg); }
  72%           { transform: rotate(-15deg); }
  76%           { transform: rotate(15deg); }
  80%           { transform: rotate(-10deg); }
  84%           { transform: rotate(10deg); }
  88%           { transform: rotate(-5deg); }
  92%           { transform: rotate(5deg); }
}


/* ============================================================
   17. RESPONSIVE BREAKPOINTS
============================================================ */

/* ────────────────────────────────────────────────────────────
   sm: 480px — small phones in landscape, larger phones
──────────────────────────────────────────────────────────── */
@media (min-width: 480px) {

  /* Hero: show line break in headline */
  .hero-headline br {
    display: block;
  }

  /* Hero: buttons side by side */
  .hero-ctas {
    flex-direction: row;
    justify-content: center;
  }

  /* Services: 2-column grid */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Additional services: 2 columns */
  .additional-services {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Quick contact in form section: side by side */
  .lead-contact-quick {
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* Gallery: 2-column masonry on small phones/landscape */
  .gallery-masonry {
    column-count: 2;
  }
}

/* ────────────────────────────────────────────────────────────
   md: 768px — tablets; nav switches from hamburger to desktop
──────────────────────────────────────────────────────────── */
@media (min-width: 768px) {

  :root {
    --section-pad-y: 5.5rem;
  }

  /* ── Show desktop nav, hide hamburger ── */
  .nav-links {
    display: flex;
  }
  .hamburger {
    display: none;
  }
  .mobile-menu {
    display: none !important;
  }

  /* ── Show desktop line break in About heading ── */
  .desktop-break {
    display: block;
  }

  /* ── Hero: enable parallax on desktop ── */
  .hero {
    background-attachment: fixed;
  }

  /* ── About: two-column layout ── */
  .about-grid {
    grid-template-columns: 1fr 1fr;
  }
  .about-image img {
    height: 460px;
  }

  /* ── Services: 3-column grid ── */
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Commercial services: already 3 cards — 3-col is perfect */
  .services-grid--commercial {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Additional services: 3 columns */
  .additional-services {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ── Who We Serve: 4-column row ── */
  .serve-tiles {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ── Gallery: 3-column masonry on tablets+ ── */
  .gallery-masonry {
    column-count: 3;
  }

  /* ── Portfolio: 2-column grid ── */
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Testimonials: 3-column ── */
  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ── Lead capture: 2-col (text + form) ── */
  .lead-capture-inner {
    grid-template-columns: 1fr 1.45fr;
    align-items: start;
  }

  /* ── Form row: phone + email side by side ── */
  .form-row {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }

  /* ── Contact info: 3 columns ── */
  .contact-details {
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
  }

  /* ── Footer: 3-column ── */
  .footer-main-grid {
    grid-template-columns: 1.5fr 1fr 1.2fr;
    align-items: start;
  }

  /* Footer bottom: inline row */
  .footer-bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  /* Hide mobile call bar on tablet+ */
  .mobile-call-bar {
    display: none !important;
  }
}

/* ────────────────────────────────────────────────────────────
   Mobile only — show call bar, add body padding
──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .mobile-call-bar {
    display: block;
  }
  /* Prevent content from being hidden behind sticky bar */
  body {
    padding-bottom: 60px;
  }
  /* Disable parallax on iOS (causes rendering bugs) */
  .hero {
    background-attachment: scroll;
  }
}

/* ────────────────────────────────────────────────────────────
   lg: 1024px — laptops; 4-column residential services
──────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {

  :root {
    --section-pad-y: 6rem;
  }

  /* Residential services: 4-column grid (7 cards = 4+3) */
  .services-grid:not(.services-grid--commercial) {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ────────────────────────────────────────────────────────────
   xl: 1280px — wide desktop; more nav spacing
──────────────────────────────────────────────────────────── */
@media (min-width: 1280px) {

  .nav-links {
    gap: 2.25rem;
  }

  .nav-links a {
    font-size: 0.82rem;
  }
}