/* SkyTour homepage only (2026-10-31). After the hero the page answers "why would I do this?" in the order a buyer asks,
   over the real route seen from above, Lake Travis to downtown, sliding past slower than the page. The hero's water rises away and thins out over it.
   Everything that moves needs html.fx; without it (no JS, reduced motion) the page is a plain stacked read over one still frame. */
.pg-home { background: #18110E; color: #fff; }
.pg-home .sec { overflow: clip; background: none; }
.pg-home .ftr { position: relative; background: #18110E; }
/* buttons and header: squared and quiet, as on the funnel */
.pg-home .btn { border-radius: 4px; }
.btn.go { min-height: 56px; padding: 0 32px; background: var(--on-dark); color: var(--night); font: 600 17px/1 var(--f-body); box-shadow: none; text-shadow: none; transition: background .2s; }
.btn.go:hover { background: #fff; color: var(--night); }
.pg-home .hdr-in { justify-content: space-between; }
.pg-home .hdr .btn-primary { min-height: 40px; background: none; border: 1px solid rgb(255 255 255 / .6); color: #fff; box-shadow: none; }
.pg-home .hdr .btn-primary:hover { background: rgb(255 255 255 / .12); border-color: #fff; }
.pg-home .menu-btn { border-radius: 4px; background: none; }
.btn.go:focus-visible, .oc:focus-visible, .step button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ── the land: moves slower than the page, with haze moving faster over it. Without motion or on data saver, one still stretch of it ── */
.bg { position: fixed; inset: 0 0 auto; height: 100lvh; z-index: -1; overflow: hidden; pointer-events: none; background: url(/images/land/still-p.webp) center / cover #18110E; }
@media (min-aspect-ratio: 1/1) { .bg { background-image: url(/images/land/still-l.webp); } }
.fx .bg:not(.still) { background: #18110E; }
.land { position: absolute; top: 0; left: 50%; width: max(120vw, 467px); margin-left: calc(max(120vw, 467px) / -2); will-change: transform; background: #18110E; }
.land img { position: absolute; left: 0; width: 100%; }
.haze { position: absolute; inset: 0 0 auto; height: 260lvh; background: url(/images/land/haze.webp) 0 0 / 150vmax 130lvh repeat; will-change: transform; pointer-events: none; }
.haze-a { opacity: .34; }
.haze-b { opacity: .24; background-position: 40vmax 30lvh; background-size: 110vmax 130lvh; }
.fly-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(24 17 14 / .66), rgb(24 17 14 / .56) 45%, rgb(24 17 14 / .68)); }

/* ── type: headings stay readable over the moving land ── */
.words, .hd h2, .pan h3, .rsn-l h3, .ev-l b, .pg-home .sec .sh h2 { font-weight: 600; letter-spacing: -.006em; }
.words, .hd h2, .hd p, .pan-b, .rsn-l, .ev-l, .qs, .good p, .cost-more, .pg-home .sec .sh h2, .pg-home .tp-head { text-shadow: 0 1px 3px rgb(24 17 14 / .7), 0 0 22px rgb(24 17 14 / .6); }
.hd h2 { margin: 0; color: #fff; font-size: clamp(38px, 5.2vw, 72px); line-height: 1.04; }
.hd p { margin: 14px 0 0; max-width: 44ch; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.42; color: #fff; font-weight: 500; }
.w { display: inline-block; overflow: clip; overflow-clip-margin: .2em; vertical-align: top; padding-inline: .03em; margin-inline: -.03em; }
.w > span { display: inline-block; }
/* WebKit can't balance a heading made of .w boxes: it breaks after almost every word */
.fx .hd h2, .fx .sh h2, .fx .closing h2 { text-wrap: wrap; }
.fx .hd.rv, .fx .sh.rv, .fx .closing-in.rv { opacity: 1; transform: none; }
.fx .hd h2 .w > span, .fx .sh h2 .w > span, .fx .closing h2 .w > span { transform: translateY(112%); transition: transform 1.05s var(--ease); transition-delay: calc(var(--w) * 55ms); }
.fx .hd.in h2 .w > span, .fx .sh.in h2 .w > span, .fx .closing-in.in h2 .w > span { transform: none; }
.fx .hd p { opacity: 0; transition: opacity .9s var(--ease) .35s; }
.fx .hd.in p { opacity: 1; }

/* ── hero: the dusk shot edge to edge. Under motion it is four layers (home.js), and only the top and the water's dark end darken, for the header and the words ── */
.opn { position: relative; background: #18110E; color: #fff; }
.opn-pin { position: relative; height: 100svh; overflow: hidden; }
.opn-ph { position: absolute; inset: 0; margin: 0; }
.opn-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.opn-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(24 17 14 / .2) 0, transparent 12%), linear-gradient(0deg, rgb(24 17 14 / .62) 0, transparent 40%); }
.opn-in { position: absolute; inset: auto 0 0; z-index: 3; padding-bottom: clamp(18px, 4vw, 60px); }
.opn h1 { margin: 0 0 18px; max-width: 5.6em; color: #fff; font-size: clamp(50px, 13.4vw, 104px); font-weight: 500; line-height: 1; letter-spacing: -.016em; text-wrap: wrap; }
.opn-sub { margin: 0; max-width: 34ch; font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; line-height: 1.42; color: #fff; }
.opn-acts { display: grid; gap: 4px; margin-top: 24px; }
.opn-acts .btn { width: 100%; }
.opn-acts .btn-ghost-light { min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; color: #fff; font-size: 15px; font-weight: 500; text-decoration: underline; text-decoration-color: rgb(255 255 255 / .5); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.opn-acts .btn-ghost-light:hover { background: none; text-decoration-color: #fff; }
.fx .opn { height: 236lvh; background: none; }
.fx .reason { position: relative; z-index: 2; margin-top: -36lvh; }
.fx .opn-pin { position: sticky; top: 0; height: 100lvh; }
.fx .opn-ph { transform-origin: 50% 46%; animation: settle 2.4s var(--ease) both; }
.fx .opn-ph::after { background: linear-gradient(180deg, rgb(24 17 14 / .2) 0, transparent 12%); z-index: 2; }
.ly { position: absolute; inset: 0; will-change: transform; opacity: 0; transition: opacity .6s; }
.ready .ly { opacity: 1; }
.ready > picture { opacity: 0; transition: opacity .6s .6s; }
.ly-sky { clip-path: inset(0 0 28% 0); }
/* a slow drift, nearer things moving more, so the hero is never a frozen picture */
.fx .ly-sky img { transform-origin: 57% 50%; animation: drift-sky 34s ease-in-out infinite alternate; }
.fx .ly-city img { transform-origin: 57% 50%; animation: drift-city 34s ease-in-out infinite alternate; }
.fx .ly-trees img, .fx .ly-water img { transform-origin: 57% 54%; animation: drift-near 34s ease-in-out infinite alternate; }
@keyframes drift-sky { from { transform: scale(1.03) translateX(.7%); } to { transform: scale(1.06) translateX(-.7%); } }
@keyframes drift-city { from { transform: scale(1.015) translateX(.25%); } to { transform: scale(1.03) translateX(-.25%); } }
@keyframes drift-near { from { transform: scale(1) translateX(-.15%); } to { transform: scale(1.012) translateX(.15%); } }
/* the words sit on the dark end of the water and go up with it */
.ly-water::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgb(13 13 15 / .7) 0, transparent 42%); }
/* below the frame the water runs on, then thins out over the land */
.ly-water::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 70lvh; background: linear-gradient(180deg, #0d0d0f 0, #0d0d0f 20%, rgb(13 13 15 / .86) 38%, rgb(13 13 15 / .5) 66%, transparent); }
.fx .opn-in { inset: auto 0 calc(100lvh - 100svh); will-change: transform, opacity; }
.fx .opn .w > span { animation: rise 1.1s var(--ease) both; animation-delay: calc(.25s + var(--w) * 70ms); }
.fx .opn-sub { animation: arrive 1s var(--ease) .75s both; }
.fx .opn-acts { animation: arrive .9s var(--ease) .95s both; }
@keyframes settle { from { scale: 1.1; filter: brightness(.55); } }
@keyframes rise { from { transform: translateY(112%); } }
@keyframes arrive { from { opacity: 0; transform: translateY(12px); } }

/* ── the bubble window: the real airplane. The photo settles as it comes up and a ring draws round the window ── */
.bub { padding-block: clamp(40px, 6vw, 90px); }
.bub-grid { display: grid; gap: clamp(22px, 3vw, 36px); }
.bub-ph { position: relative; margin: 0 calc(-1 * var(--gutter)); overflow: clip; }
.bub-in { position: relative; will-change: transform; transform-origin: 53% 23%; }
.bub-ph img { display: block; width: 100%; height: auto; }
.bub-ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--sky); stroke-width: 10; }
.fx .bub-ring ellipse { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s var(--ease) .25s; }
.fx .bub-ph.on .bub-ring ellipse { stroke-dashoffset: 0; }
.bub-ph figcaption { position: absolute; left: var(--gutter); bottom: 16px; padding: 7px 12px; background: var(--night); color: #fff; font-size: 15px; font-weight: 600; }
.bub-go .btn { width: 100%; }
@media (min-width: 900px) {
  .bub-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); grid-template-rows: auto 1fr; column-gap: clamp(40px, 6vw, 90px); align-items: start; }
  .bub-ph { grid-column: 2; grid-row: 1 / 3; margin: 0; border-radius: 4px; }
  .bub-ph figcaption { left: 16px; }
  .bub-go .btn { width: auto; }
}

/* ── what the evening feels like ── */
.xp { padding-block: clamp(50px, 7vw, 100px); }
.xp-ph { margin: clamp(22px, 3vw, 40px) 0 0; }
.xp-ph img { display: block; width: 100%; height: auto; border-radius: 4px; }
.xp-in { display: grid; gap: 34px; margin-top: 26px; }
.xp h3 { margin: 0 0 8px; color: #fff; font-size: clamp(25px, 2.6vw, 34px); font-weight: 600; line-height: 1.15; }
.xp-in, .xp-note { text-shadow: 0 1px 3px rgb(24 17 14 / .7), 0 0 22px rgb(24 17 14 / .6); }
.xp-in p { margin: 0; font-size: 18px; line-height: 1.45; font-weight: 500; }
.xp-adds { list-style: none; display: grid; gap: 16px; margin: 14px 0 0; padding: 0; }
.xp-adds b { display: block; font-size: 18px; font-weight: 600; line-height: 1.3; }
.xp-adds span { display: block; font-size: 16px; line-height: 1.4; font-weight: 500; }
.xp-in .xp-note { margin-top: 16px; font-size: 16px; }
@media (min-width: 900px) { .xp-in { grid-template-columns: 1fr 1fr; gap: 60px; } }

/* ── the reason ── */
.reason { padding: clamp(70px, 10vw, 150px) 0 clamp(50px, 7vw, 100px); }
.words { margin: 0; max-width: 20ch; color: #fff; font-family: var(--f-display); font-size: clamp(38px, 5.6vw, 82px); line-height: 1.08; }
.words span { opacity: var(--lit, 1); }

/* ── what's the occasion? ── */
.pick { padding-bottom: clamp(60px, 8vw, 110px); scroll-margin-top: 70px; }
.oclist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 22px 0 18px; }
.oc { min-height: 58px; padding: 8px 12px; border: 1px solid rgb(255 255 255 / .34); border-radius: 8px; background: rgb(24 17 14 / .46); color: #fff; font: 600 15px/1.2 var(--f-body); text-align: left; cursor: pointer; transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); }
.oc:hover { border-color: #fff; }
.oc:active { transform: scale(.98); }
.oc.on { background: var(--sky); border-color: var(--sky); color: #18110E; }
.pan { display: grid; gap: 16px; }
.pan + .pan { margin-top: 28px; }
.pan-m { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: rgb(24 17 14 / .3); box-shadow: 0 24px 50px -28px rgb(0 0 0 / .85); }
.pan-m > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pan-gift { display: grid; place-items: center; }
.pan-gift .gcard { margin: 0; width: min(240px, 66%); transform: rotate(-3deg); }
.pan h3 { margin: 0 0 8px; color: #fff; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; }
.pan-b > p { margin: 0 0 16px; font-size: 17px; line-height: 1.42; color: #fff; font-weight: 500; }
.pan-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; }
.pan-buy small { display: block; font-size: 14px; color: #fff; }
.pan-buy b { display: block; font: 600 26px/1.15 var(--f-display); font-variation-settings: "opsz" 12; }
.pan-buy .btn { min-height: 50px; }
/* with JS only the chosen panel shows; without it they all read in a row */
.js-pick .pan:not(.on) { display: none; }
.js-pick .pan + .pan { margin-top: 0; }
.js-pick .pan.on .pan-m > img, .js-pick .pan.on .pan-gift .gcard { animation: pan-photo 1s var(--ease) both; }
.js-pick .pan.on .pan-b > * { animation: arrive .7s var(--ease) both; }
.js-pick .pan.on .pan-b > :nth-child(2) { animation-delay: .06s; }
.js-pick .pan.on .pan-b > :nth-child(3) { animation-delay: .12s; }
@keyframes pan-photo { from { scale: 1.1; opacity: .3; } }

/* ── why this ── */
.rsn { padding-block: clamp(50px, 7vw, 100px); }
.rsn-l { list-style: none; margin: 26px 0 0; padding: 0; display: grid; }
.rsn-l li { padding: 20px 0; border-top: 1px solid rgb(255 255 255 / .22); }
.rsn-l h3 { margin: 0 0 5px; color: #FFE6C8; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.08; }
.rsn-l p { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.42; color: #fff; font-weight: 500; }

/* ── the price ── */
.cost { padding-block: clamp(50px, 7vw, 100px); }
.calc { margin-top: 24px; padding: 22px 18px; border-radius: 8px; background: rgb(24 17 14 / .62); text-align: center; }
.calc-q { margin: 0 0 16px; font-size: 16px; font-weight: 600; }
.seats { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }
.seats i { width: 30px; height: 40px; border-radius: 45% 45% 40% 40%; border: 1.5px solid rgb(255 255 255 / .34); transition: background .35s, border-color .35s, box-shadow .35s, transform .45s var(--ease); }
.seats i.on { background: linear-gradient(180deg, #F7DCBC, #E8913F); border-color: #F7DCBC; box-shadow: 0 0 18px -2px rgb(232 145 63 / .8); transform: translateY(-2px); }
.step { display: inline-flex; align-items: center; gap: 14px; }
.step button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .4); background: none; color: #fff; font: 500 24px/1 var(--f-body); cursor: pointer; transition: background .2s, opacity .2s; }
.step button:hover { background: rgb(255 255 255 / .1); }
.step button[disabled] { opacity: .3; cursor: default; }
.step output { min-width: 86px; font-size: 17px; font-weight: 600; }
.calc-a { margin: 16px 0 2px; font-size: 18px; }
.calc-a b { font: 600 clamp(56px, 7vw, 84px)/1 var(--f-display); font-variation-settings: "opsz" 12; color: var(--sky); font-variant-numeric: tabular-nums; }
.calc-n { margin: 6px 0 0; font-size: 15px; color: rgb(255 255 255 / .86); }
.cost-more { margin: 16px 0 0; font-size: 16px; color: #fff; font-weight: 500; }

/* ── your evening: the sun moves down the list as you scroll ── */
.ev { padding-block: clamp(50px, 7vw, 100px); }
.ev-l { position: relative; list-style: none; margin: 30px 0 0; padding: 0 0 0 34px; display: grid; gap: clamp(30px, 4vw, 44px); }
.ev-rail { position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: rgb(255 255 255 / .3); }
.ev-rail i { display: none; }
.ev-l li { display: grid; gap: 2px; }
.ev-l small { font-size: 15px; font-weight: 600; color: #FFE6C8; }
.ev-l b { font-family: var(--f-display); font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; }
.ev-l li > span { font-size: 17px; line-height: 1.4; color: #fff; font-weight: 500; }
.fx .ev-l li { opacity: .62; transition: opacity .6s var(--ease); }
.fx .ev-l li.lit { opacity: 1; }
.fx .ev-rail i { display: block; position: absolute; top: -7px; left: -7px; width: 15px; height: 15px; border-radius: 50%; background: #FFE2B5; box-shadow: 0 0 22px 7px rgb(232 145 63 / .85), 0 0 60px 18px rgb(232 145 63 / .4); will-change: transform, opacity; }

/* ── the questions ── */
.tr { padding-block: clamp(50px, 7vw, 100px); }
.qs { margin: 24px 0 0; display: grid; }
.qs > div { padding: 16px 0; border-top: 1px solid rgb(255 255 255 / .2); }
.qs dt { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.qs dd { margin: 0; max-width: 60ch; font-size: 16px; line-height: 1.45; color: #fff; font-weight: 500; }
.good { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .2); }
.good-aw { display: flex; flex: none; gap: 8px; }
.good-aw img { width: 54px; height: auto; display: block; }
.good p { margin: 0; font-size: 15px; line-height: 1.42; color: #fff; font-weight: 500; }
.good a { color: var(--sky); }

/* ── the flights ── */
.pg-home .sec .sh .eyebrow { display: none; }
.pg-home .sec .sh h2 { color: #fff; font-size: clamp(38px, 4.8vw, 66px); }
.pg-home .sec .sh h2 em { color: var(--sky); }
.pg-home .tab { background: rgb(24 17 14 / .5); border-color: rgb(255 255 255 / .24); color: #fff; }
.pg-home .tab small { color: rgb(255 255 255 / .74); }
.pg-home .tab:hover { border-color: rgb(255 255 255 / .6); }
.pg-home .tab.on { background: var(--sky); border-color: var(--sky); color: #18110E; }
.pg-home .tab.on small { color: #5C4333; }
.pg-home .tp-head > p { color: #fff; font-weight: 500; }
.pg-home .from { color: rgb(255 255 255 / .86); }
.pg-home .from strong { color: #fff; }
.pg-home .tp-meta .t-more { color: var(--sky); }
.pg-home .t-stub::before, .pg-home .t-stub::after { background: #18110E; box-shadow: none; }
.pg-home .ticket { box-shadow: 0 30px 60px -32px rgb(0 0 0 / .9); }
.pg-home .ticket:hover { transform: translateY(-6px); }
.pg-home .t-media:has(.badge) .t-kind { display: none; }
.fx .t-media img { scale: 1.16; transition: scale 1.5s var(--ease), transform 1.2s var(--ease); }
.fx .ticket.in .t-media img { scale: 1; }
.pg-home .tpanel { animation: panel .7s var(--ease); }
@keyframes panel { from { opacity: 0; transform: translateY(16px); } }

/* the sun comes back up at the end */
.pg-home .closing { background: linear-gradient(180deg, transparent 0%, #4A2419 32%, #A44C2C 68%, #E08A45 100%); }
.pg-home .closing .topo, .pg-home .closing .mono { display: none; }
.pg-home .closing h2 { font-weight: 500; }
.pg-home .closing h2 em { color: var(--sky); }
.fx .closing-in > p, .fx .closing-in > .cta-row { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease) .4s, transform .9s var(--ease) .4s; }
.fx .closing-in.in > p, .fx .closing-in.in > .cta-row { opacity: 1; transform: none; }

@media (min-width: 761px) {
  .opn-acts { display: flex; align-items: center; gap: 26px; margin-top: 30px; }
  .opn-acts .btn { width: auto; }
  .oclist { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 820px; }
  .pan { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 36px; align-items: center; }
  .rsn-l { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .cost-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 56px; align-items: center; }
  .cost-in .calc { margin: 0; grid-row: span 2; }
  .cost-more { margin: 0; align-self: start; }
  .tr-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 8px 56px; }
  .qs { margin: 0; }
  .good { grid-column: 2; }
}
@media (max-width: 760px) {
  .pan-buy .btn { width: 100%; }
}
/* a phone on its side: everything still fits on the first screen */
@media (max-height: 560px) and (orientation: landscape) {
  .opn h1 { margin-bottom: 8px; max-width: none; font-size: 40px; }
  .opn-acts { margin-top: 12px; }
  .btn.go { min-height: 48px; }
}