/* ==========================================================================
   Brand Identity page — page-brand-identity.php
   Figma: brand-page (1106:717) + brand-page-part2 (1109:366)
   ========================================================================== */

/* ---------- Hero (concept-hero) ---------- */
.brand-hero { position: relative; height: 741px; overflow: hidden; background: var(--color-white); }
.brand-hero__photo { position: absolute; left: 0; top: 261px; width: 100%; height: 480px; }
.brand-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.brand-hero__title {
  position: absolute; left: 0; top: 181px; width: 100%; text-align: center;
  font-family: var(--font-serif-en); font-weight: 300; font-size: 88px; line-height: 1.1; color: var(--color-ink);
}

@media (max-width: 900px) {
  .brand-hero { height: 360px; }
  .brand-hero__photo { top: 140px; height: 220px; }
  .brand-hero__title { top: 90px; font-size: 44px; }
}

/* ---------- Intro (01-hero) ---------- */
.brand-intro {
  border-bottom: 1px solid var(--color-gray-200);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-8);
  max-width: 880px;
  padding-block: var(--space-24);
}
.brand-intro__eyebrow { font-family: var(--font-sans-en); font-weight: 600; font-size: 14px; letter-spacing: 0.84px; text-transform: uppercase; color: var(--color-gray-500); }
.brand-intro__title { font-family: var(--font-serif-jp); font-weight: 400; font-size: 40px; line-height: 1.3; letter-spacing: 0; color: var(--color-ink); margin-top: var(--space-4); }
.brand-intro__text { font-family: var(--font-sans-en); font-size: 16px; line-height: 1.8; color: var(--color-gray-500); margin-top: var(--space-4); }

@media (max-width: 900px) {
  .brand-intro { padding-block: var(--space-16); }
  .brand-intro__title { font-size: 26px; }
}

/* ---------- Concept split ---------- */
.brand-concept { padding-block: var(--space-20); background: var(--color-gray-50); }
.brand-concept__split { display: flex; gap: var(--space-20); align-items: center; margin-top: var(--space-8); }
.brand-concept__left { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-8); height: 600px; }
.brand-concept__small-image { width: 295px; max-width: 100%; height: 221px; }
.brand-concept__small-image img { width: 100%; height: 100%; object-fit: cover; }
.brand-concept__heading { font-family: var(--font-serif-jp); font-weight: 400; font-size: 26px; line-height: 1.5; color: var(--color-ink); }
.brand-concept__en { font-family: var(--font-serif-en); font-style: italic; font-size: 18px; color: var(--color-gray-500); margin-top: var(--space-4); }
.brand-concept__body { font-family: var(--font-sans-en); font-size: 14px; line-height: 1.8; color: var(--color-gray-400); margin-top: var(--space-4); }
.brand-concept__right { flex: 0 0 720px; height: 600px; max-width: 55%; }
.brand-concept__right img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .brand-concept { padding-block: var(--space-12); }
  .brand-concept__split { flex-direction: column; }
  .brand-concept__left { height: auto; }
  .brand-concept__right { max-width: 100%; flex-basis: auto; height: 320px; }
}

/* ---------- What We Do ---------- */
.what-we-do { padding-block: var(--space-24); border-bottom: 1px solid var(--color-gray-200); }
.what-we-do__header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-12); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-gray-200); }
.what-we-do__title { font-family: var(--font-serif-jp); font-weight: 300; font-size: 36px; line-height: 1.3; color: var(--color-ink); margin-top: var(--space-4); max-width: 640px; }
.what-we-do__lead { max-width: 560px; font-size: 16px; line-height: 1.8; color: var(--color-gray-600); }
.what-we-do__list { display: flex; flex-direction: column; margin-top: var(--space-4); }
.what-we-do__row { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-6) 0; border-bottom: 1px solid var(--color-gray-200); }
.what-we-do__row:last-child { border-bottom: none; }
.what-we-do__row.is-image-first { flex-direction: row-reverse; }
.what-we-do__content { flex: 1; display: flex; flex-direction: column; gap: var(--space-4); }
.what-we-do__num { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-sans-en); font-size: 20px; color: var(--color-gray-500); }
.what-we-do__num span { display: inline-block; width: 16px; height: 1px; background: var(--color-gray-500); }
.what-we-do__row-title { font-family: var(--font-serif-jp); font-weight: 500; font-size: 22px; color: var(--color-ink); }
.what-we-do__row-text { font-size: 15px; line-height: 1.8; color: var(--color-gray-600); }
.what-we-do__image { flex: 0 0 520px; height: 360px; border-radius: var(--radius-sm); overflow: hidden; }
.what-we-do__image img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .what-we-do { padding-block: var(--space-12); }
  .what-we-do__header { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .what-we-do__title { font-size: 24px; }
  .what-we-do__row, .what-we-do__row.is-image-first { flex-direction: column; gap: var(--space-6); }
  .what-we-do__image { flex-basis: auto; width: 100%; height: 220px; }
}

/* ---------- Strengths ---------- */
.strengths { padding-block: var(--space-24); border-bottom: 1px solid var(--color-gray-200); }
.strengths__title { font-family: var(--font-serif-jp); font-weight: 300; font-size: 36px; color: var(--color-ink); margin-top: var(--space-4); }
.strengths__list { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-8); }
.strengths__divider { border: none; border-top: 1px solid var(--color-gray-200); margin: 0 0 var(--space-6); }
.strengths__row { display: flex; gap: var(--space-12); align-items: flex-start; }
.strengths__roman { flex: 0 0 80px; font-family: var(--font-serif-en); font-weight: 300; font-size: 36px; color: var(--color-gray-500); }
.strengths__body { flex: 1; display: flex; gap: var(--space-12); align-items: flex-start; }
.strengths__heading { flex: 0 0 280px; display: flex; flex-direction: column; gap: var(--space-2); }
.strengths__heading-title { font-family: var(--font-sans-jp); font-weight: 500; font-size: 18px; color: var(--color-ink); }
.strengths__heading-label { font-family: var(--font-sans-en); font-weight: 600; font-size: 14px; letter-spacing: 0.14px; color: var(--color-gray-400); }
.strengths__text { flex: 1; font-family: var(--font-sans-en); font-size: 16px; line-height: 1.8; color: var(--color-gray-500); }

@media (max-width: 900px) {
  .strengths { padding-block: var(--space-12); }
  .strengths__title { font-size: 24px; }
  .strengths__roman { font-size: 28px; flex-basis: auto; }
  .strengths__row { flex-direction: column; gap: var(--space-4); }
  .strengths__body { flex-direction: column; gap: var(--space-2); }
  .strengths__heading { flex-basis: auto; }
}