/*
Theme Name:     PROLINE Teaser
Theme URI:      https://prolineracing.jp/
Author:         PROLINE Racing Team
Author URI:     https://prolineracing.jp/
Description:    Single-page teaser theme for PROLINE. Reuses the proline-racing design tokens (トンマナ踏襲) but ships only the sections publishable today. No CPT, no plugins, single URL. See docs/superpowers/specs/2026-07-10-proline-teaser-design.md
Version:        0.9.1
Requires at least: 6.4
Tested up to:   6.7
Requires PHP:   8.1
License:        Proprietary — All Rights Reserved
License URI:
Text Domain:    proline-teaser
Tags:           racing, motorsport, custom, dark, anton, bebas-neue

  Design Source of Truth:
    - /Users/ykesamaru/Desktop/Project/PROLINE/docs/design_language_v02.md
    - /Users/ykesamaru/Desktop/Project/PROLINE/mockups/proline-top-v08.html

  Update Policy:
    - All visual decisions live in docs/design_language_v0N.md first
    - This stylesheet implements; it does not invent
*/

:root {
  --black: #0A0A0A;
  --surface-dark: #1A1A1A;
  --white: #FFFFFF;
  --gray-700: #2C2C2A;
  --gray-500: #5F5E5A;
  --gray-200: #D3D1C7;
  --gray-50: #F1EFE8;
  --green-logo: #3FA535;
  --green: #0BD8B6;
  --green-deep: #0F766E;
  --green-light: #CCFBF1;
  --pink: #E91E63;
  --pink-deep: #AD1457;
  --font-display: 'Anton', 'Bebas Neue', 'Noto Sans JP', sans-serif;
  --font-display-2: 'Bebas Neue', 'Noto Sans JP', sans-serif;
  --font-jp: 'Noto Sans JP', sans-serif;
  --font-mono: 'Roboto Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-jp);
  font-weight: 500;
  color: var(--gray-700);
  background: var(--white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-family: var(--font-display-2);
  font-size: 15px;
  letter-spacing: 0.18em;
  color: var(--green);
  margin-bottom: 12px;
}

.eyebrow-light {
  font-family: var(--font-display-2);
  font-size: 15px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.7);
  margin-bottom: 12px;
}

.section-title-en {
  font-family: var(--font-display);
  font-size: 80px;
  letter-spacing: 0.02em;
  line-height: 0.9;
  color: var(--black);
  text-transform: uppercase;
}

.section-title-jp {
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-500);
  margin-top: 12px;
  letter-spacing: 0.05em;
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--black);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--white);
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-mark {
  width: 36px;
  height: 36px;
  background: var(--green-logo);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav a {
  font-family: var(--font-display-2);
  font-size: 18px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.85);
  transition: color 200ms ease-out;
  position: relative;
  padding: 4px 0;
}

.nav a:hover { color: var(--green); }

.nav a.active { color: var(--white); }
.nav a.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--green);
}

.lang-switch {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  padding-left: 20px;
  border-left: 1px solid rgba(255,255,255,0.15);
}

.hero {
  background: var(--black);
  color: var(--white);
  padding: 64px 0 64px;
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 30%, rgba(11,216,182,0.18) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(233,30,99,0.06) 0%, transparent 60%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(56px, 10.5vw, 156px);
  letter-spacing: 0;
  line-height: 0.94;
  margin: 12px 0 20px;
  text-transform: uppercase;
}

.hero h1 .accent {
  display: block;
  color: var(--green);
}

.hero-sub {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  max-width: 720px;
  letter-spacing: 0.02em;
}

.hero-desc {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  max-width: 640px;
  margin-bottom: 28px;
  line-height: 1.8;
}

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.08em;
  padding: 18px 36px;
  border-radius: 4px;
  transition: all 200ms ease-out;
  cursor: pointer;
  border: none;
  text-transform: uppercase;
}

.btn-primary {
  background: var(--pink);
  color: var(--white);
}
.btn-primary:hover { background: var(--pink-deep); }

.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.3);
}
.btn-secondary:hover {
  border-color: var(--green);
  color: var(--green);
}

.btn-dark {
  background: var(--black);
  color: var(--white);
}
.btn-dark:hover { background: var(--gray-700); }

.btn-ghost {
  background: transparent;
  color: var(--gray-700);
  border: 2px solid var(--gray-200);
  font-family: var(--font-display);
  font-size: 16px;
}
.btn-ghost:hover {
  border-color: var(--green);
  color: var(--green);
}

.hero-meta {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.hero-meta-item .label {
  font-family: var(--font-display-2);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.5);
}

.hero-meta-item .value {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--white);
  margin-top: 6px;
  letter-spacing: 0.02em;
  line-height: 1;
}

.next-race {
  background: var(--black);
  padding: 24px 0 0;
}

.next-race-card {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

.next-race-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
.next-race-header::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100px;
  height: 2px;
  background: var(--green);
}
.next-race-eyebrow {
  font-family: var(--font-display-2);
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--green);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.next-race-title {
  font-family: var(--font-display);
  font-size: 56px;
  letter-spacing: 0.02em;
  line-height: 0.9;
  color: var(--white);
  text-transform: uppercase;
}
.next-race-title-jp {
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  margin-top: 8px;
  letter-spacing: 0.05em;
}
.next-race-link {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.65);
  border-bottom: 2px solid rgba(255,255,255,0.2);
  padding-bottom: 4px;
  transition: color 200ms ease-out, border-color 200ms ease-out;
  text-transform: uppercase;
}
.next-race-link:hover {
  color: var(--green);
  border-color: var(--green);
}

.next-race-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.race-card {
  background: var(--surface-dark);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: border-color 200ms ease-out;
}

.race-card:hover {
  border-color: rgba(11,216,182,0.4);
}

.race-card.is-next {
  background: linear-gradient(135deg, rgba(11,216,182,0.08) 0%, var(--surface-dark) 60%);
}

.race-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.race-card-label {
  font-family: var(--font-display-2);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}

.race-card.is-next .race-card-label {
  color: var(--green);
}

.race-card-badge {
  background: var(--pink);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 3px;
  text-transform: uppercase;
}

.race-card-main {
  display: flex;
  align-items: center;
  gap: 20px;
}

.race-meter {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}

.race-meter svg {
  width: 100%;
  height: 100%;
  transform: rotate(135deg);
}

.race-meter-track {
  fill: none;
  stroke: rgba(255,255,255,0.08);
  stroke-width: 6;
}

.race-meter-progress {
  fill: none;
  stroke: var(--green);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 0 999;
  transition: stroke-dasharray 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.race-card.is-following .race-meter-progress {
  stroke: rgba(255,255,255,0.4);
}

.race-meter-ticks {
  fill: none;
  stroke: rgba(255,255,255,0.15);
  stroke-width: 6;
  stroke-dasharray: 0.6 4.4;
}

.race-meter-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.race-meter-label {
  font-family: var(--font-display-2);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  line-height: 1;
}

.race-meter-num {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--green);
  line-height: 0.9;
  margin-top: 2px;
  letter-spacing: 0;
}

.race-card.is-following .race-meter-num {
  color: rgba(255,255,255,0.7);
}

.race-meter-total {
  font-family: var(--font-display-2);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.4);
  margin-top: 1px;
}

.race-card:hover .race-meter-progress {
  animation: meter-pulse 1.2s ease-in-out infinite;
}

@keyframes meter-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.race-card-round {
  font-family: var(--font-display);
  font-size: 64px;
  color: var(--green);
  line-height: 0.85;
  letter-spacing: 0;
  flex-shrink: 0;
}

.race-card.is-following .race-card-round {
  color: rgba(255,255,255,0.7);
}

.race-card-circuit {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.race-card-circuit-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  opacity: 0.85;
}

.race-card-title {
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.race-card-circuit-name {
  font-family: var(--font-display-2);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  margin-top: 2px;
}

.race-card-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.race-card-detail {
  font-family: var(--font-display-2);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
}

.race-card-detail strong {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--white);
  margin-top: 4px;
  text-transform: none;
}

.race-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.race-card-link {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  transition: color 200ms ease-out;
}

.race-card-link:hover {
  color: var(--green);
}

.race-card.is-next .race-card-link {
  color: var(--pink);
}

.race-card.is-next .race-card-link:hover {
  color: var(--white);
}

.cockpit-section {
  background: #050505;
  padding: 72px 0 120px;
  position: relative;
  overflow: hidden;
  color: var(--white);
}

/* Cockpit uses 1400px container to match NEXT RACE card width */
.cockpit-section > .container {
  max-width: 1400px;
  padding: 0 32px;
}

.cockpit-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11,216,182,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,216,182,0.10) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center center;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 100%);
  pointer-events: none;
}

.cockpit-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(11,216,182,0.08) 0%, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(233,30,99,0.05) 0%, transparent 40%);
}

.cockpit-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid rgba(11,216,182,0.22);
}

.cockpit-header::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 120px;
  height: 2px;
  background: var(--green);
}

.cockpit-title-en {
  font-family: var(--font-display);
  font-size: 56px;
  letter-spacing: 0.02em;
  line-height: 0.9;
  color: var(--white);
  text-transform: uppercase;
}

.cockpit-title-jp {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  margin-top: 8px;
  letter-spacing: 0.08em;
}

.cockpit-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
}

.cockpit-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: cockpit-blink 2s ease-in-out infinite;
}

@keyframes cockpit-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.cockpit-bento {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 160px 160px;
  gap: 12px;
}

.cockpit-cell {
  position: relative;
  background: rgba(10,10,10,0.7);
  border: 1px solid rgba(11,216,182,0.18);
  border-radius: 4px;
  padding: 20px 22px;
  overflow: hidden;
  transition: border-color 300ms ease-out, background 300ms ease-out;
}

.cockpit-cell::before,
.cockpit-cell::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--green);
  opacity: 0.6;
  transition: opacity 300ms ease-out;
}

.cockpit-cell::before {
  top: 6px;
  left: 6px;
  border-right: none;
  border-bottom: none;
}

.cockpit-cell::after {
  bottom: 6px;
  right: 6px;
  border-left: none;
  border-top: none;
}

.cockpit-cell:hover {
  border-color: var(--green);
  background: rgba(11,216,182,0.04);
}

.cockpit-cell:hover::before,
.cockpit-cell:hover::after {
  opacity: 1;
}

.cockpit-cell.span-2x2 {
  grid-column: span 2;
  grid-row: span 2;
}

.cockpit-cell.span-2 {
  grid-column: span 2;
}

.cockpit-cell-label {
  font-family: var(--font-display-2);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(11,216,182,0.7);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.cockpit-cell-value {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 0.9;
  color: var(--white);
  letter-spacing: 0;
}

.cockpit-cell-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
  margin-top: 8px;
  text-transform: uppercase;
}

.cockpit-cell-unit {
  font-family: var(--font-display-2);
  font-size: 16px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.4);
  margin-left: 4px;
}

.cockpit-cell-big-num {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 0.85;
  color: var(--green);
  letter-spacing: -0.02em;
  margin: 8px 0;
}

.cockpit-cell-big-sub {
  font-family: var(--font-display-2);
  font-size: 14px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
}

.cockpit-cell-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 60px;
  margin-top: 12px;
}

.cockpit-chart-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--green) 0%, rgba(11,216,182,0.3) 100%);
  border-radius: 1px;
  position: relative;
  height: 0%;
  transition: height 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cockpit-chart-bar.is-best {
  background: linear-gradient(180deg, var(--pink) 0%, rgba(233,30,99,0.3) 100%);
}

.cockpit-chart-label {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.05em;
}

.cockpit-cell-laptime {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 36px;
  color: var(--white);
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 8px 0 4px;
}

.cockpit-cell-laptime .ms {
  color: var(--green);
}

.cockpit-corner-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
}

.section {
  padding: 120px 0 100px;
}

.section-header {
  margin-bottom: 56px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.section-header-link {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.15em;
  color: var(--gray-500);
  border-bottom: 2px solid var(--gray-200);
  padding-bottom: 4px;
  transition: all 200ms ease-out;
  text-transform: uppercase;
}

.section-header-link:hover {
  color: var(--green);
  border-color: var(--green);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.news-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
  transition: all 200ms ease-out;
  cursor: pointer;
}

.news-card:hover {
  border-color: var(--green);
  transform: translateY(-2px);
}

.news-thumb {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-200) 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  font-size: 12px;
  letter-spacing: 0.18em;
  font-family: var(--font-display-2);
}

.news-content { padding: 20px; }

.news-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.news-category {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--green-deep);
  padding: 3px 10px;
  background: var(--green-light);
  border-radius: 3px;
}

.news-date {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--gray-500);
}

.news-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--gray-700);
  letter-spacing: 0.01em;
}

.drivers-section {
  background: var(--gray-50);
}

.drivers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.driver-card {
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
  transition: all 200ms ease-out;
  cursor: pointer;
  border: 1px solid transparent;
}

.driver-card:hover {
  border-color: var(--green);
  transform: translateY(-2px);
}

.driver-portrait {
  aspect-ratio: 4/3;
  background: linear-gradient(180deg, var(--gray-200) 0%, var(--gray-500) 100%);
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 14px;
}

.driver-number {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 0.85;
  color: var(--green);
  letter-spacing: -0.02em;
}

.driver-info {
  padding: 14px 16px;
}

.driver-name-jp {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-700);
  letter-spacing: 0.02em;
}

.driver-name-en {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.1em;
  color: var(--gray-500);
  margin-top: 4px;
  text-transform: uppercase;
}

.driver-role {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--green);
  margin-top: 12px;
  text-transform: uppercase;
}

.team-section { padding: 100px 0; }

.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.team-card {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 40px;
  transition: all 200ms ease-out;
  position: relative;
  overflow: hidden;
}

.team-card:hover {
  border-color: var(--green);
}

.team-card-label {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--green);
  margin-bottom: 16px;
  text-transform: uppercase;
}

.team-card h3 {
  font-family: var(--font-jp);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.team-card p {
  color: var(--gray-500);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 28px;
}

.team-card-arrow {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.15em;
  color: var(--gray-700);
  text-transform: uppercase;
}

.join-section {
  background: var(--black);
  color: var(--white);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.join-section::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(233,30,99,0.18) 0%, transparent 70%);
  pointer-events: none;
}

.join-header {
  margin-bottom: 64px;
  position: relative;
}

.join-title {
  font-family: var(--font-display);
  font-size: clamp(56px, 10vw, 144px);
  letter-spacing: 0.01em;
  line-height: 0.94;
  color: var(--white);
  text-transform: uppercase;
}

.join-sub {
  font-size: 18px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  margin-top: 24px;
  max-width: 700px;
  line-height: 1.7;
}

.join-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
  position: relative;
}

.join-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 32px;
  transition: all 200ms ease-out;
  cursor: pointer;
}

.join-card:hover {
  border-color: var(--pink);
  background: rgba(233,30,99,0.06);
  transform: translateY(-2px);
}

.join-card.featured {
  border-color: var(--pink);
  background: rgba(233,30,99,0.1);
}

.join-card-label {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--pink);
  margin-bottom: 20px;
  text-transform: uppercase;
}

.join-card h4 {
  font-family: var(--font-jp);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.join-card p {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  margin-bottom: 24px;
  line-height: 1.7;
}

.join-card-cta {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.15em;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}

.partners-section { padding: 100px 0; }

.partners-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}

.partner-logo {
  aspect-ratio: 16/9;
  background: var(--gray-50);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.partners-cta {
  background: var(--gray-50);
  border-radius: 8px;
  padding: 36px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.partners-cta-text h4 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.partners-cta-text p {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-500);
}

.jr-section { padding: 80px 0; }

.jr-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.jr-text h3 {
  font-family: var(--font-display);
  font-size: 72px;
  letter-spacing: 0.02em;
  line-height: 0.9;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.jr-text .jr-sub {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 20px;
  letter-spacing: 0.01em;
}

.jr-text p {
  color: var(--gray-500);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 28px;
  line-height: 1.8;
}

.jr-image {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--green-light) 0%, var(--gray-50) 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer {
  background: var(--black);
  color: rgba(255,255,255,0.7);
  padding: 80px 0 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 40px;
  color: var(--white);
  letter-spacing: 0.06em;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-brand .logo-mark { width: 44px; height: 44px; }

.footer-tagline {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  margin-bottom: 28px;
  line-height: 1.7;
}

.footer-sns {
  display: flex;
  gap: 12px;
}

.footer-sns-item {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  transition: all 200ms ease-out;
  cursor: pointer;
}

.footer-sns-item:hover {
  border-color: var(--green);
  color: var(--green);
}

.footer-col h5 {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.2em;
  color: var(--white);
  margin-bottom: 20px;
  text-transform: uppercase;
}

.footer-col ul { list-style: none; }

.footer-col li {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
}

.footer-col a:hover { color: var(--green); }

.footer-bottom {
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  font-family: var(--font-mono);
}

.footer-legal { display: flex; gap: 20px; }

@media (max-width: 1024px) {
  .hero h1 { font-size: 80px; }
  .section-title-en { font-size: 56px; }
  .cockpit-title-en { font-size: 44px; }
  .cockpit-bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .cockpit-cell.span-2x2 { grid-column: span 2; grid-row: span 2; min-height: 280px; }
  .cockpit-cell.span-2 { grid-column: span 2; }
  .cockpit-cell { min-height: 140px; }
  .next-race-grid { grid-template-columns: 1fr; gap: 12px; }
  .race-card-round { font-size: 56px; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .drivers-grid { grid-template-columns: repeat(2, 1fr); }
  .partners-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .nav { display: none; }
}

@media (max-width: 640px) {
  .section, .next-race, .partners-section, .jr-section, .team-section, .join-section, .cockpit-section { padding: 64px 0; }
  .hero { padding: 40px 0 48px; }
  .section-title-en { font-size: 44px; }
  .cockpit-title-en { font-size: 36px; }
  .cockpit-bento { grid-template-columns: 1fr; }
  .cockpit-cell.span-2x2, .cockpit-cell.span-2 { grid-column: span 1; grid-row: auto; min-height: auto; }
  .cockpit-cell-big-num { font-size: 72px; }
  .cockpit-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .news-grid { grid-template-columns: 1fr; }
  .team-grid, .join-grid, .jr-inner, .partners-cta { grid-template-columns: 1fr; display: block; }
  .team-card, .join-card { margin-bottom: 12px; padding: 28px; }
  .jr-image { margin-top: 24px; }
  .jr-text h3 { font-size: 52px; }
  .hero-meta { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; padding-top: 20px; }
  .hero-meta-item .value { font-size: 28px; }
  .race-card { padding: 20px 22px; }
  .race-card-round { font-size: 48px; }
  .race-card-details { grid-template-columns: 1fr 1fr; gap: 10px; }
  .race-card-title { font-size: 15px; }
  .partners-cta { padding: 24px; }
  .hero-sub { font-size: 20px; }
}

/* ============================================================
   Phase 3c extensions — archive-driver / single-driver / page-tryout
   Source: mockups/proline-{drivers,driver-detail,join-tryout}-v01.html
   ============================================================ */

/* ---------- Utilities ---------- */
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 24px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: 8px;
  background: var(--white); color: var(--black);
  padding: 10px 16px;
  font-family: var(--font-display); font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase;
  border-radius: 4px;
  transform: translateY(-200%);
  transition: transform 200ms ease-out;
  z-index: 200;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- Page Hero (compact dark hero for sub-pages) ---------- */
.page-hero {
  background: var(--black);
  color: var(--white);
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
}
.page-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 70% 30%, rgba(11,216,182,0.12) 0%, transparent 50%),
    radial-gradient(circle at 20% 90%, rgba(233,30,99,0.04) 0%, transparent 50%);
}
.page-hero-inner {
  position: relative;
  max-width: 1400px; margin: 0 auto;
  padding: 0 32px;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(72px, 11vw, 160px);
  line-height: 0.88;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.page-hero-sub {
  font-size: 18px; font-weight: 700;
  color: rgba(255,255,255,0.75);
  max-width: 680px;
  letter-spacing: 0.02em;
}
.page-hero-meta {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; gap: 56px; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-weight: 700; font-size: 12px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}
.page-hero-meta strong {
  display: block; margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 400; font-size: 28px;
  color: var(--white);
  letter-spacing: 0.02em;
}

/* ---------- Filter Bar (sticky on archive pages) ---------- */
.filter-bar {
  position: sticky; top: 72px; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 16px 0;
}
.filter-tabs {
  display: flex; gap: 0;
  align-items: center;
  flex-wrap: wrap;
}
.filter-tab {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--gray-500);
  padding: 14px 24px;
  cursor: pointer;
  border: none; background: transparent;
  text-transform: uppercase;
  position: relative;
  transition: color 200ms ease-out;
}
.filter-tab::after {
  content: ''; position: absolute;
  left: 24px; right: 24px; bottom: 8px;
  height: 2px; background: transparent;
  transition: background 200ms ease-out;
}
.filter-tab:hover { color: var(--gray-700); }
.filter-tab.is-active { color: var(--black); }
.filter-tab.is-active::after { background: var(--green); }
.filter-count {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--gray-500);
  margin-left: 6px; letter-spacing: 0;
}

/* ---------- Section eyebrow (used across sub-pages) ---------- */
.section-eyebrow {
  font-family: var(--font-display-2);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--green);
  margin-bottom: 12px;
}

/* Override: section title size on sub-pages (smaller than TOP) */
.drivers-archive .section-title-en,
.driver-detail .section-title-en,
.tryout-page .section-title-en { font-size: 56px; }

/* ---------- DRIVERS Archive: ST-3 large cards (3-col) ---------- */
.drivers-grid-st3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  container-type: inline-size;
}
.driver-card-l {
  background: var(--white);
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 240ms ease-out, transform 240ms ease-out;
  display: block;
}
.driver-card-l:hover {
  border-color: var(--green);
  transform: translateY(-2px);
}
.driver-card-l .driver-portrait {
  aspect-ratio: 3/4;
  background: linear-gradient(180deg, var(--gray-200) 0%, var(--gray-500) 100%);
  position: relative;
  overflow: hidden;
}
.driver-card-l .driver-portrait img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.driver-card-l .driver-number {
  position: absolute;
  top: 14px; right: 18px;
  font-family: var(--font-display);
  font-size: 88px;
  line-height: 0.85;
  color: var(--green);
  letter-spacing: -0.02em;
}
.driver-class-chip {
  position: absolute;
  top: 16px; left: 16px;
  font-family: var(--font-display-2);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--white);
  padding: 4px 10px;
  background: rgba(0,0,0,0.55);
  border-radius: 3px;
  text-transform: uppercase;
}
.driver-card-l .driver-info {
  padding: 24px;
  display: grid; gap: 14px;
}
.driver-card-l .driver-name-jp {
  font-size: 22px; font-weight: 700;
  color: var(--gray-700);
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.driver-card-l .driver-name-en {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.1em;
  color: var(--gray-500);
  margin-top: -10px;
  text-transform: uppercase;
}
.driver-card-l .driver-role {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--green);
  text-transform: uppercase;
}
.driver-card-l .driver-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
}
.driver-card-l .driver-stat .label {
  font-family: var(--font-display-2);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gray-500);
  text-transform: uppercase;
}
.driver-card-l .driver-stat .value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 20px;
  color: var(--gray-700);
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.driver-card-l .driver-stat.is-best .value { color: var(--pink); }

/* ---------- DRIVERS Archive: Development small cards (4-col) ---------- */
.drivers-dev-section { background: var(--gray-50); }
.drivers-grid-dev {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.driver-card-s {
  background: var(--white);
  border-radius: 8px;
  border: 1px solid transparent;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 200ms ease-out, transform 200ms ease-out;
  display: block;
}
.driver-card-s:hover {
  border-color: var(--green);
  transform: translateY(-2px);
}
.driver-card-s .driver-portrait {
  aspect-ratio: 3/4;
  background: linear-gradient(180deg, var(--gray-200) 0%, var(--gray-500) 100%);
  position: relative;
}
.driver-card-s .driver-portrait img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.driver-card-s .driver-number {
  position: absolute;
  top: 12px; right: 16px;
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 0.85;
  color: var(--green);
  letter-spacing: -0.02em;
}
.driver-card-s .driver-info { padding: 18px; }
.driver-card-s .driver-name-jp {
  font-size: 17px; font-weight: 700;
  color: var(--gray-700); letter-spacing: 0.01em;
}
.driver-card-s .driver-name-en {
  font-family: var(--font-display);
  font-size: 14px; letter-spacing: 0.1em;
  color: var(--gray-500); margin-top: 2px;
  text-transform: uppercase;
}
.driver-card-s .driver-role {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--green); margin-top: 10px;
  text-transform: uppercase;
}

/* ---------- JOIN CTA Band (used on DRIVERS archive bottom) ---------- */
.join-cta-band {
  background: var(--black);
  color: var(--white);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.join-cta-band::before {
  content: ''; position: absolute;
  top: -120px; right: -120px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(233,30,99,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.join-cta-band-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px; align-items: end;
  position: relative;
}
.join-cta-band h2 {
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.25;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}
.join-cta-band-sub {
  font-size: 17px; font-weight: 500;
  color: rgba(255,255,255,0.7);
  max-width: 640px;
  line-height: 1.7;
}
.join-cta-band-cta { display: flex; flex-direction: column; gap: 16px; }
.join-cta-band-countdown {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--pink);
  text-transform: uppercase;
}
.btn-primary-l {
  background: var(--pink);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 20px; letter-spacing: 0.1em;
  padding: 22px 40px;
  border-radius: 4px;
  text-transform: uppercase;
  transition: background 200ms ease-out;
  display: inline-flex; gap: 12px; align-items: center;
  width: fit-content;
  border: none; cursor: pointer;
}
.btn-primary-l:hover { background: var(--pink-deep); }
.btn-ghost-light {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.3);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 16px; letter-spacing: 0.1em;
  padding: 14px 28px;
  border-radius: 4px;
  text-transform: uppercase;
  transition: border-color 200ms ease-out, color 200ms ease-out;
  width: fit-content;
  cursor: pointer;
}
.btn-ghost-light:hover { border-color: var(--green); color: var(--green); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { background: var(--white); border-bottom: 1px solid var(--gray-200); }
.breadcrumb-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 16px 24px;
  font-family: var(--font-display-2);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--gray-500);
  text-transform: uppercase;
  display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--gray-500); }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb-sep { opacity: 0.4; }
.breadcrumb-current { color: var(--gray-700); }

/* ---------- DRIVER detail: Hero ---------- */
.driver-hero {
  background: var(--black);
  color: var(--white);
  padding: 80px 0 100px;
  position: relative; overflow: hidden;
}
.driver-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 75% 35%, rgba(11,216,182,0.16) 0%, transparent 55%),
    radial-gradient(circle at 15% 80%, rgba(233,30,99,0.05) 0%, transparent 50%);
}
.driver-hero-inner {
  position: relative;
  max-width: 1200px; margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 64px; align-items: center;
}
.driver-hero-portrait {
  aspect-ratio: 3/4;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--gray-200) 0%, var(--gray-500) 100%);
  position: relative;
}
.driver-hero-portrait img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.driver-hero-num {
  position: absolute;
  top: 12px; right: 24px;
  font-family: var(--font-display);
  font-size: 200px;
  line-height: 0.85;
  color: var(--green);
  letter-spacing: -0.02em;
}
.driver-hero-spec { display: grid; gap: 24px; }
.driver-hero-eyebrow {
  font-family: var(--font-display-2);
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--green);
  text-transform: uppercase;
}
.driver-hero-name {
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, 112px);
  line-height: 0.88;
  letter-spacing: 0;
  text-transform: uppercase;
}
.driver-hero-name-jp {
  font-family: var(--font-jp);
  font-size: 24px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
  margin-top: -10px;
}
.driver-hero-role {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.2em;
  color: var(--green);
  text-transform: uppercase;
}
.driver-hero-table {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.driver-hero-table > div {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px; align-items: baseline;
}
.driver-hero-table .label {
  font-family: var(--font-display-2);
  font-size: 11px; letter-spacing: 0.2em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}
.driver-hero-table .value {
  font-family: var(--font-mono);
  font-weight: 700; font-size: 15px;
  color: var(--white); letter-spacing: 0.02em;
}
.driver-hero-sns { margin-top: 16px; display: flex; gap: 10px; }
.driver-hero-sns a {
  width: 42px; height: 42px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display-2);
  font-size: 12px; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.7);
  transition: all 200ms ease-out;
}
.driver-hero-sns a:hover { border-color: var(--green); color: var(--green); }

/* ---------- DRIVER detail: Message ---------- */
.driver-message { background: var(--gray-50); padding: 100px 0; }
.driver-message-inner { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.driver-message-body {
  font-size: 17px; line-height: 2.0;
  color: var(--gray-700);
  margin-top: 40px; font-weight: 500;
}
.driver-message-body p + p { margin-top: 1.6em; }
.driver-message-pullquote {
  margin-top: 56px;
  padding: 32px 40px;
  border-left: 4px solid var(--green);
  background: var(--white);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 22px; line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--gray-700);
}

/* ---------- DRIVER detail: Career (TRON) ---------- */
.driver-career {
  background: #050505;
  color: var(--white);
  padding: 120px 0;
  position: relative; overflow: hidden;
}
.driver-career-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(11,216,182,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,216,182,0.10) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 100%);
}
.driver-career > .container { position: relative; }
.driver-career .section-title-en { color: var(--white); }
.driver-career .section-title-jp { color: rgba(255,255,255,0.5); }
.driver-career-header {
  margin-bottom: 56px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(11,216,182,0.18);
  position: relative;
}
.driver-career-header::before {
  content: ''; position: absolute;
  left: 0; bottom: -1px;
  width: 80px; height: 1px;
  background: var(--green);
}
.driver-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 64px;
}
.stat-cell {
  position: relative;
  background: rgba(10,10,10,0.7);
  border: 1px solid rgba(11,216,182,0.18);
  border-radius: 4px;
  padding: 24px 26px 28px;
  overflow: hidden;
  transition: border-color 300ms ease-out, background 300ms ease-out;
}
.stat-cell::before,
.stat-cell::after {
  content: ''; position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--green);
  opacity: 0.6;
  transition: opacity 300ms ease-out;
}
.stat-cell::before { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.stat-cell::after { bottom: 6px; right: 6px; border-left: none; border-top: none; }
.stat-cell:hover { border-color: var(--green); background: rgba(11,216,182,0.04); }
.stat-cell:hover::before, .stat-cell:hover::after { opacity: 1; }
.stat-cell .corner-tag {
  position: absolute;
  top: 12px; right: 14px;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
}
.stat-cell .stat-label {
  font-family: var(--font-display-2);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(11,216,182,0.7);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.stat-cell .stat-value {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 0.85;
  color: var(--white);
  letter-spacing: -0.02em;
}
.stat-cell .stat-unit {
  font-family: var(--font-display-2);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  margin-left: 6px;
}
.stat-cell .stat-sub {
  font-family: var(--font-mono);
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
  margin-top: 12px;
  text-transform: uppercase;
}
.stat-cell.is-laptime .stat-value {
  font-family: var(--font-mono);
  font-weight: 700; font-size: 56px;
  letter-spacing: 0.02em;
}
.stat-cell.is-laptime .stat-value .ms { color: var(--green); }

/* ---------- Race record table ---------- */
.race-record {
  border: 1px solid rgba(11,216,182,0.18);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(10,10,10,0.5);
}
.race-record-head,
.race-record-row {
  display: grid;
  grid-template-columns: 80px 140px 1fr 100px 100px 110px;
  gap: 0;
}
.race-record-head {
  padding: 14px 24px;
  background: rgba(11,216,182,0.06);
  border-bottom: 1px solid rgba(11,216,182,0.15);
  font-family: var(--font-display-2);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(11,216,182,0.85);
  text-transform: uppercase;
}
.race-record-row {
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-family: var(--font-mono);
  font-weight: 700; font-size: 13px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
}
.race-record-row:last-child { border-bottom: none; }
.race-record-row .race-name {
  font-family: var(--font-jp);
  color: var(--white);
  letter-spacing: 0;
}
.race-record-row .race-pos {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--green);
  line-height: 1;
}
.race-record-row .race-pos.is-pending { color: rgba(255,255,255,0.3); }
.race-record-row .race-pts { color: var(--white); }
.race-record-row.is-future { opacity: 0.4; }

/* ---------- Supported By ---------- */
.driver-supporters { padding: 100px 0; }
.driver-supporters .section-eyebrow { color: var(--pink); }
.supporters-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.supporter-logo {
  aspect-ratio: 16/9;
  background: var(--gray-50);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-500);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 200ms ease-out;
  cursor: pointer;
}
.supporter-logo:hover { background: var(--green-light); }
.supporters-cta {
  margin-top: 40px;
  padding: 24px 32px;
  background: var(--gray-50);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.supporters-cta p {
  font-size: 14px;
  color: var(--gray-500);
  max-width: 640px;
}
.supporters-cta p strong {
  color: var(--gray-700); font-weight: 700;
  display: block; margin-bottom: 4px;
  font-size: 16px;
}

/* ---------- DRIVER detail: Related News ---------- */
.driver-news { background: var(--gray-50); padding: 100px 0; }
.driver-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

/* ---------- DRIVER detail: Pagination ---------- */
.driver-pagination {
  padding: 60px 0 100px;
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
}
.driver-pagination-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px; align-items: center;
}
.pagination-link {
  display: flex; align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  transition: border-color 200ms ease-out, transform 200ms ease-out;
  cursor: pointer;
  min-height: 96px;
}
.pagination-link:hover { border-color: var(--green); transform: translateY(-2px); }
.pagination-link.is-prev { justify-content: flex-start; }
.pagination-link.is-next { justify-content: flex-end; text-align: right; }
.pagination-link.is-disabled { opacity: 0.4; cursor: default; pointer-events: none; }
.pagination-arrow {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--green);
  line-height: 1;
}
.pagination-meta { display: flex; flex-direction: column; gap: 4px; }
.pagination-label {
  font-family: var(--font-display-2);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gray-500);
  text-transform: uppercase;
}
.pagination-name {
  font-size: 16px; font-weight: 700;
  color: var(--gray-700);
}
.pagination-num {
  font-family: var(--font-mono);
  font-weight: 700; font-size: 12px;
  color: var(--green); letter-spacing: 0.04em;
}
.pagination-center { display: flex; justify-content: center; }
.pagination-list {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--gray-500);
  padding: 14px 22px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  background: var(--white);
  transition: all 200ms ease-out;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.pagination-list:hover { border-color: var(--green); color: var(--green); }

/* ---------- TRYOUT hero ---------- */
.tryout-hero {
  background: var(--black);
  color: var(--white);
  padding: 100px 0 80px;
  position: relative; overflow: hidden;
}
.tryout-hero::before {
  content: ''; position: absolute;
  top: -140px; right: -140px;
  width: 580px; height: 580px;
  background: radial-gradient(circle, rgba(233,30,99,0.22) 0%, transparent 65%);
  pointer-events: none;
}
.tryout-hero::after {
  content: ''; position: absolute;
  bottom: -100px; left: -100px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(11,216,182,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.tryout-hero-inner {
  position: relative;
  max-width: 1200px; margin: 0 auto;
  padding: 0 24px;
}
.tryout-hero-eyebrow {
  font-family: var(--font-display-2);
  font-size: 14px;
  letter-spacing: 0.22em;
  color: var(--pink);
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 10px;
}
.tryout-hero-eyebrow::before {
  content: ''; width: 32px; height: 1px; background: var(--pink);
}
.tryout-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(72px, 11vw, 168px);
  line-height: 0.94; letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.tryout-hero h1 .accent { color: var(--pink); }
.tryout-hero-sub {
  font-size: 20px; font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
  max-width: 720px;
}
.tryout-hero-desc {
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  max-width: 640px;
  line-height: 1.8;
  margin-bottom: 48px;
}
.tryout-hero-deadline {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 14px 24px;
  border: 1px solid var(--pink);
  border-radius: 4px;
  background: rgba(233,30,99,0.08);
}
.tryout-hero-deadline .label {
  font-family: var(--font-display-2);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--pink);
  text-transform: uppercase;
}
.tryout-hero-deadline .value {
  font-family: var(--font-mono);
  font-weight: 700; font-size: 17px;
  letter-spacing: 0.04em; color: var(--white);
}
.tryout-hero-deadline .days {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--pink);
  letter-spacing: 0.02em;
  line-height: 1;
  padding-left: 16px;
  border-left: 1px solid rgba(233,30,99,0.4);
}

/* ---------- TRYOUT overview ---------- */
.tryout-overview { background: var(--gray-50); padding: 80px 0; }
.overview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.overview-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 28px 24px;
  transition: border-color 200ms ease-out;
}
.overview-card:hover { border-color: var(--green); }
.overview-card .label {
  font-family: var(--font-display-2);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gray-500);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.overview-card .value {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 0.9;
  color: var(--gray-700);
  letter-spacing: 0;
}
.overview-card .value-small {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: var(--gray-700);
  letter-spacing: 0.01em;
}
.overview-card .unit {
  font-family: var(--font-display-2);
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  margin-left: 4px;
}
.overview-card .sub {
  font-family: var(--font-mono);
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  margin-top: 12px;
}

/* ---------- Selection Process timeline ---------- */
.selection-process { padding: 100px 0; background: var(--white); }
.selection-header { margin-bottom: 56px; }
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0; position: relative;
}
.process-grid::before {
  content: ''; position: absolute;
  top: 32px; left: 32px; right: 32px;
  height: 1px; background: var(--gray-200);
  z-index: 0;
}
.process-step {
  position: relative;
  padding: 0 16px;
  text-align: center;
}
.process-step:first-child { padding-left: 0; text-align: left; }
.process-step:last-child { padding-right: 0; text-align: right; }
.process-step-num {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gray-200);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 26px; color: var(--gray-500);
  letter-spacing: 0;
  margin-bottom: 18px;
  position: relative; z-index: 1;
  transition: all 200ms ease-out;
}
.process-step.is-current .process-step-num {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.process-step-label {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.process-step-name {
  font-size: 17px; font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.process-step-desc {
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.6;
}

/* ---------- TRYOUT form section + indicator ---------- */
.tryout-form-section { background: var(--gray-50); padding: 100px 0; }
.step-indicator {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-bottom: 56px;
  padding: 32px 40px;
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--gray-200);
}
.step-item { display: flex; align-items: center; gap: 16px; }
.step-item-num {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--gray-50);
  color: var(--gray-500);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
  transition: all 200ms ease-out;
  flex-shrink: 0;
}
.step-item.is-current .step-item-num { background: var(--pink); color: var(--white); }
.step-item.is-done .step-item-num { background: var(--green); color: var(--white); }
.step-item-text .step-label {
  font-family: var(--font-display-2);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gray-500);
  text-transform: uppercase;
}
.step-item.is-current .step-item-text .step-label { color: var(--pink); }
.step-item-text .step-name {
  font-size: 15px; font-weight: 700;
  color: var(--gray-700);
  margin-top: 2px;
  letter-spacing: 0.01em;
}
.step-connector { height: 2px; background: var(--gray-200); }
.step-connector.is-done { background: var(--green); }

/* ---------- TRYOUT form ---------- */
.tryout-form-wrap {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}
.tryout-form {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--gray-200);
  padding: 48px 56px;
}
.tryout-form-header {
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gray-200);
}
.tryout-form-header .step-tag {
  display: inline-block;
  font-family: var(--font-display-2);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--pink);
  background: rgba(233,30,99,0.08);
  padding: 4px 10px;
  border-radius: 3px;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.tryout-form-header h2 {
  font-family: var(--font-jp);
  font-size: 26px; font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}
.tryout-form-header p {
  font-size: 14px;
  color: var(--gray-500);
}
.tryout-form-time {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--green);
  letter-spacing: 0.06em;
  margin-top: 14px;
  display: flex; align-items: center; gap: 6px;
}
.tryout-form-time::before { content: '⏱'; font-family: var(--font-jp); }

.field { margin-bottom: 28px; display: grid; gap: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label {
  font-size: 13px; font-weight: 700;
  color: var(--gray-700);
  letter-spacing: 0.02em;
  display: flex; align-items: center; gap: 8px;
}
.field label .required {
  font-family: var(--font-display-2);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--error);
  background: rgba(209,69,32,0.1);
  padding: 2px 6px;
  border-radius: 2px;
  text-transform: uppercase;
}
.field label .optional {
  font-family: var(--font-display-2);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--gray-500);
  text-transform: uppercase;
}
.field .hint {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: -2px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field select,
.field textarea {
  font: inherit;
  font-size: 15px;
  color: var(--gray-700);
  padding: 14px 16px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--white);
  width: 100%;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out, background 200ms ease-out;
  font-family: inherit;
}
.field input[type="text"]:focus,
.field input[type="email"]:focus,
.field input[type="tel"]:focus,
.field input[type="date"]:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(11,216,182,0.12);
}
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid {
  border-color: var(--error);
  background: rgba(209,69,32,0.04);
}
.field input:user-valid,
.field select:user-valid,
.field textarea:user-valid {
  border-color: var(--green);
}
.field .error-msg {
  display: none;
  font-size: 12px;
  color: var(--error);
  margin-top: 2px;
  font-weight: 700;
}
.field input:user-invalid ~ .error-msg,
.field select:user-invalid ~ .error-msg,
.field textarea:user-invalid ~ .error-msg { display: block; }
.field:has(input:user-invalid) label,
.field:has(select:user-invalid) label,
.field:has(textarea:user-invalid) label { color: var(--error); }

.field-radio-group { display: grid; gap: 10px; }
.field-radio {
  display: flex; align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  cursor: pointer;
  transition: all 200ms ease-out;
}
.field-radio:hover { border-color: var(--green); background: rgba(11,216,182,0.03); }
.field-radio input[type="radio"] {
  margin-top: 4px;
  accent-color: var(--green);
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.field-radio:has(input:checked) {
  border-color: var(--green);
  background: var(--green-light);
}
.field-radio-text strong {
  display: block;
  font-size: 15px; font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 2px;
  letter-spacing: 0.01em;
}
.field-radio-text span {
  font-size: 13px;
  color: var(--gray-500);
}
.form-consent {
  background: var(--gray-50);
  border-radius: 8px;
  padding: 20px 24px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.7;
}
.form-consent a {
  color: var(--green);
  border-bottom: 1px solid currentColor;
}
.form-consent label {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer;
  color: var(--gray-700);
  font-weight: 500;
  margin-top: 12px;
}
.form-consent input[type="checkbox"] {
  accent-color: var(--green);
  margin-top: 4px;
}
.form-actions {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.form-actions-note {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gray-500);
}

/* ---------- TRYOUT sidebar ---------- */
.tryout-sidebar {
  position: sticky;
  top: 96px;
  display: grid; gap: 16px;
}
.sidebar-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 24px 26px;
}
.sidebar-card-label {
  font-family: var(--font-display-2);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.sidebar-card h4 {
  font-family: var(--font-jp);
  font-size: 17px; font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.5;
  margin-bottom: 10px;
}
.sidebar-card p {
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.7;
}
.sidebar-card.is-resume {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
  position: relative; overflow: hidden;
}
.sidebar-card.is-resume::before {
  content: ''; position: absolute;
  top: -50px; right: -50px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(233,30,99,0.18) 0%, transparent 65%);
  pointer-events: none;
}
.sidebar-card.is-resume .sidebar-card-label { color: var(--pink); }
.sidebar-card.is-resume h4 { color: var(--white); }
.sidebar-card.is-resume p { color: rgba(255,255,255,0.65); }
.sidebar-card.is-resume .resume-cta {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--pink);
  margin-top: 14px;
  display: inline-block;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  text-transform: uppercase;
}
.sidebar-faq-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  font-size: 13px; font-weight: 700;
  color: var(--gray-700);
  transition: all 200ms ease-out;
}
.sidebar-faq-link:hover { border-color: var(--green); color: var(--green); }

/* ---------- TRYOUT FAQ ---------- */
.tryout-faq { padding: 100px 0; background: var(--white); }
.faq-list { margin-top: 40px; display: grid; gap: 12px; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  transition: border-color 200ms ease-out;
}
.faq-item[open] { border-color: var(--green); }
.faq-item summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  cursor: pointer;
  font-size: 17px; font-weight: 700;
  color: var(--gray-700);
  letter-spacing: 0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--green);
  line-height: 1;
  transition: transform 200ms ease-out;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item-body {
  padding: 0 24px 24px;
  font-size: 14px;
  color: var(--gray-500);
  line-height: 1.8;
}

/* ---------- Scroll-driven reveal helper ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes section-enter {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .reveal {
      animation: section-enter linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

/* ---------- Phase 3c Responsive overrides ---------- */
@media (max-width: 1024px) {
  .drivers-grid-st3 { grid-template-columns: repeat(2, 1fr); }
  .drivers-grid-dev { grid-template-columns: repeat(2, 1fr); }
  .filter-bar { top: 60px; }
  .join-cta-band-inner { grid-template-columns: 1fr; gap: 32px; align-items: start; }

  .driver-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .driver-hero-num { font-size: 140px; }
  .driver-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .race-record-head, .race-record-row {
    grid-template-columns: 60px 100px 1fr 70px 70px 90px;
    padding: 12px 16px;
  }
  .driver-news-grid { grid-template-columns: repeat(2, 1fr); }
  .supporters-grid { grid-template-columns: repeat(3, 1fr); }

  .overview-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: 1fr; gap: 24px; }
  .process-grid::before { display: none; }
  .process-step,
  .process-step:first-child,
  .process-step:last-child {
    text-align: left; padding: 0;
    display: grid; grid-template-columns: 64px 1fr;
    gap: 16px; align-items: center;
  }
  .process-step-num { margin-bottom: 0; }
  .tryout-form-wrap { grid-template-columns: 1fr; }
  .tryout-sidebar { position: static; grid-template-columns: 1fr 1fr; }
  .step-indicator { padding: 24px; }
}

@media (max-width: 640px) {
  .page-hero { padding: 60px 0; }
  .drivers-grid-st3, .drivers-grid-dev { grid-template-columns: 1fr; }
  .page-hero-meta { gap: 24px; }
  .filter-tab { padding: 12px 14px; font-size: 13px; }
  .filter-tabs { gap: 4px; }

  .driver-hero { padding: 48px 0 64px; }
  .driver-hero-table { grid-template-columns: 1fr; }
  .driver-stats-grid { grid-template-columns: 1fr; }
  .stat-cell .stat-value { font-size: 72px; }
  .stat-cell.is-laptime .stat-value { font-size: 42px; }
  .race-record-head { display: none; }
  .race-record-row {
    grid-template-columns: 60px 1fr;
    gap: 4px 16px;
    padding: 16px;
  }
  .driver-news-grid, .supporters-grid { grid-template-columns: 1fr; }
  .supporters-cta { flex-direction: column; align-items: flex-start; }
  .driver-pagination-inner { grid-template-columns: 1fr; gap: 12px; }
  .pagination-link.is-next { justify-content: flex-start; text-align: left; }

  .tryout-hero { padding: 60px 0; }
  .overview-grid { grid-template-columns: 1fr; }
  .tryout-form { padding: 32px 24px; }
  .field-row { grid-template-columns: 1fr; }
  .step-indicator { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .step-connector { display: none; }
  .tryout-sidebar { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; justify-content: center; }
  .selection-process, .tryout-form-section, .tryout-faq, .tryout-overview { padding: 64px 0; }
  .tryout-hero-deadline { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tryout-hero-deadline .days { padding-left: 0; border-left: none; }
}

/* ============================================================
   Cockpit cell enhancements — Phase 3d (icon + gauge + status)
   ============================================================ */

/* Cell head: icon + label inline (replaces standalone label) */
.cockpit-cell-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.cockpit-cell-head .cockpit-cell-label {
  margin-bottom: 0;
}
.cockpit-cell-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 6px rgba(11,216,182,0.35));
}
.cockpit-cell-icon svg { width: 100%; height: 100%; display: block; }

/* Trend chip — for SEASON POINTS / GAP TO LEADER */
.cockpit-trend {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--green);
  padding: 3px 8px;
  border: 1px solid rgba(11,216,182,0.3);
  border-radius: 3px;
  margin-left: auto;
  text-transform: uppercase;
  white-space: nowrap;
}
.cockpit-trend.down {
  color: var(--error);
  border-color: rgba(209,69,32,0.3);
}

/* Position rank gauge in CHAMPIONSHIP cell */
.cockpit-rank {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid rgba(11,216,182,0.12);
}
.cockpit-rank-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  font-family: var(--font-display-2);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(11,216,182,0.7);
  text-transform: uppercase;
}
.cockpit-rank-frac {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.04em;
  font-size: 11px;
}
.cockpit-rank-bar {
  position: relative;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  margin-bottom: 10px;
}
.cockpit-rank-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--green) 0%, rgba(11,216,182,0.4) 100%);
  border-radius: 2px;
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.cockpit-rank-marker {
  position: absolute;
  left: 0%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--green), 0 0 0 3px rgba(11,216,182,0.18);
  transition: left 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.cockpit-rank-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 9px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.04em;
}

/* Cockpit divider — replaces old inline style */
.cockpit-divider {
  margin: 24px 0 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(11,216,182,0.15);
}

/* GAP TO LEADER row */
.cockpit-cell-gap {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.cockpit-gap-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 24px;
  color: var(--white);
  letter-spacing: 0.02em;
}

/* Cell row helper (replaces old inline style for value+unit display) */
.cockpit-cell-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
}

/* LED status tag — Best Lap "FASTEST IN CLASS" */
.cockpit-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 6px 10px;
  border: 1px solid rgba(11,216,182,0.3);
  border-radius: 3px;
  font-family: var(--font-display-2);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--green);
  text-transform: uppercase;
}
.cockpit-status-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: cockpit-blink 2s ease-in-out infinite;
}

/* Mini podium for PODIUMS cell */
.cockpit-podium-mini {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 40px;
  margin-top: 18px;
  padding-bottom: 16px;
  position: relative;
}
.cockpit-podium-mini .podium-bar {
  flex: 1;
  height: 0%;
  border-radius: 2px 2px 0 0;
  position: relative;
  transition: height 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cockpit-podium-mini .p1 {
  background: linear-gradient(180deg, var(--green) 0%, rgba(11,216,182,0.25) 100%);
  box-shadow: 0 0 12px rgba(11,216,182,0.3);
}
.cockpit-podium-mini .p2 {
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.08) 100%);
}
.cockpit-podium-mini .p3 {
  background: linear-gradient(180deg, var(--pink) 0%, rgba(233,30,99,0.25) 100%);
  opacity: 0.55;
}
.cockpit-podium-mini .podium-bar::after {
  content: attr(data-place);
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.45);
}
.cockpit-podium-mini .p1::after { color: rgba(11,216,182,0.85); }

/* Strengthen cell border + L-corner markers slightly */
.cockpit-cell {
  border-color: rgba(11,216,182,0.22);
}
.cockpit-cell::before,
.cockpit-cell::after {
  width: 14px;
  height: 14px;
  border-width: 1.5px;
}

/* Cell head icon entry: fade-in slight slide on cockpit reveal */
@media (prefers-reduced-motion: no-preference) {
  .cockpit-cell-icon {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
    transition-delay: 200ms;
  }
  .cockpit-section.is-revealed .cockpit-cell-icon {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   Cockpit ambient animations — Phase 3e
   "Always-running" instrument-panel feel.
   All under prefers-reduced-motion: no-preference.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* 1. Radar ping on position rank marker */
  .cockpit-rank-marker {
    /* Ensure ::before can be positioned around it */
  }
  .cockpit-section.is-revealed .cockpit-rank-marker::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid var(--green);
    opacity: 0;
    animation: cockpit-radar-ping 2.4s ease-out infinite;
    animation-delay: 1.2s;
    pointer-events: none;
  }
  @keyframes cockpit-radar-ping {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(3.4); opacity: 0;   }
  }

  /* 2. Best Lap soft glow pulse — whole laptime */
  .cockpit-section.is-revealed .cockpit-cell-laptime {
    animation: cockpit-laptime-glow 3.6s ease-in-out infinite;
    animation-delay: 1s;
  }
  @keyframes cockpit-laptime-glow {
    0%, 100% { text-shadow: 0 0 0 transparent; }
    50%      { text-shadow: 0 0 18px rgba(11,216,182,0.35); }
  }

  /* 3. Best Lap millisecond ticker — .ms part flickers like live data */
  .cockpit-section.is-revealed .cockpit-cell-laptime .ms {
    animation: cockpit-ms-flicker 1.6s ease-in-out infinite;
    animation-delay: 1.4s;
  }
  @keyframes cockpit-ms-flicker {
    0%, 100% { opacity: 1;   }
    50%      { opacity: 0.4; }
  }

  /* 4. Icon ambient flicker (drop-shadow breathes), staggered per cell */
  .cockpit-section.is-revealed .cockpit-cell-icon {
    animation: cockpit-icon-flicker 4.2s ease-in-out infinite;
  }
  .cockpit-section.is-revealed .cockpit-cell:nth-child(1) .cockpit-cell-icon { animation-delay: 1.5s; }
  .cockpit-section.is-revealed .cockpit-cell:nth-child(2) .cockpit-cell-icon { animation-delay: 2.2s; }
  .cockpit-section.is-revealed .cockpit-cell:nth-child(3) .cockpit-cell-icon { animation-delay: 2.9s; }
  .cockpit-section.is-revealed .cockpit-cell:nth-child(4) .cockpit-cell-icon { animation-delay: 3.6s; }
  @keyframes cockpit-icon-flicker {
    0%, 100% { filter: drop-shadow(0 0 6px  rgba(11,216,182,0.35)); }
    50%      { filter: drop-shadow(0 0 14px rgba(11,216,182,0.65)); }
  }

  /* 5. Mini podium 1st bar — glow pulses (winner indicator) */
  .cockpit-section.is-revealed .cockpit-podium-mini .p1 {
    animation: cockpit-podium-glow 3s ease-in-out infinite;
    animation-delay: 1.8s;
  }
  @keyframes cockpit-podium-glow {
    0%, 100% { box-shadow: 0 0 12px rgba(11,216,182,0.3);  }
    50%      { box-shadow: 0 0 26px rgba(11,216,182,0.6);  }
  }

  /* 6. Corner tag [01]-[04] periodic flash, staggered per cell */
  .cockpit-section.is-revealed .cockpit-corner-tag {
    animation: cockpit-tag-flash 6s ease-in-out infinite;
  }
  .cockpit-section.is-revealed .cockpit-cell:nth-child(1) .cockpit-corner-tag { animation-delay: 0s;   }
  .cockpit-section.is-revealed .cockpit-cell:nth-child(2) .cockpit-corner-tag { animation-delay: 1.5s; }
  .cockpit-section.is-revealed .cockpit-cell:nth-child(3) .cockpit-corner-tag { animation-delay: 3.0s; }
  .cockpit-section.is-revealed .cockpit-cell:nth-child(4) .cockpit-corner-tag { animation-delay: 4.5s; }
  @keyframes cockpit-tag-flash {
    0%, 88%, 100% { color: rgba(255,255,255,0.3); }
    93%           { color: rgba(11,216,182,0.7); }
  }

}

/* ============================================================
   Logo text-only mark (Phase 3f) — removed logo-mark icon
   Hierarchical 2-line "PROLINE / MOTOR SPORT RACING"
   ============================================================ */
.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  line-height: 1;
}
.logo-name {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.06em;
  color: var(--white);
  text-transform: uppercase;
  line-height: 1;
}
.logo-tagline {
  font-family: var(--font-display-2);
  font-size: 9px;
  letter-spacing: 0.32em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  line-height: 1;
}

/* Footer brand variant (larger, slight extra spacing) */
.footer-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  line-height: 1;
}
.footer-brand .logo-name { font-size: 36px; }
.footer-brand .logo-tagline { font-size: 11px; letter-spacing: 0.34em; }

/* ============================================================
   Phase 3g — Cockpit cell edge strengthening
   Thicker borders + brighter L-corner markers + subtle inner glow
   ============================================================ */
.cockpit-cell {
  border-width: 2px;
  border-color: rgba(11,216,182,0.32);
  background: rgba(10,10,10,0.78);
  box-shadow: inset 0 0 32px rgba(11,216,182,0.04);
}
.cockpit-cell::before,
.cockpit-cell::after {
  width: 16px;
  height: 16px;
  border-width: 2px;
  opacity: 0.85;
}
.cockpit-cell:hover {
  border-color: rgba(11,216,182,0.55);
  background: rgba(11,216,182,0.05);
}
.cockpit-cell:hover::before,
.cockpit-cell:hover::after {
  opacity: 1;
}

/* ============================================================
   DRIVERS section — dark variant (Phase 3h)
   TOP page only (.drivers-section). Archive uses .drivers-st3-section etc.
   ============================================================ */
.drivers-section {
  background: var(--black);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.drivers-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 20%, rgba(11,216,182,0.10) 0%, transparent 55%),
    radial-gradient(circle at 18% 88%, rgba(11,216,182,0.04) 0%, transparent 55%);
  pointer-events: none;
}
.drivers-section > .container { position: relative; z-index: 1; }

/* Section header colors flipped to dark variant */
.drivers-section .section-title-en { color: var(--white); }
.drivers-section .section-title-jp { color: rgba(255,255,255,0.55); }
.drivers-section .section-header-link {
  color: rgba(255,255,255,0.65);
  border-color: rgba(255,255,255,0.18);
}
.drivers-section .section-header-link:hover {
  color: var(--green);
  border-color: var(--green);
}

/* Card body adapted for dark backdrop */
.drivers-section .driver-card {
  background: var(--surface-dark);
  border: 1px solid rgba(255,255,255,0.08);
}
.drivers-section .driver-card:hover {
  border-color: var(--green);
}
.drivers-section .driver-portrait {
  background: linear-gradient(180deg, #2A2A2A 0%, #131313 100%);
}
.drivers-section .driver-name-jp { color: var(--white); }
.drivers-section .driver-name-en { color: rgba(255,255,255,0.55); }
.drivers-section .driver-role { color: var(--green); }

/* ============================================================
   TEAM cards: identity colors (Phase 3i)
   PHILOSOPHY = pink (passion / heart axis)
   MACHINE    = turquoise (technology / instrument axis)
   ============================================================ */
.team-card.is-philosophy {
  border-top: 3px solid var(--pink);
}
.team-card.is-philosophy .team-card-label,
.team-card.is-philosophy .team-card-arrow {
  color: var(--pink);
}
.team-card.is-philosophy:hover {
  border-color: var(--pink);
}
.team-card.is-philosophy::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(233,30,99,0.10) 0%, transparent 70%);
  pointer-events: none;
}

.team-card.is-machine {
  border-top: 3px solid var(--green);
}
.team-card.is-machine .team-card-label,
.team-card.is-machine .team-card-arrow {
  color: var(--green);
}
.team-card.is-machine:hover {
  border-color: var(--green);
}
.team-card.is-machine::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(11,216,182,0.10) 0%, transparent 70%);
  pointer-events: none;
}

/* ============================================================
   TEAM cards: DARK FILL variant (Phase 3i.2)
   Override the light fill — cards become surface-dark with stronger color accents
   ============================================================ */
.team-card.is-philosophy,
.team-card.is-machine {
  background: var(--surface-dark);
  border: 1px solid rgba(255,255,255,0.08);
}
.team-card.is-philosophy { border-top: 3px solid var(--pink); }
.team-card.is-machine    { border-top: 3px solid var(--green); }

.team-card.is-philosophy h3,
.team-card.is-machine h3 { color: var(--white); }

.team-card.is-philosophy p,
.team-card.is-machine p { color: rgba(255,255,255,0.65); }

.team-card.is-philosophy:hover { border-color: var(--pink); }
.team-card.is-machine:hover    { border-color: var(--green); }

.team-card.is-philosophy::before {
  background: radial-gradient(circle, rgba(233,30,99,0.18) 0%, transparent 70%);
}
.team-card.is-machine::before {
  background: radial-gradient(circle, rgba(11,216,182,0.18) 0%, transparent 70%);
}

/* ============================================================
   TEAM cards: SOLID COLOR FILL variant (Phase 3i.3)
   Overrides Phase 3i.2 dark fill — fully painted with brand colors
   ============================================================ */
.team-card.is-philosophy,
.team-card.is-machine {
  border: none;
  border-top: none;
  overflow: hidden;
  position: relative;
}
.team-card.is-philosophy {
  background: linear-gradient(135deg, var(--pink-deep) 0%, var(--pink) 100%);
}
.team-card.is-machine {
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green) 100%);
}

.team-card.is-philosophy .team-card-label,
.team-card.is-machine .team-card-label {
  color: rgba(255,255,255,0.85);
}
.team-card.is-philosophy h3,
.team-card.is-machine h3 {
  color: var(--white);
}
.team-card.is-philosophy p,
.team-card.is-machine p {
  color: rgba(255,255,255,0.82);
}
.team-card.is-philosophy .team-card-arrow,
.team-card.is-machine .team-card-arrow {
  color: var(--white);
}

.team-card.is-philosophy:hover {
  border-color: transparent;
  box-shadow: 0 12px 32px rgba(233,30,99,0.32);
  transform: translateY(-2px);
}
.team-card.is-machine:hover {
  border-color: transparent;
  box-shadow: 0 12px 32px rgba(11,216,182,0.32);
  transform: translateY(-2px);
}

/* Remove the corner glow — entire card IS the glow now */
.team-card.is-philosophy::before,
.team-card.is-machine::before {
  display: none;
}

/* ============================================================
   PARTNERS CTA: yellow card (Phase 3j)
   KPI #1 = sponsor acquisition. Yellow = caution-flag semantic + editorial differentiation.
   Pink reserved for JOIN/CTA, turquoise for general UI, yellow for partner acquisition only.
   ============================================================ */
.partners-cta {
  background: linear-gradient(135deg, #E6BD2B 0%, #F4D03F 100%);
  position: relative;
  overflow: hidden;
}
.partners-cta-text h4 {
  color: var(--gray-700);
}
.partners-cta-text p {
  color: rgba(44,44,42,0.75);
}
/* Convert the ghost button to a strong dark CTA on yellow */
.partners-cta .btn-ghost {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}
.partners-cta .btn-ghost:hover {
  background: transparent;
  color: var(--gray-700);
  border-color: var(--gray-700);
}


/* ============================================================
   PARTNERS archive page (Local theme)
   Sponsor acquisition is KPI #1. This block keeps the archive
   scoped, responsive, and aligned with design_language_v02.
   ============================================================ */
.partners-archive {
  background: var(--white);
}

.partners-hero .page-hero-sub {
  max-width: 760px;
}

.partners-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.partner-model-section,
.partner-directory-section,
.partner-plan-section {
  container-type: inline-size;
}

.partner-value-grid,
.partner-archive-grid,
.partner-plan-grid {
  display: grid;
  gap: 16px;
}

.partner-value-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.partner-value-card,
.partner-archive-card,
.partner-plan-card,
.partner-single-aside {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--white);
}

.partner-value-card,
.partner-plan-card {
  padding: 28px;
  transition: border-color 180ms ease-out, transform 180ms ease-out;
}

.partner-value-card:hover,
.partner-plan-card:hover,
.partner-archive-card:hover {
  border-color: rgba(11,216,182,0.55);
  transform: translateY(-2px);
}

.partner-card-label {
  font-family: var(--font-display-2);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--green-deep);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.partner-value-card h2,
.partner-plan-card h2,
.partner-archive-body h2 {
  font-size: 22px;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 12px;
}

.partner-value-card p:not(.partner-card-label),
.partner-plan-card p,
.partner-archive-body p {
  color: var(--gray-500);
  font-size: 14px;
  line-height: 1.8;
}

.partner-archive-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.partner-archive-card {
  overflow: hidden;
  transition: border-color 180ms ease-out, transform 180ms ease-out;
}

.partner-archive-logo,
.partner-single-logo {
  min-height: 160px;
  background: var(--gray-50);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  color: var(--gray-500);
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

.partner-archive-logo img,
.partner-single-logo img {
  width: 100%;
  height: 100%;
  max-height: 96px;
  object-fit: contain;
}

.partner-archive-body {
  padding: 24px;
}

.partner-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 18px;
}

.text-link {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--green-deep);
  text-transform: uppercase;
  border-bottom: 2px solid rgba(15,118,110,0.25);
  padding-bottom: 3px;
  transition: color 180ms ease-out, border-color 180ms ease-out;
}

.text-link:hover {
  color: var(--pink);
  border-color: var(--pink);
}

.partner-plan-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.partner-plan-card {
  background: var(--gray-50);
}

.partner-plan-card.is-featured {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.partner-plan-card.is-featured .partner-card-label {
  color: var(--green);
}

.partner-plan-card.is-featured p,
.partner-plan-card.is-featured li {
  color: rgba(255,255,255,0.72);
}

.partner-plan-card ul {
  list-style: none;
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.partner-plan-card li {
  color: var(--gray-500);
  font-size: 14px;
  line-height: 1.6;
  padding-left: 18px;
  position: relative;
}

.partner-plan-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  background: var(--green);
}

.partner-cta-band {
  background: var(--black);
  color: var(--white);
  padding: 72px 0;
}

.partner-cta-band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
}

.partner-cta-band h2 {
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}

.partner-cta-band p:not(.eyebrow-light) {
  color: rgba(255,255,255,0.68);
  font-size: 16px;
  font-weight: 700;
}

.partner-single-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.partner-single-aside {
  padding: 24px;
  position: sticky;
  top: 100px;
}

.partner-single-logo {
  margin-bottom: 22px;
  border-radius: 4px;
}

.partner-single-content {
  font-size: 16px;
  line-height: 1.9;
}

.partner-single-content > * + * {
  margin-top: 1.2em;
}

@container (max-width: 860px) {
  .partner-value-grid,
  .partner-archive-grid,
  .partner-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (max-width: 560px) {
  .partner-value-grid,
  .partner-archive-grid,
  .partner-plan-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .partners-hero-actions,
  .partner-cta-band-inner,
  .partner-single-layout {
    grid-template-columns: 1fr;
  }

  .partner-cta-band-inner {
    display: grid;
  }

  .partner-cta-band .btn,
  .partners-hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .partner-single-aside {
    position: static;
  }
}


/* ============================================================
 * PAGE: /team/philosophy/
 * Visual contract: mockups/proline-team-philosophy-v01.html (sections lines 117-708, 778-797)
 * ============================================================ */
/* ===== PHILOSOPHY HERO (dark + pink identity glow) ===== */
.philosophy-hero {
  background: var(--black);
  color: var(--white);
  padding: 80px 0 100px;
  position: relative;
  overflow: hidden;
}
.philosophy-hero::before {
  content: ''; position: absolute;
  top: -180px; right: -100px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(233,30,99,0.18) 0%, transparent 65%);
  pointer-events: none;
}
.philosophy-hero::after {
  content: ''; position: absolute;
  bottom: -120px; left: -80px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(11,216,182,0.05) 0%, transparent 60%);
  pointer-events: none;
}
.philosophy-hero-inner {
  position: relative;
  max-width: 1200px; margin: 0 auto;
  padding: 0 24px;
  display: grid;
  /* 右パネルが幅広画像 → 細い縦動画(340px)に変わったので 7:5 をやめる。
     テキスト列と動画列を実寸で確保し、justify-content:center で「2つのまとまり」
     ごと中央へ寄せる（=左右端に張り付かず、余白は外側に均等に散る）。
     ≤1024 は下の 1fr 単列が上書きするので、この2列指定はデスクトップのみ効く。 */
  grid-template-columns: minmax(0, 560px) 340px;
  gap: 64px; align-items: center; justify-content: center;
}
.philosophy-hero-eyebrow {
  font-family: var(--font-display-2);
  font-size: 14px;
  letter-spacing: 0.22em;
  color: var(--pink);
  text-transform: uppercase;
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 10px;
}
.philosophy-hero-eyebrow::before {
  content: ''; width: 32px; height: 1px; background: var(--pink);
}
.philosophy-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(64px, 9.5vw, 140px);
  line-height: 0.94;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.philosophy-hero-jp {
  font-family: var(--font-jp);
  font-size: 22px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
  line-height: 1.5;
  margin-bottom: 32px;
}
.philosophy-hero-lead {
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  line-height: 1.9;
  max-width: 540px;
}
.philosophy-hero-portrait {
  aspect-ratio: 4/5;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #2A2A2A 0%, #131313 100%);
  position: relative;
  display: flex; align-items: flex-end;
  padding: 24px;
}
.philosophy-hero-portrait .portrait-tag {
  font-family: var(--font-display-2);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--pink);
  text-transform: uppercase;
}
.philosophy-hero-portrait .portrait-name {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: 0.02em;
  color: var(--white);
  margin-top: 4px;
}
.philosophy-hero-portrait .portrait-name-jp {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  margin-top: 4px;
}

/* ===== INTRO (white, lead text) ===== */
.philosophy-intro {
  background: var(--white);
  padding: 100px 0;
}
.philosophy-intro-inner {
  max-width: 880px; margin: 0 auto; padding: 0 24px;
}
.philosophy-intro-eyebrow {
  font-family: var(--font-display-2);
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--pink);
  margin-bottom: 16px;
  text-transform: uppercase;
}
.philosophy-intro-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--gray-700);
  margin-bottom: 32px;
  text-transform: uppercase;
}
.philosophy-intro-body {
  font-size: 17px;
  line-height: 2.0;
  color: var(--gray-700);
  font-weight: 500;
}
.philosophy-intro-body p + p { margin-top: 1.4em; }

/* ===== THE STORY (dark, 4 chapters longform) ===== */
.philosophy-story {
  background: #050505;
  color: var(--white);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.philosophy-story-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(233,30,99,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,30,99,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 100%);
}
.philosophy-story > .container { position: relative; }
.philosophy-story-header {
  margin-bottom: 80px;
  padding-bottom: 24px;
  border-bottom: 2px solid rgba(233,30,99,0.22);
  position: relative;
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px;
}
.philosophy-story-header::before {
  content: ''; position: absolute;
  left: 0; bottom: -2px;
  width: 120px; height: 2px;
  background: var(--pink);
}
.philosophy-story-eyebrow {
  font-family: var(--font-display-2);
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--pink);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.philosophy-story-title-en {
  font-family: var(--font-display);
  font-size: 56px;
  letter-spacing: 0.02em;
  line-height: 0.9;
  color: var(--white);
  text-transform: uppercase;
}
.philosophy-story-title-jp {
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  margin-top: 8px;
  letter-spacing: 0.05em;
}
.philosophy-story-meta {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
}

.story-chapters { display: grid; gap: 80px; }
.story-chapter {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 56px;
  align-items: start;
}
.story-chapter-num {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 0.85;
  color: var(--pink);
  letter-spacing: -0.02em;
  position: relative;
}
.story-chapter-num::after {
  content: '';
  position: absolute;
  bottom: -16px; left: 0;
  width: 60px; height: 2px;
  background: var(--pink);
}
.story-chapter-content {
  display: grid; gap: 20px;
}
.story-chapter-label {
  font-family: var(--font-display-2);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(233,30,99,0.7);
  text-transform: uppercase;
}
.story-chapter h3 {
  font-family: var(--font-jp);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--white);
}
.story-chapter p {
  font-size: 16px;
  line-height: 2.0;
  color: rgba(255,255,255,0.72);
  font-weight: 500;
}
.story-chapter-image {
  margin-top: 12px;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(233,30,99,0.06) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.3);
  font-family: var(--font-display-2);
  font-size: 12px;
  letter-spacing: 0.2em;
}

/* ===== Placeholder boxes (content awaiting founder interview) ===== */
.story-chapter-placeholder {
  background: rgba(233,30,99,0.06);
  border: 1px dashed rgba(233,30,99,0.45);
  border-radius: 4px;
  padding: 20px 24px;
  margin-top: 4px;
}
.placeholder-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display-2);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--pink);
  background: rgba(233,30,99,0.15);
  padding: 4px 10px;
  border-radius: 3px;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.placeholder-tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 6px var(--pink);
}
.story-chapter-placeholder p {
  font-size: 14px !important;
  color: rgba(255,255,255,0.75) !important;
  line-height: 1.8 !important;
  margin-bottom: 10px;
}
.story-chapter-placeholder p:last-child { margin-bottom: 0; }
.placeholder-source {
  margin-top: 8px;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: rgba(233,30,99,0.7) !important;
  letter-spacing: 0.04em !important;
}

/* ===== 4 DISCLAIMERS (white, 4 cards) ===== */
.philosophy-disclaim {
  background: var(--white);
  padding: 120px 0;
}
.philosophy-disclaim-header {
  text-align: left;
  margin-bottom: 64px;
}
.philosophy-disclaim-eyebrow {
  font-family: var(--font-display-2);
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--pink);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.philosophy-disclaim-title {
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 64px);
  letter-spacing: 0.02em;
  line-height: 0.95;
  color: var(--gray-700);
  text-transform: uppercase;
}
.philosophy-disclaim-sub {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-500);
  margin-top: 12px;
}

.disclaim-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.disclaim-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-top: 3px solid var(--pink);
  border-radius: 8px;
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
}
.disclaim-card-num {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--pink);
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 18px;
}
.disclaim-card-from {
  font-family: var(--font-display-2);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gray-500);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.disclaim-card-from-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-500);
  text-decoration: line-through;
  margin-bottom: 18px;
  line-height: 1.5;
}
.disclaim-card-arrow {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--pink);
  margin-bottom: 14px;
}
.disclaim-card-to {
  font-family: var(--font-display-2);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--pink);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.disclaim-card-to-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-700);
  letter-spacing: 0.01em;
  line-height: 1.5;
  margin-bottom: 14px;
}
.disclaim-card-desc {
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.8;
}

/* ===== MANIFESTO (dark, big pull-quote) ===== */
.philosophy-manifesto {
  background: var(--black);
  color: var(--white);
  padding: 140px 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.philosophy-manifesto::before {
  content: ''; position: absolute;
  top: -150px; right: -150px;
  width: 580px; height: 580px;
  background: radial-gradient(circle, rgba(233,30,99,0.20) 0%, transparent 60%);
  pointer-events: none;
}
.philosophy-manifesto::after {
  content: ''; position: absolute;
  bottom: -120px; left: -120px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(11,216,182,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.philosophy-manifesto-inner {
  position: relative;
  max-width: 1200px; margin: 0 auto;
  padding: 0 24px;
}
.philosophy-manifesto-eyebrow {
  font-family: var(--font-display-2);
  font-size: 14px;
  letter-spacing: 0.32em;
  color: var(--pink);
  margin-bottom: 32px;
  text-transform: uppercase;
}
.philosophy-manifesto-quote {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 112px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--white);
  text-transform: uppercase;
  max-width: 1100px;
  margin: 0 auto;
}
.philosophy-manifesto-quote .accent { color: var(--pink); }
.philosophy-manifesto-attribution {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.4);
  margin-top: 40px;
  text-transform: uppercase;
}

/* ===== HOMETOWN (white, 2-col) ===== */
.philosophy-hometown {
  background: var(--white);
  padding: 120px 0;
}
.philosophy-hometown-inner {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 80px;
  align-items: center;
}
.philosophy-hometown-text .section-eyebrow {
  font-family: var(--font-display-2);
  font-size: 13px; letter-spacing: 0.22em;
  color: var(--green); text-transform: uppercase;
  margin-bottom: 12px;
}
.philosophy-hometown-text h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: 0.02em;
  line-height: 0.95;
  color: var(--gray-700);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.philosophy-hometown-text-jp {
  font-size: 17px; font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 28px;
  letter-spacing: 0.01em;
}
.philosophy-hometown-text p {
  font-size: 15px;
  line-height: 2.0;
  color: var(--gray-500);
  font-weight: 500;
}
.philosophy-hometown-text p + p { margin-top: 1.4em; }
.philosophy-hometown-image {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--green-light) 0%, var(--gray-50) 100%);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-500);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.philosophy-hometown-stats {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-200);
}
.philosophy-hometown-stats .stat-label {
  font-family: var(--font-display-2);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gray-500);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.philosophy-hometown-stats .stat-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 17px;
  color: var(--gray-700);
  letter-spacing: 0.02em;
}

/* ===== RELATED (white) ===== */
.philosophy-related {
  background: var(--white);
  padding: 60px 0 120px;
  border-top: 1px solid var(--gray-200);
}
.philosophy-related-header {
  margin-bottom: 40px;
}
.philosophy-related-header .section-eyebrow {
  font-family: var(--font-display-2);
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.philosophy-related-header h2 {
  font-family: var(--font-display);
  font-size: 40px;
  letter-spacing: 0.02em;
  color: var(--gray-700);
  text-transform: uppercase;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.related-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 28px 32px;
  display: grid; gap: 8px;
  transition: border-color 200ms ease-out, transform 200ms ease-out;
}
.related-card:hover {
  border-color: var(--green);
  transform: translateY(-2px);
}
.related-card-label {
  font-family: var(--font-display-2);
  font-size: 11px; letter-spacing: 0.22em;
  color: var(--gray-500);
  text-transform: uppercase;
}
.related-card h3 {
  font-family: var(--font-display);
  font-size: 32px; letter-spacing: 0.02em;
  line-height: 0.95;
  color: var(--gray-700);
  text-transform: uppercase;
}
.related-card p {
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.7;
  margin: 6px 0 14px;
}
.related-card-arrow {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.15em;
  color: var(--green);
  text-transform: uppercase;
}


/* PHILOSOPHY page — responsive (from mockup lines 779-797) */
@media (max-width: 1024px) {
  .philosophy-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .philosophy-hometown-inner { grid-template-columns: 1fr; gap: 40px; }
  .story-chapter { grid-template-columns: 80px 1fr; gap: 32px; }
  .story-chapter-num { font-size: 64px; }
  .disclaim-grid { grid-template-columns: 1fr 1fr; }
  .related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .philosophy-hero { padding: 48px 0 64px; }
  .philosophy-intro, .philosophy-story, .philosophy-disclaim, .philosophy-manifesto, .philosophy-hometown { padding: 64px 0; }
  .story-chapter { grid-template-columns: 1fr; gap: 16px; }
  .story-chapter-num { font-size: 56px; }
  .disclaim-grid, .related-grid { grid-template-columns: 1fr; }
  .philosophy-hometown-stats { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
 * PAGE: /team/machine/
 * Visual contract: mockups/proline-team-machine-v01.html (sections lines 117-651, 706-724)
 * ============================================================ */
.container-wide { max-width: 1400px; margin: 0 auto; padding: 0 32px; }
/* ===== MACHINE HERO (dark + turquoise glow + machine silhouette) ===== */
.machine-hero {
  background: var(--black);
  color: var(--white);
  padding: 80px 0 100px;
  position: relative;
  overflow: hidden;
}
.machine-hero::before {
  content: ''; position: absolute;
  top: -180px; right: -100px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(11,216,182,0.18) 0%, transparent 65%);
  pointer-events: none;
}
.machine-hero::after {
  content: ''; position: absolute;
  bottom: -150px; left: -80px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(233,30,99,0.05) 0%, transparent 60%);
  pointer-events: none;
}
.machine-hero-inner {
  position: relative;
  max-width: 1400px; margin: 0 auto;
  padding: 0 32px;
}
.machine-hero-eyebrow {
  font-family: var(--font-display-2);
  font-size: 14px;
  letter-spacing: 0.22em;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 10px;
}
.machine-hero-eyebrow::before {
  content: ''; width: 32px; height: 1px; background: var(--green);
}
.machine-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(64px, 10vw, 156px);
  line-height: 0.94;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.machine-hero h1 .accent { color: var(--green); }
.machine-hero-jp {
  font-family: var(--font-jp);
  font-size: 20px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
  margin-bottom: 24px;
  max-width: 720px;
}
.machine-hero-desc {
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  line-height: 1.9;
  max-width: 640px;
  margin-bottom: 48px;
}
.machine-hero-visual {
  margin-top: 48px;
  aspect-ratio: 21/9;
  background: linear-gradient(135deg, #1A1A1A 0%, #0A0A0A 100%);
  border: 1px solid rgba(11,216,182,0.18);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.3);
  font-family: var(--font-display-2);
  font-size: 14px;
  letter-spacing: 0.22em;
}
.machine-hero-visual::before {
  content: ''; position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11,216,182,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,216,182,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 100%);
}
.machine-hero-visual span {
  position: relative; z-index: 1;
}

/* ===== QUICK SPECS (cockpit-style BENTO) ===== */
.machine-specs-quick {
  background: var(--cockpit-bg);
  color: var(--white);
  padding: 72px 0 120px;
  position: relative;
  overflow: hidden;
}
.machine-specs-quick-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(11,216,182,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,216,182,0.10) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 100%);
}
.machine-specs-quick > .container-wide { position: relative; }
.specs-quick-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid rgba(11,216,182,0.22);
  position: relative;
  flex-wrap: wrap; gap: 16px;
}
.specs-quick-header::before {
  content: ''; position: absolute;
  left: 0; bottom: -2px;
  width: 120px; height: 2px;
  background: var(--green);
}
.specs-quick-header h2 {
  font-family: var(--font-display);
  font-size: 56px; letter-spacing: 0.02em;
  line-height: 0.9; color: var(--white);
  text-transform: uppercase;
}
.specs-quick-header .specs-quick-jp {
  font-family: var(--font-jp);
  font-size: 14px; font-weight: 700;
  color: rgba(255,255,255,0.5);
  margin-top: 8px;
  letter-spacing: 0.08em;
}
.specs-quick-status {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
}
.specs-quick-status .led {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}

.specs-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.spec-cell {
  position: relative;
  background: rgba(10,10,10,0.78);
  border: 2px solid rgba(11,216,182,0.32);
  border-radius: 4px;
  padding: 24px 26px;
  overflow: hidden;
  box-shadow: inset 0 0 32px rgba(11,216,182,0.04);
  transition: border-color 300ms ease-out, background 300ms ease-out;
}
.spec-cell::before,
.spec-cell::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid var(--green);
  opacity: 0.85;
}
.spec-cell::before { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.spec-cell::after { bottom: 6px; right: 6px; border-left: none; border-top: none; }
.spec-cell:hover {
  border-color: rgba(11,216,182,0.55);
  background: rgba(11,216,182,0.05);
}
.spec-cell .corner-tag {
  position: absolute;
  top: 12px; right: 14px;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
}
.spec-cell-label {
  font-family: var(--font-display-2);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(11,216,182,0.7);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.spec-cell-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  color: var(--white);
  letter-spacing: 0.02em;
}
.spec-cell-value .ms { color: var(--green); }
.spec-cell-unit {
  font-family: var(--font-display-2);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
  margin-left: 4px;
}
.spec-cell-sub {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.5);
  margin-top: 10px;
  text-transform: uppercase;
}

/* ===== FULL SPEC TABLE (white) ===== */
.machine-specs-full {
  background: var(--white);
  padding: 120px 0;
}
.specs-full-header {
  margin-bottom: 56px;
}
.specs-full-eyebrow {
  font-family: var(--font-display-2);
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.specs-full-title {
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 64px);
  letter-spacing: 0.02em;
  line-height: 0.95;
  color: var(--gray-700);
  text-transform: uppercase;
}
.specs-full-jp {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-500);
  margin-top: 8px;
}

.specs-table-group { display: grid; gap: 48px; }
.specs-table {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
}
.specs-table-header {
  background: var(--gray-50);
  padding: 16px 24px;
  border-bottom: 1px solid var(--gray-200);
  display: flex; align-items: center; gap: 14px;
}
.specs-table-header .num {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--green);
  letter-spacing: 0;
}
.specs-table-header h3 {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.12em;
  color: var(--gray-700);
  text-transform: uppercase;
}
.specs-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--gray-200);
  align-items: baseline;
}
.specs-row:last-child { border-bottom: none; }
.specs-row .label {
  font-family: var(--font-display-2);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gray-500);
  text-transform: uppercase;
}
.specs-row .value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  color: var(--gray-700);
  letter-spacing: 0.02em;
}
.specs-row .value-note {
  display: block;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 4px;
  letter-spacing: 0;
}

/* ===== LIVERY (dark) ===== */
.machine-livery {
  background: var(--black);
  color: var(--white);
  padding: 120px 0;
  position: relative; overflow: hidden;
}
.machine-livery::before {
  content: ''; position: absolute;
  top: -200px; left: -150px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(11,216,182,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.machine-livery-inner {
  position: relative;
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 80px; align-items: center;
}
.machine-livery-text {
  display: grid; gap: 24px;
}
.machine-livery-eyebrow {
  font-family: var(--font-display-2);
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--green);
  text-transform: uppercase;
}
.machine-livery h2 {
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 72px);
  letter-spacing: 0.02em;
  line-height: 0.95;
  text-transform: uppercase;
}
.machine-livery-jp {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
}
.machine-livery-text p {
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
}
.machine-livery-colors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.color-chip {
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
}
.color-chip-swatch {
  width: 32px; height: 32px;
  border-radius: 50%;
  margin-bottom: 12px;
}
.color-chip-label {
  font-family: var(--font-display-2);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.color-chip-hex {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--white);
  letter-spacing: 0.04em;
}
.color-chip-pct {
  font-family: var(--font-display-2);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.08em;
  margin-top: 4px;
}
.machine-livery-visual {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #1A1A1A 0%, #050505 100%);
  border: 1px solid rgba(11,216,182,0.18);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.3);
  font-family: var(--font-display-2);
  font-size: 12px;
  letter-spacing: 0.22em;
  position: relative;
  overflow: hidden;
}
.machine-livery-visual::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(11,216,182,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,216,182,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 100%);
}
.machine-livery-visual span { position: relative; z-index: 1; }

/* ===== ST-3 REGULATIONS (white) ===== */
.machine-regs {
  background: var(--white);
  padding: 120px 0;
}
.machine-regs-header {
  margin-bottom: 48px;
}
.machine-regs-header .eyebrow {
  font-family: var(--font-display-2);
  font-size: 13px; letter-spacing: 0.22em;
  color: var(--green); text-transform: uppercase;
  margin-bottom: 10px;
}
.machine-regs-header h2 {
  font-family: var(--font-display);
  font-size: clamp(44px, 5vw, 64px);
  letter-spacing: 0.02em;
  line-height: 0.95;
  color: var(--gray-700);
  text-transform: uppercase;
}
.regs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.regs-block {
  display: grid; gap: 12px;
}
.regs-block-num {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--green);
  line-height: 1;
}
.regs-block h3 {
  font-family: var(--font-jp);
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-700);
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.regs-block p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--gray-500);
  font-weight: 500;
}

/* ===== RELATED (white) ===== */
.machine-related {
  background: var(--white);
  padding: 60px 0 120px;
  border-top: 1px solid var(--gray-200);
}
.machine-related-header { margin-bottom: 40px; }
.machine-related-header .eyebrow {
  font-family: var(--font-display-2);
  font-size: 13px; letter-spacing: 0.22em;
  color: var(--green); text-transform: uppercase;
  margin-bottom: 8px;
}
.machine-related-header h2 {
  font-family: var(--font-display);
  font-size: 40px;
  letter-spacing: 0.02em;
  color: var(--gray-700);
  text-transform: uppercase;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.related-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 28px 32px;
  display: grid; gap: 8px;
  transition: border-color 200ms ease-out, transform 200ms ease-out;
}
.related-card:hover {
  border-color: var(--green);
  transform: translateY(-2px);
}
.related-card-label {
  font-family: var(--font-display-2);
  font-size: 11px; letter-spacing: 0.22em;
  color: var(--gray-500);
  text-transform: uppercase;
}
.related-card h3 {
  font-family: var(--font-display);
  font-size: 32px; letter-spacing: 0.02em;
  line-height: 0.95;
  color: var(--gray-700);
  text-transform: uppercase;
}
.related-card p {
  font-size: 13px;
  color: var(--gray-500);
  line-height: 1.7;
  margin: 6px 0 14px;
}
.related-card-arrow {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.15em;
  color: var(--green);
  text-transform: uppercase;
}


/* MACHINE page — responsive (from mockup lines 707-724) */
@media (max-width: 1024px) {
  .specs-quick-grid { grid-template-columns: repeat(2, 1fr); }
  .machine-livery-inner { grid-template-columns: 1fr; gap: 48px; }
  .machine-livery-colors { grid-template-columns: repeat(3, 1fr); }
  .regs-grid { grid-template-columns: 1fr; gap: 32px; }
  .specs-row { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 640px) {
  .machine-hero { padding: 48px 0 64px; }
  .machine-specs-quick, .machine-specs-full, .machine-livery, .machine-regs { padding: 64px 0; }
  .specs-quick-grid { grid-template-columns: 1fr; }
  .machine-livery-colors { grid-template-columns: 1fr; }
}

/* ============================================================
 * ARCHIVE: race — /race/
 * ============================================================ */
.race-list-section { padding: 80px 0 120px; }
.race-list {
  display: grid;
  gap: 16px;
}
.race-list-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px 32px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  color: var(--gray-700);
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.race-list-row:hover {
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -12px rgba(11, 216, 182, 0.35);
}
.race-list-num {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: 0.04em;
  color: var(--green);
}
.race-list-main { min-width: 0; }
.race-list-title {
  font-family: var(--font-display-2, var(--font-display));
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gray-700);
  margin-bottom: 6px;
}
.race-list-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--gray-500);
  text-transform: uppercase;
}
.race-list-cta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--green);
}
.race-list-empty {
  text-align: center;
  padding: 64px 0;
  color: var(--gray-500);
}
@media (max-width: 640px) {
  .race-list-row { grid-template-columns: 64px 1fr; gap: 16px; padding: 20px 20px; }
  .race-list-num { font-size: 28px; }
  .race-list-cta { grid-column: 1 / -1; text-align: right; }
}

/* ============================================================
 * ARCHIVE: recruitment — /join/
 * ============================================================ */
.join-hub-section { padding: 80px 0 120px; }
.join-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1024px) { .join-hub-grid { grid-template-columns: 1fr; } }

/* ============================================================
 * SINGLE: recruitment — /join/{slug}/
 * ============================================================ */
.recruitment-body-section { padding: 80px 0 120px; }
.recruitment-content {
  font-size: 16px;
  line-height: 1.9;
  color: var(--gray-700);
}
.recruitment-content h2 {
  font-family: var(--font-jp);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gray-700);
  margin: 48px 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--green);
}
.recruitment-content h2:first-child { margin-top: 0; }
.recruitment-content p { margin-bottom: 1.4em; }
.recruitment-content ul {
  margin: 0 0 1.4em 1.4em;
  padding: 0;
}
.recruitment-content li { margin-bottom: 8px; }
.recruitment-content .legal-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gray-500);
  letter-spacing: 0.08em;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
}
.recruitment-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--gray-200);
  flex-wrap: wrap;
}

/* ============================================================
 * Suppress programmatic-focus outline on h1.
 * view-transitions.js focuses main h1 after navigation for screen-readers.
 * That focus must NOT show a visible ring (it's not from keyboard).
 * Keyboard users still get :focus-visible rings on other focusable elements.
 * ============================================================ */
main h1:focus,
main h1:focus-visible,
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none;
}
/* ============================================================
 * HERO BANNERS — 4 fixed slots, always visible side-by-side
 * Dark section between Hero and Next Race
 * ============================================================ */
.hero-banners {
  padding: 32px 0;
  background: var(--black);
}
.hero-banners-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.banner-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 28px 24px;
  aspect-ratio: 2 / 1;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--white);
  background: var(--surface-dark);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.banner-slot:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 32px -16px rgba(0, 0, 0, 0.6);
}
.banner-slot.is-tone-green { background: linear-gradient(135deg, var(--green-deep) 0%, var(--surface-dark) 70%); }
.banner-slot.is-tone-pink  { background: linear-gradient(135deg, var(--pink-deep) 0%, var(--surface-dark) 70%); }
.banner-slot.is-tone-dark  { background: linear-gradient(135deg, var(--gray-700) 0%, var(--surface-dark) 70%); }
.banner-slot-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}
.banner-slot-title {
  font-family: var(--font-display-2, var(--font-display));
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
  line-height: 1.35;
}
.banner-slot-cta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--green);
  margin-top: auto;
}
.banner-slot.is-tone-pink .banner-slot-cta { color: var(--pink); }
.banner-slot.is-tone-dark .banner-slot-cta { color: var(--green); }
@media (max-width: 1024px) {
  .hero-banners-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .hero-banners-grid { grid-template-columns: 1fr; }
  .banner-slot { padding: 22px 22px 18px; }
}


/* ============================================================
   RACE instrument hero panel
   Tightens the /race/ hero metadata into a cockpit-style data UI.
   ============================================================ */
.race-archive .page-hero-inner {
  max-width: 1400px;
}

.race-instrument-panel {
  margin-top: 44px;
  max-width: 980px;
  border: 1px solid rgba(11,216,182,0.28);
  background:
    linear-gradient(90deg, rgba(11,216,182,0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(11,216,182,0.05) 1px, transparent 1px),
    rgba(5,5,5,0.62);
  background-size: 34px 34px, 34px 34px, auto;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.race-instrument-panel::before,
.race-instrument-panel::after {
  content: '';
  position: absolute;
  width: 42px;
  height: 42px;
  pointer-events: none;
}

.race-instrument-panel::before {
  left: 10px;
  top: 10px;
  border-left: 2px solid var(--green);
  border-top: 2px solid var(--green);
}

.race-instrument-panel::after {
  right: 10px;
  bottom: 10px;
  border-right: 2px solid rgba(11,216,182,0.7);
  border-bottom: 2px solid rgba(11,216,182,0.7);
}

.race-instrument-head,
.race-instrument-status {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.52);
  text-transform: uppercase;
}

.race-instrument-head {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.race-instrument-status {
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.race-instrument-status span:nth-child(2) {
  color: var(--green);
}

.race-instrument-status span:nth-child(2)::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  background: var(--green);
  vertical-align: 1px;
}

.race-instrument-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.race-instrument-cell {
  min-height: 150px;
  padding: 24px 20px 20px;
  border-right: 1px solid rgba(255,255,255,0.08);
  position: relative;
}

.race-instrument-cell:last-child {
  border-right: none;
}

.race-instrument-label {
  display: block;
  font-family: var(--font-display-2);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--green);
  text-transform: uppercase;
}

.race-instrument-cell strong {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 400;
  line-height: 0.9;
  color: var(--white);
  letter-spacing: 0.01em;
}

.race-instrument-sub {
  display: block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
}

.race-instrument-track {
  display: block;
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  height: 3px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}

.race-instrument-track span {
  display: block;
  width: var(--level);
  height: 100%;
  background: var(--green);
}

@media (max-width: 900px) {
  .race-instrument-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .race-instrument-cell:nth-child(2) {
    border-right: none;
  }

  .race-instrument-cell:nth-child(-n+2) {
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
}

@media (max-width: 560px) {
  .race-instrument-head,
  .race-instrument-status {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .race-instrument-grid {
    grid-template-columns: 1fr;
  }

  .race-instrument-cell,
  .race-instrument-cell:nth-child(2) {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .race-instrument-cell:last-child {
    border-bottom: none;
  }
}


/* ===== Real imagery embeds (2026-07 画像実装) ===== */
.hero-bg .hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;z-index:0;transition:opacity 1.4s ease-in-out;}
.hero-bg .hero-media.is-active{opacity:1;}
@media (prefers-reduced-motion: reduce){.hero-bg .hero-media{transition:none;}}
/* レイヤー順: 下=写真(z0) → グラデ(z1) → テキスト(z2, 最前面) */
.hero .hero-content{position:relative;z-index:2;}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.86) 0%,rgba(10,10,10,.58) 30%,rgba(10,10,10,.18) 58%,rgba(10,10,10,0) 88%),linear-gradient(0deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,0) 34%);z-index:1;}
.machine-hero-visual img,.story-chapter-image img,.philosophy-hometown-image img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}

/* ===== Race/News/Machine 画像実装 追加 (2026-07) ===== */
.race-list-thumb{width:120px;flex:0 0 120px;aspect-ratio:16/10;overflow:hidden;border-radius:6px;margin-right:20px;}
.race-list-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.race-single-media{margin:0 0 8px;}
.race-single-media .container-narrow img{width:100%;height:auto;display:block;border-radius:8px;border:1px solid rgba(11,216,182,0.18);}
.machine-gallery{padding:64px 0;}
.machine-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px;}
.machine-gallery-grid figure{margin:0;aspect-ratio:16/9;overflow:hidden;border-radius:8px;border:1px solid rgba(11,216,182,0.18);background:#111;}
.machine-gallery-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.machine-gallery-grid figure:hover img{transform:scale(1.04);}
@media (max-width:760px){.machine-gallery-grid{grid-template-columns:repeat(2,1fr);}.race-list-thumb{display:none;}}

/* =========================================================================
   TEASER OVERRIDES — proline-teaser only (§HERO/§PHILOSOPHY)
   ========================================================================= */

/* Smooth in-page anchor scrolling (JOIN US / sticky CTA → #join) */
html { scroll-behavior: smooth; }

/* =========================================================================
   UX POLISH (2026-07-14) — micro-interactions, a11y, scroll reveal
   ========================================================================= */

/* Page base is dark (the teaser is all dark sections). Also stops the glass
   header from sampling a white body behind it at the top of the page. */
body { background: var(--black); }

/* Branded text selection */
::selection { background: var(--green); color: var(--black); }

/* ===== HERO entrance — "gradual spacing" heading (magicui-style) =====
   JS splits the H1 into per-letter .char spans and staggers a `.is-in` class.
   Transition-based (not @keyframes) so it plays reliably and the JS safety net
   can force the final state. The opacity:0 start is gated on `.is-splitting`
   (added only by JS) so no-JS / reduced-motion keeps the copy fully visible. */
.hero h1 .char { display: inline-block; }
/* Keep a word's letters together (the per-letter split would otherwise allow
   breaks between letters, e.g. "GENERATIO / N"). */
.hero h1 .word { display: inline-block; white-space: nowrap; }

/* On phones the fixed 80px (from the ≤1024 rule) makes the longest word
   "GENERATION" overflow one line below ~414px (iPhone 12 Pro = 390px).
   Fluid-shrink so it always fits: GENERATION width ≈ 4.375 × font-size,
   available width = 100vw − 64px padding (−8px safety). Caps at 80px. */
@media (max-width: 480px) {
  .hero h1 { font-size: min(80px, calc((100vw - 72px) / 4.375)); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero h1.is-splitting .char {
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
  }
  .hero h1.is-splitting .char.is-in { opacity: 1; transform: none; }

  /* The final "." in RACING. keeps blinking (starts after the letters land). */
  @keyframes proline-dot-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.12; } }
  .hero h1.is-splitting .accent .char:last-child {
    animation: proline-dot-blink 1.3s ease-in-out 1.8s infinite;
  }

  /* Same blink on the trailing "." of every other section heading.
     JS wraps that last dot in .dot-blink (see interactions.js). */
  .dot-blink {
    display: inline-block;
    animation: proline-dot-blink 1.3s ease-in-out infinite;
  }
}

/* Keyboard focus rings (a11y). Mouse users keep clean UI via :focus-visible. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.join-card:focus-visible,
.sticky-cta:focus-visible,
.footer-sns-item:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

/* Anchor targets clear the sticky header when smooth-scrolling */
:target { scroll-margin-top: 100px; }
#join, #philosophy, #contact, .concept, .partner { scroll-margin-top: 100px; }
@media (max-width: 640px) {
  #join, #philosophy, #contact, .concept, .partner { scroll-margin-top: 80px; }
}

/* Header gains subtle depth once the page is scrolled */
.header { transition: box-shadow 250ms ease, background 250ms ease; }
.header.is-scrolled { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); }

/* Glassmorphism header — translucent + backdrop blur. Solid black stays as the
   fallback (base .header rule); the glass only applies where supported. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header {
    background: rgba(10, 10, 10, 0.5);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
            backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  .header.is-scrolled {
    background: rgba(10, 10, 10, 0.66);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 30px rgba(0, 0, 0, 0.4);
  }
}

/* THE STORY cards: photo zooms gently on hover */
.story-card-img img { transition: transform 600ms cubic-bezier(.22,1,.36,1); will-change: transform; }
@media (hover: hover) {
  .story-card:hover .story-card-img img { transform: scale(1.05); }
}

/* Scroll-reveal はファイル末尾の REVEAL ON SCROLL に一本化した。
   ここにあった animation-timeline: view() 版は削除。ブロック単位で
   まとめて動くだけで段差（カスケード）が付けられず、対応ブラウザも限られる。
   2系統を並走させると animation の `both` が transition を上書きして壊れる。 */

/* Header: logo centred, nav to the right (was a left/right flex split).
   A 3-column grid keeps the logo optically centred regardless of the nav width. */
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  /* 上下 18px → 8px（各10px詰め＝ヘッダー全体を20px低く）。左右は据え置き。 */
  padding: 8px 32px;
}
.header-inner > a   { grid-column: 2; justify-self: center; }  /* logo (or custom-logo-link) */
.header-inner > nav { grid-column: 3; justify-self: end; }

/* Header logo image (custom-logo or theme file) */
.logo--image, .header .custom-logo-link { display: inline-flex; align-items: center; }
.logo-img, .header .custom-logo {
  height: 64px; width: auto; display: block;
}
@media (max-width: 640px) {
  .logo-img, .header .custom-logo { height: 48px; }
}

/* ---------- ロゴ背後のエメラルドの光 ----------
   ロゴの後ろで、ぼんやりした緑の光がゆっくり呼吸する。

   ::before（＝ロゴ自身の背景）に置く。ヘッダー側に置くと、ガラス（backdrop-filter）
   の"すりガラス越し"に回って光が濁る。ロゴの手前に重ねれば素のまま透る。

   blur ではなく、輪郭のない radial-gradient で作る。filter:blur は毎フレーム
   ラスタライズし直しになり、常時動くものに使うと重い（背景パスの件と同じ轍）。
   radial-gradient + opacity/scale なら合成だけで済む＝GPU に載る。 */
.logo, .header .custom-logo-link {
  position: relative;
  isolation: isolate;   /* 光がヘッダーの他要素の下に潜り込まないよう層を閉じる */
}
.logo::before, .header .custom-logo-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 190%;
  aspect-ratio: 1;              /* 正円。ロゴ幅に追従して大きさが決まる */
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(11, 216, 182, 0.42) 0%,
    rgba(11, 216, 182, 0.18) 32%,
    rgba(11, 216, 182, 0.06) 52%,
    transparent 70%
  );
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes proline-logo-glow {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.92); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
  }
  .logo::before, .header .custom-logo-link::before {
    animation: proline-logo-glow 4.5s ease-in-out infinite;
  }
}

@media (max-width: 640px) {
  .logo::before, .header .custom-logo-link::before { width: 165%; }
}

/* PHILOSOPHY: founder portrait card → cockpit photo */
.philosophy-hero-portrait { padding: 0; }
.philosophy-hero-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* PHILOSOPHY：レース映像をセクション背景に敷く版。
   映像は「敷く」だけで主役はコピー。暗幕で可読性を担保する。
   （旧・右パネルの YouTube ショートと beams 背景は廃止） */
.philosophy-hero--video {
  position: relative;
  overflow: hidden;
  /* isolation: isolate は使わない。
     セクションに重なり階層(stacking context)を作ると、z-index:-1 の背景は
     「セクション自身の背景色」の裏に回る。ここは不透明な黒なので、映像が
     まるごと隠れて真っ黒になる（実際にこれで見えなくなった）。
     PARTNER と同じ「背景は z-index:0、本文は z-index:1」の積み方に揃える。 */
}
.philosophy-bg {
  position: absolute;
  inset: 0;
  z-index: 0;          /* セクション背景の上・コピーの下 */
  background: var(--black);
}
.philosophy-bg .philosophy-bg-poster,
.philosophy-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.philosophy-bg video { z-index: 1; }   /* 読み込めたらポスターの上に載る */

/* 暗幕。左を濃く落として、コピーが必ず読めるようにする。 */
.philosophy-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.72) 45%, rgba(10,10,10,0.45) 100%),
    linear-gradient(0deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0) 40%);
}

/* 映像版は1カラム。テキストを左に置き、右は映像を見せる余白にする。 */
.philosophy-hero--video .philosophy-hero-inner {
  grid-template-columns: minmax(0, 640px);
  justify-content: start;
}
@media (max-width: 1024px) {
  .philosophy-hero--video .philosophy-hero-inner { grid-template-columns: 1fr; }
}

/* PHILOSOPHY: match HERO content width/padding (1400 / 32px, was 1200 / 24px) */
.philosophy-hero-inner { max-width: 1400px; padding: 0 32px; z-index: 1; }

/* ===== Beams background (PHILOSOPHY section) =====
   Soft tilted light columns drifting behind the copy. Animated with
   transform/opacity only (GPU-composited) → light. Content sits above
   (z-index:1) and stays readable. */
.philosophy-hero { isolation: isolate; }
.philosophy-hero .beams {
  position: absolute; inset: -25% -15%;
  z-index: 0; pointer-events: none;
  transform: rotate(-30deg);
}
.philosophy-hero .beam {
  position: absolute; top: -30%; height: 160%;
  border-radius: 9999px;
  opacity: var(--op, 0.15);
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: no-preference) {
  .philosophy-hero .beam {
    animation: proline-beam var(--dur, 12s) linear var(--delay, 0s) infinite;
  }
  /* Continuous one-way flow: each beam rises through the section, fading in at the
     start and out at the end, then loops seamlessly (reset while invisible). */
  @keyframes proline-beam {
    0%   { transform: translateY(60vh);  opacity: 0; }
    15%  { opacity: var(--op, 0.2); }
    85%  { opacity: var(--op, 0.2); }
    100% { transform: translateY(-60vh); opacity: 0; }
  }
}

/* Section-heading size standard below the hero = CONCEPT h2 size.
   PROOF OVER WORDS was clamp(64,9.5vw,140) — too big; align to concept. */
.philosophy-hero h1 { font-size: clamp(40px, 6vw, 92px); }

/* ===== CONCEPT / THE STORY (merged: WHY WE EXIST + THE STORY) ===== */
.concept { background: var(--black); color: var(--white); padding: 8px 0 100px; }
.concept-inner { max-width: 1400px; margin: 0 auto; padding: 0 32px; }
.concept-eyebrow {
  font-family: var(--font-display-2);
  font-size: 14px; letter-spacing: 0.22em; color: var(--pink);
  text-transform: uppercase; margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
}
.concept-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--pink); }
.concept h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 92px);
  line-height: 0.98; letter-spacing: 0; text-transform: uppercase;
  margin-bottom: 28px;
}
.concept-lead {
  font-size: 16px; line-height: 1.9; color: rgba(255,255,255,0.7);
  max-width: 640px; margin-bottom: 56px;
}
.story-album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.story-card { margin: 0; }
.story-card-img {
  aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden;
  background: linear-gradient(180deg, #2A2A2A 0%, #131313 100%);
}
.story-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-card-label {
  font-family: var(--font-display-2);
  font-size: 13px; letter-spacing: 0.18em; color: var(--green);
  margin-top: 14px;
}
.story-card-jp { font-size: 15px; font-weight: 700; color: var(--white); margin-top: 6px; }
@media (max-width: 860px) {
  .concept-inner { padding: 0 20px; }
  .story-album { grid-template-columns: 1fr; gap: 16px; }
  .story-card-img { aspect-ratio: 16 / 9; }
}

/* ===== JOIN ===== */
/* Align width with the rest (hero/philosophy/concept = 1400 / 32px) */
.join-section .container { max-width: 1400px; padding: 0 32px; }
/* Heading size = section standard (was clamp(56,10vw,144)) */
.join-title { font-size: clamp(40px, 6vw, 92px); }
/* Participation / tryout status line */
.join-status {
  display: inline-block; margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: 0.06em; color: var(--white);
  background: rgba(255,255,255,0.08);
  border-radius: 4px; padding: 9px 16px;
}

/* ===== JOIN — dotted surface (3D wavy dot grid) =====
   Same idea as efferd's Three.js component, but drawn on a plain 2D canvas:
   a perspective-projected grid of dots with a flowing sine wave. No Three.js,
   no WebGL. The loop pauses when the section is offscreen (see interactions.js). */
.join-section .container { position: relative; z-index: 1; }
/* Ambient emerald wash across the card band — gives the glass something
   continuous to frost (blurring sparse dots on pure black just returns black). */
.join-section {
  background-image: radial-gradient(65% 42% at 50% 84%, rgba(11, 216, 182, 0.17), transparent 72%);
}
canvas.join-dots {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: block; width: 100%; height: 100%;
  /* Keep the near rows (down past the cards) solid; fade the far edge + sides
     so the surface recedes into the dark instead of ending in a hard box. */
  -webkit-mask: radial-gradient(150% 125% at 50% 88%, #000 48%, transparent 96%);
          mask: radial-gradient(150% 125% at 50% 88%, #000 48%, transparent 96%);
}

/* ===== JOIN cards — spotlight-card (easemize) =====
   All cards look identical by default (no coloured border/tint). Colour appears
   only on hover: an emerald spotlight (surface glow + border ring) that follows
   the cursor. Fill/gradient based — no box-shadow neon glow. */

/* Drop the featured card's persistent pink border + tint → uniform default */
.join-card.featured { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); }
/* Hover keeps only the lift; the spotlight (not pink) is the accent */
.join-card:hover { border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); }

/* Glassmorphism cards — frosted panes floating over the dotted surface.
   The translucent fill above stays as the fallback where backdrop-filter
   isn't supported. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .join-card,
  .join-card.featured {
    /* a glass pane: sheen gradient over a heavy frost of what's behind */
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
    -webkit-backdrop-filter: blur(16px) saturate(180%);
            backdrop-filter: blur(16px) saturate(180%);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  .join-card:hover {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05));
    border-color: rgba(255, 255, 255, 0.22);
  }
}

.join-card { position: relative; }
.join-card > * { position: relative; z-index: 1; }   /* content above the glow layers */

/* Soft glow over the card surface. The hue shifts with the cursor (sample's
   "configurable hue"): JS sets --hue from the pointer x (emerald→pink range). */
.join-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, -20%), hsl(var(--hue, 160) 85% 55% / 0.18), transparent 60%);
  opacity: 0; transition: opacity 0.3s ease;
}
/* Spotlight on the border ring (masked to the 1.5px edge), same shifting hue */
.join-card::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 0%), hsl(var(--hue, 160) 90% 62%), transparent 65%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  opacity: 0; transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .join-card:hover::before,
  .join-card:hover::after { opacity: 1; }
}

/* ===== PARTNER (full-bleed photo closer) =====
   A tall band so the photo shows more of its vertical extent (object-fit: cover
   crops less vertically the taller the section gets). Content is centred in it. */
.partner {
  position: relative; color: var(--white); overflow: hidden;
  padding: 180px 0;
  min-height: 82vh;
  display: flex; align-items: center;
}
.partner .partner-inner { width: 100%; }
.partner-bg { position: absolute; inset: 0; z-index: 0; }
.partner-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Shade over the photo. Kept only as strong as the copy needs: dark enough on
   the left for the white heading/body, then falls away fast so the photo reads. */
.partner-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,0.86) 0%, rgba(10,10,10,0.50) 42%, rgba(10,10,10,0.06) 100%),
              linear-gradient(0deg, rgba(10,10,10,0.40) 0%, rgba(10,10,10,0) 32%);
}
.partner-inner { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: 0 32px; }
.partner h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 92px);
  line-height: 0.98; letter-spacing: 0; text-transform: uppercase;
  margin-bottom: 24px;
}
.partner-lead {
  font-size: 16px; line-height: 1.9; color: rgba(255,255,255,0.88);
  max-width: 600px; margin-bottom: 32px;
  /* the shade is light now, so carry the copy over the photo with a soft shadow */
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}
.partner h2 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }

/* ===== Section-heading scale (below the hero) =====
   Bigger on SP than the old 40px floor, still clearly under the hero
   (hero h1 = clamp(56px,10.5vw,156px); section vw 7 < hero 10.5 → never crosses). */
.philosophy-hero h1,
.concept h2,
.join-title,
.partner h2 { font-size: clamp(52px, 7vw, 96px); }

/* ===== Fix: JOIN cards broke on SP =====
   Base rule (max-width:640px) sets .join-grid{display:block}, which leaves the
   <a> cards inline so their border can't wrap the block content. Restore a
   1-col grid and force the cards to block. */
@media (max-width: 640px) {
  .join-grid { display: grid; grid-template-columns: 1fr; }
  .join-card { display: block; }
}

/* ===== FOOTER (teaser: brand + contact, 2 columns) ===== */
.footer-grid { grid-template-columns: 2fr 1fr; gap: 48px; }
/* CONTACT 列を撤去したので、ブランドブロックだけの1カラムにする。
   2fr 1fr のままだと、右に空の列が残って左に寄って見える。 */
.footer-grid--single { grid-template-columns: 1fr; }
.footer-brand { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 20px; }
.footer-brand .logo-name { font-size: 40px; line-height: 1; }
.footer-brand .logo-tagline { font-size: 12px; letter-spacing: 0.18em; color: rgba(255,255,255,0.5); }
.footer-contact li { color: rgba(255,255,255,0.7); margin-bottom: 8px; }
.footer .is-placeholder { color: rgba(255,255,255,0.35); }
.footer-sns-item.is-placeholder { color: rgba(255,255,255,0.3); cursor: default; }
.footer-sns-item.is-placeholder:hover { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.3); }
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ===== HERO primary CTA emphasis ===== */
.hero .hero-cta { align-items: center; gap: 16px; }
.hero .btn-primary { font-size: 18px; padding: 20px 42px; }
.hero .btn-primary .btn-arrow { display: inline-block; transition: transform 200ms ease-out; }
.hero .btn-primary:hover .btn-arrow { transform: translateX(4px); }

/* ===== JOIN US "shine" — a light band sweeps across the button =====
   Not a neon glow (which is forbidden); a surface sheen via a moving gradient. */
.hero .btn-primary, .sticky-cta { position: relative; overflow: hidden; }
.hero .btn-primary > *, .sticky-cta > * { position: relative; z-index: 1; }
.hero .btn-primary::after, .sticky-cta::after {
  content: ''; position: absolute; top: 0; left: -85%;
  width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform: skewX(-22deg); pointer-events: none; z-index: 0;
  animation: proline-shine 4.2s ease-in-out infinite;
}
@keyframes proline-shine {
  0%   { left: -85%; }
  16%  { left: 135%; }
  100% { left: 135%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .btn-primary::after, .sticky-cta::after { animation: none; }
}

/* ===== Sticky JOIN US CTA =====
   Appears once the hero is scrolled past; hides over the footer.
   PC = floating pill bottom-right. SP = full-width bottom bar. (出し分け) */
.sticky-cta {
  position: fixed; z-index: 90;
  background: var(--pink); color: #fff;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transform: translateY(160%); opacity: 0; pointer-events: none;
  transition: transform 0.42s cubic-bezier(.22,1,.36,1), opacity 0.42s ease, background 200ms ease;
}
.sticky-cta.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.sticky-cta:hover { background: var(--pink-deep); }
.sticky-cta .sticky-cta-arrow { display: inline-block; transition: transform 200ms ease-out; }
.sticky-cta:hover .sticky-cta-arrow { transform: translateX(4px); }

/* PC: floating pill, bottom-right */
@media (min-width: 769px) {
  .sticky-cta { right: 28px; bottom: 28px; border-radius: 999px; padding: 17px 30px; gap: 12px; font-size: 16px; box-shadow: 0 10px 34px rgba(0,0,0,0.4); }
  .sticky-cta .sticky-cta-sub { display: none; }
}
/* SP: full-width bottom bar */
@media (max-width: 768px) {
  .sticky-cta { left: 0; right: 0; bottom: 0; flex-direction: column; gap: 2px; padding: 13px 20px; font-size: 17px; border-radius: 0; box-shadow: 0 -6px 24px rgba(0,0,0,0.35); }
  .sticky-cta .sticky-cta-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; text-transform: none; opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: opacity 0.3s ease; }
}

/* =========================================================================
   CONTACT — 簡易フォーム（PARTNER 直下）
   RACE QUEEN / CREW / PARTNER の受け口を1本に集約したセクション。
   カード左のラインアクセントは使わない（塗り＋全周の細い罫線で区切る）。
   ========================================================================= */
.contact-section {
  position: relative;
  background: var(--black);
  /* JOIN と同じエメラルドの環境光。フォーム面のガラス感の"下地"になる。 */
  background-image: radial-gradient(60% 40% at 50% 0%, rgba(11, 216, 182, 0.10), transparent 70%);
}

.contact-header { text-align: center; max-width: 720px; margin: 0 auto; }
.contact-header h2 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--white);
  text-transform: uppercase;
}
.contact-sub { color: var(--gray-200); line-height: 1.9; }

/* 送信結果。成功は緑、失敗はピンク。左ボーダーではなく塗りと全周罫線で示す。 */
.contact-note {
  max-width: 760px;
  margin: 0 auto 40px;
  padding: 18px 22px;
  border-radius: 12px;
  border: 1px solid var(--gray-700);
  background: rgba(255, 255, 255, 0.04);
  color: var(--gray-200);
  line-height: 1.8;
}
.contact-note strong { color: var(--white); margin-right: 6px; }
.contact-note.is-sent {
  border-color: rgba(11, 216, 182, 0.45);
  background: rgba(11, 216, 182, 0.10);
}
.contact-note.is-error {
  border-color: rgba(233, 30, 99, 0.45);
  background: rgba(233, 30, 99, 0.10);
}

.contact-form {
  max-width: 760px;
  margin: 0 auto;
  padding: 44px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .contact-form {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
  }
}

/* ハニーポット。表示から完全に外す。display:none だと一部ボットに気づかれるので、
   見えないが「存在はする」状態に置く。 */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-field { border: 0; padding: 0; margin: 0 0 28px; }
.contact-form > .contact-field:last-of-type { margin-bottom: 0; }

.contact-label {
  display: block;
  padding: 0;
  margin-bottom: 12px;
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
}
.contact-label em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--pink);
  margin-left: 8px;
}

/* 区分：ラジオをチップ状に。選択中は緑で塗る。 */
.contact-types { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-type { position: relative; cursor: pointer; }
.contact-type input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.contact-type span {
  display: block;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.03);
  color: var(--gray-200);
  font-size: 13px;
  line-height: 1.4;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.contact-type:hover span { border-color: rgba(11, 216, 182, 0.5); color: var(--white); }
.contact-type input:checked + span {
  border-color: var(--green);
  background: rgba(11, 216, 182, 0.14);
  color: var(--white);
}
.contact-type input:focus-visible + span {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-row .contact-field { margin-bottom: 28px; }

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 10, 10, 0.55);
  color: var(--white);
  font: inherit;
  font-size: 15px;
  line-height: 1.7;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-form textarea { resize: vertical; min-height: 150px; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--gray-500); }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(11, 216, 182, 0.16);
}
.contact-form [aria-invalid="true"] { border-color: var(--pink); }

.contact-err { margin-top: 8px; font-size: 13px; color: var(--pink); }

.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
  color: var(--gray-200);
  font-size: 13px;
  line-height: 1.8;
  cursor: pointer;
}
.contact-consent input { flex: 0 0 auto; margin-top: 5px; accent-color: var(--green); }
.contact-consent em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--pink);
}

.contact-submit { margin-top: 36px; text-align: center; }
.contact-submit .btn { border: 0; cursor: pointer; font: inherit; }

@media (max-width: 640px) {
  .contact-form { padding: 28px 22px; border-radius: 14px; }
  .contact-row { grid-template-columns: 1fr; gap: 0; }
  .contact-types { gap: 8px; }
  .contact-type span { padding: 11px 15px; font-size: 12px; }
}

/* =========================================================================
   CONCEPT — pinned scrollytelling（写真が全画面で展開する）
   スクロールで滑走路(scrolly-track)を進む間、stage が画面に貼りつき、
   5枚の写真がクロスフェード＆ズームで入れ替わる。

   進行は JS（interactions.js）が各フレームに --p（0〜1の可視度）を書き込む。
   opacity と transform:scale を --p で駆動＝合成のみで済み GPU に載る。

   ★フォールバック：JS が付ける html.js-scrolly が無ければ、下の縦積み表示に
     なる（写真が消えることはない）。reduced-motion でも同じく縦積み。
   ========================================================================= */

/* --- 既定（＝フォールバック）：ピンなし・縦積みギャラリー --- */
.scrolly-track { position: relative; }
.scrolly-stage {
  display: grid;
  gap: 20px;
  max-width: 1200px;
  margin: 48px auto 0;
  padding: 0 24px;
}
.scrolly-frame { margin: 0; }
.scrolly-frame-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface-dark);
}
.scrolly-frame-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scrolly-frame-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-top: 16px; }
.scrolly-frame-index {
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  font-size: 12px; letter-spacing: 0.12em; color: var(--green);
}
.scrolly-frame-label {
  font-family: var(--font-display-2); font-size: 18px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--white);
}
.scrolly-frame-jp { font-size: 13px; color: var(--gray-200); }
.scrolly-rail { display: none; }

/* --- JS 有効時：ピン留めスクロールに切り替える --- */
.js-scrolly .scrolly-track {
  /* 滑走路の高さ＝写真枚数ぶん。1枚あたり ~85vh のスクロールで送る。 */
  height: calc(var(--frames, 5) * 85vh);
}
.js-scrolly .scrolly-stage {
  position: sticky;
  top: 0;
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: clip;
  background: var(--black);
}
.js-scrolly .scrolly-frame {
  position: absolute;
  inset: 0;
  opacity: var(--p, 0);
  will-change: opacity;
}
.js-scrolly .scrolly-frame-img {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  height: 100%;
}
.js-scrolly .scrolly-frame-img img {
  /* --p が上がるほど 1.0 に近づく（＝展開しながら落ち着く）。 */
  transform: scale(calc(1.10 - 0.10 * var(--p, 0)));
  will-change: transform;
}
/* 写真の上に敷く暗幕。文字（キャプション）を必ず読ませる。 */
.js-scrolly .scrolly-frame-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(10, 10, 10, 0.80) 0%, rgba(10, 10, 10, 0.10) 34%, rgba(10, 10, 10, 0) 55%),
    linear-gradient(90deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0) 42%);
}
.js-scrolly .scrolly-frame-cap {
  position: absolute;
  left: clamp(24px, 6vw, 96px);
  bottom: clamp(48px, 9vh, 110px);
  right: clamp(24px, 6vw, 96px);
  flex-direction: column;
  gap: 10px;
  margin: 0;
  /* キャプションは写真本体よりわずかに遅れて立ち上がる（--p を二乗して尻上がりに）。 */
  opacity: var(--p, 0);
  transform: translateY(calc(24px * (1 - var(--p, 0))));
}
.js-scrolly .scrolly-frame-index { font-size: 13px; }
.js-scrolly .scrolly-frame-label { font-size: clamp(20px, 3vw, 34px); }
.js-scrolly .scrolly-frame-jp { font-size: clamp(14px, 1.6vw, 18px); color: var(--gray-50); }

/* 進捗レール（右端の縦ティック） */
.js-scrolly .scrolly-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: absolute;
  right: clamp(18px, 3vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.js-scrolly .scrolly-rail-tick {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transition: background 0.3s ease, transform 0.3s ease;
}
.js-scrolly .scrolly-rail-tick.is-active {
  background: var(--green);
  transform: scale(1.5);
  box-shadow: 0 0 12px rgba(11, 216, 182, 0.6);
}

@media (max-width: 640px) {
  .js-scrolly .scrolly-track { height: calc(var(--frames, 5) * 78vh); }
  .js-scrolly .scrolly-rail { right: 14px; gap: 9px; }
  .js-scrolly .scrolly-rail-tick { width: 7px; height: 7px; }
}

/* reduced-motion：JS が付けたクラスごと無効化して縦積みに戻す。
   （JS 側でも reduced-motion 時はピンを有効化しないが、二重の保険） */
@media (prefers-reduced-motion: reduce) {
  .js-scrolly .scrolly-track { height: auto; }
  .js-scrolly .scrolly-stage {
    position: static; display: grid; gap: 20px; height: auto;
    max-width: 1200px; margin: 48px auto 0; padding: 0 24px;
  }
  .js-scrolly .scrolly-frame { position: static; opacity: 1; }
  .js-scrolly .scrolly-frame-img { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; height: auto; }
  .js-scrolly .scrolly-frame-img img { transform: none; }
  .js-scrolly .scrolly-frame-img::after { display: none; }
  .js-scrolly .scrolly-frame-cap { position: static; flex-direction: row; opacity: 1; transform: none; margin-top: 16px; }
  .js-scrolly .scrolly-rail { display: none; }
}

/* =========================================================================
   HERO — JOIN US を募集3区分への「見出しリンク」に分解
   1つのボタンではなく、DRIVER / RACE QUEEN / CREW それぞれへ直接飛ばす。
   区分は色で識別し、下線が伸びる動きで「押せる見出し」だと分からせる。
   ※カード左のラインアクセントは使わない（文字色と下線だけで表現する）。
   ========================================================================= */
.hero .hero-cta { display: block; }   /* 旧ボタン用の flex 指定を上書き */

.hero-cta-label {
  display: block;
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 16px;
}

.hero-join {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* 半透明のガラス面を敷いてボタンにする。写真の上でも面として立ち、
   押せることが一目で分かる。色は区分ごと（文字＋枠＋ホバーの塗り）。 */
.hero-join-item {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 22px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: var(--white);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-join-item {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
    -webkit-backdrop-filter: blur(12px) saturate(150%);
            backdrop-filter: blur(12px) saturate(150%);
  }
}
.hero-join-item:hover {
  border-color: currentColor;
  transform: translateY(-2px);
}
.hero-join-en {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display-2);
  font-size: clamp(21px, 2.3vw, 30px);
  letter-spacing: 0.09em;
  line-height: 1.05;
  text-transform: uppercase;
  color: inherit;
}
.hero-join-note {
  font-family: var(--font-jp);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}
.hero-join-arrow {
  font-size: 0.78em;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-join-item:hover .hero-join-arrow { transform: translateX(5px); }
.hero-join-item:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* 区分ごとの色。ホバーでその色をうっすら塗り、どれを選んでいるか分かるようにする。 */
.hero-join-item--driver { color: var(--green); }
.hero-join-item--driver:hover { background: rgba(11, 216, 182, 0.16); }
.hero-join-item--queen  { color: var(--pink); }
.hero-join-item--queen:hover  { background: rgba(233, 30, 99, 0.16); }
.hero-join-item--crew   { color: var(--gray-50); }
.hero-join-item--crew:hover   { background: rgba(255, 255, 255, 0.16); }

@media (max-width: 640px) {
  /* スマホは縦積みで全幅。指で押せる面にする。 */
  .hero-join { flex-direction: column; gap: 10px; }
  .hero-join-item { padding: 13px 18px; }
  .hero-join-en { font-size: 19px; }
}

/* 着地点のカードを一瞬わかりやすく（ヒーローから飛んできた時の目印）。
   固定ヘッダーに隠れないよう scroll-margin も確保する。 */
.join-card { scroll-margin-top: 120px; }
.join-card:target {
  border-color: rgba(11, 216, 182, 0.55);
  box-shadow: 0 0 0 2px rgba(11, 216, 182, 0.28);
}
@media (max-width: 640px) {
  .join-card { scroll-margin-top: 90px; }
}

/* =========================================================================
   LEGAL PAGE（プライバシーポリシー）
   本文は WordPress の固定ページ。ここでは読みやすさだけを整える。
   長文なので装飾は最小限、行間と余白で読ませる。
   ========================================================================= */
.legal {
  background: var(--black);
  color: var(--gray-100);
  padding: 150px 0 130px;
}
.legal-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px;
}
.legal-eyebrow {
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 18px;
}
.legal-title {
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.4;
  color: var(--white);
  margin-bottom: 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.legal-body {
  font-size: 15.5px;
  line-height: 2.05;
  color: rgba(255, 255, 255, 0.78);
}
.legal-body > * + * { margin-top: 22px; }
.legal-body h2 {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.6;
  color: var(--white);
  margin-top: 52px;
  letter-spacing: 0.01em;
}
.legal-body h3 {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  color: var(--white);
  margin-top: 38px;
}
.legal-body ul, .legal-body ol { padding-left: 1.4em; }
.legal-body li + li { margin-top: 8px; }
.legal-body a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.legal-body strong { color: var(--white); }
.legal-body table { width: 100%; border-collapse: collapse; }
.legal-body th, .legal-body td {
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 12px 14px;
  text-align: left;
  font-size: 14px;
}

.legal-back {
  display: inline-block;
  margin-top: 64px;
  padding: 13px 24px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--white);
  font-size: 14px;
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.legal-back:hover { border-color: var(--green); background: rgba(11, 216, 182, 0.12); }

@media (max-width: 640px) {
  .legal { padding: 100px 0 90px; }
  .legal-inner { padding: 0 22px; }
  .legal-title { margin-bottom: 34px; padding-bottom: 20px; }
}

/* フッターのプライバシーポリシーリンク */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.footer-legal {
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  padding-bottom: 2px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.footer-legal:hover { color: var(--white); border-color: var(--green); }

/* =========================================================================
   REVEAL ON SCROLL
   ビューポートに入った要素を、下からふわりと立ち上げる。

   @keyframes ではなく transition ＋ .is-in で組む。keyframes の `both` は
   インラインスタイルすら上書きしてしまい、万一アニメーションが走らない環境で
   要素が消えたままになる（＝直す手立てがない）。transition なら、クラスが
   付かなければ単に元の見た目のままになる。

   隠すのは html.js-reveal が付いているときだけ。JS が動かなければ何も隠れない。

   クラス名は .reveal-item。ベーステーマ由来の .reveal（scroll-driven 版・
   ティザーのテンプレートでは未使用）と衝突させないため。同名にすると
   向こうの `animation: ... both` がこちらの transition を上書きして壊れる。
   ========================================================================= */
.js-reveal .reveal-item {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
}
.js-reveal .reveal-item.is-in {
  opacity: 1;
  transform: none;
}

/* 写真は少し深く、ゆっくり。テキストと同じ速さだと軽く見える。 */
.js-reveal .philosophy-hero-portrait.reveal-item,
.js-reveal .story-card.reveal-item {
  transform: translate3d(0, 40px, 0);
  transition-duration: 1.1s;
}
.js-reveal .philosophy-hero-portrait.reveal-item.is-in,
.js-reveal .story-card.reveal-item.is-in {
  transform: none;
}

/* 保険。JS のゲートをすり抜けても、動きを望まない人には動かさない。 */
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================================
   VERTICAL RHYTHM (must stay last so it wins over the section blocks above)
   More air between and inside sections. The HERO is deliberately untouched.
   ========================================================================= */
.philosophy-hero { padding: 140px 0 150px; }
.concept         { padding: 40px 0 150px; }
.join-section    { padding: 150px 0; }
.partner         { padding: 200px 0; }
.contact-section { padding: 150px 0; }
.footer          { padding: 120px 0 56px; }

/* inside the sections */
.philosophy-hero-inner { gap: 80px; }
.concept-eyebrow       { margin-bottom: 26px; }
.concept h2            { margin-bottom: 36px; }
.concept-lead          { margin-bottom: 80px; }
.story-album           { gap: 28px; }
.story-card-label      { margin-top: 18px; }
.join-header           { margin-bottom: 88px; }
.join-sub              { margin-top: 30px; }
.join-status           { margin-top: 28px; }
.join-grid             { gap: 24px; }
.partner-lead          { margin-bottom: 44px; }
.contact-header        { margin-bottom: 72px; }
.contact-header h2     { margin: 26px 0 30px; }
.footer-grid           { margin-bottom: 80px; }
.footer-bottom         { padding-top: 40px; }

@media (max-width: 640px) {
  .philosophy-hero { padding: 90px 0 96px; }
  .concept         { padding: 28px 0 96px; }
  .join-section    { padding: 100px 0; }
  .partner         { padding: 130px 0; }
  .contact-section { padding: 100px 0; }
  .footer          { padding: 84px 0 40px; }
  .concept-lead    { margin-bottom: 56px; }
  .join-header     { margin-bottom: 60px; }
  .contact-header  { margin-bottom: 48px; }
  .philosophy-hero-inner { gap: 56px; }
}