/* ==========================================================================
   CA Autobody — Offer landing pages
   Foundation stylesheet. Loaded ONLY on the "Offer Landing" page template.
   Source of truth: Figma "CA Autobody Tesla Repairs • Design System" (39:962)

   Everything here is namespaced .lp- and scoped under .lp-page so it cannot
   collide with the parent theme (chelseaaccidentrepair) or its common.css.
   The parent theme has no custom properties, so these tokens are additive.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

.lp-page {
  /* Semantic colour — Figma 39:968 */
  --ca-color-bg-canvas:       #080c0e;
  --ca-color-bg-section:      #0d1417;
  --ca-color-bg-card:         #152126;
  --ca-color-bg-elevated:     #1a2a2f;
  --ca-color-text-primary:    #f5f8f7;
  --ca-color-text-secondary:  #a6b2b4;
  --ca-color-border-default:  #27363a;
  --ca-color-accent-default:  #e7a900;
  --ca-color-accent-subdued:  #c08d00;
  --ca-color-focus:           #f2bd2e;

  /* Type families — Rajdhani is display only, Raleway is everything else */
  --lp-font-display: "Rajdhani", "Raleway", system-ui, sans-serif;
  --lp-font-body:    "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing scale — 4 8 12 16 24 32 48 64 96 */
  --lp-space-1: 4px;
  --lp-space-2: 8px;
  --lp-space-3: 12px;
  --lp-space-4: 16px;
  --lp-space-5: 24px;
  --lp-space-6: 32px;
  --lp-space-7: 48px;
  --lp-space-8: 64px;
  --lp-space-9: 96px;

  /* Radius, elevation, targets */
  --lp-radius-sm: 6px;
  --lp-radius:    8px;
  --lp-radius-lg: 12px;
  --lp-touch:     44px;
  --lp-shadow-card: 0 1px 2px rgba(0, 0, 0, .32), 0 8px 24px rgba(0, 0, 0, .28);
  --lp-shadow-form: 0 2px 4px rgba(0, 0, 0, .36), 0 18px 48px rgba(0, 0, 0, .44);

  /* Layout — desktop frames are 1440 wide with 72px gutters */
  --lp-container: 1296px;
  --lp-gutter: 72px;
}

@media (max-width: 1199px) { .lp-page { --lp-gutter: 40px; } }
@media (max-width: 767px)  { .lp-page { --lp-gutter: 20px; } }

/* --------------------------------------------------------------------------
   2. Page reset — deliberately narrow, we are guests inside the parent theme
   -------------------------------------------------------------------------- */

.lp-page {
  margin: 0;
  background: var(--ca-color-bg-canvas);
  color: var(--ca-color-text-primary);
  font-family: var(--lp-font-body);
  font-size: 17px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.lp-page *,
.lp-page *::before,
.lp-page *::after { box-sizing: border-box; }

.lp-page img,
.lp-page svg { max-width: 100%; height: auto; display: block; }

.lp-page a { color: inherit; text-decoration: none; }
.lp-page a:hover { color: var(--ca-color-accent-default); }

.lp-page :focus-visible {
  outline: 2px solid var(--ca-color-focus);
  outline-offset: 2px;
  border-radius: var(--lp-radius-sm);
}

.lp-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 18px;
  background: var(--ca-color-accent-default);
  color: var(--ca-color-bg-canvas);
  font-weight: 700;
}
.lp-skip-link:focus { left: 8px; top: 8px; }

.lp-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.lp-container {
  width: 100%;
  max-width: calc(var(--lp-container) + (var(--lp-gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
}

.lp-section { position: relative; overflow: hidden; padding-block: var(--lp-space-9); }
.lp-section--canvas   { background: var(--ca-color-bg-canvas); }
.lp-section--alt      { background: var(--ca-color-bg-section); }
.lp-section > .lp-container { position: relative; z-index: 2; }

@media (max-width: 767px) { .lp-section { padding-block: var(--lp-space-7); } }

/* Decorative CA brand watermark. The Figma files layer this behind almost
   every section — it is a background element, never content, so it is
   aria-hidden in the markup and non-interactive here. */
.lp-brandmark {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  opacity: .05;
  mix-blend-mode: luminosity;
}
.lp-brandmark--right  { right: -18%; top: -6%;  width: 140%; max-width: none; }
.lp-brandmark--left   { left: -110%; top: -2%;  width: 150%; max-width: none; }
.lp-brandmark--hero   { right: -8%;  bottom: -10%; width: 68%; max-width: none; opacity: .07; }
@media (max-width: 991px) { .lp-brandmark { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .lp-page *,
  .lp-page *::before,
  .lp-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */

.lp-kicker {
  font-family: var(--lp-font-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ca-color-accent-default);
  margin: 0;
}

.lp-h1 {
  font-family: var(--lp-font-display);
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 66px);
  line-height: 1.04;
  letter-spacing: 0;
  color: var(--ca-color-text-primary);
  margin: 0;
}

.lp-h2 {
  font-family: var(--lp-font-display);
  font-weight: 700;
  font-size: clamp(32px, 3.9vw, 56px);
  line-height: 1;
  color: var(--ca-color-text-primary);
  margin: 0;
}

.lp-h3 {
  font-family: var(--lp-font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.08;
  color: var(--ca-color-text-primary);
  margin: 0;
}

.lp-h4 {
  font-family: var(--lp-font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1;
  color: var(--ca-color-text-primary);
  margin: 0;
}

.lp-body   { font-size: 17px; line-height: 24px; color: var(--ca-color-text-secondary); margin: 0; }
.lp-body--lead { font-size: 18px; line-height: 28px; }
.lp-body--sm   { font-size: 15px; line-height: 20px; }
.lp-body--xs   { font-size: 13px; line-height: 19px; }
.lp-body strong { color: var(--ca-color-text-primary); }

.lp-measure { max-width: 66ch; }

/* --------------------------------------------------------------------------
   5. Buttons — Figma 20:20 (primary) / 20:27 (secondary call)
   -------------------------------------------------------------------------- */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lp-space-2);
  min-height: var(--lp-touch);
  min-width: var(--lp-touch);
  padding: 13px 18px;
  border-radius: var(--lp-radius);
  border: 1px solid transparent;
  font-family: var(--lp-font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.lp-btn--primary {
  background: var(--ca-color-accent-default);
  color: var(--ca-color-bg-canvas);
}
.lp-btn--primary:hover,
.lp-btn--primary:focus-visible {
  background: var(--ca-color-focus);
  color: var(--ca-color-bg-canvas);
}

.lp-btn--call {
  background: transparent;
  border-color: var(--ca-color-accent-default);
  color: var(--ca-color-text-primary);
}
.lp-btn--call:hover {
  background: rgba(231, 169, 0, .12);
  color: var(--ca-color-text-primary);
}
.lp-btn--call:focus-visible {
  border-width: 2px;
  border-color: #f3f6f7;
}

.lp-btn--block { width: 100%; }

.lp-cta-group { display: flex; flex-wrap: wrap; gap: var(--lp-space-3); }

/* --------------------------------------------------------------------------
   6. Minimal header — Figma 20:12. Paid traffic: logo, call, one CTA.
      No site navigation by design.
   -------------------------------------------------------------------------- */

.lp-header {
  background: var(--ca-color-bg-canvas);
  border-bottom: 1px solid var(--ca-color-border-default);
}
.lp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lp-space-4);
  min-height: 92px;
  padding-block: var(--lp-space-4);
}
.lp-header__logo img { width: auto; height: 60px; }
.lp-header__actions { display: flex; align-items: center; gap: var(--lp-space-5); }
.lp-header__phone {
  font-weight: 700;
  font-size: 14px;
  color: var(--ca-color-text-secondary);
  white-space: nowrap;
}
.lp-header__phone:hover { color: var(--ca-color-accent-default); }

@media (max-width: 991px) {
  .lp-header__inner { min-height: 72px; }
  .lp-header__logo img { height: 44px; }
  .lp-header__phone { font-size: 12px; }
  .lp-header__actions .lp-btn--primary { display: none; }
}

/* --------------------------------------------------------------------------
   7. Sticky mobile action bar — Figma 20:77
   -------------------------------------------------------------------------- */

.lp-sticky-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: var(--ca-color-bg-canvas);
  border-top: 1px solid var(--ca-color-border-default);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.lp-sticky-bar .lp-btn { min-height: 48px; font-size: 12px; padding-inline: 12px; }
.lp-sticky-bar .lp-btn--call { flex: 0 0 38%; }
.lp-sticky-bar .lp-btn--primary { flex: 1 1 auto; }

@media (max-width: 991px) {
  .lp-sticky-bar { display: flex; }
  .lp-page--has-sticky { padding-bottom: 84px; }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.lp-hero { position: relative; overflow: hidden; background: var(--ca-color-bg-canvas); }
.lp-hero__bg { position: absolute; inset: 0; z-index: 0; }
.lp-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.lp-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(8, 12, 14, .96) 0%, rgba(8, 12, 14, .88) 42%, rgba(8, 12, 14, .62) 100%),
    linear-gradient(180deg, rgba(8, 12, 14, .60) 0%, rgba(8, 12, 14, .30) 45%, rgba(8, 12, 14, .92) 100%);
}
.lp-hero > .lp-container { position: relative; z-index: 3; padding-block: var(--lp-space-8); }

.lp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 660px) minmax(0, 500px);
  justify-content: space-between;
  gap: var(--lp-space-8);
  align-items: start;
}

.lp-hero__content > * + * { margin-top: var(--lp-space-5); }
.lp-hero__heading { max-width: 14ch; }
.lp-hero__body { max-width: 620px; }

@media (max-width: 1199px) {
  .lp-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: var(--lp-space-6); }
}
@media (max-width: 991px) {
  .lp-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .lp-hero__heading { max-width: none; }
}

/* --------------------------------------------------------------------------
   9. Content rows — trust checklist, technical pillar, capability,
      process step. One shared skeleton, Figma 20:39 / 20:45 / 20:51 / 20:57.
   -------------------------------------------------------------------------- */

.lp-rows { display: grid; gap: var(--lp-space-5); }
.lp-rows--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--lp-space-6); }
.lp-rows--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--lp-space-5); }
.lp-rows--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--lp-space-5); }

@media (max-width: 1199px) { .lp-rows--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px)  { .lp-rows--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .lp-rows--2, .lp-rows--3, .lp-rows--4 { grid-template-columns: minmax(0, 1fr); } }

.lp-row { display: flex; gap: 14px; align-items: flex-start; }
.lp-row__marker {
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--lp-radius-sm);
  background: var(--ca-color-bg-card);
  border: 1px solid var(--ca-color-accent-default);
  color: var(--ca-color-accent-default);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
}
.lp-row__title { font-weight: 700; font-size: 14px; line-height: 20px; color: var(--ca-color-text-primary); margin: 0; }
.lp-row__body  { font-size: 13px; line-height: 19px; color: var(--ca-color-text-secondary); margin: 4px 0 0; }

/* Inline tick list used inside the hero and support cards */
.lp-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-checklist li { position: relative; padding-left: 26px; font-size: 15px; line-height: 20px; color: var(--ca-color-text-secondary); }
.lp-checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 3px;
  width: 14px; height: 14px;
  background: var(--ca-color-accent-default);
  clip-path: polygon(14% 47%, 0 61%, 39% 100%, 100% 22%, 85% 8%, 37% 71%);
}

/* Card variant of a content row (technical pillars sit in cards on desktop) */
.lp-card {
  background: var(--ca-color-bg-card);
  border: 1px solid var(--ca-color-border-default);
  border-radius: var(--lp-radius-lg);
  padding: var(--lp-space-5);
  box-shadow: var(--lp-shadow-card);
}
.lp-card--elevated { background: var(--ca-color-bg-elevated); }
.lp-card > * + * { margin-top: var(--lp-space-3); }

/* --------------------------------------------------------------------------
   10. Trust bar
   -------------------------------------------------------------------------- */

.lp-trustbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lp-space-5);
  padding: var(--lp-space-5) 0;
  border-top: 1px solid var(--ca-color-border-default);
}
.lp-trustbar__label { font-weight: 700; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ca-color-accent-default); margin: 0; }
.lp-trustbar__value { font-size: 14px; line-height: 20px; color: var(--ca-color-text-secondary); margin: 6px 0 0; }
@media (max-width: 991px) { .lp-trustbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .lp-trustbar { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   11. Form — Figma 20:29 / 20:33 and the hero assessment card 24:27
   -------------------------------------------------------------------------- */

.lp-form {
  background: var(--ca-color-bg-card);
  border: 1px solid var(--ca-color-border-default);
  border-radius: var(--lp-radius-lg);
  padding: 28px;
  box-shadow: var(--lp-shadow-form);
}
.lp-form__heading { font-family: var(--lp-font-display); font-weight: 700; font-size: 28px; line-height: 1.08; margin: 0; }
.lp-form__intro   { font-size: 14px; line-height: 18px; color: var(--ca-color-text-secondary); margin: 10px 0 0; }
.lp-form__fields  { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lp-space-4); margin-top: var(--lp-space-5); }
.lp-form__field--full { grid-column: 1 / -1; }
.lp-form__note { font-size: 12px; line-height: 15px; color: var(--ca-color-text-secondary); margin: var(--lp-space-5) 0 0; }
.lp-form__disclaimer { font-size: 12px; line-height: 16px; color: var(--ca-color-text-secondary); margin: var(--lp-space-4) 0 0; }
.lp-form .lp-btn--primary { width: 100%; height: 50px; margin-top: var(--lp-space-3); }

@media (max-width: 479px) { .lp-form { padding: 20px; } .lp-form__fields { grid-template-columns: minmax(0, 1fr); } }

.lp-field { display: flex; flex-direction: column; gap: var(--lp-space-2); }
.lp-field > label { font-weight: 700; font-size: 12px; line-height: 15px; color: var(--ca-color-text-secondary); }

/* Contact Form 7 wraps every control in <span class="wpcf7-form-control-wrap">.
   Neutralise that wrapper so the control fills the field. */
.lp-field .wpcf7-form-control-wrap { display: block; width: 100%; }

.lp-page input[type="text"],
.lp-page input[type="tel"],
.lp-page input[type="email"],
.lp-page input[type="date"],
.lp-page textarea,
.lp-page select {
  width: 100%;
  min-height: 50px;
  padding: 14px;
  background: var(--ca-color-bg-card);
  border: 1px solid var(--ca-color-border-default);
  border-radius: var(--lp-radius);
  color: var(--ca-color-text-primary);
  font-family: var(--lp-font-body);
  font-size: 14px;
  line-height: 20px;
  appearance: none;
}
.lp-page textarea { min-height: 120px; resize: vertical; }

.lp-page input::placeholder,
.lp-page textarea::placeholder { color: var(--ca-color-text-secondary); opacity: 1; }

.lp-page select {
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ca-color-accent-default) 50%),
                    linear-gradient(135deg, var(--ca-color-accent-default) 50%, transparent 50%);
  background-position: right 20px center, right 14px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.lp-page input:focus,
.lp-page textarea:focus,
.lp-page select:focus {
  border-color: var(--ca-color-accent-default);
  outline: 2px solid var(--ca-color-focus);
  outline-offset: 1px;
}

/* CF7 response messages, restyled for the dark canvas */
.lp-page .wpcf7 form .wpcf7-response-output {
  margin: var(--lp-space-4) 0 0;
  padding: 12px 14px;
  border-radius: var(--lp-radius);
  border-width: 1px;
  font-size: 14px;
  line-height: 20px;
}
.lp-page .wpcf7 form.sent .wpcf7-response-output      { border-color: var(--ca-color-accent-default); color: var(--ca-color-text-primary); }
.lp-page .wpcf7 form.invalid .wpcf7-response-output,
.lp-page .wpcf7 form.failed .wpcf7-response-output    { border-color: #d8563f; color: #f6c6bc; }
.lp-page .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 12px; line-height: 16px; color: #f0a08e; }
.lp-page .wpcf7-spinner { margin-left: 10px; }

/* --------------------------------------------------------------------------
   12. FAQ accordion — Figma 20:73. Native <details> so it works without JS.
   -------------------------------------------------------------------------- */

.lp-faq { display: grid; gap: var(--lp-space-3); max-width: 900px; }

.lp-faq__item {
  background: var(--ca-color-bg-section);
  border: 1px solid var(--ca-color-border-default);
  border-radius: var(--lp-radius);
}
.lp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lp-space-4);
  min-height: 64px;
  padding: 20px;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--ca-color-text-primary);
  cursor: pointer;
  list-style: none;
}
.lp-faq__q::-webkit-details-marker { display: none; }
.lp-faq__q::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  color: var(--ca-color-accent-default);
}
.lp-faq__item[open] .lp-faq__q::after { content: "\2212"; }
.lp-faq__a {
  padding: 0 20px 20px;
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--ca-color-text-secondary);
}
.lp-faq__item[open] .lp-faq__q { padding-bottom: 12px; }

/* --------------------------------------------------------------------------
   13. Contact detail block — Figma 20:74
   -------------------------------------------------------------------------- */

.lp-contact { display: grid; gap: var(--lp-space-5); }
.lp-contact__label { font-weight: 700; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ca-color-accent-default); margin: 0; }
.lp-contact__value { font-weight: 700; font-size: 18px; line-height: 24px; color: var(--ca-color-text-primary); margin: 6px 0 0; }

/* --------------------------------------------------------------------------
   14. Media, figures and placeholders — Figma 20:82
   -------------------------------------------------------------------------- */

.lp-figure { margin: 0; }
.lp-figure img { width: 100%; border-radius: var(--lp-radius-lg); object-fit: cover; }
.lp-figure figcaption { margin-top: var(--lp-space-3); font-size: 13px; line-height: 18px; color: var(--ca-color-text-secondary); }

.lp-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--lp-space-4);
  min-height: 240px;
  background: var(--ca-color-bg-card);
  border: 1px dashed var(--ca-color-accent-default);
  border-radius: var(--lp-radius);
  color: var(--ca-color-accent-default);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}
.lp-placeholder--badge { min-height: 220px; aspect-ratio: 1; border-radius: 50%; }

/* Split feature: media one side, copy the other */
.lp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--lp-space-7);
  align-items: center;
}
.lp-split--media-first > .lp-split__media { order: -1; }
@media (max-width: 991px) { .lp-split { grid-template-columns: minmax(0, 1fr); gap: var(--lp-space-5); } }

/* Section intro block, used at the top of most sections */
.lp-intro { max-width: 900px; }
.lp-intro > * + * { margin-top: var(--lp-space-4); }
.lp-intro + * { margin-top: var(--lp-space-7); }

/* Callout / caveat strip */
.lp-callout {
  display: flex;
  gap: var(--lp-space-4);
  padding: 20px;
  background: var(--ca-color-bg-card);
  border: 1px solid var(--ca-color-border-default);
  border-left: 3px solid var(--ca-color-accent-default);
  border-radius: var(--lp-radius);
}
.lp-callout__label { flex: 0 0 auto; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--ca-color-accent-default); }
.lp-callout__body  { margin: 0; font-size: 14px; line-height: 22px; color: var(--ca-color-text-secondary); }
@media (max-width: 767px) { .lp-callout { flex-direction: column; gap: var(--lp-space-2); } }

/* --------------------------------------------------------------------------
   15. Final CTA and footer
   -------------------------------------------------------------------------- */

.lp-final { background: var(--ca-color-bg-canvas); border-top: 1px solid var(--ca-color-border-default); }
.lp-final__grid {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(0, 448px);
  justify-content: space-between;
  gap: var(--lp-space-8);
  align-items: start;
}
.lp-final__content > * + * { margin-top: var(--lp-space-5); }
@media (max-width: 991px) { .lp-final__grid { grid-template-columns: minmax(0, 1fr); gap: var(--lp-space-6); } }

.lp-footer {
  background: var(--ca-color-bg-canvas);
  border-top: 1px solid var(--ca-color-border-default);
  padding-block: var(--lp-space-5);
}
.lp-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--lp-space-4);
  font-size: 12px;
  line-height: 18px;
  color: var(--ca-color-text-secondary);
}
.lp-footer__links { display: flex; flex-wrap: wrap; gap: var(--lp-space-4); }

/* --------------------------------------------------------------------------
   16. Print — landing pages get printed by insurers and assessors more often
        than you would think.
   -------------------------------------------------------------------------- */

@media print {
  .lp-page { background: #fff; color: #000; }
  .lp-sticky-bar, .lp-brandmark, .lp-hero__bg, .lp-hero__overlay { display: none !important; }
  .lp-section { padding-block: 16px; }
}

/* --------------------------------------------------------------------------
   17. Additions after the first build pass
   Everything below came out of building the six pages against sections 1–16.
   -------------------------------------------------------------------------- */

/* Two-tone headings.
   Nearly every heading in the design splits mid-sentence: part accent, part
   primary. This is the single most-used thing in the whole design and it has
   no Figma component, because in Figma it is just a coloured text range. */
.lp-page .lp-accent { color: var(--ca-color-accent-default); }
.lp-page .lp-muted  { color: var(--ca-color-text-secondary); }

/* Whole-heading accent variants, used on card titles and callout headings. */
.lp-h3--accent,
.lp-h4--accent { color: var(--ca-color-accent-default); }

/* Generic vertical rhythm. Sibling blocks inside a section need consistent
   spacing without every partial inventing its own margins. */
.lp-stack     { display: grid; gap: var(--lp-space-7); }
.lp-stack--sm { gap: var(--lp-space-5); }
.lp-stack--lg { gap: var(--lp-space-8); }

/* Asymmetric splits. The Figma layouts are rarely 50/50 — a 220px badge
   against 800px of copy, 700/540 journey columns, 380/868 intake. */
.lp-split--media-narrow   { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
.lp-split--media-wide     { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.lp-split--copy-wide      { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.lp-split--badge          { grid-template-columns: 220px minmax(0, 1fr); gap: var(--lp-space-8); align-items: start; }
.lp-split--top            { align-items: start; }
@media (max-width: 991px) {
  .lp-split--media-narrow,
  .lp-split--media-wide,
  .lp-split--copy-wide,
  .lp-split--badge { grid-template-columns: minmax(0, 1fr); }
  .lp-split--badge { justify-items: start; }
}

/* Data table — the fleet reporting matrix and the policy comparison table.
   Scrolls inside its own wrapper so the page body never scrolls sideways. */
.lp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--lp-radius-lg); border: 1px solid var(--ca-color-border-default); }
.lp-table { width: 100%; min-width: 680px; border-collapse: collapse; background: var(--ca-color-bg-card); font-size: 14px; line-height: 20px; }
.lp-table th,
.lp-table td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ca-color-border-default); }
.lp-table thead th {
  background: var(--ca-color-bg-elevated);
  color: var(--ca-color-accent-default);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
}
.lp-table tbody th { color: var(--ca-color-text-primary); font-weight: 700; }
.lp-table td { color: var(--ca-color-text-secondary); }
.lp-table tbody tr:last-child th,
.lp-table tbody tr:last-child td { border-bottom: 0; }
.lp-table__script { font-style: italic; color: var(--ca-color-text-primary); }

/* Trust bar as a bordered card with dividers, which is what the Figma shows.
   The plain border-top version stays available as .lp-trustbar--plain. */
.lp-trustbar {
  border: 1px solid var(--ca-color-border-default);
  border-radius: var(--lp-radius-lg);
  background: rgba(21, 33, 38, .72);
  padding: var(--lp-space-5) var(--lp-space-6);
  gap: 0;
}
.lp-trustbar > * { padding-inline: var(--lp-space-5); border-left: 1px solid var(--ca-color-border-default); }
.lp-trustbar > *:first-child { padding-left: 0; border-left: 0; }
.lp-trustbar--plain { border: 0; border-top: 1px solid var(--ca-color-border-default); border-radius: 0; background: none; padding-inline: 0; gap: var(--lp-space-5); }
.lp-trustbar--plain > * { padding-inline: 0; border-left: 0; }
@media (max-width: 991px) {
  .lp-trustbar { padding: var(--lp-space-4); row-gap: var(--lp-space-4); }
  .lp-trustbar > * { padding-inline: var(--lp-space-3); }
  .lp-trustbar > *:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 479px) {
  .lp-trustbar > * { padding-inline: 0; border-left: 0; padding-bottom: var(--lp-space-3); border-bottom: 1px solid var(--ca-color-border-default); }
  .lp-trustbar > *:last-child { padding-bottom: 0; border-bottom: 0; }
}

/* Figures: fixed aspect and an overlaid caption for the media cards that
   put a title over a gradient rather than a caption underneath. */
.lp-figure--portrait img { aspect-ratio: 260 / 417; }
.lp-figure--landscape img { aspect-ratio: 16 / 10; }
.lp-figure--square img { aspect-ratio: 1; }

.lp-figure--overlay { position: relative; border-radius: var(--lp-radius-lg); overflow: hidden; }
.lp-figure--overlay figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  margin: 0;
  padding: var(--lp-space-6) var(--lp-space-5) var(--lp-space-5);
  background: linear-gradient(180deg, rgba(8, 12, 14, 0) 0%, rgba(8, 12, 14, .92) 100%);
  color: var(--ca-color-text-primary);
}
.lp-figure--overlay .lp-figure__title { font-family: var(--lp-font-display); font-weight: 700; font-size: 21px; line-height: 1.1; margin: 0; }
.lp-figure--overlay .lp-figure__sub { font-size: 13px; line-height: 19px; color: var(--ca-color-text-secondary); margin: 6px 0 0; }

/* Pairs of portrait figures, e.g. before / after */
.lp-figure-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lp-space-4); }

/* --------------------------------------------------------------------------
   18. Additions after the second build pass
   -------------------------------------------------------------------------- */

/* Figure captions with a title and a subtitle, whether or not the caption is
   overlaid on the image. Several sections use a two-line caption beneath. */
.lp-figure__title { font-family: var(--lp-font-display); font-weight: 700; font-size: 18px; line-height: 1.15; color: var(--ca-color-text-primary); margin: 0; }
.lp-figure__sub   { font-size: 13px; line-height: 19px; color: var(--ca-color-text-secondary); margin: 6px 0 0; }
.lp-figure--overlay .lp-figure__title { font-size: 21px; line-height: 1.1; }

/* Three-up media grid — the "protect your investment" evidence triptych.
   .lp-figure-pair handles two; this handles three. */
.lp-figure-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lp-space-4); }
@media (max-width: 767px) {
  .lp-figure-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-figure-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .lp-figure-trio, .lp-figure-pair { grid-template-columns: minmax(0, 1fr); }
}

/* Standalone badge block, for the pages that place the approval badge on its
   own rather than beside the section intro. */
.lp-badge-block { max-width: 220px; }

/* The badge placeholder is a circle by default (Tesla's supplied badge is
   round). BYD, Zeekr and Lexus draw a rounded rectangle, so allow both. */
.lp-placeholder--badge-rect { min-height: 220px; aspect-ratio: 406 / 220; border-radius: var(--lp-radius-lg); }

/* The circular badge placeholder must not stretch to fill its column —
   the supplied Tesla badge is 220px and the placeholder should match it. */
.lp-placeholder--badge { width: 220px; max-width: 100%; min-height: 0; }
.lp-placeholder--badge-rect { width: 406px; max-width: 100%; }

/* --------------------------------------------------------------------------
   19. Spacing and sticky header revisions
   From review on staging: blocks inside a section were butting into each
   other, the gap between sections was too large, and the header needed to
   stick with click-to-call always reachable.
   -------------------------------------------------------------------------- */

/* Sections were 96px top and bottom, so 192px of dead space between segments.
   64px each gives 128px, which reads as a break without a chasm. */
.lp-section { padding-block: 64px; }
@media (max-width: 991px) { .lp-section { padding-block: 44px; } }
@media (max-width: 767px) { .lp-section { padding-block: 36px; } }

/* The real fix: every top-level block inside a section is separated from the
   one before it. Previously only .lp-intro had a following margin, so a card
   grid sitting directly above a figure or a kicker had no gap at all. */
.lp-section > .lp-container > * + *,
.lp-hero    > .lp-container > * + *,
.lp-final   > .lp-container > * + * { margin-top: var(--lp-space-7); }

/* .lp-intro already declared the same 48px; keep the two in step. */
.lp-intro + * { margin-top: var(--lp-space-7); }

/* The Figma puts ~48px between a section kicker and what follows, which the
   general rule above already gives. No special case needed. */

/* Card grids need a little more air beneath them than beside them, because
   the card border already does the separating horizontally. */
.lp-rows + *, .lp-split + *, .lp-table-wrap + *, .lp-figure-pair + *, .lp-figure-trio + * {
  margin-top: var(--lp-space-8);
}

/* Hero keeps its own rhythm — it is denser by design. */
.lp-hero > .lp-container { padding-block: 56px; }
@media (max-width: 991px) { .lp-hero > .lp-container { padding-block: 36px; } }

/* --------------------------------------------------------------------------
   Sticky header with click-to-call
   -------------------------------------------------------------------------- */

.lp-header {
  position: sticky;
  top: 0;
  z-index: 70;
  /* Solid, not translucent: content scrolls underneath it. */
  background: var(--ca-color-bg-canvas);
}

/* The WordPress admin bar is fixed at the top for logged-in users, so the
   sticky header has to sit below it or it hides behind. */
.admin-bar .lp-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .lp-header { top: 46px; } }

/* A shorter header once stuck, so it costs less of the viewport. */
.lp-header__inner { min-height: 72px; }
.lp-header__logo img { height: 48px; }
@media (max-width: 991px) {
  .lp-header__inner { min-height: 64px; }
  .lp-header__logo img { height: 38px; }
}

/* Click-to-call is now a real button in the header and never hidden. */
.lp-header__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-space-2);
  min-height: var(--lp-touch);
  padding: 10px 16px;
  border: 1px solid var(--ca-color-accent-default);
  border-radius: var(--lp-radius);
  color: var(--ca-color-text-primary);
  transition: background-color .18s ease;
}
.lp-header__phone:hover { background: rgba(231, 169, 0, .12); color: var(--ca-color-text-primary); }

@media (max-width: 991px) {
  .lp-header__actions { gap: var(--lp-space-3); }
  .lp-header__phone { padding: 8px 12px; font-size: 13px; }
  /* The primary CTA still hides on mobile — the sticky bottom bar carries it. */
}
@media (max-width: 400px) {
  .lp-header__phone { padding: 8px 10px; font-size: 12px; }
}

/* Anchored jumps must clear the sticky header. */
.lp-page [id] { scroll-margin-top: 96px; }
.admin-bar.lp-page [id] { scroll-margin-top: 128px; }


/* --------------------------------------------------------------------------
   20. File upload fields
   Contact Form 7's [file] renders a native input, which arrives as a white
   browser-default control in the middle of a dark form. Styled to match.
   -------------------------------------------------------------------------- */

.lp-page input[type="file"] {
  width: 100%;
  padding: 10px 12px;
  background: var(--ca-color-bg-elevated);
  border: 1px dashed var(--ca-color-border-default);
  border-radius: var(--lp-radius);
  color: var(--ca-color-text-secondary);
  font-family: var(--lp-font-body);
  font-size: 13px;
  line-height: 20px;
  cursor: pointer;
}
.lp-page input[type="file"]:hover { border-color: var(--ca-color-accent-default); }
.lp-page input[type="file"]:focus {
  border-color: var(--ca-color-accent-default);
  outline: 2px solid var(--ca-color-focus);
  outline-offset: 1px;
}
.lp-page input[type="file"] + input[type="file"] { margin-top: var(--lp-space-2); }

.lp-page input[type="file"]::file-selector-button {
  margin-right: var(--lp-space-3);
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--ca-color-accent-default);
  border-radius: var(--lp-radius-sm);
  color: var(--ca-color-accent-default);
  font-family: var(--lp-font-body);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.lp-page input[type="file"]::file-selector-button:hover {
  background: rgba(231, 169, 0, .12);
}

/* CF7 wraps every control in a list-item span; neutralise its default margin. */
.lp-page .wpcf7-list-item { margin: 0; }
.lp-page .lp-cf7 .lp-form__note { margin-top: var(--lp-space-2); display: block; }

/* --------------------------------------------------------------------------
   21. Split media sizing
   Feedback: figures in a two-column split were far taller than the copy beside
   them, leaving the text stranded at the top of a huge image. The media column
   now matches the height of the text it sits next to and is capped, so the
   copy sets the rhythm rather than the photograph.
   -------------------------------------------------------------------------- */

.lp-split { align-items: stretch; }
.lp-split > * { min-width: 0; }

.lp-split__media {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}
.lp-split__media > .lp-figure { height: 100%; display: flex; flex-direction: column; }
.lp-split__media > .lp-figure > img,
.lp-split__media > img {
  height: 100%;
  max-height: 400px;
  object-fit: cover;
}
.lp-split__media > .lp-placeholder {
  height: 100%;
  min-height: 200px;
  max-height: 400px;
}

/* Stacked on smaller screens the image no longer has a text column to match,
   so give it a sensible fixed band instead. */
@media (max-width: 991px) {
  .lp-split { align-items: start; }
  .lp-split__media > .lp-figure > img,
  .lp-split__media > img,
  .lp-split__media > .lp-placeholder { height: auto; max-height: 300px; }
}

/* --------------------------------------------------------------------------
   22. Form legibility, single line photo row, badge artwork
   Review on staging, 4 September.
   - The form heading rendered near black on the dark card: it never set a
     colour of its own, so it inherited the parent theme's heading colour.
   - The manufacturer approval badge could not be seen. It is dark artwork on
     a transparent ground, and it was also inheriting the circular placeholder
     shape and the block 21 cover crop.
   - The three photo inputs stacked, which pushed the trust strip below the
     fold. They now share one row.
   -------------------------------------------------------------------------- */

.lp-page .lp-form__heading { color: var(--ca-color-text-primary); }

/* The note promising a later upload step is obsolete now the form takes the
   photos itself. Hidden here rather than removed from six partials. */
.lp-page .lp-form > .lp-form__note { display: none; }

/* Three photo tiles across. Contact Form 7 emits the three [file] controls as
   siblings inside one paragraph, so the paragraph becomes the grid. */
.lp-page .lp-cf7 .lp-field:has(input[type="file"]) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lp-space-2);
  align-items: center;
}
.lp-page .lp-cf7 .lp-field:has(input[type="file"]) > label,
.lp-page .lp-cf7 .lp-field:has(input[type="file"]) > .lp-form__note {
  grid-column: 1 / -1;
}
.lp-page .lp-cf7 .lp-field:has(input[type="file"]) > .wpcf7-form-control-wrap {
  display: block;
  min-width: 0;
}

/* At a third of the card there is no room for the browser's "no file chosen"
   text beside the button, so the tile is the button. The chosen file name is
   written back underneath by offer-landing.js. */
.lp-page .lp-cf7 .lp-field:has(input[type="file"]) input[type="file"] {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
.lp-page .lp-cf7 .lp-field:has(input[type="file"]) input[type="file"]::file-selector-button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 11px 4px;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  border-style: dashed;
}
.lp-page .lp-cf7 input[type="file"][data-lp-filled]::file-selector-button {
  border-style: solid;
  background: rgba(231, 169, 0, .14);
}

.lp-file-name {
  display: block;
  margin-top: 6px;
  font-family: var(--lp-font-body);
  font-size: 11px;
  line-height: 1.3;
  color: var(--ca-color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The badge is dark ink on a transparent ground. A light plate makes it
   legible, and the fixed height keeps the plate the same on every page
   whatever the artwork's proportions. The rules on .lp-placeholder--badge
   were written for the placeholder box, so an image has to opt out of the
   circle, the minimum height and the block 21 cover crop. */
.lp-split__media > img.lp-placeholder--badge {
  align-self: center;
  width: 100%;
  max-width: 360px;
  height: 136px;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: var(--lp-radius-lg);
  background: var(--ca-color-text-primary);
  border: 1px solid var(--ca-color-border-default);
  padding: 16px 24px;
}
@media (max-width: 991px) {
  .lp-split__media > img.lp-placeholder--badge { height: 120px; }
}


/* --------------------------------------------------------------------------
   23. Manufacturer marks
   Two different kinds of artwork land in the same slot. The Tesla approved
   body shop badge is dark ink on a transparent ground and needs a light plate
   to be legible. The BYD, Lexus and Zeekr marks supplied from Figma are gold
   on transparent and read correctly on the section colour, so they get no
   plate. Everything else about the sizing is shared.
   -------------------------------------------------------------------------- */

.lp-split__media > img.lp-placeholder--badge {
  background: none;
  border: 0;
  padding: 0;
  height: 104px;
  max-width: 320px;
  object-position: center;
}

.lp-page--tesla-approved-body-shop-melbourne .lp-split__media > img.lp-placeholder--badge {
  height: 136px;
  max-width: 360px;
  padding: 16px 24px;
  background: var(--ca-color-text-primary);
  border: 1px solid var(--ca-color-border-default);
}

@media (max-width: 991px) {
  .lp-split__media > img.lp-placeholder--badge { height: 88px; }
  .lp-page--tesla-approved-body-shop-melbourne .lp-split__media > img.lp-placeholder--badge { height: 120px; }
}


/* --------------------------------------------------------------------------
   24. Assessment modal
   The sticky header, the mobile quick-action bar and the in-page calls to
   action all point at the hero form. Scrolling the visitor back to the top is
   a poor answer once they are halfway down, so those triggers now lift the
   existing form into a dialog. There is only ever one form on the page: the
   script moves the real node in and out and leaves a placeholder of the same
   height behind it, so nothing reflows underneath.
   -------------------------------------------------------------------------- */

.lp-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ca-color-text-primary);
  overflow: visible;
}
.lp-modal::backdrop { background: rgba(4, 8, 10, .82); }

.lp-modal .lp-form {
  margin: 0;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lp-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--ca-color-text-secondary);
  background: var(--ca-color-bg-elevated);
  border: 1px solid var(--ca-color-border-default);
  border-radius: 50%;
  cursor: pointer;
}
.lp-modal__close:hover {
  color: var(--ca-color-text-primary);
  border-color: var(--ca-color-accent-default);
}
.lp-modal__close:focus-visible { outline: 2px solid var(--ca-color-focus); outline-offset: 2px; }

.lp-form-placeholder { display: block; }

html.lp-modal-open, html.lp-modal-open body { overflow: hidden; }

@media (max-width: 479px) {
  .lp-modal { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .lp-modal .lp-form { max-height: calc(100dvh - 16px); padding: 20px; }
  .lp-modal .lp-form__heading { padding-right: 40px; }
}


/* --------------------------------------------------------------------------
   25. All four marks now come from Figma
   The Tesla approved body shop badge has been replaced by the supplied Tesla
   mark, so no page needs the light plate any more. The Tesla mark is portrait
   where the other three are wordmarks, so it keeps its own height.
   -------------------------------------------------------------------------- */

.lp-page--tesla-approved-body-shop-melbourne .lp-split__media > img.lp-placeholder--badge {
  height: 168px;
  max-width: 200px;
  padding: 0;
  background: none;
  border: 0;
}

@media (max-width: 991px) {
  .lp-page--tesla-approved-body-shop-melbourne .lp-split__media > img.lp-placeholder--badge { height: 132px; }
}


/* --------------------------------------------------------------------------
   26. Manufacturer marks, larger
   Review, 4 September: the marks read as too small against the heading beside
   them. Roughly a quarter up on each axis, still comfortably inside the media
   column at every width.
   -------------------------------------------------------------------------- */

.lp-split__media > img.lp-placeholder--badge {
  height: 132px;
  max-width: 400px;
}

.lp-page--tesla-approved-body-shop-melbourne .lp-split__media > img.lp-placeholder--badge {
  height: 210px;
  max-width: 250px;
}

@media (max-width: 991px) {
  .lp-split__media > img.lp-placeholder--badge { height: 108px; }
  .lp-page--tesla-approved-body-shop-melbourne .lp-split__media > img.lp-placeholder--badge { height: 160px; }
}


/* --------------------------------------------------------------------------
   27. The client logo
   The header carried the words "CA Autobody" as a placeholder. It now carries
   the mark the main site uses (wp-content/uploads/2021/05/logo.png, a brass
   monogram over the wordmark, transparent, so it sits on the dark bar as is).
   The file is only 119px wide, so it is shown near its natural size — pushing
   it larger would soften the wordmark underneath the monogram.
   -------------------------------------------------------------------------- */

.lp-header__logo img { height: 64px; width: auto; }
.lp-header__logo a { display: inline-flex; align-items: center; }

@media (max-width: 767px) {
  .lp-header__logo img { height: 52px; }
}
@media (max-width: 479px) {
  .lp-header__logo img { height: 44px; }
}

/* Anchored jumps clear the taller bar. */
.lp-page [id] { scroll-margin-top: 112px; }
.admin-bar.lp-page [id] { scroll-margin-top: 144px; }


/* --------------------------------------------------------------------------
   28. Mobile pass
   Audited at 320, 375, 390 and 768 wide, and in landscape. Nothing overflowed,
   so this is about how much of a small screen the page spends on itself:
   - the trust strip was four full-width cards, 320px of a 660px screen
   - the sticky header and the quick-action bar together held 156px, which is
     tolerable upright and much too much in landscape
   - the display size held at 38px right down to 320, where it crowds
   -------------------------------------------------------------------------- */

/* 28.1 Trust strip two up. Below 360 the cells get too narrow to read, so the
   single column stays there. */
@media (min-width: 360px) and (max-width: 767px) {
  .lp-trustbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--lp-space-4);
    row-gap: var(--lp-space-5);
  }
  .lp-trustbar > * { min-width: 0; }
}

/* 28.2 A shorter bar. The logo and the padding were sized for the desktop
   header; on a phone they were holding 83px of a sticky element. */
@media (max-width: 767px) {
  .lp-header__inner { padding-block: 12px; }
  .lp-header__phone { min-height: 40px; }
}
@media (max-width: 479px) {
  .lp-header__logo img { height: 40px; }
  .lp-header__inner { padding-block: 10px; }
}

/* 28.3 The display face steps down on the narrowest screens, where 38px left
   two or three words to the line. */
@media (max-width: 359px) {
  .lp-h1 { font-size: 32px; }
  .lp-h2 { font-size: 27px; }
  .lp-container { padding-inline: 16px; }
}

/* 28.4 Landscape phones. A viewport shorter than it is wide cannot afford
   156px of fixed chrome, so the header scrolls away and the quick-action bar
   slims down. */
@media (max-width: 991px) and (max-height: 460px) and (orientation: landscape) {
  .lp-header { position: static; }
  .lp-header__inner { padding-block: 10px; }
  .lp-header__logo img { height: 34px; }
  .lp-sticky-bar { padding-block: 8px; }
  .lp-sticky-bar .lp-btn { height: 40px; }
  .lp-page [id] { scroll-margin-top: 16px; }
}


/* --------------------------------------------------------------------------
   29. Checklist spacing
   Found during the mobile audit, but it was wrong at every width: each child of
   the hero copy column picks up a 24px gap except the tick list, which sat at
   zero and ran straight into the paragraph above it. The list is used further
   down the pages too, so the rule is global with a guard for the case where it
   opens a block.
   -------------------------------------------------------------------------- */

.lp-checklist { margin-top: var(--lp-space-5); }
.lp-checklist:first-child { margin-top: 0; }


/* --------------------------------------------------------------------------
   30. Google reviews
   The rating badge and the featured quote are ours; the strip underneath is
   the Trustindex widget (Slider I., "Light contrast"), the same one used on
   Roof Guard, which pulls from CA Autobody's Google profile. The widget brings
   its own stylesheet, so this only sets the frame around it.
   -------------------------------------------------------------------------- */

.lp-reviews__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--lp-space-5);
}
.lp-reviews__head .lp-h2 { flex: 1 1 320px; }

.lp-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-space-4);
  margin: 0;
  padding: 14px 20px;
  background: var(--ca-color-bg-card);
  border: 1px solid var(--ca-color-border-default);
  border-radius: var(--lp-radius-lg);
}
.lp-rating__score {
  font-family: var(--lp-font-display);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  color: var(--ca-color-text-primary);
}
.lp-rating__stars {
  color: var(--ca-color-accent-default);
  font-size: 17px;
  letter-spacing: 2px;
}
.lp-rating__meta {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ca-color-text-secondary);
}
.lp-rating__meta strong { color: var(--ca-color-text-primary); font-size: 14px; }

/* The one review chosen for this page. */
.lp-review {
  margin: 0;
  padding: var(--lp-space-6);
  background: var(--ca-color-bg-card);
  border: 1px solid var(--ca-color-border-default);
  border-left: 3px solid var(--ca-color-accent-default);
  border-radius: var(--lp-radius-lg);
}
.lp-review__stars {
  display: block;
  color: var(--ca-color-accent-default);
  font-size: 15px;
  letter-spacing: 3px;
}
.lp-review__quote {
  margin: var(--lp-space-4) 0 0;
  font-family: var(--lp-font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ca-color-text-primary);
}
.lp-review__by {
  display: flex;
  align-items: center;
  gap: var(--lp-space-3);
  margin-top: var(--lp-space-4);
  font-size: 13px;
  color: var(--ca-color-text-secondary);
}
.lp-review__name { font-weight: 700; color: var(--ca-color-text-primary); }
.lp-review__src::before { content: "·"; margin-right: var(--lp-space-3); }

.lp-reviews__feed { min-height: 240px; }

/* Trustindex ships a floating rating badge site wide. These pages carry the
   rating in the section above, and on a phone the badge lands on top of the
   quick-action bar, so it is hidden here only. */
body.lp-page > .trustindex-widget { display: none !important; }

@media (max-width: 767px) {
  .lp-rating { width: 100%; }
  .lp-review__quote { font-size: 16px; }
  .lp-review { padding: var(--lp-space-5); }
}