/* ==========================================================================
   Smart Logic Systems — site styles
   Built from "Smart Logic Systems - 0.0.1" (Figma). Desktop reference: 1440px.
   ========================================================================== */

/* ----- Tokens ------------------------------------------------------------- */
:root {
  /* Figma colour styles */
  --dark-blue: #1b2955;
  --sky-blue: #4d93cc;
  --green: #2db179;
  --gold: #d4b13e;
  --black: #131313;
  --white: #ffffff;

  /* Supporting shades used across the mocks */
  --navy: #171e34;
  --ocean: #2b81c7;
  --logo-ink: #021b47;
  --line: #cfe0ee;
  --line-input: #c8dbeb;
  --line-soft: #dbe7f0;
  --slate: #48545c;
  --arrow: #6a8398;
  --arrow-ring: #b8cbdb;
  --glass-line: #afc6d9;
  --table-line: #e2e8f0;
  --table-row-line: #f1f5f9;
  --table-head: #f8fafc;
  --cta-start: #0b2648;
  --cta-end: #113974;

  --ink-90: rgb(19 19 19 / 0.9);
  --ink-80: rgb(19 19 19 / 0.8);
  --ink-70: rgb(19 19 19 / 0.7);
  --ink-60: rgb(19 19 19 / 0.6);
  --ink-50: rgb(19 19 19 / 0.5);
  --ink-40: rgb(19 19 19 / 0.4);

  --font-sans: 'Google Sans Flex', 'Google Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Google Sans Code', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(20px, 6.944vw, 100px);   /* page edge -> content (100px @1440) */
  --inset: clamp(8px, 2.083vw, 30px);      /* page edge -> hero panel (30px @1440) */
  --cta-inset: clamp(8px, 3.82vw, 55px);   /* page edge -> CTA panel (55px @1440) */
  --section-space: clamp(64px, 6.944vw, 100px);
  --header-top: clamp(12px, 4.167vw, 60px);
  --header-height: 77px;

  --shadow-header: 0 0 80px rgb(0 0 0 / 0.06);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-top) + var(--header-height) + 24px);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

h1, h2, h3, h4, p, ul, ol, figure, blockquote {
  margin: 0;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

strong,
b {
  font-weight: 700;
}

:focus-visible {
  outline: 2px solid var(--sky-blue);
  outline-offset: 3px;
}

/* Figma renders Google Sans Flex with its optical size capped at 24 for large
   text (measured against the mocks); smaller text uses the browser's automatic
   optical sizing, which matches. */
.display-title,
.page-title,
.section-title,
.section-title--center,
.cta__title,
.cs-panel__title,
.big-stat__value,
.stat__value,
.step__num span,
.feature-card__title {
  font-variation-settings: 'opsz' 24;
}

/* Figma trims text boxes to cap height / baseline; mirror that so spacing
   values from the mocks can be used directly as margins. */
.trim,
h1, h2, h3, h4, p {
  text-box: trim-both cap alphabetic;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--dark-blue);
  color: var(--white);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus {
  transform: none;
}

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

/* ----- Brand lockup ------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

.brand__mark {
  width: 47px;
  height: auto;
}

.brand__name {
  display: flex;
  flex-direction: column;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand__line1,
.brand__line2 {
  display: block;
  line-height: 1;
  text-box: trim-both cap alphabetic;
}

.brand__line1 {
  font-size: 14.93px;
  font-weight: 600;
  letter-spacing: 0.459px;
  color: var(--logo-ink);
}

.brand__line2 {
  margin-top: 6.5px;
  font-size: 13.78px;
  font-weight: 500;
  letter-spacing: 7.58px;
  color: var(--sky-blue);
}

.brand--lg {
  gap: 19px;
}

.brand--lg .brand__mark {
  width: 73px;
}

.brand--lg .brand__line1 {
  font-size: 23.99px;
  letter-spacing: 0.738px;
  color: var(--white);
}

.brand--lg .brand__line2 {
  margin-top: 11.4px;
  font-size: 22.14px;
  letter-spacing: 12.18px;
}

/* ----- Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--dark-blue);
  --btn-line: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 66px;
  padding: 0 30px;
  border: 1.2px solid var(--btn-line);
  border-radius: 16px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease),
    box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  --btn-bg: var(--dark-blue);
  --btn-fg: var(--white);
}

.btn--primary:hover {
  --btn-bg: #24376f;
  box-shadow: 0 10px 30px rgb(27 41 85 / 0.22);
}

.btn--outline {
  --btn-line: var(--dark-blue);
}

.btn--outline:hover {
  --btn-bg: var(--dark-blue);
  --btn-fg: var(--white);
}

.btn--gold {
  --btn-bg: var(--gold);
  --btn-fg: var(--white);
  min-height: 64px;
  font-weight: 600;
}

.btn--gold:hover {
  --btn-bg: #c5a232;
  box-shadow: 0 10px 30px rgb(212 177 62 / 0.3);
}

.btn--glass {
  --btn-bg: rgb(27 41 85 / 0.2);
  --btn-fg: var(--white);
  --btn-line: var(--glass-line);
  min-height: 64px;
  border-width: 1px;
}

.btn--glass:hover {
  --btn-bg: rgb(255 255 255 / 0.12);
  --btn-line: var(--white);
}

.btn--pill {
  min-height: 40px;
  padding: 0 26px;
  border-width: 1px;
  border-radius: 50px;
  font-size: 14px;
}

.btn--sm {
  --btn-bg: var(--white);
  min-height: 54px;
  padding: 0 25px;
  border-width: 1px;
  border-radius: 12px;
}

.btn--block {
  width: 100%;
}

.btn__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease);
}

.btn:hover .btn__icon {
  transform: translateX(3px);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

/* ----- Header ------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: var(--header-top) 0 auto;
  z-index: 100;
  padding-inline: max(16px, calc(var(--inset) + 8px));
  pointer-events: none;
  transition: transform 0.35s var(--ease);
}

.site-header.is-scrolled {
  transform: translateY(calc(min(16px, var(--header-top)) - var(--header-top)));
}

.site-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 1250px;
  height: var(--header-height);
  margin-inline: auto;
  padding: 0 35px 0 45px;
  border: 1px solid var(--white);
  border-radius: 50px;
  background: rgb(255 255 255 / 0.9);
  box-shadow: var(--shadow-header);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  pointer-events: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 70px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: block;
  color: var(--ink-70);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.site-nav__link:hover {
  color: var(--dark-blue);
}

.site-nav__link[aria-current='page'] {
  color: var(--dark-blue);
  font-weight: 600;
}

.site-nav__cta {
  margin-left: 53px;
}

.nav-toggle {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--dark-blue);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 2px;
  margin-left: -9px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle__bars {
  top: 50%;
  margin-top: -1px;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  left: 0;
  margin-left: 0;
}

.nav-toggle__bars::before {
  transform: translateY(-6px);
}

.nav-toggle__bars::after {
  transform: translateY(6px);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before {
  background: var(--dark-blue);
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after {
  background: var(--dark-blue);
  transform: rotate(-45deg);
}

/* ----- Shared typography -------------------------------------------------- */
.eyebrow {
  color: var(--sky-blue);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow--green {
  color: var(--green);
}

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 53px;
  padding: 0 33px;
  border-radius: 28px;
  background: rgb(77 147 204 / 0.1);
  color: var(--sky-blue);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  text-box: none;
}

.eyebrow-pill::before {
  content: '';
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: currentColor;
}

.display-title {
  color: var(--black);
  font-size: clamp(34px, 3.82vw, 55px);
  font-weight: 600;
  line-height: 1.418;
}

.page-title {
  color: var(--ink-90);
  font-size: clamp(32px, 3.125vw, 45px);
  font-weight: 700;
  line-height: 1.444;
}

.page-title--semibold {
  font-weight: 600;
}

.lead {
  color: var(--ink-70);
  font-size: clamp(17px, 1.528vw, 22px);
  line-height: 1.727;
}

.lead--sm {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.833;
}

.section-title {
  color: var(--ink-90);
  font-size: clamp(30px, 3.194vw, 46px);
  font-weight: 600;
  line-height: 1.543;
}

.section-title--tight {
  color: var(--black);
  line-height: 1.304;
  letter-spacing: 0.01em;
}

.section-title--center {
  color: var(--ink-90);
  font-size: clamp(28px, 2.5vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.em-italic {
  font-style: oblique 10deg;
  font-weight: 700;
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-head .eyebrow + .section-title--center {
  margin-top: 30px;
}

/* ----- Tags & badges ------------------------------------------------------ */
.tag {
  --tag: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 15px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tag) 10%, transparent);
  color: var(--tag);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.tag--sm {
  min-height: 33px;
  font-size: 12px;
}

.tag--accelerator { --tag: var(--green); }
.tag--add-on { --tag: var(--sky-blue); }
.tag--toolkit { --tag: var(--gold); }

.dot-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sky-blue);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.dot-label::before {
  content: '';
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
}

.dot-label > span {
  text-box: trim-both cap alphabetic;
}

/* ----- Icon tiles --------------------------------------------------------- */
.icon-tile {
  --tile: var(--sky-blue);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 30px;
  background: color-mix(in srgb, var(--tile) 8%, transparent);
  color: var(--tile);
}

.icon-tile svg {
  width: auto;
  height: auto;
}

.icon-tile--light {
  --tile: var(--white);
  background: rgb(255 255 255 / 0.1);
}

.icon-tile--gold {
  --tile: var(--gold);
}

/* ----- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: var(--inset) var(--inset) 0;
  border-radius: clamp(24px, 2.778vw, 40px);
  background: linear-gradient(rgb(84 168 232 / 0.08), rgb(84 168 232 / 0.08)), var(--white);
}

.hero > .container {
  width: min(100% - 2 * max(16px, var(--gutter) - var(--inset)), var(--container));
}

.hero__decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero__grid {
  position: absolute;
  max-width: none;
  height: auto;
  opacity: 0.5;
}

.hero__glow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(77 147 204 / 0.4), rgb(77 147 204 / 0));
  filter: blur(60px);
}

/* Home hero */
.hero--home {
  padding: 218px 0 154px;
}

.hero--home .hero__grid {
  top: -125px;
  left: -293px;
  width: 932px;
}

.hero__waves {
  position: absolute;
  top: -74px;
  right: 0;
  width: 475px;
  max-width: none;
  height: auto;
  transform: scaleX(-1);
  mix-blend-mode: multiply;
}

.hero--home .display-title {
  margin-top: 42px;
  max-width: 822px;
}

.hero--home .lead {
  max-width: 648px;
  margin-top: 71px;
}

.hero--home .btn-group {
  margin-top: 72px;
}

.hero--home .btn--primary {
  min-width: 230px;
}

.hl {
  position: relative;
  font-weight: 700;
  white-space: nowrap;
}

.hl::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0.94em;
  pointer-events: none;
  background: no-repeat center / 100% 100%;
}

.hl--gold::after {
  left: 0.03em;
  width: 2.745em;
  height: 0.255em;
  background-image: url('../assets/decor/underline-gold.webp');
}

.hl--green::after {
  left: -0.02em;
  width: 3.71em;
  height: 0.31em;
  background-image: url('../assets/decor/underline-green.webp');
  transform: rotate(-1.72deg);
  transform-origin: left top;
}

/* Inner-page heroes */
.hero--page {
  min-height: 600px;
  padding: 195px 0 68px;
}

.hero--solutions {
  padding: 152px 0 89px;
}

.hero--compact {
  display: block;
  min-height: 500px;
  padding: 228px 0 106px;
}

.hero--page .hero__grid {
  top: -19px;
  right: -341px;
  width: 1090px;
}

.hero--compact .hero__grid {
  right: -356px;
  width: 1120px;
}

.hero--page .hero__glow {
  top: 18px;
  right: -30px;
  width: 416px;
  height: 416px;
}

.hero--compact .hero__glow {
  top: -57px;
  right: -30px;
  width: 502px;
  height: 502px;
}

.hero__split {
  display: grid;
  grid-template-columns: minmax(0, 540px) auto;
  align-items: start;
  justify-content: space-between;
  gap: 48px;
}

.hero__split .hero__intro {
  margin-top: 50px;
}

.hero--solutions .hero__split .hero__intro {
  margin-top: 93px;
}

.hero__intro .lead {
  margin-top: 54px;
}

.hero--compact .hero__intro {
  max-width: 611px;
}

.hero--compact .lead {
  max-width: 540px;
}

/* ----- Clients strip ------------------------------------------------------ */
.clients {
  padding: 80px 0 97px;
}

.clients__title {
  color: var(--ink-50);
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
}

.clients__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px 48px;
  max-width: 1152px;
  margin: 71px auto 0;
  padding: 0;
  list-style: none;
}

.clients__logos img {
  width: auto;
  height: auto;
}

/* ----- Home: engineering values ------------------------------------------ */
.values {
  padding: 146px 0 101px;
  background: rgb(45 177 121 / 0.04);
}

.values .section-title {
  max-width: 656px;
}

.value-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 109px;
  padding: 0;
  list-style: none;
}

.value-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 45px 28px 32px;
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 0 70px rgb(38 145 100 / 0.1);
}

.value-card__num {
  color: rgb(45 177 121 / 0.4);
  font-family: var(--font-serif);
  font-size: 70px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1.5px;
  text-box: trim-both cap alphabetic;
}

.value-card__title {
  margin-top: 56px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.value-card__text {
  width: calc(100% + 8px);
  max-width: var(--text-w, none);
  margin-top: 30px;
  color: var(--ink-60);
  font-size: 16px;
  line-height: 1.5;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 51px;
  margin-top: auto;
  padding: 0 28px;
  border-radius: 30px;
  background: rgb(45 177 121 / 0.1);
  color: var(--green);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

.value-card__text {
  margin-bottom: 44px;
}

/* ----- Accelerator cards (Home + Solutions) ------------------------------ */
.accelerators {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding: 141px 0 100px;
}

.glow {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(77 147 204 / var(--glow-alpha, 0.2)), rgb(77 147 204 / 0));
  filter: blur(40px);
}

.accelerators .glow--right {
  top: -43px;
  right: -176px;
  width: 733px;
  height: 733px;
}

.accelerators .glow--left {
  --glow-alpha: 0.3;
  top: 404px;
  left: -187px;
  width: 573px;
  height: 573px;
}

.acc-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 75px;
  padding: 0;
  list-style: none;
}

.acc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  padding: 32px 32px 30px;
  border-radius: 60px;
  outline: 1px solid var(--line);
  outline-offset: -0.5px;
  background: var(--white);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.acc-card--featured {
  outline-color: var(--ocean);
  background: var(--ocean);
  color: var(--white);
}

.acc-card__title {
  margin-top: 73px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.acc-card--featured .acc-card__title {
  font-weight: 700;
}

.acc-card__title a {
  text-decoration: none;
}

.acc-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.acc-card__text {
  max-width: 308px;
  margin-top: 25px;
  margin-bottom: 24px;
  color: var(--ink-70);
  font-size: 16px;
  line-height: 1.5625;
  letter-spacing: 0.01em;
}

.acc-card--featured .acc-card__text {
  max-width: 321px;
  color: var(--white);
  font-weight: 500;
}

.acc-card__arrow {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: auto 0 0 auto;
  border: 1px solid var(--arrow-ring);
  border-radius: 50%;
  color: var(--arrow);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.acc-card--featured .acc-card__arrow {
  border-color: var(--white);
  color: var(--white);
}

.acc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgb(27 41 85 / 0.12);
}

.acc-card:hover .acc-card__arrow {
  border-color: var(--dark-blue);
  background: var(--dark-blue);
  color: var(--white);
}

.acc-card--featured:hover .acc-card__arrow {
  border-color: var(--white);
  background: var(--white);
  color: var(--ocean);
}

.accelerators__more {
  display: flex;
  justify-content: center;
  margin-top: 75px;
}

.btn--wide {
  min-width: min(325px, 100%);
}

/* Solutions page variant: taller cards with feature bullets */
.acc-cards--detailed .acc-card {
  min-height: 526px;
}

.acc-cards--detailed .acc-card__title {
  margin-top: 64px;
}

.acc-cards--detailed .acc-card__text {
  color: var(--ink-60);
}

.acc-cards--detailed .acc-card--featured .acc-card__text {
  color: var(--white);
}

.acc-card__features {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-70);
}

.acc-card--featured .acc-card__features {
  color: var(--white);
}

.acc-card__features li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: -6px;
  font-size: 16px;
  line-height: 1.5;
}

.acc-card__features li::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.acc-card__features li > span {
  text-box: trim-both cap alphabetic;
}

.acc-cards--detailed .acc-card:hover {
  transform: none;
  box-shadow: none;
}

/* ----- CTA panel ---------------------------------------------------------- */
.cta-wrap {
  padding: 0 var(--cta-inset);
}

.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 1330px;
  margin-inline: auto;
  padding: 126px 72px 126px 99px;
  border-radius: 40px;
  background: linear-gradient(77.6deg, var(--cta-start) 0%, var(--cta-start) 24%, var(--cta-end) 100%);
  color: var(--white);
}

.cta__decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.cta__grid {
  position: absolute;
  top: -242px;
  left: -302px;
  width: 764px;
  max-width: none;
  opacity: 0.1;
}

.cta__logo {
  position: absolute;
  top: 8px;
  right: 0;
  width: 621px;
  max-width: none;
  opacity: 0.05;
}

.cta__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.cta__text {
  max-width: 654px;
}

.cta__title {
  font-size: clamp(28px, 2.778vw, 40px);
  font-weight: 600;
  line-height: 1.2;
}

.cta__lead {
  max-width: 648px;
  margin-top: 45px;
  color: rgb(255 255 255 / 0.8);
  font-size: clamp(17px, 1.528vw, 22px);
  line-height: 1.727;
}

.cta__actions {
  flex-shrink: 0;
}

.cta__actions .btn {
  min-width: 185px;
  padding-inline: 26px;
}

.cta__actions .btn--gold {
  min-width: 190px;
}

/* Newsletter variant (Articles) */
.cta--newsletter {
  padding: 84px 99px 69px;
}

.cta--newsletter .cta__lead {
  margin-top: 40px;
}

.subscribe {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 78px;
}

.subscribe__field {
  width: min(383px, 100%);
  min-height: 64px;
  padding: 0 30px;
  border: 0.7px solid rgb(200 219 235 / 0.6);
  border-radius: 12px;
  background: rgb(255 255 255 / 0.03);
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.subscribe__field::placeholder {
  color: rgb(255 255 255 / 0.6);
  opacity: 1;
}

.subscribe__field:focus {
  border-color: var(--white);
  outline: none;
  background: rgb(255 255 255 / 0.08);
}

.subscribe .btn {
  min-width: 165px;
}

.form-status {
  flex-basis: 100%;
  min-height: 1lh;
  font-size: 15px;
  line-height: 1.5;
  text-box: none;
}

.form-status:empty {
  display: none;
}

.form-status.is-error {
  color: #ffb4a8;
}

.form-status.is-success {
  color: #8fe3bd;
}

.newsletter {
  margin-top: 74px;
}

.faq + .cta-wrap {
  margin-top: 100px;
}

/* ----- Footer ------------------------------------------------------------- */
.site-footer {
  margin-top: 100px;
  background: var(--navy);
  color: var(--white);
}

.site-footer__main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 48px;
  padding: 70px 50px 70px 21px;
}

.social {
  display: flex;
  gap: 35px;
  margin: 52px 0 0 18px;
  padding: 0;
  list-style: none;
}

.social a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: rgb(255 255 255 / 0.6);
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}

.social a:hover {
  color: var(--white);
  transform: translateY(-2px);
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 135px);
  gap: 48px 90px;
}

.footer-nav__title {
  color: rgb(255 255 255 / 0.6);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-box: none;
}

.footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}

.footer-nav a {
  display: inline-block;
  color: rgb(255 255 255 / 0.7);
  font-size: 18px;
  line-height: 27px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}

.footer-nav a:hover {
  color: var(--white);
}

.site-footer__bottom {
  padding: 28px var(--gutter) 29px;
  border-top: 0.8px solid rgb(255 255 255 / 0.15);
  color: rgb(255 255 255 / 0.5);
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 18px;
  text-align: center;
}

/* ----- Industries: stats card -------------------------------------------- */
.stats-card {
  position: relative;
  justify-self: end;
  width: 527px;
  max-width: 100%;
  margin-right: 14px;
  padding: 50px 42px 51px;
  border-radius: 50px;
  background: var(--white);
}

.stats-grid {
  position: relative;
  display: grid;
  list-style: none;
  grid-template-columns: 1fr 1fr;
  row-gap: 80px;
  margin: 0;
  padding: 2px 0 8px;
}

.stats-grid::before,
.stats-grid::after {
  content: '';
  position: absolute;
  background: var(--line-soft);
}

/* horizontal rule broken around the centre dot */
.stats-grid::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--line-soft) calc(50% - 22px), transparent calc(50% - 22px),
    transparent calc(50% + 21px), var(--line-soft) calc(50% + 21px));
}

/* vertical rule broken around the centre dot */
.stats-grid::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, var(--line-soft) calc(50% - 21px), transparent calc(50% - 21px),
    transparent calc(50% + 21px), var(--line-soft) calc(50% + 21px));
}

/* centre dot where the rules meet */
.stats-card::after {
  content: '';
  position: absolute;
  top: calc(50% - 0.5px);
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--sky-blue);
}

.stat {
  display: flex;
  flex-direction: column;
  padding-left: 8px;
}

.stat:nth-child(even) {
  padding-left: calc(68px);
}

.stat__value {
  color: var(--sky-blue);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  text-box: trim-both cap alphabetic;
}

.stat__label {
  margin-top: 19.5px;
  color: var(--dark-blue);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.stat__note {
  margin-top: 13px;
  color: rgb(27 41 85 / 0.6);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.42;
}

/* ----- Industries: features ---------------------------------------------- */
.features {
  margin-top: 16px;
  padding: 116px 0 120px;
  background: linear-gradient(180deg, var(--white), #fbf7ec);
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin-top: 90px;
  padding: 0;
  list-style: none;
}

.feature-card {
  padding: 32px 58px 54px 32px;
  border-radius: 50px;
  outline: 1.6px solid rgb(212 177 62 / 0.2);
  outline-offset: -0.8px;
  background: var(--white);
}

.feature-card__title {
  margin: 40px 0 0 3px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.feature-card__text {
  margin: 30px 0 0 3px;
  color: var(--ink-60);
  font-size: 14px;
  line-height: 1.786;
  letter-spacing: 0.01em;
}

/* ----- Industries: constraints (dark band) ------------------------------- */
.constraints {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 175px 0 93px;
  background: linear-gradient(270deg, #020d32, #142046);
  color: var(--white);
}

.constraints .glow {
  --glow-rgb: 45 177 121;
  background: radial-gradient(closest-side, rgb(45 177 121 / 0.3), rgb(45 177 121 / 0));
  z-index: 0;
}

.constraints .glow--right {
  top: 0;
  right: -96px;
  width: 573px;
  height: 523px;
}

.constraints .glow--left {
  top: 352px;
  left: -237px;
  width: 501px;
  height: 501px;
}

.constraints__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 631px) minmax(0, 521px);
  justify-content: space-between;
  gap: 48px;
}

.constraints .section-title {
  max-width: 628px;
  color: var(--white);
}

.constraints__text {
  margin-top: 60px;
  color: rgb(255 255 255 / 0.7);
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.01em;
}

.constraints__rule {
  height: 0;
  margin: 72px 0 0;
  border: 0;
  border-top: 0.6px solid rgb(255 255 255 / 0.2);
}

.constraints__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 86px;
  margin: 60px -8px 0 0;
  padding: 0;
  list-style: none;
}

.big-stat {
  display: flex;
  flex-direction: column;
}

.big-stat__value {
  color: var(--gold);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 2px;
  text-box: trim-both cap alphabetic;
}

.big-stat--green .big-stat__value {
  color: var(--green);
}

.big-stat__label {
  margin-top: 26px;
  color: rgb(255 255 255 / 0.6);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chart {
  position: relative;
  align-self: start;
  justify-self: end;
  width: 521px;
  max-width: calc(100% + 34px);
  margin: 41px -34px 0 0;
}

.chart::before {
  content: '';
  position: absolute;
  top: 50px;
  left: -40px;
  width: 557px;
  height: 294px;
  border-radius: 21px;
  background: rgb(255 255 255 / 0.03);
  transform: rotate(-10.4deg);
  transform-origin: 0 0;
}

.chart__card {
  position: relative;
  padding: 44px 42px 44px;
  border-radius: 21px;
  background: rgb(255 255 255 / 0.06);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.chart__title {
  color: rgb(255 255 255 / 0.6);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.chart__rows {
  display: flex;
  flex-direction: column;
  gap: 54px;
  margin: 62px 0 0;
  padding: 0;
  list-style: none;
}

.chart__row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

.chart__label {
  color: rgb(255 255 255 / 0.8);
  text-box: trim-both cap alphabetic;
}

.chart__meta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgb(255 255 255 / 0.7);
}

.chart__meta span {
  text-box: trim-both cap alphabetic;
}

.chart__meta i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.3);
}

.chart__bar {
  position: relative;
  height: 10px;
  margin-top: 24.5px;
  border-radius: 33px;
  background: rgb(255 255 255 / 0.7);
  overflow: hidden;
}

.chart__bar--split {
  background: rgb(255 255 255 / 0.2);
}

.chart__bar--split::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill, 36.8%);
  border-radius: inherit;
  background: var(--sky-blue);
}

/* ----- Industries: case studies ------------------------------------------ */
.case-studies {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 130px 0 100px;
}

/* Keeps the gap above the CTA while case studies are hidden */
.case-studies[hidden] + .cta-wrap {
  margin-top: 100px;
}

.case-studies__mark {
  position: absolute;
  z-index: -1;
  top: -190px;
  right: -180px;
  width: 626px;
  max-width: none;
  opacity: 0.1;
  pointer-events: none;
}

.case-studies__head {
  max-width: 689px;
}

.case-studies__head .section-title {
  max-width: 560px;
  margin-top: 41px;
}

.case-studies__head .lead {
  margin-top: 40px;
  color: var(--ink-60);
}

.case-studies__layout {
  display: grid;
  grid-template-columns: minmax(0, 438px) minmax(0, 791px);
  justify-content: space-between;
  align-items: start;
  gap: 22px;
  margin: 72px -10px 0 -1px;
}

.cs-tabs {
  display: flex;
  flex-direction: column;
}

.cs-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 33px 30px 33px;
  border: 0;
  border-radius: 30px;
  background: transparent;
  text-align: left;
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.cs-tab + .cs-tab {
  margin-top: 27px;
}

.cs-tab:not(.is-active) + .cs-tab:not(.is-active) {
  margin-top: 54px;
}

.cs-tab:not(.is-active) + .cs-tab:not(.is-active)::before {
  content: '';
  position: absolute;
  top: -27px;
  left: 17px;
  right: 17px;
  height: 1px;
  background: rgb(27 41 85 / 0.12);
}

.cs-tab .dot-label {
  color: rgb(27 41 85 / 0.6);
}

.cs-tab .dot-label::before {
  opacity: 0.4;
}

.cs-tab__name {
  margin-top: 25px;
  color: var(--ink-70);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  text-box: trim-both cap alphabetic;
}

.cs-tab__desc {
  display: none;
  max-width: 349px;
  margin-top: 18px;
  color: var(--ink-80);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6875;
  text-box: trim-both cap alphabetic;
}

.cs-tab:hover .cs-tab__name {
  color: var(--black);
}

.cs-tab.is-active {
  background: var(--white);
  box-shadow: 0 0 70px rgb(0 0 0 / 0.08);
}

.cs-tab.is-active .dot-label {
  color: var(--sky-blue);
}

.cs-tab.is-active .dot-label::before {
  opacity: 1;
}

.cs-tab.is-active .cs-tab__name {
  color: var(--black);
}

.cs-tab.is-active .cs-tab__desc {
  display: block;
}

.cs-panel {
  padding: 40px 50px 50px;
  border-radius: 30px;
  background: var(--white);
  box-shadow: 0 0 80px rgb(0 0 0 / 0.08);
}

.cs-panel[hidden] {
  display: none;
}

.cs-panel__tag {
  display: inline-flex;
  min-height: 53px;
  padding: 0 28px 0 29px;
  border-radius: 28px;
  background: rgb(77 147 204 / 0.1);
}

.cs-panel__title {
  max-width: 683px;
  margin-top: 28px;
  color: rgb(19 19 19 / 0.81);
  font-size: clamp(24px, 2.083vw, 30px);
  font-weight: 700;
  line-height: 1.467;
}

.cs-panel__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin: 54px 0 0;
  padding: 0;
  list-style: none;
}

.cs-stat {
  display: flex;
  flex-direction: column;
  width: min(252px, 100%);
  min-height: 90px;
  padding: 22px 30px 20px;
  border-radius: 11px;
  background: rgb(212 177 62 / 0.1);
}

.cs-stat--green {
  background: rgb(45 177 121 / 0.1);
}

.cs-stat__value {
  color: var(--gold);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  text-box: trim-both cap alphabetic;
}

.cs-stat--green .cs-stat__value {
  color: var(--green);
  letter-spacing: 2px;
}

.cs-stat__label {
  margin-top: 20.5px;
  color: var(--ink-60);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cs-panel__text {
  max-width: 683px;
  margin-top: 36px;
  color: var(--ink-60);
  font-size: 14px;
  line-height: 1.714;
  letter-spacing: 0.01em;
}

.cs-panel .btn {
  margin-top: 50px;
}

/* ----- Solutions: solution finder ---------------------------------------- */
.finder {
  justify-self: end;
  width: 527px;
  max-width: calc(100% + 29px);
  margin-right: -29px;
  padding: 35px 45px 32px;
  border-radius: 40px;
  background: var(--white);
}

.finder__title {
  margin-left: 6px;
  color: rgb(27 41 85 / 0.6);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 2px;
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.search-field__icon {
  position: absolute;
  left: 19px;
  width: 14px;
  height: 14px;
  color: rgb(27 41 85 / 0.5);
  pointer-events: none;
}

.search-field input {
  width: 100%;
  min-height: 48px;
  padding: 0 16px 0 42px;
  border: 1px solid var(--line-input);
  border-radius: 12px;
  background: var(--white);
  color: var(--dark-blue);
  font-size: 14px;
  line-height: 16px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.search-field input::placeholder {
  color: rgb(27 41 85 / 0.5);
  opacity: 1;
}

.search-field input:focus {
  border-color: var(--sky-blue);
  outline: none;
  box-shadow: 0 0 0 4px rgb(77 147 204 / 0.12);
}

.finder .search-field {
  margin-top: 18px;
}

.finder__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.finder__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 33px;
  color: var(--ink-90);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.finder__item:hover > span:first-child {
  color: var(--dark-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.finder__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 23px -12px 0;
  padding: 21px 12px 0;
  border-top: 0.8px solid var(--line-soft);
}

.finder__count {
  color: rgb(27 41 85 / 0.7);
  font-size: 13px;
  font-weight: 300;
  line-height: 1;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  color: var(--sky-blue);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.text-link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s var(--ease);
}

.text-link:hover svg {
  transform: translateX(3px);
}

/* ----- Solutions: featured ----------------------------------------------- */
.featured {
  padding: 143px 0 0;
}

.featured .glow--left {
  --glow-alpha: 0.3;
  top: 310px;
  left: -203px;
  width: 573px;
  height: 573px;
}

/* ----- Solutions: methodology -------------------------------------------- */
.methodology {
  margin-top: 90px;
  padding: 100px 0 106px;
  background: rgb(45 177 121 / 0.04);
}

.steps {
  display: grid;
  grid-template-columns: 249fr 242fr 273fr 261fr;
  gap: 48px 72px;
  margin: 90px 0 0;
  padding: 0;
  list-style: none;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.step__num {
  display: grid;
  place-items: center;
  width: 109px;
  height: 109px;
  border: 2px solid rgb(45 177 121 / 0.12);
  border-radius: 50%;
}

.step__num span {
  display: grid;
  place-items: center;
  width: 105px;
  height: 105px;
  border: 2px solid var(--green);
  border-radius: 50%;
  color: rgb(45 177 121 / 0.5);
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1.5px;
}

.step__title {
  margin-top: 41px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.step__text {
  margin-top: 28px;
  color: var(--ink-60);
  font-size: 15px;
  line-height: 1.533;
}

/* ----- Solutions: directory ---------------------------------------------- */
.directory {
  padding: 100px 0 100px;
}

.directory .section-title {
  margin-top: 33px;
  line-height: 1.2;
}

.directory__search {
  max-width: 833px;
  margin-top: 60px;
}

.directory__label {
  display: block;
  color: rgb(27 41 85 / 0.7);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1px;
  text-box: trim-both cap alphabetic;
}

.directory__search .search-field {
  margin-top: 21px;
}

.directory__search .search-field input {
  min-height: 60px;
  padding-left: 30px;
  font-size: 16px;
  letter-spacing: 1px;
}

.directory__search .search-field input::-webkit-search-cancel-button {
  cursor: pointer;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 35px 0 0;
  padding: 0;
  list-style: none;
}

.filter {
  min-width: var(--chip-w, 0);
  min-height: 56px;
  padding: 0 36px;
  border: 1px solid var(--line-input);
  border-radius: 55px;
  background: var(--white);
  color: rgb(27 41 85 / 0.6);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.filter:hover {
  border-color: var(--dark-blue);
  color: var(--dark-blue);
}

.filter[aria-pressed='true'] {
  border-color: var(--dark-blue);
  background: var(--dark-blue);
  color: var(--white);
  font-weight: 600;
}

.dir-table-wrap {
  margin: 70px -16px 0;
  border: 1.04px solid var(--table-line);
  border-radius: 30px;
  overflow: hidden;
  background: var(--white);
}

.dir-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.dir-table th {
  padding: 29px 27px 25.5px;
  border-bottom: 1.04px solid var(--table-line);
  background: var(--table-head);
  color: rgb(27 41 85 / 0.6);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.dir-table th > span {
  display: block;
  text-box: trim-both cap alphabetic;
}

.dir-table th:first-child,
.dir-table td:first-child {
  width: 49.5%;
}

.dir-table th:nth-child(2),
.dir-table td:nth-child(2) {
  width: 14.8%;
}

/* Figma rows are 93px tall with a 16px gap after each divider */
.dir-table td {
  padding: 43px 27px 21.5px;
  border-bottom: 1.04px solid var(--table-row-line);
  vertical-align: middle;
}

.dir-table tbody tr:first-child td {
  padding-top: 27px;
}

.dir-table tbody tr:nth-last-child(2) td {
  padding-bottom: 53px;
  border-bottom: 0;
}

.dir-table__name {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}

.dir-table__desc {
  margin-top: 20px;
  color: var(--ink-50);
  font-size: 16px;
  line-height: 1.25;
}

.dir-table__best {
  color: var(--ink-60);
  font-size: 16px;
  font-style: oblique 10deg;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.02em;
}

.dir-table tr.is-hidden {
  display: none;
}

.dir-table__empty td {
  padding: 48px 27px;
  color: var(--ink-60);
  text-align: center;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 68px;
}

.pagination__btn {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgb(27 41 85 / 0.5);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.pagination__btn:hover:not(:disabled) {
  background: rgb(27 41 85 / 0.06);
  color: var(--dark-blue);
}

.pagination__btn[aria-current='page'] {
  color: var(--dark-blue);
  font-weight: 700;
}

.pagination__btn--nav {
  border: 1px solid rgb(27 41 85 / 0.6);
  border-radius: 50%;
  color: #185bc3;
}

.pagination__btn--nav svg {
  width: 24px;
  height: 24px;
  opacity: 0.6;
}

.pagination__btn--nav:disabled {
  border-color: rgb(27 41 85 / 0.5);
  color: rgb(27 41 85 / 0.5);
  opacity: 0.5;
  cursor: default;
}

.pagination__btn--nav:disabled svg {
  opacity: 1;
}

/* ----- Solutions: FAQ ---------------------------------------------------- */
.faq {
  padding: 143px 0 100px;
  background: rgb(77 147 204 / 0.04);
}

.faq__card {
  max-width: 1156px;
  margin: 60px auto 0;
  padding: 23px 38px 30px;
  border-radius: 47px;
  outline: 1px solid var(--line);
  outline-offset: -0.5px;
  background: var(--white);
}

.faq__item {
  padding-inline: 12px;
}

.faq__item + .faq__item {
  border-top: 1px solid var(--line-soft);
}

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 47px 0 49px;
  border: 0;
  background: none;
  color: var(--ink-90);
  text-align: left;
}

.faq__question {
  font-size: clamp(18px, 1.528vw, 22px);
  font-weight: 500;
  line-height: 1.3;
  text-box: trim-both cap alphabetic;
}

.faq__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 16px; /* layout height of the question text; the 26px glyph overflows */
  color: rgb(27 41 85 / 0.4);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}

.faq__icon svg {
  width: 26px;
  height: 26px;
}

.faq__trigger:hover .faq__icon {
  color: var(--dark-blue);
}

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}

.faq__panel > div {
  overflow: hidden;
}

.faq__answer {
  max-width: 879px;
  padding-bottom: 40px;
  color: var(--ink-60);
  font-size: clamp(16px, 1.389vw, 20px);
  line-height: 1.65;
  letter-spacing: 0.01em;
}

.faq__item.is-open .faq__trigger {
  padding-bottom: 40px;
  color: var(--black);
}

.faq__item.is-open .faq__question {
  font-weight: 600;
}

.faq__item.is-open .faq__icon {
  color: var(--sky-blue);
  transform: rotate(45deg);
}

.faq__item.is-open .faq__panel {
  grid-template-rows: 1fr;
}

.faq__item:first-child .faq__trigger {
  padding-top: 47px;
}

/* ----- Contact ------------------------------------------------------------ */
.contact-body {
  padding-top: 100px;
  padding-bottom: 80px;
  background: linear-gradient(180deg, var(--white), #f1f6fb);
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 75px 0 0;
  padding: 0;
  list-style: none;
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 346px;
  padding: 45px 38px 64px;
  border-radius: 60px;
  outline: 1px solid var(--line);
  outline-offset: -0.5px;
  background: var(--white);
}

.contact-card__title {
  margin-top: 46px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.contact-card__text {
  margin-top: 25px;
  color: var(--ink-60);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5625;
  letter-spacing: 0.01em;
}

.contact-card__links {
  display: flex;
  flex-direction: column;
  gap: 29.6px;
  margin: 50px 0 0;
  padding: 0;
  list-style: none;
}

.contact-card__links li {
  display: flex;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-80);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-link--phone {
  font-size: 16px;
}

.contact-link svg {
  flex-shrink: 0;
  color: var(--sky-blue);
}

.contact-link span {
  text-box: trim-both cap alphabetic;
}

.contact-link:hover {
  color: var(--dark-blue);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.contact-panel {
  display: grid;
  grid-template-columns: minmax(0, 453px) minmax(0, 569px);
  justify-content: space-between;
  gap: 48px;
  margin-top: 100px;
  padding: 60px 77px 60px 54px;
  border-radius: 47px;
  outline: 1px solid var(--line);
  outline-offset: -0.5px;
  background: var(--white);
}

.contact-panel__art {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 878px;
  border-radius: 40px;
  background: linear-gradient(148.3deg, var(--cta-start) 0%, var(--cta-start) 30%, var(--cta-end) 100%);
}

.contact-panel__grid {
  position: absolute;
  z-index: -1;
  top: -150px;
  left: -180px;
  width: 520px;
  max-width: none;
  opacity: 0.1;
}

.contact-panel__mark {
  position: absolute;
  z-index: -1;
  right: -6px;
  bottom: 10px;
  width: 259px;
  max-width: none;
  opacity: 0.05;
}

.contact-panel .brand--lg .brand__mark {
  width: 76px;
}

.contact-panel .brand--lg .brand__line2 {
  margin-top: 12.5px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  padding-top: 15px;
}

.contact-form__title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
}

.field {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}

.contact-form__title + .field {
  margin-top: 64px;
}

.field label {
  color: var(--ink-80);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-box: trim-both cap alphabetic;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 56px;
  margin-top: 18px;
  padding: 0 25px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 4px 60px rgb(0 0 0 / 0.05);
  color: var(--black);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field textarea {
  min-height: 119px;
  padding-top: 18px;
  padding-bottom: 18px;
  resize: vertical;
}

.field ::placeholder {
  color: var(--ink-40);
  opacity: 1;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--sky-blue);
  outline: none;
  box-shadow: 0 0 0 4px rgb(77 147 204 / 0.12), 0 4px 60px rgb(0 0 0 / 0.05);
}

.field [aria-invalid='true'] {
  border-color: #d64545;
}

.select {
  position: relative;
}

.select select {
  appearance: none;
  padding-right: 56px;
  cursor: pointer;
}

.select select:invalid,
.select select.is-placeholder {
  color: var(--ink-60);
}

.select svg {
  position: absolute;
  top: calc(50% + 9px);
  right: 26px;
  width: 15px;
  height: 7px;
  margin-top: -3.5px;
  color: rgb(27 41 85 / 0.5);
  pointer-events: none;
}

.field__error {
  margin-top: 10px;
  color: #c03a3a;
  font-size: 14px;
  line-height: 1.4;
  text-box: none;
}

.field__error:empty {
  display: none;
}

.contact-form .btn {
  margin-top: 53px;
}

.contact-form .form-status {
  margin-top: 16px;
  color: var(--ink-70);
  text-align: center;
}

.contact-form .form-status.is-error {
  color: #c03a3a;
}

.contact-form .form-status.is-success {
  color: #1f8a5c;
}

/* ----- Small utilities ---------------------------------------------------- */
.is-placeholder-copy {
  color: var(--ink-50);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1279px) {
  .site-nav__list {
    gap: 40px;
  }

  .site-nav__cta {
    margin-left: 40px;
  }

  .stats-card,
  .finder {
    margin-right: 0;
    max-width: 100%;
  }

  .chart {
    margin-right: 0;
  }

  .dir-table-wrap {
    margin-inline: 0;
  }

  .case-studies__layout {
    margin-inline: 0;
  }
}

@media (max-width: 1100px) {
  .hero__split,
  .constraints__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero--page,
  .hero--solutions {
    min-height: 0;
    padding: 180px 0 64px;
  }

  .hero__split .hero__intro,
  .hero--solutions .hero__split .hero__intro {
    margin-top: 0;
  }

  .hero__split > :last-child {
    justify-self: start;
    width: min(100%, 560px);
  }

  .chart {
    justify-self: start;
    width: min(100%, 560px);
    margin: 32px 0 0;
  }

  .cta__inner {
    flex-direction: column;
    gap: 48px;
  }

  .cta {
    padding: clamp(56px, 8vw, 110px) clamp(24px, 6vw, 72px);
  }

  .case-studies__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .cs-tabs {
    max-width: 560px;
  }
}

@media (max-width: 1023px) {
  :root {
    --header-height: 66px;
  }

  .site-header__bar {
    padding: 0 12px 0 22px;
  }

  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin: 0;
    padding: 24px;
    border: 1px solid var(--white);
    border-radius: 28px;
    background: rgb(255 255 255 / 0.98);
    box-shadow: 0 24px 60px rgb(27 41 85 / 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s;
  }

  .site-header.is-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .site-nav__link {
    padding: 14px 12px;
    border-radius: 14px;
  }

  .site-nav__link:hover,
  .site-nav__link[aria-current='page'] {
    background: rgb(77 147 204 / 0.08);
  }

  .site-nav__cta {
    min-height: 52px;
    margin-left: 0;
  }

  .hero--home {
    padding: 150px 0 96px;
  }

  .hero--compact {
    min-height: 0;
    padding: 160px 0 72px;
  }

  .hero--home .display-title {
    margin-top: 32px;
  }

  .hero--home .lead,
  .hero--home .btn-group {
    margin-top: 44px;
  }

  .hero__intro .lead {
    margin-top: 36px;
  }

  .clients {
    padding: 64px 0 72px;
  }

  .clients__logos {
    justify-content: center;
    gap: 32px 56px;
    margin-top: 48px;
  }

  .values,
  .accelerators {
    padding: 96px 0 88px;
  }

  .value-cards,
  .acc-cards,
  .feature-cards,
  .contact-cards {
    margin-top: 56px;
  }

  .features {
    padding: 88px 0 96px;
  }

  .feature-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .value-cards,
  .acc-cards,
  .contact-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .value-cards > :last-child:nth-child(odd),
  .acc-cards > :last-child:nth-child(odd),
  .contact-cards > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .constraints {
    padding: 104px 0 80px;
  }

  .case-studies {
    padding: 96px 0 88px;
  }

  .case-studies[hidden] + .cta-wrap {
    margin-top: 88px;
  }

  .featured {
    padding-top: 96px;
  }

  .methodology {
    margin-top: 72px;
    padding: 88px 0;
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 64px;
  }

  .directory {
    padding: 88px 0;
  }

  .faq {
    padding: 96px 0 88px;
  }

  .dir-table th:first-child,
  .dir-table td:first-child {
    width: 44%;
  }

  .contact-panel {
    grid-template-columns: minmax(0, 1fr);
    padding: clamp(16px, 4vw, 48px);
  }

  .contact-panel__art {
    min-height: 240px;
  }

  .contact-panel__mark {
    width: 180px;
  }

  .contact-form {
    padding: 8px clamp(0px, 3vw, 32px) 16px;
  }
}

@media (max-width: 640px) {
  .value-cards,
  .acc-cards,
  .contact-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .hero {
    border-radius: 28px;
  }

  .btn {
    min-height: 58px;
  }

  .hero .btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__waves {
    width: 300px;
    top: -40px;
    right: -60px;
    opacity: 0.6;
  }

  .hero--home .hero__grid {
    width: 640px;
    top: -90px;
    left: -220px;
  }

  .hero--page .hero__grid,
  .hero--compact .hero__grid {
    top: -40px;
    right: -420px;
  }

  .stats-card {
    padding: 36px 24px;
    border-radius: 32px;
  }

  .stat:nth-child(even) {
    padding-left: 32px;
  }

  .clients__logos li {
    display: flex;
    justify-content: center;
    width: calc(50% - 28px);
  }

  .clients__logos img {
    max-height: 32px;
  }

  .value-card__num {
    font-size: 56px;
  }

  .value-card__title {
    margin-top: 40px;
  }

  .acc-card {
    min-height: 0;
    border-radius: 40px;
  }

  .acc-card__title {
    margin-top: 44px;
  }

  .acc-cards--detailed .acc-card {
    min-height: 0;
  }

  .acc-cards--detailed .acc-card__title {
    margin-top: 44px;
  }

  .feature-card {
    padding: 28px 24px 40px;
    border-radius: 32px;
  }

  .feature-card__title {
    margin-top: 32px;
    font-size: 22px;
  }

  .constraints__text {
    margin-top: 40px;
    font-size: 17px;
    line-height: 1.9;
  }

  .constraints__rule,
  .constraints__stats {
    margin-top: 48px;
  }

  .chart__card {
    padding: 32px 24px;
  }

  .chart::before {
    display: none;
  }

  .chart__rows {
    margin-top: 44px;
    gap: 40px;
  }

  .chart__row-head {
    font-size: 14px;
  }

  .cs-panel {
    padding: 28px 24px 32px;
  }

  .cs-panel__tag {
    padding: 0 20px;
  }

  .cs-tab {
    padding: 24px 22px;
  }

  .cs-stat {
    width: 100%;
  }

  .cta {
    border-radius: 28px;
  }

  .cta__lead {
    margin-top: 32px;
  }

  .cta__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .cta__grid {
    width: 560px;
  }

  .cta__logo {
    width: 420px;
    top: auto;
    bottom: -40px;
    right: -120px;
  }

  .subscribe {
    flex-direction: column;
    margin-top: 48px;
  }

  .subscribe__field {
    width: 100%;
  }

  .steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .step__text {
    max-width: 320px;
  }

  .filters {
    gap: 10px;
  }

  .filter {
    min-width: 0;
    min-height: 48px;
    padding: 0 22px;
    font-size: 16px;
  }

  .eyebrow-pill {
    min-height: 46px;
    padding: 0 20px;
    font-size: 14px;
  }

  .br-lg {
    display: none;
  }

  .hero__grid {
    opacity: 0.35;
  }

  .contact-link {
    font-size: 16px;
  }

  .contact-link--phone {
    font-size: 15px;
  }

  /* Directory table collapses to stacked rows */
  .dir-table-wrap {
    margin-top: 48px;
    border-radius: 24px;
  }

  .dir-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .dir-table,
  .dir-table tbody,
  .dir-table tr,
  .dir-table td {
    display: block;
    width: 100% !important;
  }

  .dir-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    padding: 24px 20px;
    border-bottom: 1.04px solid var(--table-row-line);
  }

  .dir-table tbody tr:last-child {
    border-bottom: 0;
  }

  .dir-table td,
  .dir-table tbody tr:first-child td,
  .dir-table tbody tr:nth-last-child(2) td {
    padding: 0;
    border: 0;
  }

  .dir-table tr[hidden] {
    display: none;
  }

  .dir-table td:first-child {
    grid-column: 1 / -1;
  }

  .dir-table td:nth-child(2) {
    grid-row: 2;
  }

  .dir-table td:nth-child(3) {
    grid-column: 1 / -1;
  }

  .dir-table tr.is-hidden {
    display: none;
  }

  .dir-table__name {
    font-size: 17px;
    line-height: 1.3;
  }

  .dir-table__desc {
    margin-top: 14px;
    line-height: 1.5;
  }

  .pagination {
    margin-top: 40px;
    gap: 4px;
  }

  .pagination__btn {
    width: 52px;
    height: 52px;
  }

  .faq__card {
    margin-top: 40px;
    padding: 8px 12px 12px;
    border-radius: 28px;
  }

  .faq__trigger,
  .faq__item:first-child .faq__trigger {
    padding: 28px 0;
  }

  .faq__item.is-open .faq__trigger {
    padding-bottom: 24px;
  }

  .faq__answer {
    padding-bottom: 28px;
  }

  .contact-card {
    min-height: 0;
    padding: 36px 28px 44px;
    border-radius: 36px;
  }

  .contact-panel {
    border-radius: 32px;
  }

  .contact-panel__art {
    border-radius: 24px;
  }

  .site-footer__main {
    padding: 56px 0;
  }

  .footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
  }

  .site-footer__bottom {
    font-size: 14px;
  }
}

@media (max-width: 420px) {
  .brand__mark {
    width: 40px;
  }

  .brand__line1 {
    font-size: 13.5px;
  }

  .brand__line2 {
    font-size: 12.4px;
    letter-spacing: 6.8px;
  }

  .stats-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 36px;
  }

  .stats-grid::before,
  .stats-grid::after,
  .stats-card::after {
    display: none;
  }

  .stat:nth-child(even) {
    padding-left: 8px;
  }

}

@media (max-width: 340px) {
  .footer-nav {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}