/* ══════════════════════════════════════════════
   TERZA STUDIO — about page
   Layout only; every colour, face and step comes
   from the tokens in css/colors|typography|spacing.
   ══════════════════════════════════════════════ */

/* the nav is fixed, so the first section has to clear it */
.about-purpose {
  padding-top: clamp(140px, 16vh, 200px);
  background: var(--color-bg-subtle);
  /* .section clips to contain its parallax backdrop; this one has none, and
     the clip was cutting the team-map card off at the section boundary */
  overflow: visible;
}

.purpose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(var(--space-xl), 6vw, var(--space-3xl));
  align-items: center;
}

.purpose-title {
  font-size: var(--text-72px);
  line-height: var(--lh-1-06);
  margin-bottom: var(--space-lg);
}

.purpose-desc {
  margin: 0;
  max-width: 46ch;
  color: var(--color-text-muted);
  font-size: var(--text-18px);
}

/* ratio on the figure, not the image — see the note in articles.css */
.purpose-media {
  margin: 0;
}

/* the frame owns the crop and the rounded edge, so the figure itself can stay
   unclipped and let a hovered card rise clear of the photo */
.team-map-frame {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
}

.purpose-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ══ TEAM MAP ═════════════════════════════════ */
/* the group photo doubles as an index of the collective: each silhouette is
   a link into #collective, and hovering one floats that person's card over
   the frame. no JS — :has() reads the hover state up to the figure */
.team-map {
  position: relative;
}

.team-map-hits {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* only the silhouettes take the pointer; the gaps between people don't */
  pointer-events: none;
}

/* the colour grade of the same frame, clipped to one silhouette each and
   stacked on the greyscale photo — hovering brings that person back to life */
.team-map-colour {
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease-out-expo);
  /* matched to the card's grace so the photo does not drop to grey during
     the hand-off from silhouette to card */
  transition-delay: .12s;
}

.team-map-hit use {
  /* `all`, not the default: the shape is unpainted and would otherwise
     never take a pointer at all */
  pointer-events: all;
  cursor: pointer;
  fill: transparent;
}

/* colour alone carries the hover, but colour alone cannot carry focus —
   keyboard users get a traced ring too. :focus-visible keeps it off the
   mouse path, so the hover stays clean */
.team-map-hit:focus {
  outline: none;
}

.team-map-hit:focus-visible use {
  fill: transparent;
  stroke: var(--color-accent);
  stroke-width: 9;
  stroke-linejoin: round;
}

.team-card {
  position: absolute;
  /* clears the top edge rather than sitting on the photo — the whole point is
     to see who you are hovering, and a card over the face defeats it */
  bottom: 87%;
  z-index: 2;
  width: min(64%, 290px);
  padding: var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xs);
  box-shadow: 0 20px 44px -20px rgba(var(--color-espresso-rgb), .5);
  opacity: 0;
  visibility: hidden;
  translate: 0 10px;
  /* no `pointer-events: none`: `visibility: hidden` already takes the card out
     of the pointer's way while it is closed, and leaving it interactive while
     open is what lets it hold its own hover */
  transition: opacity .35s var(--ease-out-expo), translate .35s var(--ease-out-expo),
    visibility .35s;
  /* opening is instant, closing waits — the pointer needs a moment to cross
     the strip of photo between a silhouette and the card, and that strip
     belongs to nobody, so without the grace the card drops out mid-journey */
  transition-delay: .12s;
}

.team-card[data-member="marshall"] {
  left: 4%;
}

/* left+transform centres it, leaving `translate` free for the entry motion */
.team-card[data-member="ruth"] {
  left: 50%;
  transform: translateX(-50%);
}

.team-card[data-member="sindhu"] {
  right: 4%;
}

.team-map:has(.team-map-hit[data-member="marshall"]:is(:hover, :focus-visible)) .team-card[data-member="marshall"],
.team-map:has(.team-map-hit[data-member="ruth"]:is(:hover, :focus-visible)) .team-card[data-member="ruth"],
.team-map:has(.team-map-hit[data-member="sindhu"]:is(:hover, :focus-visible)) .team-card[data-member="sindhu"] {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s;
}

/* the card holds itself open once the pointer arrives on it, so reading it is
   not a race against the silhouette's hover. one rule covers all three: a
   closed card is `visibility: hidden` and cannot be hovered into this state */
.team-card:hover {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s;
}

.team-map:has(.team-map-hit[data-member="marshall"]:is(:hover, :focus-visible)) .team-map-colour[data-member="marshall"],
.team-map:has(.team-map-hit[data-member="ruth"]:is(:hover, :focus-visible)) .team-map-colour[data-member="ruth"],
.team-map:has(.team-map-hit[data-member="sindhu"]:is(:hover, :focus-visible)) .team-map-colour[data-member="sindhu"],
.team-map:has(.team-card[data-member="marshall"]:hover) .team-map-colour[data-member="marshall"],
.team-map:has(.team-card[data-member="ruth"]:hover) .team-map-colour[data-member="ruth"],
.team-map:has(.team-card[data-member="sindhu"]:hover) .team-map-colour[data-member="sindhu"] {
  opacity: 1;
  transition-delay: 0s;
}

.team-card-role {
  margin: 0 0 2px;
  font-family: var(--font-ui);
  font-size: var(--text-12px);
  font-weight: var(--fw-600);
  letter-spacing: var(--ls-0-16em);
  text-transform: uppercase;
  color: var(--color-accent);
}

.team-card-name {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-26px);
}

.team-card-desc {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-14px);
  line-height: var(--lh-1-4);
  color: var(--color-text-muted);
}

.team-card-notable {
  margin: 0 0 var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--text-20px);
}

.team-card-projects {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-14px);
  line-height: var(--lh-1-4);
  color: var(--color-text-muted);
}

.team-card-projects li {
  position: relative;
  padding-left: 14px;
}

.team-card-projects li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-text-subtle);
}

.team-card-cta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-14px);
  color: var(--color-text);
}

.team-card-cta svg {
  color: #0a66c2;
}

/* both card links are pointer-only affordances: the card is aria-hidden and
   the same two destinations are reachable from #collective below, so nothing
   here is the only route to anything */
.team-card-project-link,
.team-card-cta {
  text-decoration: none;
  transition: color .25s var(--ease-out-expo);
}

.team-card-project-link {
  /* underlined so it reads as a link inside a paragraph of plain list text */
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.team-card-project-link:hover,
.team-card-cta:hover {
  color: var(--color-accent);
}

.team-card-project-link:hover {
  text-decoration-color: var(--color-accent);
}

/* the frame gets too small to aim at, and the collective grid below already
   carries every one of these cards in full */
/* the map is a hover affordance and nothing else: with no hover there is no
   way to aim at a silhouette and the cards can never open. so it is gated on
   the input device, not on width — a tablet with a trackpad gets it, touch-only
   gets the #collective grid below, which already carries the same names, roles,
   projects and links. hidden by default so the fallback is the accessible one:
   the same way the custom cursor and the glass-card light are gated */
.team-map-hits,
.team-card {
  display: none;
}

@media (hover: hover) and (pointer: fine) {

  .team-map-hits,
  .team-card {
    display: block;
  }
}

/* the band changes do the separating here, so drop the shared hairline
   (matches .section+.section specificity, and this sheet loads later) */
.section.about-think,
.section.about-collective,
.section.about-faq {
  border-top: 0;
}

/* ══ HOW WE THINK ═════════════════════════════ */
.think-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--space-xl), 6vw, var(--space-3xl));
  align-items: start;
}

.think-quote {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-400);
  font-size: var(--text-34px);
  line-height: var(--lh-1-24);
  letter-spacing: var(--ls-neg-0-015em);
  text-wrap: balance;
}

.think-desc {
  margin: 0;
  max-width: 42ch;
  color: var(--color-text-subtle);
  font-size: var(--text-18px);
}

.principles {
  display: grid;
  gap: var(--space-xl);
  /* drops the stack onto the quote's optical baseline */
  padding-top: var(--space-lg);
}

.principle-title {
  font-size: var(--text-24px);
  margin-bottom: var(--space-sm);
}

.principle-desc {
  margin: 0;
  max-width: 44ch;
  color: var(--color-text-muted);
  font-size: var(--text-18px);
}

/* ══ THE COLLECTIVE ═══════════════════════════ */
.collective-title {
  font-size: var(--text-64px);
  margin-bottom: var(--space-xl);
}

.collective-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--space-lg), 3vw, var(--space-xl));
}

.member-card {
  display: flex;
  flex-direction: column;
}

/* frame owns the ratio — see the note in articles.css */
.member-photo-frame {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  /* same corner as the purpose hero image above */
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-md);
  transition: border-color .4s var(--ease-out-expo);
}

.member-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-card:hover .member-photo-frame {
  border-color: var(--color-border);
}

.member-role {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-ui);
  font-size: var(--text-14px);
  font-weight: var(--fw-600);
  letter-spacing: var(--ls-0-16em);
  text-transform: uppercase;
  color: var(--color-accent);
}

.member-name {
  font-size: var(--text-24px);
  margin-bottom: var(--space-sm);
}

.member-desc {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-16px);
}

.member-notable {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-subtle);
}

.member-notable-title {
  font-size: var(--text-18px);
  margin-bottom: var(--space-xs);
}

.member-projects {
  display: grid;
  gap: 4px;
  font-size: var(--text-16px);
  color: var(--color-text-muted);
}

.member-projects li {
  padding-left: 1em;
  position: relative;
}

.member-projects li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

.member-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* pins the link to the card foot so uneven bios still line up */
  margin-top: auto;
  padding-top: var(--space-md);
  width: fit-content;
  font-family: var(--font-ui);
  font-size: var(--text-16px);
  color: var(--color-text-subtle);
  transition: color .3s var(--ease-out-expo);
}

.member-link:hover {
  color: var(--color-accent);
}

/* ══ FAQ ══════════════════════════════════════ */
.faq-title {
  font-size: var(--text-64px);
  margin-bottom: var(--space-xl);
}

.faq-list {
  display: grid;
}

.faq-item {
  border-bottom: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xs);
  transition: background .4s var(--ease-out-expo);
}

.faq-item.is-open {
  background: var(--color-bg-subtle);
  border-bottom-color: transparent;
}

.faq-trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-md) var(--space-md);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  color: var(--color-text);
}

.faq-number {
  font-family: var(--font-ui);
  font-size: var(--text-14px);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-subtle);
  transition: color .3s var(--ease-out-expo);
}

.faq-item.is-open .faq-number,
.faq-trigger:hover .faq-number {
  color: var(--color-accent);
}

.faq-question {
  font-size: var(--text-16px);
  line-height: var(--lh-1-4);
}

/* a chevron drawn from two borders, so there is no icon to load */
.faq-chevron {
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--color-text-subtle);
  border-bottom: 1.5px solid var(--color-text-subtle);
  rotate: 45deg;
  translate: 0 -2px;
  transition: rotate .4s var(--ease-out-expo), translate .4s var(--ease-out-expo);
}

.faq-item.is-open .faq-chevron {
  rotate: 225deg;
  translate: 0 2px;
}

/* 0fr → 1fr animates a height the panel does not have to know */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease-out-expo);
}

.faq-item.is-open .faq-panel {
  grid-template-rows: 1fr;
}

.faq-panel-inner {
  overflow: hidden;
}

.faq-panel-inner p {
  margin: 0;
  padding: 0 var(--space-3xl) var(--space-md) calc(var(--space-md) + 26px);
  max-width: 92ch;
  color: var(--color-text-muted);
  font-size: var(--text-18px);
}

/* ══ CTA BAND ═════════════════════════════════ */
.about-cta {
  padding-block: clamp(64px, 8vw, var(--space-3xl));
  background: var(--color-bg-subtle);
  border-top: 1px solid var(--color-border-subtle);
}

.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cta-eyebrow {
  color: var(--color-accent);
  font-weight: var(--fw-600);
}

.cta-title {
  font-size: var(--text-64px);
  line-height: var(--lh-1-14);
  max-width: 18ch;
  margin-bottom: var(--space-md);
}

.cta-desc {
  margin: 0 0 var(--space-xl);
  max-width: 58ch;
  color: var(--color-text-muted);
  font-size: var(--text-18px);
}

.cta-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.cta-input {
  min-width: min(320px, 78vw);
  padding: 15px 18px;
  font-family: var(--font-sans);
  font-size: var(--text-14px);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  transition: border-color .3s var(--ease-out-expo);
}

.cta-input::placeholder {
  color: var(--color-text-subtle);
}

.cta-input:focus-visible {
  border-color: var(--color-accent);
  outline-color: var(--color-accent);
}

/* ══ FOOTER CTA — this page only ══════════════ */
/* the shared footer opens on the word-pick headline; About trades that for a
   single centred proposition and one button, so the page closes on the
   argument rather than on a toy. the title and copy reuse the .cta-* pair
   already defined above, which carries their type ramp with it */
.footer-cta-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* stands in for the margin .footer-headline used to hold off .footer-grid */
  margin-bottom: var(--space-xl);
}

/* ══ RESPONSIVE ═══════════════════════════════ */
@media (max-width: 1200px) {
  .faq-panel-inner p {
    padding-right: var(--space-lg);
  }
}

@media (max-width: 1200px) {

  .purpose-grid,
  .think-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* the photo leads on narrow screens, the way the stack reads there */
  .purpose-media {
    order: -1;
  }

  .principles {
    padding-top: 0;
  }
}

@media (max-width: 1200px) {
  .faq-trigger {
    padding-inline: var(--space-sm);
    gap: var(--space-sm);
  }

  .faq-panel-inner p {
    padding-left: calc(var(--space-sm) + 24px);
  }

  .cta-form {
    width: 100%;
  }

  .cta-input,
  .cta-form .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ══ HUMANS BEHIND THE WORK — phone + tablet ══ */
/* stacked cards with a full-width square portrait each run to roughly three
   screens of scrolling, and you cannot see who the team is without travelling.
   so below the boundary the card turns on its side: the portrait keeps its
   square crop at thumbnail size, and everything else — role, name, bio, the
   project credit and the profile link — runs down one column beside it.
   done with grid areas over the existing DOM order — no markup change */
@media (max-width: 1200px) {
  .collective-grid {
    grid-template-columns: minmax(0, 1fr);
    /* the cards carry their own rule now, so they need less air between them */
    gap: var(--space-lg);
    /* one column across a tablet would run the bios to ~110 characters a
       line. the list keeps a reading measure and lets the section breathe
       to its right, the way the left-aligned title above it already does */
    max-width: 720px;
  }

  .member-card {
    display: grid;
    /* the thumbnail tracks the viewport so it stays in proportion to the text
       beside it — a 128px cap looked stranded next to a tablet-width column */
    grid-template-columns: clamp(96px, 20vw, 176px) minmax(0, 1fr);
    /* everything past the portrait shares one left edge with the bio, so the
       card reads as a single column of text with a picture beside its head */
    grid-template-areas:
      "photo role"
      "photo name"
      "photo desc"
      ".     notable"
      ".     link";
    column-gap: var(--space-md);
    align-content: start;
  }

  /* every card after the first gets a hairline, so the stack reads as a list
     of people rather than three floating blocks */
  .member-card + .member-card {
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border-subtle);
  }

  .member-photo-frame {
    grid-area: photo;
    /* without this the 3-row span stretches the frame and `aspect-ratio`
       loses the argument, so the portrait would distort */
    align-self: start;
    margin-bottom: 0;
  }

  .member-role {
    grid-area: role;
  }

  .member-name {
    grid-area: name;
    /* the bio follows immediately; the card's own spacing carries the gap */
    margin-bottom: var(--space-xs);
  }

  .member-desc {
    grid-area: desc;
  }

  .member-notable {
    grid-area: notable;
    /* a rule inside a card that is already one row of a ruled list reads as
       a second divider competing with the real one between people */
    border-top: 0;
    /* the padding existed to hold the copy off that rule — with the rule
       gone it just doubles the gap, so one margin carries the spacing */
    padding-top: 0;
    margin-top: var(--space-sm);
  }

  .member-link {
    grid-area: link;
    /* `margin-top: auto` pinned the link to the foot of a flex column; in a
       grid row it has nothing to push against, so state the spacing instead */
    margin-top: 0;
    padding-top: var(--space-sm);
  }
}

/* ══ TYPE SCALE — breakpoint steps ════════════ */

@media (max-width: 1200px) {
  .purpose-title {
    font-size: var(--text-40px);
  }

  .collective-title {
    font-size: var(--text-36px);
  }

  .faq-title {
    font-size: var(--text-36px);
  }

  .cta-title {
    font-size: var(--text-34px);
  }

  .think-quote {
    font-size: var(--text-28px);
  }

  .member-name {
    font-size: var(--text-20px);
  }

  .principle-title {
    font-size: var(--text-20px);
  }
}

@media (max-width: 900px) {
  .purpose-title {
    font-size: var(--text-34px);
  }

  .collective-title {
    font-size: var(--text-30px);
  }

  .faq-title {
    font-size: var(--text-30px);
  }

  .cta-title {
    font-size: var(--text-28px);
  }

  .think-quote {
    font-size: var(--text-24px);
  }
}