/* ============================================================
   HOMEPAGE STYLES
   ============================================================ */

/* ============================================================
   WHY US  (#why)
   ============================================================
   The one section on the site that paints its own sky instead of
   letting the fixed backdrop show through a veil. It sits between
   the dark ticker strip and the navy AI section, so running it
   from pink at the top down to navy at the bottom turns that
   sandwich into a single descent: the ticker is the horizon line,
   this is the light going, and .bg-navy below is after dark.

   Because it descends, nothing in here can rely on the page's
   light-surface text colours. The head sits in the pink; the
   cards carry their own near-white surface so their navy text
   reads the same at the top of the grid as at the bottom.
   ============================================================ */
.why {
  position: relative;
  isolation: isolate;
  /* Clips the watermark overhang. Sections paint as one unit in
     DOM order, so a stamp poking out of the top would land on the
     ticker above. Same reasoning as .bg-white and friends. */
  overflow: hidden;
  /* Deeper than the standard .sec rhythm at the bottom only. Two
     reasons, one visual and one structural: the descent wants a
     stretch of settled navy before it hands off to .bg-navy rather
     than hitting that join mid-fade, and the bottom band is the only
     full-width clear space the travel marks have — at the standard
     108px it measured 76px, which is shorter than the flight arc, so
     the arc rendered entirely behind the last card row. */
  padding-bottom: clamp(92px, 11vw, 170px);
  background:
    /* A little light left in the sky, so the top edge doesn't
       read as a flat swatch butted against the dark ticker. */
    radial-gradient(900px 380px at 50% -8%, rgba(255,255,255,.5), transparent 70%),
    linear-gradient(180deg,
      #EFDFE9  0%,
      #E1CBD7 15%,   /* the brand's light pink, held long enough to be a colour */
      #CBBED6 33%,
      #9FB0CE 52%,   /* through the soft blue rather than through grey */
      #5D7C9E 76%,
      #2E4C66 91%,
      #26425A 100%); /* the brand's deep navy, handing off to .bg-navy */
}
.why > .wrap { position: relative; z-index: 1; }

/* The section head lives in the pink third. --red-600 on the
   eyebrow still clears 4.5:1 there, so the brand accent stays;
   the lead moves onto deep navy because --ink-soft measured
   4.45:1 against the middle of the ramp. */
.why .lead { color: var(--navy-700); }

/* The script line is the mauve the brief asks for, taken from the
   deep end of that ramp rather than the light end. #C38EB4 on
   #E1CBD7 is 1.7:1 — the two are neighbours on the same gradient,
   so the word would sit on the background rather than on top of
   it. --mauve-700 is the same hue at 3.7:1. #C38EB4 does all the
   accent work in here instead: card glow, icon ring, watermarks. */
.why .accent-script { color: var(--mauve-700); }

/* ---------- travel marks ---------- */
/* Passport, entry stamp, boarding pass, plane, flight arc. Each one
   is placed in a gutter or the bottom band — room the 720px head
   column and the card grid never reach — and every one was measured
   for occlusion rather than eyeballed, so none of them is a shape
   that only exists in the stylesheet. */
.why__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.wm { position: absolute; display: block; }

/* Top pair, on the pink — drawn in navy. */
.wm--passport { top:  4%; left:  2.2%; width: 132px; opacity: .11; color: var(--navy-800); transform: rotate(-9deg); }
.wm--stamp    { top: 11%; right: 3%;   width: 150px; opacity: .10; color: var(--navy-800); transform: rotate(12deg); }

/* Middle pair, on the blue — still navy, dialled down as the
   background darkens toward them. Both sit in the band between the
   head and the top card row, where the gutters are still open. */
.wm--pass     { top: 24%; left: -1.5%; width: 190px; opacity: .12; color: var(--navy-900); transform: rotate(-7deg); }
.wm--plane    { top: 25%; right: 1.5%; width: 128px; opacity: .13; color: var(--navy-900); transform: rotate(-16deg); }

/* The flight arc, on the navy — the ink flips to pink.

   It's squashed vertically rather than scaled down, because it has
   to stay the full width of the section to read as a route while
   its ink fits the band below the last card row (measured 115px at
   1280, 66px at 768). A shallower arc is also closer to what a
   long-haul leg looks like on a map.

   There was a globe down here too. It measured 74% occluded at
   1280px and 100% at 1024 — the bottom band belongs to the arc, and
   a second mark in a strip that thin is a mark nobody sees. */
.wm--route    { bottom: 0; left: 0; right: 0; width: 100%; opacity: .22; color: var(--mauve-100);
                transform: scaleY(.28); transform-origin: 50% 100%; }

/* Retire them from the outside in as the gutters close up. The
   head column is a fixed 720px, so the passport and stamp run out
   of room before the grid does — measured, they start clipping the
   head's box at about 1100px. The globe and the arc live in the
   bottom padding band, which exists at every width, so they stay
   until the whole layer goes on phones. */
@media (max-width: 1180px) { .wm--pass, .wm--plane { display: none; } }
@media (max-width: 1120px) { .wm--passport, .wm--stamp { display: none; } }
@media (max-width: 620px)  { .why__art { display: none; } }

/* One gradient, six icons. Zero-sized rather than display:none —
   a hidden subtree still resolves url(#wIco), a removed one does
   not in every engine. */
.why__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- feature card ---------- */
.wcard {
  --rd: .09s;                     /* reveal stagger, see below */
  position: relative;
  /* So the glow layer can sit above this card's own background but
     below its text — see .wcard::after. */
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 34px);
  /* --r-xl, not the --r-lg the rest of the site's cards use. The
     brief asks for softer corners here and the section is the one
     place that can carry them: everything in it is already round. */
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(38, 66, 90, .09);
  box-shadow: 0 2px 10px rgba(14, 29, 48, .06);
  translate: 0 0;
}
/* Two motions on one element, and they must not share a clock.
   [data-reveal] in base.css owns opacity+transform for the
   entrance and staggers it via [data-delay]; the hover lift uses
   `translate`, a separate property that composes with transform,
   so it can run short and undelayed while the entrance runs long
   and staggered.

   The selector has to outrank [data-reveal][data-delay="1"] (0,2,0)
   or that rule's blanket `transition-delay` would put the entrance
   stagger on the hover lift too, and the third card would take
   .27s to start rising under the cursor. */
.why .wcard[data-reveal] {
  transition:
    opacity    .75s var(--ease) var(--rd),
    transform  .75s var(--ease) var(--rd),
    translate  .42s var(--ease),
    box-shadow .42s var(--ease);
}
.why .wcard[data-delay="2"] { --rd: .18s; }
.why .wcard[data-delay="3"] { --rd: .27s; }

/* The glow. A ring on a pseudo-element rather than a border-colour
   swap, so it fades in from nothing instead of stepping from grey
   to mauve. Negative z-index inside the card's own stacking context
   paints it over the card background and under the text, so the
   inset wash can't sit on top of a paragraph. */
.wcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 1.5px solid var(--mauve-500);
  box-shadow:
    0 0 22px 2px rgba(var(--rgb-mauve), .45),
    inset 0 0 20px rgba(var(--rgb-mauve), .12);
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s var(--ease);
}
.wcard:hover {
  translate: 0 -8px;
  box-shadow: 0 20px 44px rgba(14, 29, 48, .2);
}
.wcard:hover::after { opacity: 1; }

.wcard h3 { font-size: 1.08rem; line-height: 1.35; color: var(--navy-900); margin-bottom: 10px; }
.wcard p  { font-size: .93rem; line-height: 1.75; color: var(--ink-soft); }

/* ---------- icon plate ---------- */
.wcard__ico {
  width: 58px; height: 58px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: linear-gradient(150deg, rgba(var(--rgb-blue), .2), rgba(var(--rgb-mauve), .22));
  border: 1px solid rgba(var(--rgb-mauve), .28);
  margin-bottom: 22px;
  transition: border-color .42s var(--ease), box-shadow .42s var(--ease);
}
.wcard__ico svg { width: 30px; height: 30px; display: block; overflow: visible; }
.wcard:hover .wcard__ico {
  border-color: var(--mauve-500);
  box-shadow:
    0 0 0 4px rgba(var(--rgb-mauve), .13),
    0 8px 20px rgba(var(--rgb-mauve), .3);
}

/* ---------- icon micro-animations ----------
   One per card, each saying what the card says. They only run
   while the pointer is on the card, and none of them move more
   than about two pixels. */

/* Shield — breathes. */
@keyframes wico-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.wcard--shield:hover .wcard__ico svg { animation: wico-pulse 1.8s var(--ease-io) infinite; }

/* Document — the three lines re-read themselves, top to bottom. */
@keyframes wico-scan {
  0%, 100% { transform: scaleX(1);   opacity: 1; }
  35%      { transform: scaleX(.12); opacity: .5; }
}
.wcard--doc .l1, .wcard--doc .l2, .wcard--doc .l3 {
  transform-box: fill-box;
  transform-origin: left center;
}
.wcard--doc:hover .l1 { animation: wico-scan 1.5s var(--ease-io) infinite; }
.wcard--doc:hover .l2 { animation: wico-scan 1.5s var(--ease-io) .16s infinite; }
.wcard--doc:hover .l3 { animation: wico-scan 1.5s var(--ease-io) .32s infinite; }

/* Clock — one full sweep of the minute hand, then it stays put.
   fill-box puts the origin at the pivot without hard-coding a
   coordinate: the hand's box is zero-width, so 50% 100% is 12,12. */
.wcard--clock .hand {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 1.1s var(--ease-io);
}
.wcard--clock:hover .hand { transform: rotate(360deg); }

/* Plane — moves along its own axis, which is the diagonal it's
   already drawn on. */
.wcard--plane .ico-plane { transition: transform .45s var(--ease); }
.wcard--plane:hover .ico-plane { transform: translate(2.2px, -2.2px); }

/* Chat — the typing indicator everyone already knows. */
@keyframes wico-dot {
  0%, 60%, 100% { transform: translateY(0);      opacity: .82; }
  30%           { transform: translateY(-1.6px); opacity: 1; }
}
.wcard--chat:hover .d1 { animation: wico-dot 1.25s var(--ease-io) infinite; }
.wcard--chat:hover .d2 { animation: wico-dot 1.25s var(--ease-io) .14s infinite; }
.wcard--chat:hover .d3 { animation: wico-dot 1.25s var(--ease-io) .28s infinite; }

/* Layers — the top plate lifts off the stack. */
.wcard--layers .ico-top { transition: transform .45s var(--ease); }
.wcard--layers:hover .ico-top { transform: translateY(-1.4px); }

/* ---------- reduced motion ---------- */
/* base.css flattens durations globally, which is enough for the
   lift and the glow — they end where they started plus 8px. The
   looping ones have to stop outright: a .01ms pulse repeating
   forever is a flicker, not a calm card. */
@media (prefers-reduced-motion: reduce) {
  .wcard--shield:hover .wcard__ico svg,
  .wcard--doc:hover .l1, .wcard--doc:hover .l2, .wcard--doc:hover .l3,
  .wcard--chat:hover .d1, .wcard--chat:hover .d2, .wcard--chat:hover .d3 { animation: none; }
  .wcard--clock:hover .hand { transform: none; }
  .wcard--plane:hover .ico-plane,
  .wcard--layers:hover .ico-top { transform: none; }
  .wcard:hover { translate: 0 0; }
}

/* ---------- AI SPOTLIGHT ---------- */
.ai-spot__grid {
  display: grid;
  grid-template-columns: 1fr .88fr;
  gap: clamp(32px, 6vw, 76px);
  align-items: center;
}
@media (max-width: 940px) { .ai-spot__grid { grid-template-columns: 1fr; } }

.ai-spot__list { display: flex; flex-direction: column; gap: 13px; }
.ai-spot__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .96rem;
  color: rgba(255,255,255,.84);
  line-height: 1.6;
}
.ai-spot__list li::before {
  content: "";
  flex-shrink: 0;
  width: 21px; height: 21px;
  margin-top: 2px;
  border-radius: 50%;
  /* Mauve disc, navy check. Red here made eight feature bullets
     look like eight buttons on the one dark section that already
     has a real button in it. */
  background: var(--mauve-500)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2317293D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

/* mock result card */
.ai-preview {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  backdrop-filter: blur(14px);
  box-shadow: var(--sh-xl);
}
.ai-preview__hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: #fff;
}
.ai-preview__score {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  color: #fff;
}
.ai-preview__num {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  /* Still green, because the number is a verdict and green is what
     "good" looks like — but a mint rather than the old lime, which
     was the only yellow-green on the site and fought the mauve
     right next to it. */
  color: #6FD79B;
}
.ai-preview__bars { display: flex; flex-direction: column; gap: 11px; }
.ai-preview__bars > div { display: grid; grid-template-columns: 1fr; gap: 5px; }
.ai-preview__bars span { font-size: .81rem; color: rgba(255,255,255,.72); font-weight: 600; }
.pb { height: 6px; background: rgba(255,255,255,.14); border-radius: var(--r-full); overflow: hidden; }
.pb i {
  display: block;
  height: 100%;
  border-radius: var(--r-full);
  animation: grow 1.5s var(--ease) both;
}
@keyframes grow { from { width: 0 !important; } }
.ai-preview__tip {
  margin-top: var(--sp-5);
  padding: 13px 16px;
  background: rgba(var(--rgb-mauve),.2);
  border-left: 3px solid var(--mauve-500);
  border-radius: var(--r-sm);
  font-size: .85rem;
  line-height: 1.6;
  color: rgba(255,255,255,.9);
}
.ai-preview__tip strong { color: #fff; }

/* The DESTINATION REELS block that lived here is gone. It styled
   .dest-reels/.dest-chip for three scrolling rows of country
   names, which the reach instrument replaced - see REACH
   INSTRUMENT at the end of this file. Neither class is used
   anywhere else in the site. .marquee itself stays in base.css:
   the header ticker still uses it. */


/* ---------- SPLIT SECTIONS ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 66px);
  align-items: center;
}
.split--rev .split__media { order: 2; }
@media (max-width: 900px) {
  .split, .split--rev { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
}
.mt-9 { margin-top: clamp(48px, 7vw, 92px); }

.split__media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3.2;
  box-shadow: var(--sh-lg);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__badge {
  position: absolute;
  left: var(--sp-5); bottom: var(--sp-5);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  padding: 13px 20px;
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}
.split__badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: .96rem;
  color: var(--navy-900);
}
.split__badge span { font-size: .8rem; color: var(--ink-mute); }

.tick-list { display: flex; flex-direction: column; gap: 12px; }
.tick-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .96rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.tick-list li::before {
  content: "";
  flex-shrink: 0;
  width: 21px; height: 21px;
  margin-top: 2px;
  border-radius: 50%;
  /* A tick is already positive by shape; it doesn't also need to
     be green. Moving the disc onto the ramp means these lists sit
     inside the palette instead of importing a second one. */
  background: var(--mauve-50)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238E5580' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}

/* ---------- PROCESS STEPS ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  counter-reset: s;
}
@media (max-width: 940px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

.step {
  position: relative;
  background: var(--card);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease);
}
.step:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-lg);
  border-color: rgba(var(--rgb-mauve), .5);
}
.step__n {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  /* Nudged down from --navy-400/--mauve-500. Those stops read 2.43 and 2.63
     against the card, under the 3:1 a 38px numeral needs. This is the same
     ramp at 85%/90%, which clears 3:1 without changing the gesture. */
  background: linear-gradient(135deg, #728FB0, #B080A2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--sp-3);
}
.step h3 { margin-bottom: 8px; }
.step p { font-size: .92rem; color: var(--ink-soft); line-height: 1.7; }

/* ---------- QUOTES ---------- */
.quote {
  background: var(--card);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease);
}
.quote:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-lg);
  border-color: rgba(var(--rgb-mauve), .5);
}
.quote__stars { color: var(--gold-700); font-size: 1.02rem; letter-spacing: 2px; }
.quote p { font-size: .96rem; color: var(--ink-soft); line-height: 1.75; flex: 1; }
.quote__by {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
}
.quote__by .av {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--navy-50), var(--mauve-50));
  color: var(--navy-700);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: .9rem;
  flex-shrink: 0;
}
.quote__by strong { display: block; font-size: .93rem; color: var(--navy-900); }
.quote__by span { font-size: .81rem; color: var(--ink-mute); }

/* ---------- google reviews ----------
   The testimonials grid is filled at runtime by reviews.js. Cards reuse
   .quote wholesale; everything below is the Google-specific dressing —
   the attribution Google requires, and the empty state we show instead
   of inventing reviews. */

/* Unearned stars are drawn, not dropped, so a 4-star card still reads
   as a five-point scale at a glance. */
.quote__stars-off { color: var(--line); }

/* Rating and source mark share the top line on a Google card. */
.quote__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.quote__src { display: inline-flex; opacity: .85; flex-shrink: 0; }

/* On a hand-entered card the mark becomes a footer link — proof the
   quote is a real Google review and not something we wrote. It sits
   below the byline, quiet until hovered. */
.quote--google .quote__src {
  align-items: center;
  gap: 7px;
  margin-top: calc(var(--sp-3) * -1);
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-mute);
  text-decoration: none;
  opacity: 1;
  transition: color var(--t-mid) var(--ease);
}
.quote--google .quote__src svg { width: 14px; height: 14px; }
.quote--google .quote__src:hover { color: var(--navy-900); }
.quote--google .quote__src span { border-bottom: 1px solid currentColor; }

/* Reviews run long and arrive at wildly different lengths. Six lines
   keeps a row of cards even without truncating most of them. */
.quote--g p {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Real reviewer photo replaces the initial disc. Same 42px footprint. */
.quote__by .av--img { object-fit: cover; background: var(--navy-50); }

/* Author and timestamp are links (Google profile, and the review
   itself). They inherit the byline's weight so the card doesn't turn
   into a wall of blue. */
.quote__by a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.quote__by a:hover { border-bottom-color: currentColor; }
.quote__by span a { color: var(--ink-mute); }

/* ---------- rating summary chip ---------- */
.rev-score {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: var(--sp-4);
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  text-decoration: none;
  transition: border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.rev-score:hover { border-color: rgba(var(--rgb-mauve), .5); box-shadow: var(--sh-sm); }
.rev-score strong { font-size: 1.05rem; color: var(--navy-900); }
.rev-score__stars { color: var(--gold-700); letter-spacing: 1px; font-size: .95rem; }
.rev-score__n { font-size: .84rem; color: var(--ink-mute); }

/* ---------- ordering / sourcing disclosure ---------- */
/* Required by Google when their reviews are displayed off-platform:
   visitors have to be told these are Google's selection, not ours. */
.rev-note {
  margin-top: var(--sp-6);
  text-align: center;
  font-size: .82rem;
  color: var(--ink-mute);
  max-width: 640px;
  margin-inline: auto;
  line-height: 1.7;
}
.rev-note a { color: var(--red-600); font-weight: 700; }

/* ---------- empty state ---------- */
/* Shown when there are no reviews to display. Sized to hold the
   section open so the page doesn't jump when it swaps in. */
.rev-shell { display: block; }

/* The grid ships empty and is filled by JS, so it has no height until
   then. Reserving the space stops the rest of the page sliding up and
   back down as the cards arrive. :empty means the reservation
   disappears the moment there's anything to show. */
.rev-shell:empty { min-height: 300px; }

.rev-empty {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
  padding: var(--sp-8) var(--sp-6);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
}
.rev-empty p { margin-top: var(--sp-4); color: var(--ink-soft); font-size: .95rem; line-height: 1.75; }

/* ============================================================
   LEAD WIZARD  (hero card)
   ============================================================
   Four steps ending in a WhatsApp handoff.

   The ordering is the point: destination and purpose cost the
   visitor nothing to answer and come first; the phone number
   comes last, once they've invested four taps and can see a
   summary of what they're about to send.

   Everything below paints from the --bmt-* logo tokens rather than
   the dusk ramp the rest of the site uses: flat white, one navy,
   one red, no gradient anywhere, no frosted glass. That's the
   wordmark's own discipline, and this card is the one surface that
   follows it — a product sitting on the theme, not a band of it.
   The hard red top edge and the opaque white are what make it read
   as a deliberate object rather than a hole punched in the sky.
   ============================================================ */

/* ---------- the card ---------- */
/* .lead-card also dresses the contact page form, so every override
   here is keyed to .lead-wiz as well. Two classes (0,2,0) outranks
   the .lead-card base (0,1,0) without reaching for !important. */
.lead-card.lead-wiz {
  max-width: 440px;
  margin-inline: auto;
  padding: clamp(20px, 4.4vw, 28px);
  background: var(--bmt-white);
  /* No blur. The card is opaque now, so there is nothing behind it
     to frost — and a frosted edge is the single effect that would
     drag it back into the other palette. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(var(--rgb-bmt-navy), .1);
  border-top: 3px solid var(--bmt-red);
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(var(--rgb-bmt-navy), .1),
              0 8px 18px  rgba(var(--rgb-bmt-navy), .06);
}
/* The base card paints a 5px navy→red→mauve bar in this pseudo.
   border-top draws the flat red edge now, so the bar goes. */
.lead-card.lead-wiz::before { content: none; }

/* ---------- watermark ---------- */
/* The airplane trail that loops through the double "o" in the
   wordmark, redrawn as line art and bled off the bottom corner.
   Not a compass rose or a globe: this shape is already part of the
   logo, so it reads as the same object rather than as stock travel
   decoration. 6% navy — present, never legible. */
.lfw-mark {
  position: absolute;
  right: -26px;
  bottom: -22px;
  width: 208px;
  height: auto;
  color: rgba(var(--rgb-bmt-navy), .06);
  pointer-events: none;
  z-index: 0;
}
.lead-wiz > *:not(.lfw-mark) { position: relative; z-index: 1; }

/* ---------- stepper ---------- */
/* Four numbered nodes on one track. Real elements, not background
   dots on the rail like the old version: a completed step swaps its
   number for a check, and you cannot do that to a radial-gradient.
   The track insets by half a node so the line starts and ends
   under the first and last circles instead of past them. */
.lfw-steps { position: relative; margin-bottom: var(--sp-5); }
.lfw-steps__track {
  position: absolute;
  left: 14px; right: 14px; top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 3px;
  background: rgba(var(--rgb-bmt-navy), .12);
}
.lfw-steps__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  /* Solid. A gradient fill here would be the third gradient in a
     card that is supposed to have none. */
  background: var(--bmt-red);
  transition: width .55s var(--bmt-ease);
}
.lfw-steps__nodes {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lfw-node {
  position: relative;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bmt-white);
  border: 2px solid rgba(var(--rgb-bmt-navy), .25);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .77rem;
  color: var(--bmt-navy);
  transition: background     var(--bmt-dur-base) var(--bmt-ease),
              border-color   var(--bmt-dur-base) var(--bmt-ease),
              color          var(--bmt-dur-base) var(--bmt-ease),
              box-shadow     var(--bmt-dur-base) var(--bmt-ease);
}
.lfw-node.is-now {
  background: var(--bmt-navy);
  border-color: var(--bmt-navy);
  color: var(--bmt-on-navy);
  box-shadow: 0 4px 14px rgba(var(--rgb-bmt-navy), .3);
}
/* Done: white fill, red rim, red check. The number stays in the
   flow at opacity 0 so the circle never changes size. */
.lfw-node.is-done { border-color: var(--bmt-red); }
.lfw-node.is-done > span { opacity: 0; }
.lfw-node.is-done::after {
  content: "";
  position: absolute;
  left: 50%; top: 46%;
  width: 5px; height: 9px;
  border: 2px solid var(--bmt-red);
  border-top: 0; border-left: 0;
  transform: translate(-50%, -55%) rotate(45deg);
}

/* ---------- head ---------- */
.lfw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
/* The card is opaque white now rather than a veil over the sky, so
   the eyebrow can take the brand red directly: #D02222 on #FFFFFF
   is 5.3:1, which clears AA at this size. */
.lead-wiz .eyebrow { margin-bottom: 0; color: var(--bmt-red); }
.lead-wiz .eyebrow::before { background: var(--bmt-red); }
.lfw-count {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bmt-text-secondary);
}

/* ---------- step transition ---------- */
/* 15px and back, reversed on Back. One curve, one duration, same
   as everything else in the card. */
#lfBody {
  transition: opacity   var(--bmt-dur-base) var(--bmt-ease),
              transform var(--bmt-dur-base) var(--bmt-ease);
}
#lfBody.is-out-l { opacity: 0; transform: translateX(-15px); }
#lfBody.is-out-r { opacity: 0; transform: translateX(15px); }
#lfBody.is-in-l  { opacity: 0; transform: translateX(-15px); }
#lfBody.is-in-r  { opacity: 0; transform: translateX(15px); }

/* The tile grid measures the card, not the window. The card is a
   fixed 440px inside a hero column, so its width and the
   viewport's stopped agreeing a long time ago — the old
   @media (min-width: 560px) was reading a number that had nothing
   to do with these tiles. contain: layout comes with
   container-type but not clipping, so the dropdown still overflows
   normally. */
#lfBody { container-type: inline-size; }

.lfw-q {
  font-size: clamp(1.26rem, 2.4vw, 1.52rem);
  line-height: 1.25;
  letter-spacing: -.022em;
  color: var(--bmt-navy);
  margin-bottom: 7px;
}
.lfw-sub {
  font-size: .89rem;
  line-height: 1.6;
  color: var(--bmt-text-secondary);
  margin-bottom: var(--sp-5);
}

.lead-wiz .field { margin-bottom: var(--sp-5); }
.lfw-lbl {
  display: block;
  margin-bottom: 9px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--bmt-navy);
}

/* ---------- option cards ---------- */
.lfw-tiles { display: grid; gap: 10px; }
@container (min-width: 330px) {
  .lfw-tiles--2 { grid-template-columns: 1fr 1fr; }
}

.lfw-tile {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  min-height: 44px;
  /* Right padding clears the selected badge, so the label doesn't
     reflow when one appears. */
  padding: 13px 36px 13px 13px;
  text-align: left;
  background: var(--bmt-white);
  border: 1.5px solid rgba(var(--rgb-bmt-navy), .18);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color var(--bmt-dur-fast) var(--bmt-ease),
              box-shadow   var(--bmt-dur-fast) var(--bmt-ease),
              transform    var(--bmt-dur-fast) var(--bmt-ease);
}
.lfw-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--rgb-bmt-navy), .4);
}
.lfw-tile:focus-visible {
  outline: none;
  border-color: var(--bmt-navy);
  box-shadow: 0 0 0 3px rgba(var(--rgb-bmt-navy), .16);
}
.lfw-tile.sel {
  /* 2px in, 1.5px out — the half pixel comes off the padding so
     the text holds still. */
  border-width: 2px;
  border-color: var(--bmt-navy);
  padding: 12.5px 35.5px 12.5px 12.5px;
  box-shadow: 0 10px 22px rgba(var(--rgb-bmt-red), .18);
}
.lfw-tile.sel:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--rgb-bmt-navy), .16),
              0 10px 22px rgba(var(--rgb-bmt-red), .18);
}
/* The pick bounce animates `scale`, not `transform`, so it can't
   cancel the hover lift halfway through a click. */
.lfw-tile.is-pick,
.lfw-chip.is-pick { animation: lfw-pick var(--bmt-dur-fast) var(--bmt-ease); }
@keyframes lfw-pick { 50% { scale: 1.02; } }

.lfw-tile__ico { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; }
.lfw-tile__ico svg { width: 100%; height: 100%; overflow: visible; }
/* Duo-tone, on the wordmark's logic: navy carries the structure,
   red marks exactly one detail. */
.lfw-ic-n  { stroke: var(--bmt-navy); fill: none; }
.lfw-ic-nf { fill: var(--bmt-navy);   stroke: none; }
.lfw-ic-r  { stroke: var(--bmt-red);  fill: none; }
.lfw-ic-rf { fill: var(--bmt-red);    stroke: none; }

.lfw-tile__txt { flex: 1; min-width: 0; }
.lfw-tile__lbl {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .89rem;
  line-height: 1.4;
  color: var(--bmt-navy);
}
.lfw-tile__note {
  display: block;
  margin-top: 2px;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--bmt-text-secondary);
}

/* Selected badge, top-right: white check on a red circle.
   A circle rather than the wordmark's luggage tag — the tag needs
   its eyelet and its cut corner to read as a tag, and at the 20px
   this badge occupies, with a check already inside it, neither
   survives. The tag shape is worth using somewhere it can be 40px. */
.lfw-tile__tick {
  position: absolute;
  top: 11px; right: 11px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bmt-red);
  opacity: 0;
  scale: .4;
  transition: opacity var(--bmt-dur-fast) var(--bmt-ease),
              scale   var(--bmt-dur-fast) var(--bmt-ease);
}
.lfw-tile__tick::after {
  content: "";
  position: absolute;
  left: 50%; top: 47%;
  width: 4.5px; height: 8px;
  border: 2px solid var(--bmt-on-red);
  border-top: 0; border-left: 0;
  transform: translate(-50%, -55%) rotate(45deg);
}
.lfw-tile.sel .lfw-tile__tick { opacity: 1; scale: 1; }

/* ---------- chips ---------- */
/* Selected fills navy instead of taking the tile's navy-border +
   red-badge treatment: a 20px badge doesn't fit a 44px pill, and a
   red check on navy measures 3.0:1 — right on the icon floor,
   which is not where the only mark saying what you picked belongs. */
.lfw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lfw-chip {
  min-height: 44px;
  padding: 11px 18px;
  background: var(--bmt-white);
  border: 1.5px solid rgba(var(--rgb-bmt-navy), .18);
  border-radius: var(--r-full);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .87rem;
  color: var(--bmt-navy);
  cursor: pointer;
  transition: border-color var(--bmt-dur-fast) var(--bmt-ease),
              background   var(--bmt-dur-fast) var(--bmt-ease),
              color        var(--bmt-dur-fast) var(--bmt-ease),
              box-shadow   var(--bmt-dur-fast) var(--bmt-ease),
              transform    var(--bmt-dur-fast) var(--bmt-ease);
}
.lfw-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--rgb-bmt-navy), .4);
}
.lfw-chip:focus-visible {
  outline: none;
  border-color: var(--bmt-navy);
  box-shadow: 0 0 0 3px rgba(var(--rgb-bmt-navy), .16);
}
.lfw-chip.sel {
  background: var(--bmt-navy);
  border-color: var(--bmt-navy);
  color: var(--bmt-on-navy);
  box-shadow: 0 10px 22px rgba(var(--rgb-bmt-red), .18);
}

/* ---------- destination dropdown ---------- */
/* A listbox, not a <select>: the rows carry a flag beside the name
   and the panel has to match the card, neither of which a native
   <option> can be styled into. */
.lfw-dd { position: relative; }
.lfw-dd__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 13px 14px;
  text-align: left;
  background: var(--bmt-white);
  border: 1.5px solid rgba(var(--rgb-bmt-navy), .18);
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--bmt-navy);
  cursor: pointer;
  transition: border-color var(--bmt-dur-fast) var(--bmt-ease),
              box-shadow   var(--bmt-dur-fast) var(--bmt-ease);
}
.lfw-dd__btn:hover { border-color: rgba(var(--rgb-bmt-navy), .4); }
.lfw-dd__btn:focus-visible,
.lfw-dd.is-open .lfw-dd__btn {
  outline: none;
  border-color: var(--bmt-navy);
  box-shadow: 0 0 0 3px rgba(var(--rgb-bmt-navy), .08);
}
/* The logo's own pin — the dot over the "i" in trip — rather than a
   generic map marker. */
.lfw-dd__pin { width: 17px; height: 18px; flex-shrink: 0; }
.lfw-dd__pin svg { width: 100%; height: 100%; }
.lfw-dd__val {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lfw-dd__val.is-ph { color: var(--bmt-text-secondary); }
.lfw-dd__caret {
  flex-shrink: 0;
  width: 9px; height: 9px;
  border-right: 2px solid var(--bmt-text-secondary);
  border-bottom: 2px solid var(--bmt-text-secondary);
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--bmt-dur-base) var(--bmt-ease);
}
.lfw-dd.is-open .lfw-dd__caret { transform: translateY(2px) rotate(225deg); }

.lfw-dd__panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0; right: 0;
  max-height: 262px;
  overflow-y: auto;
  padding: 6px;
  background: var(--bmt-white);
  border: 1px solid rgba(var(--rgb-bmt-navy), .12);
  border-radius: 14px;
  /* Lifted by shadow, not by frost. A glassy blur is exactly the
     effect that would put this card back in the other palette. */
  box-shadow: 0 14px 30px rgba(var(--rgb-bmt-navy), .16);
}
.lfw-dd__panel[hidden] { display: none; }
.lfw-dd__group {
  padding: 10px 10px 5px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bmt-text-secondary);
}
.lfw-dd__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px;
  border-radius: 10px;
  font-size: .92rem;
  color: var(--bmt-navy);
  cursor: pointer;
}
.lfw-dd__opt:hover,
.lfw-dd__opt.is-cursor { background: var(--bmt-navy-wash); }
.lfw-dd__opt[aria-selected="true"] { font-weight: 700; }
.lfw-dd__opt[aria-selected="true"]::after {
  content: "";
  margin-left: auto;
  flex-shrink: 0;
  width: 4.5px; height: 8px;
  border: 2px solid var(--bmt-red);
  border-top: 0; border-left: 0;
  transform: rotate(45deg);
}
.lfw-dd__flag { font-size: 1.05rem; line-height: 1; }

/* ---------- floating-label fields ---------- */
/* :placeholder-shown carries the filled state, so the float needs
   no JS and survives autofill and back-button restore. Every
   .ff__in ships a placeholder, hidden until focus so the example
   only appears once the label is out of its way. */
.ff { position: relative; margin-bottom: var(--sp-4); }
.ff__in {
  width: 100%;
  padding: 23px 15px 9px;
  background: var(--bmt-white);
  border: 1.5px solid rgba(var(--rgb-bmt-navy), .18);
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--bmt-navy);
  transition: border-color 200ms var(--bmt-ease),
              box-shadow   200ms var(--bmt-ease);
}
textarea.ff__in { min-height: 84px; line-height: 1.55; resize: vertical; }
.ff__in:hover { border-color: rgba(var(--rgb-bmt-navy), .4); }
.ff__in:focus {
  outline: none;
  border-color: var(--bmt-navy);
  box-shadow: 0 0 0 3px rgba(var(--rgb-bmt-navy), .08);
}
.ff__in::placeholder { color: transparent; }
.ff__in:focus::placeholder { color: var(--bmt-text-secondary); }

.ff__lb {
  position: absolute;
  left: 15px; top: 16px;
  transform-origin: left top;
  font-size: .94rem;
  font-weight: 500;
  color: var(--bmt-text-secondary);
  pointer-events: none;
  transition: transform   200ms var(--bmt-ease),
              font-size   200ms var(--bmt-ease),
              font-weight 200ms var(--bmt-ease),
              color       200ms var(--bmt-ease);
}
.ff__in:focus ~ .ff__lb,
.ff__in:not(:placeholder-shown) ~ .ff__lb {
  transform: translateY(-9px);
  font-size: 11px;
  font-weight: 600;
  color: var(--bmt-navy);
}
.ff__hint {
  display: block;
  margin-top: 6px;
  font-size: .76rem;
  font-weight: 500;
  color: var(--bmt-text-secondary);
}

/* ---------- summary on the final step ---------- */
.lfw-summary {
  margin-top: var(--sp-5);
  padding: 14px 15px;
  background: var(--bmt-navy-wash);
  border: 1px solid rgba(var(--rgb-bmt-navy), .1);
  border-radius: 14px;
}
.lfw-summary__hd {
  display: block;
  margin-bottom: 9px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bmt-text-secondary);
}
.lfw-summary__rows { display: flex; flex-direction: column; gap: 7px; }
.lfw-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: .84rem;
}
.lfw-summary__row > span { flex-shrink: 0; color: var(--bmt-text-secondary); }
.lfw-summary__row > strong {
  font-weight: 700;
  line-height: 1.4;
  text-align: right;
  color: var(--bmt-navy);
}
.lfw-summary__edit {
  margin-top: 11px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: .81rem;
  font-weight: 700;
  color: var(--bmt-red);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.lfw-summary__edit:hover { color: var(--bmt-red-hover); }
.lfw-summary__edit:focus-visible {
  outline: 2px solid var(--bmt-navy);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- navigation ---------- */
.lfw-nav { display: flex; gap: 10px; margin-top: var(--sp-5); }
.lfw-back { flex: 0 0 auto; }
.lfw-next { flex: 1 1 auto; }
@media (max-width: 460px) {
  .lfw-nav { flex-direction: column-reverse; }
  .lfw-back, .lfw-next { width: 100%; }
}

/* polish.css gives every .btn a gradient veil in ::before and a
   rotating conic shine in ::after, plus an idle glow on .btn-lg.
   All three are gradients and this card has none, so all three come
   off. Three classes (0,3,0) to outrank .btn-primary.btn-lg. */
.lead-wiz .lfw-nav .btn::before,
.lead-wiz .lfw-nav .btn::after { content: none; }
.lead-wiz .lfw-nav .btn { animation: none; }

/* Continue is navy. Red on this card means "decide", and pressing
   Continue three times is not a decision — it's progress. */
.lead-wiz .lfw-next {
  background: var(--bmt-navy);
  color: var(--bmt-on-navy);
  box-shadow: 0 10px 24px rgba(var(--rgb-bmt-navy), .22);
  transition: background var(--bmt-dur-fast) var(--bmt-ease),
              transform  var(--bmt-dur-fast) var(--bmt-ease),
              box-shadow var(--bmt-dur-fast) var(--bmt-ease);
}
.lead-wiz .lfw-next:hover {
  background: var(--bmt-navy-hover);
  transform: translateY(-2px);
}
.lead-wiz .lfw-next:active {
  background: var(--bmt-navy-pressed);
  transform: scale(.98);
}
.lead-wiz .lfw-next:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--rgb-bmt-navy), .32),
              0 10px 24px rgba(var(--rgb-bmt-navy), .22);
}
/* The last step is the one place red fills a large surface, because
   it's the one place the button stops meaning "next" and starts
   meaning "send this to a person". */
.lead-wiz .lfw-next.is-final {
  background: var(--bmt-red);
  box-shadow: 0 10px 24px rgba(var(--rgb-bmt-red), .28);
}
.lead-wiz .lfw-next.is-final:hover   { background: var(--bmt-red-hover); }
.lead-wiz .lfw-next.is-final:active  { background: var(--bmt-red-pressed); }
.lead-wiz .lfw-next.is-final:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--rgb-bmt-red), .38),
              0 10px 24px rgba(var(--rgb-bmt-red), .28);
}
.lead-wiz .lfw-next[disabled] {
  background: rgba(var(--rgb-bmt-navy), .22);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.lead-wiz .lfw-back {
  background: var(--bmt-white);
  border: 1.5px solid rgba(var(--rgb-bmt-navy), .18);
  color: var(--bmt-navy);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  transition: border-color var(--bmt-dur-fast) var(--bmt-ease),
              transform    var(--bmt-dur-fast) var(--bmt-ease);
}
.lead-wiz .lfw-back:hover {
  border-color: var(--bmt-navy);
  transform: translateY(-2px);
}
.lead-wiz .lfw-back:active { transform: scale(.98); }
.lead-wiz .lfw-back:focus-visible {
  outline: none;
  border-color: var(--bmt-navy);
  box-shadow: 0 0 0 3px rgba(var(--rgb-bmt-navy), .16);
}

/* ---------- trust badges ---------- */
/* Navy tint, navy type, navy icons. Red is reserved for the action,
   so nothing reassuring on this card is allowed to compete with the
   button for it.

   The copy is only what the site already says elsewhere and can
   stand behind — no response-time promise, because the contact page
   says a consultant replies within a couple of hours during working
   hours, and a badge claiming two minutes would contradict it. */
.lfw-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin-top: var(--sp-4);
}
.lfw-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--bmt-navy-tint);
  color: var(--bmt-navy);
  font-size: .74rem;
  font-weight: 700;
}
.lfw-badge svg {
  flex-shrink: 0;
  width: 13px; height: 13px;
  stroke: var(--bmt-navy);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lead-wiz .lfw-fine { margin-top: var(--sp-3); color: var(--bmt-text-secondary); }
.lead-wiz .lfw-fine a { color: var(--bmt-navy); font-weight: 600; }

/* ---------- validation ---------- */
.lfw-err {
  margin-top: 11px;
  padding: 10px 13px;
  border: 1px solid rgba(var(--rgb-bmt-red), .3);
  border-left: 3px solid var(--bmt-red);
  border-radius: 10px;
  background: var(--bmt-red-tint);
  /* Navy type, not red. Red is for short labels; this is a
     sentence, and the red bar plus the red tint already say
     "error" before the words do. 13:1 on the tint. */
  color: var(--bmt-navy);
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.5;
}
.lfw-err.shake { animation: lfw-shake .38s var(--bmt-ease); }
@keyframes lfw-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* ---------- success ---------- */
.lfw-done { padding: var(--sp-5) 0 var(--sp-2); text-align: center; }
.lfw-done__ico {
  display: inline-grid;
  place-items: center;
  width: 58px; height: 58px;
  margin-bottom: var(--sp-4);
  border-radius: 50%;
  /* Red, not the site's green. This is the one moment the loud
     colour gets to celebrate instead of instruct. */
  background: var(--bmt-red);
  color: var(--bmt-on-red);
  animation: lfw-pop .45s var(--bmt-ease) both,
             lfw-ring var(--bmt-dur-slow) var(--bmt-ease) .45s infinite;
}
.lfw-done__ico svg { width: 27px; height: 27px; }
@keyframes lfw-pop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
@keyframes lfw-ring {
  from { box-shadow: 0 0 0 0    rgba(var(--rgb-bmt-red), .5); }
  to   { box-shadow: 0 0 0 20px rgba(var(--rgb-bmt-red), 0); }
}
.lfw-done h3 { font-size: 1.32rem; color: var(--bmt-navy); margin-bottom: 9px; }
.lfw-done p {
  max-width: 42ch;
  margin-inline: auto;
  font-size: .89rem;
  line-height: 1.65;
  color: var(--bmt-text-secondary);
}
.lfw-done__alt {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(var(--rgb-bmt-navy), .1);
  font-size: .83rem;
}
.lfw-done__alt a {
  font-weight: 700;
  color: var(--bmt-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- reduced motion ---------- */
/* The step slide is the one piece that must not simply run faster:
   a 0s translate still flashes sideways, so it drops to opacity
   only. The success ring has to stop outright — a 1s loop that
   stays on screen indefinitely is the exact thing this query is
   for. Colour changes are all left alone. */
@media (prefers-reduced-motion: reduce) {
  #lfBody { transition: opacity var(--bmt-dur-base) var(--bmt-ease); }
  #lfBody.is-out-l, #lfBody.is-out-r,
  #lfBody.is-in-l,  #lfBody.is-in-r { transform: none; }

  .lfw-tile.is-pick, .lfw-chip.is-pick { animation: none; }
  .lfw-tile:hover, .lfw-chip:hover,
  .lead-wiz .lfw-next:hover, .lead-wiz .lfw-back:hover { transform: none; }
  .lead-wiz .lfw-next:active, .lead-wiz .lfw-back:active { transform: none; }

  .lfw-err.shake { animation: none; }
  .lfw-done__ico { animation: none; }
  .lfw-steps__fill { transition: none; }
  .lfw-dd.is-open .lfw-dd__caret { transition: none; }
}

/* ============================================================
   HERO ATMOSPHERE  (index.html only)
   ============================================================
   Six decorative layers behind the hero copy and the lead card.
   Nothing here is interactive, nothing here is load-bearing:
   delete the .hbg div from index.html and the section renders
   exactly as it did before.

   Adapted from the reference demo rather than copied from it.
   The demo paints #0A1128 down to near-black and sets its own
   copy to #fff. This hero's copy is dark - the h1 is #0E1D30,
   the lead #44506A, the ghost button #17293D. Measured, the
   demo's mesh puts the headline at 1.12:1, and no vignette
   opacity recovers that: the demo's vignette is a dark veil, so
   every step of it closes the gap instead of opening it.

   So the mesh runs through the light end of the same ramp.
   Same six layers, same geometry, same timings, same brand
   hues - what flipped is the sign of the contrast, not the
   design. Every existing element keeps its exact colour.
   ============================================================ */

/* .hero > * in components.css sets position:relative;z-index:1
   on every child, which would catch this layer too. Two classes
   (0,2,0) to outrank it. */
.hero > .hbg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hbg > * { position: absolute; pointer-events: none; }

/* The copy and the lead card lift clear of the whole stack.
   Additive - components.css already put them above the layers
   at z-index 1; this only widens the gap so a later layer can
   never land on top of the form. */
.hero > .wrap { position: relative; z-index: 10; }

/* ---------- 1. mesh ---------- */
/* Drifts by transform, not background-position. .hero::after
   next door already carries the note that animating
   background-position on a full-width element repaints every
   frame for the life of the page; that call is made in this
   codebase and this layer is not the place to reverse it.
   Oversized by 20% a side so the drift never exposes an edge,
   and clipped by .hero's existing overflow:hidden. */
.hbg__mesh {
  inset: -20%;
  z-index: 0;
  background:
    radial-gradient(46% 52% at 18% 20%,  rgba(var(--rgb-mauve), .34), transparent 62%),
    radial-gradient(44% 50% at 84% 74%,  rgba(var(--rgb-blue),  .36), transparent 58%),
    radial-gradient(50% 46% at 52% 100%, rgba(225, 203, 215, .30), transparent 64%);
  animation: hbg-drift 24s var(--ease-io) infinite alternate;
  will-change: transform;
}
@keyframes hbg-drift {
  from { transform: translate3d(-1.5%, -1%,   0) scale(1);   }
  to   { transform: translate3d( 2.5%,  1.5%, 0) scale(1.1); }
}

/* ---------- 2. blobs ---------- */
/* No mix-blend-mode. The demo screens its blobs, which works
   over near-black and erases them over near-white - screen
   against a light backdrop returns the backdrop. Plain alpha
   instead, which is what a light scheme wants anyway. */
.hbg__blob {
  z-index: 1;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
}
.hbg__blob--1 {
  width: 420px; height: 420px;
  top: -130px; left: -110px;
  background: radial-gradient(circle, rgba(var(--rgb-mauve), .55), transparent 70%);
  opacity: .5;
  animation: hbg-float-1 18s var(--ease-io) infinite;
}
.hbg__blob--2 {
  width: 520px; height: 520px;
  right: -150px; bottom: -190px;
  background: radial-gradient(circle, rgba(var(--rgb-blue), .6), transparent 70%);
  opacity: .5;
  animation: hbg-float-2 24s var(--ease-io) infinite;
}
.hbg__blob--3 {
  width: 300px; height: 300px;
  top: 38%; left: 58%;
  background: radial-gradient(circle, rgba(225, 203, 215, .7), transparent 70%);
  opacity: .3;
  animation: hbg-float-3 16s var(--ease-io) infinite;
}
@keyframes hbg-float-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50%      { transform: translate3d(40px, 60px, 0) scale(1.15) rotate(20deg); }
}
@keyframes hbg-float-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50%      { transform: translate3d(-50px, -40px, 0) scale(1.1) rotate(-15deg); }
}
@keyframes hbg-float-3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-30px, 40px, 0) scale(1.2); }
}

/* ---------- 3. dot field ---------- */
/* Slate, not the demo's white - white dots on a light mesh are
   the mesh. 44px so it does not beat against the 62px graticule
   .hero::after already draws over the top of this. */
.hbg__dots {
  inset: 0;
  z-index: 2;
  background-image: radial-gradient(rgba(var(--rgb-slate), .5) 1px, transparent 1.5px);
  background-size: 44px 44px;
  opacity: .14;
  animation: hbg-dots 6s var(--ease-io) infinite;
}
@keyframes hbg-dots {
  0%, 100% { opacity: .1;  }
  50%      { opacity: .17; }
}

/* ---------- 4. flight path ---------- */
/* The plane rides the line via SMIL animateMotion + mpath
   rather than the demo's CSS offset-path. offset-path resolves
   in the element's own pixel box, while the line is drawn in a
   viewBox stretched to fit - so the two agree only when the
   hero happens to be exactly the viewBox's size, and drift
   apart everywhere else. Inside the SVG both share one
   coordinate space and the plane sits on the line at any width.

   It is also why this replaces polish.js's .atmos inside the
   hero instead of stacking on it - see the guard in
   initAtmos(). Two dashed-arc systems in one section is four
   arcs and three planes, which is not more atmosphere. */
.hbg__flight { inset: 0; z-index: 3; }
.hbg__flight svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hbg__path {
  fill: none;
  stroke: rgba(var(--rgb-slate), .38);
  stroke-width: 1.6;
  stroke-dasharray: 6 9;
  stroke-linecap: round;
  animation: hbg-dash 6s linear infinite;
}
@keyframes hbg-dash { to { stroke-dashoffset: -150; } }
/* Mauve, not the site's red .atmos marker. Red is the CTA
   colour in this hero, and a red dot tracking across behind the
   buttons competes with them for the same glance. */
.hbg__plane { fill: var(--mauve-700); opacity: .55; }
.hbg__plane path { animation: hbg-fly-fade 13s linear infinite; }
@keyframes hbg-fly-fade {
  0%      { opacity: 0; }
  6%, 92% { opacity: 1; }
  100%    { opacity: 0; }
}

/* ---------- 5. vignette ---------- */
/* Inverted. The demo darkens toward the edges so white copy
   stays clear of the bright middle; this hero's copy is dark,
   so the same job is done by holding a near-white lens over the
   copy column no matter where the mesh and the blobs drift
   under it. The second stop is the demo's own edge-darkening,
   kept at a whisper for the depth it gives, and well away from
   any text. This is the knob to turn if contrast ever needs
   more headroom - it is why the layer exists.

   Turned once already. At .74/.34 the mesh cost the worst text
   element 1.14 of its contrast ratio; at .86/.46, 0.74. The
   number that decided it was the red accent-script, which needs
   3:1 and had only 0.35 to spare - now 0.48. */
.hbg__vignette {
  inset: 0;
  z-index: 4;
  background:
    radial-gradient(82% 92% at 26% 52%,
      rgba(255,255,255,.86), rgba(255,255,255,.46) 50%, transparent 80%),
    radial-gradient(120% 100% at 50% 16%,
      transparent 52%, rgba(var(--rgb-slate), .08) 100%);
}

/* ---------- 6. grain ---------- */
/* Not added, on purpose. polish.css already paints one fixed,
   tiled SVG noise layer over the whole page at 3.5%
   (body::after) - that is this layer, at this opacity, already
   covering this hero. A second one stacks to about 6.5% and
   reads as haze rather than as film. If the hero should be
   grainier than the rest of the site, that is one number to
   change in one place, not a seventh layer to add here. */

/* ---------- responsive ---------- */
/* At <=1000px .hero__grid stacks and the copy moves to the top,
   so the contrast lens follows it. */
@media (max-width: 1000px) {
  .hbg__vignette {
    background:
      radial-gradient(100% 66% at 50% 26%,
        rgba(255,255,255,.88), rgba(255,255,255,.48) 54%, transparent 84%),
      radial-gradient(120% 100% at 50% 16%,
        transparent 54%, rgba(var(--rgb-slate), .07) 100%);
  }
  .hbg__blob--1 { width: 320px; height: 320px; }
  .hbg__blob--2 { width: 380px; height: 380px; }
}
@media (max-width: 640px) {
  /* A 60px blur across three layers is the expensive part of
     this whole effect, and a phone is where that gets felt. */
  .hbg__blob    { filter: blur(42px); }
  .hbg__blob--3 { display: none; }
  .hbg__dots    { background-size: 34px 34px; opacity: .1; }
  /* The viewBox is 2.5:1 and a phone hero is nearer 0.6:1;
     preserveAspectRatio="none" stretches the glyph by that
     difference. A dashed line is abstract enough to survive it.
     A plane is not. */
  .hbg__plane   { display: none; }
}

/* ---------- reduced motion ---------- */
/* The mesh, the blobs and the dots keep their painted state and
   simply stop - they are still the background, they just hold
   still. The flight layer goes entirely: a dashed line with a
   plane parked on it reads as a broken animation rather than as
   a still image. */
@media (prefers-reduced-motion: reduce) {
  .hbg__mesh,
  .hbg__blob,
  .hbg__dots,
  .hbg__path,
  .hbg__plane path { animation: none; }
  .hbg__flight { display: none; }
}

/* ============================================================
   REACH INSTRUMENT  (index.html only)
   ============================================================
   Replaces the three scrolling chip marquees. Those showed 24
   country names and nothing else - the same list countries.html
   already carries, moving, which made it decoration that cost a
   full section of page height.

   This shows the same 24, but each one answers the question the
   marquee raised and dropped: how far, which visa, how long.

   Adapted from the reach-instrument prototype. Two changes of
   substance, both because the prototype was written standalone:

   1. Origin is Karachi, not Lahore. The office is in
      Gulistan-e-Johar - config.js is the source of truth and
      this section reads from it rather than hardcoding a city.
   2. Type uses the site's own stack. The prototype loads Outfit
      and JetBrains Mono; this site is Plus Jakarta Sans / Inter
      / Caveat and is not adding two more families for one
      section. Display goes to --font-display, and the mono
      readout runs on the system mono stack, which is what
      ui-monospace resolves to on every target platform anyway.

   The panel is dark on purpose. It is the only dark band between
   the hero and the country grid, and the globe needs a night
   sky to read as one - a lit sphere on a pale section is a
   diagram, not an instrument.
   ============================================================ */

.reach { position: relative; }

.reach__head { max-width: 640px; }

/* ---------- the panel ---------- */
.reach__stage {
  margin-top: clamp(30px, 4vw, 50px);
  position: relative;
  border-radius: var(--r-xl, 26px);
  background:
    radial-gradient(90% 120% at 22% 8%,  rgba(var(--rgb-mauve), .16) 0%, transparent 55%),
    radial-gradient(70% 90%  at 88% 92%, rgba(var(--rgb-blue),  .14) 0%, transparent 60%),
    linear-gradient(158deg, #16244F 0%, #0D182C 52%, #0B1524 100%);
  border: 1px solid rgba(var(--rgb-mauve), .22);
  box-shadow:
    0 1px 0 rgba(225, 203, 215, .10) inset,
    0 40px 90px -40px rgba(14, 29, 48, .55),
    0 8px 24px -12px rgba(11, 21, 36, .40);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
}
/* Grain so the gradient never bands across a panel this large.
   Local to the stage - body::after's page-wide noise sits under
   the light sections and does not reach inside this one. */
.reach__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.045'/></svg>");
}

/* ---------- left: globe ---------- */
.reach__globe {
  position: relative;
  padding: clamp(18px, 2.4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
}
.reach__globe-box {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 1 / 1;
}
#reachGlobe {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}
#reachGlobe.is-drag { cursor: grabbing; }

.reach__origin {
  position: absolute;
  left: clamp(18px, 2.4vw, 32px);
  bottom: clamp(18px, 2.4vw, 32px);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(225, 203, 215, .62);
  display: flex;
  align-items: center;
  gap: 9px;
  pointer-events: none;
}
.reach__origin i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red-500);
  box-shadow: 0 0 0 4px rgba(var(--rgb-red), .18);
}

/* ---------- right: readout ---------- */
.reach__data {
  padding: clamp(22px, 2.6vw, 34px) clamp(22px, 2.6vw, 36px) clamp(24px, 2.8vw, 36px);
  border-left: 1px solid rgba(225, 203, 215, .10);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vw, 26px);
  min-width: 0;
}

.reach__top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(225, 203, 215, .13);
}
.reach__code {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--navy-900);
  background: var(--mauve-100);
  padding: 7px 9px;
  border-radius: 7px;
  line-height: 1;
  flex: none;
  margin-top: 5px;
}
.reach__name { min-width: 0; }
.reach__name h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.1;
  color: #F3F6FB;
}
.reach__region {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy-400);
  opacity: .78;
  margin-top: 7px;
  display: block;
}

.reach__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(225, 203, 215, .10);
  border: 1px solid rgba(225, 203, 215, .10);
  border-radius: 12px;
  overflow: hidden;
  margin: 16px 0 0;
}
.reach__metric {
  background: rgba(11, 21, 36, .42);
  padding: 13px 14px 14px;
  min-width: 0;
}
.reach__metric dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  /* .82 landed on exactly 4.50 — passing, but with no margin at 9.5px.
     Matched to its siblings in this panel. */
  color: rgba(var(--rgb-blue), .88);
  margin: 0 0 7px;
}
.reach__metric dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--mauve-100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reach__metric dd .u {
  font-size: 10.5px;
  /* .55 gave 3.97 against the lighter end of the panel gradient; 10.5px
     needs 4.5. Same colour, less veil. */
  color: rgba(225, 203, 215, .72);
  margin-left: 3px;
  letter-spacing: .06em;
}

.reach__note {
  margin: 14px 0 0;
  font-size: .9rem;
  line-height: 1.6;
  color: rgba(225, 203, 215, .72);
}

/* ---------- chips ---------- */
.reach__picker {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.reach__group {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  /* 9.5px mono against #16244F: .65 measured 3.42, .88 clears at 5.05. */
  color: rgba(var(--rgb-blue), .88);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.reach__group::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(225, 203, 215, .09);
}
.reach__chips { display: flex; flex-wrap: wrap; gap: 7px; }

.reach__chip {
  appearance: none;
  font-family: var(--font-body);
  font-size: .84rem;
  font-weight: 400;
  color: rgba(225, 203, 215, .88);
  background: rgba(var(--rgb-slate), .34);
  border: 1px solid rgba(225, 203, 215, .11);
  border-radius: var(--r-full);
  padding: 7px 13px 7px 9px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  line-height: 1;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease,
              color var(--t-fast) ease, transform var(--t-med) var(--ease-out);
}
.reach__chip .cc {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(var(--rgb-blue), .88);
  background: rgba(11, 21, 36, .42);
  border-radius: 5px;
  padding: 4px 5px;
  transition: inherit;
}
/* Mauve, not red - same reasoning the old .dest-chip carried.
   A grid of chips lighting up red as the cursor crosses them
   reads as a row of alarms, and red is the CTA colour. */
.reach__chip:hover,
.reach__chip:focus-visible {
  background: rgba(var(--rgb-mauve), .19);
  border-color: rgba(var(--rgb-mauve), .46);
  color: #fff;
  transform: translateY(-2px);
  outline: none;
}
.reach__chip:focus-visible {
  box-shadow: 0 0 0 2px rgba(var(--rgb-mauve), .85),
              0 0 0 5px rgba(var(--rgb-mauve), .22);
}
.reach__chip:hover .cc,
.reach__chip:focus-visible .cc {
  color: var(--navy-900);
  background: var(--mauve-500);
}
.reach__chip[aria-current="true"] {
  background: rgba(var(--rgb-mauve), .24);
  border-color: rgba(var(--rgb-mauve), .60);
  color: #fff;
}
.reach__chip[aria-current="true"] .cc {
  color: var(--navy-900);
  background: var(--mauve-500);
}

/* ---------- foot ---------- */
.reach__foot {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(225, 203, 215, .10);
  padding: 15px clamp(22px, 2.6vw, 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(var(--rgb-blue), .88);
  background: rgba(11, 21, 36, .32);
}
.reach__foot a {
  color: var(--mauve-100);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--rgb-mauve), .45);
  padding-bottom: 2px;
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.reach__foot a:hover { color: #fff; border-color: var(--mauve-500); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .reach__stage { grid-template-columns: 1fr; }
  .reach__globe { min-height: 0; padding-bottom: 0; }
  .reach__globe-box { max-width: 380px; }
  .reach__data {
    border-left: none;
    border-top: 1px solid rgba(225, 203, 215, .10);
  }
  .reach__origin {
    position: static;
    margin-top: -6px;
    justify-content: center;
  }
}
@media (max-width: 560px) {
  .reach__globe-box { max-width: 290px; }
  .reach__chips { gap: 6px; }
  .reach__chip { font-size: .78rem; padding: 6px 11px 6px 8px; }
  .reach__metrics { grid-template-columns: 1fr; }
}

/* ---------- reduced motion ---------- */
/* The canvas handles its own reduction in JS - it stops the
   spin, the ambient cycling and the code scramble, and snaps
   arcs in rather than drawing them. This only covers the chips. */
@media (prefers-reduced-motion: reduce) {
  .reach__chip { transition-duration: .01ms; }
  .reach__chip:hover,
  .reach__chip:focus-visible { transform: none; }
}