:root { --accent: var(--red); --accent-deep: var(--red-dark); --accent-soft: rgba(226,34,47,.14); }
:root[data-pg="car"] { --accent: var(--blue); --accent-deep: var(--navy); --accent-soft: rgba(31,79,209,.14); }

/* ---------- Keyboard focus (visible everywhere) ---------- */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.btn:focus-visible, .filter-chip:focus-visible { outline-offset: 4px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; }

/* ---------- Buttons: tactile press ---------- */
.btn:active { transform: translateY(0) scale(.97); box-shadow: none; transition-duration: .08s; }
.btn[aria-busy="true"] {
  pointer-events: none; color: transparent !important;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.22) 0 12px, transparent 12px 24px) !important;
  background-size: 34px 100%; animation: btnBusy .7s linear infinite;
}
.btn[aria-busy="true"]::after { display: none; }
@keyframes btnBusy { to { background-position: 34px 0; } }

/* ============================================================
   KINETIC HEADLINES (motion.js wraps each word)
   ============================================================ */
.js-motion main h1:not([data-setting]):not(.is-split) { opacity: 0; animation: failsafeShow 0s 1.4s forwards; }
@keyframes failsafeShow { to { opacity: 1; } }
.is-split { opacity: 1; }
.is-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.is-split .w > span { display: inline-block; animation: wordUp .95s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 140ms); }
@keyframes wordUp { from { transform: translateY(108%) rotate(3deg); } to { transform: none; } }

/* small, purposeful life on eyebrows that head each page */
.page-intro .eyebrow::before, .detail-hero .eyebrow::before, .legal-hero .eyebrow::before {
  display: inline-block; animation: spinSlow 14s linear infinite;
}

/* ============================================================
   PAGE INTROS — photo arch drifts, route draws, Land Cruiser drives
   ============================================================ */
.page-intro::before { scale: 1.12; transform: translate3d(0, var(--py, 0px), 0); animation: introZoom 2.4s var(--ease) both; will-change: transform; }
@keyframes introZoom { from { scale: 1.28; opacity: 0; } to { scale: 1.12; opacity: .95; } }
.page-intro::after { animation: archIn 1.3s var(--ease) .25s both; }
@keyframes archIn { from { clip-path: inset(100% 0 0 0); opacity: 0; } to { clip-path: inset(0); opacity: 1; } }
.page-intro.-contact { --intro-image: url('/images/destinations/contact-bg.jpg?w=1600'); }
.page-intro.-owner   { --intro-image: url('/images/vehicles/ethiopia-road.webp?w=1600'); }
.page-intro.-rental .lead, .page-intro .lead, .detail-hero .lead, .legal-hero p {
  animation: fadeRise .9s var(--ease) .55s both;
}
.page-intro .filter-bar { animation: fadeRise .9s var(--ease) .75s both; }
@keyframes fadeRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* dashed route that draws itself behind the headline (injected SVG) */
.intro-route { position: absolute; z-index: 0; right: 3%; top: 10%; width: min(30vw, 380px); height: 76%; pointer-events: none; color: var(--accent); opacity: .55; }
.intro-route path { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 5 9; stroke-dashoffset: 0; }
.intro-route .draw { stroke-dasharray: 900; stroke-dashoffset: 900; animation: routeDraw 2.4s var(--ease) .5s forwards; }
.intro-route circle { fill: currentColor; animation: fadeRise .6s ease 1.9s both; }
@keyframes routeDraw { to { stroke-dashoffset: 0; } }
@media (max-width: 1100px) { .intro-route { display: none; } }

/* the little Land Cruiser: sits still on the bottom edge (no scroll animation, no wheel spin: speed matters more than motion) */
.intro-road { position: absolute; left: 0; right: 0; bottom: 0; height: 36px; pointer-events: none; overflow: hidden; z-index: 1; contain: layout paint style; }
.intro-road::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 2px; opacity: .4;
  background: repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 22px);
}
.intro-road .car {
  position: absolute; bottom: 7px; left: max(24px, calc((100vw - var(--container)) / 2 + 24px)); width: 56px; color: var(--ink);
}
.intro-road .car svg { display: block; width: 100%; height: auto; overflow: visible; }
.intro-road .car .body { fill: var(--accent); }
.intro-road .car .glass { fill: rgba(255,255,255,.85); }
.intro-road .car .tire { fill: var(--ink); }
.intro-road .car .hub  { fill: #fff; }

/* detail pages: hero photo wipes open */
.detail-media { animation: mediaReveal 1.1s var(--ease) .2s both; }
@keyframes mediaReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
.detail-hero a[href^="/"]:first-child { display: flex; width: fit-content; transition: transform .25s var(--ease), color .2s ease; }
.detail-hero a[href^="/"]:first-child:hover { transform: translateX(-6px); color: var(--accent); }

/* ============================================================
   SECTION HEADINGS — rule draws in under every h2
   ============================================================ */
main h2.reveal::after { content: ""; display: block; height: 4px; width: 0; margin-top: 12px; background: var(--accent); transition: width .9s var(--ease) .25s; }
main h2.reveal.in-view::after { width: 56px; }
.center h2.reveal::after { margin-inline: auto; }
.cta-band h2.reveal::after { background: #fff; }

/* ============================================================
   CARDS — tour / vehicle / blog
   ============================================================ */
.tour-card.reveal, .vehicle-card.reveal {
  transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .3s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.tour-card.reveal.settled, .vehicle-card.reveal.settled { transition: transform .3s var(--ease), box-shadow .3s var(--ease); transition-delay: 0s; }
.tour-card:hover, .vehicle-card:hover { box-shadow: 10px 10px 0 var(--accent-soft); }
.tour-card:focus-visible { outline-offset: 5px; }

/* image: slow pan + colour lift */
.card-media { background-position: 50% 50%; transition: background-position 1.2s var(--ease), filter .5s ease; }
.tour-card:hover .card-media, .vehicle-card:hover .card-media { background-position: 50% 30%; filter: saturate(1.15) contrast(1.03); }
.card-media::after { transition: opacity .4s ease; }

/* tour cards: "Explore" tab slides up from the image foot */
.tour-card .card-media::before {
  content: "Explore tour"; position: absolute; z-index: 3; left: 0; bottom: 0; padding: 9px 16px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: #fff; background: var(--accent);
  transform: translateY(101%); transition: transform .4s var(--ease);
}
.tour-card.blog-card .card-media::before { content: "Read article"; }
.tour-card:hover .card-media::before, .tour-card:focus-visible .card-media::before { transform: none; }

/* vehicle cards: headlight sweep across the photo */
.vehicle-card .card-media::before {
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: -45%; width: 38%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-18deg);
  opacity: 0; pointer-events: none;
}
.vehicle-card:hover .card-media::before { animation: headlight 1s var(--ease) both; }
@keyframes headlight { 0% { left: -45%; opacity: 1; } 100% { left: 125%; opacity: 1; } }

/* ticket seam perforations march on hover */
.ticket-seam { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%) 0 0 / 16px 2px repeat-x; }
.tour-card:hover .ticket-seam, .vehicle-card:hover .ticket-seam { animation: seamMarch .7s linear infinite; }
@keyframes seamMarch { to { background-position: 16px 0; } }
.ticket-seam::before, .ticket-seam::after { transition: border-color .3s ease, background .3s ease; }
.tour-card:hover .ticket-seam::before, .tour-card:hover .ticket-seam::after,
.vehicle-card:hover .ticket-seam::before, .vehicle-card:hover .ticket-seam::after { border-color: var(--accent); }

/* title + price micro-motion */
.tour-card h3, .vehicle-card h3 { background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--ease); width: fit-content; max-width: 100%; }
.tour-card:hover h3, .vehicle-card:hover h3 { background-size: 100% 2px; }
.tour-card .card-price::after { content: "→"; display: inline-block; margin-left: 8px; opacity: 0; transform: translateX(-10px); transition: opacity .3s ease, transform .4s var(--ease); color: var(--accent); }
.tour-card:hover .card-price::after { opacity: 1; transform: none; }

/* vehicle spec chips + live availability dot */
.vehicle-card .card-meta { flex-wrap: wrap; gap: 6px; }
.vehicle-card .card-meta span { border: 1px solid var(--grey-line); padding: 2px 9px; font-size: .74rem; transition: border-color .25s ease, color .25s ease, background .25s ease; }
.vehicle-card:hover .card-meta span { border-color: var(--accent); color: var(--accent); }
.badge.-available::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #8dffb0; animation: liveDot 1.6s ease-in-out infinite; vertical-align: 1px; }
@keyframes liveDot { 0%,100% { box-shadow: 0 0 0 0 rgba(141,255,176,.7); } 50% { box-shadow: 0 0 0 5px rgba(141,255,176,0); } }

/* loading skeleton while a card grid is still empty */
.card-grid:empty { position: relative; overflow: hidden; height: 360px; margin-top: 36px;
  background: repeating-linear-gradient(90deg, #ecece8 0 calc(33.333% - 18.7px), transparent calc(33.333% - 18.7px) calc(33.333% + 9.3px)); }
.card-grid:empty::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); transform: translateX(-100%); animation: skeleton 1.3s ease-in-out infinite; }
@keyframes skeleton { to { transform: translateX(100%); } }
@media (max-width: 640px) { .card-grid:empty { height: 330px; background: #ecece8; } }

/* ============================================================
   FILTER CHIPS — ink wipes in, active chip takes the section accent
   ============================================================ */
.filter-chip { position: relative; overflow: hidden; isolation: isolate; }
.filter-chip::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.filter-chip:hover { color: #fff; transform: translateY(-2px); }
.filter-chip:hover::before { transform: scaleX(1); }
.filter-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.filter-chip.active::before { display: none; }
.filter-chip:active { transform: scale(.96); }

/* ============================================================
   "WHY" / INFO CARDS — cursor spotlight + number fill
   ============================================================ */
.why-grid.reveal.in-view > .why-card { animation: riseIn .8s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes riseIn { from { opacity: 0; transform: translateY(26px); } }
.why-card, .testi-card, .sticky-card, .contact-panel { --mx: 50%; --my: 50%; }
.why-card { transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s var(--ease); }
.why-card:hover { border-color: var(--accent); box-shadow: 7px 7px 0 var(--accent-soft); }
.why-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(240px circle at var(--mx) var(--my), var(--accent-soft), transparent 70%);
}
.why-card:hover::before { opacity: 1; }
.why-card > * { position: relative; }
.why-card h3 { transition: color .25s ease; }
.why-card:hover h3 { color: var(--accent); }
.why-card .num, .legal-section .sec-num {
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 0 no-repeat; -webkit-background-clip: text; background-clip: text;
  transition: background-size .6s var(--ease), -webkit-text-stroke-color .3s ease;
}
.why-card:hover .num { background-size: 100% 100%; -webkit-text-stroke-color: var(--accent); }

/* ============================================================
   TESTIMONIALS — stars light up in sequence
   ============================================================ */
.testi-card::before { transition: transform .5s var(--ease), color .3s ease; transform-origin: top right; }
.testi-card:hover::before { transform: scale(1.5) rotate(-8deg); color: var(--accent); }
.testi-card { border-left-color: var(--accent); }
.testi-card.in-view .testi-stars { animation: starsIn .9s var(--ease) .15s both; }
@keyframes starsIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
.testi-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(220px circle at var(--mx) var(--my), var(--accent-soft), transparent 70%); }
.testi-card:hover::after { opacity: 1; }

/* ============================================================
   TOUR DETAIL — scroll-linked route timeline, tick lists, enquiry card
   ============================================================ */
.itinerary-list { position: relative; margin-top: 14px; }
.itinerary-list::before, .itinerary-list::after { content: ""; position: absolute; left: 3px; top: 10px; width: 2px; }
.itinerary-list::before { bottom: 10px; background: repeating-linear-gradient(180deg, var(--grey-line) 0 6px, transparent 6px 12px); }
.itinerary-list::after { bottom: 10px; background: var(--accent); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); will-change: transform; }   /* scaleY, not height: no layout on every scroll frame */
.itin-row { transition: background .3s ease; }
.itin-row::before { z-index: 1; transition: transform .4s var(--ease), box-shadow .4s ease; background: var(--accent); }
.itin-row.is-passed::before { transform: scale(1.6); box-shadow: 0 0 0 5px var(--accent-soft); }
.itin-day { color: var(--accent); transition: letter-spacing .4s var(--ease); }
.itin-row.is-passed .itin-day { letter-spacing: .06em; }
.itin-row:hover { background: linear-gradient(90deg, var(--accent-soft), transparent 70%); }
.incl-excl > div:first-child li::before { content: "✓  "; color: var(--accent); font-weight: 700; }
.incl-excl > div:last-child li::before { content: "✕  "; color: var(--grey); }
.incl-excl li { transition: padding-left .25s var(--ease); }
.incl-excl li:hover { padding-left: 8px; }

.sticky-card { position: sticky; overflow: hidden; transition: box-shadow .3s var(--ease); }
.sticky-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--accent), var(--sky), var(--accent)); background-size: 200% 100%; animation: barSlide 4s linear infinite;
}
.sticky-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(260px circle at var(--mx) var(--my), var(--accent-soft), transparent 70%); }
.sticky-card:hover::after { opacity: 1; }
.sticky-card:hover { box-shadow: 10px 10px 0 var(--accent-soft); }
.sticky-card .price { animation: priceSettle .9s var(--ease) .5s both; }
@keyframes barSlide { to { background-position: -200% 0; } }
@keyframes priceSettle { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.sticky-card form .btn, .sticky-card form button[type="submit"] { width: 100%; justify-content: center; }

/* ============================================================
   FORMS — underline grows on focus, valid fields tint, stamp confirmation
   ============================================================ */
.field { position: relative; }
.field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); pointer-events: none; }
.field:focus-within::after { transform: scaleX(1); }
.field:focus-within label { color: var(--accent); }
.lead-form .field input:not(:placeholder-shown):valid, .lead-form .field textarea:not(:placeholder-shown):valid { border-color: rgba(30,125,59,.55); }
.lead-form .field input:not(:placeholder-shown):invalid { border-color: rgba(226,34,47,.55); }
.lead-form::before { transform-origin: left; animation: barGrow 1.3s var(--ease) .3s both; }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lead-form:focus-within { box-shadow: 10px 10px 0 var(--accent-soft); transition: box-shadow .35s var(--ease); }
.form-status.-ok { display: block; width: fit-content; justify-self: start; padding: 7px 16px; border: 2px solid currentColor; transform: rotate(-2deg); letter-spacing: .04em; animation: stampIn .55s var(--ease) both; }
.form-status.-ok::before { content: "✓ "; }
.form-status.-err { animation: shake .45s ease both; }
@keyframes stampIn { 0% { opacity: 0; transform: scale(2.2) rotate(-10deg); } 60% { opacity: 1; transform: scale(.94) rotate(-2deg); } 100% { transform: rotate(-2deg); } }
@keyframes shake { 0%,100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

/* ============================================================
   CONTACT — "boarding pass" panel
   ============================================================ */
.contact-panel { position: relative; overflow: hidden; border: 2px solid var(--ink); background: var(--paper-off); padding: 28px; }
.contact-panel > h2 { position: relative; padding-bottom: 22px; margin-bottom: 0; border-bottom: 2px dashed var(--ink); }
.contact-panel > h2::before, .contact-panel > h2::after {
  content: ""; position: absolute; bottom: -13px; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink);
}
.contact-panel > h2::before { left: -41px; } .contact-panel > h2::after { right: -41px; }
.contact-panel > div:first-of-type { margin-top: 22px !important; }
.contact-panel p { transition: transform .3s var(--ease); }
.contact-panel p:hover { transform: translateX(6px); }
.contact-panel a[href^="mailto"], .contact-panel a[href^="tel"] { background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat; transition: background-size .4s var(--ease), color .2s ease; }
.contact-panel a[href^="mailto"]:hover, .contact-panel a[href^="tel"]:hover { background-size: 100% 2px; color: var(--accent); }
.contact-panel .map-frame { filter: grayscale(.85) contrast(1.05); transition: filter .6s ease; }
.contact-panel .map-frame:hover { filter: none; }
.social-row a { transition: transform .3s var(--ease), border-color .3s ease, background .3s ease; }
.social-row a:hover { transform: translateY(-4px) rotate(-6deg); }

/* ============================================================
   FAQ — accent bar + soft open state
   ============================================================ */
.faq-item { position: relative; transition: background .35s ease, border-color .2s ease; }
.faq-item::before { content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 4px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); }
.faq-item.open::before { transform: scaleY(1); }
.faq-item.open { background: linear-gradient(90deg, var(--accent-soft), transparent 60%); }
.faq-item .faq-a { opacity: 0; transition: max-height .4s var(--ease), opacity .4s ease .05s, padding .3s ease; }
.faq-item.open .faq-a { opacity: 1; }
.faq-plus { transition: transform .4s var(--ease), color .2s ease; }
.faq-item.open .faq-plus { color: var(--accent); }

/* ============================================================
   LEGAL PAGES — numbers fill as each clause is reached
   ============================================================ */
.legal-section.in-view .sec-num { background-size: 100% 100%; -webkit-text-stroke-color: var(--accent); }
.legal-section.-blue.in-view .sec-num { --accent: var(--blue); }
.legal-section { transition: background .4s ease; }
.legal-section:hover { background: linear-gradient(90deg, rgba(0,0,0,.02), transparent 70%); }
.legal-callout { position: relative; overflow: hidden; }
.legal-callout::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--ink); transform: scaleY(0); transform-origin: top; transition: transform .7s var(--ease) .2s; }
.legal-section.in-view .legal-callout::after { transform: scaleY(1); }
.legal-callout.-red::after { background: var(--red); } .legal-callout.-blue::after { background: var(--blue); }
.legal-toc a { position: relative; }
.legal-toc a.active::before { content: ""; position: absolute; left: -22px; top: 0; bottom: 0; width: 4px; background: var(--red); }
.legal-toc.-blue a.active::before { background: var(--blue); }

/* ============================================================
   CTA BANDS (dark / red strips) — slow route ribbon + glow
   ============================================================ */
.cta-band { position: relative; overflow: hidden; isolation: isolate; }
.cta-band::before {
  content: ""; position: absolute; z-index: -1; inset: 0; opacity: .9;
  background-image:
    radial-gradient(circle at 12% 130%, rgba(255,255,255,.16), transparent 52%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='160' viewBox='0 0 600 160' fill='none'%3E%3Cpath d='M0 100C100 0 180 160 300 80S500 0 600 100' stroke='white' stroke-opacity='.22' stroke-width='2' stroke-dasharray='6 10'/%3E%3C/svg%3E");
  background-size: auto, 600px 160px; background-repeat: no-repeat, repeat-x; background-position: 0 0, 0 50%;
  animation: routeRibbon 40s linear infinite;
}
@keyframes routeRibbon { to { background-position: 0 0, -600px 50%; } }
.cta-band .btn { transition: transform .25s var(--ease), box-shadow .25s var(--ease), color .2s ease, background .2s ease; }

/* ============================================================
   HEADER / NAV — compact on scroll, animated menu icon + drawer
   ============================================================ */
@media (min-width: 941px) {
  .site-header .nav { transition: height .3s var(--ease); }
  .site-header.scrolled .nav { height: 62px; }
  .site-header .logo .sub { transition: opacity .3s ease, max-height .3s ease, margin .3s ease; max-height: 14px; }
  .site-header.scrolled .logo .sub { opacity: 0; max-height: 0; margin: 0; }
}
.nav-toggle { width: 44px; height: 44px; position: relative; }
.nav-toggle span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--ink); transition: transform .35s var(--ease), opacity .2s ease, top .35s var(--ease); }
.nav-toggle span:nth-child(1) { top: 14px; } .nav-toggle span:nth-child(2) { top: 21px; } .nav-toggle span:nth-child(3) { top: 28px; }
.nav-toggle.is-open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
@media (max-width: 940px) {
  .nav-links.open a { animation: navIn .5s var(--ease) backwards; animation-delay: calc(var(--n, 0) * 55ms + 80ms); }
  .nav-links a:nth-child(1) { --n: 1; } .nav-links a:nth-child(2) { --n: 2; } .nav-links a:nth-child(3) { --n: 3; }
  .nav-links a:nth-child(4) { --n: 4; } .nav-links a:nth-child(5) { --n: 5; } .nav-links a:nth-child(6) { --n: 6; }
}
@keyframes navIn { from { opacity: 0; transform: translateX(28px); } }

/* ============================================================
   FLOATING BUTTONS — entrance + label on hover
   ============================================================ */
.float-btn { animation: floatPop .7s var(--ease) 1.2s backwards, pulseRing 2.6s ease 1.9s infinite; }
.float-btn.-telegram { animation: floatPop .7s var(--ease) 1.35s backwards, telegramPulse 2.6s ease 2.05s infinite; }
@keyframes floatPop { from { opacity: 0; transform: scale(.3) translateY(30px); } }
.float-btn::after {
  content: attr(aria-label); position: absolute; right: calc(100% + 12px); top: 50%; white-space: nowrap; pointer-events: none;
  padding: 7px 12px; font: 600 .74rem var(--font-body); color: #fff; background: var(--ink);
  opacity: 0; transform: translate(8px, -50%); transition: opacity .25s ease, transform .3s var(--ease);
}
.float-btn:hover::after, .float-btn:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
@media (hover: none) { .float-btn::after { display: none; } }
#backToTop { transition: opacity .25s ease, transform .25s var(--ease), visibility .25s, background .2s ease, color .2s ease; }
#backToTop:hover { background: var(--ink); color: #fff; transform: translateY(-4px); }

/* ============================================================
   FOOTER — outlined wordmark, link nudge
   ============================================================ */
.site-footer { padding-bottom: 0; }
/* Huge outlined wordmark sits in the middle of the footer; copyright + credit sit underneath it */
.footer-wordmark {
  position: relative; z-index: 0; text-align: center; margin-top: 36px; white-space: nowrap; user-select: none; pointer-events: none;
  font: 700 clamp(3rem, 11.5vw, 10rem)/1 var(--font-display); letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.14);
  transition: -webkit-text-stroke-color .6s ease;
}
.site-footer:hover .footer-wordmark { -webkit-text-stroke-color: rgba(255,255,255,.3); }
.site-footer .wrap { z-index: 1; }
.footer-grid a { transition: color .2s ease, transform .3s var(--ease); width: fit-content; }
.footer-grid a:hover { transform: translateX(6px); }
.footer-logo img, .footer-mark { transition: transform .6s var(--ease); }
.footer-logo:hover img, .footer-logo:hover .footer-mark { transform: rotate(90deg); }

/* ============================================================
   404 — a compass that cannot find north
   ============================================================ */
.lost-compass { width: 150px; height: 150px; margin: 0 auto 26px; color: var(--ink); }
.lost-compass .ring { fill: none; stroke: currentColor; stroke-width: 2; }
.lost-compass .ring.-dash { stroke-dasharray: 3 7; opacity: .55; animation: spinSlow 30s linear infinite reverse; transform-origin: 50% 50%; }
.lost-compass .needle { transform-origin: 50% 50%; animation: needleLost 5s ease-in-out infinite; }
.lost-compass .needle .n { fill: var(--red); } .lost-compass .needle .s { fill: var(--ink); }
@keyframes needleLost { 0% { transform: rotate(0); } 18% { transform: rotate(140deg); } 34% { transform: rotate(-70deg); } 52% { transform: rotate(250deg); } 70% { transform: rotate(40deg); } 100% { transform: rotate(360deg); } }
.big-404 { font: 700 clamp(5rem, 18vw, 10rem)/.9 var(--font-display); color: transparent; -webkit-text-stroke: 2px var(--ink); margin-bottom: 10px; animation: fadeRise 1s var(--ease) both; }

/* ============================================================
   REDUCED MOTION — keep the design, drop the movement
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .js-motion main h1:not([data-setting]):not(.is-split) { opacity: 1; animation: none; }
  .is-split .w > span, .intro-route .draw, .intro-road .car { animation: none !important; }
  .intro-route .draw { stroke-dashoffset: 0; }
  .card-grid:empty::after, .sticky-card::before, .cta-band::before, .float-btn::after { animation: none; }
  .tour-card:hover .ticket-seam, .vehicle-card:hover .ticket-seam { animation: none; }
  .lost-compass .needle, .lost-compass .ring.-dash { animation: none; }
}

/* ============================================================
   HOVER COLOUR — cyan blue on every page EXCEPT the Tour Packages
   pages (tours.html + tour detail, which set html[data-pg="tour"]
   and keep their red hovers). To change the cyan, edit --cyan here.
   ============================================================ */
:root { --cyan: #00a9d4; --cyan-soft: rgba(0,169,212,.16); --cyan-light: #29d3ff; }

/* Cards: re-point the accent on the hovered card, so every accent-coloured detail inside it turns cyan */
:root:not([data-pg="tour"]) :is(.tour-card, .vehicle-card, .why-card, .testi-card, .team-card, .contact-panel a):hover {
  --accent: var(--cyan); --accent-soft: var(--cyan-soft);
}

/* Links, headings and controls that name their hover colour directly */
:root:not([data-pg="tour"]) .nav-links a:hover { color: var(--cyan); }
:root:not([data-pg="tour"]) .nav-links a:hover::after { background: var(--cyan); }
:root:not([data-pg="tour"]) .home-contact-inner a:hover { color: var(--cyan-light); }
:root:not([data-pg="tour"]) .faq-item:hover { border-color: var(--cyan); }
:root:not([data-pg="tour"]) .faq-item:hover .faq-q,
:root:not([data-pg="tour"]) .faq-q:hover { color: var(--cyan); }
:root:not([data-pg="tour"]) .legal-toc a:hover,
:root:not([data-pg="tour"]) .legal-toc.-blue a:hover { color: var(--cyan); }
:root:not([data-pg="tour"]) .legal-section:hover { background: linear-gradient(90deg, rgba(0,169,212,.07), transparent 70%); }
:root:not([data-pg="tour"]) a.rich-link:hover { color: var(--cyan); }
:root:not([data-pg="tour"]) .social-row a:hover { border-color: var(--cyan-light); }
:root:not([data-pg="tour"]) .why-card:hover::after { border-color: transparent var(--cyan) transparent transparent; }
:root:not([data-pg="tour"]):not([data-pg="car"]) .filter-chip::before { background: var(--cyan); }
:root:not([data-pg="tour"]) .btn:hover { box-shadow: 5px 5px 0 var(--cyan-soft); }
:root:not([data-pg="tour"]) .order-item:hover { background: rgba(0,169,212,.08); }
:root:not([data-pg="tour"]) #backToTop:hover,
:root:not([data-pg="tour"]) .modal-close:hover { background: var(--cyan); color: #fff; }

/* ============================================================
   FOOTER LINKS — cyan blue text (all pages). The hover is a
   brighter cyan plus the slide-right nudge already defined above.
   ============================================================ */
.footer-grid a { color: var(--cyan-light); }
.footer-grid a:hover { color: #b8f0ff; }
.footer-logo b { color: #fff; }