/* =========================================================
   Eshkol Connections — accent layer
   Loaded after main.css.

   The Medu theme keeps its original palette: red #F57D26 primary,
   navy #051A53 secondary. Nothing in main.css was recoloured.

   Lime #A1D000 from the logo appears in four small places only:
     1. the hero slider's active pagination bar
     2. the small underline beneath each footer column heading
     3. the check marks in bulleted lists
     4. the "serving now" counties on the coverage map
   Everything else here is structural, for the two components the theme
   did not ship with: the rotating hero and the coverage map.
   ========================================================= */

:root{
  --ec-lime:#A1D000;
  --ec-lime-deep:#5C7A00;   /* passes contrast on white; lime itself does not */
}

/* ---------- Hero slider (theme banner, now rotating) ---------- */
.ecBannerSlider,
.ecBannerSlider .swiper-slide{ position:relative; }
.ecBannerSlider .swiper-slide{ display:flex; align-items:center; }

/* The theme sets z-index:-2 on the banner background, which works when
   .cg-banner-area is the positioned parent. Nested inside a Swiper slide it
   creates a new stacking context and the image drops out of view, so the
   layers are restated here. */
.ecBannerSlider .cg-banner-bg-image{
  position:absolute; inset:0; z-index:0;
  /* the theme's slow 7s zoom is kept; only the stacking is corrected */
}
.ecBannerSlider .cg-banner-bg-color::before{ z-index:1; }
.ecBannerSlider .container{ position:relative; z-index:10; width:100%; }

/* Slides size to their own headline, so a two-line title made one slide taller
   than the rest and the shorter ones left an unpainted strip below. */
.ecBannerSlider .swiper-wrapper{ align-items:stretch; }
.ecBannerSlider .swiper-slide{ height:auto; }
.ecBannerSlider .cg-banner-wrapper,
.ecBannerSlider .row{ width:100%; }

.ecBannerSlider .swiper-pagination{ bottom:44px !important; z-index:5; }
.ecBannerSlider .swiper-pagination-bullet{
  width:34px; height:4px; border-radius:3px; background:#fff; opacity:.35;
  transition:width .25s ease, opacity .25s ease, background .25s ease;
}
/* accent 1 of 4 */
.ecBannerSlider .swiper-pagination-bullet-active{
  opacity:1; width:56px; background:var(--cg-theme-primary);
}
@media (max-width:767px){
  .ecBannerSlider .cg-banner-bg-image{ background-position:left center !important; }
}

/* ---------- Logo sizing ----------
   The theme shipped a wide horizontal SVG. The Eshkol mark is a circular badge,
   so it needs a cap on both axes or it stretches. */
.cg-header-top-logo img,
.cg-header-logo img,
.cg-offcanvas-logo img{ height:72px; width:auto; max-width:none; object-fit:contain; }
.cg-footer-logo img{ height:104px; width:auto; max-width:none; object-fit:contain; }
@media (max-width:767px){
  .cg-header-top-logo img,
  .cg-header-logo img{ height:52px; width:52px; }
  .cg-offcanvas-logo img{ height:64px; width:64px; }
}

/* ---------- Footer column headings ---------- */
.cg-footer-widget-title{ position:relative; padding-bottom:14px; }
/* accent 2 of 4 */
.cg-footer-widget-title::after{
  content:""; position:absolute; left:0; bottom:0;
  width:32px; height:3px; background:var(--ec-lime); border-radius:2px;
}
.footer-col-4 .cg-footer-widget-content li{
  margin-bottom:11px; display:flex; align-items:center; gap:9px;
}
.footer-col-4 .cg-footer-widget-content li::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--ec-lime); flex:0 0 auto;
}
.ec-footer-note{ margin-top:14px; opacity:.75; font-size:15px; }

/* ---------- Coverage map ---------- */
.ec-map-figure{
  position:relative; background:#fff; border-radius:14px; padding:24px;
  box-shadow:0 14px 40px rgba(5,26,83,.08);
}
.ec-map svg{ width:100%; height:auto; display:block; }
.ec-map path{ transition:fill .18s ease; outline:none; }
/* accent 3 of 4 — the counties actually being served */
.ec-map path.is-active{ fill:var(--ec-lime); }
.ec-map path.is-soon{ fill:#DCE6C6; }
.ec-map path.is-none{ fill:#EDEEF1; stroke:#DFE1E7; }
.ec-map path.is-active:hover,.ec-map path.is-active:focus{ fill:#8AB300; }
.ec-map path.is-soon:hover,.ec-map path.is-soon:focus{ fill:#C8D8A8; }
.ec-map path.is-none:hover,.ec-map path.is-none:focus{ fill:#E2E4E9; }
.ec-map-tip{
  position:absolute; pointer-events:none; background:#051A53; color:#fff;
  padding:8px 14px; border-radius:8px; font-size:14px; font-weight:600;
  white-space:nowrap; transform:translate(-50%,-140%); opacity:0;
  transition:opacity .15s ease; z-index:6;
}
.ec-map-tip.is-on{ opacity:1; }
.ec-map-tip small{ display:block; font-weight:400; opacity:.75; font-size:12px; }
.ec-legend{
  display:flex; gap:22px; flex-wrap:wrap; margin-top:20px;
  padding-top:18px; border-top:1px solid #E7E9EE;
}
.ec-legend span{ display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:600; }
.ec-swatch{ width:16px; height:16px; border-radius:4px; display:inline-block; }
.ec-sw-active{ background:var(--ec-lime); }
.ec-sw-soon{ background:#DCE6C6; }
.ec-sw-none{ background:#EDEEF1; border:1px solid #DFE1E7; }
.ec-county-list{ list-style:none; padding:0; margin:0 0 24px; }
.ec-county-list li{ display:flex; align-items:center; gap:11px; margin-bottom:13px; font-weight:600; }
.ec-county-list li::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--ec-lime); flex:0 0 auto;
}
.ec-map-note{ border-left:3px solid var(--ec-lime); padding-left:18px; margin-bottom:28px; }

/* ---------- Blocks added to the theme ---------- */
.ec-check-list{ list-style:none; padding:0; margin:26px 0 0; }
.ec-check-list li{ display:flex; gap:12px; margin-bottom:14px; align-items:flex-start; }
/* accent 4 of 4 */
.ec-check-list i{ color:var(--ec-lime-deep); margin-top:6px; }
.ec-sub-head{ font-size:21px; margin:0 0 16px; }
.ec-sub-head + .ec-check-list{ margin-top:0; margin-bottom:32px; }
.ec-media img{ width:100%; border-radius:14px; display:block; }

.ec-step{ background:#fff; border:1px solid #E6E8ED; border-radius:14px; padding:32px 28px; height:100%; }
.ec-step h4{ font-size:19px; margin:0 0 10px; }
.ec-step p{ margin:0; font-size:16px; }

.ec-download{
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  flex-wrap:wrap; background:#051A53; border-radius:16px; padding:42px; margin:70px 0;
}
.ec-download h3{ color:#fff; margin:0 0 10px; font-size:25px; }
.ec-download p{ color:#C3CBDD; margin:0; max-width:560px; }
.ec-download a[href^="mailto"]{ color:var(--ec-lime); }

.ec-cta-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.ec-cta-phone{
  color:#fff; font-weight:700; font-size:19px;
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
}
.ec-cta-phone:hover{ color:var(--ec-lime); }

.ec-form{ margin-top:34px; }
.ec-file{ margin:24px 0; }
.ec-file label{ display:block; font-weight:700; margin-bottom:9px; }
.ec-hint{ font-size:14px; margin-top:7px; opacity:.75; }
.ec-form-note{ font-size:14.5px; margin-top:20px; opacity:.8; }
.ec-alert{ padding:16px 20px; border-radius:9px; margin-bottom:22px; font-weight:600; display:none; }
.ec-alert.ok{ background:#EDF7DC; color:#3D5300; border:1px solid var(--ec-lime); display:block; }
.ec-alert.err{ background:#FDECEC; color:#8C1D1D; border:1px solid #F57D26; display:block; }

.cg-contact-input select,
.floating-form-input select{
  width:100%; padding:18px 22px; border:0; border-radius:8px;
  background:#F4F5F7; font-family:inherit; font-size:16px; color:#1C2936;
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231C2936' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 22px center;
}

.ec-prose h3{ font-size:23px; margin:38px 0 14px; }
.ec-prose ul{ padding-left:22px; margin-bottom:20px; }
.ec-prose li{ margin-bottom:10px; }
.ec-note{
  background:#F4F6FA; border-left:4px solid var(--ec-lime);
  padding:20px 24px; border-radius:0 10px 10px 0; margin-top:32px;
}
.ec-note p{ margin:0; }

/* ---------- Cookie notice ---------- */
.ec-cookie{
  position:fixed; left:24px; bottom:24px; width:min(420px,calc(100vw - 48px));
  background:#fff; border-radius:14px; padding:26px; z-index:2000;
  box-shadow:0 22px 60px rgba(5,26,83,.22); display:none;
}
.ec-cookie.is-on{ display:block; }
.ec-cookie h5{ margin:0 0 10px; font-size:19px; }
.ec-cookie p{ font-size:14.5px; line-height:1.6; margin:0 0 20px; }
.ec-cookie-btns{ display:flex; gap:10px; flex-wrap:wrap; }
.ec-cookie-btns button{
  flex:1 1 auto; padding:12px 18px; border-radius:8px; font-weight:700;
  font-size:14.5px; border:2px solid #F57D26; background:#fff; color:#F57D26; cursor:pointer;
}
.ec-cookie-btns button.primary{ background:#F57D26; color:#fff; }
.ec-cookie-btns button:hover{ background:#F57D26; color:#fff; }

/* ---------- Baseline quality ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid #F57D26; outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
@media (max-width:575px){
  .ec-download{ padding:28px 24px; }
  .ec-cta-actions{ flex-direction:column; align-items:flex-start; }
  .ec-cookie{
    left:0; right:0; bottom:0; width:100%; border-radius:16px 16px 0 0;
    padding:22px 20px calc(22px + env(safe-area-inset-bottom));
  }
  .ec-cookie h5{ font-size:17px; }
  .ec-cookie p{ font-size:14px; }
  .ec-cookie-btns button{ flex:1 1 100%; padding:13px 16px; font-size:14px; }
  .cg-service-box{ padding-left:22px; padding-right:22px; }
  .cg-service-box-title{ font-size:20px; }
}

/* The Service Area column reuses the theme's gallery slot, whose list items
   were styled for thumbnails and rendered near-invisible as text. */
.footer-col-4 .cg-footer-widget-content li{ color:#C3CBDD; font-size:16px; }
.footer-col-4 .cg-footer-widget-content .ec-footer-note{ color:#C3CBDD; }

/* CTA sits on the theme's red band, so its button needs to read against red. */
.cg-cta-bg-wrapper .cg-primary-btn{ background:#fff; color:#F57D26; border-color:#fff; }
.cg-cta-bg-wrapper .cg-primary-btn:hover{ background:#051A53; color:#fff; border-color:#051A53; }

/* service.html cards overflowed slightly at 390px */
/* The theme parks its off-canvas menu panel off-screen to the right rather than
   translating it, which adds horizontal scroll on narrow phones. */
html, body{ overflow-x:hidden; max-width:100%; }
.offcanvas-area{ max-width:100vw; }

/* =========================================================
   Header top bar
   The theme shipped .cg-header-top-2 with 40px padding top and bottom
   (80px of dead space) and set the phone number at 36px, which made it
   larger than the logo. Both are scaled down here to balance the bar.
   ========================================================= */
.cg-header-top-2{ padding-top:14px !important; padding-bottom:14px !important; }
@media (max-width:1399px){
  .cg-header-top-2{ padding-left:60px !important; padding-right:60px !important; }
}
.cg-header-top-2 .cg-header-top-logo img{ height:62px; }
.cg-header-top-2 .cg-header-top-info span{
  font-size:19px; font-weight:600; display:inline-flex; align-items:center; gap:10px;
}
.cg-header-top-2 .cg-header-top-info span i{ font-size:18px; }
.cg-header-top-left{ gap:22px; }
/* a light rule between the language control and the brand, so the three
   items in the bar read as groups rather than a row of loose elements */
.cg-header-top-left .ec-lang{ padding-right:22px; border-right:1px solid #E9EBEF; }
.cg-header-top-2 .cg-header-top-info a{ text-decoration:none; }
.cg-header-top-2 .cg-header-top-info a:hover{ color:var(--cg-theme-primary); }

/* ---------- Language switcher ---------- */
.ec-lang{ position:relative; }
.ec-lang-btn{
  display:inline-flex; align-items:center; gap:9px;
  background:transparent; border:1px solid #E3E5EA; border-radius:60px;
  padding:9px 16px; font-size:15px; font-weight:600; color:#1C2936;
  font-family:var(--cg-ff-heading); cursor:pointer; line-height:1;
  transition:border-color .2s ease, color .2s ease;
}
.ec-lang-btn:hover{ border-color:var(--cg-theme-primary); color:var(--cg-theme-primary); }
.ec-lang-btn .fa-globe{ font-size:16px; color:var(--cg-theme-primary); }
.ec-lang-caret{ font-size:11px; opacity:.6; }
.ec-lang-menu{
  min-width:180px; padding:8px 0; border:1px solid #E3E5EA; border-radius:12px;
  box-shadow:0 16px 40px rgba(28,41,54,.12);
}
.ec-lang-menu .ec-lang-item{
  display:block; padding:10px 20px; font-size:15.5px; font-weight:500; color:#1C2936;
}
.ec-lang-menu .ec-lang-item:hover{ background:#F6F7F9; color:var(--cg-theme-primary); }
.ec-lang-menu [lang="ar"]{ direction:rtl; text-align:right; }

/* Google's translate element ships a toolbar that shifts the whole page down. */
#google_translate_element{ display:none; }
.skiptranslate iframe{ display:none !important; }
body{ top:0 !important; }

@media (max-width:1199px){
  .ec-lang-btn span{ display:none; }
  .ec-lang-btn{ padding:9px 12px; }
}
.cg-features-image::before{
  mix-blend-mode: multiply;
  opacity: .18;
}

/* Turns off the theme's brand-colour duotone wherever it appears. */
.cg-features-image::before,
.cg-about-thumb-3::before,
.cg-about-thumb::before,
.cg-about-thumb-2::before,
.cg-service-details-thumb::before,
.cg-housing-item-thumb::before{ display: none; }

/* =========================================================
   Inner-page top bar layout
   main.css only makes .cg-header-top-left a flex row on the homepage
   variant (.cg-header-top-2 .cg-header-top-left). On the inner pages
   the language button therefore stacked above the phone and email
   instead of sitting beside them.
   ========================================================= */
.cg-header-top .cg-header-top-left{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 26px;
}
.cg-header-top .cg-header-top-info ul{ margin-bottom: 0; }
.cg-header-top .cg-header-top-info li span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cg-header-top .cg-header-top-info i{ color: var(--cg-theme-primary); }

/* the divider only reads correctly once the row is horizontal */
.cg-header-top .ec-lang{
  padding-right: 26px;
  border-right: 1px solid rgba(255,255,255,.18);
  line-height: 1;
}
.cg-header-top .ec-lang-btn{ padding: 8px 15px; font-size: 14.5px; }

/* ---------- Footer credit ---------- */
.cg-footer-copyright-text p{ white-space: nowrap; margin: 0; }
.ec-onfoot{ font-weight: 700; }
.ec-onfoot-on{ color: #E8001A; }
.ec-onfoot-foot{ color: #FFFFFF; }
.ec-onfoot:hover .ec-onfoot-foot{ color: #E8001A; }
@media (max-width: 575px){
  .cg-footer-copyright-text p{ white-space: normal; }
}
/* =========================================================
   Hero headline
   Lime is used here as display type on a dark photo overlay, where it
   measures roughly 9:1 against the background. That is well clear of the
   4.5:1 minimum. The same colour on white would be ~1.6:1, which is why
   it is confined to the hero and not reused for body text.
   ========================================================= */
.ec-hero-title{
  color: var(--ec-lime, #A1D000) !important;
  /* Fredoka: rounded, monoline, friendly. Chosen to match the reference
     lettering. Archivo Black previously sat here and read as corporate. */
  font-family: "Fredoka", "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.08;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);   /* holds up over a busy photo */
}

/* ---------- Hero call to action set ---------- */
.ec-hero-cta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 20px;
}
.ec-btn-ghost{
  display: inline-flex;
  align-items: center;
  padding: 17px 34px;
  border: 2px solid rgba(255,255,255,.75);
  border-radius: 60px;
  color: #fff;
  font-weight: 600;
  font-family: var(--cg-ff-heading);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.ec-btn-ghost:hover{ background:#fff; color: var(--cg-heading-secondary,#1C2936); border-color:#fff; }

.ec-btn-call{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 700;
  font-size: 19px;
  font-family: var(--cg-ff-heading);
  white-space: nowrap;
}
.ec-btn-call i{ color: var(--cg-theme-primary); font-size: 22px; }
.ec-btn-call span{ display: flex; flex-direction: column; line-height: 1.25; }
.ec-btn-call small{
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .75;
}
.ec-btn-call:hover{ color: var(--cg-theme-primary); }

@media (max-width: 767px){
  .ec-hero-cta{ gap: 14px; }
  .ec-hero-cta .cg-primary-btn,
  .ec-btn-ghost{ width: 100%; justify-content: center; text-align: center; }
  .ec-btn-call{ width: 100%; }
}

/* =========================================================
   "Why Families Choose Us" tabs on mobile
   main.css gives .cg-features-nav-sl a fixed 70px width and a 112px right
   margin. At phone widths that pushes the label past the edge, so it wraps
   underneath and reads as a broken two-line item.
   ========================================================= */

@media (max-width: 991px){
  .cg-features-nav .nav-link{ padding: 30px 0; font-size: 28px; }
  .cg-features-nav-sl{ margin-inline-end: 40px; width: 56px; font-size: 28px; }
}

@media (max-width: 767px){
  .cg-features-nav .nav-link{
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 22px 0;
    font-size: 22px;
    line-height: 1.3;
    text-align: left;
  }
  .cg-features-nav-sl{
    width: auto;
    min-width: 40px;
    margin-inline-end: 0;
    font-size: 22px;
    flex: 0 0 auto;
  }
  .cg-features-nav .nav-link::before{ display: none; }
  .cg-features-tab-wrapper{ display: block; }
  .cg-features-nav{ margin-bottom: 34px; }
}

/* =========================================================
   "Ready to talk?" CTA
   The theme's 111px/100px padding left the heading crowded against the
   band edges, and the orange strip is pulled up over the footer with a
   negative margin that needs offsetting.
   ========================================================= */
.cg-cta-space-2{ padding-top: 190px; padding-bottom: 180px; }
.cg-cta-image-bg::before{ opacity: .82; }
.cg-cta-space{ margin-top: 60px; }
.cg-cta-bg-wrapper{ padding-top: 64px; padding-bottom: 64px; }
@media (max-width: 991px){
  .cg-cta-space-2{ padding-top: 130px; padding-bottom: 120px; }
  .cg-cta-space{ margin-top: 40px; }
  .cg-cta-bg-wrapper{ padding-top: 44px; padding-bottom: 44px; }
}

/* ---------- Footer legal links ---------- */
.ec-legal-links{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-bottom: 14px;
}
.ec-legal-links a{ font-size: 15px; opacity: .8; }
.ec-legal-links a:hover{ opacity: 1; color: var(--cg-theme-primary); }

/* =========================================================
   Logo sizing
   Two header layouts exist: index.html uses .cg-header-top-logo in the white
   top bar, inner pages use .cg-header-logo in the main bar. Below 1200px the
   theme stretched the mark to the column width, which distorts a circular
   badge, so both axes are pinned.

   A horizontal lockup (mark + wordmark) will be wider than tall, so the height
   is what is fixed and width follows. See HANDOVER for the recommended
   artboard size.
   ========================================================= */
.cg-header-top-logo img,
.cg-header-logo img{
  height: 62px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
}
.cg-offcanvas-logo img{ height: 56px; width: auto; max-width: 220px; object-fit: contain; }
.cg-footer-logo img{ height: 96px; width: auto; max-width: 300px; object-fit: contain; }

@media (max-width: 991px){
  .cg-header-top-logo img,
  .cg-header-logo img{ height: 54px; max-width: 200px; }
}
@media (max-width: 575px){
  .cg-header-top-logo img,
  .cg-header-logo img{ height: 46px; max-width: 170px; }
  .cg-footer-logo img{ height: 80px; }
}

/* =========================================================
   Hero subtitle
   The theme's .primary-text renders this line in a pale tint that
   disappeared against the lighter photos. Orange reads on every slide.
   ========================================================= */
.cg-banner-subtitle,
.cg-banner-subtitle.primary-text{
  color: var(--cg-theme-primary, #E8EEF5) !important;
  font-weight: 600;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}

/* =========================================================
   Responsive hero images
   The desktop files are 1.79:1. A phone hero is closer to 0.55:1, so
   background-size:cover discarded most of the frame and sliced people in
   half. Portrait crops are served below 768px.

   main.js writes the desktop URL as an inline style from data-background,
   and inline styles beat a stylesheet, so these need !important.
   ========================================================= */
@media (max-width: 767px){
  .ec-hero-bg-1{ background-image: url('../images/banner/hero-1-mobile.jpeg') !important; }
  .ec-hero-bg-2{ background-image: url('../images/banner/hero-2-mobile.jpeg') !important; }
  .ec-hero-bg-3{ background-image: url('../images/banner/hero-3-mobile.jpeg') !important; }
  .ecBannerSlider .cg-banner-bg-image{
    background-position: center top !important;
  }
  /* the portrait crops are brighter, so the text overlay is strengthened */
  .ecBannerSlider .cg-banner-bg-color::before{
    background: linear-gradient(180deg,
      rgba(2,45,59,.86) 0%, rgba(2,45,59,.62) 45%, rgba(2,45,59,.88) 100%) !important;
  }
}

/* =========================================================
   Coverage map — clearer boundaries and labels
   The first version used hairline borders and three near-identical greys,
   so the served area did not stand out and the county shapes read as noise.
   ========================================================= */
.ec-map path{ transition: fill .18s ease; outline: none; }

/* Not served: visible but recessive. The border is what makes the county
   shapes legible rather than a single grey mass. */
.ec-map path.is-none{ fill: #EEF1F5; stroke: #C8D0DC; stroke-width: 1.1; }
.ec-map path.is-none:hover,
.ec-map path.is-none:focus{ fill: #E2E7EF; }

/* Expanding soon: a clear step between grey and full lime. */
.ec-map path.is-soon{ fill: #DDEBAE; stroke: #ffffff; stroke-width: 1.3; }
.ec-map path.is-soon:hover,
.ec-map path.is-soon:focus{ fill: #CBE08C; }

/* Serving now. */
.ec-map path.is-active{ fill: #A1D000; stroke: #ffffff; stroke-width: 1.3; }
.ec-map path.is-active:hover,
.ec-map path.is-active:focus{ fill: #8FBB00; }

/* The served counties are redrawn on top with a heavy outline so the four
   shapes read as one service area rather than four separate blobs. */
.ec-map .is-active-outline{
  fill: none;
  stroke: #5C7A00;
  stroke-width: 2.6;
  stroke-linejoin: round;
}

/* Labels */
.ec-map .ec-map-label{
  font-family: var(--cg-ff-heading, sans-serif);
  font-size: 19px;
  font-weight: 700;
  fill: #14304A;
  paint-order: stroke;          /* halo keeps text legible over any fill */
  stroke: #ffffff;
  stroke-width: 4px;
  stroke-linejoin: round;
}
.ec-map .ec-map-leader{ stroke: #14304A; stroke-width: 1.6; }
.ec-map .ec-map-dot{ fill: #14304A; stroke: #ffffff; stroke-width: 2; }

@media (max-width: 767px){
  .ec-map .ec-map-label{ font-size: 26px; stroke-width: 5px; }
  .ec-map .is-active-outline{ stroke-width: 3.4; }
  .ec-map path.is-none{ stroke-width: 1.4; }
}

/* Legend swatches need to match the fills above. */
.ec-sw-active{ background: #A1D000; }
.ec-sw-soon{ background: #DDEBAE; }
.ec-sw-none{ background: #EEF1F5; border: 1px solid #C8D0DC; }

/* FAQ answer that ends in a call to action */
.accordion-body .ec-faq-cta{ display: block; margin-top: 18px; }
.accordion-body .ec-faq-cta .cg-primary-btn{ padding: 13px 28px; font-size: 15px; }
.accordion-body a{ color: var(--cg-theme-primary); font-weight: 600; }
.accordion-body a.cg-primary-btn{ color: #fff; }

/* =========================================================
   Breadcrumb over photography
   Inner pages now use a photo instead of the flat navy panel. The heading
   needs a scrim behind it or white type sits on unpredictable backgrounds.
   ========================================================= */
.ec-breadcrumb-photo .cg-breadcrumb-bg{
  background-position: center;
  background-size: cover;
}
/* Dark scrim so any photo can carry text.
   The theme already uses ::before on this element for its bottom shape, so the
   scrim goes on ::after. It sits above the image and below the content. */
.ec-breadcrumb-photo::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(6,20,38,.78) 0%, rgba(6,20,38,.60) 45%, rgba(6,20,38,.82) 100%);
}
.ec-breadcrumb-photo .cg-breadcrumb-wrapper{ position: relative; z-index: 2; }

/* Lime heading, matching the logo. On this scrim it measures roughly 8:1,
   comfortably past the 4.5:1 minimum. */
.ec-breadcrumb-photo .cg-breadcrumb-title{
  color: #A1D000;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.ec-breadcrumb-photo .cg-breadcrumb-list,
.ec-breadcrumb-photo .cg-breadcrumb-list span{ color: #E8EEF5; }
.ec-breadcrumb-photo .cg-breadcrumb-list a{ color: #ffffff; }
.ec-breadcrumb-photo .cg-breadcrumb-list a:hover{ color: #A1D000; }

/* ---------- Logo: the new mark is a 3:1 horizontal lockup ---------- */
.cg-header-top-logo img,
.cg-header-logo img{ height: 58px; width: auto; max-width: 230px; object-fit: contain; }
.offcanvas-logo img,
.cg-offcanvas-logo img{ height: 52px; width: auto; max-width: 200px; object-fit: contain; }
.cg-footer-logo img{ height: 72px; width: auto; max-width: 260px; object-fit: contain; }
@media (max-width: 991px){
  .cg-header-top-logo img,
  .cg-header-logo img{ height: 50px; max-width: 200px; }
}
@media (max-width: 575px){
  .cg-header-top-logo img,
  .cg-header-logo img{ height: 42px; max-width: 165px; }
  .cg-footer-logo img{ height: 62px; }
}

/* ---------- Sidebar contact rows ---------- */
.offcanvas-contact-icon i{ color: var(--cg-theme-primary); width: 18px; text-align: center; }
.offcanvas-contact-text span{ color: inherit; }
/* =========================================================
   Gallery
   Uses the theme's own section furniture (section-space, grey-bg-2,
   cg-section-title) so it sits inside the existing rhythm. The lightbox is
   Magnific Popup, already bundled and initialised on .popup-image in main.js,
   so no new library is needed.
   ========================================================= */
.cg-gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cg-gallery-item{
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #0B2447;
}
.cg-gallery-item a{
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.cg-gallery-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.cg-gallery-item:hover img{ transform: scale(1.06); }

.cg-gallery-item a::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,20,38,0) 40%, rgba(6,20,38,.75) 100%);
  opacity: 0;
  transition: opacity .35s ease;
}
.cg-gallery-item:hover a::after{ opacity: 1; }

.cg-gallery-zoom{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(.8);
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--cg-theme-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 2;
}
.cg-gallery-item:hover .cg-gallery-zoom{ opacity: 1; transform: translate(-50%,-50%) scale(1); }

.cg-gallery-item figcaption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 22px;
  color: #fff;
  font-family: var(--cg-ff-heading);
  font-weight: 600;
  font-size: 17px;
  transform: translateY(12px);
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  z-index: 2;
  pointer-events: none;
}
.cg-gallery-item:hover figcaption{ opacity: 1; transform: translateY(0); }

/* Keyboard users get the same affordances as a mouse hover. */
.cg-gallery-item a:focus-visible{ outline: 3px solid var(--cg-theme-primary); outline-offset: 3px; }
.cg-gallery-item a:focus-visible::after,
.cg-gallery-item:focus-within .cg-gallery-zoom,
.cg-gallery-item:focus-within figcaption{ opacity: 1; }
.cg-gallery-item:focus-within figcaption{ transform: translateY(0); }

@media (max-width: 991px){
  .cg-gallery-grid{ grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 575px){
  .cg-gallery-grid{ grid-template-columns: 1fr; gap: 16px; }
  /* no hover on touch, so captions and scrim stay visible */
  .cg-gallery-item figcaption{ opacity: 1; transform: none; font-size: 16px; }
  .cg-gallery-item a::after{ opacity: 1; }
}

/* Lightbox chrome, tinted to the site rather than the plugin default. */
.mfp-bg{ background: #061426; opacity: .94; }
.mfp-figure::after{ box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.mfp-arrow-left::after{ border-right-color: var(--cg-theme-primary); }
.mfp-arrow-right::after{ border-left-color: var(--cg-theme-primary); }
.mfp-counter{ color: #C9D4E2; font-family: var(--cg-ff-body); }