:root {
    --ground: #090c0a;
    --ink: #f5f6ef;
    --muted: #b6bcaf;
    --line: #6ea084;
    --accent: #e2a75a;
    --accent-strong: #f0bd7d;
    --border: rgba(245, 246, 239, 0.14);
    --border-strong: rgba(245, 246, 239, 0.26);
    --glass: rgba(11, 15, 12, 0.58);
    --shadow: rgba(0, 0, 0, 0.5);

    --font-display: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
      'Apple SD Gothic Neo', 'Malgun Gothic', 'Segoe UI', sans-serif;
    --font-body: 'Nanum Gothic', 'Apple SD Gothic Neo', '맑은 고딕',
      'Malgun Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  }

  /* Deliberately a single dark, cinematic theme — the subject is night-match
     photography, so it doesn't invert for light mode. */

  * { box-sizing: border-box; }
  html { background: var(--ground); overflow-x: hidden; }
  body {
    margin: 0;
    overflow-x: hidden;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; }
  p { margin: 0; }
  ul, ol { margin: 0; padding: 0; }
  a { color: inherit; }
  ::selection { background: var(--accent); color: #171a16; }

  a:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
  }

  .wrap {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 clamp(1.75rem, 7vw, 2.5rem);
  }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-strong);
  }

  /* ---------- Nav ---------- */
  .nav {
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(10px);
    background: rgba(9, 12, 10, 0.72);
    border-bottom: 1px solid var(--border);
  }
  .nav .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    gap: 0.9rem;
  }
  .nav .brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-size: 1.02rem;
    white-space: nowrap;
    text-decoration: none;
    color: var(--ink);
  }
  .nav .brand span { color: var(--accent-strong); }
  .brand-logo { height: 28px; width: auto; display: block; }

  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--accent);
    z-index: 50;
    transition: width 0.1s linear;
  }
  .nav .links {
    display: flex;
    gap: clamp(0.65rem, 2vw, 1.4rem);
    list-style: none;
    font-size: 0.86rem;
    overflow-x: auto;
    flex: 1;
    min-width: 0;
  }
  .nav .links a {
    text-decoration: none;
    color: var(--muted);
    white-space: nowrap;
    padding: 0.3rem 0.1rem;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .nav .links a:hover { color: var(--ink); border-color: var(--accent); }

  .nav-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
  }
  .lang-switch { display: flex; gap: 0.3rem; }
  .lang-btn {
    background: none;
    border: 1px solid var(--border-strong);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    padding: 0.32rem 0.55rem;
    border-radius: 999px;
    cursor: pointer;
  }
  .lang-btn.active { color: var(--ink); border-color: var(--accent); background: var(--glass); }
  .lang-btn:hover { color: var(--ink); }

  .nav-cta {
    background: var(--accent);
    color: #171a16;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
  }
  .nav-cta:hover { background: var(--accent-strong); }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    min-height: min(92vh, 760px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 0;
  }
  .hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #0c130f;
  }
  .hero-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(6, 9, 7, 0.28) 0%,
      rgba(6, 9, 7, 0.32) 55%,
      rgba(6, 9, 7, 0.55) 78%,
      rgba(6, 9, 7, 0.92) 100%);
  }
  .hero-content {
    position: relative;
    z-index: 1;
    padding-top: clamp(3rem, 10vw, 7rem);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
  }
  .hero-content h1 {
    font-size: clamp(2.1rem, 5.2vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.18;
    margin-top: 0.9rem;
  }
  .hero-content .lede {
    margin-top: 1.1rem;
    max-width: 46ch;
    color: var(--muted);
    font-size: 1.05rem;
  }
  /* ---------- Hero route preview: pyramid (AUS) + list (EUR) ---------- */
  .route-carousel-wrap { margin-top: 2.75rem; }
  .route-carousel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
  }
  .route-slide {
    position: relative;
    overflow: hidden;
    background: rgba(11, 15, 12, 0.4);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    padding: 1.15rem 1.25rem 1.3rem;
    box-shadow: 0 10px 24px -18px var(--shadow);
  }
  .route-slide-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
  .route-slide-head .route-code {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    color: var(--accent-strong);
  }
  .route-slide-head h3 { font-size: 1.15rem; width: 100%; margin-top: 0.3rem; }
  .route-slide-divider {
    position: relative;
    margin: 0.85rem -1.25rem;
    border-top: 1px dashed var(--border-strong);
  }
  .route-slide-divider::before,
  .route-slide-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ground);
    border: 1px solid var(--border-strong);
  }
  .route-slide-divider::before { left: -10px; }
  .route-slide-divider::after { right: -10px; }

  .pyramid { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 0.2rem; }
  .pyramid-tier {
    width: var(--w);
    background: rgba(245, 246, 239, 0.06);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    padding: 0.38rem 0.5rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--muted);
  }
  .pyramid-tier.tier-quota { border-color: var(--accent-strong); color: var(--ink); }
  .pyramid-tier.tier-target {
    background: rgba(226, 167, 90, 0.18);
    border-color: var(--accent);
    color: var(--ink);
    font-weight: 700;
  }
  .pyramid-caption { margin-top: 0.9rem; font-size: 0.74rem; color: var(--muted); }

  .route-list { list-style: none; margin-top: 0.2rem; display: flex; flex-direction: column; gap: 0.65rem; }
  .route-list li { position: relative; padding-left: 1.1rem; font-size: 0.92rem; color: var(--muted); }
  .route-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line);
  }

  .route-dots { display: none; justify-content: center; gap: 0.5rem; margin-top: 1.1rem; }
  .route-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--border-strong);
    padding: 0;
    cursor: pointer;
  }
  .route-dot.active { background: var(--accent); width: 20px; border-radius: 4px; transition: width 0.2s ease, background 0.2s ease; }

  @media (max-width: 720px) {
    .route-carousel {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 0.8rem;
      padding: 0 4%;
      scroll-padding: 0 4%;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .route-carousel::-webkit-scrollbar { display: none; }
    .route-slide { flex: 0 0 92%; scroll-snap-align: center; }
    .route-dots { display: flex; }
  }

  /* ---------- Section shell ---------- */
  section.block {
    position: relative;
    padding: clamp(3.5rem, 8vw, 5.5rem) 0;
    opacity: 1;
    overflow: hidden;
  }
  section.block.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  section.block.reveal.in-view {
    opacity: 1;
    transform: none;
  }
  @media (prefers-reduced-motion: reduce) {
    section.block.reveal { opacity: 1; transform: none; transition: none; }
  }

  /* Full-bleed photo backdrop used by story / route / league sections */
  .photo-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      linear-gradient(180deg, var(--ground) 0%, transparent 14%, transparent 86%, var(--ground) 100%),
      linear-gradient(rgba(6, 9, 7, 0.62), rgba(6, 9, 7, 0.62)),
      var(--photo) center/cover no-repeat;
  }
  .photo-content { position: relative; z-index: 1; }

  .block-head {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
  }
  .block-head h2 {
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    font-weight: 800;
  }

  /* ---------- Company intro ---------- */
  .intro-lede {
    font-size: 1.05rem;
    font-weight: 700;
    max-width: 62ch;
    margin-bottom: 1.25rem;
  }
  #intro p {
    max-width: 62ch;
    color: var(--muted);
    margin-bottom: 1.1rem;
  }
  .intro-sub {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink);
    margin: 2rem 0 0.9rem;
  }
  /* ---------- Card grid (intro identity/pathway/trust, services values) ---------- */
  .card-grid {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 2.25rem);
  }
  .card-grid.card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 720px) {
    .card-grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .card-grid.card-grid-2 { grid-template-columns: 1fr; }
  }
  .card-grid li {
    padding-top: 1.1rem;
    border-top: 2px solid var(--line);
  }
  .card-grid b {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  .card-grid .value-quote {
    display: block;
    color: var(--accent-strong);
    font-size: 0.88rem;
    font-style: italic;
    margin-bottom: 0.5rem;
  }
  .card-grid > li > span:not(.value-quote) {
    display: block;
    color: var(--muted);
    font-size: 0.9rem;
  }

  /* Identity: numbered role card */
  .grid-identity { counter-reset: card-num; }
  .grid-identity li {
    counter-increment: card-num;
    padding: 1.5rem 1.3rem 1.3rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--glass);
  }
  .grid-identity li::before {
    content: counter(card-num, decimal-leading-zero);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--line);
    color: var(--ground);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
  }

  /* Pathway: route-ticket card with gold spine */
  .grid-pathway li {
    padding: 1.3rem 1.3rem 1.3rem 1.4rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 4px 14px 14px 4px;
    background: var(--glass);
  }
  .grid-pathway b {
    color: var(--accent-strong);
  }

  /* Trust: legal notice box */
  .grid-trust li {
    padding: 1.5rem;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: var(--glass);
  }

  /* ---------- Founder note ---------- */
  .note {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
  }
  @media (max-width: 640px) {
    .note { grid-template-columns: 1fr; }
    .founder-photo { width: 160px; }
  }
  .founder-photo {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--border-strong);
    box-shadow: 0 20px 40px -24px var(--shadow);
  }
  .note blockquote {
    margin: 0;
    padding: 1.1rem 1.3rem;
    background: none;
    border: none;
    border-left: 2px solid var(--border-strong);
    border-radius: 0;
    font-size: 0.88rem;
    font-style: italic;
    line-height: 1.65;
    max-width: 62ch;
    color: var(--muted);
  }
  .note blockquote p { margin: 0; }
  .note blockquote p + p { margin-top: 0.9rem; }
  .story-more { margin-top: 0.9rem; }
  .story-more p + p { margin-top: 0.9rem; }
  .story-toggle {
    margin-top: 1.1rem;
    background: none;
    border: none;
    color: var(--accent-strong);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    padding: 0;
  }
  .story-toggle:hover { color: var(--ink); }

  /* ---------- Route map ---------- */
  .route-map { display: flex; flex-direction: column; align-items: center; }
  .route-node {
    text-align: center;
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 0.6rem 1.4rem;
  }
  .route-node .name { font-weight: 800; font-size: 1rem; }
  .route-node .sub { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }
  .stem { width: 2px; height: 26px; background: var(--line); }

  .route-branches {
    position: relative;
    width: 100%;
    max-width: 720px;
    display: flex;
    gap: 1.5rem;
    padding-top: 26px;
    margin-top: 0;
  }
  .route-branches::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18%;
    right: 18%;
    height: 2px;
    background: var(--line);
  }
  .branch {
    flex: 1;
    position: relative;
    padding: 26px 1.1rem 1.1rem;
    min-width: 0;
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 14px;
  }
  .branch::before {
    content: "";
    position: absolute;
    top: -26px;
    left: 50%;
    width: 2px;
    height: 26px;
    background: var(--line);
    transform: translateX(-50%);
  }
  @media (max-width: 640px) {
    .route-branches {
      max-width: 100%;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 0.9rem;
      padding-top: 0;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .route-branches::-webkit-scrollbar { display: none; }
    .route-branches::before { display: none; }
    .branch { flex: 0 0 82%; scroll-snap-align: center; padding-top: 1.1rem; margin-top: 0; }
    .branch::before { display: none; }
    .branch-dots { display: flex; margin-top: 1rem; }
  }

  .branch-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
  .branch .code {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--accent-strong);
    letter-spacing: 0.04em;
  }
  .branch h3 { font-size: 1.15rem; width: 100%; margin-top: 0.2rem; }

  .stations {
    list-style: none;
    margin-top: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }
  .stations li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.92rem;
    color: var(--muted);
  }
  .stations li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line);
  }
  .stations li.final { color: var(--ink); font-weight: 600; }

  /* ---------- Target leagues ---------- */
  .league-table { margin-top: 3rem; text-align: center; }
  .flag-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.6rem 1.9rem;
  }
  .flag-item { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; width: 100px; }
  .flag-item .flag {
    font-size: 3.6rem;
    line-height: 1;
    margin-bottom: 0.25rem;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
  }
  .flag-item .flag-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
    text-align: center;
  }
  .flag-item .flag-tier {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--muted);
    text-align: center;
  }
  @media (max-width: 640px) {
    .flag-row { gap: 1rem 0.6rem; }
    .flag-item { width: 68px; gap: 0.15rem; }
    .flag-item .flag { font-size: 2.1rem; margin-bottom: 0.1rem; }
    .flag-item .flag-name { font-size: 0.78rem; }
    .flag-item .flag-tier { font-size: 0.6rem; }
  }

  /* ---------- Field gallery (edge-to-edge, no gutters) ---------- */
  .field-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  @media (max-width: 720px) { .field-strip { grid-template-columns: 1fr; } }
  .field-strip figure {
    margin: 0;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #12180f;
  }
  .field-strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
  }
  .field-strip figure:hover img { transform: scale(1.045); }
  .field-strip figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 0.85rem 1rem;
    font-size: 0.8rem;
    color: #f2f3ea;
    background: linear-gradient(0deg, rgba(6, 9, 7, 0.85), rgba(6, 9, 7, 0));
  }
  @media (prefers-reduced-motion: reduce) {
    .field-strip img { transition: none; }
  }

  /* ---------- League system ---------- */
  .league-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  @media (max-width: 720px) { .league-grid { grid-template-columns: 1fr; } }

  .quota-panel, .ladder-panel {
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.4rem;
  }
  .quota-panel h3, .ladder-panel h3 { font-size: 1rem; margin-bottom: 0.3rem; }
  .ladder-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
  .ladder-scope {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--accent-strong);
    font-style: italic;
  }
  .quota-panel .scope {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--muted);
  }
  .quota-tier { margin-top: 1.1rem; }
  .quota-tier-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--muted);
    margin-bottom: 0.45rem;
  }
  .quota-slots { display: flex; gap: 0.5rem; }
  .slot {
    flex: 1;
    height: 46px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    color: #171a16;
    background: var(--line);
  }
  .slot.asia { background: var(--accent); }
  .quota-legend {
    display: flex;
    gap: 1.25rem;
    margin-top: 0.8rem;
    font-size: 0.78rem;
    color: var(--muted);
  }
  .quota-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 0.35rem; background: var(--line); vertical-align: middle; }
  .quota-legend .dot.asia { background: var(--accent); }

  .ladder-dir {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--accent-strong);
    margin-top: 0.2rem;
    display: block;
  }
  .ladder { list-style: none; position: relative; margin-top: 1.2rem; padding-left: 1.6rem; }
  .ladder::before {
    content: "";
    position: absolute;
    left: 0.4rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--line);
  }
  .ladder li {
    position: relative;
    padding: 0.4rem 0;
    font-size: 0.9rem;
    color: var(--muted);
    font-family: var(--font-mono);
  }
  .ladder li::before {
    content: "";
    position: absolute;
    left: -1.6rem;
    top: 0.65rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--line);
    border: 2px solid rgba(11, 15, 12, 0.9);
  }
  .ladder li.target { color: var(--ink); font-weight: 700; }
  .ladder li.target::before { background: var(--accent); }
  .ladder li.top { color: var(--ink); font-weight: 700; }
  .ladder-note { margin-top: 1rem; font-size: 0.8rem; color: var(--muted); }
  .ladder-note b { color: var(--ink); }

  /* ---------- Process ---------- */
  .steps {
    list-style: none;
    display: grid;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
  }
  .steps li {
    background: #10150e;
    padding: 1.1rem 1.3rem;
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
  }
  .steps .num {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--accent-strong);
    font-variant-numeric: tabular-nums;
  }
  .steps h3, .steps h4 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; margin: 0 0 0.25rem; }
  .steps p { color: var(--muted); font-size: 0.9rem; max-width: 60ch; }

  /* ---------- Team ---------- */
  .team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
  @media (max-width: 640px) { .team-grid { grid-template-columns: 1fr; } }
  .id-card {
    background: #10150e;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
  }
  .id-card .id-photo {
    aspect-ratio: 4 / 3;
    background: var(--photo) center/cover no-repeat;
  }
  .id-card .id-body { padding: 1.2rem 1.3rem 1.4rem; }
  .id-card .role {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-strong);
  }
  .id-card h3 { font-size: 1.2rem; margin-top: 0.35rem; }
  .id-card .history {
    margin-top: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--muted);
    line-height: 1.7;
  }
  .id-card .desc { margin-top: 0.8rem; font-size: 0.9rem; color: var(--ink); }

  /* ---------- Apply form ---------- */
  .apply-lede {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    color: var(--muted);
    max-width: 56ch;
  }
  .apply-form { display: flex; flex-direction: column; gap: 1.3rem; }
  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
  }
  @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
  .field { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); }
  .field input, .field select, .field textarea {
    background: var(--glass);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 0.65rem 0.8rem;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.92rem;
  }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
  }
  .field textarea { resize: vertical; min-height: 90px; }
  .apply-submit {
    align-self: flex-start;
    background: var(--accent);
    color: #171a16;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 0.75rem 1.7rem;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .apply-submit:hover { background: var(--accent-strong); }
  .apply-submit:disabled { opacity: 0.55; cursor: default; }
  .apply-status { font-size: 0.85rem; min-height: 1.2em; margin: 0; }
  .apply-status.ok { color: var(--line); }
  .apply-status.err { color: #e2755a; }

  .contact-direct {
    margin-top: 2.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border);
  }
  .contact-direct .eyebrow { display: block; margin-bottom: 0.9rem; }
  .contact-row { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; }
  .contact-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    color: var(--muted);
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .contact-chip:hover { border-color: var(--accent); color: var(--ink); }
  .contact-chip b { color: var(--ink); font-weight: 600; }

  footer {
    padding: 2.5rem 0 3rem;
    color: var(--muted);
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
  }
  .footer-disclaimer {
    max-width: 640px;
    margin: 0 0 0.4rem;
    font-size: 0.68rem;
    line-height: 1.6;
    color: var(--muted);
    opacity: 0.65;
    text-align: center;
  }
  .footer-main { display: flex; align-items: center; justify-content: center; gap: 0.6rem; }
  .footer-logo { height: 22px; width: auto; display: block; }
  .footer-credit {
    color: var(--muted);
    font-size: 0.72rem;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    opacity: 0.75;
  }
  .footer-credit:hover { color: var(--ink); opacity: 1; }

  /* Mobile hero overrides — kept last so they always win over any
     earlier same-specificity base rule, regardless of source order. */
  @media (max-width: 640px) {
    .hero { min-height: 76vh; }
    .hero-content { padding-top: 1.75rem; padding-bottom: 1.25rem; }
    .hero-content h1 { font-size: 1.55rem; line-height: 1.22; margin-top: 0.55rem; }
    .note blockquote { font-size: 0.8rem; padding: 0.9rem 1.1rem; }
    .hero-content .lede { font-size: 0.76rem; line-height: 1.5; margin-top: 0.6rem; }
    .route-carousel-wrap { margin-top: 4.5rem; }
    .route-slide { padding: 0.55rem 0.85rem 0.65rem; }
    .route-slide-head .route-code { font-size: 0.8rem; }
    .route-slide-head h3 { font-size: 0.95rem; margin-top: 0.15rem; }
    .route-slide-divider { margin: 0.4rem -0.85rem; }
    .pyramid { gap: 2px; margin-top: 0.1rem; }
    .pyramid-tier { font-size: 0.52rem; padding: 0.15rem 0.35rem; }
    .pyramid-caption { font-size: 0.6rem; margin-top: 0.4rem; }
    .route-list { margin-top: 0.1rem; gap: 0.35rem; }
    .route-list li { font-size: 0.78rem; }
  }

/* ---------- Hamburger + mobile menu ---------- */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed;
  inset: 60px 0 0 0;
  background: rgba(9, 12, 10, 0.98);
  backdrop-filter: blur(10px);
  z-index: 41;
  overflow-y: auto;
}
.mobile-menu.open { display: block; }
.mobile-menu ul {
  list-style: none;
  padding: 0.5rem clamp(1.75rem, 7vw, 2.5rem) 2rem;
  display: flex;
  flex-direction: column;
}
.mobile-menu li { border-bottom: 1px solid var(--border); }
.mobile-menu li.menu-section-label { border-bottom: none; }
.mobile-menu li.menu-section-label:first-child { padding-top: 0.3rem; }
.mobile-menu a {
  display: block;
  padding: 1.05rem 0;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}
.mobile-menu .menu-section-label {
  padding: 1.1rem 0 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.mobile-lang-switch {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.1rem clamp(1.75rem, 7vw, 2.5rem) 0.3rem;
}

@media (max-width: 780px) {
  .nav .links { display: none; }
  .hamburger { display: flex; }
  .nav-right .lang-switch { display: none; }

  .mobile-tab-section { display: none; }
  .mobile-tab-section.active { display: block; }
}

/* ---------- Sub-page header (no video) ---------- */
.page-header {
  padding: clamp(2.75rem, 9vw, 5rem) 0 clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--border);
}
.page-header h1 {
  font-size: clamp(1.9rem, 4.6vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: 0.7rem;
}
.page-header .lede {
  margin-top: 0.9rem;
  max-width: 56ch;
  color: var(--muted);
  font-size: 1rem;
}

/* ---------- Founder page ---------- */
.founder-page .note { grid-template-columns: 260px minmax(0, 1fr); }
@media (max-width: 640px) { .founder-page .note { grid-template-columns: 1fr; } }
.founder-page .note blockquote {
  font-style: normal;
  font-size: 0.98rem;
  color: var(--ink);
  border-left: 3px solid var(--line);
  padding: 0.2rem 0 0.2rem 1.4rem;
}
.founder-page .note blockquote p + p { margin-top: 1.1rem; }

/* ---------- Empty state (players page) ---------- */
.empty-state {
  text-align: center;
  padding: clamp(3rem, 8vw, 5rem) 1rem;
  color: var(--muted);
}
.empty-state .icon { font-size: 2.75rem; }
.empty-state h3 { margin-top: 1rem; font-size: 1.2rem; color: var(--ink); }
.empty-state p { margin-top: 0.6rem; max-width: 42ch; margin-left: auto; margin-right: auto; }

.story-more-link {
  display: inline-block;
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--accent-strong);
  text-decoration: none;
}
.story-more-link:hover { color: var(--ink); }
.note-content { min-width: 0; }

/* ---------- v2: hero CTAs + route preview moved out of the hero ---------- */
.hero-content { width: 100%; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn-primary { background: var(--accent); color: #171a16; }
.btn-primary:hover { background: var(--accent-strong); }
.btn-ghost {
  color: var(--ink);
  border: 1px solid var(--border-strong);
  background: rgba(9, 12, 10, 0.45);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { border-color: var(--accent); }
.btn-primary:active,
.btn-ghost:active { transform: scale(0.98); }


@media (max-width: 640px) {
  .hero-actions { margin-top: 1.25rem; gap: 0.6rem; }
  .btn-primary,
  .btn-ghost { min-height: 44px; padding: 0 1.15rem; font-size: 0.9rem; }
}

/* ---------- v2: type system ----------
   Headings in Pretendard, body text stays in Nanum Gothic, and the orange
   English mono eyebrows keep their original look (owner's preference).
   Korean has no true italic, so slanted text is removed. */
body {
  word-break: keep-all;
  overflow-wrap: break-word;
}
h1, h2, h3, h4 { letter-spacing: -0.025em; }

.hero-content h1 {
  font-size: clamp(2.5rem, 5.6vw, 4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
}
.hero-content .lede { font-size: 1.125rem; line-height: 1.65; max-width: 40ch; }

.block-head { margin-bottom: 2.25rem; }
.block-head h2 {
  font-size: clamp(1.875rem, 3.8vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
}
.intro-lede { font-size: 1.25rem; font-weight: 600; line-height: 1.55; letter-spacing: -0.02em; }
.intro-sub { font-size: 1.25rem; font-weight: 700; margin: 3rem 0 1rem; }
.card-grid b { font-size: 1.0625rem; font-weight: 600; line-height: 1.45; }
.card-grid > li > span:not(.value-quote) { font-size: 0.95rem; line-height: 1.7; }
.card-grid .value-quote { font-style: normal; font-size: 0.95rem; font-weight: 500; }
.steps h3, .steps h4 { font-size: 1.0625rem; font-weight: 600; }
.id-card h3 { font-size: 1.375rem; font-weight: 700; }
.id-card .desc { font-size: 0.95rem; }
.note blockquote { font-style: normal; font-size: 0.95rem; }

/* Korean-bearing labels: off the mono font, no forced caps or wide tracking */
.story-toggle,
.flag-item .flag-tier,
.ladder-scope,
.quota-panel .scope,
.quota-tier-label,
.slot,
.ladder-dir,
.ladder li,
.id-card .role,
.id-card .history,
.mobile-menu .menu-section-label,
.story-more-link {
  font-family: var(--font-body);
  font-style: normal;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.id-card .role { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; }
.id-card .history { font-size: 0.8125rem; }
.ladder-scope { font-size: 0.75rem; }

@media (max-width: 640px) {
  .hero-content h1 { font-size: 2rem; line-height: 1.2; }
  .hero-content .lede { font-size: 0.95rem; line-height: 1.6; }
  .block-head h2 { font-size: 1.75rem; }
  .intro-lede { font-size: 1.125rem; }
  .intro-sub { font-size: 1.125rem; margin-top: 2.5rem; }
  .note blockquote { font-size: 0.9rem; }
}

/* ---------- v2: restructured sections ---------- */

/* Why AYA: the refund promise is the lead, the other two sit beneath it */
.values-lede { max-width: 62ch; color: var(--muted); margin-bottom: 2rem; }
.values {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem clamp(1.5rem, 4vw, 2.5rem);
}
.values li { padding-top: 1.1rem; border-top: 2px solid var(--line); }
.values b, .value-feature b { display: block; font-size: 1.125rem; margin-bottom: 0.5rem; }
.values .value-quote, .value-feature .value-quote { display: block; color: var(--accent-strong); font-size: 0.95rem; margin-bottom: 0.6rem; }
.values li > span:not(.value-quote), .value-feature > span:not(.value-quote) { display: block; color: var(--muted); font-size: 0.95rem; }
.value-feature {
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0.5rem clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid rgba(226, 167, 90, 0.45);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(226, 167, 90, 0.14), rgba(226, 167, 90, 0.03));
}
.value-feature b {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3.2vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--ink);
  grid-row: span 2;
  margin: 0;
}
.value-feature .value-quote { font-size: 1.0625rem; }
.value-feature > span:not(.value-quote) { color: var(--ink); opacity: 0.82; }
.trust-note { margin-top: 3.5rem; }
.trust-note .intro-sub { margin-top: 0; }
.trust-note > p { max-width: 62ch; color: var(--muted); margin-bottom: 1.25rem; }
@media (max-width: 720px) {
  .values { grid-template-columns: 1fr; gap: 2rem; }
  .value-feature { grid-template-columns: 1fr; }
  .value-feature b { grid-row: auto; margin-bottom: 0.5rem; }
}

/* Route: the third direction (global -> global) as a plain note under the map */
.route-note { max-width: 62ch; margin: 2.25rem auto 0; text-align: center; color: var(--muted); font-size: 0.95rem; }
.route-note b { display: block; color: var(--ink); margin-bottom: 0.25rem; }

/* People: founder's note first, then the team cards */
.founder { margin-bottom: 3.5rem; }
.founder .eyebrow { display: block; }
.founder-title { font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 700; margin: 0.6rem 0 1.5rem; }
@media (max-width: 640px) {
  .founder-photo { width: 160px; }
}

/* ---------- v2: polish ---------- */

/* Browser surfaces follow the dark theme: native controls, scrollbars, caret */
html { color-scheme: dark; scrollbar-color: rgba(245, 246, 239, 0.22) var(--ground); }
input, textarea { caret-color: var(--accent); }
a { text-underline-offset: 0.18em; }

/* Sections only start hidden when JS is there to reveal them */
html:not(.js) section.block.reveal { opacity: 1; transform: none; }

/* Hero copy sits on moving video: darken the text side, not the whole frame */
.hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(6, 9, 7, 0.62) 0%, rgba(6, 9, 7, 0.38) 45%, rgba(6, 9, 7, 0) 75%);
}
.hero-content .lede { color: rgba(245, 246, 239, 0.86); }

/* Form: readable placeholders, no iOS zoom-on-focus (needs >= 16px) */
.field input::placeholder,
.field textarea::placeholder { color: #858b80; opacity: 1; }
.field input, .field select, .field textarea { font-size: 1rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(245, 246, 239, 0.4); }

/* Floor for small print (eyebrows keep their original size by choice) */
.lang-btn { font-size: 0.75rem; }
.flag-item .flag-tier,
.quota-tier-label,
.slot { font-size: 0.78rem; }
.ladder-dir { font-size: 0.75rem; }
@media (max-width: 640px) {
  .flag-item .flag-tier { font-size: 0.72rem; }
}

/* Empty players section: a short note, not a half-screen void */
.empty-state { padding: clamp(1.5rem, 4vw, 2.5rem) 1rem; }
.field input, .field select { height: 44px; }
.footer-disclaimer { font-size: 0.75rem; }

/* ---------- v2 motion ---------- */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Progress bar follows the scroll directly; a lagging tween reads as jitter. */
#scroll-progress { transition: none; }

/* Sections settle in once, quickly; less travel so the page never feels like it is waiting. */
section.block.reveal {
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

/* Dots animate both ways, not only when becoming active. */
.route-dot { transition: width 0.2s var(--ease-out), background-color 0.2s ease; }

/* Press feedback on everything pressable. */
.btn-primary, .btn-ghost, .apply-submit, .contact-chip, .nav-cta {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.16s var(--ease-out);
}
.btn-primary:active, .btn-ghost:active, .apply-submit:active:not(:disabled),
.contact-chip:active, .nav-cta:active { transform: scale(0.97); }

.hamburger span { transition: transform 0.2s var(--ease-out), opacity 0.15s ease; }

/* Mobile menu fades in instead of popping. */
.mobile-menu.open {
  opacity: 1;
  transition: opacity 0.2s var(--ease-out);
}
@starting-style {
  .mobile-menu.open { opacity: 0; }
}

/* Photo zoom only where a real hover exists; taps on phones should not leave images stuck zoomed. */
.field-strip img { transition: transform 0.4s var(--ease-out); }
.field-strip figure:hover img { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .field-strip figure:hover img { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  section.block.reveal { transform: none; transition: opacity 0.3s ease; }
  .btn-primary:active, .btn-ghost:active, .apply-submit:active,
  .contact-chip:active, .nav-cta:active { transform: none; }
  .field-strip figure:hover img { transform: none; }
  .route-dot, .hamburger span, .mobile-menu.open { transition: none; }
}

/* ---------- v2 de-box, proof strip, photo legibility ---------- */

/* Proof strip: the three facts that back the hero claim. */
.proof {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: clamp(1.5rem, 5vw, 3.5rem);
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(245, 246, 239, 0.22);
}
.proof div { display: flex; flex-direction: column; gap: 0.25rem; }
.proof dt {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  font-weight: 700;
  line-height: 1;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}
.proof dd { margin: 0; font-size: 0.875rem; color: rgba(245, 246, 239, 0.82); }
@media (max-width: 640px) {
  .proof { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .proof dd { font-size: 0.8125rem; line-height: 1.4; }
}

/* Core expertise: open columns, a rule and a number instead of a box. */
.grid-identity li {
  padding: 1.25rem 0 0;
  border: none;
  border-top: 1px solid var(--border-strong);
  border-radius: 0;
  background: none;
}
.grid-identity li::before {
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--accent-strong);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

/* Pathways: a route table, one row per direction. */
.card-grid.grid-pathway { grid-template-columns: 1fr; gap: 0; border-bottom: 1px solid var(--border); }
.grid-pathway li {
  display: grid;
  grid-template-columns: 11rem 15rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.25rem 0;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: none;
}
.grid-pathway .route-code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--accent-strong);
  white-space: nowrap;
}
.grid-pathway b { color: var(--ink); margin: 0; }
.grid-pathway li > span:last-child { color: var(--muted); }
@media (max-width: 860px) {
  .grid-pathway li { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* Legal notice: plain columns under a rule. */
.grid-trust li {
  padding: 1.25rem 0 0;
  border: none;
  border-top: 1px solid var(--border-strong);
  border-radius: 0;
  background: none;
}

/* Process: a ruled list, not a boxed table. */
.steps { background: none; border: none; border-radius: 0; gap: 0; border-bottom: 1px solid var(--border); }
.steps li { background: none; padding: 1.25rem 0; border-top: 1px solid var(--border); }

/* Route photo: lighter than the default and kept sharp so the players stay visible;
   darkest on the left where the copy sits. */
#route .photo-bg {
  background:
    linear-gradient(180deg, var(--ground) 0%, transparent 14%, transparent 86%, var(--ground) 100%),
    linear-gradient(90deg, rgba(6, 9, 7, 0.72) 0%, rgba(6, 9, 7, 0.5) 50%, rgba(6, 9, 7, 0.38) 100%),
    var(--photo) center/cover no-repeat;
}
.route-copy { color: rgba(245, 246, 239, 0.86); }
.quota-panel, .ladder-panel { background: rgba(10, 14, 11, 0.82); }

/* ---------- Promotion pyramid (Australian league) ---------- */
.ladder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-left: 0;
}
.ladder::before, .ladder li::before { display: none; }
.ladder li {
  width: var(--w, 100%);
  padding: 0.42rem 0.5rem;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--muted);
  background: rgba(245, 246, 239, 0.06);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
}
.ladder li:nth-child(1)  { --w: 58%; }
.ladder li:nth-child(2)  { --w: 62%; }
.ladder li:nth-child(3)  { --w: 67%; }
.ladder li:nth-child(4)  { --w: 71%; }
.ladder li:nth-child(5)  { --w: 76%; }
.ladder li:nth-child(6)  { --w: 80%; }
.ladder li:nth-child(7)  { --w: 85%; }
.ladder li:nth-child(8)  { --w: 89%; }
.ladder li:nth-child(9)  { --w: 94%; }
.ladder li:nth-child(10) { --w: 100%; }
.ladder li.top { color: var(--ink); border-color: var(--accent-strong); }
.ladder li.target {
  color: var(--ink);
  background: rgba(226, 167, 90, 0.18);
  border-color: var(--accent);
}
@media (max-width: 640px) {
  .ladder li { font-size: 0.75rem; padding: 0.38rem 0.4rem; }
  .ladder li:nth-child(1) { --w: 72%; }
  .ladder li:nth-child(2) { --w: 76%; }
  .ladder li:nth-child(3) { --w: 79%; }
  .ladder li:nth-child(4) { --w: 82%; }
  .ladder li:nth-child(5) { --w: 85%; }
  .ladder li:nth-child(6) { --w: 88%; }
  .ladder li:nth-child(7) { --w: 91%; }
  .ladder li:nth-child(8) { --w: 94%; }
  .ladder li:nth-child(9) { --w: 97%; }
}

/* ---------- Mobile hero: copy on top, match footage in the middle, actions at the bottom ---------- */
@media (max-width: 640px) {
  .hero { min-height: calc(100svh - 60px); align-items: stretch; }
  .hero-media { bottom: auto; height: calc(100svh - 60px); }
  .hero-content { padding-top: 1.75rem; padding-bottom: 1.5rem; }
  .hero-main {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - 60px - 3.25rem);
  }
  .hero-actions { margin-top: auto; }
  .hero-media::before { display: none; }
  .hero-media::after {
    background: linear-gradient(180deg,
      rgba(6, 9, 7, 0.88) 0%,
      rgba(6, 9, 7, 0.72) 30%,
      rgba(6, 9, 7, 0.08) 46%,
      rgba(6, 9, 7, 0.08) 62%,
      rgba(6, 9, 7, 0.8) 78%,
      rgba(6, 9, 7, 0.96) 100%);
  }
}

/* ---------- Hero boarding passes (Australia / Europe) ---------- */
.tickets { display: grid; gap: 0.9rem; }
.ticket {
  --stub: 128px;
  --notch: 9px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stub);
  color: #141814;
  text-decoration: none;
  background: #f3f4ef;
  border-radius: 12px;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.8);
  /* punched notches where the stub tears off */
  -webkit-mask:
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask:
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  transition: transform 0.2s var(--ease-out);
}
.ticket-main { padding: 0.95rem 1.1rem 1rem 1.2rem; min-width: 0; }
.ticket-label,
.stub-k {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b716a;
}
.ticket-route { display: flex; align-items: center; gap: 0.7rem; margin: 0.35rem 0 0.3rem; }
.iata {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}
.ticket-line {
  position: relative;
  flex: 1;
  height: 2px;
  background: repeating-linear-gradient(90deg, #c98a3c 0 6px, transparent 6px 11px);
}
.ticket-line::before,
.ticket-line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateY(-50%);
}
.ticket-line::before { left: -4px; border: 2px solid #c98a3c; background: #f3f4ef; }
.ticket-line::after { right: -4px; background: #c98a3c; }
.ticket-title { display: block; font-size: 0.875rem; font-weight: 700; color: #2c312b; }
.ticket-stub {
  display: flex;
  flex-direction: column;
  padding: 0.95rem 0.95rem 0.85rem;
  border-left: 2px dashed rgba(20, 24, 20, 0.22);
}
.stub-v { display: block; font-size: 0.75rem; font-weight: 700; line-height: 1.3; margin: 0.1rem 0 0.45rem; }
.barcode {
  display: block;
  height: 18px;
  margin-top: auto;
  background: repeating-linear-gradient(90deg,
    #141814 0 2px, transparent 2px 4px,
    #141814 4px 5px, transparent 5px 8px,
    #141814 8px 11px, transparent 11px 13px);
  opacity: 0.85;
}
@media (hover: hover) and (pointer: fine) {
  .ticket:hover { transform: translateY(-3px); }
}
.ticket:active { transform: scale(0.98); }

/* Tickets land one after the other on first load. */
@keyframes ticket-in {
  from { opacity: 0; transform: translateY(14px) rotate(var(--tilt, 0deg)); }
}
.tickets .ticket { animation: ticket-in 0.6s var(--ease-out) both; }
.tickets .ticket:nth-child(1) { animation-delay: 0.25s; }
.tickets .ticket:nth-child(2) { animation-delay: 0.4s; }

@media (min-width: 981px) {
  .hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: end;
  }
  .hero h1 { font-size: clamp(2.25rem, 3.5vw, 3.25rem); }
  .tickets { padding-bottom: 0.5rem; }
  .tickets .ticket:nth-child(1) { transform: rotate(-2deg); --tilt: -2deg; }
  .tickets .ticket:nth-child(2) { transform: translateX(-1.75rem) rotate(1.5deg); --tilt: 1.5deg; }
  .tickets .ticket:nth-child(1):hover { transform: rotate(-2deg) translateY(-3px); }
  .tickets .ticket:nth-child(2):hover { transform: translateX(-1.75rem) rotate(1.5deg) translateY(-3px); }
}
@media (max-width: 980px) {
  .tickets { margin-top: 2rem; max-width: 420px; }
}
@media (max-width: 640px) {
  .tickets { margin-top: 1.5rem; max-width: none; }
  .ticket { --stub: 116px; }
  .iata { font-size: 1.625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tickets .ticket { animation: none; }
  .ticket, .ticket:hover { transition: none; }
}

/* Tickets in the site's own material: dark glass, hairline border, gold route line. */
.ticket {
  color: var(--ink);
  background: rgba(11, 15, 12, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.7);
}
.ticket-label, .stub-k { color: var(--muted); }
.ticket-title { color: var(--ink); font-weight: 700; }
.iata { font-weight: 700; color: var(--ink); }
.ticket-line { background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 11px); }
.ticket-line::before { border-color: var(--accent); background: transparent; }
.ticket-line::after { background: var(--accent); }
.ticket-stub { border-left: 1px dashed var(--border-strong); }
.stub-v { color: var(--ink); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .ticket:hover { border-color: var(--accent); }
}
@media (min-width: 981px) {
  .tickets .ticket:nth-child(1),
  .tickets .ticket:nth-child(2) { transform: none; --tilt: 0deg; }
  .tickets .ticket:nth-child(1):hover,
  .tickets .ticket:nth-child(2):hover { transform: translateY(-3px); }
}
@media (max-width: 640px) {
  .ticket { background: rgba(16, 21, 17, 0.9); }
}

/* ---------- Players: recruiting, not "coming soon" ---------- */
#players { padding-bottom: clamp(2rem, 5vw, 3rem); }
.recruit {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
/* An empty player card, drawn as a dashed slot waiting to be filled. */
.recruit-slot {
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 1.1rem;
  border: 1px dashed var(--border-strong);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 38%, rgba(245, 246, 239, 0.07) 0 22%, transparent 22.5%),
    radial-gradient(ellipse 46% 30% at 50% 92%, rgba(245, 246, 239, 0.07) 0 98%, transparent 100%);
}
.recruit-num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--accent-strong);
}
.recruit-slot-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.recruit-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.recruit-copy p { margin: 0.75rem 0 1.5rem; max-width: 44ch; color: var(--muted); }
@media (max-width: 640px) {
  .recruit { grid-template-columns: 112px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
  .recruit-slot { padding: 0.7rem 0.75rem; }
  .recruit-slot-label { font-size: 0.5625rem; letter-spacing: 0.1em; }
  .recruit-copy p { margin-bottom: 1.25rem; }
}
/* Recruit line sits below the section title in weight, not beside it. */
.recruit-copy h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
.recruit-copy p { margin: 0.4rem 0 1.25rem; white-space: nowrap; }
@media (max-width: 640px) {
  .recruit-copy h3 { font-size: 1rem; }
  .recruit-copy p { white-space: normal; font-size: 0.9375rem; }
}
.recruit-icon { display: block; font-size: 2rem; line-height: 1; margin-bottom: 0.75rem; }
.recruit-copy p { line-height: 1.7; }
@media (max-width: 640px) { .recruit-icon { font-size: 1.625rem; margin-bottom: 0.5rem; } }
.recruit-copy { text-align: center; }
.recruit-copy p { margin-left: auto; margin-right: auto; }
.recruit, .recruit { display: block; }
.recruit-copy { padding: clamp(1rem, 3vw, 2rem) 0; }

/* ---------- Apply form: four required fields up front, the rest folded ---------- */
.apply-req-note { margin: -0.75rem 0 1.5rem; font-size: 0.8125rem; color: var(--muted); }
.field:has(> input:required) > span::after { content: " *"; color: var(--accent-strong); }

.apply-more {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.apply-more summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  padding: 1rem 2rem 1rem 0;
  position: relative;
  cursor: pointer;
  list-style: none;
}
.apply-more summary::-webkit-details-marker { display: none; }
.apply-more summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s var(--ease-out);
}
.apply-more[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.apply-more-title { font-weight: 700; color: var(--ink); }
.apply-more-hint { font-size: 0.8125rem; color: var(--muted); }
.apply-more summary:hover .apply-more-title { color: var(--accent-strong); }
.apply-more-body { display: flex; flex-direction: column; gap: 1.3rem; padding: 0.25rem 0 1.5rem; }
@media (prefers-reduced-motion: reduce) { .apply-more summary::after { transition: none; } }

/* ---------- Section rhythm: each section gets its own shape ---------- */

/* Company intro opens with one large statement instead of another paragraph. */
#intro .intro-lede {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3.2vw, 2.375rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 26ch;
  margin-bottom: 1.5rem;
}
#intro .intro-lede + p { max-width: 58ch; }

/* Process: a connected timeline with numbered stops. */
.steps { position: relative; border-bottom: none; }
.steps li { border-top: none; }
.steps .num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--ground);
  font-size: 0.8125rem;
}
.steps::before {
  content: "";
  position: absolute;
  background: linear-gradient(var(--accent), rgba(226, 167, 90, 0.15));
}
@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.75rem;
  }
  .steps::before {
    top: 18px;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(90deg, var(--accent), rgba(226, 167, 90, 0.15));
  }
  .steps li { grid-template-columns: 1fr; gap: 1rem; padding: 0; }
  .steps p { font-size: 0.875rem; }
}
@media (max-width: 899px) {
  .steps::before { top: 18px; bottom: 18px; left: 17.5px; width: 1px; }
  .steps li { grid-template-columns: 36px minmax(0, 1fr); gap: 1rem; padding: 0 0 1.5rem; }
  .steps li:last-child { padding-bottom: 0; }
  .steps li > div { padding-top: 0.4rem; }
}
#intro .intro-lede { font-size: clamp(1.5rem, 2.8vw, 2.125rem); max-width: 24em; }
.steps li { align-content: start; }

/* ---------- Type scale lock: one size per role ----------
   body 16 · card copy 15.2 · card title 17 · secondary 14 · caption 12.8 */

/* card & item copy */
.steps p,
.route-map li { font-size: 0.95rem; }

/* card & item titles */
.route-map h3,
.values b,
.quota-panel h3,
.ladder-panel h3 { font-size: 1.0625rem; }

/* secondary text */
.id-card .role,
.id-card .history,
.field > span,
.apply-req-note,
.apply-more-hint,
.story-toggle,
.flag-item .flag-name,
.ladder li { font-size: 0.875rem; }

/* captions */
.quota-panel .scope,
.ladder-scope,
.ladder-dir,
.quota-tier-label,
.quota-legend span,
.slot,
.flag-item .flag-tier,
.route-map .sub { font-size: 0.8rem; }

/* pathway route codes sit with the other mono labels */
.grid-pathway > li > span.route-code { font-size: 0.8125rem; }

/* every button label the same size */
.apply-submit { font-size: 0.98rem; }

/* the mobile pyramid keeps its tighter size so each tier stays on one line */
@media (max-width: 640px) { .ladder li { font-size: 0.75rem; } }

/* ---------- Mobile company intro: side-scrolling rows instead of one long column ---------- */
@media (max-width: 640px) {
  .card-grid.grid-identity,
  .card-grid.grid-pathway {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 -1.75rem;
    padding: 0 1.75rem 0.25rem;
    scroll-padding: 0 1.75rem;
    scrollbar-width: none;
    border-bottom: none;
  }
  .card-grid.grid-identity::-webkit-scrollbar,
  .card-grid.grid-pathway::-webkit-scrollbar { display: none; }

  /* each item becomes a card that peeks past the edge, so the swipe is obvious */
  .grid-identity li,
  .grid-pathway li {
    flex: 0 0 80%;
    scroll-snap-align: start;
    display: block;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid var(--border);
    border-top: 2px solid var(--line);
    border-radius: 12px;
    background: rgba(245, 246, 239, 0.03);
  }
  .grid-pathway li { border-top-color: var(--accent); }
  .grid-identity li::before { margin-bottom: 0.5rem; }
  .grid-pathway .route-code { display: block; margin-bottom: 0.5rem; }
  .grid-pathway b { display: block; margin-bottom: 0.4rem; }
  .grid-identity > li > span:not(.value-quote),
  .grid-pathway > li > span:last-child { font-size: 0.875rem; line-height: 1.65; }
  .intro-sub { margin-top: 2.25rem; }
}

/* ---------- Mobile: hide the expertise intro line; give "why AYA" three distinct weights ---------- */
@media (max-width: 640px) {
  [data-i18n="intro.identity.lede"] { display: none; }

  .value-feature { margin-bottom: 1.5rem; }

  /* the other two reasons swipe, like the intro cards */
  .values {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 -1.75rem;
    padding: 0 1.75rem 0.25rem;
    scroll-padding: 0 1.75rem;
    scrollbar-width: none;
  }
  .values::-webkit-scrollbar { display: none; }
  .values li {
    flex: 0 0 80%;
    scroll-snap-align: start;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid var(--border);
    border-top: 2px solid var(--line);
    border-radius: 12px;
    background: rgba(245, 246, 239, 0.03);
  }
  .values li > span:not(.value-quote) { font-size: 0.875rem; line-height: 1.65; }

  /* legal trust reads as a quiet notice, a step below the reasons */
  .trust-note {
    margin-top: 2.25rem;
    padding: 1.1rem 1.1rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: 12px;
  }
  .trust-note .intro-sub { font-size: 1rem; }
  .trust-note > p { font-size: 0.875rem; margin-bottom: 0.25rem; }
  .card-grid.grid-trust { gap: 0; }
  .grid-trust li { padding: 0.9rem 0 0; margin-top: 0.9rem; border-top: 1px solid var(--border); }
  .grid-trust b { font-size: 0.9375rem; margin-bottom: 0.3rem; }
  .grid-trust > li > span:not(.value-quote) { font-size: 0.8125rem; line-height: 1.65; }
}
@media (max-width: 640px) { .trust-note .card-grid { margin-bottom: 0; } .trust-note .grid-trust li:last-child { padding-bottom: 0; } }