:root{
  --brand-500:#0fb8ad;
  --brand-700:#0a7f78;
  --text:#0b1b22;
  --muted:#5a6b73;
  --border:#e6eef2;
  --surface:#fff;
  --navy:#223852;
  --white:#ffffff;
  --solid-scrolled:#80d0c7;

  /* default safe reserve for fixed navbar */
  --topbar-h: 132px;

  /* ✅ Reviews carousel tuning (desktop) */
  --reviews-card-w: 380px;     /* card width on desktop */
  --reviews-gap: 16px;         /* gap between cards */

  /* ✅ KEY FIX:
     Make the “runway” auto-match the track width so FIRST card is centered at scrollLeft=0.
     runway = (track viewport width - card width) / 2
     clamp keeps it sane on ultrawide / narrow layouts. */
  --reviews-runway: clamp(16px, calc(50% - (var(--reviews-card-w) / 2)), 420px);

  --reviews-arrow-inset: 10px; /* bring arrows closer to center by increasing this */

  /* =========================================================
     ✅ HERO IMAGE TOKENS (default = Midtown)
     Neighborhood pages can override these in landing_head_extras.
     ========================================================= */
  --hero-img-jpg: url("../images/clean_office_midtown.jpg");
  --hero-img-webp: url("../images/clean_office_midtown.webp");
  --hero-img-mobile-jpg: url("../images/clean_office_midtown_mobile.jpg");
  --hero-img-mobile-webp: url("../images/clean_office_midtown_mobile.webp");
}

@media (max-width: 992px){
  :root{ --topbar-h: 112px; }
}
@media (max-width: 576px){
  :root{ --topbar-h: 104px; }
}

html, body { overflow-x: hidden; }

/* ✅ Global anchor offset for fixed navbar (affects all #hash links) */
html{
  scroll-padding-top: calc(var(--topbar-h) + 16px);
}

@media (max-width: 768px){
  html{
    scroll-padding-top: calc(var(--topbar-h) - 30px); /* tweak 32–72 */
  }
}

body{
  position: relative;
  background:#fff;
  font-family: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  padding-top: calc(var(--topbar-h) + env(safe-area-inset-top)) !important;
}

/* ✅ make room for the mobile sticky CTA (only on <=768) */
body.has-mobile-cta{
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}
@media (min-width: 769px){
  body.has-mobile-cta{ padding-bottom: 0; }
}

/* Keep main from adding extra whitespace */
main.container.py-5{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  position: relative;
  z-index: 1;
  background: transparent !important;
}
main{ margin-top: 0 !important; padding-top: 0 !important; }

.container-landing{
  max-width:1120px;
  margin:0 auto;
  padding:0 0.75rem;
}

/* ===== NAVBAR (Manhattan variant) ===== */
nav.tl-topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;

  background: #88d0cb !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 0;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 8px 24px rgba(0,0,0,0.24) !important;
  margin-bottom: 0 !important;
}

nav.tl-topbar.tl-at-top,
nav.tl-topbar.tl-scrolled{
  background: #88d0cb !important;
  box-shadow: inherit !important;
}

nav.tl-topbar .container-landing{
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}


@media (max-width: 992px){
  nav.tl-topbar .container-landing{
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.tl-topbar-inner{
  display:flex;
  align-items:center;
  gap:1.75rem;
  padding: 1.25rem 0;
}

@media (max-width: 576px){
  .tl-topbar-inner{
    padding: .9rem 0;
    gap: .9rem;
  }
}

.tl-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.25rem;
  flex:1;
  margin-left:.25rem;
}

.tl-actions{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-left:auto;
  margin-right:4rem;
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.actions-nudge{ margin-right: 0; }

.tl-link{
  color:#fff;
  text-decoration:none;
  padding:.55rem .85rem;
  border-radius:.5rem;
  font-weight:400;
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.06em;
  transition: color .15s ease, background-color .15s ease;
}
.tl-link:hover{
  color: var(--navy);
  background: transparent;
  text-decoration: none;
}

.brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
}
.brand-badge{ display:none !important; }
.brand-nudge{ margin-left: 0; }

.brand-logo{
  display:block;
  height:64px;
  width:auto;
  object-fit:contain;
}
@media (min-width: 992px){ .brand-logo{ height:64px; } }
@media (max-width: 576px){ .brand-logo{ height:52px; } }

.tl-btn-primary,.tl-btn-outline{
  text-decoration: none !important;
  min-width: 140px;
  text-align: center;
}
.tl-btn-primary{
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.85));
  color: var(--solid-scrolled);
  border:0;
  border-radius:999px;
  padding:.8rem 1.15rem;
  box-shadow:0 6px 16px rgba(0,0,0,.22);
}
.tl-btn-primary:hover{ filter:brightness(1.03); }
nav.tl-topbar .tl-actions .tl-btn-primary{
  min-width: 195px;
  padding: 1.05rem 1.75rem;
  font-size: 19px;
}

.tl-btn-outline{
  background:transparent;
  border:1px solid rgba(255,255,255,.45);
  color:#fff;
  border-radius:999px;
  padding:.8rem 1.15rem;
}
.tl-btn-outline:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

.tl-toggle{
  border:0;
  background:transparent;
  font-size:1.6rem;
  color:#fff;
  display:none;
  margin-left: auto;     /* pushes hamburger right */
  padding-right: 6px;
}
@media (max-width: 992px){ .tl-toggle{display:block} }

.tl-mobile{ border-bottom:0; }
.tl-mobile-inner{
  padding: .75rem 1rem 1rem;
  display: flex;
  flex-direction: column;  /* stack vertically */
  gap: .25rem;
}

.tl-mobile-link{
  text-decoration: none;
  padding: .85rem 1rem;
  border-radius: .6rem;
  color: #fff;
  display: block;
  width: 100%;
  white-space: nowrap;
}
.tl-mobile-link:hover{
  background: rgba(255,255,255,.10);
}
.tl-at-top + .collapse.tl-mobile{ background: transparent !important; }
.tl-scrolled + .collapse.tl-mobile{ background: inherit !important; }

@media (max-width: 992px){
  .tl-mobile.show{
    border-top: 1px solid rgba(255,255,255,0.35);
  }
}

@media (max-width: 992px){
  .tl-nav{ display: none; }
}

h1, h2, h3, h4{
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--navy);
  font-weight: 600;
}

.page-section{ padding: 80px 0; }
@media (max-width: 768px){
  .page-section{ padding: 52px 0; }
}

@media (min-width: 769px){
  #services{
    scroll-margin-top: calc(var(--topbar-h) - 160px);
  }

  #pricing{
    scroll-margin-top: -80px;
  }

  #contact{
    scroll-margin-top: calc(var(--topbar-h) - 160px);  /* tweak this */
  }

  #testimonials{
    scroll-margin-top: calc(var(--topbar-h) - 160px);
  }
}

#how-it-works{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: 16px;
  padding-right: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.90), rgba(194, 255, 251, 0.82)),
    url("../images/manhattan_office_cleaning_team.webp") center center / cover no-repeat;
}

.container-narrow{
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
}
.container-wide{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (max-width: 576px){
  .container-wide{ padding: 0 14px; }
}

.badge-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:500;
  background:rgba(15,184,173,0.08);
  color:var(--brand-700);
}

.btn-primary-sano{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--brand-500);
  color:#ffffff;
  border-radius:999px;
  padding:10px 22px;
  font-weight:600;
  font-size:14px;
  border:none;
  text-decoration:none;
  transition:background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow:0 10px 25px rgba(15,184,173,0.25);
  cursor:pointer;
  white-space:nowrap;
}
.btn-primary-sano:hover{
  background:var(--brand-700);
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(15,184,173,0.30);
  color:#ffffff;
  text-decoration:none;
}

.btn-secondary-sano{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  padding:10px 20px;
  font-size:14px;
  font-weight:500;
  border:1px solid var(--border);
  color:var(--navy);
  background:#ffffff;
  text-decoration:none;
  transition:background 0.18s ease, border-color 0.18s ease;
  cursor:pointer;
  white-space:nowrap;
}
.btn-secondary-sano:hover{
  background:#f5faf9;
  border-color:var(--brand-500);
  text-decoration:none;
  color:var(--navy);
}

/* =========================================================
   ✅ HERO — variable-driven background
   Neighborhood pages override the --hero-img-* tokens in :root.
   ========================================================= */
.hero{
  margin-top: 0 !important;
  padding-top: 72px !important;
  padding-bottom: 80px;

  position: relative;
  isolation: isolate;
  color: #ffffff;

  width: 100vw;
  margin-left: calc(50% - 50vw);

  min-height: 520px;

  background-color: #0b1b22 !important;

  /* fallback (jpg token) */
  background:
    linear-gradient(135deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35)),
    var(--hero-img-jpg)
    center center / cover no-repeat !important;
}

/* prefer webp when supported */
@supports (background-image: image-set(url("../images/x.webp") type("image/webp"))){
  .hero{
    background:
      linear-gradient(135deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35)),
      image-set(
        var(--hero-img-webp) type("image/webp"),
        var(--hero-img-jpg) type("image/jpeg")
      )
      center center / cover no-repeat !important;
  }
}

@media (max-width: 768px){
  .hero{
    padding-top: 20px !important;
    padding-bottom: 42px;

    min-height: 560px;

    background-color: #0b1b22 !important;

    background:
      linear-gradient(135deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35)),
      var(--hero-img-mobile-jpg)
      center center / cover no-repeat !important;
  }
}

@supports (background-image: image-set(url("../images/x.webp") type("image/webp"))){
  @media (max-width: 768px){
    .hero{
      background:
        linear-gradient(135deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35)),
        image-set(
          var(--hero-img-mobile-webp) type("image/webp"),
          var(--hero-img-mobile-jpg) type("image/jpeg")
        )
        center center / cover no-repeat !important;
    }
  }
}

.hero-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.15fr);
  gap:56px;
  align-items:center;
}
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; gap: 22px; }
}

.hero-eyebrow{
  font-size:28px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#70ded6;
  font-weight:600;
  margin-bottom:10px;
}

.hero h1{
  font-size:32px;
  line-height:1.2;
  margin-bottom:16px;
  color: #ffffff;
  max-width: 28ch;
}
@media (min-width: 1024px){
  .hero h1{ font-size:40px; }
}

.hero-subhead{
  font-size:16px;
  color:#ebebeb;
  max-width:520px;
  margin-bottom:20px;
}

.hero-meta.hero-meta-stack{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 18px;
  font-size: 18px;
  color: rgba(255,255,255,0.85);
}

.hero-meta-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  color: rgba(255,255,255,0.85);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:8px;
}

@media (max-width: 900px){
  .hero-eyebrow{ font-size: 18px; margin-bottom: 20px; }
  .hero h1{ font-size: 26px; margin-bottom: 26px; }
  .hero-subhead{ display: none; }
  .hero-meta.hero-meta-stack{ font-size: 15px; gap: 8px; margin-top: 24px; margin-bottom: 10px; }
  .hero-meta-item.hide-mobile{ display: none; }
  .hero-actions{ gap: 10px; margin-bottom: 22px; }
  .hero-actions a{
    width: 100%;
    padding: 12px 18px;
    font-size: 15px;
  }
  .hero-mini-form{ margin-top: 64px; }
}


.hero-contact-card{
  background:#ffffff;
  border-radius:24px;
  padding:20px 20px 18px;
  box-shadow:0 18px 45px rgba(15,184,173,0.12);
  border:1px solid rgba(230,238,242,0.8);
  color: var(--text);
}
.hero-contact-card h3{
  font-size:14px;
  font-weight:700;
  margin:0 0 6px;
  color: var(--navy);
  letter-spacing: .02em;
}
.hero-contact-card .hero-contact-sub{
  font-size:12px;
  color: var(--muted);
  margin-bottom:12px;
}

.hero-contact-call{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin: 8px 0 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(15,184,173,0.08);
  border: 1px solid rgba(15,184,173,0.18);
}
.hero-contact-call .call-label{
  font-size:14px;
  color: var(--muted);
  line-height:1.1;
  padding-bottom: 6px;
}
.hero-contact-call .call-methods{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.hero-contact-call .method-icon,
.contact-call .method-icon{
  width:30px;
  height:30px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(15,184,173,0.14);
  color: var(--brand-700);
  flex-shrink:0;
}

.hero-contact-call .call-method{
  display:flex;
  align-items:center;
  gap:8px;
  min-width: 0;
}

.hero-contact-call .call-number{
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px;
  font-weight:700;
  color: var(--navy);
  text-decoration:none;
  white-space:nowrap;
}
.hero-contact-call .call-number:hover{
  text-decoration:none;
  color: var(--brand-700);
}

@media (max-width: 900px){
  .hero-form-col{ display: none; }
}

.hero-mini-form{ display:none; }
@media (max-width: 900px){
  .hero-mini-form{
    display:block;
    margin-top: 40px;
  }
  .hero-mini-card{
    background: rgba(255,255,255,0.96);
    border-radius: 18px;
    padding: 14px 14px 12px;
    border: 1px solid rgba(230,238,242,0.95);
    box-shadow: 0 16px 40px rgba(9,30,66,0.18);
    color: var(--text);
  }
  .hero-mini-title{
    font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: var(--navy);
    margin: 0 0 4px 0;
    letter-spacing: .02em;
  }
  .hero-mini-sub{
    font-size: 12px;
    color: var(--muted);
    margin: 0 0 10px 0;
  }
  .hero-mini-row{
    display:grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .hero-mini-form .field{ margin-bottom: 0; }
  .hero-mini-form .field label{
    font-size: 12px;
    font-weight: 600;
    color: #3f4f58;
  }
  .hero-mini-form .field input{
    border-radius: 12px;
    border: 1px solid #d2dde2;
    padding: 12px 12px;
    font-size: 15px;
    outline: none;
    width: 100%;
  }
  .hero-mini-form .field input:focus{
    border-color: var(--brand-500);
    box-shadow: 0 0 0 2px rgba(15,184,173,0.25);
  }
  .hero-mini-legal{
    margin-top: 8px;
    font-size: 11px;
    color: #6c7b84;
  }
}

/* VALUE PROPS / WHY SANO */
.section-tag{
  font-size:32px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--brand-700);
  font-weight:600;
  margin-bottom:8px;
}
.section-heading{ font-size:24px; margin-bottom:8px; }
.section-subtitle{
  font-size:14px;
  color:var(--muted);
  max-width:580px;
}

@media (max-width: 576px){
  .section-tag{ font-size: 20px; }
  .section-heading{ font-size: 20px; }
  .section-subtitle{ font-size: 14px; }
}

.pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.pill-row .pill{
  border-radius:999px;
  border:1px solid var(--border);
  padding:7px 14px;
  font-size:15px;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#ffffff;
}
@media (max-width: 576px){
  .pill-row .pill{ font-size: 13px; padding: 7px 12px; }
}

.value-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:20px;
  margin-top:28px;
}
@media (max-width: 900px){
  .value-grid{ grid-template-columns: 1fr; }
}
.value-card{
  background:#ffffff;
  border-radius:18px;
  padding:18px 18px 16px;
  border:1px solid var(--border);
  box-shadow:0 10px 26px rgba(9,30,66,0.04);
}
@media (max-width: 576px){
  .value-card{ padding: 16px 14px 14px; border-radius: 16px; }
}
.value-card-icon{
  width:32px;
  height:32px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
  background:rgba(15,184,173,0.10);
  color:var(--brand-700);
}
.value-card-title{
  font-size:18px;
  font-weight:600;
  margin-bottom:4px;
  color:var(--navy);
}
.value-card-body{
  font-size:14px;
  color:var(--muted);
}

.sample-office-preview .hero-card-chip{ font-size: 14px; padding: 6px 0px; }
.sample-office-preview .hero-card-stat-row{ font-size: 12px; padding: 2px 5px 0px 0px; }
.sample-office-preview .hero-card-stat-row span{ flex: 0 0 78px; }
sample-office-preview .hero-card-stat-row strong{ font-size: 11px; font-weight: 600; }
.sample-office-preview .hero-card-footnote{ font-size: 11px; color: var(--muted); font-weight: lighter; opacity: .7; padding-top: 12px; }

.checklist-preview{
  margin-top: 12px;
  border: 1px solid rgba(232, 232, 232, 0.064);
  overflow: hidden;
  box-shadow: 0 0px 500px rgba(4, 16, 37, 0.06);
  background: #f7fafc;
}
.checklist-preview img{ display:block; width:100%; height:auto; }
.checklist-caption{ font-size: 11px; color: var(--muted); margin-top: 6px; }

.sample-office-preview{
  margin-top: 12px;
  border: 1px solid rgba(232, 232, 232, 0.18);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(9,30,66,0.06);
  background: #ffffff;
  border-radius: 16px;
}

.platform-preview{
  margin-top: 12px;
  border: 1px solid rgba(232, 232, 232, 0.18);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(9,30,66,0.06);
  background: #ffffff;
  border-radius: 16px;
}
.platform-preview img{ display:block; width:100%; height:auto; }
.platform-caption{ font-size: 11px; color: var(--muted); margin-top: 6px; }

.why-sano{
  background:
    radial-gradient(circle at top left, rgba(15,184,173,0.10), transparent 55%),
    radial-gradient(circle at bottom right, rgba(34,56,82,0.05), transparent 60%),
    #f5faf9;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: 16px;
  padding-right: 16px;
}

.why-sano .container-wide{
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}

.why-inner{
  background:#ffffff;
  border-radius:24px;
  padding:28px 28px 26px;
  box-shadow:0 18px 45px rgba(9,30,66,0.08);
  position:relative;
  overflow:hidden;
}
@media (max-width: 900px){
  .why-inner{ padding:22px 20px 20px; }
}
@media (max-width: 576px){
  .why-inner{ padding:18px 14px 16px; border-radius: 18px; }
}

.services{ background:#ffffff; }
.services-inner{ margin-top:24px; }

.service-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:18px;
  margin-top:18px;
  grid-auto-rows: 1fr;
}
@media (max-width: 640px){
  .service-grid{
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
}

.service-card{
  background:#ffffff;
  border-radius:18px;
  padding:16px 16px 14px;
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:6px;
  box-shadow:0 8px 20px rgba(9,30,66,0.05);
  height: 100%;
}

.service-chip{
  font-size:14px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(34,56,82,0.06);
  color:var(--muted);
  align-self:flex-start;
  margin-bottom:2px;
}

.service-header-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:4px;
}

.service-icon{
  width:30px;
  height:30px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,184,173,0.12);
  color:var(--brand-700);
  flex-shrink:0;
  font-size:16px;
}

.service-card h3{ font-size:16px; margin:0; color:var(--navy); }
.service-card p{ font-size:13px; color:var(--muted); margin:0; padding-top: 10px; }

.service-card.has-image{
  flex-direction:row;
  align-items:stretch;
  padding:0;
  overflow:hidden;
}

.service-card-img{ flex:0 0 45%; height:auto; }
.service-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.service-card-content{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:16px 16px 14px;
}

@media (max-width: 640px){
  .service-card.has-image{ flex-direction:column; }
  .service-card-img{
    flex:0 0 auto;
    width:100%;
    max-height:220px;
  }
}

/* ✅ PROCESS */
.process-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:22px;
  margin-top:30px;
  align-items:start;
}

.process-grid .process-step:nth-child(1){ grid-column: 1; grid-row: 1; }
.process-grid .process-step:nth-child(2){ grid-column: 2; grid-row: 2; }
.process-grid .process-step:nth-child(3){ grid-column: 3; grid-row: 3; }
.process-grid .process-step:nth-child(4){ grid-column: 4; grid-row: 4; }

.process-step{
  background:#ffffff;
  border-radius:22px;
  padding:18px 18px 16px;
  border:1px solid var(--border);
  box-shadow:0 16px 40px rgba(9,30,66,0.08);
  position:relative;

  width: 100%;
  max-width: 600px;
  justify-self: start;
  overflow: visible;
}

.process-grid .process-step:nth-child(1){ transform: translateX(0); }
.process-grid .process-step:nth-child(2){ transform: translateX(-80px); }
.process-grid .process-step:nth-child(3){ transform: translateX(-160px); }
.process-grid .process-step:nth-child(4){ transform: translateX(-240px); }

.process-step-number{
  width:24px;
  height:24px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--brand-500);
  color:#ffffff;
  font-size:12px;
  font-weight:600;
  margin-bottom:8px;
}
.process-step h3{ font-size:20px; margin-bottom:4px; }
.process-step p{ font-size:15px; color:var(--muted); margin:0; }

.process-grid .process-step:nth-child(-n+3)::after{
  content: "";
  position: absolute;
  bottom: -90%;
  left: 50%;
  width: 110px;
  height: 110px;
  background: url("/static/icons/turn.png") center/contain no-repeat;
  opacity: 0.9;
  pointer-events: none;
}

/* =========================================================
   ✅ DESKTOP FIX: Actually make the “How it Works” cards wider
   - The old grid columns were 1fr (too narrow), so max-width never mattered.
   - These overrides run ONLY on desktop.
   ========================================================= */
@media (min-width: 1025px){
  .process-grid{
    /* Give each step a real minimum width so cards can grow */
    grid-template-columns: repeat(4, minmax(340px, 1fr)); /* tweak 320–420 */
    gap: 26px; /* a touch more breathing room */
  }

  .process-step{
    /* Center in its cell so wider cards look intentional */
    justify-self: center;
  }

  /* Reduce the stagger so wider cards don’t collide */
  .process-grid .process-step:nth-child(1){ transform: translateX(0); }
  .process-grid .process-step:nth-child(2){ transform: translateX(-50px); }
  .process-grid .process-step:nth-child(3){ transform: translateX(-100px); }
  .process-grid .process-step:nth-child(4){ transform: translateX(-150px); }
}

@media (max-width: 1024px){
  .process-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-grid .process-step:nth-child(1){ grid-column: 1; grid-row: 1; transform: none; }
  .process-grid .process-step:nth-child(2){ grid-column: 2; grid-row: 2; transform: none; }
  .process-grid .process-step:nth-child(3){ grid-column: 1; grid-row: 3; transform: none; }
  .process-grid .process-step:nth-child(4){ grid-column: 2; grid-row: 4; transform: none; }
  .process-step{ max-width: 520px; }
}

@media (max-width: 640px){
  .process-grid{ grid-template-columns: 1fr; }
  .process-grid .process-step:nth-child(1){ grid-column: 1; grid-row: 1; }
  .process-grid .process-step:nth-child(2){ grid-column: 1; grid-row: 2; }
  .process-grid .process-step:nth-child(3){ grid-column: 1; grid-row: 3; }
  .process-grid .process-step:nth-child(4){ grid-column: 1; grid-row: 4; }
  .process-grid .process-step::after{ display:none; }
  .process-step{ max-width: none; }
  .process-step h3{ font-size: 18px; }
  .process-step p{ font-size: 14px; }
}

.who-we-serve{ padding-top: 32px; padding-bottom: 32px; }
.faq-section{ padding-top: 32px; }

@media (max-width: 768px){
  .who-we-serve{ padding-bottom: 22px; }
  .faq-section{ padding-top: 22px; }
}

.chips-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}
.chip{
  border-radius:999px;
  border:1px solid var(--border);
  padding:6px 12px;
  font-size:12px;
  color:var(--muted);
  background:#ffffff;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
@media (max-width: 576px){
  .chips-wrap{ gap: 8px; }
  .chip{ font-size: 12px; padding: 7px 12px; border-radius: 14px; }
}

/* ===== GOOGLE REVIEWS (CAROUSEL) ===== */
.reviews-section{ margin-top: 34px; }
.reviews-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.reviews-title{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.google-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:700;
  color:var(--navy);
}
.reviews-summary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
}
.stars{
  color:#fbbc04;
  letter-spacing:1px;
  font-size:13px;
  line-height:1;
}

.reviews-carousel{
  position: relative;
  margin-top: 10px;
}

/* ✅ single source of truth for the scrolling track */
.reviews-track{
  display:flex;
  gap: var(--reviews-gap);
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  /* ✅ runway now auto-centers the first card on desktop */
  padding: 4px var(--reviews-runway) 10px;
  scroll-padding-left: var(--reviews-runway);
  scroll-padding-right: var(--reviews-runway);

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reviews-track::-webkit-scrollbar{ display:none; }

/* ✅ desktop: fixed width cards (always scrolls) */
.reviews-track .review-card{
  flex: 0 0 var(--reviews-card-w);
  scroll-snap-align: center;
}

/* ✅ tablet: 2-up, no giant runway */
@media (max-width: 900px){
  .reviews-track{
    padding-left: 16px;
    padding-right: 16px;
    scroll-padding-left: 16px;
    scroll-padding-right: 16px;
  }
  .reviews-track .review-card{
    flex: 0 0 calc((100% - var(--reviews-gap)) / 2);
    scroll-snap-align: start;
  }
}

/* ✅ mobile: 1-up + room for arrows without shrinking the card */
@media (max-width: 640px){
  .reviews-track{
    padding-left: 58px;     /* tweak 50–65 */
    padding-right: 58px;    /* tweak 50–65 */
    scroll-padding-left: 58px;
    scroll-padding-right: 58px;
  }
  .reviews-track .review-card{
    flex: 0 0 100%;
    scroll-snap-align: start;
  }
}

/* ===== Reviews: edge fade overlay to de-emphasize adjacent cards ===== */
.reviews-carousel::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  z-index: 40;
  background:
    linear-gradient(to right,
      rgba(255,255,255,0.92) 0%,
      rgba(255,255,255,0.00) 40%,
      rgba(255,255,255,0.00) 60%,
      rgba(255,255,255,0.92) 100%);
}
@media (max-width: 640px){
  .reviews-carousel::before{
    background:
      linear-gradient(to right,
        rgba(255,255,255,0.95) 0%,
        rgba(255,255,255,0.00) 20%,
        rgba(255,255,255,0.00) 80%,
        rgba(255,255,255,0.95) 100%);
  }
}

.review-card{
  background:#ffffff;
  border-radius:16px;
  padding:14px 14px 12px;
  border:1px solid var(--border);
  box-shadow:0 8px 20px rgba(9,30,66,0.05);
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height: 170px;
}
.review-top{
  display:flex;
  align-items:center;
  gap:10px;
}
.review-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(34,56,82,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:var(--navy);
  font-size:14px;
  flex-shrink:0;
}
.review-name{
  font-size:13px;
  font-weight:700;
  color:var(--navy);
  line-height:1.2;
}
.review-stars{
  color:#fbbc04;
  font-size:12px;
  line-height:1;
  margin-top:2px;
  letter-spacing:1px;
}
.review-text{
  font-size:13px;
  color:var(--muted);
  line-height:1.45;
}
.review-footer{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  color:var(--muted);
  opacity:.75;
}

.reviews-nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(230,238,242,0.95);
  background: rgba(255,255,255,0.95);
  box-shadow: 0 12px 28px rgba(9,30,66,0.10);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--navy);
  cursor:pointer;
  z-index: 50;
  transition: transform .14s ease, filter .14s ease, opacity .14s ease;
  pointer-events: auto;
  user-select: none;
}

.reviews-nav:not(:disabled):hover{
  filter: brightness(1.02);
  transform: translateY(-50%) scale(1.02);
}

.reviews-nav:disabled{
  opacity: 1;
  color: #b7c3cc;
  background: rgba(255,255,255,0.80);
  border-color: rgba(230,238,242,0.75);
  box-shadow: none;
  cursor: not-allowed;
  transform: translateY(-50%);
}

/* ✅ bring arrows closer together (increase --reviews-arrow-inset) */
.reviews-nav.prev{ left: var(--reviews-arrow-inset); }
.reviews-nav.next{ right: var(--reviews-arrow-inset); }

@media (max-width: 640px){
  .reviews-nav.prev{ left: 6px; }
  .reviews-nav.next{ right: 6px; }
}

.reviews-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  text-decoration:none;
  color:var(--brand-700);
  font-weight:600;
  white-space:nowrap;
}
.reviews-cta:hover{
  color:var(--brand-500);
  text-decoration:none;
}

/* FAQ */
.faq-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:18px;
  margin-top:28px;
}
@media (max-width: 900px){
  .faq-grid{ grid-template-columns: 1fr; }
}
.faq-item{
  border-radius:16px;
  border:1px solid var(--border);
  padding:14px 16px 12px;
  background:#ffffff;
}
.faq-item h3{ font-size:14px; margin-bottom:4px; }
.faq-item p{ font-size:13px; color:var(--muted); margin:0; }

/* CONTACT */
.contact{
  background:linear-gradient(135deg, #0fb8ad 0%, #0a7f78 35%, #223852 100%);
  color:#ffffff;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.contact-bullets li{
  font-size:20px;
  font-weight: bold;
  margin: 24px;
  max-width: 480px;
}
@media (max-width: 576px){
  .contact-bullets li{
    font-size: 16px;
    margin: 14px 0;
    max-width: none;
  }
}

.contact-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap:40px;
  align-items:flex-start;
}
@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; gap: 22px; }
}

.contact h2{ color:#ffffff; }
.contact-subtext{
  font-size:15px;
  opacity:0.9;
  max-width:500px;
  margin-bottom:18px;
}
.contact-pill{
  font-size:18px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.35);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
@media (max-width: 576px){
  .contact-pill{ font-size: 14px; }
}

.contact-call{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  max-width: 520px;
}

.contact-call .call-label{
  font-size:14px;
  color: rgba(255,255,255,0.88);
  line-height:1.1;
  margin-bottom:4px;
}
.contact-call .call-methods{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.contact-call .call-method{
  display:flex;
  align-items:center;
  gap:8px;
  min-width: 0;
}
.contact-call .call-number{
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;
  font-weight:800;
  color:#ffffff;
  text-decoration:none;
  white-space:nowrap;
}

@media (max-width: 576px){
  .contact-call .call-methods{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .contact-call .call-number{ white-space: normal; word-break: break-word; }
}

.contact-call.contact-call--light{
  background: rgba(15,184,173,0.08);
  border: 1px solid rgba(15,184,173,0.18);
  max-width: none;
  margin: 0 0 12px 0;
}
.contact-call.contact-call--light .call-label{ color: var(--muted); }
.contact-call.contact-call--light .call-number{ color: var(--navy); }
.contact-call.contact-call--light .call-number:hover{ color: var(--brand-700); }
.contact-call.contact-call--light .method-icon{
  background: rgba(15,184,173,0.14);
  color: var(--brand-700);
}

.contact-form{
  background:#ffffff;
  border-radius:18px;
  padding:18px 18px 16px;
  box-shadow:0 18px 45px rgba(0,0,0,0.22);
}
@media (max-width: 576px){
  .contact-form{ padding: 16px 14px 14px; border-radius: 16px; }
}

.contact-form-row{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 640px){
  .contact-form-row{ grid-template-columns: 1fr; }
}

.contact-form-full{ display: block; }
.contact-form-mini{ display: none; }

@media (max-width: 900px){
  .contact-form-full{ display: none; }
  .contact-form-mini{ display: block; }

  .contact-form-mini .field{ margin-bottom: 0; }
  .contact-form-mini .field label{
    font-size: 12px;
    font-weight: 600;
    color: #3f4f58;
  }
  .contact-form-mini .field input{
    border-radius: 12px;
    border: 1px solid #d2dde2;
    padding: 12px 12px;
    font-size: 15px;
    outline: none;
    width: 100%;
  }
  .contact-form-mini .field input:focus{
    border-color: var(--brand-500);
    box-shadow: 0 0 0 2px rgba(15,184,173,0.25);
  }
  .contact-mini-row{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .contact-mini-legal{
    margin-top: 8px;
    font-size: 11px;
    color: #6c7b84;
  }
}

.field{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:10px;
}
.field label{
  font-size:12px;
  font-weight:500;
  color:#4a5a64;
}
.field label.label-optional{
  color:var(--muted);
  font-weight:400;
}
.field input,
.field select,
.field textarea{
  border-radius:10px;
  border:1px solid #d2dde2;
  padding:10px 12px;
  font-size:14px;
  outline:none;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--brand-500);
  box-shadow:0 0 0 1px rgba(15,184,173,0.3);
}
.field small{
  font-size:11px;
  color:#7a8a93;
}

.page-section.contact{
  padding-top: 150px;
  padding-bottom: 150px;
}
@media (max-width: 768px){
  .page-section.contact{
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 576px){
  .page-section.contact{
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

/* ✅ MOBILE STICKY CTA BAR */
.mobile-cta-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1400;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(230,238,242,0.9);
  box-shadow: 0 -12px 30px rgba(9,30,66,0.10);
  display: none;
}
.mobile-cta-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 4px;
}
.mobile-cta-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  padding:12px 14px;
  font-weight:700;
  text-decoration:none;
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  border: 1px solid rgba(230,238,242,0.95);
  color: var(--navy);
  background: #fff;
}
.mobile-cta-btn.primary{
  background: var(--brand-500);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 12px 26px rgba(15,184,173,0.22);
}
.mobile-cta-btn.primary:hover{ background: var(--brand-700); color:#fff; }
.mobile-cta-btn:hover{ text-decoration:none; }

@media (max-width: 768px){
  .mobile-cta-bar{ display: block; }
}

@media (max-width: 768px){
  .mobile-cta-btn{
    justify-content: center !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .mobile-cta-btn i{
    font-size: 18px;
    line-height: 1;
    margin: 0;
  }

  .mobile-cta-inner a.mobile-cta-btn.primary{
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ===== FOOTER: reduce extra bottom space under copyright ===== */
footer{
  padding-bottom: 10px !important;
}
footer p:last-child{
  margin-bottom: 0 !important;
}