:root{
      --brand:#0B1F41;
      --accent:#0ea5e9;
      --accent2:#22c55e;
      /* Text-safe variants. The two above are bright enough to read well as
         decoration but fail WCAG as text: white on --accent is 2.77:1 and
         --accent2 on white is 2.28:1, against a 4.5:1 requirement. These pass
         at 5.93:1 and 5.02:1 on white, and still clear 4.5:1 on the off-white
         page background. Use these wherever the colour is the text or sits
         behind text; keep the bright pair for borders, fills and tints. */
      --accent-ink:#0369a1;
      --accent2-ink:#15803d;
      --ink:#0f172a;
      --muted:#44546b;
      --card:#ffffff;
      --bg:#f6f8fc;
      --border:#e5e7eb;
      --shadow: 0 10px 30px rgba(2,8,23,.08);
      --shadow2: 0 8px 24px rgba(2,8,23,.10);
      --radius: 18px;
    }
    html{scroll-behavior:smooth}
    body{
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--ink);
      background: var(--bg);
    }

    /* Navbar */
    .navbar{
      background: rgba(255,255,255,.78);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(229,231,235,.7);
    }
    .navbar-brand{
      font-weight: 800;
      letter-spacing: .2px;
      color: var(--brand) !important;
    }
    .badge-soft{
      background: rgba(14,165,233,.16);
      color: #075985;
      border: 1px solid rgba(14,165,233,.40);
      font-weight: 700;
      letter-spacing: .01em;
    }

    /* Hero */
    .hero{
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(120deg, rgba(11,31,65,.90), rgba(14,165,233,.40)),
        url("https://images.unsplash.com/photo-1523961131990-5ea7c61b2107?auto=format&fit=crop&w=2400&q=70") center/cover no-repeat;
      color: #fff;
      border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .hero::after{
      content:"";
      position:absolute; inset:-40px;
      background:
        radial-gradient(800px 400px at 15% 25%, rgba(34,197,94,.25), transparent 65%),
        radial-gradient(900px 450px at 85% 30%, rgba(14,165,233,.30), transparent 60%);
      pointer-events:none;
    }
    .hero .container{ position: relative; z-index: 2; }
    .hero h1{ font-weight: 800; letter-spacing: -.02em; }
    .hero p{ color: rgba(255,255,255,.88); }

    .btn-accent{
      background: var(--accent-ink);
      border-color: var(--accent-ink);
      color:#fff;
      box-shadow: 0 10px 20px rgba(3,105,161,.28);
    }
    .btn-accent:hover{ filter: brightness(.95); }
    .btn-ghost{
      border: 1px solid rgba(255,255,255,.35);
      color: #fff;
      background: rgba(255,255,255,.08);
    }
    .btn-ghost:hover{ background: rgba(255,255,255,.14); }

    /* Sections */
    section{ padding: 80px 0; }
    .section-title{
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--brand);
    }
    .section-sub{
      color: var(--muted);
      max-width: 58ch;
    }

    /* Cards */
    .cardx{
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      height: 100%;
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .cardx:hover{
      transform: translateY(-4px);
      box-shadow: var(--shadow2);
    }
    .icon-pill{
      width: 46px; height: 46px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 14px;
      background: rgba(14,165,233,.12);
      border: 1px solid rgba(14,165,233,.18);
      color: #0369a1;
      font-size: 1.25rem;
    }
    .kpi{
      border-radius: var(--radius);
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.16);
    }
    .kpi .num{ font-weight: 800; font-size: 1.4rem; }
    .kpi .lbl{ color: rgba(255,255,255,.80); font-size: .92rem; }

    /* Feature list */
    .checklist li{
      margin-bottom: .5rem;
      color: var(--muted);
    }
    .checklist i{ color: var(--accent2-ink); }

    /* Process */
    .step{
      border-radius: var(--radius);
      background: #fff;
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      padding: 18px;
      height: 100%;
    }
    .step .n{
      width: 38px; height: 38px;
      border-radius: 12px;
      background: rgba(34,197,94,.12);
      border: 1px solid rgba(34,197,94,.18);
      color: #15803d;
      display: inline-flex;
      align-items:center;
      justify-content:center;
      font-weight: 800;
    }

    /* CTA band */
    .cta{
      background:
        radial-gradient(900px 400px at 15% 40%, rgba(14,165,233,.22), transparent 55%),
        radial-gradient(800px 400px at 85% 50%, rgba(34,197,94,.18), transparent 55%),
        linear-gradient(180deg, #ffffff, #f7fbff);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    /* Footer */
    footer{
      background: #07162f;
      color: rgba(255,255,255,.86);
    }
    footer a{ color: rgba(255,255,255,.86); }
    footer a:hover{ color: #fff; }
    .small-muted{ color: rgba(255,255,255,.66); }

    /* Forms */
    .form-control, .form-select{
      border-radius: 14px;
      border-color: var(--border);
      padding: .75rem .9rem;
    }

    /* Utilities */
    .text-muted2{ color: var(--muted) !important; }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.35rem .7rem;
      border-radius: 999px;
      background: #fff;
      border: 1px solid var(--border);
      color: var(--muted);
      font-size: .92rem;
      box-shadow: 0 6px 16px rgba(2,8,23,.06);
      margin: .25rem .35rem 0 0;
    }
    .chip i{ color: var(--accent-ink); }

    /* Modal tweaks */
    .modal-content{
      border-radius: 20px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow2);
    }

    /* Reduce motion */
    @media (prefers-reduced-motion: reduce) {
      html{scroll-behavior:auto}
      .cardx, .cardx:hover{ transition:none; transform:none; }
    }

	  /* Slider sizing */
.saac-slider .saac-slide-img{
  height: 300px;
  object-fit: cover;
}
@media (max-width: 992px){
  .saac-slider .saac-slide-img{ height: 260px; }
}

/* Caption style (readable on photos) */
.saac-caption{
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 14px 14px 14px;
  background: linear-gradient(180deg, transparent 0%, rgba(2,8,23,.72) 70%);
}
.saac-cap-title{
  font-weight: 800;
  font-size: 1.05rem;
}
.saac-cap-text{
  font-size: .92rem;
  opacity: .92;
}

/* Controls smaller + cleaner */
.saac-control{
  width: 12%;
  opacity: .85;
}
.saac-control:hover{ opacity: 1; }

/* Dots position */
.saac-dots{
  margin-bottom: .4rem;
}

/* Thumbnails */
.saac-thumbs .saac-thumb{
  width: 100%;
  border: 2px solid transparent;
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  background: #fff;
  transition: transform .15s ease, border-color .15s ease;
}
.saac-thumbs .saac-thumb img{
  width: 100%;
  height: 58px;
  object-fit: cover;
  display: block;
}
.saac-thumbs .saac-thumb:hover{
  transform: translateY(-2px);
}
.saac-thumbs .saac-thumb.active{
  border-color: var(--accent);
}

/* ============================================================
   Product pages, added in the 2026 relaunch
   ============================================================ */

/* Product page hero (shorter than the homepage hero, no photo) */
.phero{
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(900px 420px at 12% 20%, rgba(14,165,233,.35), transparent 60%),
    radial-gradient(800px 400px at 88% 30%, rgba(34,197,94,.22), transparent 58%),
    linear-gradient(120deg, #0B1F41, #14345f);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.phero h1{ font-weight: 800; letter-spacing: -.02em; }
.phero .lead{ color: rgba(255,255,255,.88); }
.phero .eyebrow{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  font-size: .9rem;
  font-weight: 600;
}

/* "Who it's for / not for" split */
.fit-list li{ margin-bottom: .55rem; }
.fit-yes i{ color: var(--accent2-ink); }
.fit-no  i{ color: #f59e0b; }

/* Feature grid on product pages */
.feature{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  height: 100%;
}
.feature h6{ font-weight: 700; color: var(--brand); }
.feature p{ color: var(--muted); margin-bottom: 0; font-size: .95rem; }

/* Proof band, real numbers only, hidden until populated */
.proof-num{
  font-weight: 800;
  font-size: 2rem;
  color: var(--brand);
  line-height: 1.1;
}
.proof-lbl{ color: var(--muted); font-size: .9rem; }

/* FAQ accordion */
.accordion-button{ font-weight: 600; color: var(--brand); }
.accordion-button:not(.collapsed){
  background: rgba(14,165,233,.07);
  color: var(--brand);
  box-shadow: none;
}
.accordion-button:focus{ box-shadow: 0 0 0 .2rem rgba(14,165,233,.2); }
.accordion-item{
  border: 1px solid var(--border);
  border-radius: 14px !important;
  margin-bottom: .75rem;
  overflow: hidden;
}

/* Breadcrumb */
.crumb a{ color: rgba(255,255,255,.75); text-decoration: none; }
.crumb a:hover{ color: #fff; }
.crumb{ color: rgba(255,255,255,.55); font-size: .9rem; }

/* Product card on the hub */
.pcard .pcard-proof{
  font-size: .85rem;
  color: var(--accent2-ink);
  font-weight: 600;
}
.pcard .pcard-links{ margin-top: auto; }

/* Hide anything the config has not filled in yet */
[data-saac-hide]{ display: none !important; }

/* Sticky mobile CTA on product pages */
.sticky-cta{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1030;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  padding: .6rem .9rem;
  box-shadow: 0 -6px 20px rgba(2,8,23,.08);
}
/* Superseded by the pair further down, which follow the navbar to the xl
   breakpoint. Kept as a note rather than left in place, because two rules
   disagreeing about the same element is how the sticky CTA silently vanished
   between 992 and 1199px. */

/* ---- Client marquee -------------------------------------------------------
   Continuous horizontal scroll of client names. The track holds two identical
   copies of the list and translates by -50%, so the loop is seamless.
   Pauses on hover and on focus, and falls back to a static wrapped row when
   the visitor has asked for reduced motion. */
.marquee{
  position: relative;
  overflow: hidden;
  padding: .25rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track{
  display: flex;
  width: max-content;
  gap: .6rem;
  animation: saac-marquee 32s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{ animation-play-state: paused; }

@keyframes saac-marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

.client-chip{
  white-space: nowrap;
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}
.client-chip i{ color: var(--accent2-ink); }

@media (prefers-reduced-motion: reduce){
  .marquee{ -webkit-mask-image: none; mask-image: none; }
  .marquee-track{
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  /* The duplicate copy is redundant without motion */
  .marquee-track > .client-chip.is-duplicate{ display: none; }
}

/* ---- Section intro that spans the full container --------------------------
   .section-sub caps the measure at 58ch, which left dead space on the right
   of the Products and Process headers. This opts a specific intro out. */
.section-sub-wide{ max-width: 100%; }

/* ---- Readability pass -----------------------------------------------------
   Body copy sat too light against the off-white background. The --muted token
   is now darker; these lift the remaining low-contrast spots to match. */
.text-muted2{ color: var(--muted) !important; }
.proof-lbl{ color: var(--muted); }
.feature p{ color: var(--muted); }
.small-muted{ color: rgba(255,255,255,.78); }
footer .small-muted a{ color: rgba(255,255,255,.90); }

/* Proof figure sits inline with its label, so the number and the words read
   as one line rather than stacking. */
.proof-num{ line-height: 1; }

/* ---- Leadership -----------------------------------------------------------
   Initial-based avatars, so the section needs no photography to look finished
   and nothing breaks if a photo is added later. */
.leader-avatar{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .02em;
  box-shadow: 0 8px 18px rgba(2,8,23,.18);
}
.leader-role{
  color: var(--accent-ink);
  font-weight: 700;
  font-size: .92rem;
}

/* ---- Skip link ------------------------------------------------------------
   Hidden until focused. Lets keyboard and screen reader users jump past the
   navigation instead of tabbing through it on every page. */
.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: .75rem 1.25rem;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 12px 0;
  text-decoration: none;
}
.skip-link:focus{
  left: 0;
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Carousel pause control, matching the existing prev/next styling */
.saac-pause{
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(2,8,23,.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  cursor: pointer;
}
.saac-pause:hover,
.saac-pause:focus{ background: rgba(2,8,23,.8); outline: 2px solid #fff; }

/* ===========================================================================
   Responsive hardening
   ---------------------------------------------------------------------------
   The page relies on Bootstrap's grid, which handles most of this, but a few
   fundamentals were missing and some of the components added later needed
   their own breakpoints.
   ======================================================================== */

/* Nothing may be wider than its container. This was absent entirely, so the
   214px logo and any oversized image could push the page sideways. */
img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* A last-resort guard. The causes above are fixed, but a single stray element
   should degrade into a slightly narrow page rather than a sideways-scrolling
   one on a phone. */
html,
body {
  overflow-x: hidden;
}

/* Long unbroken strings, an email or a URL, must not force the page wider. */
.text-break-anywhere,
.cardx a[href^="mailto:"],
footer a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

/* ---- Hero ---------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .hero h1 { font-size: 1.85rem; }
  .hero .lead { font-size: 1rem; }
  .saac-slider .saac-slide-img { height: 200px; }
  .chip { font-size: .82rem; padding: .3rem .6rem; }
}

/* ---- Product and pillar cards -------------------------------------------- */
@media (max-width: 575.98px) {
  .cardx { border-radius: 14px; }
  .pcard h5 { font-size: 1.05rem; }
  .icon-pill { width: 40px; height: 40px; font-size: 1.05rem; }
  section { padding: 56px 0; }
  .section-title { font-size: 1.6rem; }
}

/* The product card header puts the name beside the icon with a badge opposite.
   Below 400px there is not room for all three on one line, so the badge drops
   underneath rather than squashing the product name. */
@media (max-width: 399.98px) {
  .pcard .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: .5rem;
  }
}

/* ---- Client marquee ------------------------------------------------------ */
/* The track is width:max-content inside an overflow:hidden parent, so it never
   widens the page. On small screens the chips just need to be smaller. */
@media (max-width: 575.98px) {
  .client-chip { font-size: .8rem; padding: .3rem .6rem; }
  .proof-num { font-size: 1.6rem; }
}

/* ---- Leadership ---------------------------------------------------------- */
@media (max-width: 575.98px) {
  .leader-avatar { width: 48px; height: 48px; font-size: 1rem; }
}

/* ---- Sticky CTA ---------------------------------------------------------- */
/* It now appears below the xl breakpoint, matching the navbar, so the spacer
   the body needs has to move with it. */
@media (min-width: 1200px) { .sticky-cta { display: none; } }
@media (max-width: 1199.98px) { body.has-sticky-cta { padding-bottom: 76px; } }

@media (max-width: 399.98px) {
  .sticky-cta .btn { font-size: .9rem; padding-left: .6rem; padding-right: .6rem; }
}

/* Our Work: client logos sit where product cards have an icon pill. */
.client-logo { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; background: #fff; border: 1px solid rgba(0,0,0,.08); padding: 4px; }

/* What our clients say / From our blog (site-content.js). */
.tcard-stars { color: #f5a524; font-size: .95rem; letter-spacing: 2px; }
.tcard-quote p { font-size: 1.02rem; line-height: 1.6; }
.tcard-quote p::before { content: "\201C"; }
.tcard-quote p::after { content: "\201D"; }
.bcard { color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.bcard:hover { transform: translateY(-2px); }
.bcard-title { color: var(--bs-body-color); }
.bcard-more { font-weight: 600; color: var(--bs-primary); }
.post-body p { font-size: 1.08rem; line-height: 1.75; margin-bottom: 1.1rem; }
.client-initials { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; color: #fff; background: linear-gradient(135deg, #1e3a8a, #4f46e5); border: 0; }