/* ==========================================================================
   iter2.css — v4: Sovereign Thread + seamless section flow + richer embeds
   Adds to v3: (1) #i4-thread vertical scroll-drawn network conduit with
   section nodes & pulses; (2) seamless page: one continuous body wash,
   transparent sections, feathered ink band, hero fades into the page;
   (3) terminal typewriter line, icon draw-ins, gradient border sweep,
   proof-bar float. All heavy motion gated by prefers-reduced-motion.
   ========================================================================== */

:root {
  --i2-grad-a: #7c3aed;             /* violet */
  --i2-grad-b: #06b6d4;             /* cyan */
  --i2-mint:   #7ef0c0;             /* bright mint (on-dark accent) */
  --i2-green:  #14a44d;             /* brand green anchor */
  --i2-ink:    #0b1f15;             /* deep green-ink */
  --i2-glow: rgba(124, 58, 237, .30);
  --i2-glow-soft: rgba(6, 182, 212, .16);
}
[data-bs-theme="light"] { --i4-base: #f8fbf9; }
[data-bs-theme="dark"]  { --i4-base: var(--bs-body-bg); }

/* ==========================================================================
   SEAMLESS FLOW — one continuous page wash, no per-section seams
   ========================================================================== */
[data-bs-theme="light"] body {
  background-color: #f8fbf9;
  background-image:
    radial-gradient(1000px 520px at 88% 6%,  rgba(6, 182, 212, .06), transparent 60%),
    radial-gradient(900px 520px at 4% 28%,  rgba(20, 164, 77, .07), transparent 60%),
    radial-gradient(900px 520px at 92% 55%, rgba(124, 58, 237, .05), transparent 60%),
    radial-gradient(900px 520px at 8% 82%,  rgba(6, 182, 212, .06), transparent 60%);
}
[data-bs-theme="dark"] body {
  background-image:
    radial-gradient(1100px 580px at 85% -5%, rgba(124, 58, 237, .13), transparent 60%),
    radial-gradient(900px 520px at -10% 30%, rgba(6, 182, 212, .09), transparent 60%),
    radial-gradient(1000px 560px at 90% 70%, rgba(20, 164, 77, .07), transparent 60%);
  background-attachment: fixed;
}

/* sections become transparent panes over the continuous wash */
[data-bs-theme="light"] .cs-section,
[data-bs-theme="light"] .cs-section-light,
[data-bs-theme="light"] .cs-proof-bar,
[data-bs-theme="dark"] .cs-section,
[data-bs-theme="dark"] .cs-section-light,
[data-bs-theme="dark"] .cs-proof-bar {
  background: transparent !important;
}

/* the intentionally-dark band stays, but with feathered edges (no hard seam) */
.cs-section-dark {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
}
[data-bs-theme="light"] .cs-section-dark {
  background: linear-gradient(180deg,
    rgba(11, 31, 21, 0) 0,
    var(--i2-ink) 120px,
    var(--i2-ink) calc(100% - 120px),
    rgba(11, 31, 21, 0) 100%) !important;
}
[data-bs-theme="dark"] .cs-section-dark {
  background: linear-gradient(180deg,
    transparent 0,
    rgba(255, 255, 255, .035) 120px,
    rgba(255, 255, 255, .035) calc(100% - 120px),
    transparent 100%) !important;
}

/* ==========================================================================
   HERO — contrast (v3) + fade into the page base (v4 seamless)
   ========================================================================== */
.cs-hero { position: relative; overflow: hidden; }

#i2-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .32;
  will-change: transform;
}

/* scrim (text legibility) + bottom blend into the continuous page wash */
.cs-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 84%, var(--i4-base) 100%),
    linear-gradient(100deg,
      rgba(4, 22, 14, .55) 0%,
      rgba(4, 22, 14, .28) 42%,
      rgba(4, 22, 14, .05) 68%,
      transparent 85%);
  pointer-events: none;
}
.cs-hero .container { position: relative; z-index: 1; }

.cs-hero-title {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  color: #fff !important;
  text-shadow: 0 2px 28px rgba(0, 0, 0, .35);
  letter-spacing: -.02em;
}
.cs-hero-title .i3-grad {
  background: linear-gradient(92deg, var(--i2-mint), var(--i2-grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
}
.cs-hero-subtitle { color: rgba(255, 255, 255, .92) !important; }
.cs-hero .cs-eyebrow {
  color: var(--i2-mint) !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
}
.cs-hero .cs-metric strong { color: #fff; }
.cs-hero .cs-metric span { color: rgba(255, 255, 255, .78); }

/* ==========================================================================
   SOVEREIGN THREAD — vertical conduit (built by JS, ≥1200px only)
   ========================================================================== */
#i4-thread {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 3;
  display: none;
}
@media (min-width: 1200px) { #i4-thread { display: block; } }
#i4-thread svg {
  position: absolute;
  top: 0;
  left: max(10px, calc(50vw - 680px));
  width: 48px;
  overflow: visible;
}
.i4-node {
  opacity: .35;
  transition: opacity .5s ease;
}
.i4-node.i4-lit {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(126, 240, 192, .95));
}
.i4-ring {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}
.i4-node.i4-lit + .i4-ring { animation: i4-ping 1s ease-out 1; }
@keyframes i4-ping {
  0%   { opacity: .9; transform: scale(.4); }
  100% { opacity: 0;  transform: scale(2.4); }
}

/* ---- Scroll progress bar ---- */
#i3-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 2000;
  background: linear-gradient(90deg, var(--i2-green), var(--i2-grad-b), var(--i2-grad-a));
  border-radius: 0 2px 2px 0;
  pointer-events: none;
}

.i3-px { will-change: transform; }

/* ---- Scroll reveals ---- */
.i2-reveal { opacity: 0; transform: translateY(26px); }
.i2-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}

/* ==========================================================================
   BELOW THE FOLD — de-boxed, layered, polished (v3) on the seamless wash
   ========================================================================== */
.cs-section, .cs-cta-banner { position: relative; overflow: hidden; }
.cs-section .container, .cs-cta-banner .container { position: relative; z-index: 1; }

.i3-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  opacity: .45;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

.cs-section .card, .card {
  position: relative;
  border: 0 !important;
  border-radius: 18px;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow:
    0 1px 2px rgba(7, 21, 14, .05),
    0 14px 36px -18px rgba(7, 21, 14, .14);
}
[data-bs-theme="light"] .cs-section .card {
  background: linear-gradient(180deg, #ffffff, #fafdfb);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 2px 6px rgba(7, 21, 14, .06),
    0 22px 48px -16px rgba(20, 164, 77, .22),
    0 16px 44px -18px var(--i2-glow);
}

/* v4: gradient border sweep on hover */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg,
    transparent 15%, rgba(126, 240, 192, .9) 40%,
    rgba(6, 182, 212, .9) 60%, transparent 85%);
  background-size: 250% 250%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.card:hover::after {
  opacity: 1;
  animation: i4-sweep 1.6s linear infinite;
}
@keyframes i4-sweep {
  from { background-position: 0% 50%; }
  to   { background-position: 250% 50%; }
}

/* v4: icon stroke draw-in on reveal (lucide svg icons) */
.i2-in svg.lucide line,
.i2-in svg.lucide path,
.i2-in svg.lucide polyline,
.i2-in svg.lucide circle,
.i2-in svg.lucide rect {
  stroke-dasharray: 64;
  stroke-dashoffset: 64;
  animation: i4-drawin .9s ease-out forwards .15s;
}
@keyframes i4-drawin { to { stroke-dashoffset: 0; } }

/* v4: proof bar gentle float after reveal */
.cs-proof-bar .i2-in { animation: i4-float 7s ease-in-out 1.2s infinite alternate; }
@keyframes i4-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-4px); }
}

/* typography polish */
.cs-section h2 {
  position: relative;
  display: inline-block;
  font-weight: 800;
  letter-spacing: -.02em;
}
.cs-section h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  height: 3px;
  width: 56px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--i2-green), var(--i2-grad-b));
}
.cs-eyebrow { letter-spacing: .14em; text-transform: uppercase; }
.cs-section .lead { max-width: 64ch; }

/* hero terminal panel: halo + dots + v4 typewriter line */
.cs-hero-panel { position: relative; z-index: 1; }
.cs-hero-panel::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--i2-green), var(--i2-grad-b), var(--i2-grad-a));
  background-size: 300% 300%;
  filter: blur(10px);
  opacity: .4;
  animation: i2-halo 7s ease-in-out infinite alternate;
}
@keyframes i2-halo {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
.cs-hero-panel .cs-dot { animation: i2-dot 2.4s ease-in-out infinite; }
.cs-hero-panel .cs-dot:nth-child(2) { animation-delay: .4s; }
.cs-hero-panel .cs-dot:nth-child(3) { animation-delay: .8s; }
@keyframes i2-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.i4-term {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
  color: var(--i2-mint);
  padding: .55rem .9rem .7rem;
  min-height: 1.9em;
  opacity: .95;
}
.i4-term::after {
  content: "\258B";
  margin-left: 2px;
  animation: i4-blink 1s steps(1) infinite;
}
@keyframes i4-blink { 50% { opacity: 0; } }

/* CTAs + metrics + banner ambience */
.btn-primary { transition: box-shadow .25s ease, transform .15s ease; }
.btn-primary:hover {
  box-shadow: 0 8px 30px -8px rgba(20, 164, 77, .55), 0 6px 28px -6px var(--i2-glow);
  transform: translateY(-1px);
}
.cs-metric strong, .cs-proof-bar strong { font-variant-numeric: tabular-nums; }
.cs-cta-banner::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(closest-side, var(--i2-glow-soft), transparent 70%);
  animation: i2-breathe 8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes i2-breathe {
  from { transform: translateX(-12%) scale(1); opacity: .7; }
  to   { transform: translateX(12%) scale(1.15); opacity: 1; }
}

/* ---- Accessibility: kill heavy motion on request ---- */
@media (prefers-reduced-motion: reduce) {
  #i2-hero-canvas,
  .cs-hero-panel::before,
  .cs-cta-banner::before,
  #i3-progress,
  #i4-thread,
  .i3-orb { display: none; }
  .cs-hero-panel .cs-dot { animation: none; }
  .i4-term::after { animation: none; }
  .i2-reveal { opacity: 1; transform: none; }
  .i2-in { transition: none; }
  .i2-in svg.lucide * { animation: none; stroke-dashoffset: 0; }
  .cs-proof-bar .i2-in { animation: none; }
  .card, .btn-primary { transition: none; }
  .card:hover::after { animation: none; }
  .i3-px { transform: none !important; }
}

/* ===== v5 feedback pass ===== */
.cs-hero-title .i3-grad { background-size: 200% 100%; animation: i4-pan 7s ease-in-out infinite alternate; }
@keyframes i4-pan { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.cs-section-kicker { display: block; }
.text-start .cs-section-subtitle { margin-left: 0; margin-right: auto; max-width: 64ch; }
.cs-card, .cs-product-card, .cs-product-card-static, .cs-step-card { position: relative; transition: transform .25s ease, box-shadow .25s ease; }
.cs-card:hover, .cs-product-card:hover, .cs-product-card-static:hover, .cs-step-card:hover { transform: translateY(-5px); box-shadow: 0 2px 6px rgba(7,21,14,.06), 0 22px 48px -16px rgba(20,164,77,.22), 0 16px 44px -18px var(--i2-glow); }
@media (prefers-reduced-motion: reduce) { .cs-hero-title .i3-grad { animation: none; } .cs-card, .cs-product-card, .cs-product-card-static, .cs-step-card { transition: none; } }

/* ===== v6: hero accent visibility hardening =====
   The mint→cyan accent had near-zero contrast against the green hero
   gradient and no fallback if background-clip:text misbehaves. This makes
   the accent unmissable and failure-proof:
   - brighter tri-stop gradient (light mint → cyan → light violet)
   - !important on every declaration (nothing in portal.css can override)
   - solid mint fallback color: if text-clipping ever fails, the phrase
     renders bright mint — never white, never invisible
   - soft glow lifts the accent off the green hero background */
.cs-hero .cs-hero-title .i3-grad {
  background-image: linear-gradient(92deg, #b9ffe3 0%, #67e8f9 38%, #7ef0c0 62%, #c4b5fd 100%) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #7ef0c0 !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 16px rgba(126, 240, 192, .45));
  animation: i4-pan 5s ease-in-out infinite alternate !important;
}
@supports not (-webkit-background-clip: text) {
  .cs-hero .cs-hero-title .i3-grad {
    -webkit-text-fill-color: currentColor !important;
    background-image: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cs-hero .cs-hero-title .i3-grad { animation: none !important; filter: none; }
}

/* ===== v7 feedback pass =====
   (1) hero stack kickers readable in light mode; (2) polished dark-mode
   Partner Stack panel; (3) mirrored seam orbs (created by iter2.js). */
[data-bs-theme="light"] .cs-hero .cs-kicker,
[data-bs-theme="light"] .cs-hero-stack-card .cs-kicker {
  color: #a7f3d0 !important;            /* light mint on the green hero */
}
[data-bs-theme="dark"] .cs-hero-panel {
  background: linear-gradient(160deg, rgba(13, 27, 20, .92), rgba(9, 16, 24, .88));
  border: 1px solid rgba(110, 231, 183, .16);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6),
              0 0 44px -14px rgba(20, 164, 77, .28),
              inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(8px);
}
[data-bs-theme="dark"] .cs-hero-panel-header {
  color: rgba(236, 253, 245, .85);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
[data-bs-theme="dark"] .cs-hero-stack-card {
  background: linear-gradient(135deg, rgba(110, 231, 183, .09), rgba(6, 182, 212, .05));
  border: 1px solid rgba(110, 231, 183, .14);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
[data-bs-theme="dark"] .cs-hero-stack-card:hover {
  border-color: rgba(110, 231, 183, .38);
  transform: translateX(4px);
  box-shadow: 0 10px 30px -12px rgba(20, 164, 77, .35);
}
.i3-orb-mirror { opacity: .9; }

/* ===== v8 feedback pass =====
   (1) highlights live vertically centered INSIDE their section (JS) and are
   clipped to it; (2) page background is one flat converged colour, so every
   section boundary meets at the same value. */
[data-bs-theme="light"] body { background-image: none !important; }
[data-bs-theme="dark"]  body { background-image: none !important; }
.cs-section { position: relative; overflow: hidden; }
.cs-section-light { background: transparent !important; }
/* dark band feathers from/to the page colour, so its boundaries converge too */
[data-bs-theme="light"] .cs-section-dark {
  background: linear-gradient(180deg,
    rgba(10, 22, 16, 0) 0%, rgba(10, 22, 16, .96) 12%,
    rgba(10, 22, 16, .96) 88%, rgba(10, 22, 16, 0) 100%) !important;
}
[data-bs-theme="dark"] .cs-section-dark {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .38) 12%,
    rgba(0, 0, 0, .38) 88%, rgba(0, 0, 0, 0) 100%) !important;
}

/* ===== v9: subpage hero alignment =====
   Subpages share the homepage hero treatment (gradient banner, particle
   canvas, eyebrow, animated accent) via .cs-hero, with compact sizing. */
.cs-hero-sub { padding: 3.5rem 0 3rem; }
.cs-hero-sub .cs-hero-title { font-size: clamp(2.1rem, 4.5vw, 3rem); }
.cs-hero-sub .cs-hero-subtitle { max-width: 62ch; }

/* ===== v10: per-page themed FX (iter5-fx.js) ===== */
.cs-hero { position: relative; }
.i5-hero-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; }
.cs-hero .container { position: relative; z-index: 1; }
#i5-thread { pointer-events: none; z-index: 3; }
#i5-thread .i5-node { opacity: .3; transition: opacity .4s ease, filter .4s ease; }
#i5-thread .i5-node.lit { opacity: 1; filter: drop-shadow(0 0 6px rgba(126, 240, 192, .8)); }
@media (max-width: 1199px) { #i5-thread { display: none; } }


/* ===== v11: refined primary buttons + light-mode Voices rework ===== */
.btn-primary, .btn-outline-primary {
  border-radius: 999px !important; font-weight: 600; letter-spacing: .01em;
}
.btn-primary {
  border: 0 !important;
  background: linear-gradient(135deg, #0D8C61, #00A94F 55%, #17b96d) !important;
  box-shadow: 0 8px 22px -10px rgba(0,169,79,.55), inset 0 1px 0 rgba(255,255,255,.22);
  position: relative; overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.btn-primary:hover, .btn-primary:focus {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(0,169,79,.6), 0 8px 24px -14px rgba(6,182,212,.35);
  filter: brightness(1.06);
}
.btn-primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,.28) 50%, transparent 68%);
  transform: translateX(-130%); transition: transform .55s ease;
}
.btn-primary:hover::after { transform: translateX(130%); }
.btn-outline-primary { transition: transform .22s ease, box-shadow .22s ease; }
.btn-outline-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(0,169,79,.4); }
/* Voices from our partners: in light mode the dark band becomes a soft green-washed light panel */
[data-bs-theme="light"] .cs-section-dark {
  background: linear-gradient(180deg, var(--i4-base) 0%, #ecf6f0 18%, #e7f4ee 50%, #ecf6f0 82%, var(--i4-base) 100%) !important;
  color: var(--cs-text) !important;
}
[data-bs-theme="light"] .cs-section-dark::before,
[data-bs-theme="light"] .cs-section-dark::after { display: none !important; }
[data-bs-theme="light"] .cs-section-dark h2, [data-bs-theme="light"] .cs-section-dark h3,
[data-bs-theme="light"] .cs-section-dark .cs-section-title { color: #1c3a2b !important; }
[data-bs-theme="light"] .cs-section-dark p, [data-bs-theme="light"] .cs-section-dark span,
[data-bs-theme="light"] .cs-section-dark .cs-section-subtitle { color: var(--cs-text) !important; }
[data-bs-theme="light"] .cs-section-dark .text-white,
[data-bs-theme="light"] .cs-section-dark [class*="text-light"] { color: var(--cs-text) !important; }
[data-bs-theme="light"] .cs-section-dark blockquote,
[data-bs-theme="light"] .cs-section-dark [class*="quote"],
[data-bs-theme="light"] .cs-section-dark [class*="testimonial"],
[data-bs-theme="light"] .cs-section-dark .cs-card {
  background: #ffffff !important; color: var(--cs-text) !important;
  border: 1px solid #dff0e6 !important; border-radius: 16px;
  box-shadow: 0 22px 44px -26px rgba(20,164,77,.35), 0 4px 14px -8px rgba(7,21,14,.08);
}
@media (prefers-reduced-motion: reduce) { .btn-primary::after { display: none; } .btn-primary, .btn-outline-primary { transition: none; } }


/* ===== v11b: interactive global map ===== */
.cs-map-wrap { position: relative; max-width: 1060px; margin: 0 auto; }
.cs-map-wrap canvas { width: 100%; display: block; }
.cs-map-tip {
  position: absolute; pointer-events: none; min-width: 150px;
  background: var(--bg-card, #fff); border: 1px solid #dff0e6; border-radius: 12px;
  padding: .55rem .8rem; box-shadow: 0 18px 38px -20px rgba(20,164,77,.45);
  font-size: .82rem; line-height: 1.35; z-index: 5;
}
.cs-map-tip strong { display: block; color: var(--cs-green, #00A94F); }
.cs-map-tip span { display: block; }
.cs-map-tip em { display: block; font-style: normal; opacity: .65; font-size: .74rem; }
[data-bs-theme="dark"] .cs-map-tip { border-color: rgba(126,240,192,.25); background: #10271b; color: #d9efe3; }

/* ===== v12 feedback pass ===== */
.cs-proof-bar{border-top:0!important;border-bottom:0!important;box-shadow:none!important;padding:1.6rem 0 .4rem!important;}
.cs-proof-bar::before,.cs-proof-bar::after{display:none!important;content:none!important;border:0!important;}
.cs-proof-bar .cs-proof-label{opacity:.65;letter-spacing:.09em;text-transform:uppercase;font-size:.72rem;margin-bottom:.9rem;}
.cs-proof-bar .cs-proof-types{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;}
.cs-proof-bar .cs-proof-tag{border:1px solid rgba(20,164,77,.22);background:rgba(20,164,77,.06);border-radius:999px;padding:.35rem .9rem;font-size:.8rem;font-weight:600;}
.cs-footer .cs-logo-light{display:none!important;}
.cs-footer .cs-logo-dark{display:inline-block!important;}
.cs-footer .cs-footer-brand img{filter:brightness(0) invert(1);}
.cs-person-photo{width:84px;height:84px;border-radius:50%;object-fit:cover;display:block;margin-bottom:.9rem;border:2px solid rgba(20,164,77,.35);}
.cs-person-avatar{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.55rem;color:#fff;background:linear-gradient(135deg,#0D8C61,#00853F);margin-bottom:.9rem;}
.cs-person-bio{font-size:.85rem;color:var(--text-secondary);line-height:1.5;margin-top:.35rem;}

/* v14 compliance height */
#compliance{padding-top:8.5rem!important;padding-bottom:8.5rem!important;}

/* v14 about flip */
.cs-person{text-align:center;}
.cs-person-flip{position:relative;display:block;width:128px;height:128px;margin:0 auto .9rem;border-radius:50%;}
.cs-person-photo-only{width:128px;height:128px;margin:0 auto .9rem;border-radius:50%;overflow:hidden;box-shadow:0 6px 20px -8px rgba(7,21,14,.4);}
.cs-person-photo-only img{width:100%;height:100%;object-fit:cover;display:block;}
.cs-person-face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:transform .55s ease;box-shadow:0 6px 20px -8px rgba(7,21,14,.4);}
.cs-person-front img{width:100%;height:100%;object-fit:cover;display:block;}
.cs-person-back{transform:rotateY(180deg);background:#0a66c2;color:#fff;}
.cs-person-back i{width:46px;height:46px;}
.cs-person-flip:hover .cs-person-front,.cs-person-flip:focus-visible .cs-person-front{transform:rotateY(180deg);}
.cs-person-flip:hover .cs-person-back,.cs-person-flip:focus-visible .cs-person-back{transform:rotateY(360deg);}
.cs-person-name{font-size:1.05rem;font-weight:700;margin:.1rem 0;}
.cs-person-role{color:var(--cs-green);font-weight:600;font-size:.85rem;margin:0 0 .5rem;}
.cs-person-bio{font-size:.86rem;color:var(--text-secondary);line-height:1.5;max-width:30ch;margin:0 auto;}
.cs-swiss-emblem svg{filter:drop-shadow(0 10px 26px rgba(213,43,30,.35));}
@media (prefers-reduced-motion: reduce){.cs-person-face{transition:none;}}

/* v15 case-study images */
.cs-usecase-img{width:100%;height:auto;border-radius:14px;border:1px solid rgba(0,0,0,.06);box-shadow:0 18px 44px -20px rgba(20,164,77,.28);}

/* v17 tweaks */
.cs-person-back svg{width:46px;height:46px;display:block;}
img[src*="paul-gheorghiu"]{filter:grayscale(100%);}

/* v17 art */
.cs-usecase-art{width:100%;border-radius:16px;overflow:hidden;line-height:0;}
.cs-usecase-art svg{width:100%;height:auto;display:block;}

/* v18 art img */
.cs-usecase-art img{width:100%;height:auto;-webkit-mask:radial-gradient(125% 125% at 50% 50%,#000 72%,transparent 100%);mask:radial-gradient(125% 125% at 50% 50%,#000 72%,transparent 100%);}
.cs-usecase-art .cs-art-light{display:block;}
.cs-usecase-art .cs-art-dark{display:none;}
[data-bs-theme="dark"] .cs-usecase-art .cs-art-light{display:none;}
[data-bs-theme="dark"] .cs-usecase-art .cs-art-dark{display:block;}

/* v19 i18n: case-study testimonial quote styling (class previously had no CSS) */
.cs-usecase-quote{position:relative;margin:1.25rem 0 0;padding:1.1rem 1.25rem 1.1rem 1.4rem;border-left:3px solid var(--cs-green,#00A94F);background:rgba(20,164,77,.05);border-radius:0 12px 12px 0;}
.cs-usecase-quote .cs-usecase-quote-text{margin:0 0 .6rem;font-style:italic;line-height:1.55;color:var(--cs-text,inherit);}
.cs-usecase-quote .cs-usecase-quote-text::before{content:"\201C";}
.cs-usecase-quote .cs-usecase-quote-text::after{content:"\201D";}
.cs-usecase-quote .cs-usecase-cite{display:block;font-style:normal;font-weight:600;font-size:.86rem;color:var(--text-secondary);}
[dir="rtl"] .cs-usecase-quote{border-left:0;border-right:3px solid var(--cs-green,#00A94F);border-radius:12px 0 0 12px;padding:1.1rem 1.4rem 1.1rem 1.25rem;}
[data-bs-theme="dark"] .cs-usecase-quote{background:rgba(126,240,192,.06);}