/* ==========================================================================
   Sub-pages: Work · About · Contact  (builds on style.css tokens)
   ========================================================================== */

:root {
  --fs-lead: 32px;
  --fs-h2: 48px;
  --fs-person: 32px;
  --fs-mission: 32px;
}

/* ---------- shared sub-page frame ---------- */
.page--sub { padding-top: 160px; }
.page__inner--sub { padding: 0; gap: 160px; }

.roll-link[aria-current="page"] .roll-link__inner span:first-child { font-weight: 600; }

/* ==========================================================================
   Work
   ========================================================================== */
.intro { max-width: 700px; display: flex; flex-direction: column; gap: 24px; }
.intro__title { font-size: var(--fs-display); line-height: var(--lh-display); }
.intro__lead { font-size: var(--fs-lead); line-height: 1.4; font-weight: 500; }

.split--narrow { max-width: 940px; }
.split--narrow .split__label { width: 188px; }
.split--narrow .split__body { flex: 0 1 736px; gap: 48px; }
.split--narrow .split__title { max-width: 523px; }

/* ==========================================================================
   About
   ========================================================================== */
.page__inner--about { padding: 0; gap: 100px; }

.about-head { max-width: 700px; display: flex; flex-direction: column; gap: 24px; }
.about-head__title { font-size: var(--fs-display); line-height: var(--lh-display); }
.about-head h4, .contact__eyebrow, .contact__group h4 { line-height: 1.4; }
.split--about { padding-top: 40px; }

.about { display: flex; align-items: flex-start; gap: 10px; }

.about-nav {
  position: sticky;
  top: 200px;
  flex: none;
  width: 131px;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.about-nav a {
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: rgba(0, 0, 0, .6);
  transition: color .25s var(--ease), font-weight .25s;
}
.about-nav a:hover { color: var(--black); }
.about-nav a.is-active { color: var(--black); font-weight: 700; }

.about__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 100px; }
.about-section { scroll-margin-top: 130px; display: flex; flex-direction: column; }

.eyebrow {
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .6);
}
.about-section__text { display: flex; flex-direction: column; gap: 30px; }
.about-section__title { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.03em; max-width: 536px; font-weight: 500; }
.about-section__title--wide { max-width: 700px; }

strong { font-weight: 700; }

/* mission */
.about-section--mission { gap: 70px; }
.mission-copy { display: flex; flex-direction: column; gap: 40px; }
.mission-copy h2 { font-size: var(--fs-mission); line-height: 1.4; font-weight: 500; }
.mission-image { height: 650px; border-radius: 16px; overflow: hidden; background: #a5d2e6; }
.mission-image img { width: 100%; height: 100%; object-fit: cover; }

/* approach */
.about-section--approach { gap: 32px; }
.approach { display: flex; flex-direction: column; gap: 50px; }
.approach__cols { display: grid; grid-template-columns: repeat(3, 292px); gap: 21px; }
.approach article { display: flex; flex-direction: column; gap: 32px; }
.approach h3 { font-size: 24px; line-height: 1.4; font-weight: 500; }
.approach__wide { gap: 10px !important; }
.approach h4, .story p, .person__text h4 { font-size: 18px; line-height: 1.4; font-weight: 500; }

.inline-link { color: #09f; text-decoration: underline; text-underline-offset: 3px; }
.inline-link--approach { color: #0082d9; }
.inline-link:hover { opacity: .7; }

/* story */
.about-section--story { gap: 64px; }
.story { display: flex; gap: 80px; }
.story__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 25px; }
.story__col .btn-soft { margin-top: 7px; }

.btn-soft {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  height: 44px;
  padding: 0 16px;
  border-radius: 80px;
  background: rgba(0, 0, 0, .08);
  font-size: 16px;
  letter-spacing: -.02em;
  transition: background-color .25s var(--ease);
}
.btn-soft svg { width: 20px; height: 20px; padding: 3px; flex: none; transition: transform .25s var(--ease); }
.btn-soft:hover { background: rgba(0, 0, 0, .14); }
.btn-soft:hover svg { transform: translate(2px, -2px); }

/* team */
.about-section--team { gap: 64px; }
.team { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; row-gap: 64px; align-items: start; }
.person { display: flex; flex-direction: column; gap: 32px; }
.person--wide { grid-column: 1 / -1; }
.person__photo { width: 131px; height: 131px; border-radius: 200px; object-fit: cover; background: rgba(255, 255, 255, .5); }
.person__text { display: flex; flex-direction: column; gap: 4px; }
.person__name { font-size: var(--fs-person); line-height: 1.4; font-weight: 500; }
.person__text h4 + h4 { margin-top: 25px; }
.person__text h4:nth-child(3) { margin-top: 25px; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 120px;
  min-height: 100vh;
  padding: 160px var(--gutter) 48px;
}
.contact__row {
  width: 100%;
  max-width: 1800px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.contact__main { width: 500px; max-width: 100%; display: flex; flex-direction: column; gap: 64px; }
.contact__intro { display: flex; flex-direction: column; gap: 24px; }
.contact__eyebrow { color: var(--grey); }
.contact__title { font-size: var(--fs-display); line-height: var(--lh-display); }
.contact__copy { display: flex; flex-direction: column; gap: 40px; }
.contact__copy h3 { font-size: var(--fs-h3); line-height: 1.4; font-weight: 500; }

.contact__details { display: flex; flex-direction: column; gap: 48px; }
.contact__group { display: flex; flex-direction: column; gap: 16px; }
.contact__label { color: var(--grey); }

.contact__social { width: 300px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
.contact__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-link);
  line-height: 1.4;
}
.contact__group .contact__link { justify-content: flex-start; }
.contact__link svg { width: 16px; height: 16px; flex: none; transition: transform .25s var(--ease); }
.contact__link:hover svg { transform: translate(2px, -2px); }

.contact__credit {
  width: 100%;
  max-width: 1800px;
  color: #969696;
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1099.98px) {
  :root { --fs-lead: 24px; --fs-h2: 40px; --fs-person: 28px; --fs-mission: 26px; }
  .page--sub { padding-top: 160px; }
  .page__inner--sub { gap: 120px; }

  .split--narrow { max-width: none; }
  .split--narrow .split__label { width: 136px; }
  .split--narrow .split__body { flex: 1 1 0; }
  .split--narrow .split__title { max-width: 530px; }

  .about { flex-direction: column; gap: 40px; }
  .about-nav { position: static; width: auto; flex-direction: row; flex-wrap: wrap; gap: 8px 24px; padding: 0; }
  .about__content { width: 100%; gap: 80px; }
  .mission-image { height: 450px; }
  .approach__cols { grid-template-columns: repeat(3, 1fr); }
  .story { gap: 40px; }
  .team { column-gap: 40px; }

  .contact { padding: 160px var(--gutter) 48px; min-height: 0; }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 767.98px) {
  :root { --fs-lead: 20px; --fs-h2: 36px; --fs-person: 26px; --fs-mission: 24px; }
  .page--sub { padding-top: 120px; }
  .page__inner--sub { gap: 80px; }
  .page__inner--about { gap: 72px; }

  .intro__lead { line-height: 1.4; }
  .split--narrow .split__body { flex: none; }

  .about-nav { flex-direction: column; gap: 12px; }
  .about__content { gap: 65px; }
  .about-section--mission { gap: 32px; }
  .mission-copy { gap: 30px; }
  .mission-image { height: 250px; }
  .approach { gap: 40px; }
  .approach__cols { grid-template-columns: 1fr; gap: 40px; }
  .approach article { gap: 24px; }
  .about-section--story { gap: 32px; }
  .about-section--team { gap: 32px; }
  .story { flex-direction: column; gap: 25px; }
  .team { grid-template-columns: 1fr; row-gap: 48px; }
  .person--wide { grid-column: auto; }

  .contact { padding: 120px var(--gutter) 48px; gap: 80px; align-items: stretch; }
  .contact__row { flex-direction: column; align-items: flex-start; gap: 48px; }
  .contact__main { width: 100%; gap: 48px; }
  .contact__social { width: 100%; }
}