/* ============================================================
   ILX: Irrigation winterization landing page (/irrigation/winterization/)
   Mobile first. Loaded only on that page, after ilx-pages.css.
   All colour and type come from the ilx-tokens.css variables.
   ============================================================ */

/* The sticky action bar replaces the site-wide quick-contact button here. */
.ilx-winterization .ilx-fab{ display:none !important; }

/* ---------- 1. Hero ---------- */
.wz-hero{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:flex-end;
  min-height:min(calc(100svh - 190px),700px);
  background:var(--ilx-forest-deep); color:#fff;
}
.wz-hero__grid{ position:static; box-sizing:border-box; width:100%; padding-block:clamp(40px,8vw,56px) clamp(32px,6vw,48px); }
.wz-hero__copy{ position:relative; z-index:2; max-width:640px; }
.wz-hero__copy .eyebrow{ color:var(--ilx-gold); }
.wz-hero__copy h1{
  color:#fff; text-wrap:balance;
  font-size:clamp(2.15rem,1.5rem + 3vw,3.7rem); line-height:1.06; margin-bottom:.4em;
  text-shadow:0 2px 24px rgba(7,20,13,.45);
}
.wz-hero__copy .hero__sum{ color:rgba(255,255,255,.9); max-width:34em; text-shadow:0 1px 14px rgba(7,20,13,.4); }
.wz-hero__copy .hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.wz-hero__copy .ilx-btn--ghost,
.wz-island .ilx-btn--ghost{ color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.65); }
.wz-hero__copy .ilx-btn--ghost:hover,
.wz-island .ilx-btn--ghost:hover{ background:#fff; color:var(--ilx-forest-deep); }
.wz-hero__copy .hero__rating{ margin-top:22px; color:rgba(255,255,255,.85); }
.wz-hero__copy .hero__rating .infinity-stars{ color:var(--ilx-gold); }

/* Media: full-bleed background on phones, framed card from 900px up. */
.wz-hero__media{ position:absolute; inset:0; z-index:0; }
.wz-hero__video{ display:block; width:100%; height:100%; object-fit:cover; }
.wz-hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,31,20,.42) 0%,rgba(11,31,20,.6) 40%,rgba(11,31,20,.92) 100%);
}

@media (max-width:560px){
  .wz-hero__copy .hero__cta{ flex-direction:column; align-items:stretch; }
  .wz-hero__copy .hero__cta .ilx-btn{ width:100%; }
}

@media (min-width:900px){
  .wz-hero{ align-items:center; min-height:0; }
  .wz-hero__grid{
    display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:clamp(40px,5vw,80px); align-items:center;
    padding-block:clamp(56px,6vw,88px);
  }
  .wz-hero__media{
    position:relative; inset:auto; justify-self:center;
    width:min(100%,380px); aspect-ratio:9/14; max-height:620px;
    border-radius:var(--ilx-r-lg); overflow:hidden;
    box-shadow:var(--ilx-shadow-lg); outline:1px solid var(--ilx-gold-dim); outline-offset:-1px;
  }
  .wz-hero__scrim{ background:linear-gradient(180deg,transparent 60%,rgba(11,31,20,.35) 100%); }
}

/* ---------- 3. Steps ---------- */
.wz-steps__list{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(18px,3vw,28px); grid-template-columns:1fr; }
.wz-step{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--ilx-white); border:1px solid var(--ilx-line); border-radius:var(--ilx-r-lg);
  box-shadow:var(--ilx-shadow-sm);
}
.wz-step__media{ margin:0; aspect-ratio:4/3; overflow:hidden; background:var(--ilx-cream); }
.wz-step__media img{ display:block; width:100%; height:100%; object-fit:cover; }
.wz-step__body{ padding:20px 22px 24px; }
.wz-step__n{
  display:block; margin-bottom:6px;
  font-family:var(--ilx-serif); font-size:1.5rem; font-weight:500; line-height:1; color:var(--ilx-orange);
}
.wz-step__body h3{ margin:0 0 .35em; font-size:var(--ilx-fs-h4); }
.wz-step__body p{ margin:0; color:var(--ilx-muted); }
@media (min-width:700px){
  .wz-steps__list{ grid-template-columns:repeat(2,1fr); }
  .wz-step__media{ aspect-ratio:4/5; }
}
@media (min-width:1100px){
  .wz-steps__list{ grid-template-columns:repeat(4,1fr); }
}

/* ---------- 4. Off-island ---------- */
.wz-island{ background:var(--ilx-forest-deep); color:#fff; padding-block:clamp(56px,7vw,110px); }
.wz-island__grid{ display:grid; gap:clamp(28px,4vw,56px); align-items:center; }
.wz-island__copy .eyebrow{ color:var(--ilx-gold); }
.wz-island__copy h2{ color:#fff; font-size:var(--ilx-fs-h2); margin-bottom:.4em; }
.wz-island__copy p{ color:rgba(255,255,255,.86); font-size:var(--ilx-fs-lead); max-width:34em; }
.wz-island__copy .hero__cta{ margin-top:24px; display:flex; flex-wrap:wrap; gap:12px; }
.wz-island__media{ margin:0; border-radius:var(--ilx-r-lg); overflow:hidden; box-shadow:var(--ilx-shadow-lg); aspect-ratio:4/3; }
.wz-island__media img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
@media (max-width:560px){ .wz-island__copy .hero__cta .ilx-btn{ width:100%; } }
@media (min-width:900px){
  .wz-island__grid{ grid-template-columns:1.1fr .9fr; }
  .wz-island__media{ aspect-ratio:4/5; }
}

/* ---------- 5. Service area ---------- */
.wz-area__list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.wz-area__list a{
  display:inline-flex; align-items:center; gap:8px; padding:12px 20px;
  border:1px solid var(--ilx-line); border-radius:var(--ilx-pill); background:var(--ilx-white);
  font-weight:600; color:var(--ilx-forest-deep); text-decoration:none;
  transition:background-color var(--ilx-dur-fast),color var(--ilx-dur-fast),border-color var(--ilx-dur-fast);
}
.wz-area__list a:hover{ background:var(--ilx-forest-deep); border-color:var(--ilx-forest-deep); color:#fff; }
.wz-area__pin{ display:grid; place-items:center; color:var(--ilx-orange); }
.wz-area__pin svg{ width:16px; height:16px; }
.wz-area__list a:hover .wz-area__pin{ color:var(--ilx-gold); }

/* ---------- 6. Proof ---------- */
.wz-proof__grid{ display:grid; gap:clamp(16px,2.4vw,24px); grid-template-columns:1fr; }
.wz-quote{
  margin:0; padding:26px 24px; display:flex; flex-direction:column; gap:14px;
  background:var(--ilx-white); border:1px solid var(--ilx-line); border-radius:var(--ilx-r-lg); box-shadow:var(--ilx-shadow-sm);
}
.wz-quote blockquote{ margin:0; }
.wz-quote blockquote p{
  margin:0; font-family:var(--ilx-serif); font-style:italic; font-size:var(--ilx-fs-h4); line-height:1.45; color:var(--ilx-forest-deep);
}
.wz-quote figcaption{ display:flex; flex-direction:column; gap:2px; margin-top:auto; font-size:var(--ilx-fs-sm); }
.wz-quote figcaption b{ color:var(--ilx-ink); }
.wz-quote figcaption span{ color:var(--ilx-muted); }
.wz-quote figcaption a{ margin-top:6px; font-weight:600; color:var(--ilx-orange-deep); }
.wz-proof__more{ text-align:center; margin:30px 0 0; font-weight:700; }
.wz-proof__more a{ display:inline-flex; align-items:center; gap:8px; color:var(--ilx-forest-deep); }
.wz-proof__more svg{ width:17px; height:17px; }
@media (min-width:800px){ .wz-proof__grid{ grid-template-columns:repeat(3,1fr); } }

/* ---------- 7. Quote form ---------- */
.wz-quote-section{ background:var(--ilx-paper); scroll-margin-top:calc(var(--ilx-header-h) + 8px); }
.wz-quote-section__grid{ display:grid; gap:clamp(28px,4vw,64px); align-items:start; }
.wz-quote-section__lead h2{ font-size:var(--ilx-fs-h2); margin-bottom:.4em; }
.wz-quote-section__lead > p{ color:var(--ilx-muted); font-size:var(--ilx-fs-lead); }
.wz-quote-section__points{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px; }
.wz-quote-section__points li{ display:flex; align-items:flex-start; gap:10px; font-weight:600; color:var(--ilx-forest-deep); }
.wz-quote-section__points svg{ flex:none; width:20px; height:20px; margin-top:2px; color:var(--ilx-forest-mid); }
.wz-quote-section__call{ margin-top:22px; font-weight:600; }
.wz-quote-section__call a{ color:var(--ilx-orange-deep); font-weight:800; white-space:nowrap; }
.wz-quote-section__form{
  background:var(--ilx-white); border:1px solid var(--ilx-line); border-radius:var(--ilx-r-lg);
  box-shadow:var(--ilx-shadow); padding:clamp(20px,3vw,34px);
}
@media (min-width:900px){
  .wz-quote-section__grid{ grid-template-columns:.9fr 1.1fr; }
  .wz-quote-section__lead{ position:sticky; top:calc(var(--ilx-header-h) + 24px); }
}

/* Fluent Forms inside the card: same look as the contact page card. */
.wz-quote-section__form .fluentform .ff-el-group{ margin-bottom:16px; }
.wz-quote-section__form .fluentform .ff-btn-submit{ width:100%; min-height:52px; }
.wz-quote-section__form .fluentform .ff-el-input--label label{
  font-size:var(--ilx-fs-sm); font-weight:600; color:var(--ilx-ink) !important; margin-bottom:6px;
}
.wz-quote-section__form .fluentform .ff-el-is-required,
.wz-quote-section__form .fluentform .ff-el-input--label .text-danger{ color:var(--ilx-orange) !important; }
.wz-quote-section__form .fluentform input[type="text"],
.wz-quote-section__form .fluentform input[type="email"],
.wz-quote-section__form .fluentform input[type="tel"],
.wz-quote-section__form .fluentform select,
.wz-quote-section__form .fluentform textarea{
  color:var(--ilx-ink) !important; background:var(--ilx-paper) !important;
  border:1px solid var(--ilx-line) !important; border-radius:var(--ilx-r-sm);
  min-height:48px; font-size:16px; /* 16px stops iOS zoom on focus */
}
.wz-quote-section__form .fluentform textarea{ min-height:96px; }
.wz-quote-section__form .fluentform input::placeholder,
.wz-quote-section__form .fluentform textarea::placeholder{ color:#6b7263 !important; }
.wz-quote-section__form .fluentform input:focus,
.wz-quote-section__form .fluentform select:focus,
.wz-quote-section__form .fluentform textarea:focus{
  outline:none; border-color:var(--ilx-forest-mid) !important; box-shadow:0 0 0 3px rgba(46,107,76,.14) !important;
}
.wz-quote-section__form .fluentform .ff-el-input--content{ display:flex; flex-wrap:wrap; gap:0 24px; }
.wz-quote-section__form .fluentform .ff-el-form-check{ margin:0; }
.wz-quote-section__form .fluentform .ff-el-form-check-label{
  display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer;
  color:var(--ilx-ink); font-weight:500; line-height:1.3;
}
.wz-quote-section__form .fluentform .ff-el-form-check-input{ flex:none; width:20px; height:20px; margin:0; accent-color:var(--ilx-orange); }

/* ---------- 9. Sticky mobile action bar ---------- */
.wz-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:flex; gap:10px; align-items:center;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(11,31,20,.96); border-top:1px solid var(--ilx-gold-dim);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transform:translateY(110%); visibility:hidden;
  transition:transform var(--ilx-dur-fast) var(--ilx-ease),visibility 0s linear var(--ilx-dur-fast);
}
.wz-bar.is-visible{ transform:none; visibility:visible; transition-delay:0s; }
.wz-bar__quote{ flex:1; padding-block:16px; }
.wz-bar__call{
  flex:none; display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
  color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6); text-decoration:none;
}
.wz-bar__call svg{ width:22px; height:22px; }
.wz-bar__call:active{ background:rgba(255,255,255,.14); }
@media (min-width:900px){ .wz-bar{ display:none; } }
@media (max-width:899px){ .ilx-winterization .ilx-footer, .ilx-winterization footer{ padding-bottom:84px; } }
@media (prefers-reduced-motion:reduce){ .wz-bar{ transition:none; } }