/* Small theme helpers shared across all layouts (loaded after the per-layout CSS). */

/* Default page wrapper padding for generic pages. */
.ew-page { padding: 64px 0; }

/* Hero image treatment: fixed 450px height (width follows the column), the photo
   underneath, and the brand green-gradient + white diagonal lines layered on top.
   The amber corner brackets (.bracket.tl/.br) and the floating badge card sit above. */
.ph.has-img { aspect-ratio: auto; height: 450px; background: none; overflow: hidden; isolation: isolate; border-radius: 20px; }
.ph.has-img img { border-radius: 20px; }

/* Hero image frame — radius + amber corner brackets on EVERY layout.
   (Some per-page stylesheets were authored for a text-only hero and omit these.) */
.ph { border-radius: 20px; }
.ph .bracket { position: absolute; width: 32px; height: 32px; z-index: 3; pointer-events: none; }
.ph .bracket.tl { top: 14px; left: 14px; border-left: 3px solid #E9A23B; border-top: 3px solid #E9A23B; }
.ph .bracket.br { bottom: 14px; right: 14px; border-right: 3px solid #E9A23B; border-bottom: 3px solid #E9A23B; }

/* Trust chips rendered as <span class="chip"> (pill style) — works where the
   per-page css only styled <a> chips. */
.hero-chips .chip { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; color: #0C3B36; background: rgba(12,59,54,.06); border-radius: 999px; padding: 8px 15px; }
.hero-chips .chip .d { width: 6px; height: 6px; border-radius: 50%; background: #E9A23B; flex: none; }
.pg-hero--visual .hero-chips { justify-content: flex-start; }
/* Left-align the hero buttons in the two-column (image) plain hero so they line
   up with the copy and the chips below. (how-it-works.css centres .hero-actions;
   this layout-scoped rule overrides it.) The 22px gap matches the chips spacing. */
.pg-hero--visual .hero-actions { justify-content: flex-start; margin-bottom: 22px; }
.ph.has-img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ph.has-img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 16px, rgba(255,255,255,0) 16px 32px),
    linear-gradient(160deg, rgba(20,96,90,.32), rgba(12,59,54,.46) 62%);
}

/* Hub/plain heroes that have a featured image render as a two-column hero.
   (Overrides the centered single-column pg-hero in solutions/how-it-works/contact css.) */
.pg-hero--visual { text-align: left; }
.pg-hero--visual .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
.pg-hero--visual .hero-grid h1 { margin: 18px 0 20px; max-width: none; }
.pg-hero--visual .hero-grid .lead { margin: 0 0 26px; max-width: 520px; }
.pg-hero--visual .hero-visual { position: relative; }
@media (max-width: 980px) {
  .pg-hero--visual .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .pg-hero--visual .hero-visual { max-width: 520px; }
}

/* Service-style hero (.svc-hero) made available on any page (e.g. the hubs) so a
   hub can render the exact same hero as a service detail page like Plumbing. */
.svc-hero { padding: 40px 0 84px; }
.svc-hero .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
.svc-hero .hero-grid h1 { font-size: clamp(2.3rem,4.7vw,3.6rem); font-weight: 700; margin: 18px 0 20px; }
.svc-hero .hero-grid .lead { font-size: 1.15rem; color: var(--muted); max-width: 520px; margin-bottom: 28px; }
.svc-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 30px; }
.svc-hero .hero-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.svc-hero .hero-trust li { display: flex; align-items: center; gap: 9px; font-size: .92rem; font-weight: 500; color: var(--teal); }
.svc-hero .hero-trust .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; }
.svc-hero .hero-visual { position: relative; }
@media (max-width: 980px) { .svc-hero .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

/* Floating hero cards/badges always sit above the image gradient overlay & brackets. */
.hero-cards { z-index: 10; }
.hero-cards .hero-card { position: relative; z-index: 10; }

/* The image column is the positioning context for the floating badge card.
   Global so the badge never escapes to the page edge on layouts (e.g. MEP) whose
   own stylesheet didn't set it. */
.hero-visual { position: relative; }

/* Floating hero badge / stats card — works on any hero layout (not just service). */
.hero-badge {
  position: absolute;
  left: -22px;
  bottom: 26px;
  z-index: 10;
  background: #FFFFFF;
  border: 1px solid rgba(12,59,54,.12);
  border-radius: 14px;
  padding: 13px 18px;
  box-shadow: 0 18px 40px -24px rgba(12,59,54,.35);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 250px;
  animation: cardIn .6s ease both;
}
.hero-badge .bi { width: 42px; height: 42px; border-radius: 11px; background: #0C3B36; color: #E9A23B; display: grid; place-items: center; flex: none; }
.hero-badge .bi .ic { width: 22px; height: 22px; }
.hero-badge b { font-family: "Space Grotesk", sans-serif; font-size: .96rem; display: block; color: #16211F; }
.hero-badge small { font-size: .8rem; color: #5B6B68; }
@media (max-width: 520px) { .hero-badge { left: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-badge { animation: none; } }

/* Contact form success reveal (matches the static behaviour). */
.form-success { display: none; }
.form-success.show { display: block; }

/* ============================================================
   HERO HEADER — dark teal colour scheme
   (teal background, white text, amber accents — matches the brand bands).
   Backup of the previous file: theme-extra.css.bak
   ============================================================ */
.hero,
.svc-hero,
.mep-hero,
.pg-hero { background: #0C3B36; }

/* Breadcrumb */
.svc-hero .crumb,
.mep-hero .crumb,
.pg-hero .crumb { color: rgba(255,255,255,.55); }
.svc-hero .crumb a,
.mep-hero .crumb a,
.pg-hero .crumb a { color: rgba(255,255,255,.80); }
.svc-hero .crumb a:hover,
.mep-hero .crumb a:hover,
.pg-hero .crumb a:hover,
.svc-hero .crumb .cur,
.mep-hero .crumb .cur,
.pg-hero .crumb .cur { color: #F6C97A; }

/* Eyebrow (amber on dark) */
.hero .eyebrow,
.svc-hero .eyebrow,
.mep-hero .eyebrow,
.pg-hero .eyebrow { color: #F6C97A; }

/* Headline */
.hero h1,
.svc-hero h1,
.svc-hero .hero-grid h1,
.mep-hero h1,
.mep-hero .hero-grid h1,
.pg-hero h1 { color: #FFFFFF; }
.hero h1 .mark { color: #F6C97A; }
.hero h1 .mark::after { opacity: .35; }

/* Sub-text / lead */
.hero .lead,
.svc-hero .lead,
.svc-hero .hero-grid .lead,
.mep-hero .lead,
.mep-hero .hero-grid .lead,
.pg-hero .lead { color: rgba(255,255,255,.74); }

/* Trust list (dot items) */
.hero .hero-trust li,
.svc-hero .hero-trust li,
.mep-hero .hero-trust li { color: rgba(255,255,255,.88); }

/* Trust chips (pills). The "span.chip" selector matches villa-maintenance.css's
   ".hero-chips span.chip" (specificity 0,0,2,1) so this white-on-dark override
   wins on solution sub-pages — without it those chips render teal-on-teal and
   the labels are invisible. */
.hero-chips .chip,
.hero-chips span.chip { background: rgba(255,255,255,.12); color: #FFFFFF; }

/* Unify the service-hero trust row (services & solutions hubs, service detail
   pages) to the SAME pill-chip look used on the other heroes, so every page's
   hero trust row matches. The per-layout CSS renders these as a plain dotted
   list; here we turn each item into a pill. Layout-scoped selectors (0,0,2,1)
   out-rank the per-layout ".hero-trust li" rule. */
.hero .hero-trust,
.svc-hero .hero-trust,
.mep-hero .hero-trust,
.pg-hero .hero-trust { gap: 10px 12px; }
.hero .hero-trust li,
.svc-hero .hero-trust li,
.mep-hero .hero-trust li,
.pg-hero .hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .86rem;
  font-weight: 600;
  color: #FFFFFF;
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 8px 15px;
}
.hero .hero-trust .dot,
.svc-hero .hero-trust .dot,
.mep-hero .hero-trust .dot,
.pg-hero .hero-trust .dot { width: 6px; height: 6px; background: #E9A23B; }

/* Secondary "ghost" button on the dark hero */
.hero .btn-ghost,
.svc-hero .btn-ghost,
.mep-hero .btn-ghost,
.pg-hero .btn-ghost { border-color: rgba(255,255,255,.32); color: #FFFFFF; }
.hero .btn-ghost:hover,
.svc-hero .btn-ghost:hover,
.mep-hero .btn-ghost:hover,
.pg-hero .btn-ghost:hover { border-color: #F6C97A; background: rgba(255,255,255,.06); }

/* Softer amber glow on the primary button over the dark hero. The default
   box-shadow (.7 / .85) reads as a heavy halo on teal, almost like a pressed
   state — dial it back for a cleaner edge. */
.hero .btn-amber,
.svc-hero .btn-amber,
.mep-hero .btn-amber,
.pg-hero .btn-amber { box-shadow: 0 10px 24px -10px rgba(233,162,59,.35); }
.hero .btn-amber:hover,
.svc-hero .btn-amber:hover,
.mep-hero .btn-amber:hover,
.pg-hero .btn-amber:hover { box-shadow: 0 16px 30px -12px rgba(233,162,59,.5); }

/* Home hero sub-text in white (out-specifies index.css ".hero p.lead"). */
.hero p.lead { color: #FFFFFF; }

/* Trust strip ("Vetted technicians …"): connect it flush to the hero (remove the
   24px flow-layout gap WordPress injects) and switch its background to brand amber. */
.wp-block-post-content > .band-trust { margin-block-start: 0; margin-top: 0; }
.band-trust { background: #E9A23B; color: #16211F; }
.band-trust b { color: #16211F; }
.band-trust small { color: rgba(22,33,31,.72); }
.band-trust .b-ico { background: #0C3B36; color: #F6C97A; }