/* About page: hero, director's message, journey + values, statement. */

/* ---------- Hero ---------- */
.about-hero.image-hero { min-height: clamp(460px, 48vw, 640px); }
.about-hero h1 { font-size: clamp(40px, 4.6vw, 72px); line-height: 1.02; letter-spacing: -0.035em; max-width: 17ch; }
.about-hero .image-hero-copy { max-width: 620px; }
.about-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.about-hero-actions .button { min-height: 56px; padding: 0 26px; gap: 16px; border-radius: 12px; color: #fff; }
.about-hero-secondary.button { background: rgba(6, 27, 43, 0.45); border: 1px solid rgba(255, 255, 255, 0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.about-hero-secondary.button:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.about-hero-actions .button:focus-visible { outline: 3px solid var(--brand-cyan, #00b4ff); outline-offset: 3px; }

/* ---------- Director ---------- */
.about-director {
  display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: clamp(36px, 6vw, 96px); align-items: center;
  max-width: none;
}
.about-director-portrait {
  position: relative; margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5;
  border: 1px solid rgba(10, 34, 72, 0.14); box-shadow: 0 40px 80px -48px rgba(6, 27, 43, 0.65);
  background: #e9eef4;
}
.about-director-portrait::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: linear-gradient(90deg, var(--brand), var(--brand-cyan, #00b4ff)); }
.about-director-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.about-director-copy h2 { margin: 0 0 26px; font-size: clamp(34px, 3.4vw, 52px); line-height: 1.06; letter-spacing: -0.03em; }
.about-director-quote { position: relative; margin: 0; padding: 0 0 0 28px; border-left: 2px solid var(--brand); }
.about-director-quote p { margin: 0 0 18px; font-size: clamp(16px, 1.2vw, 18.5px); line-height: 1.75; color: #33424f; }
.about-director-quote p:first-child { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.6; color: var(--ink, #0e1218); }
.about-director-sign { margin: 28px 0 0; display: flex; flex-direction: column; gap: 4px; }
.about-director-sign strong { font-size: 18px; color: var(--ink, #0e1218); }
.about-director-sign span { font-size: 14px; color: #526670; }

/* ---------- Journey ---------- */
.about-journey {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center;
  max-width: none;
}
.about-journey-media { position: relative; padding: 0 12% 14% 0; }
.about-journey-media img { display: block; width: 100%; object-fit: cover; border-radius: 18px; box-shadow: 0 34px 70px -44px rgba(6, 27, 43, 0.7); }
.about-journey-main { aspect-ratio: 4 / 5; }
.about-journey-inset {
  position: absolute; right: 0; bottom: 0; width: 46% !important; aspect-ratio: 1 / 1;
  border: 6px solid #fff; border-radius: 16px !important;
}
.about-journey-copy h2 { margin: 0 0 22px; font-size: clamp(32px, 3.2vw, 48px); line-height: 1.08; letter-spacing: -0.03em; }
.about-journey-copy p:not(.eyebrow):not(.lead) { color: #45535f; line-height: 1.75; }
.about-values { list-style: none; margin: 30px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line, #dde3ea); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.about-values li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ink, #0e1218); }
.about-values-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--brand-tint, #e8f1ff); color: var(--brand); }
.about-values-icon svg { width: 20px; height: 20px; }

/* ---------- Statement ---------- */
.about-statement {
  color: #fff; padding: clamp(64px, 8vw, 110px) 7%;
  background: radial-gradient(900px 420px at 85% 0%, rgba(0, 87, 255, 0.22), transparent 60%), linear-gradient(180deg, #061b2b, #04131f);
}
.about-statement > div { max-width: 900px; }
.about-statement h2 { margin: 0 0 20px; color: #fff; font-size: clamp(34px, 4vw, 60px); line-height: 1.04; letter-spacing: -0.035em; }
.about-statement h2::before { content: ""; display: block; width: 44px; height: 3px; margin-bottom: 26px; background: var(--brand-bright, #4c9dff); border-radius: 2px; }
.about-statement p { margin: 0; max-width: 720px; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.65; color: #c8d5e2; }

/* ---------- Tablet / mobile ---------- */
@media (max-width: 900px) {
  .about-director, .about-journey { grid-template-columns: 1fr; gap: 36px; }
  .about-director-portrait { max-width: 520px; width: 100%; }
  .about-journey-media { max-width: 620px; }
}
@media (max-width: 600px) {
  .about-hero h1 { font-size: clamp(36px, 10.5vw, 46px); }
  .about-hero-actions { flex-direction: column; align-items: stretch; }
  .about-hero-actions .button { justify-content: space-between; }
  .about-director-quote { padding-left: 18px; }
  .about-values { grid-template-columns: 1fr; }
  .about-journey-media { padding: 0 8% 18% 0; }
  .about-statement { padding-left: 16px; padding-right: 16px; }
}
@media (min-width: 901px) {
  .about-director, .about-journey { padding-left: max(7%, calc((100% - 1180px) / 2)); padding-right: max(7%, calc((100% - 1180px) / 2)); }
}