/* ==========================================================================
   Dev Dex: design tokens (colours sampled from the approved design)
   ========================================================================== */
:root {
  --bg:        #FCFCFE;
  --ink:       #050B16;   /* headings, primary buttons */
  --text:      #222839;   /* body copy */
  --muted:     #484C56;   /* eyebrows, secondary copy */
  --line:      #ECEEF6;
  --accent:    #4639FB;   /* "forward." / "together." / icons */
  --blue:      #1969D5;
  --tile:      #EEF0FF;   /* icon tiles */
  --navy:      #020F26;   /* featured panel */
  --lav-1:     #F6F3FE;   /* CTA gradient */
  --lav-2:     #DADAFA;

  --font-head: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 22px;
  --gutter:    clamp(20px, 4vw, 56px);
  --max:       1320px;
  --shadow:    0 1px 2px rgba(16, 24, 64, .04), 0 12px 32px -12px rgba(30, 40, 120, .14);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--font-head); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { top: 12px; }

.accent { color: var(--accent); }
.icon { width: 1.1em; height: 1.1em; flex: none; }

.eyebrow {
  font: 600 .72rem/1.4 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 22px; height: 50px;
  font: 600 .9rem/1 var(--font-body);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn .icon { transition: transform .2s ease; }
.btn:hover .icon { transform: translateX(3px); }
.btn--dark  { background: var(--ink); color: #fff; }
.btn--dark:hover  { background: #14203a; box-shadow: 0 10px 24px -10px rgba(5, 11, 22, .6); transform: translateY(-1px); }
.btn--ghost { background: #fff; color: var(--ink); border-color: #E3E5EE; }
.btn--ghost:hover { border-color: #C9CCDC; box-shadow: var(--shadow); transform: translateY(-1px); }
.btn--light { background: #fff; color: var(--ink); height: 46px; }
.btn--light:hover { box-shadow: 0 10px 28px -10px rgba(255, 255, 255, .45); transform: translateY(-1px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(252, 252, 254, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 6px 24px -18px rgba(20, 30, 90, .35); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }

.brand { display: inline-flex; align-items: center; }
.brand__logo { display: block; height: 48px; width: auto; }

.nav { display: flex; align-items: center; gap: 36px; flex: 1; justify-content: space-between; margin-left: 56px; }
.nav__list { display: flex; gap: 36px; margin-inline: auto; }
.nav__list a { font: 500 .88rem/1 var(--font-body); color: var(--ink); position: relative; padding: 8px 0; }
.nav__list > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav__list > li > a:hover::after { transform: scaleX(1); }
.nav__cta { height: 44px; padding-inline: 20px; font-size: .85rem; }

.nav-toggle { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60% 70% at 78% 40%, rgba(214, 220, 255, .55) 0%, rgba(214, 220, 255, 0) 70%),
    var(--bg);
}
/* The hero dims out gently at its base: a pale brand-blue glow that fades away completely, so there is no edge for the eye to catch. */
.hero::after {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: clamp(150px, 18vw, 260px); pointer-events: none;
  /* a very light glow that is strongest in the middle of the band and dissolves to nothing on every side, including the bottom edge */
  background: radial-gradient(ellipse closest-side at 50% 50%, rgba(206, 215, 255, .38) 0%, rgba(206, 215, 255, .16) 55%, rgba(206, 215, 255, 0) 100%);
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  gap: clamp(8px, 2vw, 32px);
  padding-block: clamp(32px, 5vw, 72px) clamp(56px, 6vw, 96px);
}
.hero__copy { max-width: 620px; }
.hero__copy .eyebrow { margin-bottom: 26px; }
.hero h1 {
  font-weight: 800;
  font-size: clamp(2.5rem, 4.5vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  margin-bottom: 28px;
}
.lede { font-size: 1.05rem; line-height: 1.65; color: var(--text); max-width: 500px; margin-bottom: 34px; }

.hero__art img {
  width: 100%; margin-inline: auto;
  /* soften only the outer edges so the artwork melts into the page */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
          mask-composite: intersect;
}

/* ==========================================================================
   Services
   ========================================================================== */
/* Services is a plain white band. The hero itself fades out at its bottom edge (see .hero::after), so no rule or shadow is needed here. */
.services, .approach { position: relative; padding-block: clamp(56px, 7vw, 104px); }
.services { background: #fff; }
.services > .container { position: relative; }
.link-arrow:hover { color: var(--accent); }
.link-arrow:hover .icon { transform: translateX(3px); }
.cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.cards > li { display: flex; }
.card {
  display: flex; flex-direction: column; width: 100%;
  padding: 24px 22px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(16, 24, 64, .02);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #DCDFF3; }
.card h3 { font-size: 1.1rem; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; margin-bottom: 12px; }
.card p { font-size: .9rem; line-height: 1.6; color: var(--muted); margin-bottom: 26px; }
.card:hover .card__arrow { transform: translateX(5px); color: var(--accent); }

/* ==========================================================================
   Featured work
   ========================================================================== */
.featured { padding-block: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px); }
/* Stacked by default: copy on top, portal artwork underneath */
.featured__panel {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--navy);
  border-radius: var(--radius-lg);
}
.featured__img { order: 2; width: 100%; height: auto; aspect-ratio: 2172 / 724; object-fit: cover; object-position: right center; }  /* stacked layout: show the whole image */
.featured__copy { padding: clamp(28px, 5vw, 56px) clamp(24px, 4vw, 56px) 12px; color: #fff; }
.featured__copy .eyebrow { margin-bottom: 18px; }
.featured h2 {
  color: #fff; font-weight: 700; font-size: clamp(1.7rem, 4.4vw, 2.2rem);
  line-height: 1.12; letter-spacing: -.03em; margin-bottom: 16px; max-width: 560px;
}
.featured__copy > p:not(.eyebrow) { color: rgba(255, 255, 255, .86); font-size: .95rem; line-height: 1.6; max-width: 480px; margin-bottom: 22px; }

/* Wide screens: artwork fills the panel, copy sits in the dark left half (same ratio as the banner) */
@media (min-width: 1100px) {
  .featured__panel { flex-direction: row; align-items: center; aspect-ratio: 2.9 / 1; }  /* ratio is a minimum: grows if copy is taller */
  .featured__img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: right center; }
  .featured__copy {
    position: relative; z-index: 1;
    width: 50%; padding: clamp(24px, 3vw, 44px) 24px clamp(24px, 3vw, 44px) clamp(28px, 4vw, 56px);
  }
  .featured__copy .eyebrow { margin-bottom: clamp(10px, 1.2vw, 16px); }
  .featured h2 { font-size: clamp(1.6rem, 2.3vw, 2.1rem); margin-bottom: clamp(10px, 1.2vw, 16px); }
  .featured__copy > p:not(.eyebrow) { font-size: clamp(.85rem, 1vw, .95rem); margin-bottom: clamp(14px, 1.6vw, 22px); }
}
.featured .btn { flex: none; }

.stats { display: flex; flex-wrap: wrap; margin-top: clamp(20px, 2.6vw, 34px); }
.stats > div { display: flex; flex-direction: column-reverse; gap: 4px; padding-inline: clamp(16px, 2.4vw, 32px); border-left: 1px solid rgba(255, 255, 255, .22); }
.stats > div:first-child { padding-left: 0; border-left: 0; }
.stats dd { font: 700 clamp(1.5rem, 2.4vw, 2rem)/1.1 var(--font-head); letter-spacing: -.02em; color: #fff; }
.stats dt { font-size: .88rem; color: rgba(255, 255, 255, .82); }

/* ==========================================================================
   Approach
   ========================================================================== */
.approach__intro .eyebrow { margin-bottom: 20px; }
.approach h2 { font-weight: 800; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; letter-spacing: -.035em; margin-bottom: 22px; max-width: 360px; }
.approach__intro > p:not(.eyebrow) { max-width: 400px; margin-bottom: 30px; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 6px; }
.step { display: flex; flex-direction: column; padding-inline: clamp(16px, 2.2vw, 32px); border-left: 1px solid var(--line); }
.step:first-child { border-left: 0; padding-left: 0; }
.step h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 12px; }
.step p { font-size: .92rem; line-height: 1.65; color: var(--muted); margin-bottom: 28px; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta__panel {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 32px;
  padding: clamp(28px, 4.5vw, 64px);
  border-radius: var(--radius-lg);
  background: var(--lav-1);
}
/* Artwork stretched to fill the whole panel */
.cta__panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../assets/dev-dex-section-background-web.jpg") center / 100% 100% no-repeat;
}
.cta__panel > * { position: relative; }
.cta__badge:hover { transform: translateY(-3px); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: #061320; color: rgba(255, 255, 255, .78); padding-top: clamp(48px, 6vw, 72px); }
.footer__grid {
  display: grid; grid-template-columns: 1.5fr 1fr .8fr 1.1fr; gap: 40px clamp(32px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.footer__logo { display: inline-block; margin-bottom: 22px; }
.footer__logo img { height: 38px; width: auto; }
.footer__brand p { max-width: 340px; font-size: 1.05rem; line-height: 1.75; color: rgba(255, 255, 255, .82); }
.social { display: flex; gap: 22px; margin-top: 28px; }
.social a { display: grid; place-items: center; width: 28px; height: 28px; color: #fff; transition: color .2s ease, transform .2s ease; }
.social a:hover { color: #7C8CFF; transform: translateY(-2px); }
.social svg { width: 24px; height: 24px; fill: currentColor; }

.footer__col h2 { font: 700 1.05rem/1.3 var(--font-head); color: #fff; margin-bottom: 26px; }
.footer__col li + li { margin-top: 14px; }
.footer__col a:not(.btn) { color: rgba(255, 255, 255, .78); transition: color .2s ease; }
.footer__col a:not(.btn):hover { color: #fff; }
.footer__details li { display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .78); }
.footer__details li + li { margin-top: 18px; }
.footer__icon { width: 20px; height: 20px; flex: none; fill: none; stroke: #8FA0FF; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.footer__cta { margin-top: 36px; height: 60px; padding-inline: 26px; border-radius: 12px; font-weight: 700; display: inline-flex; width: 100%; max-width: 290px; }
.site-footer :focus-visible { outline-color: #8FA0FF; }

.footer__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px;
  padding-block: 28px; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .88rem; color: rgba(255, 255, 255, .7);
}
.footer__bar ul { display: flex; flex-wrap: wrap; gap: 8px 36px; }
.footer__bar a { transition: color .2s ease; }
.footer__bar a:hover { color: #fff; }

@media (max-width: 1000px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .footer__logo img { height: 32px; }
  .footer__cta { max-width: none; }
}

/* ==========================================================================
   Scroll reveal (added by JS; content stays visible without it)
   ========================================================================== */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .approach h2, .approach__intro > p:not(.eyebrow) { max-width: 560px; }
  .nav { margin-left: 24px; gap: 20px; }
  .nav__list { gap: 22px; }
}

@media (max-width: 900px) {
  .brand__logo { height: 38px; }
  .nav-toggle {
    display: grid; place-content: center; gap: 6px; width: 44px; height: 44px;
    background: none; border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  }
  .nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s ease; }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-4px) rotate(-45deg); }

  .nav {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 18px;
    padding: 12px var(--gutter) 24px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(20, 30, 90, .3);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__list { flex-direction: column; gap: 0; margin: 0; }
  .nav__list a { display: block; padding: 14px 0; font-size: 1rem; border-bottom: 1px solid var(--line); }
  .nav__list a::after { display: none; }
  .nav__cta { width: 100%; }

  .hero__inner { grid-template-columns: 1fr; gap: 12px; }
  .hero__copy { max-width: 640px; }
  .hero__art { order: 2; max-width: 640px; margin-inline: auto; }

  .cta__panel { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .steps { grid-template-columns: 1fr; padding-top: 0; }
  .step { border-left: 0; padding: 28px 0; border-top: 1px solid var(--line); }
  .step:first-child { border-top: 0; padding-top: 0; }
  .step p { margin-bottom: 0; }
}

@media (max-width: 520px) {
  .brand__logo { height: 32px; }
  .cards { grid-template-columns: 1fr; }
  .btn-row .btn { flex: 1 1 100%; }
  .stats { gap: 18px 0; }
  .stats > div { padding-inline: 16px; }
  .stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* ==========================================================================
   Navigation dropdowns
   ========================================================================== */
.nav__list > li { position: relative; }
.nav__trigger {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 0;
  font: 500 .88rem/1 var(--font-body); color: var(--ink); background: none; border: 0; cursor: pointer;
}
.nav__trigger .icon { width: 14px; height: 14px; transition: transform .2s ease; }
.has-menu.is-open > .nav__trigger .icon, .has-menu:hover > .nav__trigger .icon { transform: rotate(180deg); }
.menu {
  position: absolute; top: calc(100% + 16px); left: -20px; width: 380px; padding: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow), 0 24px 48px -24px rgba(30, 40, 120, .25);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.menu::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.has-menu:hover > .menu, .has-menu:focus-within > .menu, .has-menu.is-open > .menu { opacity: 1; visibility: visible; transform: none; }
.nav__list .menu a { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; font: 500 .9rem/1.3 var(--font-body); }
.menu a:hover, .menu a:focus-visible { background: #F4F5FD; }
.menu img { width: 36px; height: 36px; flex: none; }
.menu strong { display: block; font: 600 .92rem/1.25 var(--font-body); color: var(--ink); }
.menu small { display: block; margin-top: 2px; font: 400 .8rem/1.4 var(--font-body); color: var(--muted); }

/* ==========================================================================
   Platforms row
   ========================================================================== */
.platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(28px, 3.5vw, 44px); }
.platforms ul { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.platforms li { padding: 9px 16px; font: 500 .88rem/1 var(--font-body); color: var(--ink); background: #fff; border: 1px solid #E3E5EE; border-radius: 999px; }

/* ==========================================================================
   Home: solutions + commitments
   ========================================================================== */
.solutions { padding-block: clamp(56px, 7vw, 104px) 0; }

/* ==========================================================================
   Inner pages (services, solutions, case studies)
   ========================================================================== */
.hero--page .hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding-block: clamp(36px, 5vw, 72px) clamp(64px, 7vw, 104px); }
.hero--page h1 { font-size: clamp(2.2rem, 4vw, 3.5rem); margin-bottom: 22px; }
.hero--plain .hero__inner { grid-template-columns: minmax(0, 1fr); }
.hero--plain .hero__copy { max-width: 760px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; font: 500 .82rem/1.4 var(--font-body); color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs span[aria-current] { color: var(--ink); }

.band { padding-block: clamp(40px, 5vw, 72px) 0; }
.band--last { padding-bottom: clamp(56px, 7vw, 104px); }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature { padding: 28px 26px 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.feature h3 { font-size: 1.15rem; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; margin-bottom: 10px; }
.feature p { font-size: .93rem; line-height: 1.65; color: var(--muted); }
.problem { max-width: 760px; }
.problem h2 { font-weight: 800; font-size: clamp(1.7rem, 2.8vw, 2.4rem); letter-spacing: -.03em; margin: 14px 0 16px; }
.problem p:not(.eyebrow) { font-size: 1.05rem; line-height: 1.75; color: var(--text); }
.band .steps { margin-top: 4px; }

/* Case studies */
.case { display: grid; grid-template-columns: minmax(0, 1fr); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.case h2 { font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: -.03em; line-height: 1.12; margin: 12px 0 26px; max-width: 720px; }
.chip-link { padding: 9px 16px; font: 500 .85rem/1 var(--font-body); color: var(--ink); background: #fff; border: 1px solid #E3E5EE; border-radius: 999px; transition: border-color .2s ease, color .2s ease; }
.chip-link:hover { border-color: var(--accent); color: var(--accent); }

/* Footer: five columns */
.footer__grid { grid-template-columns: 1.5fr 1fr .8fr 1.1fr; gap: 40px clamp(32px, 5vw, 72px); }
.footer__col li + li { margin-top: 12px; }

@media (max-width: 1000px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero--page .hero__inner { grid-template-columns: 1fr; }
  .has-menu { border-bottom: 1px solid var(--line); }
  .nav__trigger { display: flex; width: 100%; justify-content: space-between; padding: 14px 0; font-size: 1rem; }
  .has-menu:hover > .nav__trigger .icon { transform: none; }
  .has-menu.is-open > .nav__trigger .icon { transform: rotate(180deg); }
  .menu, .has-menu:hover > .menu, .has-menu:focus-within > .menu {
    position: static; display: none; width: auto; padding: 0 0 12px; border: 0; border-radius: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none; background: none;
  }
  .menu::before { display: none; }
  .has-menu.is-open > .menu { display: block; }
  .nav__list .menu a { border-bottom: 0; padding: 10px 4px; }
  .menu small { display: none; }
}
@media (max-width: 760px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
   .features { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Client logo banner
   ========================================================================== */

/* ==========================================================================
   Contact page and form
   ========================================================================== */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.form { padding: clamp(24px, 3.5vw, 40px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.field { margin-bottom: 20px; }
.field label { display: block; margin-bottom: 8px; font: 600 .88rem/1.3 var(--font-body); color: var(--ink); }
.req { color: #D93B4A; }
.opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; font: 400 1rem/1.4 var(--font-body); color: var(--ink);
  background: #fff; border: 1px solid #D9DCEA; border-radius: 10px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 140px; }
.field select { appearance: none; padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23484C56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(70, 57, 251, .14); }
.field input::placeholder, .field textarea::placeholder { color: #8B90A0; }
.form.was-validated .field input:invalid, .form.was-validated .field textarea:invalid { border-color: #D93B4A; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.check { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 26px; font-size: .9rem; line-height: 1.5; color: var(--text); cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--accent); }
.form__submit { width: 100%; height: 54px; font-size: 1rem; }
.form__submit[disabled] { opacity: .6; cursor: progress; }
.form__status { margin-top: 16px; font-size: .95rem; line-height: 1.5; }
.form__status:empty { display: none; }
.form__status.is-ok { color: #12724B; }
.form__status.is-error { color: #B3261E; }
.next { counter-reset: n; display: grid; gap: 18px; }
.next li { position: relative; padding-left: 44px; counter-increment: n; }
.next li::before { content: counter(n); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid #E3E5EE; font: 600 .8rem/1 var(--font-head); color: var(--ink); }
.next strong { display: block; font: 600 .95rem/1.3 var(--font-body); color: var(--ink); margin-bottom: 2px; }
.next span { font-size: .9rem; line-height: 1.55; color: var(--muted); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

/* ==========================================================================
   AI & Intelligent Automation page (scoped to .ai-page)
   ========================================================================== */

/* Use-case selector */
.ai-selector button:hover { border-color: #C9CCDC; }
.ai-example + .ai-example { margin-top: 36px; padding-top: 36px; border-top: 1px solid var(--line); }
.ai-use-cases.is-js .ai-example[data-inactive] { display: none; }
.ai-use-cases.is-js .ai-example + .ai-example { margin: 0; padding: 0; border: 0; }
.ai-example h3 { margin: 4px 0 20px; font-size: clamp(1.35rem, 2.2vw, 1.7rem); letter-spacing: -.025em; }
.ai-example p:not(.ai-label):not(.ai-example__flow) { font-size: .95rem; line-height: 1.65; color: var(--muted); }

/* Capabilities */

/* Controls band */

/* Delivery steps */

/* Platforms */

/* FAQ */

/* Related */
.ai-related:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #DCDFF3; }

/* CTA */

/* ==========================================================================
   Custom Software & Applications page (scoped to .software-page).
   Section rhythm, FAQ, related cards, CTA aside, navy band and the platforms strip share the .ai-* components defined above.
   ========================================================================== */

/* Hero concept */

/* Value strip */

/* Approach choice */

/* Application explorer */
.sw-apps__options button:hover { border-color: #C9CCDC; }
.sw-example { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); }
.sw-example + .sw-example { margin-top: 36px; padding-top: 36px; border-top: 1px solid var(--line); }
.sw-apps.is-js .sw-example[data-inactive] { display: none; }
.sw-apps.is-js .sw-example + .sw-example { margin: 0; padding: 0; border: 0; }
.sw-example h3 { margin-bottom: 14px; font-size: clamp(1.4rem, 2.3vw, 1.8rem); letter-spacing: -.025em; }

/* Delivery scope */

/* Review points */

/* Ownership band (navy styling comes from .ai-controls) */
@media (max-width: 900px) {
  .sw-example { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Web & Digital Experiences page (scoped to .web-digital-page).
   Section rhythm, navy band, FAQ, related cards and CTA aside share the .ai-* components.
   ========================================================================== */

/* Experience selector */
.wd-exp__options button:hover { border-color: #C9CCDC; }
.wd-panel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-content: start; }
.wd-panel + .wd-panel { margin-top: 36px; padding-top: 36px; border-top: 1px solid var(--line); grid-area: auto; }
.wd-exp.is-js .wd-panel + .wd-panel { margin: 0; padding: 0; border: 0; grid-area: 1 / 1; }
.wd-exp.is-js .wd-panel[data-inactive] { visibility: hidden; }
.wd-panel h3 { margin-bottom: 14px; font-size: clamp(1.4rem, 2.3vw, 1.8rem); letter-spacing: -.025em; }

/* Structure */

/* Delivery scope */

/* Quality matrix (navy band comes from .ai-controls) */

/* Delivery sequence */

/* Publishing and upkeep */
@media (max-width: 900px) {
  .wd-panel { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Cloud, Microsoft and Strategy service pages (scoped to .sp-page).
   One shared template; each page sets its own accent tokens below.
   Section rhythm, navy band, FAQ, related cards and CTA aside reuse the .ai-* components.
   ========================================================================== */

/* Hero concept */

/* Starting-point selector */
.sp-explore__options button:hover { border-color: #C9CCDC; }
.sp-panel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-content: start; }
.sp-panel + .sp-panel { grid-area: auto; margin-top: 36px; padding-top: 36px; border-top: 1px solid var(--line); }
.sp-explore.is-js .sp-panel + .sp-panel { grid-area: 1 / 1; margin: 0; padding: 0; border: 0; }
.sp-explore.is-js .sp-panel[data-inactive] { visibility: hidden; }
.sp-panel h3 { margin-bottom: 14px; font-size: clamp(1.4rem, 2.3vw, 1.8rem); letter-spacing: -.025em; }

/* Split layout: boundaries (cloud), after the recommendation (strategy) */

/* Cards: configure / extend / reconsider, and useful outputs */

/* Delivery scope */

/* Navy define / review matrix (band styling comes from .ai-controls) */

/* Delivery sequence */

/* Ownership grid */
@media (max-width: 900px) {
   .sp-panel { grid-template-columns: 1fr; }
}

/* Back to top (all pages) */
.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: #fff; box-shadow: 0 10px 24px -8px rgba(5, 11, 22, .45); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease, visibility .25s; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: #1C2540; }
.to-top:focus-visible { outline: 3px solid #7167FF; outline-offset: 3px; }
.to-top .icon { width: 20px; height: 20px; }
#top:focus { outline: none; }
@media (max-width: 1400px) { .footer__bar { padding-right: 68px; } }
@media (max-width: 640px) { .to-top { right: 16px; bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; transform: none; } }

/* Solution page accent palettes (shared .sp-page template) */

/* Single-column hero rows (workspace-style concepts) */
.nav__list .menu .menu__all a { justify-content: space-between; margin-top: 4px; padding: 12px; font: 600 .86rem/1.2 var(--font-body); color: var(--ink); }
.menu__all .icon { width: 18px; height: 18px; }

/* ==========================================================================
   Breadcrumbs vs. page labels, spacing fixes
   ========================================================================== */
/* Breadcrumb: quiet navigation with chevrons, so it cannot be mistaken for the page label below it */
.crumbs { gap: 6px 10px; font-size: .8rem; color: #6A7287; }
.crumbs a { color: #6A7287; transition: color .2s ease; }
.crumbs > span[aria-hidden="true"] { flex: none; width: 6px; height: 6px; margin-inline: 2px; font-size: 0; border-top: 1.5px solid #A3ABC0; border-right: 1.5px solid #A3ABC0; transform: rotate(45deg); }

/* Page label chips: a tinted tag in the page's own accent colour (set per page by --sp-* tokens) */
 .hero--page .hero__copy > .eyebrow {
  display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; margin-bottom: 20px;
  background: var(--sp-tint, #F0EFFF); border: 1px solid var(--sp-edge, #D7D4FB); border-radius: 999px;
  color: var(--sp-accent, #4A3FCF); font: 600 .7rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
}
.hero--page .hero__copy > .eyebrow { padding-left: 16px; }

/* Less air between the header and the breadcrumb on inner pages, and around the closing CTA */
.hero--page .hero__inner { padding-top: clamp(4px, 1.2vw, 16px); }

/* Contact: details on the left, form on the right; on small screens the form comes first */
.field__error { margin-top: 6px; font-size: .84rem; line-height: 1.4; color: #B3261E; }
.field__error:empty { display: none; }
.field input[aria-invalid], .field textarea[aria-invalid] { border-color: #D93B4A; }
.form__hint { margin-top: 14px; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.cf-turnstile { margin-bottom: 20px; }
.form__submit[disabled] { cursor: not-allowed; }
@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; }
}

/* One consistent distance from the header to the breadcrumb on every inner page */
:root { --crumb-gap: clamp(24px, 3vw, 40px); }
.hero--page .hero__inner { padding-top: var(--crumb-gap); }

/* Same breadcrumb-to-label spacing on every page: copy starts directly under the breadcrumb */

/* Home slogan gets the same tinted chip as the inner-page labels */
.hero__copy > .eyebrow {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; margin-bottom: 24px;
  background: var(--sp-tint, #F0EFFF); border: 1px solid var(--sp-edge, #D7D4FB); border-radius: 999px;
  color: var(--sp-accent, #4A3FCF); font: 600 .7rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
}

/* ==========================================================================
   Legal pages (privacy, cookies, terms)
   ========================================================================== */
.legal-hero .hero__inner { padding-bottom: clamp(24px, 3vw, 40px); }
.legal__updated { margin-top: 14px; font-size: .86rem; color: var(--muted); }
.legal { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: clamp(28px, 6vw, 88px); align-items: start; }
.legal__toc { position: sticky; top: 104px; padding: 20px 20px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.legal__toc-title { margin-bottom: 10px; font: 600 .7rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.legal__toc ol { list-style: none; counter-reset: lg; }
.legal__toc li { counter-increment: lg; }
.legal__toc a { display: flex; gap: 10px; padding: 7px 0; font-size: .88rem; line-height: 1.4; color: var(--text); }
.legal__toc a::before { content: counter(lg); flex: none; width: 1.4em; color: var(--muted); font-variant-numeric: tabular-nums; }
.legal__toc a:hover, .legal__toc a:focus-visible { color: var(--accent); }
.legal__body { max-width: 760px; }
.legal__section { scroll-margin-top: 100px; }
.legal__section + .legal__section { margin-top: clamp(28px, 3.5vw, 44px); }
.legal__section h2 { margin-bottom: 14px; font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -.025em; }
.legal__section p { margin-bottom: 14px; font-size: 1rem; line-height: 1.75; color: var(--text); }
.legal__section ul { margin: 0 0 14px; padding-left: 1.2em; list-style: disc; }
.legal__section li { margin-bottom: 8px; font-size: 1rem; line-height: 1.7; color: var(--text); }
.legal__section a, .legal__contact a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal__table { margin: 4px 0 18px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.legal__table table { width: 100%; border-collapse: collapse; }
.legal__table th { padding: 12px 16px; text-align: left; background: #F6F7FC; font: 600 .78rem/1.3 var(--font-body); letter-spacing: .04em; color: var(--ink); }
.legal__table td { padding: 14px 16px; vertical-align: top; border-top: 1px solid var(--line); font-size: .92rem; line-height: 1.6; color: var(--text); }
.legal__contact { margin-top: clamp(32px, 4vw, 48px); padding-top: 20px; font-size: .92rem; color: var(--muted); }
@media (max-width: 900px) {
  .legal { grid-template-columns: 1fr; }
  .legal__toc { position: static; }
}
@media (max-width: 640px) {
  .legal__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal__table tr, .legal__table td { display: block; }
  .legal__table td { border-top: 0; padding: 4px 16px; }
  .legal__table tr { padding: 10px 0; border-top: 1px solid var(--line); }
  .legal__table tr:first-child { border-top: 0; }
  .legal__table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 600 .7rem/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
}

/* Approach steps: each step gets its own colour (number, icon tile), and the arrow sits bottom right like the service cards */
.step:nth-child(1) { --step-accent: #4A3FD6; --step-tint: #EEEDFF; --step-edge: #D0CCFA; }
.step:nth-child(2) { --step-accent: #1C6FD1; --step-tint: #E8F2FF; --step-edge: #B9D5F7; }
.step:nth-child(3) { --step-accent: #7A44D4; --step-tint: #F2EAFF; --step-edge: #D8C4F5; }

/* ==========================================================================
   Cookie / storage consent banner
   ========================================================================== */
.consent { position: fixed; left: 24px; bottom: 24px; z-index: 80; width: min(680px, calc(100% - 48px)); background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(20, 30, 90, .35), 0 6px 18px -8px rgba(20, 30, 90, .18); }
.consent[hidden] { display: none; }
.consent__inner { display: grid; gap: 18px; padding: 22px 24px; }
.consent h2 { margin-bottom: 6px; font-size: 1.05rem; letter-spacing: -.015em; }
.consent p { font-size: .9rem; line-height: 1.6; color: var(--text); }
.consent p a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.consent__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.consent__actions .btn { flex: 1 1 140px; height: 46px; }
html.consent-open .to-top { display: none; }
.footer__bar button { padding: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; transition: color .2s ease; }
.footer__bar button:hover { color: #fff; }
@media (max-width: 640px) {
  .consent { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .consent__inner { padding: 18px; }
  .consent__actions .btn { flex-basis: calc(50% - 5px); }
}

/* ==========================================================================
   Home link fixes: hero cards as links, approach steps as links, About page
   ========================================================================== */
.hero__hot:hover, .hero__hot:focus-visible { background: rgba(97, 90, 255, .1); outline: none; }
.step__link:focus-visible { outline: 2px solid var(--step-accent, var(--accent)); outline-offset: 8px; }
.step__link:hover .step__arrow, .step__link:focus-visible .step__arrow { color: var(--step-accent, var(--accent)); transform: translateX(4px); }
.step { scroll-margin-top: 110px; }


/* "Trusted by" band, above the footer on the home page: a heading, then a dark band holding the client logos in one colour */
.logos { padding: 0; }
.logos__row a:hover img, .logos__row li:hover img, .logos__row a:focus-visible img { opacity: 1; }

/* ==========================================================================
   Home page redesign (October 2026)
   Scoped to .home and the new h-* / clients classes so other pages are unchanged.
   Hero artwork can be switched back to the original 3D image with HERO_ART = "classic" in _build/content.py.
   ========================================================================== */
:root {
  --ink-2:   #0A1020;
  --body-2:  #3D4356;
  --muted-2: #4A5064;
  --mist:    #F6F7FB;
  --rule:    #DCDFE9;
  --navy-2:  #0B1426;
  --indigo-tint: #F3F3FF;
  --section-y: clamp(72px, 9vw, 128px);
}
.home h1, .home h2, .home h3 { color: var(--ink-2); }

.kicker {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font: 600 .8125rem/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.kicker::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: currentColor; }
.kicker--light { color: #A8A2FF; }

.btn--lg { height: 52px; padding-inline: 24px; font-size: .95rem; }
.btn--ghost.btn--lg { border-color: #D9DCE6; }
.link-line {
  display: inline-flex; align-items: center; gap: 8px; padding-bottom: 2px;
  font-weight: 600; color: var(--ink-2); border-bottom: 1.5px solid currentColor;
}
.link-line .icon { transition: transform .2s ease; }
.link-line:hover .icon { transform: translateX(3px); }
.link-line:hover { color: var(--accent); }

/* Shared section head */
.h-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 64px; margin-bottom: clamp(40px, 4.5vw, 64px); }
.h-head__title { flex: 1 1 460px; max-width: 640px; }
.h-head h2 { font-weight: 700; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -.028em; }
.h-head__aside { flex: 1 1 320px; max-width: 420px; }
.h-head__aside p { font-size: 1.0625rem; line-height: 1.6; color: var(--muted-2); margin-bottom: 16px; }

/* Hero */
.h-hero { background: #fff; }
.h-hero__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(40px, 4vw, 64px);
  padding-block: clamp(48px, 7vw, 104px) clamp(56px, 6vw, 88px);
}
.h-hero__copy { max-width: 560px; }
.h-hero h1 { font-weight: 700; font-size: clamp(2.5rem, 5vw, 4.125rem); line-height: 1.04; letter-spacing: -.032em; margin-bottom: 24px; }
.h-lede { font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); line-height: 1.6; color: var(--body-2); max-width: 520px; margin-bottom: 36px; }
.h-hero .btn-row { gap: 12px; margin-bottom: 40px; }
.h-proof { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: .875rem; color: var(--muted-2); }
.h-proof li { display: flex; align-items: center; gap: 8px; }
.h-proof .icon { width: 16px; height: 16px; color: var(--accent); }
.h-hero__art img { width: 100%; height: auto; }

/* Sector strip */
.h-sectors { border-block: 1px solid var(--line); background: #fff; }
.h-sectors__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; padding-block: 28px; }
.h-sectors__inner > p { font-size: .8125rem; font-weight: 600; color: #5B6172; }
.h-sectors ul { display: flex; flex-wrap: wrap; gap: 12px 36px; font: 600 1rem/1.3 var(--font-head); color: #1E2436; }

/* Services */
.h-services { background: var(--mist); padding-block: var(--section-y); }
.h-services__body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
.h-svc-list { border-top: 1px solid var(--rule); }
.h-svc { border-bottom: 1px solid var(--rule); }
.h-svc a { display: flex; gap: 20px; align-items: flex-start; padding: 26px 4px; border-radius: 4px; transition: background-color .2s ease; }
.h-svc a:hover { background: rgba(255, 255, 255, .7); }
.h-svc__text { flex: 1 1 auto; min-width: 0; }
.h-svc__name { display: block; margin-bottom: 6px; font: 700 1.25rem/1.3 var(--font-head); letter-spacing: -.015em; color: var(--ink-2); }
.h-svc__desc { display: block; font-size: .97rem; line-height: 1.55; color: var(--muted-2); }
.h-svc__arrow { flex: none; width: 20px; height: 20px; margin-top: 12px; color: #9AA0B2; transition: transform .2s ease, color .2s ease; }
.h-svc--lead .h-svc__arrow, .h-svc a:hover .h-svc__arrow { color: var(--accent); }
.h-svc a:hover .h-svc__arrow { transform: translateX(4px); }
.h-stack { margin: 0; position: sticky; top: 100px; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: clamp(20px, 2.5vw, 36px); }
.h-stack img { width: 100%; height: auto; }
.h-stack figcaption { margin-top: 16px; font-size: .845rem; color: #5B6172; text-align: center; }

/* Featured work */
.h-work :focus-visible { outline-color: #A8A2FF; }

/* Approach */
.h-steps { background: #fff; padding-block: var(--section-y); }
.h-steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.h-step img { width: 100%; height: auto; border-radius: 14px; margin-bottom: 28px; }
.h-step__num { display: block; margin-bottom: 10px; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; color: var(--accent); }
.h-step h3 { font: 700 1.375rem/1.25 var(--font-head); letter-spacing: -.015em; margin-bottom: 10px; }
.h-step p { font-size: .97rem; line-height: 1.6; color: var(--muted-2); }

/* CTA */
.h-cta { background: #fff; padding-bottom: var(--section-y); }
.h-cta__panel {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 32px 48px;
  padding: clamp(36px, 5vw, 72px); border-radius: 28px; background: var(--indigo-tint); border: 1px solid #E3E2FB; overflow: hidden;
}
.h-cta h2 { font-weight: 700; font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.06; letter-spacing: -.03em; margin-bottom: 18px; max-width: 560px; }
.h-cta__copy > p { font-size: 1.0625rem; line-height: 1.6; color: var(--body-2); max-width: 480px; margin-bottom: 32px; }
.h-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.h-cta__actions .link-line { border-bottom-color: #B9B4FF; }
.h-cta__art { width: 100%; max-width: 420px; height: auto; justify-self: center; }

/* Client logos */
.clients { background: #fff; border-top: 1px solid var(--line); padding-block: clamp(56px, 6vw, 88px); text-align: center; }
.clients .kicker { justify-content: center; }
.clients__title { font: 600 clamp(1.25rem, 1.8vw, 1.5rem)/1.3 var(--font-head); letter-spacing: -.015em; color: var(--ink-2); margin-bottom: clamp(32px, 4vw, 48px); }
.clients__row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; gap: 32px 40px; }
.clients__row li { display: flex; justify-content: center; align-items: center; min-height: 72px; }
.clients__row img { height: var(--logo-h, 40px); width: auto; max-width: 100%; object-fit: contain; opacity: .62; transition: opacity .2s ease; }
.clients__row li:hover img { opacity: 1; }

/* Home responsive */
@media (max-width: 1100px) {
  .clients__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .h-hero__inner, .h-services__body, .h-cta__panel { grid-template-columns: minmax(0, 1fr); }
  .h-hero__art { max-width: 620px; }
  .h-stack { position: static; max-width: 620px; }
  .h-steps__list { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .h-cta__art { max-width: 320px; justify-self: start; }
}
@media (max-width: 560px) {
  .h-hero .btn-row .btn { flex: 1 1 100%; }
  .h-svc a { gap: 16px; padding-block: 22px; }
  .h-svc__name { font-size: 1.125rem; }
  .h-svc__arrow { display: none; }
  .h-sectors ul { gap: 8px 22px; font-size: .9375rem; }
  .clients__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .clients__row img { height: calc(var(--logo-h, 40px) * .8); }
  .h-cta__actions .btn { flex: 1 1 100%; }
}

/* Home redesign, round 2: colourful artwork */
.h-hero { background: radial-gradient(55% 75% at 80% 45%, rgba(214, 220, 255, .55) 0%, rgba(214, 220, 255, 0) 70%), #fff; }
.h-stack { background: none; border: 0; padding: 0; }
.h-stack svg { display: block; width: 100%; height: auto; }
.h-step__art { display: block; width: 100%; height: auto; margin-bottom: 28px; }
.h-cta__art { display: block; width: 100%; max-width: 440px; height: auto; justify-self: center; }

/* Home redesign, round 3: new hero stage and case-study artwork with gentle motion */
.h-hero { background: radial-gradient(50% 70% at 82% 40%, rgba(120, 110, 255, .14) 0%, rgba(120, 110, 255, 0) 70%), #fff; }
.h-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.h-hero h1 { font-size: clamp(2.5rem, 4.6vw, 4rem); }
@media (max-width: 960px) {
  .h-hero__inner { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Home page, revision 4: vector hub hero, original portal artwork, coloured icons
   ========================================================================== */
@media (min-width: 961px) { .h-hero__inner { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); } }
.hub, .h-stack__art, .h-step__art { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.hub .hub-t, .h-stack__art .ill-t { font-family: var(--font-head); }
.h-hero__art--hub { position: relative; }
.h-hero__art--hub .hub { overflow: visible; animation: hubFloat 8s ease-in-out infinite; }
@keyframes hubFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.hub-card { cursor: pointer; }
.hub-card .hub-card__ring { transition: stroke .2s ease, stroke-width .2s ease; }
.hub-card:hover .hub-card__ring, .hub-card:focus-visible .hub-card__ring { stroke: #6454FF; stroke-width: 3; }
.hub a:focus { outline: none; }

/* Services list: coloured badge icons */
.h-svc__badge { flex: none; width: 52px; height: 52px; }
.h-svc a { align-items: center; }
.h-svc__arrow { margin-top: 0; }
.h-stack { padding: clamp(16px, 2vw, 28px); }

/* Featured work: original portal artwork panel inside a white section */
.h-feature { background: #fff; padding-block: var(--section-y) 0; }
.h-feature .featured__panel { box-shadow: 0 40px 80px -40px rgba(2, 14, 40, .55); }
.featured__copy > p.kicker { font-size: .8125rem; line-height: 1.3; color: #A8A2FF; margin-bottom: 18px; max-width: none; }
.h-feature h2 { font-weight: 700; color: #fff; }
@media (min-width: 1100px) {
  .h-feature .featured__panel { aspect-ratio: auto; min-height: 460px; }
  .h-feature .featured__img { object-fit: cover; object-position: right center; }
  .h-feature .featured__copy { padding-block: 48px; }
}

/* Steps: illustrations carry their own tinted tile */
.h-step__art { margin-bottom: 28px; border-radius: 18px; }

@media (max-width: 960px) {
  .h-hero__art--hub { max-width: 680px; }
}
/* Phones: a stacked version of the hub that fits the screen exactly, with full-size text */
.hub--compact { display: none; }
@media (max-width: 640px) {
  .hub--wide { display: none; }
  .hub--compact { display: block; max-width: 440px; margin-inline: auto; }
  .h-hero__art--hub { max-width: none; }
}
@media (min-width: 1100px) {
  .h-feature .featured__copy { width: 46%; }
  .h-feature .featured__copy > p:not(.kicker) { max-width: 430px; }
}

/* ==========================================================================
   Service, solution, hub, about and case-study templates (sv-*), October 2026
   Each page sets --sv-accent / --sv-tint / --sv-deep on <main> from its brand colour.
   ========================================================================== */
.sv { --section-y: clamp(64px, 7.5vw, 112px); --sv-accent: #4639FB; --sv-tint: #F0EFFF; --sv-deep: #3426C9; }
.sv .kicker { color: var(--sv-deep); }
.sv .kicker--light { color: #B6B0FF; }
.sv-ic { width: 22px; height: 22px; flex: none; }
.sv-ic--sm { width: 16px; height: 16px; }
.sv-tick, .sv-cross { width: 18px; height: 18px; flex: none; }
.sv-tick path { stroke-width: 2.4; }

/* Hero */
.sv-hero { position: relative; background:
  radial-gradient(50% 60% at 85% 35%, color-mix(in srgb, var(--sv-accent) 9%, transparent) 0%, transparent 70%), #fff; }
.sv-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 4vw, 64px);
  padding-block: clamp(28px, 4vw, 56px) clamp(56px, 6vw, 96px); }
.sv-hero--hub .sv-hero__copy { max-width: 760px; padding-block: clamp(28px, 4vw, 56px) clamp(40px, 5vw, 72px); }
.sv-hero h1 { font-weight: 700; font-size: clamp(2.25rem, 4.4vw, 3.6rem); line-height: 1.06; letter-spacing: -.032em; margin-bottom: 22px; }
.sv-hero .h-lede { margin-bottom: 20px; }
.sv-hero .h-lede + .btn-row, .sv-hero .h-lede + .h-lede + .btn-row { margin-top: 14px; }
.sv-hero .btn-row { gap: 12px; margin-bottom: 32px; }
.sv-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sv-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--sv-tint);
  color: var(--sv-deep); font-size: .875rem; font-weight: 600; }
.sv-chips .sv-tick { width: 15px; height: 15px; }
.sv-art { display: block; width: 100%; height: auto; font-family: var(--font-body); overflow: visible; }
.sv-art .ill-t { font-family: var(--font-head); }
.sv-hub__alt { font-size: 1rem; color: var(--muted-2); }

/* Problems */
.sv-problems { background: var(--mist); padding-block: var(--section-y); }
.sv-problems__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.sv-problem { padding: 32px 28px 8px 0; }
.sv-problem + .sv-problem { padding-left: 28px; border-left: 1px solid var(--rule); }
.sv-problem__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 12px; background: #fff; color: var(--sv-accent); border: 1px solid var(--rule); }
.sv-problem h3 { font: 700 1.125rem/1.3 var(--font-head); letter-spacing: -.01em; margin-bottom: 10px; }
.sv-problem p { font-size: .95rem; line-height: 1.6; color: var(--muted-2); }

/* Deliver */
.sv-deliver { background: #fff; padding-block: var(--section-y); }
.sv-deliver__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sv-deliver__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sv-feat { position: relative; padding: 28px; border-radius: 20px; background: #fff; border: 1px solid var(--line);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.sv-feat:hover { border-color: color-mix(in srgb, var(--sv-accent) 35%, #fff); box-shadow: 0 20px 40px -24px rgba(46, 44, 158, .28); transform: translateY(-2px); }
.sv-feat__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 22px; border-radius: 15px; background: var(--sv-tint); color: var(--sv-accent); }
.sv-feat__icon .sv-ic { width: 26px; height: 26px; }
.sv-feat h3 { font: 700 1.1875rem/1.3 var(--font-head); letter-spacing: -.012em; margin-bottom: 10px; }
.sv-feat p { font-size: .95rem; line-height: 1.6; color: var(--muted-2); }

/* Scenario: before / after */
.sv-scenario { padding-block: var(--section-y); color: #fff;
  background: radial-gradient(55% 70% at 80% 20%, color-mix(in srgb, var(--sv-accent) 30%, transparent) 0%, transparent 70%), #0B1426; }
.sv-scenario h2 { color: #fff !important; }
.sv-scenario .h-head__aside p { color: #C5CBDA; }
.sv-ba { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 20px; }
.sv-ba__panel { padding: 32px; border-radius: 22px; }
.sv-ba__panel--before { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.sv-ba__panel--after { background: #fff; color: var(--ink-2); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); }
.sv-ba__label { margin-bottom: 18px; font: 600 .8125rem/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #AEB5C7; }
.sv-ba__panel--after .sv-ba__label { color: var(--sv-deep); }
.sv-ba__panel li { display: flex; gap: 12px; align-items: flex-start; padding-block: 12px; font-size: 1rem; line-height: 1.5; }
.sv-ba__panel li + li { border-top: 1px solid rgba(255, 255, 255, .1); }
.sv-ba__panel--after li + li { border-top-color: var(--line); }
.sv-ba__panel--before li { color: #D3D8E6; }
.sv-ba__panel .sv-cross { color: #8E96AB; margin-top: 2px; }
.sv-ba__panel .sv-tick { color: #fff; background: var(--sv-accent); border-radius: 50%; padding: 3px; width: 22px; height: 22px; }
.sv-ba__arrow { align-self: center; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sv-accent); color: #fff; box-shadow: 0 0 0 8px color-mix(in srgb, var(--sv-accent) 22%, transparent); }
.sv-ba__arrow .icon { width: 22px; height: 22px; }
.sv-ba__result { display: flex; align-items: center; gap: 14px; margin-top: 28px; font: 600 1.125rem/1.5 var(--font-head); color: #fff; }
.sv-ba__result .sv-ic { color: #B6B0FF; width: 26px; height: 26px; }

/* How it works */
.sv-how { background: #fff; padding-block: var(--section-y); }
.sv-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; position: relative; }
.sv-steps::before { content: ""; position: absolute; left: 24px; right: 24px; top: 24px; height: 2px;
  background: linear-gradient(90deg, var(--sv-accent), color-mix(in srgb, var(--sv-accent) 20%, #fff)); }
.sv-step { position: relative; }
.sv-step__num { position: relative; display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 24px; border-radius: 50%;
  background: #fff; border: 2px solid var(--sv-accent); color: var(--sv-deep); font: 700 .95rem/1 var(--font-head); }
.sv-step:first-child .sv-step__num { background: var(--sv-deep); border-color: var(--sv-deep); color: #fff; }
.sv-step h3 { font: 700 1.25rem/1.3 var(--font-head); margin-bottom: 10px; }
.sv-step p { font-size: .95rem; line-height: 1.6; color: var(--muted-2); }
.sv-step__out { display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; padding: 10px 12px; border-radius: 10px; background: var(--sv-tint); color: var(--sv-deep) !important; font-size: .875rem !important; }
.sv-step__out .sv-ic { margin-top: 2px; }

/* Proof */
.sv-proof { background: var(--mist); padding-block: var(--section-y); }
.sv-case { padding: clamp(28px, 4vw, 48px); border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.sv-case__head h2 { font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.15; letter-spacing: -.025em; margin-bottom: 8px; }
.sv-case__sector { font-size: .9rem; color: #5B6172; margin-bottom: 28px; }
.sv-case__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 24px; border-top: 1px solid var(--line); margin-bottom: 24px; }
.sv-case__facts dt { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 700 .95rem/1.3 var(--font-head); color: var(--sv-deep); }
.sv-case__facts dd { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--muted-2); }
.sv-case__facts--stack { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.sv-case__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.sv-case__links .link-line { margin-left: auto; }
.sv-logos { margin-top: clamp(40px, 5vw, 64px); text-align: center; }
.sv-logos__label { margin-bottom: 28px; font: 600 1.0625rem/1.4 var(--font-head); color: var(--ink-2); }
.sv-proof > .container > .sv-logos:first-child { margin-top: 0; }

/* Engagement plans */
.sv-engage { background: #fff; padding-block: var(--section-y); }
.sv-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.sv-plan { position: relative; display: flex; flex-direction: column; padding: 32px; border-radius: 22px; border: 1px solid var(--line); background: #fff; }
.sv-plan--feature { border: 2px solid var(--sv-accent); box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--sv-accent) 70%, transparent); }
.sv-plan__tag { position: absolute; top: 24px; right: 24px; padding: 5px 10px; border-radius: 999px; background: var(--sv-tint); color: var(--sv-deep); font-size: .75rem; font-weight: 600; }
.sv-plan--feature .sv-plan__tag { background: var(--sv-deep); color: #fff; }
.sv-plan__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 14px; background: var(--sv-tint); color: var(--sv-accent); }
.sv-plan h3 { font: 700 1.375rem/1.25 var(--font-head); margin-bottom: 10px; }
.sv-plan > p { font-size: .95rem; line-height: 1.6; color: var(--muted-2); margin-bottom: 20px; }
.sv-plan ul { display: grid; gap: 10px; margin-bottom: 24px; }
.sv-plan li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; line-height: 1.5; color: var(--body-2); }
.sv-plan li .sv-tick { color: var(--sv-accent); margin-top: 2px; }
.sv-plan .sv-plan__len { margin: auto 0 0; display: flex; align-items: center; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .875rem; font-weight: 600; color: var(--ink-2); }
.sv-plan__len .sv-ic { color: var(--sv-accent); }

/* FAQ */
.sv-faq { background: var(--mist); padding-block: var(--section-y); }
.sv-faq__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.sv-faq__intro h2 { font-weight: 700; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -.028em; margin-bottom: 16px; }
.sv-faq__intro > p:not(.kicker) { font-size: 1.0625rem; line-height: 1.6; color: var(--muted-2); margin-bottom: 36px; }
.sv-tech__label { margin-bottom: 14px; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5B6172; }
.sv-tech ul { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-tech li { padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--rule); font-size: .875rem; font-weight: 500; color: var(--body-2); }
.sv-faq__list { border-top: 1px solid var(--rule); }
.sv-faq__item { border-bottom: 1px solid var(--rule); }
.sv-faq__item summary { position: relative; display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none;
  font: 700 1.125rem/1.4 var(--font-head); color: var(--ink-2); }
.sv-faq__item summary::-webkit-details-marker { display: none; }
.sv-faq__plus { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1px solid var(--rule); }
.sv-faq__plus::before, .sv-faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--sv-accent); border-radius: 2px; transition: transform .2s ease; }
.sv-faq__plus::after { transform: rotate(90deg); }
.sv-faq__item[open] .sv-faq__plus::after { transform: rotate(0); }
.sv-faq__item summary:focus-visible { outline: 2px solid var(--sv-accent); outline-offset: 4px; }
.sv-faq__item p { padding: 0 52px 24px 0; font-size: 1rem; line-height: 1.65; color: var(--muted-2); }

/* Related */
.sv-related { background: #fff; padding-block: var(--section-y) clamp(40px, 5vw, 64px); }
.sv-related__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sv-rel { position: relative; display: flex; flex-direction: column; height: 100%; padding: 28px; border-radius: 20px; border: 1px solid var(--line); background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.sv-rel:hover { border-color: #CFD3F5; box-shadow: 0 20px 40px -24px rgba(46, 44, 158, .3); transform: translateY(-2px); }
.sv-rel img { width: 48px; height: 48px; margin-bottom: 20px; }
.sv-rel__kind { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5B6172; margin-bottom: 6px; }
.sv-rel__name { font: 700 1.1875rem/1.3 var(--font-head); color: var(--ink-2); margin-bottom: 8px; }
.sv-rel__desc { font-size: .95rem; line-height: 1.55; color: var(--muted-2); padding-right: 28px; }
.sv-rel__arrow { position: absolute; right: 24px; bottom: 28px; width: 20px; height: 20px; color: var(--accent); transition: transform .2s ease; }
.sv-rel:hover .sv-rel__arrow { transform: translateX(4px); }
.sv-cta { padding-top: clamp(24px, 3vw, 40px); }

/* Hubs */
.sv-hub { background: var(--mist); padding-block: clamp(48px, 6vw, 88px); }
.sv-hub__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sv-hubcard { display: grid; grid-template-columns: minmax(0, 1fr); height: 100%; overflow: hidden; border-radius: 24px; background: #fff; border: 1px solid var(--line);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.sv-hubcard:hover { border-color: #CFD3F5; box-shadow: 0 28px 56px -32px rgba(46, 44, 158, .35); transform: translateY(-3px); }
.sv-hubcard__art { display: block; padding: 20px 28px 0; background: linear-gradient(180deg, var(--sv-tint), #fff); }
.sv-hubcard__art .sv-art { max-height: 300px; width: auto; max-width: 100%; margin-inline: auto; }
.sv-hubcard__body { display: flex; flex-direction: column; padding: 8px 32px 32px; }
.sv-hubcard__name { font: 700 1.5rem/1.25 var(--font-head); letter-spacing: -.02em; color: var(--ink-2); margin-bottom: 10px; }
.sv-hubcard__desc { font-size: 1rem; line-height: 1.6; color: var(--muted-2); margin-bottom: 18px; }
.sv-hubcard ul { display: grid; gap: 8px; margin-bottom: 24px; }
.sv-hubcard li { display: flex; gap: 10px; align-items: center; font-size: .95rem; color: var(--body-2); }
.sv-hubcard li .sv-tick { color: var(--sv-accent); }
.sv-hubcard .link-line { align-self: flex-start; margin-top: auto; }

/* Case studies */
.sv-cases { background: #fff; padding-block: clamp(24px, 3vw, 48px) var(--section-y); }
.sv-cases .container { display: grid; gap: clamp(48px, 6vw, 88px); }
.sv-caserow { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.sv-caserow--flip .sv-caserow__vis { order: 2; }
.sv-caserow__vis { padding: 24px; border-radius: 28px; background: linear-gradient(160deg, #F0EFFF, #E8F1FC); }
.sv-caserow__vis--img { padding: 0; overflow: hidden; background: #020E28; }
.sv-caserow__img { width: 100%; height: auto; aspect-ratio: 1.45; object-fit: cover; object-position: 78% center; }
.sv-caserow__body h2 { font-weight: 700; font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1.12; letter-spacing: -.026em; margin-bottom: 20px; }
.sv-caserow .sv-case__sector { margin-bottom: 10px; color: var(--sv-deep); font-weight: 600; }

/* ---------- Sitewide harmonisation with the new design ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 0; background: none; border: 0; border-radius: 0;
  font: 600 .8125rem/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.eyebrow::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: currentColor; }
.hero h1, .hero--page h1, .approach h2 { font-weight: 700; letter-spacing: -.03em; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .sv-problems__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-problem:nth-child(3) { padding-left: 0; border-left: 0; }
  .sv-problem:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .sv-deliver__grid, .sv-deliver__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .sv-steps::before { display: none; }
}
@media (max-width: 960px) {
  .sv-hero__inner, .sv-faq__inner, .sv-caserow { grid-template-columns: minmax(0, 1fr); }
  .sv-caserow--flip .sv-caserow__vis { order: 0; }
  .sv-hero__art { max-width: 620px; }
  .sv-ba { grid-template-columns: minmax(0, 1fr); }
  .sv-ba__arrow { justify-self: center; transform: rotate(90deg); }
  .sv-plans, .sv-related__list, .sv-case__facts { grid-template-columns: minmax(0, 1fr); }
  .sv-hub__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .sv-problems__list, .sv-deliver__grid, .sv-deliver__grid--4, .sv-steps { grid-template-columns: minmax(0, 1fr); }
  .sv-problem, .sv-problem + .sv-problem { padding: 24px 0 4px; border-left: 0; }
  .sv-problem + .sv-problem { border-top: 1px solid var(--rule); }
  .sv-hero .btn-row .btn { flex: 1 1 100%; }
  .sv-ba__panel { padding: 24px; }
  .sv-faq__item p { padding-right: 0; }
  .sv-hubcard__body { padding: 8px 22px 24px; }
  .sv-hubcard__art { padding: 14px 10px 0; }
  .sv-case__links .link-line { margin-left: 0; }
}
.sv-art--compact { display: none; }
@media (max-width: 600px) {
  .sv-art--wide { display: none; }
  .sv-art--compact { display: block; }
  .sv-hubcard__art { padding: 16px 16px 0; }
}

/* ==========================================================================
   Contact (ct-*), Insights (in-*), 404 (nf-*), October 2026
   ========================================================================== */
.sv-hero--contact .sv-chips { margin-top: 8px; }
.ct { background: var(--mist); padding-block: clamp(48px, 6vw, 88px) var(--section-y); }
.ct__inner { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.ct__form { padding: clamp(24px, 3.5vw, 44px); border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(46, 44, 158, .3); }
.ct__form .form { padding: 0; border: 0; box-shadow: none; background: none; }
.ct__title { font: 700 1.5rem/1.25 var(--font-head); letter-spacing: -.02em; margin-bottom: 6px; }
.ct__intro { font-size: .9rem; color: #5B6172; margin-bottom: 28px; }
.ct__side { display: grid; gap: 20px; position: sticky; top: 100px; }
.ct__card { padding: 28px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.ct__card h2 { font: 700 1.125rem/1.3 var(--font-head); margin-bottom: 18px; }
.ct__steps { display: grid; gap: 18px; }
.ct__steps li { display: flex; gap: 14px; align-items: flex-start; }
.ct__num { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sv-tint); color: var(--sv-deep); font: 700 .875rem/1 var(--font-head); }
.ct__steps li:first-child .ct__num { background: var(--accent); color: #fff; }
.ct__steps strong { display: block; font: 600 .975rem/1.35 var(--font-body); color: var(--ink-2); margin-bottom: 2px; }
.ct__steps p { font-size: .9rem; line-height: 1.55; color: var(--muted-2); }
.ct__card--direct { background: #0B1426; border-color: #0B1426; color: #fff; }
.ct__card--direct h2 { color: #fff; }
.ct__mail { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font: 600 1.125rem/1.3 var(--font-head); color: #fff; }
.ct__mail .sv-ic { color: #B6B0FF; }
.ct__mail:hover span { text-decoration: underline; text-underline-offset: 4px; }
.ct__where { display: flex; align-items: center; gap: 12px; font-size: .925rem; color: #C5CBDA; }
.ct__where .sv-ic { color: #B6B0FF; }
.ct__card--direct :focus-visible { outline-color: #B6B0FF; }
.ct__card--tips ul { display: grid; gap: 10px; }
.ct__card--tips li { display: flex; gap: 10px; align-items: center; font-size: .95rem; color: var(--body-2); }
.ct__card--tips .sv-tick { color: var(--accent); }

/* Insights list */
.in-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.in-topics li { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--rule); font-size: .875rem; font-weight: 500; color: var(--body-2); }
.in-list { background: var(--mist); padding-block: clamp(48px, 6vw, 88px) var(--section-y); }
.in-feature { margin-bottom: 24px; }
.in-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.in-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 24px; background: #fff; border: 1px solid var(--line);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.in-card:hover { border-color: #CFD3F5; box-shadow: 0 28px 56px -32px rgba(46, 44, 158, .35); transform: translateY(-3px); }
.in-card__art { display: block; padding: 24px 28px 0; background: linear-gradient(180deg, var(--sv-tint), #fff); }
.in-card__art .sv-art { max-height: 260px; width: auto; max-width: 100%; margin-inline: auto; }
.in-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 32px 32px; }
.in-card__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 12px; font-size: .85rem; color: #5B6172; }
.in-card__cat { padding: 4px 10px; border-radius: 999px; background: var(--sv-tint); color: var(--sv-deep); font-weight: 600; }
.in-card__title { font: 700 1.375rem/1.28 var(--font-head); letter-spacing: -.018em; color: var(--ink-2); margin-bottom: 10px; }
.in-card__sum { font-size: .975rem; line-height: 1.6; color: var(--muted-2); margin-bottom: 22px; }
.in-card .link-line { align-self: flex-start; margin-top: auto; }
.in-card--feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.in-card--feature .in-card__art { display: flex; align-items: center; padding: 32px; background: linear-gradient(135deg, var(--sv-tint), #fff); }
.in-card--feature .in-card__art .sv-art { max-height: 340px; }
.in-card--feature .in-card__body { justify-content: center; padding: clamp(28px, 4vw, 56px); }
.in-card--feature .in-card__title { font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.15; letter-spacing: -.025em; }
.in-card--feature .in-card__sum { font-size: 1.0625rem; }

/* Article */
.in-article__head { background: radial-gradient(50% 70% at 85% 30%, color-mix(in srgb, var(--sv-accent) 10%, transparent) 0%, transparent 70%), #fff; }
.in-article__headinner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 4vw, 56px); align-items: center;
  padding-block: clamp(28px, 4vw, 56px) clamp(40px, 5vw, 72px); }
.in-article h1 { font-weight: 700; font-size: clamp(2rem, 3.8vw, 3.1rem); line-height: 1.1; letter-spacing: -.03em; margin-bottom: 20px; }
.in-article__meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: .9rem; color: #5B6172; }
.in-article__cover { padding: 20px; border-radius: 24px; background: linear-gradient(135deg, var(--sv-tint), #fff); border: 1px solid var(--line); }
.in-article__layout { display: grid; grid-template-columns: 260px minmax(0, 720px); gap: clamp(32px, 5vw, 80px); justify-content: center;
  padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 96px); border-top: 1px solid var(--line); }
.in-toc { position: sticky; top: 100px; align-self: start; }
.in-toc__label { margin-bottom: 12px; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5B6172; }
.in-toc ol { display: grid; gap: 2px; margin-bottom: 32px; border-left: 2px solid var(--line); }
.in-toc ol a { display: block; padding: 7px 0 7px 16px; margin-left: -2px; border-left: 2px solid transparent; font-size: .9rem; line-height: 1.45; color: var(--muted-2); }
.in-toc ol a:hover { color: var(--sv-deep); border-left-color: var(--sv-accent); }
.in-toc__rel ul { display: grid; gap: 10px; }
.in-rel { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: #fff; transition: border-color .2s ease; }
.in-rel:hover { border-color: #CFD3F5; }
.in-rel img { flex: none; }
.in-rel strong { display: block; font: 600 .9rem/1.3 var(--font-body); color: var(--ink-2); }
.in-rel small { display: block; font-size: .8rem; line-height: 1.4; color: #5B6172; }
.in-prose { font-size: 1.0625rem; line-height: 1.75; color: var(--body-2); }
.in-prose > * + * { margin-top: 20px; }
.in-prose h2 { margin-top: 48px; font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.25; letter-spacing: -.02em; scroll-margin-top: 100px; }
.in-prose ul, .in-prose ol { display: grid; gap: 10px; padding-left: 0; }
.in-prose ul li { position: relative; padding-left: 26px; }
.in-prose ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--sv-accent); }
.in-prose ol { counter-reset: s; }
.in-prose ol li { position: relative; padding-left: 40px; counter-increment: s; }
.in-prose ol li::before { content: counter(s); position: absolute; left: 0; top: .15em; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sv-tint); color: var(--sv-deep); font: 700 .8rem/1 var(--font-head); }
.in-prose strong { color: var(--ink-2); }
.in-callout { display: flex; gap: 14px; align-items: flex-start; padding: 22px 24px; border-radius: 18px; background: var(--sv-tint); color: var(--ink-2); }
.in-callout .sv-ic { color: var(--sv-accent); margin-top: 4px; }
.in-callout p { font-weight: 500; }
.in-more { background: var(--mist); }

/* 404 */
.nf { background: radial-gradient(50% 60% at 80% 40%, rgba(100, 84, 255, .1) 0%, transparent 70%), #fff; }
.nf__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-block: clamp(48px, 7vw, 112px); }
.nf__code { font: 800 clamp(4rem, 10vw, 8rem)/1 var(--font-head); letter-spacing: -.05em; margin-bottom: 8px;
  background: linear-gradient(90deg, #1969D5, #4639FB 50%, #8952FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf h1 { font-weight: 700; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -.03em; margin-bottom: 18px; }
.nf__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 0 32px; }
.nf__art .hub { max-width: 420px; margin-inline: auto; }

@media (max-width: 960px) {
  .ct__inner, .in-card--feature, .in-article__headinner, .nf__inner { grid-template-columns: minmax(0, 1fr); }
  .ct__side { position: static; }
  .in-article__layout { grid-template-columns: minmax(0, 1fr); }
  .in-toc { position: static; }
  .in-article__cover { max-width: 520px; }
  .nf__art { display: none; }
}
@media (max-width: 700px) {
  .in-grid, .nf__links { grid-template-columns: minmax(0, 1fr); }
  .in-card__body { padding: 18px 22px 24px; }
}

/* Sector explorer (AI page) */
.sv-sectors { background: var(--mist); padding-block: var(--section-y); }
.sv-sectors__explorer { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.sv-sectors__tabs { display: grid; gap: 8px; }
.sv-sector-tab { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 16px; border-radius: 14px; border: 1px solid transparent;
  background: transparent; font: 600 1rem/1.3 var(--font-head); color: var(--body-2); text-align: left; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.sv-sector-tab__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: #fff; color: var(--sv-accent); border: 1px solid var(--rule); }
.sv-sector-tab:hover { background: #fff; }
.sv-sector-tab[aria-pressed="true"] { background: #fff; border-color: var(--line); color: var(--ink-2); box-shadow: 0 14px 30px -20px rgba(46, 44, 158, .35); }
.sv-sector-tab[aria-pressed="true"] .sv-sector-tab__icon { background: var(--sv-accent); border-color: var(--sv-accent); color: #fff; }
.sv-sector-tab:focus-visible { outline: 2px solid var(--sv-accent); outline-offset: 2px; }
.sv-sectors__explorer:not(.is-js) .sv-sectors__tabs { display: none; }
.sv-sectors__explorer:not(.is-js) { grid-template-columns: minmax(0, 1fr); }
.sv-sectors__panels { display: grid; gap: 20px; }
.is-js .sv-sector[data-inactive] { display: none; }
.sv-sector { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(20px, 3vw, 40px); align-items: center;
  padding: clamp(20px, 2.5vw, 32px); border-radius: 26px; background: #fff; border: 1px solid var(--line); animation: svFade .35s ease; }
@keyframes svFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sv-sector__art .sv-art { border-radius: 18px; }
.sv-sector__name { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sv-deep); }
.sv-sector__name .sv-ic { width: 18px; height: 18px; }
.sv-sector h3 { font: 700 clamp(1.4rem, 2.2vw, 1.75rem)/1.2 var(--font-head); letter-spacing: -.022em; margin-bottom: 12px; }
.sv-sector__copy > p:not(.sv-sector__name) { font-size: 1rem; line-height: 1.6; color: var(--muted-2); margin-bottom: 18px; }
.sv-sector ul { display: grid; gap: 10px; }
.sv-sector li { display: flex; gap: 10px; align-items: center; font-size: .975rem; font-weight: 500; color: var(--body-2); }
.sv-sector li .sv-tick { color: #fff; background: var(--sv-accent); border-radius: 50%; padding: 3px; width: 20px; height: 20px; }
@media (max-width: 1100px) {
  .sv-sectors__explorer { grid-template-columns: minmax(0, 1fr); }
  .sv-sectors__tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .sv-sectors__tabs li { flex: none; }
  .sv-sector-tab { width: auto; white-space: nowrap; min-height: 48px; padding: 6px 14px 6px 8px; background: #fff; border-color: var(--line); }
  .sv-sector-tab__icon { width: 32px; height: 32px; }
}
@media (max-width: 760px) {
  .sv-sector { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .sv-sector { animation: none; } }

/* Article visuals */
.in-figure { margin: 36px 0; padding: clamp(16px, 2.5vw, 28px); border-radius: 22px; background: linear-gradient(135deg, var(--sv-tint), #fff); border: 1px solid var(--line); }
.in-figure .sv-art { max-width: 560px; margin-inline: auto; }
.in-figure figcaption { margin-top: 14px; font-size: .9rem; line-height: 1.5; color: #5B6172; text-align: center; }
.in-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 32px 0; }
.in-compare__col { padding: 24px; border-radius: 20px; border: 1px solid var(--line); background: #fff; }
.in-compare__col--r { background: #0B1426; border-color: #0B1426; color: #fff; }
.in-compare__title { display: flex; align-items: center; gap: 10px; font: 700 1.125rem/1.3 var(--font-head); color: var(--ink-2); margin-bottom: 4px; }
.in-compare__title .sv-ic { color: var(--sv-accent); }
.in-compare__col--r .in-compare__title { color: #fff; }
.in-compare__col--r .in-compare__title .sv-ic { color: #B6B0FF; }
.in-compare__sub { font-size: .9rem; color: #5B6172; margin-bottom: 14px; }
.in-compare__col--r .in-compare__sub { color: #AEB5C7; }
.in-compare ul { display: grid; gap: 10px; }
.in-prose .in-compare ul li { padding-left: 0; display: flex; gap: 10px; align-items: flex-start; font-size: .975rem; line-height: 1.5; }
.in-prose .in-compare ul li::before { display: none; }
.in-compare .sv-tick { color: var(--sv-accent); margin-top: 2px; }
.in-compare__col--r .sv-tick { color: #B6B0FF; }
.nf__inner { grid-template-columns: minmax(0, 760px); }
@media (max-width: 640px) { .in-compare { grid-template-columns: minmax(0, 1fr); } }
/* Client logos: plain white band, no grey background */
.clients { background: #fff; border-top: 1px solid var(--line); }
.sv-clients { background: #fff; padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--line); }
.sv-clients .sv-logos { margin-top: 0; }