/* ==========================================================================
   /lp - paid-traffic landing page
   Loaded AFTER style.css, so every token, button, review card and the
   enquiry modal come from there. This file only holds the bits the LP has
   that the main site doesn't: the stripped header, the centred VSL hero,
   the proof band and the numbered call steps.

   Rule for this page: no navigation, no outbound links above the fold.
   Traffic is paid, so every click that isn't the CTA is money burnt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header - logo and a phone number, nothing else
   -------------------------------------------------------------------------- */
.lp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
  padding-inline: var(--gut);
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.lp-header__brand { display: flex; align-items: center; gap: 18px; color: var(--ink); }
.lp-header__brand img { width: 30px; height: 27px; object-fit: contain; }
.lp-header__brand span {
  font-weight: 500; font-size: 12px; line-height: 24px;
  letter-spacing: 0.15em; text-transform: uppercase;
}
.lp-header__phone {
  font-weight: 500; font-size: 12px; line-height: 24px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--body);
}
.lp-header__phone:hover { color: var(--terracotta); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.lp-hero { background: var(--shell); padding: 56px 0 72px; text-align: center; }
/* how-it-works.html reuses this hero but sits under the REAL site header, which is
   position:absolute and overlays whatever section comes first. /lp has no such
   header, hence the extra top padding living on a modifier rather than the base. */
.hiw-hero { padding-top: calc(var(--nav-h) + 56px); }

.lp-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--white);
  font-weight: 600; font-size: 11px; line-height: 18px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 26px;
}
.lp-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--terracotta);
}

.lp-hero h1 {
  font-family: var(--serif);
  font-size: 48px; line-height: 52px; letter-spacing: -0.02em;
  color: var(--ink);
  /* Wide enough that the headline lands on two lines, not three. */
  max-width: 1120px; margin: 0 auto;
}
.lp-hero__sub {
  font-size: 18px; line-height: 28px; font-weight: 300; color: var(--body);
  max-width: 620px; margin: 20px auto 0;
}

.lp-hero .video { margin: 40px auto 0; max-width: 860px; }

.lp-hero__cta { margin-top: 34px; }
.lp-hero__cta .btn { padding: 20px 40px; font-size: 13px; }

/* Star line under the CTA ------------------------------------------------- */
.lp-stars {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px 10px;
  margin-top: 22px;
  font-size: 14px; line-height: 22px; color: var(--meta);
}
.lp-stars__row { display: flex; gap: 2px; }
.lp-stars__row svg { width: 14px; height: 14px; fill: var(--terracotta); }

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */
.lp-trust {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.lp-trust ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 46px;
  padding: 22px 0;
  font-weight: 500; font-size: 11px; line-height: 20px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--body-warm);
}

/* --------------------------------------------------------------------------
   "On the call we will..."
   -------------------------------------------------------------------------- */
.lp-call { background: var(--white); padding: 92px 0; }
.lp-call__grid {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.lp-call__photo { border-radius: 10px; overflow: hidden; }
.lp-call__photo img { width: 100%; height: auto; }

.lp-call h2 {
  font-family: var(--serif); font-size: 40px; line-height: 44px;
  letter-spacing: -0.02em; color: var(--ink); margin: 0 0 30px;
}
/* <ol> default padding-inline-start was never reset, so the steps sat ~40px
   right of the heading above them. */
.lp-steps { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.lp-steps li { display: flex; gap: 18px; align-items: flex-start; }
.lp-steps__n {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--shell); color: var(--terracotta);
  font-weight: 600; font-size: 13px;
}
.lp-steps p { margin: 3px 0 0; font-size: 17px; line-height: 26px; color: var(--body); }
.lp-call__cta { margin-top: 38px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.lp-footer {
  background: var(--ink-foot);
  color: #A2968C;
  padding: 40px 0 46px;
  text-align: center;
}
.lp-footer img { margin: 0 auto 18px; width: 30px; height: 27px; object-fit: contain; }
.lp-footer p { margin: 0 auto; max-width: 760px; font-size: 12px; line-height: 20px; }
.lp-footer p + p { margin-top: 12px; }
.lp-footer a { color: #C9BEB4; border-bottom: 1px solid rgba(201,190,180,.4); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .lp-call__grid { grid-template-columns: 1fr; gap: 40px; }
  .lp-call__photo { max-width: 460px; }
}

@media (max-width: 760px) {
  .lp-header { height: 64px; padding-inline: 20px; }
  .lp-header__brand span { display: none; }

  /* The badge is a long line for a pill. Ease it down rather than let it
     wrap to two rows, which reads as a squashed label. */
  .lp-badge { font-size: 10px; letter-spacing: 0.1em; padding: 7px 14px; margin-bottom: 20px; }
  .lp-hero { padding: 34px 0 48px; }
  .hiw-hero { padding-top: calc(var(--nav-h) + 28px); }
  .lp-hero h1 { font-size: 32px; line-height: 36px; }
  .lp-hero__sub { font-size: 16px; line-height: 25px; }
  .lp-hero .video { margin-top: 28px; border-radius: 8px; }
  .lp-hero__cta .btn { width: 100%; padding: 18px 20px; white-space: normal; }

  .lp-trust ul { gap: 10px 24px; padding: 18px 0; font-size: 10px; }

  .lp-proof { padding: 56px 0 60px; }
  .lp-proof__head h2 { font-size: 30px; line-height: 34px; }
  .lp-proof__grid { grid-template-columns: 1fr; gap: 18px; }
  .lp-proof__card { padding: 14px; }

  .lp-call { padding: 56px 0; }
  .lp-call h2 { font-size: 30px; line-height: 34px; }
  .lp-call__cta .btn, .lp-proof__cta .btn { width: 100%; white-space: normal; }
}

/* The homepage has a section after the reviews marquee; this page doesn't,
   so it needs its own bottom padding. */
.lp-reviews { padding-bottom: 46px; }
@media (max-width: 760px) { .lp-reviews { padding-top: 56px; padding-bottom: 30px; } }

/* --------------------------------------------------------------------------
   Borrowed site sections
   The proof marquee and the case-study rail are lifted verbatim from the
   homepage so the numbers can never drift. Two things need adjusting: the
   rail is built to overlap the section above it on the homepage, and the
   proof heading gains a subline here.
   -------------------------------------------------------------------------- */
.lp-proof-lede,
.proof__sub { margin: 16px auto 0; max-width: 560px; }

/* Both sections sit on the same cream. Without trimming the padding they
   meet as a 200px empty band. */
.lp-page .proof { padding-bottom: 40px; }
/* how-it-works.html only. On /lp a white trust strip sits between the hero and
   the proof band, so .proof's 111px top padding reads as a section break. Here
   the strip is gone and both sections are --shell, so that 111px stacked onto
   the hero's 72px bottom and left ~185px of empty cream above "The Proof". */
.proof--tight { padding-top: 40px; }
.lp-page .cases { padding-top: 56px; margin-top: 0; }
.cases--white { background: var(--white); border-top: 1px solid var(--line); }
.lp-page .cases__head { margin-bottom: 34px; }

/* One CTA sitting between the proof and the call steps. */
.lp-midcta { background: var(--shell); padding: 0 0 88px; text-align: center; }
.lp-midcta .btn { padding: 20px 40px; font-size: 13px; }

@media (max-width: 760px) {
  .lp-page .proof { padding-bottom: 24px; }
  .lp-page .cases { padding-top: 34px; }
  .lp-midcta { padding-bottom: 52px; }
  .lp-midcta .btn { width: 100%; padding: 18px 20px; white-space: normal; }
}

/* The rating line under the hero CTA: same fix as the reviews page, so
   "on Google" doesn't drop to a line of its own on a phone. */
@media (max-width: 760px) {
  .lp-stars { flex-wrap: nowrap; white-space: nowrap; font-size: 13px; gap: 0 8px; }
  .lp-stars__row svg { width: 12px; height: 12px; }
}

/* --------------------------------------------------------------------------
   book.html - step two, the Calendly page
   -------------------------------------------------------------------------- */
.bk { background: var(--shell); padding: 56px 0 72px; text-align: center; }
/* margin-bottom used to come from .bk__lead, which was removed: the page has no
   header now, so the calendar sits near the top and nothing should pad it out. */
.bk h1 {
  font-family: var(--serif);
  font-size: 44px; line-height: 48px; letter-spacing: -0.02em;
  color: var(--ink); margin: 0 0 32px;
}
.bk__lead {
  font-size: 17px; line-height: 26px; color: var(--body);
  max-width: 34em; margin: 16px auto 32px;
}
.bk-cal {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.bk__fallback { font-size: 14px; line-height: 22px; color: var(--body-warm); margin: 22px 0 0; }
.bk__fallback a { color: var(--terracotta); border-bottom: 1px solid currentColor; }

/* Calendly ships a 750px box that is far too short for a phone - the confirm
   button ends up inside a second scroller. Carried over from the old page. */
@media (max-width: 767px) {
  .bk { padding: 30px 0 52px; }
  .bk h1 { font-size: 30px; line-height: 34px; }
  .bk__lead { font-size: 16px; line-height: 25px; margin-bottom: 24px; }
  .bk-cal { height: 1100px !important; overflow: hidden !important; }
  .bk .calendly-inline-widget iframe { max-height: 100% !important; overflow: hidden !important; }
}

/* --------------------------------------------------------------------------
   booked.html - what happens next
   -------------------------------------------------------------------------- */
.bk-next { display: grid; gap: 18px; margin: 34px 0 0; max-width: 44em; }
.bk-next li { display: flex; gap: 16px; align-items: flex-start; }
.bk-next span {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--shell); color: var(--terracotta);
  font-weight: 600; font-size: 12px;
}
.bk-next p { margin: 2px 0 0; font-size: 16px; line-height: 25px; color: var(--body); }

/* Step 1 of 2 line in the modal. */
.modal__step {
  font-weight: 500; font-size: 11px; line-height: 20px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--tan); margin: -18px 0 22px;
}
.modal__box--slim { max-width: 460px; }

/* booked.html: the confirmation sits under the slim funnel header, not the
   full site one, so it doesn't need the About page's top clearance. */
.lp-page .ty { padding-top: 56px; }
.lp-page .ty h1 { font-size: 46px; line-height: 50px; }
@media (max-width: 760px) {
  .lp-page .ty { padding-top: 34px; }
  .lp-page .ty h1 { font-size: 30px; line-height: 34px; }
}