/* Fly Delta — "Thermal" design system */
:root {
  --night: #10131f;
  --dusk: #232a4d;
  --ember: #ff5d2e;
  --glow: #ffb03a;
  --paper: #f2ecdf;
  --paper-dim: #f2ecdfcc;
  --cut: clamp(20px, 4vw, 48px);
}

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

body {
  font-family: "Archivo", sans-serif;
  background: var(--night);
  color: var(--paper);
}

h1, h2, h3, .wordmark, .btn, .display {
  font-stretch: 125%;
  text-transform: uppercase;
}

img { max-width: 100%; display: block; }

/* ---------- nav ---------- */
nav.site {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  background: linear-gradient(#10131fd9, transparent);
}
.wordmark {
  font-weight: 800; letter-spacing: .08em;
  display: flex; align-items: center; gap: .55rem;
  color: var(--paper); text-decoration: none;
}
.wordmark .delta {
  width: 0; height: 0;
  border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-bottom: 17px solid var(--ember);
}
nav.site ul { display: flex; gap: clamp(.8rem, 2.5vw, 1.8rem); list-style: none; flex-wrap: wrap; justify-content: flex-end; }
nav.site a:not(.wordmark) {
  color: var(--paper); text-decoration: none;
  font-size: .8rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
}
nav.site a:hover, nav.site a:focus-visible { color: var(--glow); }
nav.site a[aria-current="page"] { color: var(--glow); border-bottom: 2px solid var(--ember); padding-bottom: .15rem; }

/* ---------- heroes ---------- */
.hero { position: relative; display: flex; align-items: flex-end; overflow: hidden; min-height: 100svh; }
.hero.short { min-height: min(62svh, 560px); }
.hero-media {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 50% 100%, #ff5d2e55 0%, transparent 60%),
    linear-gradient(to top, #4a2440 0%, var(--dusk) 45%, var(--night) 100%);
  animation: pulse 10s ease-in-out infinite alternate;
}
@keyframes pulse { from { filter: brightness(.95); } to { filter: brightness(1.12); } }
.hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-media.placeholder::after {
  content: "background video placeholder";
  position: absolute; top: 5.5rem; right: 1rem;
  font-size: .65rem; color: #f2ecdf55; letter-spacing: .12em; text-transform: uppercase;
}
.hero-inner { position: relative; padding: 6rem clamp(1rem, 5vw, 4rem) clamp(3rem, 8vh, 6rem); max-width: 1100px; }
.kicker { color: var(--glow); letter-spacing: .3em; text-transform: uppercase; font-size: .75rem; margin-bottom: 1rem; }
.hero h1 { font-weight: 800; font-size: clamp(2.6rem, 9vw, 7rem); line-height: .95; letter-spacing: -.01em; }
.hero h1 .outline { color: transparent; -webkit-text-stroke: 2px var(--paper); }
.hero p.lead { margin: 1.4rem 0 2rem; max-width: 46ch; color: var(--paper-dim); line-height: 1.6; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; background: var(--ember); color: var(--night);
  padding: 1rem 2.4rem; text-decoration: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 800; letter-spacing: .08em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.btn:hover, .btn:focus-visible { background: var(--glow); }
.btn.ghost { background: transparent; color: var(--paper); border: 2px solid var(--paper); clip-path: none; }
.btn.ghost:hover, .btn.ghost:focus-visible { border-color: var(--glow); color: var(--glow); }

/* ---------- sections ---------- */
section.paper {
  background: var(--paper); color: var(--night);
  padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 5vw, 4rem);
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
}
section.paper.flip { clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 100%); }
section.dark { padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 5vw, 4rem); }
.section-inner { max-width: 1100px; margin: 0 auto; }
section h2 { font-weight: 800; font-size: clamp(1.6rem, 4.5vw, 2.6rem); margin-bottom: 2rem; }
section h2 em { font-style: normal; color: var(--ember); }
section h3 { font-size: 1.05rem; letter-spacing: .04em; margin-bottom: .6rem; }
.prose p { max-width: 65ch; line-height: 1.7; margin-bottom: 1rem; }

/* ---------- cards / grids ---------- */
.grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.hairline-grid { display: grid; gap: 1px; background: #10131f22; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.hairline-grid > * { background: var(--paper); padding: 1.8rem 1.6rem; }
.review p { line-height: 1.6; font-size: .95rem; }
.review footer { margin-top: 1.1rem; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ember); }

/* numbered steps — the flight day is a real sequence */
.steps { counter-reset: step; }
.steps > li { list-style: none; padding-left: 3.4rem; position: relative; margin-bottom: 1.6rem; max-width: 60ch; }
.steps > li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: .1rem;
  font-weight: 800; font-stretch: 125%; color: var(--ember); font-size: 1.4rem;
}
.steps > li strong { display: block; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem; }
.steps > li p { line-height: 1.6; font-size: .95rem; }

/* ---------- pilots ---------- */
.pilot { display: grid; gap: 1.5rem; grid-template-columns: minmax(200px, 280px) 1fr; align-items: start; margin-bottom: 3rem; }
.pilot .portrait {
  aspect-ratio: 3 / 4; position: relative; overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
  background: linear-gradient(160deg, var(--dusk), #4a2440);
  display: grid; place-items: center;
  color: #f2ecdf77; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
}
.pilot h3 { font-size: clamp(1.4rem, 3vw, 2rem); color: var(--ember); }
.pilot .role { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #10131f99; margin-bottom: 1rem; }
.pilot ul.facts { list-style: none; margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.pilot ul.facts li {
  border: 2px solid var(--night); padding: .3rem .8rem; font-size: .75rem;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- forms ---------- */
form.panel { max-width: 640px; display: grid; gap: 1.1rem; }
.field { display: grid; gap: .35rem; }
.field label { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 1rem; padding: .7rem .8rem;
  background: #fffdf7; color: var(--night);
  border: 2px solid var(--night); border-radius: 0;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--ember); outline-offset: 1px;
}
.field .hint { font-size: .78rem; color: #10131f99; }
.form-row { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
.form-note {
  margin-top: 1rem; padding: 1rem 1.2rem; border-left: 4px solid var(--ember);
  background: #ff5d2e14; font-size: .9rem; line-height: 1.5;
}
.form-note[hidden] { display: none; }

/* ---------- gallery ---------- */
.gallery-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.gallery-grid figure { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.gallery-grid figure.tall { aspect-ratio: 3 / 4; grid-row: span 2; }
.gallery-grid .ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #f2ecdf88; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 1rem;
}
.gallery-grid figcaption {
  position: absolute; inset: auto 0 0 0; padding: .6rem .8rem;
  background: linear-gradient(transparent, #10131fd9);
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- CTA strip / footer ---------- */
.cta-strip { text-align: center; padding: clamp(3rem, 8vw, 5rem) 1.5rem; }
.cta-strip h2 { margin-bottom: 1.5rem; }
footer.site { padding: 2rem clamp(1rem, 4vw, 3rem); text-align: center; font-size: .78rem; color: #f2ecdf66; }
footer.site a { color: #f2ecdf99; }

/* ---------- responsive / a11y ---------- */
@media (max-width: 640px) {
  nav.site { flex-direction: column; gap: .6rem; }
  .hero-inner { padding-top: 8rem; }
  .form-row { grid-template-columns: 1fr; }
  .pilot { grid-template-columns: 1fr; }
  .pilot .portrait { max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-media { animation: none; }
}