/* AirForce — front page: hero + ride rig, tier rail, management, support. */

/* ===== Hero ===== */
.hero { position: relative; overflow: clip; display: flex; flex-direction: column; margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h); }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.ride { position: absolute; inset: 0; overflow: hidden; }
.ride-frame { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: min(1180px, 100%); aspect-ratio: 1920 / 996; }
.ride-frame > .ride-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; object-position: 0 0; }
/* Body cut-out: cropped from the 1920×996 plate at (384,384)–(1824,864); the
   percentages place it back exactly where it was cut from. */
.ride-layer { will-change: transform; }
.ride-body { position: absolute; left: 20%; top: 38.5542%; width: 75%; height: 48.1928%; }
.ride-body img { display: block; width: 100%; height: 100%; }
.ride-shadow { position: absolute; left: 22%; right: 3.5%; top: 79.4%; height: 7%; background: radial-gradient(60% 100% at 50% 0%, rgba(0,0,0,0.95), rgba(0,0,0,0.55) 55%, rgba(0,0,0,0) 100%); pointer-events: none; }
/* Overhangs the frame by a pixel top and bottom: translateY(-50%) can land on a
   half pixel, and an inset:0 overlay then leaves the photograph's first row
   uncovered as a bright seam across the hero. The vertical ramp is also front-
   loaded so the plate edge dissolves rather than announcing itself. */
.ride-frame::after { content: ""; position: absolute; inset: -1px 0; pointer-events: none; z-index: 5;
  background:
    linear-gradient(90deg, var(--obsidian) 0%, var(--obsidian) 14%, rgba(11,11,12,0.9) 26%, rgba(11,11,12,0) 48%, rgba(11,11,12,0) 90%, rgba(11,11,12,0.3) 100%),
    linear-gradient(180deg, var(--obsidian) 0%, var(--obsidian) 3%, rgba(11,11,12,0.72) 11%, rgba(11,11,12,0.28) 22%, rgba(11,11,12,0) 38%, rgba(11,11,12,0) 70%, rgba(11,11,12,0.72) 88%, var(--obsidian) 99%); }

.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gutter); align-items: center; min-height: calc(100vh - var(--header-h) - 120px); padding-block: 40px 56px; }
.hero-copy { display: flex; flex-direction: column; gap: 22px; max-width: 600px; animation: fadeUp 400ms var(--ease-out-quint) both; }
.hero-title { font-size: var(--t-56); margin: 0; text-wrap: balance; }
.hero-title .line { display: block; }
.hero-resolve { color: var(--steel); transition: color 700ms var(--ease-out-quint); }
.hero-resolve.is-resolved { color: var(--paper); }
.hero-sub { max-width: 480px; color: var(--steel); margin: 0; font-size: var(--t-17); line-height: 1.55; }
.hero-sub strong { color: var(--paper); font-weight: 500; }
.hero-meta { display: flex; gap: 28px; flex-wrap: wrap; color: var(--steel); font-size: var(--t-15); }
.hero-meta b { color: var(--paper); font-weight: 600; }
.hero-aside { display: flex; justify-content: flex-start; }

.controller { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: stretch; padding: 16px 18px 16px 16px; background: rgba(17,18,20,0.82); border: 1px solid var(--gunmetal); border-radius: var(--radius-control); width: max-content; max-width: 100%; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fadeUp 400ms 160ms var(--ease-out-quint) both; }
.ride-slider { position: relative; width: 40px; height: 156px; border-radius: var(--radius-control); background: var(--brushed-gold-v); box-shadow: inset 0 0 0 1px var(--brass), inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 0 var(--brass); cursor: ns-resize; touch-action: none; user-select: none; }
.ride-slider::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 50%; width: 4px; margin-left: -2px; background: rgba(11,11,12,0.82); border-radius: 2px; box-shadow: inset 0 1px 0 rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.25); }
.ride-fill { position: absolute; bottom: 8px; left: 50%; width: 4px; margin-left: -2px; height: 0; background: var(--lcd); border-radius: 2px; opacity: 0.85; box-shadow: 0 0 8px rgba(191,232,245,0.5); }
.ride-thumb { position: absolute; left: -6px; right: -6px; height: 24px; top: 0; margin-top: -12px; border-radius: 3px; background: linear-gradient(180deg, #F0DA95 0%, var(--champagne) 45%, #B8953F 100%); box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 2px 6px rgba(0,0,0,0.55), 0 0 0 1px var(--brass); }
.ride-thumb::after { content: ""; position: absolute; left: 9px; right: 9px; top: 50%; height: 1px; background: var(--brass); box-shadow: 0 -4px 0 var(--brass), 0 4px 0 var(--brass); }
.ride-slider.is-dragging .ride-thumb { box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 3px 10px rgba(0,0,0,0.65), 0 0 0 1px var(--brass); }
.controller-right { display: flex; flex-direction: column; justify-content: space-between; min-width: 196px; }
.lcd { background: #0A1418; border: 1px solid #1E2A30; border-radius: 3px; padding: 10px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; box-shadow: inset 0 0 24px rgba(191,232,245,0.08), inset 0 0 0 1px rgba(191,232,245,0.05); }
.lcd-cell { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-mono); }
.lcd-cell small { font-size: 10px; letter-spacing: 0.12em; color: rgba(191,232,245,0.55); }
.lcd-cell b { font-size: 24px; line-height: 1; font-weight: 500; color: var(--lcd); text-shadow: 0 0 10px rgba(191,232,245,0.55); white-space: pre; font-variant-numeric: tabular-nums; }
.lcd-cell i { font-style: normal; font-size: 10px; color: rgba(191,232,245,0.55); letter-spacing: 0.1em; }
.lcd-status { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(191,232,245,0.12); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: rgba(191,232,245,0.7); }
.ride-mode { color: var(--lcd); }
.controller-keys { display: flex; gap: 8px; margin-top: 10px; }
.controller-keys button { flex: 1; height: 32px; border-radius: 3px; border: 1px solid var(--gunmetal); background: #1E2024; color: var(--steel); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; }
.controller-keys button:hover { color: var(--paper); border-color: var(--steel); }
.controller-hint { margin: 8px 0 0; font-size: var(--t-13); color: var(--steel); }

.hero .finder { animation: fadeUp 400ms 120ms var(--ease-out-quint) both; }

@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; min-height: 0; padding-top: 300px; }
  .ride-frame { width: 130%; top: 0; transform: none; right: -10%; }
  .ride-frame::after { background: linear-gradient(180deg, rgba(11,11,12,0.3) 0%, rgba(11,11,12,0) 20%, rgba(11,11,12,0) 60%, rgba(11,11,12,0.75) 84%, var(--obsidian) 100%); }
}
@media (max-width: 720px) {
  .hero-inner { padding-top: 300px; padding-bottom: 40px; }
  .ride-frame { width: 175%; right: -32%; top: 0; }
  .controller { width: 100%; padding: 14px; }
  .ride-slider { height: 140px; }
  .lcd-cell b { font-size: 22px; }
}

/* ===== Tier rail ===== */
.tier-rail { display: grid; grid-template-columns: minmax(0, 1fr) 16px repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--hairline-light); border: 1px solid var(--hairline-light); }
.tier { position: relative; background: var(--aluminium); padding: 28px 22px 32px; display: flex; flex-direction: column; gap: 14px; min-height: 420px; transition: background-color var(--dur-fast); }
.tier:hover { background: #F2F2F4; }
.tier-kit { background: var(--graphite); color: var(--paper); }
.tier-kit:hover { background: #1C1D21; }
.tier-kit .tier-idx, .tier-kit .tier-price small, .tier-kit .tier-diff, .tier-kit .tier-tagline { color: var(--steel); }
.tier-kit .tier-diff li::before { background: var(--gunmetal); box-shadow: inset 0 0 0 1px var(--steel-dark); }
.tier-kit .tier-img { background: transparent; }
.tier-kit .tier-img img { mix-blend-mode: normal; object-fit: cover; }
.tier-gap { background: var(--aluminium); }
.tier-idx { font-family: var(--font-mono); font-size: var(--t-13); color: var(--steel-dark); letter-spacing: 0.12em; }
.tier-name { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; margin: 0; min-height: 2.2em; overflow-wrap: anywhere; }
.tier-price { font-family: var(--font-mono); font-size: var(--t-20); font-weight: 500; margin: 0; }
.tier-price small { display: block; font: 400 var(--t-13)/1.4 var(--font-body); color: var(--steel-dark); }
.tier-tagline { margin: 0; font-size: var(--t-15); font-weight: 500; color: var(--steel-dark); }
.tier-diff { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: var(--t-15); color: #2A2C31; }
.tier-diff li { padding-left: 16px; position: relative; line-height: 1.45; }
.tier-diff li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; background: var(--champagne); box-shadow: inset 0 0 0 1px var(--brass); }
.tier-img { margin: auto -8px 0; aspect-ratio: 3/2; overflow: hidden; background: #fff; }
/* No image for this tier: hold the card's rhythm without drawing an empty frame. */
.tier-spacer { margin-top: auto; }
.tier-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.tier-link { position: absolute; inset: 0; z-index: 1; font-size: 0; color: transparent; }
.tier-link:focus-visible { outline-offset: -2px; }
.tier-foot { margin-top: 40px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; color: var(--steel-dark); font-size: var(--t-15); }
.tier-foot p { margin: 0; max-width: 720px; }
@media (max-width: 1100px) { .tier-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tier-gap { display: none; } }
@media (max-width: 720px) { .tier-rail { grid-template-columns: 1fr; } .tier { min-height: 0; } }

/* ===== Management chapter ===== */
.mgmt { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); align-items: start; }
.mgmt-figure { position: relative; background: var(--graphite); aspect-ratio: 4/3; overflow: hidden; margin: 0; }
.mgmt-figure img { width: 100%; height: 100%; object-fit: cover; }
.mgmt-figure figcaption { position: absolute; left: 20px; bottom: 16px; font-family: var(--font-mono); font-size: var(--t-13); letter-spacing: 0.1em; color: var(--steel); }
.mgmt-list { display: grid; gap: 0; border-top: 1px solid var(--gunmetal); }
.mgmt-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 6px 20px; padding: 22px 0; border-bottom: 1px solid var(--gunmetal); align-items: start; color: inherit; }
.mgmt-item > div { min-width: 0; }
.mgmt-item:hover h3 { color: var(--champagne); }
.mgmt-item .code { font-family: var(--font-mono); color: var(--champagne); font-weight: 500; font-size: var(--t-15); padding-top: 3px; min-width: 0; overflow: hidden; word-break: break-all; }
.mgmt-item h3 { margin: 0 0 4px; font-size: var(--t-20); font-weight: 600; transition: color var(--dur-fast); }
.mgmt-item p { margin: 0; color: var(--steel); font-size: var(--t-15); }
.mgmt-item .tag { grid-column: 2; font-family: var(--font-mono); font-size: var(--t-13); color: var(--steel); padding-top: 0; }
.mgmt-item .tag .woocommerce-Price-amount { font-family: inherit; }
.mgmt-strip { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.mgmt-strip figure { margin: 0; background: var(--graphite); aspect-ratio: 16/10; overflow: hidden; position: relative; }
.mgmt-strip img { width: 100%; height: 100%; object-fit: cover; }
.mgmt-strip figcaption { position: absolute; left: 16px; bottom: 12px; font-size: var(--t-13); color: var(--steel); font-family: var(--font-mono); letter-spacing: 0.08em; }
.mgmt-more, .gallery-more, .videos-more { margin: 32px 0 0; }
@media (max-width: 900px) { .mgmt { grid-template-columns: 1fr; } .mgmt-strip { grid-template-columns: 1fr; } .mgmt-item { grid-template-columns: 56px 1fr; } }

/* ===== Support ===== */
.support { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.support-card { background: #fff; padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 12px; min-height: 260px; border-top: 2px solid var(--ink); }
.support-card .num { font-family: var(--font-mono); font-size: var(--t-13); color: var(--steel-dark); letter-spacing: 0.12em; }
.support-card h3 { margin: 0; font-size: var(--t-20); font-weight: 600; }
.support-card p { margin: 0; color: #2A2C31; font-size: var(--t-15); }
.support-card .btn-link { margin-top: auto; color: var(--brass); }
@media (max-width: 900px) { .support { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .support { grid-template-columns: 1fr; } .support-card { min-height: 0; } }