/* Footer service limits fine print (NEW: separate line + text so spacing always works) */
.fineprintWrap{
  margin: 22px auto 0;          /* space ABOVE the divider line */
  max-width: 1000px;            /* same visual width as wrap */
  text-align: center;
  color: #cfcfcf;
  opacity: 0.95;
}

.fineprintRule{
  border-top: 1px solid #222;   /* the divider line */
}

.fineprintText{
  margin-top: 18px;             /* <-- SPACE AFTER THE LINE before the text */
  font-size: 12.5px;
  line-height: 1.5;
}

@media (max-width: 700px){
  .fineprintWrap{
    padding-left: 8px;
    padding-right: 8px;
  }
  .fineprintText{
    font-size: 12px;
  }
}

/* Subtle, non-underlined footnote asterisk */
.asterisk,
.asterisk:visited,
.asterisk:hover,
.asterisk:active{
  text-decoration: none !important; /* kills underline everywhere */
  font-weight: 500;
  font-size: 0.6em;                 /* much smaller */
  margin-left: 4px;
  position: relative;
  top: -0.65em;                     /* superscript feel */
  opacity: 0.7;
  color: inherit;                   /* same color as text */
}

/* LOGO STRIP (above hero) */
.logoStrip{
  background:#000;
  padding: 12px 0 10px;   /* was 26px 0 */
  border-bottom: 0;       /* remove the extra divider */
}

.logoStrip{
  border-bottom: 1px solid #222;
}
  
.logoStrip .logoWrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 10px;
  text-align:center;
}
.logoStrip img{
  width: min(320px, 85vw);
  height: auto;
}
.logoStrip .tagline{
  font-family:"Special Elite",cursive;
  font-size: clamp(14px, 2.2vw, 20px);
  letter-spacing: 1px;
  color:#fff;
  text-shadow:0 3px 10px rgba(0,0,0,.8);
}

/* tighten on phones */
@media (max-width: 700px){
  .logoStrip{ padding: 18px 0; }
  .logoStrip img{ width: min(220px, 85vw); }
}

body{
  margin:0;
  font-family:"Open Sans",sans-serif;
  color:#ffffff;
  background:#000000;
}
.wrap{max-width:1000px;margin:0 auto;padding:0 16px;}
.center{text-align:center}
a{color:inherit}

/* =========================
   HEADER (UPDATED)
   ========================= */
header{
  border-bottom:1px solid #333;
  background:#000;
}

/* Make desktop layout: left brand / centered nav / right buttons */
.headerRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  position:relative; /* allows centered nav without affecting left/right */
}

/* Brand as a link */
.brand{
  text-decoration:none;
  color:#fff;
  display:inline-flex;
  align-items:center;
}

/* Centered nav on desktop */
.mainNav{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:18px;
}

.mainNav a{
  margin:0;
  font-family:"Play",sans-serif;
  text-decoration:none;
  color:#fff;
  white-space:nowrap;
}

/* Active link (optional) */
.mainNav a.active{
  color:#169199;
}

.phone{
  border:2px solid #fff;
  padding:8px 12px;
  border-radius:10px;
  font-weight:800;
  text-decoration:none;
  color:#fff;
}

/* Header call + text buttons (right aligned desktop) */
.contactButtons{
  display:flex;
  gap:10px;
  align-items:center;
}

.textBtn{
  border:2px solid #169199;
  padding:8px 12px;
  border-radius:10px;
  font-weight:800;
  text-decoration:none;
  color:#169199;
  background:transparent;
  transition:background .2s ease, color .2s ease;
}

.textBtn:hover{
  background:#169199;
  color:#000;
}

/* --- MOBILE HEADER (stack + center) --- */
@media (max-width: 600px){
  .headerRow{
    flex-direction:column;
    gap:12px;
    padding:12px 0;
  }

  /* Brand centered on mobile */
  .brand{
    justify-content:center;
    width:100%;
    text-align:center;
  }

  /* Nav moves below and centers */
  .mainNav{
    position:static;
    transform:none;
    left:auto;
    width:100%;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;
  }

  /* Buttons centered on mobile */
  .contactButtons{
    justify-content:center;
    width:100%;
    flex-wrap:wrap;
  }

  .phone{
    white-space: nowrap;
    padding: 10px 12px;
    font-size: 16px;
    border-radius: 14px;
  }

  .mainNav a{
    font-size: 18px;
  }
}

/* =========================
   HOMEPAGE BANNER (kept as-is)
   ========================= */
.banner{
  margin-top: 0;
  position:relative;
  background:#000;
  overflow:hidden;

  /* responsive height: grows on big screens, shrinks on small */
  height: clamp(200px, 30vw, 340px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.banner img.bg{
  width:100%;
  height:100%;
  object-fit: cover;         /* desktop/wide = full width */
  object-position: center;
  opacity:.85;
}

.banner .overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.35),
    rgba(0,0,0,.75)
  );
}

/* mobile/portrait = show the whole image */
@media (max-width: 700px){
  .banner img.bg{
    object-fit: contain;
  }
  .heroLogo img{
    height: 140px;
  }
  .heroTagline{
    font-size: 16px;
  }
}

/* HERO LOGO */
.heroLogo{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  z-index:3;
  padding: 12px;
}

.heroLogo img{
  /* responsive logo size (desktop -> mobile) */
  height: clamp(110px, 22vw, 320px);
  width:auto;
  max-width:90%;
}

.heroTagline{
  margin-top:14px;
  font-family:"Special Elite",cursive;
  color:#fff;
  font-size: clamp(14px, 2.4vw, 22px);
  letter-spacing:1px;
  text-shadow:0 3px 10px rgba(0,0,0,.8);
}

/* CONTENT */
h2{
  font-family:"Play",sans-serif;
  letter-spacing:3px;
  text-transform:uppercase;
  color:#fff;
}
.accent{color:#169199}
.section{padding:30px 0}

/* SERVICES (homepage cards) */
.services{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.serviceLink{
  text-decoration:none;
  color:inherit;
  display:block;
}
.service{
  border:1px solid #333;
  border-radius:18px;
  padding:18px;
  text-align:center;
  background:#0b0b0b;
  box-shadow:0 12px 30px rgba(0,0,0,.6);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.service:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,.9);
}
.service img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:14px;
}
.service h3{
  font-family:"Play",sans-serif;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#fff;
}
.service p{
  color:#ddd;
}

@media(max-width:750px){
  .services{grid-template-columns:1fr;}
}

/* =========================
   FOOTER
   ========================= */
footer{
  border-top:1px solid #333;
  padding:26px 0;
  margin-top:40px;
  background:#000;
}
.footerGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  color:#fff;
  align-items:start;

  margin-bottom: 22px; /* space after Sat: By appointment (before divider line) */
}
.footerGrid a{
  color:#fff;
}

/* Desktop alignment: left / center / right */
.footerGrid > div:nth-child(1){ text-align:left; }
.footerGrid > div:nth-child(2){ text-align:center; }
.footerGrid > div:nth-child(3){ text-align:right; }

/* Center the footer buttons + email under them */
.footerButtons{
  justify-content:center;
  flex-wrap:wrap;
}

.footerEmail{
  margin-top:8px;
  margin-bottom:16px; /* space after email */
  text-align:center;
}

/* Mobile: single column + center everything */
@media(max-width:800px){
  .footerGrid{grid-template-columns:1fr;}
  .footerGrid > div:nth-child(1),
  .footerGrid > div:nth-child(2),
  .footerGrid > div:nth-child(3){
    text-align:center;
  }
}

/* =========================
   SERVICE PAGE HERO (renamed to avoid conflict)
   Use: <section class="serviceBanner">
   ========================= */
.serviceBanner{
  position:relative;
  height:260px;
  background:#000;
  overflow:hidden;
}
.serviceBanner img.bg{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.75;
}
.serviceBanner .overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.35),
    rgba(0,0,0,.85)
  );
}
.heroText{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  z-index:3;
  padding:0 16px;
}
.heroText h1{
  margin:0;
  font-family:"Play",sans-serif;
  letter-spacing:3px;
  text-transform:uppercase;
  font-size:34px;
}
.heroText p{
  margin:10px 0 0;
  font-family:"Special Elite",cursive;
  font-size:18px;
  color:#fff;
  text-shadow:0 3px 10px rgba(0,0,0,.8);
}
@media(max-width:700px){
  .serviceBanner{height:220px;}
  .heroText h1{font-size:26px;}
  .heroText p{font-size:16px;}
}

/* CARDS (service pages) */
.cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.card{
  border:1px solid #333;
  border-radius:18px;
  padding:18px;
  background:#0b0b0b;
  box-shadow:0 12px 30px rgba(0,0,0,.6);
}
.card h3{
  margin:0 0 10px;
  font-family:"Play",sans-serif;
  letter-spacing:2px;
  text-transform:uppercase;
}
.card ul{
  margin:0;
  padding-left:18px;
  color:#ddd;
}
.card li{margin:8px 0}
@media(max-width:750px){
  .cards{grid-template-columns:1fr;}
}

/* PRICING STRIP */
.pricingStrip{
  border:1px solid #333;
  border-radius:18px;
  padding:18px;
  background:#070707;
  color:#ddd;
}
.pricingStrip strong{color:#fff}

/* NOTE (yardwork etc.) */
.note{
  border:1px solid #2a2a2a;
  border-radius:18px;
  padding:16px 18px;
  background:#070707;
  color:#ddd;
}
.note strong{color:#fff}

/* CTA */
.cta{
  border:1px solid #333;
  border-radius:18px;
  padding:20px;
  background:linear-gradient(180deg,#0b0b0b,#050505);
  text-align:center;
}
.cta a.btn{
  display:inline-block;
  margin-top:12px;
  padding:12px 16px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  border:2px solid #169199;
  color:#fff;
}
.cta a.btn:hover{
  background:#169199;
  color:#000;
}

/* --- HOMEPAGE BANNER DESKTOP FIX: keep faces in frame --- */

/* Default: don’t crop the faces off */
.banner img.bg{
  object-position: center 35%; /* move the "focus" a bit upward (tweak 25–45%) */
}

/* Very wide screens need a slightly different focal point */
@media (min-width: 1100px){
  .banner img.bg{
    object-position: center 30%;
  }
}

/* Ultra-wide screens (optional, but helps if it still chops) */
@media (min-width: 1600px){
  .banner{
    height: clamp(240px, 28vw, 420px); /* a bit taller on huge screens */
  }
  .banner img.bg{
    object-position: center 28%;
  }
}

/* ===== Reviews premium layout ===== */

.subtleText{
  color:#ddd;
  max-width:760px;
  margin:12px auto 0;
}

/* 3-column layout: side / center / side */
.reviewLayout{
  display:grid;
  grid-template-columns: 220px 1fr 220px;
  gap:26px;
  align-items:start;
}

/* Side buttons */
.sidePlatform{
  text-align:center;
  padding:18px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color:inherit;
  text-decoration:none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.sidePlatform.isLink:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.30);
  background: rgba(0,0,0,.28);
}

/* Big icon container */
.platformIconLarge{
  width:62px;
  height:62px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}

/* Brand hover glows */
.sidePlatform.isFacebook.isLink:hover{
  box-shadow: 0 10px 26px rgba(24,119,242,.18);
}
.sidePlatform.isGoogle.isLink:hover{
  box-shadow: 0 10px 26px rgba(66,133,244,.14);
}

/* Disabled */
.sidePlatform.isDisabled{
  opacity:.65;
  cursor:not-allowed;
  filter:saturate(.85);
}

/* Center card (premium wide) */
.wideCard{
  max-width:1100px;
  margin:0 auto;
  padding:28px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}

.cardHeaderRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.cardTitle{ margin:0; }
.cardNote{
  color:#bbb;
  font-size:13px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:6px 10px;
  background: rgba(0,0,0,.22);
}

.cardBlurb{
  color:#bbb;
  margin:10px 0 0;
}

.thankYouMsg{
  color:#cfe9cf;
  margin-top:12px;
}

/* Form fields */
.reviewForm{ margin-top:18px; }

.formGrid{
  display:grid;
  gap:14px;
  margin-top:6px;
}

.field{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.20);
  color:inherit;
}

.formBtn{
  border:none;
  cursor:pointer;
}

.smallNote{
  color:#bbb;
  font-size:13px;
}

/* Mobile: stack */
@media (max-width: 1000px){
  .reviewLayout{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   REVIEWS HUB (two side-by-side clickable boxes)
   ========================================================= */

.reviewsHubGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 900px){
  .reviewsHubGrid{ grid-template-columns: 1fr; }
}

.cardLink{
  display:block;
  text-decoration:none;
  color:inherit;
}

.cardLink .card{
  height:100%;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.cardLink:hover .card,
.cardLink:focus-visible .card{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.28);
  background: rgba(0,0,0,.26);
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
  outline:none;
}

.hubCopy{
  color:#ddd;
  line-height:1.55;
  margin-top:10px;
}

.cardCta{
  margin-top:14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#ddd;
  font-weight:700;
}

.cardCta span{
  display:inline-flex;
  width:28px;
  height:28px;
  border-radius:10px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
}


/* =========================================================
   REVIEW FORM PAGE (Google left / Form center / Facebook right)
   ========================================================= */

.subtleText{
  color:#ddd;
  max-width:760px;
  margin:12px auto 0;
}

.reviewLayout{
  display:grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 26px;
  align-items: start;
}

@media (max-width: 1000px){
  .reviewLayout{ grid-template-columns: 1fr; }
  .wideCard{ max-width: 780px; margin: 0 auto; }
  .sidePlatform{ max-width: 520px; margin: 0 auto; }
}

.sidePlatform{
  text-align:center;
  padding:18px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color:inherit;
  text-decoration:none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.sidePlatform.isLink:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.30);
  background: rgba(0,0,0,.32);
}

.sidePlatform.isDisabled{
  opacity:.65;
  cursor:not-allowed;
  filter:saturate(.85);
}

/* Allow subtle glow even while disabled (no movement) */
.sidePlatform.isDisabled.hasGlow:hover{
  transform: none;
  border-color: rgba(255,255,255,.22);
  background: rgba(0,0,0,.28);
  box-shadow: 0 12px 30px rgba(66,133,244,.18);
}

.sidePlatform.isFacebook.isLink:hover{
  box-shadow: 0 12px 30px rgba(24,119,242,.22);
}
.sidePlatform.isGoogle.isLink:hover,
.sidePlatform.isGoogle.hasGlow:hover{
  box-shadow: 0 12px 30px rgba(66,133,244,.18);
}

.platformIconLarge{
  width:64px;
  height:64px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}

.platformTitle{ font-weight:700; color:#f1f1f1; }
.platformSub{ font-size:13px; color:#bbb; margin-top:6px; }

.wideCard{
  padding:28px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
}

.cardHeaderRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 6px;
}

.cardTitle{ margin:0; }

.cardNote{
  color:#bbb;
  font-size:13px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:6px 10px;
  background: rgba(0,0,0,.22);
  white-space: nowrap;
}

.cardBlurb{ color:#bbb; margin:10px 0 0; }
.thankYouMsg{ color:#cfe9cf; margin-top:12px; }

.reviewForm{ margin-top:18px; }

.formGrid{
  display:grid;
  gap:14px;
}

.field{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.30);
  color:#f1f1f1;
  outline:none;
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 15px;
}

.field::placeholder{ color: rgba(255,255,255,.55); }

.field:focus{
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}

textarea.field{ resize: vertical; min-height: 130px; }

.smallNote{ color:#bbb; font-size:13px; }