/* =============================================================================
   MERIDIAN POOLS — about.css
   MigsFlow Web Design

   About page specific styles only.
   global.css + components.css + animations.css must load before this file.

   MOBILE FIRST — base styles target mobile.
   min-width media queries scale up to tablet and desktop.

   TABLE OF CONTENTS
   01. About Hero Section
============================================================================= */


/* =============================================================================
   01 — ABOUT HERO SECTION
============================================================================= */

#about-hero {
  background-color: var(--bg-300);
  overflow: hidden;
}

/* ── Layout — mobile: text first, image second ───────────────────────────── */
.about-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

@media (min-width: 1025px) {
  .about-hero-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
  }
}

/* ── Left — text ─────────────────────────────────────────────────────────── */
.about-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  min-width: 0;
  order: 1;
}

/* Eyebrow */
.about-hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: var(--blue);
  flex-shrink: 0;
  margin-right: var(--space-xs);
}

/* H1 */
.about-hero-content h1 {
  color: var(--text-100);
  max-width: 800px;
}

/* Body */
.about-hero-body {
  font-size: var(--fs-body);
  color: var(--text-700);
  line-height: var(--lh-body);
  max-width: 48ch;
}

@media (min-width: 768px) {
  .about-hero-body {
    font-size: var(--fs-body-lg);
  }
}

/* ── Right — image + stat ────────────────────────────────────────────────── */
.about-hero-img-col {
  position: relative;
  order: 2;
  min-width: 0;
}

/* Image */
.about-hero-img-wrap {
  display: block;
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  line-height: 0;
}

.about-hero-img-wrap img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--radius-card);
}

@media (min-width: 768px) {
  .about-hero-img-wrap img {
    height: 460px;
  }
}

@media (min-width: 1025px) {
  .about-hero-img-wrap img {
    height: 520px;
  }
}

/* ── Stat card — overlaps bottom left of image ───────────────────────────── */
.about-hero-stat {
  position: absolute;
  bottom: var(--space-xl);
  left: var(--space-lg); /* sits inside the image on mobile */
  z-index: 2;
  background-color: var(--blue);
  border-radius: var(--radius-card);
  padding: var(--space-xl) var(--space-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
  min-width: 160px;
  box-shadow: var(--shadow-card);
}

@media (min-width: 1025px) {
  .about-hero-stat {
    bottom: var(--space-xl);
    left: calc(-1 * var(--space-2xl)); /* hangs outside image on desktop only */
    min-width: 180px;
  }
}

@media (min-width: 768px) {
  .about-hero-stat {
    bottom: var(--space-xl);
    min-width: 180px;
  }
}

.about-hero-stat-num {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  color: var(--white);
  line-height: 1;
  max-width: none;
  letter-spacing: var(--ls-heading);
}

.about-hero-stat-label {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  max-width: 12ch;
  text-align: center;
  line-height: 1.4;
}




/* =============================================================================
   02 — ABOUT PROCESS SECTION
============================================================================= */

#about-process {
  background-color: var(--bg-100);
  overflow: hidden;
}

/* Header */
.about-process-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
  .about-process-header {
    margin-bottom: var(--space-3xl);
  }
}

.about-process-eyebrow::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: var(--blue);
  flex-shrink: 0;
  margin-right: var(--space-xs);
}

.about-process-header h2 {
  color: var(--text-100);
}

/* ── Carousel wrapper — full width ───────────────────────────────────────── */
.about-process-wrap {
  position: relative;
  width: 100%;
}

/* Edge fades */
.about-process-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}

@media (min-width: 768px) {
  .about-process-fade {
    width: 180px;
  }
}

.about-process-fade-left {
  left: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.about-process-fade-right {
  right: 0;
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* Track */
.about-process-track {
  display: flex;
  gap: var(--space-2xl);
  width: max-content;
  padding-inline: var(--container-padding);
  animation: aboutProcessScroll 28s linear infinite;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

@media (min-width: 768px) {
  .about-process-track {
    gap: var(--space-3xl);
    overflow-x: visible;
  }
}

.about-process-track:hover {
  animation-play-state: paused;
}

@keyframes aboutProcessScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Individual card ─────────────────────────────────────────────────────── */
.about-process-card {
  position: relative;
  flex: 0 0 80vw;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-2xl);
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .about-process-card {
    flex: 0 0 320px;
  }
}

/* Large background number — blue gradient per Figma */
.about-process-num {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-heading);
  font-size: clamp(5rem, 10vw, 8rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--ls-heading);
  /* Figma: #056BF0 at 37% opacity at 5% → #FFFFFF 100% at 83% */
  background: linear-gradient(
    to bottom,
    rgba(5, 107, 240, 0.37) 5%,
    rgba(255, 255, 255, 1) 83%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  user-select: none;
  pointer-events: none;
}

/* Step heading — oxford blue */
.about-process-card h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  color: var(--text-600); /* oxford blue — #2C2C2C */
  letter-spacing: var(--ls-heading);
  margin-top: var(--space-3xl);
}

/* Step body — #767676 */
.about-process-card p {
  font-size: var(--fs-body-sm);
  color: #767676;
  line-height: var(--lh-body);
  max-width: 28ch;
}



/* =============================================================================
   03 — ABOUT STORY SECTION
============================================================================= */

#about-story {
  background-color: var(--bg-100);
  overflow: hidden;
}

/* ── Layout — mobile: content first, collage second ──────────────────────── */
.about-story-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

@media (min-width: 1025px) {
  .about-story-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: center;
  }
}

/* ── Image collage — order 2 on mobile, order 1 on desktop ──────────────── */
.about-story-collage {
  order: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  min-width: 0;
}

@media (min-width: 1025px) {
  .about-story-collage {
    order: 1;
  }
}

/* All collage images share base styles */
.collage-img {
  border-radius: var(--radius-card);
  overflow: hidden;
  line-height: 0;
}

.collage-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--radius-card);
}

/* Large main image — left column, full height */
.collage-img-main {
  grid-row: span 2;
  height: 100%;
  min-height: 360px;
}

@media (min-width: 768px) {
  .collage-img-main {
    min-height: 520px;
  }
}

.collage-img-main img {
  height: 100%;
  min-height: 360px;
}

@media (min-width: 768px) {
  .collage-img-main img {
    min-height: 520px;
  }
}

/* Right column — stacked two images */
.collage-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

.collage-img-top img {
  height: 200px;
}

.collage-img-bottom img {
  height: 240px;
}

@media (min-width: 768px) {
  .collage-img-top img {
    height: 240px;
  }

  .collage-img-bottom img {
    height: 280px;
  }
}

/* ── Content — order 1 on mobile, order 2 on desktop ────────────────────── */
.about-story-content {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}

@media (min-width: 1025px) {
  .about-story-content {
    order: 2;
  }
}

/* Header */
.about-story-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.about-story-eyebrow::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: var(--blue);
  flex-shrink: 0;
  margin-right: var(--space-xs);
}

/* ── Tab buttons ─────────────────────────────────────────────────────────── */
.about-story-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.story-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.625rem 1.125rem;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--blue);
  background-color: transparent;
  border: 2px solid var(--blue);
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
  white-space: nowrap;
}

.story-tab svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

/* Active tab — filled blue tint */
.story-tab.active {
  background-color: var(--blue-tint);
}

.story-tab:hover:not(.active) {
  background-color: var(--blue-tint);
}

/* ── Tab panels ──────────────────────────────────────────────────────────── */
.story-panel {
  display: block;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  position: absolute;
  width: 100%;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.story-panel.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
  animation: none;
}

.story-panels-wrap {
  position: relative;
}

/* ── Content card ────────────────────────────────────────────────────────── */
.story-card {
  background-color: var(--bg-100);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.story-card-body {
  font-size: var(--fs-body);
  color: var(--text-700);
  line-height: var(--lh-body);
  max-width: none;
}

@media (min-width: 768px) {
  .story-card-body {
    font-size: var(--fs-body-lg);
  }
}

/* ── Card bottom — image + checklist + button ────────────────────────────── */
.story-card-bottom {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end; /* change from center to end */
  gap: var(--space-lg);
}



.story-card-btn {
  align-self: end; /* anchors to bottom right */
  width: auto;     /* never stretch */
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .story-card-bottom {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
 
    .story-card-btn {
    align-self: flex-start;
    width: fit-content; /* add this */
  }
}

/* Card image */
.story-card-img {
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  flex-shrink: 0;
  line-height: 0;
}

.story-card-img img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
}

@media (max-width: 767px) {
  .story-card-img img {
    width: 100%;
    height: 200px;
  }
}

/* Checklist */
.story-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.story-checklist li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--text-600);
}

/* Blue circle check icon */
.story-checklist li::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: rgba(42, 134, 255, 0.50);
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}

/* Button — bottom right of card */
.story-card-btn {
  align-self: flex-end;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .story-card-btn {
    align-self: flex-start;
  }
}





/* =============================================================================
   04 — WHY CHOOSE US SECTION
============================================================================= */

#why-us {
  background-color: var(--bg-100);
  overflow: hidden;
}

/* ── Header row ──────────────────────────────────────────────────────────── */
.why-us-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  margin-bottom: var(--space-3xl);
}

@media (min-width: 768px) {
  .why-us-header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-xl);
  }
}

.why-us-header-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 560px;
}

.why-us-eyebrow::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: var(--blue);
  flex-shrink: 0;
  margin-right: var(--space-xs);
}

/* Contact Us link — top right */
.why-us-contact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--text-600);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--transition-base);
}

.why-us-contact:hover {
  color: var(--blue);
}

.why-us-contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--blue-tint);
  color: var(--blue);
  flex-shrink: 0;
  transition:
    background-color var(--transition-base),
    transform var(--transition-base);
}

.why-us-contact:hover .why-us-contact-icon {
  background-color: var(--blue);
  color: var(--white);
  transform: translate(2px, -2px);
}

.why-us-contact-icon svg {
  width: 1rem;
  height: 1rem;
}

/* ── Main grid ───────────────────────────────────────────────────────────── */
.why-us-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .why-us-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
}

@media (min-width: 1200px) {
  .why-us-grid {
    grid-template-columns: 1fr 220px 220px 1fr;
    gap: var(--space-lg);
    align-items: start;
  }
}

/* Left and right card columns */
.why-us-col-left,
.why-us-col-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}

/* Middle image columns — overflow hidden to clip images */
.why-us-col-mid-left,
.why-us-col-mid-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
  overflow: hidden;
}

/* ── Feature cards ───────────────────────────────────────────────────────── */
.why-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background-color: var(--bg-100);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  min-width: 0;
}

.why-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  box-shadow: var(--shadow-card);
  flex-shrink: 0;
}

.why-card-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.why-card-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.why-card-text h4 {
  font-family: var(--font-heading);
  font-size: var(--fs-h5);
  color: var(--text-100);
  letter-spacing: var(--ls-heading);
  line-height: 1.1;
}

.why-card-text p {
  font-size: var(--fs-body-sm);
  color: var(--text-700);
  line-height: var(--lh-body);
  max-width: none;
}

/* ── Images — consistent fixed height across all breakpoints ─────────────── */
.why-img-wrap {
  border-radius: var(--radius-card);
  overflow: hidden;
  line-height: 0;
  width: 100%;
}

.why-img-wrap picture,
.why-img-wrap img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--radius-card);
  background-color: var(--bg-300);
}

/* ── Blue stat card — same height as images ──────────────────────────────── */
.why-stat-card {
  background-color: var(--blue);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-sm);
  height: 260px; /* matches image height exactly */
}

.why-stat-num {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  color: var(--white);
  line-height: 1;
  letter-spacing: var(--ls-heading);
  max-width: none;
}

.why-stat-label {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  max-width: 12ch;
  text-align: center;
  line-height: 1.4;
}




/* =============================================================================
   05 — TEAM SECTION
============================================================================= */

#team {
  background-color: var(--bg-100);
  overflow: hidden;
}

/* ── Header — centered ───────────────────────────────────────────────────── */
.team-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
  .team-header {
    margin-bottom: var(--space-3xl);
  }
}

.team-eyebrow::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: var(--blue);
  flex-shrink: 0;
  margin-right: var(--space-xs);
}

/* ── Mobile nav buttons — bottom left, shown only on mobile ─────────────── */
.team-nav {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg); /* top instead of bottom */
}

@media (min-width: 768px) {
  .team-nav {
    display: none;
  }
}

.team-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.12);
  background-color: var(--bg-500);
  color: var(--text-600);
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    transform var(--transition-base);
}

.team-nav-btn:hover {
  background-color: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  transform: scale(1.05);
}

.team-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.team-nav-btn svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* ── Track wrapper ───────────────────────────────────────────────────────── */
.team-track-wrap {
  overflow: hidden;
  width: 100%;
}

/* ── Track — mobile: flex carousel ──────────────────────────────────────── */
.team-track {
  display: flex;
  gap: var(--space-lg);
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}

/* Tablet: 2x2 grid */
@media (min-width: 768px) {
  .team-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    transform: none !important;
    transition: none;
  }
}

/* Desktop: 4 cols */
@media (min-width: 1200px) {
  .team-track {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Individual card ─────────────────────────────────────────────────────── */
.team-card {
  position: relative;
  flex: 0 0 75vw;
  min-width: 0;
  /* Border radius: 20px all corners, 40px bottom-left */
  border-radius: 20px 20px 20px 40px;
  overflow: hidden;
  line-height: 0;
}

@media (min-width: 768px) {
  .team-card {
    flex: unset;
    width: 100%;
  }
}

/* Image */
.team-card-img {
  display: block;
  width: 100%;
  line-height: 0;
}

.team-card-img img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: top center;
  display: block;
  background-color: var(--bg-300);
}

@media (min-width: 768px) {
  .team-card-img img {
    height: 420px;
  }
}

/* ── Blue overlay — solid, bottom ~27% of card ───────────────────────────── */
.team-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 27%;
  background-color: rgba(42, 134, 255, 0.50);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: var(--space-md) var(--space-lg);
}

/* Name — Bebas Neue, white */
.team-card-name {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  color: var(--white);
  letter-spacing: var(--ls-heading);
  line-height: 1;
}

/* Role — Inter, white, smaller */
.team-card-role {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  max-width: none;
  line-height: 1.3;
}