/* Updraught: the page seen from the front seat. Azure glass, graphite metal, one cream action. */
@font-face {
  font-family: "Anek Latin";
  src: url("/assets/fonts/specimen/anek-latin-var.woff2") format("woff2");
  font-weight: 100 800; font-stretch: 75% 125%; font-style: normal; font-display: swap;
}

body.spec-updraught { margin: 0; background: #3A9BE6; }

.ud-root {
  --ud-sky: #3A9BE6; --ud-ink: #061A2E; --ud-cream: #FFF3C4;
  --ud-frame: #22303C; --ud-frame-dk: #121B24; --ud-frame-lit: #5D6E7D; --ud-gasket: #070C11;
  --ud-sky-hi: #7CC0F2; --ud-sky-lo: #2F8DDA; --ud-scrim: rgba(6, 26, 46, .6); --ud-mist: #DCE7F1;
  --ud-ease: cubic-bezier(.33, 0, .15, 1);
  --ud-post: clamp(8px, 2.6vw, 44px);
  --ud-safe: max(24px, calc(var(--ud-post) + 48px));
  --ud-nav-h: 56px;
  --ud-sill-h: 22px;
  --ud-h1: clamp(2.5rem, min(7.4vw, 11.5svh), 7rem);
  --ud-gap: clamp(12px, 2vw, 28px);
  --ud-pad: clamp(72px, 12svh, 176px);
  --ud-bk: 1;
  position: relative;
  background: var(--ud-sky);
  color: var(--ud-ink);
  font-family: "Anek Latin", "Helvetica Neue", Arial, system-ui, sans-serif;
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  font-weight: 420; font-stretch: 100%;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  timeline-scope: --ud-t1, --ud-t2, --ud-t3, --ud-t4, --ud-t5;
}
.ud-root *, .ud-root *::before, .ud-root *::after { box-sizing: border-box; }
.ud-root :focus-visible { outline: 2px solid var(--ud-cream); outline-offset: 3px; box-shadow: 0 0 0 5px var(--ud-ink); }
.ud-root p { max-width: 62ch; }
.ud-root [hidden] { display: none !important; }
.ud-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ud-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ud-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- the canopy: machined posts and curved glass, fixed at the edges of the screen ---------- */
.ud-canopy {
  position: fixed; left: 0; right: 0; bottom: 0;
  top: calc(var(--bar-h, 40px) + var(--ud-nav-h));
  z-index: 30; pointer-events: none; overflow: hidden;
}
.ud-bank { position: absolute; inset: 0; transform-origin: 50% 50%; }
.ud-bank-h { will-change: transform; }
.ud-cp-metal, .ud-cp-glass { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ud-cp-metal { z-index: 2; filter: blur(.7px); }
.ud-cp-glass { z-index: 0; filter: blur(7px); }
.ud-cp-glass path, .ud-cp-gasket { vector-effect: non-scaling-stroke; }
.ud-cp-gasket { fill: none; stroke: rgba(7, 12, 17, .85); stroke-width: 1.5px; }
.ud-cp-fres { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 44px; }
.ud-cp-refl { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 5px; }
.ud-cp-streak { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 18px; stroke-linecap: round; }
.ud-latch, .ud-hinge { position: absolute; z-index: 3; overflow: visible; filter: blur(.5px); }
.ud-latch { width: 14px; height: 58px; left: calc(2.56vw - 7px); top: calc(58% - 29px); }
.ud-hinge { width: 10px; height: 22px; }
.ud-hinge-1 { right: calc(2.14vw - 5px); top: calc(30% - 11px); }
.ud-hinge-2 { right: calc(2.43vw - 5px); top: calc(70% - 11px); }
.ud-hw-well { fill: var(--ud-frame-dk); stroke: var(--ud-gasket); stroke-width: .8; }
.ud-hw-edge { fill: none; stroke: var(--ud-frame-lit); stroke-width: 1; stroke-linecap: round; }
.ud-hw-lever { fill: #2E3D4A; stroke: var(--ud-frame-lit); stroke-width: .7; }
.ud-hw-pivot { fill: #2C3B48; stroke: var(--ud-frame-lit); stroke-width: .8; }
.ud-hw-screw { fill: var(--ud-gasket); stroke: var(--ud-frame-lit); stroke-width: .6; }
.ud-hw-barrel { fill: #2A3845; stroke: var(--ud-gasket); stroke-width: 1; }
.ud-hw-seam { fill: none; stroke: var(--ud-gasket); stroke-width: 1; }

/* ---------- the nav: the canopy's brow ---------- */
.ud-nav {
  position: sticky; top: var(--bar-h, 40px); z-index: 40;
  height: var(--ud-nav-h);
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px);
  padding: 0 calc(var(--ud-post) + 20px);
  background: linear-gradient(180deg, #33434F 0, #26343F 12%, var(--ud-frame) 55%, #19242D 100%);
  color: var(--ud-mist);
}
.ud-nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: linear-gradient(180deg, var(--ud-frame-lit) 0 1.5px, var(--ud-gasket) 1.5px 3px);
}
.ud-brand { display: flex; align-items: center; gap: 10px; color: var(--ud-mist); text-decoration: none; margin-right: auto; }
.ud-mark { height: 28px; width: 33px; overflow: visible; flex: none; }
.ud-mk-rotor { fill: none; stroke: var(--ud-mist); stroke-width: 4.5; }
.ud-mk-mast { fill: var(--ud-mist); }
.ud-mk-chin { fill: var(--ud-sky); }
.ud-mk-glint { fill: none; stroke: var(--ud-cream); stroke-width: 2.5; stroke-linecap: round; }
.ud-brand-name { font-size: 1.125rem; font-weight: 780; font-stretch: 118%; letter-spacing: .01em; line-height: 1; }
.ud-nav-links { display: flex; gap: clamp(16px, 2.2vw, 32px); list-style: none; margin: 0; padding: 0; }
.ud-nav-links a { color: var(--ud-mist); text-decoration: none; font-size: .9375rem; font-weight: 500; font-stretch: 104%; padding: 6px 0; border-bottom: 1px solid transparent; }
.ud-nav-links a:hover { border-bottom-color: var(--ud-cream); }
.ud-pill, .ud-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 20px; border-radius: 999px;
  background: var(--ud-cream); color: var(--ud-ink); text-decoration: none; border: 0;
  font: inherit; font-size: 1rem; font-weight: 650; font-stretch: 112%; letter-spacing: .01em; line-height: 1;
  cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 -2px 0 rgba(6, 26, 46, .18);
  transition: background-color .2s var(--ud-ease);
}
.ud-pill:hover, .ud-btn:hover { background: #FFF9DE; }
.ud-pill-short { display: none; }
.ud-menu { display: none; position: relative; }
.ud-menu summary {
  list-style: none; display: flex; align-items: center; gap: 4px; height: 38px; padding: 0 6px 0 10px;
  color: var(--ud-mist); font-size: .9375rem; font-weight: 600; cursor: pointer; border-radius: 999px;
}
.ud-menu summary::-webkit-details-marker { display: none; }
.ud-menu[open] summary .ud-ic { transform: rotate(180deg); }
.ud-menu ul {
  position: absolute; right: -8px; top: calc(100% + 10px); min-width: 220px; margin: 0; padding: 8px;
  list-style: none; background: var(--ud-frame); border: 1px solid var(--ud-frame-lit); border-radius: 16px;
}
.ud-menu a { display: block; padding: 12px 14px; color: var(--ud-mist); text-decoration: none; font-weight: 500; border-radius: 10px; }
.ud-menu a:hover { background: #2C3B48; }

/* ---------- the hero: sky and horizon ahead, the headline on the sill, the chin window at your feet ---------- */
.ud-hero {
  position: relative;
  display: grid;
  grid-template-columns: var(--ud-safe) minmax(0, 1fr) var(--ud-safe);
  --ud-sill-at: 40svh;
  --ud-type-pad: 32px;
  --ud-type-lines: 1.76;
  --ud-kick: 44px;
  --ud-type-h: max(calc(var(--ud-sill-at) - var(--bar-h, 40px) - var(--ud-nav-h)), calc(var(--ud-type-pad) + var(--ud-kick) + var(--ud-type-lines) * var(--ud-h1) + 10px));
  --ud-roll: 0deg;
  grid-template-rows:
    var(--ud-type-h)
    var(--ud-sill-h)
    max(58svh, calc(100svh - var(--bar-h, 40px) - var(--ud-nav-h) - var(--ud-type-h) - var(--ud-sill-h)))
    auto;
}
/* the forward view: sky, the far horizon, the sun on the glass */
.ud-fwd {
  grid-area: 1 / 1 / 2 / 4; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #2A88D6 0%, #3A9BE6 42%, #5FB0EC 78%, #86C3F0 100%);
}
.ud-horizon {
  position: absolute; left: -25%; right: -25%; bottom: -60%; height: calc(60% + 34px);
  transform: rotate(var(--ud-roll)); transform-origin: 50% 0;
}
.ud-horizon i { position: absolute; left: 0; right: 0; display: block; }
.ud-hz-haze { top: -46px; height: 46px; background: linear-gradient(180deg, rgba(190, 224, 247, 0), rgba(205, 231, 248, .75)); }
.ud-hz-sea { top: 0; bottom: 0; background: linear-gradient(180deg, #7FB3D9 0, #4F90C4 30%, #3F80B8 100%); }
.ud-hz-land {
  top: -3px; height: 6px; left: 8%; right: 54%;
  background: linear-gradient(90deg, rgba(88, 118, 136, 0), rgba(88, 118, 136, .55) 20%, rgba(96, 124, 138, .5) 70%, rgba(88, 118, 136, 0));
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; filter: blur(1px);
}
.ud-fwd-sun {
  position: absolute; right: -8%; top: -60%; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 252, 238, .5), rgba(255, 250, 230, .18) 45%, rgba(255, 250, 230, 0));
}
.ud-fwd-gloss {
  position: absolute; inset: 0;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .09) 36%, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .05) 76%, rgba(255, 255, 255, 0) 82%);
}
.ud-root .ud-kicker {
  grid-area: 1 / 2; align-self: end; position: relative; z-index: 1;
  margin: 0 0 calc(var(--ud-type-lines) * var(--ud-h1) + 22px); max-width: none;
  font-size: clamp(1rem, 1.15vw, 1.125rem); font-weight: 520; font-stretch: 104%; line-height: 1.4;
}
.ud-h1 {
  grid-area: 1 / 2; align-self: end; position: relative; z-index: 1;
  margin: 0 0 6px;
  font-size: var(--ud-h1); line-height: .88; letter-spacing: -.015em;
  font-weight: 780; font-variation-settings: "wdth" 118;
  color: var(--ud-ink);
}
.ud-h1-a, .ud-h1-b { display: block; white-space: nowrap; }
.ud-br-sm { display: none; }

/* on the sill: the way on and the one action at the right, the hint engraved on the rail at the left */
.ud-acts {
  grid-area: 1 / 2; align-self: end; justify-self: end; position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  margin: 0 0 12px;
}
.ud-to-route {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 0;
  color: var(--ud-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
  font-size: 1rem; font-weight: 620; font-stretch: 110%; line-height: 1.2; white-space: nowrap;
}
.ud-to-route:hover { text-decoration-thickness: 2.5px; }
.ud-to-route .ud-ic { width: 18px; height: 18px; stroke-width: 1.8; }
.ud-acts-btn { height: 44px; padding: 0 22px; font-size: 1.0625rem; }
.ud-root .ud-hint {
  grid-area: 2 / 2; align-self: end; justify-self: start; position: relative; z-index: 3;
  margin: 0 0 3px; padding: 1px 8px 0; max-width: none; border-radius: 3px;
  background: var(--ud-frame); box-shadow: inset 0 1px 0 rgba(7, 12, 17, .55), 0 1px 0 rgba(93, 110, 125, .35);
  color: var(--ud-cream); font-size: .75rem; font-weight: 560; font-stretch: 110%; letter-spacing: .03em; line-height: 14px; white-space: nowrap;
  opacity: 0; transition: opacity .6s var(--ud-ease);
}
.ud-root .ud-hint.is-on { opacity: 1; }

/* the sill: a machined rail from post to post */
.ud-sill {
  grid-area: 2 / 1 / 3 / 4; position: relative; z-index: 2;
  background: linear-gradient(180deg,
    #7D8D9A 0 1px, var(--ud-frame-lit) 1px 2.5px, #3E4E5B 2.5px 5px, #2E3C48 5px 8px, var(--ud-frame) 8px 15px, #18232C 15px calc(100% - 1.5px), var(--ud-gasket) calc(100% - 1.5px));
}
.ud-sill-bolt { position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6F7F8C, #1A252E 70%); box-shadow: 0 0 0 1px #0B1117; }
.ud-sill-bolt:first-child { left: calc(var(--ud-post) + 2.2vw); }
.ud-sill-bolt:last-child { right: calc(var(--ud-post) + 2.2vw); }
.ud-tilt {
  grid-area: 2 / 3; align-self: center; justify-self: start; z-index: 3; position: relative;
  width: 44px; height: 44px; padding: 0; margin-left: -22px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--ud-gasket);
  background: radial-gradient(circle at 42% 34%, #52626F 0, #2C3A46 45%, #18222B 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 3px #1A252E;
  color: var(--ud-cream); cursor: pointer;
}
.ud-tilt[aria-pressed="true"] { background: radial-gradient(circle at 42% 34%, #FFF9DE 0, var(--ud-cream) 55%, #E6D9A6 100%); color: var(--ud-ink); }
.ud-tilt .ud-ic { width: 22px; height: 22px; }

/* the footwell around the chin bubble */
.ud-well {
  grid-area: 3 / 1 / 4 / 4;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(93, 110, 125, .35), rgba(93, 110, 125, 0) 60%),
    linear-gradient(180deg, #1D2831 0, #151E26 40%, #0E151B 100%);
}
.ud-chin {
  grid-area: 3 / 1 / 4 / 4; justify-self: center; position: relative;
  width: min(82vw, 1200px); margin-top: 14px;
  outline: none; cursor: grab;
}
.ud-chin:focus-visible { outline: none; box-shadow: none; }
.ud-chin:focus-visible .ud-chin-rim path { stroke: var(--ud-cream); stroke-width: 2.5px; }
.ud-chin-glass { position: absolute; inset: 0; clip-path: url(#ud-clip-d); background: #1B2630; overflow: hidden; }
.ud-chin-poster, .ud-chin-poster img { display: block; width: 100%; height: 100%; }
.ud-chin-poster img { object-fit: cover; object-position: 50% 42%; }
.ud-chin-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .45s var(--ud-ease); touch-action: pan-y; }
.ud-chin.is-live .ud-chin-gl { opacity: 1; }
.ud-chin.is-live .ud-chin-poster { visibility: hidden; }
/* the left skid, out of focus below the glass */
.ud-chin-skid { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: blur(3px); opacity: .9; pointer-events: none; }
.ud-chin-skid path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ud-sk-a { stroke: #1E262D; stroke-width: 40px; }
.ud-sk-b { stroke: #7B8791; stroke-width: 28px; transform: translate(-4px, 0); }
.ud-sk-c { stroke: #DCE3E8; stroke-width: 9px; transform: translate(-8px, 0); }
.ud-chin-rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ud-chin-rim path { fill: none; vector-effect: non-scaling-stroke; stroke: var(--ud-frame-lit); stroke-width: 1.5px; }

@media (prefers-reduced-motion: no-preference) {
  .ud-h1 { animation: ud-open 1.8s var(--ud-ease) both; }
}
@keyframes ud-open { from { font-variation-settings: "wdth" 75; } }

/* ---------- bands ---------- */
.ud-h2 { margin: 0 0 24px; font-size: clamp(2rem, 4.4vw, 4rem); font-weight: 760; font-variation-settings: "wdth" 118; line-height: .95; letter-spacing: -.012em; }
.ud-lead { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); font-weight: 400; font-stretch: 102%; line-height: 1.45; margin: 0 0 24px; }
.ud-small { font-size: .8125rem; font-weight: 500; font-stretch: 94%; line-height: 1.4; }
.ud-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ud-gap); }

/* where we would take you: the flights, and the cabin seen from above */
.ud-seat {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ud-gap);
  max-width: calc(1320px + 2 * var(--ud-safe)); margin: 0 auto;
  padding: var(--ud-pad) var(--ud-safe) clamp(48px, 8svh, 112px);
}
.ud-seat-copy { grid-column: 1 / span 6; align-self: center; }
.ud-seat .ud-lead { max-width: 40ch; }
.ud-flights { list-style: none; margin: 32px 0 16px; padding: 0; }
.ud-flights li {
  padding: 16px 0 18px; border-top: 1px solid rgba(6, 26, 46, .35);
  font-size: clamp(1.25rem, 1.9vw, 1.75rem); font-weight: 720; line-height: 1.12; letter-spacing: -.005em;
}
.ud-flights li:last-child { border-bottom: 1px solid rgba(6, 26, 46, .35); }
.ud-flights span { font-weight: 380; }
.ud-fl-1 { font-variation-settings: "wdth" 88; } .ud-fl-2 { font-variation-settings: "wdth" 106; } .ud-fl-3 { font-variation-settings: "wdth" 125; }
.ud-plan { grid-column: 8 / span 5; align-self: center; margin: 0; padding: 0; border: 0; min-width: 0; }
.ud-plan-legend { padding: 0; margin: 0 0 16px; font-size: .78rem; font-weight: 700; font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; }
.ud-cabin { position: relative; width: 100%; max-width: 400px; aspect-ratio: 400 / 520; margin: 0 auto; }
.ud-cabin-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ud-cab-fan { opacity: 0; transition: opacity .35s var(--ud-ease); }
.ud-root[data-seat="fl"] .ud-fan-fl, .ud-root[data-seat="rl"] .ud-fan-rl, .ud-root[data-seat="rr"] .ud-fan-rr { opacity: 1; }
.ud-cab-glass { fill: rgba(124, 192, 242, .55); }
.ud-cab-frame { fill: none; stroke: var(--ud-frame); stroke-width: 10; }
.ud-cab-lit { fill: none; stroke: var(--ud-frame-lit); stroke-width: 2; transform: translate(-3px, 3px); }
.ud-cab-chin { fill: none; stroke: rgba(6, 26, 46, .45); stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; }
.ud-cab-post { stroke: var(--ud-frame); stroke-width: 6; }
.ud-seat-opt, .ud-seat-pilot {
  position: absolute; width: 22%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 6px; text-align: center;
}
.ud-so-fl { left: 37.5%; top: 36.5%; }
.ud-seat-pilot { left: 62.5%; top: 36.5%; }
.ud-so-rl { left: 37.5%; top: 64%; }
.ud-so-rr { left: 62.5%; top: 64%; }
.ud-seat-opt { cursor: pointer; }
.ud-seat-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ud-cush {
  position: relative; width: 100%; aspect-ratio: 5 / 6; border-radius: 14px 14px 10px 10px;
  background: linear-gradient(180deg, #33424F, #243140); border: 1.5px solid var(--ud-gasket);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: background-color .3s var(--ud-ease);
}
.ud-cush::before { content: ""; position: absolute; left: 14%; right: 14%; top: 34%; bottom: 14%; border-radius: 8px; border: 1.5px solid rgba(220, 231, 241, .28); }
.ud-cush::after { content: ""; position: absolute; left: 10%; right: 10%; top: 10%; height: 14%; border-radius: 6px; background: rgba(220, 231, 241, .12); }
.ud-so-name { font-size: .875rem; font-weight: 650; font-stretch: 108%; line-height: 1.1; white-space: nowrap; }
.ud-seat-pilot .ud-so-name { font-weight: 450; }
.ud-seat-pilot .ud-cush { background: repeating-linear-gradient(135deg, #1B2630 0 5px, #243140 5px 10px); }
.ud-so-you {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  font-size: .9375rem; font-weight: 800; font-stretch: 118%; color: var(--ud-ink); opacity: 0;
}
.ud-seat-opt:has(input:checked) .ud-cush { background: var(--ud-cream); border-color: var(--ud-ink); }
.ud-seat-opt:has(input:checked) .ud-cush::before { border-color: rgba(6, 26, 46, .3); }
.ud-seat-opt:has(input:checked) .ud-so-you { opacity: 1; }
.ud-seat-opt:hover .ud-cush { border-color: var(--ud-cream); }
.ud-seat-opt:has(input:focus-visible) .ud-cush { outline: 2px solid var(--ud-cream); outline-offset: 3px; box-shadow: 0 0 0 5px var(--ud-ink); }
.ud-plan-note { min-height: 3em; margin: 20px auto 0; max-width: 34ch !important; text-align: center; font-size: 1.0625rem; font-weight: 520; line-height: 1.4; }
.ud-pn { display: none; }
.ud-root[data-seat="fl"] .ud-pn-fl, .ud-root[data-seat="rl"] .ud-pn-rl, .ud-root[data-seat="rr"] .ud-pn-rr { display: inline; }
.ud-plan-pilot { margin: 4px auto 0; text-align: center; }

/* the dock: change seat on the way */
.ud-legs { position: relative; }
.ud-dock {
  position: sticky; top: calc(var(--bar-h, 40px) + var(--ud-nav-h) + 14px); z-index: 35;
  height: 0; display: flex; justify-content: flex-end; align-items: flex-start; gap: 4px;
  padding-right: var(--ud-safe);
}
.ud-dock-k, .ud-dock button { height: 36px; display: inline-flex; align-items: center; }
.ud-dock-k { order: -1; padding: 0 10px 0 14px; border-radius: 12px 0 0 12px; background: var(--ud-frame); color: var(--ud-mist); font-size: .75rem; font-weight: 700; font-stretch: 120%; letter-spacing: .1em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.ud-dock button {
  margin-left: -4px; padding: 0 12px; border: 0; background: var(--ud-frame); color: var(--ud-mist);
  font: inherit; font-size: .875rem; font-weight: 600; font-stretch: 104%; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.ud-dock button:last-child { border-radius: 0 12px 12px 0; padding-right: 14px; }
.ud-dock button[aria-pressed="true"] { background: var(--ud-cream); color: var(--ud-ink); border-radius: 8px; box-shadow: inset 0 0 0 3px var(--ud-frame); }
.ud-dock button:last-child[aria-pressed="true"] { border-radius: 8px 12px 12px 8px; }

/* a leg: the land under the glass */
.ud-leg { position: relative; min-height: min(110svh, 1000px); display: flex; flex-direction: column; overflow: clip; }
.ud-leg-photo { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.ud-leg-photo picture { display: block; position: absolute; left: 0; right: 0; top: -6%; height: 112%; }
.ud-leg-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ud-leg-photo::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%; background: linear-gradient(180deg, rgba(58, 155, 230, .92) 0, rgba(58, 155, 230, .55) 40%, rgba(58, 155, 230, 0)); }
.ud-leg-inner { position: relative; flex: 1; display: flex; flex-direction: column; padding: 112px var(--ud-safe) 96px; }
.ud-poster {
  position: relative; margin: 0; font-size: clamp(2.6rem, 7.2vw, 7.5rem); font-weight: 800; line-height: .88; letter-spacing: -.01em;
  font-variation-settings: "wdth" var(--ud-cruise, 110); contain: layout;
}
.ud-leg-plains { --ud-cruise: 110; }
.ud-leg-city { --ud-cruise: 100; }
.ud-leg-gulf { --ud-cruise: 125; }
.ud-line { display: block; width: auto; height: 120px; margin: 8px calc(-1 * var(--ud-safe)) 0; overflow: visible; }
.ud-line path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ud-line-case { stroke: var(--ud-ink); stroke-width: 6px; }
.ud-line-draw { stroke: var(--ud-cream); stroke-width: 3px; }
.ud-leg-line { position: relative; margin: 8px 0 0; max-width: 42ch !important; font-size: clamp(1.125rem, 1.45vw, 1.375rem); font-weight: 560; line-height: 1.4; }
.ud-leg-plains .ud-leg-line, .ud-leg-gulf .ud-leg-line { padding: 14px 18px; margin-left: -18px; border-radius: 16px; background: rgba(58, 155, 230, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ud-sides { margin-top: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ud-gap); padding-top: 48px; align-items: end; }
.ud-side {
  margin: 0; padding: 20px 24px 22px; border-radius: 20px;
  background: var(--ud-scrim); color: var(--ud-mist);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: clamp(1rem, 1.2vw, 1.125rem); font-weight: 340; line-height: 1.45;
  transition: none;
}
.ud-side-l { grid-column: 1 / span 5; }
.ud-side-r { grid-column: 8 / span 5; }
.ud-root[data-seat="fl"] .ud-side-l, .ud-root[data-seat="rl"] .ud-side-l, .ud-root[data-seat="rr"] .ud-side-r {
  font-size: clamp(1.5rem, 2.9vw, 2.75rem); font-weight: 700; font-variation-settings: "wdth" 115; line-height: 1.08; letter-spacing: -.01em; color: #fff;
  background: rgba(6, 26, 46, .7);
}
.ud-side-k { display: block; margin-bottom: 10px; font-size: .78rem; font-weight: 700; font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; color: var(--ud-mist); }
.ud-root[data-seat="fl"] .ud-side-l .ud-side-k::after, .ud-root[data-seat="rl"] .ud-side-l .ud-side-k::after, .ud-root[data-seat="rr"] .ud-side-r .ud-side-k::after {
  content: " \00B7  your window"; color: var(--ud-cream);
}
.ud-feet {
  position: relative; align-self: center; margin: 24px 0 0; padding: 10px 20px 11px; border-radius: 999px;
  background: var(--ud-scrim); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: .9375rem; text-align: center;
}
.ud-feet .ud-side-k { display: inline; margin: 0 10px 0 0; color: var(--ud-cream); }
.ud-root:not([data-seat="fl"]) .ud-feet { display: none; }

/* the city: no photograph behind the words, the one view that looks across */
.ud-leg-city {
  min-height: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ud-gap);
  padding: 112px var(--ud-safe) 96px; overflow: visible;
}
.ud-leg-city .ud-leg-inner { grid-column: 1 / span 8; padding: 0; }
.ud-leg-city .ud-line { margin-right: 0; }
.ud-kettle { margin: 16px 0 0; font-size: clamp(1.9rem, 4.6vw, 4.25rem); font-weight: 700; font-variation-settings: "wdth" 100; line-height: 1.02; letter-spacing: -.012em; max-width: 19ch !important; }
.ud-leg-city .ud-sides { grid-template-columns: 1fr 1fr; padding-top: 40px; align-items: start; }
.ud-leg-city .ud-side { grid-column: auto; padding: 16px 0 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ud-ink); border-top: 1px solid rgba(6, 26, 46, .35); }
.ud-leg-city .ud-side .ud-side-k { color: var(--ud-ink); }
.ud-root .ud-leg-city .ud-side { color: var(--ud-ink); background: none; }
.ud-root .ud-leg-city .ud-side-k::after { color: var(--ud-ink); }
.ud-leg-city .ud-feet { align-self: start; margin-top: 32px; background: var(--ud-frame); -webkit-backdrop-filter: none; backdrop-filter: none; }
.ud-city-photo { grid-column: 9 / span 4; margin: 0; align-self: center; }
.ud-city-photo picture { display: block; border-radius: 28px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--ud-frame); }
.ud-city-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.ud-city-photo figcaption { margin-top: 12px; }

/* the gulf coast, and the branch west */
.ud-leg-gulf .ud-leg-photo img { object-position: 50% 70%; }
.ud-branch { position: relative; margin: 32px 0 0 auto; width: min(520px, 100%); padding: 24px 26px 26px; border-radius: 20px; background: var(--ud-scrim); color: var(--ud-mist); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ud-branch::before { content: ""; position: absolute; left: 26px; top: 0; width: 44px; height: 3px; background: var(--ud-cream); border-radius: 3px; }
.ud-h4 { margin: 0 0 10px; font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 700; font-variation-settings: "wdth" 112; line-height: 1.15; color: #fff; }
.ud-branch p { margin: 0; font-weight: 340; }

/* the island: the line on a sill at the foot */
.ud-leg-island { min-height: 100svh; }
.ud-leg-island .ud-leg-photo::after { display: none; }
.ud-leg-island .ud-leg-inner { padding-top: 22svh; padding-bottom: 0; }
.ud-leg-island .ud-sides { margin-top: 0; padding-top: 0; }
.ud-island-foot { margin-top: auto; padding: 0 0 72px; position: relative; isolation: isolate; }
.ud-island-foot::before {
  content: ""; position: absolute; left: calc(-1 * var(--ud-safe)); right: calc(-1 * var(--ud-safe)); top: 40px; bottom: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6, 26, 46, 0), rgba(6, 26, 46, .62) 30%, rgba(6, 26, 46, .8) 60%);
}
.ud-line-island { margin-bottom: 0; }
.ud-island-h {
  margin: 0 calc(-1 * var(--ud-safe)) 28px; padding: 0 var(--ud-safe); height: 14px; position: relative;
  background: linear-gradient(180deg, var(--ud-frame-lit) 0 1.5px, var(--ud-frame) 1.5px 11px, var(--ud-gasket) 11px);
  color: var(--ud-cream); font-size: .8125rem; font-weight: 700; font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; line-height: 14px;
}
.ud-island-line span { background: rgba(6, 26, 46, .82); padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ud-island-line { margin: 0; max-width: 20ch !important; font-size: clamp(2.2rem, 5.6vw, 5.5rem); font-weight: 800; font-variation-settings: "wdth" 125; line-height: 1; letter-spacing: -.012em; color: var(--ud-cream); }
.ud-island-sub { display: inline-block; margin: 20px 0 0; padding: 12px 16px; border-radius: 14px; background: rgba(6, 26, 46, .82); color: #fff; font-weight: 320; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); max-width: 48ch !important; }

/* ---------- set down in the paddock ---------- */
.ud-wash {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ud-gap); align-items: center;
  max-width: calc(1320px + 2 * var(--ud-safe)); margin: 0 auto;
  padding: var(--ud-pad) var(--ud-safe);
}
.ud-wash > .ud-h2 { grid-column: 1 / -1; margin-bottom: 48px; max-width: 14ch; }
.ud-wash-copy { grid-column: 1 / span 4; }
.ud-wash-copy .ud-lead { font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); }
.ud-wash-how { font-weight: 520; }
.ud-wash-answer { margin: 24px 0; padding: 16px 0; border-top: 1px solid rgba(6, 26, 46, .35); border-bottom: 1px solid rgba(6, 26, 46, .35); font-size: clamp(1.125rem, 1.5vw, 1.375rem); font-weight: 600; line-height: 1.3; }
.ud-wash-answer b { font-weight: 800; font-variant-numeric: lining-nums tabular-nums; font-variation-settings: "wdth" 112; }
.ud-wash-fig { grid-column: 5 / span 8; margin: 0; }
.ud-wash-stage { display: flex; gap: 16px; align-items: stretch; }
.ud-wash-view {
  position: relative; flex: 1; min-width: 0; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 20px; background: #6E6440;
  border: 6px solid var(--ud-frame); box-shadow: 0 0 0 1.5px var(--ud-gasket), inset 0 0 0 1.5px var(--ud-frame-lit);
}
.ud-wash-poster, .ud-wash-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ud-wash-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.ud-wash-view.is-live .ud-wash-poster { visibility: hidden; }
.ud-wash-shadow {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; z-index: 2;
  border-radius: 50%; border: 1.5px solid rgba(255, 243, 196, .55); background: none; padding: 0;
  cursor: grab; touch-action: none;
}
.ud-wash-shadow:hover { border-color: var(--ud-cream); }
.ud-wash-shadow:active { cursor: grabbing; }
.ud-lever {
  flex: none; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 0; border-radius: 20px;
  background: linear-gradient(90deg, #1A252E, var(--ud-frame) 30%, #2C3B47 50%, var(--ud-frame) 70%, #1A252E);
  box-shadow: 0 0 0 1.5px var(--ud-gasket), inset 0 1px 0 rgba(255, 255, 255, .14);
  color: var(--ud-mist);
}
.ud-lever-k { font-size: .6875rem; font-weight: 700; font-stretch: 118%; letter-spacing: .08em; text-transform: uppercase; text-align: center; line-height: 1.15; }
.ud-lever input {
  flex: 1; width: 44px; min-height: 160px; margin: 0; padding: 0;
  writing-mode: vertical-lr; direction: rtl;
  -webkit-appearance: none; appearance: none; background: none; cursor: ns-resize;
}
.ud-lever input::-webkit-slider-runnable-track { width: 10px; margin: 0 auto; border-radius: 6px; background: var(--ud-gasket); box-shadow: inset 0 0 0 1px #000, 1px 0 0 rgba(255, 255, 255, .12); }
.ud-lever input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 44px; height: 22px; margin-left: -17px; border-radius: 6px;
  background: linear-gradient(180deg, #8A98A4 0, #56646F 30%, #36434E 60%, #222D36 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 1px var(--ud-gasket), inset 0 -3px 0 -1px var(--ud-cream);
}
.ud-lever input::-moz-range-track { width: 10px; border-radius: 6px; background: var(--ud-gasket); }
.ud-lever input::-moz-range-thumb { width: 44px; height: 22px; border: 0; border-radius: 6px; background: linear-gradient(180deg, #8A98A4, #36434E 60%, #222D36); box-shadow: 0 0 0 1px var(--ud-gasket); }
.ud-lever input:focus-visible { outline: 2px solid var(--ud-cream); outline-offset: 4px; }
.ud-wash-fig figcaption { margin-top: 14px; }

/* ---------- weather and weight ---------- */
.ud-weather { background: var(--ud-sky-lo); padding: var(--ud-pad) var(--ud-safe); }
.ud-ww { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--ud-gap); max-width: 1320px; margin: 0 auto; }
.ud-ww-h { display: contents; }
.ud-ww-word { display: block; margin: 0 0 32px; font-size: clamp(2.6rem, 8.4vw, 8.75rem); font-weight: 800; line-height: .88; letter-spacing: -.012em; white-space: nowrap; grid-row: 1; }
.ud-ww-wide { grid-column: 1 / span 6; }
.ud-ww-narrow { grid-column: 7 / span 6; text-align: right; }
.ud-root .ud-ww-p { grid-row: 2; margin: 0; max-width: 40ch; font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); font-weight: 450; }
.ud-ww-pl { grid-column: 1 / span 6; }
.ud-ww-pr { grid-column: 7 / span 6; justify-self: end; text-align: right; }
.ud-ww-wide { font-variation-settings: "wdth" 125; }
.ud-ww-narrow { font-variation-settings: "wdth" 75; }

/* ---------- from the first call to skids down: the flight in profile ---------- */
.ud-profile { padding: var(--ud-pad) var(--ud-safe) clamp(48px, 8svh, 112px); max-width: calc(1320px + 2 * var(--ud-safe)); margin: 0 auto; }
.ud-pf { position: relative; margin-top: 48px; height: 620px; }
.ud-pf-art { position: absolute; left: 0; top: 0; width: 100%; height: 360px; overflow: visible; }
.ud-pf-art path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ud-pf-ground { stroke: rgba(6, 26, 46, .35); stroke-width: 1px; stroke-dasharray: 3 6; }
.ud-pf-v { display: none; }
.ud-notes { list-style: none; margin: 0; padding: 0; }
.ud-note { position: absolute; width: 17%; padding: 0 0 0 16px; border-left: 1px solid var(--ud-ink); }
.ud-note::before {
  content: ""; position: absolute; left: -9px; top: -9px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--ud-cream); box-shadow: 0 0 0 2.5px var(--ud-ink);
}
.ud-note-1 { left: 5%; top: 300px; padding-top: 40px; width: 15%; }
.ud-note-2 { left: 21.7%; top: 300px; padding-top: 40px; width: 16%; }
.ud-note-1, .ud-note-2, .ud-note-3 { padding-right: 8px; }
.ud-note-3 { left: 39.2%; top: 300px; padding-top: 40px; width: 20%; }
.ud-note-4 { left: 65.8%; top: 150px; transform: translateY(-100%); padding: 0 0 36px 16px; width: 20%; }
.ud-note-4::before { top: auto; bottom: -9px; }
.ud-note-5 { right: 6.7%; top: 300px; padding: 40px 16px 0 0; border-left: 0; border-right: 1px solid var(--ud-ink); text-align: right; width: 18%; }
.ud-note-5::before { left: auto; right: -9px; }
.ud-note-h { margin: 0 0 8px; font-size: clamp(1.125rem, 1.45vw, 1.375rem); font-weight: 720; font-variation-settings: "wdth" 112; line-height: 1.15; }
.ud-note p { margin: 0; font-size: 1rem; line-height: 1.5; }

/* ---------- tell us where you'd like to go ---------- */
.ud-ask { padding: var(--ud-pad) var(--ud-safe) 48px; max-width: calc(1320px + 2 * var(--ud-safe)); margin: 0 auto; }
.ud-ask-h { font-variation-settings: "wdth" 75; font-size: clamp(2.4rem, 6.4vw, 6.5rem); line-height: .9; max-width: 12ch; }
.ud-ask-lead { max-width: 46ch; }
.ud-frame {
  max-width: 880px; margin: 48px 0 0; padding: clamp(20px, 3vw, 40px); border-radius: 28px;
  background: linear-gradient(160deg, rgba(160, 212, 247, .5), rgba(124, 192, 242, .3) 50%, rgba(124, 192, 242, .22));
  border: 6px solid var(--ud-frame);
  box-shadow: 0 0 0 1.5px var(--ud-gasket), inset 0 0 0 1.5px var(--ud-frame-lit), inset 0 1px 0 4px rgba(255, 255, 255, .12);
}
.ud-form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ud-fs { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; min-width: 0; }
.ud-fs-half { grid-column: auto; }
.ud-fs legend, .ud-field > span { display: block; padding: 0; margin-bottom: 8px; font-size: .9375rem; font-weight: 650; }
.ud-tiles, .ud-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.ud-tiles label, .ud-seg label {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 12px;
  border: 1.5px solid rgba(6, 26, 46, .55); background: rgba(255, 255, 255, .22); cursor: pointer; font-weight: 520; line-height: 1.2;
}
.ud-seg label { min-width: 56px; justify-content: center; font-variant-numeric: lining-nums tabular-nums; font-weight: 700; }
.ud-tiles input, .ud-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ud-tiles label:has(input:checked), .ud-seg label:has(input:checked) { background: var(--ud-frame); border-color: var(--ud-frame); color: #fff; }
.ud-tiles label:has(input:focus-visible), .ud-seg label:has(input:focus-visible) { outline: 2px solid var(--ud-cream); outline-offset: 3px; box-shadow: 0 0 0 5px var(--ud-ink); }
.ud-fs .ud-small { margin: 8px 0 0; }
.ud-field { display: block; min-width: 0; }
.ud-field input, .ud-field select, .ud-field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px;
  border: 1.5px solid rgba(6, 26, 46, .55); background: #A7D5F4; color: var(--ud-ink); font: inherit;
}
.ud-field textarea { resize: vertical; }
.ud-field input::placeholder, .ud-field textarea::placeholder { color: #26455F; opacity: 1; }
.ud-field-wide { grid-column: 1 / -1; }
.ud-send { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.ud-send .ud-btn { height: 52px; padding: 0 30px; font-size: 1.0625rem; }
.ud-status { margin: 0; font-weight: 600; }
.ud-foot { margin-top: 112px; padding: 32px 0 0; border-top: 1px solid rgba(6, 26, 46, .35); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.ud-foot p { margin: 0 auto 0 0; font-weight: 320; }
.ud-foot p b { font-weight: 780; font-variation-settings: "wdth" 118; margin-right: 8px; }
.ud-mark-foot .ud-mk-rotor { stroke: var(--ud-ink); }
.ud-mark-foot .ud-mk-mast, .ud-mark-foot .ud-mk-chin { fill: var(--ud-ink); }
.ud-foot ul { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0; padding: 0; }
.ud-foot a { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: var(--ud-ink); text-underline-offset: 3px; }
.ud-foot .ud-ic { width: 16px; height: 16px; }

/* ---------- scroll-driven: the route draws, the frame banks, the land moves, the type opens ---------- */
#ud-leg-plains { view-timeline: --ud-t1 block; }
#ud-leg-city { view-timeline: --ud-t2 block; }
#ud-leg-gulf { view-timeline: --ud-t3 block; }
#ud-leg-island { view-timeline: --ud-t4 block; }
#ud-wash { view-timeline: --ud-t5 block; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ud-line-draw { stroke-dasharray: 1 1; animation: ud-draw linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
    .ud-line-branch { animation-range: cover 30% cover 70%; }
    .ud-poster { animation: ud-cruise linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    .ud-ask-h { animation: ud-close linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    .ud-leg-photo picture { animation: ud-ground linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .ud-bank-1 { animation: ud-b1 linear both; animation-timeline: --ud-t1; animation-range: entry 0% entry 100%; }
    .ud-bank-2 { animation: ud-b2 linear both; animation-timeline: --ud-t2; animation-range: entry 0% entry 100%; }
    .ud-bank-3 { animation: ud-b3 linear both; animation-timeline: --ud-t3; animation-range: entry 0% entry 100%; }
    .ud-bank-4 { animation: ud-b4 linear both; animation-timeline: --ud-t4; animation-range: entry 0% entry 100%; }
    .ud-bank-5 { animation: ud-b5 linear both; animation-timeline: --ud-t5; animation-range: entry 0% entry 100%; }
  }
}
@keyframes ud-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ud-cruise { from { font-variation-settings: "wdth" 75; } }
@keyframes ud-close { from { font-variation-settings: "wdth" 125; } }
@keyframes ud-ground { from { transform: translateY(5%); } to { transform: translateY(-5%); } }
@keyframes ud-b1 { 45% { rotate: calc(-2deg * var(--ud-bk)); } }
@keyframes ud-b2 { 45% { rotate: calc(3deg * var(--ud-bk)); } }
@keyframes ud-b3 { 45% { rotate: calc(-2deg * var(--ud-bk)); } }
@keyframes ud-b4 { 45% { rotate: calc(-3deg * var(--ud-bk)); } }
@keyframes ud-b5 { 45% { rotate: calc(1.5deg * var(--ud-bk)); } }

::view-transition-group(*) { animation-duration: .52s; animation-timing-function: cubic-bezier(.33, 0, .15, 1); }

/* ---------- widths ---------- */
@media (max-width: 1279px) {
  .ud-hero { --ud-type-pad: 24px; }
  .ud-chin { width: min(88vw, 1000px); }
}
@media (min-width: 1280px) {
  /* the h1's second line leaves room for the way on and the action standing at the right of it */
  .ud-root { --ud-h1: clamp(2.5rem, min(7.4vw, 11.5svh, (100vw - 2 * var(--ud-safe) - var(--ud-acts-w, 250px)) / 10.3), 7rem); }
}
@media (min-width: 701px) and (max-width: 1279px) {
  /* narrower: the sub-line and the actions share the row above the h1 */
  .ud-hero { --ud-kick: 56px; }
  .ud-acts { flex-direction: row; align-items: center; gap: 22px; margin-bottom: calc(var(--ud-type-lines) * var(--ud-h1) + 22px); }
  .ud-acts-btn { height: 42px; padding: 0 20px; font-size: 1rem; }
  .ud-root .ud-kicker { max-width: calc(100% - 450px); font-size: .9375rem; font-weight: 500; }
}
@media (min-width: 701px) and (max-aspect-ratio: 1/1) {
  .ud-hero { --ud-sill-at: 34svh; }
}
@media (max-width: 1100px) {
  .ud-seat-copy { grid-column: 1 / span 7; }
  .ud-plan { grid-column: 8 / span 5; }
  .ud-wash-copy { grid-column: 1 / -1; max-width: 640px; margin-bottom: 40px; }
  .ud-wash-fig { grid-column: 1 / -1; }
  .ud-note { width: 18%; }
}
@media (max-width: 900px) {
  .ud-nav-links { display: none; }
  .ud-menu { display: block; }
  .ud-seat-copy, .ud-plan { grid-column: 1 / -1; }
  .ud-plan { margin-top: 48px; }
  .ud-cabin { max-width: 340px; }
  .ud-leg-city .ud-leg-inner { grid-column: 1 / -1; }
  .ud-city-photo { grid-column: 1 / -1; width: min(420px, 100%); margin-top: 40px; }
  .ud-pf { height: auto; margin-top: 32px; }
  .ud-pf-h { display: none; }
  .ud-notes { position: relative; padding-left: 56px; }
  .ud-notes::before { content: ""; position: absolute; left: 18px; top: 8px; bottom: 8px; width: 3px; background: var(--ud-cream); box-shadow: 0 0 0 1.5px var(--ud-ink); border-radius: 3px; }
  .ud-note, .ud-note-1, .ud-note-2, .ud-note-3, .ud-note-4, .ud-note-5 {
    position: relative; left: auto; right: auto; top: auto; transform: none; width: auto; max-width: 52ch;
    padding: 0 0 36px; border: 0; text-align: left;
  }
  .ud-note::before, .ud-note-4::before, .ud-note-5::before { left: -47px; right: auto; top: 4px; bottom: auto; }
  .ud-note-4 { margin-left: 24px; }
  .ud-note-4::before { left: -71px; }
  .ud-ww-wide, .ud-ww-narrow, .ud-ww-pl, .ud-ww-pr { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .ud-ww-wide { grid-row: 1; } .ud-root .ud-ww-pl { grid-row: 2; } .ud-ww-narrow { grid-row: 3; margin-top: 64px; } .ud-root .ud-ww-pr { grid-row: 4; }
  .ud-ww-word { font-size: clamp(2.6rem, 13vw, 6rem); }
}
@media (max-width: 700px) {
  .ud-root { --ud-safe: 24px; --ud-nav-h: 48px; --ud-sill-h: 12px; --ud-h1: min(11.4vw, 7.8svh); --ud-bk: .33; }
  .ud-nav { gap: 10px; padding: 0 14px 0 16px; }
  .ud-mark { height: 24px; width: 28px; }
  .ud-brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ud-pill { height: 36px; padding: 0 16px; font-size: .9375rem; }
  .ud-hero { --ud-sill-at: 30svh; --ud-type-pad: 16px; --ud-type-lines: 2.7; --ud-kick: 0px; }
  .ud-h1 { line-height: .9; font-weight: 800; font-variation-settings: "wdth" 108; }
  .ud-br-sm { display: inline; }
  .ud-root .ud-kicker {
    grid-area: 4 / 1 / 5 / 4; align-self: stretch; margin: 0; max-width: none; padding: 24px 24px 14px;
    background: var(--ud-strip); color: var(--ud-mist);
    font-size: 1.0625rem; font-weight: 420; line-height: 1.45;
  }
  .ud-hero { --ud-strip: #161F27; }
  .ud-acts { grid-area: 5 / 1 / 6 / 4; justify-self: stretch; align-self: stretch; align-items: flex-start; margin: 0; padding: 0 24px 16px; background: var(--ud-strip); }
  .ud-acts-btn { display: none; }
  .ud-to-route { color: var(--ud-mist); text-decoration-color: var(--ud-cream); min-height: 44px; }
  .ud-root .ud-hint { grid-area: 6 / 1 / 7 / 4; justify-self: stretch; align-self: stretch; margin: 0; padding: 0 24px 32px; border-radius: 0; background: var(--ud-strip); box-shadow: none; font-size: .875rem; line-height: 1.4; white-space: normal; letter-spacing: .01em; }
  .ud-sill { background: linear-gradient(180deg, #7D8D9A 0 1px, var(--ud-frame-lit) 1px 2px, var(--ud-frame) 2px calc(100% - 1.5px), var(--ud-gasket) calc(100% - 1.5px)); }
  .ud-sill-bolt { display: none; }
  .ud-tilt { grid-column: 2; justify-self: end; margin: 0; }
  .ud-chin { width: calc(100% - 2 * var(--ud-post) - 16px); margin-top: 8px; }
  .ud-chin-glass { clip-path: inset(0 round 50% 50% 0 0 / 96px 96px 0 0); }
  .ud-chin-rim { display: none; }
  .ud-chin::after { content: ""; position: absolute; inset: 0; border-radius: 50% 50% 0 0 / 96px 96px 0 0; box-shadow: inset 0 1.5px 0 var(--ud-frame-lit); pointer-events: none; }
  .ud-chin-poster img { object-position: 50% 50%; }
  .ud-sk-a { stroke-width: 26px; } .ud-sk-b { stroke-width: 18px; } .ud-sk-c { stroke-width: 6px; }
  .ud-latch, .ud-hinge { display: none; }

  .ud-seat { padding-top: 72px; }
  .ud-cabin { max-width: 300px; }
  .ud-legs { display: flex; flex-direction: column; }
  .ud-dock { order: 99; top: auto; bottom: 12px; height: 0; padding: 0 16px; justify-content: center; align-items: flex-end; }
  .ud-dock-k { display: none; }
  .ud-dock button { height: 44px; padding: 0 12px; font-size: .875rem; }
  .ud-dock button:first-of-type { border-radius: 12px 0 0 12px; }
  .ud-dock button:first-of-type[aria-pressed="true"] { border-radius: 12px 8px 8px 12px; }
  .ud-sides { grid-template-columns: 1fr; gap: 12px; }
  .ud-side-l, .ud-side-r { grid-column: 1 / -1; }
  .ud-root[data-seat="rr"] .ud-side-r { order: -1; }
  .ud-leg { min-height: 88svh; }
  .ud-leg-inner { padding: 72px var(--ud-safe) 88px; }
  .ud-poster { font-size: 2.6rem; }
  .ud-line { height: 80px; }
  .ud-leg-line { font-size: 1.0625rem; }
  .ud-leg-plains .ud-leg-line, .ud-leg-gulf .ud-leg-line { margin-left: -6px; padding: 12px 14px; }
  .ud-leg-city { display: block; padding: 72px var(--ud-safe); }
  .ud-leg-city .ud-sides { grid-template-columns: 1fr; }
  .ud-city-photo picture { aspect-ratio: 4 / 5; }
  .ud-leg-island .ud-leg-inner { padding-top: 88px; }
  .ud-island-foot::before { top: 80px; }
  .ud-wash-stage { flex-direction: column; }
  .ud-wash-view { aspect-ratio: 4 / 5; border-width: 4px; }
  .ud-lever { width: auto; flex-direction: row; padding: 0 16px; height: 64px; }
  .ud-lever input { writing-mode: horizontal-tb; direction: rtl; width: auto; height: 44px; min-height: 0; flex: 1; cursor: ew-resize; }
  .ud-lever input::-webkit-slider-runnable-track { width: auto; height: 10px; margin: 0; }
  .ud-lever input::-webkit-slider-thumb { width: 22px; height: 44px; margin: -17px 0 0; }
  .ud-frame { padding: 20px; border-width: 4px; }
  .ud-form { grid-template-columns: 1fr; }
  .ud-fs-half { grid-column: 1 / -1; }
  .ud-foot { margin-top: 72px; }
}
@media (max-width: 379px) {
  .ud-pill-long { display: none; }
  .ud-pill-short { display: inline; }
  .ud-dock button { padding: 0 9px; font-size: .8125rem; }
}
@media (max-width: 340px) {
  .ud-h1 { font-variation-settings: "wdth" 100; }
}
@media (prefers-reduced-motion: reduce) {
  .ud-chin-gl, .ud-cab-fan, .ud-root .ud-hint { transition: none; }
}