/* =========================================================
   ABOUT PAGE ONLY
   Loaded by about.html after styles.css.
   styles.css and index.html remain unchanged.
   ========================================================= */


/* ABOUT HERO */

.about-hero {
  min-height: 610px;
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--navy);
}

/* ABOUT HERO */

.about-hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    url("assets/images/about-us/stack-of-printed-photos-on-white-marble-surface.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.about-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(2,17,27,.96) 0%,
      rgba(2,17,27,.82) 48%,
      rgba(2,17,27,.30) 100%
    );
}

.about-hero-content {
  position: relative;
  z-index: 2;
  padding-top: 86px;
}

.about-hero-content h1 {
  max-width: 820px;
}

.about-hero-content .hero-copy {
  max-width: 650px;
}


/* ABOUT STORY */

.about-story {
  background-image:
    linear-gradient(
      rgba(245,242,236,.92),
      rgba(245,242,236,.92)
    ),
    url("assets/images/about-us/looking-at-old-family-photo-album-at-home.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}


.about-story .story-grid {
  min-height: 650px;
}


/* SHARED ABOUT SECTION HEADING */

.about-section-heading {
  max-width: 830px;
  margin-bottom: 42px;
}

.about-section-heading h2 {
  margin: 0;
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 500;
}

.about-section-heading--center {
  margin-inline: auto;
  text-align: center;
}


/* TWO PRODUCTS */

.about-products {
  padding: 86px 0 92px;
  background: var(--paper);
}

.about-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.about-product-card {
  min-height: 390px;
  border-radius: 18px;
  padding: 42px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.about-product-card--octui {
  color: var(--ink);
  background:
    linear-gradient(
      135deg,
      rgba(217,243,239,.96),
      rgba(255,255,255,.92)
    );
}

.about-product-card--slideshows {
  color: #fff;
  background:
    linear-gradient(
      135deg,
      #0d2b3d,
      #071b29
    );
}

.about-product-kicker {
  margin: 0 0 28px;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: 12px;
  font-weight: 800;
  opacity: .72;
}

.about-product-card h3 {
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.04;
  letter-spacing: -.03em;
  margin-bottom: 18px;
  font-weight: 600;
}

.about-product-card p {
  max-width: 520px;
  font-size: 17px;
  line-height: 1.6;
}

.about-product-card--slideshows p {
  color: rgba(255,255,255,.78);
}

.about-product-card .btn {
  margin-top: auto;
}


/* VALUES */

.about-values {
  padding: 88px 0 96px;
  background: #f5f2ec;
}

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.about-values-grid article {
  padding: 32px;
  border-top: 1px solid rgba(12,34,51,.18);
}

.about-value-number {
  display: block;
  margin-bottom: 26px;
  color: var(--coral);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .18em;
}

.about-values-grid h3 {
  font-size: 24px;
  margin-bottom: 12px;
}

.about-values-grid p {
  color: #4b5962;
  line-height: 1.65;
}


/* FINAL CTA */

.about-cta {
  background-color: var(--navy-2);
  background-image:
    linear-gradient(
      90deg,
      rgba(7,27,41,.96) 0%,
      rgba(7,27,41,.82) 55%,
      rgba(7,27,41,.52) 100%
    ),
    url("assets/images/about-us/man-and-woman-embracing-at-night-with-smiles.jpg");
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}

.about-cta-inner {
  min-height: 320px;
  padding: 62px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

.about-cta h2 {
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: .98;
  letter-spacing: -.04em;
  font-weight: 500;
  margin-bottom: 0;
}

.about-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}


/* ACTIVE NAV LINK */

.site-nav a[aria-current="page"] {
  opacity: 1;
  font-weight: 700;
}


/* ABOUT PAGE RESPONSIVE */

@media (max-width: 980px) {

  .about-hero {
    min-height: 560px;
  }

  .about-product-grid,
  .about-values-grid {
    grid-template-columns: 1fr;
  }

  .about-product-card {
    min-height: 330px;
  }

  .about-cta-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .about-cta-actions {
    justify-content: flex-start;
  }
}


@media (max-width: 640px) {

  .about-hero {
    min-height: 540px;
  }

  .about-hero-content {
    padding-top: 70px;
  }

  .about-products,
  .about-values {
    padding: 58px 0 64px;
  }

  .about-product-card {
    padding: 28px;
  }

  .about-values-grid article {
    padding: 26px 8px;
  }

  .about-cta-inner {
    min-height: 290px;
    padding: 48px 0;
  }

  .about-cta-actions {
    width: 100%;
  }

  .about-cta-actions .btn {
    width: 100%;
  }
}