/*
 * Landing page "Designers & Contractors" (page-landing-designers.php).
 * Plain CSS, NOT part of the Tailwind build. Loaded after main.min.css; the
 * page uses the standard site header/footer, so fonts (Inter @font-face) and
 * the base reset come from main.css. Colours follow the site palette:
 * primary #1162d4 (tailwind.config.js) + Tailwind slate greys.
 * Everything is scoped under .mb-lp.
 */

.mb-lp {
  --lp-primary: #1162d4;
  --lp-primary-hover: #0f56bb;
  --lp-primary-soft: #e7effb;
  --lp-on-primary: rgba(255, 255, 255, 0.86);
  --lp-on-primary-muted: rgba(255, 255, 255, 0.72);
  --lp-paper: #f6f7f8;
  --lp-soft: #eef2f7;
  --lp-white: #ffffff;
  --lp-ink: #0f172a;
  --lp-text: #475569;
  --lp-muted: #64748b;
  --lp-line: #e2e8f0;
  --lp-error-on-primary: #ffe2dc;
  --lp-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lp-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, Menlo, monospace;
  --lp-wrap: 1200px;
  --lp-gutter: 24px;

  background: var(--lp-paper);
  color: var(--lp-text);
  font-family: var(--lp-sans);
  font-size: 17px;
  line-height: 1.6;
}

/* ---------- Local reset ----------
 * :where() keeps it at zero class specificity so it never overrides the
 * component rules below. */
:where(.mb-lp) *,
:where(.mb-lp) *::before,
:where(.mb-lp) *::after {
  box-sizing: border-box;
}

:where(.mb-lp) :where(h1, h2, h3, p, dl, dd, ol, figure, blockquote) {
  margin: 0;
}

:where(.mb-lp) ol {
  padding: 0;
  list-style: none;
}

:where(.mb-lp) img {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(.mb-lp) a {
  color: inherit;
}

.mb-lp a[href^='tel:'] {
  white-space: nowrap;
}

.mb-lp :focus-visible {
  outline: 2px solid var(--lp-primary);
  outline-offset: 3px;
}

.mb-lp-section--primary :focus-visible {
  outline-color: #fff;
}

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

/* ---------- Type ---------- */
.mb-lp-eyebrow {
  margin-bottom: 14px;
  font-family: var(--lp-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--lp-primary);
}

.mb-lp-eyebrow--light {
  color: var(--lp-on-primary-muted);
}

.mb-lp-h2 {
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--lp-ink);
}

/* Homepage section heading: text-3xl font-bold (front-page.php "What we do"). */
.mb-lp .mb-lp-h2--home {
  max-width: 780px;
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.mb-lp-h2--narrow {
  max-width: 760px;
}

.mb-lp h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--lp-ink);
}

/* ---------- Buttons ---------- */
.mb-lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 28px;
  border: 2px solid transparent;
  border-radius: 0;
  font-family: var(--lp-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Filled primary button (hero). Class name kept from the first draft. */
.mb-lp .mb-lp-btn--navy {
  background: var(--lp-primary);
  color: #fff;
}

.mb-lp .mb-lp-btn--navy:hover {
  background: var(--lp-primary-hover);
}

.mb-lp .mb-lp-btn--outline {
  border-color: var(--lp-primary);
  color: var(--lp-primary);
  background: transparent;
}

.mb-lp .mb-lp-btn--outline:hover {
  background: var(--lp-primary);
  color: #fff;
}

/* White button on the blue quote section (CF7 submit carries this class). */
.mb-lp .mb-lp-btn--mint {
  background: #fff;
  color: var(--lp-primary);
}

.mb-lp .mb-lp-btn--mint:hover {
  background: var(--lp-primary-soft);
}

/* ---------- Hero ---------- */
.mb-lp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 72px 0 72px;
}

/* Technical grid + soft radial accents — same as the homepage hero. */
.mb-lp-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(52rem 30rem at 82% -10%, rgba(17, 98, 212, 0.09), transparent 60%),
    radial-gradient(40rem 26rem at -12% 108%, rgba(17, 98, 212, 0.05), transparent 60%),
    linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
  background-size: auto, auto, 56px 56px, 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
}

.mb-lp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  align-items: center;
  gap: 56px;
}

/* Hero copy — homepage hero styles (front-page.php):
   font-black title with a blue lead phrase, text-lg/xl slate-600 lead,
   rounded-xl CTA with soft primary shadow, stats bar with dividers. */
.mb-lp-hero .mb-lp-eyebrow,
.mb-lp .mb-lp-eyebrow--home {
  margin-bottom: 20px;
  font-family: var(--lp-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--lp-primary);
}

.mb-lp-hero__title {
  max-width: 680px;
  font-size: clamp(38px, 4.4vw, 60px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--lp-ink);
}

.mb-lp-hero__accent {
  color: var(--lp-primary);
}

.mb-lp-hero__lead {
  max-width: 600px;
  margin-top: 28px;
  font-size: 19px;
  line-height: 1.625;
  color: #475569;
}

.mb-lp-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
  margin-top: 32px;
}

.mb-lp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 60px;
  padding: 12px 30px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition:
    transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
    color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mb-lp a.mb-lp-cta--primary {
  background: var(--lp-primary);
  color: #fff;
  box-shadow: 0 10px 15px -3px rgba(17, 98, 212, 0.2), 0 4px 6px -4px rgba(17, 98, 212, 0.18);
}

.mb-lp a.mb-lp-cta--primary:hover {
  background: var(--lp-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(17, 98, 212, 0.45);
}

.mb-lp a.mb-lp-cta--ghost {
  border-color: #e2e8f0;
  background: #fff;
  color: var(--lp-ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.mb-lp a.mb-lp-cta--ghost .material-symbols-outlined {
  font-size: 20px;
  color: var(--lp-primary);
}

.mb-lp a.mb-lp-cta--ghost:hover {
  border-color: var(--lp-primary);
  color: var(--lp-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(17, 98, 212, 0.35);
}

.mb-lp a.mb-lp-cta:active {
  transform: translateY(0);
}

/* Stats bar: global .stats-bar/.stat-* classes from main.css + the
   homepage-only polish (border-top, gradient dividers, hover colour). */
.mb-lp-stats {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid #e2e8f0;
}

.mb-lp-stats {
  align-items: flex-start;
}

.mb-lp-stats .stat-item {
  padding: 0 14px;
}

/* Longer labels than the homepage ("Architecture & engineering") — let
   them wrap so the bar stays one row next to the carousel. */
.mb-lp-stats .stat-label {
  max-width: 150px;
  line-height: 1.4;
  white-space: normal;
}

.mb-lp-stats .stat-divider {
  align-self: center;
}

.mb-lp-stats .stat-item:first-child {
  padding-left: 0;
}

.mb-lp-stats .stat-item:last-child {
  padding-right: 0;
}

.mb-lp-stats .stat-value {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease;
}

.mb-lp-stats .stat-item:hover .stat-value {
  color: var(--lp-primary);
}

.mb-lp-stats .stat-divider {
  background: linear-gradient(to bottom, transparent, #cbd5e1 25%, #cbd5e1 75%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .mb-lp-cta {
    transition: none;
  }

  .mb-lp a.mb-lp-cta:hover {
    transform: none;
  }
}

/* ---------- Sections ---------- */
.mb-lp-section {
  padding: 88px 0;
}

.mb-lp-section--primary {
  background: var(--lp-primary);
  color: var(--lp-on-primary);
}

.mb-lp-section--primary .mb-lp-h2,
.mb-lp-section--primary h3 {
  color: #fff;
}

.mb-lp-section--soft {
  background: var(--lp-soft);
}

.mb-lp-section--white {
  background: var(--lp-white);
}

/* Workflow */
.mb-lp-workflow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.mb-lp-workflow .mb-lp-feature {
  padding: 32px;
}

.mb-lp-workflow .mb-lp-feature p {
  font-size: 15px;
}

/* Deliverable cards — homepage "Tailored Solutions for Your Industry"
   (bg-slate-50 p-10 rounded-2xl border-t-4 border-primary + mb-industry-card
   shadow/hover). White cards here because the section sits on the light grey
   page background. */
.mb-lp-section-head--center {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.mb-lp-section-head--center .mb-lp-h2--home {
  margin-right: auto;
  margin-left: auto;
}

.mb-lp-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 56px;
}

.mb-lp-card {
  padding: 36px 36px 40px;
  border-top: 4px solid var(--lp-primary);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.12);
  transition:
    transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mb-lp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 20px 40px -16px rgba(17, 98, 212, 0.22);
}

.mb-lp-card__num {
  display: block;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--lp-primary);
}

.mb-lp .mb-lp-card h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.mb-lp-card p {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.7;
  color: #475569;
}

@media (prefers-reduced-motion: reduce) {
  .mb-lp-card {
    transition: none;
  }

  .mb-lp-card:hover {
    transform: none;
  }
}

/* Feature cards (Our workflow + How it works) — homepage "What we do" cards
   (p-8 bg-slate-50 rounded-2xl border-slate-100 + mb-feature-card polish). */
/* 3 cards on top, 2 centred below: a 6-column grid where every card spans
   2 columns and the 4th card starts at column 2. */
.mb-lp-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.mb-lp-steps > .mb-lp-feature {
  grid-column: span 2;
  padding: 32px;
}

.mb-lp-steps > .mb-lp-feature:nth-child(4) {
  grid-column: 2 / span 2;
}

.mb-lp-feature {
  position: relative;
  overflow: hidden;
  padding: 28px 24px 30px;
  border: 1px solid #f1f5f9;
  border-radius: 16px;
  background: #f8fafc;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.12);
  transition:
    transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mb-lp-feature::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--lp-primary), rgba(17, 98, 212, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mb-lp-feature:hover {
  transform: translateY(-4px);
  border-color: rgba(17, 98, 212, 0.28);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 20px 40px -16px rgba(17, 98, 212, 0.22);
}

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

.mb-lp-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border: 1px solid rgba(17, 98, 212, 0.14);
  border-radius: 14px;
  background: rgba(17, 98, 212, 0.09);
  color: var(--lp-primary);
  font-size: 26px;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.mb-lp-feature:hover .mb-lp-feature__icon {
  border-color: rgba(17, 98, 212, 0.3);
  background: rgba(17, 98, 212, 0.14);
}

.mb-lp-step__num {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lp-primary);
}

.mb-lp .mb-lp-feature h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.mb-lp-feature p {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--lp-muted);
}

@media (prefers-reduced-motion: reduce) {
  .mb-lp-feature,
  .mb-lp-feature::before {
    transition: none;
  }

  .mb-lp-feature:hover {
    transform: none;
  }
}

/* ---------- Shared motion (homepage values) ---------- */
.mb-lp {
  --lp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --lp-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.12);
  --lp-shadow-card-hover: 0 2px 4px rgba(15, 23, 42, 0.05), 0 20px 40px -16px rgba(17, 98, 212, 0.22);
}

/* ---------- Hero carousel (homepage media frame style) ---------- */
.mb-lp-carousel {
  margin: 0;
}

.mb-lp-carousel__frame {
  position: relative;
  overflow: hidden;
  border: 8px solid #fff;
  border-radius: 16px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.06),
    0 24px 60px -24px rgba(15, 23, 42, 0.35),
    0 10px 30px -14px rgba(17, 98, 212, 0.2);
}

.mb-lp-carousel__track {
  position: relative;
  aspect-ratio: 960 / 770;
  background: #fff;
}

.mb-lp-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.025);
  transition: opacity 0.7s var(--lp-ease), transform 1.2s var(--lp-ease), visibility 0s linear 0.7s;
}

.mb-lp-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.7s var(--lp-ease), transform 1.2s var(--lp-ease), visibility 0s;
}

.mb-lp-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mb-lp-carousel__chip {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  padding: 7px 14px 7px 12px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.35);
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mb-lp-carousel__chip::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lp-primary);
  box-shadow: 0 0 0 3px rgba(17, 98, 212, 0.18);
}

.mb-lp-carousel__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 3px;
  background: rgba(17, 98, 212, 0.1);
}

.mb-lp-carousel__progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(17, 98, 212, 0.6), var(--lp-primary));
  transform: scaleX(0);
  transform-origin: left;
}

.mb-lp-carousel.is-playing .mb-lp-carousel__progress span {
  animation: mb-lp-progress 5s linear forwards;
}

.mb-lp-carousel:hover .mb-lp-carousel__progress span,
.mb-lp-carousel.is-paused .mb-lp-carousel__progress span {
  animation-play-state: paused;
}

@keyframes mb-lp-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.mb-lp-carousel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 0 4px;
}

.mb-lp-carousel__count {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: #94a3b8;
}

.mb-lp-carousel__count strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--lp-ink);
}

.mb-lp-carousel__nav {
  display: inline-flex;
  gap: 10px;
}

.mb-lp-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: var(--lp-ink);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  cursor: pointer;
  transition:
    color 0.2s var(--lp-ease),
    border-color 0.2s var(--lp-ease),
    transform 0.2s var(--lp-ease),
    box-shadow 0.2s var(--lp-ease);
}

.mb-lp-carousel__btn .material-symbols-outlined {
  font-size: 22px;
}

.mb-lp-carousel__btn:hover {
  border-color: var(--lp-primary);
  color: var(--lp-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(17, 98, 212, 0.35);
}

/* ---------- Proof block: drawings FP 02 + ELEV 03 paired with Google reviews ----------
 * Desktop grid:   [ FP 02  | heading   ]
 *                 [ FP 02  | review 1  ]
 *                 [ ELEV 03| review 2  ]
 * Cards stretch to the row height, so each drawing lines up with its review. */
.mb-lp-proof-section {
  position: relative;
  overflow: hidden;
}

.mb-lp-proof-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46rem 24rem at 88% 4%, rgba(17, 98, 212, 0.07), transparent 62%),
    radial-gradient(36rem 22rem at 0% 100%, rgba(17, 98, 212, 0.05), transparent 60%);
}

.mb-lp-proof {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "fp   head"
    "fp   rev1"
    "elev rev2";
  grid-template-rows: auto 1fr auto;
  gap: 24px 32px;
}

.mb-lp-proof__head { grid-area: head; align-self: end; padding: 4px 4px 4px; }
.mb-lp-proof__sample-1 { grid-area: fp; }
.mb-lp-proof__sample-2 { grid-area: elev; }
.mb-lp-proof__review-1 { grid-area: rev1; }
.mb-lp-proof__review-2 { grid-area: rev2; }

.mb-lp-proof__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 16px;
}

.mb-lp-proof__rating strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--lp-ink);
}

.mb-lp-proof__google {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 10px 16px;
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  color: var(--lp-ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.2s var(--lp-ease), color 0.2s var(--lp-ease), transform 0.2s var(--lp-ease), box-shadow 0.2s var(--lp-ease);
}

.mb-lp-proof__google .material-symbols-outlined {
  font-size: 18px;
}

.mb-lp-proof__google:hover {
  border-color: var(--lp-primary);
  color: var(--lp-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(17, 98, 212, 0.35);
}

.mb-lp-stars {
  display: inline-flex;
  color: #f5b301;
}

.mb-lp-stars .material-symbols-outlined {
  font-size: 22px;
}

.mb-lp-stars--sm .material-symbols-outlined {
  font-size: 18px;
}

/* Shared light card (drawings + reviews) */
.mb-lp-sample,
.mb-lp-review-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--lp-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--lp-shadow-card);
  transition:
    transform 0.3s var(--lp-ease),
    box-shadow 0.3s var(--lp-ease),
    border-color 0.3s var(--lp-ease);
}

.mb-lp-sample:hover,
.mb-lp-review-card:hover {
  transform: translateY(-4px);
  border-color: rgba(17, 98, 212, 0.25);
  box-shadow: var(--lp-shadow-card-hover);
}

/* Drawing card */
.mb-lp-sample {
  display: flex;
  flex-direction: column;
}

.mb-lp-sample a {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-decoration: none;
}

.mb-lp-sample img {
  aspect-ratio: 1600 / 1284;
  width: 100%;
  object-fit: contain;
  background: #fff;
}

.mb-lp-sample figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px 20px;
  border-top: 1px solid #f1f5f9;
  font-size: 17px;
  font-weight: 700;
  color: var(--lp-ink);
}

.mb-lp-sample figcaption .material-symbols-outlined {
  font-size: 20px;
  color: var(--lp-primary);
  transition: transform 0.3s var(--lp-ease);
}

.mb-lp-sample:hover figcaption .material-symbols-outlined {
  transform: translateX(4px);
}

/* Review card */
.mb-lp-review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 32px 28px;
}

.mb-lp-review-card::before {
  content: "\201C";
  position: absolute;
  top: 6px;
  right: 24px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 96px;
  line-height: 1;
  color: rgba(17, 98, 212, 0.12);
  pointer-events: none;
}

.mb-lp-review-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--lp-primary), rgba(17, 98, 212, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--lp-ease);
}

.mb-lp-review-card:hover::after {
  transform: scaleX(1);
}

.mb-lp-review-card blockquote {
  flex: 1;
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--lp-text);
}

.mb-lp-review-card blockquote p + p {
  margin-top: 1em;
}

.mb-lp-review-card figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid #f1f5f9;
}

.mb-lp-review-card figcaption > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mb-lp-review-card figcaption strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--lp-ink);
}

.mb-lp-review-card figcaption > span:last-child > span {
  font-size: 13px;
  color: var(--lp-muted);
}

.mb-lp-review-card__avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--lp-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 0 0 4px rgba(17, 98, 212, 0.12);
}

@media (max-width: 1023px) {
  .mb-lp-proof {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "fp"
      "rev1"
      "elev"
      "rev2";
    grid-template-rows: none;
  }

  .mb-lp-proof__google {
    margin-left: 0;
  }
}

@media (max-width: 767px) {
  .mb-lp-review-card {
    padding: 24px 22px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mb-lp-carousel__slide,
  .mb-lp-carousel__slide.is-active,
  .mb-lp-carousel__btn,
  .mb-lp-sample,
  .mb-lp-review-card {
    transition: none;
  }

  .mb-lp-carousel__slide {
    transform: none;
  }

  .mb-lp-carousel__progress {
    display: none;
  }

  .mb-lp-carousel.is-playing .mb-lp-carousel__progress span {
    animation: none;
  }

  .mb-lp-carousel__btn:hover,
  .mb-lp-sample:hover,
  .mb-lp-review-card:hover {
    transform: none;
  }

  .mb-lp-review-card::after {
    transition: none;
  }
}

/* FAQ */
.mb-lp-faq {
  margin-top: 32px;
  border-top: 1px solid var(--lp-line);
}

.mb-lp-faq__item {
  padding: 28px 0;
  border-bottom: 1px solid var(--lp-line);
}

.mb-lp-faq dt {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--lp-ink);
}

.mb-lp-faq dd {
  margin-top: 12px;
  font-size: 16px;
}

/* ---------- Contact / form — card layout of the /contact/ page ---------- */
.mb-lp-contact {
  border-top: 1px solid var(--lp-line);
  scroll-margin-top: 80px; /* fixed site header (h-20) */
}

.mb-lp-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: start;
  gap: 64px;
}

.mb-lp-contact__intro .mb-lp-h2 {
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 900;
}

.mb-lp-contact__intro > p {
  max-width: 480px;
  margin-top: 20px;
  font-size: 18px;
  color: var(--lp-text);
}

.mb-lp-contact__intro > p a {
  font-weight: 600;
  color: var(--lp-primary);
  text-decoration: none;
}

.mb-lp-contact__intro > p a:hover {
  text-decoration: underline;
}

.mb-lp-contact__items {
  display: grid;
  gap: 28px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.mb-lp-contact__items li {
  display: flex;
  align-items: center;
  gap: 24px;
}

.mb-lp-contact__items li > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mb-lp-contact__items strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--lp-ink);
}

.mb-lp-contact__items a,
.mb-lp-contact__items li > span:last-child > span {
  color: var(--lp-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.mb-lp-contact__items a:hover {
  color: var(--lp-primary);
}

.mb-lp-contact__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(17, 98, 212, 0.1);
  color: var(--lp-primary);
}

/* Form card: bg-slate-50 p-8 rounded-3xl border-slate-100 shadow-xl */
.mb-lp-form-card {
  padding: 32px;
  border: 1px solid #f1f5f9;
  border-radius: 24px;
  background: #f8fafc;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.mb-lp-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 20px;
}

.mb-lp-field--full {
  grid-column: 1 / -1;
}

.mb-lp-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--lp-ink);
}

.mb-lp .wpcf7-form-control-wrap {
  display: block;
}

.mb-lp-form input[type='text'],
.mb-lp-form input[type='email'],
.mb-lp-form input[type='tel'],
.mb-lp-form select,
.mb-lp-form textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #fff;
  color: var(--lp-ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mb-lp-form select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230f172a' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.mb-lp-form textarea {
  min-height: 132px;
  resize: vertical;
}

.mb-lp-form input:focus,
.mb-lp-form select:focus,
.mb-lp-form textarea:focus {
  border-color: var(--lp-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(17, 98, 212, 0.15);
}

.mb-lp-form .wpcf7-not-valid {
  border-color: #dc2626;
}

.mb-lp-form__submit {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

/* Full-width primary button, as on /contact/ (CF7 markup keeps the old
   mb-lp-btn--mint class — overridden here). */
.mb-lp .mb-lp-form .wpcf7-submit {
  width: 100%;
  min-height: 60px;
  border: 0;
  border-radius: 12px;
  background: var(--lp-primary);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 10px 15px -3px rgba(17, 98, 212, 0.2), 0 4px 6px -4px rgba(17, 98, 212, 0.18);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.mb-lp .mb-lp-form .wpcf7-submit:hover {
  background: var(--lp-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -12px rgba(17, 98, 212, 0.45);
}

.mb-lp .mb-lp-form .wpcf7-submit:disabled {
  opacity: 0.7;
  transform: none;
}

.mb-lp-form__submit .wpcf7-spinner {
  position: absolute;
  top: 18px;
  right: 18px;
  margin: 0;
}

.mb-lp-form__note {
  font-size: 14px;
  color: var(--lp-muted);
  text-align: center;
}

.mb-lp .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 13px;
  color: #dc2626;
}

.mb-lp .wpcf7 form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  background: #f0fdf4;
  color: #166534;
  font-size: 15px;
}

.mb-lp .wpcf7 form.invalid .wpcf7-response-output,
.mb-lp .wpcf7 form.unaccepted .wpcf7-response-output,
.mb-lp .wpcf7 form.failed .wpcf7-response-output,
.mb-lp .wpcf7 form.spam .wpcf7-response-output {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.mb-lp-form-missing a {
  color: var(--lp-primary);
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .mb-lp-hero {
    padding: 48px 0;
  }

  .mb-lp-hero__grid,
  .mb-lp-contact__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .mb-lp-carousel {
    max-width: 560px;
  }

  /* main.css turns .stats-bar into a 2x2 grid here — drop the row padding. */
  .mb-lp-stats .stat-item,
  .mb-lp-stats .stat-item:first-child,
  .mb-lp-stats .stat-item:last-child {
    padding: 0;
  }

  .mb-lp-stats .stat-label {
    max-width: none;
  }

  .mb-lp-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mb-lp-section {
    padding: 64px 0;
  }

  .mb-lp-contact__grid {
    gap: 48px;
  }
}

@media (max-width: 767px) {
  .mb-lp {
    --lp-gutter: 16px;
    font-size: 16px;
  }

  .mb-lp-hero {
    padding: 36px 0 44px;
  }

  .mb-lp-hero__lead {
    font-size: 17px;
  }

  .mb-lp-hero__ctas .mb-lp-cta {
    flex: 1 1 100%;
  }

  .mb-lp-stats .stat-value {
    font-size: 18px;
  }

  .mb-lp-stats .stat-label {
    white-space: normal;
  }

  .mb-lp-workflow,
  .mb-lp-cards,
  .mb-lp-steps,
  .mb-lp-samples,
  .mb-lp-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .mb-lp-workflow {
    gap: 28px;
  }

  .mb-lp-steps {
    gap: 16px;
  }

  .mb-lp-steps > .mb-lp-feature,
  .mb-lp-steps > .mb-lp-feature:nth-child(4) {
    grid-column: auto;
  }

  .mb-lp-section {
    padding: 56px 0;
  }

  .mb-lp-form-card {
    padding: 24px 20px;
    border-radius: 20px;
  }

  .mb-lp-samples {
    gap: 24px;
  }

  .mb-lp-carousel__btn {
    width: 44px;
    height: 44px;
  }
}