@font-face {
    font-family: 'PP Neue Montreal';
    src: url('https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9bb43e36419997ecfe_PPNeueMontreal-Book.otf') format('opentype');
    font-weight:400;
    font-display: swap;
  }
  @font-face {
    font-family: 'PP Neue Montreal';
    src: url('https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9b39c5673e51a86f5a_PPNeueMontreal-Medium.otf') format('opentype');
    font-weight:500;
    font-display: swap;
  }

  /* ============================================================
     DESIGN TOKENS
     Every value below is a knob. The theme editor overlay writes
     directly to these custom properties at runtime.
     ============================================================ */
  :root {
    /* ---- Typeface ---- */
    --font-sans: 'PP Neue Montreal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;

    /* ---- Type scale (fluid; --fs-ratio scales the whole system) ---- */
    --fs-ratio: 1;
    --fs-display: calc(clamp(2.5rem, 5.2vw, 4rem)      * var(--fs-ratio));
    --fs-h1:      calc(clamp(2rem, 4.2vw, 3.25rem)     * var(--fs-ratio));
    --fs-h2:      calc(clamp(1.75rem, 3.2vw, 2.75rem)  * var(--fs-ratio));
    --fs-h3:      calc(clamp(1.5rem, 2.6vw, 2.125rem)  * var(--fs-ratio));
    --fs-h4:      calc(clamp(1.1875rem, 1.6vw, 1.5rem) * var(--fs-ratio));
    --fs-lg:      calc(1.125rem  * var(--fs-ratio));
    --fs-md:      calc(1.0625rem * var(--fs-ratio));
    --fs-body:    calc(1rem      * var(--fs-ratio));
    --fs-sm:      calc(0.9375rem * var(--fs-ratio));
    --fs-xs:      calc(0.875rem  * var(--fs-ratio));
    --fs-2xs:     calc(0.8125rem * var(--fs-ratio));
    --fs-3xs:     calc(0.75rem   * var(--fs-ratio));

    /* ---- Line height & tracking ---- */
    --lh-tight: 1.08;
    --lh-snug: 1.22;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;
    --tracking-tight: -0.02em;
    --tracking-snug: -0.01em;

    /* ---- Spacing (4px base) ---- */
    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
    --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
    --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

    /* ---- Layout rhythm ---- */
    --section-py: clamp(72px, 8vw, 120px);
    --section-px: clamp(20px, 4vw, 48px);
    --container: clamp(1200px, 88vw, 1600px);

    /* ---- Brand accent (the site previously had none) ---- */
    --accent-600: #0B4FD1;
    --accent-500: #1668F0;
    --accent-400: #4A8DFF;
    --accent-100: #E8F1FE;

    /* ---- Semantic surfaces ---- */
    --surface-base: #FFFFFF;
    --surface-sunken: #EEF5FA;
    --surface-raised: #FFFFFF;
    --surface-inverse: #0D212C;
    --surface-inverse-deep: #071820;

    /* ---- Semantic text ----
       Secondary/muted tiers collapse into primary/inverse: every
       text color on site is now either solid black (light bg) or
       solid white (dark bg), never a grey in between. */
    --text-primary: #051A24;
    --text-secondary: var(--text-primary);
    --text-muted: var(--text-primary);
    --text-on-inverse: #FFFFFF;
    --text-on-inverse-secondary: var(--text-on-inverse);

    /* ---- Borders ---- */
    --border-subtle: #E3EBEE;
    --border-strong: #CBD9DE;
    --border-inverse: rgba(255,255,255,0.12);

    /* ---- Radii ---- */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 9999px;
    --radius-btn: 30px;

    /* ---- Elevation ---- */
    --shadow-1: 0 1px 2px rgba(5,26,36,0.04), 0 2px 8px rgba(5,26,36,0.05);
    --shadow-2: 0 2px 4px rgba(5,26,36,0.05), 0 8px 24px rgba(5,26,36,0.08);
    --shadow-3: 0 4px 8px rgba(5,26,36,0.06), 0 16px 40px rgba(5,26,36,0.12);

    /* ---- Legacy aliases: existing rules resolve through these ---- */
    --paper: var(--surface-base);
    --white: var(--surface-raised);
    --ink-900: var(--surface-inverse);
    --ink-800: var(--text-primary);
    --ink-600: var(--text-secondary);
    --slate-500: var(--text-secondary);
    --slate-400: var(--text-muted);
    --mist-200: var(--border-subtle);
    --mist-100: var(--surface-sunken);
    --cobalt-600: #16323E;
    --cobalt-500: var(--text-primary);
    --cobalt-100: var(--accent-100);
    --slate-300: var(--text-on-inverse-secondary);
    --footer-line: var(--border-subtle);
    --footer-link: var(--text-secondary);
    --btn-shadow:
      0 1px 2px 0 rgba(5,26,36,0.10),
      0 4px 4px 0 rgba(5,26,36,0.09),
      0 9px 6px 0 rgba(5,26,36,0.05),
      0 17px 7px 0 rgba(5,26,36,0.01),
      0 26px 7px 0 rgba(5,26,36,0),
      inset 0 2px 8px 0 rgba(255,255,255,0.5);
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }
  section[id] { scroll-margin-top: 88px; }

  body {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    background: var(--paper);
    color: var(--ink-800);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  img { max-width: 100%; display: block; }
  button { font-family: inherit; }
  a { text-decoration: none; color: inherit; }

  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--cobalt-500);
    outline-offset: 2px;
  }

  /* ---------- Nav ---------- */
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--mist-200);
    box-shadow: 0 4px 16px rgba(5,26,36,0.06);
    transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  }
  /* Transparent-on-load / solid-on-scroll nav feature — temporarily disabled, nav is solid by default via the rule above.
     To re-enable: replace the background/border-bottom/box-shadow lines above with `border-bottom: 1px solid transparent;`,
     then uncomment the block below and the matching JS block in the nav scroll script.
  .nav::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.32) 50%, rgba(255,255,255,0) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    transition: opacity 200ms ease;
  }
  .nav.is-scrolled {
    background: var(--paper);
    border-bottom-color: var(--mist-200);
    box-shadow: 0 4px 16px rgba(5,26,36,0.06);
  }
  .nav.is-scrolled::before {
    opacity: 0;
  }
  */

  .nav-inner {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: padding 200ms ease;
  }
  .nav.is-scrolled .nav-inner { padding: 12px 20px; }

  .nav-logo { height: 32px; width: auto; transition: height 200ms ease; }
  .nav.is-scrolled .nav-logo { height: 28px; }
  /* Landing page only - 2x the standard nav logo size. */
  .nav-logo.nav-logo--lg { height: 64px; }
  .nav.is-scrolled .nav-logo.nav-logo--lg { height: 56px; }

  .nav-links { display: none; align-items: center; gap: 4px; }
  .nav-links a {
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    color: var(--ink-800);
    transition: color 200ms ease, text-shadow 200ms ease, font-size 200ms ease;
  }
  .nav-links a:hover { color: var(--cobalt-600); }
  .nav.is-scrolled .nav-links a { font-weight: var(--fw-medium); font-size: var(--fs-xs); }

  /* ---------- Nav dropdowns (desktop) ---------- */
  .nav-item { position: relative; }
  .nav-link {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    border-radius: var(--radius-btn);
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    color: var(--ink-800);
    cursor: pointer;
    padding: 10px 16px;
    transition: color 200ms ease, background 200ms ease, font-size 200ms ease, padding 200ms ease;
  }
  .nav.is-scrolled .nav-link { font-weight: var(--fw-medium); font-size: var(--fs-xs); padding: 8px 14px; }
  .nav-link:hover, .nav-item.is-open .nav-link {
    color: var(--accent-600);
    background: rgba(5,26,36,0.06);
  }
  .nav-link-chevron { flex-shrink: 0; transition: transform 200ms ease; }
  .nav-item.is-open .nav-link-chevron { transform: rotate(180deg); }

  /* Full-width mega-menu: the panel itself spans the entire viewport
     width directly under the nav bar (position:fixed, not tied to the
     triggering .nav-item), while its content stays aligned to the same
     max-width container the nav links sit in. top is the nav's own
     measured height (fixed elements can't resolve % against an
     ancestor, only the viewport, so this has to be a real pixel value) -
     it has to track the nav's own scroll-shrink state below or a gap/
     overlap opens up between the nav and the panel. */
  .nav-dropdown {
    position: fixed;
    top: 77px;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--white);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-3);
    padding: 32px var(--section-px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms, top 200ms ease;
    z-index: 30;
  }
  .nav.is-scrolled .nav-dropdown { top: 64px; }
  .nav-dropdown-inner { display: flex; flex-direction: column; width: 100%; max-width: var(--container); }
  .nav-dropdown-row { display: flex; gap: 36px; width: 100%; max-width: var(--container); }
  .nav-item.is-open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .nav-dropdown-col { flex: 1 1 0; }
  .nav-dropdown-col-heading {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-3xs);
    color: var(--text-muted);
    margin-bottom: 12px;
  }
  .nav-dropdown-link {
    display: block;
    padding: 8px 10px;
    margin: 0 -10px;
    border-radius: 10px;
    transition: background 150ms ease;
  }
  .nav-dropdown-link:hover { background: var(--surface-sunken); }
  .nav-dropdown-link-title {
    display: block;
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-xs);
    color: var(--ink-800);
  }
  .nav-dropdown-link:hover .nav-dropdown-link-title { color: var(--cobalt-600); }
  .nav-dropdown-link-desc {
    display: block;
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-3xs);
    color: var(--slate-500);
    margin-top: 2px;
  }
  .nav-dropdown-grid { flex: 2 1 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px; align-content: start; }
  .nav-dropdown-link--icon { display: flex; align-items: center; gap: 12px; }
  .nav-dropdown-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: var(--accent-100);
    color: var(--accent-600);
  }
  .nav-dropdown-link-icon svg { width: 18px; height: 18px; }
  .nav-dropdown-promo {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    min-height: 200px;
    padding: 22px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-500) 55%, var(--accent-400) 100%);
    color: var(--text-on-inverse);
  }
  .nav-dropdown-promo-heading {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    line-height: 1.25;
  }
  .nav-dropdown-promo-text {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-2xs);
    line-height: 1.5;
    color: var(--text-on-inverse-secondary);
  }
  .nav-dropdown-promo-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-2xs);
    color: var(--text-on-inverse);
  }
  .nav-dropdown-promo-link:hover { text-decoration: underline; }
  .nav-dropdown-foot {
    display: block;
    width: 100%;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-3xs);
    color: var(--cobalt-600);
  }
  .nav-dropdown-foot:hover { color: var(--cobalt-500); }

  /* ---- Services mega-menu: category tabs on the left, sub-items on
     the right - hover/focus a category to switch the right panel. ---- */
  .nav-dropdown-tablist { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; }
  .nav-dropdown-tab {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 150ms ease;
  }
  .nav-dropdown-tab:hover, .nav-dropdown-tab.is-active { background: var(--surface-sunken); }
  .nav-dropdown-tab-title {
    display: block;
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-xs);
    color: var(--ink-800);
  }
  .nav-dropdown-tab.is-active .nav-dropdown-tab-title { color: var(--cobalt-600); }
  .nav-dropdown-tab-desc {
    display: block;
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-3xs);
    line-height: 1.4;
    color: var(--slate-500);
    margin-top: 2px;
  }
  .nav-dropdown-tab--expand { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -12px; }
  .nav-dropdown-tab-chevron { flex-shrink: 0; color: var(--slate-500); transition: color 150ms ease; }
  .nav-dropdown-tab--expand:hover .nav-dropdown-tab-chevron,
  .nav-dropdown-tab--expand.is-active .nav-dropdown-tab-chevron { color: var(--cobalt-600); }
  .nav-dropdown-tabpanels { flex: 1 1 0; }
  .nav-dropdown-tabpanel { display: none; flex-direction: column; }
  .nav-dropdown-tabpanel.is-active { display: flex; }

  .nav-cta {
    background: var(--accent-500);
    color: var(--white);
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    border: none;
    border-radius: var(--radius-btn);
    padding: 12px 22px;
    cursor: pointer;
    transition: background 150ms ease, box-shadow 200ms ease, transform 150ms ease, padding 200ms ease, font-size 200ms ease;
    white-space: nowrap;
  }
  .nav.is-scrolled .nav-cta { font-weight: var(--fw-medium); font-size: var(--fs-xs); padding: 10px 20px; }
  .nav-cta:hover, .nav-cta:active {
    background: var(--accent-600);
    box-shadow: 0 6px 16px rgba(5,26,36,0.25);
    transform: translateY(-2px);
  }

  .nav-desktop-cta { display: none; }

  .nav-hamburger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid var(--mist-200);
    border-radius: 50%;
    cursor: pointer;
  }
  .nav-hamburger span {
    width: 18px;
    height: 1.5px;
    background: var(--ink-800);
    display: block;
  }

  .nav-mobile-panel {
    position: relative;
    z-index: 1;
    display: none;
    flex-direction: column;
    gap: 16px;
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--mist-200);
    padding: 16px 20px;
  }
  .nav-mobile-panel.is-open { display: flex; }
  .nav-mobile-panel a {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-body);
    color: var(--ink-800);
  }
  .nav-mobile-cta { width: 100%; text-align: center; }

  .nav-mobile-item { border-bottom: 1px solid var(--mist-200); }
  .nav-mobile-item:last-of-type { border-bottom: none; }
  .nav-mobile-link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    padding: 12px 0;
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-body);
    color: var(--ink-800);
    cursor: pointer;
  }
  .nav-mobile-chevron { flex-shrink: 0; transition: transform 200ms ease; }
  .nav-mobile-item.is-open .nav-mobile-chevron { transform: rotate(180deg); }
  .nav-mobile-submenu { max-height: 0; overflow: hidden; transition: max-height 250ms ease; }
  .nav-mobile-submenu-inner { padding: 2px 0 16px; display: flex; flex-direction: column; gap: 14px; }
  .nav-mobile-submenu-inner a { display: block; }
  .nav-mobile-sublink-title {
    display: block;
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-2xs);
    color: var(--ink-800);
  }
  .nav-mobile-sublink-desc {
    display: block;
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-3xs);
    color: var(--slate-500);
    margin-top: 2px;
  }
  .nav-mobile-sublink-title:hover { color: var(--cobalt-600); }

  /* Six links plus a logo and CTA do not fit until ~1024px; below that the
     desktop CTA was rendering off the right edge of the viewport. */
  @media (min-width: 1024px) {
    .nav-logo { height: 40px; }
    .nav.is-scrolled .nav-logo { height: 36px; }
    .nav-logo.nav-logo--lg { height: 80px; }
    .nav.is-scrolled .nav-logo.nav-logo--lg { height: 72px; }
    .nav-links { display: flex; }
    .nav-desktop-cta { display: inline-block; }
    .nav-hamburger { display: none; }
    .nav-mobile-panel { display: none !important; }
  }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    min-height: 760px;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 96px 20px 40px;
  }
  @media (min-width: 640px) { .hero { min-height: 620px; padding: 96px 32px 48px; } }
  @media (min-width: 1024px) { .hero { min-height: 680px; padding: 96px 48px 56px; } }

  .hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(1.15) contrast(0.8) saturate(0.75) sepia(0.05);
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    background: color-mix(in srgb, var(--surface-inverse) 80%, transparent);
  }

  .hero-inner {
    max-width: var(--container);
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .hero-eyebrow {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-800);
    filter: blur(3px);
    opacity: 0;
    animation: eyebrowFade 500ms ease-out 100ms forwards;
  }
  @keyframes eyebrowFade { to { opacity: 1; } }

  .hero-badges-grid {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    width: 100%;
    opacity: 0;
    animation: badgeRowFade 500ms ease-out 100ms forwards;
  }
  @media (max-width: 639px) {
    .hero-badges-grid { justify-content: center; }
  }
  @keyframes badgeRowFade {
    from { opacity: 0; filter: blur(3px); }
    to { opacity: 1; filter: blur(0); }
  }
  .hero-badge-img { height: 96px; width: auto; object-fit: contain; display: block; }

  .hero-headline {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h1);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text-on-inverse);
    min-height: 2.4em;
    margin-top: 16px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-headline-accent { color: var(--accent-400); }
  .blink-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--text-on-inverse);
    vertical-align: middle;
    margin-left: 2px;
    animation: blink 1s step-end infinite;
  }
  @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

  .hero-subhead {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: var(--text-on-inverse);
    max-width: 480px;
    margin: 20px auto 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 400ms ease, transform 400ms ease;
  }
  .hero-subhead.is-visible { opacity: 1; transform: translateY(0); }

  .hero-bottom-row {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  @media (min-width: 1024px) {
    .hero-bottom-row {
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 32px;
    }
  }

  .hero-cta-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: 16px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 400ms ease, transform 400ms ease;
  }
  @media (min-width: 640px) { .hero-cta-row { flex-direction: row; } }
  .hero-cta-row.is-visible { opacity: 1; transform: translateY(0); }

  .hero-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    white-space: nowrap;
    background: var(--accent-500);
    color: var(--white);
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    border: none;
    border-radius: var(--radius-btn);
    padding: 14px 28px;
    cursor: pointer;
    transition: background 150ms ease, box-shadow 200ms ease, transform 150ms ease;
  }
  .hero-cta-primary:hover, .hero-cta-primary:active {
    background: var(--accent-600);
    box-shadow: 0 6px 16px rgba(5,26,36,0.25);
    transform: translateY(-2px);
  }

  .hero-cta-secondary {
    flex-shrink: 0;
    white-space: nowrap;
    background: var(--surface-sunken);
    color: var(--ink-800);
    border: none;
    border-radius: var(--radius-btn);
    padding: 13px 27px;
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    cursor: pointer;
    box-shadow: 0 0 0 0.5px rgba(5,26,36,0.05), 0 4px 16px rgba(5,26,36,0.08);
    transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 150ms ease;
  }
  .hero-cta-secondary:hover, .hero-cta-secondary:active {
    background: var(--ink-800);
    color: var(--white);
    box-shadow: 0 6px 16px rgba(5,26,36,0.2);
    transform: translateY(-2px);
  }

  /* ---------- Metrics ---------- */
  .metrics {
    padding: var(--space-12) var(--section-px);
  }

  .metrics-inner {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  @media (min-width: 768px) { .metrics-inner { grid-template-columns: repeat(5, 1fr); } }

  .metric-card {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
  }
  .metric-card.is-visible { opacity: 1; transform: translateY(0); }

  .metric-eyebrow {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-3xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate-400);
    margin-bottom: 8px;
  }

  .metric-value {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h2);
    color: var(--ink-800);
  }
  .metric-value-accent { color: var(--cobalt-500); }

  /* ---------- Global Delivery Map ---------- */
  .global-delivery {
    padding: var(--section-py) var(--section-px);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
  }
  .global-delivery.is-visible { opacity: 1; transform: translateY(0); }

  .global-delivery-heading {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h3);
    color: var(--ink-800);
    margin-bottom: 12px;
  }
  .global-delivery-subhead {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--slate-500);
    max-width: 480px;
    margin-bottom: 40px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .dotted-map-wrap { overflow-x: auto; overflow-y: hidden; }
  .dotted-map { width: 100%; min-width: 600px; height: auto; display: block; }
  .map-world { fill: var(--slate-400); }
  .map-marker-ring { fill: var(--white); stroke: var(--cobalt-500); stroke-width: 2.5; }
  .map-marker-flag { font-size: 20px; text-anchor: middle; dominant-baseline: central; }
  .map-marker-pill {
    fill: var(--mist-100);
    opacity: 0;
    transition: opacity 180ms ease;
    pointer-events: none;
  }
  .map-marker-label {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-xs);
    fill: var(--ink-600);
    text-anchor: middle;
    dominant-baseline: central;
    opacity: 0;
    transition: opacity 180ms ease;
    pointer-events: none;
  }
  .map-marker:hover .map-marker-pill,
  .map-marker:hover .map-marker-label,
  .map-marker:focus-visible .map-marker-pill,
  .map-marker:focus-visible .map-marker-label {
    opacity: 1;
  }
  .map-marker-ring, .map-marker-flag { cursor: pointer; }

  /* ---------- Differentiator: Us vs Legacy SI ---------- */
  .differentiator-heading {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h3);
    color: var(--ink-800);
    margin-bottom: 12px;
  }
  .differentiator-subhead {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-md);
    color: var(--slate-500);
    max-width: 560px;
    margin: 0 auto 40px;
    text-align: center;
  }
  .differentiator-table {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-2);
    background: var(--white);
  }
  .differentiator-row {
    display: grid;
    grid-template-columns: 1fr;
    border-bottom: 1px solid var(--border-subtle);
  }
  .differentiator-row:last-child { border-bottom: none; }
  .differentiator-row-head { display: none; }
  @media (min-width: 768px) {
    .differentiator-row { grid-template-columns: 1.1fr 1fr 1fr; }
    .differentiator-row-head { display: grid; background: var(--surface-sunken); }
  }
  .differentiator-cell {
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    color: var(--ink-800);
  }
  .differentiator-row-head .differentiator-cell {
    font-weight: var(--fw-medium);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    padding: 14px 24px;
  }
  .differentiator-cell-label { font-weight: var(--fw-semibold); }
  .differentiator-cell-legacy { color: var(--slate-500); }
  .differentiator-cell-us { font-weight: var(--fw-medium); }
  .differentiator-icon { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 3.5; }
  .differentiator-cell-legacy .differentiator-icon { color: #DC2626; }
  .differentiator-cell-us .differentiator-icon { color: #16A34A; }
  .differentiator-tag {
    display: inline-block;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-3xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-right: 4px;
  }
  @media (min-width: 768px) { .differentiator-tag { display: none; } }
  .differentiator-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 32px auto 0;
    padding: 12px 22px;
    border-radius: var(--radius-lg);
    background: var(--accent-500);
    color: var(--white);
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-xs);
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms ease, box-shadow 200ms ease, transform 150ms ease;
  }
  .differentiator-cta:hover {
    background: var(--accent-600);
    box-shadow: 0 6px 16px rgba(5,26,36,0.2);
    transform: translateY(-2px);
  }

  /* ---------- Shared section utilities ---------- */
  .section-container { max-width: var(--container); margin: 0 auto; }
  .section-padded { padding: var(--section-py) var(--section-px); }

  /* ============================================================
     SURFACE SYSTEM
     Three roles only. Sections are assigned a role below, which
     produces the page's light / dark rhythm. Hairline rules are
     used only where two same-coloured surfaces meet.
     ============================================================ */

  /* -- Sunken: tinted, recedes -- */
  .services, .faq,
  .logo-wall, .partners, .industries, .global-delivery, .differentiator {
    position: relative;
    background:
      radial-gradient(115% 75% at 12% 0%, rgba(22,104,240,0.08) 0%, rgba(22,104,240,0) 58%),
      var(--surface-sunken);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
  }

  /* Proof-story and Metrics form one continuous band - no seam between them */
  .proof-story { border-bottom: none; }
  .metrics { border-top: none; }

  /* -- Inverse: the feature moments -- */
  .pain-band, .ai-automation, .final-cta-band,
  .proof-story, .metrics, .testimonials, .insights {
    position: relative;
    background:
      radial-gradient(85% 65% at 88% 2%,  rgba(74,141,255,0.20) 0%, rgba(74,141,255,0) 60%),
      radial-gradient(70% 60% at 4% 100%, rgba(22,104,240,0.16) 0%, rgba(22,104,240,0) 58%),
      var(--surface-inverse);
    color: var(--text-on-inverse);
  }

  /* ---------- Shared section heading rhythm ---------- */
  .section-title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-snug);
  }
  .section-lede {
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
    max-width: 62ch;
  }
  .pain-band .section-lede,
  .ai-automation .section-lede,
  .final-cta-band .section-lede { color: var(--text-on-inverse-secondary); }

  .text-reveal-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 800ms ease-out, transform 800ms ease-out;
  }
  .text-reveal-word.is-visible { opacity: 1; transform: translateY(0); }

  .cta-pulsate { position: relative; }
  .cta-pulsate::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(5, 26, 36, 0.45);
    animation: ctaPulse 2s ease-out infinite;
    pointer-events: none;
  }
  @keyframes ctaPulse {
    0% { box-shadow: 0 0 0 0 rgba(5, 26, 36, 0.45); }
    70% { box-shadow: 0 0 0 14px rgba(5, 26, 36, 0); }
    100% { box-shadow: 0 0 0 0 rgba(5, 26, 36, 0); }
  }

  /* ---------- Client Logo Wall ---------- */
  .logo-wall {
    padding: var(--space-20) var(--section-px);
    overflow: hidden;
  }

  .logo-wall-heading {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h2);
    color: var(--ink-800);
    text-align: center;
    margin-bottom: 40px;
  }

  .logo-wall-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  @media (min-width: 768px) { .logo-wall-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .logo-wall-grid { grid-template-columns: repeat(3, 1fr); } }

  .logo-col {
    height: 360px;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
  }

  .logo-col-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
  }
  .logo-col:hover .logo-col-track { animation-play-state: paused; }

  .logo-col-1 .logo-col-track { animation: scrollUp 44s linear infinite; }
  .logo-col-2 .logo-col-track { animation: scrollDown 56s linear infinite; }
  .logo-col-3 .logo-col-track { animation: scrollUp 50s linear infinite; }

  @keyframes scrollUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
  @keyframes scrollDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }

  .logo-col img {
    height: 64px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
    filter: grayscale(0%) opacity(1);
    transition: filter 300ms ease;
  }
  .logo-col img:hover { filter: grayscale(100%) opacity(0.6); }

  /* ---------- Services Framework ---------- */
  .services { position: relative; }

  .services-heading {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h2);
    color: var(--ink-800);
    margin-bottom: 8px;
  }
  .services-subhead {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-body);
    color: var(--slate-500);
    margin-bottom: 48px;
    text-align: center;
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* ============================================================
     METHOD CARDS - horizontal accordion
     One panel expanded at a time. Desktop: hover to switch, click
     or Enter/Space also expand (so touch and keyboard reach every
     phase, which plain :hover could not do). Mobile: no accordion,
     all four panels render open and stacked.
     ============================================================ */
  .service-panels {
    display: flex;
    flex-direction: row;
    gap: 4px;
    background: var(--surface-inverse);
    /* Sized to the tallest real content (~444px, measured at the
       narrowest row-layout width, 900px) plus the panel's own 30px
       top/bottom padding and a small buffer - not an arbitrary round
       number. Shorter cards (fewer lines at wider widths) no longer
       get stretched to match. */
    height: 530px;
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .service-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(16px);
    transition: flex 450ms cubic-bezier(.2,.7,.3,1), opacity 500ms ease-out, transform 400ms cubic-bezier(.2,.7,.3,1);
  }
  .service-panel.is-visible { opacity: 1; transform: translateY(0); }

  /* Photography sits behind the copy as texture, not subject matter. */
  .service-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--panel-img);
    background-size: cover;
    background-position: center;
    opacity: 0.24;
    transition: opacity 400ms ease;
  }
  .service-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--surface-inverse) 82%, transparent) 0%,
      color-mix(in srgb, var(--surface-inverse) 92%, transparent) 60%,
      color-mix(in srgb, var(--surface-inverse) 97%, transparent) 100%);
  }
  .service-panel:not(.expanded):hover::before,
  .service-panel:not(.expanded):focus-visible::before { opacity: 0.34; }

  .service-panel[data-panel-index="0"] { --panel-img: url('https://images.unsplash.com/photo-1764690690771-b4522d66b433?fm=jpg&q=80&w=1200&auto=format&fit=crop'); }
  .service-panel[data-panel-index="1"] { --panel-img: url('https://images.unsplash.com/photo-1695668548342-c0c1ad479aee?fm=jpg&q=80&w=1200&auto=format&fit=crop'); }
  .service-panel[data-panel-index="2"] { --panel-img: url('https://images.unsplash.com/photo-1633265486064-086b219458ec?fm=jpg&q=80&w=1200&auto=format&fit=crop'); }
  .service-panel[data-panel-index="3"] { --panel-img: url('https://images.unsplash.com/photo-1767424412548-1a1ac7f4b9bc?fm=jpg&q=80&w=1200&auto=format&fit=crop'); }

  .service-panel.expanded {
    flex: 3.4;
    align-items: stretch;
    justify-content: flex-end;
    padding: 30px 36px;
    cursor: default;
  }

  /* ---- Collapsed: vertical rail ----
     Bumped well past --fs-xs: at 500px of card height there is no
     risk of the longest label ("04 · Activate") running out of
     room, so there is no reason for this to read as a caption. */
  .service-panel-collapsed-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: var(--fw-medium);
    font-size: calc(clamp(1.375rem, 1.9vw, 1.875rem) * var(--fs-ratio));
    letter-spacing: 0.01em;
    color: #FFFFFF;
    white-space: nowrap;
  }
  .service-panel.expanded .service-panel-collapsed-label { display: none; }

  /* ---- Expanded: full content stack ---- */
  .service-panel-content { display: none; flex-direction: column; height: 100%; }
  .service-panel.expanded .service-panel-content { display: flex; }

  /* Bigger and less faint - at 0.2 this was nearly invisible against
     the dark scrim, which is why it read as "no contrast." */
  .service-phase-num {
    position: absolute;
    top: 22px;
    right: 30px;
    font-weight: var(--fw-medium);
    font-size: calc(clamp(2.5rem, 4vw, 3.5rem) * var(--fs-ratio));
    line-height: 1;
    color: #FFFFFF;
    pointer-events: none;
    user-select: none;
  }

  .service-panel-title {
    font-weight: var(--fw-medium);
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    color: #FFFFFF;
    padding-right: 92px;
  }
  .service-panel-rule {
    width: 44px;
    height: 3px;
    background: var(--accent-400);
    margin: 12px 0 16px;
    flex-shrink: 0;
  }

  .service-panel-outcome {
    font-size: var(--fs-md);
    line-height: 1.5;
    color: #FFFFFF;
    max-width: 500px;
    margin-bottom: 20px;
  }

  .service-work-label {
    font-size: var(--fs-2xs);
    color: #FFFFFF;
    margin-bottom: 8px;
  }

  .service-panel-accelerators {
    /* No longer margin-bottom:auto. That forced "You walk away with"
       to the card's bottom edge, so shorter cards showed a large,
       unexplained gap between the last bullet and the deliverable
       line instead of the two sitting close together. */
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .service-panel-accelerators li {
    position: relative;
    padding-left: 18px;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: #FFFFFF;
    max-width: 480px;
  }
  .service-panel-accelerators li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-400);
  }

  .service-deliverable {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.14);
  }
  .service-deliverable-label {
    font-size: var(--fs-2xs);
    color: #FFFFFF;
    margin-bottom: 6px;
  }
  .service-deliverable-text {
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    line-height: 1.4;
    color: #FFFFFF;
  }


  @media (max-width: 899px) {
    .service-panels { flex-direction: column; height: auto; }
    .service-panel {
      flex: none;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-end;
      padding: 32px 26px;
      cursor: default;
    }
    .service-panel-collapsed-label { display: none; }
    .service-panel-content { display: flex; }
    .service-panel::before { opacity: 0.24 !important; }
  }

  /* ---------- AI & Automation ---------- */
  .ai-automation { position: relative; }

  .ai-heading {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h2);
    color: var(--ink-800);
    max-width: 640px;
    margin-bottom: 16px;
  }
  .ai-spotlight {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--ink-600);
    max-width: 620px;
    margin-bottom: 48px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .ai-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
  }
  @media (min-width: 1024px) { .ai-layout { grid-template-columns: 0.85fr 1.15fr; } }

  .step-list { display: flex; flex-direction: column; gap: 4px; }

  .step-item {
    padding: 18px 20px;
    cursor: pointer;
    border-radius: 16px;
    border: 1px solid transparent;
    transition: background 200ms ease, padding 250ms ease, border-color 250ms ease, border-radius 250ms ease, box-shadow 250ms ease;
  }
  .step-item:hover:not(.expanded) { background: var(--paper); }

  /* Numeral echoes the phase-numeral treatment already used on the
     methodology cards above this section, and matches the numeral
     drawn into each diagram on the right. */
  .step-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    transition: margin-bottom 250ms ease;
  }
  .step-num {
    flex-shrink: 0;
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    color: var(--accent-400);
  }

  .step-title {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: calc(var(--fs-body) * 1.3);
    color: var(--slate-500);
    transition: color 250ms ease;
  }

  .step-description, .progress-track { display: none; }

  .step-item.expanded {
    background: var(--white);
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 4px 16px rgba(5,26,36,0.08);
  }
  .step-item.expanded .step-head { margin-bottom: 10px; }
  .step-item.expanded .step-title { color: var(--ink-800); }
  .step-item.expanded .step-description {
    display: block;
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--ink-600);
    margin-bottom: 16px;
  }
  .step-item.expanded .progress-track { display: block; }

  .progress-track {
    height: 3px;
    width: 100%;
    background: var(--mist-200);
    border-radius: 9999px;
    overflow: hidden;
    margin-top: 4px;
  }
  .progress-fill {
    height: 100%;
    background: var(--cobalt-500);
    border-radius: 9999px;
    width: 0%;
  }

  .diagram-card {
    position: relative;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(5,26,36,0.08);
    aspect-ratio: 4/3;
    overflow: hidden;
  }
  .step-visual {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 400ms ease;
  }
  .step-visual.active { opacity: 1; }

  .diagram-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(7,20,26,0.28);
    pointer-events: none;
  }

  /* ---- Playback controls, overlaid on the diagram card ---- */
  .step-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(to top, rgba(7,24,32,0.6) 0%, rgba(7,24,32,0) 100%);
  }
  .step-pause-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.32);
    background: rgba(255,255,255,0.08);
    color: #FFFFFF;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
  }
  .step-pause-btn:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.5); }
  .step-pause-btn .icon-play { display: none; }
  .step-pause-btn.is-paused .icon-pause { display: none; }
  .step-pause-btn.is-paused .icon-play { display: block; }

  .step-dots { display: flex; align-items: center; gap: 8px; }
  .step-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.32);
    cursor: pointer;
    transition: background 200ms ease, transform 200ms ease;
  }
  .step-dot:hover { background: rgba(255,255,255,0.55); }
  .step-dot.active { background: var(--accent-400); transform: scale(1.3); }


  /* ---------- Flagship Proof Story ---------- */
  .proof-story {
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
  }
  .proof-story.is-visible { opacity: 1; transform: translateY(0); }

  .proof-story-heading {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h2);
    color: var(--ink-800);
    margin-bottom: 12px;
  }
  .proof-story-lede {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-md);
    color: var(--slate-500);
    max-width: 560px;
    margin-bottom: 40px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .proof-story-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
  }
  @media (min-width: 1024px) {
    .proof-story-inner { grid-template-columns: 0.6fr 1.4fr; }
  }

  /* ---- Carousel: one .proof-slide active at a time ---- */
  .proof-slide { display: none; }
  .proof-slide.active { display: block; }

  .proof-tag {
    display: inline-block;
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: calc(var(--fs-sm) * 2);
    color: var(--accent-600);
    background: var(--accent-100);
    padding: 16px 36px;
    border-radius: var(--radius-pill);
    margin-bottom: 20px;
  }

  .proof-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
  }
  .proof-pause-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface-base);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
  }
  .proof-pause-btn:hover { background: var(--surface-sunken); border-color: var(--text-muted); }
  .proof-pause-btn .icon-play { display: none; }
  .proof-pause-btn.is-paused .icon-pause { display: none; }
  .proof-pause-btn.is-paused .icon-play { display: block; }

  .proof-dots { display: flex; align-items: center; gap: 8px; }
  .proof-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--border-strong);
    cursor: pointer;
    transition: background 200ms ease, transform 200ms ease;
  }
  .proof-dot:hover { background: var(--text-muted); }
  .proof-dot.active { background: var(--accent-500); transform: scale(1.3); }

  .proof-number {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-display);
    color: var(--cobalt-500);
    line-height: 1;
    margin-top: 16px;
  }
  .proof-caption {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    color: var(--slate-500);
    margin-top: 8px;
  }

  .proof-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(5,26,36,0.08);
    overflow: hidden;
  }
  @media (min-width: 640px) {
    .proof-card { flex-direction: row; }
  }
  .proof-card-media {
    position: relative;
    flex: 0 0 240px;
    min-height: 200px;
    background-image: var(--proof-img);
    background-size: cover;
    background-position: center;
  }
  .proof-card[data-industry="insurance"] { --proof-img: url('assets/industries/insurance.png'); }
  .proof-card[data-industry="retail-cpg"] { --proof-img: url('assets/industries/retail-cpg.png'); }
  .proof-card[data-industry="healthcare"] { --proof-img: url('assets/industries/healthcare.png'); }
  .proof-card[data-industry="manufacturing"] { --proof-img: url('assets/industries/manufacturing.png'); }
  .proof-card[data-industry="financial-services"] { --proof-img: url('assets/industries/financial-services.png'); }

  .proof-card-body {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 36px 40px;
  }
  .proof-quote {
    position: relative;
    z-index: 1;
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--ink-800);
  }
  .proof-quote-highlight {
    font-weight: var(--fw-semibold);
    color: var(--accent-600);
  }
  .proof-cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 12px 22px;
    border-radius: var(--radius-lg);
    background: var(--accent-500);
    color: var(--white);
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-xs);
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms ease, box-shadow 200ms ease, transform 150ms ease;
  }
  .proof-cta:hover {
    background: var(--accent-600);
    box-shadow: 0 6px 16px rgba(5,26,36,0.2);
    transform: translateY(-2px);
  }

  /* ---------- Pain-Led Narrative Band ---------- */
  .pain-band {
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 700ms ease-out, transform 700ms ease-out;
  }
  .pain-band.is-visible { opacity: 1; transform: scale(1); }

  .pain-eyebrow { color: var(--slate-300); }

  .pain-statement {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h3);
    line-height: 1.3;
    color: var(--paper);
    max-width: 900px;
    margin-bottom: 12px;
  }

  .pain-subhead {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--slate-300);
    max-width: 560px;
    margin: 0 auto 48px;
    text-align: center;
  }

  .pain-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 48px;
  }
  @media (min-width: 640px) { .pain-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
  @media (min-width: 1024px) { .pain-grid { grid-template-columns: repeat(4, 1fr); } }

  .pain-card {
    display: flex;
    flex-direction: column;
    padding: 28px 24px;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-lg);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms ease-out, transform 600ms ease-out, border-color 200ms ease, background 200ms ease;
  }
  .pain-band.is-visible .pain-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.22);
    transform: translateY(-4px);
  }
  .pain-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
    border-radius: var(--radius-sm);
    background: rgba(74,141,255,0.14);
    color: var(--accent-400);
  }
  .pain-card-icon svg { width: 20px; height: 20px; }
  .pain-band.is-visible .pain-card { opacity: 1; transform: translateY(0); }
  .pain-band.is-visible .pain-card:nth-child(1) { transition-delay: 120ms; }
  .pain-band.is-visible .pain-card:nth-child(2) { transition-delay: 220ms; }
  .pain-band.is-visible .pain-card:nth-child(3) { transition-delay: 320ms; }
  .pain-band.is-visible .pain-card:nth-child(4) { transition-delay: 420ms; }

  .pain-stat {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h2);
    line-height: 1;
    color: var(--accent-400);
    letter-spacing: -0.01em;
  }
  .pain-stat-rule {
    width: 32px;
    height: 2px;
    background: rgba(255,255,255,0.35);
    margin: 16px 0;
  }
  .pain-card-label {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--paper);
    margin-bottom: 12px;
  }
  .pain-card-desc {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--slate-300);
    margin-bottom: 20px;
  }
  .pain-card-source {
    margin-top: auto;
    font-family: var(--font-sans);
    font-style: italic;
    font-weight: var(--fw-regular);
    font-size: var(--fs-3xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--slate-300);
  }

  .pain-answer {
    position: relative;
    padding: 28px 32px 28px 68px;
    background: rgba(255,255,255,0.05);
    border-left: 2px solid var(--paper);
    border-radius: 4px 16px 16px 4px;
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--slate-300);
    max-width: 860px;
    margin: 0 auto;
  }
  .pain-answer::before {
    content: '\201C';
    position: absolute;
    top: 6px;
    left: 24px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 56px;
    line-height: 1;
    color: var(--accent-400);
    opacity: 0.6;
  }
  .pain-answer strong { font-weight: var(--fw-medium); color: var(--text-on-inverse); }

  @media (prefers-reduced-motion: reduce) {
    .pain-band, .pain-card { transition: none; }
    .pain-card { opacity: 1; transform: none; }
  }

  /* ---------- Industries ---------- */
  .industries { position: relative; }
  .industries-heading {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h2);
    color: var(--ink-800);
    margin-bottom: 40px;
  }
  .industries-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  @media (min-width: 640px) { .industries-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .industries-grid { grid-template-columns: repeat(3, 1fr); } }

  .industry-card {
    perspective: 1200px;
    height: 260px;
    opacity: 0;
    transform: translateY(16px);
    filter: drop-shadow(0 4px 16px rgba(5,26,36,0.08));
    transition: opacity 500ms ease-out, transform 200ms ease, filter 200ms ease;
  }
  .industry-card.is-visible { opacity: 1; transform: translateY(0); }

  .industry-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 600ms cubic-bezier(0.4,0,0.2,1), box-shadow 200ms ease;
    transform-style: preserve-3d;
  }
  .industry-card:hover .industry-card-inner { transform: rotateY(180deg); }
  .industry-card:hover { filter: drop-shadow(0 8px 24px rgba(5,26,36,0.14)); }

  .industry-card-front, .industry-card-back {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    backface-visibility: hidden;
    overflow: hidden;
  }

  .industry-card-front {
    background-color: var(--mist-100);
    background-image: linear-gradient(to top, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 25%, rgba(255,255,255,0) 55%), var(--industry-img);
    background-size: cover, cover;
    background-position: center, center 25%;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    padding: 24px;
  }
  .industry-card-name {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-lg);
    color: var(--ink-800);
  }

  .industry-card-back {
    background: var(--white);
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    transform: rotateY(180deg);
  }

  .industry-card[data-industry="healthcare"] { --industry-img: url('assets/industries/healthcare.png'); }
  .industry-card[data-industry="financial-services"] { --industry-img: url('assets/industries/financial-services.png'); }
  .industry-card[data-industry="insurance"] { --industry-img: url('assets/industries/insurance.png'); }
  .industry-card[data-industry="manufacturing"] { --industry-img: url('assets/industries/manufacturing.png'); }
  .industry-card[data-industry="retail-cpg"] { --industry-img: url('assets/industries/retail-cpg.png'); }
  .industry-card[data-industry="public-sector"] { --industry-img: url('assets/industries/public-sector.png'); }

  .industry-title {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-lg);
    color: var(--ink-800);
    margin-bottom: 10px;
  }
  .industry-desc {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-xs);
    line-height: 1.55;
    color: var(--slate-500);
  }
  .industry-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    margin-top: auto;
    padding: 10px 20px;
    border-radius: var(--radius-btn);
    background: var(--white);
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-2xs);
    color: var(--ink-800);
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms ease, box-shadow 200ms ease, transform 150ms ease;
  }
  .industry-link:hover {
    background: var(--surface-sunken);
    box-shadow: 0 6px 16px rgba(0,0,0,0.26);
    transform: translateY(-2px);
  }

  @media (hover: none), (pointer: coarse) {
    .industry-card { height: auto; }
    .industry-card-inner { transform: none !important; }
    .industry-card-front { display: none; }
    .industry-card-back { position: relative; transform: none; }
  }

  /* ---------- Testimonials ---------- */
  .testimonials { position: relative; }
  .testimonials-header { margin-bottom: 40px; }

  .testimonials-heading {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h2);
    color: var(--ink-800);
  }

  .testimonial-carousel {
    display: grid;
    max-width: 640px;
    margin: 0 auto;
  }
  .testimonial-slide {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 600ms ease, transform 600ms ease;
    pointer-events: none;
  }
  .testimonial-slide.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    z-index: 2;
  }
  .testimonial-slide.prev { transform: translateX(-40px); }

  .testimonial-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 32px;
  }
  .testimonial-pause-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface-base);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
  }
  .testimonial-pause-btn:hover { background: var(--surface-sunken); border-color: var(--text-muted); }
  .testimonial-pause-btn .icon-play { display: none; }
  .testimonial-pause-btn.is-paused .icon-pause { display: none; }
  .testimonial-pause-btn.is-paused .icon-play { display: block; }

  .testimonial-dots { display: flex; align-items: center; gap: 8px; }
  .testimonial-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--border-strong);
    cursor: pointer;
    transition: background 200ms ease, transform 200ms ease;
  }
  .testimonial-dot:hover { background: var(--text-muted); }
  .testimonial-dot.active { background: var(--accent-500); transform: scale(1.3); }

  .testimonial-mini-card {
    width: 100%;
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: 40px 44px;
    box-shadow: 0 4px 16px rgba(5,26,36,0.08);
    transition: box-shadow 200ms ease, transform 200ms ease;
  }
  .testimonial-mini-card:hover { box-shadow: 0 8px 24px rgba(5,26,36,0.14); transform: translateY(-2px); }
  .testimonial-mini-quote {
    position: relative;
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--ink-800);
  }
  .testimonial-mini-quote::before {
    content: '\201C';
    display: block;
    font-family: Georgia, serif;
    font-size: var(--fs-h2);
    line-height: 1;
    color: var(--slate-400);
    margin-bottom: 4px;
  }
  .testimonial-mini-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
  }
  .testimonial-mini-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--cobalt-100);
    color: var(--ink-800);
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .testimonial-mini-name {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-2xs);
    color: var(--ink-800);
  }
  .testimonial-mini-company {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-3xs);
    color: var(--slate-500);
  }
  .testimonial-mini-company::before { content: '\2192  '; }

  /* ---------- Partner Ecosystem ---------- */
  .partners { position: relative; }
  .partners-heading {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h2);
    color: var(--ink-800);
    margin-bottom: 40px;
  }
  .partners-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  @media (min-width: 640px) { .partners-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .partners-grid { grid-template-columns: repeat(5, 1fr); } }

  .partner-card {
    position: relative;
    overflow: hidden;
    height: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border-radius: 18px;
    padding: 18px;
    text-align: left;
    box-shadow: 0 4px 16px rgba(5,26,36,0.08);
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  .partner-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(5,26,36,0.14);
  }
  .partner-logo { width: 100%; height: 100%; object-fit: contain; display: block; }
  .partner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 18px;
    background: var(--white);
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
  }
  .partner-card:hover .partner-overlay { opacity: 1; }
  .partner-blurb {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-2xs);
    line-height: 1.5;
    color: var(--slate-500);
  }
  .partners-show-more {
    display: none;
    margin: 32px auto 0;
    background: var(--white);
    border: 1px solid var(--mist-200);
    border-radius: var(--radius-btn);
    padding: 12px 28px;
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-xs);
    color: var(--ink-800);
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 150ms ease;
  }
  .partners-show-more:hover, .partners-show-more:active {
    background: var(--ink-800);
    color: var(--white);
    border-color: var(--ink-800);
    box-shadow: 0 6px 16px rgba(5,26,36,0.2);
    transform: translateY(-2px);
  }
  /* "Show all partners" is disabled - all partner cards, including the
     third row, now show by default. Rules kept commented for an easy
     revert if the show-more behavior comes back.
  @media (min-width: 1024px) {
    .partner-card-extra { display: none; }
    .partners-grid.is-expanded .partner-card-extra { display: flex; }
    .partners-show-more { display: block; }
  }
  */

  /* ---------- FAQ ---------- */
  .faq { position: relative; }

  .faq-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  @media (min-width: 1024px) {
    .faq-inner { grid-template-columns: 320px 1fr; gap: 64px; }
  }

  .faq-heading {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h2);
    color: var(--ink-800);
  }
  .faq-item { border-bottom: 1px solid var(--mist-200); padding: 20px 0; }
  .faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    cursor: pointer;
  }
  .faq-question span {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-body);
    color: var(--ink-800);
  }
  .faq-chevron { width: 16px; height: 16px; flex-shrink: 0; transition: transform 250ms ease; }
  .faq-item.is-open .faq-chevron { transform: rotate(180deg); }
  .faq-answer { max-height: 0; overflow: hidden; transition: max-height 300ms ease; }
  .faq-item.is-open .faq-answer { padding-top: 12px; }
  .faq-answer p {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--slate-500);
  }

  /* ---------- Insights & News ---------- */
  .insights { position: relative; }
  .insights-heading {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h2);
    color: var(--ink-800);
    margin-bottom: 40px;
  }
  .insights-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  @media (min-width: 640px) { .insights-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) {
    .insights-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
    .insight-card-featured { grid-column: span 2; grid-row: span 2; }
    .insight-card-featured .insight-media { aspect-ratio: 16/9; }
    .insight-card-featured .insight-title { font-size: var(--fs-h4); }
    .insight-card-featured .insight-overlay { padding: 28px; }
    .insight-card-wide { grid-column: span 2; }
    .insight-card-wide .insight-media { aspect-ratio: 21/9; }
  }

  .insight-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    height: 100%;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(5,26,36,0.08);
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  .insight-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(5,26,36,0.14); }
  .insight-media {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 4/3;
  }
  .insight-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--mist-100);
    display: block;
  }
  .insight-thumb-placeholder { object-fit: contain; padding: 28px; }
  .insight-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    background: linear-gradient(to top, color-mix(in srgb, var(--surface-inverse) 92%, transparent) 0%, color-mix(in srgb, var(--surface-inverse) 60%, transparent) 55%, color-mix(in srgb, var(--surface-inverse) 0%, transparent) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .insight-tag {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-3xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--cobalt-500);
    padding: 3px 8px;
    margin-bottom: 10px;
    width: fit-content;
  }
  .insight-title {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-body);
    line-height: 1.3;
    color: var(--white);
  }
  .insight-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 20px;
    border-radius: var(--radius-btn);
    background: var(--white);
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-2xs);
    color: var(--ink-800);
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms ease, box-shadow 200ms ease, transform 150ms ease;
  }
  .insight-link:hover {
    background: var(--surface-sunken);
    box-shadow: 0 6px 16px rgba(0,0,0,0.26);
    transform: translateY(-2px);
  }

  .newsletter-band {
    margin-top: 48px;
    background: var(--white);
    border-radius: 24px;
    box-shadow: 0 4px 16px rgba(5,26,36,0.08);
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  @media (min-width: 640px) { .newsletter-band { flex-direction: row; } }
  .newsletter-copy {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-lg);
    color: var(--ink-800);
  }
  .newsletter-form { display: flex; gap: 10px; }
  .newsletter-input {
    border: 1px solid var(--mist-200);
    border-radius: 10px;
    padding: 12px 16px;
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-xs);
    min-width: 240px;
  }
  .newsletter-input:focus { border-color: var(--cobalt-500); outline: none; }
  .newsletter-submit {
    background: var(--accent-500);
    color: var(--white);
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-xs);
    border: none;
    border-radius: var(--radius-btn);
    padding: 12px 22px;
    cursor: pointer;
    transition: background 150ms ease, box-shadow 200ms ease, transform 150ms ease;
    white-space: nowrap;
  }
  .newsletter-submit:hover, .newsletter-submit:active {
    background: var(--accent-600);
    box-shadow: 0 6px 16px rgba(5,26,36,0.25);
    transform: translateY(-2px);
  }

  /* ---------- Final CTA Band ---------- */
  .final-cta-band {
    padding: var(--section-py) var(--section-px);
    text-align: center;
    position: relative;
    overflow: hidden;
    cursor: default;
  }
  .final-cta-eyebrow { margin-bottom: 16px; position: relative; z-index: 2; }
  .final-cta-heading {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h2);
    color: var(--ink-800);
    margin-bottom: 28px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
  }
  .final-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cobalt-500);
    color: var(--white);
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    border: none;
    border-radius: var(--radius-btn);
    padding: 14px 32px;
    cursor: pointer;
    transition: background 150ms ease, box-shadow 200ms ease, transform 150ms ease;
    position: relative;
    z-index: 2;
  }
  .final-cta-btn:hover {
    background: var(--cobalt-600);
    box-shadow: 0 6px 16px rgba(5,26,36,0.25);
    transform: translateY(-2px);
  }
  .final-cta-email {
    margin-top: 16px;
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-xs);
    color: var(--slate-500);
    position: relative;
    z-index: 2;
  }
  .cta-trail-fragment { position: absolute; z-index: 1; }

  /* ---------- Footer ---------- */
  .site-footer {
    background: var(--surface-sunken);
    color: var(--ink-800);
    padding: 64px 20px 32px;
  }
  .footer-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--footer-line);
  }
  @media (min-width: 768px) { .footer-top { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .footer-top { grid-template-columns: 1.1fr repeat(6, 1fr); gap: 20px; } }

  .footer-logo { height: 28px; margin-bottom: 16px; display: block; }
  /* Landing page only - 2x the standard footer logo size. */
  .footer-logo.footer-logo--lg { height: 56px; }
  .footer-tagline {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-xs);
    color: var(--slate-500);
    max-width: 240px;
  }
  .footer-newsletter { margin-top: 20px; display: flex; gap: 8px; }
  .footer-newsletter-input {
    background: var(--white);
    border: 1px solid var(--footer-line);
    border-radius: 10px;
    padding: 10px 14px;
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-2xs);
    color: var(--ink-800);
    min-width: 0;
    flex: 1;
  }
  /* Deliberately kept grey (not collapsed to black) - placeholder
     text needs to stay visually distinct from real typed input. */
  .footer-newsletter-input::placeholder { color: #5A7480; }
  .footer-newsletter-input:focus { border-color: var(--cobalt-500); outline: none; }
  .footer-newsletter-submit {
    background: var(--accent-500);
    color: var(--white);
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-2xs);
    border: none;
    border-radius: var(--radius-btn);
    padding: 10px 16px;
    cursor: pointer;
    transition: background 150ms ease, box-shadow 200ms ease, transform 150ms ease;
    white-space: nowrap;
  }
  .footer-newsletter-submit:hover, .footer-newsletter-submit:active {
    background: var(--accent-600);
    box-shadow: 0 6px 16px rgba(5,26,36,0.25);
    transform: translateY(-2px);
  }

  .footer-col-heading {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-3xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate-500);
    margin-bottom: 14px;
  }
  .footer-col a {
    display: block;
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-xs);
    color: var(--footer-link);
    line-height: 2.2;
    transition: opacity 150ms ease;
  }
  .footer-col a:hover { opacity: 0.7; }

  .footer-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 24px; }
  .footer-badge-img { height: 48px; width: auto; object-fit: contain; display: block; }

  .footer-bottom {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--footer-line);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  @media (min-width: 640px) { .footer-bottom { flex-direction: row; } }
  .footer-copyright {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-2xs);
    color: var(--slate-500);
  }
  .footer-bottom-links { display: flex; gap: 20px; align-items: center; }
  .footer-legal-link {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-2xs);
    color: var(--slate-500);
    transition: opacity 150ms ease;
  }
  .footer-legal-link:hover { opacity: 0.7; }
  .footer-social-link svg {
    width: 18px;
    height: 18px;
    fill: var(--slate-500);
    transition: fill 150ms ease;
    display: block;
  }
  .footer-social-link:hover svg { fill: var(--ink-800); }

  /* ============================================================
     REFINEMENT LAYER
     Loaded last so it wins on equal specificity. Everything here
     is standardisation: consistent headings, retired all-caps
     labels, accent application, and dark-section overrides.
     ============================================================ */

  /* ---- Heading normalisation ---- */
  .services-heading, .ai-heading, .industries-heading, .testimonials-heading,
  .partners-heading, .faq-heading, .insights-heading, .final-cta-heading,
  .global-delivery-heading, .pain-statement, .logo-wall-heading, .proof-story-heading,
  .differentiator-heading {
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-snug);
    text-wrap: balance;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-headline { text-wrap: balance; }

  /* ---- Retire the all-caps letterspaced label treatment ----
     .service-panel-collapsed-label is intentionally excluded: it owns
     its own font-size/letter-spacing at the primary rule (was never
     set to uppercase to begin with), and a stale font-size:var(--fs-xs)
     override used to live here that silently undid the larger rail
     type set further up the sheet. */
  .metric-eyebrow, .pain-card-label, .pain-card-source {
    text-transform: none;
    letter-spacing: var(--tracking-snug);
  }
  .metric-eyebrow {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
  }
  .pain-card-label { font-size: calc(var(--fs-body) * 1.3); }
  .pain-card-source { font-size: var(--fs-3xs); letter-spacing: 0; }

  /* ---- Accent application (the site had no accent before) ---- */
  .metric-value-accent { color: var(--accent-500); }
  .proof-number { color: var(--accent-500); }
  .pain-stat-rule { background: var(--accent-400); width: 40px; height: 3px; }
  .pain-answer { border-left-color: var(--accent-400); }
  .newsletter-input:focus, .footer-newsletter-input:focus { border-color: var(--accent-500); }
  a:focus-visible, button:focus-visible, input:focus-visible,
  textarea:focus-visible, select:focus-visible { outline-color: var(--accent-500); }

  /* ---- Card elevation standardised on the shadow scale ---- */
  .partner-card, .insight-card, .testimonial-mini-card, .proof-card,
  .newsletter-band, .diagram-card, .service-panels, .faq-item { box-shadow: var(--shadow-2); }
  .partner-card:hover, .insight-card:hover, .testimonial-mini-card:hover { box-shadow: var(--shadow-3); }

  /* ============================================================
     DARK SECTION: AI governance
     ============================================================ */
  .ai-automation .ai-heading { color: var(--text-on-inverse); }
  .ai-automation .ai-spotlight { color: var(--text-on-inverse-secondary); }
  .ai-automation .step-title { color: var(--text-on-inverse-secondary); }
  .ai-automation .step-item { border-color: transparent; }
  .ai-automation .step-item:hover:not(.expanded) { background: rgba(255,255,255,0.05); }
  .ai-automation .step-item.expanded {
    background: rgba(255,255,255,0.06);
    border-color: var(--border-inverse);
    box-shadow: none;
  }
  .ai-automation .step-item.expanded .step-title { color: var(--text-on-inverse); }
  .ai-automation .step-item.expanded .step-description { color: var(--text-on-inverse-secondary); }
  .ai-automation .progress-track { background: rgba(255,255,255,0.16); }
  .ai-automation .progress-fill { background: var(--accent-400); }
  .ai-automation .diagram-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-inverse);
    box-shadow: none;
  }

  /* ============================================================
     DARK SECTION: Proof + Metrics
     ============================================================ */
  .proof-story-heading { color: var(--text-on-inverse); }
  .proof-story-lede { color: var(--text-on-inverse-secondary); }
  .proof-number { color: var(--accent-400); }
  .proof-caption { color: var(--text-on-inverse-secondary); }
  .metric-eyebrow { color: var(--text-on-inverse-secondary); }
  .metric-value { color: var(--text-on-inverse); }
  .metric-value-accent { color: var(--accent-400); }
  .proof-pause-btn, .testimonial-pause-btn {
    border-color: rgba(255,255,255,0.32);
    background: rgba(255,255,255,0.08);
    color: #FFFFFF;
  }
  .proof-pause-btn:hover, .testimonial-pause-btn:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.5);
  }
  .proof-dot, .testimonial-dot { background: rgba(255,255,255,0.32); }
  .proof-dot:hover, .testimonial-dot:hover { background: rgba(255,255,255,0.55); }
  .proof-dot.active, .testimonial-dot.active { background: var(--accent-400); }

  /* White "card" elements floating on the now-dark sections need a
     stronger shadow and an explicit text-color reset so they don't
     inherit the section's white text. */
  .proof-card, .testimonial-mini-card, .newsletter-band {
    color: var(--text-primary);
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  }

  /* ============================================================
     DARK SECTION: Testimonials
     ============================================================ */
  .testimonials-heading { color: var(--text-on-inverse); }

  /* ============================================================
     LIGHT SECTIONS: dark-card treatment for internal divs
     Inspired by the methodology accordion's dark-scrim cards -
     Partners, Industries, and FAQ each get a dark navy "island"
     instead of a plain white box. Partner logos stay on their own
     white plate (unchanged) since many partner marks assume a
     light background; only the hover-reveal blurb goes dark.
     ============================================================ */
  .partner-overlay { background: var(--surface-inverse); }
  .partner-blurb { color: var(--text-on-inverse-secondary); }

  .industry-card-front {
    background-color: var(--surface-inverse);
    background-image: linear-gradient(to top, color-mix(in srgb, var(--surface-inverse) 95%, transparent) 0%, color-mix(in srgb, var(--surface-inverse) 82%, transparent) 25%, color-mix(in srgb, var(--surface-inverse) 0%, transparent) 55%), var(--industry-img);
  }
  .industry-card-name { color: #FFFFFF; }
  .industry-card-back { background: var(--surface-inverse); }
  .industry-title { color: var(--text-on-inverse); }
  .industry-desc { color: var(--text-on-inverse-secondary); }

  .faq-list { display: flex; flex-direction: column; gap: 12px; }
  .faq-item {
    background: var(--surface-inverse);
    border-radius: 16px;
    padding: 20px 24px;
    border-bottom: none;
  }
  .faq-question span { color: var(--text-on-inverse); }
  .faq-chevron path { stroke: rgba(255,255,255,0.65); }
  .faq-answer p { color: var(--text-on-inverse-secondary); }

  /* ============================================================
     DARK SECTION: Insights
     ============================================================ */
  .insights-heading { color: var(--text-on-inverse); }

  /* ============================================================
     DARK SECTION: final CTA
     ============================================================ */
  .final-cta-heading { color: var(--text-on-inverse); }
  .final-cta-email { color: var(--text-on-inverse-secondary); }
  .final-cta-btn {
    background: var(--surface-sunken);
    color: var(--text-primary);
  }
  .final-cta-btn:hover {
    background: var(--ink-800);
    color: var(--white);
    box-shadow: 0 6px 16px rgba(5,26,36,0.2);
    transform: translateY(-2px);
  }
  .final-cta-band .cta-pulsate::after {
    box-shadow: 0 0 0 0 rgba(255,255,255,0.5);
    animation: ctaPulseLight 2s ease-out infinite;
  }
  @keyframes ctaPulseLight {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
    70%  { box-shadow: 0 0 0 14px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  }

  /* ---- Sunken-section cards need a visible edge ---- */
  .services .service-panels,
  .testimonials .testimonial-mini-card { border-color: var(--border-strong); }
  .proof-card, .testimonial-mini-card { border: 1px solid var(--border-subtle); }

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

  /* ============================================================
     INTERIOR PAGE TEMPLATE
     Shared hero + section + list patterns for Service, Industry,
     and utility pages that live outside index.html. Reuses the
     same surface/type tokens as the homepage.
     ============================================================ */
  .page-hero {
    position: relative;
    padding: calc(var(--section-py) + 40px) var(--section-px) var(--section-py);
    text-align: center;
    background:
      radial-gradient(115% 75% at 12% 0%, rgba(22,104,240,0.16) 0%, rgba(22,104,240,0) 58%),
      var(--surface-sunken);
    border-bottom: 1px solid var(--border-subtle);
  }
  .page-breadcrumb {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-3xs);
    letter-spacing: 0.02em;
    color: var(--text-muted);
    margin-bottom: 16px;
  }
  .page-breadcrumb a { color: var(--text-muted); text-decoration: none; }
  .page-breadcrumb a:hover { color: var(--cobalt-600); text-decoration: underline; }
  .page-hero-heading {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h1);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-snug);
    color: var(--ink-800);
    max-width: 760px;
    margin: 0 auto 16px;
  }
  .page-hero-lede {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--slate-500);
    max-width: 600px;
    margin: 0 auto;
  }

  .page-section { padding: var(--section-py) var(--section-px); }
  .page-section-inner { max-width: 880px; margin: 0 auto; }
  .page-section--dark {
    position: relative;
    background:
      radial-gradient(85% 65% at 88% 2%,  rgba(74,141,255,0.20) 0%, rgba(74,141,255,0) 60%),
      radial-gradient(70% 60% at 4% 100%, rgba(22,104,240,0.16) 0%, rgba(22,104,240,0) 58%),
      var(--surface-inverse);
    color: var(--text-on-inverse);
  }
  .page-section-eyebrow {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-2xs);
    color: var(--accent-600);
    margin-bottom: 10px;
  }
  .page-section--dark .page-section-eyebrow { color: var(--accent-400); }
  .page-section-heading {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h2);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-snug);
    color: var(--ink-800);
    margin-bottom: 16px;
  }
  .page-section--dark .page-section-heading { color: var(--text-on-inverse); }
  .page-section-body {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--slate-500);
    max-width: 720px;
  }
  .page-section--dark .page-section-body { color: var(--text-on-inverse-secondary); }

  .page-list {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  @media (min-width: 640px) { .page-list { grid-template-columns: repeat(2, 1fr); } }
  .page-list li {
    position: relative;
    padding: 18px 20px 18px 44px;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    color: var(--ink-800);
  }
  .page-list li::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 22px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-500);
  }
  .page-section--dark .page-list li {
    background: rgba(255,255,255,0.06);
    color: var(--text-on-inverse);
    box-shadow: none;
    border: 1px solid var(--border-inverse);
  }
  .page-section--dark .page-list li::before { background: var(--accent-400); }

  .page-cta-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 28px;
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    color: var(--cobalt-500);
    text-decoration: none;
  }
  .page-cta-inline:hover { text-decoration: underline; }

  /* ---- Industry-page case study cards ---- */
  .industry-case-grid {
    margin: 32px 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  @media (min-width: 640px) { .industry-case-grid { grid-template-columns: repeat(2, 1fr); } }
  .industry-case-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    overflow: hidden;
    transition: box-shadow 200ms ease, transform 200ms ease;
  }
  .industry-case-card:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); }
  .industry-case-media { aspect-ratio: 16/9; background-size: cover; background-position: center; }
  .industry-case-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
  .industry-case-title {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    line-height: 1.35;
    margin: 0 0 10px;
  }
  .industry-case-title a { color: var(--ink-800); text-decoration: none; }
  .industry-case-card:hover .industry-case-title a,
  .industry-case-title a:focus-visible { color: var(--accent-600); text-decoration: underline; }
  .industry-case-summary {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--slate-500);
    margin: 0 0 4px;
    flex: 1;
  }
  .industry-case-empty {
    margin-top: 32px;
    padding: 32px;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    text-align: center;
  }
  .page-section--dark .industry-case-empty {
    background: rgba(255,255,255,0.06);
    color: var(--text-on-inverse);
    box-shadow: none;
    border: 1px solid var(--border-inverse);
  }
  .industry-case-empty p {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    margin: 0 0 16px;
  }

  .page-mock-note {
    display: inline-block;
    margin-top: 12px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--accent-100);
    color: var(--accent-600);
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-3xs);
  }

  /* ============================================================
     HERO CAROUSEL
     A real sliding carousel: tag + headline + CTA per slide, with
     arrow and dot navigation. Slide 0 keeps the existing typewriter
     headline effect untouched; later slides are plain markup.
     ============================================================ */
  /* Fixed per-breakpoint min-height so switching slides doesn't
     reflow the badge row underneath - sized to the taller of the
     two slides at each width (measured, not guessed). display:flow-root
     stops the headline's margin-top from collapsing through this box
     and silently adding extra height on top of the min-height. */
  .hero-carousel { position: relative; z-index: 2; width: 100%; text-align: center; display: flow-root; min-height: 428px; }
  @media (min-width: 640px) { .hero-carousel { min-height: 310px; } }
  @media (min-width: 1024px) { .hero-carousel { min-height: 336px; } }
  @media (min-width: 1280px) { .hero-carousel { min-height: 358px; } }
  .hero-carousel-track { position: absolute; inset: 0; overflow: hidden; }
  .hero-slide {
    position: absolute;
    inset: 0;
    transform: translateX(100%);
    transition: transform 550ms cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
  }
  .hero-slide.is-active { transform: translateX(0); pointer-events: auto; }
  @media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
  }

  .hero-slide-tag {
    display: inline-block;
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-2xs);
    color: #0D212C;
    background: var(--accent-400);
    padding: 5px 14px;
    border-radius: var(--radius-pill);
  }
  h2.hero-slide-headline {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h1);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text-on-inverse);
    margin-top: 16px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-slide-subhead {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: var(--text-on-inverse);
    max-width: 480px;
    margin: 20px auto 0;
  }

  .hero-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
  }
  /* Arrows sit at the true edges of the hero section (siblings of
     .hero-inner, not nested in the narrower text column) so they
     read as controls for the whole hero, not just the text block. */
  /* Small circular hit target on mobile/tablet, where there isn't
     reliable side margin around the centered text to expand into. */
  .hero-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.26);
    color: #FFFFFF;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 150ms ease, border-color 150ms ease;
  }
  .hero-carousel-arrow:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.45); }
  .hero-carousel-arrow-icon { display: flex; align-items: center; justify-content: center; }
  .hero-carousel-arrow-prev { left: 16px; }
  .hero-carousel-arrow-next { right: 16px; }
  @media (min-width: 640px) {
    .hero-carousel-arrow-prev { left: 28px; }
    .hero-carousel-arrow-next { right: 28px; }
  }

  /* From 1024px there's enough side margin around the centered text
     column to safely turn the whole edge into a click zone. The icon
     itself drops the circular pill and gets bigger and bolder, so it
     reads as a real chevron mark rather than a small button. */
  @media (min-width: 1024px) {
    .hero-carousel-arrow {
      top: 0;
      bottom: 0;
      transform: none;
      width: clamp(80px, 10vw, 180px);
      height: auto;
      border-radius: 0;
      background: none;
      border: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .hero-carousel-arrow-prev { left: 0; justify-content: flex-start; padding-left: 32px; }
    .hero-carousel-arrow-next { right: 0; justify-content: flex-end; padding-right: 32px; }
    .hero-carousel-arrow-icon {
      color: #FFFFFF;
      opacity: 0.7;
      filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45));
      transition: opacity 150ms ease, transform 150ms ease;
    }
    .hero-carousel-arrow-icon svg { width: 40px; height: 40px; }
    .hero-carousel-arrow-icon path { stroke-width: 1.5; }
    .hero-carousel-arrow:hover .hero-carousel-arrow-icon { opacity: 1; }
    .hero-carousel-arrow-prev:hover .hero-carousel-arrow-icon { transform: translateX(-4px); }
    .hero-carousel-arrow-next:hover .hero-carousel-arrow-icon { transform: translateX(4px); }
  }
  .hero-carousel-dots { display: flex; align-items: center; gap: 8px; }
  .hero-carousel-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    cursor: pointer;
    transition: background 200ms ease, transform 200ms ease;
  }
  .hero-carousel-dot:hover { background: rgba(255,255,255,0.6); }
  .hero-carousel-dot.is-active { background: #FFFFFF; transform: scale(1.3); }

  /* ============================================================
     CASE STUDIES PAGE
     ============================================================ */
  .case-studies-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  @media (min-width: 768px) { .case-studies-grid { grid-template-columns: repeat(2, 1fr); } }
  .case-study-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-2);
    display: flex;
    flex-direction: column;
  }
  .case-study-tag {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-3xs);
    color: var(--accent-600);
    background: var(--accent-100);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    margin-bottom: 12px;
  }
  .case-study-title {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-lg);
    line-height: 1.3;
    color: var(--ink-800);
    margin-bottom: 14px;
  }
  .case-study-label {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-3xs);
    letter-spacing: 0.02em;
    color: var(--text-muted);
    margin-top: 14px;
    margin-bottom: 4px;
  }
  .case-study-body {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-xs);
    line-height: 1.55;
    color: var(--slate-500);
  }
  .case-study-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
  }
  .case-study-tech span {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-3xs);
    background: var(--mist-100);
    color: var(--ink-800);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
  }
  .case-study-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 20px;
    padding: 12px 22px;
    border-radius: var(--radius-lg);
    background: var(--accent-500);
    color: var(--white);
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-xs);
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms ease, box-shadow 200ms ease, transform 150ms ease;
  }
  .case-study-link:hover {
    background: var(--accent-600);
    box-shadow: 0 6px 16px rgba(5,26,36,0.2);
    transform: translateY(-2px);
  }