/* trailivo.com — the network hub.
 * One dark, cinematic hero (the globe) opening into calm, warm sections.
 * Only the globe moves a lot; everything else stays still. */

:root {
  --night: #060b11;
  --night-2: #0a131c;
  --night-3: #101c27;
  --mist: #a7b4bf;
  --mist-2: #7d8b97;
  --line-dark: rgba(255, 255, 255, 0.09);
  --snow: #f4efe6;
  --paper: #f5f1e8;
  --paper-2: #ebe4d5;
  --ink: #14201a;
  --ink-2: #4b5a51;
  --moss: #2d5016;
  --terra: #b4552f;
  --gold: #e2b25a;
  --gold-2: #f0c879;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --panel-w: clamp(380px, 31vw, 470px);
  --nav-h: 68px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; margin: 0; font-optical-sizing: auto; }
h1 em, h2 em { font-style: italic; font-weight: 300; }
p { margin: 0; }
abbr { text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--gold); color: var(--night); padding: 10px 14px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }
.eyebrow { font: 600 12px/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--terra); margin-bottom: 14px; }
.link { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px; border: 1px solid transparent;
  font: 600 14px/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn .i-arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease-out); }
.btn:hover .i-arrow { transform: translateX(3px); }
.btn-gold { background: var(--gold); color: #1b1408; }
.btn-gold:hover { background: var(--gold-2); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.22); color: var(--snow); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.5); }
.btn-light { background: var(--snow); color: var(--night); }
.btn-light:hover { background: #fff; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--nav-h);
  display: flex; align-items: center; gap: 28px; padding: 0 28px;
  color: var(--snow);
  transition: background .35s, box-shadow .35s, color .35s;
}
.nav.is-solid { background: rgba(6, 11, 17, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line-dark); }
.wordmark { font: 600 15px/1 var(--sans); letter-spacing: 0.34em; text-decoration: none; color: inherit; }
.nav nav { margin-left: auto; }
.nav-links { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; }
.nav-links a { font-size: 14px; text-decoration: none; color: rgba(244, 239, 230, 0.78); transition: color .2s; }
.nav-links a:hover { color: var(--snow); }
.nav-cta { font: 600 13px/1 var(--sans); text-decoration: none; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(244, 239, 230, 0.28); transition: border-color .2s, background .2s; }
.nav-cta:hover { border-color: var(--gold); background: rgba(226, 178, 90, 0.1); }

/* ---------- Hero ---------- */
.hero {
  position: relative; height: 100svh; min-height: 660px; overflow: hidden;
  color: var(--snow);
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 78%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 12%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 64%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 58%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 66% 30%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 36% 42%, rgba(255,255,255,.25) 50%, transparent 51%),
    radial-gradient(1px 1px at 20% 90%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(ellipse 70% 80% at 34% 52%, #0f2233 0%, #08111a 48%, var(--night) 78%);
}
.globe { position: absolute; inset: 0; }
.globe .maplibregl-canvas { outline: none; }
.globe-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,11,17,.72) 0, rgba(6,11,17,0) 150px),
    linear-gradient(0deg, rgba(6,11,17,.7) 0, rgba(6,11,17,.2) 170px, rgba(6,11,17,0) 260px);
}
.hero.is-loading .globe { opacity: 0; }
/* Google's globe has no camera padding, so on wide screens it lives only in
   the part of the hero the trail panel does not cover. */
@media (min-width: 901px) {
  .hero.engine-google .globe { right: var(--panel-w); }
}
.globe gmp-map-3d { display: block; width: 100%; height: 100%; }
.globe { transition: opacity 1.2s var(--ease-out); }

/* Lower-third caption over the globe */
.caption {
  position: absolute; left: 40px; bottom: 92px; z-index: 5; max-width: min(560px, calc(100% - var(--panel-w) - 80px));
  pointer-events: none; opacity: 0; transform: translateY(10px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.caption.is-on { opacity: 1; transform: none; }
/* A soft pool of shadow behind the card keeps it readable over desert and snow. */
.caption::before {
  content: ""; position: absolute; z-index: -1; inset: -90px -140px -70px -60px; pointer-events: none;
  background: radial-gradient(ellipse 60% 62% at 34% 58%, rgba(6,11,17,.86) 0%, rgba(6,11,17,.58) 48%, rgba(6,11,17,0) 100%);
}
.caption-kicker { font: 600 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--cl, var(--gold)); margin-bottom: 10px; }
.caption-name { font: 300 clamp(34px, 3.6vw, 56px)/1.02 var(--serif); letter-spacing: -0.025em; text-shadow: 0 2px 30px rgba(0,0,0,.5); }
.caption-meta { margin-top: 10px; font-size: 14px; color: rgba(244,239,230,.82); text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.caption-tagline { margin-top: 12px; font: italic 300 18px/1.45 var(--serif); color: rgba(244,239,230,.92); max-width: 44ch; text-shadow: 0 1px 14px rgba(0,0,0,.7); }
.caption-ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.caption-ctas:empty { display: none; }
.caption.is-on .caption-ctas a { pointer-events: auto; }
.caption-ctas .btn-ghost { background: rgba(6,11,17,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

.globe-controls { position: absolute; left: 40px; bottom: 36px; z-index: 6; display: flex; gap: 8px; }
.gc-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 11px;
  border-radius: 999px; border: 1px solid var(--line-dark); background: rgba(10,19,28,.66);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 12.5px; font-weight: 500; color: rgba(244,239,230,.86); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.gc-btn[hidden] { display: none; }
.gc-btn:hover { border-color: rgba(255,255,255,.3); color: var(--snow); }
.gc-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gc-btn .i-play { display: none; fill: currentColor; stroke: none; }
.gc-btn[aria-pressed="true"] .i-play { display: block; }
.gc-btn[aria-pressed="true"] .i-pause { display: none; }

/* Attribution sits at the bottom-left, under the globe controls' row */
.globe .maplibregl-ctrl-bottom-left { left: var(--attr-left, 0); }
.globe .maplibregl-ctrl-attrib { background: rgba(6,11,17,.55); color: rgba(244,239,230,.6); font-size: 10.5px; }
.globe .maplibregl-ctrl-attrib a { color: rgba(244,239,230,.75); }
.globe .maplibregl-ctrl-attrib-button { filter: invert(1) opacity(.7); background-color: transparent; }
.globe .maplibregl-ctrl-attrib.maplibregl-compact { background: rgba(6,11,17,.55); }
.globe .maplibregl-ctrl-bottom-right { right: var(--panel-w); }

/* Globe markers (one per trail). MapLibre positions .gmark and sets its
   opacity (far side of the Earth); our states live on the inner button. */
.gmark { width: 22px; height: 22px; }
.gmark-btn { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; transition: opacity .8s; }
.globe.markers-on .gmark-btn { opacity: 1; }
.globe.is-focused .gmark-btn { opacity: 0; pointer-events: none; transition: opacity .4s; }
.gmark-dot { position: absolute; inset: 6px; border-radius: 50%; background: var(--cl); box-shadow: 0 0 0 2px rgba(6,11,17,.65), 0 0 14px 2px var(--cl); }
.gmark-btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--cl); opacity: 0; animation: pulse 2.8s var(--ease-out) infinite; animation-delay: var(--delay, 0s); }
.gmark-label {
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 4px);
  white-space: nowrap; padding: 5px 10px; border-radius: 999px;
  background: rgba(6,11,17,.82); border: 1px solid var(--line-dark);
  font: 500 12px/1 var(--sans); color: var(--snow); opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s var(--ease-out);
}
.gmark-btn:hover .gmark-label, .gmark.is-hot .gmark-label { opacity: 1; transform: translate(-50%, 0); }
.gmark.is-soon .gmark-dot { background: transparent; box-shadow: 0 0 0 2px var(--cl), 0 0 12px 1px var(--cl); }
@keyframes pulse { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }

/* Start / finish pins of the focused trail */
.gpin { pointer-events: none; }
.gpin-in { display: flex; align-items: center; gap: 8px; animation: pinIn .6s var(--ease-out) both; }
.gpin-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--snow); box-shadow: 0 0 0 3px var(--cl), 0 0 18px 4px rgba(0,0,0,.35); flex: none; }
.gpin-text { padding: 6px 10px; border-radius: 8px; background: rgba(6,11,17,.84); border: 1px solid var(--line-dark); color: var(--snow); font: 500 12.5px/1.15 var(--sans); white-space: nowrap; }
.gpin.is-quiet .gpin-text { visibility: hidden; }
/* A hidden name's dot stays under the names still showing. */
.gpin { z-index: 1; }
.gpin.is-quiet { z-index: 0; }
/* A floated name's stem runs under the names it climbs past. */
.gpin.is-raised { z-index: 0; }
/* The name left of, or centred above, its dot, which stays on its spot.
 * `translate`, not `transform`: pinIn owns transform. */
.gpin.is-flip .gpin-in { flex-direction: row-reverse; translate: calc(-100% + 12px) 0; }
.gpin.is-above .gpin-in { flex-direction: column-reverse; translate: calc(-50% + 6px) calc(-50% + 6px); gap: calc(8px + var(--raise, 0px)); }
/* A name floated higher than the gap shows its stem down to the dot. */
.gpin-text { position: relative; }
.gpin.is-above .gpin-text::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: calc(8px + var(--raise, 0px)); background: rgba(255,250,240,.75); }
.gpin-text small { display: block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cl); margin-bottom: 3px; font-weight: 600; }
@keyframes pinIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- The panel (trail list) ---------- */
.panel {
  position: absolute; z-index: 8; top: 0; right: 0; bottom: 0; width: var(--panel-w);
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + 22px) 0 0;
  background: linear-gradient(270deg, rgba(6,11,17,.95) 0%, rgba(6,11,17,.88) 70%, rgba(6,11,17,.78) 100%);
  border-left: 1px solid var(--line-dark);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.panel-head { padding: 0 30px 18px; }
.panel .eyebrow { color: var(--gold); }
.panel h1 { font-size: clamp(30px, 2.5vw, 40px); line-height: 1.06; }
.panel h1 em { color: var(--gold-2); }
.lede { margin-top: 14px; color: var(--mist); font-size: 14.5px; line-height: 1.55; }
.lede [data-total] { color: var(--snow); font-weight: 600; }
.hint-touch { display: none; }
@media (hover: none) { .hint-hover { display: none; } .hint-touch { display: inline; } }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--line-dark); background: rgba(255,255,255,.03);
  font-size: 12.5px; font-weight: 500; color: rgba(244,239,230,.78); cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.chip:hover { border-color: rgba(255,255,255,.26); color: var(--snow); }
.chip[aria-pressed="true"] { background: var(--snow); border-color: var(--snow); color: var(--night); }
.chip-season .dot { width: 7px; height: 7px; border-radius: 50%; background: #7bd88f; box-shadow: 0 0 8px #7bd88f; }

.trail-list {
  list-style: none; margin: 0; padding: 4px 18px 28px; overflow-y: auto; flex: 1;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
  mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%);
}
.tl-group { padding: 16px 12px 6px; font: 600 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mist-2); }
.tl-group.is-hidden { display: none; }
.tl-item { position: relative; border-radius: 14px; transition: background .3s, opacity .3s; }
.tl-item.is-hidden { display: none; }
.tl-item:hover, .tl-item.is-active { background: rgba(255,255,255,.055); }
.tl-item.is-active { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 30%, transparent), rgba(255,255,255,.04) 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.tl-main {
  width: 100%; display: grid; grid-template-columns: 4px 1fr 58px; align-items: center; gap: 14px;
  padding: 10px 10px 10px 12px; border: 0; background: none; text-align: left; cursor: pointer; border-radius: 14px;
}
.tl-swatch { width: 4px; height: 34px; border-radius: 4px; background: var(--cl); box-shadow: 0 0 12px color-mix(in srgb, var(--cl) 60%, transparent); transition: height .3s var(--ease-out); }
.tl-item.is-active .tl-swatch { height: 44px; }
.tl-item[data-status="coming_soon"] .tl-swatch { background: repeating-linear-gradient(180deg, var(--cl) 0 5px, transparent 5px 9px); box-shadow: none; }
.tl-name { display: block; font: 400 19px/1.2 var(--serif); letter-spacing: -0.01em; color: var(--snow); }
.tl-meta { display: block; margin-top: 4px; font-size: 12.5px; color: var(--mist); }
.tl-thumb { width: 58px; height: 58px; border-radius: 10px; object-fit: cover; opacity: .82; transition: opacity .3s, transform .4s var(--ease-out); }
.tl-item:hover .tl-thumb, .tl-item.is-active .tl-thumb { opacity: 1; }

.tl-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.tl-item.is-active .tl-detail { grid-template-rows: 1fr; }
.tl-detail-inner { overflow: hidden; min-height: 0; padding: 0 16px 0 30px; }
.tl-item.is-active .tl-detail-inner { padding-bottom: 18px; }
.tl-region { font-size: 12px; letter-spacing: .06em; color: var(--cl); font-weight: 600; text-transform: uppercase; }
.tl-tagline { margin-top: 6px; color: rgba(244,239,230,.9); font-size: 14.5px; line-height: 1.5; }
.tl-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; margin: 14px 0 0; }
.tl-stats div { border-top: 1px solid var(--line-dark); padding-top: 8px; }
.tl-stats dt { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mist-2); }
.tl-stats dd { margin: 3px 0 0; font-size: 13.5px; color: var(--snow); font-weight: 500; }
.tl-for { margin-top: 14px; font: italic 300 15px/1.45 var(--serif); color: rgba(244,239,230,.86); }
.tl-for strong { display: block; font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: var(--mist-2); margin-bottom: 6px; }
.tl-ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tl-ctas .btn { padding: 9px 14px; font-size: 13px; }

.tl-item.is-hint:not(.is-active) { background: rgba(255,255,255,.055); }

/* No WebGL or no data: a still photograph instead of the globe */
.hero.no-globe .globe { background: url(../img/lw-oludeniz-ridge-1600.webp) center / cover; opacity: .7; }
.hero.no-globe .globe-controls, .hero.no-globe .caption { display: none; }

/* Desktop: a row never changes height when it becomes active, so hovering
   cannot shift the list under a still mouse and pick the next trail by
   accident. The active trail's details live in the caption card instead. */
@media (min-width: 901px) {
  .tl-detail { display: none; }
}

/* Auto-tour progress on the active row */
.tl-progress { position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px; background: var(--cl); transform-origin: left; transform: scaleX(0); opacity: 0; }
.tl-item.is-touring .tl-progress { opacity: .9; animation: tourBar var(--tour-ms, 9000ms) linear forwards; }
@keyframes tourBar { to { transform: scaleX(1); } }

.panel-empty { padding: 16px 30px; color: var(--mist); font-size: 14px; }

.scroll-cue { position: absolute; left: calc((100% - var(--panel-w)) / 2); bottom: 26px; z-index: 6; width: 26px; height: 40px; margin-left: -13px; border-radius: 14px; border: 1.5px solid rgba(244,239,230,.35); }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--snow); animation: cue 2.2s var(--ease-out) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Numbers ---------- */
.numbers { background: var(--night); color: var(--snow); padding: 64px 0 72px; border-top: 1px solid var(--line-dark); }
.numbers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.num { border-left: 1px solid var(--line-dark); padding-left: 22px; }
.num-value { display: block; font: 300 clamp(44px, 5vw, 72px)/1 var(--serif); letter-spacing: -0.03em; color: var(--gold-2); font-variant-numeric: lining-nums; }
.num-label { display: block; margin-top: 12px; font-size: 14px; color: var(--mist); max-width: 22ch; }

/* ---------- Sections ---------- */
.section { padding: 120px 0; }
section[id] { scroll-margin-top: var(--nav-h); }
.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head h2, .apps-copy h2 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.04; }
.section-lede { margin-top: 18px; font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 60ch; }

/* Trail cards */
.cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.card {
  position: relative; grid-column: span var(--span, 2); min-height: 460px; border-radius: 20px; overflow: hidden;
  display: flex; align-items: flex-end; text-decoration: none; color: var(--snow); background: var(--night-3);
  isolation: isolate;
}
.card-wide { min-height: 540px; }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease-out); }
.card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,11,17,0) 30%, rgba(6,11,17,.55) 62%, rgba(6,11,17,.92) 100%); }
.card:hover img { transform: scale(1.045); }
.card-body { display: flex; flex-direction: column; gap: 8px; padding: 28px; }
.card-kicker { font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--cl); }
.card-name { font: 400 clamp(28px, 2.6vw, 38px)/1.05 var(--serif); letter-spacing: -0.02em; }
.card-meta { font-size: 13.5px; color: rgba(244,239,230,.8); }
.card-for { font: italic 300 16px/1.45 var(--serif); color: rgba(244,239,230,.88); max-width: 46ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 600; font-size: 14px; color: var(--gold-2); }
.card-go .i-arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .25s var(--ease-out); }
.card:hover .card-go .i-arrow { transform: translateX(4px); }
.card-soon img { filter: saturate(.75); }

/* Photo mosaic */
.seen { padding-top: 0; }
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; grid-auto-flow: dense; gap: 12px; }
.tile { position: relative; padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: pointer; background: var(--paper-2); isolation: isolate; text-align: left; }
.tile-big { grid-column: span 2; grid-row: span 2; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s var(--ease-out); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,11,17,0) 55%, rgba(6,11,17,.72) 100%); opacity: .9; transition: opacity .3s; }
.tile:hover img { transform: scale(1.05); }
.tile-cap { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; flex-direction: column; gap: 2px; color: var(--snow); }
.tile-place { font: 400 17px/1.2 var(--serif); }
.tile-big .tile-place { font-size: 24px; }
.tile-trail { font: 600 10.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cl); }

/* Season calendar */
.when { background: var(--paper-2); }
.calendar { background: var(--paper); border-radius: 20px; padding: 10px 24px 18px; box-shadow: 0 1px 0 rgba(20,32,26,.05), 0 30px 60px -40px rgba(20,32,26,.35); overflow-x: auto; }
.cal-row { display: grid; grid-template-columns: minmax(190px, 1.5fr) repeat(12, minmax(34px, 1fr)); align-items: center; gap: 6px; padding: 10px 0; border-bottom: 1px solid rgba(20,32,26,.07); min-width: 720px; }
.cal-row:last-child { border-bottom: 0; }
.cal-head { font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding: 14px 0; }
.cal-head .cal-m { text-align: center; position: relative; }
.cal-m-long { display: none; }
.cal-head .cal-m abbr { display: inline-block; padding: 6px 0; width: 100%; border-radius: 8px; }
.cal-head .cal-m.is-now abbr { background: var(--ink); color: var(--paper); }
.cal-name { display: flex; flex-direction: column; gap: 2px; }
.cal-name .link { text-decoration: none; text-align: left; font: 400 18px/1.2 var(--serif); color: var(--ink); }
.cal-name .link:hover { text-decoration: underline; }
.cal-best { font-size: 12px; color: var(--ink-2); }
.cal-row:not(.cal-head) .cal-m { height: 30px; border-radius: 7px; background: rgba(20,32,26,.05); position: relative; }
.cal-row:not(.cal-head) .cal-m.on { background: var(--c); }
.cal-row:not(.cal-head) .cal-m.is-now { box-shadow: 0 0 0 2px var(--ink); }
.now-note { font-weight: 600; color: var(--ink); }

/* Teams */
.teams { position: relative; color: var(--snow); padding: 150px 0; overflow: hidden; isolation: isolate; }
.teams-bg, .news-bg { position: absolute; inset: 0; z-index: -2; }
.teams-bg img, .news-bg img { width: 100%; height: 100%; object-fit: cover; }
.teams::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(5,20,30,.88) 0%, rgba(5,20,30,.62) 46%, rgba(5,20,30,.1) 100%); }
.teams-inner { max-width: 1200px; }
.teams .eyebrow { color: var(--gold); }
.teams h2 { font-size: clamp(38px, 4.6vw, 64px); line-height: 1.03; max-width: 15ch; }
.teams h2 em { color: var(--gold-2); }
.teams-lede { margin-top: 20px; font-size: 18px; color: rgba(244,239,230,.88); max-width: 46ch; }
.offers { list-style: none; padding: 0; margin: 34px 0 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); gap: 18px; }
.offers li { border-top: 1px solid rgba(244,239,230,.3); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.offers strong { font: 400 21px/1.2 var(--serif); }
.offers span { font-size: 14px; color: rgba(244,239,230,.8); }
.fine { margin-top: 16px; font-size: 12.5px; line-height: 1.55; color: rgba(244,239,230,.62); max-width: 64ch; }
.fine a { color: inherit; }

/* Apps */
.apps-grid { display: block; }
.apps-copy { max-width: 760px; margin-bottom: 44px; }
.app-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.app { list-style: none; }
.app-link {
  display: flex; flex-direction: column; height: 100%; border-radius: 18px; overflow: hidden; background: #fff;
  text-decoration: none; color: inherit;
  box-shadow: 0 1px 0 rgba(20,32,26,.05), 0 18px 40px -30px rgba(20,32,26,.4);
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.app-link:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(20,32,26,.05), 0 28px 54px -30px rgba(20,32,26,.5); }
.app-photo { width: 100%; height: 132px; object-fit: cover; }
.app-body { display: grid; grid-template-columns: minmax(0, 1fr) 104px; align-items: center; gap: 16px; padding: 16px 16px 16px 20px; }
.app-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.app-name { font: 400 21px/1.15 var(--serif); letter-spacing: -0.01em; }
.app-cap { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--moss); }
.app-qr { width: 104px; height: 104px; border-radius: 8px; image-rendering: pixelated; box-shadow: 0 0 0 1px rgba(20,32,26,.08); }

/* Newsletter */
.newsletter { position: relative; color: var(--snow); padding: 150px 0; overflow: hidden; isolation: isolate; text-align: center; }
.newsletter::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 60%, rgba(6,11,17,.35), rgba(6,11,17,.82) 70%); }
.news-inner { max-width: 640px; }
.newsletter .eyebrow { color: var(--gold); }
.newsletter h2 { font-size: clamp(40px, 5vw, 68px); line-height: 1.02; }
.news-lede { margin: 18px auto 0; font-size: 18px; color: rgba(244,239,230,.88); max-width: 46ch; }
.news-form { display: flex; gap: 8px; margin: 32px auto 0; max-width: 480px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.news-form input { flex: 1; min-width: 0; border: 0; background: none; color: var(--snow); padding: 0 16px; font: 400 16px var(--sans); outline: none; }
.news-form input::placeholder { color: rgba(244,239,230,.55); }
.news-form .btn { padding: 13px 22px; }
.news-status { min-height: 22px; margin-top: 14px; font-size: 14.5px; }
.news-status.is-ok { color: #a8e6b5; }
.news-status.is-err { color: #ffb4a0; }
.newsletter .fine { margin-inline: auto; }

/* Doors */
.door-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.door { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff; text-decoration: none; box-shadow: 0 1px 0 rgba(20,32,26,.05), 0 24px 50px -36px rgba(20,32,26,.45); transition: transform .35s var(--ease-out), box-shadow .35s; }
.door:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(20,32,26,.05), 0 34px 60px -36px rgba(20,32,26,.55); }
.door img { aspect-ratio: 16 / 10; width: 100%; height: auto; object-fit: cover; }
.door-body { display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 26px; }
.door-kicker { font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--terra); }
.door strong { font: 400 24px/1.15 var(--serif); letter-spacing: -0.01em; }
.door-body > span:not(.door-kicker):not(.door-go) { color: var(--ink-2); font-size: 15px; }
.door-go { margin-top: 6px; font-weight: 600; font-size: 14px; color: var(--moss); }

/* Footer */
.footer { background: var(--night); color: var(--mist); padding: 72px 0 36px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer .wordmark { color: var(--snow); }
.footer-brand p { margin-top: 14px; max-width: 30ch; }
.footer-title { font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--snow); margin-bottom: 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a { color: var(--mist); text-decoration: none; }
.footer a:hover { color: var(--snow); }
.footer .soon { color: var(--mist-2); }
.footer-legal { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line-dark); font-size: 12.5px; line-height: 1.6; color: var(--mist-2); display: grid; gap: 10px; }
.footer-legal a { color: var(--mist); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Phones and small tablets ---------- */
@media (max-width: 900px) {
  :root { --nav-h: 58px; --panel-w: 0px; }
  .nav { padding: 0 18px; gap: 14px; }
  .nav nav { display: none; }
  .nav-cta { margin-left: auto; }

  .hero { height: auto; min-height: 0; display: flex; flex-direction: column; overflow: visible; overflow-x: clip; }
  .caption::before { inset: -60px -18px -40px -18px; }
  .globe { position: relative; inset: auto; height: 62svh; min-height: 380px; }
  .globe-shade { height: 62svh; min-height: 380px; bottom: auto; }
  .caption { left: 18px; right: 18px; bottom: auto; top: calc(62svh - 150px); max-width: none; }
  .caption-tagline, .caption-ctas { display: none; }
  .caption-name { font-size: 34px; }
  .globe-controls { left: auto; right: 14px; top: calc(var(--nav-h) + 8px); bottom: auto; }
  .gc-btn span { display: none; }
  .gc-btn { padding: 0 10px; }
  .scroll-cue { display: none; }

  .panel { position: relative; width: auto; top: auto; bottom: auto; padding: 22px 0 30px; background: var(--night); border-left: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .panel-head { padding: 0 18px 8px; }
  .panel h1 { font-size: 30px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -18px; padding: 0 18px 4px; scrollbar-width: none; }
  .chip { flex: none; }

  .trail-list { display: flex; gap: 12px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; padding: 14px 18px 8px; mask-image: none; scroll-padding-inline: 18px; scrollbar-width: none; }
  .tl-group { display: none; }
  .tl-item { flex: 0 0 min(84%, 360px); scroll-snap-align: start; background: var(--night-3); border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-dark); }
  .tl-item:hover { background: var(--night-3); }
  .tl-item.is-active { background: var(--night-3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cl) 55%, transparent); }
  .tl-main { grid-template-columns: 1fr; padding: 0; gap: 0; border-radius: 0; }
  .tl-swatch { display: none; }
  .tl-thumb { grid-row: 1; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0; opacity: 1; }
  .tl-item.is-active .tl-thumb { opacity: 1; transform: none; }
  .tl-text { padding: 14px 16px 0; }
  .tl-detail { grid-template-rows: 1fr; }
  .tl-detail-inner, .tl-item.is-active .tl-detail-inner { padding: 0 16px 16px; }
  .tl-region { display: none; }
  .tl-tagline { font-size: 14px; }
  .tl-for { display: none; }
  .tl-progress { display: none; }

  .numbers-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .section { padding: 84px 0; }
  .section-head { margin-bottom: 36px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card, .card-wide { grid-column: span 1; min-height: 420px; }
  .card:last-child:nth-child(odd) { grid-column: span 2; }
  .app-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teams { padding: 100px 0; }
  .teams::before { background: linear-gradient(180deg, rgba(5,20,30,.6), rgba(5,20,30,.9)); }
  .offers { grid-template-columns: 1fr; }
  .door-body { padding: 18px 18px 20px; }
  .door strong { font-size: 20px; }
  .wrap { width: calc(100% - 36px); }
}

@media (max-width: 900px) {
  .mosaic { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 170px; }
}

/* Phones: one column below the hero too */
@media (max-width: 640px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 8px; }
  .tile-big .tile-place { font-size: 19px; }
  .cards { grid-template-columns: 1fr; }
  .card, .card-wide, .card:last-child:nth-child(odd) { grid-column: auto; }
  .app-list { grid-template-columns: 1fr; }
  .door-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .nav-links { gap: 18px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card, .card-wide { grid-column: span 1; }
  .card:last-child:nth-child(odd) { grid-column: span 2; }
  .numbers-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}