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

/* ================= BASE TYPOGRAPHY ================= */
body {
  background: #141416; /* dark site base */
  color: #fff;         /* default text white */
  font-family: 'DM Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 { font-family:'Rajdhani', sans-serif; }
p { font-family:'DM Sans', sans-serif; }
a { text-decoration:none !important; transition:all .3s ease; color:inherit; }

/* ================= HEADER ================= */
header, .header-wrapper {
  background: #000 !important;
  color: #fff !important;
}
header a { color: #fff !important; }
.veteran-badge{
  display:inline-block;
  width:88px;
  height:auto;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.4));
}

.nav-toggle{
  background:transparent;
  border:1px solid rgba(146,208,216,.35);
  border-radius:12px;
  padding:8px 10px;
  display:none;
  align-items:center;
  gap:10px;
  cursor:pointer;
  color:#f4fbff;
  transition:background .2s ease, border-color .2s ease;
}
.nav-toggle:focus-visible{
  outline:2px solid #92d0d8;
  outline-offset:3px;
}
.nav-toggle__icon{
  position:relative;
  width:22px;
  height:16px;
  display:inline-flex;
  flex-direction:column;
  justify-content:space-between;
}
.nav-toggle__icon span{
  display:block;
  height:2px;
  width:100%;
  background:#f4fbff;
  transition:transform .2s ease, opacity .2s ease;
}
body.nav-open .nav-toggle__icon span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
body.nav-open .nav-toggle__icon span:nth-child(2){
  opacity:0;
}
body.nav-open .nav-toggle__icon span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.nav-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:24px;
}
.nav-list a{
  position:relative;
  padding:6px 2px;
}
.nav-socials{
  display:none;
  gap:16px;
  margin-top:18px;
}
.nav-socials a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:14px;
  border:1px solid rgba(146,208,216,.28);
  background:rgba(146,208,216,.12);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.nav-socials a:hover,
.nav-socials a:focus{
  background:rgba(146,208,216,.24);
  border-color:rgba(146,208,216,.42);
  transform:translateY(-1px);
}
.nav-socials img{
  width:28px;
  height:28px;
  display:block;
}
.nav-list a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-4px;
  height:2px;
  background:linear-gradient(90deg,#1f6fcb,#3aa9d6);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
}
.nav-list a:hover::after,
.nav-list a:focus::after{
  transform:scaleX(1);
}

@media (max-width: 991.98px){
  .nav-toggle{ display:inline-flex; }
  .header-wrapper{
    position:relative;
    gap:16px;
  }
  #primaryNav{
    position:absolute;
    top:100%;
    right:0;
    left:0;
    width:100%;
    background:rgba(12,20,28,.94);
    border:1px solid rgba(146,208,216,.2);
    border-radius:16px;
    padding:18px 20px;
    margin-top:12px;
    display:none;
    box-shadow:0 20px 40px rgba(0,0,0,.35);
    z-index:20;
  }
  body.nav-open #primaryNav{
    display:block;
  }
  .nav-list{
    flex-direction:column;
    gap:14px;
  }
  .nav-list a{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
    border-radius:999px;
    background:#93C3C9; /* solid brand accent */
    border:1px solid #93C3C9;
    color:#141416 !important; /* dark text for contrast */
  }
  .nav-list a::after{ display:none; }
  .nav-list a:hover,
  .nav-list a:focus{
    background:#7fb3bb; /* slightly darker on hover */
    border-color:#7fb3bb;
  }
  .nav-socials{
    display:flex;
    justify-content:center;
  }
}

.nav-list a{
  color:#f1f8fb !important;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:.85rem;
}
.nav-list a:hover,
.nav-list a:focus{
  color:#92d0d8 !important;
}

/* Center logo on mobile */
@media (max-width: 767.98px){
  .header-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    padding:14px 0;
    position:relative;
  }
  .nav-toggle{
    position:absolute;
    left:clamp(10px, 5vw, 18px);
    top:50%;
    transform:translateY(-50%);
    margin:0;
    display:inline-flex;
    z-index:5;
  }
  .logo{
    display:flex;
    text-align:center;
    justify-content:center !important;
    align-items:center !important;
    flex-direction:column;
    width:100%;
  }
  .logo img{
    max-width:min(68vw, 260px);
    height:auto;
  }
}

/* ================= TOPBAR (new) ================= */
.topbar {
  background: #000;
  color: #fff !important;
  font-size: 14px;
  line-height: 1;
}
.topbar a { color: #fff !important; opacity: .95; }
.topbar a:hover, .topbar a:focus { opacity: 1; text-decoration: none; color:#fff !important; }
.topbar img { width: 24px; height: 24px; display: inline-block; vertical-align: middle; filter: invert(0) !important; }
.topbar i { font-size: 14px; line-height: 1; color:#fff !important; }
.topbar .gap-1 { gap: .25rem; }
.topbar .gap-3 { gap: 1rem; }
.topbar-location{
  font-weight:600;
  letter-spacing:.05em;
  color:#a6e0ea;
}
.topbar-icons{
  display:flex;
  align-items:center;
  gap:1rem;
}
.topbar-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:10px;
  background:rgba(146,208,216,.18);
  border:1px solid rgba(146,208,216,.32);
  color:#fff;
  font-size:1.15rem;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.topbar-icon:hover,
.topbar-icon:focus{
  background:rgba(146,208,216,.26);
  border-color:rgba(146,208,216,.52);
  transform:translateY(-1px);
}
@media (max-width: 767.98px){
  .topbar-icons{
    flex-wrap:wrap;
    justify-content:center;
    gap:.6rem;
  }
  .topbar-icon{
    width:40px;
    height:40px;
    font-size:1.35rem;
    border-radius:14px;
    justify-content:center;
  }
  .topbar-socials{
    display:none !important;
  }
}

/* ================= HERO ================= */
.hero-sec {
  background:#000 !important;
  padding-top:0 !important;
  margin-top:0 !important;
  position:relative;
  z-index:1;
}
.hero-sec::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(130deg, rgba(8,15,22,.82) 0%, rgba(8,15,22,.65) 45%, rgba(8,15,22,.85) 100%),
    url("../images/garage-doors-bg.jpg") center/cover no-repeat;
  opacity:.95;
  pointer-events:none;
  z-index:0;
}
.hero-sec > *{
  position:relative;
  z-index:1;
}
.gradient-hd { background:linear-gradient(90deg,#93D1D9,transparent); }
.hero-txt, .hero-txt * { color:#fff !important; }
.hero-txt .fa-star { color:#FFD700 !important; }

/* Static hero visual (single best image) */
.hero-visual{ margin-top:10px; }
.hero-visual img{ width:100%; height:auto; display:block; border:0; border-radius:12px; }
@media (min-width: 992px){
  .hero-wrapper{ display:grid; grid-template-columns: 1.1fr 1fr; gap:24px; align-items:center; }
  .hero-visual{ margin-top:0; }
}

.hero-txt{
  position:relative;
  z-index:1;
  max-width:560px;
}
.hero-txt h1{
  font-size:clamp(2.15rem, 4.8vw, 3.15rem);
  line-height:1.16;
  letter-spacing:-.01em;
  margin:0;
}
.hero-container{
  margin-top:0;
  padding:48px 0;
}
.hero-subheadline{
  font-size:1.25rem;
  margin:18px 0 0;
  color:#e1f6ff;
  max-width:32rem;
  line-height:1.5;
}
.hero-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  margin:28px 0 16px;
}
.hero-btn{
  font-weight:700;
  padding:12px 28px;
  border-radius:999px;
  box-shadow:0 14px 28px rgba(0,0,0,.45);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.hero-cta-note{
  font-size:.98rem;
  color:rgba(228,244,249,.8);
  max-width:22rem;
}
.hero-highlights{
  list-style:none;
  padding:0;
  margin:12px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  font-weight:600;
}
.hero-highlights li{
  position:relative;
  padding-left:18px;
}
.hero-highlights li::before{
  content:"\2022";
  position:absolute;
  left:0;
  top:0;
  font-size:1.3em;
  line-height:1;
  color:#92d0d8;
}
@media (max-width: 767.98px){
  .hero-subheadline{ font-size:1.1rem; }
  .hero-txt{
    text-align:center;
    margin:0 auto;
  }
  .hero-txt h1{
    font-size:clamp(1.85rem, 7.2vw, 2.4rem);
    line-height:1.2;
  }
  .hero-cta{ flex-direction:column; align-items:center; width:100%; }
  .hero-cta-note{ max-width:24rem; }
  .hero-highlights{
    flex-direction:column;
    gap:10px;
    align-items:flex-start;
    text-align:left;
    margin:0 auto;
  }
  .hero-highlights li{
    padding-left:16px;
  }
}

/* Owner intro tone in "Choose Zero" */
.owner-intro{
  margin:.5rem 0 1rem;
  color:#e9f4ff;
  line-height:1.5;
}
.choose-zero{
  background:#0f161d;
  padding: clamp(48px, 10vw, 80px) 0;
}
.zero-wrapper{
  display:flex;
  justify-content:center;
}
.zero-text{
  max-width:780px;
  text-align:center;
}
.zero-text .color-hd{
  font-size:1rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#93d1d9;
  display:block;
  margin-bottom:6px;
}
.zero-text .hero-list ul{
  margin:20px auto 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px 24px;
}
.zero-text .hero-list li{
  position:relative;
  padding-left:18px;
  color:#e9f4ff;
  font-weight:500;
}
.zero-text .hero-list li::before{
  content:"\2713";
  position:absolute;
  left:0;
  top:0;
  color:#93d1d9;
  font-size:.95rem;
}
.zero-visual{
  margin:26px auto 18px;
  display:flex;
  justify-content:center;
}
.zero-visual img{
  max-width:220px;
  width:100%;
  height:auto;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.45));
}
.brand-showcase{
  margin:32px auto 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.brand-showcase__title{
  text-transform:uppercase;
  letter-spacing:.08em; /* ~1px at this size for readability */
  font-size:.78rem;
  color:#f4fbff; /* high-contrast on dark background */
  font-weight:600;
}
.brand-showcase__logos{
  display:flex;
  gap:clamp(16px, 4vw, 32px);
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  position:relative;
}
.brand-showcase__logos::before{
  content:"";
  position:absolute;
  inset:-12% -8%;
  background:radial-gradient(55% 70% at center, rgba(147,209,217,.35), rgba(147,209,217,0));
  filter:blur(28px);
  opacity:.9;
  pointer-events:none;
  z-index:0;
}
.brand-showcase__logos img{
  position:relative;
  z-index:1;
  height: clamp(38px, 9vw, 64px);
  width:auto;
  filter:grayscale(18%) brightness(1.06) drop-shadow(0 0 24px rgba(147,209,217,.25));
  opacity:.9;
  transition:opacity .2s ease, filter .2s ease, transform .2s ease;
}
.brand-showcase__logos img:hover,
.brand-showcase__logos img:focus-visible{
  filter:brightness(1.1) drop-shadow(0 0 32px rgba(147,209,217,.45));
  opacity:1;
  transform:translateY(-2px);
}
.choose-zero .btn{
  min-width:220px;
  border-radius:999px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:12px 28px;
}
@media (min-width: 768px){
  .zero-text .hero-list ul{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 767.98px){
  .choose-zero{
    padding:40px 0;
  }
  .zero-text .hero-list ul{
    gap:10px;
  }
}
/* ======== MARQUEE (self-contained + hardened) ======== */
/* Subtle gap under the strip */
.marquee { margin-bottom: 14px; }
@media (min-width:768px){ .marquee { margin-bottom: 20px; } }

/* Base strip */
.text-slider{
  overflow:hidden; white-space:nowrap;
  background:#92D0D8; color:#000;
  font-size:26px; font-weight:bold;
  padding:15px 0; position:relative; z-index:0;
}

/* Moving tape */
.text-track{
  display:inline-block;
  padding-left:100%;               /* start off-screen to the right */
  will-change: transform;          /* hardening */
  animation: marquee 40s linear infinite;
}

.text-track span{ margin-right:50px; font-family:'Rajdhani', sans-serif; }
.marquee-emergency{
  color:#ff3d3d;
  font-weight:800;
}

/* Actual motion */
@keyframes marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }   /* sweep full tape width */
}

/* Phone tweaks */
@media (max-width:767.98px){
  .text-slider{ font-size:20px; padding:12px 0; }
  .text-track{ animation-duration:48s; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .text-track{ animation:none !important; }
}


/* ================= STICKY CTA ================= */
:root { --cta-h: 60px; }
.sticky-cta {
  position:fixed; left:0; right:0; bottom:0;
  display:none; align-items:center; justify-content:center;
  gap:1rem; height:calc(var(--cta-h) + env(safe-area-inset-bottom,0));
  background:linear-gradient(110deg,#ff6f33,#ff9a42);
  color:#fff; font-weight:700;
  z-index:10000; box-shadow:0 -6px 24px rgba(0,0,0,.32);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom,0)) 20px;
  font-size: 1.1em;
  border:0; cursor:pointer;
  border-radius:24px 24px 0 0;
  text-align:left;
}
.sticky-cta__icon {
  font-size:1.6em;
  margin-right:6px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.25));
}
.sticky-cta__text {
  font-family:"Rajdhani", sans-serif;
  letter-spacing:.2px;
  font-size:1.05em;
  line-height:1.2;
  display:flex;
  flex-direction:column;
}
.sticky-cta__text strong{
  font-size:1.05em;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.sticky-cta__text em{
  font-style:normal;
  font-size:1.2em;
  letter-spacing:.05em;
}
@media (max-width:767.98px){
  .sticky-cta{ display:flex; }
  body{ padding-bottom:calc(var(--cta-h) + env(safe-area-inset-bottom,0)) !important; }
}

/* Choice sheet (action sheet style) */
.cta-choice-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  z-index:10010;
}
.cta-choice-sheet{
  position:fixed; left:50%; bottom: calc(var(--cta-h) + 8px);
  transform:translateX(-50%);
  background:#0f0f10; color:#fff; border:1px solid rgba(255,255,255,.12);
  border-radius:14px; box-shadow:0 20px 40px rgba(0,0,0,.45);
  padding:14px; z-index:10020; width:min(92vw, 420px);
}
.cta-choice-actions{ display:flex; gap:10px; }
.cta-choice-btn{
  flex:1 1 0;
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 14px; border-radius:10px; font-weight:700; text-decoration:none;
  border:1px solid rgba(255,255,255,.15);
  background:#1b1b1e; color:#fff;
  transition:transform .08s ease, background .15s ease;
}
.cta-choice-btn:active{ transform:scale(.98); }
.cta-choice-call{ background:#154b2a; border-color:#2f8f52; }
.cta-choice-text{ background:#1c2e5a; border-color:#3a68d1; }
.cta-choice-cancel{
  width:100%; margin-top:10px; padding:10px 12px;
  border-radius:10px; background:#2a2a2e; color:#fff; border:1px solid rgba(255,255,255,.12);
  font-weight:600;
}
.cta-choice-btn:focus-visible, .cta-choice-cancel:focus-visible{
  outline:2px solid #FFD700; outline-offset:2px;
}
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ================= SERVICES ================= */
.service-sec {
  background:url(../images/background.png) center/cover no-repeat;
  padding: clamp(50px, 8vw, 100px) clamp(16px, 5vw, 48px);
  position:static !important; margin:40px 0 0 !important;
  padding-top: clamp(80px, 11vw, 140px);
}

#services.service-sec{ padding-bottom: clamp(40px, 6vw, 80px); overflow: visible; }

.service-sec .process .left{
  margin-top:clamp(10px, 5vw, 36px);
}
.service-sec .process .left .service-hd{
  display:inline-block;
  color:#0b1015;
  letter-spacing:.06em;
}
.service-sec .process .left .desc{
  color:#161d22;
  font-weight:500;
}

/* Skewed black cards */
#services .card{ background:transparent; transform:skewX(-12deg); margin:0; border:0; }
#services .card .card-inner{
  background:#141416; color:#fff;
  padding:20px 18px 28px;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.15);
  transform:skewX(12deg);
  display:flex; column-gap:24px;
}
#services .card .card-content h3{
  margin:0 0 8px;
  font-size:1.125rem;
  line-height:1.25;
  display:flex;
  align-items:center;
  gap:12px;
}
#services .card .card-content h3 i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:rgba(146,208,216,.12);
  color:#fff;
  flex:0 0 42px;
  font-style:normal;
  position:relative;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
#services .card .card-content h3 i::before{
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:1.1rem;
}
#services .card .card-content h3 .icon-spring::before{ content:"\f0e7"; }
#services .card .card-content h3 .icon-door::before{ content:"\f52a"; }
#services .card .card-content h3 .icon-opener::before{ content:"\f2f2"; }
#services .card .card-content h3 .icon-tools::before{ content:"\f0ad"; }
#services .card .card-content h3 .icon-checklist::before{ content:"\f46d"; }
#services .card .card-content h3 .icon-emergency::before{ content:"\f197"; }
#services .card .card-content h3 .icon-spring{ background:linear-gradient(135deg,#3aa9d6,#1f6fcb); }
#services .card .card-content h3 .icon-door{ background:linear-gradient(135deg,#a463f2,#5a2fd9); }
#services .card .card-content h3 .icon-opener{ background:linear-gradient(135deg,#f57f17,#ef3c56); }
#services .card .card-content h3 .icon-tools{ background:linear-gradient(135deg,#1fcd7d,#0f804f); }
#services .card .card-content h3 .icon-checklist{ background:linear-gradient(135deg,#f2a93b,#f56d1f); }
#services .card .card-content h3 .icon-emergency{ background:linear-gradient(135deg,#f44336,#b91e3d); }
#services .card .card-content p{ margin:0 0 10px; line-height:1.5; color:#e9f4ff; }
#services .card .card-content .card-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  color:#92d0d8;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:.85rem;
  border-bottom:1px solid rgba(146,208,216,.4);
  width:fit-content;
  padding-bottom:3px;
}
#services .card .card-content .card-cta::after{
  content:"\f061";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:.75rem;
  transition:transform .2s ease;
}
#services .card .card-content .card-cta:hover,
#services .card .card-content .card-cta:focus{
  color:#b3e8f1;
  border-bottom-color:rgba(179,232,241,.8);
}
#services .card .card-content .card-cta:hover::after,
#services .card .card-content .card-cta:focus::after{
  transform:translateX(3px);
}

.process{ display:flex; align-items:stretch; gap:40px; }
.process .left{ flex:0 0 36%; position:relative; top:auto; align-self:flex-start; }
.process .divider{ flex:0 0 34px; position:relative; }
.process .right{ flex:1 1 auto; display:flex; flex-direction:column; gap:20px; }

#arrow{ position:absolute; left:67%; transform:translate(-50%,-50%); transition:.45s all ease; filter:drop-shadow(0 6px 18px rgba(0,0,0,.25)); pointer-events:none; }

@media (max-width:900px){
  .process{ flex-direction:column; gap:24px; }
  .divider{ display:none !important; }
  #arrow{ display:none !important; }
}

/* ================= FAQ ================= */
#faq-sec { background:#141416; color:#fff; padding:100px 0 !important; }

.faq-content img { display:block; margin:20px 0; }
.faq-content img:last-child { margin-top:60px; width:90%; }

.que-container{ padding:0 50px; display:flex; flex-direction:column; justify-content:center; width:60% !important; }
.question{ border-top:1px solid #131313; margin:10px 0; }
.question:last-child{ border-bottom:1px solid #131313; }
.question button{ width:100%; display:flex; justify-content:space-between; align-items:center; background:transparent; font-size:16px; color:#fff !important; text-transform:capitalize; font-family:'DM Sans'; font-weight:bold; letter-spacing:1px; cursor:pointer; transition:color .3s; border:1px solid; padding:20px 30px; }
.question button i{ color:#f8fdff60; transition:transform .3s; }
.question p{ color:#939393; line-height:1.6; height:0; overflow:hidden; transition:all .3s; }
.question button.show + p{ height:auto; padding:20px 30px; background:#93C3C9; color:#141416; font-size:18px !important; font-family:'DM Sans' !important; line-height:26px !important; }
.question button.show{ color:#141416; border:unset !important; background:#93C3C9; }
.question button.show i{ transform:rotate(180deg); color:#141416; }
.question button:focus { outline:unset; }
/* Restore visible keyboard focus for accessibility */
.question button:focus-visible{
  outline:2px solid #FFD700;
  outline-offset:2px;
  box-shadow: 0 0 0 2px rgba(20,20,22,0.6);
}

@media only screen and (min-width: 300px) and (max-width: 519px) {
  .que-container {
    width: 100% !important;
    padding: 18px 0px;
  }
}

/* ================= LOCATE ================= */
.locate-sec{
  background:linear-gradient(130deg,#0b2f4d 0%, #081522 100%);
  padding:60px 0;
  position:relative;
}
.locate-sec::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top right, rgba(146,208,216,.28), transparent 55%);
  opacity:.9;
  pointer-events:none;
}
.locate-sec .container{
  position:relative;
  z-index:1;
  margin-top:0 !important;
}
.locate-sec .section-heading{
  display:inline-block;
  background:rgba(146,208,216,.18);
  padding:8px 18px;
  border-radius:999px;
  color:#f4fbff;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:2rem;
}
.locate-sec .lead{
  color:#d9f0f5;
  margin-top:18px;
}

/* Service Areas grid */
.service-area{
  display:grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 14px;
}
.service-area__group{
  background:#0f0f10;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:14px 16px;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.service-area__title{
  font-family:'Rajdhani', sans-serif;
  font-size: 1.15rem;
  margin: 0 0 8px;
  color:#eaf7fb;
}
.service-area__list{
  list-style:none;
  padding:0; margin:0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px 18px;
}
.service-area__list li{
  display:flex; align-items:center; gap:8px;
  color:#e9f4ff;
}
.service-area__meta{
  display:flex;
  flex-direction:column;
  line-height:1.3;
}
.service-area__meta strong{
  font-weight:700;
  color:#f4fbff;
}
.service-area__zip{
  font-size:.9rem;
  color:rgba(233,244,255,.75);
}
.service-area .pin{ filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.service-area__note{
  margin-top:24px;
  color:rgba(233,244,255,.78);
  font-size:.95rem;
  max-width:640px;
}
@media (min-width: 768px){
  .service-area{ grid-template-columns: repeat(3, 1fr); }
  .service-area__list{ grid-template-columns: 1fr; }
}

/* ================= REVIEWS ================= */
.reviews-sec{
  background:#0f141c;
  padding: clamp(48px, 8vw, 88px) 0;
  text-align:center;
}
.reviews-sec h2{
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom:14px;
  color:#f4fbff;
}
.reviews-intro{
  max-width:640px;
  margin:0 auto 28px;
  color:rgba(233,244,255,.82);
  font-size:1.05rem;
  line-height:1.6;
}
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:clamp(18px, 5vw, 32px);
  margin-bottom:clamp(26px, 5vw, 36px);
}
.review-card{
  background:rgba(17,27,36,.92);
  border:1px solid rgba(146,208,216,.15);
  border-radius:16px;
  padding:22px clamp(18px, 4vw, 24px);
  text-align:left;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  backdrop-filter:blur(6px);
  display:flex;
  flex-direction:column;
  gap:14px;
  height:100%;
}
.review-card__stars{
  color:#FFD700;
  font-size:1.05rem;
  letter-spacing:4px;
}
.review-card__quote{
  margin:0;
  color:#f0fbff;
  line-height:1.6;
  font-size:1rem;
  font-style:italic;
}
.review-card__author{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:.95rem;
  color:rgba(233,244,255,.85);
}
.review-card__author strong{
  font-size:1.05rem;
  color:#f4fbff;
}
.reviews-cta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
}

/* Responsive map wrapper */
.map-embed {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  margin-top: 20px;
}
.map-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ================= FOOTER ================= */
footer { background:#93C3C9; padding:12px 0; text-align:center; }
footer p { margin:0; font-size:14px; font-family:'DM Sans'; font-weight:500; }

/* ================= CLEANUP ================= */
html, body { overflow-x:hidden; background:#141416; }
.rating{ width:auto !important; gap:12px; }
.anchor-target{
  display:block;
  height:0;
  width:0;
}

#hero-sec, .hero-sec, .hero-wrapper, .hero-txt, .hero-img {
  background:#000 !important; color:#fff !important;
}

/* ================= CTA / CONTACT ================= */
.cta-sec{
  background:linear-gradient(135deg,#0f1b26,#10141c);
  padding: clamp(48px, 9vw, 90px) 0;
  text-align:center;
}
.cta-sec h2{
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  margin-bottom:12px;
  color:#f4fbff;
}
.cta-sec .mb-3{
  color:rgba(233,244,255,.82);
  font-size:1.05rem;
  max-width:520px;
  margin:0 auto 22px;
}
.cta-buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-bottom:28px;
}
.cta-buttons .btn{
  min-width:210px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.05em;
  padding:12px 28px;
  box-shadow:0 12px 28px rgba(0,0,0,.32);
}
.cta-buttons .btn-secondary{
  background:rgba(146,208,216,.15);
  border:1px solid rgba(146,208,216,.35);
  color:#e5f8ff;
}
.cta-buttons .btn-secondary:hover,
.cta-buttons .btn-secondary:focus{
  background:rgba(146,208,216,.28);
  color:#fff;
}
.cta-buttons .btn-primary{
  background:linear-gradient(135deg,#1f6fcb,#3aa9d6);
  border:0;
}
.cta-buttons .btn-primary:hover,
.cta-buttons .btn-primary:focus{
  background:linear-gradient(135deg,#2661a7,#2d9bc4);
}
.contact-form{
  max-width:640px;
  margin:0 auto;
  padding:24px;
  border-radius:16px;
  background:rgba(12,20,28,.72);
  border:1px solid rgba(146,208,216,.15);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  text-align:left;
  backdrop-filter:blur(12px);
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-bottom:16px;
}
.form-grid .form-row:nth-child(3){
  grid-column:1 / -1;
}
.contact-form .form-row{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:16px;
}
.contact-form label{
  font-weight:600;
  letter-spacing:.02em;
  color:#d9f4ff;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  border-radius:10px;
  border:1px solid rgba(146,208,216,.28);
  background:rgba(9,14,20,.85);
  color:#f4fbff;
  padding:12px 14px;
  font-size:1rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:#92d0d8;
  box-shadow:0 0 0 3px rgba(146,208,216,.25);
}
.contact-form textarea{
  resize:vertical;
  min-height:140px;
}
.contact-form .submit-btn{
  width:100%;
  margin-top:6px;
  padding:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  border-radius:999px;
  box-shadow:0 12px 26px rgba(0,0,0,.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.contact-form .submit-btn:hover,
.contact-form .submit-btn:focus{
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(0,0,0,.38);
}
.contact-form .honeypot{
  position:absolute;
  left:-9999px;
  opacity:0;
  pointer-events:none;
}
.contact-form .form-status{
  margin-top:12px;
  min-height:1.2em;
  font-size:.95rem;
  color:rgba(233,244,255,.75);
}
.contact-form .form-status.form-status--success{
  color:#8be0a1;
}
.contact-form .form-status.form-status--error{
  color:#ff9b9b;
}
.business-info{
  margin-top:28px;
  color:rgba(233,244,255,.8);
  font-size:.98rem;
  line-height:1.6;
  text-align:center;
}
.business-info a{
  color:#92d0d8;
  font-weight:600;
}
.business-info strong{
  color:#f4fbff;
}
.business-info a:hover,
.business-info a:focus{
  color:#b7e7f0;
}
@media (max-width: 575.98px){
  .contact-form{
    padding:20px;
  }
  .cta-buttons{
    flex-direction:column;
  }
  .form-grid{
    grid-template-columns:1fr;
  }
}


/* End of custom.css */


/* ================= SERVICES — Light Sweep Highlight ================= */
/* Isolated to #services so other .card components (e.g., Bootstrap) are unaffected. */
@media (prefers-reduced-motion: no-preference){
  #services .card .card-inner{
    position: relative; /* anchor the sheen overlay */
    overflow: hidden;   /* clip the sweep to card bounds */
  }
  /* Soft ambient edge glow when .active (centered in viewport) */
  #services .card.active .card-inner{
    box-shadow: 0 14px 32px rgba(255,255,255,.06), 0 8px 22px rgba(0,0,0,.30);
  }
  /* Sheen overlay (linear-gradient) that sweeps across the card on hover/active */
  #services .card .card-inner::before{
    content: "";
    position: absolute;
    top: -20%; bottom: -20%;
    left: -120%; width: 60%;
    transform: skewX(-18deg);
    background:
      linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.18) 45%,
        rgba(255,255,255,.35) 50%,
        rgba(255,255,255,.18) 55%,
        rgba(255,255,255,0) 100%);
    filter: blur(0.3px);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
  }
  /* Trigger the sweep on hover/focus/active */
  #services .card:hover .card-inner::before,
  #services .card:focus-within .card-inner::before,
  #services .card.active .card-inner::before{
    animation: svcLightSweep 1200ms cubic-bezier(.2,.65,.2,1) 30ms both;
    opacity: 1;
  }
  /* Gentle sweep motion */
  @keyframes svcLightSweep{
    0%   { left: -120%; opacity: 0; }
    10%  { opacity: .35; }
    50%  { left: 15%;  opacity: .5; }
    90%  { opacity: .18; }
    100% { left: 140%; opacity: 0; }
  }
}
/* Reduced motion: no animation — subtle static emphasis on active */
@media (prefers-reduced-motion: reduce){
  #services .card.active .card-inner{
    box-shadow: 0 10px 28px rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.28);
    outline: 1px solid rgba(255,255,255,.06);
  }
}

/* ============================================================
   EOF integrity marker — 2025-10-07
   Purpose: verifies full file write completeness and prevents
   accidental truncation in staged Canvas operations.
   ============================================================ */

/* ZF:EOF — 2025-10-07 full rewrite OK */



.nav-toggle{
  margin-left:auto;
}