/* =============================================
   mysherpas Design System
   Bold Dark Premium — v1.0
   ============================================= */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
img { max-width: 100%; display: block; }
a { color: inherit; }
address { font-style: normal; }

/* ── TOKENS ── */
:root {
  --bg-deep:    #060b14;
  --bg-base:    #0a0f1e;
  --bg-card:    #111827;
  --bg-card2:   #161c2d;
  --orange:     #f97316;
  --orange-dk:  #ea580c;
  /* Orange alpha tokens — use instead of rgba(249,115,22,...) */
  --orange-a04:  color-mix(in srgb, var(--orange)  4%, transparent);
  --orange-a06:  color-mix(in srgb, var(--orange)  6%, transparent);
  --orange-a08:  color-mix(in srgb, var(--orange)  8%, transparent);
  --orange-a12:  color-mix(in srgb, var(--orange) 12%, transparent);
  --orange-a15:  color-mix(in srgb, var(--orange) 15%, transparent);
  --orange-a18:  color-mix(in srgb, var(--orange) 18%, transparent);
  --orange-a22:  color-mix(in srgb, var(--orange) 22%, transparent);
  --orange-a28:  color-mix(in srgb, var(--orange) 28%, transparent);
  --orange-a35:  color-mix(in srgb, var(--orange) 35%, transparent);
  --orange-a42:  color-mix(in srgb, var(--orange) 42%, transparent);
  --glow:       var(--orange-a15);
  --border:     var(--orange-a18);
  --border-sub: rgba(255,255,255,0.07);
  /* White-alpha fills used on dark surfaces (chip backgrounds, faint borders). */
  --white-a04:  rgba(255,255,255,0.04);
  --white-a06:  rgba(255,255,255,0.06);
  --white-a08:  rgba(255,255,255,0.08);
  /* Browser/window chrome traffic-light dots — used by .browser-dots and .fan-chrome. */
  --chrome-red:    #ff5f57;
  --chrome-yellow: #febc2e;
  --chrome-green:  #28c840;
  --text:       #f0f4ff;
  --text-2:     #a8bdd4;
  --text-3:     #7e93a8;
  --text-ink:   #1a2030;
  --text-inv:   #f8faff;
  /* Button shadow tokens */
  --shadow-btn:       0 2px 10px var(--orange-a28);
  --shadow-btn-hover: 0 4px 16px rgba(0,0,0,0.32);
  --shadow-btn-ghost: 0 2px 8px rgba(0,0,0,0.18);
  /* Ghost button (used on orange CTA band) */
  --btn-ghost-bg:       rgba(0,0,0,0.22);
  --btn-ghost-border:   rgba(255,255,255,0.42);
  --btn-ghost-hover-bg: rgba(0,0,0,0.38);
  /* Spacing utilities */
  --sp-sm: 16px;
  --sp-md: 20px;
  --sp-lg: 32px;
  /* Light section palette */
  --bg-light:           #e4edf8;   /* navy-tinted light bg — brand relationship */
  --border-light:       #cfd8e8;   /* borders within light sections */
  --orange-label-light: #7c2d12;   /* dark orange for labels on light bg (7.6:1 on --bg-light, AAA) */
  --text-body-light:    #44596e;   /* muted body/label text on light bg (6.7:1 on #fff, AA+) */
  --font-display: 'Manrope', -apple-system, sans-serif;
  --font:         'DM Sans', -apple-system, sans-serif;
  --radius:     8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --max-w:      1100px;
  --section-py: 72px;
  /* Climber widget palette — slate scale, intentionally lighter than main navy */
  --climber-bg:     #0f172a;
  --climber-border: #334155;
  --climber-mtn-1:  #1e293b;
  --climber-mtn-2:  #475569;
  --climber-summit: #facc15;
  /* Z-index scale */
  --z-widget:   50;
  --z-overlay: 200;
}

/* ── FOCUS ── */
*:focus:not(:focus-visible) { outline: none; }
*:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 3px;
}
/* Skip link — visually hidden until focused */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  background: var(--bg-deep);
  color: var(--text);
  border: 2px solid var(--orange);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus-visible {
  top: 0;
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

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

/* ── BASE ── */
body {
  font-family: var(--font);
  background: var(--bg-deep);
  color: var(--text);
  line-height: 1.6;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

/* ── TYPOGRAPHY ── */
h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; line-height: 1.12; font-family: var(--font-display); }
h2 { font-size: clamp(24px, 3.5vw, 36px); font-weight: 800; line-height: 1.2; font-family: var(--font-display); }
h3 { font-size: clamp(17px, 2.5vw, 22px); font-weight: 700; line-height: 1.3; font-family: var(--font-display); }
h4 { font-size: 13px; font-weight: 600; font-family: var(--font-display); }
p  { color: var(--text-2); line-height: 1.75; }

.label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}

/* ── BUTTONS ── */
/* Shared geometry: sharp 2px corner + animated clip-path notch (top-right) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, var(--orange), var(--orange-dk));
  color: var(--text-inv);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 14px 28px;
  border-radius: 2px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.2s cubic-bezier(0.16,1,0.3,1),
              clip-path 0.2s cubic-bezier(0.16,1,0.3,1),
              opacity 0.15s;
}
.btn-primary:hover {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-hover);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 6px var(--orange-a22);
  opacity: 0.88;
}
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

/* Secondary / outline — sharp geometry, no clip-path (border stroke can't be clipped cleanly) */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: 2px;
  text-decoration: none;
  transition: border-color 0.2s cubic-bezier(0.16,1,0.3,1),
              color 0.2s cubic-bezier(0.16,1,0.3,1),
              background 0.2s cubic-bezier(0.16,1,0.3,1);
}
.btn-outline:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--orange-a06);
}
.btn-outline:active { background: var(--orange-a12); }
.btn-outline:disabled,
.btn-outline[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

/* Ghost — for use on colored/orange backgrounds (CTA band) */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-ghost-bg);
  color: var(--text-inv);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 14px 28px;
  border-radius: 2px;
  border: 2px solid var(--btn-ghost-border);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-btn-ghost);
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1),
              background 0.2s,
              opacity 0.15s;
}
.btn-ghost:hover {
  background: var(--btn-ghost-hover-bg);
  transform: translateY(-1px);
  opacity: 1;
}
.btn-ghost:active {
  transform: translateY(0);
  opacity: 0.88;
}

/* Size modifiers */
.btn-primary--sm { font-size: 11px; padding: 9px 18px; }
.btn-outline--sm  { font-size: 10px; padding: 9px 18px; }

/* ── BUTTON RESPONSIVE ADAPTATIONS ── */
@media (max-width: 640px) {
  /* Larger type + guaranteed 44px touch target (WCAG 2.5.5) */
  .btn-primary, .btn-ghost {
    font-size: 14px;
    min-height: 44px;
    padding: 11px 24px;
  }
  .btn-outline {
    font-size: 13px;
    min-height: 44px;
    padding: 11px 20px;
  }
  /* Small variants: meet touch target while staying visually compact */
  .btn-primary--sm {
    font-size: 12px;
    min-height: 44px;
    padding: 10px 16px;
  }
  .btn-outline--sm {
    font-size: 11px;
    min-height: 44px;
    padding: 10px 16px;
  }
  /* Hero CTA: centred pill of comfortable width */
  .hero-actions .btn-primary {
    min-width: 220px;
  }
  /* CTA band ghost: full width, capped so it doesn't stretch on large tablets */
  .cta-band-content .btn-ghost {
    width: 100%;
    max-width: 320px;
  }
  /* Event action pair: stack vertically and go full-width */
  .event-actions {
    flex-direction: column;
    gap: 8px;
  }
  .event-actions .btn-primary,
  .event-actions .btn-outline {
    width: 100%;
  }
}

/* Very small phones (≤380px): tighten horizontal padding to prevent clipping */
@media (max-width: 380px) {
  .btn-primary, .btn-ghost { padding: 11px 18px; }
  .btn-outline              { padding: 11px 14px; }
}

/* Spacing utility classes */
.mt-sm { margin-top: var(--sp-sm); }
.mt-md { margin-top: var(--sp-md); }
.mt-lg { margin-top: var(--sp-lg); }

/* ── NAV ── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 40px;
  height: 60px;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, backdrop-filter 0.25s ease, -webkit-backdrop-filter 0.25s ease, border-color 0.25s ease;
}
.site-nav.is-scrolled {
  background: rgba(6, 11, 20, 0.55);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom-color: var(--border);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo span {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 1px;
}
.nav-logo em { color: var(--orange); font-style: normal; }
.nav-logo img { height: 32px; width: auto; object-fit: contain; display: block; }
.footer-brand .nav-logo img { height: 44px; }

.nav-links {
  display: flex;
  list-style: none;
  gap: 28px;
  margin-left: auto;
  /* .site-nav is a flexbox: .nav-links and .nav-cta are flex items painted
     as atomic blocks in document order, so the .dropdown nested in .nav-links
     would paint UNDER the later .nav-cta button. Lift this flex item above
     the CTA so the open dropdown sits on top. */
  position: relative;
  z-index: 2;
}
.nav-links a {
  color: var(--text-3);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--orange); }

/* Dropdown trigger button */
.nav-dropdown-trigger {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
  font-family: var(--font);
  transition: color 0.2s;
}
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger.active { color: var(--orange); }

/* Dropdown */
.nav-dropdown { position: relative; }
.dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  list-style: none;
  min-width: 200px;
  padding: 8px 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 1;
}
.nav-dropdown .dropdown:not([hidden]) { display: block; }
.dropdown li a {
  display: block;
  padding: 9px 18px;
  font-size: 11px;
  color: var(--text-2);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.dropdown li a:hover { background: var(--bg-card2); color: var(--orange); }

.nav-cta { margin-left: 16px; flex-shrink: 0; }
.nav-toggle { display: none; background: none; border: none; color: var(--text); cursor: pointer; margin-left: auto; padding: 4px; line-height: 0; }

/* Mobile CTA inside nav */
.nav-cta-mobile { display: none; }
@media (max-width: 640px) {
  .nav-cta-mobile {
    display: block;
    margin-top: 8px;
  }
  .nav-cta-mobile .btn-primary {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* ── PAGE HERO ── */
.page-hero {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background-color: var(--bg-deep);
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.page-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(6,11,20,0.88) 0%, rgba(10,15,30,0.82) 50%, rgba(6,11,20,0.92) 100%);
}
.page-hero-grid { display: none; }
.page-hero-content {
  position: relative;
  z-index: 1;
  padding: 64px 24px;
}
.page-hero-content h1 { color: var(--text); margin-bottom: 16px; }
.page-hero-content p  { color: var(--text-2); font-size: 16px; max-width: 600px; margin: 0 auto; }

/* ── ARTICLES PAGE HERO — editorial left-aligned ── */
.page-hero--articles {
  justify-content: flex-start;
  text-align: left;
  min-height: 360px;
  overflow: hidden;
}
.page-hero--articles .page-hero-bg::after {
  background: linear-gradient(105deg, rgba(6,11,20,0.96) 0%, rgba(6,11,20,0.82) 50%, rgba(6,11,20,0.44) 100%);
}

/* Ken Burns — slow background drift, starts after hero text settles */
@keyframes kenBurnsIn {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
.page-hero--articles .page-hero-bg {
  animation: kenBurnsIn 18s cubic-bezier(0.25, 0, 0, 1) 0.4s forwards;
  transform-origin: 60% center;
}

/* Staggered hero text entrance */
.articles-hero-label  { animation: heroReveal 0.60s cubic-bezier(0.16,1,0.3,1) 0.08s  both; }
.articles-hero-content h1 { animation: heroReveal 0.70s cubic-bezier(0.16,1,0.3,1) 0.22s both; }
.articles-hero-content p  { animation: heroReveal 0.60s cubic-bezier(0.16,1,0.3,1) 0.38s both; }
.articles-hero-content {
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  padding: 72px 40px 80px;
}
.articles-hero-content h1 {
  font-size: clamp(48px, 7vw, 80px);
  letter-spacing: -1.5px;
  line-height: 1.04;
  margin-bottom: 20px;
}
.articles-hero-content p {
  margin: 0;
  max-width: 480px;
  font-size: 15px;
  color: var(--text-2);
}
.articles-hero-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 20px;
}
.articles-hero-label::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--orange);
  flex-shrink: 0;
}

/* ── HOMEPAGE HERO — panoramic arc ── */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-deep);
  min-height: 700px;
}

/* Mountain SVG container */
.layer-mountains {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70%;
  z-index: 2;
  pointer-events: none;
}
.layer-mountains svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Centered hero text block */
.hero-text {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 68px 48px 44px;
}
.hero-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 22px;
}
.hero-text h1 {
  /* Measured display scale — confident at every breakpoint without dominating
     the viewport on wide desktops. */
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 800;
  max-width: 820px;
  margin: 0 auto 22px;
  color: var(--text);
  text-wrap: balance;
}
.hero-text h1 em {
  font-style: normal;
  color: var(--orange);
  /* Subtle peak underline mark on the emphasized word */
  background-image: linear-gradient(180deg, transparent 88%, var(--orange-a35) 88%, var(--orange-a35) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 0.04em;
}
.hero-body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 520px;
  margin: 0 auto 32px;
  font-weight: 300;
  text-wrap: pretty;
}
.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

/* Layer 5: panoramic screenshot strip */
.screen-strip {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  padding: 20px 0 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
}

/* Browser window frame — base */
.screen-strip .win {
  flex-shrink: 0;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.09);
  border-bottom: none;
  position: relative;
}
.screen-strip .win-chrome {
  height: 30px;
  background: #080f1e; /* intentionally darker than --bg-card to frame the screenshot */
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 5px;
}
.screen-strip .win-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.screen-strip .win-bar {
  flex: 1;
  height: 14px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  margin: 0 8px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  overflow: hidden;
}
.screen-strip .win-url {
  font-size: 9px;
  color: #1e3a5f;
  white-space: nowrap;
  font-family: var(--font);
}
.screen-strip .win img {
  width: 100%;
  display: block;
}
.screen-strip .win-title {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(6,11,20,0.88);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-3);
  backdrop-filter: blur(8px);
}

/* Individual screen sizes and transforms — scoped to strip */
.screen-strip .win-1 {
  width: 190px;
  transform: perspective(700px) rotateY(28deg) rotateX(5deg) translateY(30px);
  filter: blur(0.8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.screen-strip .win-2 {
  width: 260px;
  transform: perspective(900px) rotateY(16deg) rotateX(3deg) translateY(14px);
  filter: blur(0.2px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.55);
}
.screen-strip .win-3 {
  width: 380px;
  box-shadow:
    0 0 0 1px var(--orange-a15),
    0 20px 60px rgba(0,0,0,0.65),
    0 0 80px var(--orange-a12);
  z-index: 5;
}
.screen-strip .win-3 .win-chrome {
  height: 34px;
  background: #0a1525; /* intentionally darker than base chrome to lift the primary screen */
}
.screen-strip .win-3 .win-url { color: #2d4a7a; /* intentionally dim — decorative URL, not readable content */ }
.screen-strip .win-3 .win-title {
  color: var(--orange);
  border-color: color-mix(in srgb, var(--orange) 30%, transparent);
  background: rgba(6,11,20,0.92);
}
.screen-strip .win-4 {
  width: 260px;
  transform: perspective(900px) rotateY(-16deg) rotateX(3deg) translateY(14px);
  filter: blur(0.2px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.55);
}
.screen-strip .win-5 {
  width: 190px;
  transform: perspective(700px) rotateY(-28deg) rotateX(5deg) translateY(30px);
  filter: blur(0.8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

/* Layer 6: trust bar — editorial credential strip, no big-number hero pattern */
.hero-trust-bar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 10px;
  padding: 20px 0 36px;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 32px;
}
.hero-trust-bar .trust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 24px;
  border-right: 1px solid rgba(255,255,255,0.07);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.hero-trust-bar .trust-item:last-child { border-right: none; }
.hero-trust-bar .trust-item strong {
  color: var(--text);
  font-weight: 700;
  font-family: var(--font-display);
}
@media (max-width: 640px) {
  .hero-trust-bar .trust-item { padding: 0 14px; font-size: 10px; }
}

/* Responsive ≤860px */
@media (max-width: 860px) {
  .hero { min-height: auto; }
  .hero-text { padding: 48px 24px 32px; }
  .layer-mountains { display: none; }
  .screen-strip .win-1,
  .screen-strip .win-2,
  .screen-strip .win-4,
  .screen-strip .win-5 { display: none; }
  .screen-strip .win-3 {
    width: 100%;
    max-width: 420px;
    transform: none;
    box-shadow: none;
    border-radius: 10px 10px 0 0;
  }
  .screen-strip {
    justify-content: center;
    -webkit-mask-image: none;
    mask-image: none;
    padding: 16px 24px 0;
  }
}

/* ── CLIENTS BAR + MARQUEE ── */
.clients-bar {
  background: var(--bg-card2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 28px 0 32px;
  text-align: center;
  overflow: hidden;
}
.clients-bar .label { margin-bottom: 20px; color: var(--text-3); display: block; }

/* Marquee track — track contains 3 identical sets of logos so it always
   exceeds even an ultrawide viewport's width. Animation translates by
   exactly one set (-33.333%) so the wrap is seamless and invisible. */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}
.logos-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}
.logos-track {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  animation: marquee 36s linear infinite;
  padding: 0 8px;
  will-change: transform;
}
.logos-track:hover { animation-play-state: paused; }

/* Individual pill */
.logo-pill {
  background: rgba(255,255,255,0.93);
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-ink);
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  flex-shrink: 0;
}
.logo-pill img {
  height: 30px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .logos-track { animation: none; }
}

/* ── TRAIL MARKERS — mountain ridge silhouettes between sections ── */
.trail-marker {
  border-top: 1px solid var(--border-sub);
  border-bottom: 1px solid var(--border-sub);
}
.trail-marker-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 18px 40px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.trail-marker-line {
  flex: 1;
  height: 1px;
  background: var(--border-sub);
}
.trail-marker-inner svg {
  flex-shrink: 0;
  color: var(--orange);
  opacity: 0.55;
}
.trail-marker--alt  { background: var(--bg-base); }
.trail-marker--card { background: var(--bg-card2); }
.trail-marker--deep { background: var(--bg-deep); }
@media (max-width: 640px) {
  .trail-marker-inner { padding: 14px 20px; }
}

/* ── SECTION WRAPPER ── */
.section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--section-py) 40px;
}
.section-alt { background: var(--bg-base); }
.section-card { background: var(--bg-card2); }
/* Full-bleed background wrappers — apply to outer div, keep .section inside as max-width constrainer */
.bg-alt  { background: var(--bg-base); }
.bg-card-section { background: var(--bg-card2); }

/* ── QUOTE BLOCK — used in about.html and article pages ── */
.quote-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin-top: 32px;
}
.quote-block blockquote {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.8;
  font-style: italic;
  margin-bottom: 16px;
}
.quote-block cite {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ── TESTIMONIALS CAROUSEL ── */
.ts-section {
  text-align: center;
  padding-top: 80px;
  padding-bottom: 80px;
}
.ts-carousel {
  max-width: 820px;
  margin: 44px auto 0;
  padding: 0 20px;
}
.ts-track {
  display: grid;
}
.ts-slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1),
              transform 0.55s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
.ts-slide.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ts-quote {
  position: relative;
  padding-top: 52px;
  margin-bottom: 32px;
  max-width: 740px;
}
.ts-mark {
  display: block;
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 800;
  line-height: 0;
  color: var(--orange);
  opacity: 0.28;
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  letter-spacing: -2px;
}
.ts-quote p {
  font-family: var(--font-display);
  font-size: clamp(16px, 2.1vw, 21px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.7;
  color: var(--text);
  position: relative;
  z-index: 1;
}
.ts-author {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border-sub);
  border-radius: var(--radius-lg);
  padding: 10px 22px 10px 10px;
}
.ts-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--orange-dk));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  font-family: var(--font-display);
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
/* Company logo in testimonial author chip */
.ts-logo {
  height: 36px;
  min-width: 64px;
  max-width: 100px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-sub);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  flex-shrink: 0;
}
.ts-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.78;
  display: block;
}
.ts-logo--text {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-2);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: var(--font-display);
  min-width: 60px;
  text-align: center;
}
.ts-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ts-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-display);
}
.ts-role {
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.5px;
}
.ts-company {
  font-size: 10px;
  color: var(--orange);
  font-weight: 600;
  letter-spacing: 0.5px;
}
.ts-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}
.ts-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-sub);
  background: var(--bg-card);
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.ts-arrow:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--bg-card2);
}
.ts-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ts-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--text-3);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.ts-dot.active {
  background: var(--orange);
  border-color: var(--orange);
  transform: scale(1.35);
}
@media (prefers-reduced-motion: reduce) {
  .ts-slide { transition: none; }
}

/* ── CUSTOMER VOICES (home) ───────────────────────────────────
   Editorial pull-quote spread. Leads with one client's hard
   number; five additional voices support it. Replaces the home
   testimonials carousel. .ts-* still serves the testimonial
   archive + single pages and the inline-quote widget. */
.voices-section {
  /* Inherit vertical padding from `.section` so the home rhythm stays
     consistent with every other widget. The previous clamp(80–128px)
     override double-stacked against `.section` and read as too much
     whitespace once placed inside Elementor. */
  text-align: left;
}
.voices-head {
  max-width: 760px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.voices-head .label { margin-bottom: 18px; display: inline-block; }
.voices-head h2 {
  margin: 0;
  font-size: clamp(28px, 4.5vw, 52px);
  letter-spacing: -0.015em;
  line-height: 1.05;
  max-width: 28ch;
}
.voices-head h2 em {
  font-style: normal;
  color: var(--orange);
}
.voices-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: stretch;
  padding-top: clamp(36px, 4.5vw, 56px);
  padding-bottom: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--orange-a18);
  border-bottom: 1px solid var(--orange-a18);
  margin-bottom: clamp(56px, 7vw, 88px);
}
.voices-metric {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
}
.vm-num-line {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1.4vw, 18px);
  flex-wrap: wrap;
  line-height: 0.85;
}
.vm-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(96px, 16vw, 220px);
  letter-spacing: -0.05em;
  color: var(--orange);
  line-height: 0.85;
}
.vm-unit {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 36px);
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1;
}
.vm-claim {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.3vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  margin: 0;
  max-width: 22ch;
}
.vm-context {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin: 0;
}
.voices-quote-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vqh-text {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.1vw, 24px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 32px 0;
}
.vqh-text::before { content: "\201C"; color: var(--orange); margin-right: 0.05em; }
.vqh-text::after  { content: "\201D"; color: var(--orange); }
.vqh-author {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 22px;
  border-top: 1px solid var(--orange-a12);
}
.vqh-logo {
  height: 40px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  flex-shrink: 0;
}
/* Logos ship in full-color (often dark ink). Sit them on a warm
   white plate so brand identity is preserved without resorting to
   a brightness/invert filter that flattens every logo to the same
   silhouette. */
img.vqh-logo {
  background: #ffffff;
  padding: 8px 12px;
  max-width: 164px !important;
  border-radius: var(--radius) !important;
  box-sizing: content-box;
}
.vqh-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.vqh-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.005em;
}
.vqh-role { font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--text-2); }
.vqh-company {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: 0.02em;
}
.voices-supporting {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  column-gap: clamp(28px, 3.5vw, 48px);
  row-gap: clamp(36px, 4.5vw, 56px);
}
.voice-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--orange-a18);
}
.vc-quote {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 500;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}
.vc-quote::before { content: "\201C"; color: var(--orange); margin-right: 0.04em; }
.vc-quote::after  { content: "\201D"; color: var(--orange); }
.vc-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}
.vc-logo {
  height: 28px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
  flex-shrink: 0;
}
img.vc-logo {
  background: #ffffff;
  padding: 6px 10px;
  border-radius: var(--radius) !important;
  max-width: 71px !important;
  box-sizing: content-box;
}
.vc-logo--text {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-2);
  font-family: var(--font-display);
  padding: 5px 10px;
  border: 1px solid var(--border-sub);
  border-radius: var(--radius);
  flex-shrink: 0;
  white-space: nowrap;
}
.vc-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vc-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.vc-role { font-family: var(--font); font-size: 12px; color: var(--text-3); letter-spacing: 0.01em; }
.vc-company {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: 0.02em;
}
.voices-cta { margin-top: clamp(48px, 6vw, 80px); }
@media (max-width: 820px) {
  .voices-hero { grid-template-columns: 1fr; gap: 40px; padding-top: 32px; padding-bottom: 40px; }
  .voices-supporting { grid-template-columns: 1fr; }
}

/* ── PLATFORM PREVIEW ── */
.platform-preview {
  /* No global center — header + caption are left-aligned for editorial weight */
}
.platform-preview .label { margin-bottom: 16px; }
.platform-preview > h2   { max-width: 640px; }
.platform-sub {
  max-width: 520px;
  margin: 14px 0 0;
  font-size: 15px;
}
.pt-tabs-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-top: 44px;
  padding-bottom: 2px;
  text-align: center;  /* Tab control stays centered — symmetric UI element */
}
/* Fade mask applied only when tabs overflow — JS adds .tabs-overflow class */
.pt-tabs-wrap.tabs-overflow {
  -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
  mask-image: linear-gradient(to right, black 80%, transparent 100%);
}
.pt-tabs-wrap::-webkit-scrollbar { display: none; }
.pt-tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-sub);
  border-radius: 9999px;
  padding: 5px;
}
.pt-tab {
  padding: 9px 22px;
  border-radius: 40px;
  border: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-family: var(--font-display);
  color: var(--text-3);
  background: transparent;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.pt-tab.active {
  background: linear-gradient(90deg, var(--orange), var(--orange-dk));
  color: var(--text);
  box-shadow: 0 2px 12px var(--orange-a35);
}
.pt-tab:hover:not(.active) { color: var(--text); }

/* Browser chrome frame */
.browser-frame {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-sub);
  box-shadow: 0 32px 80px rgba(0,0,0,0.55),
              0 0 0 1px rgba(255,255,255,0.04);
  margin-top: 32px;
  text-align: left;
}
.browser-chrome {
  background: var(--bg-card2);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-sub);
}
.browser-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.browser-dots span {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.browser-dots span:nth-child(1) { background: var(--chrome-red); }
.browser-dots span:nth-child(2) { background: var(--chrome-yellow); }
.browser-dots span:nth-child(3) { background: var(--chrome-green); }
.browser-bar {
  flex: 1;
  text-align: center;
  background: rgba(255,255,255,0.05);
  border-radius: 5px;
  padding: 4px 14px;
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.2px;
  font-family: var(--font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-viewport {
  max-height: 540px;
  overflow: hidden;
}
.browser-viewport img {
  display: block;
  width: 100%;
  height: auto;
}

/* Panel switching */
.pt-panels {
  display: grid;
}
.pt-panel {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1),
              transform 0.4s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
  will-change: opacity, transform;
}
.pt-panel.active {
  display: block; /* overrides hidden attribute */
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.pt-caption {
  font-size: 14px;
  color: var(--text-3);
  max-width: 600px;
  margin: 18px 0 0;
  line-height: 1.65;
}

@media (max-width: 640px) {
  .pt-tab {
    padding: 0 14px;
    font-size: 10px;
    min-height: 44px;           /* WCAG 2.5.5 touch target minimum */
    display: inline-flex;
    align-items: center;
    text-transform: none;       /* Drop uppercase on narrow screens — prevents overflow on long labels */
    letter-spacing: 0.3px;
  }
  .browser-chrome { padding: 8px 12px; }
  .browser-dots span { width: 9px; height: 9px; }
  .browser-bar { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-panel { transition: none; }
}

/* ── CAPABILITIES — editorial rows ──
   Replaces the old 2×4 features grid (a textbook "identical card grid"
   anti-pattern). Four hero capabilities get full-width rows with a
   category kicker, headline, body, and an orange "Eliminates" proof
   line. Everything else collapses into a compact two-column "Also
   handles" strip, and the section ends with a bridge link to the
   Platform Preview tabs so the user has somewhere to go from peak intent. */

.cap-section h2 { letter-spacing: -0.02em; line-height: 1.05; max-width: 720px; }
.cap-intro {
  margin-top: 14px;
  max-width: 560px;
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.6;
}

.cap-rows {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
}
.cap-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 56px;
  padding: 44px 0;
  border-top: 1px solid var(--border-sub);
  align-items: start;
}
.cap-row:first-child {
  border-top: none;
  padding-top: 8px;
}

/* Category kicker — small caps orange, anchored to the headline baseline. */
.cap-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--orange);
  padding-top: 14px;          /* vertical-align with h3 cap-height */
}

.cap-content { min-width: 0; }
.cap-content h3 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  text-wrap: balance;
}
.cap-content > p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 620px;
  margin-bottom: 16px;
  text-wrap: pretty;
}
.cap-content > p:last-child { margin-bottom: 0; }

/* Proof line — orange dash + ELIMINATES label + plain-spoken outcome. */
.cap-eliminates {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 14px !important;     /* override the 16px body rule above */
  line-height: 1.5 !important;
  color: var(--text-2) !important;
  margin: 0 !important;
  max-width: none !important;
}
.cap-eliminates-label {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange);
  position: relative;
  padding-left: 26px;             /* room for orange leading dash */
}
.cap-eliminates-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  height: 1px;
  background: var(--orange);
  transform: translateY(-50%);
  /* Reveal animation — slides in when the row enters view via .anim-stagger. */
  transform-origin: left center;
}

/* Hover state — accent on the kicker (the only interactive affordance the
   row has; rows themselves aren't links, this is purely scan-feedback). */
@media (hover: hover) {
  .cap-row { transition: background 0.3s ease; }
  .cap-row:hover {
    background: linear-gradient(90deg, var(--orange-a04), transparent 60%);
  }
}

/* Also-handles strip — compact two-column list of secondary capabilities. */
.cap-also {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 56px;
  padding: 36px 0 8px;
  border-top: 1px solid var(--border-sub);
  align-items: start;
}
.cap-also-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-3);
  padding-top: 4px;
}
.cap-also-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 40px;
  margin: 0;
  padding: 0;
}
.cap-also-list li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
  position: relative;
  padding-left: 16px;
}
.cap-also-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 1px;
  background: var(--orange);
}
.cap-also-list strong {
  color: var(--text);
  font-weight: 700;
}

/* Bridge link — section dead-air killer. Sends peak-intent readers to the
   Platform Preview tabs section. */
.cap-bridge {
  margin: 32px 0 0;
  padding-left: 236px;            /* aligns under the .cap-content column */
  font-size: 14px;
}
.cap-bridge a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--orange);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: gap 0.25s cubic-bezier(0.16,1,0.3,1), color 0.2s;
}
.cap-bridge a:hover,
.cap-bridge a:focus-visible {
  gap: 14px;
  color: var(--text);
}
.cap-bridge a span { transition: transform 0.25s cubic-bezier(0.16,1,0.3,1); }
.cap-bridge a:hover span { transform: translateX(2px); }

/* ── Tablet — narrower kicker column, tighter padding. ── */
@media (max-width: 900px) {
  .cap-row,
  .cap-also { grid-template-columns: 130px minmax(0, 1fr); gap: 32px; }
  .cap-bridge { padding-left: 162px; }
}

/* ── Mobile — kicker becomes an inline eyebrow above the title. ── */
@media (max-width: 640px) {
  .cap-rows { margin-top: 40px; }
  .cap-row,
  .cap-also { grid-template-columns: 1fr; gap: 12px; padding: 32px 0; }
  .cap-row:first-child { padding-top: 4px; }
  .cap-kicker,
  .cap-also-label { padding-top: 0; margin-bottom: 4px; font-size: 10px; }
  .cap-content h3 { font-size: clamp(20px, 5.5vw, 24px); }
  .cap-content > p  { font-size: 15px; }
  .cap-also { padding-bottom: 4px; }
  .cap-also-list { grid-template-columns: 1fr; gap: 12px; }
  .cap-bridge { padding-left: 0; margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .cap-row { transition: none; }
  .cap-bridge a,
  .cap-bridge a span { transition: none; }
}

.ts-section { text-align: center; }

/* ── LIGHT SECTION — logos / integrations / partners ── */
.section-light {
  background: var(--bg-light);
  border-top: 3px solid var(--orange); /* deliberate visual bridge from dark sections */
}
.section-light .label   { color: var(--orange-label-light); } /* dark orange — 7.6:1 AAA on --bg-light */
.section-light h2,
.section-light h3       { color: var(--text-ink); }
.section-light p        { color: var(--text-body-light); }
.section-light strong   { color: var(--orange-label-light); }

/* Section header row — heading + optional action on right */
.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 0;
}
.section-header-row p {
  margin-top: 12px;
  max-width: 520px;
}

/* Partners sub-section — less vertical padding than full section */
.section-partners {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 52px 40px;
  border-top: 1px solid var(--border-light);
}
@media (max-width: 640px) {
  .section-partners { padding: 40px 20px; }
}

/* Base int-grid — shared */
.int-grid {
  display: grid;
  gap: 14px;
}

/* Primary tier — 5 marquee names, taller, larger logos */
.int-grid--primary {
  grid-template-columns: repeat(5, 1fr);
  margin-top: 40px;
  margin-bottom: 14px;
}

/* Secondary tier — 7 supporting names, compact */
.int-grid--secondary {
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-top: 0;
}

.int-chip {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.int-chip:hover {
  border-color: #a8becf;
  box-shadow: 0 4px 16px rgba(20,60,100,0.12);
  transform: translateY(-2px);
}
.int-chip img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.int-grid--primary .int-chip { min-height: 100px; padding: 22px 20px; }
.int-grid--primary .int-chip img { max-height: 54px; }
.int-grid--secondary .int-chip { min-height: 68px; padding: 14px 12px; gap: 7px; }
.int-grid--secondary .int-chip img { max-height: 32px; }

.int-chip .name {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-body-light); /* was --text-3: 2.93:1 fail → 6.7:1 AA+ */
  text-align: center;
  line-height: 1.2;
}
.int-grid--secondary .int-chip .name { font-size: 9px; }

/* ── PARTNERS STRIP ── */
.partners-strip {
  background: transparent; /* inherits --bg-light from section-light; white chips float above */
  border-top: 1px solid var(--border-light);
  padding: 52px 40px;
}
.partners-strip-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  text-align: center;
}
.partners-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-body-light); /* was --text-3: 2.7:1 fail on --bg-light → 6.7:1 AA+ */
  margin-bottom: 36px;
}
.partners-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 48px;
}
.partners-logos img {
  height: 34px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  opacity: 0.7;
  transition: opacity 0.25s;
  display: block;
}
.partners-logos img:hover { opacity: 1; }

/* ── CTA BAND ── */
.cta-band {
  background: linear-gradient(135deg, #b45309 0%, #ea580c 55%, #f97316 100%);
  border: none;
  padding: 110px 40px 120px;
  overflow: hidden;
  position: relative;
}
/* Full-bleed mountain SVG behind the content */
.cta-bg-mountain {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 85%;
  z-index: 0;
  pointer-events: none;
}
/* Content floats above the mountain */
.cta-band-content {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  text-align: center;
}
.cta-band-content .label { color: rgba(255,255,255,0.65); margin-bottom: 16px; }
.cta-band-content h2 { color: #fff; margin-bottom: 16px; }
.cta-band-content p {
  font-size: 17px;
  color: rgba(255,255,255,0.88);
  margin: 0 auto 36px;
  max-width: 480px;
}
.cta-band-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}
/* CTA band button — strengthen against the orange band so the call-to-action
   doesn't read as a faint outline. Override the global .btn-ghost defaults
   only within the cta-band context. */
.cta-band .btn-ghost {
  background: rgba(0,0,0,0.18);
  border-color: rgba(255,255,255,0.85);
  border-width: 2px;
  color: #fff;
  letter-spacing: 0.6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.cta-band .btn-ghost:hover {
  background: #fff;
  color: var(--orange-dk);
  border-color: #fff;
}
@media (max-width: 640px) {
  .cta-band { padding: 72px 20px 88px; }
  .cta-band-content p { font-size: 15px; }
}

/* ── CARD GRID ── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-sub);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  position: relative;
}
.card:hover { border-color: var(--border); transform: translateY(-3px); }

/* ── CARD STUB (coming soon) ── */
.card--stub {
  overflow: visible;
  pointer-events: none;
  opacity: 0.6;
  cursor: default;
}
.card--stub:hover {
  border-color: var(--border-sub);
  transform: none;
}
.card--stub::after {
  content: 'COMING SOON';
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--bg-card2);
  border: 1px solid var(--border-sub);
  border-radius: 4px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-3);
  padding: 4px 8px;
}
.card-img {
  height: 180px;
  background: var(--bg-card2) center/cover no-repeat;
}
.card-body { padding: 20px 22px; flex: 1; display: flex; flex-direction: column; }
.card-meta { font-size: 11px; color: var(--text-3); margin-bottom: 8px; letter-spacing: 0.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-body h3 { font-size: 16px; margin-bottom: 10px; color: var(--text); }
.card-body p { font-size: 13px; flex: 1; }
.card-link { display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 700; color: var(--orange); text-decoration: none; letter-spacing: 1px; }

/* ── PROCESS STEPS ── */
.process-list { list-style: none; margin-top: 48px; }
.process-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  align-items: start;
  padding: 32px 0;
  border-bottom: 1px solid var(--border-sub);
}
.process-step:last-child { border-bottom: none; }
.step-icon {
  width: 56px;
  height: 56px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  font-family: var(--font-display);
  color: var(--orange);
  flex-shrink: 0;
  background: transparent;
  letter-spacing: -0.5px;
}

/* ── Process step connector SVG ── */
.process-track-wrap { position: relative; }
.process-track-wrap .step-icon {
  position: relative;
  z-index: 1;
  background: var(--bg-base);
  transition: background 0.45s ease, box-shadow 0.45s ease;
}
.process-track-wrap .step-icon--lit {
  background: color-mix(in srgb, var(--orange) 10%, var(--bg-base));
  box-shadow: 0 0 0 5px var(--orange-a06);
}
.process-track-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.process-track-ghost {
  fill: none;
  stroke: var(--border-sub);
  stroke-width: 1.5;
  stroke-dasharray: 3 7;
  stroke-linecap: round;
}
.process-track-path {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.step-body h3 { margin-bottom: 8px; }
.step-body strong { color: var(--orange); }

/* ── TEAM GRID ── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.team-card {
  background: var(--bg-card);
  border: 1px solid var(--border-sub);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
}
.team-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid var(--border);
  overflow: hidden;
  margin: 0 auto 16px;
  background: var(--bg-card2);
}
.team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
/* guide avatars — sized at the .guide-card level (see Summit Guides block) */
.guide-avatar {
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-card2);
  border: 1px solid var(--border-sub);
}
.guide-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.team-card h3 { font-size: 16px; margin-bottom: 4px; }
.team-card .role { font-size: 11px; color: var(--text-3); letter-spacing: 1px; text-transform: uppercase; }
.team-social { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.team-social a { font-size: 14px; color: var(--text-3); text-decoration: none; transition: color 0.2s; }
.team-social a:hover { color: var(--orange); }

/* ── EVENT LIST ── */
.event-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 28px;
  padding: 32px 0;
  border-bottom: 1px solid var(--border-sub);
}
.event-date-badge {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 8px;
  text-align: center;
  flex-shrink: 0;
}
.event-date-badge .month { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); }
.event-date-badge .day   { font-size: 28px; font-weight: 800; line-height: 1; color: var(--text); }
.event-body h3 { margin-bottom: 6px; }
.event-body .venue { font-size: 12px; color: var(--text-3); margin-bottom: 10px; }
.event-body p { font-size: 13px; margin-bottom: 16px; }
.event-actions { display: flex; gap: 10px; }

/* ── VALUE PROPS ── */
.value-props {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.value-prop {
  background: var(--bg-card);
  border: 1px solid var(--border-sub);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
}
.value-prop .icon { font-size: 28px; margin-bottom: 14px; }
.value-prop h3 { margin-bottom: 10px; font-size: 17px; }

/* ── ARTICLE BODY ── */
.article-body {
  max-width: 720px;
  margin: 0 auto;
}
.article-body h2 { margin: 36px 0 14px; }
.article-body h3 { margin: 28px 0 10px; color: var(--text); }
.article-body p  { margin-bottom: 18px; }
.article-body ul { color: var(--text-2); padding-left: 24px; margin-bottom: 18px; line-height: 1.8; }
.article-meta { display: flex; align-items: center; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--border-sub); margin-bottom: 36px; }
.article-meta .author { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.article-meta .date   { font-size: 12px; color: var(--text-3); }

/* ── BREADCRUMB ── */
.breadcrumb { padding: 16px 40px; background: var(--bg-base); border-bottom: 1px solid var(--border-sub); }
.breadcrumb a { font-size: 12px; color: var(--text-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb span { font-size: 12px; color: var(--text-3); margin: 0 6px; }

/* ── SECURITY ── */
.soc-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.soc-card {
  background: var(--bg-card);
  border: 1px solid var(--border-sub);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
}
/* Typographic certification badge — replaces emoji soc-icon */
.soc-cert-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg-card2);
  font-size: 9px;
  font-weight: 800;
  color: var(--orange);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.35;
  margin-bottom: 16px;
  font-family: var(--font-display);
}
/* SVG icon for benefits list — replaces emoji */
.benefit-svg-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--orange);
  opacity: 0.85;
}
/* Grid layout for the "Why It Matters" split section */
.security-why-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: start;
}
.security-sidebar-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.security-sidebar-card p { font-size: 13px; }
.security-sidebar-card p + p { margin-top: 12px; }
.security-sidebar-card ul {
  margin-top: 10px;
  padding-left: 18px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.9;
}
@media (max-width: 900px) {
  .security-why-grid { grid-template-columns: 1fr; }
}
.benefits-list { list-style: none; margin-top: 32px; }
.benefits-list li {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-sub);
}
.benefits-list li:last-child { border-bottom: none; }
.benefit-body h4 { margin-bottom: 4px; color: var(--text); font-size: 16px; }

/* ── FOOTER ── */
.site-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
  padding: 56px 40px 24px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 40px;
  max-width: var(--max-w);
  margin: 0 auto 40px;
}
.footer-brand address { color: var(--text-3); font-size: 12px; line-height: 1.8; margin-top: 16px; }
.footer-brand a[href^="tel"] { color: var(--text-3); text-decoration: none; }
.newsletter-form { display: flex; gap: 8px; margin-top: 20px; }
.newsletter-form input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 14px;
  border-radius: var(--radius);
  font-size: 12px;
  flex: 1;
  outline: none;
  font-family: var(--font);
}
.newsletter-form input::placeholder { color: var(--text-3); }
.newsletter-form input:focus-visible { border-color: var(--orange); }
.newsletter-form button {
  background: var(--orange);
  color: var(--text);
  border: none;
  padding: 9px 16px;
  border-radius: var(--radius);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  font-family: var(--font);
}
.footer-col h4 {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 18px;
}
.footer-col a {
  display: block;
  color: var(--text-2);
  font-size: 12px;
  text-decoration: none;
  margin-bottom: 10px;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--orange); }
.soc-badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.soc-badge span { font-size: 8px; font-weight: 800; color: var(--text-2); line-height: 1.4; }
.footer-badge { display: flex; align-items: flex-start; justify-content: flex-end; }
.footer-badge img { width: 72px; height: 72px; object-fit: contain; border-radius: 50%; }
.footer-bottom {
  border-top: 1px solid var(--border-sub);
  padding-top: 20px;
  text-align: center;
  max-width: var(--max-w);
  margin: 0 auto;
}
.footer-bottom p { font-size: 11px; color: var(--text-3); }
.footer-bottom a { color: var(--text-3); }
.footer-bottom a:hover { color: var(--orange); }

/* ── DIVIDER ── */
.divider { border: none; border-top: 1px solid var(--border-sub); }

/* ── 404 ── */
.not-found {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
}
.not-found .big-number {
  font-size: clamp(80px, 15vw, 140px);
  font-weight: 800;
  color: var(--orange);
  line-height: 1;
  margin-bottom: 24px;
}

/* ── ADAPTS TO YOUR STACK — configuration variations ──
   Each configuration is a row on the page background: a left-gutter label
   + the topology itself. The variance in row length IS the message — three
   different ways mysherpas slots in. Rows are separated by hairlines, not
   cards, so the section reads as architecture, not a feature grid. */
.stack-section { padding-bottom: var(--section-py); }
.stack-section h2 { letter-spacing: -0.02em; line-height: 1.05; max-width: 720px; }
.stack-intro {
  margin-top: 14px;
  max-width: 620px;
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.6;
}
/* ── ISOMETRIC ARCHITECTURE DIAGRAM — single composition ─────────
   The section's centerpiece. One hand-drawn isometric SVG shows the
   canonical layered stack (Borrower → CRM/LOS → mysherpas → Core)
   with a faint mountain cross-section behind it; data visibly flows
   through the layers via dashed orange paths whose stroke-dashoffset
   animates downward. The three configurations are confirmed by a
   compact legend below — editors keep authority over the wording
   even though the diagram itself is fixed markup. */
.stack-iso {
  position: relative;
  margin: clamp(40px, 5vw, 64px) 0 0;
}
.stack-iso-svg {
  display: block;
  width: 100%;
  max-width: 960px;
  height: auto;
  margin: 0 auto;
}
.stack-iso-svg .iso-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  fill: #cbd5e1;
  paint-order: stroke;
}
.stack-iso-svg .iso-label-us {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 6px;
  fill: var(--bg-deep);
}
.stack-iso-svg .iso-band-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  fill: var(--orange);
  opacity: 0.85;
}
.stack-iso-svg .iso-team-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 4px;
  fill: rgba(226, 232, 240, 0.85);
}
.stack-iso-svg .iso-icon { color: #cbd5e1; }
.stack-iso-svg .iso-icon-accent { color: var(--orange); }
/* Dashed connectors flow downward — each dash crawls toward the next
   layer once per cycle, so the diagram reads "data is moving". One
   short loop, no decoration. Reduced-motion users get a static
   snapshot instead. */
@keyframes iso-flow-down {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -32; }
}
.stack-iso-svg .iso-flows path {
  animation: iso-flow-down 1.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .stack-iso-svg .iso-flows path { animation: none; }
}

/* Front-door variant — used by the Stack_Configs_V2 widget. Replaces
   V1's iso scene entirely with a borrower-cluster + mysherpas-card +
   three-rails composition. All animation lives inside the SVG (SMIL
   on rail-group opacity + on a per-rail marker traversing the active
   path), so CSS here only handles layout, type, and the reduced-motion
   override. The override flips every rail to full opacity and hides
   the markers — the static front-door diagram still tells the whole
   story without any motion.

   Visually inherits the same wireframe-on-dark register the V1 iso
   diagram above uses: the section header (.label, h2, .stack-intro)
   carries the site's canonical typography, and the diagram sits flush
   in the section flow with no panel frame, watermark, or heading
   override. The only adaptation that lives at this layer is the
   mobile horizontal scroller — the diagram's left→right semantics
   (borrower trunk on the left, lender stack fanning right) are
   intrinsic to the message, so on narrow viewports we preserve the
   layout and let users scrub it instead of restructuring it. */
.stack-fd {
  position: relative;
  margin: clamp(40px, 5vw, 64px) 0 0;
}
.stack-fd-svg {
  display: block;
  width: 100%;
  max-width: 960px;
  height: auto;
  margin: 0 auto;
  /* Cluster label is text-anchor=middle at viewBox x=80 and runs a
     hair past x=0; letting the SVG render past its viewBox lets the
     leading "B" of "BORROWERS / 3RD PARTIES" show in full. */
  overflow: visible;
}
.stack-fd-svg .fd-cluster-label {
  /* Anchored at viewBox x=80, ~160px width budget before the trunk
     arrow at x=160. 11px/1px (original) renders ~190px wide and
     clips — 10px/0.5px lands at ~140px and fits cleanly. */
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  fill: #cbd5e1;
}
.stack-fd-svg .fd-mys-brand {
  /* Dark text on the brand-orange tile — same approach the V1 iso
     variant uses for its MYSHERPAS label (.iso-label-us → --bg-deep),
     so the brand wordmark has strong contrast on either tile. */
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  fill: var(--bg-deep);
}
.stack-fd-svg .fd-mys-team {
  /* Sentence case (not the all-caps eyebrow it used to be), so the
     tracking and weight relax accordingly. The original 9px / 2.5px
     tracking was tuned for "YOUR LENDING TEAM" — applying it to
     mixed case stretches the line and reads cold. */
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  fill: rgba(6, 11, 20, 0.78);
}
.stack-fd-svg .fd-rail-num {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  fill: var(--orange);
}
.stack-fd-svg .fd-rail-label {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  fill: #cbd5e1;
}
.stack-fd-svg .fd-box-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  fill: #cbd5e1;
}

/* ── Surface + color normalization ──────────────────────────────
   Brings the front-door diagram into the site's surface system so
   the CRM/LOS/CORE boxes share a card surface with everything else
   in the dark theme (--bg-card2 + orange-tinted hairline), and the
   central mysherpas tile uses the same brand-orange gradient as the
   V1 iso variant's mysherpas tile. The SVG markup carries semantic
   classes (.fd-mys-card, .fd-port, .fd-trunk, .fd-arrow) and CSS
   here owns the colors via design tokens — no color literals on
   the markup, so palette shifts only need to happen in one place.
   Box rects sit inside .fd-rail so the descendant selector picks
   them up without needing extra classes. */
.stack-fd-svg .fd-rail rect {
  fill: var(--bg-card2);
  stroke: var(--orange-a22);
  stroke-width: 1;
  rx: 4;
}
.stack-fd-svg .fd-rail line,
.stack-fd-svg .fd-rail path { stroke: var(--orange); stroke-width: 1.6; }
.stack-fd-svg .fd-rail polygon { fill: var(--orange); }
.stack-fd-svg .fd-mys-card {
  fill: url(#fd-mys-grad);
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
  rx: 6;
  /* Three brief stroke pulses per 9s cycle, one for each time the
     marker crosses through the card. Timed against the marker's
     animation: each rail's marker enters the card at ~5.5% / 40% /
     74.3% of the cycle and exits at ~13.1% / 49.6% / 86.5%, derived
     from the path geometry (85u trunk + 177–182u card crossing
     against per-rail path totals of 565–709u). Reads as "borrower
     hand-off → mysherpas processes → exits via active rail" without
     adding any cycling glow / always-on ambience. */
  animation: fd-mys-handoff-pulse 9s linear infinite;
}
@keyframes fd-mys-handoff-pulse {
  /* Sustained dark-amber stroke for the full duration the marker is
     inside the card (enter → exit), not a triangular peak. Each rail
     contributes one plateau — rail 01 5.5%–13.1%, rail 02 40%–49.6%,
     rail 03 74.3%–86.5% — with a 1% rise/fall on each edge so the
     transition reads as gentle sync, not a hard flicker. The thicker
     dark-orange stroke reads against the card's bright brand-gradient
     fill where a white stroke disappeared into the orange. */
  0%, 4.5%, 14.1%, 39%, 50.6%, 73.3%, 87.5%, 100% {
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 1;
  }
  5.5%, 13.1%, 40%, 49.6%, 74.3%, 86.5% {
    /* Light-amber stroke — same hue family as the port circles
       (.fd-port fills with #fed7aa) so the active outline ties to
       the card's existing accent color rather than reading as a
       foreign element. Sits on top of the brand-orange gradient
       fill as a soft cream halo. */
    stroke: rgba(254, 215, 170, 0.85);
    stroke-width: 4;
  }
}
.stack-fd-svg .fd-trunk { stroke: var(--orange); stroke-width: 1.6; }
.stack-fd-svg .fd-arrow { fill: var(--orange); }
.stack-fd-svg .fd-port {
  fill: #fed7aa;
  stroke: var(--orange-dk);
  stroke-width: 1;
}

/* Flex variant — rail 04 ("replaces your stack") swaps the dark
   customer-system surface for the brand-orange gradient so the box
   reads as "this slot is now mysherpas" instead of "another vendor
   box." The selector is more specific than the rail-rect default
   (.stack-fd-svg .fd-rail rect) so the orange fill wins without
   !important. The replace label sits on the orange fill, so it
   inverts to the deep-bg ink for contrast. */
.stack-fd-svg .fd-rail.fd-rail-replace rect.fd-replace-box {
  fill: url(#fd-mys-grad);
  stroke: var(--orange-dk);
  stroke-width: 1.4;
  rx: 4;
}
.stack-fd-svg .fd-replace-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  fill: var(--bg-deep);
}

/* Mobile adaptation. SVG min-width keeps the in-SVG type legible at
   narrow viewports — at 720px the labels render at original size
   instead of shrinking to ~3-4px on a 360px phone. */
@media (max-width: 760px) {
  .stack-fd {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .stack-fd-svg { min-width: 720px; }
}

@media (prefers-reduced-motion: reduce) {
  .stack-fd-svg .fd-rail { opacity: 1 !important; }
  .stack-fd-svg .fd-marker { display: none; }
  .stack-fd-svg .fd-mys-card { animation: none; }
}

/* Adapts variant — "Adapts to Your Stack." v5. Three stacked
   diagrams that each render the same systems under a different
   configuration (Augment / CRM Inside / Replace). The mysherpas
   card is a dashed-orange container that visually encloses
   internal items; everything outside connects via bidirectional
   "Two Way Sync" links. The inner mysherpas item is the only
   piece that carries the brand gradient. */
[data-variant^="adapts"] .stack-adapts {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 52px);
  margin: clamp(36px, 4vw, 56px) auto 0;
  max-width: 880px;
}
[data-variant^="adapts"] .stack-adapts-fig { margin: 0; }
[data-variant^="adapts"] .fd-config-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.85);
  margin: 0 0 14px;
}
[data-variant^="adapts"] .fd-config-num {
  color: var(--orange);
  font-weight: 800;
  letter-spacing: 1.6px;
}
[data-variant^="adapts"] .stack-adapts-svg {
  width: 100%;
  height: auto;
  display: block;
}
/* Borrowers / 3rd-parties cluster, trunk, and arrow. Sits to the
   left of the mysherpas card in every adapts variant. ViewBox is
   extended to start at x=-110 so the cluster + label fit without
   shifting other geometry. Label uses 10px / 0.5px tracking per the
   auto-memory rule about cluster-label width budget. */
[data-variant^="adapts"] .stack-adapts-svg .bd-cluster-figure {
  fill: none;
  stroke: #cbd5e1;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[data-variant^="adapts"] .stack-adapts-svg .bd-cluster-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  fill: rgba(203, 213, 225, 0.7);
}
[data-variant^="adapts"] .stack-adapts-svg .bd-trunk {
  stroke: var(--orange);
  stroke-width: 1.6;
  fill: none;
}
[data-variant^="adapts"] .stack-adapts-svg .bd-arrow {
  fill: var(--orange);
}

[data-variant^="adapts"] .fd-card-container {
  fill: rgba(251, 146, 60, 0.05);
  stroke: rgba(251, 146, 60, 0.55);
  stroke-width: 1.2;
  stroke-dasharray: 5 4;
  rx: 8;
}
[data-variant^="adapts"] .fd-internal-item {
  /* Items inside the mysherpas card (the dashed-orange container)
     adopt an orange outline + orange label so they read visually as
     "within the mysherpas zone." External boxes (LOS / CORE outside
     the card) keep the neutral dark + gray "your existing system"
     treatment, so the inside / outside distinction stays legible at
     a glance. */
  fill: #0d121d;
  stroke: rgba(251, 146, 60, 0.5);
  stroke-width: 1;
  rx: 4;
}
[data-variant^="adapts"] .fd-internal-item.fd-internal-mys {
  fill: url(#fd-mys-grad);
  stroke: rgba(254, 215, 170, 0.55);
}
[data-variant^="adapts"] .fd-internal-item-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  fill: var(--orange);
}
[data-variant^="adapts"] .fd-internal-item-label.fd-internal-mys-label {
  font-weight: 800;
  letter-spacing: 1px;
  fill: #ffffff;
  text-transform: uppercase;
}
/* The mysherpas inner block is rendered taller than the other items
   (96u vs 32u) so it carries the brand text + tagline rather than a
   single centered label. Mirrors the standalone "MYSHERPAS / Your
   lending team's home base." card from the previous bidi v5. */
[data-variant^="adapts"] .fd-internal-mys-brand {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1.6px;
  fill: #ffffff;
  text-transform: uppercase;
}
[data-variant^="adapts"] .fd-internal-mys-team {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.4px;
  fill: rgba(255, 255, 255, 0.85);
}
[data-variant^="adapts"] .fd-external-box {
  fill: #0d121d;
  stroke: #cbd5e1;
  stroke-width: 1.2;
  rx: 4;
}
[data-variant^="adapts"] .fd-external-box-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  fill: #e2e8f0;
}
[data-variant^="adapts"] .fd-connector-line {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.4;
  stroke-dasharray: 3 4;
  stroke-linecap: round;
  /* Each line is drawn in the direction of its arrow (start at the
     base, end at the arrowhead). A single dashoffset cycle therefore
     visibly flows toward each arrow's tip — no per-direction class
     needed. */
  animation: fd-connector-flow 1.6s linear infinite;
}
[data-variant^="adapts"] .fd-connector-arrowhead {
  fill: var(--orange);
}
[data-variant^="adapts"] .fd-connector-label {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.6px;
  fill: rgba(203, 213, 225, 0.85);
}
@keyframes fd-connector-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -28; }
}
@media (prefers-reduced-motion: reduce) {
  [data-variant^="adapts"] .fd-connector-line { animation: none; }
}
@media (max-width: 760px) {
  [data-variant^="adapts"] .stack-adapts {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  [data-variant^="adapts"] .stack-adapts-svg { min-width: 640px; }
}

/* Adapts-bold variant — keeps the numbered-chapter pattern (each
   config gets its own meta column with a number + title + description
   alongside the diagram), but uses the site's standard section header
   (.label / h2 / .stack-intro) and standard typography hierarchy so
   the section reads as a sibling of every other section on the site,
   not a magazine spread. The chapter numbers are still the visual
   anchor, just sized to sit BETWEEN the section h2 (max 36px) and the
   chapter h3 — bigger than h3, smaller than h1 — so they extend the
   site's existing scale rather than introducing a new one. */
[data-variant="adapts-bold"] .ab-chapters {
  margin-top: clamp(28px, 4vw, 48px);
}
[data-variant="adapts-bold"] .ab-chapter {
  display: grid;
  grid-template-columns: minmax(180px, 0.55fr) minmax(0, 2.45fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  padding: clamp(28px, 4vw, 48px) 0;
}
[data-variant="adapts-bold"] .ab-chapter + .ab-chapter {
  /* Subtle top border to separate stacked chapters without
     introducing a heavy <hr> editorial flourish. Sits at the same
     visual weight as a divider on a card list. */
  border-top: 1px solid rgba(203, 213, 225, 0.08);
}
[data-variant="adapts-bold"] .ab-chapter-meta {
  position: relative;
}
[data-variant="adapts-bold"] .ab-num {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--orange);
  margin-bottom: clamp(8px, 1vw, 14px);
}
[data-variant="adapts-bold"] .ab-title {
  /* Match site h3 exactly — same hierarchy as any other heading-3
     on the page. */
  font-family: var(--font-display);
  font-size: clamp(17px, 2.5vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  margin: 0 0 clamp(8px, 1vw, 12px);
}
[data-variant="adapts-bold"] .ab-desc {
  /* Plain body paragraph — uses the site's body text token so
     descriptions read like every other paragraph in a section. */
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 32ch;
  margin: 0;
}
[data-variant="adapts-bold"] .ab-diagram { margin: 0; }

/* Custom-configurations callout. The three diagrams above are
   examples — this banner explicitly tells visitors that any
   configuration in between is fair game. Sized between an inline
   paragraph and a full CTA card: an orange "+" mark anchors it,
   subtle orange-tinted gradient background + thin orange border
   give it weight without the dramatic editorial flourishes the
   adapt pass removed. <em> inside the text inherits the site's
   global emphasis styling (orange italic). */
[data-variant="adapts-bold"] .ab-custom-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 760px;
  margin: clamp(32px, 4vw, 56px) auto 0;
  padding: clamp(16px, 2vw, 22px) clamp(20px, 3vw, 28px);
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.1), rgba(251, 146, 60, 0.02));
  border: 1px solid rgba(251, 146, 60, 0.3);
  border-radius: 10px;
  text-decoration: none;
}
[data-variant="adapts-bold"] .ab-custom-banner-mark {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--orange);
  display: inline-grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
}
[data-variant="adapts-bold"] .ab-custom-banner-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 600;
  line-height: 1.4;
  color: #e2e8f0;
}
[data-variant="adapts-bold"] .ab-custom-banner-text em {
  /* Key phrase highlight — orange + underlined. Drops the default
     italic because underline + italic together reads cluttered at
     this size. Bumped to weight 700 so the orange phrase pulls the
     eye through the line. */
  color: var(--orange);
  font-style: normal;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  [data-variant="adapts-bold"] .ab-chapter {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 0;
  }
  [data-variant="adapts-bold"] .ab-custom-banner {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 20px;
  }
}

/* Puzzle variant — mysherpas as the central piece with four interlocking
   surrounds. Side pieces snap toward the center on scroll-in (CSS
   transitions); a SMIL pulse cycles around the four joints once
   assembled. Reduced motion freezes the assembled state. */
.stack-puzzle {
  margin: clamp(36px, 4vw, 56px) auto 0;
  max-width: 980px;
}
.stack-puzzle-svg {
  width: 100%;
  height: auto;
  display: block;
  /* Tabletop-tilt — the whole assembly leans back like a puzzle laid
     on a table viewed from a slight angle. Tilt sits on the SVG
     element, so all children (pieces, labels, gradient fills)
     transform together. Reduced-motion keeps the tilt (it's a static
     framing, not animation), so the diagram still reads in 3D. */
  transform: perspective(1400px) rotateX(22deg) rotateZ(-3deg);
  transform-origin: 50% 60%;
  /* Stage shadow — composed of a deep neutral cast (gives the puzzle
     physical weight on the "table") and a faint brand-orange ambient
     halo (carries warmth from the mysherpas tile out into the dark
     surface). Filter applies after the rotateX, so the shadow follows
     the tilted silhouette. */
  filter:
    drop-shadow(0 28px 36px rgba(0, 0, 0, 0.45))
    drop-shadow(0 6px 14px rgba(249, 115, 22, 0.18));
}
/* Surface + color normalization — owns the puzzle palette via design
   tokens, mirroring v2's pattern at .fd-rail rect / .fd-mys-card. The
   SVG markup carries semantic classes (.puzzle-side, .puzzle-center)
   and CSS here owns fill/stroke, so palette shifts only need to
   happen in one place. */
.stack-puzzle-svg .puzzle-side > path {
  fill: var(--bg-card2);
  stroke: #cbd5e1;
  stroke-width: 1;
}
.stack-puzzle-svg .puzzle-center > path {
  fill: url(#puzzle-mys-grad);
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
}
/* Ghost corners — same surface as the solid surrounds, faded almost
   to silhouette so they hint at the puzzle continuing without pulling
   the eye away from the labelled cardinals. !important wins against
   the .is-visible snap-in rule below (which sets all .puzzle-side
   pieces to opacity 1) and the reduced-motion override. */
.stack-puzzle-svg .puzzle-ghost { opacity: 0.12 !important; }
.stack-puzzle-svg .puzzle-mys-label {
  /* Dark text on the brand-orange tile — same approach as v1 iso
     (.iso-label-us → --bg-deep) and v2 fd (.fd-mys-brand → --bg-deep).
     Scaled up + heaviest weight so the focal piece owns the hierarchy
     at a glance, matching the gravity the v1 iso variant gives its
     own MYSHERPAS wordmark. */
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.18em;
  fill: var(--bg-deep);
}
.stack-puzzle-svg .puzzle-mys-sub {
  /* Same dark-alpha treatment as v2 .fd-mys-team (rgba(6,11,20,0.78)),
     so the brand sub-label tone matches across architecture diagrams
     that share the brand-orange tile. */
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  fill: rgba(6, 11, 20, 0.78);
}
.stack-puzzle-svg .puzzle-side-label {
  /* Slate-300 on dark — same diagram-text convention v1 (.iso-label)
     and v2 (.fd-cluster-label/.fd-rail-label/.fd-box-label) use. */
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.18em;
  fill: #cbd5e1;
}
.stack-puzzle-svg .puzzle-side-label-sm {
  font-size: 11px;
  letter-spacing: 0.2em;
}

/* Snap-in entry — each side piece starts displaced outward from the
   center; .is-visible (added by the same intersection observer that
   powers .anim-fade-up) lets them transition home in stagger. */
.stack-puzzle-svg .puzzle-side,
.stack-puzzle-svg .puzzle-center {
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.stack-puzzle-svg .puzzle-top    { transform: translate(0, -60px); }
.stack-puzzle-svg .puzzle-right  { transform: translate(60px, 0); }
.stack-puzzle-svg .puzzle-bottom { transform: translate(0, 60px); }
.stack-puzzle-svg .puzzle-left   { transform: translate(-60px, 0); }
.stack-puzzle-svg .puzzle-center {
  transform: scale(0.94);
  transform-origin: 450px 310px;
  transform-box: fill-box;
}
.stack-puzzle.is-visible .puzzle-side,
.stack-puzzle.is-visible .puzzle-center {
  opacity: 1;
  transform: translate(0, 0);
}
.stack-puzzle.is-visible .puzzle-center { transform: scale(1); }
.stack-puzzle.is-visible .puzzle-top    { transition-delay: 0.08s; }
.stack-puzzle.is-visible .puzzle-right  { transition-delay: 0.20s; }
.stack-puzzle.is-visible .puzzle-bottom { transition-delay: 0.32s; }
.stack-puzzle.is-visible .puzzle-left   { transition-delay: 0.44s; }

@media (prefers-reduced-motion: reduce) {
  .stack-puzzle-svg .puzzle-side,
  .stack-puzzle-svg .puzzle-center {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .stack-puzzle-svg .puzzle-pulse { display: none; }
}

@media (max-width: 720px) {
  .stack-puzzle-svg .puzzle-mys-label { font-size: 22px; letter-spacing: 0.14em; }
  .stack-puzzle-svg .puzzle-mys-sub   { font-size: 10px; letter-spacing: 0.22em; }
  .stack-puzzle-svg .puzzle-side-label { font-size: 13px; letter-spacing: 0.14em; }
  .stack-puzzle-svg .puzzle-side-label-sm { font-size: 9.5px; }
}

/* Caption legend — three configurations as a row of typeset cards.
   Replaces the old block-by-block visual: the diagram above carries
   the architecture; this row carries the copy. Numbered to mirror
   the editorial rhythm used elsewhere (cx-spotlight, agenda). */
.stack-legend {
  list-style: none;
  margin: clamp(36px, 4vw, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.5vw, 40px);
}
.stack-legend-item {
  position: relative;
  display: grid;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--orange);
}
.stack-legend-num {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--orange);
}
.stack-legend-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.1vw, 17px);
  letter-spacing: -0.005em;
  color: var(--text);
}
.stack-legend-chain {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--text-3);
  font-feature-settings: "tnum" 1;
}

.stack-outro {
  margin: clamp(32px, 4vw, 48px) 0 0;
  max-width: 620px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-2);
  text-wrap: pretty;
}

/* Entrance — diagram fades up, then the legend cards stagger in
   one beat behind. The is-visible class is wired by the same
   intersection observer that powers anim-stagger elsewhere. */
.stack-iso .stack-iso-svg,
.stack-iso .stack-legend-item {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.stack-iso.is-visible .stack-iso-svg { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
.stack-iso.is-visible .stack-legend-item { opacity: 1; transform: translateY(0); }
.stack-iso.is-visible .stack-legend-item:nth-child(1) { transition-delay: 0.34s; }
.stack-iso.is-visible .stack-legend-item:nth-child(2) { transition-delay: 0.46s; }
.stack-iso.is-visible .stack-legend-item:nth-child(3) { transition-delay: 0.58s; }
@media (prefers-reduced-motion: reduce) {
  .stack-iso .stack-iso-svg,
  .stack-iso .stack-legend-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 720px) {
  .stack-legend {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .stack-iso-svg .iso-label       { font-size: 18px; letter-spacing: 4px; }
  .stack-iso-svg .iso-label-us    { font-size: 26px; letter-spacing: 7px; }
  .stack-iso-svg .iso-band-label  { font-size: 14px; letter-spacing: 5px; }
  .stack-iso-svg .iso-team-label  { font-size: 15px; letter-spacing: 5px; }
  .stack-outro { margin-top: 28px; font-size: 14.5px; }
}

/* Capabilities h2 em — same orange-underlined treatment as the hero h1 em
   so the REAL accent reads as a deliberate echo, not a one-off decoration. */
.cap-section h2 em {
  font-style: normal;
  color: var(--orange);
  background-image: linear-gradient(180deg, transparent 88%, var(--orange-a35) 88%, var(--orange-a35) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 0.04em;
}

/* Footer Contact & Follow icons live in the FOOTER section further down —
   single .footer-icon rule covers phone, email, LinkedIn, YouTube, plus
   shims for the legacy .contact-link--icon-only / .social-links a markup.
   See "FOOTER CONTACT & FOLLOW — unified icon row" below. */

/* Partners strip — text-only logo fallback for partners we don't have a
   real image asset for yet (DocuSign etc.). Matches the rendered height
   and visual weight of the other partner logos so the row stays even. */
.partners-text-logo {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--text-3);
  letter-spacing: -0.2px;
  opacity: 0.7;
  transition: opacity 0.25s;
}
.partners-text-logo:hover { opacity: 1; }

/* ── DISCOVERY CALL AGENDA — horizontal flowing timeline ──
   Four stops in a single row, all left-aligned. JS draws cubic-bezier arches
   between consecutive markers (control points pulled UP so each arch sits
   above the marker line and never crosses the body copy). Markers pop in,
   clock minute hands sweep to their actual time, and the final marker pulses
   once lit. On narrow viewports the row collapses to a vertical stack. */
.agenda-section { padding-bottom: calc(var(--section-py) - 8px); }
.agenda-section h2 { line-height: 1.08; letter-spacing: -0.02em; max-width: 720px; }
.agenda-intro {
  margin-top: 14px;
  max-width: 540px;
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.6;
}

.agenda-journey {
  position: relative;
  /* Reserve top room for arches that climb above the marker line. JS draws
     into this space (negative-y region of the SVG viewBox). */
  margin: 96px auto 0;
}
.journey-stops {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 36px;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 2;
}

.journey-stop {
  position: relative;
  padding-top: 100px;        /* room for the 72px marker plus a 28px gap */
  padding-bottom: 8px;
  min-width: 0;
  text-align: left;          /* every stop reads left-to-right, no exceptions */
}

.journey-marker {
  position: absolute;
  top: 0;
  left: 0;                   /* marker hugs the start of its column */
  width: 72px;
  height: 72px;
  z-index: 4;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45));
  /* Pop-in motion — markers start small + invisible and bloom in when the
     SVG path reaches them. Cubic-bezier ease-out-expo for a natural settle. */
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity   0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    filter    0.4s ease;
}
.journey-marker--lit {
  opacity: 1;
  transform: scale(1);
}
.marker-clock {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.marker-clock .clock-face {
  fill: var(--bg-card);
  stroke: var(--orange);
  stroke-width: 2;
  transition: fill 0.4s, stroke-width 0.4s;
}
.marker-clock .clock-tick {
  stroke: var(--orange-a35);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.marker-clock .clock-minute {
  stroke: var(--orange);
  stroke-width: 2.2;
  stroke-linecap: round;
  /* Hand starts at 12 o'clock; --minute-angle (set per-stop on the <li>)
     drives the rotation when the marker becomes lit. */
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: rotate(0deg);
  transition: transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
}
.marker-clock .clock-pivot { fill: var(--orange); }

/* Lit state: clock face brightens, hand sweeps to the time. */
.journey-marker--lit .clock-face   { stroke-width: 2.6; }
.journey-marker--lit .clock-minute { transform: rotate(var(--minute-angle, 0deg)); }

/* Final stop: filled face + a subtle pulsing halo to mark the destination. */
.journey-stop--final .journey-marker--lit .clock-face {
  fill: var(--orange-a15);
}
@keyframes journey-final-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--orange-a35); }
  50%      { box-shadow: 0 0 0 12px transparent; }
}
.journey-stop--final .journey-marker--lit {
  border-radius: 50%;
  animation: journey-final-pulse 2.6s ease-in-out 0.4s infinite;
}

/* Time + verb sit in a tight pair below the marker, always left-aligned. */
.stop-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.stop-meta time {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.journey-verb {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--orange);
}

.journey-stop h3 {
  font-size: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.25;
  color: var(--text);
  text-wrap: balance;
}
.journey-stop p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0;
  text-wrap: pretty;
}

/* Lead stop ("Listen") — slight editorial lift. */
.journey-stop--lead h3 {
  font-size: clamp(20px, 1.85vw, 22px);
  letter-spacing: -0.01em;
}
.journey-stop--lead p {
  color: var(--text);
}

/* SVG route — drawn by site.js. Sits in the negative-y region above the
   stop row, behind everything else. */
.journey-track-svg {
  position: absolute;
  /* Inset matches CSS values JS reads: top is the negative climb height,
     left/right line up with the journey-stops grid. */
  left: 0;
  right: 0;
  top: -96px;       /* same as .agenda-journey margin-top */
  height: 196px;    /* climb height (96) + marker height (72) + breathing room (28) */
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.journey-track-ghost {
  fill: none;
  stroke: var(--border-sub);
  stroke-width: 1.5;
  stroke-dasharray: 3 7;
  stroke-linecap: round;
}
.journey-track-path {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px var(--orange-a22));
}

/* CTA pair under the journey — primary button + soft objection-handler link. */
.agenda-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 64px;
  flex-wrap: wrap;
}
.agenda-cta-soft {
  font-size: 13px;
  color: var(--text-3);
  text-decoration: none;
  letter-spacing: 0.2px;
  transition: color 0.2s;
}
.agenda-cta-soft:hover,
.agenda-cta-soft:focus-visible { color: var(--orange); }

/* ── Tablet: 2×2 grid keeps the horizontal feel without crushing copy. ── */
@media (max-width: 960px) {
  .agenda-journey { margin-top: 64px; }
  .journey-stops {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 80px 48px;
  }
  .journey-track-svg { display: none; }
  .journey-marker {
    /* Without the path orchestrating reveal, fade markers in unconditionally. */
    opacity: 1;
    transform: scale(1);
  }
  .journey-marker--lit .clock-minute,
  .journey-marker .clock-minute {
    transform: rotate(var(--minute-angle, 0deg));
  }
  .journey-stop--final .journey-marker {
    /* Even on tablet, the destination still pulses subtly. */
    border-radius: 50%;
    animation: journey-final-pulse 2.6s ease-in-out infinite;
  }
}

/* ── Mobile: vertical stack with marker on the left of each stop. ── */
@media (max-width: 640px) {
  .agenda-journey { margin-top: 40px; }
  .journey-stops {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .journey-stop {
    padding-top: 0;
    padding-left: 92px;
    min-height: 72px;
  }
  .journey-marker { left: 0; top: -2px; }
  .agenda-cta { margin-top: 36px; gap: 16px; }
}
@media (max-width: 420px) {
  .journey-stop { padding-left: 80px; }
  .journey-marker { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .marker-clock .clock-face,
  .marker-clock .clock-minute,
  .journey-marker { transition: none; }
  .journey-marker { opacity: 1; transform: none; }
  .marker-clock .clock-minute { transform: rotate(var(--minute-angle, 0deg)); }
  .journey-stop--final .journey-marker--lit,
  .journey-stop--final .journey-marker { animation: none; }
}
/* ── SUMMIT GUIDES ──
   Editorial two-column treatment. No card chrome — guides read as introductions
   to specific humans, not as repeated UI tiles. The avatar sits beside a
   compact identity block (name + role + specialty), with a measured-width bio
   below and a text-link CTA. Two columns on desktop, stacked on mobile.        */
.guides-section .guides-intro { margin-top: 12px; max-width: 56ch; color: var(--text-2); }
.guides-section .guides-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  margin-top: 40px;
}
@media (min-width: 760px) {
  .guides-section .guides-grid { grid-template-columns: 1fr 1fr; column-gap: 72px; row-gap: 56px; }
}
.guide-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 28px;
  align-items: stretch;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
.guide-card .guide-avatar { width: 120px; height: 120px; align-self: start; }
.guide-body { padding-top: 4px; min-width: 0; display: flex; flex-direction: column; }
.guide-body h3 {
  font-size: 26px;
  line-height: 1.15;
  margin: 0 0 8px;
}
.guide-body .role {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin: 0;
}
.guide-body .specialty {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--orange);
  letter-spacing: 0.1px;
  text-transform: none;
  font-weight: 500;
}
.guide-body .guide-bio {
  margin: 18px 0 0;
  max-width: 42ch;
  color: var(--text-2);
}
.guide-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
  color: var(--orange);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  letter-spacing: 0.2px;
  border-bottom: 1px solid color-mix(in srgb, var(--orange) 35%, transparent);
  padding-bottom: 3px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.guide-cta::after {
  content: '\2192';
  transition: transform 0.2s ease;
  display: inline-block;
}
.guide-cta:hover { color: var(--orange-dk); border-bottom-color: var(--orange-dk); }
.guide-cta:hover::after { transform: translateX(4px); }
.guide-cta:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 2px; }

/* ── CASE STUDY LAYOUT ── */
.case-study-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
}
.case-study-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: sticky;
  top: 80px;
}
@media (max-width: 900px) {
  .case-study-layout {
    grid-template-columns: 1fr;
  }
  .case-study-sidebar {
    position: static;
  }
}

/* Case study sidebar metrics */
.sidebar-title { font-size: 20px; margin-bottom: 20px; }
.sidebar-cta { width: 100%; text-align: center; margin-top: 24px; display: block; }
.sidebar-meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sidebar-meta-label {
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.sidebar-meta-value {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.sidebar-results {
  padding-top: 16px;
  border-top: 1px solid var(--border-sub);
  margin-top: 4px;
}
.sidebar-results-label {
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.sidebar-key-metric {
  font-size: 22px;
  font-weight: 800;
  color: var(--orange);
  line-height: 1.2;
  margin-top: 12px;
}
.sidebar-key-metric:first-of-type { margin-top: 0; }
.sidebar-key-desc {
  font-size: 12px;
  color: var(--text-2);
}

/* ── ARTICLES TOOLBAR (eyebrow + topic filters) ── */
.articles-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.articles-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0;
}
.articles-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--orange);
  flex-shrink: 0;
}

.articles-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-chip {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--border-sub);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.filter-chip:hover {
  color: var(--text);
  border-color: var(--text-3);
}
.filter-chip:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.filter-chip.is-active {
  color: var(--bg-deep);
  background: var(--orange);
  border-color: var(--orange);
}

/* ── EDITORIAL ARTICLE GRID ── */
.articles-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--bg-deep);
  border: 1px solid var(--border-sub);
  border-top: 2px solid var(--orange);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Featured article — spans full width */
.article-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: transparent;
  border-bottom: 1px solid var(--border-sub);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s;
}
.article-featured:hover { background-color: var(--orange-a04); }
.article-featured .art-img {
  height: 320px;
  background: var(--bg-card2);
  overflow: hidden;
  flex-shrink: 0;
}
.article-featured .art-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.article-featured:hover .art-img img {
  transform: scale(1.05);
}
.article-featured .art-body {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.article-featured .art-body h2 {
  font-size: clamp(26px, 3.2vw, 40px);
  margin-bottom: 16px;
  line-height: 1.18;
  font-family: var(--font-display);
  letter-spacing: -0.5px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}
.article-featured .art-body p  {
  font-size: 14px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}
.article-featured .art-body .card-link { margin-top: 20px; font-size: 13px; font-weight: 700; color: var(--orange); text-decoration: none; letter-spacing: 1px; display: inline-block; transition: transform 0.28s cubic-bezier(0.16,1,0.3,1); }
.article-featured:hover .card-link { transform: translateX(6px); }

/* Standard article row item */
.article-row-item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background-color: transparent;
  transition: background-color 0.2s;
  padding: 28px 24px;
  border-bottom: 1px solid var(--border-sub);
  min-width: 0;
}
.article-row-item:nth-child(odd) {
  box-shadow: inset 1px 0 0 var(--border-sub);
}
.article-row-item:last-child,
.article-row-item:nth-last-child(2):nth-child(odd) {
  border-bottom: none;
}
.article-row-item:hover { background-color: var(--orange-a04); }
.article-row-item .art-img-sm {
  width: 100%;
  height: 160px;
  background: var(--bg-card2);
  border-radius: var(--radius);
  margin-bottom: 14px;
  flex-shrink: 0;
  overflow: hidden;
}
.article-row-item .art-img-sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.article-row-item:hover .art-img-sm img { transform: scale(1.05); }
.article-row-item h3 {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 8px;
  font-family: var(--font-display);
  letter-spacing: -0.2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}
.article-row-item p  {
  font-size: 13px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}
.article-row-item .card-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 900px) {
  .articles-editorial { grid-template-columns: 1fr; }
  .article-featured { grid-template-columns: 1fr; }
  .article-featured .art-img { height: 260px; }
  .article-row-item:nth-child(odd) { box-shadow: none; }
  .articles-hero-content h1 { letter-spacing: -1px; }
}
@media (max-width: 640px) {
  .article-featured .art-img { height: 200px; }
  .article-featured .art-body { padding: 24px 20px; }
  .article-row-item { padding: 20px 16px; }
  .articles-hero-content { padding: 48px 24px 56px; }
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Reduce motion override — always include */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up,
  .anim-stagger,
  .anim-stagger > * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Elementor edit-mode: surface every widget instantly so editors aren't
   looking at empty rectangles waiting for IntersectionObserver to fire. */
body.mys-elementor-editing .anim-fade-up,
body.mys-elementor-editing .anim-stagger,
body.mys-elementor-editing .anim-stagger > *,
body.mys-elementor-editing .articles-hero-label,
body.mys-elementor-editing .articles-hero-content h1,
body.mys-elementor-editing .articles-hero-content p,
body.mys-elementor-editing [class*="hero-content"] > * {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}
body.mys-elementor-editing .page-hero-bg,
body.mys-elementor-editing .page-hero--articles .page-hero-bg {
  animation: none !important;
}

/* Scroll-triggered (JS adds .is-visible class) */
.anim-fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1),
              transform 0.55s cubic-bezier(0.16,1,0.3,1);
}
.anim-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger grid children */
.anim-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1),
              transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.anim-stagger.is-visible > *:nth-child(1)  { transition-delay: 0s; }
.anim-stagger.is-visible > *:nth-child(2)  { transition-delay: 0.07s; }
.anim-stagger.is-visible > *:nth-child(3)  { transition-delay: 0.14s; }
.anim-stagger.is-visible > *:nth-child(4)  { transition-delay: 0.21s; }
.anim-stagger.is-visible > *:nth-child(5)  { transition-delay: 0.28s; }
.anim-stagger.is-visible > *:nth-child(6)  { transition-delay: 0.35s; }
.anim-stagger.is-visible > *:nth-child(7)  { transition-delay: 0.42s; }
.anim-stagger.is-visible > *:nth-child(8)  { transition-delay: 0.49s; }
.anim-stagger.is-visible > *:nth-child(9)  { transition-delay: 0.56s; }
.anim-stagger.is-visible > *:nth-child(10) { transition-delay: 0.63s; }
.anim-stagger.is-visible > *:nth-child(11) { transition-delay: 0.70s; }
.anim-stagger.is-visible > *:nth-child(12) { transition-delay: 0.77s; }
.anim-stagger.is-visible > *:nth-child(13) { transition-delay: 0.84s; }
.anim-stagger.is-visible > *:nth-child(14) { transition-delay: 0.91s; }
.anim-stagger.is-visible > *:nth-child(15) { transition-delay: 0.98s; }
.anim-stagger.is-visible > *:nth-child(16) { transition-delay: 1.05s; }
.anim-stagger.is-visible > *:nth-child(n+17) { transition-delay: 1.12s; }
.anim-stagger.is-visible > *              { opacity: 1; transform: translateY(0); }

/* ── HERO ENTRANCE CHOREOGRAPHY ── */
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroStripRise {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Staggered text cascade — eyebrow first, strip last */
.hero .hero-eyebrow  { animation: heroReveal 0.65s cubic-bezier(0.16,1,0.3,1) 0.05s both; }
.hero .hero-text h1  { animation: heroReveal 0.70s cubic-bezier(0.16,1,0.3,1) 0.18s both; }
.hero .hero-body     { animation: heroReveal 0.65s cubic-bezier(0.16,1,0.3,1) 0.30s both; }
.hero .hero-actions  { animation: heroReveal 0.60s cubic-bezier(0.16,1,0.3,1) 0.42s both; }
/* Screen strip rises as a single panorama unit — preserves individual window 3D transforms */
.hero .screen-strip  { animation: heroStripRise 0.85s cubic-bezier(0.16,1,0.3,1) 0.50s both; }
/* Trust bar settles after the hero unit */
.hero-trust-bar { animation: heroReveal 0.55s cubic-bezier(0.16,1,0.3,1) 0.75s both; }

/* Trail marker mountain icon — slow downward bob draws eye to next section */
@keyframes trailBob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(4px); }
}
.trail-marker-inner svg { animation: trailBob 2.4s ease-in-out infinite; }

/* Reduced motion: collapse articles hero entrance + Ken Burns */
@media (prefers-reduced-motion: reduce) {
  .articles-hero-label,
  .articles-hero-content h1,
  .articles-hero-content p { animation: none !important; opacity: 1 !important; transform: none !important; }
  .page-hero--articles .page-hero-bg { animation: none !important; }
  .article-featured .card-link { transition: none !important; }
}

/* Reduced motion: collapse all hero + trail animations */
@media (prefers-reduced-motion: reduce) {
  .hero .hero-eyebrow,
  .hero .hero-text h1,
  .hero .hero-body,
  .hero .hero-actions,
  .hero .screen-strip,
  .hero-trust-bar {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .trail-marker-inner svg { animation: none !important; }
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */

/* ── Tablet wide (≤1024px) ── */
@media (max-width: 1024px) {
  .int-grid--primary   { grid-template-columns: repeat(3, 1fr); }
  .int-grid--secondary { grid-template-columns: repeat(4, 1fr); }
}

/* ── Tablet (≤900px) ── */
@media (max-width: 900px) {
  .int-grid--primary   { grid-template-columns: repeat(3, 1fr); }
  .int-grid--secondary { grid-template-columns: repeat(4, 1fr); }
  .card-grid     { grid-template-columns: repeat(2, 1fr); }
  .team-grid     { grid-template-columns: repeat(2, 1fr); }
  .value-props   { grid-template-columns: 1fr 1fr; }
  .soc-trio      { grid-template-columns: 1fr 1fr; }
  /* footer: stack badge under brand, 2-col nav columns */
  .footer-inner  { grid-template-columns: 1fr 1fr; }
  .footer-badge  { grid-column: 1; justify-content: flex-start; }
}

/* ── Tablet mid (≤720px) — bridge the 640–768 gap ── */
@media (max-width: 720px) {
  .section       { padding: 52px 24px; }
  .partners-strip { padding: 38px 24px; }
}

/* ── Tablet narrow (≤768px) ── */
@media (max-width: 768px) {
  /* Team still 2-col but cards no longer cramped */
  .team-grid     { grid-template-columns: repeat(2, 1fr); }
  /* Section padding breathes at mid-size — not full 40px, not cramped 20px */
  .section       { padding: 56px 28px; }
  .partners-strip { padding: 40px 28px; }
  /* Page hero shorter on tablet */
  .page-hero     { min-height: 260px; }
  .page-hero-content { padding: 48px 24px; }
  /* Case study sidebar stacks earlier */
  .case-study-layout { grid-template-columns: 1fr; }
  .case-study-sidebar { position: static; }
}

/* ── Mobile (≤640px) ── */
@media (max-width: 640px) {
  :root { --section-py: 44px; }

  /* ─ Nav ─ */
  .site-nav { padding: 0 20px; gap: 12px; }
  .nav-toggle { display: block; }
  .nav-cta { display: none; }
  .nav-links {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 60px; left: 0; right: 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 16px 20px 24px;
    gap: 4px;
    z-index: 999;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  /* Bigger tap targets on mobile nav links */
  .nav-links a {
    padding: 10px 4px;
    display: block;
  }
  .nav-dropdown-trigger { padding: 10px 4px; }
  .dropdown {
    position: static;
    box-shadow: none;
    border-left: 2px solid var(--border);
    border-radius: 0;
    padding: 4px 0 4px 14px;
    min-width: unset;
    margin-top: 4px;
  }
  .nav-cta-mobile { display: block; margin-top: 8px; }
  .nav-cta-mobile .btn-primary { display: block; width: 100%; text-align: center; }

  /* ─ Sections ─ */
  .section { padding: var(--section-py) 20px; }
  .partners-strip { padding: 36px 20px; }
  .partners-logos { gap: 28px; }

  /* ─ Grids ─ */
  .card-grid, .team-grid, .value-props, .soc-trio { grid-template-columns: 1fr; }
  .int-grid--primary   { grid-template-columns: repeat(2, 1fr); }
  .int-grid--secondary { grid-template-columns: repeat(3, 1fr); }

  /* ─ Footer ─ */
  .footer-inner { grid-template-columns: 1fr; }
  .footer-badge { grid-column: 1; justify-content: flex-start; }

  /* ─ Process steps: keep step number inline ─ */
  .process-step {
    grid-template-columns: 48px 1fr;
    gap: 16px;
  }
  .step-icon { width: 44px; height: 44px; font-size: 15px; }

  /* ─ Events ─ */
  .event-item { grid-template-columns: 1fr; }

  /* ─ Summit Guides ─ tighter portrait + name on phones */
  .guide-card { grid-template-columns: 88px 1fr; gap: 20px; }
  .guide-card .guide-avatar { width: 88px; height: 88px; }
  .guide-body h3 { font-size: 22px; }
  .guide-body .guide-bio { max-width: none; }

  /* ─ Misc ─ */
  .breadcrumb { padding-left: 20px; padding-right: 20px; }
  .clients-bar { padding-left: 0; padding-right: 0; }

  /* ─ CTA Band: tighten vertical on mobile ─ */
  .cta-band { padding: 64px 20px; }

  /* ─ Partners logos: shrink for small screens ─ */
  .partners-logos img { height: 28px; }

  /* ─ Page hero: compact on phone ─ */
  .page-hero { min-height: 200px; }
  .page-hero-content { padding: 40px 20px; }

}

/* ── Very small phones (≤380px) ── */
@media (max-width: 380px) {
  .int-grid--primary   { grid-template-columns: repeat(2, 1fr); }
  .int-grid--secondary { grid-template-columns: repeat(2, 1fr); }
}

/* The fixed #scroll-top-bar was removed in 2026 — the canonical scroll
   indicator is .scroll-progress, anchored to the bottom of the sticky nav. */

/* ============================================================
   2026 update — chrome resize, new home sections, footer icons
   Additions only. Earlier rules above this comment stand.
   ============================================================ */

/* Logo + nav font: +50% per stakeholder request */
.site-nav { height: 80px; padding: 0 40px; }
.nav-logo img { height: 48px; }
.footer-brand .nav-logo img { height: 56px; }
.nav-links a,
.nav-dropdown-trigger { font-size: 16px; letter-spacing: 1.6px; }
.nav-links { gap: 36px; }
.dropdown a { font-size: 13px; }
@media (max-width: 860px) {
  .site-nav { height: 68px; padding: 0 24px; }
  .nav-logo img { height: 40px; }
  .nav-links a,
  .nav-dropdown-trigger { font-size: 15px; }
}

/* Trust bar: dramatically larger numbers per "increase by 200%" annotation,
   plus allow wrap with 5 items so the new "#1 Business Lending CU" stat fits. */
.hero-trust-bar { row-gap: 18px; padding: 36px 0 52px; gap: 4px 0; }
.hero-trust-bar .trust-item { font-size: 18px; padding: 0 32px; gap: 10px; }
.hero-trust-bar .trust-item strong { font-size: 30px; line-height: 1.1; }
.hero-trust-bar .trust-item--wide { white-space: normal; max-width: 460px; text-align: left; line-height: 1.25; }
.hero-trust-bar .trust-item--wide .trust-lead,
.hero-trust-bar .trust-item--wide .trust-trail { white-space: nowrap; }
@media (max-width: 860px) {
  .hero-trust-bar { padding: 22px 16px 32px; }
  .hero-trust-bar .trust-item { font-size: 13px; padding: 0 14px; border-right: none; }
  .hero-trust-bar .trust-item strong { font-size: 22px; }
  .hero-trust-bar .trust-item--wide { max-width: none; text-align: center; }
}

/* ----- Cinematic product fan — 5-slot panoramic carousel ----- */
/* All scenes live in the DOM; JS assigns each one a data-slot ("center",
   "left1", "right1", "left2", "right2", or "hidden") based on its distance
   from the active scene. Every interval the assignment rotates so each
   capability passes through the spotlight. CSS does the visual work. */
.product-fan {
  position: relative;
  z-index: 9;
  width: min(1280px, 100vw);
  margin: 8px auto 0;
  padding: 60px 0 8px; /* top padding so the full-size center card (scale 1) fits inside without clipping the chrome */
  overflow: visible;
}
.fan-stage {
  position: relative;
  display: block;
  perspective: 1600px;
  height: 380px;
}
.fan-card {
  position: absolute;
  bottom: 0;
  left: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-sub);
  border-radius: 12px;
  overflow: hidden;
  transform-origin: bottom center;
  /* Same width + margin for every slot — only transform changes between
     slots, so the browser never reflows layout and the transition stays silky. */
  width: 640px;
  margin-left: -320px;
  /* Only animate compositor-friendly properties (transform, opacity, box-shadow).
     Filter is paint-bound and was removed from the transition list — slot-state
     filter values still apply, they just snap rather than tween. */
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity   0.9s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.9s ease;
  /* Default = hidden (off-stage right) so cards entering for the first
     time slide in cleanly. JS reassigns data-slot once initialized. */
  transform: translateX(220%) scale(0.55);
  opacity: 0;
  pointer-events: none;
}
.fan-card .fan-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg-card2);
  border-bottom: 1px solid var(--white-a04);
  height: 32px;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}
.fan-card .fan-chrome span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.fan-card .fan-chrome span:nth-child(1) { background: var(--chrome-red); }
.fan-card .fan-chrome span:nth-child(2) { background: var(--chrome-yellow); }
.fan-card .fan-chrome span:nth-child(3) { background: var(--chrome-green); }
.fan-card img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg-deep);
  position: relative;
  z-index: 1;
}

/* CENTER — full size, fully opaque, glowing orange shadow.
   will-change scoped to the slots that actually animate (center + adjacent),
   so we don't pay the layer-promotion cost on every off-stage card. */
.fan-card[data-slot="center"] {
  z-index: 5;
  opacity: 1;
  filter: none;
  transform: translateX(0) rotateY(0deg) scale(1);
  pointer-events: auto;
  will-change: transform, opacity;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.6),
    0 8px 28px rgba(0,0,0,0.45),
    0 0 0 1px var(--orange-a22),
    0 0 80px -10px var(--orange-a42);
}

/* MID — flanking the center, scaled to ~75%, perspective rotated, partial opacity */
.fan-card[data-slot="left1"],
.fan-card[data-slot="right1"] {
  z-index: 3;
  opacity: 0.78;
  filter: saturate(0.9);
  pointer-events: auto;
  will-change: transform, opacity;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}
.fan-card[data-slot="left1"]  { transform: translateX(-49%) rotateY(14deg) scale(0.75); }
.fan-card[data-slot="right1"] { transform: translateX(49%)  rotateY(-14deg) scale(0.75); }

/* EDGE — outer cards, scaled to ~58%, more rotation, half-faded */
.fan-card[data-slot="left2"],
.fan-card[data-slot="right2"] {
  z-index: 1;
  opacity: 0.42;
  filter: saturate(0.65) brightness(0.85);
  pointer-events: none;
}
.fan-card[data-slot="left2"]  { transform: translateX(-94%) rotateY(22deg) scale(0.58); }
.fan-card[data-slot="right2"] { transform: translateX(94%)  rotateY(-22deg) scale(0.58); }

/* HIDDEN — off-stage. Two flavors so cards exit/enter on the correct side. */
.fan-card[data-slot="hidden-left"]  { transform: translateX(-145%) rotateY(28deg)  scale(0.5); opacity: 0; pointer-events: none; }
.fan-card[data-slot="hidden-right"] { transform: translateX(145%)  rotateY(-28deg) scale(0.5); opacity: 0; pointer-events: none; }
/* Wrap-around: skip the transition when a card jumps from one hidden side
   to the other so the long traversal at opacity 0 never costs paint cycles.
   The attribute selector wins on specificity vs. .fan-card alone, so no !important needed. */
.fan-card[data-skip-transition] { transition: none; }

/* Scene labels — only the active scene's label is visible. */
.fan-scene-labels {
  position: relative;
  height: 32px;
  margin-top: 18px;
  text-align: center;
}
.fan-scene-labels span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-2);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.fan-scene-labels span.active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .fan-card { transition: none; }
}

/* Tablet — narrower base width; edge cards still render but are tighter. */
@media (max-width: 1100px) {
  .fan-card { width: 560px; margin-left: -280px; }
  .fan-card[data-slot="left2"],
  .fan-card[data-slot="right2"] { opacity: 0; pointer-events: none; }
  .fan-card[data-slot="left1"]  { transform: translateX(-50%) rotateY(12deg) scale(0.7); }
  .fan-card[data-slot="right1"] { transform: translateX(50%)  rotateY(-12deg) scale(0.7); }
  .fan-stage { height: 340px; }
}

/* Mobile — single centered card, no perspective */
@media (max-width: 720px) {
  .product-fan { padding: 20px 0 8px; }
  .fan-stage { height: 320px; padding: 0 16px; perspective: none; }
  .fan-card {
    width: calc(100% - 32px);
    max-width: 520px;
    margin-left: 0;
    left: 16px;
  }
  .fan-card[data-slot="left1"],
  .fan-card[data-slot="right1"],
  .fan-card[data-slot="left2"],
  .fan-card[data-slot="right2"] { opacity: 0; pointer-events: none; }
  .fan-card[data-slot="center"] {
    box-shadow:
      0 16px 40px rgba(0,0,0,0.55),
      0 0 0 1px var(--orange-a28);
  }
}

/* ----- Customer Outcomes — editorial metric-hero ----- */
/* Asymmetric grid: featured card on the left spans both rows; two compact
   support cards stack on the right. Each card leads with the headline
   metric set in display type — the customer name is the source line and
   the quote becomes secondary evidence beneath. Pattern intentionally
   breaks the "three identical tiles" template. */
.outcomes-carousel {
  position: relative;
  width: min(1180px, 92vw);
  margin: 0 auto;
}
/* Two-row newspaper layout: full-bleed hero on top with internal 2-col
   split (stat block ↔ supporting quote), two compact support cards below.
   Avoids the row-span height-matching problem and reads like an editorial
   feature page. */
.outcomes-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
.outcome-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  padding: 24px 24px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-sub);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.3s ease, transform 0.3s cubic-bezier(.2,.7,.2,1);
}
.outcome-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--orange-a06) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
  pointer-events: none;
}
.outcome-card:hover,
.outcome-card:focus-visible {
  border-color: var(--orange-a35);
  transform: translateY(-3px);
}
.outcome-card:hover::before,
.outcome-card:focus-visible::before {
  opacity: 1;
}
.outcome-card:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* Featured hero — spans full width, splits internally into a stat block
   (left: logo + metric + caption) and an evidence block (right: quote +
   attribution + cta). Sizes to its content; no empty space games. */
.outcome-card--featured {
  grid-column: 1 / -1;
  grid-template-rows: auto;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: 40px;
  row-gap: 20px;
  padding: 30px 34px;
  background:
    radial-gradient(70% 100% at 0% 0%, var(--orange-a08), transparent 65%),
    var(--bg-card);
  border-color: var(--orange-a22);
  align-items: center;
}
.outcome-card--featured .outcome-stat {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.outcome-card--featured .outcome-evidence {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  border-left: 1px solid var(--border-sub);
  padding-left: 32px;
}
.outcome-card--featured .outcome-foot {
  border-top: none;
  padding-top: 0;
}

/* Logo lockup — restores brand color on a soft chip so the customer is
   recognizable, not silhouetted. Explicit height on the IMG keeps SVG
   logos without intrinsic w/h (e.g. macu.svg) from collapsing. */
.outcome-logo {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.96);
  border-radius: 3px;
  width: fit-content;
}
.outcome-logo img {
  height: 24px !important;
  width: auto;
  max-width: 130px !important;
  object-fit: contain;
  display: block;
}
.outcome-card--featured .outcome-logo {
  height: 44px;
  padding: 6px 12px;
}
.outcome-card--featured .outcome-logo img {
  height: 30px !important;
  max-width: 160px !important;
}

/* THE HERO — the metric set as editorial display type */
.outcome-metric {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.85rem, 2.7vw, 2.5rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--text);
  margin: 0;
  text-wrap: balance;
  font-feature-settings: "ss01", "tnum";
}
.outcome-card--featured .outcome-metric {
  font-size: clamp(2.8rem, 5vw, 4.4rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
}
.outcome-metric .metric-accent,
.outcome-quote .metric-accent {
  color: var(--orange);
}
.outcome-quote .metric-accent {
  font-weight: 600;
}

/* Source line: small caps citation immediately under the number */
.outcome-source {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.outcome-source::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--orange-a42);
  flex: 0 0 auto;
}
.outcome-card--featured .outcome-source { font-size: 12px; }

/* Secondary evidence — the quote, demoted to body text */
.outcome-quote {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
  border-left: 2px solid var(--orange-a22);
  padding-left: 14px;
}
.outcome-card--featured .outcome-quote {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  border-left: none;
  padding-left: 0;
  font-style: italic;
}
.outcome-card--featured .outcome-quote::before {
  content: "\201C";
  font-family: var(--font-display);
  font-style: normal;
  font-size: 2.4em;
  line-height: 0;
  color: var(--orange);
  vertical-align: -0.35em;
  margin-right: 6px;
}

/* Footer: company + read-more affordance, persistent so touch users see it */
.outcome-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--border-sub);
  font-size: 13px;
  color: var(--text-2);
}
.outcome-company {
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.outcome-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--orange);
  text-transform: uppercase;
}
.outcome-cta svg {
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1);
}
.outcome-card:hover .outcome-cta svg,
.outcome-card:focus-visible .outcome-cta svg {
  transform: translateX(4px);
}

.outcomes-cta {
  display: flex;
  justify-content: flex-start;
  margin-top: 28px;
}

@media (max-width: 920px) {
  .outcomes-grid { grid-template-columns: 1fr; gap: 14px; }
  .outcome-card { padding: 22px 20px 18px; }
  .outcome-card--featured {
    grid-template-columns: 1fr;
    padding: 26px 22px 22px;
    column-gap: 0;
    row-gap: 18px;
  }
  .outcome-card--featured .outcome-evidence {
    border-left: none;
    border-top: 1px solid var(--border-sub);
    padding-left: 0;
    padding-top: 18px;
  }
  .outcome-card--featured .outcome-metric {
    font-size: clamp(2.6rem, 9vw, 3.6rem);
  }
  .outcomes-cta { justify-content: center; }
}

/* ── FOOTER CONTACT & FOLLOW — unified icon row ──
   Phone, email, LinkedIn, YouTube all read as "ways to reach us" — present
   them as a single horizontal row of identical 44×44 chips so the section
   looks like one purposeful set instead of two unrelated groups. Phone +
   email keep their visible text in .sr-only so crawlers can't scrape them
   as plain text; the aria-label still announces the destination. */
/* Force the Contact & Follow column to centre its own content. Using
   flex-column on the column itself (not just text-align on children) wins
   regardless of cascade weirdness — every child element centres on the
   column's horizontal axis, and the icons row centres within itself.
   !important on each rule because earlier shims and grid alignment kept
   pulling things back to the left edge under Elementor's wrappers. */
.footer-col.footer-col--icons,
.footer-col:has(.footer-icons) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
}
.footer-col.footer-col--icons > *,
.footer-col:has(.footer-icons) > * {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.footer-icons {
  display: inline-flex !important;     /* shrink-wraps to icons' total width so the row is itself a centred element */
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 8px auto 0 !important;
  width: auto !important;
}
.footer-icon {
  /* Use position-based centering instead of inline-flex so the SVG sits at
     the geometric centre of the chip — no baseline offset, no inline-flex
     wrapping rounding, no Elementor padding can throw it off. */
  position: relative;
  display: inline-block;
  /* WCAG 2.5.5: 44×44 hit area on every input mode; SVG stays at 18px. */
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--white-a04);
  border: 1px solid var(--white-a08);
  color: var(--text-2);
  text-decoration: none;
  margin: 0;
  box-sizing: border-box;
  vertical-align: middle;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-icon svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  /* Translate by exactly half the SVG's own size so the SVG's geometric
     centre lands on the chip's geometric centre. */
  transform: translate(-50%, -50%);
  display: block;
  flex-shrink: 0;
}
.footer-icon:hover,
.footer-icon:focus-visible {
  background: var(--orange-a18);
  border-color: var(--orange);
  color: var(--orange);
  /* Lift via the chip itself; the inner SVG keeps its translate(-50%,-50%)
     centring untouched (we don't transform the SVG on hover). */
  transform: translateY(-2px);
}
.footer-icon:active { transform: translateY(0); }

/* ── Mobile (≤640px): more breathing room between targets so thumbs don't
   bridge two icons. The 14px gap keeps centre-to-centre at 58px which is
   above the iOS HIG comfortable-tap minimum. ── */
@media (max-width: 640px) {
  .footer-icons { gap: 14px; }
}

/* ── Reduced motion: kill the lift micro-interaction ── */
@media (prefers-reduced-motion: reduce) {
  .footer-icon { transition: background 0.2s, border-color 0.2s, color 0.2s; }
  .footer-icon:hover,
  .footer-icon:focus-visible { transform: none; }
}

/* ── Backwards compatibility shims ──
   .contact-link / .contact-link--icon-only and .social-links a are mapped
   to the new .footer-icon look so any unsynced template renders the same
   unified row until it's restructured to use .footer-icons / .footer-icon. */
.footer-col .contact-link--icon-only,
.footer-col .social-links a {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--white-a04);
  border: 1px solid var(--white-a08);
  color: var(--text-2);
  text-decoration: none;
  margin: 0;
  box-sizing: border-box;
  vertical-align: middle;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-col .contact-link--icon-only svg,
.footer-col .social-links a svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  display: block;
}
.footer-col .contact-link--icon-only:hover,
.footer-col .contact-link--icon-only:focus-visible,
.footer-col .social-links a:hover,
.footer-col .social-links a:focus-visible {
  background: var(--orange-a18);
  border-color: var(--orange);
  color: var(--orange);
  transform: translateY(-2px);
}
.footer-col .social-links { display: flex; gap: 12px; margin-top: 6px; }

/* ── ABOUT ON HOME — editorial profile spread + rope team ── */
.home-about {
  /* Inherit vertical padding from `.section`. The previous clamp() override
     used `!important` and stacked an extra 56px of padding-block on wide
     viewports, which read as excess whitespace once the widget was wrapped
     in Elementor's section/column. Standardise on `.section`'s 72px. */
}

/* Eyebrow gets a short hairline trailing rule so it reads like a section index */
.home-about > .label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.home-about > .label::after {
  content: "";
  width: clamp(40px, 6vw, 88px);
  height: 1px;
  background: var(--orange-a35);
  flex-shrink: 0;
}

/* Two-column lead: copy on the left, founder portrait on the right */
.home-about-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  margin-top: 28px;
}
.home-about-lead h2 {
  text-wrap: balance;
  margin: 0;
}
.home-about-copy {
  max-width: 52ch;
}
.home-about-copy p {
  margin-top: 22px;
  color: var(--text-2);
}

/* Pull-quote — editorial, no card chrome, scoped override of the global quote-block */
.home-about .quote-block {
  margin-top: 36px;
  padding: 4px 0 4px 22px;
  background: transparent;
  border: 0;
  border-left: 2px solid var(--orange);
  border-radius: 0;
}
.home-about .quote-block blockquote {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.45;
  font-style: normal;
  color: var(--text);
  margin: 0;
}
.home-about .quote-block cite {
  display: block;
  margin-top: 14px;
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.5px;
  color: var(--text-3);
  text-transform: none;
  font-weight: 500;
}

/* Lead founder portrait — editorial crop with orange corner marks */
.lead-founder {
  position: relative;
  margin-top: 6px;
  max-width: 420px;
  justify-self: end;
  width: 100%;
}
.lead-founder-portrait {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-card2);
  border: 1px solid var(--border-sub);
  overflow: hidden;
}
.lead-founder-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.lead-founder-portrait::before,
.lead-founder-portrait::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid var(--orange);
  pointer-events: none;
}
.lead-founder-portrait::before {
  top: -1px; left: -1px;
  border-right: 0;
  border-bottom: 0;
}
.lead-founder-portrait::after {
  bottom: -1px; right: -1px;
  border-left: 0;
  border-top: 0;
}
.lead-founder-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-sub);
}
.lead-founder-meta .name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.lead-founder-meta .role {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
}

/* ── CLIENT EXPERIENCE SPOTLIGHT — typographic band ─────────────
   No portrait. The section earns its place by *committing*: a
   giant declarative headline above three concrete promises, each
   marked by an orange hairline, capped by a magazine-byline
   signature. The brand metaphor (rope team, cadence, climb) lives
   in the lede so the section still belongs to the home rhythm.
   Headline scales to clamp(40, 6.4vw, 80) — bigger than other
   home H2s — because this section has no image to do the heavy
   lifting; the type IS the image. */
.cx-spotlight > .label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(28px, 3vw, 40px);
}
.cx-spotlight > .label::after {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  background: var(--orange-a35, rgba(238, 116, 26, 0.35));
}
.cx-band-head {
  max-width: 1080px;
}
.cx-band-h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 6.4vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0 0 clamp(20px, 2.4vw, 36px);
  text-wrap: balance;
}
.cx-band-h em {
  font-style: normal;
  color: var(--orange);
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
}
.cx-band-lede {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--text-2);
  max-width: 60ch;
  margin: 0;
}

.cx-commitments {
  list-style: none;
  margin: clamp(56px, 7vw, 96px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 56px);
}
.cx-commit {
  padding-top: clamp(20px, 2.2vw, 28px);
  border-top: 1px solid var(--orange);
}
.cx-commit-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.18em;
  color: var(--orange);
  margin-bottom: 14px;
}
.cx-commit-lead {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 12px;
  text-wrap: balance;
}
.cx-commit-detail {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-3);
  margin: 0;
  max-width: 32ch;
}

.cx-sig {
  margin-top: clamp(48px, 6vw, 80px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}
.cx-sig-rule {
  display: block;
  flex: 0 0 auto;
  width: 80px;
  height: 1px;
  background: var(--orange);
}
.cx-sig-line {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--text-2);
  margin: 0;
  text-align: right;
}

@media (max-width: 760px) {
  .cx-commitments {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .cx-sig {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }
  .cx-sig-line { text-align: left; }
  .cx-sig-rule { width: 48px; }
}

/* ── Rope team — founders connected by a thin alpine hairline ── */
.founders-row {
  margin-top: clamp(40px, 5vw, 72px);
}
/* On the WP home page the rope team is its own widget/section, rendered
   immediately after .home-about. The two stacked .section paddings (72px
   bottom + 72px top) plus .founders-row's own 72px margin-top read as a
   huge gap, while the static HTML keeps .founders-row inside .home-about
   so only the 72px margin-top separates them. Collapse the duplicated
   padding so the WP layout matches. */
.founders-row-section {
  padding-top: 0;
}
.founders-row-section .founders-row {
  margin-top: 0;
}

/* Elementor's per-post CSS sets `.elementor-element { --widgets-spacing: 20px }`,
   which becomes a flex `gap` between sibling widgets inside a column. Our
   .section wrappers already control vertical rhythm — neutralise the variable
   on every widget-wrap so Elementor never injects an extra 20px between our
   stacked widgets, regardless of what the page-level seeder writes. Same
   effect as toggling Section → Layout → Widgets Space to 0 in the editor. */
.elementor-widget-wrap {
  --widgets-spacing: 0;
  --widgets-spacing-row: 0;
  --widgets-spacing-column: 0;
}
.founders-row-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-sub);
  margin-bottom: 36px;
}
.founders-row-header h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 26px);
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--text);
}
.founders-row-header .index {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rope-team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 48px);
  position: relative;
}
/* the rope — single hairline behind avatars, fades at edges */
.rope-team::before {
  content: "";
  position: absolute;
  top: 60px;
  left: 60px;
  right: 60px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--orange-a22) 10%,
    var(--orange-a22) 90%,
    transparent
  );
  z-index: 0;
  pointer-events: none;
}

.founder {
  position: relative;
  z-index: 1;
}
.founder-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border-sub);
  background: var(--bg-card2);
  margin-bottom: 22px;
  /* knock the rope out from behind the avatar */
  box-shadow: 0 0 0 6px var(--bg-deep);
}
.founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.founder-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 4px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.founder-role {
  font-size: 13px;
  color: var(--orange);
  margin: 0 0 12px;
  font-weight: 500;
}
.founder-bio {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-3);
  margin: 0 0 16px;
  max-width: 26ch;
}
.founder-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid var(--border-sub);
  padding-bottom: 4px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.founder-link:hover {
  color: var(--orange);
  border-color: var(--orange);
}
.founder-link svg {
  flex-shrink: 0;
}

/* Responsive — collapse two-column lead, drop the rope on narrow viewports */
@media (max-width: 960px) {
  .home-about-lead {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .lead-founder {
    max-width: 360px;
    justify-self: start;
  }
  .rope-team {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 24px;
  }
  .rope-team::before {
    display: none;
  }
}
@media (max-width: 520px) {
  .rope-team {
    grid-template-columns: 1fr;
  }
  .founder-bio {
    max-width: 38ch;
  }
}

/* When an assigned Elementor Theme Builder template renders the header,
   <nav class="site-nav"> is nested inside Elementor's section wrappers. That
   makes the nav's `position:sticky` containing block the ~80px header section
   instead of <body>, so the nav (and its child .scroll-progress bar) scrolls
   away after one nav-height — only the fixed #scroll-top-bar stays. Pin the
   Elementor header location wrapper itself so the nav stays fixed across the
   whole page, exactly like header.php does on the homepage. .site-nav keeps
   its own `position:sticky` so it remains the containing block for the
   absolutely-positioned .scroll-progress bar. */
.elementor-location-header,
[data-elementor-type="header"] {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* ── SCROLL PROGRESS BAR (sits under sticky nav) ── */
.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.scroll-progress__bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--orange), #ffb066);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 80ms linear;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress__bar { transition: none; }
}

/* ─── Newsletter subscribe popup ─────────────────────────────────────
   Opened from the footer "Get Updates" form. On WP, the theme calls
   Elementor Pro's popup API when an ID is configured; this inline modal
   is the static design reference and the fallback when no ID is set. */
.mys-newsletter-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.mys-newsletter-popup[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}
.mys-newsletter-popup[hidden] { display: none; }
.mys-newsletter-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 11, 20, 0.72);
  backdrop-filter: blur(2px);
}
.mys-newsletter-popup__card {
  position: relative;
  width: min(100%, 460px);
  background: #fafbff;
  color: var(--text-ink);
  border: 1px solid rgba(249, 115, 22, 0.18);
  border-radius: 14px;
  padding: 60px 30px 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  font-family: 'DM Sans', system-ui, sans-serif;
  overflow: hidden;
}
/* Mountain-ridge band — keys the popup to mysherpas's trail-marker glyph
   and replaces the generic-modal navy border with brand-anchored crown.
   Two ridges (far + near) plus an orange stroke on top. */
.mys-newsletter-popup__ridge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  pointer-events: none;
}
.mys-newsletter-popup__ridge svg {
  display: block;
  width: 100%;
  height: 100%;
}
.mys-newsletter-popup__ridge-far  { fill: rgba(249, 115, 22, 0.10); }
.mys-newsletter-popup__ridge-near { fill: rgba(249, 115, 22, 0.22); }
.mys-newsletter-popup__ridge-line {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.mys-newsletter-popup__close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.mys-newsletter-popup__close:hover { color: var(--text-ink); background: rgba(0, 0, 0, 0.04); }
.mys-newsletter-popup__close svg { display: block; }
.mys-newsletter-popup__title {
  margin: 0 0 8px;
  text-align: center;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--text-ink);
  letter-spacing: -0.01em;
}
.mys-newsletter-popup__sub {
  margin: 0 0 22px;
  text-align: center;
  color: var(--text-body-light);
  font-size: 14px;
  line-height: 1.55;
}
.mys-newsletter-popup__sub em { font-style: italic; }
.mys-newsletter-popup__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mys-newsletter-popup__form input {
  appearance: none;
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: #fff;
  color: var(--text-ink);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mys-newsletter-popup__form input::placeholder { color: var(--text-3); }
.mys-newsletter-popup__form input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-a18);
}
/* Email is the field that maps to the value exchange — heavier border so
   it reads as the "real" field even when it sits below the optional ones. */
.mys-newsletter-popup__email {
  border-width: 1.5px;
  border-color: rgba(26, 32, 48, 0.22);
}
/* Name row — single column by default (newsletter); side-by-side under
   the case-study variant where last name is shown. */
.mys-newsletter-popup__field-row { display: contents; }
.mys-newsletter-popup__form [data-popup-extra-field] { display: none; }
.mys-newsletter-popup--case-study .mys-newsletter-popup__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mys-newsletter-popup--case-study .mys-newsletter-popup__form [data-popup-extra-field] {
  display: block;
}
.mys-newsletter-popup__btn {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 22px;
  border-radius: 8px;
  border: 1.5px solid var(--orange);
  background: var(--orange);
  color: #fff;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mys-newsletter-popup__btn:hover {
  background: var(--orange-dk);
  border-color: var(--orange-dk);
}
.mys-newsletter-popup__btn-icon { display: none; }
.mys-newsletter-popup[data-icon="arrow"]    .mys-newsletter-popup__btn-icon--arrow,
.mys-newsletter-popup[data-icon="download"] .mys-newsletter-popup__btn-icon--download {
  display: inline-block;
}
/* Case-study variant — left-aligned, larger heading; subtitle italic.
   Toggled by adding `.mys-newsletter-popup--case-study` (see js/site.js). */
.mys-newsletter-popup--case-study .mys-newsletter-popup__title {
  text-align: left;
  font-size: 24px;
  line-height: 1.25;
}
.mys-newsletter-popup--case-study .mys-newsletter-popup__sub {
  font-style: italic;
}
.mys-newsletter-popup__success {
  display: none;
  text-align: center;
  padding: 12px 0 6px;
  color: var(--text-body-light);
  font-size: 14px;
}
.mys-newsletter-popup__success strong {
  display: block;
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--text-ink);
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 700;
}
.mys-newsletter-popup--success .mys-newsletter-popup__form,
.mys-newsletter-popup--success .mys-newsletter-popup__disclosure { display: none; }
.mys-newsletter-popup--success .mys-newsletter-popup__success { display: block; }
.mys-newsletter-popup__disclosure {
  margin-top: 18px;
  font-size: 11px;
  color: var(--text-body-light);
  line-height: 1.55;
}
.mys-newsletter-popup__disclosure-title {
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--text-ink);
  font-size: 11.5px;
}
.mys-newsletter-popup__disclosure ul {
  margin: 0;
  padding-left: 18px;
}
.mys-newsletter-popup__disclosure li { margin: 0 0 2px; }
@media (prefers-reduced-motion: reduce) {
  .mys-newsletter-popup { transition: none; }
}

/* ─── Case-studies page (editorial layout) ──────────────────────────
   Asymmetric featured + secondary card composition; no value-prop trio,
   no stock-photo hero. The featured card carries a real partner logo and
   spans the full grid width with a 2-column lede / pull-quote split. */
.page-hero--case-studies {
  justify-content: flex-start;
  text-align: left;
  background-color: var(--bg-deep);
  min-height: auto;
  padding: 0;
}
.page-hero--case-studies .page-hero-bg,
.page-hero--case-studies .page-hero-bg::after { display: none; }
.page-hero--case-studies .page-hero-content {
  text-align: left;
  padding: clamp(64px, 10vw, 110px) 24px clamp(28px, 5vw, 48px);
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.page-hero--case-studies h1 {
  font-size: clamp(34px, 5.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 12px 0 18px;
  max-width: 14ch;
}
.page-hero--case-studies p {
  margin: 0;
  max-width: 56ch;
  color: var(--text-2);
  font-size: clamp(15px, 1.5vw, 17px);
}

.cs-grid--editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin-top: 32px;
}
/* Secondary cards group themselves into a 2-up sub-grid beneath the
   featured row. Designed for N posts: 1 secondary stays half-width,
   2 fill the row, 3+ wrap. Stacks on narrow viewports. */
.cs-grid__secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.cs-card {
  background: var(--bg-card);
  border: 1px solid var(--border-sub);
  border-radius: var(--radius-lg);
  padding: 36px;
  display: flex;
  flex-direction: column;
}
.cs-card__headline {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 0 14px;
}
.cs-card__summary {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 24px;
  max-width: 56ch;
}
.cs-card__cta {
  align-self: flex-start;
  margin-top: auto;
}

/* Featured card — full-bleed row with 2-col lede + pull-quote layout */
.cs-card--featured {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  padding: clamp(36px, 5vw, 56px);
  border: 1px solid var(--border);
  background: linear-gradient(155deg, var(--bg-card) 0%, var(--bg-card2) 100%);
  position: relative;
  overflow: hidden;
}
.cs-card--featured::before {
  content: '';
  position: absolute;
  top: 24px;
  right: -10px;
  width: 220px;
  height: 60px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 60'><path d='M0 60 L40 32 L88 42 L132 18 L168 30 L200 12 L220 26 L220 60 Z' fill='rgba(249,115,22,0.06)'/><path d='M0 60 L40 32 L88 42 L132 18 L168 30 L200 12 L220 26' fill='none' stroke='rgba(249,115,22,0.32)' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
  pointer-events: none;
}
.cs-card--featured .cs-card__lede {
  display: flex;
  flex-direction: column;
}
.cs-card__logo-img {
  height: 36px;
  width: auto;
  object-fit: contain;
  margin: 0 0 22px;
  filter: brightness(1.05);
}
.cs-card__eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 12px;
  font-weight: 700;
}
.cs-card--featured .cs-card__headline {
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.18;
}
.cs-card__quote {
  margin: 0;
  padding: 0;
  border-left: 3px solid var(--orange);
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cs-card__quote p {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.4;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.cs-card__quote p::before { content: '\201C'; margin-right: 2px; }
.cs-card__quote p::after  { content: '\201D'; margin-left: 2px; }
.cs-card__cite {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 700;
}

/* Secondary card — quieter; wordmark logo + coming-soon tag */
.cs-card--secondary { padding: 32px; }
.cs-card--secondary .cs-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-sub);
}
.cs-card--secondary .cs-card__headline {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.3;
}
.cs-logo--wordmark {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  letter-spacing: -0.005em;
  margin: 0;
}
.cs-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--orange-a35);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  background: var(--orange-a06);
  white-space: nowrap;
}

@media (max-width: 880px) {
  .cs-card--featured {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .cs-card__quote {
    border-left: 0;
    border-top: 3px solid var(--orange);
    padding: 22px 0 0;
  }
  .cs-grid__secondary { grid-template-columns: 1fr; }
}

.cta-band-cta { color: #fff; }


/* ============================================================
   Elementor Pro popup skin — applied only to popups the editor
   tagged with the `mys-popup` CSS class (Popup → Advanced).
   Mirrors the inline-modal (.mys-newsletter-popup) look so the
   production Elementor Forms match the current design. The JS
   decorator injects .mys-popup-ridge / .mys-popup-disclosure.
   ============================================================ */
.elementor-popup-modal:has(.mys-popup),
.elementor-popup-modal.mys-popup-modal {
  background: rgba(6, 11, 20, 0.72) !important;
  backdrop-filter: blur(2px);
}
.elementor-popup-modal .mys-popup {
  position: relative;
  width: min(100%, 460px);
  margin: 0 auto;
  background: #fafbff;
  color: var(--text-ink);
  border: 1px solid rgba(249, 115, 22, 0.18);
  border-radius: 14px;
  padding: 60px 30px 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  font-family: 'DM Sans', system-ui, sans-serif;
  overflow: hidden;
}
.mys-popup-ridge {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 36px;
  pointer-events: none;
}
.mys-popup-ridge svg { display: block; width: 100%; height: 100%; }
.mys-popup-ridge .mys-newsletter-popup__ridge-far  { fill: rgba(249, 115, 22, 0.10); }
.mys-popup-ridge .mys-newsletter-popup__ridge-near { fill: rgba(249, 115, 22, 0.22); }
.mys-popup-ridge .mys-newsletter-popup__ridge-line {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.elementor-popup-modal .mys-popup h1,
.elementor-popup-modal .mys-popup h2,
.elementor-popup-modal .mys-popup h3 {
  margin: 0 0 8px;
  text-align: center;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--text-ink);
  letter-spacing: -0.01em;
}
.elementor-popup-modal .mys-popup .elementor-form .elementor-field-group { margin-bottom: 10px; }
.elementor-popup-modal .mys-popup .elementor-field-textual {
  appearance: none;
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: #fff;
  color: var(--text-ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.elementor-popup-modal .mys-popup .elementor-field-textual:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-a18);
}
.elementor-popup-modal .mys-popup .elementor-button,
.elementor-popup-modal .mys-popup button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 22px;
  border-radius: 8px;
  border: 1.5px solid var(--orange);
  background: var(--orange);
  color: #fff;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.elementor-popup-modal .mys-popup .elementor-button:hover,
.elementor-popup-modal .mys-popup button[type="submit"]:hover {
  background: var(--orange-dk);
  border-color: var(--orange-dk);
}
.elementor-popup-modal .mys-popup .elementor-message.elementor-message-success {
  text-align: center;
  padding: 12px 0 6px;
  color: var(--text-body-light);
  font-size: 14px;
  font-family: 'Manrope', system-ui, sans-serif;
}
.mys-popup-disclosure {
  margin-top: 18px;
  font-size: 11px;
  color: var(--text-body-light);
  line-height: 1.55;
}
.mys-popup-disclosure .mys-newsletter-popup__disclosure-title {
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--text-ink);
  font-size: 11.5px;
}
.mys-popup-disclosure ul { margin: 0; padding-left: 18px; }
.mys-popup-disclosure li { margin: 0 0 2px; }