/* English shared UI: typography, responsive layout, cards, interactions and form fields. */
@font-face {
  font-family: 'FinalFrontier';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/shared/fonts/FinalFrontier.woff2) format('woff2');
}
:root {
  /* VI 2026: flat brand colors; alpha variants are for borders and scrims. */
  --ff-pulse: #1b39a6;
  --ff-deep: #102766;
  --ff-gravity: #0e1022;
  --ff-nebula: #edf9ff;
  --ff-white: #ffffff;
  --ff-border-light: rgba(16, 39, 102, 0.18);
  --ff-border-dark: rgba(255, 255, 255, 0.24);
  --ff-focus: var(--ff-pulse);
  --ff-body:
    'FinalFrontier', system-ui, -apple-system, 'Segoe UI', 'PingFang SC',
    'Microsoft YaHei', sans-serif;
  --ff-head:
    'FinalFrontier', system-ui, -apple-system, 'Segoe UI', 'PingFang SC',
    'Microsoft YaHei', sans-serif;
  /* The approved composite font also supplies the site's data glyphs. */
  --ff-mono: var(--ff-body);
}
/* Inquiry privacy notice: local scope preserves the existing form layouts. */
.ff .ff-privacy-consent {
  color: var(--ff-white);
  --ff-focus: var(--ff-white);
  font: 400 14px/1.65 var(--ff-body);
}
.ff form[data-form-type^='contact_'] .ff-privacy-consent {
  color: var(--ff-deep);
  --ff-focus: var(--ff-pulse);
}
.ff .ff-privacy-consent p {
  margin: 0 0 10px;
  font: inherit;
  color: inherit;
}
.ff .ff-privacy-label {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 8px 12px;
  padding: 8px 0;
  min-height: 44px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.ff .ff-privacy-label > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ff .ff-privacy-consent input[type='checkbox'] {
  appearance: auto;
  display: block;
  width: 20px;
  min-width: 20px;
  height: 20px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--ff-pulse);
  cursor: pointer;
}
.ff .ff-privacy-consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  font: inherit;
}
.ff form[data-form-type^='contact_'] .ff-privacy-consent a {
  color: var(--ff-pulse);
}
.ff .ff-privacy-label .field-error {
  grid-column: 2;
}
/* ---------- global ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.ff [id] {
  scroll-margin-top: 88px;
}
.field input,
.field textarea,
.field select {
  font-size: 16px !important;
}
.ff img {
  max-width: 100%;
}
/* A white focus ring remains visible against dark brand surfaces. */
.ff header,
.ff footer,
.ff .hero,
.ff .hw,
.ff-submission-dialog {
  --ff-focus: var(--ff-white);
}
/* Scope the VI headline treatment to page titles, not authored article headings. */
.ff h1.hero-h {
  font-size: 52px !important;
  font-weight: 400;
  line-height: 1.2 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* ---------- news cards ---------- */
.news-card h2,
.news-card h3,
.news-card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card h2,
.news-card h3 {
  -webkit-line-clamp: 3;
}
.news-card p {
  -webkit-line-clamp: 6;
}

/* ---------- hero ---------- */
@media (max-width: 1023px) {
  .hero {
    height: auto !important;
    min-height: 520px;
  }
  .hero > .wrap,
  .hero-slide > .wrap {
    height: auto !important;
    padding-top: 96px !important;
    padding-bottom: 80px !important;
  }
  .hero.hero-car {
    height: 640px !important;
  }
  .hero-car > .wrap,
  .hero-car .hero-slide > .wrap {
    padding-bottom: 150px !important;
  }
}
@media (max-width: 640px) {
  .hero {
    min-height: 560px;
  }
  .hero > .hero-overlay,
  .hero-slide > .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(14, 16, 34, 0.5) 0%,
      rgba(14, 16, 34, 0.82) 45%,
      rgba(14, 16, 34, 0.95) 100%
    ) !important;
  }
  .hero p {
    font-size: 16px !important;
  }
  .hero .btn,
  .hero .btn-ghost {
    flex: 1 1 100%;
    justify-content: center;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
  .car-tabs {
    display: none !important;
  }
  .car-dots {
    display: flex !important;
  }
}
@media (orientation: landscape) and (max-height: 520px) {
  .hero {
    min-height: 0;
    height: auto !important;
  }
  .hero > .wrap,
  .hero-slide > .wrap {
    padding-top: 72px !important;
    padding-bottom: 110px !important;
  }
}

/* ---------- type & spacing scale ---------- */
@media (min-width: 641px) and (max-width: 1023px) {
  .ff h1.hero-h {
    font-size: 44px !important;
  }
  .ff h2 {
    font-size: clamp(34px, 4.6vw, 40px) !important;
  }
  .ff section:not(.hero) {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .g3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .ff h1.hero-h {
    font-size: clamp(24px, 6.667vw, 30px) !important;
  }
  .ff h2 {
    font-size: clamp(27px, 7.4vw, 32px) !important;
    line-height: 1.15 !important;
  }
  .ff section:not(.hero) {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  .ff form {
    padding: 22px !important;
  }
  .ff form .btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- interaction states (one spec for every page) ----------
   primary button  : background var(--ff-pulse) -> var(--ff-deep)
   ghost (dark)    : border 30% white -> white, faint fill
   outline (light) : border/text -> var(--ff-pulse)
   text link (.more): var(--ff-pulse) -> var(--ff-deep), arrow nudges right
   clickable card  : border -> var(--ff-pulse) + soft shadow; image zooms 4%
   static card     : no hover change (not clickable)                     */
.ff a,
.ff button,
.btn,
.btn-ghost,
.btn-line,
.more,
.navlink,
.card,
.ia-card,
.step,
.radio,
.tab,
.cat,
.pill {
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.25s ease;
}
.btn:hover {
  background: var(--ff-deep) !important;
  color: var(--ff-white) !important;
}
.btn-ghost:hover {
  border-color: var(--ff-white) !important;
  color: var(--ff-white) !important;
  background: rgba(255, 255, 255, 0.08);
}
.btn-line:hover {
  border-color: var(--ff-pulse) !important;
  color: var(--ff-pulse) !important;
}
.more:hover {
  color: var(--ff-deep);
}
.more {
  transition:
    gap 0.2s ease,
    color 0.2s ease;
}
a.more:hover,
a:hover .more {
  gap: 12px;
}
a.card:hover,
.ia-card:hover,
.step:hover {
  border-color: var(--ff-pulse) !important;
  box-shadow: 0 14px 36px rgba(14, 16, 34, 0.1);
}
.ia-card[data-expanded='true']:hover {
  border-color: var(--ff-pulse) !important;
}
div.card:hover {
  box-shadow: none;
}
.ff section a[href] img {
  transition: transform 0.5s ease;
}
.ff section a[href]:hover img {
  transform: scale(1.04);
}
.ff a:focus-visible,
.ff button:focus-visible,
.ff summary:focus-visible,
.ff input:focus-visible,
.ff select:focus-visible,
.ff textarea:focus-visible {
  outline: 2px solid var(--ff-focus);
  outline-offset: 2px;
}

/* ---------- form fields use the same approved font as surrounding text ---------- */
:root {
  --ff-field: var(--ff-body);
}
.ff input:not([type='radio']):not([type='checkbox']):not([type='file']),
.ff textarea,
.ff select,
.ff input::placeholder,
.ff textarea::placeholder {
  font-family: var(--ff-field) !important;
}