/* ================================================================
   BEST DEAL FOREX — Global Stylesheet v6 FINAL
   One universal white navbar · No tricks · No overrides
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

:root {
  --navy:       #061A2E;
  --navy-mid:   #0B3C5D;
  --blue:       #1266A8;
  --blue-light: #2387D8;
  --blue-pale:  #EBF4FC;
  --gold:       #C8930A;
  --gold-light: #E8AD1A;
  --off-white:  #F3F6F9;
  --text-dark:  #0D1B2A;
  --text-mid:   #3A4A5C;
  --text-muted: #6B7A8D;
  --white:      #FFFFFF;
  --border:     rgba(6,26,46,0.08);
  /* Layered, soft shadows — premium depth from two light layers rather than one heavy drop. */
  --shadow:     0 1px 2px rgba(6,26,46,0.04), 0 6px 20px rgba(6,26,46,0.07);
  --shadow-md:  0 2px 4px rgba(6,26,46,0.05), 0 14px 36px rgba(6,26,46,0.10);
  --shadow-lg:  0 4px 10px rgba(6,26,46,0.06), 0 28px 64px rgba(6,26,46,0.14);
  --radius:     14px;
  --radius-lg:  24px;
  /* Brand gradients for a richer, more modern finish on buttons and hero panels. */
  --gold-grad:  linear-gradient(135deg, #E8AD1A 0%, #C8930A 100%);
  --navy-grad:  linear-gradient(140deg, #0B3C5D 0%, #061A2E 72%);
  --transition: 0.26s cubic-bezier(0.22,1,0.36,1);
  /* Compact sticky header — logo height is capped separately (not tied 1:1 to this) */
  --nav-height: 70px;
  /* Navbar + fixed ticker strip (used by sticky elements e.g. order progress) */
  --ticker-strip-height: 36px;

  /*
   * Horizontal layout, single source of truth. .nav-inner and .container each used to
   * carry their own width and padding (1280/20px vs 1200/28px), which cannot stay
   * aligned by construction: the logo rendered 20px left of the page content and the
   * CTA 20px right of it, on all 21 pages carrying the navbar. Both now resolve to the
   * same edges, so the bar lines up with whatever sits under it at every width.
   */
  --content-max: 1320px;
  --gutter: 24px;
}

@media (max-width: 900px) {
  :root { --gutter: 16px; }
}
@media (max-width: 600px) {
  :root { --nav-height: 64px; --gutter: 16px; }
}
@media (max-width: 400px) {
  :root { --nav-height: 60px; --gutter: 12px; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--off-white);
  color: var(--text-dark);
  overflow-x: hidden;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: 'Syne', sans-serif; line-height: 1.2; }

/* Eyebrow labels use the brand display font (Syne), like the headings they sit
   above — in the body font they read as generic and a touch weak next to a big
   Syne title. Letter-spacing eased from .16 to .12 because Syne is already wide. */
.section-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Syne', sans-serif;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
}
.section-label::before { content: ''; width: 22px; height: 2px; background: var(--gold); flex-shrink: 0; }

.section-title {
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 800; color: var(--navy); line-height: 1.2;
}
.section-title span { color: var(--blue); }

.section-subtitle {
  font-size: 0.93rem; color: var(--text-mid);
  max-width: 520px; margin-top: 9px; font-weight: 400; line-height: 1.7;
}

/* ── Layout ─────────────────────────────────────────────── */
.container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: 88px 0; }
@media (max-width: 600px) { section { padding: 56px 0; } }

/* ── Buttons ────────────────────────────────────────────── */
.btn-primary {
  padding: 10px 24px; background: var(--gold-grad); border-radius: 10px;
  font-family: 'Syne', sans-serif; font-size: 0.84rem; font-weight: 700;
  color: var(--navy); cursor: pointer; border: none;
  box-shadow: 0 2px 8px rgba(200,147,10,0.22);
  transition: var(--transition); display: inline-flex; align-items: center; gap: 7px;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(200,147,10,0.32); filter: brightness(1.04); }

.btn-outline-dark {
  padding: 9px 22px; border: 1.5px solid rgba(6,26,46,0.18);
  border-radius: 8px; font-family: 'Syne', sans-serif; font-size: 0.84rem;
  font-weight: 600; color: var(--text-dark); cursor: pointer;
  background: transparent; transition: var(--transition);
}
.btn-outline-dark:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-pale); }

.btn-blue {
  padding: 12px 24px; background: var(--blue); border-radius: 11px;
  font-family: 'Syne', sans-serif; font-size: 0.86rem; font-weight: 700;
  color: white; cursor: pointer; border: none;
  box-shadow: 0 3px 12px rgba(18,102,168,0.22);
  transition: var(--transition); display: inline-flex; align-items: center; gap: 8px;
}
.btn-blue:hover { background: var(--navy); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(18,102,168,0.28); }

.btn-gold-lg {
  padding: 13px 28px; background: var(--gold-grad); border-radius: 12px;
  font-family: 'Syne', sans-serif; font-size: 0.88rem; font-weight: 700;
  color: var(--navy); cursor: pointer; border: none;
  box-shadow: 0 3px 12px rgba(200,147,10,0.26);
  transition: var(--transition); display: inline-flex; align-items: center; gap: 8px;
}
.btn-gold-lg:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(200,147,10,0.36); filter: brightness(1.04); }

/* ================================================================
   NAVBAR — WHITE, NO OVERRIDES, IDENTICAL ON EVERY PAGE
   ================================================================ */

/* ══ NAVBAR LOCK — white on all pages, no exceptions ══════ */
html body #navbar,
html body #navbar.elevated,
html body #navbar.scrolled,
html body #navbar.open {
  background: #FFFFFF !important;
  border-bottom: 1px solid rgba(0,0,0,0.09) !important;
  width: 100% !important;
  max-width: none !important;
  left: 0 !important;
  right: 0 !important;
}

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  z-index: 1000;
  background: #FFFFFF;                          /* hard-coded — no variable that could be overridden */
  border-bottom: 1px solid rgba(0,0,0,0.09);
  box-shadow: 0 1px 16px rgba(6,26,46,0.07);
  transition: box-shadow 0.26s ease;
  color: #0D1B2A !important;                     /* force dark; page `<style>` blocks load after global.css */
}
#navbar.elevated {
  box-shadow: 0 2px 24px rgba(6,26,46,0.13);
}

.nav-inner {
  width: min(100%, var(--content-max));
  max-width: var(--content-max);
  box-sizing: border-box;
  position: relative;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: var(--nav-height);
  gap: 10px;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* Logo — capped so the bar height isn’t driven by an oversized raster. The source is
   175x116, so anything up to 60px tall is still a downscale and stays sharp. Grown
   from 54 to 60: the brand read a little small against the taller old bar. */
.nav-logo-img {
  height: 60px;
  width: auto;
  max-height: 62px;
  max-width: 230px;
  object-fit: contain;
  object-position: left center;
  display: block;
  flex-shrink: 0;
}

/* Brand = home link wrapping logo only.
   No min-width: the logo is ~81px wide at this height, and reserving 190px sat 110px of
   dead space between the logo and the first link for no reason — the row is positioned
   by margin-left:auto on .nav-links, not by padding the brand out. */
.nav-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  text-decoration: none;
  flex-shrink: 0;
  max-width: 240px;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/*
 * Desktop: margin-left:auto on .nav-links pushes the whole link row + CTA to the right
 * (logo stays left). flex-shrink: 0 + min-width: min-content avoids clipping under
 * body { overflow-x: hidden }.
 */
.nav-links {
  position: static;
  transform: none;
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
  justify-content: flex-start;
  margin-left: 0;
  flex: 0 0 auto;
  min-width: min-content;
}
.nav-links a {
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: 'Syne', sans-serif;
  transition: color 0.22s ease, background 0.22s ease;
  white-space: nowrap;
  text-decoration: none;
}

/*
 * Contrast lock: `a { color: inherit }` + per-page `<style>` (after global.css) must not wash out nav.
 * `nav-active` avoids clashes with `.calc-tab.active`, `.cat-pill.active`, etc.
 */
html body #navbar .nav-inner {
  color: #0D1B2A !important;
}
html body #navbar .nav-links a,
html body #navbar .nav-links a:link,
html body #navbar .nav-links a:visited {
  color: #061A2E !important;
  -webkit-text-fill-color: #061A2E !important;
  background-color: transparent !important;
  opacity: 1 !important;
}
html body #navbar .nav-links a:hover {
  color: #020810 !important;
  -webkit-text-fill-color: #020810 !important;
  background: #E8EDF2 !important;
}
/* A pale blue block was doing the job of a highlighter pen. On a site selling a regulated
   service the current section should be marked, not shouted: navy text, a thin gold rule
   beneath it, and the background left free for hover to use. */
html body #navbar .nav-links a.nav-active,
html body #navbar .nav-links a.active,
html body #navbar .nav-links .nav-drop.nav-active > .nav-drop-btn {
  color: #023047 !important;
  -webkit-text-fill-color: #023047 !important;
  background: transparent !important;
  font-weight: 700 !important;
  box-shadow: inset 0 -2px 0 #C9A227;
  border-radius: 8px 8px 0 0;
}

/* ── Resources dropdown ────────────────────────────────────────────────────
   Opens on hover for a mouse and on focus-within for a keyboard; touch gets the .open
   class from layout.js, since it has neither. */
.nav-drop { position: relative; display: inline-block; }
.nav-drop-btn {
  font-family: 'Syne', sans-serif;
  font-size: 0.88rem; font-weight: 600; line-height: inherit;
  color: #061A2E; background: transparent; border: 0; cursor: pointer;
  padding: 7px 13px; border-radius: 8px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color .22s ease, background .22s ease;
}
html body #navbar .nav-drop-btn:hover { background: #E8EDF2; color: #020810; }
.nav-chev { transition: transform .18s ease; flex: none; }
.nav-drop:hover .nav-chev,
.nav-drop.open .nav-chev { transform: rotate(180deg); }

.nav-drop-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 218px; padding: 6px;
  background: #fff; border: 1px solid rgba(0,0,0,.09); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(6,26,46,.14);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  /* visibility is deliberately NOT transitioned. It is a discrete property, and including
     it here left the menu computing as hidden even when the open rule matched. Only the
     two properties that can actually animate are listed. */
  transition: opacity .2s ease, transform .2s ease;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu,
.nav-drop.open .nav-drop-menu { opacity: 1; visibility: visible; transform: translateY(0); }

html body #navbar .nav-drop-menu a {
  display: block; padding: 9px 12px; border-radius: 8px;
  font-family: 'DM Sans', sans-serif; font-size: 0.86rem; font-weight: 600;
  color: #061A2E !important; -webkit-text-fill-color: #061A2E !important;
  white-space: nowrap; text-decoration: none;
  border-left: 2px solid transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
/* Gold left-rule + pale-blue wash on hover — a quieter, more finance-industry
   hover than the flat grey block it replaced. */
html body #navbar .nav-drop-menu a:hover {
  background: var(--blue-pale) !important;
  border-left-color: var(--gold);
}

/* ── Mega menu ──────────────────────────────────────────────────────────────
   Products and Resources open a three-column panel rather than a single list —
   groups the offering the way a customer thinks about it. Everything here is a
   real destination; there are no calculator/converter placeholders. */
.nav-mega-menu {
  min-width: 560px;
  /* Never wider than the viewport: the right-aligned Resources panel is anchored
     to its button's right edge, and at the narrowest single-row width (~995px) a
     620px panel ran off the left edge. 560 keeps both panels on-screen there, and
     the guard covers anything narrower. */
  max-width: calc(100vw - 24px);
  padding: 20px 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 6px 24px;
}
/* Resources sits on the right half of the bar, so its panel hangs from the
   button's right edge to stay on-screen; Products (left) hangs from the left. */
.nav-mega-right { left: auto; right: 0; }
.nav-mega-col { display: flex; flex-direction: column; }
html body #navbar .nav-mega-menu a.nav-mega-h {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important;
  padding: 6px 10px; margin-bottom: 4px; border-left: 0;
  border-bottom: 1px solid rgba(0,0,0,.08); border-radius: 0;
}
html body #navbar .nav-mega-menu a.nav-mega-h:hover {
  background: transparent !important;
  color: var(--gold-light) !important; -webkit-text-fill-color: var(--gold-light) !important;
}

/* Thin rule separating the sign-in links from Track Order in the Login menu. */
.nav-drop-sep { height: 1px; background: rgba(0,0,0,.08); margin: 6px 8px; }

/* ── Action hierarchy ──────────────────────────────────────────────────────
   Signing in is a plain link, tracking is a quiet outline, and the quote is the only
   filled button in the bar. Three actions of equal weight is three actions nobody picks. */
.nav-signin {
  font-family: 'DM Sans', sans-serif; font-size: 0.86rem; font-weight: 600;
  padding: 7px 9px; border-radius: 8px; white-space: nowrap; text-decoration: none;
}
html body #navbar .nav-signin { color: #061A2E !important; -webkit-text-fill-color: #061A2E !important; }
html body #navbar .nav-signin:hover { background: #E8EDF2 !important; }

/* Keyboard users need to see where they are. */
html body #navbar a:focus-visible,
html body #navbar .nav-drop-btn:focus-visible {
  outline: 2px solid #1266A8; outline-offset: 2px;
}

/* Desktop: single row; menu + CTA grouped and aligned to the right */
@media (min-width: 993px) {
  .nav-inner {
    flex-wrap: nowrap;
  }
  .nav-links {
    margin-left: auto;
  }
  .nav-actions {
    margin-left: 0;
  }
  #navbar .nav-actions .btn-primary {
    padding: 10px 20px;
    font-size: 0.86rem;
  }
}

/* Tighter links on mid-width screens so one row still fits */
@media (min-width: 993px) and (max-width: 1240px) {
  .nav-inner {
    gap: 8px;
  }
  .nav-brand {
    max-width: 190px;
  }
  .nav-logo-img {
    height: 46px;
    max-height: 48px;
    max-width: 185px;
  }
  /* Both plain links AND the mega-menu buttons tighten here — leaving the
     dropdown buttons at their full desktop padding is what pushed the row past
     the edge between 900 and ~1080px once Products became a second dropdown. */
  .nav-links a,
  .nav-drop-btn {
    padding: 6px 7px;
    font-size: 0.8rem;
  }
  .nav-logo-img { height: 52px; max-height: 54px; }
  #navbar .nav-actions .btn-primary {
    padding: 9px 14px;
    font-size: 0.8rem;
  }
}
/* Actions — flush with right padding of .nav-inner */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 0;
  margin-right: 0;
  position: relative;
  z-index: 2;
}

/* Secondary action link sitting beside the Get Quote CTA (Track Order). */
#navbar .nav-actions .nav-track {
  display: inline-flex;
  align-items: center;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 0.84rem;
  color: #061A2E;
  text-decoration: none;
  padding: 9px 13px;
  border-radius: 9px;
  border: 1.5px solid rgba(6,26,46,0.16);
  white-space: nowrap;
  transition: 0.15s;
}
#navbar .nav-actions .nav-track:hover { background: #E8EDF2; }
#navbar .nav-actions .nav-track.nav-active { background: #C5E0F2; border-color: transparent; }
#navbar .nav-actions .nav-track .nt-short { display: none; }
@media (max-width: 992px) { #navbar .nav-actions .nav-track { font-size: 0.78rem; padding: 7px 10px; } }
/* On phones, shorten "Track Order" to "Track" so the top bar (logo + Get Quote + Track +
   hamburger) doesn't overflow. */
@media (max-width: 600px) {
  #navbar .nav-actions .nav-track { padding: 7px 9px; font-size: 0.74rem; }
  #navbar .nav-actions .nav-track .nt-full { display: none; }
  #navbar .nav-actions .nav-track .nt-short { display: inline; }
}

/* The cramped single-row band. Above 900 the bar is still one row, but eight items,
   two mega buttons and three actions do not fit a ~950px laptop at full size — the
   Get-a-Quote button was pushed off the right edge. Here the logo trims, item padding
   tightens, and "Track Order" becomes "Track", which together reclaim the ~75px the
   row was over. Above 1050 there is room, so the full labels return. */
@media (min-width: 993px) and (max-width: 1050px) {
  .nav-links a,
  .nav-drop-btn { padding: 6px 6px; }
  .nav-logo-img { height: 46px; max-height: 48px; }
  #navbar .nav-actions .nav-track .nt-full { display: none; }
  #navbar .nav-actions .nav-track .nt-short { display: inline; }
  #navbar .nav-actions .btn-primary { padding: 9px 15px; }
}

/* Hamburger — 44x44 minimum: it is the only way to reach the menu on mobile, and at
   8px padding the tap target measured 38x32, under the 44px touch guideline. The bars
   stay 22px; the box around them grows. */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.hamburger span {
  width: 22px; height: 2px;
  background: #0D1B2A;
  border-radius: 2px;
  transition: 0.26s ease;
  display: block;
}

/* Mobile */
/* ── Tablet (900px) ── */
@media (max-width: 992px) {
  .nav-brand { max-width: 200px; }
  .nav-links {
    display: none;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--nav-height);
    transform: none;
    max-width: none;
    margin-left: 0;
    min-width: 0;
    flex-shrink: 1;
    pointer-events: auto;
    background: #FFFFFF;
    padding: 8px 16px 16px;
    gap: 2px;
    z-index: 999;
    border-bottom: 1px solid rgba(0,0,0,0.09);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    justify-content: flex-start;
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    display: block;
    padding: 12px 14px;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Syne', sans-serif;
    border-radius: 8px;
  }
  html body #navbar .nav-links a,
  html body #navbar .nav-links a:link,
  html body #navbar .nav-links a:visited {
    color: #061A2E !important;
    -webkit-text-fill-color: #061A2E !important;
    background-color: transparent !important;
  }
  html body #navbar .nav-links a:hover {
    color: #020810 !important;
    -webkit-text-fill-color: #020810 !important;
    background: #E8EDF2 !important;
  }
  html body #navbar .nav-links a.nav-active,
  html body #navbar .nav-links a.active {
    color: #023047 !important;
    -webkit-text-fill-color: #023047 !important;
    background: #C5E0F2 !important;
    font-weight: 700 !important;
  }
  /* Dropdowns in the collapsed link stack become tap-to-expand accordions: the
     button is a full-width row, its panel drops in static beneath it, columns
     stacking. Scoped to .nav-links so the Login dropdown in .nav-actions — which
     stays in the top bar on mobile — keeps floating rather than going full-width. */
  .nav-links .nav-drop { display: block; width: 100%; position: static; }
  .nav-links .nav-drop-btn {
    width: 100%; justify-content: space-between; padding: 12px 14px;
    font-size: 1rem; border-radius: 8px;
  }
  html body #navbar .nav-links .nav-drop-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; width: 100%; box-shadow: none; border: 0;
    padding: 0 0 8px 12px; margin: 0;
    display: none;
  }
  .nav-links .nav-mega-menu { grid-template-columns: 1fr; gap: 0; padding: 0 0 8px 12px; }
  /* Must out-specify the hide rule above (html body #navbar .nav-links .nav-drop-menu),
     which carries an id — a plain .nav-drop.open selector loses to it and the
     accordion silently refuses to open. */
  html body #navbar .nav-links .nav-drop.open > .nav-drop-menu { display: block; }
  html body #navbar .nav-links .nav-drop-menu a { white-space: normal; }
  html body #navbar .nav-links .nav-mega-menu a.nav-mega-h { margin-top: 8px; }

  /* The Login dropdown stays in the top bar on mobile (not the hamburger stack).
     Pin its menu to the viewport's right edge so it can't run off the left, as a
     menu anchored to the narrow button's right edge does at ~375px. */
  .nav-actions .nav-login > .nav-drop-menu {
    position: fixed; top: calc(var(--nav-height) + 4px); right: 12px; left: auto;
    min-width: 200px; max-width: calc(100vw - 24px);
  }

  .nav-actions { margin-left: auto; }
  .hamburger { display: flex; }
  .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ── Mobile (600px) ── */
@media (max-width: 600px) {
  .nav-inner {
    gap: 8px;
  }
  .ticker-bar { margin-top: var(--nav-height); }
  .nav-brand { max-width: 168px; }
  .nav-logo-img { height: 42px; max-height: 44px; max-width: 164px; }
  .nav-actions .btn-primary { padding: 8px 14px; font-size: 0.82rem; }
  section { padding: 48px 0; }
}

/* ── Small mobile (400px) ── */
@media (max-width: 400px) {
  .ticker-bar { margin-top: var(--nav-height); }
  .nav-brand { max-width: 146px; }
  .nav-logo-img { height: 38px; max-height: 40px; max-width: 144px; }
  .nav-actions .btn-primary { padding: 8px 10px; font-size: 0.76rem; }
}

/* ================================================================
   TICKER BAR
   ================================================================ */
.ticker-bar {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  background: var(--navy);
  padding: 5px 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-top: var(--nav-height);
  /* The label is pinned; only the rates scroll past it. A customer rate should never
     appear without saying what kind of rate it is. */
  display: flex; align-items: center; gap: 14px;
}
.ticker-label {
  flex: none; padding-left: 16px; padding-right: 14px;
  border-right: 1px solid rgba(255,255,255,0.14);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em;
  color: rgba(255,255,255,0.66); white-space: nowrap; line-height: 1.35;
}
.ticker-label b { display: block; color: var(--gold-light); font-weight: 700; }
.ticker-label.stale b { color: #fbbf24; }
.ticker-viewport { flex: 1 1 auto; overflow: hidden; }
.ticker-track {
  display: flex; gap: 52px;
  animation: ticker-scroll 38s linear infinite;
  width: max-content;
}
@media(max-width:640px){
  /* On a phone the two-line label would eat the bar, so keep only the first line. */
  .ticker-label { padding-left: 12px; padding-right: 10px; font-size: 0.62rem; }
  .ticker-label span { display: none; }
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.78rem; color: rgba(255,255,255,0.72); white-space: nowrap;
}
.ticker-currency { font-weight: 700; color: var(--gold-light); font-size: 0.77rem; }
.ticker-rate     { font-weight: 600; color: rgba(255,255,255,0.9); }
.ticker-up       { color: #4ade80; font-size: 0.72rem; }
.ticker-down     { color: #f87171; font-size: 0.72rem; }
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ================================================================
   PAGE HERO — Inner pages
   ================================================================ */
.page-hero {
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-mid) 50%, #104D7A 100%);
  padding: 56px 0 48px; position: relative; overflow: hidden;
}
.page-hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 56px 56px;
}
.page-hero-glow {
  position: absolute; border-radius: 50%; filter: blur(90px);
  pointer-events: none; width: 360px; height: 360px;
  top: -100px; right: -60px; background: rgba(18,102,168,0.26);
}
.page-hero-inner { position: relative; z-index: 2; }

.page-hero-label {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(200,147,10,0.1); border: 1px solid rgba(200,147,10,0.28);
  border-radius: 50px; padding: 5px 14px;
  font-size: 0.71rem; font-weight: 600; color: var(--gold-light);
  letter-spacing: 0.07em; margin-bottom: 14px;
}
.page-hero h1 {
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  font-weight: 800; color: #FFFFFF;
  margin-bottom: 12px; line-height: 1.18;
}
.page-hero h1 span { color: var(--gold-light); }
.page-hero p {
  font-size: 0.94rem; color: rgba(255,255,255,0.65);
  max-width: 520px; font-weight: 400; line-height: 1.72;
}
.breadcrumb {
  display: flex; align-items: center; gap: 7px;
  margin-top: 20px; font-size: 0.76rem; color: rgba(255,255,255,0.42);
}
.breadcrumb a { color: rgba(255,255,255,0.52); transition: color 0.22s; }
.breadcrumb a:hover { color: var(--gold-light); }
.breadcrumb span { color: var(--gold-light); }

/* Service tabs. Written here rather than inside products.html because
   knowledge.html already carries a near-identical .kc-tabs, and a second
   private copy is how the transaction panel ended up in five files. */
.svc-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 26px 0 26px; border-bottom: 1px solid rgba(0,0,0,0.08); padding-bottom: 2px;
}
.svc-tab {
  appearance: none; border: none; background: none; cursor: pointer; position: relative;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.92rem;
  color: var(--text-muted); padding: 10px 16px; border-radius: 9px 9px 0 0;
  transition: color .2s, background .2s;
}
.svc-tab:hover { color: var(--navy); background: rgba(18,102,168,0.05); }
.svc-tab.active { color: var(--navy); }
.svc-tab.active::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: -3px;
  height: 3px; border-radius: 3px; background: var(--gold);
}
.svc-panel { display: none; }
.svc-panel.active { display: block; }
.svc-panel-lead { font-size: 0.9rem; color: var(--text-mid); line-height: 1.7; max-width: 70ch; margin-bottom: 20px; }
.svc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.svc-item {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--white); border: 1px solid rgba(0,0,0,.07); border-radius: 11px;
  padding: 14px 16px; font-size: 0.88rem; color: var(--text-mid);
  transition: border-color .2s, transform .2s;
}
.svc-item:hover { border-color: rgba(18,102,168,.25); transform: translateY(-2px); }
.svc-item .ic { color: var(--blue); margin-top: .1em; }
.svc-item b { color: var(--navy); font-weight: 700; display: block; margin-bottom: 2px; }
.svc-item.is-partner .ic { color: var(--gold); }
/* Colour cannot be the only carrier of meaning (WCAG 1.4.1): the gold icon told
   a sighted reader that an item is partner-assisted and told everyone else
   nothing. The badge says it in words. */
.svc-badge {
  display: inline-block; margin-top: 6px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #7a5a04; background: rgba(200,147,10,.14);
  border: 1px solid rgba(200,147,10,.32); border-radius: 20px; padding: 2px 9px;
}

/* Splits a page's offer into what we do ourselves and what a partner does. */
.svc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; }
.svc-split > * { min-width: 0; }
.svc-col { background: var(--white); border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 24px 22px; }
.svc-col.is-partner { background: var(--off-white); }
.svc-col-title { font-family: 'Syne',sans-serif; font-weight: 800; color: var(--navy); font-size: 1rem; margin-bottom: 6px; }
.svc-col-sub { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 14px; line-height: 1.5; }
.svc-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.svc-col li { font-size: 0.87rem; color: var(--text-mid); display: flex; gap: 10px; align-items: flex-start; }
.svc-col li .ic { color: var(--blue); margin-top: .15em; }
.svc-col.is-partner li .ic { color: var(--gold); }
@media (max-width: 820px) { .svc-split { grid-template-columns: minmax(0,1fr); } }

/* ================================================================
   BACK LINK
   ----------------------------------------------------------------
   One definition, one placement rule: first thing inside the content
   column, above the panel or article it returns from. It lived in
   article.css, which the account and payment pages do not load, so
   those pages had inline copies of the same declarations or nothing
   at all.
   ================================================================ */
.nav-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.86rem; font-weight: 700; color: var(--blue);
  margin-bottom: 14px;
}
.nav-back:hover { color: var(--navy); }
.nav-back .ic { font-size: 1rem; }
/* The auth card steps back with a <button>, not a link — same affordance, so
   the class has to strip button chrome rather than have a second style exist. */
button.nav-back { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }

/* ================================================================
   TOOLS  (hub + calculators)
   ----------------------------------------------------------------
   Shared by tools.html and every individual tool page, so a card,
   a result panel or a calculator tab looks identical wherever it
   appears — the duplication that bit the transaction panel earlier
   does not get to happen again.
   ================================================================ */
.tools-page { background: var(--off-white); padding: 44px 0 72px; }
.tools-wrap { max-width: 760px; margin: 0 auto; }

/* Hub cards */
.tool-hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.tool-card {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid rgba(0,0,0,.07); border-radius: var(--radius-lg);
  padding: 28px 24px; text-decoration: none; transition: var(--transition);
}
.tool-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(18,102,168,.2); }
.tool-card-icon {
  width: 54px; height: 54px; border-radius: 14px; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem;
}
.tool-card-title { font-family: 'Syne',sans-serif; font-weight: 800; color: var(--navy); font-size: 1.08rem; margin-bottom: 8px; }
.tool-card-desc { font-size: .85rem; color: var(--text-mid); line-height: 1.6; flex: 1; }
.tool-card-cta { margin-top: 16px; font-family: 'Syne',sans-serif; font-weight: 700; font-size: .84rem; color: var(--blue); display: inline-flex; align-items: center; gap: 7px; }
.tool-card-cta .ic { transition: transform .2s ease; }
.tool-card:hover .tool-card-cta .ic { transform: translateX(3px); }
@media (max-width: 900px) { .tool-hub { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tool-hub { grid-template-columns: 1fr; } }

/* Calculator tabs (per page) */
.calc-tabs { display: flex; gap: 8px; margin-bottom: 22px; border-bottom: 1px solid rgba(0,0,0,.08); flex-wrap: wrap; }
.calc-tab { appearance: none; border: 0; background: none; cursor: pointer; position: relative; font-family: 'Syne',sans-serif; font-weight: 700; font-size: .95rem; color: var(--text-muted); padding: 12px 18px; border-radius: 9px 9px 0 0; transition: color .2s, background .2s; }
.calc-tab:hover { color: var(--navy); background: rgba(18,102,168,.05); }
.calc-tab.active { color: var(--navy); }
.calc-tab.active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px; background: var(--gold); }
.calc-panel { display: none; }
.calc-panel.active { display: block; }
.calc-lead { font-size: .9rem; color: var(--text-mid); line-height: 1.7; margin-bottom: 22px; }

/* Result panel */
.result { margin-top: 20px; background: linear-gradient(160deg, var(--navy), var(--navy-mid)); border-radius: 14px; padding: 26px 24px; color: #fff; }
.result-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .9rem; color: rgba(255,255,255,.75); }
.result-row:last-child { border-bottom: 0; }
.result-row b { color: #fff; font-weight: 700; }
.result-row.headline { padding-top: 14px; }
.result-row.headline span { font-family: 'Syne',sans-serif; font-weight: 700; color: var(--gold-light); font-size: 1rem; }
.result-row.headline b { font-family: 'Syne',sans-serif; font-size: 1.4rem; color: var(--gold-light); }
.calc-note { font-size: .8rem; color: var(--text-muted); line-height: 1.65; margin-top: 18px; padding: 14px 16px; background: rgba(18,102,168,.05); border-left: 3px solid var(--blue); border-radius: 0 10px 10px 0; }
.calc-note b { color: var(--navy); }
.calc-cta { margin-top: 26px; text-align: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }

/* ================================================================
   TRANSACTION PANEL
   ----------------------------------------------------------------
   The panel/field/summary/timeline component the customer meets on
   every page where money is involved: get-quote, payment,
   track-order, account/order, and the account and password pages.

   It was written five times — once in account.css and once inside
   each of four pages — and the copies had drifted. The reference box
   was 1.1rem on the tracking page and 1.15rem on the payment page;
   the total row 1.02rem on one and 1.05rem on the other; inputs
   11px/9px-radius in checkout and 12px/10px in the account. Nobody
   chose any of that, and the pages are two clicks apart.

   Divergences reconciled here rather than preserved. Where the
   copies disagreed the majority value won, except:
     - the focus ring, which only account.css had, now applies to
       every .input (see .input:focus-visible below)
     - .ref-box keeps the payment page's letter-spacing, which makes
       a monospace order reference easier to read back over a phone
   ================================================================ */
.panel {
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px;
  box-shadow: 0 4px 18px rgba(6,26,46,.07); padding: 22px; margin-bottom: 18px;
}
.panel-title { font-family: 'Syne',sans-serif; font-weight: 800; color: var(--navy); font-size: 1.05rem; margin-bottom: 16px; }
/* A panel that carries a subtitle wants the title tight against it. */
.panel-sub { font-size: .82rem; color: var(--text-muted); margin: -12px 0 16px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: .78rem; font-weight: 700; color: var(--navy); }
.field-hint { font-size: .76rem; color: var(--text-muted); }
/* min-width:0 — a flex/grid child's auto floor is its min-content, which held
   these inputs open past narrow viewports before it was added. */
.input {
  width: 100%; min-width: 0; padding: 11px 12px;
  border: 1.5px solid rgba(0,0,0,.12); border-radius: 9px;
  background: var(--off-white); font-size: .9rem; font-family: inherit;
}
/* get-quote removed the browser outline and replaced it with a border colour
   change alone — 1.5px going grey to blue, which a keyboard user can easily
   miss. The other two pages defined no focus rule at all, so the three behaved
   differently. One visible ring everywhere now.

   :focus rather than :focus-visible — the distinction exists to stop buttons
   ringing after a mouse click, and a text field matches both whichever way it
   was reached. Seeing which field is active is wanted however you got there. */
.input:focus {
  outline: none; border-color: var(--blue); background: #fff;
  box-shadow: 0 0 0 3px rgba(18,102,168,.18);
}

.status { margin-top: 12px; font-size: .85rem; line-height: 1.55; padding: 10px 12px; border-radius: 9px; }
.status.ok  { background: rgba(5,150,105,.08); color: #065f46; font-weight: 600; }
.status.err { background: rgba(220,38,38,.06); color: #991b1b; }

.sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,.06); font-size: .9rem; color: var(--text-mid); }
.sum-row:last-child { border-bottom: 0; }
.sum-row b { color: var(--navy); font-weight: 700; }
.sum-row.total { font-weight: 800; color: var(--navy); font-size: 1.02rem; }

.ref-box {
  font-family: monospace; font-size: 1.1rem; font-weight: 700; color: var(--navy);
  background: var(--off-white); border: 1.5px dashed rgba(0,0,0,.18);
  border-radius: 10px; padding: 11px; text-align: center; letter-spacing: .5px;
}

.note { border-radius: 11px; padding: 13px; font-size: .87rem; line-height: 1.6; margin-bottom: 14px; }
.note.warn { background: rgba(217,119,6,.07); border: 1px solid rgba(217,119,6,.25); color: #92400e; }
.note.ok   { background: rgba(5,150,105,.07); border: 1px solid rgba(5,150,105,.22); color: #065f46; }

/* The customer order timeline — the same list on the tracking page and in the
   account, previously defined byte-identically in both. */
.tl { list-style: none; padding: 0; margin: 6px 0 0; }
.tl li { position: relative; padding: 0 0 18px 26px; border-left: 2px solid rgba(0,0,0,.1); }
.tl li:last-child { border-left-color: transparent; padding-bottom: 0; }
.tl li::before { content: ''; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #cbd5e1; }
.tl li.done::before { background: #059669; }
.tl li.now::before  { background: #C9A227; box-shadow: 0 0 0 4px rgba(201,162,39,.18); }
.tl-status { font-weight: 700; color: var(--navy); font-size: .9rem; }
.tl-at { font-size: .75rem; color: var(--text-muted); }

/* ================================================================
   ICONS
   ----------------------------------------------------------------
   Sized in em and coloured by currentColor, so every slot that used
   to size an emoji with font-size keeps working untouched. Symbols
   live in assets/js/bdfx-icons.js.
   ================================================================ */
.ic {
  width: 1em; height: 1em; flex-shrink: 0;
  vertical-align: -0.135em;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.ic-lg { stroke-width: 1.5; }   /* large slots — thins the stroke back to optical parity */

/* Emoji carried their own colour, so a coloured tile could hold one and stay
   legible. These take currentColor, which on a dark tile is the inherited body
   navy — a navy stroke on a navy tile, drawn and invisible. Every tile whose
   background is dark names itself here. */
.sd-icon-wrap .ic, .cs-icon .ic, .adv-icon .ic, .pillar-icon .ic,
.ci-icon .ic, .circ-icon .ic, .blog-emoji .ic, .hsc-4 .ic,
.format-dl .ic, .btn-blue .ic, .whatsapp-btn .ic,
.form-success-icon .ic,
.service-card:hover .service-icon-wrap .ic {
  stroke: #FFFFFF;
}
/* The service tile is a pale tint at rest and solid blue on hover, so its icon
   has to travel with it rather than pick one end and be wrong at the other. */
.service-icon-wrap .ic { transition: stroke .25s ease; }

/* ================================================================
   TRUST STRIP
   ================================================================ */
.trust-strip { background: #FFFFFF; padding: 16px 0; border-bottom: 1px solid var(--border); }
.trust-strip-inner {
  display: flex; align-items: center;
  justify-content: center; gap: 36px; flex-wrap: wrap;
}
.trust-item { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 500; color: var(--text-mid); }
.trust-icon { font-size: 1.1rem; }
.trust-item strong { color: var(--navy); font-weight: 700; }

/* ================================================================
   FOOTER
   ================================================================ */
footer { background: var(--navy); color: rgba(255,255,255,0.56); padding: 52px 0 26px; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 36px; padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-brand-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1rem; color: #FFFFFF; margin-bottom: 3px; }
.footer-brand-logo {
  display: block;
  width: auto;
  height: 44px;
  max-width: 210px;
  object-fit: contain;
  object-position: left center;
  margin: 0 0 12px;
  filter: brightness(0) invert(1);
}
.footer-brand-sub  { font-size: 0.69rem; color: var(--gold-light); margin-bottom: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.footer-desc       { font-size: 0.8rem; line-height: 1.72; margin-bottom: 14px; }
.footer-rbi {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(200,147,10,0.1); border: 1px solid rgba(200,147,10,0.24);
  border-radius: 7px; padding: 6px 11px; font-size: 0.71rem; color: var(--gold-light); font-weight: 600;
}
.footer-col-title { font-family: 'Syne', sans-serif; font-weight: 700; color: #FFFFFF; margin-bottom: 12px; font-size: 0.82rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col ul li a { font-size: 0.79rem; color: rgba(255,255,255,0.48); transition: color 0.22s; }
.footer-col ul li a:hover { color: var(--gold-light); }
/* Statutory detail. Set quieter than the rest of the footer on purpose: it has
   to be findable and readable, not competing with the links above it. Kept
   above the copyright line so it reads as information rather than boilerplate. */
.footer-reg {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 20px; margin-top: 6px;
  display: flex; flex-direction: column; gap: 9px;
}
.footer-reg-line { font-size: 0.74rem; line-height: 1.65; color: rgba(255,255,255,0.42); max-width: 78ch; }
.footer-reg-line b { color: rgba(255,255,255,0.62); font-weight: 700; }
.footer-reg-line a { color: rgba(255,255,255,0.62); text-decoration: underline; text-underline-offset: 2px; }
.footer-reg-line a:hover { color: var(--gold-light); }

.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 20px; }
.footer-copy   { font-size: 0.76rem; }
.footer-legal  { display: flex; gap: 16px; }
.footer-legal a { font-size: 0.76rem; color: rgba(255,255,255,0.38); transition: color 0.22s; }
.footer-legal a:hover { color: var(--gold-light); }

/* ================================================================
   WHATSAPP FLOAT
   ================================================================ */
.whatsapp-float { position: fixed; bottom: 24px; right: 24px; z-index: 999; display: flex; align-items: center; gap: 10px; }
/* #128C7E is WhatsApp's darker brand green rather than the #25D366 light one.
   The white chat glyph only reached 1.98:1 on the light green, under the 3:1
   that WCAG 1.4.11 asks of a graphic carrying meaning; on this it clears it and
   the button still reads as WhatsApp at a glance. */
.whatsapp-btn {
  width: 54px; height: 54px; border-radius: 50%; background: #128C7E;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  cursor: pointer; border: none;
  box-shadow: 0 6px 24px rgba(37,211,102,0.42);
  transition: var(--transition); animation: wa-pulse 3s ease-in-out infinite;
}
.whatsapp-btn:hover { transform: scale(1.08); }
@keyframes wa-pulse {
  0%,100% { box-shadow: 0 6px 24px rgba(37,211,102,0.42), 0 0 0 0 rgba(37,211,102,0.4); }
  50%      { box-shadow: 0 6px 24px rgba(37,211,102,0.42), 0 0 0 10px rgba(37,211,102,0); }
}
/* A persistent, premium "Chat" pill beside the button — more inviting than a hover-only
   tooltip. Hidden on small screens (see mobile rules) to keep the corner clear. */
.whatsapp-tooltip {
  background: #FFFFFF; color: var(--navy); padding: 9px 15px;
  border-radius: 30px; font-size: 0.8rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(6,26,46,0.14); border: 1px solid rgba(0,0,0,0.06);
  opacity: 1; transform: none; transition: var(--transition); pointer-events: none;
}
.whatsapp-float:hover .whatsapp-tooltip { box-shadow: 0 10px 26px rgba(6,26,46,0.2); }

/* ================================================================
   MODAL
   ================================================================ */
/* A closed modal was hidden with opacity alone. pointer-events:none took care of
   the mouse, and nothing took care of the keyboard: the eight controls inside
   stayed in the tab order on every page carrying the markup. Tabbing through a
   page walked into an invisible form — focus vanished from the screen and you
   typed into fields you could not see. On terms, privacy-policy and 404 the
   modal has no trigger at all, so those fields were unreachable and still in
   the way.

   visibility:hidden takes a subtree out of the tab order. It is a discrete
   property, so it is delayed on the way out (stay visible for the fade, hide
   after) and immediate on the way in — which is why the two transitions differ
   rather than being one shorthand. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 2000; background: rgba(6,26,46,0.75);
  backdrop-filter: blur(6px); display: flex; align-items: center;
  justify-content: center; opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.28s, visibility 0s 0.28s; padding: 20px;
}
.modal-overlay.open {
  opacity: 1; pointer-events: all; visibility: visible;
  transition: opacity 0.28s, visibility 0s 0s;
}
.modal-box {
  background: #FFFFFF; border-radius: var(--radius-lg); padding: 32px 28px;
  width: 100%; max-width: 460px; transform: translateY(16px);
  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1);
  position: relative; max-height: 90vh; overflow-y: auto;
}
.modal-overlay.open .modal-box { transform: translateY(0); }
.modal-close {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px;
  border-radius: 7px; background: var(--off-white); border: none; cursor: pointer;
  font-size: 0.95rem; display: flex; align-items: center; justify-content: center;
  transition: var(--transition); color: var(--text-mid);
}
.modal-close:hover { background: var(--navy); color: white; }
.modal-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.25rem; color: var(--navy); margin-bottom: 5px; }
.modal-sub   { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 20px; }
.form-group  { margin-bottom: 13px; }
.form-label  { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-mid); margin-bottom: 5px; }
.form-input  {
  width: 100%; padding: 10px 13px; border: 1.5px solid rgba(0,0,0,0.11);
  border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 0.87rem;
  color: var(--text-dark); background: var(--off-white); transition: border-color 0.22s;
}
.form-input:focus { outline: none; border-color: var(--blue); background: white; }
.form-row    { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.btn-submit  {
  width: 100%; padding: 13px; background: var(--blue); border: none; border-radius: 9px;
  color: white; font-family: 'Syne', sans-serif; font-weight: 700;
  font-size: 0.9rem; cursor: pointer; transition: var(--transition); margin-top: 5px;
}
.btn-submit:hover { background: var(--navy); }
.form-success       { display: none; text-align: center; padding: 16px 0; }
.form-success-icon  { font-size: 2.6rem; margin-bottom: 10px; }
.form-success-title { font-family: 'Syne', sans-serif; font-weight: 700; color: var(--navy); margin-bottom: 6px; font-size: 1.1rem; }
.form-success-sub   { font-size: 0.83rem; color: var(--text-muted); }

/* ================================================================
   RATE LIVE BADGE
   ================================================================ */
.rate-live-badge {
  display: flex; align-items: center; gap: 5px; font-size: 0.7rem;
  color: #4ade80; font-weight: 600; background: rgba(74,222,128,0.1);
  padding: 3px 9px; border-radius: 20px; border: 1px solid rgba(74,222,128,0.2);
}
.rate-live-dot {
  width: 5px; height: 5px; border-radius: 50%; background: #4ade80;
  animation: pulse-dot 1.8s ease-in-out infinite; flex-shrink: 0;
}
.rate-live-badge.indicative { color: var(--gold-light); background: rgba(200,147,10,0.1); border-color: rgba(200,147,10,0.22); }
.rate-live-badge.indicative .rate-live-dot { background: var(--gold-light); animation: none; }
@keyframes pulse-dot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:0.7} }

/* ================================================================
   SCROLL REVEAL
   ================================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.58s ease, transform 0.58s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.40s; }
.reveal-delay-6 { transition-delay: 0.48s; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
  section { padding: 52px 0; }
  .page-hero { padding: 42px 0 36px; }
  .page-hero h1 { font-size: clamp(1.3rem, 5vw, 1.8rem); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:first-child { text-align: center; }
  .footer-rbi { justify-content: center; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
  .trust-strip-inner { gap: 14px; flex-wrap: wrap; justify-content: center; }
  .trust-item { font-size: 0.76rem; }
  .form-row { grid-template-columns: 1fr; }
}

/* ================================================================
   COMPREHENSIVE MOBILE OVERRIDES
   ================================================================ */

/* Page hero text stacking */
@media (max-width: 600px) {
  .page-hero { padding: 40px 0 34px; }
  .page-hero h1 { font-size: clamp(1.3rem, 5.5vw, 1.7rem); line-height: 1.2; }
  .page-hero p  { font-size: 0.88rem; }
  .page-hero-label { font-size: 0.68rem; padding: 4px 11px; }
  .breadcrumb { font-size: 0.72rem; margin-top: 14px; }
}

/* Trust strip: stack to 2-col on phone */
@media (max-width: 480px) {
  .trust-strip-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    justify-items: start;
    padding: 0 4px;
  }
}

/* Section headings */
@media (max-width: 600px) {
  .section-title { font-size: clamp(1.25rem, 5vw, 1.7rem); }
  .section-subtitle { font-size: 0.86rem; }
}

/* Footer: single column, centered */
@media (max-width: 600px) {
  footer { padding: 40px 0 22px; }
  .footer-grid { gap: 28px; }
  .footer-brand-logo { height: 38px; max-width: 180px; margin-left: auto; margin-right: auto; }
  .footer-brand-name { font-size: 0.92rem; }
  .footer-col-title { font-size: 0.8rem; }
  .footer-legal { flex-wrap: wrap; justify-content: center; gap: 12px; }
}

/* WhatsApp button: slightly smaller on mobile */
@media (max-width: 600px) {
  .whatsapp-float { bottom: 16px; right: 16px; }
  .whatsapp-btn { width: 48px; height: 48px; font-size: 1.3rem; }
  .whatsapp-tooltip { display: none; }
}

/* Modal: full-width on mobile */
@media (max-width: 480px) {
  .modal-box { padding: 24px 18px; }
  .modal-title { font-size: 1.1rem; }
  .form-row { grid-template-columns: 1fr; }
}

/* Ticker bar: slightly smaller text on mobile */
@media (max-width: 600px) {
  .ticker-item { gap: 5px; font-size: 0.74rem; }
  .ticker-currency { font-size: 0.72rem; }
}