/* ============================================================
   XC EXCHANGE — HOME PAGE (redesign)
   Scoped to Views/Home/Index.cshtml via _LayoutHome.cshtml.
   This stylesheet stands alone: the home layout does not load
   Bootstrap, normalize or style.min.css.
   ============================================================ */

/* ============================================================
   TOKENS — light is the base; dark redefines tokens only.
   ============================================================ */
:root {
  color-scheme: light dark;

  /* brand: logo blue #0000FF + logo amber #FFBF00.
     Neutrals are biased to the logo's 240deg hue so nothing reads as generic grey. */
  --ground:      #F1F2F9;
  --surface:     #FFFFFF;
  --surface-2:   #E9EBF7;
  --surface-3:   #DCDFF2;

  --ink:         #050A33;
  --body:        #3E4470;
  --muted:       #71769F;
  --line:        #D9DCEF;
  --line-strong: #BEC3E0;

  --brand:       #0000FF;
  --bar:         #0000FF;

  --navy:        #000A4D;
  --navy-deep:   #00062E;
  --on-navy:     #DDE1F7;
  --on-navy-dim: #8E96CC;
  --navy-line:   rgba(221,225,247,.15);

  --accent:      #8A6600;
  --accent-fill: #FFBF00;
  --accent-hot:  #FFD34D;
  --accent-ink:  #00062E;
  --accent-wash: rgba(255,191,0,.16);

  --up:          #0B7A52;
  --down:        #C33A2E;
  --up-wash:     rgba(11,122,82,.10);
  --down-wash:   rgba(195,58,46,.10);

  /* budget calculator: a single-hue ramp, so the breakdown reads as one measure */
  /* hero glass panel — reads over the banner photograph, not over the page ground */
  --glass:            linear-gradient(155deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  --glass-filter:     blur(5px) saturate(118%);
  --glass-line:       rgba(255,255,255,.7);
  --glass-ink:        #04072A;
  --glass-sub:        #2C3358;
  --glass-halo:       0 1px 3px rgba(255,255,255,.75), 0 0 8px rgba(255,255,255,.5);
  --glass-field:      #FFFFFF;
  --glass-field-ink:  #05082A;
  --glass-field-sub:  #565D80;
  --glass-field-line: rgba(4,7,42,.20);
  --glass-out:        rgba(0,0,255,.07);
  --glass-shadow:     0 32px 74px -34px rgba(0,10,77,.45), 0 2px 8px rgba(0,10,77,.08);

  --band-1: #3F44E3;
  --band-2: #7E84EF;
  --band-3: #B4B8F6;
  --band-4: #D8DBEC;

  --grid:  min(1240px, 100% - 3rem);
  --r:     4px;

  --f-display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --f-ui:      "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #04061C;
    --surface:     #0A0E33;
    --surface-2:   #111746;
    --surface-3:   #1A2160;

    --ink:         #E9EBFB;
    --body:        #A6ADD8;
    --muted:       #7278A6;
    --line:        #1A2055;
    --line-strong: #2A3277;

    --brand:       #6E7BFF;
    --bar:         #6E7BFF;

    --navy:        #00062E;
    --navy-deep:   #02041A;
    --on-navy:     #DDE1F7;
    --on-navy-dim: #8E96CC;
    --navy-line:   rgba(221,225,247,.13);

    --accent:      #FFCB33;
    --accent-fill: #FFBF00;
    --accent-hot:  #FFD75E;
    --accent-ink:  #00062E;
    --accent-wash: rgba(255,191,0,.18);

    --up:          #35B183;
    --down:        #E2685C;
    --up-wash:     rgba(53,177,131,.14);
    --down-wash:   rgba(226,104,92,.14);

    --glass:            linear-gradient(155deg, rgba(4,6,28,.22), rgba(4,6,28,.12));
    --glass-filter:     blur(6px) saturate(115%) brightness(.62);
    --glass-line:       rgba(221,225,247,.30);
    --glass-ink:        #FFFFFF;
    --glass-sub:        #DFE4FA;
    --glass-halo:       0 1px 2px rgba(0,0,0,.55);
    --glass-field:      #FFFFFF;
    --glass-field-ink:  #05082A;
    --glass-field-sub:  #565D80;
    --glass-field-line: rgba(4,7,42,.20);
    --glass-out:        rgba(124,134,240,.20);
    --glass-shadow:     0 32px 74px -34px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.45);

    --band-1: #7C86F0;
    --band-2: #5A63C4;
    --band-3: #3A4290;
    --band-4: #38407F;

  }
}

:root[data-theme="dark"] {
  --ground:      #04061C;
  --surface:     #0A0E33;
  --surface-2:   #111746;
  --surface-3:   #1A2160;

  --ink:         #E9EBFB;
  --body:        #A6ADD8;
  --muted:       #7278A6;
  --line:        #1A2055;
  --line-strong: #2A3277;

  --brand:       #6E7BFF;
  --bar:         #6E7BFF;

  --navy:        #00062E;
  --navy-deep:   #02041A;
  --on-navy:     #DDE1F7;
  --on-navy-dim: #8E96CC;
  --navy-line:   rgba(221,225,247,.13);

  --accent:      #FFCB33;
  --accent-fill: #FFBF00;
  --accent-hot:  #FFD75E;
  --accent-ink:  #00062E;
  --accent-wash: rgba(255,191,0,.18);

  --up:          #35B183;
  --down:        #E2685C;
  --up-wash:     rgba(53,177,131,.14);
  --down-wash:   rgba(226,104,92,.14);

  --glass:            linear-gradient(155deg, rgba(4,6,28,.22), rgba(4,6,28,.12));
  --glass-filter:     blur(6px) saturate(115%) brightness(.62);
  --glass-line:       rgba(221,225,247,.30);
  --glass-ink:        #FFFFFF;
  --glass-sub:        #DFE4FA;
  --glass-halo:       0 1px 2px rgba(0,0,0,.55);
  --glass-field:      #FFFFFF;
  --glass-field-ink:  #05082A;
  --glass-field-sub:  #565D80;
  --glass-field-line: rgba(4,7,42,.20);
  --glass-out:        rgba(124,134,240,.20);
  --glass-shadow:     0 32px 74px -34px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.45);

  --band-1: #7C86F0;
  --band-2: #5A63C4;
  --band-3: #3A4290;
  --band-4: #38407F;

}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--f-ui);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -.012em;
  text-wrap: balance;
}
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; }

.wrap { width: var(--grid); margin-inline: auto; }

.eyebrow {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* controller reference tag — encodes the MVC route each block maps to */
.ref {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 2px 6px;
  white-space: nowrap;
}
.ref b { font-weight: 600; color: var(--body); }

.num { font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- buttons ---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--f-ui);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .005em;
  padding: .68rem 1.15rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-accent {
  background: var(--accent-fill);
  color: var(--accent-ink);
}
.btn-accent:hover { background: var(--accent-hot); }
.btn-ghost {
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--muted); }
.btn-brand {
  background: var(--brand);
  color: #FFF;
}
.btn-brand:hover { background: var(--ink); }
.btn-quiet { color: var(--body); padding-inline: .6rem; }
.btn-quiet:hover { color: var(--ink); }
.btn-sm { padding: .45rem .8rem; font-size: 12.5px; }

/* ============================================================
   HEADER

   A 72px bar that condenses to 60px once content starts passing
   under it (.stuck, set by xc-home_v1.js). The old bar was a flat
   96px with a 64px logo -- upscaled past its 240x60 intrinsic size,
   and a permanent 13% bite out of the viewport.

   One indicator mechanism carries every nav state: a 2px brand-blue rule
   under the item, scaled out at rest, in on hover, open and current.
   It replaces the grey hover pill, which read as a blocky strip on
   items sitting 9px apart.
   ============================================================ */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  /* the bar height rides a grid row, not a height transition: grid-template-rows
     interpolates without the per-frame layout thrash animating height causes */
  display: grid;
  grid-template-rows: 72px;
  transition:
    grid-template-rows .3s cubic-bezier(.3, .7, .2, 1),
    background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* the bar acknowledges content moving under it */
.masthead.stuck {
  grid-template-rows: 60px;
  background: color-mix(in srgb, var(--ground) 95%, transparent);
  border-bottom-color: var(--line-strong);
  box-shadow: 0 18px 40px -30px rgba(0, 10, 77, .5), 0 1px 2px rgba(0, 10, 77, .04);
}
.masthead-in {
  display: flex;
  align-items: center;
  gap: clamp(.7rem, 1.8vw, 1.5rem);
  height: 100%;
  min-width: 0;
}

/* original Xc Exchange logo, light + white variants. 44px keeps it inside
   its 240x60 intrinsic size instead of upscaling to 64px. */
.logo { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.logo img {
  display: block;
  height: 44px;
  width: auto;
  /* scaled, not resized -- transform stays on the compositor */
  transform-origin: left center;
  transition: transform .3s cubic-bezier(.3, .7, .2, 1);
}
.masthead.stuck .logo img { transform: scale(.818); }
.logo .on-dark { display: none; }
:root[data-theme="dark"] .logo .on-light { display: none; }
:root[data-theme="dark"] .logo .on-dark  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo .on-light { display: none; }
  :root:not([data-theme="light"]) .logo .on-dark  { display: block; }
}

.mainnav { display: flex; align-items: center; gap: .2rem; margin-right: auto; }
.mainnav > li { position: relative; list-style: none; }
.mainnav > li > a, .mainnav > li > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  font-family: var(--f-ui);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--body);
  text-decoration: none;
  padding: .55rem .8rem;
  border: 0;
  background: none;
  border-radius: var(--r);
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s ease;
}
/* the single indicator: one rule, four states */
.mainnav > li > a::after,
.mainnav > li > button::after {
  content: "";
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: .28rem;
  height: 2px;
  border-radius: 2px;
  /* --brand, not --accent-fill: amber is only 1.51:1 on this bar, and a
     state indicator needs 3:1 */
  background: var(--brand);
  transform: scaleX(0);
  transition: transform .24s cubic-bezier(.3, .7, .2, 1);
}
.mainnav > li > a:hover, .mainnav > li > button:hover,
.mainnav > li.open > button { color: var(--ink); }
.mainnav > li > a:hover::after,
.mainnav > li > button:hover::after,
.mainnav > li.open > button::after { transform: scaleX(1); }

.mainnav > li > a[aria-current] { color: var(--ink); font-weight: 600; }
.mainnav > li > a[aria-current]::after { transform: scaleX(1); }

.mainnav > li > a:focus-visible, .mainnav > li > button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.mainnav .caret { width: 11px; height: 11px; opacity: .7; transition: transform .2s ease; }
.mainnav > li.open .caret { transform: rotate(180deg); }

.submenu {
  position: absolute;
  top: calc(100% + .45rem);
  left: 0;
  min-width: 218px;
  margin: 0;
  padding: .45rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  /* a floating panel needs elevation -- this one had none at all */
  box-shadow: 0 28px 56px -28px rgba(0, 10, 77, .45), 0 2px 6px rgba(0, 10, 77, .08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.985);
  transform-origin: top left;
  transition: opacity .18s ease, transform .22s cubic-bezier(.3, .7, .2, 1), visibility .22s;
  z-index: 50;
}
.mainnav > li.open .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a {
  display: block;
  padding: .55rem .7rem;
  border-radius: var(--r);
  font-size: 14px;
  color: var(--body);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .16s ease, color .16s ease;
}
.submenu a:hover { background: var(--surface-2); color: var(--ink); }
.submenu a:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.masthead-actions { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }

/* signed-in account menu -- not in the artifact, which only ever shows the
   logged-out state, but the site has one and the header must keep it. */
.acct { position: relative; }
.acct > button { display: inline-flex; align-items: center; gap: .35rem; }
.acct .acct-menu { left: auto; right: 0; min-width: 190px; transform-origin: top right; }
.acct.open .acct-menu { opacity: 1; visibility: visible; transform: none; }
.acct-menu form { margin: 0; }
.acct-menu button[type="submit"] {
  display: block;
  width: 100%;
  padding: .55rem .7rem;
  border: 0;
  border-radius: var(--r);
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--body);
  text-align: left;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.acct-menu button[type="submit"]:hover { background: var(--surface-2); color: var(--ink); }

.navtoggle {
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  background: none;
  border-radius: var(--r);
  padding: .5rem .62rem;
  cursor: pointer;
  color: var(--ink);
  transition: background-color .16s ease, border-color .16s ease;
}
.navtoggle:hover { background: var(--surface-2); border-color: var(--muted); }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: 0 0 3.5rem; }
/* the hero runs wider than the rest of the page: tighter gutters here only */
.hero .wrap { width: min(1600px, 100% - 2rem); }

/* full-bleed partnership banner — whole image, edge to edge, never cropped */
.hero-banner {
  position: relative;
  width: 100%;
  background: #FFF;
  border-bottom: 1px solid var(--line);
}
/* the three cards sit on the banner's white panel, directly under the baked subline
   (percentages so they stay locked to the artwork as the image scales) */
.promise-overlay {
  position: absolute;
  left: 4.35%;
  top: 67%;
  width: 45%;
  max-width: 760px;
}
.hero-banner img {
  display: block;
  width: 100%;
  height: auto;
  /* pulled a little further down than the artwork's own 1280x426 —
     the stretch is uniform, so the % overlays stay locked to it */
  aspect-ratio: 2400 / 930;
  object-fit: fill;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* five promise cards: three across, then two on a second row — the last one
   spans the spare column so the grid stays flush on both rows */
.promise {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.promise li:nth-child(5) { grid-column: span 2; }
.promise li {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: opacity .6s ease, transform .45s cubic-bezier(.22,.75,.2,1),
              border-color .22s ease, background-color .22s ease;
}
/* staggered reveal */
.promise li:nth-child(2) { transition-delay: .11s; }
.promise li:nth-child(3) { transition-delay: .22s; }
.promise li:nth-child(4) { transition-delay: .33s; }
.promise li:nth-child(5) { transition-delay: .44s; }
.promise li:hover { transition-delay: 0s; }

/* one amber wipe across each card as it arrives */
.promise li::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 18%, var(--accent-wash) 50%, transparent 82%);
  transform: translateX(-130%);
}
.promise li.in::after { animation: sweep 1.15s cubic-bezier(.32,.72,.2,1) .15s forwards; }
.promise li:nth-child(2).in::after { animation-delay: .26s; }
.promise li:nth-child(3).in::after { animation-delay: .37s; }
.promise li:nth-child(4).in::after { animation-delay: .48s; }
.promise li:nth-child(5).in::after { animation-delay: .59s; }
@keyframes sweep { to { transform: translateX(130%); } }

.promise .ic {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: var(--accent-wash);
  color: var(--accent);
  transition: background-color .22s ease, color .22s ease;
}
.promise .ic svg { width: 22px; height: 22px; transform-origin: 50% 50%; overflow: visible; }

/* icons draw themselves in */
.promise .ic svg > * { stroke-dasharray: 260; stroke-dashoffset: 260; }
.promise li.in .ic svg > * { animation: drawIc 1s cubic-bezier(.3,.7,.2,1) .3s forwards; }
.promise li:nth-child(2).in .ic svg > * { animation-delay: .41s; }
.promise li:nth-child(3).in .ic svg > * { animation-delay: .52s; }
.promise li:nth-child(4).in .ic svg > * { animation-delay: .63s; }
.promise li:nth-child(5).in .ic svg > * { animation-delay: .74s; }
@keyframes drawIc { to { stroke-dashoffset: 0; } }

/* hover: lift the card, fill the tile, give each icon its own motion */
.promise li.rise.in:hover {
  transform: translateY(-3px);
  border-color: var(--accent-fill);
}
.promise li:hover .ic { background: var(--accent-fill); color: var(--accent-ink); }
.promise li:nth-child(1):hover .ic svg { animation: bob 1.3s ease-in-out infinite; }
/* the map holds still and breathes — spinning a continent reads as a globe */
.promise li:nth-child(2):hover .ic svg { animation: swell 1.6s ease-in-out infinite; }
.promise li:nth-child(3):hover .ic svg { animation: nudge 1.3s ease-in-out infinite; }
.promise li:nth-child(4):hover .ic svg { animation: bob 1.3s ease-in-out infinite; }
.promise li:nth-child(5):hover .ic svg { animation: drop 1.4s ease-in-out infinite; }
@keyframes bob   { 50% { transform: translateY(-2.5px); } }
@keyframes swell { 50% { transform: scale(1.09); } }
@keyframes nudge { 50% { transform: translateX(2.5px); } }
@keyframes drop  { 40% { transform: translateY(-3px); } 70% { transform: translateY(0); } }

.promise .t {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.4;
}

.fx-col { margin-top: 1.5rem; }
/* ---- the order card: floats over the banner and breaks past its
        bottom edge, so the hero and the branches below share it ---- */
@media (min-width: 1360px) {
  /* the banner runs straight into the branches section — no page-ground
     strip under the image at the width where the card floats free */
  .hero { padding-bottom: 0; }
  .hero .fx-col {
    position: absolute;
    z-index: 4;
    right: 8.5%;
    bottom: -6.5rem;
    width: 45%;
    min-width: 25rem;
    max-width: 35rem;
    margin: 0;
  }
  /* room for the part of the card that hangs into the section below;
     the element selector keeps it ahead of the .locs base rule below */
  section.locs { padding-top: 11.5rem; }
}

.fxpanel {
  padding: 1.9rem 1.9rem 2rem;
  border-radius: 20px;
  /* translucent, but the edge of the card is unmistakable */
  background: linear-gradient(160deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .13));
  border: 1.5px solid rgba(255, 255, 255, .78);
  box-shadow:
    0 1px 2px rgba(0, 10, 77, .06),
    0 12px 28px -14px rgba(0, 10, 77, .28),
    0 40px 80px -34px rgba(0, 10, 77, .55),
    inset 0 1px 0 rgba(255, 255, 255, .48);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .fxpanel { background: rgba(255, 255, 255, .62); }
}

/* card head: title plus a live-rate marker */
.fxpanel-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.35rem;
  border-bottom: 1px solid rgba(4, 7, 42, .16);
}
.fxpanel-h {
  font-family: var(--f-display);
  text-shadow: 0 1px 3px rgba(255, 255, 255, .8), 0 0 10px rgba(255, 255, 255, .6);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #05082A;
  margin: 0;
  padding: 0;
  border: 0;
  /* the panel is thinner now — the halo keeps the title off the photograph */
}
.fxlive {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-left: auto;
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #565D80;
  text-shadow: 0 1px 3px rgba(255, 255, 255, .85);
  white-space: nowrap;
}
.fxlive i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--up);
  animation: pulse 2s ease-out infinite;
}

/* ---- fields: white cards with the label sitting above the value ---- */
.fxbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .85rem;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.fxcell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .35rem;
  min-width: 0;
  padding: 1.15rem 1.25rem 1.2rem;
  background: #FFFFFF;
  border: 1px solid rgba(4, 7, 42, .16);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(4, 7, 42, .09), 0 10px 24px -14px rgba(0, 10, 77, .45);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.fxcell:hover { border-color: rgba(4, 7, 42, .3); }
.fxcell:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(0, 0, 255, .12);
}
.fx-out {
  background: #FFFFFF;
  border-color: rgba(4, 7, 42, .16);
}

.fxlab {
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;

  color: #565D80;
  text-shadow: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fxval {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  min-width: 0;
}
.fxval input, .fxval select {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--f-ui);
  font-size: clamp(21px, 1.55vw, 25px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.15;
  color: #05082A;
  text-shadow: none;
  font-variant-numeric: tabular-nums;
}
.fxval input:focus, .fxval select:focus { outline: none; }
.fxval select {
  cursor: pointer;
  font-family: var(--f-ui);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.005em;
}
.fx-out input { color: #05082A; }
.fxcur {
  flex: 0 0 auto;
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #565D80;
}
.fxflag {
  flex: 0 0 auto;
  align-self: center;
  display: block;
  line-height: 0;
}
.fxflag svg { display: block; border-radius: 3px; }

/* rate line, between the fields and the button */
.fxfoot {
  display: grid;
  gap: .2rem;
  margin: .35rem 0 .4rem;
  padding: 0 .2rem;
}
.fxrate, .fxnote { text-shadow: 0 1px 3px rgba(255, 255, 255, .85), 0 0 10px rgba(255, 255, 255, .6); }
.fxrate {
  font-family: var(--f-ui);
  font-size: clamp(20px, 1.65vw, 24px);
  /* the whole quote reads bold, not just the figure */
  font-weight: 700;
  letter-spacing: -.01em;
  color: #05082A;
  white-space: nowrap;
}
.fxrate b { color: #05082A; font-weight: 700; }
.fxnote { font-size: 13px; font-weight: 500; color: #3F466E; }

/* the CTA carries the card: a lit amber slab */
.fxgo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid rgba(0, 6, 46, .14);
  border-radius: 12px;
  margin-top: .4rem;
  background: linear-gradient(180deg, #FFD35E 0%, #FFBF00 58%, #F3B500 100%);
  color: var(--accent-ink);
  font-family: var(--f-ui);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 16px 32px -16px rgba(163, 120, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .62);
  transition: background .2s ease, box-shadow .2s ease, gap .2s ease, transform .2s ease;
}
.fxgo:hover {
  background: linear-gradient(180deg, #FFDE86 0%, #FFC824 58%, #FFBF00 100%);
  box-shadow: 0 22px 42px -16px rgba(163, 120, 0, 1), inset 0 1px 0 rgba(255, 255, 255, .78);
  gap: 1rem;
  transform: translateY(-1px);
}
.fxgo:active { transform: none; box-shadow: 0 8px 18px -12px rgba(163, 120, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .5); }

@media (max-width: 1359px) {
  /* below the overlap breakpoint the card sits under the banner */
  .fx-col { max-width: 34rem; margin: 1.75rem auto 0; }
  .fxpanel { border-radius: 16px; }
}

/* the banner is too short to host both the promise cards and the card,
   so between these widths the cards return to normal flow above it */
@media (min-width: 1081px) and (max-width: 1359px) {
  .hero { padding-bottom: 3.5rem; }
  .promise-overlay {
    position: static;
    width: min(1600px, 100% - 2rem);
    max-width: none;
    margin: 1.5rem auto 0;
  }
}


.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 2.75rem;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.hero-facts > div { background: var(--ground); padding: 1.1rem 1.25rem 1.1rem 0; }
.hero-facts > div + div { padding-left: 1.25rem; }
.hero-facts dt {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-facts dd {
  margin: .35rem 0 0;
  font-family: var(--f-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hero-facts dd small {
  display: block;
  font-family: var(--f-ui);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
}

/* ---- change chips (rates grid) --------------------------- */
.delta {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: 2px;
}
.delta.up   { color: var(--up);   background: var(--up-wash); }
.delta.down { color: var(--down); background: var(--down-wash); }
/* the move is not known -- shown as an em dash, never as +0.00% */
.delta.flat { color: var(--muted); background: transparent; }


/* ============================================================
   GLOBAL TRADE BAND
   ============================================================ */
.band {
  background: var(--navy-deep);
  color: var(--on-navy-dim);
  border-block: 1px solid var(--navy-line);
  overflow: hidden;
}
.band-in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr);
  gap: 3rem;
  align-items: center;
  padding: 3.6rem 0;
}
/* a touch tighter than the rest of the page, so the map has a little more room */
.band .wrap { width: min(1330px, 100% - 2.75rem); }
.band .eyebrow { color: var(--on-navy-dim); }
/* the full trade figure, ticking in real time — every digit shown, never abbreviated */
.band-figure {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.85rem, 3.3vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--accent-hot);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  margin: .85rem 0 .1rem;
  white-space: nowrap;
}
.band-figure .sym { font-size: .62em; vertical-align: .1em; margin-right: .06em; color: var(--on-navy); }
.band-figure .cents { font-size: .58em; color: var(--accent-fill); }
.band-figure .unit {
  display: block;
  white-space: normal;
  font-size: .42em;
  letter-spacing: -.005em;
  color: var(--on-navy);
  font-weight: 600;
  margin-top: .45rem;
}
.band-live {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.1rem;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--on-navy);
}
.band-live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-hot);
  animation: pulse 2s ease-out infinite;
}
.band-copy { font-size: 14.5px; max-width: 40ch; margin-top: 1rem; line-height: 1.6; }
.band-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--navy-line);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.band-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.dot { width: 6px; height: 6px; border-radius: 50%; }
.dot.hub { background: var(--accent-hot); }
.dot.land { background: #3E48C4; }

.map-holder { position: relative; }
.map-holder canvas { display: block; width: 100%; height: auto; }
.map-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.25rem;
}
.map-tag {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--on-navy);
  border: 1px solid var(--navy-line);
  border-radius: 2px;
  padding: 3px 7px;
  font-variant-numeric: tabular-nums;
}
.map-tag b { color: var(--accent-hot); font-weight: 600; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: 4.5rem 0; }
.section-head {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2.25rem;
  border-bottom: 1px solid var(--line);
}
.section-head h2 { font-size: clamp(1.55rem, 2.3vw, 2rem); font-weight: 600; }
.section-head .eyebrow { display: block; margin-bottom: .5rem; }
.section-head p { font-size: 14.5px; max-width: 44ch; margin-left: auto; }

/* ---- travel posters: three tall photographic cards -------- */
.posters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.poster {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 3 / 4;
  min-height: 25rem;
  overflow: hidden;
  border-radius: var(--r);
  text-decoration: none;
  isolation: isolate;
  background: var(--navy-deep);
}
.poster img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s cubic-bezier(.19,.7,.2,1), filter .6s ease;
  filter: saturate(.78);
}
.poster:hover img { transform: scale(1.08); filter: saturate(1); }

/* the gradient does the legibility work, so the type never needs a box */
.poster .veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(0,6,46,.94) 0%,
    rgba(0,6,46,.80) 26%,
    rgba(0,6,46,.34) 55%,
    rgba(0,6,46,.10) 78%,
    rgba(0,6,46,.30) 100%);
  transition: opacity .6s ease;
}
.poster:hover .veil { opacity: .88; }

.poster-txt {
  position: relative;
  z-index: 2;
  display: block;
  padding: 1.75rem 1.6rem 1.6rem;
  transform: translateY(0);
  transition: transform .45s cubic-bezier(.22,.75,.2,1);
}
.poster:hover .poster-txt { transform: translateY(-4px); }

/* drawn at full length and scaled down, so the hover runs on the
   compositor instead of re-laying out the rule every frame */
.poster .rule {
  display: block;
  width: 72px; height: 2px;
  background: var(--accent-fill);
  margin-bottom: 1rem;
  transform: scaleX(.4167);
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.22,.75,.2,1);
}
.poster:hover .rule { transform: scaleX(1); }

.poster .kicker {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--accent-hot);
}
.poster .ttl {
  display: block;
  margin-top: .6rem;
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 1.45vw, 1.42rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.014em;
  color: #FFF;
  text-wrap: balance;
}
.poster .more {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.15rem;
  font-family: var(--f-ui);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #FFF;
}
.poster .arw {
  display: grid;
  place-items: center;
  width: 23px; height: 23px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.poster:hover .arw {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--accent-ink);
  transform: translateX(3px);
}

.poster .ref.corner {
  position: absolute;
  z-index: 3;
  top: 1rem; right: 1rem;
  background: rgba(0,6,46,.5);
  border-color: rgba(221,225,247,.22);
  color: var(--on-navy-dim);
  backdrop-filter: blur(6px);
}
.poster .ref.corner b { color: var(--on-navy); }

/* an amber hairline seals the bottom edge on hover */
.poster::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  z-index: 3;
  height: 3px; width: 100%;
  background: var(--accent-fill);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s cubic-bezier(.22,.75,.2,1);
}
.poster:hover::after { transform: scaleX(1); }

@media (max-width: 940px) {
  .posters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .poster { aspect-ratio: 4 / 5; min-height: 22rem; }
}
@media (max-width: 600px) {
  .posters { grid-template-columns: minmax(0, 1fr); }
  /* An aspect-ratio plus a min-height also sets a min-WIDTH
     (min-height x ratio). At 4/3 that floor was 405px, wider than a
     390px phone, and it forced the entire page to scroll sideways.
     Let the column set the width and keep the height as the floor. */
  .poster { aspect-ratio: auto; min-height: 19rem; }
}

/* eSIM: full-width panel above the cards */
.esim-wide {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2.5rem;
  margin-bottom: 1.75rem;
  padding: 1.5rem 1.75rem;
  border-radius: var(--r);
  border: 1px solid var(--navy-line);
  background:
    radial-gradient(90% 180% at 88% 0%, rgba(255,191,0,.15) 0%, rgba(255,191,0,0) 58%),
    var(--navy-deep);
}
.esim-wide .kicker { color: var(--accent-hot); }
.esim-h {
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.022em;
  color: #FFF;
  margin-top: .45rem;
}
.esim-p { font-size: 13.5px; color: var(--on-navy-dim); margin-top: .35rem; max-width: 44ch; }
.esim-btns { display: flex; flex-wrap: wrap; gap: .6rem; margin-left: auto; }
.btn-onnavy { color: var(--on-navy); border-color: rgba(221,225,247,.32); }
.btn-onnavy:hover { background: rgba(221,225,247,.1); border-color: var(--on-navy); }
.esim-wide .ref.corner { background: rgba(255,255,255,.08); color: var(--on-navy-dim); }
.esim-wide .ref.corner b { color: var(--on-navy); }

@media (max-width: 700px) {
  .esim-btns { margin-left: 0; }
  .esim-btns .btn { flex: 1 1 auto; }
  .esim-wide .ref.corner { position: static; align-self: flex-start; }
}
/* ---- shared field layout -------------------------------- */
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* text and select fields */
.control {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .62rem .8rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.control:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,0,255,.12); }
.control input, .control select {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0;
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.control input:focus, .control select:focus { outline: none; }
.control select { cursor: pointer; font-family: var(--f-ui); font-size: 13px; }
.control .cur {
  flex: 0 0 auto;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  color: var(--muted);
}

/* ---- budget calculator ----------------------------------- */
.bcalc {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 1.5rem;
  align-items: start;
}
.bc-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.bc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1.75rem;
  padding: 1.75rem;
}
.bc-span { grid-column: 1 / -1; }
.bc-field { display: grid; align-content: start; gap: .5rem; }
.bc-lab {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.bc-out {
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--body);
  margin-top: .1rem;
}
.bc-out span:first-child { color: var(--ink); font-weight: 600; }

.bc-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .85rem 1.25rem;
  padding: 1.1rem 1.75rem;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.bc-note { font-size: 12px; color: var(--muted); margin-left: auto; }

/* segmented radio group — the legacy btn-group-toggle */
.segmented {
  display: flex;
  background: var(--ground);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 2px;
  gap: 2px;
}
.segmented label {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .35rem;
  border-radius: 3px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--body);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.segmented input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segmented label:hover { color: var(--ink); }
.segmented label:has(input:checked) {
  background: var(--surface);
  color: var(--brand);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--brand);
}
.segmented label:has(input:focus-visible) { outline: 2px solid var(--accent-fill); outline-offset: 1px; }

/* range sliders */
.rSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 3px;
  background: var(--surface-3);
  outline: none;
  margin: .5rem 0 0;
}
.rSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line-strong);
  cursor: pointer;
}
.rSlider::-moz-range-thumb {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid var(--surface);
  cursor: pointer;
}

/* result panel */
.bc-result {
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
}
.bc-figure {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-top: .7rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 2.9vw, 2.5rem);
  letter-spacing: -.028em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bc-figure #bcCode { font-size: .46em; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.bc-alt {
  margin-top: .5rem;
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--muted);
}
.bc-meta {
  margin-top: 1.1rem;
  padding-top: .95rem;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--body);
}
/* destination chips */
/* ============================================================
   SEARCHABLE SELECT
   Drawn over a native <select>, which stays in the DOM hidden.
   Used by the hero currency picker and the budget destination.
   ============================================================ */
.combo { position: relative; display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1 1 auto; }
.combo-native { display: none !important; }
.combo-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-overflow: ellipsis;
}
.combo-input:focus { outline: none; }
.combo-input::placeholder { color: var(--muted); font-weight: 400; }
.combo-icon { display: flex; flex: 0 0 auto; }
/* Flags come either as an inline SVG or as a 100px-wide country PNG, and
   both land inside a flex row. Pin the box on every one of them -- an
   unsized PNG here blows the row open and pushes the label out of view. */
.combo-icon > img,
.combo-icon > svg,
.combo-icon > .ccy-flag-blank,
.combo-list li > img,
.combo-list li > svg,
.combo-list li > .ccy-flag-blank {
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 14px;
  min-width: 20px;
  max-width: 20px;
  object-fit: cover;
  border-radius: 2px;
}
/* stands in for a flag whose PNG is missing, so the row keeps its rhythm */
.combo-icon > .ccy-flag-blank,
.combo-list li > .ccy-flag-blank { background: var(--surface-3); }
.combo-caret {
  flex: 0 0 auto;
  display: flex;
  color: var(--muted);
  cursor: pointer;
  transition: transform .18s ease, color .18s ease;
}
.combo.open .combo-caret { transform: rotate(180deg); color: var(--brand); }

.combo-list {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  right: 0;
  z-index: 60;
  margin: 0;
  padding: .3rem;
  list-style: none;
  max-height: 17rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: 0 18px 44px -20px rgba(0, 10, 77, .38);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.combo.open .combo-list { opacity: 1; visibility: visible; transform: none; }
.combo-list li {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .6rem;
  border-radius: 3px;
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--body);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.combo-list li span { overflow: hidden; text-overflow: ellipsis; }
.combo-list li:hover, .combo-list li.on { background: var(--surface-2); color: var(--ink); }
.combo-list li[aria-selected="true"] { color: var(--brand); font-weight: 600; }
.combo-list li[aria-selected="true"]::after {
  content: "";
  margin-left: auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
}
.combo-empty {
  padding: .6rem;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: default;
}

/* hero panel: the combo sits on the glass field, so it inherits its type */
.fxval .combo { align-items: baseline; }
.fxval .combo .combo-input {
  font-family: var(--f-ui);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--glass-field-ink);
}
.fxval .combo .combo-icon { align-self: center; }
.fxval .combo .combo-caret { align-self: center; }
.fxval .combo-list { left: -.4rem; right: -.4rem; }

/* budget panel: a bordered control, matching the other bc fields */
.bc-combo {
  padding: .55rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.bc-combo:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 0, 255, .08); }
.bc-combo .combo-input { font-size: 14.5px; font-weight: 500; color: var(--ink); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .7rem .4rem .5rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: var(--ground);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--body);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.chip svg { display: block; border-radius: 2px; filter: saturate(.35); transition: filter .2s ease; }
.chip:hover svg, .chip[aria-checked="true"] svg { filter: none; }
.chip:hover { border-color: var(--muted); color: var(--ink); transform: translateY(-1px); }
.chip[aria-checked="true"] {
  background: var(--surface);
  border-color: var(--brand);
  color: var(--brand);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--brand);
}

/* traveller glyphs multiply with the slider */
.glyphs { display: flex; gap: 3px; margin-top: .1rem; min-height: 14px; }
.glyphs i {
  width: 6px; height: 13px;
  border-radius: 3px 3px 1px 1px;
  background: var(--brand);
  transform-origin: bottom center;
  animation: pop .32s cubic-bezier(.22,1,.36,1) backwards;
}
.glyphs i.dim { background: var(--surface-3); }
@keyframes pop { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

/* live area chart */
.bc-chart { position: relative; margin-top: 1.35rem; }
.bc-chart-lab {
  display: block;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .55rem;
}
#bcChart {
  display: block;
  width: 100%;
  height: 150px;
  overflow: visible;
  cursor: crosshair;
}
.bc-tip {
  position: absolute;
  top: 1.4rem;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity .14s ease;
  background: var(--navy-deep);
  color: var(--on-navy);
  border-radius: 3px;
  padding: .35rem .55rem;
  font-family: var(--f-mono);
  font-size: 10.5px;
  line-height: 1.45;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  z-index: 4;
}
.bc-tip.on { opacity: 1; }
.bc-tip b { color: var(--on-navy); font-weight: 600; }

/* proportion bar */
.bc-prop {
  display: flex;
  height: 8px;
  margin-top: 1.15rem;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-2);
}
.bc-prop span {
  display: block;
  height: 100%;
  transition: flex-grow .55s cubic-bezier(.22,.75,.2,1);
}

/* the figure flashes when a choice changes */
.bc-figure.bump { animation: bump .45s ease; }
@keyframes bump {
  40% { transform: translateY(-3px); }
  100% { transform: none; }
}
.bc-result.glow { box-shadow: inset 0 0 0 1px var(--line-strong); }

.bc-legend { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .4rem; }
.bc-legend li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--body);
}
.bc-legend i { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.bc-legend b { margin-left: auto; color: var(--ink); font-weight: 600; }
.bc-cta { margin-top: 1.4rem; letter-spacing: .06em; }

@media (max-width: 1080px) {
  .bcalc { grid-template-columns: minmax(0, 1fr); }
  .bc-result { position: static; }
}
/* the calculator sits a little further in from the page edges than the rest */
@media (min-width: 700px) {
  #budget.wrap { width: min(1240px, 100% - 6rem); }
}

@media (max-width: 620px) {
  .bc-grid { grid-template-columns: minmax(0, 1fr); padding: 1.35rem; }
  .bc-actions { padding: 1.1rem 1.35rem; }
  .bc-note { margin-left: 0; }
}

/* On a phone the chart header stacks: the picker takes its own row and the
   "AUD (Australian dollar) to" label is allowed to wrap. Left nowrap it
   measured 406px and was the widest thing on the page. */
@media (max-width: 620px) {
  .chart-head { gap: .9rem 1rem; padding: 1.1rem 1.15rem; }
  .chart-id { flex-wrap: wrap; row-gap: .35rem; }
  .graph-pick { margin-left: 0; width: 100%; flex-wrap: wrap; row-gap: .5rem; }
  .graph-header { white-space: normal; }
  .graph-pick .control { flex: 1 1 11rem; }
  .ranges { width: 100%; }
  .ranges button { flex: 1 1 auto; }
}
/* ---- rates table ---------------------------------------- */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow-x: auto;
}
table.rates { width: 100%; border-collapse: collapse; min-width: 760px; }
table.rates th {
  text-align: right;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .95rem 1.1rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.rates th:first-child, table.rates td:first-child { text-align: left; padding-left: 1.5rem; }
table.rates th:last-child, table.rates td:last-child { padding-right: 1.5rem; }
table.rates td {
  text-align: right;
  padding: .95rem 1.1rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 13.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.rates tbody tr:last-child td { border-bottom: 0; }
table.rates tbody tr:hover { background: var(--surface-2); }
.ccy { display: flex; align-items: center; gap: .7rem; }
.ccy svg { display: block; flex: 0 0 auto; border-radius: 2px; }
/* currencies outside the eight inline SVG flags fall back to a PNG */
.ccy .ccy-flag {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
}
.ccy .ccy-flag-blank { background: var(--surface-3); }
.ccy .code { font-weight: 600; letter-spacing: .04em; }
.ccy .name {
  font-family: var(--f-ui);
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
}
td.chg .delta { display: inline-block; }
td.spark svg { display: block; margin-left: auto; }
/* no 30-day series recorded for this currency: leave the cell empty rather
   than drawing a shape the log cannot support */
td.spark .spark-none {
  display: block;
  text-align: right;
  color: var(--muted);
  font-family: var(--f-mono);
  font-size: 12px;
}
td.rates-empty {
  padding: 1.6rem 1rem;
  text-align: center;
  color: var(--muted);
  font-family: var(--f-ui);
  font-size: 13.5px;
}
.table-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .03em;
}

/* ---- chart ---------------------------------------------- */
.chart-panel {
  margin-top: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.chart-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--line);
}
.chart-id { display: flex; align-items: baseline; gap: .7rem; }
.chart-id h3 { font-family: var(--f-mono); font-size: 14px; font-weight: 600; letter-spacing: .05em; }
.chart-last {
  font-family: var(--f-display);
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}
.graph-pick { display: flex; align-items: center; gap: .7rem; margin-left: auto; min-width: 0; }
.graph-pick .control { padding: .4rem .6rem; min-width: 0; }
.graph-pick .control select { font-size: 12.5px; }
.graph-header {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.ranges { display: flex; gap: 2px; background: var(--surface-2); border-radius: var(--r); padding: 2px; }
.ranges button {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 3px;
  padding: .35rem .7rem;
  cursor: pointer;
}
.ranges button:hover { color: var(--ink); }
.ranges button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.chart-body { padding: 1.25rem 1.5rem 1.5rem; }
.chart-body svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 0 1.5rem 1.4rem;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .04em;
}
.chart-foot b { color: var(--ink); font-weight: 600; }


/* ============================================================
   BRANCHES — the four counters from Contact/Index.cshtml,
   alternating photo slider and detail, in centre order
   ============================================================ */
.locs {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 4.5rem 0 5rem;
}
.locs-head {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem 3rem;
  flex-wrap: wrap;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
}
.locs-head .eyebrow { display: block; margin-bottom: .55rem; }
.locs-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); font-weight: 600; }
.locs-head p { font-size: 14.5px; color: var(--muted); max-width: 40ch; margin-left: auto; }

/* one row per branch */
.loc {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: 3.25rem;
  align-items: center;
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--line);
}
.loc:last-child { border-bottom: 0; padding-bottom: .5rem; }
/* the header div is the first child, so count articles by type:
   rows 2 and 4 read content first, slider second */
.loc:nth-of-type(even) .loc-media { order: 2; }

/* ---- slider ------------------------------------------------ */
.loc-slider {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: 0 34px 64px -40px rgba(0, 10, 77, .55), 0 2px 6px rgba(0, 10, 77, .07);
}
.loc-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity .55s ease, transform 1.1s cubic-bezier(.22, .75, .2, 1);
}
.loc-slide.on { opacity: 1; transform: none; }
.loc-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* caption chip, top left */
.loc-cap {
  position: absolute;
  z-index: 3;
  top: .8rem;
  left: .8rem;
  padding: .3rem .6rem .34rem;
  border-radius: 3px;
  background: rgba(0, 6, 46, .58);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(221, 225, 247, .22);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #FFF;
}

/* dots bottom left, arrows bottom right */
.loc-dots {
  position: absolute;
  z-index: 3;
  left: .9rem;
  bottom: .9rem;
  display: flex;
  gap: .4rem;
}
.loc-dots button {
  width: 1.5rem;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: background-color .2s ease;
}
.loc-dots button[aria-current="true"] { background: var(--accent-fill); }
.loc-dots button:hover { background: #FFF; }

.loc-nav {
  position: absolute;
  z-index: 3;
  right: .8rem;
  bottom: .8rem;
  display: flex;
  gap: .4rem;
}
.loc-nav button {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(0, 6, 46, .5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #FFF;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.loc-nav button:hover {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--accent-ink);
  transform: translateY(-1px);
}
.loc-slider.single .loc-nav, .loc-slider.single .loc-dots { display: none; }

/* ---- detail ------------------------------------------------ */
.loc-rule {
  display: block;
  width: 2.2rem;
  height: 2px;
  background: var(--accent-fill);
  margin-bottom: 1.1rem;
}
.loc-centre {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}
.loc-copy h3 {
  margin-top: .5rem;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  font-weight: 600;
  line-height: 1.06;
}
.loc-addr {
  font-style: normal;
  font-size: 16px;
  line-height: 1.62;
  color: var(--body);
  margin-top: 1rem;
}
.loc-addr b { color: var(--ink); font-weight: 600; }
.loc-inside {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin-top: .9rem;
  font-size: 13.5px;
  color: var(--muted);
}
.loc-inside svg { flex: 0 0 auto; margin-top: .2rem; color: var(--accent); }
.loc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.5rem;
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}
.loc-tel {
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
}
.loc-tel:hover { color: var(--brand); }

@media (max-width: 1000px) {
  .loc { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding: 2.75rem 0; }
  .loc:nth-of-type(even) .loc-media { order: 0; }
}
@media (max-width: 620px) {
  .locs { padding: 3rem 0 3.5rem; }
  .loc-slider { aspect-ratio: 3 / 2; border-radius: 8px; }
  .locs-head p { margin-left: 0; }
}

/* ============================================================
   REACH — the closing section that ends Home/Index.cshtml

   Light on purpose: the footer is solid #000, so the page's last
   section is its brightest surface. White field, hairline off the
   ground above, so the footer closes the page instead of the band
   dissolving into it.

   The photograph runs warm against this cool palette, so it is
   framed rather than bled -- the same border, bed and shadow the
   branches section gives its photos. Colour is all system tokens.
   ============================================================ */
.reach {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: clamp(4rem, 6.5vw, 6.5rem) 0;
}

.reach-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: clamp(2.25rem, 5vw, 4.5rem);
}

.reach-h {
  font-size: clamp(1.95rem, 3.9vw, 3.05rem);
  line-height: 1.06;
  letter-spacing: -.028em;
  max-width: 20ch;
}
.reach-lede {
  margin-top: 1rem;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
}

/* the number is the ask, and the band's only action */
.reach-call {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
  margin-top: clamp(1.9rem, 3vw, 2.5rem);
  color: var(--ink);
  text-decoration: none;
}
.reach-call-num {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  transition: color .18s ease;
}
/* .btn .btn-brand carry shape and colour; this adds only the lift */
.reach-call-act {
  box-shadow: 0 2px 4px rgba(0, 10, 77, .16), 0 16px 32px -16px rgba(0, 0, 255, .42);
  transition: background-color .18s ease, transform .2s cubic-bezier(.3, .7, .2, 1);
}
.reach-call:hover .reach-call-num,
.reach-call:focus-visible .reach-call-num { color: var(--brand); }
.reach-call:hover .reach-call-act { transform: translateY(-1px); }
.reach-call:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 6px;
  border-radius: var(--r);
}

.reach-fine {
  margin-top: clamp(1.5rem, 2.4vw, 2rem);
  max-width: 52ch;
  font-size: 13px;
  line-height: 1.7;
  /* --body, not --muted: --muted is only 4.38:1 on this surface */
  color: var(--body);
}
.reach-fine a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  transition: color .18s ease;
}
.reach-fine a:hover { color: var(--brand); }

/* names the counters the call actually reaches */
.reach-serial {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--body);
}
.reach-serial span { color: var(--line-strong); padding: 0 .1em; }

/* framed, not bled -- the branches section's photo treatment */
.reach-media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: 0 34px 64px -40px rgba(0, 10, 77, .55), 0 2px 6px rgba(0, 10, 77, .07);
}
.reach-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* hold the tiles, which sit just below centre in the frame */
  object-position: 50% 58%;
}
/* the one authored moment: the photograph settles on reveal, from an
   already-visible default so it is correct with or without the observer */
.reach.in .reach-media img { animation: reachSettle 1.5s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes reachSettle { from { transform: scale(1.05); } }

@media (max-width: 900px) {
  .reach { padding: 3.5rem 0 4rem; }
  .reach-in { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  /* the photograph follows the ask on a single column */
  .reach-media { order: 2; aspect-ratio: 16 / 10; }
  .reach-copy { order: 1; }
  .reach-h { max-width: none; }
}
@media (max-width: 620px) {
  .reach-call { align-self: stretch; }
  .reach-call-act { align-self: stretch; }
  .reach-media { aspect-ratio: 3 / 2; }
}

/* ============================================================
   FOOTER

   The old footer set nine different things in pure #FFF -- 15.5px body
   copy, 12px mono headings, the 24px phone number, the legal line and
   every link, all at one value. It had size hierarchy and no tonal
   hierarchy, which on a black field is both glare and no reading order.

   Three levels now, from the on-dark tokens the system already owns:
     #FFFFFF        21.00:1  what you scan for -- headings, the number
     --on-navy      16.19:1  what you click   -- links, address
     --on-navy-dim   7.38:1  what you skim    -- prose, legal
   ============================================================ */
footer.sitemap {
  background: #000;
  color: var(--on-navy);
  font-size: 15.5px;
  padding: 4.5rem 0 1.75rem;
}
footer.sitemap ::selection { background: var(--accent-fill); color: var(--accent-ink); }

/* every focusable thing in here had no focus state at all */
footer.sitemap :focus-visible {
  outline: 2px solid var(--accent-fill);
  outline-offset: 3px;
  border-radius: 2px;
}

.sitemap-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(0, 1fr));
  gap: 2.75rem clamp(2rem, 5vw, 5rem);
}

/* level 1: the column headings you scan for */
.sitemap h5 {
  margin: 0 0 1.15rem;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.sitemap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
/* was an inline style="margin-top:.8rem" on the email list in the markup */
.sitemap .contact-list { margin-top: .8rem; }

/* level 2: the things you click */
.sitemap a {
  font-size: 15.5px;
  color: var(--on-navy);
  text-decoration: none;
  text-decoration-color: var(--accent-fill);
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  transition: color .18s ease;
}
.sitemap a:hover { color: var(--accent-hot); text-decoration-line: underline; }

.sitemap .footer-logo { display: block; height: 50px; width: auto; }

/* level 3: boilerplate prose, the least important thing in the footer and
   previously set at the same value as the phone number */
.sitemap .about {
  font-size: 15px;
  line-height: 1.7;
  max-width: 46ch;
  margin-top: 1.4rem;
  color: white;
}

/* the phone number is the one line people come here for, so it is level 1 --
   and it is a tel: link, which the old rule gave no hover or focus at all */
.sitemap .tel {
  display: inline-block;
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  transition: color .18s ease;
}
.sitemap .tel:hover { color: var(--accent-fill); text-decoration-line: none; }

.sitemap .addr {
  font-size: 15px;
  line-height: 1.7;
  font-style: normal;
  color: var(--on-navy);
  margin-top: .9rem;
}

.sitemap .social { display: flex; gap: .5rem; margin-top: 1.5rem; }
.sitemap .social a {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  color: var(--on-navy);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.sitemap .social a:hover,
.sitemap .social a:focus-visible {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--accent-ink);
  transform: translateY(-2px);
}
.sitemap .social svg { display: block; }

.legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem 1.75rem;
  margin-top: 3.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  /* text-transform: uppercase; */
  /* level 3: statutory text, not something to read first */
  color: white;
}

/* an action, not a fourth piece of legal text -- it used to be set
   identically to the ABN and licence lines beside it */
.legal .totop {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
  padding: .5rem .85rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #FFFFFF;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.legal .totop svg { transition: transform .25s cubic-bezier(.22, .75, .2, 1); }
.legal .totop:hover {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--accent-ink);
  text-decoration-line: none;
}
.legal .totop:hover svg { transform: translateY(-3px); }

@media (max-width: 700px) {
  footer.sitemap { padding-top: 3.25rem; }
  .legal { margin-top: 2.5rem; gap: .75rem 1.25rem; }
  .legal .totop { margin-left: 0; }
}

/* ============================================================
   LIVE TICKER TAPE
   ============================================================ */
.ticker {
  background: var(--navy-deep);
  border-bottom: 1px solid var(--navy-line);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: marquee 72s linear infinite;
}
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.tk {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.1rem;
  border-right: 1px solid var(--navy-line);
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--on-navy);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Flags arrive either as an inline SVG or as a country PNG. Pin the box on
   both -- an unsized PNG would stretch the tape row -- and ring them, since
   the white-heavy flags dissolve straight into the navy without it. */
.tk-flag { display: flex; flex: 0 0 auto; margin-right: -.1rem; }
.tk-flag > img,
.tk-flag > svg,
.tk-flag > .ccy-flag-blank {
  display: block;
  width: 17px;
  height: 12px;
  min-width: 17px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}
.tk-flag > .ccy-flag-blank { background: var(--navy-line); }
.tk .c { color: var(--on-navy-dim); letter-spacing: .07em; font-weight: 600; }
.tk .lbl { color: var(--accent-hot); font-size: 9.5px; letter-spacing: .1em; }
.tk .v { font-weight: 600; min-width: 4.4em; }
.tk .d { font-size: 10.5px; min-width: 4.2em; }
.tk .d.up   { color: #35B183; }
.tk .d.down { color: #FF8A7A; }
.tk .d.flat { color: var(--on-navy-dim); }
.tk .arw { font-size: 9px; opacity: .85; }

/* ============================================================
   LIVE VALUE FLASH
   ============================================================ */
@keyframes flashUp {
  0%   { background: var(--up-wash);   color: var(--up); }
  100% { background: transparent;      color: var(--ink); }
}
@keyframes flashDown {
  0%   { background: var(--down-wash); color: var(--down); }
  100% { background: transparent;      color: var(--ink); }
}
td.fu { animation: flashUp 1.1s ease-out; }
td.fd { animation: flashDown 1.1s ease-out; }

/* the chart plots recorded readings, so it is stamped with the date of the
   last one rather than a live indicator */
.chart-asof {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.live-dot {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--up);
}
.live-dot i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--up);
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--up-wash); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ============================================================
   CHART CROSSHAIR + TOOLTIP
   ============================================================ */
.chart-body { position: relative; }
.chart-tip {
  position: absolute;
  top: 8px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity .14s ease;
  background: var(--navy-deep);
  color: var(--on-navy);
  border: 1px solid var(--navy-line);
  border-radius: 3px;
  padding: .45rem .6rem;
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  z-index: 5;
}
.chart-tip.on { opacity: 1; }
.chart-tip b { color: var(--accent-hot); font-weight: 600; }
.chart-tip span { color: var(--on-navy-dim); }

/* ============================================================
   MOTION + RESPONSIVE
   ============================================================ */
.rise { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
  .rise { opacity: 1; transform: none; }
  .ticker-track { animation: none !important; }
  /* icons are drawn by animation, so make sure they are simply present instead */
  .promise .ic svg > * { stroke-dasharray: none; stroke-dashoffset: 0; }
  .promise li::after { display: none; }
}


@media (max-width: 1080px) {
  /* the banner gets too short to host the cards: return them to normal flow */
  .hero-banner { background: transparent; }
  .promise-overlay {
    position: static;
    width: min(1600px, 100% - 2rem);
    max-width: none;
    margin: 1.5rem auto 0;
  }
  .promise { gap: .8rem; }
  .promise li { padding: 1rem 1.2rem; gap: .9rem; }

  /* The order card is the hero's job, so it follows the artwork directly
     instead of queueing behind the promise cards. Source order stays as it
     is for the desktop overlay; only the visual order changes here. */
  .hero-banner { display: flex; flex-direction: column; }
  .hero-banner img { order: 1; }
  .hero .fx-col { order: 2; margin-top: 1rem; }
  .promise-overlay { order: 3; }

  .band-in { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sitemap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the bar stays a single row at every width: below 1080 the nav becomes a
   panel behind the toggle instead of wrapping to a second row, which is what
   pushed the old header past 96px on mid-size screens */
@media (max-width: 1240px) {
  .mainnav > li > a, .mainnav > li > button { padding: .55rem .62rem; font-size: 14px; }
  .mainnav > li > a::after, .mainnav > li > button::after { left: .62rem; right: .62rem; }
}
@media (max-width: 1080px) {
  .navtoggle { display: inline-flex; }
  .mainnav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    margin: 0;
    padding: .6rem clamp(1rem, 5vw, 2rem) 1.1rem;
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 30px 60px -28px rgba(0, 10, 77, .5);
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .24s cubic-bezier(.3, .7, .2, 1), visibility .24s;
  }
  .mainnav.show { opacity: 1; visibility: visible; transform: none; }

  .mainnav > li { border-bottom: 1px solid var(--line); }
  .mainnav > li:last-child { border-bottom: 0; }
  .mainnav > li > a, .mainnav > li > button {
    width: 100%;
    justify-content: space-between;
    padding: .85rem .2rem;
    font-size: 15.5px;
    border-radius: 0;
  }
  /* the underline indicator belongs to a horizontal bar, not a stacked list */
  .mainnav > li > a::after, .mainnav > li > button::after { display: none; }
  .mainnav > li > a[aria-current] { color: var(--brand); }
  .mainnav .caret { width: 13px; height: 13px; }

  .mainnav .submenu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    margin: 0 0 .55rem;
    padding: .1rem 0 .2rem .4rem;
    background: none;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }
  .mainnav > li.open .submenu { display: block; }
  .submenu a { padding: .6rem .7rem; }

  .masthead-actions .btn-ghost { display: none; }
}
/* Below ~400px the logo and the action row cannot share a line: together
   they measured 354px against a 320px screen. Give the actions their own
   full-width row rather than letting the header push the page sideways. */
@media (max-width: 400px) {
  .masthead-in { flex-wrap: wrap; row-gap: .55rem; align-content: center; }
  .masthead-actions { width: 100%; justify-content: space-between; }
  .masthead-actions .btn-sm { padding-inline: .85rem; }
}
@media (max-width: 760px) {
  :root { --grid: min(1240px, 100% - 2rem); }
  .logo img { height: 38px; }
  .masthead.stuck .logo img { transform: scale(.895); }
  .promise { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .promise li:nth-child(5) { grid-column: auto; }
  .hero-facts { grid-template-columns: 1fr; }
  .hero-facts > div + div { padding-left: 0; }
  .guides { grid-template-columns: minmax(0, 1fr); }
  .sitemap-grid { grid-template-columns: minmax(0, 1fr); }
  .field-pair { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .section-head p { margin-left: 0; }
}