/* ---------- Fonts (variable weight 400–800) ---------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Sans Georgian';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/noto-sans-georgian-georgian.woff2') format('woff2');
  unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31;
}
@font-face {
  font-family: 'Noto Sans Georgian';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/noto-sans-georgian-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* FiraGO 1.001 predates Unicode's Mtavruli block (U+1C90), so Georgian caps
   come from its `case` feature applied to Mkhedruli, not from capital
   codepoints. Georgian ranges only — Latin stays on Manrope. */
@font-face {
  font-family: 'FiraGO';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/firago-georgian-400.woff2') format('woff2');
  unicode-range: U+0589, U+10A0-10FF, U+205A, U+2D00-2D2F, U+2E31;
}
@font-face {
  font-family: 'FiraGO';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/firago-georgian-500.woff2') format('woff2');
  unicode-range: U+0589, U+10A0-10FF, U+205A, U+2D00-2D2F, U+2E31;
}
@font-face {
  font-family: 'FiraGO';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('fonts/firago-georgian-600.woff2') format('woff2');
  unicode-range: U+0589, U+10A0-10FF, U+205A, U+2D00-2D2F, U+2E31;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Base ---------- */
:root {
  --navy: #0C1E3C;
  /* 20px padding + 37px logo + 20px padding. The nav never changes height. */
  --nav-h: 77px;
  --navy-deep: #081428;
  --gold: #BE9B5B;
  --bg: #F5F6F8;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Clear the fixed nav so #dests / #contact don't land underneath it. */
  scroll-padding-top: 90px;
}
html, body { margin: 0; }
body {
  background: var(--bg);
  font-family: 'Manrope', 'Noto Sans Georgian', sans-serif;
}

.section-pad {
  padding-left: max(24px, 4vw, calc((100% - 1366px) / 2));
  padding-right: max(24px, 4vw, calc((100% - 1366px) / 2));
}

.gasa-logo-img { display: block; object-fit: contain; }

/* ---------- Nav ---------- */
/* Fixed, not sticky: the hero starts at y=0 and the bar floats over its
   photo until the reader scrolls. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 20px;
  padding-bottom: 20px;
  /* No fill of its own — the bar is a blurred window onto whatever it passes
     over. Strong enough that the voucher cards behind it stop competing with
     the links. */
  background: transparent;
  backdrop-filter: blur(26px) saturate(1.15);
  -webkit-backdrop-filter: blur(26px) saturate(1.15);
}
.nav-logo { line-height: 0; }
.nav-logo img { width: 118px; height: 37px; }
.nav-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a {
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.lang-toggle {
  display: flex;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 100px;
  overflow: hidden;
}
.lang-toggle button {
  border: none;
  cursor: pointer;
  padding: 6px 13px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  background: transparent;
  color: rgba(255, 255, 255, .8);
}
.lang-toggle button.active { background: #fff; color: var(--navy); }
.nav-cta {
  background: #fff;
  color: var(--navy);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 20px;
  border-radius: 100px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  padding-top: 56px;
  padding-bottom: 56px;
  /* Locked to the background artwork's crop (1920x768). */
  --hero-h: clamp(560px, 40vw, 820px);
  aspect-ratio: 1920 / 768;
  min-height: 560px;
  max-height: 820px;
  display: flex;
  align-items: center;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  display: block;
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 620px;
  font-family: 'Manrope', 'FiraGO', sans-serif;
  /* No scrim over the photo, so the copy carries its own legibility. */
  text-shadow: 0 1px 2px rgba(6, 16, 33, .34), 0 6px 26px rgba(6, 16, 33, .5);
}
.hero-actions { text-shadow: none; }
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
}
.kicker::before { content: ''; width: 26px; height: 1px; background: var(--gold); }
.hero-lead {
  margin: 0 0 18px;
  white-space: pre-line;
  /* Georgian caps via FiraGO's `case` feature; CSS uppercase would map
     Mtavruli back to Mkhedruli, so it must not be used here. */
  font-feature-settings: 'case' 1;
  text-transform: uppercase;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.42;
  letter-spacing: .01em;
  font-weight: 500;
  color: rgba(255, 255, 255, .9);
}
.hero h1 {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.06;
  font-weight: 500;
  color: #fff;
  letter-spacing: .005em;
  text-transform: uppercase;
}
.hero h1 .t2 {
  display: block;
  font-style: italic;
  padding-left: .06em;
}
.hero-sub {
  margin: 22px 0 38px;
  white-space: pre-line;
  font-feature-settings: 'case' 1;
  text-transform: uppercase;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.5;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .9);
  max-width: 520px;
}

/* Vertical voucher strip (desktop). The wrapper is exactly one card tall and
   is NOT clipped — neighbours spill above and below and are cut only by the
   hero's own bounds. The header reads over the top of it through its own
   backdrop blur. Position is driven by --index from main.js, so a card can be
   clicked to bring it to centre. */
.hero-cards {
  position: relative;
  z-index: 1;
  --card-gap: 18px;
  /* Sized from the locked hero height, not the viewport width. */
  --card-avail: calc(var(--hero-h) - 112px);
  --card-h: clamp(230px, calc(var(--card-avail) * .68), 329px);
  /* Same voucher art as the campaign page: a 720x572 frame whose card sits
     inside a transparent margin, so the box follows the frame, not the card. */
  --card-w: calc(var(--card-h) * 720 / 572);
  --card-step: calc(var(--card-h) + var(--card-gap));
  width: var(--card-w);
  height: var(--card-h);
}
.hero-cards-list {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  /* No will-change here: promoting the strip while every card carries its own
     perspective() layer makes Chrome drop the centre card from raster. */
  transform: translateY(calc(var(--index, 1) * var(--card-step) * -1));
  transition: transform .75s var(--ease);
}
/* Set while the strip rewinds to its parity twin, which must not be seen. */
.hero-cards-list.is-jumping { transition: none; }
.hero-cards img {
  display: block;
  width: var(--card-w);
  height: var(--card-h);
  flex: none;
  cursor: pointer;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, 0, var(--lift, 0px));
  transition: transform .4s var(--ease), filter .4s var(--ease);
}
/* The card's corners are baked into the art, so the shadow has to follow the
   alpha rather than the (padded) box. */
.hero-cards img[style*="--lift"] { filter: drop-shadow(0 30px 40px rgba(4, 12, 26, .55)); }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-primary {
  background: #fff;
  color: var(--navy);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  padding: 15px 30px;
  border-radius: 100px;
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  padding: 15px 26px;
  border-radius: 100px;
}

/* ---------- Destinations ---------- */
.dests {
  padding-top: 88px;
  padding-bottom: 40px;
  background: var(--bg);
}
.dests-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 44px;
  gap: 24px;
  flex-wrap: wrap;
}
.dests-head h2 {
  margin: 0 0 10px;
  font-size: clamp(30px, 4vw, 38px);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.02em;
}
.dests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.dest-card {
  text-decoration: none;
  display: block;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  /* So the name can size itself against the card rather than the viewport. */
  container-type: inline-size;
}
.dest-card .photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dest-card .shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 20, 40, .86) 0%, rgba(8, 20, 40, .15) 55%, rgba(8, 20, 40, .35) 100%);
}
.dest-card .meta { position: absolute; left: 18px; right: 18px; bottom: 18px; }
.dest-card .region {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 5px;
}
.dest-card .name {
  /* .meta is anchored to the bottom, so a second line lifts the whole block
     and the card falls out of line with its neighbours. The longest name
     ("არაბთა საამიროები") plus the hover arrow — which sits in the flow even
     while it is invisible — outruns the card at four columns, so the name is
     pinned to one line and shrinks with the card instead. */
  font-size: 26px;
  font-size: clamp(18px, 7.2cqw, 26px);
  white-space: nowrap;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
}

/* ---------- Contact ---------- */
.contact {
  padding-top: 88px;
  padding-bottom: 88px;
  background: var(--navy);
  color: #fff;
}
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 56px;
  align-items: start;
}
.contact .kicker { margin-bottom: 22px; }
.contact h2 {
  margin: 0 0 16px;
  font-size: clamp(32px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -.02em;
}
.contact-sub {
  margin: 0 0 32px;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .68);
  max-width: 420px;
}
.contact-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.contact-actions .btn-primary { padding: 14px 26px; }
.contact-actions .btn-outline { padding: 14px 26px; }
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  padding: 12px 28px;
}
.contact-row {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  flex-wrap: wrap;
}
.contact-row:last-child { border-bottom: none; }
.contact-row dt {
  flex: 0 0 120px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
}
.contact-row dd {
  flex: 1;
  min-width: 180px;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .9);
}
.contact-row dd a { font-size: 16px; color: #fff; text-decoration: none; }
.contact-row .socials { display: flex; gap: 20px; flex-wrap: wrap; }
.contact-row .socials a {
  font-size: 15px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
}

/* ---------- Footer ---------- */
.footer {
  padding-top: 28px;
  padding-bottom: 28px;
  background: var(--navy-deep);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer img { width: 86px; height: 27px; opacity: .85; }
.footer span { font-size: 13px; color: rgba(255, 255, 255, .52); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  /* Landscape crop unusable on narrow screens — stack, let content set height. */
  .hero {
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
    /* The hero is content-sized here, so nothing pushes the copy clear of the
       fixed header — the padding has to do it. */
    padding-top: calc(var(--nav-h) + 28px);
    padding-bottom: 64px;
  }
  .hero-bg img { object-position: 70% center; }
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .hero-content { max-width: none; }
  .hero-sub { margin-bottom: 32px; }

  /* Same mechanism, laid out horizontally. */
  .hero-cards {
    --card-w: min(420px, 82vw);
    --card-h: calc(var(--card-w) * 572 / 720);
    --card-gap: 18px;
    --card-step: calc(var(--card-w) + var(--card-gap));
    width: auto;
    height: var(--card-h);
    /* Full-bleed so cards can slide past the section padding. */
    margin-inline: calc(max(24px, 4vw) * -1);
    /* Own horizontal drags, hand vertical back to the page. Without this the
       browser claims the horizontal gesture for scrolling and fires
       pointercancel, so pointerup — where the swipe is decided — never lands. */
    touch-action: pan-y;
  }
  .hero-cards-list {
    flex-direction: row;
    /* Centre the active card in the viewport. */
    padding-left: calc(50% - var(--card-w) / 2);
    transform: translateX(calc(var(--index, 1) * var(--card-step) * -1));
  }
}
@media (max-width: 640px) {
  .nav-links, .nav-cta { display: none; }
}

/* ---------- Motion ---------- */
:root {
  --ease: cubic-bezier(.22, 1, .36, 1);
}

#top, .dests, .contact { scroll-margin-top: 78px; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Hero entrance */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes line-grow {
  from { transform: scaleX(0); }
  to { transform: none; }
}
.nav { animation: rise-in .6s var(--ease) backwards; }
.hero-lead { animation: rise-in .9s var(--ease) backwards; }
.hero h1 { animation: rise-in .9s .1s var(--ease) backwards; }
.hero-sub { animation: rise-in .9s .22s var(--ease) backwards; }
.hero-actions { animation: rise-in .9s .34s var(--ease) backwards; }
.hero-cards { animation: rise-in 1s .3s var(--ease) backwards; }

/* Nav: compact on scroll + progress line. The compact state must not
   change the nav's height — a layout shift here makes scroll anchoring
   fight the user's scroll near the top of the page. */
.nav { transition: background .35s var(--ease), box-shadow .35s var(--ease); }
/* Scrolled adds the tint on top of the blur that is always there. */
.nav.scrolled {
  background: rgba(12, 30, 60, .72);
  box-shadow: 0 12px 30px -14px rgba(3, 9, 20, .65);
}
.nav-logo img { transition: transform .35s var(--ease); transform-origin: left center; }
.nav.scrolled .nav-logo img { transform: scale(.85); }
.nav-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), #DDBE85);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.nav-links a { position: relative; transition: color .25s; }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { transform: none; }
.lang-toggle button { transition: background .25s, color .25s; }

/* Buttons */
.btn-primary, .btn-outline, .nav-cta {
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              background .3s, border-color .3s;
}
.btn-primary:hover, .nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(2, 8, 20, .7);
}
.btn-primary:active, .nav-cta:active { transform: translateY(0) scale(.97); }
.btn-outline:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .06);
}
.btn-outline:active { transform: translateY(0) scale(.97); }

/* Scroll reveals */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* Destination cards: staggered entrance */
@keyframes card-in {
  from { opacity: 0; transform: translateY(26px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.dests-grid .dest-card { opacity: 0; }
.dests-grid.in .dest-card {
  opacity: 1;
  animation: card-in .7s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 75ms);
}

/* Destination cards: hover */
.dest-card { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.dest-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 44px -22px rgba(12, 30, 60, .5);
}
.dest-card .photo { transition: transform .8s var(--ease); }
.dest-card:hover .photo { transform: scale(1.06); }
.dest-card .meta { transition: transform .45s var(--ease); }
.dest-card:hover .meta { transform: translateY(-4px); }
.dest-card .name::after {
  content: '→';
  display: inline-block;
  margin-left: 10px;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.dest-card:hover .name::after { opacity: 1; transform: none; }

/* PLUS promo: lift, circle grow, sheen sweep, arrow nudge */
.promo-card { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.promo:hover .promo-card {
  transform: translateY(-4px);
  box-shadow: 0 36px 70px -26px rgba(255, 90, 0, .55);
}
.promo-card::before { transition: transform .6s var(--ease); }
.promo:hover .promo-card::before { transform: scale(1.4); }
.promo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .16) 50%, transparent 60%);
  transform: translateX(-130%);
  transition: transform .9s ease;
  pointer-events: none;
}
.promo:hover .promo-card::after { transform: translateX(130%); }
.promo-cta .arrow { display: inline-block; transition: transform .3s var(--ease); }
.promo:hover .promo-cta .arrow { transform: translateX(5px); }

/* Contact: staggered rows + link hovers */
.contact-card .contact-row {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.contact-card.in .contact-row { opacity: 1; transform: none; }
.contact-card.in .contact-row:nth-child(1) { transition-delay: .05s; }
.contact-card.in .contact-row:nth-child(2) { transition-delay: .13s; }
.contact-card.in .contact-row:nth-child(3) { transition-delay: .21s; }
.contact-card.in .contact-row:nth-child(4) { transition-delay: .29s; }
.contact-row dd a { transition: color .25s; }
.contact-row dd a:hover { color: var(--gold); }
.contact-row .socials a { transition: color .25s, border-color .25s; }
.contact-row .socials a:hover { color: var(--gold); border-color: var(--gold); }

/* Language-switch crossfade: .lang-anim is only present during the swap,
   so its transition override can't clobber hover transitions elsewhere */
body.lang-anim [data-i18n],
body.lang-anim .dests-grid { transition: opacity .2s ease !important; }
body.lang-fade [data-i18n],
body.lang-fade .dests-grid { opacity: 0; }

/* Reduced motion: everything visible, nothing moves */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
  .reveal, .contact-card .contact-row { opacity: 1; transform: none; }
  .dests-grid .dest-card { opacity: 1; }
  /* Strip still positions by --index; it just snaps instead of sliding. */
  .hero-cards-list { transition: none; }
}