/* ---------- Design Tokens (matched to Figma) ---------- */
  :root {
    --bg-base: #FAFAFA;
    --bg-white: #FFFFFF;
    --bg-soft: #F5F7FB;
    --bg-dark: #0A0F1F;
    --bg-darker: #06091A;

    --ink-900: #101828;
    --ink-700: #344054;
    --ink-600: #4A5565;
    --ink-500: #6A7282;
    --ink-400: #6A7282;
    --ink-300: #D1D5DC;
    --ink-200: #E5E7EB;
    --ink-100: #F3F4F6;

    --brand: #155DFC;
    --brand-2: #0092B8;
    --brand-soft: #EAF1FF;
    --brand-glow: rgba(21, 93, 252, 0.18);

    --success: #10B981;
    --danger: #EF4444;
    --amber: #F59E0B;

    --grad-hero: linear-gradient(135deg, #FFFFFF 0%, #F5F7FB 100%);
    --grad-blue: linear-gradient(135deg, #155DFC 0%, #0092B8 100%);
    --grad-blue-soft: linear-gradient(135deg, #EAF1FF 0%, #E0F2FE 100%);

    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-sm: 0 4px 12px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 12px 32px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 25px 50px -12px rgba(16, 24, 40, 0.18);
    --shadow-blue: 0 20px 60px -20px rgba(21, 93, 252, 0.45);

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* Spacing scale — 8-point grid */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;
    --space-7: 80px;
    --space-8: 120px;

    /* Section vertical padding */
    --section-y: clamp(60px, 8vw, 120px);
    --section-y-tight: clamp(32px, 5vw, 64px);

    /* Animation tokens */
    --dur-fast: 160ms;
    --dur-base: 250ms;
    --dur-slow: 420ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Container scales up on larger viewports (1920px optimized) */
    --container: 1920px;
    --container-wide: 1440px;
    --prose: 720px;
    --pad-x: clamp(24px, calc(8.33vw - 40px), 120px);
      /* ===== Type scale ===== */
      --fs-display-1: var(--ps-text-h1);
      --fs-display-2: var(--ps-text-h1);
      --fs-stat: var(--ps-text-h1);
      --fs-title-l: var(--ps-text-h3);
      --fs-title-m: var(--ps-text-body);
      --fs-body: var(--ps-text-body);
      --fs-meta: var(--ps-text-nav);
      --fs-eyebrow: var(--ps-text-eyebrow);

      /* ===== Spacing scale ===== */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 24px;
      --space-6: 32px;
      --space-7: 48px;
      --space-8: 80px;
    }

  /* 1920px+ — give content more room without becoming oceanic */
        
  /* ---------- Reset ---------- */
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    background: var(--bg-base);
    color: var(--ink-900);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.55;
    overflow-x: hidden;
  }
  a { color: inherit; text-decoration: none; }
  img, svg { display: block; max-width: 100%; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; }

  /* ---------- Utility ---------- */
  .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); }
  .accent-bar { width: 64px; height: 4px; background: var(--brand); border-radius: var(--radius-pill); }
  .eyebrow {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--brand);
    margin-bottom: 12px;
  }
  .section { padding: clamp(60px, 9vw, 100px) 0; position: relative; }
  .section--white { background: var(--bg-white); }
  .section--gray { background: var(--bg-base); }

  h1, h2, h3, h4 {  font-weight: 500; letter-spacing: -0.025em; line-height: 1.3; margin: 0; color: var(--ink-900); font-size: var(--ps-text-h3); }
  h1 { font-size: var(--fs-display-1); font-weight: 300; letter-spacing: -0.03em; line-height: 1.18; }
  h2 { font-size: var(--fs-display-2);  font-weight:300;}
  h3 {   font-size: var(--ps-text-h3); font-weight: 500; letter-spacing: -0.02em; color: var(--ink-900); line-height: 1.3;  }
  p { margin: 0; font-size: var(--fs-title-m); font-weight: 300; line-height: 1.5; color: var(--ink-600); }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 0 26px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-body);
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease, background var(--dur-base) ease;
    white-space: nowrap;
  }
  .btn-primary {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 8px 24px -8px var(--brand-glow);
  }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(21,93,252,0.55); background: var(--brand-hover); }
  .btn-ghost {
    background: var(--bg-white);
    color: var(--brand);
    border: 1px solid var(--brand);
  }
  .btn-ghost:hover { background: var(--brand-soft); transform: translateY(-2px); }
  .btn-dark { background: var(--ink-900); color: #fff; }
  .btn-dark:hover { background: #000; transform: translateY(-2px); }
  .btn .arrow { transition: transform var(--dur-base) ease; }
  .btn:hover .arrow { transform: translateX(4px); }

  .btn-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 40px;
    padding: 0 18px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(21, 93, 252, 0.4);
    color: var(--brand);
    font-size: var(--fs-meta);
    font-weight: 500;
    background: transparent;
    transition: all var(--dur-base) ease;
  }
  .btn-pill:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
  .btn-pill svg { width: 18px; height: 18px; }

  /* ---------- HEADER (Figma node 478:158 — exact) ----------
     bg: rgba(255,255,255,0.8), border-bottom: rgba(229,231,235,0.6)
     padding: var(--space-2) var(--space-8)
     Logo: flex-1, two vectors side-by-side with -20px margin overlap
     Nav: 619.867px wide, gap 40px, Outfit Medium 16px, tracking 0.35px
       Active = var(--brand), rest = #212121
     Actions: flex-1 right, gap 32px, buttons 44×44 rounded-8
  ----------------------------------------------------------------- */
  
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-2) clamp(20px, 6vw, var(--space-8));
    box-sizing: border-box;
  }
  /* Logo: flex 1 0 0, two overlapping vectors */
  .logo {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
  }
  /* Nav: centered */
  .nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
  }
  
  .nav a.active { color: var(--brand); }

  /* Solutions dropdown */

  .icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    padding: var(--space-1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-600);
    transition: background var(--dur-fast) ease;
    flex-shrink: 0;
  }
  .icon-btn:hover { background: var(--ink-200); }
  .icon-btn svg { width: 20px; height: 20px; display: block; }

  @media (max-width: 1100px) {
    .header-inner { padding: var(--space-2) var(--space-3); }
    .nav { display: none; }
  }

  /* ---------- HERO (Figma node 478:179 — exact) ---------- */
  .hero {
    background: linear-gradient(to left, #FFFFFF, #F5F5F5);
    padding: clamp(56px,6vw,88px) clamp(20px, 6vw, var(--space-8)) clamp(40px,4vw,60px);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
  }
  /* white-wall 1: position absolute, 1018px tall, full width, object-cover */
  .hero-wall {
    position: absolute;
    left: 0;
    top: -0.29px;
    width: 1440px;
    height: 1018px;
    pointer-events: none;
    z-index: 0;
  }
  .hero-wall img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }
  /* radial gradient overlay */
  .hero-radial {
    position: absolute;
    left: -1px;
    top: -0.29px;
    width: 1441px;
    height: 1018px;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(
      ellipse 720px 509px at 72.4% 50%,
      rgba(250, 250, 250, 0) 0%,
      rgba(250, 250, 250, 1) 100%
    );
  }
  /* Inner layout — flex row, image stays in flow and vertically centers with text */
  .hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
  .hero-text-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
  }
  .hero h1 {
    width: 100%;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: var(--fs-display-1);
    line-height: 1.15;
    letter-spacing: -1.5px;
    color: var(--ink-900);
    margin: 0;
  }
  .hero h1 .em {
    font-weight: 500;
    color: var(--brand-3);
  }
  /* Trust chip above headline */
  .hero-trust {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 6px 14px;
    background: var(--brand-soft);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-pill);
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    color: var(--brand);
    letter-spacing: 0.01em;
    width: fit-content;
  }
  .hero-trust svg {
    width: 13px; height: 13px;
    stroke: currentColor;
  }
  /* Value strip — plain text with bullet dividers */
  .hero-value-strip {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-meta);
    font-weight: 500;
    color: var(--ink-900);
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .hero-value-strip > span:not(.sep) {
    padding: 2px 0;
  }
  .hero-value-strip .sep {
    color: #C5CCD9;
    margin: 0 14px;
    user-select: none;
  }
  /* Row 2: sub + CTA */
  .hero-sub-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    justify-content: center;
    padding-left: 0;
  }
  .hero-sub-row > .btn { margin-top: 28px; }
  .hero-sub {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: var(--fs-title-m);
    line-height: 1.5;
    color: var(--ink-600);
    letter-spacing: 0.01em;
    width: 100%;
    max-width: 620px;
    margin: 0;
  }
  .hero-sub .value-strip-inline {
    display: inline;
    font-weight: 400;
    color: var(--ink-600);
    vertical-align: baseline;
  }
  .hero-sub .value-strip-inline .sep {
    color: var(--ink-600);
    margin: 0 var(--space-1);
    font-weight: 400;
    vertical-align: baseline;
    display: inline;
  }
  /* "Learn more" CTA — pill, bg #212121 */
  .hero-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 0 28px;
    background: var(--brand);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-pill);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: var(--fs-body);
    letter-spacing: 0.01em;
    line-height: normal;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-fast) ease, transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
    white-space: nowrap;
    box-shadow: 0 8px 24px -8px rgba(21, 93, 252, 0.45);
  }
  .hero-cta-btn:hover { background: var(--brand-hover); transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(21,93,252,0.55); }
  .hero-cta-btn--ghost {
    background: transparent;
    color: var(--ink-900);
    border: 1.5px solid var(--ink-200);
    box-shadow: none;
  }
  .hero-cta-btn--ghost:hover { border-color: var(--brand); color: var(--brand); background: transparent; box-shadow: none; transform: translateY(-2px); }

  /* Right image — flex child, vertically centered by parent align-items: center */
  .hero-image-col {
    flex-shrink: 0;
    width: 460px;
    height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: hero-float 6s ease-in-out infinite;
  }
  .hero-image-col svg {
    width: 100%;
    height: 100%;
  }
  @keyframes hero-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-12px); }
  }

  @media (max-width: 1100px) {
    .hero-image-col { width: 340px; height: 275px; }
  }
  @media (max-width: 1100px) {
    .hero-inner { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
    .hero h1 { font-size: var(--fs-display-1); }
    .hero-wall, .hero-radial { width: 100%; }
    .hero-image-col { width: 100%; height: 260px; }
  }
  @media(max-width:480px) {
    .hero h1 { font-size: var(--fs-display-1); }
  }

  /* ---------- PROMO VIDEO (Figma — black rounded card) ---------- */
  .promo {
    background: var(--bg-base);
    padding: 0 var(--pad-x) 60px;
  }
  .promo-card {
    position: relative;
    background: #000;
    border: 1px solid rgba(229,231,235,0.6);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    height: clamp(360px, 40vw, 576px);
    display: grid;
    place-items: center;
  }
  .promo-bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 30% 50%, rgba(21,93,252,0.4), transparent 50%),
      radial-gradient(circle at 70% 50%, rgba(0,146,184,0.3), transparent 50%),
      linear-gradient(135deg, var(--bg-dark) 0%, #1A2347 100%);
  }
  .promo-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
  }
  .promo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent 60%);
  }
  .play-button {
    position: relative;
    width: 96px; height: 96px;
    border-radius: 50%;
    background: var(--brand);
    display: grid; place-items: center;
    box-shadow: 0 25px 50px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: transform var(--dur-base) ease;
    z-index: 2;
  }
  .play-button::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: var(--brand);
    opacity: 0.4;
    animation: ripple 2s infinite;
    z-index: -1;
  }
  @keyframes ripple {
    0% { transform: scale(1); opacity: 0.4; }
    100% { transform: scale(1.4); opacity: 0; }
  }
  .play-button:hover { transform: scale(1.08); }
  .play-button:not(.nav-dropdown-trigger) svg { color: #fff; margin-left: 4px; }
  .promo-caption {
    position: absolute;
    bottom: 32px;
    left: 88px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2; font-size: var(--fs-title-m); font-weight: 300; color: var(--ink-600); line-height: 1.5;}
  .promo-bar-vert {
    width: 4px;
    height: 48px;
    border-radius: var(--radius-pill);
    background: linear-gradient(to bottom, var(--brand-3), #00B8DB);
  }
  .promo-caption h3 {  
    color: var(--ink-900);
    font-size: var(--ps-text-h3);
    font-weight: 500;
    margin-bottom: 4px; line-height: 1.3;  }
  .promo-caption p {
    color: var(--ink-600);
    font-size: var(--fs-title-m);
    font-weight: 300; line-height: 1.5;}
  @media(max-width:768px) {
    .promo-caption { left: 24px; bottom: 24px; font-size: var(--fs-title-m); font-weight: 300; color: var(--ink-600); line-height: 1.5;}
    .promo-caption h3 {   font-size: var(--ps-text-h3); font-weight: 500; color: var(--ink-900); line-height: 1.3;  }
  }

  /* ---------- METRICS (Figma stats row, content-doc numbers) ---------- */
  .metrics {
    background: var(--bg-base);
    padding: 0 0 var(--space-7);
  }
  .metrics-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }
  .metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    width: 100%;
  }
  .metric {
    text-align: center;
    padding: var(--space-2) var(--space-3);
    border-right: 1px solid var(--ink-200);
  }
  .metric:last-child { border-right: none; }
  .metric-num {
    font-size: var(--ps-text-h1);
    font-weight: 300;
    color: var(--ink-900);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: var(--space-2);
  }
  .metric-label {
    font-size: var(--fs-body);
    color: var(--ink-600);
    letter-spacing: 0.04em;
    font-weight: 300; line-height: 1.5;}
  @media(max-width:768px) {
    .metrics-grid { grid-template-columns: repeat(2, 1fr); }
    .metric { border-bottom: 1px solid var(--ink-200); padding: var(--space-3); }
    .metric:nth-child(odd) { border-right: 1px solid var(--ink-200); }
    .metric:nth-child(even) { border-right: none; }
    .metric:nth-last-child(-n+2) { border-bottom: none; }
  }

  /* Partners strip */
  .partners {
    background: var(--bg-white);
    padding: 36px 0;
    border-top: 1px solid var(--ink-200);
    border-bottom: 1px solid var(--ink-200);
  }
  .partners-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 40px; flex-wrap: wrap;
  }
  .partners-label {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--brand);
    margin-bottom: 12px;
    text-align: center;
    display: block;
  }
  .partners-list {
    display: flex; gap: 36px; align-items: center; flex-wrap: wrap;
    flex: 1; justify-content: flex-end;
  }
  .partners-list span {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--ink-500);
    transition: color var(--dur-fast);
  }
  .partners-list span:hover { color: var(--ink-900); }

  /* ---------- SECTION HEADER ---------- */
  .section-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--space-6);
  }
  .section-header h2 { margin: var(--space-2) 0 20px; }
  .section-header h2 em { font-style: normal; font-weight: 500; color: var(--brand); }
  .section-header p {
    font-size: var(--fs-title-m);
    color: var(--ink-600);
    font-weight: 300;
    line-height: 1.5;
  }
  .section-header .accent-bar { margin: 28px auto 0; }

  /* ---------- SOUND FAMILIAR — Hybrid: Concept D title + Concept C counters ---------- */
  .sf-section {
    padding: 0;
    background: #FFFFFF;
    position: relative;
    overflow: hidden;
  }
  /* Top editorial zone — Option B */
  .sf-top {
    padding: clamp(52px, 7vw, 88px) var(--pad-x) clamp(20px, 2.5vw, var(--space-4));
    position: relative;
    z-index: 2;
   text-align: center;}
  .sf-metrics-band { padding: 0 var(--pad-x); }
  .sf-eyebrow {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--brand);
    margin: 0 0 var(--space-3);
    display: block;
  }
  .sf-bar {
    width: 40px;
    height: 3px;
    background: var(--brand);
    border-radius: var(--radius);
    margin-bottom: 28px;
  }
  .sf-vs-row {
    display: flex;
    align-items: baseline;
    gap: clamp(var(--space-2), 3vw, 36px);
    flex-wrap: wrap;
  }
  .sf-line1 {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-body);
    font-weight: 300;
    color: var(--ink-600);
    letter-spacing: -0.04em;
    line-height: 1.5;
  }
  .sf-vs-badge {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink-600);
    flex-shrink: 0;
    padding-bottom: 4px;
  }
  .sf-line2 {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-body);
    font-weight: 300;
    color: var(--ink-600);
    letter-spacing: -0.04em;
    line-height: 1.5;
    opacity: 0.45;
  }
  .sf-top-sub {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-title-m);
    font-weight: 300;
    color: var(--ink-600);
    line-height: 1.5;
    max-width: 580px;
    
    margin: var(--space-3) auto 0;
  }
  /* Metrics band */
  .po-title {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-display-2);
    font-weight: 300;
    color: var(--ink-900);
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0;
    max-width: var(--container);
  }
  .po-title em {
    font-style: normal;
    font-weight: 500;
    color: var(--brand);
  }

  /* Scroll-triggered fade-in for po-cell */
  .po-cell { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
  .po-cell.po-visible { opacity: 1; transform: translateY(0); }
  /* 3-col modifier for splitting 4 + 3 layout cleanly */
  .po-rows--3 { grid-template-columns: repeat(3, 1fr) !important; max-width: 75% !important; margin: 0 auto !important; border-top: 1px solid var(--ink-200); padding-top: var(--space-1); margin-top: var(--space-1) !important; }
  .po-rows {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-1);
  }
  .po-cell {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: var(--space-3) 22px;
    border-right: 1px solid var(--ink-200);
    transition: background var(--dur-base) ease;
  }
  .po-cell:last-child { border-right: none; }
  .po-cell:hover { background: #FAFBFD; }

  .po-dwrap {
    position: relative;
    width: 80px; height: 80px;
    flex-shrink: 0;
  }
  .po-dwrap svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }
  .po-dtrack {
    fill: none;
    stroke: #F1F3F7;
    stroke-width: 6;
  }
  .po-dprog {
    fill: none;
    stroke: var(--brand);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.4s var(--ease-out);
  }
  .po-dcircle {
    fill: #F1F3F7;
  }
  .po-dcenter {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .po-dnum {
    font-family: 'Outfit', sans-serif;
    font-size: var(--ps-text-h1);
    font-weight: 400;
    color: var(--brand);
    letter-spacing: -0.025em;
    line-height: 1;
  }
  .po-dnum .sfx { font-size: var(--fs-meta); font-weight: 300; }
  .po-dnum em {
    font-style: normal;
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-weight: 400;
  }

  .po-dtext {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .po-dlabel {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--ink-900);
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  .po-ddir {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink-600);
  }

  @media (max-width: 1100px) {
    .po-rows { grid-template-columns: repeat(2, 1fr); }
    .po-cell:nth-child(2) { border-right: none; }
    .po-cell:nth-child(1), .po-cell:nth-child(2) { border-bottom: 1px solid var(--ink-200); }
  }
  @media(max-width:480px) {
    .po-rows { grid-template-columns: 1fr; }
    .po-cell { border-right: none; border-bottom: 1px solid var(--ink-200); }
    .po-cell:last-child { border-bottom: none; }
  }

  @media (max-width: 1100px) {
    .sf-metric:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
  }
  @media(max-width:480px) {
  }
  /* CTA zone — A4 minimal */
  .sf-cta-zone {
    padding: 36px var(--pad-x) var(--space-6);
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    border-top: 1px solid var(--ink-200);
    border-bottom: 1px solid var(--ink-200);
  }
  .sf-cta-left {}
  .sf-cta-heading {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-display-2);
    font-weight: 300;
    color: var(--ink-900);
    letter-spacing: -0.035em;
    line-height: 1.2;
    margin-bottom: var(--space-1);
  }
  .sf-cta-sub {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-title-m);
    font-weight: 300;
    color: var(--ink-600);
    line-height: 1.5;
    max-width: 500px;
  }
  .sf-cta-right {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    align-items: center;
  }
  .sf-cta-btn-p {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-body);
    font-weight: 500;
    color: #fff;
    background: var(--ink-900);
    border: none;
    border-radius: var(--radius-pill);
    padding: 12px 26px;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-fast) ease;
  }
  .sf-cta-btn-p:hover { background: #1E293B; }
  .sf-cta-btn-s {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-body);
    font-weight: 400;
    color: var(--ink-700);
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-pill);
    padding: 12px 26px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  .sf-cta-btn-s:hover { border-color: var(--brand-border); color: var(--brand); }
  /* Responsive */
  @media (max-width: 1100px) {
    .sf-top { padding: var(--space-5) 40px 40px; }

    .sf-cta-zone { padding: var(--space-4) clamp(20px, 4vw, 40px) var(--space-5); flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .sf-cta-right { flex-wrap: wrap; }
  }
  @media(max-width:480px) {
    .sf-top { padding: var(--space-5) 20px var(--space-4); }
    .sf-line1, .sf-line2 { font-size: var(--fs-body); font-weight: 300; color: var(--ink-600); line-height: 1.5;}
    .sf-cta-zone { padding: 28px 20px 44px; }  /* mobile */
    .sf-cta-right { flex-direction: column; width: 100%; }
    .sf-cta-btn-p, .sf-cta-btn-s { width: 100%; text-align: center; }
  }

  .solutions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
  .solution-card {
    background: var(--bg-white);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-xl);
    padding: var(--space-5) 40px;
    position: relative;
    overflow: hidden;
    transition: all var(--dur-base) var(--ease-out);
    cursor: pointer;
  }
  .solution-card:hover {
    transform: translateY(-6px);
    border-color: var(--brand);
    box-shadow: var(--shadow-blue);
  }
  .solution-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 300px at 100% 0%, rgba(21,93,252,0.06), transparent 70%);
    opacity: 0;
    transition: opacity var(--dur-base) ease;
    pointer-events: none;
  }
  .solution-card:hover::before { opacity: 1; }
  .solution-num {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-size: var(--fs-meta);
    color: var(--brand);
    letter-spacing: 0.1em;
    margin-bottom: var(--space-3);
  }
  .solution-card h3 {  
    font-size: var(--ps-text-h3);
    font-weight: 500;
    margin-bottom: var(--space-2); color: var(--ink-900); line-height: 1.3;  }
  .solution-card p {
    font-size: var(--fs-title-m);
    color: var(--ink-600);
    line-height: 1.5;
    margin-bottom: 28px;
    min-height: 80px; font-weight: 300;}
  .solution-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--brand);
    font-weight: 500;
    font-size: var(--fs-body);
  }
  .solution-link svg { transition: transform var(--dur-base) ease; }
  .solution-card:hover .solution-link svg { transform: translateX(6px); }
  .solution-visual {
    position: absolute;
    top: 32px; right: 32px;
    width: 64px; height: 64px;
    border-radius: var(--radius);
    background: var(--grad-blue-soft);
    display: grid; place-items: center;
    color: var(--brand);
  }
  @media(max-width:768px) { .solutions-grid { grid-template-columns: 1fr; } }

  .ai-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .ai-cards .span-2 { grid-column: span 2; }
  .ai-card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    padding: 28px;
    transition: all var(--dur-base) var(--ease-out);
    position: relative;
    overflow: hidden;
  }
  .ai-card:hover {
    transform: translateY(-4px);
    border-color: var(--brand);
    box-shadow: var(--shadow-md);
  }
  .ai-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius);
    background: var(--grad-blue-soft);
    color: var(--brand);
    display: grid; place-items: center;
    margin-bottom: 20px;
    transition: all var(--dur-base) var(--ease-out);
  }
  .ai-card:hover .ai-icon { background: var(--brand); color: #fff; transform: rotate(-4deg); }
  .ai-card h4 { 
    font-size: var(--ps-text-h3);
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--ink-900);
    letter-spacing: -0.01em; line-height: 1.3; }
  .ai-card p {
    font-size: var(--fs-title-m);
    color: var(--ink-600);
    line-height: 1.5;
    font-weight: 300;
  }
  .ai-card .tag {
    display: inline-block;
    margin-top: var(--space-2);
    font-size: var(--fs-eyebrow);
    color: var(--brand);
    background: var(--brand-soft);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.05em;
    font-weight: 500;
  }
  .ai-cta-row { text-align: center; margin-top: var(--space-5); }
  @media (max-width: 1100px) {
    .ai-cards { grid-template-columns: repeat(2, 1fr); }
    .ai-cards .span-2 { grid-column: span 2; }
  }
  @media(max-width:480px) {
    .ai-cards { grid-template-columns: 1fr; }
    .ai-cards .span-2 { grid-column: span 1; }
  }

  .trans-row {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 60px;
    align-items: center;
    padding: 56px 0;
    border-bottom: 1px solid var(--ink-200);
  }
  .trans-row:last-child { border-bottom: none; }
  .trans-row.reverse { grid-template-columns: 320px 1fr; }
  .trans-row.reverse .trans-content { order: 2; }
  .trans-row.reverse .trans-visual { order: 1; }
  .trans-content h3 {  
    font-size: var(--ps-text-h3);
    font-weight: 500;
    margin-bottom: var(--space-2);
    color: var(--ink-900); line-height: 1.3;  }
  .trans-content p {
    font-size: var(--fs-title-m);
    color: var(--ink-600);
    font-weight: 300;
    line-height: 1.5;
    max-width: 540px;
    margin-bottom: var(--space-3);
  }
  .trans-tags { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-bottom: var(--space-3); }
  .trans-tag {
    font-size: var(--fs-eyebrow);
    color: var(--ink-700);
    background: var(--ink-100);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-weight: 500;
  }
  .trans-visual {
    width: 280px; height: 280px;
    margin: 0 auto;
    position: relative;
    display: grid; place-items: center;
  }
  .gear {
    width: 100%; height: 100%;
    color: var(--ink-300);
    animation: rotate 30s linear infinite;
    transition: color var(--dur-slow) ease;
  }
  .trans-row:hover .gear { color: var(--brand); }
  .gear-glow {
    position: absolute;
    width: 80%; height: 80%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(21,93,252,0.12), transparent 70%);
    filter: blur(20px);
  }
  @keyframes rotate { to { transform: rotate(360deg); } }
  @media(max-width:768px) {
    .trans-row, .trans-row.reverse { grid-template-columns: 1fr; gap: var(--space-4); padding: 40px 0; }
    .trans-row.reverse .trans-content { order: 1; }
    .trans-row.reverse .trans-visual { order: 2; }
    .trans-visual { width: 200px; height: 200px; }
  }

  /* ---------- WHY PRIMESOFT — sticky left / stacked card scroll ---------- */
  .why-section { background: #FFFFFF; }
  .why-layout {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-7);
    align-items: start;
  }
  .why-left {
    position: sticky;
    top: 100px;
  }
  .why-right {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  /* Each card is sticky — sticks at increasing top values */
  /* Next card slides over the previous because of higher z-index */
  /* Inactive cards — black icon + title */
  /* Active card — blue bold icon + title */

  .why-left-eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--brand);
    display: block;
    margin-bottom: 14px;
  }
  .why-left-headline {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-display-2);
    font-weight: 300;
    color: var(--ink-900);
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 20px;
  }
  .why-left-headline strong { font-weight: 500; color: var(--brand); }
  .why-left-bar {
    width: 48px;
    height: 3px;
    background: var(--brand);
    border-radius: var(--radius-pill);
    margin-bottom: 20px;
  }
  .why-left-sub {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-title-m);
    font-weight: 300;
    color: var(--ink-600);
    line-height: 1.5;
    margin-bottom: 28px;
  }
  .why-left-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-meta);
    font-weight: 500;
    color: #fff;
    background: var(--brand);
    border: none;
    border-radius: var(--radius-pill);
    padding: 12px var(--space-3);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-fast) ease;
  }
  .why-left-cta:hover { background: var(--brand-hover); }
  .why-left-cta svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  @media (max-width: 1100px) {
    .why-layout { grid-template-columns: 1fr; gap: 40px; }
    .why-left { position: static; }
  }
  @media(max-width:480px) {
  }

  /* ---------- POC SECTION — Dark centered (Option A) ---------- */
  .poc {
    background: #FFFFFF;
    position: relative;
    overflow: hidden;
  }
  .poc-card {
    background: var(--bg-dark);
    border-radius: var(--radius-xl);
    padding: 72px var(--space-7);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
  }
  .poc-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 640px;
  }
  .poc-eyebrow {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--brand);
    display: block;
    margin-bottom: 20px;
  }
  .poc h2 {
    font-size: var(--fs-display-2);
    font-weight: 300;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: -0.03em;
    margin: 0 0 20px;
  }
  .poc h2 b { font-weight: 500; color: var(--brand); }
  .poc-sub {
    font-size: var(--fs-title-m);
    color: var(--ink-600);
    font-weight: 300;
    line-height: 1.5;
    margin: 0 0 36px;
  }
  .poc-cta {
    background: var(--brand);
    color: #fff;
    height: 52px;
    padding: 0 var(--space-4);
    font-size: var(--fs-body);
    font-weight: 500;
    width: fit-content;
    box-shadow: none;
    margin-top: var(--space-1);
    border-radius: var(--radius-pill);
  }
  .poc-cta:hover { background: var(--brand-hover); transform: translateY(-2px); }
  @media(max-width:480px) {
    .poc-card { padding: var(--space-5) 28px; }
  }

  /* ---------- CLIENTS REVIEW (reference redesign) ---------- */
  /* ───── Clients section — magazine header + italic-serif quote (OPT C) ───── */
  .clients-q-section {
    background: #FAFBFD;
    padding: clamp(var(--space-6), 8vw, 100px) 0;
  }
  .clients-q-inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--pad-x);
  }
  .clients-q-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: 22px;
    border-bottom: 1px solid var(--ink-200);
    margin-bottom: 40px;
    flex-wrap: wrap;
  }
  .clients-q-profile {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .clients-q-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--brand-3));
    color: #fff;
    font-size: var(--fs-meta);
    font-weight: 500;
    letter-spacing: 0.01em;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .clients-q-info { text-align: left; }
  .clients-q-name {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--ink-900);
    letter-spacing: -0.01em;
    line-height: 1.3;
  }
  .clients-q-meta {
    font-size: var(--fs-meta);
    color: var(--ink-600);
    line-height: 1.4;
    margin-top: 2px;
  }
  .clients-q-sep { margin: 0 var(--space-1); color: #C5CCD9; }
  .clients-q-project { color: var(--ink-600); }
  .clients-q-actions {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .clients-q-company {
    font-size: var(--fs-meta);
    font-weight: 500;
    color: var(--brand);
    padding: 6px 14px;
    background: var(--brand-soft);
    border-radius: var(--radius-pill);
    letter-spacing: -0.005em;
    white-space: nowrap;
  }
  .clients-q-nav { display: flex; gap: 6px; }
  .clients-q-nav-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--ink-200);
    color: var(--ink-600);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  .clients-q-nav-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
  .clients-q-nav-btn svg { width: 15px; height: 15px; }
  .clients-q-quote {
    font-family: 'Outfit', sans-serif;
    font-style: normal;
    font-size: var(--ps-text-h1);
    font-weight: 300;
    color: var(--ink-900);
    line-height: 1.35;
    letter-spacing: -0.018em;
    margin: 0 auto;
    max-width: 720px;
    text-align: center;
  }
  .clients-q-quote::before { content: open-quote; }
  .clients-q-quote::after { content: close-quote; }
  .clients-q-dots {
    display: flex;
    justify-content: center;
    gap: var(--space-1);
    margin-top: 44px;
  }
  .clients-q-dot {
    width: 6px; height: 6px;
    border-radius: var(--radius-pill);
    background: #DCE5F7;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background var(--dur-base) ease, width var(--dur-base) ease;
  }
  .clients-q-dot:hover { background: var(--brand-border); }
  .clients-q-dot.active {
    background: var(--brand);
    width: 22px;
  }
  @media(max-width:768px) {
    .clients-q-header { gap: var(--space-2); margin-bottom: var(--space-4); }
    .clients-q-actions { width: 100%; justify-content: space-between; }
    .clients-q-quote { font-size: var(--fs-title-l); }
  }

  .clients-section {
    background: #FFFFFF;
    padding: clamp(60px, 8vw, 100px) 0;
    position: relative;
    overflow: hidden;
  }
  .clients-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
    align-items: center;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-x);
  }
  .clients-left {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  /* Section title — large, light weight, matching reference */
  .clients-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-display-2);
    font-weight: 300;
    color: var(--ink-900);
    letter-spacing: -1.5px;
    line-height: 1.15;
    margin: 0 0 4px;
  }
  /* Logos row */
  .clients-logos {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 28px 0;
  }
  .clients-logo {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: var(--radius);
    background: #FFFFFF;
    border: 1px solid #EBEBEB;
    transition: all var(--dur-base) var(--ease-out);
    cursor: pointer;
    opacity: 0.35;
    filter: grayscale(1);
  }
  .clients-logo.active {
    opacity: 1;
    filter: none;
    border-color: var(--brand-border);
    box-shadow: 0 2px 12px rgba(21,93,252,0.1);
  }
  .clients-logo img { height: 32px; width: auto; object-fit: contain; }
  /* Nav arrows — below logos, left-aligned */
  .clients-nav {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .clients-nav-btn {
    width: 44px; height: 44px;
    border-radius: 8px;
    border: 1.5px solid var(--ink-400);
    background: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    color: var(--ink-900);
  }
  .clients-nav-btn:hover { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
  .clients-nav-btn svg { width: 16px; height: 16px; }
  /* Divider */
  .clients-divider {
    width: 100%;
    height: 1px;
    background: var(--ink-200);
    margin-bottom: 28px;
  }
  /* Testimonial */
  .clients-testimonial { display: flex; flex-direction: column; gap: 20px; }
  .clients-project {
    font-family: 'Outfit', sans-serif;
    font-size: var(--ps-text-h3);
    font-weight: 400;
    color: var(--ink-900);
    letter-spacing: -0.5px;
    line-height: 1.25;
    margin: 0;
  }
  .clients-quote {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-title-m);
    font-weight: 300;
    color: var(--ink-600);
    line-height: 1.5;
    margin: 0;
    max-width: 480px;
  }
  /* Author */
  .clients-author { display: flex; gap: 14px; align-items: center; }
  .clients-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #D1D8F5;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-body); font-weight: 500; color: var(--brand);
    overflow: hidden;
  }
  .clients-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }
  .clients-author-name {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-title-m); font-weight: 300; color: var(--ink-600);
    letter-spacing: -0.2px; line-height: 1.5;
  }
  .clients-author-role {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-meta); font-weight: 300; color: var(--ink-600);
    line-height: 1.5;
  }
  /* Right: laptop mockup */
  .clients-right {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .clients-laptop-wrap {
    width: 100%;
    max-width: 520px;
    position: relative;
    filter: drop-shadow(0 32px 64px rgba(16,24,40,0.14));
    transition: transform var(--dur-slow) ease;
  }
  .clients-laptop-wrap:hover { transform: translateY(-6px); }
  .clients-laptop-svg {
    width: 100%;
    height: auto;
    display: block;
  }
  /* Screen inner — sits inside the laptop bezel */
  .clients-screen {
    position: absolute;
    top: 6.2%;
    left: 13%;
    width: 74%;
    height: 60%;
    background: #F0F4FF;
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    align-items: stretch;
  }
  /* Mini UI inside the screen */
  .clients-screen-ui {
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
  }
  .cs-topbar {
    background: var(--brand);
    height: 18%;
    display: flex;
    align-items: center;
    padding: 0 var(--space-1);
    gap: 4px;
  }
  .cs-topbar-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); }
  .cs-topbar-search {
    flex: 1;
    height: 10px;
    background: rgba(255,255,255,0.25);
    border-radius: var(--radius);
    margin: 0 6px;
  }
  .cs-body {
    display: flex;
    flex: 1;
    overflow: hidden;
  }
  .cs-sidebar {
    width: 28%;
    background: #F8F9FC;
    border-right: 1px solid var(--ink-200);
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .cs-nav-item {
    height: 8px;
    border-radius: var(--radius);
    background: var(--ink-200);
  }
  .cs-nav-item.active { background: #C7D2FE; }
  .cs-main {
    flex: 1;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .cs-row {
    display: flex;
    gap: 4px;
  }
  .cs-card {
    flex: 1;
    border-radius: var(--radius);
    background: var(--ink-200);
    height: 36px;
    overflow: hidden;
    position: relative;
  }
  .cs-card-img {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #E0E7FF, #DFF2FE);
  }
  .cs-card-tag {
    position: absolute;
    bottom: 3px; left: 3px;
    width: 50%;
    height: 5px;
    background: var(--ink-400);
    border-radius: 2px;
  }
  .cs-table {
    background: var(--bg-soft);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    padding: 3px;
    flex: 1;
  }
  .cs-table-row {
    display: flex;
    gap: 3px;
    margin-bottom: 2px;
  }
  .cs-cell {
    flex: 1;
    height: 6px;
    background: var(--ink-200);
    border-radius: var(--radius);
  }
  .cs-cell.head { background: #C7D2FE; }

  @media (max-width: 1100px) {
    .clients-inner { grid-template-columns: 1fr; gap: var(--space-5); }
    .clients-laptop-wrap { max-width: 420px; margin: 0 auto; }
  }
  @media(max-width:480px) {
    .clients-project { font-size: var(--ps-text-h3); }
    .clients-section-title { font-size: var(--fs-display-2); }
  }

  /* ---------- INDUSTRIES — full bleed dark overlay ---------- */
  .ind-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
  }
  .ind-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    height: 340px;
    cursor: pointer;
    border: 1px solid var(--ink-200);
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--dur-slow) ease, transform var(--dur-slow) ease, box-shadow var(--dur-base) ease;
  }
  .ind-card.ind-visible { opacity: 1; transform: translateY(0); }
  .ind-card:nth-child(1) { transition-delay: 0s; }
  .ind-card:nth-child(2) { transition-delay: 0.1s; }
  .ind-card:nth-child(3) { transition-delay: 0.2s; }
  .ind-card:nth-child(4) { transition-delay: 0.3s; }
  .ind-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,0.18); border-color: transparent; }
  .ind-img {
    position: absolute;
    inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.62);
    transition: transform var(--dur-slow) var(--ease-in-out), filter var(--dur-slow) ease;
  }
  /* Full-card dark tint overlay above image, below text */
  .ind-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,15,31,0.25) 0%, rgba(10,15,31,0.55) 100%);
    z-index: 1;
    pointer-events: none;
    transition: opacity var(--dur-base) ease;
  }
  .ind-card:hover .ind-img { transform: scale(1.07); filter: brightness(0.55); }
  /* Default: title at bottom, dark gradient */
  .ind-default {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 52px 20px 20px;
    background: linear-gradient(to top, rgba(10,15,31,0.85) 0%, transparent 100%);
    z-index: 2;
    transition: opacity var(--dur-base) ease;
  }
  .ind-card:hover .ind-default { opacity: 0; }
  .ind-card-name {
    font-family: 'Outfit', sans-serif;
    font-size: var(--ps-text-h3); font-weight: 500;
    color: var(--ink-900); letter-spacing: -0.02em; line-height: 1.3;
  }
  .ind-card-sub {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-title-m); font-weight: 300;
    color: var(--ink-600); margin-top: 6px; line-height: 1.5;
  }
  /* Hover: dark progressive blur panel rises from bottom */
  .ind-hover {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 44px 20px 22px;
    background: linear-gradient(to top,
      rgba(10,15,31,0.96) 0%,
      rgba(10,15,31,0.88) 40%,
      rgba(10,15,31,0.55) 70%,
      rgba(10,15,31,0.0) 100%
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 3;
    transform: translateY(100%);
    transition: transform var(--dur-slow) var(--ease-in-out);
  }
  .ind-card:hover .ind-hover { transform: translateY(0); }
  .ind-hover-title {
    font-family: 'Outfit', sans-serif;
    font-size: var(--ps-text-h3); font-weight: 500;
    color: var(--ink-900); margin-bottom: 10px; letter-spacing: -0.02em; line-height: 1.3;}
  .ind-hover-desc {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-title-m); font-weight: 300;
    color: var(--ink-600); line-height: 1.5; margin-bottom: var(--space-2);
  }
  .ind-hover-link {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-meta); font-weight: 500; color: #fff;
    display: inline-flex; align-items: center; gap: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.35);
    padding-bottom: 2px; text-decoration: none;
    transition: gap var(--dur-fast) ease;
  }
  .ind-card:hover .ind-hover-link { gap: 9px; }
  @media (max-width: 1100px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } }
  @media(max-width:480px)  { .ind-grid { grid-template-columns: 1fr; } }

  /* ---------- BLOGS (Figma style) ---------- */
  .insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
  .insight-card {
    cursor: pointer;
    transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--ink-200);
    padding-bottom: var(--space-3);
    text-decoration: none;
    display: block;
  }
  .insight-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(21,93,252,0.08); }
  .insight-img {
    height: 200px;
    border-radius: var(--radius) var(--radius) 0 0;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform var(--dur-slow) var(--ease-in-out);
  }
  .insight-card:hover .insight-img { transform: scale(1.04); }
  .insight-tag {
    font-size: var(--fs-eyebrow);
    color: var(--brand);
    background: var(--brand-soft);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.1em;
    font-weight: 500;
    display: inline-block;
    margin-bottom: var(--space-2);
    margin-left: var(--space-3);
  }
  .insight-card h4 { 
    font-size: var(--ps-text-h3);
    font-weight: 500;
    color: var(--ink-900);
    line-height: 1.3;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    padding: 0 var(--space-3);
   }
  .insight-card p {
    font-size: var(--fs-title-m);
    color: var(--ink-600);
    line-height: 1.5;
    font-weight: 300;
    margin-bottom: 0;
    padding: 0 var(--space-3);
  }
  .view-all-row {
    display: flex; justify-content: center;
    margin-top: 56px;
  }
  .view-all-btn {
    height: 52px;
    padding: 0 36px;
    background: #fff;
    border: 1.5px solid var(--ink-400);
    border-radius: var(--radius-pill);
    color: var(--ink-900);
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-body);
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    transition: all var(--dur-base) ease;
  }
  .view-all-btn:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(21,93,252,0.1); }
  @media (max-width: 1100px) { .insights-grid { grid-template-columns: 1fr; } }

  /* ---------- FINAL CTA (Figma "Ready to Build the Future" style) ---------- */
  .final-cta {
    background:
      radial-gradient(900px 500px at 50% 0%, rgba(21,93,252,0.08), transparent 60%),
      var(--bg-base);
    text-align: center;
  }
  .final-cta h2 {
    font-size: var(--fs-display-2);
    margin-bottom: var(--space-3);
  }
  .final-cta-sub {
    font-size: var(--fs-title-m);
    color: var(--ink-600);
    font-weight: 300;
    max-width: 720px;
    margin: 0 auto var(--space-4);
    line-height: 1.5;
  }
  .final-cta .accent-bar { margin: 0 auto 40px; }
  .final-cta-row { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
  .final-cta-meta {
    margin-top: 40px;
    font-size: var(--fs-meta);
    color: var(--ink-500);
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
  }
  .final-cta-meta span { display: flex; align-items: center; gap: var(--space-1); }

  /* ---------- HOW WE WORK — Accordion ---------- */
  .hww-section {
    background: var(--bg-soft);
    padding: clamp(60px, 9vw, 100px) var(--pad-x);
  }
  .hww-header { text-align: center; margin-bottom: var(--space-5); }
  .hww-eyebrow {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--brand);
    margin-bottom: 14px;
  }
  .hww-heading {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-display-2);
    font-weight: 300;
    color: var(--ink-900);
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0 0 14px;
  }
  .hww-heading em {
    font-style: normal;
    font-weight: 500;
    color: var(--brand);
  }
  .hww-subhead {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-title-m);
    font-weight: 300;
    color: var(--ink-600);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.5;
  }
  .hww-acc-row {
    display: flex;
    gap: var(--space-1);
    min-height: 220px;
    max-width: var(--container);
    margin: 0 auto;
  }
  .hww-acc-card {
    flex: 1;
    min-width: 0;
    max-width: none;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: #ffffff;
    border: 1px solid var(--ink-200);
    transition: flex var(--dur-slow) var(--ease-in-out),
                border-color var(--dur-base) ease,
                box-shadow var(--dur-base) ease;
  }
  .hww-acc-card.hww-active {
    flex: 2.8;
    border-color: #D1DEFF;
    box-shadow: 0 6px 24px rgba(21,93,252,0.09);
  }
  .hww-collapsed {
    position: absolute;
    inset: 0;
    padding: var(--space-4);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    opacity: 1;
    transition: opacity var(--dur-fast) ease;
    pointer-events: auto;
  }
  .hww-acc-card.hww-active .hww-collapsed {
    opacity: 0;
    pointer-events: none;
  }
  .hww-col-num {
    font-family: 'Outfit', sans-serif;
    font-size: var(--ps-text-h3);
    font-weight: 500;
    color: var(--ink-600);
    line-height: 1.25;
    letter-spacing: -0.02em;
  }
  .hww-col-title {
    font-family: 'Outfit', sans-serif;
    font-size: var(--ps-text-h3);
    font-weight: 500;
    color: var(--ink-900);
    line-height: 1.3;
    letter-spacing: -0.015em;
    white-space: normal;
    text-align: left;
    padding: 0;
    margin-top: 10px;
  }
  .hww-expanded {
    position: absolute;
    inset: 0;
    padding: var(--space-4);
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) ease var(--dur-fast);
    white-space: normal;
    overflow: hidden;
  }
  .hww-acc-card.hww-active .hww-expanded {
    opacity: 1;
    pointer-events: auto;
  }
  .hww-exp-num {
    font-family: 'Outfit', sans-serif;
    font-size: var(--ps-text-h3);
    font-weight: 500;
    color: var(--brand);
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
  }
  .hww-exp-title {
    font-family: 'Outfit', sans-serif;
    font-size: var(--ps-text-h3);
    font-weight: 500;
    color: var(--ink-900);
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-1);
  }
  .hww-exp-bar {
    width: 32px;
    height: 3px;
    border-radius: var(--radius-pill);
    background: var(--brand);
    margin-bottom: 10px;
  }
  .hww-exp-desc {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-title-m);
    font-weight: 300;
    color: var(--ink-600);
    line-height: 1.5;
    max-width: 520px;
  }
  /* Responsive */
  @media (max-width: 1100px) {
    .hww-section { padding: 60px 40px; }
    .hww-acc-row { flex-direction: column; height: auto; gap: 6px; }
    .hww-acc-card { flex: none !important; width: 100% !important; max-width: none !important; height: 64px; min-width: unset; border-radius: var(--radius); transition: height var(--dur-slow) var(--ease-in-out), border-color var(--dur-base) ease, box-shadow var(--dur-base) ease; }
    .hww-acc-card.hww-active { flex: none !important; height: 200px; }
    .hww-acc-card.hww-active { height: 200px; }
    .hww-collapsed { flex-direction: row; padding: 0 18px; align-items: center; justify-content: flex-start; gap: 14px; }
    .hww-col-title { text-align: left; font-size: var(--ps-text-h3); font-weight: 500; color: var(--ink-900); line-height: 1.3;}
    .hww-expanded { padding: 18px 22px; }
    .hww-exp-num { font-size: var(--ps-text-h3); margin-bottom: 6px; }
    .hww-exp-title { font-size: var(--ps-text-h3); margin-bottom: 6px; font-weight: 500; color: var(--ink-900); line-height: 1.3;}
    .hww-exp-desc { font-size: var(--fs-title-m); font-weight: 300; color: var(--ink-600); line-height: 1.5;}
  }
  @media(max-width:480px) {
    .hww-section { padding: var(--space-5) 20px; }
  }

  /* ---------- FOOTER — QualNetics dark navy ---------- */
  .footer {
    background: var(--bg-dark);
    padding: var(--space-7) 0 var(--space-4);
    border-top: none;
    color: rgba(255,255,255,0.7);
  }
  .footer-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: var(--space-5);
    margin-bottom: 56px;
  }
  .footer .logo,
  .footer .logo a { color: #FFFFFF; }
  .footer-brand p {
    font-size: var(--fs-title-m);
    color: var(--ink-600);
    line-height: 1.5;
    margin: var(--space-2) 0 var(--space-3);
    font-weight: 300;
  }
  .footer-contact { font-size: var(--fs-meta); color: rgba(255,255,255,0.75); }
  .footer-contact div { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
  .footer-contact svg { color: rgba(255,255,255,0.6); flex-shrink: 0; }
  .footer-col h5 {
    font-size: var(--fs-meta);
    font-weight: 500;
    color: #FFFFFF;
    margin: 0 0 18px;
  }
  .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
  .footer-col a {
    font-size: var(--fs-meta);
    color: rgba(255,255,255,0.6);
    transition: color var(--dur-fast);
  }
  .footer-col a:hover { color: #FFFFFF; }
  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: var(--space-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-meta);
    color: rgba(255,255,255,0.5);
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .footer-social { display: flex; gap: 12px; }
  .footer-social a {
    width: 36px; height: 36px;
    border-radius: var(--radius);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    display: grid; place-items: center;
    color: rgba(255,255,255,0.7);
    transition: all var(--dur-fast);
  }
  .footer-social a:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
  .footer-legal { display: flex; gap: 20px; }
  .footer-legal a { color: rgba(255,255,255,0.5); }
  .footer-legal a:hover { color: #FFFFFF; }
  @media (max-width: 1100px) {
    .footer-top { grid-template-columns: 1fr 1fr; }
  }
  @media(max-width:480px) {
    .footer-top { grid-template-columns: 1fr; gap: var(--space-4); }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
  }

  /* ---------- Reveal animation ---------- */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  .reveal.in {
    opacity: 1;
    transform: translateY(0);
  }

  /* ---------- CERTIFIED PARTNERSHIPS ---------- */
  .partners {
    background: transparent;
    padding: 40px var(--space-8);
    border-top: 1px solid var(--ink-200);
    border-bottom: 1px solid var(--ink-200);
  }
  /* partners-label defined above — no duplicate needed */
  .partners-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: nowrap;
  }
  .partner-card {
    background: #FFFFFF;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    width: 148px;
    height: 76px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px var(--space-2);
    transition: box-shadow var(--dur-base) ease, transform var(--dur-base) ease;
  }
  .partner-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    transform: translateY(-2px);
  }
  .partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  @media (max-width: 1100px) {
    .partners { padding: var(--space-4) 40px; }
    .partners-grid { flex-wrap: wrap; gap: 10px; }
    .partner-card { width: 130px; height: 68px; }
  }
  @media(max-width:480px) {
    .partners { padding: var(--space-3) 20px; }
    .partner-card { width: 120px; height: 64px; }
  }

  /* ---------- OUR SOLUTIONS — card grid ---------- */
  .sols-section { background:var(--bg-soft); padding:var(--space-7) 0; overflow:hidden; }
  .sols-headline-wrap { text-align:center; padding:0 var(--pad-x); margin-bottom:var(--space-4); }
  .sols-headline { font-family:'Outfit',sans-serif; font-size: var(--fs-display-2); font-weight:300; color:var(--ink-900); letter-spacing:-0.04em; line-height:1.2; margin-bottom:var(--space-1); }
  .sols-headline .sols-hl { color:var(--brand); font-weight:400; }
  .sols-headline-sub { font-family:'Outfit',sans-serif; font-size: var(--fs-title-m); font-weight: 300; color: var(--ink-600); margin-top:12px; line-height: 1.5; }
  .sols-tabs { display:flex; justify-content:center; margin-bottom:40px; background:#fff; border:1px solid var(--ink-200); border-radius:var(--radius-pill); padding:5px; width:fit-content; margin-left:auto; margin-right:auto; }
  .sols-tab { font-family:'Outfit',sans-serif; font-size:var(--fs-meta); font-weight:400; color:var(--ink-600); padding:10px var(--space-4); border-radius:var(--radius-pill); border:none; background:transparent; cursor:pointer; white-space:nowrap; transition:all var(--dur-fast) ease; }
  .sols-tab.active { background:var(--ink-900); color:#fff; font-weight:500; }
  .sols-tab:hover:not(.active) { color:var(--ink-900); }
  .sols-panel { display:none; }
  .sols-panel.active { display:block; }
  .sols-grid-wrap { padding:0 var(--pad-x); }
  .sols-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-2); }
  .sols-card { background:#fff; border:1px solid var(--ink-200); border-radius:var(--radius); padding:var(--space-4) 28px; display:flex; flex-direction:column; cursor:pointer; transition:border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease,transform var(--dur-fast) ease; }
  .sols-card:hover { border-color:var(--brand-border); box-shadow:0 8px 28px rgba(21,93,252,0.08); transform:translateY(-3px); }
  .sols-icon-wrap { width:64px; height:64px; flex-shrink:0; margin-bottom:20px; }
  
  .sols-icon-wrap { width:64px; height:64px; border-radius: var(--radius); background:linear-gradient(135deg,var(--brand-soft),#F4F8FF); border:1px solid #DCE5F7; display:flex; align-items:center; justify-content:center; color:var(--brand); margin-bottom:18px; }
  .sols-icon-svg svg { width:32px; height:32px; }
  .sols-panel-sub { font-family: 'Outfit', system-ui, -apple-system, sans-serif; font-size: var(--fs-eyebrow); font-weight:500; letter-spacing: normal; text-transform: none; color:var(--ink-600); text-align:center; margin:0 0 var(--space-3); }
  .sols-panel-cta { display:inline-flex; align-items:center; gap:var(--space-1); padding:12px var(--space-3); background:transparent; border:1px solid #DCE5F7; color:var(--brand); border-radius:var(--radius-pill); font-family:'Outfit',sans-serif; font-size:var(--fs-meta); font-weight:500; text-decoration:none; margin:var(--space-4) auto 0; display:flex; justify-content:center; width:fit-content; transition:background var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) ease; }
  .sols-panel-cta:hover { background:var(--brand-soft); border-color:var(--brand); transform:translateY(-1px); }
  .sols-name { font-family:'Outfit',sans-serif; font-size: var(--ps-text-h3); font-weight: 500; color: var(--ink-900); letter-spacing:-0.02em; line-height: 1.3; margin-bottom:12px; }
  .sols-desc { font-family:'Outfit',sans-serif; font-size: var(--fs-title-m); font-weight: 300; color: var(--ink-600); line-height: 1.5; flex:1; }
  .sols-explore-row { display:flex; align-items:center; justify-content:center; padding:28px var(--pad-x) 0; margin-top:var(--space-3); }
  .sols-count { font-family:'Outfit',sans-serif; font-size: var(--fs-meta); font-weight:300; color:var(--ink-600); }
  .sols-explore-btn { display:inline-flex; align-items:center; gap:var(--space-1); font-family:'Outfit',sans-serif; font-size:var(--fs-meta); font-weight:500; color:var(--ink-900); background:#fff; border:1px solid var(--ink-200); border-radius:var(--radius-pill); padding:10px 22px; cursor:pointer; transition:all var(--dur-fast) ease; text-decoration:none; }
  .sols-explore-btn:hover { background:var(--brand); color:#fff; border-color:var(--brand); }
  .sols-explore-btn svg { width:14px; height:14px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--dur-fast) ease; }
  .sols-explore-btn:hover svg { transform:translateX(3px); }
  @media (max-width: 1100px) { .sols-grid { grid-template-columns:repeat(2,1fr); } }
  @media(max-width:480px) { .sols-grid { grid-template-columns:1fr; } .sols-card { padding:28px var(--space-3); } }

  /* ---------- STATS BAND — QualNetics subdued stat row ---------- */
  .stats-band {
    background: var(--bg-soft);
    padding: var(--space-5) 0;
  }
  .stats-row-wrap {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--pad-x);
  }
  .stats-row {
    display: grid;
    grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr;
    align-items: center;
  }
  .stats-cell {
    padding: var(--space-1) 14px;
    text-align: center;
  }
  .stats-num {
    font-family: 'Outfit', sans-serif;
    font-size: var(--ps-text-h1);
    font-weight: 300;
    color: var(--ink-900);
    letter-spacing: -0.025em;
    line-height: 1;
    margin-bottom: 6px;
  }
  .stats-label {
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-meta);
    font-weight: 500;
    color: var(--ink-600);
    letter-spacing: 0.01em;
    line-height: 1.4;
  }
  .stats-div {
    background: var(--ink-200);
    align-self: stretch;
    width: 1px;
  }
  @media(max-width:768px) {
    .stats-row { grid-template-columns: 1fr 1px 1fr; row-gap: var(--space-2); }
    .stats-div:nth-of-type(2), .stats-div:nth-of-type(3) { display: none; }
  }

  /* ---------- PARTNERS — Scrolling logo marquee (Qualnetics-style) ---------- */
  .partners-section { padding: 72px 0; background: #FFFFFF; border-top: 1px solid var(--ink-200); border-bottom: 1px solid var(--ink-200); }
  .partners-section .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); }
  .partners-section .section-header { text-align: center; margin-bottom: var(--space-5); }
  .partners-section .eyebrow { font-family: 'Outfit', sans-serif; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--brand); display: inline-block; margin-bottom: 14px; }
  .partners-section .section-statement { font-family: 'Outfit', sans-serif; font-size: var(--fs-display-2); font-weight: 300; color: var(--ink-900); letter-spacing: -0.03em; line-height: 1.15; margin: 0; }
  .partners-section .section-statement em { font-style: normal; font-weight: 500; color: var(--brand); }
  .int-marquee-wrap { position: relative; mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); }
  .int-marquee-viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; }
  .int-marquee-viewport::-webkit-scrollbar { display: none; }
  .int-marquee-viewport:active { cursor: grabbing; }
  .int-marquee-track { display: flex; align-items: center; gap: 0; width: max-content; will-change: transform; transform: translate3d(0, 0, 0); }
  /* QualNetics-style grouped marquee (Deployment tech stack) */
  .int-group { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 0 var(--space-1); flex-shrink: 0; }
  .int-group-label { font-family: 'Outfit', system-ui, -apple-system, sans-serif; font-size: var(--fs-eyebrow); font-weight: 500; color: var(--ink-600); letter-spacing: normal; text-transform: none; white-space: nowrap; text-align: center; }
  .int-group-logos { display: flex; align-items: center; gap: var(--space-1); }
  .int-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 96px; padding: var(--space-1) 4px; user-select: none; }
  .int-logo img { width: 30px; height: 30px; object-fit: contain; pointer-events: none; transition: transform var(--dur-fast) ease; }
  .int-logo:hover img { transform: scale(1.1); }
  .int-logo span { font-size: var(--fs-meta); font-weight: 500; color: var(--ink-600); letter-spacing: -0.005em; white-space: nowrap; }
  .int-group-sep { width: 1px; height: 56px; background: var(--ink-200); margin: 0 28px; flex-shrink: 0; align-self: flex-end; margin-bottom: var(--space-1); }

  @media(max-width:480px) {
    .int-logo { min-width: 140px; padding: 0 var(--space-2); }
  }

  /* ---------- WHY PRIMESOFT — Core Capabilities style ---------- */
  .cc-section { padding: clamp(var(--space-7), 10vw, var(--space-8)) 0; background: #FFFFFF; }
  .cc-section .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); }
  .cc-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-7); align-items: start; }
  .cc-left { position: sticky; top: 100px; }
  .cc-left-eyebrow { display: block; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--brand); margin-bottom: 14px; }
  .cc-left-headline { font-family: 'Outfit', sans-serif; font-size: var(--fs-display-2); font-weight: 300; color: var(--ink-900); letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 20px; }
  .cc-left-headline strong { font-weight: 500; color: var(--brand); }
  .cc-left-sub { font-family: 'Outfit', sans-serif; font-size: var(--fs-title-m); font-weight: 300; color: var(--ink-600); line-height: 1.5; margin-bottom: 28px; }
  .cc-left-cta { display: inline-flex; align-items: center; gap: var(--space-1); font-family: 'Outfit', sans-serif; font-size: var(--fs-meta); font-weight: 500; color: #fff; background: var(--brand); border-radius: var(--radius-pill); padding: 12px var(--space-3); text-decoration: none; transition: background var(--dur-fast) ease, transform var(--dur-fast) ease; }
  .cc-left-cta:hover { background: var(--brand-hover); transform: translateY(-1px); }

  .cc-right { display: flex; flex-direction: column; gap: 0; counter-reset: cc-card-num; }
  .cc-card { counter-increment: cc-card-num; position: sticky; background: linear-gradient(180deg, #FFFFFF 0%, #FCFCFE 100%); border: 1px solid var(--ink-200); border-radius: var(--radius); padding: 36px 36px var(--space-4); margin-bottom: var(--space-3); box-shadow: 0 1px 0 rgba(16,24,40,0.02), 0 8px 24px -16px rgba(16,24,40,0.08); transition: border-color var(--dur-slow) ease, box-shadow var(--dur-slow) ease, transform var(--dur-base) ease; overflow: hidden; display: grid; grid-template-columns: 96px 1fr; gap: 28px; align-items: flex-start; }
  .cc-card::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(21,93,252,0.18) 50%, transparent 100%); opacity: 0.6; transition: opacity var(--dur-slow) ease, background var(--dur-slow) ease; }
  .cc-card::after { content: "0" counter(cc-card-num); position: absolute; top: 22px; right: 28px; font-family: 'Outfit', system-ui, -apple-system, sans-serif; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.16em; color: #C5CCD9; transition: color var(--dur-slow) ease; pointer-events: none; }
  .cc-card:hover { border-color: #D9E4FB; box-shadow: 0 4px 12px rgba(21,93,252,0.04), 0 18px 40px -18px rgba(21,93,252,0.18); transform: translateY(-2px); }
  .cc-card:hover::after { color: var(--brand); }
    .cc-card:nth-child(1) { top: 108px; z-index: 1; }
  .cc-card:nth-child(2) { top: 116px; z-index: 2; }
  .cc-card:nth-child(3) { top: 124px; z-index: 3; }
  .cc-card:nth-child(4) { top: 132px; z-index: 4; }
  .cc-card:nth-child(5) { top: 140px; z-index: 5; }
  .cc-card:nth-child(6) { top: 148px; z-index: 6; }
  .cc-card:last-child { margin-bottom: 0; }

  .cc-card-head { display: flex; align-items: flex-start; margin-bottom: 0; }
  .cc-card-icon { width: 88px; height: 88px; border-radius: var(--radius); background: linear-gradient(135deg, #F4F8FF 0%, var(--brand-soft) 60%, #E0EAFF 100%); border: 1px solid rgba(21,93,252,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 -1px 0 rgba(21,93,252,0.04), 0 6px 16px -8px rgba(21,93,252,0.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--brand); position: relative; transition: background var(--dur-base) ease, border-color var(--dur-base) ease, color var(--dur-base) ease, transform var(--dur-base) ease, box-shadow var(--dur-base) ease; }
  .cc-card-icon svg { width: 42px; height: 42px; stroke: currentColor; stroke-width: 1.5; transition: stroke var(--dur-base) ease, transform var(--dur-base) ease; position: relative; z-index: 1; }
  .cc-card-icon-img { width: 80px; height: 80px; object-fit: contain; position: relative; z-index: 1; transition: filter var(--dur-base) ease, transform var(--dur-base) ease; }
  .cc-card-icon:has(.cc-card-icon-img) { background: transparent; border: none; box-shadow: none; width: 80px; height: 80px; }
  .cc-card:has(.cc-card-icon-img) { grid-template-columns: 96px 1fr; gap: 22px; }
  .cc-card.cc-active .cc-card-icon:has(.cc-card-icon-img) { background: transparent; border: none; box-shadow: none; }
  .cc-card.cc-active .cc-card-icon-img { transform: scale(1.04); filter: drop-shadow(0 8px 18px rgba(21,93,252,0.18)); }
  .cc-card:hover .cc-card-icon { transform: scale(1.04); }

  .cc-card-content { display: flex; flex-direction: column; min-width: 0; }
  .cc-card-title { font-family: 'Outfit', sans-serif; font-size: var(--ps-text-h3); font-weight: 500; color: var(--ink-900); letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 10px; padding-right: 36px; transition: color var(--dur-base) ease; }
  .cc-card-sub { font-family: 'Outfit', sans-serif; font-size: var(--fs-title-m); font-weight: 300; color: var(--ink-600); line-height: 1.5; margin-bottom: 0; }

  .cc-card.cc-active { border-color: var(--brand-border); box-shadow: 0 1px 0 rgba(21,93,252,0.04), 0 18px 50px -18px rgba(21,93,252,0.22), inset 0 0 0 1px rgba(21,93,252,0.06); }
  .cc-card.cc-active::before { background: linear-gradient(90deg, transparent 0%, var(--brand) 30%, var(--brand-2) 70%, transparent 100%); opacity: 1; height: 2px; }
  .cc-card.cc-active::after { color: var(--brand); font-weight: 500; }
  .cc-card.cc-active .cc-card-icon { background: linear-gradient(135deg, var(--brand) 0%, #2270FF 50%, var(--brand-2) 100%); border-color: rgba(21,93,252,0.4); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.05), 0 12px 28px -10px rgba(21,93,252,0.5); }
  .cc-card.cc-active .cc-card-title { color: var(--ink-900); font-weight: 500; font-size: var(--ps-text-h3); line-height: 1.3;}

  @media (max-width: 1100px) {
    .cc-layout { grid-template-columns: 1fr; gap: 40px; }
    .cc-left { position: static; }
    .cc-card { position: relative !important; top: auto !important; z-index: auto !important; margin-bottom: var(--space-2) !important; }
  }
  @media(max-width:480px) {
    .cc-card { padding: var(--space-3); grid-template-columns: 1fr; gap: var(--space-2); }
    .cc-card-icon { width: 64px; height: 64px; border-radius: var(--radius); }
    .cc-card-icon svg { width: 32px; height: 32px; }
    .cc-card-title { font-size: var(--ps-text-h3); font-weight: 500; color: var(--ink-900); line-height: 1.3;}
  }

  /* ---------- FINAL CTA — QualNetics ag-section style (dark + inline pill) ---------- */
  .ag-section {
    position: relative;
    padding: clamp(40px, 5vw, var(--space-6)) 0;
    background: var(--bg-dark);
    overflow: hidden;
  }
  .ag-section::before {
    content: "";
    position: absolute;
    bottom: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 100%);
    height: 520px;
    background: radial-gradient(ellipse, rgba(21,93,252,0.22) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
  }
  .ag-section::after {
    content: "";
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 60% at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, black 30%, transparent 80%);
    pointer-events: none;
    z-index: 0;
  }
  .ag-section .container { position: relative; z-index: 2; }
  .ag-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
  }
  .ag-row-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    text-align: left; max-width: 65%; flex: 1 1 auto;}
  .ag-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    padding: var(--space-1) var(--space-2);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-pill);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: rgba(255,255,255,0.7);
  }
  .ag-eyebrow .pulse {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.18);
    animation: ag-pulse 2s ease-in-out infinite;
  }
  @keyframes ag-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }
  .ag-h2 {
    font-size: var(--fs-display-2);
    font-weight: 300;
    color: #FFFFFF;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin: 0;
  }
  .ag-h2 em {
    font-style: normal;
    font-weight: 500;
    color: #FFFFFF;
  }
  .ag-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 52px;
    padding: 0 28px;
    background: linear-gradient(120deg, var(--brand), var(--brand-3));
    color: #FFFFFF;
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-meta);
    font-weight: 500;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
    text-decoration: none;
    box-shadow: 0 14px 40px -14px rgba(21,93,252,0.7), inset 0 1px 0 rgba(255,255,255,0.2);
    transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease;
  }
  .ag-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 48px -14px rgba(21,93,252,0.85), inset 0 1px 0 rgba(255,255,255,0.25);
  }
  .ag-cta .arrow { transition: transform var(--dur-fast) ease; }
  .ag-cta:hover .arrow { transform: translateX(4px); }
  @media(max-width:768px) {
    .ag-row { flex-direction: column; align-items: flex-start; }
    .ag-h2 { font-size: var(--fs-display-2); }
  }

  /* ---------- FINAL CTA Modal — QualNetics fcta-* ---------- */
  .fcta-btn {
    display: inline-flex; align-items: center; gap: 10px;
    width: fit-content;
    height: 54px;
    padding: 0 28px;
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-body);
    font-weight: 500;
    border: none;
    cursor: pointer;
    box-shadow: 0 12px 32px rgba(21,93,252,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
    transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
  }
  .fcta-btn:hover {
    background: var(--brand);
    transform: translateY(-1px);
    box-shadow: 0 16px 40px rgba(21,93,252,0.55), inset 0 1px 0 rgba(255,255,255,0.22);
  }
  .fcta-btn .arrow { transition: transform var(--dur-fast) ease; }
  .fcta-btn:hover .arrow { transform: translateX(4px); }

  .fcta-overlay {
    position: fixed; inset: 0;
    background: rgba(6, 9, 20, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: center; justify-content: center;
    z-index: 1000;
    padding: var(--space-3);
    opacity: 0;
    transition: opacity var(--dur-base) ease;
  }
  .fcta-overlay.open { display: flex; opacity: 1; }
  .fcta-overlay.open .fcta-modal { transform: translateY(0) scale(1); opacity: 1; }
  .fcta-modal {
    background: #FFFFFF;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    box-shadow: 0 40px 100px rgba(16,24,40,0.18), 0 4px 12px rgba(16,24,40,0.06);
    width: 100%;
    max-width: 600px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: var(--space-4) 36px 28px;
    position: relative;
    transform: translateY(12px) scale(0.98);
    opacity: 0;
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) ease;
    /* Hide scrollbar (keeps scrolling functional if needed on small viewports) */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .fcta-modal::-webkit-scrollbar { display: none; }
  .fcta-modal-close {
    position: absolute;
    top: 18px; right: 18px;
    width: 36px; height: 36px;
    border-radius: var(--radius-pill);
    background: var(--bg-soft);
    border: 1px solid var(--ink-200);
    color: var(--ink-600);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--dur-fast) var(--ease-out);
  }
  .fcta-modal-close:hover { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-border); }
  .fcta-modal-eyebrow {
    display: inline-block;
    font-size: var(--fs-eyebrow); font-weight: 500;
    letter-spacing: normal; text-transform: none;
    color: var(--brand); margin-bottom: 12px;
  }
  .fcta-modal-title {
    font-family: 'Outfit', sans-serif;
    font-size: var(--ps-text-h3); font-weight: 500;
    color: var(--ink-900); letter-spacing: -0.02em;
    line-height: 1.3; margin-bottom: 6px;
  }
  .fcta-modal-sub {
    font-size: var(--fs-title-m); font-weight: 300;
    color: var(--ink-600); line-height: 1.5;
    margin-bottom: 20px;
  }
  .fcta-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .fcta-field { display: flex; flex-direction: column; gap: 6px; }
  .fcta-field.full { grid-column: span 2; }
  .fcta-field label {
    font-size: var(--fs-eyebrow); font-weight: 500;
    letter-spacing: 0.04em; color: var(--ink-900);
  }
  .fcta-field input,
  .fcta-field textarea {
    background: #FFFFFF;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    padding: 12px 14px;
    color: var(--ink-900);
    font-family: inherit;
    font-size: var(--fs-meta); font-weight: 400;
    transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
    outline: none;
  }
  .fcta-field input::placeholder,
  .fcta-field textarea::placeholder { color: var(--ink-600); font-weight: 300; }
  .fcta-field input:focus,
  .fcta-field textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(21,93,252,0.15);
  }
  .fcta-field textarea { resize: vertical; min-height: 76px; }
  .fcta-submit { width: 100%; justify-content: center; margin-top: 14px; }
  .fcta-form-note {
    font-size: var(--fs-eyebrow); font-weight: 300;
    color: var(--ink-600); text-align: center;
    margin-top: 10px;
  }
  body.fcta-modal-open { overflow: hidden; }
  @media(max-width:480px) {
    .fcta-modal { padding: 28px 22px var(--space-3); }
    .fcta-fields { grid-template-columns: 1fr; }
    .fcta-field.full { grid-column: span 1; }
    .fcta-modal-title { font-size: var(--ps-text-h3); font-weight: 500; color: var(--ink-900); line-height: 1.3;}
  }

  /* ---------- HEADER LOGO + NAV LAYOUT (QualNetics style) ---------- */

  .header-actions .btn-primary {
    height: 44px;
    padding: 0 20px;
    font-size: var(--fs-meta);
    background: var(--brand);
    color: #fff;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    transition: background var(--dur-fast) ease, transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
    box-shadow: 0 8px 24px -8px rgba(21,93,252,0.45);
  }
  .header-actions .btn-primary:hover {
    background: var(--brand-hover);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -10px rgba(21,93,252,0.55);
  }
  .header-actions .btn-primary .arrow { transition: transform var(--dur-fast) ease; display: inline-block; }
  .header-actions .btn-primary:hover .arrow { transform: translateX(4px); }
  @media (max-width: 1100px) {  }

  /* ---------- Accessibility primitives ---------- */
  :focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: var(--radius);
  }
  .skip-link {
    position: absolute;
    top: -48px;
    left: 16px;
    background: var(--brand);
    color: #FFFFFF;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-meta);
    font-weight: 500;
    z-index: 9999;
    transition: top var(--dur-fast) var(--ease-out);
  }
  .skip-link:focus { top: 12px; }

  /* ---------- Canonical button system (BEM) ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 28px;
    border-radius: var(--radius-pill);
    font-family: 'Outfit', sans-serif;
    font-size: var(--fs-body);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                background var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out);
  }
  .btn .arrow { transition: transform var(--dur-fast) var(--ease-out); display: inline-block; }
  .btn:hover .arrow { transform: translateX(4px); }
  .btn--primary {
    background: var(--brand);
    color: #fff;
    box-shadow: var(--shadow-blue);
  }
  .btn--primary:hover {
    background: var(--brand-hover);
    transform: translateY(-2px);
    box-shadow: 0 18px 48px -14px rgba(21,93,252,0.85);
  }
  .btn--secondary {
    background: var(--bg-white);
    color: var(--brand);
    border-color: var(--brand);
  }
  .btn--secondary:hover {
    background: var(--brand-soft);
  }
  .btn--ghost {
    background: transparent;
    color: var(--brand);
    padding: 0;
    height: auto;
    border: none;
  }
  .btn--sm { height: 44px; padding: 0 20px; font-size: var(--fs-meta); }

  /* Aliases — legacy classes inherit canonical styles to keep markup unchanged
     while still letting new work use .btn--primary etc. */
  .btn-primary:not(.btn) { /* legacy support — same look as .btn--primary */ }
  .ag-cta, .fcta-btn, .cc-left-cta, .why-left-cta { /* visually similar primary pills */ }

  /* ---------- Contract & Vendor Optimizer — composed reuse ---------- */
  /* What CVO Delivers — 5-card grid using number badges (no sticky scroll) */
  .cvo-deliver-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
  }
  .cvo-deliver-grid .cvo-deliver-card:nth-child(4) { grid-column: 1 / 2; }
  .cvo-deliver-grid .cvo-deliver-card:nth-child(5) { grid-column: 2 / 4; }
  .cvo-deliver-card {
    background: var(--bg-white);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
  }
  .cvo-deliver-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-border);
  }
  .cvo-deliver-card .cvo-num {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-size: var(--fs-meta);
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--brand);
    flex-shrink: 0;
    line-height: 1.5;
  }
  .cvo-deliver-card .cvo-card-body h3 {  
    font-size: var(--ps-text-h3);
    font-weight: 500;
    color: var(--ink-900);
    letter-spacing: -0.02em;
    margin: 0 0 6px;
      line-height: 1.3;
    }
  .cvo-deliver-card .cvo-card-body p {
    font-size: var(--fs-title-m);
    font-weight: 300;
    color: var(--ink-600);
    line-height: 1.5;
    margin: 0;
  }
  @media (max-width: 1100px) {
    .cvo-deliver-grid { grid-template-columns: repeat(2, 1fr); }
    .cvo-deliver-grid .cvo-deliver-card:nth-child(4),
    .cvo-deliver-grid .cvo-deliver-card:nth-child(5) { grid-column: auto; }
  }
  @media (max-width: 768px) {
    .cvo-deliver-grid { grid-template-columns: 1fr; }
  }

  /* Outcome line on cc-card (matches QualNetics pattern) */
  .cvo-outcome {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(90deg, rgba(21,93,252,0.05) 0%, rgba(21,93,252,0.01) 100%);
    border-left: 2px solid var(--brand-border);
    border-radius: 0 8px 8px 0;
    margin-top: 14px;
    font-size: var(--fs-meta);
    font-weight: 500;
    color: var(--ink-700);
  }
  .cvo-outcome svg { width: 12px; height: 12px; color: var(--brand); flex-shrink: 0; margin-top: 3px; }

  /* Chips */
  .cvo-chips-row { text-align: center; margin-bottom: var(--space-5); }
  .cvo-chips-label {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--ink-500);
    text-transform: uppercase;
    margin-bottom: 12px;
  }
  .cvo-chips {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1);
    max-width: 760px;
  }
  .cvo-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--brand-soft);
    border: 1px solid #DCE5F7;
    border-radius: var(--radius-pill);
    font-size: var(--fs-meta);
    font-weight: 500;
    color: var(--ink-700);
  }
  .cvo-chip--alt { background: var(--bg-white); border-color: var(--ink-200); }

  /* 3-col feature cards (Risk & Compliance) */
  .cvo-3col-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
  }
  /* 2x2 feature grid (Spend Intelligence) */
  .cvo-2x2-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
  .cvo-feature-card {
    background: var(--bg-white);
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    padding: 36px 22px;
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out); text-align: center;}
  .cvo-feature-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-border);
  }
  .cvo-feature-card h3 {  
    font-size: var(--ps-text-h3);
    font-weight: 500;
    color: var(--ink-900);
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-1);
      line-height: 1.3;
    }
  .cvo-feature-card p {
    font-size: var(--fs-title-m);
    font-weight: 300;
    color: var(--ink-600);
    line-height: 1.5;
    margin: 0;
  }
  @media (max-width: 1100px) {
    .cvo-3col-grid { grid-template-columns: repeat(2, 1fr); }
    .cvo-2x2-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 768px) {
    .cvo-3col-grid { grid-template-columns: 1fr; }
  }

  /* Why CVO — inline 3-col */
  .cvo-why-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    max-width: var(--container);
    margin: 0 auto;
  }
  .cvo-why-item h3 {  
    font-size: var(--ps-text-h3);
    font-weight: 500;
    color: var(--ink-900);
    letter-spacing: -0.015em;
    margin: 0 0 var(--space-1); line-height: 1.3;  }
  .cvo-why-item p {
    font-size: var(--fs-title-m);
    font-weight: 300;
    color: var(--ink-600);
    line-height: 1.5;
    margin: 0;
  }
  @media (max-width: 1100px) {
    .cvo-why-row { grid-template-columns: 1fr; gap: var(--space-3); text-align: left; }
  }

  /* Hero CTA on dark — adjust btn--primary visibility */
  .hero .btn--primary { box-shadow: 0 14px 40px -14px rgba(21,93,252,0.7); }

  /* ISA What Delivers split (image left + numbered rows right) — ported from intelligent-support.html */
  .isa-deliver-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; max-width: var(--container); margin: 0 auto; }
  .isa-deliver-split .imgcol img { width: 100%; height: auto; display: block; }
  .isa-deliver-list { display: flex; flex-direction: column; gap: 14px; }
  .isa-deliver-row { padding: 14px 0; border-bottom: 1px solid #ECEEF3; display: flex; gap: var(--space-2); align-items: flex-start; }
  .isa-deliver-row:last-child { border-bottom: none; }
      .isa-deliver-row .num {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    font-size: var(--ps-text-h3);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--brand);
    flex-shrink: 0;
    width: 48px;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
  }
  .isa-deliver-row h3 {   font-size: var(--ps-text-h3); font-weight: 500; color: var(--ink-900); letter-spacing: -0.02em; margin: 0 0 3px; line-height: 1.3;   }
  .isa-deliver-row p { font-size: var(--fs-title-m); font-weight: 300; color: var(--ink-600); line-height: 1.5; margin: 0; }
  @media (max-width: 1100px) { .isa-deliver-split { grid-template-columns: 1fr; gap: var(--space-4); } }

  /* Platform Architecture — ISA Channels editorial tiles (3-col for 6 cards, bordered, sleek icons) */
  .isa-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: var(--container); margin: 0 auto; }
  .isa-channel-cell { padding: 36px 22px; text-align: center; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
  .isa-channel-cell:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16,24,40,0.06); border-color: var(--ink-400); }
  .isa-channel-cell .icon { width: 80px; height: 80px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; }
  .isa-channel-cell .icon img { width: 100%; height: 100%; object-fit: contain; }
  .isa-channel-cell .icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
  .isa-channel-cell h3 {   font-family: 'Outfit', sans-serif; font-size: var(--ps-text-h3); font-weight: 500; color: var(--ink-900); letter-spacing: -0.02em; margin: 0 0 var(--space-1);     line-height: 1.3;
    }
  .isa-channel-cell p { font-family: 'Outfit', sans-serif; font-size: var(--fs-title-m); font-weight: 300; color: var(--ink-600); line-height: 1.5; margin: 0; }
  @media (max-width: 1100px) { .isa-channels { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .isa-channels { grid-template-columns: 1fr; } }

  /* Core Capabilities — Read-more toggle (ported from ISA / DSA Platform Capabilities) */
  .cc-card-collapsible { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
  .cc-card-collapsible > .cc-card-collapsible-inner { min-height: 0; overflow: hidden; }
  .cc-card.cc-expanded .cc-card-collapsible { grid-template-rows: 1fr; }
  .cc-card-collapsible-inner > * + * { margin-top: 14px; }
  .cc-card-desc { font-family: 'Outfit', sans-serif; font-size: var(--fs-title-m); font-weight: 300; color: var(--ink-600); line-height: 1.5; margin: 0 0 14px; }
  .cc-card-toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 0; background: none; border: none; font-family: 'Outfit', sans-serif; font-size: var(--fs-meta); font-weight: 500; color: var(--brand); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out); }
  .cc-card-toggle:hover { color: var(--brand-hover); gap: 9px; }
  .cc-card-toggle-chev { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-slow) var(--ease-out); }
  .cc-card.cc-expanded .cc-card-toggle-chev { transform: rotate(180deg); }

  /* Business Outcomes — ISA Business Impact (Variant 2 stat cards) — ported from intelligent-support.html */
  .imp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: var(--container); margin: 0 auto; }
  .imp-card { position: relative; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius); padding: var(--space-4) 26px 28px; overflow: hidden; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
  .imp-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16,24,40,0.08); }
  .imp-stat .big { font-family: 'Outfit', sans-serif; font-size: var(--ps-text-h1); font-weight: 300; color: var(--ink-900); letter-spacing: -0.03em; line-height: 1; }
  .imp-stat .big .pct { font-size: var(--fs-body); font-weight: 300; color: var(--ink-500); margin-left: 2px; }
  .imp-divider { width: 32px; height: 2px; background: var(--brand); margin: 18px 0 var(--space-2); }
  .imp-card h4 {  font-family: 'Outfit', sans-serif; font-size: var(--ps-text-h3); font-weight: 500; color: var(--ink-900); margin: 0 0 var(--space-1); line-height: 1.3;     letter-spacing: -0.02em;
   }
  .imp-card p { font-family: 'Outfit', sans-serif; font-size: var(--fs-title-m); font-weight: 300; line-height: 1.5; color: var(--ink-600); margin: 0; }
  @media (max-width: 1100px) { .imp-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .imp-grid { grid-template-columns: 1fr; } }

  /* WHY section — Circular cycle layout (ported from DSA Why) */
  .why-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; max-width: var(--container); margin: 0 auto; }
  .why-img-box { display: flex; align-items: center; justify-content: center; min-height: 380px; }
  .why-img-box svg { width: 100%; height: auto; max-height: 420px; display: block; }
  .why-principles { display: flex; flex-direction: column; gap: 4px; }
  .why-row { display: grid; grid-template-columns: 24px 1fr; gap: 18px; align-items: start; padding: 18px 0; border-bottom: 1px solid #ECEEF3; }
  .why-row:last-child { border-bottom: none; }
  .why-row .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); margin-top: 7px; justify-self: center; box-shadow: 0 0 0 4px rgba(21,93,252,0.12); }
  .why-row h4 {  font-family: 'Outfit', sans-serif; font-size: var(--ps-text-h3); font-weight: 500; letter-spacing: -0.01em;  color: var(--ink-900); margin: 0 0 6px; line-height: 1.3; }
  .why-row p { font-family: 'Outfit', sans-serif; font-size: var(--fs-title-m); font-weight: 300; line-height: 1.5; color: var(--ink-600); margin: 0; }
  @media (max-width: 980px) { .why-split { grid-template-columns: 1fr; } }

  /* Light navbar variant — applied when scrolled past hero */
  .header.is-light { background: rgba(255, 255, 255, 0.95) !important; border-bottom: 1px solid rgba(229, 231, 235, 0.6) !important; backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); }
  .header.is-light .nav a,
  .header.is-light .header-nav a,
  .header.is-light .nav-dropdown-trigger { color: var(--ink-900) !important; }
  .header.is-light a[aria-label="PrimeSoft home"] img { filter: none !important; }

  
  .nav a, 
  .header a[aria-label="PrimeSoft home"] img { transition: filter 0.3s ease; }

  /* === Header (synced from qualnetics) === */
  .header{position:sticky;top:0;z-index:100;background: rgba(255, 255, 255, 0.95);backdrop-filter:saturate(180%) blur(18px);border-bottom: 1px solid rgba(229, 231, 235, 0.6);padding:var(--space-2) var(--pad-x);display:flex;align-items:center;}
  .header { transition: background 0.3s ease, border-color 0.3s ease; }
  .header-logo{flex:1 0 0;display:flex;align-items:center;}
  .header-logo img{height:50px;width:auto;object-fit:contain;}
  .header-nav{flex:1;display:flex;align-items:center;justify-content:center;gap:28px;}
  .header-nav a{font-size:var(--fs-body);font-weight:500;color: var(--ink-900);letter-spacing:0.2px;white-space:nowrap;transition:color var(--dur-fast);}
  .header-nav a:hover,.header-nav a.active{color:var(--brand);}
    .header-actions{flex:1 0 0;display:flex;align-items:center;justify-content:flex-end;gap:12px;}
  
  /* === Dropdown rules (restored from qualnetics) === */
  .nav-dropdown { position:relative;display:flex;align-items:center; }
  .nav-dropdown-trigger { font-family:'Outfit',sans-serif;font-weight:500;font-size:var(--fs-body);letter-spacing:0.2px;color: var(--ink-900);white-space:nowrap;transition:color var(--dur-fast) ease;cursor:pointer;display:flex;align-items:center;gap:5px;background:none;border:none;padding:0; }
  .nav-dropdown-trigger:hover { color:var(--brand); }
  .nav-dropdown-trigger svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;transition:transform var(--dur-base) ease; }
  .nav-dropdown:hover .nav-dropdown-trigger svg { transform: rotate(180deg); }

  .nav-dropdown-menu { position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);background:#fff;border:1px solid var(--ink-200);border-radius: var(--radius);box-shadow:0 12px 36px rgba(16,24,40,0.12);min-width:240px;padding:var(--space-1);opacity:0;visibility:hidden;transition:opacity var(--dur-base) ease,transform var(--dur-base) ease,visibility var(--dur-base) ease;z-index:200; }
  .nav-dropdown:hover .nav-dropdown-menu { opacity:1;visibility:visible;transform:translateX(-50%) translateY(0); }
  .nav-dropdown-item { display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius: var(--radius);text-decoration:none;transition:background var(--dur-fast) ease; }
  .nav-dropdown-item:hover { background:var(--bg-soft); }
  .nav-dropdown-icon { width:36px;height:36px;border-radius: var(--radius);background:var(--brand-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--dur-fast) ease; }
  .nav-dropdown-item:hover .nav-dropdown-icon { background:var(--brand); }
  .nav-dropdown-icon svg { width:18px;height:18px;stroke:var(--brand);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--dur-fast) ease; }
  .nav-dropdown-item:hover .nav-dropdown-icon svg { stroke:#fff; }
  .nav-dropdown-label { font-size:var(--fs-meta);font-weight:500;color:var(--ink-900);line-height:1.2; }
  .nav-dropdown-sub { font-size:var(--fs-body);font-weight:300;color:var(--ink-600);margin-top:1px; }
  .nav-dropdown-trigger { transition: color 0.3s ease; }
  
  /* Deployment Options icon container */
  .cvo-feature-card .deploy-icon { width: 80px; height: 80px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; }
  .cvo-feature-card .deploy-icon img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur-base) ease; }
  .cvo-feature-card:hover .deploy-icon img { transform: scale(1.05); }
  .cvo-feature-card { text-align: center; }
  .cvo-feature-card h3 {   text-align: center; font-size: var(--ps-text-h3); font-weight: 500; color: var(--ink-900); line-height: 1.3;  }
  .cvo-feature-card p { text-align: center; font-size: var(--fs-title-m); font-weight: 300; color: var(--ink-600); line-height: 1.5;}

  /* Deployment Options - Technology sub-heading */
  .deploy-tech-heading { text-align: center; margin-top: 40px; margin-bottom: var(--space-3); }
  .deploy-tech-heading .eyebrow { display: inline-block; }

  /* Prevent single-word widow on heading wraps (modern browsers; gracefully ignored on old ones) */
  h1, h2, h3, .section-header h2, .cc-left-headline, .hww-heading, .po-title, .sols-headline, .ag-h2 {
    text-wrap: balance;
  }


  /* ═══════════════════════════════════════════════════════════════════════
     Button system normalization — 1 size (44px height / 14px text / 20px
     side padding / 999px radius / 500 weight) applied to every button-like
     class on every page. Color/fill/border rules from existing classes are
     preserved — primary stays filled-blue, secondary/outline stays outlined.
     Only the dimensions are unified.
     ═══════════════════════════════════════════════════════════════════════ */
  .btn, .btn-primary, .btn--primary, .btn-secondary,
  .hero-cta-btn, .ag-cta, .cc-left-cta, .cc-left-cta-blue,
  .fcta-btn, .fcta-submit, .view-all-btn, .sols-panel-cta,
  .hww-btn-primary, .hww-btn-outline, .header-btn,
  .lead-cta-card, .poc-cta, .sf-cta-btn-p, .sf-cta-btn-s {
    height: 44px !important;
    padding: 0 20px !important;
    font-size: var(--fs-meta) !important;
    font-weight: 500 !important;
    border-radius: var(--radius-pill) !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-1) !important;
    white-space: nowrap !important;
  }

  /* No-italics sitewide override — force normal font-style on em/i/etc. */
  em, i, cite, dfn, var, address, .em, [class*="em-"] { font-style: normal !important; }


  /* ═══════════════════════════════════════════════════════════════════════
     RESPONSIVE FIXES — appended for full mobile support (additive only)
     P3: overflow-x guard   P5: touch targets   P7: footer 1-col
     ═══════════════════════════════════════════════════════════════════════ */

  /* P3 — prevent horizontal scroll on the whole page */
  html, body { overflow-x: clip; }

  /* P7 — footer collapses to single column on very small screens */
  @media (max-width: 480px) {
    .footer-top { grid-template-columns: 1fr !important; gap: var(--space-4) !important; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
    .footer-social, .footer-legal { justify-content: center; }
  }

  /* P5 — enforce minimum touch target size on touch devices only */
  @media (hover: none) and (pointer: coarse) {
    .btn, .btn-primary, .btn-secondary, .btn--primary,
    .cs-page, .cs-chip, .filter-chip, .nav-dropdown-trigger,
    .header-nav a, .cu-btn, .hero-cta-btn, .fcta-trigger,
    .ag-cta, button.btn, a.btn, .lms-btn, .db-btn {
      min-height: 44px;
    }
    .cs-page.cs-page-arrow, .icon-btn, .cs-tool-btn {
      min-height: 44px; min-width: 44px;
    }
  }


  /* P1 — mobile nav collapse (missing on solution pages) */
  @media (max-width: 1100px) {
    .header-nav { display: none !important; }
    .header .header-actions .btn:not(.btn-primary) { display: none; }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     MOBILE HAMBURGER + SLIDE-IN DRAWER (below 1100px)
     ═══════════════════════════════════════════════════════════════════════ */

  .hamburger {
    display: none;
    width: 44px; height: 44px;
    border: none; background: transparent;
    color: var(--ink-900); cursor: pointer;
    align-items: center; justify-content: center;
    border-radius: var(--radius);
    margin-left: var(--space-1);
    -webkit-tap-highlight-color: transparent;
  }
  .hamburger:hover { background: var(--bg-soft); }
  .hamburger svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

  .mobile-backdrop {
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.55);
    z-index: 998;
    opacity: 0; visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .mobile-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 88%; max-width: 380px;
    background: #FFFFFF;
    z-index: 999;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column;
    overflow-y: auto;
    box-shadow: -20px 0 60px rgba(15,23,42,0.16);
  }

  body.mobile-menu-open { overflow: hidden; }
  body.mobile-menu-open .mobile-backdrop { opacity: 1; visibility: visible; }
  body.mobile-menu-open .mobile-drawer { transform: translateX(0); }

  .mobile-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-2) 20px;
    border-bottom: 1px solid #ECEEF3;
    flex-shrink: 0;
  }
  .mobile-drawer-head img { height: 36px; width: auto; display: block; }
  .mobile-drawer-close {
    width: 40px; height: 40px;
    border: none; background: transparent;
    color: var(--ink-900); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius);
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-drawer-close:hover { background: var(--bg-soft); }
  .mobile-drawer-close svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

  .mobile-drawer-nav {
    flex: 1;
    padding: 12px 14px;
    display: flex; flex-direction: column;
    gap: 2px;
  }
  .mobile-drawer-nav > a {
    padding: 13px 14px;
    font-size: var(--fs-body); font-weight: 500;
    color: var(--ink-900);
    text-decoration: none;
    border-radius: var(--radius);
    transition: background 0.15s ease, color 0.15s ease;
  }
  .mobile-drawer-nav > a:hover { background: var(--bg-soft); color: var(--brand); }

  .mobile-drawer-nav details { border-radius: var(--radius); }
  .mobile-drawer-nav summary {
    padding: 13px 14px;
    font-size: var(--fs-body); font-weight: 500;
    color: var(--ink-900);
    cursor: pointer;
    list-style: none;
    display: flex; align-items: center; justify-content: space-between;
    border-radius: var(--radius);
    transition: background 0.15s ease, color 0.15s ease;
  }
  .mobile-drawer-nav summary::-webkit-details-marker { display: none; }
  .mobile-drawer-nav summary::after {
    content: '';
    width: 8px; height: 8px;
    border-right: 2px solid var(--ink-600);
    border-bottom: 2px solid var(--ink-600);
    transform: rotate(45deg);
    transition: transform 0.22s ease;
    margin-right: 6px;
  }
  .mobile-drawer-nav details[open] summary::after {
    transform: rotate(-135deg);
  }
  .mobile-drawer-nav summary:hover { background: var(--bg-soft); color: var(--brand); }

  .mobile-submenu {
    padding: 2px 0 6px 12px;
    display: flex; flex-direction: column; gap: 1px;
  }
  .mobile-submenu a {
    padding: 10px 14px;
    font-size: var(--fs-meta); font-weight: 400;
    color: var(--ink-600);
    text-decoration: none;
    border-radius: var(--radius);
    transition: background 0.15s ease, color 0.15s ease;
  }
  .mobile-submenu a:hover { background: var(--bg-soft); color: var(--brand); }

  .mobile-drawer-cta {
    padding: 14px 20px 20px;
    border-top: 1px solid #ECEEF3;
    flex-shrink: 0;
  }
  .mobile-drawer-cta a {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 48px;
    background: var(--brand); color: #fff;
    border-radius: var(--radius-pill);
    font-size: var(--fs-body); font-weight: 500;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(21,93,252,0.28);
  }
  .mobile-drawer-cta a:hover { background: #0F4CD8; }

  @media (max-width: 1100px) {
    .hamburger { display: inline-flex; }
    .header .header-actions { display: none !important; }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     HD DESKTOP (≥ 1441px) — wider container + generous whitespace
     Additive only. Existing clamp() typography maxes are respected.
     ═══════════════════════════════════════════════════════════════════════ */
  @media (min-width: 1441px) {
    /* Wider content area — was 1280px, now 1440px on HD screens */
    :root { --container: 1440px; }

    /* Container padding gets more generous */
    .container, .hero-content, .cs-shell {
      padding-left: clamp(40px, 6vw, var(--space-8));
      padding-right: clamp(40px, 6vw, var(--space-8));
    }

    /* Hero sections breathe */
    .hero, .case-fullbleed-hero, .cu-hero {
      padding-top: clamp(96px, 8vw, 140px);
      padding-bottom: clamp(72px, 6vw, 108px);
    }

    /* Section headers space more generously */
    .sec-head, .hww-header, .impact-intro, .section-header,
    .f1-head, .cvo-hero-grid { margin-bottom: clamp(var(--space-5), 4vw, 72px); }

    /* Case-study title block */
    .case-header { padding-top: clamp(var(--space-7), 7vw, var(--space-8)); padding-bottom: clamp(var(--space-5), 4vw, 72px); }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     SMALL MOBILE (≤ 430px) — tighter section padding + smaller headings
     Covers heroes, F1 flow, HWW, impact, ISA deliver, CTAs, buttons
     ═══════════════════════════════════════════════════════════════════════ */
  @media (max-width: 430px) {
    /* Universal container padding */
    .container, .hero-content, .cs-shell { padding-left: var(--space-2); padding-right: var(--space-2); }

    /* Case-study title block */
    .case-title { font-size: var(--fs-display-1) !important; letter-spacing: -0.02em; line-height: 1.1; }
    .case-subtitle { font-size: var(--fs-body) !important; line-height: 1.55; }
    .case-header { padding: var(--space-4) 0 var(--space-3) !important; }
    .case-tag { font-size: var(--fs-eyebrow) !important; padding: 4px 10px !important; }

    /* Case-study hero */
    .case-fullbleed-hero { padding: var(--space-4) 0 !important; }
    .mockup-tagline { font-size: var(--fs-display-1) !important; line-height: 1.15; }
    .mockup-logo img { height: 72px !important; }
    .hero-lede { font-size: var(--fs-body) !important; line-height: 1.55; }

    /* Contact hero */
    .cu-hero { padding: 40px var(--space-2) !important; }
    .cu-head h1 { font-size: var(--fs-display-1) !important; line-height: 1.1; }
    .cu-head p.lede { font-size: var(--fs-body) !important; }
    .cu-card { padding: var(--space-3) 20px !important; border-radius: var(--radius) !important; }

    /* Section headers everywhere */
    .sec-h2, .hww-heading, .impact-intro h2, .section-header h2, .f1-headline,
    .cvo-hero-grid h1, .isa-hero-grid h1, .dsa-hero-grid h1 {
      font-size: var(--fs-display-1) !important;
      line-height: 1.15;
      letter-spacing: -0.02em;
    }
    /* legacy 14.5px rule removed — canonical 18px owns mobile */

    /* F1 vertical flow */
    .f1-section { padding: 40px 0 !important; }
    .f1-pain-chip { font-size: var(--fs-eyebrow) !important; padding: 7px 12px !important; }
    .f1-sol-card { padding: 12px 14px !important; font-size: var(--fs-meta) !important; }
    .f1-transform-caption { font-size: var(--fs-meta) !important; }
    .f1-outcomes { padding: 20px var(--space-2) !important; grid-template-columns: 1fr 1fr !important; gap: 20px 12px !important; }
    .f1-out-val { font-size: var(--fs-stat) !important; }
    .f1-out-cap { font-size: var(--fs-eyebrow) !important; }

    /* How It Works (deel timeline) */
    .hww-header { margin-bottom: var(--space-4) !important; }
    .deel-timeline { padding: 0 4px !important; }
    .deel-card p { font-size: var(--fs-meta) !important; line-height: 1.5; }

    /* Impact grid */
    .impact { padding: var(--space-5) 0 !important; }
    .impact-intro { margin-bottom: var(--space-4) !important; }
    .impact-num { font-size: var(--fs-stat) !important; }
    .impact-label { font-size: var(--fs-meta) !important; }
    .impact-sub { font-size: var(--fs-eyebrow) !important; line-height: 1.45; }
    .impact-cell { padding: 20px var(--space-2) !important; }

    /* Solution ISA-deliver rows (case-study solution section) */
    .isa-deliver-split { padding: var(--space-4) 0 !important; gap: var(--space-3) !important; }
    .isa-deliver-row { padding: 12px 0 !important; gap: 12px !important; }
    .isa-deliver-row .num { font-size: var(--ps-text-h3) !important; min-width: 32px !important; }
    .isa-deliver-row h3 { font-size: var(--fs-body) !important; }

    /* Video walkthrough */
    .video-block { padding: 40px 0 !important; }
    .video-frame { aspect-ratio: 16 / 9; height: auto !important; }

    /* Related cases */
    .related { padding: var(--space-5) 0 !important; }
    .related-card { padding: 20px !important; }
    .related-card h3 { font-size: var(--fs-body) !important; }

    /* Buttons — hero CTAs full-width */
    .hero-cta-btn, .fcta-trigger, .btn--primary,
    .cs-hero-block .btn, .hero-inner .btn, .case-header .btn {
      max-width: 100% !important;
    }
    .hero-cta-btn, a.fcta-trigger, .cta-btn-primary {
      width: 100% !important; justify-content: center !important;
    }

    /* Case-studies list page */
    .cs-shell { padding: 40px var(--space-2) !important; }
    .cs-title { font-size: var(--fs-display-1) !important; }
    .cs-lede { font-size: var(--fs-meta) !important; }
    .cs-card-cover { min-height: 160px !important; padding: 12px 14px !important; }
    .cs-card-title { font-size: var(--fs-body) !important; }
    .cs-card-desc { font-size: var(--fs-meta) !important; line-height: 1.5; }
    .cs-pagination { gap: 4px !important; }
    .cs-page { min-width: 40px; height: 40px; font-size: var(--fs-meta); }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     HD DESKTOP v2 (≥ 1441px) — comprehensive scaling
     Typography maxes, viewport-scaling spacing, larger structural elements.
     Fixes "designed for 1366, looks small on 1920" problem.
     ═══════════════════════════════════════════════════════════════════════ */
  

  /* ═══════════════════════════════════════════════════════════════════════
     BUSINESS OUTCOMES · .po-* responsive scaling
     Currently .po-* has fixed sizes with no HD scale-up or mobile scale-down.
     ═══════════════════════════════════════════════════════════════════════ */

  @media (min-width: 1441px) {
    /* HD — bigger metric number, slightly larger label/tag */
    /* HD scale-up removed — was overriding fixed inline sizes on Business Outcomes labels */
    .po-dlabel { font-size: var(--ps-text-body) !important; }
    .po-ddir { font-size: var(--ps-text-nav) !important; }
  }

  @media (max-width: 640px) {
    /* Portrait phone — compact the tiles */
    .po-dnum { font-size: var(--fs-stat) !important; }
    .po-dlabel { font-size: var(--fs-meta) !important; }
    .po-ddir { font-size: var(--fs-eyebrow) !important; }
  }

  @media (max-width: 430px) {
    /* Small mobile */
    .po-dnum { font-size: var(--ps-text-h3) !important; }
    .po-dlabel { font-size: var(--fs-meta) !important; }
    .po-ddir { font-size: var(--fs-eyebrow) !important; line-height: 1.3; }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     BUSINESS OUTCOMES · unified grid collapse for .po-rows AND .imp-grid
     Standardizes the breakpoints so all 7 solution pages collapse identically
     regardless of which class family is used (.po-rows vs .imp-grid).
     ═══════════════════════════════════════════════════════════════════════ */
  @media (max-width: 1100px) {
    .po-rows, .imp-grid { grid-template-columns: repeat(2, 1fr) !important; }
  }
  @media (max-width: 560px) {
    .po-rows, .imp-grid { grid-template-columns: 1fr !important; }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     PROPORTIONAL HD SCALING (≥ 1441px) — supersedes previous HD block
     Same composition as 1366 · scaled ~15-20% at 1920 · no new elements
     Preserves visual hierarchy, alignment, and content positioning
     ═══════════════════════════════════════════════════════════════════════ */
  @media (min-width: 1441px) {

    /* ── Container widens from 1280 → 1600 (preserves 1366 proportions) ── */
    :root { --container: 1600px !important; }

    /* ── Hero + section padding ── */
    .hero, .case-fullbleed-hero, .cu-hero {
      padding-top: clamp(56px, 6vw, 105px) !important;
      padding-bottom: clamp(40px, 4.5vw, 76px) !important;
    }

    /* ── Container / shell horizontal padding — same as 1366 pattern at HD ── */
    .container, .hero-content, .cs-shell {
      padding-left: clamp(20px, 6vw, var(--space-8)) !important;
      padding-right: clamp(20px, 6vw, var(--space-8)) !important;
    }

    /* ── Section verticals scale proportionally ── */
    .section, .hww-section, .cc-section, .impact,
    .solution-pc3, .video-block, .related,
    .sf-section, .sols-section, .stats-band, .ag-section,
    .partners-section, .promo, .v3-section {
      padding-top: clamp(var(--space-6), 6vw, 100px) !important;
      padding-bottom: clamp(var(--space-6), 6vw, 100px) !important;
    }

    /* ── Case-study title block ── */
    .case-header {
      padding-top: clamp(var(--space-6), 6vw, 100px) !important;
      padding-bottom: clamp(40px, 4vw, 68px) !important;
    }

    /* ── Section header margin ── */
    .sec-head, .hww-header, .impact-intro, .section-header, .f1-head {
      margin-bottom: clamp(40px, 4vw, 72px) !important;
    }

    /* ══════════════════ TYPOGRAPHY — proportional maxes ══════════════════ */

    /* Hero H1 (all pages) — 63px @ 1366 · 84px @ 1920 (~+33%) */


    /* Case-study title — 63px @ 1366 · 78px @ 1920 */
    .case-title { font-size: var(--fs-display-1) !important; }

    /* Mockup tagline (case-study hero) */
    .mockup-tagline { font-size: var(--ps-text-h1) !important; }

    /* Contact page H1 */
    .cu-head h1 { font-size: var(--fs-display-1) !important; }

    /* Section H2 — 42px @ 1366 · 58px @ 1920 (~+38%) */


    /* Sub-lead paragraphs — 18px @ 1366 · 22px @ 1920 */


    /* Value strip / bullet lists */
    .hero-value-strip {
      font-size: var(--ps-text-body) !important;
    }

    /* Trust chip */
    .hero-trust {
      font-size: var(--ps-text-nav) !important;
    }
    .hero-trust svg {
      width: clamp(13px, 1vw, 16px) !important;
      height: clamp(13px, 1vw, 16px) !important;
    }

    /* Card titles */
    .cc-card-title, .cs-card-title, .impact-label,
    .tc-name, .sf-cta-heading, .sols-name {
      font-size: var(--ps-text-h3) !important;
    }

    /* Card body text */
    .cc-card-sub, .cs-card-desc, .tc-desc, .sols-desc,
    .impact-sub, .isa-deliver-row p {
      font-size: var(--ps-text-body) !important;
      line-height: 1.55;
    }

    /* Metric numbers — moderate scaling */
    .impact-num, .f1-out-val, .stats-num {
      font-size: var(--ps-text-h1) !important;
    }

    /* ══════════════════ BUTTONS ══════════════════ */

    /* Standard button */
    .btn, .btn-primary, .btn--primary {
      height: clamp(44px, 3.5vw, 52px) !important;
      padding: 0 clamp(20px, 1.8vw, 28px) !important;
      font-size: var(--ps-text-btn) !important;
    }

    /* Hero CTAs — bigger for prominence */
    .hero-cta-btn, a.fcta-trigger, .ag-cta,
    .hero-actions .btn, .hero-sub-row .btn {
      height: clamp(48px, 4vw, 66px) !important;
      padding: 0 clamp(var(--space-3), 2.4vw, 42px) !important;
      font-size: var(--ps-text-btn) !important;
    }

    /* ══════════════════ IMAGES / STRUCTURAL ══════════════════ */

    /* Hero image column (product/solution pages) */
    .hero-image-col {
      height: clamp(280px, 30vw, 540px) !important;
      width: auto !important;
    }
    .hero-product-img { max-width: clamp(320px, 45vw, 780px) !important; }

    /* Case-study card cover */
    .cs-card-cover { min-height: clamp(180px, 15vw, 240px) !important; }

    /* ══════════════════ GRID GAPS ══════════════════ */

    .cs-grid, .impact-grid, .f1-solutions, .f1-outcomes,
    .m4-grid, .tc-grid, .vc4-grid, .lead-grid, .sols-grid,
    .cvo-hero-grid, .isa-hero-grid, .dsa-hero-grid {
      gap: clamp(20px, 1.8vw, var(--space-4)) !important;
    }

    /* ══════════════════ CARD PADDING ══════════════════ */

    .cc-card, .cs-card-body, .impact-cell,
    .tc-card, .vc4-card, .m4-card {
      padding: clamp(var(--space-3), 2vw, 36px) !important;
    }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     SOLUTION PAGE TEMPLATE — full HD proportional coverage (≥ 1441px)
     Applies to all 8 solution pages (shared component classes)
     ═══════════════════════════════════════════════════════════════════════ */
  @media (min-width: 1441px) {

    /* ── CC (Why/Core Capabilities) cards ── */
    .cc-card-icon-img { width: clamp(48px, 3.6vw, 64px) !important; height: clamp(48px, 3.6vw, 64px) !important; }
    .cvo-outcome { font-size: var(--ps-text-body) !important; align-items: center !important; }
    .cvo-outcome svg { width: clamp(12px, 1vw, 15px) !important; height: clamp(12px, 1vw, 15px) !important; margin-top: 0 !important; }

    /* ── HWW accordion (solution pages) ── */
    .hww-acc-card { padding: clamp(20px, 1.7vw, var(--space-4)) !important; }
    .hww-col-num { font-size: var(--ps-text-h3) !important; }
    .hww-col-title { font-size: var(--ps-text-h3) !important; }
    .hww-exp-num { font-size: var(--ps-text-h3) !important; }
    .hww-exp-title { font-size: var(--ps-text-h3) !important; }
    .hww-exp-desc { font-size: var(--ps-text-body) !important; }
    .hww-eyebrow { font-size: var(--fs-eyebrow) !important; }

    /* ── Deliver cards (Wealth, ISA-style) ── */
    .isa-deliver-row .num, .cvo-deliver-num { font-size: var(--ps-text-h1) !important; }
    .isa-deliver-row h3 { font-size: var(--ps-text-h3) !important; }
    .isa-deliver-row p { font-size: var(--ps-text-body) !important; }

    /* ── CVO deliver grid ── */
    .cvo-deliver-card { padding: clamp(var(--space-3), 2vw, 36px) !important; }
    .cvo-deliver-title { font-size: var(--ps-text-h3) !important; }
    .cvo-deliver-desc { font-size: var(--ps-text-body) !important; }

    /* ── Section header shared ── */
    .section-header .eyebrow { font-size: var(--fs-eyebrow) !important; }

    /* ── Business outcomes (.po-*) — extends existing .po-dnum HD rule ── */
    .po-outcomes-section .po-dnum { font-size: var(--fs-stat) !important; }
    .po-dlabel { font-size: var(--ps-text-body) !important; }
    .po-ddir { font-size: var(--ps-text-nav) !important; }
    .po-cell { padding: clamp(var(--space-3), 2vw, 36px) !important; }
    /* HD scale-up removed — was overflowing 80x80 parent */

    /* ── Intelligent Support .imp-* ── */
    .imp-card { padding: clamp(var(--space-3), 2vw, 36px) !important; }
    .imp-card .big { font-size: var(--fs-stat) !important; }
    .imp-card h4 { font-size: var(--ps-text-h3) !important; }
    .imp-card p { font-size: var(--ps-text-body) !important; }

    /* ── ISA/DSA/CVO hero grid text elements ── */
    .isa-hero-grid p, .dsa-hero-grid p, .cvo-hero-grid p { font-size: var(--ps-text-body) !important; }
    .eyebrow { font-size: var(--fs-eyebrow) !important; }
    .em-blue, .em-blue-mid { font-weight: inherit; }

    /* ── Solutions/PC3 pattern for solution pages ── */
    .sols-panel-cta { font-size: var(--ps-text-btn) !important; height: clamp(44px, 3.5vw, 52px) !important; }

    /* ── Header nav ── */
    .header-nav a, .nav-dropdown-trigger { font-size: var(--ps-text-nav) !important; }
    .nav-dropdown-label { font-size: var(--ps-text-nav) !important; }
    .nav-dropdown-sub { font-size: var(--ps-text-nav) !important; }

    /* ── Final CTA (ag-section) ── */
    .ag-eyebrow { font-size: var(--fs-eyebrow) !important; }
    .ag-cta { font-size: var(--ps-text-btn) !important; height: clamp(52px, 4vw, 60px) !important; padding: 0 clamp(var(--space-3), 2.4vw, 36px) !important; }
  }


  /* ═══════════════════════════════════════════════════════════════════════
     UNIVERSAL ALIGNMENT FIX
     Every wrapper using max-width: var(--container) WITHOUT its own
     horizontal padding is reduced by 2*var(--pad-x) so its content aligns
     to the same X-axis as .container content.
     Result: every section on the page starts and ends at the exact same
     left/right coordinates regardless of which wrapper class it uses.
     ═══════════════════════════════════════════════════════════════════════ */
  .hero-inner,
  .hww-acc-row,
  .hww-grid,
  .imp-grid,
  .po-rows,
  .po-title,
  .isa-deliver-split,
  .isa-channels,
  .cvo-why-row,
  .footer-inner,
  .m4,
  .m4-grid,
  .platform-inner,
  .reeng-inner,
  .sa-deliver-wrap,
  .tc-stack,
  .top-bar-inner,
  .vc4-grid,
  .why-split,
  .cs-flip-grid,
  .cc-nav-card,
  .deel-timeline {
    max-width: calc(var(--container) - 2 * var(--pad-x)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }


/* ===== next source <style> block ===== */


    /* Universal HD step-up (≥1441px) — comprehensive fixed-pixel coverage */
    @media (min-width: 1441px) {
      .footer-brand p { font-size: var(--ps-text-nav) !important; line-height: 1.55 !important; }
      .footer-col h5 { font-size: var(--fs-body) !important; }
      .footer-col a, .footer-col li { font-size: var(--fs-body) !important; }
      .footer-contact, .footer-contact a, .footer-contact p { font-size: var(--fs-body) !important; }
      .footer-bottom, .footer-bottom p, .footer-bottom a { font-size: var(--fs-meta) !important; }
      .ai-card h4 { font-size: var(--ps-text-h3) !important; }
      .ai-card p { font-size: var(--ps-text-body) !important; line-height: 1.55 !important; }
      .ai-card .tag { font-size: var(--fs-meta) !important; padding: 5px 12px !important; }
      .ai-icon { width: 56px !important; height: 56px !important; }
      .solution-card h3 { font-size: var(--ps-text-h3) !important; }
      .solution-card p { font-size: var(--ps-text-body) !important; line-height: 1.55 !important; }
      .solution-card .tag, .solution-card .chip { font-size: var(--fs-meta) !important; padding: 5px 12px !important; }
      .metric-num, .metrics-band .metric-num { font-size: var(--fs-stat) !important; }
      .metric-label, .metrics-band .metric-label { font-size: var(--fs-title-m) !important; }
      .partners-grid .partner-name, .partner-card .partner-name { font-size: var(--fs-body) !important; }
    }
  

/* ===== next source <style> block ===== */


    /* ═══════════════════════════════════════════════════════════════════
       METRICS BAND — Variant A (clean minimal editorial pattern)
       Reusable component across Home/Wealth/Cloud/Oracle/PD/QA
       ═══════════════════════════════════════════════════════════════════ */
    .mb-band {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      max-width: 100%;
      margin: 0 auto;
    }
    .mb-band--3 { grid-template-columns: repeat(3, 1fr); }
    .mb-band--6 { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-5); }
    .mb-band--7 { grid-template-columns: repeat(4, 1fr); row-gap: 0; }
    /* 7-cell layout: 4 top + 3 bottom */
    /* Positions after divider insertion: 1-4=row1 · 5=divider · 6,7,8=row2 */
    .mb-band--7 .mb-cell:nth-child(n+6) {
      padding-top: var(--space-5) !important;
      margin-top: 0 !important;
    }
    /* Full-width horizontal divider spanning all 4 columns */
    .mb-row-divider {
      grid-column: 1 / -1;
      height: 1px;
      background: var(--ink-200);
      margin: var(--space-5) 0 0;
    }
    /* Remove hanging vertical divider on cell 4 (last of row 1) */
    .mb-band--7 .mb-cell:nth-child(4)::after { display: none; }
    /* First cell of row 2 aligns with grid left edge */
    .mb-band--7 .mb-cell:nth-child(6) { padding-left: 0 !important; }
    .mb-cell {
      padding: 0 clamp(var(--space-3), 3vw, var(--space-5));
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .mb-cell:first-child { padding-left: 0; }
    .mb-cell:last-child { padding-right: 0; }
    .mb-cell:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 20%;
      right: 0;
      height: 60%;
      width: 1px;
      background: var(--ink-200);
    }
    .mb-cat {
      font-size: var(--fs-title-m);
      font-weight: 500;
      color: var(--ink-900);
      letter-spacing: -0.01em;
      line-height: 1.45;
      margin-bottom: 20px;
    }
    .mb-value {
      font-size: var(--fs-stat);
      font-weight: 300;
      letter-spacing: -0.03em;
      line-height: 1;
      color: var(--ink-900);
      font-family: 'Outfit', sans-serif;
      margin-bottom: 28px;
      display: inline-flex;
      align-items: baseline;
    }
    .mb-value em { font-style: normal; font-weight: inherit; color: inherit; }
    .mb-desc {
      font-size: var(--fs-title-m);
      color: var(--ink-600);
      font-weight: 300;
      line-height: 1.55;
    }
    @media (min-width: 1441px) {
      .mb-cat { font-size: var(--ps-text-eyebrow) !important; }
      .mb-desc { font-size: var(--ps-text-body) !important; }
      /* At HD: narrower band, centered — creates symmetric whitespace */
      .mb-band { max-width: 1240px; }
      .mb-band--6 { max-width: 1360px; }
      .mb-band--7 { max-width: 1440px; }
    }
    @media (max-width: 1024px) {
      .mb-band, .mb-band--3, .mb-band--6, .mb-band--7 { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
      .mb-cell:nth-child(2n)::after { display: none; }
      .mb-cell:nth-child(2n+1) { padding-left: 0; }
    }
    @media (max-width: 640px) {
      .mb-band, .mb-band--3, .mb-band--6, .mb-band--7 { grid-template-columns: 1fr; row-gap: var(--space-4); }
      .mb-cell::after { display: none; }
      .mb-cell { padding: 0 !important; }
    }
  

/* ===== next source <style> block ===== */
















































































































/* ═══════════════════════════════════════════════════════════════════════
   PRIMESOFT RESPONSIVE SYSTEM — canonical tokens + rules  (v3 — mobile pass)
   Design source of truth: 1366px
   Breakpoint priorities: 1024 · 1366-1919 · mobile 360-767 · tablet 768-1023
   Injected LAST in the cascade so it settles inter-page drift.
   ═══════════════════════════════════════════════════════════════════════ */
/* CANONICAL VERSION MARKER: v3.24 — hero specificity boost */


:root {
  --ps-container: 1440px;
  --ps-pad-x: clamp(20px, 5vw, 80px);

  --ps-section-py: clamp(56px, 8vw, 112px);
  --ps-section-header-mb: clamp(48px, 4vw, 72px);
  --ps-hero-py:    clamp(32px, 4vw, 56px);    /* Compact: 32 mobile / 55 @1366 / 56 @HD */
  --ps-hero-gap:   48px;
  --ps-case-header-py: clamp(48px, 5vw, 80px);

  --ps-s1: 8px;
  --ps-s2: 16px;
  --ps-s3: 24px;
  --ps-s4: 32px;
  --ps-s5: 48px;
  --ps-s6: 64px;
  --ps-s7: 80px;
  --ps-s8: 120px;

  --fs-display-1:      var(--ps-text-h1);
  --fs-display-2:      var(--ps-text-h1);
  --fs-body:    var(--ps-text-body);   /* discrete: 18px base, 22px @HD via media query */
  --fs-body-sm: var(--ps-text-nav);   /* discrete: 16px base, 18px @HD */
  --fs-eyebrow: var(--ps-text-eyebrow);

  --ps-lh-tight:   1.08;
  --ps-lh-heading: 1.15;
  --ps-lh-body:    1.55;

  --container: var(--ps-container);
  --pad-x:     var(--ps-pad-x);
}

@media (min-width: 1441px) {
  :root { --ps-container: 1600px; --container: 1600px; }
}
@media (min-width: 1024px) and (max-width: 1365px) {
  :root { --ps-pad-x: clamp(24px, 4vw, 48px); }
}

html, body { overflow-x: clip; }

.container {
  max-width: var(--ps-container);
  margin-inline: auto;
  padding-inline: var(--ps-pad-x);
  width: 100%;
  box-sizing: border-box;
}

.section { padding-block: var(--ps-section-py); }

.section-header, .sec-head, .hww-header, .impact-intro, .f1-head {
  margin-bottom: var(--ps-section-header-mb);
}

.case-header { padding-block: var(--ps-case-header-py); }

.hero {
  align-items: center;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.hero > [class*="hero-grid"],
.hero > .hero-content,
.hero > .hero-inner {
  max-width: var(--ps-container);
  margin-inline: auto;
  padding-block: var(--ps-hero-py);
  padding-inline: var(--ps-pad-x);
  width: 100%;
  box-sizing: border-box;
}

[class*="hero-grid"] {
  align-items: start;
  gap: var(--ps-hero-gap);
}

.hero h1:not([style*="font-size"]),
.hero-inner h1:not([style*="font-size"]),
.hero-content h1:not([style*="font-size"]),
.case-title:not([style*="font-size"]),
.mockup-tagline:not([style*="font-size"]),
.cu-head h1:not([style*="font-size"]),
.cs-title:not([style*="font-size"]) {
  font-size: var(--fs-display-1);
  line-height: var(--ps-lh-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.section-header h2:not([style*="font-size"]),
.sec-h2:not([style*="font-size"]) {
  font-size: var(--fs-display-2);
  line-height: var(--ps-lh-heading);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.section-header p:not([style*="font-size"]),
.sec-lede:not([style*="font-size"]),
.hero-lede:not([style*="font-size"]),
.hero-sub:not([style*="font-size"]),
.hww-subhead:not([style*="font-size"]),
.hww-exp-desc:not([style*="font-size"]),
.impact-intro p:not([style*="font-size"]),
.f1-subtitle:not([style*="font-size"]),
.cc-left-sub:not([style*="font-size"]),
.cc-card-desc:not([style*="font-size"]),
.cc-card-sub:not([style*="font-size"]),
.isa-deliver-row p:not([style*="font-size"]),
.isa-channel-cell p:not([style*="font-size"]),
.imp-card p:not([style*="font-size"]),
.sols-headline-sub:not([style*="font-size"]),
.sols-desc:not([style*="font-size"]),
.mb-cat:not([style*="font-size"]),
.mb-desc:not([style*="font-size"]),
.why-row p:not([style*="font-size"]),
.sf-top-sub:not([style*="font-size"]),
.sf-cta-sub:not([style*="font-size"]),
.poc-sub:not([style*="font-size"]),
.why-left-sub:not([style*="font-size"]),
.fcta-modal-sub:not([style*="font-size"]),
.ag-lede:not([style*="font-size"]),
.ag-sub:not([style*="font-size"]),
.final-cta-sub:not([style*="font-size"]),
.trans-content p:not([style*="font-size"]),
.deel-card p:not([style*="font-size"]),
.clients-quote:not([style*="font-size"]),
.ind-card-sub:not([style*="font-size"]),
.ind-hover-desc:not([style*="font-size"]),
.insight-card p:not([style*="font-size"]),
.promo-caption:not([style*="font-size"]),
.cvo-deliver-card p:not([style*="font-size"]),
.cvo-feature-card p:not([style*="font-size"]),
.cvo-why-item p:not([style*="font-size"]),
.cd-depth-card p:not([style*="font-size"]),
.sd-side .box .desc:not([style*="font-size"]),
.sd-layer .desc:not([style*="font-size"]),
.sa-deliver-point p:not([style*="font-size"]) {
  font-size: var(--fs-body);
  line-height: var(--ps-lh-body);
  /* Distribute words evenly — no widow (last word alone) or orphan
     (single word first) lines. Falls back gracefully on older browsers. */
  text-wrap: balance;
  text-wrap: pretty;
}

@media (min-width: 1441px) {
  p[style*="font-size:var(--fs-title-m)"],
  p[style*="font-size: var(--fs-title-m)"] {
    font-size: var(--ps-text-body) !important;
    line-height: 1.55 !important;
  }
}
/* Body text step-up at HD — discrete 18px → 22px, no fractional values.
   Switch at 1600px: 360-1440 (small monitors) uses 18px, 1600+ (HD/QHD) uses 22px. */
@media (min-width: 1600px) {
  :root {
    --fs-body:    var(--ps-text-body);
    --fs-body-sm: var(--ps-text-nav);
  }
  /* Force all recurring body-text classes to 22px at HD — beats legacy !important rules */
  .hww-exp-desc,
  .hww-subhead,
  .cc-card-desc,
  .cc-card-sub,
  .cc-left-sub,
  .impact-intro p,
  .isa-deliver-row p,
  .isa-channel-cell p,
  .cvo-feature-card p,
  .cvo-deliver-card p,
  .cvo-why-item p,
  .sols-headline-sub,
  .sols-desc,
  .imp-card p,
  .impact-sub,
  .mb-desc,
  .mb-cat,
  .why-row p,
  .deel-card p,
  .trans-content p,
  .insight-card p,
  .clients-quote,
  .ind-card-sub,
  .ind-hover-desc,
  .poc-sub,
  .why-left-sub,
  .fcta-modal-sub,
  .sf-top-sub,
  .sf-cta-sub,
  .ag-lede,
  .ag-sub,
  .final-cta-sub,
  .cs-lede,
  .cs-card-desc,
  #risk-compliance .cvo-feature-card p,
  .cd-depth-card p,
  .sd-side .box .desc,
  .sd-layer .desc,
  .sa-deliver-point p,
  .solution p,
  .final-cta p {
    font-size: var(--ps-text-body) !important;
    line-height: 1.55 !important;
  }
  /* 1600+ (22px text): row min-height sized to fit the actual longest description
     (5 lines × 22px × 1.55 lh = 170px + heading area 90px + padding 64 = ~324px).
     Set 340px = content + 16px slack, no wasted whitespace on collapsed cards. */
  .hww-acc-row {
    min-height: 280px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE (≤ 767px) — comprehensive natural mobile adaptation
   Bumps type floors · restores margins · centers stats · fixes hamburger
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* User-specified minimum type sizes:
     H1 40 · H2 32 · H3 24 · Body 16 · Eyebrow 14 */
  :root {
    --fs-display-1:      var(--ps-text-h1);
    --fs-display-2:      var(--ps-text-h1);
    --fs-body:    var(--ps-text-body);
    --fs-body-sm: var(--ps-text-nav);
    --fs-eyebrow: var(--ps-text-eyebrow);
    --ps-section-header-mb: clamp(32px, 8vw, 48px);
    /* Looser line-heights for smaller headings on mobile — no crowded lines */
    --ps-lh-tight:   1.18;   /* H1 mobile: was 1.08 */
    --ps-lh-heading: 1.22;   /* H2 mobile: was 1.15 */
  }

  /* Force headings to win against legacy !important rules.
     We keep  filter so intentional inline styles still win. */
  .hero h1,
  .hero-inner h1,
  .hero-content h1,
  .cvo-hero-grid h1,
  .isa-hero-grid h1,
  .dsa-hero-grid h1,
  .pd-hero-grid h1,
  .wealth-hero-grid h1,
  .case-title,
  .mockup-tagline,
  .cu-head h1,
  .cs-title {
    font-size: var(--fs-display-1) !important;
    line-height: var(--ps-lh-tight) !important;
  }
  .section-header h2,
  .sec-h2,
  .hww-heading,
  .impact-intro h2,
  .f1-headline {
    font-size: var(--fs-display-2) !important;
    line-height: var(--ps-lh-heading) !important;
  }
  .section-header p,
  .sec-lede,
  .hero-lede,
  .hero-sub,
  .hww-subhead,
  .impact-intro p,
  .f1-subtitle,
  .isa-deliver-row p,
  .isa-channel-cell p,
  .cc-card-desc,
  .cc-card-sub,
  .cc-left-sub,
  .hww-exp-desc,
  .sols-headline-sub,
  .sols-desc,
  .imp-card p,
  .impact-sub,
  .deel-card p,
  .clients-quote,
  .why-row p,
  .cvo-deliver-card p,
  .cvo-feature-card p,
  .cvo-why-item p,
  .cs-lede,
  .cs-card-desc,
  .final-cta-sub,
  .sf-top-sub,
  .sf-cta-sub,
  .ag-lede,
  .ag-sub,
  .trans-content p,
  .insight-card p,
  .promo-caption p,
  .ind-card-sub,
  .ind-hover-desc,
  .poc-sub,
  .why-left-sub,
  .fcta-modal-sub,
  .mb-desc,
  .mb-cat,
  .cvo-deliver-desc,
  .cvo-outcome,
  .f1-transform-caption,
  .cu-offices-head p,
  .cd-depth-card p,
  .sd-side .box .desc,
  .sd-layer .desc,
  .sa-deliver-point p,
  .solution p,
  .final-cta p {
    font-size: var(--fs-body) !important;
    line-height: var(--ps-lh-body) !important;
  }
  .eyebrow,
  .hww-eyebrow,
  .section-header .eyebrow {
    font-size: var(--fs-eyebrow) !important;
    letter-spacing: 0.14em !important;
  }

  /* Section rhythm — more breathing room between sections */
  .section { padding-block: clamp(56px, 12vw, 88px) !important; }

  /* Hero — natural mobile stack; padding inherits from --ps-hero-py (56px min) */
  .hero { min-height: auto; }
  [class*="hero-grid"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-4);
  }


  /* ─── Channels/Modules grid on mobile: force 1 column + tighter rhythm ─── */
  .isa-channels {
    grid-template-columns: 1fr !important;
    gap: var(--space-2) !important;
  }
  .isa-channel-cell {
    padding: 20px var(--space-2) !important;
  }
  .isa-channel-cell .icon {
    width: 44px !important;
    height: 44px !important;
    margin: 0 auto 12px !important;
  }
  /* Hide Business Outcomes divider on mobile (cells stack — divider unnecessary).
     Also remove the padding-top:var(--space-5) that legacy adds to cells 4-6 (nth-child n+5)
     for visual row separation on desktop — unnecessary when cells stack on mobile. */
  .mb-row-divider {
    display: none !important;
  }
  .mb-band--6 .mb-cell:nth-child(n+5),
  .mb-band--7 .mb-cell:nth-child(n+6),
  .mb-band--8 .mb-cell:nth-child(n+5),
  .mb-band--8 .mb-cell:nth-child(n+6) {
    padding-top: 0 !important;
  }

  /* PD-style .mb-band--6 (3-col grid at desktop >=1025px, NO divider element).
     Legacy .mb-cell::after gives cells right dividers except :last-child — cell 3
     (end of top row) has stray divider extending past grid.
     Legacy .mb-cell:first-child gives cell 1 padding-left:0, but cell 4 (start of
     bottom row) doesn't get the same treatment — misalignment.
     Fix both — scoped to >=1025px so tablet 2-col layout is untouched. */
  @media (min-width: 1025px) {
    .mb-band--6 .mb-cell:nth-child(3)::after {
      display: none !important;
    }
    .mb-band--6 .mb-cell:nth-child(3) {
      padding-right: 0 !important;
    }
    .mb-band--6 .mb-cell:nth-child(4) {
      padding-left: 0 !important;
    }
  }
  /* ─── HAMBURGER FIX ─── */
  .hamburger {
    display: inline-flex !important;   /* override legacy display:none base */
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: 16px !important;
    right: var(--ps-pad-x) !important;
    z-index: 10000 !important;          /* above fcta-overlay (1000) and skip-link (9999) */
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;   /* ensure clicks fire */
  }
  .hamburger svg {
    width: 24px !important;
    height: 24px !important;
    stroke: var(--ink-900) !important;
    fill: none !important;
    stroke-width: 2 !important;
    pointer-events: none !important;   /* SVG doesn't intercept clicks — the button does */
  }
  /* Hide hamburger when drawer is open — only the close (X) icon should be visible */
  body.mobile-menu-open .hamburger {
    display: none !important;
  }

  /* Wealth-Platform hero-only: full-bleed background image overlaps text on mobile.
     Hide the bg image + reveal a stacked mobile image below the CTA.
     Other pages use side-by-side hero grids that collapse naturally. */
  .hero-bg { display: none !important; }
  .hero-mobile-img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    object-position: right center !important;
    margin: var(--space-4) auto 0 !important;
  }

  /* Why PrimeSoft section — mobile: shrink SVG box, tighten gap between image + text */
  .why-split {
    gap: var(--space-3) !important;
  }
  .why-img-box {
    min-height: auto !important;
    padding: 0 !important;
  }
  .why-img-box svg {
    max-height: 260px !important;
  }
  .why-row {
    padding: 14px 0 !important;
  }

  /* ─── BUSINESS IMPACT — center-align on mobile + tight rhythm ─── */
  .mb-band {
    row-gap: var(--space-4) !important;   /* compact vertical rhythm for stacked cells */
  }
  .mb-cell,
  .impact-cell,
  .imp-card {
    text-align: center !important;
    align-items: center !important;
    padding-inline: 0 !important;   /* padding lives on .mb-band container, not cells */
  }
  .mb-cell::after,
  .mb-cell::before { display: none !important; }
  /* Tight rhythm INSIDE each cell so label + value + description read as a group */
  .mb-cat  { margin-bottom: var(--space-1) !important;  }
  .mb-value { margin-bottom: 12px !important; }
  .mb-desc { margin-bottom: 0 !important;    }

  /* ─── HOW IT WORKS — mobile: expand every card, no accordion ───
     Root fix: on desktop the cards use absolute-positioned overlays with
     fixed heights (64/280). That breaks on mobile. Simpler: hide the
     collapsed overlay entirely and let the expanded content flow statically.
     Every card shows num + title + description. No click needed. */
  .hww-section {
    padding-inline: var(--ps-pad-x) !important;
  }
  /* Card wrapper: static height driven by content, uniform padding */
  .hww-acc-card,
  .hww-acc-card.hww-active {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    padding: var(--space-3) !important;
    margin-bottom: 12px !important;
    border-radius: var(--radius) !important;
    overflow: visible !important;
    position: relative !important;
    cursor: default !important;
  }
  .hww-acc-card:last-child { margin-bottom: 0 !important; }
  /* Hide the collapsed overlay entirely on mobile */
  .hww-collapsed {
    display: none !important;
  }
  /* Expanded content: static flow, top-left, opaque */
  .hww-expanded {
    position: static !important;
    inset: auto !important;
    padding: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
    overflow: visible !important;
  }
  .hww-expanded > div {
    display: block !important;
  }
  /* Typography: canonical num + title + description */
  .hww-exp-num {
    display: block !important;
    font-size: var(--fs-meta) !important;
    font-weight: 500 !important;
    color: var(--brand) !important;
    letter-spacing: 0.05em !important;
    margin: 0 0 var(--space-1) 0 !important;
    line-height: 1 !important;
  }
  .hww-exp-title {
    display: block !important;
    font-size: var(--fs-title-m) !important;
    font-weight: 500 !important;
    color: var(--ink-900) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 12px 0 !important;
  }
  .hww-exp-bar {
    display: block !important;
    width: 32px !important;
    height: 2px !important;
    background: var(--ink-200) !important;
    margin: 0 0 12px 0 !important;
  }
  .hww-exp-desc {
    display: block !important;
    font-size: var(--fs-title-m) !important;
    color: var(--ink-600) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
  }
  /* Kill any accordion active-state size boosts on mobile */
  .hww-acc-card.hww-active .hww-expanded,
  .hww-acc-card:not(.hww-active) .hww-expanded {
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  /* ─── CARDS — consistent padding ─── */
  .cc-card, .cs-card-body, .tc-card, .m4-card, .sf-card, .sols-card {
    padding: var(--ps-s4) !important;
  }

  /* ─── TOUCH TARGETS ─── */
  .btn, .btn-primary, .btn--primary, .btn-secondary,
  .fcta-trigger, .hero-cta-btn, .ag-cta, .cc-left-cta {
    min-height: 48px !important;
    padding-inline: var(--ps-s3) !important;
    font-size: var(--fs-body) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   DESKTOP (≥ 1024px) — targeted fixes for legacy component overflow
   These address specific 1920 issues found during ISA pilot testing.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* ─── HOW IT WORKS at desktop ───
     Tier 1 (1024-1599, 18px text): NO override — legacy owns row min-height, padding,
     AND overflow:hidden on card. The overflow:hidden is REQUIRED for the hover
     cross-fade animation to render cleanly. Only tier 2 (1600+) tweaks row height. */

  /* ─── Pyramid labels: sized to fit the SVG's fixed foreignObject slots
     (SVG is a fixed-position diagram — 22px body would overflow into next tier).
     Use 18px body / 20px heading — readable but fits within the pyramid layout. */
  .annotated .label h4 {
    font-size: var(--ps-text-h3) !important;
    margin: 0 0 4px !important;
    line-height: 1.25 !important;
  }
  .annotated .label p {
    font-size: var(--fs-body) !important;
    line-height: 1.45 !important;
  }

  /* ─── "Built on three principles" tag: more visible at HD ─── */
  .why-three-tag {
    font-size: var(--fs-meta) !important;
    color: var(--ink-600) !important;
    letter-spacing: 0.22em !important;
    margin-bottom: 20px !important;
  }

  /* ─── CC card "Read more" / "Show less" toggle: too small at HD ─── */
  .cc-card-toggle {
    font-size: var(--ps-text-body) !important;
    gap: var(--space-1) !important;
    margin-top: var(--space-2) !important;
  }
  .cc-card-toggle-chev {
    width: clamp(12px, 0.9vw, 15px) !important;
    height: clamp(12px, 0.9vw, 15px) !important;
  }

}



/* ═══════════════════════════════════════════════════════════════════════
   PYRAMID SVG LABELS ON MOBILE
   The SVG viewBox is 0 80 1000 360. On a 390px viewport it scales to ~390
   wide (scale ~0.39). To make label text readable at that scale, internal
   font-size needs to be ~2.5× the desired actual size.
   Desktop labels stay at their normal sizes.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* On mobile the label descriptions don't fit — hide them, show only tier titles.
     Line endpoints are at y=138/245/350 (8 SVG units from top of each foreignObject).
     Allow content to overflow the foreignObject vertically so titles render fully
     when centered on the line height. */
  .annotated foreignobject {
    overflow: visible !important;
  }
  .annotated .label {
    display: block !important;
    height: 100% !important;
    padding-left: 12px !important;
    position: relative !important;
    overflow: visible !important;
  }
  .annotated .label > div {
    width: 100% !important;
    position: absolute !important;
    top: 8px !important;
    left: 12px !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    overflow: visible !important;
  }
  .annotated .label h4 {
    font-size: var(--ps-text-h1) !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }
  .annotated .label p {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   CORE CAPABILITIES CARDS on mobile — Option A (approved)
   
   Icon top-left · title below icon · description below title. All left-aligned.
   Matches the HWW cards pattern for cross-page consistency.
   Applies at ≤767px only — desktop layout unchanged.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .cc-card {
    display: block !important;
    padding: var(--space-3) !important;
    background: #FFFFFF !important;
    border: 1px solid var(--ink-200) !important;
    border-radius: var(--radius) !important;
    margin-bottom: var(--space-2) !important;
    text-align: left !important;
  }
  .cc-card:last-child { margin-bottom: 0 !important; }
  .cc-card-head {
    display: block !important;
    width: auto !important;
    margin-bottom: var(--space-2) !important;
    flex: none !important;
  }
  .cc-card-icon {
    width: 56px !important;
    height: 56px !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .cc-card-icon-img {
    width: 56px !important;
    height: 56px !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }
  .cc-card-content {
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
  }
  .cc-card-title {
    font-size: var(--fs-title-m) !important;
    font-weight: 500 !important;
    color: var(--ink-900) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 var(--space-1) !important;
    text-align: left !important;
  }
  .cc-card-sub, .cc-card-desc {
    font-size: var(--fs-body) !important;
    font-weight: 300 !important;
    color: var(--ink-600) !important;
    line-height: 1.55 !important;
    text-align: left !important;
    margin: 0 !important;
  }
  /* Kill any hover transforms / sticky positioning that legacy applies to cc-card */
  .cc-card:hover { transform: none !important; }
  /* Container that holds all cards — vertical stack */
  .cc-right, .cc-cards, .cc-card-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════════
   SMALL MOBILE (≤ 480px) — very narrow screens
   ═══════════════════════════════════════════════════════════════════════ */

  /* Wealth hero mobile-only image — hidden on desktop */
  .hero-mobile-img { display: none; }

@media (max-width: 480px) {
  :root {
    --ps-pad-x: clamp(20px, 4vw, 24px);   /* Enterprise B2B standard: 20-24px on mobile */
  }
  .section { padding-block: clamp(48px, 12vw, 72px) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO — kill legacy HD-only section padding
   Legacy adds padding-top:105px !important + padding-bottom:76px !important
   at @1441px+ only. That's the SOLE cause of the "extra whitespace at 1920"
   vs "fine at 1366". Override with 0 so hero at 1920 matches 1366 rhythm.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* Hero at desktop+: kill section min-height so section is content-driven.
     Higher specificity (section.hero = 11) to beat any legacy .hero rules.
     Also top-align content so any residual slack goes to bottom (not centered
     which creates equal top/bottom whitespace surrounding a small content). */
  section.hero {
    min-height: auto !important;
    align-items: flex-start !important;
    padding: 0 !important;
  }
  /* Also force grid padding to use our token, high specificity to beat legacy */
  section.hero > [class*="hero-grid"],
  section.hero > .hero-content,
  section.hero > .hero-inner {
    padding-block: var(--ps-hero-py) !important;
  }
}
@media (min-width: 1441px) {
  /* Kill legacy .hero padding-top:105 + padding-bottom:76 at HD.
     ONLY targets section.hero — case-fullbleed-hero and cu-hero need their own
     vertical padding (they don't have a hero-grid child to own padding-block). */
  section.hero {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
  }
}

@media (min-width: 1441px) {
  /* Section-header container widens proportionally at HD.
     Prevents "H2 wraps to 3 lines at 1920 but 2 at 1366" caused by fixed
     760px max-width while H2 font-size scales up to 52px. */
  .section-header { max-width: clamp(760px, 60vw, 1100px) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Business Impact stat description — cap at 2 lines max
   Applies at all viewports. Text wraps naturally within 2 lines, then
   any overflow is truncated with ellipsis.
   ═══════════════════════════════════════════════════════════════════════ */
.mb-desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-clamp: 2;  /* future standard */
}

/* ═══════════════════════════════════════════════════════════════════════
   HEADER / NAV — align with container at HD viewports
   
   Root cause: .header uses padding-inline: var(--pad-x) on a full-width
   element. At viewports > --ps-container (e.g., 1920 with container 1600),
   the header content sits left of container content (e.g., logo at 80px
   from viewport left while container content starts at 240px).
   
   Fix: pad by the greater of --ps-pad-x OR half the extra viewport space
   plus --ps-pad-x. At viewports ≤ container, base padding wins. At larger
   viewports, extra padding is added to match container centering.
   ═══════════════════════════════════════════════════════════════════════ */
.header {
  padding-inline: max(var(--ps-pad-x), calc((100vw - var(--ps-container)) / 2 + var(--ps-pad-x))) !important;
}

  /* Architecture section — scale up starting at 1200 (was 1441 only) so all 
     desktop viewports get proper hierarchy, not just full HD */
  @media (min-width: 1200px) {
    #architecture .sd-side .box h3,
    #architecture .sd-layer h3,
    #architecture .sd-umbrella h3 {
      font-size: var(--fs-title-l) !important;
      line-height: 1.3 !important;
    }
    #architecture .sd-side .box .role,
    #architecture .sd-side .role,
    #architecture .sd-layer .role,
    #architecture .sd-umbrella .role {
      font-size: var(--fs-meta) !important;
    }
    #architecture .cd-pipe-stage,
    #architecture .cd-pill,
    #architecture .sd-layer .chip,
    #architecture .sd-umbrella .chip {
      font-size: var(--fs-meta) !important;
      padding: 6px 12px !important;
    }
    #architecture .sd-side .box .desc,
    #architecture .sd-layer .desc {
      font-size: var(--fs-title-m) !important;
      line-height: 1.5 !important;
    }
  }

  /* Architecture — HD (1600+) — bigger still, aligned with 22px body text */
  @media (min-width: 1600px) {
    #architecture .sd-side .box h3,
    #architecture .sd-layer h3,
    #architecture .sd-umbrella h3 {
      font-size: var(--fs-title-l) !important;
    }
    #architecture .sd-side .box .role,
    #architecture .sd-side .role,
    #architecture .sd-layer .role,
    #architecture .sd-umbrella .role {
      font-size: var(--fs-body) !important;
    }
    #architecture .cd-pipe-stage,
    #architecture .cd-pill,
    #architecture .sd-layer .chip,
    #architecture .sd-umbrella .chip {
      font-size: var(--fs-body) !important;
      padding: var(--space-1) 14px !important;
    }
    #architecture .sd-side .box .desc,
    #architecture .sd-layer .desc {
      font-size: var(--ps-text-body) !important;
    }
  }

  /* Card-bottom blue outcome text at HD — bump to 18px for readability at 1920.
     .cd-depth-outcome — "What PrimeSoft ... Delivers" cards (13→18)
     .cc-outcome — "Core Capabilities" outcome text (15→18) */
  @media (min-width: 1600px) {
    .cd-depth-outcome,
    .cc-outcome {
      font-size: var(--fs-title-m) !important;
      line-height: 1.5 !important;
    }
  }

  /* ─── Architecture section (#architecture) — shared across PD/Cloud/Oracle/QA ─── */
  /* .sd wrapper — legacy hardcoded max-width: 1100px, expand to fill container */
  #architecture .sd { max-width: 100% !important; width: 100% !important; }
  /* Card sizing (from PD): let cards size to content instead of equal-height flex share.
     Without these, .sd-layer has flex: 1 1 0 which causes content clipping when
     one card in the middle stack has more chips than the other. */
  #architecture .sd-stack {
    height: auto !important;
    min-height: 0 !important;
  }
  #architecture .sd-layer {
    flex: 0 0 auto !important;
    min-height: auto !important;
    padding: 22px var(--space-3) !important;
    gap: 10px !important;
  }
  /* Widen the .sd-platform grid — desktop only. Mobile stacks vertically below. */
  @media (min-width: 1024px) {
    #architecture .sd-platform {
      grid-template-columns: 1fr 1.35fr 1fr !important;
      gap: var(--space-2) !important;
    }
  }
  /* Reading flow — label on top row, steps on single row below */
  #architecture .sd-flow-label {
    display: block !important;
    margin-bottom: var(--space-1) !important;
    text-align: center !important;
  }
  #architecture .sd-flow-steps {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    overflow: hidden !important;
  }
  #architecture .sd-flow-steps .step {
    white-space: nowrap !important;
    flex: 0 1 auto !important;
    margin: 0 2px !important;
    font-size: var(--fs-body) !important;
    gap: 4px !important;
  }
  #architecture .sd-flow-steps .step .n {
    width: 20px !important;
    height: 20px !important;
    font-size: var(--fs-eyebrow) !important;
    flex-shrink: 0 !important;
  }
  #architecture .sd-flow-steps .sep {
    flex: 0 0 auto !important;
    font-size: var(--fs-meta) !important;
    margin: 0 2px !important;
  }
  
  /* HD (1600+) — bump chip, role, and reading-flow steps */
  @media (min-width: 1600px) {
    #architecture .cd-pipe-stage,
    #architecture .cd-pill,
    #architecture .sd-layer .chip,
    #architecture .sd-umbrella .chip {
      font-size: var(--fs-body) !important;
      padding: var(--space-1) var(--space-2) !important;
    }
    #architecture .sd-side .box .role,
    #architecture .sd-side .role,
    #architecture .sd-layer .role,
    #architecture .sd-umbrella .role {
      font-size: var(--fs-body) !important;
      letter-spacing: 0.14em !important;
    }
    #architecture .sd-flow-steps .step {
      font-size: var(--fs-body) !important;
    }
    #architecture .sd-flow-steps .sep {
      font-size: var(--fs-body) !important;
    }
    #architecture .sd-flow-steps .step .n {
      width: 22px !important;
      height: 22px !important;
      font-size: var(--fs-eyebrow) !important;
    }
  }

  /* How It Works (deel-timeline) — HD scale (1600+) so step titles + descriptions
     are legible at 1920. Steps titles bumped to 22, descriptions to 22 matching body. */
  @media (min-width: 1600px) {
    .deel-labels .label .num {
      font-size: var(--ps-text-h3) !important;
    }
    .deel-labels .label .ttl {
      font-size: var(--ps-text-h3) !important;
      line-height: 1.3 !important;
    }
    .deel-card p {
      font-size: var(--ps-text-body) !important;
      line-height: 1.5 !important;
    }
  }

  /* Case Studies (cs-flip-card) — HD scale (1600+) so card content is readable at 1920 */
  @media (min-width: 1600px) {
    /* Front face */
    .cs-flip-card .cs-front .cs-ind { font-size: var(--ps-text-eyebrow) !important; }
    .cs-flip-card .cs-front .cs-tag { font-size: var(--fs-meta) !important; padding: 6px 12px !important; }
    .cs-flip-card .cs-front .cs-titleblock h3 { font-size: var(--ps-text-h3) !important; line-height: 1.3 !important; }
    .cs-flip-card .cs-front .cs-hint { font-size: var(--fs-meta) !important; }
    /* Back face */
    .cs-flip-card .cs-back .cs-back-tag { font-size: var(--fs-meta) !important; }
    .cs-flip-card .cs-back .cs-stat-mega { font-size: var(--ps-text-h1) !important; }
    .cs-flip-card .cs-back .cs-stat-lbl { font-size: var(--fs-body) !important; }
    .cs-flip-card .cs-back h3 { font-size: var(--ps-text-h3) !important; line-height: 1.3 !important; }
    .cs-flip-card .cs-back p { font-size: var(--fs-title-m) !important; line-height: 1.55 !important; }
    .cs-flip-card .cs-back .cs-cta { font-size: var(--fs-body) !important; padding: 12px 20px !important; }
  }

  /* PD How It Works — desktop uses deel-timeline, mobile uses hww-acc component (matches ISA design) */
  .hww-acc-mobile { display: none; }
  @media (max-width: 767px) {
    .deel-timeline { display: none !important; }
    .hww-acc-mobile { display: block !important; }
  }
  /* ─── Case Studies mobile — show FRONT face only, replace hover-hint with CTA ─── */
  @media (max-width: 767px) {
    /* Explicit padding at multiple layers so cards can't overflow */
    #case-studies {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    #case-studies > .container,
    #case-studies .container {
      padding-left: 20px !important;
      padding-right: 20px !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    /* 1-col grid — full width of container's inner area */
    .cs-flip-grid {
      grid-template-columns: 1fr !important;
      gap: 20px !important;
      perspective: none !important;
      padding: 0 !important;
      margin: 0 !important;
      max-width: 100% !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }
    /* Force card to respect container width, override aspect-ratio */
    .cs-flip-card {
      aspect-ratio: auto !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }
    
    /* Card container — cleaner padding, softer shadow, no clipping */
    .cs-flip-card {
      display: block !important;
      perspective: none !important;
      transform-style: flat !important;
      transform: none !important;
      height: auto !important;
      background: #FFFFFF !important;
      border: 1px solid var(--ink-200) !important;
      border-radius: var(--radius-pill) !important;
      overflow: visible !important;
      text-decoration: none !important;
      color: inherit !important;
      box-shadow: 0 2px 8px rgba(16,24,40,0.06) !important;
      padding: var(--space-3) 20px !important;
    }
    .cs-flip-card:hover { transform: none !important; }
    
    /* Flatten flip-face — strip its border/bg/padding */
    .cs-flip-face.cs-front,
    .cs-front {
      position: static !important;
      transform: none !important;
      backface-visibility: visible !important;
      display: block !important;
      height: auto !important;
      padding: 0 !important;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      overflow: visible !important;
      color: var(--ink-900) !important;
    }
    .cs-flip-face.cs-back { display: none !important; }
    
    /* Top row: industry label + case tag — well-spaced */
    .cs-front .cs-top {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      gap: 12px !important;
      margin: 0 0 20px !important;
      padding: 0 !important;
    }
    .cs-front .cs-ind {
      font-size: var(--fs-eyebrow) !important;
      font-weight: 500 !important;
      letter-spacing: normal !important;
      text-transform: none !important;
      color: var(--ink-600) !important;
      line-height: 1 !important;
    }
    .cs-front .cs-tag {
      font-size: var(--fs-eyebrow) !important;
      font-weight: 500 !important;
      padding: 5px 10px !important;
      letter-spacing: 0.1em !important;
      line-height: 1 !important;
    }
    
    /* Mockup section — dedicated visual band with subtle backdrop */
    .cs-front .cs-mockup {
      padding: 20px var(--space-2) !important;
      margin: 0 0 var(--space-3) !important;
      overflow: visible !important;
      background: #F8FAFF !important;
      border-radius: 10px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-height: 160px !important;
    }
    .cs-front .cs-mockup img {
      width: 100% !important;
      height: auto !important;
      max-height: 180px !important;
      max-width: 100% !important;
      object-fit: contain !important;
      display: block !important;
      margin: 0 auto !important;
    }
    
    /* Title block + CTA — grouped as bottom action zone */
    .cs-front .cs-titleblock {
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    .cs-front .cs-titleblock h3 {
      font-size: var(--fs-title-m) !important;
      font-weight: 500 !important;
      color: var(--ink-900) !important;
      line-height: 1.35 !important;
      margin: 0 0 18px !important;
      letter-spacing: -0.01em !important;
    }
    
    /* Hide the "Hover to reveal outcome →" hint */
    .cs-front .cs-hint { display: none !important; }
    
    /* "Read full case study →" CTA button */
    .cs-front .cs-titleblock::after {
      content: "Read full case study →";
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      padding: 11px 20px !important;
      background: var(--brand) !important;
      color: #FFFFFF !important;
      border-radius: var(--radius-pill) !important;
      font-size: var(--fs-meta) !important;
      font-weight: 500 !important;
      font-family: 'Outfit', sans-serif !important;
      margin: 0 !important;
      letter-spacing: 0 !important;
    }
  }

  /* ─── Architecture section mobile — vertical stack in 1→5 reading order ─── */
  @media (max-width: 767px) {
    /* Reorder cards to match Foundation → Governance flow.
       .sd-stack contains L2 and L1; display: contents lets them become direct
       children of .sd-platform for flex ordering. */
    #architecture .sd-stack { display: contents !important; }
    #architecture .sd-layer.foundation { order: 1 !important; }
    #architecture .sd-layer:not(.foundation) { order: 2 !important; }
    #architecture .sd-side.left { order: 3 !important; }
    #architecture .sd-side.right { order: 4 !important; }
    /* Umbrella (Governance = step 5) is a separate sibling of .sd-platform
       so it renders after all 4 layers naturally. */
    #architecture .sd { max-width: 100% !important; padding: 0 !important; }
    #architecture .sd-platform {
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
    }
    /* Sides + stack all become sequential blocks */
    #architecture .sd-side,
    #architecture .sd-stack {
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
      padding: 0 !important;
      height: auto !important;
    }
    /* Cards: consistent look across sides + layers.
       Override the desktop flex `align-items: center` so all children
       (role badge, h3, chips) start from the LEFT edge on mobile. */
    #architecture .sd-side .box,
    #architecture .sd-layer {
      padding: 20px 18px !important;
      border-radius: 12px !important;
      min-height: auto !important;
      text-align: left !important;
      align-items: flex-start !important;
      justify-content: flex-start !important;
    }
    /* Ensure inner text elements don't inherit center-align via inline styles */
    #architecture .sd-side .box .role,
    #architecture .sd-side .role,
    #architecture .sd-layer .role,
    #architecture .sd-umbrella .role,
    #architecture .sd-side .box h3,
    #architecture .sd-layer h3,
    #architecture .sd-umbrella h3,
    #architecture .sd-side .box .desc,
    #architecture .sd-layer .desc {
      align-self: flex-start !important;
      width: 100% !important;
    }
    /* Umbrella umbrella box grid also needs alignment fix */
    #architecture .sd-umbrella .box {
      align-items: flex-start !important;
    }
    /* Titles and body copy readable on small screens */
    #architecture .sd-side .box h3,
    #architecture .sd-layer h3,
    #architecture .sd-umbrella h3 {
      font-size: var(--fs-title-m) !important;
      text-align: left !important;
      margin: 6px 0 var(--space-1) !important;
    }
    #architecture .sd-side .box .role,
    #architecture .sd-layer .role,
    #architecture .sd-umbrella .role {
      font-size: var(--fs-eyebrow) !important;
      text-align: left !important;
    }
    #architecture .sd-side .box .desc,
    #architecture .sd-layer .desc {
      font-size: var(--fs-body) !important;
      text-align: left !important;
      margin-bottom: 12px !important;
    }
    /* Chips wrap in rows, aligned left */
    #architecture .sd-layer .chips,
    #architecture .sd-umbrella .chips {
      justify-content: flex-start !important;
      gap: 6px !important;
      margin-top: 4px !important;
    }
    #architecture .cd-pipe-stage,
    #architecture .cd-pill,
    #architecture .sd-layer .chip,
    #architecture .sd-umbrella .chip {
      font-size: var(--fs-eyebrow) !important;
      padding: 6px 10px !important;
    }
    /* Layer 3 (Enterprise Integration) — match Layer 2 chip layout:
       wrap pipe stages horizontally like chips, hide the ↓ arrows. */
    #architecture .cd-pipe {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      align-items: flex-start !important;
      justify-content: flex-start !important;
      width: 100% !important;
      gap: 6px !important;
      margin-top: 4px !important;
    }
    #architecture .cd-pipe-arrow {
      display: none !important;
    }
    #architecture .cd-pipe-stage {
      text-align: left !important;
      min-width: 0 !important;
      width: auto !important;
      max-width: 100% !important;
      /* Match .sd-layer .chip visual so it looks like Layer 2's chips */
      font-size: var(--fs-eyebrow) !important;
      font-weight: 500 !important;
      padding: 6px 10px !important;
      letter-spacing: 0.02em !important;
      text-transform: none !important;
    }
    /* Layer 4 (Quality & Compliance) — pills wrap starting from LEFT. */
    #architecture .cd-pills {
      justify-content: flex-start !important;
      align-items: flex-start !important;
    }
    #architecture .cd-pill {
      text-align: left !important;
    }
    /* Umbrella card: label + chips stack instead of grid */
    #architecture .sd-umbrella { margin-top: 12px !important; }
    #architecture .sd-umbrella .box {
      grid-template-columns: 1fr !important;
      gap: 14px !important;
      padding: 20px 18px !important;
    }
    /* Reading flow: stack steps vertically on mobile */
    #architecture .sd-flow-label {
      text-align: left !important;
      margin-bottom: 10px !important;
    }
    #architecture .sd-flow-steps {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: var(--space-1) !important;
    }
    #architecture .sd-flow-steps .step {
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      font-size: var(--fs-meta) !important;
      margin: 0 !important;
      padding: var(--space-1) 12px !important;
      background: #F8FAFF !important;
      border-radius: 8px !important;
    }
    #architecture .sd-flow-steps .step .n {
      width: 24px !important;
      height: 24px !important;
      font-size: var(--fs-eyebrow) !important;
    }
    #architecture .sd-flow-steps .sep { display: none !important; }
    /* Hide the reading-flow band on mobile — redundant now that layer cards
       stack in the same 1→5 order that the flow describes. */
    #architecture .sd-reading-flow { display: none !important; }
  }

  /* ─── Business Outcomes mb-band--6 DSA/PD style: 3+3 layout with horizontal divider ─── */
  /* Desktop: 3 columns */
  @media (min-width: 1025px) {
    .mb-band--6 { grid-template-columns: repeat(3, 1fr) !important; row-gap: 0 !important; }
    .mb-band--6 .mb-cell:nth-child(n+5) {
      padding-top: var(--space-5) !important;
      margin-top: 0 !important;
    }
    .mb-band--6 .mb-cell:nth-child(3)::after { display: none !important; }
    .mb-band--6 .mb-cell:nth-child(5) { padding-left: 0 !important; }
  }
  /* Tablet: 2 columns */
  @media (min-width: 641px) and (max-width: 1024px) {
    .mb-band--6 { grid-template-columns: repeat(2, 1fr) !important; row-gap: 40px !important; }
  }
  /* Mobile: 1-column stack (long descriptions need full width to read comfortably) */
  @media (max-width: 640px) {
    .mb-band--6 { grid-template-columns: 1fr !important; row-gap: var(--space-4) !important; }
    .mb-band--6 .mb-cell:nth-child(n+5) { padding-top: 0 !important; }
  }
  .mb-row-divider {
    grid-column: 1 / -1;
    height: 1px;
    background: var(--ink-200);
    margin: var(--space-5) 0 0;
  }
  @media (max-width: 767px) {
    .mb-row-divider { display: none !important; }
  }

  /* Case Studies — match PD's mockup treatment (100% width, softer drop-shadow).
     Cloud/Oracle/QA had 72% width constraint. Now all pages consistent. */
  .cs-flip-card .cs-front .cs-mockup,
  .cs-mockup {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .cs-flip-card .cs-front .cs-mockup img,
  .cs-mockup img {
    max-width: 100% !important;
    max-height: 198px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 8px 16px rgba(16,24,40,0.10)) !important;
  }
  .cs-flip-card .cs-front .cs-mockup svg,
  .cs-mockup svg {
    max-width: 90% !important;
    max-height: 200px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 10px 24px rgba(21,93,252,0.16)) !important;
  }

  /* Our Solutions cards — equal height per row (fix C&V being taller than siblings) */
  .sols-grid {
    align-items: stretch !important;
  }
  .sols-card {
    height: 100% !important;
    min-height: 100% !important;
    align-self: stretch !important;
  }

  /* How We Work / How It Works (hww-acc) — HD 1600+ font scaling. */
  @media (min-width: 1600px) {
    .hww-subhead {
      font-size: var(--ps-text-body) !important;
      line-height: 1.55 !important;
    }
    .hww-col-num {
      font-size: var(--fs-title-l) !important;
    }
    .hww-col-title {
      font-size: var(--ps-text-h3) !important;
      line-height: 1.3 !important;
    }
    .hww-exp-num {
      font-size: var(--fs-title-l) !important;
    }
    .hww-exp-title {
      font-size: var(--ps-text-h3) !important;
      line-height: 1.3 !important;
    }
    .hww-exp-desc {
      font-size: var(--ps-text-body) !important;
      line-height: 1.55 !important;
      max-width: 640px !important;
    }
    .hww-eyebrow {
      font-size: var(--fs-eyebrow) !important;
    }
  }

  /* Trust chip mobile — balance text wrap, larger icon, better spacing */
  @media (max-width: 640px) {
    .hero-trust {
      font-size: var(--fs-eyebrow) !important;
      padding: 10px var(--space-2) !important;
      line-height: 1.4 !important;
      gap: 12px !important;
      text-wrap: balance !important;
      max-width: 100% !important;
      align-items: center !important;
      border-radius: var(--radius-pill) !important;
    }
    .hero-trust svg {
      width: 20px !important;
      height: 20px !important;
      flex-shrink: 0 !important;
      margin-top: 0 !important;
    }
  }

  /* Hero value strip mobile — 2 on line 1 ("Accelerate • Modernize"), 1 on line 2 ("Adopt AI") */
  @media (max-width: 767px) {
    .hero-value-strip {
      display: flex !important;
      flex-direction: row !important;      /* override any column stack */
      flex-wrap: wrap !important;
      justify-content: flex-start !important;
      align-items: center !important;
      row-gap: 6px !important;
      column-gap: 0 !important;
      white-space: normal !important;
      text-align: left !important;
    }
    /* Show all separators */
    .hero-value-strip .sep {
      display: inline !important;
      margin: 0 var(--space-1) !important;
    }
    /* Hide the SECOND separator (the 4th child overall = between "Modernize" and "Adopt AI").
       Selector uses nth-child since nth-of-type(2) was matching the FIRST span with class sep. */
    .hero-value-strip > .sep:nth-child(4) {
      display: none !important;
    }
    /* Force the last item ("Adopt AI with Confidence") to a new line via flex-basis */
    .hero-value-strip > span:not(.sep):last-child {
      flex-basis: 100% !important;
      text-align: left !important;
    }
  }

  /* Home promo video section — proper top spacing + title layout on mobile */
  @media (max-width: 767px) {
    .promo {
      padding-top: 40px !important;      /* was 0 — proper spacing above video card */
    }
    /* Adjust title inside video card on mobile — improve alignment */
    .promo-caption {
      left: 20px !important;
      right: 20px !important;
      bottom: 20px !important;
      max-width: calc(100% - 40px) !important;
      align-items: flex-start !important;
    }
    .promo-caption h3 {
      font-size: var(--fs-title-m) !important;         /* was 22 — better fit for narrow mobile */
      line-height: 1.3 !important;
      margin-bottom: 4px !important;
    }
    .promo-caption p {
      font-size: var(--fs-meta) !important;
      line-height: 1.4 !important;
    }
    .promo-bar-vert {
      width: 3px !important;
      height: 44px !important;
      flex-shrink: 0 !important;
      margin-top: 2px !important;
    }
    /* Reduce play button so it doesn't overlap the title */
    .promo .play-button {
      width: 56px !important;
      height: 56px !important;
    }
    .promo .play-button svg {
      width: 22px !important;
      height: 22px !important;
      margin-left: 2px !important;
    }
    /* Also shrink the ripple animation for the smaller button */
    .promo .play-button::before {
      inset: -6px !important;
    }
  }

  /* Pain Metrics Band mobile — reduce gap between title and stats + 2x2 layout */
  @media (max-width: 767px) {
    .sf-top {
      padding-bottom: var(--space-2) !important;      /* was 32 */
    }
    .sf-metrics-band {
      padding-top: var(--space-2) !important;         /* was 40 */
      padding-bottom: 40px !important;      /* was 72 */
    }
    /* 4 stats → 2x2 grid on mobile */
    .sf-metrics-band .mb-band {
      grid-template-columns: repeat(2, 1fr) !important;
      row-gap: 28px !important;
      column-gap: 12px !important;
    }
    /* Center-align cell content in the 2x2 grid (impact stats feel) */
    .sf-metrics-band .mb-cell {
      text-align: center !important;
      align-items: center !important;
      padding: 0 !important;
    }
    /* Hide vertical dividers between cells (no longer 1-column) */
    .sf-metrics-band .mb-cell::after,
    .sf-metrics-band .mb-cell::before {
      display: none !important;
    }
  }

  /* Customer review + stats-band mobile adjustments */
  @media (max-width: 767px) {
    /* Bump customer review body text 17 → 18px (design system standard) */
    .clients-q-name { font-size: var(--fs-title-m) !important; }
    .clients-q-quote { font-size: var(--fs-title-m) !important; line-height: 1.55 !important; }
    
    /* Stats-band (Enterprise-Grade / 20+ Years / 4 / 24×7) — 2x2 on mobile */
    .stats-band .stats-row {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      column-gap: 12px !important;
      row-gap: var(--space-3) !important;
      flex-wrap: initial !important;
    }
    .stats-band .stats-cell {
      padding: var(--space-1) !important;
      text-align: center !important;
    }
    /* Hide the vertical dividers (.stats-div) in 2x2 layout */
    .stats-band .stats-div { display: none !important; }
    /* Bump stats font sizes on mobile for 2x2 layout */
    .stats-band .stats-num {
      font-size: var(--ps-text-h1) !important;    /* was 28 — bigger for 2x2 impact */
      margin-bottom: 6px !important;
    }
    .stats-band .stats-label {
      font-size: var(--fs-meta) !important;    /* was 12 — better readability */
      line-height: 1.4 !important;
    }
  }

  /* Industries cards mobile — original design + rounded transparent overlay */
  @media (max-width: 767px) {
    .ind-grid {
      grid-template-columns: 1fr !important;
      gap: var(--space-2) !important;
    }
    /* Card sizes to content — no empty band at bottom */
    .ind-card {
      min-height: 220px !important;
      height: auto !important;
    }
    /* White overlay — semi-transparent + rounded so image peeks through around edges */
    .ind-card .ind-hover {
      background: rgba(255, 255, 255, 0.85) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
      border-radius: var(--radius) !important;
      margin: var(--space-2) !important;
      padding: 20px !important;
      position: relative !important;
      inset: auto !important;
      opacity: 1 !important;
      color: var(--ink-900) !important;
      box-shadow: 0 4px 20px rgba(16,24,40,0.15) !important;
    }
    .ind-card .ind-hover-title {
      color: var(--ink-900) !important;
    }
    .ind-card .ind-hover-desc {
      color: var(--ink-600) !important;
    }
    .ind-card .ind-hover-link {
      color: var(--brand) !important;
      border-bottom-color: rgba(21,93,252,0.35) !important;
    }
  }

  /* Missing HD scaling for card titles — Core Capabilities + What Delivers */
  @media (min-width: 1600px) {
    .cc-card-title {
      font-size: var(--ps-text-h3) !important;
      line-height: 1.3 !important;
    }
    .cd-depth-card h3 {
      font-size: var(--ps-text-h3) !important;
      line-height: 1.3 !important;
      font-weight: 500 !important;
    }
  }
  /* Also ensure a good base for cd-depth-card h3 */
  .cd-depth-card h3:not([style*="font-size"]) {
    font-size: var(--ps-text-h3);
    font-weight: 500;
    color: var(--ink-900);
    line-height: 1.3;
  }

  /* About QualNetics stats — 2x2 layout on mobile */
  @media (max-width: 767px) {
    #about-qualnetics .qn-stats-row {
      grid-template-columns: 1fr 1fr !important;
      row-gap: var(--space-3) !important;
      column-gap: 12px !important;
    }
    /* Hide vertical dividers in 2x2 layout */
    #about-qualnetics .qn-stat-divider {
      display: none !important;
    }
    /* Bump stat number for better mobile impact */
    #about-qualnetics .qn-stats-row > div > div:first-child {
      font-size: var(--ps-text-h3) !important;
    }
  }

  /* Contact Us — align to DS standards (H1, form input, office name) */
  /* H1 hero — DS scaling (was 44-88, should be 40-72 max) */
  .cu-head h1,
  .cu-hero h1 {
    font-size: var(--fs-display-1) !important;
  }
  @media (min-width: 1441px) {
    .cu-head h1,
    .cu-hero h1 {
      font-size: var(--fs-display-1) !important;
    }
  }
  /* Form input — bump to body sizes (18/22) for readability + DS alignment */
  .cu-field input,
  .cu-field textarea,
  .cu-field select,
  .cu-form input,
  .cu-form textarea,
  .cu-form select {
    font-size: var(--fs-title-m) !important;
    line-height: 1.5 !important;
  }
  @media (min-width: 1441px) {
    .cu-field input,
    .cu-field textarea,
    .cu-field select,
    .cu-form input,
    .cu-form textarea,
    .cu-form select {
      font-size: var(--ps-text-body) !important;
    }
  }
  @media (min-width: 1600px) {
    .cu-field input,
    .cu-field textarea,
    .cu-field select,
    .cu-form input,
    .cu-form textarea,
    .cu-form select {
      font-size: var(--ps-text-body) !important;
    }
  }
  /* Office name — align to card title (22/26) */
  .cu-office-name {
    font-size: var(--ps-text-h3) !important;
  }
  @media (min-width: 1441px) {
    .cu-office-name {
      font-size: var(--ps-text-h3) !important;
    }
  }

  /* Contact Us mobile — align to DS (fix legacy small mobile sizes) */
  @media (max-width: 767px) {
    /* Form input/textarea — 16px minimum prevents iOS zoom-on-focus */
    .cu-field input,
    .cu-field textarea,
    .cu-field select,
    .cu-form input,
    .cu-form textarea,
    .cu-form select {
      font-size: var(--fs-body) !important;
    }
    /* Form label — DS eyebrow 12px minimum */
    .cu-field label {
      font-size: var(--fs-eyebrow) !important;
    }
    /* Lede subtitle — DS body 16px on mobile (was going down to 14) */
    .lede {
      font-size: var(--fs-body) !important;
      line-height: 1.5 !important;
    }
    /* Office name on mobile — matches card title mobile */
    .cu-office-name {
      font-size: var(--ps-text-h3) !important;
    }
    /* Quickmeta phone/email — bump slightly for readability */
    .cu-qm {
      font-size: var(--fs-meta) !important;
    }
  }



/* ===== next source <style> block ===== */


/* Last-in-cascade override — beats all legacy !important rules at 1441+ */
@media (min-width: 1600px) {
  .hww-exp-desc,
  .hww-subhead,
  .cc-card-desc,
  .cc-card-sub,
  .cc-left-sub,
  .impact-intro p,
  .isa-deliver-row p,
  .isa-channel-cell p,
  .cvo-feature-card p,
  .cvo-deliver-card p,
  .cvo-why-item p,
  .sols-headline-sub,
  .sols-desc,
  .imp-card p,
  .impact-sub,
  .mb-desc,
  .mb-cat,
  .why-row p,
  .deel-card p,
  .trans-content p,
  .insight-card p,
  .clients-quote,
  .ind-card-sub,
  .ind-hover-desc,
  .poc-sub,
  .why-left-sub,
  .fcta-modal-sub,
  .sf-top-sub,
  .sf-cta-sub,
  .ag-lede,
  .ag-sub,
  .final-cta-sub,
  .cs-lede,
  .cs-card-desc,
  #risk-compliance .cvo-feature-card p,
  .cd-depth-card p,
  .sd-side .box .desc,
  .sd-layer .desc,
  .sa-deliver-point p,
  .solution p,
  .final-cta p,
  .section-header p,
  .sec-lede,
  .hero-lede,
  .hero-sub,
  .f1-subtitle {
    font-size: var(--ps-text-body) !important;
    line-height: 1.55 !important;
  }
}

/* [large-screen single-line heading — requested] Only ≥1200px; medium/mobile keep wrapping. */
@media (min-width: 1200px) {
  #channels .section-header { max-width: none !important; }
  #channels .section-header h2 { white-space: nowrap; }
  #channels .section-header p { max-width: 760px; margin-left: auto; margin-right: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DESIGN REVIEW (2026-07-21) — Wealth large-screen fixes.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  /* Outcomes band: long word-values ("Real-Time", "1-Click") were oversized at
     up to 60px — reduce so they read consistently with the numeric values. */
  #outcomes .mb-value { font-size: var(--ps-text-h1) !important; }
  /* Deployment Options — three card titles 22 → 26px. */
  #deployment .cvo-feature-card h3 { font-size: var(--ps-text-h3) !important; }
  /* Footer "Get Started" band — larger heading + body copy. (Heading must WRAP,
     not force a single line — nowrap made it overflow into the CTA button at HD.) */
  #contact .ag-h2 { white-space: normal !important; font-size: var(--fs-display-2) !important; }
  #contact .ag-row-text p { font-size: var(--fs-title-m) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WEALTH HERO — text/image overlap fix (2026-07-28)
   The hero is a full-bleed bg product image (laptop+phone, object-fit:cover,
   centered) with the text column overlaid. At mid desktop widths (~1024–1440)
   the centred laptop sat under the right edge of the sub-paragraph, so the copy
   ran over the mockup and was hard to read. Add a left→right white scrim above
   the image but below the text (z-index:2), the same idea as the prototype's
   radial fade, so the copy is always legible. hero-bg is display:none on mobile,
   so this only affects desktop; the stacked .hero-mobile-img is unaffected. */
section.hero .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    #FFFFFF 0%, #FFFFFF 40%,
    rgba(255, 255, 255, 0.86) 54%,
    rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WEALTH HERO — split layout (text left / image right), mirroring contract-optimizer.
   The component reuses .cvo-hero-grid, but that class has no base container sizing
   on this page, so it's provided here: centered max-width + responsive padding, an
   image that scales without overlapping the text, and a single-column stack on
   tablet/mobile with the image below the copy.
   ═══════════════════════════════════════════════════════════════════════════ */
html body section.hero .cvo-hero-grid {
  max-width: var(--container, 1280px) !important;
  margin: 0 auto !important;
  width: 100% !important;
  padding: clamp(24px, 2.4vw, 40px) clamp(20px, 5vw, 80px) !important;
  box-sizing: border-box !important;
}
html body section.hero .wealth-hero-img { display: flex; align-items: center; justify-content: flex-end; }
html body section.hero .wealth-hero-img img { max-width: 100% !important; height: auto !important; }
/* Collapse to one column on tablet/mobile — image stacks below the text, no overlap.
   Also drop the vertical centering (which pulled the eyebrow up under the sticky
   header) and add generous top padding so the content clears the header. */
@media (max-width: 900px) {
  html body section.hero { align-items: flex-start !important; min-height: 0 !important; }
  html body section.hero .cvo-hero-grid {
    grid-template-columns: 1fr !important;
    padding-top: clamp(40px, 9vw, 72px) !important;
    padding-bottom: clamp(40px, 9vw, 64px) !important;
  }
  html body section.hero .wealth-hero-img { justify-content: center; margin-top: var(--space-4); }
}