/* =====================================================================
   CreateASoft Homepage — Prototype V1
   --------------------------------------------------------------------
   Brand palette and type system per Brand Guidelines.
   Barlow regular family loaded from Google Fonts in index.html.
   ===================================================================== */


/* ---------- 1. Custom properties ---------- */
:root {
  /* Brand palette */
  --color-primary: #1466AC;
  --color-primary-deep: #0E4F86;       /* darker primary for hover/contrast */
  --color-accent: #d53e20;
  --color-accent-soft: #FBE8E1;
  --color-text: #1E1E1E;
  --color-text-muted: #4B5563;
  --color-text-faint: #6B7280;
  --color-container: #DBECFA;
  --color-container-pale: #F4F8FC;
  --color-rule: #C8D5E2;
  --color-white: #FFFFFF;
  --color-dark: #0F1B2A;

  /* Type */
  --font-body: 'Barlow Condensed', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Barlow Condensed', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Spacing scale (8px base) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* Layout */
  --container-max: 1380px;
  --container-pad: clamp(1.5rem, 5vw, 3.5rem);

  /* Radii / shadows */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15, 27, 42, 0.06);
  --shadow-md: 0 6px 24px rgba(15, 27, 42, 0.08);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-size: 110%;             /* base scale bump: everything in rem grows ~10% */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;         /* was 17px; now scales with html */
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

ul, ol { padding-left: 1.25rem; }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
a:hover {
  color: var(--color-primary-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

button { font-family: inherit; }

/* Skip link for keyboard users — visually hidden until focused */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  z-index: 100;
}
.skip-link:focus {
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  top: 0.5rem;
  left: 1rem;
}

/* Visually hidden but available to assistive tech */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------- 3. Typography ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
}

.eyebrow-on-dark { color: var(--color-accent); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: regular;
  color: var(--color-primary);
  line-height: 1.1;
  margin: 0 0 var(--space-3);
}

p { margin: 0 0 var(--space-2); }

strong { font-weight: 600; }

/* Product name treatment per brand guideline:
   medium weight, primary color, on first occurrence in a section. */
.product-name {
  font-weight: 500;
  color: var(--color-primary);
  font-style: normal;
}
.product-name-light {
  color: var(--color-white);
  font-weight: 600;
}

/* ---------- 4. Layout primitives ---------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  padding: 0.05rem 1.5rem;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 80ms ease;
  text-decoration: none;
  min-height: 44px;     /* a11y touch target */
}
.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.btn-primary:hover { background: var(--color-primary-deep); border-color: var(--color-primary-deep); color: var(--color-white); }

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-secondary:hover { background: var(--color-primary); color: var(--color-white); }

.btn-primary-on-dark {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}
.btn-primary-on-dark:hover { background: #C84B31; border-color: #C84B31; color: var(--color-white); }
.btn2 {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  padding: 0.6rem 1.5rem;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 80ms ease;
  text-decoration: none;
  min-height: 44px;     /* a11y touch target */
}
.btn2:hover { text-decoration: none;color:#fff; }
.btn-primary2 {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.btn-primary2:hover { background: var(--color-primary-deep); border-color: var(--color-primary-deep); color: var(--color-white); }

.btn-secondary2:hover { background: var(--color-primary); color: var(--color-white); }

.btn2-secondary2 {
  background: transparent;
  color: #333;
  border-color: var(--color-primary);
}
.btn2-secondary2:hover { background: rgba(87, 184, 249, 0.35); color: var(--color-white); }

    /* ===================================================
       nGroup Case Study — page-specific styles
       =================================================== */

    /* Breadcrumb */
    .cs-breadcrumb {
      padding: 0.75rem 0;
      border-bottom: 1px solid var(--color-rule);
      background: var(--color-white);
    }
    .cs-breadcrumb-nav {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.85rem;
      color: var(--color-text-muted);
    }
    .cs-breadcrumb-nav a { color: var(--color-text-muted); }
    .cs-breadcrumb-sep { color: var(--color-rule); }
    .cs-breadcrumb-current { color: var(--color-text); font-weight: 500; }

    /* Hero */
 .hero-sub {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 840px;
  margin: 0 auto;
  line-height: 1.6;
    }
    .hero-subline {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 78ch;
  margin-bottom: var(--space-4);
  line-height: 1.45;
  font-display: 'Barlow Condensed', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
     .hero {
      padding: 4rem 2rem 3rem;
      background:
        radial-gradient(ellipse at 30% -10%, var(--color-container) 0%, transparent 55%),
        var(--color-white);
      text-align: center;
    }
.hero-inner { max-width:780px; margin: 0 auto; }
.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 160, 225, 0.15);
    border: 1px solid rgba(0, 160, 225, 0.4);
    color: #5BC8F5;
    padding: 6px 14px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 22px;
  }
.hero-tag .live-dot {
    width: 7px; height: 7px;
    background: #E8541E;
    border-radius: 50%;
    animation: live-pulse 1.6s infinite;
  }
.hero-eyebrow {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 0.92rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--color-accent);
      margin-bottom: 1rem;
    }
.hero h1 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.9rem, 4vw, 2.8rem);
      line-height: 1.15;
      color: var(--color-primary);
      margin: 0 0 1rem;
      letter-spacing: -0.01em;
    }
.hero-cs {
      padding: var(--space-6) 0 var(--space-5);
      background:
        radial-gradient(ellipse at 30% -10%, var(--color-container) 0%, transparent 55%),
        var(--color-white);
    }
.cs-client-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: var(--space-3);
    }
    .cs-client-logo {
      height: 34px;
      width: auto;
    }
    .cs-client-divider {
      width: 1px;
      height: 26px;
      background: var(--color-rule);
    }
    .hero-cs-headline {
      font-size: clamp(2rem, 4vw, 3rem);
      letter-spacing: -0.01em;
      margin: 0 auto var(--space-3);
      max-width: none;
      line-height: 1.1;
      color: var(--color-primary);
      text-align: center;
    }
    .hero-cs-sub {
      font-size: 1.1rem;
      color: var(--color-text-muted);
      max-width: none;
      line-height: 1.6;
      margin: 0 auto 0;
      text-align: center;
    }

    /* Results bar */
    .results-bar {
      background: var(--color-primary);
      padding: var(--space-4) 0;
    }
    .results-bar-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      background: rgba(255,255,255,0.15);
      border-radius: var(--radius-md);
      overflow: hidden;
    }
    .result-metric {
      background: var(--color-primary);
      padding: var(--space-4) var(--space-3);
      text-align: center;
    }
    .result-num {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(2.8rem, 5vw, 3.8rem);
      color: var(--color-white);
      line-height: 1;
      margin: 0 0 0.35rem;
      letter-spacing: -0.02em;
    }
    .result-label {
      font-size: 0.92rem;
      color: rgba(255,255,255,0.85);
      line-height: 1.4;
      margin: 0;
    }
    .result-label strong { color: var(--color-white); display: block; font-weight: 600; }

    /* Shared section helpers */
    .cs-section { padding: var(--space-6) 0; background: var(--color-white); }
    .cs-section-pale {
      background: var(--color-container-pale);
      border-top: 1px solid var(--color-rule);
      border-bottom: 1px solid var(--color-rule);
    }
    .cs-section-blue {
      background: var(--color-container);
      box-shadow:
        inset 0 14px 18px -14px rgba(15,27,42,0.22),
        inset 0 -14px 18px -14px rgba(15,27,42,0.22);
    }

    /* Challenge cards */
    .challenge-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(1rem, 2vw, 1.5rem);
      margin-top: var(--space-5);
    }
    .challenge-card {
      background: var(--color-container);
      border: none;
      border-radius: var(--radius-lg);
      padding: var(--space-3) var(--space-4);
    }
    .challenge-title {
      font-family: var(--font-display);
      font-weight: 700;
      color: var(--color-primary);
      font-size: 1.05rem;
      margin: 0 0 0.5rem;
    }
    .challenge-body {
      font-size: 1rem;
      color: var(--color-text);
      line-height: 1.55;
      margin: 0;
    }

    /* Solution capability grid */
    .solution-caps {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(1rem, 2vw, 1.5rem);
      margin-top: var(--space-5);
    }
    .solution-cap {
      background: var(--color-white);
      border-radius: var(--radius-lg);
      padding: var(--space-3);
      box-shadow: var(--shadow-sm);
    }
    .solution-cap-icon {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: var(--color-primary);
      color: var(--color-white);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: var(--space-2);
    }
    .solution-cap-icon svg { width: 20px; height: 20px; }
    .solution-cap-title {
      font-family: var(--font-display);
      font-weight: 700;
      font-style: italic;
      color: var(--color-primary);
      font-size: 1rem;
      margin: 0 0 0.4rem;
    }
    .solution-cap-body {
      font-size: 0.9rem;
      color: var(--color-text);
      line-height: 1.5;
      margin: 0;
    }

     /* ── Approach steps ── */
    .approach-list {
      list-style: none;
      padding: 0;
      margin: 2rem 0 0;
      counter-reset: step;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }
    .approach-list li {
      counter-increment: step;
      display: grid;
      grid-template-columns: 40px 1fr;
      gap: 0 1rem;
      align-items: start;
      background: var(--color-white);
      border-radius: var(--radius-md);
      padding: 1rem 1.25rem;
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--color-rule);
    }
    .approach-list li::before {
      content: counter(step);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px; height: 32px;
      border-radius: 50%;
      background: var(--color-primary);
      color: var(--color-white);
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 0.88rem;
      flex-shrink: 0;
      margin-top: 0.1rem;
    }
    .approach-list li span {
      font-size: 1rem;
      color: var(--color-text);
      line-height: 1.6;
    }
    /* Client result sections */
    .client-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(2rem, 5vw, 4rem);
      align-items: start;
      margin-top: var(--space-5);
    }
    .client-label {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 0.7rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--color-accent);
      margin-bottom: var(--space-2);
    }
    .client-label::before {
      content: "";
      display: block;
      width: 20px; height: 2px;
      background: var(--color-accent);
      border-radius: 1px;
    }
    .client-headline {
      font-size: clamp(1.4rem, 2.6vw, 2rem);
      margin: 0 0 var(--space-3);
      color: var(--color-primary);
    }
    .client-body {
      font-size: 1rem;
      color: var(--color-text);
      line-height: 1.6;
      margin: 0 0 var(--space-3);
    }

    /* Before / after distance rows */
    .before-after {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 0.75rem;
      background: var(--color-container);
      border-radius: var(--radius-md);
      padding: 0.85rem 1rem;
      margin-bottom: 0.6rem;
      font-size: 0.9rem;
    }
    .before-after-from {
      color: var(--color-text-muted);
      text-decoration: line-through;
      text-align: right;
    }
    .before-after-arrow {
      color: var(--color-accent);
      font-weight: 700;
      font-size: 1.1rem;
      text-align: center;
    }
    .before-after-to {
      color: var(--color-primary);
      font-weight: 700;
    }
    .before-after-label {
      font-size: 0.78rem;
      color: var(--color-text-muted);
      font-style: italic;
      grid-column: 1 / -1;
    }

    /* Visual stat panel (right column) */
    .cs-visual-panel {
      background: var(--color-container);
      border-radius: var(--radius-lg);
      padding: var(--space-3);
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      position: sticky;
      top: 6rem;
    }
    .cs-stat-hero {
      background: var(--color-primary);
      border-radius: var(--radius-lg);
      padding: var(--space-5) var(--space-4);
      text-align: center;
      color: var(--color-white);
    }
    .cs-stat-hero-accent { background: var(--color-accent); }
    .cs-stat-hero-num {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(3.5rem, 7vw, 5rem);
      color: var(--color-white);
      line-height: 1;
      margin: 0 0 0.3rem;
      letter-spacing: -0.03em;
    }
    .cs-stat-hero-label {
      font-size: 1rem;
      color: rgba(255,255,255,0.88);
      margin: 0;
      line-height: 1.4;
    }
    .cs-stat-sub {
      background: var(--color-primary);
      border-radius: var(--radius-lg);
      padding: var(--space-3) var(--space-3);
      text-align: center;
      color: var(--color-white);
    }
    .cs-stat-sub-num {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.75rem;
      color: var(--color-white);
      line-height: 1;
      margin: 0 0 0.2rem;
      letter-spacing: -0.01em;
    }
    .cs-stat-sub-label {
      font-size: 0.85rem;
      color: rgba(255,255,255,0.82);
      line-height: 1.35;
      margin: 0;
    }
    .cs-stat-sub-label strong { color: var(--color-white); }

    /* Metric list */
    .metric-list {
      list-style: none;
      padding: 0;
      margin: 0 0 var(--space-3);
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
    }
    .metric-item {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 0.6rem 0.9rem;
      align-items: start;
      background: var(--color-container);
      border-radius: var(--radius-md);
      padding: 0.85rem 1rem;
    }
    .metric-item-num {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.5rem;
      color: var(--color-primary);
      line-height: 1;
      white-space: nowrap;
    }
    .metric-item-check {
      font-size: 1.2rem;
      color: var(--color-accent);
      line-height: 1.3;
    }
    .metric-item-detail { display: flex; flex-direction: column; gap: 0.1rem; }
    .metric-item-label { font-size: 0.9rem; font-weight: 600; color: var(--color-text); line-height: 1.3; }
    .metric-item-sub { font-size: 0.82rem; color: var(--color-text-muted); }

    /* Quote section */
    .cs-quote {
      padding: var(--space-7) 0;
      background: var(--color-dark);
      color: var(--color-white);
      position: relative;
      overflow: hidden;
    }
    .cs-quote::before {
      content: "\201C";
      font-family: Georgia, serif;
      font-size: 40rem;
      line-height: 0.8;
      color: rgba(255,255,255,0.025);
      position: absolute;
      top: -4rem; left: -3rem;
      pointer-events: none;
    }
    .cs-quote-inner {
      max-width: 900px;
      margin: 0 auto;
      position: relative;
    }
    .cs-quote-body {
      font-family: var(--font-display);
      font-weight: 300;
      font-style: italic;
      font-size: clamp(1.25rem, 2.5vw, 1.7rem);
      line-height: 1.55;
      color: var(--color-white);
      margin: 0 0 var(--space-4);
    }
    .cs-quote-emphasis {
      color: #7cc4fc;
      font-weight: 400;
      font-style: italic;
    }
    .cs-quote-attr-wrap {
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }
    .cs-quote-bar {
      width: 3rem; height: 2px;
      background: var(--color-accent);
      border-radius: 1px;
      flex-shrink: 0;
    }
    .cs-quote-attr {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: 0.95rem;
      color: rgba(255,255,255,0.65);
    }
    .cs-quote-attr strong { color: var(--color-white); font-weight: 600; }

    /* Business impact grid */
    .impact-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(1rem, 2vw, 1.5rem);
      margin-top: var(--space-5);
    }
    .impact-card {
      background: var(--color-white);
      border-radius: var(--radius-lg);
      padding: var(--space-4);
      border-left: 4px solid var(--color-primary);
      box-shadow: var(--shadow-sm);
    }
    .impact-card-accent { border-left-color: var(--color-accent); }
    .impact-title {
      font-family: var(--font-display);
      font-weight: 700;
      font-style: italic;
      color: var(--color-primary);
      font-size: 1.05rem;
      margin: 0 0 0.4rem;
    }
    .impact-card-accent .impact-title { color: var(--color-accent); }
    .impact-body { font-size: 0.95rem; color: var(--color-text); line-height: 1.55; margin: 0; }

    /* ---------- Final CTA (Section 10) ---------- */
.final-cta {
  padding: var(--space-7) 0;
  background: var(--color-dark);
  color: var(--color-white);
}
.final-cta-inner {
  max-width: 720px;
  text-align: center;
}
.final-cta-headline {
  color: var(--color-white);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  margin: 0 auto var(--space-3);
  max-width: 22ch;
}
.final-cta-body {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 auto var(--space-4);
  max-width: 56ch;
}
.final-cta-row {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.btn-ghost-on-dark {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  padding: 0.95rem 1.5rem;
  border-radius: var(--radius-md);
  color: var(--color-white);
  border: 2px solid rgba(255,255,255,0.4);
  background: transparent;
  text-decoration: none;
  min-height: 44px;
  transition: border-color 140ms ease, background 140ms ease;
}
.btn-ghost-on-dark:hover {
  border-color: var(--color-white);
  background: rgba(255,255,255,0.08);
  color: var(--color-white);
  text-decoration: none;
}

/* ---------- New. Footer ---------- */
.site-footer2 {
  background: linear-gradient(120deg, #081C30 0%, #0E2A47 50%, #1B3A5C 100%);
  color: rgba(255, 255, 255, 0.78);
  padding: var(--space-2) 0 var(--space-1);
  font-size: 0.98rem;
}
.site-footer2 a { color: rgba(255, 255, 255, 0.78); font-size: 0.98rem; }
.site-footer2 a:hover { color: var(--color-white); }
.footer-cols2 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  padding-top: var(--space-4);
  padding-bottom: var(--space-2);
  padding-left: var(--space-7);
  padding-right: var(--space-5);
}
.footer-col-heading2 {
  color: var(--color-white);
  font-size: 1rem;
  margin: 0 0 1rem;
  font-weight: 700;
  font-style: italic;
}
.footer-col2 ul { list-style: none; padding: 0; margin: 0; font-size: 0.98rem; }
.footer-col2 li { padding-bottom: 0.55rem; }
.footer-col2 li a { padding-bottom: 0.55rem; color:#fff; font-size: 0.98rem;}
.footer-col2 li a:hover { padding-bottom: 0.55rem; color:#fff; text-decoration:underline;font-style:italic;}

@media (max-width: 980px) {
.site-footer2 {
  color: rgba(255, 255, 255, 0.78);
  padding: var(--space-1) 0 var(--space-1);
  font-size: 0.92rem;
}
 .footer-cols2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  padding-left: var(--space-1);
  padding-right: var(--space-1);
}
.footer-col-heading2 {
 display:none;
}
}
@media (max-width: 600px) {
.site-footer2 {
  color: rgba(255, 255, 255, 0.78);
  padding: var(--space-1) 0 var(--space-1);
  font-size: 0.92rem;
}
 .footer-cols2 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  padding-left: var(--space-1);
  padding-right: var(--space-1);
}
.footer-col-heading2 {
 display:none;
}
}

/* Indicate current page in primary nav */
.primary-nav a[aria-current="page"] {
  color: var(--color-primary);
  font-weight: 700;
}
    /* ===== Responsive ===== */
    @media (max-width: 960px) {
      .results-bar-grid { grid-template-columns: 1fr; }
      .challenge-grid { grid-template-columns: 1fr; }
      .solution-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .client-grid { grid-template-columns: 1fr; }
      .cs-visual-panel { position: static; }
      .impact-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 600px) {
      .solution-caps { grid-template-columns: 1fr; }
      .before-after { grid-template-columns: 1fr; }
      .before-after-from { text-align: left; }
    }