/* ==========================================================================
   GAAB Website — about.css
   About page (premium, Apple-style). The navbar reuses the shared .navbar
   styles from components.css (identical to the home — dark glass).
   ========================================================================== */

.page-about { background: #FBF9F5; }

/* ==========================================================================
   SHARED — Apple Stories reveal (hero + team): centred header, image below
   that rises on scroll to cover the header (driven by about.js).
   ========================================================================== */
.about-hero {
  position: relative;
  min-height: 100vh;
  background: #FBF9F5;
  overflow: hidden;
}

.about-hero-header {
  position: relative;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  z-index: 2;
  will-change: opacity, filter;
}

.about-hero-image-wrapper,
.team-image-wrapper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 3;
  will-change: transform;
}

.about-hero-image,
.team-image {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   SECTION 1 — HERO
   ========================================================================== */
.about-hero {
  /* generous air above the About block */
  padding-top: clamp(210px, 25vh, 300px);
}

.about-hero-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2.8rem, 6vw, 5rem);
  color: #0A0A0A;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}

.about-hero-subtitle {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  color: #666;
  line-height: 1.5;
  max-width: 600px;
  margin: 0 auto;
}

.about-hero-image-wrapper {
  /* air below the About block, before the image */
  margin-top: clamp(56px, 8vh, 104px);
  padding: 0 24px;
}

.about-hero-image {
  height: clamp(440px, 74vh, 820px);
  border-radius: 28px;
}

/* ==========================================================================
   SECTION 2 — STORY / NEXTGEN / VISION (topographic contour canvas bg)
   ========================================================================== */
.about-story {
  position: relative;
  background: #FBF9F5;
  /* shorter top gap so the image and section 2 sit closer */
  padding: clamp(60px, 8vh, 104px) 24px clamp(120px, 16vh, 160px);
  overflow: hidden;
}

.story-sphere-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  z-index: 1;
  opacity: 0.6;
  pointer-events: none;
}

.story-content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.story-card {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 40px;
  padding: 48px 56px;
  background: rgba(251, 249, 245, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  align-items: start;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  will-change: transform, opacity;
}

.story-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.story-number {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 14px;
  color: #888;
  letter-spacing: 0.1em;
}

.story-text h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: #0A0A0A;
  line-height: 1.1;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

.story-text p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.05rem;
  color: #555;
  line-height: 1.6;
  margin: 0;
}

.story-text p + p {
  margin-top: 1em;
}

/* --- Collapsible body: ~2 lines by default, "Read more" reveals the rest --- */
.story-body {
  position: relative;
  overflow: hidden;
  max-height: 3.25em;                 /* ~2 lines at line-height 1.6 */
  transition: max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Soft fade over the clipped text while collapsed. */
.story-body::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.8em;
  background: linear-gradient(to bottom, rgba(251, 249, 245, 0), rgba(251, 249, 245, 0.95));
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.story-card.is-expanded .story-body::after { opacity: 0; }

/* Cards whose text already fits: no clamp, no toggle. */
.story-card--nofold .story-body { max-height: none; }
.story-card--nofold .story-body::after,
.story-card--nofold .story-toggle { display: none; }

.story-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: #3A5A9F;
  transition: gap 0.25s ease, color 0.25s ease;
}

.story-toggle:hover { gap: 9px; color: #1B3A6B; }

.story-toggle__icon { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.story-card.is-expanded .story-toggle__icon { transform: rotate(180deg); }

/* ==========================================================================
   SECTION 3 — MEET THE TEAM (Apple Stories: image rises to cover the header)
   ========================================================================== */
.about-team {
  position: relative;
  overflow: hidden;
  background: #FBF9F5;
  padding-top: clamp(110px, 14vh, 170px);
  padding-bottom: clamp(48px, 7vh, 90px);
}

/* Top bar: left-aligned header + carousel arrows on the right. */
.team-topbar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.team-header {
  position: relative;
  text-align: left;
  will-change: opacity, transform;
}

.team-eyebrow {
  display: block;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #888;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.team-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  color: #0A0A0A;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.02em;
}

/* --- Carousel arrows ----------------------------------------------------- */
.team-carousel__nav {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.team-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(10, 14, 20, 0.14);
  background: #FFFFFF;
  color: #0A0E14;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease,
              transform 0.3s ease, opacity 0.3s ease;
}

.team-carousel__arrow:hover {
  background: #0A0E14;
  border-color: #0A0E14;
  color: #FFFFFF;
  transform: translateY(-2px);
}

.team-carousel__arrow:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
  background: #FFFFFF;
  border-color: rgba(10, 14, 20, 0.14);
  color: #0A0E14;
}

/* --- Carousel viewport + track ------------------------------------------- */
.team-carousel {
  max-width: 1200px;
  margin: clamp(36px, 5vh, 60px) auto 0;
  padding: 0 24px;
  overflow: hidden;
}

.team-carousel__track {
  display: flex;
  gap: 14px;
  will-change: transform;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Intro card + 3 photos show fully and a 4th peeks in from the right. Tall
   (5:7) and tightly gapped so the cards feel substantial, like the reference. */
.team-card {
  position: relative;
  flex: 0 0 23%;
  aspect-ratio: 5 / 7;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-light-gray, #EFEDE8);
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.06),
    0 14px 28px -10px rgba(16, 24, 40, 0.14);
}

.team-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

/* Intro card — same language as the home category CTA card (navy GAAB). */
.team-card--intro {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  background:
    radial-gradient(125% 90% at 22% 12%, rgba(58, 90, 159, 0.55) 0%, rgba(58, 90, 159, 0) 55%),
    linear-gradient(158deg, #1F4178 0%, #152D52 48%, #0E1B38 100%);
}

.team-card__eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--weight-regular);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 14px;
}

.team-card__intro {
  font-family: var(--font-sans);
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  font-weight: var(--weight-medium);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  margin: 0;
}

/* Tablet: intro card + 2 photos full, a 3rd peeking. */
@media (max-width: 1024px) {
  .team-card { flex: 0 0 30%; }
}

/* --- Video teaser under the team image ----------------------------------- */
/* Two editorial previews side by side (16:9), cinematic + quiet luxury. */
.about-team-videos {
  max-width: 1200px;
  margin: 0 auto;
  /* Side padding locked to 24px so the edges line up EXACTLY with the team
     carousel above (same max-width 1200 + 24px padding = 1152px content). */
  padding: clamp(28px, 5vh, 64px) 24px clamp(80px, 12vh, 160px);
}

.video-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 36px);
}

/* Apple-style card: image on top, solid dark caption strip below. */
.team-video-trigger {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  /* Uniform GAAB-blue shadow — ties the previews into the brand palette. */
  box-shadow: 0 10px 40px -6px rgba(27, 58, 107, 0.38);
  transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.team-video-trigger:hover,
.team-video-trigger:focus-visible {
  box-shadow: 0 18px 60px -8px rgba(27, 58, 107, 0.5);
}

/* --- Image area --- */
.video-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.team-video-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.05) saturate(0.95) brightness(0.98);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.team-video-trigger:hover .team-video-poster,
.team-video-trigger:focus-visible .team-video-poster {
  transform: scale(1.03);
}

/* Subtle centred play button over the image. */
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff;
  transition: background 0.3s ease, transform 0.3s ease;
}
.video-play svg { transform: translateX(1px); }
.team-video-trigger:hover .video-play,
.team-video-trigger:focus-visible .video-play {
  background: rgba(255, 255, 255, 0.26);
  transform: translate(-50%, -50%) scale(1.06);
}

/* --- Dark caption strip --- */
.video-caption {
  display: flex;
  flex-direction: column;
  align-items: center;      /* centred like the Apple reference */
  text-align: center;
  gap: 9px;
  background: #0E1117;
  padding: clamp(26px, 3vw, 38px) clamp(24px, 3vw, 36px) clamp(28px, 3.4vw, 40px);
}
.video-overtitle {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.video-heading {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
.video-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--color-blue-gaab-light);
  transition: color 0.2s ease;
}
.video-cta svg { transform: translateY(0.5px); }
.video-cta__arrow { transition: transform 0.25s ease; }
.team-video-trigger:hover .video-cta,
.team-video-trigger:focus-visible .video-cta { color: #5B82C9; }
.team-video-trigger:hover .video-cta__arrow,
.team-video-trigger:focus-visible .video-cta__arrow { transform: translateX(3px); }

/* Mobile: stack the two previews. */
@media (max-width: 768px) {
  .video-row { grid-template-columns: 1fr; gap: 22px; }
}

/* --- Video popup modal ---------------------------------------------------- */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.video-modal[hidden] { display: none; }
.video-modal.is-open { opacity: 1; }

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.82);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.video-modal__dialog {
  position: relative;
  width: min(1000px, 92vw);
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  transform: scale(0.96);
  transition: transform 0.25s ease;
}

.video-modal.is-open .video-modal__dialog { transform: scale(1); }

.video-modal__video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  object-fit: contain;
}

.video-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: background 0.2s ease;
}

.video-modal__close:hover { background: rgba(255, 255, 255, 0.3); }

/* Video cards — mobile.
   The card used to carry `width: calc(100% - 32px)`. It is a grid item, so an
   explicit width kills the default justify-self:stretch: the card went 32px
   narrower AND stuck to the left of its column, leaving a white gutter down the
   right-hand side. That gutter is the "franja blanca" — the card reads as cut.
   Full width + the row's own padding restores a centred card.

   The black block is a flat #0E1117 on .video-caption (no gradient). It looked
   like a 50/50 split because the poster is width-driven (aspect-ratio 16/10 →
   ~194px tall at 390px) while every value in the caption bottoms out at its
   clamp() minimum (~155px) and never shrinks. Tightening the caption on mobile
   restores the desktop-like ratio, so the lower block reads as a deliberate
   black text panel rather than half the card. */
@media (max-width: 768px) {
  .team-video-trigger { width: 100%; }

  /* A little more poster, a little less black. */
  .video-media { aspect-ratio: 16 / 11; }

  .video-caption {
    gap: 7px;
    padding: 18px 20px 20px;
  }
  /* Notoriously smaller, per the brief — it was a fixed 12px on every screen. */
  .video-overtitle { font-size: 9.5px; letter-spacing: 0.1em; }
  .video-heading { font-size: 1.25rem; line-height: 1.15; }
  .video-cta { font-size: 13px; }
}

/* ==========================================================================
   SECTION 4 — FAQs (premium two-column editorial layout)
   ========================================================================== */
.about-faqs {
  background: #FBF9F5;
  padding: clamp(100px, 14vh, 170px) 24px;
}

.faqs-layout {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

/* Left — sticky editorial header + CTA */
.faqs-aside { position: sticky; top: 120px; }

.faqs-eyebrow {
  display: inline-block;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--color-blue-gaab, #1B2C5C);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.faqs-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 3rem);
  color: #0A0A0A;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.faqs-subtitle {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.05rem;
  color: #666;
  line-height: 1.55;
  max-width: 360px;
  margin: 0;
}

.faqs-cta {
  margin-top: clamp(36px, 5vh, 56px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.faqs-cta-label {
  font-size: 0.95rem;
  color: #888;
}

/* Right — numbered accordion, editorial divider lines (no floating cards) */
.faqs-list {
  border-top: 1px solid rgba(10, 10, 10, 0.12);
}

.faq-item {
  border-bottom: 1px solid rgba(10, 10, 10, 0.12);
  transition: background 0.3s ease;
}

.faq-item:hover { background: rgba(255, 255, 255, 0.45); }

.faq-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 40px 1fr 28px;
  align-items: center;
  gap: 18px;
  padding: 30px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.faq-num {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #999;
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
}

.faq-item.open .faq-num { color: var(--color-blue-gaab, #1B2C5C); }

.faq-q {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  color: #0A0A0A;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* + / − icon drawn in CSS (vertical bar collapses on open) */
.faq-icon {
  position: relative;
  width: 20px;
  height: 20px;
  justify-self: end;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: #0A0A0A;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-icon::before { width: 15px; height: 1.6px; transform: translate(-50%, -50%); }
.faq-icon::after  { width: 1.6px; height: 15px; transform: translate(-50%, -50%); }
.faq-item.open .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-content p {
  margin: 0;
  padding: 0 16px 32px 74px;   /* align body under the question, past the number */
  color: #555;
  line-height: 1.6;
  font-size: 1rem;
}

.faq-item.open .faq-content { max-height: 320px; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  background: #1B2C5C;
  color: #fff;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.3s ease, background 0.3s ease;
}

.btn-primary:hover {
  transform: scale(1.03);
  background: #0F1E40;
}

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 768px) {
  /* The fixed navbar ends ~102px down (34px announce bar + padding + 40px bar),
     so 116px left only ~14px of clearance and the title read as glued to it.
     min-height:100vh + padding-bottom:0 elimina el hueco enorme que quedaba
     entre la imagen y el bloque "01 History of GAAB" en mobile. */
  .about-hero {
    padding-top: 164px;
    padding-bottom: 0;
    min-height: auto;
  }
  .about-hero-title { font-size: clamp(1.8rem, 6vw, 2.5rem); }
  /* Two lines on a phone. It inherited 17.6px and ran to three; 15px is the
     measured threshold at 390px, so this sits just under it and scales down with
     the viewport rather than spilling back to three. The 11.5px floor is what
     keeps a 320px handset at two lines — a 12.5px floor tipped it to three. */
  .about-hero-subtitle { font-size: clamp(11.5px, 3.6vw, 14.5px); line-height: 1.45; }
  .about-hero-image-wrapper { margin-top: 32px; padding: 0 16px; }
  .about-hero-image { height: clamp(180px, 30vh, 280px); border-radius: 16px; }

  /* Tighter gap to the hero image above — el 44px anterior sumaba con el hueco
     de min-height:100vh; ahora el hero termina donde termina la imagen y este
     padding es la ÚNICA separación hasta el bloque "01". */
  .about-story { padding: 28px 20px 84px; }
  .story-sphere-canvas { width: 400px; height: 400px; }
  .story-card { grid-template-columns: 1fr; gap: 12px; padding: 26px 24px; }

  /* The card was still wearing desktop's type scale: a 28.8px headline on a
     390px screen ate the card. Whole block steps down together so it stays
     proportional rather than just shrinking the heading.
     .story-body's collapsed height is set in em, so the 2-line "Read more"
     preview follows the new size automatically — no JS change needed. */
  .story-number { font-size: 12px; }
  .story-card h3 { font-size: 1.32rem; line-height: 1.2; }
  .story-body p { font-size: 14.5px; line-height: 1.55; }
  .story-toggle__label { font-size: 13px; }

  .about-team { padding-top: 100px; }
  .team-title { font-size: clamp(1.7rem, 6vw, 2.4rem); }
  .team-topbar { padding: 0 20px; align-items: center; }
  .team-carousel { padding: 0 0 0 20px; margin-top: 32px; }
  /* ~2.5 cards per view (was 82% = barely 1.2): smaller cards make it obvious
     the row keeps going, so people actually swipe through the whole team.
     about.js measure() reads the real card width at runtime, so the arrows and
     maxIndex follow this basis automatically. */
  .team-card { flex: 0 0 38%; border-radius: 14px; }
  .team-card--intro { padding: 16px; }
  .team-card__eyebrow { font-size: 9px; letter-spacing: 0.08em; }
  .team-card__intro { font-size: 0.78rem; line-height: 1.35; }
  /* Smaller arrows on phones. */
  .team-carousel__arrow { width: 42px; height: 42px; }

  .about-faqs { padding: 90px 20px; }
  .faqs-layout { grid-template-columns: 1fr; gap: 40px; }
  .faqs-aside { position: static; }
  .faqs-subtitle { max-width: none; }
  .faq-trigger { grid-template-columns: 32px 1fr 24px; gap: 14px; padding: 24px 8px; }
  .faq-content p { padding: 0 8px 26px 46px; }
}


/* ==========================================================================
   INTERLUDE — scroll-reveal statement between the team and the videos.
   The .text-reveal class (animations.css) handles the grey→solid fill;
   here we only set the type scale and the generous vertical rhythm.
   ========================================================================== */
.about-interlude {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(110px, 20vh, 240px) 24px;   /* extra air above & below */
  text-align: center;
}
.about-interlude__text {
  font-family: var(--font-sans);
  font-size: clamp(1.65rem, 3.4vw, 2.85rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.02em;
}


/* ==========================================================================
   CLOSING CARDS — Apple-style shop + contact, between FAQ and footer.
   ========================================================================== */
.about-close {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(36px, 5vh, 72px) 24px clamp(72px, 11vh, 130px);
}
.about-close__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 32px);
}
.close-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #F1EFEA;
  border-radius: var(--radius-xl);
  padding: clamp(46px, 5vw, 72px) clamp(28px, 4vw, 48px);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.3, 1), box-shadow 0.35s ease;
}
.close-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 54px -18px rgba(16, 24, 40, 0.22);
}
.close-card__icon {
  display: inline-flex;
  color: var(--color-blue-gaab);
  margin-bottom: 26px;
}
.close-card__title {
  font-family: var(--font-sans);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #0A0A0A;
  margin: 0 0 24px;
}
.close-card__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}
.close-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--weight-medium);
  color: var(--color-blue-gaab);
  text-decoration: none;
  transition: color 0.2s ease;
}
.close-card__arrow { display: inline-block; transition: transform 0.25s ease; }
.close-card__link:hover { color: var(--color-blue-gaab-dark); }
.close-card__link:hover .close-card__arrow { transform: translateX(3px); }
.close-card__phone {
  font-family: var(--font-sans);
  font-size: 15px;
  color: #6B6B6B;
  margin: 6px 0 0;
}
.close-card__phone a { color: var(--color-blue-gaab); text-decoration: none; }
.about-close__legal {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 13px;
  color: #9A9A9A;
  margin: clamp(28px, 4vh, 44px) 0 0;
}

@media (max-width: 768px) {
  .about-close__grid { grid-template-columns: 1fr; gap: 18px; }
}


/* Headlines → --font-display (Archivo); rest stays Inter. Revert via variables.css. */
.about-hero-title,
.story-text h3,
.team-title,
.faqs-title,
.about-interlude__text,
.close-card__title {
  font-family: var(--font-display);
  letter-spacing: -0.035em;   /* global headline tracking — tightened */
}