/*
Theme Name:   Jeffcoat Pest Child
Theme URI:    https://jeffcoatpest.com
Description:  Astra child theme for Jeffcoat Pest and Home Services. Built for WPBakery Page Builder. Houses all custom CSS, the utility header bar, and the sticky mobile call bar.
Author:       Cut Throat Marketing
Author URI:   https://cutthroatmarketing.com
Template:     astra
Version:      1.2.2
Text Domain:  jeffcoat-child
*/


/* ============================================================
   TABLE OF CONTENTS
   1.  Design tokens
   2.  Typography (Source Serif 4 + Source Sans 3)
   3.  Utility header bar + main navigation
   4.  Hero section
   5.  WPBakery full-width rows (root cause) .. ISSUE #1
   5B. Wave dividers (inline SVG) — .jc-wave .. ISSUE #1
   6.  Raised card system (shared device)
   7.  Pest cards / hover blurbs  ............ ENHANCEMENT
   8.  Choose row
   9.  Contact section
   10. Careers form
   11. Image carousel / gallery  ............. ISSUE #2
   12. Monthly plan cards (.jpc-* HTML) ...... ISSUE #3
   13. Commercial list (.commercial-pest-list) ISSUE #4
   14. Blog archive  ......................... ENHANCEMENT
   14B.Gravity Forms
   15. Sticky mobile call bar
   15B.Footer
   16. Scroll reveal utilities
   17. Accessibility + reduced motion
   18. Breakpoint: 1199px
   19. Breakpoint: 992px
   20. Breakpoint: 767px
   ============================================================ */


/* ===== 1. DESIGN TOKENS =====
   Values marked "brand" come straight off the Jeffcoat brand sheet.
   Values marked "derived" are not on the sheet — they are hover states,
   border tones and text greys generated from the brand colors because
   the sheet does not specify them.

   NOTE ON --jc-action: there is no accent color anywhere on the brand
   sheet. All eight swatches are navy, blue-grey or silver. The teal
   below is what the live site already uses; it is not brand-approved.
   It is defined once here so the whole site can be re-pointed by
   changing this single line. See the handover notes. */
:root {
  /* Brand — blues */
  --jc-navy:        #002561;  /* brand, PMS 288 */
  --jc-blue:        #1c4d7f;  /* brand */
  --jc-blue-alt:    #224f81;  /* brand */
  --jc-blue-soft:   #6d86a8;  /* brand */
  --jc-navy-deep:   #001a45;  /* derived — navy hover/press state */

  /* Brand — neutrals */
  --jc-silver:      #afbcba;  /* brand, PMS 5507 */
  --jc-gray:        #afbac2;  /* brand */
  --jc-navy-tint:   #e8ebee;  /* brand — icon discs, subtle fills */
  --jc-band:        #e8ebee;  /* brand — section and nav bands */
  --jc-offwhite:    #fcfdfd;  /* brand */
  --jc-white:       #ffffff;
  --jc-line:        #d5dce4;  /* derived — visible border on both white and band */
  --jc-ink:         #16233a;  /* derived — headings on light */
  --jc-body:        #3d4757;  /* derived — body copy */

  /* Action color — NOT on the brand sheet, but this IS the value the site
     actually uses (confirmed from the live pricing block). Change here to
     change everywhere.
     Accessibility note: #228DAA gives 3.85:1 against white, which fails
     WCAG AA for text under 18.66px bold. --jc-action-dark is 5.57:1 and
     passes. See the handover notes. */
  --jc-action:      #228DAA;
  --jc-action-dark: #1b7189;  /* derived hover — AA compliant */

  /* Aliases kept so existing rules resolve */
  --jc-teal:        var(--jc-action);
  --jc-teal-dark:   var(--jc-action-dark);

  --jc-star:        #f5a623;  /* derived — Google star gold */

  --jc-radius:      10px;
  --jc-radius-lg:   14px;

  --jc-shadow-1:    0 1px 2px rgba(0, 37, 97, .06),
                    0 2px 6px rgba(0, 37, 97, .06);
  --jc-shadow-2:    0 4px 10px rgba(0, 37, 97, .08),
                    0 12px 28px rgba(0, 37, 97, .12);
  --jc-shadow-3:    0 6px 14px rgba(0, 37, 97, .10),
                    0 20px 44px rgba(0, 37, 97, .16);

  --jc-ease:        cubic-bezier(.22, .61, .36, 1);
}


/* ===== 2. TYPOGRAPHY =====
   Source Serif 4 for headings — the brand sheet face, "Source Serif
   Variable Roman". Source Sans 3 for body copy, navigation, forms,
   buttons and metadata.

   These two are siblings, not a found pairing: Adobe built both as part
   of the Source family, so x-heights, stroke weights and proportions
   are already reconciled. The jump from a serif headline to sans body
   copy reads as one voice rather than two.

   Division of labour: the serif speaks, the sans operates. Anything a
   visitor reads gets the serif; anything they click, type into or scan
   gets the sans.

   font-family carries !important because Astra prints its Customizer
   typography as inline CSS with higher specificity. Set Customize >
   Global > Typography to Default so Astra stops loading a third family.
   ============================================================ */
:root {
  --jc-font-display: 'Source Serif 4', 'Source Serif Pro', Georgia,
                     'Times New Roman', serif;
  --jc-font-body:    'Source Sans 3', 'Source Sans Pro', -apple-system,
                     BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
                     Arial, sans-serif;
}

body {
  font-family: var(--jc-font-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- The serif: headings only --- */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.jc-display {
  font-family: var(--jc-font-display) !important;
  font-optical-sizing: auto;
  text-wrap: balance;         /* kills orphaned words in headlines */
}
/* No global heading color here on purpose — the hero, careers form and
   price bars all sit on navy or imagery and need to stay light. */

/* Optical tracking. Serifs need tightening as they scale up; the
   default spacing that works at 20px opens into gaps at 50px. */
h1 { font-weight: 600; letter-spacing: -.017em; }
h2 { font-weight: 600; letter-spacing: -.012em; }
h3 { font-weight: 600; letter-spacing: -.006em; }
h4, h5, h6 { font-weight: 700; letter-spacing: 0; }

/* --- The sans: everything operable --- */
input, select, textarea, button,
label, legend,
.button, .ast-button, .vc_btn3,
.main-header-menu, .main-header-menu a,
.jc-utility-bar, .jc-utility-bar a,
.jc-mobile-bar, .jc-mobile-bar a,
.entry-meta, .entry-meta a,
.ast-taxonomy-container, .ast-taxonomy-container a,
.read-more a, .ast-blog-read-more-btn,
.widget-title,
.commercial-pest-list p,
.plan-price, .plan-cta, .plan-cta a,
.breadcrumbs, .ast-breadcrumbs,
.gform_wrapper, .gform_wrapper * {
  font-family: var(--jc-font-body) !important;
}

/* Reset the tracking the serif rules applied to sans headings */
.widget-title {
  letter-spacing: .04em;
  font-weight: 700;
}

/* Numerals in pricing and ratings should align in a column */
.plan-price,
.jc-utility-bar__rating {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --- Page content type scale --- */
/* Scoped to WPBakery content. Previously these were unscoped
   `h2 {}` rules with !important, which also hit footer headings,
   widget titles and blog card titles.

   Sizes are down slightly from the old sans values (h2 50 -> 46).
   Source Serif sets wider than a humanist sans at the same pixel
   size, so matching the old numbers would have read as a size
   increase rather than a font change. */
.wpb_wrapper h2 {
  font-size: 46px;
  line-height: 1.16;
}
.wpb_wrapper h3 {
  font-size: 26px;
  line-height: 1.28;
}
.wpb_wrapper h4 {
  font-size: 22px;
  line-height: 1.3;
}
.wpb_wrapper p,
.wpb_wrapper li {
  font-size: 17px;
  line-height: 1.65;
  color: var(--jc-body);
}

/* Section intro paragraph directly under an h2 — tightens the gap */
.wpb_wrapper h2 + .wpb_text_column p:first-child {
  margin-top: .5em;
}

/* Lead paragraph: add class "jc-lead" to a section's intro text block */
.jc-lead p {
  font-size: 20px !important;
  line-height: 1.55 !important;
  color: var(--jc-body);
}


/* ============================================================
   3. UTILITY HEADER BAR + MAIN NAVIGATION
   Bar markup is output by functions.php on the astra_header_before
   hook, so this works on free Astra without the Above Header module.
   ============================================================ */
.jc-utility-bar {
  background: var(--jc-navy);
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  line-height: 1.4;
  position: relative;
  z-index: 100;
}
.jc-utility-bar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 9px 20px;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Phone — the primary action for a service business, so it leads */
.jc-utility-bar__phone {
  color: var(--jc-white);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.jc-utility-bar__phone:hover,
.jc-utility-bar__phone:focus {
  color: var(--jc-white);
  text-decoration: underline;
}
.jc-utility-bar__phone svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex: none;
}

/* Review proof block */
.jc-utility-bar__reviews {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  white-space: nowrap;
}
.jc-utility-bar__rating {
  color: var(--jc-white);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.jc-utility-bar__stars {
  color: var(--jc-star);
  letter-spacing: 1px;
  font-size: 13px;
}
.jc-utility-bar__reviews small {
  font-size: 12px;
  font-style: italic;
  opacity: .8;
}

/* Utility links, pushed right */
.jc-utility-bar__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.jc-utility-bar__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 22px;
}
.jc-utility-bar__nav a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  font-size: 14px;
  transition: color .2s var(--jc-ease);
}
.jc-utility-bar__nav a:hover,
.jc-utility-bar__nav a:focus {
  color: var(--jc-white);
}

/* Quote button */
.jc-utility-bar__cta {
  background: var(--jc-teal);
  color: var(--jc-white) !important;
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s var(--jc-ease), transform .2s var(--jc-ease);
}
.jc-utility-bar__cta:hover,
.jc-utility-bar__cta:focus {
  background: var(--jc-teal-dark);
  transform: translateY(-1px);
}

/* --- Main nav bar: applies at both breakpoints --- */
.ast-primary-header-bar,
.site-header .main-header-bar {
  background-color: var(--jc-band) !important;
  border-bottom: 1px solid var(--jc-line);
  box-shadow: none;
}


/* ------------------------------------------------------------------
   DESKTOP NAVIGATION ONLY

   Astra reuses the .main-header-menu class for the mobile off-canvas
   menu. Any bare .main-header-menu rule therefore applies to BOTH the
   desktop dropdown and the mobile accordion — which is how the desktop
   dropdown card ended up floating inside the mobile menu.

   Every decorative desktop rule below is fenced behind
   body:not(.ast-header-break-point). Astra adds .ast-header-break-point
   to <body> when the mobile header takes over.
   ------------------------------------------------------------------ */
body:not(.ast-header-break-point) .main-header-menu > li > a {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--jc-navy);
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
}
body:not(.ast-header-break-point) .main-header-menu > li > a:hover,
body:not(.ast-header-break-point) .main-header-menu > li.current-menu-item > a,
body:not(.ast-header-break-point) .main-header-menu > li.current-menu-ancestor > a {
  color: var(--jc-teal-dark);
}

/* Active/hover underline that grows from the centre */
body:not(.ast-header-break-point) .main-header-menu > li:not(.jc-nav-cta) > a::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  height: 2px;
  background: var(--jc-teal);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s var(--jc-ease);
}
body:not(.ast-header-break-point) .main-header-menu > li:not(.jc-nav-cta):hover > a::after,
body:not(.ast-header-break-point) .main-header-menu > li.current-menu-item > a::after,
body:not(.ast-header-break-point) .main-header-menu > li.current-menu-ancestor > a::after {
  transform: scaleX(1);
}

/* Desktop dropdown card */
body:not(.ast-header-break-point) .main-header-menu .sub-menu {
  border: 1px solid var(--jc-line);
  border-radius: var(--jc-radius);
  box-shadow: var(--jc-shadow-2);
  padding: 6px 0;
  overflow: hidden;
}
body:not(.ast-header-break-point) .main-header-menu .sub-menu a {
  font-size: 14.5px;
  padding: 10px 20px;
  color: var(--jc-body);
}
body:not(.ast-header-break-point) .main-header-menu .sub-menu a:hover {
  background: var(--jc-navy-tint);
  color: var(--jc-navy);
}

/* Optional nav CTA pill. Add class "jc-nav-cta" to a menu item in
   Appearance > Menus. Desktop only — inside the off-canvas menu it
   renders as a normal row. */
body:not(.ast-header-break-point) .main-header-menu > li.jc-nav-cta > a {
  background: var(--jc-teal);
  color: var(--jc-white);
  border-radius: 999px;
  margin: 0 0 0 14px;
  padding: 10px 24px;
  line-height: 1;
  align-self: center;
  transition: background .2s var(--jc-ease);
}
body:not(.ast-header-break-point) .main-header-menu > li.jc-nav-cta > a:hover {
  background: var(--jc-teal-dark);
  color: var(--jc-white);
}


/* ------------------------------------------------------------------
   MOBILE OFF-CANVAS MENU

   Explicit resets so nothing from the desktop dropdown can reappear
   here, plus proper accordion styling and 48px tap targets.

   display / visibility / opacity / transform are deliberately left
   alone — Astra uses those to open and close the accordion, and
   overriding them forces every submenu permanently open.
   ------------------------------------------------------------------ */
body.ast-header-break-point .main-header-menu > li > a {
  font-size: 16px;
  font-weight: 700;
  color: var(--jc-navy);
  padding: 15px 20px;
  min-height: 50px;
  display: flex;
  align-items: center;
  line-height: 1.3;
}

/* Kill the desktop underline outright */
body.ast-header-break-point .main-header-menu > li > a::after,
body.ast-header-break-point .main-header-menu .sub-menu a::after {
  content: none !important;
  display: none !important;
}

/* Row dividers instead of floating cards */
body.ast-header-break-point .main-header-menu > li {
  border-bottom: 1px solid var(--jc-line);
}
body.ast-header-break-point .main-header-menu > li:last-child {
  border-bottom: 0;
}

/* Strip every trace of the desktop dropdown card */
body.ast-header-break-point .main-header-menu .sub-menu {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  background: var(--jc-navy-tint) !important;
}

/* Submenu rows: indented, with a rule showing they belong to the parent */
body.ast-header-break-point .main-header-menu .sub-menu > li {
  border-bottom: 1px solid rgba(0, 37, 97, .07);
}
body.ast-header-break-point .main-header-menu .sub-menu > li:last-child {
  border-bottom: 0;
}
body.ast-header-break-point .main-header-menu .sub-menu a {
  font-size: 15px;
  font-weight: 500;
  color: var(--jc-body);
  padding: 13px 20px 13px 34px;
  min-height: 46px;
  display: flex;
  align-items: center;
  border-left: 3px solid transparent;
}
body.ast-header-break-point .main-header-menu .sub-menu a:hover,
body.ast-header-break-point .main-header-menu .sub-menu .current-menu-item > a {
  background: rgba(0, 37, 97, .05);
  border-left-color: var(--jc-teal);
  color: var(--jc-navy);
}

/* Expand / collapse button: square 50px target, no stray border */
body.ast-header-break-point .main-header-menu .ast-menu-toggle {
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--jc-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.ast-header-break-point .main-header-menu .sub-menu .ast-menu-toggle {
  height: 46px;
}


/* ===== 4. HERO SECTION ===== */
.hero-section {
  padding-top: 175px !important;
  padding-bottom: 175px !important;
}
.hero-section > .vc_row > .vc_col-sm-12 {
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-bottom: 40px !important;
}
.hero-section h1 {
  font-size: 56px !important;
  font-weight: 600 !important;
  line-height: 1.12 !important;
  letter-spacing: -.02em !important;
}

/* Subheadline goes sans on purpose. A serif subhead under a serif
   headline is a lot of serif in one block; the sans gives the h1 room
   to be the loudest thing in the hero. */
.hero-section h2 {
  font-family: var(--jc-font-body) !important;
  font-size: 27px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}


/* ============================================================
   5. WPBAKERY FULL-WIDTH ROWS  —  ISSUE #1 (root cause)

   WPBakery's vcRowBehaviour JavaScript sizes every "Stretch row"
   element by writing inline pixel values onto it. From the inspector on
   this site, every one of them currently reads:

     style="position: relative; left: -5px; width: 647px; max-width: 647px"

   647px is a stale measurement. The JS ran before layout settled — the
   attribute data-vc-full-width-init="true" confirms it ran — and every
   stretched row and section on the page is trapped at that width.

   WHY IT LOOKS LIKE "ONLY THIS SECTION"

   It isn't. Every stretched row is mis-sized. You only *see* it where
   the section has a navy fill, because a white section at 72% of the
   viewport sitting on a white page is invisible, and a navy one is not.
   The waves were never the problem — they were just the only place the
   problem had a colour.

   Opening DevTools fires a resize, WPBakery recalculates, and it
   sometimes lands correctly. That is the "works when I inspect it".

   THE FIX

   Replace the JS's pixel values with viewport units. !important is
   required because these are inline styles, and WPBakery rewrites them
   on every resize — !important wins each time, so the JS becomes
   harmless rather than needing to be disabled.

   left: calc(50% - 50vw) resolves correctly regardless of the
   containing block's width, as long as it is horizontally centred.
   ============================================================ */
[data-vc-full-width] {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  left: calc(50% - 50vw) !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* WPBakery emits this empty spacer after each stretched row. It should
   never contribute height. */
.vc_row-full-width {
  width: 100% !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ============================================================
   5B. INLINE SVG WAVE DIVIDERS  —  .jc-wave

   Use this for the hand-coded <svg> waves.

   With section 5 in place the waves largely take care of themselves: a
   wave inside a genuinely 100vw parent resolves calc(50% - 50vw) to
   zero, so the offset self-neutralises. A wave inside a normal centred
   container still gets pulled out to full bleed. Both cases work
   without special-casing.

   Paste-ready markup is in the README.
   ============================================================ */
/* Guard: 100vw includes the vertical scrollbar, so any full-bleed row is
   a few pixels wider than the visible area. Without this you get a
   phantom horizontal scrollbar on every page. */
html {
  overflow-x: hidden;
}

.jc-wave {
  display: block;
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: -1px;      /* closes the subpixel seam below */
  padding: 0;
  line-height: 0;
  overflow: hidden;
  color: var(--jc-navy);    /* this is the wave colour */
}

/* --- Host element reset  —  .jc-wave-host ---
   WPBakery gives every content element a 35px bottom margin. On a Raw
   HTML or Text Block holding a wave that opens a gap between the wave
   and whatever follows it. The JS tags the wave's containing element so
   the margin can be zeroed without touching anything else in the row. */
.jc-wave-host {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

/* --- Optional row reset  —  .wave-divider ---
   Only needed if the ROW holding the wave has its own vertical padding,
   which would inset the wave from the sections above and below. You can
   equally set the row padding to 0 in WPBakery's Design Options and skip
   this class entirely. */
.wave-divider > .vc_row,
.wave-divider > .vc_row-fluid,
.wave-divider .vc_column-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.wave-divider + .vc_row,
.wave-divider + section {
  margin-top: -1px !important;
}

.jc-wave svg {
  display: block;
  width: 100%;
  /* Scales with the viewport instead of being pinned at 80px, which was
     oversized on phones and undersized on wide monitors. */
  height: clamp(38px, 4.6vw, 92px);
  margin: 0;
  padding: 0;
}

/* fill="currentColor" on the path means the colour is set once, in CSS,
   and every modifier below just changes `color`. */
.jc-wave svg path {
  fill: currentColor;
}

/* --- Direction ---
   rotate(180deg) flips BOTH axes, so it mirrors the wave left-to-right
   as well as top-to-bottom. That is fine for bookending a section, but
   if you want the same silhouette simply turned upside down, use
   .jc-wave--flip instead. */
.jc-wave--flip svg   { transform: scaleY(-1); }
.jc-wave--rotate svg { transform: rotate(180deg); }

/* --- Colour --- */
.jc-wave--white    { color: var(--jc-white); }
.jc-wave--offwhite { color: var(--jc-offwhite); }
.jc-wave--band     { color: var(--jc-band); }
.jc-wave--blue     { color: var(--jc-blue); }

/* --- Height --- */
.jc-wave--short svg { height: clamp(26px, 3vw, 56px); }
.jc-wave--tall svg  { height: clamp(56px, 7vw, 140px); }

/* --- Seam direction ---
   Default tucks under the section below. Use --top when the wave sits
   at the start of a section instead of the end of one. */
.jc-wave--top {
  margin-bottom: 0;
  margin-top: -1px;
}

/* Decorative only — never announce it or let it take focus */
.jc-wave svg,
.jc-wave svg * {
  pointer-events: none;
}


/* ------------------------------------------------------------------
   ZERO-EDIT MODE  —  .jc-wave--auto

   For waves already on the site with inline style attributes. Nothing
   in WPBakery needs touching: assets/js/jeffcoat.js finds every
   svg[preserveAspectRatio="none"] and tags its parent with
   .jc-wave .jc-wave--auto.

   These rules carry !important purely because they compete with inline
   style attributes, which otherwise win.

   Deliberately NOT overridden:
     transform — your inline rotate(180deg) already encodes the
                 direction of each individual wave, so leaving it alone
                 means every existing wave keeps facing the right way.
     fill      — the inline fill:#002561 is already brand navy, so
                 colours stay exactly as they are.
   ------------------------------------------------------------------ */
.jc-wave--auto {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-bottom: -1px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.jc-wave--auto > svg {
  width: 100% !important;
  /* Calibrated so a ~1440px screen lands near 80px, matching the current
     fixed height, while scaling down on phones and up on wide monitors.
     Delete this line to go back to the hard-pinned 80px. */
  height: clamp(40px, 5.6vw, 96px) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Pure-CSS safety net so there is no flash before the JS runs, and so
   this still works if JS fails. Scoped to WPBakery content so it cannot
   leak into the header, footer or forms. */
.wpb_wrapper div:has(> svg[preserveAspectRatio="none"]) {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-bottom: -1px !important;
  overflow: hidden !important;
  line-height: 0 !important;
}
.wpb_wrapper div:has(> svg[preserveAspectRatio="none"]) > svg {
  width: 100% !important;
  height: clamp(40px, 5.6vw, 96px) !important;
}


/* ============================================================
   6. RAISED CARD SYSTEM (shared device)
   One card treatment reused for pest cards, plan cards, service
   lists and blog posts, so the site reads as designed rather than
   as four unrelated sections.
   ============================================================ */
.jc-card {
  position: relative;
  background: var(--jc-white);
  border: 1px solid var(--jc-line);
  border-radius: var(--jc-radius-lg);
  box-shadow: var(--jc-shadow-1);
  overflow: hidden;
  transition: transform .28s var(--jc-ease),
              box-shadow .28s var(--jc-ease),
              border-color .28s var(--jc-ease);
}

/* The signature: a teal edge that draws itself across the top on hover */
.jc-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--jc-teal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--jc-ease);
  z-index: 2;
}
.jc-card:hover,
.jc-card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--jc-shadow-3);
  border-color: transparent;
}
.jc-card:hover::before,
.jc-card:focus-within::before {
  transform: scaleX(1);
}


/* ============================================================
   7. PEST CARDS / HOVER BLURBS  —  ENHANCEMENT
   Two things here. The icon grid (screenshot 6) becomes a grid of
   raised, obviously-clickable tiles. The image overlay cards keep
   their existing behaviour, just refined.
   ============================================================ */

/* --- 7a. Icon tiles ---
   Add "pest-tile-row" to the row, and "pest-tile" to each column. */
.pest-tile-row > .wpb_column {
  margin-bottom: 26px;
}
.pest-tile .vc_column-inner {
  height: 100%;
}
.pest-tile > .vc_column-inner > .wpb_wrapper {
  position: relative;
  height: 100%;
  background: var(--jc-white);
  border: 1px solid var(--jc-line);
  border-radius: var(--jc-radius-lg);
  box-shadow: var(--jc-shadow-1);
  padding: 34px 22px 28px;
  text-align: center;
  overflow: hidden;
  transition: transform .28s var(--jc-ease),
              box-shadow .28s var(--jc-ease),
              border-color .28s var(--jc-ease),
              background-color .28s var(--jc-ease);
}
.pest-tile > .vc_column-inner > .wpb_wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--jc-teal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--jc-ease);
}
.pest-tile:hover > .vc_column-inner > .wpb_wrapper,
.pest-tile:focus-within > .vc_column-inner > .wpb_wrapper {
  transform: translateY(-6px);
  box-shadow: var(--jc-shadow-3);
  border-color: transparent;
}
.pest-tile:hover > .vc_column-inner > .wpb_wrapper::before,
.pest-tile:focus-within > .vc_column-inner > .wpb_wrapper::before {
  transform: scaleX(1);
}

/* Inner element wrappers must stay transparent — they are not cards */
.pest-tile .wpb_single_image > .wpb_wrapper,
.pest-tile .wpb_text_column > .wpb_wrapper,
.pest-tile .wpb_content_element > .wpb_wrapper {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
}

/* Icon sits in a tinted disc — reins in the oversized silhouettes and
   cuts a lot of page height out of the pest grid */
.pest-tile .wpb_single_image {
  margin-bottom: 18px;
}
.pest-tile .wpb_single_image .vc_single_image-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--jc-navy-tint);
  transition: background-color .28s var(--jc-ease),
              transform .28s var(--jc-ease);
}
.pest-tile .wpb_single_image img {
  width: 58px !important;
  height: 58px !important;
  object-fit: contain;
  transition: transform .28s var(--jc-ease);
}
.pest-tile:hover .wpb_single_image .vc_single_image-wrapper {
  background: var(--jc-navy);
}
.pest-tile:hover .wpb_single_image img {
  transform: scale(1.06);
  filter: brightness(0) invert(1);
}

.pest-tile h3,
.pest-tile h4 {
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: -.004em;
  color: var(--jc-navy);
  margin: 0 0 10px;
  line-height: 1.3 !important;
}

/* "See the Details" becomes a directional link, not a bare underline */
.pest-tile a:not(.vc_single_image-wrapper) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--jc-teal-dark);
  text-decoration: none;
  transition: gap .2s var(--jc-ease), color .2s var(--jc-ease);
}
.pest-tile a:not(.vc_single_image-wrapper)::after {
  content: '\2192';
  font-size: 15px;
  line-height: 1;
  transition: transform .2s var(--jc-ease);
}
.pest-tile:hover a:not(.vc_single_image-wrapper) {
  color: var(--jc-navy);
}
.pest-tile:hover a:not(.vc_single_image-wrapper)::after {
  transform: translateX(3px);
}

/* Whole tile clickable if you wrap the column content in a link */
.pest-tile > .vc_column-inner > .wpb_wrapper > a.jc-tile-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  text-indent: -9999px;
  overflow: hidden;
}

/* --- 7b. Existing image overlay cards --- */
.pest-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  cursor: pointer;
  border-radius: var(--jc-radius-lg);
  box-shadow: var(--jc-shadow-1);
  transition: transform .3s var(--jc-ease), box-shadow .3s var(--jc-ease);
}
.pest-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--jc-shadow-3);
}
.pest-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--jc-ease);
}
.pest-card:hover img {
  transform: scale(1.06);
}
.pest-card .pest-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(0, 26, 69, .88) 0%,
              rgba(0, 26, 69, .55) 100%);
  opacity: 0;
  transition: opacity .4s var(--jc-ease);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.pest-card:hover .pest-overlay {
  opacity: 1;
}
.pest-card .pest-overlay::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 6px;
  opacity: 0;
  transform: scale(1.08);
  transition: all .4s var(--jc-ease);
}
.pest-card:hover .pest-overlay::before {
  opacity: 1;
  transform: scale(1);
}
.pest-card .pest-overlay p {
  font-family: var(--jc-font-display);
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--jc-white);
  text-align: center;
  font-size: 22px;
  line-height: 1.45;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(10px);
  transition: all .4s var(--jc-ease) .1s;
}
.pest-card:hover .pest-overlay p {
  opacity: 1;
  transform: translateY(0);
}


/* ===== 8. CHOOSE ROW ===== */
.choose-row .wpb_wrapper > .wpb_text_column:last-child {
  margin-bottom: 0;
}


/* ===== 9. CONTACT SECTION — WHITE OVERLAY ===== */
.contact-section {
  position: relative;
}
.contact-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .85);
  z-index: 0;
  pointer-events: none;
}
.contact-section .vc_row {
  position: relative;
  z-index: 1;
}


/* ===== 10. CAREERS FORM — GRADIENT OVERLAY ===== */
.careers-form-bg {
  position: relative;
}
.careers-form-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
              var(--jc-navy) 0%,
              var(--jc-navy) 50%,
              rgba(0, 37, 97, .3) 75%,
              transparent 100%);
  z-index: 1;
}
.careers-form-bg > .vc_row-fluid,
.careers-form-bg .wpb_column {
  position: relative;
  z-index: 2;
}


/* ============================================================
   11. IMAGE CAROUSEL / GALLERY  —  ISSUE #2
   Two problems: the slideline is left-floated by WPBakery's JS, and
   the prev/next controls are absolutely positioned against a container
   whose height collapses on small screens, so they land above the
   images. Below 992px the controls move underneath as a centred pair,
   which is also just easier to tap.
   ============================================================ */
.vc_images_carousel {
  position: relative;
}
.vc_images_carousel .vc_carousel-inner {
  margin: 0 auto;
}
.vc_images_carousel .vc_carousel-slideline-inner {
  display: flex;
  align-items: center;
}
.vc_images_carousel .vc_item {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.vc_images_carousel .vc_inner {
  width: 100%;
  text-align: center;
}
.vc_images_carousel .vc_item img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* Controls: visible circular buttons instead of bare chevrons */
.vc_images_carousel .vc_carousel-control {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 26, 69, .78);
  color: var(--jc-white);
  opacity: 1;
  text-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  transition: background-color .2s var(--jc-ease), transform .2s var(--jc-ease);
}
.vc_images_carousel .vc_carousel-control:hover,
.vc_images_carousel .vc_carousel-control:focus {
  background: var(--jc-teal);
  transform: translateY(-50%) scale(1.06);
}
.vc_images_carousel .vc_carousel-control.vc_left  { left: 12px; }
.vc_images_carousel .vc_carousel-control.vc_right { right: 12px; }
.vc_images_carousel .vc_carousel-control .icon-prev,
.vc_images_carousel .vc_carousel-control .icon-next {
  position: static;
  margin: 0;
  font-size: 22px;
  line-height: 1;
}

/* Dot indicators, if enabled */
.vc_images_carousel .vc_carousel-indicators li {
  border-color: var(--jc-navy);
  background: transparent;
}
.vc_images_carousel .vc_carousel-indicators li.vc_active {
  background: var(--jc-teal);
  border-color: var(--jc-teal);
}


/* ============================================================
   12. MONTHLY PLAN CARDS  —  .jpc-* (self-contained HTML block)

   This block ships its own <style> element inside the page content.
   Because that <style> sits in the body, it comes AFTER this stylesheet
   in document order, so at equal specificity it wins. Everything below
   therefore carries !important — that is the reason, not laziness.

   THE ACTUAL BUG (Issue #3): the block only has two states —
   4 columns, then 1 column below 768px. Between 769px and 1199px it is
   still four columns, which at ~800px leaves roughly 180px per card.
   That is the squish. The fix is the missing middle step.

   Optional cleanup: you can delete the entire <style> block from that
   HTML and let this section own the styling. One edit, one page, and
   the !important flags below stop being necessary. Not required.
   ============================================================ */

/* --- The fix: the missing 2-column step --- */
@media screen and (min-width: 769px) and (max-width: 1199px) {
  .jpc-plans-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

/* Single column a little earlier — at 600-768px a 2-up would be tight,
   and the block already drops to 1fr at 768px, so this just widens the
   comfortable range. */
@media screen and (max-width: 768px) {
  .jpc-plans-grid {
    gap: 16px !important;
  }
  .jpc-plan-card {
    max-width: 420px;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
  }
}

/* --- Bring the cards into the site's card system --- */
.jpc-plan-card {
  /* 3px navy on all four sides reads heavy and dated. 1px plus a shadow
     carries the same structure with far less weight. */
  border: 1px solid var(--jc-line) !important;
  border-radius: var(--jc-radius-lg) !important;
  box-shadow: var(--jc-shadow-1) !important;
  /* Source Sans Pro is not loaded on this site — that font-family was
     silently falling back to the browser default sans. */
  font-family: var(--jc-font-body) !important;
  transition: transform .28s var(--jc-ease), box-shadow .28s var(--jc-ease);
}
.jpc-plan-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--jc-shadow-3) !important;
  border-color: transparent !important;
}

/* Plan name: serif, matching every other heading on the site */
.jpc-plan-title {
  font-family: var(--jc-font-display) !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  letter-spacing: -.006em;
  color: var(--jc-navy) !important;
  padding: 24px 20px 14px !important;
  border-bottom: 1px solid var(--jc-line);
}

/* Feature list: dropping from 700 to 500 makes it readable instead of a
   block of solid bold. The <em> parentheticals still recede. */
.jpc-plan-features {
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--jc-body) !important;
  padding: 18px 20px !important;
}
.jpc-plan-features em {
  font-size: 14px !important;
  color: #7a8494 !important;
}

/* Price bar */
.jpc-plan-price {
  background: var(--jc-navy) !important;
  font-size: 19px !important;
  padding: 15px 16px !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Button: full width so the four cards read as one row of actions */
.jpc-plan-button-wrap {
  padding: 18px 20px 22px !important;
}
.jpc-plan-button {
  display: block !important;
  width: 100% !important;
  background: var(--jc-action) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  letter-spacing: .08em !important;
  padding: 13px 18px !important;
  box-shadow: var(--jc-shadow-1);
  transition: background-color .2s var(--jc-ease), box-shadow .2s var(--jc-ease);
}
.jpc-plan-button:hover {
  /* The block's own hover jumps teal -> navy-blue, which reads as a
     different button. Darkening the same hue is steadier. */
  background: var(--jc-action-dark) !important;
  box-shadow: var(--jc-shadow-2);
}


/* ============================================================
   13. COMMERCIAL SERVICE LIST  —  .commercial-pest-list
   (self-contained HTML block)

   Same situation as section 12: the block ships its own <style> in the page
   body, so it beats this stylesheet at equal specificity. Hence
   !important throughout.

   TWO REAL PROBLEMS

   1. The off-centring. The grid is capped at 700px and centred, but the
      tracks are `1fr 1fr`, which is shorthand for minmax(auto, 1fr).
      That auto minimum means a track cannot shrink below its longest
      unbreakable line — and with white-space:nowrap at 18px,
      "Industrial & Food Processing Facilities" is wider than its 350px
      track. The tracks push past the 700px cap, content spills right,
      and the block reads as shifted off centre.
      Fix: minmax(0, 1fr) lets the tracks stay equal, plus normal
      wrapping as a fallback.

   2. The bullet images are the site logo. Every <img> points at
      cropped-jeffcoat-pest-control-home-services-columbia-midlands-sc.png
      — the full logo lockup — rendered at 20x20px, where it is just a
      dark smudge. That is most of why the section reads as flat and
      undesigned. They are hidden below and replaced with a drawn
      checkmark, matching the rest of the site.
   ============================================================ */

/* The logo-as-bullet goes away */
.commercial-pest-list img {
  display: none !important;
}

.commercial-pest-list {
  display: grid !important;
  /* minmax(0, 1fr) is the actual centring fix */
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 24px !important;
  max-width: 820px !important;
  margin: 0 auto !important;
}

.commercial-pest-list p {
  position: relative;
  white-space: normal !important;
  margin: 0 !important;
  padding: 13px 18px 13px 46px !important;
  background: var(--jc-white);
  border: 1px solid var(--jc-line);
  border-left: 3px solid var(--jc-action);
  border-radius: 8px;
  font-family: var(--jc-font-body) !important;
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1.35 !important;
  color: var(--jc-ink);
  box-shadow: var(--jc-shadow-1);
  transition: transform .2s var(--jc-ease),
              box-shadow .2s var(--jc-ease),
              border-left-color .2s var(--jc-ease);
}

/* Drawn marker: tinted disc plus a checkmark, same device as the
   pest tiles and plan cards */
.commercial-pest-list p::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 50%;
  width: 17px;
  height: 17px;
  margin-top: -8.5px;
  border-radius: 50%;
  background: var(--jc-navy-tint);
  transition: background-color .2s var(--jc-ease);
}
.commercial-pest-list p::after {
  content: '';
  position: absolute;
  left: 22px;
  top: 50%;
  width: 6px;
  height: 3px;
  margin-top: -2px;
  border-left: 2px solid var(--jc-navy);
  border-bottom: 2px solid var(--jc-navy);
  transform: rotate(-45deg);
  transition: border-color .2s var(--jc-ease);
}
.commercial-pest-list p:hover {
  transform: translateX(3px);
  box-shadow: var(--jc-shadow-2);
  border-left-color: var(--jc-navy);
}
.commercial-pest-list p:hover::before {
  background: var(--jc-navy);
}
.commercial-pest-list p:hover::after {
  border-color: var(--jc-white);
}

@media screen and (max-width: 767px) {
  .commercial-pest-list {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    max-width: 100% !important;
  }
  .commercial-pest-list p {
    font-size: 15px !important;
    padding: 12px 16px 12px 44px !important;
  }
}

/* ============================================================
   14. BLOG ARCHIVE  —  ENHANCEMENT
   Horizontal media cards with a right sidebar.
   Requires two Customizer settings, no template file:
     Appearance > Customize > Blog > Blog/Archive
        - Blog Layout: Blog Layout 1 (list)
        - Grid Columns: 1
     Appearance > Customize > Sidebar
        - Blog Archive: Right Sidebar
   Then drop your form widget into Appearance > Widgets > Main Sidebar.
   ============================================================ */
.blog .site-content,
.archive .site-content {
  background: var(--jc-band);
}
.blog .ast-container,
.archive .ast-container {
  padding-top: 40px;
  padding-bottom: 60px;
}

/* --- Post cards --- */
.blog .ast-article-post,
.archive .ast-article-post {
  background: var(--jc-white);
  border: 1px solid var(--jc-line);
  border-radius: var(--jc-radius-lg);
  box-shadow: var(--jc-shadow-1);
  overflow: hidden;
  padding: 0 !important;
  margin-bottom: 26px;
  display: flex;
  align-items: stretch;
  gap: 0;
  transition: transform .25s var(--jc-ease), box-shadow .25s var(--jc-ease);
}
.blog .ast-article-post:hover,
.archive .ast-article-post:hover {
  transform: translateY(-3px);
  box-shadow: var(--jc-shadow-2);
}

/* Thumbnail: fixed-width column on the left */
.blog .ast-article-post .post-thumb,
.blog .ast-article-post .ast-blog-featured-section,
.archive .ast-article-post .post-thumb,
.archive .ast-article-post .ast-blog-featured-section {
  flex: 0 0 300px;
  max-width: 300px;
  margin: 0 !important;
  overflow: hidden;
}
.blog .ast-article-post .post-thumb img,
.blog .ast-article-post .ast-blog-featured-section img,
.archive .ast-article-post .post-thumb img,
.archive .ast-article-post .ast-blog-featured-section img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--jc-ease);
}
.blog .ast-article-post:hover .post-thumb img,
.archive .ast-article-post:hover .post-thumb img {
  transform: scale(1.05);
}

/* Text column */
.blog .ast-article-post .ast-blog-single-element,
.blog .ast-article-post .entry-content,
.blog .ast-article-post .entry-header,
.archive .ast-article-post .ast-blog-single-element,
.archive .ast-article-post .entry-content,
.archive .ast-article-post .entry-header {
  padding-left: 30px;
  padding-right: 30px;
}
.blog .ast-article-post .ast-blog-featured-section
  ~ *:not(.ast-blog-featured-section),
.archive .ast-article-post .ast-blog-featured-section
  ~ *:not(.ast-blog-featured-section) {
  /* keeps the text block from stretching under the image */
}
.blog .ast-article-post .entry-header,
.archive .ast-article-post .entry-header {
  padding-top: 26px;
  margin-bottom: 8px;
}

/* Title */
.blog .ast-article-post .entry-title,
.archive .ast-article-post .entry-title {
  font-size: 26px !important;
  font-weight: 600 !important;
  line-height: 1.24 !important;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}
.blog .ast-article-post .entry-title a,
.archive .ast-article-post .entry-title a {
  color: var(--jc-navy);
  text-decoration: none;
  transition: color .2s var(--jc-ease);
}
.blog .ast-article-post .entry-title a:hover,
.archive .ast-article-post .entry-title a:hover {
  color: var(--jc-teal-dark);
}

/* Category eyebrow */
.blog .ast-article-post .ast-taxonomy-container,
.archive .ast-article-post .ast-taxonomy-container {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.blog .ast-article-post .ast-taxonomy-container a,
.archive .ast-article-post .ast-taxonomy-container a {
  color: var(--jc-teal-dark);
  text-decoration: none;
}

/* Meta line */
.blog .ast-article-post .entry-meta,
.archive .ast-article-post .entry-meta {
  font-size: 13px;
  color: #7a8494;
}
.blog .ast-article-post .entry-meta a,
.archive .ast-article-post .entry-meta a {
  color: #7a8494;
}

/* Excerpt + read more */
.blog .ast-article-post .entry-content p,
.archive .ast-article-post .entry-content p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--jc-body);
  margin-bottom: 14px;
}
.blog .ast-article-post .entry-content,
.archive .ast-article-post .entry-content {
  padding-bottom: 26px;
}
.blog .ast-article-post .read-more a,
.archive .ast-article-post .read-more a,
.blog .ast-article-post .ast-blog-read-more-btn,
.archive .ast-article-post .ast-blog-read-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--jc-teal-dark);
  text-decoration: none;
}
.blog .ast-article-post .read-more a::after,
.archive .ast-article-post .read-more a::after {
  content: '\00BB';
  font-size: 16px;
  transition: transform .2s var(--jc-ease);
}
.blog .ast-article-post .read-more a:hover::after,
.archive .ast-article-post .read-more a:hover::after {
  transform: translateX(3px);
}

/* --- Sidebar --- */
.blog #secondary,
.archive #secondary {
  padding-top: 0;
}
.blog #secondary .widget,
.archive #secondary .widget {
  background: var(--jc-white);
  border: 1px solid var(--jc-line);
  border-radius: var(--jc-radius-lg);
  box-shadow: var(--jc-shadow-1);
  padding: 24px;
  margin-bottom: 26px;
}
.blog #secondary .widget-title,
.archive #secondary .widget-title {
  font-size: 17px !important;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--jc-navy);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--jc-teal);
}

/* Add class "jc-widget-quote" to the widget holding your estimate form.

   Gravity Forms shortcodes do not run inside a Custom HTML block, so in
   practice this class usually ends up on a Group block wrapping a
   Heading + a Shortcode block rather than on the widget container
   itself. Both cases are handled: the rules below style the element
   carrying the class, and the :has() rule flattens the outer widget so
   you never get a navy box inside a bordered box. */
#secondary .widget:has(.jc-widget-quote) {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.blog #secondary .jc-widget-quote,
.archive #secondary .jc-widget-quote {
  background: var(--jc-navy);
  border: 1px solid var(--jc-navy);
  border-radius: var(--jc-radius-lg);
  box-shadow: var(--jc-shadow-2);
  padding: 24px;
  margin-bottom: 26px;
}

/* Heading inside the quote block, whichever markup produced it */
.blog #secondary .jc-widget-quote .widget-title,
.archive #secondary .jc-widget-quote .widget-title,
.blog #secondary .jc-widget-quote > h2,
.blog #secondary .jc-widget-quote > h3,
.blog #secondary .jc-widget-quote .wp-block-heading,
.archive #secondary .jc-widget-quote > h2,
.archive #secondary .jc-widget-quote > h3,
.archive #secondary .jc-widget-quote .wp-block-heading {
  font-family: var(--jc-font-body) !important;
  font-size: 17px !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--jc-white);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(255, 255, 255, .22);
}
.blog #secondary .jc-widget-quote,
.archive #secondary .jc-widget-quote,
.blog #secondary .jc-widget-quote label,
.archive #secondary .jc-widget-quote label {
  color: rgba(255, 255, 255, .9);
}
.blog #secondary .jc-widget-quote input:not([type="submit"]),
.blog #secondary .jc-widget-quote select,
.blog #secondary .jc-widget-quote textarea,
.archive #secondary .jc-widget-quote input:not([type="submit"]),
.archive #secondary .jc-widget-quote select,
.archive #secondary .jc-widget-quote textarea {
  width: 100%;
  background: var(--jc-white);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 11px 14px;
  font-size: 15px;
  margin-bottom: 10px;
  color: var(--jc-ink);
}
.blog #secondary .jc-widget-quote input[type="submit"],
.blog #secondary .jc-widget-quote button[type="submit"],
.archive #secondary .jc-widget-quote input[type="submit"],
.archive #secondary .jc-widget-quote button[type="submit"] {
  width: 100%;
  background: var(--jc-teal);
  color: var(--jc-white);
  border: 0;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 13px 18px;
  cursor: pointer;
  transition: background-color .2s var(--jc-ease);
}
.blog #secondary .jc-widget-quote input[type="submit"]:hover,
.archive #secondary .jc-widget-quote input[type="submit"]:hover {
  background: var(--jc-teal-dark);
}

/* Sticky sidebar on wide screens */
@media screen and (min-width: 993px) {
  .blog #secondary .jc-widget-quote,
  .archive #secondary .jc-widget-quote {
    position: sticky;
    top: 100px;
  }
}


/* ============================================================
   14B. GRAVITY FORMS
   Selectors are written to work across Gravity Forms versions
   (legacy markup and the 2.5+ / 2.7+ theme framework), which is why
   the visual properties carry !important — GF's own theme layer and
   its CSS custom properties will otherwise win.

   Two contexts:
     - default: forms on white or band backgrounds
     - .jc-form-dark: forms on navy. Applied automatically inside
       .careers-form-bg and .jc-widget-quote, or add the class yourself.
   ============================================================ */
.gform_wrapper {
  --gf-local-radius: 8px;
}
.gform_wrapper form {
  margin: 0;
}

/* Field spacing */
.gform_wrapper .gform_fields {
  row-gap: 16px !important;
}
.gform_wrapper .gfield {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Labels */
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  color: var(--jc-ink) !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
}
.gform_wrapper .gfield_required {
  color: var(--jc-action-dark) !important;
  margin-left: 3px;
}
.gform_wrapper .gfield_description {
  font-size: 13px !important;
  color: #6b7585 !important;
  padding-top: 5px !important;
}

/* Inputs */
.gform_wrapper .ginput_container input[type="text"],
.gform_wrapper .ginput_container input[type="email"],
.gform_wrapper .ginput_container input[type="tel"],
.gform_wrapper .ginput_container input[type="url"],
.gform_wrapper .ginput_container input[type="number"],
.gform_wrapper .ginput_container input[type="password"],
.gform_wrapper .ginput_container input[type="date"],
.gform_wrapper .ginput_container select,
.gform_wrapper .ginput_container textarea {
  width: 100% !important;
  background: var(--jc-white) !important;
  border: 1px solid var(--jc-line) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-size: 16px !important;   /* 16px stops iOS zooming on focus */
  line-height: 1.4 !important;
  color: var(--jc-ink) !important;
  box-shadow: none !important;
  transition: border-color .18s var(--jc-ease), box-shadow .18s var(--jc-ease);
}
.gform_wrapper .ginput_container textarea {
  min-height: 130px;
  resize: vertical;
}
.gform_wrapper .ginput_container input:focus,
.gform_wrapper .ginput_container select:focus,
.gform_wrapper .ginput_container textarea:focus {
  border-color: var(--jc-action) !important;
  box-shadow: 0 0 0 3px rgba(43, 143, 163, .18) !important;
  outline: none !important;
}
.gform_wrapper .ginput_container input::placeholder,
.gform_wrapper .ginput_container textarea::placeholder {
  color: #8d97a6 !important;
  opacity: 1;
}

/* Checkboxes and radios */
.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gfield_radio label {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--jc-body) !important;
}
.gform_wrapper .gfield_checkbox input,
.gform_wrapper .gfield_radio input {
  accent-color: var(--jc-action);
  width: 17px;
  height: 17px;
}

/* Submit button */
.gform_wrapper .gform_footer {
  margin-top: 20px !important;
  padding: 0 !important;
}
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button[type="submit"],
.gform_wrapper .gform_button,
.gform_wrapper .gform_page_footer input[type="submit"],
.gform_wrapper .gform_page_footer button {
  background: var(--jc-action) !important;
  color: var(--jc-white) !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 14px 30px !important;
  min-height: 48px;
  width: auto;
  cursor: pointer;
  box-shadow: var(--jc-shadow-1) !important;
  transition: background-color .2s var(--jc-ease),
              transform .2s var(--jc-ease),
              box-shadow .2s var(--jc-ease);
}
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_button:hover {
  background: var(--jc-action-dark) !important;
  transform: translateY(-1px);
  box-shadow: var(--jc-shadow-2) !important;
}

/* Validation */
.gform_wrapper .gform_validation_errors {
  background: #fdf2f2 !important;
  border: 1px solid #e6b4b4 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 14px 18px !important;
}
.gform_wrapper .gform_validation_errors > h2 {
  font-size: 15px !important;
  color: #a12b2b !important;
  margin: 0 !important;
}
.gform_wrapper .gfield_error .ginput_container input,
.gform_wrapper .gfield_error .ginput_container select,
.gform_wrapper .gfield_error .ginput_container textarea {
  border-color: #c94a4a !important;
  background: #fffafa !important;
}
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
  background: transparent !important;
  border: 0 !important;
  padding: 5px 0 0 !important;
  font-size: 13px !important;
  color: #a12b2b !important;
}
.gform_wrapper .gform_confirmation_message {
  background: var(--jc-navy-tint);
  border-left: 3px solid var(--jc-action);
  border-radius: 8px;
  padding: 22px 24px;
  font-size: 17px;
  color: var(--jc-ink);
}

/* --- Dark variant: forms sitting on navy --- */
.careers-form-bg .gform_wrapper,
.jc-widget-quote .gform_wrapper,
.jc-form-dark .gform_wrapper {
  color: rgba(255, 255, 255, .92);
}
.careers-form-bg .gform_wrapper .gfield_label,
.careers-form-bg .gform_wrapper legend.gfield_label,
.jc-widget-quote .gform_wrapper .gfield_label,
.jc-widget-quote .gform_wrapper legend.gfield_label,
.jc-form-dark .gform_wrapper .gfield_label,
.jc-form-dark .gform_wrapper legend.gfield_label {
  color: var(--jc-white) !important;
}
.careers-form-bg .gform_wrapper .gfield_description,
.jc-widget-quote .gform_wrapper .gfield_description,
.jc-form-dark .gform_wrapper .gfield_description {
  color: rgba(255, 255, 255, .68) !important;
}
.careers-form-bg .gform_wrapper .gfield_required,
.jc-widget-quote .gform_wrapper .gfield_required,
.jc-form-dark .gform_wrapper .gfield_required {
  color: var(--jc-silver) !important;
}
.careers-form-bg .gform_wrapper .ginput_container input,
.careers-form-bg .gform_wrapper .ginput_container select,
.careers-form-bg .gform_wrapper .ginput_container textarea,
.jc-widget-quote .gform_wrapper .ginput_container input,
.jc-widget-quote .gform_wrapper .ginput_container select,
.jc-widget-quote .gform_wrapper .ginput_container textarea,
.jc-form-dark .gform_wrapper .ginput_container input,
.jc-form-dark .gform_wrapper .ginput_container select,
.jc-form-dark .gform_wrapper .ginput_container textarea {
  border-color: transparent !important;
}
.careers-form-bg .gform_wrapper .ginput_container input:focus,
.jc-widget-quote .gform_wrapper .ginput_container input:focus,
.jc-form-dark .gform_wrapper .ginput_container input:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .35) !important;
}
.careers-form-bg .gform_wrapper .gfield_checkbox label,
.careers-form-bg .gform_wrapper .gfield_radio label,
.jc-widget-quote .gform_wrapper .gfield_checkbox label,
.jc-form-dark .gform_wrapper .gfield_checkbox label,
.jc-form-dark .gform_wrapper .gfield_radio label {
  color: rgba(255, 255, 255, .9) !important;
}

/* Sidebar quote form: full-width button, tighter spacing */
.jc-widget-quote .gform_wrapper .gform_fields {
  row-gap: 12px !important;
}
.jc-widget-quote .gform_wrapper .gform_footer input[type="submit"],
.jc-widget-quote .gform_wrapper .gform_button {
  width: 100% !important;
  text-transform: none;
  letter-spacing: .02em;
  font-size: 16px !important;
}



/* ============================================================
   15. STICKY MOBILE CALL BAR
   Markup output by functions.php. Phone-first, because that is how
   this business actually takes work.
   ============================================================ */
.jc-mobile-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  background: var(--jc-navy);
  box-shadow: 0 -2px 14px rgba(0, 0, 0, .22);
  padding: 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
.jc-mobile-bar__inner {
  display: flex;
  gap: 8px;
}
.jc-mobile-bar a {
  flex: 1 1 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
}
.jc-mobile-bar a svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex: none;
}
.jc-mobile-bar__call {
  background: var(--jc-teal);
  color: var(--jc-white);
}
.jc-mobile-bar__quote {
  background: rgba(255, 255, 255, .1);
  color: var(--jc-white);
  border: 1px solid rgba(255, 255, 255, .3);
}


/* ============================================================
   15B. FOOTER
   Built with Astra's Footer Builder, so these target Astra's own
   wrapper classes rather than anything you add by hand.

   The biggest problem in the current footer is rhythm, not colour —
   the link lists sit at roughly 68px apart, which reads as unfinished
   rather than airy. Everything else follows from tightening that.

   Background: navy, not charcoal. Charcoal is not on the brand sheet.
   Astra's Footer Builder also sets a background, so if you'd rather
   control it there, delete the .site-footer background rule below and
   set it under Customize > Footer Builder instead. Don't do both.
   ============================================================ */
.site-footer,
.site-primary-footer-wrap,
.site-below-footer-wrap {
  background-color: var(--jc-navy) !important;
  border-top: 0;
}
.site-footer {
  color: var(--jc-silver);
}

.site-primary-footer-wrap {
  padding-top: 62px !important;
  padding-bottom: 46px !important;
}

/* --- Body copy --- */
.site-footer p,
.site-footer li,
.site-footer .textwidget,
.site-footer .ast-builder-html-element {
  color: var(--jc-silver);
  font-size: 16px;
  line-height: 1.6;
}

/* --- The lead block: serif heading, restrained supporting copy --- */
.site-footer h2,
.site-footer h3.ast-builder-html-element {
  font-size: 34px !important;
  font-weight: 600 !important;
  line-height: 1.18 !important;
  letter-spacing: -.012em;
  color: var(--jc-white) !important;
  margin: 0 0 14px;
  max-width: 20ch;
}
.site-footer h2 + p {
  font-size: 18px;
  line-height: 1.55;
  max-width: 46ch;
  color: rgba(255, 255, 255, .82);
}

/* --- Column headings: sans caps with a teal rule, matching the
       blog sidebar so the two read as one system --- */
.site-footer .widget-title,
.site-footer .widget h2,
.site-footer .widget h3,
.site-footer .wp-block-heading {
  font-family: var(--jc-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jc-white) !important;
  max-width: none;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--jc-teal);
  display: inline-block;
}

/* --- Link lists: this is the actual fix --- */
.site-footer .widget ul,
.site-footer .menu,
.site-footer .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .widget ul li,
.site-footer .menu li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.site-footer .widget ul li a,
.site-footer .menu li a {
  display: block;
  position: relative;
  padding: 9px 0 9px 0;
  font-size: 16px;
  line-height: 1.4;
  color: var(--jc-silver);
  text-decoration: none;
  transition: color .18s var(--jc-ease), padding-left .18s var(--jc-ease);
}
.site-footer .widget ul li a::before {
  content: '\2192';
  position: absolute;
  left: 0;
  opacity: 0;
  color: var(--jc-teal);
  transition: opacity .18s var(--jc-ease);
}
.site-footer .widget ul li a:hover,
.site-footer .menu li a:hover {
  color: var(--jc-white);
  padding-left: 20px;
}
.site-footer .widget ul li a:hover::before {
  opacity: 1;
}

/* --- Service area list -----------------------------------------
   Works two ways. As plain comma-separated text it just gets better
   typography. If you wrap each town in a link — or swap the block for
   a Navigation Menu widget — add the class "jc-service-areas" to the
   containing widget and they render as pills, which also gives you
   internal links to any location pages you build later.
   --------------------------------------------------------------- */
.site-footer .jc-service-areas ul,
.site-footer .jc-service-areas p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.site-footer .jc-service-areas ul li a,
.site-footer .jc-service-areas a {
  display: inline-block;
  padding: 7px 14px !important;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  font-size: 14px;
  color: rgba(255, 255, 255, .88);
  transition: background-color .18s var(--jc-ease),
              border-color .18s var(--jc-ease),
              color .18s var(--jc-ease);
}
.site-footer .jc-service-areas ul li a::before {
  content: none;
}
.site-footer .jc-service-areas ul li a:hover,
.site-footer .jc-service-areas a:hover {
  background: var(--jc-teal);
  border-color: var(--jc-teal);
  color: var(--jc-white);
  padding-left: 14px !important;
}

/* --- Contact block. Add class "jc-footer-contact" to a widget
       holding the phone, address and hours. --- */
.site-footer .jc-footer-contact a[href^="tel:"] {
  display: inline-block;
  font-family: var(--jc-font-body);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--jc-white);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  padding: 0 !important;
}
.site-footer .jc-footer-contact a[href^="tel:"]:hover {
  color: var(--jc-teal);
  padding-left: 0 !important;
}
.site-footer .jc-footer-contact a[href^="tel:"]::before {
  content: none;
}

/* --- Bottom bar --- */
.site-below-footer-wrap {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}
.site-below-footer-wrap,
.site-below-footer-wrap p,
.site-below-footer-wrap .ast-builder-html-element {
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
}
.site-below-footer-wrap a {
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  transition: color .18s var(--jc-ease), border-color .18s var(--jc-ease);
}
.site-below-footer-wrap a:hover {
  color: var(--jc-white);
  border-bottom-color: var(--jc-teal);
}


/* ===== 16. SCROLL REVEAL UTILITIES =====
   Add "jc-fade-up" (and optionally jc-delay-1..4) to a row or element's
   Extra class name field. Do not combine with WPBakery's own animation
   setting — they fight over transform.

   Elements are visible by default. The JS adds .jc-reveal-ready to
   <html> before hiding anything, so if the script never loads nothing
   is left stranded invisible. */
.jc-fade-up,
.jc-fade-in {
  transition: opacity .7s var(--jc-ease), transform .7s var(--jc-ease);
}
html.jc-reveal-ready .jc-fade-up:not(.jc-visible),
html.jc-reveal-ready .jc-fade-in:not(.jc-visible) {
  opacity: 0;
  will-change: opacity, transform;
}
html.jc-reveal-ready .jc-fade-up:not(.jc-visible) {
  transform: translateY(22px);
}
.jc-delay-1 { transition-delay: .1s; }
.jc-delay-2 { transition-delay: .2s; }
.jc-delay-3 { transition-delay: .3s; }
.jc-delay-4 { transition-delay: .4s; }


/* ===== 17. ACCESSIBILITY + REDUCED MOTION ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.jc-card:focus-visible {
  outline: 3px solid var(--jc-teal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .jc-fade-up,
  .jc-fade-in {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ============================================================
   18. BREAKPOINT: max-width 1199px
   ============================================================ */
@media screen and (max-width: 1199px) {

  /* Choose row: image on top, blurbs 2 x 2 beneath */
  .choose-row > .wpb_column {
    width: 100% !important;
    float: none !important;
  }
  .choose-row > .wpb_column.vc_col-sm-3 {
    width: 50% !important;
    float: left !important;
    margin-top: 30px;
  }

  /* Pest tiles: 3 across */
  .pest-tile-row > .wpb_column.pest-tile {
    width: 33.333% !important;
    float: none !important;
  }
}


/* ============================================================
   19. BREAKPOINT: max-width 992px
   ============================================================ */
@media screen and (max-width: 992px) {

  /* Typography */
  .wpb_wrapper h2 { font-size: 37px; }
  .wpb_wrapper h3 { font-size: 23px; }
  .wpb_wrapper p,
  .wpb_wrapper li { font-size: 16.5px; }
  .jc-lead p { font-size: 18.5px !important; }

  /* Utility bar collapses to a centred stack */
  .jc-utility-bar__inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 20px;
    padding: 10px 16px;
  }
  .jc-utility-bar__nav {
    margin-left: 0;
    width: 100%;
    justify-content: center;
    gap: 16px;
  }
  .jc-utility-bar__nav ul {
    gap: 16px;
  }

  /* Hero */
  .hero-section {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
    min-height: 0 !important;
  }
  .hero-section h1 { font-size: 42px !important; }
  .hero-section h2 { font-size: 22px !important; }

  /* ISSUE #2 — centre the carousel, move controls below the images */
  .vc_images_carousel {
    text-align: center;
    padding-bottom: 62px;
  }
  .vc_images_carousel .vc_carousel-slideline {
    margin: 0 auto !important;
    float: none !important;
  }
  .vc_images_carousel .vc_carousel-slideline-inner {
    margin: 0 auto;
    justify-content: center;
  }
  .vc_images_carousel .vc_item {
    float: none !important;
    display: inline-flex !important;
  }
  .vc_images_carousel .vc_carousel-control {
    top: auto !important;
    bottom: 0;
    transform: none !important;
    width: 48px;
    height: 48px;
    background: var(--jc-navy);
  }
  .vc_images_carousel .vc_carousel-control:hover,
  .vc_images_carousel .vc_carousel-control:focus {
    transform: none !important;
    background: var(--jc-teal);
  }
  .vc_images_carousel .vc_carousel-control.vc_left {
    left: 50% !important;
    margin-left: -54px;
  }
  .vc_images_carousel .vc_carousel-control.vc_right {
    right: 50% !important;
    margin-right: -54px;
  }
  .vc_images_carousel .vc_carousel-indicators {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
  }

  /* Pest tiles: 2 across */
  .pest-tile-row > .wpb_column.pest-tile {
    width: 50% !important;
  }

  /* Footer: two columns rather than three squeezed ones */
  .site-footer h2,
  .site-footer h3.ast-builder-html-element {
    font-size: 29px !important;
  }

  /* Blog cards stack image over text */
  .blog .ast-article-post,
  .archive .ast-article-post {
    flex-direction: column;
  }
  .blog .ast-article-post .post-thumb,
  .blog .ast-article-post .ast-blog-featured-section,
  .archive .ast-article-post .post-thumb,
  .archive .ast-article-post .ast-blog-featured-section {
    flex: 0 0 auto;
    max-width: 100%;
  }
  .blog .ast-article-post .post-thumb img,
  .archive .ast-article-post .post-thumb img {
    height: 230px;
    min-height: 0;
  }
}


/* ============================================================
   20. BREAKPOINT: max-width 767px
   ============================================================ */
@media screen and (max-width: 767px) {

  /* Typography */
  .wpb_wrapper h2 { font-size: 28px; letter-spacing: -.008em; }
  .wpb_wrapper h3 { font-size: 21px; }
  .wpb_wrapper h4 { font-size: 19px; }
  .wpb_wrapper p,
  .wpb_wrapper li { font-size: 16px; line-height: 1.62; }
  .jc-lead p { font-size: 17.5px !important; }

  /* Hero — single source of vertical padding now.
     The old rule stacked 60px of column padding on top of the
     section's 60px, giving ~120px of dead space on phones. */
  .hero-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    min-height: 0 !important;
  }
  .hero-section > .vc_row > .vc_col-sm-12 {
    padding: 0 20px 30px !important;
  }
  .hero-section h1 {
    font-size: 31px !important;
    line-height: 1.2 !important;
    letter-spacing: -.014em !important;
  }
  .hero-section h2 { font-size: 18px !important; }

  /* Utility bar: keep phone + rating, drop the link list */
  .jc-utility-bar__nav ul { display: none; }
  .jc-utility-bar__inner  { gap: 10px 16px; }
  .jc-utility-bar__phone  { font-size: 16px; }

  /* Choose row goes single column */
  .choose-row > .wpb_column.vc_col-sm-3 {
    width: 100% !important;
    float: none !important;
  }

  /* Pest tiles go full-width horizontal rows on phones.
     A 2-up grid at 375px leaves about 160px per tile, which is where
     the "too small" came from. Horizontal rows use the full width,
     give a ~78px tap target, and match the icon-left/label-right
     pattern in the Rocket reference. */
  .pest-tile-row > .wpb_column.pest-tile {
    width: 100% !important;
    float: none !important;
    margin-bottom: 12px;
  }
  .pest-tile > .vc_column-inner > .wpb_wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    padding: 14px 18px;
  }
  .pest-tile .wpb_single_image {
    flex: 0 0 auto;
    margin-bottom: 0;
  }
  .pest-tile .wpb_text_column,
  .pest-tile .wpb_content_element:not(.wpb_single_image) {
    flex: 1 1 auto;
    margin-bottom: 0;
  }
  .pest-tile .wpb_single_image .vc_single_image-wrapper {
    width: 62px;
    height: 62px;
  }
  .pest-tile .wpb_single_image img {
    width: 36px !important;
    height: 36px !important;
  }
  .pest-tile h3,
  .pest-tile h4 {
    font-size: 18px !important;
    margin-bottom: 4px;
  }
  .pest-tile a:not(.vc_single_image-wrapper) {
    font-size: 14px;
  }

  /* The teal top edge becomes a left edge in a horizontal row */
  .pest-tile > .vc_column-inner > .wpb_wrapper::before {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 3px;
    height: auto;
    transform: scaleY(0);
    transform-origin: top center;
  }
  .pest-tile:hover > .vc_column-inner > .wpb_wrapper::before,
  .pest-tile:focus-within > .vc_column-inner > .wpb_wrapper::before {
    transform: scaleY(1);
  }

  /* Overlay card text */
  .pest-card .pest-overlay p { font-size: 18px; }

  /* Blog */
  .blog .ast-container,
  .archive .ast-container {
    padding-top: 24px;
    padding-bottom: 40px;
  }
  .blog .ast-article-post .entry-title,
  .archive .ast-article-post .entry-title {
    font-size: 21px !important;
  }
  .blog .ast-article-post .ast-blog-single-element,
  .blog .ast-article-post .entry-content,
  .blog .ast-article-post .entry-header,
  .archive .ast-article-post .ast-blog-single-element,
  .archive .ast-article-post .entry-content,
  .archive .ast-article-post .entry-header {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Footer stacks; headings come down to page scale */
  .site-primary-footer-wrap {
    padding-top: 42px !important;
    padding-bottom: 30px !important;
  }
  .site-footer h2,
  .site-footer h3.ast-builder-html-element {
    font-size: 26px !important;
    max-width: none;
  }
  .site-footer h2 + p { font-size: 16.5px; max-width: none; }
  .site-footer .widget { margin-bottom: 34px; }
  .site-footer .widget:last-child { margin-bottom: 0; }
  .site-footer .jc-footer-contact a[href^="tel:"] { font-size: 23px; }
  .site-below-footer-wrap { text-align: center; }

  /* Sticky call bar on, with clearance so it never covers content */
  .jc-mobile-bar { display: block; }
  body.jc-has-mobile-bar { padding-bottom: 72px; }
  .ast-scroll-top-icon,
  #ast-scroll-top { bottom: 80px !important; }
}