/* =============================================================================
   LANDING. Google Ads landing pages — conversion-focused hero with embedded
   quote form. Uses the standard site header/footer and reuses the
   .contact-modal__panel chrome for the hero form card. Visual language mirrors
   the main site: glass cards, accent-glow hovers, gradient dividers, ghost
   numerals and a subtle dark/darker section rhythm.
   ========================================================================== */

/* ----------------------------------------------------------------- Hero -- */
/* Pull the hero up under the fixed nav so the background image meets the
   top of the viewport — same trick used by .page-hero--area in core.css. */
.lp-hero {
  position: relative;
  background: var(--clr-bg-dark);
  margin-top: calc(-1 * (var(--nav-h) + var(--nav-offset) + 2rem));
  padding: calc(var(--nav-h) + var(--nav-offset) + 3rem) 0 clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}

.lp-hero__bg-picture,
.lp-hero__bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
}

.lp-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(13, 21, 32, 0.92) 0%, rgba(13, 21, 32, 0.78) 50%, rgba(13, 21, 32, 0.55) 100%),
    linear-gradient(to bottom, rgba(13, 21, 32, 0.30), rgba(13, 21, 32, 0.65));
  pointer-events: none;
}

.lp-hero__container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.lp-hero__copy {
  color: var(--clr-text);
}

.lp-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--clr-accent);
  margin-bottom: 1.25rem;
  padding: 0.4rem 0.9rem 0.4rem 0.75rem;
  border: 1px solid rgba(15, 187, 245, 0.3);
  border-radius: var(--radius-full);
  background: rgba(15, 187, 245, 0.08);
}

.lp-hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clr-accent);
  box-shadow: 0 0 12px var(--clr-accent-glow);
  animation: lp-pulse 2s ease-in-out infinite;
}

@keyframes lp-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.5; }
}

.lp-hero__heading {
  font-family: var(--font-display);
  color: var(--clr-text-bright);
  font-size: clamp(2.25rem, 1.5rem + 4vw, 4.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
  margin-bottom: 1.5rem;
}

.lp-hero__accent {
  color: var(--clr-accent);
  text-shadow:
    0 0 30px rgba(15, 187, 245, 0.35),
    0 0 60px rgba(15, 187, 245, 0.15),
    0 2px 20px rgba(0, 0, 0, 0.5);
}

.lp-hero__intro {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  color: var(--clr-text);
  line-height: 1.65;
  margin-bottom: 1.5rem;
  max-width: 56ch;
}

.lp-hero__points {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1.5rem;
  max-width: 600px;
}

.lp-hero__points li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--clr-text-bright);
  font-weight: 500;
  font-size: 0.95rem;
}

.lp-hero__points svg {
  color: var(--clr-accent);
  flex-shrink: 0;
}

.lp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.lp-hero__cta {
  font-size: 1rem;
  padding: 1rem 2rem;
}

.lp-hero__call {
  font-size: 1rem;
  padding: 1rem 1.75rem;
}

.lp-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--clr-text);
  font-size: 0.92rem;
  margin: 0;
}

.lp-hero__stars {
  display: inline-flex;
  gap: 2px;
  color: #fbbf24;
}

/* NFRC Competent Person trust badge — sits under the rating in the hero copy. */
.lp-hero__cps {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: 470px;
  margin: 1.35rem 0 0;
  padding: 0.75rem 1rem;
  background: rgba(15, 187, 245, 0.08);
  border: 1px solid rgba(15, 187, 245, 0.25);
  border-radius: var(--radius-md);
}

.lp-hero__cps-logo {
  width: 42px;
  height: auto;
  flex-shrink: 0;
  border-radius: 6px;
}

.lp-hero__cps-text {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--clr-text);
}

.lp-hero__cps-text strong {
  color: var(--clr-text-bright);
}

/* ----------------------------------------------------------------- Form card -- */
/* The form card stacks .contact-modal__panel (for chrome) with .lp-hero__form-card
   here, which overrides the modal's animation defaults so the static inline panel
   sits visible and at full-width inside the hero column. */
.lp-hero__form-card.contact-modal__panel {
  max-width: none;
  max-height: none;
  overflow-y: visible;
  opacity: 1;
  transform: none;
  transition: none;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border-top: 3px solid var(--clr-accent);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(15, 187, 245, 0.15);
}

/* Landing quote form helpers (contact-form-landing.php only). These class names
   appear nowhere else, so the rules are scoped to this page by their selectors. */
.lp-hero__form-card .contact-modal__optional {
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--clr-text-muted);
}

.lp-hero__form-card .contact-modal__hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--clr-accent);
}

.lp-hero__form-card .contact-modal__assurances {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
}

.lp-hero__form-card .contact-modal__assurances li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--clr-text);
}

.lp-hero__form-card .contact-modal__assurances svg {
  color: var(--clr-accent);
  flex-shrink: 0;
}

/* The shared .contact-modal__notice is built for a single short line (centred
   flex). This privacy line wraps to 2-3 lines, so pin the icon to the top of
   the first line and read the text as a tidy left-aligned block instead of
   ragged centred lines. */
.lp-hero__form-card .contact-modal__notice {
  align-items: flex-start;
  gap: 0.45rem;
  text-align: left;
  line-height: 1.45;
}

.lp-hero__form-card .contact-modal__notice svg {
  flex-shrink: 0;
  margin-top: 0.15rem;
}

/* ----------------------------------------------------------------- Trust strip -- */
.lp-trust {
  position: relative;
  background: linear-gradient(180deg, #1a2436 0%, #15202f 100%);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  padding: 1.5rem 0;
}

/* Accent hairline along the top edge to tie the strip to the brand colour. */
.lp-trust::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--clr-accent), transparent);
  opacity: 0.6;
}

.lp-trust__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.lp-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--clr-text);
  font-size: 0.92rem;
  line-height: 1.3;
}

.lp-trust__item svg {
  width: 36px;
  height: 36px;
  padding: 7px;
  border-radius: 50%;
  background: rgba(15, 187, 245, 0.12);
  color: var(--clr-accent);
  flex-shrink: 0;
}

.lp-trust__item strong {
  color: var(--clr-text-bright);
}

/* ----------------------------------------------------------------- Building Regs / NFRC callout -- */
.lp-regs {
  background: var(--clr-bg);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.lp-regs__card {
  display: grid;
  grid-template-columns: minmax(0, 240px) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  background:
    linear-gradient(135deg, rgba(15, 187, 245, 0.12) 0%, transparent 55%),
    var(--clr-bg-surface-solid);
  border: 1px solid rgba(15, 187, 245, 0.3);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.lp-regs__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  text-align: center;
}

.lp-regs__logo {
  width: clamp(110px, 16vw, 150px);
  height: auto;
}

.lp-regs__badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clr-accent);
  border: 1px solid rgba(15, 187, 245, 0.3);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.85rem;
}

.lp-regs__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--clr-accent);
  margin-bottom: 0.6rem;
}

.lp-regs__heading {
  font-family: var(--font-display);
  color: var(--clr-text-bright);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.15;
  margin: 0 0 1rem;
}

.lp-regs__text {
  color: var(--clr-text);
  font-size: clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem);
  line-height: 1.65;
  margin: 0 0 0.85rem;
}

.lp-regs__link {
  color: var(--clr-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lp-regs__link:hover {
  color: var(--clr-accent-hover);
}

.lp-regs__list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1.5rem;
}

.lp-regs__list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--clr-text-bright);
  font-weight: 500;
  font-size: 0.92rem;
}

.lp-regs__list svg {
  color: var(--clr-accent);
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .lp-regs__card {
    grid-template-columns: 1fr;
  }

  .lp-regs__media {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }

  .lp-regs__list {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------- Generic section -- */
.lp-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}

/* Centred eyebrow with short gradient rules flanking it — the site's standard
   "premium label" treatment. */
.lp-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--clr-accent);
  margin-bottom: 0.85rem;
}

.lp-section-eyebrow::before,
.lp-section-eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--clr-accent);
  opacity: 0.55;
}

.lp-section-heading {
  font-family: var(--font-display);
  color: var(--clr-text-bright);
  font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.1;
  margin: 0 0 1rem;
}

.lp-section-lead {
  color: var(--clr-text);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1rem);
  line-height: 1.7;
  margin: 0;
}

.lp-section-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(2rem, 3.5vw, 3rem);
}

/* Section CTA that carries a short reassurance line above its buttons. */
.lp-section-cta--with-note {
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.lp-section-cta__note {
  margin: 0;
  max-width: 48ch;
  color: var(--clr-text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.lp-section-cta__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* ----------------------------------------------------------------- CTA band -- */
/* Distinct full-width conversion band dropped in at the social-proof peak
   (after the reviews), styled apart from the inline .lp-section-cta strips. */
.lp-cta-band {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(15, 187, 245, 0.16), transparent 65%),
    linear-gradient(180deg, #1a2436 0%, #15202f 100%);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
}

.lp-cta-band::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--clr-accent), transparent);
  opacity: 0.6;
}

.lp-cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
  text-align: center;
}

.lp-cta-band__text {
  margin: 0;
  max-width: 40ch;
  color: var(--clr-text);
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
  line-height: 1.55;
}

.lp-cta-band__text strong {
  color: var(--clr-text-bright);
}

.lp-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* Shared card chrome — accent border + glow ring + lift on hover, the site's
   signature interactive treatment (see .svc-card / .sp-feature in core/home). */
.lp-why__card,
.lp-systems__card,
.lp-process__step,
.lp-projects__card,
.lp-reviews__card {
  transition:
    transform var(--ease-smooth),
    border-color var(--ease),
    box-shadow var(--ease);
}

.lp-why__card:hover,
.lp-systems__card:hover,
.lp-process__step:hover,
.lp-projects__card:hover,
.lp-reviews__card:hover {
  transform: translateY(-3px);
  border-color: var(--clr-accent);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--clr-accent);
}

/* ----------------------------------------------------------------- Why grid -- */
.lp-why {
  position: relative;
  isolation: isolate;
  background: var(--clr-bg);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

/* Faint diagonal grid wash — the same geometric flourish used on the home
   intro section, masked so it fades out toward the edges. */
.lp-why::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(135deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px),
    linear-gradient(225deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
  pointer-events: none;
}

.lp-why > .container {
  position: relative;
  z-index: 1;
}

.lp-why__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

/* Full rows fill edge-to-edge (max-width sits above the natural card width);
   an incomplete final row centres at normal width instead of stretching. */
.lp-why__grid > * {
  flex: 1 1 280px;
  max-width: 400px;
}

.lp-why__card {
  position: relative;
  overflow: hidden;
  background: var(--clr-bg-surface-solid);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem;
}

/* Accent bar that wipes in across the card top on hover. */
.lp-why__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-accent), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ease-smooth);
}

.lp-why__card:hover::before {
  transform: scaleX(1);
}

.lp-why__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(15, 187, 245, 0.12);
  border: 1px solid rgba(15, 187, 245, 0.25);
  color: var(--clr-accent);
  margin-bottom: 1.1rem;
}

.lp-why__heading {
  color: var(--clr-text-bright);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.lp-why__card p {
  color: var(--clr-text);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* ----------------------------------------------------------------- Pricing -- */
.lp-pricing {
  position: relative;
  isolation: isolate;
  background: var(--clr-bg-dark);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.lp-pricing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(15, 187, 245, 0.10), transparent 55%);
  pointer-events: none;
}

.lp-pricing > .container {
  position: relative;
  z-index: 1;
}

.lp-pricing__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-bg-surface-solid);
  margin-bottom: 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.lp-pricing__table {
  width: 100%;
  border-collapse: collapse;
  min-width: 540px;
}

.lp-pricing__table caption.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lp-pricing__table th,
.lp-pricing__table td {
  padding: 0.9rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--clr-border);
}

.lp-pricing__table thead th {
  background: rgba(15, 187, 245, 0.06);
  color: var(--clr-accent);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}

.lp-pricing__table tbody th {
  color: var(--clr-text-bright);
  font-weight: 600;
  font-size: 0.95rem;
}

.lp-pricing__table tbody td {
  color: var(--clr-text);
  font-size: 0.95rem;
}

.lp-pricing__table tbody tr:last-child th,
.lp-pricing__table tbody tr:last-child td {
  border-bottom: 0;
}

.lp-pricing__table tbody tr:hover {
  background: rgba(15, 187, 245, 0.04);
}

/* Highlighted "best value" row. */
.lp-pricing__row--popular {
  background: rgba(15, 187, 245, 0.07);
}

.lp-pricing__table tbody tr.lp-pricing__row--popular:hover {
  background: rgba(15, 187, 245, 0.11);
}

.lp-pricing__row--popular th[scope="row"] {
  box-shadow: inset 3px 0 0 var(--clr-accent);
}

.lp-pricing__tag {
  display: inline-block;
  margin-left: 0.55rem;
  vertical-align: middle;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clr-bg-dark);
  background: var(--clr-accent);
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-full);
}

.lp-pricing__note {
  color: var(--clr-text-muted);
  font-size: 0.9rem;
  text-align: center;
  margin: 1.25rem auto 0;
  max-width: 560px;
}

/* ----------------------------------------------------------------- Systems -- */
.lp-systems {
  background: var(--clr-bg);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.lp-systems__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

.lp-systems__grid > * {
  flex: 1 1 260px;
  max-width: 380px;
}

.lp-systems__card {
  background: var(--clr-bg-surface-solid);
  border: 1px solid var(--clr-border);
  border-left: 3px solid var(--clr-accent);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}

.lp-systems__heading {
  color: var(--clr-text-bright);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  line-height: 1.3;
}

.lp-systems__life {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clr-accent);
  margin: 0 0 0.75rem;
}

.lp-systems__card p {
  color: var(--clr-text);
  font-size: 0.93rem;
  line-height: 1.6;
  margin: 0;
}

/* ----------------------------------------------------------------- Projects showcase -- */
.lp-projects {
  background: var(--clr-bg-dark);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.lp-projects__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.lp-projects__grid > * {
  flex: 1 1 280px;
  max-width: 420px;
}

.lp-projects__card {
  display: flex;
  flex-direction: column;
  background: var(--clr-bg-surface-solid);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.lp-projects__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.lp-projects__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--ease-smooth);
}

.lp-projects__card:hover .lp-projects__img {
  transform: scale(1.05);
}

.lp-projects__tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clr-accent);
  background: rgba(13, 21, 32, 0.72);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
}

.lp-projects__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.lp-projects__title {
  color: var(--clr-text-bright);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.lp-projects__meta {
  color: var(--clr-accent);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

.lp-projects__desc {
  color: var(--clr-text);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0.3rem 0 0;
}

/* ----------------------------------------------------------------- Process -- */
.lp-process {
  background: var(--clr-bg-dark);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.lp-process__steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.lp-process__steps > * {
  flex: 1 1 220px;
  max-width: 320px;
}

.lp-process__step {
  position: relative;
  overflow: hidden;
  background: var(--clr-bg-surface-solid);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem;
}

/* Oversized ghost numeral watermarked into the corner — the site's
   .issue-card__number treatment. */
.lp-process__num {
  position: absolute;
  top: 0.35rem;
  right: 1rem;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: rgba(15, 187, 245, 0.12);
  letter-spacing: 1px;
  margin: 0;
  pointer-events: none;
  user-select: none;
}

.lp-process__heading {
  position: relative;
  color: var(--clr-text-bright);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  padding-right: 2.5rem;
  line-height: 1.3;
}

.lp-process__step p {
  color: var(--clr-text);
  font-size: 0.93rem;
  line-height: 1.6;
  margin: 0;
}

/* ----------------------------------------------------------------- Reviews -- */
.lp-reviews {
  background: var(--clr-bg);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.lp-reviews__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

.lp-reviews__grid > * {
  flex: 1 1 280px;
  max-width: 440px;
}

.lp-reviews__card {
  position: relative;
  overflow: hidden;
  background: var(--clr-bg-surface-solid);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Decorative closing quote glyph behind the testimonial. */
.lp-reviews__card::before {
  content: "\201D";
  position: absolute;
  top: -0.35rem;
  right: 0.9rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5rem;
  line-height: 1;
  color: rgba(15, 187, 245, 0.12);
  pointer-events: none;
}

.lp-reviews__stars {
  display: inline-flex;
  gap: 2px;
  color: #fbbf24;
}

.lp-reviews__quote {
  color: var(--clr-text);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
  font-style: italic;
  flex: 1;
}

.lp-reviews__by {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  border-top: 1px solid var(--clr-border);
  padding-top: 0.75rem;
}

.lp-reviews__by strong {
  color: var(--clr-text-bright);
  font-size: 0.95rem;
}

.lp-reviews__by span {
  color: var(--clr-text-muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ----------------------------------------------------------------- FAQ -- */
.lp-faq {
  background: var(--clr-bg);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.lp-faq__list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lp-faq__item {
  background: var(--clr-bg-surface-solid);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--ease), box-shadow var(--ease);
}

.lp-faq__item:hover {
  border-color: var(--clr-border-bright);
}

.lp-faq__item[open] {
  border-color: rgba(15, 187, 245, 0.4);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}

.lp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 1.25rem;
  color: var(--clr-text-bright);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
}

.lp-faq__q::-webkit-details-marker {
  display: none;
}

.lp-faq__chevron {
  flex-shrink: 0;
  color: var(--clr-accent);
  transition: transform var(--ease);
}

.lp-faq__item[open] .lp-faq__chevron {
  transform: rotate(180deg);
}

.lp-faq__a {
  padding: 0 1.25rem 1.25rem;
}

.lp-faq__item[open] .lp-faq__a {
  animation: lp-faq-reveal 0.25s ease;
}

@keyframes lp-faq-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lp-faq__a p {
  color: var(--clr-text);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
}

/* ----------------------------------------------------------------- Inline links + notes -- */
.lp-inline-link {
  color: var(--clr-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--ease);
}

.lp-inline-link:hover {
  color: var(--clr-accent-hover);
}

.lp-systems__note {
  margin: 1.75rem auto 0;
  max-width: 640px;
  text-align: center;
  color: var(--clr-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ----------------------------------------------------------------- Related services -- */
.lp-related {
  background: var(--clr-bg-dark);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.lp-related__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

.lp-related__grid > * {
  flex: 1 1 230px;
  max-width: 340px;
}

.lp-related__card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: var(--clr-bg-surface-solid);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  color: var(--clr-text);
  transition: transform var(--ease-smooth), border-color var(--ease), box-shadow var(--ease);
}

.lp-related__card:hover {
  transform: translateY(-3px);
  border-color: var(--clr-accent);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--clr-accent);
}

.lp-related__title {
  color: var(--clr-text-bright);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  transition: color var(--ease);
}

.lp-related__card:hover .lp-related__title {
  color: var(--clr-accent);
}

.lp-related__blurb {
  color: var(--clr-text);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

.lp-related__more {
  margin-top: auto;
  padding-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--clr-accent);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lp-related__more svg {
  transition: transform var(--ease);
}

.lp-related__card:hover .lp-related__more svg {
  transform: translateX(3px);
}

/* ----------------------------------------------------------------- Final CTA -- */
.lp-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at center top, rgba(15, 187, 245, 0.18), transparent 60%),
    var(--clr-bg-dark);
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--clr-accent), transparent) 1;
  padding: clamp(3rem, 6vw, 5rem) 0;
  text-align: center;
}

.lp-final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at center top, #000 10%, transparent 60%);
          mask-image: radial-gradient(ellipse at center top, #000 10%, transparent 60%);
  pointer-events: none;
}

.lp-final__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.lp-final__heading {
  font-family: var(--font-display);
  color: var(--clr-text-bright);
  font-size: clamp(1.75rem, 1.4rem + 2vw, 3rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 1rem;
}

.lp-final__sub {
  color: var(--clr-text);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.65;
  margin: 0 0 2rem;
}

.lp-final__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.btn--xl {
  font-size: 1.05rem;
  padding: 1.1rem 2.25rem;
  min-height: 56px;
}

.lp-final__hours {
  color: var(--clr-text-muted);
  font-size: 0.9rem;
  margin: 0;
}

/* ----------------------------------------------------------------- Responsive -- */
@media (max-width: 960px) {
  .lp-hero__container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .lp-hero__form-card.contact-modal__panel {
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
  }

  .lp-hero__points {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .lp-hero__actions .btn,
  .lp-final__actions .btn,
  .lp-section-cta .btn,
  .lp-section-cta__btns .btn,
  .lp-cta-band__actions .btn {
    width: 100%;
  }

  /* Stack the trust signals into a tidy single-column list so they no longer
     wrap raggedly across uneven rows on narrow screens. */
  .lp-trust__list {
    flex-direction: column;
    gap: 0;
    max-width: 22rem;
    margin-inline: auto;
  }

  .lp-trust__item {
    width: 100%;
    font-size: 0.9rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--clr-border);
  }

  .lp-trust__item:first-child {
    padding-top: 0;
  }

  .lp-trust__item:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }

  .lp-faq__q {
    font-size: 0.95rem;
  }
}

/* ----------------------------------------------------------------- Reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .lp-hero__dot {
    animation: none;
  }

  .lp-why__card,
  .lp-systems__card,
  .lp-process__step,
  .lp-projects__card,
  .lp-reviews__card,
  .lp-related__card {
    transition: border-color var(--ease), box-shadow var(--ease);
  }

  .lp-why__card:hover,
  .lp-systems__card:hover,
  .lp-process__step:hover,
  .lp-projects__card:hover,
  .lp-reviews__card:hover,
  .lp-related__card:hover {
    transform: none;
  }

  .lp-related__card:hover .lp-related__more svg {
    transform: none;
  }

  .lp-why__card::before,
  .lp-projects__card:hover .lp-projects__img {
    transition: none;
    transform: none;
  }

  .lp-faq__item[open] .lp-faq__a {
    animation: none;
  }
}

/* =============================================================================
   MOBILE / TABLET FORM TAKEOVER (<=960px)
   -----------------------------------------------------------------------------
   On a CTA tap the hero quote form "pops" out of the page to fill the viewport,
   the nav fades out and the page dims behind it, so paid mobile traffic gets a
   single, distraction-free, full-screen form. Desktop (>960px) is untouched:
   the form stays inline in the hero and CTAs smooth-scroll to it (new-roofs.php).

   IMPORTANT: the form NODE never moves in the DOM and its id/name attributes are
   never changed. This is presentation only (a class toggle + transforms), so the
   GA4 `generate_lead` and Google Ads conversion handlers bound to #lpqForm keep
   firing exactly as before. Nothing here touches the tracking layer.
   ========================================================================== */

/* Chrome that exists only for the takeover — inert until the overlay is active
   and never shown on desktop. */
.lpq-backdrop,
.lpq-close,
.lpq-sheen {
  display: none;
}

@media (max-width: 960px) {

  /* Lock the page behind the overlay. position:fixed (not overflow:hidden) is
     the only reliable scroll lock on iOS Safari; JS stores/restores scrollY via
     an inline `top` offset. */
  body.lpq-form-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
  }

  /* Lift the whole hero (and therefore the fixed form card inside it) above the
     fixed nav, the speed dial and every later section, so nothing bleeds over
     the form when the takeover is opened from a CTA deep down the page. */
  body.lpq-form-open .lp-hero {
    z-index: 1000;
  }

  /* Fade the floating nav clean out for maximum room. */
  .main-nav {
    transition: opacity 0.3s ease;
  }

  body.lpq-form-open .main-nav {
    opacity: 0;
    pointer-events: none;
  }

  /* Dim, slightly-blurred backdrop. Sits above the page but below the card. */
  body.lpq-form-open .lpq-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(8, 13, 20, 0.72);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
    animation: lpq-fade 0.28s ease both;
  }

  /* The form card itself becomes the full-screen surface. */
  body.lpq-form-open .lp-hero__form-card.contact-modal__panel {
    position: fixed;
    inset: 0;
    z-index: 50;
    max-width: none;
    width: 100%;
    margin: 0;
    border-radius: 0;
    border-top: 3px solid var(--clr-accent);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: calc(env(safe-area-inset-top, 0px) + 3.5rem)
             clamp(1.25rem, 5vw, 2rem)
             calc(env(safe-area-inset-bottom, 0px) + 2rem);
    box-shadow:
      0 0 0 1px rgba(15, 187, 245, 0.25),
      0 0 60px rgba(15, 187, 245, 0.18);
    animation: lpq-pop 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* Accent bar wiped across the very top of the card on open — the same brand
     treatment as the .lp-why ("Replace Once") cards. */
  body.lpq-form-open .lp-hero__form-card.contact-modal__panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2;
    background: linear-gradient(90deg, var(--clr-accent), transparent);
    transform-origin: left;
    animation: lpq-bar 0.5s ease both;
  }

  /* One-shot cyan sheen sweeping diagonally across the card as it pops in. */
  body.lpq-form-open .lpq-sheen {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
  }

  body.lpq-form-open .lpq-sheen::before {
    content: "";
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: -60%;
    width: 50%;
    background: linear-gradient(
      100deg,
      transparent 0%,
      rgba(15, 187, 245, 0) 20%,
      rgba(15, 187, 245, 0.40) 48%,
      rgba(255, 255, 255, 0.30) 50%,
      rgba(15, 187, 245, 0.40) 52%,
      transparent 80%);
    transform: skewX(-18deg);
    animation: lpq-sheen 0.85s ease 0.1s both;
  }

  /* Close (x) button, pinned top-right inside the full-screen card. */
  body.lpq-form-open .lpq-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
    right: 0.75rem;
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--clr-text-bright);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--clr-border);
    transition: background var(--ease), border-color var(--ease), transform var(--ease);
  }

  body.lpq-form-open .lpq-close:hover,
  body.lpq-form-open .lpq-close:focus-visible {
    background: rgba(15, 187, 245, 0.14);
    border-color: var(--clr-accent);
  }

  body.lpq-form-open .lpq-close:active {
    transform: scale(0.92);
  }

  /* Keep the form heading clear of the close button. */
  body.lpq-form-open .lp-hero__form-card .contact-modal__header {
    padding-right: 2.75rem;
  }
}

@keyframes lpq-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes lpq-pop {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes lpq-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes lpq-sheen {
  0%   { left: -60%; opacity: 0; }
  15%  { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

/* Honour reduced-motion: keep the takeover, drop the flourish. */
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  body.lpq-form-open .lp-hero__form-card.contact-modal__panel,
  body.lpq-form-open .lpq-backdrop {
    animation: none;
  }

  body.lpq-form-open .lpq-sheen,
  body.lpq-form-open .lp-hero__form-card.contact-modal__panel::before {
    display: none;
  }
}