/* The home page: the night map of Dublin, the scroll story and the sections below it. */

summary, .trip-route, .profile-name { color: var(--ink); }

/* Display type */

h1, .step-text h2, .safety h2, .where h2, .faq h2, .closing h2, .step h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 0.94;
}

/* Cinema: a sticky map stage with the hero and the story scrolling over it */

.cinema { position: relative; }

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: radial-gradient(120% 80% at 70% 60%, var(--bg-raised) 0%, var(--bg) 70%);
  isolation: isolate;
}

.camera {
  position: absolute;
  left: 0;
  top: 0;
  width: 3800px;
  height: 3350px;
  transform-origin: 0 0;
  transition: transform var(--camera-move);
  --s: 1;
}
.camera svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.live { will-change: transform; }

.stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(130% 95% at 60% 45%, transparent 55%, var(--vignette) 100%);
}
.stage .grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.stage::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 22%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--bg) 0%, rgb(var(--bg-rgb) / 0.7) 40%, rgb(var(--bg-rgb) / 0) 100%);
}
.stage.is-moving .tags > .tag,
.stage.is-moving .tags > .place { opacity: 0; transition-duration: 0.2s; }
.stage.is-following .camera,
.stage.is-following .tags > * { transition-duration: 0.3s; transition-timing-function: linear; }

.js .stage .camera,
.js .stage .tags { opacity: 0; transition: transform var(--camera-move), opacity 1.6s ease; }
.js .stage.is-ready .camera,
.js .stage.is-ready .tags { opacity: 1; }
.js .stage.is-booting .camera { opacity: 0; }

/* Base map */

.m-land { fill: var(--m-land); }
.m-park path, path.m-park, .m-island { fill: var(--m-park); }
.m-airfield { fill: var(--m-airfield); }
.m-runway { stroke: var(--m-runway); stroke-width: 9; }
.m-street { fill: none; stroke: var(--m-street); stroke-width: 1.15; stroke-linecap: round; }
.m-river path { fill: none; stroke: var(--m-sea); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.m-river .m-liffey { stroke-width: 12; }
.m-river .m-liffey-mouth { stroke-width: 46; stroke-linecap: butt; }
.m-roads path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.m-arterial { stroke: var(--m-road); stroke-width: max(2.6px, calc(1px / var(--s, 1))); }
.m-motorway { stroke: var(--m-motorway); stroke-width: max(4px, calc(1.4px / var(--s, 1))); }
.m-sea { fill: var(--m-sea); stroke: var(--m-sea-edge); stroke-width: 2; }
.m-pier { fill: none; stroke: var(--m-sea-edge); stroke-width: 4; stroke-linecap: round; }
.m-lamps path, .m-glow path { fill: none; stroke-linecap: round; }
.l-warm { stroke: var(--l-warm); stroke-width: max(2.5px, calc(1.4px / var(--s, 1))); stroke-opacity: var(--l-warm-opacity); }
.l-white { stroke: var(--l-white); stroke-width: max(1.9px, calc(1.1px / var(--s, 1))); stroke-opacity: var(--l-white-opacity); }
.l-dim { stroke: var(--l-dim); stroke-width: max(1.7px, calc(1px / var(--s, 1))); stroke-opacity: var(--l-dim-opacity); }
.m-glow .l-warm { stroke: var(--l-glow); stroke-width: 10; stroke-opacity: var(--l-glow-opacity); }

/* Live layer */

.live path, .live circle { fill: none; }
.solo {
  stroke: var(--pin);
  stroke-width: calc(2px / var(--s));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: opacity 0.5s ease, stroke 1s ease, stroke-width 1s ease;
}
.f-solo .solo { opacity: 0.8; }
.f-merge .solo { stroke: var(--glow); stroke-width: calc(2.6px / var(--s)); opacity: 1; }
.f-shared .solo { stroke: var(--glow); opacity: 0.35; stroke-dashoffset: 0; }

.live .cab-solo { fill: var(--cab); r: calc(4.5px / var(--s)); opacity: 0; transition: opacity 0.3s ease; }
.f-solo:not(.f-merge) .cab-solo { opacity: 1; }

.r-glow { opacity: 0; transition: opacity 0.7s ease; }
.r-glow path {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
.r-glow .halo { stroke: var(--glow-halo); stroke-opacity: var(--glow-halo-opacity); stroke-width: calc(18px / var(--s)); }
.r-glow .body { stroke: var(--glow); stroke-width: calc(5.5px / var(--s)); }
.r-glow .core { stroke: var(--glow-core); stroke-width: calc(2px / var(--s)); }
.r-story path { transition: stroke-dashoffset 1.8s cubic-bezier(0.6, 0, 0.3, 1); }
.f-shared .r-shared, .f-story .r-story { opacity: 1; }

.r-host {
  stroke: var(--glow);
  stroke-width: calc(2.4px / var(--s));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: opacity 0.5s ease, stroke-dashoffset 1.6s cubic-bezier(0.6, 0, 0.3, 1);
}
.f-host .r-host { opacity: 0.9; stroke-dashoffset: 0; }

.r-detour {
  stroke: var(--pin);
  stroke-width: calc(2px / var(--s));
  stroke-dasharray: calc(3px / var(--s)) calc(4px / var(--s));
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.f-detour .r-detour { opacity: 0.9; }

.pin { opacity: 0; transition: opacity 0.5s ease; }
.live .pin-dot { fill: var(--pin); stroke: var(--pin-stroke); stroke-width: calc(2.5px / var(--s)); r: calc(6.5px / var(--s)); transition: fill 0.4s ease; }
.live .pin-pulse { stroke: var(--pin); stroke-width: calc(1.5px / var(--s)); r: calc(7px / var(--s)); opacity: 0; transform-box: fill-box; transform-origin: center; }
.f-hero-pins .pin-niamh, .f-hero-pins .pin-sean, .f-hero-pins .pin-priya,
.f-story-you .pin-aoife, .f-story-host .pin-host, .f-story-liam .pin-liam { opacity: 1; }
.f-hero-pins .pin-pulse, .f-searching .pin-aoife .pin-pulse { animation: ping 2.6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.picked-niamh .pin-niamh .pin-dot, .picked-sean .pin-sean .pin-dot, .picked-priya .pin-priya .pin-dot,
.f-story .pin-aoife .pin-dot, .f-story .pin-host .pin-dot, .f-story .pin-liam .pin-dot { fill: var(--glow-core); }
.f-ride .pin-pulse { animation: none; }

@keyframes ping {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(3.4); }
}

.dest { opacity: 0; transition: opacity 0.6s ease; }
.f-dest-h .dest-heuston, .f-dest-s .dest-airport { opacity: 1; }
.live .dest-ring { stroke: var(--glow-core); stroke-width: calc(3px / var(--s)); r: calc(8px / var(--s)); }
.live .dest-pulse { stroke: var(--glow); stroke-width: calc(1.5px / var(--s)); r: calc(8px / var(--s)); opacity: 0; transform-box: fill-box; transform-origin: center; }
.f-arrived .dest-pulse { animation: ping 2.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }

.cab-main { opacity: 0; transition: opacity 0.4s ease; }
.f-ride .cab-main { opacity: 1; }
.live .cab-body { fill: var(--cab); stroke: #fff6e6; stroke-width: calc(2px / var(--s)); r: calc(6.5px / var(--s)); }
.live .cab-halo { fill: var(--cab); opacity: 0.28; r: calc(18px / var(--s)); }

.live .request { fill: var(--cab); r: calc(4px / var(--s)); opacity: 0; }

/* Tags: HTML pinned to map points */

.tags { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tags > * {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transition: transform var(--camera-move), opacity 0.5s ease;
}
.tag { opacity: 0; }
.tag-body { position: absolute; white-space: nowrap; }

.place > span {
  position: absolute;
  translate: -50% -50%;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--map-label);
  white-space: nowrap;
  transition: opacity 0.6s ease;
}
.place-water > span { font-family: 'Instrument Serif', Georgia, serif; font-size: 15px; font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--map-label-water); }
.place-park > span { color: var(--map-label-park); }
.place.is-off > span { opacity: 0; }

.chip .tag-body {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: 0 10px 30px -6px var(--shadow), 0 0 0 1px rgb(var(--bg-rgb) / 0.08);
  font-size: 13px;
  line-height: 1.15;
  translate: 0 -50%;
}
.chip .who { display: grid; }
.chip b { font-weight: 700; }
.chip small { font-size: 11.5px; color: var(--paper-ink-soft); }
.chip .badge {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--tint-ink);
  font-size: 11.5px;
  font-weight: 700;
}
.chip .status { display: none; font-size: 12px; font-weight: 700; color: var(--paper-ink-soft); }
.chip .st-ok { color: var(--tint-ink); }
.chip .st-ok::before { content: '✓ '; }

.chip-niamh .tag-body, .chip-priya .tag-body, .chip-liam .tag-body { left: 16px; }
.chip-sean .tag-body { right: 16px; }
.chip-aoife .tag-body { left: 0; bottom: 16px; translate: -50% 0; }
.chip-host .tag-body { left: -24px; top: 16px; translate: none; }
.chip-aoife small, .chip-host small, .chip-liam small { display: none; }

.f-hero-pins .chip-niamh, .f-hero-pins .chip-sean, .f-hero-pins .chip-priya,
.f-story-you .chip-aoife, .f-story-host .chip-host, .f-story-liam .chip-liam { opacity: 1; }
.f-detour:not(.f-request) .st-detour, .f-request .st-request,
.f-reconfirmed .st-reconfirmed, .f-showed .st-showed { display: inline; }
.f-reconfirmed .chip-host .badge, .f-showed .chip-host .badge { display: none; }

.av {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: none;
}
.av-rose { background: #f4e6e6; color: #6e2f2f; }
.av-sand { background: #f3eae1; color: #6b4423; }
.av-lilac { background: #ede7f3; color: #4d3a6b; }
.av-sky { background: #e4ecf4; color: #284b6e; }

.stop .tag-body {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--green);
  color: var(--on-green);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--bg);
  translate: -50% -50%;
  top: -20px;
}
.f-stops-hero .stop-h1, .f-stops-hero .stop-h2, .f-stops-hero .stop-h3, .f-stops-hero .stop-h4,
.f-stops-story .stop-s1, .f-stops-story .stop-s2, .f-stops-story .stop-s3, .f-stops-story .stop-s46 { opacity: 1; }
.stop-h4 .tag-body, .stop-s46 .tag-body { top: 22px; left: 22px; translate: 0 -50%; }
.stop-s1 .tag-body { top: 0; left: -22px; }
.stop-s2 .tag-body { top: 0; left: 22px; }

.sign .tag-body {
  right: 14px;
  bottom: 12px;
  display: grid;
  gap: 1px;
  padding: 7px 12px 8px;
  border-radius: 7px;
  background: var(--green);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px #fff, inset 0 0 0 3px var(--green), 0 12px 30px -8px var(--shadow);
  text-align: left;
}
.sign [lang='ga'] { font-style: italic; font-size: 12.5px; font-weight: 500; }
.sign [lang='ga'] + span { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.f-dest-h .sign-heuston, .f-dest-s .sign-airport { opacity: 1; }
.sign-airport .tag-body, .sign-heuston .tag-body { right: auto; left: 14px; }
.stage[data-shot='near'] .sign { opacity: 0; }

/* Ticket */

.ticket {
  position: absolute;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.6s ease, translate 0.6s ease;
  translate: 0 12px;
  filter: drop-shadow(0 24px 40px var(--shadow));
}
.stage[data-mode='hero'].is-telling .ticket-hero,
.stage[data-mode='story'].f-fare .ticket-story { opacity: 1; translate: 0 0; }

.ticket-card {
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 20px;
}
.ticket-head { padding: 16px 20px 0; }
.ticket-route {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.arrow { width: 16px; height: 10px; flex: none; }
.arrow path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ticket-when { font-size: 13px; color: var(--paper-ink-soft); margin-top: 2px; }

.ticker-line {
  display: grid;
  padding: 10px 20px 16px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--paper-ink);
}
.ticker-line p {
  grid-area: 1 / 1;
  opacity: 0;
  translate: 0 -4px;
  transition: opacity 0.18s ease, translate 0.18s ease;
}
.ticker-line p.is-on { opacity: 1; translate: 0 0; transition: opacity 0.45s ease 0.2s, translate 0.45s ease 0.2s; }

.ticket-stub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.7s cubic-bezier(0.6, 0, 0.3, 1);
}
.ticket-story .ticket-stub, .f-fare .ticket-stub { grid-template-rows: 1fr; }
.stub-inner {
  overflow: hidden;
  min-height: 0;
  position: relative;
}
.stub-inner::before {
  content: '';
  display: block;
  margin: 0 20px;
  border-top: 1.5px dashed var(--paper-line);
}
.fare {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 20px 4px;
  font-size: 14px;
  color: var(--paper-ink-soft);
}
.fare strong { font-size: 30px; font-weight: 300; letter-spacing: -0.02em; color: var(--paper-ink); font-variant-numeric: tabular-nums; }
.split {
  display: flex;
  gap: 8px;
  padding: 8px 16px 16px;
}
.split li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 5px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--tint-ink);
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  translate: 0 8px;
  transition: opacity 0.5s ease, translate 0.5s ease;
}
.f-fare .split li { opacity: 1; translate: 0 0; }
.f-fare .split li:nth-child(2) { transition-delay: 0.12s; }
.f-fare .split li:nth-child(3) { transition-delay: 0.24s; }
.ticket-note {
  padding: 0 20px 16px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--paper-ink-soft);
}
.ticket-compact { display: none; }

/* Device in the stage (wide screens) */

.device { display: none; }

/* Phone frame */

.phone {
  --w: 300px;
  position: relative;
  width: var(--w);
  padding: calc(var(--w) * 0.034);
  border-radius: calc(var(--w) * 0.17);
  background: linear-gradient(150deg, #3a464f 0%, #141b21 30%, #0e1418 70%, #2c3840 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 0 0 calc(var(--w) * 0.013) #080c10,
    0 60px 120px -40px var(--shadow),
    0 0 90px -30px rgba(47, 213, 140, 0.2);
}
.phone::before, .phone::after {
  content: '';
  position: absolute;
  width: calc(var(--w) * 0.012);
  border-radius: 2px;
  background: #1f2a31;
}
.phone::before { left: calc(var(--w) * -0.008); top: 22%; height: 7%; box-shadow: 0 calc(var(--w) * 0.24) 0 #1f2a31; }
.phone::after { right: calc(var(--w) * -0.008); top: 30%; height: 12%; }

.screen {
  position: relative;
  aspect-ratio: 640 / 1391;
  overflow: hidden;
  border-radius: calc(var(--w) * 0.137);
  background: #f1f4f2;
}
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: calc(var(--w) * 0.027);
  left: 50%;
  width: 31.5%;
  height: calc(var(--w) * 0.088);
  translate: -50% 0;
  border-radius: 999px;
  background: #000;
}
.screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 32%);
}

/* Hero copy */

.hero {
  position: relative;
  z-index: 5;
  margin-top: -100vh;
  margin-top: -100svh;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-h) + 24px) var(--gutter) clamp(28px, 7vh, 88px);
  pointer-events: none;
}
.hero-copy { max-width: 760px; pointer-events: auto; }

h1 {
  font-size: clamp(54px, 7.55vw, 123px);
  line-height: 0.94;
}
h1 .line { display: block; width: fit-content; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; white-space: nowrap; }
h1 .line > span { display: block; }
.js h1 .line > span { animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.1, 1) both 0.35s; }
.js h1 .line + .line > span { animation-delay: 0.47s; }
@keyframes rise { from { translate: 0 105%; } to { translate: 0 0; } }

.lede {
  margin-top: 24px;
  max-width: 30em;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.5;
  color: var(--text);
}
.soon { margin-top: 18px; font-size: 15px; color: var(--muted); }
.soon strong { color: var(--ink); font-weight: 700; }

.cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--green);
  color: var(--on-green);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(47, 213, 140, 0.3), 0 14px 30px -10px rgba(11, 122, 74, 0.7);
  transition: background 0.2s ease;
}
.cue:hover { background: var(--green-hover); }
.cue::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
}

.js .lede, .js .soon, .js .cue { animation: fade 0.9s ease both 0.8s; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Story */

.story { position: relative; z-index: 5; }
.step-text h2, .safety h2, .where h2, .faq h2, .closing h2 {
  font-size: clamp(41px, 5.04vw, 72px);
  text-wrap: balance;
}
.step-text p { color: var(--text); font-size: 18px; line-height: 1.55; margin-top: 16px; max-width: 30em; }
.step h3 {
  font-size: clamp(34px, 3.24vw, 46px);
  line-height: 1.04;
  text-wrap: balance;
}
.num {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--green);
  color: var(--on-green);
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 0 0 4px rgba(11, 122, 74, 0.25);
}

/* Where to */

.where {
  position: relative;
  z-index: 6;
  background: var(--bg);
  padding: clamp(80px, 12vw, 160px) var(--gutter);
  display: grid;
  grid-template-areas: 'head' 'map' 'list';
  gap: 28px;
}
.section-lede { margin-top: 20px; font-size: 18px; color: var(--text); max-width: 34em; }

.trips { border-top: 1px solid var(--line); }
.trips li { border-bottom: 1px solid var(--line); }
.trips button {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'route when' 'why when';
  align-items: center;
  gap: 2px 16px;
  padding: 16px 14px 16px 18px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  position: relative;
  border-radius: 0;
}
.trips button::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 3px;
  background: var(--accent-text);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.trips button[aria-pressed='true']::before { opacity: 1; }
.trip-route { grid-area: route; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.trip-why { grid-area: why; color: var(--muted); font-size: 15px; }
.trip-when { grid-area: when; font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.trips button[aria-pressed='true'] .trip-why { color: var(--accent-text); }
.where-note { margin-top: 24px; font-size: 15px; color: var(--muted); max-width: 34em; }

.overview {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: var(--m-land);
  box-shadow: 0 0 0 1px var(--line), 0 40px 80px -40px var(--shadow);
  isolation: isolate;
}
html:not(.js) .overview { display: none; }
.overview::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--bg) 0%, rgb(var(--bg-rgb) / 0) 26%),
    radial-gradient(120% 90% at 50% 60%, transparent 55%, var(--vignette) 100%);
}
.ov-camera {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  width: 3800px;
  height: 3350px;
  transform-origin: 0 0;
  transition: transform var(--camera-move);
  --s: 1;
}
.ov-camera svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ov-live { will-change: transform; }
.ov-route path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
}
.ov-route .halo { stroke: var(--glow-halo); stroke-opacity: 0; stroke-width: calc(18px / var(--s)); }
.ov-route .body { stroke: var(--glow); stroke-opacity: 0; stroke-width: calc(5px / var(--s)); }
.ov-route .core { stroke: var(--pin); stroke-opacity: 0.24; stroke-width: calc(1.5px / var(--s)); }
.ov-route.is-on .halo { stroke-opacity: var(--glow-halo-opacity); }
.ov-route.is-on .body { stroke-opacity: 1; }
.ov-route.is-on .core { stroke: var(--glow-core); stroke-opacity: 1; stroke-width: calc(2px / var(--s)); }
.ov-route.is-on path { animation: draw 1.5s cubic-bezier(0.6, 0, 0.3, 1) 0.35s both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.ov-route circle { opacity: 0; transition: opacity 0.4s ease; }
.ov-route.is-on circle { opacity: 1; }
.ov-live .ov-from { fill: var(--pin); stroke: var(--pin-stroke); stroke-width: calc(2.5px / var(--s)); r: calc(6.5px / var(--s)); }
.ov-live .ov-to { fill: var(--bg); stroke: var(--glow); stroke-width: calc(3px / var(--s)); r: calc(7px / var(--s)); }

.ov-tags { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ov-tag {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.ov-tag.is-on { opacity: 1; transition-delay: 0.9s; }
.overview.is-moving .ov-tag { opacity: 0; transition-delay: 0s; transition-duration: 0.15s; }
.ov-tag span {
  position: absolute;
  translate: -50% calc(-100% - 14px);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--paper-ink);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 24px -8px var(--shadow);
}
.ov-tag-to span { background: var(--green); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85), 0 10px 24px -8px var(--shadow); border-radius: 7px; }

.where-head { grid-area: head; }
.overview { grid-area: map; }
.where-list { grid-area: list; }

/* Safety */

.safety {
  position: relative;
  z-index: 6;
  background: var(--section-safety);
  padding: clamp(80px, 12vw, 160px) var(--gutter) clamp(48px, 6vw, 88px);
}
.safety-head { max-width: 760px; }

.reveal {
  margin-top: 56px;
  display: grid;
  gap: 20px;
  max-width: 820px;
}
.profile figcaption { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.profile-in figcaption { color: var(--accent-text); }
.profile-card {
  padding: 20px;
  border-radius: 22px;
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: 0 30px 60px -30px var(--shadow), 0 0 0 1px rgb(var(--bg-rgb) / 0.06);
}
.profile-card .profile-name { color: var(--paper-ink); }
.profile-map-wrap {
  position: relative;
  height: 128px;
  margin: -20px -20px 18px;
  overflow: hidden;
  border-radius: 22px 22px 0 0;
  background: var(--m-land);
}
.profile-map { --s: 1.6; width: 100%; height: 100%; }
html:not(.js) .profile-map-wrap { display: none; }
.pm-area { fill: rgba(47, 213, 140, 0.16); }
.pm-area-edge { fill: none; stroke: var(--glow); stroke-width: 1.2; stroke-dasharray: 3 4; }
.pm-door-halo { fill: rgba(47, 213, 140, 0.28); }
.pm-door { fill: var(--glow-core); stroke: var(--pin-stroke); stroke-width: 2; }
.pm-label {
  position: absolute;
  left: 12px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(var(--bg-rgb) / 0.88);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 700;
}
.profile-top { display: flex; gap: 14px; align-items: center; }
.av-lg { width: 52px; height: 52px; font-size: 17px; }
.profile-name { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.profile-rel { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--paper-ink-soft); }
.shield { width: 15px; height: 15px; }
.shield path { fill: var(--green); }
.profile-rows { margin-top: 16px; border-top: 1px solid var(--paper-line); }
.profile-rows div {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--paper-line);
  font-size: 15px;
}
.profile-rows dt { color: var(--paper-ink-soft); }
.profile-rows dd { font-weight: 600; }
.profile-rows .is-hidden dd { font-weight: 400; color: var(--paper-ink-soft); display: flex; align-items: center; gap: 8px; }
.profile-rows .is-hidden dd::before {
  content: '';
  width: 64px;
  height: 10px;
  border-radius: 5px;
  background: repeating-linear-gradient(90deg, var(--paper-line) 0 6px, transparent 6px 9px);
}
.profile-actions { display: flex; gap: 8px; margin-top: 16px; }
.profile-actions span {
  flex: 1;
  padding: 9px 0;
  border-radius: 12px;
  background: var(--tint);
  color: var(--tint-ink);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}

.rules {
  margin-top: 72px;
  display: grid;
  gap: 32px 48px;
  max-width: 1100px;
}
.rules li { padding-top: 18px; border-top: 1px solid var(--line-accent); }
.rules h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.rules p { margin-top: 6px; color: var(--text); font-size: 16px; max-width: 28em; }


/* FAQ */

.faq {
  position: relative;
  z-index: 6;
  background: var(--section-faq);
  padding: clamp(72px, 10vw, 140px) var(--gutter);
  display: grid;
  gap: 40px;
}
.faq-head p { margin-top: 16px; color: var(--text); font-size: 17px; }
.faq-head a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
.faq-list { border-top: 1px solid var(--line-accent); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line-accent); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 8px;
  margin-right: 4px;
  border-right: 2px solid var(--accent-text);
  border-bottom: 2px solid var(--accent-text);
  rotate: 45deg;
  transition: rotate 0.25s ease;
}
.faq details[open] summary::after { rotate: -135deg; margin-top: 12px; }
.faq details p { padding: 0 0 22px; color: var(--text); max-width: 36em; }

/* Closing */

.closing {
  position: relative;
  z-index: 6;
  overflow: hidden;
  isolation: isolate;
  background: var(--closing-glow);
  padding: clamp(96px, 14vw, 200px) var(--gutter);
  text-align: center;
  display: grid;
  justify-items: center;
}
.closing-city {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  --s: 1.1;
  opacity: 0.42;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 55%, #000 20%, transparent 80%);
  mask-image: radial-gradient(70% 70% at 50% 55%, #000 20%, transparent 80%);
}
html:not(.js) .closing-city { display: none; }
.closing-mark { width: 96px; height: 96px; margin-bottom: 28px; overflow: visible; }
.closing-mark .mark-route { stroke: var(--glow); stroke-dasharray: 1 1; }
.closing-mark .mark-dot { fill: var(--glow); }
.closing-mark .mark-ring { stroke: var(--glow); }
.js .closing-mark .mark-route { stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(0.6, 0, 0.3, 1); }
.js .closing-mark .tail { transition-delay: 0.9s; transition-duration: 0.4s; }
.js .closing-mark .mark-dot, .js .closing-mark .mark-ring { opacity: 0; transition: opacity 0.4s ease; }
.js .closing-mark .mark-ring { transition-delay: 1.2s; }
.js .closing.is-in .mark-route { stroke-dashoffset: 0; }
.js .closing.is-in .mark-dot, .js .closing.is-in .mark-ring { opacity: 1; }
.closing h2 { max-width: 12em; }
.closing p { margin-top: 18px; color: var(--text); font-size: 18px; }
.closing-contact a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }

/* ---------- Compact ticket: one line of narration, then a one-line split ---------- */

@media (max-width: 1279px) {
  .ticket-head, .ticket-stub { display: none; }
  .ticker-line { min-height: 58px; align-items: center; padding: 8px 16px; font-size: 14.5px; }
  .f-fare .ticker-line { display: none; }
  .f-fare .ticket-compact {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: 'stack each' 'stack of';
    align-items: center;
    column-gap: 12px;
    padding: 9px 14px;
    min-height: 58px;
  }
  .stack { grid-area: stack; display: flex; gap: 3px; }
  .stack .av { width: 28px; height: 28px; font-size: 10.5px; }
  .each { grid-area: each; font-size: 15px; color: var(--paper-ink-soft); line-height: 1.1; }
  .each b { font-size: 20px; font-weight: 750; color: var(--tint-ink); letter-spacing: -0.01em; }
  .of { grid-area: of; font-size: 12.5px; color: var(--paper-ink-soft); line-height: 1.3; }
  .ticket-card { border-radius: 16px; }
}

@media (min-width: 1000px) and (max-width: 1279px) {
  h1 { font-size: 6.6vw; }
  /* The map's focus starts at 52vw here, so the copy column stops short of it. */
  .hero-copy { max-width: 44vw; }
  .story .step-text, .story .story-intro .step-text { max-width: 340px; }
  .story .step h3 { font-size: 36px; }
  .story .step-text p { font-size: 17px; }
}

/* ---------- Small screens ---------- */

@media (max-width: 999px) {
  .scrim { background: linear-gradient(to top, var(--bg) 0%, rgb(var(--bg-rgb) / 0.94) 40%, rgb(var(--bg-rgb) / 0) 58%); }

  .ticket { left: 16px; right: 16px; top: clamp(200px, calc(100svh - 440px), max(300px, 37svh)); }
  .ticket-story { top: calc(var(--nav-h) + 10px); }
  .stage::before { height: 15%; }
  .chip .tag-body { font-size: 12.5px; padding: 4px 10px 4px 4px; gap: 6px; }
  .chip small { display: none; }
  .chip .av { width: 24px; height: 24px; font-size: 10px; }
  .chip .badge { padding: 2px 6px; font-size: 10.5px; }
  .place > span { font-size: 11px; }
  .sign .tag-body { right: auto; left: 12px; bottom: 10px; padding: 5px 9px 6px; }
  .sign [lang='ga'] { font-size: 11px; }
  .sign [lang='ga'] + span { font-size: 11.5px; }
  .chip-host .tag-body { left: 0; translate: -50% 0; }

  /* The hero copy rises over the pinned map when you scroll, so it carries its own opaque panel. */
  .hero-copy {
    position: relative;
    margin: 0 calc(var(--gutter) * -1);
    padding: 6px var(--gutter) clamp(28px, 7vh, 88px);
    background-color: var(--bg);
  }
  .hero-copy::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 64px;
    background: linear-gradient(to bottom, rgb(var(--bg-rgb) / 0), var(--bg));
    pointer-events: none;
  }
  .hero { padding-bottom: 0; }
  html:not(.js) .hero-copy { background: none; }
  html:not(.js) .hero-copy::before { display: none; }

  .story-intro, .step { padding-top: 52vh; padding-top: 52svh; }
  /* An opaque panel (not a gradient) so map chips can never show through the copy. */
  .step-text {
    position: relative;
    padding: 24px 20px 28px;
    background-color: var(--bg);
  }
  .step-text::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 56px;
    background: linear-gradient(to bottom, rgb(var(--bg-rgb) / 0), var(--bg));
    pointer-events: none;
  }
  .story-intro .step-text { padding-bottom: 64px; }
  .step-phone { --w: min(74vw, 300px); margin: 8px auto 0; }
  .step { background: linear-gradient(to bottom, transparent 52svh, var(--bg) 52svh); padding-bottom: 32px; }
  /* A taller map window for the ride, so the taxi is on screen for the whole scroll. */
  .step[data-step='6'] { padding-top: 90svh; background: linear-gradient(to bottom, transparent 90svh, var(--bg) 90svh); }
  .story { padding-bottom: 48px; background: linear-gradient(to bottom, transparent calc(100% - 48px), var(--bg) calc(100% - 48px)); }
  html:not(.js) .story-intro, html:not(.js) .step { padding-top: 24px; background: none; }
  html:not(.js) .step-text { background: none; }
  html:not(.js) .step-text::before { display: none; }

  .overview {
    position: sticky;
    top: var(--nav-h);
    z-index: 2;
    height: 46svh;
    margin: 0 calc(var(--gutter) * -1);
    border-radius: 0;
    box-shadow: 0 1px 0 var(--line), 0 30px 40px -10px var(--bg);
  }
  .trips button { padding-left: 16px; grid-template-columns: 1fr auto; grid-template-areas: 'route route' 'why when'; }
  .trip-route { flex-wrap: wrap; row-gap: 0; }
  .trip-when { font-size: 14px; }
  .profile-rows div { grid-template-columns: 70px 1fr; }
  .profile-rows .is-hidden dd::before { width: 40px; }
}

/* ---------- Wide screens ---------- */

@media (min-width: 1000px) {
  .hero { align-items: center; padding-bottom: 0; }
  .hero-copy { padding-top: 40px; }

  .scrim { background: linear-gradient(90deg, var(--bg) 0%, rgb(var(--bg-rgb) / 0.9) 30%, rgb(var(--bg-rgb) / 0) 56%); }
  .stage[data-mode='story'] .scrim { background: linear-gradient(90deg, var(--bg) 0%, rgb(var(--bg-rgb) / 0.94) 30%, rgb(var(--bg-rgb) / 0) 44%, rgb(var(--bg-rgb) / 0) 68%, rgb(var(--bg-rgb) / 0.7) 84%, var(--bg) 100%); }

  .ticket { right: var(--gutter); top: calc(var(--nav-h) + 28px); width: 330px; }
  .ticket-story { top: auto; right: auto; left: 38%; width: 320px; bottom: 6vh; }

  .js .device {
    display: block;
    position: absolute;
    z-index: 4;
    right: var(--gutter);
    top: 50%;
    translate: 0 -46%;
    opacity: 0;
    transition: opacity 0.7s ease, translate 0.9s cubic-bezier(0.2, 0.7, 0.1, 1);
  }
  .js .stage[data-mode='story'] .device { opacity: 1; translate: 0 -50%; }
  .device .phone { --w: min(320px, calc((100svh - 170px) / 2.09)); }
  .device img { opacity: 0; transition: opacity 0.5s ease; }
  .device img.is-on { opacity: 1; }

  .js .step-phone {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .story-intro, .step {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 var(--gutter);
  }
  .step { min-height: 92vh; }
  /* The ride plays out over a long scroll; its copy stays pinned while the taxi moves. */
  .step[data-step='6'] { min-height: 170vh; align-items: flex-start; }
  .step[data-step='6'] .step-text { position: sticky; top: calc(50vh - 130px); margin-top: calc(50vh - 130px); }
  .step-text { max-width: 420px; }
  .story-intro .step-text { max-width: 470px; }
  .story { padding-bottom: 20vh; }

  html:not(.js) .step { gap: 64px; }
  html:not(.js) .step-phone { --w: 280px; }

  .where {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas: 'head map' 'list map';
    grid-template-rows: auto 1fr;
    column-gap: 72px;
    row-gap: 40px;
  }
  .overview {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    height: calc(100vh - var(--nav-h) - 72px);
    min-height: 560px;
  }

  /* The pinned heading lives in its own grid, so it can never travel past the cards into the rules below. */
  .safety-top {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: 72px;
    align-items: start;
  }
  .safety-head { position: sticky; top: calc(var(--nav-h) + 48px); }
  .reveal { margin-top: 0; max-width: none; grid-template-columns: 1fr 1fr; gap: 24px; }
  .profile-in { margin-top: 56px; }
  .rules { grid-template-columns: repeat(4, 1fr); max-width: none; }

  .faq { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
}

@media (min-width: 640px) and (max-width: 999px) {
  .rules { grid-template-columns: 1fr 1fr; }
  .reveal { grid-template-columns: 1fr 1fr; }
}