/* ==========================================================================
   Avalanche for Landscapers — design system
   Ported from the Claude Design bundle "Avalanche for Landscapers - Landing Page".

   Section 1 is the design's own <style> block, verbatim.
   Section 2 converts the design's inline style-hover="..." attributes into
   real CSS (same declarations, class-scoped).
   Section 3 is placeholder styling for the design's empty image slots.
   Section 4 is an ADDITIVE responsive layer — the source design is a 1180px
   artboard with no media queries, so nothing below 1180px was specified.
   These rules only apply under breakpoints and never alter desktop rendering.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design <style> block — verbatim from the source
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
a{color:#1b6493;text-decoration:none}
a:hover{color:#13A89E}
@keyframes ascentFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
section[id]{scroll-margin-top:calc(84px + var(--afl-admin-offset,0px))}
#ascent-prog{position:fixed;top:var(--afl-admin-offset,0px);left:0;height:3px;width:0;background:linear-gradient(90deg,#13A89E,#2FA46B);z-index:130;transition:width .08s linear}
.dotnav{position:fixed;left:22px;top:calc(50% + var(--afl-admin-offset,0px) / 2);transform:translateY(-50%);z-index:110}
.dotnav-inner{position:relative;display:flex;flex-direction:column;gap:2px;padding:8px 0}
.dotnav-line{position:absolute;left:10px;top:12px;bottom:12px;width:2px;background:#D8E3EB;border-radius:2px}
.dotnav a{position:relative;display:flex;align-items:center;gap:11px;padding:6px 0;text-decoration:none;cursor:pointer}
.dotnav-dot{flex:none;width:22px;display:flex;justify-content:center}
.dotnav-dot::before{content:"";width:9px;height:9px;border-radius:50%;background:#C3D2DD;box-shadow:0 0 0 2px #ffffff,0 0 0 3.5px #C3D2DD;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.dotnav a:hover .dotnav-dot::before{transform:scale(1.5);background:#13A89E;box-shadow:0 0 0 2px #ffffff,0 0 0 3.5px #13A89E}
.dotnav a.is-active .dotnav-dot::before{background:#13A89E;box-shadow:0 0 0 2px #ffffff,0 0 0 3.5px #13A89E;transform:scale(1.35)}
.dotnav-label{font-family:'Poppins',sans-serif;font-weight:600;font-size:12.5px;color:#00263D;background:#ffffff;border:1px solid #E4EAEF;box-shadow:0 8px 22px -8px rgba(11,41,66,0.3);padding:5px 12px;border-radius:20px;white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.dotnav:hover .dotnav-label{opacity:1;transform:translateX(0)}
@media (max-width:1240px){.dotnav{display:none}}

/* Page shell — the design's root wrapper div. */
body.afl-landing{font-family:'Quicksand',sans-serif;color:#243441;background:#fff;overflow-x:hidden}

/* --------------------------------------------------------------------------
   2. style-hover="..." attributes from the design, as real CSS
   -------------------------------------------------------------------------- */
/* Trust-strip client logo tiles — design: base rgba(255,255,255,.93), hover #fff */
.afl-logo-tile{transition:background .18s ease}
.afl-logo-tile:hover{background:#fff}
/* Video play button — design: hover background #fff, transform scale(1.06) */
.afl-play-btn:hover .afl-play-dot{background:#fff;transform:scale(1.06)}
/* Footer "Avalanche Creative" link — design: hover color + border-bottom #58C2E3 */
.afl-footer-link:hover{color:#58C2E3;border-bottom-color:#58C2E3}

/* --------------------------------------------------------------------------
   3. Empty image slots from the design, as styled placeholders
   -------------------------------------------------------------------------- */
.afl-ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;
  background:repeating-linear-gradient(135deg,rgba(19,168,158,.07) 0 10px,rgba(19,168,158,.02) 10px 20px);
  border:1px dashed rgba(19,168,158,.42);border-radius:inherit;color:#6B8194;
  font-family:'Quicksand',sans-serif;font-weight:600;font-size:12px;line-height:1.4}
.afl-ph span{max-width:22ch}
/* Deliberate background texture for the proof section — this is the design, not
   a placeholder waiting on a photo, so it carries no dashed border or label. */
.afl-texture{background:repeating-linear-gradient(135deg,rgba(88,194,227,.10) 0 10px,rgba(88,194,227,.03) 10px 20px)}
/* Placeholders sitting on the dark proof/video panels read light instead. */
.afl-ph--dark{background:repeating-linear-gradient(135deg,rgba(88,194,227,.10) 0 10px,rgba(88,194,227,.03) 10px 20px);
  border-color:rgba(88,194,227,.35);color:#9FC0D4}

/* --------------------------------------------------------------------------
   4. Responsive layer (ADDITIVE — not present in the source design)
   The source is a fixed 1180px artboard. Below that, its fixed grids
   (repeat(3,1fr), 1fr 1px 1fr, 0.82fr 1.18fr) and 56px H1 would break.
   -------------------------------------------------------------------------- */
@media (max-width:1000px){
  .afl-grid-3{grid-template-columns:repeat(2,1fr)!important}
  .afl-offer-grid{grid-template-columns:1fr!important;gap:28px!important}
  .afl-offer-rule{display:none!important}
  .afl-founder-grid{grid-template-columns:1fr!important;gap:34px!important}
  .afl-founder-figure{max-width:340px;margin:0 auto!important}
}
@media (max-width:820px){
  .afl-grid-3,.afl-grid-2{grid-template-columns:1fr!important}
  .afl-logo-grid{grid-template-columns:repeat(2,1fr)!important}
  .afl-h1{font-size:38px!important}
  .afl-h2{font-size:27px!important}
  .afl-h2-lg{font-size:30px!important}
  .afl-sec{padding-left:20px!important;padding-right:20px!important}
  .afl-roi-card{padding:30px 22px!important;border-radius:16px!important}
  .afl-offer-card{padding:30px 24px!important}
  .afl-hero{padding-top:76px!important;padding-bottom:70px!important}
  /* The hero's floating testimonial card is absolutely positioned in the design;
     below the artboard width it needs to flow instead of overlap. */
  .afl-hero-quote{position:static!important;width:auto!important;max-width:560px;margin:18px 0 0 auto}
  .afl-hero-shot{padding-bottom:0!important}
  .afl-stat-grid{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:560px){
  .afl-logo-grid{grid-template-columns:1fr!important}
  .afl-trust-grid{grid-template-columns:1fr!important;gap:26px!important}
  .afl-trust-grid>div{border-right:0!important}
  .afl-stat-grid{grid-template-columns:1fr!important}
  .afl-h1{font-size:31px!important}
  .afl-price{font-size:44px!important}
  .afl-bar-cta{padding:10px 14px!important;font-size:13px!important}
}

/* --------------------------------------------------------------------------
   5. Booking modal (ADDITIVE — not in the source design)
   Holds the HubSpot meetings calendar. Tokens match the design's palette.
   -------------------------------------------------------------------------- */
.afl-modal[hidden]{display:none}
.afl-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;padding-top:calc(24px + var(--afl-admin-offset,0px))}
.afl-modal__backdrop{position:absolute;inset:0;background:rgba(4,29,46,.72);backdrop-filter:blur(3px);animation:aflFade .18s ease}
.afl-modal__panel{position:relative;width:100%;max-width:920px;max-height:calc(100vh - 48px);display:flex;flex-direction:column;
  background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,38,61,.6);animation:aflRise .22s cubic-bezier(.4,0,.2,1)}
.afl-modal__head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 26px 18px;border-bottom:1px solid #E4EAEF}
.afl-modal__eyebrow{font-family:'Poppins',sans-serif;font-weight:600;font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:#13A89E;margin:0 0 6px}
.afl-modal__title{font-family:'Poppins',sans-serif;font-weight:800;font-size:22px;line-height:1.2;letter-spacing:-0.02em;color:#00263D;margin:0}
.afl-modal__close{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid #E4EAEF;background:#fff;color:#5E6E7A;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease}
.afl-modal__close:hover{background:#F5F8FA;color:#00263D;border-color:#C3D2DD}
.afl-modal__close:focus-visible{outline:2px solid #13A89E;outline-offset:2px}
.afl-modal__body{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.afl-modal__frame{flex:1 1 auto;width:100%;min-height:560px;border:0;display:block}
.afl-modal__fallback{flex:none;padding:12px 26px 16px;border-top:1px solid #EEF2F5;text-align:center;
  font-family:'Quicksand',sans-serif;font-weight:500;font-size:12.5px;color:#6B8194}
.afl-modal__fallback p{margin:0 0 2px}
.afl-modal__fallback a{font-family:'Poppins',sans-serif;font-weight:700;color:#1b6493}
body.afl-modal-open{overflow:hidden}
@keyframes aflFade{from{opacity:0}to{opacity:1}}
@keyframes aflRise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media (max-width:700px){
  .afl-modal{padding:0}
  .afl-modal__panel{max-width:none;height:100%;max-height:100%;border-radius:0}
  .afl-modal__title{font-size:19px}
  .afl-modal__frame{min-height:420px}
}
@media (prefers-reduced-motion:reduce){
  .afl-modal__backdrop,.afl-modal__panel{animation:none}
}

/* --------------------------------------------------------------------------
   6. WordPress admin bar offset (ADDITIVE — not in the source design)
   Logged-in users get a fixed admin bar at the top of the viewport, which the
   design's own fixed chrome (sticky bar, progress bar) would sit underneath.
   Everything top-anchored reads --afl-admin-offset, so this one variable moves
   the whole set. Zero for logged-out visitors, so the public page is untouched.

   #ascent-bar carries top:0 as an inline style ported from the design, and an
   inline style beats a stylesheet rule — hence a custom property rather than
   !important, which keeps the design's markup intact and still lets per-node
   Builder settings win.

   Heights track WordPress core: 32px, 46px at <=782px, and at <=600px the bar
   turns position:absolute and scrolls away, so the offset goes back to zero.
   -------------------------------------------------------------------------- */
body.admin-bar{--afl-admin-offset:32px}
@media screen and (max-width:782px){
  body.admin-bar{--afl-admin-offset:46px}
}
@media screen and (max-width:600px){
  body.admin-bar{--afl-admin-offset:0px}
}

/* --------------------------------------------------------------------------
   7. Lead-capture forms (ADDITIVE — not in the source design)
   Formidable renders the markup; this restyles it to the design. Scoped to
   .afl-form so no other Formidable form on the site is affected.
   -------------------------------------------------------------------------- */
.afl-form{--afl-f-bd:#D8E3EB;--afl-f-bg:#fff;--afl-f-ink:#243441;--afl-f-ph:#8FA3B4;--afl-f-lb:#5E6E7A}
.afl-form--dark{--afl-f-bd:#1E4664;--afl-f-bg:rgba(255,255,255,.06);--afl-f-ink:#fff;--afl-f-ph:#7F9DB4;--afl-f-lb:#9BC4DC}

.afl-form .frm_form_fields > fieldset{border:0;padding:0;margin:0}
.afl-form .frm_fields_container{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.afl-form .frm_form_field{flex:1 1 170px;min-width:0;margin:0}
/* Hidden-type fields occupy no space; :has() keeps their empty container out
   of the flex flow, and the label rule below covers browsers without it. */
.afl-form .frm_form_field:has(> input[type=hidden]){display:none}
/* Formidable's own stylesheet is dequeued, so its utility classes need rules
   here or they render visibly — the form legend is the obvious one. */
.afl-form .frm_screen_reader,.afl-form legend,.afl-form .frm_hidden,
.afl-form .frm_primary_label{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Labels are visually hidden; placeholders carry them. */
.afl-form input[type=text],.afl-form input[type=email],.afl-form input[type=url]{
  width:100%;height:52px;padding:0 16px;border-radius:11px;border:1px solid var(--afl-f-bd);background:var(--afl-f-bg);
  color:var(--afl-f-ink);font-family:'Quicksand',sans-serif;font-weight:600;font-size:14.5px;box-shadow:none;
  transition:border-color .16s ease,box-shadow .16s ease}
.afl-form input::placeholder{color:var(--afl-f-ph);font-weight:500;opacity:1}
.afl-form input:focus{outline:0;border-color:#13A89E;box-shadow:0 0 0 3px rgba(19,168,158,.22)}
.afl-form .frm_blank_field input,.afl-form input.frm_blank_field{border-color:#E4572E;box-shadow:0 0 0 3px rgba(228,87,46,.18)}

/* The opt-in checkbox gets its own full-width row rather than competing with
   the text inputs for space in the flex line. */
.afl-form .afl-field-check{flex:1 1 100%;order:2;margin:2px 0 0}
.afl-form .afl-field-check .frm_checkbox{margin:0}
.afl-form .afl-field-check label{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:'Quicksand',sans-serif;font-weight:600;font-size:13.5px;line-height:1.4;color:var(--afl-f-lb)}
.afl-form .afl-field-check input[type=checkbox]{flex:none;width:18px;height:18px;margin:0;
  accent-color:#2FA46B;cursor:pointer}
.afl-form--dark .afl-field-check label{color:#DCE9F2}

.afl-form .frm_submit{flex:0 0 auto;margin:0;align-self:flex-start;order:3}
/* The hero form is a narrow card: stack the fields and go full-width.
   It is shorter than the browser mock-up it replaces, so it needs clearance for
   the absolutely-positioned testimonial card that sits at the column's bottom. */
.afl-hero-form{margin-bottom:52px}
.afl-hero-form .afl-form .frm_fields_container{flex-direction:column;gap:10px}
.afl-hero-form .afl-form .frm_form_field{flex:1 1 auto;width:100%}
.afl-hero-form .afl-form .frm_submit{flex:1 1 auto;width:100%;margin-top:2px}
.afl-hero-form .afl-form .frm_submit button{width:100%;justify-content:center;font-size:15.5px}
.afl-hero-form .afl-form .frm_message{text-align:center}

/* The audit block is centre-aligned, so its form should be too. */
.afl-audit-block .afl-form .frm_fields_container{justify-content:center}
.afl-audit-block .afl-form .afl-field-check{display:flex;justify-content:center}
.afl-audit-block .afl-form .frm_submit{flex:1 1 100%;display:flex;justify-content:center}
.afl-form .frm_submit button,.afl-form input[type=submit]{
  height:52px;padding:0 26px;border:0;border-radius:11px;cursor:pointer;
  background:#2FA46B;color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:14.5px;
  box-shadow:0 12px 26px -12px rgba(47,164,107,.8);transition:background .16s ease}
.afl-form .frm_submit button:hover,.afl-form input[type=submit]:hover{background:#0E7A50}
.afl-form .frm_submit button:focus-visible{outline:2px solid #13A89E;outline-offset:2px}

/* Validation + confirmation messaging in the design's voice. */
.afl-form .frm_error,.afl-form .frm_error_style{
  font-family:'Quicksand',sans-serif;font-weight:600;font-size:12.5px;color:#C0431F;
  background:none;border:0;padding:4px 0 0;margin:0}
.afl-form--dark .frm_error,.afl-form--dark .frm_error_style{color:#FF9C7A}
.afl-form .frm_message,.afl-form .frm_success_style{
  font-family:'Poppins',sans-serif;font-weight:600;font-size:14.5px;line-height:1.5;color:#0E7A50;
  background:none;border:0;padding:0;margin:0}
.afl-form--dark .frm_message,.afl-form--dark .frm_success_style{color:#6FD79E}
.afl-form .frm_message p{margin:0}
/* Formidable's own honeypot must stay off-screen, not merely hidden. */
.afl-form .frm_verify{position:absolute!important;left:-9999px!important}

@media (max-width:600px){
  .afl-form .frm_fields_container{flex-direction:column}
  .afl-form .frm_form_field,.afl-form .frm_submit{width:100%}
  .afl-form .frm_submit button,.afl-form input[type=submit]{width:100%}
}