@font-face{font-family:"Barlow";src:url(/assets/fonts/Barlow-Regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/Barlow-Medium.woff) format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/Barlow-SemiBold.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/BarlowCondensed-Bold.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/BarlowCondensed-ExtraBold.woff) format("woff");font-weight:800;font-display:swap}

:root{
  --night:#0F1B2D; --fuselage:#1A2A42; --amber:#FFB224; --blue:#4A86FF;
  --contrail:#EEF2F7; --muted:#9AA8BD; --line:rgba(238,242,247,.10); --overhead:#25385A; --amber-ink:#A06700;
  --r:22px; --display:"Barlow Condensed",system-ui,sans-serif; --text:"Barlow",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--contrail);font:400 17px/1.6 var(--text);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--amber);text-underline-offset:3px}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--amber);color:var(--night);padding:8px 12px;border-radius:8px;z-index:10}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;border-radius:999px;font:600 16px/1 var(--text);text-decoration:none;border:0;cursor:pointer;transition:transform .15s,background .15s,border-color .15s}
.btn:active{transform:scale(.98)}
.btn--amber{background:var(--amber);color:var(--night)}
.btn--amber:hover{background:#ffc04f}
.btn--ghost{background:transparent;color:var(--contrail);border:1.5px solid rgba(238,242,247,.22)}
.btn--ghost:hover{border-color:var(--contrail)}
.btn--sm{min-height:40px;padding:0 16px;font-size:14px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* nav */
.nav{position:sticky;top:0;z-index:5;background:rgba(15,27,45,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav__brand img{height:40px;width:auto}

.nav__links{display:none;gap:26px;font:500 15px/1 var(--text)}
.nav__links a{color:var(--contrail);text-decoration:none;opacity:.85}
.nav__links a:hover{opacity:1}
.nav__right{display:flex;align-items:center;gap:26px}

/* hero: art-only background, live text */
.hero{position:relative;overflow:hidden;padding:0 0 64px;background:var(--night)}
/* mobile art is 1080x1350 (4:5): portrait fills the top ~64%, clean Night Cabin field from y=860 down */
.hero__art{position:absolute;top:0;left:0;right:0;height:125vw;background:#0F1B2D url(/assets/img/wing-mates-hero-blonde-mobile-1080x1350.jpg) center top/100% auto no-repeat}
.hero__art::after{content:"";position:absolute;inset:auto 0 0 0;height:12%;background:linear-gradient(to bottom,rgba(15,27,45,0),var(--night))}
@supports (background-image:url(x.webp)){.hero__art{background-image:image-set(url(/assets/img/wing-mates-hero-blonde-mobile-1080x1350.webp) type("image/webp"),url(/assets/img/wing-mates-hero-blonde-mobile-1080x1350.jpg) type("image/jpeg"))}}
/* live text starts at the art's clear band: 860/1080 of viewport width (~79.6vw) */
.hero__in{position:relative;padding-top:calc(100vw * 860 / 1080)}
.hero__in .pill{margin-top:0}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(255,178,36,.12);color:var(--amber);font:700 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(255,178,36,.35)}
.pill__dot{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(255,178,36,.2)}
.hero__title{font:800 clamp(50px,13vw,104px)/.92 var(--display);letter-spacing:.01em;text-transform:uppercase;margin:22px 0 20px}
.hero__title span{color:var(--amber)}
.hero__lede{font-size:clamp(18px,4.6vw,21px);color:#cfd8e5;max-width:36ch;margin:0 0 28px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__cta .btn{flex:1 1 auto}
.hero__fine{margin:16px 0 0;color:var(--muted);font-size:14px}

/* sections */
.section{padding:72px 0}
.section--raised{background:var(--fuselage);border-block:1px solid var(--line)}
.section--band-fuselage{background:var(--fuselage) url(/assets/img/wing-mates-band-fuselage-2400x600.jpg) left center/cover no-repeat;border-block:1px solid var(--line)}
.section--band-night{background:var(--night) url(/assets/img/wing-mates-band-night-cabin-2400x600.jpg) right center/cover no-repeat}
.section--light{background:#EEF2F7 url(/assets/img/wing-mates-band-contrail-2400x600.jpg) right center/cover no-repeat;color:var(--night)}
.section--light .eyebrow{color:var(--amber-ink)}
.section--light .h2 span{color:var(--amber-ink)}
.section--light .sub,.section--light .value__body{color:#33435c}
.eyebrow{font:700 14px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin:0 0 14px}
.h2{font:800 clamp(40px,10vw,64px)/.95 var(--display);text-transform:uppercase;margin:0 0 14px}
.h2 span{color:var(--amber)}
.sub{color:#cfd8e5;font-size:18px;margin:0 0 36px;max-width:46ch}
.eyebrow--center,.h2--center,.sub--center{text-align:center;margin-left:auto;margin-right:auto}

.steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.step{padding:26px 24px;border-radius:var(--r);background:rgba(15,27,45,.62);border:1px solid var(--line);backdrop-filter:blur(4px)}
.step__head{display:flex;align-items:center;gap:14px}
.step__n{font:700 15px/1 var(--display);letter-spacing:.12em;color:var(--blue)}
.step__ring{width:34px;height:34px;flex:none}
.step__title{font:800 30px/1 var(--display);text-transform:uppercase;margin:14px 0 8px}
.step__body{margin:0;color:#cfd8e5}

.cards{display:grid;gap:18px}
.card{position:relative;padding:30px 26px 28px;border-radius:var(--r);background:var(--fuselage);border:1px solid var(--line);overflow:hidden}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px}
.card--amber::before{background:var(--amber)}.card--blue::before{background:var(--blue)}
.card__tag{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px}
.card--amber .card__tag{background:rgba(255,178,36,.14);color:var(--amber)}
.card--blue .card__tag{background:rgba(74,134,255,.16);color:var(--blue)}
.card__eyebrow{font:700 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.card__title{font:800 34px/1 var(--display);text-transform:uppercase;margin:0 0 10px}
.card__body{margin:0;color:#cfd8e5}

.values{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:14px}
.value{padding:24px 22px;border-radius:var(--r);background:rgba(255,255,255,.78);border:1px solid rgba(15,27,45,.08)}
.value__title{font:800 24px/1.05 var(--display);text-transform:uppercase;margin:0 0 8px;color:var(--night)}
.value__body{margin:0}

.cta{max-width:640px;margin:0 auto;text-align:center;padding:44px 22px;border-radius:28px;background:radial-gradient(120% 90% at 50% 0%,rgba(74,134,255,.18),transparent 60%),var(--fuselage);border:1px solid var(--line)}
.cta__icon{width:84px;height:auto;margin:0 auto 22px}
.cta__alt{margin:18px 0 0;color:var(--muted);font-size:14.5px}

/* footer */
.foot{padding:40px 0 48px;border-top:1px solid var(--line)}
.foot__in{display:grid;gap:22px}
.foot__brand img{height:30px;width:auto}
.foot__brand p{margin:10px 0 0;color:var(--muted);font-size:14px}
.foot__links p{margin:0 0 6px;font-size:15px}
.foot__links a{color:var(--contrail)}
.foot__fine{margin:0;color:#6f7f96;font-size:13px;grid-column:1/-1}

@media (min-width:560px){.hero__cta .btn{flex:0 0 auto}}
@media (min-width:900px){
  body{font-size:18px}
  .wrap{padding:0 40px}
  .nav__in{height:76px}
  .nav__links{display:flex}
  .hero{padding:0;min-height:640px;display:flex;align-items:center;background:#0F1B2D url(/assets/img/wing-mates-hero-blonde-art-2400x1200.jpg) right center/cover no-repeat}
  @supports (background-image:url(x.webp)){.hero{background-image:image-set(url(/assets/img/wing-mates-hero-blonde-art-2400x1200.webp) type("image/webp"),url(/assets/img/wing-mates-hero-blonde-art-2400x1200.jpg) type("image/jpeg"))}}
  .hero__art{display:none}
  .hero__in{margin:0 auto;padding-top:96px;padding-bottom:110px}
  .hero__copy{max-width:52%}
  .hero__title{font-size:clamp(60px,6.2vw,92px);max-width:5.4em}
  .hero__lede{max-width:32ch}
  .section{padding:110px 0}
  .cards{grid-template-columns:1fr 1fr;gap:24px}
  .card{padding:40px 36px}
  .steps{grid-template-columns:repeat(3,1fr);gap:20px}
  .values{grid-template-columns:repeat(3,1fr);gap:20px}
  .cta{padding:64px 48px}
  .foot__in{grid-template-columns:1fr auto;align-items:end}
  .foot__links{text-align:right}
}
/* 900-1279: nudge the blonde art right so the D Reply Pair badge clears the live copy */
@media (min-width:900px) and (max-width:1279px){.hero{background-position:right -110px center}}
@media (min-width:900px) and (max-width:1099px){.hero{background-position:right -200px center}.hero__lede{max-width:26ch}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* privacy / legal page */
.legal{padding:56px 0 80px}
.legal__in{max-width:720px}
.legal .h2{margin-bottom:10px}
.legal__date{color:var(--muted);font-size:14px;margin:0 0 36px}
.legal h3{font:800 26px/1.05 var(--display);text-transform:uppercase;letter-spacing:.01em;margin:40px 0 10px;color:var(--contrail)}
.legal p,.legal li{color:#cfd8e5}
.legal ul{padding-left:22px;margin:0 0 16px}
.legal li{margin:0 0 6px}
.legal__box{margin:28px 0 0;padding:24px 22px;border-radius:var(--r);background:var(--fuselage);border:1px solid var(--line)}
.legal__box p{margin:0}
@media (min-width:900px){.legal{padding:88px 0 110px}}