/* ---- Navbar logo sizing (desktop + mobile + on scroll) ---- */
:root{
  --logo-size-desktop: 100px;   /* tweak to taste */
  --logo-size-mobile: 70px;    /* collapsed nav */
  --logo-size-shrink: 70px;    /* after scroll shrink */
}


.grecaptcha-badge {
  visibility: hidden;
}

/* Base brand image */
#mainNav .navbar-brand img,
.navbar .navbar-brand img{
  height: var(--logo-size-desktop);
  width: auto;          /* keep aspect ratio */
  max-height: none;     /* override any theme caps */
  display: block;
}

/* When the Agency theme adds .navbar-shrink on scroll */
#mainNav.navbar-shrink .navbar-brand img{
  height: var(--logo-size-shrink);
}

/* Mobile (≤ 992px) */
@media (max-width: 991.98px){
  #mainNav .navbar-brand img{ height: var(--logo-size-mobile); }
}

/* Optional: give the bar a little breathing room so the bigger logo fits nicely */
#mainNav{ padding-top: .35rem; padding-bottom: .35rem; }
#mainNav.navbar-shrink{ padding-top: .25rem; padding-bottom: .25rem; }

:root{ --accent-aqua:#09B7A6; }

.services-item{ position:relative; overflow:hidden; }
.services-item .services-link{ position:relative; display:block; }
.services-item .services-link img{ width:100%; height:auto; display:block; transition: transform .3s ease; }
.services-item .services-hover{
  position:absolute; inset:0;
  background: rgba(9,183,166,0);
  opacity:0;
  transition: opacity .25s ease, background-color .25s ease;
}
.services-item .services-link:hover .services-hover{
  background: rgba(9,183,166,.33);
  opacity:1;
}   
.services-item .services-link:hover img{ transform: scale(1.02); }
.services-hover .services-hover-content{ display:none !important; }

/* --- Section divider / separator --- */
.section-divider{
  border: 0;
  height: 3px;
  margin: 2.5rem 0;
  background: linear-gradient(to right, transparent, rgba(9,183,166,.7), transparent);
}

/* --- Equal-height service tiles per row --- */
#services .row > [class*="col-"]{ display:flex; }                 /* make columns stretch equally */
#services .services-item{ display:flex; flex-direction:column; width:100%; height:100%; }
#services .services-link{ display:block; }

#services .services-link img{
  width:100%;
  aspect-ratio: 4 / 3;  /* your 600x450s */
  object-fit: cover;    /* keeps images same visible height */
}

/* This creates the expandable whitespace between image and caption */
#services .services-caption{
  height: 100%;
  margin-top:0;      /* anchor caption to the bottom */
  padding-top:.75rem;   /* small breathing space under the image */
}

/* --- Contact form alerts: high-contrast over dark backgrounds --- */
.alert.alert-aqua,
.alert.alert-soft-danger{
  /* shared "surface" */
  background: rgba(255,255,255,0.96) !important; /* near-opaque light card */
  color: #102a43 !important;                     /* dark, legible text */
  border: 1px solid rgba(16,42,67,0.12) !important;
  border-left-width: 6px !important;             /* accent bar */
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  backdrop-filter: blur(6px) saturate(110%);
  -webkit-backdrop-filter: blur(6px) saturate(110%);
  padding: 1rem 1.25rem;
  width: min(720px, 92%);
  margin: 1rem auto;
  line-height: 1.35;
  font-size: 0.95rem;
}

/* Accents */
.alert.alert-aqua{
  --accent: #09B7A6;
  border-left-color: var(--accent) !important;
}

.alert.alert-soft-danger{
  --accent: #e55362;
  border-left-color: var(--accent) !important;
}

/* Make small text inside still readable on light surface */
.alert .text-muted { color: #5b6b7a !important; }

/* Optional: add a very subtle aqua/red wash */
.alert.alert-aqua{
  background-image: linear-gradient(180deg, rgba(9,183,166,0.06), rgba(255,255,255,0));
}
.alert.alert-soft-danger{
  background-image: linear-gradient(180deg, rgba(229,83,98,0.06), rgba(255,255,255,0));
}

/* Optional: tighter close button contrast */
.alert .btn-close {
  filter: invert(20%);
  opacity: .6;
}
.alert .btn-close:hover { opacity: 1; }

/* --- Inner pages (no hero): give content space under fixed navbar --- */
html:root { --nav-offset: 88px; }           /* JS will update this precisely */
body.no-hero { padding-top: var(--nav-offset); }

/* Make the bar look “scrolled” immediately on desktop */
@media (min-width: 992px){
  body.no-hero #mainNav { background-color: #212529; }
}

/* Nice separation on both states */
#mainNav.navbar-shrink,
body.no-hero #mainNav { box-shadow: 0 8px 24px rgba(0,0,0,.12); }

/* Compact section modifier (works everywhere) */
.page-section--compact {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
@media (min-width: 992px) {
  .page-section--compact {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

/* WhatsApp CTA */
.btn-whatsapp{
  background-color:#25D366;
  border-color:#25D366;
  color:#fff;
}
.btn-whatsapp:hover,
.btn-whatsapp:focus{
    background-color:#21924b;
  border-color:#21924b;
  filter:brightness(.95);
  color:#fff;
}

/* WhatsApp CTA is already in your CSS. Add a call button to match the brand. */
.btn-call {
  background-color: #09B7A6; /* your aqua */
  border-color: #09B7A6;
  color: #fff;
}
.btn-call:hover,
.btn-call:focus { filter: brightness(.95); color:#fff;
  background-color: #0b9386; /* your aqua */
  border-color: #0b9386; }


  /* Cookie banner (simple, brand aqua = #09B7A6) */
.cookie-banner{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1080;
  background: #0f172a; color: #f8fafc; border-top: 3px solid #09B7A6;
  box-shadow: 0 -8px 24px rgba(0,0,0,.25);
}
.cookie-banner__inner{
  max-width: 1100px; margin: 0 auto; padding: .9rem 1rem;
  display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: center;
}
.cookie-banner__text{ margin: 0; font-size: .95rem; line-height: 1.35; }
.cookie-banner__buttons{ display: flex; gap: .5rem; }
.cb-btn{
  font: inherit; padding: .5rem .75rem; border-radius: .5rem; border: 1px solid #94a3b8; background: transparent; color: #e2e8f0; cursor: pointer;
}
.cb-btn:hover{ background: rgba(148,163,184,.15); }
.cb-primary{ border-color: #09B7A6; color: #0f172a; background: #09B7A6; }
.cb-primary:hover{ filter: brightness(0.95); }
.link-aqua{ color: #09B7A6; text-decoration: underline; }
@media (max-width: 640px){
  .cookie-banner__inner{ grid-template-columns: 1fr; }
  .cookie-banner__buttons{ justify-content: flex-start; }
}

                #services .business-maintenance-promo {
                    position: relative;
                    min-height: 36vh;
                    margin-top: 3.5rem;
                    background-image: linear-gradient(90deg, rgba(6, 30, 46, 0.88) 0%, rgba(6, 30, 46, 0.62) 48%, rgba(6, 30, 46, 0.22) 100%), url("../assets/img/services/business-big.webp");
                    background-size: cover;
                    background-position: center;
                    display: flex;
                    align-items: center;
                    overflow: hidden;
                }

                #services .business-maintenance-promo__link {
                    display: flex;
                    align-items: center;
                    min-height: 36vh;
                    width: 100%;
                    color: #fff;
                    text-decoration: none;
                }

                #services .business-maintenance-promo__content {
                    max-width: 720px;
                    padding-top: 4rem;
                    padding-bottom: 4rem;
                }

                #services .business-maintenance-promo__eyebrow {
                    display: inline-block;
                    margin-bottom: 0.75rem;
                    font-size: 0.8rem;
                    font-weight: 700;
                    letter-spacing: 0.12em;
                    text-transform: uppercase;
                    color: #ffc800;
                }

                #services .business-maintenance-promo h2 {
                    margin-bottom: 1rem;
                    color: #fff;
                    font-size: clamp(2rem, 4vw, 3.4rem);
                    line-height: 1.05;
                }

                #services .business-maintenance-promo p {
                    max-width: 620px;
                    margin-bottom: 1.5rem;
                    color: rgba(255, 255, 255, 0.9);
                    font-size: 1.05rem;
                }

                #services .business-maintenance-promo .btn {
                    pointer-events: none;
                }

                @media (max-width: 767.98px) {
                    #services .business-maintenance-promo,
                    #services .business-maintenance-promo__link {
                        min-height: 42vh;
                    }

                    #services .business-maintenance-promo {
                        background-image: linear-gradient(90deg, rgba(6, 30, 46, 0.92) 0%, rgba(6, 30, 46, 0.72) 100%), url("../assets/img/services/business-big.webp");
                    }

                    #services .business-maintenance-promo__content {
                        padding-top: 3rem;
                        padding-bottom: 3rem;
                    }
                }