/* ============================================================
   WE REALLY CARE ATLANTA — Global Stylesheet
   style.css v2 — loaded on every page via includes/head.php
   ============================================================ */

/* ============================================================
   1. CSS VARIABLES
   ============================================================ */
:root {
  --green:          #95c552;
  --green-dark:     #7aaa38;
  --green-darker:   #5e8a28;
  --green-light:    #f0f7e6;
  --green-mid:      #d4ebad;
  --blue:           #173369;
  --blue-mid:       #1d428a;
  --blue-light:     #e8eef7;
  --blue-sky:       #00b5e2;
  --white:          #ffffff;
  --offwhite:       #f8faf5;
  --gray-light:     #e6ece0;
  --gray:           #6b7570;
  --gray-dark:      #3d4a40;
  --text:           #1e2d1f;
  --font-display:   'Barlow Condensed', sans-serif;
  --font-body:      'Barlow', sans-serif;
  --section-pad:    80px;
  --radius:         6px;
  --radius-lg:      12px;
  --shadow:         0 4px 24px rgba(23,51,105,0.10);
  --shadow-lg:      0 8px 40px rgba(23,51,105,0.18);
  --shadow-green:   0 4px 20px rgba(149,197,82,0.30);
  --transition:     0.25s ease;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:var(--font-body); color:var(--text); background:var(--white); line-height:1.6; overflow-x:hidden; }
img  { display:block; max-width:100%; height:auto; }
a    { text-decoration:none; color:inherit; }
ul, ol { list-style:none; }
button { font-family:inherit; cursor:pointer; }
input, select, textarea { font-family:inherit; }
h1,h2,h3,h4,h5 { font-family:var(--font-display); font-weight:800; line-height:1.1; color:var(--blue); }
p { line-height:1.7; }

/* ============================================================
   3. IMAGE CONTAINER SYSTEM
   — Aspect-ratio based containers so images NEVER get cut off.
   — Every image fills its container with object-fit:cover.
   — Use the class that matches the image's natural ratio.
   ============================================================ */

/* Container wrappers */
.img-wrap-16-9 { aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius-lg); }
.img-wrap-4-3  { aspect-ratio:4/3;  overflow:hidden; border-radius:var(--radius-lg); }
.img-wrap-6-5  { aspect-ratio:6/5;  overflow:hidden; border-radius:var(--radius-lg); }
.img-wrap-5-4  { aspect-ratio:5/4;  overflow:hidden; border-radius:var(--radius-lg); }
.img-wrap-1-1  { aspect-ratio:1/1;  overflow:hidden; border-radius:var(--radius-lg); }
.img-wrap-4-5  { aspect-ratio:4/5;  overflow:hidden; border-radius:var(--radius-lg); }
.img-wrap-3-4  { aspect-ratio:3/4;  overflow:hidden; border-radius:var(--radius-lg); }
.img-wrap-2-3  { aspect-ratio:2/3;  overflow:hidden; border-radius:var(--radius-lg); }

/* All images inside a wrapper fill correctly */
.img-wrap-16-9 img,
.img-wrap-4-3  img,
.img-wrap-6-5  img,
.img-wrap-5-4  img,
.img-wrap-1-1  img,
.img-wrap-4-5  img,
.img-wrap-3-4  img,
.img-wrap-2-3  img {
  width:100%; height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  transition:transform 0.4s ease;
}

/* Position modifiers — override object-position when needed */
.img-pos-top    img { object-position:center top !important; }
.img-pos-bottom img { object-position:center bottom !important; }
.img-pos-left   img { object-position:left center !important; }

/* Contain variant — for images that must not be cropped at all */
.img-contain img {
  object-fit:contain !important;
  background:var(--blue-light);
  padding:16px;
}

/* Hover zoom — add to parent .img-wrap-* when desired */
.img-zoom:hover img { transform:scale(1.05); }

/* Shadow utility */
.img-shadow { box-shadow:var(--shadow-lg); }

/* ============================================================
   4. UTILITIES
   ============================================================ */
.container    { width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }
.container-sm { width:100%; max-width:860px;  margin:0 auto; padding:0 24px; }

.text-center  { text-align:center; }
.text-green   { color:var(--green-darker); }
.text-blue    { color:var(--blue); }
.text-white   { color:var(--white); }
.text-gray    { color:var(--gray); }

.bg-white       { background:var(--white); }
.bg-offwhite    { background:var(--offwhite); }
.bg-green-light { background:var(--green-light); }
.bg-blue-light  { background:var(--blue-light); }
.bg-blue        { background:var(--blue); }

/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px; border-radius:var(--radius);
  font-family:var(--font-display); font-size:1rem; font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase;
  cursor:pointer; border:2px solid transparent;
  transition:background var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  white-space:nowrap; line-height:1;
}
.btn:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.btn svg   { flex-shrink:0; }

.btn-green         { background:var(--green);   color:var(--white); border-color:var(--green); }
.btn-green:hover   { background:var(--green-dark); border-color:var(--green-dark); box-shadow:var(--shadow-green); }
.btn-blue          { background:var(--blue);    color:var(--white); border-color:var(--blue); }
.btn-blue:hover    { background:var(--blue-mid); border-color:var(--blue-mid); }
.btn-white         { background:var(--white);   color:var(--blue);  border-color:var(--white); }
.btn-white:hover   { background:var(--green-light); border-color:var(--green); color:var(--green-darker); }
.btn-outline-white { background:transparent; color:var(--white); border-color:rgba(255,255,255,0.6); }
.btn-outline-white:hover { background:var(--white); color:var(--blue); border-color:var(--white); }
.btn-outline-green { background:transparent; color:var(--green-darker); border-color:var(--green); }
.btn-outline-green:hover { background:var(--green); color:var(--white); }
.btn-outline-blue  { background:transparent; color:var(--blue); border-color:var(--blue); }
.btn-outline-blue:hover  { background:var(--blue); color:var(--white); }
.btn-sm { padding:9px 18px; font-size:0.85rem; }
.btn-lg { padding:16px 36px; font-size:1.1rem; }

/* ============================================================
   6. PROMO BAR
   ============================================================ */
#promo-bar {
  background:var(--blue); color:var(--white);
  text-align:center; padding:9px 24px;
  font-family:var(--font-display); font-size:0.88rem; font-weight:600;
  letter-spacing:0.04em; position:relative; z-index:200;
  min-height:38px; display:flex; align-items:center; justify-content:center;
}
.promo-item { display:none; align-items:center; justify-content:center; gap:5px; flex-wrap:wrap; width:100%; animation:promoFade 0.5s ease; }
.promo-item.active { display:flex; }
@keyframes promoFade { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
.promo-highlight { color:var(--green); font-weight:800; }
.promo-sub       { color:rgba(255,255,255,0.70); font-weight:500; }
.promo-link      { color:var(--white); text-decoration:underline; margin-left:8px; font-weight:700; transition:color 0.2s; white-space:nowrap; }
.promo-link:hover { color:var(--green); }
.promo-dots { position:absolute; right:16px; top:50%; transform:translateY(-50%); display:flex; gap:5px; }
.promo-dot  { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.30); border:none; cursor:pointer; padding:0; transition:background 0.2s, transform 0.2s; }
.promo-dot.active { background:var(--green); transform:scale(1.3); }

/* ============================================================
   7. NAVIGATION — Stacked layout
   ============================================================ */
#navbar { position:sticky; top:0; z-index:100; background:var(--white); box-shadow:0 2px 12px rgba(23,51,105,0.10); }

/* Row 1 */
.nav-top { display:flex; align-items:center; justify-content:space-between; padding:12px 0 10px; border-bottom:1px solid var(--gray-light); }
.nav-top-left { display:flex; align-items:center; min-width:200px; }
.nav-social { display:flex; align-items:center; gap:6px; }
.nav-social a { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; border:1px solid var(--gray-light); color:var(--gray); transition:background var(--transition), color var(--transition), border-color var(--transition); }
.nav-social a:hover { background:var(--green); color:var(--white); border-color:var(--green); }
.nav-logo { display:flex; justify-content:center; align-items:center; flex:1; }
.nav-logo img { height:60px; width:auto; }
.nav-top-right { display:flex; align-items:center; gap:12px; min-width:200px; justify-content:flex-end; }
.nav-phone { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--blue); letter-spacing:0.02em; display:flex; align-items:center; gap:6px; white-space:nowrap; transition:color var(--transition); }
.nav-phone svg { color:var(--green); }
.nav-phone:hover { color:var(--green-darker); }

/* Row 2 */
.nav-bottom { display:flex; align-items:center; justify-content:center; }
.nav-links  { display:flex; align-items:center; gap:0; list-style:none; margin:0; padding:0; }
.nav-links > li { position:relative; }
.nav-links > li > a { display:flex; align-items:center; gap:4px; padding:12px 14px; font-family:var(--font-display); font-size:0.88rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--blue); border-bottom:3px solid transparent; transition:color var(--transition), border-color var(--transition); white-space:nowrap; }
.nav-links > li > a:hover, .nav-links > li.active > a { color:var(--green-darker); border-bottom-color:var(--green); }
.nav-links > li > a .caret { font-size:0.6rem; opacity:0.55; transition:transform var(--transition); }
.nav-links > li:hover > a .caret { transform:rotate(180deg); }

/* Dropdown */
.nav-links .dropdown { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(-8px); background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-lg); min-width:230px; opacity:0; pointer-events:none; transition:opacity var(--transition), transform var(--transition); z-index:99; border-top:3px solid var(--green); }
.nav-links > li:hover .dropdown { opacity:1; pointer-events:all; transform:translateX(-50%) translateY(0); }
.nav-links .dropdown a { display:flex; align-items:center; gap:10px; padding:11px 18px; font-family:var(--font-body); font-size:0.9rem; font-weight:500; color:var(--blue); border-bottom:1px solid var(--gray-light); transition:background var(--transition), color var(--transition); }
.nav-links .dropdown a:last-child { border-bottom:none; }
.nav-links .dropdown a:hover { background:var(--green-light); color:var(--green-darker); }
.nav-links .dropdown a svg { color:var(--green); flex-shrink:0; }

/* Mega dropdown */
.dropdown-wide { min-width:500px; display:flex; gap:0; padding:0; }
.dropdown-col  { flex:1; padding:8px 0; border-right:1px solid var(--gray-light); }
.dropdown-col:last-child { border-right:none; }
.dropdown-col-label { padding:8px 18px 6px; font-family:var(--font-display); font-size:0.7rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--gray); border-bottom:1px solid var(--gray-light); margin-bottom:4px; }

/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; background:none; border:none; }
.hamburger span { display:block; width:26px; height:2px; background:var(--blue); border-radius:2px; transition:all 0.3s ease; }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Mobile nav */
.mobile-nav { display:none; flex-direction:column; background:var(--white); border-top:3px solid var(--green); padding:12px 0 20px; box-shadow:var(--shadow-lg); }
.mobile-nav.open { display:flex; }
.mobile-nav a { padding:12px 24px; font-family:var(--font-display); font-size:1rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--blue); border-bottom:1px solid var(--gray-light); transition:background var(--transition), color var(--transition); }
.mobile-nav a:hover { background:var(--green-light); color:var(--green-darker); }
.mobile-nav .mobile-nav-label { padding:14px 24px 4px; font-family:var(--font-display); font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--gray); }
.mobile-nav .mobile-cta { margin:16px 24px 4px; }

/* ============================================================
   8. HERO SLIDESHOW
   ============================================================ */
#hero { position:relative; height:600px; overflow:hidden; background:var(--blue); }
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity 0.9s ease; pointer-events:none; }
.hero-slide.active { opacity:1; pointer-events:auto; }
.hero-slide-bg { position:absolute; inset:0; background-size:cover; background-position:center 40%; opacity:0.38; }
.hero-slide-overlay { position:absolute; inset:0; background:linear-gradient(105deg, rgba(23,51,105,0.92) 0%, rgba(23,51,105,0.65) 55%, rgba(23,51,105,0.30) 100%); }
.hero-slide-video-wrap { position:absolute; inset:0; overflow:hidden; }
.hero-video { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; width:auto; height:auto; transform:translate(-50%,-50%); object-fit:cover; }
.hero-slide-content { position:relative; z-index:2; height:100%; display:flex; align-items:center; }
.hero-content-inner { max-width:660px; padding:60px 0; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(149,197,82,0.15); border:1px solid rgba(149,197,82,0.45); color:#b5d97a; font-family:var(--font-display); font-size:0.78rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; padding:6px 14px; border-radius:100px; margin-bottom:20px; }
.hero-badge::before { content:''; width:7px; height:7px; background:var(--green); border-radius:50%; flex-shrink:0; }
.hero-content-inner h1 { font-family:var(--font-display); font-size:clamp(2.4rem,5.5vw,3.8rem); font-weight:800; line-height:1.05; color:var(--white); text-transform:uppercase; letter-spacing:0.02em; margin-bottom:18px; }
.hero-content-inner h1 span { color:var(--green); }
.hero-content-inner p { font-size:1.05rem; font-weight:300; color:rgba(255,255,255,0.82); line-height:1.7; margin-bottom:32px; max-width:540px; }
.hero-buttons { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:36px; }
.hero-trust { display:flex; flex-wrap:wrap; gap:18px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.15); }
.trust-item { display:flex; align-items:center; gap:7px; font-family:var(--font-display); font-size:0.82rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,255,255,0.70); }
.trust-item svg { color:var(--green); flex-shrink:0; }
.hero-services { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.hero-service-link { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); color:var(--white); font-family:var(--font-display); font-size:0.82rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; padding:7px 14px; border-radius:100px; transition:background var(--transition), border-color var(--transition); }
.hero-service-link:hover { background:var(--green); border-color:var(--green); }
.hero-dots { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:10; }
.hero-dot  { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.35); border:none; cursor:pointer; padding:0; transition:background var(--transition), transform var(--transition); }
.hero-dot.active { background:var(--green); transform:scale(1.25); }
.hero-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:10; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25); color:var(--white); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background var(--transition); }
.hero-arrow:hover { background:var(--green); border-color:var(--green); }
.hero-arrow.prev { left:20px; }
.hero-arrow.next { right:20px; }

/* ============================================================
   9. SECTION SHARED
   ============================================================ */
section { padding:var(--section-pad) 0; }
.section-label       { display:inline-block; font-family:var(--font-display); font-size:0.78rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--green-darker); margin-bottom:10px; }
.section-label-light { color:var(--green); }
.section-title       { font-family:var(--font-display); font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:800; text-transform:uppercase; letter-spacing:0.02em; color:var(--blue); line-height:1.1; margin-bottom:14px; }
.section-title span  { color:var(--green-darker); }
.section-title-light { color:var(--white); }
.section-title-light span { color:var(--green); }
.section-sub         { font-size:1rem; color:var(--gray); max-width:580px; line-height:1.7; }
.section-sub-light   { color:rgba(255,255,255,0.65); }
.section-head        { margin-bottom:48px; }
.section-head.centered { text-align:center; }
.section-head.centered .section-sub { margin:0 auto; }
.section-divider     { width:48px; height:4px; background:var(--green); border-radius:2px; margin-bottom:24px; }
.section-divider.centered { margin-left:auto; margin-right:auto; }

/* ============================================================
   10. SERVICES GRID
   ============================================================ */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.service-card  { background:var(--white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); transition:transform var(--transition), box-shadow var(--transition); display:flex; flex-direction:column; border:1px solid var(--gray-light); }
.service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--green-mid); }
.service-card-img   { overflow:hidden; position:relative; aspect-ratio:6/5; }
.service-card-img img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform 0.45s ease; }
.service-card:hover .service-card-img img { transform:scale(1.06); }
.service-card-img-badge { position:absolute; top:12px; left:12px; background:var(--green); color:var(--white); font-family:var(--font-display); font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:4px 10px; border-radius:100px; }
.service-card-body  { padding:24px 22px 28px; flex:1; display:flex; flex-direction:column; }
.service-icon { width:44px; height:44px; background:var(--blue-light); border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:var(--blue-mid); }
.service-card h3 { font-family:var(--font-display); font-size:1.1rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--blue); margin-bottom:10px; }
.service-card p  { font-size:0.92rem; color:var(--gray); line-height:1.65; flex:1; margin-bottom:20px; }
.card-link { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-size:0.85rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--green-darker); transition:gap var(--transition), color var(--transition); }
.card-link:hover { gap:10px; color:var(--blue); }

/* ============================================================
   11. SERVICES VISUAL TILE GRID (homepage)
   ============================================================ */
.service-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.service-tile  { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); cursor:pointer; position:relative; transition:transform var(--transition), box-shadow var(--transition); text-decoration:none; display:block; }
.service-tile:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.service-tile-img { aspect-ratio:1/1; overflow:hidden; }
.service-tile-img img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform 0.4s ease; }
.service-tile:hover .service-tile-img img { transform:scale(1.07); }
.service-tile-label { background:var(--blue); color:var(--white); padding:10px 12px; font-family:var(--font-display); font-size:0.82rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; text-align:center; line-height:1.3; transition:background var(--transition); }
.service-tile:hover .service-tile-label { background:var(--green-darker); }

/* ============================================================
   12. BEFORE / AFTER SLIDESHOW
   ============================================================ */
.ba-slideshow { position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.ba-slide { display:none; }
.ba-slide.active { display:grid; grid-template-columns:1fr 1fr; }
.ba-side { position:relative; aspect-ratio:6/5; overflow:hidden; }
.ba-side img { width:100%; height:100%; object-fit:cover; object-position:center; }
.ba-side-single { position:relative; overflow:hidden; }
.ba-side-single img { width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center; }
.ba-label { position:absolute; bottom:0; left:0; right:0; padding:8px 12px; font-family:var(--font-display); font-size:0.75rem; font-weight:700; letter-spacing:0.10em; text-transform:uppercase; text-align:center; }
.ba-label.before { background:rgba(23,51,105,0.80); color:#f9cdd0; }
.ba-label.after  { background:rgba(149,197,82,0.85); color:var(--white); }
.ba-caption { background:var(--blue); color:rgba(255,255,255,0.80); padding:12px 20px; font-size:0.88rem; text-align:center; }
.ba-caption strong { color:var(--white); }
.ba-controls { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:16px; }
.ba-dot { width:8px; height:8px; border-radius:50%; background:var(--gray-light); border:none; cursor:pointer; padding:0; transition:background var(--transition), transform var(--transition); }
.ba-dot.active { background:var(--green); transform:scale(1.3); }
.ba-arrow-btn { background:var(--blue-light); border:1px solid var(--gray-light); color:var(--blue); width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background var(--transition), color var(--transition); }
.ba-arrow-btn:hover { background:var(--green); color:var(--white); border-color:var(--green); }

/* ============================================================
   13. WHY US
   ============================================================ */
#why-us { background:var(--blue); position:relative; overflow:hidden; }
#why-us::before { content:''; position:absolute; top:-80px; right:-80px; width:400px; height:400px; background:radial-gradient(circle, rgba(149,197,82,0.08) 0%, transparent 70%); pointer-events:none; }
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; position:relative; z-index:1; }
.why-grid-3 { grid-template-columns:repeat(3,1fr); }
.why-item { display:flex; gap:20px; align-items:flex-start; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-lg); padding:28px 24px; transition:background var(--transition), border-color var(--transition); }
.why-item:hover { background:rgba(149,197,82,0.07); border-color:rgba(149,197,82,0.25); }
.why-num { font-family:var(--font-display); font-size:2.4rem; font-weight:800; color:rgba(149,197,82,0.22); line-height:1; flex-shrink:0; width:46px; }
.why-icon { width:40px; height:40px; background:rgba(149,197,82,0.15); border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--green); }
.why-item h3 { font-family:var(--font-display); font-size:1.0rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--white); margin-bottom:8px; }
.why-item p  { font-size:0.88rem; color:rgba(255,255,255,0.58); line-height:1.65; }

/* ============================================================
   14. BEFORE/AFTER OLD (homepage grid — keep for compat)
   ============================================================ */
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ba-card { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--gray-light); }
.ba-pair { display:grid; grid-template-columns:1fr 1fr; }
.ba-featured { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); margin-bottom:8px; border:1px solid var(--gray-light); }
.ba-featured-pair { display:grid; grid-template-columns:1fr 1fr; }
.ba-featured-side { position:relative; aspect-ratio:6/5; overflow:hidden; }
.ba-featured-side img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform 0.4s ease; }
.ba-featured:hover .ba-featured-side img { transform:scale(1.03); }
.ba-featured-caption { background:var(--blue); color:rgba(255,255,255,0.75); padding:14px 20px; font-size:0.88rem; text-align:center; }
.ba-featured-caption strong { color:var(--white); }

/* ============================================================
   15. TESTIMONIALS
   ============================================================ */
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.review-card  { background:var(--white); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px; transition:transform var(--transition), box-shadow var(--transition); border:1px solid var(--gray-light); }
.review-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--green-mid); }
.stars { color:#f4b400; font-size:1rem; letter-spacing:2px; }
.review-text { font-size:0.93rem; color:var(--gray); line-height:1.75; font-style:italic; flex:1; }
.reviewer { display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--gray-light); }
.reviewer-avatar { width:44px; height:44px; border-radius:50%; background:var(--blue-light); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.1rem; font-weight:800; color:var(--blue-mid); flex-shrink:0; }
.reviewer-name { font-family:var(--font-display); font-size:0.92rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--blue); }
.reviewer-city { font-size:0.82rem; color:var(--gray); }
.google-badge  { margin-left:auto; font-size:0.72rem; font-family:var(--font-display); font-weight:700; color:var(--gray); letter-spacing:0.04em; white-space:nowrap; }

/* ============================================================
   16. SERVICE AREA MAP
   ============================================================ */
.service-map { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); margin-bottom:44px; border:1px solid var(--gray-light); }
.service-map iframe { display:block; width:100%; }
.cities-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; margin-bottom:28px; }
.cities-grid-wide { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.city-item { display:flex; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--gray-light); font-size:0.92rem; font-weight:500; color:var(--blue); transition:color var(--transition); }
.city-item::before { content:''; width:6px; height:6px; background:var(--green); border-radius:50%; flex-shrink:0; }
.city-item a { color:inherit; }
.city-item:hover, .city-item a:hover { color:var(--green-darker); }

/* ============================================================
   17. REFERRAL
   ============================================================ */
#referral { background:linear-gradient(135deg, var(--blue) 0%, var(--blue-mid) 100%); position:relative; overflow:hidden; }
#referral::before { content:''; position:absolute; top:-100px; right:-100px; width:500px; height:500px; background:rgba(149,197,82,0.06); border-radius:50%; }
.referral-inner   { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.referral-reward  { display:inline-flex; align-items:center; gap:16px; background:rgba(255,255,255,0.10); border:2px solid rgba(255,255,255,0.20); border-radius:var(--radius-lg); padding:20px 24px; margin-bottom:28px; }
.reward-amount    { font-family:var(--font-display); font-size:3.4rem; font-weight:800; color:var(--green); line-height:1; }
.referral-steps   { display:flex; flex-direction:column; gap:12px; }
.referral-step    { display:flex; align-items:flex-start; gap:14px; background:rgba(255,255,255,0.07); border-radius:var(--radius); padding:14px 18px; border:1px solid rgba(255,255,255,0.10); }
.step-num         { width:32px; height:32px; background:rgba(149,197,82,0.20); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:0.95rem; font-weight:800; color:var(--green); flex-shrink:0; }
.referral-form-wrap { background:var(--white); border-radius:var(--radius-lg); padding:36px 32px; box-shadow:var(--shadow-lg); }
.referral-form-wrap h3 { font-family:var(--font-display); font-size:1.4rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; color:var(--blue); margin-bottom:6px; }
.referral-form-wrap p  { font-size:0.88rem; color:var(--gray); margin-bottom:22px; line-height:1.6; }

/* ============================================================
   18. FOOTER CONTACT
   ============================================================ */
#footer-contact { background:var(--green-light); padding:64px 0; border-top:3px solid var(--green-mid); }
.footer-contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.contact-info-item { display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; font-size:0.95rem; color:var(--gray-dark); }
.contact-info-item svg    { color:var(--green-darker); flex-shrink:0; margin-top:2px; }
.contact-info-item a      { color:var(--blue); font-weight:600; transition:color var(--transition); }
.contact-info-item a:hover{ color:var(--green-darker); }
.contact-info-item strong { display:block; font-weight:600; color:var(--blue); margin-bottom:2px; }

/* ============================================================
   19. FOOTER
   ============================================================ */
#footer { background:var(--blue); color:rgba(255,255,255,0.60); padding:60px 0 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; padding-bottom:48px; }
.footer-brand img { height:52px; margin-bottom:18px; filter:brightness(0) invert(1); }
.footer-brand p   { font-size:0.88rem; line-height:1.75; color:rgba(255,255,255,0.48); max-width:300px; margin-bottom:22px; }
.footer-social    { display:flex; gap:10px; }
.footer-social a  { width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.15); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.50); transition:background var(--transition), color var(--transition), border-color var(--transition); }
.footer-social a:hover { background:var(--green); color:var(--white); border-color:var(--green); }
.footer-col h4    { font-family:var(--font-display); font-size:0.82rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--white); margin-bottom:18px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.10); }
.footer-col ul li { margin-bottom:10px; }
.footer-col ul li a { font-size:0.88rem; color:rgba(255,255,255,0.48); transition:color var(--transition); display:flex; align-items:center; gap:6px; }
.footer-col ul li a:hover { color:var(--green); }
.footer-contact-item { display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; font-size:0.88rem; color:rgba(255,255,255,0.48); line-height:1.5; }
.footer-contact-item svg { color:var(--green); flex-shrink:0; margin-top:2px; }
.footer-contact-item a   { color:rgba(255,255,255,0.48); transition:color var(--transition); }
.footer-contact-item a:hover { color:var(--green); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding:18px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.80rem; color:rgba(255,255,255,0.28); }
.footer-bottom a { color:rgba(255,255,255,0.35); transition:color var(--transition); }
.footer-bottom a:hover { color:var(--green); }

/* ============================================================
   20. FORMS
   ============================================================ */
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-family:var(--font-display); font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--blue); margin-bottom:5px; }
.form-group input,
.form-group select,
.form-group textarea { width:100%; padding:11px 14px; border:1.5px solid var(--gray-light); border-radius:var(--radius); font-family:var(--font-body); font-size:0.92rem; color:var(--text); background:var(--white); outline:none; transition:border-color var(--transition), box-shadow var(--transition); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(149,197,82,0.15); }
.form-group textarea { resize:vertical; min-height:100px; }
.form-row     { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-divider { font-family:var(--font-display); font-size:0.72rem; font-weight:700; letter-spacing:0.10em; text-transform:uppercase; color:var(--gray); margin:16px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--gray-light); }
.form-msg     { padding:12px 16px; border-radius:var(--radius); font-size:0.9rem; margin-top:12px; display:none; line-height:1.5; }
.form-msg.success { background:var(--green-light); color:var(--green-darker); border:1px solid var(--green-mid); display:block; }
.form-msg.error   { background:#fdecea; color:#c0392b; border:1px solid #f5c6c6; display:block; }

/* ============================================================
   21. PRICING TABLE
   ============================================================ */
.pricing-table { display:flex; flex-direction:column; gap:0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--gray-light); }
.pricing-row   { display:grid; grid-template-columns:1fr auto; align-items:center; padding:18px 24px; background:var(--white); border-bottom:1px solid var(--gray-light); transition:background var(--transition); }
.pricing-row:last-child { border-bottom:none; }
.pricing-row:hover      { background:var(--green-light); }
.pricing-row-label      { font-family:var(--font-display); font-size:1rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--blue); }
.pricing-row-sub        { font-size:0.85rem; color:var(--gray); margin-top:3px; font-family:var(--font-body); text-transform:none; letter-spacing:0; font-weight:400; }
.pricing-row-price      { font-family:var(--font-display); font-size:1.4rem; font-weight:800; color:var(--green-darker); white-space:nowrap; }
.pricing-row-price span { font-size:0.75rem; font-weight:600; color:var(--gray); display:block; text-align:right; letter-spacing:0.05em; text-transform:uppercase; }
.pricing-note { background:var(--blue-light); padding:14px 20px; border-radius:var(--radius); margin-top:16px; font-size:0.85rem; color:var(--gray); line-height:1.6; border-left:3px solid var(--blue-sky); }

/* ============================================================
   22. WHAT TO EXPECT SECTION
   ============================================================ */
.expect-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:28px; }
.expect-item { display:flex; gap:12px; align-items:flex-start; background:var(--white); border-radius:var(--radius); padding:16px; border:1px solid var(--gray-light); }
.expect-item svg { color:var(--green-darker); flex-shrink:0; margin-top:2px; }
.expect-item strong { display:block; font-family:var(--font-display); font-size:0.88rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--blue); margin-bottom:3px; }
.expect-item span { font-size:0.85rem; color:var(--gray); line-height:1.5; }

/* ============================================================
   23. CTA SECTIONS
   ============================================================ */
#bottom-cta { background:var(--blue); padding:80px 0; text-align:center; }
#bottom-cta p { color:rgba(255,255,255,0.62); max-width:520px; margin:0 auto 36px; font-size:1rem; }
.cta-buttons  { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
#newsletter   { background:var(--blue-light); padding:60px 0; }
.newsletter-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.newsletter-form  { display:flex; gap:10px; flex-wrap:wrap; flex:1; max-width:560px; }
.newsletter-form input { flex:1; min-width:180px; padding:13px 16px; border:1.5px solid var(--gray-light); border-radius:var(--radius); font-size:0.92rem; outline:none; transition:border-color var(--transition); color:var(--text); }
.newsletter-form input:focus { border-color:var(--green); }

/* ============================================================
   24. SPLASH / UNDER CONSTRUCTION
   ============================================================ */
#wrc-splash { position:fixed; inset:0; z-index:9999; background:var(--blue); display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:32px 24px; font-family:var(--font-display); }
#wrc-splash .sp-logo    { height:72px; margin-bottom:32px; filter:drop-shadow(0 4px 16px rgba(0,0,0,0.3)); }
#wrc-splash .sp-badge   { display:inline-flex; align-items:center; gap:8px; background:rgba(149,197,82,0.12); border:1px solid rgba(149,197,82,0.35); color:#b5d97a; font-size:0.78rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; padding:6px 16px; border-radius:100px; margin-bottom:24px; }
#wrc-splash h1          { font-size:clamp(2.2rem,6vw,4rem); font-weight:800; text-transform:uppercase; letter-spacing:0.03em; color:var(--white); line-height:1.05; margin-bottom:12px; }
#wrc-splash h1 span     { color:var(--green); }
#wrc-splash .sp-divider { width:48px; height:3px; background:var(--green); border-radius:2px; margin:0 auto 24px; }
#wrc-splash .sp-sub     { font-family:var(--font-body); font-size:1.05rem; font-weight:300; color:rgba(255,255,255,0.65); max-width:480px; line-height:1.7; margin-bottom:40px; }
.sp-countdown { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:40px; }
.sp-unit { display:flex; flex-direction:column; align-items:center; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10); border-radius:var(--radius-lg); padding:18px 22px 14px; min-width:84px; }
.sp-num  { font-size:2.8rem; font-weight:800; color:var(--white); line-height:1; margin-bottom:6px; font-variant-numeric:tabular-nums; }
.sp-label{ font-size:0.68rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.38); }
#wrc-splash.sp-hidden { display:none !important; }

/* ============================================================
   25. ANIMATIONS
   ============================================================ */
.fade-up { opacity:0; transform:translateY(28px); transition:opacity 0.55s ease, transform 0.55s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ============================================================
   26. RESPONSIVE
   ============================================================ */
@media (max-width:1024px) {
  :root { --section-pad:64px; }
  .nav-bottom   { display:none; }
  .hamburger    { display:flex; }
  .nav-social   { display:none; }
  .footer-grid  { grid-template-columns:1fr 1fr; gap:36px; }
  .why-grid     { grid-template-columns:1fr; }
  .why-grid-3   { grid-template-columns:1fr 1fr; }
  .area-layout  { grid-template-columns:1fr; gap:40px; }
  .referral-inner { grid-template-columns:1fr; gap:40px; }
  .footer-contact-layout { grid-template-columns:1fr; gap:40px; }
  .services-grid { grid-template-columns:1fr 1fr; }
  .service-tiles { grid-template-columns:repeat(3,1fr); }
  .dropdown-wide { flex-direction:column; min-width:260px; }
  .dropdown-col  { border-right:none; border-bottom:1px solid var(--gray-light); }
  .dropdown-col:last-child { border-bottom:none; }
}

@media (max-width:768px) {
  :root { --section-pad:52px; }
  .nav-logo img { height:44px; width:auto; max-width:160px; object-fit:contain; }
  .nav-top-left { min-width:44px; width:44px; }
  .nav-top-right { min-width:auto; gap:8px; }
  .nav-phone .phone-text { display:none; }
  .services-grid  { grid-template-columns:1fr 1fr; }
  .service-tiles  { grid-template-columns:repeat(2,1fr); }
  .gallery-grid   { grid-template-columns:1fr 1fr; }
  .reviews-grid   { grid-template-columns:1fr; }
  .footer-grid    { grid-template-columns:1fr 1fr; gap:28px; }
  .form-row       { grid-template-columns:1fr; }
  .expect-grid    { grid-template-columns:1fr; }
  #hero           { height:auto; min-height:560px; }
  .hero-arrow     { display:none; }
  .newsletter-inner { flex-direction:column; align-items:flex-start; }
}

@media (max-width:540px) {
  .services-grid  { grid-template-columns:1fr; }
  .service-tiles  { grid-template-columns:1fr 1fr; }
  .gallery-grid   { grid-template-columns:1fr; }
  .footer-grid    { grid-template-columns:1fr; }
  .cities-grid    { grid-template-columns:1fr; }
  .cities-grid-wide { grid-template-columns:1fr 1fr; }
  .hero-buttons   { flex-direction:column; }
  .cta-buttons    { flex-direction:column; align-items:center; }
  .ba-featured-pair { grid-template-columns:1fr; }
  .why-grid-3     { grid-template-columns:1fr; }
  .pricing-row    { grid-template-columns:1fr; gap:6px; }
  .pricing-row-price { text-align:left; }
}

@media (max-width:400px) {
  .nav-logo img { height:38px; max-width:130px; }
  .btn-sm { padding:9px 14px; font-size:0.78rem; }
}

@media (max-width:600px) {
  .promo-dots { display:none; }
  #promo-bar  { font-size:0.78rem; padding:8px 16px; }
}