/* ===========================================
   FITNESSFINDER - ABOUT US CSS
   =========================================== */

/* -- HERO -- */
.about-hero {
  background: #ffffff;
  border-bottom: 1px solid #ececec;
  padding: 72px 6% 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.about-hero::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
}
.about-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #00768e;
  background: rgba(0,194,238,0.1);
  border: 1px solid rgba(0,194,238,0.3);
  padding: 5px 16px; border-radius: 50px;
  margin-bottom: 20px;
}
.about-hero h1 {
  font-family: var(--ff-font-display); font-weight: var(--ff-display-fw); text-transform: var(--ff-display-tt); letter-spacing: var(--ff-display-ls); text-transform: uppercase;
  font-size: 2.8rem; color: var(--ff-ink);
  margin-bottom: 16px; line-height: 1.15;
}
.about-hero p {
  font-size: 1rem; color: var(--ff-muted-2);
  max-width: 500px; margin: 0 auto;
  line-height: 1.75;
}

/* -- SHARED SECTION STRUCTURE -- */
.about-section {
  padding: 80px 6%;
  background: var(--ff-surface-3);
}
.about-section-dark {
  background: var(--ff-ink);
}
.about-section-dark .about-video-label h2 { color: #fff; }
.about-section-dark .about-video-label p  { color: var(--ff-muted-3); }
.about-section-dark .about-eyebrow        { background: rgba(0,194,238,0.1); border-color: rgba(0,194,238,0.25); color: var(--ff-brand); }

.about-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* -- EYEBROW -- */
.about-eyebrow {
  display: inline-block;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ff-brand);
  background: var(--ff-brand-tint);
  border: 1px solid var(--ff-brand-soft);
  padding: 5px 14px; border-radius: 50px;
  margin-bottom: 14px;
}

/* -- VIDEO BLOCK -- */
.about-video-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about-video-block-reverse {
  direction: rtl;
}
.about-video-block-reverse > * {
  direction: ltr;
}

.about-video-label h2 {
  font-family: var(--ff-font-display); font-weight: var(--ff-display-fw); text-transform: var(--ff-display-tt); letter-spacing: var(--ff-display-ls);
  font-size: 2rem; color: var(--ff-ink);
  margin-bottom: 16px; line-height: 1.2;
}
.about-video-label p {
  font-size: 0.95rem; color: var(--ff-muted-2);
  line-height: 1.8; max-width: 420px;
}

/* -- VIDEO EMBED -- */
.about-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 56px rgba(0,0,0,0.22);
  background: #0a0a0a;
}
.about-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* -- TEAM SECTION -- */
.about-team-section {
  background: var(--ff-ink);
  padding: 100px 6%;
}
.about-team-header {
  text-align: center;
  margin-bottom: 80px;
}
.about-team-header h2 {
  font-family: var(--ff-font-display); font-weight: var(--ff-display-fw); text-transform: var(--ff-display-tt); letter-spacing: var(--ff-display-ls);
  font-size: 2.2rem; color: var(--ff-brand);
  margin-bottom: 14px; line-height: 1.2;
  margin-top: 10px;
}
.about-team-header p {
  font-size: 0.95rem; color: #ffffff;
  max-width: 480px; margin: 0 auto;
  line-height: 1.75;
}

/* -- FOUNDER ROWS -- */
.founder-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  margin-bottom: 100px;
}
.founder-row:last-child { margin-bottom: 0; }

/* James row - photo right, text left */
.founder-row-reverse {
  direction: rtl;
}
.founder-row-reverse > * {
  direction: ltr;
}

/* -- FOUNDER PHOTO -- */
.founder-photo-wrap {
  position: relative;
}
.founder-photo-wrap::before {
  content: '';
  position: absolute;
  inset: -12px -12px 12px 12px;
  border: 2px solid var(--ff-brand);
  border-radius: 24px;
  opacity: 0.25;
  pointer-events: none;
}
.founder-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
.founder-photo-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  background: linear-gradient(135deg, #2a2a2a, var(--ff-ink));
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem; color: #ffffff;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

/* -- FOUNDER TEXT -- */
.founder-text { display: flex; flex-direction: column; gap: 0; }
.founder-name-row {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 20px;
}
.founder-name-row h3 {
  font-family: var(--ff-font-display); font-weight: var(--ff-display-fw); text-transform: var(--ff-display-tt); letter-spacing: var(--ff-display-ls);
  font-size: 2rem; color: #ffffff;
}
.founder-role {
  font-size: 0.78rem; font-weight: 700;
  color: var(--ff-brand); text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--ff-brand-tint); border: 1px solid var(--ff-brand-soft);
  padding: 4px 12px; border-radius: 50px;
}
.founder-text p {
  font-size: 0.95rem; color: #ffffff;
  line-height: 1.85; margin-bottom: 16px;
}
.founder-text p:last-of-type { margin-bottom: 24px; }

.founder-socials {
  display: flex; gap: 12px; margin-top: 4px;
}
.founder-socials a {
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1.5px solid var(--ff-line-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--ff-muted-3); font-size: 1rem;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.founder-socials a:hover {
  border-color: var(--ff-brand);
  color: var(--ff-brand);
  background: var(--ff-brand-tint);
}

/* -- DIVIDER between founders -- */
.founder-row + .founder-row {
  padding-top: 100px;
  border-top: 1px solid var(--ff-line-faint);
}

/* -- CTA SECTION -- */
.about-cta {
  background: linear-gradient(135deg, #ffffff 0%, var(--ff-line-faint) 100%);
  padding: 90px 6%;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.about-cta::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
}
.about-cta-inner { position: relative; max-width: 560px; margin: 0 auto; }
.about-cta h2 {
  font-family: var(--ff-font-display); font-weight: var(--ff-display-fw); text-transform: var(--ff-display-tt); letter-spacing: var(--ff-display-ls);
  font-size: 2rem; color: var(--ff-brand);
  margin-bottom: 14px; line-height: 1.2;
}
.about-cta p {
  font-size: 0.95rem; color: var(--ff-muted-3);
  margin-bottom: 36px; line-height: 1.75;
}
.about-cta-btns {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.about-cta-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px;
  background: var(--ff-brand); color: #fff;
  border-radius: 50px; font-family: var(--ff-font-body);
  font-size: 0.92rem; font-weight: 700; text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  box-shadow: 0 4px 18px rgba(0,194,238,0.35);
}
.about-cta-btn-primary:hover {
  background: #00aed4;
  box-shadow: 0 6px 24px rgba(0,194,238,0.5);
  transform: translateY(-1px);
}
.about-cta-btn-ghost {
  display: inline-flex; align-items: center;
  padding: 14px 32px;
  border: 1.5px solid #383838; color: var(--ff-muted-3);
  border-radius: 50px; font-family: var(--ff-font-body);
  font-size: 0.92rem; font-weight: 700; text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.about-cta-btn-ghost:hover { border-color: var(--ff-muted-2); color: var(--ff-brand); }

/* -- RESPONSIVE -- */
@media (max-width: 960px) {
  .about-video-block,
  .about-video-block-reverse,
  .founder-row,
  .founder-row-reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 36px;
  }
  .about-video-block-reverse > *,
  .founder-row-reverse > * { direction: ltr; }

  /* On mobile the reversed rows show photo first, then text */
  .founder-row-reverse .founder-photo-wrap { order: -1; }

  .about-hero h1   { font-size: 2rem; }
  .about-section   { padding: 60px 6%; }
  .about-team-section { padding: 60px 6%; }
  .about-team-header  { margin-bottom: 48px; }
  .founder-row     { margin-bottom: 64px; }
  .founder-row + .founder-row { padding-top: 64px; }
  .about-video-label p { max-width: 100%; }
  .about-cta       { padding: 60px 6%; }
  .about-cta h2    { font-size: 1.6rem; }
}
@media (max-width: 600px) {
  .about-hero h1         { font-size: 1.6rem; }
  .about-hero            { padding: 52px 6% 44px; }
  .founder-name-row h3   { font-size: 1.5rem; }
  .about-team-header h2  { font-size: 1.6rem; }
}
/* =============================================================================
   TABBED STORY + FOUNDER GRID
   The page was 4492px (five screens): three structurally identical video
   sections stacked, then two full-width founder rows totalling 2150px on their
   own. The sections became tabs; the founders became cards side by side.
   ========================================================================== */

/* -- Founders as a two-up grid --------------------------------------------- */
.founder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  /* stretch, so two bios of different lengths still produce level cards */
  align-items: stretch;
  max-width: 980px;
  margin: 0 auto;
}

/* Each row was a horizontal photo + bio spanning the full width. As a card it
   stacks: portrait on top, bio beneath. */
.founder-grid .founder-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--ff-surface);
  border: 1px solid var(--ff-line-soft);
  border-radius: var(--ff-r-card-lg);
  box-shadow: 0 2px 12px rgba(16,24,40,0.06);
  overflow: hidden;
  margin-bottom: 0;
  transition: transform var(--ff-t), box-shadow var(--ff-t), border-color var(--ff-t);
}
.founder-grid .founder-row:hover {
  transform: translateY(-4px);
  border-color: var(--ff-brand-a18);
  box-shadow: 0 18px 40px rgba(16,24,40,0.12);
}

.founder-grid .founder-photo-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  /* 3:2 rather than 4:3 — the taller crop pushed the bios a long way down */
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 0;
  flex: none;
}
.founder-grid .founder-photo,
.founder-grid .founder-photo-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

.founder-grid .founder-text {
  padding: 22px 24px 24px;
  text-align: left;
}
.founder-grid .founder-name-row { justify-content: flex-start; }
.founder-grid .founder-socials { justify-content: flex-start; }

@media (max-width: 820px) {
  .founder-grid { grid-template-columns: 1fr; gap: 20px; max-width: 460px; }
}

@media (max-width: 768px) {
}

/* The founder name and bio were white because the rows used to sit directly on
   the dark team band. Inside a white card they need the normal text colours. */
.founder-grid .founder-name-row h3 { color: var(--ff-ink); font-size: 1.55rem; }
.founder-grid .founder-name-row { margin-bottom: 14px; gap: 10px; }
.founder-grid .founder-text p {
  color: var(--ff-muted-2);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 12px;
}
.founder-grid .founder-text p:last-of-type { margin-bottom: 18px; }

/* The placeholder kept its own aspect-ratio and radius, so when a portrait is
   missing it sat inside the frame instead of filling it. */
.founder-grid .founder-photo-placeholder {
  aspect-ratio: auto;
  box-shadow: none;
  font-size: 3rem;
}

/* =============================================================================
   FEATURE VIDEO + THREE-UP STORY ROW
   The page carried three near-identical video sections stacked vertically, and
   all three embeds were placeholders. One feature video now sits at the top and
   the three pieces of copy run side by side beneath it — same content, one
   screen instead of three.
   ========================================================================== */
.about-feature {
  background: var(--ff-surface-3);
  padding: 56px 6% 72px;
}
.about-feature-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.about-feature-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--ff-r-card-lg);
  overflow: hidden;
  background: var(--ff-ink);
  box-shadow: 0 24px 60px rgba(16,24,40,0.18);
}
.about-feature-video iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* -- Three-up story row ---------------------------------------------------- */
.about-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 44px;
}

.about-pillar {
  background: var(--ff-surface);
  border: 1px solid var(--ff-line-soft);
  border-radius: var(--ff-r-card);
  padding: 26px 24px 28px;
  box-shadow: 0 2px 10px rgba(16,24,40,0.05);
  transition: transform var(--ff-t), box-shadow var(--ff-t), border-color var(--ff-t);
}
.about-pillar:hover {
  transform: translateY(-4px);
  border-color: var(--ff-brand-a18);
  box-shadow: 0 16px 36px rgba(16,24,40,0.11);
}

.about-pillar-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--ff-r-tile);
  background: var(--ff-brand-tint);
  color: var(--ff-brand-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  margin-bottom: 16px;
}

.about-pillar .about-eyebrow { margin-bottom: 10px; }

.about-pillar h2 {
  font-family: var(--ff-font-display);
  font-weight: var(--ff-display-fw);
  text-transform: var(--ff-display-tt);
  letter-spacing: var(--ff-display-ls);
  font-size: 1.3rem;
  line-height: 1.06;
  color: var(--ff-ink);
  margin-bottom: 10px;
}

.about-pillar p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ff-muted-2);
}

@media (max-width: 900px) {
  .about-pillars { grid-template-columns: 1fr; gap: 16px; max-width: 460px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 768px) {
  .about-feature { padding: 32px 6% 48px; }
  .about-pillars { margin-top: 30px; }
}

/* At the full 1100px the 16:9 feature ran to 619px tall and pushed everything
   else off the fold. Capped so it still leads the page without owning it. */
.about-feature-video { max-width: 940px; margin: 0 auto; }

/* The founder cards were 732px each, mostly portrait. A wider crop and tighter
   rhythm brings the pair back to roughly one screen. */
.founder-grid .founder-photo-wrap { aspect-ratio: 16 / 10; }
.founder-grid .founder-text { padding: 20px 22px 22px; }
.about-team-section { padding: 68px 6% 76px; }
.about-team-header { margin-bottom: 44px; }

/* `.founder-row + .founder-row` used to draw the divider between two stacked
   rows (100px of top padding and a rule). Side by side in the grid that lands
   on the second card only, pushing its photo down and drawing a stray line. */
.founder-grid .founder-row + .founder-row {
  padding-top: 0;
  border-top: none;
}