/* ==========================================================================
   SAM — Solutions for Account Management
   Design System & Stylesheet
   "The Complete Debt Sales Management"
   Palette: Primary #463780 (purple) · Secondary #5ea7a3 (teal)
   Font: Inter Tight
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Primary — Deep Purple scale (#463780) */
  --primary-900: #211A3A;
  --primary-800: #2c2149;
  --primary-700: #382a5e;
  --primary-600: #463780;   /* PRIMARY */
  --primary-500: #5a4a99;
  --primary-400: #7361b4;
  --primary-300: #9482c8;
  --primary-200: #bdb0e0;
  --primary-100: #d8d3e7;   /* given light lavender */
  --primary-50:  #f0ecf7;

  /* Secondary — Teal scale (#5ea7a3) */
  --secondary-900: #294745; /* given dark teal */
  --secondary-700: #2f5955;
  --secondary-600: #3a716c;
  --secondary-500: #5ea7a3; /* SECONDARY */
  --secondary-400: #78c0bc;
  --secondary-300: #9fd3cf;
  --secondary-200: #c4e6e3;
  --secondary-100: #e2f3f1;

  /* Bright cyan accent (#91FFF9) */
  --cyan:    #91FFF9;
  --cyan-soft: rgba(145,255,249,0.18);

  /* Aliases (legacy names kept so HTML/JS keep working) */
  --navy-900: var(--primary-900);
  --navy-800: var(--primary-800);
  --navy-700: var(--primary-700);
  --navy-600: var(--primary-600);
  --navy-500: var(--primary-500);
  --navy-400: var(--primary-400);
  --navy-300: var(--primary-300);
  --navy-200: var(--primary-200);
  --navy-100: var(--primary-100);
  --navy-50:  var(--primary-50);
  --gold-600: var(--secondary-600);
  --gold-500: var(--secondary-500);
  --gold-400: var(--secondary-400);
  --gold-300: var(--secondary-300);
  --gold-200: var(--secondary-200);
  --gold-100: var(--secondary-100);

  /* Neutrals */
  --ink-900: #1a1430;
  --ink-800: #2a2342;
  --ink-700: #3d3556;
  --ink-600: #544a6e;
  --ink-500: #6e6585;
  --ink-400: #9189a4;
  --ink-300: #b3adc2;
  --ink-200: #d3cfe0;
  --ink-100: #ece9f3;
  --white:   #ffffff;

  /* Semantic */
  --bg:        var(--white);
  --bg-soft:   #f7f5fb;
  --bg-muted:  var(--primary-50);
  --bg-dark:   var(--primary-900);
  --text:      var(--ink-800);
  --text-soft: var(--ink-600);
  --text-mute: var(--ink-500);
  --text-inv:  var(--white);
  --text-inv-soft: rgba(255,255,255,0.80);
  --border:    #e4e0ef;
  --border-strong: #cbc4dc;

  /* Accents */
  --accent:       var(--secondary-500);
  --accent-soft:  var(--primary-100);
  --accent-strong: var(--secondary-600);

  /* Gradients */
  --grad-hero: radial-gradient(120% 120% at 80% 0%, #3a2a63 0%, #2c2149 45%, #211A3A 100%);
  --grad-gold: linear-gradient(135deg, #463780 0%, #5ea7a3 100%);          /* primary→secondary signature */
  --grad-accent: linear-gradient(135deg, #5ea7a3 0%, #3a716c 100%);
  --grad-cyan: linear-gradient(135deg, #91FFF9 0%, #5ea7a3 100%);
  --grad-card-dark: linear-gradient(160deg, #382a5e 0%, #2c2149 100%);
  --grad-shine: linear-gradient(110deg, transparent 30%, var(--cyan-soft) 50%, transparent 70%);

  /* Typography */
  --font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Rhythm */
  --container: 1200px;
  --container-wide: 1380px;
  --container-narrow: 860px;
  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --radius-xl: 0;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(33,26,58,0.07), 0 1px 3px rgba(33,26,58,0.05);
  --shadow:    0 4px 12px rgba(33,26,58,0.08), 0 2px 4px rgba(33,26,58,0.04);
  --shadow-md: 0 12px 28px rgba(33,26,58,0.12), 0 4px 10px rgba(33,26,58,0.06);
  --shadow-lg: 0 28px 60px rgba(33,26,58,0.18), 0 10px 24px rgba(33,26,58,0.09);
  --shadow-gold: 0 12px 30px rgba(70,55,128,0.30);
  --shadow-accent: 0 12px 30px rgba(94,167,163,0.30);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.5s;

  --header-h: 78px;
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }

a { color: var(--primary-700); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--secondary-600); }

ul { list-style: none; padding: 0; }

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--secondary-300); color: var(--primary-900); }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink-900);
}

h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); font-weight: 700; letter-spacing: -0.035em; }
h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.4rem, 2vw, 1.85rem); letter-spacing: -0.02em; }
h4 { font-size: clamp(1.15rem, 1.4vw, 1.35rem); font-weight: 600; letter-spacing: -0.015em; }

p { color: var(--text-soft); }
.lead { font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.6; color: var(--text-soft); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--secondary-600);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.eyebrow.center::before { display: none; }
.eyebrow.is-light { color: var(--cyan); }
.eyebrow--lead { font-weight: 700; font-size: 0.82rem; }

.text-accent { color: var(--secondary-600); }
.text-gold   { color: var(--secondary-500); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
@media (max-width: 480px) {
  .container { padding-inline: 16px; }
}
.container-wide { max-width: var(--container-wide); }
.container-narrow { max-width: var(--container-narrow); }

.section { padding: clamp(72px, 9vw, 130px) 0; position: relative; }
.section--tight { padding: clamp(56px, 6vw, 88px) 0; }
.section--dark { background: var(--primary-900); color: var(--text-inv-soft); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--dark p { color: var(--text-inv-soft); }
.section--soft { background: var(--bg-soft); }
.section--muted { background: var(--bg-muted); }

/* Origin band — "How SAM was built" (evolution-series background art) */
.section--origin {
  background-image: var(--sam-media-evolution);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--primary-900);
}
.section--origin .section-head h2 { color: var(--white); }
.section--origin .section-head .lead { color: var(--text-inv-soft); }

.section--origin .section-head { margin-bottom: 0; }

/* Evolution timeline — replaces the four-card origin grid */
.evo-timeline {
  list-style: none;
  padding: 0;
  margin: 50px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto 54px auto;
  row-gap: 37px;
}
.evo-step {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  position: relative;
}
.evo-bar {
  grid-row: 2;
  position: relative;
  height: 54px;
  margin-inline: 2.5px;   /* 5px between segments; keeps connectors centred */
}
.evo-step:nth-child(odd) .evo-bar { background: rgba(255, 255, 255, 0.94); }
.evo-step:nth-child(even) .evo-bar { background: var(--secondary-500); }

.evo-year {
  font-family: var(--font-display);
  font-size: clamp(49.3px, 6.12vw, 95.2px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--white);
  text-align: center;
}
/* year sits opposite the card, 10px clear of its connector */
.evo-step--below .evo-year { grid-row: 1; align-self: end; }
.evo-step--above .evo-year { grid-row: 3; align-self: start; }

/* connectors grow out of the timeline bar */
.evo-bar::before,
.evo-bar::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.55);
}
.evo-bar::after { height: 27px; }   /* toward the year — leaves the 10px gap */
.evo-bar::before { height: 37px; }  /* reaches the card */
.evo-step--below .evo-bar::after { bottom: 100%; }
.evo-step--above .evo-bar::after { top: 100%; }
.evo-step--below .evo-bar::before { top: 100%; }
.evo-step--above .evo-bar::before { bottom: 100%; }

.evo-card {
  margin-inline: 6px;
  padding: 18px 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(33, 26, 58, 0.34);
}
.evo-step--below .evo-card { grid-row: 3; align-self: start; }
.evo-step--above .evo-card { grid-row: 1; align-self: end; }

.evo-card h3 {
  margin: 0 0 10px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--secondary-300);
}
.evo-card p {
  margin: 0 0 12px;
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-inv-soft);
}
.evo-card p:last-child { margin-bottom: 0; }
.evo-card .evo-lead { font-style: italic; color: var(--white); }

@media (max-width: 1024px) {
  .evo-timeline {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    row-gap: 40px;
  }
  .evo-step {
    grid-row: auto;
    grid-template-rows: auto auto;
    row-gap: 6px;
  }
  .evo-bar { display: none; }
  .evo-step--below .evo-year, .evo-step--above .evo-year {
    grid-row: 1;
    align-self: start;
  }
  .evo-step--below .evo-card, .evo-step--above .evo-card {
    grid-row: 2;
    align-self: start;
    margin: 12px 0 0;
  }
  .evo-bar::before, .evo-bar::after { display: none; }
}
@media (max-width: 860px) {
  .evo-timeline { grid-template-columns: 1fr; }
}

.section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: 18px; }
.section-head p { margin-top: 18px; }

/* Decorative hairline divider */
.rule {
  height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

/* --------------------------------------------------------------------------
   5. Header / Navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease), height 0.35s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--shadow-sm);
  height: 66px;
}
.site-header .nav-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

/* Logo */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  color: var(--white);
  transition: color 0.3s var(--ease);
}
.site-header.is-scrolled .brand { color: var(--primary-900); }
.brand__mark {
  display: block;
  background: transparent;
  flex-shrink: 0;
  overflow: hidden;
}
.site-header.is-scrolled .brand__mark { background: transparent; }
.brand__mark img { width: auto; height: auto; max-height: calc(var(--header-h) - 18px); object-fit: contain; display: block; }
.brand__mark--lockup img { max-height: 168px; }
.brand__mark svg { width: 24px; height: 24px; }
.brand__name { font-size: 1.35rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1; }
.brand__name b { color: var(--cyan); font-weight: 700; }
.site-header.is-scrolled .brand__name b { color: var(--primary-600); }
.brand__sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.7;
  margin-top: 2px;
}

/* Nav */
.primary-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.primary-nav a {
  position: relative;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255,255,255,0.86);
  border-radius: var(--radius-sm);
  transition: color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.site-header.is-scrolled .primary-nav a { color: var(--ink-700); }
.primary-nav a:hover { color: var(--cyan); }
.site-header.is-scrolled .primary-nav a:hover { color: var(--secondary-600); background: var(--primary-50); }
/* Active-page marker: a 5px teal underline under the nav item for the page you
   are on. partials.js tags the current page's link with the `is-active` class
   (navLink() in partials.js) - this is where it is drawn. It is a
   pseudo-element, so it never changes the link's box and never shifts the nav.
   The bar is WHITE over the transparent dark header (a white rule reads cleanly
   against the deep navy hero) and the BRAND TEAL --secondary-500 #5ea7a3 once
   the header turns white on scroll. The label keeps the accent teal over the
   dark header and goes black and bold on white. */
.primary-nav a.is-active { color: var(--cyan); font-weight: 700; }
.primary-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 2px;
  height: 5px;
  background: var(--white);
}
/* On the white header the active item reads like the rest of the nav - black
   and bold - and the teal underline alone carries the "you are here" signal. */
.site-header.is-scrolled .primary-nav a.is-active { color: var(--ink-900); font-weight: 700; }
.site-header.is-scrolled .primary-nav a.is-active::after { background: var(--secondary-500); }

/* DS360 logo button in navbar (logo carries its own white outline) */
.nav-ds360 {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 7px 8px;
  background: transparent;
  border: none;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.nav-ds360 img {
  display: block;
  height: 30px;
  width: auto;
}
.nav-ds360:hover {
  transform: translateY(-1px);
  opacity: 0.85;
}

.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-cta-mobile { display: none; }
.site-header.is-scrolled .nav-cta .btn--ghost {
  background: var(--primary-900);
  color: var(--white);
  border-color: var(--white);
  backdrop-filter: none;
}
.site-header.is-scrolled .nav-cta .btn--ghost:hover {
  background: var(--primary-800);
  border-color: var(--white);
  color: var(--white);
  transform: translateY(-2px);
}

/* Dropdown */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  min-width: 280px;
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.dropdown a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  color: var(--ink-700) !important;
}
.dropdown a:hover { background: var(--primary-50); color: var(--secondary-600) !important; }
.dropdown a strong { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; color: var(--ink-900); }
.dropdown a span { display: block; font-size: 0.82rem; color: var(--text-mute); margin-top: 2px; }
.dropdown .di { width: 30px; height: 30px; flex-shrink: 0; display:grid; place-items:center; border-radius: 8px; background: var(--primary-50); color: var(--secondary-600); }
.dropdown .di svg { width: 18px; height: 18px; }

/* caret */
.has-dropdown > a::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s var(--ease);
}
.has-dropdown:hover > a::after { transform: rotate(225deg) translateY(0); }

/* Mobile toggle */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 10px;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12);
}
.site-header.is-scrolled .nav-toggle { background: var(--primary-50); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block;
  width: 20px; height: 2px; border-radius: 2px;
  background: var(--white);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.site-header.is-scrolled .nav-toggle span,
.site-header.is-scrolled .nav-toggle span::before,
.site-header.is-scrolled .nav-toggle span::after { background: var(--ink-800); }
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
body.menu-open .nav-toggle span { background: transparent; }
body.menu-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
body.menu-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
  white-space: nowrap;
  text-align: center;
  line-height: 1;
}
.btn svg { width: 18px; height: 18px; }

.btn--primary {
  background: var(--grad-gold);
  color: var(--white);
  box-shadow: var(--shadow-gold);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(70,55,128,0.40); color: var(--white); }

.btn--ghost {
  background: rgba(255,255,255,0.08);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(4px);
}
.btn--ghost:hover { background: rgba(255,255,255,0.16); transform: translateY(-2px); color: var(--white); }

.btn--outline {
  background: transparent;
  color: var(--primary-700);
  border: 1.5px solid var(--border-strong);
}
.btn--outline:hover { border-color: var(--accent); color: var(--secondary-600); transform: translateY(-2px); }

.btn--dark { background: var(--primary-900); color: var(--white); }
.btn--dark:hover { background: var(--primary-800); transform: translateY(-2px); color: var(--white); }

.btn--light { background: var(--white); color: var(--primary-900); box-shadow: var(--shadow); }
.btn--light:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--primary-900); }

.btn--sm { padding: 10px 18px; font-size: 0.88rem; }
.btn--lg { padding: 17px 34px; font-size: 1.05rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--secondary-600);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  background: var(--grad-hero);
  color: var(--white);
  overflow: hidden;
  padding-top: var(--header-h);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(145,255,249,0.5), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(145,255,249,0.4), transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(120,192,188,0.5), transparent),
    radial-gradient(1px 1px at 85% 25%, rgba(145,255,249,0.35), transparent),
    radial-gradient(2px 2px at 55% 15%, rgba(120,192,188,0.4), transparent);
  background-size: 100% 100%;
  opacity: 0.7;
  animation: drift 30s linear infinite alternate;
}
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-30px); } }

.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 85% 20%, rgba(145,255,249,0.12), transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(33,26,58,0.6) 100%);
  pointer-events: none;
}

.hero .container { position: relative; z-index: 2; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}
.hero__content { max-width: 640px; }
.hero h1 { color: var(--white); margin-top: 22px; }
.hero h1 .hl {
  background: var(--grad-cyan);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
.hero .lead { color: var(--text-inv-soft); margin-top: 26px; max-width: 560px; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.hero__meta .stat { min-width: 0; }
.hero__meta .stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.6vw, 2.6rem);
  font-weight: 700;
  color: var(--cyan);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hero__meta .stat span {
  display: block;
  font-size: 0.82rem;
  color: var(--text-inv-soft);
  margin-top: 6px;
  letter-spacing: 0.02em;
}

/* Hero badge floating */
.hero__pill {
  position: absolute;
  top: 30px; right: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(145,255,249,0.4);
  backdrop-filter: blur(10px);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--cyan);
}
.hero__pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(145,255,249,0.2); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

/* Hero visual — abstract exchange card */
.hero__visual { position: relative; }
.exchange-card {
  position: relative;
  background: linear-gradient(160deg, rgba(56,42,94,0.85), rgba(44,33,73,0.95));
  border: 1px solid rgba(145,255,249,0.25);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
}
.exchange-card::before {
  content:"";
  position:absolute; inset:0;
  border-radius: var(--radius-lg);
  padding:1px;
  background: linear-gradient(160deg, rgba(145,255,249,0.5), transparent 40%, transparent 60%, rgba(145,255,249,0.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.exchange-card h4 { color: var(--white); font-size: 1.05rem; display:flex; align-items:center; gap:10px; }
.exchange-card .ec-row { display:flex; align-items:center; justify-content:space-between; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.exchange-card .ec-row:last-child { border-bottom: 0; }
.exchange-card .ec-row .lbl { font-size: 0.85rem; color: var(--text-inv-soft); }
.exchange-card .ec-row .val { font-family: var(--font-display); font-size: 1.15rem; color: var(--cyan); font-weight: 600; }
.exchange-card .ec-progress { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; margin-top: 14px; }
.exchange-card .ec-progress i { display:block; height:100%; background: var(--grad-accent); border-radius: 999px; }
.exchange-card .ec-cap { font-size: 0.72rem; color: var(--text-inv-soft); margin-top: 8px; display:flex; justify-content: space-between; }

/* floating chips */
.float-chip {
  position: absolute;
  background: rgba(255,255,255,0.95);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 10px;
  font-size: 0.82rem; font-weight: 600; color: var(--ink-800);
  animation: floaty 5s ease-in-out infinite;
}
.float-chip .ic { width: 30px; height: 30px; border-radius: 8px; display:grid; place-items:center; background: var(--primary-50); color: var(--secondary-600); }
.float-chip .ic svg { width: 18px; height:18px; }
.float-chip.c1 { top: -22px; left: -30px; }
.float-chip.c2 { bottom: -18px; right: -22px; animation-delay: 1.4s; }
.float-chip.c3 { top: 45%; right: -40px; animation-delay: 2.6s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* scroll indicator */
.scroll-cue {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-inv-soft);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-cue .mouse {
  width: 22px; height: 36px; border: 1.5px solid rgba(255,255,255,0.4); border-radius: 14px;
  position: relative;
}
.scroll-cue .mouse::after {
  content:""; position:absolute; top:7px; left:50%; transform: translateX(-50%);
  width:3px; height:7px; border-radius: 2px; background: var(--cyan);
  animation: scrolldot 1.8s infinite;
}
@keyframes scrolldot { 0% { opacity:1; top:7px;} 60%{opacity:0; top:18px;} 100%{opacity:0;} }

/* --------------------------------------------------------------------------
   8. Hero — DBA variant (slide 5 positioning)
   -------------------------------------------------------------------------- */
.hero--dba {
  justify-content: center;
  align-items: center;
  padding-bottom: 80px;
  background-image: var(--sam-media-hero);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  background-color: var(--primary-900);
}
/* Dark scrims removed 2026-10-19 — the hero artwork carries its own tone. */
.hero--dba::before,
.hero--dba::after {
  content: none;
}
.hero--dba .container {
  justify-content: flex-start;
}
.hero--dba .container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 40px;
}
.dba-display {
  max-width: 900px;
}
.dba-territory {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 6.5rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--white);
  text-transform: lowercase;
  margin-bottom: var(--spacing-lg, 16px);
}
.dba-promise {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--cyan);
  margin-bottom: 8px;
}

.accent-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   8b. Trust Bar
   -------------------------------------------------------------------------- */
.trustbar {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  padding: 30px 0;
}
.trustbar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px 44px; }
.trustbar .ti {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.86rem; font-weight: 600; color: var(--ink-700); letter-spacing: 0.02em;
}
.trustbar .ti svg { width: 26px; height: 26px; color: var(--secondary-600); }
.trustbar .ti strong { color: var(--ink-900); font-weight: 700; }

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  height: 100%;
  position: relative;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--secondary-300); }

.card--dark {
  background: var(--grad-card-dark);
  color: var(--text-inv-soft);
  border-color: rgba(255,255,255,0.08);
}
.card--dark h3, .card--dark h4 { color: var(--white); }
.card--dark p { color: var(--text-inv-soft); }

.card__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: var(--primary-50);
  color: var(--secondary-600);
  margin-bottom: 22px;
}
.card__icon svg { width: 28px; height: 28px; }
.card--dark .card__icon { background: rgba(145,255,249,0.14); color: var(--cyan); }

.card h3 { margin-bottom: 12px; }
.card p { font-size: 0.96rem; }
.card .card__list { margin-top: 18px; display: grid; gap: 10px; }
.card .card__list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.92rem; color: var(--text-soft);
}
.card .card__list li svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.card--dark .card__list li { color: var(--text-inv-soft); }
.card--dark .card__list li svg { color: var(--cyan); }

/* Card-as-link (pillar cards) */
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: inherit;
}
.card-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.card-link:hover .card { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--secondary-300); }
.card-link--dark:hover .card--dark { transform: translateY(-6px); }
.card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 22px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--accent);
  letter-spacing: 0.01em;
}
.card-link:hover .card__cta { gap: 10px; }
.card--dark .card__cta { color: var(--cyan); }

/* --------------------------------------------------------------------------
   PayTrend-style cards (circular icon overlapping top, divider, badge row)
   -------------------------------------------------------------------------- */
.card--pt {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 56px 28px 28px;
  text-align: center;
  position: relative;
  height: 100%;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.card--pt:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12); }

.card--pt .card__icon-circle {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--primary-700);
  color: var(--white);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(56, 42, 94, 0.35);
}
.card--pt .card__icon-circle svg { width: 36px; height: 36px; }

.card--pt h3 { margin: 0 0 12px; }
.card--pt p { font-size: 0.96rem; color: var(--text-soft); }

.card--pt .card__divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 26px 0 20px;
}

.card--pt .card__badges {
  display: flex;
  justify-content: center;
  gap: 14px 18px;
  flex-wrap: wrap;
}
.card--pt .card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-soft);
  font-weight: 500;
}
.card--pt .card__badge svg {
  width: 16px;
  height: 16px;
  color: var(--primary-700);
  flex-shrink: 0;
}

/* Featured (middle) card — purple gradient (PayTrend-style highlight) */
.card--pt.card--featured {
  background: linear-gradient(180deg, var(--primary-600) 0%, var(--primary-900) 100%);
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 14px 36px rgba(70, 55, 128, 0.32);
}
.card--pt.card--featured h3 { color: var(--white); }
.card--pt.card--featured p { color: rgba(255,255,255,0.92); }
.card--pt.card--featured .card__divider { border-top-color: rgba(255,255,255,0.28); }
.card--pt.card--featured .card__badge { color: var(--white); }
.card--pt.card--featured .card__badge svg { color: var(--white); }
.card--pt.card--featured .card__icon-circle {
  background: var(--white);
  color: var(--primary-700);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.card-link:hover .card--pt { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12); }
.card-link:hover .card--pt.card--featured { box-shadow: 0 22px 48px rgba(70, 55, 128, 0.42); }

/* --------------------------------------------------------------------------
   PayTrend-style abstract section (gradient + wavy lines) + floating stat bar
   -------------------------------------------------------------------------- */
.section--abstract {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(145, 255, 249, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(70, 55, 128, 0.45) 0%, transparent 60%),
    linear-gradient(135deg, var(--cyan) 0%, #4ea3b8 45%, var(--primary-900) 100%);
  color: var(--white);
  padding: 110px 0 180px;
}
.section--abstract .abstract-waves {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  z-index: 0;
}
.section--abstract .abstract-waves svg {
  width: 100%;
  height: 100%;
  display: block;
}
.section--abstract .container { position: relative; z-index: 1; }

.section--abstract .abstract-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.section--abstract .abstract-head .eyebrow {
  color: var(--primary-900);
  font-weight: 700;
  letter-spacing: 0.16em;
}
.section--abstract .abstract-head h2 {
  margin-top: 18px;
  color: var(--white);
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.section--abstract .abstract-head h2 i.accent-italic { color: var(--cyan); }
.section--abstract .abstract-body p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 18px;
}

@media (max-width: 900px) {
  .section--abstract .abstract-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* Floating stat bar */
.stat-bar {
  position: relative;
  z-index: 2;
  margin: 80px auto 0;
  max-width: 1100px;
  background: var(--white);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  padding: 36px 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.stat-bar__item {
  text-align: center;
  padding: 0 12px;
  position: relative;
}
.stat-bar__item + .stat-bar__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: rgba(15, 23, 42, 0.12);
}
.stat-bar__value {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--primary-900);
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-bar__label {
  margin-top: 8px;
  font-size: 0.92rem;
  color: var(--text-soft);
  font-weight: 500;
}
/* Mobile: the four stats stack into a single column. */
@media (max-width: 860px) {
  .stat-bar { grid-template-columns: 1fr; gap: 28px; }
  .stat-bar__item + .stat-bar__item::before { display: none; }
}

/* Number badge cards */
.pillar-num {
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.9;
  letter-spacing: -0.03em;
}

/* Four Core Pillars — deck treatment: actual pillars (tall), not plain squares */
.card:has(.pillar-num) {
  min-height: 430px;
  display: flex;
  flex-direction: column;
}
.card:has(.pillar-num) .pillar-num {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--primary-900);
  opacity: 1;
  font-size: 3.6rem;
}

/* Four Core Pillars — deck image (replaces the HTML pillar cards) */
.pillars-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Platform statement below the pillars image */
.platform-statement {
  margin: 44px auto 0;
  max-width: 920px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 500;
  line-height: 1.22;
  color: var(--primary-900);
}
.platform-statement__accent {
  font-weight: 800;
  color: var(--primary-600);
}
.platform-statement__sub {
  margin: 18px auto 0;
  max-width: 760px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 1.18rem;
  font-weight: 400;
  color: var(--primary-900);
}

/* --------------------------------------------------------------------------
   10. Grids
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 28px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* --------------------------------------------------------------------------
   11. Feature List / Check rows
   -------------------------------------------------------------------------- */
.check-list { display: grid; gap: 16px; }
.check-list li {
  display: flex; gap: 14px; align-items: flex-start;
}
.check-list li .ci {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--secondary-600);
  display: grid; place-items: center;
}
.check-list li .ci svg { width: 15px; height: 15px; }
.check-list li b { display:block; font-weight: 600; color: var(--ink-900); font-size: 1rem; }
.check-list li span { display:block; font-size: 0.9rem; color: var(--text-soft); margin-top: 2px; }
.check-list.is-light li b { color: var(--white); }
.check-list.is-light li span { color: var(--text-inv-soft); }
.check-list.is-light li .ci { background: rgba(145,255,249,0.18); color: var(--cyan); }

/* --------------------------------------------------------------------------
   12. Split / Feature blocks
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.split--reverse .split__media { order: 2; }

/* What-sets-SAM-apart card */
.diff-card {
  background: var(--primary-900);
  color: var(--white);
  border: 1px solid var(--primary-900);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-md);
}
.diff-card--photo {
  padding: 0;
  overflow: hidden;
}
.diff-card--photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.diff-card__caption {
  padding: 18px 24px 22px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--cyan);
  letter-spacing: 0.01em;
}
.diff-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cyan);
}
.diff-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(145,255,249,0.18);
  color: var(--cyan);
}
.diff-card__icon svg { width: 14px; height: 14px; }
.diff-card__list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 14px;
}
.diff-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text-inv-soft);
}
.diff-card__mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(145,255,249,0.18);
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 2px;
}

/* Mock UI block */
.mock {
  position: relative;
  background: linear-gradient(160deg, #382a5e, #211A3A);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.06);
}
.mock__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mock__bar .d { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.mock__bar .d:nth-child(1){ background:#e06c6c;} .mock__bar .d:nth-child(2){background:#e0a93c;} .mock__bar .d:nth-child(3){background:#7ec488;}
.mock__bar .url { margin-left: 14px; font-size: 0.75rem; color: rgba(255,255,255,0.5); letter-spacing: 0.04em; }
.mock__body { padding: 24px; }
.mock__row { display:flex; align-items:center; justify-content:space-between; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.mock__row:last-child { border-bottom:0; }
.mock__row .k { font-size: 0.8rem; color: var(--text-inv-soft); display:flex; align-items:center; gap:10px; }
.mock__row .k .ki { width: 22px; height:22px; border-radius: 6px; background: rgba(145,255,249,0.18); color: var(--cyan); display:grid; place-items:center; }
.mock__row .k .ki svg { width:14px; height:14px; }
.mock__row .v { font-family: var(--font-display); color: var(--cyan); font-weight:600; font-size: 1rem; }
.mock__progress { height:5px; border-radius:999px; background: rgba(255,255,255,0.08); overflow:hidden; margin-top: 10px; }
.mock__progress i { display:block; height:100%; background: var(--grad-accent); }

/* --------------------------------------------------------------------------
   13. Asset class chips / pills
   -------------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--border);
  font-size: 0.88rem; font-weight: 500; color: var(--ink-700);
  transition: all 0.25s var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--secondary-600); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.chip svg { width: 16px; height: 16px; color: var(--accent); }

/* Asset class cards */
.asset-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  transition: all 0.3s var(--ease);
  height: 100%;
}
.asset-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--secondary-300); }
.asset-card .ac-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--primary-50); color: var(--secondary-600); display:grid; place-items:center; margin-bottom: 18px; }
.asset-card .ac-ic svg { width: 26px; height: 26px; }
.asset-card h4 { font-family: var(--font-sans); font-size: 1.02rem; font-weight: 600; color: var(--ink-900); margin-bottom: 8px; }
.asset-card p { font-size: 0.88rem; color: var(--text-soft); }

/* The "Types of portfolios" catalogue on asset-classes.html: a WHITE section
   carrying dark navy asset tiles and a solid brand-teal industry panel.
   .section--catalog is a scope hook only - it sets no background of its own,
   so the section keeps the default light treatment. The rules stay scoped here
   so about.html's asset cards (light section) keep the light treatment above. */
.section--catalog .asset-card {
  background: var(--grad-card-dark);
  border-color: rgba(255, 255, 255, 0.10);
}
.section--catalog .asset-card:hover {
  border-color: rgba(145, 255, 249, 0.55);
  box-shadow: 0 18px 40px rgba(33, 26, 58, 0.22);
}
.section--catalog .asset-card .ac-ic {
  background: rgba(145, 255, 249, 0.14);
  color: var(--cyan);
}
.section--catalog .asset-card h4 { color: var(--white); }
.section--catalog .asset-card p { color: var(--text-inv-soft); }
/* The industry panel is the section's colour accent: solid brand teal.
   Text is dark, not white - white on #5ea7a3 is 2.8:1, --ink-900 is 6.35:1. */
.card--teal {
  background: var(--secondary-500);
  border-color: rgba(33, 26, 58, 0.18);
}
.card--teal h4 { color: var(--ink-900); }
.section--catalog .chip {
  background: var(--white);
  border-color: rgba(33, 26, 58, 0.12);
  color: var(--ink-900);
}
.section--catalog .chip svg { color: var(--secondary-600); }
.section--catalog .chip:hover {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--white);
}
.section--catalog .chip:hover svg { color: var(--white); }

/* --------------------------------------------------------------------------
   14. Process / Timeline
   -------------------------------------------------------------------------- */
.process { position: relative; }
.process__line {
  position: absolute; top: 38px; left: 6%; right: 6%;
  height: 2px; background: linear-gradient(90deg, transparent, var(--border-strong) 10%, var(--border-strong) 90%, transparent);
}
.process__step { position: relative; text-align: center; }
.process__num {
  width: 76px; height: 76px; margin: 0 auto 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--white);
  border: 2px solid var(--border-strong);
  font-family: var(--font-display);
  font-size: 1.7rem; font-weight: 700; color: var(--primary-700);
  position: relative; z-index: 2;
  transition: all 0.3s var(--ease);
}
.process__step:hover .process__num { border-color: var(--accent); color: var(--secondary-600); box-shadow: var(--shadow-md); transform: scale(1.05); }
.process__step h4 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.process__step p { font-size: 0.9rem; }

/* 7-step timeline — single row on desktop so the connecting line spans
   every step. Wraps to 4 cols on tablet, stacks on mobile. */
.process__grid { grid-template-columns: repeat(7, 1fr); gap: 16px; position: relative; }

/* --------------------------------------------------------------------------
   15. Comparison / Matrix table
   -------------------------------------------------------------------------- */
.matrix {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.matrix th, .matrix td {
  padding: 18px 22px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.matrix thead th {
  background: var(--primary-900);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.matrix tbody tr:last-child td { border-bottom: 0; }
.matrix tbody tr:hover { background: var(--primary-50); }
.matrix td:first-child { font-weight: 600; color: var(--ink-900); }
.matrix .yes { color: #3a9d6b; font-weight: 600; }
.matrix .no  { color: #d96a5b; font-weight: 600; }
.matrix .partial { color: var(--secondary-600); font-weight: 600; }
.matrix .ic { display:inline-flex; align-items:center; gap:6px; }

/* Pricing table */
.price-table th, .price-table td { padding: 20px 24px; }
.price-table tbody td:first-child { font-family: var(--font-display); font-size: 1.15rem; color: var(--primary-700); }

/* --------------------------------------------------------------------------
   16. Testimonial / Quote
   -------------------------------------------------------------------------- */
.quote {
  background: var(--grad-card-dark);
  border-radius: var(--radius-xl);
  padding: clamp(40px, 5vw, 70px);
  color: var(--white);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(145,255,249,0.18);
}
.quote::before {
  content: "\201C";
  position: absolute;
  top: -10px; left: 30px;
  font-family: var(--font-display);
  font-size: 12rem;
  color: rgba(145,255,249,0.16);
  line-height: 1;
}
.quote blockquote {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.4;
  font-weight: 500;
  font-style: italic;
  color: var(--white);
  max-width: 800px;
  letter-spacing: -0.015em;
}
.quote .author { margin-top: 26px; display:flex; align-items:center; gap: 14px; position: relative; }
.quote .author .av { width:46px; height:46px; border-radius: 50%; background: var(--grad-gold); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; color: var(--white); }
.quote .author b { display:block; font-family: var(--font-sans); font-weight: 600; color: var(--white); }
.quote .author span { font-size: 0.85rem; color: var(--text-inv-soft); }

/* --------------------------------------------------------------------------
   17. Team / Squad
   -------------------------------------------------------------------------- */
.squad-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.squad-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  transition: all 0.3s var(--ease);
}
.squad-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--secondary-300); }
.squad-card .av {
  width: 104px; height: 104px; border-radius: 50%; margin: 0 auto 16px;
  background: var(--grad-card-dark);
  color: var(--cyan);
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--font-display); font-size: 1.9rem; font-weight: 700;
  border: 3px solid var(--secondary-300);
  box-shadow: 0 8px 20px rgba(70,55,128,0.18);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.squad-card:hover .av { transform: scale(1.04); border-color: var(--cyan); }
.squad-card .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.squad-card h4 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; }
.squad-card .role { font-size: 0.78rem; color: var(--secondary-600); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 4px; min-height: 2.4em; display: flex; align-items: center; justify-content: center; }
.squad-card .loc { font-size: 0.85rem; color: var(--text-mute); margin-top: 10px; }
.squad-card .contact { margin-top: 14px; display:flex; flex-direction: column; gap: 4px; font-size: 0.82rem; }
.squad-card .contact a { color: var(--text-soft); }
.squad-card .contact a:hover { color: var(--secondary-600); }

/* ---- SAM Squad · team banner ---------------------------------------------
   The client-supplied "the SAM Squad" artwork: the eleven illustrated people
   against the Pittsburgh skyline, with the squad logo and the 22-years line
   baked in. It sits in the Inside SAM squad section (about.html). */
.squad-banner {
  display: block;
  max-width: 1080px;
  margin: 48px auto 0;
  line-height: 0;
  background: var(--primary-900);
}
.squad-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- SAM Squad · pinned map ---------------------------------------------- */
.squad-map {
  position: relative;
  /* Lift the whole map above the section's dot-grid/orb layers so the
     background texture sits behind the artwork instead of over it. */
  z-index: 1;
  max-width: 1080px;
  margin: 48px auto 0;
}
.squad-map__img { display: block; width: 100%; height: auto; }
/* The pin and label overlays are anchored to the MAP IMAGE box, not to the
   whole figure: below 700px the Philippines inset leaves its absolute
   position and joins the figure's flow, which would make the figure taller
   than the map and drag every pin's percentage down with it. */
.squad-map__canvas { position: relative; }
.squad-map__pins { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

/* Philippines locator inset - sits in the empty North Atlantic corner at the
    top right of the truncated North America map. The inset displays the
    supplied artwork file itself
    (assets/images/philippines-caricature-transparent.webp, 1024x1024),
    unmodified - the art keeps its own proportions. Only the canvas size and
    position are chosen. The map art is now 1.821x larger than the previous
    render (19.20 px/deg -> 34.96 px/deg), so true scale would need a 618
    map-px frame and the largest empty region on the artwork is only 404x512
    (x 1596-2000, y 0-512). The frame is therefore 300 map-px wide (15% of
    the figure) at left 84.6% / top 4%, which keeps it clear of the Toronto
    pins - their headshots top out at y 389 including the 9px bob - and of
    the Maine coast, which begins at x 1912 below y 400. The frame is
    transparent with a black border and the archipelago is centred inside it.
    left / top / width are percentages of the map figure. */
.squad-inset {
  position: absolute;
  left: 84.6%;
  top: 4%;
  width: 15%;
  z-index: 2;
  background: transparent;
  border: 1px solid #000;
  box-shadow: 0 8px 22px rgba(11, 9, 24, 0.10);
}
.squad-inset__label {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 6px;
  font-family: var(--font-sans);
  font-size: clamp(8px, 0.95vw, 12px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-900);
  white-space: nowrap;
}
.squad-inset__frame { position: relative; }
.squad-inset__img { display: block; width: 100%; height: auto; }
.squad-inset__pins { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
/* Ken's pin in the Philippines inset uses the same pin artwork and size as
   every other squad pin — no size override here. */

/* State / province labels — extruded 3D type.
   The font is sized against the MAP, not the viewport: .squad-map__canvas is a
   query container, so 1.2cqw keeps the labels in the same proportion to the
   artwork at every width. Sizing them off the viewport instead made them
   shrink relative to the map on small screens and collide with each other. */
.squad-map__canvas { container-type: inline-size; }
.squad-map__labels { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.map-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: calc(clamp(6px, 1.2cqw, 13px) * var(--ls, 1));
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  text-shadow:
    0 1px 0 #3c3168,
    0 2px 0 #332a58,
    0 3px 0 #2b2349,
    0 4px 0 #231d3c,
    0 5px 7px rgba(11, 9, 24, 0.55);
  opacity: 0.94;
}

.map-pin {
  position: absolute;
  /* --dx / --dy are set by squad.js: the pixel nudge a pin gets when another
     pin's headshot would cover it. A leader line is drawn back to the true
     anchor, so the pin still points at the right city. */
  /* --pin-tx / --pin-ty place the box so the pin's TIP lands on the anchor.
     They depend on which way the pin points: a downward pin hangs above its
     city, an upward pin hangs below it, a sideways pin sits to one side. */
  transform: translate(calc(var(--pin-tx, -50%) + var(--dx, 0px)),
                      calc(var(--pin-ty, -100%) + var(--dy, 0px)));
  pointer-events: auto;
  outline: none;
  will-change: transform;
}
/* Pin directions: 0 = down (default), 180 = up, 90 = left, 270 = right.
   The artwork for a non-default direction is a separate file that ALREADY
   points that way, so nothing is rotated here - only the box placement
   changes, so the pin's tip lands on its anchor. */
.map-pin[data-dir="180"] { --pin-tx: -50%;  --pin-ty: 0%; }
.map-pin[data-dir="90"]  { --pin-tx: 0%;    --pin-ty: -50%; }
.map-pin[data-dir="270"] { --pin-tx: -100%; --pin-ty: -50%; }
.map-pin:hover, .map-pin:focus-visible { z-index: 30; }
.map-pin__drop {
  animation: pin-drop 0.8s cubic-bezier(0.22, 1.15, 0.36, 1) both;
  animation-play-state: paused;
}
.map-pin__bob {
  animation: pin-bob 3s ease-in-out infinite;
  animation-play-state: paused;
}
.squad-map.is-in .map-pin__drop,
.squad-map.is-in .map-pin__bob,
.squad-inset.is-in .map-pin__drop,
.squad-inset.is-in .map-pin__bob { animation-play-state: running; }

.map-pin__img {
  display: block;
  width: 56px;
  height: auto;
  filter: drop-shadow(0 10px 12px rgba(11, 9, 24, 0.32));
  transition: transform 0.25s ease;
}
.map-pin:hover .map-pin__img,
.map-pin:focus-visible .map-pin__img { transform: scale(1.08); }

.map-pin__label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 6px);
  padding: 6px 11px;
  background: var(--primary-900);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
  z-index: 5;
}
.map-pin__label em {
  display: block;
  font-style: normal;
  font-weight: 500;
  color: var(--secondary-300);
  font-size: 0.66rem;
}
.map-pin:hover .map-pin__label,
.map-pin:focus-visible .map-pin__label {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
/* The name chip moves with the pin: it always sits on the tip side, away from
   the head, so it never lands on top of the headshot. */
.map-pin[data-dir="180"] .map-pin__label {
  top: auto; bottom: 100%; left: 50%; right: auto;
  transform: translate(-50%, -6px);
}
.map-pin[data-dir="180"]:hover .map-pin__label,
.map-pin[data-dir="180"]:focus-visible .map-pin__label { transform: translate(-50%, 0); }
.map-pin[data-dir="90"] .map-pin__label {
  top: 50%; bottom: auto; left: auto; right: 100%;
  transform: translate(-6px, -50%);
}
.map-pin[data-dir="90"]:hover .map-pin__label,
.map-pin[data-dir="90"]:focus-visible .map-pin__label { transform: translate(0, -50%); }
.map-pin[data-dir="270"] .map-pin__label {
  top: 50%; bottom: auto; left: 100%; right: auto;
  transform: translate(6px, -50%);
}
.map-pin[data-dir="270"]:hover .map-pin__label,
.map-pin[data-dir="270"]:focus-visible .map-pin__label { transform: translate(0, -50%); }

@keyframes pin-drop {
  /* --drop-lift is set on the map canvas by squad.js: 72px on a wide map,
     34px on a narrow one, so the entrance does not sweep a pin across its
     neighbours on a phone. */
  0%   { opacity: 0; transform: translateY(var(--drop-lift, -72px)); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes pin-bob {
  0%, 100% { transform: translateY(0); }
  /* --bob-lift is set on the map canvas by squad.js: 9px on a wide map, 4px
     on a narrow one, so the staggered phases never swing two heads
     together. */
  50%      { transform: translateY(var(--bob-lift, -9px)); }
}

.map-pin { cursor: pointer; }

/* ---- Pin leader lines -----------------------------------------------------
   A pin that had to be nudged aside (crowded Northeast cluster) is tied back
   to its exact location with a thin line and a ring at the anchor. The line
   carries a white casing so it stays readable over the map artwork. */
.squad-map__leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.map-leader {
  stroke: var(--primary-900);
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: 0.9;
  transition: stroke 0.18s ease, stroke-width 0.18s ease, opacity 0.18s ease;
}
.map-leader--casing {
  stroke: #fff;
  stroke-width: 4.2;
  opacity: 0.72;
}
.map-leader.is-hot { stroke: var(--secondary-600); stroke-width: 2.8; opacity: 1; }
.map-leader__dot {
  fill: #fff;
  stroke: var(--primary-900);
  stroke-width: 2;
  opacity: 0.95;
  transition: stroke 0.18s ease, r 0.18s ease;
}
.map-leader__dot.is-hot { stroke: var(--secondary-600); r: 5; }

.squad-map__caption {
  margin-top: 22px;
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-mute);
}

/* ---- SAM Squad · profile popup (pin click) ------------------------------- */
.squad-popup {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}
.squad-popup.is-open { display: flex; }
.squad-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 9, 24, 0.62);
}
.squad-popup__card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 280px 1fr;
  /* One row, allowed to shrink below its content so the text panel can scroll
     a long fun fact instead of the card clipping it. */
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  width: min(680px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: hidden;
  background: #fff;
  text-align: left;
  box-shadow: 0 28px 64px rgba(11, 9, 24, 0.46);
  animation: squad-popup-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes squad-popup-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* --- portrait panel --- */
/* The portrait keeps the image's OWN ratio (the profile images are 700 x 875,
   so 4:5) and no longer stretches with the row. A long fun fact therefore
   cannot zoom the photo into an extreme close-up - the image is the same size
   whether the text beside it is one line or ten. The column itself stays the
   deep-navy panel, so the portrait reads as a tile on the brand colour. */
.squad-popup__media {
  position: relative;
  background: var(--primary-900);
  overflow: hidden;
}
.squad-popup__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}
.squad-popup__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(33, 26, 58, 0) 58%, rgba(33, 26, 58, 0.82) 100%);
}
.squad-popup__badge {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 1;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --- text panel --- */
.squad-popup__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px 40px 40px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}
/* The inner wrapper keeps the name / role / location block vertically centred
   for a short profile. When the fun fact makes the text taller than the card,
   the wrapper grows past 100% and the body scrolls - so a long fact is never
   clipped, and the portrait beside it stays put. */
.squad-popup__inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.squad-popup__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary-900);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(11, 9, 24, 0.24);
}
.squad-popup__close:hover { background: #fff; color: var(--primary-600); }
.squad-popup__name {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--primary-900);
}
.squad-popup__role {
  margin: 0 0 18px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secondary-600);
}
.squad-popup__loc {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--primary-100);
  font-size: 0.9rem;
  color: var(--text-mute);
}
.squad-popup__pin {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--secondary-500);
}

/* --- fun fact ("did you know?") ----------------------------------------- */
.squad-popup__fact {
  display: none;
  margin-top: 24px;
  padding: 16px 18px;
  background: var(--primary-50);
  border-left: 3px solid var(--secondary-500);
}
.squad-popup__fact.is-visible { display: block; }
.squad-popup__fact-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--secondary-600);
}
.squad-popup__fact-text p {
  margin: 0 0 10px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-700);
}
.squad-popup__fact-text p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .squad-popup { padding: 16px; }
  .squad-popup__card {
    grid-template-columns: 1fr;
    /* Two stacked rows (portrait, then text) - both auto, so the CARD scrolls
       as one column on a phone rather than the text panel alone. */
    grid-template-rows: auto auto;
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
  .squad-popup__body { padding: 26px 24px 28px; overflow: visible; min-height: auto; }
  .squad-popup__inner { min-height: 0; }
  .squad-popup__name { font-size: 1.28rem; }
}

@media (max-width: 860px) {
  .map-pin__img { width: 42px; }
  .map-pin__label { font-size: 0.66rem; padding: 5px 9px; }
  /* The inset keeps its place in the Pacific gap down to 700px, so the
     Philippines still reads as a locator map to the LEFT of North America on
     tablets. Its name chip is the one thing that cannot fit in the box. */
  .squad-inset .map-pin__label { display: none; }
}
/* Phones only: the map is under ~450px wide here, and the eight smallest
   jurisdictions (MD, DE, NJ, CT, RI, MA, VT, NH) physically overlap
   their neighbours at any readable size. They are dropped rather than
   rendered on top of each other; every other state and province still shows. */
@media (max-width: 560px) {
  .map-label[data-region="MD"], .map-label[data-region="DE"],
  .map-label[data-region="NJ"], .map-label[data-region="CT"],
  .map-label[data-region="RI"], .map-label[data-region="MA"],
  .map-label[data-region="VT"], .map-label[data-region="NH"] { display: none; }
}
/* Phone only: the inset gets too small for a 42px pin to read against the
   archipelago, so it leaves the map and sits under it instead. */
@media (max-width: 700px) {
  .squad-inset {
    position: relative;
    left: auto;
    top: auto;
    width: 170px;
    margin: 28px auto 0;
  }
  .squad-inset__label { font-size: 9px; margin-bottom: 5px; }
}
@media (max-width: 560px) {
  .map-pin__img { width: 34px; }
  .map-pin__label { display: none; }
}

/* Squad CTA — replaces team-member cards on About page */
.squad-cta {
  max-width: 720px;
  margin: 56px auto 0;
  text-align: center;
  padding: 44px 36px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.squad-cta__lede {
  font-size: 1.08rem;
  color: var(--text-soft);
  line-height: 1.6;
  margin-bottom: 28px;
}
.squad-cta__btn {
  display: inline-flex;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .squad-cta { padding: 32px 22px; margin-top: 36px; }
  .squad-cta__lede { font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   18. Stats / Counters
   -------------------------------------------------------------------------- */
.stats-band {
  background: var(--primary-900);
  color: var(--white);
  padding: clamp(56px, 7vw, 90px) 0;
  position: relative;
  overflow: hidden;
}
.stats-band::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(70% 80% at 20% 30%, rgba(145,255,249,0.08), transparent 60%);
}
.stats-band .grid { position: relative; }
.stat-block { text-align: center; padding: 16px; }
.stat-block .num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.5vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  background: var(--grad-cyan);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-block .label { margin-top: 14px; font-size: 0.92rem; color: var(--text-inv-soft); letter-spacing: 0.02em; }

/* --------------------------------------------------------------------------
   19. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--grad-hero);
  color: var(--white);
  border-radius: var(--radius-xl);
  padding: clamp(44px, 6vw, 76px);
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(145,255,249,0.18);
}
.cta-band::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(60% 70% at 50% 0%, rgba(145,255,249,0.18), transparent 70%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--white); max-width: 720px; margin: 16px auto 0; }
.cta-band p { color: var(--text-inv-soft); max-width: 560px; margin: 20px auto 0; }
.cta-band .hero__actions { justify-content: center; margin-top: 34px; }

/* --------------------------------------------------------------------------
   20. Insights / Blog teaser
   -------------------------------------------------------------------------- */
.post-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.35s var(--ease);
  height: 100%;
  display: flex; flex-direction: column;
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--secondary-300); }
.post-card__media {
  height: 180px;
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
}
.post-card__media::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(160deg, transparent 50%, rgba(33,26,58,0.6));
}
.post-card__media svg { width: 64px; height: 64px; color: rgba(255,255,255,0.9); position: relative; z-index: 1; }
.post-card__media .tag {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.92);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--primary-700);
}
.post-card__body { padding: 24px; display:flex; flex-direction:column; flex: 1; }
.post-card__body .meta { font-size: 0.78rem; color: var(--text-mute); letter-spacing: 0.04em; }
.post-card__body h4 { font-family: var(--font-display); font-size: 1.25rem; margin: 10px 0 12px; line-height: 1.25; }
.post-card__body p { font-size: 0.9rem; flex: 1; }
.post-card__body .read { margin-top: 18px; }

/* gradient media variants — on palette */
.pm-gold  { background: linear-gradient(135deg, #5a4a99, #463780); }   /* purple */
.pm-navy  { background: linear-gradient(135deg, #382a5e, #211A3A); }   /* deep purple */
.pm-teal  { background: linear-gradient(135deg, #3a716c, #294745); }   /* teal */
.pm-plum  { background: linear-gradient(135deg, #463780, #294745); }   /* purple→teal */

/* --------------------------------------------------------------------------
   21. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.accordion { display: grid; gap: 12px; max-width: 820px; margin-inline: auto; }
.acc-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.acc-item.is-open { border-color: var(--secondary-300); box-shadow: var(--shadow-sm); }
.acc-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink-900);
  text-align: left;
}
.acc-q .pm { width: 24px; height: 24px; flex-shrink: 0; position: relative; }
.acc-q .pm::before, .acc-q .pm::after {
  content:""; position:absolute; background: var(--secondary-600); border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.acc-q .pm::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.acc-q .pm::after  { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
.acc-item.is-open .acc-q .pm::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.acc-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.acc-a-inner { padding: 0 24px 24px; color: var(--text-soft); font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   22. Contact
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
}
.contact-info { display: grid; gap: 22px; }
.contact-line {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.contact-line .cli { width: 46px; height: 46px; border-radius: 12px; background: var(--primary-50); color: var(--secondary-600); display:grid; place-items:center; flex-shrink:0; }
.contact-line .cli svg { width: 22px; height: 22px; }
.contact-line b { display:block; font-weight: 600; color: var(--ink-900); }
.contact-line a, .contact-line span { display:block; color: var(--text-soft); font-size: 0.95rem; margin-top: 2px; }
.contact-line a:hover { color: var(--secondary-600); }

.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 40px);
  box-shadow: var(--shadow);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Intent anchors on the contact form (#sell, #buy, #agency). They are
   zero-height markers sitting at the top of the card so a deep link scrolls
   the form into view without shifting the layout. */
.anchor-target {
  display: block;
  height: 0;
  overflow: hidden;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.field { margin-bottom: 18px; }
.field label { display:block; font-size: 0.82rem; font-weight: 600; color: var(--ink-700); margin-bottom: 7px; letter-spacing: 0.02em; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 1rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(94,167,163,0.20);
}
.field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: 0.8rem; color: var(--text-mute); margin-top: 14px; }

/* --------------------------------------------------------------------------
   23. Page hero (interior pages)
   -------------------------------------------------------------------------- */
.page-hero {
  background-image:
    linear-gradient(90deg, rgba(33, 26, 58, 0.90) 0%, rgba(33, 26, 58, 0.74) 40%, rgba(33, 26, 58, 0.46) 100%),
    var(--sam-media-bleed);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--primary-900);
  color: var(--white);
  padding: calc(var(--header-h) + 70px) 0 70px;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content:""; position:absolute; inset:0;
  background: radial-gradient(60% 60% at 80% 10%, rgba(145,255,249,0.12), transparent 70%);
}
.page-hero .container { position: relative; z-index: 1; max-width: 760px; }
.page-hero h1 { color: var(--white); margin-top: 18px; }
.page-hero .lead { color: var(--text-inv-soft); margin-top: 20px; max-width: 600px; }
.page-hero .hero__actions { margin-top: 30px; }
.breadcrumb {
  display:flex; gap: 8px; align-items: center;
  font-size: 0.82rem; color: var(--text-inv-soft);
  letter-spacing: 0.04em;
}
.breadcrumb a { color: var(--cyan); }
.breadcrumb span { opacity: 0.5; }

/* --------------------------------------------------------------------------
   23b. Page-hero photo — female-oriented stock photography across pages
   -------------------------------------------------------------------------- */
.page-hero__photo {
  margin-top: 56px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  max-width: 100%;
}
.page-hero__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Full-bleed page hero (photo is the entire background) */
.page-hero--bleed {
  position: relative;
  /* --bleed-bg is provided by functions.php from the Media Library map
   (--sam-media-bleed); never use a document-relative url() here. */
  --bleed-bg: var(--sam-media-bleed);
  background-image:
    linear-gradient(90deg, rgba(33, 26, 58, 0.86) 0%, rgba(33, 26, 58, 0.60) 38%, rgba(33, 26, 58, 0.28) 72%, rgba(33, 26, 58, 0.10) 100%),
    var(--bleed-bg);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  background-color: var(--primary-900);
  color: var(--white);
  padding: 140px 0 100px;
}
.page-hero--bleed .container { position: relative; z-index: 2; }
.page-hero--bleed .eyebrow { color: var(--cyan); }
.page-hero--bleed h1 { color: var(--white); }
.page-hero--bleed h1 i.accent-italic { color: var(--cyan); }
.page-hero--bleed .lead { color: rgba(255, 255, 255, 0.92); }
.page-hero--bleed .hero__actions .btn--primary { background: var(--white); color: var(--primary-900); border-color: var(--white); }
.page-hero--bleed .hero__actions .btn--primary:hover { background: var(--primary-50); border-color: var(--primary-50); }
.page-hero--bleed .hero__actions .btn--ghost { color: var(--white); border-color: rgba(255,255,255,0.45); }
.page-hero--bleed .hero__actions .btn--ghost:hover { border-color: var(--white); background: rgba(255,255,255,0.06); }

/* --------------------------------------------------------------------------
   24. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--primary-900);
  color: var(--text-inv-soft);
  padding: clamp(64px, 7vw, 96px) 0 32px;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--secondary-500), transparent);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand .brand { color: var(--white); }
.footer-brand p { margin-top: 20px; font-size: 0.92rem; max-width: 320px; color: var(--white); }
.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 20px;
}
.footer-col ul { display: grid; gap: 12px; }
.footer-col a { color: var(--text-inv-soft); font-size: 0.92rem; }
.footer-col a:hover { color: var(--cyan); }
.footer-contact li { display:flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; }
.footer-contact svg { width: 16px; height: 16px; color: var(--secondary-400); flex-shrink: 0; margin-top: 4px; }

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
  padding-top: 28px;
  font-size: 0.84rem;
}
.footer-bottom .legal { display:flex; gap: 22px; flex-wrap: wrap; }
.footer-bottom a { color: var(--text-inv-soft); }
.footer-bottom a:hover { color: var(--cyan); }
.social { display:flex; gap: 12px; }
.social a {
  width: 38px; height: 38px; border-radius: 50%;
  display:grid; place-items:center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-inv-soft);
  transition: all 0.25s var(--ease);
}
.social a:hover { background: var(--grad-gold); color: var(--white); border-color: transparent; transform: translateY(-2px); }
.social svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   25. Utility & Reveal
   -------------------------------------------------------------------------- */
.center { text-align: center; }
.mt-s { margin-top: 14px;} .mt-m {margin-top: 26px;} .mt-l { margin-top: 48px;}
.mb-s { margin-bottom: 14px;} .mb-m {margin-bottom: 26px;} .mb-l { margin-bottom: 48px;}
.mx-auto { margin-inline: auto; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Brand seal + compliance badge imagery
   -------------------------------------------------------------------------- */
/* Large SAM emblem — hero / footer brand panel */
.brand-seal {
  width: clamp(150px, 18vw, 210px);
  margin: 0;
  display: block;
}
.brand-seal img { width: 100%; height: auto; object-fit: contain; display: block; }
.brand-seal--hero { filter: drop-shadow(0 18px 40px rgba(33,26,58,0.45)); animation: floaty 6s ease-in-out infinite; }
.brand-seal--sm { width: 96px; }

/* SOC 2 Type 2 badge — official seal, white background */
.soc-badge {
  display: inline-flex;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 20px;
  gap: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.soc-badge:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.soc-badge img { height: 64px; width: auto; object-fit: contain; display: block; }
.soc-badge__txt { line-height: 1.3; }
.soc-badge__txt b { display: block; font-family: var(--font-display); font-weight: 700; color: var(--primary-700); font-size: 1rem; letter-spacing: -0.01em; }
.soc-badge__txt span { display: block; font-size: 0.78rem; color: var(--text-mute); margin-top: 2px; }
.soc-badge--stacked { flex-direction: column; text-align: center; padding: 20px; }
.soc-badge--stacked img { height: 92px; }
/* compact, icon-only version for dark backgrounds */
.soc-badge--dark { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.soc-badge--dark .soc-badge__txt b { color: var(--white); }
.soc-badge--dark .soc-badge__txt span { color: var(--text-inv-soft); }
.soc-badge--dark img { border-radius: 8px; }

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }
.reveal.d5 { transition-delay: 0.4s; }
.reveal.d6 { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   26. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero__visual { max-width: 460px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .process__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .process__line { display: none; }
}

@media (max-width: 860px) {
  :root { --header-h: 68px; }
  body { font-size: 16px; }

  .nav-toggle { display: inline-flex; }
  .nav-cta .btn--ghost { display: none; }
  /* Raise brand + toggle above the fixed nav panel (z-index:91) within the
     header's stacking context. Without this, the open nav panel intercepts
     pointer events on the toggle, making the menu impossible to close. */
  .brand, .nav-cta { position: relative; z-index: 92; }
  .primary-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(86vw, 380px);
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    background: var(--primary-900);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 100px 24px 40px;
    gap: 0;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
    box-shadow: -20px 0 60px rgba(0,0,0,0.4);
    overflow-y: auto;
    z-index: 91;
  }
  .nav-cta-mobile {
    display: block;
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .nav-cta-mobile .btn--ghost {
    background: transparent;
    border-color: rgba(255,255,255,0.3);
    color: var(--white);
    width: 100%;
    text-align: center;
    padding: 14px 24px;
  }
  .nav-cta-mobile .btn--ghost:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--cyan);
    color: var(--white);
  }
  body.menu-open .primary-nav { transform: translateX(0); }
  .primary-nav a { color: var(--text-inv-soft) !important; padding: 14px 16px; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,0.06); border-radius: 0; }
  .primary-nav a:hover { background: rgba(255,255,255,0.04); }
  /* Active-page marker in the stacked menu: the teal underline sits under the
     label, and the row gets a faint teal wash so the item still reads as
     active on a touch screen. */
  .primary-nav a.is-active {
    color: var(--cyan) !important;
    background: rgba(145,255,249,0.07);
  }
  .primary-nav a.is-active::after {
    left: 16px;
    right: 16px;
    bottom: 12px;
    height: 4px;
    background: var(--white);
  }
  /* The stacked menu panel is ALWAYS deep navy, even when the page header has
     turned white on scroll. The bar therefore has to stay WHITE inside the
     open menu: without this the `.site-header.is-scrolled` rule (which is more
     specific) flips it to teal on the dark panel, where teal barely reads. */
  body.menu-open .site-header.is-scrolled .primary-nav a.is-active::after {
    background: var(--white);
  }
  .primary-nav .nav-ds360 {
    margin: 16px 16px 0;
    padding: 10px 16px;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    justify-content: center;
  }
  .primary-nav .nav-ds360:hover { background: rgba(255,255,255,0.04); }
  .dropdown a { color: var(--text-inv-soft) !important; }
  .dropdown a strong { color: var(--white); }
  .has-dropdown > a::after { display: none; }
  .has-dropdown .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; background: none; border: 0;
    min-width: 0; padding: 0 0 0 16px; margin: 0; border-radius: 0;
    display: block;
  }

  body.menu-open::after {
    content:""; position: fixed; inset: 0; background: rgba(33,26,58,0.5);
    z-index: 90;
  }

  /* MOBILE = ONE COLUMN. Everything below 860px (the width where the nav
     collapses) stacks to a single column. There is deliberately no 2-column
     state in this band — a later "@media (max-width: 768px)" rule used to
     re-open it and left the proof points and values cards paired up on
     phones, which is exactly what this band must not do. */
  .grid--2, .grid--3, .grid--4, .process__grid { grid-template-columns: 1fr; }
  .split, .split--reverse { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  .hero { min-height: auto; padding-bottom: 60px; }
  .hero__pill { display:none; }
  .scroll-cue { display:none; }
  .process__line { display:none; }
  .process__grid { gap: 36px; }

  .matrix { display: block; }
  .matrix thead { display: none; }
  .matrix tbody, .matrix tr, .matrix td { display: block; width: 100%; }
  .matrix tr { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .matrix td { border: 0; padding: 6px 18px; }
  .matrix td::before { content: attr(data-label) " "; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-mute); font-weight: 600; margin-right: 8px; }

  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .float-chip.c3 { display:none; }
}

/* Phone: every grid stacks to a single column. The 2-column state that used
   to live here (as "@media (max-width: 768px)") was the reason the proof
   points and values cards rendered two-up on phones — it overrode the
   one-column rule in the 860px block above. Mobile is one column, full stop. */
@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4, .process__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero__actions .btn, .cta-band .btn { width: 100%; }
  .card, .form-card { padding: 24px; }
}

/* ==========================================================================
   27. GRAPHICS SYSTEM — decorative orbs, patterns, wave dividers,
       product dashboard mockups, abstract illustration compositions.
       Adds the "designed" visual density (PayTrend-style) on top of the
       existing layout. Pure CSS/SVG — no external image dependencies.
   ========================================================================== */

/* ---- 27.1 Decorative gradient orbs ---- */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}
.orb--purple { background: radial-gradient(circle, rgba(70,55,128,0.55), transparent 70%); }
.orb--teal   { background: radial-gradient(circle, rgba(94,167,163,0.50), transparent 70%); }
.orb--cyan   { background: radial-gradient(circle, rgba(145,255,249,0.40), transparent 70%); }
.orb--plum   { background: radial-gradient(circle, rgba(120,192,188,0.40), transparent 70%); }
.section--soft .orb, .section .orb { opacity: 0.4; }

/* ---- 27.2 Dot-grid + grid-line background patterns ---- */
.bg-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(70,55,128,0.14) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  pointer-events: none; z-index: 0;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 40%, transparent 100%);
}
.bg-dots--cyan { background-image: radial-gradient(rgba(145,255,249,0.18) 1.4px, transparent 1.4px); }
.section--no-dots .bg-dots { display: none; }
.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(70,55,128,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,55,128,0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none; z-index: 0;
  mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 50%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 50%, transparent 100%);
}
.section--dark .bg-dots { background-image: radial-gradient(rgba(145,255,249,0.16) 1.4px, transparent 1.4px); }
.section--dark .bg-grid { background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
}

/* wrap content above decoration */
.section > .container { position: relative; z-index: 2; }
.section-head, .grid, .split, .squad-grid, .stats-band .grid, .cta-band, .quote { position: relative; z-index: 2; }

/* ---- 27.3 Wave / curve section dividers ---- */
.divider-wave {
  position: relative;
  line-height: 0;
  display: block;
  width: 100%;
  pointer-events: none;
}
.divider-wave svg { display: block; width: 100%; height: 60px; }
.divider-wave--tall svg { height: 90px; }
.divider-wave path { fill: var(--bg); }
.section--soft + .divider-wave path,
.section--muted + .divider-wave path { fill: var(--bg-soft); }
.section--dark + .divider-wave path,
.divider-wave[data-flip] path { fill: var(--primary-900); }

/* ---- 27.4 Floating mini-cards (notifications / stat chips) ---- */
.notif-card {
  position: absolute;
  z-index: 5;
  background: rgba(255,255,255,0.97);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 12px;
  font-size: 0.82rem; font-weight: 600; color: var(--ink-800);
  min-width: 200px;
  animation: floaty 5.5s ease-in-out infinite;
}
.notif-card .nc-ic {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--primary-50); color: var(--secondary-600);
}
.notif-card .nc-ic svg { width: 20px; height: 20px; }
.notif-card .nc-txt b { display: block; font-size: 0.86rem; }
.notif-card .nc-txt span { display: block; font-size: 0.74rem; color: var(--text-mute); font-weight: 500; margin-top: 1px; }
.notif-card.nc--success .nc-ic { background: rgba(94,167,163,0.16); color: var(--secondary-600); }
.notif-card.nc--accent .nc-ic { background: var(--primary-50); color: var(--primary-600); }

/* ---- 27.5 Dashboard / product mockup ---- */
.dash {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.dash--dark { background: linear-gradient(160deg, #382a5e, #211A3A); border-color: rgba(255,255,255,0.08); color: var(--white); }
.dash__topbar {
  display: flex; align-items: center; gap: 7px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.dash--dark .dash__topbar { border-color: rgba(255,255,255,0.07); background: rgba(0,0,0,0.18); }
.dash__topbar .d { width: 11px; height: 11px; border-radius: 50%; }
.dash__topbar .d:nth-child(1){ background:#e06c6c;} .dash__topbar .d:nth-child(2){background:#e0a93c;} .dash__topbar .d:nth-child(3){background:#7ec488;}
.dash__topbar .url { margin-left: 12px; font-size: 0.74rem; color: var(--text-mute); letter-spacing: 0.03em; font-weight: 500; }
.dash--dark .dash__topbar .url { color: rgba(255,255,255,0.5); }
.dash__body { padding: 22px; display: grid; gap: 16px; }
.dash__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dash__tile {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}
.dash--dark .dash__tile { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }
.dash__tile .tl { font-size: 0.72rem; color: var(--text-mute); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.dash--dark .dash__tile .tl { color: rgba(255,255,255,0.55); }
.dash__tile .tv {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--primary-700);
  line-height: 1.1; margin-top: 6px; letter-spacing: -0.02em;
}
.dash--dark .dash__tile .tv { color: var(--cyan); }
.dash__tile .td { font-size: 0.74rem; color: var(--secondary-600); font-weight: 600; margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.dash--dark .dash__tile .td { color: var(--cyan); }

/* dashboard mini bar chart */
.dash__chart {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 16px;
}
.dash--dark .dash__chart { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }
.dash__chart .ch-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.dash__chart .ch-head b { font-size: 0.82rem; font-weight: 600; color: var(--ink-800); }
.dash--dark .dash__chart .ch-head b { color: var(--white); }
.dash__chart .ch-head span { font-size: 0.72rem; color: var(--secondary-600); font-weight: 600; }
.dash--dark .dash__chart .ch-head span { color: var(--cyan); }
.ch-bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; }
.ch-bars i { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--secondary-400), var(--secondary-600)); opacity: 0.85; display: block; }
.dash--dark .ch-bars i { background: linear-gradient(180deg, var(--cyan), var(--secondary-500)); }
.ch-bars i:nth-child(4), .ch-bars i:nth-child(6) { background: linear-gradient(180deg, var(--primary-300), var(--primary-600)); }
.dash--dark .ch-bars i:nth-child(4), .dash--dark .ch-bars i:nth-child(6) { background: linear-gradient(180deg, var(--primary-300), var(--primary-600)); }
.ch-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.66rem; color: var(--text-mute); }
.dash--dark .ch-axis { color: rgba(255,255,255,0.45); }

/* dashboard bid list */
.dash__list { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.dash--dark .dash__list { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }
.dash__list .li-head, .dash__list .li-row { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 0.8fr; gap: 8px; padding: 11px 14px; align-items: center; }
.dash__list .li-head { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-mute); font-weight: 700; border-bottom: 1px solid var(--border); }
.dash--dark .dash__list .li-head { color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.07); }
.dash__list .li-row { font-size: 0.8rem; border-bottom: 1px solid var(--border); }
.dash__list .li-row:last-child { border-bottom: 0; }
.dash--dark .dash__list .li-row { border-color: rgba(255,255,255,0.06); }
.dash__list .li-row .bid { font-family: var(--font-display); font-weight: 700; color: var(--primary-700); }
.dash--dark .dash__list .li-row .bid { color: var(--cyan); }
.pill-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; }
.pill-status::before { content:""; width:6px; height:6px; border-radius:50%; }
.pill-status--ok { background: rgba(94,167,163,0.16); color: var(--secondary-600); }
.pill-status--ok::before { background: var(--secondary-500); }
.pill-status--wait { background: rgba(224,169,60,0.16); color: #b07a18; }
.pill-status--wait::before { background: #e0a93c; }
.dash--dark .pill-status--ok { background: rgba(145,255,249,0.14); color: var(--cyan); }
.dash--dark .pill-status--ok::before { background: var(--cyan); }

/* dashboard progress strip */
.dash__strip { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; }
.dash--dark .dash__strip { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }
.dash__strip .sp-lbl { font-size: 0.78rem; font-weight: 600; color: var(--ink-800); }
.dash--dark .dash__strip .sp-lbl { color: var(--white); }
.dash__strip .sp-track { height: 8px; border-radius: 999px; background: rgba(70,55,128,0.12); overflow: hidden; }
.dash--dark .dash__strip .sp-track { background: rgba(255,255,255,0.08); }
.dash__strip .sp-track i { display: block; height: 100%; border-radius: 999px; background: var(--grad-gold); }
.dash__strip .sp-val { font-family: var(--font-display); font-weight: 700; color: var(--primary-700); font-size: 0.9rem; }
.dash--dark .dash__strip .sp-val { color: var(--cyan); }

/* ---- 27.6 Abstract illustration composition (split-section media) ---- */
.illus {
  position: relative;
  min-height: 440px;
  display: flex; align-items: center; justify-content: center;
}
.illus__orb {
  position: absolute;
  width: 78%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--grad-gold);
  filter: blur(2px);
  opacity: 0.95;
  box-shadow: 0 40px 80px rgba(70,55,128,0.30);
}
.illus__orb--teal { background: linear-gradient(135deg, var(--secondary-400), var(--secondary-600)); box-shadow: 0 40px 80px rgba(94,167,163,0.30); }
.illus__ring {
  position: absolute;
  border: 2px dashed rgba(70,55,128,0.25);
  border-radius: 50%;
  width: 96%; aspect-ratio: 1;
  animation: spin 40s linear infinite;
}
.illus__ring--inner { width: 60%; border-style: solid; border-color: rgba(145,255,249,0.3); animation: spin 28s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.illus__card {
  position: absolute;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow-lg);
  z-index: 3;
  width: 200px;
  animation: floaty 6s ease-in-out infinite;
}
.illus__card .ic-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.illus__card .ic-head .ic-badge { width: 38px; height: 38px; border-radius: 10px; background: var(--primary-50); color: var(--secondary-600); display: grid; place-items: center; }
.illus__card .ic-head .ic-badge svg { width: 20px; height: 20px; }
.illus__card .ic-head b { font-size: 0.86rem; color: var(--ink-900); }
.illus__card .ic-head span { display: block; font-size: 0.7rem; color: var(--text-mute); }
.illus__card .ic-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-top: 1px solid var(--border); font-size: 0.78rem; }
.illus__card .ic-row span { color: var(--text-mute); }
.illus__card .ic-row b { color: var(--ink-900); font-family: var(--font-display); }
.illus__card--tl { top: 6%; left: -4%; }
.illus__card--br { bottom: 8%; right: -4%; animation-delay: 1.6s; }
.illus__badge-float {
  position: absolute; z-index: 4;
  background: var(--white); border-radius: 14px; padding: 10px 14px;
  box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 10px;
  font-size: 0.78rem; font-weight: 700; color: var(--ink-900);
}
.illus__badge-float .bf-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--secondary-500); box-shadow: 0 0 0 4px rgba(94,167,163,0.2); }
.illus__badge-float--tr { top: 16%; right: -2%; animation: floaty 5s ease-in-out infinite; }
.illus__badge-float--bl { bottom: 20%; left: -2%; animation: floaty 5s ease-in-out infinite 1.2s; }

/* ---- 27.7 Icon badge (PayTrend circle style) for feature lists ---- */
.icon-badge {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--primary-50); color: var(--secondary-600);
  display: grid; place-items: center; flex-shrink: 0;
  border: 1px solid var(--border);
}
.icon-badge svg { width: 24px; height: 24px; }
.icon-badge--grad { background: var(--grad-gold); color: var(--white); border: 0; box-shadow: var(--shadow-gold); }
.icon-badge--cyan { background: rgba(145,255,249,0.18); color: var(--primary-700); }

/* ---- 27.8 Marquee / logo strip (animated) ---- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex; gap: 56px; width: max-content;
  animation: marquee 28s linear infinite;
}
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__item {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
  color: var(--ink-400); white-space: nowrap;
  opacity: 0.7; transition: opacity 0.3s, color 0.3s;
}
.marquee__item:hover { opacity: 1; color: var(--primary-600); }
.marquee__item svg { width: 22px; height: 22px; color: var(--secondary-500); }

/* ---- 27.9 Scene container (holds dash + notif cards + orbs) ---- */
.scene { position: relative; }
.scene .orb { z-index: 1; }

/* ---- 27.10 Responsive tweaks ---- */
@media (max-width: 1024px) {
  .illus { min-height: 380px; }
  .illus__card { width: 170px; }
}
@media (max-width: 860px) {
  .illus { min-height: 340px; }
  .illus__card--tl { top: 0; left: 0; }
  .illus__card--br { bottom: 0; right: 0; }
  .illus__badge-float--tr, .illus__badge-float--bl { display: none; }
  .dash__row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .dash__tile { padding: 11px; }
  .dash__tile .tv { font-size: 1.15rem; }
  .notif-card { display: none; }
}
@media (max-width: 520px) {
  .dash__list .li-head, .dash__list .li-row { grid-template-columns: 1.2fr 0.8fr; }
  .dash__list .li-head > :nth-child(3), .dash__list .li-head > :nth-child(4),
  .dash__list .li-row > :nth-child(3), .dash__list .li-row > :nth-child(4) { display: none; }
}

/* --------------------------------------------------------------------------
   28. SAM Network — squad navigation + squad membership lines
   -------------------------------------------------------------------------- */
.net-head { margin-bottom: 30px; }
.net-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 960px;
  margin: 28px auto 0;
}
.net-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--white);
  border: 1px solid var(--border-strong);
  color: var(--primary-600);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.net-links a::after { content: "\2192"; color: var(--secondary-500); font-weight: 700; }
.net-links a:hover { border-color: var(--secondary-400); transform: translateY(-2px); }

.squad-line {
  margin-top: 22px;
  padding: 16px 24px;
  font-size: 0.99rem;
  line-height: 1.65;
  color: var(--text-soft);
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
}
.squad-line b { color: var(--text); font-weight: 700; }
.section--dark .squad-line {
  background: rgba(255,255,255,0.04);
  border-left-color: var(--cyan);
  color: var(--text-inv-soft);
}
.section--dark .squad-line b { color: var(--white); }

.cta-band .link-arrow { color: var(--cyan); }
.cta-band .link-arrow:hover { color: var(--white); }

@media (max-width: 560px) {
  .net-links { flex-direction: column; align-items: stretch; }
  .net-links a { justify-content: space-between; padding: 9px 14px; font-size: 0.88rem; }
  .squad-line { padding: 14px 16px; font-size: 0.95rem; }
}

/* --------------------------------------------------------------------------
   29. Section sub-heading · masonry gallery · lightbox
   -------------------------------------------------------------------------- */
.section-sub {
  margin-top: 14px;
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-soft);
}

/* Masonry gallery — CSS multi-column, no JS. A new grid inherits the
   house rule: ONE column below 860px. */
.masonry {
  columns: 3;
  column-gap: 18px;
}
.masonry__item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 18px;
}
.masonry__item a {
  display: block;
  overflow: hidden;
  background: var(--bg-soft);
  cursor: zoom-in;
}
.masonry__item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.35s var(--ease), filter 0.35s var(--ease);
}
.masonry__item a:hover img { transform: scale(1.03); filter: brightness(1.04); }
.masonry__item figcaption {
  margin-top: 10px;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-mute);
}
@media (max-width: 860px) {
  .masonry { columns: 1; }
}

/* Lightbox — owned by main.js; any [data-lightbox] link opens it */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 40px);
}
.lightbox.is-open { display: flex; }
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 11, 24, 0.94);
}
.lightbox__figure {
  position: relative;
  z-index: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: min(1600px, 100%);
  max-height: 100%;
}
.lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
}
.lightbox__cap {
  color: var(--text-inv-soft);
  font-size: 0.9rem;
  text-align: center;
}
.lightbox__close {
  position: fixed;
  top: 16px;
  right: 18px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.2); }

/* ==========================================================================
   99. SQUARE-CORNERS OVERRIDE — global
   Removes every border-radius declaration site-wide (catches hardcoded 999px,
   50%, 8px, 14px, 10px, 2px values that don't use the radius variables).
   Affects buttons, cards, avatars, pills, chips, progress bars, dots, etc.
   Revert: remove this entire block.
   ========================================================================== */
*, *::before, *::after { border-radius: 0 !important; }


/* --- sam utility classes (generated by build_content.py) --- */
/* Generated by wordpress/build_content.py - inline style= attributes
   moved into utility classes so core blocks round-trip through the
   editor without losing them. !important preserves the inline-style
   precedence these elements had in the static build. */
.sam-s-03c4bb { justify-content:center !important; }
.sam-s-0d6126 { margin:18px 0 10px !important; font-family:var(--font-display) !important; font-size:1.3rem !important; color:var(--white) !important; font-weight:600 !important; }
.sam-s-1b0f49 { margin-top:16px !important; }
.sam-s-2027b2 { font-size:0.92rem !important; margin-bottom:24px !important; }
.sam-s-4260eb { padding-top:0 !important; }
.sam-s-4e420a { margin-bottom:6px !important; }
.sam-s-56f435 { margin-top:12px !important; }
.sam-s-583f75 { margin-top:28px !important; }
.sam-s-5a8941 { padding-bottom:0 !important; }
.sam-s-5feb3d { padding:40px !important; position:relative !important; z-index:2 !important; }
.sam-s-65d235 { width:200px !important; height:200px !important; bottom:-50px !important; left:-40px !important; opacity:.32 !important; }
.sam-s-742825 { margin-top:28px !important; font-size:13px !important; color:var(--text-mute) !important; }
.sam-s-825862 { text-align:center !important; padding:48px !important; }
.sam-s-853918 { width:444px !important; }
.sam-s-86de7a { margin-top:18px !important; }
.sam-s-924679 { display:none !important; color:var(--gold-300) !important; margin-top:16px !important; }
.sam-s-96e032 { padding-left:20px !important; margin:12px 0 !important; }
.sam-s-987e9c { display:flex !important; justify-content:center !important; margin-bottom:36px !important; }
.sam-s-9c8bf4 { width:240px !important; height:240px !important; top:-50px !important; right:-40px !important; opacity:.32 !important; }
.sam-s-a26bda { margin-top:20px !important; }
.sam-s-a81233 { font-size:clamp(1.2rem,1.8vw,1.6rem) !important; }
.sam-s-aea226 { padding:26px 30px !important; }
.sam-s-d34d92 { margin-top:36px !important; }
.sam-s-d461c9 { position:relative !important; }
.sam-s-da12f2 { margin-bottom:12px !important; }
.sam-s-e05e91 { color:#fff !important; margin-top:16px !important; }
.sam-s-e35ce6 { padding:26px 0 !important; border-bottom:1px solid var(--border) !important; background:var(--white) !important; }
.sam-s-f84fc2 { padding:32px !important; }


/* --- --- inline page styles from index.html (block 0) --- */
/* Scoped: stats section as four separate dark purple cards */
    .section--abstract .stat-bar {
      background: transparent;
      border: none;
      border-radius: 0;
      box-shadow: none;
      padding: 0;
      gap: 20px;
    }
    .section--abstract .stat-bar .stat-bar__item {
      background: linear-gradient(165deg, #3A2A63 0%, #211A3A 75%);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 18px;
      padding: 36px 18px 30px;
      text-align: center;
      position: relative;
      overflow: hidden;
      box-shadow: 0 18px 44px rgba(0,0,0,0.35);
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .section--abstract .stat-bar__item + .stat-bar__item::before { display: none; }
    .section--abstract .stat-bar .stat-bar__item::after {
      content: ""; position: absolute; right: -34px; top: -34px; width: 130px; height: 130px;
      background: radial-gradient(circle, rgba(94,167,163,0.25), transparent 70%);
      pointer-events: none;
    }
    .section--abstract .stat-bar .stat-bar__item:hover {
      transform: translateY(-4px);
      border-color: rgba(143,230,226,0.35);
      box-shadow: 0 24px 54px rgba(0,0,0,0.45);
    }
    .section--abstract .stat-bar__value {
      color: var(--white);
    }
    .section--abstract .stat-bar__label { color: var(--text-inv-soft); }

    /* Scoped: DebtSales360 orbit diagram (ported from the DebtSales360 site draft) */
    .ds360-visual { max-width: 960px; margin: 56px auto 0; }
    .orbit {
      position: relative;
      width: min(640px, 66vw);
      aspect-ratio: 1 / 1;
      margin: 0 auto;
      overflow: visible;               /* pills sit outside the ring and must not clip */
    }
    .orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    .orbit-ring {
      fill: none; stroke: rgba(184, 170, 230, 0.5); stroke-width: 0.35;
      opacity: 0; transition: opacity 0.7s var(--ease-out);
    }
    .orbit-spoke { stroke: rgba(255,255,255,0.75); stroke-width: 0.3; opacity: 0; transition: opacity 0.6s var(--ease-out); }
    .orbit-dot { fill: #fff; opacity: 0; transition: opacity 0.6s var(--ease-out); }
    .orbit.is-in .orbit-ring,
    .orbit.is-in .orbit-spoke,
    .orbit.is-in .orbit-dot { opacity: 1; }
    .orbit.is-in .orbit-spoke:nth-of-type(2) { transition-delay: 0.18s; }
    .orbit.is-in .orbit-spoke:nth-of-type(3) { transition-delay: 0.36s; }
    .orbit.is-in .orbit-spoke:nth-of-type(4) { transition-delay: 0.54s; }
    .orbit.is-in .orbit-spoke:nth-of-type(5) { transition-delay: 0.72s; }
    .orbit.is-in .orbit-spoke:nth-of-type(6) { transition-delay: 0.90s; }

    .orbit-logo {
      position: absolute; left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      width: 48%; height: auto;
    }
    .orbit.is-in .orbit-logo { animation: orbit-pop 480ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms backwards; }
    @keyframes orbit-pop {
      0%   { transform: translate(-50%, -50%) scale(0.6); }
      62%  { transform: translate(-50%, -50%) scale(1.18); }
      100% { transform: translate(-50%, -50%) scale(1); }
    }

    .orbit-slot { position: absolute; left: var(--px); top: var(--py); transform: translate(-50%, -50%); }
    /* NOTE: styles.css ends with a global `border-radius: 0 !important` square-corners
       override. The orbit is the intentional exception — rounded per the DS360 reference. */
    .orbit-slot::before {
      content: ""; position: absolute; inset: -14px;
      border-radius: 999px !important; pointer-events: none; z-index: -1;
      background: radial-gradient(62% 92% at 50% 50%,
        rgba(255,255,255,0.30), rgba(201,163,76,0.22) 42%,
        rgba(192,132,252,0.12) 66%, rgba(255,255,255,0) 82%);
      opacity: 0; transform: scale(0.86);
      transition: opacity 0.4s var(--ease-out), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .orbit-slot:hover::before,
    .orbit-slot:focus-within::before { opacity: 1; transform: scale(1.04); }

    .orbit-pill {
      position: relative; overflow: hidden;
      display: inline-block; padding: 10px 22px;
      background: transparent;
      border: 1px solid rgba(145,255,249,0.55);
      border-radius: 999px !important;
      color: #fff; font: inherit; font-size: 12.5px; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
      transition: transform 0.2s var(--ease-out), opacity 0.2s var(--ease);
      opacity: 0;
    }
    .orbit.is-in .orbit-pill { opacity: 1; animation: orbit-fade-up 0.6s var(--ease-out) backwards; }
    .orbit.is-in .orbit-slot:nth-child(2) .orbit-pill { animation-delay: 0.09s; }
    .orbit.is-in .orbit-slot:nth-child(3) .orbit-pill { animation-delay: 0.18s; }
    .orbit.is-in .orbit-slot:nth-child(4) .orbit-pill { animation-delay: 0.27s; }
    .orbit.is-in .orbit-slot:nth-child(5) .orbit-pill { animation-delay: 0.36s; }
    .orbit.is-in .orbit-slot:nth-child(6) .orbit-pill { animation-delay: 0.45s; }
    .orbit.is-in .orbit-slot:nth-child(7) .orbit-pill { animation-delay: 0.54s; }
    .orbit-pill:hover { transform: translateY(-3px); border-color: #91FFF9; color: var(--cyan); }
    .orbit-pill:active { transform: translateY(-1px) scale(0.96); }
    .orbit-pill:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
    .orbit-pill::after {
      content: ""; position: absolute; left: 50%; top: 50%;
      width: 16px; height: 16px; margin: -8px 0 0 -8px;
      border-radius: 50% !important; background: rgba(145,255,249,0.55);
      opacity: 0; transform: scale(0); pointer-events: none;
    }
    .orbit-pill.is-rippling::after { animation: orbit-ripple 520ms var(--ease-out); }
    @keyframes orbit-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
    @keyframes orbit-ripple { from { opacity: 0.5; transform: scale(0); } to { opacity: 0; transform: scale(2.8); } }

    /* Module detail popup (click an orbit pill). The description used to print
       as a line under the diagram; it is now a popup. The markup is built by
       main.js and appended to <body> - .reveal animates a transform, which
       would make position: fixed resolve against the figure, not the viewport.
       Same open/close mechanism as the lightbox: display none -> flex. */
    .orbit-popup {
      position: fixed; inset: 0; z-index: 1200;
      display: none;
      align-items: center; justify-content: center;
      padding: 24px;
    }
    .orbit-popup.is-open { display: flex; }
    .orbit-popup__backdrop {
      position: absolute; inset: 0;
      background: rgba(11, 9, 24, 0.68);
    }
    .orbit-popup__card {
      position: relative; z-index: 1;
      width: min(440px, 100%);
      padding: 30px 32px;
      background: linear-gradient(165deg, #2a224a 0%, #1e1838 100%);
      border: 1px solid rgba(145, 255, 249, 0.32);
      border-radius: 18px !important;
      box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
      text-align: left;
      animation: orbit-popup-in 0.28s var(--ease-out) both;
    }
    @keyframes orbit-popup-in {
      from { opacity: 0; transform: translateY(12px) scale(0.97); }
      to { opacity: 1; transform: none; }
    }
    .orbit-popup__card:focus { outline: none; }
    .orbit-popup__eyebrow {
      display: block; margin-bottom: 10px;
      font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
      text-transform: uppercase; color: var(--cyan);
    }
    .orbit-popup__title {
      margin: 0 0 12px;
      font-family: var(--font-display);
      font-size: 1.4rem; font-weight: 600; line-height: 1.2;
      color: var(--white);
    }
    .orbit-popup__desc {
      margin: 0; font-size: 1rem; line-height: 1.6;
      color: var(--text-inv-soft);
    }
    .orbit-popup__close {
      position: absolute; top: 14px; right: 14px; z-index: 2;
      width: 34px; height: 34px;
      display: grid; place-items: center;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 50% !important;
      color: #fff; font-size: 1.35rem; line-height: 1; cursor: pointer;
      transition: background 0.2s var(--ease), color 0.2s var(--ease);
    }
    .orbit-popup__close:hover { background: rgba(145, 255, 249, 0.18); color: var(--cyan); }
    .orbit-popup__close:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

    @media (max-width: 760px) {
      .orbit { width: 100%; aspect-ratio: auto; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 20px 0 4px; }
      .orbit svg { display: none; }
      .orbit-logo { position: static; transform: none; width: 120px; flex-basis: 100%; order: -1; margin: 0 auto 8px; }
      .orbit-slot { position: static; transform: none; }
      .orbit-pill { white-space: normal; text-align: center; }
    }
    @media (prefers-reduced-motion: reduce) {
      .orbit-ring, .orbit-spoke, .orbit-dot { opacity: 1; transition: none; }
      .orbit.is-in .orbit-logo, .orbit.is-in .orbit-pill { animation: none; }
      .orbit-pill { opacity: 1; transition: none; }
    }

    /* Scoped: squad CTA floats on the section, no card */
    .section--muted .squad-cta {
      background: transparent;
      border: none;
      box-shadow: none;
    }

/* --- WordPress block normalisation --- */
blockquote.wp-block-quote > p {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  margin: 0;
}