@charset "UTF-8";
/* ==========================================================================
   MERIDIAN BANK — app.css
   "The engraved ledger": deep petrol-black surfaces, cool paper, hairline
   brass used sparingly, monospaced tabular figures for every number.

   Loaded AFTER Bootstrap 5.3 on every page. Bootstrap supplies the grid,
   offcanvas, modal and dropdown behaviour; this file supplies the identity.

   RULES THAT GOVERN THIS FILE
   1. Every colour, radius, shadow and font lives in :root below. There is
      no hex value anywhere else in this file, and none in any other
      stylesheet, template or PHP file.
   2. The email palette in config.php (MAIL_COLOR_*) mirrors these tokens
      exactly. Change a token here, change the constant there.
   3. Sections are numbered. Add to a section; do not scatter.

   0  TOKENS          5  FORMS            10 EMPTY STATES
   1  BASE + RESET    6  CARDS / PANELS   11 SKELETONS
   2  BOOTSTRAP MAP   7  TABLES           12 GUILLOCHÉ + VIRTUAL CARD
   3  TYPOGRAPHY      8  BADGES           13 UTILITIES
   4  BUTTONS         9  ALERTS           14 MOTION / RESPONSIVE
   ========================================================================== */

/* ==========================================================================
   0. TOKENS — the only place a literal value may appear
   ========================================================================== */
:root{
  /* --- Core surfaces --- */
  --ink:        #0F1A1C;   /* deep petrol-black: nav, sidebar, footer, headings */
  --ink-700:    #1B2A2D;   /* raised dark surface, hover on dark */
  --ink-500:    #3A4B4E;   /* muted text on light, icons */
  --paper:      #F2F3F0;   /* page background — cool, faintly green */
  --surface:    #FFFFFF;   /* cards, panels, inputs */
  --line:       #E2E4DF;   /* hairline borders */

  /* --- Accent — hairlines and active states only --- */
  --brass:      #B9945A;   /* 2.8:1 on paper: rules and marks, NEVER text */
  --brass-ink:  #8A6C3B;   /* 4.9:1 on surface: the brass that may be read */
  --brass-soft: #EFE4CF;

  /* --- Money semantics --- */
  --credit:     #1E6F5C;   /* money in    — 6.0:1 on surface */
  --credit-bg:  #E7F1ED;
  --debit:      #A63A2E;   /* money out   — 6.4:1 on surface */
  --debit-bg:   #F7E9E7;
  --pending:    #8A6D2F;   /* 4.9:1 on surface, 4.4:1 on --pending-bg */
  --pending-bg: #FBF2DF;
  --pending-ink:#6F5626;   /* pending text ON --pending-bg — 6.2:1 */

  /* --- Utility --- */
  --focus:      #1E6F5C;
  --radius:     6px;       /* tight. NOT 16px+ pill styling */
  --radius-lg:  10px;
  --shadow-sm:  0 1px 2px rgba(15,26,28,.06);
  --shadow-md:  0 8px 24px -12px rgba(15,26,28,.22);

  /* --- Derived: translucency needs the ink channel spelled out --- */
  --ink-rgb:      15, 26, 28;
  --surface-rgb:  255, 255, 255;
  --wash-1:       rgba(15,26,28,.04);   /* table row hover, skeleton base */
  --wash-2:       rgba(15,26,28,.08);   /* pressed state on light */
  --wash-light-1: rgba(255,255,255,.08);/* hover on dark surfaces */
  --wash-light-2: rgba(255,255,255,.16);
  --focus-halo:   rgba(30,111,92,.18);

  /* --- Type --- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", SFMono-Regular, Consolas, "Liberation Mono", monospace;

  --fs-1: 0.75rem;    --fs-2: 0.8125rem;  --fs-3: 0.875rem;
  --fs-4: 1rem;       --fs-5: 1.125rem;   --fs-6: 1.375rem;
  --fs-7: 1.75rem;    --fs-8: 2.25rem;    --fs-9: 3rem;

  /* --- Layout --- */
  --wrap:       1200px;  /* public pages */
  --wrap-app:   1440px;  /* dashboard content */
  --sidebar-w:  264px;
  --topbar-h:   64px;
  --btn-h:      44px;
  --btn-h-sm:   36px;
  --row-h:      56px;
  --section-y:  96px;
  --section-y-sm: 56px;
  --gutter:     24px;

  /* --- Motion --- */
  --t-fast:  150ms ease-out;
  --t-mid:   240ms ease-out;
  --t-slow:  400ms cubic-bezier(.2,.6,.2,1);
}

/* ==========================================================================
   1. BASE + RESET
   ========================================================================== */
*,
*::before,
*::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-4);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video{ max-width: 100%; height: auto; }

hr,
.rule{
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--gutter) 0;
  opacity: 1;
}
.rule--brass{ border-top-color: var(--brass); }

::selection{ background: var(--brass-soft); color: var(--ink); }

/* --- Focus: visible on every interactive element, on light and on dark ---
   Two rings: the colour, then a surface-coloured gap so it reads against a
   busy background. :focus-visible only, so a mouse click stays quiet. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus{ outline: none; }

:where(a, button, input, select, textarea, summary, [tabindex], .btn, .card-tile):focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* Bootstrap kills the ring on its own components with `outline: 0` at a
   higher specificity than the :where() rule above, which would leave a
   keyboard user with no visible focus at all. Take it back, explicitly. */
.btn:focus-visible,
.form-check-input:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible,
.accordion-button:focus-visible,
.btn-close:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: none;
}

/* Fields keep their focus halo AND take the ring when the keyboard is
   driving. Bootstrap's .form-control:focus also carries `outline: 0`. */
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible,
.otp__box:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* On petrol-black surfaces the green ring is only 2.9:1 — go to soft brass.
   :is() carries the specificity of its heaviest argument, so this stays
   ahead of the two rules above. */
.on-ink :is(a, button, input, select, textarea, summary, [tabindex], .btn):focus-visible{
  outline-color: var(--brass-soft);
}

.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink);
  color: var(--surface);
  padding: 12px 18px;
  font-weight: 600;
}
.skip-link:focus{ left: 8px; top: 8px; }

/* ==========================================================================
   2. BOOTSTRAP MAP — hand our tokens to Bootstrap so its own components
   (modal, offcanvas, dropdown, pagination) inherit the identity.
   ========================================================================== */
:root{
  --bs-body-bg:          var(--paper);
  --bs-body-color:       var(--ink);
  --bs-body-font-family: var(--font-body);
  --bs-border-color:     var(--line);
  --bs-border-radius:    var(--radius);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-link-color:       var(--ink);
  --bs-link-hover-color: var(--brass-ink);
  --bs-emphasis-color:   var(--ink);
  --bs-secondary-color:  var(--ink-500);
  --bs-font-monospace:   var(--font-mono);
  --bs-box-shadow-sm:    var(--shadow-sm);
  --bs-box-shadow:       var(--shadow-md);
  --bs-focus-ring-color: var(--focus-halo);
}

/* ==========================================================================
   2a. BOOTSTRAP GRID — gutters, in our spacing tokens
   --------------------------------------------------------------------------
   Page layout on the public site uses Bootstrap's grid: .row with .col-lg-6
   or .row-cols-*. Bootstrap hardcodes the gutter at 1.5rem and its g-* scale
   tops out at 3rem, so the two rhythms this build actually uses are declared
   here against the tokens instead. Columns, breakpoints and wrapping stay
   entirely Bootstrap's; only the gap is ours.

   .row--tiles    cards in a grid           — gutter both axes
   .row--feature  a wide image-beside-copy  — the section rhythm, both axes
   ========================================================================== */
.row--tiles{
  --bs-gutter-x: var(--gutter);
  --bs-gutter-y: var(--gutter);
}
.row--feature{
  --bs-gutter-x: var(--section-y-sm);
  --bs-gutter-y: var(--section-y-sm);
}

.modal-content,
.offcanvas,
.dropdown-menu{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.dropdown-item{ font-size: var(--fs-3); }
.dropdown-item:active{ background: var(--ink); color: var(--surface); }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 .5em;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
}
h1, .h1{ font-size: var(--fs-8); }
h2, .h2{ font-size: var(--fs-7); }
h3, .h3{ font-size: var(--fs-6); }
h4{ font-size: var(--fs-5); font-family: var(--font-body); letter-spacing: 0; }
h5, h6{ font-size: var(--fs-4); font-family: var(--font-body); letter-spacing: 0; }

/* Display face never drops below 24px — below that it loses its engraving. */
.display{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--fs-8), 6vw, var(--fs-9));
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
}

p{ margin: 0 0 1em; }
.lede{ font-size: var(--fs-5); color: var(--ink-500); max-width: 62ch; }
.muted{ color: var(--ink-500); }
.small{ font-size: var(--fs-2); }
.tiny{ font-size: var(--fs-1); }

/* The uppercase eyebrow that labels every panel and section. */
.eyebrow{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 .5rem;
  display: block;
}
.eyebrow--brass{ color: var(--brass-ink); }

a{ color: var(--ink); text-decoration-color: var(--brass); text-underline-offset: .18em; }
a:hover{ color: var(--brass-ink); }
a.link-quiet{ text-decoration: none; }
a.link-quiet:hover{ text-decoration: underline; }

/* Every number the user reads as money or identity. */
.num,
.money,
.mono{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}
.money{ font-weight: 500; white-space: nowrap; }
.money--lg{ font-size: var(--fs-7); font-weight: 500; }
.money--xl{ font-size: var(--fs-8); font-weight: 500; letter-spacing: -0.02em; }
.money__symbol{ font-size: .62em; vertical-align: .34em; margin-right: .1em; color: var(--ink-500); }
.money__decimals{ font-size: .68em; vertical-align: .28em; color: var(--ink-500); }

.txn-credit{ color: var(--credit); }
.txn-debit { color: var(--debit); }
.txn-pending{ color: var(--pending); }

/* Account numbers, PANs, references: grouped and spaced to be read aloud. */
.ref{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-2);
  letter-spacing: .08em;
  color: var(--ink-500);
}

/* ==========================================================================
   4. BUTTONS — 44px primary, --radius (6px). No pills, anywhere, ever.
   ========================================================================== */
.btn{
  --btn-bg:     transparent;
  --btn-fg:     var(--ink);
  --btn-bd:     transparent;
  --btn-bg-hov: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--btn-h);
  padding: 0 1.25rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--fs-3);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.btn:hover{ background: var(--btn-bg-hov); color: var(--btn-fg); }
.btn:active{ transform: translateY(1px); }

.btn--primary{ --btn-bg: var(--ink);    --btn-fg: var(--surface); --btn-bd: var(--ink);    --btn-bg-hov: var(--ink-700); }
.btn--outline{ --btn-bg: transparent;   --btn-fg: var(--ink);     --btn-bd: var(--ink);    --btn-bg-hov: var(--wash-1); }
.btn--ghost  { --btn-bg: transparent;   --btn-fg: var(--ink-500); --btn-bd: transparent;   --btn-bg-hov: var(--wash-1); }
.btn--credit { --btn-bg: var(--credit); --btn-fg: var(--surface); --btn-bd: var(--credit); --btn-bg-hov: var(--ink); }
.btn--debit  { --btn-bg: var(--debit);  --btn-fg: var(--surface); --btn-bd: var(--debit);  --btn-bg-hov: var(--ink); }

/* On petrol-black: the outline button inverts. */
.on-ink .btn--outline{ --btn-fg: var(--paper); --btn-bd: var(--wash-light-2); --btn-bg-hov: var(--wash-light-1); }
.on-ink .btn--ghost  { --btn-fg: var(--paper); --btn-bg-hov: var(--wash-light-1); }

.btn--sm{ min-height: var(--btn-h-sm); padding: 0 .875rem; font-size: var(--fs-2); }
.btn--block{ display: flex; width: 100%; }
.btn--icon{ padding: 0; width: var(--btn-h); }
.btn--icon.btn--sm{ width: var(--btn-h-sm); }

.btn:disabled,
.btn.is-disabled,
.btn[aria-disabled="true"]{
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* Loading: the label stays (so width never jumps), a spinner takes its place. */
.btn.is-loading{ color: transparent !important; pointer-events: none; }
.btn.is-loading::after{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-color: var(--btn-fg) transparent var(--btn-fg) transparent;
  border-radius: 50%;
  animation: mrdn-spin 700ms linear infinite;
}
@keyframes mrdn-spin{ to{ transform: rotate(360deg); } }

/* ==========================================================================
   5. FORMS — label on every input, hint under it, error replaces the hint
   ========================================================================== */
.field{ margin-bottom: 1.125rem; }

.field__label,
.form-label{
  display: block;
  font-size: var(--fs-2);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .375rem;
}
.field__label .req{ color: var(--debit); margin-left: .15em; }

.input,
.select,
.textarea,
.form-control,
.form-select{
  display: block;
  width: 100%;
  min-height: var(--btn-h);
  padding: .625rem .8125rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-3);
  line-height: 1.4;
  box-shadow: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input::placeholder,
.textarea::placeholder,
.form-control::placeholder{ color: var(--ink-500); opacity: .65; }

.input:hover,
.select:hover,
.textarea:hover,
.form-control:hover,
.form-select:hover{ border-color: var(--ink-500); }

.input:focus,
.select:focus,
.textarea:focus,
.form-control:focus,
.form-select:focus{
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-halo);
}

.input:disabled,
.textarea:disabled,
.select:disabled,
.form-control:disabled{
  background: var(--paper);
  color: var(--ink-500);
  cursor: not-allowed;
}

.textarea{ min-height: 112px; resize: vertical; }

.select,
.form-select{
  appearance: none;
  padding-right: 2.25rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-500) 50%),
                    linear-gradient(135deg, var(--ink-500) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Anything the user reads back as a figure types in the mono face. */
.input--mono,
.input[inputmode="decimal"],
.input[inputmode="numeric"]{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* Amount field with a currency prefix box. */
.input-affix{ display: flex; }
.input-affix__prefix,
.input-affix__suffix{
  display: inline-flex;
  align-items: center;
  padding: 0 .8125rem;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-500);
  font-family: var(--font-mono);
  font-size: var(--fs-3);
}
.input-affix__prefix{ border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
.input-affix__suffix{ border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; }
.input-affix__prefix + .input,
.input-affix__prefix + .form-control{ border-radius: 0 var(--radius) var(--radius) 0; }
.input-affix .input:has(+ .input-affix__suffix){ border-radius: var(--radius) 0 0 var(--radius); }

.field__hint{ display: block; font-size: var(--fs-2); color: var(--ink-500); margin-top: .375rem; }

.field__error,
.invalid-feedback{
  display: block;
  font-size: var(--fs-2);
  color: var(--debit);
  margin-top: .375rem;
}
.input.is-invalid,
.form-control.is-invalid,
.select.is-invalid,
.textarea.is-invalid{ border-color: var(--debit); }
.input.is-invalid:focus{ box-shadow: 0 0 0 3px var(--debit-bg); }
.input.is-valid,
.form-control.is-valid{ border-color: var(--credit); }

/* Check, radio, switch */
.check{ display: flex; align-items: flex-start; gap: .625rem; margin-bottom: .625rem; }
.check input[type="checkbox"],
.check input[type="radio"]{
  appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1px solid var(--ink-500);
  background: var(--surface);
  border-radius: 3px;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.check input[type="radio"]{ border-radius: 50%; }
.check input:checked{ background: var(--ink); border-color: var(--ink); }
.check input[type="checkbox"]:checked{
  background-image: linear-gradient(45deg, transparent 46%, var(--surface) 46%, var(--surface) 62%, transparent 62%),
                    linear-gradient(-45deg, transparent 46%, var(--surface) 46%, var(--surface) 62%, transparent 62%);
  background-size: 9px 9px, 9px 9px;
  background-position: 2px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.check input[type="radio"]:checked{ box-shadow: inset 0 0 0 3px var(--surface); }
.check label{ font-size: var(--fs-3); cursor: pointer; }

.switch{ display: inline-flex; align-items: center; gap: .625rem; cursor: pointer; }
.switch input{
  appearance: none;
  width: 40px;
  height: 22px;
  border-radius: 11px;         /* the one rounded thing: it is a switch */
  background: var(--line);
  border: 1px solid var(--line);
  position: relative;
  cursor: pointer;
  transition: background-color var(--t-fast);
}
.switch input::after{
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast);
}
.switch input:checked{ background: var(--credit); border-color: var(--credit); }
.switch input:checked::after{ transform: translateX(18px); }

/* OTP / PIN: one box per digit, always mono. */
.otp{ display: flex; gap: .5rem; }
.otp__box{
  width: 48px;
  height: 56px;
  padding: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-6);
  font-weight: 500;
  letter-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
}
.otp__box:focus{ border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-halo); }

/* Flatpickr (date range filters) — the one third-party control skinned by
   hand, since it ships its own light-blue theme by default. */
.flatpickr-calendar{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after{ border-bottom-color: var(--line); }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays{ background: transparent; color: var(--ink); fill: var(--ink); }
.flatpickr-day{ color: var(--ink); border-radius: var(--radius); }
.flatpickr-day:hover{ background: var(--paper); }
.flatpickr-day.today{ border-color: var(--brass); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange{ background: var(--ink); border-color: var(--ink); color: var(--surface); }
.flatpickr-day.inRange{
  background: var(--brass-soft);
  border-color: var(--brass-soft);
  box-shadow: -5px 0 0 var(--brass-soft), 5px 0 0 var(--brass-soft);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{ color: var(--ink-500); opacity: .5; }

/* ==========================================================================
   6. CARDS / PANELS — 1px hairline, --radius-lg, --shadow-sm. Never heavier.
   ========================================================================== */
.panel{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.panel__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.panel__title{ font-family: var(--font-body); font-size: var(--fs-4); font-weight: 600; margin: 0; letter-spacing: 0; }
.panel__body{ padding: 1.25rem; }
.panel__body--flush{ padding: 0; }
.panel__foot{
  padding: .875rem 1.25rem;
  border-top: 1px solid var(--line);
  background: var(--paper);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  font-size: var(--fs-2);
  color: var(--ink-500);
}
.panel--ink{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
.panel--ink .panel__head{ border-bottom-color: var(--wash-light-2); }
.panel--ink .panel__title{ color: var(--paper); }

/* A single figure with its label — the dashboard's smallest unit. */
.stat{ padding: 1.125rem 1.25rem; }
.stat__label{
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-500);
  display: block;
  margin-bottom: .5rem;
}
.stat__value{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-7);
  font-weight: 500;
  letter-spacing: -0.02em;
  display: block;
  line-height: 1.1;
}
.stat__meta{ font-size: var(--fs-2); color: var(--ink-500); margin-top: .375rem; display: block; }
.panel--ink .stat__label,
.panel--ink .stat__meta{ color: var(--brass-soft); }

/* The brass hairline: the accent's whole job. */
.brass-rule{ height: 1px; background: var(--brass); border: 0; margin: 0; }
.brass-tick{ width: 28px; height: 2px; background: var(--brass); display: block; margin-bottom: 1rem; }

/* ==========================================================================
   7. TABLES — bottom hairlines only, 56px rows, amounts right + mono
   ========================================================================== */
.table-ledger{
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: var(--fs-3);
}
.table-ledger thead th{
  text-align: left;
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table-ledger tbody td{
  padding: 0 1rem;
  height: var(--row-h);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.table-ledger tbody tr:last-child td{ border-bottom: 0; }
.table-ledger tbody tr{ transition: background-color var(--t-fast); }
.table-ledger tbody tr:hover{ background: var(--wash-1); }
.table-ledger .col-amount{ text-align: right; }
.table-ledger td.col-amount{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}
.table-ledger td.col-date,
.table-ledger td.col-ref{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-2);
  color: var(--ink-500);
  white-space: nowrap;
}
.table-ledger .txn-title{ font-weight: 500; display: block; }
.table-ledger .txn-sub{ font-size: var(--fs-2); color: var(--ink-500); display: block; }

/* Below lg the ledger scrolls rather than crushing the amount column. */
.table-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* DataTables 2.x lives inside our shell, not the other way round. */
.dt-container .dt-search input,
.dt-container .dt-length select{
  min-height: var(--btn-h-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .25rem .5rem;
  font-size: var(--fs-2);
}
.dt-container .dt-paging .dt-paging-button{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .25rem .625rem;
  margin-left: .25rem;
  font-size: var(--fs-2);
  color: var(--ink);
  background: var(--surface);
}
.dt-container .dt-paging .dt-paging-button.current{ background: var(--ink); color: var(--surface); border-color: var(--ink); }
.dt-container .dt-layout-row + .dt-layout-row{ margin-top: .875rem; }
.dt-container .dt-info{ font-size: var(--fs-2); color: var(--ink-500); }
.dt-container .dt-empty{ padding: 2.5rem 1rem; text-align: center; color: var(--ink-500); }
table.dataTable thead .dt-column-order::before,
table.dataTable thead .dt-column-order::after{ color: var(--ink-500); }
/* Only a column you can actually sort should look like one. An actions
   column is marked orderable:false by Meridian.table(), and DataTables
   gives it .dt-orderable-none. */
table.dataTable thead th.dt-orderable-asc,
table.dataTable thead th.dt-orderable-desc{ cursor: pointer; }
table.dataTable thead th.dt-orderable-none{ cursor: default; }
table.dataTable thead th.dt-orderable-none .dt-column-order{ display: none; }
table.dataTable tbody td{ vertical-align: middle; }

/* The filter box reads as a form control, not as a label plus a box. */
.dt-container .dt-search label{ margin: 0; }
.dt-container .dt-search input{ min-width: 220px; max-width: 100%; }
.dt-container .dt-length label{ margin: 0; font-size: var(--fs-2); color: var(--ink-500); }

/* Wrap, do not overflow, when the controls meet a narrow screen. */
@media (max-width: 575.98px){
  .dt-container .dt-layout-row{ flex-wrap: wrap; gap: .625rem; }
  .dt-container .dt-search input{ min-width: 0; width: 100%; }
  .dt-container .dt-paging .dt-paging-button{ margin: .125rem .125rem 0 0; }
}

/* ==========================================================================
   8. BADGES — status_badge() in functions.php emits .badge .badge--{mod}
   ========================================================================== */
.badge{
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .5rem;
  border-radius: 3px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.4;
  white-space: nowrap;
}
.badge::before{
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.badge--ok   { background: var(--credit-bg);  color: var(--credit);      border-color: var(--credit-bg); }
.badge--warn { background: var(--pending-bg); color: var(--pending-ink); border-color: var(--pending-bg); }
.badge--bad  { background: var(--debit-bg);   color: var(--debit);       border-color: var(--debit-bg); }
.badge--muted{ background: var(--paper);      color: var(--ink-500);     border-color: var(--line); }
/* Brass reads as the ground, not the text: --brass-ink on --brass-soft is
   only 3.9:1. Ink on brass-soft is 14:1 and the hairline carries the accent. */
.badge--brass{ background: var(--brass-soft); color: var(--ink);          border-color: var(--brass); }

/* ==========================================================================
   9. ALERTS — say what went wrong and what to do next
   ========================================================================== */
.alert{
  display: flex;
  gap: .75rem;
  padding: .875rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-500);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-3);
  margin-bottom: 1rem;
}
.alert__icon{ flex: 0 0 auto; line-height: 1.5; font-size: var(--fs-4); }
.alert__body{ flex: 1 1 auto; }
.alert__title{ font-weight: 600; display: block; margin-bottom: .125rem; }
.alert__close{
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: var(--ink-500);
  cursor: pointer;
  font-size: var(--fs-4);
  line-height: 1;
  padding: .125rem .25rem;
  border-radius: var(--radius);
}
.alert__close:hover{ color: var(--ink); background: var(--wash-1); }

.alert--info   { border-left-color: var(--ink);     background: var(--surface); }
.alert--success{ border-left-color: var(--credit);  background: var(--credit-bg);  border-color: var(--credit-bg); }
.alert--warning{ border-left-color: var(--pending); background: var(--pending-bg); border-color: var(--pending-bg); }
.alert--danger { border-left-color: var(--debit);   background: var(--debit-bg);   border-color: var(--debit-bg); }
.alert--success .alert__icon{ color: var(--credit); }
.alert--warning .alert__icon{ color: var(--pending-ink); }
.alert--danger  .alert__icon{ color: var(--debit); }

/* ==========================================================================
   10. EMPTY STATES — never a dead end; always one action
   ========================================================================== */
.empty{
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--ink-500);
}
.empty__mark{
  width: 44px;
  height: 44px;
  margin: 0 auto 1rem;
  border: 1px solid var(--brass);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--brass-ink);
  font-size: var(--fs-5);
}
.empty__title{
  font-family: var(--font-body);
  font-size: var(--fs-4);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 .25rem;
  letter-spacing: 0;
}
.empty__text{ font-size: var(--fs-3); margin: 0 auto 1.25rem; max-width: 44ch; }
.empty--sm{ padding: 2rem 1rem; }

/* ==========================================================================
   11. SKELETONS — the shape of the content that is coming, not a spinner
   ========================================================================== */
.skel{
  display: block;          /* so the modifiers' heights apply to <span> too */
  position: relative;
  overflow: hidden;
  background: var(--wash-1);
  border-radius: 3px;
}
.skel::after{
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--wash-light-2), transparent);
  animation: mrdn-sheen 1.4s ease-in-out infinite;
}
@keyframes mrdn-sheen{ to{ transform: translateX(100%); } }

.skel--line  { height: 12px; margin-bottom: .625rem; }
.skel--title { height: 20px; width: 40%; margin-bottom: .875rem; }
.skel--text  { height: 12px; width: 100%; }
.skel--short { width: 55%; }
.skel--amount{ height: 16px; width: 96px; margin-left: auto; }
.skel--circle{ width: 40px; height: 40px; border-radius: 50%; }

/* Inside a table cell the skeleton is the row that is coming, so it carries no
   bottom margin and the row keeps the height of a real one. */
.skel-row > td{ vertical-align: middle; }
.skel-row .skel{ margin-bottom: 0; }
.skel--row{ display: flex; align-items: center; gap: 1rem; height: var(--row-h); border-bottom: 1px solid var(--line); padding: 0 1rem; }
.skel--row .skel--grow{ flex: 1 1 auto; height: 12px; }

/* ==========================================================================
   12. GUILLOCHÉ + VIRTUAL CARD
   The one bold move. guilloche_svg() in includes/functions.php prints the
   markup; it appears in exactly three places (hero, card face, statement
   watermark) and nowhere else.
   ========================================================================== */
.guilloche{
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  color: var(--brass);          /* the engraving inherits currentColor */
}
.guilloche svg{ width: 100%; height: 100%; display: block; }

.guilloche--hero{
  left: auto;
  right: -14%;
  top: -30%;
  width: 78%;
  height: 160%;
}
.guilloche--watermark{ color: var(--ink-500); }

.hero{ position: relative; overflow: hidden; }
.hero > *:not(.guilloche){ position: relative; z-index: 1; }

/* The virtual card face (built out in Phase 11 — the face lives here so the
   guilloché is defined once). */
.vcard{
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.586;
  max-width: 360px;
  width: 100%;
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink-700);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.vcard > *:not(.guilloche){ position: relative; z-index: 1; }
.vcard__brand{ font-family: var(--font-display); font-size: var(--fs-5); letter-spacing: -0.02em; }
.vcard__pan{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-5);
  letter-spacing: .12em;
}
.vcard__row{ display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.vcard__label{ font-size: var(--fs-1); letter-spacing: .12em; text-transform: uppercase; color: var(--brass-soft); display: block; }
.vcard__value{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-2); }
.vcard--frozen{ filter: grayscale(1); opacity: .7; }

/* ==========================================================================
   13. UTILITIES — small, named, and few
   ========================================================================== */
.wrap{ width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--app{ max-width: var(--wrap-app); }
.section{ padding-block: var(--section-y); }
.section--tight{ padding-block: var(--section-y-sm); }
.surface{ background: var(--surface); }
.on-ink{ background: var(--ink); color: var(--paper); }

/* --ink-500 is a muted colour FOR LIGHT SURFACES — 1.9:1 on petrol-black.
   Everything that uses it flips to soft brass once it sits on the dark. */
.on-ink :is(.muted, .lede, .ref, .eyebrow, .field__hint, .stat__label,
            .stat__meta, .txn-sub, .empty, .alert__close){ color: var(--brass-soft); }
.on-ink h1, .on-ink h2, .on-ink h3, .on-ink .display{ color: var(--paper); }
.on-paper{ background: var(--paper); }

.stack > * + *{ margin-top: 1rem; }
.row-between{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cluster{ display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
.grid-tiles{ display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.avatar{
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brass-soft);
  color: var(--ink);              /* not --brass-ink: 3.9:1 on this ground */
  display: inline-grid;
  place-items: center;
  font-size: var(--fs-2);
  font-weight: 600;
  flex: 0 0 auto;
}
.avatar--lg{ width: 56px; height: 56px; font-size: var(--fs-4); }

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

/* ==========================================================================
   14. MOTION / RESPONSIVE
   ========================================================================== */
/* The single orchestrated reveal, used once, on the public hero. */
.reveal{ opacity: 0; transform: translateY(12px); animation: mrdn-rise var(--t-slow) forwards; }
.reveal:nth-child(1){ animation-delay: 0ms; }
.reveal:nth-child(2){ animation-delay: 60ms; }
.reveal:nth-child(3){ animation-delay: 120ms; }
.reveal:nth-child(4){ animation-delay: 180ms; }
.reveal:nth-child(5){ animation-delay: 240ms; }
@keyframes mrdn-rise{ to{ opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal{ opacity: 1; transform: none; }
  .skel::after{ display: none; }
  .btn.is-loading::after{ animation: none; border-color: var(--btn-fg) transparent var(--btn-fg) transparent; }
}

@media (max-width: 991.98px){
  :root{ --section-y: 64px; --gutter: 20px; }
}

/* Holds at 360px: the smallest phone we support. */
@media (max-width: 575.98px){
  :root{
    --section-y: var(--section-y-sm);
    --gutter: 16px;
    --fs-8: 1.875rem;
    --fs-9: 2.25rem;
  }
  .panel__head,
  .panel__body,
  .stat{ padding: 1rem; }
  .panel__foot{ padding: .75rem 1rem; }
  .table-ledger thead th,
  .table-ledger tbody td{ padding-inline: .75rem; }
  .otp{ gap: .375rem; }
  .otp__box{ width: 40px; height: 48px; font-size: var(--fs-5); }
  .btn--auto-block{ display: flex; width: 100%; }
  .row-between{ align-items: flex-start; }
}

@media print{
  body{ background: var(--surface); }
  .panel{ box-shadow: none; }
  .no-print{ display: none !important; }
  /* The demo banner and the skip link are chrome, not content. */
  .demo-banner,
  .skip-link{ display: none !important; }
}

/* ==========================================================================
   15. PUBLIC SITE — the marketing chrome and pages (Phase 04)
   Header/nav, hero, marketing sections, footer, and the skins for the
   Bootstrap components the public pages lean on (offcanvas, accordion,
   tabs). Tokens only, like every section above.
   ========================================================================== */

/* --- Demo banner: this is a demonstration, said once, quietly --- */
.demo-banner{
  background: var(--brass-soft);
  color: var(--ink);
  font-size: var(--fs-2);
  text-align: center;
  padding: .5rem 1rem;
  border-bottom: 1px solid var(--brass);
}
.demo-banner .ref{ color: var(--ink); }

/* --- Site header + primary navigation --- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--ink-700);
}
.site-nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--topbar-h);
  padding-block: .5rem;
}
.site-brand{
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: var(--fs-6);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--paper);
  text-decoration: none;
}
.site-brand:hover{ color: var(--brass-soft); }
.site-brand__mark{
  width: 26px; height: 26px;
  border: 1px solid var(--brass);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: var(--brass-soft);
  font-size: var(--fs-2);
  align-self: center;
}
.site-nav__links{
  display: flex;
  align-items: center;
  gap: .25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__link{
  display: inline-flex;
  align-items: center;
  height: var(--btn-h-sm);
  padding: 0 .75rem;
  color: var(--brass-soft);
  font-size: var(--fs-3);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.site-nav__link:hover{ color: var(--paper); background: var(--wash-light-1); }
.site-nav__link.is-active{ color: var(--paper); }
.site-nav__link.is-active::after{
  content: "";
  display: block;
}
.site-nav__actions{ display: flex; align-items: center; gap: .5rem; }
.nav-toggle{
  display: none;
  border: 1px solid var(--wash-light-2);
  background: transparent;
  color: var(--paper);
  width: var(--btn-h-sm);
  height: var(--btn-h-sm);
  border-radius: var(--radius);
  font-size: var(--fs-5);
  cursor: pointer;
}
/* The offcanvas nav for phones inherits the petrol-black identity. */
.offcanvas.nav-drawer{ background: var(--ink); color: var(--paper); }
.nav-drawer .offcanvas-header{ border-bottom: 1px solid var(--ink-700); }
.nav-drawer .site-nav__links{ flex-direction: column; align-items: stretch; gap: 0; }
.nav-drawer .site-nav__link{
  height: auto;
  min-height: var(--btn-h);
  padding: .625rem .75rem;
  font-size: var(--fs-4);
  border-bottom: 1px solid var(--ink-700);
  border-radius: 0;
}
.nav-drawer .site-nav__link.is-active{ color: var(--paper); border-left: 2px solid var(--brass); }
/* The CTAs sit BELOW the links, separated by a brass hairline. */
.nav-drawer .site-nav__actions{
  flex-direction: column;
  align-items: stretch;
  gap: .625rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--brass);
}

/* Below lg the bar collapses to the toggle. Both hide rules must stay scoped
   to the DIRECT children of .site-nav — the drawer carries its own copy of
   .site-nav__links and .site-nav__actions, and an unscoped rule hides those
   too, leaving an offcanvas with nothing in it. */
@media (max-width: 991.98px){
  .site-nav > .site-nav__links,
  .site-nav > .site-nav__actions{ display: none; }
  .nav-toggle{ display: inline-flex; align-items: center; justify-content: center; }
}

/* --- Hero --- */
.hero--home{
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--section-y);
}
.hero__inner{ max-width: 42ch; }
.hero .display{ margin: .25rem 0 1rem; }
.hero__lede{ color: var(--brass-soft); font-size: var(--fs-5); max-width: 46ch; }
.hero__cta{ display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.75rem; }
.btn--on-ink{ --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-bd: var(--paper); --btn-bg-hov: var(--brass-soft); }

/* --- Trust strip: compliance line, established year, licence --- */
.trust-strip{
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.trust-strip__row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding-block: 1.125rem;
  font-size: var(--fs-2);
  color: var(--ink-500);
}
.trust-strip__item{ display: inline-flex; align-items: center; gap: .5rem; }
.trust-strip__item i{ color: var(--brass-ink); }

/* --- Section scaffolding for marketing pages --- */
.section-head{ max-width: 60ch; margin-bottom: var(--gutter); }
.section-head--center{ margin-inline: auto; text-align: center; }
.prose{ max-width: 68ch; }
.prose h2{ margin-top: 2rem; }
.prose h3{ margin-top: 1.5rem; }

/* --- Feature / product pillars ---
   The columns themselves are Bootstrap's: .row.row-cols-1.row-cols-lg-3 (see
   §2a for the two gutter classes). .tiles-3 / .tiles-2 / .people-grid are
   gone — their breakpoint was 991.98px, which is exactly Bootstrap's lg, so
   the conversion is like for like. */
.feature{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.feature__mark{
  width: 44px; height: 44px;
  border: 1px solid var(--brass);
  border-radius: var(--radius);
  display: grid; place-items: center;
  color: var(--brass-ink);
  font-size: var(--fs-5);
  margin-bottom: 1rem;
}
.feature__title{ font-family: var(--font-body); font-size: var(--fs-5); font-weight: 600; letter-spacing: 0; margin: 0 0 .375rem; }
.feature__text{ color: var(--ink-500); font-size: var(--fs-3); margin: 0 0 1rem; }
.feature__link{ margin-top: auto; font-weight: 600; font-size: var(--fs-3); text-decoration: none; color: var(--brass-ink); }
.feature__link:hover{ color: var(--ink); text-decoration: underline; }
.feature--ink{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.feature--ink .feature__text{ color: var(--brass-soft); }
.feature--ink .feature__mark{ color: var(--brass-soft); border-color: var(--wash-light-2); }

/* --- FX ticker --- */
.fx-ticker{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: .75rem 1rem;
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.fx-chip{ display: inline-flex; align-items: baseline; gap: .5rem; white-space: nowrap; }
.fx-chip__code{ font-size: var(--fs-1); font-weight: 600; letter-spacing: .1em; color: var(--ink-500); }
.fx-chip__rate{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; }

/* --- Split feature block (image/figure beside copy) ---
   Now .row.row--feature.align-items-center with .col-lg-6 children. The old
   .split__media / .split__copy carried no styling of their own beyond an
   unused --reverse order rule, so they are gone rather than kept as hooks. */

/* --- Image-led sections (Phase 04 revision) ---------------------------------
   Photography is served from assets/img/ — never hotlinked. Every <img> carries
   a real alt and loading="lazy", and sits in a fixed-ratio frame so the page
   never reflows as pictures arrive. */
.figure-frame{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--paper);
  aspect-ratio: 4 / 3;
}
.figure-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.figure-frame--tall{ aspect-ratio: 3 / 4; }
.figure-frame--wide{ aspect-ratio: 16 / 9; }
.figure-caption{
  display: block;
  margin-top: .625rem;
  font-size: var(--fs-2);
  color: var(--ink-500);
}

/* A full-bleed band with the picture behind the copy. The scrim is a flat
   ink wash, not a gradient flourish — text must clear AA over any photo. */
.image-band{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  isolation: isolate;
  background: var(--ink);
}
.image-band__media{
  position: absolute;
  inset: 0;
  z-index: -2;
}
.image-band__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.image-band::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(15, 26, 28, .74);   /* --ink at 74%: keeps body copy >7:1 */
}
.image-band__inner{ padding: var(--section-y-sm); max-width: 52ch; }
.image-band .display, .image-band h2{ color: var(--paper); }
.image-band .lede, .image-band p{ color: var(--brass-soft); }

@media (max-width: 575.98px){
  .figure-frame, .figure-frame--tall{ aspect-ratio: 4 / 3; }
  .image-band__inner{ padding: var(--gutter); }
}

/* --- Quotes / testimonials --- */
.quote{
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.quote__text{ font-family: var(--font-display); font-weight: 400; font-size: var(--fs-5); line-height: 1.4; margin: 0 0 1.25rem; }
.quote__cite{ display: flex; align-items: center; gap: .75rem; margin-top: auto; font-style: normal; }
.quote__name{ font-weight: 600; font-size: var(--fs-3); }
.quote__role{ font-size: var(--fs-2); color: var(--ink-500); display: block; }

/* --- App-download band + CTA band --- */
.band{ background: var(--ink); color: var(--paper); border-radius: var(--radius-lg); padding: var(--section-y-sm); }
.band--brass{ background: var(--brass-soft); color: var(--ink); }
.store-btns{ display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.store-btn{
  display: inline-flex; align-items: center; gap: .625rem;
  border: 1px solid var(--wash-light-2);
  border-radius: var(--radius);
  padding: .5rem 1rem;
  color: var(--paper);
  text-decoration: none;
  font-size: var(--fs-2);
}
.store-btn i{ font-size: var(--fs-7); line-height: 1; }
.store-btn strong{ font-size: var(--fs-3); display: block; font-weight: 600; }
.store-btn:hover{ background: var(--wash-light-1); color: var(--paper); }

/* --- People / leadership grid --- */
/* .people-grid is now .row.row--tiles.row-cols-1.row-cols-sm-2.row-cols-lg-4 —
   the same 1 / 2 / 4 steps at the same widths, in Bootstrap's own breakpoints. */
.person{ text-align: center; }
.person .avatar{ width: 84px; height: 84px; font-size: var(--fs-6); margin-bottom: .75rem; }
.person__name{ font-weight: 600; font-size: var(--fs-4); }
.person__role{ font-size: var(--fs-2); color: var(--ink-500); }

/* --- Milestone timeline (ordered: sequence carries meaning) --- */
.timeline{ list-style: none; margin: 0; padding: 0; counter-reset: milestone; }
.timeline__item{
  position: relative;
  padding: 0 0 1.75rem 3.25rem;
  border-left: 1px solid var(--line);
  margin-left: 1rem;
}
.timeline__item:last-child{ padding-bottom: 0; }
.timeline__item::before{
  counter-increment: milestone;
  content: counter(milestone);
  position: absolute;
  left: -1rem; top: -.15rem;
  width: 2rem; height: 2rem;
  transform: translateX(-.05rem);
  background: var(--surface);
  border: 1px solid var(--brass);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  color: var(--brass-ink);
}
.timeline__year{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--brass-ink); font-size: var(--fs-2); font-weight: 500; }
.timeline__title{ font-weight: 600; font-size: var(--fs-4); margin: .1rem 0 .25rem; }
.timeline__text{ color: var(--ink-500); font-size: var(--fs-3); margin: 0; }

/* --- Comparison table (left-aligned, hairline rows) --- */
.table-compare{ width: 100%; border-collapse: collapse; font-size: var(--fs-3); background: var(--surface); }
.table-compare th, .table-compare td{ padding: .875rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table-compare thead th{ font-size: var(--fs-1); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); white-space: nowrap; }
.table-compare tbody th{ font-weight: 600; }
.table-compare td .num{ white-space: nowrap; }
.table-compare tr:last-child td, .table-compare tr:last-child th{ border-bottom: 0; }
.table-compare i.ok{ color: var(--credit); }
.table-compare i.no{ color: var(--ink-500); }

/* --- Map placeholder + branch list (contact page) --- */
.map-placeholder{
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 32px),
    var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  color: var(--ink-500);
  text-align: center;
}
.map-placeholder i{ font-size: var(--fs-8); color: var(--brass-ink); }
.branch{ padding-block: .875rem; border-bottom: 1px solid var(--line); }
.branch:last-child{ border-bottom: 0; }
.branch__name{ font-weight: 600; }
.branch__addr{ font-size: var(--fs-2); color: var(--ink-500); }

/* --- Bootstrap accordion skin (FAQ) --- */
.accordion{ --bs-accordion-bg: var(--surface); --bs-accordion-border-color: var(--line); --bs-accordion-border-radius: var(--radius-lg); --bs-accordion-active-bg: var(--paper); --bs-accordion-active-color: var(--ink); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--focus-halo); --bs-accordion-color: var(--ink); --bs-accordion-btn-color: var(--ink); }
.accordion-button{ font-weight: 600; font-family: var(--font-body); }
.accordion-button:not(.collapsed){ box-shadow: none; }
.accordion-body{ color: var(--ink-500); }

/* --- Bootstrap tabs skin (legal) --- */
.nav-tabs{ --bs-nav-tabs-border-color: var(--line); --bs-nav-tabs-link-active-color: var(--ink); --bs-nav-tabs-link-active-border-color: var(--line) var(--line) var(--surface); border-bottom: 1px solid var(--line); gap: .25rem; }
.nav-tabs .nav-link{ color: var(--ink-500); font-weight: 600; border-radius: var(--radius) var(--radius) 0 0; }
.nav-tabs .nav-link:hover{ color: var(--ink); border-color: transparent; }
.nav-tabs .nav-link.active{ color: var(--ink); }

/* --- Site footer --- */
.site-footer{ background: var(--ink); color: var(--paper); border-top: 1px solid var(--ink-700); }
.site-footer__grid{
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr) 1.4fr;
  gap: var(--gutter);
  padding-block: var(--section-y-sm);
}
@media (max-width: 991.98px){ .site-footer__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px){ .site-footer__grid{ grid-template-columns: 1fr; } }
.site-footer__title{ font-size: var(--fs-1); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-soft); margin: 0 0 .875rem; }
.site-footer__links{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.site-footer__links a{ color: var(--brass-soft); text-decoration: none; font-size: var(--fs-3); }
.site-footer__links a:hover{ color: var(--paper); text-decoration: underline; }
.site-footer .site-brand{ font-size: var(--fs-6); }
.site-footer__blurb{ color: var(--brass-soft); font-size: var(--fs-3); max-width: 34ch; margin: 1rem 0; }
.site-footer__bottom{
  border-top: 1px solid var(--ink-700);
  padding-block: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--fs-2);
  color: var(--brass-soft);
}
.social{ display: flex; gap: .5rem; }
.social a{
  width: 34px; height: 34px;
  border: 1px solid var(--wash-light-2);
  border-radius: var(--radius);
  display: grid; place-items: center;
  color: var(--brass-soft);
  text-decoration: none;
}
.social a:hover{ background: var(--wash-light-1); color: var(--paper); }

/* The newsletter sign-up that lives in the footer, on the dark ground. */
.newsletter{ display: flex; gap: .5rem; margin-top: .5rem; }
.newsletter .input{ background: var(--ink-700); border-color: var(--wash-light-2); color: var(--paper); }
.newsletter .input::placeholder{ color: var(--brass-soft); opacity: .7; }

/* --- Toast container (ajax-core) --- */
.toast-stack{ position: fixed; top: 1rem; right: 1rem; z-index: 1090; display: flex; flex-direction: column; gap: .5rem; max-width: min(92vw, 380px); }
.toast-msg{
  display: flex; gap: .625rem; align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-500);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: .75rem .875rem;
  font-size: var(--fs-3);
  animation: mrdn-toast-in var(--t-mid);
}
.toast-msg--success{ border-left-color: var(--credit); }
.toast-msg--error{ border-left-color: var(--debit); }
.toast-msg--info{ border-left-color: var(--ink); }
.toast-msg__icon{ flex: 0 0 auto; }
.toast-msg--success .toast-msg__icon{ color: var(--credit); }
.toast-msg--error .toast-msg__icon{ color: var(--debit); }
@keyframes mrdn-toast-in{ from{ opacity: 0; transform: translateY(-8px); } to{ opacity: 1; transform: none; } }

/* SweetAlert2, brass-styled to match Meridian.confirm(). */
.swal2-popup.mrdn-swal{ border-radius: var(--radius-lg); border: 1px solid var(--line); font-family: var(--font-body); }
.swal2-popup.mrdn-swal .swal2-title{ font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.swal2-popup.mrdn-swal .swal2-html-container{ text-align: left; color: var(--ink-700); }
/* The "Notify user?" box inside a confirm dialog — see Meridian.confirmNotify(). */
.mrdn-swal__text{ margin: 0 0 .875rem; }
.mrdn-swal__check{ margin-bottom: .25rem; }
.mrdn-swal__hint{ display: block; font-size: var(--fs-2); color: var(--ink-500); padding-left: 1.75rem; }

/* The SPA view fades between pages; reduced-motion turns it off. */
#spa-view{ animation: mrdn-fade var(--t-mid); }
#spa-view.is-leaving{ opacity: 0; transition: opacity var(--t-fast); }
@keyframes mrdn-fade{ from{ opacity: 0; } to{ opacity: 1; } }
@media (prefers-reduced-motion: reduce){
  #spa-view, .toast-msg{ animation: none; }
  #spa-view.is-leaving{ transition: none; }
}