/* ==========================================================================
   EC Roofing — PPC Landing Page layer
   ==========================================================================
   Loads AFTER ec.css and inherits every token from it (brand colors, the
   Oswald/Open Sans pair, the fluid type scale, spacing, the green rule).
   Nothing here redefines the brand — it only adds the furniture a paid-search
   landing page needs that the main site has no use for:

     - a stripped masthead with no navigation (no exits off a paid click)
     - an above-the-fold form card on white (ec.css only styles Gravity Forms
       on the blue .ec-contact panel, so the card needs its own overrides)
     - a persistent mobile call/quote bar that does not depend on the nav
     - compact trust furniture sized to sit directly under the hero

   Scoped to `.ec-lp` so it can never leak into the main site's templates.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page shell
   -------------------------------------------------------------------------- */
.ec-lp {
  /* The LP runs a tighter vertical rhythm than the brochure site — a paid
     visitor should reach the proof and the second CTA without a long scroll. */
  --ec-section-y: clamp(2.75rem, 1.75rem + 4.5vw, 5rem);
}

/* The sticky bar is short here (no nav row), so anchors need less offset. */
html:has(.ec-lp) { scroll-padding-top: 6rem; }

/* --------------------------------------------------------------------------
   2. Masthead — logo, license, phone. No navigation.
   -------------------------------------------------------------------------- */
.ec-lp-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ec-white);
  border-bottom: 3px solid var(--ec-green);
  box-shadow: var(--ec-shadow);
}
.ec-lp-bar__inner {
  max-width: var(--ec-wrap);
  margin-inline: auto;
  padding: .7rem var(--ec-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* The logo is not a link: a paid landing page gives the visitor one job. */
.ec-lp-bar__brand { display: flex; flex-direction: column; gap: .15rem; }
.ec-lp-bar__logo { width: auto; max-height: 52px; }
.ec-lp-bar__mhic {
  font-family: var(--ec-font-head);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ec-gray);
}
.ec-lp-bar__actions { display: flex; align-items: center; gap: .75rem; }

/* Phone block: the label earns the click, the number is the click target.
   Visible at EVERY width — it was hidden below 560px, which left the mobile
   header with no phone number at all on the page where calling is the single
   most likely conversion. */
.ec-lp-bar__phone { text-align: right; text-decoration: none; display: block; }
.ec-lp-bar__phone small {
  display: block;
  font-family: var(--ec-font-head);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ec-gray);
}
.ec-lp-bar__phone strong {
  font-family: var(--ec-font-head);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ec-blue);
}
.ec-lp-bar__phone:hover strong { color: var(--ec-blue-dark); }

/* On a narrow screen the number alone does the work; the label above it is
   the first thing to go, then the size comes down. */
@media (max-width: 559.98px) {
  .ec-lp-bar__phone small { display: none; }
  .ec-lp-bar__phone strong { font-size: 1.1875rem; }
}
/* Below 768px the sticky bottom bar carries the estimate CTA, so the masthead
   button would be a third redundant target. The phone stays. */
@media (max-width: 767px) { .ec-lp-bar__actions .ec-btn { display: none; } }

/* --------------------------------------------------------------------------
   3. Hero — copy beside the form card
   -------------------------------------------------------------------------- */
.ec-lp-hero {
  position: relative;
  isolation: isolate;
  background: var(--ec-blue-darker);
  color: var(--ec-white);
  overflow: hidden;
}
.ec-lp-hero__bg { position: absolute; inset: 0; z-index: -2; }
.ec-lp-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Two layers: a flat wash for contrast everywhere, and a left-weighted
   gradient so the headline keeps a 4.5:1 ratio over the brightest part of
   the photograph without flattening the image behind the form. */
.ec-lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(0,58,116,.95) 0%, rgba(0,58,116,.86) 45%, rgba(0,58,116,.68) 100%),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 9px);
}
.ec-lp-hero__inner {
  max-width: var(--ec-wrap);
  margin-inline: auto;
  padding: clamp(2rem, 1.25rem + 3vw, 3.75rem) var(--ec-gutter) clamp(2.5rem, 1.75rem + 3vw, 4rem);
  display: grid;
  gap: clamp(2rem, 1.25rem + 3vw, 3.25rem);
  align-items: start;
}
@media (min-width: 960px) {
  .ec-lp-hero__inner { grid-template-columns: 1.05fr minmax(400px, .95fr); }
}

.ec-lp-hero h1 {
  color: var(--ec-white);
  max-width: 17ch;
  text-wrap: balance;
  hyphens: none;
  margin-bottom: .45em;
}
.ec-lp-hero__lede {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  color: rgba(255,255,255,.93);
  max-width: 48ch;
}
.ec-lp-hero .ec-eyebrow { color: var(--ec-green); }

/* Hero proof points — tighter than .ec-checks and reversed for the dark panel. */
.ec-lp-points { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .55rem; }
.ec-lp-points li {
  position: relative;
  padding-left: 1.75rem;
  font-size: .9688rem;
  color: rgba(255,255,255,.94);
}
.ec-lp-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .28em;
  width: 19px;
  height: 19px;
  background: var(--ec-green);
  clip-path: polygon(41% 74%, 82% 22%, 94% 33%, 43% 94%, 6% 58%, 17% 46%);
}
@media (min-width: 620px) and (max-width: 959px) {
  .ec-lp-points { grid-template-columns: repeat(2, 1fr); gap: .55rem 1.75rem; }
}

/* Call affordance in the hero, for visitors who will never fill a form. */
.ec-lp-hero__call {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.75rem;
  text-decoration: none;
  color: var(--ec-white);
}
.ec-lp-hero__call svg { width: 22px; height: 22px; fill: var(--ec-green); flex: 0 0 auto; }
.ec-lp-hero__call span {
  font-family: var(--ec-font-head);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
.ec-lp-hero__call small {
  display: block;
  font-family: var(--ec-font-body);
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: .85;
  margin-top: .2rem;
}
.ec-lp-hero__call:hover span { color: var(--ec-green); }
@media (min-width: 768px) { .ec-lp-hero__call { display: none; } }

/* --------------------------------------------------------------------------
   4. Form card
   -------------------------------------------------------------------------- */
.ec-lp-card {
  background: var(--ec-white);
  color: var(--ec-ink);
  border-radius: var(--ec-radius);
  border-top: 5px solid var(--ec-green);
  box-shadow: var(--ec-shadow-lg);
  padding: clamp(1.35rem, 1rem + 1.4vw, 2rem);
}
.ec-lp-card__head { margin-bottom: 1.1rem; }
.ec-lp-card h2 {
  font-size: clamp(1.45rem, 1.25rem + .8vw, 1.85rem);
  margin-bottom: .3em;
}
.ec-lp-card__sub { font-size: .9375rem; color: var(--ec-gray); margin: 0; }

/* Reassurance strip directly under the submit button — the three objections
   that stop a homeowner submitting a roofing form. */
.ec-lp-card__trust {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: .9rem 0 0;
  border-top: 1px solid var(--ec-gray-mid);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  font-size: .8125rem;
  color: var(--ec-gray);
}
.ec-lp-card__trust li { display: flex; align-items: center; gap: .35rem; }
.ec-lp-card__trust li::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background: var(--ec-green);
  clip-path: polygon(41% 74%, 82% 22%, 94% 33%, 43% 94%, 6% 58%, 17% 46%);
}

/* --- Gravity Forms, restyled ---------------------------------------------
   ec.css styles Gravity Forms only inside `.ec-contact`, the blue panel, where
   it assumes white labels on a dark field. The card is white, so it needs its
   own set — and this is the highest-value surface on the site, so it is worth
   more than a border tweak.

   Scoped to `.gravity-theme` because that is the theme slug pinned by
   ec_lp_form_theme_slug(); a fresh Gravity Forms install would otherwise
   render `orbital`, whose class names none of this matches.
   -------------------------------------------------------------------------- */

/* Field rhythm. GF's own grid stays; only the gaps change. */
.ec-lp-card .gform_wrapper.gravity-theme .gform_fields {
  grid-row-gap: 1.15rem;
  row-gap: 1.15rem;
}

/* "*" indicates required fields — every visible field here is required bar
   the consent box, so the legend is noise above the first input. */
.ec-lp-card .gform_wrapper.gravity-theme .gform_required_legend { display: none; }

/* --- Labels --------------------------------------------------------------
   Deliberately NOT the Oswald condensed caps used elsewhere. Uppercase
   condensed is right for headings and buttons; on six stacked field labels it
   reads as shouting and is measurably harder to scan. Body font, sentence
   case, small and confident. */
.ec-lp-card .gform_wrapper.gravity-theme .gfield_label,
.ec-lp-card .gform_wrapper.gravity-theme legend.gfield_label {
  display: block;
  font-family: var(--ec-font-body);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ec-ink);
  margin: 0 0 .4rem;
  padding: 0;
}
.ec-lp-card .gform_wrapper.gravity-theme .gfield_required_asterisk,
.ec-lp-card .gform_wrapper.gravity-theme .gfield_required {
  color: var(--ec-gray);
  font-weight: 400;
  text-decoration: none;
}

/* --- Inputs --------------------------------------------------------------
   Taller, softer and calmer than the 2px-square brand panels: a form is the
   one place on the page where the visitor is doing work, and sharp hairline
   boxes read as a spreadsheet. */
.ec-lp-card .gform_wrapper.gravity-theme input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.ec-lp-card .gform_wrapper.gravity-theme select,
.ec-lp-card .gform_wrapper.gravity-theme textarea {
  width: 100%;
  min-height: 52px;
  padding: .85rem 1rem;
  font-family: var(--ec-font-body);
  /* 16px minimum, or iOS Safari zooms the page on focus. */
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ec-ink);
  background: var(--ec-white);
  border: 1.5px solid #dfe3e8;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(35, 35, 35, .04);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.ec-lp-card .gform_wrapper.gravity-theme ::placeholder { color: #9aa3ad; opacity: 1; }

.ec-lp-card .gform_wrapper.gravity-theme input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):hover,
.ec-lp-card .gform_wrapper.gravity-theme select:hover,
.ec-lp-card .gform_wrapper.gravity-theme textarea:hover { border-color: #c3cad2; }

/* A ring rather than an outline: it reads as "active field" instead of
   "browser default", and does not shift layout. */
.ec-lp-card .gform_wrapper.gravity-theme input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus,
.ec-lp-card .gform_wrapper.gravity-theme select:focus,
.ec-lp-card .gform_wrapper.gravity-theme textarea:focus {
  outline: none;
  border-color: var(--ec-green);
  box-shadow: 0 0 0 4px rgba(127, 190, 64, .18);
}
.ec-lp-card .gform_wrapper.gravity-theme textarea { min-height: 110px; }

/* --- Name: two columns, one label ---------------------------------------
   GF renders First/Last as sub-labels UNDER each input, which gives the field
   two labels and a stack of four lines. The sub-labels become placeholders
   (set on the form itself) and are kept for screen readers only. */
.ec-lp-card .gform_wrapper.gravity-theme .ginput_complex.ginput_container_name {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}
.ec-lp-card .gform_wrapper.gravity-theme .ginput_complex .gform-grid-col { padding: 0; }
.ec-lp-card .gform_wrapper.gravity-theme .gform-field-label--type-sub {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Phone and Zip share a row; the 6/12 span comes from the form itself, so
   only the small-screen collapse is handled here. */
@media (max-width: 419.98px) {
  .ec-lp-card .gform_wrapper.gravity-theme .gfield--width-half { grid-column: 1 / -1; }
}

/* --- Consent -------------------------------------------------------------
   The SMS copy is legally required and legally fixed, but at body size it is
   the largest block in the card and reads as the main message. Demote it to
   fine print beside a proper checkbox. */
.ec-lp-card .gform_wrapper.gravity-theme .gfield--type-consent > .gfield_label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ec-lp-card .gform_wrapper.gravity-theme .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .85rem;
  background: var(--ec-gray-light);
  border-radius: 10px;
}
.ec-lp-card .gform_wrapper.gravity-theme .ginput_container_consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: .1rem 0 0;
  accent-color: var(--ec-green);
  cursor: pointer;
}
.ec-lp-card .gform_wrapper.gravity-theme .gfield_consent_label,
.ec-lp-card .gform_wrapper.gravity-theme .gfield_consent_label .gform-field-label__text {
  font-family: var(--ec-font-body);
  font-size: .6875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ec-gray);
  cursor: pointer;
}
.ec-lp-card .gform_wrapper.gravity-theme .gfield_consent_label a {
  color: var(--ec-blue);
  text-decoration: underline;
}

/* --- Submit --------------------------------------------------------------- */
.ec-lp-card .gform_wrapper.gravity-theme .gform_footer { margin: 1.35rem 0 0; padding: 0; }
.ec-lp-card .gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.ec-lp-card .gform_wrapper.gravity-theme .gform_footer button {
  width: 100%;
  min-height: 56px;
  background: var(--ec-green);
  color: var(--ec-white);
  border: none;
  border-radius: 10px;
  padding: 1rem 1.5rem;
  font-family: var(--ec-font-head);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(127, 190, 64, .32);
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.ec-lp-card .gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover,
.ec-lp-card .gform_wrapper.gravity-theme .gform_footer button:hover {
  background: var(--ec-green-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(127, 190, 64, .4);
}
.ec-lp-card .gform_wrapper.gravity-theme .gform_footer input[type="submit"]:active,
.ec-lp-card .gform_wrapper.gravity-theme .gform_footer button:active { transform: translateY(0); }
.ec-lp-card .gform_wrapper.gravity-theme .gform_footer input[type="submit"]:focus-visible,
.ec-lp-card .gform_wrapper.gravity-theme .gform_footer button:focus-visible {
  outline: 3px solid var(--ec-blue);
  outline-offset: 3px;
}

/* --- Validation ----------------------------------------------------------- */
.ec-lp-card .gform_wrapper.gravity-theme .gfield_error input:not([type="submit"]),
.ec-lp-card .gform_wrapper.gravity-theme .gfield_error select,
.ec-lp-card .gform_wrapper.gravity-theme .gfield_error textarea {
  border-color: #d93b3b;
  box-shadow: 0 0 0 4px rgba(217, 59, 59, .12);
}
.ec-lp-card .gform_wrapper.gravity-theme .gfield_validation_message,
.ec-lp-card .gform_wrapper.gravity-theme .validation_message {
  margin-top: .4rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: .8125rem;
  font-weight: 500;
  color: #c62828;
}
.ec-lp-card .gform_wrapper .gform_validation_errors {
  border-radius: 10px;
  border: 1.5px solid #f3c7c7;
  background: #fdf3f3;
  box-shadow: none;
}
.ec-lp-card .gform_wrapper .gform_validation_errors > h2 {
  font-size: .9375rem;
  color: #c62828;
  text-transform: none;
  font-family: var(--ec-font-body);
}

/* --- Housekeeping --------------------------------------------------------- */
.ec-lp-card .gform_wrapper.gravity-theme .gform_hidden,
.ec-lp-card .gform_wrapper.gravity-theme .gfield--type-hidden { display: none !important; }
/* The honeypot is a real, visible-to-bots field. It must never become
   visible to people, whatever else changes here. */
.ec-lp-card .gform_wrapper .gform_validation_container,
.ec-lp-card .gform_wrapper .gfield--type-honeypot { display: none !important; }
/* GF prints a spinner next to the button on AJAX submit. */
.ec-lp-card .gform_wrapper.gravity-theme .gform_ajax_spinner { margin-left: .6rem; }

/* --------------------------------------------------------------------------
   5. Trust strip
   -------------------------------------------------------------------------- */
.ec-lp-trust { background: var(--ec-gray-light); border-bottom: 1px solid var(--ec-gray-mid); }
.ec-lp-trust__inner {
  max-width: var(--ec-wrap);
  margin-inline: auto;
  padding: 1.25rem var(--ec-gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem 1.5rem;
}
.ec-lp-trust__item { display: flex; align-items: center; gap: .7rem; }
.ec-lp-trust__item svg { width: 26px; height: 26px; fill: var(--ec-green); flex: 0 0 auto; }
.ec-lp-trust__item b {
  display: block;
  font-family: var(--ec-font-head);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--ec-ink);
}
.ec-lp-trust__item span { font-size: .8125rem; color: var(--ec-gray); }

/* --------------------------------------------------------------------------
   6. Offer / financing highlight
   -------------------------------------------------------------------------- */
.ec-lp-offer {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  background: var(--ec-white);
  border: 1px solid var(--ec-gray-mid);
  border-left: 6px solid var(--ec-green);
  border-radius: var(--ec-radius);
  padding: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem);
  box-shadow: var(--ec-shadow);
}
@media (min-width: 820px) { .ec-lp-offer { grid-template-columns: 1fr auto; gap: 2.5rem; } }
.ec-lp-offer h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); margin-bottom: .35em; }
.ec-lp-offer p { color: var(--ec-gray); margin: 0; max-width: 62ch; }
.ec-lp-offer p + p { margin-top: .6em; }

/* --------------------------------------------------------------------------
   7. Sticky mobile action bar
   -------------------------------------------------------------------------- */
.ec-lp-sticky {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: none;
  background: var(--ec-blue-darker);
  box-shadow: 0 -2px 14px rgba(0,0,0,.26);
  /* Clear the iOS home indicator so the buttons stay tappable. */
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.ec-lp-sticky a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  /* 48px minimum touch target. */
  min-height: 48px;
  padding: .85rem .5rem;
  font-family: var(--ec-font-head);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ec-white);
}
.ec-lp-sticky a:first-child { background: var(--ec-blue); }
.ec-lp-sticky a:last-child  { background: var(--ec-green); }
.ec-lp-sticky a + a { border-left: 1px solid rgba(255,255,255,.22); }
.ec-lp-sticky svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }
@media (max-width: 767px) {
  .ec-lp-sticky { display: flex; }
  body.ec-lp { padding-bottom: 3.5rem; }
}

/* --------------------------------------------------------------------------
   8. Gallery / proof
   -------------------------------------------------------------------------- */
.ec-lp-shots {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 2.5rem;
}
.ec-lp-shots figure { margin: 0; }
.ec-lp-shots img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ec-radius);
  box-shadow: var(--ec-shadow);
}
.ec-lp-shots figcaption {
  font-size: .8125rem;
  color: var(--ec-gray);
  margin-top: .55rem;
}

/* --------------------------------------------------------------------------
   9. Footer — legal and NAP only, no link sprawl
   -------------------------------------------------------------------------- */
.ec-lp-foot {
  background: var(--ec-blue-darker);
  color: rgba(255,255,255,.8);
  padding: clamp(2rem, 1.5rem + 2vw, 3rem) 0;
  font-size: .875rem;
}
.ec-lp-foot__inner {
  max-width: var(--ec-wrap);
  margin-inline: auto;
  padding-inline: var(--ec-gutter);
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 820px) {
  .ec-lp-foot__inner { grid-template-columns: 1fr auto; align-items: center; }
}
.ec-lp-foot a { color: var(--ec-white); }
.ec-lp-foot p { margin: 0; }
.ec-lp-foot p + p { margin-top: .4rem; }
.ec-lp-foot__legal { font-size: .75rem; color: rgba(255,255,255,.6); }

/* --------------------------------------------------------------------------
   10. Mobile: the form card becomes a modal
   --------------------------------------------------------------------------
   Below 960px a nine-field form in the hero pushes the headline, the proof
   points and the phone number off the first screen. So the hero carries a
   button instead, and the SAME card is promoted to a modal — not a second
   copy. Gravity Forms cannot render one form twice on a page without
   colliding DOM ids, so duplicating it was never an option.

   This applies by default below 960px — no JS class gate. A <noscript> style
   block in wp_head puts the card back inline for visitors without JavaScript,
   so the form never becomes unreachable. The gate used to be a class set by
   an inline script, but WP Rocket's delay-JS stopped that script running until
   first interaction, which made the form jump into a modal under the
   visitor's thumb.
   -------------------------------------------------------------------------- */

/* The opener is mobile-and-JS only; desktop already shows the card. */
.ec-lp-hero__cta { display: none; margin-top: 1.75rem; }
.ec-lp-hero__cta-note {
  display: block;
  margin-top: .6rem;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .85);
  text-align: center;
}

.ec-lp-card__close { display: none; }

@media (max-width: 959.98px) {

  .ec-lp-hero__cta { display: block; }

  /* --- The modal shell ---------------------------------------------------- */
  .ec-lp-formwrap {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    padding: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Flex + `margin: auto` on the card, NOT `place-items: center`. Centring a
     flex/grid child that is taller than its scroll container pushes the
     child's top edge above the container's scrollable area, where it cannot
     be reached — the heading simply vanishes. Auto margins centre the card
     while leaving the overflow scrollable in both directions. */
  .ec-lp-formwrap.is-open { display: flex; }

  .ec-lp-formwrap__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 25, 51, .68);
    backdrop-filter: blur(2px);
  }

  /* --- The card in modal mode -------------------------------------------- */
  .ec-lp-formwrap.is-open .ec-lp-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 30rem;
    /* dvh so the card resizes with the iOS URL bar and the software keyboard
       rather than being measured against a viewport that is not there. */
    /* vh first as the fallback: dvh is unsupported in older Safari, and
       without a usable max-height the card grows past the wrapper and the
       centring bug above returns. */
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: auto;
    animation: ec-lp-pop 180ms ease-out;
  }

  @keyframes ec-lp-pop {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }

  /* --- Close button ------------------------------------------------------- */
  .ec-lp-formwrap.is-open .ec-lp-card__head { padding-right: 2.5rem; }

  .ec-lp-formwrap.is-open .ec-lp-card__close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    /* Pulled out of the card's padding box so it sits in the top-right corner
       without reserving a row above the heading. */
    float: right;
    margin: -.5rem -.5rem 0 0;
    width: 44px;
    height: 44px;
    font-size: 1.85rem;
    line-height: 1;
    color: var(--ec-gray);
    background: var(--ec-white);
    border: 1px solid var(--ec-gray-mid);
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
  }
  .ec-lp-formwrap.is-open .ec-lp-card__close:hover {
    color: var(--ec-ink);
    border-color: var(--ec-gray);
  }

  /* The sticky bar duplicates the CTA that opened the modal, and on a short
     screen it overlaps the submit button. */
  .ec-lp-modal-open .ec-lp-sticky { display: none; }

  /* The form card lives inside .ec-lp-hero, which sets `isolation: isolate`
     to contain its negative-z background layers. That makes the hero a
     stacking context, so the modal's z-index:200 only ever competed INSIDE
     the hero — and the hero itself sits below the sticky masthead (z-index
     50). The result: the top of the modal, heading included, was painted
     underneath the header.

     Raising the hero itself while the modal is open lifts the whole context
     above the masthead in one move, without unpicking the isolation the
     hero background depends on or touching the header's own z-index. */
  .ec-lp-modal-open .ec-lp-hero { z-index: 300; }
}

/* Scroll lock. Applied to <body> while the modal is open; the card does its
   own scrolling. */
.ec-lp-modal-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   11. Mini-site navigation
   --------------------------------------------------------------------------
   The landing page grew into a small site: the LP plus Why EC Roofing,
   Reviews and Financing. Four links, no dropdowns, and every one of them
   stays inside the funnel.

   On phones the links drop to a second row that scrolls sideways rather than
   collapsing into a hamburger — on a four-item mini-site a drawer is a tap
   and an animation in the way of a link the visitor can already see.
   -------------------------------------------------------------------------- */
/* Scoped to the TOP-LEVEL list only.
   As `.ec-lp-nav ul` this matched the dropdown panel too, and at specificity
   (0,1,1) it beat `.ec-lp-nav__sub { display: none }` at (0,1,0) — so the
   panel computed to display:flex and sat permanently open under the bar as a
   floating white banner of service links. */
.ec-lp-nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(.75rem, .4rem + 1vw, 1.75rem);
  margin: 0;
  padding: 0;
}
.ec-lp-nav a {
  display: block;
  font-family: var(--ec-font-head);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ec-ink);
  padding: .35rem 0;
  border-bottom: 3px solid transparent;
  transition: color var(--ec-transition), border-color var(--ec-transition);
}
.ec-lp-nav a:hover { color: var(--ec-blue); }
.ec-lp-nav a.is-current {
  color: var(--ec-blue);
  border-bottom-color: var(--ec-green);
}

/* Desktop: logo | nav | phone + CTA on one row. */
@media (min-width: 1060px) {
  .ec-lp-bar__inner { gap: 1.5rem; }
  .ec-lp-nav { margin-inline: auto; }
}

/* Below the one-row breakpoint the nav drops to its own row and WRAPS.
   It used to scroll horizontally, which cut the last item off mid-word and —
   worse — clipped the dropdown panel, since an overflow container cannot show
   an absolutely positioned child. Four top-level items wrap onto two lines at
   phone width and stay fully visible. */
@media (max-width: 1059.98px) {
  .ec-lp-bar__inner { flex-wrap: wrap; row-gap: .5rem; }
  .ec-lp-nav {
    order: 3;
    width: 100%;
    border-top: 1px solid var(--ec-gray-mid);
    padding-top: .4rem;
  }
  .ec-lp-nav__list {
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem 1.1rem;
  }
  .ec-lp-nav a,
  .ec-lp-nav__toggle { font-size: .875rem; }
}

/* The modal must clear the masthead, which is taller once the nav wraps. */
.ec-lp-modal-open .ec-lp-bar { z-index: 1; }

/* --------------------------------------------------------------------------
   12. Interior page hero
   --------------------------------------------------------------------------
   Shorter than the landing page hero — these pages are read, not converted
   on, and the form is waiting at the bottom.
   -------------------------------------------------------------------------- */
.ec-lp-phero {
  position: relative;
  isolation: isolate;
  background: var(--ec-blue-darker);
  color: var(--ec-white);
  overflow: hidden;
}
.ec-lp-phero__bg { position: absolute; inset: 0; z-index: -2; }
.ec-lp-phero__bg img { width: 100%; height: 100%; object-fit: cover; }
.ec-lp-phero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(0,58,116,.95) 0%, rgba(0,58,116,.84) 55%, rgba(0,58,116,.66) 100%),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 9px);
}
.ec-lp-phero__inner { padding-block: clamp(2.5rem, 1.75rem + 3.5vw, 4.5rem); }
.ec-lp-phero h1 {
  color: var(--ec-white);
  max-width: 20ch;
  text-wrap: balance;
  hyphens: none;
}
.ec-lp-phero__lede { color: rgba(255,255,255,.93); max-width: 56ch; }
.ec-lp-phero .ec-eyebrow { color: var(--ec-green); }

/* --------------------------------------------------------------------------
   13. Reviews band
   --------------------------------------------------------------------------
   The live Google slider, directly under the hero on every page. Deliberately
   tight: it is a trust signal on the way past, not a section to read. The
   slider itself brings its own type and spacing from Trustindex, so this only
   sets the band around it.
   -------------------------------------------------------------------------- */
.ec-lp-reviewband {
  background: var(--ec-white);
  border-bottom: 1px solid var(--ec-gray-mid);
  padding-block: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
}
.ec-lp-reviewband__title {
  margin: 0 0 1rem;
  text-align: center;
  font-family: var(--ec-font-head);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ec-gray);
}
/* Trustindex adds its own top margin inside the widget; the band supplies the
   spacing, so cancel it rather than ending up with double padding. */
.ec-lp-reviewband .ec-reviews-row { margin-top: 0; }

/* --------------------------------------------------------------------------
   14. Two-step form: choose, then fill
   --------------------------------------------------------------------------
   The DEFAULT state here is "stepped" — chooser visible, form hidden. That is
   the opposite of progressive enhancement's usual direction, and deliberate:
   the alternative is an inline script to add a class, which WP Rocket's
   delay-JS would hold until first interaction, so the whole form would render
   and then collapse under the visitor's thumb. The <noscript> block in
   wp_head reverts to a plain one-page form instead.
   -------------------------------------------------------------------------- */
.ec-lp-step--form { display: none; }
.ec-lp-steps.is-answered .ec-lp-step--choose { display: none; }
.ec-lp-steps.is-answered .ec-lp-step--form { display: block; }

/* The real select is the source of truth, but the cards ask the question, so
   hide it from sight while keeping it in the accessibility tree and the form
   submission. */
.ec-lp-card .gform_wrapper.gravity-theme .gfield--type-select:has(select[name="input_120"]),
.ec-lp-card .gform_wrapper.gravity-theme #field_1_120,
.ec-lp-card .gform_wrapper.gravity-theme #field_21_120 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ec-lp-step__q {
  margin: 0 0 .9rem;
  font-family: var(--ec-font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ec-ink);
}
.ec-lp-step__note {
  margin: 1rem 0 0;
  text-align: center;
  font-size: .8125rem;
  color: var(--ec-gray);
}

/* --- The option cards ----------------------------------------------------- */
.ec-lp-choices { display: grid; gap: .6rem; }

.ec-lp-choice {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .25rem 1rem;
  width: 100%;
  /* 56px+ so every option is a comfortable thumb target. */
  min-height: 60px;
  padding: .9rem 1.1rem;
  text-align: left;
  background: var(--ec-white);
  border: 1.5px solid #dfe3e8;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.ec-lp-choice:hover {
  border-color: var(--ec-green);
  box-shadow: 0 4px 14px rgba(35, 35, 35, .08);
  transform: translateY(-1px);
}
.ec-lp-choice:focus-visible {
  outline: none;
  border-color: var(--ec-green);
  box-shadow: 0 0 0 4px rgba(127, 190, 64, .22);
}
.ec-lp-choice:active { transform: translateY(0); }

.ec-lp-choice__label {
  font-family: var(--ec-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ec-ink);
}
.ec-lp-choice__hint {
  grid-column: 1;
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--ec-gray);
}
.ec-lp-choice__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 1.25rem;
  color: var(--ec-green);
  transition: transform 140ms ease;
}
.ec-lp-choice:hover .ec-lp-choice__arrow { transform: translateX(3px); }

/* --- The chosen chip on step 2 -------------------------------------------- */
.ec-lp-chosen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 0 1.1rem;
  padding: .6rem .75rem .6rem 1rem;
  background: var(--ec-gray-light);
  border-left: 4px solid var(--ec-green);
  border-radius: 8px;
}
.ec-lp-chosen__label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--ec-ink);
}
.ec-lp-chosen__change {
  flex: 0 0 auto;
  padding: .3rem .5rem;
  background: none;
  border: 0;
  font-family: var(--ec-font-body);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ec-blue);
  text-decoration: underline;
  cursor: pointer;
  border-radius: 6px;
}
.ec-lp-chosen__change:hover { color: var(--ec-blue-dark); }
.ec-lp-chosen__change:focus-visible {
  outline: 2px solid var(--ec-blue);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   15. Roofing systems
   -------------------------------------------------------------------------- */
.ec-lp-types {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 2.5rem;
}
.ec-lp-type {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.35rem;
  background: var(--ec-white);
  border: 1px solid var(--ec-gray-mid);
  border-top: 4px solid var(--ec-green);
  border-radius: var(--ec-radius);
  box-shadow: var(--ec-shadow);
}
.ec-lp-type h3 { font-size: 1.125rem; margin-bottom: .5em; }
.ec-lp-type p { font-size: .9375rem; color: var(--ec-gray); margin: 0; }
.ec-lp-type__best {
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--ec-font-head);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ec-blue);
}

/* The brand block is a link once the mini-site has more than one page. */
a.ec-lp-bar__brand { text-decoration: none; }
a.ec-lp-bar__brand:hover .ec-lp-bar__mhic { color: var(--ec-blue); }

/* --------------------------------------------------------------------------
   16. Mobile hero: shorter, with the CTA above the proof
   --------------------------------------------------------------------------
   On a phone the hero has to earn the tap before the fold. The full lede plus
   five proof points pushed the button off screen, so below 960px the hero
   runs: headline, short lede, button, three points, phone number.

   The button moves by flex `order` rather than by being duplicated in the
   markup — one button means one id, one analytics target and one thing to
   keep in sync.
   -------------------------------------------------------------------------- */

/* Default (desktop): long lede only. */
.ec-lp-hero__lede--short { display: none; }

@media (max-width: 959.98px) {
  .ec-lp-hero__copy { display: flex; flex-direction: column; }

  .ec-lp-hero__copy .ec-eyebrow     { order: 1; }
  .ec-lp-hero__copy h1              { order: 2; }
  .ec-lp-hero__lede--short          { order: 3; display: block; }
  .ec-lp-hero__cta                  { order: 4; margin-top: 1.5rem; }
  .ec-lp-points                     { order: 5; margin-top: 1.5rem; }
  .ec-lp-hero__call                 { order: 6; }

  .ec-lp-hero__lede--long { display: none; }

  /* Three points, not five. The copy is ordered strongest-first so this is a
     straight truncation rather than a judgement about which to drop. */
  .ec-lp-points li:nth-child(n + 4) { display: none; }

  /* Tighter rhythm now that the hero is doing less. */
  .ec-lp-hero h1 { margin-bottom: .35em; }
  .ec-lp-hero__inner { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
}

/* --------------------------------------------------------------------------
   17. Nav dropdown
   -------------------------------------------------------------------------- */
.ec-lp-nav__group {
  position: relative;
  /* The group is what :hover is tested against, so it must span the toggle
     AND the bridge. */
  display: inline-flex;
  align-items: center;
}

.ec-lp-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  /* Generous vertical padding: this is a hover target people have to travel
     to, and a thin strip of text is easy to slip off. The negative inline
     margin keeps the label optically aligned with its neighbours despite the
     extra horizontal padding. */
  padding: .85rem .6rem;
  margin-inline: -.6rem;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  font-family: var(--ec-font-head);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ec-ink);
  cursor: pointer;
  transition: color var(--ec-transition), border-color var(--ec-transition);
}
.ec-lp-nav__toggle:hover { color: var(--ec-blue); }
.ec-lp-nav__toggle.is-current {
  color: var(--ec-blue);
  border-bottom-color: var(--ec-green);
}
.ec-lp-nav__toggle:focus-visible {
  outline: 2px solid var(--ec-blue);
  outline-offset: 3px;
}

.ec-lp-nav__caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform var(--ec-transition);
}
.ec-lp-nav__group.is-open .ec-lp-nav__caret { transform: rotate(180deg); }

.ec-lp-nav__sub {
  display: none;
  position: absolute;
  /* Flush to the bottom of the toggle. The panel USED to sit at
     `calc(100% + .5rem)`, and that half-rem was a dead zone: moving the
     pointer from the button down to the panel left both elements, so
     :hover on the group went false and the menu shut before you reached it.
     The visual gap is now drawn by the ::before bridge below, which is
     transparent but still hoverable. */
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  min-width: 15rem;
  margin: 0;
  padding: .4rem;
  list-style: none;
  background: var(--ec-white);
  border: 1px solid var(--ec-gray-mid);
  border-top: 3px solid var(--ec-green);
  border-radius: 10px;
  box-shadow: var(--ec-shadow-lg);
}
.ec-lp-nav__sub { display: none; }
.ec-lp-nav__group.is-open .ec-lp-nav__sub { display: block; }

/* The hover bridge: an invisible band filling the space the panel is offset
   by, so the pointer never crosses unhoverable ground. */
.ec-lp-nav__sub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -.75rem;
  height: .75rem;
}
/* Push the visible card down by the same amount the bridge covers. */
.ec-lp-nav__sub { margin-top: .75rem; }

/* Roomier link targets inside the panel. */
.ec-lp-nav__sub a { padding: .75rem .85rem; }
/* Pointer users get it on hover too, but only where hover is real — on touch
   a hover rule fires on first tap and the menu opens then immediately
   navigates. */
@media (hover: hover) and (pointer: fine) and (min-width: 1060px) {
  .ec-lp-nav__group:hover .ec-lp-nav__sub,
  .ec-lp-nav__group:focus-within .ec-lp-nav__sub { display: block; }
}

.ec-lp-nav__sub li { display: block; }
.ec-lp-nav__sub a {
  display: block;
  padding: .6rem .75rem;
  border-bottom: 0;
  border-radius: 6px;
  white-space: nowrap;
  text-transform: none;
  font-size: .9375rem;
  letter-spacing: 0;
}
.ec-lp-nav__sub a:hover { background: var(--ec-gray-light); color: var(--ec-blue); }
.ec-lp-nav__sub a.is-current { background: var(--ec-gray-light); color: var(--ec-blue); }

/* On a phone the panel is full width under the bar rather than a floating
   card pinned to a wrapped item. */
@media (max-width: 1059.98px) {
  .ec-lp-nav__group { position: static; }
  .ec-lp-nav__sub {
    left: 0;
    right: 0;
    transform: none;
    min-width: 0;
    margin-top: .4rem;
  }
}

/* --------------------------------------------------------------------------
   18. Roofing systems as a scroller
   --------------------------------------------------------------------------
   Five systems in a grid wrapped to two uneven rows and buried the last two.
   A single horizontal track keeps them one list, reads as "there are more
   than fit", and on a phone it is the same gesture people already use.

   The track is focusable with a label so it is reachable and announced for
   keyboard and screen-reader users — a scroll region that only a mouse can
   reach is not a component, it is a trap.
   -------------------------------------------------------------------------- */
.ec-lp-types {
  display: flex;
  gap: 1rem;
  margin-top: 2.5rem;
  padding: .25rem .25rem 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--ec-gray-mid) transparent;
}
.ec-lp-types:focus-visible {
  outline: 3px solid var(--ec-green);
  outline-offset: 4px;
  border-radius: var(--ec-radius);
}
.ec-lp-types::-webkit-scrollbar { height: 8px; }
.ec-lp-types::-webkit-scrollbar-track { background: var(--ec-gray-mid); border-radius: 99px; }
.ec-lp-types::-webkit-scrollbar-thumb { background: var(--ec-blue); border-radius: 99px; }

.ec-lp-type {
  flex: 0 0 auto;
  /* Narrow enough that the next card always peeks, which is what tells
     people the row scrolls. */
  width: min(19rem, 78vw);
  scroll-snap-align: start;
}

/* The section the track sits in is width-constrained; let the track run to
   the edge of the viewport so cards scroll out of frame rather than stopping
   at an arbitrary gutter. */
.ec-lp-types-wrap { position: relative; }
@media (max-width: 1239.98px) {
  .ec-lp-types {
    margin-inline: calc(var(--ec-gutter) * -1);
    padding-inline: var(--ec-gutter);
  }
}

/* --------------------------------------------------------------------------
   19. Featured project collage
   --------------------------------------------------------------------------
   A composite of several finished roofs. Shown whole — the gallery below it
   crops to 4:3, which on a collage would cut through the houses it is made
   of.
   -------------------------------------------------------------------------- */
.ec-lp-feature {
  margin: 2.5rem auto 0;
  max-width: 34rem;
}
.ec-lp-feature img {
  width: 100%;
  height: auto;
  border-radius: var(--ec-radius);
  box-shadow: var(--ec-shadow-lg);
}