/* Eway Destinations v2 — "deal board" design system.
   Tokens taken verbatim from the approved design. */

:root {
  --bg: #0f1722;
  --card: #18222f;
  --line: #243244;
  --text: #eef2f6;
  --muted: #b6c2cf;
  --dim: #8595a8;
  --placeholder: #6f7f92;
  --green: #2fd06f;
  --yellow: #ffd84a;
  --maxw: 1280px;
  --pad: clamp(20px, 4vw, 56px);
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--yellow); }
input, select, textarea, button { font: inherit; }
::placeholder { color: var(--placeholder); }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }

/* ---------- Date inputs ----------
   The dropdown panel itself is browser chrome and only follows color-scheme, so
   dark is the most we can do there. The calendar button is reachable though, and
   its default glyph reads as grey browser furniture on these cards — replace it
   with a green one so the control belongs to the theme. Declared once here
   rather than per-card, so every date field matches. */
input[type="date"] { color-scheme: dark; }
input[type="date"]::-webkit-calendar-picker-indicator {
  -webkit-appearance: none;
  appearance: none;
  width: 1.05em; height: 1.05em;
  margin-left: 6px;
  cursor: pointer;
  opacity: .9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232fd06f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
input[type="date"]:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* Firefox has no picker indicator to style; the field still inherits the theme. */

/* ---------- Selects ----------
   color-scheme is what makes the popup list render dark — without it the option
   list opens white against these cards. Then drop the native arrow for a green
   chevron so the control reads as ours. Anything styling a select after this
   must use background-color, not the background shorthand, or it wipes the
   chevron. */
select {
  color-scheme: dark;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232fd06f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: .62em;
  padding-right: 1.5em;
}
select:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
select::-ms-expand { display: none; }

/* Headlines: Archivo variable width, very wide and tight. */
h1, h2, .display {
  font-weight: 900;
  font-stretch: 120%;
  letter-spacing: -.01em;
  margin: 0;
}
h1 { font-size: clamp(52px, 6vw, 80px); line-height: .88; font-stretch: 125%; letter-spacing: -.02em; }
h2 { font-size: clamp(34px, 4vw, 44px); }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .16em; color: var(--dim); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(15, 23, 34, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #1d2938;
}
.site-header .bar {
  max-width: var(--maxw); margin: 0 auto;
  padding: 18px var(--pad);
  display: flex; flex-wrap: wrap; gap: 16px 28px;
  align-items: center; justify-content: space-between;
}
.wordmark { color: var(--text); line-height: 1; display: flex; align-items: center; gap: 10px; }
.wordmark .mark { width: 40px; height: 40px; object-fit: contain; flex: none; }
.site-footer .wordmark .mark { width: 34px; height: 34px; }
.wordmark .name { font-weight: 900; font-size: 22px; font-stretch: 115%; }
.wordmark .name span { color: var(--green); }
.wordmark .tag { font-size: 10px; letter-spacing: .16em; color: var(--dim); margin-top: 3px; }
.site-nav { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 15px; }
.site-nav a { padding: 6px 0; color: var(--muted); border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--text); }
.site-nav a.active { color: var(--text); border-bottom-color: var(--green); }
.header-right { display: flex; gap: 10px; align-items: center; }
.header-phone { font-size: 15px; font-weight: 600; color: var(--text); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; border: 0; border-radius: var(--r-md); font-weight: 800;
  text-align: center; }
.btn-green { background: var(--green); color: var(--bg); padding: 16px; font-size: 18px; }
.btn-green:hover { background: #29b862; color: var(--bg); }
.btn-yellow-outline { background: transparent; border: 1.5px solid var(--yellow);
  color: var(--yellow); font-weight: 700; font-size: 14px; padding: 8px 14px;
  border-radius: var(--r-sm); }
.btn-yellow-outline:hover { background: var(--yellow); color: var(--bg); }
.btn-ghost { background: transparent; border: 1.5px solid currentColor; color: inherit;
  font-size: 15px; padding: 12px; border-radius: 12px; width: 100%; }
.link-green { background: none; border: 0; cursor: pointer; color: var(--green);
  font-weight: 700; font-size: 16px; padding: 0; }

/* ---------- Hero ----------
   Full-bleed Burj photo behind the hero. The gradients are not decoration —
   white and green type on a photo fails contrast without them, so they keep
   the left column near-solid and let the tower show through on the right. */
.hero-bg {
  background-color: var(--bg);
  background-image:
    linear-gradient(to bottom, rgba(15,23,34,.06) 0%, rgba(15,23,34,0) 45%, rgba(15,23,34,.55) 90%, var(--bg) 100%),
    linear-gradient(to right, var(--bg) 0%, rgba(15,23,34,.80) 23%, rgba(15,23,34,.08) 55%, rgba(15,23,34,0) 100%),
    url('../img/photos/hero-burj-1600.webp');
  background-size: auto, auto, cover;
  background-position: center, center, center 32%;
  background-repeat: no-repeat;
}
@media (max-width: 700px) {
  /* the 800px file is enough at phone widths, and saves 200 KB on mobile data */
  .hero-bg {
    background-image:
      linear-gradient(to bottom, rgba(15,23,34,.62) 0%, rgba(15,23,34,.45) 35%, var(--bg) 100%),
      linear-gradient(to right, rgba(15,23,34,.80) 0%, rgba(15,23,34,.70) 100%),
      url('../img/photos/hero-burj-800.webp');
  }
}

.hero {
  max-width: var(--maxw); margin: 0 auto;
  padding: 48px var(--pad) 64px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  gap: 48px; align-items: center;
}
/* Caption pill + photo credit, sitting on the image below the hero columns. */
.hero-foot {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) 34px;
  display: flex; flex-wrap: wrap; gap: 14px 20px;
  align-items: center; justify-content: space-between;
}
.hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(15, 23, 34, .72); border: 1px solid var(--line);
  backdrop-filter: blur(6px);
  border-radius: 999px; padding: 8px 8px 8px 16px;
  color: var(--text); font-size: 14px; font-weight: 600;
}
.hero-pill:hover { color: var(--text); border-color: var(--green); }
/* Hold the box at the width of the longest spot and push the tag to the right
   edge. Without this the pill breathed 117px in and out every four seconds,
   which reads as a glitch rather than as a feature. Narrow screens fall back
   to shrink-to-fit, where the swing is what wrapping would cost anyway. */
@media (min-width: 560px) {
  .hero-pill { min-width: 470px; justify-content: space-between; }
}
/* The longest spot ("Dubai Aquarium & Underwater Zoo · 48 m tunnel") pushed the
   pill about 2px past a 360-400px viewport, which is enough for a horizontal
   scrollbar. The name truncates instead; the tag never does, because the price
   is the part worth reading. min-width:0 is what lets a flex item shrink below
   its own content. */
.hero-pill { max-width: 100%; }
.hero-pill .hero-pill-text {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero-pill .tag { flex: none; }
/* The pill swaps its contents on a timer. Only the text and tag fade; the pill
   itself keeps its box so the swap cannot nudge anything around it. */
.hero-pill .hero-pill-text, .hero-pill .tag { transition: opacity .32s ease; }
.hero-pill.is-swapping .hero-pill-text, .hero-pill.is-swapping .tag { opacity: 0; }
/* an attraction that has not opened yet: green tag, and the dot pulses */
.hero-pill.is-soon .tag { background: var(--green); }
.hero-pill.is-soon .dot { animation: heroDot 1.8s ease-out infinite; }
@keyframes heroDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 208, 111, .55); }
  70%      { box-shadow: 0 0 0 6px rgba(47, 208, 111, 0); }
}
.hero-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.hero-pill .tag {
  background: var(--yellow); color: var(--bg); font-weight: 800; font-size: 13px;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.hero-credit { font-size: 12px; color: var(--dim); }

.hero-stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 30px; }
.hero-stats .n { font-weight: 900; font-size: 30px; font-stretch: 115%; }
.hero-stats .l { font-size: 13px; color: var(--dim); }
.hero p.lede { margin: 26px 0 0; font-size: 19px; line-height: 1.5; color: var(--muted);
  max-width: 480px; text-wrap: pretty; }

/* ---------- Build-your-request card ---------- */
.build { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 28px; position: relative; }
.build .label { font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--yellow); }
.build .sentence { font-size: 26px; line-height: 1.9; font-weight: 600; margin-top: 10px; }
.build select, .build input[type=date] {
  background-color: var(--bg); color: var(--green); border: 0; border-bottom: 2px solid var(--green);
  font-weight: 700; font-size: 24px; padding: 0 1.4em 0 4px; max-width: 100%;
  color-scheme: dark;
}
.build input[type=date] { font-size: 20px; }
/* JavaScript writes the message preview after load, which took this box from
   one line to two and shoved the whole page down. Reserve the two lines up
   front: the space is used either way, and nothing moves. */
.build .preview { margin-top: 18px; background: var(--bg); border-radius: var(--r-md);
  padding: 14px 16px; font-size: 14px; line-height: 1.5; color: var(--muted);
  min-height: 70px; }
.build .preview .k { color: var(--dim); }
.build .btn-green { margin-top: 14px; width: 100%; }
.build .alt { margin-top: 12px; font-size: 13px; color: var(--dim); text-align: center; }

.sticker {
  position: absolute; top: -28px; right: -14px; z-index: 2; transform: rotate(8deg);
  background: var(--yellow); color: var(--bg); font-weight: 900; font-size: 17px;
  font-stretch: 110%; padding: 12px 16px; border-radius: 999px; text-align: center;
  line-height: 1.05;
}
.sticker .big { font-size: 30px; }

/* ---------- Notice banner ----------
   Sits above the header and scrolls away with the page: this is an
   announcement, not a control, and pinning it would cost header space on every
   screen for something you only need to read once. */
.site-notice { background: var(--card); border-bottom: 1px solid var(--line); }
[data-notice="seen"] .site-notice { display: none; }
/* The height is fixed and the line box is set in px, so the webfont swapping in
   cannot change it. This sits above the hero, so a couple of pixels here moves
   the entire page: before pinning it the banner was worth 0.16 of CLS on its
   own, against 0.06 for the rest of the page put together. */
.site-notice-in { max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--pad); height: 42px;
  display: flex; align-items: center; gap: 14px; }
.site-notice ul { list-style: none; margin: 0; padding: 0; flex: 1;
  display: flex; flex-wrap: nowrap; gap: 26px; min-width: 0; overflow: hidden; }
.site-notice li { display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; line-height: 20px; color: var(--muted); min-width: 0; }
.site-notice .n-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-notice .n-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.site-notice .n-soon .n-dot { background: var(--green); }
.site-notice .n-closed .n-dot { background: var(--dim); }
.site-notice .n-soon .n-text { color: var(--text); }
.site-notice .n-cta { flex: none; font-weight: 700; color: var(--green); white-space: nowrap; }
.site-notice .n-cta:hover { text-decoration: underline; }
.site-notice-x { flex: none; background: none; border: 0; cursor: pointer;
  color: var(--dim); font-size: 22px; line-height: 1; padding: 0 2px;
  transition: color .15s; }
.site-notice-x:hover { color: var(--text); }
@media (max-width: 640px) {
  .site-notice li { font-size: 12.5px; }
  .site-notice .n-cta { display: none; }   /* the card below carries the same action */
}

/* ---------- Deals ticker ---------- */
.ticker { background: var(--yellow); color: var(--bg); overflow: hidden; }
.ticker-track {
  display: flex; gap: 40px; white-space: nowrap; width: max-content;
  padding: 14px 0; font-weight: 800; font-size: 16px; font-stretch: 110%;
  animation: ticker 32s linear infinite;
}
.ticker-track > span { flex: none; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; padding-inline: var(--pad); }
}

/* ---------- Sections ---------- */
section { padding-top: 80px; }
section.first { padding-top: 72px; }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-end; gap: 12px; margin-bottom: 24px; }
.sec-head .note { font-size: 15px; color: var(--dim); }

.grid { display: grid; gap: 18px; }
.g-520 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); }
.g-300 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.g-270 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.g-260 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.g-250 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.g-160 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }

/* Striped placeholder — used wherever a photo is missing. */
.ph { background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 10px,
      rgba(255,255,255,.02) 10px 20px);
  display: flex; align-items: flex-end; padding: 10px;
  font: 500 10px 'JetBrains Mono', monospace; color: rgba(255,255,255,.45); }
.shot { position: relative; overflow: hidden; background: #111a26; }
.shot img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Ticket stub card ---------- */
.stub { display: grid; grid-template-columns: 140px minmax(0, 1fr) 140px;
  background: var(--card); border-radius: 16px; overflow: hidden; position: relative;
  color: var(--text); }
.stub:hover { color: var(--text); }
/* listed but closed: still on the page so the catalogue reads complete,
   visibly not for sale, and not a link to anywhere */
.stub.is-closed { cursor: default; opacity: .72; }
.stub.is-closed .pic { filter: grayscale(1); }
/* the reopening date is not a struck-through old price, so it must not
   inherit .was, which is what a crossed-out figure means on these cards */
.stub .reopens { font-size: 11.5px; font-weight: 700; margin-top: 3px;
  text-decoration: none; }
/* ---- unavailable ----
   Everything that says "buy this" is drained out of it: the photo goes grey,
   the yellow price panel goes to the card's own background, and the figure
   stops being the loudest thing on the row. */
/* filter, not opacity: the scroll reveal animates `opacity` to 1 at a higher
   specificity, so a fade set there would be wiped out the moment the card
   finished revealing. filter: opacity() is a different property and survives. */
.stub.is-closed { cursor: default; filter: opacity(.62); }
.stub.is-closed .pic img { filter: grayscale(1) brightness(.78); }
.stub.is-closed .price { background: var(--line); color: var(--muted); }
.stub.is-closed .amt { color: var(--muted); font-weight: 700; }
.stub.is-closed .from { color: var(--dim); }
.stub.is-closed .notch { background: var(--card); }
.stub .shut { font-size: 10px; letter-spacing: .08em; font-weight: 800;
  color: var(--muted); border: 1px solid var(--dim); border-radius: 5px;
  padding: 2px 6px; display: inline-block; }

/* ---- opening soon ----
   The opposite treatment. A green rail down the leading edge, the count in the
   badge, and the card stays a live link because a pre-booking for opening week
   is worth having. */
.stub.is-soon { position: relative; border-color: rgba(47, 208, 111, .4); }
.stub.is-soon::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--green), #1f9e52);
  border-radius: var(--r-md) 0 0 var(--r-md); z-index: 2;
}
.stub.is-soon .pic img { filter: saturate(1.08); }
/* The badge alternates between the countdown and OPENING SOON, rolling
   vertically like a departure board. The track is a column of three panes and
   the third repeats the first, so when the animation loops back to 0 it is
   already showing that same pane and the reset cannot be seen.
   Height is fixed in px and the track shrink-wraps to its widest pane, so the
   badge never changes size and the row never reflows. */
.stub .soon { font-size: 10px; letter-spacing: .06em; font-weight: 800;
  color: var(--bg); background: var(--green); border-radius: 5px;
  padding: 2px 7px; display: inline-block; height: 16px; overflow: hidden;
  vertical-align: top; }
.stub .soon-roll { display: block; animation: soonRoll 6.5s cubic-bezier(.7,0,.3,1) infinite; }
.stub .soon-roll b { display: block; height: 12px; line-height: 12px;
  white-space: nowrap; font-weight: 800; }
@keyframes soonRoll {
  0%, 26%   { transform: translateY(0); }
  35%, 61%  { transform: translateY(-12px); }
  70%, 100% { transform: translateY(-24px); }
}
.stub .shut { font-size: 11px; letter-spacing: .08em; font-weight: 800;
  color: var(--bg); background: var(--yellow); border-radius: 5px;
  padding: 2px 7px; display: inline-block; }
/* Definite height, not min-height: the image's height:100% only resolves against
   a definite parent, so with min-height a portrait source (Burj is 800x1067)
   renders at its own aspect ratio and stretches the whole row. */
.stub .pic { height: 130px; }
.stub .mid { padding: 18px 20px; overflow: hidden; }
.stub .emirate { font-size: 12px; letter-spacing: .12em; color: var(--dim); font-weight: 600; }
.stub .name { font-size: 20px; font-weight: 700; margin-top: 4px; line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stub .meta { font-size: 14px; color: var(--muted); margin-top: 4px; }
.stub .price { background: var(--yellow); color: var(--bg); padding: 18px 16px;
  display: flex; flex-direction: column; justify-content: center;
  border-left: 2px dashed var(--bg); }
.stub .price .off { font-weight: 900; font-size: 14px; }
.stub .price .from { font-size: 12px; font-weight: 600; margin-top: 6px; }
.stub .price .amt { font-weight: 900; font-size: 34px; font-stretch: 115%; line-height: 1; }
.stub .price .was { font-size: 12px; font-weight: 600; text-decoration: line-through;
  opacity: .6; margin-top: 4px; }
/* the two half-circle notches that make it read as a torn ticket */
.stub .notch { position: absolute; right: 131px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--bg); }
.stub .notch.t { top: -9px; }
.stub .notch.b { bottom: -9px; }
@media (max-width: 560px) {
  .stub { grid-template-columns: 96px minmax(0, 1fr) 118px; }
  .stub .notch { right: 109px; }
  .stub .price .amt { font-size: 26px; }
}

/* ---------- Safari tiers ---------- */
.tier { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px;
  position: relative; background: transparent; color: var(--text); }
.tier.popular { background: var(--green); color: var(--bg); border-color: var(--green); }
.tier .badge { position: absolute; top: -12px; right: 18px; background: var(--bg);
  color: var(--yellow); font-weight: 800; font-size: 12px; padding: 5px 10px;
  border-radius: 999px; border: 1px solid var(--yellow); }
.tier .label { font-size: 14px; letter-spacing: .12em; font-weight: 700; opacity: .8; }
.tier .amt { font-weight: 900; font-size: 52px; font-stretch: 115%; margin: 8px 0; }
.tier .perk { font-size: 16px; line-height: 1.8; }
.tier .btn-ghost { margin-top: 18px; }

/* ---------- Tour / package cards ---------- */
.tcard { text-align: left; background: none; border: 0; padding: 0; color: var(--text);
  display: block; }
.tcard .pic { height: 180px; border-radius: var(--r-md); overflow: hidden; }
.tcard .name { font-size: 18px; font-weight: 700; margin-top: 12px; }
.tcard .meta { font-size: 14px; color: var(--muted); margin-top: 2px; }
.tcard .price { font-size: 15px; margin-top: 6px; }
.tcard .price b { color: var(--yellow); }
.tcard .price span { color: var(--dim); }

.pkg { background: var(--card); border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column; }
.pkg .pic { height: 160px; position: relative; }
.pkg .off { position: absolute; top: 12px; right: 12px; background: var(--yellow);
  color: var(--bg); font-weight: 900; font-size: 15px; font-stretch: 110%;
  padding: 6px 10px; border-radius: 999px; transform: rotate(4deg); }
.pkg .body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.pkg .name { font-size: 21px; font-weight: 800; font-stretch: 110%; }
.pkg .nights { font-size: 13px; color: var(--dim); margin-top: 2px; }
.pkg .inc { margin: 12px 0 14px; display: grid; gap: 6px; }
.pkg .inc div { font-size: 14px; color: var(--muted); display: flex; gap: 8px; }
.pkg .inc .tick { color: var(--green); }
.pkg .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.pkg .tags span { font-size: 12px; font-weight: 600; border: 1px solid var(--line);
  color: var(--muted); padding: 4px 8px; border-radius: 6px; }
.pkg .cta { margin-top: 14px; text-align: center; background: var(--green); color: var(--bg);
  font-weight: 800; padding: 12px; border-radius: 12px; }

/* ---------- Emirate tiles ---------- */
.etile { text-align: left; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 0; overflow: hidden; color: var(--text); display: block; }
.etile:hover { color: var(--text); border-color: var(--green); }
.etile .pic { height: 150px; }
.etile .body { padding: 14px; }
.etile .n { font: 500 11px 'JetBrains Mono', monospace; color: var(--green); }
.etile .name { font-weight: 800; font-size: 17px; margin-top: 4px; line-height: 1.1; }
.etile .tag { font-size: 13px; color: var(--dim); margin-top: 4px; }

/* ---------- Numbered service blocks ---------- */
.svc { text-align: left; background: none; border: 0; border-top: 3px solid var(--green);
  padding: 18px 0 0; color: var(--text); display: block; }
.svc:hover { color: var(--text); }
.svc .n { font-weight: 900; font-size: 40px; font-stretch: 115%; color: var(--green); }
.svc .h { font-weight: 700; font-size: 22px; margin-top: 6px; }
.svc .d { color: var(--muted); font-size: 15px; margin-top: 6px; line-height: 1.5; }

/* ---------- Why grid ----------
   One bordered block; the 1px gap over a --line background paints the hairlines. */
.why-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.why { background: var(--bg); padding: 26px; }
.why .t { font-weight: 800; font-size: 19px; }
.why .d { color: var(--muted); font-size: 15px; margin-top: 8px; line-height: 1.55;
  text-wrap: pretty; }

/* ---------- Agent band ---------- */
.agent-band {
  margin-top: 80px; background: var(--yellow); color: var(--bg);
  border-radius: var(--r-xl); padding: 34px 38px;
  display: flex; flex-wrap: wrap; gap: 20px;
  justify-content: space-between; align-items: center;
}
.agent-band .h { font-weight: 900; font-stretch: 120%; font-size: clamp(26px, 3vw, 36px); }
.agent-band .d { font-size: 17px; margin-top: 6px; font-weight: 500; }
.agent-band .acts { display: flex; flex-wrap: wrap; gap: 10px; }
.agent-band .b1 { background: var(--bg); color: var(--yellow); border: 0; font-weight: 800;
  font-size: 16px; padding: 15px 22px; border-radius: 12px; cursor: pointer; }
.agent-band .b2 { background: transparent; border: 2px solid var(--bg); color: var(--bg);
  font-weight: 800; font-size: 16px; padding: 13px 22px; border-radius: 12px; }
.agent-band .b2:hover { background: var(--bg); color: var(--yellow); }

/* ---------- Footer ---------- */
.site-footer { margin-top: 72px; border-top: 1px solid var(--line); }
.site-footer .cols { max-width: var(--maxw); margin: 0 auto;
  padding: 44px var(--pad) 28px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 32px; font-size: 15px; line-height: 2; color: var(--muted); }
.site-footer .h4 { color: var(--text); font-weight: 700; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--green); }
.site-footer .fmark { display: inline-block; font-weight: 900; font-size: 22px;
  font-stretch: 115%; color: var(--text); line-height: 1; }
.site-footer .fmark span { color: var(--green); }
.site-footer .fmark:hover { color: var(--text); }
.site-footer .about { line-height: 1.6; margin: 6px 0 0; max-width: 240px; }
.site-footer .legal { max-width: var(--maxw); margin: 0 auto;
  padding: 18px var(--pad) 32px; font-size: 13px; color: var(--dim);
  border-top: 1px solid #1d2938; }

/* ---------- Floating WhatsApp ---------- */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 30;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--green); color: var(--bg); font-weight: 800; font-size: 15px;
  padding: 13px 20px 13px 17px; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.wa-float .wa-mark { flex: none; }
.wa-float:hover { color: var(--bg); background: #29b862; }

/* ---------- Agent modal ---------- */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(6, 10, 16, .72);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none !important; }
.modal .panel { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 28px; width: min(100%, 420px); position: relative; }
.modal .title { font-weight: 900; font-stretch: 115%; font-size: 26px; }
.modal .sub { color: var(--dim); font-size: 14px; margin-top: 4px; }
.modal .close { position: absolute; top: 14px; right: 16px; background: none; border: 0;
  color: var(--dim); font-size: 22px; cursor: pointer; line-height: 1; }
.field { width: 100%; background-color: var(--bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 12px; padding: 13px 14px; margin-top: 12px; }
.field:focus { outline: 2px solid var(--green); outline-offset: 1px; }
select.field { padding-right: 2.4em; background-position: right 13px center; }
.modal .btn-green { width: 100%; margin-top: 16px; }
.modal .switch { margin-top: 14px; text-align: center; font-size: 14px; color: var(--dim); }
.msg { margin-top: 12px; font-size: 14px; border-radius: 10px; padding: 10px 12px; }
.msg.err { background: rgba(255, 90, 90, .12); color: #ff9c9c; }
.msg.ok { background: rgba(47, 208, 111, .12); color: var(--green); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 700; font-size: 18px;
  list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--green); font-weight: 400; font-size: 24px;
  line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq .a { padding: 0 0 18px; color: var(--muted); font-size: 16px; line-height: 1.6;
  max-width: 70ch; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.rates { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
table.rates th { text-align: left; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); font-weight: 700; padding: 12px 14px;
  border-bottom: 1px solid var(--line); }
table.rates td { padding: 14px; border-bottom: 1px solid var(--line); color: var(--muted); }
table.rates td:first-child { color: var(--text); font-weight: 600; }
table.rates td.p { color: var(--yellow); font-weight: 800; white-space: nowrap; }

/* ---------- Misc ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { border: 1px solid var(--line); background: transparent; color: var(--text);
  border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: 15px; cursor: pointer; }
.chip.active { background: var(--green); border-color: var(--green); color: var(--bg); }
.chip:hover { color: var(--text); border-color: var(--green); }
.chip.active:hover { color: var(--bg); }
.fact { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.fact .k { font-size: 12px; letter-spacing: .1em; color: var(--dim); font-weight: 700;
  text-transform: uppercase; }
.fact .v { font-weight: 700; margin-top: 4px; }
.lede { color: var(--muted); }
.notice { border-left: 3px solid var(--green); padding: 14px 18px; background: var(--card);
  border-radius: 0 12px 12px 0; }



.build .b-num:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* ---------- Themed date picker ----------
   Same reasoning as the dropdown: the native date panel is browser chrome —
   it renders grey with blue accents regardless of our tokens, and Playwright
   cannot screenshot it. eway.js swaps it for this in-page calendar and keeps
   the real <input type=date> as the value holder, so existing handlers run
   unchanged. No JS -> the native picker stays. */
.dp { position: relative; display: inline-block; max-width: 100%; }
.dp > input[type="date"] { position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; }
.dp-btn {
  display: inline-flex; align-items: center; gap: .45em;
  cursor: pointer; text-align: left;
  background: none; border: 0; color: inherit; font: inherit;
}
.dp-btn::after {
  content: ""; flex: none; width: 1.05em; height: 1.05em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232fd06f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dp-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.dp-btn .dp-empty { color: var(--placeholder); }

.dp-pop {
  position: absolute; z-index: 45; top: calc(100% + 8px); left: 0;
  width: 300px; padding: 14px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  font-size: 14px; font-weight: 500;
}
.dp[data-open="false"] .dp-pop { display: none; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dp-title { font-weight: 800; font-size: 16px; color: var(--text); }
.dp-nav { display: flex; gap: 4px; }
.dp-nav button {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  background: none; border: 1px solid var(--line); color: var(--text);
  font-size: 15px; line-height: 1; display: grid; place-items: center;
}
.dp-nav button:hover { border-color: var(--green); color: var(--green); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow { text-align: center; font: 500 11px 'JetBrains Mono', monospace;
  color: var(--dim); padding: 4px 0 6px; }
.dp-day {
  aspect-ratio: 1; display: grid; place-items: center; cursor: pointer;
  border: 0; background: none; color: var(--text);
  border-radius: 8px; font: inherit; font-size: 13.5px;
}
.dp-day:hover:not(:disabled) { background: var(--line); }
.dp-day.is-other { color: var(--dim); opacity: .55; }
.dp-day.is-today { box-shadow: inset 0 0 0 1px var(--green); color: var(--green); }
.dp-day.is-active { background: var(--green); color: var(--bg); font-weight: 800; }
.dp-day:disabled { opacity: .25; cursor: default; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--line); }
.dp-foot button { background: none; border: 0; cursor: pointer; font: inherit;
  font-weight: 700; font-size: 13px; color: var(--green); padding: 2px 4px; }
.dp-foot button:hover { color: var(--yellow); }

/* ---------- Build-your-request pills ----------
   Replaces the running-sentence layout. Each control is a pill; the select and
   date inputs inside are still enhanced by the themed listbox / calendar, so
   this is presentation only — the value holders and handlers are unchanged. */
.build .label {
  display: inline-block;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--muted);
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
}
.bq { display: grid; gap: 12px; margin-top: 18px; }
.bq-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
/* an author `display:flex` outranks the UA sheet's [hidden]{display:none},
   so the hidden rows would still paint */
.bq-row[hidden] { display: none; }

.bq-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 18px;
  min-width: 0;
}
.bq-ico { width: 18px; height: 18px; flex: none; opacity: .85; }

/* the headline control gets the green treatment */
.bq-service {
  background: rgba(47, 208, 111, .12);
  border-color: rgba(47, 208, 111, .45);
  color: var(--green);
  flex: 1 1 auto;
}
.bq-lead { font-weight: 700; font-size: 17px; flex: none; }
.bq-service .sel { flex: 1 1 auto; min-width: 0; }
.bq-service .sel-btn { color: var(--text); font-weight: 700; font-size: 17px; }
.bq-service .sel-list { font-size: 15px; }

.bq-where { display: inline-flex; align-items: center; gap: 6px;
  color: var(--dim); font-size: 16px; font-weight: 500; }
.bq-where .sel-btn { color: var(--muted); font-weight: 600; font-size: 16px; }

/* counts: big number, icon, label, chevron */
.bq-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bq-count { position: relative; }
.bq-num {
  width: 2.4ch; min-width: 2.4ch; flex: none;
  background: none; border: 0; padding: 0;
  color: var(--text); font: inherit; font-size: 20px; font-weight: 800;
  text-align: left; color-scheme: dark;
}
.bq-num::-webkit-outer-spin-button,
.bq-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bq-num { -moz-appearance: textfield; appearance: textfield; }
.bq-num:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.bq-label { color: var(--muted); font-size: 16px; font-weight: 600; }
.bq-more {
  margin-left: auto; flex: none; width: 26px; height: 26px;
  background: none; border: 0; cursor: pointer; padding: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238595a8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 16px;
}
.bq-more:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232fd06f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); }
.bq-more:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 6px; }
.bq-count[data-open="true"] .bq-more { transform: rotate(90deg); }

/* quick-pick list reuses the dropdown panel look */
.bq-picks {
  position: absolute; z-index: 44; top: calc(100% + 8px); right: 0;
  min-width: 96px; max-height: 260px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  scrollbar-width: none; -ms-overflow-style: none;
}
.bq-picks::-webkit-scrollbar { width: 0; display: none; }
.bq-count[data-open="false"] .bq-picks { display: none; }
.bq-picks li {
  padding: 8px 14px; border-radius: 8px; cursor: pointer;
  font-size: 15px; font-weight: 700; color: var(--text);
}
.bq-picks li[aria-selected="true"] { color: var(--green); }
.bq-picks li.is-active { background: var(--green); color: var(--bg); }

/* date pill spans the row */
.bq-date { width: 100%; }

/* ...except in the stay row, where two share it */
.bq-stay .bq-date { width: auto; flex: 1 1 210px; }
.bq-stay .bq-lead { font-size: 13px; color: var(--dim); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; }
.bq-nights {
  flex: none; padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 216, 74, .12); color: var(--yellow);
  font-size: 14px; font-weight: 800;
}
.bq-nights:empty { display: none; }
.bq-pkg .bq-pill { flex: 1 1 auto; }
.bq-pkg .sel { flex: 1 1 auto; min-width: 0; }
.bq-pkg .sel-btn { color: var(--text); font-weight: 700; font-size: 16px; }
@media (max-width: 560px) {
  .bq-stay .bq-date { flex: 1 1 100%; }
}
.bq-date .dp { flex: 1 1 auto; min-width: 0; }
.bq-date .dp-btn { width: 100%; color: var(--muted); font-size: 15px;
  font-weight: 600; letter-spacing: .06em; }
.bq-date .dp-btn .dp-empty { color: var(--dim); text-transform: uppercase;
  letter-spacing: .12em; font-size: 13px; }
.bq-date .dp-btn::after { margin-left: auto; }

@media (max-width: 560px) {
  .bq-counts { grid-template-columns: 1fr; }
  .bq-service { width: 100%; }
}

/* the pills carry the border now — no underline on controls inside them */
.bq .sel { border-bottom: 0; }
.bq .sel-btn, .bq .dp-btn { padding: 0; }

/* the pill is the trigger, but the number stays a text field */
.bq-count { cursor: pointer; }
.bq-count .bq-num { cursor: text; }

/* ---------- legal pages (privacy, terms) ----------
   Long-form prose lifted from the v1 templates; the v1 sheet is gone, so the
   v2 tokens style it here. */
.legal-doc { max-width: 78ch; }
.legal-doc h1 { font-size: clamp(34px, 5vw, 54px); line-height: .95; margin: 0 0 8px; }
.legal-doc .last-updated { color: var(--dim); font-size: 14px; margin: 0 0 32px; }
.legal-doc .content-section { padding: 22px 0; border-top: 1px solid var(--line); }
.legal-doc h2 { font-size: 22px; margin: 0 0 10px; color: var(--text); }
.legal-doc h3 { font-size: 17px; margin: 18px 0 6px; color: var(--muted); }
.legal-doc p { color: var(--muted); line-height: 1.7; margin: 0 0 12px; font-size: 15px; }
.legal-doc ul, .legal-doc ol { color: var(--muted); line-height: 1.7; font-size: 15px;
  margin: 0 0 12px; padding-left: 22px; }
.legal-doc li { margin-bottom: 6px; }
.legal-doc a { color: var(--green); }
.legal-doc strong { color: var(--text); }

/* ---------- touch targets in the build card ----------
   Measured on an iPhone 13: the emirate picker was 60x17, the count chevrons
   26x26 and the date button 254x16. Those are the controls someone has to hit
   to send a booking, and a 17px-tall target is a miss waiting to happen.
   Extending the hit area with a pseudo-element keeps the dense layout exactly
   as designed - nothing moves, the tappable region just reaches 44px. */
@media (hover: none) and (pointer: coarse) {
  .bq .sel-btn, .bq .dp-btn, .bq-more { position: relative; }
  .bq .sel-btn::before,
  .bq .dp-btn::before,
  .bq-more::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 50%; transform: translateY(-50%);
    height: 44px;
    /* wider than the glyph for the little chevron button */
    min-width: 44px;
  }
  .bq-more::before { left: 50%; transform: translate(-50%, -50%); }
}

/* ==========================================================================
   Motion
   Transform and opacity only, so nothing here causes layout or shifts the page.
   The hero is deliberately excluded: its h1 and background are the LCP
   candidates and fading them in would delay the largest paint.
   ========================================================================== */

/* ---- scroll reveal ----
   `.reveal` is added by JS, so a browser without it never hides anything. */
.js-motion .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1),
              transform .55s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.js-motion .reveal.is-in { opacity: 1; transform: none; will-change: auto; }
/* a grid of cards arrives as a wave rather than a block */
.js-motion .reveal.is-in:nth-child(2) { transition-delay: .06s; }
.js-motion .reveal.is-in:nth-child(3) { transition-delay: .12s; }
.js-motion .reveal.is-in:nth-child(4) { transition-delay: .18s; }
.js-motion .reveal.is-in:nth-child(5) { transition-delay: .24s; }
.js-motion .reveal.is-in:nth-child(6) { transition-delay: .3s; }

/* ---- cards lift, and their photo drifts in behind them ---- */
.stub, .dcard, .pcard {
  transition: transform .28s cubic-bezier(.22,.61,.36,1),
              box-shadow .28s cubic-bezier(.22,.61,.36,1);
}
.stub:hover, .dcard:hover, .pcard:hover { transform: translateY(-4px); }
.stub .pic, .dcard .pic, .pcard .pic { overflow: hidden; }
.stub .pic img, .dcard .pic img, .pcard .pic img {
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.stub:hover .pic img, .dcard:hover .pic img, .pcard:hover .pic img {
  transform: scale(1.06);
}
/* a closed attraction should not feel clickable */
.stub.is-closed:hover { transform: none; }
.stub.is-closed:hover .pic img { transform: none; }

/* ---- buttons ---- */
.btn { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* ---- the header gains a background once you leave the hero ---- */
.site-header {
  transition: background-color .3s ease, box-shadow .3s ease,
              backdrop-filter .3s ease;
}
.site-header.is-stuck {
  background: rgba(11, 18, 25, .88);
  backdrop-filter: saturate(150%) blur(10px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px -16px rgba(0, 0, 0, .8);
}

/* ---- the 40% OFF sticker breathes, so the eye catches it ---- */
@keyframes stickerPulse {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50%      { transform: rotate(-8deg) scale(1.045); }
}
/* Not below 560px: the sticker sits hard against the card's top-right corner,
   and scaling it there pushed it a pixel past a 360-400px viewport at the peak
   of the pulse - enough for a horizontal scrollbar on a phone. It is a
   decoration, so it simply holds still where there is no room for it. */
@media (min-width: 560px) {
  .sticker { animation: stickerPulse 3.4s ease-in-out infinite; }
}

/* ---- the SOON badge on an attraction that has not opened yet ---- */
@keyframes soonGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 208, 111, .5); }
  70%      { box-shadow: 0 0 0 7px rgba(47, 208, 111, 0); }
}
.stub .soon { animation: soonGlow 2.4s ease-out infinite; }

/* ---- the WhatsApp float, the single most important button on the site ---- */
@keyframes waNudge {
  0%, 92%, 100% { transform: translateY(0) rotate(0); }
  94%           { transform: translateY(-4px) rotate(-5deg); }
  96%           { transform: translateY(-2px) rotate(4deg); }
  98%           { transform: translateY(-1px) rotate(-2deg); }
}
.wa-float { animation: waNudge 7s ease-in-out 3s infinite; }
.wa-float:hover { animation-play-state: paused; }

/* ---- hero: transform only, never opacity, so LCP is untouched ---- */
@keyframes heroStats {
  from { transform: translateY(10px); }
  to   { transform: none; }
}
.js-motion .hero-stats > div { animation: heroStats .6s cubic-bezier(.22,.61,.36,1) both; }
.js-motion .hero-stats > div:nth-child(2) { animation-delay: .08s; }
.js-motion .hero-stats > div:nth-child(3) { animation-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal { opacity: 1; transform: none; transition: none; }
  .stub, .dcard, .pcard, .btn, .site-header { transition: none; }
  .stub:hover, .dcard:hover, .pcard:hover, .btn:hover { transform: none; }
  .stub:hover .pic img, .dcard:hover .pic img, .pcard:hover .pic img { transform: none; }
  .sticker, .stub .soon, .wa-float, .js-motion .hero-stats > div { animation: none; }
  /* with the roll stopped, show only the first pane rather than a frozen
     half-scrolled one */
  .stub .soon-roll { animation: none; transform: none; }
  .hero-pill .hero-pill-text, .hero-pill .tag { transition: none; }
  .hero-pill.is-soon .dot { animation: none; }
}