/* ============================================================
   RiteStar Shipping Services — Design System
   Maritime & Aviation identity: deep navy, royal blue, cyan,
   white, restrained gold.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand */
  --navy-900: #050E1F;
  --navy-850: #071531;
  --navy-800: #0A1B3D;
  --navy-700: #0F2A5C;
  --navy-600: #143670;
  --blue-600: #1554F0;
  --blue-500: #2E6BFF;
  --blue-400: #5A8BFF;
  --cyan-500: #00C2E0;
  --cyan-400: #35D6EF;
  --cyan-300: #7BE8F8;
  --gold-500: #C9A227;
  --gold-400: #E0BC4B;

  /* Neutrals */
  --white: #FFFFFF;
  --gray-50: #F7F9FC;
  --gray-100: #EEF2F8;
  --gray-200: #DFE6F0;
  --gray-300: #C6D1E1;
  --gray-400: #9AA9BF;
  --gray-500: #6B7C96;
  --gray-600: #4B5C75;
  --gray-700: #33425A;
  --gray-800: #1E2B41;

  /* Semantic */
  --success: #10935F;
  --success-bg: #E6F6EF;
  --warning: #B87503;
  --warning-bg: #FDF3E0;
  --danger: #C62A38;
  --danger-bg: #FDECEE;
  --info: #0B6FA4;
  --info-bg: #E5F3FB;

  /* Surfaces */
  --bg: var(--white);
  --bg-alt: var(--gray-50);
  --surface: var(--white);
  --border: var(--gray-200);
  --text: var(--navy-800);
  --text-muted: var(--gray-500);

  /* Type */
  --font-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Space */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* Radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

  /* Elevation */
  --sh-xs: 0 1px 2px rgba(10, 27, 61, .06);
  --sh-sm: 0 2px 8px rgba(10, 27, 61, .07);
  --sh-md: 0 8px 24px rgba(10, 27, 61, .10);
  --sh-lg: 0 18px 48px rgba(10, 27, 61, .16);
  --sh-glow: 0 0 0 4px rgba(21, 84, 240, .14);

  /* Layout */
  --container: 1240px;
  --header-h: 76px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

[data-theme="dark"] {
  --bg: var(--navy-900);
  --bg-alt: var(--navy-850);
  --surface: #0A1830;
  --border: #17284A;
  --text: #E9EFF9;
  --text-muted: #8FA2BF;
  --gray-50: #071531;
  --gray-100: #0C1D3C;
  --gray-200: #17284A;
  --gray-300: #26395E;
  --success-bg: rgba(16,147,95,.14);
  --warning-bg: rgba(184,117,3,.16);
  --danger-bg: rgba(198,42,56,.16);
  --info-bg: rgba(11,111,164,.16);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important; transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}
body {
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.6;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--cyan-500);
  outline-offset: 2px;
  border-radius: 3px;
}

.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;
}
.skip-link {
  position: absolute; top: -60px; left: 16px; z-index: 999;
  background: var(--navy-800); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--r-md) var(--r-md); font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; text-decoration: none; }

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 800; line-height: 1.15; letter-spacing: -.022em; color: var(--text);
}
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
h4 { font-size: 1.125rem; font-weight: 700; }
h5 { font-size: 1rem; font-weight: 700; }
p { color: var(--text-muted); }
.lead { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--text-muted); line-height: 1.7; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue-600);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan-500), var(--blue-600));
}
.eyebrow--light { color: var(--cyan-300); }
.text-gradient {
  background: linear-gradient(100deg, var(--cyan-400) 0%, var(--blue-400) 55%, var(--cyan-300) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* ---------- 4. Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-6); }
.container--narrow { max-width: 900px; }
.container--wide { max-width: 1480px; }
.section { padding-block: clamp(56px, 8vw, 104px); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }
.section--alt { background: var(--bg-alt); }
.section--navy { background: var(--navy-850); color: #E9EFF9; }
.section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy p { color: #A7B8D4; }

.section-head { max-width: 720px; margin-bottom: var(--sp-10); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-block: var(--sp-3) var(--sp-4); }

.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   Inline two-column grids must collapse on a phone.

   The rules above only reach .grid-2/.grid-3/.grid-4. Thirteen
   layouts on the public pages instead use `class="grid"` with the
   columns written INLINE:

       <div class="grid" style="grid-template-columns:1fr 1.15fr;…">

   An inline style beats every stylesheet rule that is not
   !important, so none of those collapsed. On a 390px screen the
   "Why RiteStar" tiles were squeezed into a column a few characters
   wide — one word per line — and the rest of each card ran off the
   right-hand edge of the screen. Same for the network map, the
   service pages, the directory and tracking.

   !important is the wrong tool almost everywhere and the only tool
   here: there is no way to override an inline declaration without
   it. The selector is kept as narrow as the problem — an element
   that is BOTH .grid and carries an inline template.

   auto-fit and auto-fill templates are excluded because they already
   respond correctly: minmax() reflows them to whatever fits, and
   forcing those to one column would make the flag and port grids
   worse rather than better.

   860px matches the breakpoint the other two-column feature layouts
   already use (.art-feature below), so the whole page turns at one
   width instead of in stages. */
@media (max-width: 860px) {
  .grid[style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]) {
    grid-template-columns: 1fr !important;
  }
}

.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.row--nowrap { flex-wrap: nowrap; }
.spacer { flex: 1; }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: var(--r-full);
  font-weight: 700; font-size: .94rem; letter-spacing: -.01em;
  border: 1.5px solid transparent; white-space: nowrap; text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none !important; }

.btn-primary {
  background: linear-gradient(135deg, var(--blue-600), var(--blue-500) 55%, var(--cyan-500));
  color: #fff; box-shadow: 0 8px 22px rgba(21, 84, 240, .32);
}
.btn-primary:hover { box-shadow: 0 14px 34px rgba(21, 84, 240, .42); color: #fff; }

.btn-gold {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  color: var(--navy-900); box-shadow: 0 8px 22px rgba(201, 162, 39, .3);
}
.btn-gold:hover { color: var(--navy-900); box-shadow: 0 14px 34px rgba(201,162,39,.4); }

.btn-outline { border-color: var(--border); color: var(--text); background: var(--surface); }
.btn-outline:hover { border-color: var(--blue-600); color: var(--blue-600); background: var(--surface); }

.btn-ghost { color: var(--text-muted); }
.btn-ghost:hover { color: var(--blue-600); background: var(--gray-100); }

.btn-glass {
  background: rgba(255,255,255,.11); color: #fff;
  border-color: rgba(255,255,255,.32); backdrop-filter: blur(14px);
}
.btn-glass:hover { background: rgba(255,255,255,.2); color: #fff; }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { color: #fff; filter: brightness(1.08); }

.btn-sm { padding: 8px 15px; font-size: .82rem; }
.btn-sm svg { width: 15px; height: 15px; }
.btn-lg { padding: 16px 32px; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn-icon { padding: 9px; border-radius: var(--r-md); }
.btn-icon svg { width: 18px; height: 18px; }

/* ---------- 6. Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-6);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.card--pad-sm { padding: var(--sp-4); }
.card--flat { box-shadow: none; }
.card--hover:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: var(--blue-400); }
.card--elevated { box-shadow: var(--sh-sm); }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--border);
}
.card-head h3, .card-head h4 { margin: 0; }
/* Card-level headings are h3 for correct document outline but stay visually small.
   Any inline font-size on the element still wins. */
.card > h3, .card-head > h3, .modal-body > h3, .doc-item h3, .testimonial h3 {
  font-size: 1.02rem; font-weight: 700; letter-spacing: -.012em;
}
.kpi-card h3, .empty-state h3 { font-size: 1.05rem; font-weight: 700; }

.service-card { position: relative; overflow: hidden; }
.service-card::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, var(--blue-600), var(--cyan-500));
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.service-card:hover::after { transform: scaleX(1); }

.icon-badge {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, rgba(21,84,240,.12), rgba(0,194,224,.16));
  color: var(--blue-600);
}
.icon-badge svg { width: 26px; height: 26px; }
.icon-badge--gold { background: linear-gradient(135deg, rgba(201,162,39,.16), rgba(224,188,75,.2)); color: var(--gold-500); }
.icon-badge--cyan { background: linear-gradient(135deg, rgba(0,194,224,.16), rgba(123,232,248,.2)); color: var(--info); }
.icon-badge--light { background: rgba(255,255,255,.1); color: var(--cyan-300); }
.icon-badge--sm { width: 38px; height: 38px; border-radius: 11px; }
.icon-badge--sm svg { width: 19px; height: 19px; }

/* ---------- 7. Header / Nav ---------- */
.topbar {
  background: var(--navy-900); color: #A7B8D4;
  font-size: .8rem; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.topbar a { color: #C9D6EA; }
.topbar .row { gap: var(--sp-5); }
.topbar-item { display: inline-flex; align-items: center; gap: 6px; }
.topbar-item svg { width: 14px; height: 14px; opacity: .7; }
@media (max-width: 860px) { .topbar { display: none; } }

.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.9); backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .25s var(--ease);
}
[data-theme="dark"] .site-header { background: rgba(5,14,31,.86); }
.site-header.is-stuck { box-shadow: var(--sh-sm); }
.nav { display: flex; align-items: center; gap: var(--sp-6); height: var(--header-h); }

.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 42px; height: 42px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-size: 1.16rem; font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.brand-name span { color: var(--blue-600); }
.brand-sub { font-size: .6rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--text-muted); }

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-link {
  position: relative; padding: 9px 13px; border-radius: var(--r-md);
  font-size: .9rem; font-weight: 600; color: var(--text);
  display: inline-flex; align-items: center; gap: 5px;
}
.nav-link:hover, .nav-link.is-active { color: var(--blue-600); background: var(--gray-100); text-decoration: none; }
.nav-link svg.chev { width: 13px; height: 13px; opacity: .55; transition: transform .2s var(--ease); }
.has-mega:hover .chev { transform: rotate(180deg); }
.nav-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

/* Mega menu */
.has-mega { position: static; }
.mega {
  position: absolute; left: 50%; transform: translate(-50%, 10px);
  top: calc(100% - 4px); width: min(1100px, calc(100vw - 40px));
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--sh-lg);
  padding: var(--sp-6); opacity: 0; visibility: hidden;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index: 210;
}
.has-mega:hover .mega, .has-mega:focus-within .mega {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.mega-col .mega-h, .mega-promo .mega-h {
  font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--sp-3);
}
.mega-promo .mega-h { color: var(--cyan-300); }
.mega-item {
  display: flex; gap: 11px; padding: 9px 10px; border-radius: var(--r-md);
  color: var(--text); transition: background .16s;
}
.mega-item:hover { background: var(--gray-100); text-decoration: none; }
.mega-item svg { width: 19px; height: 19px; color: var(--blue-600); flex: none; margin-top: 2px; }
.mega-item strong { display: block; font-size: .875rem; font-weight: 700; }
.mega-item small { color: var(--text-muted); font-size: .76rem; line-height: 1.4; }
.mega-promo {
  grid-column: span 1; background: linear-gradient(150deg, var(--navy-800), var(--navy-700));
  border-radius: var(--r-lg); padding: var(--sp-5); color: #fff;
}
.mega-promo h5 { color: var(--cyan-300); }
.mega-promo p { color: #A7B8D4; font-size: .82rem; margin-bottom: var(--sp-4); }

.nav-toggle { display: none; }
@media (max-width: 1120px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-md); border: 1px solid var(--border); }
  .nav-toggle svg { width: 20px; height: 20px; }
}
.mobile-nav {
  position: fixed; inset: 0; z-index: 300; background: var(--surface);
  padding: var(--sp-5); overflow-y: auto;
  transform: translateX(100%); transition: transform .32s var(--ease);
}
.mobile-nav.is-open { transform: none; }
.mobile-nav a { display: block; padding: 13px 4px; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border); }
.mobile-nav .mnav-h {
  margin-top: var(--sp-5); margin-bottom: 4px; font-size: .68rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted);
}

/* ---------- 8. Hero slider ---------- */
.hero { position: relative; height: clamp(560px, 84vh, 820px); overflow: hidden; background: var(--navy-900); }
.hero-track { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity 1s var(--ease), visibility 1s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide.is-active .hero-media img { animation: kenburns 9s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.0) } to { transform: scale(1.09) } }
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(5,14,31,.94) 0%, rgba(7,21,49,.82) 42%, rgba(10,27,61,.35) 78%, rgba(10,27,61,.15) 100%),
    linear-gradient(0deg, rgba(5,14,31,.72) 0%, transparent 46%);
}
.hero-grid-lines {
  position: absolute; inset: 0; opacity: .3; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,194,224,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,194,224,.09) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 20%, transparent 78%);
}
.hero-inner {
  position: relative; z-index: 3; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding-bottom: 90px;
}
.hero-content { max-width: 700px; color: #fff; }
.hero-slide.is-active .hero-content > * { animation: heroUp .8s var(--ease) backwards; }
.hero-slide.is-active .hero-content > *:nth-child(1) { animation-delay: .12s; }
.hero-slide.is-active .hero-content > *:nth-child(2) { animation-delay: .22s; }
.hero-slide.is-active .hero-content > *:nth-child(3) { animation-delay: .32s; }
.hero-slide.is-active .hero-content > *:nth-child(4) { animation-delay: .42s; }
@keyframes heroUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero-content h1, .hero-content .hero-title {
  font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.15; letter-spacing: -.022em;
  color: #fff; margin-block: var(--sp-4) var(--sp-4); text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.hero-content p { color: #C4D3EA; font-size: clamp(1rem, 1.6vw, 1.16rem); max-width: 560px; }
.hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-8); }

.hero-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  border-top: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(0deg, rgba(5,14,31,.65), transparent);
  backdrop-filter: blur(8px);
}
.hero-controls .container { display: flex; align-items: center; gap: var(--sp-4); height: 74px; }
.hero-dots { display: flex; gap: 7px; flex: 1; flex-wrap: wrap; }
.hero-dot {
  width: 34px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.26);
  position: relative; overflow: hidden; transition: background .3s;
}
.hero-dot[aria-current="true"] { background: rgba(255,255,255,.32); }
.hero-dot[aria-current="true"]::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--cyan-400), var(--blue-400));
  transform-origin: left; animation: dotFill var(--slide-dur, 7s) linear forwards;
}
@keyframes dotFill { from { transform: scaleX(0) } to { transform: scaleX(1) } }
.hero-nav-btns { display: flex; gap: 7px; }
.hero-nav-btn {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.28); color: #fff; transition: background .2s, border-color .2s;
}
.hero-nav-btn:hover { background: rgba(255,255,255,.16); border-color: #fff; }
.hero-nav-btn svg { width: 17px; height: 17px; }
.hero-counter { color: rgba(255,255,255,.72); font-size: .82rem; font-weight: 700; letter-spacing: .06em; }
@media (max-width: 700px) {
  .hero { height: auto; min-height: 640px; }
  .hero-inner { padding-block: 100px 110px; }
  .hero-controls .container { height: 64px; }
  .hero-dot { width: 20px; }
}

/* ---------- 9. Search / quote widget ---------- */
.quote-widget {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--sh-lg); padding: var(--sp-5);
}
.quote-widget-tabs { display: flex; gap: 4px; margin-bottom: var(--sp-5); overflow-x: auto; padding-bottom: 2px; }
.qw-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--r-full);
  font-size: .85rem; font-weight: 700; color: var(--text-muted); white-space: nowrap;
  transition: all .2s var(--ease);
}
.qw-tab svg { width: 17px; height: 17px; }
.qw-tab:hover { background: var(--gray-100); color: var(--text); }
.qw-tab.is-active { background: var(--navy-800); color: #fff; }
.qw-fields { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: var(--sp-3); align-items: end; }
@media (max-width: 980px) { .qw-fields { grid-template-columns: repeat(2, 1fr); } .qw-fields .btn { grid-column: 1 / -1; } }
@media (max-width: 560px) { .qw-fields { grid-template-columns: 1fr; } }

/* ---------- 10. Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .label {
  font-size: .78rem; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 5px;
}
.label-req::after { content: "*"; color: var(--danger); font-weight: 800; }
.hint { font-size: .74rem; color: var(--text-muted); line-height: 1.45; }
.input, .select, .textarea {
  width: 100%; padding: 11px 13px;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); font-size: .92rem;
  transition: border-color .18s, box-shadow .18s;
}
.input::placeholder, .textarea::placeholder { color: var(--gray-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--blue-600); box-shadow: var(--sh-glow);
}
.input:disabled, .select:disabled { background: var(--gray-100); cursor: not-allowed; opacity: .7; }
.textarea { resize: vertical; min-height: 92px; }
.select {
  appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7C96' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 16px;
}
.input-group { position: relative; }
.input-group .input { padding-left: 40px; }
.input-group > svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--gray-400); pointer-events: none;
}
.input-error { border-color: var(--danger) !important; }
.error-text { font-size: .74rem; color: var(--danger); font-weight: 600; display: flex; gap: 4px; align-items: center; }
.error-text svg { width: 13px; height: 13px; flex: none; }

.check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: .87rem; line-height: 1.5; }
.check input[type="checkbox"], .check input[type="radio"] {
  width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--blue-600); cursor: pointer;
}
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .87rem; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 42px; height: 24px; border-radius: var(--r-full); background: var(--gray-300);
  position: relative; transition: background .22s var(--ease); flex: none;
}
.switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: var(--sh-xs); transition: transform .22s var(--ease);
}
.switch input:checked + .switch-track { background: var(--blue-600); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { box-shadow: var(--sh-glow); }

.choice-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.choice {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: var(--sp-4) var(--sp-3); text-align: center; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  transition: all .2s var(--ease);
}
.choice input { position: absolute; opacity: 0; }
.choice svg.choice-ico { width: 28px; height: 28px; color: var(--text-muted); transition: color .2s; }
.choice strong { font-size: .88rem; font-weight: 700; }
.choice small { font-size: .73rem; color: var(--text-muted); line-height: 1.35; }
.choice:hover { border-color: var(--blue-400); transform: translateY(-2px); }
.choice.is-selected { border-color: var(--blue-600); background: rgba(21,84,240,.05); box-shadow: var(--sh-glow); }
.choice.is-selected svg.choice-ico { color: var(--blue-600); }
.choice.is-selected::after {
  content: "✓"; position: absolute; top: 8px; right: 10px;
  width: 19px; height: 19px; border-radius: 50%; background: var(--blue-600); color: #fff;
  font-size: 11px; font-weight: 800; display: grid; place-items: center;
}
.choice--row { flex-direction: row; text-align: left; align-items: center; }
.choice--row .choice-body { flex: 1; }

/* .choice-body is a <span> wrapping an inline <strong> and an inline
   <small>. With no rule here the two ran together on one line — the
   payment-term cards read "PrepayPay before release", and the
   description then wrapped mid-sentence underneath the title. A column
   puts the label on its own line, which is what every one of these
   cards was drawn to look like. Applies to the service, volume and
   payment-term cards on signup and to the OTP channel cards, all of
   which share this markup. */
.choice-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.choice--row .choice-body, .choice--sm .choice-body { align-items: flex-start; }

.dropzone {
  border: 2px dashed var(--gray-300); border-radius: var(--r-lg);
  padding: var(--sp-6); text-align: center; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--blue-600); background: rgba(21,84,240,.04); }
.dropzone svg { width: 30px; height: 30px; color: var(--gray-400); margin: 0 auto var(--sp-2); }

.fieldset {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); margin: 0;
}
.fieldset legend { font-size: .82rem; font-weight: 800; padding-inline: 8px; color: var(--blue-600); }

/* ---------- 11. Stepper ---------- */
.stepper { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.step {
  flex: 1; min-width: 128px; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-md); background: var(--gray-100);
  transition: all .25s var(--ease); text-align: left;
}
.step-num {
  width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--gray-300); color: var(--white); font-size: .76rem; font-weight: 800;
}
.step-label { font-size: .78rem; font-weight: 700; line-height: 1.25; color: var(--text-muted); }
.step.is-current { background: var(--navy-800); }
.step.is-current .step-num { background: var(--cyan-500); color: var(--navy-900); }
.step.is-current .step-label { color: #fff; }
.step.is-done { background: var(--success-bg); }
.step.is-done .step-num { background: var(--success); }
.step.is-done .step-label { color: var(--success); }
.step:disabled { cursor: not-allowed; }

.progress-bar { height: 6px; border-radius: 3px; background: var(--gray-200); overflow: hidden; }
.progress-bar > span {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--blue-600), var(--cyan-500));
  transition: width .4s var(--ease);
}

/* ---------- 12. Badges / chips / pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: .72rem; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
  background: var(--gray-100); color: var(--gray-600);
}
.badge svg { width: 12px; height: 12px; }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger); }
.badge-info    { background: var(--info-bg);    color: var(--info); }
.badge-blue    { background: rgba(21,84,240,.1); color: var(--blue-600); }
.badge-gold    { background: rgba(201,162,39,.15); color: #8A6E10; }
.badge-navy    { background: var(--navy-800); color: #fff; }
.badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--r-full); border: 1px solid var(--border);
  font-size: .81rem; font-weight: 600; color: var(--text); background: var(--surface);
  transition: all .18s;
}
.chip:hover { border-color: var(--blue-400); text-decoration: none; }
.chip.is-active { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.chip svg { width: 14px; height: 14px; }

.pill-source {
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 8px; border-radius: var(--r-sm);
}
.src-live      { background: var(--success-bg); color: var(--success); }
.src-contract  { background: rgba(21,84,240,.1); color: var(--blue-600); }
.src-cached    { background: var(--warning-bg); color: var(--warning); }
.src-internal  { background: var(--gray-100); color: var(--gray-600); }
.src-manual    { background: var(--info-bg); color: var(--info); }

/* ---------- 13. Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.table { font-size: .875rem; min-width: 640px; }
.table thead th {
  text-align: left; padding: 12px 16px; font-size: .7rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted);
  background: var(--bg-alt); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: var(--bg-alt); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.table-empty { padding: var(--sp-12); text-align: center; color: var(--text-muted); }

/* ---------- 14. Timeline ---------- */
.timeline { position: relative; padding-left: 30px; }
.timeline::before {
  content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--blue-600), var(--cyan-500), var(--gray-200));
}
.tl-item { position: relative; padding-bottom: var(--sp-6); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -26px; top: 5px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2.5px solid var(--gray-300);
}
.tl-item.is-done::before { background: var(--success); border-color: var(--success); }
.tl-item.is-current::before {
  background: var(--blue-600); border-color: var(--blue-600);
  box-shadow: 0 0 0 5px rgba(21,84,240,.18);
  animation: pulse 2.1s infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 5px rgba(21,84,240,.18); }
  50% { box-shadow: 0 0 0 10px rgba(21,84,240,.05); }
}
.tl-item.is-exception::before { background: var(--danger); border-color: var(--danger); }
.tl-time { font-size: .74rem; color: var(--text-muted); font-family: var(--font-mono); }
.tl-title { font-weight: 700; font-size: .94rem; margin-block: 2px; }
.tl-meta { font-size: .8rem; color: var(--text-muted); }

/* ---------- 15. Stats ---------- */
.stat-card { text-align: left; }
.stat-value {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 800;
  letter-spacing: -.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: .8rem; color: var(--text-muted); margin-top: 6px; font-weight: 600; }
.stat-delta { font-size: .76rem; font-weight: 800; display: inline-flex; align-items: center; gap: 3px; }
.stat-delta svg { width: 13px; height: 13px; }
.delta-up { color: var(--success); }
.delta-down { color: var(--danger); }

.kpi-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); display: flex; gap: var(--sp-4); align-items: flex-start;
}
.kpi-card .stat-value { font-size: 1.7rem; }

/* ---------- 16. Utility ---------- */
.mt-0{margin-top:0}.mt-1{margin-top:var(--sp-1)}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}.mt-8{margin-top:var(--sp-8)}
.mt-10{margin-top:var(--sp-10)}.mt-12{margin-top:var(--sp-12)}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:var(--sp-2)}.mb-3{margin-bottom:var(--sp-3)}.mb-4{margin-bottom:var(--sp-4)}
.mb-5{margin-bottom:var(--sp-5)}.mb-6{margin-bottom:var(--sp-6)}.mb-8{margin-bottom:var(--sp-8)}.mb-10{margin-bottom:var(--sp-10)}
.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}
.fw-600{font-weight:600}.fw-700{font-weight:700}.fw-800{font-weight:800}
.fs-xs{font-size:.74rem}.fs-sm{font-size:.83rem}.fs-md{font-size:.94rem}.fs-lg{font-size:1.08rem}
.w-100{width:100%}.flex-1{flex:1}
.hide-sm { }
@media (max-width: 700px) { .hide-sm { display: none !important; } }
@media (max-width: 980px) { .hide-md { display: none !important; } }
.divider { height: 1px; background: var(--border); border: 0; margin-block: var(--sp-5); }

/* ---------- 17. Alerts ---------- */
.alert {
  display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-md);
  font-size: .875rem; line-height: 1.55; border: 1px solid transparent;
}
.alert svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.alert strong { display: block; margin-bottom: 2px; }
.alert-info { background: var(--info-bg); color: var(--info); border-color: rgba(11,111,164,.2); }
.alert-success { background: var(--success-bg); color: var(--success); border-color: rgba(16,147,95,.2); }
.alert-warning { background: var(--warning-bg); color: var(--warning); border-color: rgba(184,117,3,.22); }
.alert-danger { background: var(--danger-bg); color: var(--danger); border-color: rgba(198,42,56,.2); }

/* ---------- 18. Modal / drawer ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 400; background: rgba(5,14,31,.62);
  backdrop-filter: blur(4px); display: grid; place-items: center; padding: var(--sp-5);
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s;
}
.modal-backdrop.is-open { opacity: 1; visibility: visible; }
.modal {
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-lg);
  width: min(620px, 100%); max-height: 88vh; overflow-y: auto;
  transform: translateY(16px) scale(.98); transition: transform .28s var(--ease);
}
.modal-backdrop.is-open .modal { transform: none; }
.modal--wide { width: min(940px, 100%); }
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface); z-index: 2;
}
.modal-body { padding: var(--sp-6); }
.modal-foot {
  display: flex; gap: var(--sp-3); justify-content: flex-end;
  padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--border);
  position: sticky; bottom: 0; background: var(--surface);
}

/* ---------- 19. Toast ---------- */
.toast-host {
  position: fixed; bottom: 22px; right: 22px; z-index: 500;
  display: flex; flex-direction: column; gap: 10px; max-width: 380px;
}
.toast {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--navy-800); color: #fff; padding: 13px 16px;
  border-radius: var(--r-md); box-shadow: var(--sh-lg); font-size: .875rem;
  animation: toastIn .34s var(--ease);
}
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
.toast.is-out { animation: toastOut .3s var(--ease) forwards; }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px); } }
.toast svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.toast-success svg { color: #4ADE9B; }
.toast-error svg { color: #FF8A93; }
.toast-info svg { color: var(--cyan-400); }
@media (max-width: 560px) { .toast-host { left: 16px; right: 16px; bottom: 16px; max-width: none; } }

/* ---------- 20. Tabs ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab {
  padding: 11px 16px; font-size: .875rem; font-weight: 700; color: var(--text-muted);
  border-bottom: 2.5px solid transparent; white-space: nowrap; transition: all .18s;
  display: inline-flex; align-items: center; gap: 7px;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--blue-600); border-bottom-color: var(--blue-600); }
.tab svg { width: 16px; height: 16px; }
.tab .badge { font-size: .64rem; padding: 1px 6px; }

/* ---------- 21. Dashboard shell ---------- */
.app-shell { display: grid; grid-template-columns: 272px 1fr; min-height: 100vh; }
.app-side {
  background: var(--navy-900); color: #C9D6EA; padding: var(--sp-5) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-5);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.app-side::-webkit-scrollbar { width: 6px; }
.app-side::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; }
.side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 0; }
.side-brand .brand-name { color: #fff; font-size: 1.05rem; }
.side-brand .brand-sub { color: #7A8CAA; }
.side-group .side-h {
  font-size: .64rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: #5C7096; padding: 0 10px; margin-bottom: 6px;
}
.side-link {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--r-md);
  font-size: .855rem; font-weight: 600; color: #B4C4DD; transition: all .16s; width: 100%; text-align: left;
}
.side-link:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.side-link.is-active { background: linear-gradient(100deg, var(--blue-600), rgba(0,194,224,.55)); color: #fff; box-shadow: 0 6px 18px rgba(21,84,240,.32); }
.side-link svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.side-link .badge { margin-left: auto; }
.side-foot { margin-top: auto; padding: var(--sp-4) 10px 0; border-top: 1px solid rgba(255,255,255,.09); }

.app-main { display: flex; flex-direction: column; min-width: 0; background: var(--bg-alt); }
.app-topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-6); height: 68px;
}
[data-theme="dark"] .app-topbar { background: rgba(7,21,49,.92); }
.app-content { padding: var(--sp-6); flex: 1; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.page-head h1 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.page-head p { font-size: .9rem; margin-top: 4px; }

.side-toggle { display: none; }
@media (max-width: 1080px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-side {
    position: fixed; inset: 0 auto 0 0; width: 272px; z-index: 300;
    transform: translateX(-100%); transition: transform .3s var(--ease);
  }
  .app-side.is-open { transform: none; box-shadow: var(--sh-lg); }
  .side-toggle { display: inline-grid; }
}

.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--blue-600), var(--cyan-500));
}
.avatar-lg { width: 52px; height: 52px; font-size: 1rem; }
.avatar-sm { width: 28px; height: 28px; font-size: .66rem; }

.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 224px; z-index: 220;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); padding: 6px; opacity: 0; visibility: hidden;
  transform: translateY(-6px); transition: all .2s var(--ease);
}
.dropdown.is-open .dropdown-menu { opacity: 1; visibility: visible; transform: none; }
.dropdown-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: var(--r-sm); font-size: .86rem; font-weight: 600; color: var(--text);
}
.dropdown-item:hover { background: var(--gray-100); text-decoration: none; }
.dropdown-item svg { width: 16px; height: 16px; color: var(--text-muted); }
.dropdown-sep { height: 1px; background: var(--border); margin: 5px 0; }
.dropdown-head { padding: 9px 11px 7px; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
/* The long "all currencies" list scrolls inside the menu rather than
   running off the bottom of the viewport. */
.ccy-scroll { max-height: 190px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet-grip { display: none; }

/* ---------- 21a. Favicon preview chips ----------
   A favicon is judged at 16px against browser chrome, not at 200px on
   a white card. These draw it at the real sizes, on a light tab and a
   dark one, because an icon that vanishes on dark chrome is a common
   and otherwise invisible mistake. The checkerboard shows transparency
   honestly rather than flattening it onto white. */
.fav-chip {
  display: inline-grid; place-items: center; border-radius: 6px;
  border: 1px solid var(--border); background-color: #fff;
  background-image:
    linear-gradient(45deg, var(--gray-100) 25%, transparent 25%, transparent 75%, var(--gray-100) 75%),
    linear-gradient(45deg, var(--gray-100) 25%, transparent 25%, transparent 75%, var(--gray-100) 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}
.fav-chip--dark { background-color: var(--navy-800); background-image: none; border-color: var(--navy-700); }
.fav-chip img { object-fit: contain; }
.fav-chip img:not([src]) { visibility: hidden; }

/* Sharing-card previews. 1.91:1 is the ratio every platform crops
   from, so both sizes hold it exactly — a preview at the wrong ratio
   would hide the very problem it exists to show. */
.og-prev {
  border-radius: 8px; border: 1px solid var(--border); overflow: hidden;
  background: var(--gray-100); display: grid; place-items: center;
  aspect-ratio: 1200 / 630;
}
.og-prev--lg { width: 300px; }
.og-prev--sm { width: 128px; border-radius: 5px; }
.og-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.og-prev img:not([src]) { visibility: hidden; }

/* ---------- 21b. Mobile sticky bar ----------
   Hidden by default. Appears at exactly the width where .hide-md takes
   the currency and language controls out of the header, so those two
   choices are reachable at every screen size rather than disappearing
   on the devices where they matter most. */
.mbar { display: none; }
/* Anything that floats at the bottom of the viewport — the cookie
   consent strip, the geo-detection notice — sits here, so there is one
   place that knows how high the mobile sticky bar is. */
.fixed-bottom-bar { bottom: 16px; }
@media (max-width: 980px) {
  /* Clear the bar, so the consent buttons never cover Home and Track */
  .fixed-bottom-bar { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  .mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(5, 14, 31, .09);
    /* iOS home-indicator inset, so the last row of pixels is tappable */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mbar-item, .mbar-item > button {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; width: 100%; min-height: 58px; padding: 7px 2px;
    font-size: .64rem; font-weight: 700; letter-spacing: .02em;
    color: var(--text-muted); background: none; border: 0; text-align: center;
  }
  .mbar-item svg { width: 20px; height: 20px; }
  .mbar-item.is-active { color: var(--blue-600); }
  .mbar-item.is-active svg { color: var(--blue-600); }
  .mbar-item:hover { text-decoration: none; }
  .mbar-flag { display: inline-flex; height: 20px; align-items: center; }
  .mbar-flag svg, .mbar-flag .flag { width: 22px; height: 16px; }
  .mbar .dropdown.is-open > button { color: var(--blue-600); }

  /* A dropdown inside the bar is a bottom sheet, not a popover: a
     224px popover anchored to a 25%-wide button would be clipped by
     the viewport edge, and the currency list is far too long to hang
     above a 58px bar. */
  .mbar .dropdown-menu {
    position: fixed; inset: auto 0 0 0; top: auto; right: 0;
    width: 100%; min-width: 0; max-height: 72vh; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 20px 20px 0 0; border-left: 0; border-right: 0; border-bottom: 0;
    padding: 0 10px calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%); transition: transform .28s var(--ease), opacity .2s var(--ease);
    z-index: 260;
  }
  .mbar .dropdown.is-open .dropdown-menu { transform: none; }
  /* The inner scroller must not scroll independently of the sheet —
     two nested scroll areas on a touch screen trap the finger. */
  .mbar .dropdown-menu .ccy-scroll { max-height: none; overflow: visible; }
  .mbar .dropdown-item { padding: 13px 12px; font-size: .92rem; }
  .mbar .sheet-grip {
    display: block; width: 40px; height: 4px; border-radius: 99px;
    background: var(--border); margin: 10px auto 2px;
  }
  .mbar .dropdown-head { position: sticky; top: 0; background: var(--surface); z-index: 1; }

  /* Room for the bar, so the last footer line is not sitting under it */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  /* Toasts clear the bar instead of landing behind it */
  .toast-host { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  /* The full-screen drawer owns the viewport while it is open. The
     class is set in JS rather than using :has() so this does not
     depend on selector support in an older mobile browser. */
  body.nav-open .mbar { display: none; }
}
@media print { .mbar { display: none !important; } }

/* ---------- 22. Footer ---------- */
.site-footer { background: var(--navy-900); color: #9DB0CD; padding-top: var(--sp-16); }
.site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5 { color: #fff; }
.site-footer a { color: #9DB0CD; font-size: .875rem; }
.site-footer a:hover { color: var(--cyan-300); text-decoration: none; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--sp-8); }
@media (max-width: 1040px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col h2, .footer-col h5 {
  font-size: .78rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; margin-bottom: var(--sp-4);
}
.footer-col li { margin-bottom: 9px; }
.footer-bottom {
  margin-top: var(--sp-12); padding-block: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.09);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  font-size: .8rem;
}
.social-row { display: flex; gap: 9px; }
.social-btn {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.07); color: #C9D6EA; transition: all .2s;
}
.social-btn:hover { background: var(--blue-600); color: #fff; transform: translateY(-3px); }
.social-btn svg { width: 17px; height: 17px; }

/* ---------- 23. Misc components ---------- */
.route-card {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); transition: all .25s var(--ease);
}
.route-card:hover { border-color: var(--blue-400); box-shadow: var(--sh-sm); text-decoration: none; transform: translateX(4px); }
.route-path { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .95rem; }
.route-line { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--gray-300) 0 5px, transparent 5px 10px); position: relative; min-width: 40px; }
.route-line::after {
  content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
  border-left: 6px solid var(--blue-600); border-block: 4px solid transparent;
}

.map-wrap { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--navy-850); }
.map-pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--cyan-400); box-shadow: 0 0 0 4px rgba(0,194,224,.22);
  cursor: pointer; transition: transform .2s;
}
.map-pin:hover, .map-pin.is-active { transform: translate(-50%,-50%) scale(1.5); background: var(--gold-400); box-shadow: 0 0 0 6px rgba(201,162,39,.28); }
.map-pin.is-hq { background: var(--gold-500); box-shadow: 0 0 0 5px rgba(201,162,39,.28); }
.map-pin::after {
  content: attr(data-city); position: absolute; bottom: 150%; left: 50%; transform: translateX(-50%);
  background: var(--navy-900); color: #fff; font-size: .68rem; font-weight: 700; padding: 3px 8px;
  border-radius: var(--r-sm); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.map-pin:hover::after { opacity: 1; }

.logo-strip { display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap; justify-content: center; }
.logo-item {
  font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; color: var(--gray-400);
  filter: grayscale(1); opacity: .75; transition: all .25s;
  display: inline-flex; align-items: center; gap: 8px;
}
.logo-item:hover { opacity: 1; filter: none; color: var(--text); }
.logo-item svg { width: 24px; height: 24px; }

.quote-result {
  border: 1.5px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-5); background: var(--surface); transition: all .25s var(--ease);
}
.quote-result:hover { border-color: var(--blue-400); box-shadow: var(--sh-md); }
.quote-result.is-best { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(201,162,39,.13); }
.quote-result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.price-big {
  font-size: 1.85rem; font-weight: 800; letter-spacing: -.035em; color: var(--navy-800);
  font-variant-numeric: tabular-nums; line-height: 1;
}
[data-theme="dark"] .price-big { color: #fff; }
.charge-row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 7px 0; font-size: .84rem; border-bottom: 1px dashed var(--border); }
.charge-row:last-child { border-bottom: none; }
.charge-row.is-total { font-weight: 800; font-size: .96rem; border-top: 1.5px solid var(--border); margin-top: 5px; padding-top: 11px; border-bottom: none; }

.qr-box {
  width: 172px; height: 172px; padding: 10px; background: #fff;
  border: 1px solid var(--border); border-radius: var(--r-md); flex: none;
}
.qr-box svg { width: 100%; height: 100%; }

.doc-item {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); transition: all .2s;
}
.doc-item:hover { border-color: var(--blue-400); box-shadow: var(--sh-xs); }
.doc-ico { width: 38px; height: 46px; flex: none; }

.testimonial { display: flex; flex-direction: column; gap: var(--sp-4); height: 100%; }
.testimonial blockquote { font-size: .96rem; line-height: 1.7; color: var(--text); flex: 1; }
.testimonial blockquote::before { content: '"'; font-size: 2.6rem; line-height: 0; color: var(--cyan-500); vertical-align: -.35em; margin-right: 4px; }
.stars { display: flex; gap: 2px; color: var(--gold-500); }
.stars svg { width: 15px; height: 15px; }

.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  width: 100%; padding: var(--sp-4) 0; text-align: left; font-weight: 700; font-size: .98rem; color: var(--text);
}
.accordion-btn svg { width: 19px; height: 19px; color: var(--blue-600); flex: none; transition: transform .25s var(--ease); }
.accordion-item.is-open .accordion-btn svg { transform: rotate(45deg); }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height .32s var(--ease); }
/* generous headroom: the panel is clipped to this when open, and a long
   answer in a narrow column runs taller than it looks like it should */
.accordion-item.is-open .accordion-panel { max-height: 1000px; }
.accordion-panel > div { padding-bottom: var(--sp-4); color: var(--text-muted); font-size: .92rem; line-height: 1.7; }

.breadcrumbs { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--text-muted); flex-wrap: wrap; }
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--blue-600); }
.breadcrumbs svg { width: 13px; height: 13px; opacity: .5; }

.page-hero {
  background: linear-gradient(120deg, var(--navy-900) 0%, var(--navy-800) 48%, var(--navy-700) 100%);
  color: #fff; padding-block: clamp(48px, 7vw, 80px); position: relative; overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(0,194,224,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0,194,224,.07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 60% 80% at 80% 30%, #000, transparent 72%);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; margin-block: var(--sp-3); }
.page-hero p { color: #A7B8D4; max-width: 640px; }

.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-sm);
}
@keyframes shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }

.empty-state { text-align: center; padding: var(--sp-12) var(--sp-5); }
.empty-state svg { width: 52px; height: 52px; color: var(--gray-300); margin: 0 auto var(--sp-4); }
.empty-state h4 { margin-bottom: 6px; }

.spinner {
  width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.32);
  border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite;
}
.spinner-dark { border-color: var(--gray-200); border-top-color: var(--blue-600); }
@keyframes spin { to { transform: rotate(360deg) } }

/* Bar chart (pure CSS) */
.bars { display: flex; align-items: flex-end; gap: 8px; height: 168px; }
.bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; height: 100%; }
.bar {
  width: 100%; max-width: 40px; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
  min-height: 4px; transition: height .6s var(--ease); position: relative;
}
.bar:hover { background: linear-gradient(180deg, var(--cyan-400), var(--blue-500)); }
.bar[data-alt="1"] { background: linear-gradient(180deg, var(--cyan-400), var(--cyan-500)); }
.bar-label { font-size: .68rem; color: var(--text-muted); font-weight: 700; }

.donut { --pct: 60; width: 128px; height: 128px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--blue-600) calc(var(--pct) * 1%), var(--gray-200) 0);
  display: grid; place-items: center; position: relative; }
.donut::after { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: var(--surface); }
.donut > span { position: relative; z-index: 2; font-weight: 800; font-size: 1.2rem; }

.spark { display: flex; align-items: flex-end; gap: 2px; height: 34px; }
.spark i { flex: 1; background: var(--cyan-400); border-radius: 2px 2px 0 0; opacity: .75; }

/* ============================================================
   24. Container guide — illustrations and motion
   Self-contained: lift this block plus the .cnt-* markup and it
   works anywhere. Every animation here is neutralised by the global
   prefers-reduced-motion rule near the top of this file, and the
   page script skips the entrance observer entirely in that case.
   ============================================================ */
.cnt-filters {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: 14px 18px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--sh-xs);
  position: sticky; top: calc(var(--header-h) + 8px); z-index: 30;
  backdrop-filter: blur(12px);
}
.cnt-filters .chip { transition: all .2s var(--ease); }
.cnt-filters .chip.is-active { transform: translateY(-1px); box-shadow: var(--sh-sm); }

.cnt-grid { align-items: start; }

/* --- card --- */
.cnt-card {
  display: flex; flex-direction: column;
  padding-top: 0; overflow: hidden;
  transition: transform .5s var(--ease), opacity .5s var(--ease),
              box-shadow .34s var(--ease), border-color .34s var(--ease);
  /* staggered entrance, driven by --i set in markup and zeroed by the
     script once the card has arrived so hover stays instant */
  transition-delay: calc(var(--i, 0) * 55ms);
}
/* The grid is only "armed" once the page script is running, so a script
   failure leaves every card visible rather than blank. */
.cnt-grid.is-armed .cnt-card { opacity: 0; transform: translateY(22px); }
.cnt-grid.is-armed .cnt-card.is-in { opacity: 1; transform: none; }

.cnt-card:hover,
.cnt-grid.is-armed .cnt-card.is-in:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-lg);
  border-color: var(--blue-400);
  transition-delay: 0s;
}
.cnt-card.is-filtered,
.cnt-grid.is-armed .cnt-card.is-in.is-filtered {
  opacity: 0; transform: scale(.94) translateY(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  transition-delay: 0s;
}

/* --- illustration stage --- */
.cnt-stage {
  margin: 0 calc(var(--sp-6) * -1) var(--sp-5);
  padding: 10px 0 0;
  background:
    radial-gradient(ellipse 62% 58% at 50% 58%, rgba(21, 84, 240, .10), transparent 70%),
    linear-gradient(180deg, var(--gray-50), var(--surface));
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
[data-theme="dark"] .cnt-stage {
  background:
    radial-gradient(ellipse 62% 58% at 50% 58%, rgba(0, 194, 224, .14), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), transparent);
}
.cnt-svg { width: 100%; height: auto; display: block; }

/* the box breathes, and lifts when you hover the card */
.cnt-body {
  transform-origin: 50% 75%;
  animation: cntFloat 6s ease-in-out infinite;
  transition: transform .45s var(--ease);
}
.cnt-card:hover .cnt-body { transform: translateY(-7px) scale(1.045); }
.cnt-shadow { transition: transform .45s var(--ease), opacity .45s var(--ease); }
.cnt-card:hover .cnt-shadow { transform: scaleX(.86); opacity: .2; }

/* doors swing open on hover — only on types that have them */
.cnt-doors { transition: transform .5s var(--ease); }
.cnt-card:hover .cnt-doors { transform: rotateY(-58deg) skewY(-6deg); }

/* a light sweeps across the corrugations on hover */
.cnt-sheen { transform: translateX(0); opacity: 0; }
.cnt-card:hover .cnt-sheen { animation: cntSheen 1.1s var(--ease) .12s; }

/* reefer cooling indicator, always alive but quiet */
.cnt-led { animation: cntPulse 2.4s ease-in-out infinite; transform-origin: center; }

/* open-top tarpaulin peels back, flat-rack load settles */
.cnt-tarp { transition: transform .5s var(--ease); transform-origin: 50% 100%; }
.cnt-card:hover .cnt-tarp { transform: translateY(-9px) scaleY(1.25); }
.cnt-load { transition: transform .45s var(--ease); }
.cnt-card:hover .cnt-load { transform: translateY(-4px); }

@keyframes cntFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes cntSheen {
  from { transform: translateX(0);     opacity: 0; }
  15%  {                               opacity: 1; }
  to   { transform: translateX(330px); opacity: 0; }
}
@keyframes cntPulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

/* --- capacity bar --- */
.cnt-bar { height: 5px; border-radius: 3px; background: var(--gray-200); overflow: hidden; }
.cnt-bar > span {
  display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--blue-600), var(--cyan-500));
  transition: width 1.1s var(--ease) .15s;
}
.cnt-card.is-in .cnt-bar > span { width: var(--w); }

/* --- spec list --- */
.cnt-spec { margin: 0; font-size: .78rem; }
.cnt-spec > div {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: 6px 0; border-bottom: 1px dashed var(--border);
}
.cnt-spec > div:last-child { border-bottom: none; }
.cnt-spec dt { color: var(--text-muted); }
.cnt-spec dd { margin: 0; font-weight: 700; text-align: right; }

.cnt-card .cnt-cta { margin-top: auto; }
.cnt-cta { transition: transform .2s var(--ease); }
.cnt-card:hover .cnt-cta { transform: translateY(-2px); }

@media (max-width: 700px) {
  .cnt-filters { position: static; }
}

/* ---------- 25. Checkbox tile grid ---------- */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
}
.check-tile {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; cursor: pointer;
  background: var(--surface);
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  font-size: .85rem; font-weight: 600; line-height: 1.3;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.check-tile:hover { border-color: var(--blue-400); }
.check-tile input {
  width: 17px; height: 17px; flex: none; margin: 0;
  accent-color: var(--blue-600); cursor: pointer;
}
.check-tile.is-on {
  border-color: var(--blue-600);
  background: rgba(21, 84, 240, .06);
  color: var(--blue-600);
}
.check-tile:focus-within { box-shadow: var(--sh-glow); }
@media (max-width: 620px) {
  .check-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
}

/* ---------- 25. Country flags ---------- */
.flag {
  display: inline-block; vertical-align: middle; flex: none;
  background: var(--gray-100);
}
[data-theme="dark"] .flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset !important; }
.flag-lg { width: 40px; height: 30px; }
.dropdown-item .flag { margin-right: 2px; }
[dir="rtl"] .dropdown-item .flag { margin-right: 0; margin-left: 2px; }

/* ---------- 26. Menu builder ---------- */
.menu-list { display: flex; flex-direction: column; gap: 7px; }
.menu-node { position: relative; }
.menu-node + .menu-node { margin-top: 7px; }
.menu-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: var(--r-md);
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.menu-row:hover { border-color: var(--blue-400); background: var(--surface); }
.menu-row.is-off { opacity: .55; border-style: dashed; }
.menu-grip { cursor: grab; color: var(--gray-400); flex: none; display: inline-flex; }
.menu-grip:active { cursor: grabbing; }
.menu-node.is-dragging > .menu-row { opacity: .4; box-shadow: var(--sh-md); }
.menu-node.drop-before > .menu-row { box-shadow: 0 -3px 0 var(--blue-600); }
.menu-node.drop-after  > .menu-row { box-shadow: 0 3px 0 var(--blue-600); }
.menu-node.drop-inside > .menu-row { border-color: var(--blue-600); background: rgba(21,84,240,.08); box-shadow: var(--sh-glow); }
.menu-node .menu-list { margin-top: 7px; padding-left: 4px; border-left: 2px dashed var(--border); }

/* ============================================================
   28. Service detail — animated scene, icons, gallery
   Motion here is decorative only: the global prefers-reduced-motion
   rule near the top of this file neutralises every animation, and
   the page script skips the entrance observers in that case.
   ============================================================ */

/* ---- the animated stage under the hero ---- */
.svc-stage {
  position: relative;
  margin-top: calc(var(--sp-10) * -1);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--sh-lg);
  background: var(--navy-900);
}
.svc-scene { display: block; width: 100%; height: auto; }

.svc-chips {
  position: absolute; inset: auto 0 0 0;
  display: flex; flex-wrap: wrap; gap: 9px;
  padding: 34px 20px 16px;
  background: linear-gradient(0deg, rgba(5, 14, 31, .78), transparent);
  pointer-events: none;
}
.svc-chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: blur(10px);
  color: #E8EFFA; font-size: .74rem; font-weight: 600; white-space: nowrap;
  opacity: 0; transform: translateY(12px);
  animation: scChip .6s var(--ease) forwards;
}
.svc-chip b { color: #fff; font-size: .95rem; font-weight: 800; letter-spacing: -.01em; }
@keyframes scChip { to { opacity: 1; transform: none; } }

/* ---- scene motion primitives ---- */
.sc-float    { animation: scFloat 5.5s ease-in-out infinite; }
.sc-float-sl { animation: scFloat 8.5s ease-in-out infinite; }
.sc-bob      { animation: scBob 4.6s ease-in-out infinite; }
.sc-drift    { animation: scDrift 30s linear infinite; }
.sc-drift-md { animation: scDrift 19s linear infinite; }
.sc-drift-fa { animation: scDrift 11s linear infinite; }
.sc-wheel    { animation: scSpin 1.4s linear infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.sc-ring     { animation: scSpin 24s linear infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.sc-ring-r   { animation: scSpinR 34s linear infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.sc-halo     { animation: scHalo 4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
/* dash periods must match the keyframe distance or the loop visibly jumps:
   .sc-trail expects a 32-unit dash pattern, .sc-trail-lg a 64-unit one */
.sc-trail    { animation: scTrail 1.3s linear infinite; }
.sc-trail-lg { animation: scTrailLg 1.5s linear infinite; }
.sc-swing    { animation: scSwing 5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
.sc-press    { animation: scPress 3.4s ease-in-out infinite; }
.sc-blink    { animation: scBlink 2.6s ease-in-out infinite; }
.sc-blink-2  { animation: scBlink 2.6s ease-in-out .9s infinite; }
.sc-blink-3  { animation: scBlink 2.6s ease-in-out 1.8s infinite; }

/* the service icon draws itself inside the medallion */
.sc-glyph > * {
  stroke-dasharray: 300; stroke-dashoffset: 300;
  animation: scDraw 2.4s var(--ease) .3s forwards;
}

@keyframes scFloat { 0%, 100% { transform: translateY(0); }      50% { transform: translateY(-8px); } }
@keyframes scBob   { 0%, 100% { transform: translateY(0) rotate(-.7deg); }
                     50%      { transform: translateY(-5px) rotate(.9deg); } }
@keyframes scDrift { from { transform: translateX(0); } to { transform: translateX(-720px); } }
@keyframes scSpin  { to { transform: rotate(360deg); } }
@keyframes scSpinR { to { transform: rotate(-360deg); } }
@keyframes scHalo  { 0%, 100% { transform: scale(1); opacity: .55; }
                     50%      { transform: scale(1.14); opacity: .2; } }
@keyframes scTrail   { to { stroke-dashoffset: -32; } }
@keyframes scTrailLg { to { stroke-dashoffset: -64; } }
@keyframes scSwing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes scPress { 0%, 62%, 100% { transform: translateY(0); } 74%, 82% { transform: translateY(9px); } }
@keyframes scBlink { 0%, 100% { opacity: .25; } 45% { opacity: 1; } }
@keyframes scDraw  { to { stroke-dashoffset: 0; } }

/* ---- "what is included" — animated icon tiles ---- */
.svc-feats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 13px;
}
.svc-feat {
  /* --hover is read by the shared .rs-stagger rules in section 29, which
     outrank this block's own :hover when the grid is armed */
  --hover: translateY(-4px);
  display: flex; align-items: flex-start; gap: 13px;
  padding: 16px 17px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px;
  transition: opacity .55s var(--ease), transform .55s var(--ease),
              box-shadow .3s var(--ease), border-color .3s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
/* only hidden once the script arms the grid, so no script = no blank page */
.svc-feats.is-armed .svc-feat { opacity: 0; transform: translateY(18px); }
.svc-feats.is-armed .svc-feat.is-in { opacity: 1; transform: none; }
.svc-feat:hover,
.svc-feats.is-armed .svc-feat.is-in:hover {
  transform: translateY(-4px);
  border-color: var(--blue-400); box-shadow: var(--sh-md);
  transition-delay: 0s;
}
.svc-feat-ico {
  flex: none; width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--accent, var(--blue-600)), var(--cyan-500));
  box-shadow: 0 7px 18px -6px var(--accent, var(--blue-600));
  transition: transform .45s var(--ease), border-radius .45s var(--ease);
}
.svc-feat:hover .svc-feat-ico { transform: rotate(-9deg) scale(1.09); border-radius: 50%; }
.svc-feat.is-in .svc-feat-ico svg > * {
  stroke-dasharray: 260; stroke-dashoffset: 260;
  animation: scDraw 1.2s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 70ms + 140ms);
}
.svc-feat-txt { font-size: .87rem; line-height: 1.55; font-weight: 600; }

/* ---- photo mosaic ---- */
.svc-gallery { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; }
.svc-shot {
  position: relative; display: block; margin: 0;
  overflow: hidden; border-radius: 18px;
  border: 1px solid var(--border); background: var(--bg-alt);
}
.svc-shot--main { grid-row: span 2; }
.svc-shot--side { aspect-ratio: 16 / 10; }
.svc-shot img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transition: transform .9s var(--ease), filter .5s var(--ease);
}
.svc-shot:hover img { transform: scale(1.06); filter: saturate(1.08); }
.svc-shot figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 30px 14px 12px;
  color: #fff; font-size: .76rem; font-weight: 600; line-height: 1.4;
  background: linear-gradient(0deg, rgba(5, 14, 31, .88), transparent);
  transform: translateY(7px); opacity: .82;
  transition: transform .38s var(--ease), opacity .38s var(--ease);
}
.svc-shot:hover figcaption { transform: none; opacity: 1; }

/* ---- wide image band ---- */
.svc-band {
  position: relative; overflow: hidden; border-radius: 20px;
  border: 1px solid var(--border);
}
.svc-band img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  aspect-ratio: 21 / 9;
  transition: transform 1.1s var(--ease);
}
.svc-band:hover img { transform: scale(1.04); }
.svc-band-txt {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(18px, 4vw, 34px);
  background: linear-gradient(70deg, rgba(5, 14, 31, .88), rgba(5, 14, 31, .12) 72%);
  color: #fff;
}
.svc-band-txt p { color: #C9D8EE; font-size: .88rem; max-width: 46ch; margin-top: 6px; }

/* ---- how it works ---- */
.svc-flow .tl-item {
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.svc-flow.is-armed .tl-item { opacity: 0; transform: translateX(14px); }
.svc-flow.is-armed .tl-item.is-in { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .svc-stage { margin-top: calc(var(--sp-6) * -1); border-radius: 18px; }
  .svc-chips { padding: 26px 13px 12px; }
  .svc-chip { font-size: .68rem; padding: 5px 10px; }
  .svc-gallery { grid-template-columns: 1fr; }
  .svc-shot--main { grid-row: auto; aspect-ratio: 16 / 10; }
}

/* ============================================================
   29. Home page — photo tiles, animated icons, marquee

   Entrance uses one primitive, .rs-stagger, shared with anything else
   that wants it. Two rules make it safe:
     · the grid only hides its children once the script adds .is-armed,
       so a script failure leaves the page fully readable
     · the rest and hover transforms come from --rest / --hover, because
       a generic ".is-in { transform: none }" would otherwise outrank
       every tile's own :hover rule
   ============================================================ */
/* [data-reveal], the site-wide entrance. The script adds .rs-reveal only
   once its observer is running, so no script means no hidden content.
   The arrived state sits inside :where() — zero specificity — so a
   component's own :hover transform still beats it. Were :where()
   unsupported the rule would simply drop, and the element would fall back
   to its natural visible state, which is the right failure. */
:where([data-reveal].rs-reveal) {
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal].rs-reveal:not(.is-in) { opacity: 0; transform: translateY(22px); }
:where([data-reveal].rs-reveal.is-in) { opacity: 1; transform: none; }

.rs-stagger > * {
  transition: opacity .55s var(--ease), transform .55s var(--ease),
              box-shadow .3s var(--ease), border-color .3s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.rs-stagger.is-armed > *            { opacity: 0; transform: translateY(20px); }
.rs-stagger.is-armed > .is-in       { opacity: 1; transform: var(--rest, none); }
.rs-stagger.is-armed > .is-in:hover { transform: var(--hover, var(--rest, none)); transition-delay: 0s; }

/* Icons that draw themselves once their tile arrives. Gated on .is-in so
   the undrawn state only ever exists while the animation is about to run
   — without the gate, a tile that never enters would show no icon at all. */
.is-in .rs-draw > * {
  stroke-dasharray: 260; stroke-dashoffset: 260;
  animation: scDraw 1.2s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 70ms + 200ms);
}

/* ---- service tile with a photo ---- */
.svc-tile {
  --hover: translateY(-6px);
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
}
.svc-tile:hover { transform: var(--hover); box-shadow: var(--sh-lg); border-color: var(--blue-400); }
.svc-tile-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-alt); }
.svc-tile-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s var(--ease), filter .5s var(--ease);
}
.svc-tile:hover .svc-tile-media img { transform: scale(1.07); filter: saturate(1.08); }
.svc-tile-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(5, 14, 31, .8), rgba(5, 14, 31, .05) 58%, transparent);
}
.svc-tile-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(9px); color: #fff;
}
.svc-tile-badge {
  position: absolute; left: 18px; bottom: -24px; z-index: 2;
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--blue-600), var(--cyan-500));
  box-shadow: 0 12px 26px -10px rgba(21, 84, 240, .9);
  transition: transform .45s var(--ease), border-radius .45s var(--ease);
}
.svc-tile:hover .svc-tile-badge { transform: translateY(-5px) rotate(-9deg); border-radius: 50%; }
.svc-tile-body { padding: 38px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.svc-tile-go { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 6px;
  color: var(--blue-600); font-weight: 700; font-size: .85rem; }
.svc-tile-go svg { transition: transform .3s var(--ease); }
.svc-tile:hover .svc-tile-go svg { transform: translateX(5px); }

/* ---- workflow step ---- */
.flow-step { --hover: translateY(-4px); }
.flow-num {
  position: relative; width: 46px; height: 46px; border-radius: 14px; flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.02rem;
  background: linear-gradient(135deg, var(--navy-800), var(--blue-600));
}
.flow-num::after {
  content: ""; position: absolute; inset: -6px; border-radius: 19px;
  border: 1.5px dashed var(--blue-400);
  opacity: 0; transform: scale(.82);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.flow-step.is-in .flow-num::after { opacity: .5; transform: none; }
.flow-step:hover .flow-num::after { opacity: 1; animation: flowSpin 9s linear infinite; }
@keyframes flowSpin { to { transform: rotate(360deg); } }
.flow-ico { transition: transform .4s var(--ease), background .3s var(--ease); }
.flow-step:hover .flow-ico { transform: rotate(-8deg) scale(1.08); }

/* ---- why tile ---- */
.why-tile { --hover: translateY(-4px); position: relative; overflow: hidden; }
.why-tile::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--blue-600), var(--cyan-500));
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .45s var(--ease);
}
.why-tile.is-in::before { transform: scaleY(1); }
.why-tile .icon-badge { transition: transform .4s var(--ease); }
.why-tile:hover .icon-badge { transform: rotate(-8deg) scale(1.08); }

/* ---- carrier marquee ---- */
.logo-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* No gap on the track: each half carries its own trailing space instead, so
   translating exactly -50% lands the copy where the original was. A gap here
   would leave half of it behind and the loop would visibly jump. */
.logo-marquee-track {
  display: flex; align-items: center; gap: 0;
  width: max-content;
  animation: logoScroll 52s linear infinite;
}
.logo-marquee-track > .logo-strip { padding-right: var(--sp-10); }
.logo-marquee:hover .logo-marquee-track,
.logo-marquee:focus-within .logo-marquee-track { animation-play-state: paused; }
@keyframes logoScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  /* a paused marquee would hide half the list — wrap it instead */
  .logo-marquee-track { width: auto; flex-wrap: wrap; justify-content: center; animation: none; }
  .logo-marquee-dup { display: none; }
}

/* ============================================================
   30. World map
   ============================================================ */
.wmap { display: block; width: 100%; height: auto; }

/* Land fades up, then the lanes draw themselves along their length.
   Both keep their hidden state inside the keyframes with fill "both"
   rather than in the base rule: if animations never run, the element is
   simply visible, instead of stuck invisible forever. */
.wmap-land path { animation: wmapLand 1.1s var(--ease) both; }
@keyframes wmapLand { from { opacity: 0; } to { opacity: 1; } }

.wmap-lane {
  animation: wmapDraw 2.6s var(--ease) both;
  animation-delay: calc(.5s + var(--seq, 0) * .16s);
}
/* the dash is longer than any lane, so the offset draws the line in once */
@keyframes wmapDraw {
  from { stroke-dasharray: 6000; stroke-dashoffset: 6000; }
  to   { stroke-dasharray: 6000; stroke-dashoffset: 0; }
}

/* a second copy of each lane with a travelling dash, for the sense of
   traffic; 18 units is one full dash period so the loop does not jump */
.wmap-lane-run {
  opacity: .85;
  animation: wmapRun 1.6s linear infinite;
}
@keyframes wmapRun { to { stroke-dashoffset: -18; } }

.wmap-ships circle { filter: drop-shadow(0 0 4px rgba(123, 232, 248, .9)); }

.wmap-hub { transform-box: fill-box; }
.wmap-ping {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: wmapPing 3.2s ease-out infinite;
  animation-delay: calc(var(--i, 0) * .26s);
}
.wmap-hub.is-office .wmap-ping { animation-duration: 2.4s; }
@keyframes wmapPing {
  0%   { transform: scale(1);   opacity: .9; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* map legend */
.wmap-legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  justify-content: center; align-items: center;
  font-size: .74rem; color: #8FA2BF;
}
.wmap-legend span { display: inline-flex; align-items: center; gap: 7px; }
.wmap-key { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.wmap-key--office { background: var(--gold-400); box-shadow: 0 0 0 3px rgba(224, 188, 75, .22); }
.wmap-key--hub    { background: var(--cyan-400); box-shadow: 0 0 0 3px rgba(0, 194, 224, .2); }
.wmap-key--lane   { width: 22px; height: 2px; border-radius: 2px; background: var(--cyan-400); }

@media (prefers-reduced-motion: reduce) {
  /* the global rule flattens durations, so the draw-in lands on its end
     state immediately; the looping decoration is dropped outright, and
     the script omits the SMIL vessels, which ignore this preference */
  .wmap-lane-run, .wmap-ping { display: none; }
}

/* ============================================================
   31. Insights — lead story, article cards, reading progress
   Article cards reuse the .svc-tile photo-tile from section 29;
   only what is genuinely different lives here.
   ============================================================ */
.art-feature {
  display: grid; grid-template-columns: 1.05fr 1fr;
  padding: 0; overflow: hidden; align-items: stretch;
  --hover: translateY(-5px);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.art-feature:hover { transform: var(--hover); box-shadow: var(--sh-lg); border-color: var(--blue-400); }
.art-feature-media { position: relative; overflow: hidden; min-height: 300px; background: var(--bg-alt); }
.art-feature-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease);
}
.art-feature:hover .art-feature-media img { transform: scale(1.05); }
.art-feature-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5, 14, 31, .35), transparent 60%);
}
.art-feature-body { padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; justify-content: center; }
.art-feature-body h3 { font-size: clamp(1.2rem, 2.3vw, 1.62rem); line-height: 1.25; letter-spacing: -.02em; }

.art-meta { display: flex; align-items: center; gap: 10px; }   /* .avatar-sm already exists, section 23 */

/* The cards fade out before they are pulled from the flow. The longer
   selector is deliberate: it has to outrank .rs-stagger's arrived state,
   which would otherwise hold the card visible at full opacity. */
.art-card.is-filtered,
.rs-stagger.is-armed > .art-card.is-filtered {
  opacity: 0; transform: scale(.95) translateY(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  transition-delay: 0s;
}

/* numbered "what to do" list */
.art-do {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border-radius: 12px;
  background: var(--bg-alt);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.art-do:hover { background: var(--surface); transform: translateX(4px); box-shadow: var(--sh-xs); }
.art-do-n {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--blue-600); color: #fff; font-size: .78rem; font-weight: 800;
  transition: transform .3s var(--ease);
}
.art-do:hover .art-do-n { transform: scale(1.12) rotate(-8deg); }

/* reading progress, pinned under the header */
.read-bar {
  position: sticky; top: var(--header-h); z-index: 40;
  height: 3px; background: rgba(21, 84, 240, .12);
}
.read-bar > span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--blue-600), var(--cyan-500));
  transition: width .12s linear;
}

/* the subscribe badge breathes */
.art-pulse { animation: artPulse 3.4s ease-in-out infinite; }
@keyframes artPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(21, 84, 240, .3); }
  50%      { transform: scale(1.05); box-shadow: 0 0 0 14px rgba(21, 84, 240, 0); }
}

@media (max-width: 860px) {
  .art-feature { grid-template-columns: 1fr; }
  .art-feature-media { min-height: 220px; }
}

/* ============================================================
   32. Contact — routes in, form polish, office cards
   ============================================================ */
.ct-way {
  --hover: translateY(-6px);
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.ct-way::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent, var(--blue-600)), var(--cyan-500));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--ease);
}
.ct-way.is-in::before { transform: scaleX(1); }
.ct-way:hover { transform: var(--hover); box-shadow: var(--sh-lg); border-color: var(--accent, var(--blue-400)); }
.ct-way-ico {
  width: 50px; height: 50px; border-radius: 15px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--accent, var(--blue-600)), var(--cyan-500));
  box-shadow: 0 10px 22px -10px var(--accent, var(--blue-600));
  transition: transform .45s var(--ease), border-radius .45s var(--ease);
}
.ct-way:hover .ct-way-ico { transform: rotate(-9deg) scale(1.08); border-radius: 50%; }
.ct-way-go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent, var(--blue-600)); font-weight: 700; font-size: .84rem;
}
.ct-way-go svg { transition: transform .3s var(--ease); }
.ct-way:hover .ct-way-go svg, .ct-office:hover .ct-way-go svg { transform: translateX(5px); }

/* the leading icon in a field wakes up when the field has focus */
.input-group { transition: transform .2s var(--ease); }
.input-group > svg { transition: color .2s var(--ease), transform .25s var(--ease); }
.input-group:focus-within > svg { color: var(--blue-600); transform: scale(1.12); }

.ct-photo {
  margin: 0; position: relative; overflow: hidden;
  border-radius: var(--r-xl); border: 1px solid var(--border);
}
.ct-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform .9s var(--ease);
}
.ct-photo:hover img { transform: scale(1.05); }
.ct-photo figcaption {
  position: absolute; inset: auto 0 0 0; padding: 26px 14px 12px;
  color: #fff; font-size: .78rem; font-weight: 600;
  background: linear-gradient(0deg, rgba(5, 14, 31, .86), transparent);
}

.ct-office { --hover: translateY(-4px); display: flex; flex-direction: column; }
.ct-office:hover { transform: var(--hover); }

/* ---------- 33. Schedules — live indicator ---------- */
.sched-live {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(22, 163, 74, .55);
  animation: schedPing 2.2s ease-out infinite;
}
@keyframes schedPing {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* ============================================================
   34. Document verification
   ============================================================ */
.vf-form { display: flex; gap: 10px; max-width: 620px; flex-wrap: wrap; }
.vf-form .input { letter-spacing: .06em; text-transform: uppercase; }
.vf-chip {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .2);
  color: #C9D6EA;
}
.vf-chip:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* ---- the animated seal illustration ---- */
.vf-stage { border-radius: 22px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--sh-md); }
.vf-scene { display: block; width: 100%; height: auto; }
.vf-sheet  { animation: vfFloat 6s ease-in-out infinite; }
.vf-float  { animation: vfFloat 7.5s ease-in-out infinite; }
/* the beam sweeps the page, pauses, repeats — like a scanner head */
.vf-beam   { animation: vfScan 4.2s ease-in-out infinite; }
.vf-seal   { animation: vfStamp 4.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.vf-ring   { animation: vfSpin 18s linear infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.vf-halo   { animation: vfHalo 4.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.vf-tick   { stroke-dasharray: 60; stroke-dashoffset: 60; animation: vfTick 4.2s ease-in-out infinite; }

@keyframes vfFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes vfScan  { 0% { transform: translateY(0); opacity: 0; }
                     10% { opacity: .55; }
                     55% { transform: translateY(200px); opacity: .55; }
                     65% { transform: translateY(200px); opacity: 0; }
                     100% { transform: translateY(0); opacity: 0; } }
@keyframes vfStamp { 0%, 58% { transform: scale(1); }
                     66% { transform: scale(1.14); }
                     74%, 100% { transform: scale(1); } }
@keyframes vfHalo  { 0%, 58% { opacity: .3; transform: scale(1); }
                     70% { opacity: 1; transform: scale(1.18); }
                     100% { opacity: .3; transform: scale(1); } }
@keyframes vfTick  { 0%, 60% { stroke-dashoffset: 60; }
                     78%, 100% { stroke-dashoffset: 0; } }
@keyframes vfSpin  { to { transform: rotate(360deg); } }

/* ---- result panel ---- */
.vf-result { border-top: 4px solid var(--border); }
.vf-result--ok   { border-top-color: var(--success); }
.vf-result--warn { border-top-color: var(--warning); }
.vf-result--bad  { border-top-color: var(--danger); }
.vf-result--none { border-top-color: var(--gray-300); }

.vf-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vf-seal-badge {
  width: 64px; height: 64px; border-radius: 20px; flex: none;
  display: grid; place-items: center;
  animation: vfPop .5s var(--ease) both;
}
.vf-result--ok   .vf-seal-badge { background: var(--success-bg); color: var(--success); }
.vf-result--warn .vf-seal-badge { background: var(--warning-bg); color: var(--warning); }
.vf-result--bad  .vf-seal-badge { background: var(--danger-bg);  color: var(--danger); }
@keyframes vfPop { from { transform: scale(.6) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }

.vf-pill { margin-left: auto; text-transform: uppercase; letter-spacing: .08em; font-size: .62rem; }
.vf-result--ok   .vf-pill { background: var(--success-bg); color: var(--success); }
.vf-result--warn .vf-pill { background: var(--warning-bg); color: var(--warning); }
.vf-result--bad  .vf-pill { background: var(--danger-bg);  color: var(--danger); }

/* detail rows, staggered in */
.vf-rows { display: flex; flex-direction: column; gap: 11px; }
.vf-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-bottom: 9px; border-bottom: 1px dashed var(--border);
  font-size: .86rem;
}
.vf-row .hint { font-size: .82rem; }
.vf-row strong { text-align: right; }
.vf-row:last-child { border-bottom: none; }

/* a scan line drifting over the QR code */
.vf-qr { position: relative; overflow: hidden; }
.vf-scan {
  position: absolute; left: 0; right: 0; height: 30%;
  background: linear-gradient(180deg, transparent, rgba(0, 194, 224, .45), transparent);
  animation: vfQr 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes vfQr { 0%, 100% { top: -30%; } 50% { top: 100%; } }

.vf-scope ul li { line-height: 1.55; }

@media (max-width: 860px) {
  .vf-stage { margin-bottom: var(--sp-6); }
}
@media print {
  .vf-intro, .vf-scan, [data-vreset], [data-vcopy], [data-vprint] { display: none !important; }
  .vf-result { box-shadow: none; border: 1px solid #999; }
}

/* ============================================================
   35. Quote builder — stepper, choices, quick starts
   ============================================================ */
.step {
  flex-direction: row; align-items: center;
  border: 1px solid transparent;
}
.step .step-num { transition: transform .3s var(--ease), background .25s var(--ease); }
.step .step-num svg { width: 15px; height: 15px; }
.step-label { display: flex; flex-direction: column; gap: 1px; }
.step-sub { font-size: .64rem; font-weight: 600; opacity: .7; letter-spacing: .02em; }
.step:not(:disabled):hover { border-color: var(--blue-400); }
.step.is-current { box-shadow: var(--sh-md); }
.step.is-current .step-num { animation: qStepPulse 2.4s ease-in-out infinite; }
@keyframes qStepPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 194, 224, .5); }
  60%      { box-shadow: 0 0 0 8px rgba(0, 194, 224, 0); }
}
/* the tick draws itself when a step completes */
.step.is-done .step-tick > * {
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: scDraw .5s var(--ease) forwards;
}
.step:disabled .step-num { opacity: .55; }

.progress-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-top: 7px; font-size: .78rem; color: var(--text-muted);
}
.progress-meta strong { color: var(--blue-600); }

/* ---- choice tiles ----
   Entrance uses fill-mode backwards, not both: with "both" the animation's
   end state keeps applying afterwards and would outrank the :hover
   transform. "backwards" only fills before the animation starts, so once
   it finishes the element is back under normal rules and hover works. */
.choice { --hover: translateY(-3px); animation: qIn .42s var(--ease) backwards; }
.choice-grid .choice:nth-child(1) { animation-delay: .03s; }
.choice-grid .choice:nth-child(2) { animation-delay: .08s; }
.choice-grid .choice:nth-child(3) { animation-delay: .13s; }
.choice-grid .choice:nth-child(4) { animation-delay: .18s; }
.choice-grid .choice:nth-child(5) { animation-delay: .23s; }
.choice-grid .choice:nth-child(6) { animation-delay: .28s; }
@keyframes qIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.choice svg.choice-ico { transition: color .2s var(--ease), transform .35s var(--ease); }
.choice:hover svg.choice-ico { transform: scale(1.12) rotate(-6deg); }
.choice.is-selected svg.choice-ico { transform: scale(1.1); }
/* the tick on a selected tile pops rather than appearing */
.choice.is-selected::after { animation: qTick .34s var(--ease) both; }
@keyframes qTick { from { transform: scale(0) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- quick starts ---- */
.qp-block {
  padding: 18px; border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(21, 84, 240, .06), rgba(0, 194, 224, .06));
  border: 1px solid var(--border);
}
.qp-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.qp-card {
  --hover: translateY(-3px);
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 13px 14px; border-radius: var(--r-lg);
  background: var(--surface); border: 1.5px solid var(--border);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.qp-card:hover { border-color: var(--blue-600); box-shadow: var(--sh-md); transform: var(--hover); }
.qp-ico {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--blue-600), var(--cyan-500));
  transition: transform .4s var(--ease), border-radius .4s var(--ease);
}
.qp-card:hover .qp-ico { transform: rotate(-8deg) scale(1.07); border-radius: 50%; }
.qp-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qp-txt strong { font-size: .87rem; font-weight: 700; }
.qp-txt small { font-size: .74rem; color: var(--text-muted); line-height: 1.35; }
.qp-go { color: var(--blue-600); flex: none; transition: transform .3s var(--ease); }
.qp-card:hover .qp-go { transform: translateX(4px); }

/* ---- the photo on the summary rail ---- */
/* bleeds to the card edges — .card uses --sp-6 padding and --r-lg radius */
.q-shot {
  margin: 0 calc(var(--sp-6) * -1) var(--sp-5);
  position: relative; overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--bg-alt);
}
.q-shot img {
  display: block; width: 100%; height: 132px; object-fit: cover;
  animation: qShot .5s var(--ease) both;
}
@keyframes qShot { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.q-shot figcaption {
  position: absolute; inset: auto 0 0 0; padding: 22px 16px 10px;
  color: #fff; font-size: .76rem; font-weight: 700;
  background: linear-gradient(0deg, rgba(5, 14, 31, .85), transparent);
}

@media (max-width: 900px) {
  .step-sub { display: none; }
}

/* ============================================================
   36. Tracking — milestone rail, route map, shipment cards
   ============================================================ */
.trk-rail {
  display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px;
  counter-reset: stage;
}
.trk-stage {
  flex: 1; min-width: 92px; display: flex; flex-direction: column;
  align-items: center; gap: 7px; text-align: center; position: relative;
  padding-top: 4px;
  animation: qIn .45s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
/* the connecting line sits behind the dots */
.trk-stage::before {
  content: ""; position: absolute; top: 20px; left: -50%; width: 100%; height: 2px;
  background: var(--gray-200); z-index: 0;
}
.trk-stage:first-child::before { display: none; }
.trk-stage.is-done::before { background: var(--success); }
.trk-dot {
  position: relative; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--gray-100); color: var(--gray-400);
  border: 2px solid var(--surface);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.trk-stage.is-done .trk-dot { background: var(--success-bg); color: var(--success); }
.trk-stage.is-current .trk-dot {
  background: var(--blue-600); color: #fff;
  animation: qStepPulse 2.4s ease-in-out infinite;
}
.trk-stage-l { font-size: .72rem; font-weight: 700; color: var(--text-muted); line-height: 1.2; }
.trk-stage.is-done .trk-stage-l { color: var(--text); }
.trk-stage.is-current .trk-stage-l { color: var(--blue-600); }
.trk-tick > * {
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: scDraw .5s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 60ms + 200ms);
}

/* arrival line */
.trk-eta {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 15px; border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(21, 84, 240, .07), rgba(0, 194, 224, .07));
  border: 1px solid var(--border);
  font-size: .88rem;
}
.trk-eta svg { color: var(--blue-600); flex: none; }

/* route overlay on the world map */
.trk-plan { animation: scTrail 1.6s linear infinite; }
.trk-done { transition: stroke-dashoffset 1.2s var(--ease); }
.trk-ping {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: wmapPing 2.6s ease-out infinite;
}

/* shipment cards on the landing view */
.trk-card { --hover: translateY(-5px); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.trk-card:hover { transform: var(--hover); }
.trk-card-media { position: relative; aspect-ratio: 21 / 9; overflow: hidden; background: var(--bg-alt); }
.trk-card-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s var(--ease);
}
.trk-card:hover .trk-card-media img { transform: scale(1.06); }
.trk-card-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(5, 14, 31, .55), transparent 60%);
}
.trk-card-flag { position: absolute; right: 12px; top: 12px; z-index: 2; }
.trk-card-body { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; }

@media (max-width: 700px) {
  .trk-stage { min-width: 74px; }
  .trk-stage-l { font-size: .64rem; }
}

/* ============================================================
   37. Admin setup wizard
   ============================================================ */
.su-card { min-height: 380px; }

.su-hero {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 22px; border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(21, 84, 240, .08), rgba(0, 194, 224, .08));
  border: 1px solid var(--border);
}
.su-hero-ico {
  width: 62px; height: 62px; border-radius: 19px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--blue-600), var(--cyan-500));
  box-shadow: 0 12px 26px -12px var(--blue-600);
  animation: suFloat 5s ease-in-out infinite;
}
.su-hero-ico.is-done { background: linear-gradient(135deg, var(--success), var(--cyan-500)); }
.su-hero-ico svg > * {
  stroke-dasharray: 260; stroke-dashoffset: 260;
  animation: scDraw 1.3s var(--ease) .2s forwards;
}
@keyframes suFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* the six things the wizard covers */
.su-task {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 14px; border-radius: var(--r-lg);
  background: var(--bg-alt); border: 1px solid var(--border);
  animation: qIn .45s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.su-task-ico {
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: rgba(21, 84, 240, .12); color: var(--blue-600);
}
.su-task strong { display: block; font-size: .85rem; }
.su-task small { display: block; font-size: .76rem; color: var(--text-muted); line-height: 1.45; margin-top: 2px; }

.su-logo {
  display: grid; place-items: center; min-height: 96px;
  padding: 16px; border-radius: var(--r-lg);
  background: var(--bg-alt); border: 1px solid var(--border);
}

/* final checklist */
.su-check {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 15px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.su-check.is-ok { border-color: var(--success); background: var(--success-bg); }
.su-check-ico {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--warning-bg); color: var(--warning);
}
.su-check.is-ok .su-check-ico { background: var(--surface); color: var(--success); }
.su-check strong { display: block; font-size: .86rem; }
.su-check small { display: block; font-size: .75rem; color: var(--text-muted); margin-top: 1px; }

/* dashboard banner */
.su-banner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border-left: 4px solid var(--blue-600);
}
.su-banner-ico {
  width: 48px; height: 48px; border-radius: 15px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--blue-600), var(--cyan-500));
  animation: suFloat 5s ease-in-out infinite;
}

/* ============================================================
   38. Sortable admin tables + row action menu
   ============================================================ */
.crud-grip-cell { width: 34px; padding-right: 0 !important; }
.crud-grip {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 7px;
  color: var(--gray-400); cursor: grab;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.crud-grip:active { cursor: grabbing; }
tr.crud-sortable:hover .crud-grip { background: var(--gray-100); color: var(--blue-600); }
tr.crud-sortable.is-dragging { opacity: .45; background: rgba(21, 84, 240, .06); }
tr.crud-sortable.is-dragging .crud-grip { cursor: grabbing; }

/* The actions menu lives in a table cell, and .table-wrap scrolls
   horizontally — which would clip it. The wrap drops its overflow while a
   menu is open; the script toggles this class to match. */
.table td .dropdown { position: relative; }
.table td .dropdown-menu { z-index: 240; }
.table-wrap.has-open-menu { overflow: visible; }
.dropdown-item.is-danger { color: var(--danger); }
.dropdown-item.is-danger:hover { background: var(--danger-bg); }
.dropdown-item.is-danger svg { color: var(--danger); }

/* ---------- 27. RTL support ---------- */
[dir="rtl"] .eyebrow::before { transform: scaleX(-1); }
[dir="rtl"] .nav-links { margin-left: 0; margin-right: auto; }
[dir="rtl"] .timeline { padding-left: 0; padding-right: 30px; }
[dir="rtl"] .timeline::before { left: auto; right: 9px; }
[dir="rtl"] .tl-item::before { left: auto; right: -26px; }
[dir="rtl"] .input-group .input { padding-left: 13px; padding-right: 40px; }
[dir="rtl"] .input-group > svg { left: auto; right: 13px; }
[dir="rtl"] .select { padding-right: 13px; padding-left: 36px; background-position: left 11px center; }
[dir="rtl"] .dropdown-menu { right: auto; left: 0; }
[dir="rtl"] .side-link, [dir="rtl"] .dropdown-item, [dir="rtl"] .mega-item { text-align: right; }
[dir="rtl"] .table thead th, [dir="rtl"] .table tbody td { text-align: right; }
[dir="rtl"] .table .num { text-align: left; }
[dir="rtl"] .text-right { text-align: left; }
[dir="rtl"] .route-line::after {
  right: auto; left: -1px;
  border-left: 0; border-right: 6px solid var(--blue-600);
}
[dir="rtl"] .toast-host { right: auto; left: 22px; }
[dir="rtl"] .switch input:checked + .switch-track::after { transform: translateX(-18px); }
[dir="rtl"] .skip-link { left: auto; right: 16px; }
[dir="rtl"] .hero-overlay {
  background:
    linear-gradient(260deg, rgba(5,14,31,.94) 0%, rgba(7,21,49,.82) 42%, rgba(10,27,61,.35) 78%, rgba(10,27,61,.15) 100%),
    linear-gradient(0deg, rgba(5,14,31,.72) 0%, transparent 46%);
}
[dir="rtl"] .accordion-btn, [dir="rtl"] .choice--row { text-align: right; }
[dir="rtl"] .breadcrumbs svg, [dir="rtl"] .btn svg.rtl-flip { transform: scaleX(-1); }

/* Print */
@media print {
  .site-header, .site-footer, .app-side, .app-topbar, .btn, .hero-controls { display: none !important; }
  body { background: #fff; }
  .app-shell { grid-template-columns: 1fr; }
}

/* ---------- 39. Customer registration & KYC gating ---------- */
/* Entrance animations use `backwards`, never `both`: `both` retains the
   final transform and silently kills every :hover that moves an element. */

.reg-wrap { min-height: 100vh; display: grid; grid-template-columns: 420px 1fr; }
.reg-aside {
  background: linear-gradient(155deg, var(--navy-900), var(--navy-700));
  color: #fff; padding: clamp(28px, 4vw, 48px); position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.reg-aside::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(0,194,224,.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,194,224,.07) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 75% 60% at 50% 30%, #000, transparent 78%);
}
.reg-aside > * { position: relative; }
.reg-aside-h { color: #fff; font-size: 1.45rem; line-height: 1.25; margin: 0; }
.reg-aside-p { color: #8FA2BF; font-size: .87rem; line-height: 1.6; margin: 0; }
.reg-aside-foot { margin-top: auto; color: #7A8CAA; font-size: .83rem; }
.reg-aside-foot a { color: var(--cyan-300); font-weight: 600; }

.reg-scene { width: 100%; max-width: 280px; height: auto; margin: 0 auto; display: block; }
.reg-orbit { animation: regOrbit 18s linear infinite; transform-origin: 0 0; }
.reg-orbit--slow { animation-duration: 27s; animation-direction: reverse; }
.reg-float { animation: regFloat 4.5s var(--ease) infinite; }
@keyframes regOrbit { to { transform: rotate(360deg); } }
@keyframes regFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.reg-rail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.reg-rail-item { display: flex; gap: 12px; align-items: center; padding: 9px 0; position: relative; opacity: .45; transition: opacity .3s; }
.reg-rail-item::after {
  content: ""; position: absolute; left: 15px; top: 34px; bottom: -2px; width: 2px;
  background: rgba(255,255,255,.14);
}
.reg-rail-item:last-child::after { display: none; }
.reg-rail-item.is-done, .reg-rail-item.is-now { opacity: 1; }
.reg-rail-dot {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.09); color: #8FA2BF; transition: all .3s var(--ease);
}
.reg-rail-item.is-now .reg-rail-dot { background: var(--blue-600); color: #fff; box-shadow: 0 0 0 5px rgba(21,84,240,.22); }
.reg-rail-item.is-done .reg-rail-dot { background: var(--success); color: #fff; }
.reg-rail-text strong { display: block; font-size: .87rem; color: #fff; font-weight: 600; }
.reg-rail-text small { font-size: .75rem; color: #7A8CAA; }

.reg-main { padding: clamp(28px, 5vw, 64px); max-width: 760px; width: 100%; margin-inline: auto; display: flex; flex-direction: column; }
.reg-top { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.reg-count { font-size: .78rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; letter-spacing: .02em; }
.reg-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--gray-200); overflow: hidden; }
.reg-bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--blue-600), var(--cyan-400)); transition: width .45s var(--ease); }

.reg-form { display: flex; flex-direction: column; gap: var(--sp-4); animation: regIn .4s var(--ease) backwards; }
@keyframes regIn { from { opacity: 0; transform: translateY(12px); } }
.reg-h { font-size: 1.5rem; margin: 0; }
.reg-p { color: var(--text-muted); font-size: .9rem; line-height: 1.6; margin: 0 0 var(--sp-2); }
.reg-sub { font-size: .92rem; margin: 0 0 calc(var(--sp-1) * -1); }
.req-star { color: var(--danger); }

.reg-form .field.is-bad .input { border-color: var(--danger); background: var(--danger-bg); }
.reg-form .choice-grid.is-bad { outline: 1.5px dashed var(--danger); outline-offset: 6px; border-radius: var(--r-sm); }
.ok-text { color: var(--success); font-weight: 600; }
.warn-text { color: var(--warning); font-weight: 600; }

.choice-grid--2 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.choice-grid--4 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.choice--sm { flex-direction: row; text-align: left; align-items: center; padding: var(--sp-3); }
.choice--sm .choice-body { flex: 1; }

.reg-nav { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.reg-nav .btn.is-blocked { opacity: .5; cursor: not-allowed; }

.reg-review { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.reg-review-grp { border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--sp-4); background: var(--bg-alt); }
.reg-review-grp h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 var(--sp-3); font-size: .85rem; }
.reg-row { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 5px 0; font-size: .82rem; border-bottom: 1px solid var(--border); }
.reg-row:last-child { border-bottom: 0; }
.reg-row > span { color: var(--text-muted); }
.reg-row > strong { text-align: right; font-weight: 600; }

.login-signup { border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--sp-4); background: var(--bg-alt); }

/* ----- KYC banner and gate ----- */
.kyc-banner {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  border: 1px solid var(--warning); background: var(--warning-bg);
  border-radius: var(--r-sm); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-6);
  animation: regIn .45s var(--ease) backwards;
}
.kyc-banner--fresh { border-color: var(--success); background: var(--success-bg); }
.kyc-banner-ico { flex: none; color: var(--warning); }
.kyc-banner--fresh .kyc-banner-ico { color: var(--success); }
.kyc-banner-body { flex: 1; min-width: 0; }
.kyc-banner-body strong { display: block; font-size: .95rem; margin-bottom: 3px; }
.kyc-banner-body p { margin: 0; font-size: .85rem; line-height: 1.6; color: var(--text); }
.kyc-missing { margin-top: var(--sp-2) !important; display: flex; align-items: center; gap: 6px; font-size: .8rem !important; color: var(--text-muted) !important; }

.kyc-gate { text-align: center; padding: clamp(32px, 6vw, 64px) var(--sp-5); border: 1px dashed var(--border); border-radius: var(--r-sm); background: var(--bg-alt); }
.kyc-gate-ico { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto var(--sp-4); display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--blue-600); }
.kyc-gate h2 { font-size: 1.3rem; margin: 0 0 var(--sp-2); }
.kyc-gate > p { max-width: 50ch; margin: 0 auto; color: var(--text-muted); font-size: .89rem; line-height: 1.65; }
.kyc-gate-steps { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-6); }
.kyc-step { display: flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 99px; font-size: .79rem; font-weight: 600; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); }
.kyc-step.is-done { border-color: var(--success); color: var(--success); background: var(--success-bg); }
.kyc-step.is-now { border-color: var(--warning); color: var(--warning); background: var(--warning-bg); }

.side-link.is-locked { opacity: .62; }
.side-link.is-locked:hover { opacity: 1; }
.side-lock { margin-left: auto; display: inline-grid; place-items: center; opacity: .8; }

/* ----- Getting started checklist ----- */
.first-steps-bar { height: 5px; border-radius: 3px; background: var(--gray-200); overflow: hidden; }
.first-steps-bar span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--success), var(--cyan-400)); transition: width .5s var(--ease); }
.first-step { display: flex; align-items: center; gap: var(--sp-3); padding: 11px 0; border-bottom: 1px solid var(--border); }
.first-step:last-child { border-bottom: 0; }
.first-step-tick { flex: none; color: var(--text-muted); display: grid; place-items: center; }
.first-step.is-done .first-step-tick { color: var(--success); }
.first-step-body { flex: 1; min-width: 0; }
.first-step-body strong { display: block; font-size: .87rem; }
.first-step.is-done .first-step-body strong { color: var(--text-muted); text-decoration: line-through; }
.first-step-body small { font-size: .78rem; color: var(--text-muted); line-height: 1.45; }

@media (max-width: 980px) {
  .reg-wrap { grid-template-columns: 1fr; }
  .reg-aside { padding: var(--sp-5); gap: var(--sp-4); }
  .reg-scene { max-width: 180px; }
  .reg-rail { flex-direction: row; overflow-x: auto; gap: var(--sp-2); }
  .reg-rail-item::after { display: none; }
  .reg-rail-text { display: none; }
  .reg-aside-foot { margin-top: var(--sp-3); }
  .kyc-banner { flex-direction: column; gap: var(--sp-3); }
}
[dir="rtl"] .reg-row > strong { text-align: left; }
[dir="rtl"] .reg-rail-item::after { left: auto; right: 15px; }
[dir="rtl"] .side-lock { margin-left: 0; margin-right: auto; }

/* ---------- 40. Email OTP verification ---------- */
.otp-boxes { display: flex; gap: var(--sp-2); justify-content: center; margin: var(--sp-5) 0 var(--sp-2); }
.otp-box {
  width: 54px; height: 64px; text-align: center;
  font-family: var(--font-mono); font-size: 1.6rem; font-weight: 600; color: var(--text);
  border: 1.5px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.otp-box:focus { outline: none; border-color: var(--blue-600); box-shadow: var(--sh-glow); }
.otp-box.is-bad { border-color: var(--danger); background: var(--danger-bg); animation: otpShake .34s var(--ease); }
.otp-box.is-ok { border-color: var(--success); background: var(--success-bg); color: var(--success); }
.otp-box:disabled { opacity: 1; }
@keyframes otpShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  45% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
}

.otp-msg { text-align: center; min-height: 1.25rem; margin: 0; font-size: .84rem; font-weight: 600; }
.otp-msg.is-bad { color: var(--danger); }
.otp-msg.is-ok { color: var(--success); }

.otp-actions { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); }
.otp-timer { font-size: .8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.otp-timer.is-bad { color: var(--danger); font-weight: 600; }
.otp-actions .btn.is-blocked { opacity: .5; cursor: not-allowed; }

.otp-demo {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px dashed var(--warning); background: var(--warning-bg);
  border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); font-size: .83rem;
}
.otp-demo.is-hidden { display: none; }
.otp-demo strong { font-weight: 700; }
.otp-demo small { display: block; margin-top: 4px; color: var(--text-muted); font-size: .76rem; line-height: 1.45; }
.otp-demo-code {
  font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; letter-spacing: .13em;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 1px 8px; margin-inline: 3px;
}
.otp-demo--pulse { animation: otpPulse .6s var(--ease); }
@keyframes otpPulse { 0% { transform: scale(1); } 40% { transform: scale(1.015); } 100% { transform: scale(1); } }

.otp-done { text-align: center; padding: var(--sp-6) var(--sp-4); border: 1px solid var(--success); background: var(--success-bg); border-radius: var(--r-sm); }
.otp-done svg { color: var(--success); margin: 0 auto var(--sp-3); display: block; }
.otp-done strong { display: block; font-size: 1rem; }
.otp-done small { display: block; margin-top: 5px; color: var(--text-muted); font-size: .82rem; line-height: 1.5; max-width: 42ch; margin-inline: auto; }

@media (max-width: 560px) {
  .otp-boxes { gap: 6px; }
  .otp-box { width: 44px; height: 54px; font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .otp-box.is-bad, .otp-demo--pulse, .reg-orbit, .reg-float { animation: none; }
}

/* ---------- 41. OTP channel picker & fallback ---------- */
.otp-channels { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: var(--sp-5); }
.otp-channel {
  display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer;
  padding: var(--sp-3); border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font: inherit;
  transition: border-color .18s, background .18s, transform .18s var(--ease);
}
.otp-channel:hover { border-color: var(--blue-400); transform: translateY(-2px); }
.otp-channel svg { flex: none; color: var(--text-muted); transition: color .18s; }
.otp-channel span { display: block; min-width: 0; }
.otp-channel strong { display: block; font-size: .87rem; font-weight: 700; }
.otp-channel small { display: block; font-size: .73rem; color: var(--text-muted); line-height: 1.35; }
.otp-channel.is-selected { border-color: var(--blue-600); background: rgba(21,84,240,.05); box-shadow: var(--sh-glow); }
.otp-channel.is-selected svg { color: var(--blue-600); }

.otp-fallback { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-3); }

@media (max-width: 560px) {
  .otp-channels { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .otp-channel:hover { transform: none; }
}

/* ---------- 42. Admin — verification (OTP) screen ---------- */
.otp-status { border-left: 4px solid var(--border); }
.otp-status.is-live { border-left-color: var(--success); background: var(--success-bg); }
.otp-status.is-demo { border-left-color: var(--warning); background: var(--warning-bg); }
.otp-status-ico { flex: none; }
.otp-status.is-live .otp-status-ico { color: var(--success); }
.otp-status.is-demo .otp-status-ico { color: var(--warning); }

.otp-row { display: flex; align-items: center; gap: var(--sp-3); padding: 13px 0; border-bottom: 1px solid var(--border); }
.otp-row:last-child { border-bottom: 0; }
.otp-row-ico { flex: none; color: var(--text-muted); display: grid; place-items: center; }
.otp-row-body { flex: 1; min-width: 0; }
.otp-row-body strong { display: block; font-size: .88rem; }
.otp-row-body small { display: block; font-size: .77rem; color: var(--text-muted); line-height: 1.5; }
.otp-row-def { flex: none; font-size: .78rem; }
.otp-row-def input:disabled + span { opacity: .4; }

@media (max-width: 720px) {
  .otp-row { flex-wrap: wrap; }
  .otp-row-body { flex-basis: 100%; order: 3; padding-left: 0; }
  .otp-row-def { margin-left: auto; }
}

/* ---------- 43. Brand logo fallback ---------- */
/* The built-in mark ships next to the <img> and stays hidden until the
   image fails, so a missing logo file degrades to the SVG rather than to
   a broken-image icon. */
.brand-logo { position: relative; }
.brand-logo > .brand-logo-img { display: block; }
.brand-logo > .brand-mark { display: none; }
.brand-logo.is-fallback > .brand-logo-img { display: none; }
.brand-logo.is-fallback > .brand-mark { display: block; }

/* ---------- 44. Admin — sending credentials ---------- */
.cred-block { border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: var(--sp-2); background: var(--surface); }
.cred-block summary {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); cursor: pointer; list-style: none;
}
.cred-block summary::-webkit-details-marker { display: none; }
.cred-block summary::after {
  content: ""; margin-left: auto; width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.cred-block[open] summary::after { transform: rotate(-135deg); }
.cred-block summary:hover { background: var(--bg-alt); }
.cred-ico { flex: none; color: var(--text-muted); display: grid; place-items: center; }
.cred-block.is-ready .cred-ico { color: var(--success); }
.cred-name { font-weight: 700; font-size: .9rem; }
.cred-body { padding: 0 var(--sp-4) var(--sp-4); border-top: 1px solid var(--border); padding-top: var(--sp-4); }

.cred-saved {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 5px;
  font-size: .68rem; font-weight: 700; color: var(--success);
  background: var(--success-bg); border-radius: 99px; padding: 1px 7px;
}
.cred-msg { display: inline-block; margin-left: var(--sp-3); font-size: .8rem; font-weight: 600; }
.cred-msg.is-ok { color: var(--success); }
.cred-msg.is-bad { color: var(--danger); }
.cred-msg.is-warn { color: var(--warning); }

.field--half { grid-column: span 1; }
@media (max-width: 640px) {
  .cred-body .grid-2 { grid-template-columns: 1fr; }
  .cred-msg { display: block; margin: var(--sp-2) 0 0; }
}

/* ---------- 45. Credentials — validation & Twilio check ---------- */
.cred-name { display: flex; flex-direction: column; gap: 1px; }
.cred-name small { font-weight: 400; font-size: .74rem; color: var(--text-muted); line-height: 1.3; }
.cred-block summary .badge { margin-left: auto; flex: none; }
.cred-block summary::after { margin-left: var(--sp-3); }

.cred-block.is-blocked { opacity: .72; }
.cred-block.is-blocked:hover { opacity: 1; }

.cred-bad {
  display: block; margin-top: 5px; font-size: .75rem; line-height: 1.45;
  color: var(--danger); font-weight: 500;
}
.field.is-bad .input { border-color: var(--danger); background: var(--danger-bg); }

.tw-facts { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: 5px; font-size: .82rem; }
.tw-facts span { color: var(--text-muted); }

.cred-body a { font-weight: 600; }

/* ---------- 46. Admin — quote form options ---------- */
.qf-card.is-off { border-color: var(--warning); }
.qf-card.is-off .card-head h3 { color: var(--text-muted); }
.otp-row.is-muted { opacity: .5; }
.otp-row.is-muted:hover { opacity: .75; }

.qf-prev-group { padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.qf-prev-group:last-of-type { border-bottom: 0; }
.qf-prev-legend { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-600); margin-bottom: var(--sp-3); }
.qf-prev-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.qf-prev-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border: 1.5px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); font-size: .82rem; font-weight: 600; color: var(--text);
}
.qf-prev-chip svg { color: var(--text-muted); flex: none; }
.qf-prev-chip.is-first { border-color: var(--blue-600); background: rgba(21,84,240,.05); }
.qf-prev-chip.is-first svg { color: var(--blue-600); }

@media (max-width: 640px) {
  .qf-card .card-head { flex-wrap: wrap; gap: var(--sp-2); }
}

/* ---------- 47. Admin — quick-start preset editor ---------- */
.qp-icons { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.qp-icon {
  position: relative; display: grid; place-items: center;
  width: 44px; height: 44px; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
  color: var(--text-muted); transition: border-color .18s, color .18s, background .18s;
}
.qp-icon input { position: absolute; opacity: 0; width: 0; height: 0; }
.qp-icon:hover { border-color: var(--blue-400); color: var(--text); }
.qp-icon.is-selected { border-color: var(--blue-600); background: rgba(21,84,240,.06); color: var(--blue-600); }

tr.is-muted { opacity: .5; }
tr.is-muted:hover { opacity: .8; }


@media (max-width: 820px) {
  .qp-icons { gap: 6px; }
  .qp-icon { width: 38px; height: 38px; }
}

/* ---------- 48. Admin — lead pipeline bars ---------- */
.lead-bar { flex: 1; height: 10px; border-radius: 5px; background: var(--gray-200); overflow: hidden; min-width: 60px; }
.lead-bar span {
  display: block; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, var(--blue-600), var(--cyan-400));
  transition: width .5s var(--ease);
}
@media (max-width: 720px) {
  .lead-bar { min-width: 40px; }
}

/* ---------- 49. Admin — credit approval queue ---------- */
.cr-req { border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--sp-4); background: var(--surface); }
.cr-req-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.cr-req-change { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.cr-req-change svg { color: var(--text-muted); flex: none; }
.cr-from { font-size: .9rem; color: var(--text-muted); text-decoration: line-through; }
.cr-to { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.cr-reason {
  margin: 0 0 var(--sp-3); padding: 9px 12px; background: var(--bg-alt); border-radius: 8px;
  font-size: .82rem; line-height: 1.55; color: var(--text);
  display: flex; align-items: flex-start; gap: 7px;
}
.cr-reason svg { flex: none; margin-top: 3px; color: var(--text-muted); }
.cr-req-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

@media (max-width: 720px) {
  .cr-req-foot { flex-direction: column; align-items: stretch; }
  .cr-req-foot .row { justify-content: flex-end; }
}

/* ============================================================
   50. Invoice document — screen preview and print
   Sized in mm so the preview matches what actually comes out of a
   printer, rather than looking right on screen and wrong on paper.
   ============================================================ */
.inv-preview-wrap { background: var(--gray-100); padding: var(--sp-5); border-radius: var(--r-sm); overflow: auto; max-height: 70vh; }

.inv-doc {
  --inv-accent: #1554F0;
  width: 210mm; min-height: 297mm; margin: 0 auto; padding: 14mm 14mm 10mm;
  background: #fff; color: #1a1a1a; box-shadow: var(--sh-md);
  font-family: var(--font-sans); font-size: 10.5pt; line-height: 1.5;
  box-sizing: border-box;
}
.inv-doc[data-paper="Letter"] { width: 216mm; min-height: 279mm; }

.inv-head { display: flex; justify-content: space-between; gap: 12mm; padding-bottom: 6mm; border-bottom: 2px solid var(--inv-accent); }
.inv-brand { display: flex; gap: 5mm; align-items: flex-start; }
.inv-logo { flex: none; }
.inv-issuer { font-size: 13pt; font-weight: 700; color: #0b1220; margin-bottom: 1mm; }
.inv-addr { font-size: 9pt; color: #55627a; line-height: 1.45; }
.inv-reg { font-size: 8pt; color: #7a869c; margin-top: .6mm; }

.inv-title-block { text-align: right; flex: none; }
.inv-title { margin: 0 0 3mm; font-size: 20pt; font-weight: 800; color: var(--inv-accent); letter-spacing: -.01em; text-transform: uppercase; }
.inv-meta { margin-left: auto; border-collapse: collapse; font-size: 9pt; }
.inv-meta td { padding: .7mm 0 .7mm 5mm; text-align: right; }
.inv-meta td:first-child { color: #7a869c; padding-left: 0; }

.inv-parties { display: flex; gap: 12mm; padding: 6mm 0; }
.inv-parties > div { flex: 1; }
.inv-label { font-size: 7.5pt; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7a869c; margin-bottom: 1.5mm; }
.inv-party-name { font-size: 12pt; font-weight: 700; color: #0b1220; }
.inv-status { display: inline-block; margin-top: 2mm; padding: 1mm 3mm; border-radius: 3mm; font-size: 8pt; font-weight: 700; background: #eef2f8; color: #55627a; }
.inv-status--paid { background: #e6f6ee; color: #15703f; }
.inv-status--overdue { background: #fdecec; color: #b3261e; }
.inv-status--part-paid { background: #fff5e0; color: #8a5a00; }

.inv-lines { width: 100%; border-collapse: collapse; margin-top: 2mm; }
.inv-lines thead th {
  text-align: left; font-size: 8pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--inv-accent); padding: 2.5mm 3mm;
}
.inv-lines thead th.r, .inv-lines td.r { text-align: right; }
.inv-lines tbody td { padding: 3mm; border-bottom: .3mm solid #e3e8f0; vertical-align: top; font-size: 10pt; }
.inv-line-desc { font-weight: 600; color: #0b1220; }
.inv-line-ref { font-size: 8pt; color: #7a869c; margin-top: .5mm; font-family: var(--font-mono); }

.inv-totals-wrap { display: flex; gap: 12mm; margin-top: 6mm; align-items: flex-start; }
.inv-notes { flex: 1; font-size: 9pt; color: #55627a; }
.inv-notes p { margin: 0 0 2mm; line-height: 1.5; }
.inv-totals { border-collapse: collapse; min-width: 70mm; font-size: 10pt; }
.inv-totals td { padding: 1.8mm 0 1.8mm 8mm; }
.inv-totals td:first-child { color: #55627a; padding-left: 0; }
.inv-totals td.r { text-align: right; font-variant-numeric: tabular-nums; }
.inv-grand td { border-top: .5mm solid #0b1220; border-bottom: .5mm solid #0b1220; font-weight: 800; font-size: 12pt; color: #0b1220; }
.inv-due td { font-weight: 700; color: var(--inv-accent); }

.inv-warn {
  margin-top: 4mm; padding: 2.5mm 3mm; border-left: 1mm solid #d99400; background: #fff8e6;
  font-size: 8.5pt; line-height: 1.5; color: #6b5200; display: flex; gap: 2mm; align-items: flex-start;
}
.inv-warn svg { flex: none; margin-top: .6mm; }

.inv-pay { display: flex; justify-content: space-between; gap: 10mm; margin-top: 8mm; padding-top: 5mm; border-top: .3mm solid #e3e8f0; }
.inv-bank { border-collapse: collapse; font-size: 9pt; }
.inv-bank td { padding: .8mm 0; }
.inv-bank td:first-child { color: #7a869c; padding-right: 6mm; }
.inv-qr { text-align: center; flex: none; }
.inv-qr svg { width: 26mm; height: 26mm; }

.inv-taxnote, .inv-terms { margin: 4mm 0 0; font-size: 8pt; color: #7a869c; line-height: 1.5; }
/* Signature and stamp sit side by side; the stamp can also overlap the
   signature, which is how most companies actually apply one. */
.inv-attest { display: flex; justify-content: space-between; align-items: flex-end; gap: 10mm; margin-top: 12mm; position: relative; }
.inv-attest--left { flex-direction: row-reverse; }
.inv-sign { width: 60mm; }
.inv-sign-line { height: 12mm; }
.inv-sign-img { display: block; height: auto; max-height: 20mm; object-fit: contain; margin-bottom: 1mm; }
.inv-sign-rule { border-bottom: .3mm solid #0b1220; }
.inv-sign-name { font-size: 9pt; font-weight: 600; margin-top: 1.5mm; }
.inv-sign-role { font-size: 8pt; color: #7a869c; }
.inv-stamp { flex: none; }
.inv-stamp img { display: block; height: auto; max-height: 34mm; object-fit: contain; }
.inv-stamp--over { position: absolute; left: 22mm; bottom: 2mm; pointer-events: none; }

.inv-foot { margin-top: 8mm; padding-top: 3mm; border-top: .3mm solid #e3e8f0; text-align: center; font-size: 8pt; color: #7a869c; }

/* `screen and` is load-bearing, not decoration. When a browser lays out for
   print it uses the PAGE as the viewport, and A4 is 210mm = 793.7 CSS px —
   under 900px. Without the `screen` restriction this rule matched while
   printing on any machine, stacking every row of the invoice into a column
   and growing the document from 259mm to 325mm, which is what pushed the
   payment block onto a second sheet. Narrow-screen rules must never reach
   a fixed-width paper document. */
@media screen and (max-width: 900px) {
  .inv-preview-wrap { padding: var(--sp-2); }
  .inv-doc { width: 100%; min-height: 0; padding: var(--sp-5); }
  .inv-head, .inv-parties, .inv-totals-wrap, .inv-pay { flex-direction: column; gap: var(--sp-4); }
  .inv-title-block { text-align: left; }
  .inv-meta { margin-left: 0; }
  .inv-meta td { text-align: left; padding-left: 0; padding-right: var(--sp-4); }
}

/* For printing straight from the preview modal inside the app: hide the
   page behind it and let the modal fill the sheet.

   The `body:not(.print-doc)` guard matters. The standalone print window
   contains ONLY the document and no modal at all, so the bare
   `body > *:not(.modal-backdrop)` rule hid its single child and printed a
   blank page. That window sets .print-doc on its body to opt out. */
@media print {
  body:not(.print-doc) > *:not(.modal-backdrop) { display: none !important; }
  .modal-backdrop, .modal, .modal-body { position: static !important; background: #fff !important;
    box-shadow: none !important; border: 0 !important; max-height: none !important; overflow: visible !important;
    padding: 0 !important; margin: 0 !important; width: auto !important; max-width: none !important; }
  .modal-head, .modal-foot { display: none !important; }
  .inv-preview-wrap { background: #fff !important; padding: 0 !important; max-height: none !important; overflow: visible !important; }

  /* Shared by both print paths. */
  .inv-doc { box-shadow: none !important; margin: 0 !important; min-height: 0 !important; }

  /* Printing from the modal keeps the browser's own page margin, so the
     document drops its own padding — keeping both would stack two margins
     and push the invoice onto a second page.

     Scoped to `body:not(.print-doc)`, because the standalone print window
     does the opposite: it sets @page margin 0 and relies on the document's
     14mm padding for the margin. Unscoped, this rule stripped that padding
     too and the invoice printed flush to the paper edge. */
  body:not(.print-doc) .inv-doc { width: auto !important; padding: 0 !important; }

  /* If an invoice genuinely runs long, break between rows rather than
     through a total or a bank detail. */
  .inv-lines tr, .st-lines tr, .inv-totals-wrap, .inv-pay, .inv-sign, .inv-terms {
    page-break-inside: avoid; break-inside: avoid;
  }
  /* A statement is the one document that genuinely runs to several pages,
     so the column headers repeat and the ageing strip is never split. */
  .inv-lines thead, .st-lines thead { display: table-header-group; }
  .st-age, .st-age-table { page-break-inside: avoid; break-inside: avoid; }

  /* Paper is tighter than a screen, and these gaps were tuned for reading
     on a monitor. Reclaiming ~18mm here keeps most invoices — including
     ones carrying a stamp and a signature — on a single sheet at full
     size, so the fit-to-page scaling in invoice-doc.js stays a fallback
     rather than the normal path. */
  .inv-totals-wrap { margin-top: 4mm !important; }
  .inv-pay { margin-top: 5mm !important; }
  .inv-taxnote, .inv-terms { margin-top: 2.5mm !important; }
  .inv-attest { margin-top: 6mm !important; }
  .inv-foot { margin-top: 4mm !important; padding-top: 2mm !important; }
}

/* ---------- 51. Invoice design screen ---------- */
.id-layout { display: grid; gap: var(--sp-5); grid-template-columns: minmax(300px, 400px) 1fr; align-items: start; }
.id-preview { transform: scale(.62); transform-origin: top left; width: 161%; pointer-events: none; }
.id-preview .inv-doc { box-shadow: var(--sh-sm); }
.idf-colour { width: 46px; height: 38px; padding: 2px; border: 1.5px solid var(--border); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.field--row { display: flex; gap: var(--sp-3); align-items: flex-start; }
.field--row .switch { flex: none; margin-top: 2px; }

@media (max-width: 1100px) {
  .id-layout { grid-template-columns: 1fr; }
  .id-preview { transform: scale(.5); width: 200%; }
}

/* ---------- 52. Invoice designer — image drop zones ---------- */
.idf-drop {
  position: relative; border: 2px dashed var(--border); border-radius: var(--r-sm);
  background: var(--bg-alt); padding: var(--sp-4); cursor: pointer; text-align: center;
  transition: border-color .18s, background .18s;
}
.idf-drop:hover, .idf-drop.is-over { border-color: var(--blue-600); background: rgba(21,84,240,.04); }
.idf-drop.has-img { padding: var(--sp-3); }
.idf-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.idf-drop-empty svg { color: var(--gray-400); }
.idf-drop-empty strong { font-size: .85rem; }

/* Chequerboard so transparency is visible rather than assumed. */
.idf-thumb {
  max-width: 100%; max-height: 110px; display: block; margin: 0 auto var(--sp-3);
  background-image:
    linear-gradient(45deg, var(--gray-200) 25%, transparent 25%),
    linear-gradient(-45deg, var(--gray-200) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--gray-200) 75%),
    linear-gradient(-45deg, transparent 75%, var(--gray-200) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  border-radius: 6px;
}
.idf-drop-actions { display: flex; gap: 6px; justify-content: center; }

.idf-range { width: 100%; accent-color: var(--blue-600); }
.idf-val { font-weight: 400; color: var(--text-muted); font-size: .78rem; margin-left: 4px; }

/* ---- profile photo field (admin forms) ----
   The preview is the same circle the avatar uses everywhere else, so what
   the operator sees while uploading is what the rest of the admin shows. */
.photo-field {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px; border: 1px dashed var(--border); border-radius: var(--r-lg);
  background: var(--bg-alt);
}
.photo-preview {
  width: 72px; height: 72px; border-radius: 50%; flex: none; overflow: hidden;
  display: grid; place-items: center; background: var(--surface);
  border: 1px solid var(--border); color: var(--text-dim);
}
.photo-preview.has-img { border-color: transparent; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 53. Payments ----------
   A .doc-item that is actually a button. Resetting the button defaults
   keeps it visually identical to the static rows around it while giving
   it real keyboard focus and a pressed state. */
.doc-item--action {
  width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.doc-item--action:hover { border-color: var(--blue-400); background: var(--bg-alt); }
.doc-item--action:active { transform: translateY(1px); }
.doc-item--action:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.doc-item--action[disabled] { opacity: .5; cursor: not-allowed; }
.doc-item--action[disabled]:hover { border-color: var(--border); background: var(--surface); }
.doc-item--action > svg:last-child { color: var(--text-muted); flex: none; }

.choice-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }

/* ---------- 54. Quotation document ----------
   Reuses the invoice sheet; only the parts a quote has and an invoice
   does not are defined here. */
.qd-list { margin: 1mm 0 0; padding-left: 4mm; font-size: 8.5pt; line-height: 1.5; color: #55627a; }
.qd-list li { margin-bottom: .6mm; }
.qd-list--out li { color: #7a869c; }
.qd-source {
  margin-top: 4mm; padding: 2.5mm 3mm; border-radius: 1.5mm;
  background: #f4f7fb; font-size: 8pt; line-height: 1.5; color: #55627a;
}
.qd-source strong { color: #0b1220; }

/* ---------- 55. Profile entry points ----------
   An avatar that opens something needs to look like it does, without
   becoming a button-shaped box next to every name. */
.avatar-btn {
  padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%;
  display: inline-flex; line-height: 0;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.avatar-btn:hover { transform: scale(1.08); box-shadow: 0 0 0 3px rgba(21,84,240,.18); }
.avatar-btn:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }

.side-me-link {
  margin-left: auto; flex: none; display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px; color: #7A8CAA;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.side-me-link:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ---------- 56. Organisation logo ----------
   A square tile rather than a circle: a company mark is usually
   rectangular and a circular crop cuts wordmarks in half. */
.org-logo {
  width: 56px; height: 56px; flex: none; border-radius: var(--r-md);
  display: grid; place-items: center; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
}
.org-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; display: block; }
.org-logo--empty { color: var(--text-muted); }

/* The photo dropzone highlights while a file is over it. */
.photo-field.is-over { border-color: var(--blue-600); background: rgba(21,84,240,.05); }

/* ---------- 57. Statement of account ----------
   A statement carries far more rows than an invoice, so the line table
   is tightened and the ageing strip is a compact band rather than a
   second full-width table. */
.st-lines { font-size: 8pt; }
.st-lines th, .st-lines td { padding: 1.4mm 2mm; }
.st-lines tbody tr:nth-child(even) { background: #fafbfd; }

.st-age { margin-top: 4mm; }
.st-age-table { width: 100%; border-collapse: collapse; font-size: 8pt; }
.st-age-table th {
  text-align: center; font-size: 7pt; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #7a869c; padding: 1mm 1mm; border-bottom: .3mm solid #e3e8f0;
}
.st-age-table td {
  text-align: center; padding: 2mm 1mm; font-weight: 700; color: #0b1220;
  border-bottom: .3mm solid #eef1f6;
}
.st-age-table td.st-late { color: #c0392b; }
.st-count { display: block; font-size: 6.5pt; font-weight: 500; color: #7a869c; margin-top: .4mm; }

/* ---------- 58. Operational documents ---------- */
.dd-facts { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
.dd-facts td { padding: 1.3mm 0; vertical-align: top; border-bottom: .25mm solid #eef1f6; }
.dd-facts td:first-child { color: #7a869c; width: 42%; padding-right: 3mm; }
.dd-facts tr:last-child td { border-bottom: 0; }

.dd-note {
  margin-top: 3.5mm; padding: 2.5mm 3mm; border-radius: 1.5mm;
  background: #f4f7fb; font-size: 8pt; line-height: 1.5; color: #55627a;
}

/* The record flag must read as a caveat, not as decoration — it is the
   line between a document and a copy of somebody else's. */
.dd-record-flag {
  display: flex; gap: 2.5mm; align-items: flex-start;
  margin: 3mm 0 1mm; padding: 3mm; border-radius: 1.5mm;
  background: #fff8e6; border: .3mm solid #e8c766;
  font-size: 8.5pt; line-height: 1.55; color: #6b5420;
}
.dd-record-flag svg { flex: none; color: #b58710; margin-top: .3mm; }

/* ---------- 59. Bill of Lading ----------
   The boxed layout banks and brokers expect. Deliberately conventional:
   people read a B/L by looking at where a box is, not by reading labels. */
.bl-doc { position: relative; font-size: 8pt; }

/* The watermark must be unmistakable and must not be removable by
   fiddling with print settings, so it is part of the document flow
   rather than a background image a browser may drop. */
.bl-watermark {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 34pt; font-weight: 800; letter-spacing: .06em; color: rgba(192, 57, 43, .13);
  transform: rotate(-24deg); pointer-events: none; z-index: 5; text-align: center;
  line-height: 1.2; padding: 0 10mm;
}

.bl-head { display: flex; gap: 4mm; align-items: flex-start; border: .3mm solid #0b1220; padding: 2.5mm; }
.bl-head-brand { display: flex; gap: 3mm; align-items: flex-start; flex: 1.4; min-width: 0; }
.bl-issuer { font-size: 10pt; font-weight: 800; color: #0b1220; }
.bl-issuer-sub { font-size: 7pt; color: #55627a; line-height: 1.4; }
.bl-head-title { flex: 1; text-align: center; }
.bl-doctype { font-size: 13pt; font-weight: 800; color: var(--inv-accent); text-transform: uppercase; letter-spacing: .02em; }
.bl-sub { font-size: 6.6pt; color: #55627a; margin-top: .6mm; }
.bl-head-no { flex: .9; text-align: right; }
.bl-no { font-family: var(--font-mono); font-size: 11pt; font-weight: 800; color: #0b1220; }

.bl-grid { display: grid; border: .3mm solid #0b1220; border-top: 0; }
.bl-grid--2 { grid-template-columns: 1fr 1fr; }
.bl-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.bl-grid--4 { grid-template-columns: repeat(4, 1fr); }
.bl-box { padding: 1.8mm 2mm; border-right: .3mm solid #c8d0dd; border-bottom: .3mm solid #c8d0dd; min-height: 11mm; }
.bl-grid--2 .bl-box:nth-child(2n), .bl-grid--3 .bl-box:nth-child(3n), .bl-grid--4 .bl-box:nth-child(4n) { border-right: 0; }
.bl-lbl { font-size: 5.8pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7a869c; }
.bl-val { font-size: 7.6pt; line-height: 1.45; color: #0b1220; margin-top: .5mm; white-space: pre-line; }
.bl-val--big { font-size: 8.6pt; font-weight: 700; }

.bl-cargo { width: 100%; border-collapse: collapse; border: .3mm solid #0b1220; border-top: 0; }
.bl-cargo th {
  font-size: 5.8pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #7a869c; text-align: left; padding: 1.4mm 2mm; border-right: .3mm solid #c8d0dd;
  border-bottom: .3mm solid #c8d0dd;
}
.bl-cargo td { padding: 2mm; vertical-align: top; border-right: .3mm solid #c8d0dd; font-size: 7.6pt; min-height: 26mm; }
.bl-cargo th:last-child, .bl-cargo td:last-child { border-right: 0; }
.bl-cargo .num { text-align: right; }
.bl-desc { line-height: 1.5; }
.bl-cnt { font-size: 6.8pt; color: #55627a; margin-top: 1mm; }
.bl-said {
  border: .3mm solid #0b1220; border-top: 0; padding: 1.4mm 2mm;
  font-size: 6.4pt; color: #7a869c; font-style: italic;
}

.bl-issue { display: grid; grid-template-columns: 1fr 1fr; border: .3mm solid #0b1220; border-top: 0; }
.bl-originals { padding: 2.5mm; border-right: .3mm solid #c8d0dd; }
.bl-orig-no { font-size: 20pt; font-weight: 800; color: var(--inv-accent); line-height: 1.1; }
.bl-orig-note { font-size: 6.6pt; color: #55627a; line-height: 1.45; margin-top: 1mm; }
.bl-sigbox { padding: 2.5mm; position: relative; }
.bl-stamp { position: absolute; right: 4mm; bottom: 3mm; opacity: .85; }

.bl-terms { font-size: 6.4pt; line-height: 1.5; color: #55627a; margin-top: 3mm; text-align: justify; }

/* ---------------- Sign-in screen ----------------
   This screen paints its own dark navy background whatever the theme
   is set to, so its form controls cannot inherit theme colours. In
   the light theme the labels resolved to near-black on navy and were
   effectively invisible; in the dark theme the inputs would have been
   navy on navy. Both are pinned here rather than left to --text. */
.auth-screen .field > label,
.auth-screen .label        { color: #E8EEF7; }
.auth-screen .hint         { color: #93A6C2; }
.auth-screen .input {
  background: rgba(255,255,255,.96);
  border-color: rgba(255,255,255,.22);
  color: #0B1626;
}
.auth-screen .input::placeholder { color: #6F82A0; }
.auth-screen .input:focus {
  border-color: var(--cyan-400);
  box-shadow: 0 0 0 3px rgba(0,194,224,.22);
}
.auth-screen .alert        { backdrop-filter: blur(6px); }

/* ---------------- Password reveal ----------------
   The wrapper is inline-block and full width so it can sit inside an
   existing .field without changing the layout around it. The button is
   positioned over the input's right padding, and the input gains
   padding on that side so long passphrases do not run underneath it. */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > .input { padding-right: 44px; width: 100%; }
.pw-reveal {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--text-muted);
  transition: color .15s, background .15s;
}
.pw-reveal:hover { color: var(--text); background: rgba(127,142,168,.14); }
.pw-reveal:focus-visible {
  outline: 2px solid var(--blue-600); outline-offset: 1px; color: var(--text);
}
.pw-reveal[aria-pressed="true"] { color: var(--blue-600); }

/* On the sign-in screen the field sits on dark navy, so the muted
   grey would be close to invisible against it. */
.auth-screen .pw-reveal { color: #5A6B86; }
.auth-screen .pw-reveal:hover { color: #0B1626; background: rgba(11,22,38,.08); }

/* The input-group variant already has an icon on the left; the reveal
   goes on the right and must not collide with it. */
.input-group .pw-wrap > .input { padding-left: 40px; }