/* ── WPBakery compat ─────────────────────────────────────────────────────
   Neutralizes WPBakery's row/column gutters and element margins so our
   theme sections render full-bleed and pixel-identical to the PHP
   templates. Every builder row uses el_class="pawco-vc-section". */

.vc_row.pawco-vc-section {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.pawco-vc-section > .wpb_column > .vc_column-inner {
  padding-left: 0;
  padding-right: 0;
}

.pawco-vc-section .wpb_content_element,
.pawco-vc-section .wpb_raw_code,
.pawco-vc-section .wpb_text_column {
  margin-bottom: 0;
}

/* WPBakery injects <p> wrappers inside text columns in some configs —
   make sure they never add phantom spacing around our section markup */
.pawco-vc-section .wpb_wrapper > p:empty {
  display: none;
}

/* WPBakery's own `.vc_column_container { padding-left:0; padding-right:0; }`
   has the same specificity as our `.section` class's intended
   `padding: ... var(--container-gutter)` and was winning the cascade
   order tiebreak, silently zeroing the container gutter on every column
   that also carries our "section" class (services header, process header,
   testimonials header, gallery header, contact split, etc.) — this is
   what was clipping headings against the left edge of the viewport. */
.wpb_column.section {
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--container-gutter) !important;
  padding-right: var(--container-gutter) !important;
}

/* Same WPBakery `.vc_column_container { padding-left/right: 0 }` collision
   affects every OTHER column class that carries its own intended padding
   (not just ".section") — hero text column, about-split text, service
   cards, process steps, value cards. Restore each one's real value. */
.wpb_column.hero-content {
  padding-left: max(var(--container-gutter), calc((100vw - var(--container-max)) / 2 + var(--container-gutter))) !important;
  padding-right: var(--container-gutter) !important;
}
.wpb_column.about-split-content {
  padding-left: clamp(40px, 5vw, 80px) !important;
  padding-right: clamp(40px, 5vw, 80px) !important;
}
.wpb_column.service-card {
  padding-left: 40px !important;
  padding-right: 40px !important;
}
.wpb_column.service-detail-content {
  padding-left: clamp(40px, 5vw, 80px) !important;
  padding-right: clamp(40px, 5vw, 80px) !important;
}
.wpb_column.process-step {
  padding-right: 40px !important;
}
.wpb_column.value-item {
  padding-left: 36px !important;
  padding-right: 36px !important;
}
.wpb_column.about-story-section,
.wpb_column.booking-inner,
.wpb_column.certs-inner,
.wpb_column.page-hero {
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--container-gutter) !important;
  padding-right: var(--container-gutter) !important;
}

/* Native rows/columns used as section + max-width-container substitutes
   (row = full-bleed background strip, first column = ".section" wrapper) */
.pawco-vc-fullbleed {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.pawco-vc-fullbleed > .wpb_column > .vc_column-inner {
  padding-left: 0;
  padding-right: 0;
}

/* Native vc_btn3 buttons mapped onto our .btn design language.
   el_class on vc_btn lands on the WRAPPING div, not the <a> — so target
   `.vc_btn3-container.<variant> a.vc_btn3` directly, forwarding our exact
   pawco-style.css button rules (see .btn / .btn-gold / .btn-primary etc).
   WPBakery's own .vc_btn3-container carries 14px top/bottom padding by
   default — since the wrapper and the <a> share the same background
   color, that padding visually reads as "the button is oversized"
   (a plain color rectangle much taller than the actual clickable text).
   Zero it so the <a>'s own padding is the only spacing that shows. */
.vc_btn3-container.btn {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  /* WPBakery's container defaults to display:block, stretching to fill
     the full width of whatever column it sits in (buttons after a
     heading/paragraph in a block-flow column can end up 1000px+ wide
     while the visible <a> inside is only ~150px — a huge invisible
     click-dead-zone that LOOKS like one giant oversized button because
     the container and <a> currently share the same background color).
     Size the container to its content instead, everywhere, not just in
     the hero (which already had its own narrower fix below). */
  display: inline-block !important;
  width: auto !important;
  background: transparent !important;
  border: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.vc_btn3-container.btn a.vc_btn3 {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 14px 28px !important;
  font-family: var(--font-geometric);
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  white-space: nowrap;
  height: auto !important;
  line-height: normal !important;
}
.vc_btn3-container.btn-primary a.vc_btn3 {
  background: var(--color-dark) !important;
  color: var(--color-text-light) !important;
  border: 1px solid var(--color-dark) !important;
}
.vc_btn3-container.btn-primary a.vc_btn3:hover {
  background: var(--color-gold) !important;
  color: var(--color-dark) !important;
}
.vc_btn3-container.btn-gold a.vc_btn3 {
  background: var(--color-gold) !important;
  color: var(--color-dark) !important;
  border: 1px solid var(--color-gold) !important;
}
.vc_btn3-container.btn-gold a.vc_btn3:hover {
  background: var(--color-dark) !important;
  color: var(--color-text-light) !important;
}
.vc_btn3-container.btn-ghost-light a.vc_btn3 {
  background: transparent !important;
  border: 1px solid rgba(240, 237, 229, 0.4) !important;
  color: var(--color-text-light) !important;
}
.vc_btn3-container.btn-ghost-light a.vc_btn3:hover {
  border-color: var(--color-gold) !important;
  color: var(--color-gold) !important;
}
.vc_btn3-container.btn-ghost-dark a.vc_btn3 {
  background: transparent !important;
  border: 1px solid rgba(17, 17, 17, 0.15) !important;
  color: var(--color-text-dark) !important;
}
.vc_btn3-container.btn-ghost-dark a.vc_btn3:hover {
  border-color: var(--color-dark) !important;
  background: var(--color-dark) !important;
  color: var(--color-text-light) !important;
}

/* CRITICAL — the theme's slide-fill hover effect (.btn-gold::after etc.,
   position:absolute inset:0, translateX in on :hover) was designed for
   anchors with inner <span>s lifted above it. On WPBakery buttons the
   .btn classes land on the WRAPPER DIV, so that ::after overlay paints
   on the wrapper, ON TOP of the inner <a>: it covers the label ("text
   hides on hover") and hit-testing sends the click to the wrapper, not
   the link ("buttons not clickable" — humans hover first, so the overlay
   is fully across by the time they click; automated clicks land before
   the 0.35s transition and pass). Kill the wrapper pseudo fills and let
   clicks pass through the wrapper to the anchor; the plain background
   swaps above provide the hover state instead. */
.vc_btn3-container.btn::before,
.vc_btn3-container.btn::after {
  content: none !important;
  display: none !important;
}
.vc_btn3-container.btn {
  pointer-events: none;
}
.vc_btn3-container.btn a.vc_btn3 {
  pointer-events: auto;
}

/* Native vc_single_image — strip WPBakery's figure/caption chrome so our
   own image classes (gallery-item img, about-split-image img, etc.) apply
   to a plain <img> the way the PHP templates expect. */
/* Real WPBakery's actual DOM for vc_single_image is much deeper than
   assumed: .wpb_column > .vc_column-inner > .wpb_wrapper >
   .wpb_single_image.pawco-vc-img > figure.vc_figure.wpb_wrapper >
   .vc_single_image-wrapper > img. A percentage height only resolves if
   EVERY ancestor in that chain has an explicit height — one missing link
   (any of these divs defaulting to auto) breaks the whole chain, and the
   <img> falls back to its own natural aspect-ratio height instead of
   filling the column (this is what caused images to render as a
   clipped sliver instead of covering their container). */
.wpb_column:has(.pawco-vc-img) > .vc_column-inner,
.wpb_column:has(.pawco-vc-img) > .vc_column-inner > .wpb_wrapper {
  height: 100%;
}
.pawco-vc-img,
.pawco-vc-img .vc_figure,
.pawco-vc-img .vc_single_image-wrapper {
  display: block;
  width: 100%;
  height: 100%;
}
.pawco-vc-img img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Nested vc_row_inner grids (services/process/values cards) — WPBakery 9's
   own row CSS collides with our identically-named theme classes
   (.services-grid etc. also match pawco-style.css's own grid rules),
   producing inconsistent auto-placement ("staggered" cards at uneven
   rows). Force flexbox explicitly so these always lay out as clean,
   equal rows regardless of which grid engine wins the cascade. */
.services-grid.vc_row-inner,
.process-steps.vc_row-inner,
.values-grid.vc_row-inner,
.services-grid.vc_row,
.process-steps.vc_row,
.values-grid.vc_row {
  display: flex !important;
  flex-wrap: wrap !important;
}
.services-grid > .wpb_column {
  flex: 0 0 49% !important;
  max-width: 49% !important;
  float: none !important;
}
.process-steps > .wpb_column,
.values-grid > .wpb_column {
  flex: 0 0 32% !important;
  max-width: 32% !important;
  float: none !important;
}

/* Top-level 4-column rows (stats strip, booking reassurance strip) — same
   defensive flex override in case WPBakery's row CSS misbehaves here too.
   These originally sat inside a ".stats-grid"/".reassurance-grid" wrapper
   that supplied max-width + centering + gutter padding, INSIDE an outer
   full-bleed background strip — two separate elements. Applying max-width
   directly to the row (as an earlier version of this fix did) constrains
   the row's OWN background too, making the dark strip render as a boxed
   rectangle instead of spanning edge-to-edge. Fix: keep the row full-bleed
   and use a symmetric calc()-based padding (same technique as
   .hero-content below) to reproduce the visual centering without
   touching the row's width. */
.section-stats.vc_row,
.reassurance-strip.vc_row {
  display: flex !important;
  flex-wrap: wrap !important;
  padding-left: max(var(--container-gutter), calc((100vw - var(--container-max)) / 2 + var(--container-gutter))) !important;
  padding-right: max(var(--container-gutter), calc((100vw - var(--container-max)) / 2 + var(--container-gutter))) !important;
}
.section-stats.vc_row,
.reassurance-strip.vc_row {
  justify-content: space-between !important;
}
.section-stats > .wpb_column,
.reassurance-strip > .wpb_column {
  flex: 0 0 22% !important;
  max-width: 22% !important;
  float: none !important;
}

/* Service detail rows (image + content, alternating). Original used
   .service-detail-inner { display:grid; grid-template-columns:1fr 1fr;
   min-height:560px } — a single wrapper that both laid out AND stretched
   both columns to equal height. The native row never got the same
   flex-force treatment as the other multi-column sections, so it defaults
   to display:block: the image column collapses to near-zero height (no
   in-flow content, since its <img> is position:absolute) while the
   image itself renders at its natural ~480px height and gets clipped by
   the column's overflow:hidden down to a sliver. */
.service-detail.vc_row {
  display: flex !important;
  flex-wrap: wrap !important;
  min-height: 560px;
}
.service-detail > .wpb_column {
  flex: 0 0 50% !important;
  max-width: 50% !important;
  float: none !important;
}
.service-detail-image {
  position: relative;
  min-height: 320px;
}

/* Contact page split (1fr / 1.4fr ratio, matching pawco-style.css's
   .contact-split grid-template-columns). Explicit nowrap — this is always
   exactly 2 columns and should never wrap, so don't leave it to width-fit
   math (which proved unreliable against WPBakery's own conflicting
   .vc_column_container { width: 100% } base rule). */
.contact-split.vc_row-inner,
.contact-split.vc_row {
  display: flex !important;
  flex-wrap: nowrap !important;
}
.contact-split > .wpb_column:first-child {
  flex: 0 0 40% !important;
  max-width: 40% !important;
  float: none !important;
}
.contact-split > .wpb_column:last-child {
  flex: 0 0 56% !important;
  max-width: 56% !important;
  float: none !important;
}

/* Hero row — native heading/text/buttons in column 1, raw video in column 2.
   Same defensive flex override as the other grids, plus a height chain so
   the video's absolutely-positioned <video>/<img> (which fill .hero-image
   at height:100%) actually have a resolvable height through WPBakery's
   extra wrapper divs (column-inner > wpb_wrapper), which it isn't part of
   the CSS grid it originally relied on for that height. */
.section-hero.vc_row {
  display: flex !important;
  flex-wrap: wrap !important;
  min-height: 100vh;
}
.section-hero > .wpb_column {
  flex: 0 0 49% !important;
  max-width: 49% !important;
  float: none !important;
}
.section-hero .wpb_column,
.section-hero .vc_column-inner,
.section-hero .wpb_wrapper {
  height: 100%;
}
.section-hero .hero-image {
  height: 100%;
  min-height: 100vh;
}

/* Hero CTA buttons (Book a Walk / View Services) side-by-side, like the
   original .hero-ctas flex wrapper. */
.hero-content .vc_btn3-container {
  display: inline-block !important;
  margin-right: 16px;
  margin-bottom: 16px;
}

/* About page hero has 2 CTA buttons as siblings (no wrapping .about-hero-ctas
   flex container in the native version) — lay them out side-by-side to
   match the original instead of WPBakery's default block-stacked buttons. */
.page-hero .vc_btn3-container {
  display: inline-block !important;
  margin-right: 16px;
  margin-top: 8px;
}

/* Service detail rows alternate light/dark backgrounds. The original PHP
   template used an INLINE style="color:..." on the heading/feature-list
   per row to switch text color for the dark rows — that inline override
   was dropped when converting to native widgets, leaving those two dark
   rows with default (dark) text color on a dark background = invisible.
   Restore via the row's own section--dark/section--cream ancestor class. */
.section--dark .service-detail-heading {
  color: var(--color-text-light) !important;
}
.section--dark .service-detail-features li {
  color: var(--color-text-muted) !important;
}

/* WPBakery's global Typography module injects a default heading
   font-family (e.g. Abril Fatface) as an INLINE style on every
   vc_custom_heading, which beats our non-!important pawco-style.css rules.
   Previous fix only allowlisted .type-h1/h2/h3, which missed .type-display
   (homepage hero) and every heading with no type-* class at all
   (.value-title, .reassurance-title, plain vc_custom_heading) — confirmed
   leaking Abril Fatface on 4 of 5 live pages. Blanket rule catches every
   heading by default; now that --font-primary/--font-geometric/--font-utility
   all resolve to the same Gilroy family, the old two-tier split is moot,
   but the selector is left in place in case the roles diverge again later. */
.vc_custom_heading {
  font-family: var(--font-primary) !important;
}
.vc_custom_heading.type-number,
.vc_custom_heading.service-num,
.vc_custom_heading.process-num,
.vc_custom_heading.value-num {
  font-family: var(--font-geometric) !important;
}

/* Same WPBakery default also inline-injects font-weight:400 on every
   heading — fixing font-family alone left every heading at the wrong,
   thin weight (Abril Fatface's default) instead of its designed weight.
   Values below match each class's real weight in pawco-style.css. */
.vc_custom_heading {
  font-weight: 600 !important; /* bare vc_custom_heading (no type-* class) — matches type-h2 */
}
.vc_custom_heading.type-display {
  font-weight: 700 !important;
}
.vc_custom_heading.type-h1,
.vc_custom_heading.type-h2,
.vc_custom_heading.value-title {
  font-weight: 600 !important;
}
.vc_custom_heading.type-h3,
.vc_custom_heading.reassurance-title {
  font-weight: 500 !important;
}

/* Hero headline color: the original template nested all 3 lines inside
   ONE <h1 class="hero-headline">, so color:var(--color-text-light) set on
   that single wrapper INHERITED down to all 3 child <span> lines for
   free. Native version made each line its own independent heading
   (needed so WPBakery can edit/animate each line separately) — only the
   LAST one still carries "hero-headline" (kept there on purpose, just
   for its margin-bottom), so lines 1-2 never got the color and silently
   inherited some other dark default, invisible against the dark hero
   background. Give color explicitly to all three, independent of which
   one happens to carry the margin-only "hero-headline" class. */
.vc_custom_heading.hero-line-1,
.vc_custom_heading.hero-line-2,
.vc_custom_heading.hero-line-3 {
  color: var(--color-text-light) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   EDITABLE MARQUEES (testimonials + hero ticker)
   Content is authored as a single set in a WPBakery text block (client
   edits each review/badge once); pawco-main.js clones the track at runtime
   for the seamless loop. These .hrv-* styles used to live in an inline
   <style> inside the raw testimonials block — moved here when that block
   became editable. */
.pawco-marquee.wpb_text_column {
  overflow: hidden;
}
.hrv-wrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);padding:8px 0;}
.hrv-track{display:flex;gap:20px;width:max-content;animation:hrv-scroll 32s linear infinite;}
.hrv-wrap:hover .hrv-track{animation-play-state:paused;}
@keyframes hrv-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.hrv-card{background:var(--color-cream,#FAF8F0);border-radius:16px;padding:24px 22px;width:320px;flex-shrink:0;display:flex;flex-direction:column;}
.hrv-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.hrv-stars{color:#f5a623;font-size:14px;letter-spacing:3px;}
.hrv-badge{display:inline-flex;align-items:center;gap:5px;background:#e8f7f2;border:1px solid #b3e0d0;border-radius:20px;padding:3px 10px;font-size:10px;font-weight:600;color:#1a9b6c;white-space:nowrap;}
.hrv-quote{font-size:14px;line-height:1.75;color:#2d1f50;margin-bottom:20px;flex:1;}
.hrv-footer{display:flex;align-items:center;gap:12px;}
.hrv-avatar{width:40px;height:40px;border-radius:50%;background:#C9B8FF;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#1A1030;flex-shrink:0;}
.hrv-name{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#1A1030;font-weight:600;}
.hrv-service-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px;}
.hrv-service-tag{font-size:10.5px;font-weight:600;color:#1A1030;background:rgba(155,142,232,0.15);border-radius:4px;padding:2px 7px;}
.hrv-date{font-size:10.5px;color:#7a6a9a;}
/* wpautop may wrap the marquee spans in a <p> — keep it from breaking flex */
.pawco-marquee .wpb_wrapper > p { margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   NATIVE GALLERY (7 vc_single_image widgets — overlay labels removed by
   client decision). The row_inner becomes the CSS grid; columns carry the
   original .gallery-item classes so aspect-ratio/hover-zoom still apply. */
.gallery-grid.vc_row-inner,
.gallery-grid.vc_row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
/* WPBakery rows carry clearfix ::before/::after pseudo-elements; inside a
   grid container those become real grid ITEMS, silently occupying the
   first/last cells and shifting every photo one cell over. */
.gallery-grid.vc_row-inner::before,
.gallery-grid.vc_row-inner::after,
.gallery-grid.vc_row::before,
.gallery-grid.vc_row::after {
  content: none !important;
  display: none !important;
}
.gallery-grid > .wpb_column.gallery-item {
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4 / 3;
}
.gallery-grid > .wpb_column.gallery-item--wide {
  grid-column: span 2;
  aspect-ratio: 8 / 3;
}
.gallery-grid .gallery-item .vc_column-inner,
.gallery-grid .gallery-item .wpb_wrapper {
  height: 100%;
}
.gallery-grid .gallery-item img {
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gallery-grid .gallery-item:hover img {
  transform: scale(1.04);
}

/* ═══════════════════════════════════════════════════════════════════════
   NATIVE FAQ ACCORDION (vc_tta_accordion el_class="pawco-faq") — strip
   WPBakery's default accordion chrome and restyle to match the original
   .faq-item design. */
.pawco-faq .vc_tta-panels,
.pawco-faq .vc_tta-panel,
.pawco-faq .vc_tta-panel-body,
.pawco-faq .vc_tta-panel-heading {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
.pawco-faq .vc_tta-panel {
  border-bottom: 1px solid var(--color-border-light) !important;
}
.pawco-faq .vc_tta-panel-title > a {
  padding: 22px 8px 22px 0 !important;
  font-family: var(--font-primary) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  color: var(--color-text-dark) !important;
  background: transparent !important;
}
.pawco-faq .vc_tta-panel-body {
  padding: 0 0 22px 0 !important;
  font-family: var(--font-utility);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-mid);
}
/* Icon sits on the RIGHT edge like the original .faq-toggle "+" (WPBakery
   defaults it inline-left, where it overlaps the question text) */
.pawco-faq .vc_tta-panel-title > a {
  position: relative !important;
  display: block !important;
}
.pawco-faq .vc_tta-controls-icon {
  color: var(--color-gold) !important;
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translateY(-50%);
}

/* ═══════════════════════════════════════════════════════════════════════
   CONTACT FORM 7 — the .contact-form wrapper div supplies the theme's
   label/input styling; these rules cover CF7-specific markup it injects. */
.contact-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}
.contact-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  font-family: var(--font-geometric);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--color-dark);
  border-radius: 0;
  background: var(--color-dark);
  color: var(--color-text-light);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.contact-form .wpcf7-submit:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-dark);
}
.contact-form .wpcf7-spinner {
  position: absolute;
}
.contact-form .wpcf7-not-valid-tip {
  font-size: 12px;
  color: #c0392b;
  margin-top: 4px;
}
.contact-form .wpcf7-response-output {
  margin: 16px 0 0 !important;
  padding: 12px 16px !important;
  border: 1px solid var(--color-gold) !important;
  font-family: var(--font-utility);
  font-size: 14px;
  color: var(--color-text-dark);
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — every fixed-percentage flex-basis rule above was
   written for desktop only and applies UNCONDITIONALLY (no @media guard),
   so at phone widths it was forcing the same desktop column math into a
   375px screen — "500+" wrapping to "50 / 0+", 3 process steps squeezed
   into unreadable slivers, hero content+video still trying to sit
   side-by-side. Original pawco-style.css already had the right mobile
   breakpoints (@media max-width:1024px/768px/480px) for the OLD grid-based
   markup; this block reproduces the same end result for the native
   flexbox structure. Every selector here matches one above — later in
   the stylesheet + same !important wins the cascade regardless of media
   query, so these simply override the desktop rules below 768px. */
@media (max-width: 768px) {
  /* Hero: stack image below content, restore mobile-specific sizing */
  .section-hero.vc_row {
    min-height: auto;
  }
  .section-hero > .wpb_column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* Video/image column above text content on mobile (source order in
     build.py keeps hero-content first for desktop's side-by-side layout —
     this flips the visual order only, markup order is unchanged) */
  .wpb_column.hero-image-col {
    order: -1;
  }
  .wpb_column.hero-content {
    order: 1;
  }
  .section-hero .hero-image {
    height: 55vw;
    min-height: 260px;
    min-height: auto;
    /* Client flagged: at this height the video was short enough that the
       fixed 72px header covered a third of it ("video is high up... behind
       the logo, line, and menu lines"). Push the video down to start below
       the header instead of bleeding under it — was an intentional
       transparent-bleed choice, but doesn't read well at this aspect ratio. */
    margin-top: 72px;
  }
  /* Was 100px top — that cleared the fixed header when text rendered
     FIRST. Now the video renders first (order:-1 above) and bleeds under
     the transparent header itself, so the text just needs breathing room
     under the video, not header clearance. */
  .wpb_column.hero-content {
    padding: 32px 24px 52px !important;
  }
  .hero-ticker,
  .hero-line {
    display: none !important;
  }
  .hero-content .vc_btn3-container {
    display: block !important;
    margin-right: 0;
    width: 100%;
  }
  .hero-content .vc_btn3-container a.vc_btn3 {
    width: 100%;
    justify-content: center;
  }

  /* Stats: 2 columns, not 4 (prevents "500+" wrapping mid-word) */
  .section-stats > .wpb_column {
    flex: 0 0 47% !important;
    max-width: 47% !important;
  }

  /* Services / process / values grids: single column */
  .services-grid > .wpb_column,
  .process-steps > .wpb_column,
  .values-grid > .wpb_column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .wpb_column.process-step {
    padding-right: 0 !important;
  }

  /* Service detail rows: stack image above content */
  .service-detail.vc_row {
    min-height: auto;
  }
  .service-detail > .wpb_column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .service-detail-image {
    height: 60vw;
    min-height: 260px;
  }
  .wpb_column.service-detail-content {
    padding: 40px 24px !important;
  }
  .service-detail-content .vc_btn3-container {
    display: block !important;
    width: 100%;
  }
  .service-detail-content .vc_btn3-container a.vc_btn3 {
    width: 100%;
    justify-content: center;
  }

  /* Reassurance strip (booking page): 2 columns, not 4 */
  .reassurance-strip > .wpb_column {
    flex: 0 0 47% !important;
    max-width: 47% !important;
  }

  /* Contact split: stack, and critically allow wrap (desktop rule forces
     nowrap, which would otherwise squeeze both columns side-by-side) */
  .contact-split.vc_row,
  .contact-split.vc_row-inner {
    flex-wrap: wrap !important;
  }
  .contact-split > .wpb_column:first-child,
  .contact-split > .wpb_column:last-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* About split image: match mobile height treatment */
  .wpb_column.about-split-content {
    padding: 40px 24px !important;
  }

  /* Client flagged a "big gap between the 2nd and 3rd paragraph" on About.
     Both paragraphs are the same continuous first-person letter, but land
     on either side of a section boundary (split-image section ends, cream
     story section begins) — .about-split-content's own 40px bottom padding
     + about-story-section's 44px top padding (--space-section-md at this
     breakpoint) stack into a 119px gap that reads as broken mid-letter.
     Trim just the story section's top padding; its bottom padding (spacing
     before "What I Stand For") is untouched. */
  .about-story-section {
    padding-top: 16px !important;
  }

  /* Native gallery: 2 columns on tablet/mobile (matches original 768px rule) */
  .gallery-grid.vc_row-inner,
  .gallery-grid.vc_row {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-grid > .wpb_column.gallery-item--wide {
    grid-column: span 2;
    aspect-ratio: 16 / 9;
  }

  /* Page hero: mobile padding + stacked full-width buttons */
  .wpb_column.page-hero {
    padding: 110px 24px 48px !important;
  }
  .page-hero .vc_btn3-container {
    display: block !important;
    margin-right: 0;
    width: 100%;
  }
  .page-hero .vc_btn3-container a.vc_btn3 {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  /* Reassurance collapses further to a single column; stats stays 2-up
     (matches original theme's .stats-grid { grid-template-columns: 1fr 1fr }
     at this breakpoint — only reassurance/testimonials went to 1 column) */
  .reassurance-strip > .wpb_column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Native gallery: single column on phones (matches original 480px rule) */
  .gallery-grid.vc_row-inner,
  .gallery-grid.vc_row {
    grid-template-columns: 1fr;
  }
  .gallery-grid > .wpb_column.gallery-item--wide {
    grid-column: span 1;
    aspect-ratio: 4 / 3;
  }
}