/* ============================================================= 
   DT Appliance Repair & Solutions LLC — Site Styles
   Brand: Navy + Mustard (from logo)
   ============================================================= */
:root{
  /* Brand core */
  --navy:#173a53;
  --navy-700:#122c41;
  --navy-900:#0b1e2d;
  --gold:#c79a3b;
  --gold-700:#a67f2f;
  --gold-800:#8e6a23;

  /* Neutrals */
  --gray:#8f96a0;
  --gray-700:#6f7680;
  --light:#fafbfc;
  --white:#ffffff;
  --accent:#f7f3ea; /* soft sand for sections */

  --shadow: 0 10px 30px rgba(11,30,45,.08);
  --shadow-lg: 0 16px 36px rgba(11,30,45,.12);
  --ring: rgba(199,154,59,.35);
  --radius: 16px;
  --maxw: 1100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0b1620;background:#fff}
html{scroll-behavior:smooth}
img{max-width:100%;display:block}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* Header */
header{background:linear-gradient(180deg, var(--navy) 0%, var(--navy-700) 100%);color:var(--white);position:sticky;top:0;z-index:50;box-shadow:var(--shadow)}
.topbar{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;   /* increased for bigger logo */
  font-size:14px
}
.brand{display:flex;align-items:center;gap:14px}
.brand img{
  height:88px;      /* larger logo for better prominence */
  width:auto;
  border-radius:10px; /* keep subtle rounding; remove if transparent logo added */
  object-fit:contain;
}
.brand .title{line-height:1}
.brand .title b{display:block;font-size:24px}   /* enlarged brand name */
.brand .title span{opacity:.95;font-size:14px}  /* enlarged subline */
.cta-buttons{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;font-weight:700;border:2px solid transparent;transition:transform .05s ease,opacity .2s ease,background-color .2s ease,border-color .2s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--gold);color:var(--navy-900);border-color:var(--gold);box-shadow:0 6px 16px rgba(199,154,59,.22)}
.btn-primary:hover{background:var(--gold-700);border-color:var(--gold-700)}
.btn-primary:active{background:var(--gold-800);border-color:var(--gold-800)}
.btn-outline{background:transparent;border-color:#fff;color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.08)}
button:focus-visible,.btn:focus-visible,a.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;box-shadow:0 0 0 3px var(--ring)}
nav{border-top:1px solid rgba(255,255,255,.12)}
.navwrap{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:8px 0}
.navlinks{display:flex;gap:18px;flex-wrap:wrap}
.navlinks a{color:#e6eef7;opacity:.95;transition: color .2s ease, opacity .2s ease}
.navlinks a:hover{color:#ffffff;opacity:1;text-decoration:none}

/* Hero */
.hero{
  position:relative;
  /* Fallback background image with dark overlay for readability */
  background:
    linear-gradient(180deg, rgba(7,30,45,.7) 0%, rgba(7,30,45,.88) 60%),
    url('../img/site/hero-bg.jpg') center/cover no-repeat;
  color:#eaf2f7;
  overflow:hidden;
}
.hero::after{
  /* subtle top vignette to avoid harsh edges under the header */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.25), transparent 30%);
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.6;display:block;
}
.hero .container{position:relative;z-index:1}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;padding:38px 0}
.hero h1{font-size:36px;margin:0 0 10px}
.hero p{font-size:18px;opacity:.95}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);padding:6px 10px;border-radius:999px;font-size:13px;margin-bottom:12px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.card{background:#fff;border:1px solid #e8edf2;border-radius:var(--radius);box-shadow:var(--shadow);transition: box-shadow .2s ease, transform .12s ease}

/* Button micro-interactions */
.btn-primary{transition:transform .12s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease}
.btn-primary:hover{transform:translateY(-1px) scale(1.02);box-shadow:0 10px 24px rgba(199,154,59,.25)}
.btn-primary:active{transform:translateY(0) scale(0.99)}

/* Reveal animation (first view only) */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease;transition-delay:var(--delay, 0ms)}
.reveal.is-visible{opacity:1;transform:translateY(0)}

/* Reduced motion: keep everything still */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn-primary{transition:none}
  .btn-primary:hover,.btn-primary:active{transform:none;box-shadow:none}
}

/* Sections */
section{padding:48px 0}
h2{font-size:28px;margin:0 0 18px;color:var(--navy)}
h2::after{content:"";display:block;width:48px;height:4px;border-radius:3px;background:var(--gold);margin-top:10px}
.muted{color:var(--gray-700)}

/* Services grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.service{padding:18px}
.service h3{margin:0 0 6px;font-size:18px;color:var(--navy)}
.service p{margin:0;color:#2a3440}


/* Interactive service cards */
/* (Reverted services interactive styles removed) */

/* Elementor-like heading for slider */
.elementor-heading-title{font-weight:800;margin:42px 0 18px;color:var(--navy);text-align:center;font-size:32px;letter-spacing:.2px}

/* Brand slider visuals */
.brands-swiper{
  padding:6px 0 14px;
  max-width:var(--maxw); /* keep it inside the same max width as .container */
  margin:12px auto 0;   /* add breathing room from heading and center */
  overflow:hidden;      /* hide partially visible slides at edges */
  box-sizing:border-box;
}
.brands-swiper .swiper-wrapper{align-items:center}
.brands-swiper .swiper-slide{display:flex;align-items:center;justify-content:center}
.brands-swiper .swiper-slide img{display:block}
.brand-logo{height:60px}
.brand-logo:hover{opacity:1;filter:none}

/* ---- BRAND WALL (big, static logos + CTA) ---- */
.brand-wall{padding-top:18px}
.brand-wall .title{font-size:36px;font-weight:800;letter-spacing:.3px;text-align:center;color:#1b2430;margin:0 0 26px}
.brand-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;align-items:center;justify-items:center;margin:26px auto 26px;max-width:1200px}
.brand-grid img{height:76px;width:auto;display:block;filter:grayscale(100%);opacity:.95;transition:opacity .2s ease, filter .2s ease, transform .15s ease}
.brand-grid img:hover{opacity:1;filter:none;transform:translateY(-2px)}
.brand-wall .cta{display:flex;justify-content:center;margin-top:10px}

/* ---- AREAS WE SERVE ---- */
.areas{background:#f6f2ea}
.areas .title{font-size:48px;font-weight:800;text-align:center;margin:0 0 24px;color:var(--navy)}
.areas-wrap{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;align-items:center}
.areas-list{display:flex;flex-direction:column;gap:18px}
.areas-item{display:flex;align-items:center;gap:14px;font-weight:700;font-size:24px;color:#14222d}
.pin{height:44px;width:44px;border-radius:12px;background:#fff4df;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 1px 0 rgba(0,0,0,.04) inset}
.pin svg{height:22px;width:22px;fill:var(--gold)}
.areas-illustration{max-width:460px;margin:0 auto}

/* About section media (right column) */

/* Reviews */
.review{padding:18px}
.stars{font-size:18px;color:var(--gold)}
/* subtle lift on hover */
.card.service:hover,.card.review:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}

/* Reviews layout with right-side photos */
.reviews-wrap{display:grid;grid-template-columns:1fr 1.25fr;gap:24px;align-items:start}
.reviews-content h2{margin-top:0}
.reviews-photos{display:grid;gap:16px}
.reviews-photos .photo{border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid #e8edf2;aspect-ratio:4/3;background:#f6f7f9}
.reviews-photos .photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* Overlapped layout on desktop */
@media (min-width: 901px) {
  .reviews-photos{
    position: relative;
    display: block;
    min-height: 520px;             /* height reserved for overlap */
  }

  .reviews-photos .photo{
    position: absolute;
    max-width: none;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(15,23,42,.18);
    transition: transform .2s ease, box-shadow .2s ease;
  }

  .reviews-photos .photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Back (top-left) shot — refrigerator */
  .reviews-photos .photo--a{
    width: 48%;
    aspect-ratio: 3 / 4;
    top: 0;
    left: 4%;
    z-index: 1;
    transform: translateY(10px);
  }

  /* Front (bottom-right) shot — washer */
  .reviews-photos .photo--b{
    width: 60%;
    aspect-ratio: 4 / 5;
    right: 0;
    bottom: 0;
    z-index: 2;
  }

  .reviews-photos .photo:hover{
    transform: translateY(-4px);
    box-shadow: 0 26px 60px rgba(15,23,42,.22);
  }
}
@media (min-width:1200px){
  .reviews-photos{min-height:700px}
}
@media (max-width:900px){
  .reviews-photos .photo--b{display:none}
  .reviews-photos .photo--a{width:100%}
}

/* ---- AREAS Map + ZIP checker ---- */
.areas-map-wrap{display:grid;gap:16px}
.areas-map{height:480px;border-radius:14px;background:#eef3f7;border:1px solid #e1e7ee;overflow:hidden;box-shadow:var(--shadow)}
.map-placeholder{height:100%;display:flex;align-items:center;justify-content:center;color:#5c6b78;font-weight:600}
.section-map{padding:32px 0;isolation:isolate}
.map-card{
  position:relative;
  height:clamp(320px, 55vh, 560px);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(15,34,48,.08);
  background:#f6f7f9;
  z-index:0; /* map stays in its own stacking context */
}
/* Leaflet must fill the card, not the page */
#serviceMap,
.map-card .leaflet-container{width:100%;height:100%;border-radius:inherit}
/* keep controls inside, but not above other sections */
.map-card .leaflet-control-container{z-index:2}
/* prevent any panes from escaping stacking context */
.map-card .leaflet-pane{z-index:1}
.zip-checker{display:grid;gap:8px}
.zip-checker label{font-weight:700;color:var(--navy)}
.zip-row{display:flex;gap:10px;align-items:center}
.zip-row input{flex:1;min-width:0}
.zip-msg{font-size:14px;margin-top:2px}
.zip-msg.ok{color:#1a7f37}
.zip-msg.maybe{color:#8a5b00}
.zip-msg.error{color:#b42318}

@media (max-width:900px){
  .areas-map{height:380px}
}
@media (max-width:640px){
  .areas-map{height:320px}
}


/* Lists */
ul.clean{list-style:none;margin:0;padding:0}
ul.clean li{padding:8px 0;border-bottom:1px dashed #e6e9ee}

/* Forms */
form{display:grid;gap:12px}
input,textarea,select{padding:12px 14px;border:1px solid #d9dee5;border-radius:12px;font:inherit}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px;box-shadow:0 0 0 3px var(--ring)}
textarea{min-height:120px}
.notice{font-size:13px;color:var(--gray-700)}
/* In hero, default notices follow hero text color (light) */
.hero .notice{color:inherit}
/* In the hero form card, keep notice blue for emphasis */
.hero .card .notice{color:var(--navy)}
/* Hero notice link: no underline by default + subtle micro-interaction on hover */
.hero .notice a{
  color:var(--navy);
  text-decoration:none;
  transition: color .2s ease, transform .15s ease;
}
.hero .notice a:hover,
.hero .notice a:focus-visible{
  color:var(--navy-700);
  transform:translateY(-1px);
}

/* Footer */
footer{background:var(--navy-900);color:#c6d3df}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px;padding:36px 0}
.footgrid a{color:#dbe7f3}
.footgrid a:hover{color:#ffffff}
.copyright{border-top:1px solid rgba(255,255,255,.08);padding:14px 0;margin-top:12px;font-size:13px;color:#a6b6c6;text-align:center}

/* Chips */
/* .chip{display:inline-block;padding:6px 10px;border-radius:999px;background:#fff7e6;color:var(--navy);font-weight:600;font-size:12px;margin:4px 6px 0 0;border:1px solid #fde6bb} */
.chip {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff8ee;
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  margin: 6px 8px 0 0;
  border: 1px solid #f3e3c2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.chip:hover {
  transform: scale(1.05);
}
.chip-container{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;margin-bottom:28px}

/* Responsive */
@media (max-width:1100px){
  .brand-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .footgrid{grid-template-columns:1fr 1fr}
  .brand img{height:72px}   /* bigger logo on tablets */
  .brand .title b{font-size:22px}
  .brand .title span{font-size:13px}
  .areas .title{font-size:38px}
  .areas-wrap{grid-template-columns:1fr;gap:20px}
  .areas-item{font-size:22px}
  .brand-grid{grid-template-columns:repeat(2,1fr)}
  /* Ensure feature cards stack nicely on smaller screens */
}

/* Responsive sizes for the brands section heading */
@media (min-width:640px){
  .elementor-heading-title{font-size:36px}
}
@media (min-width:900px){
  .elementor-heading-title{font-size:42px}
}
@media (min-width:1200px){
  .elementor-heading-title{font-size:48px}
}

/* Feature cards inside the about section */
.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px;max-width:var(--maxw);margin-left:0}
.feature-card{background:#fff;border-radius:14px;padding:24px;box-shadow:0 12px 28px rgba(11,30,45,.06);display:flex;flex-direction:column;gap:14px;border:1px solid rgba(11,30,45,.03)}
.feature-card .icon{width:64px;height:64px;border-radius:14px;background:rgba(23,58,83,.06);display:flex;align-items:center;justify-content:center;flex:0 0 64px;box-shadow:inset 0 1px 0 rgba(0,0,0,.02)}
.feature-card h3{margin:0;font-size:20px;color:var(--navy);font-weight:700}
.feature-card p{margin:0;color:#475961;line-height:1.6}

/* colored icon accents */
.icon--green{background:#eafaf0}
.icon--amber{background:#fff7eb}
.icon--coral{background:#fff1f1}

@media (max-width:900px){
  .feature-cards{grid-template-columns:1fr;gap:14px}
  .feature-card{flex-direction:row;align-items:flex-start;padding:16px}
  .feature-card .icon{width:56px;height:56px;margin-right:14px;flex:0 0 56px}
}

/* Ensure SVG images inside .icon scale properly */
.feature-card .icon img,.feature-card .icon .feature-icon{width:42px;height:42px;object-fit:contain;display:block;filter:drop-shadow(0 1px 0 rgba(0,0,0,.02))}
.feature-card .icon svg{width:42px;height:42px;display:block}

/* KPI strip styles removed (reverted) */
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .navlinks{display:none}
  .btn{padding:10px 14px}
  .hero h1{font-size:30px}
  .brand-logo{height:48px}
  .brand-grid img{height:64px}
  .brand img{height:56px}   /* mobile logo size */
  .brand .title b{font-size:20px}
  .brand .title span{font-size:12px}
}

/* Services responsive: 3 columns on large screens */
@media (min-width:1024px){
  .services-grid{grid-template-columns:repeat(3,1fr)}
}

/* Reduced motion: disable service reveal */
@media (prefers-reduced-motion: reduce){
  .service.reveal{opacity:1;transform:none;transition:none}
}

/* Gallery (two-image card layout) */
.gallery,.photo-gallery{padding:40px 0;display:flex;justify-content:center;align-items:center;background:#f8f9fb}
/* Simplify wrapper: no extra card around both images to avoid overlap issues */
.gallery-box{background:transparent;border-radius:0;padding:0;box-shadow:none}
.gallery-grid,.photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;max-width:900px;width:100%}
.gallery-img,.photo-item{width:100%;height:auto;display:block;border-radius:20px;object-fit:cover;box-shadow:0 8px 18px rgba(0,0,0,0.10);transition:transform .3s ease}
.gallery-img:hover,.photo-item:hover{transform:scale(1.02)}