/* ==========================================================================
   Shardz Section Library — CSS
   Full-width section backgrounds, contained content via .shz-container.
   ========================================================================== */

/* ── Shared utilities ────────────────────────────────────────────────────────── */

.shz-s-hero,
.shz-s-features,
.shz-s-cta,
.shz-s-stats,
.shz-s-text,
.shz-s-cards,
.shz-s-testimonials,
.shz-s-faq,
.shz-s-logos,
.shz-s-video-gallery,
.shz-s-feature-list,
.shz-s-video-banner {
  width: 100%;
  position: relative;
}

/* Every emoji/text icon shardz_render_icon() outputs (inc/sections.php) is
   a single <span class="shz-icon-text ..."> — plain inline by default, so
   any per-context width/height (e.g. .shz-s-highlight__icon's 16x16) was
   silently ignored by the browser (inline elements don't respect
   width/height), and with no line-height control an emoji glyph's own
   font metrics (usually taller/differently-baselined than the Latin text
   next to it) rendered visibly off-center against its label — confirmed
   live on the "Before Header" trust bar. inline-flex here makes those
   per-context width/height declarations take effect AND centers the glyph
   within its own box regardless of the emoji font's internal metrics, in
   every context this class is used (nested in an already-flex icon box
   like .shz-s-feature-card__icon, or standalone like .shz-s-highlight__icon). */
.shz-icon-text,
.shz-icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.shz-icon-svg svg {
  display: block;
}

/* Section heading block */
.shz-s-section-header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 680px;
  margin-inline: auto;
}

.shz-s-section-title {
  font-size: clamp(1.625rem, 2.6vw, 2.125rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 0.75rem;
  color: var(--shz-text);
}

.shz-s-section-sub {
  color: var(--shz-muted);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.7;
  max-width: 560px;
  margin-inline: auto;
}

/* ── HERO ────────────────────────────────────────────────────────────────────── */
.shz-s-hero {
  display: flex;
  align-items: center;
  background-color: var(--shz-navy);
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}

/* Gradient overlay — ensures text legibility over a plain color/gradient
   background. Deliberately heavy (~90%/70% opaque) since there's no photo
   to preserve here — this is effectively the hero's own background look. */
.shz-s-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(19, 41, 55, 0.93) 0%,
    rgba(13, 30, 41, 0.72) 55%,
    rgba(215, 38, 133, 0.1) 100%
  );
  pointer-events: none;
}
/* Same overlay, much lighter, for when a real bg_image is set - a photo
   should actually be visible through it (just enough tint to keep white
   text readable), not hidden underneath a near-opaque gradient. */
.shz-s-hero--has-image .shz-s-hero__overlay {
  background: linear-gradient(
    135deg,
    rgba(19, 41, 55, 0.55) 0%,
    rgba(13, 30, 41, 0.4) 55%,
    rgba(19, 41, 55, 0.25) 100%
  );
}

/* Explicit overlay override (the `overlay` field, default "auto" which is
   the two rules above) - for a busy/bright photo where "light" isn't
   enough contrast for text, or a plain-color hero that wants less than
   the default heavy look. Takes priority over --has-image via source
   order + matching specificity, since these classes are always added
   together on the same element (see shz_hero in inc/sections.php). */
.shz-s-hero--overlay-none .shz-s-hero__overlay {
  display: none;
}
.shz-s-hero--overlay-light .shz-s-hero__overlay {
  background: linear-gradient(
    135deg,
    rgba(19, 41, 55, 0.55) 0%,
    rgba(13, 30, 41, 0.4) 55%,
    rgba(19, 41, 55, 0.25) 100%
  );
}
.shz-s-hero--overlay-medium .shz-s-hero__overlay {
  background: linear-gradient(
    135deg,
    rgba(19, 41, 55, 0.75) 0%,
    rgba(13, 30, 41, 0.6) 55%,
    rgba(19, 41, 55, 0.4) 100%
  );
}
.shz-s-hero--overlay-dark .shz-s-hero__overlay {
  background: linear-gradient(
    135deg,
    rgba(19, 41, 55, 0.93) 0%,
    rgba(13, 30, 41, 0.72) 55%,
    rgba(215, 38, 133, 0.1) 100%
  );
}

/* Decorative ambient glow */
.shz-s-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse 80% 60% at 70% 15%,
      rgba(215, 38, 133, 0.14) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 60% 50% at 15% 85%,
      rgba(126, 203, 232, 0.1) 0%,
      transparent 52%
    );
  pointer-events: none;
}

/* Bottom accent line */
.shz-s-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--shz-grad-accent);
}

.shz-s-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(4rem, 10vw, 7rem);
  width: 100%;
}

.shz-s-hero--centered .shz-s-hero__inner {
  text-align: center;
}
.shz-s-hero--centered .shz-s-hero__actions {
  justify-content: center;
}

/* Tagline / eyebrow badge */
.shz-s-hero__tagline {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 1.1em;
  background: rgba(215, 38, 133, 0.12);
  border: 1px solid rgba(215, 38, 133, 0.3);
  color: var(--shz-mint);
  border-radius: var(--shz-r-full);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.shz-s-hero__tagline::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--shz-pink);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--shz-pink);
}

.shz-s-hero__heading {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-family: var(--shz-font-heading);
  font-weight: 800; /* was 900 (Montserrat Black), which read as too heavy */
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.04em;
  max-width: 860px;
  margin-bottom: 1.5rem;
}
/* Per-hero size override (Hero's own "Heading Size" field) — a class
   selector, so it always wins over the plain `h2{font-size}` rule Design →
   Styles' global Heading Scale emits, the same way the un-overridden rule
   above always did. */
.shz-s-hero--heading-small .shz-s-hero__heading {
  font-size: clamp(1.75rem, 4vw, 3rem);
}
.shz-s-hero--heading-large .shz-s-hero__heading {
  font-size: clamp(3rem, 7vw, 6rem);
}
.shz-s-hero--centered .shz-s-hero__heading {
  margin-inline: auto;
}

.shz-s-hero__subtext {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.72);
  max-width: 580px;
  line-height: 1.75;
  margin-bottom: 2.5rem;
}
.shz-s-hero--centered .shz-s-hero__subtext {
  margin-inline: auto;
}

/* Hours line — sits directly under the CTA buttons, same optional-content
   slot regardless of hero style (centered/left/split all just stack it). */
.shz-s-hero__hours {
  margin-top: 1.25rem;
  margin-bottom: 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.72);
}
.shz-s-hero__hours strong {
  color: #fff;
}
.shz-s-hero--centered .shz-s-hero__hours {
  text-align: center;
}

/* Inline trust checklist — a handful of short checkmark pills, for a hero
   that wants more credibility signal than the subtext alone without pulling
   in a full separate highlights-bar section. */
.shz-s-hero__trust-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.shz-s-hero--centered .shz-s-hero__trust-list {
  align-items: center;
  margin-inline: auto;
}
.shz-s-hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 1em;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--shz-r-full);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
}
.shz-s-hero__trust-check {
  flex-shrink: 0;
  color: var(--shz-mint);
}

/* "Split" layout: heading dominates the left column, subtext + CTA sit as a
   secondary block in the right column instead of stacking under the
   heading. Built with CSS Grid areas on the SAME flat sibling markup every
   other hero style already uses (tagline/heading/subtext/actions as direct
   children of __inner) - no shortcode/markup changes needed, just placement. */
.shz-s-hero--split .shz-s-hero__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-areas:
    "tagline tagline"
    "heading subtext"
    "heading actions";
  align-items: end;
  column-gap: clamp(2rem, 5vw, 4rem);
}
/* .shz-s-hero__hours/__trust-list have no named grid-area here — hours/
   trust items are meant for the request-service split-FORM hero below
   (plain block layout there), not the text-only split. If both are set on
   a plain split hero anyway, CSS grid auto-places them into a new implicit
   row under column 1 rather than overlapping anything. */
.shz-s-hero--split .shz-s-hero__tagline {
  grid-area: tagline;
}
.shz-s-hero--split .shz-s-hero__heading {
  grid-area: heading;
  margin-bottom: 0;
  max-width: none;
}
.shz-s-hero--split .shz-s-hero__subtext {
  grid-area: subtext;
  margin-bottom: 1.5rem;
  max-width: none;
}
.shz-s-hero--split .shz-s-hero__actions {
  grid-area: actions;
}
/* A colored primary button reads as "just another element" against a busy
   photo - matches .shz-btn--light (index.css) so this style's CTA is a
   clear, high-contrast white pill without needing a new admin field. */
.shz-s-hero--split .shz-s-hero__actions .shz-btn--primary {
  background: #fff;
  color: var(--shz-navy);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.shz-s-hero--split .shz-s-hero__actions .shz-btn--primary:hover {
  background: var(--shz-surface);
  color: var(--shz-navy);
}
@media (max-width: 782px) {
  .shz-s-hero--split .shz-s-hero__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "tagline"
      "heading"
      "subtext"
      "actions";
  }
}

/* "Split" layout WITH a real image, OR with a lead-capture form
   (design-system Phase 2) — TWO additive modifiers alongside the existing
   .shz-s-hero--split (never replacing it: that class name is pinned by the
   Builder↔theme variant-parity contract), so none of the rules above are
   touched and a text-only split hero is byte-for-byte unchanged.
   .shz-s-hero__split-row is the shared two-column grid for both variants;
   .shz-s-hero__inner reverts to plain block stacking inside its column
   (the heading/subtext/actions grid-area arrangement above was designed for
   FULL section width and would cram awkwardly into half of it). Split-form
   additionally keeps the classic full-bleed bg_image + .shz-s-hero__overlay
   (unlike split-media, where the photo IS the second column instead of a
   background) — .shz-s-hero .shz-container's existing position:relative;
   z-index:1 rule already covers .shz-s-hero__split-row (same element, both
   classes), so the overlay stacks correctly underneath with no extra rule. */
.shz-s-hero--split-media .shz-s-hero__split-row,
.shz-s-hero--split-form .shz-s-hero__split-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  column-gap: clamp(2rem, 5vw, 4rem);
  width: 100%;
  padding-block: clamp(3rem, 8vw, 6rem);
}
.shz-s-hero--split-media .shz-s-hero__inner,
.shz-s-hero--split-form .shz-s-hero__inner {
  display: block;
}
.shz-s-hero--split-media .shz-s-hero__heading,
.shz-s-hero--split-media .shz-s-hero__subtext,
.shz-s-hero--split-form .shz-s-hero__heading,
.shz-s-hero--split-form .shz-s-hero__subtext {
  max-width: none;
}
.shz-s-hero__media,
.shz-s-hero__form-card {
  /* Visual position only (see the mobile/media-left order rules below) —
     this does not change DOM/reading/tab order, which stays text-first
     either way. */
  order: 2;
  /* Without this, both stay position:static — and CSS always paints
     ABSOLUTELY POSITIONED siblings (.shz-s-hero__overlay, .shz-s-hero
     ::before's ambient glow) above static content, regardless of DOM
     order. Confirmed live: the glow/overlay visibly washing across the
     form card's own surface. Same treatment .shz-s-hero__inner already
     gets, for the same reason. */
  position: relative;
  z-index: 1;
}
.shz-s-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--shz-r-lg, 16px);
}

/* image_side="left" (or the equivalent form-card placement) — an explicit
   opt-in modifier, not the default, so existing split-media/split-form
   heroes (image_side omitted = "right") render exactly as before. */
.shz-s-hero--media-left .shz-s-hero__media,
.shz-s-hero--media-left .shz-s-hero__form-card {
  order: -1;
}

/* Lead-capture form card (split-form only) — a solid, readable surface
   over a busy photo background, matching the plain-hero contrast problem
   .shz-s-hero--has-image already solves for text, but for an actual form
   instead: the form's own fields need a real background, not white text
   over a photo. */
.shz-s-hero__form-card {
  background: var(--shz-bg, #fff);
  color: var(--shz-text, #0f172a);
  border-radius: var(--shz-r-lg, 16px);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
/* Most third-party form plugins (Contact Form 7, Gravity Forms, WPForms)
   render their own inputs/labels with the SITE's default (light-surface)
   styling already, which is exactly right against this card's light
   background — no plugin-specific overrides needed here, deliberately, so
   this keeps working regardless of which form plugin a client uses. */

@media (max-width: 782px) {
  .shz-s-hero--split-media .shz-s-hero__split-row,
  .shz-s-hero--split-form .shz-s-hero__split-row {
    grid-template-columns: 1fr;
    padding-block: clamp(2rem, 8vw, 3rem);
  }
  /* Image shows first on a narrow screen (common hero convention, and the
     natural single-column stack order otherwise) while DOM order — and so
     reading/tab order for assistive tech — stays text-first; `order` only
     moves the box visually. media-left's desktop order:-1 would only ADD
     to this, not conflict, so no override is needed for that case.
     The form card does NOT get the same treatment: a lead-capture form
     with no heading/context above it (confirmed live: the form filling
     the entire screen on mobile, nothing else visible) is a materially
     worse experience than a photo showing first - reading order (heading,
     subtext, CTA, THEN the form) is what mobile actually needs here. */
  .shz-s-hero__media {
    order: -1;
    margin-bottom: 1.5rem;
  }
  .shz-s-hero__form-card {
    margin-top: 1.5rem;
  }
}

/* ── FEATURES GRID ───────────────────────────────────────────────────────────── */
.shz-s-features {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--shz-surface);
}

.shz-s-features__grid {
  display: grid;
  gap: 1.5rem;
}
.shz-s-features--cols-2 .shz-s-features__grid {
  grid-template-columns: repeat(2, 1fr);
}
.shz-s-features--cols-3 .shz-s-features__grid {
  grid-template-columns: repeat(3, 1fr);
}
.shz-s-features--cols-4 .shz-s-features__grid {
  grid-template-columns: repeat(4, 1fr);
}

.shz-s-feature-card {
  padding: 2rem;
  border: 1px solid var(--shz-border);
  border-radius: 1rem;
  background: var(--shz-white);
  transition: all var(--shz-t-base);
  position: relative;
  overflow: hidden;
}

/* Gradient accent line slides in on hover */
.shz-s-feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--shz-grad-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--shz-t-base);
}
.shz-s-feature-card:hover::before {
  transform: scaleX(1);
}
.shz-s-feature-card:hover {
  border-color: rgba(215, 38, 133, 0.18);
  box-shadow: 0 16px 48px rgba(19, 41, 55, 0.12);
  transform: translateY(-4px);
}

.shz-s-feature-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(215, 38, 133, 0.1) 0%,
    rgba(126, 203, 232, 0.1) 100%
  );
  border: 1px solid rgba(215, 38, 133, 0.15);
  border-radius: 0.875rem;
  margin-bottom: 1.25rem;
}
.shz-s-feature-card__icon .dashicons {
  font-size: 26px;
  width: 26px;
  height: 26px;
  color: var(--shz-pink);
}
.shz-s-feature-card__icon .shz-icon-text,
.shz-s-feature-card__icon .shz-icon-svg {
  font-size: 26px;
  line-height: 1;
}

.shz-s-feature-card__dot {
  width: 10px;
  height: 10px;
  background: var(--shz-grad-accent);
  border-radius: var(--shz-r-full);
  margin-bottom: 1.25rem;
  box-shadow: 0 0 10px rgba(215, 38, 133, 0.45);
}

.shz-s-feature-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
  color: var(--shz-text);
  letter-spacing: -0.015em;
}

.shz-s-feature-card__desc {
  font-size: 0.9375rem;
  color: var(--shz-muted);
  line-height: 1.7;
}

/* ── CTA BANNER ──────────────────────────────────────────────────────────────── */
.shz-s-cta {
  padding-block: clamp(3rem, 6vw, 5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Content sits above pseudo-element decorations */
.shz-s-cta .shz-container {
  position: relative;
  z-index: 1;
}

/* Texture background (design-system Phase 2) — purely decorative layers
   behind the content; z-index:0 keeps them under .shz-container's z-index:1
   above, pointer-events:none is defense in depth against ever blocking a
   click even if stacking is somehow wrong, and opacity lives on THESE
   elements only, never on .shz-container, so it can never dim the text. */
.shz-s-cta__texture,
.shz-s-cta__texture-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Gradient style */
.shz-s-cta--gradient {
  background: linear-gradient(145deg, var(--shz-navy) 0%, #0d1e29 100%);
  color: rgba(255, 255, 255, 0.9);
}
.shz-s-cta--gradient::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--shz-grad-accent);
}
/* Decorative radial blobs */
.shz-s-cta--gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse 60% 70% at 85% 50%,
      rgba(215, 38, 133, 0.15) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 50% 60% at 10% 60%,
      rgba(126, 203, 232, 0.1) 0%,
      transparent 50%
    );
  pointer-events: none;
}

.shz-s-cta--navy {
  background: var(--shz-navy);
  color: rgba(255, 255, 255, 0.9);
}
.shz-s-cta--pink {
  background: var(--shz-pink);
  color: #fff;
}
.shz-s-cta--surface {
  background: var(--shz-surface);
  color: var(--shz-text);
}

.shz-s-cta__heading {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 1rem;
}
.shz-s-cta--gradient .shz-s-cta__heading,
.shz-s-cta--navy .shz-s-cta__heading,
.shz-s-cta--pink .shz-s-cta__heading {
  color: #fff;
}

.shz-s-cta__subtext {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  opacity: 0.78;
  max-width: 540px;
  margin-inline: auto;
  margin-bottom: 2.5rem;
  line-height: 1.75;
}

/* ── STATS ROW ───────────────────────────────────────────────────────────────── */
.shz-s-stats {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--shz-navy);
  position: relative;
  overflow: hidden;
}

.shz-s-stats::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--shz-grad-accent);
}

/* Subtle dot grid */
.shz-s-stats::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(215, 38, 133, 0.07) 1px,
    transparent 1px
  );
  background-size: 40px 40px;
  pointer-events: none;
}

.shz-s-stats .shz-container {
  position: relative;
  z-index: 1;
}

.shz-s-stats__heading {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}

.shz-s-stats__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.shz-s-stat {
  text-align: center;
}

.shz-s-stat {
  /* Keeps the grid orderly regardless of whether "number" holds a short
     numeral ("500+") or a multi-word phrase ("No Surprises") - without this,
     a long phrase at __number's large font-size stretches its whole flex
     item far wider than its neighbors instead of wrapping under itself. */
  max-width: 220px;
}

.shz-s-stat__number {
  display: block;
  font-family: var(--shz-font-heading);
  /* Tuned down from clamp(2.75rem, 6vw, 4.5rem) - that size (up to 72px) was
     right for a short numeral like "500+" or "24/7", but this field also
     regularly holds short phrases ("Same-Day", "No Surprises"); at the old
     size those rendered enormous and blew out the section's layout. This
     scale still reads as a bold stat at a glance for numerals, without
     overwhelming the page when the content is a word or two instead. */
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 900;
  line-height: 1.15;
  background: var(--shz-grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}

.shz-s-stat__label {
  display: block;
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* ── TEXT BLOCK ──────────────────────────────────────────────────────────────── */
.shz-s-text {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--shz-white);
}

.shz-s-text--center {
  text-align: center;
}
.shz-s-text--center .shz-s-text__body > * {
  margin-inline: auto;
}

.shz-s-text__heading {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin-bottom: 1.25rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

/* ── CARD GRID ───────────────────────────────────────────────────────────────── */
.shz-s-cards {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--shz-surface);
}

.shz-s-cards__grid {
  display: grid;
  gap: 1.5rem;
}
.shz-s-cards__grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.shz-s-cards__grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.shz-s-cards__grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.shz-s-card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: var(--shz-white);
  border: 1px solid var(--shz-border);
  border-radius: 1rem;
  transition: all var(--shz-t-base);
  position: relative;
  overflow: hidden;
}

/* Accent line sweeps from bottom on hover */
.shz-s-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--shz-grad-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--shz-t-base);
}
.shz-s-card:hover::after {
  transform: scaleX(1);
}
.shz-s-card:hover {
  box-shadow: 0 16px 48px rgba(19, 41, 55, 0.1);
  transform: translateY(-4px);
  border-color: rgba(215, 38, 133, 0.15);
}

/* Optional per-card photo (`img` repeater field) — bleeds edge-to-edge at
   the top of the card via negative margins that exactly cancel .shz-s-card's
   own padding, rather than restructuring the card's markup/padding model.
   Wins over `icon` when both are set (shz_cards in inc/sections.php only
   ever renders one or the other, never both). */
.shz-s-card--has-media {
  padding-top: 0;
}
.shz-s-card__media {
  margin: 0 -1.75rem 1.25rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.shz-s-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shz-s-card__icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(215, 38, 133, 0.1) 0%,
    rgba(126, 203, 232, 0.1) 100%
  );
  border: 1px solid rgba(215, 38, 133, 0.15);
  border-radius: 0.875rem;
  margin-bottom: 1.25rem;
}
.shz-s-card__icon .dashicons {
  font-size: 24px;
  width: 24px;
  height: 24px;
  color: var(--shz-pink);
}
.shz-s-card__icon .shz-icon-text,
.shz-s-card__icon .shz-icon-svg {
  font-size: 24px;
  line-height: 1;
}

.shz-s-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.015em;
}
.shz-s-card__title a {
  color: var(--shz-text);
}
.shz-s-card__title a:hover {
  color: var(--shz-pink);
}

.shz-s-card__desc {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--shz-muted);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.shz-s-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--shz-pink);
  transition: gap var(--shz-t-fast);
}
.shz-s-card__link::after {
  content: "→";
}
.shz-s-card__link:hover {
  color: var(--shz-pink-hover);
  gap: 0.625rem;
}

/* ── TESTIMONIALS ────────────────────────────────────────────────────────────── */
.shz-s-testimonials {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--shz-white);
}

.shz-s-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 1.5rem;
}

.shz-s-testimonial {
  padding: 2rem;
  border: 1px solid var(--shz-border);
  border-radius: 1rem;
  background: var(--shz-white);
  position: relative;
  transition: all var(--shz-t-base);
  overflow: hidden;
}
.shz-s-testimonial::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--shz-grad-accent);
}
.shz-s-testimonial:hover {
  border-color: rgba(215, 38, 133, 0.2);
  box-shadow: 0 12px 40px rgba(19, 41, 55, 0.1);
  transform: translateY(-3px);
}

.shz-s-testimonial__stars {
  color: var(--shz-pink);
  font-size: 1rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.shz-s-testimonial__quote {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--shz-text);
  font-style: normal;
  margin-bottom: 1.25rem;
  border: none;
  padding: 0;
}

.shz-s-testimonial__attribution {
  margin-top: auto;
}
.shz-s-testimonial__name {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--shz-text);
}
.shz-s-testimonial__company {
  font-size: 0.8125rem;
  color: var(--shz-muted);
}

/* ── FAQ ─────────────────────────────────────────────────────────────────────── */
.shz-s-faq {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--shz-white);
}

.shz-s-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.shz-s-faq__item {
  border: 1px solid var(--shz-border);
  border-radius: 0.875rem;
  overflow: hidden;
  transition: border-color var(--shz-t-fast);
}
.shz-s-faq__item[open] {
  border-color: rgba(215, 38, 133, 0.3);
}

.shz-s-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  list-style: none;
  color: var(--shz-text);
  user-select: none;
  gap: 1rem;
}
.shz-s-faq__question::-webkit-details-marker {
  display: none;
}
.shz-s-faq__question:hover {
  color: var(--shz-pink);
}

.shz-s-faq__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  position: relative;
  color: var(--shz-pink);
}
.shz-s-faq__icon::before,
.shz-s-faq__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--shz-t-base);
}
.shz-s-faq__icon::before {
  width: 12px;
  height: 2px;
  top: 10px;
  left: 5px;
}
.shz-s-faq__icon::after {
  width: 2px;
  height: 12px;
  top: 5px;
  left: 10px;
}
.shz-s-faq__item[open] .shz-s-faq__icon::after {
  transform: rotate(90deg);
}

.shz-s-faq__answer {
  padding: 0 1.5rem 1.5rem;
  color: var(--shz-muted);
  line-height: 1.75;
}

/* ── COLUMNS ─────────────────────────────────────────────────────────────────── */
.shz-s-columns {
  display: grid;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.shz-s-columns--gap-sm {
  gap: var(--shz-s4);
}
.shz-s-columns--gap-md {
  gap: var(--shz-s6);
}
.shz-s-columns--gap-lg {
  gap: var(--shz-s8);
}
.shz-s-columns--2 {
  grid-template-columns: repeat(2, 1fr);
}
.shz-s-columns--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* ── LOGO STRIP ──────────────────────────────────────────────────────────────── */
.shz-s-logos {
  padding-block: var(--shz-s6);
  background: var(--shz-surface);
  border-top: 1px solid var(--shz-border);
  border-bottom: 1px solid var(--shz-border);
}

.shz-s-logos__heading {
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--shz-muted);
  margin-bottom: 1.5rem;
}

.shz-s-logos__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}

.shz-s-logos__item img {
  height: 32px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.5;
  transition: all var(--shz-t-base);
}
.shz-s-logos__item img:hover {
  filter: none;
  opacity: 1;
}

.shz-s-logos__text {
  font-family: var(--shz-font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--shz-muted);
  letter-spacing: -0.01em;
}

/* ── VIDEO GALLERY ───────────────────────────────────────────────────────────── */
.shz-s-video-gallery__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
}
.shz-s-video-gallery__grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.shz-s-video-gallery__grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Testimonial clips are typically phone-recorded and portrait, unlike most
   video embeds elsewhere on the web (which default to 16:9 landscape) -
   9:16 is the sane default for THIS block's actual use case. If a given
   site ends up using mostly landscape clips instead, this is the one
   value to revisit. */
.shz-s-video-gallery__item {
  position: relative;
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: 0.75rem;
  overflow: hidden;
}
.shz-s-video-gallery__item video,
.shz-s-video-gallery__item iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
}

@media (max-width: 768px) {
  .shz-s-video-gallery__grid--3,
  .shz-s-video-gallery__grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .shz-s-video-gallery__grid--2,
  .shz-s-video-gallery__grid--3,
  .shz-s-video-gallery__grid--4 {
    grid-template-columns: 1fr;
  }
}

/* ── FEATURE LIST (icon list beside an image) ─────────────────────────────────── */
.shz-s-feature-list {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--shz-white);
}

/* Split header - heading on the left, supporting copy on the right, instead
   of the centered/stacked .shz-s-section-header every other block uses. A
   deliberate visual break from that convention for this one block, matching
   the reference layout this was built from. */
.shz-s-feature-list__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.shz-s-feature-list__title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--shz-text);
  max-width: 480px;
}
.shz-s-feature-list__sub {
  color: var(--shz-muted);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 480px;
  text-align: right;
}

.shz-s-feature-list__body {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;
}
.shz-s-feature-list--right .shz-s-feature-list__body {
  grid-template-columns: 1.1fr 1fr;
}
.shz-s-feature-list--right .shz-s-feature-list__media {
  order: 2;
}

.shz-s-feature-list__media {
  border-radius: var(--shz-r-lg, 1rem);
  overflow: hidden;
  min-height: 320px;
  /* Without a cap this grid item stretches (align-items:stretch on .body)
     to match whatever height the list column needs — a long item list
     made the photo balloon far taller than a photo section should read
     (feedback: "less big of photo"). 26rem then read as too small the
     other way ("way too small height") — 34rem splits the difference. */
  max-height: 34rem;
}
.shz-s-feature-list__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text column stays in view while the (usually taller) photo scrolls past,
   releasing once it reaches the bottom of its own row — not the whole
   page — since `align-self: start` keeps it sized to its own content
   instead of `__body`'s `align-items: stretch`, which otherwise would have
   already stretched it to the full row height with nowhere left to stick.
   Desktop-only: pointless (and awkward) once the columns stack on mobile. */
@media (min-width: 783px) {
  .shz-s-feature-list__items {
    align-self: start;
    position: sticky;
    top: 2rem;
  }
}

.shz-s-feature-list__items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.shz-s-feature-list__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--shz-surface);
  border-radius: var(--shz-r-md, 0.5rem);
}
.shz-s-feature-list__icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--shz-r-md, 0.5rem);
  background: var(--shz-pink);
  color: #fff;
  font-size: 1.125rem;
}
.shz-s-feature-list__item-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--shz-text);
  margin-bottom: 0.25rem;
}
.shz-s-feature-list__item-desc {
  font-size: 0.9375rem;
  color: var(--shz-muted);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 782px) {
  .shz-s-feature-list__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .shz-s-feature-list__sub {
    text-align: left;
  }
  .shz-s-feature-list__body,
  .shz-s-feature-list--right .shz-s-feature-list__body {
    grid-template-columns: 1fr;
  }
  .shz-s-feature-list--right .shz-s-feature-list__media {
    order: 0;
  }
  .shz-s-feature-list__media {
    min-height: 220px;
  }
}

/* ── VIDEO BANNER (poster image, click-to-play) ───────────────────────────────── */
.shz-s-video-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
}
.shz-s-video-banner__media {
  position: absolute;
  inset: 0;
}
.shz-s-video-banner__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shz-s-video-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(19, 41, 55, 0.45);
  pointer-events: none;
}
.shz-s-video-banner__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--shz-navy);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.2s,
    background 0.2s;
}
.shz-s-video-banner__play svg {
  margin-left: 3px; /* optical centering - the play triangle's own visual weight sits left of its bounding box */
}
.shz-s-video-banner__play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: #fff;
}
/* Swapped in by assets/index.js on click, replacing the poster+play button
   with a real iframe (YouTube/Vimeo) or <video> (self-hosted file). */
.shz-s-video-banner__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.shz-s-video-banner__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 6vw, 5rem);
  pointer-events: none;
}
.shz-s-video-banner__inner .shz-btn {
  pointer-events: auto;
}
.shz-s-video-banner__heading {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-family: var(--shz-font-heading);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}
.shz-s-video-banner__subtext {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: rgba(255, 255, 255, 0.85);
  max-width: 560px;
  margin: 0 auto 1.5rem;
  line-height: 1.7;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .shz-s-features--cols-4 .shz-s-features__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .shz-s-cards__grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .shz-s-features--cols-2 .shz-s-features__grid,
  .shz-s-features--cols-3 .shz-s-features__grid,
  .shz-s-features--cols-4 .shz-s-features__grid {
    grid-template-columns: 1fr;
  }
  .shz-s-cards__grid--2,
  .shz-s-cards__grid--3,
  .shz-s-cards__grid--4 {
    grid-template-columns: 1fr;
  }
  .shz-s-columns--2,
  .shz-s-columns--3 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   HOME SERVICE SECTIONS
   ========================================================================== */

/* ── Emergency Bar ─────────────────────────────────────────────────────────── */
.shz-s-emergency {
  background: linear-gradient(90deg, #dc2626 0%, #b91c1c 100%);
  color: #fff;
  padding: 0.75rem 1rem;
}
.shz-s-emergency__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.shz-s-emergency__icon {
  font-size: 1.25rem;
}
.shz-s-emergency__text {
  font-weight: 600;
  font-size: 0.9375rem;
}
.shz-s-emergency__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  color: #dc2626;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  text-decoration: none;
  font-weight: 700;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.shz-s-emergency__cta:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.shz-s-emergency--pulse .shz-s-emergency__cta {
  animation: shz-pulse 2s infinite;
}
@keyframes shz-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
}
.shz-s-emergency--sticky {
  position: sticky;
  top: 0;
  z-index: 100;
}
.shz-s-emergency--floating {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* ── Trust Badges ──────────────────────────────────────────────────────────── */
.shz-s-badges {
  padding: var(--shz-spacing-section, 4rem) 0;
}
.shz-s-badges__heading {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1.5rem;
}
.shz-s-badges__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  max-width: 960px;
  margin-inline: auto;
}
.shz-s-badges__item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 1rem;
  background: var(--shz-surface, #f8fafc);
  border: 1px solid var(--shz-border, #e2e8f0);
  border-radius: var(--shz-radius-md, 10px);
}
.shz-s-badges--cards .shz-s-badges__item {
  flex-direction: column;
  text-align: center;
  gap: 0.4rem;
  padding: 1.1rem 1rem;
}
.shz-s-badges__icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.shz-s-badges__icon-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}
.shz-s-badges__content {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.shz-s-badges__title {
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.2;
}
.shz-s-badges__value {
  font-size: 1rem;
  font-weight: 800;
  color: var(--shz-pink, #d72685);
}
.shz-s-badges__desc {
  font-size: 0.8rem;
  color: var(--shz-muted, #64748b);
  line-height: 1.3;
}

/* ── Service Area ──────────────────────────────────────────────────────────── */
.shz-s-service-area {
  padding: var(--shz-spacing-section, 4rem) 0;
  background: var(--shz-surface, #f8fafc);
}

/* Default (no image set): a single centered column — same as before. */
.shz-s-service-area__content {
  max-width: 640px;
  margin: 0 auto;
}

/* An optional image/icon on one side turns this into a real two-column
   layout instead of the list sitting alone in a narrow centered strip with
   large empty gutters either side (feedback: "so much space on right left
   side"). Mirrors .shz-s-feature-list's media+content grid convention. */
.shz-s-service-area--img-left .shz-s-service-area__body,
.shz-s-service-area--img-right .shz-s-service-area__body {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  /* start, not stretch: a tall map graphic next to a short city list
     shouldn't force the content column to match the image's height —
     that stretched the content column's box down to the image's height,
     leaving a large dead gap below the list/toggle before the section's
     own bottom padding even started (feedback: "way too much space
     between the service area section and the bottom"). */
  align-items: stretch;
}
.shz-s-service-area--img-right .shz-s-service-area__body {
  grid-template-columns: 1.1fr 1fr;
}
.shz-s-service-area--img-right .shz-s-service-area__media {
  order: 2;
}
.shz-s-service-area--img-left .shz-s-service-area__content,
.shz-s-service-area--img-right .shz-s-service-area__content {
  max-width: none;
  margin: 0;
}
.shz-s-service-area__media {
  border-radius: var(--shz-r-lg, 1rem);
  overflow: hidden;
  min-height: 320px;
}
.shz-s-service-area__media img {
  display: block;
  width: 100%;
  /* .body is now align-items:stretch (see above), so the media column's
     own box is a definite height — the row's height — and height:100%
     here resolves against that real value instead of "auto", filling it
     instead of sitting height:auto-sized and small inside a tall column
     (feedback: "too small, not proportionate... take up that whole
     block"). `cover` would crop a state-map/icon graphic instead of a
     photo — for a map that means silently cutting off real state boundary
     (confirmed live on an earlier version: the bottom of Georgia got
     cropped off). `contain` never crops; the whole image always shows,
     letterboxed within the box instead of bleeding edge-to-edge. A real
     photo (feature_list's media) keeps `cover` — cropping a photo rarely
     loses meaning the way cropping a map/diagram does, so that block is
     intentionally left alone. */
  height: 100%;
  object-fit: contain;
}

.shz-s-service-area__icon {
  /* Pin glyph floating alone above the heading read as clutter, not a
     useful label (feedback: "this little pin above text... needs go
     away") — hidden rather than removed from inc/sections.php so it's a
     one-line revert if that changes later. */
  display: none;
}
.shz-s-service-area__heading {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}
.shz-s-service-area__subtext {
  color: var(--shz-muted, #64748b);
  margin-bottom: 1.5rem;
}

/* A scannable, bordered row list rather than a wall of tag pills — the
   first 8 render open, the rest live inside the __more <details> below. */
.shz-s-service-area__cities {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--shz-border, #e2e8f0);
  font-size: 0.9rem;
}
.shz-s-service-area__city {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.125rem;
  border-bottom: 1px solid var(--shz-border, #e2e8f0);
  color: var(--shz-text, #1e293b);
  font-weight: 500;
}
.shz-s-service-area__city svg {
  flex-shrink: 0;
  color: var(--shz-pink);
}

/* The expanded (61+ city) tier scrolls inside a capped box instead of
   dumping every remaining city into the page's flow — feedback: opening it
   "floods, spams the page." A few rows peek in as a scroll affordance. */
.shz-s-service-area__cities--scroll {
  max-height: 15.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.shz-s-service-area__cities--scroll::-webkit-scrollbar {
  width: 6px;
}
.shz-s-service-area__cities--scroll::-webkit-scrollbar-thumb {
  background: var(--shz-border, #e2e8f0);
  border-radius: 999px;
}

.shz-s-service-area__more-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 0.125rem;
  color: var(--shz-navy, #132937);
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
}
/* Hide the native marker (both engines) so our own chevron is the only one. */
.shz-s-service-area__more-toggle::-webkit-details-marker {
  display: none;
}
.shz-s-service-area__more-toggle {
  list-style: none;
}
.shz-s-service-area__more-toggle::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--shz-t-fast);
}
.shz-s-service-area__more[open] .shz-s-service-area__more-toggle::after {
  transform: rotate(-135deg);
}
.shz-s-service-area__more-toggle:hover {
  color: var(--shz-pink);
}

@media (max-width: 782px) {
  .shz-s-service-area--img-left .shz-s-service-area__body,
  .shz-s-service-area--img-right .shz-s-service-area__body {
    grid-template-columns: 1fr;
  }
  /* Image dropped entirely on mobile, not just visually hidden — content
     only, per feedback ("too much spacing on the image... let's actually
     disable the image on mobile... for performance"). The <picture> source
     in inc/sections.php only matches at min-width:783px, so a phone never
     downloads the full image in the first place; this display:none is a
     layout-safety backstop, not what's doing the actual bandwidth saving. */
  .shz-s-service-area__media {
    display: none;
  }
}

/* ── Pricing Table ─────────────────────────────────────────────────────────── */
.shz-s-pricing {
  padding: var(--shz-spacing-section, 4rem) 0;
}
.shz-s-pricing__heading {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.shz-s-pricing__subtext {
  text-align: center;
  color: var(--shz-muted, #64748b);
  margin-bottom: 2.5rem;
}
.shz-s-pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}
.shz-s-pricing__cta {
  text-align: center;
  margin-top: 2.5rem;
}
.shz-s-pricing__item {
  position: relative;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: var(--shz-radius-lg, 12px);
  padding: 2rem;
  text-align: center;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.shz-s-pricing__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shz-shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.12));
}
.shz-s-pricing__item--featured {
  border-color: var(--shz-pink, #d72685);
  box-shadow: 0 0 0 4px rgba(215, 38, 133, 0.15);
}
.shz-s-pricing__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--shz-pink, #d72685);
  color: #fff;
  padding: 0.25rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}
.shz-s-pricing__name {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.shz-s-pricing__amount {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--shz-navy, #132937);
}
.shz-s-pricing__unit {
  display: block;
  font-size: 0.875rem;
  color: var(--shz-muted, #64748b);
}
.shz-s-pricing__desc {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--shz-muted, #64748b);
}

/* ── Before / After ─ Interactive Comparison Slider ──────────────────────── */
.shz-ba {
  padding: var(--shz-spacing-section, 5rem) 0;
}
.shz-ba__heading {
  text-align: center;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  letter-spacing: -0.03em;
  margin-bottom: 2rem;
}

/* Project tabs */
.shz-ba__nav {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.shz-ba__nav-btn {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--shz-muted, #64748b);
  background: transparent;
  border: 2px solid var(--shz-border, #e5e7eb);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s;
}
.shz-ba__nav-btn:hover {
  border-color: var(--shz-pink, #d72685);
  color: var(--shz-pink, #d72685);
}
.shz-ba__nav-btn--active {
  background: var(--shz-pink, #d72685);
  border-color: var(--shz-pink, #d72685);
  color: #fff;
}

/* Slide container */
.shz-ba__slides {
  position: relative;
}
.shz-ba__slide {
  display: none;
  animation: shz-ba-fadeIn 0.4s ease;
}
.shz-ba__slide--active {
  display: block;
}
@keyframes shz-ba-fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── The comparison viewer (the magic part) ── */
.shz-ba__viewer {
  position: relative;
  overflow: hidden;
  border-radius: var(--shz-radius-lg, 16px);
  cursor: col-resize;
  -webkit-user-select: none;
  user-select: none;
  background: #0a0a0a;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
}

/* After image — fills the whole container */
.shz-ba__img--after {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Clip container — overlays the before image and clips from the right */
.shz-ba__clip {
  position: absolute;
  inset: 0;
  width: 50%; /* JS updates this */
  overflow: hidden;
}
.shz-ba__img--before {
  display: block;
  width: 100%; /* sized to the viewer, not the clip */
  height: 100%;
  object-fit: cover;
}
/* Force the before image to stay full-width relative to the viewer */
.shz-ba__clip .shz-ba__img--before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw; /* overridden by JS to match viewer width */
  max-width: none;
  height: 100%;
}

/* Placeholder for missing images */
.shz-ba__placeholder {
  aspect-ratio: 16 / 9;
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ── Drag handle ── */
.shz-ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%; /* JS updates this */
  transform: translateX(-50%);
  width: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  pointer-events: none;
}
.shz-ba__handle-line {
  flex: 1;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
.shz-ba__handle-grip {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: var(--shz-navy, #132937);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.3),
    0 0 0 3px rgba(255, 255, 255, 0.5);
  pointer-events: auto;
  cursor: col-resize;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.shz-ba__handle-grip:hover,
.shz-ba__viewer.is-dragging .shz-ba__handle-grip {
  transform: scale(1.1);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 0 0 4px rgba(255, 255, 255, 0.7);
}

/* Labels */
.shz-ba__label {
  position: absolute;
  top: 1rem;
  padding: 0.375rem 1rem;
  background: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 6px;
  pointer-events: none;
  z-index: 5;
}
.shz-ba__label--before {
  left: 1rem;
}
.shz-ba__label--after {
  right: 1rem;
}

/* Info below viewer */
.shz-ba__info {
  padding: 1.25rem 0.5rem;
  text-align: center;
}
.shz-ba__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}
.shz-ba__desc {
  font-size: 0.9375rem;
  color: var(--shz-muted, #64748b);
  margin: 0;
}

/* Prev / Next arrows */
.shz-ba__arrows {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.shz-ba__arrow {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--shz-surface, #f8fafc);
  border: 2px solid var(--shz-border, #e5e7eb);
  border-radius: 50%;
  color: var(--shz-navy, #132937);
  cursor: pointer;
  transition: all 0.2s;
}
.shz-ba__arrow:hover:not(:disabled) {
  background: var(--shz-pink, #d72685);
  border-color: var(--shz-pink, #d72685);
  color: #fff;
}
.shz-ba__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.shz-ba__counter {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--shz-muted, #64748b);
}
.shz-ba__current {
  color: var(--shz-navy, #132937);
  font-weight: 800;
}

/* Gallery mode — show all items in a grid, no slider */
.shz-ba--gallery .shz-ba__slides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}
.shz-ba--gallery .shz-ba__slide {
  display: block;
}
.shz-ba--gallery .shz-ba__nav,
.shz-ba--gallery .shz-ba__arrows {
  display: none;
}

/* Side-by-side mode — no slider, just two images */
.shz-ba--side .shz-ba__viewer {
  cursor: default;
}
.shz-ba--side .shz-ba__clip {
  position: relative;
  width: 50% !important;
  float: left;
}
.shz-ba--side .shz-ba__clip .shz-ba__img--before {
  /* The slider-mode base rule (.shz-ba__clip .shz-ba__img--before above)
     sets position:absolute + width:100vw as a clip-reveal hack, and this
     side-by-side variant only reset position/width - height:100% (with no
     explicit aspect-ratio/object-fit reset) leaked through from that same
     base rule, against a parent whose own height is "auto", which is a
     circular percentage-height reference browsers resolve as if there
     were no defined box at all. Net effect: the before image rendered at
     its raw intrinsic size instead of a controlled one, while the after
     image (which never inherited any of this) sized correctly - exactly
     "one image broken, the other fine." Reset every property the base
     rule touches, not just the two that happened to visibly differ.
     */
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.shz-ba--side .shz-ba__img--after {
  width: 50%;
  float: right;
}
.shz-ba--side .shz-ba__handle {
  display: none;
}

/* ── Reviews ───────────────────────────────────────────────────────────────── */
.shz-s-reviews {
  padding: var(--shz-spacing-section, 4rem) 0;
  background: var(--shz-surface, #f8fafc);
}
.shz-s-reviews__header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.shz-s-reviews__heading {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}
.shz-s-reviews__aggregate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.shz-s-reviews__stars {
  font-size: 1.25rem;
}
.shz-s-reviews__score {
  font-size: 1.5rem;
  font-weight: 800;
}
.shz-s-reviews__count {
  color: var(--shz-muted, #64748b);
}
.shz-s-reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.shz-s-reviews__item {
  background: #fff;
  border-radius: var(--shz-radius-lg, 12px);
  padding: 1.5rem;
  box-shadow: var(--shz-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
}
.shz-s-reviews__rating {
  font-size: 1rem;
  margin-bottom: 0.75rem;
}
.shz-s-reviews__quote {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--shz-navy, #132937);
}
.shz-s-reviews__author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
}
.shz-s-reviews__name {
  font-weight: 600;
}
.shz-s-reviews__platform,
.shz-s-reviews__date {
  color: var(--shz-muted, #64748b);
}

/* ── Contact Block ─────────────────────────────────────────────────────────── */
.shz-s-contact {
  padding: var(--shz-spacing-section, 4rem) 0;
}
.shz-s-contact__heading {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2rem;
}
.shz-s-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.shz-s-contact--centered .shz-s-contact__grid {
  grid-template-columns: 1fr;
  max-width: 600px;
  margin: 0 auto;
}
.shz-s-contact__info {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.shz-s-contact__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  /* A real card, not bare floating text — previously this column had no
     visual structure at all next to .shz-s-contact__form's styled panel,
     which is very likely why a whole separate "Business Hours" section
     (styled as cards) got added right below this block as a workaround;
     that duplicate is being removed since this now covers the same need
     with real formatting, in the one place hours/address actually live. */
  background: var(--shz-surface, #f8fafc);
  border: 1px solid var(--shz-border, #e2e8f0);
  border-radius: var(--shz-r-md, 0.5rem);
  padding: 1.1rem 1.25rem;
}
.shz-s-contact__icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--shz-r-md, 0.5rem);
  background: var(--shz-pink, #d72685);
  color: #fff;
}
.shz-s-contact__item strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--shz-muted, #64748b);
  margin-bottom: 0.25rem;
}
.shz-s-contact__item > div > span {
  color: var(--shz-text, #1e293b);
  font-weight: 500;
}
.shz-s-contact__item a {
  color: var(--shz-pink, #d72685);
  text-decoration: none;
}
.shz-s-contact__item a:hover {
  text-decoration: underline;
}
.shz-s-contact__form {
  background: var(--shz-surface, #f8fafc);
  padding: 2rem;
  border-radius: var(--shz-radius-lg, 12px);
}
.shz-s-contact__default-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.shz-s-contact__default-form input,
.shz-s-contact__default-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: var(--shz-radius-md, 8px);
  font-size: 1rem;
  transition: border-color 0.2s;
}
.shz-s-contact__default-form input:focus,
.shz-s-contact__default-form textarea:focus {
  outline: none;
  border-color: var(--shz-pink, #d72685);
}

@media (max-width: 768px) {
  .shz-s-contact__grid {
    grid-template-columns: 1fr;
  }
  .shz-s-before-after__compare {
    grid-template-columns: 1fr;
  }
}

/* ── Scroll to Top ─────────────────────────────────────────────────────────── */
.shz-scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  background: var(--shz-pink, #d72685);
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Was a hardcoded rgba(215,38,133,...) — the OLD magenta/pink default,
     not tied to --shz-pink at all, so once that variable became blue the
     button itself was blue but its glow stayed the old pink/red (feedback:
     "needs be blue... instead of red"). color-mix() tracks whatever
     --shz-pink actually is instead of needing a separate precomputed RGB
     triplet variable (there isn't one for this token, unlike --shz-navy-rgb). */
  box-shadow: 0 4px 16px color-mix(in srgb, var(--shz-pink, #d72685) 35%, transparent);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition:
    opacity 0.3s,
    transform 0.3s,
    background 0.2s;
  z-index: 99;
}
.shz-scroll-top--bottom-left {
  right: auto;
  left: 2rem;
}
.shz-scroll-top--top-right,
.shz-scroll-top--top-left {
  bottom: auto;
  top: 6.5rem; /* clears a typical fixed/sticky header instead of sitting flush under it */
  transform: translateY(-20px);
}
.shz-scroll-top--top-left {
  right: auto;
  left: 2rem;
}
.shz-scroll-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.shz-scroll-top:hover {
  background: var(--shz-navy, #132937);
  box-shadow: 0 6px 24px rgba(19, 41, 55, 0.4);
  transform: translateY(-3px);
}

/* ── Trust Badge Images ────────────────────────────────────────────────────── */
.shz-s-badges__icon-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}
.shz-s-badges--cards .shz-s-badges__icon-img {
  width: 64px;
  height: 64px;
}

/* ── Emergency Bar custom background ───────────────────────────────────────── */
.shz-s-emergency[style] {
  background: var(--shz-emergency-bg) !important;
}

/* ── Reviews Embed ─────────────────────────────────────────────────────────── */
.shz-s-reviews__embed {
  max-width: 100%;
  overflow: hidden;
}
.shz-s-reviews__embed iframe {
  width: 100%;
  border: none;
  border-radius: var(--shz-radius-md, 8px);
}

/* ==========================================================================
   Per-section background override  (builder "Section Background" field)
   Injected as .shz-bg--{value} onto the section root by the renderer.
   Lets pages alternate backgrounds: white → light → white … down the page.
   ========================================================================== */
.shz-bg--white {
  background: var(--shz-white) !important;
  color: var(--shz-text);
}
.shz-bg--light {
  background: var(--shz-surface) !important;
  color: var(--shz-text);
}
/* "Secondary Background" (Design → Brand → color_surface_alt /
   --shz-surface-alt) — a real, admin-configurable brand color explicitly
   documented as "for alternating sections that need a subtler shade than
   Card & Section Fill," but the Section Background picker never offered a
   value that used it: confirmed live, the color existed as a CSS custom
   property and nothing in the whole theme ever read it. */
.shz-bg--alt {
  background: var(--shz-surface-alt) !important;
  color: var(--shz-text);
}
.shz-bg--navy {
  background: var(--shz-navy) !important;
  color: #fff;
}
.shz-bg--gradient {
  background: var(--shz-grad-hero) !important;
  color: #fff;
}
.shz-bg--accent {
  background: var(--shz-pink) !important;
  color: #fff;
}

/* Dark backgrounds: lighten section-level text for legibility.
   Scoped to on-background text only — cards / items keep their own colors. */
:is(.shz-bg--navy, .shz-bg--gradient, .shz-bg--accent) .shz-s-section-title,
:is(.shz-bg--navy, .shz-bg--gradient, .shz-bg--accent) .shz-s-cta__heading,
:is(.shz-bg--navy, .shz-bg--gradient, .shz-bg--accent) .shz-s-stats__heading,
:is(.shz-bg--navy, .shz-bg--gradient, .shz-bg--accent) .shz-s-stat__number,
:is(.shz-bg--navy, .shz-bg--gradient, .shz-bg--accent) .shz-s-text__heading,
:is(.shz-bg--navy, .shz-bg--gradient, .shz-bg--accent) .shz-s-service-area__heading,
:is(.shz-bg--navy, .shz-bg--gradient, .shz-bg--accent) .shz-s-media__heading,
:is(.shz-bg--navy, .shz-bg--gradient, .shz-bg--accent) .shz-s-media__subheading {
  color: #fff;
}
:is(.shz-bg--navy, .shz-bg--gradient, .shz-bg--accent) .shz-s-section-sub,
:is(.shz-bg--navy, .shz-bg--gradient, .shz-bg--accent) .shz-s-cta__subtext,
:is(.shz-bg--navy, .shz-bg--gradient, .shz-bg--accent) .shz-s-text__body,
:is(.shz-bg--navy, .shz-bg--gradient, .shz-bg--accent) .shz-s-stat__label,
:is(.shz-bg--navy, .shz-bg--gradient, .shz-bg--accent) .shz-s-service-area__subtext,
:is(.shz-bg--navy, .shz-bg--gradient, .shz-bg--accent) .shz-s-media__text,
:is(.shz-bg--navy, .shz-bg--gradient, .shz-bg--accent) .shz-s-feature-list__sub,
:is(.shz-bg--navy, .shz-bg--gradient, .shz-bg--accent) .shz-s-pricing__subtext {
  color: rgba(255, 255, 255, 0.82);
}

/* ── Contact Embed ─────────────────────────────────────────────────────────── */
.shz-s-contact__embed {
  max-width: 100%;
  overflow: hidden;
}
.shz-s-contact__embed iframe {
  width: 100%;
  min-height: 500px;
  border: none;
  border-radius: var(--shz-radius-md, 8px);
}

/* ==========================================================================
   Performance experiment (content-visibility:auto), REMOVED site-wide.
   It was applied to .shz-s-features/.shz-s-cards/.shz-s-testimonials/
   .shz-s-faq/.shz-s-stats/.shz-s-logos/.shz-s-video-gallery/.shz-s-text/
   .shz-s-pricing/.shz-s-reviews/.shz-s-badges/.shz-s-contact/
   .shz-s-feature-list/.shz-s-video-banner/.shz-ba/.shz-s-service-area (the
   last one already pulled out in an earlier pass, see that fix's own note
   below) to skip rendering off-screen sections until they near the
   viewport. Confirmed live on a real build (a from-scratch homepage: hero
   + media + a `cards` grid + a `feature_list` + a second `cards` grid +
   `faq`, reviewed via a fresh full-page screenshot with no prior scroll):
   THREE separate section types rendered as entirely blank boxes below the
   fold — heading visible, every item/card/question inside completely
   unpainted — not a sizing glitch `contain-intrinsic-size` can tune away.
   `content-visibility:auto` paints nothing inside the box at all while an
   element is still considered off-screen, no matter how accurate the
   reserved placeholder height is; only a real scroll-triggered
   intersection ever swaps the real content in. That makes it fundamentally
   incompatible with this project's own primary QA method (a page-builder
   tool whose whole point is being reviewed via static screenshots — by an
   agent, a client, or a non-interactive crawler/PDF export) — the
   marginal paint-skip win on a long page isn't worth every page silently
   rendering incomplete outside of live, scrolled, interactive browsing.
   Removed entirely rather than re-tuned per-selector a second time.
   ========================================================================== */

/* ==========================================================================
   Media + Text split  ([shz_media])
   DOM order is always image-then-content, so on mobile (column) the image
   always lands on top. "Image right" only flips the desktop row.
   ========================================================================== */
.shz-s-media {
  padding-block: clamp(3rem, 6vw, 5rem);
}
.shz-s-media__inner {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.shz-s-media--right .shz-s-media__inner {
  flex-direction: row-reverse;
}
.shz-s-media__media {
  flex: 1 1 50%;
  min-width: 0;
}
.shz-s-media__media img {
  width: 100%;
  display: block;
  border-radius: var(--shz-radius-lg, 12px);
  /* Every photo dropped into a media section comes in at its own native
     aspect ratio — width:100% with no height control meant a tall/portrait
     source rendered as a tall/portrait block next to a short one right
     above or below it (feedback: "they too tall"). A fixed ratio + cover
     makes every media section's photo the same shape regardless of what
     was uploaded. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.shz-s-media__content {
  flex: 1 1 50%;
  min-width: 0;
}
.shz-s-media__eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--shz-navy);
  margin-bottom: 0.5rem;
}
.shz-s-media__heading {
  font-size: clamp(1.625rem, 2.6vw, 2.125rem);
  line-height: 1.08;
  color: var(--shz-pink);
}
.shz-s-media__subheading {
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  line-height: 1.15;
  color: var(--shz-navy);
  margin-top: 0.15rem;
}
.shz-s-media__text {
  margin-top: 1rem;
  color: var(--shz-muted);
  line-height: 1.7;
}
/* The global reset zeroes <p> margins, so the paragraphs wpautop() builds from
   blank lines in the text field ran together with no gap at all. */
.shz-s-media__text p + p,
.shz-s-text__body p + p {
  margin-top: 1em;
}
.shz-s-media__text ul,
.shz-s-media__text ol {
  margin-top: 1em;
  padding-left: 1.25rem;
}
.shz-s-media__text li + li {
  margin-top: 0.4em;
}
.shz-s-media__cta {
  margin-top: 1.5rem;
}
@media (max-width: 768px) {
  .shz-s-media__inner,
  .shz-s-media--right .shz-s-media__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .shz-s-media__media,
  .shz-s-media__content {
    flex-basis: auto;
    width: 100%;
  }
}

/* ==========================================================================
   Why Choose  ([shz_why_choose]) — full-bleed bg image + offset card
   ========================================================================== */
.shz-s-why {
  position: relative;
  background-size: cover;
  background-position: center;
  padding-block: clamp(3rem, 8vw, 6rem);
}
.shz-s-why__inner {
  display: flex;
}
.shz-s-why--right .shz-s-why__inner {
  justify-content: flex-end;
}
.shz-s-why__card {
  background: #fff;
  border-radius: var(--shz-radius-lg, 12px);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 540px;
  box-shadow: var(--shz-shadow-lg, 0 20px 50px rgba(0, 0, 0, 0.2));
}
.shz-s-why__heading {
  margin-bottom: 1.25rem;
  line-height: 1.05;
}
/* Eyebrow-style lead-in, not a second competing headline - matches
   .shz-s-media__eyebrow's treatment so "heading" (line 1) reads as a small
   label and "heading_accent" (line 2) is the one actual large heading. */
.shz-s-why__heading-main {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--shz-pink);
  margin-bottom: 0.5rem;
}
.shz-s-why__heading-accent {
  display: block;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--shz-navy);
}
.shz-s-why__list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.shz-s-why__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--shz-text);
  line-height: 1.45;
}
.shz-s-why__check {
  color: var(--shz-navy);
  flex-shrink: 0;
  margin-top: 0.15rem;
}
/* Lets this same checklist look get reused inside a plain [shz_text]
   section's wp_kses_post'd content, where a raw <svg> or an inline
   style="display:inline-flex" attribute both get stripped on save —
   confirmed live (both silently vanished, leaving unstyled stacked text).
   Pure classes survive that sanitization, so the centering lives here
   instead of inline, and the checkmark is a plain glyph instead of an
   <svg>. */
/* Reused in a plain [shz_text] section's content (About page "Why Aaron
   Outdoor Lifestyle") to add breathing room + a centered CTA below the
   checklist — the list itself stays left-aligned (see --inline below), but
   this button should sit centered under it regardless. */
.shz-s-why__cta-wrap {
  margin-top: 2rem;
  text-align: center;
}
.shz-s-why__list--inline {
  /* No gap existed between the intro paragraph above and this list at all —
     .shz-s-text__body's p+p spacing only fires between sibling paragraphs,
     never before a following <ul> (feedback: "needs be space between the
     paragraph and the list"). */
  margin-top: 1.75rem;
  /* Tried centering this as a block (inline-flex, then flex+fit-content)
     to match the centered paragraph above it — abandoned: these are full
     sentences, so their natural (unwrapped) width already exceeds the
     container, meaning fit-content just resolves back to 100% anyway
     (confirmed live). Left-aligned, full width of the same narrow
     container the rest of the page uses is the normal, readable way to
     show a multi-line checklist and matches the pattern every other
     section on this page already uses (centered heading/intro, left-
     aligned body copy underneath). */
  text-align: left;
}
.shz-s-why__list--inline .shz-s-why__check {
  font-weight: 700;
}

/* ==========================================================================
   Highlights bar  ([shz_highlights]) — icon + label credentials strip
   ========================================================================== */
/* Sized as a slim utility strip, not a mid-page content section — this is
   the block most often used "Before Header" (a top credentials bar above
   the nav), where the section-default scale (16.9px/600 text, 24px icons,
   1.5rem padding) read as an oversized, out-of-place banner rather than a
   compact bar. Also used mid-page on some builds; a slim bar still reads
   fine there, just smaller than the section-default text around it. */
.shz-s-highlights {
  padding-block: 0.625rem;
  background: var(--shz-surface);
  border-block: 1px solid var(--shz-border);
}
.shz-s-highlights--dark {
  background: var(--shz-navy);
  border-color: rgba(255, 255, 255, 0.1);
}
.shz-s-highlights__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
}
.shz-s-highlight {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--shz-text);
}
.shz-s-highlights--dark .shz-s-highlight {
  color: #fff;
}
.shz-s-highlights--dark .shz-s-highlight__icon {
  /* Same red as the primary buttons (not the general link/accent color) —
     on a dark navy banner this needs to read as a deliberate pop of color,
     and matching the button red keeps it one consistent accent sitewide. */
  color: var(--shz-btn-primary-bg, #ce2028);
}
.shz-s-highlight__icon {
  color: var(--shz-pink);
  width: 16px;
  height: 16px;
  font-size: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * LAYOUT VARIANTS — Variant Fidelity v1
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 * Every rule below backs a tile in the Builder's layout picker. That picker
 * used to write a `variation` property that nothing read and the sanitizer
 * dropped, so all sixteen tile families were decorative. Five families are
 * real now; these are their styles.
 *
 * Two rules this block holds to:
 *
 * 1. NO MARKUP DEPENDENCY BEYOND WHAT ALREADY SHIPS. Each variant restyles
 *    the same flat sibling markup the shortcode has always emitted, using
 *    grid placement — the technique .shz-s-hero--split already established
 *    above. The one exception is the testimonials carousel, which gets
 *    tabindex/role/aria-label so a keyboard user can reach the scroll
 *    region (see inc/sections.php).
 *
 * 2. A SECTION WITH NO VARIANT GETS NO CLASS FROM HERE. Every selector is
 *    gated behind a modifier that only appears once an author picked a
 *    tile, so pages built before this existed are untouched. The theme's
 *    LegacyOutputCharacterizationTest pins that at the HTML level.
 *
 * This block sits at the END of the file on purpose: the generic
 * "Responsive" media queries above collapse .shz-s-features--cols-N and
 * .shz-s-cards__grid--N to fewer columns on small screens, and a variant
 * that must override that (alternating, horizontal) needs to come later to
 * win on equal specificity. Variants that should keep the normal responsive
 * collapse (grid, icons) simply do not touch grid-template-columns.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ── HERO: left ──────────────────────────────────────────────────────────────────
 * The base hero is already left-aligned — "centered" is the modifier that
 * centers it. So this variant's job is not alignment but MEASURE: an
 * uncapped headline on a 1400px container runs to roughly twenty words a
 * line, which is why the centered style was the only usable one before. */
.shz-s-hero--left .shz-s-hero__inner {
  text-align: left;
}
.shz-s-hero--left .shz-s-hero__heading {
  max-width: 16ch;
  margin-inline: 0;
}
.shz-s-hero--left .shz-s-hero__subtext {
  max-width: 52ch;
  margin-inline: 0;
}
.shz-s-hero--left .shz-s-hero__actions {
  justify-content: flex-start;
}
@media (max-width: 768px) {
  /* .shz-btn-group flips to a column at this width; without align-items the
     stacked buttons stretch full-bleed and stop reading as a group. */
  .shz-s-hero--left .shz-s-hero__actions {
    align-items: flex-start;
  }
  .shz-s-hero--left .shz-s-hero__heading {
    max-width: none;
  }
}

/* ── FEATURES: grid ──────────────────────────────────────────────────────────────
 * The historical layout. Deliberately free of overrides — it inherits
 * .shz-s-features--cols-N and its responsive collapse exactly as before.
 * The class is still emitted so the saved value round-trips and the CI
 * parity gate can see a rendering path for it. */

/* ── FEATURES: icons ─────────────────────────────────────────────────────────────
 * Drops the card chrome entirely and leads with a large centered glyph.
 * Keeps the column count and its responsive collapse. */
.shz-s-features--icons .shz-s-feature-card {
  padding: 1rem 0.5rem;
  border: none;
  background: none;
  text-align: center;
  overflow: visible;
}
.shz-s-features--icons .shz-s-feature-card:hover {
  border-color: transparent;
  box-shadow: none;
  transform: none;
}
.shz-s-features--icons .shz-s-feature-card::before {
  display: none; /* the hover accent line has no card edge to sit on */
}
.shz-s-features--icons .shz-s-feature-card__icon {
  width: 80px;
  height: 80px;
  border-radius: var(--shz-r-full);
  margin-inline: auto;
  margin-bottom: 1.5rem;
  transition: transform var(--shz-t-base);
}
.shz-s-features--icons .shz-s-feature-card:hover .shz-s-feature-card__icon {
  transform: translateY(-4px) scale(1.04);
}
.shz-s-features--icons .shz-s-feature-card__icon .dashicons {
  font-size: 36px;
  width: 36px;
  height: 36px;
}
.shz-s-features--icons .shz-s-feature-card__icon .shz-icon-text,
.shz-s-features--icons .shz-s-feature-card__icon .shz-icon-svg {
  font-size: 36px;
}
.shz-s-features--icons .shz-s-feature-card__dot {
  margin-inline: auto;
}
.shz-s-features--icons .shz-s-feature-card__title {
  font-size: 1.1875rem;
}
.shz-s-features--icons .shz-s-feature-card__desc {
  max-width: 34ch;
  margin-inline: auto;
}

/* ── FEATURES: alternating ───────────────────────────────────────────────────────
 * One full-width row per feature, the icon swapping sides down the page.
 * Forces a single column at every width (overriding --cols-N), so the
 * column-count field has no effect here — intentional, and documented in
 * the Master Agent package for this block. */
.shz-s-features--alternating .shz-s-features__grid {
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.shz-s-features--alternating .shz-s-feature-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon title"
    "icon desc";
  align-items: center;
  column-gap: 2rem;
  row-gap: 0.375rem;
  padding: 2rem clamp(1.5rem, 4vw, 3rem);
}
.shz-s-features--alternating .shz-s-feature-card__icon,
.shz-s-features--alternating .shz-s-feature-card__dot {
  grid-area: icon;
  margin-bottom: 0;
}
.shz-s-features--alternating .shz-s-feature-card__icon {
  width: 72px;
  height: 72px;
}
.shz-s-features--alternating .shz-s-feature-card__title {
  grid-area: title;
  align-self: end;
  font-size: 1.25rem;
  margin-bottom: 0;
}
.shz-s-features--alternating .shz-s-feature-card__desc {
  grid-area: desc;
  align-self: start;
  max-width: 68ch;
}
/* The alternation itself. */
.shz-s-features--alternating .shz-s-feature-card:nth-child(even) {
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title icon"
    "desc  icon";
  text-align: right;
}
.shz-s-features--alternating
  .shz-s-feature-card:nth-child(even)
  .shz-s-feature-card__desc {
  margin-inline-start: auto;
}
@media (max-width: 768px) {
  /* Side-by-side stops working once the text column is narrower than the
     icon is wide. Both directions collapse to the same stacked, left-read
     layout rather than leaving every other row right-aligned on a phone. */
  .shz-s-features--alternating .shz-s-feature-card,
  .shz-s-features--alternating .shz-s-feature-card:nth-child(even) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "icon"
      "title"
      "desc";
    text-align: left;
  }
  .shz-s-features--alternating .shz-s-feature-card__icon {
    margin-bottom: 1rem;
  }
  .shz-s-features--alternating
    .shz-s-feature-card:nth-child(even)
    .shz-s-feature-card__desc {
    margin-inline-start: 0;
  }
}

/* ── CTA: banner ─────────────────────────────────────────────────────────────────
 * The historical full-bleed band. No overrides, same reasoning as
 * features--grid: the class exists so the choice round-trips and the parity
 * gate sees a rendering path, not to change anything. */

/* ── CTA: card ───────────────────────────────────────────────────────────────────
 * Lifts the coloured band off the page edges into an inset rounded card.
 * The colour lives on .shz-s-cta--{style} (the SEPARATE colour axis), which
 * paints the <section>; so for this layout the section itself goes
 * transparent and each colour is re-applied to the inner container. Four
 * explicit pairings rather than one variable, because the gradient style is
 * a gradient plus two decorative pseudo-elements, not a flat colour. */
.shz-s-cta--layout-card {
  background: transparent;
  padding-block: clamp(2rem, 4vw, 3rem);
}
.shz-s-cta--layout-card::before,
.shz-s-cta--layout-card::after {
  display: none; /* section-edge decorations; the card has its own edges now */
}
.shz-s-cta--layout-card .shz-container {
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(19, 41, 55, 0.16);
  /* shz_cta hard-codes .shz-container--narrow (720px) on this div for every
     layout — right for the plain centered banner, but a bit cramped once
     it's its own floating card (feedback: "make box bit wider"). */
  max-width: 900px;
  position: relative;
  z-index: 1;
}
.shz-s-cta--layout-card.shz-s-cta--gradient .shz-container {
  background: linear-gradient(145deg, var(--shz-navy) 0%, #0d1e29 100%);
  border-top: 2px solid var(--shz-pink);
}
.shz-s-cta--layout-card.shz-s-cta--navy .shz-container {
  background: var(--shz-navy);
}
.shz-s-cta--layout-card.shz-s-cta--pink .shz-container {
  background: var(--shz-pink);
}
.shz-s-cta--layout-card.shz-s-cta--surface .shz-container {
  background: var(--shz-surface);
  border: 1px solid var(--shz-border);
  box-shadow: 0 16px 48px rgba(19, 41, 55, 0.08);
}

/* ── CTA: split ──────────────────────────────────────────────────────────────────
 * Copy left, buttons right, on one row. Grid placement over the existing
 * flat siblings (heading / subtext / button group) — no wrapper element, so
 * the markup is the same one the other two layouts render. */
.shz-s-cta--layout-split {
  text-align: left;
}
.shz-s-cta--layout-split .shz-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(2rem, 5vw, 4rem);
  /* shz_cta hard-codes .shz-container--narrow (720px) on its inner wrapper,
     which is right for the two CENTERED layouts but not for this one: two
     columns inside 720px left the heading a 235px measure, wrapping a six-word
     headline onto four lines while the section's own full width sat unused.
     Confirmed in a browser at 1440px before this was added. Widening to the
     standard container only affects this variant. */
  max-width: var(--shz-container);
}
.shz-s-cta--layout-split .shz-s-cta__heading {
  grid-column: 1;
  margin-bottom: 0.5rem;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}
.shz-s-cta--layout-split .shz-s-cta__subtext {
  grid-column: 1;
  margin-inline: 0;
  margin-bottom: 0;
  max-width: 56ch;
}
/* Spans both text rows when a subtext is present, and sits alone in the
   single row when it is not — grid handles the absent element without the
   template needing to know. */
.shz-s-cta--layout-split .shz-btn-group {
  grid-column: 2;
  grid-row: 1 / -1;
  justify-content: flex-end;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .shz-s-cta--layout-split {
    text-align: center;
  }
  .shz-s-cta--layout-split .shz-container {
    grid-template-columns: 1fr;
    row-gap: 1.75rem;
  }
  .shz-s-cta--layout-split .shz-s-cta__subtext {
    margin-inline: auto;
  }
  .shz-s-cta--layout-split .shz-btn-group {
    grid-column: 1;
    grid-row: auto;
    justify-content: center;
    align-items: center;
  }
}

/* ── CARDS: grid ─────────────────────────────────────────────────────────────────
 * The historical layout; no overrides, inherits --grid--N and its
 * responsive collapse. */

/* ── CARDS: horizontal ───────────────────────────────────────────────────────────
 * One card per row, icon beside the text instead of above it. Overrides the
 * column count at every width, including the 1024px/768px collapses
 * declared earlier in this file. */
.shz-s-cards--horizontal .shz-s-cards__grid,
.shz-s-cards--horizontal .shz-s-cards__grid--2,
.shz-s-cards--horizontal .shz-s-cards__grid--3,
.shz-s-cards--horizontal .shz-s-cards__grid--4 {
  grid-template-columns: 1fr;
  gap: 1rem;
}
.shz-s-cards--horizontal .shz-s-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon title link"
    "icon desc  link";
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 0.25rem;
  padding: 1.5rem 1.75rem;
}
.shz-s-cards--horizontal .shz-s-card__icon {
  grid-area: icon;
  margin-bottom: 0;
}
.shz-s-cards--horizontal .shz-s-card__title {
  grid-area: title;
  align-self: end;
  margin-bottom: 0;
}
.shz-s-cards--horizontal .shz-s-card__desc {
  grid-area: desc;
  align-self: start;
  margin-bottom: 0;
}
.shz-s-cards--horizontal .shz-s-card__link {
  grid-area: link;
  margin-top: 0;
  white-space: nowrap;
}
@media (max-width: 600px) {
  /* Three columns cannot hold a readable description on a phone; the
     "Learn more" affordance moves under the text. The whole title is
     already a link, so nothing becomes unreachable. */
  .shz-s-cards--horizontal .shz-s-card {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "icon title"
      "icon desc"
      "link link";
    row-gap: 0.5rem;
  }
  .shz-s-cards--horizontal .shz-s-card__link {
    margin-top: 0.5rem;
  }
}

/* ── CARDS: masonry ──────────────────────────────────────────────────────────────
 * CSS multi-column flow, so each card keeps its natural height and the
 * columns stagger. Swaps the grid formatting context for a column one,
 * which is why grid-template-columns is not simply overridden here.
 *
 * Reading order becomes top-to-bottom PER COLUMN, not left-to-right across
 * a row — a real tradeoff, surfaced in this block's Master Agent package so
 * an agent does not choose it for ordered content. */
.shz-s-cards--masonry .shz-s-cards__grid {
  display: block;
  column-gap: 1.5rem;
}
.shz-s-cards--masonry .shz-s-cards__grid--2 {
  column-count: 2;
}
.shz-s-cards--masonry .shz-s-cards__grid--3 {
  column-count: 3;
}
.shz-s-cards--masonry .shz-s-cards__grid--4 {
  column-count: 4;
}
.shz-s-cards--masonry .shz-s-card {
  break-inside: avoid;
  /* break-inside is advisory in several engines; without an inline-block
     display a card can still be split across a column boundary mid-text. */
  display: inline-block;
  width: 100%;
  margin-bottom: 1.5rem;
}
@media (max-width: 1024px) {
  .shz-s-cards--masonry .shz-s-cards__grid--4 {
    column-count: 2;
  }
}
@media (max-width: 768px) {
  .shz-s-cards--masonry .shz-s-cards__grid--2,
  .shz-s-cards--masonry .shz-s-cards__grid--3,
  .shz-s-cards--masonry .shz-s-cards__grid--4 {
    column-count: 1;
  }
}

/* ── TESTIMONIALS: grid ──────────────────────────────────────────────────────────
 * The historical auto-fill grid; no overrides. */

/* ── TESTIMONIALS: featured ──────────────────────────────────────────────────────
 * Promotes the FIRST quote to a full-width panel and runs the rest beneath
 * it. Pure :first-child selection, so the shortcode still emits one
 * identical loop and the author controls the spotlight through item order. */
.shz-s-testimonials--featured .shz-s-testimonials__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.shz-s-testimonials--featured .shz-s-testimonial:first-child {
  grid-column: 1 / -1;
  padding: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
  background: var(--shz-surface);
  border-color: transparent;
}
.shz-s-testimonials--featured
  .shz-s-testimonial:first-child
  .shz-s-testimonial__quote {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.55;
  max-width: 44ch;
  margin-inline: auto;
}
.shz-s-testimonials--featured
  .shz-s-testimonial:first-child
  .shz-s-testimonial__stars {
  font-size: 1.25rem;
}

/* ── TESTIMONIALS: carousel ──────────────────────────────────────────────────────
 * A scroll-snap track. Deliberately CSS-only: it is the native scroller, so
 * it works with touch, trackpad and scrollbar, and — via the tabindex/role
 * the shortcode adds for this variant — with arrow keys, while loading no
 * JavaScript that could break or fail to hydrate. There are no prev/next
 * buttons for that same reason; the scrollbar stays visible and styled as
 * the affordance. */
.shz-s-testimonials--carousel .shz-s-testimonials__grid {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0.25rem;
  /* Cards lift on hover; without the room the transform is clipped by the
     scroll container. */
  padding-top: 0.25rem;
  padding-bottom: 1rem;
  scrollbar-color: var(--shz-pink) var(--shz-border);
  scrollbar-width: thin;
}
.shz-s-testimonials--carousel .shz-s-testimonial {
  scroll-snap-align: start;
  flex: 0 0 min(360px, 82%);
}
.shz-s-testimonials--carousel .shz-s-testimonials__grid:focus-visible {
  outline: 2px solid var(--shz-pink);
  outline-offset: 4px;
}
.shz-s-testimonials--carousel .shz-s-testimonials__grid::-webkit-scrollbar {
  height: 8px;
}
.shz-s-testimonials--carousel
  .shz-s-testimonials__grid::-webkit-scrollbar-track {
  background: var(--shz-border);
  border-radius: var(--shz-r-full);
}
.shz-s-testimonials--carousel
  .shz-s-testimonials__grid::-webkit-scrollbar-thumb {
  background: var(--shz-pink);
  border-radius: var(--shz-r-full);
}
@media (prefers-reduced-motion: reduce) {
  .shz-s-testimonials--carousel .shz-s-testimonials__grid {
    scroll-behavior: auto;
  }
}

/* ── Spacer ────────────────────────────────────────────────────────────────── */
/* Height is read from CSS custom properties the shortcode sets inline
   (--shz-spacer-h / -tablet / -mobile) - this rule only decides which one
   wins at each breakpoint, mobile-first cascade via the var() fallback
   chain so an unset override simply falls through to the next size up. */
.shz-s-spacer {
  display: block;
  width: 100%;
  height: var(--shz-spacer-h, var(--shz-s6));
}
@media (max-width: 1023px) {
  .shz-s-spacer {
    height: var(--shz-spacer-h-tablet, var(--shz-spacer-h, var(--shz-s6)));
  }
}
@media (max-width: 767px) {
  .shz-s-spacer {
    height: var(
      --shz-spacer-h-mobile,
      var(--shz-spacer-h-tablet, var(--shz-spacer-h, var(--shz-s6)))
    );
  }
}

/* ── Divider ───────────────────────────────────────────────────────────────── */
.shz-s-divider {
  display: flex;
  align-items: center;
  gap: var(--shz-s4);
  width: 100%;
  padding-block: var(--shz-s5);
}
.shz-s-divider::before {
  content: "";
  flex: 1 1 auto;
  border-top: var(--shz-divider-thickness, 1px) solid
    var(--shz-divider-color, var(--shz-border));
}
.shz-s-divider--labeled::after {
  content: "";
  flex: 1 1 auto;
  border-top: var(--shz-divider-thickness, 1px) solid
    var(--shz-divider-color, var(--shz-border));
}
.shz-s-divider--dashed::before,
.shz-s-divider--dashed::after {
  border-top-style: dashed;
}
.shz-s-divider--subtle::before,
.shz-s-divider--subtle::after {
  opacity: 0.5;
}
.shz-s-divider--short {
  max-width: 160px;
  margin-inline: auto;
}
.shz-s-divider__label {
  flex: 0 0 auto;
  color: var(--shz-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}