/* ==========================================================================
   R&D > A-SPICE (Figma 1:4107) — page body only
   Hero/stage: sp-common.css + sp-hero.js. This file: stage copy + stats,
   CL2 Q&A, quality framework cards, roadmap, engineering process, explore.
   ========================================================================== */
.aspice-page {
  --aspi-navy: #002165;
  --aspi-border: #ebedf1;
  --aspi-subtle: #f8f8f8;
  --aspi-pad-x: clamp(16px, 8.333vw, 160px);
}

/* style.css `section:not(.hero)… > *` (0,3,1) caps every section child at 1440px
   with 40px gutters. Undo it; each block restates its own size below. */
.sp-page.aspice-page section:not(.hero):not(.c-hero) > * {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.sp-page.aspice-page section:not(.hero):not(.c-hero) > .aspi-qa-list,
.sp-page.aspice-page section:not(.hero):not(.c-hero) > .aspi-fw-grid,
.sp-page.aspice-page section:not(.hero):not(.c-hero) > .aspi-process-body { max-width: 1600px; }
.sp-page.aspice-page section:not(.hero):not(.c-hero) > .aspi-roadmap-box {
  max-width: 1800px;
  padding: clamp(48px, 7.396vw, 142px) clamp(24px, 4.896vw, 94px) clamp(48px, 5.677vw, 109px);
}
.sp-page.aspice-page section:not(.hero):not(.c-hero) > .aspi-explore-bg { width: auto; margin: 0; }
.sp-page.aspice-page section:not(.hero):not(.c-hero) > .aspi-explore-head { width: auto; margin: 0; }
.sp-page.aspice-page section:not(.hero):not(.c-hero) > .aspi-explore-links { width: auto; margin: 0; }

/* Shared section head (eyebrow + title + lead) */
.aspi-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.aspi-head-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.aspi-title {
  font-weight: 600;
  font-size: clamp(30px, 2.917vw, 56px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: #111;
  word-break: keep-all;
}
.aspi-lead {
  font-weight: 500;
  font-size: clamp(16px, 1.042vw, 20px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #333;
  word-break: keep-all;
}
/* keep hyphenated terms whole when titles wrap on narrow screens */
.aspi-nowrap { white-space: nowrap; }
.aspi-head--left { align-items: flex-start; text-align: left; }
.aspi-head--left .aspi-head-top { align-items: flex-start; }
.aspi-head--light .aspi-title,
.aspi-head--light .aspi-lead { color: #fff; }

/* ---------- Stage scene B copy (1:4170 / 1:4177) ---------- */
.aspice-page .aspi-stage-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(48px, 7vw, 136px);
  font-size: inherit;
  font-weight: 400;
}
.aspi-stage-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.aspi-stage-text .aspi-head-top { gap: 14px; }
.aspi-stage-title {
  font-weight: 600;
  font-size: clamp(28px, 2.917vw, 56px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: #fff;
}
.aspi-stage-desc {
  font-weight: 500;
  font-size: clamp(15px, 1.25vw, 24px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #fff;
}
.aspi-stats {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 12.5vw, 240px);
  list-style: none;
}
.aspi-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(90px, 9.375vw, 180px);
  color: #fff;
}
.aspi-stat-num {
  font-family: var(--sp-font-en);
  font-weight: 600;
  font-size: clamp(40px, 4.6875vw, 90px);
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.aspi-stat-label {
  font-weight: 500;
  font-size: clamp(13px, 0.9375vw, 18px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* ---------- 02 CL2 Q&A (1:4187) ---------- */
.aspi-qa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(36px, 3.125vw, 60px);
  padding: clamp(72px, 6.25vw, 120px) var(--aspi-pad-x);
  background: var(--aspi-subtle);
}
.aspice-page .aspi-qa-list {
  width: min(1600px, 100%);
  padding-bottom: 20px;
  border: 1px solid var(--aspi-border);
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  list-style: none;
}
.aspi-qa-item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(24px, 2.083vw, 40px);
}
.aspi-qa-item + .aspi-qa-item { border-top: 1px solid var(--aspi-border); }
.aspi-qa-q {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 40px;
}
.aspi-qa-no {
  flex-shrink: 0;
  width: 48px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--aspi-navy);
}
.aspi-qa-q h3 {
  font-weight: 600;
  font-size: clamp(20px, 1.354vw, 26px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #111;
  word-break: keep-all;
}
.aspi-qa-a {
  font-size: clamp(16px, 0.9375vw, 18px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #666;
  word-break: keep-all;
}
.aspi-scope {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
}
.aspi-scope-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: clamp(0px, 23.333vw, 448px);
  padding: 32px;
  border-radius: 16px;
  background: var(--aspi-subtle);
}
.aspi-scope-group h4 {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--aspi-navy);
}
.aspi-scope-group ul { list-style: none; }
.aspi-scope-group li {
  display: flex;
  align-items: center;
  gap: 0.75em;
  min-height: 48px;
  padding: 6px 0;
  border-bottom: 1px solid var(--aspi-border);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -0.015em;
  color: #666;
  word-break: keep-all;
}
.aspi-scope-group li b {
  flex-shrink: 0;
  font-weight: 700;
  color: #333;
}

/* ---------- 03 SW Quality Framework (1:4243) ---------- */
.aspi-framework {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(36px, 3.125vw, 60px);
  padding: clamp(40px, 2.604vw, 50px) var(--aspi-pad-x) clamp(72px, 5.208vw, 100px);
  background: var(--aspi-subtle);
}
.aspi-fw-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.083vw, 40px);
  width: min(1600px, 100%);
  list-style: none;
}
.aspi-fw-card {
  display: flex;
  flex-direction: column;
  min-height: clamp(0px, 41.667vw, 800px);
  border: 1px solid var(--aspi-border);
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
}
.aspi-fw-media {
  aspect-ratio: 507 / 338;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  overflow: hidden;
}
.aspi-fw-media--gray { background: #f0f0f0; }
.aspi-fw-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aspi-fw-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px 32px 32px;
}
.aspi-fw-no {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--aspi-navy);
}
.aspi-fw-info h3 {
  font-weight: 600;
  font-size: clamp(22px, 1.354vw, 26px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #111;
}
.aspi-fw-info p {
  font-size: clamp(16px, 0.9375vw, 18px);
  line-height: 1.6;
  letter-spacing: -0.035em; /* -0.03em overflows card 3's first line by <1px */
  color: #444;
  word-break: keep-all;
}
.aspice-page .aspi-fw-points {
  padding: 10px 32px 32px;
  list-style: none;
}
.aspi-fw-points li {
  padding: 12px 0;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.015em;
  color: #666;
  word-break: keep-all;
}
.aspi-fw-points li + li { border-top: 1px solid var(--aspi-border); }

/* ---------- 04 Capability Roadmap (1:4294) ---------- */
.aspi-roadmap {
  padding: clamp(24px, 3.125vw, 60px) clamp(16px, 3.125vw, 60px);
}
.aspi-roadmap-box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(56px, 10vw, 197px);
  width: min(1800px, 100%);
  min-height: clamp(560px, 42.708vw, 820px);
  margin-inline: auto;
  padding: clamp(48px, 7.396vw, 142px) clamp(24px, 4.896vw, 94px) clamp(48px, 5.677vw, 109px);
  border-radius: 14px;
  background: #050c1d url('../../img/rnd/aspice/roadmap.jpg') center / cover no-repeat;
  overflow: hidden;
  isolation: isolate;
}
.aspi-roadmap-box::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(176.54deg, rgba(0, 0, 0, 0) 36.812%, rgba(0, 0, 0, 0.6) 63.608%);
}
.aspice-page .aspi-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(1500px, 100%);
  margin-inline: auto;
  list-style: none;
}
.aspi-tl-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
  color: #88909d;
}
.aspi-tl-item.is-current { color: #fff; }
.aspi-tl-year {
  font-family: var(--sp-font-en);
  font-weight: 600;
  font-size: clamp(28px, 1.875vw, 36px);
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.aspi-tl-dot {
  position: relative;
  height: 31px;
}
.aspi-tl-dot img { position: relative; z-index: 1; width: 31px; height: 31px; }
/* track line: 460px of each 500px column, starting 10px in (design vectors 1:4305-4307) */
.aspi-tl-dot::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 30px;
  top: 15px;
  height: 1px;
  background: #88909d;
}
/* current progress (1:4308): white, 129px from 20px */
.aspi-tl-item.is-current .aspi-tl-dot::after {
  content: '';
  position: absolute;
  left: 20px;
  top: 15px;
  width: min(129px, 30%);
  height: 1px;
  background: #fff;
}
.aspi-tl-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 16px;
}
.aspi-tl-body h3 {
  color: inherit;
  font-weight: 600;
  font-size: clamp(19px, 1.146vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.aspi-tl-body p {
  font-size: clamp(14px, 0.833vw, 16px);
  line-height: 1.4;
  letter-spacing: -0.03em;
  word-break: keep-all;
}
.aspi-tl-item.is-current .aspi-tl-body p { color: rgba(255, 255, 255, 0.8); }

/* ---------- 05 Engineering Process (1:4333) ---------- */
.aspi-process {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(36px, 3.125vw, 60px);
  padding: clamp(72px, 6.25vw, 120px) var(--aspi-pad-x);
  background: var(--aspi-subtle);
}
.aspi-process-body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: min(1600px, 100%);
}
.aspi-process-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.083vw, 40px);
}
.aspi-process-col {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 34px clamp(20px, 2.083vw, 40px) 40px;
  border: 1px solid var(--aspi-border);
  border-radius: 20px;
  background: #fff;
}
.aspice-page .aspi-process-col > h3 {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  font-weight: 600;
  font-size: clamp(20px, 1.25vw, 24px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #333;
}
.aspi-steps {
  display: flex;
  flex-direction: column;
  gap: 30px;
  list-style: none;
}
.aspi-step {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.aspi-step:last-child { padding-bottom: 10px; border-bottom: 0; }
.aspi-step-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 999px;
  background: rgba(0, 33, 101, 0.04);
}
.aspi-step-icon img { width: auto; height: auto; max-width: 45px; max-height: 45px; }
.aspi-step-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.aspi-step-code {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: #333;
}
.aspi-step-text h4 {
  font-weight: 600;
  font-size: clamp(20px, 1.354vw, 26px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #111;
  word-break: keep-all;
}
.aspi-step-text p {
  margin-top: -4px;
  font-size: clamp(15px, 0.9375vw, 18px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #666;
  word-break: keep-all;
}
.aspi-tags {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.aspi-tag-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  list-style: none;
}
.aspi-tag-row li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  min-width: clamp(0px, 7.083vw, 136px);
  padding: 0 clamp(18px, 2.5vw, 48px);
  border: 1px solid var(--aspi-border);
  border-radius: 8px;
  background: #fff;
  font-weight: 500;
  font-size: clamp(14px, 0.833vw, 16px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: #666;
  white-space: nowrap;
}

/* ---------- 06 Explore (1:4442) ---------- */
.aspi-explore {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  min-height: clamp(480px, 36.302vw, 697px);
  padding: clamp(64px, 6.25vw, 120px) var(--aspi-pad-x) clamp(48px, 4.167vw, 80px);
  overflow: hidden;
  isolation: isolate;
  background: #0b0f1c;
}
.aspi-explore-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.aspi-explore-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aspi-explore-bg img { object-position: center 40%; }
.aspi-explore-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.aspi-explore-links {
  display: flex;
  gap: 20px;
  align-self: flex-end;
  list-style: none;
}
.aspi-explore-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: clamp(160px, 13.542vw, 260px);
  height: 160px;
  padding: 26px 20px;
  border-radius: 10px;
  background: #ebedf1;
  font-weight: 600;
  font-size: clamp(17px, 1.042vw, 20px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: var(--aspi-navy);
  text-decoration: none;
  text-align: center;
  transition: background-color 0.2s, color 0.2s;
}
.aspi-explore-link:hover { background: #fff; color: var(--aspi-navy); }
.aspi-explore-link.is-active,
.aspi-explore-link.is-active:hover { background: var(--aspi-navy); color: #fff; }
.aspi-ex-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}
.aspi-ex-exam {
  position: relative;
  width: 46px;
  height: 46px;
}
.aspi-ex-exam img { position: absolute; max-width: none; }
.aspi-ex-exam img:nth-child(1) { top: 23.48%; left: 26.62%; width: 56.16%; height: 70.26%; }
.aspi-ex-exam img:nth-child(2) { top: 0%; left: 10.96%; width: 78.08%; height: 100%; }
.aspi-ex-exam img:nth-child(3) { top: 16.31%; left: 20.35%; width: 20.16%; height: 17.93%; }
.aspi-ex-exam img:nth-child(4) { top: 39.14%; left: 21.92%; width: 15.45%; height: 15.46%; }
.aspi-ex-exam img:nth-child(5) { top: 59.49%; left: 21.92%; width: 15.45%; height: 15.46%; }
.aspi-ex-exam img:nth-child(6) { top: 21.92%; left: 42.27%; width: 17.02%; height: 2.93%; }
.aspi-ex-exam img:nth-child(7) { top: 28.18%; left: 42.27%; width: 29.55%; height: 2.93%; }
.aspi-ex-exam img:nth-child(8) { top: 42.27%; left: 42.27%; width: 17.02%; height: 2.93%; }
.aspi-ex-exam img:nth-child(9) { top: 48.54%; left: 42.27%; width: 29.55%; height: 2.92%; }
.aspi-ex-exam img:nth-child(10) { top: 62.63%; left: 42.27%; width: 17.02%; height: 2.93%; }
.aspi-ex-exam img:nth-child(11) { top: 68.89%; left: 42.27%; width: 29.55%; height: 2.93%; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .aspi-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aspi-scope-group { min-height: 0; }
  .aspi-fw-card { min-height: 0; }
  .aspi-explore { flex-direction: column; justify-content: flex-start; }
  .aspi-explore-links { align-self: stretch; }
  .aspi-explore-link { flex: 1 1 0; width: auto; }
}
@media (max-width: 1024px) {
  .aspi-fw-grid { grid-template-columns: 1fr; }
  .sp-page.aspice-page section:not(.hero):not(.c-hero) > .aspi-fw-grid { max-width: 640px; }
  .aspi-process-cols { grid-template-columns: 1fr; }
  .aspice-page .aspi-timeline { grid-template-columns: 1fr; gap: 40px; }
  .aspi-tl-item { gap: 16px; }
  .aspi-roadmap-box { justify-content: flex-start; }
  .aspi-tl-item.is-current .aspi-tl-dot::after { width: 129px; }
}
@media (max-width: 768px) {
  /* static fallback (no JS / reduced motion): give the taller copy + stats room */
  .aspice-page .sp-stage:not(.is-live) .sp-stage-sticky { height: clamp(600px, 160vw, 720px); }
  .aspi-stats { gap: 16px; }
  .aspi-stat { width: auto; flex: 1 1 0; }
  .aspi-stat-label { white-space: normal; text-align: center; }
  .aspi-stage-desc br { display: none; }
  .aspi-qa-q { align-items: flex-start; }
  .aspi-qa-no { width: 32px; padding-top: 0.35em; }
  .aspi-explore-links { flex-direction: column; }
  .aspi-explore-link { flex-direction: row; justify-content: flex-start; width: 100%; height: auto; min-height: 80px; gap: 16px; }
}
@media (max-width: 600px) {
  .aspi-scope { grid-template-columns: 1fr; }
  .aspi-scope-group { padding: 24px; }
  .aspi-fw-info { padding: 24px 24px 24px; }
  .aspice-page .aspi-fw-points { padding: 6px 24px 24px; }
  .aspi-fw-info p br { display: none; }
  .aspi-step { align-items: flex-start; gap: 16px; }
  .aspi-step-icon { width: 60px; height: 60px; }
  .aspi-step-icon img { max-width: 34px; max-height: 34px; }
  .aspi-step-text br,
  .aspi-tl-body br { display: none; }
  .aspi-tag-row { gap: 8px; }
  .aspi-tag-row li { height: 40px; padding: 0 14px; }
  .aspi-title br { display: none; }
}