/* About Us Page Styles */
/* Component-specific styles for the About Us page */

.about-us-page {
  background-color: #ffffff;
  min-height: 100vh;
  font-family: var(--font-body, var(--font-primary, "Sharp Sans TRIAL", sans-serif));
}

.about-us-page h1,
.about-us-page h2 {
  font-family: var(--font-display, var(--font-primary, "Sharp Sans TRIAL", sans-serif));
}

/* Shared eyebrow label style */
.about-intro__eyebrow,
.about-care__eyebrow,
.about-family__eyebrow,
.about-help__eyebrow {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-brand, #7d9a4c);
  margin: 0 0 8px 0;
}

/* ==========================================
   1. Intro Section
   ========================================== */
.about-intro__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 24px 32px;
}

.about-intro__title {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-brand, #7d9a4c);
  margin: 0 0 24px 0;
}

.about-intro__paragraph {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #3a3a3a;
  margin: 0 0 20px 0;
}

.about-intro__paragraph strong {
  font-weight: 700;
}

.about-intro__paragraph:last-child {
  margin-bottom: 0;
}

.about-intro__image {
  width: 100%;
}

.about-intro__image picture,
.about-intro__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* The image is always shown uncropped, at its natural aspect ratio. On phones
   the mobile photo is tall/portrait, so there's always room to overlay the
   text full-width at the top. On wide desktop viewports the landscape photo
   renders tall enough (~490px+) to overlay the text in a left-hand column at
   full height. In between (tablets), the landscape photo renders too short
   for either overlay to have room, so the text just sits in normal flow
   above the image instead of overlapping it. */
.about-intro__content {
  position: relative;
}

.about-intro__text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 32px 24px;
  z-index: 2;
}

@media (min-width: 641px) and (max-width: 1199px) {
  .about-intro__text {
    position: static;
    width: 100%;
    padding: 48px 60px;
    text-align: left;
  }
}

@media (min-width: 1200px) {
  .about-intro__text {
    position: absolute;
    height: 100%;
    width: 44%;
    max-width: 620px;
    padding: 40px 40px 40px 100px;
  }
}

/* ==========================================
   2. Delivered With Care Section
   ========================================== */
.about-care {
  padding: 90px 100px;
}

.about-care {
  display: flex;
  align-items: center;
  gap: 64px;
  max-width: 1280px;
  margin: 0 auto;
}

.about-care__image {
  flex: 0 0 46%;
  height: 460px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: -16px 20px 0 -4px rgba(var(--color-brand-rgb, 125, 154, 76), 0.18);
}

.about-care__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-care__text {
  flex: 1;
}

.about-care__title {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-brand, #7d9a4c);
  margin: 0 0 20px 0;
}

.about-care__paragraph {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #3a3a3a;
  margin: 0;
}

/* ==========================================
   3. Built For Family Section
   ========================================== */
.about-family {
  background-image: var(--about-family-bg-desktop);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 560px;
  display: flex;
  align-items: center;
}

.about-family__content {
  max-width: 520px;
  padding: 60px 100px;
}

.about-family__title {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-brand, #7d9a4c);
  margin: 0 0 20px 0;
}

.about-family__eyebrow {
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  font-size: 20px;
  margin-bottom: 4px;
}

.about-family__paragraph {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: #333333;
  margin: 0 0 20px 0;
}

.about-family__paragraph:last-child {
  margin-bottom: 0;
}

/* ==========================================
   4. We're Here To Help Section
   (pattern borrowed from ninelife's about-questions section)
   ========================================== */
.about-help {
  background: #f7f6f2;
  padding: 80px 24px;
}

.about-help__content {
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.about-help__eyebrow {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--color-brand, #7d9a4c);
}

.about-help__eyebrow-rule {
  display: block;
  width: 140px;
  height: 1px;
  margin: 0 auto 28px;
  background: rgba(var(--color-brand-rgb, 125, 154, 76), 0.3);
}

.about-help__title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-brand, #7d9a4c);
  margin: 0 0 40px;
}

.about-help__cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 0 44px;
}

.about-help__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 220px;
  padding: 28px 20px;
  border-radius: 16px;
  background: var(--color-brand, #7d9a4c);
  color: #ffffff;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}

.about-help__card:hover {
  background: var(--color-brand-dark, #598017);
  transform: translateY(-2px);
}

.about-help__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--color-brand, #7d9a4c);
}

.about-help__card-icon svg {
  width: 20px;
  height: 20px;
}

.about-help__card-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
}

.about-help__card-value {
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  word-break: break-word;
  margin: 0;
}

.about-help__meta {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 520px;
  margin: 0 auto;
  transform: translateX(40px);
  text-align: left;
}

.about-help__meta-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  font-style: normal;
}

.about-help__meta-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-brand, #7d9a4c);
  color: #ffffff;
}

.about-help__meta-icon svg {
  width: 20px;
  height: 20px;
}

.about-help__meta-text {
  padding-top: 2px;
  font-style: normal;
}

.about-help__meta-label {
  margin: 0 0 2px 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-brand-dark, #598017);
}

.about-help__meta-value {
  margin: 0;
  color: var(--color-brand, #7d9a4c);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

/* ==========================================
   Responsive
   ========================================== */
@media (max-width: 1200px) {
  .about-intro__text {
    padding: 50px 60px;
  }

  .about-care {
    padding: 70px 60px;
    gap: 40px;
  }

  .about-family__content {
    padding: 50px 60px;
  }
}

@media (max-width: 640px) {
  .about-intro__text,
  .about-care__text,
  .about-family__content {
    text-align: center;
  }

  .about-intro__text {
    padding: 72px 12px 20px;
  }

  .about-intro__title {
    font-size: 28px;
    margin: 0 0 12px 0;
  }

  .about-care {
    flex-direction: column;
    padding: 50px 24px;
    gap: 32px;
  }

  .about-care__image {
    flex: none;
    width: 100%;
    height: auto;
    box-shadow: none;
  }

  .about-care__image img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .about-family {
    background-image: var(--about-family-bg-mobile);
    background-position: top center;
    aspect-ratio: 390 / 916;
    min-height: 0;
    align-items: flex-start;
  }

  .about-family__content {
    max-width: 100%;
    padding: 40px 24px;
  }

  .about-help {
    padding: 56px 20px;
  }

  .about-help__cards {
    flex-direction: column;
    align-items: center;
  }

  .about-help__card {
    width: 100%;
    max-width: 320px;
  }

  .about-help__meta {
    transform: none;
  }

  .about-help__meta-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .about-help__meta-text {
    padding-top: 0;
  }
}

@media (max-width: 480px) {
  .about-intro__title {
    font-size: 24px;
  }

  .about-care__title,
  .about-family__title {
    font-size: 26px;
  }

  .about-help__title {
    font-size: 22px;
  }
}