/* ABOUT page — layout only; components come from style.css */

/* ---------- hero ---------- */
.about-hero { padding-block: clamp(40px, 6.25vw, 90px) clamp(40px, 6.53vw, 94px); }
.about-hero__grid { display: grid; grid-template-columns: 1fr clamp(220px, 29.17vw, 420px); align-items: center; gap: 40px; }
.about-hero .sec-head { gap: 23px; }
.about-hero__badge { width: 100%; }

/* ---------- story ---------- */
.story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.story__quote { display: block; font-family: var(--font-display); font-size: 156px; line-height: 0.745; color: var(--red); }
.story__title { margin-top: 8px; font-weight: 900; font-size: clamp(22px, 2.23vw, 32px); line-height: 1.7; letter-spacing: 0.07em; word-break: auto-phrase; }

/* ---------- team: photo card + floating name cards ----------
   .team-card is the size container (1cqi = 1% of the photo width). The cards sit over each person
   (x = that person's centre in the photo); below 560px they drop to a row that overlaps the photo's bottom edge. */
.team { padding-bottom: calc(var(--section-y) + 12px); }
.team-card { container-type: inline-size; position: relative; margin-top: clamp(32px, 3.9vw, 56px); }
.team-card__photo { aspect-ratio: 1600 / 1068; }
.person {
  --tag: var(--pec-bg);
  position: absolute; bottom: 4cqi; left: var(--x); width: min(21cqi, 250px); translate: -50% 0; rotate: var(--tilt, 0deg);
  display: grid; justify-items: start; align-content: start; gap: 0.5cqi; /* row-stretched cards keep their pills the same height */
  padding: 1.4cqi 1.5cqi 1.3cqi; background: var(--white); border: var(--border); border-radius: 16px; box-shadow: var(--shadow);
}
.person--coo { --x: 24%; --tag: var(--kindai-bg); --tilt: -2deg; }
.person--ceo { --x: 49.5%; --tilt: 1.5deg; }
.person--chro { --x: 75%; --tag: var(--hot-bg); --tilt: -1.5deg; }
.person__role { padding: 4px 10px; border-radius: 999px; background: var(--tag); border: 2px solid var(--ink); font-family: var(--font-label); font-weight: 800; font-size: max(1cqi, 11px); line-height: 1.2; letter-spacing: 0.12em; }
.person__name { margin-top: 0.4cqi; font-family: var(--font-display); font-size: clamp(15px, 2cqi, 26px); line-height: 1.05; }
.person__jp { font-weight: 700; font-size: max(0.95cqi, 11px); line-height: 1.5; letter-spacing: 0.04em; opacity: 0.72; word-break: keep-all; } /* breaks only at the <wbr> */
@container (max-width: 559px) {
  .team-card__people { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: -28px 6px 0; }
  .person { position: static; width: auto; translate: none; padding: 10px 10px 9px; border-radius: 14px; box-shadow: var(--shadow-sm); }
  .person__role { padding: 3px 8px; font-size: 10px; }
  .person__name { font-size: 16px; }
  .person__jp { font-size: 10px; letter-spacing: 0; }
}

/* ---------- numbers ---------- */
.numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px; }
.numbers__value { font-family: var(--font-display); font-size: clamp(56px, 7.78vw, 112px); line-height: 1; white-space: nowrap; }
.numbers__item--pec .numbers__value { color: var(--pec-bg); }
.numbers__item--kindai .numbers__value { color: var(--kindai-bg); }
.numbers__item--hot .numbers__value { color: var(--hot-bg); }
.numbers .label { margin-top: 6px; }
.numbers__note { margin-top: 12px; font-size: 14px; line-height: 1.7; letter-spacing: 0.06em; }

/* ---------- timeline ---------- */
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
.timeline__card { --bg: var(--pec-bg); --fg: var(--pec-ink); background: var(--bg); color: var(--fg); border-radius: 20px; box-shadow: var(--shadow); padding: clamp(22px, 2.22vw, 32px); }
.timeline__card--kindai { --bg: var(--kindai-bg); --fg: var(--kindai-ink); }
.timeline__card--hot { --bg: var(--hot-bg); --fg: var(--hot-ink); }
.timeline__date { font-family: var(--font-display); font-size: clamp(30px, 3.33vw, 48px); line-height: 1; white-space: nowrap; }
.timeline__label { margin-top: 14px; font-size: 15px; }
.timeline__text { margin-top: 16px; font-weight: 700; font-size: 14px; line-height: 1.9; letter-spacing: 0.06em; word-break: auto-phrase; }

/* ---------- what's inside ---------- */
.inside {
  display: grid; grid-template-columns: 40% 1fr; grid-template-rows: 1fr auto auto 1fr; column-gap: clamp(32px, 5.14vw, 74px);
  grid-template-areas: "photo ." "photo head" "photo list" "photo .";
}
.inside__head { grid-area: head; }
.inside__photo { grid-area: photo; align-self: center; aspect-ratio: 4 / 5; border-radius: 22px; }
.inside__list { grid-area: list; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.inside__card { background: var(--white); border: var(--border); border-radius: 16px; padding: 20px 20px 16px; }
.inside__num { color: var(--red); }
.inside__name { margin-top: 9px; font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.1; }
.inside__jp { margin-top: 8px; font-size: 13px; line-height: 1.7; word-break: auto-phrase; }

/* ---------- CTA ---------- */
.cta { padding-block: clamp(64px, 6.4vw, 92px) clamp(64px, 5.83vw, 84px); }
.cta__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.cta__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 5vw, 72px); line-height: 0.92; }
.cta__sub { margin-top: 12px; } /* size/weight from .lead */

/* ---------- tablet: inside heading spans the top, photo + cards side by side ---------- */
@media (min-width: 768px) and (max-width: 1099px) {
  .inside { grid-template-rows: auto auto; grid-template-areas: "head head" "photo list"; }
  .inside__photo { margin-top: 36px; }
  .inside__list { align-self: center; }
}

/* ---------- tablet: story stacks ---------- */
@media (max-width: 899px) {
  .story__grid { grid-template-columns: 1fr; gap: 40px; }
  .story__title { font-size: 28px; }
  .story__grid > .stack { max-width: 40em; }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  .about-hero { padding-bottom: 48px; }
  .about-hero__grid { grid-template-columns: 1fr; gap: 24px; }
  .about-hero .sec-head { gap: 20px; }
  .about-hero .sec-head__sub { font-size: 16px; font-weight: 500; } /* mobile Figma: smaller, lighter hero sub (other subs stay 18px) */
  .about-hero__badge { width: 260px; }

  .story__grid { gap: 20px; }
  .story__grid > .stack { --stack: 20px; }
  .story__quote { font-size: 98px; line-height: 0.62; }
  .story__title { margin-top: 20px; font-size: clamp(18px, 5.6vw, 22px); letter-spacing: 0.05em; } /* longest <br> line (15 chars) fits 350px */

  .numbers { grid-template-columns: 1fr; gap: 26px; margin-top: 34px; }
  .numbers__value { font-size: 72px; }
  .numbers .label { margin-top: 0; font-size: 13px; }
  .numbers__note { margin-top: 4px; font-size: 13px; }

  .timeline { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .timeline__card { padding: 24px 22px 22px; }
  .timeline__date { font-size: 36px; }
  .timeline__label { margin-top: 10px; font-size: 13px; }
  .timeline__text { margin-top: 9px; font-size: 13px; }

  .inside { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "head" "photo" "list"; }
  .inside__photo { margin-top: 18px; box-shadow: var(--shadow-lg); border-radius: 20px; }
  .inside__list { gap: 16px 14px; margin-top: 16px; }
  .inside__card { padding: 12px 14px 13px; }
  .inside__name { margin-top: 4px; font-size: 20px; line-height: 1.35; }
  .inside__jp { margin-top: 2px; font-size: 12px; letter-spacing: 0; }

  .cta__row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cta__sub { margin-top: 19px; }
  .cta__btns { flex-direction: column; align-items: flex-start; --cluster: 12px; }
}