/* Performance optimizations for slow connections */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Critical resource hints - added via HTML head but reinforced here */
:root{
  /* Dark mode palette */
  --ink:#a8d6ff;
  --text:#e9f3fa; /* primary text on dark background */
  --muted:#9aa9b3; /* secondary text */
  --accent:#e10600; /* brand accent */
  --card:#000000; /* card / panel background (true black) */
  --topbar-bg:#000000; /* headers and accent boxes use true black */
  --footer-bg:#000000; /* headers and accent boxes use true black */
  --bg:#2b2f32; /* center area background (muted blue-gray) */
  --soft:#2b2f32; /* softer panel uses same center tint */
  /* Center content background: darkened version of the review-panel hue
     Calculation: rgba(154,169,179,0.28) over black ≈ rgb(43,47,50) -> #2b2f32 */
  --divider:rgba(255,255,255,0.04); /* subtle divider on dark */
  --shadow:0 10px 30px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Reserve vertical scrollbar space to avoid layout shifts when content height changes */
html{height:100%;overflow-y:scroll;scrollbar-gutter:stable both-edges}
body{scrollbar-gutter:stable both-edges}
/* Reserve vertical scrollbar space to avoid layout shifts when content height changes
  (prevents the page jumping up/down when carousels animate heights). */
html{height:100%;overflow-y:scroll;scrollbar-gutter:stable both-edges}
/* Also apply to body to cover browsers that honor body scrolling contexts */
body{scrollbar-gutter:stable both-edges}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:28px}
.row{display:flex;gap:16px}
.between{justify-content:space-between}
.center{align-items:center}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr} .nav{display:none}}

/* Simple Mobile Navigation */
.mobile-menu {
  display: none;
}

@media (max-width: 900px) {
  .mobile-menu {
    display: block;
    position: relative;
  }

  .mobile-btn {
    background: #e10600;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }

  .mobile-btn:hover {
    background: #b8050d;
  }

  .mobile-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid #e10600;
    border-radius: 8px;
    min-width: 200px;
    z-index: 1000;
    margin-top: 5px;
  }

  .mobile-dropdown.show {
    display: block;
  }

  .mobile-dropdown a {
    display: block;
    padding: 15px 20px;
    color: #e10600;
    text-decoration: none;
    border-bottom: 1px solid rgba(225,6,0,0.1);
    font-weight: 500;
  }

  .mobile-dropdown a:hover {
    background: rgba(225,6,0,0.1);
    color: white;
  }

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

.topbar{position:sticky;top:0;background:var(--topbar-bg);border-bottom:1px solid rgba(255,255,255,0.03);backdrop-filter:saturate(120%) blur(6px);z-index:60}
.brand{display:flex;gap:12px;align-items:center;font-weight:800;color:var(--text);letter-spacing:.2px}
.logo{width:64px;height:64px;border-radius:10px;object-fit:cover} /* bigger logo */
.nav a{margin:0 10px;color:var(--text)}
.nav .btn{margin-left:8px}



.hero{background:transparent;position:relative;overflow:visible}
.hero .hero-media{position:absolute;inset:0;background-image:var(--hero, url('assets/hero-placeholder.jpg'));background-size:cover;background-position:center;opacity:0;z-index:-2}

/* video b-roll placed under content but above the static hero fallback
  Use fixed positioning to avoid Safari layout/clipping issues and ensure
  the video can extend beyond the hero element to cover the page down to
  the #text-call section. The script sets top/height dynamically. */
.hero-video{position:fixed;left:0;right:0;top:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none;background:#000;transform:translateY(var(--hero-video-offset,0px));will-change:transform,opacity}

/* Performance optimizations for slow connections */
.hero.video-loading .hero-video{opacity:0;transition:opacity 0.3s ease}
.hero.video-loaded .hero-video{opacity:1}
.hero.video-fallback .hero-video{display:none !important}
.hero.video-fallback .hero-media{opacity:1}

/* Improved static fallback for when video fails or is disabled */
.hero .hero-media{
  opacity:1;
  transition:opacity 0.5s ease;
}
.hero.video-loaded .hero-media{opacity:0}
.hero .container{position:relative;z-index:2}
.hero-inner{
  padding:28px 0;
}
.hero h1{
  font-size: clamp(30px, 5vw, 46px); 
  line-height:1.2; 
  margin:0 0 10px; 
  color:var(--text);
  /* Enhanced text shadow for readability */
  text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.9);
}
.hero p{
  color:#d4e7f7; /* Brighter blue-white for better visibility over video */
  margin:0 0 18px;
  /* Enhanced text shadow for better contrast over video */
  text-shadow: 0 2px 6px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.9);
  font-weight: 500; /* Slightly bolder for better readability */
}
.trust{
  color:var(--muted);
  font-size:14px;
  margin-top:8px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.section{padding:48px 0}
.card{background:var(--card);border:1px solid var(--divider);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
.card h3{margin:0 0 6px}

/* Make service cards transparent on main page */
.cards .card{
  background:rgba(0,0,0,0.04) !important;
  border:1px solid rgba(255,255,255,0.05) !important;
  box-shadow:none !important;
  backdrop-filter:blur(1px);
}

/* Enhanced text readability for service cards over video */
.cards .card h3{
  text-shadow: 0 2px 6px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.9);
  color: var(--text);
  font-weight: 600;
}

.cards .card p{
  text-shadow: 0 1px 4px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.8);
  color: #d4e7f7; /* Same brighter color as hero subtitle */
}

/* Mobile: make even more transparent but enhance text readability */
@media (max-width: 767px) {
  .cards .card{
    background:rgba(0,0,0,0.02) !important;
  }
  
  .cards .card h3{
    text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,1);
  }
  
  .cards .card p{
    text-shadow: 0 2px 6px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.9);
  }
}

/* Review cards: background matching hero paragraph text (muted) for a subtle panel */
.card.review-card{
  /* Use true black for review/service boxes so they stand out from the center tint */
  background: var(--card) !important;
  color: var(--text);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  padding:20px;
  margin-bottom:18px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  position:relative; /* enables z-index */
  z-index:1;
}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;background:var(--accent);color:#fff;font-weight:700;letter-spacing:.3px}
.btn:hover{text-decoration:none;filter:brightness(.96)}
.btn.ghost{background:transparent;border:1.5px solid var(--accent);color:var(--accent)}
.btn.small{padding:8px 12px;font-size:14px}

/* Enhanced buttons for hero section over video */
.hero .btn{
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
  backdrop-filter: blur(1px);
}
.hero .btn.ghost{
  background:rgba(255,255,255,0.1);
  backdrop-filter: blur(2px);
  border:1.5px solid rgba(225,6,0,0.9);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Mobile enhancements for better readability */
@media (max-width: 767px) {
  .hero h1 {
    /* Stronger text shadow on mobile for clear readability */
    text-shadow: 0 3px 12px rgba(0,0,0,0.95), 0 1px 4px rgba(0,0,0,1);
  }
  .hero p {
    /* Enhanced mobile text shadow */
    text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,1);
  }
}

.page-hero{background:var(--soft);border-bottom:1px solid var(--divider)}
.page-hero .container{padding-top:48px;padding-bottom:24px}

/* Carousel: single-image selector replacing multi-column gallery - v2024 */
.carousel{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  max-width:980px;
  margin:18px auto;
  min-height:520px;
}
.carousel-frame{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  position:relative;
  height:auto;
  overflow:hidden;
  transition:height 420ms cubic-bezier(.22,.9,.28,1);
}
.carousel-frame img{
  width:100%;
  height:auto;
  max-height:760px;
  object-fit:contain;
  border-radius:12px;
  border:1px solid var(--divider);
  box-shadow:var(--shadow);
  background:var(--card);
  padding:6px;
  opacity:1;
  transition:opacity 300ms ease;
}
.carousel-prev, .carousel-next{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  background:rgba(0,0,0,0.06) !important;
  border:none !important;
  color:var(--text) !important;
  font-size:36px !important;
  width:64px !important;
  height:64px !important;
  border-radius:10px !important;
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:20 !important;
}
.carousel-prev{
  left:12px !important;
}
.carousel-next{
  right:12px !important;
}
.carousel-prev:hover, .carousel-next:hover{
  filter:brightness(.96);
}
.carousel-caption{
  color:var(--muted);
  font-size:14px;
  text-align:center;
  padding:8px 12px;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.05));
  border-radius:6px;
  z-index:5;
}

@media (max-width:520px){
  .carousel-prev,.carousel-next{position:static;transform:none;width:48px;height:48px;font-size:28px;margin:6px}
  .carousel{flex-direction:column}
}

@media (min-width:901px){
  .carousel{min-height:640px}
}
@media (max-width:900px){
  .carousel{min-height:520px}
}
@media (max-width:520px){
  .carousel{min-height:380px}
}

/* Remove before/after grid quirks: ensure single-image mode doesn't create blanks */
.beforeafter{display:block}
.beforeafter img{width:100%;height:auto}

/* Lightbox overlay styles (gw = gallery wide) */
.gw-overlay{position:fixed;inset:0;background:rgba(2,6,23,0.8);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease;z-index:2147483647}
.gw-overlay.open{opacity:1;visibility:visible}
/* make inner modal a small centered panel instead of full-bleed */
.gw-inner{position:relative;max-width:780px;width:min(88vw,780px);max-height:64vh;padding:12px 18px;background:rgba(10,14,18,0.92);border-radius:12px;display:flex;align-items:center;justify-content:center;gap:14px}
.gw-img{max-width:60%;max-height:52vh;border-radius:8px;box-shadow:0 20px 44px rgba(0,0,0,.6);display:block;transition:transform .18s ease}
.gw-close{position:absolute;right:10px;top:8px;background:rgba(0,0,0,0.25);border:none;color:#fff;font-size:30px;line-height:1;padding:6px 10px;border-radius:6px;cursor:pointer}
.gw-overlay:focus{outline:none}

/* navigation arrows and caption: place arrows inside the modal, vertically centered */
.gw-prev,.gw-next{position:relative;background:rgba(255,255,255,0.08);border:none;color:#fff;font-size:34px;width:72px;height:72px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter: blur(6px);box-shadow:0 6px 18px rgba(0,0,0,.5);z-index:30}
.gw-prev{order:0;margin-left:6px}
.gw-next{order:2;margin-right:6px}
.gw-prev:hover,.gw-next:hover{background:rgba(255,255,255,0.16)}
.gw-caption{position:absolute;left:16px;right:16px;bottom:8px;color:#fff;text-align:center;font-size:14px;padding:6px 10px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.45));border-radius:6px}

/* ensure arrows are inside the modal panel on small screens too */
@media (max-width:700px){
  .gw-img{max-width:78%;}
  .gw-prev,.gw-next{width:48px;height:48px;font-size:22px}
}

/* reduce the overlay footprint on small screens */
@media (max-width:480px){
  .gw-inner{width:94vw;padding:8px}
  .gw-prev,.gw-next{width:40px;height:56px;font-size:28px}
  .gw-close{font-size:24px}
}

/* lock body scroll while overlay is open */
body.gw-open{overflow:hidden;height:100vh}

details{background:var(--card);border:1px solid var(--divider);border-radius:12px;padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow)}

/* Make "Prefer to text or call" box transparent */
#text-call details{
  background:rgba(0,0,0,0.04) !important;
  border:1px solid rgba(255,255,255,0.05) !important;
  box-shadow:none !important;
  backdrop-filter:blur(1px);
}

/* Mobile: make "text or call" box more transparent too */
@media (max-width: 767px) {
  #text-call details{
    background:rgba(0,0,0,0.02) !important;
  }
}

/* Style Google review button in footer to match red Text/Call button */
.footer .btn.ghost {
  background:transparent !important;
  border:1.5px solid var(--accent) !important;
  color:var(--accent) !important;
  padding:12px 18px;
  border-radius:10px;
  font-weight:700;
  letter-spacing:.3px;
}

/* More specific selector for the Google review link */
.footer a[href*="google.com"].btn.ghost,
.footer a[href*="g.page"].btn.ghost {
  background:transparent !important;
  border:1.5px solid var(--accent) !important;
  color:var(--accent) !important;
  font-weight:700;
  letter-spacing:.3px;
}

/* Even more specific selector to override any caching issues */
footer.footer a.btn.ghost {
  background:transparent !important;
  border:1.5px solid var(--accent) !important;
  color:var(--accent) !important;
  font-weight:700 !important;
  letter-spacing:.3px !important;
  text-decoration:none !important;
}

/* Mobile: keep red styling */
@media (max-width: 767px) {
  .footer .btn.ghost,
  .footer a[href*="google.com"].btn.ghost,
  .footer a[href*="g.page"].btn.ghost,
  footer.footer a.btn.ghost {
    background:transparent !important;
    border:1.5px solid var(--accent) !important;
    color:var(--accent) !important;
  }
}

/* Red "View All Services" button */
.btn.services-btn {
  background:transparent !important;
  border:1.5px solid var(--accent) !important;
  color:var(--accent) !important;
  padding:12px 18px;
  border-radius:10px;
  font-weight:700;
  letter-spacing:.3px;
  text-decoration:none;
  display:inline-block;
}

/* Red Google Review button - new specific class to avoid conflicts */
.btn.review-btn-red {
  background:transparent !important;
  border:1.5px solid var(--accent) !important;
  color:var(--accent) !important;
  padding:12px 18px !important;
  border-radius:10px !important;
  font-weight:700 !important;
  letter-spacing:.3px !important;
  text-decoration:none !important;
  display:inline-block !important;
}

.footer{background:var(--footer-bg);color:var(--text);margin-top:40px}
.footer a{color:var(--ink)}
.footer .fine{color:var(--muted)}
.footnote{border-top:1px solid var(--divider);margin-top:18px;padding-top:18px}

.form form input, .form form textarea, .form form select{width:100%;padding:10px;border:1px solid var(--divider);border-radius:10px}
.form label{font-weight:600;color:var(--text)}
.hidden{display:none}

/* FAQ answers: prefix 'Answer:' and color replies with brand accent (red) */
.faq-answer, .faq-answer * { color: var(--accent) !important; font-weight:600 !important; }

/* Ensure FAQ answers inside details are red (including links) and questions (summary) keep the normal text color */
details summary { color: var(--text); font-weight:700 }
details p.faq-answer { color: var(--accent) !important; font-weight:600 !important; }
details p.faq-answer a, details p.faq-answer span, details p.faq-answer strong { color: var(--accent) !important; }

/* v17 additions */
.review-highlight{background:var(--card);color:var(--text);border-top:2px solid var(--accent);border-bottom:2px solid var(--accent)}
.review-highlight .card{background:transparent;border:1px solid rgba(255,255,255,0.06);box-shadow:none}
.review-highlight .card p{color:var(--text)}
.footer .contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;background:var(--card);padding:20px;border-radius:10px}
@media (max-width:900px){.footer .contact-grid{grid-template-columns:1fr}}
/* footer uses card background so it reads as a dark panel */
.footer{background:var(--card);color:var(--text)}
.footer h4{color:var(--text);margin-top:0}
.footer a{color:var(--ink)}
.footer .footnote{border-top:1px solid var(--divider)}
/* Nav CTA as Request a Quote button */
.nav .btn.quote{background:#e10600;color:#fff;border:none}