/*
 * EZ homepage hero + "Plumbing done right" cards + mini EZ.
 * Front page only (enqueued from inc/ez-home-hero.php).
 *
 * Namespaced .ezh-* on purpose: the theme inlines ~6.4KB of critical CSS on the
 * front page (functions.php, ezp_inline_critical_css) which still carries the
 * OLD .hero / .hero__image / .hero__overlay rules. Using a fresh namespace means
 * zero specificity fights and nothing to unwind if these files are removed.
 */

.ezh-hero{
  --ezh-blue:#0B3BBF; --ezh-red:#E3121C; --ezh-ink:#1C2230;
  --ezh-gray:#5B6474; --ezh-mist:#F3F6FB; --ezh-line:#E2E8F0;
  position:relative; background:#fff; overflow:hidden;
  width:auto; margin-left:0;
  display:flex; justify-content:center; min-height:min(78vh,760px);
}
.ezh-hero__stage{position:relative;display:block;height:min(74vh,720px);aspect-ratio:828/1108;width:auto;max-width:100vw}
.ezh-hero video,
.ezh-hero canvas{
  display:block; height:min(74vh,720px); aspect-ratio:828/1108; width:auto; max-width:100vw;
  object-fit:contain;
  mix-blend-mode:darken;
  filter:brightness(1.09) contrast(1.02) saturate(1.08);
}
/* canvas path: video is keyed out and painted to the canvas instead */
.ezh-hero.is-keyed video{position:absolute;inset:0;opacity:0;pointer-events:none}
.ezh-hero.is-keyed canvas{mix-blend-mode:normal;filter:none}
.ezh-hero canvas{display:none}
.ezh-hero.is-keyed canvas{display:block}

.ezh-hero__copy{position:absolute;left:5vw;top:50%;transform:translateY(-50%);max-width:460px;z-index:2}
.ezh-hero__eyebrow{margin:0 0 8px;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ezh-red)}
.ezh-hero__title{
  font-family:Fredoka,Manrope,system-ui,sans-serif;
  font-size:clamp(34px,4.6vw,60px); line-height:1.02; margin:0 0 14px;
  color:var(--ezh-blue); font-weight:700; letter-spacing:-.015em;
}
.ezh-hero__tagline{margin:-4px 0 14px;font-family:Fredoka,Manrope,sans-serif;font-weight:600;font-size:clamp(19px,2vw,26px);color:var(--ezh-ink)}
.ezh-hero__lead{font-size:clamp(16px,1.4vw,19px);color:var(--ezh-gray);margin:0 0 22px;max-width:24em;line-height:1.55}
.ezh-hero__bullets{list-style:none;padding:0;margin:0 0 20px;display:flex;gap:18px;flex-wrap:wrap;font-weight:700;color:var(--ezh-ink);font-size:15px}
.ezh-hero__bullets li::before{content:'\2713\00a0';color:var(--ezh-red)}
.ezh-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.ezh-btn{display:inline-block;text-decoration:none;font-family:Fredoka,Manrope,sans-serif;font-weight:600;font-size:17px;padding:13px 24px;border-radius:999px;line-height:1.2}
.ezh-btn--red{background:var(--ezh-red);color:#fff}
.ezh-btn--ghost{border:2px solid var(--ezh-blue);color:var(--ezh-blue);background:rgba(255,255,255,.85)}

@media (max-width:900px){
  .ezh-hero{display:block;min-height:0}
  .ezh-hero__copy{position:static;transform:none;max-width:none;padding:26px 5vw 18px}
  .ezh-hero__title{font-size:clamp(34px,10vw,44px)}
  .ezh-hero__lead{font-size:16px;margin-bottom:18px}
  .ezh-hero__bullets{flex-wrap:wrap;gap:9px 16px;font-size:14px;margin-bottom:16px}
  .ezh-ctas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
  .ezh-btn{width:100%;text-align:center;padding:14px 8px;font-size:16px}
  /* Mobile art direction: one clip only (ez-sign), cropped to 4:5 so EZ fills
     the width. aspect-ratio reserves the box up front, so this costs no CLS. */
  .ezh-hero__stage{width:100%;height:auto;max-width:none;aspect-ratio:4/5}
  .ezh-hero video,
  .ezh-hero canvas{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 40%}
  /* Trust bar: homepage only. body.home keeps every other template untouched. */
  body.home .trust-bar__list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px}
  body.home .trust-bar__item{padding:.5rem .7rem}
  body.home .trust-bar__item p{font-size:12px;letter-spacing:.04em}
}
@media (prefers-reduced-motion:reduce){
  .ezh-hero video{display:block}
  .ezh-hero canvas{display:none!important}
}

/* ---- Plumbing done right ---- */
.ezh-why{padding:70px 0;background:#fff}
.ezh-why__head h2{
  font-family:Fredoka,Manrope,sans-serif;
  font-size:clamp(30px,3.8vw,46px);color:#0B3BBF;margin:0 0 8px;font-weight:600;line-height:1.05;
}
.ezh-why__sub{color:#5B6474;margin:0 0 34px;font-size:18px;max-width:38em}
.ezh-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.ezh-card{background:#F3F6FB;border-radius:18px;padding:24px;position:relative}
.ezh-card__chip{display:inline-block;background:#0B3BBF;color:#fff;font-family:Fredoka,Manrope,sans-serif;font-weight:600;font-size:17px;padding:4px 12px;border-radius:10px;transform:rotate(-1.5deg);margin-bottom:12px}
.ezh-card:nth-child(2n) .ezh-card__chip{background:#E3121C}
.ezh-card h3{font-family:Fredoka,Manrope,sans-serif;margin:0 0 8px;font-size:21px;color:#1C2230;font-weight:600;line-height:1.15}
.ezh-card p{margin:0;color:#5B6474;font-size:15.5px;line-height:1.6}
.ezh-card a{font-weight:700;color:#0B3BBF}

/* ---- mini EZ ---- */
.ezh-mini{position:fixed;right:18px;bottom:0;z-index:40;display:flex;align-items:flex-end;gap:10px;transform:translateY(110%);transition:transform .5s cubic-bezier(.2,.9,.3,1.1);pointer-events:none}
.ezh-mini.is-visible{transform:translateY(0);pointer-events:auto}
.ezh-mini__stage{position:relative;width:150px;height:150px;background:#fff;border-radius:22px 22px 0 0}
.ezh-mini video{width:100%;height:100%;display:block;object-fit:contain;mix-blend-mode:darken;filter:brightness(1.09) contrast(1.02) saturate(1.08);
  -webkit-mask-image:radial-gradient(ellipse 72% 88% at 50% 58%,#000 60%,transparent 100%);
  mask-image:radial-gradient(ellipse 72% 88% at 50% 58%,#000 60%,transparent 100%)}
.ezh-mini__bubble{position:relative;text-decoration:none;background:#fff;border:2px solid #0B3BBF;color:#0B3BBF;font-family:Fredoka,Manrope,sans-serif;font-weight:600;font-size:15px;padding:8px 14px;border-radius:14px;margin-bottom:56px;box-shadow:0 8px 20px rgba(7,42,136,.15);white-space:nowrap}
.ezh-mini__bubble::after{content:"";position:absolute;right:-13px;bottom:14px;border:10px solid transparent;border-left-color:#0B3BBF;border-right:0}
/* Mobile sizing. Must sit AFTER the base .ezh-mini rules above: equal
   specificity, so source order is what decides. */
@media (max-width:900px){
  .ezh-mini__stage{width:92px;height:92px}
  .ezh-mini__bubble{display:none}
}
/* The theme renders a fixed .mobile-callbar (bottom:12px, z-index:250) at
   <=700px. Sit above it so EZ never covers the primary Call/Schedule CTAs. */
@media (max-width:700px){
  .ezh-mini{right:12px;bottom:calc(104px + env(safe-area-inset-bottom));transform:translateY(calc(100% + 120px))}
  .ezh-mini.is-visible{transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){.ezh-mini{transition:none}}

/* Hidden while any form field has focus (mobile), so EZ never covers a form.
   Last rule in the file on purpose: equal specificity to .is-visible, so
   source order decides and no !important is needed. */
.ezh-mini.is-suppressed{transform:translateY(150%);pointer-events:none}