/* CF Transport — shared by landing.html and apply.html.
One stylesheet so the two pages cannot drift apart. */
body{font-family:'Geist',-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;}
.cta-grad{background:linear-gradient(to bottom,#2B2B2B,#101010);}
/* The plate is a white studio render, far lighter than the location footage
it replaced. Graded down harder so white type keeps its contrast. */
.bg-plate{filter:brightness(.5) contrast(1.08) saturate(.9);transition:opacity 900ms ease;}
.hero-shell{height:100vh;height:100svh;}
/* ===== seat picker =====================================================
The LTX reference drives its states with pre-rendered transition clips.
No such footage exists for CF, so the scenes are drawn as vectors and
the states cross-fade in CSS. Same choreography, honest materials. */
.seat{--ease:cubic-bezier(.22,1,.36,1);--slow:cubic-bezier(.65,0,.35,1);
margin:1.75rem auto 0;width:100%;max-width:44rem;}
@media (min-width:640px){.seat{margin-top:2.25rem}}
/* --- the read-out --- */
.seat-read{position:relative;margin-top:1.5rem;height:222px;}
@media (min-width:640px){.seat-read{margin-top:1.75rem;height:236px}}
.seat-offer{position:absolute;inset:0;opacity:0;transform:translateY(8px);
transition:opacity .42s var(--ease),transform .55s var(--ease);
pointer-events:none;}
.seat-offer[data-live]{opacity:1;transform:none;}
/* The lockup is a single alpha mask so one file covers every background
and the brand blue is applied in CSS rather than baked into the PNG. */
/* Two inks live in the artwork, so the artwork goes in as artwork. A mask
paints every pixel one colour, which is why the mark was monochrome. The
stacked lockup is the opening; the horizontal one is every other use. */
.logo{display:block;width:auto;aspect-ratio:1467/176;
background:url("../brand/cf-lockup-horizontal-white-sm.png") center/contain no-repeat;}
.fly-part{display:none;position:fixed;left:0;top:0;z-index:35;pointer-events:none;
background-repeat:no-repeat;background-position:center;background-size:contain;}
#fly-mark{background-image:url("../brand/cf-part-monogram.png");}
#fly-word{background-image:url("../brand/cf-part-wordmark.png");}
/* --- the opening mark, and the rail that invites the scroll --- */
.scroll-rail{position:relative;display:block;width:1px;height:44px;
background:rgba(255,255,255,.18);overflow:hidden;}
.scroll-bead{position:absolute;left:-1px;top:0;width:3px;height:13px;border-radius:2px;
background:#a0dcff;animation:bead 2.2s cubic-bezier(.65,0,.35,1) infinite;}
@keyframes bead{0%{transform:translateY(-15px);opacity:0}22%{opacity:1}
78%{opacity:1}100%{transform:translateY(46px);opacity:0}}
#topbar[data-solid]{background:rgba(5,7,10,.72);backdrop-filter:blur(14px) saturate(140%);
border-bottom:1px solid rgba(255,255,255,.08);}
@media (prefers-reduced-motion:reduce){.scroll-bead{animation:none;opacity:.8}}
/* --- the opening instruction: it moves, so it reads as an invitation --- */
.hint-line{margin:0;overflow:hidden;}
.hint-line span{display:inline-block;font-size:.6875rem;font-weight:500;
letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.42);
animation:hintDrift 3.4s cubic-bezier(.45,0,.2,1) infinite;}
@keyframes hintDrift{
0% {transform:translateY(0);opacity:.42}
42% {transform:translateY(0);opacity:.85}
58% {transform:translateY(-120%);opacity:0}
59% {transform:translateY(120%);opacity:0}
100% {transform:translateY(0);opacity:.42}
}
@media (prefers-reduced-motion:reduce){.hint-line span{animation:none;opacity:.6}}
/* --- the requirements window --- */
#reqs[data-on],#reqs-scrim[data-on]{opacity:1;pointer-events:auto;}
.reqs-card{position:relative;width:100%;max-width:34rem;max-height:86svh;overflow-y:auto;
border-radius:22px;padding:1.75rem 1.5rem 1.75rem;
border:1px solid rgba(255,255,255,.12);
background:linear-gradient(180deg,#0d141b 0%,#090f14 100%);
box-shadow:0 40px 90px -30px rgba(0,0,0,.9);}
@media (min-width:640px){.reqs-card{padding:2.25rem 2.25rem 2rem;}}
.reqs-list{margin:1.5rem 0 0;padding:0;list-style:none;display:grid;gap:1rem;}
.reqs-list li{position:relative;padding-left:1.7rem;font-size:.8125rem;line-height:1.6;
color:rgba(255,255,255,.6);}
.reqs-list li b{display:block;font-weight:600;color:#fff;}
.reqs-list li::before{content:"";position:absolute;left:0;top:.45em;width:11px;height:11px;
border-radius:999px;border:2px solid #a0dcff;}
@media (min-width:640px){.reqs-list li{font-size:.875rem;}}
/* --- the footer --- */
.foot-head{margin:0 0 1.1rem;font-size:.625rem;font-weight:600;letter-spacing:.2em;
text-transform:uppercase;color:rgba(255,255,255,.38);}
.foot-list{margin:0;padding:0;list-style:none;display:grid;gap:.85rem;}
.foot-list a,.foot-list span{font-size:.875rem;line-height:1.4;color:rgba(255,255,255,.62);
text-decoration:none;transition:color .2s ease;}
.foot-list a:hover{color:#fff;}
.foot-list a[data-slot]{color:rgba(255,255,255,.35);}
.social{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;
border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.45);
transition:border-color .2s ease,color .2s ease,background-color .2s ease;}
.social svg{width:16px;height:16px;}
.social:hover{border-color:#a0dcff;color:#a0dcff;background:rgba(160,220,255,.08);}
.social:focus-visible{outline:2px solid #a0dcff;outline-offset:3px;}
/* --- the greeting --- */
#welcome[hidden]{display:none !important;}
#welcome{position:fixed;inset:0;z-index:80;display:grid;place-items:center;
background:#05070a;opacity:0;pointer-events:none;
transition:opacity .45s ease;}
#welcome[data-on]{opacity:1;pointer-events:auto;}
.welcome-inner{display:flex;flex-direction:column;align-items:center;gap:1.9rem;padding:0 1.25rem;}
#welcome-logo{width:min(68vw,420px);opacity:0;transform:scale(.9);filter:blur(7px);
transition:opacity .75s cubic-bezier(.22,1,.36,1),
transform .95s cubic-bezier(.22,1,.36,1),
filter .75s cubic-bezier(.22,1,.36,1);}
#welcome[data-in] #welcome-logo{opacity:1;transform:none;filter:blur(0);}
#welcome-line{margin:0;text-align:center;font-size:1rem;font-weight:500;
letter-spacing:.01em;color:rgba(255,255,255,.8);
opacity:0;transform:translateY(12px);
transition:opacity .6s ease .32s,transform .75s cubic-bezier(.22,1,.36,1) .32s;}
#welcome[data-in] #welcome-line{opacity:1;transform:none;}
@media (min-width:640px){#welcome-line{font-size:1.125rem}}
@media (prefers-reduced-motion:reduce){
#welcome-logo,#welcome-line{transition:none;opacity:1;transform:none;filter:none}
}
/* --- the fleet: one window, the makes running through it --- */
.fleet-window{position:relative;overflow:hidden;border-radius:20px;
border:1px solid rgba(255,255,255,.12);
background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
padding:1.4rem 0;}
@media (min-width:640px){.fleet-window{padding:1.75rem 0;}}
.fleet-track{display:flex;width:max-content;align-items:center;
animation:marquee 34s linear infinite;}
.fleet-track:hover{animation-play-state:paused;}
.fleet-run{display:flex;flex:none;align-items:center;}
.fleet-pick{display:flex;align-items:baseline;gap:.7rem;
padding:.35rem 1.6rem;text-decoration:none;white-space:nowrap;
transition:color .2s ease;}
@media (min-width:640px){.fleet-pick{padding:.35rem 2.25rem;}}
.fleet-make{font-size:1.35rem;font-weight:600;letter-spacing:-.015em;color:rgba(255,255,255,.82);
transition:color .2s ease;}
@media (min-width:640px){.fleet-make{font-size:1.75rem;}}
.fleet-years{font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
color:rgba(160,220,255,.7);transition:color .2s ease;}
.fleet-pick:hover .fleet-make,.fleet-pick:focus-visible .fleet-make{color:#fff;}
.fleet-pick:hover .fleet-years,.fleet-pick:focus-visible .fleet-years{color:#a0dcff;}
.fleet-pick:focus-visible{outline:2px solid #a0dcff;outline-offset:4px;border-radius:8px;}
.fleet-dot{flex:none;width:5px;height:5px;border-radius:999px;background:rgba(160,220,255,.35);}
.fleet-edge{position:absolute;inset-block:0;width:3rem;pointer-events:none;}
@media (min-width:640px){.fleet-edge{width:7rem;}}
.fleet-edge-l{left:0;background:linear-gradient(to right,#05070a,transparent);}
.fleet-edge-r{right:0;background:linear-gradient(to left,#05070a,transparent);}
@media (prefers-reduced-motion:reduce){
.fleet-track{animation:none;width:100%;justify-content:center;flex-wrap:wrap;}
.fleet-run:last-child{display:none;}
}
/* --- the numbers band --- */
.stat{position:relative;text-align:center;}
@media (min-width:640px){
.stat{padding:0 1.25rem}
.stat + .stat::before{content:"";position:absolute;left:0;top:.35rem;bottom:.35rem;
width:1px;background:rgba(255,255,255,.12);}
}
.stat-fig{margin:0;font-size:2.75rem;font-weight:600;letter-spacing:-.035em;line-height:1;
color:#fff;font-variant-numeric:tabular-nums;}
@media (min-width:640px){.stat-fig{font-size:3.25rem}}
.stat-cap{margin:.9rem 0 0;font-size:.6875rem;font-weight:500;text-transform:uppercase;
letter-spacing:.16em;color:#a0dcff;}
.stat-sub{margin:.55rem auto 0;max-width:15rem;font-size:.75rem;line-height:1.5;
color:rgba(255,255,255,.45);}
/* Each digit is its own 0-9 strip; rolling the strip is what gives the
figure the feel of a counter settling rather than a number fading in. */
.odo{display:inline-flex;align-items:baseline;}
.odo-d{display:inline-block;height:1em;overflow:hidden;vertical-align:baseline;}
.odo-col{display:block;transform:translateY(0);
transition:transform 1.15s cubic-bezier(.16,1,.3,1);will-change:transform;}
.odo-col b{display:block;height:1em;line-height:1;font-weight:inherit;}
.odo-fixed{display:inline-block;}
.stat-fig[data-live="1"]{position:relative;}
.stat-fig[data-live="1"]::after{content:"";position:absolute;left:50%;bottom:-.55rem;
width:2.5rem;height:2px;margin-left:-1.25rem;border-radius:2px;
background:linear-gradient(90deg,transparent,#a0dcff,transparent);
opacity:.75;animation:statScan 2.8s ease-in-out infinite;}
@keyframes statScan{0%,100%{transform:scaleX(.35);opacity:.35}50%{transform:scaleX(1);opacity:.85}}
@media (prefers-reduced-motion:reduce){
.odo-col{transition:none}
.stat-fig[data-live="1"]::after{animation:none}
}
/* --- the two-step marker --- */
.step{display:flex;align-items:center;gap:.5rem;}
.step-dot{display:grid;place-items:center;width:22px;height:22px;border-radius:999px;
border:1px solid rgba(255,255,255,.2);font-size:.6875rem;font-weight:600;
color:rgba(255,255,255,.5);
transition:background-color .3s,border-color .3s,color .3s;}
.step-label{font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.14em;
color:rgba(255,255,255,.45);transition:color .3s;}
.step{min-width:0;}
.step-line{flex:1;height:1px;min-width:.75rem;background:rgba(255,255,255,.14);}
@media (max-width:639px){
.step-label{display:none;}
.step[data-state="live"] .step-label{display:inline;}
}
.step[data-state="live"] .step-dot{border-color:#a0dcff;background:#a0dcff;color:#04161f;}
.step[data-state="live"] .step-label{color:#fff;}
.step[data-state="done"] .step-dot{border-color:rgba(160,220,255,.55);color:#a0dcff;}
.step[data-state="done"] .step-label{color:rgba(255,255,255,.65);}
.role-extra[hidden]{display:none !important;}
.role{border-radius:.75rem;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);
padding:.75rem 1rem;font-size:.8125rem;color:rgba(255,255,255,.62);
transition:border-color .2s,background-color .2s,color .2s;}
.role:hover{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.85);}
.role[aria-pressed="true"]{border-color:#a0dcff;background:rgba(160,220,255,.12);color:#fff;}
.seat-hello{margin:0 auto .9rem;max-width:26rem;font-size:.8125rem;line-height:1.5;
color:rgba(255,255,255,.82);}
.seat-rate{margin:0;display:grid;justify-items:center;gap:.5rem;
font-size:2.125rem;font-weight:600;letter-spacing:-.03em;line-height:1;color:#fff;}
.seat-list{margin:1.1rem auto 0;padding:0;list-style:none;display:grid;gap:.55rem;
max-width:30rem;}
.seat-list li{font-size:.8125rem;line-height:1.45;color:rgba(255,255,255,.78);}
.seat-rate span{font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
opacity:.55;}
.seat-gross{margin:.55rem 0 0;font-size:1rem;font-weight:600;letter-spacing:-.01em;color:#a0dcff;}
.seat-gross span{font-weight:400;font-size:.75rem;letter-spacing:.02em;color:rgba(255,255,255,.5);}
@media (min-width:640px){.seat-hello{font-size:.875rem}.seat-rate{font-size:2.75rem}.seat-rate span{font-size:.75rem}.seat-list li{font-size:.875rem}}
/* --- the controller --- */
.seat-bar{position:relative;height:56px;}
@media (min-width:640px){.seat-bar{height:62px}}
.glass{position:absolute;border-radius:999px;-webkit-backdrop-filter:blur(9px) saturate(126%) contrast(108%) brightness(103%);backdrop-filter:blur(9px) saturate(126%) contrast(108%) brightness(103%);}
.seat-track{inset:4px 0;background:rgb(24 55 82 / .31);border:1px solid rgb(255 255 255 / .2);
box-shadow:0 14px 38px rgb(4 24 43 / .16),0 2px 7px rgb(4 24 43 / .1),
inset 1px 1px 0 rgb(255 255 255 / .48),inset -1px -1px 0 rgb(21 49 73 / .14),
inset 0 0 0 .5px rgb(255 255 255 / .16);}
.seat-capsule{top:0;bottom:0;left:var(--cap-left,0%);width:var(--cap-width,33.333%);
background:rgb(246 251 255 / .24);border:1px solid rgb(255 255 255 / .28);
-webkit-backdrop-filter:blur(13px) saturate(128%) contrast(107%) brightness(105%);
backdrop-filter:blur(13px) saturate(128%) contrast(107%) brightness(105%);
box-shadow:0 11px 28px rgb(4 24 43 / .17),0 2px 6px rgb(4 24 43 / .1),
inset 1px 1px 0 rgb(255 255 255 / .62),inset -1px -1px 0 rgb(20 49 73 / .18),
inset 0 0 12px rgb(255 255 255 / .055);
transition:left .62s var(--ease),width .62s var(--ease);}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:radial-gradient(120% 150% at var(--glass-x,24%) var(--glass-y,8%),rgb(255 255 255 / .25),rgb(255 255 255 / 0) 53%),
linear-gradient(115deg,rgb(255 255 255 / .10),rgb(255 255 255 / 0) 42%);}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
background:conic-gradient(from 225deg,#7fe3ff,rgb(255 255 255 / .35),#ffffff,#ffd7e6,rgb(255 255 255 / .35),#7fe3ff);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;opacity:.27;}
.seat-capsule::after{opacity:.3;}
.seat-cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;}
.seat-cell{height:100%;padding:0 .5rem;border:0;background:none;cursor:pointer;color:rgba(255,255,255,.62);
font-family:inherit;font-size:.8125rem;font-weight:500;letter-spacing:-.01em;
border-radius:999px;transition:color .3s var(--ease);}
@media (min-width:640px){.seat-cell{font-size:.9375rem;padding:0 .75rem}}
.seat-cell:hover{color:rgba(255,255,255,.9);}
.seat-cell[aria-pressed="true"]{color:#fff;}
@media (prefers-reduced-motion:reduce){
.seat-offer,.seat-capsule{transition-duration:1ms;transition-delay:0ms}
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee{animation:marquee 52s linear infinite;}
.marquee:hover{animation-play-state:paused;}
/* Marks arrive in every brand colour going. Knocking them back to a single
tone keeps the rail quiet and stops it competing with the page. */
.mark img{filter:grayscale(1) brightness(0) invert(1);opacity:.5;transition:opacity .25s ease;}
.mark:hover img{opacity:.95;}
@media (prefers-reduced-motion:reduce){.marquee{animation:none;flex-wrap:wrap;justify-content:center;width:auto}}
.stat-num{font-family:'Silkscreen',cursive;font-weight:400;}
::-webkit-scrollbar{width:0;height:0;}
/* The way out of the clip. Glass on the scrim so it belongs to the overlay
rather than sitting on it, and it inverts to solid white on hover so the
target is unmistakable the moment the pointer finds it. */
.clip-back:hover span{background:rgba(0,0,0,.08);}
.clip-back:focus-visible{outline:2px solid #fff;outline-offset:3px;}
/* A phone can refuse to play video for reasons the page never learns about:
Low Power Mode, a per-tab decoder limit, a carrier proxy that drops the
range request. The hero must not be a black rectangle when that happens,
so a still of the opening segment — graded to match what the video looks
like once the plate filter is applied — sits underneath both elements. */
#plate{background:#05070a center/cover no-repeat url("../media/hero-poster.jpg");}
@media (max-width:639px){#plate{background-image:url("../media/hero-poster-p.jpg");}}