/**
 * Foundation Right Pro - Home page sections
 * Hero, About, Services, How It Works, Testimonials, Blog.
 */

/* ==========================================================================
   1. Hero
   ========================================================================== */

.frp-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(7rem, 4rem + 8vw, 11rem);
  padding-bottom: clamp(4rem, 2rem + 6vw, 7rem);
  background: var(--frp-gradient-maroon);
  color: var(--frp-white);
}

.frp-hero__bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.frp-hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--frp-gradient-hero);
}

.frp-hero__inner {
  position: relative;
  z-index: 1;
}

.frp-hero__content {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.frp-hero__title {
  margin-bottom: var(--frp-space-5);
  color: var(--frp-white);
  font-size: var(--frp-fs-h1);
}

.frp-hero__text {
  max-width: 34rem;
  margin-inline: auto;
  margin-bottom: var(--frp-space-8);
  color: var(--frp-on-dark-70);
  font-size: var(--frp-fs-lead);
  line-height: var(--frp-lh-loose);
}

/*
 * Renders as a sibling *after* the .frp-hero section (see hero.php), then
 * gets pulled up by exactly half its own rendered height. That keeps the
 * layout space it reserves unchanged (so the About section still starts a
 * comfortable distance below it) while the visible cards end up straddling
 * the seam: top half over the hero photo, bottom half over the white
 * background of the section that follows.
 */
.frp-hero__badges {
  position: relative;
  z-index: 2;
  transform: translateY(-50%);
}

.frp-hero__badges-inner {
  display: flex;
  gap: var(--frp-space-6);
  justify-content: center;
}

@media (max-width: 780px) {
  .frp-hero__badges-inner {
    flex-direction: column;
    align-items: center;
  }
  .frp-hero-badge{
	max-width: 100%;
	width: 100%;
  }
}
@media (max-width: 1100px) {
  .frp-hero__badges {
    transform: translateY(0px);
    padding: 50px 0px;
  }
}
/* Icon, title and description each render on their own row, centered. */
.frp-hero-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--frp-space-2);
  padding: var(--frp-space-6);
  border-radius: var(--frp-radius-lg);
  background: var(--frp-white);
  box-shadow: var(--frp-shadow-lg);
  text-align: center;
  max-width: 340px;
}

.frp-hero-badge__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  margin-bottom: var(--frp-space-2);
  border-radius: var(--frp-radius-circle);
  background: var(--frp-maroon);
  color: var(--frp-white);
  overflow: hidden;
}

/* Uploaded icon image, contained within the circle at a sensible size. */
.frp-hero-badge__icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.frp-hero-badge__title {
  color: var(--frp-ink);
  font-weight: var(--frp-fw-semibold);
  font-size: var(--frp-fs-lead);
}

.frp-hero-badge__text {
  color: var(--frp-grey-500);
  font-size: var(--frp-fs-sm);
}

/* ==========================================================================
   2. About
   ========================================================================== */

.frp-about__grid {
  display: grid;
  gap: var(--frp-space-16);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

@media (max-width: 900px) {
  .frp-about__grid {
    grid-template-columns: 1fr;
  }
}

/*
 * Collage: the main photo is anchored to the top-right of the block; the
 * small photo hangs off its bottom-left corner and drops below the main
 * photo's own bottom edge; the "Call Our Team" card overlaps the seam
 * between the two, flush with the very bottom of the block.
 */
.frp-about__media {
  position: relative;
  padding-left: clamp(2rem, 1rem + 6vw, 4.5rem);
  padding-bottom: clamp(4.5rem, 2.5rem + 7vw, 7rem);
}

.frp-about__media-main {
  width: 80%;
  margin-left: auto;
  aspect-ratio: 5 / 4.4;
  border-radius: var(--frp-radius-xl);
  object-fit: cover;
}

.frp-about__media-small {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  aspect-ratio: 4 / 4.8;
  border: 6px solid var(--frp-white);
  border-radius: var(--frp-radius-lg);
  object-fit: cover;
  box-shadow: var(--frp-shadow-md);
}

.frp-about__call {
  position: absolute;
  left: 18%;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--frp-space-4);
  max-width: 17rem;
  padding: var(--frp-space-5) var(--frp-space-6);
  border-radius: var(--frp-radius-lg);
  background: var(--frp-maroon);
  color: var(--frp-white);
  box-shadow: var(--frp-shadow-lg);
}

@media (max-width: 480px) {
  .frp-about__call {
    left: var(--frp-space-4);
  }
}

.frp-about__call-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: var(--frp-radius-circle);
  background: rgba(255, 255, 255, 0.16);
}

.frp-about__call-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.frp-about__call-label {
  color: var(--frp-on-dark-70);
  font-size: var(--frp-fs-xs);
}

.frp-about__call-phone {
  color: var(--frp-white);
  font-weight: var(--frp-fw-semibold);
  font-size: var(--frp-fs-lead);
}

.frp-about__call-phone:hover {
  color: var(--frp-white);
  opacity: 0.85;
}

.frp-about__copy {
  margin-bottom: var(--frp-space-6);
  font-size: var(--frp-fs-lead);
  line-height: var(--frp-lh-loose);
}

.frp-about__features {
  display: flex;
  flex-direction: column;
  gap: var(--frp-space-6);
}

.frp-feature-row {
  display: flex;
  gap: var(--frp-space-4);
}

.frp-feature-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: var(--frp-radius-md);
  background: var(--frp-maroon);
  color: var(--frp-white);
  overflow: hidden;
}

/* Uploaded icon image, contained within the square at a sensible size. */
.frp-feature-row__icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.frp-feature-row__title {
  margin: 0 0 var(--frp-space-1);
  font-size: var(--frp-fs-lead);
}

.frp-feature-row__text {
  margin: 0;
  font-size: var(--frp-fs-sm);
  line-height: var(--frp-lh-snug);
}

/* ==========================================================================
   3. Services
   ========================================================================== */

.frp-services__grid {
  display: grid;
  gap: var(--frp-space-6);
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .frp-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .frp-services__grid {
    grid-template-columns: 1fr;
  }
}

.frp-service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--frp-space-8);
  border: 1.5px solid var(--frp-grey-100);
  border-radius: var(--frp-radius-lg);
  background: var(--frp-white);
  transition:
    border-color var(--frp-transition),
    box-shadow var(--frp-transition),
    transform var(--frp-transition);
}

.frp-service-card:hover {
  border-color: var(--frp-maroon);
  box-shadow: var(--frp-shadow-md);
  transform: translateY(-2px);
}

.frp-service-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  margin-bottom: var(--frp-space-5);
  border-radius: var(--frp-radius-md);
  background: var(--frp-maroon-10);
  color: var(--frp-maroon);
}

.frp-service-card__title {
  margin-bottom: var(--frp-space-3);
  font-size: var(--frp-fs-h4);
  text-align: center;
}

.frp-service-card__title a {
  color: inherit;
}

.frp-service-card__text {
  margin-bottom: var(--frp-space-5);
  font-size: var(--frp-fs-sm);
  line-height: var(--frp-lh-snug);
  text-align: center;
}

.frp-service-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--frp-space-2);
  margin-top: auto;
  color: var(--frp-maroon);
  font-size: var(--frp-fs-xs);
  font-weight: var(--frp-fw-bold);
  letter-spacing: var(--frp-ls-eyebrow);
  text-transform: uppercase;
}

.frp-service-card__cta svg {
  transition: transform var(--frp-transition);
}

.frp-service-card:hover .frp-service-card__cta svg {
  transform: translateX(3px);
}

/* Featured card: solid maroon fill */
.frp-service-card--featured {
  border-color: var(--frp-maroon);
  background: var(--frp-gradient-maroon);
  color: var(--frp-on-dark-70);
}

.frp-service-card--featured .frp-service-card__icon {
  background: rgba(255, 255, 255, 0.16);
  color: var(--frp-white);
}

.frp-service-card--featured .frp-service-card__title,
.frp-service-card--featured .frp-service-card__title a {
  color: var(--frp-white);
}

.frp-service-card--featured .frp-service-card__text {
  color: var(--frp-on-dark-70);
}

.frp-service-card--featured .frp-service-card__cta {
  color: var(--frp-white);
}

.frp-service-card--featured:hover {
  border-color: var(--frp-white);
  transform: translateY(-2px);
}

/* ==========================================================================
   4. How Its Work (process)
   ========================================================================== */

.frp-process {
  position: relative;
  padding-top: clamp(3rem, 1.5rem + 5vw, 5rem);
  padding-bottom: clamp(3rem, 1.5rem + 5vw, 5rem);
  background: var(--frp-gradient-maroon);
  color: var(--frp-on-dark-70);
}

/* No .frp-container here on purpose — the photo needs to bleed to the
   true left edge of the viewport, so only the content column gets padding. */
.frp-process__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.frp-step-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

@media (max-width: 900px) {
  .frp-process__inner {
    grid-template-columns: 1fr;
  }
}

.frp-process__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.4;
  border-radius: var(--frp-radius-xl);
  object-fit: cover;
}

@media (max-width: 900px) {
  .frp-process__media img {
    aspect-ratio: 4 / 3;
  }
}

.frp-process__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2rem, 1rem + 3vw, 3rem) clamp(6rem, 3rem + 8vw, 9rem);
  padding-inline: clamp(2rem, 1rem + 4vw, 4rem) var(--frp-gutter);
}

@media (max-width: 900px) {
  .frp-process__content {
    padding-inline: 0px;
    padding-bottom: clamp(2rem, 1rem + 3vw, 3rem);
  }
}

.frp-process .frp-eyebrow {
  color: var(--frp-white);
}

.frp-process__content h2 {
  color: var(--frp-white);
}

.frp-process__text {
  margin: 0;
  max-width: 30rem;
  font-size: var(--frp-fs-lead);
  line-height: var(--frp-lh-loose);
}

/*
 * A single white panel overlapping the seam between the photo and the copy
 * column, near the bottom of the section — not individual cards.
 */
.frp-process__steps-wrap {
  position: relative;
  margin-top: -100px;
  max-width: 900px;
  margin-inline: auto;
  z-index: 2;
}

@media (max-width: 900px) {
  .frp-process__steps-wrap {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 0px;
    padding-inline: var(--frp-gutter);
  }
}

.frp-process__steps {
  display: grid;
  gap: var(--frp-space-8);
  grid-template-columns: repeat(3, 1fr);
  padding: var(--frp-space-8) var(--frp-space-10);
  border-radius: var(--frp-radius-xl);
  background: var(--frp-white);
  box-shadow: var(--frp-shadow-lg);
}

@media (max-width: 780px) {
  .frp-process__steps {
    grid-template-columns: 1fr;
    gap: var(--frp-space-6);
  }
}

.frp-step-card__number {
  display: block;
  margin-bottom: var(--frp-space-3);
  color: var(--frp-grey-300);
  font-size: var(--frp-fs-h3);
  font-weight: var(--frp-fw-bold);
  line-height: 1;
}

.frp-step-card__title {
  margin-bottom: var(--frp-space-2);
  font-size: var(--frp-fs-lead);
  color: var(--frp-ink);
}

.frp-step-card__text {
  margin: 0;
  font-size: var(--frp-fs-sm);
  line-height: var(--frp-lh-snug);
  color: var(--frp-grey-500);
}

/* ==========================================================================
   5. Testimonials
   ========================================================================== */

.frp-testimonials__grid {
  display: grid;
  gap: var(--frp-space-12);
  grid-template-columns: 0.85fr 1.15fr;
  align-items: start;
}

@media (max-width: 900px) {
  .frp-testimonials__grid {
    grid-template-columns: 1fr;
  }
}

.frp-testimonials__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--frp-space-5);
  border-radius: var(--frp-radius-circle);
  background: var(--frp-maroon);
  color: var(--frp-white);
}

.frp-testimonials__content h2 {
  max-width: 20rem;
}

.frp-testimonials__text {
  max-width: 26rem;
  font-size: var(--frp-fs-lead);
  line-height: var(--frp-lh-loose);
}

.frp-testimonials__list {
  display: grid;
  gap: var(--frp-space-6);
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 640px) {
  .frp-testimonials__list {
    grid-template-columns: 1fr;
  }
}

.frp-testimonials__list .frp-quote-card:nth-child(2n) {
  margin-top: var(--frp-space-8);
}

@media (max-width: 640px) {
  .frp-testimonials__list .frp-quote-card:nth-child(2n) {
    margin-top: 0;
  }
}

.frp-quote-card {
  margin: 0;
  padding: var(--frp-space-8);
  border: 1.5px solid var(--frp-grey-100);
  border-radius: var(--frp-radius-lg);
  background: var(--frp-white);
}

.frp-quote-card__text {
  margin: 0 0 var(--frp-space-5);
  padding: 0;
  border: 0;
  color: var(--frp-ink);
  font-size: var(--frp-fs-body);
  font-style: normal;
  line-height: var(--frp-lh-snug);
}

.frp-quote-card__name {
  color: var(--frp-maroon);
  font-weight: var(--frp-fw-bold);
  font-size: var(--frp-fs-sm);
}

/* ==========================================================================
   6. Blog
   ========================================================================== */

.frp-blog__grid {
  display: grid;
  gap: var(--frp-space-8);
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .frp-blog__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .frp-blog__grid {
    grid-template-columns: 1fr;
  }
}

.frp-blog-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--frp-radius-lg);
}

.frp-blog-card__image {
  width: 100%;
  aspect-ratio: 4 / 2.7;
  object-fit: cover;
  transition: transform var(--frp-transition-slow);
}

.frp-blog-card:hover .frp-blog-card__image {
  transform: scale(1.04);
}

.frp-blog-card__badge {
  position: absolute;
  top: var(--frp-space-4);
  left: var(--frp-space-4);
  padding: 6px 14px;
  border-radius: var(--frp-radius-pill);
  background: var(--frp-maroon);
  color: var(--frp-white);
  font-size: var(--frp-fs-xs);
  font-weight: var(--frp-fw-semibold);
}

.frp-blog-card__body {
  padding-top: var(--frp-space-5);
}

.frp-blog-card__title {
  margin-bottom: var(--frp-space-3);
  font-size: var(--frp-fs-h4);
}

.frp-blog-card__title a {
  color: inherit;
}

.frp-blog-card__title a:hover {
  color: var(--frp-maroon);
}

.frp-blog-card__excerpt {
  margin-bottom: var(--frp-space-4);
  font-size: var(--frp-fs-sm);
  line-height: var(--frp-lh-snug);
}

.frp-blog-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--frp-space-2);
  color: var(--frp-maroon);
  font-size: var(--frp-fs-xs);
  font-weight: var(--frp-fw-bold);
  letter-spacing: var(--frp-ls-eyebrow);
  text-transform: uppercase;
}