/* ==========================================================================
   Guild Builders — Google Ads Landing Pages
   Standalone, conversion-focused styles (no site nav, one goal: get the lead)
   ========================================================================== */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* iOS enlarges text in landscape without this */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  background: #ffffff;
  color: #48556a;
}

.lp-container { width: min(1150px, 92%); margin: 0 auto; }

h1, h2, h3 {
  color: #14243a;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.6rem;
}

/* ---------- Header (logo + phone only, no nav) ---------- */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #e4ddce;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lp-header-inner {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
}
.lp-logo img { height: 68px; width: auto; display: block; }
/* Home-page logo treatment: matches .logo-image in style.css (180px).
   translateY nudges it down visually without taking part in layout, so
   nothing below it moves. Because it takes no part in layout, the flex box
   sizes to the untransformed height and the nudge pushes the logo 8px past
   the header's bottom border, over the page once the header goes solid on
   scroll. The margin hands those 8px back to the box so the border lands
   under the logo instead of through it. */
.lp-logo.lp-logo-home img {
  height: 171px;
  transform: translateY(8px);
  margin-bottom: 8px;
}

/* ---------- Full-screen video hero, mirroring body.home in style.css ----------
   The header goes fixed and transparent so the logo reads as part of the
   video, then turns solid ivory once you scroll past the hero. */
body.lp-video-hero .lp-hero {
  /* svh = the viewport at its SMALLEST, i.e. with the mobile browser's
     address bar showing. Sizing to it means the hero always fits the first
     screen on iOS and Android instead of being cut off by browser chrome,
     which is what plain vh does. vh first as the fallback for older browsers. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
}
/* clears the fixed header (200px logo + 1px border) */
body.lp-video-hero .lp-hero-inner {
  padding-top: 191px;
  padding-bottom: 4rem;
}
/* Lifts the lead form card above the hero copy. 8%, not the 15% it was: on a
   viewport around 1512x982 - the default window on a 14in MacBook - the hero
   block centres such that a 15% lift put the top of the white card behind the
   header's phone button. The button is white text on a transparent pill, so
   over the card it went from legible to nearly invisible, which is a phone
   number on the page where the ad money lands. Only viewports above 940px tall
   ever used this value; shorter ones have their own rules below. */
body.lp-video-hero .lp-form-card {
  transform: translateY(-8%);
}
/* lifts the headline/bullets column so the Google review line clears the fold */
body.lp-video-hero .lp-hero-copy {
  transform: translateY(-10%);
}
body.lp-video-hero .lp-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background 0.3s ease, border-color 0.3s ease;
}
body.lp-video-hero .lp-header-phone {
  color: #ffffff;
  border-color: #ffffff;
  /* Centred against the logo. It used to be lifted 26px, which read as the
     button having come loose from the row rather than as a deliberate offset.
     The 4px puts the two optical centres together rather than the two layout
     centres: the logo is nudged down 8px by a transform that takes no part in
     layout, so the flex box centres the button against where the logo would
     have been rather than where it is. Half the nudge closes the gap. */
  transform: translateY(4px);
}
body.lp-video-hero .lp-header-phone:hover {
  background: #ffffff;
  color: #0f1c2e;
}
/* once scrolled past the video, the header becomes solid again */
body.lp-video-hero .lp-header.scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #e4ddce;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body.lp-video-hero .lp-header.scrolled .lp-header-phone {
  color: #14243a;
  border-color: #d2b780;
}
body.lp-video-hero .lp-header.scrolled .lp-header-phone:hover {
  background: #d2b780;
  color: #0f1c2e;
}
/* The big logo earns its size over the hero, where it reads as part of the
   video. Past the hero the header is pinned for the rest of the page, and at
   171px it was holding a fifth of a 900px screen permanently, on every
   section below. Shrinking it on .scrolled keeps the entrance and stops
   paying for it afterwards, which is the alternative to dropping the sticky
   header altogether.

   Scoped to exactly the case where the header is actually pinned: under 861px
   wide, or under 501px tall, it is position:absolute and scrolls away on its
   own, so there is nothing to reclaim and no reason to touch it. */
@media (min-width: 861px) and (min-height: 501px) {
  .lp-logo.lp-logo-home img {
    transition: height 0.3s ease, transform 0.3s ease, margin-bottom 0.3s ease;
  }
  body.lp-video-hero .lp-header.scrolled .lp-logo.lp-logo-home img {
    height: 72px;
    transform: none;
    margin-bottom: 0;
  }
  /* the 4px optical nudge pairs with the logo's own 8px, which is gone here */
  body.lp-video-hero .lp-header.scrolled .lp-header-phone { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-logo.lp-logo-home img { transition: none; }
}
.lp-header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.15rem;
  color: #14243a;
  text-decoration: none;
  border: 2px solid #d2b780;
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}
.lp-header-phone:hover { background: #d2b780; color: #0f1c2e; }
/* Same nudge as the estimate button, on the same 3.5s cadence. Applied to
   the inner span rather than the link, because the link already carries a
   translateY at several breakpoints and an animation on it would wipe that
   out. A transform needs a block-level box, hence inline-block. */
.lp-header-phone .tel {
  white-space: nowrap;
  display: inline-block;
  animation: lp-nudge 3.5s ease-in-out 0.8s infinite;
}
.lp-header-phone:hover .tel,
.lp-header-phone:focus-visible .tel,
.lp-header-phone:active .tel { animation: none; }

/* ---------- Hero ---------- */
.lp-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  color: #ffffff;
  overflow: hidden;
}
/* Scrim over the hero video. This is the phone value and it is at its limit:
   below 861px the copy is centred and full width, so it sits over the light
   end of the gradient. Measured against the brightest frame of the clip, the
   bullets and the review line run 5.09:1, and lightening the end stop even to
   0.50 drops them to 4.41:1, under the 4.5 that body text needs. */
.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg, rgba(15, 28, 46, 0.9) 0%, rgba(15, 28, 46, 0.72) 55%, rgba(15, 28, 46, 0.55) 100%);
}
/* From 861px the hero is two columns and the copy sits in the left one, over
   the darkest end of the gradient, so the whole scrim can lift. Worst case on
   the brightest frame is 4.80:1 on the review line, still clear of 4.5. */
@media (min-width: 861px) {
  .lp-hero::before {
    background: linear-gradient(120deg, rgba(15, 28, 46, 0.78) 0%, rgba(15, 28, 46, 0.6) 55%, rgba(15, 28, 46, 0.45) 100%);
  }
}
/* Poster fallback behind the hero video - matches whichever source the
   page loads, so the still frame never disagrees with the video. */
.lp-hero.lp-hero-video { background-image: url("miracle-poster.webp"); }
@media (min-width: 861px) {
  .lp-hero.lp-hero-video { background-image: url("miracle-poster.webp"); }
}

/* The still hero carries the Lupita shower, which is framed tight: the rain
   head is in the top sixth of the photograph and the pipe runs right off the
   top edge. The hero band is far wider than the 1.5 photo, so cover scales by
   width and spills the height, and the shared centre anchor spent that spill
   cropping the top - the head came off. Anchoring to the top keeps the head
   and the arm in shot and takes the crop off the floor instead, which is
   empty tile. Kitchen A is unaffected: it is .lp-hero-video. */
.lp-hero.lp-hero-still { background-position: center top; }

/* Crossfading still hero (the deck page). Four frames of one job, each held
   seven seconds inside a twenty-eight second cycle, overlapping by the length
   of the fade so the band is never empty between frames.

   Sits at z-index 0, beneath the ::before scrim: the contrast figures measured
   for the video hero above carry over unchanged, since every frame here is a
   bright daylight exterior like the brightest frame of the clip.

   object-position is 50% 42% rather than the still hero's "center top". The
   hero band is far wider than these 1.5 photographs, so cover spills the
   height; anchoring to the top would spend the whole spill on the deck floor,
   which is the thing being sold. Just above centre keeps the boards and the
   railing in shot and crops sky instead.

   WCAG 2.2.2 governs this: it moves for longer than five seconds, so reduced
   motion has to stop it outright rather than slow it. It then holds the first
   frame, which is why that frame is also the section's background-image. */
.lp-hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.lp-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  opacity: 0;
  animation: lp-hero-crossfade 28s linear infinite;
}
.lp-hero-slide:nth-child(2) { animation-delay: 7s; }
.lp-hero-slide:nth-child(3) { animation-delay: 14s; }
.lp-hero-slide:nth-child(4) { animation-delay: 21s; }
@keyframes lp-hero-crossfade {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  25%  { opacity: 1; }
  29%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-hero-slide { animation: none; opacity: 0; }
  .lp-hero-slide:first-child { opacity: 1; }
}

/* Background video hero, same treatment as .hero-bg-video on the main site.
   Sits under the ::before gradient so the copy and form stay readable. */
.lp-hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.lp-hero-inner {
  z-index: 2;
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
  padding: 3.5rem 0 4rem;
}
.lp-hero-copy .eyebrow {
  color: #d2b780;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.95rem;
  margin: 0 0 0.8rem;
}
.lp-hero-copy h1 { color: #ffffff; font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
.lp-hero-copy .lp-subhead { font-size: 1.18rem; color: #eef1f6; max-width: 32ch; }
.lp-hero-bullets { list-style: none; padding: 0; margin: 1.4rem 0 0; }

/* Kitchen A centres its whole hero column - eyebrow through the review line.
   The bullet LIST is centred as a block sized to its longest row rather than
   each row individually, so the green ticks stay on one vertical edge. Same
   reasoning as the mobile rule further down. */
.lp-hero-copy-centered { text-align: center; }
.lp-hero-copy-centered .lp-subhead { margin-left: auto; margin-right: auto; }
.lp-hero-copy-centered .lp-hero-bullets {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
/* ---------- Thank-you pages ----------
   These reuse the landing hero but have no form card, so the hero's
   1.1fr/0.9fr grid stranded the whole confirmation in the left column with
   the right 45% of a desktop screen empty - it read as a broken page, not a
   centred one. One column, centred, and no lift: the -10% on .lp-hero-copy
   exists to balance the form card that isn't here. */
.lp-thanks-inner { grid-template-columns: 1fr; justify-items: center; }
body.lp-video-hero .lp-thanks-inner .lp-hero-copy {
  max-width: 46rem;
  transform: none;
}
/* Call first, book second. Both sit on one row on a desktop and wrap to two
   on a phone, so the gold phone button always reads as the primary action and
   the ghost calendar link as the alternative. */
.lp-thanks-cta {
  margin: 1.8rem 0 1.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.9rem;
}
/* The ghost button is quieter than .lp-cta-phone but has to stay legible over
   a moving video: white on the hero's overlay, and it fills the phone width so
   the two buttons read as a stack rather than two ragged pills. */
.lp-thanks-cta .lp-cta-ghost { font-size: 1.02rem; }
@media (max-width: 600px) {
  .lp-thanks-cta { flex-direction: column; gap: 0.75rem; }
  .lp-thanks-cta .lp-cta-phone,
  .lp-thanks-cta .lp-cta-ghost {
    width: 100%;
    max-width: 22rem;
    justify-content: center;
  }
}

.lp-hero-bullets li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.55rem;
  color: #ffffff;
  font-weight: 500;
}
.lp-hero-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  /* white on #238b45 clears 4.5:1, so the tick stays legible over the video */
  color: #ffffff;
  background: #238b45;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  font-weight: 800;
  top: 0.15rem;
}
.lp-hero-reviews {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  /* tightened so the review line sits well clear of the fold */
  margin-top: 0.6rem;
  color: #ffffff;
  font-weight: 600;
}
.lp-hero-reviews .stars { color: #f0c04a; letter-spacing: 2px; }
/* Adding Facebook made this line long enough to wrap on a phone, which broke
   the stars away from the platforms they belong to. It holds one line now.
   The size is capped by the viewport rather than set per breakpoint: the line
   only has to fit once, and tying it to the width means it keeps fitting at
   whatever screen turns up rather than at the three I happened to test. */
@media (max-width: 860px) {
  .lp-hero-reviews {
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: min(0.95rem, 3.5vw);
    gap: 0.45rem;
  }
  .lp-hero-reviews .stars { letter-spacing: 1px; }
}

/* ---------- Lead form card ---------- */
.lp-form-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 1.8rem 1.7rem 1.9rem;
  box-shadow: 0 24px 60px rgba(15, 28, 46, 0.35);
  color: #48556a;
}
.lp-form-card h2 { font-size: 1.75rem; text-align: center; }
.lp-form-card .lp-form-sub {
  text-align: center;
  margin: 0 0 1.2rem;
  font-size: 0.95rem;
  color: #5f6a7a;
}
.lp-form label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #14243a;
  margin: 0 0 0.25rem;
}
.lp-form input,
.lp-form select {
  width: 100%;
  padding: 0.8rem 0.9rem;
  margin-bottom: 0.9rem;
  border: 1px solid #d7d0c0;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  color: #14243a;
  background: #fdfcfa;
}
.lp-form input:focus,
.lp-form select:focus { outline: none; border-color: #d2b780; box-shadow: 0 0 0 3px rgba(210, 183, 128, 0.25); }
.lp-btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  background: #d2b780;
  color: #0f1c2e;
  font-weight: 800;
  font-size: 1.08rem;
  border: none;
  border-radius: 8px;
  padding: 0.95rem 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.1s ease;
}
.lp-btn:hover { background: #c2a24e; }
.lp-btn:active { transform: translateY(1px); }

/* Draw the eye to the submit button. Most of the cycle sits still - a
   constant wobble reads as broken rather than inviting. Cancelled on
   hover/focus so the press feedback and keyboard focus behave normally,
   and off entirely for anyone who asked for reduced motion. */
@keyframes lp-nudge {
  0%            { transform: translateX(0); }
  4%            { transform: translateX(-7px); }
  8%            { transform: translateX(7px); }
  12%           { transform: translateX(-4px); }
  16%           { transform: translateX(2px); }
  20%, 100%     { transform: translateX(0); }
}
/* The shake sits at the START of the cycle, so the first one lands 0.8s
   after load rather than four seconds in - it was finishing the cycle
   before anyone saw it move. */
.lp-btn { animation: lp-nudge 3.5s ease-in-out 0.8s infinite; }
.lp-btn:hover,
.lp-btn:focus-visible,
.lp-btn:active { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .lp-btn,
  .lp-header-phone .tel { animation: none; }
}
/* the padlock reads small next to the text at matching size */
.lp-lock { font-size: 1.18em; line-height: 1; vertical-align: -0.06em; }

.lp-form-fineprint {
  text-align: center;
  font-size: 0.9rem;
  color: #66707f;
  margin: 0.8rem 0 0;
}
/* Calendar link at the foot of the form card. Navy on white rather than the
   gold used over the hero video: gold on white is the one place that pairing
   drops under 4.5:1. Separated by a rule so it reads as an alternative to the
   form rather than part of it. */
.lp-form-calendar {
  text-align: center;
  font-size: 0.92rem;
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid #e6e9ee;
}
.lp-form-calendar a {
  color: #14243a;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lp-form-calendar a:hover { color: #a8842c; }

/* ---------- Gallery lightbox ----------
   Ported from style.css, which landing pages do not load. Same behaviour:
   click a thumbnail, get the full-size original over a dark backdrop. */
.lp-gallery-image { cursor: zoom-in; }

.lp-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 28, 46, 0.96);
  justify-content: center;
  align-items: center;
  /* small padding so tall portrait photos get the full screen height */
  padding: 12px;
}
.lp-lightbox.active { display: flex; }

.lp-lightbox-content {
  max-width: 94vw;
  max-height: 94vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.lp-lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 10001;
  font-size: 42px;
  line-height: 1;
  font-weight: 300;
  color: #ffffff;
  background: transparent;
  border: none;
  cursor: pointer;
}
.lp-lightbox-close:hover { opacity: 0.8; }

.lp-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10000;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #ffffff;
  font-size: 2rem;
  cursor: pointer;
}
.lp-lightbox-arrow:hover { opacity: 0.75; }
.lp-lightbox-prev { left: 24px; }
.lp-lightbox-next { right: 24px; }

@media (max-width: 600px) {
  .lp-lightbox-arrow { width: 38px; height: 38px; font-size: 1.5rem; }
  .lp-lightbox-prev { left: 6px; }
  .lp-lightbox-next { right: 6px; }
  .lp-lightbox-close { top: 12px; right: 14px; font-size: 34px; }
}

/* ---------- Trust bar ---------- */
.lp-trustbar { background: #f6f3ec; border-bottom: 1px solid #e4ddce; }
.lp-trustbar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 1rem;
  padding: 1.4rem 0;
  text-align: center;
}
.lp-trust-item { flex: 1 1 200px; }
.lp-trust-item strong { display: block; color: #14243a; font-size: 1.05rem; }
.lp-trust-item span { font-size: 0.92rem; color: #5f6a7a; }

/* ---------- Generic section ---------- */
.lp-section { padding: 3.4rem 0; }
.lp-section.alt { background: #f6f3ec; }
.lp-section h2 { text-align: center; font-size: clamp(1.8rem, 3.5vw, 2.5rem); }
.lp-section h2::after {
  content: "";
  display: block;
  width: 66px;
  height: 3px;
  margin: 0.9rem auto 0;
  background: #c2a24e;
  border-radius: 2px;
}
.lp-section-lead { text-align: center; max-width: 60ch; margin: 0.5rem auto 2.2rem; }

/* ---------- Gallery ---------- */
/* Horizontal carousel rather than a grid: 18 photos stacked vertically pushed
   the reviews and the closing CTA a long way down the page. Swiping sideways
   keeps the whole set reachable without burying what comes after it. */
.lp-gallery {
  display: flex;
  gap: 1.25rem;
  margin-top: 1.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* the arrows below are the affordance; the native bar sits awkwardly under
     the rounded corners on desktop */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lp-gallery::-webkit-scrollbar { display: none; }
.lp-gallery img {
  flex: 0 0 auto;
  width: min(360px, 78%);
  height: 300px;
  object-fit: cover;
  border-radius: 18px;
  display: block;
  scroll-snap-align: start;
  cursor: zoom-in;
}
.lp-gallery:focus-visible { outline: 2px solid #d2b780; outline-offset: 2px; }

.lp-gallery-nav {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 1.5rem;
}
.lp-gallery-arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #d2b780;
  background: #ffffff;
  color: #14243a;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.lp-gallery-arrow:hover { background: #d2b780; color: #0f1c2e; }
.lp-gallery-arrow:disabled { opacity: 0.35; cursor: default; }
.lp-gallery-arrow:disabled:hover { background: #ffffff; color: #14243a; }

@media (max-width: 600px) {
  .lp-gallery img { height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-gallery { scroll-behavior: auto; }
}

/* ---------- Steps ----------
   Four photo cards in a row, numbered, with a chevron in each gap. */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.2rem;
}
.lp-step {
  position: relative;
  background: #ffffff;
  border: 1px solid #e4ddce;
  border-radius: 12px;
  /* deliberately NOT overflow:hidden. The photo needs clipping to the top
     corners, but hiding overflow here also clips the chevron, which sits in
     the gap outside the card. The clipping moves to the photo instead. */
  text-align: center;
  padding-bottom: 1.4rem;
  box-shadow: 0 1px 3px rgba(20, 36, 58, 0.05);
}
/* the chevron sits in the gap before every card but the first */
.lp-step + .lp-step::before {
  content: "";
  position: absolute;
  top: 78px;
  left: -1.1rem;
  width: 11px;
  height: 11px;
  border-top: 2px solid #b9c2ce;
  border-right: 2px solid #b9c2ce;
  transform: rotate(45deg);
}
/* No overflow:hidden here. The card cannot hide overflow or it clips the
   chevron in the gap, and the photo cannot hide it either or it clips the
   number badge straddling its bottom edge. Rounding the image itself gets the
   corners without clipping anything. */
.lp-step-photo {
  position: relative;
  line-height: 0;
}
.lp-step-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.42;
  object-fit: cover;
  display: block;
  border-radius: 11px 11px 0 0;
}
/* the number straddles the photo's bottom edge, as on the reference */
.lp-step-num {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -19px;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e4ddce;
  color: #14243a;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
}
.lp-step h3 { font-size: 1.2rem; margin: 2rem 1.1rem 0.5rem; }
.lp-step p { font-size: 0.99rem; margin: 0 1.1rem; }

.lp-steps-cta { text-align: center; margin-top: 2.4rem; }

@media (max-width: 900px) {
  .lp-steps { grid-template-columns: repeat(2, 1fr); gap: 1.7rem 1.5rem; }
  /* the chevrons only make sense in one continuous row */
  .lp-step + .lp-step::before { display: none; }
}
@media (max-width: 520px) {
  .lp-steps { grid-template-columns: 1fr; }
}

/* ---------- Owner card ----------
   Closes the How It Works sequence with a face. Same card treatment as the
   steps so the two read as one block: white on the ivory band, ivory border,
   matching radius and shadow. */
.lp-owner {
  display: flex;
  /* top, not centre: with the bio running several lines the photo would
     otherwise float halfway down the card, away from the name it belongs to */
  align-items: flex-start;
  gap: 1.7rem;
  max-width: 860px;
  margin: 1.6rem auto 0;
  padding: 1.8rem;
  background: #ffffff;
  border: 1px solid #e4ddce;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(20, 36, 58, 0.05);
}
/* A full length portrait, not a disc. The old 148px circle was sized for a
   head-and-shoulders crop; the same treatment on a standing shot shrinks the
   face to something you have to squint at, and cuts off the suit it is there
   to show. Full frame at 340px, so the face lands around 120px tall. */
.lp-owner-figure {
  flex: 0 0 340px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.lp-owner-photo {
  width: 340px;
  height: auto;
  /* the source ratio exactly, so nothing is cropped away */
  aspect-ratio: 1023 / 1537;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.lp-owner-name {
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.06rem;
  color: #14243a;
}
.lp-owner-quote {
  margin: 0.2rem 0 0;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.55;
  color: #5c6879;
  text-align: center;
  border-top: 1px solid #e4ddce;
  padding-top: 0.7rem;
}
.lp-owner-quote::before { content: "\201C"; }
.lp-owner-quote::after  { content: "\201D"; }
/* the rule between photo and text, as on the reference card */
.lp-owner-text {
  align-self: stretch;
  border-left: 1px solid #e4ddce;
  padding-left: 1.7rem;
}
.lp-owner-role {
  margin: 0 0 0.35rem;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.14rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #14243a;
}
.lp-owner-line { margin: 0 0 0.9rem; font-size: 1.06rem; }
.lp-owner-bio { margin: 0 0 0.8rem; font-size: 1.02rem; line-height: 1.65; }
.lp-owner-bio:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .lp-owner {
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    padding: 1.6rem 1.2rem;
    text-align: center;
  }
  .lp-owner-figure { flex-basis: auto; }
  .lp-owner-photo { width: 260px; }
  /* the rule moves above the text once the card stacks */
  .lp-owner-text {
    align-self: stretch;
    border-left: none;
    border-top: 1px solid #e4ddce;
    padding-left: 0;
    padding-top: 1.1rem;
  }
  /* paragraphs stay ranged left; centring several lines of prose is hard work
     to read, even though the name and credential above it do centre well */
  .lp-owner-bio { text-align: left; }
}

/* ---------- Before and after ----------
   One pair at a time, before on the left and after on the right with a drawn
   arrow between the two labels. Same scroll-snap track as the other two
   carousels; the arrows below wrap, so neither ever dead-ends. */
.lp-ba {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lp-ba::-webkit-scrollbar { display: none; }
.lp-ba:focus-visible { outline: 2px solid #d2b780; outline-offset: 2px; }
.lp-ba-item {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* the gap carries the arrow, which is positioned into it */
  gap: 0 3.4rem;
  position: relative;
  align-items: start;
}
.lp-ba-side { display: flex; flex-direction: column; gap: 0.75rem; }
.lp-ba-label {
  text-align: center;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #14243a;
}
.lp-ba-img {
  cursor: zoom-in;
  width: 100%;
  /* height:auto is required, not tidiness. The width/height attributes on the
     img are presentational hints that set CSS height, and aspect-ratio only
     drives the box when height is auto; without this the images render at
     their attribute height and come out portrait. The attributes stay because
     they reserve the right space before the file loads. */
  height: auto;
  /* every source is cropped to 1.6, so the box can be fixed and nothing
     letterboxes or stretches */
  aspect-ratio: 1.6;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
/* Square pair. The bathroom sources are a mix: three of the five pairs have a
   portrait photo on one side and a landscape one on the other, so there is no
   orientation that suits them all. A square box crops each by a comparable
   amount instead of butchering one to flatter the other, and it keeps every
   item the same height so the carousel does not jump as it turns. */
.lp-ba-item.is-square .lp-ba-img { aspect-ratio: 1; }
/* Camino is the tallest source in the set, a 9:16 frame, so a centred square
   crop lost the rain head at the top of the shower - the thing the photograph
   is of. Anchored to the top instead: the crop comes off the floor, which is
   bath mat and tub edge. */
.lp-ba-img.is-top { object-position: center top; }

/* the drawn arrow, centred in the gap and sitting on the label line */
.lp-ba-turn {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  color: #14243a;
  line-height: 0;
}
.lp-ba-turn svg { width: 72px; height: 30px; }

.lp-ba-nav {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 1.8rem;
}
.lp-ba-arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #14243a;
  background: #14243a;
  color: #ffffff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.lp-ba-arrow:hover { background: #d2b780; border-color: #d2b780; color: #0f1c2e; }

@media (max-width: 700px) {
  /* stacked, so the arrow turns to point down the page instead of across */
  .lp-ba-item { grid-template-columns: 1fr; gap: 1.2rem; }
  .lp-ba-turn {
    position: static;
    transform: none;
    align-self: center;
    justify-self: center;
    line-height: 0;
  }
  .lp-ba-turn svg { width: 54px; height: 24px; transform: rotate(72deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-ba { scroll-behavior: auto; }
}

/* ---------- Comparison table ---------- */
.lp-compare-wrap {
  margin-top: 2rem;
  /* a real table cannot reflow to one column, so it scrolls sideways on a
     phone rather than crushing five columns into 320px */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.lp-compare {
  width: 100%;
  min-width: 660px;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border: 1px solid #e4ddce;
  border-radius: 12px;
  overflow: hidden;
}
.lp-compare th,
.lp-compare td {
  padding: 0.95rem 1rem;
  text-align: center;
  border-bottom: 1px solid #ece6da;
  font-size: 1rem;
  vertical-align: middle;
}
.lp-compare tbody tr:last-child th,
.lp-compare tbody tr:last-child td { border-bottom: none; }
.lp-compare thead th {
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #14243a;
  line-height: 1.3;
  border-bottom: 1px solid #e4ddce;
}
.lp-compare tbody th[scope="row"] {
  text-align: left;
  font-weight: 600;
  color: #14243a;
  width: 34%;
  min-width: 230px;
}
/* our column is the one being argued for, so it carries the brand navy */
.lp-compare .is-us { background: #14243a; color: #ffffff; }
.lp-compare thead .is-us { color: #ffffff; font-size: 1.02rem; }
.lp-compare-corner { background: transparent; border-bottom: 1px solid #e4ddce; }

.lp-c-yes, .lp-c-no, .lp-c-var {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}
.is-us .lp-c-yes { background: #d2b780; color: #14243a; }
.lp-c-yes { background: #2e7d5b; color: #ffffff; }
.lp-c-no  { background: #efe7e5; color: #a4443a; }
.lp-c-var { background: #f2ecdd; color: #8a7a58; }
.lp-compare-note {
  text-align: center;
  margin: 1.1rem auto 0;
  font-size: 0.95rem;
  color: #5c6879;
}

/* ---------- How we deliver ---------- */
.lp-deliver {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: stretch;
  margin-top: 2.2rem;
}
/* the layered look from the reference, done with one offset backdrop rather
   than extra image requests */
/* No frame. The gold outline came off at Omer's request, so the photo takes
   the whole column: the 26px the border and its padding were occupying, plus
   the width freed by evening up the grid below. */
.lp-deliver-photo {
  position: relative;
  min-height: 340px;
}
/* The frame used to be an outline offset down and to the right, which read as
   stray lines poking out from behind the photo. It now sits evenly around it,
   with the image inset by the frame's own padding. */
.lp-deliver-photo img {
  position: relative;
  z-index: 1;
  /* The Lake Ridge shot is a tall 0.56 portrait. A fixed ratio left it hanging
     past the copy at every width, 609 against 551 at 1200 and 450 against 657
     at 900. Simply stretching it was worse: at its intrinsic ratio the image
     drove the row to 889px and dragged the text column with it. Taking it out
     of flow is what actually works. The column stretches to whatever the list
     needs, the image fills that box and contributes no height of its own, so
     photo and copy are always exactly level. */
  position: absolute;
  /* The width and height are spelled out because an absolutely positioned img
     is a replaced element: given only insets it takes its intrinsic size and
     spills out of its box rather than stretching to fit. */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  border-radius: 14px;
  display: block;
  box-shadow: 0 14px 36px rgba(20, 36, 58, 0.14);
}
.lp-deliver-list { list-style: none; margin: 0; padding: 0; }
.lp-deliver-list li { padding: 1.15rem 0; border-bottom: 1px solid #e4ddce; }
.lp-deliver-list li:first-child { padding-top: 0; }
.lp-deliver-list li:last-child { border-bottom: none; padding-bottom: 0; }
.lp-deliver-list h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.3rem;
  margin: 0 0 0.4rem;
}
.lp-tick { flex: 0 0 22px; }
.lp-deliver-list p { margin: 0; font-size: 1.03rem; }

/* ---------- FAQ ---------- */
.lp-faq { max-width: 820px; margin: 2rem auto 0; }
.lp-faq-item { border-bottom: 1px solid #e4ddce; }
.lp-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.15rem 0;
  cursor: pointer;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.08rem;
  color: #14243a;
  list-style: none;
}
/* the default disclosure triangle, replaced by the chevron button */
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::marker { content: ""; }
.lp-faq-item summary:focus-visible { outline: 2px solid #d2b780; outline-offset: 3px; }
.lp-faq-chev {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid #14243a;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #14243a;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.lp-faq-item[open] .lp-faq-chev { transform: rotate(180deg); background: #14243a; color: #ffffff; }
.lp-faq-a { padding: 0 0 1.25rem; }
.lp-faq-a p { margin: 0; font-size: 1.04rem; max-width: 68ch; }

@media (max-width: 860px) {
  .lp-deliver { grid-template-columns: 1fr; gap: 2rem; }
  /* stacked, so there is no sibling to match and nothing to fill: the image
     goes back into flow with a shape of its own */
  .lp-deliver-photo { min-height: 0; }
  /* back in flow, so the frame's own padding makes the gap and the calc
     sizing from the two column layout must not follow it here */
  .lp-deliver-photo img {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1.05;
  }
}
@media (max-width: 600px) {
  .lp-faq-item summary { font-size: 1.02rem; gap: 0.8rem; }
  .lp-deliver-list h3 { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-faq-chev { transition: none; }
}

/* ---------- Reviews ---------- */
/* Carousel, same mechanics as the gallery so the two behave alike. Auto
   advances every 7s; the script pauses it on hover and on focus and skips
   rotation entirely under prefers-reduced-motion. */
.lp-reviews {
  display: flex;
  align-items: stretch;
  gap: 1.4rem;
  margin-top: 1.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lp-reviews::-webkit-scrollbar { display: none; }
.lp-reviews:focus-visible { outline: 2px solid #d2b780; outline-offset: 2px; }
.lp-review {
  flex: 0 0 auto;
  width: min(520px, 86%);
  /* start, to match the scrollTo targets the script computes from offsetLeft */
  scroll-snap-align: start;
  background: #ffffff;
  border: 1px solid #e4ddce;
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
/* pushes the name to the bottom so it lines up across cards of unequal length */
.lp-review .lp-review-name { margin-top: auto; }
/* Both of those earn their keep only when several cards share a row and their
   names should line up. On a phone one card is on screen at a time, so there
   is nothing to line up with and the two together just buy dead space:
   measured at 390px, every card was 685px tall because the longest set the
   height, and Daniel D. carried 346px of that as a gap between his last line
   and his name. Cards size to their own content here, and the name sits
   directly under the review on the paragraph's own 0.8rem, which is what the
   longest card already looked like. */
@media (max-width: 860px) {
  .lp-reviews { align-items: flex-start; }
  .lp-review .lp-review-name { margin-top: 0; }
}

.lp-review-nav {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 1.5rem;
}
/* same control as the gallery, so the two carousels are operated alike. The
   reviews wrap around, so these never need a disabled state. */
.lp-review-arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #d2b780;
  background: #ffffff;
  color: #14243a;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.lp-review-arrow:hover { background: #d2b780; color: #0f1c2e; }

@media (prefers-reduced-motion: reduce) {
  .lp-reviews { scroll-behavior: auto; }
}
.lp-review .stars { color: #f0c04a; letter-spacing: 2px; margin-bottom: 0.5rem; }
.lp-review p { font-style: italic; color: #3a4557; margin: 0 0 0.8rem; }
.lp-review .lp-review-name { font-weight: 700; color: #14243a; font-style: normal; }

/* ---------- Trust strip ---------- */
.lp-trust-kicker {
  text-align: center;
  margin: 2.2rem 0 1.1rem;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7c8798;
}

.lp-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
}
.lp-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  min-width: 200px;
  padding: 1.25rem 1.6rem;
  background: #ffffff;
  border: 1px solid #e4ddce;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(20, 36, 58, 0.05);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
a.lp-badge:hover { border-color: #d2b780; transform: translateY(-2px); }
a.lp-badge:focus-visible { outline: 2px solid #d2b780; outline-offset: 3px; }
.lp-badge-name {
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 1.08rem;
  color: #14243a;
}
/* The mark replaces the platform's name rather than sitting above it. Google
   and Facebook ship a bare glyph, so a logo with the word under it would have
   read as a caption, while Thumbtack and Houzz carry the word inside the mark
   and would have said it twice. The name lives in alt either way, so nothing
   is lost to a screen reader.

   Capped at the same 38px the brand tiles use, so the two logo rows on the
   page read at one size instead of competing. Height binds on all four: these
   are marks, not the wide wordmarks upstairs. */
/* Height is fixed rather than a max, and width is left to the attributes. All
   four encode to exactly 38px tall, so this is the same size a max would give,
   but it reserves the box before the lazy image arrives. With width and height
   both auto an unloaded image is 0x0, so the badge rendered with no logo at
   all and grew when it loaded. */
.lp-badge-logo {
  height: 38px;
  width: auto;
  max-width: 146px;
  object-fit: contain;
  display: block;
}
.lp-badge-stars { color: #f0c04a; letter-spacing: 2px; font-size: 1.05rem; }
.lp-badge-score { font-size: 0.95rem; color: #5c6879; }
.lp-badge-cta {
  margin-top: 0.35rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: #14243a;
  border-bottom: 1px solid #d2b780;
}

/* Brand strip. Same scroller mechanics as the gallery and the reviews so it
   behaves the way the rest of the page already does: snaps, hides the native
   bar, and takes the arrows below as its affordance. */
.lp-brandstrip {
  display: flex;
  gap: 1rem;
  margin-top: 1.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lp-brandstrip::-webkit-scrollbar { display: none; }
.lp-brandstrip:focus-visible { outline: 2px solid #d2b780; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .lp-brandstrip { scroll-behavior: auto; }
}
/* Fixed width rather than shrink-to-fit: the names run from four characters
   to seventeen, and sized to their text the tiles would step raggedly past
   under the auto-advance. The two long ones wrap to a second line inside the
   same tile instead. */
.lp-brand {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 178px;
  min-height: 84px;
  padding: 0.9rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ffffff;
  border: 1px solid #e4ddce;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(20, 36, 58, 0.05);
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #14243a;
}
/* The logos are supplied on white and the tile is white, so they are dropped
   in opaque rather than keyed to transparency: a colour-key threshold leaves
   a fringe on antialiased type, and matching white on white has no seam to
   hide. Only Arizona Tile needed work, arriving on 244 grey.

   The marks share no aspect ratio: Fisher & Paykel is 15.7:1 and Benjamin
   Moore is 1.1:1. Scaling them all to one width would leave the first a
   hairline and the second towering, so each is capped on BOTH axes and fits
   inside whichever binds. Wide wordmarks take the full width and come out
   short; stacked marks take the full height and come out narrow. That is the
   honest reading of the artwork rather than a uniform number applied to
   everything. The assets are pre-fitted to 2x these caps, so the browser is
   never scaling up. */
.lp-brand img {
  max-width: 146px;
  max-height: 38px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
@media (max-width: 600px) {
  .lp-brand img { max-width: 118px; max-height: 32px; }
}
.lp-brand-nav {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.4rem;
}
@media (max-width: 600px) {
  .lp-brand { width: 150px; min-height: 76px; font-size: 0.85rem; }
}

@media (max-width: 600px) {
  .lp-badge { min-width: 0; flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  a.lp-badge:hover { transform: none; }
}

/* ---------- Guarantees ---------- */
.lp-guarantees {
  background: #14243a;
  color: #e7ecf3;
  padding: 3.4rem 0;
}
.lp-guarantees-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  color: #ffffff;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  text-align: center;
  margin: 0;
}
.lp-laurel { color: #d2b780; flex: 0 0 auto; }
/* the right-hand branch is the same drawing turned over */
.lp-guarantees-title .lp-laurel:last-child { transform: scaleX(-1); }
.lp-guarantees-lead {
  text-align: center;
  max-width: 58ch;
  margin: 1.2rem auto 2.4rem;
  color: #c4cedd;
}
.lp-guarantee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.6rem;
  /* stretch, not start: the three cards read as a set, and a short one sitting
     shallower than its neighbours looks like something is missing from it */
  align-items: stretch;
}
/* Between 637 and 968px the auto-fit grid gives two columns and guarantee
   three is left alone on row two, flush left with a column of dead space beside
   it. justify-content cannot fix that: the 1fr tracks already fill the row, so
   there is no free space to distribute. Spanning both columns and capping the
   width back to one puts it under the gap between the two above it. */
@media (min-width: 637px) and (max-width: 968px) {
  .lp-guarantee:last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.8rem);
    margin-inline: auto;
  }
}
.lp-guarantee {
  position: relative;
  background: #ffffff;
  border-radius: 10px;
  padding: 2.1rem 1.5rem 1.5rem;
}
/* gold tab across the card's top-left, as on the reference */
.lp-guarantee-tab {
  position: absolute;
  top: -0.85rem;
  left: -0.5rem;
  background: #d2b780;
  color: #0f1c2e;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.35rem 0.9rem;
  border-radius: 4px 4px 4px 0;
}
.lp-guarantee h3 { font-size: 1.4rem; margin: 0 0 0.6rem; color: #14243a; }
.lp-guarantee p { margin: 0; color: #3a4557; font-size: 1.14rem; line-height: 1.62; }

.lp-guarantees-cta { text-align: center; margin-top: 2.4rem; }
/* same nudge as the form button, on the same cadence, so the page has one
   shake rather than two competing ones */
.lp-gold-btn {
  display: inline-block;
  background: #d2b780;
  color: #0f1c2e;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: 0.02em;
  padding: 1rem 2.2rem;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(210, 183, 128, 0.22);
  animation: lp-nudge 3.5s ease-in-out 0.8s infinite;
}
.lp-gold-btn-light { box-shadow: 0 8px 22px rgba(20, 36, 58, 0.12); }
.lp-gold-btn:hover,
.lp-gold-btn:focus-visible,
.lp-gold-btn:active { animation: none; background: #e0caa0; }
.lp-gold-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

@media (max-width: 600px) {
  .lp-guarantees-title { gap: 0.6rem; }
  .lp-laurel { width: 24px; height: 44px; }
  .lp-gold-btn { padding: 0.95rem 1.5rem; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-gold-btn { animation: none; }
}

/* ---------- CTA band ---------- */
.lp-cta-band { background: #14243a; color: #ffffff; text-align: center; padding: 3.2rem 0; }
.lp-cta-band h2 { color: #ffffff; }
/* Calendar link under the CTA buttons. Underlined and gold so it reads as a
   link rather than a disabled third button, and quiet enough that the phone
   and the estimate form stay the two things the eye lands on. */
.lp-cta-calendar { margin: 1.2rem 0 0; }
.lp-cta-calendar a {
  color: #e2cd9f;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lp-cta-calendar a:hover { color: #ffffff; }
.lp-cta-band h2::after { background: #d2b780; }
.lp-cta-band .lp-cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}
/* Carries the same nudge as the header phone, the submit button and the gold
   buttons. It was the one gold call-to-action on the page without it, and it
   is the last thing a visitor who has read the whole page sees, so it is the
   one that can least afford to sit still. Same 3.5s cycle as the rest, so the
   ones sharing a viewport move together rather than at cross rhythms. */
.lp-cta-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #d2b780;
  color: #0f1c2e;
  font-weight: 800;
  font-size: 1.15rem;
  padding: 0.9rem 1.8rem;
  border-radius: 8px;
  text-decoration: none;
  animation: lp-nudge 3.5s ease-in-out 0.8s infinite;
}
.lp-cta-phone:hover { background: #c2a24e; }
.lp-cta-phone:hover,
.lp-cta-phone:focus-visible,
.lp-cta-phone:active { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .lp-cta-phone { animation: none; }
}
.lp-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 2px solid #ffffff;
  color: #ffffff;
  font-weight: 700;
  padding: 0.85rem 1.7rem;
  border-radius: 8px;
  text-decoration: none;
}
.lp-cta-ghost:hover { background: #ffffff; color: #14243a; }

/* ---------- Booking page ----------
   The scheduler is an iframe from Cal.com, so it gets a generous min-height:
   the month view plus a time column needs real room, and a short box makes the
   embed scroll inside itself, which on a phone is close to unusable. */
body.lp-book-page { background: #fbf8f2; }
.lp-book {
  padding: 150px 0 3.5rem;
  text-align: center;
}
/* The scheduler carries its own description, so the page above it is a title
   and nothing else. Both lines are sized up from the landing page defaults
   because there is no longer any body copy for them to sit against. */
.lp-book h1 {
  color: #14243a;
  margin-top: 0.6rem;
  font-size: clamp(2.5rem, 5.2vw, 3.8rem);
}
.lp-book .eyebrow {
  color: #a8842c;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  margin: 0;
}
.lp-book-embed {
  margin: 2.2rem auto 0;
  /* Sized to the widget's own content. Raising this does NOT reveal more of
     the event description: Cal.com truncates that panel inside its iframe with
     a fade mask at a fixed height, so extra height here only adds dead space
     underneath. The fix for a long description is a shorter description. */
  min-height: 700px;
  width: 100%;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(20, 36, 58, 0.12);
  overflow: hidden;
}
.lp-book-fallback { margin-top: 2rem; color: #48556a; }
@media (max-width: 860px) {
  .lp-book { padding-top: 118px; }
  .lp-book-embed { min-height: 900px; border-radius: 10px; }
}

/* ---------- Footer ---------- */
.lp-footer { background: #0f1c2e; color: #b9c2d0; text-align: center; padding: 2rem 0; font-size: 0.9rem; }
.lp-footer strong { color: #ffffff; }

/* ---------- Sticky mobile call bar ---------- */
.lp-sticky-call { display: none; }

/* ---------- Logo / hero clearance ladder ----------
   The hero copy is padded down by roughly the header height at each size,
   so the logo never sits on top of the headline. Keep the two values in
   step: padding-top should stay ~20px above the logo height. */

@media (max-width: 1024px) {
  .lp-logo.lp-logo-home img { height: 145px; }
  body.lp-video-hero .lp-hero-inner { padding-top: 165px; }
}

/* ---------- Short desktop screens ----------
   Keyed on viewport HEIGHT, not width. A 200px logo is a quarter of a
   1366x768 laptop, and the lifted form card slid up underneath it. Scale the
   logo down and ease off the lift so nothing hides behind the header. */
@media (min-width: 861px) and (max-height: 940px) {
  .lp-logo.lp-logo-home img { height: 128px; }
  body.lp-video-hero .lp-hero-inner { padding-top: 146px; }
  body.lp-video-hero .lp-form-card { transform: translateY(-5%); }
  body.lp-video-hero .lp-hero-copy { transform: translateY(-4%); }
  body.lp-video-hero .lp-header-phone { transform: translateY(4px); }
}

@media (min-width: 861px) and (max-height: 820px) {
  .lp-logo.lp-logo-home img { height: 103px; }
  body.lp-video-hero .lp-hero-inner { padding-top: 121px; }
  body.lp-video-hero .lp-form-card,
  body.lp-video-hero .lp-hero-copy { transform: none; }
  body.lp-video-hero .lp-header-phone { transform: none; }
}

/* Landscape phones: wide enough to hit the desktop rules, but only ~400px
   tall. A pinned header would hold a quarter of the screen permanently, so
   let it scroll away and shrink the logo. */
@media (max-height: 500px) {
  body.lp-video-hero .lp-header { position: absolute; }
  .lp-logo.lp-logo-home img { height: 68px; }
  body.lp-video-hero .lp-hero-inner {
    padding-top: 84px;
    padding-bottom: 2rem;
  }
}

@media (max-width: 860px) {
  .lp-logo.lp-logo-home img { height: 105px; }
  body.lp-video-hero .lp-hero-inner {
    padding-top: 125px;
    padding-bottom: 2.5rem;
  }
  /* Header sits at the top of the PAGE rather than following the viewport,
     so it holds its position instead of travelling down as you scroll. */
  body.lp-video-hero .lp-header {
    position: absolute;
  }
  body.lp-video-hero .lp-header-inner { min-height: 0; }
  body.lp-video-hero .lp-header-phone { transform: none; }

  /* Headline first on mobile, form under it. This was the other way round
     until 2026-08-14 on the reasoning that the form is the point of the page.
     Changed on the media partner's advice: a form as the first thing on the
     screen is a jarring entry, and most people want to read the offer before
     they start typing. Desktop is unaffected - there the two sit side by side
     and the form is visible from the first frame either way. */
  body.lp-video-hero .lp-hero-copy { order: -1; }
  body.lp-video-hero .lp-form-card { order: 0; }

  /* Tighten the copy so the whole block, review line included, clears the
     first screen on a phone. */
  body.lp-video-hero .lp-hero-copy h1 {
    font-size: clamp(1.75rem, 6.4vw, 2.2rem);
    line-height: 1.12;
  }
  body.lp-video-hero .lp-hero-copy .lp-subhead {
    font-size: 1.02rem;
    margin: 0.7rem 0 0;
  }
  body.lp-video-hero .lp-hero-bullets { margin-top: 1rem; }
  body.lp-video-hero .lp-hero-bullets li {
    margin-bottom: 0.38rem;
    font-size: 0.95rem;
  }
  body.lp-video-hero .lp-hero-reviews {
    margin-top: 1rem;
    /* The one-line rule above sets this too, and loses: that selector is a
       class on its own against a body class plus a class here. Sized here
       instead so it actually wins. 3.2vw rather than 3.5 because nowrap makes
       the line as wide as it needs to be and 3.5 still ran 307px into the
       294px a 320px screen has, which is a sideways scrollbar, not a wrap. */
    font-size: min(0.95rem, 3.2vw);
  }
}

@media (max-width: 600px) {
  .lp-logo.lp-logo-home img { height: 87px; }
  body.lp-video-hero .lp-hero-inner { padding-top: 105px; }
}

/* Short phones - reclaim more height so the review line still makes the fold */
@media (max-width: 860px) and (max-height: 720px) {
  .lp-logo.lp-logo-home img { height: 75px; }
  body.lp-video-hero .lp-hero-inner { padding-top: 91px; }
  body.lp-video-hero .lp-hero-copy .eyebrow { margin-bottom: 0.5rem; }
  body.lp-video-hero .lp-hero-bullets li { margin-bottom: 0.3rem; }
}

@media (max-width: 860px) {
  /* single column here - lifting either block would overlap what's above it */
  body.lp-video-hero .lp-form-card,
  body.lp-video-hero .lp-hero-copy { transform: none; }
  .lp-hero-inner { grid-template-columns: 1fr; gap: 2rem; padding: 2.4rem 0 3rem; }
  /* Was hiding the number and printing "Call Now" in its place. Show the
     real number, as the main site does - it is the thing people act on. */
  .lp-header-phone .tel { display: inline-block; white-space: nowrap; }
  .lp-sticky-call {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    /* clears the iPhone home indicator */
    padding-bottom: env(safe-area-inset-bottom);
  }
  .lp-sticky-call a {
    flex: 1;
    text-align: center;
    padding: 0.95rem 0.4rem;
    font-weight: 800;
    text-decoration: none;
    font-size: 1rem;
    /* the full number is longer than "Call Now" was - keep it on one line
       and let it shrink rather than wrap on a 360px phone */
    white-space: nowrap;
  }
  .lp-sticky-call .call { font-size: 0.95rem; }
  @media (max-width: 374px) {
    .lp-sticky-call a { font-size: 0.9rem; padding-left: 0.25rem; padding-right: 0.25rem; }
  }
  .lp-sticky-call .call { background: #14243a; color: #ffffff; }
  .lp-sticky-call .quote { background: #d2b780; color: #0f1c2e; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* ---------- Limited-time offer badge ----------
   Stacked and taller, sized to fill the space between the logo above and the
   eyebrow below. Width hugs the text rather than stretching the column. The
   inline script aligns its top with the top of the white form card. */
.lp-promo {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
  background: rgba(15, 28, 46, 0.55);
  border: 1px solid rgba(210, 183, 128, 0.85);
  border-radius: 12px;
  padding: 0.95rem 1.9rem 1.05rem;
  /* smaller gap pulls the eyebrow through review line up toward the offer */
  margin: 0 0 0.4rem;
  max-width: 100%;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.lp-promo-stars {
  color: #d2b780;
  font-size: 0.875rem;
  letter-spacing: 0.45em;
  line-height: 1;
  /* letter-spacing adds a trailing gap; pull it back so the row reads centred */
  text-indent: 0.45em;
}

.lp-promo-lead {
  color: #ffffff;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.35rem, 1.9vw, 1.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.lp-promo-offer {
  color: #f3e6c8;
  font-size: clamp(0.92rem, 1.15vw, 1.02rem);
  letter-spacing: 0.02em;
}

.lp-promo-offer strong {
  color: #d2b780;
  font-weight: 800;
}

@media (max-width: 860px) {
  /* the whole hero copy column is centred on phones */
  .lp-promo {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 0.75rem 1.4rem 0.85rem;
  }
  .lp-promo-lead { font-size: 1.2rem; }
  .lp-promo-offer { font-size: 0.9rem; }

  .lp-hero-copy { text-align: center; }
  /* 32ch makes this narrower than the column, so centring the text inside a
     left-sitting box still reads off-centre. Let it span the column. */
  .lp-hero-copy .lp-subhead {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  /* Centre the LIST as a block sized to its longest line, then let each row
     fill it. Centring each row individually would stagger the ticks, since
     the lines differ in length - this keeps them on one vertical edge. */
  .lp-hero-bullets {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .lp-hero-bullets li {
    padding-left: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    text-align: left;
  }
  .lp-hero-bullets li::before {
    position: static;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    margin-top: 0.15rem;
  }
}