/* ==========================================================================
   Discover Ladakh — art direction: high-altitude night, monastery saffron,
   robe maroon, Pangong turquoise, plaster paper. Editorial type + instrument mono.
   ========================================================================== */
@font-face { font-family: "DM Serif Display"; src: url(/fonts/dmserif.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url(/fonts/dmserif-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Manrope"; src: url(/fonts/manrope.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --night: #070914; --night-2: #0c1022; --night-3: #121833;
  --paper: #f2ede3; --paper-2: #e7dfd0;
  --saffron: #f2a33a; --saffron-2: #ffc067; --maroon: #9b2f3f; --maroon-2: #5c1724; --turq: #35c2b4; --glacier: #a8e3ee;
  --f-1: #2a6fdb; --f-2: #f4f4f0; --f-3: #d6453d; --f-4: #2f9e6a; --f-5: #f2b632;
  --bg: var(--night); --alt: #0b0f20; --acc: var(--saffron); --s1: #0d1226; --s2: #141a34; --fg: #eef0f6; --fg2: #b9bfd3; --mut: #7d86a3; --ln: rgba(255, 255, 255, .09); --ln2: rgba(255, 255, 255, .2); --link: var(--saffron);
  --seq-1: #143a3a; --seq-2: #1d5c58; --seq-3: #2a8a82; --seq-4: #35b5aa; --seq-5: #6fe0d4;
  --display: "DM Serif Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body: "Manrope", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: "Manrope", ui-sans-serif, system-ui, "Segoe UI", sans-serif; /* labels & readouts: Manrope, tabular figures */
  --r: 10px; --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
.paper, .section.alt { background: var(--alt); color: var(--fg); }

/* ---------- light theme (system preference or explicit toggle) ---------- */
:root[data-theme="light"] {
  --bg: #f5f0e6; --alt: #ece4d5; --s1: #fffcf6; --s2: #f1eadd; --fg: #1a160f; --fg2: #4b4336; --mut: #776d5c;
  --ln: rgba(26, 22, 15, .12); --ln2: rgba(26, 22, 15, .26); --link: #8e2a39; --acc: #a1590b;
  --seq-1: #d3efeb; --seq-2: #a2ddd5; --seq-3: #63c4b9; --seq-4: #2b9e92; --seq-5: #17756c;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f5f0e6; --alt: #ece4d5; --s1: #fffcf6; --s2: #f1eadd; --fg: #1a160f; --fg2: #4b4336; --mut: #776d5c;
    --ln: rgba(26, 22, 15, .12); --ln2: rgba(26, 22, 15, .26); --link: #8e2a39; --acc: #a1590b;
    --seq-1: #d3efeb; --seq-2: #a2ddd5; --seq-3: #63c4b9; --seq-4: #2b9e92; --seq-5: #17756c;
    color-scheme: light;
  }
}
/* cinematic surfaces stay dark in every theme */
.page-hero, .ride, .site-footer, .cta-inner, .tile.dark, .omenu-dark {
  --s1: #0d1226; --s2: #141a34; --fg: #eef0f6; --fg2: #b9bfd3; --mut: #7d86a3; --ln: rgba(255, 255, 255, .09); --ln2: rgba(255, 255, 255, .2); --link: var(--saffron); --acc: var(--saffron);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 450 16.5px/1.68 var(--body); font-synthesis: style; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
body::before {
  content: ""; position: fixed; inset: -50%; z-index: 80; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(4) infinite;
}
@keyframes grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, -2%); } }
img, svg { max-width: 100%; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, .h3 { font-family: var(--display); margin: 0 0 .5em; line-height: 1.04; letter-spacing: -.01em; font-weight: 400; font-synthesis: none; }
h1 { font-size: clamp(2.7rem, 6vw, 5.4rem); letter-spacing: -.02em; line-height: 1; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); letter-spacing: -.015em; }
h3, .h3 { font-size: 1.32rem; letter-spacing: 0; line-height: 1.2; }
h2 em, h1 em { font-style: italic; font-weight: 400; color: var(--acc); }
p { margin: 0 0 1em; }
.mono { font-family: var(--mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.wrap { width: min(1240px, 100% - 40px); margin-inline: auto; }
.narrow { width: min(860px, 100% - 40px); }
.muted { color: var(--mut); } .dim { opacity: .6; }
.small { font-size: .85rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--saffron); color: #1a1206; padding: 8px 14px; border-radius: 6px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--saffron); outline-offset: 3px; border-radius: 4px; }
.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i-sm { width: 16px; height: 16px; }
::selection { background: var(--saffron); color: #1a1206; }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .5s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
.dock { view-transition-name: dock; }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: .78em 1.25em; border-radius: 6px; font: 650 .95rem/1 var(--body); letter-spacing: .01em; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .25s, color .25s, border-color .25s, box-shadow .3s, transform .25s var(--ease); white-space: nowrap; }
.btn .i { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.btn:hover .i:last-child { transform: translateX(3px); }
.btn-saffron, .btn-primary { background: var(--saffron); color: #1a1206; }
.btn-saffron:hover, .btn-primary:hover { background: var(--saffron-2); box-shadow: 0 0 0 6px rgba(242, 163, 58, .16), 0 14px 40px -12px rgba(242, 163, 58, .7); }
.btn-line, .btn-ghost { background: transparent; color: var(--fg); border-color: var(--ln2); }
.btn-line:hover, .btn-ghost:hover { border-color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.btn-lg { padding: 1em 1.5em; font-size: 1.05rem; }
.btn-sm { padding: .6em 1em; font-size: .88rem; }
.block { display: flex; width: 100%; margin-top: .6rem; }
.link-arrow { display: inline-flex; gap: .4em; align-items: center; font-weight: 650; }

/* ---------- logo ---------- */
.brand { display: inline-flex; align-items: center; gap: .65rem; color: inherit; text-decoration: none; flex: none; }
.logo-mark { width: 40px; height: 40px; flex: none; overflow: visible; }
.lm-road { stroke-dasharray: 40; stroke-dashoffset: 40; animation: road-draw 1.8s .3s var(--ease) forwards; }
.lm-sun { transition: transform .5s var(--ease); transform-origin: 24px 20px; }
.brand:hover .lm-sun { transform: translateY(-2px) scale(1.06); }
@keyframes road-draw { to { stroke-dashoffset: 0; } }
.wm { display: grid; line-height: 1; }
.wm small { font: 600 .56rem/1 var(--mono); letter-spacing: .42em; text-transform: uppercase; color: var(--acc); margin-bottom: 4px; }
.wm span { font: 400 1.5rem/1 var(--display); letter-spacing: .005em; }

/* ---------- dock navigation ---------- */
.dock { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); width: min(1260px, 100% - 20px); z-index: 60; transition: transform .45s var(--ease); }
.dock.hide { transform: translate(-50%, calc(-100% - 20px)); }
.dock-in { position: relative; display: flex; align-items: center; gap: .8rem; height: 62px; padding: 0 10px 0 14px; color: #eef0f6; background: rgba(8, 10, 22, .55); border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px; backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); box-shadow: 0 18px 50px -24px rgba(0, 0, 0, .8); transition: background .3s; }
.dock.solid .dock-in { background: rgba(8, 10, 22, .85); }
.dock-nav { margin-left: auto; }
.dock-nav > ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; }
.mt { display: flex; align-items: flex-start; gap: 3px; padding: .55rem .85rem; border-radius: 8px; color: #c9cee0; text-decoration: none; font-weight: 600; font-size: .93rem; letter-spacing: .01em; transition: color .2s, background .2s; }
.mt sup { font: 600 .58rem var(--mono); color: var(--acc); opacity: .75; margin-top: -1px; }
.mi:hover .mt, .mi:focus-within .mt, .mt[aria-current] { color: #fff; background: rgba(255, 255, 255, .07); }
.mega { position: absolute; top: calc(100% + 10px); left: 0; right: 0; padding: 28px; color: #eef0f6; background: rgba(9, 11, 24, .96); border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .35s var(--ease), visibility .25s; }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.mi:hover .mega, .mi:focus-within .mega, .mi.open .mega { opacity: 1; visibility: visible; transform: none; }
.mi.shut .mega { opacity: 0 !important; visibility: hidden !important; }
.mega-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 36px; }
.mega-h { font: 600 .68rem var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--acc); margin: 0 0 12px; }
.mega-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.mega-list.tight { grid-template-columns: 1fr; }
.mega-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 10px; border-radius: 8px; color: #e6e8f2; text-decoration: none; font-weight: 550; }
.mega-list a small { color: #7d86a3; font: .74rem var(--mono); white-space: nowrap; }
.mega-list a:hover, .mega-icons a:hover { background: rgba(255, 255, 255, .06); }
.mega-icons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.mega-icons.two { grid-template-columns: 1fr 1fr; }
.mega-icons a { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 8px; color: #e6e8f2; text-decoration: none; font-size: .92rem; }
.mega-icons a .i { color: var(--acc); margin-top: 2px; }
.mega-icons small { display: block; color: #7d86a3; font: .72rem var(--mono); }
.mega-tags { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.mega-tags a { display: block; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; color: #e6e8f2; text-decoration: none; font-size: .85rem; }
.mega-tags a:hover { border-color: var(--acc); color: var(--acc); }
.mega-note { color: #b9bfd3; font-size: .92rem; }
.mega-cta { display: inline-flex; gap: 6px; align-items: center; color: var(--acc); font-weight: 650; text-decoration: none; }
.lehnow { display: inline-flex; align-items: center; gap: 7px; font: 500 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #9aa2bd; padding: 0 6px; white-space: nowrap; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--turq); box-shadow: 0 0 0 0 rgba(53, 194, 180, .6); animation: pulse 2s infinite; display: inline-block; flex: none; }
.lehnow time { color: #fff; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(53, 194, 180, 0); } 100% { box-shadow: 0 0 0 0 rgba(53, 194, 180, 0); } }
.cmdk-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 12px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 9px; background: rgba(255, 255, 255, .04); color: #b9bfd3; font: 500 .88rem var(--body); cursor: pointer; transition: border-color .2s, color .2s; }
.cmdk-btn:hover { border-color: rgba(255, 255, 255, .3); color: #fff; }
kbd { font: 600 .68rem var(--mono); padding: 2px 6px; border: 1px solid rgba(255, 255, 255, .18); border-bottom-width: 2px; border-radius: 5px; color: #9aa2bd; }
.menu-btn { display: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .06); cursor: pointer; position: relative; flex: none; }
.menu-btn span { position: absolute; left: 12px; right: 12px; height: 2px; background: #fff; border-radius: 2px; transition: transform .35s var(--ease), top .35s var(--ease); }
.menu-btn span:first-child { top: 17px; } .menu-btn span:nth-child(2) { top: 25px; }
.menu-btn[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { top: 21px; transform: rotate(-45deg); }
@media (max-width: 1120px) { .dock-nav, .lehnow { display: none; } .menu-btn { display: block; } .cmdk-btn { margin-left: auto; } }
@media (max-width: 600px) { .cmdk-btn span, .cmdk-btn kbd, .dock-cta { display: none; } .wm span { font-size: 1.3rem; } }

.omenu { position: fixed; inset: 0; z-index: 55; padding: 100px 24px 28px; display: flex; flex-direction: column; justify-content: space-between; background: rgba(5, 7, 16, .97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); overflow-y: auto; }
.omenu[hidden] { display: none; }
.omenu ol { list-style: none; margin: 0; padding: 0; }
.omenu li { opacity: 0; transform: translateY(18px); animation: rise .6s var(--ease) forwards; animation-delay: calc(var(--i) * 45ms); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.omenu a:not(.btn) { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; color: #eef0f6; text-decoration: none; font: 400 clamp(2.1rem, 8.5vw, 3.8rem)/1.08 var(--display); letter-spacing: -.01em; }
.omenu a:not(.btn):hover { color: var(--acc); }
.omenu sup { font: 600 .7rem var(--mono); color: var(--acc); margin-top: .7em; }
.omenu-foot { display: flex; gap: 10px; padding-top: 24px; }
.omenu-foot .btn-line { color: #fff; border-color: rgba(255, 255, 255, .3); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- command palette ---------- */
.cmdk { width: min(700px, 100% - 24px); max-height: 72vh; margin: 12vh auto auto; padding: 0; color: #eef0f6; background: #0b0f21; border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .9); overflow: hidden; }
.cmdk[open] { animation: pop .3s var(--ease); }
.cmdk::backdrop { background: rgba(3, 4, 10, .6); backdrop-filter: blur(6px); }
.cmdk-box { display: flex; flex-direction: column; max-height: 72vh; }
.cmdk-in { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); color: var(--acc); }
.cmdk-in input { flex: 1; background: none; border: 0; box-shadow: none; outline: 0; color: #fff; font: 500 1.2rem var(--body); padding: 4px 0; }
.cmdk-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; }
.cmdk-list .grp { font: 600 .66rem var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #7d86a3; padding: 12px 10px 6px; }
.cmdk-list a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 9px; color: #e6e8f2; text-decoration: none; border-left: 2px solid transparent; }
.cmdk-list a .i { color: var(--acc); }
.cmdk-list a small { margin-left: auto; color: #7d86a3; font: .74rem var(--mono); white-space: nowrap; }
.cmdk-list a[aria-selected="true"] { background: rgba(242, 163, 58, .1); border-left-color: var(--acc); }
.cmdk-list .none { padding: 20px 12px; color: #9aa2bd; }
.cmdk-foot { display: flex; gap: 18px; padding: 10px 18px; margin: 0; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .7rem; color: #7d86a3; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* ---------- live scenes ---------- */
.scene-wrap { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 70% 0%, #3b3d86 0%, #1a2058 40%, #070914 78%); }
.scene-wrap canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.scene-wrap .ridges { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 50%; }
.scene-wrap.live .ridges { display: none; }
.ridges .r1 { fill: #2c3672; } .ridges .r2 { fill: #1a2350; } .ridges .r3 { fill: var(--night); }

/* ---------- ride hero ---------- */
.ride { position: relative; background: var(--night); color: #fff; }
@media (prefers-reduced-motion: no-preference) { .js .ride { height: 210vh; } }
.ride-stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; isolation: isolate; }
.ride-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(4, 6, 14, .78) 0%, rgba(4, 6, 14, .35) 42%, rgba(4, 6, 14, 0) 68%), linear-gradient(0deg, rgba(4, 6, 14, .55), rgba(4, 6, 14, 0) 28%); }
.ride-copy { position: relative; z-index: 2; padding-top: clamp(118px, 17vh, 190px); opacity: calc(1 - var(--prog, 0) * 2.6); transform: translateY(calc(var(--prog, 0) * -90px)); }
.ride h1 { font-size: clamp(3rem, 7.6vw, 7.6rem); line-height: .95; letter-spacing: -.025em; margin-bottom: .35em; text-shadow: 0 4px 40px rgba(0, 0, 0, .35); }
.ride h1 .l1, .ride h1 .l2 { display: block; }
.ride h1 .l2 { color: var(--acc); font-style: italic; font-size: .5em; letter-spacing: -.005em; margin-top: .22em; }
.ride .lead { max-width: 44ch; font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: #d9dcea; }
.eyebrow { font: 600 .72rem var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--acc); margin-bottom: 1.1rem; display: flex; align-items: center; gap: 10px; }
.eyebrow span { display: inline-grid; place-items: center; min-width: 30px; padding: 3px 6px; border: 1px solid currentColor; border-radius: 4px; letter-spacing: .05em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.8rem; }
.ride .btn-line, .page-hero .btn-line { color: #fff; border-color: rgba(255, 255, 255, .35); }
.hud { position: absolute; z-index: 2; right: clamp(16px, 4vw, 56px); top: 50%; transform: translateY(-50%); display: grid; gap: 6px; }
.hud div { min-width: 190px; padding: 10px 16px 10px 14px; background: rgba(4, 6, 14, .42); border-left: 2px solid var(--saffron); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 0 8px 8px 0; display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 6px; }
.hud span { grid-column: 1 / -1; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: #9aa2bd; }
.hud b { font-size: 1.85rem; font-weight: 600; font-family: var(--body); font-variant-numeric: tabular-nums; color: #fff; letter-spacing: -.02em; }
.hud i { font-style: normal; font-size: .72rem; color: #9aa2bd; }
.controls { position: absolute; z-index: 3; left: 0; right: 0; bottom: 26px; width: min(1240px, 100% - 40px); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.veh, .wx { display: inline-flex; gap: 2px; padding: 4px; background: rgba(4, 6, 14, .5); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.veh button, .wx button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 7px; background: transparent; color: #c9cee0; font: 500 .74rem var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.veh button:hover, .wx button:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.veh button[aria-pressed="true"], .wx button[aria-pressed="true"] { background: var(--saffron); color: #1a1206; }
.summit { position: absolute; z-index: 3; left: 50%; top: 24%; transform: translate(-50%, 10px) scale(.96); opacity: 0; margin: 0; padding: 12px 20px; font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; color: #fff; background: rgba(4, 6, 14, .6); border: 1px solid var(--saffron); border-radius: 8px; backdrop-filter: blur(10px); transition: opacity .5s, transform .6s var(--ease); white-space: nowrap; }
.summit.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.scroll-cue { position: absolute; z-index: 3; right: clamp(110px, 9vw, 140px); bottom: 34px; margin: 0; display: flex; align-items: center; gap: 10px; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: #c9cee0; opacity: calc(1 - var(--prog, 0) * 4); }
.scroll-cue span { width: 1px; height: 34px; background: linear-gradient(var(--saffron), transparent); animation: cue 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 860px) {
  .hud { top: auto; bottom: 86px; right: 20px; left: 20px; transform: none; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .hud div { min-width: 0; padding: 7px 8px; }
  .hud b { font-size: 1.1rem; } .hud span { font-size: .52rem; letter-spacing: .1em; } .hud i { display: none; }
  .ride-copy { padding-top: 104px; } .scroll-cue { display: none; }
  .veh button span, .wx button span { display: none; } .veh button, .wx button { padding: 9px 11px; }
}

/* ---------- page hero ---------- */
.page-hero { position: relative; isolation: isolate; min-height: clamp(480px, 66vh, 660px); display: flex; align-items: flex-end; padding: 140px 0 84px; color: #fff; background: var(--night); overflow: hidden; }
.page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; z-index: 1; }
.hero-inner { position: relative; z-index: 2; }
.page-hero h1 { max-width: 17ch; text-shadow: 0 4px 40px rgba(0, 0, 0, .4); }
.page-hero .lead { max-width: 58ch; font-size: 1.15rem; color: #d9dcea; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 1.4rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--acc); }
.crumbs a { color: #c9cee0; text-decoration: none; } .crumbs a:hover { color: #fff; }
.crumbs span { color: #fff; }
.fact-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.8rem 0 0; }
.fact-row div { padding: 10px 16px 10px 14px; background: rgba(4, 6, 14, .45); border-left: 2px solid var(--saffron); border-radius: 0 8px 8px 0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); max-width: 100%; }
.fact-row dt { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: #9aa2bd; }
.fact-row dd { margin: 2px 0 0; font-weight: 620; }
.wx-corner { position: absolute; z-index: 3; right: 20px; bottom: 24px; }
.wx-corner button span { display: none; }
.split .w { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(2deg); animation: rise .9s var(--ease) forwards; animation-delay: calc(var(--i) * 55ms + .1s); }

/* ---------- console ---------- */
.console-wrap { position: relative; z-index: 4; padding-top: 28px; }
.console { display: grid; grid-template-columns: auto repeat(3, 1fr) auto; align-items: stretch; background: #0e1328; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); }
.console h2 { display: flex; align-items: center; margin: 0; padding: 0 22px; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--acc); font-weight: 600; }
.console label { display: grid; gap: 2px; padding: 12px 18px; border-left: 1px solid rgba(255, 255, 255, .08); }
.console label span { font: 600 .62rem var(--mono); letter-spacing: .18em; text-transform: uppercase; color: #7d86a3; }
.console select { background: transparent; border: 0; box-shadow: none; padding: 2px 0; color: #fff; font: 400 1.25rem var(--display); cursor: pointer; }
.console select option { color: #111; }
.console .btn { border-radius: 0; padding-inline: 1.6em; }
@media (max-width: 860px) { .console { grid-template-columns: 1fr; } .console h2 { padding: 14px 18px 0; } .console label { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); } .console .btn { padding: 1.1em; } }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--ln); padding: 20px 0; margin-top: 64px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq-track { display: flex; align-items: center; gap: 28px; width: max-content; animation: mq 70s linear infinite; }
.marquee:hover .mq-track { animation-play-state: paused; }
.mq-track span { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg2); white-space: nowrap; }
.mq-track b { color: var(--acc); font-weight: 600; margin-left: 6px; }
.mq-track i { color: var(--turq); font-style: normal; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { position: relative; padding: clamp(4.5rem, 9vw, 8rem) 0; }
.sec-head { max-width: 820px; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.sec-head.row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.sec-head.row > div { max-width: 820px; }
.sec-head h2 { margin-bottom: .3em; }
.sec-head p:last-child { color: var(--fg2); font-size: 1.1rem; max-width: 60ch; }
.grid { display: grid; gap: 18px; }
.cards-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.cards-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.cards-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.two-col.tight { gap: .9rem; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- spotlight surfaces ---------- */
.spot, .card { --mx: 50%; --my: 50%; }
.spot::after, .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(242, 163, 58, .13), transparent 45%); }
.spot:hover::after, .card:hover::after { opacity: 1; }

/* ---------- cards ---------- */
.card, .persona, .fleet, .tier, .gem, .tile, .glass { position: relative; display: flex; flex-direction: column; background: var(--s1); color: var(--fg); border: 1px solid var(--ln); border-radius: var(--r); text-decoration: none; transition: transform .45s var(--ease), border-color .3s, box-shadow .45s var(--ease); }
.persona, .fleet, .tier, .tile, .glass { padding: 1.5rem; }
.card:hover, .persona:hover, .fleet:hover, .gem:hover, .tile:hover { transform: translateY(-4px); border-color: var(--ln2); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .7); }
.card-art { position: relative; height: 150px; overflow: hidden; border-radius: var(--r) var(--r) 0 0; border-bottom: 1px solid var(--ln); }
.terrain { display: block; width: 100%; height: 100%; transition: transform 1.2s var(--ease); }
.card:hover .terrain, .gem:hover .terrain { transform: scale(1.07); }
.t-label { font: 600 10px var(--mono); fill: #fff; letter-spacing: .1em; }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem; }
.card h3 a { color: var(--fg); text-decoration: none; }
.stretched::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card p { color: var(--fg2); font-size: .97rem; }
.card-icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 1rem; border-radius: 10px; color: var(--acc); background: color-mix(in srgb, var(--acc) 11%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 24%, transparent); }
.badge { align-self: flex-start; margin-bottom: .9rem; padding: 4px 8px; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg2); border: 1px solid var(--ln2); border-radius: 4px; }
.meta { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .4rem; font-size: .88rem; color: var(--mut); }
.meta li { display: flex; gap: .5rem; align-items: flex-start; } .meta .i { margin-top: 3px; }
.tags { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { padding: 4px 10px; font: .74rem var(--mono); color: var(--fg2); border: 1px solid var(--ln); border-radius: 999px; }
.tags.lg li { font-size: .84rem; padding: 6px 12px; }
.price { margin: auto 0 0; padding-top: .6rem; font: 400 1.55rem var(--display); letter-spacing: -.02em; }
.price small { font: 500 .72rem var(--mono); color: var(--mut); letter-spacing: .04em; }
.spark { display: flex; align-items: center; gap: 10px; margin: 0 0 .4rem; font: .7rem var(--mono); color: var(--mut); letter-spacing: .06em; text-transform: uppercase; }
.spark svg { width: 120px; height: 28px; overflow: visible; }
.spark polyline { fill: none; stroke: var(--turq); stroke-width: 1.6; stroke-linejoin: round; }
.paper .spark polyline { stroke: var(--seq-5); }
.idx { font-size: .7rem; color: var(--mut); letter-spacing: .1em; margin: 0 0 .8rem; }
.persona .idx { position: absolute; top: 1.2rem; right: 1.3rem; }

/* journey route */
.route { position: relative; }
.route-svg { display: block; width: 100%; height: 110px; margin-bottom: -6px; overflow: visible; }
.route-base { fill: none; stroke: var(--ln2); stroke-width: 1.5; stroke-dasharray: 3 7; }
.route-line { fill: none; stroke: var(--saffron); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw, 1)); filter: drop-shadow(0 0 6px rgba(242, 163, 58, .6)); }
.journey { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.journey li { position: relative; padding: 1.3rem 1.1rem; background: var(--s1); border: 1px solid var(--ln); border-radius: var(--r); }
.journey .step { font-size: .66rem; letter-spacing: .14em; color: var(--mut); text-transform: uppercase; }
.j-icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; margin: .8rem 0; color: #1a1206; background: var(--saffron); box-shadow: 0 0 0 6px color-mix(in srgb, var(--saffron) 15%, transparent); }
.journey p { font-size: .9rem; color: var(--fg2); margin: 0; }
@media (max-width: 1100px) { .journey { grid-template-columns: repeat(3, 1fr); } .route-svg { display: none; } }
@media (max-width: 620px) { .journey { grid-template-columns: 1fr; } }

/* bento */
.bento { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(190px, auto); gap: 14px; }
.tile.wide { grid-column: span 2; }
.tile h3 { font-size: 1.7rem; margin-top: auto; }
.tile p { color: var(--fg2); margin: 0; max-width: 40ch; }
.tile.dark { color: #fff; border-color: transparent; background: radial-gradient(120% 140% at 0% 0%, #c0485a 0%, var(--maroon) 35%, var(--maroon-2) 100%); }
.tile.dark p { color: #f3d9dc; } .tile.dark .card-icon { color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); }
.tile .go { position: absolute; right: 1.3rem; top: 1.3rem; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--ln2); border-radius: 50%; transition: transform .4s var(--ease), background .3s, color .3s; }
.tile:hover .go { transform: rotate(-45deg); background: var(--saffron); color: #1a1206; border-color: var(--acc); }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .tile.wide { grid-column: auto; } }

.persona-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 14px; }
.persona p { color: var(--fg2); font-size: .95rem; margin: 0; }

/* gems scroller */
.scroller { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(290px, 340px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px max(20px, calc((100vw - 1240px) / 2)) 22px; scrollbar-width: thin; scrollbar-color: var(--acc) transparent; }
.gem { scroll-snap-align: start; overflow: hidden; }
.gem-body { padding: 1.2rem 1.3rem 1.4rem; }
.gem-meta { display: flex; justify-content: space-between; gap: 10px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--acc); margin: 0 0 .6rem; }
.gem p:last-child { color: var(--fg2); margin: 0; font-size: .94rem; }

/* month strip (sequential single hue) */
.month-strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
.ms { position: relative; display: grid; gap: .35rem; padding: .9rem .4rem; text-align: center; background: var(--s1); border: 1px solid var(--ln); border-radius: 8px; color: var(--fg); text-decoration: none; transition: transform .3s var(--ease), border-color .3s; }
a.ms:hover { transform: translateY(-3px); border-color: var(--ln2); }
.ms.now { border-color: var(--acc); box-shadow: 0 0 0 1px var(--saffron); }
.ms.now::before { content: "Now"; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 1px 6px; font: 700 .58rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #1a1206; background: var(--saffron); border-radius: 3px; }
.ms-m { font: 650 .8rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ms-bar { height: 70px; display: flex; align-items: flex-end; justify-content: center; }
.ms-bar i { width: 58%; height: calc(var(--v) * 100%); border-radius: 4px 4px 0 0; background: var(--c); }
.ms-t { font: .68rem var(--mono); color: var(--mut); white-space: nowrap; }
.ms-s { font-size: .68rem; color: var(--fg2); line-height: 1.2; }
.s1 { --c: var(--seq-1); } .s2 { --c: var(--seq-2); } .s3 { --c: var(--seq-3); } .s4 { --c: var(--seq-4); } .s5 { --c: var(--seq-5); }
.legend { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; }
.lg-ramp { display: inline-flex; gap: 2px; } .lg-ramp i { width: 18px; height: 10px; border-radius: 2px; background: var(--c); }
@media (max-width: 900px) { .month-strip { grid-template-columns: repeat(6, 1fr); row-gap: 14px; } }
@media (max-width: 480px) { .month-strip { grid-template-columns: repeat(4, 1fr); } .ms-s { display: none; } }
.month-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.month-card { background: var(--s1); border: 1px solid var(--ln); border-top: 4px solid var(--c); border-radius: var(--r); padding: 1.4rem; }
.month-card header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.month-card h2 { margin: 0; }
.pill { padding: 3px 8px; font: 600 .64rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg2); border: 1px solid var(--ln2); border-radius: 4px; }
.temps { display: flex; align-items: center; gap: .4rem; font-weight: 650; }

/* tiers, ticks */
.tier { border-top: 3px solid var(--saffron); }
.tier-price { font: 400 1.9rem/1 var(--display); letter-spacing: -.02em; margin: .2rem 0 1rem; }
.tier-price span { color: var(--mut); font-weight: 400; }
.tier-price small { display: block; margin-top: 6px; font: 500 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.ticks, .crosses { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .55rem; }
.ticks li { display: flex; gap: .6rem; align-items: flex-start; color: var(--fg2); }
.ticks .i { color: var(--turq); margin-top: 4px; }
.paper .ticks .i { color: var(--seq-5); }
.ticks.lg li { font-size: 1.03rem; }
.crosses li { position: relative; padding-left: 1.4rem; color: var(--fg2); }
.crosses li::before { content: "—"; position: absolute; left: 0; color: var(--mut); }
.fleet .price { margin-top: auto; }

/* trust */
.trust-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); border-top: 1px solid var(--ln); }
.trust-grid li { padding: 1.8rem 1.6rem 1.8rem 0; border-bottom: 1px solid var(--ln); }
.trust-grid li > .i { width: 30px; height: 30px; color: var(--acc); margin-bottom: .8rem; }
.trust-grid p { color: var(--fg2); margin: 0; }

/* faq */
.faq { border-top: 1px solid var(--ln); margin-bottom: 1.6rem; }
.faq details { border-bottom: 1px solid var(--ln); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 0; font: 400 1.3rem/1.3 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; font: 400 1.2rem var(--mono); color: var(--acc); border: 1px solid var(--ln2); border-radius: 50%; transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--fg2); padding: 0 3rem 1.3rem 0; margin: 0; }

/* cta */
.cta-band { padding: clamp(3rem, 7vw, 6rem) 0; background: var(--bg); }
.cta-inner { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; padding: clamp(2rem, 5vw, 4rem); color: #fff; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; background: radial-gradient(90% 120% at 100% 0%, rgba(242, 163, 58, .28), transparent 55%), radial-gradient(80% 120% at 0% 100%, rgba(155, 47, 63, .45), transparent 60%), #0c0f22; }
.cta-inner::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--f-1) 0 20%, var(--f-2) 20% 40%, var(--f-3) 40% 60%, var(--f-4) 60% 80%, var(--f-5) 80%); }
.cta-copy { max-width: 640px; }
.cta-inner h2 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.4rem); }
.cta-inner p { color: #c9cee0; margin: 0; }
.cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-inner .btn-line { color: #fff; border-color: rgba(255, 255, 255, .3); }

/* ---------- detail pages ---------- */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.detail-main > h2 { margin-top: 2.8rem; font-size: clamp(1.6rem, 3vw, 2.3rem); } .detail-main > h2:first-child { margin-top: 0; }
.prose p { font-size: 1.08rem; color: var(--fg2); max-width: 68ch; }
.book { position: sticky; top: 96px; padding: 1.6rem; background: var(--s1); border: 1px solid var(--ln); border-radius: var(--r); box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .8); }
.book-price { font: 400 2.4rem/1 var(--display); letter-spacing: -.03em; margin: .2rem 0 1rem; }
.book-price small { font: 500 .75rem var(--mono); color: var(--mut); }
@media (max-width: 960px) { .detail-grid { grid-template-columns: 1fr; } .book { position: static; } }
.timeline { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--ln2); }
.timeline li { position: relative; padding: 0 0 1.8rem 1.8rem; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--saffron); }
.timeline .day { font: 600 .68rem var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--acc); }
.timeline h3 { margin: .3rem 0 .35rem; }
.timeline p { color: var(--fg2); margin: 0 0 .35rem; }
.timeline .small { display: flex; align-items: center; gap: .4rem; color: var(--mut); font-family: var(--mono); font-size: .76rem; }
.note { display: flex; gap: 1rem; padding: 1.3rem 1.4rem; margin: 2.2rem 0 0; background: var(--s2); border-left: 3px solid var(--turq); border-radius: 0 var(--r) var(--r) 0; }
.note > .i { width: 28px; height: 28px; color: var(--turq); }
.note.warn { border-left-color: var(--maroon); } .note.warn > .i { color: #e0606f; }
.note p { color: var(--fg2); margin: 0 0 .5rem; }
.steps { padding-left: 1.2rem; display: grid; gap: .7rem; color: var(--fg2); }

/* charts */
.chart { margin: 1rem 0 0; padding: 1.3rem; background: var(--s1); border: 1px solid var(--ln); border-radius: var(--r); }
.chart figcaption { margin-bottom: .8rem; display: flex; gap: .6rem; flex-wrap: wrap; align-items: baseline; }
.chart figcaption .muted { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.chart-box { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--ln); stroke-width: 1; }
.chart .zero { stroke: var(--mut); stroke-dasharray: 3 3; }
.chart .ax { fill: var(--mut); font: 11px var(--mono); }
.chart .lbl { fill: var(--fg); font: 700 12px var(--mono); }
.chart .line { fill: none; stroke: var(--turq); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .chart:not(.in) .line { stroke-dashoffset: 1; }
.chart.in .line { transition: stroke-dashoffset 1.8s var(--ease); }
.af0 { stop-color: var(--turq); stop-opacity: .32; } .af1 { stop-color: var(--turq); stop-opacity: 0; }
.chart .dot { fill: var(--turq); stroke: var(--s1); stroke-width: 2; }
.chart .bar { fill: var(--turq); }
.chart .hit { fill: transparent; }
.chart .pt { cursor: pointer; outline: none; }
.chart .pt:hover .dot, .chart .pt:focus .dot { r: 7; fill: var(--saffron); }
.chart .pt:hover .bar, .chart .pt:focus .bar { fill: var(--saffron); }
.tip { position: absolute; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); padding: .45rem .7rem; font: 600 .74rem var(--mono); color: #1a1206; background: var(--saffron); border-radius: 6px; white-space: nowrap; }

/* tables */
.table-wrap { overflow-x: auto; margin-bottom: 1rem; background: var(--s1); border: 1px solid var(--ln); border-radius: var(--r); }
.compare { width: 100%; border-collapse: collapse; font-size: .95rem; }
.compare th, .compare td { text-align: left; padding: .9rem 1rem; border-bottom: 1px solid var(--ln); vertical-align: top; }
.compare thead th { font: 600 .66rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); background: var(--s2); }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare tbody tr:hover { background: color-mix(in srgb, var(--saffron) 5%, transparent); }
.compare th a { display: inline-flex; gap: .5rem; align-items: center; font-weight: 650; color: var(--fg); text-decoration: none; }
.num { font-family: var(--mono); font-size: .88rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* filters, chips */
.filters { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 1rem; padding: 1.1rem 1.2rem; margin-bottom: 1.8rem; align-items: end; }
.filter-count { margin: 0 0 .7rem; color: var(--mut); white-space: nowrap; font-family: var(--mono); font-size: .76rem; }
@media (max-width: 860px) { .filters { grid-template-columns: 1fr 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.8rem; }
.chips button { padding: .5rem 1rem; font: 600 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg2); background: transparent; border: 1px solid var(--ln2); border-radius: 999px; cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--saffron); border-color: var(--acc); color: #1a1206; }
[data-filter-item][hidden] { display: none; }
.empty { padding: 2rem; text-align: center; border: 1px dashed var(--ln2); border-radius: var(--r); }

/* forms */
label { display: grid; gap: .35rem; font-weight: 600; font-size: .88rem; color: var(--fg2); }
input, select, textarea { width: 100%; padding: .75rem .85rem; font: 500 1rem var(--body); color: var(--fg); background: var(--s2); border: 1px solid var(--ln); border-radius: 8px; transition: border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--saffron) 18%, transparent); }
input[type=range] { padding: 0; background: none; border: 0; box-shadow: none; accent-color: var(--acc); }
input[type=radio], input[type=checkbox] { width: auto; accent-color: var(--acc); }
fieldset { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; padding: .7rem 1rem; border: 1px solid var(--ln); border-radius: 8px; }
legend { padding: 0 .35rem; font: 600 .66rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.radio { display: inline-flex; align-items: center; gap: .5rem; font-weight: 550; }
.planner-grid { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 980px) { .planner-grid { grid-template-columns: 1fr; } }
.planner, .enquiry { display: grid; gap: 1rem; padding: 1.7rem; background: var(--s1); border: 1px solid var(--ln); border-radius: 12px; }
.planner h2, .enquiry h2 { font-size: 1.5rem; margin: 0; }
output { font: 600 .9rem var(--mono); color: var(--fg); }
.estimate { padding: 1.1rem 1.2rem; background: var(--s2); border-left: 3px solid var(--saffron); border-radius: 0 8px 8px 0; }
.estimate p { margin: 0; }
.est-val { font: 400 2.1rem/1.15 var(--display); letter-spacing: -.02em; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { margin: 0; font-weight: 600; min-height: 1.2em; }
.form-status.ok { color: var(--turq); } .form-status.err { color: #ff8a7a; }
.form-done { padding: 1.4rem; border: 1px solid color-mix(in srgb, var(--turq) 40%, transparent); background: color-mix(in srgb, var(--turq) 8%, transparent); border-radius: 10px; }
.contact-list { list-style: none; padding: 0; display: grid; gap: 1.1rem; }
.contact-list li { display: flex; gap: .9rem; align-items: center; font-size: 1.05rem; }
.contact-list .i { color: var(--acc); }
.sitemap-cols { columns: 3 260px; column-gap: 3rem; }
.sitemap-cols > div { break-inside: avoid; margin-bottom: 1.8rem; }
.sitemap-cols ul { padding-left: 1rem; }

/* ---------- footer ---------- */
.site-footer { position: relative; padding: 0 0 2rem; background: #05060e; color: #b9bfd3; overflow: hidden; }
.flagbar { display: grid; grid-template-columns: repeat(5, 1fr); height: 4px; }
.flagbar i:nth-child(1) { background: var(--f-1); } .flagbar i:nth-child(2) { background: var(--f-2); } .flagbar i:nth-child(3) { background: var(--f-3); } .flagbar i:nth-child(4) { background: var(--f-4); } .flagbar i:nth-child(5) { background: var(--f-5); }
.foot-big { margin: clamp(2rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem); font: italic 400 clamp(5rem, 19vw, 17rem)/.85 var(--display); letter-spacing: -.03em; color: rgba(255, 255, 255, .06); -webkit-text-stroke: 1px rgba(242, 163, 58, .22); user-select: none; }
.site-footer a { color: #e6e8f2; text-decoration: none; } .site-footer a:hover { color: var(--acc); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.foot-brand .brand { color: #fff; margin-bottom: 1.2rem; }
.foot-brand p { max-width: 46ch; }
.foot-h { font: 600 .66rem var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--acc); margin-bottom: 1rem; }
.site-footer address { font-style: normal; margin-bottom: 1rem; }
.foot-base { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 3.5rem; padding-top: 1.3rem; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #7d86a3; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* ---------- Julley concierge ---------- */
.julley { position: fixed; right: 20px; bottom: 20px; z-index: 70; }
.j-orb { position: relative; display: flex; align-items: center; flex-direction: row-reverse; gap: 12px; text-decoration: none; transition: opacity .25s, transform .25s; }
.j-core { position: relative; z-index: 1; width: 60px; height: 60px; display: grid; place-items: center; background: #0b0f21; border-radius: 50%; box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .7); transition: transform .4s var(--ease); }
.j-core .j-mark { width: 44px; height: 44px; }
.j-ring { position: absolute; right: -5px; top: 50%; width: 70px; height: 70px; margin-top: -35px; border-radius: 50%; background: conic-gradient(var(--f-1), var(--f-2), var(--f-3), var(--f-4), var(--f-5), var(--saffron), var(--f-1)); -webkit-mask: radial-gradient(circle, transparent 31px, #000 32px); mask: radial-gradient(circle, transparent 31px, #000 32px); animation: spin 7s linear infinite; filter: drop-shadow(0 0 8px rgba(242, 163, 58, .45)); }
.j-orb::before { content: ""; position: absolute; right: -14px; top: 50%; width: 88px; height: 88px; margin-top: -44px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 163, 58, .25), transparent 65%); animation: breathe 3.6s ease-in-out infinite; }
.j-orb:hover .j-core { transform: scale(1.06); }
.j-label { padding: 10px 14px; font: 600 .74rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(9, 11, 24, .9); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; opacity: 0; transform: translateX(10px); transition: opacity .3s, transform .4s var(--ease); pointer-events: none; white-space: nowrap; }
.j-orb:hover .j-label, .julley.peek .j-label { opacity: 1; transform: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.18); opacity: .5; } }
.julley.open .j-orb { opacity: 0; pointer-events: none; transform: scale(.8); }
.j-panel { position: fixed; right: 20px; bottom: 20px; width: min(410px, 100vw - 24px); height: min(640px, 100vh - 110px); display: flex; flex-direction: column; color: #eef0f6; background: rgba(9, 12, 26, .97); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); overflow: hidden; transform-origin: bottom right; animation: jopen .45s var(--ease); }
.j-panel[hidden] { display: none; }
.j-panel::before { content: ""; height: 3px; flex: none; background: linear-gradient(90deg, var(--f-1) 0 20%, var(--f-2) 20% 40%, var(--f-3) 40% 60%, var(--f-4) 60% 80%, var(--f-5) 80%); }
@keyframes jopen { from { opacity: 0; transform: translateY(16px) scale(.94); } }
.j-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.j-av .j-mark { width: 40px; height: 40px; }
.j-head h2 { font-size: 1.35rem; margin: 0; }
.j-head p { display: flex; align-items: center; gap: 7px; margin: 0; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: #9aa2bd; }
.j-head div { flex: 1; }
.j-ic { width: 38px; height: 38px; display: grid; place-items: center; color: #c9cee0; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; cursor: pointer; text-decoration: none; }
.j-ic:hover { color: #fff; border-color: rgba(255, 255, 255, .25); }
.j-ic .i { width: 18px; height: 18px; }
.j-log { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.msg { max-width: 88%; padding: 10px 14px; font-size: .94rem; line-height: 1.5; border-radius: 14px; animation: rise .4s var(--ease) both; opacity: 0; transform: translateY(8px); }
.msg.bot { align-self: flex-start; background: #141a35; border: 1px solid rgba(255, 255, 255, .06); border-top-left-radius: 4px; }
.msg.me { align-self: flex-end; background: var(--saffron); color: #1a1206; border-top-right-radius: 4px; font-weight: 550; }
.msg p { margin: 0 0 .5em; } .msg p:last-child { margin: 0; }
.msg a { color: var(--saffron-2); }
.j-cards { display: grid; gap: 6px; margin-top: 10px; }
.j-cards a { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 9px 11px; color: #eef0f6; text-decoration: none; font-size: .86rem; font-weight: 600; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: 9px; }
.j-cards a small { font: .7rem var(--mono); color: #9aa2bd; white-space: nowrap; }
.j-cards a:hover { border-color: var(--acc); }
.j-act { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.j-act .btn { padding: .6em .9em; font-size: .82rem; }
.j-act .btn-line { color: #fff; border-color: rgba(255, 255, 255, .25); }
.j-lead { display: grid; gap: 8px; margin-top: 10px; }
.j-lead input { padding: .6rem .7rem; font-size: .9rem; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); color: #fff; }
.typing { display: inline-flex; gap: 4px; padding: 14px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa2bd; animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { transform: translateY(-4px); opacity: .4; } }
.j-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
.j-chips button { padding: 7px 12px; font: 600 .72rem var(--mono); letter-spacing: .04em; color: #e6e8f2; background: transparent; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; cursor: pointer; transition: .2s; }
.j-chips button:hover { border-color: var(--acc); color: var(--acc); }
.j-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
.j-input input { flex: 1; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); color: #fff; }
.j-input button { flex: none; width: 46px; display: grid; place-items: center; background: var(--saffron); color: #1a1206; border: 0; border-radius: 8px; cursor: pointer; }
@media (max-width: 560px) { .j-panel { right: 8px; left: 8px; bottom: 8px; width: auto; height: min(78vh, 640px); } .julley { right: 14px; bottom: 14px; } .j-label { display: none; } }

/* ---------- reveal & motion ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 70ms); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal, .split .w, .omenu li, .msg { opacity: 1 !important; transform: none !important; }
  .lm-road { stroke-dashoffset: 0; }
  .ride-copy { opacity: 1; transform: none; }
}
@media print { .dock, .julley, .cta-band, .scene-wrap, .controls, .hud, body::before { display: none !important; } .page-hero, .ride { color: #000; background: none; } }

/* ---------- photography ---------- */
.card-art .photo, .gem .card-art .photo { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; filter: saturate(1.05) contrast(1.03); }
.card:hover .photo, .gem:hover .photo { transform: scale(1.06); }
.card-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4, 6, 14, 0) 55%, rgba(4, 6, 14, .45)); }
.credit { position: absolute; z-index: 2; right: 8px; bottom: 7px; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 7px; font: 500 .6rem/1.5 var(--body); letter-spacing: .03em; color: rgba(255, 255, 255, .82); background: rgba(4, 6, 14, .5); border-radius: 3px; text-decoration: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: .75; transition: opacity .25s; }
.credit:hover { opacity: 1; color: #fff; text-decoration: underline; }
.page-hero.has-photo { min-height: clamp(520px, 78vh, 760px); }
.photo-wrap { background: var(--night); }
.photo-wrap .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); animation: kenburns 24s ease-out forwards; }
.photo-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 6, 14, .82) 0%, rgba(4, 6, 14, .45) 45%, rgba(4, 6, 14, .1) 75%), linear-gradient(0deg, rgba(7, 9, 20, .9) 0%, rgba(7, 9, 20, 0) 45%), linear-gradient(180deg, rgba(4, 6, 14, .55) 0%, rgba(4, 6, 14, 0) 22%); }
@keyframes kenburns { to { transform: scale(1.12) translate(-1.5%, -1%); } }
.hero-credit { right: 20px; bottom: 22px; font-size: .64rem; }
@media (max-width: 700px) { .photo-wrap::after { background: linear-gradient(0deg, rgba(7, 9, 20, .95) 10%, rgba(7, 9, 20, .35) 70%, rgba(4, 6, 14, .6)); } }


/* ---------- light theme: chrome, panels, console ---------- */
.ride-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; z-index: 1; pointer-events: none; background: linear-gradient(transparent, var(--bg)); opacity: var(--lt, 0); }
.console { background: var(--s1); border-color: var(--ln); }
.console label { border-left-color: var(--ln); }
.console select { color: var(--fg); }
.console label span { color: var(--mut); }
.console select option { color: #111; }
:is(:root[data-theme="light"]) { --lt: 1; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) { --lt: 1; } }

:root[data-theme="light"] .dock-in { color: #1a160f; background: rgba(255, 252, 246, .74); border-color: rgba(26, 22, 15, .1); box-shadow: 0 18px 50px -28px rgba(40, 30, 10, .45); }
:root[data-theme="light"] .dock.solid .dock-in { background: rgba(255, 252, 246, .92); }
:root[data-theme="light"] .mt { color: #4b4336; }
:root[data-theme="light"] .mi:hover .mt, :root[data-theme="light"] .mi:focus-within .mt, :root[data-theme="light"] .mt[aria-current] { color: #1a160f; background: rgba(26, 22, 15, .06); }
:root[data-theme="light"] .lehnow { color: #776d5c; } :root[data-theme="light"] .lehnow time { color: #1a160f; }
:root[data-theme="light"] .cmdk-btn, :root[data-theme="light"] .theme-btn { color: #4b4336; border-color: rgba(26, 22, 15, .14); background: rgba(26, 22, 15, .03); }
:root[data-theme="light"] .cmdk-btn:hover, :root[data-theme="light"] .theme-btn:hover { color: #1a160f; border-color: rgba(26, 22, 15, .3); }
:root[data-theme="light"] kbd { color: #776d5c; border-color: rgba(26, 22, 15, .2); }
:root[data-theme="light"] .menu-btn { background: rgba(26, 22, 15, .06); } :root[data-theme="light"] .menu-btn span { background: #1a160f; }
:root[data-theme="light"] .mega { color: #1a160f; background: rgba(255, 252, 246, .98); border-color: rgba(26, 22, 15, .1); box-shadow: 0 40px 80px -36px rgba(40, 30, 10, .45); }
:root[data-theme="light"] .mega-list a, :root[data-theme="light"] .mega-icons a, :root[data-theme="light"] .mega-tags a { color: #1a160f; }
:root[data-theme="light"] .mega-list a:hover, :root[data-theme="light"] .mega-icons a:hover { background: rgba(26, 22, 15, .05); }
:root[data-theme="light"] .mega-list a small, :root[data-theme="light"] .mega-icons small { color: #776d5c; }
:root[data-theme="light"] .mega-tags a { border-color: rgba(26, 22, 15, .16); }
:root[data-theme="light"] .mega-note { color: #4b4336; }
:root[data-theme="light"] .omenu { background: rgba(245, 240, 230, .98); }
:root[data-theme="light"] .omenu a:not(.btn) { color: #1a160f; } :root[data-theme="light"] .omenu li { border-color: rgba(26, 22, 15, .1); }
:root[data-theme="light"] .omenu-foot .btn-line { color: #1a160f; border-color: rgba(26, 22, 15, .3); }
:root[data-theme="light"] .cmdk { color: #1a160f; background: #fffcf6; border-color: rgba(26, 22, 15, .12); }
:root[data-theme="light"] .cmdk-in { border-color: rgba(26, 22, 15, .1); } :root[data-theme="light"] .cmdk-in input { color: #1a160f; }
:root[data-theme="light"] .cmdk-list a { color: #1a160f; } :root[data-theme="light"] .cmdk-list a[aria-selected="true"] { background: rgba(161, 89, 11, .1); }
:root[data-theme="light"] .cmdk-foot, :root[data-theme="light"] .cmdk-list .grp, :root[data-theme="light"] .cmdk-list a small { color: #776d5c; border-color: rgba(26, 22, 15, .1); }
:root[data-theme="light"] .j-panel { color: #1a160f; background: rgba(255, 252, 246, .98); border-color: rgba(26, 22, 15, .1); box-shadow: 0 60px 120px -40px rgba(40, 30, 10, .5); }
:root[data-theme="light"] .j-head { border-color: rgba(26, 22, 15, .1); } :root[data-theme="light"] .j-head p { color: #776d5c; }
:root[data-theme="light"] .j-ic { color: #4b4336; background: rgba(26, 22, 15, .04); border-color: rgba(26, 22, 15, .1); }
:root[data-theme="light"] .msg.bot { background: #f1eadd; border-color: rgba(26, 22, 15, .06); }
:root[data-theme="light"] .msg a { color: #8e2a39; }
:root[data-theme="light"] .j-cards a { color: #1a160f; background: #fffcf6; border-color: rgba(26, 22, 15, .12); } :root[data-theme="light"] .j-cards a small { color: #776d5c; }
:root[data-theme="light"] .j-chips button { color: #1a160f; border-color: rgba(26, 22, 15, .18); }
:root[data-theme="light"] .j-chips button:hover { color: #a1590b; border-color: #a1590b; }
:root[data-theme="light"] .j-input { border-color: rgba(26, 22, 15, .1); }
:root[data-theme="light"] .j-input input, :root[data-theme="light"] .j-lead input { color: #1a160f; background: #fff; border-color: rgba(26, 22, 15, .14); }
:root[data-theme="light"] .j-act .btn-line { color: #1a160f; border-color: rgba(26, 22, 15, .25); }
:root[data-theme="light"] .typing i { background: #776d5c; }
:root[data-theme="light"] .card:hover, :root[data-theme="light"] .persona:hover, :root[data-theme="light"] .fleet:hover, :root[data-theme="light"] .gem:hover, :root[data-theme="light"] .tile:hover { box-shadow: 0 30px 60px -38px rgba(60, 40, 10, .4); }
:root[data-theme="light"] .spot::after, :root[data-theme="light"] .card::after { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(161, 89, 11, .09), transparent 45%); }
:root[data-theme="light"] body::before { opacity: .04; mix-blend-mode: multiply; }

/* theme toggle */
.theme-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid rgba(255, 255, 255, .12); border-radius: 9px; background: rgba(255, 255, 255, .04); color: #b9bfd3; cursor: pointer; transition: border-color .2s, color .2s; }
.theme-btn:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.theme-btn .i { width: 18px; height: 18px; }
.theme-btn .t-sun { display: none; }
:root[data-theme="light"] .theme-btn .t-sun { display: block; } :root[data-theme="light"] .theme-btn .t-moon { display: none; }