/*
 * Georgia Bubbles visual refresh (2026-10-07).
 *
 * Loaded last (after style.css and responsive.css), so it wins by source order
 * without !important. It replaces three things site-wide:
 *   1. Typography: Roboto (pulled from Google with a render-blocking @import) is
 *      replaced by self-hosted Inter for text and Plus Jakarta Sans for headings.
 *   2. Buttons: the image-based "double chevron" cap (dark-blue-button-style.png)
 *      is replaced by a clean pill with an inline SVG arrow.
 *   3. Small pieces added the same day: the hero actions, the "Watch our work"
 *      film dialog, and the invisible-reCAPTCHA notice.
 */

/* ---------------------------------------------------------------- fonts --- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(../fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --gb-navy: #1b1464;
  --gb-blue: #1589ff;
  --gb-ink: #14213d;
  --gb-text: #2b3445;
  --gb-head: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --gb-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

body {
  font-family: var(--gb-body);
  color: var(--gb-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Font only: colours stay as each section set them (several sections, and the
   footer, put white headings on dark backgrounds). */
h1, h2, h3, h4, h5,
.main-head {
  font-family: var(--gb-head);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

/* Two-tone section headings: the emphasised words take the brand blue instead of a
   heavier weight, which read as a font glitch ("We Work Nights and Weekends"). */
.main-head { font-weight: 700; }
.main-head strong,
.h-about h2 span,
.ocs-head h2 strong { font-weight: 800; color: var(--gb-blue); }

/* --------------------------------------------------------------- buttons --- */
.btn-theme,
.btn-theme-lb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .85rem 1.55rem;
  border: 0;
  border-radius: 999px;
  font-family: var(--gb-head);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background-color: var(--gb-navy);
  box-shadow: 0 6px 16px rgba(27, 20, 100, .18);
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.btn-theme-lb { background-color: var(--gb-blue); box-shadow: 0 6px 16px rgba(21, 137, 255, .25); }

.btn-theme:hover, .btn-theme:focus,
.btn-theme-lb:hover, .btn-theme-lb:focus {
  color: #fff;
  background-color: var(--gb-blue);
  box-shadow: 0 10px 22px rgba(21, 137, 255, .28);
  transform: translateY(-1px);
}
.btn-theme-lb:hover, .btn-theme-lb:focus { background-color: var(--gb-navy); }
.btn-theme:focus-visible, .btn-theme-lb:focus-visible, .btn-watch:focus-visible {
  outline: 3px solid #8cc4ff;
  outline-offset: 3px;
}

/* The old ::after drew a 50x54 PNG cap; replace it with an inline arrow. */
.btn-theme::after,
.btn-theme-lb::after {
  content: '';
  position: static;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  transition: transform .2s ease;
}
.btn-theme:hover::after, .btn-theme-lb:hover::after { transform: translateX(3px); }

/* Loader image inside the submit button sits inline with the text. */
.btn-theme > span { display: inline-flex; align-items: center; }

/* ------------------------------------------------------------------ hero --- */
#Homehero .carousel-caption h1 {
  font-family: var(--gb-head);
  font-weight: 800;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--gb-ink);
  margin-bottom: .6rem;
}
/* Outlined ("stroke") words in headings were hard to read, over the hero footage
   and on every internal page banner. Solid brand blue everywhere. */
.stroke-text,
#Homehero .stroke-text {
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: currentColor;
  color: var(--gb-blue);
}
#Homehero .carousel-caption p {
  font-size: 1.08rem;
  line-height: 1.55;
  color: #1f2a3c;
  max-width: 34rem;
  margin-bottom: 1.1rem;
}
#Homehero .carousel-caption .hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  margin: 0 0 1.15rem;
  padding: 0;
  list-style: none;
  font-size: .92rem;
  font-weight: 600;
  color: var(--gb-ink);
}
#Homehero .carousel-caption .hero-trust li::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 .35rem -2px 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231589ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (min-width: 992px) {
  #Homehero .carousel-caption { max-width: 560px; left: 7%; top: 9%; }
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

.btn-watch {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.2rem .7rem .7rem;
  border: 1.5px solid rgba(27, 20, 100, .18);
  border-radius: 999px;
  font-family: var(--gb-head);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gb-navy);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 16px rgba(20, 33, 61, .12);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-watch:hover { background: #fff; color: var(--gb-navy); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(20, 33, 61, .18); }
.btn-watch .play {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gb-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") 55% 50% / 16px 16px no-repeat;
}
.btn-watch .len { font-weight: 600; color: #6b7690; letter-spacing: 0; }

/* Phones: the hero is a 280px poster with the caption under it. Keep the copy short
   and the buttons full width so they are easy to tap. */
@media (max-width: 767.98px) {
  #Homehero .carousel-caption p { font-size: 1rem; }
  #Homehero .carousel-caption .hero-trust { font-size: .88rem; }
  .hero-actions { gap: .6rem; }
}

/* -------------------------------------------------------- film dialog --- */
.film-dialog {
  width: min(1120px, 94vw);
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #000;
  overflow: visible;
}
.film-dialog::backdrop { background: rgba(6, 12, 32, .86); }
.film-dialog .film-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 14px; background: #000; }
.film-dialog .film-close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  font-size: 28px;
  line-height: 40px;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  cursor: pointer;
}
.film-dialog .film-close:hover { background: rgba(255, 255, 255, .26); }

/* ----------------------------------------------------- reCAPTCHA v3 note --- */
/* Google allows hiding the floating badge when this notice is shown on the form. */
.grecaptcha-badge { visibility: hidden; }
.recaptcha-note { margin: .25rem 0 0; font-size: .78rem; line-height: 1.45; color: #6b7690; }
.recaptcha-note a { color: inherit; }

/* Phones and tablets (up to 991px): the caption no longer fits over the footage
   (the old layout clipped the second button, and on tablets the bottom wave covered
   it). Stack instead: image on top, copy and buttons below on a plain background,
   which is also easier to read than text over moving video. */
@media (max-width: 991.98px) {
  #Homehero::before { display: none; }
  #Homehero .hero-slider-mobile-bottom-wave { display: none; }
  #Homehero .hero-video { height: auto; aspect-ratio: 16 / 9; max-height: 420px; object-fit: cover; }
  #Homehero .carousel-caption {
    position: static;
    width: auto;
    max-width: none;
    padding: 20px 16px 26px;
    background: #fff;
  }
  #Homehero .carousel-caption p { display: block; width: auto; font-size: 1rem; margin-bottom: .8rem; }
}
@media (max-width: 575.98px) {
  .hero-actions .btn-theme, .hero-actions .btn-watch { width: 100%; justify-content: center; }
}

/* style.css lays a 30% white film over the whole hero (.carousel-item::before) to
   lighten the old video. The new footage carries its own soft fade behind the
   headline, so the film only made the video and the text look washed out. */
#Homehero .carousel-item::before { display: none; }

/* ---------------------------------------------------------------- footer --- */
/* Rebuilt 2026-10-07 (includes/footer.blade.php). The newsletter block is gone, so
   the footer starts with the link columns; brand column on the left. */
footer { background-color: #000; padding: 40px 0 28px; }
.gb-footer { margin-top: 0; border-top: 0; padding-top: 0; row-gap: 32px; }
.gb-footer .footer-logo { filter: brightness(0) invert(1); width: 120px; height: auto; margin: 0 0 16px; display: block; }
.gb-footer-brand p { color: #b8c1d6; font-size: .95rem; line-height: 1.6; max-width: 22rem; margin-bottom: 18px; }
.gb-footer .footer-menu-head {
  font-family: var(--gb-head);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin: 6px 0 16px;
}
.gb-footer ul { list-style: none; margin: 0; padding: 0; }
.gb-footer ul li { margin: 0 0 10px; padding: 0; line-height: 1.45; }
.gb-footer ul li a { color: #d6dcea; text-decoration: none; font-size: .95rem; transition: color .15s ease; }
.gb-footer ul li a:hover { color: #fff; text-decoration: underline; }

/* Contact list: icon in a fixed-width column, text aligned to its first line. */
.gb-footer .gb-contact li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; color: #d6dcea; font-size: .95rem; }
.gb-footer .gb-contact li i { flex: 0 0 20px; width: 20px; font-size: 1.05rem; line-height: 1.45; color: #5aa9ff; text-align: center; }
.gb-footer .gb-contact li a, .gb-footer .gb-contact li span { line-height: 1.45; }

footer .footer-copyright-sec { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); }
footer .footer-copyright-sec p { margin: 0; color: #8f9ab3; font-size: .85rem; }
footer .footer-copyright-sec a { color: #b8c1d6; text-decoration: none; }
footer .footer-copyright-sec a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 767.98px) {
  footer { padding: 40px 0 24px; }
  footer .footer-copyright-sec p { text-align: left; }
}

/* Neutralise older footer rules in style.css: 44px link line-height, a 50x2px bar
   drawn on every footer <span>, and 12px top padding on contact links. */
.gb-footer ul li a { display: inline; line-height: 1.45; padding: 0; margin: 0; }
.gb-footer .gb-contact li a,
.gb-footer .gb-contact li span { display: block; width: auto; height: auto; padding: 0; margin: 0; background: none; border: 0; line-height: 1.45; font-size: .95rem; }
.gb-footer .gb-contact li i::before { line-height: 1.45; vertical-align: top; }
.gb-footer .gb-contact li i { height: auto; padding: 0; margin: 0; position: static; }
/* responsive.css forces min-height/line-height 44px on footer links for tap size;
   in this layout that splits icon and text. Keep the tap area with padding instead. */
.gb-footer ul li a,
.gb-footer .gb-contact li a { min-height: 0; line-height: 1.45; }
@media (max-width: 991.98px) {
  .gb-footer ul li { margin-bottom: 4px; }
  .gb-footer ul li a { display: inline-block; padding: 8px 0; }
  .gb-footer .gb-contact li a { padding: 0; }
  .gb-footer .gb-contact li { margin-bottom: 16px; }
}

/* ------------------------------------------------- legal pages (/pages) --- */
.legal-copy { max-width: 46rem; margin: 0 auto 40px; text-align: left; color: var(--gb-text); font-size: 1rem; line-height: 1.7; }
.legal-copy h2 { font-size: 1.3rem; font-weight: 700; color: var(--gb-ink); margin: 2rem 0 .6rem; text-align: left; }
.legal-copy p, .legal-copy li { text-align: left; }
.legal-copy ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.legal-copy li { margin-bottom: .4rem; }

/* ------------------------------------------------- homepage clean-up --- */
/* why-choose-bg.webp carried two stock cut-outs (a residential roof and a posed
   worker) behind the Nights & Weekends and Why Choose sections, overlapping text. */
.why-choose { background-image: none; padding-bottom: 40px; }
/* ocs-bottom.webp: a stock roofer on a residential roof under the services grid. */
.our-cleaning-services .ocs-bottom { display: none; }
.our-cleaning-services { padding-bottom: 70px; }
.h-about .about-ga-man-img { display: none; } /* stock residential roofer */

/* Button labels never wrap; on laptops (992-1199px) the header button and review
   badge share a tight row, so the header button gets a compact size there. */
.btn-theme, .btn-theme-lb, .btn-watch { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1199.98px) {
  .header-bottom-bar .btn-theme, header .btn-theme { padding: .7rem 1.1rem; font-size: .82rem; letter-spacing: .03em; }
}

/* ------------------------------------------------- phone & tablet fixes --- */
/* Header phone number wrapped to "(770) 800-" / "6680" on phones. */
.mobile-logo .h-call-us a { white-space: nowrap; }
@media (max-width: 400px) { .mobile-logo .h-call-us a { font-size: 1rem; } }

@media (max-width: 767.98px) {
  /* style.css centres everything on phones; long copy reads better left-aligned. */
  .h-about p,
  .after-hours p,
  .why-choose .col-xl-6 > p,
  .home-info p,
  .home-info li { text-align: left; }

  /* Footer: left-aligned columns with a proper gutter (legacy rules centred the
     links but not the icons, so icon and text drifted apart). */
  footer .container { padding-left: 16px; padding-right: 16px; }
  .gb-footer, .gb-footer h3, .gb-footer ul, .gb-footer ul li { text-align: left; }
  .gb-footer .footer-logo { margin-left: 0; }
  .gb-footer .gb-contact li { justify-content: flex-start; }
  .gb-footer .gb-contact li a, .gb-footer .gb-contact li span { text-align: left; }
}

/* Hero on phones and tablets, take 2 (2026-10-07): the owner wants the title ON the
   footage, not pushed below it. Full-bleed media with a dark gradient rising from the
   bottom; white copy and buttons sit on the gradient. Overrides the stacked layout
   above (same breakpoint, later in the file). */
@media (max-width: 991.98px) {
  #Homehero .carousel-item { position: relative; min-height: 600px; overflow: hidden; background: #0b1530; }
  #Homehero .hero-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    max-height: none; aspect-ratio: auto;
    object-fit: cover; object-position: 72% 50%;
  }
  #Homehero .carousel-item::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgba(8, 14, 36, .92) 0%, rgba(8, 14, 36, .72) 45%, rgba(8, 14, 36, .18) 78%, rgba(8, 14, 36, 0) 100%);
  }
  #Homehero .carousel-caption {
    position: absolute; left: 0; right: 0; bottom: 0; top: auto; z-index: 2;
    width: auto; max-width: none; padding: 28px 24px 30px; background: none; text-align: left;
  }
  #Homehero .carousel-caption h1 { color: #fff; font-size: clamp(2rem, 1.3rem + 3vw, 2.9rem); text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }
  #Homehero .stroke-text { color: #6fb8ff; }
  #Homehero .carousel-caption p { color: rgba(255, 255, 255, .92); max-width: 36rem; }
  #Homehero .carousel-caption .hero-trust { color: #fff; }
  #Homehero .carousel-caption .hero-trust li::before { filter: brightness(1.6); }
  #Homehero .hero-actions .btn-theme { background-color: var(--gb-blue); box-shadow: 0 8px 20px rgba(21, 137, 255, .35); }
  #Homehero .hero-actions .btn-theme:hover { background-color: #0f74dc; }
  #Homehero .btn-watch { background: rgba(255, 255, 255, .95); }
}
@media (max-width: 575.98px) {
  #Homehero .carousel-item { min-height: 620px; }
  #Homehero .carousel-caption { padding: 24px 16px 26px; }
  #Homehero .carousel-caption p { font-size: .98rem; margin-bottom: .7rem; }
  #Homehero .carousel-caption .hero-trust { margin-bottom: .9rem; }
}

/* Trust icons: a real grid, 2x2 by default and 4 across on wide screens. The old
   Bootstrap .col flex wrap went 3 + 1 and the orphan overlapped the labels. */
.why-choose-icons-sec > div > .row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px;
  margin: 8px 0 18px; align-items: start;
}
.why-choose-icons-sec > div > .row > .col { width: auto; max-width: none; padding: 0; flex: none; }
.why-choose-icons-sec p { margin: 0; font-size: .95rem; line-height: 1.3; }
@media (min-width: 1200px) {
  .why-choose-icons-sec > div > .row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .why-choose-icons-sec > div { width: 100%; }
}

/* Desktop header between 992 and 1199px: the full menu wrapped to two lines and
   the round logo covered "About Us" / "Our Customers". Compact everything so the
   two link groups fit beside a smaller logo. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .main-logo { width: 132px; }
  .navbar-dark .navbar-nav .nav-link { font-size: .78rem; padding: .7rem .62rem; letter-spacing: .01em; white-space: nowrap; }
  .navbar .navbar-collapse { gap: 150px; }
  .h-call-us h3, .h-call-us a { font-size: 1.6rem; white-space: nowrap; }
  .hbb-right p { margin-left: 70px; font-size: .85rem; line-height: 1.3; }
  .hbb-right p strong { font-size: .85rem; }
  .header-top-bar, .header-top-bar a { font-size: .8rem; }
}

/* ------------------------------------------------ Who We Work With --- */
/* Brand-blue "We" disappeared on the blue sky; the section opened with ~170px of
   empty sky; three-line labels spilled out of the 140px circles. */
.who-do-we-work { padding: 70px 0 80px; }
.who-do-we-work .main-head,
.who-do-we-work .main-head strong { color: #fff; }
.who-do-we-work .main-head strong { text-decoration: underline; text-decoration-color: rgba(255,255,255,.55); text-underline-offset: .18em; text-decoration-thickness: 3px; }
.who-do-we-work-tab .nav-item button { padding: 10px; gap: 6px; }
.who-do-we-work-tab .nav-item button img { height: 40px; }
.who-do-we-work-tab .nav-item button p { font-size: .74rem; line-height: 1.2; margin: 0; }
.who-do-we-tabs-txt h3 { color: #fff; }
.who-do-we-work .tab-content img.img-fluid { border-radius: 14px; box-shadow: 0 10px 28px rgba(8,20,60,.25); }

/* Phone header: the number, the centred logo and the menu button share 375px.
   Keep the number on one line by dropping the icon and "Call us today" label on
   small phones; the number itself stays the tap-to-call link. */
@media (max-width: 575.98px) {
  .mobile-logo .h-call-us .flex-shrink-0 { display: none; }
  .mobile-logo .h-call-us .ms-3 { margin-left: 0 !important; }
  .mobile-logo .h-call-us p { display: none; }
  .mobile-logo .h-call-us h3 { font-size: .98rem; white-space: nowrap; }
  .mobile-logo .logo-m { width: 96px; top: 8px; }
}

/* ---------------------------------------------------------------------------
   Inline SVG icons (App\Support\Icon) and the components built on them
   (2026-10-07). Icons inherit `color`; size them with width/height.
   --------------------------------------------------------------------------- */
.gb-icon { display: block; width: 24px; height: 24px; stroke-width: 1.75; flex: none; }

/* Services page: who-we-serve chips */
.gb-segments { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.gb-segment { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 18px; background: #fff; border: 1px solid #e3ebf5; border-radius: 16px; box-shadow: 0 4px 14px rgba(16, 40, 90, .06); color: var(--gb-navy) !important; text-decoration: none !important; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 700; font-size: 1rem; line-height: 1.25; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.gb-segment:hover, .gb-segment:focus-visible { border-color: var(--gb-blue); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16, 40, 90, .1); }
.gb-segment-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 48px; height: 48px; border-radius: 14px; background: #eaf3ff; color: var(--gb-blue); }
.gb-segment-icon .gb-icon { width: 26px; height: 26px; }

/* Services page: service cards */
.gb-service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; margin-top: 30px; }
.gb-service-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #e3ebf5; border-radius: 18px; overflow: hidden; color: inherit !important; text-decoration: none !important; box-shadow: 0 6px 18px rgba(16, 40, 90, .06); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.gb-service-card:hover, .gb-service-card:focus-visible { transform: translateY(-3px); border-color: #bcd8ff; box-shadow: 0 16px 32px rgba(16, 40, 90, .12); }
.gb-service-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #eef3f9; }
.gb-service-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gb-service-card:hover .gb-service-media img { transform: scale(1.04); }
.gb-service-icon { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin: -27px 0 0 20px; border: 3px solid #fff; border-radius: 16px; background: var(--gb-blue); color: #fff; box-shadow: 0 8px 18px rgba(21, 137, 255, .3); }
.gb-service-icon .gb-icon { width: 26px; height: 26px; }
.gb-service-body { display: flex; flex: 1; flex-direction: column; padding: 12px 20px 20px; text-align: left; }
.gb-service-body h3 { margin: 0 0 8px; color: var(--gb-navy); font-size: 1.12rem; line-height: 1.3; }
.gb-service-body p { display: -webkit-box; margin: 0 0 16px; overflow: hidden; color: #4a5568; font-size: .94rem; line-height: 1.55; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.gb-service-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--gb-blue); font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.gb-service-more::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s ease; }
.gb-service-card:hover .gb-service-more::after { transform: translateX(3px); }

/* Service detail page */
.service-detail-right .service-copy p { margin-bottom: 1rem; }
.gb-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 10px 0 34px; }
.gb-benefit { display: flex; gap: 16px; padding: 20px; background: #fff; border: 1px solid #e3ebf5; border-radius: 16px; box-shadow: 0 4px 14px rgba(16, 40, 90, .05); }
.gb-benefit-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 52px; height: 52px; border-radius: 14px; background: #eaf3ff; color: var(--gb-blue); }
.gb-benefit-icon .gb-icon { width: 26px; height: 26px; }
.gb-benefit h3 { margin: 2px 0 6px; color: var(--gb-navy); font-size: 1.1rem; }
.gb-benefit p { margin: 0; color: #4a5568; font-size: .95rem; line-height: 1.6; }
.gb-service-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 28px; border-radius: 18px; background: var(--gb-navy); color: #fff; }
.gb-service-cta h2 { margin: 0 0 6px; color: #fff; font-size: 1.3rem; }
.gb-service-cta p { margin: 0; color: rgba(255, 255, 255, .82); }
.gb-service-cta .btn-theme { flex: none; background: var(--gb-blue) !important; border-color: var(--gb-blue) !important; }
@media (max-width: 767.98px) {
  .gb-benefits { grid-template-columns: 1fr; }
  .gb-service-cta { flex-direction: column; align-items: flex-start; }
}

/* Contact page cards */
.gb-contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
.gb-contact-card { display: flex; align-items: center; gap: 16px; padding: 22px; background: #fff; border: 1px solid #e3ebf5; border-radius: 16px; box-shadow: 0 4px 14px rgba(16, 40, 90, .06); color: #2d3748 !important; text-decoration: none !important; line-height: 1.45; transition: border-color .2s ease, transform .2s ease; }
.gb-contact-card:hover, .gb-contact-card:focus-visible { border-color: var(--gb-blue); transform: translateY(-2px); }
.gb-contact-card strong { display: block; margin-bottom: 2px; color: var(--gb-navy); font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1.05rem; }
.gb-contact-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 52px; height: 52px; border-radius: 50%; background: #eaf3ff; color: var(--gb-blue); }
.gb-contact-icon .gb-icon { width: 24px; height: 24px; }
@media (max-width: 991.98px) { .gb-contact-cards { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } }

/* Who We Work With (2026-10-07): pill tabs with SVG icons, a seventh segment,
   and a slim SVG wave in place of the tall PNG. */
.who-do-we-work { position: relative; padding-bottom: calc(clamp(56px, 7.5vw, 112px) + 28px); }
.who-do-we-work .nav-tabs.who-do-we-work-tab { position: static; left: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 26px 0 34px; border: 0; }
.who-do-we-work .who-do-we-work-tab .nav-item { width: auto; float: none; margin: 0; }
.who-do-we-work .who-do-we-work-tab .nav-item button { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; width: auto; height: auto; min-height: 54px; margin: 0; padding: 8px 18px 8px 9px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 999px; background: #fff; color: var(--gb-navy); box-shadow: 0 6px 16px rgba(8, 20, 60, .16); transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.who-do-we-work .who-do-we-work-tab .nav-item button p { margin: 0; color: inherit; font-size: .9rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.who-do-we-work .who-tab-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; height: 36px; border-radius: 50%; background: #eaf3ff; color: var(--gb-blue); transition: background .2s ease, color .2s ease; }
.who-do-we-work .who-tab-icon .gb-icon { width: 20px; height: 20px; }
.who-do-we-work .who-do-we-work-tab .nav-item button:hover,
.who-do-we-work .who-do-we-work-tab .nav-item button.active { background: var(--gb-navy); color: #fff; border-color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(8, 20, 60, .28); }
.who-do-we-work .who-do-we-work-tab .nav-item button:hover .who-tab-icon,
.who-do-we-work .who-do-we-work-tab .nav-item button.active .who-tab-icon { background: rgba(255, 255, 255, .14); color: #fff; }
.who-do-we-work .tab-content .who-do-we-tabs-txt { align-self: center; }
.who-d-we-bottom-img { display: none !important; }
.who-wave { position: absolute; left: 0; bottom: -1px; display: block; width: 100%; height: clamp(56px, 7.5vw, 112px); }
.who-wave-fill { fill: #f4f8fc; }
.who-wave-line { fill: var(--gb-blue); }
.who-bubbles { position: absolute; right: 4%; bottom: calc(clamp(56px, 7.5vw, 112px) * .1); width: clamp(70px, 9vw, 150px); height: auto; fill: var(--gb-blue); }
#quote-factors { padding-top: 34px; }
@media (max-width: 767.98px) {
  .who-do-we-work .nav-tabs.who-do-we-work-tab { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 20px -12px 26px; padding: 4px 12px 12px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .who-do-we-work .nav-tabs.who-do-we-work-tab::-webkit-scrollbar { display: none; }
  .who-do-we-work .who-do-we-work-tab .nav-item { flex: none; scroll-snap-align: start; }
  .who-bubbles { display: none; }
}

/* Before & after gallery (includes/before-after-gallery), shared by home, about
   and our-works. */
.ba-gallery { margin-top: 30px; row-gap: 26px; }
.ba-card { margin: 0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 8px 24px rgba(20, 33, 61, .10); }
.ba-card img { display: block; width: 100%; height: auto; }
.ba-card figcaption { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 14px; text-align: left; }
.ba-card figcaption strong { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1rem; color: #14213d; }
.ba-card figcaption span { font-size: .88rem; color: #5b667d; }

/* About page (2026-10-07) */
.about-page-us .about-crew-photo { display: block; width: min(100%, 520px); height: auto; margin: 0 auto; }
.agb-certificate-m { row-gap: 18px; }
.gb-trust-card { height: 100%; border: 1px solid #e3ebf5 !important; border-radius: 16px !important; box-shadow: 0 4px 14px rgba(16, 40, 90, .06); }
.gb-trust-card .card-body { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 22px; text-align: center; }
.gb-trust-icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: 4px; border-radius: 50%; background: #eaf3ff; color: var(--gb-blue); }
.gb-trust-icon .gb-icon { width: 30px; height: 30px; }
.gb-trust-card h3 { margin: 0 !important; color: var(--gb-navy) !important; font-size: 1.15rem !important; }
.gb-trust-card p { margin: 0 !important; color: #4a5568 !important; font-size: .92rem !important; line-height: 1.5; text-transform: none !important; letter-spacing: 0 !important; }
.gb-seal-white { filter: brightness(0) invert(1); opacity: .95; }
.gb-areas-photo { border-radius: 18px; box-shadow: 0 12px 30px rgba(16, 40, 90, .15); }
/* responsive.css gives every tel: link inline-block + tap padding under 992px;
   the call card is already a large target, so keep it a flex card. */
a.gb-contact-card { display: flex; min-height: 0; padding: 22px; }
@media (max-width: 575.98px) {
  .gb-segments { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gb-segment { min-height: 64px; gap: 10px; padding: 10px 12px; font-size: .86rem; }
  .gb-segment-icon { flex-basis: 38px; height: 38px; border-radius: 11px; }
  .gb-segment-icon .gb-icon { width: 21px; height: 21px; }
}

/* Homepage quotes from property managers (2026-10-07) */
.gb-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 26px; }
.gb-quote { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; margin: 0; padding: 24px; background: #fff; border: 1px solid #e3ebf5; border-radius: 18px; box-shadow: 0 6px 18px rgba(16, 40, 90, .07); }
.gb-quote blockquote { margin: 0; color: #1f2a44; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1.08rem; font-weight: 600; line-height: 1.5; }
.gb-quote figcaption { display: flex; align-items: center; gap: 12px; color: #5b667d; font-size: .88rem; line-height: 1.35; }
.gb-quote figcaption strong { display: block; color: var(--gb-navy); font-size: .95rem; }
.gb-quote-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; height: 42px; border-radius: 50%; background: #eaf3ff; color: var(--gb-blue); }
.gb-quote-icon .gb-icon { width: 22px; height: 22px; }
.oc-photo { border-radius: 16px; box-shadow: 0 10px 26px rgba(16, 40, 90, .12); }