/* =========================================================
   JWL — philosophy.html page specific styles
   Builds on: style.css + jline.css + system.css
   ========================================================= */

/* ---------- Hero ---------- */
.page-philosophy .jp-hero::before {
  background-image: url("../../img/philo_team.png");
  opacity: 0.14;
  filter: brightness(0.68) contrast(1.08) saturate(0.82);
}
.page-philosophy .jp-hero::after {
  background:
    radial-gradient(ellipse 70% 50% at 30% 35%, rgba(20,184,166,0.12), transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 70%, rgba(34,211,238,0.09), transparent 60%),
    linear-gradient(180deg, transparent 55%, rgba(5,7,13,0.95) 100%);
}

.philo-hero {
  min-height: 80svh;
  text-align: center;
  padding-bottom: 80px;
}
.philo-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 18px;
}
.philo-hero-title {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(54px, 9vw, 140px);
  line-height: 0.96;
  letter-spacing: -0.01em;
  margin: 6px 0 10px;
}
.philo-hero-title .title-line { display: block; }
.philo-hero-title em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.philo-hero-title .title-dot { color: var(--accent-3); }
.philo-hero-sub {
  font-family: var(--font-jp);
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 700;
  color: var(--text);
  margin: 14px 0 18px;
  letter-spacing: 0.04em;
}
.philo-hero-desc {
  font-size: clamp(14px, 1.05vw, 15.5px);
  color: var(--text-2);
  line-height: 2;
  max-width: 60ch;
}
.philo-hero-desc strong { color: var(--text); font-weight: 700; }

/* ---------- Story ---------- */
.story-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.story-text p {
  color: var(--text-2);
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 2;
  margin-bottom: 18px;
}
.story-text strong { color: var(--text); font-weight: 700; }
.story-accent {
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(34,211,238,0.1), rgba(20,184,166,0.05));
  border-left: 3px solid var(--accent-2);
  border-radius: 10px;
  margin: 8px 0 20px !important;
}

.story-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(130px, 1fr);
  gap: 14px;
}
.story-image {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 4/3;
}
.story-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.7) saturate(0.9) contrast(1.05);
  transition: transform .6s ease;
}
.story-image:hover img { transform: scale(1.04); }
.story-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(5,7,13,0.6) 100%);
}
.story-image figcaption {
  position: absolute;
  left: 14px; bottom: 12px;
  z-index: 1;
  font-family: var(--font-en);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent-3);
}
.story-image-1 { transform: translateY(-16px); }
.story-image-3 { transform: translateY(16px); }

/* ---------- MVV ---------- */
.mvv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.mvv-card {
  position: relative;
  padding: 44px 36px 40px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  display: flex; flex-direction: column;
  gap: 16px;
  overflow: hidden;
  transition: transform .3s, border-color .3s;
}
.mvv-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}
.mvv-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad);
  opacity: 0.6;
}
.mvv-mission { background: linear-gradient(180deg, rgba(34,211,238,0.1), rgba(20,184,166,0.04) 60%, var(--surface) 100%); border-color: rgba(34,211,238,0.25); }
.mvv-mission::before { opacity: 1; height: 4px; }

.mvv-tag {
  align-self: flex-start;
  font-family: var(--font-en);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: var(--accent-3);
  border: 1px solid rgba(20,184,166,0.25);
}
.mvv-mission .mvv-tag { background: rgba(34,211,238,0.14); color: var(--accent-2); border-color: rgba(34,211,238,0.3); }
.mvv-title {
  font-family: var(--font-jp);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0;
  margin: 0;
}
.mvv-body {
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.95;
}
.mvv-body strong { color: var(--text); font-weight: 700; }

/* ---------- 5 Promises ---------- */
.promise-lead {
  max-width: 760px;
  color: var(--text-2);
  line-height: 1.95;
  margin-bottom: 40px;
  font-size: clamp(14px, 1vw, 15.5px);
}
.promise-lead strong { color: var(--text); font-weight: 600; }

.promise-list {
  display: flex; flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}
.promise-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: clamp(24px, 3.5vw, 48px);
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.promise-num {
  font-family: var(--font-en);
  font-size: clamp(32px, 3vw, 44px);
  font-weight: 700;
  letter-spacing: 0;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.promise-body h3 {
  font-family: var(--font-jp);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  margin: 0 0 10px;
}
.promise-body p {
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.95;
}
.promise-body p strong { color: var(--text); font-weight: 700; }

/* ---------- Name ---------- */
.name-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}
.name-card {
  padding: 36px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  display: flex; flex-direction: column;
  gap: 18px;
}
.name-word {
  font-family: var(--font-en);
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 700;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.name-card p {
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.9;
}
.name-card p strong { color: var(--text); font-weight: 700; }

.name-closer {
  text-align: center;
  padding: 40px 24px;
  border-top: 1px solid var(--border);
}
.name-closer p {
  font-family: var(--font-jp);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.02em;
}
.name-closer strong {
  font-family: var(--font-en);
  color: var(--text);
  font-weight: 700;
}

/* ---------- Team ---------- */
.team-lead {
  max-width: 800px;
  color: var(--text-2);
  line-height: 1.95;
  margin-bottom: 40px;
  font-size: clamp(14px, 1vw, 15.5px);
}
.team-lead strong { color: var(--text); font-weight: 600; }

.team-visual { margin-bottom: 40px; }
.team-hero {
  position: relative;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  aspect-ratio: 21/9;
  background: #0a0e1a;
}
.team-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.72) saturate(0.95) contrast(1.06);
}
.team-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,7,13,0.08), rgba(5,7,13,0.82));
}
.team-hero figcaption {
  position: absolute;
  left: clamp(24px, 3vw, 44px);
  bottom: clamp(24px, 3vw, 40px);
  z-index: 1;
  display: flex; flex-direction: column;
  gap: 8px;
}
.team-hero figcaption span {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-3);
}
.team-hero figcaption strong {
  font-family: var(--font-en);
  color: var(--text);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.team-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.team-stat {
  padding: 24px 26px 26px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex; flex-direction: column;
  gap: 6px;
}
.team-stat-num {
  font-family: var(--font-en);
  font-size: clamp(32px, 3vw, 44px);
  font-weight: 700;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.team-stat-num em {
  font-style: normal;
  font-size: 0.5em;
  margin-left: 2px;
  color: var(--text-3);
  -webkit-text-fill-color: var(--text-3);
}
.team-stat-lbl {
  color: var(--text-2);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

/* ---------- Journey / Timeline ---------- */
.journey-list {
  list-style: none;
  padding: 0 0 0 32px;
  margin: 0;
  position: relative;
}
.journey-list::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent-3), rgba(20,184,166,0.2) 80%, transparent);
}
.journey-item {
  position: relative;
  padding: 0 0 36px 28px;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  align-items: baseline;
}
.journey-item::before {
  content: "";
  position: absolute;
  left: -28px; top: 8px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent-3);
  box-shadow: 0 0 0 3px rgba(20,184,166,0.16);
}
.journey-item-latest::before {
  background: var(--accent-3);
  box-shadow: 0 0 0 4px rgba(20,184,166,0.3);
}
.journey-year {
  font-family: var(--font-en);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--accent-3);
  line-height: 1;
}
.journey-item-latest .journey-year {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.journey-body h3 {
  font-family: var(--font-jp);
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.45;
}
.journey-body h3 strong {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.journey-body p {
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.85;
}
.journey-body p strong { color: var(--text); font-weight: 700; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .story-grid { grid-template-columns: 1fr; gap: 40px; }
  .mvv-grid { grid-template-columns: 1fr; }
  .name-grid { grid-template-columns: 1fr; }
  .team-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .story-visual { grid-template-columns: 1fr; }
  .story-image-1, .story-image-3 { transform: none; }
  .promise-row { grid-template-columns: 1fr; gap: 8px; }
  .promise-num { font-size: 28px; }
  .journey-item { grid-template-columns: 1fr; gap: 6px; }
  .team-stats { grid-template-columns: 1fr; }
}