/* ===========================================================================
   KW ELECTRICAL, landing page styles
   ---------------------------------------------------------------------------
   Sits on top of styles.css and reuses its tokens. Nothing here is campaign
   specific, so every landing page loads this same file.

   Structure follows the Profitable Tradie framework Kyle worked through:
     1  match the intent      hero speaks to the thought they arrived with
     2  call out the problem  headline names the problem, not the service
     3  stretch the gap       what it costs to keep ignoring it
     4  make it easy          one action, repeated, never buried
     5  build trust           proof close to every ask
   ========================================================================= */

/* ---- page shell ---- */
.lp { background: var(--bg); color: var(--text); }

/* Landing pages carry no navigation. Every exit is a conversion or the back
   button, which is the whole point of sending paid traffic here. */
.lp-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--orange);
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}
.lp-header__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); padding-block: 0.6rem;
}
.lp-header__logo { display: inline-block; line-height: 0; border-radius: 4px; }
.lp-header__logo img { height: 34px; width: auto; display: block; transition: opacity var(--dur, .25s) var(--ease, ease); }
.lp-header__logo:hover img, .lp-header__logo:focus-visible img { opacity: .78; }
@media (min-width: 700px) { .lp-header__logo img { height: 42px; } }
/* Orange on orange has no contrast, so the header CTA goes navy. Matches
   .site-header on the main site. */
.lp-header .btn--call { background: #05131f; color: #ffffff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); }
.lp-header .btn--call:hover { background: #0b2438; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); }
.lp-header :where(a, button):focus-visible { outline-color: #05131f; }

/* ---- hero ---- */
.lp-hero { position: relative; overflow: hidden; padding-block: var(--space-5); }
.lp-hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background-color: var(--bg);
  background-image:
    linear-gradient(180deg, rgba(2,18,31,.90) 0%, rgba(2,18,31,.82) 55%, var(--bg) 100%),
    var(--lp-hero-img, none);
  background-size: cover, cover;
  background-position: center, center 35%;
  background-repeat: no-repeat;
}
@media (min-width: 900px) {
  .lp-hero__bg {
    background-image:
      linear-gradient(90deg, rgba(2,18,31,.93) 0%, rgba(2,18,31,.88) 46%, rgba(2,18,31,.55) 72%, rgba(2,18,31,.45) 100%),
      linear-gradient(180deg, rgba(2,18,31,.35) 0%, rgba(2,18,31,.30) 60%, var(--bg) 100%),
      var(--lp-hero-img, none);
    background-size: cover, cover, cover;
  }
}
.lp-hero__grid { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 900px) { .lp-hero__grid { align-items: stretch; } }
@media (min-width: 900px) {
  .lp-hero__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-4); }
}
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--orange);
  margin: 0 0 var(--space-2);
}
.lp-eyebrow::before {
  content: ""; width: 26px; height: 3px; background: var(--orange); border-radius: 2px;
}
.lp-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.04;
  margin: 0 0 var(--space-2); text-wrap: balance;
}
.lp-hero h1 em { font-style: normal; color: var(--orange); }
.lp-hero__lead { font-size: var(--fs-lg); color: var(--text); max-width: 46ch; margin: 0; }

/* ---- the CTA card, repeated down the page ---- */
@media (min-width: 900px) {
  .lp-hero .lp-cta { display: flex; flex-direction: column; justify-content: center; }
}
.lp-cta {
  background: var(--panel);
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  padding: var(--space-3);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.65);
}
.lp-cta h2, .lp-cta h3 {
  font-family: var(--font-display); font-size: 1.35rem; line-height: 1.15;
  margin: 0 0 .4rem;
}
.lp-cta p { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 var(--space-2); }
.lp-cta .btn { width: 100%; }
.lp-cta__or {
  display: flex; align-items: center; gap: .75rem;
  color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .1em;
}
/* The divider is a <p>, so the blanket `.lp-cta p` rule below was overriding
   its margin to 0 top / 16px bottom and welding it to the call button.
   Kyle spotted it 2 Sep. Class needs the extra specificity to win.
   THIRD time this file has been bitten by `.lp-cta p`: the offer flag and the
   review stars both needed the same treatment. Anything new inside .lp-cta
   that is a <p> needs `.lp-cta .thing`, not `.thing`. */
.lp-cta .lp-cta__or {
  margin: 1.5rem 0;
}
.lp-cta__or::before, .lp-cta__or::after {
  content: ""; flex: 1; height: 1px; background: var(--line-dark);
}

/* ---- trust strip ---- */
.lp-trust {
  background: var(--bg-deep);
  border-block: 1px solid var(--line-dark);
  padding-block: var(--space-4);
}
.lp-trust__grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-items: start;
}
.lp-trust__item { display: flex; gap: .75rem; align-items: flex-start; }
.lp-trust__item svg { flex: 0 0 auto; width: 24px; height: 24px; color: var(--orange); margin-top: 2px; }
.lp-trust__item strong { display: block; font-size: var(--fs-sm); }
.lp-trust__item span { display: block; font-size: var(--fs-xs); color: var(--muted); }

/* ---- generic light section ---- */
.lp-section { padding-block: var(--space-5); }
.lp-section--light { background: var(--white); color: var(--ink); }
.lp-section--tint { background: var(--tint); color: var(--ink); }
.lp-section h2 {
  font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.1;
  margin: 0 0 .75rem; text-wrap: balance;
}
.lp-section--light h2 em, .lp-section--tint h2 em { font-style: normal; color: var(--orange-ink); }
.lp-lede { font-size: var(--fs-lg); max-width: 62ch; margin: 0; }
.lp-section--light .lp-lede, .lp-section--tint .lp-lede { color: var(--ink-soft); }

/* ---- the gap: what happens if it is ignored ---- */
.lp-gap { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
@media (min-width: 760px) { .lp-gap { grid-template-columns: repeat(3, 1fr); } }
.lp-gap__card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; padding: var(--space-3);
  border-top: 3px solid var(--orange);
}
.lp-section--light .lp-gap__card { background: var(--tint); }
.lp-gap__card h3 { font-size: 1.05rem; margin: 0 0 .35rem; color: var(--ink); }
.lp-gap__card p { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }

/* ---- checklist ---- */
.lp-checks { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: .9rem; }
@media (min-width: 700px) { .lp-checks { grid-template-columns: 1fr 1fr; gap: .75rem var(--space-4); } }
.lp-checks li { display: flex; gap: .65rem; align-items: flex-start; font-size: var(--fs-base); }
.lp-checks svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; color: var(--orange-ink); }
.lp-section:not(.lp-section--light):not(.lp-section--tint) .lp-checks svg { color: var(--orange); }

/* ---- proof / reviews ---- */
.lp-quotes { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
@media (min-width: 760px) { .lp-quotes { grid-template-columns: repeat(3, 1fr); } }
.lp-quote {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px); padding: var(--space-3);
  box-shadow: 0 6px 24px rgba(3, 37, 64, 0.08);
  transition: transform var(--dur, .25s) var(--ease, ease),
              box-shadow var(--dur, .25s) var(--ease, ease),
              border-color var(--dur, .25s) var(--ease, ease);
}
.lp-quote:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 102, 0, 0.4);
  box-shadow: 0 14px 34px rgba(3, 37, 64, 0.14);
}
@media (prefers-reduced-motion: reduce) { .lp-quote:hover { transform: none; } }
.lp-quote .lp-quote__stars { color: var(--orange); letter-spacing: 3px; font-size: 1.05rem; margin: 0 0 .6rem; }
.lp-quote p { margin: 0 0 .6rem; font-size: var(--fs-sm); color: var(--ink); }
.lp-quote cite { display: block; font-style: normal; font-size: var(--fs-xs); color: var(--ink-soft); }
.lp-quote cite b { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--navy); }

/* ---- FAQ ---- */
.lp-faq { margin-top: var(--space-4); border-top: 1px solid var(--line); }
.lp-faq details { border-bottom: 1px solid var(--line); }
.lp-faq summary {
  cursor: pointer; list-style: none; padding: var(--space-3) 2.5rem var(--space-3) 0;
  font-weight: 600; position: relative; font-size: var(--fs-base);
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%;
  width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--orange-ink); border-bottom: 2px solid var(--orange-ink);
  transform: rotate(45deg); transition: transform var(--dur, .25s) ease;
}
.lp-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.lp-faq details > div { padding: 0 0 var(--space-3); color: var(--ink-soft); font-size: var(--fs-sm); max-width: 68ch; }

/* ---- closing CTA ---- */
/* Header is sticky, so the #enquire jump needs room or the card lands under it. */
.lp-close { background: var(--bg-deep); padding-block: var(--space-5); }
.lp-close .lp-cta { scroll-margin-top: calc(var(--header-h, 64px) + 16px); }
.lp-close__grid { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .lp-close__grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; } }

/* ---- footer ---- */
.lp-footer { background: var(--bg-deep); border-top: 1px solid var(--line-dark); padding-block: var(--space-4); }
.lp-footer p { margin: 0; font-size: var(--fs-xs); line-height: 1.9; color: var(--muted); text-align: center; }
.lp-footer a { color: var(--muted); text-underline-offset: 3px; }

/* ---- sticky mobile call bar ---- */
.lp-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; gap: .5rem; padding: .6rem;
  background: rgba(2, 18, 31, .96);
  border-top: 1px solid var(--line-dark);
  backdrop-filter: blur(8px);
}
.lp-bar .btn { flex: 1; min-height: 50px; font-size: .9rem; padding-inline: .75rem; }
.lp-bar .btn--ghost { flex: 0 1 auto; white-space: nowrap; }
/* Only once the hero is off screen, and never on desktop. JS adds is-visible. */
@media (max-width: 699px) { .lp-bar.is-visible { display: flex; } }
@media (max-width: 699px) { .lp-footer { padding-bottom: 4.75rem; } }

@media (prefers-reduced-motion: reduce) { .lp-faq summary::after { transition: none; } }

/* ---- licence badge under the trust strip ---- */
.lp-trust__badge {
  grid-column: 1 / -1;
  display: flex; justify-content: center;
  margin-top: 0; padding-top: var(--space-3);
  border-top: 1px solid var(--line-dark);
}
/* Accreditation artwork sits on white and is never recoloured. */
.lp-trust__badge img {
  width: 190px; height: auto; display: block;
  background: var(--white); border-radius: var(--radius-lg, 12px);
  padding: .6rem 1rem;
}

/* ---- product feature cards on a dark section ---- */
.lp-section--dark { background: var(--bg-deep); padding-block: var(--space-5); }
.lp-section--dark .lp-gap__card {
  background: var(--panel, rgba(255,255,255,.04));
  border: 1px solid var(--line-dark);
}
.lp-section--dark .lp-gap__card h3 { color: var(--white); }
.lp-section--dark .lp-gap__card p { color: var(--muted); }
.lp-section--dark .lp-lede { color: var(--muted); }

/* ---- free-check flag on the CTA cards ---- */
.lp-cta .lp-cta__flag {
  display: inline-block; margin: 0 0 var(--space-2);
  background: var(--orange); color: #12202c;
  font-family: var(--font-display); font-size: var(--fs-xs);
  letter-spacing: .04em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 4px;
}

/* Form sits on the dark CTA card, so the shared navy labels need lifting. */
.lp-cta .form-field label { color: var(--white); }
.lp-cta .form-status { color: var(--muted); }

/* ---- price line on the CTA cards ---- */
.lp-cta .lp-price {
  margin: 0 0 var(--space-2);
  padding: .7rem .85rem;
  background: rgba(245, 102, 0, .12);
  border: 1px solid rgba(245, 102, 0, .45);
  border-radius: 10px;
  color: var(--white);
  font-size: var(--fs-sm);
}
.lp-price strong {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--orange);
  line-height: 1;
  margin-right: .3rem;
}
.lp-price span { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: .3rem; }


/* ---- numbered "what happens next" list in the closing block ---- */
.lp-steps {
  list-style: none; counter-reset: step;
  margin: var(--space-4) 0 0; padding: 0;
  display: grid; gap: var(--space-2);
  max-width: 46ch;
}
.lp-steps li {
  counter-increment: step;
  position: relative; padding-left: 2.75rem;
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.55;
}
.lp-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -1px;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(245, 102, 0, .15);
  border: 1px solid rgba(245, 102, 0, .5);
  color: var(--orange);
  font-family: var(--font-display); font-size: .85rem; line-height: 1;
}
.lp-steps strong { display: block; color: var(--white); font-size: var(--fs-base); margin-bottom: .1rem; }


/* ---- mobile: the closing call button matches the full-width form controls ---- */
@media (max-width: 699px) {
  .lp-close .btn--call { width: 100%; }
  .lp-hero h1 { font-size: clamp(1.95rem, 8.4vw, 2.6rem); }
}


/* ---- footer mark, links back to the main site ---- */
.lp-footer__logo { display: inline-block; line-height: 0; margin-bottom: var(--space-2); border-radius: 4px; }
.lp-footer__logo img { height: 40px; width: auto; display: block; transition: opacity var(--dur, .25s) var(--ease, ease); }
.lp-footer__logo:hover img, .lp-footer__logo:focus-visible img { opacity: .78; }
.lp-footer .container { display: flex; flex-direction: column; align-items: center; }

/* ---- tap targets on the logo links ----
   Both logos are links but sit at 34px and 40px tall, under the 44px minimum.
   The hit area is expanded with a pseudo-element so the touch target passes
   without the logo itself changing size or the header growing. */
.lp-header__logo, .lp-footer__logo { position: relative; }
.lp-header__logo::after, .lp-footer__logo::after {
  content: ""; position: absolute; inset: -7px -10px;
}


/* ---- mobile: tighten the hero so the offer card starts sooner ----
   Paid clicks from Google and Meta land here overwhelmingly on phones. The
   default hero rhythm is set for desktop and pushed the offer card and the
   price well past the first screen. Trimmed on phones only; nothing above
   700px changes. */
@media (max-width: 699px) {
  .lp-hero { padding-block: 1.75rem 2.5rem; }
  .lp-hero__grid { gap: 1.4rem; }
  .lp-hero h1 { margin-bottom: .6rem; }
  .lp-hero .lp-checks { margin-top: 1.35rem; gap: .8rem; }
}


/* ---- homepage service cards on a landing page ----
   /electrician/ reuses the homepage .card-grid and .card--photo cards from
   styles.css section 08. This only spaces the grid under the heading and adds
   the eighth card (Everyday Jobs), which has its own photo. */
.lp-cards { margin-top: var(--space-4); }
.card--everyday .card__icon { width: 46%; max-width: 132px; height: auto; }
/* Nik's pick, 10 Sep 2026: one of the crew hands-on at a job, from Photos of
   our work in Drive. Same pre-blurred bottom as the homepage cards. */
.card--everyday { --img: url("../assets/card-everyday.webp"); }
/* On phones the card is wider than the photo, so cover crops top and bottom.
   Hold the top in so his hat and face stay in frame. */
.card--everyday.card--photo { background-position: 0 0, center 12%, 0 0; }
.lp-section:not(.lp-section--light):not(.lp-section--tint) h2 em { font-style: normal; color: var(--orange); }

/* ---- town list ----
   Small towns are named on purpose. Someone in Lowmead is looking for the
   word Lowmead before they believe the coverage. Ten towns, so the grid is
   2 across on phones and tablets and 5 across on desktop: both divide evenly
   and no town ends up on a row by itself. */
.lp-areas {
  list-style: none; margin: var(--space-4) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-3);
}
@media (min-width: 900px) { .lp-areas { grid-template-columns: repeat(5, 1fr); column-gap: var(--space-4); } }
.lp-areas li {
  display: flex; align-items: baseline; gap: .7rem;
  padding-block: .7rem;
  border-bottom: 1px solid var(--line);
  font-weight: 600; font-size: var(--fs-base); color: var(--ink);
}
.lp-areas .num { font-family: var(--font-display); font-size: .8rem; letter-spacing: .08em; color: var(--orange-ink); }
.lp-areas-more { margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: var(--ink-soft); }

/* ---- reassurance box on a CTA card, for pages with no price ----
   Same look as .lp-price without the big number. Written as
   `.lp-cta .lp-note` because of the `.lp-cta p` trap above. */
.lp-cta .lp-note {
  margin: 0 0 var(--space-2);
  padding: .7rem .85rem;
  background: rgba(245, 102, 0, .12);
  border: 1px solid rgba(245, 102, 0, .45);
  border-radius: 10px;
  color: var(--white);
  font-size: var(--fs-sm);
}
.lp-cta .lp-note strong { display: block; color: var(--orange); margin-bottom: .15rem; }

/* One line directly under the submit button. The form is where the fear of
   being chased by a salesman peaks, so the answer sits right there. */
.lp-cta .lp-form-note {
  margin: .75rem 0 0; text-align: center;
  font-size: var(--fs-xs); color: var(--muted);
}

/* ---- the header phone number never breaks across two lines ----
   Kyle wants it read as 0415 503 796, in threes. At 320px it was wrapping
   onto two lines. Tighter button and logo on the narrowest phones only. */
.lp-header .btn__number { white-space: nowrap; }
@media (max-width: 359px) {
  .lp-header .btn--call { padding-inline: .8rem; font-size: .85rem; gap: .4rem; }
  .lp-header__logo img { height: 30px; }
}

/* ---- lazy background photos, paired with the observer in landing.js ----
   Until the block is near the screen the cards show their plain gradient. */
[data-lazy-bg]:not(.is-loaded) .card--photo { --img: none; }