@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

/* jfp.css — minimal CSS that supports the behaviors in jfp.js.
   Loaded AFTER the (still-present) Elementor/Astra CSS in Phase 2.
   Phase 3 will fold these rules into the consolidated dist/jfp.css. */

/* ---- Native smooth scroll for in-page anchors ----------------------- */
/* No JS smooth-scroll library: native momentum on trackpads feels better
   than a hijacked wheel handler. CSS handles same-document hash links. */
html { scroll-behavior: smooth; }

/* ---- Global font: Quicksand (rounded sans, matches the JFP logo) ----- */
:root {
  --jfp-e-global-typography-text-font-family: "Quicksand";
  --jfp-e-global-typography-primary-font-family: "Quicksand";
  --jfp-e-global-typography-secondary-font-family: "Quicksand";
}
html, body,
h1, h2, h3, h4, h5, h6,
p, span, a, li, label, legend,
button, input, textarea, select,
.jfp-heading-title, .jfp-button-text, .jfp-button,
.menu-link, .jfp-menu-item-link, .jfp-submenu-item-link {
  font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---- Scroll-cost reductions ----------------------------------------- */
/* `content-visibility: auto` lets the browser skip layout + paint for
   offscreen section containers, which is the biggest single win for
   scroll smoothness on Elementor-heavy pages (many nested divs).
   `contain-intrinsic-size` reserves a height so the scrollbar doesn't
   jump as offscreen sections get realised. The 600px hint is a generous
   guess — over-reserving is cheap, under-reserving causes scrollbar jiggle. */
.jfp-con.jfp-parent:not(.jfp-anim-skip) {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}
/* The sticky header and bg-video parents must NOT get content-visibility,
   so make sure they're never matched. (.jfp-anim-skip on above-fold rules
   them out; the sticky header is opted in via data-settings sticky:top
   handled in JS, but it lives inside <header class="jfp-root"> rather
   than .jfp-con.jfp-parent, so it's naturally exempt.) */

/* Promote scroll-animated layers to their own GPU compositor layer so
   class toggles don't trigger full-document repaints. */
.jfp-anim-init,
.jfp-stuck,
.jfp-bgvideo {
  will-change: transform, opacity;
}

/* ---- Sticky header ---------------------------------------------------- */
/* Smooth shrink-on-scroll. Transitions are declared on the BASE sticky
   element so they play both directions (collapse on scroll-down, expand
   on scroll-up). We animate padding/min-height/max-height so the layout
   actually reflows compact — not just visually. */
.jfp-location-header [data-settings*='"sticky"'],
.jfp-location-header [data-settings*='"sticky"'] > .jfp-con,
.jfp-location-header [data-settings*='"sticky"'] .jfp-con-inner,
.jfp-location-header [data-settings*='"sticky"'] .jfp-widget,
.jfp-location-header [data-settings*='"sticky"'] .jfp-widget-body {
  transition:
    padding .42s cubic-bezier(.22, .8, .25, 1),
    min-height .42s cubic-bezier(.22, .8, .25, 1),
    max-height .42s cubic-bezier(.22, .8, .25, 1),
    font-size .42s cubic-bezier(.22, .8, .25, 1),
    box-shadow .35s ease,
    background-color .35s ease;
}
.jfp-location-header [data-settings*='"sticky"'] .jfp-widget-theme-site-logo img,
.jfp-location-header [data-settings*='"sticky"'] .jfp-widget-image img,
.jfp-location-header [data-settings*='"sticky"'] .jfp-menu-item-link,
.jfp-location-header [data-settings*='"sticky"'] .menu-link,
.jfp-location-header [data-settings*='"sticky"'] .jfp-widget-button .jfp-button {
  transition:
    max-height .42s cubic-bezier(.22, .8, .25, 1),
    height .42s cubic-bezier(.22, .8, .25, 1),
    padding .42s cubic-bezier(.22, .8, .25, 1),
    font-size .35s ease;
}

.jfp-stuck {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  width: 100%;
  background: #fff;
  box-shadow: 0 4px 18px rgba(15, 37, 64, .10);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
  /* Promote to its own compositor layer so scroll doesn't trigger
     repaint of everything underneath it. */
  transform: translateZ(0);
  will-change: transform;
  animation: jfp-stuck-slide-in .42s cubic-bezier(.22, .8, .25, 1);
}
/* Collapse every nested container so the whole bar reflows to ~62px. */
.jfp-stuck > .jfp-con,
.jfp-stuck .jfp-con-inner,
.jfp-stuck .jfp-widget,
.jfp-stuck .jfp-widget-body {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  min-height: 0 !important;
}
.jfp-stuck > .jfp-con { padding-top: 0 !important; padding-bottom: 0 !important; }
/* Logo: cap the actual rendered height so the layout collapses (transform
   alone wouldn't shrink the row). max-height is animatable. */
.jfp-stuck .jfp-widget-theme-site-logo img,
.jfp-stuck .jfp-widget-image img {
  max-height: 44px !important;
  width: auto !important;
  height: auto !important;
}
/* Nav links: trim vertical padding and font weight so they sit tight.
   Scoped to TOP-LEVEL bar items only — dropdown descendants kept untouched
   so the panel doesn't visibly rescale when the header pins. */
.jfp-stuck .jfp-navbar-nav > li > .menu-link,
.jfp-stuck .jfp-navbar-nav > li > .jfp-menu-nav-link,
.jfp-stuck .jfp-nav-menu > li > .menu-link,
.jfp-stuck .jfp-nav-menu > li > .jfp-menu-item-link {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  font-size: .95rem !important;
  line-height: 1.2 !important;
}
/* Book Online button: smaller pill. */
.jfp-stuck .jfp-widget-button .jfp-button,
.jfp-stuck .jfp-widget-button a {
  padding: 7px 18px !important;
  font-size: .82rem !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
}
/* Language toggle gets a slight squeeze too. */
.jfp-stuck .jfp-lang-toggle { padding: 2px !important; }
.jfp-stuck .jfp-lang-btn { height: 24px !important; min-width: 34px; font-size: .75rem !important; }

@keyframes jfp-stuck-slide-in {
  0%   { transform: translateY(-12px); opacity: .4; }
  60%  { opacity: 1; }
  100% { transform: translateY(0);     opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .jfp-location-header [data-settings*='"sticky"'],
  .jfp-location-header [data-settings*='"sticky"'] *,
  .jfp-stuck * {
    transition: none !important;
  }
  .jfp-stuck { animation: none; }
}

/* ---- Dropdown nav (replaces SmartMenus) ------------------------------ */
li.menu-item-has-children > .sub-menu,
li.menu-item-has-children > .jfp-nav-menu--dropdown,
li.menu-item-has-children > .jfp-megamenu,
li.menu-item-has-children > .jfp-dropdown,
li.menu-item-has-children > .jfp-submenu-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
li.menu-item-has-children.jfp-open > .sub-menu,
li.menu-item-has-children.jfp-open > .jfp-nav-menu--dropdown,
li.menu-item-has-children.jfp-open > .jfp-megamenu,
li.menu-item-has-children.jfp-open > .jfp-dropdown,
li.menu-item-has-children.jfp-open > .jfp-submenu-panel {
  display: block !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
/* Forced-shown dropdown menus need to lay out as block-level lists. */
li.menu-item-has-children.jfp-open > .jfp-dropdown > li,
li.menu-item-has-children.jfp-open > .jfp-submenu-panel > li,
li.menu-item-has-children.jfp-open > .sub-menu > li {
  display: list-item !important;
}

/* The mobile-builder nav (menu-item-1302) ships with TWO submenus per
   parent — a `.jfp-dropdown` and a legacy `.jfp-megamenu-wrap` carrying
   a duplicate of the same items. Drop the megamenu so only one menu
   renders. */
.jfp-menu-nav-link + .jfp-megamenu-wrap,
.jfp-dropdown + .jfp-megamenu-wrap,
.jfp-megamenu-wrap {
  display: none !important;
}

/* Style the actual nav dropdown so it reads as an elevated panel. */
li.menu-item-has-children > .jfp-dropdown,
li.menu-item-has-children > .jfp-submenu-panel,
li.menu-item-has-children > .sub-menu.jfp-nav-menu--dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 37, 64, .14);
  min-width: 220px;
  /* Use a top padding instead of margin so the dropdown's bounding box
     covers the gap between the parent link and the menu. Otherwise the
     mouse crosses empty space and the li fires mouseleave. */
  padding: 14px 0 8px;
  margin: 0;
  list-style: none;
  z-index: 1000;
}
/* Invisible bridge slightly above the panel for extra hover tolerance.
   Captures the cursor as it transitions from the trigger downward. */
li.menu-item-has-children > .jfp-dropdown::before,
li.menu-item-has-children > .jfp-submenu-panel::before,
li.menu-item-has-children > .sub-menu.jfp-nav-menu--dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 14px;
  background: transparent;
}
li.menu-item-has-children > .jfp-dropdown > li,
li.menu-item-has-children > .jfp-submenu-panel > li {
  display: block;
  list-style: none;
}
li.menu-item-has-children > .jfp-dropdown > li > a,
li.menu-item-has-children > .jfp-submenu-panel > li > a,
li.menu-item-has-children > .sub-menu > li > a {
  display: block;
  padding: 9px 20px;
  color: #1f2937;
  text-decoration: none;
  white-space: nowrap;
  font-size: .95rem;
  line-height: 1.3;
  transition: background .15s ease, color .15s ease;
}
li.menu-item-has-children > .jfp-dropdown > li > a:hover,
li.menu-item-has-children > .jfp-submenu-panel > li > a:hover,
li.menu-item-has-children > .sub-menu > li > a:hover {
  background: #eef5fb;
  color: #2c79b3;
}
li.menu-item-has-children { position: relative; }

/* Services dropdown — 17 items would be too tall as a single column.
   Lay it out as two columns on desktop so everything fits without
   scrolling. Targeted via `:has(.jfp-nav-emergency-li)` so only the
   Services menu gets the split (Resources / Online Pharmacy stay single
   column). Wider min-width is needed to actually fit two columns. */
@media (min-width: 1025px) {
  li.menu-item-has-children > .jfp-dropdown:has(.jfp-nav-emergency-li),
  li.menu-item-has-children > .jfp-submenu-panel:has(.jfp-nav-emergency-li),
  li.menu-item-has-children > .sub-menu:has(.jfp-nav-emergency-li) {
    min-width: 460px;
    column-count: 2;
    column-gap: 8px;
  }
  /* Keep each link from breaking across the column boundary mid-text. */
  li.menu-item-has-children > .jfp-dropdown:has(.jfp-nav-emergency-li) > li,
  li.menu-item-has-children > .jfp-submenu-panel:has(.jfp-nav-emergency-li) > li,
  li.menu-item-has-children > .sub-menu:has(.jfp-nav-emergency-li) > li {
    break-inside: avoid;
  }
}

/* "Book Online" button: kill the .jfp-animation-grow scale-on-hover so it
   doesn't bump into the language toggle. Swap in a color/shadow hover. */
.jfp-widget-button .jfp-animation-grow,
.jfp-widget-button .jfp-animation-grow:hover,
.jfp-widget-button .jfp-animation-grow:focus,
.jfp-widget-button .jfp-animation-grow:active {
  transform: none !important;
  transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.jfp-widget-button .jfp-animation-grow:hover,
.jfp-widget-button .jfp-animation-grow:focus {
  background-color: #235f8d;
  color: #fff;
  box-shadow: 0 6px 16px rgba(44, 121, 179, .25);
}

/* ---- Mobile offcanvas drawer -----------------------------------------
   These rules must win over jfp-bundle.css's pre-existing offcanvas
   styling (which sits in flow and pushes the layout sideways instead of
   sliding in as a drawer). jfp-bundle.css is loaded AFTER jfp.css per
   the current HTML, so we need !important on the overrides. */
.jfp-offcanvas {
  visibility: hidden !important;
  pointer-events: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 99999 !important;
  transform: none !important;
}
.jfp-offcanvas .jfp-offcanvas-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  background: rgba(0, 0, 0, .45) !important;
  opacity: 0 !important;
  transition: opacity .25s ease !important;
  z-index: 1 !important;
}
.jfp-offcanvas .jfp-offcanvas-panel {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: auto !important;
  width: min(86vw, 360px) !important;
  max-width: 360px !important;
  height: 100% !important;
  background: #fff !important;
  box-shadow: 4px 0 20px rgba(0, 0, 0, .15) !important;
  transform: translateX(-105%) !important;
  transition: transform .35s cubic-bezier(.5, 0, .5, 1) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  z-index: 2 !important;
}
body.jfp-offcanvas-open .jfp-offcanvas {
  visibility: visible !important;
  pointer-events: auto !important;
}
body.jfp-offcanvas-open .jfp-offcanvas .jfp-offcanvas-panel {
  transform: translateX(0) !important;
}
body.jfp-offcanvas-open .jfp-offcanvas .jfp-offcanvas-overlay {
  opacity: 1 !important;
}
/* iOS-safe body lock — JS sets body.style.top to the negative scrollY
   so the page doesn't jump. position:fixed + width:100% is what makes
   the lock actually hold on iOS Safari (overflow:hidden alone does
   not). */
body.jfp-offcanvas-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* Inside the drawer, dropdown submenus must expand inline beneath
   the parent — NOT pop up as floating panels like they do on desktop.
   Without this override, tapping "Services" adds .jfp-open but the
   absolute-positioned panel renders off-screen and the menu feels
   frozen. */
.jfp-offcanvas li.menu-item-has-children > .sub-menu,
.jfp-offcanvas li.menu-item-has-children > .jfp-dropdown,
.jfp-offcanvas li.menu-item-has-children > .jfp-submenu-panel,
.jfp-offcanvas li.menu-item-has-children > .jfp-nav-menu--dropdown {
  position: static !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  padding: 0 0 0 18px !important;
  background: transparent !important;
  /* Hidden state */
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transform: none !important;
  overflow: hidden;
  transition: max-height .3s ease, opacity .2s ease, visibility 0s linear .2s;
}
.jfp-offcanvas li.menu-item-has-children.jfp-open > .sub-menu,
.jfp-offcanvas li.menu-item-has-children.jfp-open > .jfp-dropdown,
.jfp-offcanvas li.menu-item-has-children.jfp-open > .jfp-submenu-panel,
.jfp-offcanvas li.menu-item-has-children.jfp-open > .jfp-nav-menu--dropdown {
  max-height: 1200px;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
/* Inside the drawer, never split dropdowns into multiple columns. */
.jfp-offcanvas li.menu-item-has-children > .sub-menu,
.jfp-offcanvas li.menu-item-has-children > .jfp-dropdown,
.jfp-offcanvas li.menu-item-has-children > .jfp-submenu-panel {
  column-count: 1 !important;
}
/* Inline drawer sub-menu links: tighter and full-width tap targets. */
.jfp-offcanvas .sub-menu > li > a,
.jfp-offcanvas .jfp-dropdown > li > a,
.jfp-offcanvas .jfp-submenu-panel > li > a {
  padding: 10px 14px !important;
  white-space: normal !important;
  font-size: .95rem;
}
/* Visual cue for parents that contain a submenu — chevron rotates when open. */
.jfp-offcanvas li.menu-item-has-children > a {
  position: relative;
  padding-right: 32px !important;
}
.jfp-offcanvas li.menu-item-has-children > a::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  transition: transform .2s ease;
  opacity: .65;
}
.jfp-offcanvas li.menu-item-has-children.jfp-open > a::after {
  transform: translateY(-35%) rotate(-135deg);
}
/* Hide the existing decorative arrow span (it's already there from the
   menu markup); our ::after replaces it. */
.jfp-offcanvas .dropdown-menu-toggle,
.jfp-offcanvas .jfp-submenu-indicator,
.jfp-offcanvas .jfp-ast-header-navigation-arrow {
  display: none !important;
}
.jfp-offcanvas-content {
  padding: 20px 22px 32px !important;
}
.jfp-offcanvas-heading {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin-bottom: 16px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #eef2f7 !important;
  position: static !important;
}
.jfp-offcanvas-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: #f1f4f8 !important;
  color: #1f2937 !important;
  border: 0 !important;
  padding: 0 !important;
  top: auto !important;
  right: auto !important;
  font-size: 0 !important;
  transition: background .15s ease !important;
}
.jfp-offcanvas-close:hover { background: #e4ebf3 !important; }
.jfp-offcanvas-close svg { width: 14px !important; height: 14px !important; fill: currentColor !important; max-width: 14px !important; }

/* Drawer menu items — brand polish */
.jfp-offcanvas .jfp-nav-menu { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.jfp-offcanvas .jfp-nav-menu > li {
  display: block !important;
  list-style: none !important;
  margin: 0 !important;
  border-bottom: 1px solid #f0f3f7 !important;
}
.jfp-offcanvas .jfp-nav-menu > li:last-child { border-bottom: 0 !important; }
.jfp-offcanvas .jfp-nav-menu > li > a {
  display: block !important;
  padding: 13px 4px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
  letter-spacing: -.005em !important;
  text-decoration: none !important;
  transition: color .15s ease !important;
}
.jfp-offcanvas .jfp-nav-menu > li > a:hover,
.jfp-offcanvas .jfp-nav-menu > li > a:focus { color: #2c79b3 !important; }
.jfp-offcanvas .jfp-nav-menu > li.current-menu-item > a,
.jfp-offcanvas .jfp-nav-menu > li > a.jfp-menu-item-active {
  color: #2c79b3 !important;
}
/* Submenu items — slightly smaller, lighter color */
.jfp-offcanvas .sub-menu > li > a,
.jfp-offcanvas .jfp-dropdown > li > a,
.jfp-offcanvas .jfp-submenu-panel > li > a {
  padding: 10px 14px 10px 18px !important;
  font-size: .92rem !important;
  font-weight: 500 !important;
  color: #4b5563 !important;
  letter-spacing: 0 !important;
}
.jfp-offcanvas .sub-menu > li > a:hover,
.jfp-offcanvas .sub-menu > li > a:focus {
  background: #f6f9fc !important;
  color: #2c79b3 !important;
}
/* Drawer Book Online button — keep brand-blue outlined */
.jfp-offcanvas .jfp-button {
  border-radius: 999px !important;
  padding: 10px 22px !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
}
/* EN/ES language toggle inside drawer — center it */
.jfp-offcanvas .jfp-lang-toggle-item {
  display: flex !important;
  justify-content: flex-start !important;
  margin: 14px 0 8px !important;
  border-bottom: 0 !important;
}
/* Hide the duplicate hidden secondary nav inside the drawer */
.jfp-offcanvas nav[aria-hidden="true"] { display: none !important; }
/* Bundle.css hides .jfp-nav-menu--main on tablet/mobile assuming a
   different menu pattern. In our drawer that IS the menu we want
   visible — restore it. */
.jfp-offcanvas .jfp-nav-menu--main,
.jfp-offcanvas .jfp-nav-menu__container,
.jfp-offcanvas .jfp-nav-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ---- Carousel container ---------------------------------------------- */
/* Clip the moving wrapper so slides don't bleed past the right edge. */
.jfp-widget-testimonial-carousel .jfp-swiper,
.jfp-widget-testimonial-carousel .jfp-main-swiper,
.jfp-widget-image-carousel .jfp-swiper,
.jfp-widget-image-carousel .jfp-main-swiper {
  overflow: hidden;
  position: relative;
}
.jfp-widget-testimonial-carousel,
.jfp-widget-image-carousel {
  position: relative;
}
/* Force every descendant of a slide to respect the slide's width — the
   original Elementor card markup has an inner `.jfp-con-full` with an
   explicit `width: 320px` that overflows the slide and gets clipped by
   the swiper's overflow:hidden. */
.jfp-widget-testimonial-carousel .swiper-slide,
.jfp-widget-image-carousel .swiper-slide {
  box-sizing: border-box;
  overflow: hidden;
}
.jfp-widget-testimonial-carousel .swiper-slide .jfp-con,
.jfp-widget-testimonial-carousel .swiper-slide .jfp-con-full,
.jfp-widget-testimonial-carousel .swiper-slide .jfp-con-boxed,
.jfp-widget-image-carousel .swiper-slide .jfp-con,
.jfp-widget-image-carousel .swiper-slide .jfp-con-full,
.jfp-widget-image-carousel .swiper-slide .jfp-con-boxed {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

/* Equal-height carousel cards. The cards are centered inside an intentionally
   tall carousel column (it stretches to balance the photo beside it). Their
   CONTENT differs — most descriptions are short, but "Pet Care Plans" has a
   long one (and the Spanish copy runs longer still), so that card alone grew
   taller than its neighbours. Give every card the same min-height so the
   bordered boxes line up. A fixed min-height — rather than height:100% or a
   flex-fill chain — is deliberate: percentage/stretch heights here feed back
   into align-items:stretch and balloon the whole slide. Scoped to >=768px;
   on phones only one card shows at a time, so equal height is moot there. */
@media (min-width: 768px) {
  .jfp-widget-testimonial-carousel .swiper-slide .jfp-con-boxed {
    min-height: 480px;
    /* Center the icon/title/text block so the extra room on shorter cards is
       shared top and bottom (balanced) rather than dumped under the text. */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Carousel card titles ("Microchipping", "Echocardiogram", …) must sit on
   one line and never break mid-word. The base .jfp-heading-title uses
   overflow-wrap:anywhere, which splits long words; the previous keep-all fix
   was scoped to <=520px only, so desktop still broke to "Microchippin/g".
   Apply it at every breakpoint with a font-size small enough that the longest
   single word fits a 3-up slide. Multi-word titles may still wrap on spaces. */
.jfp-widget-testimonial-carousel .swiper-slide .jfp-heading-title,
.jfp-widget-image-carousel .swiper-slide .jfp-heading-title {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  white-space: normal !important;
  font-size: clamp(0.95rem, 1.5vw, 1.2rem) !important;
  line-height: 1.25 !important;
}

/* ---- Carousel pagination dots: hidden per design --------------------- */
.jfp-widget-testimonial-carousel .swiper-pagination,
.jfp-widget-image-carousel .swiper-pagination {
  display: none !important;
}

/* ---- Carousel arrows ------------------------------------------------- */
.jfp-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, .9);
  color: #111;
  border: none;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jfp-arrow.swiper-button-prev { left: -18px; }
.jfp-arrow.swiper-button-next { right: -18px; }

/* ---- Entrance fade --------------------------------------------------- */
.jfp-invisible { opacity: 0; }
.jfp-visible { opacity: 1; transition: opacity .8s ease; }

/* ---- Scroll-triggered section animation ------------------------------ */
.jfp-anim-init {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1),
              transform .7s cubic-bezier(.2, .7, .2, 1);
}
.jfp-anim-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
@media (prefers-reduced-motion: reduce) {
  .jfp-anim-init {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Home hero entrance + ambient animations -----------------------
   Scoped to body#page-home and the desktop hero container .jfp-el-e15b36e
   so the rest of the site is unaffected. Mobile hero (.jfp-el-b6f026e)
   stays static — its layout is different and the entrance reads worse
   on small viewports.

   Note: initFades() tags above-the-fold sections .jfp-anim-skip and
   never adds .jfp-anim-init to their children, so these CSS animations
   own the first-paint state of the hero's text/buttons/icons. */

@keyframes jfp-hero-rise {
  from { opacity: 0; transform: translateY(28px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes jfp-hero-pop-in {
  0%   { opacity: 0; transform: translateY(18px) scale(.92); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes jfp-hero-slide-right {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes jfp-bgvideo-ken-burns {
  /* Preserve the existing translate(-50%, -50%) centering from the base
     .jfp-bgvideo rule; the scale is layered on top of it. */
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes jfp-hero-scroll-cue {
  /* Keep rotate(45deg) in every step — the ::after draws the chevron with
     border-right+border-bottom rotated 45°; omitting the rotation here let the
     animation flatten it into an "L" bracket. */
  0%, 100% { transform: translate(-50%, 0) rotate(45deg);   opacity: .85; }
  50%      { transform: translate(-50%, 8px) rotate(45deg); opacity: 1; }
}

/* Initial hidden state for animated hero elements so first paint
   doesn't show them at opacity 1 before the animation runs. */
body#page-home .jfp-el-e15b36e .jfp-heading-title,
body#page-home .jfp-el-e15b36e .jfp-el-a36d659 .jfp-button,
body#page-home .jfp-el-e15b36e .jfp-icon-list-item {
  opacity: 0;
  animation-fill-mode: both;
  will-change: transform, opacity, filter;
}

/* Headline: blurred rise (longest, most prominent). */
body#page-home .jfp-el-e15b36e .jfp-el-e333204 .jfp-heading-title {
  animation: jfp-hero-rise .95s cubic-bezier(.22, 1, .36, 1) .15s forwards;
}
/* Subhead: same rise, chained. */
body#page-home .jfp-el-e15b36e .jfp-el-a670fcb .jfp-heading-title {
  animation: jfp-hero-rise .95s cubic-bezier(.22, 1, .36, 1) .42s forwards;
}
/* CTAs: springy pop-in, staggered. */
body#page-home .jfp-el-e15b36e .jfp-el-a36d659 .jfp-widget-button:nth-of-type(1) .jfp-button {
  animation: jfp-hero-pop-in .7s cubic-bezier(.34, 1.56, .64, 1) .72s forwards;
}
body#page-home .jfp-el-e15b36e .jfp-el-a36d659 .jfp-widget-button:nth-of-type(2) .jfp-button {
  animation: jfp-hero-pop-in .7s cubic-bezier(.34, 1.56, .64, 1) .85s forwards;
}
/* Social icons: left-to-right stagger, early so they don't compete with
   the headline beat. */
body#page-home .jfp-el-e15b36e .jfp-el-da9d1d0 .jfp-icon-list-item {
  animation: jfp-hero-slide-right .6s cubic-bezier(.22, 1, .36, 1) forwards;
}
body#page-home .jfp-el-e15b36e .jfp-el-da9d1d0 .jfp-icon-list-item:nth-child(1) { animation-delay: .30s; }
body#page-home .jfp-el-e15b36e .jfp-el-da9d1d0 .jfp-icon-list-item:nth-child(2) { animation-delay: .43s; }
body#page-home .jfp-el-e15b36e .jfp-el-da9d1d0 .jfp-icon-list-item:nth-child(3) { animation-delay: .56s; }

/* Background corgi video: slow Ken Burns drift. transform on the inner
   <video> so the surrounding container clipping still works. */
body#page-home .jfp-el-e15b36e .jfp-bgvideo {
  animation: jfp-bgvideo-ken-burns 28s cubic-bezier(.4, 0, .6, 1) infinite alternate;
  will-change: transform;
}

/* Scroll cue: a small bouncing chevron at the bottom of the hero. Hidden
   by default; injected by an ::after on the hero container so no HTML
   change is needed. Fades out as the user scrolls (handled below). */
body#page-home .jfp-el-e15b36e { position: relative; }
body#page-home .jfp-el-e15b36e::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 22px;
  height: 22px;
  border-right: 2.5px solid rgba(255, 255, 255, .9);
  border-bottom: 2.5px solid rgba(255, 255, 255, .9);
  transform: translate(-50%, 0) rotate(45deg);
  opacity: 0;
  pointer-events: none;
  animation: jfp-hero-scroll-cue 1.8s ease-in-out 1.4s infinite;
  transition: opacity .3s ease;
}
/* JS adds .jfp-scrolled to <body> on first non-zero scroll. */
body.jfp-scrolled#page-home .jfp-el-e15b36e::after { opacity: 0 !important; animation: none; }

@media (prefers-reduced-motion: reduce) {
  body#page-home .jfp-el-e15b36e .jfp-heading-title,
  body#page-home .jfp-el-e15b36e .jfp-el-a36d659 .jfp-button,
  body#page-home .jfp-el-e15b36e .jfp-icon-list-item {
    opacity: 1;
    animation: none;
  }
  body#page-home .jfp-el-e15b36e .jfp-bgvideo { animation: none; }
  body#page-home .jfp-el-e15b36e::after { animation: none; opacity: 0; }
}

/* ---- "Puppy peek" image animation -----------------------------------
   The Dr. Wint section's German-shepherd-puppy image gets a bouncy
   slide-in-from-the-left when the section scrolls into view. Piggybacks
   on the existing .jfp-anim-in toggle that initFades() adds to parent
   sections, so no extra JS is needed. */
.jfp-anim-puppy {
  opacity: 0;
  transform: translateX(-60px) scale(.94);
  transition: opacity .9s cubic-bezier(.34, 1.56, .64, 1),
              transform .9s cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: .15s;
  will-change: transform, opacity;
}
.jfp-anim-in .jfp-anim-puppy,
.jfp-anim-in.jfp-anim-puppy {
  opacity: 1;
  transform: translateX(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .jfp-anim-puppy { opacity: 1; transform: none; transition: none; }
}

/* ---- Scroll-to-top button reveal ------------------------------------- */
#jfp-scroll-top { transition: opacity .2s ease; }

/* ---- Emergency Care link (red, attention-grabbing) ------------------ */
.jfp-nav-emergency,
.jfp-footer-col a.jfp-nav-emergency {
  color: #c0392b !important;
  font-weight: 700 !important;
}
/* In dropdown: red hover background. */
li.menu-item-has-children > .jfp-dropdown > li > a.jfp-nav-emergency:hover,
li.menu-item-has-children > .jfp-submenu-panel > li > a.jfp-nav-emergency:hover,
li.menu-item-has-children > .sub-menu > li > a.jfp-nav-emergency:hover {
  background: #fff5f4 !important;
  color: #a8281b !important;
}

/* ---- Language toggle pill (replaces the Español nav link) ---------- */
.jfp-lang-toggle-item {
  display: flex !important;
  align-items: center;
  list-style: none;
  margin-left: 8px;
}
.jfp-lang-toggle {
  display: inline-flex;
  background: #eef2f7;
  border-radius: 999px;
  padding: 3px;
  gap: 0;
  line-height: 1;
}
.jfp-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: #5a6678;
  text-decoration: none !important;
  background: transparent;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.jfp-lang-btn:hover { color: #2c79b3; }
/* Active state — JS toggles .jfp-lang-active.
   An inline <script> in <body> also sets data-jfp-lang on <html> before
   first paint so the right pill is highlighted immediately (no flicker
   while deferred jfp.js loads, no mismatch between the desktop nav copy
   and the offcanvas copy). */
html[data-jfp-lang="en"] .jfp-lang-en,
html[data-jfp-lang="es"] .jfp-lang-es,
.jfp-lang-active { background: #2c79b3 !important; color: #fff !important; }
.jfp-lang-btn:not(.jfp-lang-active) { background: transparent; color: #5a6678; }
html[data-jfp-lang="en"] .jfp-lang-en,
html[data-jfp-lang="es"] .jfp-lang-es { color: #fff !important; }
.jfp-lang-btn:active { transform: scale(.96); }

/* Hide Google Translate's injected UI — we drive it through our own pill. */
.goog-te-banner-frame.skiptranslate,
.goog-te-gadget-icon,
.goog-tooltip,
.goog-tooltip:hover,
.goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
body { top: 0 !important; position: static !important; }
html { margin-top: 0 !important; }
#google_translate_element { visibility: hidden; }

/* ---- Contact page v2 (matches site style) -------------------------- */
.jfp-cp2-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.jfp-cp2-hero { padding: 64px 0 36px; background: #fff; }
.jfp-cp2-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
}
.jfp-cp2-hero-img img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  display: block;
  box-shadow: 0 12px 32px rgba(15, 37, 64, .12);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.jfp-cp2-hero-copy .jfp-heading-title {
  font-family: "EB Garamond", Georgia, serif;
  color: #2c79b3;
  line-height: 1.15;
  margin: 0 0 10px;
}
.jfp-cp2-hero-copy h1.jfp-heading-title {
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  font-weight: 500;
  margin-bottom: 8px;
}
.jfp-cp2-hero-copy h2.jfp-heading-title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 16px;
}
.jfp-cp2-pill {
  background-color: #00A6E5;
  color: #fff;
  padding: 0 6px;
  border-radius: 6px;
}
.jfp-cp2-lead {
  color: #4b5563;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 560px;
  margin: 0;
}
@media (max-width: 880px) {
  .jfp-cp2-hero-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* Contact info cards row */
.jfp-cp2-info-row { padding: 12px 0 36px; background: #fff; }
.jfp-cp2-info-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.jfp-cp2-info-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  padding: 22px 16px;
  border-radius: 14px;
  border: 1px solid #e6eef6;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.jfp-cp2-info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 37, 64, .08);
  border-color: #c8def0;
}
.jfp-cp2-info-icon {
  width: 44px;
  height: 44px;
  background: #e9f1f9;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2c79b3;
  margin-bottom: 12px;
}
.jfp-cp2-info-icon svg { width: 20px; height: 20px; fill: currentColor; }
.jfp-cp2-info-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #6b7280;
  font-weight: 700;
  margin-bottom: 6px;
}
.jfp-cp2-info-value {
  font-size: .92rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.4;
}
.jfp-cp2-info-card-hours .jfp-cp2-info-value { font-size: .85rem; font-weight: 500; }
@media (max-width: 960px) {
  .jfp-cp2-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .jfp-cp2-info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  body#page-contact .jfp-cp2-hero {
    padding: 20px 0 8px;
  }
  body#page-contact .jfp-cp2-hero-grid {
    gap: 0;
  }
  body#page-contact .jfp-cp2-hero-img {
    display: none;
  }
  body#page-contact .jfp-cp2-lead {
    font-size: .98rem;
    line-height: 1.45;
  }
  body#page-contact .jfp-cp2-info-row {
    padding: 10px 0 24px;
  }
  body#page-contact .jfp-cp2-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  body#page-contact .jfp-cp2-info-card {
    border-radius: 10px;
    padding: 14px 10px;
  }
  body#page-contact .jfp-cp2-info-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    margin-bottom: 8px;
  }
  body#page-contact .jfp-cp2-info-icon svg {
    width: 16px;
    height: 16px;
  }
  body#page-contact .jfp-cp2-info-label {
    font-size: .65rem;
    letter-spacing: .08em;
    margin-bottom: 4px;
  }
  body#page-contact .jfp-cp2-info-value {
    font-size: .82rem;
    line-height: 1.3;
  }
  body#page-contact .jfp-cp2-info-card[href*="maps.app.goo.gl"],
  body#page-contact .jfp-cp2-info-card-hours {
    grid-column: 1 / -1;
  }
}

/* Form + Map side-by-side. The Jotform iframe self-reports its own
   height via postMessage, so we don't cap it — let the form grow to
   show every field. The map sticks to the top of its column so it
   remains visible while the form is taller. */
.jfp-cp2-formap { padding: 36px 0 48px; background: #f6f9fc; }
.jfp-cp2-formap-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.jfp-cp2-formap-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.jfp-cp2-form-heading { text-align: left; margin-bottom: 14px; }
.jfp-cp2-form-heading h2.jfp-heading-title {
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  color: #2c79b3;
  margin: 0 0 6px;
}
.jfp-cp2-form-heading p {
  margin: 0;
  color: #4b5563;
  font-size: .92rem;
}
.jfp-cp2-form-card {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 6px 18px rgba(15, 37, 64, .06);
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 540px;
  box-sizing: border-box;
}
.jfp-cp2-field { display: flex; flex-direction: column; }
.jfp-cp2-field-grow { flex: 1; min-height: 0; }
.jfp-cp2-field-grow label,
.jfp-cp2-field-grow textarea { flex: 1; min-height: 0; }
.jfp-cp2-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.jfp-cp2-field label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .9rem;
  color: #1f2937;
}
.jfp-cp2-field-label {
  font-size: .8rem;
  font-weight: 600;
  color: #4b5563;
  letter-spacing: .02em;
}
.jfp-cp2-form-card input,
.jfp-cp2-form-card textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d6e0ea;
  border-radius: 10px;
  background: #fbfcfe;
  font: inherit;
  color: #1f2937;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  box-sizing: border-box;
}
.jfp-cp2-form-card textarea { resize: none; height: 100%; min-height: 0; }
.jfp-cp2-form-card input:focus,
.jfp-cp2-form-card textarea:focus {
  outline: none;
  border-color: #2c79b3;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(44, 121, 179, .15);
}
.jfp-cp2-form-card input:invalid:not(:placeholder-shown),
.jfp-cp2-form-card textarea:invalid:not(:placeholder-shown) {
  border-color: #d99090;
}
.jfp-cp2-form-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.jfp-cp2-submit {
  background: #2c79b3;
  color: #fff;
  border: 0;
  padding: 11px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.jfp-cp2-submit:hover {
  background: #235f8d;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(44, 121, 179, .25);
}
.jfp-cp2-submit:active { transform: translateY(0); }
.jfp-cp2-form-note {
  margin: 0;
  color: #6b7280;
  font-size: .82rem;
  line-height: 1.4;
  flex: 1;
  min-width: 180px;
}
.jfp-cp2-form-note a { color: #2c79b3; font-weight: 600; text-decoration: none; }
.jfp-cp2-form-note a:hover { text-decoration: underline; }

/* The map gets its own column. Sticky-top keeps it pinned while the
   user scrolls through the (potentially taller) form on the left. */
.jfp-cp2-formap-col-map {
  position: sticky;
  top: 100px;
}
.jfp-cp2-map {
  height: 540px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(15, 37, 64, .08);
}
.jfp-cp2-map iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 880px) {
  .jfp-cp2-formap-grid { grid-template-columns: 1fr; gap: 32px; }
  .jfp-cp2-formap-col-map { position: static; }
  .jfp-cp2-map { height: 360px; }
}

.jfp-cp2-areas {
  padding: 28px 0 56px;
  background: #f6f9fc;
  text-align: center;
}
.jfp-cp2-areas p {
  max-width: 820px;
  margin: 0 auto;
  color: #6b7280;
  font-size: .92rem;
  line-height: 1.55;
}

/* ---- (legacy v1 styles kept below for any other page using them) --- */
.jfp-cp-wrap { max-width: 1240px; margin: 0 auto; }
.jfp-cp-hero {
  background: linear-gradient(135deg, #2c79b3 0%, #1b5b8d 100%);
  color: #fff;
  padding: 96px 24px 80px;
  position: relative;
  overflow: hidden;
}
.jfp-cp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.10), transparent 55%);
  pointer-events: none;
}
.jfp-cp-eyebrow {
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .12);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.jfp-cp-title {
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  margin: 0 0 14px;
  line-height: 1.1;
  font-weight: 500;
  position: relative;
  z-index: 1;
}
.jfp-cp-lead {
  font-size: 1.1rem;
  margin: 0 0 28px;
  max-width: 720px;
  opacity: .92;
  line-height: 1.55;
  position: relative;
  z-index: 1;
}
.jfp-cp-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.jfp-cp-btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.jfp-cp-btn-primary {
  background: #fff;
  color: #2c79b3;
}
.jfp-cp-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .15);
}
.jfp-cp-btn-ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .6);
}
.jfp-cp-btn-ghost:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
}

.jfp-cp-body {
  background: #f6f9fc;
  padding: 72px 24px;
}
.jfp-cp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.jfp-cp-form {
  background: #fff;
  padding: 36px;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(15, 37, 64, .08);
}
.jfp-cp-form h2 {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.8rem;
  margin: 0 0 8px;
  color: #2c79b3;
}
.jfp-cp-form > p {
  margin: 0 0 24px;
  color: #4b5563;
  line-height: 1.55;
}
/* Jotform iframe constraints so it fills the card nicely. */
.jfp-cp-form .jfp-shortcode iframe,
.jfp-cp-form iframe {
  width: 100% !important;
  border: 0;
  min-height: 600px;
}

.jfp-cp-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jfp-cp-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fff;
  padding: 18px 20px;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 37, 64, .06);
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.jfp-cp-card-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 37, 64, .10);
}
.jfp-cp-card-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: #e9f1f9;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2c79b3;
}
.jfp-cp-card-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.jfp-cp-card-primary {
  background: linear-gradient(135deg, #2c79b3, #1b5b8d);
  color: #fff;
}
.jfp-cp-card-primary .jfp-cp-card-icon {
  background: rgba(255, 255, 255, .15);
  color: #fff;
}
.jfp-cp-card-primary .jfp-cp-card-label { color: rgba(255, 255, 255, .85); }
.jfp-cp-card-primary .jfp-cp-card-value {
  color: #fff;
  font-size: 1.3rem;
}
.jfp-cp-card-content { flex: 1; min-width: 0; }
.jfp-cp-card-content-full { width: 100%; }
.jfp-cp-card-label {
  display: block;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6b7280;
  margin-bottom: 4px;
  font-weight: 600;
}
.jfp-cp-card-value {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  text-decoration: none;
  line-height: 1.4;
  word-wrap: break-word;
}
a.jfp-cp-card-value:hover,
.jfp-cp-card-link:hover .jfp-cp-card-value { color: #2c79b3; }
.jfp-cp-hours-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: .92rem;
}
.jfp-cp-hours-list li {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid #f0f3f7;
}
.jfp-cp-hours-list li:last-child { border-bottom: none; }
.jfp-cp-hours-list li > span:first-child { color: #4b5563; font-weight: 500; }
.jfp-cp-hours-list li > span:last-child { color: #1f2937; font-weight: 600; }
.jfp-cp-closed { color: #c0392b !important; }

.jfp-cp-card-emergency {
  background: #fff5f4;
  border: 1px solid #f5d6d2;
}
.jfp-cp-card-emergency .jfp-cp-card-icon {
  background: #c0392b;
  color: #fff;
}
.jfp-cp-card-emergency .jfp-cp-card-label { color: #c0392b; }
.jfp-cp-card-emergency .jfp-cp-card-value { color: #c0392b; }
.jfp-cp-card-emergency:hover {
  background: #ffeae7;
}

.jfp-cp-map {
  height: 460px;
  overflow: hidden;
  background: #eef2f7;
}
.jfp-cp-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.jfp-cp-areas {
  padding: 48px 24px 72px;
  text-align: center;
  background: #fff;
}
.jfp-cp-areas p {
  max-width: 820px;
  margin: 0 auto;
  color: #4b5563;
  font-size: 1rem;
  line-height: 1.6;
}
@media (max-width: 960px) {
  .jfp-cp-grid { grid-template-columns: 1fr; }
  .jfp-cp-form { padding: 28px 20px; }
}
@media (max-width: 520px) {
  .jfp-cp-hero { padding: 64px 20px 56px; }
  .jfp-cp-body { padding: 48px 20px; }
}

/* ---- Homepage Contact section --------------------------------------- */
.jfp-contact-section {
  background: #f6f9fc;
  padding: 80px 24px;
  color: #1f2937;
}
.jfp-contact-wrap {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: stretch;
}
.jfp-contact-info h2 {
  font-family: "EB Garamond", Georgia, serif;
  color: #2c79b3;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  margin: 0 0 12px;
  line-height: 1.15;
}
.jfp-contact-lead {
  font-size: 1.05rem;
  margin: 0 0 32px;
  color: #4b5563;
  line-height: 1.55;
}
.jfp-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 32px;
  margin-bottom: 32px;
}
.jfp-contact-item h4 {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
  color: #2c79b3;
  margin: 0 0 6px;
  font-weight: 700;
}
.jfp-contact-item a {
  color: #1f2937;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.45;
}
.jfp-contact-item a:hover { color: #2c79b3; }
.jfp-contact-hours {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .98rem;
  line-height: 1.5;
  color: #1f2937;
}
.jfp-contact-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.jfp-contact-btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  font-size: .95rem;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.jfp-contact-btn-primary {
  background: #2c79b3;
  color: #fff;
}
.jfp-contact-btn-primary:hover {
  background: #235f8d;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(44, 121, 179, .25);
}
.jfp-contact-btn-secondary {
  border: 2px solid #2c79b3;
  color: #2c79b3;
  background: transparent;
}
.jfp-contact-btn-secondary:hover {
  background: #2c79b3;
  color: #fff;
}
.jfp-contact-map {
  position: relative;
  min-height: 380px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
}
.jfp-contact-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 880px) {
  .jfp-contact-section { padding: 56px 20px; }
  .jfp-contact-wrap { grid-template-columns: 1fr; }
  .jfp-contact-map { min-height: 320px; }
}
@media (max-width: 520px) {
  .jfp-contact-grid { grid-template-columns: 1fr; }
}

/* ---- Site footer ----------------------------------------------------- */
.jfp-site-footer {
  background: #0f2540;
  color: #c8d4e3;
  padding: 64px 24px 0;
  font-size: .95rem;
}
.jfp-footer-main {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 48px;
}
.jfp-footer-brand img {
  width: 180px;
  height: auto;
  display: block;
  margin-bottom: 18px;
  filter: brightness(0) invert(1);
}
.jfp-footer-brand p {
  margin: 0 0 20px;
  line-height: 1.55;
  color: #a8b6c9;
  max-width: 320px;
}
.jfp-footer-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px;
}
.jfp-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.jfp-footer-social a:hover {
  background: #2c79b3;
  transform: translateY(-2px);
}
.jfp-footer-social svg { width: 16px; height: 16px; fill: currentColor; }
.jfp-footer-col h4 {
  color: #fff;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 0 18px;
  font-weight: 700;
}
.jfp-footer-col ul,
.jfp-footer-col address {
  list-style: none;
  margin: 0;
  padding: 0;
  font-style: normal;
  line-height: 1.85;
}
.jfp-footer-col a {
  color: #c8d4e3;
  text-decoration: none;
  transition: color .15s ease;
}
.jfp-footer-col a:hover { color: #fff; }

/* Payment-options column: real Trupanion + Scratch brand marks sit on
   white pills so their colors stay readable against the dark navy
   footer. No invert filter — the official wordmarks lose recognition
   when recolored. */
.jfp-footer-payments p {
  margin: 0 0 14px;
  line-height: 1.55;
  color: #a8b6c9;
}
.jfp-footer-payments a {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 9999px;
  padding: 10px 22px;
  margin: 0 0 12px;
  width: 100%;
  max-width: 260px;
  height: 56px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
  transition: transform .15s ease, box-shadow .15s ease;
}
.jfp-footer-payments a:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
.jfp-footer-payments img {
  height: 30px;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
}

.jfp-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 22px 0;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: .85rem;
  color: #8a99ad;
}
.jfp-footer-legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.jfp-footer-legal a {
  color: #8a99ad;
  text-decoration: none;
}
.jfp-footer-legal a:hover { color: #fff; }
.jfp-footer-copy { margin: 0; }
.jfp-footer-credit { margin: 0; }
.jfp-footer-credit a {
  color: #c8d4e3;
  text-decoration: none;
  font-weight: 600;
}
.jfp-footer-credit a:hover { color: #fff; }
@media (max-width: 880px) {
  .jfp-site-footer { padding: 48px 20px 0; }
  .jfp-footer-main { grid-template-columns: 1fr 1fr; gap: 32px; }
  .jfp-footer-bottom { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .jfp-footer-main { grid-template-columns: 1fr; }
}

/* ---- Elementor background video positioning -------------------------- */
.jfp-bgvideo-container {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.jfp-bgvideo {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  transform: translate(-50%, -50%);
}
/* Any e-con with a video background needs relative position to anchor it. */
[data-settings*='"background_background":"video"'] {
  position: relative;
}

/* ─── Services testimonial carousel: vertically align arrows with the cards.
   Without these rules the prev/next buttons sit ~41px below the card center
   because (a) the bullet-pagination top-offset rule in jfp-bundle.css loses
   the cascade to an equally-specific later rule, (b) the empty
   .jfp-testimonial__footer contains whitespace so :empty doesn't match its
   25px margin-top, and (c) stretched slides leave shorter cards biased to
   the top. */

.jfp-widget-testimonial-carousel .jfp-testimonial__footer {
  display: none;
}

.jfp-widget-testimonial-carousel .swiper-slide > .jfp-testimonial {
  height: 100%;
}
.jfp-widget-testimonial-carousel .jfp-testimonial {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.jfp-widget-testimonial-carousel.jfp-pagination-type-bullets .jfp-swiper-button-prev,
.jfp-widget-testimonial-carousel.jfp-pagination-type-bullets .jfp-swiper-button-next {
  top: calc(50% - 20px) !important;
}

/* Strip the white-circle background + drop-shadow from the testimonial
   carousel arrows so only the chevron glyph itself shows. */
.jfp-widget-testimonial-carousel .jfp-swiper-button-prev,
.jfp-widget-testimonial-carousel .jfp-swiper-button-next {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Move the prev/next arrows OUTSIDE the card boxes. Give the carousel side
   gutters (the slide track shrinks to the inner area, since .jfp-main-swiper
   fills the padded box) and drop the arrows into those gutters. !important
   beats the generic `.jfp-el .swiper~.jfp-swiper-button-{prev,next}{left/right:10px}`
   rule in jfp-bundle.css, which otherwise pins them over the first/last card. */
.jfp-widget-testimonial-carousel .jfp-swiper {
  padding-left: 48px;
  padding-right: 48px;
}
.jfp-widget-testimonial-carousel .jfp-swiper-button-prev {
  left: 4px !important;
  right: auto !important;
}
.jfp-widget-testimonial-carousel .jfp-swiper-button-next {
  right: 4px !important;
  left: auto !important;
}

/* Shrink the "Spanish-speaking community" image column on the homepage —
   used to share the row 50/50 with its copy; now ~38% so the photo is
   noticeably smaller and the text gets more room. Stacks normally on
   mobile (parent already wraps under 768 px). */
@media (min-width: 768px) {
  .jfp-el.jfp-el-095960a {
    flex: 0 0 38%;
    max-width: 38%;
  }
  .jfp-el.jfp-el-5b2cebb {
    flex: 1 1 auto;
  }
}

/* On phones the services row's 700px min-height (from the Elementor bundle on
   .jfp-el-8be28c0) inflated this empty background-image column and cropped the
   photo. Let the section size to its content and give the column the image's
   true 512x750 ratio so the whole photo shows at its natural proportions —
   no stretching, no cropping, no letterbox bars. */
@media (max-width: 767px) {
  .jfp-el.jfp-el-8be28c0 { min-height: 0 !important; }
  .jfp-el.jfp-el-095960a {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 512 / 750;
    min-height: 0;
    background-size: cover;
    background-position: center center;
  }
}

/* ─── Blog search (replaces the dead Ajax Search Lite WP widget).
   Selectors include `.jfp-blog-search` twice to beat the WP/Astra base
   `input[type="search"]` rule that ships with the rest of the theme. */
.jfp-blog-search {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
}
.jfp-blog-search input.jfp-blog-search-input,
.jfp-blog-search input[type="search"],
input.jfp-blog-search-input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  border: 1px solid #d6e0ea;
  border-radius: 999px;
  background: #fbfcfe;
  font: inherit;
  color: #1f2937;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.jfp-blog-search input.jfp-blog-search-input:focus,
.jfp-blog-search input[type="search"]:focus,
input.jfp-blog-search-input:focus {
  outline: none;
  border-color: #2c79b3;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(44, 121, 179, .15);
}
.jfp-blog-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  fill: #6b7280;
  pointer-events: none;
}
.jfp-blog-search-results {
  list-style: none;
  margin: 6px 0 0;
  padding: 6px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #d6e0ea;
  border-radius: 12px;
  box-shadow: 0 14px 28px rgba(15, 37, 64, .12);
  max-height: 60vh;
  overflow-y: auto;
  z-index: 10;
}
.jfp-blog-search-results[hidden] { display: none; }
.jfp-blog-search-results li {
  border-radius: 8px;
}
.jfp-blog-search-results li.is-active,
.jfp-blog-search-results li:hover {
  background: rgba(44, 121, 179, .08);
}
.jfp-blog-search-results a {
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
}
.jfp-blog-search-results strong {
  display: block;
  color: #1f2937;
  font-weight: 600;
  margin-bottom: 2px;
}
.jfp-blog-search-results span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #6b7280;
  font-size: .85rem;
  line-height: 1.4;
}
.jfp-blog-search-empty {
  padding: 12px;
  color: #6b7280;
  font-size: .9rem;
}

/* ─── Accessibility widget (self-injected via initA11yWidget in jfp.js).
   Launcher is a floating button bottom-left; panel is a small card that
   pops up above it. Toggling options adds classes to <html> — the actual
   effect rules live in this block (text scale, high contrast, etc.). */

#jfp-a11y-launcher {
  position: fixed;
  left: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: #2c79b3;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9998;
  box-shadow: 0 10px 22px rgba(15, 37, 64, .25), inset 0 0 0 2px rgba(255, 255, 255, .92);
  transition: transform .15s ease, background .15s ease;
}
#jfp-a11y-launcher:hover { background: #235f8d; transform: translateY(-2px); }
#jfp-a11y-launcher:focus-visible { outline: 3px solid #ffd24a; outline-offset: 2px; }

/* ---- "Leave a Review" item in the desktop top contact bar ------------
   Gold 5-star cluster + link, matching the inline icon-list items. */
.jfp-topbar-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-right: 4px;
}
.jfp-topbar-star { width: 13px; height: 13px; display: block; fill: #fbbc04 !important; }
.jfp-topbar-review > a { display: inline-flex; align-items: center; white-space: nowrap; }
/* Spread the five items evenly across the full boxed width, on a single line
   (the bundle sets the inline icon-list to flex-wrap:wrap, which pushed the
   review item to a 2nd row). The wrapper elements shrink-wrap by default, so
   force them to full width — otherwise space-between has no room to distribute. */
.jfp-el-e4cc327 .jfp-widget-icon-list,
.jfp-el-e4cc327 .jfp-widget-body { width: 100%; }
.jfp-el-e4cc327 .jfp-inline-items.jfp-icon-list-items {
  width: 100%;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  gap: 0;
}
/* Drop the per-item side margins (space-between now provides the gaps) and nudge
   the label size 18px -> 16px. Together these cut total width ~1130px -> ~895px,
   so all five fit with edge gutters down to the 1025px (tablet) breakpoint where
   the bar hides — no more clipping of the phone (left) or review (right) items. */
.jfp-el-e4cc327 .jfp-inline-item { margin-left: 0 !important; margin-right: 0 !important; }
.jfp-el-e4cc327 .jfp-icon-list-text { white-space: nowrap; font-size: 16px; }
/* Breathing room at the bar edges so the first/last items never sit flush
   against (or clip past) the viewport edge; scales with width. */
.jfp-el-e4cc327 .jfp-con-inner { padding-inline: clamp(20px, 3vw, 48px); box-sizing: border-box; }

/* ---- Skip-to-content link --------------------------------------------
   Hidden until a keyboard user Tabs to it (the base .screen-reader-text /
   .skip-link rules clip it off-screen). On focus, reveal it as a branded
   blue pill at the top-left instead of the default Astra gray box. */
a.skip-link.screen-reader-text:focus {
  /* The bundle ships several !important `.screen-reader-text` rules (clip,
     position, top, color) — use !important on the visual props so the branded
     pill always wins, not the default Astra gray box. */
  position: fixed !important;
  left: 16px !important;
  top: 16px !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  margin: 0 !important;
  z-index: 100001;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 12px 24px !important;
  background: #2c79b3 !important;
  color: #fff !important;
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: .95rem !important;
  line-height: 1;
  letter-spacing: .2px;
  text-decoration: none !important;
  text-transform: none;
  border-radius: 999px !important;
  box-shadow: 0 10px 26px rgba(15, 37, 64, .30) !important;
  outline: 3px solid #ffd24a;
  outline-offset: 2px;
}
a.skip-link.screen-reader-text:focus::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13 5l-1.4 1.4L16.2 11H4v2h12.2l-4.6 4.6L13 19l7-7z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13 5l-1.4 1.4L16.2 11H4v2h12.2l-4.6 4.6L13 19l7-7z'/%3E%3C/svg%3E");
}

#jfp-a11y-panel {
  position: fixed;
  left: 18px;
  bottom: 86px;
  width: 320px;
  max-width: calc(100vw - 36px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15, 37, 64, .22);
  z-index: 9999;
  overflow: hidden;
  font-family: var(--jfp-e-global-typography-text-font-family, "Inter"), system-ui, sans-serif;
  color: #1f2937;
}
#jfp-a11y-panel[hidden] { display: none; }
#jfp-a11y-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #f4f8fb;
  border-bottom: 1px solid #e2e8f0;
}
#jfp-a11y-panel header strong { font-size: 1rem; color: #1f2937; }
#jfp-a11y-close {
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 0 4px;
}
#jfp-a11y-close:hover { color: #1f2937; }

.jfp-a11y-rows {
  padding: 6px 0;
}
.jfp-a11y-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  gap: 12px;
  font-size: .92rem;
}
.jfp-a11y-row > span { color: #374151; }
.jfp-a11y-toggle {
  min-width: 68px;
  padding: 6px 12px;
  border: 1px solid #d6e0ea;
  background: #fbfcfe;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.jfp-a11y-toggle.is-on {
  background: #2c79b3;
  border-color: #2c79b3;
  color: #fff;
}
.jfp-a11y-segments {
  display: inline-flex;
  border: 1px solid #d6e0ea;
  border-radius: 8px;
  overflow: hidden;
}
.jfp-a11y-segments button {
  border: 0;
  background: #fbfcfe;
  padding: 6px 10px;
  font-size: .78rem;
  color: #6b7280;
  cursor: pointer;
  border-right: 1px solid #d6e0ea;
}
.jfp-a11y-segments button:last-child { border-right: 0; }
.jfp-a11y-segments button.is-on { background: #2c79b3; color: #fff; }

#jfp-a11y-panel footer {
  padding: 12px 16px;
  border-top: 1px solid #e2e8f0;
  background: #f9fbfd;
}
#jfp-a11y-reset {
  width: 100%;
  background: transparent;
  border: 1px solid #d6e0ea;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: .85rem;
  font-weight: 600;
  color: #2c79b3;
  cursor: pointer;
}
#jfp-a11y-reset:hover { background: #f4f8fb; }

/* — Effect rules: triggered by classes added on <html> ————————— */

html.jfp-a11y-textscaled body {
  font-size: calc(1em * var(--jfp-a11y-text-scale, 1)) !important;
}
html.jfp-a11y-textscaled body * {
  font-size: inherit !important;
}

html.jfp-a11y-contrast body,
html.jfp-a11y-contrast body * {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}
html.jfp-a11y-contrast body a,
html.jfp-a11y-contrast body button {
  color: #ffd24a !important;
}
html.jfp-a11y-contrast body img,
html.jfp-a11y-contrast body video,
html.jfp-a11y-contrast body svg { filter: brightness(.85) contrast(1.1); }

/* Apply filter to every direct child of body EXCEPT the a11y widget itself.
   Applying it to `body` directly creates a containing block that traps the
   widget's `position: fixed` (CSS spec: a filtered ancestor becomes the
   containing block for fixed descendants), making the launcher disappear. */
html.jfp-a11y-grayscale body > :not(#jfp-a11y-launcher):not(#jfp-a11y-panel) {
  filter: grayscale(1);
}

html.jfp-a11y-underline-links a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

html.jfp-a11y-dyslexia body,
html.jfp-a11y-dyslexia body * {
  font-family: "Atkinson Hyperlegible", "Verdana", "Tahoma", system-ui, sans-serif !important;
  letter-spacing: .02em !important;
  line-height: 1.6 !important;
}

html.jfp-a11y-no-motion *,
html.jfp-a11y-no-motion *::before,
html.jfp-a11y-no-motion *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
  scroll-behavior: auto !important;
}
html.jfp-a11y-no-motion video[autoplay] { display: none !important; }

@media (max-width: 480px) {
  #jfp-a11y-launcher { left: 12px; bottom: 12px; width: 48px; height: 48px; }
  #jfp-a11y-panel { left: 12px; right: 12px; width: auto; bottom: 70px; }
}

/* ─── Tighten the gap between header and the full-bleed hero on the homepage.
   jfp-bundle.css ships `#primary { margin: 4em 0 }` for all pages; the
   hero container also adds 35px of its own padding-top. Together those
   leave ~88px of dead white space between the sticky header and the video.
   Scope this override to pages that actually have the bg-video hero so
   other pages keep their breathing room. */

#primary:has(.jfp-bgvideo-container) { margin-top: 0; }
.jfp-el.jfp-el-e15b36e {
  padding-top: 0;
  min-height: 62vh;
  /* Full-bleed the video hero edge-to-edge so it isn't inset by the page
     container's 20px side padding (which left a pale strip + the video
     peeking at the corners). body has overflow-x:hidden, so 100vw is safe. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ─── Scroll-perf: composite-layer hints for always-visible chrome.
   Pure compositor hint — no layout effect. The earlier version of this
   block also set `transform: translateZ(0)` and `contain: layout style
   paint`, both of which broke the mobile layout (translateZ overrode
   .jfp-bgvideo's centering transform; `contain` isolated section boxes
   from outside layout, mis-positioning the inline mobile hero video
   and shifting the a11y launcher). */
.jfp-stuck,
.jfp-scroll-top,
#jfp-a11y-launcher,
#jfp-a11y-panel {
  will-change: transform;
}

/* ============================================================
   MOBILE QUALITY PASS
   Consolidated mobile fixes: hero re-frame, text wrapping,
   footer pills, slider arrows, button cleanup, hero entrance
   animation, animation safety net. Lives at the end of the
   stylesheet so it wins over earlier rules without !important
   spam.
   ============================================================ */

/* Belt-and-suspenders kill switch for any "icon" pseudo-circles or
   leftover Elementor i-tags inside .jfp-button. The hero CTAs in the
   mobile hero ("Call To Schedule" / "Request an Appointment") had
   small white circles next to the text; this clears them site-wide.
   .jfp-button-icon spans that contain an actual SVG remain visible
   on header-only buttons (phone icon in the desktop nav) — those use
   .jfp-button-icon with a real SVG, which our :has() guard preserves. */
.jfp-button > i:empty,
.jfp-button > .jfp-button-icon:empty,
.jfp-button > .jfp-icon:empty,
.jfp-button-text + i:empty {
  display: none !important;
}
.jfp-button::before,
.jfp-button-text::before {
  content: none !important;
}
/* Suppress the iOS Safari blue tap-highlight rectangle that can read as
   a translucent "circle" on rounded buttons. */
.jfp-button,
a.jfp-button {
  -webkit-tap-highlight-color: transparent;
}

/* --- Mobile hero: match the desktop hero exactly ---
   Full-bleed corgi video, centered white headline with a thin blue
   underline bar, white subhead, side-by-side CTAs (one filled green,
   one outlined white). No heavy gradient — just the video with text on
   top. Matches the desktop look the user picked as the target. */
@media (max-width: 880px) {
  .jfp-el.jfp-el-b6f026e {
    position: relative;
    min-height: 0;
    overflow: hidden;
    padding: 0 !important;
    background: #0b1d2f url("/assets/media/2025/02/corgi-hero-poster.jpg") center/cover no-repeat;
    /* Break out of any parent padding so the hero spans the full viewport. */
    width: 100vw;
    margin: 0 0 0 calc(-50vw + 50%) !important;
    border-radius: 0;
  }
  .jfp-el.jfp-el-b6f026e > .jfp-con-inner,
  .jfp-el.jfp-el-b6f026e .jfp-el-de2aec6 {
    position: relative;
    z-index: 2;
    min-height: 0;
    padding: 64px 22px 56px !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  /* The video widget becomes a full-bleed background layer. */
  .jfp-el.jfp-el-b6f026e .jfp-el-4092395 {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .jfp-el.jfp-el-b6f026e .jfp-el-4092395 .jfp-widget-body,
  .jfp-el.jfp-el-b6f026e .e-hosted-video,
  .jfp-el.jfp-el-b6f026e .e-hosted-video.jfp-wrapper {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden;
    background: #0b1d2f;
  }
  .jfp-el.jfp-el-b6f026e .jfp-video,
  .jfp-el.jfp-el-b6f026e video {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block;
    border-radius: 0 !important;
  }
  /* Light darkening so white text reads, but the corgi stays bright. */
  .jfp-el.jfp-el-b6f026e::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(11, 29, 47, .28);
    pointer-events: none;
  }
  /* The empty middle container becomes the BLUE UNDERLINE BAR — a thin
     centered accent between H1 and the subhead, matching desktop. */
  .jfp-el.jfp-el-b6f026e .jfp-el-753d576 {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 12px auto 18px !important;
    min-height: 0 !important;
    border: 0 !important;
    display: block !important;
    width: 140px !important;
    height: 4px !important;
    border-radius: 2px;
    position: relative;
    z-index: 2;
    background-color: #00A6E5 !important;
  }
  /* Hide the duplicate hidden h2 wrapper. */
  .jfp-el.jfp-el-b6f026e .jfp-el-556cfc7 {
    display: none !important;
  }
  /* Text widgets sit above the video, with white type for legibility. */
  .jfp-el.jfp-el-b6f026e .jfp-el-1d53629,
  .jfp-el.jfp-el-b6f026e .jfp-el-d6e02be {
    position: relative;
    z-index: 2;
    margin: 0;
    width: 100%;
  }
  .jfp-el.jfp-el-b6f026e h1.jfp-heading-title {
    color: #ffffff !important;
    font-size: clamp(1.7rem, 7vw, 2.2rem);
    line-height: 1.15;
    margin: 0;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
    font-weight: 600;
    text-align: center;
  }
  .jfp-el.jfp-el-b6f026e h2.jfp-heading-title {
    color: #ffffff !important;
    font-size: clamp(.95rem, 4vw, 1.1rem);
    line-height: 1.5;
    margin: 0 auto 22px;
    font-weight: 400;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
    max-width: 32ch;
    text-align: center;
  }
  /* CTAs: side-by-side rectangular buttons matching desktop hero —
     filled green primary, outlined white secondary. */
  .jfp-el.jfp-el-b6f026e .jfp-widget-button {
    display: inline-block;
    width: auto;
    margin: 0 6px 0 0;
    position: relative;
    z-index: 2;
  }
  .jfp-el.jfp-el-b6f026e .jfp-widget-button:last-of-type { margin-right: 0; }
  .jfp-el.jfp-el-b6f026e .jfp-widget-button .jfp-button-wrapper {
    display: inline-flex;
  }
  .jfp-el.jfp-el-b6f026e .jfp-widget-button .jfp-button {
    width: auto;
    max-width: none;
    padding: 10px 18px !important;
    border-radius: 4px !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease !important;
  }
  /* Primary CTA — filled green */
  .jfp-el.jfp-el-b6f026e .jfp-el-94c9a05 .jfp-button {
    background-color: #6BB14E !important;
    color: #fff !important;
    border: 2px solid #6BB14E !important;
  }
  .jfp-el.jfp-el-b6f026e .jfp-el-94c9a05 .jfp-button:hover,
  .jfp-el.jfp-el-b6f026e .jfp-el-94c9a05 .jfp-button:focus {
    background-color: #5a9c40 !important;
    border-color: #5a9c40 !important;
  }
  /* Secondary CTA — outlined white */
  .jfp-el.jfp-el-b6f026e .jfp-el-f016bc9 .jfp-button {
    background-color: transparent !important;
    color: #fff !important;
    border: 2px solid #fff !important;
  }
  .jfp-el.jfp-el-b6f026e .jfp-el-f016bc9 .jfp-button:hover,
  .jfp-el.jfp-el-b6f026e .jfp-el-f016bc9 .jfp-button:focus {
    background-color: #fff !important;
    color: #2c79b3 !important;
  }
  /* Wrap container for buttons */
  .jfp-el.jfp-el-b6f026e .jfp-el-de2aec6 {
    flex-wrap: wrap;
    gap: 8px 0;
  }
}

/* --- Lighter mobile hero entrance animations ---
   Drop the blur filter (expensive on mobile GPUs) and the spring
   overshoot. Stagger preserved. Scoped to the mobile hero block
   `.jfp-el-b6f026e` so the desktop hero's heavier animations are
   untouched (and already hidden via .jfp-hidden-mobile on mobile). */
@media (max-width: 880px) {
  @keyframes jfp-hero-rise-mobile {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .jfp-el.jfp-el-b6f026e .jfp-heading-title {
    opacity: 0;
    animation: jfp-hero-rise-mobile .55s cubic-bezier(.22, 1, .36, 1) .1s forwards;
    will-change: opacity, transform;
  }
  .jfp-el.jfp-el-b6f026e .jfp-el-d6e02be .jfp-heading-title { animation-delay: .25s; }
  .jfp-el.jfp-el-b6f026e .jfp-widget-button:nth-of-type(1) .jfp-button {
    opacity: 0;
    animation: jfp-hero-rise-mobile .5s cubic-bezier(.22, 1, .36, 1) .4s forwards;
  }
  .jfp-el.jfp-el-b6f026e .jfp-widget-button:nth-of-type(2) .jfp-button {
    opacity: 0;
    animation: jfp-hero-rise-mobile .5s cubic-bezier(.22, 1, .36, 1) .55s forwards;
  }
}

/* --- Single-word text-wrap fixes for service/contact pages --- */
@media (max-width: 520px) {
  /* Allow long words like "Vaccinations" / "Microchipping" /
     "Euthanasia" to soft-break instead of overflowing the column. */
  h1.jfp-heading-title,
  h2.jfp-heading-title,
  h3.jfp-heading-title {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  /* Service-page hero (.jfp-cp2-hero) — was clamp(2rem,4vw,3rem),
     too aggressive on narrow viewports. */
  .jfp-cp2-hero-copy h1.jfp-heading-title {
    font-size: clamp(1.45rem, 5.5vw, 1.8rem);
    line-height: 1.2;
  }
  .jfp-cp2-hero-copy h2.jfp-heading-title {
    font-size: clamp(1.55rem, 6.5vw, 2rem);
    line-height: 1.2;
  }
  .jfp-cp2-hero { padding: 32px 0 20px; }
  .jfp-cp2-wrap { padding: 0 16px; }
  /* Generic service-page hero headings (older non-cp2 layout) — these
     are the giant "Vaccinations" / "Microchipping" headers that wrapped
     mid-word. */
  .jfp-widget-heading h1.jfp-heading-title {
    font-size: clamp(1.6rem, 7vw, 2.1rem) !important;
    line-height: 1.15 !important;
  }
  .jfp-widget-heading h2.jfp-heading-title {
    font-size: clamp(1.3rem, 5.5vw, 1.7rem) !important;
    line-height: 1.25 !important;
  }
  /* Service slider card titles ("Euthanasia", "Surgery", etc.). The
     parent .jfp-heading-title rule sets overflow-wrap: anywhere, which
     makes long words like "Microchipping" break mid-word. For these
     short card titles we never want a mid-word break — they should
     just fit on one line with a small enough font. */
  .swiper-slide .jfp-heading-title,
  .jfp-widget-image-carousel .swiper-slide h3,
  .jfp-widget-image-carousel .swiper-slide h4 {
    font-size: .95rem !important;
    line-height: 1.25 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    white-space: normal !important;
  }
  .swiper-slide p {
    font-size: .9rem;
    line-height: 1.45;
  }
}

/* Very narrow phones — squeeze a touch more. */
@media (max-width: 380px) {
  .jfp-cp2-hero-copy h2.jfp-heading-title { font-size: 1.4rem; }
  .jfp-widget-heading h1.jfp-heading-title { font-size: 1.55rem !important; }
  .jfp-widget-heading h2.jfp-heading-title { font-size: 1.25rem !important; }
  .swiper-slide .jfp-heading-title { font-size: .98rem !important; }
}

/* --- Slim footer payment pills on mobile --- */
@media (max-width: 520px) {
  .jfp-footer-payments a {
    max-width: 200px;
    height: 42px;
    padding: 6px 14px;
    margin: 0 auto 10px;
  }
  .jfp-footer-payments img { height: 22px; }
  /* Payments paragraph copy: tighten too. */
  .jfp-footer-payments p { font-size: .9rem; margin-bottom: 10px; }
}

/* --- Service slider arrows shouldn't squeeze the card --- */
@media (max-width: 520px) {
  .jfp-arrow {
    width: 30px !important;
    height: 30px !important;
  }
  .jfp-arrow.swiper-button-prev { left: -4px !important; }
  .jfp-arrow.swiper-button-next { right: -4px !important; }
  /* Give the slide some inner horizontal padding so the chevrons don't
     overlap the card content. */
  .jfp-widget-image-carousel .swiper-slide,
  .jfp-widget-testimonial-carousel .swiper-slide {
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
  }
  /* The card itself: give text more breathing room. */
  .jfp-widget-image-carousel .swiper-slide .jfp-con,
  .jfp-widget-image-carousel .swiper-slide .jfp-con-boxed {
    padding: 16px 14px !important;
  }
}

/* --- Home "Our Services" carousel: reclaim side padding on phones ---
   When the section stacks (<=767px) the card shows one-per-view, but the
   stacked horizontal padding (column 45px + arrow-gutter 48px + slide + card
   box, each side) crushed that single card down to a ~95px strip with the
   body text wrapping one chunk per line. Trim those paddings so the card uses
   ~75% of the screen (the heading/intro above it also gain width). Scoped to
   the services carousel (.jfp-el-d255db3) so the reviews carousel is untouched. */
@media (max-width: 767px) {
  .jfp-el.jfp-el-5b2cebb { padding-left: 14px !important; padding-right: 14px !important; }
  .jfp-el-d255db3 .jfp-swiper { padding-left: 30px !important; padding-right: 30px !important; }
  .jfp-el-d255db3 .swiper-slide { padding-left: 8px !important; padding-right: 8px !important; }
  .jfp-el-d255db3 .swiper-slide .jfp-con-boxed { padding-left: 16px !important; padding-right: 16px !important; }
}

/* --- Animation safety net ---
   On slower mobile devices, `content-visibility: auto` can defer paint
   long enough that the IntersectionObserver in initFades() fires while
   the section still reports zero height, then unobserves. Our JS now
   skips the unobserve when height is zero AND adds a 2s fallback
   reveal, but this CSS provides a final 1.4s belt-and-suspenders so
   even if JS errors mid-run, the page is never permanently invisible. */
@media (max-width: 880px) {
  @keyframes jfp-anim-init-fallback {
    to { opacity: 1; transform: none; }
  }
  .jfp-anim-init {
    animation: jfp-anim-init-fallback .8s ease 1.4s forwards;
  }
}

/* --- Sticky-header room on mobile so hero isn't behind it --- */
@media (max-width: 880px) {
  /* Pin the navbar to the top of the viewport ALWAYS on mobile (not
     just on scroll). On scroll DOWN we slide it up out of view; on
     scroll UP it slides back into view. initNavAutoHide() toggles
     body.jfp-nav-hidden based on scroll direction. */
  .jfp-el.jfp-el-83f12b8 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9000 !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(15, 37, 64, .08);
    transform: translateZ(0);
    transition: transform .26s cubic-bezier(.22, .8, .25, 1);
    will-change: transform;
  }
  body.jfp-nav-hidden .jfp-el.jfp-el-83f12b8 {
    transform: translate3d(0, -105%, 0);
  }

  /* Disable the shrink-on-scroll animation on mobile. The navbar is
     already position: fixed at the top from page load, so the
     .jfp-stuck class shouldn't change its size — only the auto-hide
     transform animates. Removing the size transitions also removes
     the brief layout shift when initSticky() toggles the class. */
  .jfp-location-header [data-settings*='"sticky"'] > .jfp-con,
  .jfp-location-header [data-settings*='"sticky"'] .jfp-con-inner,
  .jfp-location-header [data-settings*='"sticky"'] .jfp-widget,
  .jfp-location-header [data-settings*='"sticky"'] .jfp-widget-body,
  .jfp-location-header [data-settings*='"sticky"'] .jfp-widget-theme-site-logo img,
  .jfp-location-header [data-settings*='"sticky"'] .jfp-widget-image img,
  .jfp-location-header [data-settings*='"sticky"'] .jfp-menu-item-link,
  .jfp-location-header [data-settings*='"sticky"'] .menu-link,
  .jfp-location-header [data-settings*='"sticky"'] .jfp-widget-button .jfp-button {
    transition: none !important;
  }
  /* Stuck and unstuck states should look the same on mobile — undo any
     padding/size changes from the .jfp-stuck rule. */
  .jfp-el.jfp-el-83f12b8.jfp-stuck,
  body.jfp-scrolled .jfp-stuck {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: 0 !important;
    animation: none !important;
  }

  /* Neutralize every cosmetic size .jfp-stuck would otherwise change on
     mobile. The desktop .jfp-stuck block caps the logo at 44px, trims
     top-level nav-link padding/font-size, shrinks the Book Online
     button, and squeezes the language toggle. On mobile the bar is
     position:fixed full-time, so initSticky() toggling .jfp-stuck just
     produces a visible snap between two sizes whenever the user scrolls
     past the trigger. Lock both unstuck and stuck states to the same
     mobile values so the toggle becomes a visual no-op. */
  .jfp-el.jfp-el-83f12b8 .jfp-widget-theme-site-logo img,
  .jfp-el.jfp-el-83f12b8.jfp-stuck .jfp-widget-theme-site-logo img,
  .jfp-el.jfp-el-83f12b8 .jfp-widget-image img,
  .jfp-el.jfp-el-83f12b8.jfp-stuck .jfp-widget-image img {
    max-height: 56px !important;
    width: auto !important;
    height: auto !important;
  }
  .jfp-el.jfp-el-83f12b8 .jfp-navbar-nav > li > .menu-link,
  .jfp-el.jfp-el-83f12b8.jfp-stuck .jfp-navbar-nav > li > .menu-link,
  .jfp-el.jfp-el-83f12b8 .jfp-navbar-nav > li > .jfp-menu-nav-link,
  .jfp-el.jfp-el-83f12b8.jfp-stuck .jfp-navbar-nav > li > .jfp-menu-nav-link,
  .jfp-el.jfp-el-83f12b8 .jfp-nav-menu > li > .menu-link,
  .jfp-el.jfp-el-83f12b8.jfp-stuck .jfp-nav-menu > li > .menu-link,
  .jfp-el.jfp-el-83f12b8 .jfp-nav-menu > li > .jfp-menu-item-link,
  .jfp-el.jfp-el-83f12b8.jfp-stuck .jfp-nav-menu > li > .jfp-menu-item-link {
    padding: 10px 15px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
  .jfp-el.jfp-el-83f12b8 .jfp-widget-button .jfp-button,
  .jfp-el.jfp-el-83f12b8.jfp-stuck .jfp-widget-button .jfp-button,
  .jfp-el.jfp-el-83f12b8 .jfp-widget-button a,
  .jfp-el.jfp-el-83f12b8.jfp-stuck .jfp-widget-button a {
    padding: 10px 22px !important;
    font-size: .9rem !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
  }
  .jfp-el.jfp-el-83f12b8 .jfp-lang-toggle,
  .jfp-el.jfp-el-83f12b8.jfp-stuck .jfp-lang-toggle {
    padding: 3px !important;
  }
  .jfp-el.jfp-el-83f12b8 .jfp-lang-btn,
  .jfp-el.jfp-el-83f12b8.jfp-stuck .jfp-lang-btn {
    height: 28px !important;
    min-width: 36px !important;
    font-size: .8rem !important;
  }

  /* The Elementor header section keeps generous vertical padding on
     mobile, which makes the spacer that initSticky() inserts reserve
     ~195px of empty space above the hero. Trim the inner padding so
     the spacer matches the visible header height (~110px).
     .jfp-el-83f12b8 is the sticky header section in index.html. */
  .jfp-el.jfp-el-83f12b8,
  .jfp-el.jfp-el-83f12b8 > .jfp-con-inner {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: 0 !important;
  }
  /* The header's inner rows (logo row + nav row) also have stacking
     gap; tighten so the bar feels compact. */
  .jfp-el.jfp-el-83f12b8 .jfp-con-full {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    min-height: 0 !important;
  }
  /* Logo gets a sensible mobile max-width so it doesn't dominate. */
  .jfp-el.jfp-el-83f12b8 .jfp-widget-theme-site-logo img,
  .jfp-el.jfp-el-83f12b8 .jfp-widget-image img {
    max-height: 56px !important;
    width: auto !important;
  }
  /* Reserve room at the top of the page for the fixed navbar so
     content (the hero) starts below it, not under it. The spacer
     inserted by initSticky() reserves space too, so zero IT out
     instead of adding a separate body padding (double-reservation
     was producing a huge white gap above the hero). */
  [data-jfp-sticky-spacer] {
    display: none !important;
    height: 0 !important;
  }
  body.jfp-body { padding-top: var(--jfp-mobile-nav-offset, 130px) !important; }
  html { scroll-padding-top: var(--jfp-mobile-nav-offset, 130px); }
  .jfp-el.jfp-el-b6f026e { margin-top: 0 !important; }
  body:not(#page-home).jfp-body #primary { margin-top: 0 !important; }

  /* Service / about / blog pages: ensure the first piece of content
     (usually a hero image or heading) clears the fixed navbar with
     breathing room. The body padding-top reserves space, but some
     pages have a wrapper or section with margin-top: 0 that pulls
     content back up — explicitly push the first article child down. */
  body:not(#page-home) #primary .entry-content > .jfp-root > .jfp-el:first-of-type,
  body:not(#page-home) #primary > main > article > .entry-content > .jfp-root > .jfp-el:first-of-type,
  body:not(#page-home) #primary > article > .entry-content > .jfp-root > .jfp-el:first-of-type,
  body:not(#page-home) #primary .jfp-root > .jfp-el:first-of-type,
  body:not(#page-home) #primary > article > .jfp-root > .jfp-el:first-of-type,
  body[id^="page-pet-"] #primary .entry-content > .jfp-root > .jfp-el-140d722,
  body[id^="page-pet-"] #primary #main > article > .entry-content > .jfp-root > .jfp-el-140d722,
  body:not(#page-home) .jfp-cp2-hero,
  body:not(#page-home) .jfp-cp-hero {
    margin-top: 24px !important;
    margin-block-start: 24px !important;
  }
  /* Very small phones — give a touch more clearance. */
  @media (max-width: 380px) {
    body.jfp-body { padding-top: var(--jfp-mobile-nav-offset, 124px) !important; }
    html { scroll-padding-top: var(--jfp-mobile-nav-offset, 124px); }
  }
}

/* --- Dr. Rennia Wint section: cap oversize text on mobile ---
   The "Owner and Veterinarian" text and the "Get to Know" headline
   render huge from the Elementor inherited typography. Cap them so
   the section fits cleanly on mobile. */
@media (max-width: 520px) {
  /* Section headings get a sensible mobile cap. */
  .jfp-widget-heading h2.jfp-heading-title,
  .jfp-widget-heading h3.jfp-heading-title {
    font-size: clamp(1.4rem, 5.5vw, 1.7rem) !important;
    line-height: 1.25 !important;
  }
  /* "Owner and Veterinarian" is a <p> with inherited large font. Cap
     paragraphs inside heading-adjacent text editors. */
  .jfp-widget-text-editor p {
    font-size: clamp(.95rem, 4vw, 1.05rem) !important;
    line-height: 1.55 !important;
  }
}

/* --- A11y widget clearance from footer watermark ---
   The round accessibility button sits at bottom-left (#jfp-a11y-launcher).
   In the footer, the legal/copyright row was being painted under it.
   Add bottom padding to the footer-bottom row so it always clears the
   widget. */
@media (max-width: 880px) {
  .jfp-footer-bottom {
    padding-bottom: 80px !important;
  }
}

/* ---- Customer reviews carousel ("What Pet Parents Are Saying") -------
   Reuses the .jfp-widget-testimonial-carousel engine (assets/jfp.js
   initCarousels) for layout / autoplay / loop / gutter arrows, but the
   CARD markup uses its own `jfp-review-*` classes so it does NOT inherit
   the services-carousel card rules (the min-height:480px on .jfp-con-boxed
   at ~L580 and the .jfp-heading-title clamp at ~L596). A `jfp-reviews-
   carousel` modifier on the widget lets us defensively neutralise those.
   Review text is shown in full (no line-clamp): within one view the flex
   row's default align-items:stretch keeps the visible cards equal height;
   height varies between views, which is accepted. */
.jfp-reviews-section {
  background: #f6f9fc;
  padding: 64px 0 72px;
}
.jfp-reviews-section > .jfp-con-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  box-sizing: border-box;
}

/* Heading + subtitle */
.jfp-reviews-headingwrap { text-align: center; margin-bottom: 36px; }
.jfp-reviews-title {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  color: #2c79b3;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 10px;
}
.jfp-reviews-subtitle {
  font-family: "Quicksand", sans-serif;
  color: #4b5563;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 620px;
}

/* Defensive: neutralise the inherited services-carousel card min-height in
   case anything inside a review slide ever matches .jfp-con-boxed. */
@media (min-width: 768px) {
  .jfp-reviews-carousel .swiper-slide .jfp-con-boxed { min-height: 0; }
}

/* Card */
.jfp-reviews-carousel .swiper-slide { display: flex; height: auto; }
.jfp-review-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e6eef5;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 37, 64, .06);
  padding: 26px 24px 22px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.jfp-review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15, 37, 64, .12);
}

/* Card head: avatar + name/stars + Google glyph */
.jfp-review-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.jfp-review-avatar {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--jfp-avatar-bg, #2c79b3);
  color: #fff;
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 46px;
  text-align: center;
}
.jfp-review-meta { flex: 1 1 auto; min-width: 0; }
.jfp-review-name {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  color: #1f2937;
  font-size: 1.05rem;
  line-height: 1.2;
  margin: 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jfp-review-stars { display: flex; gap: 2px; }
.jfp-review-star { width: 16px; height: 16px; fill: #fbbc04; display: block; }
.jfp-review-google { flex: 0 0 auto; width: 18px; height: 18px; align-self: flex-start; }

/* Review body — shown in full */
.jfp-review-text {
  font-family: "Quicksand", sans-serif;
  color: #4b5563;
  font-size: .98rem;
  line-height: 1.6;
  margin: 0;
}

/* Section CTA button row */
.jfp-reviews-cta { text-align: center; margin-top: 44px; }
.jfp-reviews-cta-text {
  font-family: "Quicksand", sans-serif;
  color: #4b5563;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.5;
  margin: 0 auto 18px;
  max-width: 560px;
}
.jfp-reviews-cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
/* Match the outline button's box height (it carries a 2px border). */
.jfp-reviews-cta .jfp-contact-btn-primary { border: 2px solid transparent; }

/* Mobile: single card, tighter section padding */
@media (max-width: 767px) {
  .jfp-reviews-section { padding: 48px 0 56px; }
}