/* ============================================================
   BOOK MY TRIP — COMPONENTS
   Header · Footer · Chat widget · Hero · Accordion · Toast
   ============================================================ */

/* ---------- HEADER ---------- */
/* Tinted glass, not white glass. A pure white bar at 82% was the
   single largest white shape on the page and it capped every
   screen with a band that had nothing to do with the sky behind
   it. Dropping the opacity and warming the underside lets the
   gradient read straight through the header. */
.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 900;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(231,237,246,.58) 100%);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease),
              background var(--t-mid) var(--ease),
              height var(--t-mid) var(--ease);
}
.hdr.stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--sh-sm);
  height: 66px;
}
.hdr__in {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}
/* logo.png is a 1080×1350 portrait export whose artwork covers only
   the middle 63.3% × 17.7% — the rest is padding baked into the file.
   Sizing the <img> by height therefore sizes the padding, not the mark:
   at height:56px the wordmark rendered under 10px tall. So the anchor
   becomes a window the size we want the mark to be, and the image is
   scaled up behind it and clipped. --mark-h is the only number worth
   touching; if the PNG is ever re-exported tight, set --ink-h to 1 and
   --ink-ratio to the new aspect. */
.logo-mark {
  --ink-h: .177;        /* fraction of the file's height the artwork covers */
  --ink-cy: .4915;      /* the artwork's centre line, as a fraction of the file's height */
  --ink-ratio: 2.868;   /* the artwork's own width ÷ height */
  position: relative;
  display: block;
  flex-shrink: 0;
  box-sizing: content-box;   /* --mark-h describes the window, not the window plus chrome */
  width: calc(var(--mark-h) * var(--ink-ratio));
  height: var(--mark-h);
  overflow: hidden;
}
/* Scale the file so its artwork band is exactly --mark-h tall, then
   offset it so that band's centre line lands on the window's centre.
   Solving `markH/2 = top + inkCy × imgH` for top, with imgH being
   markH/inkH, gives the calc below — which is independent of --mark-h,
   so the same rule centres the header and the footer. */
.logo-mark img {
  position: absolute;
  top: calc(var(--mark-h) * (0.5 - var(--ink-cy) / var(--ink-h)));
  left: 50%;
  transform: translateX(-50%);
  height: calc(var(--mark-h) / var(--ink-h));
  width: auto;
  max-width: none;      /* beats the `img { max-width: 100% }` reset in base.css */
}

/* 40px of wordmark in the 76px bar, 32px in the 66px stuck bar. The
   custom property itself doesn't animate, but width/height compute to
   concrete lengths, so the shrink on scroll still transitions. */
.hdr__logo {
  --mark-h: 40px;
  transition: width var(--t-mid) var(--ease), height var(--t-mid) var(--ease);
}
.hdr__logo img { transition: height var(--t-mid) var(--ease); }
.hdr.stuck .hdr__logo { --mark-h: 32px; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  position: relative;
  /* 11px, not 14px. Eight items at 14px needed 786px of the 724px the
     header can spare, so the CTA cluster was being pushed past the right
     edge at every desktop width. 11px brings the row to 715px and it fits. */
  padding: 9px 11px;
  border-radius: var(--r-sm);
  font-size: .93rem;
  font-weight: 600;
  color: var(--navy-800);
  white-space: nowrap;
  transition: color var(--t-fast) ease, background var(--t-fast) ease;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 11px; right: 11px; bottom: 4px;
  height: 2px;
  background: var(--red-500);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
/* Navy, not red. The header is glass over the sky, so a nav link
   sits on a backdrop that ranges from #fff to the mauve end of the
   ramp — where red measured 3.65:1. The underline beneath it is
   still the brand red, so the active item is marked by the accent
   without the accent having to carry the text. */
.nav a:hover { color: var(--navy-900); }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }
.nav a.active { color: var(--navy-900); }

/* dropdown */
/* The parent is a flex item alongside the plain links, so it has to
   behave like one: same box, same height. Without this the anchor
   inside sizes to its own content while its siblings stretch, and
   the two-word items sit a few pixels high of the rest. */
.nav__item { position: relative; display: flex; align-items: stretch; }
.nav__item > a { display: flex; align-items: center; }
.nav__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  padding: var(--sp-3);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility var(--t-mid);
}
.nav__item:hover .nav__panel,
.nav__item:focus-within .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__panel a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: .9rem;
}
.nav__panel a::after { display: none; }
.nav__panel a:hover { background: var(--mauve-50); color: var(--navy-900); }
/* The underline is suppressed inside the panel, so an active child needs
   its own marker or "you are here" is carried by colour alone. */
.nav__panel a.active { background: var(--mauve-50); color: var(--navy-900); font-weight: 700; }

.hdr__cta { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }

.burger {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  place-items: center;
  border: 1.5px solid var(--line);
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.burger span {
  display: block;
  width: 19px; height: 2px;
  background: var(--navy-800);
  border-radius: 2px;
  transition: transform var(--t-mid) var(--ease), opacity var(--t-fast) ease;
}
.burger span + span { margin-top: 4.5px; }
.burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* 1259px, not 1080px. The row needs a constant 1183.3px: logo (115) +
   nav (715) + CTA cluster (306) + two 24px gaps. The content box is the
   viewport less 48px padding and capped at --maxw (1240px), so it tops out
   at 1192px — only 8.7px of slack, and none at all below 1240px. The old
   1080px breakpoint rendered the full nav 165px too wide and shoved the
   WhatsApp button clean off the right edge. The boundary is 1259 rather
   than 1240 because Chrome matches media queries against innerWidth while
   the content box comes off clientWidth, which is a scrollbar narrower. */
@media (max-width: 1259px) {
  .nav { display: none; }
  .burger { display: grid; }
  .hdr__cta .btn-desktop-only { display: none; }
}

/* mobile drawer — one of the few things that stays fully opaque.
   It covers the page rather than sitting on it, and a translucent
   drawer over live content is a legibility problem, not an
   effect. It gets the sky as a gradient of its own instead. */
.drawer {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: 890;
  background:
    radial-gradient(700px 420px at 88% 4%, rgba(var(--rgb-mauve), .2), transparent 62%),
    radial-gradient(640px 400px at 4% 62%, rgba(var(--rgb-blue), .22), transparent 60%),
    linear-gradient(170deg, #FBFCFE, var(--sky-1) 60%, var(--sky-2));
  padding: var(--sp-6) var(--sp-5) var(--sp-8);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease);
}
.drawer.open { transform: none; }
/* :not(.btn) because this rule is (0,1,1) and .btn-primary is
   (0,1,0) — without it the drawer's red CTA inherits navy link
   colour and lands at 3.26:1 on its own fill, while the identical
   button everywhere else is correctly white. */
.drawer a:not(.btn) {
  display: block;
  padding: 15px 4px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--navy-900);
}
.drawer a:not(.btn):active { color: var(--red-500); }
.drawer__sub {
  font-size: .92rem !important;
  font-weight: 500 !important;
  color: var(--ink-soft) !important;
  padding-left: var(--sp-4) !important;
}

/* ---------- HERO ---------- */
/* The hero no longer paints its own opaque background. It's a
   translucent wash over the fixed sky, same as every other light
   section, so the gradient behind it is continuous from the top
   of the page to the footer rather than restarting at the hero's
   bottom edge.

   Two blobs instead of one: blue on the left, mauve on the right.
   The old version put a red glow at 88% — red is the action
   colour here, and a red field behind the buttons stole exactly
   the contrast the buttons need. */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: var(--sp-8);
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(var(--rgb-mauve),.26), transparent 62%),
    radial-gradient(900px 480px at 5% 8%,   rgba(var(--rgb-blue),.3), transparent 58%),
    linear-gradient(178deg, rgba(255,255,255,.58), rgba(226,235,248,.42) 55%);
}
/* The graticule. It reads as a map grid rather than as a
   texture, which is the one piece of decoration on this site that
   is actually about travel. Slate at 15% so it takes its cast
   from whatever part of the sky it's over.

   Deliberately static. Drifting it meant animating
   background-position on a full-width element, which repaints
   every frame for the whole life of the page — and the sky behind
   it is already moving. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--rgb-slate),.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--rgb-slate),.15) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(circle at 50% 35%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 35%, #000, transparent 72%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: var(--sp-8);
  align-items: center;
}
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-7); }
}

.hero h1 { margin-bottom: var(--sp-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* trust row */
.trust-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  flex-wrap: wrap;
}
.avatars { display: flex; }
.avatars img, .avatars .av {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 3px solid var(--surface);
  object-fit: cover;
  margin-left: -13px;
  background: var(--navy-200);
  display: grid;
  place-items: center;
  font-size: .8rem;
  font-weight: 800;
  color: var(--navy-800);
}
.avatars > *:first-child { margin-left: 0; }
.stars { color: var(--gold-700); font-size: 1rem; letter-spacing: 1px; }

/* ticker */
.ticker {
  background: linear-gradient(90deg, var(--navy-900), var(--navy-800) 50%, var(--navy-900));
  color: #fff;
  padding: 11px 0;
  overflow: hidden;
}
.ticker .marquee { --gap: 52px; }
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  color: rgba(255,255,255,.92);
}
.ticker__item::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--red-500);
  flex-shrink: 0;
}

/* ---------- LEAD FORM CARD ---------- */
/* Denser than a plain .card at 88% — this one sits directly on
   the hero's mauve blob and holds a form, so it needs to read as
   a solid object you can fill in, not as another layer of glass. */
.lead-card {
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--sh-xl);
  position: relative;
  overflow: hidden;
}
.lead-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--navy-800), var(--red-500), var(--mauve-500));
}

/* ---------- COUNTERS ---------- */
/* Navy into mauve rather than navy into red. These are figures,
   not a call to action, and red on the numbers was competing with
   the buttons directly below them on the homepage. */
.counter-val {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--navy-800), var(--mauve-700));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bg-navy .counter-val {
  background: linear-gradient(135deg, #fff, var(--mauve-100));
  -webkit-background-clip: text;
  background-clip: text;
}
.counter-lbl {
  font-size: .87rem;
  font-weight: 600;
  color: var(--ink-mute);
  margin-top: 7px;
}
.bg-navy .counter-lbl { color: rgba(255,255,255,.7); }

/* ---------- COUNTRY CARD ---------- */
.country-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3 / 3.9;
  background: var(--navy-800);
  display: block;
  box-shadow: var(--sh-sm);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.country-card:hover { transform: translateY(-7px); box-shadow: var(--sh-xl); }
.country-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), filter var(--t-mid) ease;
}
.country-card:hover img { transform: scale(1.1); }
.country-card__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--rgb-deep),.94) 8%, rgba(var(--rgb-deep),.45) 46%, rgba(var(--rgb-deep),.1) 78%);
}
.country-card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-5);
  color: #fff;
}
.country-card__body h3 { color: #fff; font-size: 1.22rem; margin-bottom: 4px; }
.country-card__meta { font-size: .82rem; color: rgba(255,255,255,.78); }
.country-card__flag {
  position: absolute;
  top: var(--sp-4); left: var(--sp-4);
  font-size: 1.9rem;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.4));
}
.country-card__tag {
  position: absolute;
  top: var(--sp-4); right: var(--sp-4);
}

/* ---------- ACCORDION ---------- */
.acc { border-bottom: 1px solid var(--line); }
.acc__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 21px 0;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.03rem;
  color: var(--navy-900);
  transition: color var(--t-fast) ease;
}
.acc__q:hover { color: var(--red-500); }
.acc__ico {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--navy-50), var(--mauve-50));
  display: grid;
  place-items: center;
  transition: transform var(--t-mid) var(--ease), background var(--t-mid) ease;
}
.acc__ico::before, .acc__ico::after {
  content: "";
  position: absolute;
  width: 12px; height: 2px;
  background: var(--navy-800);
  border-radius: 2px;
  transition: transform var(--t-mid) var(--ease), background var(--t-fast) ease;
}
.acc__ico::after { transform: rotate(90deg); }
.acc.open .acc__ico { background: linear-gradient(140deg, var(--navy-700), var(--mauve-500)); transform: rotate(180deg); }
.acc.open .acc__ico::before,
.acc.open .acc__ico::after { background: #fff; }
.acc.open .acc__ico::after { transform: rotate(0deg); }
.acc__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--t-slow) var(--ease-io);
}
.acc__a-in { padding-bottom: 22px; color: var(--ink-soft); line-height: 1.75; max-width: 76ch; }

/* ---------- CHAT WIDGET ---------- */
.chat-fab {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 950;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--navy-800), var(--navy-600));
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 34px rgba(var(--rgb-navy),.42);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.chat-fab:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 18px 46px rgba(var(--rgb-navy),.52); }
.chat-fab svg { width: 27px; height: 27px; }
.chat-fab__ping {
  position: absolute;
  top: 3px; right: 3px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--red-500);
  border: 2.5px solid #fff;
  animation: pulse 2.4s infinite;
}
.chat-fab.hidden { opacity: 0; visibility: hidden; transform: scale(.5); }

.chat-panel {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 960;
  width: min(400px, calc(100vw - 32px));
  height: min(620px, calc(100vh - 100px));
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(22px) scale(.94);
  transform-origin: bottom right;
  transition: opacity var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease),
              visibility var(--t-mid);
}
.chat-panel.open { opacity: 1; visibility: visible; transform: none; }

.chat-hd {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color: #fff;
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.chat-hd__av {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--red-500), var(--red-400));
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: .95rem;
  flex-shrink: 0;
}
.chat-hd__meta { flex: 1; min-width: 0; }
.chat-hd__name { font-family: var(--font-display); font-weight: 700; font-size: .98rem; }
.chat-hd__status {
  font-size: .76rem;
  color: rgba(255,255,255,.75);
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  transition: background var(--t-fast) ease;
}
.chat-close:hover { background: rgba(255,255,255,.16); }

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-5);
  background:
    radial-gradient(420px 300px at 90% 4%, rgba(var(--rgb-mauve), .16), transparent 64%),
    linear-gradient(170deg, var(--sky-1), var(--sky-2) 70%, var(--sky-1));
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  scroll-behavior: smooth;
}
.chat-body::-webkit-scrollbar { width: 6px; }
.chat-body::-webkit-scrollbar-thumb { background: var(--navy-200); border-radius: 3px; }

.msg {
  max-width: 84%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: .92rem;
  line-height: 1.6;
  animation: msg-in .34s var(--ease) both;
  word-wrap: break-word;
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.msg-bot {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
  color: var(--ink);
}
.msg-user {
  align-self: flex-end;
  background: linear-gradient(140deg, var(--navy-800), var(--navy-700));
  color: #fff;
  border-bottom-right-radius: 5px;
}
.msg strong { font-weight: 700; color: var(--navy-900); }
.msg-user strong { color: #fff; }
.msg ul { margin: 8px 0 0; padding-left: 18px; list-style: disc; }
.msg li { margin-bottom: 4px; }

.typing { display: flex; gap: 4px; padding: 15px 17px; }
.typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--navy-400);
  animation: bounce 1.3s infinite;
}
.typing span:nth-child(2) { animation-delay: .17s; }
.typing span:nth-child(3) { animation-delay: .34s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30%           { transform: translateY(-6px); opacity: 1; }
}

.chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 var(--sp-5) var(--sp-3);
  background: var(--sky-1);
}
.chip {
  padding: 8px 14px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--navy-200);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy-800);
  transition: all var(--t-fast) ease;
}
.chip:hover {
  background: linear-gradient(140deg, var(--navy-800), var(--navy-700));
  color: #fff;
  border-color: var(--navy-800);
  transform: translateY(-1px);
}
/* active state for chip filters (blog, countries, FAQ) */
.chip--on {
  background: linear-gradient(140deg, var(--navy-800), var(--navy-600));
  border-color: var(--navy-800);
  color: #fff;
}
.chip--on:hover { background: linear-gradient(140deg, var(--navy-900), var(--navy-700)); color: #fff; }

.chat-ft {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
.chat-ft input {
  flex: 1;
  padding: 12px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-full);
  font-size: .92rem;
  background: var(--sky-1);
  transition: border-color var(--t-fast) ease;
}
.chat-ft input:focus { outline: none; border-color: var(--navy-600); background: var(--surface); }
.chat-send {
  width: 43px; height: 43px;
  border-radius: 50%;
  background: var(--red-500);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background var(--t-fast) ease, transform var(--t-fast) ease;
}
.chat-send:hover { background: var(--red-600); transform: scale(1.07); }
.chat-send svg { width: 18px; height: 18px; }

/* WhatsApp float */
.wa-float {
  position: fixed;
  right: 22px; bottom: 96px;
  z-index: 940;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 28px rgba(37,211,102,.42);
  transition: transform var(--t-mid) var(--ease);
}
.wa-float:hover { transform: scale(1.1) translateY(-2px); }
.wa-float svg { width: 29px; height: 29px; }

@media (max-width: 520px) {
  .chat-fab { width: 56px; height: 56px; right: 16px; bottom: 16px; }
  .wa-float { width: 50px; height: 50px; right: 16px; bottom: 84px; }
  .chat-panel { right: 8px; bottom: 8px; height: calc(100vh - 80px); }
}

/* ---------- WHATSAPP NUMBER CHOOSER ---------- */
.wa-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-mid) var(--ease), visibility var(--t-mid);
}
.wa-modal.open { opacity: 1; visibility: visible; }
.wa-modal__veil {
  position: absolute;
  inset: 0;
  background: rgba(var(--rgb-deep),.64);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.wa-modal__box {
  position: relative;
  width: min(420px, 100%);
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  padding: var(--sp-6);
  transform: translateY(18px) scale(.96);
  transition: transform var(--t-mid) var(--ease);
}
.wa-modal.open .wa-modal__box { transform: none; }
/* h2, not h4: this box is appended to <body> after every other heading on the
   page, so an h4 read as a skip from whatever h2 came last. A dialog title is
   the top of its own region — moving up a level is never an outline error. */
.wa-modal__box h2 { font-size: 1.12rem; margin-bottom: 6px; }
.wa-modal__box > p {
  font-size: .89rem;
  color: var(--ink-soft);
  margin-bottom: var(--sp-5);
}
.wa-modal__x {
  position: absolute;
  top: 12px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-mute);
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.wa-modal__x:hover { background: var(--mauve-50); color: var(--navy-900); }

.wa-modal__list { display: flex; flex-direction: column; gap: 10px; }
.wa-modal__list a {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease,
              transform var(--t-fast) ease;
}
.wa-modal__list a:hover,
.wa-modal__list a:focus-visible {
  border-color: #25D366;
  background: #F2FCF6;
  transform: translateY(-2px);
}
.wa-modal__ico {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid;
  place-items: center;
}
.wa-modal__ico svg { width: 22px; height: 22px; }
.wa-modal__meta { display: flex; flex-direction: column; min-width: 0; }
.wa-modal__meta strong {
  font-family: var(--font-display);
  font-size: .96rem;
  color: var(--navy-900);
}
.wa-modal__meta small { font-size: .86rem; color: var(--ink-mute); }

/* ---------- FOOTER ---------- */
/* The bottom of the ramp. The sky runs from pale at the top of
   the document to this, so the footer is where the dusk finishes
   rather than a dark block bolted on the end — hence the two
   blobs and the mauve hairline, which is the same last-light
   edge the dark sections use. */
.ft {
  position: relative;
  background:
    radial-gradient(900px 440px at 10% 0%,  rgba(var(--rgb-mauve), .17), transparent 62%),
    radial-gradient(820px 420px at 92% 45%, rgba(var(--rgb-blue), .13), transparent 60%),
    linear-gradient(168deg, var(--navy-900) 0%, #142839 52%, var(--navy-900) 100%);
  border-top: 1px solid rgba(var(--rgb-mauve), .28);
  color: rgba(255,255,255,.72);
}
.ft__top {
  padding-block: var(--sp-8);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.ft__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: var(--sp-7);
}
@media (max-width: 960px) { .ft__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
@media (max-width: 560px) { .ft__grid { grid-template-columns: 1fr; } }

/* Same crop window as the header — see .logo-mark. The white plate is
   a border rather than padding on purpose: `overflow: hidden` clips at
   the padding box, so padding here would enlarge the crop window and
   throw the mark off-centre inside it. A border sits outside that box
   and leaves the window exactly --mark-h tall. */
.ft__logo {
  --mark-h: 34px;
  background: #fff;
  border: solid #fff;
  border-width: 10px 16px;
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
}
.ft h2 {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--sp-4);
}
.ft__links li { margin-bottom: 11px; }
.ft__links a {
  font-size: .92rem;
  transition: color var(--t-fast) ease, padding-left var(--t-fast) ease;
}
.ft__links a:hover { color: #fff; padding-left: 5px; }

.ft__contact li {
  display: flex;
  gap: 11px;
  margin-bottom: var(--sp-4);
  font-size: .91rem;
  line-height: 1.6;
}
.ft__contact svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; color: var(--red-400); }
.ft__contact a:hover { color: #fff; }

.socials { display: flex; gap: 9px; margin-top: var(--sp-5); }
.socials a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
  display: grid;
  place-items: center;
  transition: background var(--t-fast) ease, transform var(--t-fast) ease;
}
.socials a:hover { background: var(--red-500); transform: translateY(-3px); }
.socials svg { width: 17px; height: 17px; }

.ft__bar {
  padding-block: var(--sp-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: .85rem;
}
.ft__bar a:hover { color: #fff; }

.disclaimer {
  background: rgba(0,0,0,.26);
  padding: var(--sp-4) 0;
  font-size: .8rem;
  line-height: 1.65;
  color: rgba(255,255,255,.5);
}

/* ---------- TOAST ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(90px);
  z-index: 999;
  background: linear-gradient(140deg, var(--navy-900), var(--navy-700));
  color: #fff;
  padding: 14px 26px;
  border-radius: var(--r-full);
  box-shadow: var(--sh-xl);
  font-size: .92rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: transform var(--t-slow) var(--ease), opacity var(--t-mid) ease;
  max-width: calc(100vw - 32px);
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast svg { width: 19px; height: 19px; color: #4ADE80; flex-shrink: 0; }

/* ---------- PAGE HEADER (inner pages) ---------- */
/* Same treatment as .hero, scaled down — translucent, two-blob,
   no opaque base. Twelve pages open with this, so it's the shape
   most of the site is judged by. */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + 56px);
  padding-bottom: var(--sp-7);
  background:
    radial-gradient(820px 400px at 82% -6%, rgba(var(--rgb-mauve),.26), transparent 60%),
    radial-gradient(760px 380px at 4% 30%,  rgba(var(--rgb-blue),.3), transparent 62%),
    linear-gradient(175deg, rgba(255,255,255,.58), rgba(226,235,248,.42));
  border-bottom: 1px solid var(--line);
}
.page-hero > * { position: relative; z-index: 1; }
/* Same reasoning as .crumbs: the page-hero is the densest light
   surface on the site, so the mute token doesn't clear 4.5:1 on it.
   This catches the "Last updated" line on the policy pages. */
.page-hero .muted { color: var(--ink-soft); }
.crumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: .84rem;
  /* --ink-soft, not --ink-mute. Crumbs only ever appear on
     .page-hero, which is denser than any section veil, and the mute
     token measured 4.04:1 there. Everywhere else mute is fine. */
  color: var(--ink-soft);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.crumbs a:hover { color: var(--red-500); }
.crumbs span { opacity: .5; }