/* --- Boxed hero panel (matches Bricks .hero-section-card exactly) --- */
.home-hero {
  padding-block: var(--space-xl) var(--space-s);
  background: #fff;
}

.home-hero__panel {
  background: var(--color-primary-tint);
  border-radius: var(--radius-l);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  padding-inline: var(--space-l);
  gap: var(--space-l);
  overflow: hidden;
}

.home-hero__text {
  padding-block: var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home-hero__media {
  padding-top: var(--space-l);
  align-self: stretch;
  display: flex;
}

@media (min-width: 900px) {
  .home-hero__panel {
    grid-template-columns: 2fr 3fr;
    align-items: stretch;
  }
}

.home-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-l);
}

.home-hero__heading {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.15;
  margin: 0 0 var(--space-l);
  color: var(--color-primary-dark);
}

.home-hero__lede {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text);
  margin: 0 0 var(--space-xl);
  max-width: 55ch;
}

.home-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-m);
}

/* --- Value prop cards (icon + heading only, matches live) --- */
.value-props {
  padding-block: var(--space-s) var(--space-2xl);
}

.value-props__grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .value-props__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.value-card {
  background: var(--color-primary-tint);
  border-radius: var(--radius-m);
  padding: var(--space-m) var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  transition: transform var(--transition), box-shadow var(--transition);
}
.value-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-m);
}

.value-card__icon {
  width: 32px;
  height: 32px;
  display: block;
}

.value-card__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-m);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-primary-dark);
}

/* --- Split (image + text) sections — matches Bricks .fr-feature-card-uniform.
   Image "floats" beyond the tinted card top/bottom via negative margin. --- */
.split-section {
  padding-block: var(--space-2xl);
  background: #fff;
}

.split-section__inner {
  --image-overlap: var(--space-l);
  background: var(--color-primary-tint);
  border-radius: var(--radius-m);
  display: grid;
  align-items: stretch;
  grid-template-columns: 1fr;
  padding-inline: calc(var(--image-overlap) * 2);
  gap: var(--space-xl);
}

@media (min-width: 900px) {
  .split-section__inner {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--image-overlap) * 3);
  }
}

.split-section__media {
  align-self: stretch;
  display: flex;
  margin-block: calc(-1 * var(--image-overlap));
}
.split-section__media img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  border-radius: var(--radius-m);
  display: block;
}

.split-section__text {
  padding-block: var(--space-2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 900px) {
  .split-section__inner--reverse .split-section__media { order: 2; }
  .split-section__inner--reverse .split-section__text  { order: 1; }
}

.split-section__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.095em;
  font-size: var(--text-s);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-m);
}
.split-section__heading {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.2;
  margin: 0 0 var(--space-l);
  color: var(--color-primary-dark);
}
.split-section__text p {
  margin: 0 0 var(--space-m);
  line-height: 1.65;
  color: var(--color-text);
}
.split-section__text .btn {
  margin-top: var(--space-s);
}

/* --- Difference cards (light-blue tint on light-blue section) --- */
.difference-section .section__intro {
  max-width: 780px;
}
.difference-section .section__eyebrow {
  color: var(--color-primary-dark);
  text-align: center;
  order: -1;
}
.diff-card {
  background: var(--color-primary-tint);
  border-radius: var(--radius-m);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.diff-card__icon {
  color: var(--color-primary-dark);
}
.diff-card__icon svg { display: block; }
.diff-card__heading {
  font-family: var(--font-heading);
  font-size: var(--text-l);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-primary-dark);
  margin: 0;
}
.diff-card__body {
  margin: 0;
  color: var(--color-text);
  line-height: 1.6;
  font-size: 0.98rem;
}

/* --- Process section (asymmetric: text left, stacked cards right) --- */
.process-section {
  padding-block: var(--space-3xl);
}
.process-section__inner {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .process-section__inner {
    grid-template-columns: 5fr 6fr;
    gap: var(--space-3xl);
  }
}

.process-section__text { padding-top: var(--space-l); }
.process-section__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.095em;
  font-size: var(--text-s);
  font-weight: 400;
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-m);
}
.process-section__heading {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-l);
}
.process-section__body {
  color: var(--color-text);
  line-height: 1.65;
  margin: 0 0 var(--space-l);
}

.process-section__cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.proc-card {
  background: var(--color-primary-tint);
  border-radius: var(--radius-m);
  padding: var(--space-l) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.proc-card__step {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #cfe3f7;
  color: var(--color-primary-dark);
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
}
.proc-card__heading {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-l);
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 1.25;
}
.proc-card__body {
  margin: 0;
  color: var(--color-text);
  line-height: 1.6;
}

/* BBB banner styles moved to /css/components/bbb-section.css (shared) */

/* --- Testimonial section (asymmetric: text+CTA left, slider right) --- */
.testimonial-section {
  padding-block: var(--space-3xl);
}
.testimonial-section__inner {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: 1fr;
  align-items: center;
}
.testimonial-section__text { min-width: 0; }
.testimonial-section__slider { min-width: 0; overflow: hidden; }
@media (min-width: 900px) {
  .testimonial-section__inner {
    grid-template-columns: 6fr 5fr;
    gap: var(--space-2xl);
  }
}

.testimonial-section__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.095em;
  font-size: var(--text-s);
  font-weight: 400;
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-m);
}
.testimonial-section__heading {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-l);
}

.testimonial-section__badges {
  display: flex;
  gap: var(--space-l);
  flex-wrap: wrap;
  margin-bottom: var(--space-l);
}

.rating-badge {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
.rating-badge__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--color-primary-tint);
  border-radius: 999px;
  font-weight: 700;
  color: var(--color-primary-dark);
  font-size: 0.95rem;
  line-height: 1;
}
.rating-badge__star { color: var(--color-primary); font-size: 1rem; }
.rating-badge__score { font-family: var(--font-body); }
.rating-badge__label {
  margin: 0;
  font-size: var(--text-s);
  color: var(--color-text);
  font-weight: 500;
}

/* --- Final CTA (full-width bg image + heading + form card) --- */
.final-cta {
  position: relative;
  padding-block: var(--space-3xl);
  background: linear-gradient(rgba(32, 61, 96, 0.55), rgba(32, 61, 96, 0.55)),
              url('/images/hero/cta-bg.webp') center center / cover no-repeat;
  color: #fff;
}
.final-cta__inner {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .final-cta__inner {
    grid-template-columns: 5fr 6fr;
    gap: var(--space-3xl);
  }
}
.final-cta__heading {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.15;
  color: #fff;
  margin: 0;
  max-width: 12ch;
}
.final-cta__form .callback-form {
  background: #fff;
  color: var(--color-text);
  padding: var(--space-xl);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-l);
  max-width: none;
}

/* --- Final CTA --- */
.cta-section__actions {
  display: inline-flex;
  gap: var(--space-l);
  flex-wrap: wrap;
  justify-content: center;
}